Mengenal Struktur Direktori Layouts
icon-hugo

⛾ Home hugo Rabu, 02 November 2022 (Diupdate: Kamis, 19 Januari 2023) - 📗 5 Menit

Kali ini kita akan belajar struktur dari folder atau direktori layouts.

Sebelumnya saya sudah pernah sedikit membahas tentang folder layouts. Tapi, itu belum semuanya, hanya sebagiannya.

Sebenarnya saya ingin langsung membahas cara untuk membuat sebuah postingan di situs hugo.

Tapi, tidak saya bahas sekarang, karena hal yang saya sampaikan pada pembahasan ini juga sangatlah penting.

Kita perlu mengetahui dan memahami terlebih dahulu seluk-beluk (struktur atau isi) dari folder layouts.

Terdapat tiga folder atau direktori di dalam folder layouts yang harus kita ketahui. Dua diantaranya, adalah yang harus kita buat.

Pertama adalah folder _default dan yang kedua adalah folder partials.

Buat kedua folder tersebut di bawah (didalam) folder layouts. Kira-kira akan terlihat seperti ini:

1layouts
2    ├── _default
3    ├── partials
4    ├── shortcodes

Pada pembelajan sebelumnya, kita sudah pernah membuat sebuah file bernama index.html untuk mengatur halaman utama situs hugo.

Sekarang, buatlah satu file html lagi, dan berikan nama 404.html.

File 404.html akan digunakan untuk menampilkan halaman khusus saat terjadi error pada situs hugo.

Misalnya, url yang tidak valid, halaman yang sudah tidak tersedia lagi, dan masalah lainnya.

Kira-kira akan terlihat seperti ini struktur atau isi dari folder layouts:

1layouts
2    ├── _default
3    ├── partials
4    ├── shortcodes
5    ├── index.html
6    ├── 404.html

Yang di sorot merupakan folder dan file yang wajib kamu buat.

Folder _default

Folder atau direktori _default digunakan untuk menempatkan file-file html yang digunakan sebagai struktur dasar setiap halaman situs hugo.

Didalam folder default terdapat tiga file utama, yaitu baseof.html, list.html, dan single.html:

baseof.html

Dari ketiga file didalam folder _default, file baseof.html adalah yang paling penting.

Di file baseof.html, kita akan menempatkan semua tag HTML yang akan selalu digunakan berulang-ulang pada setiap halaman situs hugo.

Salin dan tempel kode dibawah ini ke dalam file baseof.html:

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        {{- partial "head.html" . -}}
 5    </head>
 6    <body>
 7        <header>
 8            {{- partial "header.html" . -}}
 9        </header>
10        <main id="content">
11            {{- block "main" . }}{{- end }}
12        </main>
13        <footer>
14            {{- partial "footer.html" . -}}
15        </footer>
16    </body>
17</html>

list.html

File yang kedua ini juga tidak kalah penting. File list.html digunakan untuk mengatur setiap halaman daftar konten atau artikel.

Misalnya seperti halaman blog, atau halaman khusus untuk kategori tertentu, dan lain-lain.

Halaman utama atau home page diatur bukan melalui file ini (walaupun kamu membuat halaman home page untuk menampilkan daftar konten atau artikel, itu tetap tidak diatur oleh file “list.html” ini).

Home page atau halaman utama situs, diatur di file bernama index.html (file index.html berada langsung dibawah folder layouts (bukan di dalam folder _default atau partials)).

Salin dan tempel kode di bawah ini ke file list.html sebagai kode untuk pembelajaran kita kedepannya:

 1{{ define "main" }}
 2    <h1>Halaman Blog</h1>
 3    {{ range .RegularPages.ByDate }}
 4        <div>
 5            <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
 6            <span>{{ .Date }}</span>
 7            {{ .Summary }}
 8        </div>
 9    {{ end }}
10{{ end }}

single.html

File yang terakhir ini juga wajib kita buat di dalam folder _default. File single.html digunakan untuk mengatur halaman mandiri dari konten atau artikel.

Sebagai contoh adalah postingan atau artikel yang kita buat, halaman kontak, halaman tentang situs, dan halaman lainnya.

Folder partials

Folder atau direktori partials digunakan untuk menempatkan file-file html yang nantinya akan digunakan di halaman situs hugo.

Tujuan dibuatnya folder ini adalah untuk memecah halaman pada situs hugo menjadi beberapa bagian.

Hal ini dilakukan untuk mempermudah tim atau kita sendiri saat membaca kode HTML.

Sebagai contoh, yang termasuk bagian atau pecahan dari halaman situs hugo adalah bagian header (atas) dan footer (bawah) situs hugo.

Buatlah ketiga file.html dengan nama head.html, header.html, dan footer.html.

1partials
2    ├── head.html
3    ├── header.html
4    ├── footer.html

File head.html digunakan untuk menyisipkan tag html yang tersembunyi (tidak akan ditampilkan di halaman situs kita).

Sebagai contoh, tag <meta>, tag <link>, tag <style> dan tag html lainnya.

File header.html digunakan untuk bagian header situs hugo. Yang dimaksud bagian header itu seperti navigasi situs pada bagian atas.

Kamu dapat melihat contohnya, seperti bagian atas situs ini.

File footer.html digunakan untuk membuat bagian bawah atau footer dari situs hugo.

Biasanya ini berisi navigasi situs ke halaman yang dianggap penting.

Seperti halaman tentang situs, halaman kontak, halaman kebijakan privasi, atau halaman khusus untuk situs tersebut.

Selain ketiga file diatas, kita juga dapat membuat file.html dengan nama lainnya yang dapat disesuaikan tujuan penggunaannya.

Folder shortcodes

Folder shortcodes digunakan untuk menempatkan file-file html yang akan digunakan sebagai kode tambahan atau pelengkap pada konten atau artikel.

File html yang berada di dalam folder shortcodes dapat kita atur sesuai dengan keinginan kita.

Kita dapat memanggil kode shortcodes yang kita simpan di dalam file html tersebut dengan menggunakan format seperti ini:

1❴❴< namafile >❵❵

Contoh penggunaannya, misalnya saat kita membutuhkan tag html tertentu yang tidak tersedia di file markdown.

Maka, kita hanya perlu menuliskan tag html tersebut di file.html di dalam folder shortcodes yang nantinya bisa kita panggil dan gunakan berkali-kali di artikel markdown.

Jangan menganggap folder ini tidak terlalu berguna. Awalnya saya juga pikir begitu.

Setelah seringkali menggunakannya, saya bahkan dapat membuat tag html khusus yang hanya muncul di beberapa halaman saja dan tanpa perlu bersusah payah menuliskan tag html yang sama berulang kali.

Cukup dengan memanggil nama filenya dan hasilnya sesuai dengan yang saya harapkan.

Saya akan membahas penggunaan lebih detailnya nanti, karena sekarang belum waktunya kamu belajar ini.

File index.html

Pada pembelajran yang lalu, kita sudah pernah belajar menampilkan gambar dan teks di situs hugo melalui file index.html ini.

File index.html digunakan untuk mengatur struktur html dari halaman utama situs hugo.

Di file index.html ini, kita dapat menyesuaikan tag html, css, dan javascript khusus untuk halaman utama saja.

File 404.html

File 404.html merupakan file yang digunakan untuk menampilkan halaman error 404.

Misalnya, ada seorang pengunjung situs ingin mengunjungi artikel kita. Tetapi, artikel tersebut sudah kita hapus.

Maka halaman yang akan muncul adalah halaman error 404 ini.

Kita dapat mengarahkan pengunjung yang mendapati error 404 ini ke halaman utama situs hugo dengan cara memberikan tombol/link khusus yang mengarahkan ke halaman utama.

Jangan lupa simpan filenya ya 😄.

Kategori: Hugo

captcha-img