Dokumentation on Liftoff

Installation

Mon, 01 Jan 0001 00:00:00 +0000

Liftoff lässt sich auf zwei Wegen einbinden. Nimm den, der zu deinem restlichen Dependency-Management passt.

Als Hugo Modul

 toml
 
 
# hugo.toml
[module]
 [[module.imports]]
 path = "codeberg.org/head1328/hugo-liftoff"

bash

hugo mod tidy
hugo server

Als Git-Submodule

 bash
 
 
git submodule add https://codeberg.org/head1328/hugo-liftoff.git themes/liftoff
echo 'theme = "liftoff"' >> hugo.toml

Konfiguration

Mon, 01 Jan 0001 00:00:00 +0000

Liftoff liest konventionelle Hugo-Konfiguration. Wenige Extras schalten das Landing-Chrome scharf.

Pflicht-Einstellungen für Markup

Die Shortcodes geben HTML aus, Goldmark muss es also durchlassen. Fehlt das, erscheinen Feature-Cards und Hinweisboxen als escapter Text.

 toml
 
 
[markup.goldmark.renderer]
 unsafe = true

Das Syntax-Highlighting liegt in einem Stylesheet des Themes, assets/css/syntax.css. Damit es greift, muss Chroma Klassennamen ausgeben statt Inline-Styles. Letztere wirft eine Content-Security-Policy ohne 'unsafe-inline' als Erstes weg, und alle Code-Blöcke stehen farblos da.

 toml
 
 
[markup.highlight]
 style = "github-dark"
 noClasses = false
 lineNos = false
 codeFences = true
 tabWidth = 2

Ein anderer Chroma-Style braucht sein eigenes Stylesheet. Es gehört als assets/css/syntax.css in die eigene Site und sticht dort die Variante des Themes:

Anpassen

Mon, 01 Jan 0001 00:00:00 +0000

Liftoff ist so gebaut, dass du es ohne Fork anpassen kannst. Hugo schaut zuerst im Site-Projekt nach Templates und Assets, danach erst im Theme. Was du also unter assets/, layouts/, i18n/ oder static/ ablegst, gewinnt. Die folgenden Nahtstellen stehen bereit.

Eigenes CSS

Lege eine Stylesheet-Datei unter assets/css/custom.css im Projekt ab. Das Theme lädt sie nach dem Haupt-Bundle, jede Regel hier überschreibt also Theme-Styles.

 css
 
 
/* assets/css/custom.css */
:root {
 --color-accent: #ff5c8a;
}

.hero__title {
 font-family: "Inter", system-ui, sans-serif;
}

In Produktion wird die Datei minifiziert und mit Fingerprint versehen. Existiert die Datei nicht, wird kein zusätzlicher <link> gerendert.

Icons

Mon, 01 Jan 0001 00:00:00 +0000

Liftoff hat ein einziges Icon-Partial, das drei Quellen auflöst: den Iconify-Katalog, das Material-Design-Icons-Set als Shortcut und lokale SVGs aus deinem Projekt. Überall dort, wo ein Shortcode oder Partial einen icon-Parameter nimmt, läuft der Wert durch diesen Resolver.

Iconify-Icons

Iconify stellt 200.000+ Icons aus 150+ Sets unter einem einheitlichen Schema bereit: set:name. Liftoff holt das SVG einmalig zur Build- Zeit und cached es.

 markdown
 
 
{{< pill icon="mdi:flash" >}}Schnell{{< /pill >}}
{{< feature-card title="Doku" icon="mdi:book-open-page-variant" >}}...{{< /feature-card >}}
{{< button href="/docs" icon="simple-icons:codeberg" >}}Source{{< /button >}}

Katalog durchsuchen: icon-sets.iconify.design. Auf ein Icon klicken zeigt den Identifier; den set:name-Teil kopieren.

Landingpages

Mon, 01 Jan 0001 00:00:00 +0000

Eine Landingpage kombiniert einen Hero, Inhalts-Sektionen aus Shortcodes und einen abschließenden CTA. Der Hero wird im Front Matter gesteuert, alles andere ist Markdown.

Hero aus dem Front Matter

 yaml
 
 
hero:
 title: "Von Null zur"
 titleAccent: "fertigen Seite."
 subtitle: "Plattform wählen, Theme einbinden, Inhalte schreiben."
 highlights:
 - icon: "mdi:code-tags"
 label: "Jede Sprache"
 - icon: "mdi:translate"
 label: "Mehrsprachig"
 primary:
 label: "Installieren"
 url: "#install"
 secondary:
 label: "Blueprints ansehen"
 url: "/blueprints"
 code:
 language: bash
 content: |
 hugo server

Feld	Bedeutung
`title`	Überschrift, wird als `h1` der Seite ausgegeben
`titleAccent`	Zweiter Teil der Überschrift, in der Akzentfarbe
`subtitle`	Einleitungsabsatz, wird als Markdown geparst
`highlights`	Liste aus `{ icon, label }`, erscheint als Pills
`primary` / `secondary`	Buttons, jeweils `{ label, url }`
`code`	Einzelner Codeblock: `{ language, content }`
`code.tabs`	Mehrere Codeblöcke, siehe unten

url-Werte laufen durch relLangURL. Sie gehören also ohne Sprachpräfix notiert: /docs, nicht /de/docs.

Shortcodes

Mon, 01 Jan 0001 00:00:00 +0000

Liftoff bringt eine kompakte Sammlung von Shortcodes mit, die du frei kombinieren kannst. Jeder Eintrag listet Parameter, ein Code-Beispiel und eine Live-Vorschau.

Zwei Dinge kommen ganz ohne Shortcode aus, weil sie über Markdown-Render-Hooks laufen: Hinweisboxen und Codeblöcke.

Hinweisboxen

Ein Zitat, das mit einer Alert-Markierung beginnt, wird zur Hinweisbox. Die Beschriftung läuft über i18n und richtet sich damit nach der Sprache der Seite.

 markdown
 
 
> [!NOTE]
> Neutraler Hintergrund.

> [!TIP]
> Eine Abkürzung oder der bessere Weg.

> [!WARNING]
> Etwas, das später Ärger macht.

> [!DANGER]
> Etwas, das den Build sofort zerlegt.

[!CAUTION] gilt als Alias für [!DANGER]. Ein Zitat ohne Markierung bleibt ein normales Zitat.