給hexo博客的NEXT主題添加一個雲日歷


一點廢話

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的策略有變我才寫的。如果有問題,請留言,我看到了一定會回復的!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM