Twelvety
v1.4.1
Voir le site de démonstration
Douze ans est un projet de starter préconfiguré de l'Eleventy construit pour être rapide. Il comprend:
Écrivez des composants comme ceci:
< main class =" home " >
< h1 class =" home__title " > Twelvety </ h1 >
</ main >
{% stylesheet 'scss' %}
@import "mixins";
.home {
@include container;
&__title {
color: red;
}
}
{% endstylesheet %}
{% javascript %}
console.log("Super fast ?");
{% endjavascript %}Pour déployer rapidement votre propre instance de douze ans à Netlify, cliquez simplement sur le bouton ci-dessous et suivez les instructions.
Que se passera-t-il lorsque je cliquerai sur ce bouton? Netlify clonera le référentiel GIT de douze ans à votre compte GitHub (il vous demandera la permission de le faire), ajouter le nouveau référentiel à votre compte NetLify et le déployer!
Cliquez sur le bouton Utiliser ce modèle en haut de ce référentiel pour faire votre propre référentiel de douze dans votre compte GitHub. Clone ou téléchargez votre nouveau référentiel de douze ans sur votre ordinateur.
Vous aurez besoin de node.js et npm (inclus avec node.js). Pour installer les packages requis, exécutez
npm installnpm run serve pour exécuter un serveur de développement et une recharge en directnpm run build pour construire pour la productionnpm run clean pour nettoyer le dossier de sortie et le cache de douze Le cerveau de douze ans en direct dans le dossier utils : si vous voulez simplement faire un site Web, vous n'avez pas besoin de toucher quoi que ce soit à l'intérieur utils . Cependant, si vous voulez changer l'un des shortcodes, jetez un coup d'œil!
Douze configuration des transformations, des shortcodes et quelques options de surintensités sensibles. Cliquez sur les fonctionnalités ci-dessous pour savoir comment ils fonctionnent.
stylesheet Utilisez le raccourci apparié de stylesheet pour inclure votre SASS. Vous pouvez importer des fichiers SASS à partir de votre répertoire styles (défini dans .twelvety.js ) et à partir de node_modules . Le SASS sera rendu à l'aide de DART-SASS, transmis dans PostCSS (avec PostCSS Preset Env and Autoprefixer pour la compatibilité) et soit minifié à l'aide de Clean-CSS ou embelli par JS BEADific (en production et développement respectivement).
{% stylesheet 'scss' %}
@import "normalize.css/normalize";
@import "mixins";
.home {
@include container;
color: $color--red;
}
{% endstylesheet %} Le deuxième paramètre du shortcode apparié de stylesheet est la langue; Actuellement, cela ne fait rien et est inclus uniquement pour s'aligner sur la définition de Shopify du shortcode. Si vous souhaitez utiliser la syntaxe en retrait SASS, vous pouvez modifier l'option de douze indentedSass , trouvée dans .twelvety.js .
Le raccourci apparié stylesheet a également un troisième paramètre, qui par défaut est défini sur page.url , l'URL de la page actuelle est rendue. Cela signifie que seul le CSS requis est inclus dans chaque page. Vous pouvez créer votre propre «morceau» de CSS en utilisant ce paramètre, par exemple, un fichier CSS commun à toutes les pages de votre site Web.
styles Le shortcode styles rassemble tous les sass écrits en saccordement apparié de stylesheet pour le morceau donné et publie le CSS rendu. Le «morceau» par défaut page.url , l'URL de la page actuelle est rendue.
<!-- Inline all styles on current page -->
< style >
{% styles page.url %}
</ style >
<!-- Capture styles on current page -->
{% capture css %}
{% styles page.url %}
{% endcapture %}
<!-- And output asset using `asset` shortcode -->
< link rel =" stylesheet " href =" {% asset css, 'css' %} " /> Notez que le raccourci styles doit être placé sous n'importe quelle stylesheet appariée shortcodes dans le modèle; Voir le raccourci append et transformer pour plus d'informations.
javascript Incluez votre JavaScript à l'aide du shortcode apparié javascript . Douze utilise Browserify afin que vous puissiez require('modules') et Babel afin que vous puissiez utiliser le dernier JavaScript. Votre JavaScript sera ensuite minifié à l'aide de UGLIFY en production ou embelli par JS BEADific dans le développement.
{% javascript %}
const axios = require("axios");
axios.get("/api/endpoint")
.then((response) = > {
console.log("Yay, it worked!");
})
.catch((error) = > {
console.log("Uh oh, something went wrong");
});
{% endjavascript %} Le shortcode apparié javascript a un deuxième paramètre, qui par défaut est défini sur page.url , l'URL de la page actuelle est rendue. Cela signifie que seul le JavaScript requis est inclus dans chaque page. Vous pouvez créer votre propre «morceau» de JavaScript en utilisant ce paramètre, par exemple, un fichier JavaScript pour tout le code du fournisseur.
La sortie de chaque raccourci apparié javascript sera enveloppée dans un iife afin que vos variables ne polluent pas la portée globale. Si vous souhaitez définir quelque chose sur window , utilisez window.something = .
script shortcode Le shortcode script recueille tous les javascript pour le morceau donné et publie le javascript (après transpilation et minification). Le «morceau» par défaut page.url , l'URL de la page actuelle est rendue.
<!-- Inline all JavaScript on current page -->
< script >
{ % script page . url % }
</ script >
<!-- Capture JavaScript on current page -->
{% capture js -%}
{% script page.url %}
{%- endcapture -%}
<!-- And output asset using `asset` shortcode -->
< script src =" {% asset js, 'js' %} " defer > </ script > Notez que le shortcode script doit être placé sous tous les codes shorts appariés javascript dans le modèle; Habituellement, ce n'est pas un problème car JavaScript est souvent inclus immédiatement précédant </body> . Si vous voulez le JavaScript ailleurs, consultez le raccourci append et transformez.
asset Le raccourci de asset sortira un actif coiffé de contenu avec le contenu et l'extension donné. Le contenu peut être une String ou Buffer . Les actifs seront enregistrés dans le répertoire assets à l'intérieur du répertoire output (tous deux définis dans .twelvety.js ).
<!-- Capture some content -->
{% capture css %}
h1 {
color: red;
}
{% endcapture %}
<!-- Save content to content-hashed file with .css extension -->
< link rel =" stylesheet " href =" {% asset css, 'css' %} " />
<!-- Output of shortcode -->
< link rel =" stylesheet " href =" /_assets/58f4b924.css " /> Vous pouvez importer la fonction Shortcode asset dans JavaScript: c'est ainsi que le shortcode picture enregistre vos images réactives dans le répertoire assets .
picture Shortcode Le shortcode picture prend les paramètres src et alt et publie un élément d'image réactif avec la prise en charge AVIF * et WebP. Vos images doivent être stockées dans le répertoire images , définies dans .twelvety.js . Douze ans enregistreront les images sorties dans le répertoire assets à l'intérieur du répertoire output (tous deux définis dans .twelvety.js ). Le shortcode picture prend également deux autres paramètres: sizes qui par défaut sont à 90vw, (min-width: 1280px) 1152px , en fonction des tailles de point d'arrêt; et loading qui par défaut est lazy , peut également être eager .
* AVIF est désactivé par défaut en raison des temps de construction longs. Vous pouvez l'activer dans .twelvety.js .
<!-- Picture shortcode with src, alt, sizes and loading -->
{% picture 'car.jpg', 'Panning photo of grey coupe on road', '90vw', 'eager' %}
<!-- Absolute paths also work -->
{% picture '/src/_assets/images/car.jpg', 'Panning photo of grey coupe on road', '90vw', 'eager' %}
<!-- Output of shortcode -->
< picture style =" background-color:rgb(38%,28%,26%);padding-bottom:50% " >
< source srcset =" /_assets/2263c1d0.avif 320w,/_assets/519fcdec.avif 640w,/_assets/b59349f7.avif 960w,/_assets/e8dae22f.avif 1280w,/_assets/4ba755ff.avif 1600w,/_assets/87c06dd1.avif 1920w " sizes =" 90vw " type =" image/avif " >
< source srcset =" /_assets/0e7cdd2f.webp 320w,/_assets/ba4e43dd.webp 640w,/_assets/bc541ea5.webp 960w,/_assets/6d620165.webp 1280w,/_assets/756857ea.webp 1600w,/_assets/483e9c95.webp 1920w " sizes =" 90vw " type =" image/webp " >
< source srcset =" /_assets/6a3b0321.jpeg 320w,/_assets/2bf90b83.jpeg 640w,/_assets/4a810813.jpeg 960w,/_assets/601b629c.jpeg 1280w,/_assets/c39ac58c.jpeg 1600w,/_assets/25a2b530.jpeg 1920w " sizes =" 90vw " type =" image/jpeg " >
< img src =" /_assets/25a2b530.jpeg " alt =" Panning photo of grey coupe on road " width =" 2400 " height =" 1200 " loading =" lazy " >
</ picture > Le shortcode picture utilise un chargement paresseux natif, mais il serait facile d'ajouter la prise en charge lazysizes ou d'une bibliothèque similaire si vous le souhaitez. Le shortcode picture calcule la couleur moyenne de l'image à afficher tandis que l'image se charge, en utilisant padding-bottom pour éviter le décalage de mise en page.
Le shortcode picture est automatiquement utilisé pour chaque image de Markdown. Pour désactiver cela, vous devrez modifier l'instance de Markdown-it (voir la fonctionnalité Markdown).
<!-- Automatically uses picture shortcode -->
![ Panning photo of grey coupe on road ] ( car.jpg ) Les images publiées par le shortcode picture sont mises en cache. Si vous souhaitez effacer le cache, supprimez .twelvety.cache (juste un fichier JSON) ou exécutez npm run clean pour supprimer le cache et le répertoire de sortie. Si vous supprimez le répertoire de sortie mais .twelvety.cache , les choses vont se casser.
append un raccourci apparié et transformer D'accord, le voici: le seul gotcha avec douze ans. Pour que le raccourci styles fonctionne, il doit venir après toutes les codes de saccordement appariés stylesheet , qui seraient généralement dans le body . Cependant, nous voulons que notre CSS soit lié ou incliné dans la head . C'est là que le shortcode et la transformation appariés append an, pour déplacer la sortie du raccourci des styles , dans la head où nous le voulons.
<!DOCTYPE html >
< html lang =" en " >
< head >
<!-- Everything in append paired shortcode will be moved here -->
</ head >
< body >
<!-- Stylesheet paired shortcodes can go here -->
...
<!-- Append paired shortcode with styles inside -->
{% append 'head' %}
< style >
{% styles page.url %}
</ style >
{% endappend %}
</ body >
</ html > Le raccourci append par annexe sera en fait remplacé par un template . La transformée append utilise ensuite JSDom pour ajouter le contenu du template au sélecteur donné (dans ce cas, head ).
Le même problème existe pour le shortcode script , cependant, ce n'est pas un tel problème car il est très courant d'inclure de toute façon JavaScript du fond du body .
markdownDouze définissent sa propre instance de Markdown-it. Les options de configuration sont:
{
html : true ,
breaks : true ,
typographer : true
} La douze modifie également la règle image du rendu: au lieu de sortir un élément img , douze utilise le shortcode picture réactif pour rendre chaque image. Si vous souhaitez désactiver cela, supprimez les lignes suivantes dans utils/markdown.js .
md . renderer . rules . image = function ( tokens , index ) {
const token = tokens [ index ] ;
const src = token . attrs [ token . attrIndex ( "src" ) ] [ 1 ] ;
const alt = token . content ;
return pictureShortcode ( src , alt ) ;
} ; La douze ajoute également un shortcode apparié de markdown qui utilise la configuration de Markdown-IT.
{% markdown %}
# `markdown` paired shortcode
Lets you use **Markdown** like _this_.
{% endmarkdown %}Ceci est également très utile pour inclure des fichiers Markdown dans un modèle.
{% markdown %}
{%- include 'content.md' -%}
{% endmarkdown %} Faites attention aux pièges communs des blocs de code en retrait lorsque vous utilisez le raccourci apparié markdown . Si les blocs de code en retrait deviennent une nuisance, vous pouvez les désactiver dans utils/markdown.js tout en conservant les blocs de code clôturés.
// Uncomment the following line to disable indented code blocks
- // .disable("code")
+ .disable("code")criticalAu lieu d'utiliser une transformée, douze utilise désormais des CSS de Eleventy-Critical pour extraire et en ligne CSS à chemin critique à chaque page.
format Le format transformée embellit HTML en développement à l'aide de JS Embellificer et minifie HTML en production en utilisant du htmlminificier. Tout CSS et JavaScript en ligne seront également emballés ou minifiés.
Si vous utilisez Visual Studio Code, je recommande cette extension liquide afin que votre Sass et JavaScript soient correctement mis en évidence.
