Keystone terlihat ketinggalan jaman saat ini, saya sarankan Anda melihat Astro atau Vite saja.
Keystone adalah generator situs statis yang ideal untuk membangun situs web kecil dengan cepat. Tidak diperlukan pengaturan, dan kumpulan fitur praktis diaktifkan secara default.
/public
dan Anda siap berangkatBuat direktori baru dan jalankan perintah berikut untuk mengatur Keystone, package.json, & git. Node 14.xx diperlukan.
$ npm install keystone-ssg
Bagus, Anda sudah terpasang!
Mulai server pengembangan Keystone, lalu buka http://localhost:8080 untuk melihat situs web contoh.
$ npm run dev
Proyek ini dibangun di dalam folder /public
setelah menjalankan perintah, siap untuk diunggah.
$ npm run build
Ada enam direktori penting dalam proyek Keystone, masing-masing memiliki tujuannya sendiri:
Setiap file HTML .html
& markdown .md
di folder halaman berhubungan dengan halaman di situs web Anda. Ada dua file dalam contoh proyek di sini, coba buka index.html
. Perutean otomatis akan menggabungkan file ke folder /public
saat menjalankan npm run build
seperti:
/pages/index.html -> /public/index.html
/pages/example.md -> /public/example/index.html
Anda mungkin telah memperhatikan bahwa index.html
memiliki tag berikut: <_template basic.html />
. Ini menempatkan konten index.html
di dalam file templat yang ditempatkan di /templates/basic.html
. Format tag HTML khusus ini juga berfungsi di dalam file .md
.
Templat dapat digunakan dengan /pages
untuk menyediakan kerangka siap pakai untuk halaman Anda. Gunakan tag <_slot />
dalam file templat untuk memberikan titik masuk bagi konten Anda. Buka /templates/basic.html
dan cari:
< _var title default="Keystone default title" />
Ini adalah slot variabel, bernama title
, dalam file templat, dengan nilai default opsional.
Menggunakan yang berikut ini sebagai tag templat di dalam /pages
akan memungkinkan Anda memasukkan nilai khusus ke dalam templat, dari halaman konten:
< _template basic.html title="A custom title" />
Folder /components
hanya digunakan untuk komponen yang dapat digunakan kembali. Tag <_import>
digunakan untuk mengimpor komponen ke dalam file HTML lain, contohnya ada di dalam /templates/basic.html
.
< _import header.html />
Tag <_import>
juga dapat digunakan untuk mengimpor konten jenis file lainnya (JS, SCSS, dll), setelah menggabungkan sumbernya terlebih dahulu.
Tempatkan file Javascript di dalam folder /src
. Tag berikut akan dikonversi menjadi tag impor <script>
biasa, yang tertaut ke file Anda /src/main.js
:
< _script main.js />
Impor ES6 didukung sepenuhnya, dan file yang dihasilkan akan ditranspilasi dengan Babel, dibundel dengan Rollup, dan diperkecil.
Folder /styles
digunakan untuk CSS/SCSS Anda. Tag berikut akan dikonversi menjadi tag impor css <link>
biasa, yang ditautkan ke file /styles/main.scss
yang telah Anda kompilasi:
< _style main.scss />
Semua fitur node-sass
didukung penuh, termasuk @import
.
Aset statis ditempatkan di sini, yaitu font, gambar, ikon. Segala sesuatu di sini akan ditransfer ke folder yang sesuai di direktori root, misalnya:
/assets/favicon.ico -> /public/favicon.ico
/assets/fonts/fontname.ttf -> /public/fonts/fontname.ttf
<_template src='myfolder/myfile.html' />
.package.json
, jangan gunakan garis miring awal kecuali Anda ingin mengakses file di luar proyek..keystone-page-loading
disetel ke display: block
. Jika kelas diatur ke display: none
di CSS, ini dapat digunakan untuk membuat indikator pemuatan.search.json
, di direktori root. Ini adalah array JSON yang berisi objek untuk setiap halaman, mencantumkan konten teks, judul, dan jalur halaman.public
diabaikan oleh Git, hapus baris public
dari .gitignore
jika Anda ingin menggunakannya untuk mengkomitnya ke Git. package.json
dengan versi yang Anda perbarui dan jalankan npm install keystone-ssg
, untuk peningkatan cepat.Menandai | Keterangan | Atribut |
---|---|---|
<_template> | Impor file saat ini ke <_slot> di dalam file templat | [nama file], [nama variabel], src |
<_slot> | Digunakan dalam file templat sebagai titik masuk untuk file yang diimpor | Tidak ada |
<_var> | Digunakan dalam file template untuk digantikan dengan variabel yang diambil dari <_template> | [nama variabel], default |
<_import> | Mengimpor komponen | [nama file], src |
<_script> | Membuat tag <script> yang menghubungkan ke skrip yang dibundel | [nama file], src |
<_style> | Membuat tag <link> yang menghubungkan ke file css yang dibundel | [nama file], src |
Memerintah | Keterangan | Perbedaan keluaran |
---|---|---|
npm run dev | Membangun situs web untuk pengembangan, lalu memulai server pengembangan Keystone. |
|
npm run build | Membangun situs web untuk produksi. |
|
File konfigurasinya adalah keystone.config.js
Pilihan | Keterangan | Bawaan |
---|---|---|
tautan dinamis | Mengaktifkan tautan lokal yang dimuat secara dinamis di situs web Keystone Anda, tanpa perlu penyegaran | BENAR |
file pencarian | Menghasilkan search.json di direktori root | BENAR |
jalur indeks | Direktori root situs web Anda | '/' |
pelabuhan | Port server pengembang, localhost: 8080 | 8080 |
pelabuhan | Port kedua yang digunakan untuk server dev | 8081 |
devServerIp | Lokasi server pengembang, localhost :8080. Ganti dengan IP lokal perangkat Anda untuk melihat server dev di perangkat lokal (contoh: '192.168.1.103'). | 'host lokal' |
menonton | Direktori diawasi oleh server pengembang Keystone, yang akan memaksa kompilasi ulang dan penyegaran halaman saat file diedit | ['templat', 'halaman', 'aset', 'komponen', 'src', 'gaya'] |
membangun | Direktori halaman konten | 'halaman' |
dilayani | Direktori yang berisi situs web yang dihasilkan | 'publik' |
kompilasi ulang penuh | Paksa kompilasi ulang penuh semua file setelah setiap perubahan file dalam mode pengembangan | PALSU |
| empty-keystone-project
--| .git/
--| assets/
--| components/
--| pages/
--| src/
--| styles/
--| templates/
--| keystone.config.js
--| package.json
--| package-lock.json
Jika Anda mengalami PLUGIN_ERROR setelah menginstal dan menjalankan contoh, ini adalah masalah Babel, jalankan perintah berikut untuk memperbaikinya:
npm install @babel/core @babel/preset-env --save-dev