Cara Menggunakan Archetype Di Hugo Static Site
Artikel ini merupakan bagian dari artikel yang kami tulis sebelumnya Cara Belajar Membuat Blog dengan Go Hugo Bagian 1 dan 2. Sebelum anda membaca isi artikel ini, kami sarankan anda membaca juga artikel tersebut. Ketika menulis artikel ini kami menggunakan mesin FreeBSD 14 sebagai bahan prakteknya.
Ada banyak alasan mengapa generator situs statis (SSG) menjadi sangat populer, terutama dalam beberapa tahun terakhir. Alasan yang tampaknya paling sering muncul adalah bahwa situs berbasis SSG memiliki kinerja dan keamanan yang unggul. Namun, ada keuntungan utama lain yang mungkin tidak mendapatkan perhatian yang layak, yaitu kenyamanan yang disediakan oleh generator situs statis (SSG).
Hugo dirancang untuk membantu blogger menampilkan konten artikel yang telah dibuat kepada audiens secara cepat melalui internet. Hugo memiliki sejumlah aturan dan konvensi terkait pengelolaan kumpulan konten; memahaminya akan mempermudah penambahan dan pengelolaan seluruh bagian konten di situs blog dengan cepat.
Archetype secara harfiah adalah file konten pola dasar dengan materi depan yang telah dikonfigurasi sebelumnya. Arketipe akan mengisi setiap file konten baru dari tipe tertentu dengan metadata default apa pun yang telah Anda tentukan setiap kali Anda menjalankan perintah hugo new.
Pada bagian ini kita akan membuat "proyek" di situs yang menampilkan seluruh konten artikel blog kita. Pembahasan dalam artikel ini lebih berfokus pada pengaturan tata letak (layout) khusus untuk proyek blog tersebut agar tampilannya berbeda secara visual dari bagian lainnya. Kita akan memanfaatkan fitur Archetype pada GoHugo untuk membuat templat konten, sehingga pembuatan halaman proyek baru dapat dilakukan dengan lebih cepat.
1. Membuat Proyek Archetype
Untuk memulai pekerjaan ini, langkah pertama yang akan kita lakukan adalah membuat file bernama "projects.md". Di dalam file "/var/blog/blogspot/archetypes/projects.md", ketiklah skrip di bawah ini.
root@ns1:~ # cd /var/blog/blogspot/archetypes
root@ns1:/var/blog/blogspot/archetypes # ee projects.md
---
title: "Exploring the Operating Sistem of Linux"
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
Setiap kali proyek baru dibuat, server GoHugo akan selalu menggunakan berkas ini sebagai dasar, dan kita dapat menggunakan teks placeholder di sini untuk mengisi konten awal proyek tersebut dengan cepat. Setelah itu, kita membuat halaman proyek baru yang akan ditempatkan di folder /var/blog/blogspot/content/projects; berikut adalah contohnya.
root@ns1:/var/blog/blogspot # hugo new projects/mountsemeru.md
Content "/var/blog/blogspot/content/projects/gunungsemeru.md" created
Buka lalu edit file /var/blog/blogspot/content/projects/gunungsemeru.md agar skripnya terlihat seperti di bawah ini.
---
title: "Exploring the Operating Sistem of Linux semeru"
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
Untuk melihat hasilnya, jalankan server GoHugo dengan mengetikkan perintah berikut.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Skrip di atas akan menjalankan server GoHugo; sekarang, buka peramban web Google Chrome dan ketik "http://192.168.17.7:8999/projects/mountsemeru/". Lihat hasilnya.
Kita mematikan server GoHugo dan membuat proyek baru lagi dengan nama "mountrinjani.md"; ketik skrip di bawah ini untuk membuat proyek baru tersebut.
root@ns1:/var/blog/blogspot # hugo new projects/mountrinjani.md
Content "/var/blog/blogspot/content/projects/gunungrinjani.md" created
Setelah itu, anda buka file /var/blog/blogspot/content/projects/mountrinjani.md, dan ketikkan skrip di bawah ini di file tersebut.
---
title: "Exploring the Operating Sistem of Linux"
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
Jalankan kembali server GoHugo dan ketik "http://192.168.17.7:8999/projects/mountrinjani/" pada peramban web Chrome, Yandex, atau Firefox. Perhatikan perbedaannya.
2. Membuat Tata Letak Daftar
Membuat tata letak daftar berguna untuk menampilkan tag dan kategori. Sebagai langkah awal, kita menentukan templat daftar default yang akan digunakan untuk semua halaman daftar di situs blog tersebut.
Buka file /var/blog/blogspot/themes/basic/layouts/_default/list.html, lalu tambahkan kode skrip berikut ke dalam file tersebut. Kode ini berfungsi untuk menampilkan judul halaman konten dan membuat daftar tautan menuju setiap halaman konten.
root@ns1:/var/blog/blogspot # touch /var/blog/blogspot/themes/basic/layouts/_default/list.html
root@ns1:/var/blog/blogspot # ee /var/blog/blogspot/themes/basic/layouts/_default/list.html
{{ define "main" }}
<h2>{{ .Title }}</h2>
<ul>
{{ range .Pages }}
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
{{ end }}
Sejak versi v0.18, segala sesuatu di Hugo dianggap sebagai halaman (Pages). Ini berarti halaman daftar (list pages) dan halaman beranda dapat memiliki file konten terkait, misalnya file _index.md, yang memuat metadata halaman dan konten.
Model baru ini memungkinkan kita menyisipkan front matter khusus daftar melalui ".Params", sekaligus memberikan akses bagi template daftar. Contohnya pada file layouts/_default/list.html yang dapat memberikan efek ke semua variabel halaman.
Sekarang mari kita coba menjalankan server Gohugo dan melihat hasilnya di peramban web Google Chrome.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Setelah berhasil membuat tata letak List, kita lanjutkan dengan membuat navbar atau menu navigasi. Untuk membuat menu navbar, kita membuat file /var/blog/blogspot/themes/basic/layouts/partials/header.html. Berdasarkan file tersebut, kita membuat file baru /var/blog/blogspot/themes/basic/layouts/partials/nav.html dan memasukkan skrip di bawah ini ke dalam file tersebut.
root@ns1:/var/blog/blogspot # ee /var/blog/blogspot/themes/basic/layouts/_partials/nav.html
<nav>
<a href="/">Home</a>
<a href="/about">About Us</a>
<a href="/projects">Projects</a>
<a href="/resume">Privacy Policy</a>
<a href="/contact">Disclaimer</a>
</nav>
Dalam praktiknya, kita mungkin ingin beberapa halaman atau bagian dari situs blog kita memiliki tema atau tata letak yang sedikit berbeda. Sekarang, kita akan membuat tata letak khusus untuk halaman proyek yang menampilkan daftar proyek di bilah sisi (sidebar) setiap halaman proyek, sehingga pengunjung dapat menavigasi proyek dengan lebih mudah.
Kita akan menggunakan pendekatan yang serupa dengan yang baru saja kita gunakan untuk menampilkan daftar proyek tersebut.
Di dalam folder /var/blog/blogspot/themes/basic/layouts, buatlah folder baru bernama "projects".
Kemudian anda ketikkan perintah berikut untuk membuat folder "projects" tersebut.
root@ns1:/var/blog/blogspot # mkdir -p /var/blog/blogspot/themes/basic/layouts/projects
Selanjutnya, kita akan membuat file baru bernama "single.html" di dalam direktori atau folder "/var/blog/blogspot/themes/basic/layouts/projects" yang telah kita buat di atas.
Contoh di bawah ini menunjukkan cara membuat file tersebut dan menyertakan skrip di dalam file "/var/blog/blogspot/themes/basic/layouts/projects/single.html".
root@ns1:/var/blog/blogspot # ee /var/blog/blogspot/themes/basic/layouts/projects/single.html
{{ 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 }}
</section>
</div>
{{ end }}
Setelah itu, edit file /var/blog/blogspot/themes/basic/static/css/style.css dan masukkan skrip seperti pada contoh di bawah ini.
.container {
margin: 0 auto;
width: 80%;
}
nav, footer {
background-color: #333;
color: #fff;
text-align: center;
}
nav {
display: flex;
flex-direction: column;
}
nav > a {
flex: 1;
text-align: center;
text-decoration: none;
color: #fff;
}
@media only screen and (min-width: 768px) {
nav { flex-direction: row; }
.project-container { display: flex; }
.project-container .project-list { width: 20%; }
.project-container .project { flex: 1; }
}
Anda jalankan kembali server Go Hugo-nya.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Setelah itu, kita menjalankan atau mengaktifkan server GoHugo dan melihat hasilnya di peramban web Google Chrome dengan mengetikkan "http://192.168.17.7:8999/projects/".
Klik salah satu opsi proyek yang ditampilkan di menu proyek, misalkan Rinjani.
3. Menambahkan Konten ke Halaman Daftar
Saat Anda membuka "http://192.168.17.7:8999/projects/", Anda hanya akan melihat daftar proyek tanpa konten lainnya. Sekarang, kita akan menambahkan konten ke halaman tersebut. Untuk menambahkan konten ke sebuah halaman, kita perlu menambahkan file index.md ke dalam folder yang terkait dengan konten tersebut.
Langkah ini serupa dengan cara kita menambahkan konten ke halaman utama situs blog yang telah kita buat sebelumnya. Ketik perintah berikut untuk menambahkan konten ke halaman daftar (List pages).
root@ns1:/var/blog/blogspot # hugo new projects/_index.md
Content "/var/blog/blogspot/content/projects/_index.md" created
Buka dan ganti skrip di dalam file /var/blog/blogspot/content/projects/_index.md dengan skrip di bawah ini.
---
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 buka dan ganti skrip di dalam file /var/blog/blogspot/themes/basic/layouts/_default/list.html dengan skrip di bawah ini.
{{ define "main" }}
<h2>{{ .Title }}</h2>
{{ .Content }}
<ul>
{{ range .Pages }}
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
{{ end }}
Jalankan atau aktifkan kembali server GoHugo.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Sekarang coba anda buka Google Chrome dengan mengetikkan "http://192.168.17.7:8999/projects/", lalu perhatikan tampilan situs blog kita; tampilannya pasti akan berubah.
Terkadang konten bisa berasal dari sumber lain, atau kita ingin situs lain dapat menautkan ke konten kita. GoHugo memiliki beberapa fitur yang memungkinkan kita melakukan keduanya, dan kita akan membahasnya dalam artikel berikutnya.