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-zenLalu, 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.htmlmenjadiindex.html -
pages/about.htmlmenjadiabout.html -
pages/kelas/satu.htmlmenjadikelas/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
@endcomponentMemanggil 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>
@endsectionMenggunakan Markdown (plus Shiki)
@markdown
# Judul
Ini adalah isi. _Tulisan miring_ **tebal**
@endmarkdownMenggunakan 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
classyang 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}"
}
}
}
}