前言

美化之前

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

引用站外地址
Hexo博客添加自定义css和js文件
Leonus

在添加完js、css后，一定要记得在_config.butterfly.yml的inject里引用

引用站外地址
Butterfly自用全局变量
June's Blog

效果

image-20240327180640527

参考链接

引用站外地址
博客魔改日记（3）
Ariasakaの小窝
引用站外地址
Swiper Bar
Akilarの糖果屋

修改方案

首页样式修改（自用）

我原本首页的一些样式会与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
    }
}