插件的安装教程请参照店长这篇文章：Swiper Bar

进行美化微调之前请确保你的博客使用的是Hexo框架Butterfly主题，如果其他框架或主题可能并不适用

添加样式代码

往你的自定义 CSS 文件中添加以下样式代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 文章置顶滚动栏(店长) */
.blog-slider {
  height: 260px !important;
}

.blog-slider__img {
  width: 40% !important;
  height: 100% !important;
}

@media screen and (max-width: 600px) {
  .blog-slider {
    padding: 0 !important;
  }

  .blog-slider__img {
    width: 100% !important;
    height: 40% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

以上代码作用是将电脑端的文章封面图片从原先正方形调整成长方形，移动端则变成覆盖满左右边框，显得更加顺眼，

可在以上已有元素中或自行F12打开使用开发者工具寻找对应元素的ID继续添加自己喜欢的样式代码

前后预览

电脑端

调整前

调整后

移动端

调整前

调整后

鸣谢

Akilar の糖果屋：Swiper Bar