zoukankan      html  css  js  c++  java
  • 给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 hemes extlayout_customsiderbar.swig 文件,将准备好的index.html文件同级别放置,然后打开sidebar.swig文件。在最上面添加代码:

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

    找到hexo hemes extsource 目录,将对应的css文件,js文件放入到对应的目录下即可

    最后

    ​ 最开始的那个日历插件,如果没有问题的话,会出现在你的hexo仓库的根目录下,你在github上打开,点击row,copy网址,然后替换calendar.js最后的地址,文件直接拉到最后就看到了。下面的地址是我自己的,你要替换成你的。

    近来,github又抽风了,点击row也没办法加载这个calendar.json了,我琢磨了一下,直接在calendar.js中用/calendar。json替代github上生成的calendar.json的网络地址,也是可以而且还不用担心网络问题。

    尾记

    ​ 这个玩意里面可优化的东西很多,如果你使用的话,你自己优化一下,我因为不是专业的前端,也秉持着能将就就将就的原则也没改,这篇文章的修改还是因为github的策略有变我才写的。如果有问题,请留言,我看到了一定会回复的!

  • 相关阅读:
    字典
    字符串常用的方法
    切片,集合、文件处理
    蓝桥杯练习 Day6 题解
    spoj-ORDERS
    spoj-SUBSUMS
    spoj
    spoj --- ABCDEF
    C. Andryusha and Colored Balloons
    B. The Meeting Place Cannot Be Changed
  • 原文地址:https://www.cnblogs.com/kingning/p/11078782.html
Copyright © 2011-2022 走看看