↓Zum Hauptinhalt springen
  1. Artikel/

Hugo: Navigation und Themes

Default Default
Inhaltsverzeichnis

Seitenstruktur & Navigation mit Hugo #

Navigation, Unterseiten & Verlinkung #

Hugo erlaubt dir, strukturierte Websites mit Unterseiten und Menüs ganz einfach über Markdown und Konfiguration aufzubauen. Hier sind die wichtigsten Konzepte:

Seitenstruktur mit Sections und Unterseiten #

Erzeuge Unterseiten einfach über Ordner:

hugo new projekte/_index.md           # Übersichtsseite der Section
hugo new projekte/solar-tracker.md    # Unterseite

Beispiel: #

content/
├── projekte/
│   ├── _index.md        ← Section-Startseite
│   ├── solar-tracker.md
│   └── segelboot.md

Verlinkungen #

In Markdown: #

[Mein Projekt](/projekte/solar-tracker/)

Relativ und Theme-sicher mit relref: #

[Mein Projekt]({{\< relref "projekte/solar-tracker.md" \>}})

Menüs definieren #

Variante 1: Zentral in config.toml #

[[menu.main]]
  name = "Home"
  url = "/"
  weight = 1

[[menu.main]]
  name = "Projekte"
  url = "/projekte/"
  weight = 2

[[menu.main]]
  parent = "Projekte"
  name = "Solar Tracker"
  url = "/projekte/solar-tracker/"
  weight = 1

Variante 2: Direkt im Frontmatter deiner Seite #

---
title: "Über mich"
menu: "main"
weight: 3
---

Vergleich: Drei beliebte Hugo-Themes #

Theme Stil Menüunterstützung Merkmale
beautifulhugo Klassisch & elegant ✅ Submenüs Bootstrap, Blog-optimiert
nightfall Dunkel & technisch ❌ flach Minimal, Code-zentriert
risotto Dev-freundlich, Docs ✅ (Docs Style) Ideal für Projektseiten & Portfolios
congo Clean, Bicolor, international ✅ Submenüs Gut für Blogs und Profile und Portfolios

Installation als Submodul #

git submodule add https://github.com/username/theme-repo.git themes/themename

z.B.:

git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo

In deiner config.toml:

theme = "beautifulhugo"

Fazit #

  • Erstelle Unterseiten mit _index.md + *.md
  • Verlinke über relative Pfade oder relref
  • Menüs via config.toml oder Frontmatter
  • Nutze passende Themes für deine Zwecke:
    • Blog: beautifulhugo
    • Dev/Portfolio: risotto
    • Minimal/Dark: nightfall
    • Präsentation einer One Man Show: congo

Viel Spaß beim Strukturieren!

↑