在你的侧边栏放一个历史上的今天

小亮2025-08-202025-08-29

在你的侧边栏放上一个历史上的今天

最近拜访别的大佬的博客时，发现他的侧边栏上的历史上的今天很好看，研究了下，发现是使用了hexo-history-calendar，那么我也来试试。

首先需要安装插件

1
2
3

npm i hexo-history-calendar --save #记得加--save 不然本地预览不显示
#或者
cnpm i hexo-history-calendar --save

然后打开博客根目录的_config.yml 写入一下内容：

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>那年今日</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>'

代码含义：

名称	值	备注
enable	true/false	默认开启
enable_page	all，/	all代表全局，/ 代表主页
priority	4	数字越大，堆放越靠前
layout.type	class/id	html中的class/id，默认是class
layout.name	sticky_layout	布局使用的类名
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>那年今日</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">
               <!-- 这里会通过JavaScript动态加载历史事件内容 -->
             </div>
           </div>
         </div>
       </div>
</div>