Ein tiefer Einblick in Eleventy Static Site Generator

Aber zuerst – lassen Sie uns schnell überprüfen, was mit einer „statischen Site“ gemeint ist und dann, was ein Generator bietet. Eine statische Website besteht aus statischen Inhalten – HTML, CSS, Assets und alle Inhalte sind bereits zusammen kompiliert, bevor sie an einen Website-Host übertragen werden. Dies unterscheidet sich von einer dynamischen Website, die diese Dinge aus der Abfrage einer Datenbank zur Laufzeit kompiliert (wie WordPress) oder die Inhalte von APIs clientseitig abruft (wie JavaScript-Frameworks ohne serverseitiges Rendering).

Ein statischer Site-Generator ist eine Umgebung und ein Build-Prozessor, um Ihre Inhalte in statisches HTML zu kompilieren. Sie bieten normalerweise Helfer an, um Flexibilität beim Schreiben Ihrer Inhalte zu bieten (z. B. Unterstützung von Markdown) und enthalten Methoden zum Erstellen von Vorlagen. Anstatt HTML-Seiten einzeln zu schreiben und die sich wiederholenden Teile kopieren und einfügen zu müssen, unterstützt ein Generator das Zerlegen dieser Dinge in Komponenten über eine bestimmte Vorlagensprache. Dann bringt der Erstellungsprozess des Generators alles zusammen und gibt den endgültigen HTML-Code aus, der auf einen Webhost hochgeladen werden kann, um als Ihre Website bereitgestellt zu werden. Je nach verwendetem Webhost kann dieser Build-Prozess sogar vom Host durchgeführt werden.

Es sind viele Static-Site-Generatoren verfügbar. Sie haben vielleicht schon von solchen wie Jekyll, Hugo, Gatsby, Next und Nuxt gehört oder sie sogar benutzt. Eine umfassende Liste wird von Jamstack.org bereitgestellt.

Was unterscheidet Eleventy von anderen Static-Site-Generatoren?

Eleventy ist sowohl während des Builds als auch im Browser außergewöhnlich schnell. Dies ist größtenteils darauf zurückzuführen, dass kein clientseitiges JavaScript-Bundle geladen werden muss, um Inhalte bereitzustellen (im Vergleich zu etwas wie Gatsby). Das serverseitige Rendering ist hier nicht einmal ein Problem, da die Seitenerstellung im Dateisystem standardmäßig auf statisches HTML eingestellt ist.

Was Eleventy wirklich einzigartig macht, ist die Möglichkeit, aus bis zu zehn verschiedenen Templating-Sprachen auszuwählen und diese zu mischen:

Sprachen können in derselben Datei oder zwischen Layouts gemischt werden. Zum Beispiel schreibe ich meinen Hauptinhalt oft mit Markdown, der in ein Nunjucks-Layout einfließt. In einigen Projekten fand ich es nützlich, einige Daten mit Nunjucks in der Markdown-Datei durchlaufen zu können. Diese Fähigkeit, Sprachen zu kombinieren, ist sehr leistungsfähig und ermöglicht es Ihnen, einen Schreib- und Build-Workflow zu entwerfen, der für Sie und Ihr Projekt am besten geeignet ist.

Eleventy enthält ein --serve Flag, das BrowserSync verwendet, um die Bereitstellung der Site lokal und mit Hot-Reload bei Dateiänderungen zu ermöglichen. Dies ist eine große Annehmlichkeit und sollte im Hinterkopf behalten werden, wenn Sie nicht nach einem statischen Website-Generator suchen, sondern vielleicht nach einem Upgrade von Build-Tools wie Gulp.

Als Teil der Zero-Config können alle Ihre Site-Dateien im Stammverzeichnis Ihres Projekts gespeichert werden. Um die Eingabe- und Ausgabeverzeichnisse zu ändern, können Sie eine Eleventy-Konfiguration erstellen, bei der es sich voraussichtlich um eine Stammdatei mit dem Namen .eleventy.js . Hier ist ein kurzer Ausschnitt, der zeigt, wie diese Änderung vorgenommen wird:

 module.exports = function (eleventyConfig) { return { dir: { // default: [site root] input: "src", // default: _site output: "public", }, }; };

Wie bereits erwähnt, ist das Standardverhalten die Erstellung von Dateisystemseiten, was im Allgemeinen von großem Vorteil ist, insbesondere für einen schnellen Einstieg. Dies kann leicht überschrieben werden, indem ein benutzerdefinierter permalink wird, und das kann pro Datei, für ein ganzes Verzeichnis oder dynamisch für einen Datensatz erfolgen. Permalinks bieten auch eine weitere Superkraft, die wir gleich untersuchen werden!

Einzigartigerweise können Sie während des Builds Inhalte, Daten und Transformationen auf diesen Inhalten und Daten vorbereiten, indem Sie JavaScript verwenden und Filter und Shortcodes nutzen (darüber sprechen wir später). Auch hier geschieht dies alles, ohne dass ein clientseitiges JavaScript-Bundle hinzugefügt wird, während die Verwendung von JavaScript als Vorlagensprache weiterhin ermöglicht wird.

Wichtiger Hinweis : Sie können Eleventy ohne oder mit geringen JavaScript-Kenntnissen erfolgreich verwenden.

Im Gegensatz zu anderen SSGs wie Gatsby oder Umgebungen wie WordPress benötigen die meisten Eleventy-Sites keine Plugins. Es sind einige Plugins verfügbar, die jedoch für die wesentlichen Funktionen nicht erforderlich sind.

Wenn Sie mit Eleventy bauen, können Sie Funktionen nach Bedarf hinzufügen. Tatsächlich könnten Sie einfach HTML verwenden und niemals mit einer der anderen Templating-Sprachen arbeiten. Eleventy ist nur so komplex, wie es Ihr Projekt erfordert!

Grundlegende Eleventy-Konzepte verstehen

Lassen Sie uns ein paar Begriffe und Konzepte durchgehen, die Ihnen helfen werden, Ihre Eleventy-Projekte erfolgreich zu erstellen.

Layouts und Vorlagen

Sie können sich diese Begriffe als austauschbar vorstellen, aber im Kontext von Eleventy haben sie kontextuelle Bedeutungen:

• Vorlage ist der Oberbegriff für alle Inhaltsdateien.
• Layouts sind spezielle Vorlagen, die andere Inhalte umschließen.

Vorlage bezieht sich beispielsweise auf alle Ihre Markdown-Dateien, während ein Layout eine Nunjucks-Datei sein kann, die die HTML5-Boilerplate und einen Slot für den Vorlageninhalt enthält. Wie das funktioniert, erfahren Sie im Abschnitt über die ersten Schritte.

Filter und Shortcodes

Dies sind zusätzliche Möglichkeiten, die Inhaltsausgabe zu ändern und wiederverwendbare Vorlagenteile zu erstellen. Sie sind für die Verwendung mit Nunjucks, Liquid, Handlebars und JavaScript-Vorlagen verfügbar. Filter und Shortcodes werden in .eleventy.js definiert.

Neben Variablen und Operatoren, die in Ihrer bevorzugten Vorlagensprache verfügbar sind, hat Eleventy das Konzept der Filter in den zuvor aufgeführten Sprachen vereinheitlicht. Filter transformieren Inhalt auf eine bestimmte Art und Weise, die für den Inhaltstyp spezifisch ist. Beispielsweise können Sie einen Filter erstellen, der für Zeichenfolgen vorgesehen ist, um sie in Großbuchstaben zu schreiben. Oder Sie haben möglicherweise einen Filter, der für Arrays verwendet werden soll, um zu ändern, was zurückgegeben wird, z. B. das Auswählen eines zufälligen Elements. Einige Filter werden von Eleventy bereitgestellt, von denen wir einige im Tutorial „Erste Schritte“ verwenden werden.

Shortcodes ermöglichen das Erstellen wiederverwendbarer Vorlagenteile und können Argumente akzeptieren. Sie können entweder eigenständig oder gepaart sein, was bedeutet, dass sie Inhalte mit einem Start- und End-Tag umschließen.

Einer meiner Lieblings-Shortcodes ist das Rendern des aktuellen Jahres – was bedeutet, dass keine veralteten Copyright-Jahre mehr in Ihrer Fußzeile angezeigt werden! So erstellen Sie einen year -Shortcode:

 eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

Um es in einem Nunjucks- oder Liquid-Template zu verwenden, sieht es so aus: {% year %} .

In den Eleventy-Dokumenten finden Sie Beispiele für gekoppelte Shortcodes.

Sammlungen

Sammlungen sind Gruppen zusammengehöriger Inhalte und werden normalerweise innerhalb von Frontmatter erstellt, indem tags definiert werden. Zu den Tag-Syntaxoptionen gehören einzelne Zeichenfolgen, einzeilige Arrays – ["tagA", "tagB"] – für mehrere oder Listen im YAML-Stil, um mehrere Tags zuzuweisen. Beispielsweise kann ich eine „Seiten“-Sammlung erstellen, indem ich allen Inhalten, die ich in diese Sammlung aufnehmen möchte, die folgende Titelseite hinzufüge:

 --- tags: pages ---

Sobald Sie eine Sammlung definiert haben, können Sie über die Vorlagensprache Ihrer Wahl innerhalb des globalen collections darauf zugreifen. Der Zugriff auf unsere „Seiten“-Sammlung würde wie folgt aussehen: collections.pages . Dies gibt ein Array der Daten dieser Sammlung zurück, sodass Sie Array-Operationen wie Schleifen ausführen können, um eine Liste mit Links oder Artikel-Teaser-Karten zu erstellen. Sie können sogar die normale Dateiausgabe unterdrücken und nur Sammlungen verwenden, um die Datenanzeige zu verwalten, was für die Verwaltung von einseitigen Website-Inhalten nützlich ist.

Benutzerdefinierte Daten

Bisher haben wir darüber gesprochen, Inhalte als Dateien zu erstellen, aber Eleventy macht es auch sehr einfach, verschiedene Datenquellen zu pflegen. Diese werden als „benutzerdefinierte Daten“ bezeichnet und befinden sich als JavaScript-Modul-Exporte oder JSON-Dateien im Verzeichnis „ _data .

Benutzerdefinierte Daten können verwendet werden, um:

• Definieren Sie ein einfaches JSON-Array.
• Gibt die Ergebnisse einer Abrufoperation zurück.
• Abrufen und Neuformatieren von Inhalten aus einem Headless-CMS.

Eleventy stellt alle Daten aus _data unter einer Variablen zur Verfügung, die dem Dateinamen entspricht. Wenn ich beispielsweise posts.json erstelle, kann ich in meinen Vorlagen als posts darauf zugreifen. Unter Verwendung von Nunjucks ist hier ein Beispiel für das Schleifen der posts -Daten:

 {% for post in posts %} {{ post.title }} {% endfor %}

Paginierung und Erstellen von Seiten aus Daten

In Eleventy-Begriffen bezieht sich Paginierung auf das Iterieren über einen Datensatz und das Definieren einer Vorlage für die Ausgabe dieses Daten-„Chunks“. Dies geschieht mit einer dedizierten Datei, die die Paginierung innerhalb der Frontmatter definiert. Die Datei enthält auch die Einrichtung Ihrer beabsichtigten Ausgabe für die Daten, was bedeutet, dass sie auch zu einer eigenen Vorlage wird. Wir können ein Layout definieren, an das der Inhalt gesendet werden soll, und auch Tags hinzufügen, um eine Sammlung für eine einfache Referenz und Flexibilität für die Ausgabe zu erstellen.

Hinweis : Wenn Sie benutzerdefinierte Daten verwenden, um Inhalte von einem CMS abzurufen, dann ist Paginierung die Eleventy-Methode, nach der Sie suchen, um diese Daten dynamisch in Seiten umzuwandeln.

Hier ist ein Beispiel für den Verweis auf die benutzerdefinierten Daten unserer posts , von denen wir annehmen, dass wir sie über einen Abruf von einem Headless-CMS abrufen. Wichtig ist, dass die size auf 1 eingestellt ist, was bedeutet, dass jeder „Paginierungsblock“ eine einzelne Ausgabeseite erzeugen sollte. Wir verwenden dann den alias , um einen Verweis auf das aktuelle Element in der Paginierungsschleife zu erstellen, und verwenden diesen Verweis dann in der permalink -Definition und im Vorlagentext.

Die Datei, die die Paginierung definiert, kann sich in Ihrem Eingabeverzeichnis an einer beliebigen Stelle befinden. Meine Organisationspräferenz ist es, ein generate Verzeichnis zu erstellen und es dann genauso zu benennen wie die Sammlung, die es erstellen wird. Betrachten Sie Folgendes als src/generate/posts.njk :

 --- pagination: data: posts size: 1 alias: post addAllPagesToCollections: true permalink: "/{{ post.title | slug }}/" tags: posts layout: post templateEngineOverride: njk, md --- {{ post.body | safe }}

In diesem Fall weist der permalink die auszugebende Seite direkt vom Seitenstamm aus zu. Sie könnten dies ändern, um ein Präfix wie /posts/{{ post.title | slug }} /posts/{{ post.title | slug }} , zum Beispiel.

Wenn Sie außerdem möchten, dass alle generierten Seiten in der von den Tags erstellten Sammlung verfügbar sind, müssen Sie addAllPagesToCollections auf true setzen, um mehr als das erste Element einzuschließen.

Wenn Ihr Inhalt schließlich als Markdown statt als vorkompiliertes HTML eingeht, müssen Sie die templateEngineOverride verwenden. Im Beispiel-Snippet habe ich es auf njk, md was bedeutet, dass der Vorlageninhalt sowohl als Nunjucks verarbeitet werden muss, um die Variable zu konvertieren, als auch als Markdown, um die in der Variablen zurückgegebenen Inhalte zu kompilieren.

Wenn Sie sich fragen, was safe bedeutet, werden wir das als nächstes lernen!

So fangen Sie mit Eleventy an

In Ordnung, Sie können also mit Ihrem ersten Eleventy-Projekt loslegen! Dieses kurze Tutorial hilft Ihnen dabei, eine Ausgangsstruktur zu schaffen, von der aus Sie weiter bauen können. Wir verwenden die Konzepte, die wir bereits gelernt haben, und fügen auch ein paar neue Ideen hinzu.

Der erste wichtige Hinweis hier ist, dass Eleventy ein bereichsbezogenes Paket ist, also hier der Installationsbefehl:

 npm install @11ty/eleventy

Als Nächstes füge ich gerne die folgenden Skripts zu meiner package.json :

 "scripts": { "start": "eleventy --serve", "build": "eleventy" }

Wie bereits erwähnt, aktiviert das Flag --serve einen lokalen Server über BrowserSync.

Ich ziehe es vor, die Eingabe-/Ausgabeverzeichnisse zu aktualisieren, wie wir es uns bereits angesehen haben, also ist es jetzt an der Zeit, einige Inhalte in src oder dem Eingabeverzeichnis Ihrer Wahl zu erstellen.

Um unser Projekt von Anfang an flexibler und skalierbarer zu gestalten, würde ich vorschlagen, mindestens ein Layout zu erstellen, das die HTML5-Boilerplate enthält. Layouts müssen in einem direkt aufgerufenen _includes definiert werden, das eines von wenigen erwarteten Verzeichnissen ist.

Eine Konvention, die Sie häufig unter Anfängern finden, ist die Bezeichnung dieses Layouts base . Ich bevorzuge es, daraus eine Nunjucks-Datei zu machen.

Hier ist ein Beispiel base.njk :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> </head> <body> <header> <h1>{{ title }}</h1> </header> <main> {{ content | safe }} </main> </body> </html>

Die doppelten geschweiften Klammern sind die Nunjucks-Syntax für Variablen. Hier haben wir eine eingehende title vorbereitet, die in Kürze über die Titelseite bereitgestellt wird. Die content wird von Eleventy bereitgestellt und markiert den Slot, in den alle eingehenden Nicht-Vorderseiten-Inhalte gehen sollen. Wichtig ist, dass dies in Verbindung mit dem bereitgestellten safe Filter verwendet wird, der verhindert, dass kompiliertes HTML maskiert und nicht gerendert wird.

Jetzt ist es an der Zeit, unseren Site-Index zu erstellen, den wir als index.md hinzufügen:

 --- title: Hello Smashing Readers! layout: base.njk --- Thanks for reading — hope you're excited to try Eleventy!

Beachten Sie, dass wir in der Titelei unseren Titel hinzugefügt und auch das Layout definiert haben.

An diesem Punkt können wir unser Projekt mit dem hinzugefügten Skript ausführen: npm start . Dadurch wird BrowserSync veranlasst, localhost:8080 einzurichten (falls verfügbar), aber Sie müssen es manuell im Browser öffnen. Sehen Sie sich diesen kurzen Tipp an, wenn Sie möchten, dass der Browser automatisch geöffnet wird.

Der letzte wichtige Schritt ist das Hinzufügen eines Stylesheets. Derzeit wird CSS nicht als automatisch enthaltener Dateityp erkannt, daher haben wir einen zusätzlichen Konfigurationsschritt, nachdem wir unser Stylesheet erstellt haben.

Sie können eine CSS-Datei an beliebiger Stelle in Ihrem Eingabeverzeichnis hinzufügen, z. B. css/style.css . Öffnen Sie dann .eleventy.js (oder erstellen Sie es im Projektstammverzeichnis, wenn Sie die Eingabe-/Ausgabeanpassung nicht vorgenommen haben) und fügen Sie Folgendes hinzu:

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/"); // - input/output customization if using - };

Zuerst fügen wir das css -Verzeichnis als „Passthrough-Kopie“ hinzu, was bedeutet, dass Eleventy es in den Push in das Ausgabeverzeichnis aufnehmen sollte. Dann fügen wir es auch als „Überwachungsziel“ hinzu, sodass Eleventy, wenn wir Änderungen an unseren Stilen vornehmen, während wir unseren start ausführen, eine Neuerstellung auslöst, um unsere lokale Site zu aktualisieren.

Schließlich müssen wir daran denken, den Link zu unserem Stylesheet in unserem base hinzuzufügen:

 <link rel="stylesheet" href="{{ '/css/style.css' | url }}" />

Wenn wir den Speicherort des Stylesheets definieren, leiten wir ihn durch den url -Filter von Eleventy, der den relativen Dateipfad nach Bedarf beim Erstellen anpasst.

Lassen Sie uns als Nächstes einen Beitragstyp „Seiten“ erstellen, um die Verwendung von Sammlungen und Layouts ein wenig mehr zu erkunden. Fügen Sie dazu das Verzeichnis der pages hinzu und erstellen Sie eine oder zwei Markdown-Dateien, einschließlich eines Schlüssels für die title -Vorderseite, aber ohne Layout.

Wir werden dieses Mal eine etwas andere Methode verwenden, um das Layout zu definieren – eine Datenverzeichnisdatei . Diese Datei ist im Allgemeinen als JSON formatiert und ermöglicht es uns, Daten hinzuzufügen, die auf alle Dateien innerhalb eines Verzeichnisses angewendet werden sollten, wodurch verhindert wird, dass sie dateiübergreifend dupliziert werden müssen. Die Datei muss genauso benannt werden wie das Verzeichnis, für das sie verwendet wird, also erstellen Sie die Datei pages.json und fügen Sie den folgenden Inhalt hinzu:

 { "layout": "page.njk", "tags": "pages" }

Wir sind auch vorangegangen und haben Tags definiert, um die „Seiten“-Sammlung zu erstellen. Aber das von uns definierte Layout existiert noch nicht, also erstellen _includes/page.njk und fügen Sie Folgendes hinzu:

 --- layout: base.njk --- <article> {{ content | safe }} </article>

Hier verwenden wir das Eleventy-Konzept der Layoutverkettung , um unsere base wiederverwenden zu können, aber auch ein einzigartiges Element für unser page hinzuzufügen, nämlich <article> . Das bedeutet, dass alle Inhalte unserer Seiten sowohl das page als auch das base .

Die Verkettung von Layouts reduziert die Duplizierung, indem es die Wiederverwendung von Boilerplates und Basis-Site-Layoutstrukturen ermöglicht.

Nachdem wir nun Inhalte für den Inhaltstyp „ pages “ erstellt und über die Tags als „Seiten“-Sammlung definiert haben, sehen wir uns an, wie wir auf diese Sammlung zugreifen können. Hier verwenden wir Nunjucks, um die Sammlung zu durchlaufen und eine Liste mit Links zu jeder Seite auszugeben. Diese Schleife wird in unsere Datei index.md .

 {% for post in collections.post -%} - [{{ post.data.title }}]({{ post.url }}) {% endfor %}

Wir haben jedoch etwas Einzigartiges getan, nämlich dass das Innere der Schleife tatsächlich zurück zu Markdown wechselt, um die Links zu rendern. Dies ist nicht unbedingt erforderlich, um mit diesem Szenario umzugehen, aber es kann sehr praktisch sein! Je nach Komplexität funktioniert dies manchmal nicht. Der wahre Grund ist, dass der Markdown-Renderer standardmäßig auf die flüssige Vorlagensprache eingestellt ist. Wenn Sie also Nunjucks-Funktionen über einfache Schleifen hinaus verwenden, müssen Sie Eleventy mitteilen, wie die Datei verarbeitet werden soll.

Im vorherigen Abschnitt zur Paginierung haben wir uns eigentlich schon die Lösung dafür angesehen. Und das ist die Verwendung von templateEngineOverride , um anzugeben, dass die Datei sowohl als Nunjucks als auch als Markdown verarbeitet werden soll. Die folgende vollständige Lösung sollte im Titelbereich des Templates platziert werden: templateEngineOverride: njk, md .

An diesem Punkt haben Sie eine einfache mehrseitige Website erstellt! Wenn Sie externe Daten verwenden müssen, springen Sie zurück zum Abschnitt über die Paginierung.

Andere Möglichkeiten, ein Eleventy-Projekt zu starten

Während einige andere statische Website-Generatoren und -Umgebungen wie WordPress das Konzept von „Themen“ haben, verwendet Eleventy den Begriff „Starter“. Es steht eine wachsende Sammlung zur Auswahl, und viele können in der Auflistung in den Eleventy-Dokumenten gefunden werden.

Ich bevorzuge es, Sass mit meinen Eleventy-Projekten zu verwenden, und ich habe einen Sass-Starter zur Verfügung, wenn Sie sehen möchten, wie Sie das in Ihren Build-Prozess einfügen können. Andere können Gulp hinzufügen, wenn sie an diese Build-Pipeline für Assets und Verarbeitung gewöhnt sind.

Ich habe auch einen minimalen Starter erstellt, der die in diesem Artikel beschriebenen Funktionen enthält und Ähnlichkeiten mit dem Ergebnis des Tutorials aufweist. Es enthält auch ein kleines Beispiel zum Abrufen externer Daten und zeigt, wie ein Teil hinzugefügt wird, um die Site-Navigation basierend auf einer Sammlung anzuzeigen.

Erweiterung der Grundlagen

Nachdem Sie mit der Erstellung Ihrer ersten Website mit einigen grundlegenden Inhalten und möglicherweise einigen benutzerdefinierten Daten experimentiert haben, ist es hilfreich, zusätzliche Möglichkeiten zum Arbeiten mit diesen Inhalten zu kennen. Hier ist ein kurzer Überblick über einige andere Konzepte, die Sie beachten sollten.

Ändern des Dateiausgabetyps mit Permalinks

Ich habe bereits erwähnt, dass Permalinks eine Superkraft haben. Und das heißt, Sie können sie verwenden, um Nicht-HTML-Dateitypen auszugeben.

Zwei nützliche Beispiele sind das Erstellen eines RSS-Feeds und einer Sitemap, die beide normalerweise XML-Dateien sind. Was wirklich leistungsfähig ist, ist, dass Sie weiterhin die Vorlagensprache Ihrer Wahl verwenden können, um diese Dateien zu generieren, sodass Sie Seitendaten mit Nunjucks durchlaufen können, um beispielsweise Ihren RSS-Feed aktuell zu halten.

Anpassen von Sammlungen

Manchmal reicht die Verwendung von Tags zum Erstellen von Sammlungen möglicherweise nicht aus. Oder Sie möchten vielleicht gefilterte Variationen einer vorhandenen Sammlung erstellen. Wir können Sammlungen ändern oder erstellen, indem wir eine Reihe von bereitgestellten Funktionen verwenden. Diese werden in der .eleventy.js gespeichert.

In diesem Beispiel verwenden wir die Funktion addCollection , um Elemente in einer vorhandenen Sammlung zu filtern. Die neue Sammlung basiert auf der Existenz von customKey in der Titelei. Dieser Schlüssel wird vom data zurückgegeben, das an alle generierten Eleventy-Inhalte angehängt ist.

 eleventyConfig.addCollection("specialCollection", function (collection) { return collection.getAll().filter((post) => post.data.customKey); });

Weitere Möglichkeiten zum Erstellen, Ändern und Verwenden von Sammlungen finden Sie in den Eleventy-Dokumenten.

Arbeiten mit der Datenkaskade

Eleventy hat ein vollständigeres Konzept, wie Daten für eine Vorlage namens Datenkaskade kompiliert werden, die wir in diesem Handbuch gerade erst untersucht haben. Sie werden das Beste aus Eleventy herausholen, wenn Sie überprüfen, wie das funktioniert, beginnend in den Dokumenten. Ben Myers hat auch einen ausgezeichneten Leitfaden zum Verständnis der Datenkaskade.

Empfohlene Eleventy-Plugins

In der Einführung habe ich kurz erwähnt, dass es Plugins gibt, die aber nicht immer benötigt werden. Es gibt jedoch einige, die ich bei den meisten Projekten verwende, darunter:

• @11ty/eleventy-plugin-rss Wenn Sie einen RSS-Feed haben möchten, bietet dieses offizielle Plugin einige Filter, die Ihnen bei der Generierung des Feeds helfen. Das verlinkte Repo enthält einen Beispiel-Feed, den Sie möglicherweise auch in einigen Startern verwenden.
• @11ty/eleventy-plugin-syntaxhighlight Anstatt Prism als Skript zum Hervorheben von Code zu laden, ermöglicht dieses Plugin, dass diese Verarbeitung als Teil des Eleventy-Build-Prozesses angewendet wird. Das bedeutet, dass Codeblöcke so umgewandelt werden, dass sie die Klassen zum Anwenden eines Prism-Designs im Voraus enthalten, sodass Sie nur ein Prism-CSS-Design Ihrer Wahl hinzufügen müssen.
• @11tyrocks/eleventy-plugin-social-images Eine Funktion, die ich schon früh in meiner Eleventy-Erkundung suchte, war die Möglichkeit, Bilder zum Teilen in sozialen Medien zu generieren. Dies veranlasste mich, ein Plugin zu erstellen, das Puppeteer hinter den Kulissen verwendet, um den Schnappschuss zu machen. Das Plugin enthält vorgefertigte Vorlagen sowie Konfigurationsoptionen zum Definieren Ihrer eigenen Vorlagendatei.

Ich würde auch empfehlen, sich mit den übrigen offiziellen Eleventy-Plug-ins vertraut zu machen, da sie andere allgemeine Anforderungen erfüllen, einschließlich Navigation und Bildverarbeitung.

Entscheiden, ob Eleventy das Richtige für Ihr Projekt ist

Wie die meisten statischen Websites eignet sich Eleventy am besten für Inhalte, die normalerweise nicht dynamisch oder nach Bedarf bereitgestellt werden müssen. Das soll nicht heißen, dass die gesamte Website statisch sein muss oder dass es keine Möglichkeiten gibt, Inhalte dynamisch zu gestalten. Sie können weiterhin JavaScript laden, um dynamische Inhalte wie das Abrufen von APIs oder das Erstellen interaktiver Widgets zu ermöglichen. Sie können auch Dienste wie IFTTT oder Zapier verwenden, um die Neuerstellung Ihrer Website zu erleichtern, wenn Ihr Host das Erstellen von Webhooks unterstützt und Sie Teile haben, die Sie nach einem Zeitplan aktualisieren möchten.

Dank benutzerdefinierter Daten und Paginierung war es unserer Meinung nach einfach, externe Daten wie aus einem Headless-CMS oder einer anderen API einzubinden. Obwohl es also statisch bereitgestellt wird, haben Sie immer noch viel Flexibilität, wo Sie Inhalte abrufen und wie Sie sie verwalten.

Meine Lieblingssache an Eleventy ist, dass es nicht viele Meinungen darüber aufdrängt, wie ich meine Site strukturieren sollte, abgesehen von den wenigen erwarteten Verzeichnissen, über die wir für _includes und _data (und Sie können auch die Namenskonvention dieser Verzeichnisse aktualisieren). Dies kann auch hilfreich sein, wenn Sie eine Website migrieren möchten und möglicherweise auch einige vorhandene Dateistrukturen verschieben können. Wenn Sie jedoch eine eigensinnigere Architektur bevorzugen, suchen Sie möglicherweise nach einer anderen Option.

Mir gefällt auch, wie ich Eleventy so gestalten kann, dass es zu meinem mentalen Modell für ein bestimmtes Projekt passt, indem ich mehrere Vorlagensprachen sowie Filter, Shortcodes und Layouts einsetze. Starter helfen auch, einen Schub zu geben, damit Sie sich auf das konzentrieren können, was wirklich wichtig ist: Ihre Inhalte. Und auch die hohe Leistung der rein statischen Ausgabe ist ein großer Vorteil.

Wenn Sie in Ihrem Build-Prozess etwas mehr benötigen, können Sie andere bekannte Tools wie Webpack, Gulp oder Parcel hinzufügen. Möglicherweise finden Sie einen Starter, der diese Dinge bereits enthält. Denken Sie daran, dass Sie auch Node-Skripte nutzen können, die dem Eleventy-Build-Prozess bereits inhärent sind.

Eleventy ist sehr gut in der Lage, große Mengen an Seitengenerierung zu bewältigen. Es wurde für einige große und komplexe Websites wie Googles web.dev und die Marketing-Website von Netlify verwendet. Ich habe Eleventy auch für einige unkonventionelle Zwecke verwendet, wie E-Mail- und Webkomponenten-Generatoren, zusammen mit einigen anderen, die in dieser Übersicht beschrieben werden.

Zusätzliche Ressourcen

Ich hoffe, dieser Leitfaden hat sowohl Ihr Interesse geweckt als auch Sie darauf vorbereitet, Eleventy zu verwenden! Es enthielt viele Punkte, die ich etwas schwierig zu entdecken fand, als ich mein erstes Projekt damit erstellte. Seit ich Eleventy im April 2020 zum ersten Mal gefunden habe, habe ich über 20 Eleventy-Projekte erstellt, darunter Starter, Plugins, Nebenprojekte und Kursmaterialien. Viele davon finden Sie auf meiner Seite 11ty.Rocks, die auch Tutorials und Tipps enthält. Eleventy ist etwas, über das ich wirklich gerne diskutiere, also zögern Sie nicht, uns auf Twitter zu kontaktieren!

Im Folgenden finden Sie weitere Ressourcen, die Sie auf Ihrem Weg zum Lernen und zur optimalen Nutzung von Eleventy unterstützen:

• Andy Bell bietet einen sehr umfassenden kostenpflichtigen Kurs an – „Learn Eleventy From Scratch“.
• Die Tutorial-Serie von Tatiana Mac, beginnend mit „Beginners Guide to Eleventy“, bietet gründliche Erklärungen, die keine vorherige Erfahrung mit Generatoren statischer Websites voraussetzen.
• Bryan Robinson bietet einen YouTube-Kurs zum Konvertieren eines kostenlosen HTML-Designs in eine Eleventy-Site an.

Abschließend möchte ich anmerken, dass die Eleventy-Community klein, aber aktiv ist! Wenn Sie jemals Schwierigkeiten haben, Informationen zu finden, können Sie Ihre Frage an das offizielle @eleven_ty-Konto twittern. Der Schöpfer von Eleventy, Zach Leatherman, beantwortet schnell alle RT-Fragen, um Sie wieder auf den richtigen Weg zu bringen!