核心模块

github.com/hbstack/hb 是 HB 框架的核心模块,其自动加载和编译模块的 SCSS 和 TypeScript,以及渲染 HTML。

Modulegithub.com/hbstack/hb
Repository⭐ Please consider giving a star if your like it.
Stars
Version
Used by
Requirements
License
UsageSee 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:模块的名称。

另请参阅创建模块

站点参数

NameTypeRequiredDefaultDescription
css_bundle_namestring-hbCSS 的名称。
debugboolean-false调试模式。
js_bundle_namestring-hbJS 的名称。
logostring-images/logo.pngLogo 路径,相对于 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}

HugoPress 属性

NameDescription
hb-main.hb-main HTML 块。

HugoPress 钩子

NameDescription
hb-body-beginbody-begin 钩子之后。
hb-body-endbody-end 钩子之前。