Cara Menambahkan Tag Meta di Di Hugo Static Site
Saat ini, jika kita melihat situs blog modern, strukturnya memprioritaskan data. Data ini bisa berupa konten yang tersimpan dalam file Markdown atau berasal dari API eksternal.
GoHugo memiliki dukungan bawaan untuk menyertakan file data eksternal ke dalam situs blog, dan juga mampu mengambil data dari sumber jarak jauh untuk menghasilkan konten bagi tata letak situs blog tersebut.
Dalam pembahasan artikel ini, kita akan mempelajari cara menggunakan data dan mengonfigurasinya pada tema situs blog. Sebagai contoh, kita akan membuat tag <meta> tambahan di bagian header blog yang sedang kita rancang. Buka file "config.toml" dan tambahkan bagian params baru yang mendefinisikan pembuat blog serta deskripsi blog. Berikut adalah skrip yang dimasukkan ke dalam file "/var/blog/blogspot/hugo.toml".
baseURL = 'http://unixexplore.com/'
languageCode = 'en-us'
title = 'Nusantara Bercoding'
theme = "basic"
[params]
author = "M. Jaka Setiawan"
description = "Exploring the Operating Sistem of Linux Think Globally For Linux because Linux is for human life. Datainchi Born to explore Linux"
Kemudian, buka dan edit file /var/blog/blogspot/archetypes/projects.md, lalu ketik skrip di bawah ini ke dalam file tersebut.
---
title: "Exploring the Operating Sistem of Linux archtype"
draft: false
---
Exploring the Operating Sistem of Linux Think Globally For Linux because Linux is for human life. Datainchi Born to explore Linux
### Tech used
* DNS Server
* Web Server
* Web Blog
Setelah itu, kita membuat proyek baru dengan nama "gunungbromo.md", ketik skrip di bawah ini untuk membuat proyek baru "gunungbromo.md".
root@ns1:~ # cd /var/blog/blogspot
root@ns1:/var/blog/blogspot # hugo new projects/gunungbromo.md
Content "/var/blog/blogspot/content/projects/gunungbromo.md" created
Ketik skrip di bawah ini ke dalam berkas /var/blog/blogspot/content/projects/gunungbromo.md.
---
title: "Exploring the Operating Sistem of Linux archtype"
draft: false
---
Exploring the Operating Sistem of Linux Think Globally For Linux because Linux is for human life. Datainchi Born to explore Linux
### Tech used
* DNS Server
* Networking
* Windows
* Web Server
* Web Blog
Langkah berikutnya, kita buka file "/var/blog/blogspot/themes/basic/layouts/projects/single.html" dan ketik skrip di bawah ini ke dalam file tersebut.
{{ define "main" }}
<div class="project-container">
<section class="project-list">
<h2>Projects</h2>
<ul>
{{ range (where .Site.RegularPages "Type" "in" "projects") }}
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</section>
<section class="project">
<h2>{{ .Title }}</h2>
{{ .Content }}
<h4>We Are Focus For FreeBSD Tutorials</h4>
<ul>
{{ range .Params.tech_used }}
<li>{{ . }}</li>
{{ end }}
</ul>
</section>
</div>
{{ end }}
Selanjutnya, kita membuat file baru bernama "list.html" dan memasukkan skrip di bawah ini ke dalam file /var/blog/blogspot/themes/basic/layouts/projects/list.html.
root@ns1:/var/blog/blogspot # touch /var/blog/blogspot/themes/basic/layouts/projects/list.html
root@ns1:/var/blog/blogspot # ee /var/blog/blogspot/themes/basic/layouts/projects/list.html
{{ range .Pages }}
<section class="project">
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
<p>{{ .Summary }}</p>
</section>
{{ end }}
</section>
Setelah itu, buka dan edit file "/var/blog/blogspot/themes/basic/layouts/_default/list.html".
Berikut adalah contoh skrip yang harus Anda ketikkan di dalam file tersebut.
{{define "main"}}
<small>var\blog\blogspot\themes\basic\layouts\_default\list.html</small>
<h2>{{.Title}}</h2>
<ul>
{{range.Pages}}
<li><a href="{{.RelPermalink}}">{{.Title}}<a></li>
{{end}}
</ul>
{{end}}
Langkah terakhir adalah menjalankan server GoHugo. Ketik skrip berikut untuk mengaktifkan server GoHugo.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Untuk melihat hasilnya, buka Google Chrome, Yandex, atau peramban web lain seperti Mozilla Firefox. Pada bilah alamat, ketik "http://192.168.17.7:8999/projects/"; hasilnya akan tampak seperti gambar di bawah ini.
Cobalah klik salah satu proyek ini, misalnya proyek "Implementing Apache Web Socket on FreeBSD server", dan hasilnya akan tampak seperti gambar di bawah ini.
Dalam pembahasan sebelumnya, kita telah mempelajari cara menambahkan tag <meta> untuk deskripsi halaman; namun, praktik terbaiknya adalah membuat deskripsi yang benar-benar mencerminkan konten halaman tersebut.
Kita akan menambahkan logika kondisional pada tata letak (layout) untuk mengatur bagaimana data ditampilkan. Sebagai contoh, kita dapat memeriksa apakah terdapat kolom deskripsi yang didefinisikan pada halaman tersebut. Jika tidak ada, kita dapat menggunakan kembali deskripsi sebelumnya.
Untuk menangani situasi di mana kita perlu memeriksa nilai dalam variabel default untuk deskripsi halaman, gantilah meta description di dalam file "/var/blog/blogspot/themes/basic/layouts/partials/head.html" dengan skrip di bawah ini.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Site.Title }}</title>
<meta name="author" content="{{ .Site.Params.author }}">
<meta name="description" content="
{{- with .Page.Description -}}
{{ . }}
{{- else -}}
{{ .Site.Params.description }}
{{- end -}}">
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
</head>
Sementara itu, elemen <title> saat ini menggunakan judul situs dan tidak mencerminkan judul halaman secara spesifik. Hal ini dapat berdampak buruk pada peringkat mesin pencari sekaligus merugikan dari segi kegunaan (usability).
Nilai dari tag <title> adalah teks yang muncul pada judul jendela peramban atau tab bookmark, serta pada bookmark yang disimpan oleh pengguna.
Mari kita gunakan judul situs standar untuk halaman beranda, dan gunakan judul halaman yang lebih spesifik untuk halaman lainnya. Untuk melakukannya, gunakan pernyataan kondisional if bawaan.
Variabel Site.IsHome berfungsi memeriksa apakah pengguna sedang berada di halaman beranda atau tidak, lalu menampilkan judul situs atau judul halaman yang lebih spesifik. Buka dan sunting berkas "/var/blog/blogspot/themes/basic/layouts/partials/head.html" agar skripnya terlihat seperti contoh di bawah ini.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
{{- if .Page.IsHome -}}
{{ .Site.Title }}
{{- else -}}
{{ .Title }} – {{ .Site.Title }}
{{- end -}}
</title>
<meta name="author" content="{{ .Site.Params.author }}">
<meta name="description" content="
{{- with .Page.Description -}}
{{ . }}
{{- else -}}
{{ .Site.Params.description }}
{{- end -}}">
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
</head>
1. Menggunakan File Data Lokal
Direktori data dapat menyimpan file data terstruktur dalam format YAML, JSON, atau TOML yang dapat Anda gunakan dalam layout untuk menampilkan konten.
Kita dapat membuat file data ini sendiri atau mengekstraknya dari sumber lain. Sekarang, mari kita coba menambahkan informasi profil media sosial ke halaman kontak situs GoHugo kita.
Untuk membuat konten media sosial, kita akan membuat file bernama "socialmedia.json". Masukkan skrip di bawah ini ke dalam file /var/blog/blogspot/data/socialmedia.json.
root@ns1:/var/blog/blogspot # touch /var/blog/blogspot/data/socialmedia.json
root@ns1:/var/blog/blogspot # ee /var/blog/blogspot/data/socialmedia.json
{ "accounts" :
[
{
"name": "Twitter",
"url": "https://twitter.com/bphogan"
},
{
"name": "LinkedIn",
"url": "https://linkedin.com/in/bphogan"
}
]
}
Kemudian, di dalam folder "/var/blog/blogspot/layouts/_default", kita tambahkan file "contact.html".
Ketik perintah di bawah ini untuk membuat file "/var/blog/blogspot/layouts/_default/contact.html" dan menambahkan skrip ke file tersebut.
root@ns1:/var/blog/blogspot # touch /var/blog/blogspot/layouts/_default/contact.html
root@ns1:/var/blog/blogspot # ee /var/blog/blogspot/layouts/_default/contact.html
{{ define "main" }}
<h2>{{ .Title }}</h2>
{{ .Content }}
<h3>Social Media</h3>
<ul>
{{ range .Site.Data.socialmedia.accounts }}
<li><a href="{{ .url }}">{{ .name }}</a></li>
{{ end }}
</ul>
{{ end }}
Dalam kasus ini, tidak ada asosiasi semacam itu, jadi kita harus menetapkan file tata letak secara eksplisit ke file Markdown "contact.md". Ketik perintah berikut untuk membuat file "/var/blog/blogspot/content/contact.md" dan masukkan skrip di bawah ini ke dalam file tersebut.
root@ns1:/var/blog/blogspot # touch /var/blog/blogspot/content/contact.md
root@ns1:/var/blog/blogspot # ee /var/blog/blogspot/content/contact.md
---
title: "Contact"
date: 2025-01-01T12:55:44-05:00
draft: false
layout: contact
---
This is my Contact page.
Langkah terakhir adalah mengaktifkan server GoHugo, ketik perintah berikut untuk menjalankan server GoHugo.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Sekarang, mari kita lihat hasilnya dengan membuka peramban web Yandex atau Google Chrome, lalu mengetikkan "http://192.168.17.7:8999/contact/" pada bilah alamat peramban tersebut. Hasilnya akan tampak seperti gambar di bawah ini.
Kita telah menyelesaikan pembahasan dalam artikel ini dengan pembuatan tautan media sosial, kita akan melanjutkan dengan materi lain pada bagian berikutnya.