feat: 增加Twikoo評論 #402

improvement: 滾動到評論按鈕只要用評論的頁面就出現
improvement: aside狀態存localstore
fix: 修復disqusjs沒有設置api時，沒有反代的bugs
fix: 修復aside在font-matter aside為false時，收縮按鈕依舊出現和點擊按鈕會出現空白的bugs #398

source/css/_layout/aside.styl

@@ -333,7 +333,7 @@
     .layout
       justify-content: center
 
-      > div:last-child
+      > .aside_content
         display: none
 
       > div:first-child

source/css/_layout/comments.styl

@@ -8,7 +8,7 @@
       font-weight: 700
       font-size: 1.43em
 
-    .comment-switch
+    #comment-switch
       display: inline-block
 
       if hexo-config('comments.text')
@@ -30,46 +30,34 @@
       .second-comment
         color: $comments-switch-second-text
 
-      label
+      .switch-btn
         position: relative
         display: inline-block
         margin: -4px .4rem 0
         width: 42px
         height: 22px
+        border-radius: 34px
+        background-color: $comments-switch-first-text
         vertical-align: middle
+        cursor: pointer
+        transition: .4s
 
-        input#switch-comments-btn
-          width: 0
-          height: 0
-          opacity: 0
-
-          &:checked + .slider
-            background-color: $comments-switch-second-text
-
-          &:checked + .slider:before
-            transform: translateX(20px)
-
-        .slider
+        &:before
           position: absolute
-          top: 0
-          right: 0
-          bottom: 0
-          left: 0
-          border-radius: 34px
-          background-color: $comments-switch-first-text
-          cursor: pointer
+          bottom: 4px
+          left: 4px
+          width: 14px
+          height: 14px
+          border-radius: 50%
+          background-color: $comments-switch-round
+          content: ''
           transition: .4s
 
+        &.move
+          background-color: $comments-switch-second-text
+
           &:before
-            position: absolute
-            bottom: 4px
-            left: 4px
-            width: 14px
-            height: 14px
-            border-radius: 50%
-            background-color: $comments-switch-round
-            content: ''
-            transition: .4s
+            transform: translateX(20px)
 
   .comment-wrap
     > div:nth-child(2)

source/css/_mode/darkmode.styl

@@ -86,11 +86,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
           color: #90a4ae !important
 
     #post-comment
-      .comment-switch
+      #comment-switch
         if hexo-config('comments.text')
           background: #2c2c2c !important
 
-        label
+        .switch-btn
           filter: brightness(.8)
 
     // note

source/js/main.js

@@ -485,7 +485,13 @@ $(function () {
 
   $rightsideEle.on('click', '#hide-aside-btn', () => {
     const $htmlDom = $(document.documentElement)
-    $htmlDom.hasClass('hide-aside') ? $htmlDom.removeClass('hide-aside') : $htmlDom.addClass('hide-aside')
+    if ($htmlDom.hasClass('hide-aside')) {
+      $htmlDom.removeClass('hide-aside')
+      saveToLocal.set('aside-status', 'show', 2)
+    } else {
+      $htmlDom.addClass('hide-aside')
+      saveToLocal.set('aside-status', 'hide', 2)
+    }
   })
 
   /**
@@ -624,7 +630,9 @@ $(function () {
 
   const switchComments = function () {
     let switchDone = false
-    $('#switch-comments-btn').on('click', function () {
+    $('#comment-switch > .switch-btn').on('click', function () {
+      const $btn = $(this)
+      $btn.hasClass('move') ? $btn.removeClass('move') : $btn.addClass('move')
       $('#post-comment > .comment-wrap > div').each(function (i, o) {
         const $this = $(o)
         if ($this.is(':visible')) {