hugo toigian Download - hugo toigian Quellcode herunterladen

hugo toigian

Andere Kategorien

1.0.0

Herunterladen

Hugo Toigian

Ein minimalistisches Hugo-Theme mit Tailwind CSS

Toigian - Tối giản (Vietnamesisch): Minimalistisch (Englisch)
Haftungsausschluss : Ich bin kein Front-End-Entwickler, sondern nur ein Typ, der gerne Dinge optimiert, daher ist mein Code möglicherweise nicht schön/sauber. Ich versuche, Tailwind CSS zu lernen, und das Ergebnis ist Hugo-Toigian.

0. Vitrine
1. Funktionen
2. Voraussetzungen
3. Installation
3. Konfiguration
- 3.1. Site-Konfiguration
- 3.2. Seitenkonfiguration
4. Shortcodes
5. Anpassung
6. Mitwirken
7. Credits

0. Vitrine

Diese Screenshots sind möglicherweise veraltet. Schauen Sie sich die Demo-Site an, um die neuesten Informationen zu erhalten.

Dunkel	Licht

1. Funktionen

Minimalistisches ( tối giản ) Design. Stark inspiriert von mellow.dev.
Verwenden Sie die klassische, minimalistische Farbpalette Rosé Pine.
Anpassbar.
Unterstützt den Hell-/Dunkelmodus.
Verschachtelte Zähler für die Überschrift.
Seitlich schwebendes Inhaltsverzeichnis.
Nützliche Shortcodes.
Kommentarunterstützung.
Syntaxhervorhebung: Verwenden Sie eine serverseitige Lösung (Chroma, Hugo integriert). Ich habe Rosé Pine-Stile zu Chroma hinzugefügt, damit alles die gleiche Atmosphäre hat.

2. Voraussetzungen

git , npm installiert.
Eine minimale „erweiterte“ Hugo-Version von v0.93.0 und höher.

snap install hugo --channel=extended

PostCSS von Hugo Pipe erfordert die Installation des JavaScript-Pakets postcss-cli in der Umgebung ( npm install -g postcss postcss-cli ) zusammen mit allen verwendeten PostCSS-Plugins (z. B. npm install -g autoprefixer ). Wenn Sie das Hugo Snap-Paket verwenden, müssen PostCSS und Plugin(s) lokal in Ihrem Hugo-Site-Verzeichnis installiert werden, z. B. npm install postcss-cli ohne das Flag -g.

3. Installation

Gehen Sie zum Stammverzeichnis Ihrer Hugo-Website oder erstellen Sie eine neue Website mit:

hugo new site hugo-example-site
cd hugo-example-site
git init

Fügen Sie das Thema hinzu.

git submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian

Installieren Sie Nodejs-Module.

 cd themes/hugo-toigian
npm install

Aktualisieren Sie abschließend das Theme in Ihrer Konfigurationsdatei config.toml im Stammverzeichnis Ihrer Hugo-Website.

 theme = " hugo-toigian "

Führen Sie den Server aus, um eine Live-Vorschau davon anzuzeigen.

hugo server -DF --disableFastRender

Erstellen Sie statische Seiten

hugo --environment production --minify

3. Konfiguration

3.1. Site-Konfiguration

Es gibt einige Konfigurationsoptionen, die Sie der Datei config.toml hinzufügen können.

 baseURL = ' http://example.org/ '
languageCode = ' en-us '
title = ' Toigian '
theme = " hugo-toigian "
themesDir = " ../.. "
# (Optional) If you provide a Disqus shortname, comments will be enabled on
# all pages.
# disqusShortname = "my-site"

[ params ]
# (Optional, default true): Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
toc = true
# (Optional, default true) Enables comments template on pages
# By default partials/docs/comments.html includes Disqus template
# See https://gohugo.io/content-management/comments/#configure-disqus
# Can be overwritten by same param in page frontmatter
comments = true

[ params . author ]
name = " Kien Nguyen-Tuan "
email = " [email protected] "

[ markup ]
  defaultMarkdownHandler = " goldmark "
  # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
  # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
  [ markup . goldmark ]
    [ markup . goldmark . renderer ]
      unsafe = true  # Enable user to embed HTML snippets in Markdown content.
  [ markup . highlight ]
    codeFences = true
    guessSyntax = true
    lineNos = false
    noClasses = false
    tabWidth = 4
  [ markup . tableOfContents ]
    startLevel = 2
    endLevel = 4
    ordered = true

# The left side navbar at the top
[ menu ]
  [[ menu . nav ]]
  name = " About "
  url = " /about "
  weight = 2

  [[ menu . nav ]]
  name = " Posts "
  url = " /posts "
  weight = 3

3.2. Seitenkonfiguration

Sie können im Titelblatt einzelner Seiten zusätzliche Parameter angeben.

 # Your posts tags

tags = [ ]

# If you have enabled comments for the site, you can disable it for specific pages

comment = true

4. Shortcodes

Schauen Sie sich Shortcodes an.

5. Anpassung

Partials: Es stehen Layout-Partials zur Verfügung, mit denen Sie Komponenten des Themas in layouts/partials/ einfach überschreiben können.

Teilweise leer	Platzierung	Verwendung
`layouts/partials/custom/head.html`	Vor dem Schließen `<head>` -Tags	Fügen Sie benutzerdefiniertes CSS/JS hinzu
`layouts/partials/custom/content-before.html`	Vor dem Seiteninhalt
`layouts/partials/custom/content-after.html`	Nach Seiteninhalt
`layouts/partials/font.html`		Benutzerdefinierte Schriftarten importieren

Zusätzliche Anpassung:

Datei	Beschreibung
`assets/css/custom.css`	Passen Sie CSS-Stile an oder überschreiben Sie sie

Wenn Ihnen beispielsweise die gewählte Schriftart (Inconsolata) nicht gefällt und Sie Ihre eigene Schriftart verwenden möchten, gehen Sie wie folgt vor:

Erstellen Sie layouts/partials/font.html um Ihre Schriftarten zu importieren:

 <!-- load Inter and Overpass fonts -->
< link rel =" preconnect " href =" https://fonts.googleapis.com " />
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin />
< link
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Overpass:wght@400;500&display=swap "
  rel =" stylesheet "
/>

assets/css/custom.css erstellen:

 // change the default mono font to Overpass
:root {
  --font-mono : " Overpass " ;
  --font-serif : " Inter " ;
}

6. Mitwirken

Wie Sie bereits wissen, bin ich kein Frontend-Entwickler. Wenn Sie also einen Fehler feststellen oder Verbesserungen vornehmen möchten, zögern Sie nicht, einen Issue/Pull-Request zu eröffnen.

Primäre Ziele sind: