Siap 👍 ini saya buatkan contoh nyata + siap pakai untuk semua kondisi yang kamu minta:

• data:view.isHomepage

• data:view.isPost

• data:view.isPage

• data:view.isLabelSearch

Sekalian saya buat clean & scalable seperti template premium 🔥

---

🎯 1. CONTOH PALING LENGKAP (RECOMMENDED)

Ini bisa langsung kamu pakai di wrapper utama:

<div expr:class='
  data:view.isHomepage 
    ? "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" 
  : data:view.isPost 
    ? "max-w-3xl mx-auto prose lg:prose-lg" 
  : data:view.isPage 
    ? "max-w-4xl mx-auto" 
  : data:view.isLabelSearch 
    ? "grid grid-cols-2 md:grid-cols-3 gap-6" 
  : "container mx-auto"
'/>

---

🧠 Penjelasan:

Kondisi	Hasil
Homepage	Grid 4 kolom
Post	Artikel fokus (prose)
Page	Halaman statis lebar
Label	Grid tapi lebih simpel
Default	fallback

---

🎯 2. CONTOH KHUSUS GRID (HOMEPAGE & LABEL)

Kalau kamu mau homepage & label sama-sama grid:

<div expr:class='
  data:view.isHomepage || data:view.isLabelSearch
    ? "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
    : "max-w-3xl mx-auto"
'/>

---

🎯 3. CONTOH DI <main> (REAL CASE BLOG)

<main expr:class='
  data:view.isPost 
    ? "lg:col-span-2" 
  : data:view.isHomepage 
    ? "" 
  : data:view.isPage 
    ? "max-w-4xl mx-auto" 
  : ""
'/>

---

🎯 4. CONTOH UNTUK CARD (POST STYLE BERBEDA)

<article expr:class='
  data:view.isHomepage 
    ? "bg-white rounded-xl shadow p-4 hover:shadow-lg" 
  : data:view.isPost 
    ? "prose max-w-none" 
  : data:view.isLabelSearch 
    ? "bg-white shadow p-3" 
  : "p-4"
'/>

---

🎯 5. CONTOH BODY CLASS (PRO LEVEL)

Ini sering dipakai template mahal 👇

<body expr:class='
  data:view.isHomepage ? "home" :
  data:view.isPost ? "post" :
  data:view.isPage ? "page" :
  data:view.isLabelSearch ? "label" :
  "default"
'/>

👉 Nanti kamu bisa styling via CSS:

.home { background:#f3f4f6; }
.post { background:#ffffff; }

---

🎯 6. CONTOH KOMBINASI GRID + SIDEBAR

<div expr:class='
  data:view.isPost 
    ? "grid grid-cols-1 lg:grid-cols-3 gap-8"
    : "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
'/>

---

⚠️ TIPS PENTING

❗ Urutan kondisi itu penting

➡️ Blogger baca dari kiri ke kanan

---

❗ Jangan pakai terlalu banyak nested

❌ Ribet & rawan error

---

❗ Gunakan fallback di akhir

: "default-class"

---

🚀 BONUS POLA TEMPLATE PREMIUM

Biasanya pakai ini:

<div expr:class='
  data:view.isHomepage 
    ? "home-grid" 
  : data:view.isPost 
    ? "post-layout" 
  : data:view.isLabelSearch 
    ? "label-grid" 
  : "page-layout"
'/>

👉 Lalu styling di CSS → lebih rapi & scalable

---

🎯 KESIMPULAN

Kamu bisa pakai:

✔ Homepage → grid
✔ Post → artikel fokus
✔ Page → lebar
✔ Label → grid juga

Semua dalam 1 expr:class

---

🔥 MAU NAIK LEVEL?

Kalau kamu mau, saya bisa bantu:

• bikin homepage ada featured post besar

• grid + slider (kayak blog berita)

• layout beda tiap kategori

👉 bilang saja:
"buat homepage ala blog berita" 🚀