瀏覽文檔

博客側邊欄概覽

HB Framework Authors 2023年6月19日 2 分鐘閱讀 側邊欄 模塊
本頁內容

博客模塊支持一個可選的側邊欄佈局。

如何使用？

你需要導入至少一個側邊欄模塊，以啓用側邊欄佈局，比如簡介、文章和分類模塊。

如何添加側邊欄組件

你可以添加自定義的側邊欄小掛件，比如：

首先定義以下配置。

hugo.toml

1[params]
2  [params.hugopress]
3    [params.hugopress.modules]
4      [params.hugopress.modules.hb-custom]
5        [params.hugopress.modules.hb-custom.hooks]
6          [params.hugopress.modules.hb-custom.hooks.hb-blog-sidebar]
7            cacheable = true
8            weight = 1

hugo.yaml

1params:
2  hugopress:
3    modules:
4      hb-custom:
5        hooks:
6          hb-blog-sidebar:
7            cacheable: true
8            weight: 1

hugo.json

 1{
 2   "params": {
 3      "hugopress": {
 4         "modules": {
 5            "hb-custom": {
 6               "hooks": {
 7                  "hb-blog-sidebar": {
 8                     "cacheable": true,
 9                     "weight": 1
10                  }
11               }
12            }
13         }
14      }
15   }
16}

然後創建相關的模板。

layouts/partials/hugopress/modules/hb-custom/hooks/hb-blog-sidebar.html
1<div class="hb-module text-center bg-primary text-white p-3">
2  CUSTOM SIDEBAR WIDGET
3</div>

修改模塊的順序

你還可以調整側邊欄模塊的順序，舉個例子。

hugo.toml

 1[hugopress]
 2  [hugopress.modules]
 3    [hugopress.modules.hb-blog-sidebar-posts]
 4      [hugopress.modules.hb-blog-sidebar-posts.hooks]
 5        [hugopress.modules.hb-blog-sidebar-posts.hooks.hb-blog-sidebar]
 6          weight = 2
 7    [hugopress.modules.hb-blog-sidebar-taxonomies]
 8      [hugopress.modules.hb-blog-sidebar-taxonomies.hooks]
 9        [hugopress.modules.hb-blog-sidebar-taxonomies.hooks.hb-blog-sidebar]
10          weight = 3
11    [hugopress.modules.hb-custom]
12      [hugopress.modules.hb-custom.hooks]
13        [hugopress.modules.hb-custom.hooks.hb-blog-sidebar]
14          cacheable = true
15          weight = 1

hugo.yaml

 1hugopress:
 2  modules:
 3    hb-blog-sidebar-posts:
 4      hooks:
 5        hb-blog-sidebar:
 6          weight: 2
 7    hb-blog-sidebar-taxonomies:
 8      hooks:
 9        hb-blog-sidebar:
10          weight: 3
11    hb-custom:
12      hooks:
13        hb-blog-sidebar:
14          cacheable: true
15          weight: 1

hugo.json

 1{
 2   "hugopress": {
 3      "modules": {
 4         "hb-blog-sidebar-posts": {
 5            "hooks": {
 6               "hb-blog-sidebar": {
 7                  "weight": 2
 8               }
 9            }
10         },
11         "hb-blog-sidebar-taxonomies": {
12            "hooks": {
13               "hb-blog-sidebar": {
14                  "weight": 3
15               }
16            }
17         },
18         "hb-custom": {
19            "hooks": {
20               "hb-blog-sidebar": {
21                  "cacheable": true,
22                  "weight": 1
23               }
24            }
25         }
26      }
27   }
28}