Demo-Website | Änderungsprotokoll
Yue ist ein minimalistisches, mehrsprachiges und anpassbares Hugo-Theme, das sich zum Bloggen eignet.
Screenshots sind möglicherweise veraltet, daher ist es besser, die Demo-Website zu besuchen.
Lichtmodus auf dem Desktop
Dunkler Modus auf dem Desktop
Lichtmodus auf dem Handy
Dunkler Modus auf Mobilgeräten
Minimales Erscheinungsbild
Einfach zu installieren (mit installiertem Git und Hugo erstellen Sie in wenigen Sekunden eine Website)
Ausführliche Dokumentation
Automatischer Dunkelmodus
Mehrsprachig
Übersetzungsliste auf einer Seite
Sprachauswahl (zur entsprechenden Seite oder Homepage gehen)
Mehrere Autoren
Inhaltsverzeichnis (faltbar, nur generiert, wenn verfügbar)
Änderungsdatum auf der Startseite, Einzelseite, Abschnittsseite und Termseite
Benutzerdefiniertes Datumsformat
Paginierung auf Startseite und Abschnittsseite
Volltext-RSS
Tags und Kategorien
Urheberrechtsvermerk (Autor und Jahresspanne einstellbar)
RSS-Link
Überschrift-Ankerlink
Mobile-first und reaktionsschnell
SCSS
Suchmaschinenoptimierung
Mikrodaten
Meta-Beschreibung
Diagramm öffnen
Seitenanzahl für Abschnitte ( /posts/ , /tags/ usw.)
Anpassung
Favicon
Stile (SCSS)
Inhalte (HTML)
Um alle Funktionen herauszufinden, überprüfen Sie „hugo.yaml“ (Standardkonfiguration) und „exampleSite/hugo.yaml“ (Konfiguration der Demo-Site).
Installieren Sie Git und die neueste Hugo-Erweiterung.
# Website erstellengit init my-websitecd my-website# Themegit-Submodul installieren add -- Depth=1 https://github.com/CyrusYip/hugo-theme-yue themes/hugo-theme-yue git commit --message "add theme"# Demo-Content erstellencp --recursive themes/hugo-theme-yue/exampleSite/* .# Vorschauhugo-Server
Jetzt haben wir eine funktionierende Demo-Website. Das content enthält den Inhalt und hugo.yaml ist eine Konfigurationsdatei. Fühlen Sie sich frei, mit ihnen herumzuspielen.
cd meine-website Git-Submodul-Update --remote
Es wird empfohlen, CHANGELOG.md zu lesen, bevor Sie das Theme aktualisieren.
Sie können Updates und das Changelog in einem Feed-Aggregator (z. B. Inoreader) abonnieren.
Aktualisierungen: https://github.com/CyrusYip/hugo-theme-yue/commits/main.atom
Änderungsprotokoll: https://github.com/CyrusYip/hugo-theme-yue/commits/main/CHANGELOG.md.atom
Beim Klonen Ihres Website-Projekts müssen Sie zusätzliche Optionen verwenden.
git clone --recurse-submodules --shallow-submodules [email protected]:your-user-name/my-website.git
Nachdem Sie die Website eingerichtet haben, möchten Sie sie wahrscheinlich im Internet hosten. Dafür gibt es viele Methoden, siehe Hosting und Bereitstellung | Hugo. Wenn Sie nicht wissen, was Sie wählen sollen, können Sie mit Netlify beginnen, siehe Hosten auf Netlify | Hugo.
Stellen Sie sicher, dass Sie „baseURL“ in hugo.yaml in Ihren Domainnamen (z. B. https://my-cool-domain.org/ ) ändern.
-baseURL: https://yue.cyrusyip.org/+baseURL: https://my-cool-domain.org/
Empfohlener Build-Befehl:
Hugo --gc --minify
--gc entfernt ungenutzte Cache-Dateien und --minify reduziert die Größe der Website (hauptsächlich HTML).
Erstellen Sie einen neuen Beitrag.
hugo new content content/en/posts/my-first-post.md
Weitere Informationen zur Verwendung finden Sie unter:
Grundlegende Verwendung | Hugo
Verzeichnisstruktur | Hugo
Die Einstellungen sind in exampleSite/hugo.yaml (Konfiguration der Demo-Site) und hugo.yaml (Standardkonfiguration, von ersterer importiert) aufgeführt.
Im Stammverzeichnis Ihres Website-Projekts befindet sich die Konfigurationsdatei hugo.yaml , die eine Kopie von „exampleSite/hugo.yaml“ ist.
Informationen zur Konfiguration finden Sie unter Hugo konfigurieren | Hugo.
Unterstützte Sprachen:
en : Englisch
fr : Französisch
zh-CN : Vereinfachtes Chinesisch
Informationen zum Erstellen einer mehrsprachigen Website finden Sie unter Mehrsprachiger Modus | Hugo und exampleSite/hugo.yaml.
Übersetzungsdateien befinden sich im i18n-Verzeichnis und in data/i18n.yaml. Beiträge für weitere Sprachen sind willkommen.
So tragen Sie eine neue Sprache bei:
Erstellen Sie eine Sprachdatei (z. B. fr.yaml für Französisch) im i18n-Verzeichnis.
Kopieren Sie den Inhalt von i18n/en.yaml in die neue Datei.
Entfernen Sie alle Kommentare ( # ... ) und übersetzen Sie den Inhalt.
Übersetzen Sie auch den Inhalt in data/i18n.yaml.
Wenn Sie weiterhin zur Übersetzung beitragen möchten, können Sie die neuesten Änderungen erhalten, indem Sie den Feed von i18n/en.yaml abonnieren (https://github.com/CyrusYip/hugo-theme-yue/commits/main/i18n/en.yaml). .atom) mit einem RSS-Reader.
Wenn Ihre Website nicht auf Englisch ist, möchten Sie wahrscheinlich den Titel von /tags und /categories anpassen.
Um beispielsweise /tags Titel der zh-CN Website anzupassen, erstellen Sie content/zh-CN/tags/_index.md und fügen Sie der Datei den folgenden Inhalt hinzu.
--- title: Chinese Tags ---
Mit Yue können Sie Favicon, Stile (SCSS) und Inhalte (HTML) anpassen.
Favicon ist das Symbol neben dem Titel in einem Browser-Tab. Um Ihr Favicon zu verwenden, legen Sie favicon.ico im static Verzeichnis ab. Sie können favicon.ico mit Online-favicon.ico-Generatoren erstellen.
Yue verwendet SCSS (libsass), um Stile hinzuzufügen. Alle Dateien befinden sich in „assets/scss“. Um Stile anzupassen, erstellen Sie assets/scss/_style-start.scss und assets/scss/_style-end.scss .
_style-start.scss wird zuerst angewendet und Sie können Variablen in dieser Datei überschreiben.
$base-font-size: 15px;
_style-end.scss wird zuletzt angewendet und Sie können in dieser Datei Stile hinzufügen.
Vanilla CSS ist auch in SCSS gültig.
Referenzen:
CSS: Cascading Style Sheets | MDN
Sass: Sass-Grundlagen
Verzeichnisstruktur | Hugo
Sie können diese Dateien erstellen, um HTML-Code einzufügen.
layouts/partials/head/head-start.html
layouts/partials/head/head-end.html
layouts/partials/single/single-end.html
layouts/partials/body/body-end.html
head-start.html wird am Anfang des -Elements hinzugefügt.
Anwendungsfälle:
Skripte vorab laden
Skripte laden
Stile laden
Hier ist ein Beispiel für das Vorladen von Skripten:
head-end.html wird am Ende des -Elements hinzugefügt.
Anwendungsfälle:
Skripte laden
Stile laden
Hier ist ein Beispiel für das Hinzufügen von Google Analytics und einem lokalen Skript:
{{ mit resources.Get "js/my-script .js" | js.Build }} {{ end }} single-end.html wird am Ende des -Elements in einem Beitrag hinzugefügt.
Anwendungsfälle:
Kommentardienste, z. B. Disqus und Giscus
Hier ist ein Beispiel für das Hinzufügen von Giscus:
{{ $sprache := "" }}
{{- /*
Problemumgehung für Kleinbuchstaben LanguagePrefix,
siehe https://github.com/gohugoio/hugo/issues/9404
*/ -}}
{{ if eq site.LanguagePrefix "/zh-cn" }}
{{ $sprache = "zh-CN" }}
{{ anders }}
{{ $sprache = "en" }}
{{ end }}Liste der Kommentardienste: Kommentare | Hugo.
body-end.html wird am Ende des -Elements hinzugefügt.
Anwendungsfälle:
Laden Sie Skripte dynamisch
Um Fehler zu melden, reichen Sie ein Problem ein. Um Fragen zu stellen, starten Sie eine Diskussion.
Hugo verfügt über viele Funktionen. Lesen Sie die Hugo-Dokumentation, um mehr zu erfahren.
Siehe CHANGELOG.md.
Dieses Projekt verwendet Hugo-bin-npm, um die Hugo-Version zu verwalten. Voraussetzung: Node.js und npm.
Klonen Sie dieses Repository.
npm installieren npm führen Sie clean:server:shared aus
In package.json sind weitere nützliche Befehle aufgeführt. Um die empfohlene Hugo-Version zu verwenden, führen Sie npx hugo aus.
Wenn Sie Node.js und npm nicht installiert haben, installieren Sie einfach die in package.json aufgeführte Version.
„hugo-bin“: { „buildTags“: „extended“, „version“: „x.yyy.z“},CHANGELOG.md sollte bei jedem Commit aktualisiert werden.
Wenn Sie Yue verwenden und der Quellcode Ihrer Website auf GitHub gehostet wird, können Sie Ihrem Repository das Thema hugo-theme-yue hinzufügen.
Link zum hugo-theme-yue Thema.
Ich habe aus vielen Projekten viel gelernt. Vielen Dank, Entwickler.
hugo-xmin (minimale Vorlagen)
Hugo-Theme-Jane (RSS-Vorlage)
Hugo-Theme-Zen (Sprachauswahl)
Hugo-Theme-Gruvbox (Farbe)
Gruvbox (Farbe)
Hugo-Theme-Stack (Quellcode, Dokumentation und Konfiguration)
Hugo-PaperMod (Quellcode, Dokumentation und Konfiguration)
Dieses Projekt ist unter MIT lizenziert.
