1. 修改footer.html

找到以下代码:

1{{- if (not site.Params.disableScrollToTop) }}
2<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
3    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
4        <path d="M12 6H0l6-6z" />
5    </svg>
6</a>
7{{- end }} 

改为:

 1{{- if (not site.Params.disableScrollToTop) }}
 2<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
 3    <span class="topInner">
 4        <svg class="topSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
 5            <path d="M12 6H0l6-6z" />
 6        </svg>
 7        <span id="read_progress"></span>
 8    </span>
 9</a>
10{{- end }}

并在下面加上:

1<script>
2    document.addEventListener('scroll', function (e) {
3        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
4        const scrolledPercentage = (window.scrollY / scrollableHeight) * 100;
5        const readProgress = document.getElementById("read_progress");
6        readProgress.innerText = scrolledPercentage.toFixed(0);
7    })
8</script>

2. 修改blank.css

在下面加上:

 1/*top*/
 2.topInner {
 3    display: grid;
 4    align-items: baseline;
 5    justify-items: center;
 6    margin: 7px;
 7    font-weight: 900;
 8}
 9
10.topSvg {
11    width: 20px;
12}
13
14.top-link {
15    padding: unset;
16}

3. 参考链接

https://www.sulvblog.cn/posts/blog/build_hugo/