Hugo 主题
capsule
一个仅使用 CSS、基于 Bulma 和 Font-Awesome 的 Hugo 主题
- 作者：sudorook
- GitHub 星星：23
- 更新日期：2025-01-12
- 许可证：GPL-2.0
- 标签：响应式
Capsule
一个仅使用 CSS、基于 Bulma CSS 框架和 Font-Awesome 图标的 Hugo 主题。
安装
在您的网站根目录下，运行
git submodule add https://github.com/sudorook/capsule themes/capsule
然后，您可以在命令行上构建 Hugo 并传递 -t capsule 标志，或者您可以将 theme = "capsule" 添加到您的 config.toml 文件中。
注意：任何其他文档都将添加到 Capsule 演示站点，而不是这里。
注意事项：
1. 语法高亮 (通过 pygments)
对于代码块，通过在 config.toml 中设置来选择高亮显示样式
pygmentsstyle = "<style>"
对于深色高亮主题，您应该使用 build/extra/syntax.sass 重建 capsule CSS。从 capsule.sass 文件中取消注释它，并运行 npm run build。
如果没有该文件，背景颜色将默认为 Bulma 的浅色背景颜色，并且旨在针对深色主题的深色背景显示的浅色元素将难以阅读。
2. Bulma 中未使用的类
Capsule 设置为仅编译它需要的类。要启用更多 Bulma 类，请取消注释 build/bulma/bulma.sass 中相关的 sass 文件。
3. 启用自动生成导航菜单
在您的 config.toml 文件中，设置
SectionPagesMenu = "main"
设置此选项后，capsule 将基于您站点中存在的所有部分（content/ 目录中的目录）在导航栏中自动生成导航菜单。
4. 将 git 元数据添加到您的页面
如果您将您的站点托管在公共 git vc 服务器上，您可以设置 capsule 在每个页面上构建一个“最后编辑于...”的注释，该注释使用 git 元数据来显示上次提交的日期，并添加指向您的公共存储库中 blob 的链接。
在您的 config.toml 文件中，设置
enableGitInfo = true
[params]
repo = "https://github.com/<user>/<repo>
repo 变量应指向您网站的存储库 URL。上面的示例使用 GitHub，但是 GitLab 和任何其他遵循 <siteurl>/<user>/<repo>/commit/<hash> 格式的站点也将有效。
5. 将自定义 javascript 或 CSS 添加到页面
在 toml 头部中，添加
css = """
<style>
...
</style>
"""
js = """
<script>
...
</script>
"""
此处指定的任何 CSS 或 JS 都将在 Hugo 渲染页面时添加到站点 <head> 中。
6. 启用目录
要为特定页面生成目录，请添加到 toml 头部
toc = true
目录将包含 Markdown 中定义的所有标题项。每个标题项的嵌套级别都与其标题权重（h1、h2 等）匹配。
构建
要（重新）构建 CSS，您需要安装 npm 和 。克隆 capsule 存储库，并在其中运行
npm install
然后通过以下方式构建
npm run build
您可以在构建之前编辑 build/sass/capsule.sass 来启用/禁用 sass 组件。要使用您自己自定义的 capsule 版本，a) fork 此存储库并设置 Git 子模块以使用它，或者 b) 在 Hugo themes/ 目录中创建指向您的自定义构建的符号链接，假设您的构建系统允许这样做。
