1.1 Mode Sidebar Kiri (position: “left”)#

Struktur Tata Letak#

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "left", // Sidebar kiri
4
  showRightSidebarOnPostPage: true, // Apakah menampilkan sidebar kanan di halaman artikel
5
};

1.2 Mode Sidebar Ganda (position: “both”)#

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "both", // Sidebar ganda

2.1 Mode Daftar / List (defaultMode: “list”)#

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "list", // Mode daftar
4
    allowSwitch: true,   // Mengizinkan pengguna berpindah mode
5
  },
6
};

2.2 Mode Grid (defaultMode: “grid”)#

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "grid",
4
    allowSwitch: true,
5
    grid: {
6
      masonry: true,  // Mengaktifkan efek masonry (air terjun)
7
      columns: 3,      // Diatur ke mode 3 kolom (hanya berlaku pada sidebar tunggal)
8
    },
9
  },
10
};

2.3 Tata Letak Masonry (Air Terjun)#

Mode grid Neko dilengkapi dengan dukungan tata letak masonry cerdas, yang memecahkan masalah ruang kosong akibat perbedaan tinggi kartu pada artikel yang mencampur teks dan gambar.

[Image showing a masonry or waterfall layout where items of different heights are packed tightly together]

• Tipografi Cerdas: Menggunakan distribusi pola-Z (bergantian kiri-kanan), menjaga urutan kronologis artikel dengan ketat.
• Menghilangkan Ruang Kosong: Menghitung posisi setiap kartu secara presisi melalui pemosisian absolut, sehingga kartu menempel rapat pada kartu di baris atasnya.
• Konfigurasi Fleksibel: Anda dapat mengaktifkan atau menonaktifkan fitur ini melalui opsi postListLayout.grid.masonry di siteConfig.ts.

3.1 Sidebar Kiri + Mode Grid#

Ini adalah kombinasi yang paling fleksibel. Anda dapat memilih grid 2 kolom atau 3 kolom.

• Mode 2 Kolom: Tata letak grid klasik, lebar kartu pas, nyaman dibaca.
• Mode 3 Kolom: Cocok untuk layar lebar (≥1024px), menampilkan lebih banyak konten dalam satu layar, memberikan efek visual yang luar biasa.

3.2 Sidebar Ganda + Mode Grid#

Pada versi lama, kombinasi ini dinonaktifkan. Namun pada versi terbaru Neko, kami telah melepaskan batasan ini, memungkinkan sidebar ganda hidup berdampingan dengan mode grid.

Karakteristik & Batasan:

• Paksa Dua Kolom: Meskipun Anda mengonfigurasi columns: 3, dalam mode ini akan dipaksa menjadi 2 kolom.
• Ruang Ringkas: Karena ada sidebar di kiri dan kanan, area konten utama di tengah menjadi relatif lebih sempit.
• Kepadatan Informasi Sangat Tinggi: Ini adalah tata letak dengan kepadatan informasi tertinggi, cocok untuk situs yang perlu menampilkan banyak informasi navigasi sekaligus daftar artikel.

3.3 Saran Pemilihan Tata Letak#

4.1 Aturan Penurunan (Downgrade) Cerdas#

Untuk memastikan pengalaman membaca terbaik, sistem akan menyesuaikan tata letak secara otomatis saat layar menyempit:

1. Grid 3 Kolom -> Grid 2 Kolom: Ketika lebar layar tidak cukup untuk 3 kolom (atau saat mengaktifkan sidebar ganda), otomatis turun menjadi mode daftar tunggal.
2. Mode Grid -> Mode List: Ketika lebar layar kurang dari 1200px (tablet dan ponsel), mode grid akan otomatis beralih ke mode daftar satu kolom untuk menjaga keterbacaan konten kartu.
3. Sidebar Ganda -> Sidebar Kiri: Ketika lebar layar kurang dari 1200px, sidebar kanan akan otomatis disembunyikan, dan navigasi daftar isi artikel akan beralih menjadi navigasi melayang.

Q1: Mengapa saya sudah mengatur grid 3 kolom, tetapi hanya muncul 2 kolom?#

A: Harap periksa hal berikut:

1. Apakah Anda mengaktifkan sidebar ganda (position: "both")? Dalam mode sidebar ganda, grid dipaksa menjadi 2 kolom.
2. Apakah lebar layar cukup? Mode 3 kolom biasanya memerlukan lebar layar ≥1024px.

Q2: Mengapa efek grid tidak terlihat di ponsel?#

A: Untuk menjaga pengalaman membaca, Neko akan memaksa peralihan ke mode list saat lebar layar di bawah 1200px. Layar ponsel terlalu sempit untuk menampilkan grid multikolom.

Q3: Di mana tombol pengalih tata letak berada?#

A: Tombol pengalih tata letak berada di sisi kanan bilah navigasi (navbar). Tombol ini hanya muncul pada lebar layar ≥ 1200px, karena pada layar kecil sistem memaksa penggunaan mode list sehingga tidak perlu pengalihan.