Einführung in gängige Anwendungstechniken von Hugo

Hugo verwendet den Open-Source-Goldmark als Markdown-Parser, der mit GitHub kompatibel ist.

Einführung

Hugo ist ein Tool zur Generierung statischer Webseiten, das in Golang geschrieben ist, und seine Effizienz ist viel höher als die von Jekyll, das in Ruby geschrieben ist. Sie können das binäre Paket direkt von Github herunterladen und es nach dem Entpacken der PATH-Umgebungsvariable hinzufügen, um es zu verwenden.

Es wird empfohlen, die Hugo-Extended-Version zu installieren, die die SCSS-Funktion unterstützt und sich für die Themenentwicklung eignet. Darüber hinaus wurden viele Erweiterungen durch Goldmark implementiert, und die am häufigsten verwendete ist die Aufgabenliste. Eine detaillierte Liste finden Sie in der Einführung in MarkdownGuide. Hugo kann in hohem Maße angepasst werden und versucht, während des Designs mit der Markdown-Syntax kompatibel zu sein.

Grundlegende Verwendung

Anpassen der Seite über das Theme: Es stehen viele Themes zur Auswahl, die unter themes.gohugo.io eingesehen werden können. Nehmen Sie Hugo - geekdoc als Beispiel. Nach dem Herunterladen legen Sie es direkt in das Verzeichnis themes des Projekts.
Überprüfen, ob die Installation erfolgreich war:

hugo version

Erstellen eines neuen Projekts im aktuellen Verzeichnis:

hugo new site hugo

Fügen Sie die Theme-Vorlage zum Verzeichnis themes hinzu und fügen Sie theme="doks" in der Konfigurationsdatei config.toml hinzu oder starten Sie sie mit dem Parameter --theme hyde:

git clone --depth 1 --recursive https://github.com/h - enk/doks.git themes

Erstellen eines Artikels:

hugo --verbose new post/create - hugo - blog.md

Starten des Dienstes:

hugo server --buildDrafts --bind="0.0.0.0" --port=38787

Generieren statischer Dateien (einschließlich Entwürfen) und speichern sie im buildDir-Verzeichnis, das standardmäßig öffentlich ist:

hugo -D

Konfigurationsdateien

Standardmäßig werden Konfigurationsdateien wie hugo.toml, hugo.yaml und hugo.json im Stammverzeichnis verwendet. Sie können die Konfigurationsdateien auch in der Art von --config a.toml,b.toml angeben. Es wird jedoch empfohlen, ein Verzeichnis zu verwenden, das standardmäßig das Verzeichnis config ist und mit dem Konfigurationselement configDir in der Konfigurationsdatei geändert werden kann.

hugo.toml
config/
 |-_default/ 
 | |-hugo.toml
 | |-languages.toml
 | |-menus.en.toml
 | |-menus.cn.toml
 | `-params.toml
 |-develop/
 | |-hugo.toml
 | `-params.toml
 `-production/
   `-hugo.toml

Die erste Ebene im Verzeichnis ist die Umgebung, einschließlich der _default-Standardkonfiguration, und es wird auch häufig ein Produktionsverzeichnis konfiguriert. Wenn Sie beispielsweise mit --environment production starten, wird die Konfiguration in _default mit der in production zusammengeführt, und sie kann auf folgende Weise in der Vorlage überprüft werden:

{{ if eq hugo.Environment "production" }}
<div> Production Mode </div>
{{ else }}
<div> Development Mode </div>
{{ end }}

Die zweite Ebene entspricht der obersten Ebene der Konfigurationselemente. Üblicherweise entspricht [Params] params.toml und [Menu] menu.toml, einschließlich verschiedener Sprachen.

Grundlegende Konzepte

Abschnitt

Eine Sammlung von Seiten, die basierend auf der Inhaltsverzeichnisstruktur definiert werden. Die Unterverzeichnisse der ersten Ebene unter diesem Verzeichnis sind alle Abschnitte. Wenn ein Unterverzeichnis ein Abschnitt sein soll, müssen Sie eine Datei _index.md im Verzeichnis definieren, und auf diese Weise bilden alle Abschnitte einen Abschnittsbaum.

content/
 `-blog/               <-- Abschnitt, da es sich um ein Unterverzeichnis von content handelt
   |-funny - cats/
   | |-mypost.md
   | `-kittens/        <-- Abschnitt, da es _index.md enthält
   |   `-_index.md
   `-tech/             <-- Abschnitt, das gleiche wie oben
       `-_index.md

Zusätzlich zur Klassifizierung von Inhalten über Section ist auch eine Type-Anpassung zulässig. Wenn auf der Seite kein Type vorhanden ist, wird standardmäßig der Wert verwendet, der Section entspricht. Bei der Verwendung können Sie sich auf die folgende Nachschlage-Reihenfolge beziehen. Es ist ersichtlich, dass der Vorlagen-Type eine höhere Priorität als Section hat, was eine bessere Anpassung ermöglicht. Sie können auch verschiedene Seitentypen verarbeiten, einschließlich Seite, Abschnitt, Begriff, Startseite, Taxonomie usw., d. h. die Variable.Kind. Sie können sich auf die Einführung in den offiziellen Methods Kind beziehen.

Vorlagen

Hugo verwendet die html/template-Bibliothek von GoLang als Vorlagen-Engine, die in drei Arten von Vorlagen unterteilt ist:

single: Wird zum Rendern einer einzelnen Seite verwendet.
list: Rendert eine Reihe verwandter Inhalte, z. B. alle Inhalte in einem Verzeichnis.
partial: Kann von anderen Vorlagen referenziert werden und dient als Komponente auf Vorlagenebene, z. B. die Seitenkopfzeile und die Seitenfußzeile.

Unter diesen dient baseof.html als Stammvorlage für verschiedene Abschnitte, und es gibt einen Vorlagen-Nachschlage-Mechanismus. Wenn keine Vorlage gefunden werden kann, die vollständig mit dem Inhalt übereinstimmt, wird sie um eine Ebene nach oben verschoben und von dort aus gesucht. Die Nachschlageregeln für die grundlegende Vorlage baseof.html lauten wie folgt:

/layouts/section/<TYPE>-baseof.html
/themes/<THEME>/layouts/section/<TYPE>-baseof.html <--- Vorlagen für verschiedene Typen
/layouts/<TYPE>/baseof.html
/themes/<THEME>/layouts/<TYPE>/baseof.html
/layouts/section/baseof.html
/themes/<THEME>/layouts/section/baseof.html <--- Vorlagen für verschiedene Abschnitte
/layouts/_default/<TYPE>-baseof.html
/themes/<THEME>/layouts/_default/<TYPE>-baseof.html
/layouts/_default/baseof.html
/themes/<THEME>/layouts/_default/baseof.html <--- Standardwert

In der Vorlage wird das Partials-Modul über {{ partial "xx" . }} eingeführt, und die entsprechenden Seiteninformationen im Modul können über {{ . }} angezeigt werden. Darüber hinaus können Parameter auf folgende Weise hinzugefügt werden: {{ partial "header.html" (dict "current" . "param1" "1" "param2" "2" ) }}.

Zusätzlich zu der oben genannten Art der Einführung von Partials können Sie auch ein Modul in verschiedenen Typen (z. B. single, list usw.) über {{ define "main" }} ... {{ end }} anpassen und es dann auf diese Weise verwenden: {{ block "main" . }} ... {{ end }}.

Variablenreferenz

In der Vorlage werden Variablen auf diese Weise referenziert: {{ xxx }}, und die Möglichkeiten zur Verwendung von Variablen sind wie folgt:

Globale Konfiguration: Beispielsweise entspricht .Site.Params.titile dem [Params] in hugo.toml oder der Konfiguration in config/_default/params.toml.
Seitenparameter: Sie können am Anfang angegeben und auf diese Weise referenziert werden: .Params.xxx.
Andere Parameter: Sie enthalten einige integrierte Parameter und können direkt verwendet werden, z. B. .Title, .Section, .Content und .Page.
Lokalisierungsparameter: Üblicherweise werden sie durch i18n "global - identifier" angegeben oder durch i18n .Site.Params.xxx konvertiert.
Verwenden von Funktionen: Zum Beispiel hugo.Environment, hugo.IsExtended usw. Für andere können Sie sich auf den Inhalt von Functions beziehen.

Zusätzlich zu den oben genannten Variablen können Datendateien in Formaten wie json, yaml, toml und xml auch im Datenverzeichnis gespeichert und in der Vorlage auf diese Weise referenziert werden: .Site.Data.xxx.

Grundlegende Syntax

Die Vorlage wird von {{ }} umschlossen, und der Inhalt im Inneren wird als Aktion (Action) bezeichnet, die im Allgemeinen zwei Typen umfasst:

Datenauswertung: Sie wird direkt an die Vorlage ausgegeben, einschließlich der direkten Verwendung von Variablen.
Kontrollstruktur: Sie umfasst Bedingungen, Schleifen, Funktionen usw.

Darüber hinaus können Sie steuern, ob jede Zeile umbrochen werden soll. Sie wird durch - gesteuert. Beispielsweise bedeutet {{- -}}, dass weder der Start noch das Ende umbrochen werden, sondern sie kann auch am Ende komprimiert werden.

----- Comment
{{/* comment */}}
-----
{{ .Title }}
{{ $var }}
{{ $var := "Value" }}
{{ $var := `Hello
World` }}

Slice VS. Map

Slice entspricht dem Array, und die gängigen Operationen sind wie folgt:

{{ $fruit := slice "Apple" "Banana" }}

{{ $fruit = append "Cherry" $fruit }}
{{ $fruit = append $fruit (slice "Pear") }}
{{ $fruit = append (slice "Cherry" "Peach") $fruit }}

{{ $fruit = uniq $fruit }}

{{ range $fruit }}
  I love {{ . }}
{{ end }}

{{ range $index, $value := $fruit }}
  {{ $value }} or {{ . }} is at index {{ $index }}
{{ end }}

{{ $first := first 2 $fruit }}
{{ $last := last 3 $fruit }}
{{ $third := first 3 $fruit | last 1 }}
{{ $third := index $fruit 2 }}

Die Verwendung des Wörterbuchs ist wie folgt:

{{ $hero := dict "firstame" "John" "lastname" "Lennon" }}

{{ $hero = merge $hero (dict "birth" "1940") }}

{{ $hero.firstame }}
{{ $firstname := index $hero "firstname" }}
{{ range $key, $value := $hero }}
  {{ $key }}: {{ $value }}
{{ end }}

{{ $basis := "lastname" }}
{{ if eq $relation "friend" }}
  {{ $basis = "firstname" }}
{{ end }}
Hello {{ index $hero $basis }}!

{{ range slice "firstname" "lastname" }}
  {{ . }}: {{ index $hero . }}
{{ end }}

Bei der Verwendung können Sie den spezifischen Typ über {{ if reflect.IsSlice $value }} oder IsMap beurteilen.

Logische Beurteilung

Die if-Anweisung wird verwendet, um die Wahrheit oder Falschheit eines bestimmten Wertes zu beurteilen, es wird jedoch empfohlen, with zu verwenden, und zu diesem Zeitpunkt wird der Kontext innerhalb des Gültigkeitsbereichs neu gebunden.

{{ if .IsHome }} xxx {{ end }}          // Sie wird aufgerufen, wenn IsHome wahr ist, andernfalls verwenden Sie not
{{ if eq .Title "Home" }} xxx {{ end }} // Beurteilen Sie, ob die Variablen gleich sind, und ne für nicht gleich
{{ if and .IsHome .Params.show }} xxx {{ end }}   // Mehrere Bedingungen werden gleichzeitig erfüllt, oder eine der Bedingungen muss erfüllt sein
{{ if strings.Contains "hugo" "go" }} xxx {{end}} // Beurteilen Sie, ob es die angegebene Zeichenfolge enthält

// Die folgenden beiden Möglichkeiten sind gleichwertig, und sie wird übersprungen, wenn sie leer ist
{{ if isset .Params "title" }}
    <h4>{{ index .Params "title" }}</h4>
{{ end }}
{{ with .Params.title }}
    <h4>{{ . }}</h4>
{{ end }}

// Aber if kann die else if-Anweisung verwenden
{{ if (isset .Params "description") }}
    {{ index .Params "description" }}
{{ else if (isset .Params "summary") }}
    {{ index .Params "summary" }}
{{ else }}
    {{ .Summary }}
{{ end }}

// Das Folgende ist eine etwas komplexere Logik
{{ if (and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")) }}
    <div class="caption {{ index .Params "attr" }}">
        {{ if (isset .Params "title") }}
            <h4>{{ index .Params "title" }}</h4>
        {{ end }}
        {{ if (isset .Params "caption") }}
            <p>{{ index .Params "caption" }}</p>
        {{ end }}
    </div>
{{ end }}

Wenn das Beschreibungsattribut in Param festgelegt ist, wird der Beschreibungsinhalt von Param ausgegeben, andernfalls wird der Inhalt von Summary ausgegeben.

{{ with .Param "description" }}
    {{ . }}
{{ else }}
    {{ .Summary }}
{{ end }}

Iteration

Für Wörterbuchdaten kann sie über {{ range $idx, $var := .Site.Data.xxx }} durchlaufen werden, und für Arrays kann sie auf diese Weise durchlaufen werden: {{ range $arr }}. Auch hier wird das obige Data als Beispiel genommen, Sie können Daten auf folgende Weise sortieren, filtern und abrufen.

// Hier greift der Kontext auf die Array-Elemente zu. Um auf den globalen Kontext zuzugreifen, müssen Sie $ verwenden, um auf den globalen Kontext zuzugreifen
{{ range $array }}
    {{ . }}
{{ end }}

// Sie können Variablen und Elementindizes deklarieren
{{ range $val := $array }}
    {{ $val }}
{{ end }}
{{ range $idx, $val := $array }}
   {{ $idx }} -- {{ $val }}
{{ end }}

// Deklarieren Sie Variablen für die Indizes und Werte von Map-Elementen
{{ range $key, $val := $map }}
   {{ $key }} -- {{ $val }}
{{ end }}

// Wenn der übergebene Parameter leer ist, wird die else-Anweisung ausgeführt
{{ range $array }}
    {{ . }}
{{else}}
    // Sie wird nur ausgeführt, wenn $array leer ist
{{ end }}

Darüber hinaus können Sie auch die folgenden Möglichkeiten verwenden:

<ul>
  {{ range sort .Site.Data.books.fiction "title" }}
    <li>{{ .title }} ({{ .author }})</li>
  {{ end }}
</ul>

{{ range where .Site.Data.books.fiction "isbn" "978 - 0140443530" }}
  <li>{{ .title }} ({{ .author }})</li>
{{ end }}

{{ index .Site.Data.books "historical - fiction" }}

Auf diese Weise können Sie nach verschiedenen Variablen filtern, und das Gleiche gilt für integrierte Variablen wie .Site.Pages.

Im Folgenden wird die Verarbeitung der bedingten Filterung dargestellt:

{{- if and (isset .Params "math") (eq .Params.math true) }}
{{- end -}}

Filtern von Seiten

Im Folgenden wird zuerst die Daten des aktuellen Abschnitts gefiltert, und die Seite muss die Option class: "page" festlegen. Zuerst werden sie nach dem Jahr aggregiert und dann in umgekehrter Reihenfolge nach dem Datum sortiert und das Datum und die entsprechenden Titelinformationen angezeigt.

{{ $blogs := where (where .Site.Pages "Section" .Section) "Params.Class" "==" "page" -}}
{{ range $blogs.GroupByDate "2006" "desc" }}
<h1>{{ .Key }}</h1>
<ul>
{{ range .Pages.ByDate.Reverse }}
  <li><span>{{ .Date.Format "2006 - 01 - 02" }}</span> <a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
{{ end }}

Die auf der Seite verfügbaren Variablen können über Page Variables angezeigt werden, und wenn Sie direkt über {{ . }} drucken, wird der Dateipfad angezeigt.

Weitere häufig verwendete Anwendungsbeispiele sind wie folgt:

{{ range .Data.Pages }}                        // Durchlaufen von Data.Pages
{{ range where .Data.Pages "Section" "blog" }} // Durchlaufen von Data.Pages und Filtern der Daten mit Section als Blog
{{ range first 10 .Data.Pages }}               // Durchlaufen von Data.Pages und Entnehmen der ersten 10 Datenelemente
{{ range last 10 .Data.Pages }}                // Durchlaufen von Data.Pages und Entnehmen der letzten 10 Datenelemente
{{ range after 10 .Data.Pages }}               // Durchlaufen von Data.Pages und Entnehmen der Daten nach dem 10. Element
{{ range until 10 .Data.Pages }}               // Durchlaufen von Data.Pages und Entnehmen der Daten vor dem 10. Element

Short Codes

ShortCodes werden hauptsächlich verwendet, um einige Verarbeitungslogiken zu verarbeiten, die in Markdown nicht bequem darstellbar sind, wodurch das Schreiben von etwas ursprünglichem HTML-Code entfällt. Die offizielle Website bietet einige Standardimplementierungen, z. B. Links zu einigen Video-Websites, relref usw., und der Quellcode kann auf Github eingesehen werden.

Angenommen, es gibt einen Foobar-ShortCode, der auf folgende Weise verwendet werden kann. Beachten Sie die Art des Umschließens von Parametern. Derzeit wurde keine bessere Möglichkeit gefunden, das Rendern zu verhindern.

{{ foobar "foo" "bar" }}
Some short codes
{{ /foobar }}

Es gibt verschiedene Möglichkeiten, die obigen Parameter in der ShortCode-Vorlage zu erhalten: Erhalten Sie sie über with .Get 0, was am einfachsten und direktesten ist; oder erhalten Sie sie über index .Params 0, und der Inhalt im Inneren kann über die Methode .Inner gelesen werden und muss aufgerufen werden. Darüber hinaus können Sie sich auch auf einige Beispiele in Hugo ShortCodes beziehen.

Häufig verwendete Funktionen

In der Vorlage kann sie auf diese Weise referenziert werden: {{ with .Site.Data.Resume . }} {{ .SomeData }} {{ end }}.

Erweiterte Verwendung

Statische Dateien

Einschließlich Bilder, CSS, JavaScript usw., die normalerweise vorhandene Dateien sind, z. B. Bibliotheken von Drittanbietern Bootstrap, FontAwesome usw. Bei der Referenzierung müssen sie im statischen Verzeichnis platziert werden, und in der Vorlage müssen sie im entsprechenden Verzeichnis platziert werden und werden automatisch kopiert.

Sie kann auf diese Weise referenziert werden: {{ "css/bootstrap.min.css" | absURL }}. Wenn Sie zu diesem Zeitpunkt auf http://foobar.com/css/bootstrap.min.css zugreifen, wird sie der Datei static/css/bootstrap.min.css zugeordnet.

Mounts

Sie können JS-Pakete von Drittanbietern über npm verwalten, aber zu diesem Zeitpunkt müssen Sie sie über module.mounts in der Konfigurationsdatei konfigurieren.

[module]
  [[module.mounts]]    
    source = "node_modules/katex/dist"
    target = "static/katex"

In der Vorlage kann sie dann auf folgende Weise verwendet werden:

<script type="text/javascript" src="{{ "katex/katex.min.js" | absURL }}"></script>`
<link rel="stylesheet" href="{{ "katex/katex.min.css" | absURL }}"/>

CSS

Seit Version 0.43 unterstützt Hugo die Kompilierung von SASS. Die Quelldateien können jedoch nur im Verzeichnis /assets/scss/ oder /themes/<NAME>/assets/scss/ platziert werden. Dann kann sie auf folgende Weise eingeführt werden:

{{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}

Verwenden Sie resources.Get, um den Inhalt der SCSS-Datei abzurufen, und verwenden Sie dann die Pipeline, um eine Kompilierung, Komprimierung und Generierung eines Fingerabdrucks durchzuführen. Dies kann der generierten Datei einen Hash-Dateinamen hinzufügen, sodass das neueste CSS vom CDN anstelle der zwischengespeicherten alten Datei abgerufen werden kann. Zusätzlich zu den oben genannten Konfigurationsoptionen zum Kompilieren von CSS können Sie sich auch auf Folgendes beziehen:

{{ $opts := (dict "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "node_modules")) -}}

Die Codehervorhebung kann über den folgenden Befehl generiert werden, und Beispiele finden Sie unter Style Longer und Style.

hugo gen chromastyles --style=monokai > syntax.css

Beachten Sie, dass der Konfigurationsparameter codeFences=true festgelegt werden sollte, andernfalls werden Informationen wie Zeilennummern in Form einer Tabelle angezeigt, was zu einer abnormalen Anzeige führt.

JavaScript

Ähnlich wie bei CSS können JS-Skripte auf folgende Weise eingeführt werden:

{{ $params := dict "api" "https://example.org/api" }}
{{ with resources.Get "js/main.js" }}
  {{ if hugo.IsDevelopment }}
    {{ with . | js.Build }}
      <script src="{{ .RelPermalink }}"></script>
    {{ end }}
  {{ else }}
    {{ $opts := dict "minify" true "params" $params }}
    {{ with . | js.Build $opts | fingerprint }}
      <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
    {{ end }}
  {{ end }}
{{ end }}

Im Skript können Parameter auf diese Weise referenziert werden: import * as params from '@params';, und React-Code kann sogar über die Shims-Methode eingeführt werden. Weitere Funktionen finden Sie unter Hugo JS.

Bildrendering

Das Anpassen des Bildformats in Hugo ist etwas mühsam. Es unterstützt nicht die Art wie ![name](uri){: width="420"}. Da es die direkte Verwendung von HTML unterstützt, kann es auf folgende Weise konfiguriert werden:

<img src="picture.png" alt="some message" width="50%" />

Sie können die Ausrichtung des img im CSS anpassen, aber zu diesem Zeitpunkt kann nur eine Ausrichtung verwendet werden. Darüber hinaus bietet die offizielle Website den Shortcodes-Code von figure, der verwendet werden kann, aber zu Kompatibilitätsproblemen auf verschiedenen Plattformen führen kann.

Es gibt eine andere Möglichkeit. Passen Sie die Bildrendering-Methode in layouts/_default/_markup/render - image.html an und verwenden Sie sie dann auf eine Art wie ![name](uri?width=100px), aber die unterstützten Parameter müssen in der obigen Datei konfiguriert werden.

Weitere Rendering-Hooks finden Sie im Render Hooks-Inhalt.

Datenübertragung

Daten können über Scratch übertragen werden, das zum Übertragen von Daten zwischen Page und ShortCodes verwendet wird. Wenn Sie die temporäre Datenübertragung in der Vorlage verwenden möchten, können Sie eine neue über newScratch erstellen. Nehmen Sie das von Hugo automatisch generierte Scratch als Beispiel unten. .Page.Scratch und .Scratch haben die gleiche Funktion:

{{ .Scratch.Set "hey" "Hello" }} # Es können auch 3 oder (slice "Hello" "World") sein
{{ .Scratch.Get "hey" }}         # Abrufen
{{ .Scratch.Add "hey" "Welcome" }} # Addition ausführen, ähnlich wie in der Go-Sprache, Zeichenfolgenverkettung, numerische Addition, Arrayverkettung
{{ .Scratch.GetSortedMapValues "hey" }} # Zusätzlich zum Abrufen der Map über Get können Sie auch die nach Schlüssel sortierten Werte zurückgeben
{{ .Scratch.Delete "hey" }}      # Löschen

{{ .Scratch.SetInMap "hey" "Hello" "World" }} # Legen Sie die Map fest, die key:value als Hello:World entspricht
{{ .Scratch.SetInMap "hey" "Hey" "Andy" }}
{{ .Scratch.Get "hey" }} # map[Hello:World Hey:Andy]

Vorlagen-Debugging

Sie können die aktuellen Variableninformationen über {{ printf "%#v" .Permalink }} ausdrucken. Wenn Sie das Seitenlayout debuggen möchten, können Sie den folgenden Inhalt in den <head> einfügen, um die Anzeige zu vereinfachen:

<style> 
div { 
  border: 1px solid black;
  background-color: LightSkyBlue; 
} 
</style>

Bewährte Methoden

Das Verzeichnis der obersten Ebene enthält die Verzeichnisse archetypes, assets, content, data, i18n, static und layouts:

archetypes/: Die Vorlage beim Erstellen eines neuen Artikels über den Unterbefehl new.
config/: Standardmäßig wird hugo.[toml|yaml|json] als Konfiguration verwendet, und die folgende Verzeichnisstruktur kann verwendet werden:
- _default/: Standardkonfiguration.
- production/: Globale Konfiguration.
i18n/: Lokalisierung.
themes/:
- halo/: Der entsprechende Vorlagenname.
  - assets/: Ressourcendateien in der Vorlage.
    - images/
    - js/: JavaScript-bezogene Skripte, siehe footer/script - footer.html für Details.
    - scss/: SCSS-Dateien.
      - app.scss: Die SCSS-Datei der obersten Ebene, die Dateien in anderen Verzeichnissen enthält, siehe head/head.html für Details.
    - static/: Statische Dateien.
      - syntax.css: Die CSS-Datei, die durch den obigen Befehl hugo gen chromastyles generiert wurde, siehe head/head.html für Details.
  - layouts/: Layoutvorlagen, wobei _default der Standardwert ist und partials die Referenz verschiedener Vorlagen ist.
    - _default/
    - blog/: Entspricht der Abschnittsvorlage blog.
    - docs/: Entspricht der Abschnittsvorlage docs.
    - partials/: Referenzen in verschiedenen Vorlagen.
    - resume/: Entspricht der Abschnittsvorlage resume.
      - baseof.html: Die Stammseite zum Rendern.
    - shortcodes/: Shortcodes.
    - slide/: Entspricht der Abschnittsvorlage slide.
    - 404.html: Generieren Sie die 404-Seite.

Der CSS-bezogene Inhalt hängt von den folgenden Dateien ab:

syntax.css: Syntaxhervorhebung, muss nur komprimiert werden.
main.css: Die zentrale benutzerdefinierte Konfiguration. Um die Bootstrap-Variablen zu verwenden, wird sie auch in der scss-Vorlage referenziert. Daher ist es nicht erforderlich, bootstrap.min.css separat einzuführen.
fontawesome.min.css: Die verwendeten Symbole, und Sie können sich auf den Inhalt in Icons beziehen.

Darüber hinaus werden die relevanten Variablen von Bootstrap in bootstrap/scss/_variables.scss gespeichert.

Leapcell: Die Serverlose Plattform der nächsten Generation für Webhosting, asynchrone Aufgaben und Redis

Abschließend möchte ich die Plattform empfehlen, die sich am besten für die Bereitstellung von Golang eignet: Leapcell

1. Unterstützung mehrerer Sprachen

Entwickeln Sie mit JavaScript, Python, Go oder Rust.

2. Stellen Sie unbegrenzt viele Projekte kostenlos bereit

Zahlen Sie nur für die Nutzung – keine Anfragen, keine Gebühren.

3. Unschlagbare Kosteneffizienz

Pay-as-you-go ohne Leerlaufgebühren.
Beispiel: 25 $ unterstützen 6,94 Millionen Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

4. Optimierte Entwicklererfahrung

Intuitive Benutzeroberfläche für mühelose Einrichtung.
Vollständig automatisierte CI/CD-Pipelines und GitOps-Integration.
Echtzeitmetriken und -protokollierung für umsetzbare Erkenntnisse.

5. Mühelose Skalierbarkeit und hohe Leistung

Automatische Skalierung zur einfachen Bewältigung hoher Parallelität.
Null Betriebsaufwand – konzentrieren Sie sich einfach auf das Erstellen.

Weitere Informationen finden Sie in der Dokumentation!

Leapcell Twitter: https://x.com/LeapcellHQ

Deep Dive into Hugo: Die ideale statische Blog Framework