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.
Überschriften
Das h1 ist dem Artikeltitel vorbehalten, Fließtext beginnt deshalb
bei h2.
## Zweite Ebene
### Dritte Ebene
#### Vierte Ebene
##### Fünfte Ebene
###### Sechste Ebene in VersalienDritte Ebene
Ab der dritten Ebene bringt weitere Verschachtelung selten etwas.
Vierte Ebene
Fünfte Ebene
Sechste Ebene in Versalien
Auszeichnungen im Fließtext
Normaler Text mit **fett**, *kursiv*, ***beidem***, `Inline-Code`,
~~durchgestrichen~~ und <mark>hervorgehoben</mark>.
Abkürzungen wie <abbr title="Static Site Generator">SSG</abbr> bekommen
eine gepunktete Unterstreichung. Mit <kbd>Strg</kbd> + <kbd>C</kbd>
kopierst du.
Zwei Leerzeichen am Zeilenende
erzwingen einen Umbruch ohne neuen Absatz.Normaler Text mit fett, kursiv, beidem, Inline-Code,
durchgestrichen und hervorgehoben.
Abkürzungen wie SSG bekommen eine gepunktete Unterstreichung. Mit Strg + C kopierst du.
Zwei Leerzeichen am Zeilenende
erzwingen einen Umbruch ohne neuen Absatz.
Links
Ein [Link im Text](/docs), einer [mit Titel](/docs "Theme-Doku"), ein
nackter Autolink <https://gohugo.io/> und ein [Referenz-Link][hugo].
[hugo]: https://gohugo.io/Ein Link im Text, einer mit Titel, ein nackter Autolink https://gohugo.io/ und ein Referenz-Link.
Links ab Wurzel werden sprachbewusst aufgelöst. Schreib also /docs,
nicht /de/docs.
Listen
- Design-Tokens liegen in `tokens.css`
- Komponenten liegen in `assets/css/components/`
- Eine Datei pro Komponente
- Eingebunden über `main.css`
- Schriften werden außerhalb des Bundles geladen- Design-Tokens liegen in
tokens.css - Komponenten liegen in
assets/css/components/- Eine Datei pro Komponente
- Eingebunden über
main.css
- Schriften werden außerhalb des Bundles geladen
1. Theme als Modul einbinden
2. Eine Blueprint nach `content/` kopieren
3. Den Beispieltext durch eigenen ersetzen
4. Ausliefern- Theme als Modul einbinden
- Eine Blueprint nach
content/kopieren - Den Beispieltext durch eigenen ersetzen
- Ausliefern
Eine nummerierte Liste darf beliebig anfangen:
7. Siebtens
8. Achtens- Siebtens
- Achtens
Aufgabenlisten verlieren den Aufzählungspunkt und zeigen eine deaktivierte Checkbox:
- [x] Layout steht
- [x] Doku steht
- [ ] Suchindex steht- Layout steht
- Doku steht
- Suchindex steht
Definitionslisten:
Hugo
: Der Static-Site-Generator, für den dieses Theme gebaut ist.
Iconify
: Die Icon-API, aus der das Theme beim Build lädt.- Hugo
- Der Static-Site-Generator, für den dieses Theme gebaut ist.
- Iconify
- Die Icon-API, aus der das Theme beim Build lädt.
Zitate
> Ein Theme soll ein Startpunkt sein, kein Käfig. Wer es forken muss,
> um eine Farbe zu ändern, hat es falsch gebaut.
>
> > Zitate lassen sich schachteln, sinnvoll ist es selten.Ein Theme soll ein Startpunkt sein, kein Käfig. Wer es forken muss, um eine Farbe zu ändern, hat es falsch gebaut.
Zitate lassen sich schachteln, sinnvoll ist es selten.
Hinweisboxen
Ein Zitat, das mit einer Alert-Markierung beginnt, wird zur Hinweisbox. Die Beschriftung ist übersetzt und folgt der Sprache der Seite.
> [!NOTE]
> Neutraler Kontext. Für Hintergrund, den man auch überspringen kann.
> [!TIP]
> Eine Abkürzung oder der bessere Weg zum Ziel.
> [!WARNING]
> Etwas, das später Ärger macht, wenn man es jetzt ignoriert.
> [!DANGER]
> Etwas, das den Build sofort zerlegt.[!CAUTION] gilt als Alias für [!DANGER].
Code
Ein Block mit Sprachangabe bekommt ein Label und einen Copy-Button.
```bash
hugo server --source exampleSite --themesDir ../..
```hugo server --source exampleSite --themesDir ../..Eine andere Sprache, um das Highlighting zu prüfen:
```go
func main() {
site := hugo.New()
site.Render()
}
```func main() {
site := hugo.New()
site.Render()
}Ohne Sprachangabe fällt der Block auf reinen Text zurück:
```
$ hugo mod get codeberg.org/head1328/hugo-liftoff
```$ hugo mod get codeberg.org/head1328/hugo-liftoffEine lange Zeile, um das horizontale Scrollen zu prüfen:
{"module":{"imports":[{"path":"codeberg.org/head1328/hugo-liftoff","disable":false,"ignoreConfig":false,"ignoreImports":false}]}}Diffs behalten ihre Vorzeichen:
- --color-accent: #22d3ee;
+ --color-accent: #f97316;
Tabellen
Doppelpunkte in der Trennzeile steuern die Ausrichtung.
| Token | Zweck | Light Mode |
| :--------------- | :--------------------------: | ---------: |
| `--color-bg` | Seitenhintergrund | ja |
| `--color-accent` | Links, Buttons, Hervorhebung | ja |
| `--space-4` | Vertikaler Standardabstand | nein || Token | Zweck | Light Mode |
|---|---|---|
--color-bg | Seitenhintergrund | ja |
--color-accent | Links, Buttons, Hervorhebung | ja |
--space-4 | Vertikaler Standardabstand | nein |
Bilder
Ein einfaches Bild steht in einer eigenen Zeile. Für eine
Bildunterschrift packst du es in ein figure.
<figure>
<img src="/img/pipeline.svg" alt="Das content-Verzeichnis speist die Layouts, daraus entsteht public">
<figcaption>Markdown rein, statisches HTML raus.</figcaption>
</figure>
Aufklappbare Abschnitte
<details>
<summary>Warum gibt es keine Suche?</summary>
Eine Suche braucht einen Index im Browser oder einen gehosteten Dienst.
</details>Warum gibt es keine Suche?
Eine Suche braucht entweder einen Index im Browser oder einen gehosteten Dienst. Beides ist eine Entscheidung, die in deine Seite gehört und nicht ins Theme.
Fußnoten
Liftoff lädt Icons beim Build.[^1]
[^1]: Hugo cached die geladenen SVGs.Liftoff lädt Icons beim Build, statt einen Icon-Font mitzuliefern.1 So landen nur die Glyphen im Output, die eine Seite wirklich braucht.
Trennlinie und Maskierung
---
Ein Zeichen maskierst du mit Backslash: \*nicht kursiv\*, \# keine
Überschrift.Ein Zeichen maskierst du mit Backslash: *nicht kursiv*, # keine Überschrift.
Wenn bis hierhin alles sauber zu lesen war, macht die Typografie ihren Job.
Hugo cached die geladenen SVGs, wiederholte Builds gehen also nicht erneut ins Netz. ↩︎