博客主页 🎤
免插件为HEXO博客添加侧边栏日历

Author:

火喵酱

©

Wordage:

共计 41480 字

needs:

约 3 分钟

Popular:

280 ℃

Created:

温馨提示:

本文最后更新于2022年05月12日,已经过了142天没有更新,若内容或图片失效,请留言反馈
目 录

{alert type="success"}
之前一直在用hexo的butterfly主题,找到了一个日历插件,但是当时完全不能用,修改了好久终于和主题完美适配了,一直懒的写教程,但是也用了很久一直没发现问题,故而分享给大家,因为是针对butterfly主题修改的css,但是核心部分是通用的,希望大家喜欢!
{/alert}

{message type="error" content="本文火喵原创,禁止转载"/}

{alert type="error"}
本方法可能已经失效
{/alert}

{callout color="#f0ad4e"}
首先展示一下效果,各位更可以前往 旧站点 查看效果
{/callout}

rili.png

{dotted startColor="#ff6c6c" endColor="#1989fa"/}

Butterly主题准备工作

{message type="info" content="如果你用的是Butterfly主题,需要提前做好侧边栏,其他主题相应的在侧边栏为日历腾出位置"/}

  1. ​先贴上净土大神写的日历插件,直接在在命令行窗口安装。前提是你要装的有node.js

    npm install --save git://github.com/howiefh/hexo-generator-calendar.git

    安装完毕以后,运行一下 hexo g ,然后去hexo目录下的public 目录下看看是是否有一个calendar.json 文件,这个很重要的。

  2. \hexo\themes\butterfly\layout\includes\widget目录下新建calendar.pug,内容如下
.card-widget.card-calendar
    .card-calendar
        include ./calendar.html
  1. 在同目录中打开index.pug,选取适当位置类比添加如下内容
if theme.aside.card_calendar
  include ./calendar.pug
  1. 在同目录下新建calendar.html,内容如下

此处内容,需回复之后可见

{message type="error" content="上方代码中,css及js需换成自己的链接,也可以用我的,但是!calendar.js文件中需要修改下方步骤,而且上方代码中的网站(第32行)需要换成自己的"/}

  1. 三个文件css+js

calendar.js

此处内容,需回复之后可见

{message type="error" content="上方代码的第823行处地址,需换成自己的地址"/}

{dotted startColor="#ff6c6c" endColor="#1989fa"/}

calendar.css

此处内容,需回复之后可见
{message type="warning" content="上方css为本人个人优化,须以实际情况为准,可以做相应修改"/}

{callout color="#f0ad4e"}
参考来源 https://www.cnblogs.com/kingning/p/11078782.html
{/callout}

- - - The END - - -
共计 3 条评论,点此发表评论
  1. 头像
    @
    KINGWDY
    新人

    访客

    nb

    · MacOS · Chrome · 上海
  2. 头像
    @
    mrzefr233
    Lv.1

    访客

    牛逼

    · Win 1x · Chrome · 广东
  3. 头像
    @
    mrzefr233
    Lv.1

    访客

    nb

    · Win 1x · Chrome · 广东
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 本站已运行 2 年 205 天 19 小时 17 分 51统计 百度统计 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2020 ~ 2022. 火喵博客・日记本 All rights reserved.
历史足迹
分类目录
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活