Hugo 主题
DPSG
基于德国童子军网站 DPSG 主题的 Hugo 主题。从 Mainroad 主题 Fork 而来
DPSG Hugo 主题
DPSG 是一个响应式、简洁、干净且注重内容的 Hugo 主题,它模仿了德国童子军协会 DPSG 的官方 WordPress 主题。它是从 Mainroad Hugo 主题 fork 而来的。
演示
- 演示页面是使用 exampleSite 构建的。
- 参考实现可以在 DPSG Stamm Bruder Klaus Konstanz 的网站上看到,其源代码也是公开的。
功能
- Hugo 内部模板(Open Graph、Schema、Twitter 卡片)
- 不包含第三方库,但所有资源都托管在本地(字体、JS 等)
- 响应式菜单
- 二级菜单
- SVG 图标
- 主题选项(侧边栏位置、作者框、文章导航、高亮颜色)可通过 config.toml 文件参数进行配置
- 目录
浏览器支持
- 桌面: IE11+、Chrome、Firefox、Safari
- 移动端: Android 浏览器(Android 4.4+)、Safari(iOS 7+)、Google Chrome、Opera mini
也支持其他浏览器(如基于 Blink 引擎的 Opera),但未经测试。
安装
在开始之前,请确保您已经安装了 Hugo 并创建了一个新的站点。之后,您就可以安装 DPSG 了。
在你的 Hugo 站点的 themes
目录下,运行
git clone https://github.com/pfadfinder-konstanz/hugo-dpsg
或者,如果你不打算进行任何重大更改,但又想跟踪并更新主题,你可以通过以下命令将其添加为 git 子模块
git submodule add https://github.com/pfadfinder-konstanz/hugo-dpsg
接下来,在 Hugo 站点的根目录下打开 config.toml
,并确保 theme 选项设置为 hugo-dpsg
theme = "hugo-dpsg"
有关更多信息,请阅读 Hugo 的官方设置指南。
配置
Config.toml 示例
baseurl = "/"
title = "Hugo DPSG"
languageCode = "de"
DefaultContentLanguage = "de"
paginate = "10" # Number of posts per page
theme = "hugo-dpsg"
[Params]
description = "Welcome to our scout group!" # Site description. Used in meta description
copyright = "DGSP local group" # Footer copyright holder, otherwise will use site title
opengraph = true # Enable OpenGraph if true
schema = true # Enable Schema
twitter_cards = true # Enable Twitter Cards if true
readmore = false # Show "Read more" button in list if true
authorbox = true # Show authorbox at bottom of pages if true
toc = true # Enable Table of Contents
pager = true # Show pager navigation (prev/next links) at the bottom of pages if true
indexPager = false # Show pager navigation on index page
post_meta = ["author", "date", "categories", "translations"] # Order of post meta information
mainSections = ["post", "blog", "news"] # Specify section pages to show on home page and the "Recent articles" widget
photosSections = ["photos"] # Specify section pages to show on home page and the "Recent photos" widget
photoTag = "photos" # Specify one tag to show on home page and the "Recent photos" widget. Similar as photoSections, but with 1 tag instead of 1 or multiple sections
dateformat = "02.01.2006" # Change the format of dates
customCSS = ["css/custom.css"] # Include custom CSS files, can also be used per-page as front matter attribute
customJS = ["js/custom.js"] # Include custom JS files
customPartial = "piwik.html" # Include custom partials at the end of the page, e.g. tracking codes
belowTitlePartial = "alert.html" # Include custom partial below the pages title
[Params.Author] # Used in authorbox
name = "Scout Master"
bio = "The Scout Master is the leader of this local scout group"
avatar = "img/avatar.png"
[Params.style.vars]
highlightColor = "#003056" # Override main theme color
[Params.logo]
image = "img/placeholder.png" # Logo image. Path relative to "static"
image_alt = "Logo image" # alt text for logo image, be screen reader friendly!
header = "img/header.jpg" # Header image. Path relative to "static"
title = "DPSG local group" # Logo title, otherwise will use site title
subtitle = "Welcome to our group site" # Logo subtitle
[Params.sidebar]
home = "right" # Configure layout for home page
list = "left" # Configure layout for list pages
single = false # Configure layout for single pages
# Enable widgets in given order
widgets = ["search", "recent", "recent_photos", "recent_photos_tags", "categories", "taglist", "social", "languages"]
# alternatively "ddg-search" can be used, to search via DuckDuckGo
# widgets = ["ddg-search", "recent", "categories", "taglist", "social", "languages"]
[Params.footer]
text = "[Imprint and Privacy](/imprint)" # Extra text in footer row, understands markdown
right = "Donate!" # Right-aligned text in footer row, optional, understands markdown
[Params.widgets]
recent_num = 5 # Set the number of articles in the "Recent articles" widget
tags_counter = false # Enable counter for each tag in "Tags" widget
[Params.widgets.social]
# Enable parts of social widget
facebook = "username"
twitter = "username"
instagram = "username"
linkedin = "username"
telegram = "username"
github = "username"
gitlab = "username"
bitbucket = "username"
email = "example@example.com"
# Custom social links
[[Params.widgets.social.custom]]
title = "Youtube"
url = "https://youtube.com/user/username"
icon = "youtube.svg" # Optional. Path relative to "layouts/partials"
[[Params.widgets.social.custom]]
title = "My Home Page"
url = "http://example.com"
一个好的做法是不要在不理解其工作原理的情况下复制所有这些设置。仅使用您需要的参数。
有关所有可用的标准配置设置的更多信息,请阅读所有 Hugo 配置设置。
Front Matter 示例
---
# Common-Defined params
title: "Example article title"
date: "2017-08-21"
description: "Example article description"
categories:
- "Category 1"
- "Category 2"
tags:
- "Test"
- "Another test"
menu: main # Optional, add page to a menu. Options: main, side, footer
# Theme-Defined params
thumbnail: "img/placeholder.jpg" # Thumbnail image
thumbnail_alt: "Thumbnail" # alt text for thumbnail image, be screen reader friendly!
thumbnail_hide_post: false # Hide thumbnail on single post view
lead: "Example lead - highlighted near the title" # Lead text
authorbox: true # Enable authorbox for specific page
pager: true # Enable pager navigation (prev/next) for specific page
toc: true # Enable Table of Contents for specific page
sidebar: "right" # Enable sidebar (on the right side) per page
widgets: # Enable sidebar widgets in given order per page
- "search"
- "recent"
- "taglist"
sitemap_hide: false # Do not add this page to the sitemap
scripts_head: # optional: include some literal <head> matter, e.g. for page-specific JS imports; safeHTML-filtered
- "<!-- -->"
scripts_body: # optional: include some literal html just before <body/> tag, e.g. JS initialization; safeHTML-filtered
- "<!-- -->"
---
有关 front matter 变量的更多信息,请阅读 Hugo 官方文档中的 Hugo Front Matter。
侧边栏
Hugo DPSG 带有可配置的侧边栏,可以位于左侧、右侧或禁用。默认布局可以在配置的 [Params.sidebar]
部分中指定。位置可以为首页、列表页和单页分别指定。使用键 home
、list
和 single
,值分别为 "left"
、"right"
或 false
。可以通过在页面的 front matter 中使用相同的值设置 sidebar
参数来配置每个页面的布局。
侧边栏由多个小部件组成。可以使用 widgets
键以及小部件名称列表作为值来单独启用小部件。您可以通过在 layouts/partials/widgets/
下放置一个模板来添加您自己的小部件。小部件列表可以从页面的 front matter 中覆盖。
一些小部件遵循可选配置。请查看上面示例配置中的 [Params.widgets]
和 [Params.widgets.social]
部分。
菜单
Hugo DPSG 支持多个菜单。main
菜单是完全响应式的,显示在站点标题下方。二级菜单 side
和 footer
显示在侧边栏小部件和页面页脚中。要将页面添加到菜单中,请在页面的 front matter 中添加一个 `menu