之前一直在用hexo的butterfly主题,找到了一个日历插件,但是当时完全不能用,修改了好久终于和主题完美适配了,一直懒的写教程,但是也用了很久一直没发现问题,故而分享给大家,因为是针对butterfly主题修改的css,但是核心部分是通用的,希望大家喜欢!
本文火喵原创,禁止转载
本方法可能已经失效
首先展示一下效果,各位更可以前往 旧站点 查看效果
Butterly主题准备工作
如果你用的是Butterfly主题,需要提前做好侧边栏,其他主题相应的在侧边栏为日历腾出位置
- 先贴上净土大神写的日历插件,直接在在命令行窗口安装。前提是你要装的有node.js
npm install --save git://github.com/howiefh/hexo-generator-calendar.git
安装完毕以后,运行一下 hexo g
,然后去hexo目录下的public 目录下看看是是否有一个calendar.json 文件,这个很重要的。
- 在
\hexo\themes\butterfly\layout\includes\widget
目录下新建calendar.pug
,内容如下
.card-widget.card-calendar
.card-calendar
include ./calendar.html
- 在同目录中打开
index.pug
,选取适当位置类比添加如下内容
if theme.aside.card_calendar
include ./calendar.pug
- 在同目录下新建
calendar.html
,内容如下
{message type="error" content="上方代码中,css及js需换成自己的链接,也可以用我的,但是!calendar.js文件中需要修改下方步骤,而且上方代码中的网站(第32行)需要换成自己的"/}
- 三个文件css+js
calendar.js
上方代码的第823行处地址,需换成自己的地址
calendar.css
上方css为本人个人优化,须以实际情况为准,可以做相应修改
👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙