skeleventy

Kerangka Eleventy Starter

Skeleventy memberi Anda dasar yang kuat untuk membangun situs web statis yang cepat dan mudah diakses. Lihat situs demo.

Fitur

• Pipa build yang bersih dan minim dengan SCSS dan campuran Laravel untuk menyusun aset
• Gorko, generator kelas utilitas kecil yang cerdas
• Purgecss untuk menghapus CSS yang tidak digunakan
• Minifier HTML
• Mendukung JavaScript ES2017, dengan kompilasi Babel
• Meta halaman ramah SEO, termasuk grafik terbuka dan twitter
• Gambar Pemuatan Malas
• Navigasi seluler
• Sitemap xml
• Blog yang bersih dan sederhana, dengan kategori dan gambar unggulan

Memulai

Prasyarat

Node v10+

Instalasi

1. Klone The Repo git clone https://github.com/josephdyer/skeleventy.git
2. cd ke folder proyek dan jalankan npm install
3. Mulai server pengembangan lokal dengan menjalankan npm run dev Tip: Eleventy memiliki Reload Langsung yang dipanggang!

Struktur folder

Sebelas

• site/ Berisi semua data, templat, dan konten global
• utilities/ berisi sebelas filters dan transforms pembantu
• Setiap halaman harus memiliki folder masing -masing yang berisi file index.md
• Anda kemudian dapat memilih tata letak yang paling tepat untuk setiap halaman (atau membuat lebih banyak jika perlu)
• Navigasi ditenagai oleh plugin resmi Eleventy Navigation

Aktiva

• css/ untuk CSS yang dikompilasi
• js/ untuk JavaScript yang dikompilasi
• images/ Berisi gambar situs kami, sprite ikon SVG dan folder untuk gambar meta (OG, Twitter dll)

Pipa build

Laravel Mix memberi kami lapisan API yang bagus di atas webpack. Skeleventy menggunakan pengaturan yang sederhana, tetapi Anda dapat memanfaatkan memperluas campuran dengan konfigurasi webpack khusus, pemisahan kode dan plugin seperti PostCSS, jika Anda mau.

Anda akan menemukan SCSS dan JS yang tidak dikompilasi dari situs ini dalam resources/ Di mana Campuran akan menonton direktori ini untuk perubahan apa pun. Kiat: Yang terbaik adalah selalu restart server saat membuat parsial atau folder baru

SCSS

• scss/ disusun menjadi sub folder yang bertentangan
• File _config.scss adalah tempat Anda dapat mengubah warna situs dan kelas utilitas yang dihasilkan oleh Gorko
• Skala tipografi telah diatur menggunakan skala ketiga utama favorit saya.
• Tip: Untuk skala lebih lanjut, lihat skala tipe

Gorko

Saya memutuskan untuk menghapus tailwind demi Gorko, murni karena kesederhanaan dan pemeliharaannya (terutama untuk pengembang yang lebih baru). Tidak memiliki terlalu banyak untuk memulai dan menambahkan apa yang Anda butuhkan, akan mengarah pada basis kode yang lebih sederhana dan lebih dapat dipelihara. Gorko memungkinkan Anda menambahkan taburan kelas utilitas yang dapat digunakan kembali untuk membantu menjaga kode Anda tetap kering. Kredit untuk Andy Bell karena membuat alat kecil yang berguna ini

Javascript

• utilities/ berisi fungsi utilitas/ pembantu global
• modules/ berisi javascript sebenarnya situs Anda, semuanya tetap rapi dan rapi di dalam subfolder modular masing -masing
• Anda dapat mengimpor subfolder ini ke main.js menggunakan import '@modules/example-module'
• Kiat: Anda dapat mengatur alias impor opsional melalui file webpack.mix.js

Catatan tentang gambar responsif

Skeleventy tidak memiliki gambar responsif yang dipanggang, alasan utamanya adalah: yang terbaik menggunakan CDN. Lihat tutorial ini tentang pengaturan Eleventy dengan Cloudinary.