Hugo 主题
Hamburg
Hamburg 是一个基于 keichi 的 vienna-theme 的简洁干净的 Hugo 博客主题。
截图
桌面
移动设备
概述
我向别人介绍的显著特点是
- 一致的设计
- 简洁扁平的设计
- 易于定制
- 响应式设计(移动设备友好)
- Font Awesome 图标
- 导航
- 标签
- 菜单
- 支持多作者
- 多语言(各个方面!作者信息、菜单、页面、帖子、标签)
- 通过任何基于 JavaScript 代码段的服务进行分析(Google Analytics、Matomo/Piwik 等)
- 附加短代码
安装
在您的 hugo 站点目录中,运行
git clone https://github.com/hauke96/hugo-theme-hamburg.git themes/hamburg
现在,主题应该位于 themes/hamburg/
中。
配置
您可以在站点的 config.toml
(或 config.yaml
/config.json
) 中指定以下选项,以使用此主题的功能
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
-主题参数
还有一些来自原始 vienna 主题的其他参数我目前还没有使用。它们中的大多数可能不再起作用,因此无法保证
[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"
用法
帖子的参数(前端内容)
您可以在帖子或页面的标题中设置一些选项
# 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
短代码
有一些简单的短代码可以使事情更容易。
链接到标签
创建一个指向标签页面的简单链接
I like {{< linkTag veggy-food "yummi vegetarian food" >}}.
包含图像
包含图像,并在点击时在新标签页中打开它们
{{< img "photo.png" "What a lovely picture" >}}
获取图像的 URL
创建指向给定图像的链接
{{< imgUrl "photo.png" "link text" >}}
嵌入缩放图像
将图像缩放到给定的大小并像短代码 img
一样嵌入它。
{{< imgUrl "photo.png" "What a lovely picture" "500x" >}}
(此图像的宽度缩放为 500 像素,高度自动确定)
多作者
此主题将根据页面的语言代码读取作者的信息。
要支持多作者,请创建一个 data/<lang>/authors/name.toml
文件(例如 data/en/authors/hauke96.toml
)。此文件包含有关作者的信息
name = "Your name"
avatar = "/images/avatar.jpg"
contact = "mailto:[email protected]"
bio = "Something about you"
为了支持多种语言,请在 data
目录中创建多个目录。因此,对于作为第二语言的德语(languageCode
将为 de
),上述示例也将具有一个 data/de/authors/hauke96.toml
文件。
跟踪
您可以将上述配置与例如 Google Analytics 一起使用,或者使用您自己的 JavaScript 代码段来执行此操作。
对于自定义 JavaScript 代码段,您必须创建一个 layouts/partials/tracking.html
文件并将必要的代码放入此文件中。该文件(如果存在)将嵌入到页脚,与其他跟踪机制相邻。
我使用 Matomo 分析软件测试了这一点,它提供了一个基于 JavaScript 或图像的代码段,我将其放入 tracking.html
中。