前言

美化之前

美化的时候需要修改网站的源文件、添加样式、js之类的,需要一点基础,可以参考

在添加完js、css后,一定要记得在_config.butterfly.ymlinject里引用

效果

轮播图效果,和LYX佬一样

参考链接

修改方案

首页样式修改(自用)

我原本首页的一些样式会与Swiper冲突,需要调整

1
2
3
4
/* 注释以下内容 */
.recent-posts{
width:auto!important;
}

1. 下载hexo-butterfly-swiper-lyx

先安装1.0.1版本的,不需要多配一个字段swiper_description

1
npm install -s hexo-butterfly-swiper-lyx@1.0.1

注意,如果安装过hexo-butterfly-swiper或者其他衍生插件(如anzhiyu、anzhiyupro、allbs、ihao、lyx、btmuli)的请先卸载:

1
2
# 以hexo-butterfly-swiper为例
npm un -s hexo-butterfly-swiper

下载好后,在配置文件(_config.yml_config.butterfly.yml都行)添加以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# hexo-butterfly-swiper-lyx
# see https://yisous.xyz/posts/670e47f/#%E6%9B%B4%E5%A5%BD%E7%9A%84%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD
swiper:
enable: true # 开关
priority: 5 # 过滤器优先权
enable_page: / # 应用页面
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
default_descr: 还不知道怎么描述哦
swiper_css: https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css
swiper_js: https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js
custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper-lyx/lib/swiperstyle.css
custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper-lyx/lib/swiper_init.js

相关的参数配置可以去店长那找找哦

2. 添加swiper.css

我自用的样式,按需添加即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.swiper-button-prev, .swiper-button-next {
background-image: none !important; /* 去掉swiper.min.css中按钮的背景图片 */
}

.swiper-button-next:after, .swiper-button-prev:after {
color: var(--june) !important; /* 箭头的颜色 */
}

@media screen and (min-width: 768px) {
#swiper_container {
height: 270px !important
}

.blog-slider__title {
font-size: 1.8rem;
text-align: center
}

.blog-slider__content > * {
margin: 5px !important; /* 设置子元素的外边距为 5px */
}
}

@media screen and (max-width: 768px) {
#swiper_container {
height: 12rem !important
}

.blog-slider__title {
font-size: 1.3rem;
text-align: center
}

.blog-slider__text {
display: none
}
}