Contoh Format Konten

Paragraf dan penekanan

Tulisan dapat memadukan teks biasa, penekanan kuat, penekanan halus, serta tautan ke dokumentasi Astro. Kalimat yang cukup panjang membantu menguji kenyamanan membaca, pemenggalan baris, dan lebar kolom ketika artikel dibaca pada layar sempit maupun lebar.

Gambar lokal bermakna yang membuka berkas asli di tab baru.

Kolom bacaan yang tenang bukan berarti seluruh kalimat harus pendek. Paragraf ini sengaja memuat gagasan yang lebih panjang: susunan huruf, jarak antarbaris, dan ukuran bidang kosong perlu bekerja bersama agar pembaca dapat mengikuti penjelasan teknis tanpa kehilangan posisi, bahkan setelah beberapa menit membaca tanpa jeda visual yang besar.

Tautan dan istilah teknis

Gunakan kode sebaris untuk nama berkas, perintah singkat, atau pengenal. Untuk input papan ketik, gunakan HTML semantik: tekan Ctrl + C untuk menyalin, lalu Ctrl + V untuk menempelkan. Tombol berlabel panjang seperti Page Down tetap dapat direflow pada ruang sempit. Kode di dalam tautan konfigurasi homepage.postLimit juga harus tetap stabil.

Daftar

Daftar tidak berurutan:

• Gunakan satu kategori per tulisan.
• Gunakan beberapa tagar yang relevan.
• Simpan media di dalam folder publik yang mengikuti slug tulisan:
  • gambar sampul memakai metadata cover;
  • gambar naratif ditulis pada posisi yang sesuai di dalam artikel;
  • teks alternatif menjelaskan informasi visual yang penting.

Daftar berurutan:

1. Tulis konten.
2. Periksa struktur sebelum menerbitkan.
   1. Pastikan judul bagian dimulai dari h2.
   2. Pastikan tanggal tetap berupa string kalender.
3. Jalankan pemeriksaan.
4. Bangun keluaran statis.

Judul tingkat empat

Judul tingkat empat sampai enam tersedia untuk uraian yang benar-benar memerlukan hierarki lebih dalam. Penggunaannya sebaiknya jarang agar struktur artikel tetap mudah dipindai.

Kutipan

Struktur yang sederhana memudahkan penulis memahami hubungan antara konten, media, konfigurasi, dan rute yang dihasilkan.

Kutipan di dalam alur bacaan

Kutipan sebaiknya mendukung uraian, bukan menggantikan seluruh penjelasan. Garis aksen yang tipis cukup membedakannya dari paragraf tanpa menjadikannya panel yang terlalu menonjol.

Tabel

Tabel pada layar sempit

Tabel mempertahankan seluruh kolom dan menyediakan gulir lokal ketika ruang tidak mencukupi. Perilaku itu mencegah tabel memperlebar halaman secara keseluruhan.

Blok kode

Contoh TypeScript

Blok singkat berikut memiliki judul yang aman dan terlihat:

export const siteConfig = {};

Blok TypeScript tanpa judul tetap menampilkan label bahasa yang ringkas:

const greeting = "Selamat datang di Shaurastro";

interface GreetingOptions {
  name: string;
  includeThemeName?: boolean;
}

export function getGreeting(name: string): string {
  return `${greeting}, ${name}.`;
}

export function createGreeting({
  name,
  includeThemeName = true,
}: GreetingOptions): string {
  const introduction = getGreeting(name);

  if (!includeThemeName) {
    return introduction;
  }

  return `${introduction} Tema yang sedang digunakan adalah Shaurastro.`;
}

const examples = ["Pembaca", "Penulis", "Pengelola"];

for (const name of examples) {
  console.log(createGreeting({ name }));
}

const unicodeMessage = "Halo, dunia — selamat membaca 🌿";
const htmlSensitive = "<main aria-label=\"Konten\">& aman</main>";

Contoh CSS

Contoh CSS:

.reading-column {
  inline-size: min(100%, var(--article-width));
  margin-inline: auto;
}

Baris kode panjang

Baris panjang berikut menjadi bahan uji gulir horizontal tanpa memengaruhi salinan kode:

const longExample = "Baris ini sengaja cukup panjang untuk menguji penanganan kode yang melampaui lebar kolom bacaan pada layar sempit.";

Teks polos

Bahasa yang tidak memerlukan penyorotan tetap mendapatkan struktur, nomor baris, dan sumber salinan yang sama:

Baris pertama dengan Unicode: tenang, terang, dan terbaca.


Baris keempat hadir setelah dua baris kosong.

Admonisi

Gambar dan keterangan

Media lokal

Gambar uji lokal di bagian pembuka tulisan ini berada di folder media publik yang mengikuti slug tulisan. Gambar tersebut berbeda dari sampul, tampil secara responsif, dan membuka berkas unggahan asli di tab baru tanpa JavaScript.

![Tokoh fantasi membawa pedang dan api biru di tengah hutan](/uploads/posts/contoh-format-konten/gambar-artikel.jpeg)
*Gambar lokal bermakna yang membuka berkas asli di tab baru.*

Fixture berikut memakai aset lokal yang sama untuk memastikan tautan buatan penulis tetap berwenang dan gambar dekoratif tidak memperoleh tautan baru:

[![Tampilan tulisan yang membuka sumber gambar lain](/uploads/posts/contoh-format-konten/cover.png)](https://example.com/gambar-asli/)

![Tampilan arsip tulisan pada layar lebar](/uploads/posts/contoh-format-konten/cover.png)

Gambar publik biasa ditautkan ke aset sumber beresolusi penuh yang sama tanpa salinan keluaran tambahan.

Struktur judul dan daftar isi

Daftar isi memakai metadata judul yang dihasilkan Astro. Hanya h2 dan h3 yang masuk ke dalam susunannya; judul tingkat lain tetap tersedia di artikel tetapi tidak memenuhi syarat sebagai tautan daftar isi.

Judul dengan penekanan

Format sebaris di dalam judul tetap menghasilkan teks daftar isi yang aman. Komponen hanya menampilkan teks judul yang sudah dinormalisasi dan tidak menyalin markup HTML dari artikel.

Judul berulang

Astro memberikan ID stabil dan unik ketika teks judul yang sama muncul lebih dari sekali. Tautan daftar isi memakai ID tersebut, bukan membentuk slug baru.

Judul berulang

Bagian kedua dengan teks yang sama menguji bahwa target tautan tidak bertumpuk. Teks boleh sama, tetapi setiap tujuan jangkar tetap berbeda.

Pemeriksaan akhir

Bagian terakhir membantu memeriksa bahwa penanda aktif dapat mencapai tautan terakhir saat pembaca berada mendekati akhir artikel. Periksa juga bahwa daftar isi tetap dapat digulir sendiri tanpa mengubah posisi gulir halaman.

Garis horizontal di atas mengakhiri rangkaian format dasar.