From b078ebef147d032da6498a7c45cefc0eeafd8a3e Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Wed, 7 Oct 2020 15:36:52 +0800
Subject: [PATCH 01/11] =?UTF-8?q?fix:=20=E4=BF=AE=E5=BE=A9=E7=B6=B2?=
 =?UTF-8?q?=E7=AB=99=E5=A3=93=E7=B8=AE=E5=BE=8C=EF=BC=8Cmermaid=20?=
 =?UTF-8?q?=E6=9C=83=E7=84=A1=E6=B3=95=E7=94=9F=E6=88=90=E9=A1=AF=E7=A4=BA?=
 =?UTF-8?q?=E7=9A=84Bugs=20feat=EF=BC=9A=20Valine=20=E5=A2=9E=E5=8A=A0=20o?=
 =?UTF-8?q?ption=20=E8=A8=AD=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                                     |  1 +
 layout/includes/third-party/comments/valine.pug | 10 ++++++++--
 layout/includes/third-party/math/mathjax.pug    |  2 +-
 package.json                                    |  2 +-
 scripts/helpers/related_post.js                 |  2 +-
 scripts/tags/mermaid.js                         |  4 +++-
 source/css/_mode/darkmode.styl                  |  6 ++++--
 7 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/_config.yml b/_config.yml
index 3f92437..5cd10a1 100644
--- a/_config.yml
+++ b/_config.yml
@@ -317,6 +317,7 @@ valine:
   emojiCDN: # emoji CDN
   enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
   requiredFields: nick,mail # required fields (nick/mail)
+  option:
 
 # utterances
 # https://utteranc.es/
diff --git a/layout/includes/third-party/comments/valine.pug b/layout/includes/third-party/comments/valine.pug
index ac7e3d1..6e09a81 100644
--- a/layout/includes/third-party/comments/valine.pug
+++ b/layout/includes/third-party/comments/valine.pug
@@ -1,3 +1,4 @@
+- let option = theme.valine.option ? JSON.stringify(theme.valine.option) : false
 - let emojiMaps = '""'
 if site.data.valine
   - emojiMaps = JSON.stringify(site.data.valine)
@@ -5,7 +6,7 @@ if site.data.valine
 script.
   function loadValine () {
     function initValine () {
-      const initData = {
+      let initData = {
         el: '#vcomment',
         appId: '#{theme.valine.appId}',
         appKey: '#{theme.valine.appKey}',
@@ -25,7 +26,12 @@ script.
       if (!{Boolean(theme.valine.requiredFields)}) { 
         initData.requiredFields= ('!{theme.valine.requiredFields}'.split(','))
       }
-
+      
+      if (!{Boolean(option)}) {
+        const otherData = !{option}
+        initData = Object.assign({}, initData, otherData)
+      }
+      
       const valine = new Valine(initData)
     }
 
diff --git a/layout/includes/third-party/math/mathjax.pug b/layout/includes/third-party/math/mathjax.pug
index d28b3b8..c87965f 100644
--- a/layout/includes/third-party/math/mathjax.pug
+++ b/layout/includes/third-party/math/mathjax.pug
@@ -41,7 +41,7 @@ script.
       }
     }
     
-    var script = document.createElement('script')
+    const script = document.createElement('script')
     script.src = '!{theme.CDN.mathjax}'
     script.id = 'MathJax-script'
     script.async = true
diff --git a/package.json b/package.json
index ad087f2..2dfee5e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.2.0",
+  "version": "3.3.0-b1",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/scripts/helpers/related_post.js b/scripts/helpers/related_post.js
index 5691e79..ee06e06 100644
--- a/scripts/helpers/related_post.js
+++ b/scripts/helpers/related_post.js
@@ -71,7 +71,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
         lazySrc +
         '="' +
         this.url_for(cover) +
-        '">'
+        '" alt="cover">'
       if (dateType === 'created') {
         result +=
           '<div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i>' +
diff --git a/scripts/tags/mermaid.js b/scripts/tags/mermaid.js
index f1a85d4..d8f8b15 100644
--- a/scripts/tags/mermaid.js
+++ b/scripts/tags/mermaid.js
@@ -6,8 +6,10 @@
 
 'use strict'
 
+const { escapeHTML } = require('hexo-util')
+
 function mermaid (args, content) {
-  return `<div class="mermaid">${content}</div>`
+  return `<div class="mermaid">${escapeHTML(content)}</div>`
 }
 
 hexo.extend.tag.register('mermaid', mermaid, { ends: true })
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
index fc38a7b..bc34b0a 100644
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -48,6 +48,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
         code
           background: $code-background
 
+      .aplayer
+        filter: brightness(.8)
+
     // 頭部
     #page-header
       & > #nav.fixed,
@@ -103,8 +106,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     .error-img,
     #article-container iframe,
     img,
-    .gist,
-    .aplayer
+    .gist
       filter: brightness(.8)
 
     #aside_content .aside-list > .aside-list-item:not(:last-child)

From 83b72328414f46bc662b58ac72be62667e2e2fbc Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Sun, 11 Oct 2020 18:25:58 +0800
Subject: [PATCH 02/11] =?UTF-8?q?feat:=20=E5=8F=AA=E6=94=AF=E6=8C=81=20hex?=
 =?UTF-8?q?o=205.0.0=20=E5=8F=8A=E4=BB=A5=E4=B8=8A=E7=89=88=E6=9C=AC=20fea?=
 =?UTF-8?q?t:=20toc=E6=94=B9=E7=82=BAaside=E9=A1=AF=E7=A4=BA,=E5=8E=BB?=
 =?UTF-8?q?=E6=8E=89sidebar=20feat:=20=E6=89=8B=E6=A9=9Ftoc=20ui=20?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=20feat:=20=E5=8E=BB=E6=8E=89=20toc=20auto=5F?=
 =?UTF-8?q?open=20=E9=85=8D=E7=BD=AE=20feat:=20=E6=96=87=E7=AB=A0=E6=A8=99?=
 =?UTF-8?q?=E9=A1=8C=E6=94=B9=E7=82=BA=E5=B1=85=E4=B8=AD=20improvement:=20?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84note=E6=A8=99=E7=B1=A4=E5=9C=A8readmode?=
 =?UTF-8?q?=E4=B8=8A=E7=9A=84=E9=A1=AF=E7=A4=BA=20improvement:=20=E7=B2=BE?=
 =?UTF-8?q?=E7=B0=A1css=20=E5=92=8C=20js=20improvement=EF=BC=9A=20pjax=20?=
 =?UTF-8?q?=E5=84=AA=E5=8C=96=20fix:=20=E4=BF=AE=E5=BE=A9=E7=95=B6?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=A0=81top=5Fimg=E8=A8=AD=E7=82=BAfalse?=
 =?UTF-8?q?=E6=99=82=EF=BC=8C=E9=96=B2=E8=AE=80=E6=A8=A1=E5=BC=8F=E4=B8=8B?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E5=85=A7=E5=AE=B9=E4=B8=8D=E9=A1=AF=E7=A4=BA?=
 =?UTF-8?q?=E7=9A=84bugs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                              |   1 -
 languages/default.yml                    |   5 +-
 languages/en.yml                         |   5 +-
 languages/zh-CN.yml                      |   5 +-
 languages/zh-TW.yml                      |   5 +-
 layout/includes/head/config.pug          |   1 -
 layout/includes/head/config_site.pug     |   4 +-
 layout/includes/layout.pug               |  30 ++--
 layout/includes/rightside.pug            |   2 +-
 layout/includes/sidebar.pug              |  21 ---
 layout/includes/widget/card_post_toc.pug |  13 ++
 layout/includes/widget/index.pug         |  42 +++--
 layout/post.pug                          |   4 +-
 package.json                             |   2 +-
 scripts/events/check_hexo.js             |   6 +-
 scripts/helpers/page.js                  |   4 -
 source/css/_global/function.styl         |  34 ----
 source/css/_global/index.styl            |  15 ++
 source/css/_layout/aside.styl            | 105 +++++++++---
 source/css/_layout/head.styl             |  10 +-
 source/css/_layout/pagination.styl       |  10 +-
 source/css/_layout/post.styl             |  96 +++--------
 source/css/_layout/sidebar.styl          |  88 ----------
 source/css/_layout/third-party.styl      |   7 +
 source/css/_mode/darkmode.styl           |   1 +
 source/css/_mode/readmode.styl           |  34 ++--
 source/css/_page/common.styl             |  40 ++---
 source/css/var.styl                      |   2 +
 source/js/main.js                        | 201 ++++++-----------------
 source/js/search/algolia.js              |   2 +-
 source/js/search/local-search.js         |   2 +-
 31 files changed, 291 insertions(+), 506 deletions(-)
 delete mode 100644 layout/includes/sidebar.pug
 create mode 100644 layout/includes/widget/card_post_toc.pug
 delete mode 100644 source/css/_layout/sidebar.styl

diff --git a/_config.yml b/_config.yml
index 5cd10a1..4bb3fd3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -188,7 +188,6 @@ index_post_content:
 toc:
   enable: true
   number: true
-  auto_open: true # auto open the sidebar
 
 post_copyright:
   enable: true
diff --git a/languages/default.yml b/languages/default.yml
index b8ba13a..aeb6406 100644
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -1,7 +1,3 @@
-sidebar:
-  catalog: Catalog
-  have_read: You've read
-
 footer:
   framework: Framework
   theme: Theme
@@ -78,6 +74,7 @@ aside:
     heading: Newest Comments
     loading_text: loading...
     error: Unable to get the data, please make sure the settings are correct.
+  card_toc: Catalog
 
 date_suffix:
   just: Just
diff --git a/languages/en.yml b/languages/en.yml
index b8ba13a..aeb6406 100644
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -1,7 +1,3 @@
-sidebar:
-  catalog: Catalog
-  have_read: You've read
-
 footer:
   framework: Framework
   theme: Theme
@@ -78,6 +74,7 @@ aside:
     heading: Newest Comments
     loading_text: loading...
     error: Unable to get the data, please make sure the settings are correct.
+  card_toc: Catalog
 
 date_suffix:
   just: Just
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 9ea8cd1..f17a563 100644
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -1,7 +1,3 @@
-sidebar:
-  catalog: 目录
-  have_read: 你已经读了
-
 footer:
   framework: 框架
   theme: 主题
@@ -80,6 +76,7 @@ aside:
     heading: 最新评论
     loading_text: 正在加载中...
     error: 无法获取资料，请确认相关配置是否正确
+  card_toc: 目录
 
 date_suffix:
   just: 刚刚
diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
index b7b0124..cb254c9 100644
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -1,7 +1,3 @@
-sidebar:
-  catalog: 目錄
-  have_read: 你已經讀了
-
 footer:
   framework: 框架
   theme: 主題
@@ -80,6 +76,7 @@ aside:
     heading: 最新評論
     loading_text: 正在加載中...
     error: 無法獲取資料，請確認相關配置是否正確
+  card_toc: 目錄
 
 date_suffix:
   just: 剛剛
diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
index cfb04ba..99e3001 100644
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -93,7 +93,6 @@
 script.
   var GLOBAL_CONFIG = { 
     root: '!{config.root}',
-    hexoversion: '!{get_hexo_version()}',
     algolia: !{algolia},
     localSearch: !{localSearch},
     translate: !{translate},
diff --git a/layout/includes/head/config_site.pug b/layout/includes/head/config_site.pug
index c896b48..19eb732 100644
--- a/layout/includes/head/config_site.pug
+++ b/layout/includes/head/config_site.pug
@@ -5,7 +5,7 @@
   else isHighlightShrink = theme.highlight_shrink
 
   const pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable
-  const showToc = is_post() && pageToc && (toc(page.content) !== '' || page.encrypt == true )
+  const showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true )
 -
 
 script#config_change
@@ -14,6 +14,6 @@ script#config_change
       isPost: !{is_post()},
       isHome: !{is_home()},
       isHighlightShrink: !{isHighlightShrink},
-      isSidebar: !{showToc},
+      isToc: !{showToc},
       postUpdate: '!{full_date(page.updated)}'
     }
diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug
index 5787521..e40fa05 100644
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -8,30 +8,22 @@ html(lang=config.language data-theme=theme.display_mode)
     if theme.preloader
       !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
 
+    if theme.background
+      #web_bg
+      
     !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})
 
     #body-wrap
-      if theme.background
-        #web_bg
-
-      include ./sidebar.pug
       include ./header/index.pug
 
-      if (!is_post())
-        main#content-inner.layout_page(class=hideAside)
-          if body
-            div!= body
-          else
-            block content
-            if theme.aside.enable && page.aside !== false
-              !=partial('includes/widget/index', {}, {cache:theme.fragment_cache})
-      else
-        main#content-inner.layout_post
-          if body
-            div!= body
-          else
-            block content
-      
+      main#content-inner.layout(class=hideAside)
+        if body
+          div!= body
+        else
+          block content
+          if theme.aside.enable && page.aside !== false
+            include widget/index.pug
+
       - var footerBg = theme.footer_bg
       if (footerBg)
         if (footerBg === true)
diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug
index f37a815..323a22a 100644
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -16,7 +16,7 @@ section#rightside
       if commentsJsLoad
         a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
           i.fas.fa-comments
-      if showToc
+      if showToc && theme.aside.mobile
         button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
           i.fas.fa-list-ul
     else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button)
diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug
deleted file mode 100644
index ed56729..0000000
--- a/layout/includes/sidebar.pug
+++ /dev/null
@@ -1,21 +0,0 @@
--
-  let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
-  let autoOpenPostSet = page.auto_open == undefined ? theme.toc.auto_open : page.auto_open
-  let autoOpenSidebar = autoOpenPostSet ? 'on' : ''
--
-
-if(showToc)
-  #sidebar
-    i.fas.fa-arrow-right#toggle-sidebar(class=autoOpenSidebar)
-    .sidebar-toc
-      div.sidebar-toc__title= _p('sidebar.catalog')
-      div.sidebar-toc__progress
-        span.progress-notice= _p('sidebar.have_read')
-        span.progress-num 0
-        span.progress-percentage %
-        div.sidebar-toc__progress-bar      
-      if (page.encrypt == true)
-        div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
-      else 
-        div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber})
-        
\ No newline at end of file
diff --git a/layout/includes/widget/card_post_toc.pug b/layout/includes/widget/card_post_toc.pug
new file mode 100644
index 0000000..065a457
--- /dev/null
+++ b/layout/includes/widget/card_post_toc.pug
@@ -0,0 +1,13 @@
+- let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
+
+#card-toc.card-widget
+  .card-content
+    .item-headline
+      i.fas.fa-stream
+      span= _p('aside.card_toc')
+
+    if (page.encrypt == true)
+      .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
+    else 
+      .toc-content!=toc(page.content, {list_number: tocNumber})
+      
\ No newline at end of file
diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug
index ccf3dc5..ec2a80e 100644
--- a/layout/includes/widget/index.pug
+++ b/layout/includes/widget/index.pug
@@ -1,20 +1,28 @@
 #aside_content.aside_content
   if theme.aside.card_author.enable
-    include ./card_author.pug
+    !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
+  if theme.aside.card_announcement.enable
+    !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
   .sticky_layout
-    if theme.aside.card_announcement.enable
-      include ./card_announcement.pug
-    if theme.aside.card_recent_post.enable
-      include ./card_recent_post.pug
-    if theme.newest_comments.enable
-      include ./card_newest_comment.pug
-    if theme.ad && theme.ad.aside
-      include ./card_ad.pug
-    if theme.aside.card_categories.enable
-      include ./card_categories.pug
-    if theme.aside.card_tags.enable
-      include ./card_tags.pug
-    if theme.aside.card_archives.enable
-      include ./card_archives.pug
-    if theme.aside.card_webinfo.enable
-      include ./card_webinfo.pug
\ No newline at end of file
+    if is_post()
+      if showToc
+        include ./card_post_toc.pug
+      if theme.aside.card_recent_post.enable
+        !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
+      if theme.ad && theme.ad.aside
+        !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
+    else
+      if theme.aside.card_recent_post.enable
+        !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
+      if theme.ad && theme.ad.aside
+        !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
+      if theme.newest_comments.enable
+        !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_categories.enable
+        !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_tags.enable
+        !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_archives.enable
+        !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_webinfo.enable
+        !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})
\ No newline at end of file
diff --git a/layout/post.pug b/layout/post.pug
index 230f5ed..c57d99e 100644
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -1,11 +1,11 @@
 extends includes/layout.pug
 
 block content
-  article#post(class="")
+  #post
     if top_img === false
       include includes/header/post-info.pug
 
-    #article-container.post-content!=page.content
+    article#article-container.post-content!=page.content
     include includes/post/post-copyright.pug
     .tag_share
       if (theme.post_meta.post.tags)
diff --git a/package.json b/package.json
index 2dfee5e..30531b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.3.0-b1",
+  "version": "3.3.0-b2",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/scripts/events/check_hexo.js b/scripts/events/check_hexo.js
index 612bddc..fb341f1 100644
--- a/scripts/events/check_hexo.js
+++ b/scripts/events/check_hexo.js
@@ -4,9 +4,9 @@ hexo.extend.filter.register('before_generate', () => {
   // Get first two digits of the Hexo version number
   var hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1')
 
-  if (hexoVer < 4.2) {
-    logger.error('Please update Hexo to V4.2.0 or higher!')
-    logger.error('請把 Hexo 升級到 V4.2.0 或更高的版本！')
+  if (hexoVer < 5) {
+    logger.error('Please update Hexo to V5.0.0 or higher!')
+    logger.error('請把 Hexo 升級到 V5.0.0 或更高的版本！')
     process.exit(-1)
   }
 })
diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js
index f83f08e..52642ee 100644
--- a/scripts/helpers/page.js
+++ b/scripts/helpers/page.js
@@ -76,7 +76,3 @@ hexo.extend.helper.register('urlNoIndex', function () {
 hexo.extend.helper.register('md5', function (path) {
   return crypto.createHash('md5').update(decodeURI(this.url_for(path))).digest('hex')
 })
-
-hexo.extend.helper.register('get_hexo_version', function () {
-  return hexo.version
-})
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
index d404aa7..5c9bdde 100644
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -68,26 +68,6 @@ if hexo-config('enter_transitions')
   #ribbon-canvas
     animation: ribbon_to_show 4s
 
-  .tocOpenPc
-    .sidebar-toc__title
-      animation: tocsidebarLtoR .5s
-
-    .sidebar-toc__progress
-      animation: tocsidebarLtoR .7s
-
-    .sidebar-toc__content
-      animation: tocsidebarLtoR .9s
-
-  .tocOpenMobile
-    .sidebar-toc__title
-      animation: tocsidebarRtoL .4s
-
-    .sidebar-toc__progress
-      animation: tocsidebarRtoL .6s
-
-    .sidebar-toc__content
-      animation: tocsidebarRtoL .7s
-
   #mobile-sidebar-menus
     &.open
       for i in 1 2 3 4
@@ -215,19 +195,5 @@ if hexo-config('avatar.effect') == true
   0%
     transform: translateX(200px)
 
-  100%
-    transform: translateX(0)
-
-@keyframes tocsidebarRtoL
-  0%
-    transform: translateX(200px)
-
-  100%
-    transform: translateX(0)
-
-@keyframes tocsidebarLtoR
-  0%
-    transform: translateX(-200px)
-
   100%
     transform: translateX(0)
\ No newline at end of file
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index 0e24ddd..a6903f2 100644
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -26,6 +26,7 @@
   --blockquote-bg: $blockquote-background-color
   --reward-pop: $reward-pop-up-bg
   --sidebar-icon-color: $sidebar-icon-color
+  --toc-link-color: $toc-link-color
 
 html
   height: 100%
@@ -140,6 +141,16 @@ button
   background: none
   cursor: pointer
 
+a
+  color: $a-link-color
+  text-decoration: none
+  word-wrap: break-word
+  transition: all .2s
+  overflow-wrap: break-word
+
+  &:hover
+    color: $light-blue
+
 // font
 #site-title,
 #site-subtitle,
@@ -183,6 +194,10 @@ button
       transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
       transform: scaleX(1)
 
+img
+  max-width: 100%
+  transition: all .2s
+
 img[src=''],
 img:not([src])
   opacity: 0
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index eb007be..ea93b5e 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -1,10 +1,27 @@
 #aside_content
   width: 25%
 
+  +minWidth900()
+    if hexo-config('aside.position') == 'right'
+      padding-left: 15px
+    else
+      padding-right: 15px
+
+  +maxWidth900()
+    width: 100%
+
+  if hexo-config('aside.mobile') == false
+    +maxWidth768()
+      display: none
+
   > .card-widget:first-child
     margin-top: 0
 
+    +maxWidth900()
+      margin-top: 1rem
+
   .card-widget
+    position: relative
     overflow: hidden
     margin-top: 1rem
     border-radius: 8px
@@ -82,15 +99,12 @@
     padding: 1rem 1.2rem
 
   .item-headline
+    padding-bottom: .3rem
     font-size: 1.2em
 
     span
       margin-left: .5rem
 
-    & + div,
-    & + ul
-      padding: .3rem 0 0
-
   .sticky_layout
     +minWidth900()
       position: sticky
@@ -171,6 +185,7 @@
   .card-archives ul.card-archive-list,
   .card-categories ul.card-category-list
     margin: 0
+    padding: 0
     list-style: none
 
   .card-archives ul.card-archive-list > .card-archive-list-item,
@@ -248,23 +263,71 @@
             flex: 1
             padding-right: 1rem
 
-+maxWidth900()
-  #aside_content
-    width: 100% !important
+  // toc
+  #card-toc
+    +maxWidth900()
+      position: fixed
+      right: 45px
+      bottom: 30px
+      z-index: 9999
+      display: none
+      width: 300px
+      transform-origin: right bottom
+      animation: toc-close .3s
 
-  #aside_content
-    .card-widget:first-child
-      margin-top: 1rem
+      &.open
+        display: block
+        animation: toc-open .3s
 
-+minWidth900()
-  #aside_content
-    .card-widget
-      if hexo-config('aside.position') == 'right'
-        margin-left: 15px
-      else
-        margin-right: 15px
+      .toc-child
+        display: block !important
 
-if hexo-config('aside.mobile') == false
-  +maxWidth768()
-    #aside_content
-      display: none
\ No newline at end of file
+    .toc-content
+      overflow-y: auto
+      max-height: calc(100vh - 120px)
+
+      ol,
+      li
+        list-style: none
+
+      > ol
+        padding: 0 !important
+
+      ol
+        margin: 0
+        padding-left: .4rem
+
+      .toc-link
+        display: block
+        padding-left: .3rem
+        border-left: 3px solid transparent
+        color: var(--toc-link-color)
+        transition: all .2s ease-in-out
+
+        &.active
+          border-left-color: darken($theme-toc-color, 20%)
+          background: $theme-toc-color
+          color: $sidebar-active-color
+
+      &:before
+        position: absolute
+        top: .6rem
+        right: 1.2rem
+        color: #a9a9a9
+        content: attr(progress-percentage)
+        font-style: italic
+        font-size: 1.2rem
+
+@keyframes toc-open
+  0%
+    transform: scale(.7)
+
+  100%
+    transform: scale(1)
+
+@keyframes toc-close
+  0%
+    transform: scale(.7)
+
+  100%
+    transform: scale(1)
diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl
index 5d58619..4f93edd 100644
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -116,10 +116,14 @@
 
   #post-info
     position: absolute
-    bottom: 1.5rem
+    bottom: 5rem
     padding: 0 8%
     width: 100%
-    text-align: left
+    text-align: center
+
+    +maxWidth900()
+      bottom: 1.5rem
+      text-align: left
 
     +maxWidth768()
       bottom: 1.1rem
@@ -128,7 +132,7 @@
 #post-info
   #post-title
     margin-bottom: .4rem
-    font-size: 2.15em
+    font-size: 2.5em
 
     +maxWidth768()
       font-size: 1.72em
diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl
index 5aae195..b792a06 100644
--- a/source/css/_layout/pagination.styl
+++ b/source/css/_layout/pagination.styl
@@ -59,6 +59,9 @@
   .next-post
     width: 50%
 
+    +maxWidth768()
+      width: 100%
+
     a
       position: relative
       display: block
@@ -73,9 +76,4 @@
 
   &.pagination-post
     margin: 2rem 0 !important
-    background: $dark-black
-
-+maxWidth768()
-  .prev-post,
-  .next-post
-    width: 100% !important
+    background: $dark-black
\ No newline at end of file
diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl
index 51173a0..665fb5a 100644
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -142,6 +142,24 @@ no-beautify()
       padding-left: .3rem
 
 #article-container
+  word-wrap: break-word
+  overflow-wrap: break-word
+
+  a
+    color: $theme-link-color
+
+    &:hover
+      text-decoration: underline
+
+  img
+    margin: 0 auto .8rem
+
+  p
+    margin: 0 0 .8rem
+
+  iframe
+    margin: 0 0 1rem
+
   if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
     beautify()
   else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
@@ -152,42 +170,7 @@ no-beautify()
   else
     no-beautify()
 
-a
-  color: $a-link-color
-  text-decoration: none
-  word-wrap: break-word
-  transition: all .2s
-  overflow-wrap: break-word
-
-  &:hover
-    color: $light-blue
-
-a.fancybox
-  outline: none
-
-  &:focus
-    outline: none
-
-  display: inline-block
-  width: 100%
-  text-align: center
-
-img
-  max-width: 100%
-  transition: all .2s
-
-.katex-wrap
-  overflow: auto
-
-  if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
-    &::-webkit-scrollbar
-      display: none
-
-.layout_post
-  margin: 0 auto
-  padding: 2rem 15px
-  max-width: 1000px
-
+#post
   img
     display: block
 
@@ -272,25 +255,6 @@ img
           &:hover
             text-decoration: none
 
-#article-container
-  word-wrap: break-word
-  overflow-wrap: break-word
-
-  a
-    color: $theme-link-color
-
-    &:hover
-      text-decoration: underline
-
-  img
-    margin: 0 auto .8rem
-
-  p
-    margin: 0 0 .8rem
-
-  iframe
-    margin: 0 0 1rem
-
   .post-outdate-notice
     position: relative
     margin: 0 0 1rem
@@ -311,25 +275,3 @@ img
         color: $noticeOutdate-border
         content: '\f071'
         transform: translateY(-50%)
-
-+maxWidth1024()
-  .layout_post
-    width: auto
-
-+maxWidth768()
-  .layout_post
-    padding: 1rem 5px
-
-    & > #post
-      padding: 1.8rem .7rem
-
-// adjust the layout width in big screen
-+minWidth2000()
-  .layout_post
-    max-width: 1300px
-
-  .layout_page
-    max-width: 1500px
-
-    &.hide-aside
-      max-width: 1300px
\ No newline at end of file
diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl
deleted file mode 100644
index 2ddafd0..0000000
--- a/source/css/_layout/sidebar.styl
+++ /dev/null
@@ -1,88 +0,0 @@
-#toggle-sidebar
-  position: fixed
-  bottom: $sidebar-icon-top
-  left: $sidebar-icon-left
-  z-index: 100
-  color: var(--sidebar-icon-color)
-  font-size: $sidebar-icon-size
-  cursor: pointer
-  transition: all .2s
-
-  +maxWidth1024()
-    display: none
-
-#sidebar
-  position: fixed
-  top: 0
-  left: -($sidebar-width)
-  z-index: 10
-  padding: 1rem 0 2rem .5rem
-  width: $sidebar-width
-  height: 100%
-  background: var(--sidebar-bg)
-  opacity: .9
-
-  &.tocOpenPc
-    & > #toggle-sidebar
-      color: #99a9bf
-      transform: rotateZ(180deg)
-
-  +maxWidth1024()
-    right: -($mobile-sidebar-width)
-    left: auto
-    z-index: 103
-    width: $mobile-sidebar-width
-    box-shadow: none
-    opacity: 1
-    transition: all .4s
-
-    .toc-child
-      display: block !important
-
-  .sidebar-toc
-    ol,
-    li
-      list-style: none
-
-    ol
-      margin-top: .2rem
-      padding-left: .4rem
-
-    &__title
-      padding-right: .5rem
-      text-align: center
-      font-size: 1.3em
-
-    &__content
-      overflow-y: scroll
-      padding-bottom: 5rem
-      height: 90vh
-
-    .toc-link
-      display: block
-      padding-left: .2rem
-      border-right: 3px solid transparent
-      transition: all .2s ease-in-out
-
-      &.active
-        border-right-color: darken($theme-toc-color, 20%)
-        background: $theme-toc-color
-        color: $sidebar-active-color
-
-    &__progress
-      position: relative
-      margin-bottom: .3rem
-      padding-left: .6rem
-      color: $theme-toc-color
-
-      .progress-notice
-        margin-right: .4rem
-
-      .progress-num
-        display: inline-block
-        min-width: .9rem
-
-      &-bar
-        width: 0
-        height: 1px
-        background: $theme-toc-color
\ No newline at end of file
diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl
index f4fa222..7d39528 100644
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -61,6 +61,13 @@
     margin: 0 0 .8em
     padding: .3rem 0 .8em
 
+.katex-wrap
+  overflow: auto
+
+  if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
+    &::-webkit-scrollbar
+      display: none
+
 // mathjax
 .mathjax-overflow
   overflow-x: auto
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
index bc34b0a..14df968 100644
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -27,6 +27,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --blockquote-bg: lighten(#121212, 10)
     --reward-pop: lighten(#121212, 10)
     --sidebar-icon-color: alpha(#FFFFFF, .7)
+    --toc-link-color: alpha(#FFFFFF, .6)
 
     #web_bg:before,
     #footer:before,
diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl
index d0da99a..802e296 100644
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -12,18 +12,21 @@ if hexo-config('readmode')
 
   [data-theme='dark']
     .read-mode
-      --font-color: rgba(255, 255, 255, .6)
+      --font-color: rgba(255, 255, 255, .7)
       --readmode-light-color: #0d0d0d
-      --white: rgba(255, 255, 255, .8)
-      --light-grey: rgba(255, 255, 255, .6)
-      --gray: rgba(255, 255, 255, .6)
-      --hr-border: rgba(255, 255, 255, .3)
-      --hr-before-color: rgba(255, 255, 255, .6)
+      --white: rgba(255, 255, 255, .9)
+      --light-grey: rgba(255, 255, 255, .7)
+      --gray: rgba(255, 255, 255, .7)
+      --hr-border: rgba(255, 255, 255, .5)
+      --hr-before-color: rgba(255, 255, 255, .7)
       -highlight-bg: #171717
 
   .read-mode
     background: var(--readmode-light-color)
 
+    #aside_content
+      display: none
+
     #body-wrap
       padding-left: 0 !important
 
@@ -38,23 +41,21 @@ if hexo-config('readmode')
         padding: 0
         text-align: center
 
-    .layout_post
-      > #post
-        background: transparent
-        box-shadow: none
+    #post
+      margin: 0 auto
+      background: transparent
+      box-shadow: none
 
-        &:hover
-          box-shadow: none
+      &:hover
+        box-shadow: none
 
     & > canvas
       display: none !important
 
     .highlight-tools,
     #footer,
-    #post > *:not(:first-child),
+    #post > *:not(#post-info):not(.post-content),
     #to_comment,
-    #sidebar,
-    #toggle-sidebar,
     #mobile-toc-button,
     #nav,
     .post-outdate-notice,
@@ -179,6 +180,7 @@ if hexo-config('readmode')
 
       .note
         border: 2px solid var(--gray)
+        border-left-color: var(--gray) !important
         filter: none
-        background-color: var(--readmode-light-color)
+        background-color: var(--readmode-light-color) !important
         color: var(--font-color)
\ No newline at end of file
diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl
index 0a3189a..ced0cac 100644
--- a/source/css/_page/common.styl
+++ b/source/css/_page/common.styl
@@ -1,4 +1,4 @@
-.layout_page
+.layout
   display: flex
   margin: 0 auto
   padding: 2rem 15px
@@ -10,7 +10,20 @@
   +maxWidth768()
     padding: 1rem 5px !important
 
+  +minWidth2000()
+    max-width: 1500px
+
   & > div:first-child:not(.recent-posts)
+    align-self: flex-start
+    padding: 50px 40px
+    border-radius: 8px
+    background: var(--card-bg)
+    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+    transition: all .3s
+
+    &:hover
+      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+
     +maxWidth768()
       padding: 1.8rem .7rem !important
 
@@ -20,31 +33,20 @@
     +maxWidth900()
       width: 100% !important
 
+    if hexo-config('aside.position') == 'left'
+      +minWidth900()
+        order: 2
+
   // 隱藏aside
   &.hide-aside
     max-width: 1000px
 
+    +minWidth2000()
+      max-width: 1300px
+
     & > div
       width: 100% !important
 
-.layout_post > #post,
-.layout_page > div:first-child:not(.recent-posts)
-  align-self: flex-start
-  padding: 50px 40px
-  border-radius: 8px
-  background: var(--card-bg)
-  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
-  transition: all .3s
-
-  &:hover
-    box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
-
-if hexo-config('aside.position') == 'left'
-  +minWidth900()
-    .layout_page
-      & > div:first-child
-        order: 2
-
 #page
   h1.page-title
     margin-top: .4rem
\ No newline at end of file
diff --git a/source/css/var.styl b/source/css/var.styl
index f0ac7ce..ba88091 100644
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -66,6 +66,8 @@ $sidebar-width = 300px
 $sidebar-background = #f6f8fa
 $sidebar-active-color = #fff
 $mobile-sidebar-width = 250px
+// aside
+$toc-link-color = #666261
 // Button
 $button-color = #fff
 $button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
diff --git a/source/js/main.js b/source/js/main.js
index 7297f0a..9b251cd 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,21 +1,11 @@
-
-/**
-  * 當menu過多時，自動適配，避免UI錯亂
-  * @param {*} n
-  * 傳入 1 sidebar打開時
-  * 傳入 2 正常狀態下
-  */
-
 $(function () {
   const blogNameWidth = $('#site-name').width()
   const menusWidth = $('#menus').width()
-  const sidebarWidth = $('#sidebar').width() || 300
 
-  const adjustMenu = function (n) {
+  const adjustMenu = () => {
     const $nav = $('#nav')
     let t
-    if (n === 0) t = true
-    else if (n === 1) t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 30
+    if (window.innerWidth < 768) t = true
     else t = blogNameWidth + menusWidth > $nav.width() - 30
 
     if (t) {
@@ -27,157 +17,45 @@ $(function () {
 
   // 初始化header
   const initAdjust = () => {
-    if (window.innerWidth < 768) adjustMenu(0)
-    else adjustMenu(2)
+    adjustMenu()
     $('#nav').addClass('show')
   }
 
-  /**
- * 進入post頁sidebar處理
- */
-  const OpenSidebarAuto = () => {
-    if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) {
-      setTimeout(function () {
-        openSidebar()
-      }, 400)
-    }
-  }
-
-  /**
- * 點擊左下角箭頭,顯示sidebar
- */
-
-  const closeSidebar = () => {
-    $('#sidebar').removeClass('tocOpenPc').animate({
-      left: '-300px'
-    }, 400)
-    $('#menus').animate({
-      paddingRight: 0
-    }, 400)
-    $('#body-wrap').animate({
-      paddingLeft: 0
-    }, 400)
-    if ($('#nav').hasClass('hide-menu')) {
-      setTimeout(function () {
-        adjustMenu(2)
-      }, 400)
-    }
-  }
-
-  const openSidebar = () => {
-    if (!$('#nav').hasClass('hide-menu')) {
-      adjustMenu(1)
-    }
-    $('#sidebar').addClass('tocOpenPc').animate({
-      left: 0
-    }, 400)
-    $('#menus').animate({
-      paddingRight: 300
-    }, 400)
-    $('#body-wrap').animate({
-      paddingLeft: 300
-    }, 400)
-  }
-
-  const toggleSidebar = function () {
-    $('#toggle-sidebar').on('click', function () {
-      const isOpen = $(this).hasClass('on')
-      isOpen ? $(this).removeClass('on') : $(this).addClass('on')
-      if (isOpen) {
-        closeSidebar()
-      } else {
-        openSidebar()
-      }
-    })
-  }
-
-  /**
- * 手機menu和toc按鈕點擊
- * 顯示menu和toc的sidebar
- */
-
+  // sidebar menus
   const sidebarFn = () => {
     const $toggleMenu = $('#toggle-menu')
     const $mobileSidebarMenus = $('#mobile-sidebar-menus')
-    const $mobileTocButton = $('#mobile-toc-button')
     const $menuMask = $('#menu_mask')
     const $body = $('body')
-    const $sidebar = $('#sidebar')
 
-    function openMobileSidebar (name) {
+    function openMobileSidebar () {
       btf.sidebarPaddingR()
       $body.css('overflow', 'hidden')
       $menuMask.fadeIn()
-
-      if (name === 'menu') {
-        $toggleMenu.removeClass('close').addClass('open')
-        $mobileSidebarMenus.addClass('open')
-      }
-
-      if (name === 'toc') {
-        $mobileTocButton.removeClass('close').addClass('open')
-        $sidebar.addClass('tocOpenMobile').css({ transform: 'translate3d(-100%,0,0)', left: '' })
-      }
+      $toggleMenu.removeClass('close').addClass('open')
+      $mobileSidebarMenus.addClass('open')
     }
 
-    function closeMobileSidebar (name) {
+    function closeMobileSidebar () {
       $body.css({ overflow: '', 'padding-right': '' })
       $menuMask.fadeOut()
-
-      if (name === 'menu') {
-        $toggleMenu.removeClass('open').addClass('close')
-        $mobileSidebarMenus.removeClass('open')
-      }
-
-      if (name === 'toc') {
-        $mobileTocButton.removeClass('open').addClass('close')
-        $sidebar.removeClass('tocOpenMobile').css({ transform: '' })
-      }
+      $toggleMenu.removeClass('open').addClass('close')
+      $mobileSidebarMenus.removeClass('open')
     }
 
     $toggleMenu.on('click', function () {
-      openMobileSidebar('menu')
-    })
-
-    $mobileTocButton.on('click', function () {
-      openMobileSidebar('toc')
+      openMobileSidebar()
     })
 
     $menuMask.on('click touchstart', function (e) {
       if ($toggleMenu.hasClass('open')) {
-        closeMobileSidebar('menu')
-      }
-      if ($mobileTocButton.hasClass('open')) {
-        closeMobileSidebar('toc')
+        closeMobileSidebar()
       }
     })
 
     $(window).on('resize', function (e) {
       if (!$toggleMenu.is(':visible')) {
-        if ($toggleMenu.hasClass('open')) closeMobileSidebar('menu')
-      }
-    })
-
-    const mql = window.matchMedia('(max-width: 1024px)')
-    const $toggleSidebar = $('#toggle-sidebar')
-    const matchFn = (ev) => {
-      if (ev.matches) {
-        if ($sidebar.hasClass('tocOpenPc')) closeSidebar()
-      } else {
-        if ($toggleSidebar.hasClass('on')) openSidebar()
-        if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc')
-      }
-    }
-
-    mql.addListener(matchFn)
-    document.addEventListener('pjax:send', () => { mql.removeListener(matchFn) })
-
-    // toc元素點擊
-    $sidebar.find('.toc-link').on('click', function (e) {
-      e.preventDefault()
-      btf.scrollToDest(decodeURI($(this).attr('href')))
-      if (window.innerWidth < 1024) {
-        closeMobileSidebar('toc')
+        if ($toggleMenu.hasClass('open')) closeMobileSidebar()
       }
     })
   }
@@ -427,9 +305,10 @@ $(function () {
  *  toc
  */
   const tocFn = function () {
-    const $sidebar = $('#sidebar')
-    const $tocChild = $sidebar.find('.toc-child')
-    const $tocLink = $sidebar.find('.toc-link')
+    const $cardTocLayout = $('#card-toc')
+    const $cardToc = $cardTocLayout.find('.toc-content')
+    const $tocChild = $cardToc.find('.toc-child')
+    const $tocLink = $cardToc.find('.toc-link')
     const $article = $('#article-container')
 
     $tocChild.hide()
@@ -459,10 +338,7 @@ $(function () {
       const percentage = (scrollPercentRounded > 100) ? 100
         : (scrollPercentRounded <= 0) ? 0
           : scrollPercentRounded
-      $sidebar.find('.progress-num').text(percentage)
-      $sidebar.find('.sidebar-toc__progress-bar').animate({
-        width: percentage + '%'
-      }, 100)
+      $cardToc.attr('progress-percentage', percentage)
     }
 
     // anchor
@@ -473,9 +349,36 @@ $(function () {
       }
     }
 
+    const mobileToc = {
+      open: () => {
+        $cardTocLayout.addClass('open')
+      },
+
+      close: () => {
+        $cardTocLayout.removeClass('open')
+      }
+    }
+
+    $('#mobile-toc-button').on('click', () => {
+      if ($cardTocLayout.is(':visible')) {
+        mobileToc.close()
+      } else {
+        mobileToc.open()
+      }
+    })
+
+    // toc元素點擊
+    $tocLink.on('click', function (e) {
+      e.preventDefault()
+      btf.scrollToDest(decodeURI($(this).attr('href')))
+      if (window.innerWidth < 900) {
+        mobileToc.close()
+      }
+    })
+
     const autoScrollToc = function (currentTop, item) {
       const activePosition = item.offset().top
-      const $tocContent = $sidebar.find('.sidebar-toc__content')
+      const $tocContent = $cardToc
       const sidebarScrollTop = $tocContent.scrollTop()
       if (activePosition > (currentTop + $(window).height() - 100)) {
         $tocContent.scrollTop(sidebarScrollTop + 100)
@@ -489,7 +392,6 @@ $(function () {
     // DOM Hierarchy:
     // ol.toc > (li.toc-item, ...)
     // li.toc-item > (a.toc-link, ol.toc-2child > (li.toc-item, ...))
-    const versionBiggerFive = GLOBAL_CONFIG.hexoversion.split('.')[0] >= 5
     const list = $article.find('h1,h2,h3,h4,h5,h6')
 
     const findHeadPosition = function (top) {
@@ -503,8 +405,7 @@ $(function () {
       list.each(function () {
         const head = $(this)
         if (top > head.offset().top - 70) {
-          if (versionBiggerFive) currentId = '#' + encodeURI($(this).attr('id'))
-          else currentId = '#' + $(this).attr('id')
+          currentId = '#' + encodeURI($(this).attr('id'))
         }
       })
 
@@ -765,9 +666,7 @@ $(function () {
 
   const unRefreshFn = function () {
     $(window).on('resize', function () {
-      if (window.innerWidth < 768) adjustMenu(0)
-      else if ($('#sidebar').hasClass('tocOpenPc') && $('#nav').hasClass('fixed')) adjustMenu(1)
-      else adjustMenu(2)
+      adjustMenu()
     })
 
     clickFnOfSubMenu()
@@ -779,9 +678,7 @@ $(function () {
     initAdjust()
 
     if (GLOBAL_CONFIG_SITE.isPost) {
-      OpenSidebarAuto()
-      toggleSidebar()
-      GLOBAL_CONFIG_SITE.isSidebar && tocFn()
+      GLOBAL_CONFIG_SITE.isToc && tocFn()
       GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
       GLOBAL_CONFIG.relativeDate.post && relativeDate($('#post-meta time'))
     } else {
diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js
index 4f0632b..c3f4b11 100644
--- a/source/js/search/algolia.js
+++ b/source/js/search/algolia.js
@@ -36,7 +36,7 @@ $(function () {
 
   searchClickFn()
 
-  window.addEventListener('pjax:success', function () {
+  window.addEventListener('pjax:send', function () {
     closeSearch()
     searchClickFn()
   })
diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js
index a760e6c..42ec4e4 100644
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -47,7 +47,7 @@ $(function () {
   }
 
   searchClickFn()
-  window.addEventListener('pjax:success', function () {
+  window.addEventListener('pjax:send', function () {
     $('#local-search').is(':visible') && closeSearch()
     searchClickFn()
   })

From 8014ddb65ef03f059edca863617a532bf4085076 Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Thu, 15 Oct 2020 00:14:38 +0800
Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=E4=B8=8D=E5=86=8D=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20butterfly.yml=20=E5=AF=AB=E6=B3=95=20improvement:?=
 =?UTF-8?q?=20=E6=96=87=E7=AB=A0=E9=A0=81=E6=A8=99=E9=A1=8C=E6=94=B9?=
 =?UTF-8?q?=E7=82=BAh1(seo)=20improvement:=20=E6=94=B9=E7=94=A8hexo=20?=
 =?UTF-8?q?=E5=85=A7=E7=BD=AE=E7=9A=84=20injector=20=E6=8F=92=E5=85=A5=20i?=
 =?UTF-8?q?nject=20=E7=9A=84=E4=BB=A3=E7=A2=BC=20improvement:=20canonical?=
 =?UTF-8?q?=20=E6=94=B9=E7=82=BAhexo=E6=8F=90=E4=BE=9B=E7=9A=84=E5=87=BD?=
 =?UTF-8?q?=E6=95=B8=E7=94=9F=E6=88=90=20improvement:=20=E5=84=AA=E5=8C=96?=
 =?UTF-8?q?=E6=89=8B=E6=A9=9Ftoc=20=E7=9A=84=E7=89=B9=E6=95=88=E5=92=8C?=
 =?UTF-8?q?=E6=8C=89=E9=88=95=E5=87=BA=E7=8F=BE=E7=9A=84=E6=99=82=E6=A9=9F?=
 =?UTF-8?q?=20remove:=20=E5=88=AA=E9=99=A4=E6=90=9C=E7=B4=A2=E4=B8=8D?=
 =?UTF-8?q?=E5=BF=85=E8=A6=81=E7=9A=84=E9=85=8D=E7=BD=AE=20remove:=20?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E8=B1=86=E7=93=A3=E9=85=8D=E7=BD=AE,?=
 =?UTF-8?q?=E5=A6=82=E9=9C=80=E9=85=8D=E7=BD=AE=EF=BC=8C=E8=AB=8B=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20hexo-butterfly-douban=20fix:=20=E4=BF=AE=E5=BE=A9?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=80=E5=80=8B=E7=89=88=E6=9C=AC=E5=B0=8E=E8=87=B4?=
 =?UTF-8?q?=E7=9A=84=E6=90=9C=E7=B4=A2=E6=8C=89=E9=88=95=E5=9C=A8pjax?=
 =?UTF-8?q?=E4=B8=8B=E7=84=A1=E6=B3=95=E9=BB=9E=E6=93=8A=E7=9A=84bugs=20cl?=
 =?UTF-8?q?ose=20#387=20fix:=20=E4=BF=AE=E5=BE=A9=E4=B8=8A=E4=B8=80?=
 =?UTF-8?q?=E5=80=8B=E7=89=88=E6=9C=AC=E6=9B=B4=E6=96=B0=E7=9A=84toc=20z-i?=
 =?UTF-8?q?ndex=20=E9=81=8E=E4=BD=8E=E7=9A=84bugs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                                   | 27 +++++--------------
 languages/default.yml                         |  2 +-
 languages/en.yml                              |  2 +-
 languages/zh-CN.yml                           |  2 +-
 languages/zh-TW.yml                           |  2 +-
 layout/includes/additional-js.pug             |  2 --
 layout/includes/head.pug                      |  2 --
 layout/includes/header/index.pug              | 12 ---------
 layout/includes/header/post-info.pug          |  3 +--
 layout/includes/page/default-page.pug         |  2 --
 .../includes/widget/card_newest_comment.pug   |  2 +-
 package.json                                  |  2 +-
 scripts/events/{check_hexo.js => check.js}    |  9 +++++++
 scripts/events/replace_config.js              | 18 -------------
 scripts/filters/random_cover.js               |  3 ++-
 scripts/helpers/page.js                       | 19 ++-----------
 scripts/helpers/related_post.js               |  2 +-
 scripts/injector/inject.js                    | 22 +++++++++++++++
 scripts/{tags => tag}/button.js               |  0
 scripts/{tags => tag}/gallery.js              |  0
 scripts/{tags => tag}/hide.js                 |  0
 scripts/{tags => tag}/mermaid.js              |  0
 scripts/{tags => tag}/note.js                 |  0
 scripts/{tags => tag}/tabs.js                 |  0
 source/css/_global/index.styl                 | 13 ++++-----
 source/css/_highlight/highlight.styl          |  1 +
 source/css/_layout/404.styl                   |  3 ++-
 source/css/_layout/aside.styl                 | 12 +++------
 source/css/_layout/head.styl                  | 15 +++++------
 source/css/_layout/rightside.styl             |  2 +-
 source/css/var.styl                           |  2 +-
 source/js/main.js                             |  7 +++--
 source/js/search/algolia.js                   |  2 +-
 source/js/search/local-search.js              |  3 ++-
 34 files changed, 80 insertions(+), 113 deletions(-)
 rename scripts/events/{check_hexo.js => check.js} (55%)
 delete mode 100644 scripts/events/replace_config.js
 create mode 100644 scripts/injector/inject.js
 rename scripts/{tags => tag}/button.js (100%)
 rename scripts/{tags => tag}/gallery.js (100%)
 rename scripts/{tags => tag}/hide.js (100%)
 rename scripts/{tags => tag}/mermaid.js (100%)
 rename scripts/{tags => tag}/note.js (100%)
 rename scripts/{tags => tag}/tabs.js (100%)

diff --git a/_config.yml b/_config.yml
index 4bb3fd3..f1aedd4 100644
--- a/_config.yml
+++ b/_config.yml
@@ -53,17 +53,9 @@ algolia_search:
   hits:
     per_page: 6
 
-  labels:
-    input_placeholder: Search for Posts
-    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
-    hits_stats: '${hits} results found in ${time} ms'
-
 # Local search
 local_search:
   enable: false
-  labels:
-    input_placeholder: Search for Posts
-    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
 
 # Math (數學)
 # --------------------------------------
@@ -108,7 +100,7 @@ archive_img:
 tag_img:
 
 # The banner image of tag page
-# format: 
+# format:
 #  - tag name: xxxxx
 tag_per_img:
 
@@ -117,17 +109,10 @@ tag_per_img:
 category_img:
 
 # The banner image of category page
-# format: 
+# format:
 #  - category name: xxxxx
 category_per_img:
 
-# If you are using hexo-douban, you can configure it (如果你有使用 hexo-douban,可配置這個)
-# douban:
-#   meta: false
-#   movies_img:
-#   books_img:
-#   games_img:
-
 cover:
   # display the cover or not (是否顯示文章封面)
   index_enable: true
@@ -576,9 +561,9 @@ font:
 
 # Font settings for the site title and site subtitle
 # 左上角網站名字 主頁居中網站名字
-# blog_title_font:
-  # font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
-  # font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
+blog_title_font:
+  font_link:
+  font-family:
 
 # The setting of divider icon (水平分隔線圖標設置)
 hr_icon:
@@ -919,4 +904,4 @@ CDN:
   prismjs_lineNumber_js: https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
   prismjs_autoloader: https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js
 
-  artitalk: https://cdn.jsdelivr.net/npm/artitalk
\ No newline at end of file
+  artitalk: https://cdn.jsdelivr.net/npm/artitalk
diff --git a/languages/default.yml b/languages/default.yml
index aeb6406..d1699c3 100644
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -71,7 +71,7 @@ aside:
     site_pv_name: PV
   more_button: More
   card_newest_comments:
-    heading: Newest Comments
+    headline: Newest Comments
     loading_text: loading...
     error: Unable to get the data, please make sure the settings are correct.
   card_toc: Catalog
diff --git a/languages/en.yml b/languages/en.yml
index aeb6406..d1699c3 100644
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -71,7 +71,7 @@ aside:
     site_pv_name: PV
   more_button: More
   card_newest_comments:
-    heading: Newest Comments
+    headline: Newest Comments
     loading_text: loading...
     error: Unable to get the data, please make sure the settings are correct.
   card_toc: Catalog
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index f17a563..2a1a762 100644
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -73,7 +73,7 @@ aside:
     site_pv_name: 本站总访问量
   more_button: 查看更多
   card_newest_comments:
-    heading: 最新评论
+    headline: 最新评论
     loading_text: 正在加载中...
     error: 无法获取资料，请确认相关配置是否正确
   card_toc: 目录
diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
index cb254c9..2b30d2a 100644
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -73,7 +73,7 @@ aside:
     site_pv_name: 本站總訪問量
   more_button: 檢視更多
   card_newest_comments:
-    heading: 最新評論
+    headline: 最新評論
     loading_text: 正在加載中...
     error: 無法獲取資料，請確認相關配置是否正確
   card_toc: 目錄
diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug
index 214badc..9e6c8bf 100644
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -55,8 +55,6 @@ div
     else if (!is_post() && page.aside !== false)
       !=partial('includes/third-party/newest-comments/index', {}, {cache:theme.fragment_cache})
 
-  !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
-
   !=partial('includes/third-party/effect', {}, {cache:theme.fragment_cache})
 
   !=partial('includes/third-party/chat/index', {}, {cache:theme.fragment_cache})
diff --git a/layout/includes/head.pug b/layout/includes/head.pug
index 9ec57e9..62d0db5 100644
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -81,5 +81,3 @@ include ./head/noscript.pug
 
 !=partial('includes/head/darkmode', {}, {cache:theme.fragment_cache})
 
-!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
-
diff --git a/layout/includes/header/index.pug b/layout/includes/header/index.pug
index c4ed6e6..4fe2e2c 100644
--- a/layout/includes/header/index.pug
+++ b/layout/includes/header/index.pug
@@ -16,18 +16,6 @@ if page.top_img !== false
   else
     - var top_img = page.top_img || theme.default_top_img
 
-  if theme.douban
-    - var doubanExist = false
-    if is_current('/movies/', [strict])
-      - var top_img = theme.douban.movies_img !== false ? theme.douban.movies_img || theme.default_top_img : false
-      - doubanExist = true
-    else if is_current('/books/', [strict])
-      - var top_img = theme.douban.books_img !== false ? theme.douban.books_img || theme.default_top_img : false
-      - doubanExist = true
-    else if is_current('/games/', [strict])
-      - var top_img = theme.douban.games_img !== false ? theme.douban.games_img || theme.default_top_img : false
-      - doubanExist = true
-
   if top_img !== false
     - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url(${url_for(top_img)})` : `background: ${top_img}`
     - var bg_img = top_img ? imgSource : ''
diff --git a/layout/includes/header/post-info.pug b/layout/includes/header/post-info.pug
index 9fe7134..2d94928 100644
--- a/layout/includes/header/post-info.pug
+++ b/layout/includes/header/post-info.pug
@@ -1,6 +1,5 @@
 #post-info
-  #post-title
-    .posttitle= page.title || _p('no_title')
+  h1.post-title= page.title || _p('no_title')
     
   #post-meta
     .meta-firstline
diff --git a/layout/includes/page/default-page.pug b/layout/includes/page/default-page.pug
index f995e44..2d9cdda 100644
--- a/layout/includes/page/default-page.pug
+++ b/layout/includes/page/default-page.pug
@@ -1,5 +1,3 @@
-if theme.douban && theme.douban.meta && doubanExist
-  meta(name="referrer" content="no-referrer")
 #article-container
   if top_img === false
     h1.page-title= page.title
diff --git a/layout/includes/widget/card_newest_comment.pug b/layout/includes/widget/card_newest_comment.pug
index 1338338..76a19aa 100644
--- a/layout/includes/widget/card_newest_comment.pug
+++ b/layout/includes/widget/card_newest_comment.pug
@@ -2,6 +2,6 @@
   .card-content
     .item-headline
       i.fas.fa-bolt
-      span= _p('aside.card_newest_comments.heading')
+      span= _p('aside.card_newest_comments.headline')
     .aside-list
       span= _p('aside.card_newest_comments.loading_text')
diff --git a/package.json b/package.json
index 30531b4..49010f2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.3.0-b2",
+  "version": "3.3.0-b3",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/scripts/events/check_hexo.js b/scripts/events/check.js
similarity index 55%
rename from scripts/events/check_hexo.js
rename to scripts/events/check.js
index fb341f1..33cfae8 100644
--- a/scripts/events/check_hexo.js
+++ b/scripts/events/check.js
@@ -9,4 +9,13 @@ hexo.extend.filter.register('before_generate', () => {
     logger.error('請把 Hexo 升級到 V5.0.0 或更高的版本！')
     process.exit(-1)
   }
+
+  if (hexo.locals.get) {
+    const data = hexo.locals.get('data')
+    if (data && data.butterfly) {
+      logger.error(" 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' ")
+      logger.error(" 'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml' ")
+      process.exit(-1)
+    }
+  }
 })
diff --git a/scripts/events/replace_config.js b/scripts/events/replace_config.js
deleted file mode 100644
index 3bd05a8..0000000
--- a/scripts/events/replace_config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Note: configs in _data/butterfly.yml will merge configs with hexo.theme.config.
- */
-
-'use strict'
-
-const { deepMerge } = require('hexo-util')
-
-hexo.on('generateBefore', function () {
-  const rootConfig = hexo.config
-  if (hexo.locals.get) {
-    const data = hexo.locals.get('data')
-    if (data && data.butterfly) {
-      hexo.theme.config = deepMerge(hexo.theme.config, data.butterfly)
-    }
-  }
-  hexo.theme.config.rootConfig = rootConfig
-})
diff --git a/scripts/filters/random_cover.js b/scripts/filters/random_cover.js
index f484dd1..8455d60 100644
--- a/scripts/filters/random_cover.js
+++ b/scripts/filters/random_cover.js
@@ -6,7 +6,8 @@
 'use strict'
 
 hexo.extend.filter.register('before_post_render', function (data) {
-  if (hexo.theme.config.rootConfig.post_asset_folder) {
+  const { config } = this
+  if (config.post_asset_folder) {
     const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
     const topImg = data.top_img
     const cover = data.cover
diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js
index 52642ee..270c166 100644
--- a/scripts/helpers/page.js
+++ b/scripts/helpers/page.js
@@ -2,13 +2,12 @@
  * Butterfly
  * @example
  *  page_description()
- *  injectHtml(data)
  *  cloudTags(source, minfontsize, maxfontsize, limit)
  */
 
 'use strict'
 
-const { stripHTML, escapeHTML } = require('hexo-util')
+const { stripHTML, escapeHTML, prettyUrls } = require('hexo-util')
 const crypto = require('crypto')
 
 hexo.extend.helper.register('page_description', function () {
@@ -23,15 +22,6 @@ hexo.extend.helper.register('page_description', function () {
   }
 })
 
-hexo.extend.helper.register('injectHtml', function (data) {
-  let result = ''
-  if (!data) return ''
-  for (let i = 0; i < data.length; i++) {
-    result += data[i]
-  }
-  return result
-})
-
 hexo.extend.helper.register('cloudTags', function (options = {}) {
   const env = this
   let source = options.source
@@ -65,12 +55,7 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
 })
 
 hexo.extend.helper.register('urlNoIndex', function () {
-  const { permalink } = hexo.config
-  let url = this.url.replace(/index\.html$/, '')
-  if (!permalink.endsWith('.html')) {
-    url = url.replace(/\.html$/, '')
-  }
-  return url
+  return prettyUrls(this.url, { trailing_index: false, trailing_html: false })
 })
 
 hexo.extend.helper.register('md5', function (path) {
diff --git a/scripts/helpers/related_post.js b/scripts/helpers/related_post.js
index ee06e06..24992b4 100644
--- a/scripts/helpers/related_post.js
+++ b/scripts/helpers/related_post.js
@@ -35,7 +35,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
     return ''
   }
   let result = ''
-  const hexoConfig = hexo.theme.config.rootConfig
+  const hexoConfig = hexo.config
   const config = hexo.theme.config
 
   const limitNum = config.related_post.limit || 6
diff --git a/scripts/injector/inject.js b/scripts/injector/inject.js
new file mode 100644
index 0000000..069223e
--- /dev/null
+++ b/scripts/injector/inject.js
@@ -0,0 +1,22 @@
+// Injector
+
+'use strict'
+
+hexo.extend.injector.register('head_end', function () {
+  const data = hexo.config.theme_config && hexo.config.theme_config.inject.head
+  return genResult(data)
+})
+
+hexo.extend.injector.register('body_end', () => {
+  const data = hexo.config.theme_config && hexo.config.theme_config.inject.bottom
+  return genResult(data)
+})
+
+function genResult (data) {
+  let result = ''
+  if (!data) return ''
+  for (let i = 0; i < data.length; i++) {
+    result += data[i]
+  }
+  return result
+}
diff --git a/scripts/tags/button.js b/scripts/tag/button.js
similarity index 100%
rename from scripts/tags/button.js
rename to scripts/tag/button.js
diff --git a/scripts/tags/gallery.js b/scripts/tag/gallery.js
similarity index 100%
rename from scripts/tags/gallery.js
rename to scripts/tag/gallery.js
diff --git a/scripts/tags/hide.js b/scripts/tag/hide.js
similarity index 100%
rename from scripts/tags/hide.js
rename to scripts/tag/hide.js
diff --git a/scripts/tags/mermaid.js b/scripts/tag/mermaid.js
similarity index 100%
rename from scripts/tags/mermaid.js
rename to scripts/tag/mermaid.js
diff --git a/scripts/tags/note.js b/scripts/tag/note.js
similarity index 100%
rename from scripts/tags/note.js
rename to scripts/tag/note.js
diff --git a/scripts/tags/tabs.js b/scripts/tag/tabs.js
similarity index 100%
rename from scripts/tags/tabs.js
rename to scripts/tag/tabs.js
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index a6903f2..c2b1db0 100644
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -152,12 +152,13 @@ a
     color: $light-blue
 
 // font
-#site-title,
-#site-subtitle,
-#site-name,
-#aside_content .author-info__name,
-#aside_content .author-info__description
-  font-family: $site-name-font
+if $site-name-font
+  #site-title,
+  #site-subtitle,
+  #site-name,
+  #aside_content .author-info__name,
+  #aside_content .author-info__description
+    font-family: $site-name-font
 
 .is-center
   text-align: center
diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl
index 687fbcb..4f0390f 100644
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -126,6 +126,7 @@ blockquote
       text-transform: uppercase
       font-weight: bold
       font-size: 1.15em
+      user-select: none
 
     .copy-notice
       position: absolute
diff --git a/source/css/_layout/404.styl b/source/css/_layout/404.styl
index ee0d698..e7cedcb 100644
--- a/source/css/_layout/404.styl
+++ b/source/css/_layout/404.styl
@@ -45,7 +45,8 @@ if hexo-config('error_404.enable')
         padding: .5rem
         text-align: center
         font-size: 14px
-        font-family: $site-name-font
+        if $site-name-font
+          font-family: $site-name-font
 
         +maxWidth768()
           flex: 1.1
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index ea93b5e..862a8b8 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -269,15 +269,11 @@
       position: fixed
       right: 45px
       bottom: 30px
-      z-index: 9999
+      z-index: 100
       display: none
       width: 300px
       transform-origin: right bottom
-      animation: toc-close .3s
-
-      &.open
-        display: block
-        animation: toc-open .3s
+      animation: toc-open .3s
 
       .toc-child
         display: block !important
@@ -327,7 +323,7 @@
 
 @keyframes toc-close
   0%
-    transform: scale(.7)
+    transform: scale(1)
 
   100%
-    transform: scale(1)
+    transform: scale(.7)
diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl
index 4f93edd..58fdc85 100644
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -130,19 +130,18 @@
       padding: 0 1.1rem
 
 #post-info
-  #post-title
+  .post-title
+    @extend .limit-more-line
     margin-bottom: .4rem
     font-size: 2.5em
+    font-weight: normal
+    color: var(--white)
+    line-height: 1.5
+    -webkit-line-clamp: 3
 
     +maxWidth768()
       font-size: 1.72em
 
-    .posttitle
-      @extend .limit-more-line
-      color: var(--white)
-      line-height: 1.5
-      -webkit-line-clamp: 3
-
   #post-meta
     color: var(--light-grey)
     font-size: 95%
@@ -189,7 +188,7 @@
   & > #post-info
     margin-bottom: 1.5rem
 
-    .posttitle
+    .post-title
       padding-bottom: .2rem
       border-bottom: 1px solid var(--light-grey)
       color: var(--text-highlight-color)
diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl
index 46b2482..44ba2c8 100644
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -36,5 +36,5 @@
   #mobile-toc-button
     display: none
 
-    +maxWidth1024()
+    +maxWidth900()
       display: block
diff --git a/source/css/var.styl b/source/css/var.styl
index ba88091..70328ef 100644
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -17,7 +17,7 @@ $dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica
 $dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
 $font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
 $code-font-family = hexo-config('font.code-font-family') ? unquote(hexo-config('font.code-font-family')) : $dafault-code-font
-$site-name-font = hexo-config('blog_title_font.font-family') ? unquote(hexo-config('blog_title_font.font-family')) : $font-family
+$site-name-font = hexo-config('blog_title_font.font-family') && unquote(hexo-config('blog_title_font.font-family'))
 // hr
 $hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable')
 $hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon') : '\f0c4'
diff --git a/source/js/main.js b/source/js/main.js
index 9b251cd..8a5e1e7 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -351,11 +351,14 @@ $(function () {
 
     const mobileToc = {
       open: () => {
-        $cardTocLayout.addClass('open')
+        $cardTocLayout.css('display', 'block')
       },
 
       close: () => {
-        $cardTocLayout.removeClass('open')
+        $cardTocLayout.css('animation', 'toc-close .2s')
+        setTimeout(() => {
+          $cardTocLayout.css({ display: '', animation: '' })
+        }, 100)
       }
     }
 
diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js
index c3f4b11..822607c 100644
--- a/source/js/search/algolia.js
+++ b/source/js/search/algolia.js
@@ -36,7 +36,7 @@ $(function () {
 
   searchClickFn()
 
-  window.addEventListener('pjax:send', function () {
+  window.addEventListener('pjax:complete', function () {
     closeSearch()
     searchClickFn()
   })
diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js
index 42ec4e4..088d54c 100644
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -47,7 +47,8 @@ $(function () {
   }
 
   searchClickFn()
-  window.addEventListener('pjax:send', function () {
+
+  window.addEventListener('pjax:complete', function () {
     $('#local-search').is(':visible') && closeSearch()
     searchClickFn()
   })

From 666637ce9915c53716d0005cd616fe6740282b12 Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Thu, 15 Oct 2020 14:39:51 +0800
Subject: [PATCH 04/11] =?UTF-8?q?fix:=20=E9=80=80=E5=9B=9E=E4=B9=8B?=
 =?UTF-8?q?=E5=89=8D=E7=9A=84inject=E5=AF=A6=E7=8F=BE,=E8=A7=A3=E6=B1=BA?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=80=E5=80=8B=E7=89=88=E6=9C=AC=E5=B0=8E=E8=87=B4?=
 =?UTF-8?q?=E7=84=A1=E6=B3=95=E6=8F=92=E5=85=A5inject=E7=9A=84bugs=20close?=
 =?UTF-8?q?=20#390?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/includes/additional-js.pug |  4 +++-
 layout/includes/head.pug          |  1 +
 package.json                      |  2 +-
 scripts/helpers/page.js           |  9 +++++++++
 scripts/injector/inject.js        | 22 ----------------------
 5 files changed, 14 insertions(+), 24 deletions(-)
 delete mode 100644 scripts/injector/inject.js

diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug
index 9e6c8bf..1b62c05 100644
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -55,10 +55,12 @@ div
     else if (!is_post() && page.aside !== false)
       !=partial('includes/third-party/newest-comments/index', {}, {cache:theme.fragment_cache})
 
+  !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
+
   !=partial('includes/third-party/effect', {}, {cache:theme.fragment_cache})
 
   !=partial('includes/third-party/chat/index', {}, {cache:theme.fragment_cache})
-
+  
   if theme.aplayerInject && theme.aplayerInject.enable
     if theme.pjax.enable || theme.aplayerInject.per_page
       include ./head/aplayer.pug
diff --git a/layout/includes/head.pug b/layout/includes/head.pug
index 62d0db5..cc5fff5 100644
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -81,3 +81,4 @@ include ./head/noscript.pug
 
 !=partial('includes/head/darkmode', {}, {cache:theme.fragment_cache})
 
+!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
\ No newline at end of file
diff --git a/package.json b/package.json
index 49010f2..ec6fef4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.3.0-b3",
+  "version": "3.3.0-b4",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js
index 270c166..fd44158 100644
--- a/scripts/helpers/page.js
+++ b/scripts/helpers/page.js
@@ -61,3 +61,12 @@ hexo.extend.helper.register('urlNoIndex', function () {
 hexo.extend.helper.register('md5', function (path) {
   return crypto.createHash('md5').update(decodeURI(this.url_for(path))).digest('hex')
 })
+
+hexo.extend.helper.register('injectHtml', function (data) {
+  let result = ''
+  if (!data) return ''
+  for (let i = 0; i < data.length; i++) {
+    result += data[i]
+  }
+  return result
+})
diff --git a/scripts/injector/inject.js b/scripts/injector/inject.js
deleted file mode 100644
index 069223e..0000000
--- a/scripts/injector/inject.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// Injector
-
-'use strict'
-
-hexo.extend.injector.register('head_end', function () {
-  const data = hexo.config.theme_config && hexo.config.theme_config.inject.head
-  return genResult(data)
-})
-
-hexo.extend.injector.register('body_end', () => {
-  const data = hexo.config.theme_config && hexo.config.theme_config.inject.bottom
-  return genResult(data)
-})
-
-function genResult (data) {
-  let result = ''
-  if (!data) return ''
-  for (let i = 0; i < data.length; i++) {
-    result += data[i]
-  }
-  return result
-}

From f7ba0a4b3652806312a889250520c94fb2114b38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E8=BF=87=E5=A2=83=E8=BF=81Wayne?=
 <3462757126@qq.com>
Date: Fri, 16 Oct 2020 20:50:46 +0800
Subject: [PATCH 05/11] =?UTF-8?q?SEO=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/includes/footer.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug
index 405c90c..501ebb9 100644
--- a/layout/includes/footer.pug
+++ b/layout/includes/footer.pug
@@ -19,5 +19,5 @@
     .icp
       a(href=theme.footer.ICP.url)
         if theme.footer.ICP.icon
-          img.icp-icon(src=url_for(theme.footer.ICP.icon))
+          img.icp-icon(src=url_for(theme.footer.ICP.icon) alt=('icp'))
         span=theme.footer.ICP.text

From b541a192d3179757418b15c41d13511d7119c84e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E8=BF=87=E5=A2=83=E8=BF=81Wayne?=
 <3462757126@qq.com>
Date: Sat, 17 Oct 2020 13:01:13 +0800
Subject: [PATCH 06/11] =?UTF-8?q?SEO=E4=BC=98=E5=8C=96=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/includes/footer.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug
index 501ebb9..30316ca 100644
--- a/layout/includes/footer.pug
+++ b/layout/includes/footer.pug
@@ -19,5 +19,5 @@
     .icp
       a(href=theme.footer.ICP.url)
         if theme.footer.ICP.icon
-          img.icp-icon(src=url_for(theme.footer.ICP.icon) alt=('icp'))
+          img.icp-icon(src=url_for(theme.footer.ICP.icon), alt='icp')
         span=theme.footer.ICP.text

From 918a1da4c5f14fc31db4ce4eb3847c39a864d991 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E8=BF=87=E5=A2=83=E8=BF=81Wayne?=
 <3462757126@qq.com>
Date: Sat, 17 Oct 2020 17:41:25 +0800
Subject: [PATCH 07/11] =?UTF-8?q?=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/includes/footer.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug
index 30316ca..5467bb3 100644
--- a/layout/includes/footer.pug
+++ b/layout/includes/footer.pug
@@ -19,5 +19,5 @@
     .icp
       a(href=theme.footer.ICP.url)
         if theme.footer.ICP.icon
-          img.icp-icon(src=url_for(theme.footer.ICP.icon), alt='icp')
+          img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='icp')
         span=theme.footer.ICP.text

From c54f23bc14ba94564a7f7e7e2b27afa6e14a70e8 Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Tue, 20 Oct 2020 21:05:58 +0800
Subject: [PATCH 08/11] =?UTF-8?q?fix:=20=E4=BF=AE=E5=BE=A9=E4=B8=8A?=
 =?UTF-8?q?=E5=80=8B=E7=89=88=E6=9C=AC=E5=B0=8E=E8=87=B4=E7=9A=84=E4=BB=A3?=
 =?UTF-8?q?=E7=A2=BC=E5=A1=8A=E9=83=A8=E5=88=86css=E6=B2=92=E6=9C=89?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E7=9A=84bugs=20fix:=20=E4=BF=AE=E5=BE=A9vali?=
 =?UTF-8?q?ne=E8=83=8C=E6=99=AF=E5=9C=96=E7=89=87=E5=86=8D=E6=AC=A1?=
 =?UTF-8?q?=E5=87=BA=E7=8F=BE=E6=99=82=EF=BC=8C=E7=94=B1=E5=B7=A6=E5=88=B0?=
 =?UTF-8?q?=E5=8F=B3=E7=A7=BB=E5=8B=95=E7=9A=84bugs=20improvement:=20?=
 =?UTF-8?q?=E8=AA=BF=E5=A4=A7sidebar=E7=9A=84=E5=AF=AC=E5=BA=A6=20improvem?=
 =?UTF-8?q?ent:=20html=E7=B5=90=E6=A7=8B=E8=AA=BF=E6=95=B4=EF=BC=8Cmobile-?=
 =?UTF-8?q?sidebar=E6=94=B9=E7=82=BAsidebar/search=E8=AA=BF=E6=95=B4=20rem?=
 =?UTF-8?q?ove:=20=E5=88=AA=E9=99=A4=E5=A4=9A=E9=A4=98=E7=9A=84css?=
 =?UTF-8?q?=E5=92=8Cpug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/404.pug                                |   1 -
 layout/includes/footer.pug                    |   4 +-
 layout/includes/layout.pug                    |   2 +-
 layout/includes/mobile-sidebar/index.pug      |   3 -
 .../includes/mobile-sidebar/mobile-menus.pug  |  29 ---
 layout/includes/rightside.pug                 |   2 +-
 layout/includes/sidebar.pug                   |  31 +++
 .../includes/third-party/search/algolia.pug   |  25 +-
 .../third-party/search/local-search.pug       |  47 ++--
 layout/includes/third-party/subtitle.pug      | 245 +++++++++---------
 layout/includes/widget/card_author.pug        |   6 +-
 package.json                                  |   2 +-
 scripts/events/{check.js => init.js}          |   6 +
 source/css/_global/function.styl              |   2 +-
 source/css/_global/index.styl                 |   1 -
 source/css/_highlight/highlight.styl          |   6 +-
 source/css/_highlight/highlight/index.styl    |   6 +-
 source/css/_highlight/prismjs/index.styl      |   2 +-
 source/css/_layout/aside.styl                 |   6 +-
 .../{mobile-sidebar.styl => sidebar.styl}     |  24 +-
 source/css/_layout/third-party.styl           |   2 +-
 source/css/_mode/darkmode.styl                |   3 +-
 source/css/_search/algolia.styl               | 127 ++++-----
 source/css/_search/local-search.styl          | 113 ++++----
 source/css/var.styl                           |  10 +-
 source/js/main.js                             |   6 +-
 source/js/search/algolia.js                   |   6 +-
 source/js/search/local-search.js              |   8 +-
 28 files changed, 364 insertions(+), 361 deletions(-)
 delete mode 100644 layout/includes/mobile-sidebar/index.pug
 delete mode 100644 layout/includes/mobile-sidebar/mobile-menus.pug
 create mode 100644 layout/includes/sidebar.pug
 rename scripts/events/{check.js => init.js} (75%)
 rename source/css/_layout/{mobile-sidebar.styl => sidebar.styl} (86%)

diff --git a/layout/404.pug b/layout/404.pug
index aaaa169..364b7cf 100644
--- a/layout/404.pug
+++ b/layout/404.pug
@@ -25,5 +25,4 @@ html(lang=config.language data-theme=theme.display_mode)
             i.fas.fa-rocket
             = _p('error404.back_button')
           
-    !=partial('includes/third-party/search/index', {}, {cache:theme.fragment_cache})
     include includes/additional-js.pug
diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug
index 5467bb3..fc612f9 100644
--- a/layout/includes/footer.pug
+++ b/layout/includes/footer.pug
@@ -14,10 +14,10 @@
       span= _p('footer.theme') + ' '
       a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
   if theme.footer.custom_text
-    .footer_custom_text!=`${theme.footer.custom_text}`   
+    .footer_custom_text!=`${theme.footer.custom_text}`
   if theme.footer.ICP.enable
     .icp
       a(href=theme.footer.ICP.url)
         if theme.footer.ICP.icon
-          img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='icp')
+          img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='ICP')
         span=theme.footer.ICP.text
diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug
index e40fa05..38c9bbf 100644
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -11,7 +11,7 @@ html(lang=config.language data-theme=theme.display_mode)
     if theme.background
       #web_bg
       
-    !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})
+    !=partial('includes/sidebar', {}, {cache:theme.fragment_cache})
 
     #body-wrap
       include ./header/index.pug
diff --git a/layout/includes/mobile-sidebar/index.pug b/layout/includes/mobile-sidebar/index.pug
deleted file mode 100644
index 511a77c..0000000
--- a/layout/includes/mobile-sidebar/index.pug
+++ /dev/null
@@ -1,3 +0,0 @@
-#mobile-sidebar
-  #menu_mask
-  include ../mobile-sidebar/mobile-menus.pug
\ No newline at end of file
diff --git a/layout/includes/mobile-sidebar/mobile-menus.pug b/layout/includes/mobile-sidebar/mobile-menus.pug
deleted file mode 100644
index 42a0bed..0000000
--- a/layout/includes/mobile-sidebar/mobile-menus.pug
+++ /dev/null
@@ -1,29 +0,0 @@
-#mobile-sidebar-menus
-  .mobile_author_icon
-    if theme.lazyload.enable
-      img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
-    else
-      img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
-  .mobile_post_data
-    if site.posts.length
-      .mobile_data_item.is-center
-        .mobile_data_link
-          a(href=url_for(config.archive_dir) + '/')
-            .headline= _p('aside.articles') 
-            .length_num= site.posts.length
-
-    if site.tags.length
-      .mobile_data_item.is-center       
-        .mobile_data_link
-          a(href=url_for(config.tag_dir) + '/' )
-            .headline= _p('aside.tags')
-            .length_num= site.tags.length
-
-    if site.categories.length
-      .mobile_data_item.is-center      
-        .mobile_data_link
-          a(href=url_for(config.category_dir) + '/')
-            .headline= _p('aside.categories') 
-            .length_num= site.categories.length
-  hr
-  !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})
diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug
index 323a22a..627bca6 100644
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -1,4 +1,4 @@
-section#rightside
+#rightside
   #rightside-config-hide
     if is_post() && theme.readmode
       button#readmode(type="button" title=_p('rightside.readmode_title'))
diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug
new file mode 100644
index 0000000..43c0b2c
--- /dev/null
+++ b/layout/includes/sidebar.pug
@@ -0,0 +1,31 @@
+#sidebar
+  #menu-mask
+  #sidebar-menus
+    .author-avatar
+      if theme.lazyload.enable
+        img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
+      else
+        img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
+    .site-data
+      if site.posts.length
+        .data-item.is-center
+          .data-item-link
+            a(href=url_for(config.archive_dir) + '/')
+              .headline= _p('aside.articles') 
+              .length-num= site.posts.length
+
+      if site.tags.length
+        .data-item.is-center
+          .data-item-link
+            a(href=url_for(config.tag_dir) + '/' )
+              .headline= _p('aside.tags')
+              .length-num= site.tags.length
+
+      if site.categories.length
+        .data-item.is-center
+          .data-item-link
+            a(href=url_for(config.category_dir) + '/')
+              .headline= _p('aside.categories') 
+              .length-num= site.categories.length
+    hr
+    !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})
diff --git a/layout/includes/third-party/search/algolia.pug b/layout/includes/third-party/search/algolia.pug
index 15cbb9d..6d22886 100644
--- a/layout/includes/third-party/search/algolia.pug
+++ b/layout/includes/third-party/search/algolia.pug
@@ -1,12 +1,13 @@
-#algolia-search.search-dialog
-  #algolia-search-title.search-dialog__title Algolia
-  #algolia-input-panel
-    #algolia-search-input
-  hr
-  #algolia-search-results
-    #algolia-hits
-    #algolia-pagination
-    #algolia-stats
-  span.search-close-button
-    i.fas.fa-times
-#search-mask
+#algolia-search
+  .search-dialog
+    #algolia-search-title.search-dialog__title Algolia
+    #algolia-input-panel
+      #algolia-search-input
+    hr
+    #algolia-search-results
+      #algolia-hits
+      #algolia-pagination
+      #algolia-stats
+    span.search-close-button
+      i.fas.fa-times
+  #search-mask
diff --git a/layout/includes/third-party/search/local-search.pug b/layout/includes/third-party/search/local-search.pug
index 545d775..69570a2 100644
--- a/layout/includes/third-party/search/local-search.pug
+++ b/layout/includes/third-party/search/local-search.pug
@@ -1,23 +1,24 @@
-#local-search.search-dialog
-  #local-search-title.search-dialog__title=_p("local_search.label")
-  #local-input-panel
-    #local-search-input
-      .local-search-box
-        input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input
-  hr
-  #local-search-results
-    #local-hits
-    #local-stats
-      #hr.local-search-stats__hr
-        case config.language
-          when "zh-CN"
-            span=_p("local_search.by")
-            |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
-            |  #[span=_p("local_search.powered")]
-          when "en"
-          default
-            span=_p("local_search.powered_by")
-            |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
-  span.search-close-button
-    i.fas.fa-times
-#search-mask
\ No newline at end of file
+#local-search
+  .search-dialog
+    #local-search-title.search-dialog__title=_p("local_search.label")
+    #local-input-panel
+      #local-search-input
+        .local-search-box
+          input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input
+    hr
+    #local-search-results
+      #local-hits
+      #local-stats
+        #hr.local-search-stats__hr
+          case config.language
+            when "zh-CN"
+              span=_p("local_search.by")
+              |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
+              |  #[span=_p("local_search.powered")]
+            when "en"
+            default
+              span=_p("local_search.powered_by")
+              |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
+    span.search-close-button
+      i.fas.fa-times
+  #search-mask
\ No newline at end of file
diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug
index 05b95fc..ad995cc 100644
--- a/layout/includes/third-party/subtitle.pug
+++ b/layout/includes/third-party/subtitle.pug
@@ -1,97 +1,40 @@
 - var source = theme.subtitle.source
-if source == '1'
-  script.
-    function subtitleType () {
-      $.getJSON('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',function (data) {
-        if (!{theme.subtitle.effect}) {
-          var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-          var both = sub.unshift(data.text)
-          typed = new Typed('#subtitle', {
-            strings: sub,
-            startDelay: 300,
-            typeSpeed: 150,
-            loop: !{theme.subtitle.loop},
-            backSpeed: 50,
-          })
-        } else {
-          document.getElementById('subtitle').innerHTML = data.text
-        }
-      })
-    }
-
-    if (!{theme.subtitle.effect}) {
-      if (typeof Typed === 'function') subtitleType()
-      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
-    } else {
-      subtitleType()
-    }
-
-else if source == '2'
-  script.
-    function subtitleType () {
-      $.getJSON('https://v1.hitokoto.cn', function (data) {
-        if (!{theme.subtitle.effect}) {
-          var from = '出自 ' + data.from
-          var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-          var both = sub.unshift(data.hitokoto, from)
-          var typed = new Typed('#subtitle', {
-            strings: sub,
-            startDelay: 300,
-            typeSpeed: 150,
-            loop: !{theme.subtitle.loop},
-            backSpeed: 50,
-          })
-        } else {
-          document.getElementById('subtitle').innerHTML = data.hitokoto
-        }
-      })
-    }
-
-    if (!{theme.subtitle.effect}) {
-      if (typeof Typed === 'function') subtitleType()
-      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
-    } else {
-      subtitleType()
-    }
-
-else if source == '3'
-  script.
-    function subtitleType () {
-      $.getScript('http://yijuzhan.com/api/word.php?m=js', function () {
-        var con = str[0]
-        if (!{theme.subtitle.effect}) {
-          var from = '出自 ' + str[1]
-          var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-          var both = sub.unshift(con, from)
-          var typed = new Typed('#subtitle', {
-            strings: sub,
-            startDelay: 300,
-            typeSpeed: 150,
-            loop: !{theme.subtitle.loop},
-            backSpeed: 50,
-          })
-        } else {
-          document.getElementById('subtitle').innerHTML = con
-        }
-      })
-    }
-
-    if (!{theme.subtitle.effect}) {
-      if (typeof Typed === 'function') subtitleType()
-      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
-    } else {
-      subtitleType()
-    }
-
-else if source == '4'
-  script.
-    function subtitleType () {
-      $.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
-        jinrishici.load(function (result) {
+case source
+  when 1
+    script.
+      function subtitleType () {
+        $.getJSON('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',function (data) {
           if (!{theme.subtitle.effect}) {
             var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-            var content = result.data.content
-            var both = sub.unshift(content)
+            var both = sub.unshift(data.text)
+            typed = new Typed('#subtitle', {
+              strings: sub,
+              startDelay: 300,
+              typeSpeed: 150,
+              loop: !{theme.subtitle.loop},
+              backSpeed: 50,
+            })
+          } else {
+            document.getElementById('subtitle').innerHTML = data.text
+          }
+        })
+      }
+
+      if (!{theme.subtitle.effect}) {
+        if (typeof Typed === 'function') subtitleType()
+        else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+      } else {
+        subtitleType()
+      }
+
+  when 2
+    script.
+      function subtitleType () {
+        $.getJSON('https://v1.hitokoto.cn', function (data) {
+          if (!{theme.subtitle.effect}) {
+            var from = '出自 ' + data.from
+            var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+            var both = sub.unshift(data.hitokoto, from)
             var typed = new Typed('#subtitle', {
               strings: sub,
               startDelay: 300,
@@ -100,38 +43,96 @@ else if source == '4'
               backSpeed: 50,
             })
           } else {
-            document.getElementById('subtitle').innerHTML = result.data.content
+            document.getElementById('subtitle').innerHTML = data.hitokoto
           }
         })
-      })
-    }
-
-    if (!{theme.subtitle.effect}) {
-      if (typeof Typed === 'function') subtitleType()
-      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
-    } else {
-      subtitleType()
-    }
-
-else
-  script.
-    function subtitleType () {
-      if (!{theme.subtitle.effect}) { 
-        var typed = new Typed("#subtitle", {
-          strings: "!{theme.subtitle.sub}".split(","),
-          startDelay: 300,
-          typeSpeed: 150,
-          loop: !{theme.subtitle.loop},
-          backSpeed: 50
-        })
-      } else {
-        document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
       }
-    }
 
-    if (!{theme.subtitle.effect}) {
-      if (typeof Typed === 'function') subtitleType()
-      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
-    } else {
-      subtitleType()
-    }
\ No newline at end of file
+      if (!{theme.subtitle.effect}) {
+        if (typeof Typed === 'function') subtitleType()
+        else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+      } else {
+        subtitleType()
+      }
+
+  when 3
+    script.
+      function subtitleType () {
+        $.getScript('http://yijuzhan.com/api/word.php?m=js', function () {
+          var con = str[0]
+          if (!{theme.subtitle.effect}) {
+            var from = '出自 ' + str[1]
+            var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+            var both = sub.unshift(con, from)
+            var typed = new Typed('#subtitle', {
+              strings: sub,
+              startDelay: 300,
+              typeSpeed: 150,
+              loop: !{theme.subtitle.loop},
+              backSpeed: 50,
+            })
+          } else {
+            document.getElementById('subtitle').innerHTML = con
+          }
+        })
+      }
+
+      if (!{theme.subtitle.effect}) {
+        if (typeof Typed === 'function') subtitleType()
+        else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+      } else {
+        subtitleType()
+      }
+
+  when 4
+    script.
+      function subtitleType () {
+        $.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
+          jinrishici.load(function (result) {
+            if (!{theme.subtitle.effect}) {
+              var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+              var content = result.data.content
+              var both = sub.unshift(content)
+              var typed = new Typed('#subtitle', {
+                strings: sub,
+                startDelay: 300,
+                typeSpeed: 150,
+                loop: !{theme.subtitle.loop},
+                backSpeed: 50,
+              })
+            } else {
+              document.getElementById('subtitle').innerHTML = result.data.content
+            }
+          })
+        })
+      }
+
+      if (!{theme.subtitle.effect}) {
+        if (typeof Typed === 'function') subtitleType()
+        else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+      } else {
+        subtitleType()
+      }
+
+  default
+    script.
+      function subtitleType () {
+        if (!{theme.subtitle.effect}) { 
+          var typed = new Typed("#subtitle", {
+            strings: "!{theme.subtitle.sub}".split(","),
+            startDelay: 300,
+            typeSpeed: 150,
+            loop: !{theme.subtitle.loop},
+            backSpeed: 50
+          })
+        } else {
+          document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
+        }
+      }
+
+      if (!{theme.subtitle.effect}) {
+        if (typeof Typed === 'function') subtitleType()
+        else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+      } else {
+        subtitleType()
+      }
\ No newline at end of file
diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug
index 5b1c8e4..b1faefb 100644
--- a/layout/includes/widget/card_author.pug
+++ b/layout/includes/widget/card_author.pug
@@ -13,19 +13,19 @@
         .card-info-data-item.is-center
           a(href=url_for(config.archive_dir) + '/')
             .headline= _p('aside.articles') 
-            .length_num= site.posts.length
+            .length-num= site.posts.length
 
       if site.tags.length
         .card-info-data-item.is-center
           a(href=url_for(config.tag_dir) + '/')
             .headline= _p('aside.tags')
-            .length_num= site.tags.length
+            .length-num= site.tags.length
 
       if site.categories.length
         .card-info-data-item.is-center
           a(href=url_for(config.category_dir) + '/')
             .headline= _p('aside.categories') 
-            .length_num= site.categories.length
+            .length-num= site.categories.length
 
     a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
       i(class=theme.aside.card_author.button.icon)
diff --git a/package.json b/package.json
index ec6fef4..63109cf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.3.0-b4",
+  "version": "3.3.0-b5",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/scripts/events/check.js b/scripts/events/init.js
similarity index 75%
rename from scripts/events/check.js
rename to scripts/events/init.js
index 33cfae8..c198e9e 100644
--- a/scripts/events/check.js
+++ b/scripts/events/init.js
@@ -18,4 +18,10 @@ hexo.extend.filter.register('before_generate', () => {
       process.exit(-1)
     }
   }
+
+  // let stylus to get the hexo highlight config
+  const themeConfig = hexo.theme.config
+  const hexoConfig = hexo.config
+  themeConfig.highlight_settings = hexoConfig.highlight
+  themeConfig.prismjs_settings = hexoConfig.prismjs
 })
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
index 5c9bdde..1ba495d 100644
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -68,7 +68,7 @@ if hexo-config('enter_transitions')
   #ribbon-canvas
     animation: ribbon_to_show 4s
 
-  #mobile-sidebar-menus
+  #sidebar-menus
     &.open
       for i in 1 2 3 4
         > :nth-child({i})
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index c2b1db0..fcecdb8 100644
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -25,7 +25,6 @@
   --blockquote-color: $blockquote-color
   --blockquote-bg: $blockquote-background-color
   --reward-pop: $reward-pop-up-bg
-  --sidebar-icon-color: $sidebar-icon-color
   --toc-link-color: $toc-link-color
 
 html
diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl
index 4f0390f..fccfaca 100644
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -1,8 +1,8 @@
 // https://github.com/equinusocio/vsc-material-theme
 $highlight_theme = hexo-config('highlight_theme')
-$highlighEnable = hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
-$prismjsEnable = hexo-config('rootConfig.prismjs') && hexo-config('rootConfig.prismjs.enable')
-wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
+$highlighEnable = hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
+$prismjsEnable = hexo-config('prismjs_settings') && hexo-config('prismjs_settings.enable')
+wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_word_wrap')
 
 @require 'theme'
 
diff --git a/source/css/_highlight/highlight/index.styl b/source/css/_highlight/highlight/index.styl
index 4239174..9c3d4f9 100644
--- a/source/css/_highlight/highlight/index.styl
+++ b/source/css/_highlight/highlight/index.styl
@@ -22,9 +22,9 @@ if $highlight_theme != false
       overflow: auto
       border: none
 
-    td
-      padding: 0
-      border: none
+      td
+        padding: 0
+        border: none
 
     .gutter pre
       padding-right: .5rem
diff --git a/source/css/_highlight/prismjs/index.styl b/source/css/_highlight/prismjs/index.styl
index 17e52df..5ac7f4f 100644
--- a/source/css/_highlight/prismjs/index.styl
+++ b/source/css/_highlight/prismjs/index.styl
@@ -1,4 +1,4 @@
-if hexo-fonfig('rootConfig.prismjs.line_number')
+if hexo-fonfig('prismjs_settings.line_number')
   @require 'line-number'
 
 if $highlight_theme != false
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 862a8b8..4144b37 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -65,7 +65,7 @@
             color: var(--font-color)
             font-size: 1em
 
-          .length_num
+          .length-num
             margin-top: -.3rem
             color: var(--text-highlight-color)
             font-size: 1.4em
@@ -271,7 +271,7 @@
       bottom: 30px
       z-index: 100
       display: none
-      width: 300px
+      width: $toc-mobile-width
       transform-origin: right bottom
       animation: toc-open .3s
 
@@ -303,7 +303,7 @@
         &.active
           border-left-color: darken($theme-toc-color, 20%)
           background: $theme-toc-color
-          color: $sidebar-active-color
+          color: $toc-active-color
 
       &:before
         position: absolute
diff --git a/source/css/_layout/mobile-sidebar.styl b/source/css/_layout/sidebar.styl
similarity index 86%
rename from source/css/_layout/mobile-sidebar.styl
rename to source/css/_layout/sidebar.styl
index 57a40eb..fa9c68e 100644
--- a/source/css/_layout/mobile-sidebar.styl
+++ b/source/css/_layout/sidebar.styl
@@ -1,5 +1,5 @@
-#mobile-sidebar
-  #menu_mask
+#sidebar
+  #menu-mask
     position: fixed
     z-index: 102
     display: none
@@ -7,14 +7,14 @@
     height: 100%
     background: alpha($dark-black, .8)
 
-  #mobile-sidebar-menus
+  #sidebar-menus
     position: fixed
     top: 0
-    right: -250px
+    right: -($sidebar-width)
     z-index: 103
     overflow-x: hidden
     overflow-y: auto
-    width: 250px
+    width: $sidebar-width
     height: 100%
     background: var(--sidebar-bg)
     transition: all .5s
@@ -22,7 +22,7 @@
     &.open
       transform: translate3d(-100%, 0, 0)
 
-    & > .mobile_author_icon
+    & > .author-avatar
       padding: 1.3rem 1.5rem 0
       text-align: center
 
@@ -35,20 +35,20 @@
         &:hover
           transform: rotate(360deg)
 
-    .mobile_post_data
+    .site-data
       display: table
       padding: .6rem .5rem 0
       width: 100%
       table-layout: fixed
 
-      .mobile_data_item
+      .data-item
         display: table-cell
 
-        .mobile_data_link
+        .data-item-link
           & > a > div
             @extend .limit-one-line
 
-          .length_num
+          .length-num
             color: var(--text-highlight-color)
             font-size: 1.28em
 
@@ -71,11 +71,11 @@
         cursor: pointer
 
         i:first-child
-          width: 30%
+          width: 25%
           text-align: left
 
         span
-          width: 70%
+          width: 75%
 
           &:hover
             color: $light-blue
diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl
index 7d39528..3ffd4aa 100644
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -14,7 +14,7 @@
       background: url(hexo-config('valine.bg')) 100% 100% no-repeat
 
       &:focus
-        background: none
+        background-image: none
 
   .vimg
     transition: all .3s
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
index 14df968..4cd72a5 100644
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -26,7 +26,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --blockquote-color: alpha(#FFFFFF, .7)
     --blockquote-bg: lighten(#121212, 10)
     --reward-pop: lighten(#121212, 10)
-    --sidebar-icon-color: alpha(#FFFFFF, .7)
     --toc-link-color: alpha(#FFFFFF, .6)
 
     #web_bg:before,
@@ -69,7 +68,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       figure.highlight
         box-shadow: none
 
-        if hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
+        if hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
           table::-webkit-scrollbar-thumb
             background: lighten(#121212, 5)
 
diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl
index 0f9c287..55ac8c4 100644
--- a/source/css/_search/algolia.styl
+++ b/source/css/_search/algolia.styl
@@ -1,76 +1,77 @@
 #algolia-search
-  animation: titlescale .5s
+  .search-dialog
+    animation: titlescale .5s
 
-  .ais-search-box
-    margin: 0 auto
-    max-width: 100%
-    width: 100%
+    .ais-search-box
+      margin: 0 auto
+      max-width: 100%
+      width: 100%
 
-    input
-      padding: .25rem .7rem
-      outline: none
-      border: 2px solid $search-color
-      border-radius: 2rem
-      background: var(--search-bg)
-      color: var(--search-input-color)
+      input
+        padding: .25rem .7rem
+        outline: none
+        border: 2px solid $search-color
+        border-radius: 2rem
+        background: var(--search-bg)
+        color: var(--search-input-color)
 
-  .ais-hits--item.algolia-hit-item
-    position: relative
-    padding-left: 1.2rem
-
-    &:hover
-      &:before
-        border-color: $pseudo-hover
-
-    &:before
-      $w = .5em
-      position: absolute
-      top: .53em
-      left: 0
-      width: w = $w
-      height: h = w
-      border: .15rem solid $search-color
-      border-radius: w
-      background: transparent
-      content: ''
-      line-height: h
-      transition: all .2s ease-in-out
-
-    a
-      display: block
-      color: var(--search-result-title)
-      cursor: pointer
+    .ais-hits--item.algolia-hit-item
+      position: relative
+      padding-left: 1.2rem
 
       &:hover
-        color: $search-color
+        &:before
+          border-color: $pseudo-hover
 
-    em
-      color: $search-keyword-highlight
-      font-weight: bold
+      &:before
+        $w = .5em
+        position: absolute
+        top: .53em
+        left: 0
+        width: w = $w
+        height: h = w
+        border: .15rem solid $search-color
+        border-radius: w
+        background: transparent
+        content: ''
+        line-height: h
+        transition: all .2s ease-in-out
 
-  .ais-pagination.pagination
-    margin: .8rem 0 0
-    padding: 0
-    text-align: center
+      a
+        display: block
+        color: var(--search-result-title)
+        cursor: pointer
 
-    .ais-pagination--item
-      margin: 0 .2rem
+        &:hover
+          color: $search-color
+
+      em
+        color: $search-keyword-highlight
+        font-weight: bold
+
+    .ais-pagination.pagination
+      margin: .8rem 0 0
       padding: 0
+      text-align: center
 
-      a
-        display: inline-block
-        min-width: 1.2rem
-        height: 1.2rem
-        text-align: center
-        line-height: 1.2rem
+      .ais-pagination--item
+        margin: 0 .2rem
+        padding: 0
 
-    .ais-pagination--item.current
-      a
-        background: $theme-paginator-color
-        color: #eee
-        cursor: default
+        a
+          display: inline-block
+          min-width: 1.2rem
+          height: 1.2rem
+          text-align: center
+          line-height: 1.2rem
 
-  .algolia-logo
-    padding-top: 2px
-    width: 4rem
-    height: 1.5rem
\ No newline at end of file
+      .ais-pagination--item.current
+        a
+          background: $theme-paginator-color
+          color: #eee
+          cursor: default
+
+    .algolia-logo
+      padding-top: 2px
+      width: 4rem
+      height: 1.5rem
\ No newline at end of file
diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl
index 85462a5..8f9fe95 100644
--- a/source/css/_search/local-search.styl
+++ b/source/css/_search/local-search.styl
@@ -1,68 +1,69 @@
 #local-search
-  animation: titlescale .5s
+  .search-dialog
+    animation: titlescale .5s
 
-  .local-search-box
-    margin: 0 auto
-    max-width: 100%
-    width: 100%
-
-    input
-      padding: .25rem .7rem
+    .local-search-box
+      margin: 0 auto
+      max-width: 100%
       width: 100%
-      outline: none
-      border: 2px solid $search-color
-      border-radius: 2rem
-      background: var(--search-bg)
-      color: var(--search-input-color)
-      -webkit-appearance: none
 
-  .local-search__hit-item
-    position: relative
-    padding-left: 1.2rem
-    line-height: 1.7
+      input
+        padding: .25rem .7rem
+        width: 100%
+        outline: none
+        border: 2px solid $search-color
+        border-radius: 2rem
+        background: var(--search-bg)
+        color: var(--search-input-color)
+        -webkit-appearance: none
 
-    &:hover
-      &:before
-        border-color: $pseudo-hover
-
-    &:before
-      $w = .5em
-      position: absolute
-      top: .45em
-      left: 0
-      width: w = $w
-      height: h = w
-      border: .15rem solid $search-color
-      border-radius: w
-      background: transparent
-      content: ''
-      line-height: h
-      transition: all .2s ease-in-out
-
-    a
-      display: block
-      color: var(--search-result-title)
-      font-weight: 600
-      cursor: pointer
+    .local-search__hit-item
+      position: relative
+      padding-left: 1.2rem
+      line-height: 1.7
 
       &:hover
-        color: $search-color
+        &:before
+          border-color: $pseudo-hover
 
-    .search-result
-      margin: 0 0 .4rem
-      word-break: break-all
+      &:before
+        $w = .5em
+        position: absolute
+        top: .45em
+        left: 0
+        width: w = $w
+        height: h = w
+        border: .15rem solid $search-color
+        border-radius: w
+        background: transparent
+        content: ''
+        line-height: h
+        transition: all .2s ease-in-out
 
-    .search-keyword
-      color: $search-keyword-highlight
-      font-weight: bold
+      a
+        display: block
+        color: var(--search-result-title)
+        font-weight: 600
+        cursor: pointer
 
-  .local-search-stats__hr
-    display: none !important
+        &:hover
+          color: $search-color
 
-  .search-result-list
-    overflow-y: auto
-    max-height: 10.5rem
+      .search-result
+        margin: 0 0 .4rem
+        word-break: break-all
 
-    +maxWidth768()
-      padding-bottom: 2rem
-      max-height: 75vh !important
+      .search-keyword
+        color: $search-keyword-highlight
+        font-weight: bold
+
+    .local-search-stats__hr
+      display: none !important
+
+    .search-result-list
+      overflow-y: auto
+      max-height: 10.5rem
+
+      +maxWidth768()
+        padding-bottom: 2rem
+        max-height: 75vh !important
diff --git a/source/css/var.styl b/source/css/var.styl
index 70328ef..f3f0267 100644
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -58,16 +58,12 @@ $a-link-color = #99a9bf
 $sticky-color = $light-orange
 $theme-meta-color = $themeColorEnable && hexo-config('theme_color.meta_color') ? convert(hexo-config('theme_color.meta_color')) : #858585
 // sidebar
-$sidebar-icon-top = 20px
-$sidebar-icon-left = $sidebar-icon-top - 4px
-$sidebar-icon-size = 16px
-$sidebar-icon-color = #1F2D3D
-$sidebar-width = 300px
 $sidebar-background = #f6f8fa
-$sidebar-active-color = #fff
-$mobile-sidebar-width = 250px
+$sidebar-width = 300px
 // aside
 $toc-link-color = #666261
+$toc-mobile-width = 300px
+$toc-active-color = #fff
 // Button
 $button-color = #fff
 $button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
diff --git a/source/js/main.js b/source/js/main.js
index 8a5e1e7..c8c4e4b 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -24,8 +24,8 @@ $(function () {
   // sidebar menus
   const sidebarFn = () => {
     const $toggleMenu = $('#toggle-menu')
-    const $mobileSidebarMenus = $('#mobile-sidebar-menus')
-    const $menuMask = $('#menu_mask')
+    const $mobileSidebarMenus = $('#sidebar-menus')
+    const $menuMask = $('#menu-mask')
     const $body = $('body')
 
     function openMobileSidebar () {
@@ -489,7 +489,7 @@ $(function () {
  * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
  */
   const clickFnOfSubMenu = function () {
-    $('#mobile-sidebar-menus .expand').on('click', function () {
+    $('#sidebar-menus .expand').on('click', function () {
       $(this).parents('.menus_item').find('> .menus_item_child').slideToggle()
       $(this).toggleClass('hide')
     })
diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js
index 822607c..00fe0a0 100644
--- a/source/js/search/algolia.js
+++ b/source/js/search/algolia.js
@@ -1,7 +1,7 @@
 $(function () {
   const openSearch = () => {
     $('body').css({ width: '100%', overflow: 'hidden' })
-    $('#algolia-search').css('display', 'block')
+    $('#algolia-search .search-dialog').css('display', 'block')
     $('.ais-search-box--input').focus()
     $('#search-mask').fadeIn()
     // shortcut: ESC
@@ -15,12 +15,12 @@ $(function () {
 
   const closeSearch = () => {
     $('body').css({ width: '', overflow: '' })
-    $('#algolia-search').css({
+    $('#algolia-search .search-dialog').css({
       animation: 'search_close .5s'
     })
 
     setTimeout(function () {
-      $('#algolia-search').css({
+      $('#algolia-search .search-dialog').css({
         animation: '',
         display: 'none'
       })
diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js
index 088d54c..721ddc3 100644
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -5,7 +5,7 @@ $(function () {
       width: '100%',
       overflow: 'hidden'
     })
-    $('#local-search').css('display', 'block')
+    $('#local-search .search-dialog').css('display', 'block')
     $('#local-search-input input').focus()
     $('#search-mask').fadeIn()
     if (!loadFlag) {
@@ -27,12 +27,12 @@ $(function () {
       width: '',
       overflow: ''
     })
-    $('#local-search').css({
+    $('#local-search .search-dialog').css({
       animation: 'search_close .5s'
     })
 
     setTimeout(function () {
-      $('#local-search').css({
+      $('#local-search .search-dialog').css({
         animation: '',
         display: 'none'
       })
@@ -49,7 +49,7 @@ $(function () {
   searchClickFn()
 
   window.addEventListener('pjax:complete', function () {
-    $('#local-search').is(':visible') && closeSearch()
+    $('#local-search .search-dialog').is(':visible') && closeSearch()
     searchClickFn()
   })
 

From 6b35388f33102ad512543ef800a1646c52d399f1 Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Wed, 21 Oct 2020 21:54:14 +0800
Subject: [PATCH 09/11] =?UTF-8?q?feat:=20aside=20=E5=8F=AF=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=9A=90=E8=97=8F/=E5=A2=9E=E5=8A=A0=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=8F=AF=E5=B1=95=E5=BC=80=E6=88=96=E6=94=B6=E7=BC=A9?=
 =?UTF-8?q?aside?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                       |  2 ++
 layout/includes/layout.pug        |  3 ++-
 layout/includes/rightside.pug     |  4 ++++
 package.json                      |  2 +-
 source/css/_layout/aside.styl     | 11 +++++++++++
 source/css/_layout/rightside.styl |  4 ++++
 source/css/_page/common.styl      |  2 +-
 source/js/main.js                 |  5 +++++
 8 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/_config.yml b/_config.yml
index f1aedd4..7f9d3e3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -600,6 +600,8 @@ preloader: false
 
 aside:
   enable: true
+  hide: false
+  button: true
   mobile: true # display on mobile
   position: right # left or right
   card_author:
diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug
index 38c9bbf..e3a5b8c 100644
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -1,7 +1,8 @@
+- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
 
 doctype html
-html(lang=config.language data-theme=theme.display_mode)
+html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
   head
     include ./head.pug
   body
diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug
index 627bca6..2762162 100644
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -23,6 +23,10 @@
       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
diff --git a/package.json b/package.json
index 63109cf..ab533b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.3.0-b5",
+  "version": "3.3.0-b6",
   "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 4144b37..9a70f7a 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -327,3 +327,14 @@
 
   100%
     transform: scale(.7)
+
++minWidth900()
+  html.hide-aside
+    .layout
+      justify-content: center
+
+      > div:last-child
+        display: none
+
+      > div:first-child
+        width: 80%
\ No newline at end of file
diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl
index 44ba2c8..2b1f0b7 100644
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -38,3 +38,7 @@
 
     +maxWidth900()
       display: block
+
+  +maxWidth900()
+    #hide-aside-btn
+      display: none
diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl
index ced0cac..d28abdd 100644
--- a/source/css/_page/common.styl
+++ b/source/css/_page/common.styl
@@ -19,7 +19,6 @@
     border-radius: 8px
     background: var(--card-bg)
     box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
-    transition: all .3s
 
     &:hover
       box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
@@ -29,6 +28,7 @@
 
   & > div:first-child
     width: 75%
+    transition: all .3s
 
     +maxWidth900()
       width: 100% !important
diff --git a/source/js/main.js b/source/js/main.js
index c8c4e4b..08ae542 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -483,6 +483,11 @@ $(function () {
   // Back to top
   $rightsideEle.on('click', '#go-up', () => btf.scrollToDest('body'))
 
+  $rightsideEle.on('click', '#hide-aside-btn', () => {
+    const $htmlDom = $(document.documentElement)
+    $htmlDom.hasClass('hide-aside') ? $htmlDom.removeClass('hide-aside') : $htmlDom.addClass('hide-aside')
+  })
+
   /**
  * menu
  * 側邊欄sub-menu 展開/收縮

From d2f5af32aee07bae6963f7d1bf538e1b0c84bda0 Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Tue, 27 Oct 2020 22:14:47 +0800
Subject: [PATCH 10/11] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0Twikoo=E8=A9=95?=
 =?UTF-8?q?=E8=AB=96=20#402=20improvement:=20=E6=BB=BE=E5=8B=95=E5=88=B0?=
 =?UTF-8?q?=E8=A9=95=E8=AB=96=E6=8C=89=E9=88=95=E5=8F=AA=E8=A6=81=E7=94=A8?=
 =?UTF-8?q?=E8=A9=95=E8=AB=96=E7=9A=84=E9=A0=81=E9=9D=A2=E5=B0=B1=E5=87=BA?=
 =?UTF-8?q?=E7=8F=BE=20improvement:=20aside=E7=8B=80=E6=85=8B=E5=AD=98loca?=
 =?UTF-8?q?lstore=20fix:=20=E4=BF=AE=E5=BE=A9disqusjs=E6=B2=92=E6=9C=89?=
 =?UTF-8?q?=E8=A8=AD=E7=BD=AEapi=E6=99=82=EF=BC=8C=E6=B2=92=E6=9C=89?=
 =?UTF-8?q?=E5=8F=8D=E4=BB=A3=E7=9A=84bugs=20fix:=20=E4=BF=AE=E5=BE=A9asid?=
 =?UTF-8?q?e=E5=9C=A8font-matter=20aside=E7=82=BAfalse=E6=99=82=EF=BC=8C?=
 =?UTF-8?q?=E6=94=B6=E7=B8=AE=E6=8C=89=E9=88=95=E4=BE=9D=E8=88=8A=E5=87=BA?=
 =?UTF-8?q?=E7=8F=BE=E5=92=8C=E9=BB=9E=E6=93=8A=E6=8C=89=E9=88=95=E6=9C=83?=
 =?UTF-8?q?=E5=87=BA=E7=8F=BE=E7=A9=BA=E7=99=BD=E7=9A=84bugs=20#398?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                                   |   5 +
 layout/includes/additional-js.pug             |   4 +-
 layout/includes/head/darkmode.pug             | 112 ++++++++++--------
 layout/includes/rightside.pug                 |  14 +--
 .../{head => third-party}/aplayer.pug         |   0
 .../third-party/comments/disqusjs.pug         |   3 +-
 .../includes/third-party/comments/index.pug   |   8 +-
 layout/includes/third-party/comments/js.pug   |   2 +
 .../includes/third-party/comments/twikoo.pug  |  24 ++++
 package.json                                  |   2 +-
 source/css/_layout/aside.styl                 |   2 +-
 source/css/_layout/comments.styl              |  48 +++-----
 source/css/_mode/darkmode.styl                |   4 +-
 source/js/main.js                             |  12 +-
 14 files changed, 139 insertions(+), 101 deletions(-)
 rename layout/includes/{head => third-party}/aplayer.pug (100%)
 create mode 100644 layout/includes/third-party/comments/twikoo.pug

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')) {

From b230c8f2bd12b2a811b75316559fb97afe90e5f8 Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Wed, 28 Oct 2020 14:36:03 +0800
Subject: [PATCH 11/11] =?UTF-8?q?label:=203.3.0=20=E7=99=BC=E4=BD=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     | 4 +---
 README_CN.md                                  | 4 +---
 _config.yml                                   | 2 +-
 layout/includes/head.pug                      | 2 +-
 layout/includes/head/{darkmode.pug => js.pug} | 0
 package.json                                  | 2 +-
 6 files changed, 5 insertions(+), 9 deletions(-)
 rename layout/includes/head/{darkmode.pug => js.pug} (100%)

diff --git a/README.md b/README.md
index 3c590d4..0aa28f6 100644
--- a/README.md
+++ b/README.md
@@ -93,6 +93,4 @@ npm i hexo-theme-butterfly
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-1.png)
 
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png)
-
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-post.png)
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png)
\ No newline at end of file
diff --git a/README_CN.md b/README_CN.md
index 1dbdc37..49ea57f 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -93,6 +93,4 @@ theme: butterfly
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-1.png)
 
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png)
-
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-post.png)
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png)
\ No newline at end of file
diff --git a/_config.yml b/_config.yml
index da85bca..46eba27 100644
--- a/_config.yml
+++ b/_config.yml
@@ -819,7 +819,7 @@ fragment_cache: true
 # 插入代码到头部 </head> 之前 和 底部 </body> 之前
 inject:
   head:
-  # - <link rel="stylesheet" href="/xxx.css">
+    # - <link rel="stylesheet" href="/xxx.css">
   bottom:
     # - <script src="xxxx"></script>
 
diff --git a/layout/includes/head.pug b/layout/includes/head.pug
index cc5fff5..ec8a57a 100644
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -79,6 +79,6 @@ if theme.blog_title_font &&　theme.blog_title_font.font_link
 include ./head/config_site.pug
 include ./head/noscript.pug
 
-!=partial('includes/head/darkmode', {}, {cache:theme.fragment_cache})
+!=partial('includes/head/js', {}, {cache:theme.fragment_cache})
 
 !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
\ No newline at end of file
diff --git a/layout/includes/head/darkmode.pug b/layout/includes/head/js.pug
similarity index 100%
rename from layout/includes/head/darkmode.pug
rename to layout/includes/head/js.pug
diff --git a/package.json b/package.json
index 37ab187..180092b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.3.0-b7",
+  "version": "3.3.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {