安裝 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，兩者均有效，建議使用較短的名稱空間。