hexo-butterfly添加日历插件

2021-12-14 11:28:26 浏览数 (1)

添加日历

安装 hexo-generator-calendar 插件

代码语言：javascript复制
cnpm install --save git://github.com/howiefh/hexo-generator-calendar.git

下载 calendar.js 和 languages.js 文件，保存到 themes/Butterfly/source/js/ 目录

  • calendar.js 下载地址
  • languages.js 下载地址

编辑 calendar.js 文件，在文件最后}(jQuery)); 之前添加:

代码语言：javascript复制
$(document).ready(function () {
    $('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择
});

具体位置参考下图：

编辑 butterfly.yml 文件, 在 inject->bottom 下面添加如下内容

代码语言：javascript复制
- <script src="/js/calendar.js"></script>
- <script src="/js/languages.js"></script>

新建 calendar.styl 文件，保存到 themes/Butterfly/source/css/_layout/ 目录下,内容如下：

代码语言：javascript复制
#calendar
  a
    text-decoration none

.cal-head
  margin-bottom: 15px
  position relative
  height 20px
  padding 8px 6px 2px 6px

.cal-prev,.cal-next
  position absolute
  top 9px
  width 16px
  height 18px
  padding 3px 4px
  border 1px solid transparent
  color #333
  outline 0

.cal-prev
  left 8px
  &:before
    border-right 9px solid #333

.cal-next
  right 8px
  &:before
    border-left 9px solid #333

.cal-prev:before,.cal-next:before
  content ''
  display block
  width 0
  height 0
  border-top 5px solid transparent
  border-bottom 5px solid transparent

.cal-title
  width 100px
  margin 0 auto
  color #333
  font bold 14px/18px Arial
  text-align center
  a
    border 1px solid transparent
    color #9f9f9f

.cal,
.cal th,
.cal td
  border 1px solid #d1d1d1

.cal
  display: table
  border-collapse separate
  border-spacing 0
  border-width 1px 0 0 1px
  table-layout fixed
  width 100%
  margin 0
  th
    background #9f9f9f
    color #fff
    border-width 0 1px 1px 0
    font-weight 700
  td
    border-width 0 1px 1px 0
  tbody
    a
      background-color #007acc
      color #fff
      display block
      font-weight 700
    .cal-today
      background-color #66ecfd
      color #fff
  .cal-gray
    color #bbb8b8

[data-theme='dark'] .cal .cal-gray
  color #505050

.cal th,
.cal td
  font-weight normal
  line-height 2.5625
  padding 0
  text-align center

[data-theme='dark'] .cal .cal-foot
  color #9f9f9f

.cal .cal-foot
  color #2ca6cb

.cal-title a:hover,
.cal-prev:hover,
.cal-next:hover,
.cal .cal-foot:hover,
.cal .cal-foot:focus,
.cal tbody a:hover,
.cal tbody a:focus
  background-color #686868
  color #fff
  cursor pointer

在 themes/Butterfly/layout/includes/widget/ 文件夹新建 card_calendar.pug 文件，文件内容如下：

代码语言：javascript复制
.card-widget.card-calendar
  .card-content
    .item-headline
      i.far.fa-calendar-alt(aria-hidden="true")
      span= _p('aside.card_calendar')
    div.widget-wrap
    div#calendar.widget

编辑 themes/Butterfly/layout/includes/widget/index.pug 文件，在你想要显示的位置插入以下代码：

代码语言：javascript复制
if theme.aside.card_calendar
        !=partial('includes/widget/card_calendar', {}, {cache:theme.fragment_cache})

具体位置参考下图：

注意格式，放置位置，会影响顺序排版！

编辑 butterfly.yml 文件，在 card_webinfo 下面添加一行 card_calendar: true

编辑 themes/Butterfly/languages/zh-CN.yml 文件 (请根据你的网站语言选择)，找到 aside , 在下面添加一行 card_calendar: 日历 (后面的文本可自定义)

如果不想显示，直接把 butterfly.yml 文件的 card_calendar: true 改为 card_calendar: false 即可

注意

因更新最新主题3.5.1版本出现以下报错

代码语言：javascript复制
JQuery - $ is not defined

解决方式

引入以下js

https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js

示例

在inject: -> bottom:

代码语言：javascript复制
- <script src="https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js"></script>

解决我了遇到的问题！

javascript 网站 cdn

0 人点赞