一點廢話
hexo中有文件的歸檔,但是博文的數目多了,瀏覽的時候也是很不方便的。於是我就有找個雲日歷的想法了,折騰了幾天,網上的方法都試過了。但是沒出效果。於是想着自己來寫一個。這自己寫的這部分是基於凈土大神的日歷插件。也是我這個雲日歷的靈魂,感謝大神。
效果
先看效果,不滿意就不用向下看了。可以去找找其他的。圖片什么的我就不截了,你直接去我的博客中看吧!
會飛的掃帚還是放一張圖,吸引一下別人吧!
進入正題
插件
先貼上凈土大神寫的日歷插件,直接在在命令行窗口安裝。前提是你要裝的有node.js
npm install --save git://github.com/howiefh/hexo-generator-calendar.git
安裝完畢以后,運行一下 hexo g ,然后去hexo目錄下的public 目錄下看看是是否有一個calendar.json 文件,這個很重要的。
一點說明
我使用的是Next的muse主題,比較簡約,而且有一個空間比較大的側邊欄。其他的主題,你們自己嘗試吧!
文件准備
放到百度雲盤里自取,這是地址 (wl8h),之前我將這三個引入index.html的文件放在github上引用,后來GitHub的策略便了,我就放到next主題的文件夾內了。
開始整合
找到 hexo\themes\next\layout_custom\siderbar.swig 文件,將准備好的index.html文件同級別放置,然后打開sidebar.swig文件。在最上面添加代碼:
<div id="coustomerCal">
{% include "index.html" %} // swig的語法,我是個菜雞我也是查資料才知道的
</div>
找到hexo\themes\next\source 目錄,將對應的css文件,js文件放入到對應的目錄下即可
最后
最開始的那個日歷插件,如果沒有問題的話,會出現在你的hexo倉庫的根目錄下,你在github上打開,點擊row,copy網址,然后替換calendar.js最后的地址,文件直接拉到最后就看到了。下面的地址是我自己的,你要替換成你的。
近來,github又抽風了,點擊row也沒辦法加載這個calendar.json了,我琢磨了一下,直接在calendar.js中用/calendar。json替代github上生成的calendar.json的網絡地址,也是可以而且還不用擔心網絡問題。
尾記
這個玩意里面可優化的東西很多,如果你使用的話,你自己優化一下,我因為不是專業的前端,也秉持着能將就就將就的原則也沒改,這篇文章的修改還是因為github的策略有變我才寫的。如果有問題,請留言,我看到了一定會回復的!