Daftar isi

1. Kemampuan Markdown Dasar
2. Daftar, Tugas, dan Catatan Kaki
3. Tabel dan Sorotan Kode
4. Alert Bergaya GitHub
5. Rumus KaTeX
6. Diagram Mermaid
7. Shortcode Duckquill
8. Kemampuan Ekstensi HTML
9. Tombol dan Navigasi Cepat
10. Fitur Front Matter Tingkat Halaman
11. Demo Backlinks

Pos ini adalah halaman blog demo di situs ini, dipakai untuk memusatkan dan memverifikasi kemampuan rich text serta format lanjutan.

Kemampuan Markdown Dasar

Gaya teks: tebal, miring, coret, kode inline, bahkan gaya gabungan sekalian semua.

• Tautan internal: Beranda
• Tautan eksternal: Dokumentasi Zola
• Emoji: 😭😂🥺🤣❤️✨🙏😍🥰😊

Ini adalah blok kutipan.

Berikut kutipan bersarang:

Duckquill sangat cocok untuk penulisan teknis yang jelas dan terstruktur.

Daftar, Tugas, dan Catatan Kaki

• Item daftar biasa A
• Item daftar biasa B
  • Item bersarang B.1
  • Item bersarang B.2
• Item daftar biasa C

1. Tulis konten
2. Pratinjau lokal
3. Publikasikan

• Tugas 1: Aktifkan ekstensi Markdown umum
• Tugas 2: Tambahkan dukungan Mermaid
• Tugas 3: Refaktor menjadi pos showcase
• Tugas 4: Terus tambahkan contoh praktis dunia nyata

Contoh catatan kaki¹ dan catatan kaki bertaut².

Contoh Definition List:

Mermaid

Mendeskripsikan struktur graf dengan teks, lalu merendernya otomatis menjadi SVG.

KaTeX

Rendering berperforma tinggi untuk rumus matematika LaTeX.

Duckquill Shortcodes

Ekstensi fitur di tingkat tema, seperti alert, image, video, dan youtube.

Tabel dan Sorotan Kode

fn main() {
    println!("Duckquill demo blog");
}

1[extra]
2show_copy_button = true
3show_reading_time = true
4show_share_button = true

Alert Bergaya GitHub

Ini adalah alert NOTE yang digunakan untuk memberi konteks latar belakang.

Ini adalah alert TIP yang digunakan untuk saran praktis.

Ini adalah alert IMPORTANT yang digunakan untuk menegaskan langkah penting.

Ini adalah alert WARNING yang digunakan untuk menandai potensi masalah.

Ini adalah alert CAUTION yang digunakan untuk menjelaskan perilaku berisiko.

Rumus KaTeX

Rumus inline: $E = mc^2$.

Rumus blok:

$$ f(x) = \int_{-\infty}^{\infty}\hat{f}(\xi)e^{2\pi i\xi x},d\xi $$

Diagram Mermaid

Blok mermaid berikut akan dirender sebagai flowchart:

flowchart LR
    A[Writing] --> B[Git Commit]
    B --> C[Zola Build]
    C --> D[Static Deploy]
    D --> E[Visit Site]

Contoh lain berupa diagram urutan:

sequenceDiagram
    participant U as User
    participant G as Git Repo
    participant Z as Zola
    U->>G: push content
    G-->>Z: trigger build
    Z-->>U: generated public site

Shortcode Duckquill

Shortcode alert (berbeda dari GitHub alerts; ini shortcode tema):

Ini adalah alert shortcode note.

Ini adalah alert shortcode tip.

Ini adalah alert shortcode important.

Ini adalah alert shortcode warning.

Ini adalah alert shortcode caution.

Shortcode gambar (pemakaian dasar):

Shortcode gambar (opsi lebih lengkap):

Teks ini mendemonstrasikan perilaku gambar mengambang start, yaitu gambar menempel di sisi awal paragraf.

Teks ini mendemonstrasikan perilaku gambar mengambang end, yaitu gambar menempel di sisi akhir paragraf.

Shortcode video (contoh dasar dan autoplay):

Tautan shortcode YouTube / Vimeo / Mastodon:

• Contoh tautan YouTube
• Contoh tautan Vimeo
• Contoh tautan Mastodon

(Catatan: agar output konsol dari embed pihak ketiga tidak terlalu ramai di halaman showcase ini, ketiganya ditampilkan sebagai tautan.)

Shortcode CRT:

user@duckquill-demo:~$ zola check
Checking site...
-> Site content: OK

Kemampuan Ekstensi HTML

Tag HTML inline umum juga bisa langsung dipakai:

• ASCII
• Ctrl + K
• teks kunci yang disorot
• ini adalah teks spoiler
• ini adalah teks spoiler solid
• rencana lama rencana baru
• ini adalah kutipan inline
• demo-output.log: all checks passed
• kalimat ini digarisbawahi

Ini adalah contoh teks catatan samping <small>.

Contoh form dan widget interaksi:

•  Aktifkan Mermaid
•  Aktifkan KaTeX
•  Aktifkan Backlinks
•  Gelap
•  Terang

Warna aksen:

Kerapatan konten:

Komposisi gambar + caption (figure + figcaption):

Contoh progress bar (terhubung ke range input lewat skrip halaman):

Tombol dan Navigasi Cepat

Fitur Front Matter Tingkat Halaman

Selain featured = true, halaman ini juga mendemonstrasikan:

• banner = "banner-feature-en.png": banner pos dan thumbnail daftar.
• accent_color / accent_color_dark: override aksen per halaman.
• styles = ["css/feature-demo-blog.css"] dan scripts = ["js/feature-demo-blog.js"]: style dan skrip khusus halaman.
• emoji_favicon = "🧪": favicon emoji untuk tab browser.

Bagian ini adalah checklist ringkas untuk memvalidasi rendering konfigurasi tingkat halaman.

Demo Backlinks

Saya sudah menambahkan tautan ke pos ini dari halaman tentang.

Jika item Backlinks muncul di tombol aksi cepat, berarti indeks backlink internal berfungsi dengan semestinya.

Jika semua modul di atas dirender dengan benar, artinya kemampuan rich text blog ini sekarang sudah mencakup sebagian besar skenario penulisan umum.