3 Cara Mudah Membuat Table of Content di GoHugo

Gohugo adalah salah satu aplikasi yang dapat memudahkan kita dalam membuat sebuah website lebih stabil. Table of content atau daftar isi sangat memudahkan pembaca untuk dapat membantu mengarahkan

Pengenalan Gohugo

Gohugo adalah salah satu SSG (Satatic Site Generator) yang bisa diaplikasikan pada beberapa CMS seperti Wordpress. Cara menggunakan aplikasi ini cukup mudah dibanding aplikasi yang lain. Dan jika dibanding dengan pergerakan beberapa SSG lainnya, aplikasi ini jauh lebih stabil karena bisa support php dan html sekaligus.

Apa Itu Table of Content

Table of content adalah sebuah daftar ide pokok utama dalam sebuah artikel atau bacaan. GoHugo menyediakan fungsi untuk membuat table of content atau daftar isi secara otomatis. Daftar isi secara tidak langsung membuat pembaca mudah untuk menemukan apa yang dicari dalam sebuah artikel. Dengan menggunakan daftar isi di artikel Anda, tulisan kita akan lebih terlihat rapi karena seluruh isi dalam artikel sudah tersusun berdasarkan alur cerita yang telah dibuat oleh Anda sebagai sang kreator artikel tersebut.

Membuat daftar isi menggunakan GoHugo ternyata cukup mudah. Dengan 4 langkah berikut ini dapat Anda kerjakan dengan sangat mudah. Anda juga dapat mengerjakannya tanpa membutuhkan waktu yang lama. Artikel ini juga dapat Anda lakukan walaupun Anda masih masih level pemula dalam belajar GoHugo.

Langkah Mudah Membuat Table Of Content di GoHugo

Di dalam GoHugo, ada beberapa cara yang bisa Anda gunakan untuk membuat daftar isi dalam sebuah artikel tulisan. Di dalam artikel kali ini, setidaknya akan dibahas 3 cara membuat daftar isi di GoHugo, dua cara dengan instal plugin dan satu cara lagi dengan menambahkan syntax di file tema GoHugo.

Dua cara pertama cukup mudah dilakukan untuk semua orang. Karena, kita hanya instal plugin yang telah tersedia dan tinggal memasukkan sedikit kode maka langsung akan muncul daftar isi. Cara ketiga bisa dibilang sedikit advance. Anda diharuskan memahami tema GoHugo secara detail untuk dapat menempatkan kode daftar isi dengan benar dan dapat muncul secara otomatis.

1. Instal Plugin Markdown Auto TOC

Cara pertama yang bisa Anda gunakan untuk membuat daftar isi di GoHugo adalah dengan melakukan instalasi plugin Markdown Auto TOC. Plugin ini penggunaannya praktis dan dapat langsung digunakan dalam artikel. Anda juga dapat menyesuaikan heading berapa saja yang dapat dijadikan daftar isi. Langkah-langkah yang dapat Anda lakukan dengan plugin Markdown Auto TOC adalah sebagai berikut:

  • Instal terlebih dahulu text editor Visual Studio Code di komputer atau laptop Anda.
  • Setelah proses instal Visual Studio Code berhasil, maka arahkan ke Menu > Extensions. Menu Extensions juga dapat diakses dengan shortcode CTRL + SHIFT + X.
  • Di bagian search yang terdapat di menu Extensions, ketikkan kata Markdown Auto TOC.
  • Klik di bagian Install untuk mendapatkan plugin.

Setelah selesai dengan proses instal plugin Markdown Auto TOC, maka tidak secara otomatis daftar isi tersebut akan muncul di dalam artikel Anda. Ada beberapa langkah lagi yang harus Anda lalui untuk bisa menampilkan daftar isi. Nah, berikut ini bisa Anda lakukan untuk menampilkan daftar isi dengan plugin Markdown Auto TOC ini:

  • Buatlah artikel dengan menggunakan bahasa Markdown seperti biasanya. Jangan lupa untuk memberi Heading pada bagian yang ingin dijadikan daftar isi.
  • Setelah selesai membuat artikel, klik kanan di bagian yang ingin Anda sisipkan daftar isi. Anda bisa menyisipkan daftar isi di awal artikel, di tengah-tengah artikel, bisa juga di bagian akhir artikel.
  • Pilih perintah Markdown Sections: Insert/Update. Lalu, tuliskan [[TOC]] di bagian yang akan Anda jadikan daftar isi.
  • Kemudian, simpan hasil tulisan Anda. Untuk cek apakah kode sudah dapat menampilkan daftar isi atau belum, Anda dapat melihatnya di localhost.

Untuk lebih memahami bagaimana cara kerja dari plugin Markdown Auto TOC, Anda dapat mengunjungi website resminya. Di website tersebut, Anda akan menemukan bagaimana plugin ini bekerja dan juga dapat memodifikasinya sesuai dengan kebutuhan Anda.

2. Instal Plugin Markdown TOC

Plugin Markdown TOC ini pertama kali dirilis ke publik pada tanggal 2 Mei 2016 yang lalu oleh AlanWalk. Feature dari plugin ini terakhir kali diupdate pada tanggal 25 Juli 2017. Plugin Markdown TOC juga dapat secara otomatis menjadikan bagian heading dalam artikel Anda untuk menjadi daftar isi. Anda juga dapat mengatur sendiri heading mana yang akan dijadikan bagian dari daftar isi.

Anda dapat menggunakan plugin Markdown TOC dengan cara yang hampir sama dengan menggunakan plugin Markdown Auto TOC. Proses instalasi juga dapat dilakukan dengan mudah dan cepat. Efek plugin ini juga dapat Anda rasakan segera. Barikut ini adalah langkah-langkah yang dapat diterapkan untuk menggunakan plugin Markdown TOC:

  • Langkah awal yang harus Anda lakukan adalah instal text editor Visual Studio Code di komputer atau laptop yang akan Anda gunakan.
  • Setelah proses instal Visual Studio Code berhasil, maka arahkan ke Menu > Extensions. Menu Extensions juga dapat diakses dengan shortcode CTRL + SHIFT + X.
  • Di bagian search yang terdapat di menu Extensions, ketikkan kata Markdown TOC.
  • Kemudian klik di bagian Install untuk mendapatkan plugin.

Setelah selesai dengan proses instal plugin Markdown TOC, maka daftar isi tidak secara otomatis akan muncul di dalam artikel Anda. Ada beberapa langkah lagi yang harus Anda lalui untuk bisa menampilkan daftar isi. Lakukan langkah berikut ini untuk menampilkan daftar isi dengan plugin Markdown TOC ini:

  • Buatlah artikel dengan menggunakan bahasa Markdown seperti biasanya. Jangan lupa untuk memberi Heading pada bagian yang ingin dijadikan daftar isi.
  • Setelah selesai membuat artikel, klik kanan di bagian yang ingin Anda sisipkan daftar isi. Anda bisa menyisipkan daftar isi di awal artikel, di tengah-tengah artikel, bisa juga di bagian akhir artikel.
  • Pilih perintah Markdown TOC: Insert/Update. Hasil perintah tersebut masih dalam bentuk mentah dan Anda diharuskan untuk melakukan sedikit editing agar fungsi perintah tersebut dapat aktif.
  • Kemudian, simpan hasil tulisan Anda. Hasil dari kode di atas adalah seperti daftar isi yang ada di awal artikel ini.

Untuk lebih memahami bagaimana cara kerja dari plugin Markdown TOC, Anda dapat mengunjungi website resminya. Anda akan menemukan bagaimana plugin ini bekerja dan juga dapat memodifikasinya sesuai dengan kebutuhan Anda dengan mempelajari website tersebut.

3. Menggunakan Syntax {{.TableOfContents}}

Hugo dapat secara otomatis mem-parsing konten dan membuat daftar isi yang dapat Anda gunakan dalam template tema GoHugo yang sedang Anda pakai. Dengan menambahkan variabel {{.TableOfContents}}, Anda bisa mengatur sendiri heading berapa yang ingin Anda jadikan daftar isi. Di bawah ini adalah contoh syntax untuk membuat daftar isi.

<!-- Halaman Komentar -->

## Pengantar

Suatu pagi, ketika Gregor Samsa terbangun dari mimpi yang bermasalah, dia mendapati dirinya berubah di tempat tidurnya menjadi hama yang mengerikan.

## Tajukku

Dia berbaring di punggungnya yang seperti baju besi, dan jika dia sedikit mengangkat kepalanya, dia bisa melihat perutnya yang cokelat, sedikit berkubah dan dibagi oleh lengkungan menjadi bagian-bagian yang kaku. Tempat tidurnya hampir tidak bisa menutupinya dan sepertinya siap meluncur kapan saja.

### Subjudul Saya

Sebuah koleksi sampel tekstil diletakkan di atas meja - Samsa adalah seorang salesman keliling - dan di atasnya tergantung gambar yang baru-baru ini dipotongnya dari sebuah majalah bergambar dan disimpan dalam bingkai yang bagus dan disepuh emas. Itu menunjukkan seorang wanita dilengkapi dengan topi bulu dan boa bulu yang duduk tegak, mengangkat muff bulu tebal yang menutupi seluruh lengan bawahnya ke arah penonton. Gregor kemudian berbalik untuk melihat keluar jendela pada cuaca yang membosankan.

Hugo akan mengambil Markdown di atas dan akan membuat daftar isi dari ## Pengantar, ## Tajukku, dan ### Subjudul Saya dan kemudian menyimpannya dalam variabel halaman {{.TableOfContents}}. Hasil dari syntax di atas dapat dilihat seperti gambar berikut ini.

Hosting Unlimited SSD

Sumber CPU dan alokasi memory lebih besar sehingga Anda lebih leluasa mengembangkan bisnis.

Promo Diskon 50%