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 钩子之前。 |