diff --git a/_config.yml b/_config.yml
index 7ff36eba02..43a412204f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -260,13 +260,6 @@ sidebar:
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false
-back2top:
- enable: true
- # Back to top in sidebar.
- sidebar: false
- # Scroll percent label in b2t button.
- scrollpercent: false
-
# A button to open designated chat widget in sidebar.
# Firstly, you need enable the chat service you want to activate its sidebar button.
chat:
@@ -435,6 +428,21 @@ codeblock:
# Available values: default | flat | mac
style:
+back2top:
+ enable: true
+ # Back to top in sidebar.
+ sidebar: false
+ # Scroll percent label in b2t button.
+ scrollpercent: false
+
+# Reading progress bar
+reading_progress:
+ enable: false
+ # Available values: top | bottom
+ position: top
+ color: "#37c6c0"
+ height: 2px
+
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: false
@@ -586,13 +594,6 @@ bookmark:
# If manual, only save it by clicking the bookmark-icon.
save: auto
-# Reading progress bar
-# Dependencies: https://github.com/theme-next/theme-next-reading-progress
-reading_progress:
- enable: false
- color: "#37c6c0"
- height: 2px
-
# ---------------------------------------------------------------
# Comments and Widgets
@@ -1082,11 +1083,6 @@ vendors:
# bookmark: //cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@1/bookmark.min.js
bookmark:
- # Internal version: 1.2.0
- # Example:
- # reading_progress: //cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1/reading_progress.min.js
- reading_progress:
-
# DisqusJS
# Example:
# disqusjs_js: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
diff --git a/layout/_layout.swig b/layout/_layout.swig
index ba5f79e10b..b93d501c53 100644
--- a/layout/_layout.swig
+++ b/layout/_layout.swig
@@ -80,6 +80,10 @@
{%- endif %}
+ {%- if theme.reading_progress.enable %}
+
+ {%- endif %}
+
{{ partial('_partials/share/index.swig', {}, {cache: theme.cache.enable}) }}
diff --git a/layout/_macro/post.swig b/layout/_macro/post.swig
index cb8b4fc252..e7f713ecd1 100644
--- a/layout/_macro/post.swig
+++ b/layout/_macro/post.swig
@@ -8,10 +8,6 @@
{%- set post_class = post_class + ' post-sticky' %}
{%- endif %}
- {%- if theme.reading_progress.enable && not is_index %}
-
- {%- endif %}
-
{##################}
{### POST BLOCK ###}
diff --git a/layout/_scripts/vendors.swig b/layout/_scripts/vendors.swig
index f3273e1ef0..2b460573fb 100644
--- a/layout/_scripts/vendors.swig
+++ b/layout/_scripts/vendors.swig
@@ -22,10 +22,6 @@
{%- set js_vendors.pangu = 'pangu/dist/pangu.min.js?v=4.0.7' %}
{%- endif %}
-{%- if theme.reading_progress.enable %}
- {%- set js_vendors.reading_progress = 'reading_progress/reading_progress.js' %}
-{%- endif %}
-
{%- if theme.motion.enable %}
{%- set js_vendors.velocity = 'velocity/velocity.min.js?v=1.2.1' %}
{%- set js_vendors.velocity_ui = 'velocity/velocity.ui.min.js?v=1.2.1' %}
diff --git a/source/css/_common/components/components.styl b/source/css/_common/components/components.styl
index 922de4d236..1a27f79123 100644
--- a/source/css/_common/components/components.styl
+++ b/source/css/_common/components/components.styl
@@ -6,6 +6,8 @@
@import (hexo-config('back2top.sidebar') ? 'back-to-top-sidebar' : 'back-to-top') if (hexo-config('back2top.enable'));
+@import 'reading-progress' if (hexo-config('reading_progress.enable'));
+
@import 'header';
@import 'post';
@import 'sidebar';
diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl
index d3b0c46a85..9ef718d5c6 100644
--- a/source/css/_common/components/post/post.styl
+++ b/source/css/_common/components/post/post.styl
@@ -65,5 +65,3 @@
@import 'post-copyright' if (hexo-config('creative_commons.post'));
@import 'post-widgets' if ((hexo-config('facebook_sdk.enable') && hexo-config('facebook_sdk.like_button')) || (hexo-config('vkontakte_api.enable') && hexo-config('vkontakte_api.like')) || hexo-config('rating.enable') || hexo-config('likely.enable') || (hexo-config('needmoreshare2.enable') && hexo-config('needmoreshare2.postbottom.enable')));
-
-@import 'post-reading_progress' if (hexo-config('reading_progress.enable'));
diff --git a/source/css/_common/components/post/post-reading_progress.styl b/source/css/_common/components/reading-progress.styl
similarity index 68%
rename from source/css/_common/components/post/post-reading_progress.styl
rename to source/css/_common/components/reading-progress.styl
index 6ad682a506..8bae88ca12 100644
--- a/source/css/_common/components/post/post-reading_progress.styl
+++ b/source/css/_common/components/reading-progress.styl
@@ -4,7 +4,11 @@
height: unquote(hexo-config('reading_progress.height'));
left: 0;
position: fixed;
- top: 0;
+ if (hexo-config('reading_progress.position') == 'bottom') {
+ bottom: 0;
+ } else {
+ top: 0;
+ }
width: 0;
z-index: 9999;
}
diff --git a/source/js/local-search.js b/source/js/local-search.js
index a196cf4c2a..8020079883 100644
--- a/source/js/local-search.js
+++ b/source/js/local-search.js
@@ -301,7 +301,7 @@ window.addEventListener('DOMContentLoaded', () => {
`);
document.querySelector('#search-loading-icon').css({
- margin: '20% auto 0 auto',
+ margin : '20% auto 0 auto',
'text-align': 'center'
});
fetchData(proceedSearch);
diff --git a/source/js/next-boot.js b/source/js/next-boot.js
index 3593ce3207..b73a62e087 100644
--- a/source/js/next-boot.js
+++ b/source/js/next-boot.js
@@ -2,7 +2,7 @@
window.addEventListener('DOMContentLoaded', () => {
- CONFIG.back2top.enable && NexT.utils.registerBackToTop();
+ NexT.utils.registerScrollPercent();
NexT.utils.registerCanIUseTag();
// Mobile top menu bar.
diff --git a/source/js/utils.js b/source/js/utils.js
index 4065aa82fe..96408a2269 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -20,6 +20,7 @@ HTMLElement.prototype.css = function(dict) {
};
NexT.utils = {
+
/**
* Wrap images with fancybox.
*/
@@ -123,23 +124,26 @@ NexT.utils = {
});
},
- registerBackToTop: function() {
+ registerScrollPercent: function() {
var THRESHOLD = 50;
- var $top = $('.back-to-top');
-
+ var backToTop = document.querySelector('.back-to-top');
+ var readingProgressBar = document.querySelector('.reading-progress-bar');
// For init back to top in sidebar if page was scrolled after page refresh.
$(window).on('load scroll', () => {
- $top.toggleClass('back-to-top-on', window.pageYOffset > THRESHOLD);
-
- var scrollTop = window.scrollY;
- var contentVisibilityHeight = NexT.utils.getContentVisibilityHeight();
- var scrollPercent = scrollTop / contentVisibilityHeight;
- var scrollPercentRounded = Math.round(scrollPercent * 100);
- var scrollPercentMaxed = Math.min(scrollPercentRounded, 100);
- $('#scrollpercent > span').html(scrollPercentMaxed);
+ var scrollPercent;
+ if (backToTop || readingProgressBar) {
+ scrollPercent = NexT.utils.getScrollPercent();
+ }
+ if (backToTop) {
+ $(backToTop).toggleClass('back-to-top-on', window.pageYOffset > THRESHOLD);
+ document.querySelector('#scrollpercent span').innerText = scrollPercent;
+ }
+ if (readingProgressBar) {
+ readingProgressBar.style.width = scrollPercent + '%';
+ }
});
- $top.on('click', () => {
+ backToTop && backToTop.addEventListener('click', () => {
$('html, body').animate({ scrollTop: 0 });
});
},
@@ -354,6 +358,14 @@ NexT.utils = {
return sidebarSchemePadding;
},
+ getScrollPercent: function() {
+ var scrollTop = window.scrollY;
+ var contentVisibilityHeight = NexT.utils.getContentVisibilityHeight();
+ var scrollPercent = scrollTop / contentVisibilityHeight;
+ var scrollPercentRounded = Math.round(scrollPercent * 100);
+ return Math.min(scrollPercentRounded, 100);
+ },
+
getScript: function(url, callback, condition) {
if (condition) {
callback();