Hugo 主题
m10c 主题
一个为博主设计的 Hugo 极简主义主题
主要特性
- 完全响应式
- 支持 Twitter 卡片、Open Graph、Disqus 和 Google Analytics(请参阅 Hugo 文档)
- 可自定义颜色
- 可自定义图片和描述
- 侧边栏可自定义菜单
- 侧边栏可自定义社交媒体链接
- 针对 Lighthouse 进行了性能优化,得分为 100/100
- 包含所有 Feather 和 Simple Icons 图标
入门指南
安装
创建一个新的 Hugo 站点
$ hugo new site [path]
将此存储库克隆到 themes/
目录
$ cd [path]
$ git clone https://github.com/vaga/hugo-theme-m10c.git themes/hugo-theme-m10c
在 config.toml
文件中添加以下行
theme = "hugo-theme-m10c"
配置
在你的 config.toml
文件中,在 params
中定义以下变量
author
:作者姓名description
:作者的简短描述avatar
:包含作者头像图片的文件的路径menu_item_separator
:每个菜单项之间的分隔符。允许使用 HTML (默认值:“ - “)favicon
:你的 favicon.ico 文件的绝对路径(默认值:“/favicon.ico”)
要添加菜单项,请在 menu
中添加以下行
[[menu.main]]
identifier = "tags"
name = "Tags"
url = "/tags/"
阅读 Hugo 文档,了解有关菜单的更多信息
要添加社交链接,请在 params
中添加以下行
[[params.social]]
icon = "brand-github"
name = "My Github"
url = "https://github.com/vaga"
要更改主题颜色,请在 params
中添加以下行
[params.style]
darkestColor = "#d35050"
darkColor = "#212121"
lightColor = "#f5e3e0"
lightestColor = "#f5f5f5"
primaryColor = "#ffffff"
如果你想要上述主题颜色,可以查看 exampleSite/config.toml 文件。
图标
此主题使用两个图标库
- Feather 用于应用程序相关的图标。
- Simple Icons 用于品牌图标。
为了区分品牌图标和常规图标,Simple Icons 库中的所有图标都添加了前缀 brand-
。(例如,brand-github, brand-x, brand-mastodon…)
样式
要使用 scss 覆盖样式,请将名为 _extra.scss
的文件添加到 [path]/assets/css/
注意:Hugo 发布分为两个版本,hugo
和 hugo_extended
。你需要 hugo_extended
才能自动编译你的 scss。
许可证
此主题根据 MIT 许可证发布。
鸣谢
- Feather - MIT
- Simple Icons - CC0 1.0