前言

美化之前

美化的时候需要修改网站的源文件、添加样式、js之类的，需要一点基础，可以参考

引用站外地址
Hexo博客添加自定义css和js文件
Leonus

在添加完js、css后，一定要记得在_config.butterfly.yml的inject里引用

引用站外地址
Butterfly自用全局变量
June's Blog

效果

可以显示文章阅读进度

官方文档好像可以直接配置，但我试了没用，就自己改了

image-20240201174605194

参考链接

引用站外地址
返回顶部显示网页阅读进度
Leonus
引用站外地址
Butterfly右下角悬浮菜单栏魔改指南
Leonus

修改方案

1. 修改rightside.pug

修改[blogRoot]\themes\butterfly\layout\includes\rightside.pug

1
2
3
4
...
button#go-up(type="button" title=_p("rightside.back_to_top"))
  i.fas.fa-arrow-up
+  span#percent

2. 获取文章阅读进度

这里我和佬有点不一样，我是文章阅读进度，佬是页面进度。我是觉得怪怪的，才改的。

有两种修改办法，任选一种即可

通过拿到元素.toc-percentage的内容进行赋值

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
window.onscroll = percent;// 执行函数

// 页面百分比
function percent() {
    // 检查页面中是否存在 card-toc 元素
    const cardToc = document.getElementById('card-toc');
    if (!cardToc) {
        return; // 如果不存在，直接返回，不执行后续代码
    }

    // 获取百分比文本内容
    const percentage = cardToc.querySelector('.toc-percentage').textContent.trim();

    // 获取 go-up 元素
    let up = document.querySelector("#go-up");

    // 根据百分比设置样式和内容
    if (percentage <= 99) {
        up.childNodes[0].style.display = 'none'
        up.childNodes[1].style.display = 'block'
        up.childNodes[1].innerHTML = percentage;
    } else {
        up.childNodes[1].style.display = 'none'
        up.childNodes[0].style.display = 'block'
    }
}

修改[blogRoot]\themes\butterfly\source\js\main.js，第345行左右，直接在源码这里拿到阅读进度percentage进行赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
scrollPercent = currentTop => {
  const docHeight = $article.clientHeight
  const winHeight = document.documentElement.clientHeight
  const headerHeight = $article.offsetTop
  const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
  const scrollPercent = (currentTop - headerHeight) / (contentMath)
  const scrollPercentRounded = Math.round(scrollPercent * 100)
  const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
  $tocPercentage.textContent = percentage
+  let up = document.querySelector("#go-up");
+  if (percentage <= 99) {
+    up.childNodes[0].style.display = 'none'
+    up.childNodes[1].style.display = 'block'
+    up.childNodes[1].innerHTML = percentage;
+  } else {
+    up.childNodes[1].style.display = 'none'
+    up.childNodes[0].style.display = 'block'
+  }
}

3. 添加rightside.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 返回顶部 */
button#go-up #percent {
    display: none;
    /*font-weight: bold;*/
    font-size: 16px !important;
}

/* 鼠标滑动到按钮上时显示返回顶部图标 */
button#go-up:hover i {
    display: block !important;
}

button#go-up:hover #percent {
    display: none !important;
}

题外话

1. 圆形悬浮菜单

我感觉设置的icon有点偏，额外调了一下，如果你只想调形状，只需要border-radius: 50%;

1
2
3
4
5
6
7
8
9
#rightside > div > button,
#rightside > div > a {
    border-radius: 50%;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    justify-content: center;
}

2. 直达底部按钮

修改[blogRoot]\themes\butterfly\layout\includes\rightside.pug

1
2
3
4
5
6
7
...
button#go-up(type="button" title=_p("rightside.back_to_top"))
  i.fas.fa-arrow-up
  span#percent

+button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
+  i.fas.fa-arrow-down