Starter sebelas dengan css tailwind dan alpine.js

Artikel ini memperincikan pendekatan yang diperkemas untuk membina laman web peribadi menggunakan Eleventy, Tailwind CSS, dan Alpine.js, menekankan kesederhanaan dan reka bentuk yang minimum. Daripada menggunakan permulaan yang sedia ada, berpotensi kompleks, panduan ini membimbing anda melalui persediaan yang mudah.

Prasyarat: kebiasaan dengan CSS Tailwind, HTML, JavaScript, enjin templat nunjucks, baris arahan, dan NPM diandaikan.

Langkah 1: Persediaan Projek

Buat direktori projek baru, navigasi ke dalam terminal anda, dan mulakan fail package.json :

 npm init -y

Pasang CSS Eleventy dan Tailwind:

 NPM Install -d @11ty/Eleventy Tailwindcss @terbaru

Langkah 2: Membuat halaman ujian

Buat index.njk (laman utama) dan _includes/default.njk (template asas). index.njk akan melanjutkan default.njk :

 
{ % memanjangkan "_includes/default.njk" %}

{ % blok tajuk %} ia berfungsi { % endblock %}

{ % blok kandungan %}
  <div>
    <div>
      Reka bentuk yang baik<br><br>
      adalah<br><br>
      sebagai reka bentuk yang sedikit<br><br>
      sebaik mungkin
    </div>
  </div>
{ % endblock %}

 



  <title>{ % blok tajuk %} adakah ia berfungsi? { % endblock %}</title>
  <meta charset="UTF-8">
  { % jika keterangan %}
    <meta content="{{description}}" name="description">
  { % endif %}
  <meta content="ie=edge" http-equiv="x-ua-compatible">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" name="viewport">
  <link href="/style.css?v=%7B%%20version%20%%7D" rel="stylesheet">
  { % blok kepala %} { % endblock %}


  { % blok kandungan %}
    {{Content | selamat}}
  { % endblock %}

Langkah 3: Konfigurasi CSS Tailwind

Buat styles/tailwind.config.js dan styles/tailwind.css :

 // gaya/tailwind.config.js
modul.exports = {
  Kandungan: ['_site/**/*. html'],
  Safelist: [],
  Tema: {
    extend: {
      Warna: {
        Perubahan: 'telus',
      },
    },
  },
  Plugin: [],
}

 // gaya/tailwind.css
@TailWind Base;
@TailWind komponen;
@TailWind Utilities;

@Layer Utilities {
  .change {
    warna: telus;
  }
}

Langkah 4: Konfigurasi Projek dan Bina

Buat .gitignore untuk mengecualikan fail yang tidak perlu:

 <code>_site/ .DS_Store node_modules/</code>

Buat .eleventy.js untuk mengkonfigurasi Eleventy:

 const htmlmin = memerlukan ('html-minifier');
const now = string (date.now ());

modul.exports = fungsi (EleventyConFig) {
  EleventyConfig.AddWatchTarget ('./ Styles/tailwind.config.js');
  EleventyConfig.AddWatchTarget ('./ Styles/Tailwind.css');
  EleventyConfig.addpassthroughcopy ({'./_tmp/style.css': './style.css'});
  EleventyConFig.AddShortCode ('versi', fungsi () {return now;});

  ELEVENTYCONFIG.ADDTRANSFORM ('htmlmin', fungsi (kandungan, outputPath) {
    jika (process.env.eleventy_production && outputPath && outputpath.endswith ('. html')) {
      kembali htmlmin.minify (kandungan, {useshortdoctype: true, penyingkiran: benar, collapsewhitespace: true});
    }
    Kandungan kembali;
  });
};

Kemas kini package.json dengan skrip binaan:

 {
  "Skrip": {
    "Mula": "Sebelas -serve & npx tailwindcss -i gaya/tailwind.css -c gaya/tailwind.config.js -o _site/style.css --watch",
    "membina": "Eleventy_production = True Eleventy && node_env = Production NPX TailWindcss -I Styles/Tailwind.CSS -C Styles/Tailwind.Config.js -O _Site/Style.css - -Minify"
  },
  "DevDependency": {
    "@11ty/Eleventy": "^1.0.0",
    "Tailwindcss": "^3.0.0",
    "HTML-Minifier": "^4.0.0"
  }
}

Jalankan npm install dan kemudian npm start memulakan pelayan pembangunan. Ujian kereaktifan Tailwind dengan mengubah tailwind.config.js dan tailwind.css . Jalankan npm run build untuk membina pengeluaran.

Langkah 5: Mengintegrasikan Alpine.js

Pasang Alpine.js:

 Pemasangan NPM -D Alpinejs

UPDATE .eleventy.js Untuk menyalin Alpine.js:

 // ... (sebelumnya .eleventy.js kandungan) ...
Eleventyconfig.addpassthroughcopy ({'./node_modules/alpinejs/dist/cdn.js': './js/alpine.js'});
// ... (selebihnya .eleventy.js kandungan) ...

Tambah alpine.js ke _includes/default.njk sebelum penutupan

Atas ialah kandungan terperinci Starter sebelas dengan css tailwind dan alpine.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!