refactor: Optimize theme performance & remove some config

1. remove style to the browser progress bar.
2. remove the animation configuration item of the back2top button.

.github/ISSUE_TEMPLATE.md

@@ -35,12 +35,11 @@ Please don`t open an issue that is not related to the theme, otherwise, it will
 
 
 ## Actual behaviour <!-- 实际行为 -->
-
-
-
 <!-- Please give me the screenshots to locate the issue -->
 <!-- 请尽量提供截图来定位问题 -->
 
+
+
 ## Steps to reproduce the behaviour <!-- 重现步骤 -->
 
 

_config.yml

@@ -91,8 +91,6 @@ back2top:
     # Icon name in FontAwesome, see: https://fontawesome.com/v4.7.0/icons/
     # `rocket` is recommended.
     name: rocket
-    # Animation of rocket launch.
-    animation: true
     # Rotation Angle of icon.
     rotate: -45deg
     # Please use quote to wrap value (All CSS size units are supported).
@@ -126,7 +124,7 @@ footer:
     # `heart` is recommended with animation in red (#ff0000).
     name: heart
     # Heart beat animation.
-    animation: true
+    animation: false
     # Please use quote to wrap value (All CSS size units are supported).
     color: '#ff0000'
   # Hexo link (Powered by Hexo).
@@ -215,7 +213,7 @@ toc:
   # Maximum heading depth of generated toc. You can set it in the
   #   post through `toc_max_depth` in Front-matter.
   # e.g. value: 3, will use h1~3 to generated toc.
-  max_depth: 6
+  max_depth: 4
 
 # Subscribe of email and rss.
 feed:
@@ -685,7 +683,9 @@ cdn:
   # See: https://fontawesome.com/
   # Example:
   # fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
+  # fontawesome: //cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.2/css/all.min.css
   # fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
+  # fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css
   fontawesome:
 
   # Using version: 3.4.1
@@ -782,7 +782,7 @@ cdn:
   # lazyload: //cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js
   lazyload:
 
-  # # Using version: latest
+  # Using version: latest
   # See: https://github.com/GoogleChromeLabs/quicklink/
   # Example:
   # quicklink: //cdn.jsdelivr.net/npm/quicklink@latest/dist/quicklink.umd.js

languages/en.yml

@@ -106,7 +106,7 @@ prompt:
     success: Copy Success
     error: Copy Error
   creative_commons: Creative Commons
-  copy_code: Copy Code
+  copy_button: Click to Copy
 
 # Others
 creative_commons: Creative Commons

languages/zh-CN.yml

@@ -106,7 +106,7 @@ prompt:
     success: 复制成功
     error: 复制失败
   creative_commons: 知识共享
-  copy_code: 复制代码
+  copy_button: 点击复制
 
 # 其他
 creative_commons: 知识共享

layout/_common/config.pug

@@ -18,7 +18,8 @@
   var sidebar = "undefined";
   if (theme.sidebar.enable) {
     sidebar = JSON.stringify({
-      offsetTop: theme.sidebar.offsetTop
+      offsetTop: theme.sidebar.offsetTop,
+      renderTocDepth: theme.toc.max_depth
     });
   }
 
@@ -63,7 +64,7 @@
     copy_success: _p("prompt.copy.success"),
     copy_error: _p("prompt.copy.error"),
     creative_commons: _p("prompt.creative_commons"),
-    copy_code: _p("prompt.copy_code")
+    copy_button: _p("prompt.copy_button")
   });
 
 script.

layout/_common/header.pug

 include ../_mixins/multi-menu.pug
 
-header#header(
-  style=`background-image: url(${
-    page.top_image ? page.top_image :
-      theme.header.bg_image.enable ?
-        theme.header.bg_image.url : " "
-  })`
-)
-  nav.header-nav.slider-up
+header#header
+  div.loading-bar
+    div.progress
+
+  nav.header-nav
     div.header-nav-inner
       div.fa.fa-bars.header-nav-menu-icon
 

layout/_third-party/comments/gitalk.pug

@@ -25,4 +25,4 @@ script.
       language: '!{ lang }'
     });
     gitalk.render('gitalk-container');
-  });
+  }, false);

layout/_third-party/comments/gitment.pug

@@ -36,4 +36,4 @@ script.
     } else {
       renderGitment();
     }
-  });
+  }, false);

layout/_third-party/comments/livere.pug

@@ -9,4 +9,4 @@ script.
       j.async = true;
       e.parentNode.insertBefore(j, e);
     })(document, 'script');
-  });
+  }, false);

layout/_third-party/comments/valine.pug

@@ -31,4 +31,4 @@ script.
       recordIP: !{ theme.valine.recordIP },
       lang: '!{ theme.valine.language }' || 'zh-cn'
     });
-  });
+  }, false);

layout/_third-party/quicklink.pug

@@ -22,7 +22,7 @@ if theme.quicklink.enable
       }
 
       if (!{theme.quicklink.delay}) {
-        window.addEventListener('load', initQuicklink);
+        window.addEventListener('load', initQuicklink, false);
       } else {
         initQuicklink();
       }

layout/_third-party/search/localsearch.pug

@@ -253,4 +253,4 @@ if theme.local_search.enable
             duration: 300
           });
       }
-    });
+    }, false);

source/css/_common/footer.styl

 #footer
   background-color: $gray-dark
-  background-attachment: fixed
-  background-position: bottom
   background-size: cover
 
   if (hexo-config('footer.bg_image.enable'))
-    background-image: url(hexo-config('footer.bg_image.url') || ' ')
+    background: url(hexo-config('footer.bg_image.url') || ' ') no-repeat center center
 
   a
     clearAStyle()
@@ -25,4 +23,4 @@
 
   .heart-beat
     font-size: .9em
-    animation: footer-heart-beat 1.4s infinite
+    animation: footer-heart-beat 1.2s infinite

source/css/_common/header.styl

@@ -8,11 +8,13 @@ else
   height: $header-height
   font-size: $font-header-base
   background-color: $gray-dark
-  background-repeat: no-repeat
-  background-attachment: fixed
-  background-position: center
   background-size: cover
-  transition: height .5s
+
+  if (hexo-config('page.top_image'))
+    background: url(hexo-config('page.top_image') || ' ') no-repeat center center
+
+  if (hexo-config('header.bg_image.enable'))
+    background: url(hexo-config('header.bg_image.url') || ' ') no-repeat center center
 
 if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_height')))
   $header-nav-height = unit(convert(hexo-config('header.nav_height')), 'vh')
@@ -25,19 +27,17 @@ else
   z-index: $z-index1
   width: 100%
   height: $header-nav-height
-  transition: background-color .3s
-  animation-duration: .3s
-  animation-timing-function: ease
-  animation-fill-mode: both
+  transition: transform .3s, background-color .3s
+  will-change: transform
 
   &.fixed
     background-color: $header-nav-bg-color
 
   &.slider-down
-    animation-name: header-sliderDown
+    transform: translateY(0)
 
   &.slider-up
-    animation-name: header-sliderUp
+    transform: translateY(-100%)
 
 $header-nav-link-color
   color: $header-nav-link-color

source/css/_common/sidebar.styl

@@ -10,6 +10,7 @@ $sidebar-width = convert(hexo-config('sidebar.width') || '300px')
   width: $sidebar-width
   font-size: $font-sidebar-base
   background-color: $white
+  transform: translateZ(0)
 
   &.sticky
     position: fixed
@@ -241,6 +242,7 @@ $avatar-animation = 'avatar-' + convert(hexo-config('author.avatar.animation') |
       clearImgStyle()
 
 .sidebar-progress
+  overflow: hidden
   margin-top: .5em
   text-align: center
 
@@ -251,6 +253,8 @@ $avatar-animation = 'avatar-' + convert(hexo-config('author.avatar.animation') |
       margin: 0 .1em
 
   &-line
-    width: 0
+    width: 100%
     height: convert(hexo-config('reading_progress.height') || '1px')
     background-color: convert(hexo-config('reading_progress.color') || '$blue-light')
+    transition: transform .3s
+    transform: translateX(-100%)

source/css/_components/back2top.styl

 #back-top
-  visibility: hidden
   position: fixed
-  right: 1.5rem
+  right: 0
   bottom: 5vh
+  transition: transform .5s
+  transform: translateX(100%)
+
+  &.show
+    transform: translateX(-100%)
+
+  &.hide
+    transform: translateX(100%)
 
 $back-to-top-rotate = convert(hexo-config('back2top.icon.rotate') || '0')
 $back-to-top-color = convert(hexo-config('back2top.icon.color') || '#666')

source/css/_components/index.styl

@@ -4,6 +4,7 @@
 @import './external-link.styl' if (hexo-config('external_link.icon.enable'))
 @import './fancybox.styl' if (hexo-config('fancybox'))
 @import './lazyload.styl' if (hexo-config('lazyload.enable'))
+@import './loading-bar.styl'
 @import './recent-posts.styl'
 @import './pagination.styl'
 @import './comments.styl'

source/css/_components/loading-bar.styl

+.loading-bar
+  position: fixed
+  top: 0
+  left: 0
+  z-index: 99999
+  opacity: 0
+  transition: opacity .4s
+
+  .progress
+    position: fixed
+    top: 0
+    left: 0
+    width: 100%
+    height: 2px
+    background: #77b6ff
+    box-shadow: 0 0 10px rgba(119, 182, 255, .7)
+    transform: translateX(-100%)
+
+  &.loading
+    opacity: 1
+    transition: none
+
+    .progress
+      transition: transform .4s ease
+      will-change: transform

source/css/_global/animation.styl

-// header nav slider animation
-// ----------------------------------------
-@keyframes header-sliderDown
-  0%
-    transform: translateY(-100%)
-
-  100%
-    transform: translateY(0)
-
-@keyframes header-sliderUp
-  0%
-    transform: translateY(0)
-
-  100%
-    transform: translateY(-100%)
-
 // avatar animation
 // ----------------------------------------
 if (hexo-config('author.enable'))

source/css/_global/base.styl

@@ -2,15 +2,13 @@
   color: $selection-color
   background: $selection-bg
 
-:root
-  box-sizing: border-box
-
 *,
 *::before,
 *::after
   box-sizing: inherit
 
 html
+  box-sizing: border-box
   font-size: $font-size-rem
   line-height: 100%
 
@@ -27,8 +25,7 @@ a
   border-bottom: 1px solid $link-bottom-color
   text-decoration: none
   color: $link-color
-  outline: none
-  transition: .2s all ease
+  transition: .2s color ease, .2s border-bottom ease
   cursor: pointer
 
   &:hover

source/css/_global/index.styl

-@import './scroll.styl'
 @import './base.styl'
 @import './animation.styl'
 @import './utils.styl'

source/css/_global/scroll.styl

-html::-webkit-scrollbar
-  width: 10px
-
-.sidebar-toc::-webkit-scrollbar
-  width: 4px
-
-::-webkit-scrollbar-track
-  background-color: #fff
-
-::-webkit-scrollbar-thumb
-  background-color: rgba(0, 0, 0, .2)
-
-::-webkit-scrollbar-thumb:hover
-  background-color: rgba(0, 0, 0, .3)
-
-::-webkit-scrollbar-thumb:window-inactive
-  background-color: #a0daff

source/css/var.styl

@@ -65,7 +65,7 @@ $img-border-color              = #dadefb
 // Module`s color
 // -------------------------------------------
 // Header
-$header-nav-bg-color             = alpha($black-dark, .8)
+$header-nav-bg-color             = alpha(#2d2e30, .6)
 $header-nav-text-color           = $white-light
 $header-nav-text-hover-color     = $blue-light
 $header-nav-link-color           = $white-light

source/js/copy.js

-$(document).ready(function () {
-  var CODEBLOCK_CLASS_NAME = 'highlight';
-  var $codeBlocks = $('figure.highlight');
-
-  $codeBlocks.each(function () {
-    if (!$(this).find('figcaption')[0]) {
-      var lang = this
-        .getAttribute('class')
-        .split(/\s/)
-        .filter(function (e) { return e !== CODEBLOCK_CLASS_NAME; });
-      var codeHeader = $(
-        '<figcaption class="custom">' +
-          '<div class="custom-lang">' + lang + '</div>' +
-        '</figcaption>'
-      )[0];
-
-      this.insertBefore(codeHeader, $(this).children().first()[0]);
-    }
-  });
-
-  var $copyIcon = $(
-    '<div class="copy-button" data-popover=' +
-      CONFIG.prompt.copy_code +
-      ' data-popover-pos="up">' +
-      '<i class="fa fa-clipboard"></i>' +
-    '</div>'
-  );
-  var COPY_BUTTON_WRAPPER =
-    'figure.highlight figcaption, .post-copyright';
-
-  // Add a copy button to the selected elements.
-  $(COPY_BUTTON_WRAPPER).append($copyIcon);
-  $('.copy-button').on('click', function () {
-    var container = null;
-    var codeContainer =
-      $(this).parent('figcaption').parent('figure').find('td.code')[0];
-
-    if (codeContainer) { // Copy code.
-      container = codeContainer;
-    } else { // Copy text.
-      container = $(this).parent()[0];
-    }
-
-    if (Stun.utils.copyText(container)) {
-      Stun.utils.popAlert('success', CONFIG.prompt.copy_success);
-    } else {
-      Stun.utils.popAlert('error', CONFIG.prompt.copy_error);
-    }
-  });
-});

source/js/scroll.js

 $(document).ready(function () {
   // The previous distance from the page to the top.
   var prevScrollTop = 0;
-
-  // Initial run.
-  headerNavScroll();
-
-  $(window).scroll(function () {
-    headerNavScroll();
-  });
-
-  // Click the heading.
-  $('.content')
-    .find('h1,h2,h3,h4,h5,h6')
-    .on('click', function () {
-      scrollHeadingToTop('#' + $(this).attr('id'));
-    });
-
-  // Click the post toc.
-  $('.toc-link').on('click', function (e) {
-    e.preventDefault();
-    scrollHeadingToTop($(this).attr('href'));
-  });
+  var isNavFix = false;
+  var isNavShow = true;
 
   function headerNavScroll () {
     var scrollTop = $(window).scrollTop();
@@ -30,18 +12,28 @@ $(document).ready(function () {
       $('.header-nav').removeClass('fixed');
       $('.header-nav').removeClass('slider-up');
       $('.header-nav').addClass('slider-down');
+
+      isNavFix = false;
     } else {
-      $('.header-nav').addClass('fixed');
+      if (!isNavFix) {
+        $('.header-nav').addClass('fixed');
 
-      if (delta > 0) {
-        if (Math.abs(delta) > 5) {
+        isNavFix = true;
+      }
+
+      var MIN_SCROLL_TO_CHANGE_NAV = 5;
+      // Make the state of nav bar not change due to tiny scrolling.
+      if (Math.abs(delta) > MIN_SCROLL_TO_CHANGE_NAV) {
+        if (isNavShow && delta > 0) {
           $('.header-nav').removeClass('slider-down');
           $('.header-nav').addClass('slider-up');
-        }
-      } else {
-        if (Math.abs(delta) > 5) {
+
+          isNavShow = false;
+        } else if (!isNavShow && delta < 0) {
           $('.header-nav').removeClass('slider-up');
           $('.header-nav').addClass('slider-down');
+
+          isNavShow = true;
         }
       }
     }
@@ -54,4 +46,55 @@ $(document).ready(function () {
       .velocity('stop')
       .velocity('scroll', { easing: 'easeOutSine' });
   }
+
+  var isBack2topShow = false;
+  // Back the page to top.
+  function back2top () {
+    function back2topHandler () {
+      var $top = $('#back-top');
+      var scrollTop = $(window).scrollTop();
+
+      if (scrollTop !== 0) {
+        if (!isBack2topShow) {
+          $top.addClass('show');
+          $top.removeClass('hide');
+          isBack2topShow = true;
+        }
+      } else {
+        $top.addClass('hide');
+        $top.removeClass('show');
+        isBack2topShow = false;
+      }
+    }
+
+    $(window).on('load', back2topHandler);
+    $(window).on('scroll', Stun.utils.throttle(function () {
+      back2topHandler();
+    }, 500));
+
+    $('#back-top').on('click', function () {
+      $('body').velocity('stop').velocity('scroll');
+    });
+  }
+
+  // Initialization
+  headerNavScroll();
+  back2top();
+
+  $(window).on('scroll', Stun.utils.throttle(function () {
+    headerNavScroll();
+  }, 100));
+
+  // Click the heading.
+  $('.content')
+    .find('h1,h2,h3,h4,h5,h6')
+    .on('click', function () {
+      scrollHeadingToTop('#' + $(this).attr('id'));
+    });
+
+  // Click the post toc.
+  $('.toc-link').on('click', function (e) {
+    e.preventDefault();
+    scrollHeadingToTop($(this).attr('href'));
+  });
 });

source/js/sidebar.js

 $(document).ready(function () {
-  var $toc = $('.sidebar-toc');
-  var $view = $('.sidebar-overview');
-
   // The heading that reached the top currently.
   var currHeading = null;
   // The heading that reached the top last time.
   var lastHeading = null;
-
-  // Whether toc needs scrolling.
-  var isTocScroll = false;
-
-  // Distance from sidebar to top.
-  var SIDEBAR_STICKY_TOP = parseInt(CONFIG.sidebar.offsetTop);
-
-  // Is toc in anime.
-  var isAnime = false;
-  // Is toc in max heihgt.
-  var isMaxH = true;
-
-  // Initial run
-  autoSpreadToc();
-  scrollTocToMiddle();
-  sidebarSticky();
-  sidebarAdjustHeight();
-  readProgress();
-
-  $(window).scroll(function () {
-    autoSpreadToc();
-    scrollTocToMiddle();
-    sidebarSticky();
-    sidebarAdjustHeight();
-    readProgress();
-  });
-
-  $('.sidebar-nav-toc').on('click', function () {
-    $('.sidebar-nav-toc').toggleClass('current');
-    $('.sidebar-nav-overview').toggleClass('current');
-
-    $toc.css('display', 'block');
-    $toc.velocity('fadeIn');
-
-    $view.css('display', 'none');
-    $view.velocity('fadeOut');
-  });
-
-  $('.sidebar-nav-overview').on('click', function () {
-    $('.sidebar-nav-toc').toggleClass('current');
-    $('.sidebar-nav-overview').toggleClass('current');
-
-    $toc.css('display', 'none');
-    $toc.velocity('fadeOut');
-
-    $view.css('display', 'block');
-    $view.velocity('fadeIn');
-  });
+  var isRemoveTocClass = false;
+  var tocDepth = CONFIG.sidebar.renderTocDepth;
+  // Optimize selector by theme config.
+  var HEADING_SELECTOR = 'h1,h2,h3,h4,h5,h6'.slice(0, tocDepth * 3);
+  var $postBody = $('.post-body');
+  var $allTocItem = $('.sidebar-toc li');
+
+  if (tocDepth !== 6) {
+    HEADING_SELECTOR = HEADING_SELECTOR.slice(0, -1);
+  }
 
   // Automatically expand items in the article directory
   //   based on the scrolling of heading in the article.
   function autoSpreadToc () {
-    var $postBody = $('.post-body');
-    var $headings = $postBody.find('h1,h2,h3,h4,h5,h6');
+    var $headings = $postBody.find(HEADING_SELECTOR);
     var $firsetChild = $headings.first();
 
+    $headings.each(function () {
+      var headingTop = this.getBoundingClientRect().top;
+
+      if (headingTop < 0) {
+        currHeading = this.getAttribute('id');
+      }
+    });
+
     // All heading are not to the top.
     if ($postBody[0] && (!!$firsetChild[0] &&
         $firsetChild.offset().top - $(window).scrollTop() > 0)) {
-      $('.sidebar-toc li').removeClass('active current');
+      if (!isRemoveTocClass) {
+        $allTocItem.removeClass('active current');
+        isRemoveTocClass = true;
+      }
 
       return;
+    } else {
+      isRemoveTocClass = false;
     }
 
-    $headings.each(function () {
-      if (this.getBoundingClientRect().top < 0) {
-        currHeading = $(this).attr('id');
-      }
-    });
-
     if (currHeading !== lastHeading) {
       var targetLink = $('.sidebar-toc a[href="#' + currHeading + '"]');
 
       // If the relevant "<a>" is not found, remain the state of the toc,
       //   either, remove styles for all active states.
       if (targetLink[0]) {
-        $('.sidebar-toc li').removeClass('active current');
+        $allTocItem.removeClass('active current');
       }
-
       targetLink.parents('li').addClass('active');
       targetLink.parent().addClass('current');
       lastHeading = currHeading;
     }
   }
 
+  // Whether toc needs scrolling.
+  var isTocScroll = false;
   // Scroll the post toc to the middle.
   function scrollTocToMiddle () {
-    var $toc = $('.sidebar-toc');
-    var $currLink = $('.sidebar-toc .current a');
+    var $tocWrapperHeight = $('.sidebar-toc').height();
+    var $tocHeight = $('.sidebar-toc .toc').height();
 
-    if ($currLink[0] && $toc[0]) {
-      var tocTop = $currLink.offset().top - $toc.offset().top;
+    if ($tocHeight <= $tocWrapperHeight) return;
 
-      isTocScroll = !!(tocTop > $toc.height() || tocTop < 0);
+    var $tocWrapper = $('.sidebar-toc');
+    var $currTocItem = $('.sidebar-toc .current a');
+
+    if ($currTocItem[0] && $tocWrapper[0]) {
+      var tocTop = $currTocItem.offset().top - $tocWrapper.offset().top;
+
+      isTocScroll = tocTop > $tocWrapperHeight || tocTop < 0;
     }
 
     if (isTocScroll) {
-      $currLink
+      $currTocItem
         .velocity('stop')
         .velocity('scroll', {
-          container: $toc,
-          offset: -($toc.height() / 2),
+          container: $tocWrapper,
+          offset: (-$tocWrapperHeight / 2),
           duration: 500,
           easing: 'easeOutQuart'
         });
     }
   }
 
+  // Distance from sidebar to top.
+  var SIDEBAR_STICKY_TOP = parseInt(CONFIG.sidebar.offsetTop);
+  var isSidebarSticky = false;
+
   // Sticky the sidebar when it arrived the top.
   function sidebarSticky () {
     var mainInner = $('.main-inner')[0];
@@ -122,47 +97,16 @@ $(document).ready(function () {
       var targetY = mainInner.getBoundingClientRect().top;
 
       if (targetY < SIDEBAR_STICKY_TOP) {
-        $('.sidebar-inner').addClass('sticky');
-      } else {
-        $('.sidebar-inner').removeClass('sticky');
-      }
-    }
-  }
-
-  // Auto adjust the height of sidebar when it arrive footer.
-  function sidebarAdjustHeight () {
-    var footerTop = $('#footer').offset().top;
-    var footerH = $('#footer')[0].getBoundingClientRect().height;
-    var sidebarTop = $('.sidebar-inner').offset().top;
-    var sidebarH = $('.sidebar-inner')[0].getBoundingClientRect().height;
-
-    if (!isAnime && sidebarTop + sidebarH > footerTop) {
-      var targetTocH =
-        parseInt($('.sidebar-toc').css('max-height')) - footerH;
-      isAnime = true;
-
-      $('.sidebar-toc').velocity({
-        maxHeight: targetTocH
-      }, {
-        duration: 300,
-        complete: function () {
-          isAnime = false;
-          isMaxH = false;
+        if (!isSidebarSticky) {
+          $('.sidebar-inner').addClass('sticky');
+          isSidebarSticky = true;
         }
-      });
-    } else if (!isMaxH && !isAnime && $(window).height() <
-        $('#footer')[0].getBoundingClientRect().top) {
-      isAnime = true;
-
-      $('.sidebar-toc').velocity({
-        maxHeight: '70vh'
-      }, {
-        duration: 240,
-        complete: function () {
-          isAnime = false;
-          isMaxH = true;
+      } else {
+        if (isSidebarSticky) {
+          $('.sidebar-inner').removeClass('sticky');
+          isSidebarSticky = false;
         }
-      });
+      }
     }
   }
 
@@ -175,9 +119,51 @@ $(document).ready(function () {
     var percent = parseInt((scrollH /
       Math.abs($post.height() - $(window).height())) * 100);
     percent = percent > 100 ? 100 : percent < 0 ? 0 : percent;
-    percent += '%';
 
     $('.sidebar-progress-number').html(percent);
-    $('.sidebar-progress-line').css('width', percent);
+    $('.sidebar-progress-line').css(
+      'transform', 'translateX(' + (percent - 100) + '%)'
+    );
   }
+
+  // Initial run
+  autoSpreadToc();
+  sidebarSticky();
+  scrollTocToMiddle();
+  readProgress();
+
+  $(window).on('scroll', function () {
+    sidebarSticky();
+  });
+
+  $(window).on('scroll', Stun.utils.throttle(function () {
+    autoSpreadToc();
+    scrollTocToMiddle();
+    readProgress();
+  }, 150));
+
+  var $tocWrapper = $('.sidebar-toc');
+  var $view = $('.sidebar-overview');
+
+  $('.sidebar-nav-toc').on('click', function () {
+    $('.sidebar-nav-toc').toggleClass('current');
+    $('.sidebar-nav-overview').toggleClass('current');
+
+    $tocWrapper.css('display', 'block');
+    $tocWrapper.velocity('fadeIn');
+
+    $view.css('display', 'none');
+    $view.velocity('fadeOut');
+  });
+
+  $('.sidebar-nav-overview').on('click', function () {
+    $('.sidebar-nav-toc').toggleClass('current');
+    $('.sidebar-nav-overview').toggleClass('current');
+
+    $tocWrapper.css('display', 'none');
+    $tocWrapper.velocity('fadeOut');
+
+    $view.css('display', 'block');
+    $view.velocity('fadeIn');
+  });
 });

source/js/stun-boot.js

 $(document).ready(function () {
   CONFIG.shortcuts.switch_post && Stun.utils.registerSwitchPost();
+
+  // Not reload this, because it's changeless.
+  if (CONFIG.external_link) {
+    Stun.utils.addIconToExternalLink('#footer');
+  }
+
+  Stun.utils.addCopyButtonToCopyright();
+  Stun.utils.registerCopyEvent();
   CONFIG.reward && Stun.utils.registerShowReward();
-  CONFIG.back2top && Stun.utils.back2top();
   CONFIG.gallery_waterfall && Stun.utils.galleryWaterFall();
   CONFIG.lazyload && Stun.utils.lazyLoadImages();
 
   if (CONFIG.external_link) {
-    var WRAPPER = '.archive-inner, .post-title, #footer';
+    var WRAPPER = '.archive-inner, .post-title';
 
     Stun.utils.addIconToExternalLink(WRAPPER);
   }

source/js/utils.js

@@ -66,6 +66,22 @@ Stun.utils = Stun.$u = {
     };
     return throttled;
   },
+  hasMobileUA: function () {
+    var nav = window.navigator;
+    var ua = nav.userAgent;
+    var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g;
+
+    return pa.test(ua);
+  },
+  isTablet: function () {
+    return window.screen.width > 767 && window.screen.width < 992 && this.hasMobileUA();
+  },
+  isMobile: function () {
+    return window.screen.width < 767 && this.hasMobileUA();
+  },
+  isDesktop: function () {
+    return !this.isTablet() && !this.isMobile();
+  },
   /**
    * Change the event code to keyCode.
    * @param {String} code Event code
@@ -188,6 +204,7 @@ Stun.utils = Stun.$u = {
       selector: '[data-fancybox]',
       loop: true,
       transitionEffect: 'slide',
+      hash: false,
       buttons: [
         'share',
         'slideShow',
@@ -235,32 +252,6 @@ Stun.utils = Stun.$u = {
       .parent('.external-link')
       .append($icon);
   },
-  // Back the page to top.
-  back2top: function () {
-    function back2topHandler () {
-      var $top = $('#back-top');
-      var scrollTop = $(window).scrollTop();
-
-      if (scrollTop !== 0) {
-        $top.css('visibility', 'visible');
-      } else {
-        $top.css('visibility', 'hidden');
-      }
-    }
-
-    $(window).on('load', back2topHandler);
-    $(window).on('scroll', back2topHandler);
-
-    $('#back-top').on('click', function () {
-      $('body').velocity('stop').velocity('scroll');
-
-      if (CONFIG.back2top.animation) {
-        $('#back-top')
-          .velocity({ translateY: '-100vh' }, { duration: 500 })
-          .velocity('reverse', { duration: 10 });
-      }
-    });
-  },
   // Switch to the prev / next post by shortcuts.
   registerSwitchPost: function () {
     var _this = this;
@@ -366,6 +357,58 @@ Stun.utils = Stun.$u = {
       });
     }
   },
+  addCopyButtonToCopyright: function () {
+    $('figure.highlight').each(function () {
+      if (!$(this).find('figcaption')[0]) {
+        var CODEBLOCK_CLASS_NAME = 'highlight';
+        var lang = $(this)
+          .attr('class')
+          .split(/\s/)
+          .filter(function (e) { return e !== CODEBLOCK_CLASS_NAME; });
+        var $codeHeader = $(
+          '<figcaption class="custom">' +
+            '<div class="custom-lang">' + lang + '</div>' +
+          '</figcaption>'
+        );
+
+        $codeHeader.insertBefore($(this).children().first());
+      }
+    });
+
+    var $copyIcon = $(
+      '<div class="copy-button" data-popover=' +
+        CONFIG.prompt.copy_button +
+        ' data-popover-pos="up">' +
+        '<i class="fa fa-clipboard"></i>' +
+      '</div>'
+    );
+
+    var COPY_BUTTON_CONTAINER =
+      'figure.highlight figcaption, .post-copyright';
+    // Add a copy button to the selected elements.
+    $(COPY_BUTTON_CONTAINER).append($copyIcon);
+  },
+  registerCopyEvent: function () {
+    $('.copy-button').on('click', function () {
+      var container = null;
+      // Select the container of code block.
+      var codeContainer =
+        $(this).parents('figure.highlight').find('td.code')[0];
+
+      if (codeContainer) {
+        container = codeContainer;
+      } else {
+        // Select the container of text.
+        container = $(this).parent()[0];
+      }
+
+      if (Stun.utils.copyText(container)) {
+        Stun.utils.popAlert('success', CONFIG.prompt.copy_success);
+      } else {
+        Stun.utils.popAlert('error', CONFIG.prompt.copy_error);
+      }
+    });
+  },
   /**
    * Wait for all images to load.
    * @param {String} selector jQuery selector.
@@ -388,21 +431,5 @@ Stun.utils = Stun.$u = {
       imgDefereds.push(dfd);
     });
     $.when.apply(null, imgDefereds).then(callback);
-  },
-  hasMobileUA: function () {
-    var nav = window.navigator;
-    var ua = nav.userAgent;
-    var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g;
-
-    return pa.test(ua);
-  },
-  isTablet: function () {
-    return window.screen.width > 767 && window.screen.width < 992 && this.hasMobileUA();
-  },
-  isMobile: function () {
-    return window.screen.width < 767 && this.hasMobileUA();
-  },
-  isDesktop: function () {
-    return !this.isTablet() && !this.isMobile();
   }
 };