Artikel on Liftoff

Alle Markdown-Elemente auf einer Seite

Fri, 10 Jul 2026 00:00:00 +0000

Dieser Artikel darf ruhig überladen wirken, das ist Absicht. Er spielt jedes Markdown-Element durch, das im Theme gestaltet ist. Damit lassen sich Typografie, Abstände und der Kontrast im Dark Mode an einer Stelle prüfen. Was hier schief aussieht, sieht auch in deinen Inhalten schief aus.

Jeder Abschnitt zeigt zuerst den Quelltext, darunter das Ergebnis.

Eine Doku-Seite an einem Nachmittag

Sun, 28 Jun 2026 00:00:00 +0000

Die meisten Doku-Seiten scheitern an der Struktur, nicht am Text. Der erste Nachmittag geht für den Generator drauf, der zweite für die Navigation, und nach dem dritten stehen vier Seiten und die Lust ist weg. Diese Anleitung springt direkt zu dem Teil, in dem du schreibst.

Als Modul einbinden, nicht forken

Binde Liftoff als Hugo-Modul ein, statt es nach themes/ zu kopieren. So bleiben Updates möglich, und dein Repository bleibt überschaubar.

Icons ohne Build-Schritt

Fri, 12 Jun 2026 00:00:00 +0000

Icon-Fonts liefern jede Glyphe an jeden Besucher aus. Sprite-Sheets brauchen einen Build-Schritt und eine Namenskonvention, die sich niemand merkt. Liftoff geht einen dritten Weg: Jedes Icon wird während des Hugo-Builds von der Iconify-API geladen und als SVG eingebettet.

 go-html-template
 
{{ partial "icon.html" "simple-icons:codeberg" }}

Jedes Set auf Iconify funktioniert, adressiert als set:name. Ein Name ohne Präfix landet bei den Material Design Icons, check und mdi:check sind also dasselbe Icon.

Zweisprachig ab dem ersten Tag

Sun, 24 May 2026 00:00:00 +0000

Eine zweite Sprache nachzurüsten sieht nach einem Nachmittag aus und wird ein Wochenende. Jede Inhaltsdatei braucht ein Gegenstück, jeder Menüeintrag eine Übersetzung, jede Data-Datei eine Variante, und jedes fest verdrahtete Datumsformat entpuppt sich als englisch.

Vorab konfiguriert kostet es fast nichts, selbst wenn es bei einer Sprache bleibt.

 toml
 
 
defaultContentLanguage = "de"
defaultContentLanguageInSubdir = true

[languages]
 [languages.de]
 label = "Deutsch"
 weight = 1

Die Sprache steckt danach im Dateinamen: about.md und about.en.md liegen nebeneinander, Hugo verknüpft sie von selbst.

Ein Performance-Budget, das man einhält

Fri, 15 May 2026 00:00:00 +0000

Ein Performance-Budget funktioniert nur, wenn es kurz genug ist, um im Kopf zu bleiben. Für eine Inhaltsseite reichen drei Zahlen.

Budget	Zielwert	Was es sprengt
Requests pro Seite	unter 10	Webfonts, Analytics
CSS	unter 30 kB	Utility-Frameworks
JavaScript	unter 10 kB	alles mit Build-Schritt

Liftoff gibt sein JavaScript für drei Dinge aus: den Theme-Umschalter, die Copy-Buttons an Codeblöcken und den Blueprint-Filter. Alle drei bleiben ohne Skripte benutzbar, und nur deshalb dürfen sie überhaupt existieren.

Dark Mode, der das System respektiert

Fri, 08 May 2026 00:00:00 +0000

Ein Umschalter, der für alle erst mal dunkel startet, ist eine Geschmacksfrage im Gewand eines Features. Liftoff liest zuerst prefers-color-scheme und schreibt erst dann nach localStorage, wenn jemand tatsächlich ein Schema wählt.

 js
 
 
const stored = localStorage.getItem("liftoff.theme");
const system = matchMedia("(prefers-color-scheme: light)").matches;

Diese Reihenfolge ist der Punkt. Wer sein System hell eingestellt hat, bekommt eine helle Seite, ohne dass kurz Dunkel aufblitzt. Wer danach bewusst auf Dunkel wechselt, behält Dunkel, auch wenn sich das System später ändert: Eine ausdrückliche Wahl schlägt eine abgeleitete.

Über Design-Tokens

Sat, 02 May 2026 00:00:00 +0000

Liftoff legt seine Palette, sein Spacing und die Typografie als CSS Custom Properties auf :root offen. Konsument:innen können das Theme anpassen, ohne es zu forken.

Override-Pattern

Lege eine kleine CSS-Datei in assets/css/ deiner Seite ab und binde sie nach dem Theme-Bundle ein.

 css
 
 
:root {
 --color-accent: #ff7a59;
 --color-bg: #0d0a0a;
}

Der Light-Mode ist Opt-in über data-theme="light" am <html>-Element. Der eingebaute Toggle merkt sich die Wahl in localStorage, Fallback ist prefers-color-scheme.

Warum nicht Tailwind

Für ein Theme, das als Hugo-Modul ausgeliefert wird, ist eine Node-Toolchain Reibung. Reines CSS mit Variablen bringt keine Abhängigkeiten und bleibt lesbar.

Hallo, Liftoff

Wed, 15 Apr 2026 00:00:00 +0000

Ich habe für jede kleine Produktseite immer wieder dasselbe Gerüst gebaut: einen Hero mit Code-Block, OS-spezifische Installations-Tabs, ein Feature-Grid, eine Doku-Sektion und einen abschließenden CTA. Liftoff bündelt diese Bausteine in einem Hugo-Theme mit sinnvollen Dark-Defaults.

Was im ersten Wurf drin ist

Hero-Partial aus dem Front Matter
OS-Tabs als leichter Shortcode
Code-Blöcke mit Copy-Button
Feature-, Integrations-, Pricing-, Testimonial- und CTA-Shortcodes
Doku-Layout mit Karten-Index, “On this page”-TOC, Vor/Zurück-Navigation
Blog- und Showcase-Bereiche

Wohin es geht

I18n-Strings sind für Deutsch und Englisch dabei. Weitere Sprachen sind eine i18n/<lang>.yaml-Datei entfernt.