butterfly 主题的简单优化

如视频中所示,在我们前两次点击搜索,由于主题自带的滚动条宽度会导致背景图出现拉伸的现象,在小屏上的感知倒没有那么明显,但一旦到了电脑的显示器上拉伸的感觉就会非常明显
对于我来说,这是有点无法忍受的,我们可以通过引入一个 css 把原本的 8 个像素的滚动条宽度覆盖为 0 个像素来解决背景拉伸的问题

主题配置文件引入imgod.me

1
2
3
4
5
6
7
8
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
- <link rel="stylesheet" href="你的域名/css/scrollbar.css">

上边的链接必须是域名加路径,否则除了首页之外的其他页面通过链接直接访问会无法生效

文件路径
source\css\scrollbar.css

css 代码

1
2
3
4
*::-webkit-scrollbar {
width: 0px;
}

至于为什么不直接修改主题文件,主要是为了方便更新主题,引入 css 覆盖的话即使更新主题效果也不会丢失