#2: Cara Membuat Hugo Theme From Scratch - Partials

JagoTekno.com - Pada artikel sebelumnya sudah dijelaskan beberapa hal yang penting diketahui tentang file baseof.html.

Pada artikel ini saya akan membahas tentang cara membuat dan setting file yang terdapat pada folder partials di theme hugo yang sedang dibuat.

Partials merupakan kumpulan part atau bagian dari sebuah tag html yang saling berkaitan sehingga menjadi sebuah struktur html yang utuh.

Partials ini sifatnya seperti bootstrap, maksudnya saling berkaitan satu sama lain.

Jika sebuah halaman yang ingin diload butuh untuk menampilkan elemen tertentu maka kita bisa membuatkan elemen partials nya.

Sehingga elemen yang tidak perlu tampil pada halaman tertentu itu tidak perlu di load. Ini menjadikan proses load situs menjadi lebih cepat.

Misalnya pada halaman home kita ingin menampilkan sidebar, sedangkan pada artikel tidak perlu, makan itu bisa dibuatkan template partials nya.

Tanpa berlama-lama simak penjelasannya di bawah.

Silahkan edit file /layouts/partials/head.html menjadi seperti ini:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ .Title }}</title>
{{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }}
{{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
{{ with .OutputFormats.Get "RSS" -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
{{- end }}

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap');
</style> 

{{ template "_internal/opengraph.html" . }} 
{{ template "_internal/schema.html" . }}

<!-- Schema.org-->
{{ partial "schema.html" . }}

<!-- breadcrumb json-ld -->
{{ partial "breadcrumbs.html" . }}

</head>

Penjelasan:

Pada kode di atas kita menambahkan {{ .Site.LanguageCode | default "en-us" }} untuk set bahasa dafault yang digunakan pada situs.

Kemudian kita juga set {{ with .Site.Params.description }} dan {{ with .Site.Params.author }} untuk bisa set deskripsi dan author website pada meta tag.

Params.description dan Params.author itu diset berdasarkan konfigurasi yang sudah diset melalui file config.toml.

Kita juga set output RSS file. Hapus baris ini jika tidak ingin mengeluarkan RSS file.

Kemudian kita juga memasukkan custom font Google.

Karena pada file /layouts/partials/head.html kita sudah mendefinisikan partial breadcrumbs dan schema, maka file nya harus dibuat supaya tempalate tidak eror.

Pertama silahkan membuat file partials yang dibutuhkan pada folder /layouts/partials/.

schema.html
breadcrumbs.html

membuat file partial hugo

Silahkan copy paste saja kode schema dan breadcrumbs json-ld seo hugo.

Tidak dicopy pun tidak masalah yang penting kedua file tersebut ada di dalam folder partials.

Konfigurasi file config.toml saat ini

Konfigurasi file config.toml saat ini kira-kira seperti ini.

baseURL = "https://example.com/"
languageCode = "id"
title = "Belajar Hugo Theme From Scratch"

theme = 'namatheme'

[Author]
name = "Rafi"
location = "Makassar"

[params]
description = "Halo ini adalah situs hugo keren buatan saya"
logo = "../favicons/logo.png"
favicon = "favicons/"

Setelah itu setidaknya pesan eror pun tidak muncul lagi.

Tapi anda masih menampilkan halaman putih dan title di tab browser saja.

Jadi sekarang mari kita menampilkan sesuatu di halaman situs hugo kita.

Edit file index.html

Secara sederhana kita bisa menampilkan sesuatu ke halaman kita dengan memasukkannya ke dalam file index.html ini.

Silahkan buka lalu edit file tersebut sehingga menjadi seperti ini:

{{ define "main"}}
<main>
<h2>Hello from index.hmtl</h2> 
<p>Ini adalah tulisan yang ditampilkan melalui file <b>index.html</b> theme hugo yang sedang dibuat.</p>
<img src="https://img.freepik.com/free-vector/www-concept-illustration_114360-2143.jpg" alt="gambar ilustrasi website keren dari freepik">
<small>Ilustrasi dari Freepik</small>
</main>
{{ end }}