Konfiguration

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.

[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.

[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:

hugo gen chromastyles --style=dracula > assets/css/syntax.css

Site-Params

[params]
  description     = "Was deine Seite leistet, in einem Satz."
  tagline         = "Im Footer-Brand-Block sichtbar."
  ogImage         = "/images/og.png"
  accent          = "cyan"
  copyrightOwner  = "ACME"
  copyrightSuffix = "Alle Rechte vorbehalten."

Farbschemata

accent tauscht die beiden Markenfarben aus. Flächen, Schrift und die semantischen Farben bleiben unverändert, und jedes Schema bringt eine passende Light-Mode-Variante mit. Der Umschalter funktioniert also in beiden Fällen weiter.

Die beiden Farben liegen jeweils weit genug auseinander, damit die Verläufe in der Hero-Überschrift, im CTA-Band und im Brandmark als Verlauf erkennbar bleiben. mono ist die bewusste Ausnahme: Dort ist der Abstand minimal, und genau das ist die Absicht.

Der Wert landet auf <html data-accent="...">. Für eine eigene Palette überschreibst du stattdessen direkt die Tokens, siehe Anpassung.

Jeder dieser Werte lässt sich pro Sprache unter [languages.<code>.params] überschreiben.

Repository-Statistik

Zeigt die Sternezahl im Header. Unterstützt sind ausschließlich codeberg und github. Der Wert wird im Browser geladen und eine Stunde im localStorage zwischengespeichert, kostet also keine Build-Zeit.

[params.repo]
  host  = "codeberg"
  owner = "head1328"
  name  = "liftoff"

Social-Links

Erscheinen im Footer. icon ist ein Iconify-Bezeichner. Interne Pfade werden sprachbewusst aufgelöst, externe URLs bleiben unverändert.

[[params.social]]
  icon = "simple-icons:codeberg"
  name = "Codeberg"
  url  = "https://codeberg.org/head1328"

Adresse im Footer

Wird als Markdown geparst, Links und Zeilenumbrüche funktionieren also.

[params.footer]
  address = """
ACME
Musterstadt
[hello@acme.example](mailto:hello@acme.example)
"""

Seitenweise Ausgabe

Die Artikelliste und die Taxonomie-Seiten nutzen Hugos Paginator.

[pagination]
  pagerSize = 6

Sprachen

defaultContentLanguage = "en"
defaultContentLanguageInSubdir = true

[languages.en]
  label  = "English"
  locale = "en"
  weight = 1
[languages.de]
  label  = "Deutsch"
  locale = "de"
  weight = 2

Menüs

[[menus.main]]
  name    = "Docs"
  pageRef = "/docs"
  weight  = 10

Footer-Spalten sind Top-Level-Einträge mit Kindern:

[[menus.footer]]
  identifier = "product"
  name       = "Produkt"
[[menus.footer]]
  parent = "product"
  name   = "Loslegen"
  url    = "/get-started"

Nimm für interne Ziele pageRef statt url. Der Verweis läuft über Hugos Seiten-Lookup, ein Fehler lässt damit den Build scheitern, statt einen 404 auszuliefern. Footer-Einträge mit festem url werden nicht geprüft.

Front Matter

Felder, die das Theme zusätzlich zu Hugos Standards liest.