Hexo主页添加那年今日

显示效果请查看本博客首页 ,此功能参考自しゅふがく,记录方便后续学习。

下面开始添加步骤：

1. NPM 插件安装的部署方法

注意，一定要加 —save，不然本地预览的时候可能不会显示！！！

1
2
3
4
5
npm i hexo-history-calendar --save

# 或者

cnpm i hexo-history-calendar --save

2. 新增网站根目录_config 配置项

1
2
3
4
5
6
7
8
9
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>'

参数含义介绍

1
2
3
4
5
6
7
8
9
10
---
 priority: 
  enable: 
  enable_page: 
  layout:
    type:  
    name:  
    index:  
  temple_html: 
---
写法 解释
enable 是否开启插件 true or false
enable_page 路由地址，all 代表全局开启。如 / 代表主页
priority 插件的叠放顺序，数字越大，叠放约靠前。 1/2/3/4…
layout
type 类型 class&id
name 名称
index 数字
temple_html html 模板字段 （包含挂载容器）

3. 执行命令查看效果即可

1
2
3
hexo cl
hexo g
hexo s