Menggunakan Theme di Hugo

Dalam Hugo, theme berfungsi sebagai kerangka atau template yang menentukan tampilan dan gaya situs. Kamu bisa menggunakan theme bawaan, theme dari pihak ketiga, atau menyesuaikan theme yang sudah ada sesuai kebutuhan. Berikut langkah-langkahnya.

Menambahkan Theme Bawaan atau Theme dari Pihak Ketiga

a. Menggunakan Theme dari Hugo Themes

Hugo menyediakan banyak theme siap pakai yang bisa diunduh dari Hugo Themes.

1. Masuk ke direktori proyek Hugo:

   cd nama-proyek-hugo
   

2. Menginstal Theme Menggunakan Git Submodule:

   Misalnya, untuk theme bernama ananke:

   git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
   

   • Ini akan menambahkan theme ananke ke folder themes/ananke.

3. Menginstal Theme Secara Manual:

   • Unduh theme dari halaman resminya (biasanya file .zip).
   • Ekstrak file ke folder themes/.
   • Struktur direktori akan seperti ini:

     themes/
     └── ananke/
         ├── layouts/
         ├── static/
         ├── exampleSite/
         └── ...
     

b. Menggunakan Theme Bawaan atau Default

Jika kamu hanya bereksperimen, kamu bisa membuat theme sederhana atau menggunakan theme bawaan yang biasanya disertakan dengan Hugo. Kamu bisa mengecek tema dari repositori Hugo atau mendefinisikan themesDir.

Mengaktifkan Theme Melalui config.toml

Setelah menambahkan theme, langkah berikutnya adalah mengaktifkannya di file konfigurasi proyek Hugo (config.toml, config.yaml, atau config.json).

a. Menambahkan Theme ke config.toml

Buka file config.toml dan tambahkan baris berikut:

theme = "ananke"

• Jika menggunakan TOML, cukup gunakan format di atas.
• Jika menggunakan YAML:

theme: "ananke"

• Jika menggunakan JSON:

{
  "theme": "ananke"
}

b. Jalankan Server untuk Mengecek

Setelah menambahkan theme, jalankan perintah berikut untuk memastikan theme bekerja:

hugo server

Buka browser di http://localhost:1313 dan pastikan theme sudah aktif.

Menyesuaikan Theme yang Sudah Ada

Untuk menyesuaikan theme, Hugo memungkinkan kamu untuk meng-override file dari theme yang ada tanpa perlu mengedit file di folder themes/. Modifikasi dilakukan di direktori proyek utama kamu.

a. Menyesuaikan Template (Layouts)

1. Buat struktur folder yang sesuai dengan theme:

   layouts/
   ├── _default/
   │   ├── single.html    # Untuk halaman individual
   │   └── list.html      # Untuk daftar konten
   └── partials/
       └── header.html    # Untuk bagian header
   

2. Override File Theme:
   Jika theme memiliki file themes/ananke/layouts/_default/single.html, kamu bisa menyalin file tersebut ke direktori:

   layouts/_default/single.html
   

   Edit file tersebut sesuai kebutuhan. Hugo akan otomatis menggunakan file yang kamu ubah, bukan file asli dari theme.

b. Menyesuaikan Style (CSS/SCSS)

1. Tambahkan file CSS baru di folder assets/ atau static/ proyek:

   assets/css/custom.css
   

2. Tambahkan CSS kustom di template atau config. Misalnya, menggunakan partial:

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

3. Jika theme menggunakan SCSS/SASS, kamu bisa menambahkan file SCSS baru dan mengimpor file tersebut ke file utama SCSS theme.

c. Menambahkan Konten Kustom (Shortcodes)

Shortcode adalah komponen reusable dalam Hugo. Kamu bisa menambahkan shortcode sendiri ke dalam folder layouts/shortcodes/.

Contoh: Membuat shortcode alert.html untuk peringatan:

<div class="alert alert-{{ .Get "type" }}">
  {{ .Inner }}
</div>

Penggunaan di Markdown:

{{< alert type="warning" >}}
Ini adalah pesan peringatan.
{{< /alert >}}

Kesimpulan

Menggunakan theme di Hugo sangat fleksibel. Kamu bisa menambahkan theme pihak ketiga dari Hugo Themes, mengaktifkannya dengan mudah melalui config.toml, dan menyesuaikan layout atau style tanpa mengubah file asli theme. Dengan pendekatan ini, Hugo memungkinkan pengembangan yang terstruktur dan mudah disesuaikan. 🚀