博客侧边栏概览

2023年6月19日 2 分钟阅读侧边栏模块

本页内容

赞助

博客模块支持一个可选的侧边栏布局。

如何使用？

你需要导入至少一个侧边栏模块，以启用侧边栏布局，比如简介、文章和分类模块。

侧边栏参数

params.toml

1[hb]
2  [hb.blog]
3    [hb.blog.sidebar]
4      position = 'start'
5      sticky = true
6      width = 0.35

params.yaml

1hb:
2  blog:
3    sidebar:
4      position: start
5      sticky: true
6      width: 0.35

params.json

 1{
 2   "hb": {
 3      "blog": {
 4         "sidebar": {
 5            "position": "start",
 6            "sticky": true,
 7            "width": 0.35
 8         }
 9      }
10   }
11}

`position`

默认为 start（左侧），为 end 时，侧边栏将被置于右侧。

`sticky`

是否固定侧边栏，默认为 true。

`width`

侧边栏占用的宽度，其为一个百分比值，如 0.3（等同于 30%）、40%。

如何添加自定义侧边栏组件

你可以添加自定义的侧边栏小挂件，比如：

首先定义以下配置。

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}

1<div class="hb-module text-center bg-primary text-white p-3">
2  CUSTOM SIDEBAR WIDGET
3</div>

修改模块的顺序

你还可以调整侧边栏模块的顺序，举个例子。