avatar

Hexo添加小部件(Butterfly主题)
二维码

注意,本文方法只适用于Butterfly主题!!!

Pixiv日榜

  1. themes\Butterfly\layout\includes\widget文件夹新建card_pixiv.pug文件,文件内容如下:

    .card-widget.card-pixiv
    .card-content
    .item-headline
    i.fa.fa-image(aria-hidden="true")
    span= _p('aside.card_pixiv')
    iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:99%;height:380px;margin:0;")

    https://cloud.mokeyjay.com/pixiv使用的是超能小紫提供的服务,也可以自行搭建,搭建方式请看这里

  2. 编辑themes\Butterfly\layout\includes\widget\index.pug文件,在你想要显示的位置插入以下代码:

    if theme.aside.card_pixiv
    include ./card_pixiv.pug
  3. 编辑butterfly.yml文件,在card_webinfo下面添加一行card_pixiv: true

  4. 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择),找到card_announcement: 公告, 在下面添加一行card_pixiv: Pixiv日榜Top50(后面的文本可自定义)

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

访客地图

  1. 前往clustrmaps网站注册一个帐号

  2. 找到Free Tools下面的Website Widget, 点击Get Map Widget

  3. 输入你的博客网址,点击Next

  4. 根据你自己的喜好选择样式Map widgetGlobe Widget

  5. 找到如下代码,记住src(******的部分):

    <script type="text/javascript" id="clstr_globe" src="**********************">
  6. themes\Butterfly\layout\includes\widget文件夹新建card_map.pug文件,文件内容如下:

    .card-widget.card-map
    .card-content
    .item-headline
    i.fas.fa-globe-asia(aria-hidden="true")
    span= _p('aside.card_map')
    //- 下面这行适用于3D地图(Globe Widget)
    script#clstr_globe(type="text/javascript" src="******************")
    //- 下面这行适用于平面地图(Map Widget)
    script#clustrmaps(type="text/javascript" src="******************")

    ******部分填写上面的src, 3D地图和平面地图任选一个,不用的把代码删掉

  7. 编辑themes\Butterfly\layout\includes\widget\index.pug文件,在你想要显示的位置插入以下代码:

    if theme.aside.card_map
    include ./card_map.pug
  8. 编辑butterfly.yml文件,在card_webinfo下面添加一行card_map: true

  9. 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择),找到card_announcement: 公告, 在下面添加一行card_map: 访客地图(后面的文本可自定义)

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

文章日历

  1. 安装hexo-generator-calendar插件

    npm install hexo-generator-calendar --save
  2. 下载calendar.jslanguages.js文件,保存到themes\Butterfly\source\js目录

  3. 编辑calendar.js文件,在文件最后添加:

    $(document).ready(function () {
    $('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择
    });
  4. 编辑butterfly.yml文件,在CDN_USE=>js下面如下内容:

    - /js/calendar.js
    - /js/languages.js
  5. 下载calendar.styl文件,保存到themes\Butterfly\source\css\_layout目录

    下载下来的calendar.styl文件部分样式有问题,可以根据自己的需要修改,下面的是我使用的样式

    查看
    #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 120px
    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
  6. themes\Butterfly\layout\includes\widget文件夹新建card_calendar.pug文件,文件内容如下:

    .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
  7. 编辑themes\Butterfly\layout\includes\widget\index.pug文件,在你想要显示的位置插入以下代码:

    if theme.aside.card_calendar
    include ./card_calendar.pug
  8. 编辑butterfly.yml文件,在card_webinfo下面添加一行card_calendar: true

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

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

文章作者: HCLonely
文章链接: https://blog.hclonely.com/posts/57bd67ce/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 HCLonely Blog
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论