Merge branch 'dev' into master

label: 3.3.0 發佈
feat: 增加Twikoo評論 #402
2026-04-16 20:30:53 +08:00 · 2020-10-28 14:37:18 +08:00 · 2020-10-28 14:36:03 +08:00 · 2020-10-27 22:14:47 +08:00 · 2020-10-21 21:54:14 +08:00 · 2020-10-20 21:05:58 +08:00
110 changed files with 1867 additions and 2607 deletions
--- a/README.md
+++ b/README.md
@@ -16,6 +16,8 @@ Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) t

 ### GIT

+> If you are in Mainland China, you can download in [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)
+
 Stable branch [recommend]:

 ```
@@ -91,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)
--- a/README_CN.md
+++ b/README_CN.md
@@ -17,6 +17,8 @@

 ### Git 安裝

+> 本倉庫同時上傳到 [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)，如果你訪問 Github 緩慢，可從 Gitee 中下載。
+
 在博客根目錄裡安裝穩定版【推薦】

 ```powershell
@@ -91,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)
--- 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 (數學)
 # --------------------------------------
@@ -94,29 +86,32 @@ avatar:
  img:
  effect: false

-# the banner image of home page
+# The banner image of home page
 index_img:

-# if the banner of page not setting, it will show the top_img
+# If the banner of page not setting, it will show the top_img
 default_top_img:

-# the banner image of archive page
+# The banner image of archive page
 archive_img:

-# the banner image of tag page
+# If the banner of tag page not setting, it will show the top_img
 # note: tag page, not tags page (子標籤頁面的 top_img)
 tag_img:

-# the banner image of category page
+# The banner image of tag page
+# format:
+#  - tag name: xxxxx
+tag_per_img:
+
+# If the banner of category page not setting, it will show the top_img
 # note: category page, not categories page (子分類頁面的 top_img)
 category_img:

-# If you are using hexo-douban, you can configure it (如果你有使用 hexo-douban,可配置這個)
-# douban:
-#   meta: false
-#   movies_img:
-#   books_img:
-#   games_img:
+# The banner image of category page
+# format:
+#  - category name: xxxxx
+category_per_img:

 cover:
  # display the cover or not (是否顯示文章封面)
@@ -144,11 +139,13 @@ error_404:
 post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
+    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: false # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
+    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字
@@ -164,6 +161,7 @@ wordcount:
 # 1: description
 # 2: both (if the description exists, it will show description, or show the auto_excerpt)
 # 3: auto_excerpt (default)
+# false: do not show the article introduction
 index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config
@@ -175,7 +173,6 @@ index_post_content:
 toc:
  enable: true
  number: true
-  auto_open: true # auto open the sidebar

 post_copyright:
  enable: true
@@ -304,6 +301,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/
@@ -324,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
 # --------------------------------------

@@ -473,17 +475,18 @@ tag_ui: # 留空或 index

 # Website Background (設置網站背景)
 # can set it to color or image (可設置圖片 或者 顔色)
-# The formal of color: '#49B202'
 # The formal of image: url(http://xxxxxx.com/xxx.jpg)
-# White color will be shown as default
 background:

-# Show the footer background image (same as top_img)
+# Footer Background
 footer_bg: false

 # the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)
 rightside-bottom:

+# Enter transitions (開啓網頁進入效果)
+enter_transitions: true
+
 # Background effects (背景特效)
 # --------------------------------------

@@ -497,8 +500,8 @@ canvas_ribbon:
  click_to_change: false
  mobile: false

-# Dynamic ribbon (動態彩帶)
-canvas_ribbon_piao:
+# Fluttering Ribbon (動態彩帶)
+canvas_fluttering_ribbon:
  enable: false
  mobile: false

@@ -518,14 +521,18 @@ activate_power_mode:
  enable: false
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
+  mobile: false

 # Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
 fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999
+  mobile: false

 # Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
-click_heart: false
+click_heart:
+  enable: false
+  mobile: false

 # Mouse click effects: words (鼠標點擊效果: 文字)
 ClickShowText:
@@ -535,6 +542,7 @@ ClickShowText:
    # - LOVE
    # - YOU
  fontSize: 15px
+  mobile: false

 # Default display mode (網站默認的顯示模式)
 # light (default) / dark
@@ -557,9 +565,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:
@@ -596,6 +604,8 @@ preloader: false

 aside:
  enable: true
+  hide: false
+  button: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
@@ -733,6 +743,13 @@ note:
 # other
 # --------------------------------------

+# Artitalk
+# see https://artitalk.js.org/
+artitalk:
+  appId:
+  appKey:
+  option:
+
 # Pjax [Beta]
 # It may contain bugs and unstable, give feedback when you find the bugs.
 # https://github.com/MoOx/pjax
@@ -802,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>

@@ -826,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
@@ -849,9 +867,9 @@ CDN:
  busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

  # background effect
-  canvas_ribbon: /js/third-party/canvas-ribbon.js
-  canvas_ribbon_piao: /js/third-party/piao.js
-  canvas_nest: /js/third-party/canvas-nest.js
+  canvas_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js
+  canvas_fluttering_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js
+  canvas_nest: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js

  lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js
  instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js
@@ -868,11 +886,10 @@ CDN:
  snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js

  # effect
-  anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js
-  activate_power_mode: /js/third-party/activate-power-mode.js
-  fireworks: /js/third-party/fireworks.js
-  click_heart: /js/third-party/click_heart.js
-  ClickShowText: /js/third-party/ClickShowText.js
+  activate_power_mode: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js
+  fireworks: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js
+  click_heart: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js
+  ClickShowText: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js

  # fontawesome
  fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
@@ -893,3 +910,5 @@ CDN:
  prismjs_js: https://cdn.jsdelivr.net/npm/prismjs/prism.min.js
  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
--- 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
@@ -75,25 +71,23 @@ aside:
    site_pv_name: PV
  more_button: More
  card_newest_comments:
-    heading: Newest Comments
+    headline: Newest Comments
    loading_text: loading...
-    zero_day: Today
-    day: days ago
+    error: Unable to get the data, please make sure the settings are correct.
+  card_toc: Catalog

 date_suffix:
-  one_hour: Just
-  hours: hours ago
+  just: Just
+  min: minutes ago
+  hour: hours ago
  day: days ago
+  month: months ago

 donate: Donate
 share: Share
-bookmark:
-  title: Bookmark

 rightside:
  readmode_title: Read Mode
-  font_plus_title: Increase Font Size
-  font_minus_title: Decrease Font Size
  translate_title: Switch Between Traditional Chinese And Simplified Chinese
  night_mode_title: Switch Between Light And Dark Mode
  back_to_top: Back To Top
@@ -108,9 +102,6 @@ copy_copyright:
  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

 Snackbar:
-  bookmark:
-    message_prev: Press
-    message_next: to bookmark this page
  chs_to_cht: Traditional Chinese Activated Manually
  cht_to_chs: Simplified Chinese Activated Manually
  day_to_night: Dark Mode Activated Manually
--- 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
@@ -75,25 +71,23 @@ aside:
    site_pv_name: PV
  more_button: More
  card_newest_comments:
-    heading: Newest Comments
+    headline: Newest Comments
    loading_text: loading...
-    zero_day: Today
-    day: days ago
+    error: Unable to get the data, please make sure the settings are correct.
+  card_toc: Catalog

 date_suffix:
-  one_hour: Just
-  hours: hours ago
+  just: Just
+  min: minutes ago
+  hour: hours ago
  day: days ago
+  month: months ago

 donate: Donate
 share: Share
-bookmark:
-  title: Bookmark

 rightside:
  readmode_title: Read Mode
-  font_plus_title: Increase Font Size
-  font_minus_title: Decrease Font Size
  translate_title: Switch Between Traditional Chinese And Simplified Chinese
  night_mode_title: Switch Between Light And Dark Mode
  back_to_top: Back To Top
@@ -108,9 +102,6 @@ copy_copyright:
  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

 Snackbar:
-  bookmark:
-    message_prev: Press
-    message_next: to bookmark this page
  chs_to_cht: Traditional Chinese Activated Manually
  cht_to_chs: Simplified Chinese Activated Manually
  day_to_night: Dark Mode Activated Manually
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -1,7 +1,3 @@
-sidebar:
-  catalog: 目录
-  have_read: 你已经读了
-
 footer:
  framework: 框架
  theme: 主题
@@ -77,25 +73,23 @@ aside:
    site_pv_name: 本站总访问量
  more_button: 查看更多
  card_newest_comments:
-    heading: 最新评论
+    headline: 最新评论
    loading_text: 正在加载中...
-    zero_day: 今天
-    day: 天前
+    error: 无法获取资料，请确认相关配置是否正确
+  card_toc: 目录

 date_suffix:
-  one_hour: 刚刚
-  hours: 小时前
+  just: 刚刚
+  min: 分钟前
+  hour: 小时前
  day: 天前
+  month: 个月前

 donate: 打赏
 share: 分享
-bookmark:
-  title: 添加书签

 rightside:
  readmode_title: 阅读模式
-  font_plus_title: 放大字体
-  font_minus_title: 缩小字体
  translate_title: 简繁转换
  night_mode_title: 浅色和深色模式转换
  back_to_top: 回到顶部
@@ -110,9 +104,6 @@ copy_copyright:
  info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 Snackbar:
-  bookmark:
-    message_prev: 按
-    message_next: 键将本页加入书签
  chs_to_cht: 你已切换为繁体
  cht_to_chs: 你已切换为简体
  day_to_night: 你已切换为深色模式
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -1,7 +1,3 @@
-sidebar:
-  catalog: 目錄
-  have_read: 你已經讀了
-
 footer:
  framework: 框架
  theme: 主題
@@ -77,25 +73,23 @@ aside:
    site_pv_name: 本站總訪問量
  more_button: 檢視更多
  card_newest_comments:
-    heading: 最新評論
+    headline: 最新評論
    loading_text: 正在加載中...
-    zero_day: 今天
-    day: 天前
+    error: 無法獲取資料，請確認相關配置是否正確
+  card_toc: 目錄

 date_suffix:
-  one_hour: 剛剛
-  hours: 小時前
+  just: 剛剛
+  min: 分鐘前
+  hour: 小時前
  day: 天前
+  month: 個月前

 donate: 打賞
 share: 分享
-bookmark:
-  title: 新增書籤

 rightside:
  readmode_title: 閱讀模式
-  font_plus_title: 放大字型
-  font_minus_title: 縮小字型
  translate_title: 簡繁轉換
  night_mode_title: 淺色和深色模式轉換
  back_to_top: 回到頂部
@@ -110,9 +104,6 @@ copy_copyright:
  info: 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

 Snackbar:
-  bookmark:
-    message_prev: 按
-    message_next: 鍵將本頁加入書籤
  chs_to_cht: 你已切換為繁體
  cht_to_chs: 你已切換為簡體
  day_to_night: 你已切換為深色模式
--- a/layout/404.pug
+++ b/layout/404.pug
@@ -13,8 +13,7 @@ html(lang=config.language data-theme=theme.display_mode)
      canvas.fireworks
    
    if theme.background
-      - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
-      #web_bg(data-type=is_photo)
+      #web_bg

    #error-wrap
      .error-content
@@ -26,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
--- a/layout/flink.pug
+++ b/layout/flink.pug
@@ -1,24 +0,0 @@
-#page
-  .flink#article-container
-    if site.data.link
-      each i in site.data.link
-        if i.class_name
-          h2!= i.class_name
-        if i.class_desc
-          .flink-desc!=i.class_desc
-        .flink-list
-          each item in i.link_list
-            .flink-list-item
-              a(href=url_for(item.link)  title=item.name target="_blank")
-                if theme.lazyload.enable
-                  img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
-                else
-                  img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
-                span.flink-item-name= item.name 
-                span.flink-item-desc(title=item.descr)= item.descr
-    != page.content
-  if page.comments !== false && theme.comments && theme.comments.use
-    - var commentsJsLoad = true
-    !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
-
-
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -33,8 +33,11 @@ div
    !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})

  .js-pjax
-    if is_home() && theme.subtitle.enable
+    if theme.subtitle.enable && is_home() && theme.index_img !== false
      include ./third-party/subtitle.pug
+    
+    if page.type === 'artitalk'
+      include ./third-party/artitalk.pug

    include ./third-party/math/index.pug

@@ -57,12 +60,15 @@ div
  !=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
+      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})
+    !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})
+  
+  !=partial('includes/third-party/baidu_push', {}, {cache:theme.fragment_cache})
+  
--- 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))
+          img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='ICP')
        span=theme.footer.ICP.text
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -10,7 +10,6 @@
 - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
 - var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title

- var pageDescription = page_description()
 - var pageKeywords
 - if (page.keywords) pageKeywords = Array.isArray(page.keywords) ? (page.keywords).join(',') :  ([]).join(',') || page.keywords
 - else if (page.tags && page.tags.length) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
@@ -23,7 +22,6 @@ meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
 meta(name="viewport" content="width=device-width,initial-scale=1")
 title= tabTitle
-meta(name="description" content!=pageDescription)
 if pageKeywords
  meta(name="keywords" content=pageKeywords)
 meta(name="author" content=pageAuthor)
@@ -35,6 +33,9 @@ if theme.disable_baidu_transformation
  meta(http-equiv="Cache-Control" content="no-transform")
  meta(http-equiv="Cache-Control" content="no-siteapp")

+//- Open_Graph
+include ./head/Open_Graph.pug
+
 !=favicon_tag(theme.favicon || config.favicon)
 link(rel="canonical" href=urlNoIndex())

@@ -44,14 +45,6 @@ link(rel="canonical" href=urlNoIndex())
 //- 網站驗證
 !=partial('includes/head/site_verification', {}, {cache:theme.fragment_cache})

-//- Open_Graph
-include ./head/Open_Graph.pug
-
-if theme.facebook_comments.app_id
-  meta(property="fb:app_id" content=theme.facebook_comments.app_id )
-if theme.facebook_comments.user_id
-  meta(property="fb:admins" content=theme.facebook_comments.user_id)
-
 //- PWA
 if (theme.pwa && theme.pwa.enable)
  !=partial('includes/head/pwa', {}, {cache:theme.fragment_cache})
@@ -86,7 +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})
-
-!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
+!=partial('includes/head/js', {}, {cache:theme.fragment_cache})

+!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
--- a/layout/includes/head/Open_Graph.pug
+++ b/layout/includes/head/Open_Graph.pug
@@ -1,12 +1,11 @@
- var contentType = is_post() ? 'article' : 'website'
-
 if theme.Open_Graph_meta
-  meta(property="og:type" content=contentType)
-  meta(property="og:title" content=pageTitle)
-  meta(property="og:url" content=urlNoIndex())
-  meta(property="og:site_name" content=config.title)
-  meta(property="og:description" content!=pageDescription)
-  meta(property="og:image" content=full_url_for(page.cover || theme.avatar.img))
-  meta(property="article:published_time" content=date_xml(page.date))
-  meta(property="article:modified_time" content=date_xml(page.updated))
-  meta(name="twitter:card" content="summary")
+  - let contentType = is_post() ? 'article' : 'website'
+  - let metaImage = full_url_for(page.cover || theme.avatar.img)
+  - let fb_appId = theme.facebook_comments.app_id || ''
+  - let fb_admins = theme.facebook_comments.user_id || ''
+
+  != open_graph({type: contentType, image: metaImage, fb_admins: fb_admins, fb_app_id: fb_appId})
+
+else
+  meta(name="description" content=page_description())
+
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -61,10 +61,6 @@
  let Snackbar = 'undefined';
  if (theme.snackbar && theme.snackbar.enable) {
    Snackbar = JSON.stringify({
-      bookmark: {
-        message_prev: _p("Snackbar.bookmark.message_prev"),
-        message_next: _p("Snackbar.bookmark.message_next")
-      },
      chs_to_cht: _p("Snackbar.chs_to_cht"),
      cht_to_chs: _p("Snackbar.cht_to_chs"),
      day_to_night: _p("Snackbar.day_to_night"),
@@ -94,16 +90,9 @@
    })
  }

-  let date_suffix = JSON.stringify({
-    one_hour: _p("date_suffix.one_hour"),
-    hours: _p("date_suffix.hours"),
-    day: _p('date_suffix.day')
-  })
-
 script.
  var GLOBAL_CONFIG = { 
    root: '!{config.root}',
-    hexoversion: '!{get_hexo_version()}',
    algolia: !{algolia},
    localSearch: !{localSearch},
    translate: !{translate},
@@ -114,22 +103,26 @@ script.
      error: '!{_p("copy.error")}',
      noSupport: '!{_p("copy.noSupport")}'
    },
-    bookmark: {
-      message_prev: '!{_p("Snackbar.bookmark.message_prev")}',
-      message_next: '!{_p("Snackbar.bookmark.message_next")}'
+    relativeDate: {
+      homepage: !{theme.post_meta.page.date_format === 'relative'},
+      post: !{theme.post_meta.post.date_format === 'relative'}
    },
    runtime: '!{theme.runtimeshow.enable ? _p("aside.card_webinfo.runtime.unit") : ""}',
-    date_suffix: !{date_suffix},
+    date_suffix: {
+      just: '!{_p("date_suffix.just")}',
+      min: '!{_p("date_suffix.min")}',
+      hour: '!{_p("date_suffix.hour")}',
+      day: '!{_p("date_suffix.day")}',
+      month: '!{_p("date_suffix.month")}'
+    },
    copyright: !{copyright},
    ClickShowText: !{ClickShowText},
-    medium_zoom: !{theme.medium_zoom},
-    fancybox: !{theme.fancybox},
+    lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
    Snackbar: !{Snackbar},
    justifiedGallery: {
      js: '!{theme.CDN.justifiedGallery_js}',
      css: '!{theme.CDN.justifiedGallery_css}'
    },
-    baiduPush: !{theme.baidu_push},
    isPhotoFigcaption: !{theme.photofigcaption},
    islazyload: !{theme.lazyload.enable},
    isanchor: !{theme.anchor}
@@ -144,7 +137,7 @@ script.
        expiry: now.getTime() + expiryDay,
      }
      localStorage.setItem(key, JSON.stringify(item))
-      },
+    },

    get: function getWithExpiry(key) {
      const itemStr = localStorage.getItem(key)
--- 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)}'
    }
--- a/layout/includes/head/darkmode.pug
+++ b/layout/includes/head/darkmode.pug
@@ -1,50 +0,0 @@
-if theme.darkmode.enable
-  script.
-    var 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')
-      }
-    }
-    var 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')
-      }
-    }
-
-    var autoChangeMode = '#{theme.darkmode.autoChangeMode}'
-    var t = saveToLocal.get('theme')
-    if (autoChangeMode === '1') {
-      var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-      var isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
-      var isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
-      var hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
-
-      if (t === undefined) {
-        if (isLightMode) activateLightMode()
-        else if (isDarkMode) activateDarkMode()
-        else if (isNotSpecified || hasNoSupport) {
-          var now = new Date()
-          var hour = now.getHours()
-          var 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') {
-      now = new Date()
-      hour = now.getHours()
-      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()
-    }
--- a/layout/includes/head/js.pug
+++ b/layout/includes/head/js.pug
@@ -0,0 +1,65 @@
+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
+
+    |     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')
+    |    }
+    | }
+
+  | })()
+
--- a/layout/includes/head/noscript.pug
+++ b/layout/includes/head/noscript.pug
@@ -1,9 +1,14 @@
 noscript. 
  <style type="text/css">
-  #nav {
-    opacity: 1
-  }
-  .justified-gallery img {
-    opacity: 1
-  }
+    #nav {
+      opacity: 1
+    }
+    .justified-gallery img {
+      opacity: 1
+    }
+
+    #recent-posts time,
+    #post-meta time {
+      display: inline !important
+    }
  </style>
--- a/layout/includes/header/index.pug
+++ b/layout/includes/header/index.pug
@@ -1,43 +1,48 @@
-if is_home()
-  - var top_img = theme.index_img || theme.default_top_img
-else if is_post()
-  - var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
-else if is_archive()
-  - var top_img = theme.archive_img || theme.default_top_img
-else if is_tag()
-  - var top_img = theme.tag_img || theme.default_top_img
-else if is_category()
-  - var top_img = theme.category_img || theme.default_top_img
+if page.top_img !== false
+  if is_post()
+    - var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
+  else if is_page()
+    - var top_img = page.top_img || theme.default_top_img
+  else if is_tag()
+    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
+    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
+  else if is_category()
+    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
+    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
+  else if is_home()
+    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
+  else if is_archive()
+    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
+  else
+    - var top_img = page.top_img || theme.default_top_img
+
+  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 : ''
+    - var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
+    - var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
+    - is_post() ? isHomeClass = 'post-bg' : isHomeClass
+  else
+    - var isHomeClass = 'no-top-img'
 else
-  - var top_img = page.top_img || theme.default_top_img
-
-if theme.douban
-  if is_current('/movies/', [strict])
-    - var top_img = theme.douban.movies_img || theme.default_top_img
-  else if is_current('/books/', [strict])
-    - var top_img = theme.douban.books_img || theme.default_top_img
-  else if is_current('/games/', [strict])
-    - var top_img = theme.douban.games_img || theme.default_top_img
-
- var bg_img = top_img && top_img !== true ? `background-image: url(${url_for(top_img)})` : ''
- var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
- var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
- is_post() ? isHomeClass = 'post-bg' : isHomeClass
+  - var top_img = false
+  - var isHomeClass = 'no-top-img'

 header#page-header(class=isHomeClass style=bg_img)
  !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
-  if is_home()
-    #site-info
-      h1#site_title=site_title
-      #site_subtitle
-        span#subtitle
-      if(theme.social)
-        #site_social_icons
-          !=fragment_cache('social', function(){return partial('includes/header/social')})
-    #scroll_down
-      i.fas.fa-angle-down.scroll-down-effects
-  else if is_post()
-    include ./post-info.pug 
-  else
-    #page_site-info
-      h1#site_title=site_title
+  if top_img !== false
+    if is_post()
+      include ./post-info.pug
+    else if is_home() 
+      #site-info
+        h1#site-title=site_title
+        #site-subtitle
+          span#subtitle
+        if(theme.social)
+          #site_social_icons
+            !=fragment_cache('social', function(){return partial('includes/header/social')})
+      #scroll-down
+        i.fas.fa-angle-down.scroll-down-effects
+    else
+      #page-site-info
+        h1#site-title=site_title
--- 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
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -1,41 +1,40 @@
+- 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
    if theme.preloader
      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})

-    !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})
+    if theme.background
+      #web_bg
+      
+    !=partial('includes/sidebar', {}, {cache:theme.fragment_cache})

    #body-wrap
-      if theme.background
-        - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
-        #web_bg(data-type=is_photo)
-
-      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})
+      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)
+          - var footer_bg = bg_img
+        else
+          - var footer_bg = theme.footer_bg.indexOf('/') !== -1 ? `background-image: url(${url_for(footerBg)})` : `background: ${footerBg}`
      else
-        main#content-inner.layout_post
-          if body
-            div!= body
-          else
-            block content
-      
-      - var footer_bg = theme.footer_bg == false ? '' : bg_img
-      - var is_bg = theme.footer_bg == false ? 'color' : 'photo'
-      footer#footer(style=footer_bg data-type=is_bg)
+        - var footer_bg = ''
+
+      footer#footer(style=footer_bg)
        !=partial('includes/footer', {}, {cache:theme.fragment_cache})

    include ./rightside.pug
--- a/layout/includes/loading/loading-js.pug
+++ b/layout/includes/loading/loading-js.pug
@@ -1,6 +1,13 @@
 script.
-  var endLoading = function () {
-    document.body.style.overflow = 'auto';
-    document.getElementById('loading-box').classList.add("loaded")
+  var preloader = {
+    endLoading: () => {
+      document.body.style.overflow = 'auto';
+      document.getElementById('loading-box').classList.add("loaded")
+    },
+    initLoading: () => {
+      document.body.style.overflow = '';
+      document.getElementById('loading-box').classList.remove("loaded")
+
+    }
  }
-  window.addEventListener('load',endLoading)
+  window.addEventListener('load',()=> {preloader.endLoading()})
--- a/layout/includes/mixins/post-ui.pug
+++ b/layout/includes/mixins/post-ui.pug
@@ -57,22 +57,25 @@ mixin postUI(posts)
                  span.article-meta__link #[='•']

        //- Display the article introduction on homepage
-        if theme.index_post_content.method == 1
-          .content!= article.description
-        else if theme.index_post_content.method == 2
-          if article.description
+        case theme.index_post_content.method
+          when false
+            - break
+          when 1
            .content!= article.description
-          else
+          when 2
+            if article.description
+              .content!= article.description
+            else
+              - const content = strip_html(article.content)
+              - let expert = content.substring(0, theme.index_post_content.length) 
+              - content.length > theme.index_post_content.length ? expert += ' ...' : ''
+              .content!= expert
+          default
            - const content = strip_html(article.content)
            - let expert = content.substring(0, theme.index_post_content.length) 
            - content.length > theme.index_post_content.length ? expert += ' ...' : ''
            .content!= expert
-        else
-          - const content = strip_html(article.content)
-          - let expert = content.substring(0, theme.index_post_content.length) 
-          - content.length > theme.index_post_content.length ? expert += ' ...' : ''
-          .content!= expert

    if theme.ad && theme.ad.index
      if (index + 1) % 3 == 0
-        .recent-post-item.ad_height!=theme.ad.index
+        .recent-post-item.ad-height!=theme.ad.index
--- a/layout/includes/mobile-sidebar/index.pug
+++ b/layout/includes/mobile-sidebar/index.pug
@@ -1,3 +0,0 @@
-#mobile-sidebar
-  #menu_mask
-  include ../mobile-sidebar/mobile-menus.pug
--- a/layout/includes/mobile-sidebar/mobile-menus.pug
+++ b/layout/includes/mobile-sidebar/mobile-menus.pug
@@ -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')})
--- a/layout/includes/page/artitalk.pug
+++ b/layout/includes/page/artitalk.pug
@@ -0,0 +1,4 @@
+if top_img === false
+  h1.page-title= page.title
+
+#artitalk_main
--- a/layout/includes/page/categories.pug
+++ b/layout/includes/page/categories.pug
@@ -0,0 +1,5 @@
+.category-lists
+  .category-title.is-center= _p('page.category')
+    |  - 
+    span.category-amount= site.categories.length
+  div!= list_categories()
--- a/layout/includes/page/default-page.pug
+++ b/layout/includes/page/default-page.pug
@@ -0,0 +1,4 @@
+#article-container
+  if top_img === false
+    h1.page-title= page.title
+  != page.content
--- a/layout/includes/page/flink.pug
+++ b/layout/includes/page/flink.pug
@@ -0,0 +1,19 @@
+.flink#article-container
+  if site.data.link
+    each i in site.data.link
+      if i.class_name
+        h2!= i.class_name
+      if i.class_desc
+        .flink-desc!=i.class_desc
+      .flink-list
+        each item in i.link_list
+          .flink-list-item
+            a(href=url_for(item.link)  title=item.name target="_blank")
+              if theme.lazyload.enable
+                img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
+              else
+                img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
+              span.flink-item-name= item.name 
+              span.flink-item-desc(title=item.descr)= item.descr
+  != page.content
+
--- a/layout/includes/page/tags.pug
+++ b/layout/includes/page/tags.pug
@@ -0,0 +1,5 @@
+.tag-cloud-title.is-center= _p('page.tag')
+  |  - 
+  span.tag-cloud-amount= site.tags.length
+.tag-cloud-list.is-center
+  !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -1,28 +1,33 @@
-section#rightside
+#rightside
  #rightside-config-hide
-    if is_post()
-      if theme.readmode
-        button#readmode(type="button" title=_p('rightside.readmode_title'))
-          i.fas.fa-book-open
-    if theme.translate && theme.translate.enable
+    if is_post() && theme.readmode
+      button#readmode(type="button" title=_p('rightside.readmode_title'))
+        i.fas.fa-book-open
+    if theme.translate.enable
      button#translateLink(type="button" title=_p('rightside.translate_title'))= theme.translate.default
    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
-    button#rightside_config(type="button" title=_p("rightside.setting"))
-      i.fas.fa-cog
-    if is_post() && page.comments !== false && theme.comments.use
-      a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
-        i.fas.fa-comments
-    if showToc
-      button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
-        i.fas.fa-list-ul
+    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 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)
+      button#rightside_config(type="button" title=_p("rightside.setting"))
+        i.fas.fa-cog
+
    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
-
-
+      i.fas.fa-arrow-up
--- a/layout/includes/sidebar.pug
+++ b/layout/includes/sidebar.pug
@@ -1,21 +1,31 @@
-
-  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' : ''
-
+#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(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})
-        
+      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')})
--- a/layout/includes/third-party/aplayer.pug
+++ b/layout/includes/third-party/aplayer.pug
--- a/layout/includes/third-party/artitalk.pug
+++ b/layout/includes/third-party/artitalk.pug
@@ -0,0 +1,24 @@
+- let option = theme.artitalk.option ? JSON.stringify(theme.artitalk.option) : false
+
+script.
+  (()=>{
+    let setting = {
+      appId: '!{theme.artitalk.appId}',
+      appKey: '!{theme.artitalk.appKey}',
+    }
+
+    if (!{Boolean(option)}) {
+      const otherSetting = !{option}
+      setting = Object.assign({}, setting, otherSetting)
+    }
+
+    const init = () => {
+      new Artitalk(setting)
+    }
+
+    if (typeof Artitalk === 'function') {
+      init()
+    } else {
+      $.getScript('!{theme.CDN.artitalk}',init)
+    }
+  })()
--- a/layout/includes/third-party/baidu_push.pug
+++ b/layout/includes/third-party/baidu_push.pug
@@ -0,0 +1,15 @@
+if theme.baidu_push
+  script.
+    (function(){
+      const bp = document.createElement('script');
+      const curProtocol = window.location.protocol.split(':')[0];
+      if (curProtocol === 'https'){
+      bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
+      }
+      else{
+      bp.src = 'http://push.zhanzhang.baidu.com/push.js';
+      }
+      bp.dataset.pjax = ''
+      const s = document.getElementsByTagName("script")[0];
+      s.parentNode.insertBefore(bp, s);
+    })()
--- 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}',
--- 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
--- 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})
--- a/layout/includes/third-party/comments/twikoo.pug
+++ 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()
+    }
+  }
+
--- 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 () {
-      window.valine = new Valine({
+      let initData = {
        el: '#vcomment',
        appId: '#{theme.valine.appId}',
        appKey: '#{theme.valine.appKey}',
@@ -20,8 +21,18 @@ script.
        emojiMaps: !{emojiMaps},
        enableQQ: #{theme.valine.enableQQ},
        path: window.location.pathname,
-      });
-      if ('#{theme.valine.requiredFields}') { valine.config.requiredFields= '#{theme.valine.requiredFields}'.split(',') }
+      }
+
+      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)
    }

    if (typeof Valine === 'function') initValine() 
--- a/layout/includes/third-party/effect.pug
+++ b/layout/includes/third-party/effect.pug
@@ -1,14 +1,13 @@
 if theme.fireworks && theme.fireworks.enable
-  canvas.fireworks
-  script(src=url_for(theme.CDN.anime))
+  canvas.fireworks(mobile=`${theme.fireworks.mobile}`)
  script(src=url_for(theme.CDN.fireworks))

 if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
  script(defer id="ribbon" src=url_for(theme.CDN.canvas_ribbon) size=theme.canvas_ribbon.size
  alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex mobile=`${theme.canvas_ribbon.mobile}` data-click=`${theme.canvas_ribbon.click_to_change}`)

-if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
-  script(defer id="ribbon_piao" mobile=`${theme.canvas_ribbon_piao.mobile}` src=url_for(theme.CDN.canvas_ribbon_piao))
+if (theme.canvas_fluttering_ribbon && theme.canvas_fluttering_ribbon.enable)
+  script(defer id="fluttering_ribbon" mobile=`${theme.canvas_fluttering_ribbon.mobile}` src=url_for(theme.CDN.canvas_fluttering_ribbon))

 if (theme.canvas_nest && theme.canvas_nest.enable)
  script#canvas_nest(defer color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count mobile=`${theme.canvas_nest.mobile}` src=url_for(theme.CDN.canvas_nest))
@@ -18,11 +17,12 @@ if theme.activate_power_mode.enable
  script.
    POWERMODE.colorful = !{theme.activate_power_mode.colorful};
    POWERMODE.shake = !{theme.activate_power_mode.shake};
+    POWERMODE.mobile = !{theme.activate_power_mode.mobile};
    document.body.addEventListener('input', POWERMODE);

 //- 鼠標特效
-if theme.click_heart
-  script(src=url_for(theme.CDN.click_heart) async)
+if theme.click_heart && theme.click_heart.enable
+  script#click-heart(src=url_for(theme.CDN.click_heart) async mobile=`${theme.click_heart.mobile}`)

 if theme.ClickShowText && theme.ClickShowText.enable
-  script(src=url_for(theme.CDN.ClickShowText) async)
+  script#click-show-text(src=url_for(theme.CDN.ClickShowText) async mobile=`${theme.ClickShowText.mobile}`)
--- 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
--- a/layout/includes/third-party/newest-comments/disqus-comment.pug
+++ b/layout/includes/third-party/newest-comments/disqus-comment.pug
@@ -28,6 +28,9 @@ script.
        // set expiry to 10 min
        saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), 10/(60*24))
        generateHtml(disqusArray)
+      }).fail(()=>{
+        const $dom = document.querySelector('#card-newest-comments .aside-list')
+        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
      })
    }

@@ -38,7 +41,7 @@ script.
        result += '<div class=\'aside-list-item\'>'

        if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}'></a>`
+          result += `<a href='${array[i].url}' class='thumbnail'><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
        }
        
        result += `<div class='content'>
@@ -47,13 +50,13 @@ script.
        </div></div>`
      }

-      let $dom = document.querySelector('.card-newest-comments .aside-list')
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
      $dom.innerHTML= result
      window.pjax && window.pjax.refresh($dom)
    }

    const newestCommentInit = () => {
-      if (document.querySelector('.card-newest-comments .aside-list')) {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
        const data = saveToLocal.get('disqus-newest-comments')
        if (data) {
          generateHtml(JSON.parse(data))
--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/layout/includes/third-party/newest-comments/github-issues.pug
@@ -27,6 +27,9 @@ script.
        })
        saveToLocal.set('github-newest-comments', JSON.stringify(githubArray), 10/(60*24))
        generateHtml(githubArray)
+      }).fail(()=>{
+        const $dom = document.querySelector('#card-newest-comments .aside-list')
+        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
      })
    }

@@ -37,7 +40,7 @@ script.
        result += '<div class=\'aside-list-item\'>'

        if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}'></a>`
+          result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
        }

        result += `<div class='content'>
@@ -46,13 +49,13 @@ script.
        </div></div>`
      }

-      let $dom = document.querySelector('.card-newest-comments .aside-list')
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
      $dom.innerHTML= result
      window.pjax && window.pjax.refresh($dom)
    }

    const newestCommentInit = () => {
-      if (document.querySelector('.card-newest-comments .aside-list')) {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
        const data = saveToLocal.get('github-newest-comments')
        if (data) {
          generateHtml(JSON.parse(data))
--- a/layout/includes/third-party/newest-comments/leancloud.pug
+++ b/layout/includes/third-party/newest-comments/leancloud.pug
@@ -28,7 +28,7 @@ script.
        result += '<div class=\'aside-list-item\'>'

        if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class="thumbnail"><img src='${getIcon(array[i].avatar, array[i].mail)}'></a>`
+          result += `<a href='${array[i].url}' class="thumbnail"><img src='${getIcon(array[i].avatar, array[i].mail)}' alt='${array[i].nick}'></a>`
        }

        result += `<div class='content'>
@@ -37,58 +37,59 @@ script.
        </div></div>`
      }

-      let $dom = document.querySelector('.card-newest-comments .aside-list')
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
      $dom.innerHTML= result
      window.pjax && window.pjax.refresh($dom)
    }

    const getValineData = () => {
-
-      if (!(AV.applicationId && (AV.applicationKey || AV.masterKey))) {
-        const dataInit = {
-          appId: '!{theme.newest_comments.leancloud.appId}',
-          appKey: '!{theme.newest_comments.leancloud.appKey}'
+        let serverURL = ''
+        if (!{Boolean(theme.newest_comments.leancloud.serverURL)}) {
+          serverURL = '!{theme.newest_comments.leancloud.serverURL}'
+        } else {
+          serverURL = 'https://!{theme.newest_comments.leancloud.appId.substring(0,8)}.api.lncldglobal.com'
        }

-        if (!{theme.newest_comments.leancloud.serverURL ? true : false}) {
-          dataInit.serverURL= '!{theme.newest_comments.leancloud.serverURL}'
-        }
-
-        AV.init(dataInit)
+      var settings = {
+        "url": `${serverURL}/1.1/classes/Comment?limit=!{theme.newest_comments.limit}&order=-createdAt`,
+        "method": "GET",
+        "timeout": 0,
+        "headers": {
+          "X-LC-Id": '!{theme.newest_comments.leancloud.appId}',
+          "X-LC-Key": '!{theme.newest_comments.leancloud.appKey}',
+          "Content-Type": "application/json"
+        },
      }

-      const query = new AV.Query('Comment');
-      query.descending('createdAt').limit(!{theme.newest_comments.limit})
-
-      var valineArray = []
-      query.find().then(comments => {
-        comments.forEach(comment => {
+      $.ajax(settings).done((response) => {
+        var valineArray = []
+        response.results.forEach((e)=>{
          valineArray.push({
-            'avatar': comment.get('QQAvatar'),
-            'content': changeContent(comment.get('comment')),
-            'mail': comment.get('mail'),
-            'nick': comment.get('nick'),
-            'url': comment.get('url'),
-            'date': comment.createdAt,
+            'avatar': e.QQAvatar,
+            'content': changeContent(e.comment),
+            'mail': e.mail,
+            'nick': e.nick,
+            'url': e.url,
+            'date': e.createdAt,
          })
        })
-      }).then(function() {
+        
        saveToLocal.set('leancloud-newest-comments', JSON.stringify(valineArray), 10/(60*24))
        generateHtml(valineArray)
+
+      }).fail(()=>{
+        const $dom = document.querySelector('#card-newest-comments .aside-list')
+        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
      })
    }

    const newestCommentInit = () => {
-      if (document.querySelector('.card-newest-comments .aside-list')) {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
        const data = saveToLocal.get('leancloud-newest-comments')
        if (data) {
          generateHtml(JSON.parse(data))
        } else {
-          if (typeof window.AV === 'object') {
-            getValineData()
-          } else {
-            $.getScript('https://cdn.jsdelivr.net/npm/leancloud-storage@4.6.1/dist/av-min.js', getValineData)
-          }
+          getValineData()
        }
      }
    }
--- a/layout/includes/third-party/pjax.pug
+++ b/layout/includes/third-party/pjax.pug
@@ -7,7 +7,6 @@ script(src=url_for(theme.CDN.pjax))
 script.
  let pjaxSelectors = [
    'title',
-    'meta[name=description]',
    '#config_change',
    '#body-wrap',
    '#rightside-config-hide',
@@ -52,10 +51,14 @@ script.

    // prismjs
    typeof Prism === 'object' && Prism.highlightAll()
+
+    typeof preloader === 'object' && preloader.endLoading()
  })


  document.addEventListener('pjax:send', function () {
+    typeof preloader === 'object' && preloader.initLoading()
+    
    if (window.aplayers) {
      for (let i = 0; i < window.aplayers.length; i++) {
        if (!window.aplayers[i].options.fixed) {
--- 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
--- 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
+#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
--- 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()
-    }
+      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()
+      }
--- 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)
--- a/layout/includes/widget/card_newest_comment.pug
+++ b/layout/includes/widget/card_newest_comment.pug
@@ -1,7 +1,7 @@
-.card-widget.card-newest-comments
+.card-widget#card-newest-comments
  .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')
--- a/layout/includes/widget/card_post_toc.pug
+++ 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})
+      
--- a/layout/includes/widget/card_recent_post.pug
+++ b/layout/includes/widget/card_recent_post.pug
@@ -7,18 +7,18 @@
      - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
      - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
      - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
-        .aside-list-item
-          - let link = article.link || article.path
-          - let title = article.title || _p('no_title')
-          - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-aside-cover' : ''
-          - let post_cover = article.cover
+        - let link = article.link || article.path
+        - let title = article.title || _p('no_title')
+        - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
+        - let post_cover = article.cover
+        .aside-list-item(class=no_cover)
          if post_cover && theme.cover.aside_enable
            a.thumbnail(href=url_for(link) title=title)
              if theme.lazyload.enable
                img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
              else
                img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
-          .content(class=no_cover)
+          .content
            a.title(href=url_for(link) title=title)= title
            if theme.aside.card_recent_post.sort === 'updated'
              time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
--- 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
+    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})
--- a/layout/page.pug
+++ b/layout/page.pug
@@ -1,34 +1,19 @@
 extends includes/layout.pug

 block content
-  if page.type === 'tags'
-    .tag-cloud
-      .tag-cloud__title= _p('page.tag')
-        |  - 
-        span.tag-cloud__amount= site.tags.length
-      .tag-cloud-tags
-        !=cloudTags({source: site.tags, minfontsize: 1, maxfontsize: 2.1, limit: 0, unit: 'em'})
-      if page.comments !== false && theme.comments && theme.comments.use
-        - var commentsJsLoad = true
-        !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
-  else if page.type === 'link'
-    include flink.pug
-  else if page.type === 'categories'    
-    .category-content
-      .category-lists
-        .category__title= _p('page.category')
-          |  - 
-          span.category__amount= site.categories.length
-        div!= list_categories()
-      if page.comments !== false && theme.comments && theme.comments.use
-        - var commentsJsLoad = true
-        !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
-  else
-    #page
-      if theme.douban && theme.douban.meta
-        if (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict]))
-          meta(name="referrer" content="no-referrer")
-      #article-container!= page.content
-      if page.comments !== false && theme.comments && theme.comments.use
-        - var commentsJsLoad = true
-        !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
+  #page
+    case page.type
+      when 'tags'
+        include includes/page/tags.pug
+      when 'link'
+        include includes/page/flink.pug
+      when 'categories'
+        include includes/page/categories.pug
+      when 'artitalk'
+        include includes/page/artitalk.pug
+      default
+        include includes/page/default-page.pug
+
+    if page.comments !== false && theme.comments && theme.comments.use
+      - var commentsJsLoad = true
+      !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -1,8 +1,11 @@
 extends includes/layout.pug

 block content
-  article#post(class="")
-    #article-container.post-content!=page.content
+  #post
+    if top_img === false
+      include includes/header/post-info.pug
+
+    article#article-container.post-content!=page.content
    include includes/post/post-copyright.pug
    .tag_share
      if (theme.post_meta.post.tags)
--- a/layout/tag.pug
+++ b/layout/tag.pug
@@ -3,7 +3,7 @@ extends includes/layout.pug
 block content
  if theme.tag_ui == 'index'
    include ./includes/mixins/post-ui.pug
-    #recent-posts.recent-posts    
+    #recent-posts.recent-posts
      +postUI
      include includes/pagination.pug
  else
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hexo-theme-butterfly",
-  "version": "3.1.1",
+  "version": "3.3.0",
  "description": "A Simple and Card UI Design theme for Hexo",
  "main": "package.json",
  "scripts": {
--- a/scripts/events/check_hexo.js
+++ b/scripts/events/check_hexo.js
@@ -1,12 +0,0 @@
-const logger = require('hexo-log')()
-
-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 或更高的版本！')
-    process.exit(-1)
-  }
-})
--- a/scripts/events/init.js
+++ b/scripts/events/init.js
@@ -0,0 +1,27 @@
+const logger = require('hexo-log')()
+
+hexo.extend.filter.register('before_generate', () => {
+  // Get first two digits of the Hexo version number
+  var hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1')
+
+  if (hexoVer < 5) {
+    logger.error('Please update Hexo to V5.0.0 or higher!')
+    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)
+    }
+  }
+
+  // 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
+})
--- a/scripts/events/replace_config.js
+++ b/scripts/events/replace_config.js
@@ -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
-})
--- a/scripts/filters/random_cover.js
+++ b/scripts/filters/random_cover.js
@@ -6,8 +6,14 @@
 'use strict'

 hexo.extend.filter.register('before_post_render', function (data) {
-  if (data.top_img && data.top_img.indexOf('/') === -1) data.top_img = data.path + data.top_img
-  if (data.cover && data.cover.indexOf('/') === -1) data.cover = data.path + data.cover
+  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
+    if (topImg && topImg.indexOf('/') === -1 && imgTestReg.test(topImg)) data.top_img = data.path + topImg
+    if (cover && cover.indexOf('/') === -1) data.cover = data.path + cover
+  }

  if (data.cover === false) {
    data.randomcover = randomCover()
@@ -33,6 +39,7 @@ function randomCover () {
      return cover
    }
  } else {
-    return theme.default_top_img
+    cover = 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg'
+    return cover
  }
 }
--- 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,6 +22,46 @@ hexo.extend.helper.register('page_description', function () {
  }
 })

+hexo.extend.helper.register('cloudTags', function (options = {}) {
+  const env = this
+  let source = options.source
+  const minfontsize = options.minfontsize
+  const maxfontsize = options.maxfontsize
+  const limit = options.limit
+  const unit = options.unit || 'px'
+
+  let result = ''
+  if (limit > 0) {
+    source = source.limit(limit)
+  }
+
+  const sizes = []
+  source.sort('length').forEach(tag => {
+    const { length } = tag
+    if (sizes.includes(length)) return
+    sizes.push(length)
+  })
+
+  const length = sizes.length - 1
+  source.forEach(tag => {
+    const ratio = length ? sizes.indexOf(tag.length) / length : 0
+    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
+    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
+    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
+    style += ` color: ${color}`
+    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+  })
+  return result
+})
+
+hexo.extend.helper.register('urlNoIndex', function () {
+  return prettyUrls(this.url, { trailing_index: false, trailing_html: false })
+})
+
+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 ''
@@ -31,39 +70,3 @@ hexo.extend.helper.register('injectHtml', function (data) {
  }
  return result
 })
-
-hexo.extend.helper.register('cloudTags', function (options = {}) {
-  const env = this
-  const source = options.source
-  const minfontsize = options.minfontsize
-  const maxfontsize = options.maxfontsize
-  const limit = options.limit
-  const unit = options.unit || 'px'
-
-  let result = ''
-  const tagLimit = limit === 0 ? source.length : limit
-  source.sort('name').limit(tagLimit).forEach(function (tags) {
-    const fontSizeRD = Math.random() * (maxfontsize - minfontsize) + minfontsize
-    const fontSize = fontSizeRD.toFixed(2) + unit
-    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
-    result += `<a href='${env.url_for(tags.path)}' style='font-size:${fontSize}; color:${color}'>${tags.name}</a>`
-  })
-  return result
-})
-
-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
-})
-
-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
-})
--- 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
@@ -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>' +
--- a/scripts/tags/button.js
+++ b/scripts/tags/button.js
--- a/scripts/tags/gallery.js
+++ b/scripts/tags/gallery.js
--- a/scripts/tags/hide.js
+++ b/scripts/tags/hide.js
--- 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 })
--- a/scripts/tag/note.js
+++ b/scripts/tag/note.js
@@ -0,0 +1,27 @@
+/**
+ * note.js
+ * transplant from hexo-theme-next
+ * Modify by Jerry
+ */
+
+'use strict'
+
+function postNote (args, content) {
+  const styleConfig = hexo.theme.config.note.style
+  const lastArgs = args[args.length - 1]
+  if (!(lastArgs === 'flat' || lastArgs === 'modern' || lastArgs === 'simple' || lastArgs === 'disabled')) {
+    args.push(styleConfig)
+  }
+
+  let icon = ''
+  const iconArray = args[args.length - 2]
+  if (iconArray && iconArray.startsWith('fa')) {
+    icon = `<i class="note-icon ${iconArray}"></i>`
+    args[args.length - 2] = 'icon'
+  }
+
+  return `<div class="note ${args.join(' ')}">${icon + hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
+}
+
+hexo.extend.tag.register('note', postNote, { ends: true })
+hexo.extend.tag.register('subnote', postNote, { ends: true })
--- a/scripts/tags/tabs.js
+++ b/scripts/tags/tabs.js
--- a/scripts/tags/note.js
+++ b/scripts/tags/note.js
@@ -1,13 +0,0 @@
-/**
- * note.js
- * transplant from hexo-theme-next
- */
-
-'use strict'
-
-function postNote (args, content) {
-  return `<div class="note ${args.join(' ')}">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
-}
-
-hexo.extend.tag.register('note', postNote, { ends: true })
-hexo.extend.tag.register('subnote', postNote, { ends: true })
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -45,31 +45,155 @@ minWidth2000()
  @media screen and (min-width: 2000px)
    {block}

-[data-theme='light']
-  --global-bg: $body-bg
-  --font-color: $font-black
-  --hr-border: lighten($theme-hr-color, 50%)
-  --hr-before-color: lighten($theme-hr-color, 30%)
-  --search-bg: $search-bg
-  --search-input-color: $search-input-color
-  --search-result-title: $search-result-title
-  --preloader-bg: $preloader-bg
-  --preloader-color: $preloader-word-color
-  --tab-border-color: $tab-border-color
-  --tab-botton-bg: $tab-botton-bg
-  --tab-botton-color: $tab-botton-color
-  --tab-button-hover-bg: $tab-button-hover-bg
-  --tab-button-active-bg: $tab-button-active-bg
-  --card-bg: $card-bg
-  --sidebar-bg: $sidebar-background
-  --btn-hover-color: $button-hover-color
-  --btn-color: $button-color
-  --btn-bg: $button-bg
-  --text-bg-hover: $text-bg-hover
-  --light-grey: $light-grey
-  --white: $white
-  --text-highlight-color: $text-highlight-color
-  --blockquote-color: $blockquote-color
-  --blockquote-bg: $blockquote-background-color
-  --reward-pop: $reward-pop-up-bg
-  --sidebar-icon-color: $sidebar-icon-color
+// animation
+if hexo-config('enter_transitions')
+  #content-inner,
+  #footer
+    animation: main 1s
+
+  #page-header
+    animation: header-effect 1s
+
+  #site-title,
+  #site-subtitle
+    animation: titlescale 1s
+
+  #nav.show
+    animation: headerNoOpacity 1s
+
+  canvas:not(#ribbon-canvas),
+  #web_bg
+    animation: to_show 4s
+
+  #ribbon-canvas
+    animation: ribbon_to_show 4s
+
+  #sidebar-menus
+    &.open
+      for i in 1 2 3 4
+        > :nth-child({i})
+          animation: sidebarItem (i / 5)s
+
+.card-announcement-animation
+  color: #FF0000
+  animation: announ_animation .8s linear infinite
+
+.scroll-down-effects
+  animation: scroll-down-effect 1.5s infinite
+
+if hexo-config('avatar.effect') == true
+  .avatar-img
+    animation: avatar_turn_around 2s linear infinite
+
+.reward-main
+  animation: donate_effcet .3s .1s ease both
+
+@keyframes scroll-down-effect
+  0%
+    top: 0
+    opacity: .4
+
+  50%
+    top: -16px
+    opacity: 1
+
+  100%
+    top: 0
+    opacity: .4
+
+@keyframes header-effect
+  0%
+    opacity: 0
+    transform: translateY(-50px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes headerNoOpacity
+  0%
+    transform: translateY(-50px)
+
+  100%
+    transform: translateY(0)
+
+@keyframes main
+  0%
+    opacity: 0
+    transform: translateY(50px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes titlescale
+  0%
+    opacity: 0
+    transform: scale(.7)
+
+  100%
+    opacity: 1
+    transform: scale(1)
+
+@keyframes search_close
+  0%
+    opacity: 1
+    transform: scale(1)
+
+  100%
+    opacity: 0
+    transform: scale(.7)
+
+@keyframes to_show
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
+
+@keyframes ribbon_to_show
+  0%
+    opacity: 0
+
+  100%
+    opacity: hexo-config('canvas_ribbon.alpha')
+
+@keyframes avatar_turn_around
+  from
+    transform: rotate(0)
+
+  to
+    transform: rotate(360deg)
+
+@keyframes sub_menus
+  0%
+    opacity: 0
+    transform: translateY(10px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes donate_effcet
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes announ_animation
+  0%,
+  to
+    transform: scale(1)
+
+  50%
+    transform: scale(1.2)
+
+@keyframes sidebarItem
+  0%
+    transform: translateX(200px)
+
+  100%
+    transform: translateX(0)
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -1,3 +1,32 @@
+[data-theme='light']
+  --global-bg: $body-bg
+  --font-color: $font-black
+  --hr-border: lighten($theme-hr-color, 50%)
+  --hr-before-color: lighten($theme-hr-color, 30%)
+  --search-bg: $search-bg
+  --search-input-color: $search-input-color
+  --search-result-title: $search-result-title
+  --preloader-bg: $preloader-bg
+  --preloader-color: $preloader-word-color
+  --tab-border-color: $tab-border-color
+  --tab-botton-bg: $tab-botton-bg
+  --tab-botton-color: $tab-botton-color
+  --tab-button-hover-bg: $tab-button-hover-bg
+  --tab-button-active-bg: $tab-button-active-bg
+  --card-bg: $card-bg
+  --sidebar-bg: $sidebar-background
+  --btn-hover-color: $button-hover-color
+  --btn-color: $button-color
+  --btn-bg: $button-bg
+  --text-bg-hover: $text-bg-hover
+  --light-grey: $light-grey
+  --white: $white
+  --text-highlight-color: $text-highlight-color
+  --blockquote-color: $blockquote-color
+  --blockquote-bg: $blockquote-background-color
+  --reward-pop: $reward-pop-up-bg
+  --toc-link-color: $toc-link-color
+
 html
  height: 100%
  font-size: 20px
@@ -111,13 +140,24 @@ 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
-#page-header #site_title,
-#page-header #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
@@ -154,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
@@ -168,191 +212,6 @@ img:not([src])
 .post-ad
  margin: 2rem 0

-.ad_height
+.ad-height
  display: block !important
-  height: auto !important
-
-// animation
-#content-inner,
-#footer
-  animation: main 1s
-
-#page-header
-  animation: header-effect 1s
-
-#site_title,
-#site_subtitle
-  animation: titlescale 1s
-
-canvas:not(#ribbon-canvas),
-#web_bg
-  animation: to_show 4s
-
-#ribbon-canvas
-  animation: ribbon_to_show 4s
-
-.card-announcement-animation
-  color: #FF0000
-  animation: announ_animation .8s linear infinite
-
-.scroll-down-effects
-  animation: scroll-down-effect 1.5s infinite
-
-if hexo-config('avatar.effect') == true
-  .avatar-img
-    animation: avatar_turn_around 2s linear infinite
-
-.reward-main
-  animation: donate_effcet .3s .1s ease both
-
-.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
-    transform: translate3d(-100%, 0, 0)
-
-    for i in 1 2 3 4
-      > :nth-child({i})
-        animation: sidebarItem (i / 5)s
-
-@keyframes scroll-down-effect
-  0%
-    top: 0
-    opacity: .4
-
-  50%
-    top: -16px
-    opacity: 1
-
-  100%
-    top: 0
-    opacity: .4
-
-@keyframes header-effect
-  0%
-    opacity: 0
-    transform: translateY(-50px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes headerNoOpacity
-  0%
-    transform: translateY(-50px)
-
-  100%
-    transform: translateY(0)
-
-@keyframes main
-  0%
-    opacity: 0
-    transform: translateY(50px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes titlescale
-  0%
-    opacity: 0
-    transform: scale(.7)
-
-  100%
-    opacity: 1
-    transform: scale(1)
-
-@keyframes search_close
-  0%
-    opacity: 1
-    transform: scale(1)
-
-  100%
-    opacity: 0
-    transform: scale(.7)
-
-@keyframes to_show
-  0%
-    opacity: 0
-
-  100%
-    opacity: 1
-
-@keyframes ribbon_to_show
-  0%
-    opacity: 0
-
-  100%
-    opacity: hexo-config('canvas_ribbon.alpha')
-
-@keyframes avatar_turn_around
-  from
-    transform: rotate(0)
-
-  to
-    transform: rotate(360deg)
-
-@keyframes sub_menus
-  0%
-    opacity: 0
-    transform: translateY(10px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes donate_effcet
-  0%
-    opacity: 0
-    transform: translateY(-20px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes announ_animation
-  0%,
-  to
-    transform: scale(1)
-
-  50%
-    transform: scale(1.2)
-
-@keyframes sidebarItem
-  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)
+  height: auto !important
--- 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'

@@ -126,6 +126,7 @@ blockquote
      text-transform: uppercase
      font-weight: bold
      font-size: 1.15em
+      user-select: none

    .copy-notice
      position: absolute
--- 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
--- 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
--- 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
--- 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
@@ -48,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
@@ -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
@@ -150,6 +164,7 @@

        & > time,
        & > .name
+          display: block
          color: $theme-meta-color
          font-size: 85%

@@ -164,17 +179,13 @@
          &:hover
            color: $text-hover

-  .card-recent-post
-    .thumbnail
-      border-radius: 0 !important
-
-    .no-aside-cover
-      title
-        height: auto
+      &.no-cover
+        min-height: 4.4em

  .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,
@@ -252,23 +263,78 @@
            flex: 1
            padding-right: 1rem

-+maxWidth900()
-  #aside_content
-    width: 100% !important
+  // toc
+  #card-toc
+    +maxWidth900()
+      position: fixed
+      right: 45px
+      bottom: 30px
+      z-index: 100
+      display: none
+      width: $toc-mobile-width
+      transform-origin: right bottom
+      animation: toc-open .3s

-  #aside_content
-    .card-widget:first-child
-      margin-top: 1rem
+      .toc-child
+        display: block !important
+
+    .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: $toc-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(1)
+
+  100%
+    transform: scale(.7)

 +minWidth900()
-  #aside_content
-    .card-widget
-      if hexo-config('aside.position') == 'right'
-        margin-left: 15px
-      else
-        margin-right: 15px
+  html.hide-aside
+    .layout
+      justify-content: center

-if hexo-config('aside.mobile') == false
-  +maxWidth768()
-    #aside_content
-      display: none
+      > .aside_content
+        display: none
+
+      > div:first-child
+        width: 80%
--- 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)
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -2,7 +2,6 @@
  position: relative
  width: 100%
  background-color: $light-blue
-  background-attachment: scroll
  background-position: center center
  background-size: cover
  background-repeat: no-repeat
@@ -19,14 +18,14 @@
      padding: 0 .5rem
      width: 100%

-  #site_title,
-  #site_subtitle,
-  #scroll_down .scroll-down-effects
+  #site-title,
+  #site-subtitle,
+  #scroll-down .scroll-down-effects
    text-align: center
    text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
    line-height: 1.5

-  #site_title
+  #site-title
    margin: 0
    color: var(--white)
    font-size: 1.85em
@@ -34,7 +33,7 @@
    +minWidth768()
      font-size: 2.85em

-  #site_subtitle
+  #site-subtitle
    color: var(--light-grey)
    font-size: 1.15em

@@ -57,7 +56,7 @@
      font-size: 1.43em
      cursor: pointer

-  #scroll_down
+  #scroll-down
    position: absolute
    bottom: 0
    width: 100%
@@ -76,7 +75,7 @@
    +maxWidth768()
      height: 14rem

-  #page_site-info
+  #page-site-info
    position: absolute
    top: 10rem
    padding: 0 .5rem
@@ -102,66 +101,104 @@
      background-color: alpha($dark-black, .5)
      content: ''

-    #post-info
-      position: absolute
+  &.no-top-img
+    margin-bottom: .5rem
+    height: 60px
+    background: 0
+
+    #nav
+      background: rgba(255, 255, 255, .8)
+      box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
+
+      a
+        color: var(--font-color)
+        text-shadow: none
+
+  #post-info
+    position: absolute
+    bottom: 5rem
+    padding: 0 8%
+    width: 100%
+    text-align: center
+
+    +maxWidth900()
      bottom: 1.5rem
-      padding: 0 8%
-      width: 100%
      text-align: left

-      +maxWidth768()
-        bottom: 1.1rem
-        padding: 0 1.1rem
+    +maxWidth768()
+      bottom: 1.1rem
+      padding: 0 1.1rem

-      #post-title
-        margin-bottom: .4rem
-        font-size: 2.15em
+#post-info
+  .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
+    +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%

-      #post-meta
-        color: var(--light-grey)
-        font-size: 95%
+    +minWidth768()
+      > .meta-secondline
+        > span:first-child
+          display: none

-        +minWidth768()
-          > .meta-secondline
-            > span:first-child
-              display: none
+    +maxWidth768()
+      font-size: 90%

-        +maxWidth768()
-          font-size: 90%
+      > .meta-firstline,
+      > .meta-secondline
+        display: inline

-          > .meta-firstline,
-          > .meta-secondline
-            display: inline
+    .post-meta
+      &-separator
+        margin: 0 .25rem

-        .post-meta
-          &-separator
-            margin: 0 .25rem
+      &-icon
+        margin-right: .2rem

-          &-icon
-            margin-right: .2rem
+      &-label
+        if hexo-config('post_meta.post.label')
+          margin-right: .2rem
+        else
+          display: none

-          &-label
-            if hexo-config('post_meta.post.label')
-              margin-right: .2rem
-            else
-              display: none
+    a
+      color: var(--light-grey)
+      transition: all .3s ease-out

-        a
-          color: var(--light-grey)
-          transition: all .3s ease-out
+      &:hover
+        color: $text-hover
+        text-decoration: underline

-          &:hover
-            color: $text-hover
-            text-decoration: underline
+    if hexo-config('post_meta.post.date_format') == 'relative'
+      time
+        display: none
+
+// for not top_img
+#post
+  & > #post-info
+    margin-bottom: 1.5rem
+
+    .post-title
+      padding-bottom: .2rem
+      border-bottom: 1px solid var(--light-grey)
+      color: var(--text-highlight-color)
+
+[data-theme='light']
+  #post
+    #post-info
+      #post-meta,
+      #post-meta a
+        color: #78818a

 // css hack
 // all browser in ios and safari in all apple device
@@ -191,6 +228,9 @@ _:future,
    #menus
      padding-right: 0 !important

+  &.show
+    opacity: 1
+
  #blog_name
    flex: 1

@@ -210,7 +250,7 @@ _:future,

  &.fixed
    position: fixed
-    top: -62px
+    top: -60px
    z-index: 91
    background: rgba(255, 255, 255, .8)
    box-shadow: 0 5px 6px -5px alpha($grey, .6)
--- a/source/css/_layout/loading.styl
+++ b/source/css/_layout/loading.styl
@@ -5,7 +5,6 @@ if hexo-config('preloader')
    width: 50%
    height: 100%
    background-color: var(--preloader-bg)
-    transition: all .5s

  #loading-box
    .loading-left-bg
@@ -53,9 +52,11 @@ if hexo-config('preloader')

    &.loaded
      .loading-left-bg
+        transition: all .5s
        transform: translate(-100%, 0)

      .loading-right-bg
+        transition: all .5s
        transform: translate(100%, 0)

      .spinner-box
--- a/source/css/_layout/mobile-sidebar.styl
+++ b/source/css/_layout/mobile-sidebar.styl
@@ -1,94 +0,0 @@
-#mobile-sidebar
-  #menu_mask
-    position: fixed
-    z-index: 102
-    display: none
-    width: 100%
-    height: 100%
-    background: alpha($dark-black, .8)
-
-  #mobile-sidebar-menus
-    position: fixed
-    top: 0
-    right: -250px
-    z-index: 103
-    overflow-x: hidden
-    overflow-y: auto
-    width: 250px
-    height: 100%
-    background: var(--sidebar-bg)
-    transition: all .5s
-
-    & > .mobile_author_icon
-      padding: 1.3rem 1.5rem 0
-      text-align: center
-
-      img
-        width: 110px
-        height: 110px
-        border-radius: 70px
-        transition: all .5s
-
-        &:hover
-          transform: rotate(360deg)
-
-    .mobile_post_data
-      display: table
-      padding: .6rem .5rem 0
-      width: 100%
-      table-layout: fixed
-
-      .mobile_data_item
-        display: table-cell
-
-        .mobile_data_link
-          & > a > div
-            @extend .limit-one-line
-
-          .length_num
-            color: var(--text-highlight-color)
-            font-size: 1.28em
-
-          .headline
-            color: var(--font-color)
-
-    hr
-      margin: 1rem auto
-
-    .menus_items
-      padding: 0 .5rem 2rem
-
-      .site-page
-        @extend .limit-one-line
-        position: relative
-        display: block
-        padding: .3rem 1.5rem
-        color: var(--font-color)
-        font-size: 1.15em
-        cursor: pointer
-
-        i:first-child
-          width: 30%
-          text-align: left
-
-        span
-          width: 70%
-
-          &:hover
-            color: $light-blue
-
-      .expand
-        position: absolute
-        top: .78em
-        right: .4rem
-        transition: transform .3s
-
-        &.hide
-          transform: rotate(90deg) !important
-
-      .menus_item_child
-        margin: 0
-        list-style: none
-
-        if hexo-config('hide_sidebar_menu_child')
-          display: none
--- 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
--- 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
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -36,5 +36,9 @@
  #mobile-toc-button
    display: none

-    +maxWidth1024()
+    +maxWidth900()
      display: block
+
+  +maxWidth900()
+    #hide-aside-btn
+      display: none
--- a/source/css/_layout/sidebar.styl
+++ b/source/css/_layout/sidebar.styl
@@ -1,88 +1,97 @@
-#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
+  #menu-mask
+    position: fixed
+    z-index: 102
+    display: none
+    width: 100%
+    height: 100%
+    background: alpha($dark-black, .8)

-  &.tocOpenPc
-    & > #toggle-sidebar
-      color: #99a9bf
-      transform: rotateZ(180deg)
-
-  +maxWidth1024()
-    right: -($mobile-sidebar-width)
-    left: auto
+  #sidebar-menus
+    position: fixed
+    top: 0
+    right: -($sidebar-width)
    z-index: 103
-    width: $mobile-sidebar-width
-    box-shadow: none
-    opacity: 1
-    transition: all .4s
+    overflow-x: hidden
+    overflow-y: auto
+    width: $sidebar-width
+    height: 100%
+    background: var(--sidebar-bg)
+    transition: all .5s

-    .toc-child
-      display: block !important
+    &.open
+      transform: translate3d(-100%, 0, 0)

-  .sidebar-toc
-    ol,
-    li
-      list-style: none
-
-    ol
-      margin-top: .2rem
-      padding-left: .4rem
-
-    &__title
-      padding-right: .5rem
+    & > .author-avatar
+      padding: 1.3rem 1.5rem 0
      text-align: center
-      font-size: 1.3em

-    &__content
-      overflow-y: scroll
-      padding-bottom: 5rem
-      height: 90vh
+      img
+        width: 110px
+        height: 110px
+        border-radius: 70px
+        transition: all .5s

-    .toc-link
-      display: block
-      padding-left: .2rem
-      border-right: 3px solid transparent
-      transition: all .2s ease-in-out
+        &:hover
+          transform: rotate(360deg)

-      &.active
-        border-right-color: darken($theme-toc-color, 20%)
-        background: $theme-toc-color
-        color: $sidebar-active-color
+    .site-data
+      display: table
+      padding: .6rem .5rem 0
+      width: 100%
+      table-layout: fixed

-    &__progress
-      position: relative
-      margin-bottom: .3rem
-      padding-left: .6rem
-      color: $theme-toc-color
+      .data-item
+        display: table-cell

-      .progress-notice
-        margin-right: .4rem
+        .data-item-link
+          & > a > div
+            @extend .limit-one-line

-      .progress-num
-        display: inline-block
-        min-width: .9rem
+          .length-num
+            color: var(--text-highlight-color)
+            font-size: 1.28em

-      &-bar
-        width: 0
-        height: 1px
-        background: $theme-toc-color
+          .headline
+            color: var(--font-color)
+
+    hr
+      margin: 1rem auto
+
+    .menus_items
+      padding: 0 .5rem 2rem
+
+      .site-page
+        @extend .limit-one-line
+        position: relative
+        display: block
+        padding: .3rem 1.5rem
+        color: var(--font-color)
+        font-size: 1.15em
+        cursor: pointer
+
+        i:first-child
+          width: 25%
+          text-align: left
+
+        span
+          width: 75%
+
+          &:hover
+            color: $light-blue
+
+      .expand
+        position: absolute
+        top: .78em
+        right: .4rem
+        transition: transform .3s
+
+        &.hide
+          transform: rotate(90deg) !important
+
+      .menus_item_child
+        margin: 0
+        list-style: none
+
+        if hexo-config('hide_sidebar_menu_child')
+          display: none
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -1,5 +1,5 @@
 #vcomment
-  font-size: 1.15em
+  font-size: 1.1em

  .vbtn
    border: none
@@ -13,6 +13,9 @@
    textarea
      background: url(hexo-config('valine.bg')) 100% 100% no-repeat

+      &:focus
+        background-image: none
+
  .vimg
    transition: all .3s

@@ -58,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
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -1,49 +1,42 @@
 if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
  [data-theme='dark']
    --global-bg: darken(#121212, 2)
-    --font-color: alpha(#FFFFFF, .6)
-    --hr-border: alpha(#FFFFFF, .3)
-    --hr-before-color: alpha(#FFFFFF, .6)
+    --font-color: alpha(#FFFFFF, .7)
+    --hr-border: alpha(#FFFFFF, .4)
+    --hr-before-color: alpha(#FFFFFF, .7)
    --search-bg: #121212
-    --search-input-color: alpha(#FFFFFF, .6)
-    --search-result-title: alpha(#FFFFFF, .8)
+    --search-input-color: alpha(#FFFFFF, .7)
+    --search-result-title: alpha(#FFFFFF, .9)
    --preloader-bg: darken(#121212, 2)
-    --preloader-color: alpha(#FFFFFF, .6)
+    --preloader-color: alpha(#FFFFFF, .7)
    --tab-border-color: #2c2c2c
    --tab-botton-bg: #2c2c2c
-    --tab-botton-color: alpha(#FFFFFF, .6)
+    --tab-botton-color: alpha(#FFFFFF, .7)
    --tab-button-hover-bg: lighten(#121212, 15)
    --tab-button-active-bg: #121212
    --card-bg: #121212
    --sidebar-bg: #121212
    --btn-hover-color: lighten(#121212, 40)
-    --btn-color: alpha(#FFFFFF, .6)
+    --btn-color: alpha(#FFFFFF, .7)
    --btn-bg: lighten(#121212, 5)
    --text-bg-hover: lighten(#121212, 15)
-    --light-grey: alpha(#FFFFFF, .6)
-    --white: alpha(#FFFFFF, .8)
-    --text-highlight-color: alpha(#FFFFFF, .8)
-    --blockquote-color: alpha(#FFFFFF, .6)
+    --light-grey: alpha(#FFFFFF, .7)
+    --white: alpha(#FFFFFF, .9)
+    --text-highlight-color: alpha(#FFFFFF, .9)
+    --blockquote-color: alpha(#FFFFFF, .7)
    --blockquote-bg: lighten(#121212, 10)
    --reward-pop: lighten(#121212, 10)
-    --sidebar-icon-color: alpha(#FFFFFF, .6)
+    --toc-link-color: alpha(#FFFFFF, .6)

-    // 網站背景，footer背景
-    #web_bg[data-type=color],
-    #footer[data-type=color]
-      background: darken(#121212, 2)
-
-    #web_bg[data-type=photo]:before,
-    #footer[data-type=photo]:before
+    #web_bg:before,
+    #footer:before,
+    #page-header:before
      position: absolute
      width: 100%
      height: 100%
      background-color: alpha($dark-black, .7)
      content: ''

-    #page-header
-      background-color: #121212
-
    #article-container
      code
        background: #2c2c2c
@@ -55,39 +48,32 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        code
          background: $code-background

+      .aplayer
+        filter: brightness(.8)
+
    // 頭部
    #page-header
-      &:before
-        position: absolute
-        top: 0
-        left: 0
-        display: block
-        width: 100%
-        height: 100%
-        background-color: alpha($dark-black, .7)
-        content: ''
-
-      & > #nav
-        &.fixed
-          background: alpha(#121212, .8)
-          box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+      & > #nav.fixed,
+      &.no-top-img #nav
+        background: alpha(#121212, .8)
+        box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)

    // 代碼框
    #article-container
      pre,
      .highlight:not(.js-file-line-container)
        background-color: lighten(#121212, 2) !important
-        color: alpha(#FFFFFF, .6) !important
+        color: alpha(#FFFFFF, .7) !important

      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)

          .line:before
-            color: alpha(#FFFFFF, .6) !important
+            color: alpha(#FFFFFF, .7) !important

          .hljs
            background-color: lighten(#121212, 2) !important
@@ -100,17 +86,17 @@ 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
-          filter: brightness(.7)
+        .switch-btn
+          filter: brightness(.8)

    // note
    if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
      .note
-        filter: brightness(.7)
+        filter: brightness(.8)

    // hide-tags
    .hide-button,
@@ -120,9 +106,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
    .error-img,
    #article-container iframe,
    img,
-    .gist,
-    .aplayer
-      filter: brightness(.7)
+    .gist
+      filter: brightness(.8)

    #aside_content .aside-list > .aside-list-item:not(:last-child)
      border-bottom: 1px dashed alpha(#FFFFFF, .1)
@@ -132,7 +117,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
    #hexo-blog-encrypt
      label,
      input
-        color: alpha(#FFFFFF, .6) !important
+        color: alpha(#FFFFFF, .7) !important

      input
        background-color: #121212
@@ -142,24 +127,30 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      filter: brightness(.8)

      svg
-        fill: alpha(#FFFFFF, .8) !important
+        fill: alpha(#FFFFFF, .9) !important

    // Disqus and Disqusjs
    #disqus_thread
      #dsqjs
        .dsqjs-tab-active,
        .dsqjs-no-comment
-          color: alpha(#FFFFFF, .6)
+          color: alpha(#FFFFFF, .7)

        .dsqjs-order-label
          background-color: lighten(#121212, 5)

        .dsqjs-post-body
-          color: alpha(#FFFFFF, .6)
+          color: alpha(#FFFFFF, .7)

          code,
          pre
            background: #2c2c2c

          blockquote
-            color: alpha(#FFFFFF, .6)
+            color: alpha(#FFFFFF, .7)
+
+    #artitalk_main #lazy
+      background: #121212
+
+    #operare_artitalk .c2
+      background: #121212
--- 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)
--- a/source/css/_page/categories.styl
+++ b/source/css/_page/categories.styl
@@ -1,14 +1,16 @@
-.category-content
+#page
  .category-lists
    padding: 1rem 0 1.5rem

    +maxWidth768()
      padding: 0

-    .category__title
-      text-align: center
+    .category-title
      font-size: 2.57em

+      +maxWidth768()
+        font-size: 2em
+
    .category-list
      a
        color: var(--font-color)
--- 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,42 +10,43 @@
  +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)
+
+    &:hover
+      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+
    +maxWidth768()
      padding: 1.8rem .7rem !important

  & > div:first-child
    width: 75%
+    transition: all .3s

    +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)
-
-+minWidth900()
-  if hexo-config('aside.position') == 'left'
-    #recent-posts,
-    #page,
-    .category-content,
-    #archive,
-    .tag-cloud,
-    #tag,
-    #category
-      order: 2
+#page
+  h1.page-title
+    margin-top: .4rem
--- a/source/css/_layout/flink.styl
+++ b/source/css/_layout/flink.styl
--- a/source/css/_page/homepage.styl
+++ b/source/css/_page/homepage.styl
@@ -107,6 +107,10 @@
        .fa-angle-right
          margin: 0 .2rem

+        if hexo-config('post_meta.page.date_format') == 'relative'
+          time
+            display: none
+
        a
          color: $theme-meta-color

--- a/source/css/_page/tags.styl
+++ b/source/css/_page/tags.styl
@@ -1,14 +1,19 @@
 .tag-cloud
-  text-align: center
+  &-list
+    a
+      display: inline-block
+      padding: 0 .4rem
+      transition: all .3s

-  a
-    display: inline-block
-    padding: 0 .4rem
-    transition: all .3s
+      &:hover
+        color: $text-hover !important
+        transform: scale(1.1)

-    &:hover
-      color: $text-hover !important
-      transform: scale(1.1)
+      +maxWidth768()
+        zoom: .85

-  &__title
+  &-title
    font-size: 2.57em
+
+    +maxWidth768()
+      font-size: 2em
--- 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
+      .ais-pagination--item.current
+        a
+          background: $theme-paginator-color
+          color: #eee
+          cursor: default
+
+    .algolia-logo
+      padding-top: 2px
+      width: 4rem
+      height: 1.5rem
--- 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
--- a/source/css/_tags/button.styl
+++ b/source/css/_tags/button.styl
@@ -32,9 +32,9 @@
    &:hover
      text-decoration: none

-    for $type in $btn-types
+    for $type in $tagsP-types
      &.{$type}
-        background-color: lookup('$btn-' + $type + '-color')
+        background-color: lookup('$tagsP-' + $type + '-color')

    &.outline
      border: 1px solid transparent
@@ -49,10 +49,10 @@
      &:hover
        color: white !important

-      for $type in $btn-types
+      for $type in $tagsP-types
        &.{$type}
-          border-color: lookup('$btn-' + $type + '-color')
-          color: lookup('$btn-' + $type + '-color')
+          border-color: lookup('$tagsP-' + $type + '-color')
+          color: lookup('$tagsP-' + $type + '-color')

          &.button--animated:before
-            background: lookup('$btn-' + $type + '-color')
+            background: lookup('$tagsP-' + $type + '-color')
--- a/source/css/_tags/note.styl
+++ b/source/css/_tags/note.styl
@@ -1,28 +1,51 @@
 .note
  $note-icons = hexo-config('note.icons')
-  $note-style = hexo-config('note.style')
  position: relative
  margin: 0 0 1rem
  padding: 15px

-  if ($note-style == 'simple')
+  if hexo-config('note.border_radius') is a 'unit'
+    border-radius: unit(hexo-config('note.border_radius'), px)
+
+  &.icon
+    padding-left: 2.25rem
+
+  & > .note-icon
+    position: absolute
+    top: calc(50% - .4rem)
+    left: .7rem
+    font-size: larger
+
+  for $type in $tagsP-types
+    &.{$type}
+      &:not(.disabled)
+        border-left-color: lookup('$tagsP-' + $type + '-color') !important
+
+        &.modern
+          border-left-color: transparent !important
+          color: lookup('$tagsP-' + $type + '-color')
+
+        &:not(.simple)
+          background: lighten(lookup('$tagsP-' + $type + '-color'), 85%) !important
+
+      & > .note-icon
+        color: lookup('$tagsP-' + $type + '-color')
+
+  &.simple
    border: 1px solid #EEEEEE
    border-left-width: 5px

-  if ($note-style == 'modern')
-    border: 1px solid transparent
+  &.modern
+    border: 1px solid transparent !important
    background-color: #f5f5f5
    color: $font-black

-  if ($note-style == 'flat')
+  &.flat
    border: initial
    border-left: 5px solid #EEEEEE
    background-color: lighten(#EEEEEE, 65%)
    color: $font-black

-  if hexo-config('note.border_radius') is a 'unit'
-    border-radius: unit(hexo-config('note.border_radius'), px)
-
  h2,
  h3,
  h4,
@@ -52,21 +75,21 @@

  if $note-icons
    &:not(.no-icon)
-      padding-left: 45px
+      padding-left: 2.25rem

      &::before
        position: absolute
-        top: 13px
-        left: 15px
+        top: calc(50% - .8rem)
+        left: .7rem
        font-size: larger
        @extend .fontawesomeIcon

  for $type in $note-types
    &.{$type}
-      if ($note-style == 'flat')
+      &.flat
        background: lookup('$note-' + $type + '-bg')

-      if ($note-style == 'modern')
+      &.modern
        border-color: lookup('$note-modern-' + $type + '-border')
        background: lookup('$note-modern-' + $type + '-bg')
        color: lookup('$note-modern-' + $type + '-text')
@@ -78,7 +101,7 @@
            &:hover
              color: lookup('$note-modern-' + $type + '-hover')

-      if ($note-style != 'modern')
+      &:not(.modern)
        border-left-color: lookup('$note-' + $type + '-border')

        h2,
@@ -89,8 +112,10 @@
          color: lookup('$note-' + $type + '-text')

      if $note-icons
-        &:not(.no-icon)::before
-          content: lookup('$note-' + $type + '-icon')
+        &:not(.no-icon)
+          &::before
+            content: lookup('$note-' + $type + '-icon')

-          if ($note-style != 'modern')
-            color: lookup('$note-' + $type + '-text')
+          &:not(.modern)
+            &::before
+              color: lookup('$note-' + $type + '-text')
--- 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'
@@ -32,7 +32,7 @@ $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font
 $font-color = #1F2D3D
 $rem = 20px
 $text-line-height = 2
-$web-bg = hexo-config('background') && convert(hexo-config('background'))
+$web-bg = hexo-config('background') && unquote(hexo-config('background'))
 $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
 $index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
 // Global color & SVG
@@ -58,14 +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
@@ -160,16 +158,16 @@ $note-modern-danger-border = #ebcdd2
 $note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
 $note-modern-danger-text = #a94442
 $note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
-// Tag Plugins - Button
-$btn-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
+// Tag Plugins - Button/note
+$tagsP-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
 $btn-color = #fff
 $btn-default-color = #777
-$btn-blue-color = #428bca
-$btn-pink-color = #FF69B4
-$btn-red-color = #FF0000
-$btn-orange-color = #FF8C00
-$btn-purple-color = #6f42c1
-$btn-green-color = #5cb85c
+$tagsP-blue-color = #428bca
+$tagsP-pink-color = #FF69B4
+$tagsP-red-color = #FF0000
+$tagsP-orange-color = #FF8C00
+$tagsP-purple-color = #6f42c1
+$tagsP-green-color = #5cb85c
 // Tag Plugins - Tab
 $tab-border-color = #f0f0f0
 $tab-botton-bg = #f0f0f0
--- 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,153 +17,45 @@ $(function () {

  // 初始化header
  const initAdjust = () => {
-    if (window.innerWidth < 768) adjustMenu(0)
-    else adjustMenu(2)
-    $('#nav').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
+    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 $mobileSidebarMenus = $('#sidebar-menus')
+    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)')
-    mql.addListener((ev) => {
-      if (ev.matches) {
-        if ($sidebar.hasClass('tocOpenPc')) closeSidebar()
-      } else {
-        if ($('#toggle-sidebar').hasClass('on')) openSidebar()
-        if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc')
-      }
-    })
-
-    // 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()
      }
    })
  }
@@ -182,7 +64,7 @@ $(function () {
 * 首頁top_img底下的箭頭
 */
  const scrollDownInIndex = () => {
-    $('#scroll_down').on('click', function () {
+    $('#scroll-down').on('click', function () {
      btf.scrollToDest('#content-inner')
    })
  }
@@ -345,9 +227,7 @@ $(function () {
 * fancybox和 mediumZoom
 */
  const addLightBox = function () {
-    const isMediumZoom = GLOBAL_CONFIG.medium_zoom
-    const isFancybox = GLOBAL_CONFIG.fancybox
-    if (isFancybox) {
+    if (GLOBAL_CONFIG.lightbox === 'fancybox') {
      const images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
      images.each(function (i, o) {
        const lazyloadSrc = $(o).attr('data-lazy-src') ? $(o).attr('data-lazy-src') : $(o).attr('src')
@@ -363,7 +243,7 @@ $(function () {
        buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
        hash: false
      })
-    } else if (isMediumZoom) {
+    } else {
      const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
      zoom.on('open', function (event) {
        const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
@@ -425,14 +305,19 @@ $(function () {
 *  toc
 */
  const tocFn = function () {
-    $('.toc-child').hide()
+    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()

    // main of scroll
    $(window).scroll(btf.throttle(function (event) {
      const currentTop = $(this).scrollTop()
      scrollPercent(currentTop)
      findHeadPosition(currentTop)
-      autoScrollToc(currentTop)
    }, 100))

    // expand toc-item
@@ -444,20 +329,16 @@ $(function () {
    }

    const scrollPercent = function (currentTop) {
-      const $dom = $('#article-container')
-      const docHeight = $dom.height()
+      const docHeight = $article.height()
      const winHeight = $(window).height()
-      const headerHeight = $dom.offset().top
+      const headerHeight = $article.offset().top
      const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
      const scrollPercent = (currentTop - headerHeight) / (contentMath)
      const scrollPercentRounded = Math.round(scrollPercent * 100)
      const percentage = (scrollPercentRounded > 100) ? 100
        : (scrollPercentRounded <= 0) ? 0
          : scrollPercentRounded
-      $('#sidebar .progress-num').text(percentage)
-      $('#sidebar .sidebar-toc__progress-bar').animate({
-        width: percentage + '%'
-      }, 100)
+      $cardToc.attr('progress-percentage', percentage)
    }

    // anchor
@@ -468,41 +349,83 @@ $(function () {
      }
    }

+    const mobileToc = {
+      open: () => {
+        $cardTocLayout.css('display', 'block')
+      },
+
+      close: () => {
+        $cardTocLayout.css('animation', 'toc-close .2s')
+        setTimeout(() => {
+          $cardTocLayout.css({ display: '', animation: '' })
+        }, 100)
+      }
+    }
+
+    $('#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 = $cardToc
+      const sidebarScrollTop = $tocContent.scrollTop()
+      if (activePosition > (currentTop + $(window).height() - 100)) {
+        $tocContent.scrollTop(sidebarScrollTop + 100)
+      }
+      if (activePosition < currentTop + 100) {
+        $tocContent.scrollTop(sidebarScrollTop - 100)
+      }
+    }
+
    // find head position & add active class
    // 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) {
    // assume that we are not in the post page if no TOC link be found,
    // thus no need to update the status
-      if ($('.toc-link').length === 0) {
+      if ($tocLink.length === 0) {
        return false
      }

-      const list = $('#article-container').find('h1,h2,h3,h4,h5,h6')
      let currentId = ''
      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'))
        }
      })

      if (currentId === '') {
-        $('.toc-link').removeClass('active')
-        $('.toc-child').hide()
+        $tocLink.removeClass('active')
+        $tocChild.hide()
      }

-      const currentActive = $('.toc-link.active')
+      const currentActive = $tocLink.filter('.active')
      if (currentId && currentActive.attr('href') !== currentId) {
        if (isAnchor) updateAnchor(currentId)

-        $('.toc-link').removeClass('active')
+        $tocLink.removeClass('active')

-        const _this = $('.toc-link[href="' + currentId + '"]')
+        const _this = $tocLink.filter('[href="' + currentId + '"]')
        _this.addClass('active')
+        autoScrollToc(top, _this)

        const parents = _this.parents('.toc-child')
        // Returned list is in reverse order of the DOM elements
@@ -518,19 +441,6 @@ $(function () {
          .find('.toc-child').hide()
      }
    }
-
-    const autoScrollToc = function (currentTop) {
-      if ($('.toc-link').hasClass('active')) {
-        const activePosition = $('.active').offset().top
-        const sidebarScrollTop = $('#sidebar .sidebar-toc__content').scrollTop()
-        if (activePosition > (currentTop + $(window).height() - 100)) {
-          $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrollTop + 100)
-        }
-        if (activePosition < currentTop + 100) {
-          $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrollTop - 100)
-        }
-      }
-    }
  }

  /**
@@ -573,13 +483,24 @@ $(function () {
  // Back to top
  $rightsideEle.on('click', '#go-up', () => btf.scrollToDest('body'))

+  $rightsideEle.on('click', '#hide-aside-btn', () => {
+    const $htmlDom = $(document.documentElement)
+    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)
+    }
+  })
+
  /**
 * menu
 * 側邊欄sub-menu 展開/收縮
 * 解決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')
    })
@@ -650,22 +571,6 @@ $(function () {
    })
  }

-  /**
- * 百度推送
- */
-  const pushToBaidu = () => {
-    const bp = document.createElement('script')
-    const curProtocol = window.location.protocol.split(':')[0]
-    if (curProtocol === 'https') {
-      bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'
-    } else {
-      bp.src = 'http://push.zhanzhang.baidu.com/push.js'
-    }
-    bp.dataset.pjax = ''
-    const s = document.getElementsByTagName('script')[0]
-    s.parentNode.insertBefore(bp, s)
-  }
-
  /**
 * tag-hide
 */
@@ -719,20 +624,21 @@ $(function () {
    const $cardCategory = $('#aside-cat-list .card-category-list-item.parent i')
    $cardCategory.on('click', function (e) {
      e.preventDefault()
-      const $this = $(this)
-      $this.toggleClass('expand')
-      $this.parents('.parent').next().toggle()
+      $(this).toggleClass('expand').parents('.parent').next().slideToggle(300)
    })
  }

  const switchComments = function () {
    let switchDone = false
-    $('#switch-comments-btn').on('click', function () {
-      $('#post-comment > .comment-wrap > div').each(function () {
-        if ($(this).is(':visible')) {
-          $(this).hide()
+    $('#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')) {
+          $this.hide()
        } else {
-          $(this).css({
+          $this.css({
            display: 'block',
            animation: 'tabshow .5s'
          })
@@ -766,27 +672,36 @@ $(function () {
    })
  }

+  const relativeDate = function (selector) {
+    selector.each((i, o) => {
+      const $this = $(o)
+      const timeVal = $this.attr('datetime')
+      $this.text(btf.diffDate(timeVal, true)).css('display', 'inline')
+    })
+  }
+
  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()
    GLOBAL_CONFIG.islazyload && lazyloadImg()
    GLOBAL_CONFIG.copyright !== undefined && addCopyright()
-    GLOBAL_CONFIG.baiduPush && pushToBaidu()
  }

  window.refreshFn = 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 {
+      GLOBAL_CONFIG.relativeDate.homepage && relativeDate($('#recent-posts time'))
+      GLOBAL_CONFIG.runtime && addRuntime()
+      addLastPushDate()
+      toggleCardCategory()
    }

    sidebarFn()
@@ -794,15 +709,12 @@ $(function () {
    GLOBAL_CONFIG.highlight && addHighlightTool()
    GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
    runJustifiedGallery()
-    addLightBox()
+    GLOBAL_CONFIG.lightbox !== 'null' && addLightBox()
    scrollFn()
-    GLOBAL_CONFIG.runtime && addRuntime()
-    addLastPushDate()
    addTableWrap()
    clickFnOfTagHide()
    tabsFn.clickFnOfTabs()
    tabsFn.backToTop()
-    toggleCardCategory()
    switchComments()
  }

--- a/Show More
+++ b/Show More