hugo theme hamburg
v0.8.2
Hamburg ist ein einfaches und klares Blog-Theme für Hugo, das auf dem Wien-Theme von Keichi basiert.
Bemerkenswerte Merkmale, die ich jemandem erzählen würde, sind:
Führen Sie in Ihrem Hugo-Site-Verzeichnis Folgendes aus:
git clone https://github.com/hauke96/hugo-theme-hamburg.git themes/hamburg
Das Theme sollte sich nun in themes/hamburg/ befinden.
Sie können die folgenden Optionen in config.toml (oder config.yaml / config.json ) Ihrer Site angeben, um die Funktionen dieses Themas zu nutzen:
baseurl = " http://your-site.com "
defaultContentLanguage = " en "
defaultContentLanguageInSubdir = " true "
title = " Your site title "
theme = " hamburg "
[ params ]
# Short subtitle/tagline. This is displayed in the header.
themecolor = " #hexcolor " # Defines the tab color in Chrome for Android.
# To load additional CSS styles
customCSS = [ ' hamburg.css ' ]
# Show this very user-friendly and absolutely not annoying GDPR notice at the bottom of the page
ShowGDPRNotice = true
subtitle = " The great example site of the hugo-hamburg-theme "
# Since 0.57.0 there's the concept of "main sections". The files for the section "posts" are in "./content/posts/".
mainSections = [ " posts " ]
[ languages ]
[ languages . en ]
languageCode = " en "
languageName = " English "
subtitle = " A simple subtitle "
# Copyright notice. This is displayer in the footer.
copyright = " © some license "
[ languages . en . menu ]
[[ languages . en . menu . main ]]
name = " About "
identifier = " about "
url = " pages/about "
[ languages . de ]
languageCode = " de "
languageName = " Deutsch "
subtitle = " Ein einfacher Untertitel "
copyright = " © eine Lizenz "
[ languages . de . menu ]
[[ languages . de . menu . main ]]
name = " Über "
identifier = " about "
url = " pages/about "vienna ThemaEs gibt noch einige andere Parameter aus dem Original-Vienna-Theme, die ich bisher noch nicht verwendet habe. Die meisten von ihnen funktionieren möglicherweise nicht mehr, daher gibt es keine Garantie:
[ params ]
# Social accounts. Link to these accounts are displayed in the header and
# footer.
twitter = " Your Twitter username "
github = " Your GitHub username "
gitlab = " Your GitLab username "
linkedin = " Your LinkedIn username "
googleplus = " Your Google+ user id "
facebook = " Your Facebook username "
reddit = " Your Reddit username "
hackernews = " Your Hacker News username "
stackoverflow = " Your Stackoverflow user id (number) "
keybase = " Your keybase.io username "
instagram = " Your Instagram username "
# Disqus shortname
disqus = " Your disqus shortname "
# Google Analytics API key.
ga_api_key = " Your Google Analytics tracking id "
# Mixpanel API key.
mixpanel_api_key = " Your Mixpanel API key "Es gibt einige Optionen, die Sie in der Kopfzeile eines Beitrags oder einer Seite festlegen können:
# The date will be at the bottom of the page at the "Posted on ..." label
date = " 2018-08-13T15:38:27+02:00 "
title = " Erster Eintrag "
draft = true
author = " hauke "
# The summary will be shown at the start page or other page/post lists
summary = " Dies ist nur ein Testbeitrag um die Website zu testen. "
# This will ensure that the date is not printed
noshowdate = true Zur Vereinfachung gibt es einige einfache Shortcodes.
Erstellt einen einfachen Link zu einer Tag-Seite:
I like {{< linkTag veggy-food "yummi vegetarian food" >}}.
Schließt Bilder ein und öffnet sie beim Klicken in einem neuen Tab:
{{< img "photo.png" "What a lovely picture" >}}
Erstellt einen Link zum angegebenen Bild
{{< imgUrl "photo.png" "link text" >}}
Skaliert ein Bild auf die angegebene Größe und bettet es ein, wie es der Shortcode img tut.
{{< imgUrl "photo.png" "What a lovely picture" "500x" >}}
(Dieses Bild ist auf 500 Pixel Breite skaliert, die Höhe wird automatisch ermittelt)
Dieses Thema liest die Informationen eines Autors basierend auf dem Sprachcode einer Seite.
Um mehrere Autoren zu unterstützen, erstellen Sie eine data/<lang>/authors/name.toml (also z. B. data/en/authors/hauke96.toml ). Diese Datei enthält Informationen über den Autor:
name = " Your name "
avatar = " /images/avatar.jpg "
contact = " mailto:[email protected] "
bio = " Something about you " Um mehrere Sprachen zu unterstützen, erstellen Sie mehrere Verzeichnisse im data . Für Deutsch als Zweitsprache ( languageCode wäre de ) hätte das obige Beispiel also auch eine data/de/authors/hauke96.toml .
Sie können die obige Konfiguration z. B. mit Google Analytics nutzen oder dazu Ihr eigenes JavaScript-Snippet verwenden.
Für ein benutzerdefiniertes JavaScript-Snippet müssen Sie eine Datei layouts/partials/tracking.html erstellen und den erforderlichen Code in diese Datei einfügen. Die Datei (falls vorhanden) wird neben den anderen Tracking-Mechanismen in die Fußzeile eingebettet.
Ich habe dies mit der Analysesoftware Matomo getestet, die einen JavaScript- oder bildbasierten Ausschnitt bereitstellt, den ich in die tracking.html eingefügt habe.
