Cara Membuat Daftar Isi secara Otomatis dengan Slot HTML
Daftar Isi dapat sangat meningkatkan pengalaman pengguna banyak situs web, misalnya situs dokumentasi atau ensiklopedia online seperti Wikipedia. Daftar isi yang dirancang dengan baik memberikan gambaran umum halaman dan membantu pengguna dengan cepat menavigasi ke bagian yang mereka minati.
Secara tradisional, Anda dapat membuat daftar isi baik dalam HTML atau dengan JavaScript, tetapi slot HTML standar akhir-akhir ini menyediakan a jalan tengah antara keduanya. Slot HTML adalah standar web yang memungkinkan Anda tambahkan placeholder ke halaman web dan kemudian isi dengan konten secara dinamis.
Kapan harus menggunakan
Anda bisa menempatkan
Dengan teknik ini, Anda perlu membuat kode sumber HTML dari daftar isi secara manual. JavaScript hanya menghasilkan konten teks dari daftar isi secara otomatis, berdasarkan judul atau subpos pada halaman.
Jika Anda tidak ingin daftar isi hadir dalam HTML, Anda perlu melakukannya menghasilkan tata letak dan konten dengan JavaScript.
1. Buat HTML
Kode sumber HTML untuk TOC (daftar isi) akan menjadi di dalam a menandai. Kode di dalamnya tidak dapat diberikan sampai ditambahkan ke dokumen oleh JavaScript. TOC kami akan memilikinya placeholder, diadakan di
Itu nama atribut masing-masing slot atribut dalam judul dan subpos yang sesuai dalam dokumen.
Di bawah ini, Anda dapat melihat a contoh HTML Velociraptor (berarti "swift seizer" dalam bahasa Latin) adalah… Velociraptor adalah dromaeosaurid ukuran sedang, dengan orang dewasa ... Fosil dromaeosaurid lebih primitif daripada ... Selama ekspedisi Museum Sejarah Alam Amerika ... Velociraptor adalah anggota dari kelompok Eudromaeosauria, turunan dari… Spesimen "Fighting Dinosaurs", ditemukan pada tahun 1971, memelihara ... Pada 2010, Hone dan rekannya mempublikasikan makalah tentang ... Velociraptor berdarah panas sampai taraf tertentu, karena membutuhkan… Satu tengkorak Velociratoptor mongoliensis memiliki dua paralel… Seperti yang Anda lihat, setiap tajuk adalah diberi unik Dan inilah Kode HTML dari TOC, di dalam a Dalam dua cuplikan kode di atas, perhatikan sesuai Sebelum melihat ke kode JavaScript yang akan menambahkan TOC dari Pastikan bahwa Sekarang, kita tambahkan skrip itu menyisipkan TOC di atas Cuplikan kode di atas membuat salinan Kemudian, kloning Jika kita akan mengatur ulang penghitung CSS di Ini adalah screenshot dari output: Jika Anda menghendaki tautkan judul TOC ke pos dan subpos masing-masing dengan menambahkan Velociraptor (berarti "swift seizer" dalam bahasa Latin) adalah… Velociraptor adalah dromaeosaurid ukuran sedang, dengan orang dewasa ... Fosil dromaeosaurid lebih primitif daripada ... Seperti yang Anda lihat di atas, Dan, itu judul di dalam daftar isi berlabuh: Pada baris tambahan di atas, semuanya Lihat tangkapan layar dari daftar isi yang ditautkan di bawah: Anda dapat memeriksa, mengunduh, atau fork kode yang digunakan dalam posting ini dari Repo Github kami. dengan beberapa judul dan subjudul. Itu
Deskripsi
Bulu
Sejarah penemuan
Klasifikasi
Paleobiologi
Perilaku memulung
Metabolisme
Patologi
slot nilai. menandai.
slot dan nama atribut di dalam judul dan 2. Beri nomor pos
ke dokumen, mari tambahkan nomor seri untuk pos, menggunakan penghitung CSS. article counter-reset: heading; artikel h2 :: sebelum counter-increment: heading; konten: '0'hitung (pos)': ';
reset-reset aturan milik elemen itu induk langsung dari semua judul yang membawa slot atribut (yang merupakan elemen dalam kode kami).3. Masukkan TOC ke dalam dokumen
menandai, di dalam wadah. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (artikel); dan melampirkan Shadow DOM Tree ke sana. Kami juga tambahkan salinan konten ke pohon Shadow DOM ini. dimasukkan ke dalam elemen adalah sekarang hadir di TOC juga, namun hanya judul dan subjudulnya yang menemukan placeholder di dalam TOC yang terlihat. tubuh atau html elemen bukan artikel, konter akan menghitung daftar judul di dalam TOC juga. Itu sebabnya kamu harus atur ulang penghitung di induk langsung dari pos.
4. Tambahkan hyperlink
id untuk judul dan jangkar teks TOC yang sesuai Anda harus hapus pengulangan id nilai dari kloning artikel.
Deskripsi
Bulu
id atribut adalah ditambahkan ke setiap pos dan subjudul dalam artikel.
id atribut adalah dihapus dari artikel yang dikloning sebelum melampirkan pohon Shadow DOM ke sana. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true )); document.querySelector ('# toc'). appendChild (artikel); 
Demo Github
