Hugo 主题
plague
概述
plague 是一个受 Minima 启发的 主题,它具有一些 IndieWeb 功能,例如微格式。 它还大量借鉴了 Indigo 主题。
有一个演示存储库在 plague-demo-site 上可用,并且这里有一个演示站点可用。
安装
Hugo 模块
初始化你的 Hugo 模块仓库
hugo mod init github.com/brianreumere/plague-demo-site
然后在 hugo.toml
中将主题作为模块导入
[module]
[[module.imports]]
disable = false
ignoreConfig = false
ignoreImports = true
path = "github.com/brianreumere/plague" # Theme
Git 子模块
或者,将主题添加为 Git 子模块。 从你的站点目录运行以下命令,然后将 theme = "plague"
添加到 hugo.toml
git submodule add https://github.com/brianreumere/plague.git themes/plague
颜色
有两种内置的配色方案:default
和 gibson
。 它们将根据用户的偏好(通过 prefers-color-scheme
CSS 媒体功能)自动设置深色或浅色变体。 要强制站点始终使用配色方案的浅色或深色变体,请为 colors
参数指定 default-light
、default-dark
、gibson-light
或 gibson-dark
。
默认
吉布森
辅助功能
我不太有网页辅助功能的经验,但是这个主题确实旨在为使用辅助技术和设备的用户提供可访问性。 一些有用的辅助功能资源列在“资源”部分中。
最低配置
以下是站点 hugo.toml
文件中此主题要运行的最低必需设置(此示例假定您使用了“安装”部分中的 Hugo 模块方法)
baseURL = "https://example.net"
languageCode = "en-us"
title = "Ellingson Mineral Tech Blog"
[module]
[[module.imports]]
disable = false
ignoreConfig = false
ignoreImports = true
path = "github.com/brianreumere/plague" # Theme
[params]
siteHeaderText = "Ellingson Mineral Tech Blog"
colors = "default"
[params.hcard]
fullName = "Eugene Belford"
IndieWeb
h-card 配置
你可以在 hugo.toml
中配置其他值以填充你的 h-card。 除 fullName
外,所有内容都是可选的。 social
数组中的值的顺序确定页脚中显示的社交图标的顺序。
对于你要显示的任何社交图标,你需要将 SVG 文件存储在 Hugo 站点根目录下的 icons
目录中。 图标文件名应与 <平台>.svg
匹配,其中 <平台>
是你在 hugo.toml
中指定的值(请参阅下面的示例)。 你可以从 Font Awesome 下载图标。 下面指定的社交平台只是示例; 只要有可用的图标文件,并且你编写了一个包含 %s
的 url_pattern
来指定你的用户名/句柄/身份应替换为形成有效链接的位置,你就可以添加任意平台。
[params]
siteHeaderText = "Ellingson Mineral Tech Blog"
siteFooterText = "Powered by [Hugo](https://gohugo.com.cn/) and the [plague](https://github.com/brianreumere/plague) theme. Hosted on the Gibson supercomputer ⌨️."
[params.hcard]
avatar = "images/i.jpg"
fullName = "Eugene Belford"
pronouns = [ "they", "them" ]
nickname = "The Plague"
showLocation = true
city = "New York"
region = "NY"
country = "US"
social = [
{ platform = "email", identity = "[email protected]", url_pattern = "mailto:%s" },
{ platform = "github", identity = "brianreumere", url_pattern = "https://github.com/%s" }
]
关于 pronoun
h-card 属性,请参阅 h-card 中的代词。
可以将 showLocation
设置为 false 或删除(以及 city
、region
和 country
)以不在你的 h-card 中包含任何位置信息。
h-card 显示在站点页脚中,并且 h-card 的默认格式在 layouts/partials/hcard.html
中。 如果要自定义格式,则可以在 Hugo 站点目录中的 layouts/partials/hcard.html
处创建一个自定义局部模板。
社交图标也是 h-card 的一部分,它们的链接将包含 rel="me"
属性。
h-entry
fullName
和 avatar
(如果存在)属性用于使用 single
布局的页面上(通常是单个博客文章或文章)。
非 IndieWeb 自定义
其他页脚文本
这将呈现在右侧的页脚列中,紧挨着 h-card。 支持 Markdown。 例如
[params]
siteFooterText = "Powered by [Hugo](https://gohugo.com.cn/) and the [plague](https://github.com/brianreumere/plague) theme."
如果你想要多行文本(请查看 TOML 网站)
[params]
siteFooterText = """
Powered by [Hugo](https://gohugo.com.cn/).
Styled with the [plague](https://github.com/brianreumere/plague) theme.
"""
页面
主页
默认情况下,主页将渲染来自 content/_index.md
的 Markdown 格式内容。例如
Welcome to the homepage. This is a list:
* First list item
* Second list item
[Check out this link](https://example.com/).
文章列表
如果你的站点有一个包含博客文章的 content/posts
目录,请添加一个类似于以下的 content/posts/_index.md
文件
---
title: posts
menu:
main:
weight: 1
---
你可以设置菜单权重的高低来控制它在站点菜单中的位置。你可能还需要通过在 hugo.toml
中包含以下内容来从文件名中获取文章日期
[frontmatter]
date = [':filename', ':default']
独立页面
对于一个独立页面(例如,一个包含联系信息的页面),创建一个类似于以下的 content/contact/index.md
---
layout: standalone
title: contact
menu:
main:
weight: 2
---
[email](mailto:[email protected])
Hugo 短代码
SVG 图标
如果你下载了一个 SVG 图标(例如,从 Font Awesome)并将其放在你的 Hugo 站点仓库根目录的 icons
目录中(**不是**在 content
或 static
目录中),你可以使用 icon
短代码将其与你的 Markdown 内容内联使用。参数是图标文件的名称(不带 .svg
文件扩展名)。SVG 将添加 aria-hidden="true"
属性,使其不包含在可访问性树中,因此不要将其用于任何交互功能;它应该纯粹是装饰性的。
{{< icon "github" >}}
标注
实现了一个 Hugo 短代码,用于显示带有自定义类名 callout
和 ARIA note
角色的文本段落。你可以使用它来代替 >
Markdown 块引用语法,因为从技术上讲,块引用应该是实际的引语,而不是注释、标注、警报等。(<aside>
标签似乎也不适合这种情况,因为它旨在用于“可以被视为与 aside
元素周围的内容分开”的内容)。
例如
{{< callout >}}
Make sure to do some stuff! This is important to read.
{{< /callout >}}
我将来可能会为不同颜色的标注添加额外的短代码。
资源
来自 Web Accessibility in Mind (WebAIM) 的 WAVE Web 可访问性评估工具和 MDN 可访问性文档对于获得初始可访问性基线很有帮助。我也鼓励你阅读关于编写可访问的 Markdown 和文档的一般信息(我阅读的一些内容是 Improving The Accessibility Of Your Markdown、Writing accessible documentation 和 Alternative Text)。
Accessible SVG 测试页面、Making SVG Accessible、Introduction to ARIA - Accessible Rich Internet Applications 和 Using Font Awesome Icons in Hugo 对于 SVG 很有帮助。