Applicable to >= 3.8.0

The sidebar now supports customization, allowing you to add your favorite widgets. You can add your own widgets or sort existing ones (the Blog Data and Announcement widgets are fixed, but others can be sorted).

Widget Sorting

You only need to configure the sort_order. (It uses the order property of the Flex layout. For specific details, you can refer to the Mozilla documentation. In simple terms, use numbers to specify the sorting order. If not configured, the default value is 0. The smaller the number, the higher the sorting order.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
aside:
 ...
  card_recent_post:
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    sort_order: # Don't modify the setting unless you know how it works

newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works

Customizing Widgets

If you want to add your own content to the sidebar, you can customize it.

Create widget.yml

Create a file widget.yml in the source/_data directory of your Hexo blog (if the _data folder doesn't exist, create it).

Format

1
2
3
4
5
6
7
8
9
10
11
12
13
14
top:
  - class_name:
    id_name:
    name:
    icon:
    html:

bottom:
  - class_name:
    id_name:
    name:
    icon:
    order:
    html:

Parameter Explanation

top: The created widget will appear in the non-sticky area (visible on all pages).

bottom: The created widget will appear in the sticky area (except for the article page).

ParameterExplanation
class_nameThe parent class name of the created widget (optional)
id_nameThe parent id name of the created widget (optional)
nameThe title of the created widget
iconThe icon of the created widget
orderThe sorting order of the created widget (optional)
htmlThe relevant code of the created widget

image-20201230223506507

The generated code will be:

1
2
3
4
5
6
7
8
9
<div class="card-widget Your_written_class_name" id="Your_written_id_name" style="order: Your_written_order">
    <div class="item-headline">
        <i class="Your_written_icon"></i>
        <span>Your_written_name</span>
    </div>
    <div class="item-content">
        Your_written_html
    </div>
</div>

If you need to make UI adjustments to the added widgets, please add CSS to the inject.

Example

Let's take the Visitor Map as an example:

  1. Get the HTML code for the visitor map:

    1
    <script type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=5V2tOKp8qAdRM-i8eu7ETTO9ugt5uKbbG-U7Yj8uMl8"></script>

  2. Create widget.yml:

    1
    2
    3
    4
    5
    6
    7
    bottom:
        - class_name: user-map
          id_name: user-map
          name: Visitor Map
          icon: fas fa-heartbeat
          order:
          html: '<script type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=5V2tOKp8qAdRM-i8eu7ETTO9ugt5uKbbG-U7Yj8uMl8"></script>'

  3. Run Hexo

    image-20201230224442356