Twelvety
v1.4.1
Siehe die Demo -Site
Twelvety ist ein vorkonfiguriertes elf Starter-Projekt, das schnell gebaut wurde. Es enthält:
Schreiben Sie solche Komponenten:
< 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 %}Klicken Sie einfach auf die Schaltfläche unten und befolgen Sie die Anweisungen.
Was wird passieren, wenn ich auf diese Schaltfläche klicke? Netlify klonen das zwölfzige Git -Repository auf Ihr GitHub -Konto (es wird Ihre Erlaubnis dazu aufgefordert), das neue Repository zu Ihrem Netlify -Konto hinzufügen und es bereitstellen!
Klicken Sie oben in diesem Repository auf die Schaltfläche dieser Vorlage, um Ihr eigenes Repository in Ihrem GitHub -Konto zu erstellen. Klonen oder laden Sie Ihr neues zwölfziges Repository auf Ihren Computer herunter.
Sie benötigen node.js und npm (enthalten bei node.js). Um die erforderlichen Pakete zu installieren, laufen Sie aus
npm installnpm run serve für den Ausführen eines Entwicklungsservers und Live-Relads ausnpm run build aus, um für die Produktion zu erstellennpm run clean aus, um den Ausgangsordner und zwölfzig Cache zu reinigen, um zu reinigen Die Gehirne von zwölfzig leben im Ordner utils : Wenn Sie nur eine Website erstellen möchten, müssen Sie nichts innerhalb von utils berühren. Wenn Sie jedoch eine der Shortcodes ändern möchten, schauen Sie sich um!
Zwölfzig Sets -Transformationen, Shortcodes und einige vernünftige elf Optionen. Klicken Sie auf die folgenden Funktionen, um zu erfahren, wie sie funktionieren.
stylesheet Paired Shortcode Verwenden Sie den stylesheet Paired Shortcode, um Ihren SASS einzuschließen. Sie können SASS -Dateien aus Ihrem styles (definiert in .twelvety.js ) und aus node_modules importieren. Der SASS wird mit Dart-Sass gerendert, in Postcss (mit POSTCSS Preset Env und Autoprefixer für die Kompatibilität) übergeben und entweder mit Clean-CSS minimiert oder durch JS-Verschönerer verschönert (in Produktion bzw. Entwicklung).
{% stylesheet 'scss' %}
@import "normalize.css/normalize";
@import "mixins";
.home {
@include container;
color: $color--red;
}
{% endstylesheet %} Der zweite Parameter des stylesheet gepaarten Shortcode ist die Sprache; Derzeit ist dies nichts und ist ausschließlich dazu enthalten, sich an Shopifys Definition des Shortcode zu übereinstimmen. Wenn Sie die SASS -Syntax für die SASS -Syntax verwenden möchten, können Sie die zwölfzig -Option indentedSass ändern, die in .twelvety.js gefunden werden.
Der stylesheet Paired Shortcode hat ebenfalls einen dritten Parameter, der standardmäßig auf page.url eingestellt ist. Dies bedeutet, dass nur das erforderliche CSS auf jeder Seite enthalten ist. Sie können Ihr eigenes "Chunk" von CSS mit diesem Parameter erstellen, z. B. eine CSS -Datei, die auf allen Seiten Ihrer Website gemeinsam ist.
styles -Shortcode Der styles -Shortcode sammelt alle in stylesheet gepaarten Shortcodes für den angegebenen Chunk zusammen und gibt das gerenderte CSS aus. Der "Chunk" standardt auf page.url , die URL der aktuellen Seite, die wiedergegeben wird.
<!-- 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' %} " /> Beachten Sie, dass der styles -Shortcode unter allen stylesheet gepaarten Shortcodes in der Vorlage platziert werden muss. Weitere Informationen finden Sie im append gepaarten Shortcode und Transformation.
javascript gepaarter Shortcode Fügen Sie Ihr JavaScript mit dem javascript -gepaarten Shortcode ein. Twelvety verwendet Browserify, damit Sie require('modules') können, damit Sie das neueste JavaScript verwenden können. Ihr JavaScript wird dann mit UGLIFY in der Produktion oder durch JS -Verschieber in der Entwicklung verschönert.
{% 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 %} Der javascript gepaarte Shortcode hat einen zweiten Parameter, der standardmäßig auf page.url eingestellt ist. Dies bedeutet, dass nur das erforderliche JavaScript auf jeder Seite enthalten ist. Sie können Ihr eigenes "Chunk" von JavaScript mit diesem Parameter erstellen, z. B. eine JavaScript -Datei für alle Anbietercode.
Die Ausgabe jedes javascript gepaarten Shortcode wird in ein IIF eingewickelt, sodass Ihre Variablen den globalen Umfang nicht verschmutzen. Wenn Sie etwas im window definieren möchten, verwenden Sie window.something =
script -Shortcode Der script -Shortcode sammelt das gesamte JavaScript für den angegebenen Chunk und gibt das JavaScript (nach Transpilation und Minifikation) aus. Der "Chunk" standardt auf page.url , die URL der aktuellen Seite, die wiedergegeben wird.
<!-- 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 > Beachten Sie, dass der script -Shortcode unter allen javascript -gepaarten Shortcodes in der Vorlage platziert werden muss. Normalerweise ist dies kein Problem, da JavaScript häufig unmittelbar vor </body> enthalten ist. Wenn Sie das JavaScript an einem anderen Ort wünschen, finden Sie im append gepaarten Shortcode und Transformation.
asset Shortcode Der asset Shortcode gibt einen inhaltsgeheilten Vermögenswert mit dem angegebenen Inhalt und der angegebenen Erweiterung aus. Der Inhalt kann entweder eine String oder Buffer sein. Vermögenswerte werden im Verzeichnis assets im output (beide innerhalb von .twelvety.js ) gespeichert.
<!-- 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 " /> Sie können die asset -Shortcode -Funktion in JavaScript importieren: Auf diese Weise speichert der picture -Shortcode Ihre reaktionsschnellen Bilder in das Verzeichnis assets .
picture -Shortcode Der picture -Shortcode nimmt src und alt -Parameter ein und gibt ein reaktionsschnelles Bildelement mit AVIF* und WebP -Unterstützung aus. Ihre Bilder müssen in dem images -Verzeichnis gespeichert werden, das in .twelvety.js definiert ist. Zwölfzig speichert die ausgegebenen Bilder im Verzeichnis assets im output (beide in .twelvety.js definiert). Der picture -Shortcode nimmt auch zwei weitere Parameter vor: sizes , die auf 90vw, (min-width: 1280px) 1152px basieren, basierend auf den Breakpoint-Größen; und loading , das standardmäßig lazy , kann auch eager sein.
*AVIF ist standardmäßig aufgrund langer Bauzeiten deaktiviert. Sie können es in .twelvety.js aktivieren.
<!-- 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 > Der picture Shortcode verwendet natives Fauzlading, aber es wäre einfach, lazysizes oder eine ähnliche Bibliothek zu unterstützen, wenn Sie dies wünschen. Der picture -Shortcode berechnet die durchschnittliche Farbe des Bildes, die angezeigt werden soll, während das Bild lädt, indem padding-bottom verwendet wird, um eine Verschiebung des Layouts zu vermeiden.
Der picture -Shortcode wird automatisch für jedes Bild im Markdown verwendet. Um dies zu deaktivieren, müssen Sie die Instanz von Markdown-IT bearbeiten (siehe Markdown-Funktion).
<!-- Automatically uses picture shortcode -->
![ Panning photo of grey coupe on road ] ( car.jpg ) Die vom picture -Shortcode ausgegebenen Bilder werden zwischengespeichert. Wenn Sie den Cache löschen möchten, npm run clean .twelvety.cache . Wenn Sie das .twelvety.cache jedoch löschen, jedoch.
append Okay, Leute, hier ist es: Der eine Gotcha mit zwölfzig. Damit der styles -Shortcode funktioniert, muss es nach allen stylesheet -Shortcodes kommen, die normalerweise im body liegen würden. Wir möchten jedoch, dass unsere CSS in den head verknüpft oder eingefügt werden. Hier kommen die append -Paired -Shortcode und die Transformation ins Spiel, um die Ausgabe des styles -Shortcode wieder in den head zu verschieben, wo wir es wollen.
<!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 > Der append gepaarte Shortcode wird tatsächlich durch eine template ersetzt. Die append -Transformation verwendet dann JSDOM, um den Inhalt der template an den angegebenen Selektor anzuhängen (in diesem Fall head ).
Das gleiche Problem besteht jedoch für den script -Shortcode. Dies ist jedoch kein solches Problem, da es sowieso sehr häufig JavaScript vom Boden des body einbezieht.
markdown -Paired -Shortcode und KonfigurationZwölfzig legt eine eigene Instanz von Markdown-It fest. Die Konfigurationsoptionen sind:
{
html : true ,
breaks : true ,
typographer : true
} Zwölfundy modifiziert auch die image des Renderers: Anstatt ein img -Element auszugeben, verwendet zwölfy den Responsive picture -Shortcode, um jedes Bild zu rendern. Wenn Sie dies deaktivieren möchten, entfernen Sie die folgenden Zeilen in 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 ) ;
} ; Twelvety fügt auch einen markdown -Shortcode hinzu, der die Markdown-It-Konfiguration verwendet.
{% markdown %}
# `markdown` paired shortcode
Lets you use **Markdown** like _this_.
{% endmarkdown %}Dies ist auch sehr nützlich, um Markdown -Dateien in eine Vorlage aufzunehmen.
{% markdown %}
{%- include 'content.md' -%}
{% endmarkdown %} Achten Sie auf die gemeinsame Gefallen von eingeregten Codeblöcken, wenn Sie den markdown -Shortcode verwenden. Wenn eingebaute Codeblöcke zu einem Ärgernis werden, können Sie sie in utils/markdown.js deaktivieren und gleichzeitig eingezäunte Codeblöcke beibehalten.
// Uncomment the following line to disable indented code blocks
- // .disable("code")
+ .disable("code")critical TransformationAnstatt eine Transformation zu verwenden, verwendet zwölfundy nun elfundzwanzig-kritische CSS, um auf jeder Seite CSS-CSS-CSS zu extrahieren und zu inline.
format Das format transformiert HTML in der Entwicklung unter Verwendung von JS -Verschönern und mindert HTML in der Produktion mithilfe von HTMLminifier. Jegliche Inline -CSS und JavaScript werden ebenfalls verschönert oder abgebaut.
Wenn Sie Visual Studio -Code verwenden, empfehle ich diese flüssige Erweiterung, damit Ihr Sass und Ihr JavaScript korrekt hervorgehoben werden.
