Hexo+Butterfly代码块水平滚动条

虽然Butterfly主题有滚动条，但是极其不明显。文档里也没找到配置方式，索性自己整一个。

blog\themes\butterfly\source下新建一个scrollbar.css文件，写入以下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 滚动条 */
::-webkit-scrollbar-thumb {
    background-color: #ebdccf !important;  
    border-radius: 3em;
}
::-webkit-scrollbar-track {
    background-color: #292d3e;
    border-radius: 3em;
}
::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}

在_config.butterfly.yml找到

1
2
3
4
5
inject:
   head:       
      # - <link rel="stylesheet" href="/xxx.css">
   bottom:
     # - <script src="xxxx"></script>

在head处加上这个

1
- <link rel="stylesheet" href="/css/scrollbar.css">

效果：