contoh

Menambahkan Gambar Sampul dan Artikel Audio

Author Name — Sat, 22 Feb 2025 00:00:00 +0000

Menambahkan Gambar Sampul

Menambahkan Gambar ke Parameter

Untuk menambahkan gambar sampul ke artikel Anda, ada dua pilihan:

Metode Front Matter

Anda dapat menggunakan parameter cover atau images untuk sumber gambar. Dan parameter alt, coverAlt atau imagesAlt untuk teks alt.

---
title: "Artikel Saya"
images: "images/my-cover.jpg"
alt: "Deskripsi gambar"
---

Metode Page Bundle

Buat folder untuk artikel Anda
Beri nama gambar Anda cover.*
Letakkan di folder yang sama dengan konten Anda
Atur teks alt di frontmatter artikel

Menambahkan Gambar ke Badan Artikel

Anda dapat menambahkan gambar dalam berbagai layout, dimana saja di badan artikel dengan shortcode {{< figure >}}:

{{< figure src="cover" caption="alt" >}}

Ini adalah kebebasan untuk menata artikel!

Kucing bernama cooper dengan gabus yang menempel pada bulu karena elektrostatis.

Menambahkan Artikel Audio

Metode Front Matter

---
title: "Artikel Saya"
audio: "audio/my-audio.ogg"
---

Metode Page Bundle

Anda dapat mengunggah beberapa format audio dengan metode ini:

Buat folder untuk artikel Anda
Beri nama audio Anda audio.*
Letakkan di folder yang sama dengan konten Anda

Contoh Metode Page Bundle

Berikut bagaimana struktur folder pada metode page bundle:

content/
└── posts/
 └── my-article/
 ├── index.md
 ├── cover.jpg
 ├── audio.mp3
 └── audio.ogg

Mengatur Entri `Terms`

Author Name — Mon, 03 Feb 2025 00:00:00 +0000

Anda dapat mengubah cover untuk setiap entry terms dengan menambahkan parameter cover di _index.md di bawah [bahasa]\[taksonomi]\[terms]\. Sebagai contoh, untuk mengatur cover dari term kongigurasi di categories, tambahkan parameter di content\id\categories\konfigurasi\_index.md.

---
title: "Konfigurasi"
description: "Deskripsi konfigurasi, ini bisa berguna untuk metadata HTML"
cover: "https://example.com/cover.png"
translationKey: konfigurasi
---

Jika ada teks yang ditulis di sini, teks akan ditampilkan sebagai bagian hero.

Untuk menghubungkan entry terms dalam bahasa lain, Anda dapat menambahkan parameter translationKey. Sebagai contoh, jika Anda ingin menghubungkan entry terms dalam bahasa Indonesia, tambahkan parameter di content\id\categories\konfigurasi\_index.md.

---
title: "Configuration"
description: "Configuration description, this might be useful for HTML metadata"
cover: "https://example.com/cover.png"
translationKey: konfigurasi
---

Jika ada teks yang ditulis di sini, teks akan ditampilkan sebagai bagian hero.

Dengan cara yang sama, Anda dapat mengatur cover untuk setiap entry terms untuk taksonomi series dan author. Setelah membuat perubahan ini, bangun ulang situs Anda untuk melihat pembaruan cover dan terjemahan di breadcrumbs. Cover akan menggantikan gambar flowlines pada daftar taksonomi.

Mengatur Riwayat Redaksi

Author Name — Mon, 03 Feb 2025 00:00:00 +0000

Fungsi riwayat redaksi memungkinkan Anda untuk melacak dan mengkomunikasikan modifikasi konten kepada pembaca. Di dalam front matter artikel, Anda dapat menentukan detail seperti editor, reviewer, dan menyertakan catatan penjelasan (note) tentang perubahan yang dilakukan. Fitur ini memerlukan konfigurasi manual di bagian front matter artikel.

+++
title = "Mengatur Riwayat Redaksi"
history = [
 {date = "2025-02-01", author = "Nama Penulis", reviewer = "Nama Pengulas", note = "Contoh"},
 {date = "2025-02-02", author = "Nama Penulis", editor = "Nama Editor", note = "Addendum (contoh)"},
 {date = "2025-02-03", note = "Errata (contoh)"},
 ]
+++

Garis waktu kronologis yang menampilkan informasi ini akan muncul di bawah bagian informasi artikel, seperti yang ditunjukkan dalam contoh artikel ini.

Menambahkan Diskusi

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

Mengatur Komentar Giscus

Untuk mengaktifkan komentar Giscus di situs Hugo Anda, ikuti langkah-langkah berikut:

Pertama, pasang Aplikasi GitHub Giscus di repositori Anda
Tambahkan parameter berikut ke config.toml Anda:

[params.giscus]
 repo = "username/repository"
 repoID = "R_kgDxxxxxxxx"
 category = "Announcements"
 categoryID = "DIC_kwDxxxxxxxxxxxxxxxx"

Ganti kata-kunci berikut:

repo: Nama pengguna dan repositori GitHub Anda
repoID: ID repositori Anda (dapatkan dari situs Giscus)
category: Nama kategori diskusi
categoryID: ID kategori diskusi (dapatkan dari situs Giscus)

Anda bisa mendapatkan kata-kunci tersebut dengan mengunjungi Giscus.app dan mengatur preferensi Anda.

Parameter berikut juga dapat dikonfigurasi secara opsional:

 mapping = "pathname"
 strict = "0"
 reactionsEnabled = "1"
 emitMetadata = "0"
 inputPosition = "bottom"
 theme = "preferred_color_scheme"
 loading = "lazy"

Secara default, komentar Giscus akan muncul di semua postingan. Untuk menonaktifkan komentar pada postingan tertentu, gunakan parameter front matter:

---
comments: false # Nonaktifkan komentar untuk postingan ini
---

Mengatur Integrasi Media Sosial

Tema ini mendukung penyematan komentar dari Bluesky atau Mastodon atau kedua platform sosial tersebut. Ketika Anda menyertakan tautan ke postingan Bluesky atau Mastodon di front matter, Giscus akan diganti secara otomatis.

Menautkan diskusi dengan postingan Mastodon

Tautkan URL postingan Bluesky ke front matter menggunakan parameter toot, mstd, atau mastodon.

---
toot: https://example.com/@example/12345678901234567890
---

Menautkan diskusi dengan postingan Bluesky

Tautkan URL postingan Mastodon ke front matter menggunakan parameter skeet, bsky atau bluesky.

---
skeet: https://bsky.app/profile/example.com/post/12345678901234
---

Catatan: Anda mungkin perlu memperkirakan permalink artikel pada pratinjau lokal sebelum membagikan ke platform Fediverse untuk mendapatkan tautan postingan, atau Anda mungkin perlu menjalankan operasi CI/CD dua kali.

Mengatur Logo dan Aksen Warna

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

Tema Hugo Brewm memungkinkan Anda untuk dengan mudah mengatur logo dan aksen warna situs Anda. Ikuti langkah-langkah berikut untuk mengatur logo Anda:

Mengubah Aksen Warna

Untuk membuat aksen warna sesuai dengan identitas merek Anda, Anda dapat menambahkan kode berikut pada berkas konfigurasi situs anda (hugo.toml):

 // Adjust color
 [params.style]
 [params.style.light]
 ac = '#800'
 bg = '#eee'
 fg = '#111'
 mid = 'gray'
 [params.style.light.more]
 ac = 'red'
 [params.style.light.less]
 [params.style.dark]
 ac = '#f80'
 bg = '#000'
 fg = '#fff'
 mid= 'gray'
 [params.style.light.less]
 [params.style.light.more]

Menambahkan Gambar Logo / Ikon LogoMark

Siapkan gambar logo Anda

Buat atau siapkan file gambar logo Anda (format yang disarankan: PNG atau SVG)

Untuk hasil terbaik, gunakan gambar dengan latar belakang transparan

Dimensi yang disarankan: tinggi 50px hingga 70px

Anda juga dapat menambahkan versi mode gelap dari logo Anda

Atur logo(mark) di konfigurasi situs Anda:

[params]
 logoMark = 'https://example.com/logoMark.svg'
 logoMarkDark = 'https://example.com/logoMarkDark.svg' #opsional

Menggunakan Preset Logo Type

Jika Anda lebih suka tidak menggunakan logo gambar, Anda dapat mengaktifkan logo berbasis teks bawaan dengan menambahkan pengaturan ini:

[params]
 logoType = true

Setelah membuat perubahan ini, bangun ulang situs Anda untuk melihat logo yang diperbarui. Logo akan secara otomatis muncul di header situs dan akan responsif di berbagai ukuran perangkat.

Mengatur Menu

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

Pelajari cara mengatur menu di tema Hugo Brewm menggunakan file config.toml atau menus[.lang].toml.

identifier: Pengenal unik untuk setiap item menu
name: Teks yang ditampilkan di menu
url: Tujuan tautan eksternal
pageRef: Tautan ke halaman internal
weight: Pengurutan item menu (angka lebih kecil lebih dulu)
pre: Setel ikon
post: Deskripsi untuk tautan
parent: Referensi item menu induk

Menambahkan Ikon

Tambahkan ikon ke item menu Anda dengan parameter pre.

[[menu.main]]
 identifier = "github"
 name = "GitHub"
 url = "https://github.com/"
 pre = "github"

Berikut adalah daftar ikon yang didukung beserta nama-namanya yang dapat digunakan saat mengkonfigurasi item menu Anda:

email
rss
behance
bigcartel
bitbucket
blogger
bluesky
bukalapak
buymeacoffee
clubhouse
codepen
creativefabrica
dailymotion
dev
deviantart
digg
dribbble
ebay
etsy
facebook
figma
flickr
flipkart
github
githubsponsors
gitlab
gnusocial
goodreads
googlescholar
gumroad
hackernews
hashnode
icon–500px
instagram
jsfiddle
karyakarsa
keybase
keycdn
kickstarter
kofi
lazada
liberapay
linkedin
mastodon
medium
olx
opencollective
openid
orcid
patreon
paypal
peertube
pinterest
pixelfed
pleroma
publons
quora
reddit
researchgate
saweria
sellfy
shopee
shopify
signal
snapchat
soundcloud
stackexchange
stackoverflow
stripe
substack
tangled
telegram
threads
tiktok
tokopedia
tumblr
twitch
twitter
vimeo
vine
wattpad
weibo
whatsapp
wikipedia
wordpress
write-dot-as
x
xing
xmpp
youtube

Buat menu dropdown dengan menggunakan parameter parent:

[[menu.main]]
 identifier = "about"
 name = "Tentang"
 pageRef = "/about"

 [[menu.main]]
 identifier = "about-author"
 name = "Penulis"
 pageRef = "/about/author"
 parent = "about"

Dukungan Bahasa

Ada tiga cara untuk menambahkan dukungan multi-bahasa ke menu Anda:

1. Menggunakan `menu.[lang].[menuID]`

Di config.toml:

[[menu.en.main]]
 identifier = "about"
 name = "About"
 url = "/about/"

 [[menu.en.main]]
 identifier = "about-author"
 name = "Author"
 pageRef = "/about/author"
 parent = "about"

[[menu.id.main]]
 identifier = "about"
 name = "Tentang"
 url = "/tentang/"

 [[menu.id.main]]
 identifier = "about-author"
 name = "Tentang Penyusun"
 pageRef = "/tentang/penyusun"
 parent = "about"

Di menus.en.toml:

[[main]]
 identifier = "about"
 name = "About"
 url = "/about/"

 [[main]]
 identifier = "about-author"
 name = "Author"
 pageRef = "/about/author"
 parent = "about"

Di menus.id.toml:

[[main]]
 identifier = "about"
 name = "Tentang"
 url = "/tentang/"

 [[menu.id.main]]
 identifier = "about-author"
 name = "Tentang Penyusun"
 pageRef = "/tentang/penyusun"
 parent = "about"

3. Menggunakan Front Matter di File Markdown

di index[.lang].md _index[.lang].md atau filename[.lang].md

---
title: "Tentang Penulis"
menus:
 main:
 indetifier: about-author
 parent: about
---

Mengatur Slide Beranda

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

Menyiapkan konten slide

Tema Hugo Brewm memiliki bagian slide beranda yang menampilkan konten penting melalui carousel interaktif. Anda dapat menambahkan parameter cover untuk menambahkan sampul slide; parameter ini juga mengubah tata letak slide. Untuk membuat beberapa slide, Anda perlu membuat file terpisah yang berisi struktur front matter seperti ini:

---
type: slide
title: "Judul Slide"
params:
 headless: true # cegah pembuatan halaman dan alihkan ke 404.html
 target: "https://example.com" # atau alihan ke target
---

Shortcode Khusus untuk Konten Slide

Galeri dengan tata letak Masonry

Untuk gallery dengan tata letak gaya Pinterest, Anda dapat mengimplementasikan shortcode pin seperti berikut:

{{< pin "begin" >}}
{{< pin img="https://example.com/item1.jpg" url="https://example.com/item1" label="Item 1" >}}
{{< pin img="https://example.com/item2.jpg" url="https://example.com/item2" label="Item 2" >}}
{{< pin img="https://example.com/item3.jpg" url="https://example.com/item3" label="Item 3" >}}
{{< pin img="https://example.com/item4.jpg" url="https://example.com/item4" label="Item 4" >}}
{{< pin img="https://example.com/item5.jpg" url="https://example.com/item5" label="Item 5" >}}
{{< pin img="https://example.com/item6.jpg" url="https://example.com/item6" label="Item 6" >}}
{{< pin "end" >}}

Tes Markdown

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

Ini adalah contoh span dengan kelas letterine. Anda perlu mengatur parameter markup.goldmark.unsafe dan markup.goldmark.renderer.unsafe di config.toml untuk menulis html secara langsung, tetapi ini tidak direkomendasikan. Dan ini adalah marginpar. Teks tebal, Teks miring, Teks tebal dan miring, ~~Teks dicoret~~, Teks tautan —juga berfungsi. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Judul 2

Paragraf pertama tidak akan menjorok. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraf kedua dan setelahnya akan menjorok. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ini adalah kutipan

Kutipan bertumpuk

Judul 3

Item daftar terurut 1
Item daftar terurut 2
- Item tidak terurut bersarang
- Item bersarang lainnya
Item daftar terurut 3

Item daftar tidak terurut
Item lainnya
- Item bersarang
- Item bersarang lainnya

Judul 4

Header 1	Header 2
Sel 1	Sel 2
Sel 3	Sel 4

Daftar tugas:

Tugas selesai
Tugas belum selesai

Judul 5

Ini adalah kode dalam baris dan beberapa pemformatan gabungan.

Ini adalah blok kode:

// blok kode dengan empat spasi
def hello_world():
 print("Halo, Dunia!")

// Blok kode dengan penyorotan sintaks
function salam(nama) {
 return `Halo, ${nama}!`;
}

Judul 6

Tingkat judul 6 akan ditampilkan sebagai paragraf dalam baris. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

contoh

Menambahkan Gambar Sampul dan Artikel Audio

Menambahkan Gambar Sampul

Menambahkan Gambar ke Parameter

Menambahkan Gambar ke Badan Artikel

Menambahkan Artikel Audio

Contoh Metode Page Bundle

Mengatur Entri `Terms`

Mengatur Riwayat Redaksi

Menambahkan Diskusi

Mengatur Komentar Giscus

Mengatur Integrasi Media Sosial

Menautkan diskusi dengan postingan Mastodon

Menautkan diskusi dengan postingan Bluesky

Mengatur Logo dan Aksen Warna

Mengubah Aksen Warna

Menambahkan Gambar Logo / Ikon LogoMark

Menggunakan Preset Logo Type

Mengatur Menu

Parameter Menu

Menambahkan Ikon

Membuat Menu Bertingkat

Dukungan Bahasa

1. Menggunakan `menu.[lang].[menuID]`

2. Menggunakan File Menu Terpisah

3. Menggunakan Front Matter di File Markdown

Mengatur Slide Beranda

Menyiapkan konten slide

Shortcode Khusus untuk Konten Slide

Galeri dengan tata letak Masonry

Tes Markdown

Judul 2

Judul 3

Judul 4

Judul 5

Judul 6

contoh

Menambahkan Gambar Sampul dan Artikel Audio

Menambahkan Gambar Sampul

Menambahkan Gambar ke Parameter

Menambahkan Gambar ke Badan Artikel

Menambahkan Artikel Audio

Contoh Metode Page Bundle

Mengatur Entri `Terms`

Mengatur Riwayat Redaksi

Menambahkan Diskusi

Mengatur Komentar Giscus

Mengatur Integrasi Media Sosial

Menautkan diskusi dengan postingan Mastodon

Menautkan diskusi dengan postingan Bluesky

Mengatur Logo dan Aksen Warna

Mengubah Aksen Warna

Menambahkan Gambar Logo / Ikon LogoMark

Menggunakan Preset Logo Type

Mengatur Menu

Parameter Menu

Menambahkan Ikon

Membuat Menu Bertingkat

Dukungan Bahasa

1. Menggunakan menu.[lang].[menuID]

2. Menggunakan File Menu Terpisah

3. Menggunakan Front Matter di File Markdown

Mengatur Slide Beranda

Menyiapkan konten slide

Shortcode Khusus untuk Konten Slide

Galeri dengan tata letak Masonry

Tes Markdown

Judul 2

Judul 3

Judul 4

Judul 5

Judul 6

1. Menggunakan `menu.[lang].[menuID]`