So verwenden Sie in Hugo erstellte Vorlagen: Eine Schritt-für-Schritt-Anleitung

Veröffentlicht: 2024-11-27

Hugo ist ein leistungsstarker statischer Site-Generator, der es Entwicklern und Content-Erstellern ermöglicht, schnell schnelle und skalierbare Websites zu erstellen. Eine der Kernfunktionen von Hugo ist das Vorlagensystem, das bei der Strukturierung des Inhalts und der individuellen Gestaltung des Erscheinungsbilds der Website hilft. Wenn Sie neu bei Hugo sind oder die Vorlagenfunktionen effektiver nutzen möchten, zeigt Ihnen diese Schritt-für-Schritt-Anleitung, wie Sie die in Hugo integrierten Vorlagen verwenden.

Was sind Vorlagen in Hugo?

Vorlagen in Hugo sind Dateien, die definieren, wie der Inhalt Ihrer Website gerendert wird. Sie bestehen aus HTML, CSS und Hugo-spezifischem Code, sodass Sie das Layout Ihrer Website anpassen können. Vorlagen können für verschiedene Zwecke verwendet werden, z. B. zum Erstellen von Kopf- und Fußzeilen, einzelnen Seiten, Listen und mehr.

Verstehen des Problems, dass das Kontrollkästchen nicht angezeigt wird

Hugo verfügt über integrierte Vorlagen, die Teil seiner Themenstruktur sind, und ermöglicht Ihnen außerdem die Erstellung benutzerdefinierter Vorlagen für mehr Flexibilität. Diese Vorlagen werden automatisch basierend auf Inhaltstyp, URL-Struktur und anderen Variablen angewendet und erleichtern so die Verwaltung komplexer Websites.

Schritt 1: Hugo installieren und eine neue Site erstellen

Bevor Sie sich mit Vorlagen befassen, müssen Sie zunächst Hugo installieren und Ihre Website einrichten. So machen Sie das:

Hugo installieren :
- Wenn Sie Hugo noch nicht installiert haben, befolgen Sie die offizielle Installationsanleitung für Ihr Betriebssystem: Hugo installieren.
Erstellen Sie eine neue Hugo-Site :
- Führen Sie den folgenden Befehl in Ihrem Terminal aus, um eine neue Site zu erstellen:
```
 hugo new site mysite
```
- Dadurch wird ein neues Verzeichnis namens mysite mit der grundlegenden Dateistruktur für Ihr Hugo-Projekt erstellt.

Schritt 2: Fügen Sie ein Thema hinzu

Hugo arbeitet mit Themen, um zu verwalten, wie Inhalte angezeigt werden. Sie können entweder ein vorhandenes Theme von Hugo Themes verwenden oder ein benutzerdefiniertes erstellen. Der Einfachheit halber verwenden wir ein Thema aus der Hugo-Themenbibliothek.

Fügen Sie ein Thema hinzu :
- Sie können ein Thema hinzufügen, indem Sie es in Ihr themes/ -Verzeichnis klonen. Nehmen wir zum Beispiel das Thema „Ananke“:
```
 git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
```
Konfigurieren Sie das Thema :
- Öffnen Sie Ihre config.toml Datei und legen Sie das Thema fest:
```
 theme = "ananke"
```

Schritt 3: Verstehen Sie die Struktur der Hugo-Vorlage

Das Template-System von Hugo basiert auf der Template-Sprache Go. Die Vorlagen sind je nach Zweck in mehrere Kategorien unterteilt:

Basisvorlagen : Dies sind die übergreifenden Vorlagen, die den Inhalt umschließen. Sie enthalten häufig allgemeine Abschnitte wie Kopf- und Fußzeilen sowie die Navigation.
Inhaltsvorlagen : Diese definieren, wie einzelne Inhaltstypen (z. B. Blogbeiträge, Seiten, Abschnitte) angezeigt werden.
Listenvorlagen : Diese Vorlagen steuern, wie Inhaltsgruppen dargestellt werden (z. B. eine Liste von Blogbeiträgen).
Teilvorlagen : Dies sind kleinere wiederverwendbare Snippets (z. B. Navigationsleiste oder Fußzeile), die in den Hauptvorlagen enthalten sind.

Gemeinsame Vorlagenverzeichnisse

layouts/ : Enthält alle Layoutdateien wie index.html , single.html usw.
themes/ : Enthält Vorlagen, die mit dem von Ihnen gewählten Thema geliefert werden.
content/ : Speichert Ihre Inhaltsdateien (normalerweise in Markdown geschrieben).

Schritt 4: Erstellen Sie eine Vorlage

Sehen wir uns an, wie Sie eine Vorlage für eine Seite erstellen und ändern.

Erstellen Sie eine neue Inhaltsdatei :
- Um eine neue Seite (z. B. einen Blog-Beitrag) zu erstellen, verwenden Sie den folgenden Befehl:
```
 hugo new posts/my-first-post.md
```
- Dadurch wird eine neue Markdown-Datei in content/posts/ mit Titelangelegenheit (YAML oder TOML) und einem Platzhalter für Ihren Inhalt erstellt.
Erstellen Sie eine Vorlage für einzelne Seiten :
- Erstellen Sie im Verzeichnis layouts eine Datei mit dem Namen single.html “ innerhalb von layouts/_default/ . Dadurch wird gesteuert, wie einzelne Inhaltsseiten angezeigt werden.
```
  <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <article> {{ .Content }} </article> </main> </body> </html>
```
- Diese Vorlage zeigt den Titel und den Inhalt jeder einzelnen Seite an, die Sie erstellen.

Erstellen Sie eine Listenvorlage :

Ebenso können Sie eine Listenvorlage zum Anzeigen mehrerer Inhaltselemente erstellen (z. B. eine Liste von Beiträgen). Erstellen Sie eine list.html im Verzeichnis layouts/_default/ .

 <!-- layouts/_default/list.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <ul> {{ range .Pages }} <li><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }} </ul> </main> </body> </html>

Schritt 5: Anpassen von Vorlagen

Sie können Ihre Vorlagen mit den umfangreichen Vorlagenfunktionen von Hugo erweitern. Sie können beispielsweise benutzerdefiniertes CSS einbinden, Variablen durchlaufen oder Datumsangaben formatieren:

CSS hinzufügen : Sie können eine CSS-Datei mit Ihrer Vorlage verknüpfen:
```
 <link rel="stylesheet" href="{{ "styles.css" | relURL }}">
```
Datumsangaben formatieren : Verwenden Sie die date , um Datumsangaben in einem bestimmten Format anzuzeigen:
```
 <p>Published on: {{ .Date.Format "January 2, 2006" }}</p>
```

Schritt 6: Bereitstellung und Vorschau Ihrer Website

Sobald Ihre Vorlagen vorhanden sind und Sie Inhalte hinzugefügt haben, können Sie eine lokale Vorschau Ihrer Website anzeigen:

 hugo server

Navigieren Sie zu http://localhost:1313 um Ihre Website anzuzeigen.

FAQ zu Hugo-Vorlagen

1. Welchen Zweck hat das Verzeichnis „layouts“ in Hugo?

Im layouts speichern Sie alle Ihre Vorlagendateien in Hugo. Es wird verwendet, um zu definieren, wie verschiedene Arten von Inhalten (z. B. Beiträge, Seiten, Listen) im Frontend Ihrer Website gerendert werden. Die Vorlagen sind nach Typ und Speicherort organisiert, z. B. single.html für einzelne Inhaltsseiten und list.html für Inhaltslisten.

2. Kann ich in Hugo meine eigenen benutzerdefinierten Vorlagen erstellen?

Ja, Sie können in Hugo benutzerdefinierte Vorlagen erstellen. Indem Sie Ihre Vorlagen im layouts ablegen, können Sie spezielle Vorlagen für bestimmte Inhaltstypen, Abschnitte oder sogar einzigartige Inhaltsanzeigen erstellen. Hugo ermöglicht Ihnen auch, Standardvorlagen Ihres gewählten Themas zu überschreiben.

3. Wie geht Hugo mit Inhaltsdateien und Vorlagen um?

Hugo verwendet ein System, bei dem Inhaltsdateien (geschrieben in Markdown oder anderen Formaten) mit Vorlagen gepaart werden, um zu definieren, wie sie angezeigt werden. Wenn Sie Inhalte erstellen (z. B. einen Blog-Beitrag), sucht Hugo automatisch nach einer geeigneten Vorlage (z. B. single.html ) und rendert den Inhalt mithilfe dieser Vorlage. Hugo unterstützt auch die Organisation von Inhalten in Abschnitte, die verschiedene Vorlagen verwenden können.

4. Was sind Teilvorlagen in Hugo?

Teilvorlagen sind wiederverwendbare Komponenten oder HTML-Schnipsel, die in andere Vorlagen eingebunden werden können. Beispielsweise können eine Kopfzeile, eine Fußzeile oder ein Navigationsmenü als Teilelemente erstellt und mithilfe des {{ partial "header.html" . }} Syntax. Dies hilft bei der Einhaltung der DRY-Prinzipien (Don't Repeat Yourself) und erleichtert die Verwaltung der Website.

5. Kann ich Hugo-Vorlagen mit einem benutzerdefinierten Design verwenden?

Ja, Sie können in Hugo benutzerdefinierte Designs verwenden. Sie können entweder Ihr eigenes Theme erstellen oder ein vorhandenes aus dem Hugo-Theme-Repository verwenden. Wenn Sie ein vorhandenes Theme verwenden, können Sie dessen Vorlagen überschreiben, indem Sie Ihre benutzerdefinierten Vorlagen im layouts hinzufügen. Dadurch können Sie bestimmte Teile des Themes ändern, ohne die gesamte Struktur zu ändern.

Wenn Sie diese Schritte befolgen und das Vorlagensystem von Hugo verstehen, können Sie leistungsstarke, anpassbare Websites erstellen. Unabhängig davon, ob Sie integrierte Vorlagen verwenden oder Ihre eigenen erstellen, bietet Hugo die nötige Flexibilität und Geschwindigkeit, um statische Websites problemlos zu entwickeln.