https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"> ```````````` Untuk informasi lebih lanjut buka [halaman tocbot](https://tscanlin.github.io/tocbot/). ## Alur Proses Sebelum masuk pada tahap implementasi, ada beberapa alur proses yang harus dipahami terlebih dahulu untuk menjalankan tutorial ini. 1. Sebuah konten ingin dibuatkan daftar isinya harus dirender terlebih dahulu ke dalam sebuah halaman atau konten tersebut harus ditampilkan terlebih dahulu sebelum dibuatkan daftar isinya. Hal ini dilakukan karena proses pembuatan daftar isi terjadi pada *client side* atau dalam kata lain kita tidak perlu mengubah format artikel pada penyedia layanan blog. 2. Setelah konten ditampilkan sebuah fungsi harus dibuat untuk memilih elemen heading untuk ditambahkan attributnya. 3. Ketika elemen heading telah didapat dan berhasil dikumpulkan, anda perlu membuat sebuah baris kode untuk mengeksekusi penambahan atribut ID pada setiap heading yang terdapat pada konten. 4. Setelah seluruh heading telah terimplementasi, maka buatlah daftar isi tersebut menggunakan library tocbot. ## Implementasi Mari menulis kode, saya akan membagi menjadi beberapa tahapan berdasarkan alur proses. ### Menyiapkan artikel Sebelum menulis kode pastikan artikel yang dibuat telah siap ini terkhusus pada anda yang menggunakan layanan blog seperti blogger atau aplikasi blog seperti wordpress. Pastikan artikel anda memiliki susunan heading yang benar sesuai dengan penggunaan. ### Menyisipkan Attribut ID atau Class untuk membuat target pada tocbot Setelah artikel anda siap, buka template tampilan artikel blog anda dan pastikan buat sebuah attribut ID atau Class pada untuk menunjukkan bahwa ini adalah konten dari artikel anda. Sebagai contoh jika sebelumnya seperti ini : ````````````

```````````` Setelah saya tambah attribut ID dengan value kontenArticle maka hasil coddingan saya akan seperti ini : ````````````

// Block Syntax PHP Wordpress Untuk Menampilkan Data Content

```````````` **Catatan :** Anda juga dapat menggunakan class yang sudah ada untuk menjadi target attribut untuk tocbot, namun pastikan bahwa attribut tersebut tidak duplikat. ### Melakukan Seleksi Setelah konten ditampilkan selanjutnya kita perlu membuat sebuah perintah javascript untuk menyeleksi elemen heading, disini saya akan membutuhkan target attribut sebelumnya untuk melakukan seleksi tersebut adapun kodenya adalah sebagai berikut : ```````````` // Mengambil sebuah elemen berdasarkan id const konten = document.getElementById("kontenArticle"); // Melakukan seleksi pada elemen heading berdasarkan target yang dibuat const body = konten.querySelectorAll("h1, h2, h3, h4, h5, h6"); ```````````` ### Menambahkan attribut ID pada heading yang diseleksi Setelah seleksi telah dilakukan maka anda perlu menambahkan attribut ID pada heading yang diseleksi tersebut, heading yang terseleksi telah tersimpan pada variable ````body```` sehingga anda perlu melakukan ````forEach```` pada variable tersebut. ```````````` body.forEach(element => { element.id = str_slug(element.textContent); }); ```````````` Pada kode sebelumnya saya memanggil sebuah function bernama str_slug, mungkin beberapa orang akan mendapati error seperti fungsi str_slug tidak tersedia. Maka sebelum anda bingung saya akan berikan fungsi tersebut dan letakkan sebelum kode - kode yang buat. ```````````` function str_slug(str) { return str .toString() .toLowerCase() .replace(/\s+/g, "-") // Replace spaces with - .replace(/[^\w\-]+/g, "") // Remove all non-word chars .replace(/\-\-+/g, "-") // Replace multiple - with single - .replace(/^-+/, "") // Trim - from start of text .replace(/-+$/, ""); // Trim - from end of text } ```````````` ### Menjalankan Tocbot Setelah anda menyelesaikan langkah sebelumnya, waktunya anda menjalankan library tocbot. Adapun contoh yang bisa ditiru adalah sebagai berikut : ```````````` tocbot.init({ // Where to render the table of contents. tocSelector: "#toctoc", // Where to grab the headings to build the table of contents. contentSelector: "#kontenArticle", // Which headings to grab inside of the contentSelector element. headingSelector: "h1, h2, h3", // For headings inside relative or absolute positioned containers within content. hasInnerContainers: true }); ```````````` ## Kekurangan Tutorial Ini Jika anda ingin melihat lebih jauh tentang tutorial ini, sebenarnya tutorial ini memiliki kekurangan yang tidak terlalu mempengaruhi keindahan tampilan artikel anda namun hanya terletak pada attribut ID yang redundant atau memiliki arti terlalu banyak attribut ID yang sama. Jadi ketika anda menambahkan attribut ID ````coba```` pada sebuah heading yang juga telah memiliki attribut ID ````coba```` maka hasilnya mungkin akan seperti ini : ````````````

```````````` Meskipun begitu saya sendiri belum mencobanya, tapi berdasarkan syntax javascript yang telah saya buat hal ini sangat dimungkinkan untuk terjadi. ## Kenapa Artikel Ini Lahir ? Secara tampilan anda tidak perlu mengikuti cara ini untuk membuat sebuah daftar isi karena tocbot sudah bisa digunakan untuk membuat daftar isi secara otomatis, namun sayangnya tocbot hanya dapat membuat sebuah hyperlink yang mengarah pada heading tersebut dengan bantuan attribut id pada heading. Sehingga setiap kali anda menulis artikel mungkin saja anda harus menyisipkan attribut ID secara manual pada editor blog anda. Jika anda menanyakan bagaimana hasil jadinya, ya hasil jadinya sudah anda dapat lihat pada sebelah kanan artikel ini. Full Contoh Source Code : [https://gist.github.com/ambrizals/98f776cda9aada9cf0ac305c3a7991a3](https://gist.github.com/ambrizals/98f776cda9aada9cf0ac305c3a7991a3) Artikel Referensi : [https://jeroensormani.com/automatically-add-ids-to-your-headings/](https://jeroensormani.com/automatically-add-ids-to-your-headings/)

Membuat Daftar Isi Otomatis Pada Sebuah Artikel (Client Side)