点击查看更新记录
更新记录
- 基于冰老师的轮播方案进行修改
- 修改了样式，转为styl
- 去jquery（貌似本来就不依赖jquery）
- 依赖项改为CDN链接
- 适配pjax
- 使用循环节配合data.slider来添加新制定信息
- 更新v3.6.0适配方案
- 发布插件版
- 新增自定义依赖项的配置接口
点击查看参考教程
| 参考方向 | 教程原贴 |
|---|---|
| Codepen源项目 | Responsive Blog Card Slider |
| 沿用冰老师对上述项目重构的样式 | 教程：基于Butterfly主题的轮播手动置顶文章 |
| swiper初始化参数配置 | Swiper官方文档 |
写在最前
本项目是对冰卡诺老师写的教程：基于Butterfly主题的轮播手动置顶文章进行重构，精简了部分样式。适配pjax。
新版插件版教程
插件教程
安装插件,在博客根目录
[Blogroot]下打开终端，运行以下指令：npm install hexo-butterfly-swiper --save
添加配置信息，以下为写法示例
在站点配置文件_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依赖- 参数释义
| 参数 | 备选值/类型 | 释义 |
|---|---|---|
| priority | number | 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填 |
| enable | true/false | 【必选】控制开关 |
| enable_page | path/all | 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为all |
| timemode | date/updated | 【可选】时间显示，date为显示创建日期，updated为显示更新日期,默认为date |
| layout.type | id/class | 【可选】挂载容器类型，填写id或class，不填则默认为id |
| layout.name | text | 【必选】挂载容器名称 |
| layout.index | 0和正整数 | 【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位 |
| default_descr | text | 默认文章描述 |
| custom_css | url | 【可选】自定义的swiper依赖项css链接 |
| custom_js | url | 【可选】自定义的swiper依赖项加js链接 |
使用方法
在文章的front_matter中添加swiper_index配置项即可。
--- |
旧版源码魔改方案
资源下载
由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。
魔改步骤
- 新建
[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)) - 修改
[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 新建
[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();
}新建
[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
text-align center
left auto
top 50%
bottom auto
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配置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/*'
- 修改
新建
[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: 🍡详情
这些内容也很不错哦！
评论
TwikooWaline
