模塊原理

本文介紹了該模塊的目錄結構、工作原理和一些開發約定。

目錄結構

 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,其參數如下:

hugo.toml

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

hugo.yaml

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

hugo.json

1{
2   "params": {
3      "hb": {
4         "razonyang_hello": {
5            "foo": "bar"
6         }
7      }
8   }
9}
razonyang
2024年7月23日 星期二 2024年4月25日 星期四