Blog Sidebar Overview

June 19, 2023 2 min read Sidebar Modules

On this page

Donate

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%.

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.