PaperMod主题top按钮增加阅读进度显示

1. 修改footer.html

找到以下代码：

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

改为：

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

并在下面加上：

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

2. 修改blank.css

在下面加上：

/*top*/
.topInner {
    display: grid;
    align-items: baseline;
    justify-items: center;
    margin: 7px;
    font-weight: 900;
}

.topSvg {
    width: 20px;
}

.top-link {
    padding: unset;
}

3. 参考链接

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