Blog Sidebar Overview

June 19, 2023 2 min read Sidebar Modules

Donate

Become a backer or sponsor to support our work.

On this page

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.

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`

Default to start (left), when end, place the sidebar to the right.

`sticky`

Whether to stick the sidebar, default to true.

`width`

The width that the sidebar takes, which is a percentage value, such as 0.3 (equals to 30%), 40%.

`max_width`

Default to 320px.

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}