Docslogor

Menambahkan Fitur Tambahan

Menambahkan Fitur Tambahan di Hugo

Setelah membuat theme dasar, kamu dapat menambahkan berbagai fitur tambahan untuk memperkaya situs Hugo. Berikut adalah beberapa cara untuk menambahkan fitur seperti menu navigasi, halaman daftar postingan, media seperti gambar dan video, serta menggunakan shortcode Hugo untuk konten dinamis.

Menambahkan Menu Navigasi

Menu navigasi memungkinkan pengunjung situs untuk berpindah antar halaman dengan mudah. Hugo mendukung pembuatan menu navigasi menggunakan file konfigurasi dan template.

a. Menambahkan Menu Navigasi di config.toml

Buka file config.toml dan tambahkan bagian [menu] untuk mendefinisikan menu. Misalnya, untuk menambahkan menu ke halaman utama dan halaman tentang:

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

  [[menu.main]]
    identifier = "about"
    name = "Tentang"
    url = "/about/"
    weight = 2
  • identifier: ID unik untuk item menu.
  • name: Nama yang tampil di menu.
  • url: URL halaman terkait.
  • weight: Urutan menu (semakin kecil nilainya, semakin ke atas menu).

b. Menampilkan Menu di Template

Untuk menampilkan menu di template, kamu bisa menambahkan kode berikut di file layouts/_default/baseof.html atau di template lain yang sesuai.

<nav>
  <ul>
    {{ range .Site.Menus.main }}
      <li><a href="{{ .URL }}">{{ .Name }}</a></li>
    {{ end }}
  </ul>
</nav>

Kode di atas akan menampilkan semua item dalam menu utama yang sudah didefinisikan di config.toml.

Membuat Halaman Daftar Postingan

Halaman daftar postingan memungkinkan pengunjung untuk melihat semua artikel yang telah dipublikasikan dalam format yang terorganisir.

a. Membuat Template Daftar Postingan (list.html)

Buat file list.html di folder layouts/_default/ untuk menampilkan daftar postingan.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Daftar Postingan</title>
  <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
</head>
<body>
  <header>
    <h1>{{ .Site.Title }}</h1>
  </header>

  <main>
    <h2>Daftar Postingan</h2>
    <ul>
      {{ range .Pages }}
        <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
      {{ else }}
        <li>Tidak ada postingan.</li>
      {{ end }}
    </ul>
  </main>

  <footer>
    <p>&copy; {{ now.Year }} {{ .Site.Title }}</p>
  </footer>
</body>
</html>
  • {{ range .Pages }}: Menampilkan daftar semua halaman atau postingan.
  • {{ .Permalink }}: URL permanen dari postingan.
  • {{ .Title }}: Judul postingan.

Menambahkan Gambar, Video, dan Media Lainnya

Untuk menambahkan media seperti gambar atau video, kamu bisa memanfaatkan folder static/ atau menggunakan fitur media di konten Hugo.

a. Menambahkan Gambar di Halaman atau Postingan

Letakkan gambar di folder static/images/ dan gunakan URL relatif untuk menampilkannya.

![Deskripsi Gambar](/images/gambar.jpg)

Atau menggunakan tag HTML langsung:

<img src="{{ "/images/gambar.jpg" | relURL }}" alt="Deskripsi Gambar">

b. Menambahkan Video

Untuk menambahkan video dari sumber eksternal seperti YouTube atau Vimeo, kamu bisa menyematkan iframe di file Markdown atau template.

{{< iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" >}}

Kamu juga bisa menambahkan file video lokal di folder static/ dan menggunakannya dengan tag HTML.

<video controls>
  <source src="{{ "/video/video.mp4" | relURL }}" type="video/mp4">
  Browser kamu tidak mendukung tag video.
</video>

Menggunakan Shortcode Hugo untuk Konten Dinamis

Shortcode adalah fitur Hugo yang memungkinkan kamu untuk menyisipkan komponen atau konten dinamis dalam konten Markdown dengan cara yang mudah.

a. Membuat Shortcode Kustom

Shortcode disimpan di folder layouts/shortcodes/. Misalnya, buat file layouts/shortcodes/button.html untuk membuat tombol:

<a href="{{ .Get "url" }}" class="button">{{ .Inner }}</a>

b. Menggunakan Shortcode dalam Konten

Di dalam konten Markdown, kamu dapat menggunakan shortcode dengan format:

{{< button url="https://example.com" >}}Klik Disini{{< /button >}}

Shortcode di atas akan menghasilkan sebuah tombol yang mengarah ke URL yang diberikan.

c. Menggunakan Shortcode untuk Media Lainnya

Kamu juga bisa membuat shortcode untuk elemen media seperti gambar atau video, yang memudahkan pengelolaan konten dinamis.

<!-- Shortcode image.html -->
<img src="{{ .Get "src" | relURL }}" alt="{{ .Get "alt" }}">

Menggunakan shortcode dalam konten Markdown:

{{< image src="/images/pic.jpg" alt="Gambar Keren" >}}

Kesimpulan

Dengan menambahkan fitur-fitur seperti menu navigasi, halaman daftar postingan, media (gambar, video), dan shortcode Hugo, kamu bisa memperkaya dan mempersonalisasi situs Hugo sesuai kebutuhan. Hugo menyediakan fleksibilitas yang besar dengan cara yang sederhana dan mudah dimengerti, memungkinkan pembuatan situs yang lebih interaktif dan dinamis. 🚀

Sebelumnya
Membuat Theme Hugo Sendiri
Selanjutnya
Pengaturan Situs Hugo