模块原理

目录结构

 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}