Navigasi Sidebar
Sidebar yang terorganisir dengan baik adalah kunci untuk dokumentasi yang baik karena ini adalah salah satu cara utama pengguna akan menjelajahi website Anda. Starlight menyediakan rangkaian opsi lengkap untuk menyesuaikan tata letak dan konten sidebar Anda.
Sidebar default
Secara default, Starlight akan secara otomatis membuat sidebar berdasarkan struktur file dokumentasi Anda, menggunakan properti title
dari setiap file sebagai entri sidebar.
Sebagai contoh, dengan struktur file berikut:
Directorysrc/
Directorycontent/
Directorydocs/
Directoryguides/
- components.md
- i18n.md
Directoryreference/
- configuration.md
Sidebar berikut akan secara otomatis dihasilkan:
Pelajari lebih lanjut tentang sidebar yang dihasilkan secara otomatis di bagian grup-grup yang dihasilkan secara otomatis.
Tambahkan tautan dan grup tautan
Untuk mengonfigurasi tautan dan grup tautan (dalam header yang dapat dilipat), gunakan properti starlight.sidebar
dalam astro.config.mjs
.
Dengan menggabungkan tautan dan grup, Anda dapat membuat berbagai macam layout sidebar.
Tautan
Tambahkan tautan ke halaman internal atau eksternal menggunakan objek dengan properti label
dan link
.
Konfigurasi di atas akan menghasilkan sidebar berikut:
Grup tautan
Anda dapat memberikan struktur pada sidebar Anda dengan mengelompokkan tautan terkait di bawah judul yang dapat dilipat. Grup dapat berisi baik tautan maupun sub-grup lainnya.
Tambahkan grup menggunakan objek dengan properti label
dan items
. label
akan digunakan sebagai judul untuk grup.
Tambahkan tautan atau subgrup ke dalam array items
.
Konfigurasi di atas akan menghasilkan sidebar berikut:
Grup-grup yang dihasilkan secara otomatis
Starlight dapat secara otomatis membuat grup di sidebar Anda berdasarkan direktori dokumen Anda. Ini berguna ketika Anda tidak ingin memasukkan setiap item sidebar secara manual ke dalam grup. Halaman akan diurutkan secara alfabetis berdasarkan nama file secara default.
Tambahkan grup yang dihasilkan secara otomatis menggunakan objek dengan properti label
dan autogenerate
. Konfigurasi autogenerate
Anda harus menentukan directory
yang akan digunakan untuk entri sidebar. Sebagai contoh, dengan konfigurasi berikut:
Dan struktur file berikut:
Directorysrc/
Directorycontent/
Directorydocs/
Directoryguides/
- components.md
- i18n.md
Directoryadvanced/
- project-structure.md
Sidebar berikut akan dihasilkan:
Menyesuaikan tautan yang dihasilkan secara otomatis di frontmatter
Gunakan field sidebar
frontmatter pada masing-masing halaman untuk menyesuaikan tautan yang dihasilkan secara otomatis.
Opsi frontmatter sidebar memungkinkan Anda mengatur label custom atau menambahkan badge ke tautan, menyembunyikan tautan dari sidebar, atau menentukan urutan pengurutan custom.
Sebuah grup yang dihasilkan secara otomatis termasuk halaman dengan frontmatter di atas akan menghasilkan sidebar berikut:
Badges
Tautan, grup, dan grup yang dibuat secara otomatis juga dapat menyertakan properti badge
untuk menampilkan badge di samping labelnya.
Konfigurasi di atas akan menghasilkan sidebar berikut:
Variasi badge
Sesuaikan gaya lambang menggunakan objek dengan properti text
dan variant
.
text
mewakili konten yang akan ditampilkan (misalnya “Baru”).
Timpa gaya default
, yang menggunakan warna aksen website Anda, dengan mengatur properti variant
ke salah satu nilai berikut: note
, tip
, danger
, caution
, atau success
.
Konfigurasi di atas akan menghasilkan sidebar berikut:
Atribut HTML custom
Tautan juga dapat menyertakan properti attrs
untuk menambahkan atribut HTML kustom ke elemen tautan.
Pada contoh berikut, attrs
digunakan untuk menambahkan atribut target="_blank"
, sehingga tautan dibuka di tab baru, dan untuk menerapkan atribut style
kustom untuk memberi style miring pada label tautan:
Konfigurasi di atas akan menghasilkan sidebar berikut:
Internasionalisasi
Gunakan properti translations
pada entri tautan dan grup untuk menerjemahkan label tautan atau grup untuk setiap bahasa yang didukung dengan menentukan tag bahasa BCP-47, misalnya "en"
, "ar"
, atau "zh-CN"
, sebagai kunci dan label yang diterjemahkan sebagai nilainya.
Properti label
akan digunakan untuk bahasa default dan untuk bahasa yang tidak memiliki terjemahan.
Menelusuri dokumentasi dalam Bahasa Portugis Brasil akan menghasilkan sidebar berikut:
Grup yang dapat dikembangkan
Grup-grup tautan dapat dikembangkan secara default dengan mengatur properti collapsed
menjadi true
.
Konfigurasi di atas akan menghasilkan sidebar berikut:
Grup-grup yang dihasilkan secara otomatis akan mengikuti nilai collapsed
dari parent group mereka:
Konfigurasi di atas akan menghasilkan sidebar berikut:
Perilaku ini dapat diubah dengan mendefinisikan properti autogenerate.collapsed
.
Konfigurasi di atas akan menghasilkan sidebar berikut: