Created with to build something
Version: 5.0.5
cover-membuat-daftar-isi-otomatis-pada-sebuah-artikel-client-side

Codding

Membuat Daftar Isi Otomatis Pada Sebuah Artikel (Client Side)

Cara membuat sebuah daftar isi secara otomatis pada sebuah artikel dalam blog yang bertujuan untuk memudahkan navigasi antar satu inti ke inti lainnya

Feb 12, 2020

Daftar isi, sebagian orang yang mendengar dua kata ini pasti akan teringat tentang sebuah tulisan ilmiah, makalah, tugas sekolah dan buku - buku yang pernah kita baca. Membuat daftar isi adalah hal yang wajib kamu buat ketika karyamu memuat suatu judul yang memuat beberapa inti yang berbeda namun masih berpegang teguh dengan judul, di sekolah pun kita wajib memberi sebuah daftar isi untuk mempermudah guru untuk melihat apa saja isi tugasmu ini. Jadi bagaimana kalau daftar isinya dibuat pada sebuah halaman web, lalu tantangannya adalah bagaimana caranya agar ini dapat terbuat secara otomatis tanpa bantuan siapapun.

Kedengerannya ini mudah apalagi kalau kita bercermin dengan aplikasi pengolah kata yang menawarkan fitur table of content untuk mempercepat proses pembuatan daftar isi, tapi sebenarnya cara yang saya akan bagikan termasuk gampang - gampang sulit tergantung dari bagaimana anda mengaplikasikannya.

Syarat Agar Cara Ini Berhasil

Sebelum memulai tutorial ini ada beberapa syarat yang harus kamu ketahui sebelum ini dapat dieksekusi dengan baik :

Anda Harus Mengetahui Fungsi Heading

Heading atau biasa disebut kepala dari sebuah konten atau dari sebuah inti pembahasan hanyalah sebuah penanda, biasanya anda dapat temui heading dari sebuah cover buku atau bagian pembuka dari sebuah topik. Contohnya simple yang bisa diketahui oleh siapa saja yaitu seperti : Bab I Pendahuluan atau 1.1 Latar Belakang. Penggunaan heading pada dasarnya dapat dikombinasikan dengan sebuah penomoran otomatis, tergantung dari bagaimana format yang diminta atau syarat formal dalam sebuah penulisan karya ilmiah.

Setidaknya Anda Mengetahui Javascript

Jika anda sudah mengerti penggunaan javascript, baiklah itu bukanlah sebuah masalah yang berarti untuk melanjutkan tutorial ini karena syntax yang digunakan hanya sedikit. Namun jika anda masih asing dengan javascript, sebaiknya anda cari tahu dahulu tentang javascript lalu anda dapat kembali pada tutorial ini.

Karena pada tutorial ini saya akan menggunakan javascript untuk membuat daftar isi otomatis pada sebuah artikel dalam blog dan dijalankan pada sisi client atau hanya dijalankan oleh pengunjung. Kode ini tidak di rancang untuk sisi server, namun cara kerjanya dapat kalian terapkan pada sisi server.

Memasang Tocbot

Tocbot merupakan sebuah library javascript yang digunakan untuk membuat daftar isi secara otomatis, tutorial ini dilahirkan karena tocbot tidak dapat bekerja secara langsung tanpa bantuan attribut id pada heading sehingga kita perlu menambahkan attribut id pada heading.

Ada beberapa cara yang dapat digunakan untuk memasang tocbot yaitu dengan cara menambahkan packages baru menggunakan npm atau memasukkan script cdn pada baris kode yang kita miliki.

npm

Perintah yang digunakan untuk memasang tocbot pada npm (node package manager)

npm install --save tocbot

Script CDN

Untuk menggunakan tocbot dengan memasukkan script cdn, anda hanya perlu menambahkan syntax ini sebelum </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>

Untuk informasi lebih lanjut buka halaman 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 :

<div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">

    <div class="entry-content">

        <?php
        if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
            the_excerpt();
        } else {
            the_content( __( 'Continue reading', 'twentytwenty' ) );
        }
        ?>

    </div><!-- .entry-content -->

</div><!-- .post-inner -->

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

<div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">

    <div class="entry-content" id="kontenArticle">

        // Block Syntax PHP Wordpress Untuk Menampilkan Data Content

    </div><!-- .entry-content -->

</div><!-- .post-inner -->

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 :

<h2 id="coba coba"></h2>

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

Artikel Referensi : https://jeroensormani.com/automatically-add-ids-to-your-headings/

Ingin Berkomentar ?

Gunakan fitur komentar dengan bijak demi keamanan dan kenyamanan anda saat berselancar di dunia maya ini, mungkin undang - undang atau peraturan dari sebagian wilayah akan menjerat aktivitas yang ada pada kolom komentar.