給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倉庫