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

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

在文件themes/next/source/css/_common/components/third-party/third-party.styl 最后加入

1	@import "CloudCalendar" if hexo-config('CloudCalendar.enable');

在文件/home/bitwater/Desktop/Blog/themes/next/layout/_layout.swig最后加入

1	{% include '_third-party/CloudCalendar.swig' %}

在主题配置文件_config.yml中加入

# 日历云
CloudCalendar:
  enable: true
  language: zh-CN
  single: true
  root: /calendar/

渲染日历

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

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

具体如图：

自定义日历颜色

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

效果

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