Bagaimana Membuat Isi Kandungan dengan Slot HTML
Isi kandungan boleh meningkatkan pengalaman pengguna banyak laman web, contohnya laman dokumentasi atau ensiklopedia dalam talian seperti Wikipedia. Jadual kandungan yang direka dengan baik memberikan gambaran keseluruhan halaman dan membantu pengguna dengan cepat menavigasi ke seksyen yang mereka berminat.
Secara tradisinya, anda boleh membuat jadual kandungan sama ada dalam HTML atau dengan JavaScript, tetapi slot HTML terkini yang disediakan oleh standard jalan tengah antara keduanya. Slot HTML adalah piawaian web yang membolehkan anda tambahkan ruang letak ke laman web dan kemudian isi dengan kandungan secara dinamik.
Bila menggunakannya
Anda boleh meletakkan
Dengan teknik ini, anda perlu mencipta kod sumber HTML jadual kandungan secara manual. JavaScript hanya menjana kandungan teks kandungan kandungan secara automatik, berdasarkan tajuk atau sub tajuk pada halaman.
Jika anda tidak mahu jadual kandungan hadir dalam HTML yang anda perlukan menjana susun atur dan kandungan dengan JavaScript.
1. Buat HTML
Kod sumber HTML untuk TOC (jadual kandungan) akan menjadi di dalam a tag. Kod di dalam tidak dapat diberikan sehingga ia ditambahkan pada dokumen oleh JavaScript. TOC kami akan ada ruang letak, diadakan di
The nama sifat masing-masing slot atribut dalam tajuk dan sub kepala yang berkaitan dalam dokumen tersebut.
Di bawah, anda boleh melihat a contoh HTML Velociraptor (bermaksud "pengintip cepat" dalam Bahasa Latin) adalah ... Velociraptor adalah dromaeosaurid bersaiz sederhana, dengan orang dewasa ... Fosil dromaeosaurid lebih primitif daripada ... Semasa ekspedisi Sejarah Muzium Amerika Semula ... Velociraptor adalah ahli kumpulan Eudromaeosauria, sub ... Spesimen "Pertempuran Dinosaur", ditemui pada tahun 1971, memelihara ... Pada tahun 2010, Hone dan rakan sekerja menerbitkan kertas ... Velociraptor adalah darah hangat ke tahap tertentu, kerana memerlukan ... Satu Velociratoptor mongoliensis tengkorak mempunyai dua selari ... Seperti yang anda lihat, setiap tajuk adalah diberi unik Dan, inilah yang Kod HTML TOC, di dalam a Dalam dua coretan kod di atas, perhatikan padanan Sebelum melihat kod JavaScript yang akan menambah TOC dari Pastikan bahawa Sekarang, kami menambah skrip itu memasukkan TOC di atas Coretan kod di atas membuat salinan Kemudian, yang diklonkan Jika kami akan menetapkan semula kaunter CSS di Inilah tangkapan skrin output: Jika anda mahu pautan tajuk TOC untuk tajuk dan sub judul masing-masing dengan menambah Velociraptor (bermaksud "pengintip cepat" dalam Bahasa Latin) adalah ... Velociraptor adalah dromaeosaurid bersaiz sederhana, dengan orang dewasa ... Fosil dromaeosaurid lebih primitif daripada ... Seperti yang anda lihat di atas, yang Dan juga tajuk dalam jadual kandungan adalah berlabuh: Dalam baris tambahan di atas, semua Lihat tangkapan skrin jadual kandungan yang dipautkan di bawah: Anda boleh menyemak, memuat turun, atau menanggalkan kod yang digunakan dalam siaran ini dari Github Repo kami. dengan beberapa tajuk dan sub kepala. The
Penerangan
Bulu
Sejarah penemuan
Pengkelasan
Paleobiologi
Tingkah laku menipu
Metabolisme
Patologi
slot nilai. tag.
slot dan nama sifat-sifatnya di dalam tajuk dan 2. Isikan tajuk
kepada dokumen itu, mari tambah nombor siri untuk tajuk, menggunakan kaunter CSS. artikel counter-reset: heading; artikel h2 :: sebelum counter-increment: heading; kandungan: '0'counter (tajuk)': ';
balas semula peraturan milik elemen yang ada ibu bapa terdekat semua gelaran yang membawa slot atribut (yang mana satu elemen dalam kod kami).3. Masukkan TOC ke dalam dokumen
tag, di dalam bekas. templateContent = document.querySelector ('template'). kandungan; artikel = document.querySelector ('artikel'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (artikel); dan melampirkan Pokok DOM Bayangan kepadanya. Kita juga tambah salinan kandungannya ke pokok Bayangan DOM ini. dimasukkan ke dalam elemen adalah kini hadir di TOC juga, namun hanya tajuk dan sub tajuknya yang menemui ruang letak di dalam TOC kelihatan. badan atau html elemen bukan artikel, kaunter akan mengira senarai tajuk di dalam TOC juga. Itulah sebabnya anda perlu tetapkan semula kaunter di ibu bapa terdekat tajuk.
4. Tambah hyperlink
ID kepada tajuk dan berlabuh teks TOC yang sepadan dengannya keluarkan berulang ID nilai dari klon artikel.
Penerangan
Bulu
ID atribut adalah ditambah kepada setiap tajuk dan subheading dalam artikel itu.
ID atribut adalah dikeluarkan dari artikel klon sebelum ini melampirkan pokok DOM Bayangan kepadanya. templateContent = document.querySelector ('template'). kandungan; artikel = document.querySelector ('artikel'). cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'closed' )); document.querySelector ('# toc'). appendChild (artikel); 
Demo Github
