Hugo Table of Contents

August 18, 2021

Misterthree

Facebook Twitter Instagram Youtube

Jadi dalam posting singkat ini, kita akan membahas cara mengatur daftar isi di blog Hugo Anda.

Kami akan membahas dua metode di bawah ini:

1. Konten
2. Template

Pada metode pertama yang menggunakan shortcode, Anda harus memanggil tag shortcode secara manual di setiap file markdown. Keuntungannya adalah, Anda dapat menempatkannya di mana saja seperti didalam postingan, baik itu di heading pertama, paragraf pertama, dll.

Pada metode kedua, kita akan menambahkan daftar isi dalam file template single.html kita. Jadi daftar isi akan ditambahkan secara otomatis ke semua halaman posting kita saat Hugo merender HTML. Namun kekurangannya, Anda hanya bisa menambahkannya di awal atau akhir postingan.

Sebelum itu, Anda harus tahu dulu tentang dua hal ini:

1. Variabel .TableOfContents Hugo
2. AutoHeading

Variabel .TableOfContents

Hugo menawarkan variabel halaman bawaan yang disebut .TableOfContents, yang berisi markup untuk daftar isi.

Jadi Anda tidak perlu mengurai apa pun secara manual. Sama seperti Anda menarik data materi menggunakan variabel halaman Hugo, Anda dapat memanggil variabel ini di dalam template Anda.

AutoHeading

Hugo menggunakan pengurai markdown Goldmark untuk mengonversi file konten Anda ke HTML. Dan selama proses itu, itu juga menghasilkan atribut ID unik untuk semua judul berdasarkan teksnya.

Meskipun autoHeadingID diaktifkan secara default, beberapa tema atau konfigurasi dapat menonaktifkannya dari file konfigurasi situs. Jika dinonaktifkan secara eksplisit, tautan anchor di daftar isi tidak akan berfungsi.

Jadi, pastikan file konfigurasi tema atau situs Anda tidak menyetel nilai autoHeadingID ke false.

Membuat Daftar Isi di Markdown

Buat Shortcode

Buat file bernama toc.html dengan markup HTML di bawah ini, dan letakkan di dalam direktori layout/shortcodes.

Project
├── contents
├── layouts
│   ├── partials
│   └── shortcodes
│       └── toc.html
├── static
├── themes
└── config.toml

Copy kode dibahan ini kedalam file `toc.html :

<div>
    <h2>Table Of Contents</h2>
    {{ .Page.TableOfContents }}
</div>

Perhatikan bahwa kita harus menambahkan variabel .Page di depan variabel .TableOfContents, karena kita memanggilnya di dalam kode pendek. Jika berada dalam file template, kita bisa langsung memanggilnya tanpa awalan .Page.

Memanggil Shortcode di Markdown

Sekarang Anda dapat memanggil shortcode di atas dari file markdow apa pun di direktori konten Anda:

{{< toc >}}

Perhatikan bahwa nama kode pendeknya sama dengan nama filenya tanpa bagian .html.

Membuat Daftar Isi di Template

Menambahkan daftar isi dalam template bahkan lebih sederhana. Anda bisa memanggil variabel .TableOfContents langsung di dalam file single.html

Sebagai contoh :

{{ define "main" -}}
<div class="landing-content">
  <div class="container-narrow content">
    <div class="article_header">
      {{ partial "single-partials/breadcrumbs.html" . -}}
      <h1 class="article_headline">{{.Title}}</h1>
      {{ partial "single-partials/authors.html" . -}}
    </div>
    {{ .TableOfContents }}
    {{ .Content }}
    {{ partial "single-partials/disqus.html" . -}}
  </div>
  {{ partial "single-partials/navigator.html" . -}}
</div>
{{ end -}}

Konfigurasi

Tambahkan parameter dibawah ini ke dalam konfigurasi sesuaikan dengan Front Matter yang anda gunakan, sebagai contoh saya mengunakan Front Matter toml

[tableOfContents]
    endLevel= 3
    ordered= false
    startLevel= 2

endLevel dan startLevel menentukan level heading yang ingin Anda sertakan dalam TOC. Dengan kode di atas, itu termasuk tag h2 dan h3.

Dengan ordered disetel ke false, yang merupakan nilai default, daftar isi Anda akan muncul dalam daftar HTML yang tidak diurutkan <ul> sedangkan jika Anda menyetelnya ke true, maka daftar HTML akan diurutkan <ol>.