İçeriğe geç
yazilimrehberi.dev

Astro'nun Özellikleri

Öncelikle Gerekli ayarları (Astro Eklentisini Yüklemek vb.) yapıp buraya kadar geldiğinizi varsayıyorum. Bunları yaptıysanız artık astro dosyaları geliştirmek için hazırsnız demektir. Konuyu daha da uzatmadan işe başlayalım.

Temel Şablon Oluşturma

İlk önce bir çalışma klasörü oluşturun. Daha sonra klasörün içindeyken sağ tıklayıp terminali çalıştırın veya klasörün içinde kendi terminali olan kullandığınız editör programını açın (Ben VS Code editörünü kullanıyorum) ve terminale bu kodları yazın.

Terminal window
npm create astro@latest

Size Projeyi nereye oluşturacağını soracak. Buraya “nokta” (.) yazıp enter’a basarsanız terminalin o an ki çalıştığı klasörü seçecektir. Eğer ”./Klasörİsmi” şeklinde yazarsanız terminalin o an ki çalıştığı klasörün içine yazdığınız klasör isminde bir klasör oluşturacaktır. Ben nokta ile cevap verdim

Terminal window
Where should we create your new project
.

Daha sonra size “Yeni projenize nasıl başlamak istersiniz?” Diye bir soru soracaktır ve karşınıza 3 seçenek sunacaktır.

Terminal window
Include sample files (recommended)
— Use blog template
— Empty

Burda biz ilk seçeneği seçeceğiz. Enter’ a bastıktan sonra Dosyaların kopyalanmasını bekleyeceğiz bu işlem bilgisiyarınız ve internetinizin hızına göre değişmektedir.

Bu işlemden sonra bize “bağımlı olan dosyaları yüklemek ister misiniz?” diye soruyor.

Terminal window
Install dependencies? (recommended)
● Yes  ○ No

Biz Burda evet seçeneğini seçiyoruz. (Not: isterseniz hayır seçeneğini seçip bağımlı olan dosyaları daha sonra da yükleyebilirsiniz.) Enter’a basıp bağımlı olan dosyaların inmesini bekliyoruz. Eğer indirme sırasında bir hata çıktıysa sorun değil eksik olan dosyaları daha sonra da indirebiliyoruz. (Yazının devamında anlatacağım)

Eğer sorunsuz veya sorunlu şekilde bu adımı geçtiyseniz karşınıza typescript kullanacakmısınız diye soru soracak biz buna şimdilik hayır cevabı veriyoruz. (Not: Daha sonra typescript özelliğin etkinleştirebilirsiniz.)

Terminal window
Do you plan to write TypeScript?
○ Yes  ● No

Sonraki adımda size github reposu oluşturmak istiyormusunuz diye soracak. Eğer github reposu oluşturmak istiyorsanız evet seçeneğini seçebilirsiniz. Ben hayır seçeneğini seçtim.

Terminal window
Do you want to create a GitHub repo?
○ Yes  ● No

Eğer Bağımlı dosyaları (dependencies) yüklerken hata aldıysanız. terminale

Terminal window
npm install

yazıp enter’a basın. Bu komut bağımlı olan dosyaları indirecektir.

Bütün adımları tamamladığımıza göre artık projemizi başlatabiliriz. Ekrana aşağıdaki kodu yazarak projeyi başlatabiliriz.

Terminal window
npm run dev

Projeyi başlattığımız anda ekranda aşağıdaki satırlar gözükecektir.

Terminal window
dev
> astro dev


   astro  v2.5.5 started in 162ms


  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

Tebrikler Başarıyla ilk astro projenizi oluşturdunuz. Artık projenize http://localhost:3000/ adresinden ulaşabilirsiniz.

Not: Eğer 3000 portunda başka bir uygulama çalışıyorsa 3001 bu portta doluysa 3002 portunda çalışır. programı çalıştırdıktan sonra terminali kontrol edin!

Bu adrese girdiğinizde muhtemel görüntü aşağıdaki gibi olacaktır.

örnek bir astrojs görnümü

Slotlar

Astro’da oluşturduğumuz proje içinde src/pages/index.astro dosyasını açıyoruz. Bu dosya bizim ana sayfamızdır. Bu dosyayı açtığımızda aşağıdaki kodlarla karşılaşacağız.

index.astro
---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---


<Layout title="Welcome to Astro.">
    <main>
        <h1>Welcome to <span class="text-gradient">Astro</span></h1>
        <p class="instructions">
            To get started, open the directory <code>src/pages</code> in your project.<br />
            <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
        </p>
        <ul role="list" class="link-card-grid">
            <Card
                href="https://docs.astro.build/"
                title="Documentation"
                body="Learn how Astro works and explore the official API docs."
            />
            <Card
                href="https://astro.build/integrations/"
                title="Integrations"
                body="Supercharge your project with new frameworks and libraries."
            />
            <Card
                href="https://astro.build/themes/"
                title="Themes"
                body="Explore a galaxy of community-built starter themes."
            />
            <Card
                href="https://astro.build/chat/"
                title="Community"
                body="Come say hi to our amazing Discord community. ❤️"
            />
        </ul>
    </main>
</Layout>

Şimdi bu kodları inceleyelim. Astro dosyalarının yapısını bu dosya sayesinde biraz anlayabilirsiniz. bu 3 çizgiler --- arasında yazılan kodlar server-tarafından değerlendiriliyor. Bu sayfada bu çizgiler arasında import ifadesi ile Layout ve Card içeri alınmıştır. Peki bu ne işe yarıyor? Bunun amacı tekrar kod kullanılmasından kaçınılmak istenmesidir. Bu sayede zamandan tasaruf sağlıyorsunuz.

Şimdi aklınızda html kodlarını niye Layout etiketlerinin arasına yazıyoruz diye soru soruyor olabilirsiniz. Bunu şöyle açıklayayım bizim src/layouts/Layout.astro konumdaki Layout dosyamızın içinde etiketini görüyoruz. Bu etiketin amacı ise src/pages/index.astro konumundaki kodları src/layouts/Layout.astro konumundaki etiketinin içine yerleştirmektir. Bu sayede src/layouts/Layout.astro konumundaki kodlar src/pages/index.astro konumundaki kodlarla birleşerek tek bir sayfa oluşturur. Sonuç olarak src/layouts/Layout.astro konumundaki kodları src/pages/index.astro konumundaki kodlardan ayırarak daha düzenli bir kod yapısı oluşturmuş oluyoruz.

Parçalı Dosya Yapısı

Parçalı dosya yapısı sayesinde kodlarımızı daha düzenli bir şekilde yazabiliriz. Bu sayede kodlarımızı daha kolay okuyabiliriz. Ayrıca kodlarımızı tekrar kullanabiliriz. Örneğin src/components/Card.astro konumundaki kodlarımızı src/pages/index.astro konumundaki kodlarımızda kullanabiliriz. Bu sayede kodlarımızı tekrar yazmaktan kurtuluruz. Bu sayede zamandan tasarruf ederiz.

Örneğin:

index.astro
<ul role="list" class="link-card-grid">
<Card
href="https://docs.astro.build/"
title="Documentation"
body="Learn how Astro works and explore the official API docs."
/>
<Card
href="https://astro.build/integrations/"
title="Integrations"
body="Supercharge your project with new frameworks and libraries."
/>
<Card
href="https://astro.build/themes/"
title="Themes"
body="Explore a galaxy of community-built starter themes."
/>
<Card
href="https://astro.build/chat/"
title="Community"
body="Come say hi to our amazing Discord community. ❤️"
/>
</ul>

index.astro içindeki bu kodlar ile kod tekrarının önüne geçilmiş oldu.

Stiller

Şimdi de size astro dosyalarındaki css kısmını göstereceğim.

astro dosyalarında css i iki farklı şekilde tanımlayabilirsiniz. global ve scoped olarak iki türü vardır. global tipinde diğer astro dosyaları tarafından da kullanabilmektedir. scoped tarafında ise sadece kendi astro dosyası içinde kullanılır.

Aşağıdaki örnekte ilk önce global in kulanımını sonra da scoped ın kulanım biçimini gösterilmiştir.

layout.astro
<style is:global>
main {
    margin: auto;
    padding: 1.5rem;
    max-width: 60ch;
}
h1 {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
}


</style>
index.astro
<style scoped>
main {
    margin: auto;
    padding: 1.5rem;
    max-width: 60ch;
}
h1 {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
}


</style>

Sabitler

Şimdi de size astro dosyalarındaki sabitlerin nasıl kullanıldığını göstereceğim.

Astro daki sabitleri biz astro dosyaların en üstünde bulnunan --- üç çizgilerin arasına tanılıyoruz. Aşağıda örnek verilmiştir.

Layout.astro
---
const title = "AstroJS' i Seviyorum ❤️";
---
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
</head>
<body>


</body>
</html>

Bu kod bloğunda title isminde bir sabit tanımlayıp bir string değer atatık daha sonra bu title değerini astro dosyamızın içinde <title>{title}</title> şeklinde tanımladık. Eğer şu an projeniz çalışıyorsa ve kodlarınızı bu şekilde düzenlediyseniz tarayıcı sekmesi isminin de bu şekilde değiştiğini görebilirsiniz.

Ben buraya string bir değer tanımladım diye sadece string bir değer tanımlanıyor sanmayın aksine isterseniz sayısal bir değer isterseniz bir dizi tanımlayabilirsiniz.

Layout.astro
---
const title = "AstroJS' i Seviyorum ❤️";
const sayi = 5;
const dizi = [1, 2, 3, 4, 5];
---


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title}</title>
    </head>
    <body>
        <h1>{sayi}</h1>
        <h2>{dizi}</h2>
    </body>
</html>

Sabitlerin gözüktüğü resim

Map Döngüsü

Astro dosyalarında map döngüsü bir dizide içindeki değerleri döndürmenizi sağlayan bir döngüdür.

Mesela üç çizgilerle başlayan yere 2 adet dizi tanımlayalım.

Layout.astro
---
const dizi1 = [1, 2, 3, 4, 5];
const dizi2 = ["a", "b", "c", "d", "e"];
---

Daha sonra sayfamızın içinde bu kodları kullanıp dizileri ekrana bastıralım

Layout.astro
{dizi1.map((item) => (
<p>{item}</p>
))}
Layout.astro
{dizi2.map((item) => (
<p>{item}</p>
))}

Map döngüsünün gözüktüğü resim

Dikkat ettiyseniz map fonksiyonu kullanmak için süslü parantez arasına yazdım. Astro dosyalarında belli başlı javascript fonksiyonlarını süslü parantezler arasında yazabiliyorsunuz.

Props

astrojs de props ifadeleri ile bir astro dosyasından başka bir astro dosyasına veri aktarabilirsiniz.

Örneğin src/components/Baslik.astro konumundaki kodlarımızı src/pages/index.astro konumundaki kodlarımıza aktaralım.

aşağıda Baslik.astro dosyasının içeriği verilmiştir

Baslik.astro
---
interface Prop{
    başlık: string;
}
const {başlık} = Astro.props;
---
<h1>{başlık}</h1>

Şimdi de index.astro dosyasının içeriğine bakalım.

index.astro
---
import Baslik from "../components/Baslik.astro"
---
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <Baslik başlık="Anasayfa"/>
    </body>
</html>

Props örneği

Burdaki kodlar ilk önce Baslik.astro dosyasını index.astro dosyasının içine Baslik ismiyle aktarılıyor. Baslik.astro yu kullanmak için Baslik.astro yu atadığımız değeri <Baslik başlık="Anasayfa"/> şeklinde kullanıyoruz. Kendiniz bu kodları değiştirerek farklı farklı yazılar, sayılar, diziler gibi nesneler aktarabilirsiniz.

İsterseniz aktardığınız nesneleri başka dosyaya aktarabilirsiniz.

if else

Bu bölümde size karşılaştırma ifadelerini astro dosyasında nasıl kullanıldığını göstereceğim.

ilk önce index.astro dosyamızı açıyoruz. İçindeki bütün yazıları siliyoruz. İçine şu kodları yaıyoruz:

index.astro
---
const {sayi=123} = Astro.props;
---
{
()=>{if(sayi){
    return <p>{sayi}</p>
}else{
    return <p>sayi yok</p>
}}}

Bu kodda const {sayi=123} = Astro.props; tanımlaması yaptık. bu kodun çıktısı sayi’ya değer verdiğimiz için. if bloğu çalışıp ekrana 123 değerini yazdıracak ama biz sayi sabitine değer vermeseydik bu sefer else bloğu çalışıp ekrana sayi yok yazısını yazacaktır.

map

Şimdide map döngüsüne bakalım

index.astro içine aşağıdaki kodları yazıyoruz.

index.astro
---
const {sayi=[[1,2,3],[2,3,4]]} = Astro.props;
---
{
    sayi.map((item,index)=>{
        return <div>{item}</div>
    })
}

Bu kodda oluşturduğum sayi dizisi içindeki dizileri döndürüp ekrana basacaktır.