当前教程已暂停维护

最新教程,请参考最新教程akilar- 基于 swiper 的首页置顶轮播图

序言:效果展示

感谢xwcker提供的魔改思路。

因为置顶文章过多太占位置,所以写了这个手动置顶的部件。

项目用到了 swiper

资源包地址:https://github.com/Zfour/Butterfly-swiper

资源包下载

废话不多说了,开始教学。


步骤 1:修改 pug 代码

这次由于 vue 没有配置成功,因此打算 2.0 版本再进行 vue 适配。

下载资源包

资源包下载

增加、替换代码

前往”根目录\themes\butterfly\layout”文件夹

将资源包中的”sliderbar.pug”复制到文件夹中。

将”index.pug”复制并重命名为”index-re.pug”作为备份。

将资源包 pug 文件夹的 Original 中的”index.pug”覆盖进行替换。

或者打开”index.pug”按照以下代码进行修改。修改的起始点为”#recent-posts.recent-posts”。

1
2
3
4
5
6
7
8
9
10
extends includes/layout.pug

block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
.recent-post-item(style='height:auto;width:100%')
include sliderbar.pug
.recent-post-item(style='height:0px;clear:both;margin-top: 0px;')
+postUI
include includes/pagination.pug

步骤 2:添加引入 js、css 代码

放置资源包

将下载包中的 swiper 文件夹放入主题目录的”source”文件夹下。

引入 js 和 css

打开”\themes\butterfly"路径下的”_config.yml”

搜索到”inject:”设置处

添加以下代码:

1
2
3
4
5
6
7
inject:
head:
- <link rel="stylesheet" href="/swiper/swiper.min.css">
- <link rel="stylesheet" href="/swiper/swiperstyle.css">
bottom:
- <script src="/swiper/swiper.min.js"></script>
- <script src="/swiper/swiperindex.js"></script>

步骤 3:填写自定义属性的 js 配置

本置顶配色完全适配黑暗模式,为主题适配配色。

配置置顶

首先这次需要对 pug 进行修改,打开”sliderbar.pug”。

其中以下代码部分为主要修改项。默认展示五个,你可以通过复制这段代码增加展示的个数。

1
2
3
4
5
6
7
8
.blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;')
.blog-slider__img
img(src='https://zfe.space/images/letter/m.png(这里配置展示的图片)', alt='https://zfe.space/images/letter/m.png(这里配置展示的图片)')
.blog-slider__content
span.blog-slider__code 2020-11-05(这里配置文章时间)
a.blog-slider__title(href='https://zfe.space/2020/11/05/2020-11-05/') 教程:基于Butterfly主题的新闻资讯侧边栏(这里配置文章标题和文章链接)
.blog-slider__text 这个插件基于RollToolsApi,在使用前请先在微信搜索小程序“Roll地盘”获取api.id和api.key。(这里配置文章简介)
a.blog-slider__button(href='https://zfe.space/2020/11/05/2020-11-05/') 详情(这里配置文章链接)

总结

此时,”hexo g && hexo s”可发现已加载。

若有问题请与我邮件联系499984532@qq.com