Hexo博客技巧：添加首页置顶轮播图

写在最前

本项目是对冰卡诺老师写的教程：基于 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) οnerrοr=`this.οnerrοr=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: https://cdn.jsdelivr.net/gh/drew233/cdn/logol.png
  timeline: '2021-02-08'
  link: /posts/d6c8.html
  title: Hexo博客技巧：添加说说页面
  description: 讲述如何利用Artitalk给博客添加说说页面.
  button: 详情
- cover: https://upimage.alexhchu.com/2021/02/18/5fa9404c2179f.png
  timeline: '2021-02-07'
  link: /posts/c232.html
  title: 阿里云IoT：控制掌控板板载灯亮灭
  description: 一个使用阿里云IoT的教程.
  button: 详情

结语

原文：Akilar：基于 swiper 的首页置顶轮播图