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
jerryc127 · Jul 29, 2019 · 49a9995 · 49a9995
1 parent 6c59f72
commit 49a9995
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 64 deletions.
diff --git a/layout/archive.pug b/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
diff --git a/layout/includes/widget/card_categories.pug b/layout/includes/widget/card_categories.pug
@@ -1,22 +1,23 @@
-.card_widget.card-categories
-    .card-content
-      .item_headline
-        i.fa.fa-folder-open(aria-hidden="true")
-        span= _p('aside.card_categories')
-      ul.aside_category_item        
-        mixin displayCategories(parent = undefined) 
-          - site.categories.find({ parent }).sort("name").each(function(category) {
-              - var childCount = site.categories.find({ parent: category._id }).count();              
-              li.aside_category_list
-                a.aside_category_list_link(href=url_for(category.path))
-                  span.aside_category_list_name= category.name
-                  span.aside_category_list_length= category.length
-                
-              if childCount > 0
-                ul.aside_category_item.child
-                  +displayCategories(category._id)
-          - })
+if site.categories.length
+  .card_widget.card-categories
+      .card-content
+        .item_headline
+          i.fa.fa-folder-open(aria-hidden="true")
+          span= _p('aside.card_categories')
+        ul.aside_category_item        
+          mixin displayCategories(parent = undefined) 
+            - site.categories.find({ parent }).sort("name").each(function(category) {
+                - var childCount = site.categories.find({ parent: category._id }).count();              
+                li.aside_category_list
+                  a.aside_category_list_link(href=url_for(category.path))
+                    span.aside_category_list_name= category.name
+                    span.aside_category_list_length= category.length
+                  
+                if childCount > 0
+                  ul.aside_category_item.child
+                    +displayCategories(category._id)
+            - })
 
-        +displayCategories()
+          +displayCategories()
 
-
+  
diff --git a/layout/includes/widget/card_tags.pug b/layout/includes/widget/card_tags.pug
@@ -1,6 +1,7 @@
-.card_widget.card-tags
-  .card-content
-    .item_headline
-      i.fa.fa-tags(aria-hidden="true")
-      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'})
+if site.tags.length
+  .card_widget.card-tags
+    .card-content
+      .item_headline
+        i.fa.fa-tags(aria-hidden="true")
+        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'})
diff --git a/layout/index.pug b/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
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
@@ -350,4 +350,9 @@ table
 .fireworks
   position: fixed
   z-index: -1
-  pointer-events: none
+  pointer-events: none
+
+
+// 去掉加載黑框
+img[src=""],img:not([src])
+  opacity: 0
diff --git a/source/js/main.js b/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) => {
-    let startY
-    scrollEl.addEventListener('touchstart', function (event) {
-      // 如果多於1根手指點擊屏幕,則不處理
-      if (event.targetTouches.length > 1) {
-        return
-      }
-      // 儲存手指的初始位置
-      startY = event.targetTouches[0].clientY
-    }, false)
-    scrollEl.addEventListener('touchmove', function (event) {
-      if (event.targetTouches.length > 1) {
-        return
-      }
-      // 判斷手指滑動方向, y大於0時向下滑動, 小於0時向上滑動
-      const y = event.targetTouches[0].clientY - startY
-      // 如果到頂時繼續向下拉
-      if (scrollEl.scrollTop <= 0 && y > 0) {
-        // 重置滾動距離為最小值
-        scrollEl.scrollTop = 0
-        // 阻止滾動
-        event.preventDefault()
-      }
-      // 如果到底時繼續上滑  
-      const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight
-      if (maxScrollTop - scrollEl.scrollTop <= 0 && y < 0) {
-        scrollEl.scrollTop = maxScrollTop
-        event.preventDefault()
-      }
-    }, {
-      passive: false
-    })
+  function fixbg_menu() {
+    const fixScroll = (scrollEl) => {
+      let startY
+      scrollEl.addEventListener('touchstart', function (event) {
+        // 如果多於1根手指點擊屏幕,則不處理
+        if (event.targetTouches.length > 1) {
+          return
+        }
+        // 儲存手指的初始位置
+        startY = event.targetTouches[0].clientY
+      }, false)
+      scrollEl.addEventListener('touchmove', function (event) {
+        if (event.targetTouches.length > 1) {
+          return
+        }
+        // 判斷手指滑動方向, y大於0時向下滑動, 小於0時向上滑動
+        const y = event.targetTouches[0].clientY - startY
+        // 如果到頂時繼續向下拉
+        if (scrollEl.scrollTop <= 0 && y > 0) {
+          // 重置滾動距離為最小值
+          scrollEl.scrollTop = 0
+          // 阻止滾動
+          event.preventDefault()
+        }
+        // 如果到底時繼續上滑  
+        const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight
+        if (maxScrollTop - scrollEl.scrollTop <= 0 && y < 0) {
+          scrollEl.scrollTop = maxScrollTop
+          event.preventDefault()
+        }
+      }, {
+          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);
+        }
+    }
+
   }
 
   //代碼框雙擊全屏