hugo theme fiber

Ein Hugo-Thema für Minimalisten. Fiber verwendet ein Minimum an JavaScript und CSS, damit Ihre Website schneller geladen werden kann! Verfügt außerdem über eine saubere Benutzeroberfläche, die gut für die Augen ist!!

Inhaltsverzeichnis

• Installation
  • Submodul verwenden
  • Theme direkt herunterladen
• Merkmale
  • SEO-fähig
  • Shortcodes
    • ASCIINema
    • Kann ich verwenden
  • Klicken Sie hier, um den Code zu kopieren
  • Schöne Notizen
• Screenshots
• Themeneinrichtung
  • Inhalte auf der Homepage auflisten
    • Liste der Blogs, Notizen usw
    • Benutzerdefinierte Inhalte auflisten
  • Code-Hervorhebung
  • Menüpunkte
  • Site-Titel
• Inhalte schreiben
  • Notizen schreiben
  • Frontmatter

Installation

Es gibt zwei Möglichkeiten, dieses Thema mit allen Hugo-basierten Websites zu verwenden.

1. Verwendung von Git-Submodulen (empfohlen)
2. Theme direkt nach <hugo-site-root>/themes/ herunterladen

Submodul verwenden

1. Erstellen Sie Ihre Website mit hugo new site SITE_NAME
2. cd zu SITE_NAME
3. Initialisieren Sie ein Git-Repo: git init . Dies ist erforderlich, da wir ein Git-Submodul hinzufügen müssen.
4. Fügen Sie ein Submodul hinzu, indem Sie git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber ausführen
5. Starten Sie nun den Hugo-Server lokal mit hugo serve

Wenn es ein Update im Theme-Repository gibt, können Sie es mit git submodule update --remote abrufen

Theme direkt herunterladen

Verwenden Sie diese Methode, wenn Sie Git aus irgendeinem Grund nicht verwenden können.

1. Laden Sie dies herunter und extrahieren Sie den Inhalt nach SITE_ROOT/themes/hugo-theme-fiber/ .
2. Starten Sie Hugo lokal, indem Sie hugo serve vom Terminal aus ausführen.

Merkmale

SEO-fähig

Dieses Theme ist mit grundlegender SEO sowie minimalen JSON-LD-Daten von Schema.org ausgestattet

Shortcodes

Abgesehen von den sofort einsatzbereiten Shortcodes gibt es noch einige andere nützliche Shortcodes, die sich manchmal als hilfreich erweisen können.

ASCIINema

Betten Sie eine AsciiNema-Besetzung ein. Zu verwendender Shortcode: {{< asciinema id="id of a public cast" >}}

Kann ich verwenden

Dieser Shortcode zeigt die neuesten Daten von der Website caniuse.com. Nützlich für Webentwickler. Beispiel:

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

Klicken Sie hier, um den Code zu kopieren

Besucher der Website können Inhalte eines beliebigen Codeblocks mit nur einem Klick kopieren. Dadurch werden Codeeinrückungen nicht beschädigt!

Schöne Notizen

Alles, was Sie in content/notes einfügen, erhält grobe Anmerkungen. Dies erleichtert das Erkennen wichtiger Dinge anhand von Notizen.

Grobe Anmerkungen werden mithilfe von Tags wie strong , em und strikethrough gesteuert. Um einen neuen notes zu generieren, müssen Sie zunächst das Verzeichnis content/notes erstellen. Verwenden Sie dann hugo new notes/file-name.md um eine Notiz zu generieren. Diese Datei enthält Informationen darüber, wie Dinge mit den oben genannten Tags mit Anmerkungen versehen werden.

Screenshots

Themeneinrichtung

Inhalte auf der Homepage auflisten

Die Homepage kann auf zwei verschiedene Arten konfiguriert werden. Sie können Ihren bevorzugten/wichtigsten Abschnitt entweder aus dem content auflisten.

Oder platzieren Sie benutzerdefinierte Inhalte darin.

Oder Sie können beides tun! Stellen Sie sicher, dass Sie eine Datei content/_index.md erstellen, die einen title in „fromtmatter“ enthält. Diese title ist nützlich für SEO. Beispiel:

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here --> 

Liste der Blogs, Notizen usw

Um eine Inhaltsliste auf der Homepage zu erstellen, müssen Sie eine Variable namens mainSections in der Datei config.toml festlegen. Beispiel:

[ params ]
mainSections = [ " posts " ]

Benutzerdefinierte Inhalte auflisten

Um benutzerdefinierte Inhalte aufzulisten, platzieren Sie sie einfach mit dem entsprechenden Frontmatter in content/_index.md .

Code-Hervorhebung

Standardmäßig verwendet Hugo keine Klassen. Dies würde jedoch bei diesem Thema nicht funktionieren, da einige der Funktionen davon abhängen.

Sie müssen Klassen für Codeblöcke einschränken. So würden Sie es machen:

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

Menüpunkte

Standardmäßig gibt es im oberen Menü nur einen Menüpunkt. Um dort weitere Elemente hinzuzufügen, müssen Menüelemente in config.toml definiert werden. Es folgt ein Beispiel aus config.toml meiner Website:

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

Site-Titel

Der Site-Titel wird durch die folgenden Parameter in config.toml gesteuert:

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

Inhalte schreiben

Notizen schreiben

Notes sind eine besondere Art, die in diesem Thema fest codiert ist. Inhalte dieser Art würden grobe Anmerkungen erhalten (was die Verwaltung von Notizen erleichtert).

Erstellen Sie eine Notizenseite mit dem Befehl „ hugo new notes/your-filename.md um zu erfahren, wie Sie grobe Anmerkungen auf der Notizenseite verwenden.

Ein Muster für freundliche Notizen ist enthalten.

Frontmatter

Dieses Theme verwendet Frontmatter, um benutzerdefinierte Beitragsbeschreibungen und Metabilder für SEO zu verarbeiten. Wenn meta.image und meta.description nicht gefunden werden können, wird auf /images/default-meta-image.png bzw. .Summary zurückgegriffen.

Verwenden Sie diese beiden Felder in frontmatter wie folgt:

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->