简介
一个简洁的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 |
- 在文件
/home/bitwater/Desktop/Blog/themes/next/layout/_layout.swig
最后加入
1 | {% include '_third-party/CloudCalendar.swig' %} |
- 在主题配置文件
_config.yml
中加入
1 | # 日历云 |
渲染日历
在指定位置呈现日历云:
修改themes/next/layout/_macro/sidebar.swig
中137行左右添加:
1 | <!-- CloudCalendar --> |
具体如图:
自定义日历颜色
颜色自定义是放在CloudCalendar.styl
中,自行修改即可。
效果
总体感觉还是很不错,谢谢icecory给出的解决方案。