Docslogor

Membuat Theme Hugo Sendiri

Membuat theme Hugo sendiri memberikan kebebasan penuh dalam desain dan fungsionalitas situs. Berikut panduan langkah demi langkah untuk membuat theme Hugo dari awal.

Struktur Dasar Theme Hugo

Theme Hugo memiliki struktur dasar yang terdiri dari beberapa direktori dan file utama. Berikut struktur minimal yang dibutuhkan:

my-theme/                 # Nama theme
├── layouts/              # Folder utama untuk template
│   ├── _default/         # Template default untuk konten
│   │   ├── baseof.html   # Template dasar
│   │   ├── single.html   # Template untuk halaman konten
│   │   └── list.html     # Template untuk daftar konten
│   ├── index.html        # Template halaman utama
│   └── partials/         # Template bagian-bagian kecil (header, footer, dsb)
├── static/               # Folder untuk file statis (CSS, JS, gambar)
│   └── css/
│       └── style.css     # File CSS utama
├── theme.toml            # File deskripsi theme
└── archetypes/           # Template dasar untuk konten baru
    └── default.md

Penjelasan Direktori Utama:

  • layouts/: Menyimpan semua template HTML.
  • static/: Menyimpan aset statis seperti CSS, JavaScript, dan gambar.
  • theme.toml: Metadata tentang theme, termasuk nama, deskripsi, dan versi.
  • archetypes/: Template default untuk konten baru.

Membuat Template Halaman Utama (index.html)

Buat file index.html di dalam folder layouts/. File ini berfungsi sebagai template untuk halaman utama situs.

Contoh index.html:

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

  <main>
    <h2>Selamat Datang</h2>
    <p>Ini adalah halaman utama situs Hugo Anda!</p>
  </main>

  <footer>
    <p>&copy; {{ now.Year }} {{ .Site.Title }}. Dibuat dengan Hugo.</p>
  </footer>
</body>
</html>

Penjelasan:

  • {{ .Site.Title }}: Mengambil nilai title dari file konfigurasi config.toml.
  • {{ "css/style.css" | relURL }}: Menautkan file CSS dari folder static.

Membuat Template Default untuk Halaman Konten

Template default digunakan untuk menampilkan halaman individual, seperti postingan blog. Template ini disimpan di dalam folder layouts/_default/ dengan nama single.html.

Contoh single.html:

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

  <main>
    <h1>{{ .Title }}</h1>
    <p><small>Ditulis pada {{ .Date.Format "2 Jan 2006" }}</small></p>
    <div>
      {{ .Content }}
    </div>
  </main>

  <footer>
    <p>&copy; {{ now.Year }} {{ .Site.Title }}</p>
  </footer>
</body>
</html>

Penjelasan:

  • {{ .Title }}: Judul halaman atau postingan.
  • {{ .Date.Format "2 Jan 2006" }}: Menampilkan tanggal dengan format tertentu.
  • {{ .Content }}: Menampilkan konten utama dari file Markdown.

Menambahkan CSS dan Aset Statis

Untuk menambahkan gaya ke theme, buat file CSS di dalam folder static/css/.

a. Struktur Folder Statis:

my-theme/
└── static/
    └── css/
        └── style.css

b. Contoh CSS Sederhana:

Buat file style.css di static/css/ dan tambahkan kode berikut:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

main {
  margin: 2rem auto;
  padding: 1rem;
  max-width: 800px;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

h1, h2 {
  color: #333;
}

c. Menautkan CSS di Template

Pastikan file CSS di-load di template index.html dan single.html menggunakan perintah berikut:

<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">

Menambahkan Metadata Theme (theme.toml)

Buat file theme.toml di root folder theme untuk mendeskripsikan theme.

Contoh theme.toml:

name = "My Custom Theme"
description = "Theme Hugo sederhana buatan sendiri."
version = "1.0"
author = "Nama Anda"
license = "MIT"

Menguji Theme yang Dibuat

  1. Aktifkan Theme di File config.toml Proyek:

    theme = "my-theme"

  2. Jalankan Server Hugo:

    hugo server

  3. Buka Browser:
    Akses http://localhost:1313 untuk melihat tampilan situs menggunakan theme yang baru dibuat.

Kesimpulan

Membuat theme Hugo sendiri melibatkan pengetahuan tentang struktur dasar theme, pembuatan template, dan integrasi aset seperti CSS. Dengan pendekatan ini, kamu bisa membuat theme yang sesuai kebutuhan dan mudah dikembangkan. Mulailah dari struktur sederhana dan tambahkan fitur sedikit demi sedikit. 🚀

Sebelumnya
Menggunakan Theme di Hugo
Selanjutnya
Menambahkan Fitur Tambahan