Seri artikel Membuat website dengan Hugo

Seri Membuat website dengan Hugo

Postingan lainnya

Membuat tema Hugo sendiri

Setelah belajar dasar-dasar Hugo, sekarang waktunya kita belajar membuat tema Hugo sendiri! Untuk kamu yang tidak suka menyentuh html dan css sendiri,...

Setelah belajar dasar-dasar Hugo, sekarang waktunya kita belajar membuat tema Hugo sendiri! Untuk kamu yang tidak suka menyentuh html dan css sendiri, tentunya kamu tetap punya pilihan banyak tema yang sudah dibuat oleh orang. Sementara untuk kamu yang suka main frontend sendiri, yuk kita lets go!

Mulai membuat Theme

Untuk mulai perjalanan ini, gunakan command

hugo new theme NAMA-TEMA-KAMU

Beberapa folder dan file struktur dasar tema akan dibuatkan di bawah folder theme dan nama tema kamu yang pilih. Sekilas tentang folder/file yang dibuat untuk kamu:

Archetypes

Template yang digunakan pada saat membuat konten baru.

Layouts

layout atau struktur dasar dari website kamu, berisi homepage index.html , halaman ketika error 404.html , folder partial, yang berisi header dan footer nantinya dan folder _default yang menentukan struktur dari masing masing halaman kamu nanti

Static

Berisi file statis seperti CSS dan Javascript

themes.toml

Informasi atau konfigurasi dari tema kita nanti

Membuat halaman home

Untuk menggunakan tema kamu ini, ganti config.toml yang ada di root dengan nama temamu theme=NAMA-TEMA-KAMU

Kita mulai dengan membuat halama homepage atau landingpage nya. Di bawah temakamu/layouts/index.html silahkan isi dengan kode html dan tulisan yang kamu mau.

Pastikan tidak ada file index.html di bawah folder project/layouts kamu, karena hugo akan mengambil file index tersebut sebelum mencarinya di tema.

Sebagai contoh isi index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> {{ .Title }}</title>
</head>
<body>
    <h1>{{ .Title }}</h1>
</body>
</html>

Selain kode HTML biasa, yang aneh mungkin variable {{ .Title }}. Ini adalah variable yang nilainya kita ambil dari file config.toml kamu. Jadi apapun nilai yang ada di title nya akan dioper ke sini. Nilai .Title sendiri bersifat dinamis tergantung judul halaman dia nanti.

Ada banyak page variable yang bisa kita gunakan di Hugo dan dimasukkan ke HTML templatenya. Cek list page variable Hugo ini.

Membuat template partial

Untuk menjaga website kita terlihat konsisten, dibandingkan dengan harus copy paste setiap header atau footer atau bagian tertentu agar terlihat sama, kita bisa menyediakan template dasar yang bisa kita masukkan ke halaman mana saja.

Kita akan mulai dengan mengintip isi layouts/_default/baseof.html

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

file baseof.html ini berperan sebagai "akar" semua halaman. Kita bisa memasang halaman mana saja menggunakan file baseof.html ini.

Sedikit penjelasan ketika ada {{- partial "namafile.html" . -}} ini berarti kita mengambil isi filer dari folder partials.

Untuk mulai menggunakan baseof ini, kita bisa mengubah isi index.html yang dibuat sebelumnya dengan

{{ define "main" }}
    <h1>{{ .Title }}</h1>
{{ end }}

Kode {{ define "main" }} ... {{ end }} memberi tahu Hugo, kalau apapun yang kita isi di antaranya akan dioper ke file baseof.html dan meletakkannya di antara {{ block "main" . }}{{ end }}

Kamu bisa menjalankan ulang servernya dan melihat konten website kamu yang diambil dari file baseof.html.

Sekarang, waktunya kamu bereksperimen dengan mengisi file layouts/partials/header.html dan layouts/partials/footer.html sesuai keinginan kamu.

contoh header.html

<a href="/"> Home </a>

contoh footer.html

<p> © sekolahkoding dan Hugo 2020</p>

Saat kamu menjalankannya sekarang kamu sudah punya template dasar yang bisa dilihat di halaman mana saja!

Menampilkan List konten postingan

Pastikan kamu sudah punya beberapa konten sebelumnya untuk melihat hasilnya. Kamu bisa belajar membuat file baru di hugo di sini.

Kalau kamu mau menampilkan list konten kamu di halaman home ini. Kita akan menggunakan fungsi "Range" untuk melakukan loop konten kita. Sebagai contoh kalau kamu mau melakukannya di index.html

{{ define "main" }}
<h1>{{ .Title }}</h1>
<ul>
    {{ range .Site.RegularPages }}
    <li>
        <a href="{{.Permalink}}"> {{.Title}}</a>
        <span> {{.Date.Format "2006-01-02"}}  </span>
    </li>
    {{ end }}
</ul>
{{ end }}

Beberapa penjelasan variable

Mengeluarkan isi dari konten yang ditulis di bagian berikutnya

untuk mengambil daftar halaman yang ada.

mengambil link dari file tersebut

Menampilkan format waktu.

Kalau kamu mau mengambil daftar konten dari folder tertentu, bisa menggunakan (sebagai contoh kamu menyimpan konten di folder blog).

<ul>
      {{ range where .Site.RegularPages "Section" "blog" }}
    <li>
        <a href="{{.Permalink}}"> {{.Title}}</a>
        <span> {{.Date.Format "2006-01-02"}}  </span>
    </li>
    {{ end }}
</ul>

Sama seperti di bahasa program, hugo ini juga bisa menggunakan beberapa kata kunci termasuk "where" untuk memberi logika atua kondisi, di sini kita memberi tahu untuk hanya mengeluarkan isi dari konten di folder blog.

Memisahkan daftar konten di halaman sendiri

Pada umumnya homepage tidak memiliki daftar lengkap kontennya, untuk itu kita bisa membuat halaman sendiri bagi masing-masing daftar kontennya. Menggunakan contoh sebelumnya, di mana kita punya folder blog.

Sekarang kita perlu mengisi file layouts/_default/list.html , sesuai yang diindikasikan namanya, kita akan menampilkan list di sini.

{{ define "main" }}
    <h1>{{ .Title }}</h1>
    <ul>
        {{ range .Pages }}
        <li>
            <a href="{{.Permalink}}"> {{.Title}}</a>
            <span> {{.Date.Format "2006-01-02"}}  </span>
        </li>
        {{ end }}
    </ul>
{{ end }}

Saat berada di halaman list, kita hanya perlu memanggil range .Pages , automatis dia akan mendeteksi halaman folder utamanya.

Sekarang coba kunjungi localhost/blog kamu

Halaman single setiap konten

Saat ini kalau kamu klik salah satu link dari isi kontennya mungkin akan bertemu dengan error 404.

Untuk menampilkan konten dari setiap postingan kamu, perlu mengisi file layouts/_default/single.html di tema kita. Contoh sederhana menampilkan judul dan kontennya

{{ define "main" }}

<h1>{{- .Title -}}</h1>
<div>  {{- .Content -}} </div>

{{ end }}

meta: bagaiaman cara membuat tema hugo sendiri

hugo static-site

@hilmanski

2689 Kontribusi 2137 Poin

Diperbarui 4 tahun yang lalu

Bagian dari artikel seri

Baca sebelumnya

Baca selanjutnya

Belum ada Jawaban. Jadi yang pertama Jawaban