基于swiper的首页置顶轮播图

点击查看更新记录

更新记录

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]\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，引入轮播图版块。

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