↓ Zum Hauptinhalt springen

Liftoff: ein Hugo-Theme für Produktseiten

·207 Wörter·1 min

Bei der Arbeit an ivly ist nebenher ein Hugo-Theme entstanden: Liftoff, gedacht für Produktseiten. Landing Page, Dokumentation, Artikel und fertige Seitenvorlagen in einem Theme.

Die Landing Page setzt sich aus Shortcodes zusammen: Hero, tab-basierte Codeblöcke, Feature-Karten, Subscription-Pläne und Call to Action. Die Dokumentation hat ein Inhaltsverzeichnis pro Seite und eine Vor- und Zurück-Navigation. Hinweise und Codeblöcke kommen über Markdown-Render-Hooks und brauchen keinen eigenen Shortcode. Als Blueprints liegen Seitenvorlagen zum Kopieren bei.

Farben, Abstände und Schriftgrößen sind CSS Custom Properties. Somit lässt sich das Theme an das eigene Erscheinungsbild anpassen, ohne es zu forken. Für die Farbverläufe in Headline, Call to Action und Logo gibt es mehrere Farbvorlagen, alle mit Light Mode nach Systemeinstellung. i18n-Support. Icons kommen aus Iconify, etwa Simple Icons, Material Design, Heroicons oder Tabler, und werden beim Build eingebettet.

Vorausgesetzt wird Hugo extended ab Version 0.146.0. Eingebunden wird Liftoff als Hugo-Modul oder als Git-Submodule, die Schritte stehen in der README . Die Demo-Seite läuft selbst mit Liftoff und enthält die Dokumentation aller Shortcodes.

Das Theme steht unter MIT-Lizenz auf Codeberg . Fehlerberichte und Patches nehme ich dort gerne entgegen.


Hat dir das hier geholfen?
Unterstütze gerne via: