Can I create new custom widget in sidebar ?

[dimaslanjaka]

Can I create new custom widget in sidebar without modifying the layout source theme ?

[jerryc127]

https://butterfly.js.org/posts/ea33ab97/

[dimaslanjaka]

I cant read mandarin language T_T

[dimaslanjaka]

chinese language i mean

[jerryc127]

Widget Sorting

Just configure sort_order. (Using the order property of Flex layout, see mozilla documentation for details. In short, use numbers to sort. If not configured, the default is 0. The smaller the number, the higher the sorting.)

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

Custom 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 source/_data in the Hexo blog directory (if there is no _data folder, create it yourself).

Format

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 (that is, it will be displayed on all pages).

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

Parameter	Explanation
class_name	The parent class name of the created widget (optional)
id_name	The parent id name of the created widget (optional)
name	The title of the created widget
icon	The icon of the created widget
order	The sorting of the created widget (optional)
html	The relevant code of the created widget

The generated code is

<div class="card-widget The written class_name" id="The written id_name" style="order: The written order">
    <div class="item-headline">
        <i class="The written icon"></i>
        <span>The written name</span>
    </div>
    <div class="item-content">
        The written html
    </div>
</div>

If you need to adjust the UI of the added widget, please add css to inject by yourself.

Example

Take Visitor Map as an example.

1. Get the html code of the visitor map

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

2. Create widget.yml

   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