摘要：
  本文主要是记录自己对Butterfly主题进行的自定义魔改，涉及到butterfly的图片和滚动条，我当时使用的主题是3.7.1版本，后续升级可能会有所不同，但是大都是大同小异。

1.butterfly的介绍和安装

  • butterfly介绍

  butterfly主题是一个比较好看的主题，具体情况可以点击此处查看官方文档。它内置了许多效果和脚本，如果自己要求不是特别多的话，只在主题配置文件中进行配置，就可以得到一个比较不错的博客站点了，这个主题个人感觉比较适合我这样的小白，哈哈。它内部的框架模板都是用的pug模板，对于我一个搞硬件的人来说，这个语法我还是不是很熟悉，可以从这里查看它的中文官方文档来学习基础的语法，多看一下总没啥坏处，可以大致了解一下内部的模板文件大概都是用来干嘛的，后边魔改涉及源码的，也能自己解决一部分问题。

  • butterfly安装

  butterfly官方文档提供了三种安装方式，可以根据自己的需要下载安装，通过git下载的时候可以选master分支或者dev分支，仅以还是使用master吧，这个是稳定版发布的分支。

shell
1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
shell
1
git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly
shell
1
2
3
4
# 安装命令
npm i hexo-theme-butterfly
# 升级命令
npm update hexo-theme-butterfly

  Hexo本身是不带pug模板渲染器的，安装完主题后一定要安装这两个插件。

shell
1
npm install hexo-renderer-pug hexo-renderer-stylus --save

  安装完毕之后，在站点配置文件[blogRoot]/_config.yml中配置theme: butterfly就可以启用butterfly主题了，启用之后，可以按照官方文档进行配置使用，说明文档是中文的，而且非常的详细。

2.butterfly一图流实现

  按照官方的教程进行配置之后，发现已经可以实现大部分的功能了，但是在按照教程配置的时候我们会遇到图片的配置选项部分，这个时候看个人的喜好了，我自己呢是不太喜欢那么多图片的，背景只有一张图似乎更符合我的希望，而且，那么多涨图片，对于懒惰的我来说，一个一个配置真的太难了，在这个时候，看到了一个大佬的博客的一篇文章，所以就按照这样的方式，实现了整个页面共用一张图的效果。

  参考教程

博客名称 教程原帖
Akilar の糖果屋 Custom Beautify
  • 新建mine.css文件

  为了尽量小的修改源码，在[blogRoot]/source/文件夹下，自己随便新建一个文件夹放css文件就好啦，注意不要把mine.css文件放在_data文件下，不然在引用的时候会有问题，文件新建完毕之后添加以下代码。

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
/*--------------------------------------------------------------------------------------*/
/* 背景顶图透明，公用一张图样式 */
/* 顶图透明 */
#page-header{
  background: transparent!important;
}
/* top-img黑色透明玻璃效果移除，我自己是没有加的，毕竟在文章详情页面，这样会更有区分度一点 */
/*
#page-header.post-bg:before {
  background-color: transparent!important;
}
*/

/* 夜间模式伪类遮罩层透明 */
[data-theme="dark"]
#footer::before{
  background: transparent!important;
}
[data-theme="dark"]
#page-header::before{
  background: transparent!important;
}
/*--------------------------------------------------------------------------------------*/
/* 页脚样式 */
#footer {
  background: transparent !important;   /* 页脚设置为透明 */
}
/* 页脚字体颜色 */ 
#footer-wrap {
  position: relative;
  color: #3f3f3f;                     /* 页脚字体颜色设置为灰色 */              
  text-align: center;
  padding: 2rem 1rem;
}
  • 引用mine.css文件

  在butterfly主题配置文件中有以下部分，将相应的链接按照教程中的引用格式进行引用，就可以将自己定义的样式和脚本文件引入到模板文件中。

yaml
1
2
3
4
5
6
## Inject
inject:
  head:                           # 插入代码到头部 </head> 之前
    - <link rel="stylesheet" href="/custom/mycss/mine.css">
  bottom:                         # 插入代码到底部 </body> 之前
    - <script src="/custom/myjs/xxx.js"></script>
pug [blogRoot]/themes/butterfly/layout/includes/head.pug
1
!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
pug [blogRoot]/themes/butterfly/layout/includes/additional-js.pug
1
!=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})

  添加完引用之后，hexo cl && hexo g && hexo s就可以看到顶部、页脚等已经变成了透明，若是之前设置了背景图，就会发现此时顶部图、背景图、页脚等都是同一张图片，这就达到了我们的目的，在修改页脚透明的时候记得修改一下字体颜色，要与自己的背景图适配一下，否则可能会出现子不清晰的情况。

3.butterfly中的fancybox

  与NexT相同，内置了fancybox的脚本，我们只需要设置[blogRoot]/_config.butterfly.yml中的fancybox: true就可以启用了，但是有一个和NexT相同的问题，就是关闭图片预览的时候滚动条出现的时候有问题，但是与NexT不同的是，butterfly的整个页面不会抖动，只有滚动条部分会向左偏移一下，如果有背景图的话，就会有一个背景图缩放的现象出现。

  那么可不可以像NexT中的处理方式那样写一个脚本不修改源码从而解决整个问题呢？答案是不可以，至少我试了没啥用，所以对于小白的我来说，就只有改源码喽。

  打开butterfly的源码，找到配置fancybox的脚本文件main.js，找到以下部分代码：

javascript [blogRoot]/themes/butterfly/source/js/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const addFancybox = function (ele) {
  const runFancybox = (ele) => {
    ele.each(function (i, o) {
      const $this = $(o)
      const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src')
      const dataCaption = $this.attr('alt') || ''
      $this.wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${dataCaption}" class="fancybox"></a>`)
    })

    $().fancybox({
      selector: '[data-fancybox]',
      loop: true,
      transitionEffect: 'slide',
      protect: true,
      buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
      hash: false,
    })
  }

  其中$().fancybox()中的部分配置了fancybox的默认参数部分，所以在此函数中添加hideScrollbar:false //不隐藏原先自带的滚动条参数，就可以使滚动条一直显示啦，背景图片就不会有缩放的情况产生了，如果需要解决的话，就稍微修改下源码就可以，觉得无所谓的也可以不管它。

4.滚动条美化

  参考教程

博客名称 教程原帖
Lete乐特 Butterfly主题美化-无修改源码

  在mine.css文件中添加以下代码即可实现滚动条的美化

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 滚动条 */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #e58a8a;
    background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    border-radius: 2em;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-moz-selection {
    color: #fff;
    background-color: #e58a8a;
}

  效果预览：