修改 pug 代码 {#修改-pug-代码}

将资源包中的sliderbar.pug复制到文件夹blog\themes\butterfly\layout中。

将index.pug复制并重命名为index-re.pug作为备份，将资源包 pug 文件夹的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 |

引入 js、css 代码 {#引入-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> |
填写自定义属性的 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://img.zsyyblog.com/images/letter/m.png(这里配置展示的图片)', alt='https://img.zsyyblog.com/images/letter/m.png(这里配置展示的图片)') .blog-slider__content span.blog-slider__code 2020-11-05(这里配置文章时间) a.blog-slider__title(href='https://img.zsyyblog.com/2020/11/05/2020-11-05/') 教程：基于Butterfly主题的新闻资讯侧边栏(这里配置文章标题和文章链接) .blog-slider__text 这个插件基于RollToolsApi,在使用前请先在微信搜索小程序"Roll地盘"获取api.id和api.key。(这里配置文章简介) a.blog-slider__button(href='https://img.zsyyblog.com/2020/11/05/2020-11-05/') 详情(这里配置文章链接) |