Hexo添加首页置顶轮播图

前言

在写系列博文时对于某一篇文章的寻找过程会比较繁琐（对于博主而言自然会简单些，但是对于访客来讲就没那么轻松），因此参考Akilar的博文弄了一个置顶轮播图。可以把系列博文的链接汇总起来做一个索引，放置在轮播图中。这样既可以展示博主想对外展示的内容，又方便快速进行文章跳转。

效果可以在博客首页查看。

本篇教程会涉及大量源码的改动，对缩进有严格要求。如果需要，可以移步下方链接至Akilar的博客教程去下载源码。教程链接：《Slider Bar》https://akilar.top/posts/8e1264d1/

操作

在themesbutterflylayoutincludes路径下创建文件sliderbar.pug，并将以下内容写入该文件：

代码语言：javascript复制

.blog-slider.swiper-container-fade.swiper-container-horizontal#swiper_containe
  .blog-slider__wrp.swiper-wrapper(style='transition-duration: 0ms;')
    if site.data.slide
      each i in site.data.slide
        .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.在路径themesbutterflylayout修改文件index.pug，添加以下两行代码（注意缩进）引入轮播图板块。

注意在butterfly_v3.6.0中取消了缓存配置，需要将{cache:theme.fragment_cache}改为{cache: true}

代码语言：javascript复制

.recent-post-item(style='height:auto;width:100%;')
  !=partial('includes/sliderbar', {}, {cache:theme.fragment_cache})

3.在themesbutterflysourcejs路径下，新建文件swiper_init.js，并将以下代码写入：

代码语言：javascript复制

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.在themesbutterflysourcecss_layout路径下，创建文件swiperstyle.styl，并将以下代码写入：

代码语言：javascript复制

*
  box-sizing border-box
div#swiper_containe
  background rgba(255, 255, 255, 0);
.blog-slide
  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 cente
  &.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
  &:afte
    content ''
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    border-radius 5px
    opacity 0.8
  img
    width 100%
    height 100%
    object-fit cove
    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 cente
  text-align cente
  letter-spacing 1px
  display none
  &:hove
    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 cente
  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 cente
    align-items cente

  .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-slide
    min-height 350px
    height auto
    margin-top 110px
    margin-bottom 10px

  .blog-slider__content
    margin-top -80px
    text-align cente
    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-slide
    height 200px

  .blog-slider__img
    height 200px

5.配置CDN依赖项。

修改文件_config.butterfly.yml，在CDN模块下添加如下代码：

代码语言：javascript复制

# 首页轮播图
  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

在路径themesbutterflysourcecss下找到文件index.styl，在最上方添加如下代码：

代码语言：javascript复制

@import url(hexo-config('CDN.swiper_css'))

6.在路径source_data下创建文件slider.yml，在里面填写想要置顶文章的信息

代码语言：javascript复制

# - cover: 封面图片链接
#   timeline: '2020-10-01' # 日期，需要用''包裹
#   link: 置顶文章链接，站内文章建议填相对链接
#   title: 置顶文章标题
#   description: 置顶文章描述
#   button: 手机端按钮内容

# 例
- cover: https://cdn.jsdelivr.net/gh/CNhuazhu/Image/RotatingImage6.jpg
  timeline: '2021-01-20'
  link: /2021/01/20/Markdown语法/
  title: Markdown语法
  description: 总结常用的Markdown语法
  button: 详情

结尾

个人觉得还蛮实用的一个修改。

css 缓存 cdn 腾讯云开发者社区

0 人点赞