Menu Variable Di Hugo
⛾ Home ─ hugo
Kamis, 24 November 2022
(Diupdate: Kamis, 19 Januari 2023) -
📗
7 Menit
Disini kita akan belajar tentang menu di hugo. Mulai dari belajar tentang apa itu menu, fungsinya untuk apa, cara membuat menu, dan lain-lain.
Menu adalah sebuah fitur di hugo yang digunakan untuk mengatur manajemen konten di situs hugo.
Menu kebanyakan digunakan untuk mengatur navigasi di situs.
Misalnya, untuk mengatur navigasi header (bagian atas) atau footer (bagian bawah) dari situs.
Contoh menu
File config.toml:
1[menu]
2[[menu.main]]
3 identifier = 'hugo'
4 name = 'Ini adalah menu hugo'
5 title = 'menu hugo'
6 url = '/hugo/'
7 weight = 1
8[[menu.main]]
9 identifier = 'markdown'
10 name = 'Ini adalah menu markdown'
11 title = 'menu markdown'
12 url = '/markdown/'
13 weight = 2
partials/header.html:
1{{ range .Site.Menus.main }}
2 <ul>
3 <li>
4 <a href="{{ .URL }}" title="{{ .Name }}">{{ .Identifier }}</a>
5 </li>
6 </ul>
7{{ end }}
Masukkan ini di dalam tag html <body> di file baseof.html:
1{{ partial "header.html" . }}
Sebelumnya, pastikan kamu sudah membuat atau memiliki halaman dari url tujuan pada menu.
Misalnya, seperti contoh diatas yang menggunakan url ‘/hugo/’ dan ‘/markdown/’
Cara membuat menu kustom di hugo
Terdapat 2 cara untuk membuat menu di situs hugo.
Cara pertama adalah dengan membuat menu di file konfigurasi situs (config.toml).
Cara kedua adalah dengan membuat menu di bagian front matter dari artikel atau konten.
1. Membuat menu melalui file konfigurasi situs (config.toml)
Cara pertama ini yang paling sering digunakan.
Keuntungan membuat menu di file konfigurasi situs (config.toml) dibandingkan dengan membuat menu di front matter adalah kita dapat membuat banyak menu sekaligus,
Dan mempermudah saat ingin mengedit, menghapus, dan memperbarui menu di situs hugo.
File config.toml:
1[menu]
2[[menu.main]]
3 identifier = 'header'
4 name = 'menu header section'
5 title = 'header section'
6 url = '#header'
7 weight = 1
8[[menu.main]]
9 identifier = 'footer'
10 name = 'menu footer section'
11 title = 'footer section'
12 url = '#footer'
13 weight = 2
2. Membuat menu melalui front matter konten
Selain melalui file config.toml. Kita juga dapat membuat menu di front matter konten atau artikel.
Bedanya apa?
Jika kita membuat menu melalui file konfigurasi situs (config.toml). Kita hanya dapat menggunakan variabel menu.
Sedangkan jika kita membuat menu di front matter konten. Kita dapat menggunakan variabel menu dan variabel halaman atau page.
Untuk mengakses page variable, kita perlu function with dan
.Page.Alasannya adalah karena Entri menu tidak mengetahui nilai dari
.Page.Dengan page variable, kita dapat mengakses apapun dari halaman, seperti judul atau url halaman.
Contoh pada artikel1.md:
1title: "Artikel 1"
2date: 2022-10-11T17:10:34+08:00
3menu:
4 main:
5 title: Artikel Populer
6 weight: 1
File partials/sidebar.html:
1{{ range .Sites.Menus.main }}
2<h3>{{ .Title }}</h3>
3<ul>
4 {{ with .Page }}
5 <li>
6 <a href="{{ .Permalink }}">{{ .Title }}</a>
7 </li>
8 {{ end }}
9</ul>
10{{ end}}
File single.html:
1{{ partial "sidebar.html" . }}
Selain keunggulan, ada juga kekurangan saat membuat sebuah menu menggunakan metode front matter.
Kekurangan tersebut adalah bahwa kita tidak dapat membuat banyak menu sekaligus pada satu artikel saja.
Untuk membuat banyak menu dengan nilai yang berbeda kita harus membuat satu menu untuk satu artikel saja.
Kemudian buat menu lagi di artikel lainnya.
Berbeda dengan di file konfigurasi situs (config.toml), kita dapat membuat menu sekaligus banyak tanpa perlu khawatir error.
Daftar properti menu
name
Digunakan untuk memberikan nama untuk menu.
identifier
Digunakan untuk memberikan tanda pengenal unik untuk menu.
Biasanya ini merupakan sebuah string yang tidak boleh sama dengan menu lainnya (harus unik, tidak plagiat atau duplikat dengan menu lainnya).
url
Digunakan untuk memberikan alamat url atau link untuk menu tersebut.
Penggunaan umumnya adalah jika menu diklik maka akan menuju ke url yang diatur.
pageRef
Digunakan untuk memberikan alamat url atau link untuk menu tersebut (hampir mirip dengan url).
Cara kerja pageRef berbeda dengan url. pageRef mencari alamat url yang sudah diatur menggunakan metode .Site.GetPage .
pre
Digunakan untuk membuat tag html dengan nilai tertentu. Misalnya untuk membuat simbol untuk menu tersebut atau lainnya.
post
Digunakan untuk membuat tag html dengan nilai tertentu (sama seperti pre).
Kemungkinan penggunaannya untuk membuat tag html untuk mengisi konten dari menu (belum ada contoh jelas di dokumentasinya).
weight
Digunakan untuk memberikan bobot pada menu tersebut. Yang dimaksud bobot adalah berupa angka yang mewakili menu tersebut.
Ini dapat digunakan untuk mengurutkan menu yang telah dibuat.
parent
Digunakan untuk mereferensikan menu induk untuk menu saat ini.
1menu programming (menu induk)
2 ├── javascript (menu anak)
3 ├── python (menu anak)
Penggambaran sederhananya adalah seperti menu tersebut ingin menjadi anak dari menu lainnya.
1menu ibu
2 ├── menu anak 1
3 ├── menu anak 2
4 ├── dst...
title
Digunakan untuk memberikan judul untuk menu tersebut. Judulnya bebas, tetapi disarankan masih dalam konteks dari menu tersebut.
Menggunakan fitur params di menu
Selain menggunakan properti atau bidang default hugo.
Kita juga dapat membuat properti dan nilai kustom sendiri.
Ini dapat dilakukan dengan memanfaatkan params di hugo.
Kita hanya perlu menambahkan .params ke bagian menu itu sendiri. Lihat contoh dibawah ini.
File config.toml:
1[menu]
2[[menu.main]]
3 identifier = 'menu A'
4 name = 'menu untuk bagian A'
5 url = '/menu-a/'
6 weight = 1
7 [menu.main.params]
8 customClass = 'menu-1'
Contoh penggunaannya:
1{{ range .Site.Menus.main }}
2<ul>
3 <li {{ with .Params.customClass }} class="{{.}}" {{ end }}>
4 <a href="{{ .URL }}">{{ .Identifier }}</a>
5 </li>
6</ul>
7{{ end }}
Daftar Menu Variable di Hugo
.Menu
Mereferensikan nama dari menu yang digunakan.
Di hugo kita dapat membuat berbagai macam menu khusus dan mengelompokkannya.
Sebagai contoh, saya ingin membuat menu khusus bernama hugo.
Maka saya akan membuat menu seperti ini:
File config.toml:
1[menu]
2[[menu.hugo]]
3 identifier = 'hugo'
4 name = 'hugo menu'
5 url = '/hugo/'
6 weight = 1
Contoh diatas akan mengahasilkan nama menu hugo.
Dan kira-kira begini contoh penggunaannya:
1{{ range .Site.Menus.hugo }}
2 <a href="{{ .URL }}">{{ .Identifier }}</a>
3{{ end }}
.URL
Mereferensikan bidang url dari menu. Ini digunakan untuk mendapatkan url atau link dari menu yang diatur di file config.toml atau front matter konten.
.Page
Mereferensikan Variabel .Page dari halaman yang terkait dengan menu.
Variabel .Page ini hanya dapat digunakan jika menu dibuat di front matter artikel atau konten.
Untuk menggunakan variabel .Page, kita juga harus menggunakan function with.
Dengan variabel .Page, kita dapat mengakses semua nilai dari halaman yang terkait dengan menu tersebut.
Misalnya, menu hugo dibuat di artikel1.md, kemudian kamu ingin mengakses judul dan url dari halaman tersebut.
Maka kamu dapat mengetikkan kode seperti ini:
1{{ range .Site.Menus.main }}
2 <!-- Mengakses nama dari menu -->
3 <h3>{{ .Name }}</h3>
4
5 <!-- Mengakses nilai dari halaman yang terkait dengan menu -->
6 {{ with .Page }}
7 <a href="{{ .Permalink }}">{{ .Title }}</a>
8 {{ end }}
9{{ end }}
.PageRef
Mereferensikan nilai dari pageRef yang diatur di menu.
Ini fungsinya sama seperti .URL hanya saja dengan sedikit perbaikan.
Lihat disini untuk lebih informasi lebih lanjut.
Contoh pageRef di menu:
1[[menu.main]]
2 name = 'blog'
3 pageRef = '/blog'
4 weight = 1
.Name
Mereferensikan nilai dari name yang diatur di menu.
.Identifier
Mereferensikan nilai dari identifier yang diatur di menu.
.Title
Mereferensikan nilai dari title yang diatur di menu.
.Pre
Mereferensikan nilai dari pre yang diatur di menu.
.Post
Mereferensikan nilai dari post yang diatur di menu.
.Weight
Mereferensikan nilai dari weight yang diatur di menu.
.Parent
Mereferensikan nilai dari parent yang diatur di menu.
.Children
Digunakan untuk mendapatkan menu anak (menu yang memiliki bidang parent).
Ini berarti, menu yang menggunakan parent secara otomatis akan menjadi menu anak.
.HasChildren
Bernilai true atau false.
Digunakan untuk mengetahui apakah menu mempunyai menu anak (biasanya disebut sub-menu).
Yang dimaksud menu anak atau sub-menu adalah menu yang memiliki properti atau bidang parent.
.KeyName
Digunakan untuk mendapatkan nilai dari identifier. Jika identifier tidak ada, maka akan menggunakan name.
.IsEqual
Bernilai true atau false.
Mengembalikan true jika dua menu yang dibandingkan memiliki properti atau bidang yang sama.
.IsSameResource
Bernilai true atau false.
Mengembalikan true jika dua menu yang dibandingkan memiliki properti atau bidang url yang sama.
.IsMenuCurrent
Mereferensikan menu pada halaman saat ini. Ini akan berfungsi jika dikombinasikan dengan Nilai dari halaman. Lihat contoh dibawah.
.HasMenuCurrent
Mereferensikan apakah Halaman memiliki menu saat ini. Ini akan berfungsi jika dikombinasikan dengan Nilai dari halaman. Lihat contoh dibawah.
Contoh menu sidebar
File partials/sidebar.html:
1<aside>
2 <ul>
3 {{ $currentPage := . }}
4 {{ range .Site.Menus.main }}
5 {{ if .HasChildren }}
6 <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
7 <a href="#">
8 {{ .Pre }}
9 <span>{{ .Name }}</span>
10 </a>
11 </li>
12 <ul class="sub-menu">
13 {{ range .Children }}
14 <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
15 <a href="{{ .URL }}">{{ .Name }}</a>
16 </li>
17 {{ end }}
18 </ul>
19 {{ else }}
20 <li>
21 <a href="{{ .URL }}">
22 {{ .Pre }}
23 <span>{{ .Name }}</span>
24 </a>
25 </li>
26 {{ end }}
27 {{ end }}
28 <li>
29 <a href="#" target="_blank">Link 1</a>
30 </li>
31 <li>
32 <a href="#" target="_blank">Link 2</a>
33 </li>
34 </ul>
35</aside>