Cara Menggunakan Templat Bawaan Hugo: Panduan Langkah demi Langkah

Diterbitkan: 2024-11-27

Hugo adalah generator situs statis yang kuat yang memungkinkan pengembang dan pembuat konten dengan cepat membangun situs web yang cepat dan skalabel. Salah satu fitur inti Hugo adalah sistem templatnya, yang membantu menyusun konten dan menyesuaikan tampilan dan nuansa situs. Jika Anda baru mengenal Hugo atau ingin memanfaatkan kemampuan templatingnya dengan lebih efektif, panduan langkah demi langkah ini akan menunjukkan cara menggunakan templat bawaan Hugo.

Apa Itu Template di Hugo?

Templat di Hugo adalah file yang menentukan bagaimana konten di situs Anda akan dirender. Mereka terdiri dari kode khusus HTML, CSS, dan Hugo, memungkinkan Anda menyesuaikan tata letak situs web Anda. Templat dapat digunakan untuk berbagai keperluan, seperti membuat header, footer, halaman tunggal, daftar, dan lainnya.

Memahami Masalah Kotak Centang Tidak Ditampilkan

Hugo memiliki templat bawaan yang merupakan bagian dari struktur temanya, dan juga memungkinkan Anda membuat templat khusus untuk fleksibilitas yang lebih besar. Templat ini diterapkan secara otomatis berdasarkan tipe konten, struktur URL, dan variabel lainnya, sehingga memudahkan pengelolaan situs yang kompleks.

Langkah 1: Instal Hugo dan Buat Situs Baru

Sebelum mendalami template, Anda harus menginstal Hugo terlebih dahulu dan menyiapkan situs Anda. Inilah cara Anda melakukannya:

  1. Instal Hugo :
    • Jika Anda belum menginstal Hugo, ikuti panduan instalasi resmi untuk sistem operasi Anda: Menginstal Hugo.
  2. Buat Situs Hugo Baru :
    • Jalankan perintah berikut di terminal Anda untuk membuat situs baru:
       hugo new site mysite
    • Ini akan membuat direktori baru bernama mysite dengan struktur file dasar untuk proyek Hugo Anda.

Langkah 2: Tambahkan Tema

Hugo bekerja dengan tema untuk mengatur bagaimana konten ditampilkan. Anda dapat menggunakan tema yang sudah ada dari Hugo Themes atau membuat tema khusus. Untuk mempermudah, mari gunakan tema dari perpustakaan tema Hugo.

  1. Tambahkan Tema :
    • Anda dapat menambahkan tema dengan mengkloningnya ke themes/ direktori Anda. Misalnya, mari kita gunakan tema “Ananke”:
       git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
  2. Konfigurasikan Tema :
    • Buka file config.toml Anda dan atur temanya:
       theme = "ananke"

Langkah 3: Pahami Struktur Templat Hugo

Sistem templating Hugo didasarkan pada bahasa templating Go. Templat dibagi menjadi beberapa kategori berdasarkan tujuannya:

  • Templat Dasar : Ini adalah templat menyeluruh yang membungkus konten. Mereka sering kali menyertakan bagian umum seperti header, footer, dan navigasi.
  • Templat Konten : Ini menentukan bagaimana masing-masing jenis konten (misalnya, posting blog, halaman, bagian) ditampilkan.
  • Templat Daftar : Templat ini mengontrol bagaimana grup konten disajikan (misalnya, daftar postingan blog).
  • Templat Parsial : Ini adalah cuplikan kecil yang dapat digunakan kembali (misalnya, bilah navigasi atau footer) yang disertakan dalam templat utama.

Direktori Templat Umum

  • layouts/ : Berisi semua file tata letak seperti index.html , single.html , dll.
  • themes/ : Berisi template yang sesuai dengan tema pilihan Anda.
  • content/ : Menyimpan file konten Anda (biasanya ditulis dalam Markdown).

Langkah 4: Buat Templat

Mari kita jelajahi cara membuat dan memodifikasi templat untuk sebuah halaman.

  1. Buat File Konten Baru :
    • Untuk membuat halaman baru (misalnya postingan blog), gunakan perintah berikut:
       hugo new posts/my-first-post.md
    • Ini membuat file Markdown baru di dalam content/posts/ dengan materi depan (YAML atau TOML) dan placeholder untuk konten Anda.
  2. Buat Templat untuk Halaman Tunggal :
    • Di direktori layouts , buat file bernama single.html di dalam layouts/_default/ . Ini akan mengontrol bagaimana halaman konten individual ditampilkan.
       <!-- layouts/_default/single.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <article> {{ .Content }} </article> </main> </body> </html>
    • Templat ini akan menampilkan judul dan konten setiap halaman yang Anda buat.
  3. Buat Templat Daftar :
    • Demikian pula, Anda dapat membuat templat daftar untuk menampilkan beberapa item konten (misalnya, daftar postingan). Buat list.html di direktori layouts/_default/ .
       <!-- layouts/_default/list.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <ul> {{ range .Pages }} <li><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }} </ul> </main> </body> </html>

Langkah 5: Menyesuaikan Template

Anda dapat menyempurnakan template Anda dengan serangkaian fungsi template Hugo yang kaya. Misalnya, Anda dapat menyertakan CSS khusus, mengulang variabel, atau memformat tanggal:

  • Menambahkan CSS : Anda dapat menautkan file CSS ke template Anda:
     <link rel="stylesheet" href="{{ "styles.css" | relURL }}">
  • Format Tanggal : Gunakan fungsi date untuk menampilkan tanggal dalam format tertentu:
     <p>Published on: {{ .Date.Format "January 2, 2006" }}</p>

Langkah 6: Sajikan dan Pratinjau Situs Anda

Setelah templat Anda siap dan Anda telah menambahkan konten, Anda dapat melihat pratinjau situs Anda secara lokal:

 hugo server

Navigasikan ke http://localhost:1313 untuk melihat situs Anda.

FAQ tentang Templat Hugo

1. Apa tujuan dari direktori “tata letak” di Hugo?

Direktori layouts adalah tempat Anda menyimpan semua file template Anda di Hugo. Ini digunakan untuk menentukan bagaimana berbagai jenis konten (misalnya, postingan, halaman, daftar) akan ditampilkan di bagian depan situs Anda. Templat disusun berdasarkan jenis dan lokasi, seperti single.html untuk halaman konten individual dan list.html untuk daftar konten.

2. Bisakah saya membuat templat khusus sendiri di Hugo?

Ya, Anda dapat membuat templat khusus di Hugo. Dengan menempatkan templat Anda di direktori layouts , Anda dapat membuat templat khusus untuk tipe konten, bagian, atau bahkan tampilan konten unik tertentu. Hugo juga memungkinkan Anda mengganti template default dari tema pilihan Anda.

3. Bagaimana cara Hugo menangani file konten dan template?

Hugo menggunakan sistem di mana file konten (ditulis dalam Markdown atau format lainnya) dipasangkan dengan templat untuk menentukan cara tampilannya. Saat Anda membuat konten (misalnya postingan blog), Hugo secara otomatis mencari template yang sesuai (misalnya single.html ) dan merender konten menggunakan template tersebut. Hugo juga mendukung pengorganisasian konten menjadi beberapa bagian, yang dapat menggunakan templat berbeda.

4. Apa saja templat parsial di Hugo?

Templat parsial adalah komponen atau cuplikan HTML yang dapat digunakan kembali dan dapat disertakan dalam templat lain. Misalnya, menu header, footer, atau navigasi dapat dibuat sebagian dan disertakan dalam berbagai templat menggunakan {{ partial "header.html" . }} sintaksis. Hal ini membantu dalam menjaga prinsip KERING (Jangan Ulangi Diri Sendiri) dan membuat situs lebih mudah dikelola.

5. Bisakah saya menggunakan template Hugo dengan tema khusus?

Ya, Anda dapat menggunakan tema khusus di Hugo. Anda dapat membuat tema sendiri atau menggunakan tema yang sudah ada dari repositori tema Hugo. Jika Anda menggunakan tema yang sudah ada, Anda dapat mengganti templatnya dengan menambahkan templat khusus Anda di direktori layouts , yang memungkinkan Anda memodifikasi bagian tertentu dari tema tanpa mengubah keseluruhan struktur.

Dengan mengikuti langkah-langkah ini dan memahami sistem templat Hugo, Anda dapat membangun situs web yang kuat dan dapat disesuaikan. Baik Anda menggunakan templat bawaan atau membuat sendiri, Hugo memberikan fleksibilitas dan kecepatan yang diperlukan untuk mengembangkan situs statis dengan mudah.