1. Feature: the sidebar can auto scroll when the toc out of the screen

2. Fix: When the picture is loaded, the picture appears black frame

layout/archive.pug

@@ -8,4 +8,4 @@ block content
     +articleSort(page.posts)
     include includes/pagination.pug
   #aside_content.aside_content
-      include includes/aside.pug
+    include includes/aside.pug

layout/includes/widget/card_categories.pug

@@ -1,22 +1,23 @@
-.card_widget.card-categories
+if site.categories.length
-    .card-content
+  .card_widget.card-categories
-      .item_headline
+      .card-content
-        i.fa.fa-folder-open(aria-hidden="true")
+        .item_headline
-        span= _p('aside.card_categories')
+          i.fa.fa-folder-open(aria-hidden="true")
-      ul.aside_category_item        
+          span= _p('aside.card_categories')
-        mixin displayCategories(parent = undefined) 
+        ul.aside_category_item        
-          - site.categories.find({ parent }).sort("name").each(function(category) {
+          mixin displayCategories(parent = undefined) 
-              - var childCount = site.categories.find({ parent: category._id }).count();              
+            - site.categories.find({ parent }).sort("name").each(function(category) {
-              li.aside_category_list
+                - var childCount = site.categories.find({ parent: category._id }).count();              
-                a.aside_category_list_link(href=url_for(category.path))
+                li.aside_category_list
-                  span.aside_category_list_name= category.name
+                  a.aside_category_list_link(href=url_for(category.path))
-                  span.aside_category_list_length= category.length
+                    span.aside_category_list_name= category.name
+                    span.aside_category_list_length= category.length
                   
-              if childCount > 0
+                if childCount > 0
-                ul.aside_category_item.child
+                  ul.aside_category_item.child
-                  +displayCategories(category._id)
+                    +displayCategories(category._id)
-          - })
+            - })
 
-        +displayCategories()
+          +displayCategories()
 
   

layout/includes/widget/card_tags.pug

@@ -1,6 +1,7 @@
-.card_widget.card-tags
+if site.tags.length
-  .card-content
+  .card_widget.card-tags
-    .item_headline
+    .card-content
-      i.fa.fa-tags(aria-hidden="true")
+      .item_headline
-      span= _p('aside.card_tags')
+        i.fa.fa-tags(aria-hidden="true")
-    .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})
+        span= _p('aside.card_tags')
+      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})

layout/index.pug

@@ -5,4 +5,4 @@ block content
     include includes/recent-posts.pug  
     include includes/pagination.pug
   #aside_content.aside_content
-      include includes/aside.pug
+    include includes/aside.pug

source/css/_global/index.styl

@@ -351,3 +351,8 @@ table
   position: fixed
   z-index: -1
   pointer-events: none
+
+
+// 去掉加載黑框
+img[src=""],img:not([src])
+  opacity: 0

source/js/main.js

@@ -285,6 +285,7 @@ $(function () {
       $(".toggle-menu *").css({ 'background-color': '#3b3a3a', 'text-shadow': 'none' });
       $('body').addClass("is_hidden");
       $('.menus').addClass("menu_open");
+      fixbg_menu();
     } else {
       $(".toggle-menu").removeClass("close").addClass("open");
       $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' });
@@ -298,41 +299,44 @@ $(function () {
     }
   })
 
-  const fixScroll = (scrollEl) => {
+  function fixbg_menu() {
-    let startY
+    const fixScroll = (scrollEl) => {
-    scrollEl.addEventListener('touchstart', function (event) {
+      let startY
-      // 如果多於1根手指點擊屏幕,則不處理
+      scrollEl.addEventListener('touchstart', function (event) {
-      if (event.targetTouches.length > 1) {
+        // 如果多於1根手指點擊屏幕,則不處理
-        return
+        if (event.targetTouches.length > 1) {
-      }
+          return
-      // 儲存手指的初始位置
+        }
-      startY = event.targetTouches[0].clientY
+        // 儲存手指的初始位置
-    }, false)
+        startY = event.targetTouches[0].clientY
-    scrollEl.addEventListener('touchmove', function (event) {
+      }, false)
-      if (event.targetTouches.length > 1) {
+      scrollEl.addEventListener('touchmove', function (event) {
-        return
+        if (event.targetTouches.length > 1) {
-      }
+          return
-      // 判斷手指滑動方向, y大於0時向下滑動, 小於0時向上滑動
+        }
-      const y = event.targetTouches[0].clientY - startY
+        // 判斷手指滑動方向, y大於0時向下滑動, 小於0時向上滑動
-      // 如果到頂時繼續向下拉
+        const y = event.targetTouches[0].clientY - startY
-      if (scrollEl.scrollTop <= 0 && y > 0) {
+        // 如果到頂時繼續向下拉
-        // 重置滾動距離為最小值
+        if (scrollEl.scrollTop <= 0 && y > 0) {
-        scrollEl.scrollTop = 0
+          // 重置滾動距離為最小值
-        // 阻止滾動
+          scrollEl.scrollTop = 0
-        event.preventDefault()
+          // 阻止滾動
-      }
+          event.preventDefault()
-      // 如果到底時繼續上滑  
+        }
-      const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight
+        // 如果到底時繼續上滑  
-      if (maxScrollTop - scrollEl.scrollTop <= 0 && y < 0) {
+        const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight
-        scrollEl.scrollTop = maxScrollTop
+        if (maxScrollTop - scrollEl.scrollTop <= 0 && y < 0) {
-        event.preventDefault()
+          scrollEl.scrollTop = maxScrollTop
-      }
+          event.preventDefault()
-    }, {
+        }
-      passive: false
+      }, {
-    })
+          passive: false
+        })
+    }
+    const scrollEl = document.querySelector(".menus");
+    fixScroll(scrollEl)
   }
-  const scrollEl = document.querySelector(".menus");
+
-  fixScroll(scrollEl)
   
 
   $(window).on('resize', function (e) {
@@ -342,7 +346,7 @@ $(function () {
       $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' });
       $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' });
       $('body').removeClass("is_hidden");
-        $('.menus').removeClass("menu_open");
+      $('.menus').removeClass("menu_open");
     }     
     }
   })
@@ -515,6 +519,18 @@ $(function () {
         // Hide their respective list of subsections
         .find('.toc-child').hide()
     }
+
+    if ($('.toc-link').hasClass('active')){
+      var active_position = $(".active").offset().top;
+      var sidebar_scrolltop = $("#sidebar").scrollTop();
+      if (active_position > (top + $(window).height() - 50)) {             
+        $("#sidebar").scrollTop(sidebar_scrolltop + 100);
+      } else if (active_position < top + 50)
+      {
+        $("#sidebar").scrollTop(sidebar_scrolltop - 100);
+        }
+    }
+
   }
 
   //代碼框雙擊全屏