博客侧边栏概览
赞助
成为我们的资助者或赞助商，以支持我们的工作。
本页内容
赞助商
博客模块支持一个可选的侧边栏布局。
如何使用？
你需要导入至少一个侧边栏模块，以启用侧边栏布局，比如简介、文章和分类模块。
侧边栏参数
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%。
max_width
默认为 320px。
如何添加自定义侧边栏组件
你可以添加自定义的侧边栏小挂件，比如：
首先定义以下配置。
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}
