核心模块

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 之上的，这是一个与用户界面无关的模块化框架，其定义了几个钩子用于自动加载模块。

功能特性

• 实现了 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：模块的名称。

另请参阅创建模块。

站点参数

1[params]
2  [params.hb]
3    color = 'light'
4    css_bundle_name = 'hb'
5    debug = false
6    full_width = false
7    js_bundle_name = 'hb'
8    logo = 'images/logo.png'

1params:
2  hb:
3    color: light
4    css_bundle_name: hb
5    debug: false
6    full_width: false
7    js_bundle_name: hb
8    logo: images/logo.png

 1{
 2   "params": {
 3      "hb": {
 4         "color": "light",
 5         "css_bundle_name": "hb",
 6         "debug": false,
 7         "full_width": false,
 8         "js_bundle_name": "hb",
 9         "logo": "images/logo.png"
10      }
11   }
12}

页面参数

HugoPress 属性

HugoPress 钩子