Modifikasi - Table of Content

Daftar isi pada tulisan

Karunia Deva

3 Oct 2025 · 2 min read

Tulisan ini adalah bagian dari seri blogdev.

Saya memindahkan Table of Content (ToC) atau Daftar Isi yang semula berada di tengah-tengah Informasi Penulis dan Tagar menjadi di sebelah kiri. Alasannya sama seperti sidenote, yaitu untuk memanfaatkan area kosong. Karena kode ToC sudah ada, maka saya hanya perlu mengubah tampilannya saja dengan cara membuat file CSS di /assets/css/toc.css atau /assets/css/custom.css lalu menempel kode berikut:

.toc-float {
    position: fixed;
    top: 100px;
    left: 24px;
    width: 220px;
    max-width: 80vw;
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
    background: rgba(255,255,255,0); /* Fully transparent by default */
    transition: background 0.3s, box-shadow 0.3s, opacity 0.3s;
    z-index: 999;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 0 8px rgba(0,0,0,0); /* No shadow when transparent */
    padding: 16px 8px 16px 20px;
    font-size: 80%;
    opacity: 0.2; /* Almost invisible */
    pointer-events: auto;
}

.toc-float a {
    text-decoration: none;
    font-weight: normal;
    transition: font-weight 0.2s;
}

.toc-float a:hover {
    font-weight: bold;
    text-decoration: none;
}

.toc-float:hover,
.toc-float:focus-within {
    background: $global-font-secondary-color; /* Opaque on hover */
    box-shadow: 4px 0 12px rgba(0,0,0,0.08);
    opacity: 1;
}

.toc-title {
    font-weight: bold;
    margin-bottom: 12px;
    font-size: 1.2em;
}
.toc-content {
    font-size: 1em;
}

.toc-content ul,
.toc-content ol {
    list-style: disc; /* None to remove bullet points or numbers */
    padding: 0; /* Removes default left padding from lists */
    margin: 0;
}

.toc-content li {
    margin-bottom: 0em; /* Adjust as needed for spacing between items */
}

@media (max-width: 1000px) {
    .toc-float {
    display: none;
    }
}

Meski kode CSS sudah terpasang, namun ToC masih menempel pada bagian konten. Untuk itu, saya memindahkan kode ToC ke bawah Breadcrumbs yang ada di file /layouts/_default/single.html.

{{ if not .IsHome }}
{{ partial "breadcrumbs.html" . }}
{{ end }}

{{ if .Param "toc" }}
  <aside class="toc-float">
    <p class="toc-title">Contents</p>
    <div class="toc-content">
      {{ .TableOfContents }}
    </div>
  </aside>
{{ end }}

Lalu sama seperti sidenote, saya memasukkan baris berikut ke dalam /layouts/partials/head/css.html

{{
$CSS := slice
...
(resources.Get "css/toc.css")
...
}}

Beberapa catatan:

Kali ini saya menggunakan batas minimum 1000 pixel secara horizontal pada ToC. Menurut saya, bagian sidenote lebih penting daripada ToC sehingga sebisa mungkin lebih banyak layar yang memprioritaskan ToC ¹1. Saya sangsi masih ada layar berukuran kecil di era modern ini, tapi hanya untuk berjaga-jaga saja. .
Saya juga membuat kotak ToC semi transparan dan baru akan muncul secara penuh saat mouse diarahkan ke atasnya. Subjudul akan berubah menjadi tebal juga.
Saya masih bingung dengan posisi kotak ToC yang bagus, tapi menurut saya posisi saat ini tidak terlalu buruk ²2. Untuk ukuran layar 1386x768. Hubungi saya jika tampilan ToC dan sidenote agak aneh di layar berbeda .
ToC akan tetap muncul meski halaman di-scroll sampai bawah.

Tulisan ini adalah bagian dari seri blogdev.