github.com/hbstack/hb 是 HB 框架的核心模块,其自动加载和编译模块的 SCSS 和 TypeScript,以及渲染 HTML。
| Module | github.com/hbstack/hb | 
|---|---|
| Repository | ⭐ Please consider giving a star if your like it. | 
| Stars | |
| Version | |
| Used by | |
| Requirements | |
| License | |
| Usage | See how to use modules. | 
HB 是建立在 HugoPress 之上的,这是一个与用户界面无关的模块化框架,其定义了几个钩子用于自动加载模块。
HB 模块必须放在 assets/hb/modules 文件夹中,其结构如下。
1tree assets/hb/modules/vendor-module
2├── js
3│   └── index.ts
4├── purgecss.config.toml
5└── scss
6    ├── index.scss
7    └── variables.tmpl.scss
HB 将会:
scss/variables.tmpl.scss 中加载 SCSS 变量,然后加载并编译 scss/index.scss 到 CSS 包中。js/index.ts 到 JS 包中。purgecss.config.toml 用于将样式添加到 PurgeCSS 白名单中,以避免被删除。我们建议将你的 HB 模块命名为:vendor-name,以避免与 HB 内置模块发生冲突。
vendor:你或组织的名称。name:模块的名称。custom 是为用户保留的。另请参阅创建模块。
| Name | Type | Required | Default | Description | 
|---|---|---|---|---|
css_bundle_name | string | - | hb | CSS 的名称。 | 
debug | boolean | - | false | 调试模式。 | 
js_bundle_name | string | - | hb | JS 的名称。 | 
logo | string | - | images/logo.png | Logo 路径,相对于 assets 目录。 | 
hugo.toml
1[params]
2  [params.hb]
3    css_bundle_name = 'hb'
4    debug = false
5    js_bundle_name = 'hb'
6    logo = 'images/logo.png'
hugo.yaml
1params:
2  hb:
3    css_bundle_name: hb
4    debug: false
5    js_bundle_name: hb
6    logo: images/logo.png
hugo.json
 1{
 2   "params": {
 3      "hb": {
 4         "css_bundle_name": "hb",
 5         "debug": false,
 6         "js_bundle_name": "hb",
 7         "logo": "images/logo.png"
 8      }
 9   }
10}
| Name | Description | 
|---|---|
hb-main | .hb-main HTML 块。 | 
| Name | Description | 
|---|---|
hb-body-begin | 于 body-begin 钩子之后。 | 
hb-body-end | 于 body-end 钩子之前。 |