Hugo 主题
Simple Dark
一个简单的黑暗主题,适用于一般的博客、文档和作品集。
Simple Dark
一个适用于 Hugo 静态站点生成器的黑暗主题。
- 关于
- 在线演示
- 功能
- 安装
- 克隆
- 子模块
- 配置
- 站点参数
- Markdown 参数
- 作者、描述和关键字
- Font Awesome
- 许可
- 另请参阅
- 自定义 SCSS
- 分析
- 内容安全策略
- 社交和联系链接
- 分类
- 导航菜单
- 许可证
关于
Simple Dark 是一个适用于 Hugo 的简单深色主题。它基于 Luiz de Prá 的 Coder 主题,因为它在设计上很简单。在对主题进行一些更改后,我意识到我已做出足够的更改以使其成为一个新主题。所以我决定与社区分享。
功能
- 响应式
- 深色模式
- 语法高亮
- 分析
- 使用兼容 Hugo 的评论系统的评论。
- 使用通过图标工具包的 Font Awesome 图标的社交链接。
- 带有标题的图像管理。
安装
如果您使用 git,则可以将主题安装为克隆或子模块,也可以将主题下载为 zip 文件。我建议使用 git 通过子模块安装,因为它使更新主题更容易。
克隆
git clone https://github.com/MichaelSchaecher/simple-dark.git themes/simple-dark
子模块
首选将主题安装为子模块,这样如果您对主题进行更改,则 git 不会跟踪这些更改。
# Add the theme as a submodule
git submodule add https://github.com/MichaelSchaecher/simple-dark.git themes/simple-dark
配置
安装主题后,您需要对其进行配置才能使用它。以下配置为 yaml
格式,因为我发现它更易于阅读。如果您喜欢 toml
或 json
,则可以将配置转换为您喜欢的格式。
注意:目前不支持从右到左(RTL)。我正在努力添加对 RTL 的支持,但由于我不是双语人士,这比我希望的时间要长。
站点参数
以下是可以在 config.yaml
文件中设置的站点参数。
# config.yaml
baseURL: "/"
title: Your site title
theme: simple-dark
languageCode: en
defaultContentLanguage: en
# How many posts to show on the home page; the default is 10 and the maximum is 100.
paginate: 20
Markdown 参数
默认情况下,Hugo 不会在 markdown 文件中渲染 html。要启用 html 渲染,您需要在 config.yaml
文件中将 unsafe
参数设置为 true
。我还建议在 config.yaml
文件中将 endLevel
参数设置为 4
,将 startLevel
参数设置为 2
。这将把目录设置为从 h2
级别开始,到 h4
级别结束。
markup:
goldmark:
renderer:
unsafe: true
tableOfContents:
endLevel: 4
ordered: true
startLevel: 2
highlight:
noClasses: false
作者、描述和关键字
以下是可以设置的作者、描述和关键字参数。
params:
author: Your name
description: Your site description
keywords: Your site keywords
许可
该主题支持在页脚中链接到许可证类型。您可以在 params
部分下设置许可证类型和位置。
params:
# ---
license:
type: MIT
location: link to license
另请参阅
maxSeeAlsoItems: 1
是侧边栏中显示的最大另请参阅项目数。默认值为 5
,最大值为 10
。这用于显示帖子所属的系列。
由于 Hugo 中帖子的渲染方式,您需要将以下内容添加到您希望成为系列一部分的每个帖子的前言中。
帖子前言
series:
- name: Series Name
weight: 1
Font Awesome
该主题通过图标工具包使用 Font Awesome 图标。您可以通过将 fontawesomeKit
参数设置为工具包代码来启用图标工具包。
您需要注册一个免费帐户才能获得工具包代码。使用工具包代码的优点是,您可以使用最新的图标,并且可以在您的站点中使用图标,而无需将图标下载到您的站点。
自定义 SCSS
可以通过将 customSCSS
参数设置为相对路径来启用自定义 scss
。这意味着 scss
文件必须位于 assets
或 static
目录中。但是,如果您在 assets
目录中使用 scss
文件,您可能只想通过复制 theme/simple-dark/assets/scss/simple-dark.scss
文件到您的 assets/scss
目录并在底部添加 @import "simple-dark";
来导入 scss
文件。
请记住,如果您确实复制了文件,则需要使用与原始文件相同的相对路径。例如,theme/simple-dark/assets/scss/simple-dark.scss
将是 assets/scss/simple-dark.scss
。不这样做会导致主题无法正确渲染或出现构建错误。
params:
# ---
customSCSS: "scss/custom.scss"
分析
该主题支持 Google Analytics、Plausible 和 Simple Analytics。您可以通过将 analytics
参数设置为您要使用的分析的名称来启用分析。您还可以将 analyticsID
参数设置为您要使用的分析的 ID。
但是,某些托管提供商(如 Cloudflare Pages)在不需要使用主题进行配置的情况下提供分析,否则请将 analyticsID
参数设置为您要使用的分析的 ID。
- goatCounter
代码:goatcounter
- googleAnalytics
ID:UA-XXXXXXXXX-X
- matomo
站点 ID:1
服务器 URL:https://example.com/matomo/
- yandexMetrika
ID:XXXXXXXX
- cloudflare
ID:XXXXXXXX
- plausibleAnalytics
域名:example.com
服务器 URL:https://example.com
出站链接跟踪:true
文件下载跟踪:true
- applicationInsights
连接字符串:XXXXXXXX
- microAnalytics
ID:XXXXXXXX
dnt:false
- pirsch
代码:XXXXXXXX
内容安全策略
内容安全策略 (CSP) 是一种安全功能,有助于防止跨站脚本 (XSS) 攻击。主题通过将 csp
参数设置为您想要使用的 CSP 来支持 CSP。但是,某些托管服务提供商(如 Cloudflare Pages、github pages 和 netlify)提供 CSP,无需使用主题进行配置。
如果您在自己的服务器上托管站点,这将更有用。
params:
# ---
csp:
childsrc: [self]
fontsrc: [self, https://fonts.gstatic.com, https://cdn.jsdelivr.net.cn/]
formaction: [self]
framesrc: [self, https://www.youtube.com]
imgsrc: [self]
objectsrc: [none]
stylesrc: [self,unsafe-inline,https://fonts.googleapis.com/,https://cdn.jsdelivr.net.cn/]
scriptsrc: [self,unsafe-inline,https://127.0.0.1,https://cdn.jsdelivr.net.cn/]
您可以编辑 CSP 以满足您的需求。有关 CSP 的更多信息,请参阅 内容安全策略。
社交和联系链接
该主题使用 Font Awesome 图标作为社交和联系链接。由于 智能手机 和 平板电脑 的默认字体使用旧版本,否则图标将无法正确渲染。
使用您想要的 social
图标。要使用 RSS 源,您需要设置 rel
和 type
参数。
params:
---
social:
- name: github
icon: fa fa-2x fa-github
url: https://github.com/MichaelSchaecher/
- name: Gitlab
icon: fa fa-2x fa-gitlab
url: https://gitlab.com/
- name: Twitter
icon: fa fa-2x fa-twitter
url: https://twitter.com/
- name: LinkedIn
icon: fa fa-2x fa-linkedin
url: https://www.linkedin.com/
- name: Medium
icon: fa fa-2x fa-medium
url: https://medium.com/
- name: RSS
icon: fa fa-2x fa-rss
url: https://myhugosite.com/
rel: alternate
type: application/rss+xml
- name: Facebook
icon: fa fa-2x fa-facebook-official
url: https://127.0.0.1/
- name: StackOverflow
icon: fa fa-2x fa-stack-overflow
url: https://stackoverflow.com/
- name: Instagram
icon: fa fa-2x fa-instagram
url: https://www.instagram.com/
分类法
分类法用于将内容分组在一起:如果使用默认的 layout/post/single.html
,则唯一必需的是 series
。但是,您可以通过将 taxonomies
参数设置为您想要使用的分类法来使用任何您想要的分类法。
params:
# ---
taxonomies:
series: series
tag: tags
category: categories
authors: authors
导航菜单
导航菜单是从 config.yaml
文件生成的。菜单是从 main
菜单生成的。您可以通过将以下内容添加到 config.yaml
文件来添加菜单项。
params:
# ---
menu:
main:
- name: Posts
url: /posts/
- name: Wiki
url: /wiki/
- name: Projects
url: /projects/
- name: About
url: /about/
- name: Contact
url: /contact/
返回顶部
许可
该主题在 MIT 许可证下发布。