点击查看更新记录

更新记录

2021-07-23:插件版1.0.10

  1. 更换自定义依赖项链接，迁移至npm.elemecdn.com
  2. 新增自定义样式及初始化方法配置项
  3. 旧版本的custom_css、custom_js调整为swiper_css及swiper_js,新增custom_css、custom_js应用于swiperstyle.css和swiper_init.js。语意合乎规范。

2021-07-23:插件版1.0.5

  1. 新增自定义依赖项的配置接口

2021-06-22:插件版1.0.0

  1. 发布插件版

2021-01-31:正式版v1.1.1

  1. 更新v3.6.0适配方案

2020-12-29:正式版v1.1

  1. 基于冰老师的轮播方案进行修改
  2. 修改了样式，转为styl
  3. 去jquery（貌似本来就不依赖jquery）
  4. 依赖项改为CDN链接
  5. 适配pjax
  6. 使用循环节配合data.slider来添加新制定信息
点击查看参考教程
参考方向教程原贴
Codepen源项目Responsive Blog Card Slider
沿用冰老师对上述项目重构的样式教程：基于Butterfly主题的轮播手动置顶文章
swiper初始化参数配置Swiper官方文档

写在最前

本项目是对冰卡诺老师写的教程：基于Butterfly主题的轮播手动置顶文章进行重构，精简了部分样式。适配pjax。

新版插件版教程

插件教程

  1. 安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：

    1
    npm install hexo-butterfly-swiper --save

  2. 添加配置信息，以下为写法示例
    在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    # hexo-butterfly-swiper
    # see /posts/8e1264d1/
    swiper:
      enable: true # 开关
      priority: 5 #过滤器优先权
      enable_page: all # 应用页面
      timemode: date #date/updated
      layout: # 挂载容器类型
        type: id
        name: recent-posts
        index: 0
      default_descr: 再怎么看我也不知道怎么描述它的啦！
      swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
      swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
      custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
      custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法
  3. 参数释义
参数备选值/类型释义
prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enabletrue/false【必选】控制开关
enable_pagepath/all【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为all
timemodedate/updated【可选】时间显示，date为显示创建日期，updated为显示更新日期,默认为date
layout.typeid/class【可选】挂载容器类型，填写id或class，不填则默认为id
layout.nametext【必选】挂载容器名称
layout.index0和正整数【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
default_descrtext默认文章描述
swiper_cssurl【可选】自定义的swiper依赖项css链接
swiper_jsurl【可选】自定义的swiper依赖项加js链接
custom_cssurl【可选】适配主题样式补丁
custom_jsurl【可选】swiper初始化方法


在文章的front_matter中添加swiper_index配置项即可。

1
2
3
4
5
6
7
8
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

旧版源码魔改方案

资源下载

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

下载资源文件

魔改步骤

  1. 新建[Blogroot]\themes\butterfly\layout\includes\sliderbar.pug
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .blog-slider.swiper-container-fade.swiper-container-horizontal#swiper_container
      .blog-slider__wrp.swiper-wrapper(style='transition-duration: 0ms;')
        if site.data.slider
          each i in site.data.slider
            .blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;')
              a.blog-slider__img(href=url_for(i.link)  alt='')|
                img(width='48' height='48' src=url_for(i.cover) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'`, alt='')
              .blog-slider__content
                span.blog-slider__code= i.timeline
                a.blog-slider__title(href=url_for(i.link)  alt='')= i.title
                .blog-slider__text= i.description
                a.blog-slider__button(href=url_for(i.link)  alt='')= i.button      
      .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets
    script(defer src=url_for(theme.CDN.swiper_js))
    script(defer data-pjax src=url_for(theme.CDN.swiper_init))
  2. 修改[Blogroot]\themes\butterfly\layout\index.pug，引入轮播图版块，注意butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache}改为{cache: true}：
    1
    2
    3
    4
    5
    6
    7
    8
    9
        extends includes/layout.pug

        block content
          include ./includes/mixins/post-ui.pug
          #recent-posts.recent-posts
    +       .recent-post-item(style='height:auto;width:100%;')
    +         !=partial('includes/sliderbar', {}, {cache:theme.fragment_cache})
            +postUI
            include includes/pagination.pug

  3. 新建[Blogroot]\themes\butterfly\source\js\swiper_init.js,

    此处是swiper的初始化参数，具体配置内容可以自定义，详细参数请参看Swiper官方文档

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var swiper = new Swiper('.blog-slider', {
      passiveListeners: true,
      spaceBetween: 30,
      effect: 'fade',
      loop: true,
      autoplay: {
        disableOnInteraction: true,
        delay: 3000
      },
      mousewheel: false,
      // autoHeight: true,
      pagination: {
        el: '.blog-slider__pagination',
        clickable: true,
      }
    });

    var comtainer = document.getElementById('swiper_container');
    comtainer.onmouseenter = function() {
      swiper.autoplay.stop();
    };
    comtainer.onmouseleave = function() {
      swiper.autoplay.start();
    }

  4. 新建[Blogroot]\themes\butterfly\source\css\_layout\swiperstyle.styl

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    *
      box-sizing border-box
    div#swiper_container
      background rgba(255, 255, 255, 0);
    .blog-slider
      width 100%
      position relative
      border-radius 12px 8px 8px 12px
      margin auto
      background var(--global-bg)
      padding: 10px
      transition all .3s

    .blog-slider__item
      display flex
      align-items center
      &.swiper-slide-active
        .blog-slider__img
          img
            opacity 1
            transition-delay .3s
        .blog-slider__content
          & > *
            opacity 1
            transform none
          & > *:nth-child(1)
            transition-delay 0.3s
          & > *:nth-child(2)
            transition-delay 0.4s
          & > *:nth-child(3)
            transition-delay 0.5s
          & > *:nth-child(4)
            transition-delay 0.6s
          & > *:nth-child(5)
            transition-delay 0.7s
          & > *:nth-child(6)
            transition-delay 0.8s
          & > *:nth-child(7)
            transition-delay 0.9s
          & > *:nth-child(8)
            transition-delay 1s
          & > *:nth-child(9)
            transition-delay 1.1s
          & > *:nth-child(10)
            transition-delay 1.2s
          & > *:nth-child(11)
            transition-delay 1.3s
          & > *:nth-child(12)
            transition-delay 1.4s
          & > *:nth-child(13)
            transition-delay 1.5s
          & > *:nth-child(14)
            transition-delay 1.6s
          & > *:nth-child(15)
            transition-delay 1.7s



    .blog-slider__img
      width 200px
      flex-shrink 0
      height 200px
      padding 10px
      border-radius 5px
      transform translateX(0px)
      overflow hidden
      &:after
        content ''
        position absolute
        top 0
        left 0
        width 100%
        height 100%
        border-radius 5px
        opacity 0.8
      img
        width 100%
        height 100%
        object-fit cover
        display block
        opacity 0
        border-radius 5px
        transition all .3s

    .blog-slider__content
      padding-right 50px
      padding-left 50px
      & > *
        opacity 0
        transform translateY(25px)
        transition all .4s


    .blog-slider__code
      color var(--font-color)
      margin-bottom 0px
      display block
      font-weight 500

    .blog-slider__title
      font-size 18px
      font-weight 700
      color var(--font-color)
      margin-bottom 15px
      -webkit-line-clamp 1
      display -webkit-box
      overflow hidden
      -webkit-box-orient vertical

    .blog-slider__text
      color var(--font-color)
      -webkit-line-clamp 1
      display -webkit-box
      overflow hidden
      -webkit-box-orient vertical
      margin-bottom 15px
      line-height 1.5em
      width 100%
      display block
      word-break break-all
      word-wrap break-word

    .blog-slider__button
      display inline-flex
      background-color var(--btn-bg)
      padding 4px 14px
      border-radius 8px
      color var(--btn-color)
      text-decoration none
      font-weight 500
      justify-content center
      text-align center
      letter-spacing 1px
      display none
      &:hover
        background-color var(--btn-hover-color)
        color var(--btn-color)

    .blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction
      bottom 10px
      left 0
      width 100%

    .blog-slider__pagination
      position absolute
      z-index 21
      right 20px
      width 11px !important
      text-align center
      left auto !important
      top 50%
      bottom auto !important
      transform translateY(-50%)
      &.swiper-pagination-bullets
        .swiper-pagination-bullet
          margin 8px 0
      .swiper-pagination-bullet
        width 11px
        height 11px
        display block
        border-radius 10px
        background #858585
        opacity 0.2
        transition all .3s
      .swiper-pagination-bullet-active
        opacity 1
        background var(--btn-bg)
        height 30px

    @media screen and (max-width: 600px)
      .blog-slider__pagination
        transform translateX(-50%)
        left 50% !important
        top 320px
        width 100% !important
        display flex
        justify-content center
        align-items center

      .blog-slider__pagination
        &.swiper-pagination-bullets
          .swiper-pagination-bullet
            margin 0 5px

      .blog-slider__pagination
        .swiper-pagination-bullet-active
          height 11px
          width 30px

      .blog-slider__button
        display inline-flex
        width 100%
      .blog-slider__text
        margin-bottom 40px

      .blog-slider
        min-height 350px
        height auto
        margin-top 110px
        margin-bottom 10px

      .blog-slider__content
        margin-top -80px
        text-align center
        padding 0 30px

      .blog-slider__item
        flex-direction column

      .blog-slider__img
        transform translateY(-50%)
        width 90%



      .blog-slider__content
        padding-left 10px
        padding-right 10px

      .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets
        top 110px


    @media screen and (min-width: 600px)
      .blog-slider
        height 200px

      .blog-slider__img
        height 200px

  5. 配置CDN依赖项，

    • 修改[Blogroot]\_config.butterfly.yml,
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
          CDN:
            # main
            main_css: /css/index.css
            jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js
            main: /js/main.js
            utils: /js/utils.js
      +     # 首页轮播图
      +     swiper_js: https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js
      +     swiper_css: https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css
      +     swiper_init: /js/swiper_init.js
    • 修改[Blogroot]\themes\butterfly\source\css\index.styl,在最上方添加引入内容：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      + @import url(hexo-config('CDN.swiper_css'))
        if hexo-config('css_prefix')
          @import 'nib'
        @import '_third-party/normalize.min.css'
        // project
        @import 'var'
        @import '_global/*'
        @import '_highlight/highlight'
        @import '_page/*'
        @import '_layout/*'
        @import '_tags/*'
        @import '_mode/*'

  6. 新建[Blogroot]\source\_data\slider.yml,在里面填写想要置顶的文章的信息

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    - cover: 封面图片链接
      timeline: '2020-10-01' # 日期，需要用''包裹
      link: 置顶文章链接，站内文章建议填相对链接
      title: 置顶文章标题
      description: 置顶文章描述
      button: 手机端按钮内容
    # 示例如下
    - cover: /img/cover1.webp
      timeline: '2020-10-01'
      link: /posts/7c16c4bb/
      title: 📁Hexo博客访问优化日记
      description: 对本站的Hexo优化路线做了个归纳.
      button: 🍡详情
    - cover: /img/cover2.webp
      timeline: '2020-10-27'
      link: /posts/f99b208/
      title: 🦋基于Butterfly主题的美化日记
      description: 基于butterfly的魔改美化记录.
      button: 🍡详情