模塊原理

目錄結構

 1├── assets
 2│   └── hb
 3│       └── modules
 4│           └── vendor-name
 5│               ├── js
 6│               │   └── index.ts
 7│               └── scss
 8│                   ├── index.scss
 9│                   └── variables.tmpl.scss
10├── go.mod
11├── hugo.toml
12├── i18n
13├── layouts
14    └── partials
15        └── hugopress
16            └── modules
17                └── hb-vendor-name
18                    ├── attributes
19                    │   └── ...
20                    └── hooks
21                        └── ...
22└── ...

HB 將

• 從 scss/variables.tmpl.scss 加載 SCSS 變量，然後導入並編譯 scss/index.scss 到 CSS 包中。
• 導入並編譯 js/index.ts 到 JS 包中。
• purgecss.config.toml 用於添加樣式到 PurgeCSS 安全名單，以避免其被移除。

SCSS

SCSS 變量

scss/variables.tmpl.scss 用於定義 SCSS 變量的模板，其允許使用 Hugo 模板語法，比如從 Hugo 配置中讀取參數。

SCSS 入口

scss/index.scss 將會被自動導入並編譯到 CSS 包中，你可以使用上述定義的變量。

TypeScript

js/index.ts 將會被自動導入並編譯到 JS 包中。

PurgeCSS

purgecss.config.toml 用於追加樣式到 PurgeCSS 安全列表，以避免樣式被移除。

約定

模塊命名約定

我們強烈推薦按照 vendor-name 形式對模塊進行命名，以避免和 HB 內置模塊相沖突。

• vendor：你的名字或組織的名稱。
• name：模塊的名稱。

請參閱創建一個模塊。

模塊參數命名約定

由於 Hugo 配置是大小寫不敏感的，推薦使用 snake_case 命名，除此之外，你需要以模塊名對參數進行分類。

假設這有一個第三方的模塊，名為 razonyang-hello，其參數如下：

1[params]
2  [params.hb]
3    [params.hb.razonyang_hello]
4      foo = 'bar'

1params:
2  hb:
3    razonyang_hello:
4      foo: bar

1{
2   "params": {
3      "hb": {
4         "razonyang_hello": {
5            "foo": "bar"
6         }
7      }
8   }
9}