diff --git a/_config.yml b/_config.yml
index 7f9d3e3..da85bca 100644
--- a/_config.yml
+++ b/_config.yml
@@ -322,6 +322,10 @@ facebook_comments:
   order_by: social # social/time/reverse_time
   lang: en_US # Language en_US/zh_CN/zh_TW and so on
 
+# Twikoo
+# https://github.com/imaegoo/twikoo
+twikoo:
+
 # Chat Services
 # --------------------------------------
 
@@ -839,6 +843,7 @@ CDN:
   disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
   disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
   utterances: https://utteranc.es/client.js
+  twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js
 
   # share
   addtoany: https://static.addtoany.com/menu/page.js
diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug
index 1b62c05..8d912b7 100644
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -63,9 +63,9 @@ div
   
   if theme.aplayerInject && theme.aplayerInject.enable
     if theme.pjax.enable || theme.aplayerInject.per_page
-      include ./head/aplayer.pug
+      include ./third-party/aplayer.pug
     else if page.aplayer
-      include ./head/aplayer.pug
+      include ./third-party/aplayer.pug
 
   if theme.pjax.enable
     !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})
diff --git a/layout/includes/head/darkmode.pug b/layout/includes/head/darkmode.pug
index c80a902..058b80a 100644
--- a/layout/includes/head/darkmode.pug
+++ b/layout/includes/head/darkmode.pug
@@ -1,53 +1,65 @@
-if theme.darkmode.enable
-  script.
-    (function () {
-      window.activateDarkMode = function () {
-        document.documentElement.setAttribute('data-theme', 'dark')
-        if (document.querySelector('meta[name="theme-color"]') !== null) {
-          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
-        }
-      }
-      window.activateLightMode = function () {
-        document.documentElement.setAttribute('data-theme', 'light')
-        if (document.querySelector('meta[name="theme-color"]') !== null) {
-          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
-        }
-      }
+script
+  | (function () {
+    
+  if theme.darkmode.enable
+    |   window.activateDarkMode = function () {
+    |     document.documentElement.setAttribute('data-theme', 'dark')
+    |     if (document.querySelector('meta[name="theme-color"]') !== null) {
+    |       document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
+    |     }
+    |   }
+    |   window.activateLightMode = function () {
+    |     document.documentElement.setAttribute('data-theme', 'light')
+    |    if (document.querySelector('meta[name="theme-color"]') !== null) {
+    |       document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
+    |     }
+    |   }
 
-      const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
-      const t = saveToLocal.get('theme')
-      if (autoChangeMode === '1') {
-        const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-        const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
-        const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
-        const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+    |   const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
+    |   const t = saveToLocal.get('theme')
+    |   if (autoChangeMode === '1') {
+    |     const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+    |     const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+    |     const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
+    |     const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
 
-        if (t === undefined) {
-          if (isLightMode) activateLightMode()
-          else if (isDarkMode) activateDarkMode()
-          else if (isNotSpecified || hasNoSupport) {
-            const now = new Date()
-            const hour = now.getHours()
-            const isNight = hour <= 6 || hour >= 18
-            isNight ? activateDarkMode() : activateLightMode()
-          }
-          window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
-            if (saveToLocal.get('theme') === undefined) {
-              e.matches ? activateDarkMode() : activateLightMode()
-            }
-          })
-        } else if (t === 'light') activateLightMode()
-        else activateDarkMode()
-      } else if (autoChangeMode === '2') {
-        const now = new Date()
-        const hour = now.getHours()
-        const isNight = hour <= 6 || hour >= 18
-        if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
-        else if (t === 'light') activateLightMode()
-        else activateDarkMode()
-      } else {
-        if (t === 'dark') activateDarkMode()
-        else if (t === 'light') activateLightMode()
-      }
-    })()
+    |     if (t === undefined) {
+    |       if (isLightMode) activateLightMode()
+    |       else if (isDarkMode) activateDarkMode()
+    |       else if (isNotSpecified || hasNoSupport) {
+    |         const now = new Date()
+    |         const hour = now.getHours()
+    |         const isNight = hour <= 6 || hour >= 18
+    |         isNight ? activateDarkMode() : activateLightMode()
+    |       }
+    |       window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
+    |         if (saveToLocal.get('theme') === undefined) {
+    |           e.matches ? activateDarkMode() : activateLightMode()
+    |         }
+    |       })
+    |     } else if (t === 'light') activateLightMode()
+    |     else activateDarkMode()
+    |   } else if (autoChangeMode === '2') {
+    |     const now = new Date()
+    |     const hour = now.getHours()
+    |     const isNight = hour <= 6 || hour >= 18
+    |     if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
+    |     else if (t === 'light') activateLightMode()
+    |     else activateDarkMode()
+    |   } else {
+    |     if (t === 'dark') activateDarkMode()
+    |     else if (t === 'light') activateLightMode()
+    |   }
+
+  if theme.aside.enable && theme.aside.button
+    | const asideStatus = saveToLocal.get('aside-status')
+    | if (asideStatus !== undefined) {
+    |    if (asideStatus === 'hide') {
+    |      document.documentElement.classList.add('hide-aside')
+    |    } else {
+    |      document.documentElement.classList.remove('hide-aside')
+    |    }
+    | }
+
+  | })()
 
diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug
index 2762162..9a9e491 100644
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -8,14 +8,14 @@
     if theme.darkmode.enable && theme.darkmode.button
       button#darkmode(type="button" title=_p('rightside.night_mode_title'))
         i.fas.fa-adjust
+    if theme.aside.enable && theme.aside.button && page.aside !== false
+      button#hide-aside-btn(type="button")
+        i.fas.fa-arrows-alt-h
   #rightside-config-show
     if is_post()
       if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button))
         button#rightside_config(type="button" title=_p("rightside.setting"))
           i.fas.fa-cog
-      if commentsJsLoad
-        a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
-          i.fas.fa-comments
       if showToc && theme.aside.mobile
         button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
           i.fas.fa-list-ul
@@ -23,13 +23,11 @@
       button#rightside_config(type="button" title=_p("rightside.setting"))
         i.fas.fa-cog
 
-    if theme.aside.enable && theme.aside.button
-      button#hide-aside-btn(type="button")
-        i.fas.fa-arrows-alt-h
-
     if theme.chat_btn
       button#chat_btn(type="button" title=_p("rightside.chat_btn"))
         i.fas.fa-sms
-
+    if commentsJsLoad
+      a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
+        i.fas.fa-comments
     button#go-up(type="button" title=_p("rightside.back_to_top"))
       i.fas.fa-arrow-up
\ No newline at end of file
diff --git a/layout/includes/head/aplayer.pug b/layout/includes/third-party/aplayer.pug
similarity index 100%
rename from layout/includes/head/aplayer.pug
rename to layout/includes/third-party/aplayer.pug
diff --git a/layout/includes/third-party/comments/disqusjs.pug b/layout/includes/third-party/comments/disqusjs.pug
index 47e5c33..e2f3136 100644
--- a/layout/includes/third-party/comments/disqusjs.pug
+++ b/layout/includes/third-party/comments/disqusjs.pug
@@ -1,3 +1,4 @@
+- let disqusjsApi = theme.disqusjs.api || 'https://disqus.skk.moe/disqus/'
 script.
   function loadDisqusjs () {
     function addDisqusjsCSS () {
@@ -15,7 +16,7 @@ script.
         identifier: '!{ page.path }',
         url: '!{ page.permalink }',
         title: '!{ page.title }',
-        api: '!{theme.disqusjs.api}',
+        api: '!{disqusjsApi}',
         apikey: '!{theme.disqusjs.apikey}',
         nocomment: '!{theme.disqusjs.nocomment}',
         admin: '!{theme.disqusjs.admin}',
diff --git a/layout/includes/third-party/comments/index.pug b/layout/includes/third-party/comments/index.pug
index b8ae62f..9f8b4b6 100644
--- a/layout/includes/third-party/comments/index.pug
+++ b/layout/includes/third-party/comments/index.pug
@@ -7,11 +7,9 @@ hr
       span= ' ' + _p('comment')
     
     if theme.comments.use.length > 1
-      .comment-switch
+      #comment-switch
         span.first-comment=defaultComment
-        label
-          input#switch-comments-btn(type="checkbox")
-          span.slider
+        span.switch-btn
         span.second-comment=theme.comments.use[1]
 
 
@@ -31,6 +29,8 @@ hr
             #gitalk-container
           when 'Utterances'
             #utterances-wrap
+          when 'Twikoo'
+            #twikoo
           when 'Facebook Comments'
             .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
                         data-numposts= theme.facebook_comments.pageSize || 10
diff --git a/layout/includes/third-party/comments/js.pug b/layout/includes/third-party/comments/js.pug
index 23f9d71..07a6f12 100644
--- a/layout/includes/third-party/comments/js.pug
+++ b/layout/includes/third-party/comments/js.pug
@@ -12,5 +12,7 @@ each name in theme.comments.use
       include ./gitalk.pug
     when 'Utterances'
       !=partial('includes/third-party/comments/utterances', {}, {cache:theme.fragment_cache})
+    when 'Twikoo'
+      !=partial('includes/third-party/comments/twikoo', {}, {cache:theme.fragment_cache})
     when 'Facebook Comments'
       !=partial('includes/third-party/comments/facebook_comments', {}, {cache:theme.fragment_cache})
diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug
new file mode 100644
index 0000000..1e49ecd
--- /dev/null
+++ b/layout/includes/third-party/comments/twikoo.pug
@@ -0,0 +1,24 @@
+script.
+  function loadTwikoo () {
+    function init () {
+      twikoo.init({ 
+        envId: '!{theme.twikoo}' 
+      })
+    }
+
+    if (typeof twikoo.init === 'function') {
+      init()
+    } else {
+      $.getScript('!{theme.CDN.twikoo}', init)
+    }
+  }
+
+  if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo'), loadTwikoo)
+    else loadTwikoo()
+  } else {
+    function loadOtherComment () {
+      loadTwikoo()
+    }
+  }
+
diff --git a/package.json b/package.json
index ab533b9..37ab187 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.3.0-b6",
+  "version": "3.3.0-b7",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 9a70f7a..ae9692e 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -333,7 +333,7 @@
     .layout
       justify-content: center
 
-      > div:last-child
+      > .aside_content
         display: none
 
       > div:first-child
diff --git a/source/css/_layout/comments.styl b/source/css/_layout/comments.styl
index e00f66f..04d2fa7 100644
--- a/source/css/_layout/comments.styl
+++ b/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)
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
index 4cd72a5..59bf70c 100644
--- a/source/css/_mode/darkmode.styl
+++ b/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
diff --git a/source/js/main.js b/source/js/main.js
index 08ae542..5dda6ff 100644
--- a/source/js/main.js
+++ b/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')) {