Bermain dengan konten Website Hugo

Waktunya memodifikasi isi konten website Hugo kamu. Mulai dari mengatur lokasi postingan, mengatur url masing masing halaman dan memodifikasi halaman ...

cover Bermain dengan konten Website Hugo

Setelah kamu belajar cara install dan mengganti tema Hugo, sekarang kita akan mengeksplor lebih banyak isi dari konten website yang dibuat dengan Hugo.

Mengganti URL posts

Kamu tidak suka dengan url web/posts ? mau menggantinya menjadi halaman /blog misalnya? sangat mudah, cukup ganti nama folder "posts" yang ada di bawah "content" menjadi nama apapun yang kamu mau.

Contoh: content/blog

Sekarang semua postingan kamu ada di bawah web/blog

Nah mulai sekarang, kamu bisa membuat file baru dengan

hugo new blog/nama-file.md

agar file tersebut automatis di bawah folder blog.

Begitu juga kalau kamu mau membuat halaman tambahan selain blog , kamu bisa bikin halaman "rekomendasi", halaman "informasi" dan seterusnya.

Hugo hanya akan melihat isi dari file " content" kamu, apapun folder dan file yang ada di dalamnya akan dijadikan kontent sesuai dengan urutan URLnya.

Selain nama foldernya mungkin kamu mau mengganti lokasi halaman masing masing. Sebagai contoh saya mau urlnya localhost/postingan bukan di localhost/blog/postingan, Kita bisa mengganti file config.toml dengan informasi permalink tambahan

//config.toml
[permalinks]
  blog = ":slug"

ini artinya semua file yang ada di bawah folder blog, akan bisa diakses melalui slug atau nama filenya langsung.

Contoh lain kalau kamu mau mengaksesnya dengan link waktu

[permalinks]
  posts = "/:year/:month/:title/"

Sekarang postingan kamu ada di localhost/tahun/bulan/judul-filenya

Membuat halaman selain postingan

Selain struktur dasar seperti blog sebelumnya, kita juga bisa mendeklarasikan satu file statis khusus yang bisa diakses langsung seperti

localhost/kontak atau localhost/tentang

Kamu bisa membuatnya dengan

hugo new kontak.md

kontak bisa kamu ganti dengan apa saja. Tentu perintah di atas tidak baru, kita sudah pernah belajar sebelumnya hugo new untuk membuat file, bedanya di atas kita tidak memberinya folder, tapi langsung di bawah content .

Sekarang, silahkan isi kontak.md nya dan jangan lupa bikin draft:false atau menghapus draft nya.

Halaman baru kamu bisa diakses di localhost/kontak

Mengganti tampilan homepage Hugo

Kalau kamu mau mengganti tampilan halaman utamanya, buat file index.html di bawah folder layouts kamu. Kamu bisa membuat sebebas-bebasnya halama HTML yang kamu mau, termasuk memasukkan tag link untuk ke halaman blog/postingannya.

Mau mengganti sedikit saja? atau masih mau pakai tema bawaan? kamu bisa copy-paste isi dari themes/NAMATEMA/layouts/index.html nya ke lokasi index.html di bawah root layout kamu dan melakukan modifikasi sesuai yang kamu mau.

avatar hilmanski
@hilmanski

2689 Kontribusi 2137 Poin

Diperbarui 4 tahun yang lalu

Bagian dari artikel seri

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban