博客側邊欄概覽

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

如何使用?

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

側邊欄參數

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}
razonyang
2024年6月15日 星期六 2023年6月19日 星期一