hexo-history-calendar历史上的今天插件


前言:

效果如下:
看我的博客[https://kaiboshi.gitee.io/blog]

[]NPM 插件安装的部署方法:

npm i hexo\-history\-calendar -\-save  
# 或者  
cnpm i hexo\-history\-calendar -\-save  

注意,一定要加--save,不然本地预览的时候可能不会显示!!!

[]新增网站根目录_config 配置项(不是主题的)

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

参数:1
含义:插件的叠放顺序,数字越大,叠放约靠前。

history\_calendar:  
 enable: true  
 priority: 4 \# 这里是参数 

layout

参数:type; (class&id)
参数:name;
参数:index;(数字)
含义:如果说 history_calendar 是一幅画,那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况,这时就需要使用 index,确定是哪一个。
最后墙的名字即是 name;

temple_html

参数:html 模板字段
含义:包含挂载容器

hexo 三连

执行 hexo 三连

hexo clean \&\& hexo g \&\& hexo s  

即可发现已经成功部署。


文章作者: Kaiboshi
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Kaiboshi !
评论
  目录