Panduan Eleventy: Rangka Kerja-Agnostik Penjana Tapak

Eleventy (11ty): Penjana tapak statik node.js untuk penciptaan laman web tanpa tenaga

Eleventy, Penjana Tapak Statik Node.js Popular (SSG), memudahkan penciptaan laman web statik. SSGS melakukan kebanyakan rendering semasa proses membina, menghasilkan fail HTML, CSS, dan JavaScript statik. Ini menghapuskan kebergantungan pelayan seperti runtime dan pangkalan data.

Kelebihan Utama:

• hosting yang dipermudahkan: hanya melayani fail html membuat hosting lurus.
• keselamatan yang dipertingkatkan: ketiadaan komponen sisi pelayan meminimumkan kelemahan keselamatan.
• Prestasi yang luar biasa: fail statik membawa kepada masa pemuatan yang lebih cepat.

populariti Eleventy telah berkembang dengan ketara, menarik tokoh -tokoh yang menonjol dalam pembangunan web. Walaupun sesuai untuk laman web dan blog yang berfokus pada kandungan, ia boleh disesuaikan dengan platform e-dagang dan sistem pelaporan.

Tutorial ini menunjukkan membina laman web asas menggunakan Eleventy, mempamerkan keupayaannya melampaui penukaran Markdown-to-HTML yang mudah. Ia menggambarkan bagaimana Eleventy boleh berfungsi sebagai sistem binaan lengkap, menghapuskan keperluan untuk alat berasingan seperti skrip NPM, webpack, atau gulp.js, sementara masih membolehkan pembentukan automatik dan muat semula secara langsung.

Ciri -ciri & Keupayaan Utama:

• node.js Foundation: Leverages node.js untuk penjanaan fail statik yang cekap.
• Sokongan Enjin Templating: menawarkan fleksibiliti dengan pelbagai enjin templat, termasuk nunjucks, untuk integrasi kandungan dinamik.
Rangka Kerja Agnostik:
• tidak mandat kerangka JavaScript tertentu (walaupun integrasi dengan react atau vue.js mungkin).
Persediaan yang diselaraskan:
• melibatkan membuat projek node.js, memasang sebelas, menentukan struktur direktori, dan mengkonfigurasi direktori input/output.
Live Reloading:
• Menggunakan BrowserSync untuk kemas kini masa nyata semasa pembangunan.
Ciri -ciri lanjutan:
• Menyokong penciptaan menu navigasi (menggunakan plugin navigasi), transformasi aset, dan pengoptimuman imej melalui templat JavaScript.
Pengurusan Kandungan:
• dengan cekap menguruskan artikel melalui koleksi, membolehkan penomboran, penapis tersuai, dan pengoptimuman pengeluaran.
rangka kerja JavaScript: perlu atau tidak?

Walaupun sesetengah SSG mengintegrasikan kerangka JavaScript sisi pelanggan (React, Vue.js), sebelas tidak memerlukannya. Kecuali membina aplikasi yang kompleks (dalam hal ini SSG mungkin bukan pilihan yang optimum), rangka kerja JavaScript mungkin tidak perlu.

Contoh praktikal: Membina laman web mudah

Tutorial ini membimbing anda melalui membuat laman web dengan halaman dan catatan blog, tugas yang sering dikendalikan oleh platform seperti WordPress. Kod lengkap boleh didapati di . Anda boleh mengklon, memasang, dan menjalankannya menggunakan arahan ini:

<code class="language-bash">git clone https://www.php.cn/link/6ec3ff0c922ce84561ce5162f912b47e
cd 11ty-starter
npm i
npx eleventy --serve</code>

mengakses laman web di

. http://localhost:8080

Bahagian berikut terperinci membina tapak dari awal.

(selebihnya tutorial akan mengikuti, menyesuaikan teks asal dengan cara yang sama untuk mengekalkan makna asal semasa mengubah struktur kata dan kalimat.)

ingat untuk menyimpan semua imej dan format asalnya sebagai mengikut arahan anda.

Atas ialah kandungan terperinci Panduan Eleventy: Rangka Kerja-Agnostik Penjana Tapak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!