github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-18 18:33:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

New reversed reading progress bar option (#221)

Browse Source
This commit is contained in:
滑 2021-03-30 12:53:02 +08:00 committed by GitHub
parent 9ef3a63552
commit d46df43afe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_config.yml
View File

@ -377,8 +377,11 @@ back2top:
# Reading progress bar
reading_progress:
enable: false
# Available values: left | right
startAt: left
# Available values: top | bottom
position: top
reversed: false
color: "#37c6c0"
height: 3px

15
source/css/_common/components/reading-progress.styl
View File

@ -1,11 +1,22 @@
.reading-progress-bar {
--progress: 0;
background: unquote(hexo-config('reading_progress.color'));
height: unquote(hexo-config('reading_progress.height'));
left: 0;
position: fixed;
width: 0;
z-index: $zindex-5;
if (hexo-config('reading_progress.reversed')) {
width: calc(100% - var(--progress));
} else {
width: var(--progress);
}
if (hexo-config('reading_progress.startAt') == 'right') {
right: 0;
} else {
left: 0;
}
if (hexo-config('reading_progress.position') == 'bottom') {
bottom: 0;
} else {

2
source/js/utils.js
View File

@ -161,7 +161,7 @@ NexT.utils = {
backToTop.querySelector('span').innerText = Math.round(scrollPercent) + '%';
}
if (readingProgressBar) {
readingProgressBar.style.width = scrollPercent.toFixed(2) + '%';
readingProgressBar.style.setProperty('--progress', scrollPercent.toFixed(2) + '%');
}
}
if (!Array.isArray(NexT.utils.sections)) return;