Un démarreur Eleventy avec CSS de vent arrière et Alpine.js

Cet article détaille une approche rationalisée pour créer un site Web personnel utilisant Eleventy, Tailwind CSS et Alpine.js, mettant l'accent sur la simplicité et la conception minimale. Au lieu d'utiliser des démarreurs existants et potentiellement complexes, ce guide vous guide à travers une configuration simple.

Prérequis: Familiarité avec CSS Tailwind, HTML, JavaScript, Nunjucks Memplating Engine, la ligne de commande et NPM est supposé.

Étape 1: Configuration du projet

Créez un nouveau répertoire de projet, accédez à celui-ci dans votre terminal et initialisez un fichier package.json :

 npm init -y

Installez CSS Eleventy et Tailwind:

 NPM Install -d @ 11ty / eleventy tailwindcss @ dernier

Étape 2: Création d'une page de test

Créer index.njk (la page d'accueil) et _includes/default.njk (le modèle de base). index.njk étendra default.njk :

 
{% étend "_incluses / default.njk"%}

{% Block Title%} Cela fonctionne {% endblock%}

{% Block Content%}
  <div>
    <div>
      Bonne conception<br><br>
      est<br><br>
      comme peu de design<br><br>
      comme possible
    </div>
  </div>
{% endblock%}

 



  <title>{% Block Title%} Cela fonctionne-t-il? {% Endblock%}</title>
  <meta charset="UTF-8">
  {% si description%}
    <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">
  {% Block Head%} {% Endblock%}


  {% Block Content%}
    {{Content | sûr }}
  {% endblock%}

Étape 3: Configuration CSS de vent arrière

Créer styles/tailwind.config.js et styles/tailwind.css :

 // styles / tailwind.config.js
module.exports = {
  Contenu: ['_site / ** / *. html'],
  Safelist: [],
  thème: {
    étendre: {
      Couleurs: {
        Changement: «transparent»,
      },
    },
  },
  Plugins: [],
}

 // styles / tailwind.css
@tailwind base;
@tailwind composants;
@tailwind utilitaires;

@layer Utilities {
  .changement {
    Couleur: transparent;
  }
}

Étape 4: Configuration du projet et construction

Créer .gitignore pour exclure les fichiers inutiles:

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

Créer .eleventy.js pour configurer Eleventy:

 const htmlmin = requis ('html-minificier');
const Now = String (date.Now ());

module.exports = fonction (eleventyconfig) {
  eleventyconfig.addwatchtarget ('./ styles / tailwind.config.js');
  eleventyConfig.addwatchTarget ('./ Styles / tailwind.css');
  eleventyConfig.addpassthroughcopy ({'./_tmp/style.css': './style.css'});
  eleventyConfig.addshortcode ('version', function () {return now;});

  eleventyConfig.addtransform ('htmlmin', fonction (contenu, outputpath) {
    if (process.env.eleventy_production && outputpath && outputpath.endswith ('. html')) {
      return htmlmin.minify (contenu, {USeshortDocType: true, reposocoments: true, collapsewhitespace: true});
    }
    retourner le contenu;
  });
};

Mettre à jour package.json avec les scripts de construction:

 {
  "scripts": {
    "Démarrer": "Eleventy --serve & npx tailwindcss -i styles / tailwind.css -c styles / tailwind.config.js -o _site / style.css --watch",
    "build": "eleventy_production = true eleventy && node_env = production npx tailwindcss -i styles / tailwind.css -c styles / tailwind.config.js -o _site / style.css - minify"
  },
  "DevDependces": {
    "@ 11ty / eleventy": "^ 1.0.0",
    "Tailwindcss": "^ 3.0.0",
    "html-minificier": "^ 4.0.0"
  }
}

Exécutez npm install , puis npm start pour démarrer le serveur de développement. Testez la réactivité de Tailwind en modifiant tailwind.config.js et tailwind.css . Exécutez npm run build pour une construction de production.

Étape 5: Intégration d'Alpine.js

Installer Alpine.js:

 NPM INSTALL -D ALPINEJS

Mettre à jour .eleventy.js pour copier Alpine.js:

 // ... (Contenu .Eleventy.js précédent) ...
eleventyconfig.addpassthroughcopy ({'./node_modules/alpinejs/dist/cdn.js': './js/alpine.js'});
// ... (Reste de .Eleventy.js Contenu) ...

Ajouter alpine.js à _includes/default.njk avant la clôture

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!