hexo-next主题添加日历云

简介

一个简洁的hexo-next日历云插件

GitHub地址:https://github.com/icecory/Hexo-Next-Plugins-Calendar

安装

安装hexo插件

npm install --save git://github.com/bitwater1997/Hexo-Next-Plugins-Calendar#hexo

注意:对于Github插件的更新,可能不再适用于本教程,因此放出我写此篇文章时所用的插件文件,点击下载,可以根据需要下载。

修改配置文件

在GitHub中,下载对应的文件到相应位置:

  • CloudCalendar.swig -> themes/next/layout/_third-party/CloudCalendar.swig
  • CloudCalendar.styl -> themes/next/source/css/_common/components/third-party/CloudCalendar.styl
  • CloudCalendar.js -> themes/next/source/lib/CloudCalendar/CloudCalendar.js
  • languages.js -> themes/next/source/lib/CloudCalendar/languages.js

可以先clone下来,在进行移动到相应位置:git clone https://github.com/icecory/Hexo-Next-Plugins-Calendar.git

然后将四个文件导入到主题中:

  1. 在文件themes/next/source/css/_common/components/third-party/third-party.styl 最后加入
1
@import "CloudCalendar" if hexo-config('CloudCalendar.enable');
  1. 在文件/home/bitwater/Desktop/Blog/themes/next/layout/_layout.swig最后加入
1
{% include '_third-party/CloudCalendar.swig' %}
  1. 在主题配置文件_config.yml中加入
1
2
3
4
5
6
# 日历云
CloudCalendar:
enable: true
language: zh-CN
single: true
root: /calendar/

渲染日历

在指定位置呈现日历云:
修改themes/next/layout/_macro/sidebar.swig中137行左右添加:

1
2
3
4
<!-- CloudCalendar -->
<div class="widget-wrap" style="width: 90%;margin-left: auto;margin-right: auto; opacity: 0.97;">
<div class="widget" id="CloudCalendar"></div>
</div>

具体如图:

pic

自定义日历颜色

颜色自定义是放在CloudCalendar.styl中,自行修改即可。

效果

pic

总体感觉还是很不错,谢谢icecory给出的解决方案。

坚持原创技术分享,您的支持将鼓励我继续创作!
0%