hugo dream plus
Yume
Dieses Thema ist eine aktualisierte Version des Dream -Themas von Yue Yang und enthält jede Menge neuer Funktionen wie:
Dieses Thema kann für zwei Zwecke verwendet werden:
Dieses Projekt hält sich an den Verhaltenskodex für den Mitwirkenden. Durch die Teilnahme wird erwartet, dass Sie diesen Code aufrechterhalten. Bitte melden Sie [email protected] inakzeptables Verhalten.
Installation
Erste Schritte
Dokumentation
Fast fertig
Beitragen
Lizenz
Das Thema kann installiert werden, indem die folgenden Befehle in Ihrem Hugo -Website -Ordner ausgeführt werden.
cd themes
git submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus
git submodule update --init --recursiveSobald das Thema erfolgreich installiert wurde, müssen Sie ein wenig das Thema stimmen, um Ihren Geschmack zu erfüllen.
In dem exampleSite -Ordner finden Sie die Konfigurationsdateien cards.toml und posts.toml , mit denen das Thema geändert werden kann.
Sie müssen diese Konfigurationsdateien als Grundlage für Ihre Website verwenden, da sie sich um die erforderlichen variablen Erklärungen kümmern , die Sie möglicherweise entsprechend Ihren Anforderungen bearbeiten.
Definieren Sie sich durch die folgenden Konfigurationsvariablen in params unter der author -Tabelle wie gezeigt:
[ params . author ]
author = " <name of the author> "
description = " Short description of the site "
motto = " author's motto or short description "
# Leaving the avatar variable unset displays svg avatars
avatar = " <absolute path to avatar> "Füllen Sie danach die sozialen Variablen am Ende der Konfigurationsdatei aus. Dieses Thema verfolgt die folgenden sozialen Websites: (Die Beispiele werden angegeben)
| Soziale Verbindung | Variable | Beispielinitialisierung |
|---|---|---|
| Github | Github | github = "username" |
email = "[email protected]" | ||
twitter = "username" | ||
facebook = "username" | ||
| YouTube | YouTube | youtube = "username" |
| Medium | Medium | medium = "username" |
linkedin = "username" | ||
| Stackoverflow | Stackoverflow | stackoverflow = "number/username" |
| Codepen | Codepen | codepen = "username" |
reddit = "username" |
Diese Variablen müssen in der [social] Tabelle von config.toml oder ihrem Äquivalent für YAML oder JSON enthalten sein.
[ social ]
github = " UtkarshVerma "Sobald dies erledigt ist, schreiben Sie den Abschnitt " About Me " Ihrer Website in Markdown wie hier angegeben: Fehler und über Seiten.
Wie bereits erwähnt, enthält dieses Thema zwei Ansichten, Kartenansicht und Beiträge . Die Art der Sichtweite hängt von der Art des Inhalts ab, den Sie für Dream Plus füttern. Daher:
cards im Ordner /content wird die Kartenansicht aktiviert.posts im Ordner /content wird die Postansicht aktiviert.Die
contentType-Variable wurde jetzt veraltet.
Eine klare Unterscheidung zwischen beiden Ansicht ist, dass die Kartenansicht keine Beiträge unterstützt, stattdessen leitet sie in den angegebenen Link weiter, während die Postansicht dies tut. Sie können sie selbst testen, indem Sie meine Websites (oben angegeben) besuchen, die sie verwenden. Außerdem erfolgt die Erstellung/Kartenerstellung für beide Ansichten unterschiedlich. Es ist wie folgt:
hugo new cards/example.md # Card creation
hugo new posts/example.md # Post creationÖffnen Sie danach einfach Ihre Markdown -Karte/Ihren Post und geben Sie die Parameter für die Karte/den Beitrag an.
Es gibt zwei verschiedene Möglichkeiten, den Hintergrund dieses Themas zu konfigurieren. Diese Einstellungen schließen sich gegenseitig aus.
Um eine bestimmte Hintergrundfarbe festzulegen, tun Sie dies durch die color . Wenn Sie stattdessen eine zufällige Kombination von Farben als Hintergrund festlegen möchten, lassen Sie einfach die Farbvariable unvereinbar .
[ params . background ]
color = " #13547A " # Provide a color as hex or rgb equivalent Geben Sie das Bild an, das Sie als Hintergrund über das images -Array festlegen möchten. Wenn Sie einen einzelnen Bildhintergrund bevorzugen, geben Sie dem Array einfach einen einzelnen Wert an. Zum Beispiel:
[ params . background ]
images = [ " /images/bg1.jpeg " ] # Single image as background
images = [ " /images/bg1.jpeg " , " <some other image> " ] # Multiple images as background Das Bereitstellen mehrerer Bilder für das images ermöglicht die Zufallsbild -Hintergrundfunktion von Dream Plus, die den Hintergrund innerhalb des angegebenen Arrays jedes Mal mit dem Nachladen der Site zykliert. Sie können den Hintergrund auch bis zu einem gewissen Grad durch die blur verwischen.
Alle Hintergrundkonfigurationsvariablen sollen in der
backroundunterparamsplatziert werden
[ params . background ]
# Random backgrounds
images = [ " /images/bg1.jpeg " , " /images/bg2.jpeg " , " /images/bg3.jpeg " ]
# Blur the background
blur = " 0.2 "Die Abdeckungen für jede Post-Karten- oder Karte werden von Dream Plus mit Hugo Image-Verarbeitung für schnellere Ladezeiten der Website verarbeitet. Die Nachschlagpfade für die Cover -Datei sind wie unten angegeben:
/content/cards/<card>/cover.<any-extension>/content/posts/<post>/images/cover.<any-extension>
Das Angeben des Titelbildes durch die Frontmatter wurde nun veraltet. Kartenabdeckungen können jetzt über die Frontmatter übercoverdefiniert werden. Die Bildverarbeitung wird jedoch bei solchen Abdeckungen nicht anwendbar sein. Außerdem werden FrontMatter -Abdeckungen vor den Bildressourcen priorisiert , damit die Bildressourcenabdeckungen zuerst die Deckentaste von der Frontmatter entfernen müssen.
Sie können den Bildverarbeitungsprozess auch durch coverArgs -Variable in [params.features] ändern. Die übergebenen Argumente müssen für die .Resize -Funktion erfolgen, da Dream Plus verwendet. Zum Beispiel,
[ params . features ]
coverArgs = " 400x300 q50 " # Specify resolution and quality of output image Sie können Ihre Website basierend auf dem Client -Gerät konfigurieren, indem Sie die isMobile JS -Variable verwenden. Es ist true , wenn das Client -Gerät ein Mobiltelefon ist und umgekehrt.
Dieses Thema unterstützt die Gesamtanpassung von etwa und Fehlerseiten . Diese Seiten können über die Dateien about.md und 404.md angepasst werden. Dream Plus liest die oben genannten Dateien als einfacher Markdown -Text und rendert sie dann. Sobald Sie die Dateien geschrieben und gemäß Ihren Anforderungen geändert haben, fügen Sie sie in den content Ihrer Hugo -Site ein. Wenn Sie nicht möchten, dass diese Seiten von Hugo erstellt und mit ihren eigenen Links wie <website>.<domain>/about oder <website>.<domain>/404 serviert werden. Dann können Sie Hugo erkennen, dass er diese durch ignoreFiles -Variable in Ihrer Datei config.toml wie folgt ignorieren soll:
ignoreFiles = [ " content/404.md " , " content/about.md " ] Sie können auch ein benutzerdefiniertes Favicon für Ihre Website über die favicon -Konfigurationsvariable unter params festlegen. Zum Beispiel,
[params]
favicon = "/images/defaultFav.ico"
Das Shorte.st -Website -Skript wurde in diesem Thema implementiert. Um es zu verwenden, müssen Sie es durch die shortest Tabelle unter params konfigurieren.
[ params . shortest ]
enabled = true # Enable shorte.st
apiToken = " " # The API Token you received from shorte.st
domains = [ " " ] # The domains you want to define Wenn Sie die Anzahl der Beiträge/Karten, die eine Seite hat, steuern möchten, können Sie dies mit der paginate Konfigurationsvariablen tun.
paginate = 4 # Defaults to 10 Außerdem werden die Tags, sofern aktiviert, nicht alle in der Header und der Seitenleiste angezeigt. Dort werden nur die Top-8-Tags (Artikelzählern) angezeigt, um eine Überlastung zu vermeiden. Es kann jedoch mithilfe tagLimit -Variable der Tabelle [params.tag] überschrieben werden.
[ params . tag ]
enabled = true
tagLimit = 10 # Top 10 tags will be displayed
# or
tagLimit = 0 # Display all tagsEs gibt auch einige andere kleinere Konfigurationen. Sie können sie einrichten, indem Sie sich auf die Kommentare in der Konfigurationsdatei beziehen.
Die Dokumentation für dieses Repository ist derzeit unter der Arbeit und wird dem Wiki dieses Repositorys hinzugefügt. Wiki -Beiträge sind sehr willkommen. Fragen Sie mich gerne nach den Funktionen dieses Themas.
Nach Abschluss der Konfigurationen können Sie loslegen. Testen Sie also Ihre Website mit:
hugo serverIhre Website sollte jetzt lokal unter http: // localhost: 1313 für Testzwecke verfügbar sein.
Zum Testen der Beispiel -Site müssen Sie die Konfigurationsdatei explizit an Hugo angeben. Dies geschieht wie folgt:
# For posts view demo
hugo server --config posts.toml
# For cards view demo
hugo server --config cards.tomlFand etwas Interessantes zu diesem Thema oder eher einen Fehler? Lassen Sie es mich über den Issue Tracker darüber informieren. Pull -Anfragen sind ebenfalls willkommen. Weitere detailliertere Anweisungen zum Beitrag finden Sie unter beitragen.md.md
Dieses Thema wird unter der MIT -Lizenz veröffentlicht.
