11ty: Inhalt in der Post-Liste anzeigen
Wer in der Liste aller Posts zusätzlich den Inhalt anzeigen möchte, hat standardmäßig nur die Möglichkeit, den gesamten Inhalt anzuzeigen. Wenn man jedoch beispielsweise nur den ersten Satz eines Posts anzeigen möchte, muss dies noch über Eleventys JavaScript gelöst werden.
Als Grundlage wird der 11ty Starter Blog verwendet.
Wenn man diesen startet, erhält man folgendes Bild. Es zeigt die Post-Liste mit Titel, Datum und Tags, aber ohne Inhaltsauszug.
Die rote Schrift zeigt den Bereich, in den der Inhalt eingefügt werden soll. Für die Umsetzung habe ich mich an den folgenden Seiten orientiert:
Eleventy Chirpy Blog Template und Blog mit Eleventy erstellen.
Die Datei .eleventy.js benötigt folgende Funktion:
const extractExcerpt = (post) => {
if (!Object.prototype.hasOwnProperty.call(post, "templateContent")) {
return null;
}
const content = post.templateContent;
const markerIndex = content.indexOf("<!-- endOfPreview -->");
return markerIndex > 0 ? content.slice(0, markerIndex) + "..." : "";
};Zunächst wird geprüft, ob das Post-Objekt das Feld "templateContent" besitzt, das von Eleventy bereitgestellt werden sollte. Anschließend wird der Inhalt in der content-Variablen gespeichert. Der Inhalt wird von Anfang an bis zum Schnipsel "" zerschnitten. Natürlich kann hier jedes beliebige, aber möglichst einzigartige Tag verwendet werden. Dieser Marker beschreibt das Ende des Auszugs bzw. der Vorschau. Wenn kein Marker gefunden wird, wird ein leerer String zurückgegeben.
Nun muss Eleventy beigebracht werden, diese Funktion zu verwenden. Es wäre zum Beispiel als Filter möglich, aber ich finde einen "Shortcut" praktischer. Ein Shortcut sieht folgendermaßen aus:
// entferne Leerzeichen zwischen {} und %
{ % excerpt pageObject % }Bitte die Leerzeichen zwischen den runden Klammern und dem Prozentzeichen entfernen. Leider rendert 11ty den Ausschnitt ohne Leerzeichen!
eleventyConfig.addShortcode("excerpt", (post) => extractExcerpt(post));Das Eleventy-Konfigurationsobjekt erhält nun ein neues Schlagwort "excerpt" (Auszug) und übergibt, wie im vorherigen Code-Snippet gezeigt, das Post-Objekt als Parameter.
Wenn man diesen Shortcut nun in der Datei /_includes/postlist.njk innerhalb der Listenelemente (< li > </ li >) einfügt, erhält man den gewünschten Inhaltsauszug:
{ % excerpt post % }Dieser Marker kann nun in den Markdown-Dateien der Blogposts verwendet werden (/posts/*.md). Einfach nach der gewünschten Länge des Auszugs das einfügen.
Leverage agile frameworks to provide a robust
<!-- endOfPreview -->
synopsis for high-level overviews. Iterative
Die Codebeispiele findet ihr auf Github/derKuba.
Habt ihr Fragen oder Anregungen? Schreibt mir bei Twitter.
Tausend Dank fürs Lesen!
Kuba