Cek sekarang
Konten menarik yang ingin Anda highlight.
Komponen
Komponen memudahkan Anda menggunakan kembali bagian UI atau styling secara konsisten. Contohnya bisa kartu tautan atau penyematan YouTube. Starlight mendukung penggunaan komponen dalam file MDX dan menyediakan beberapa komponen umum yang dapat Anda gunakan.
Pelajari lebih lanjut tentang membuat komponen di Astro Docs.
Menggunakan Komponen
Anda dapat menggunakan komponen dengan mengimpornya ke dalam file MDX Anda dan kemudian merendernya sebagai tag JSX.
Ini mirip dengan tag HTML tetapi dimulai dengan huruf kapital yang sesuai dengan nama dalam pernyataan import Anda:
---title: Selamat datang di website dokumentasi saya---
import SomeComponent from '../../components/SomeComponent.astro';import AnotherComponent from '../../components/AnotherComponent.astro';
<SomeComponent prop="sesuatu" />
<AnotherComponent> Komponen juga dapat berisi **konten bertingkat**.</AnotherComponent>Karena Starlight dibuat dengan Astro, Anda dapat menambahkan dukungan untuk komponen yang dibangun dengan berbagai UI framework yang didukung (React, Preact, Svelte, Vue, Solid, Lit, dan Alpine) dalam file MDX Anda. Pelajari lebih lanjut tentang menggunakan komponen dalam MDX di website dokumentasi Astro.
Kompatibilitas dengan style Starlight
Starlight menerapkan style bawaan pada konten Markdown Anda, misalnya menambahkan margin diantara elemen-elemen.
Jika style ini bertentangan dengan tampilan komponen Anda, atur kelas not-content pada komponen untuk menonaktifkannya.
<div class="not-content"> <p>Tidak terpengaruh oleh style konten default Starlight.</p></div>Komponen Bawaan
Starlight menyediakan beberapa komponen bawaan yang umum digunakan untuk keperluan dokumentasi.
Komponen ini tersedia di paket @astrojs/starlight/components.
Tabs
Anda dapat menampilkan antarmuka berbasis tab menggunakan komponen <Tabs> dan <TabItem>.
Setiap <TabItem> harus memiliki label untuk ditampilkan kepada pengguna.
Gunakan atribut opsional icon untuk mengikutsertakan salah satu ikon bawaan Starlight disamping label.
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="Bintang">Sirius, Vega, Betelgeuse</TabItem> <TabItem label="Bulan">Io, Europa, Ganymede</TabItem></Tabs>Kode di atas akan menampilkan tab-tab berikut pada halaman:
Cards
Anda dapat menampilkan konten di dalam kotak yang sesuai dengan style Starlight menggunakan komponen <Card>.
Bungkus beberapa card dalam komponen <CardGrid> untuk menampilkan card secara berdampingan ketika ada cukup ruang.
<Card> memerlukan title dan secara opsional dapat menyertakan atribut icon yang disesuaikan dengan nama salah satu ikon bawaan Starlight.
import { Card, CardGrid } from '@astrojs/starlight/components';
<Card title="Cek sekarang">Konten menarik yang ingin Anda highlight.</Card>
<CardGrid> <Card title="Bintang" icon="star"> Sirius, Vega, Betelgeuse </Card> <Card title="Bulan" icon="moon"> Io, Europa, Ganymede </Card></CardGrid>Kode di atas akan menampilkan hasil sebagai berikut:
Bintang
Sirius, Vega, Betelgeuse
Bulan
Io, Europa, Ganymede
Link Cards
Gunakan komponen <LinkCard> untuk menautkan ke berbagai halaman secara menonjol.
<LinkCard> memerlukan atribut title dan href. Anda juga dapat secara opsional menyertakan description singkat atau atribut tautan lain seperti target.
Gabungkan beberapa komponen <LinkCard> dalam <CardGrid> untuk menampilkan kartu secara berdampingan ketika terdapat cukup ruang.
import { LinkCard, CardGrid } from '@astrojs/starlight/components';
<LinkCard title="Mengkustomisasi Starlight" description="Pelajari cara membuat situs Starlight Anda sendiri dengan style, font, dan lainnya." href="/id/guides/customization/"/>
<CardGrid> <LinkCard title="Menulis Markdown" href="/id/guides/authoring-content/" /> <LinkCard title="Komponen" href="/id/guides/components/" /></CardGrid>Kode di atas akan menampilkan hasil sebagai berikut:
Mengkustomisasi Starlight Pelajari cara membuat situs Starlight Anda sendiri dengan style, font, dan lainnya.
Aside
Aside (dikenal juga sebagai “admonition” or “callout”) berguna untuk menampilkan informasi sekunder di samping konten utama halaman.
<Aside> bisa memiliki atribut opsional type dengan note (bawaan), tip, caution atau danger. Menetapkan atribut title akan menggantikan judul bawaan.
import { Aside } from '@astrojs/starlight/components';
<Aside>Aside bawaan tanpa judul khusus</Aside>
<Aside type="caution" title="Hati-hati!"> Aside peringatan *dengan* judul khusus</Aside>
<Aside type="tip">
Konten lain juga didukung di aside.
```js// Cuplikan kode, misalnya.```
</Aside>
<Aside type="danger">Jangan berikan kata sandi Anda kepada siapa pun.</Aside>Kode di atas akan menampilkan hasil sebagai berikut di halaman:
Starlight juga menyediakan sintaks khusus untuk merender aside di Markdown dan MDX sebagai alternatif dari komponent <Aside>.
Lihat panduan “Penulisan Konten di Markdown” untuk detail dari siktaks khusus.
Code
Menggunakan komponen <Code> untuk merender syntax highlighted code ketika menggunakan Markdown code block tidak memungkinkan, contohnya, untuk merender data dari sumber eksternal seperti file, database, atau API.
Lihat Expressive Code dokumentasi “Komponen Kode” untuk detail lengkap tentang dukungan props <Code>.
import { Code } from '@astrojs/starlight/components';
export const exampleCode = `console.log('Ini bisa berasal dari file atau CMS!');`;export const fileName = 'example.js';export const highlights = ['file', 'CMS'];
<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />Kode di atas akan menampilkan hasil sebagai berikut di halaman:
console.log('Ini bisa berasal dari file atau CMS!');Imported Code
Gunakan Sufiks impor ?raw Vite to impor file kode apa pun sebagai string.
Anda dapat meneruskan string yang diimpor ini ke komponen <Code> untuk memasukkannya ke halaman Anda.
import { Code } from '@astrojs/starlight/components';import importedCode from '/src/env.d.ts?raw';
<Code code={importedCode} lang="ts" title="src/env.d.ts" />Kode di atas akan menampilkan hasil sebagai berikut di halaman:
/// <reference path="../.astro/types.d.ts" />/// <reference types="astro/client" />File Tree
Gunakan komponen <FileTree> untuk menampilkan struktur direktori dengan ikon berkas beserta subdirektori yang dapat diciutkan.
Tentukan struktur file dan direktori Anda dengan daftar Markdown tidak berurutan di dalam <FileTree>.
Buat subdirektori menggunakan daftar bersarang atau tambahkan / diakhir item untuk merendernya sebagai direktori tanpa konten yang spesifik.
Sintaks berikut dapat digunakan untuk menyesuaikan tampilan pohon file:
The following syntax can be used to customize the appearance of the file tree:
- Sorot file atau direktori dengan membuat namanya tebal, mis.
**README.md**. - Menambah komen ke berkas atau direktori dengan menambah teks setelah nama.
- Menambah placeholder untuk berkas dan direktori dengan memakai
...or…sebagai nama.
import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- astro.config.mjs an **important** file- package.json- README.md- src - components - **Header.astro** - …- pages/
</FileTree>Kode di atas akan menampilkan hasil sebagai berikut di halaman:
- astro.config.mjs an important file
- package.json
- README.md
Directorysrc
Directorycomponents
- Header.astro
- …
Directorypages/
- …
Steps
Gunakan komponen <Steps> untuk menata gaya daftar tugas bernomor.
Hal ini berguna untuk panduan langkah demi langkah yang lebih kompleks dimana setiap langkah perlu disorot dengan jelas.
Bungkus <Steps> dengan standar daftar berurut Markdown.
Semua sintaks Markdown umum berlaku di dalam <Steps>.
import { Steps } from '@astrojs/starlight/components';
<Steps>
1. Impor komponen ke file MDX Anda:
```js import { Steps } from '@astrojs/starlight/components'; ```
2. Bungkus `<Steps>` dengan item dari daftar berurut.
</Steps>Kode di atas akan menampilkan hasil sebagai berikut di halaman:
-
Impor komponen ke file MDX Anda:
import { Steps } from '@astrojs/starlight/components'; -
Bungkus
<Steps>dengan item dari daftar berurut.
Icon
Starlight menyediakan sejumlah icon umum yang dapat Anda tampilkan dalam konten Anda menggunakan komponen <Icon>.
Setiap <Icon> membutuhkan atribut name dan dapat secara opsional menyertakan atribut label, size, dan color.
import { Icon } from '@astrojs/starlight/components';
<Icon name="star" color="goldenrod" size="2rem" />Kode di atas menghasilkan tampilan berikut di halaman:
Semua Icon
List dari semua icon-icon yang tersedia dapat dilihat di bawah sesuai dengan nama-nya masing-masing. Klik icon untuk menyalin kode komponen tersebut.