Blog Sidebar Overview

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.

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.

How to Add Custom Sidebar Widgets

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}
razonyang
Monday, July 15, 2024 Monday, June 19, 2023