浏览文档

博客侧边栏概览

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}