Zum Hauptinhalt springen
LFP Docs

Theme-Erweiterungen

LFP Docs nutzt eine Sammlung von Layouts und Komponenten, von denen mehrere dazu genutzt werden können, um neue Seite zusammenzustellen.

Alle Layouts und Komponenten sind in JavaScript geschrieben und nutzen dabei Eleventys proprietäre, aber vergleichsweise flexible, 11ty.js-Konvention.[1]

Layouts

lfp-base-frame

Eine komplett leere Leinwand, die nur die Rahmenstruktur für ein gültiges HTML-Dokument inklusive aller Elemente im <head> vorgibt.

lfp-base-bare

Ein minimales Layout, das nur das Header-Element des Standardthemas enthält.

Komponenten

Das Standardthema nutzt mehrere Komponenten, wobei lfp-base-header und lfp-base-footer darauf ausgelegt sind, auch in selbstdefinierten Layouts genutzt werden zu können.

Das Template-Render-Makro aktivieren

Damit JavaScript-Templates, dem Standard von 11ty.js entsprechend, auch in anderssprachigen Templates (Nunjucks etc.) genutzt werden können, muss das von Eleventy zur Verfügung gestellte Plugin aktiviert werden:

import { RenderPlugin } from '@11ty/eleventy';

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(RenderPlugin);
}
eleventy.config.js

Das stellt den Shortcode renderFile in allen Templates zur Verfügung.

lfp-base-header

Die standardmäßige Header-Komponente umfasst das Logo der Website, sowie die übergeordnete Navigation mit Links zu externen Ressourcen.

Eine beispielhafte Integration der Header-Komponente mit JavaScript.

// jede Komponente verfügt über eine exportierte `render`-Funktion,
// die ein Argument `data` erwartet, das Eleventy an .11ty.js Templates übergibt
import { Header } from '@lowfat/eleventy-plugin-lfp-docs/templates/lfp-base-header';

// nicht vergessen, `this` an die aufgerufene Komponente zu übergeben,
// um auch dort alle von Eleventy übergebenen Methoden nurzen zu können
export function render(data) {
  return `<!DOCTYPE html>
<html>
<head><!-- things for the head --></head>
<body>
  ${Header.call(this, data)}
  <!-- all other content ->
</body>
</html>`;
}
custom-layout.11ty.js

Um die Komponente auch mit Nunjucks oder Liquid zu nutzen, muss zuerst das Render-Makro aktiviert werden. Danach wird die Komponente wie folgt integriert:

{# die Komponente muss explizit importiert werden #}
{# das Argument, das die Komponente erwartet, muss explizit generiert werden #}
{% renderFile "./node_modules/@lowfat/eleventy-plugin-lfp-docs/dist/templates/lfp-base-header.11ty.js", { config: config, collections: collections } %}
custom-layout.njk

Die Footer-Komponente des Standardthemas für LFPDocs umfasst, wenn mittels config.footer aktiviert, die an config.footerCopyright und config.footerMenu übergebenen HTML-Inhalte.

Die Integration der Komponente verläuft analog zu lfp-base-header.

  1. Das macht es möglich, die Kompontenen, die von den Layouts des Plugins genutzt werden, als einzelne Module abzulegen und auch in anderswo definierte Layouts zu importieren; durch Limitationen des Sprachdesigns lassen Sprachen wie Nunjucks und Liquid das nicht zu, auch im Rahmen ihrer {% extends %}-Syntax. ↩︎

Diese Seite bearbeiten auf Codeberg
Zuletzt geupdated: