Pada artikel sebelumnya kita telah membahas bagaimana membuat blog menggunakan hugo, tapi blog kita belum bisa disajikan sebagai halaman web karena kita belum memiliki template untuk blog tersebut.

Di artikel ini kita akan membahas cara membuat template blog sederhana untuk blog yang telah kita buat menggunakan hugo. Sebenarnya banyak sekali tema blog hugo yang bisa kita gunakan diluar sana, tapi akan lebih menyenangkan jika kita mengetahui cara membuat temanya dari awal sehingga kita bisa membuat tema dengan detail yang kita inginkan.

Menggunakan Kerangka Template Blog Hugo

Hugo sangat memudahkan kita dengan menyediakan kerangka untuk membuat tema, sama halnya dengan membuat blog yang telah kita bahas sebelumnya. Untuk mendapatkan kerangka template kita bisa menjalankan perintah hugo new theme.

> hugo new theme kaltheme
Creating theme at /home/kal/kaleeblog/themes/kaltheme

Pastikan ketika menjalankan perintah tersebut lokasi terminal berada pada root direktori blog yang telah kita buat sebelumnya dan nama template yang akan dibuat (kaltheme) bisa diganti sesuai keinginan.

Setelah perintah tersebut dijalankan, struktur direktori blog kita akan terlihat seperti berikut:

kaleeblog
├── archetypes
│   └── default.md
├── config.toml             <-- konfigurasi situs
├── content                 <-- Konten postingan disimpan disini
│   └── blog                <-- section blog
│       └── halo-dunia.md
├── data
├── layouts
├── public
├── resources
├── static
└── themes
    └── kaltheme                <-- tema yang akan kita buat
        ├── archetypes
        │   └── default.md
        ├── layouts             <-- berisi template html
        │   ├── 404.html        <-- custom halaman 404
        │   ├── _default        <-- section template
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html      <-- template halaman utama website
        │   └── partials        <-- partial template
        │       ├── footer.html
        │       ├── header.html
        │       └── head.html
        ├── LICENSE
        ├── static
        │   ├── css
        │   └── js
        └── theme.toml          <-- konfigurasi tema

Hugo memiliki dua jenis html template.

  1. Layout template, template ini digunakan untuk menampilkan konten yang berbeda dari satu halaman dan halaman lainnya. Seperti daftar artikel (list.html) dan template artikel (single.html) yang berada di folder (_default)
  2. Partial template, template ini merupakan template yang umum ditampilkan sama di setiap halaman, tujuan menggunakan partial template yaitu agar kita tidak perlu menuliskan semua elemen html atau mengubahnya di setiap halaman layout template, jika kita ingin menambahkan sesuatu di header atau footer kita cukup mengubahnya di satu file, tidak perlu mengubahnya di setiap halaman.

Hugo Kemudian menggabungkan kedua jenis template ini dengan menggunakan file base template baseof.html. File ini digunakan untuk membuat setiap dokumen html untuk blog kita, entah itu daftar artikel ataupun single artikel dan menggunakan partial template untuk menambahkan header, footer dan elemen lainnya yang diperlukan (yang ada di folder partial) menggunakan fungsi partial:

<!DOCTYPE html>
<html>
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}
        <main id="content">
        {{- block "main" . }}{{- end }}
        </main>
        {{- partial "footer.html" . -}}
    </body>
</html>

Contoh kode diatas adalah isi dari baseof.html dimana semua template digabungkan, partial template di panggil menggunakan fungsi partial dan layout template menggunakan fungsi block.

Menggunakan template/tema di blog

Template yang kita buat memang masih dalam bentuk kerangka, tapi kita bisa mencoba untuk menerapkannya ke blog yang telah kita buat. Ini akan memudahkan kita untuk melihat hasil perubahan yang kita lakukan ke template yag akan kita buat.

Untuk menggunakan tema, edit konfigurasi blog kita config.toml dan tambahkan variabel theme dengan value sesuai nama template yang akan kita buat. pada contoh maka isi konfigurasi blog menjadi seperti berikut setelah diedit:

baseURL = 'https://kal.my.id/'
languageCode = 'en-id'
title = 'Yaka Lee Blog'
theme= 'kaltheme'

Mencoba Menyajikan Blog

Untuk memastikan template yang kita gunakan adalah template yang akan kita buat, kita bisa preview blog yang kita buat dengan cara menyajikannya dengan menajalankan perintah hugo serve pada folder utama blog yang kita buat.

> hugo serve
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2022-02-23T16:47:50Z VendorInfo=ubuntu:0.92.2-1

                   | EN
-------------------+-----
  Pages            |  4
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Built in 7 ms
Watching for changes in /home/kal/kaleeblog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/kal/kaleeblog/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Selanjutnya buka browser dan kunjungi alamat http://localhost:1313.

Ketika kita membuka alamat tersebut, browser hanya menampilkan halaman kosong dengan background putih. Ini dikarenakan template yang kita gunakan masih berupa kerangka, hampir semua file pada template masih kosong. Coba edit file index.html di folder layout yang berada di dalam kerangka template kita, dan tuliskan sesuai disana misal Test konten halaman utama blog.

Simpan file dan kunjungi kembali browser dimana kita bisa melihat blog yang disajikan oleh hugo. Sekarang halaman awal blog akan menampilkan teks sesuai yang kita tulis pada file index.html.

Menyiapkan Kerangka Tema dan Blog

Setelah mengetahui bahwa template kita sudah bisa disajikan bersama dengan blog, Sekarang kita perlu menyesuaikan apasaja yang kita perlukan untuk tampilan blog kita.

Contoh Pada tutorial ini kita hanya ingin membuat tampilan blog yang sederhana jadi yang kita butuhkan hanya:

  • Halaman Daftar Artikel
  • Halaman Untuk Menampilkan Artikel

Jadi kita tidak memerlukan template halaman utama tersendiri untuk blog sederhana kita. Untuk itu maka kita tidak memerlukan file index.html untuk tutorial ini, tapi kita akan menggunakan daftar artikel untuk halaman utamanya.

  • Hapus file index.html yang berada di kerangka template yang kita buat atau rename file tersebut (misal index.html.bak).
  • Tambahkan file _index.md didalam folder content blog kita.

Pada file _index.md tambahkan konten frontmatter seperti berikut

---
title: Home
---

Setelah kerangka file template dan blog kita, maka bentuk kerangkanya seperti berikut.

kaleeblog
├── archetypes
│   └── default.md
├── config.toml
├── content
│   ├── blog
│   │   └── halo-dunia.md
│   └── _index.md           <-- tambahkan file
├── data
├── layouts
├── public
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes
    └── kaltheme
        ├── archetypes
        │   └── default.md
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html.bak    <-- rename atau hapus
        │   └── partials
        │       ├── footer.html
        │       ├── header.html
        │       └── head.html
        ├── LICENSE
        ├── static
        │   ├── css
        │   └── js
        └── theme.toml

Menampilkan Daftar Artikel

Kedua kerangka blog dan tema yang akan kita buat telah siap, hal selanjutnya yang perlu kita lakukan adalah memodifikasi file yang sudah ada dengan menambahkan beberapa baris kode didalamnya.

Mari kita lihat kembali struktur direktori tema yang akan kita buat.

kaltheme
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default        <-- section template
│   │   ├── baseof.html
│   │   ├── list.html   <-- template daftar artikel
│   │   └── single.html
│   ├── index.html.bak
│   └── partials
│       ├── footer.html
│       ├── header.html
│       └── head.html
├── LICENSE
├── static
│   ├── css
│   └── js
└── theme.toml

Disini kita akan memodifikasi salah satu file didalam folder _default yaitu list.html agar dapat menampilkan daftar artikel blog.

_default adalah folder untuk section di blog kita, kamu bisa merename atau membuat template untuk section yang lebih spesifik sesuai section yang ada di blog misal blog, linux, atau yang lainnya. Tapi untuk contoh tutorial ini kita cukup gunakan _default sebagai nama foldernya jadi semua section akan menggunakan template yang ada di dalam folder ini.

Kembali ke file list.html, dan tambahkan baris kode berikut kedalam file tersebut:

{{ define "main" }}

<div class="daftar-artikel">
    {{ range (.Paginator 6 ).Pages }}
    <div class="item">
        <a href="{{.Permalink}}">
            <h2>{{.Title}}</h2>
        </a>
        <span class="tanggal">{{ .Date.Format "Mon, 2 Jan 2006" }}</span>
        <p>{{ .Description | default (.Summary | truncate 200) }}</p>
    </div>
    {{ end }}

    {{ with .Paginator -}}
    <div class="paginator">
        {{ if .HasNext }}<a href="{{.Next.URL}}">← Terlama</a>{{ end }}
        {{ if .HasPrev }}<a href="{{.Prev.URL}}">Terbaru →</a>{{ end }}
    </div>
    {{ end }}
</div>

{{ end }}

Untuk menampilkan daftar artikel disini kita akan menggunakan paginator, jadi list daftar artikel tidak ditampilkan di satu halaman tetapi dibagi menjadi beberapa halaman. Pada contoh kode diatas kita memiliki dua blok kode.

  1. Untuk menampilkan daftar artikel, disini kita menampikan 6 post perhalaman, kamu bisa mengubah jumlah tampilan artikel perhalaman sesuai dengan keinginan
  2. Untuk menampikan link ke halaman daftar artikel lainnya.

Coba buat artikel baru di blog kita, dan pastikan pada frontmatter draft di set ke false. Kemudian sajikan blog dengan menggunakan perintah hugo serve. Sekarang blog kita sudah bisa menampilkan daftar post ketika kita mengunjugi http://localhost:1313 di browser beserta link ke masing-masing halaman artikel.

Menampilkan Artikel Blog

Sampai disini, blog kita telah bisa menampikan daftar blog, tapi ketika kita mencoba mengunjungi salah satu halaman artikel, yang kita dapatkan adalah halaman 404 (tidak ditemukan). Hal ini dikarenakan kita belum membuat template untuk tempilan artikelnya.

kaltheme
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html  <-- template untuk menampilkan artikel
│   ├── index.html.bak
│   └── partials
│       ├── footer.html
│       ├── header.html
│       └── head.html
├── LICENSE
├── static
│   ├── css
│   └── js
└── theme.toml

Agar blog kita bisa menampikan artikel yang telah kita tulis, kita perlu mengubah file single.html yang berada di default layout tema yang kita buat.

{{ define "main" }}

<div class="artikel">
    <div class="artikel-header">
        <h1 class="judul">
            {{ .Title }}
        </h1>
        <span class="tanggal">Diposting tanggal : {{ .Date.Format "Mon, 2 Jan 2006" }}</span>
    </div>
    <div class="isi-artikel">
        {{ .Content }}
    </div>

    <div class="paginator">
        {{- if .PrevInSection -}} <a href="{{.PrevInSection.Permalink}}">Post Sebelumnya</a> {{- end -}}
        {{- if .NextInSection -}} <a href="{{.NextInSection.Permalink}}">Post Selanjutnya</a> {{- end -}}
    </div>
</div>

{{ end }}

Disini kita menampilkan setiap artikel sesuai seperti yang ditulis menggunakan markdown diantaranya yaitu judul (title), tanggal dan isi artikel (konten). Kita juga menambahkan kode untuk menampilkan link ke artikel sebelum dan selanjutnya dalam blog kita.

Selanjutnya

Sampai disini, blog kita telah dapat menampilkan daftar dan single post artikel seperti blog pada umumnya. Tapi blog biasanya memiliki header yang bisa menyediakan navigasi dan footer.

Selanjutnya kita akan membuat header dan footer untuk blog kita, tentu juga dengan menu sederhana sehingga pengunjung blog bisa bernavigasi dengan mudah di blog kita.