核心模塊

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 鉤子