Blog Sidebar Overview
On this page
The blog module supports an optional sidebar layout.
How to Use It?
To enable the sidebar, you’ll need to import at least one sidebar modules, such as the profile, posts and taxonomies modules.
How to Add Sidebar Widget
You’re able to add custom sidebar widget, for example.
Firstly, declare the following configuration.
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}
And then create the related template.
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>
Change the Order of Modules
You can also tweak the order of sidebar modules, for example.
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}