碎碎念

写这篇文章的原因是升级hexo版本，然后发现butterfly更新了5.3版本，就重搭建了一下，顺便给某个人做一个教程。

快速开始

这里可以看butterfly的官方文档，就不多做赘述了，我们直接开始修改部分。

图流背景与顶部图修改

主题配置

这里参考了矩阵大佬的文章。

编辑主题的配置文件_config.butterfly.yml，编辑 index_img、footer_img、background、index_top_img_height、mask.header 选项。
将主页顶部图和页脚图改为透明，设置网站背景，调整主页顶部图高度，移除顶部图的半透明遮罩。

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
# --------------------------------------
# Image Settings
# --------------------------------------

# The banner image of index page
index_img: transparent

# The background image of footer
footer_img: transparent

# Website Background
# Can set it to color or image url
background: transparent

# --------------------------------------
# Index page settings
# --------------------------------------

# The height of top_img, eg: 300px/300em/300rem
index_top_img_height: 400px

# --------------------------------------
# Beautify / Effect
# --------------------------------------

# Add a mask to the header and footer
mask:
  header: false

引入样式文件

新建一个stylus文件内容如下，引入即可。引入是需要注意后缀为.css而非.styl这是因为在渲染时stylus文件会被渲染为CSS文件。

不知道怎么引入看：Hexo博客添加自定义css和js文件 

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@import 'nib'

// 顶部图
#page-header
  background: transparent !important

  &.post-bg, &.not-home-page
    height: 280px !important
  #post-info
    bottom: 40px !important
    text-align: center
  #page-site-info
    top: 140px !important

  @media screen and (max-width: 768px)
    &.not-home-page
      height: 200px !important
    #post-info
      bottom: 10px !important
    #page-site-info
      top: 100px !important

.top-img
  height: 250px
  margin: -50px -40px 50px
  border-top-left-radius: inherit
  border-top-right-radius: inherit
  background-position: center
  background-size: cover
  transition: all .3s

  @media screen and (max-width: 768px)
    height: 230px
    margin: -36px -14px 36px

  [data-theme='dark'] &
    filter: brightness(.8)

// 页脚
#footer:before
  background-color: alpha(#FFF, .5)

  [data-theme='dark'] &
    background-color: alpha(#000, .5)

#footer-wrap, #footer-wrap a
  color: #111
  transition: unset

  [data-theme='dark'] &
    color: var(--light-grey)

增加插件脚本

html需要用到cheerio解析，所以安装依赖。

1
npm install cheerio

在scripts文件夹中新建一个js，内容如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
'use strict';
const { filter } = hexo.extend;
const cheerio = require('cheerio');

/**
 * 在页面插入新顶部图
 * @param {cheerio.Root} $ Root
 */
function insertTopImg($) {
    const header = $('#page-header');
    if (header.length === 0) return;
    const background = header.css('background-image');
    if (!background) return;
    $('#post, #page, #archive, #tag, #category').prepend(`<div class="top-img" style="background-image: ${background};"></div>`);
}

// 修改 HTML
filter.register('after_render:html', (str, data) => {
    const $ = cheerio.load(str, {
        decodeEntities: false
    });
    insertTopImg($);
    return $.html();
});

随机背景图

引入一个js文件，内容如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//随机背景图片数组,图片可以换成图床链接，注意最后一条后面不要有逗号
var backimg =[
    "url(/topimg1.png)",
    "url(/topimg2.png)",
    "url(/topimg3.png)",
    "url(/topimg4.png)",
    "url(/topimg5.png)"
  ];
  //获取背景图片总数，生成随机数
  var bgindex =Math.floor(Math.random() * (backimg.length));
  //重设背景图片
  document.getElementById("web_bg").style.backgroundImage = backimg[bgindex];
  //随机banner数组,图片可以换成图床链接，注意最后一条后面不要有逗号
  var bannerimg =[
    "url(/topimg1.png)",
    "url(/topimg2.png)",
    "url(/topimg3.png)",
    "url(/topimg4.png)",
    "url(/topimg5.png)"
  ];
  //获取banner图片总数，生成随机数
  var bannerindex =Math.ceil(Math.random() * (bannerimg.length-1));
  //重设banner图片
  document.getElementById("page-header").style.backgroundImage = bannerimg[bannerindex];

文章背景及卡片背景透明

新建一个stylus文件内容如下，引入即可。

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/* 明亮主题样式 */
#aside_content .card-widget,
#recent-posts > .recent-post-item,
.layout_page > div:first-child:not(.recent-posts),
.layout_post > #page,
.layout_post > #post,
.read-mode .layout_post > #post,
.layout_post > #archive,
.cardHover,
.type-404 .error-content,
.layout > div:first-child:not(.nc),
#recent-posts .recent-post-item,
#article-container .shuoshuo-item,
#aside-content .card-widget,
.layout .pagination > *:not(.space)
  background rgba(255, 255, 255, 0.6) !important
  -webkit-box-shadow: var(--card-box-shadow)
  box-shadow: var(--card-box-shadow)
  -webkit-transition: all 0.3s
  -moz-transition: all 0.3s
  -o-transition: all 0.3s
  -ms-transition: all 0.3s
  transition: all 0.3s
  border-radius: 8px

#aside-content > .sticky_layout > .card-widget,
.layout > #post,
.layout > #page,
.layout > #archive,
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body
    background rgba(255, 255, 255, 0.6)

/* 暗色模式样式 */
[data-theme='dark']
    &::-webkit-scrollbar-thumb
        background-color #888
        background-image none
    #aside_content .card-widget,
    #recent-posts > .recent-post-item,
    .layout_page > div:first-child:not(.recent-posts),
    .layout_post > #page,
    .layout_post > #post,
    .read-mode .layout_post > #post,
    .layout_post > #archive,
    .cardHover,
    .type-404 .error-content,
    .layout > div:first-child:not(.nc),
    #recent-posts .recent-post-item,
    #article-container .shuoshuo-item,
    #aside-content .card-widget,
    .layout .pagination > *:not(.space)
      background rgba(0, 0, 0, 0.6) !important
      -webkit-box-shadow: var(--card-box-shadow)
      box-shadow: var(--card-box-shadow)
      -webkit-transition: all 0.3s
      -moz-transition: all 0.3s
      -o-transition: all 0.3s
      -ms-transition: all 0.3s
      transition: all 0.3s
      border-radius: 8px

    #aside-content > .sticky_layout > .card-widget,
    .layout > #post,
    .layout > #page,
    .layout > #archive,
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body
        background rgba(0, 0, 0, 0.6)

这里完成之后运行hexo cl && hexo g && hexo s即可见到效果。

页脚修改

在其他人的博看看到了GitHub徽章放在页脚，就也弄了一下为了方便以后修改就修改了一点源文件。我尽量避免修改源文件

修改\themes\butterfly\layout\includes\footer.pug，将容替换为

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
#footer-wrap
  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
    else
      .copyright!= `&copy;${nowYear} By ${config.author}`

  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`

  p#ghbdages
    if theme.ghbdage.enable
      each item in theme.ghbdage.bdageitem
        a.github-badge(target='_blank' href=url_for(item.link)  style='margin-inline:5px')
          img(src=url_for(item.shields) title=item.message)


if theme.mermaid.enable == true
  script(type='text/javascript', id='maid-script' mermaidoptioins=theme.mermaid.options src='https://unpkg.com/mermaid@'+ theme.mermaid.version + '/dist/mermaid.min.js' + '?v=' + theme.version)
  script.
    if (window.mermaid) {
      var options = JSON.parse(document.getElementById('maid-script').getAttribute('mermaidoptioins'));
      mermaid.initialize(options);
    }

然后在编辑主题的配置文件_config.butterfly.yml，在其中新增

1
2
3
4
5
6
7
8
9
ghbdage:
  enable: true
  bdageitem:
    - link: https://hexo.io/  # 标签跳转链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #shields的API链接
      message: 博客框架为Hexo_v5.4.2 #鼠标悬停时显示的信息
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本Butterfly_v4.5.1

滚动条样式

新建一个styl文件，引入即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 滚动条样式 */
::-webkit-scrollbar
    width 8px
    height 8px

::-webkit-scrollbar-track
    background-color rgba(73, 177, 245, .2)
    border-radius 2em

::-webkit-scrollbar-thumb
    background-color #49b1f5
    background-image -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent)
    border-radius 2em

::-webkit-scrollbar-corner
    background-color transparent