terminal hugo theme

Terminal-Hugo-Theme

Ein Theme für Hugo, das mit der Tailwind-CSS-Bibliothek und der Mono-Schriftfamilie erstellt wurde

Live-Demo

https://nayanseth.com

Aufstellen

1. Dieses Theme verwendet Rückenwind-CSS
2. [Optional] So nutzen Sie Rückenwind
   1. Standardmäßig wird die vorhandene tailwind.css Datei im Theme verwendet. Wenn Sie jedoch mit tailwind herumspielen möchten, befolgen Sie die unten aufgeführten Schritte
   2. Es gibt zwei Konfigurationsdateien für Tailwind, die sich im Verzeichnis assets/csss/tailwind befinden
      1. Für dev run npm run dev -> Dies generiert alle möglichen CSS-Klassen aus Rückenwind. Einige werden möglicherweise noch weggelassen
      2. Für prod run npm run prod -> Dadurch werden nur die CSS-Klassen von Tailwind generiert, die Sie im Theme verwenden
3. hugo new site <SITE_NAME>
4. cd <SITE_NAME>
5. git submodule add [email protected]:techbarrack/terminal-hugo-theme.git themes/terminal
6. Ersetzen Sie den Inhalt von <SITE_NAME>/hugo.yaml durch <SITE_NAME>/themes/terminal/hugo.yaml
7. Erstellen Sie im Stammverzeichnis der Hugo-Site das Verzeichnis: mkdir -p layouts/partials/third_party_js . In diesem Verzeichnis werden alle Arten von Javascript von Drittanbietern wie Google Analytics, Disqus usw. gespeichert
8. Führen Sie die Website hugo server --buildDrafts --disableFastRender --gc --ignoreCache --noHTTPCache --forceSyncStatic --verbose -w aus

Ändern des Inhalts

1. Kommentieren Sie das Attribut „ignoreFiles“ in <SITE_NAME>/hugo.yaml aus
2. Beginnen Sie mit dem Hinzufügen der Dateien in <SITE_NAME>/content , indem Sie replizieren, was in <SITE_NAME>/themes/terminal/content vorhanden ist
3. Aktualisieren Sie den Metainhalt in head.html

JS von Drittanbietern

1. Erstellen Sie Partials in <SITE_NAME>/layouts/partials/third_party_js/<FILE>.html
2. Alle Dateien im Ordner third_party_js werden vor dem </body> -Tag eingefügt

Shortcodes

• {{< svg logo="blah" >}} -> Verwenden Sie den folgenden Code, um SVG in Markdown-Dateien hinzuzufügen
  1. Fügen Sie SVG als .html-Datei in layouts/content/svg
• Rohes HTML

 {{< rawhtml >}}
  <div>This is raw HTML content</div>
{{< /rawhtml >}}

Referenzen

Einige Referenzlinks für zusätzliche Informationen zur Vorgehensweise in Hugo:

• https://gohugo.io/methods/page/
• https://gohugo.io/methods/pages/groupbydate/
• https://gohugo.io/content-management/taxonomies/
• https://gohugo.io/templates/taxonomy-templates/
• https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
• https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
• https://gohugo.io/methods/page/scratch/
• https://gohugo.io/functions/collections/dictionary/
• https://gohugo.io/methods/page/paginate/
• https://discourse.gohugo.io/t/better-term-listing/10261
• https://gohugo.io/templates/partials/
• https://mertbakir.gitlab.io/hugo/pass-arguments-in-partials-hugo/
• SVG-Symbole