Mini SSG Zen
Perbedaannya dengan Mini SSG
- Hasil build, minified HTML
- Sudah include dengan Windi CSS
- Bisa main Markdown
- Auto generate sitemap
- Bisa nested/deep partial HTML
Instalasi
Install dengan:
npm i mini-ssg-zen
Lalu, pada package.json
, tambahkan kode berikut:
"scripts": {
"dev": "ssg --watch",
"build": "ssg"
}
Terus, kalau ingin menjalankan mode dev, tinggal jalankan npm run dev
. Untuk build, jalankan aja npm run build
.
Struktur Folder
.
├── dev
│ ├── components
│ ├── imports
│ ├── layouts
│ ├── pages
│ └── static
└── public
File-file utama terletak di folder pages
.
Contoh:
-
pages/index.html
menjadiindex.html
-
pages/about.html
menjadiabout.html
-
pages/kelas/satu.html
menjadikelas/satu.html
Folder layouts
berfungsi untuk meletakkan layout-layout yang akan kita gunakan. Bentuknya adalah HTML.
Folder components
dan imports
berfungsi untuk meletakkan partial HTML. Bentuknya juga HTML.
Folder static
berisi dengan file-file selain file HTML. Jadi, nanti langsung disalin ke folder public
, nggak diolah.
Folder public
adalah hasilnya.
Partial HTML
Memanggil Component
Isi dari dev/components/sidebar.html
:
<div>
@attach(isi)
</div>
Isi dari dev/pages/index.html
:
@component(sidebar)
@slot(isi)
<img src="hello.jpg" alt="">
@endslot
@endcomponent
Memanggil Import
Isi dari dev/imports/head.html
:
<script src="adsense.js"></script>
Isi dari dev/pages/about.html
:
<html>
<head>
@import(head)
</head>
<body>
<p>Halo</p>
</body>
</html>
Memanggil Layout
Isi dari dev/layouts/blog.html
:
<h1>@attach(judul)</h1>
@attach(isi)
Isi dari dev/pages/baca.html
:
@layout(blog)
@section(judul)
Ini adalah Judul
@endsection
@section(isi)
<p>Hello World...</p>
<p>Bagaimana kabarnya?</p>
@endsection
Menggunakan Markdown (plus Shiki)
@markdown
# Judul
Ini adalah isi. _Tulisan miring_ **tebal**
@endmarkdown
Menggunakan Windi
Panggil dulu dengan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="windi.css">
</head>
<body>
</body>
</html>
Inline
<p class="bg-green-500 text-violet-800">Hai...</p>
Apply
<p class="judulnya">Ini adalah Judul</p>
<style lang="windi">
.judulnya {
@apply px-5 py-1 bg-red-300
}
</style>
Buat
class
yang unik karena dia cuma generate satu biji filewindi.css
Generate Sitemap
Buat dulu file mini.json
yang isinya seperti ini:
{
"situs": "https://kucing.com"
}
Lalu, build dengan npm run build
.
Snippet dengan Emmet
{
"config": {
"markup": {
"snippets": {
"attach": "{@attach()}",
"import": "{@import()}",
"layout": "{@layout()\n\n@section()\n\t\n@endsection}",
"section": "{@section()\n\t\n@endsection}",
"markdown": "{@markdown\n\t\n@endmarkdown}",
"component": "{@component()\n\t@slot()\n\t\t\n\t@endslot\n@endcomponent}",
"slot": "{@slot()\n\t\n@endslot}",
"windi": "style[lang=windi]",
"petite": "script>{PetiteVue.createApp({}).mount()\n}"
}
}
}
}