perf: optimize UI and enhance user experience

layout/_partial/comments/comment.ejs

@@ -1,4 +1,5 @@
 <div class="comments-container">
+    <div id="comment-anchor"></div>
     <% if (theme.comments.valine.enable && theme.comments.gitalk.enable) { %>
         <%- partial('valine') %>
     <% } else if (theme.comments.valine.enable) { %>

layout/_partial/scripts.ejs

@@ -5,6 +5,10 @@
     'js/main.js'
 ]) %>
 
+<% if (theme.local_search.enable && config.search) { %>
+    <%- js('js/local-search.js') %>
+<% } %>
+
 <% if (theme.back2top.enable) { %>
     <%- js('js/back2top.js') %>
 <% } %>
@@ -21,4 +25,3 @@
         <%- js(['lib/anime.min.js', 'js/toc.js']) %>
     <% } %>
 <% } %>
-

layout/_partial/tools.ejs

@@ -1,26 +1,23 @@
 <div class="tools-container">
     <ul class="tools-list">
-        <% if (theme.local_search.enable) { %>
+        <% if (theme.local_search.enable && config.search) { %>
             <li class="search popup-trigger">
                 <i class="fa fa-search"></i>
             </li>
-            <%- js('js/local-search.js') %>
         <% } %>
-        <li class="mode-toggle">
+
-            <i class="fa fa-moon-o"></i>
+        <% if (is_post()) { %>
-        </li>
+            <li class="go-comment">
-        <% if (theme.local_search.enable && config.feed) { %>
+                <i class="fa fa-comment"></i>
-            <li class="rss">
-                <a href="<%= '/' + config.feed.path %>" target="_blank"><i class="fa fa-rss"></i></a>
             </li>
         <% } %>
-        <li class="page-aside-toggle">
+
-            <i class="fa fa-bars"></i>
+        <!-- TOC aside toggle -->
-        </li>
+        <% if (theme.toc.enable && is_post()) { %>
-        <% if (theme.back2top.enable) { %>
+            <li class="tools-item page-aside-toggle">
-            <li class="scroll-to-top">
+                <i class="fa fa-outdent"></i>
-                <i class="fa fa-caret-up"></i>
             </li>
         <% } %>
+
     </ul>
 </div>

layout/_partial/tools2.ejs

@@ -0,0 +1,32 @@
+<div class="tools2-container">
+
+    <button class="tools-button">
+        <i class="fa fa-plus"></i>
+    </button>
+
+    <ul class="tools-wrapper">
+        <!-- back2top -->
+        <% if (theme.back2top.enable) { %>
+            <li class="tools-item scroll-to-bottom">
+                <i class="fa fa-arrow-down"></i>
+            </li>
+            <li class="tools-item scroll-to-top">
+                <i class="fa fa-arrow-up"></i>
+            </li>
+        <% } %>
+
+        <!-- mode toggle -->
+        <li class="tools-item mode-toggle">
+            <i class="fa fa-moon-o"></i>
+        </li>
+
+        <!-- rss -->
+        <% if (theme.rss.enable && config.feed) { %>
+            <li class="tools-item rss">
+                <a href="<%= '/' + config.feed.path %>" target="_blank"><i class="fa fa-rss"></i></a>
+            </li>
+        <% } %>
+
+
+    </ul>
+</div>

layout/page.ejs

@@ -59,6 +59,11 @@
         <%- partial('_partial/tools') %>
     </div>
 
+    <div class="sidebar-tools-2">
+        <%- partial('_partial/tools2') %>
+    </div>
+
+
     <!-- page aside -->
     <aside class="page-aside">
         <% if (is_post()) { %>

source/css/layout/_partial/comments/comment.styl

@@ -0,0 +1,14 @@
+if (hexo-config('comments.valine.enable')) {
+  @require "./valine.styl";
+}
+
+if (hexo-config('comments.gitalk.enable')) {
+  @require "./gitalk.styl";
+}
+
+.comments-container {
+  #comment-anchor {
+    width: 100%;
+    height: 20px;
+  }
+}

source/css/layout/_partial/tools.styl

@@ -1,6 +1,5 @@
 @require "../common/variables.styl";
 @require "../common/magic-theme.styl";
-@require "../common/magic-theme.styl";
 
 $li-border-radius = 5px;
 $li-margin-bottom = 12px;
@@ -10,9 +9,9 @@ $li-margin-bottom = 12px;
   .tools-list {
     li {
       cursor: pointer;
-      width: $tool-button-width;
+      width: $circle-button-width;
-      height: $tool-button-width;
+      height: $circle-button-width;
-      border-radius: $li-border-radius;
+      border-radius: 50%;
       font-size: 1.2em;
       display: flex;
       align-items: center;
@@ -36,32 +35,6 @@ $li-margin-bottom = 12px;
         background: var(--primary-color);
       }
 
-      &.rss {
-
-        a {
-          border-radius: $li-border-radius;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 100%;
-          height: 100%;
-
-          &:hover {
-            transition();
-            color: var(--background-color);
-            background: var(--primary-color);
-          }
-        }
-      }
-
-
-      &.scroll-to-top {
-        display: none;
-        position: fixed;
-        right: $component-interspace;
-        bottom: $component-interspace;
-      }
-
       &.page-aside-toggle {
         display: none;
 
@@ -69,8 +42,8 @@ $li-margin-bottom = 12px;
           display: none !important;
         }
       }
-
     }
   }
 
+
 }

source/css/layout/_partial/tools2.styl

@@ -0,0 +1,99 @@
+@require "../common/variables.styl";
+@require "../common/magic-theme.styl";
+
+$li-border-radius = 5px;
+$li-margin-bottom = 12px;
+
+.tools2-container {
+
+  .tools-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $circle-button-width;
+    height: $circle-button-width;
+    border-radius: 50%;
+    font-size: 1.2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--background-color);
+    color: var(--second-text-color);
+    z-index: 9999;
+
+    if (hexo-config('magic.enable') == true) {
+      magic-style(1.1, 1.1);
+    } else {
+      border: 1px solid var(--border-color);
+    }
+
+    &:hover {
+      transition();
+      color: var(--background-color);
+      background: var(--primary-color);
+    }
+  }
+
+
+  .tools-wrapper {
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .tools-item {
+
+      position: absolute;
+      top: 0;
+      left: ($circle-button-width - $tools-button-width) / 2;
+      cursor: pointer;
+      width: $tools-button-width;
+      height: $tools-button-width;
+      border-radius: $li-border-radius;
+      font-size: 1.2em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--background-color);
+      opacity: 0;
+
+      &.hide {
+        opacity: 0;
+        transform: translate3d(0, 0, 0);
+      }
+
+      if (hexo-config('magic.enable') == true) {
+        magic-style(1.1, 1.1);
+      } else {
+        border: 1px solid var(--border-color);
+      }
+
+      &:hover {
+        transition();
+        color: var(--background-color);
+        background: var(--primary-color);
+      }
+
+      &.rss {
+
+        a {
+          border-radius: $li-border-radius;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+
+          &:hover {
+            transition();
+            color: var(--background-color);
+            background: var(--primary-color);
+          }
+        }
+      }
+    }
+
+
+  }
+
+}

source/css/layout/common/variables.styl

@@ -1,10 +1,10 @@
-// ===================================
+// ========================================================================
 //                              THEME VARIABLE                           //
-// ===================================
+// ========================================================================
 
-// ===================================
+// ========================================================================
 // layout
-// ===================================
+// ========================================================================
 if (hexo-config('magic.enable')) {
   $header-height = 72px;        // magic 风格：头部默认高度
 } else {
@@ -16,12 +16,13 @@ $main-content-width-tablet = 80%;   // 中间内容区域宽度（平板）
 $main-content-width-mobile = 88%;   // 中间内容区域宽度（手机）
 
 $header-shrink-height = 56px;       // 头部收缩高度
-$tool-button-width = 36px;       // tools 方形工具按钮宽度
+$circle-button-width = 40px;        // tools 圆形工具按钮宽度
-$component-interspace = 30px;    // 组件/模块的间隔值（px）
+$tools-button-width = 32px;         // tools 方形工具按钮宽度
+$component-interspace = 40px;       // 组件/模块的间隔值（px）
 
-// ===================================
+// ========================================================================
 // 媒体查询
-// ===================================
+// ========================================================================
 $media-max-width = 760px;         // 媒体查询最大宽度 (平板)
 $media-max-width-mobile = 480px;  // 媒体查询最大宽度（手机）
 
@@ -34,9 +35,9 @@ ils-mobile()
     {block}
 
 
-// ===================================
+// ========================================================================
 // z-index
-// ===================================
+// ========================================================================
 $z-index-1 = 1001;
 $z-index-2 = 1002;
 $z-index-3 = 1003;
@@ -45,11 +46,12 @@ $z-index-5 = 1005;
 $z-index-6 = 1006;
 $z-index-7 = 1007;
 $z-index-8 = 1008;
+$z-index-9 = 1009;
 
 
-// ===================================
+// ========================================================================
 // color
-// ===================================
+// ========================================================================
 // normal mode color
 $primary-color = convert(hexo-config("style.primary_color")) || #0066CC;
 $background-color = #fff;                                   // normal 风格 背景颜色
@@ -75,9 +77,9 @@ $dark-border-color = lighten($dark-background-color, 20%);
 $dark-selection-color = $selection-color;
 
 
-// ===================================
+// ========================================================================
 // font
-// ===================================
+// ========================================================================
 // 'PingHei', 'PingFang SC', 'Microsoft YaHei';
 // 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
 // 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
@@ -89,9 +91,9 @@ $default-font-line-height = 20px;
 $default-font-weight = 400;
 
 
-// ===================================
+// ========================================================================
 //  light/dark color
-// ===================================
+// ========================================================================
 :root {
   --background-color: $background-color;
   --magic-background-color: $magic-background-color;

source/css/layout/page.styl

@@ -158,6 +158,27 @@ $page-aside-width = 258px;
   }
 
 
+  .sidebar-tools-2 {
+    position: fixed;
+    bottom: $component-interspace;
+    right: $component-interspace;
+    width: $circle-button-width;
+    height: $circle-button-width;
+
+    +ils-tablet() {
+      right: 10px;
+      transform: scale(0.82);
+      transform-origin: right bottom;
+
+    }
+
+    +ils-mobile() {
+      right: 5px;
+      transform: scale(0.72);
+      transform-origin: right bottom;
+    }
+  }
+
   .sidebar-tools-shrink {
     transition();
     top: $header-shrink-height + $component-interspace;

source/css/style.styl

@@ -4,10 +4,10 @@
 @import "layout/page.styl"
 @import "layout/_partial/local-search.styl"
 @import "layout/_partial/toc.styl"
-@import "layout/_partial/comments/valine.styl"
+@import "layout/_partial/comments/comment.styl"
-@import "layout/_partial/comments/gitalk.styl"
 @import "layout/_partial/header.styl"
 @import "layout/_partial/tools.styl"
+@import "layout/_partial/tools2.styl"
 @import "layout/_partial/archive-list.styl"
 @import "layout/_partial/footer.styl"
 @import "layout/_partial/paginator.styl"

source/js/back2top.js

@@ -4,6 +4,7 @@ window.addEventListener('DOMContentLoaded', () => {
     ...ILS.utils,
 
     back2TopButton_dom: document.querySelector('.scroll-to-top'),
+    back2BottomButton_dom: document.querySelector('.scroll-to-bottom'),
 
     back2top() {
       const scrollTopTimer = setInterval(function () {
@@ -20,6 +21,19 @@ window.addEventListener('DOMContentLoaded', () => {
       }, 30);
     },
 
+    back2Bottom() {
+      let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
+      const scrollBottomTimer = setInterval(function () {
+        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+        if (!scrollTop) scrollTop = 10;
+        scrollTop = scrollTop + scrollTop / 2;
+        window.scrollTo(0, scrollTop);
+        if (scrollTop >= scrollHeight) {
+          clearInterval(scrollBottomTimer);
+        }
+      }, 50);
+    },
+
     initBack2TopButton() {
       if (ILS.utils.back2TopButton_dom) {
         ILS.utils.back2TopButton_dom.addEventListener('click', () => {
@@ -27,9 +41,18 @@ window.addEventListener('DOMContentLoaded', () => {
         });
       }
     },
+
+    initBack2BottomButton() {
+      if (ILS.utils.back2BottomButton_dom) {
+        ILS.utils.back2BottomButton_dom.addEventListener('click', () => {
+          this.back2Bottom();
+        });
+      }
+    },
   }
 
   ILS.utils.initBack2TopButton();
+  ILS.utils.initBack2BottomButton();
 });
 
 

source/js/left-side-toggle.js

@@ -14,8 +14,16 @@ window.addEventListener('DOMContentLoaded', () => {
 
     initToggleBarButton() {
       if (this.toggleBar) {
+        const toggleBarIcon = this.toggleBar.querySelector('i');
         this.toggleBar.addEventListener('click', () => {
           this.isOpenPageAside = !this.isOpenPageAside;
+          if (this.isOpenPageAside) {
+            toggleBarIcon.classList.add('fa-outdent');
+            toggleBarIcon.classList.remove('fa-indent');
+          } else {
+            toggleBarIcon.classList.add('fa-indent');
+            toggleBarIcon.classList.remove('fa-outdent');
+          }
           this.changePageLayoutWhenOpenToggle(this.isOpenPageAside);
         })
       }

source/js/main.js

@@ -3,6 +3,11 @@ window.addEventListener('DOMContentLoaded', () => {
   ILS.utils.printThemeInfo();
 
   // init scroll
-  ILS.utils.initWindowScroll();
+  ILS.utils.registerWindowScroll();
 
+  // init tools button
+  ILS.utils.registerToolsButtonClick();
+
+  // comment
+  ILS.utils.goComment();
 });

source/js/utils.js

@@ -20,10 +20,6 @@ ILS.utils = {
     const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
     const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
 
-    if (CONFIG.back2top.enable && ILS.utils.back2TopButton_dom) {
-      ILS.utils.back2TopButton_dom.style.display = percent === '0' ? 'none' : 'flex';
-    }
-
     if (ILS.utils.headerProgress_dom) {
       ILS.utils.headerProgress_dom.style.display = percent === '0' ? 'none' : 'block';
       ILS.utils.headerProgress_dom.style.width = `${ProgressPercent}%`;
@@ -39,8 +35,8 @@ ILS.utils = {
     ILS.utils.prevScrollValue = scrollTop;
   },
 
-  // 初始 window scroll 事件
+  // register window scroll event
-  initWindowScroll() {
+  registerWindowScroll() {
     window.addEventListener('scroll', function (_e) {
       // style handle when scroll
       ILS.utils.styleHandleWhenScroll();
@@ -54,6 +50,66 @@ ILS.utils = {
       ILS.utils.headerShrink.headerShrink();
     });
   },
+
+  // tools
+  registerToolsButtonClick() {
+
+    let isOpen = false
+    this.toolsMenuButton_dom = document.querySelector('.tools-button');
+    this.toolsWrapperList_dom = document.querySelectorAll('.tools-wrapper li');
+
+    this.toolsMenuButton_dom.addEventListener('click', e => {
+      isOpen = !isOpen;
+
+      const toolsMenuButtonIcon = this.toolsMenuButton_dom.querySelector('i');
+      if (isOpen) {
+        toolsMenuButtonIcon.classList.add('fa-minus');
+        toolsMenuButtonIcon.classList.remove('fa-plus');
+      } else {
+        toolsMenuButtonIcon.classList.add('fa-plus');
+        toolsMenuButtonIcon.classList.remove('fa-minus');
+      }
+      this.toolsWrapperList_dom.forEach((li, index) => {
+
+        if (isOpen) {
+          li.style.transform = `translate3d(0, -${138 * (index + 1)}%, 0)`;
+          li.style.opacity = '1';
+        } else {
+          li.style.opacity = '0';
+          li.style.transform = 'translate3d(0, 0, 0)';
+        }
+
+      });
+    });
+  },
+
+  // calculate transform value
+  calculateTransformValue(index) {
+    const x = 3;
+    const y = Math.floor(index / x) + 1;
+    const z = index % x + 1;
+
+    switch (z) {
+      case 1:
+        return `0, -${150 * y}%, 0`;
+      case 2:
+        return `-${150 * y}%, -${150 * y}%, 0`;
+      case 3:
+        return `-${150 * y}%, 0, 0`;
+    }
+  },
+
+  // go comment
+  goComment() {
+    this.goComment_dom = document.querySelector('.go-comment');
+    if (this.goComment_dom) {
+      this.goComment_dom.addEventListener('click', () => {
+        document.querySelector('#comment-anchor').scrollIntoView();
+      });
+    }
+
+  },
+
 }