博客側邊欄概覽
贊助
成為我們的資助者或贊助商，以支持我們的工作。
本頁內容
贊助商
博客模塊支持一個可選的側邊欄佈局。
如何使用？
你需要導入至少一個側邊欄模塊，以啟用側邊欄佈局，比如簡介、文章和分類模塊。
側邊欄參數
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}
