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

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: 
  card_categories:
    sort_order: 
  card_tags:
    sort_order: 
  card_archives:
    sort_order: 
  card_webinfo:
    sort_order: 

newest_comments:
  enable: true
  sort_order: 

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

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