点击查看更新记录

更新记录

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

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

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

  1. 更新v3.6.0适配方案

2021-06-22:插件版1.0.0

  1. 发布插件版

2021-07-23:插件版1.0.5

  1. 新增自定义依赖项的配置接口
点击查看参考教程
参考方向教程原贴
Codepen源项目Responsive Blog Card Slider
沿用冰老师对上述项目重构的样式教程:基于Butterfly主题的轮播手动置顶文章
swiper初始化参数配置Swiper官方文档

写在最前

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

新版插件版教程

插件教程

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

    npm install hexo-butterfly-swiper --save
  2. 添加配置信息,以下为写法示例
    在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

    # hexo-butterfly-swiper
    # see https://akilar.top/posts/8e1264d1/
    swiper:
    enable: true # 开关
    priority: 5 #过滤器优先权
    enable_page: all # 应用页面
    timemode: date #date/updated
    layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
    default_descr: 再怎么看我也不知道怎么描述它的啦!
    custom_css: https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css #自定义swiper css依赖
    custom_js: https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js #自定义swiper js依赖
  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默认文章描述
custom_cssurl【可选】自定义的swiper依赖项css链接
custom_jsurl【可选】自定义的swiper依赖项加js链接


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

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

旧版源码魔改方案

资源下载

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

魔改步骤

  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: 🍡详情