Twelvety
v1.4.1
Ver el sitio de demostración
Twelvety es un proyecto de inicio preconfigurado construido para ser rápido. Incluye:
Escriba componentes como este:
< 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 %}Para implementar rápidamente su propia instancia de Doce para Netlify, simplemente haga clic en el botón a continuación y siga las instrucciones.
¿Qué pasará cuando haga clic en este botón? Netlify clonará el repositorio de Doce Git a su cuenta GitHub (le pedirá su permiso para hacerlo), agregue el nuevo repositorio a su cuenta de Netlify e implementará.
Haga clic en el botón Usar este plantilla en la parte superior de este repositorio para hacer su propio repositorio de doce años en su cuenta de GitHub. Clon o descargue su nuevo repositorio de doce años en su computadora.
Necesitará node.js y npm (incluido con node.js). Para instalar los paquetes requeridos, ejecute
npm installnpm run serve para ejecutar un servidor de desarrollo y relegar en vivonpm run build para construir para la producciónnpm run clean para limpiar la carpeta de salida y Doce Cache Los cerebros de doce años viven en la carpeta utils : si solo desea hacer un sitio web, entonces no necesita tocar nada dentro de utils . Sin embargo, si desea cambiar cualquiera de los códigos cortos, ¡eche un vistazo!
Doce establece transformaciones, códigos cortos y algunas opciones sensatas. Haga clic en las características a continuación para aprender cómo funcionan.
stylesheet shortcode Use el shortcode emparejado con stylesheet para incluir su sass. Puede importar archivos SASS desde su directorio styles (definido en .twelvety.js ) y desde node_modules . El SASS se representará usando Dart-Sass, pasará a PostCSS (con PostCSS Preset ENV y AutoPrefixer para compatibilidad) y minificado usando CSE CSS o embellecido por JS Beautifier (en producción y desarrollo respectivamente).
{% stylesheet 'scss' %}
@import "normalize.css/normalize";
@import "mixins";
.home {
@include container;
color: $color--red;
}
{% endstylesheet %} El segundo parámetro del código corto emparejado con stylesheet es el idioma; Actualmente, esto no hace nada y se incluye únicamente para alinearse con la definición de Shopify del código corto. Si desea utilizar la sintaxis sangrada SASS, puede cambiar la opción de doce doce indentedSass , que se encuentra en .twelvety.js .
El shortcode pareado stylesheet también tiene un tercer parámetro, que de manera predeterminada se establece en page.url , la URL de la página actual se está representando. Esto significa que solo el CSS requerido se incluye en cada página. Puede hacer su propio 'trozo' de CSS utilizando este parámetro, por ejemplo, un archivo CSS común a todas las páginas de su sitio web.
styles cortos El código de mínimo styles recoge todos los sass escritos en los códigos cortos emparejados con stylesheet para el fragmento dado y emite el CSS renderizado. El 'fragmento' predeterminado a page.url , la URL de la página actual se está representando.
<!-- 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' %} " /> Tenga en cuenta que el código corto styles debe colocarse debajo de cualquier código cortos emparejados en la stylesheet en la plantilla; Consulte el append Shortcode y Transformar para obtener más información.
javascript Shortcode emparejado Incluya su JavaScript usando el código corto emparejado javascript . Doce usa Browserify para que pueda require('modules') y Babel para que pueda usar el último JavaScript. Su JavaScript se minificará usando Uglify en producción o embellecido por JS Beautifier en el desarrollo.
{% 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 %} El código corto emparejado javascript tiene un segundo parámetro, que de manera predeterminada se establece en page.url , la URL de la página actual se representa. Esto significa que solo el JavaScript requerido se incluye en cada página. Puede hacer su propio 'fragmento' de JavaScript utilizando este parámetro, por ejemplo, un archivo JavaScript para todo el código del proveedor.
La salida de cada shortcode emparejado de javascript se envolverá en una IFE para que sus variables no contaminen el alcance global. Si desea definir algo en window , use window.something = .
script Shortcode El código corto script recopila todo el JavaScript para el fragmento dado y genera el JavaScript (después de la transpilación y la minificación). El 'fragmento' predeterminado a page.url , la URL de la página actual se está representando.
<!-- 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 > Tenga en cuenta que el código corto script debe colocarse debajo de cualquier código corto emparejado javascript en la plantilla; Por lo general, esto no es un problema, ya que JavaScript a menudo se incluye inmediatamente anterior </body> . Si desea el JavaScript en otro lugar, consulte el append Shortcode y Transformar.
asset El código corto asset genera un activo con contenido con el contenido y la extensión dados. El contenido puede ser una String o Buffer . Los activos se guardarán en el directorio assets dentro del directorio output (ambos definidos dentro de .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 " /> Puede importar la función de código corto asset en JavaScript: así es como el código corto picture guarda sus imágenes receptivas en el directorio assets .
picture El cuadrado picture toma parámetros src y alt y genera un elemento de imagen receptivo con AVIF* y WebP Support. Sus imágenes deben almacenarse dentro del directorio images , definido dentro de .twelvety.js . Doce guardará las imágenes salidas en el directorio assets dentro del directorio output (ambos definidos dentro de .twelvety.js ). El código corto de picture también toma otros dos parámetros: sizes que predeterminan a 90vw, (min-width: 1280px) 1152px , según los tamaños de punto de interrupción; Y loading que es predeterminada a lazy también puede estar eager .
*AVIF está deshabilitado de forma predeterminada debido a los largos tiempos de construcción. Puede habilitarlo en .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 > El código corto de picture usa carga nativa de lazada, pero sería fácil agregar soporte para lazysizes o una biblioteca similar si lo desea. El código corto de picture calcula el color promedio de la imagen para mostrar mientras se carga la imagen, usando padding-bottom para evitar el cambio de diseño.
El brevemente de picture se usa automáticamente para cada imagen en Markdown. Para deshabilitar esto, deberá editar la instancia de Markdown-IT (ver la función Markdown).
<!-- Automatically uses picture shortcode -->
![ Panning photo of grey coupe on road ] ( car.jpg ) Las imágenes emitidas por el código corto picture se almacenan en caché. Si desea borrar el caché, elimine .twelvety.cache (solo un archivo json) o ejecute npm run clean para eliminar el caché y el directorio de salida. Si elimina el directorio de salida pero .twelvety.cache , las cosas se romperán.
append un short -shortcode y transformar Bien amigos, aquí está: el que tiene doce con doce. Para que funcione los styles que funcionan, debe venir después de todos los códigos cortos emparejados con stylesheet , que generalmente estarían en el body . Sin embargo, queremos que nuestro CSS esté vinculado o inclinado en la head . Aquí es donde entran el short -shortcode y la transformación de append , para mover la salida de los styles de paso de paso en la head donde lo queremos.
<!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 > El código corto append de Adexiones en realidad se reemplazará con una template . La transformación append luego usa JSDOM para agregar el contenido de la template al selector dado (en este caso, head ).
De todos modos, existe el mismo problema para el script Shortcode, este no es un problema porque es muy común incluir JavaScript desde la parte inferior del body de todos modos.
markdownDoce establece su propia instancia de Markdown-It. Las opciones de configuración son:
{
html : true ,
breaks : true ,
typographer : true
} Doce también modifica la regla image del renderizador: en lugar de emitir un elemento img , doce usa el código corto picture receptivo para representar cada imagen. Si desea deshabilitar esto, elimine las siguientes líneas en 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 ) ;
} ; Doce también agrega un código corto emparejado de markdown que usa la configuración Markdown-It.
{% markdown %}
# `markdown` paired shortcode
Lets you use **Markdown** like _this_.
{% endmarkdown %}Esto también es realmente útil para incluir archivos de Markdown en una plantilla.
{% markdown %}
{%- include 'content.md' -%}
{% endmarkdown %} Tenga cuidado con la trampa común de los bloques de código con sangría cuando se usa el código corto emparejado markdown . Si los bloques de códigos con sangría se están convirtiendo en una molestia, puede deshabilitarlos en utils/markdown.js mientras conserva los bloques de código cercados.
// Uncomment the following line to disable indented code blocks
- // .disable("code")
+ .disable("code")criticalEn lugar de usar una transformación, Doce ahora usa un altuentín CSS crítico para extraer y en línea CSS de ruta crítica en cada página.
format La transformación format embellece HTML en el desarrollo utilizando JS Beautifier y minifica HTML en producción utilizando HTMLMinifier. Cualquier CSS en línea y JavaScript también será embellecido o minificado.
Si está utilizando el código Visual Studio, recomiendo esta extensión de líquido para que su Sass y JavaScript se resalten correctamente.
