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}
Comments