MyLife主题演示站 - 日历
type: channel
link: https://store.mmbkz.cn/demo/mylife/index.php/tag/%E6%97%A5%E5%8E%86/
items: 免插件为HEXO博客添加侧边栏日历

免插件为HEXO博客添加侧边栏日历
type: item
date: 2021-06-26T02:00:00+00:00
description: 之前一直在用hexo的butterfly主题，找到了一个日历插件，但是当时完全不能用，修改了好久终于和主题完美适配了，一直懒的写教程，但是也用了很久一直没发现问题，故而分享给大家，因为是针对butterfly主题修改的css，但是核心部分是通用的，希望大家喜欢！{cat_tips_warning}本文火喵原创，禁止转载{/cat_tips_warning}{cat_tips_error}本方法可能已经失效{/cat_tips_error}首先展示一下效果，各位更可以前往 旧站点 查看效果Butterly主题准备工作{cat_tips_success}如果你用的是Butterfly主题，需要提前做好侧边栏，其他主题相应的在侧边栏为日历腾出位置{/cat_tips_success}​先贴上净土大神写的日历插件，直接在在命令行窗口安装。前提是你要装的有node.jsnpm 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，内容如下{cat_hide} {/cat_hide}{message type="error" content="上方代码中，css及js需换成自己的链接，也可以用我的，但是！calendar.js文件中需要修改下方步骤，而且上方代码中的网站（第32行）需要换成自己的"/}三个文件css+jscalendar.js{cat_hide}(function(root, factory) { getcalendar(); if (typeof define === 'function' && define.amd) { define('calendar', ['jquery'], factory); } else if (typeof exports === 'object') { module.exports = factory(require('jquery')); } else { factory(root.jQuery); } }(this, function($) { // default config var defaults = { // 宽度 width: 300, // 高度, 不包含头部，头部固定高度 height: 300, zIndex: 1, // selector or element // 设置触发显示的元素，为null时默认显示 trigger: null, // 偏移位置，可设正负值 // trigger 设置时生效 offset: [0, 1], // 自定义类，用于重写样式 customClass: '', // 显示视图 // 可选：date, month view: 'date', // 默认日期为当前日期 date: new Date(), format: 'yyyy/mm/dd', // 一周的第一天 // 0表示周日，依次类推 startWeek: 0, // 星期格式 weekArray: ['日', '月', '火', '水', '木', '金', '土'], // 设置选择范围 // 格式：[开始日期, 结束日期] // 开始日期为空，则无上限；结束日期为空，则无下限 // 如设置2015年11月23日以前不可选：[new Date(), null] or ['2015/11/23'] selectedRang: null, // 日期关联数据 [{ date: string, value: object }, ... ] // 日期格式与 format 一致 // 如 [ {date: '2015/11/23', value: '面试'} ] data: null, // 展示关联数据 // 格式化参数：{m}视图，{d}日期，{v}value // 设置 false 表示不显示 label: '{d}\n{v}', // 切换字符 prev: '<', next: '>', …