Daftar isi dinamis di Webflow CMS – Cara termudah

Diterbitkan: 2022-03-22
Kami baru-baru ini memungkinkan untuk menambahkan status aktif ke Daftar Isi yang lengket – lihat akhir artikel untuk petunjuknya!

Latar belakang

Di Flowrite, kami baru-baru ini mulai menulis konten yang lebih panjang dan ingin membuat blog kami lebih mudah dibaca, mulai dari elemen paling dasar – daftar isi.

Kami menggunakan Webflow dan sangat menyukainya, tetapi ternyata membuat ToC yang terukur untuk item CMS tidak semudah itu. Semua solusi yang ada bergantung pada pengaturan id dan tautan secara manual atau menggunakan plugin pihak ketiga.

Kami menginginkan sistem sederhana yang secara otomatis menghasilkan ToC berdasarkan judul di blog kami. Itulah yang kami buat, dan inilah cara Anda dapat melakukan hal yang sama!

Bagaimana itu bekerja?

  1. Rancang item ToC Anda. Buat sesuai keinginan Anda – buat status melayang, animasi, dll.
  2. Buat div untuk ToC dengan id tertentu di mana saja di halaman CMS Anda.
  3. Sisipkan potongan kode di akhir tag <body> pada halaman CMS Anda.
  4. ToC dibuat secara otomatis untuk setiap item CMS.

Membuat Daftar Isi dinamis Anda

Rancang item ToC Anda

Berikan item ToC Anda sebuah kelas (kami menggunakan "tocitem") dan gayakan sesuai keinginan Anda.

Rekomendasi saya adalah menggunakan halaman pribadi yang terpisah untuk mendesain elemen-elemen ini. Dengan begitu Anda dapat dengan mudah memodifikasi desain nantinya jika diperlukan.

Kami menyukai kesederhanaan elemen Daftar Isi Notion, jadi kami menggunakannya sebagai patokan.


Jika Anda ingin memasukkan lebih dari satu jenis heading, pastikan untuk memberi mereka kelas tambahan ("toc-h2", "toc-h3", dll.)

Buat elemen untuk ToC Anda

Tambahkan div di mana pun Anda ingin ToC Anda dan berikan id "toc". Sekali lagi, Anda dapat menata elemen ini sesuka Anda.

️
Jika Anda ingin memiliki ToC di dalam elemen teks kaya Anda, lihat akhir artikel ini untuk detail selengkapnya.

Terakhir, berikan elemen Rich Text sebuah id "konten". Ini akan diperlukan nanti untuk memastikan bahwa kita menggunakan heading yang benar di ToC.

Pilih dari dua opsi

Karena ToC akan dibuat secara otomatis, kita perlu menunjukkan heading mana yang ingin kita sertakan di dalamnya. Dalam posting ini, kami membahas dua opsi:

  1. Membuat ToC hanya berdasarkan satu jenis heading statis, misalnya H2.
  2. Membuat ToC berdasarkan beberapa judul pilihan Anda – misalnya, H2s dan H3s untuk satu posting blog dan H2s dan H4s untuk yang lain.

Opsi 1: ToC satu judul

Dalam opsi ini, ToC akan selalu dibuat berdasarkan heading yang sama.

Masukkan kode berikut di akhir tag <body> Anda di halaman koleksi Anda. Lihat komentar di akhir setiap baris jika Anda ingin memahami cara kerjanya.

  <script> document.getElementById("content").querySelectorAll("h2").forEach(function(heading, i) { // runs a function for all h2 elements inside your rich text element heading.setAttribute("id", "toc-" + i); // gives each h2 a unique id let str = heading.innerHTML; // adds section titles to slugs str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs heading.setAttribute("id", str); // gives each heading a unique id const item = document.createElement("a"); // creates an anchor element called "item" for each h2 item.innerHTML = heading.innerHTML // gives each item the text of the corresponding heading item.setAttribute("class", "tocitem"); // gives each item the correct class item.setAttribute("href", "#" + str); // gives each item the correct anchor link document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div }); </script>
<script> document.getElementById("content").querySelectorAll("h2").forEach(function(heading, i) { // runs a function for all h2 elements inside your rich text element heading.setAttribute("id", "toc-" + i); // gives each h2 a unique id let str = heading.innerHTML; // adds section titles to slugs str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs heading.setAttribute("id", str); // gives each heading a unique id const item = document.createElement("a"); // creates an anchor element called "item" for each h2 item.innerHTML = heading.innerHTML // gives each item the text of the corresponding heading item.setAttribute("class", "tocitem"); // gives each item the correct class item.setAttribute("href", "#" + str); // gives each item the correct anchor link document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div }); </script>

Publikasikan situsnya dan Anda siap melakukannya

Opsi 2: ToC multi-judul

Opsi ini memberi Anda kesempatan untuk menentukan kasus per kasus judul mana yang akan digunakan untuk menghasilkan ToC.

Mari kita mulai dengan membuat bidang teks baru di Koleksi Anda. Kami menyebutnya "TOC berdasarkan...". Di sinilah Anda menentukan heading yang akan digunakan dalam ToC setiap item CMS. Pisahkan dengan koma dan jangan sertakan spasi.


Sekarang, masukkan kode berikut di akhir tag <body> Anda di halaman koleksi Anda. Lihat komentar di akhir setiap baris jika Anda ingin memahami cara kerjanya.

  <script> document.getElementById("content").querySelectorAll("[HEADINGS]").forEach(function(heading, i) { // runs a function for all headings inside your rich text element let str = heading.innerHTML; // adds section titles to slugs str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs heading.setAttribute("id", str); // gives each heading a unique id const item = document.createElement("a"); // creates an anchor element called "item" for each heading item.innerHTML = heading.innerHTML; // gives each item the text of the corresponding heading ("[HEADINGS]").split(",").forEach(function(x) { // runs a function for each item in your headings list if (heading.tagName.toLowerCase()==x) { item.classList.add("tocitem", "toc-" + x); // gives each item the correct class } }); item.setAttribute("href", "#" + str); // gives each item the correct anchor link document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div }); </script>
<script> document.getElementById("content").querySelectorAll("[HEADINGS]").forEach(function(heading, i) { // runs a function for all headings inside your rich text element let str = heading.innerHTML; // adds section titles to slugs str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs heading.setAttribute("id", str); // gives each heading a unique id const item = document.createElement("a"); // creates an anchor element called "item" for each heading item.innerHTML = heading.innerHTML; // gives each item the text of the corresponding heading ("[HEADINGS]").split(",").forEach(function(x) { // runs a function for each item in your headings list if (heading.tagName.toLowerCase()==x) { item.classList.add("tocitem", "toc-" + x); // gives each item the correct class } }); item.setAttribute("href", "#" + str); // gives each item the correct anchor link document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div }); </script>

Terakhir, pastikan untuk mengganti [HEADINGS] dengan nilai bidang CMS "ToC based on..." Anda.


Itu saja, Anda siap untuk mempublikasikan.

Kustomisasi

Status aktif dalam Daftar Isi yang lengket

Terinspirasi oleh posting Chris Coyier tentang CSS-Tricks, kami membangun cara untuk menambahkan status aktif ke item ToC yang terlihat – fitur hebat untuk ToC yang lengket.

Pertama, tambahkan "observer.observe(heading);" di awal kode yang Anda terapkan tadi. Lihat tangkapan layar untuk lokasi yang benar.

Kemudian, tambahkan potongan kode berikut di atas semua kode ToC yang ada:

  <script> const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const id = entry.target.getAttribute("id"); if (entry.isIntersecting) { document.querySelectorAll(".active").forEach((z) => { z.classList.remove("active") }); document.querySelector(`a[href="#${id}"]`).classList.add("active"); } }); }, { rootMargin: '0px 0px -75% 0px' }); </script>
<script> const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const id = entry.target.getAttribute("id"); if (entry.isIntersecting) { document.querySelectorAll(".active").forEach((z) => { z.classList.remove("active") }); document.querySelector(`a[href="#${id}"]`).classList.add("active"); } }); }, { rootMargin: '0px 0px -75% 0px' }); </script>

Kode menambahkan kelas yang disebut "aktif" ke tocitem yang terlihat dan menghapus kelas ketika tocitem baru muncul.

Terakhir, pastikan untuk menata kelas "aktif" dengan memberinya warna latar belakang yang berbeda, misalnya.

Lalai

Tampilkan ToC hanya pada beberapa item CMS

Jika Anda tidak ingin ToC muncul di beberapa item CMS Anda, selesaikan langkah-langkah berikut:

1. Biarkan bidang "ToC based on.." kosong.
 Jika Anda menggunakan Opsi 1, tambahkan sakelar di koleksi CMS Anda untuk menunjukkan apakah ToC akan muncul atau tidak. Lalai

2. Jadikan visibilitas div ToC Anda bersyarat berdasarkan pemilih pada langkah 1.

3. Buat pernyataan if di awal cuplikan kode ToC Anda untuk menghindari menjalankan fungsi jika bidang kosong. Ingatlah untuk menutup dengan "}".

ToC di dalam elemen Teks Kaya Anda

Jika Anda ingin menempatkan ToC di dalam elemen Rich Text, Anda dapat mereplikasi elemen div ToC dengan kode sematan.

Buat elemen kode khusus di dalam Rich Text Anda dan salin & tempel "<div id="toc" class="toc"></div>" di bidang kode.


Jika Anda ingin memiliki ToC sebaris hanya pada beberapa item CMS dan ToC "normal" pada item lain, Anda perlu melakukan beberapa trik tambahan:

1. Buat pemilih Opsi dengan hanya satu opsi: ".getElementById('content'). Pilih pada item CMS di mana Anda ingin memiliki ToC di dalam Rich Text.

2. Tampilkan ToC "normal" hanya jika pemilih tidak disetel.


3. Tambahkan nilai pemilih ke bagian kode berikut. Sekarang, jika pemilih telah dipilih, kode akan menambahkan item ToC di dalam div ToC yang benar.

Hindari overlay navbar pada scroll

Anda mungkin memperhatikan bahwa ketika mengklik tautan ToC, halaman akan bergulir ke bawah ke judul yang benar tetapi diblokir oleh navbar Anda.

Untuk memperbaiki ini:

  1. Pastikan posisi elemen nav Anda disetel ke "fixed"
  2. Ubah tag elemen nav menjadi "Header"

Lalai

Itu dia! Jika Anda mengalami masalah di sepanjang jalan, jangan ragu untuk mengirimi saya email atau menghubungi saya melalui Twitter / LinkedIn.

Saya juga ingin tahu apakah Anda akhirnya menggunakan sistem ini, jadi tolong ping saya jika Anda melakukannya dan bagikan pos dengan orang lain yang mungkin mendapat manfaat darinya ️