给hexo博客的NEXT主题添加一个云日历

一点废话

hexo中有文件的归档，可是博文的数目多了，浏览的时候也是很不方便的。因而我就有找个云日历的想法了，折腾了几天，网上的方法都试过了。可是没出效果。因而想着本身来写一个。这本身写的这部分是基于净土大神的日历插件。也是我这个云日历的灵魂，感谢大神。

效果

先看效果，不满意就不用向下看了。能够去找找其余的。图片什么的我就不截了，你直接去个人博客中看吧！

会飞的扫帚仍是放一张图，吸引一下别人吧！

进入正题

插件

​ 先贴上净土大神写的日历插件，直接在在命令行窗口安装。前提是你要装的有node.js

npm install --save git://github.com/howiefh/hexo-generator-calendar.git

安装完毕之后，运行一下 hexo g ，而后去hexo目录下的public 目录下看看是是否有一个calendar.json 文件，这个很重要的。

一点说明

我使用的是Next的muse主题，比较简约，并且有一个空间比较大的侧边栏。其余的主题，大家本身尝试吧！

文件准备

放到百度云盘里自取，这是地址 (3n3u)，下载后我建议，放到你本身的github上的项目中，便于引用，我特别建立了一个static仓库就用来存放这些静态的文件。科普一下github上的js、css文件如何来引用。

点击raw，后这样的页面是否是似曾相识

直接使用 这个地址是不行的，须要把 githubusercontent 改成githack 才能够,例以下面

至此准备工做基本结束了。

开始整合

找到 hexo\themes\next\layout_custom\siderbar.swig 文件，将准备好的index.html文件同级别放置，而后打开sidebar.swig文件。在最上面添加代码：

<div id="coustomerCal">
    {% include "index.html" %}  // swig的语法，我是个菜鸡我也是查资料才知道的
</div>

而后你须要修改index中的资源的引用，将 css、js文件都改成你本身的静态资源引用，固然了，你使用个人也能够，可是后期我修改的时候，可能会形成问题，因此建议你本身添加。大体就是这样了，若是过程当中遇到问题，能够留言！最后附上个人github中的博客仓库，出现问题您能够参考一下！hexo仓库