Menu
📱 Lihat versi lengkap (non-AMP)
Hugo Web Development Information Architecture

Hugo Taxonomy dan Menu: Panduan Lengkap Struktur Navigasi dan Kategorisasi Konten

Editor: Hendra WIjaya
Update: 3 February 2026
Baca: 7 menit

Hugo Taxonomy dan Menu: Panduan Lengkap Struktur Navigasi dan Kategorisasi Konten

Taxonomy dan menu adalah dua komponen fundamental dalam membangun website yang terorganisir dan mudah dinavigasi. Hugo menyediakan sistem taxonomy yang powerful untuk mengkategorisasi konten, serta sistem menu yang fleksibel untuk membuat struktur navigasi yang kompleks. Dalam panduan ini, kita akan membahas secara komprehensif cara mengimplementasikan kedua sistem ini untuk membangun website Hugo yang user-friendly dan SEO-optimized.

Taxonomy dalam konteks Hugo adalah sistem untuk mengelompokkan konten berdasarkan karakteristik tertentu. Contoh taxonomy yang paling umum adalah kategori dan tag, namun Hugo memungkinkan Anda membuat taxonomy custom sesuai kebutuhan. Menu di sisi lain adalah struktur navigasi yang mendefinisikan bagaimana pengunjung bergerak melalui website Anda. Hugo mendukung berbagai jenis menu dan penempatan yang dapat dikonfigurasi dengan mudah melalui konfigurasi atau frontmatter.

Memahami Konsep Taxonomy di Hugo

Taxonomy di Hugo adalah hubungan terbalik antara grouping dan membership. Ketika Anda mendefinisikan taxonomy “tags” dan memberikan nilai “hugo” dan “tutorial” ke sebuah halaman, maka halaman tersebut adalah member dari taxonomy tags dengan nilai-nilai tersebut. Hugo secara otomatis membuat halaman-halaman taxonomy yang mengumpulkan semua konten dengan nilai taxonomy yang sama.

Default Taxonomy: Categories dan Tags

Hugo menyediakan dua taxonomy bawaan yang paling sering digunakan: categories dan tags. Untuk menggunakannya, cukup tambahkan field ini di frontmatter konten Anda:

---
title: "Tutorial Hugo untuk Pemula"
date: 2026-02-03T11:00:00.000Z
categories:
  - Hugo
  - Web Development
tags:
  - tutorial
  - beginner
  - static-site-generator
---

Perbedaan utama antara categories dan tags adalah bahwa categories umumnya bersifat hierarkis (sebuah halaman hanya bisa berada di satu kategori), sementara tags bersifat flat dan non-hierarkis (sebuah halaman bisa memiliki banyak tag). Namun, Hugo tidak memaksakan perbedaan ini dan Anda dapat menggunakan keduanya sesuai kebutuhan.

Membuat Custom Taxonomy

Selain categories dan tags, Hugo memungkinkan Anda membuat taxonomy custom untuk kebutuhan spesifik. Misalnya, Anda ingin membuat taxonomy “technologies” untuk mengelompokkan konten berdasarkan teknologi yang digunakan:

# hugo.toml
[taxonomies]
  category = "categories"
  tag = "tags"
  technology = "technologies"
  author = "authors"
  series = "series"

Setelah mendefinisikan taxonomy di konfigurasi, Anda dapat menggunakannya di frontmatter:

---
title: "Integrasi Tailwind CSS dengan Hugo"
technologies:
  - Hugo
  - Tailwind CSS
  - Node.js
authors:
  - John Doe
series:
  - Static Site Generator Tutorial
---

Mengkonfigurasi Behavior Taxonomy

Hugo menyediakan opsi konfigurasi untuk mengatur behavior taxonomy melalui konfigurasi:

# hugo.toml
[taxonomies]
  category = "categories"
  tag = "tags"
  technology = "technologies"

[taxonomy.term]
  limit = 100
  orderBy = "date"
  order = "desc"

[taxonomy.wrapper]
  limit = 1000

Halaman Taxonomy Otomatis

Ketika Anda mendefinisikan taxonomy, Hugo secara otomatis membuat halaman-halaman untuk setiap nilai taxonomy. Halaman-halaman ini berisi daftar semua konten yang terkait dengan nilai taxonomy tersebut.

Struktur URL Taxonomy

Hugo menggunakan pola URL default untuk halaman taxonomy. Untuk categories, URL default adalah /categories/{slug}/, untuk tags adalah /tags/{slug}/, dan untuk custom taxonomy seperti technologies adalah /technologies/{slug}/. Anda dapat mengubah pola ini di konfigurasi:

# hugo.toml
[permalinks]
  categories = "/category/:slug/"
  tags = "/tag/:slug/"
  technologies = "/tech/:slug/"

Hugo juga menyediakan variabel URL khusus untuk taxonomy: :slug untuk slug dari nilai taxonomy, :name untuk nama dari nilai taxonomy, dan :term untuk istilah lengkap dari nilai taxonomy.

Template untuk Halaman Taxonomy

Halaman taxonomy menggunakan template yang sama dengan halaman list lainnya, yaitu list.html. Namun, Hugo juga menyediakan template khusus untuk halaman taxonomy di layouts/_default/terms.html:

{{ define "main" }}
<header class="taxonomy-header">
    <h1>{{ .Title }}</h1>
    <p class="taxonomy-description">
        {{ with .Description }}{{ . }}{{ else }}
        Daftar semua konten dengan {{ .Data.Singular | humanize }}: <strong>{{ .Title }}</strong>
        {{ end }}
    </p>
</header>

<div class="taxonomy-content">
    {{ range .Paginator.Pages }}
        {{ partial "post-card.html" . }}
    {{ end }}
</div>

{{ template "_internal/pagination.html" . }}
{{ end }}

Mengimplementasikan Menu di Hugo

Menu di Hugo didefinisikan melalui konfigurasi dan dapat ditempatkan di berbagai lokasi di template. Hugo mendukung multiple menu yang dapat ditempatkan di area berbeda dari website.

Mendefinisikan Menu di Konfigurasi

Cara paling sederhana untuk mendefinisikan menu adalah melalui konfigurasi hugo.toml:

# hugo.toml
[[menu.main]]
  identifier = "home"
  name = "Beranda"
  url = "/"
  weight = 1

[[menu.main]]
  identifier = "blog"
  name = "Blog"
  url = "/blog/"
  weight = 2

[[menu.main]]
  identifier = "tutorials"
  name = "Tutorial"
  url = "/tutorials/"
  weight = 3
  [menu.main.children]
    identifier = "hugo"
    name = "Hugo"
    url = "/tutorials/hugo/"
    weight = 1

[[menu.main]]
  identifier = "about"
  name = "Tentang"
  url = "/about/"
  weight = 10

Menambahkan Menu melalui Frontmatter

Anda juga dapat menambahkan entry menu langsung dari frontmatter halaman:

---
title: "Tentang Kami"
date: 2026-02-03T11:00:00.000Z
menu:
  main:
    identifier: "about"
    weight: 10
    name: "Tentang"
---

# Tentang Kami

Konten halaman tentang...

Menu dapat memiliki parameter tambahan yang dapat diakses di template:

# hugo.toml
[[menu.main]]
  identifier = "external"
  name = "Dokumentasi"
  url = "https://gohugo.io/documentation/"
  weight = 20
  [menu.main.params]
    icon = "external-link"
    newTab = true

Di template, Anda dapat mengakses parameter ini:

{{ range .Site.Menus.main }}
    <a href="{{ .URL }}"{{ if .Params.newTab }} target="_blank" rel="noopener"{{ end }}>
        {{ with .Params.icon }}
            <span class="icon">{{ . }}</span>
        {{ end }}
        {{ .Name }}
    </a>
{{ end }}

Rendering Menu di Template

Untuk merender menu di template, Hugo menyediakan beberapa fungsi dan method yang berguna:

{{ $menu := .Site.Menus.main }}
{{ range $menu }}
    <a href="{{ .URL }}" class="{{ if $.IsMenuCurrent "main" . }}active{{ end }}">
        {{ .Name }}
    </a>
{{ end }}

Fungsi .IsMenuCurrent berguna untuk menandai menu aktif berdasarkan halaman saat ini. Fungsi .HasChildren dapat digunakan untuk memeriksa apakah menu item memiliki child items.

Membuat Menu Multi-Level

Website dengan banyak halaman sering membutuhkan menu multi-level untuk organisasi yang lebih baik. Hugo mendukung nested menu melalui struktur children di konfigurasi.

Konfigurasi Multi-Level Menu

# hugo.toml
[[menu.main]]
  identifier = "products"
  name = "Produk"
  url = "/products/"
  weight = 2

[[menu.main]]
  identifier = "products-software"
  name = "Software"
  url = "/products/software/"
  weight = 1
  parent = "products"

[[menu.main]]
  identifier = "products-software-desktop"
  name = "Desktop Apps"
  url = "/products/software/desktop/"
  weight = 1
  parent = "products-software"

[[menu.main]]
  identifier = "products-software-web"
  name = "Web Apps"
  url = "/products/software/web/"
  weight = 2
  parent = "products-software"

Template untuk Multi-Level Menu

Berikut adalah template untuk merender menu multi-level dengan dropdown:

{{/* layouts/partials/menu.html */}}
<nav class="main-nav">
    {{ template "menu_item" (dict "menu" .Site.Menus.main "page" .) }}
</nav>

{{- define "menu_item" -}}
    {{- $menu := .menu -}}
    {{- $page := .page -}}
    <ul class="menu-list">
        {{- range $menu -}}
            <li class="menu-item{{ if .HasChildren }} has-children{{ end }}">
                <a href="{{ .URL }}"
                   class="{{ if $page.IsMenuCurrent "main" . }}active{{ end }}"
                   {{ if .HasChildren }}aria-haspopup="true" aria-expanded="false"{{ end }}>
                    {{ .Name }}
                </a>
                {{- if .HasChildren -}}
                    <ul class="submenu">
                        {{- range .Children -}}
                            <li class="submenu-item">
                                <a href="{{ .URL }}">{{ .Name }}</a>
                            </li>
                        {{- end -}}
                    </ul>
                {{- end -}}
            </li>
        {{- end -}}
    </ul>
{{- end -}}

{{- define "dict" -}}
    {{- range $k, $v := . -}}
        {{- $.Scratch.Set $k $v -}}
    {{- end -}}
    {{- $.Scratch.Get "dict" -}}
{{- end -}}

Terkadang Anda ingin menu yang secara otomatis mencerminkan struktur section dari konten Anda. Ini dapat dicapai dengan iterasi melalui sections dan membuat menu secara dinamis.

Template untuk Section-Based Menu

{{/* layouts/partials/section-menu.html */}}
<nav class="section-nav">
    {{- range where .Site.RegularPages "Section" "notes" -}}
        {{- $section := .CurrentSection -}}
    {{- end -}}
    
    {{- $sections := where .Site.RegularPages "Section" "!=" "" -}}
    {{- $grouped := group $sections "Section" -}}
    
    <ul class="section-list">
        {{- range $grouped -}}
            {{- $section := index .Key 0 -}}
            {{- $pages := .Pages -}}
            <li class="section-item">
                <a href="{{ $section.Permalink }}" class="section-link">
                    {{ $section.Title }}
                </a>
                <ul class="section-posts">
                    {{- range first 5 $pages -}}
                        <li>
                            <a href="{{ .Permalink }}">{{ .Title }}</a>
                        </li>
                    {{- end -}}
                </ul>
            </li>
        {{- end -}}
    </ul>
</nav>

Breadcrumb adalah navigasi sekunder yang menunjukkan posisi halaman saat ini dalam struktur website. Hugo menyediakan method .Ancestors untuk membuat breadcrumb:

{{/* layouts/partials/breadcrumb.html */}}
<nav aria-label="Breadcrumb" class="breadcrumb">
    <ol>
        <li><a href="/">Beranda</a></li>
        {{- range .Ancestors -}}
            <li>
                <a href="{{ .Permalink }}">{{ .Title }}</a>
            </li>
        {{- end -}}
        <li aria-current="page">{{ .Title }}</li>
    </ol>
</nav>

Related Content berdasarkan Taxonomy

Hugo menyediakan fungsi untuk menampilkan konten terkait berdasarkan taxonomy. Ini sangat berguna untuk meningkatkan engagement pengunjung:

{{/* layouts/partials/related-content.html */}}
{{- $related := .Site.RegularPages.Related . -}}
{{- with $related -}}
    <section class="related-content">
        <h2>Artikel Terkait</h2>
        <div class="related-grid">
            {{- range first 3 . -}}
                {{ partial "post-card.html" . }}
            {{- end -}}
        </div>
    </section>
{{- end -}}

Untuk mengaktifkan related content, konfigurasi di hugo.toml:

# hugo.toml
[related]
  threshold = 80
  includeNewer = true
  toLower = false
  [[related.indices]]
    name = "tags"
    weight = 80
  [[related.indices]]
    name = "categories"
    weight = 40

SEO Considerations untuk Taxonomy dan Menu

Taxonomy dan menu memiliki dampak signifikan terhadap SEO website. Beberapa best practices yang perlu diperhatikan meliputi: gunakan URL yang deskriptif untuk halaman taxonomy, implementasikan proper canonical tags untuk menghindari duplicate content, gunakan structured data untuk breadcrumb navigation, dan pastikan navigation mudah diakses dan crawlable oleh search engines.

Kesimpulan

Taxonomy dan menu adalah komponen essential dalam membangun website Hugo yang terorganisir dan user-friendly. Dengan memahami cara mengimplementasikan taxonomy untuk kategorisasi konten dan menu untuk navigasi, Anda dapat menciptakan struktur website yang intuitif bagi pengunjung dan optimal untuk search engines. Eksplorasi berbagai konfigurasi dan template untuk menemukan setup yang paling sesuai dengan kebutuhan proyek Anda.

Artikel Terkait

Bagikan:

Link Postingan: https://www.tirinfo.com/hugo-taxonomy-menu/