安装 Hugo Bootstrap 模块

2023年3月24日 1 分钟阅读文档安装

学习如何安装 Hugo Bootstrap 模块。

赞助

成为我们的资助者或赞助商，以支持我们的工作。

本页内容

赞助商

请注意本模块并不会为你的站点设置 Bootstrap，你需要确保通过某种方式安装了 Bootstrap CSS 和 JS 组件。

必要条件

一些像 Clearfix 的短代码需要开启 markup.goldmark.renderer.unsafe。

当内容由你控制时，markup.goldmark.renderer.unsafe 并非不安全的。若内容是开放式创作，且无任何审查流程时，则请禁用之。

hugo.yaml

1markup:
2  goldmark:
3    renderer:
4      unsafe: true

hugo.toml

1[markup]
2  [markup.goldmark]
3    [markup.goldmark.renderer]
4      unsafe = true

hugo.json

1{
2   "markup": {
3      "goldmark": {
4         "renderer": {
5            "unsafe": true
6         }
7      }
8   }
9}

hugo.yaml

1module:
2  imports:
3  - path: github.com/hugomods/bootstrap

hugo.toml

1[module]
2  [[module.imports]]
3    path = 'github.com/hugomods/bootstrap'

hugo.json

1{
2   "module": {
3      "imports": [
4         {
5            "path": "github.com/hugomods/bootstrap"
6         }
7      ]
8   }
9}

尽管我们尽量不引入额外的样式，但还是需要一些额外的样式来使短代码看起来更好。

你可以将这些样式复制到你的站点，又或者使用 Hugo Pipes（推荐）来编译。

1@import 'mods/bootstrap/scss/index';

路径 mods/bootstrap/scss/index 是相对于 /assets 目录的，请根据主要样式的位置进行修改。以 assets/styles/main.scss 为例，你需要将路径改为 ../mods/bootstrap/scss/index。

该模块具有两个命名空间：bs 和 bootstrap，两者均有效，建议使用较短的名称空间。