前言

美化之前

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

在添加完js、css后,一定要记得在_config.butterfly.ymlinject里引用

效果

可以显示文章阅读进度

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

参考链接

修改方案

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