Adding an “On This Day” Sidebar to a Hexo Blog

Background

After upgrading the blog theme over the weekend, I accidentally lost the On This Day sidebar. I spent some time restoring it and wrote down the steps so I would not have to search for them again.

Why I use it

I publish “On This Day” clips on Douyin by recording this section of the website. Without the sidebar, I would have no new material to post.

My Douyin profile

Implementation

Many implementations are fairly involved. Here is the simple approach I used.

1. Install the plugin:

   npm i hexo-history-calendar --save

2. Add the following configuration to the site’s _config.yml:

# On This Day
history_calendar:
  priority: 4
  enable: true
  enable_page: all
  layout:
    type: class
    name: sticky_layout
    index: 0
  temple_html: '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>On This Day</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>'

After saving the configuration and rebuilding the site, the new sidebar card should appear.