先決條件

2022年12月19日 1 分鐘閱讀配置構建工具文檔 NPM Go Hugo Git Node.js PurgeCSS RTLCSS Autoprefixer PostCSS

HB 是一個功能豐富的框架，但同時也具有着一定的複雜性。本文將詳細列出 HB 的環境要求，以便你可以正常地開發和使用 HB 模塊和主題。

贊助

成為我們的資助者或贊助商，以支持我們的工作。

本頁內容

贊助商

必要配置

hugo.toml

1[build]
2  writeStats = true

hugo.yaml

1build:
2  writeStats: true

hugo.json

1{
2   "build": {
3      "writeStats": true
4   }
5}

build.writeStats

用於收集站點所使用到的 classes、ids 和 tags，以供 PurgeCSS 清除未使用的 CSS。

構建工具

推薦儘可能地使用以下構建工具的最新版本。

Go

HB 是一個模塊化的框架，需要安裝 Go 語言以下載和更新 Hugo 模塊。

Arch Linux 安裝 Go

1sudo pacman -S go

Dart Sass

详情请参阅Dart Sass 安装。

Hugo

HB 使用 Hugo Pipes 來編譯 SCSS，因此需要擴展版（extended）的 Hugo。

通過 Go 安裝 Hugo

若你位於中國大陸而沒有 VPN 時，你需要先設置 target="_blank" rel=“noopener noreferrer”>Go 代理服務器。

1go install -tags extended github.com/gohugoio/hugo@latest

Git

版本控制系統，可通過下載頁面獲得。

Arch Linux 安裝 Git

1sudo pacman -S git

Node.js

要求 Node.js 16 或後續版本。

HB 依賴以下 Node.js 包。

Arch Linux 安裝 Node.js

1sudo pacman -S nodejs

名稱	描述
PostCSS CLI	用於轉變樣式。
RTLCSS	將 LTR CSS 轉換爲 RTL，如果你沒有 RTL 網站則可選。
Autoprefixer	解析 CSS 並在 Can I Use 規則中添加對應的前綴。
PurgeCSS	移除未使用的 CSS。

我們提供了一個元包，其包含了上述所有必要的包。

1npm i @hbstack/node-packages

注意

`publishDir` 必須爲 `public`

~~它受到關於共享 PurgeCSS 配置的 HB 實現的限制。~~

該限制以於 v0.7.2 修復。

Hugo Server 生產模式的必要參數

若需要在生產模式下使用 Hugo Server，需要指定 --disableFastRender 和 --renderToDisk，否則 PurgeCSS 和 PostCSS 會出現意想不到的問題。

1hugo server \
2  --disableFastRender \
3  --renderToDisk \
4  -e production \
5  -b http://localhost:1314 \
6  -p 1314

請勿於語言範圍配置中修改 `hb` 和 `hugopress` 參數

HB 依賴於模塊間配置的深度合併，然而語言範圍的參數將會覆蓋覆蓋模塊的配置，而非深度合併，這將導致各種意想不到的問題。比如以下的配置示例是不允許的。

hugo.toml

 1[language]
 2  [language.en]
 3    [language.en.params]
 4      [language.en.params.hb]
 5        foo = 'bar'
 6      [language.en.params.hugopress]
 7        foo = 'bar'
 8  [language.zh-hans]
 9    [language.zh-hans.params]
10      [language.zh-hans.params.hb]
11        foo = 'bar'
12      [language.zh-hans.params.hugopress]
13        foo = 'bar'

hugo.yaml

 1language:
 2  en:
 3    params:
 4      hb:
 5        foo: bar
 6      hugopress:
 7        foo: bar
 8  zh-hans:
 9    params:
10      hb:
11        foo: bar
12      hugopress:
13        foo: bar

hugo.json

 1{
 2   "language": {
 3      "en": {
 4         "params": {
 5            "hb": {
 6               "foo": "bar"
 7            },
 8            "hugopress": {
 9               "foo": "bar"
10            }
11         }
12      },
13      "zh-hans": {
14         "params": {
15            "hb": {
16               "foo": "bar"
17            },
18            "hugopress": {
19               "foo": "bar"
20            }
21         }
22      }
23   }
24}

請禁用 Cloudflare Rocket Loader

Cloudflare Rocket Loader 缺少了 DOMContentLoaded 事件，會導致很多模塊失效，即便我們爲此提供了一個補丁，但得不償失，禁用該功能是目前最佳選擇。

查看源碼編輯頁面歷史

2024年11月21日星期四 2022年12月19日星期一

簡介

安裝

瀏覽用戶手冊