butterfly 主题的简单优化

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

主题配置文件引入ifwww.com

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 覆盖的话即使更新主题效果也不会丢失