点击查看更新记录

更新记录

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

  1. 基于冰老师的轮播方案进行修改
  2. 修改了样式，转为styl
  3. 去jquery（貌似本来就不依赖jquery）
  4. 依赖项改为CDN链接
  5. 适配pjax
  6. 使用循环节配合data.slider来添加新制定信息

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

  1. 更新v3.6.0适配方案
点击查看参考教程
参考方向教程原贴
Codepen源项目Responsive Blog Card Slider
沿用冰老师对上述项目重构的样式教程：基于Butterfly主题的轮播手动置顶文章
swiper初始化参数配置Swiper官方文档

写在最前

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

资源下载

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

下载资源文件

魔改步骤

  1. 新建[Blogroot]\themes\butterfly\layout\includes\sliderbar.pug
    .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}：
        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官方文档

    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
    *
      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,
          CDN:
            # main
            main_css: /css/index.css
            jquery: https://cdn.jsdelivr.net/npm/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,在最上方添加引入内容：
      + @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,在里面填写想要置顶的文章的信息
    - 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: 🍡详情