点击查看更新记录
更新记录
2020-12-29:正式版v1.1
- 基于冰老师的轮播方案进行修改
- 修改了样式，转为styl
- 去jquery（貌似本来就不依赖jquery）
- 依赖项改为CDN链接
- 适配pjax
- 使用循环节配合data.slider来添加新制定信息
2021-1-31:正式版v1.1.1
- 更新v3.6.0适配方案
点击查看参考教程
参考方向 | 教程原贴 |
|---|---|
Codepen源项目 | Responsive Blog Card Slider |
沿用冰老师对上述项目重构的样式 | 教程：基于Butterfly主题的轮播手动置顶文章 |
swiper初始化参数配置 | Swiper官方文档 |
写在最前
本项目是对冰卡诺老师写的教程：基于Butterfly主题的轮播手动置顶文章进行重构，精简了部分样式。适配pjax。
资源下载
由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。
下载资源文件
预览效果
魔改步骤
新建
代码语言：javascript复制.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]themesbutterflysourcejsswiper_init.js,
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]themesbutterflysourcecss_layoutswiperstyle.styl
配置CDN依赖项，
新建[Blogroot]source_dataslider.yml,在里面填写想要置顶的文章的信息
