Buna bir bakın.
Vurgulamak istediğin ilgi çekici içerik
Bileşenler
Bileşenler bir arayüz parçasını kolaylıkla tekrar tekrar kullanmanıza ve tutarlı bir şekilde stillendirmenize olanak sağlar. Bağlantı kartı ya da bir Youtube yerleştirmesi örnek olarak verilebilir. Starlight MDX dosyaları içerisindeki bileşenlerin kullanılmasını destekler ve bazı ortak bileşenleri kullanımınıza sunar.
Astro dokümantasyonunda bileşen oluşturma hakkında daha fazla bilgi edinin.
Bileşen Kullanımı
Bir bileşeni MDX dosyanıza dahil ederek kullanabilir ve sonrasında JSX etiketi olarak oluşturabilirsiniz.
HTML etiketleri gibi görünür ancak ilk harfi büyük olarak ismi uyan import ifadesidir:
---title: Dokümantasyonuma hoşgeldiniz.---
import SomeComponent from '../../components/SomeComponent.astro';import AnotherComponent from '../../components/AnotherComponent.astro';
<SomeComponent prop="birşey" />
<AnotherComponent> Bileşenler ayrıca **içe yerleştirilmiş içerik** barındırabilir.</AnotherComponent>Starlight’ın Astro’dan aldığı güç sayesinde, MDX dosyalarınız içerisinde desteklenen herhangi bir arayüz çerçevesi ile (React, Preact, Svelte, Vue, Solid, Lit, ve Alpine) oluşturulmuş bileşenlerinizi destekleyebilirsiniz. Astro dokümantasyonunda MDX içerisinde bileşen kullanmak hakkında daha fazlasını öğrenin.
Starlight stilleri ile uyumluluk
Starlight Markdown içeriklerinize varsayılan stillendirmeyi uygular, örneğin elemanlar arasına marjin ekler.
Bu stiller bileşeninizin görünümü ile çakışıyorsa, bileşeninizde stili etkisiz kılmak için not-content sınıfını bileşeninize ekleyin.
<div class="not-content"> <p>Starlight'ın varsayılan içerik stillendirmesinden etkilenmez.</p></div>Yerleşik Bileşenler
Starlight bazı yerleşik bileşenleri ortak dokümantasyon ihtiyaçları için sunar.
Bu bileşenler @astrojs/starlight/components paketinde mevcuttur.
Sekmeler
<Tabs> ve <TabItem> bileşenlerini kullanarak sekmeli arayüz gösterebilirsiniz.
Her <TabItem> bileşenini kullanıcılara göstermek için label sahibi olması zorunludur.
Starlight’ın yerleşik ikonlarından birini, etiketin yanında kalması için zorunlu olmayan icon niteliğini kullanın.
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="Yıldızlar" icon="star"> Sirius, Vega, Betelgeuse </TabItem> <TabItem label="Uydular" icon="moon"> Io, Europa, Ganymede </TabItem></Tabs>Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi sekmeler oluşturur:
Sirius, Vega, Betelgeuse
Io, Europa, Ganymede
Senkronize Sekmeler
syncKey niteliği ekleyerek çoklu sekme gruplarınızı senkronize edin.
Sayfadaki aynı syncKey değerine sahip tüm <Tabs> bileşenleri aynı etkin etiketi görüntüler. Bu, okuyucunuza bir kez seçme (örneğin okuyucunuzun işletim sistemi ya da paket yöneticisi) ve sayfa boyunca yansıyan seçimi görmesine olanak tanır.
İlişkili sekmeleri senkronize etmek için, her <Tabs> bileşenine özdeş syncKey niteliği ekleyin ve hepsinin aynı <TabItems> etiketi kullandığına emin olun:
import { Tabs, TabItem } from '@astrojs/starlight/components';
_Bazı yıldızlar:_
<Tabs syncKey="constellations"> <TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem> <TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem></Tabs>
_Bazı ötegezegenler:_
<Tabs syncKey="constellations"> <TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem> <TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem></Tabs>Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
Bazı yıldızlar:
Bazı ötegezegenler:
Kartlar
<Card> bileşenini kullanarak Starlight’ın stiline uyan kutu içerisinde yer alan içeriği gösterebilirsiniz.
Birden fazla kartı <CardGrid> bileşeni içinde, yeteri kadar boşluk olduğu zaman kartları yan yana sıralı olarak göstermek için sarmalayın.
<Card> bileşeni title değerine ihtiyaç duyar ve opsiyonel olarak Starlight’ın kurulu ikonlarından birinin ismini taşıyan icon özelliğini içerebilir.
import { Card, CardGrid } from '@astrojs/starlight/components';
<Card title="Buna bir bakın.">Vurgulamak istediğin ilgi çekici içerik</Card>
<CardGrid> <Card title="Yıldızlar" icon="star"> Sirius, Vega, Betelgeuse </Card> <Card title="Uydular" icon="moon"> Io, Europa, Ganymede </Card></CardGrid>Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
Yıldızlar
Sirius, Vega, Betelgeuse
Uydular
Io, Europa, Ganymede
Bağlantı kartları
Belirgin olarak farklı sayfalara bağlantı eklemek için <LinkCard> bileşenini kullanın.
<LinkCard> title değerine ve href özelliğine ihtiyaç duyar. İsteğe bağlı olarak description ya da target gibi bağlantı özelliklerini ekleyebilirsiniz.
Birden fazla <LinkCard> bileşeninizi, yeterince boşluk olduğunda yan yana olacak şekilde göstermek için <CardGrid> içerisinde gruplayın.
import { LinkCard, CardGrid } from '@astrojs/starlight/components';
<LinkCard title="Starlight'ı Özelleştirmek" description="Starlight sitenizi kendi özel stiliniz, yazı karakteriniz ve daha fazlası ile nasıl oluşturacağınızı öğrenin." href="/tr/guides/customization/"/>
<CardGrid> <LinkCard title="Markdown Oluşturmak" href="/tr/guides/authoring-content/" /> <LinkCard title="Bileşenler" href="/tr/guides/components/" /></CardGrid>Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur.
Starlight'ı Özelleştirmek Starlight sitenizi kendi özel stiliniz, yazı karakteriniz ve daha fazlası ile nasıl oluşturacağınızı öğrenin.
Ara bölümler
Ara bölümler (ayrıca “uyarı” ve “açıklama balonu” olarak da bilinir), sayfanın ana içeriği ile birlikte ikincil bilgi göstermek için kullanışlıdır.
<Aside> bileşeni zorunlu olmayan note (varsayılan), tip, caution ya da danger değerini alan type niteliğine sahiptir. title niteliği eklemek varsayılan ara bölüm başlığını değiştirir.
import { Aside } from '@astrojs/starlight/components';
<Aside>Özel başlığı olmayan bir varsayılan ara bölüm</Aside>
<Aside type="caution" title="Dikkat Et!"> Özel bir başlık *ile* uyarı ara bölümü.</Aside>
<Aside type="tip">
Diğer içerikler de ara bölümde desteklenir.
```js// Örneğin bir kod parçacığı.```
</Aside>
<Aside type="danger">Şifreni kimseye verme.</Aside>Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
Starlight, ayrıca <Aside> bileşenine alternatif olarak Markdown ve MDX içerisinde ara bölüm oluşturmak için özel bir sözdizimi sağlar.
“Markdown’da İçerik Yazmak” rehberine özel sözdizimi detayları için bakın.
Kod
<Code> bileşenini Markdown kod bloğu kullanmanın mümkün olmadığı zaman sözdizim vurgulu kod oluşturmak için kullanın - örneğin dosyalar, veritabanları ve API’ler gibi harici kaynaklardan gelen verileri oluşturmak için.
<Code> bileşeninin destekleği niteliklerin tüm detaylarını Expressive Code “Code Component” dokümanında inceleyin.
import { Code } from '@astrojs/starlight/components';
export const exampleCode = `console.log('Bu bir dosya ya da İçerik Yönetim Sisteminden gelebilir!');`;export const fileName = 'example.js';export const highlights = ['file', 'CMS'];
<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
console.log('Bu bir dosya ya da İçerik Yönetim Sisteminden gelebilir!');Alınan kod
Vite’nin ?raw son ekini herhangi kod dosyasını string olarak almak için kullanın.
<Code> bileşenine alınan bu string’i sayfanıza dahil etmek için ekleyin.
import { Code } from '@astrojs/starlight/components';import importedCode from '/src/env.d.ts?raw';
<Code code={importedCode} lang="ts" title="src/env.d.ts" />Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
/// <reference path="../.astro/types.d.ts" />/// <reference types="astro/client" />Dosya Ağacı
<FileTree> bileşenini dizin yapısını dosya ikonları ve toplanabilir alt dizinleri göstermek için kullanın.
Dosyalarınızın yapısını ve dizinleri <FileTree> içerisinde numaralandırılmamış Markdown listesi ile açıkça belirtin.
İç içe yerleşmiş liste kullanarak ya da belirli bir içeriksiz dizin oluşturmak için liste elemanının sonuna / ekleyerek alt dizin oluşturun.
Aşağıdaki sözdizimi dosya ağacınının görünümünü özelleştirmek için kullanılabilir:
- Dosya ya da dizinin ismini kalın yaparak vurgulayın. Örneğin
**README.md**. - Dosya ya da dizine isimden sonra metin ekleyerek yorum ekleyin.
- Dosyalara ya da dizinlere isim olarak
...ya da…yazımını kullanarak ayrılmış bilgi alanı ekleyin.
import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- astro.config.mjs **önemli** bir dosya- package.json- README.md- src - components - **Header.astro** - …- pages/
</FileTree>Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
- astro.config.mjs önemli bir dosya
- package.json
- README.md
Dizinsrc
Dizincomponents
- Header.astro
- …
Dizinpages/
- …
Adımlar
<Steps> bileşenini numaralanmış görevler listesini biçimlendirmek için kullanın.
Her aşamasının açıkça belirtilmeye ihtiyaç duyan çok karmaşık adım adım rehberleri oluşturmak için kullanışlıdır.
Standart Markdown sıralanmış listesini <Steps> bileşeni ile sarmalayın.
<Steps> bileşeni içerisinde tüm olağan Markdown sözdizimi uygulanabilir.
import { Steps } from '@astrojs/starlight/components';
<Steps>
1. Bileşeni MDX dosyasına dahil edin:
```js import { Steps } from '@astrojs/starlight/components'; ```
2. Sıralanmış liste elemanlarını `<Steps>` ile sarmalayın.
</Steps>Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
-
Bileşeni MDX dosyasına dahil edin:
import { Steps } from '@astrojs/starlight/components'; -
Sıralanmış liste elemanlarını
<Steps>ile sarmalayın.
İkon
Starlight, içeriğinizde görünmesi için <Icon> bileşenini kullanarak bir grup ortak ikonları kullanımınıza sunar.
Her <Icon> name değerine ihtiyaç duyar ve isteğe bağlı olarak label eklenebilir.
size ve color nitelikleri ikonun görünümünü CSS birimleri ve renk değerleri ile ayarlamak için kullanılabilir.
import { Icon } from '@astrojs/starlight/components';
<Icon name="star" color="goldenrod" size="2rem" /><Icon name="rocket" color="var(--sl-color-text-accent)" />Yukarıdaki kod, aşağıdaki gibi çıktı oluşturur:
Tüm İkonlar
Mevcut tüm ikonların listesi aşağıdaki gibi ilişkili isimleriyle gösterilmiştir. Bileşen kodunu kopyalamak için bir ikona tıklayın.