🏷️ 2.3.0 發佈

Merge branch 'dev' of https://github.com/jerryc127/hexo-theme-butterfly into dev
🏷️ 2.3.0發佈
2026-04-16 20:30:53 +08:00 · 2020-04-26 23:31:39 +08:00 · 2020-04-26 23:31:03 +08:00 · 2020-04-26 23:29:38 +08:00 · 2020-04-26 14:41:53 +08:00 · 2020-04-21 21:36:21 +08:00
83 changed files with 1649 additions and 1107 deletions
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,8 +1,15 @@
 <!--
 IMPORTANT: Please follow the template to create a new issue.
 重要：請依照該模板來提交。
+
+If you upgrade from the old version, and an error occurs when running, please copy the new content in the config to the butterfly.yml
+如果你是由舊版本升級到新版，運行時出現報錯，請首先把config裏新的內容複製到舊的butterfly設置去
+
+If you are a problem when visit the website, please open your browser 'developer tools (shortcut F12)' and check the console if there is an error, include your website address in the feedback
+如果你是線上訪問出現問題，請檢查瀏覽器‘開發人員工具（快捷鍵F12）’的console是否有報錯，反饋時附上你的網站
 -->

+
 ## I want to create a new issue <!-- 我想要建立一個新的issue --> 

 <!-- Check all with "x" especially FAQ & Documentation!! (使用 "x" 選擇) -->
--- a/README.md
+++ b/README.md
@@ -1,19 +1,17 @@
 # hexo-theme-butterfly

-<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.2.5-blue"/></a>
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.3.0-blue"/></a>
 <a href="https://jerryc.me"><img alt="Author" src="https://img.shields.io/badge/author-JerryC-blur"/></a>
 <a href="https://hexo.io"><img alt="Hexo" src="https://img.shields.io/badge/hexo-4.0+-0e83c"/></a>
 <a href="https://nodejs.org/"><img alt="node.js" src="https://img.shields.io/badge/node.js-8.0+-blur"/></a>

-Demo:  https://demo.jerryc.me/
-
-JerryC:  https://jerryc.me/
+Demo:  👍 [Butterfly](https://demo.jerryc.me/)  ||   🤞 [JerryC](https://jerryc.me/)

 Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) theme.

 ## Installation

-Stable branch:
+Stable branch [recommend]:

 ```
 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
--- a/README_CN.md
+++ b/README_CN.md
@@ -1,20 +1,17 @@
 # hexo-theme-butterfly

-<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.2.5-blue"/></a>
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.3.0-blue"/></a>
 <a href="https://jerryc.me"><img alt="Author" src="https://img.shields.io/badge/author-JerryC-blur"/></a>
 <a href="https://hexo.io"><img alt="Hexo" src="https://img.shields.io/badge/hexo-4.0+-0e83c"/></a>
 <a href="https://nodejs.org/"><img alt="node.js" src="https://img.shields.io/badge/node.js-8.0+-blur"/></a>

-Demo:  https://demo.jerryc.me/ 
-
-JerryC:  https://jerryc.me/
-
+Demo:  👍 [Butterfly](https://demo.jerryc.me/)  ||   🤞 [JerryC](https://jerryc.me/)

 一款基於[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主題

 ## 安裝

-在你的博客根目錄裡
+在你的博客根目錄裡安裝穩定版【推薦】

 ```
 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
--- a/_config.yml
+++ b/_config.yml
@@ -67,7 +67,7 @@ algolia_search:
  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"
+    hits_stats: '${hits} results found in ${time} ms'

 # Local search
 # Please see doc for more details: https://docs.jerryc.me/config.html#本地搜索
@@ -155,7 +155,7 @@ lodding_bg:
 # A simple 404 page
 error_404:
  enable: false
-  subtitle: "Page Not Found"
+  subtitle: 'Page Not Found'
  background:

 post_meta:
@@ -221,7 +221,7 @@ addtoany:
 disqus:
  enable: false
  shortname:
-  count: false # top_img顯示評論數
+  count: false # dispaly comment count in top_img

 # Disqus.js版評論系統，應對大陸長城的折中方案，兼容原版：https://github.com/SukkaW/DisqusJS
 # API 申請地址：https://disqus.com/api/applications/
@@ -234,7 +234,7 @@ disqusjs:
  api: https://disqus.skk.moe/disqus/ #一般情況下無需修改 API 地址
  admin:
  adminLabel:
-  count: true # top_img顯示評論數
+  count: false # dispaly comment count in top_img

 laibili:
  enable: false
@@ -252,24 +252,27 @@ gitalk:
  distractionFreeMode: false # Facebook-like distraction free mode.
  pagerDirection: last # Comment sorting direction, available values are last and first.
  createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
-  count: true # top_img顯示評論數
+  count: false # dispaly comment count in top_img

 # valine comment system. https://valine.js.org
 valine:
  enable: false # if you want use valine,please set this value is true
  appId: # leancloud application app id
  appKey: # leancloud application app key
-  notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
-  verify: false # valine verify code (true/false)
+  notify: false # valine mail notify (true/false) Deprecated in v1.4.0+
+  verify: false # valine verify code (true/false) Deprecated in v1.4.0+
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
-  lang: en # i18n: zh-cn/en
+  lang: en # i18n: zh-CN/zh-TW/en/ja
  placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
+  emojiCDN: # emoji CDN
+  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
+  requiredFields: nick,mail # required fields nick/mail/link
  bg: /img/comment_bg.png # valine background
-  count: true # top_img顯示評論數
+  count: false # dispaly comment count in top_img

 # utterances
 # https://utteranc.es/
@@ -282,6 +285,17 @@ utterances:
  light_theme: github-light
  dark_theme: photon-dark

+# Facebook Comments Plugin
+# https://developers.facebook.com/docs/plugins/comments/
+facebook_comments:
+  enable: false
+  app_id:
+  user_id: # optional
+  pageSize: 10 # The number of comments to show
+  order_by: social # social/time/reverse_time
+  lang: en_US # Language en_US/zh_CN/zh_TW and so on
+  count: false
+
 #####     Footer Settings    ####
 # ------------------------------------
 since: 2020
@@ -425,7 +439,7 @@ canvas_ribbon_piao:
 # https://github.com/hustcc/canvas-nest.js
 canvas_nest:
  enable: false
-  color: "0,0,255" #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
+  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
@@ -451,8 +465,9 @@ click_heart:
 ClickShowText:
  enable: false
  text:
-    - 本人
-    - 超帥
+    - I
+    - LOVE
+    - YOU
  fontSize: 15px

 # 網站顯示模式
@@ -464,7 +479,7 @@ display_mode: light
 beautify:
  enable: false
  title-prefix-icon: '\f0c1'
-  title-prefix-icon-color: "#F47466"
+  title-prefix-icon-color: '#F47466'

 # 全局字體
 font:
@@ -493,8 +508,8 @@ subtitle:
  loop: false
  # source調用第三方服務
  # source: false 關閉調用
-  # source: 1  調用金山詞霸的每日一句（簡體）
-  # source: 2  調用一言網的一句話（簡體） #https://hitokoto.cn/
+  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
+  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
@@ -510,6 +525,9 @@ subtitle:
 fontawesome_v5:
  enable: false

+# 加載動畫 Loading Animation
+preloader: false
+
 ####    側邊欄    ####
 #-------------------------------------
 # 側邊欄顯示設置
@@ -517,18 +535,30 @@ aside:
  enable: true
  mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
  position: right # left or right
-  card_author: true
-  card_announcement: true
-  card_recent_post: true
-  card_categories: true
-  card_tags: true
-  card_archives: true
+  card_author:
+    enable: true
+    description:
+  card_announcement:
+    enable: true
+    content: This is my Blog
+  card_recent_post:
+    enable: true
+    limit: 5 # if set 0 will show all
+  card_categories:
+    enable: true
+    limit: 8 # if set 0 will show all
+  card_tags:
+    enable: true
+    limit: 40 # if set 0 will show all
+    color: false
+  card_archives:
+    enable: true
+    type: monthly # yearly or monthly
+    format: MMMM YYYY # eg: YYYY年MM月
+    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
+    limit: 8 # if set 0 will show all
  card_webinfo: true

-# 網站公告
-announcement:
-  content: 感謝訪問本站，若喜歡請收藏 ^_^
-
 # busuanzi count for PV / UV in site
 # 訪問人數
 busuanzi:
@@ -555,11 +585,11 @@ translate:
  #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
  translateDelay: 0
  #博客網址
-  cookieDomain: "https://xxx/"
+  cookieDomain: 'https://xxx/'
  #當文字是簡體時，按鈕顯示的文字
-  msgToTraditionalChinese: "繁"
+  msgToTraditionalChinese: '繁'
  #當文字是繁體時，按鈕顯示的文字
-  msgToSimplifiedChinese: "簡"
+  msgToSimplifiedChinese: '簡'

 #閲讀模式
 readmode:
@@ -598,8 +628,8 @@ fancybox:
 snackbar:
  enable: false
  position: bottom-left
-  bg_light: "#49b1f5" #light mode時彈窗背景
-  bg_dark: "#2d3035" #dark mode時彈窗背景
+  bg_light: '#49b1f5' #light mode時彈窗背景
+  bg_dark: '#2d3035' #dark mode時彈窗背景

 #百度推送
 baidu_push:
@@ -653,21 +683,23 @@ Open_Graph_meta: true
 # 開啟hexo自帶的緩存，加快生成速度
 fragment_cache: true

-# CDN
-# 網站必須
-# 可根據需要自行添加js/css
-CDN_USE:
-  css:
-    - /css/index.css
-
-  js:
-    - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js
-    - /js/utils.js
-    - /js/main.js
+# inject
+# 插入代码到头部</head>之前 和 尾部</body>之前
+inject:
+  head:
+  # - <link rel="stylesheet" href="xxxxx">
+  bottom:
+    # - <script src="xxxx"></script>

 # CDN
 # 非必要不要修改
 CDN:
+  # main
+  main_css: /css/index.css
+  jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
+  main: /js/main.js
+  utils: /js/utils.js
+
  # comments
  blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js
  gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
@@ -729,4 +761,5 @@ CDN:
  fontawesome_v4: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
  fontawesome_v5: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css

+  # 簡繁轉換
  translate: /js/tw_cn.js
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -61,7 +61,7 @@ aside:
  card_tags: Tags
  card_archives: Archives
  card_recent_post: Recent Post
-  card_bookmark: Add to bookmark
+  card_bookmark: Bookmark
  card_webinfo:
    headline: Info
    article_name: Article
@@ -69,6 +69,7 @@ aside:
    site_wordcount: Total Count
    site_uv_name: UV
    site_pv_name: PV
+  more_button: More

 donate: Donate
 share: Share
@@ -104,3 +105,4 @@ Snackbar:
  night_to_day: Light Mode Activated Manually

 error_title: Page not found
+loading: Loading...
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -61,7 +61,7 @@ aside:
  card_tags: Tags
  card_archives: Archives
  card_recent_post: Recent Post
-  card_bookmark: Add to bookmark
+  card_bookmark: Bookmark
  card_webinfo:
    headline: Info
    article_name: Article
@@ -69,6 +69,7 @@ aside:
    site_wordcount: Total Count
    site_uv_name: UV
    site_pv_name: PV
+  more_button: More

 donate: Donate
 share: Share
@@ -104,3 +105,4 @@ Snackbar:
  night_to_day: Light Mode Activated Manually

 error_title: Page not found
+loading: Loading...
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -71,6 +71,7 @@ aside:
    site_wordcount: 本站总字数
    site_uv_name: 本站访客数
    site_pv_name: 本站总访问量
+  more_button: 查看更多

 donate: 打赏
 share: 分享
@@ -106,3 +107,4 @@ Snackbar:
  night_to_day: 你已切换为浅色模式

 error_title: 页面没有找到
+loading: 加载中...
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -9,7 +9,7 @@ footer:
 copy:
  success: 複製成功
  error: 複製錯誤
-  noSupport: 瀏覽器不支持
+  noSupport: 瀏覽器不支援

 page:
  articles: 文章總覽
@@ -29,23 +29,23 @@ post:
  comments: 評論數
  copyright:
    author: 文章作者
-    link: 文章鏈接
+    link: 文章連結
    copyright_notice: 版權聲明
-    copyright_content: '本博客所有文章除特別聲明外，均採用
+    copyright_content: '本部落格所有文章除特別聲明外，均採用
      <a href="%s" target="_blank">%s</a> 許可協議。轉載請註明來自 <a href="%s" target="_blank">%s</a>！'
  recommend: 相關推薦

-search: 搜索
+search: 搜尋
 algolia_search:
-  input_placeholder: 搜索文章
+  input_placeholder: 搜尋文章
  hits_empty: "找不到您查詢的內容:${query}"
  hits_stats: "找到 ${hits} 條結果，用時 ${time} 毫秒"

 local_search:
-  label: 本地搜索
-  input_placeholder: 搜索文章
+  label: 本地搜尋
+  input_placeholder: 搜尋文章
  hits_empty: "找不到您查詢的內容:${query}"
-  powered: "提供支持"
+  powered: "提供支援"
  by: 由

 pagination:
@@ -67,34 +67,35 @@ aside:
  card_webinfo:
    headline: 網站資訊
    article_name: 文章數目
-    runtime_name: 已運行時間
+    runtime_name: 已執行時間
    site_wordcount: 本站總字數
    site_uv_name: 本站訪客數
    site_pv_name: 本站總訪問量
+  more_button: 檢視更多

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

 rightside:
  readmode_title: 閱讀模式
-  font_plus_title: 放大字體
-  font_minus_title: 縮小字體
+  font_plus_title: 放大字型
+  font_minus_title: 縮小字型
  translate_title: 簡繁轉換
  night_mode_title: 夜間模式
  back_to_top: 回到頂部
  toc: 目錄
  scroll_to_comment: 直達評論
-  setting: 設置
+  setting: 設定

 runtime_unit: 天

 copy_copyright:
  author: 作者
-  link: 鏈接
+  link: 連結
  source: 來源
-  info: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
+  info: 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

 Snackbar:
  bookmark:
@@ -106,5 +107,5 @@ Snackbar:
  night_to_day: 你已切換為淺色模式

 error_title: 頁面沒有找到
-
+loading: 載入中...

--- a/layout/404.pug
+++ b/layout/404.pug
@@ -6,6 +6,9 @@ html(lang=config.language data-theme=theme.display_mode)
  head
    include includes/head.pug
  body
+    if theme.preloader
+      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
+
    if theme.fireworks && theme.fireworks.enable
      canvas.fireworks

@@ -17,7 +20,5 @@ html(lang=config.language data-theme=theme.display_mode)
        h1#error_title= '404'
        #error_subtitle= theme.error_404.subtitle
    include includes/rightside.pug
-    include includes/search/index.pug
-    each item in theme.CDN_USE.js
-      script(src=url_for(item))
+    !=partial('includes/search/index', {}, {cache:theme.fragment_cache})
    include includes/additional-js.pug
--- a/layout/category.pug
+++ b/layout/category.pug
@@ -2,9 +2,9 @@ extends includes/layout.pug

 block content
  if theme.category_ui == 'index'
-    include ./includes/mixins/UI.pug
+    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts.category_ui   
-      +UI_NEW(page.posts)
+      +postUI
      include includes/pagination.pug    
  else
    include ./includes/mixins/article-sort.pug
--- a/layout/flink.pug
+++ b/layout/flink.pug
@@ -1,5 +1,6 @@
 #page
  .flink#article-container
+    if site.data.link
      each i in site.data.link
        h2= i.class_name
        .post-cards
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -1,3 +1,7 @@
+script(src=url_for(theme.CDN.jquery))
+script(src=url_for(theme.CDN.utils))
+script(src=url_for(theme.CDN.main))
+
 if theme.translate && theme.translate.enable
  script(src=url_for(theme.CDN.translate))

@@ -63,3 +67,8 @@ if theme.mermaid.enable

 if is_home()
  include ./head/subtitle.pug
+
+!=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
+
+if theme.preloader
+  !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})
--- a/layout/includes/comments/facebook_comments.pug
+++ b/layout/includes/comments/facebook_comments.pug
@@ -0,0 +1,12 @@
+#fb-root
+script(async defer crossorigin="anonymous" src=`https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v6.0`)
+.fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
+            data-href=urlNoIndex() 
+            data-numposts= theme.facebook_comments.pageSize || 10
+            data-order-by= theme.facebook_comments.order_by || 'social'
+            data-width="100%")
+
+if theme.darkmode.enable
+  script.
+    var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+    document.getElementsByClassName('fb-comments')[0].setAttribute('data-colorscheme',themeNow)
--- a/layout/includes/comments/index.pug
+++ b/layout/includes/comments/index.pug
@@ -4,7 +4,8 @@
 - var gt = theme.gitalk && theme.gitalk.enable
 - var v = theme.valine && theme.valine.enable
 - var u = theme.utterances && theme.utterances.enable
- var isComment = d || dj || l || gt || v || u
+- var fb = theme.facebook_comments && theme.facebook_comments.enable
+- var isComment = d || dj || l || gt || v || u || fb

 if isComment
  hr
@@ -24,3 +25,5 @@ if isComment
      include ./valine.pug
    else if u
      include ./utterances.pug
+    else if fb
+      include ./facebook_comments.pug
--- a/layout/includes/comments/valine.pug
+++ b/layout/includes/comments/valine.pug
@@ -1,23 +1,37 @@
+- let emojiMaps = '""'
+if site.data.valine
+  - emojiMaps = JSON.stringify(site.data.valine)
+
 #vcomment.vcomment
 script(src=url_for(theme.CDN.valine))
 script.
-  var GUEST_INFO = ['nick','mail','link'];
-  var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){
-    return GUEST_INFO.indexOf(item) > -1
+  var requestSetting = function (from,set) {
+    var from = from
+    var setting = set.split(',').filter(function(item){
+    return from.indexOf(item) > -1
    });
-  guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
+    setting = setting.length == 0 ? from :setting;
+    return setting
+  }
+
+  var guestInfo = requestSetting(['nick','mail','link'],'#{ theme.valine.guest_info }')
+  var requiredFields = requestSetting(['nick','mail','link'],'#{ theme.valine.requiredFields }')

  window.valine = new Valine({
    el:'#vcomment',
-    notify: #{theme.valine.notify},
-    verify: #{theme.valine.verify},
    appId: '#{theme.valine.appId}',
    appKey: '#{theme.valine.appKey}',
+    notify: #{theme.valine.notify},
+    verify: #{theme.valine.verify},
    placeholder: '#{theme.valine.placeholder}',
    avatar: '#{theme.valine.avatar}',
-    meta: guest_info,
+    meta: guestInfo,
    pageSize: '#{theme.valine.pageSize}',
    lang: '#{theme.valine.lang}',
    recordIP: #{theme.valine.recordIP},
-    serverURLs: '#{theme.valine.serverURLs}'
+    serverURLs: '#{theme.valine.serverURLs}',
+    emojiCDN: '#{theme.valine.emojiCDN}',
+    emojiMaps: !{emojiMaps},
+    enableQQ: #{theme.valine.enableQQ},
+    requiredFields: requiredFields
  });
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -10,19 +10,19 @@
 - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
 - var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title

- var pageDescription = page.description || page.title || config.description
+- var pageDescription = page_description()
 - var pageKeywords
- if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
+- 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(',')
 - else pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','):  ([]).join(',') || config.keywords
 - var pageAuthor = config.email ? config.author + ',' + config.email : config.author
 - var pageCopyright = config.copyright || config.author
- var without_html = url.replace('index.html', '')

 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)
+meta(name="description" content!=pageDescription)
 if pageKeywords
  meta(name="keywords" content=pageKeywords)
 meta(name="author" content=pageAuthor)
@@ -34,9 +34,6 @@ if theme.disable_baidu_transformation
  meta(http-equiv="Cache-Control" content="no-transform")
  meta(http-equiv="Cache-Control" content="no-siteapp")

-if page.hide == true
-  meta(name="robots" content="noindex")
-
 if theme.douban
  if theme.douban.meta && (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict]))
    meta(name="referrer" content="no-referrer")
@@ -59,8 +56,8 @@ script(src=url_for(theme.CDN.js_cookies))
 if theme.darkmode.enable
  !=partial('includes/head/darkmode', {}, {cache:theme.fragment_cache})

-each item in theme.CDN_USE.css
-  link(rel='stylesheet', href=url_for(item))
+//- main css
+link(rel='stylesheet', href=url_for(theme.CDN.main_css))

 if theme.fontawesome_v5 && theme.fontawesome_v5.enable
  link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v5))
@@ -74,7 +71,7 @@ if (theme.snackbar && theme.snackbar.enable)
  link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))

 if theme.canonical
-  link(rel="canonical" href=without_html)
+  link(rel="canonical" href=urlNoIndex())

 if is_post()
  if(page.prev)
@@ -103,3 +100,5 @@ if theme.blog_title_font.font_link

 include ./head/config_site.pug
 include ./head/noscript.pug
+
+!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
--- a/layout/includes/head/Open_Graph.pug
+++ b/layout/includes/head/Open_Graph.pug
@@ -4,14 +4,16 @@
 if theme.twitter_meta
  meta(name="twitter:card" content="summary")
  meta(name="twitter:title" content=pageTitle)
-  meta(name="twitter:description" content=pageDescription)
+  meta(name="twitter:description" content!=pageDescription)
  meta(name="twitter:image" content=full_url_for(page.cover || theme.avatar.img))

 //- Open_Graph
 if theme.Open_Graph_meta
  meta(property="og:type" content=contentType)
  meta(property="og:title" content=pageTitle)
-  meta(property="og:url" content=without_html)
+  meta(property="og:url" content=urlNoIndex())
  meta(property="og:site_name" content=config.title)
-  meta(property="og:description" content=pageDescription)
+  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))
--- a/layout/includes/head/comment.pug
+++ b/layout/includes/head/comment.pug
@@ -1,3 +1,9 @@
+if (theme.facebook_comments.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
+  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)
+
 if (theme.disqusjs && theme.disqusjs.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
  link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.disqusjs_css))

--- a/layout/includes/head/dns_prefetch.pug
+++ b/layout/includes/head/dns_prefetch.pug
@@ -1,16 +1,22 @@
 link(rel="preconnect" href="//cdn.jsdelivr.net")
+link(rel="dns-prefetch" href="//cdn.jsdelivr.net")

 if theme.google_analytics
  link(rel="preconnect" href="https://www.google-analytics.com" crossorigin)
+  link(rel="dns-prefetch" href="https://www.google-analytics.com")

 if theme.baidu_analytics
  link(rel="preconnect" href="https://hm.baidu.com")
+  link(rel="dns-prefetch" href="https://hm.baidu.com")

 if theme.tencent_analytics
  link(rel="preconnect" href="http://ta.qq.com")
+  link(rel="dns-prefetch" href="http://ta.qq.com")

 if theme.blog_title_font.font_link
  link(rel="preconnect" href="https://fonts.googleapis.com" crossorigin)
+  link(rel="dns-prefetch" href="https://fonts.googleapis.com")

 if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
  link(rel="preconnect" href="//busuanzi.ibruce.info")
+  link(rel="dns-prefetch" href="//busuanzi.ibruce.info")
--- a/layout/includes/head/subtitle.pug
+++ b/layout/includes/head/subtitle.pug
@@ -7,103 +7,117 @@ if theme.subtitle.enable

  if source == '1'
    script.
-      var subtitleEffect = !{subtitleEffect}
-      fetch('https://api.ooopn.com/ciba/api.php',)
-      .then(function (res){
-        return res.json();
+      var subtitleType = function () {
+        var subtitleEffect = !{ subtitleEffect }
+        fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',)
+          .then(function (res) {
+            return res.json()
          })
          .then(function (data) {
-        if (subtitleEffect){
-          var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
-          var both = sub.unshift(data['ciba-en'],data.ciba)
-          var typed = new Typed("#subtitle", {
+            if (subtitleEffect) {
+              var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
+              var both = sub.unshift(data.text)
+              var typed = new Typed('#subtitle', {
                strings: sub,
                startDelay: 300,
                typeSpeed: 150,
                loop: !{theme.subtitle.loop},
-            backSpeed: 50
-          });
-        }else{
-          document.getElementById("subtitle").innerHTML = data['ciba-en']
+                backSpeed: 50,
+              })
+            } else {
+              document.getElementById('subtitle').innerHTML = data.text
            }
          })
          .catch(function (err) {
-        console.error(err);
+            console.error(err)
          })
+      }
+      window.addEventListener('load', subtitleType)

  else if source == '2'
    script.
-      var subtitleEffect = !{subtitleEffect}
+      var subtitleType = function () {
+        var subtitleEffect = !{ subtitleEffect }
        fetch('https://v1.hitokoto.cn')
-      .then(function (res){
-        return res.json();
+          .then(function (res) {
+            return res.json()
          })
          .then(function (data) {
-        if (subtitleEffect){
+            if (subtitleEffect) {
              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", {
+              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        
+                backSpeed: 50,
+              })
+            } else {
+              document.getElementById('subtitle').innerHTML = data.hitokoto
            }
          })
          .catch(function (err) {
-        console.error(err);
+            console.error(err)
          })
+      }
+      window.addEventListener('load', subtitleType)

-  else if source == "3"
-    script(type="text/javascript" src="http://yijuzhan.com/api/word.php?m=js")
+  else if source == '3'
    script.
-      var subtitleEffect = !{subtitleEffect}
-      var con = str[0];
-      if (subtitleEffect){
-        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", {
+      var subtitleType = function () {
+        loadScript('http://yijuzhan.com/api/word.php?m=js', function () {
+          var subtitleEffect = !{ subtitleEffect }
+          var con = str[0]
+          if (subtitleEffect) {
+            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
+              backSpeed: 50,
+            })
+          } else {
+            document.getElementById('subtitle').innerHTML = con
          }
+        })
+      }
+      window.addEventListener('load', subtitleType)

  else if source == '4'
-    script(type="text/javascript" src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8")
    script.
-      var subtitleEffect = !{subtitleEffect}
-      jinrishici.load(function(result) {
-        if (subtitleEffect){
-          var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
-          var content = result.data.content;
+      var subtitleType = function () {
+        loadScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
+            var subtitleEffect = !{ subtitleEffect }
+            jinrishici.load(function (result) {
+              if (subtitleEffect) {
+                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", {
+                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        
+                  backSpeed: 50,
+                })
+              } else {
+                document.getElementById('subtitle').innerHTML = result.data.content
              }
            })
+          }
+        )
+      }
+      window.addEventListener('load', subtitleType)

  else
-    - var subtitle = theme.subtitle.sub[0]
    script.
      var subtitleEffect = !{subtitleEffect}
-      if (subtitleEffect){ 
+      if (subtitleEffect) { 
        var typed = new Typed("#subtitle", {
          strings: '!{theme.subtitle.sub}'.split(","),
          startDelay: 300,
@@ -111,6 +125,6 @@ if theme.subtitle.enable
          loop: !{theme.subtitle.loop},
          backSpeed: 50
        })
-      }else{
-        document.getElementById("subtitle").innerHTML = '!{subtitle}'
+      } else {
+        document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
      }
--- a/layout/includes/header/header.pug
+++ b/layout/includes/header/header.pug
@@ -8,8 +8,7 @@
        a.site-page.social-icon.search
          i.fa.fa-search.fa-fw
          span=' '+_p('search')
-    .menus_items
-      include ./menu_item.pug
+    !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})

    span.toggle-menu.close
      a.site-page
--- a/layout/includes/header/index.pug
+++ b/layout/includes/header/index.pug
@@ -33,7 +33,7 @@ if theme.douban
        span#subtitle
      if(theme.social)
        #site_social_icons
-          !=partial('includes/header/social', {}, {cache:theme.fragment_cache})
+          !=fragment_cache('social', function(){return partial('includes/header/social')})
    #scroll_down
      i.fa.fa-angle-down.scroll-down-effects
  else if is_post()
--- a/layout/includes/header/menu_item.pug
+++ b/layout/includes/header/menu_item.pug
@@ -1,4 +1,5 @@
-each value, label in theme.menu
+.menus_items
+  each value, label in theme.menu
    if !Array.isArray(value)
      .menus_item
        a.site-page(href=url_for(trim(value.split('||')[0])))
--- a/layout/includes/header/post-info.pug
+++ b/layout/includes/header/post-info.pug
@@ -62,23 +62,30 @@
      span.post-meta-commentcount
        - var commentCount = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-comments' : 'fa fa-comment-o'
        if ((theme.disqus && theme.disqus.enable && theme.disqus.count && page.comments !== false) || (theme.disqusjs && theme.disqusjs.enable && theme.disqusjs.count && page.comments !== false))
-          if (theme.busuanzi && theme.busuanzi.page_pv)
+          if (postWordcount || theme.busuanzi.page_pv)
            span.post-meta__separator |
          i.post-meta__icon(class=commentCount aria-hidden="true")
          span= _p('post.comments') + ':'
          span.disqus-comment-count.comment-count
            a(href=full_url_for(page.path) + '#disqus_thread')
        else if (theme.valine && theme.valine.enable && theme.valine.count && page.comments !== false)
-          if (theme.busuanzi && theme.busuanzi.page_pv)
+          if (postWordcount || theme.busuanzi.page_pv)
            span.post-meta__separator |
          i.post-meta__icon(class=commentCount aria-hidden="true")
          span= _p('post.comments') + ':'
          a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
            span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
        else if (theme.gitalk && theme.gitalk.enable && theme.gitalk.count && page.comments !== false)
-          if (theme.busuanzi && theme.busuanzi.page_pv)
+          if (postWordcount || theme.busuanzi.page_pv)
            span.post-meta__separator |
          i.post-meta__icon(class=commentCount aria-hidden="true")
          span= _p('post.comments') + ':'
          a(href=url_for(page.path) + '#post-comment')
            span.gitalk-comment-count.comment-count
+        else if theme.facebook_comments.enable && theme.facebook_comments.count && page.comments !== false
+          if (postWordcount || theme.busuanzi.page_pv)
+            span.post-meta__separator |
+          i.post-meta__icon(class=commentCount aria-hidden="true")
+          span= _p('post.comments') + ':'
+          a.comment-count(href=url_for(page.path) + '#post-comment')
+            span.fb-comments-count(data-href=urlNoIndex())
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -5,6 +5,9 @@ html(lang=config.language data-theme=theme.display_mode)
  head
    include ./head.pug
  body
+    if theme.preloader
+      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
+
    if theme.fireworks && theme.fireworks.enable
      canvas.fireworks

@@ -38,13 +41,5 @@ html(lang=config.language data-theme=theme.display_mode)
        !=partial('includes/footer', {}, {cache:theme.fragment_cache})

    include ./rightside.pug
-
    !=partial('includes/search/index', {}, {cache:theme.fragment_cache})
-
-    each item in theme.CDN_USE.js
-      script(src=url_for(item))
-      
    include ./additional-js.pug
-    
-
-    
--- a/layout/includes/loading/loading-js.pug
+++ b/layout/includes/loading/loading-js.pug
@@ -0,0 +1,6 @@
+script.
+  var endLoading = function () {
+    document.body.style.overflow = 'auto';
+    document.getElementById('loading-box').classList.add("loaded")
+  }
+  window.addEventListener('load',endLoading)
--- a/layout/includes/loading/loading.pug
+++ b/layout/includes/loading/loading.pug
@@ -0,0 +1,9 @@
+#loading-box
+  .loading-left-bg
+  .loading-right-bg
+  .spinner-box
+    .configure-border-1
+      .configure-core
+    .configure-border-2
+      .configure-core
+    .loading-word= _p('loading')
--- a/layout/includes/mixins/article-sort.pug
+++ b/layout/includes/mixins/article-sort.pug
@@ -11,7 +11,7 @@ mixin articleSort(posts)
        if article.cover && theme.cover.archives_enable
          .article-sort-img
            a.article-sort-item__img(href=url_for(article.path))
-              img(src=article.cover alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+              img(src=`${article.cover}` alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
        .article-sort-post
          a.article-sort-item__post(href=url_for(article.path))
            i.fa.fa-clock-o(aria-hidden="true")
--- a/layout/includes/mixins/post-ui.pug
+++ b/layout/includes/mixins/post-ui.pug
@@ -1,21 +1,26 @@
-mixin UI_NEW(posts)
-  - posts.each(function(article,index){
+mixin postUI(posts)
+  each article , index in page.posts.data
    .recent-post-item
      - var link = article.link || article.path
-      - var post_cover = article.cover
      - var title = article.title || _p('no_title')
      - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
+      - var post_cover = article.cover
      - var no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          a(href=url_for(link) title=title)      
            if theme.lazyload.enable
-              img.post_bg.lazyload(data-src=`${post_cover}` alt=title onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
            else
-              img.post_bg(src=`${post_cover}` alt=title onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+              img.post_bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
      .recent-post-info(class=no_cover)
        a.article-title(href=url_for(link) title=title)= title
        .article-meta-wrap
+          if (is_home() && (article.top || article.sticky > 0))
+            span.article-meta
+              i.fa.fa-thumb-tack.article-meta__icon.sticky
+              span.sticky= _p('sticky')
+              span.article-meta__separator |
          if (theme.post_meta.page.date_type)
            if (theme.post_meta.page.date_type === 'both')
              time.post-meta__date
@@ -61,5 +66,3 @@ mixin UI_NEW(posts)
    if theme.ad && theme.ad.index
      if (index + 1) % 3 == 0
        .recent-post-item.ad_height!=theme.ad.index
-
-  - })
--- a/layout/includes/mobile-sidebar/mobile-menus.pug
+++ b/layout/includes/mobile-sidebar/mobile-menus.pug
@@ -23,5 +23,4 @@
            .headline= _p('aside.categories') 
            .length_num= site.categories.length
  hr
-  .menus_items
-    include ../header/menu_item.pug
+  !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})
--- a/layout/includes/recent-posts.pug
+++ b/layout/includes/recent-posts.pug
@@ -1,67 +0,0 @@
-each article , index in page.posts.data
-  .recent-post-item
-    - var link = article.link || article.path
-    - var title = article.title || _p('no_title')
-    - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
-    - var post_cover = article.cover
-    - var no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
-    if post_cover && theme.cover.index_enable
-      .post_cover(class=leftOrRight)
-        a(href=url_for(link) title=title)      
-          if theme.lazyload.enable
-            img.post_bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
-          else
-            img.post_bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
-    .recent-post-info(class=no_cover)
-      a.article-title(href=url_for(link) title=title)= title
-      .article-meta-wrap
-        if (article.top)
-          span.article-meta
-            i.fa.fa-thumb-tack.article-meta__icon.sticky
-            span.sticky= _p('sticky')
-            span.article-meta__separator |
-        if (theme.post_meta.page.date_type)
-          if (theme.post_meta.page.date_type === 'both')
-            time.post-meta__date
-              span.post-meta__date-created(title=_p('post.created') + ' ' + full_date(article.date))
-                i.fa.fa-calendar(aria-hidden="true")
-                =date(article.date, config.date_format)
-              span.article-meta__separator |
-              span.post-meta__date-updated(title=_p('post.updated') + ' ' + full_date(article.updated))
-                i.fa.fa-history(aria-hidden="true")
-                =date(article.updated, config.date_format)
-          else
-            - var data_type_updated = theme.post_meta.page.date_type === 'updated'
-            - var date_type = data_type_updated ? 'updated' : 'date'
-            - var date_icon = data_type_updated ? 'fa-history' :'fa-calendar'
-            - var date_title = data_type_updated ? _p('post.updated') : _p('post.created')
-            time.post-meta__date(title=date_title + ' ' + full_date(article[date_type]))
-              i.fa(class=date_icon aria-hidden="true")
-              =date(article[date_type], config.date_format)
-        if (theme.post_meta.page.categories && article.categories.data.length > 0)
-          span.article-meta
-            span.article-meta__separator |
-            each item, index in article.categories.data
-              i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
-              a(href=url_for(item.path)).article-meta__categories #[=item.name]
-              if (index < article.categories.data.length - 1)
-                  i.fa.fa-angle-right(aria-hidden="true")
-        if (theme.post_meta.page.tags && article.tags.data.length > 0)
-          span.article-meta.tags
-            span.article-meta__separator |
-            each item, index in article.tags.data
-              i.fa.fa-tag.article-meta__icon(aria-hidden="true")
-              a(href=url_for(item.path)).article-meta__tags #[=item.name]
-              if (index < article.tags.data.length - 1)
-                span.article-meta__link -
-      if theme.auto_excerpt && theme.auto_excerpt.enable
-        - const content = strip_html(article.content)
-        - let expert = content.substring(0, theme.auto_excerpt.length) 
-        - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
-        .content!= expert
-      else
-        .content!= article.description
-
-  if theme.ad && theme.ad.index
-    if (index + 1) % 3 == 0
-      .recent-post-item.ad_height!=theme.ad.index
--- a/layout/includes/widget/card_announcement.pug
+++ b/layout/includes/widget/card_announcement.pug
@@ -3,4 +3,4 @@
    .item-headline
      i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
      span= _p('aside.card_announcement')
-    .announcement_content!= theme.announcement.content
+    .announcement_content!= theme.aside.card_announcement.content
--- a/layout/includes/widget/card_archives.pug
+++ b/layout/includes/widget/card_archives.pug
@@ -3,4 +3,9 @@
    .item-headline
      i.fa.fa-archive(aria-hidden="true")
      span= _p('aside.card_archives')
-    != list_archives({type:'monthly',format: 'YYYY年MM月'})
+    
+    - let type = theme.aside.card_archives.type || 'monthly'
+    - let format = theme.aside.card_archives.format || 'MMMM YYYY'
+    - let order = theme.aside.card_archives.order || -1
+    - let limit = theme.aside.card_archives.limit === 0 ? 0 : theme.aside.card_archives.limit || 8
+    != aside_archives({ type:type, format: format, order: order, limit: limit })
--- a/layout/includes/widget/card_author.pug
+++ b/layout/includes/widget/card_author.pug
@@ -3,7 +3,7 @@
    .card-info-avatar.is-center
      img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt="avatar")
      .author-info__name= config.author
-      .author-info__description= config.description
+      .author-info__description= theme.aside.card_author.description || config.description

    .card-info-data
      if site.posts.length
@@ -31,4 +31,4 @@
  
    if(theme.social)
        .card-info-social-icons.is-center
-          include ../header/social.pug
+          !=fragment_cache('social', function(){return partial('includes/header/social')}) 
--- a/layout/includes/widget/card_categories.pug
+++ b/layout/includes/widget/card_categories.pug
@@ -4,20 +4,6 @@ if site.categories.length
        .item-headline
          i.fa.fa-folder-open(aria-hidden="true")
          span= _p('aside.card_categories')
-        ul.aside-category-item        
-          mixin displayCategories(parent = undefined) 
-            - site.categories.find({ parent }).sort("name").each(function(category) {
-                - var childCount = site.categories.find({ parent: category._id }).count();              
-                li.aside-category-list
-                  a.aside-category-list_link(href=url_for(category.path))
-                    span.aside-category-list_name= category.name
-                    span.aside-category-list_length= category.length
-                  
-                if childCount > 0
-                  ul.aside-category-item.child
-                    +displayCategories(category._id)
-            - })
-
-          +displayCategories()
+        !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 })

  
--- a/layout/includes/widget/card_recent_post.pug
+++ b/layout/includes/widget/card_recent_post.pug
@@ -4,7 +4,8 @@
      i.fa.fa-history(aria-hidden="true")
      span= _p('aside.card_recent_post')
    .aside-recent-item
-      - site.posts.sort('date', -1).limit(5).each(function(article){
+      - var postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
+      - site.posts.sort('date', -1).limit(postLimit).each(function(article){
        .aside-recent-post
          - var link = article.link || article.path
          - var title = article.title || _p('no_title')
--- a/layout/includes/widget/card_tags.pug
+++ b/layout/includes/widget/card_tags.pug
@@ -4,4 +4,9 @@ if site.tags.length
      .item-headline
        i.fa.fa-tags(aria-hidden="true")
        span= _p('aside.card_tags')
-      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#99a9bf'})
+
+      - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
+      if theme.aside.card_tags.color
+        .card-tag-cloud!=cloudTags({source: site.tags, minfontsize: 16, maxfontsize: 22, limit: tagLimit})
+      else
+        .card-tag-cloud!= tagcloud({min_font: 16, max_font: 22, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf'})
--- a/layout/includes/widget/index.pug
+++ b/layout/includes/widget/index.pug
@@ -1,19 +1,19 @@
 if theme.aside.enable 
  if page.aside !== false
    #aside_content.aside_content
-      if theme.aside.card_author
+      if theme.aside.card_author.enable
        !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
-      if theme.aside.card_announcement
+      if theme.aside.card_announcement.enable
        !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
-      if theme.aside.card_recent_post
+      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.aside.card_categories
+      if theme.aside.card_categories.enable
        !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
-      if theme.aside.card_tags
+      if theme.aside.card_tags.enable
        !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
-      if theme.aside.card_archives
+      if theme.aside.card_archives.enable
        !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
      if theme.aside.card_webinfo
        !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})  
--- a/layout/index.pug
+++ b/layout/index.pug
@@ -1,6 +1,7 @@
 extends includes/layout.pug

 block content
+  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
-    include includes/recent-posts.pug  
+    +postUI
    include includes/pagination.pug
--- a/layout/page-tags.pug
+++ b/layout/page-tags.pug
@@ -1,14 +0,0 @@
-.tag-cloud
-  .tag-cloud__title= _p('page.tag')
-    |  - 
-    span.tag-cloud__amount= site.tags.length
-  .tag-cloud-tags
-    - site.tags.sort('path').each(function (tags){
-      - var fontSize = Math.floor(Math.random() * 15 + 15) + "px"; //15 ~ 30
-      - var color = "rgb(" + Math.floor(Math.random() * 201) + ", " + Math.floor(Math.random() * 201) +", " + Math.floor(Math.random() * 201) +")"; // 0,0,0 -> 200,200,200
-      a(href=url_for(tags.path) style='font-size:' + fontSize + ';color:' + color)=tags.name
-    -})
-  if page.comments !== false
-    include includes/comments/index.pug
-
-
--- a/layout/page.pug
+++ b/layout/page.pug
@@ -2,7 +2,14 @@ extends includes/layout.pug

 block content
  if page.type === 'tags'
-    include page-tags.pug
+    .tag-cloud
+      .tag-cloud__title= _p('page.tag')
+        |  - 
+        span.tag-cloud__amount= site.tags.length
+      .tag-cloud-tags
+        !=cloudTags({source: site.tags, minfontsize: 15, maxfontsize: 30, limit: 0})
+      if page.comments !== false
+        include includes/comments/index.pug
  else if page.type === 'link'
    include flink.pug
  else if page.type === 'categories'    
--- a/layout/tag.pug
+++ b/layout/tag.pug
@@ -2,9 +2,9 @@ extends includes/layout.pug

 block content
  if theme.tag_ui == 'index'
-    include ./includes/mixins/UI.pug
+    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts    
-      +UI_NEW(page.posts)
+      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
--- a/package.json
+++ b/package.json
@@ -1,5 +1,18 @@
 {
  "name": "hexo-theme-butterfly",
-  "version": "2.2.5",
-  "description": "A Hexo Theme: Butterfly"
+  "version": "2.3.0",
+  "private": true,
+  "engines": {
+    "node": ">=8.10.0"
+  },
+  "description": "A Simple and Card UI Design theme for Hexo",
+  "keywords": [
+    "hexo",
+    "theme",
+    "butterfly",
+    "Card UI Design"
+  ],
+  "repository": "https://github.com/jerryc127/hexo-theme-butterfly.git",
+  "author": "Jerry <wong@jerryc.me>",
+  "license": "MIT"
 }
--- a/scripts/events/404.js
+++ b/scripts/events/404.js
@@ -1,8 +1,15 @@
-hexo.extend.generator.register('404', function(locals){
+/**
+ * Butterfly
+ * 404 error page
+ */
+
+'use strict'
+
+hexo.extend.generator.register('404', function (locals) {
  if (!hexo.theme.config.error_404.enable) return
  return {
    path: '404.html',
    data: locals.posts,
    layout: ['404']
  }
-});
+})
--- a/scripts/events/replace_config.js
+++ b/scripts/events/replace_config.js
@@ -2,6 +2,8 @@
 * Note: configs in _data/butterfly.yml will replace configs in hexo.theme.config.
 */

+'use strict'
+
 hexo.on('generateBefore', function () {
  const rootConfig = hexo.config
  if (hexo.locals.get) {
--- a/scripts/filters/hide-post.js
+++ b/scripts/filters/hide-post.js
@@ -1,63 +0,0 @@
-/**
- * global hexo
- * from printempw/hexo-hide-posts
- * modify by Jerry
- */
-
-'use strict';
-
-var public_generators = [];
-
-hexo.extend.filter.register('before_generate', function () {
-  this._bindLocals();
-
-  const all_posts = this.locals.get('posts');
-  const hidden_posts = all_posts.find({
-    'hide': true
-  });
-  const normal_posts = all_posts.filter(post => !post['hide']);
-
-  this.locals.set('all_posts', all_posts);
-  this.locals.set('hidden_posts', hidden_posts);
-  this.locals.set('posts', normal_posts);
-});
-
-hexo.extend.filter.register('after_init', function () {
-
-  const original = {};
-  for (const name in hexo.extend.generator.list()) {
-    original[name] = hexo.extend.generator.get(name);
-  }
-
-  hexo.extend.generator.register('post', async function (locals) {
-    const fg = original.post.bind(this);
-
-    const generated_public = await fg(locals);
-    const generated_hidden = await fg(Object.assign({}, locals, {
-      posts: locals.hidden_posts
-    }));
-
-    // Remove post.prev and post.next for hidden posts
-    generated_hidden.forEach(ele => {
-      ele.data.prev = ele.data.next = null;
-    });
-
-    return generated_public.concat(generated_hidden);
-  });
-
-  // Then we hack into other generators if necessary
-  public_generators.filter(
-    name => Object.keys(original).includes(name)
-  ).forEach(name => {
-    // Overwrite original generator
-    hexo.extend.generator.register(name, function (locals) {
-      const fg = original[name].bind(this);
-
-      return fg(Object.assign({}, locals, {
-        posts: new locals.posts.constructor(
-          locals.posts.data.concat(locals.hidden_posts.data)
-        )
-      }));
-    });
-  });
-});
--- a/scripts/filters/post-lazyload.js
+++ b/scripts/filters/post-lazyload.js
@@ -1,29 +0,0 @@
-'use strict';
-
-const url_for = require('hexo-util').url_for.bind(hexo);
-
-function lazyProcess(htmlContent)  {
-  var bg = url_for(hexo.theme.config.lodding_bg.post);
-  return htmlContent.replace(/<img(.*?)src="(.*?)"(.*?)>/gi, (str, p1, p2, p3)  =>  {
-    if (/data-src/gi.test(str)) {
-      return str;
-    }
-    if (/class="(.*?)"/gi.test(str)){
-      str = str.replace(/class="(.*?)"/gi, (classStr, p1) => {
-        return classStr.replace(p1, `${p1} lazyload`);
-      })
-      str = str.replace(p2, `${bg}`)
-      return str.replace('>', ` data-src="${p2}">`);
-    }
-    str = str.replace(p2, `${bg}`)
-    return str.replace(p3, ` class="lazyload" data-src="${p2}" ${p3}`);
-  });
-}
-
-var processPost = function(data) {
-  if (!hexo.theme.config.lazyload.enable) return;
-  data.content = lazyProcess.call(this, data.content);
-  return data;
-};
-
-hexo.extend.filter.register('after_post_render', processPost);
--- a/scripts/filters/post_lazyload.js
+++ b/scripts/filters/post_lazyload.js
@@ -0,0 +1,39 @@
+/**
+ * Butterfly
+ * lazyload
+ * replace src to data-src
+ * add class 'lazyload'
+ */
+
+'use strict'
+
+const url_for = require('hexo-util').url_for.bind(hexo)
+
+function lazyProcess (htmlContent) {
+  var bg = url_for(hexo.theme.config.lodding_bg.post)
+  return htmlContent.replace(
+    /<img(.*?)src="(.*?)"(.*?)>/gi,
+    (str, p1, p2, p3) => {
+      if (/data-src/gi.test(str)) {
+        return str
+      }
+      if (/class="(.*?)"/gi.test(str)) {
+        str = str.replace(/class="(.*?)"/gi, (classStr, p1) => {
+          return classStr.replace(p1, `${p1} lazyload`)
+        })
+        str = str.replace(p2, `${bg}`)
+        return str.replace('>', ` data-src="${p2}">`)
+      }
+      str = str.replace(p2, `${bg}`)
+      return str.replace(p3, ` class="lazyload" data-src="${p2}" ${p3}`)
+    }
+  )
+}
+
+var processPost = function (data) {
+  if (!hexo.theme.config.lazyload.enable) return
+  data.content = lazyProcess.call(this, data.content)
+  return data
+}
+
+hexo.extend.filter.register('after_post_render', processPost)
--- a/scripts/filters/random-cover.js
+++ b/scripts/filters/random-cover.js
@@ -1,23 +0,0 @@
-hexo.extend.filter.register("before_post_render", function(data) {
-  if (data.cover == false) {
-    data.randomcover = random_cover();
-    return data;
-  }
-  data.cover = data.cover || random_cover();
-  return data;
-});
-
-var random_cover = function() {
-  var cover;
-  var num;
-  if (!Array.isArray(hexo.theme.config.cover.default_cover)) {
-    cover = hexo.theme.config.cover.default_cover;
-    return cover;
-  } else {
-    num = Math.floor(
-      Math.random() * hexo.theme.config.cover.default_cover.length
-    );
-    cover = hexo.theme.config.cover.default_cover[num];
-    return cover;
-  }
-};
--- a/scripts/filters/random_cover.js
+++ b/scripts/filters/random_cover.js
@@ -0,0 +1,34 @@
+/**
+ * Butterfly
+ * ramdom cover
+ */
+
+'use strict'
+
+hexo.extend.filter.register('before_post_render', function (data) {
+  if (data.cover === false) {
+    data.randomcover = randomCover()
+    return data
+  }
+  data.cover = data.cover || randomCover()
+  return data
+})
+
+var randomCover = function () {
+  var theme = hexo.theme.config
+  var cover
+  var num
+
+  if (theme.cover.default_cover) {
+    if (!Array.isArray(theme.cover.default_cover)) {
+      cover = theme.cover.default_cover
+      return cover
+    } else {
+      num = Math.floor(Math.random() * theme.cover.default_cover.length)
+      cover = theme.cover.default_cover[num]
+      return cover
+    }
+  } else {
+    return theme.default_top_img
+  }
+}
--- a/scripts/helpers/aside_archives.js
+++ b/scripts/helpers/aside_archives.js
@@ -0,0 +1,112 @@
+/**
+ * Butterfly
+ * for aside archives
+ */
+
+'use strict'
+
+hexo.extend.helper.register('aside_archives', function (options = {}) {
+  const { config } = this
+  const archiveDir = config.archive_dir
+  const { timezone } = config
+  const lang = toMomentLocale(this.page.lang || this.page.language || config.language)
+  let { format } = options
+  const type = options.type || 'monthly'
+  const { transform } = options
+  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true
+  const order = options.order || -1
+  const compareFunc = type === 'monthly'
+    ? (yearA, monthA, yearB, monthB) => yearA === yearB && monthA === monthB
+    : (yearA, monthA, yearB, monthB) => yearA === yearB
+  const limit = options.limit
+  const moreButton = this._p('aside.more_button')
+  let result = ''
+
+  if (!format) {
+    format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY'
+  }
+
+  const posts = this.site.posts.sort('date', order)
+  if (!posts.length) return result
+
+  const data = []
+  let length = 0
+
+  posts.forEach(post => {
+    // Clone the date object to avoid pollution
+    let date = post.date.clone()
+
+    if (timezone) date = date.tz(timezone)
+
+    const year = date.year()
+    const month = date.month() + 1
+    const lastData = data[length - 1]
+
+    if (!lastData || !compareFunc(lastData.year, lastData.month, year, month)) {
+      if (lang) date = date.locale(lang)
+      const name = date.format(format)
+      length = data.push({
+        name,
+        year,
+        month,
+        count: 1
+      })
+    } else {
+      lastData.count++
+    }
+  })
+
+  const link = item => {
+    let url = `${archiveDir}/${item.year}/`
+
+    if (type === 'monthly') {
+      if (item.month < 10) url += '0'
+      url += `${item.month}/`
+    }
+
+    return this.url_for(url)
+  }
+
+  result += '<ul class="card-archive-list">'
+
+  const len = data.length
+  const Judge = limit === 0 ? len : Math.min(len, limit)
+
+  for (let i = 0; i < Judge; i++) {
+    const item = data[i]
+
+    result += '<li class="card-archive-list-item">'
+
+    result += `<a class="card-archive-list-link" href="${link(item)}">`
+    result += '<span class="card-archive-list-date">'
+    result += transform ? transform(item.name) : item.name
+    result += '</span>'
+
+    if (showCount) {
+      result += `<span class="card-archive-list-count">${item.count}</span>`
+    }
+    result += '</a>'
+    result += '</li>'
+  }
+
+  if (len > Judge) {
+    result += '<li class="card-archive-list-item more is-center">'
+    result += `<a class="card-archive-list-link-more" href="${this.url_for(archiveDir)}">
+              <span>${moreButton}</span><i class="fa fa-angle-right" aria-hidden="true"></i></a></li>`
+  }
+  result += '</ul>'
+  return result
+})
+
+var toMomentLocale = function (lang) {
+  if (lang === undefined) {
+    return undefined
+  }
+
+  // moment.locale('') equals moment.locale('en')
+  // moment.locale(null) equals moment.locale('en')
+  if (!lang || lang === 'en' || lang === 'default') {
+    return 'en'
+  }
+  return lang.toLowerCase().replace('_', '-')
+}
--- a/scripts/helpers/aside_categories.js
+++ b/scripts/helpers/aside_categories.js
@@ -0,0 +1,97 @@
+/**
+ * Butterfly
+ * for aside categories
+ */
+
+'use strict'
+
+hexo.extend.helper.register('aside_categories', function (categories, options) {
+  if (
+    !options &&
+    (!categories || !Object.prototype.hasOwnProperty.call(categories, 'length'))
+  ) {
+    options = categories
+    categories = this.site.categories
+  }
+
+  if (!categories || !categories.length) return ''
+  options = options || {}
+  const { config } = this
+  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count')
+    ? options.show_count
+    : true
+  const depth = options.depth ? parseInt(options.depth, 10) : 0
+  const orderby = options.orderby || 'name'
+  const order = options.order || 1
+  const categoryDir = this.url_for(config.category_dir)
+  const limit = options.limit === 0 ? categories.length : options.limit
+  const buttonLabel = this._p('aside.more_button')
+  const prepareQuery = (parent) => {
+    const query = {}
+    if (parent) {
+      query.parent = parent
+    } else {
+      query.parent = {
+        $exists: false,
+      }
+    }
+    return categories
+      .find(query)
+      .sort(orderby, order)
+      .filter((cat) => cat.length)
+  }
+
+  const hierarchicalList = (t, level, parent) => {
+    let result = ''
+    if (t > 0) {
+      prepareQuery(parent).forEach((cat, i) => {
+        if (t > 0) {
+          t = t - 1
+          let child
+          if (!depth || level + 1 < depth) {
+            var childList = hierarchicalList(t, level + 1, cat._id)
+            child = childList[0]
+            t = childList[1]
+          }
+
+          result += '<li class="card-category-list-item">'
+
+          result += `<a class="card-category-list-link" href="${this.url_for(
+            cat.path
+          )}">`
+          result += `<span class="card-category-list-name">${cat.name}</span>`
+
+          if (showCount) {
+            result += `<span class="card-category-list-count">${cat.length}</span>`
+          }
+
+          result += '</a>'
+          result += '</li>'
+
+          if (child) {
+            result += `<ul class="card-category-list child">${child}</ul>`
+          }
+        }
+      })
+    }
+
+    return [result, t]
+  }
+
+  const list = hierarchicalList(limit, 0)
+
+  var moreButton = function () {
+    var moreHtml = ''
+    if (categories.length <= limit) return ''
+    moreHtml += '<li class="card-category-list-item more is-center">'
+    moreHtml += `<a class="card-category-list-link-more" href="${categoryDir}">
+                <span>${buttonLabel}</span><i class="fa fa-angle-right" aria-hidden="true"></i></a></li>`
+
+    return moreHtml
+  }
+
+  return `<ul class="card-category-list">
+            ${list[0]}
+            ${moreButton()}           
+            </ul>`
+})
--- a/scripts/helpers/list-archives.js
+++ b/scripts/helpers/list-archives.js
@@ -1,103 +0,0 @@
-"use strict";
-
-hexo.extend.helper.register("list_archives", function(options = {}) {
-  const { config } = this;
-  const archiveDir = config.archive_dir;
-  const { timezone } = config;
-  const lang = this.page.lang || this.page.language || config.language;
-  let { format } = options;
-  const type = options.type || "monthly";
-  const { style = "list", transform, separator = ", " } = options;
-  const showCount = Object.prototype.hasOwnProperty.call(options, "show_count")
-    ? options.show_count
-    : true;
-  const order = options.order || -1;
-  const limit = 8;
-  let result = "";
-
-  var more_button;
-  if (lang === "zh-CN") {
-    more_button = "查看更多";
-  } else if (lang === "zh-TW") {
-    more_button = "查看更多";
-  } else {
-    more_button = "More";
-  }
-
-  if (!format) {
-    format = type === "monthly" ? "MMMM YYYY" : "YYYY";
-  }
-
-  const posts = this.site.posts.sort("date", order);
-  if (!posts.length) return result;
-
-  const data = [];
-  let length = 0;
-
-  posts.forEach(post => {
-    // Clone the date object to avoid pollution
-    let date = post.date.clone();
-
-    if (timezone) date = date.tz(timezone);
-    if (lang) date = date.locale(lang);
-
-    const year = date.year();
-    const month = date.month() + 1;
-    const name = date.format(format);
-    const lastData = data[length - 1];
-
-    if (!lastData || lastData.name !== name) {
-      length = data.push({
-        name,
-        year,
-        month,
-        count: 1
-      });
-    } else {
-      lastData.count++;
-    }
-  });
-
-  const link = item => {
-    let url = `${archiveDir}/${item.year}/`;
-
-    if (type === "monthly") {
-      if (item.month < 10) url += "0";
-      url += `${item.month}/`;
-    }
-
-    return this.url_for(url);
-  };
-
-  result += `<ul class="archive-list">`;
-
-  for (let i = 0, len = data.length; i < Math.min(len, limit); i++) {
-    const item = data[i];
-
-    result += `<li class="archive-list-item">`;
-
-    result += `<a class="archive-list-link" href="${link(item)}">`;
-    result += `<span class="archive-list-date">`;
-    result += transform ? transform(item.name) : item.name;
-    result += `</span>`;
-
-    if (showCount) {
-      result += `<span class="archive-list-count">${item.count}</span>`;
-    }
-    result += "</a>";
-    result += "</li>";
-  }
-
-  if (data.length > limit) {
-    result += `<li class="archive-list-item is-center">`;
-    result +=
-      `<a class="archive-list-link-more" href="` +
-      "/" +
-      `${archiveDir}" >`;
-    result += more_button;
-    result += "</a>";
-    result += "</li>";
-  }
-  result += "</ul>";
-  return result;
-});
--- a/scripts/helpers/page.js
+++ b/scripts/helpers/page.js
@@ -0,0 +1,58 @@
+/**
+ * Butterfly
+ * @example
+ *  page_description()
+ *  injectHtml(data)
+ *  cloudTags(source, minfontsize, maxfontsize, limit)
+ */
+
+'use strict'
+
+const { stripHTML } = require('hexo-util')
+
+hexo.extend.helper.register('page_description', function () {
+  const { config, page } = this
+  let description = page.description || page.content || page.title || config.description
+
+  if (description) {
+    description = stripHTML(description).substring(0, 200)
+      .trim()
+      .replace(/\n/g, ' ')
+    return description
+  }
+})
+
+hexo.extend.helper.register('injectHtml', function (data) {
+  let result = ''
+  if (!data) return ''
+  for (var i = 0; i < data.length; i++) {
+    result += data[i]
+  }
+  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 || 8
+
+  let result = ''
+  const tagLimit = limit === 0 ? source.length : limit
+  source.sort('name').limit(tagLimit).forEach(function (tags) {
+    var fontSize = Math.floor(Math.random() * (maxfontsize - minfontsize) + minfontsize) + 'px'
+    var 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
+})
--- a/scripts/helpers/related-post.js
+++ b/scripts/helpers/related-post.js
@@ -1,90 +0,0 @@
-hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
-  var relatedPosts = [];
-  currentPost.tags.forEach(function (tag) {
-    allPosts.forEach(function (post) {
-      if (isTagRelated(tag.name, post.tags)) {
-        var relatedPost = {
-          title: post.title,
-          path: post.path,
-          cover: post.cover,
-          randomcover: post.randomcover,
-          weight: 1,
-          updated: post.updated,
-          created: post.date
-        };
-        var index = findItem(relatedPosts, 'path', post.path);
-        if (index != -1) {
-          relatedPosts[index].weight += 1;
-        } else {
-          if (currentPost.path != post.path) {
-            relatedPosts.push(relatedPost);
-          };
-        };
-      };
-    });
-  });
-  if (relatedPosts.length == 0) {
-    return ''
-  };
-  var result = "";
-  const hexoConfig = hexo.theme.config.rootConfig;
-  const config = hexo.theme.config;
-
-  var limit_num = config.related_post.limit || 6
-  var date_type = config.related_post.date_type || 'created'
-  var headline_lang = this._p('post.recommend')
-  
-  relatedPosts = relatedPosts.sort(compare('weight'));
-  var lazy_src = config.lazyload.enable ? lazy_src = 'data-src' : lazy_src = 'src'
-  var lazy_class = config.lazyload.enable ? lazy_class = 'lazyload' : lazy_class = ''
-
-  if (relatedPosts.length > 0) {
-    result += '<div class="relatedPosts">'
-    result += '<div class="relatedPosts_headline"><i class="fa fa-fw fa-thumbs-up" aria-hidden="true"></i><span>' + ' ' + headline_lang + '</span></div>'
-    result += '<div class="relatedPosts_list">'
-
-    for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) {
-      var cover = relatedPosts[i].cover === false ? relatedPosts[i].randomcover : relatedPosts[i].cover
-      result += '<div class="relatedPosts_item"><a href="' + hexoConfig.root + relatedPosts[i].path + '" title="' + relatedPosts[i].title + '">';
-      result += '<img class="relatedPosts_cover ' + lazy_class + '"' + lazy_src + '="' + cover + '">';
-      if (date_type == 'created') {
-        result += '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="fa fa-calendar fa-fw" aria-hidden="true"></i>' + ' ' + this.date(relatedPosts[i].created,hexoConfig.date_format) + '</div>'
-      } else {
-        result += '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="fa fa-history fa-fw" aria-hidden="true"></i>' + ' ' + this.date(relatedPosts[i].updated,hexoConfig.date_format) + '</div>'
-      }
-      result += '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>';
-      result += '</div></a></div>'
-    };
-
-    result += '</div><div class="clear_both"></div></div>'
-    return result;
-
-  }
-});
-
-function isTagRelated(tagName, TBDtags) {
-  var result = false;
-  TBDtags.forEach(function (tag) {
-    if (tagName == tag.name) {
-      result = true;
-    };
-  })
-  return result;
-}
-
-function findItem(arrayToSearch, attr, val) {
-  for (var i = 0; i < arrayToSearch.length; i++) {
-    if (arrayToSearch[i][attr] == val) {
-      return i
-    };
-  };
-  return -1;
-}
-
-function compare(attr) {
-  return function (a, b) {
-    var val1 = a[attr];
-    var val2 = b[attr];
-    return val2 - val1;
-  }
-}
--- a/scripts/helpers/related_post.js
+++ b/scripts/helpers/related_post.js
@@ -0,0 +1,126 @@
+/**
+ * Butterfly
+ * Related Posts
+ * According the tag
+ */
+
+'use strict'
+
+hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
+  var relatedPosts = []
+  currentPost.tags.forEach(function (tag) {
+    allPosts.forEach(function (post) {
+      if (isTagRelated(tag.name, post.tags)) {
+        var relatedPost = {
+          title: post.title,
+          path: post.path,
+          cover: post.cover,
+          randomcover: post.randomcover,
+          weight: 1,
+          updated: post.updated,
+          created: post.date
+        }
+        var index = findItem(relatedPosts, 'path', post.path)
+        if (index !== -1) {
+          relatedPosts[index].weight += 1
+        } else {
+          if (currentPost.path !== post.path) {
+            relatedPosts.push(relatedPost)
+          }
+        }
+      }
+    })
+  })
+  if (relatedPosts.length === 0) {
+    return ''
+  }
+  var result = ''
+  const hexoConfig = hexo.theme.config.rootConfig
+  const config = hexo.theme.config
+
+  var limitNum = config.related_post.limit || 6
+  var dateType = config.related_post.date_type || 'created'
+  var headlineLang = this._p('post.recommend')
+  var lazySrc = config.lazyload.enable ? 'data-src' : 'src'
+  var lazyClass = config.lazyload.enable ? 'lazyload' : ''
+
+  relatedPosts = relatedPosts.sort(compare('weight'))
+
+  if (relatedPosts.length > 0) {
+    result += '<div class="relatedPosts">'
+    result +=
+      '<div class="relatedPosts_headline"><i class="fa fa-fw fa-thumbs-up" aria-hidden="true"></i><span>' +
+      ' ' +
+      headlineLang +
+      '</span></div>'
+    result += '<div class="relatedPosts_list">'
+
+    for (var i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
+      var cover =
+        relatedPosts[i].cover === false
+          ? relatedPosts[i].randomcover
+          : relatedPosts[i].cover
+      result +=
+        '<div class="relatedPosts_item"><a href="' +
+        hexoConfig.root +
+        relatedPosts[i].path +
+        '" title="' +
+        relatedPosts[i].title +
+        '">'
+      result +=
+        '<img class="relatedPosts_cover ' +
+        lazyClass +
+        '"' +
+        lazySrc +
+        '="' +
+        cover +
+        '">'
+      if (dateType === 'created') {
+        result +=
+          '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="fa fa-calendar fa-fw" aria-hidden="true"></i>' +
+          ' ' +
+          this.date(relatedPosts[i].created, hexoConfig.date_format) +
+          '</div>'
+      } else {
+        result +=
+          '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="fa fa-history fa-fw" aria-hidden="true"></i>' +
+          ' ' +
+          this.date(relatedPosts[i].updated, hexoConfig.date_format) +
+          '</div>'
+      }
+      result +=
+        '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>'
+      result += '</div></a></div>'
+    }
+
+    result += '</div><div class="clear_both"></div></div>'
+    return result
+  }
+})
+
+function isTagRelated (tagName, TBDtags) {
+  var result = false
+  TBDtags.forEach(function (tag) {
+    if (tagName === tag.name) {
+      result = true
+    }
+  })
+  return result
+}
+
+function findItem (arrayToSearch, attr, val) {
+  for (var i = 0; i < arrayToSearch.length; i++) {
+    if (arrayToSearch[i][attr] === val) {
+      return i
+    }
+  }
+  return -1
+}
+
+function compare (attr) {
+  return function (a, b) {
+    var val1 = a[attr]
+    var val2 = b[attr]
+    return val2 - val1
+  }
+}
--- a/scripts/tags/gallery.js
+++ b/scripts/tags/gallery.js
@@ -1,11 +1,18 @@
-const url_for = require('hexo-util').url_for.bind(hexo);
+/**
+ * Butterfly
+ * galleryGroup and allery
+ */

-function gallery(args, content) {
-  return `<div class="justified-gallery">${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
-          </div>`;
+'use strict'
+
+const url_for = require('hexo-util').url_for.bind(hexo)
+
+function gallery (args, content) {
+  return `<div class="justified-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
+          </div>`
 }

-function galleryGroup(args){
+function galleryGroup (args) {
  const name = args[0]
  const desrc = args[1]
  const url = url_for(args[2])
@@ -23,5 +30,5 @@ function galleryGroup(args){
  `
 }

-hexo.extend.tag.register('gallery', gallery, {ends: true});
-hexo.extend.tag.register('galleryGroup', galleryGroup);
+hexo.extend.tag.register('gallery', gallery, { ends: true })
+hexo.extend.tag.register('galleryGroup', galleryGroup)
--- a/scripts/tags/hide.js
+++ b/scripts/tags/hide.js
@@ -1,33 +1,71 @@
-
 /**
+ * Butterfly
+ * @example
+ * hideInline
 * {% hideInline content,display,bg,color %}
 * content不能包含當引號，可用 &apos;
- */
-function hideInline(args) {
-  args = args.join(' ').split(',')
-  let content = args[0].trim()
-  let display = args[1] || 'Click'
-  let bg = args[2] ==='' || typeof args[2] ==='undefined' ? '' : `background-color:${args[2]}`
-  let color = args[3] || '#fff'
-   return `<span class="hide-inline"><a class="hide-button button--primary button--animated" style="color:${color};${bg}">${display}
-    </a><span class="hide-content">${content}</span></span>`
-}
-
-/**
+ * hideBlock
 * {% hideBlock display,bg,color %}
 * content
 * {% endhideBlock %}
+ * hideToggle
+ * {% hideToggle display,bg,color %}
+ * content
+ * {% endhideToggle %}
 */
-function hideBlock(args,content) {
+
+'use strict'
+
+function hideInline (args) {
  args = args.join(' ').split(',')
-  let display = args[0] || 'Click'
-  let bg = args[1] ==='' || typeof args[2] ==='undefined' ? '' : `background-color:${args[2]}`
-  let color = args[2] || '#fff'
+  var content = args[0]
+  var display = args[1] || 'Click'
+  var bg = args[2] || false
+  var color = args[3] || false
+  var group = 'style="'

-   return `<div class="hide-block"><a class="hide-button button--primary button--animated" style="color:${color};${bg}">${display}
-    </a><span class="hide-content">${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}</span></div>`
+  if (bg) group += `background-color: ${bg};`
+  if (color) group += `color: ${color}`
+  group += '"'

+  return `<span class="hide-inline"><a class="hide-button button--primary button--animated" ${group}>${display}
+  </a><span class="hide-content">${content}</span></span>`
 }

-hexo.extend.tag.register('hideInline', hideInline);
-hexo.extend.tag.register('hideBlock', hideBlock, {ends: true});
+function hideBlock (args, content) {
+  args = args.join(' ').split(',')
+  var display = args[0] || 'Click'
+  var bg = args[1] || false
+  var color = args[2] || false
+  var group = 'style="'
+
+  if (bg) group += `background-color: ${bg};`
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `<div class="hide-block"><a class="hide-button button--primary button--animated" ${group}>${display}
+    </a><span class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</span></div>`
+}
+
+function hideToggle (args, content) {
+  args = args.join(' ').split(',')
+  var display = args[0]
+  var bg = args[1] || false
+  var color = args[2] || false
+  var group = 'style="'
+  var border = ''
+
+  if (bg) {
+    border = `style="border: 1px solid ${bg}"`
+    group += `background-color: ${bg};`
+  }
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `<div class="hide-toggle" ${border}><div class="hide-button toggle-title" ${group}><i class="fa fa-caret-right fa-fw"></i><span>${display}</span></div>
+    <div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</div></div>`
+}
+
+hexo.extend.tag.register('hideInline', hideInline)
+hexo.extend.tag.register('hideBlock', hideBlock, { ends: true })
+hexo.extend.tag.register('hideToggle', hideToggle, { ends: true })
--- a/scripts/tags/mermaid.js
+++ b/scripts/tags/mermaid.js
@@ -1,7 +1,15 @@
-function mermaid(args, content) {
+/**
+ * Butterfly
+ * mermaid
+ * https://github.com/mermaid-js/mermaid
+ */
+
+'use strict'
+
+function mermaid (args, content) {
  return `<div class="mermaid">
          ${content}
-          </div>`;
+          </div>`
 }

-hexo.extend.tag.register('mermaid', mermaid, {ends: true});
+hexo.extend.tag.register('mermaid', mermaid, { ends: true })
--- a/scripts/tags/note.js
+++ b/scripts/tags/note.js
@@ -3,13 +3,13 @@
 * transplant from hexo-theme-next
 */

-'use strict';
+'use strict'

-function postNote(args, content) {
+function postNote (args, content) {
  return `<div class="note ${args.join(' ')}">
-            ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
-          </div>`;
+            ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
+          </div>`
 }

-hexo.extend.tag.register('note', postNote, {ends: true});
-hexo.extend.tag.register('subnote', postNote, {ends: true});
+hexo.extend.tag.register('note', postNote, { ends: true })
+hexo.extend.tag.register('subnote', postNote, { ends: true })
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -192,6 +192,10 @@ img:not([src])

 .img-alt
  margin: -.5rem 0 .5rem
+  color: $font-black
+
+  &:hover
+    text-decoration: none !important

 // hexo tag video
 .video-container
@@ -209,41 +213,13 @@ img:not([src])
    width: 100%
    height: 100%

-// tag-hide
-.hide-inline,
-.hide-block
-  & > .hide-button
-    position: relative
-    z-index: 1
-    display: inline-block
-    padding: 0 1rem
-    background: $tag-hide-bg
-    text-align: center
-    cursor: pointer
-
-    &:hover
-      text-decoration: none !important
-
-  & > .hide-content
-    display: none
-
-.hide-inline
-  & > .hide-button
-    margin: 0 .3rem
-
-  & > .hide-content
-    margin: 0 .3rem
-
-.hide-block
-  margin: 0 0 .8rem
-
 .comment_headling
  margin-bottom: 10px
  font-weight: 700
  font-size: 20px

 .post-ad
-  margin: 2rem 0 !important
+  margin: 2rem 0

 .ad_height
  display: block !important
@@ -256,16 +232,17 @@ img:not([src])
 #nav
  animation: nav-effect 1s

-// #page-header
-// animation: header-effect 1s
 #site_title,
 #site_subtitle
  animation: titlescale 1s

-canvas,
+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
@@ -292,13 +269,13 @@ if hexo-config('avatar.effect') == true

 .tocOpenMobile
  .sidebar-toc__title
-    animation: tocsidebarRtoL .5s
+    animation: tocsidebarRtoL .4s

  .sidebar-toc__progress
-    animation: tocsidebarRtoL .7s
+    animation: tocsidebarRtoL .6s

  .sidebar-toc__content
-    animation: tocsidebarRtoL .9s
+    animation: tocsidebarRtoL .7s

@keyframes scroll-down-effect
  0%
@@ -322,18 +299,6 @@ if hexo-config('avatar.effect') == true
    opacity: 1
    transform: translateY(0)

-@keyframes header-effect
-  0%
-    opacity: 0
-
-  60%
-    opacity: 0
-    transform: translateY(-30px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
@keyframes headerNoOpacity
  0%
    transform: translateY(-50px)
@@ -375,6 +340,13 @@ if hexo-config('avatar.effect') == true
  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)
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -271,6 +271,3 @@ blockquote
  background: darken($highlight-background, 5)
  color: $highlight-foreground
  font-size: 14px
-
-.highlight-close
-  height: 0 !important
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -16,14 +16,13 @@

  .card-info
    img
-      display: inline-block
      width: 110px
      height: 110px
      border-radius: 70px
-      transition: all .3s
+      transition: all .5s

      &:hover
-        transform: rotate(540deg)
+        transform: rotate(360deg)

    .author-info
      &__name
@@ -34,23 +33,24 @@
        margin-top: -.3rem

    .card-info-data
+      display: table
      padding: .7rem 0
+      width: 100%
+      table-layout: fixed

      & > .card-info-data-item
-        display: inline-block
-        width: 33.3%
+        display: table-cell

        a
          .headline
-            display: block
            overflow: hidden
            color: $font-black
-            // text-transform: uppercase
            text-overflow: ellipsis
            white-space: nowrap
            font-size: .7rem

          .length_num
+            margin-top: -.3rem
            color: $dark-black
            font-size: 1rem

@@ -75,7 +75,6 @@
      display: block
      background-color: $light-blue
      color: $button-color
-      text-transform: uppercase
      line-height: 1.6rem

      span
@@ -92,7 +91,8 @@

  .card-tag-cloud
    a
-      word-break: keep-all
+      display: inline-block
+      padding: 0 .1rem

      &:hover
        color: $light-blue !important
@@ -147,20 +147,20 @@
              .aside-post_title
                height: auto

-  .card-archives ul.archive-list,
-  .card-categories ul.aside-category-item
+  .card-archives ul.card-archive-list,
+  .card-categories ul.card-category-list
    margin: 0
    padding: .2rem 0 0
    list-style: none

-  .card-archives ul.archive-list > .archive-list-item,
-  .card-categories ul.aside-category-item > .aside-category-list
-    padding: .2rem 1rem
+  .card-archives ul.card-archive-list > .card-archive-list-item,
+  .card-categories ul.card-category-list > .card-category-list-item
+    padding: .15rem 1rem
    cursor: pointer
-    transition: all .3s
+    transition: all .5s

    &:hover
-      padding: .2rem .85rem
+      padding: .15rem .85rem
      background-color: $light-blue

    a
@@ -180,8 +180,18 @@
          width: 20%
          text-align: right

+    &.more
+      span
+        padding-right: .3rem
+        width: auto !important
+        transition: .5s
+
+      &:hover
+        span
+          padding-right: .6rem
+
  .card-categories
-    .aside-category-item
+    .card-category-list
      &.child
        padding: 0 0 0 1.2rem

--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -43,7 +43,7 @@
      margin: 0 .5rem
      color: $light-grey
      text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
-      font-size: .9rem
+      font-size: 1rem
      cursor: pointer

  #scroll_down
@@ -246,14 +246,15 @@
          content: ''

        li
-          padding: 1px 10px
          list-style: none
-          text-align: center

          &:hover
            background: $theme-color

          a
+            display: inline-block
+            padding: .3rem .7rem
+            width: 100%
            color: $font-black
            text-shadow: none

@@ -312,3 +313,8 @@
            .post-meta-pv-cv
              .post-meta__separator:first-child
                display: none
+
+            if !hexo-config('busuanzi.page_pv')
+              .post-meta-commentcount
+                .post-meta__separator
+                  display: none
--- a/source/css/_layout/loadding.styl
+++ b/source/css/_layout/loadding.styl
@@ -0,0 +1,94 @@
+if hexo-config('preloader')
+  loading-bg()
+    position: fixed
+    z-index: 1000
+    width: 50%
+    height: 100%
+    background-color: $preloader-bg
+    transition: all .5s
+
+  #loading-box
+    .loading-left-bg
+      loading-bg()
+
+    .loading-right-bg
+      loading-bg()
+      right: 0
+
+    .spinner-box
+      position: fixed
+      z-index: 1001
+      display: flex
+      justify-content: center
+      align-items: center
+      width: 100%
+      height: 100vh
+
+      .configure-border-1
+        position: absolute
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: #ffab91
+        animation: configure-clockwise 3s ease-in-out 0s infinite alternate
+
+      .configure-border-2
+        left: -115px
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: rgb(63, 249, 220)
+        transform: rotate(45deg)
+        animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
+
+      .loading-word
+        position: absolute
+        color: $white
+        font-size: .8rem
+
+      .configure-core
+        width: 100%
+        height: 100%
+        background-color: $preloader-bg
+
+    &.loaded
+      .loading-left-bg
+        transform: translate(-100%, 0)
+
+      .loading-right-bg
+        transform: translate(100%, 0)
+
+      .spinner-box
+        display: none
+
+  @keyframes configure-clockwise
+    0%
+      transform: rotate(0)
+
+    25%
+      transform: rotate(90deg)
+
+    50%
+      transform: rotate(180deg)
+
+    75%
+      transform: rotate(270deg)
+
+    100%
+      transform: rotate(360deg)
+
+  @keyframes configure-xclockwise
+    0%
+      transform: rotate(45deg)
+
+    25%
+      transform: rotate(-45deg)
+
+    50%
+      transform: rotate(-135deg)
+
+    75%
+      transform: rotate(-225deg)
+
+    100%
+      transform: rotate(-315deg)
--- a/source/css/_layout/mobile-sidebar.styl
+++ b/source/css/_layout/mobile-sidebar.styl
@@ -27,19 +27,22 @@
      text-align: center

      img
-        display: inline-block
-        padding: 0
        width: 110px
        height: 110px
        border-radius: 70px
-        transition: all .3s
+        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: inline-block
-        width: 33.3%
+        display: table-cell

        .mobile_data_link
          & > a > div
@@ -54,15 +57,13 @@
          .headline
            display: block
            color: $font-black
-            // text-transform: uppercase
            font-size: .7rem

    hr
      margin: 1rem auto

    .menus_items
-      margin-bottom: 5rem
-      padding: 0 .5rem
+      padding: 0 .5rem 2rem

      .site-page
        position: relative
--- a/source/css/_layout/page.styl
+++ b/source/css/_layout/page.styl
@@ -130,7 +130,7 @@
        display: -webkit-box
        overflow: hidden
        margin-top: .3rem
-        height: 85px
+        // height: 85px
        word-break: break-word
        -webkit-line-clamp: 3
        -webkit-box-orient: vertical
@@ -270,7 +270,7 @@
      -webkit-box-orient: vertical

      &:hover
-        color: $light-blue
+        color: $light-blue !important
        transform: translateX(20px)

    &__img
@@ -380,3 +380,9 @@
  .layout_page
    & > div:first-child:not(.recent-posts)
      width: 100% !important
+
+// ie10-ios11使用
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
+  .recent-post-info
+    .content
+      height: 90px
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -163,9 +163,6 @@ a.fancybox
  width: 100%
  text-align: center

-p
-  margin: 0 0 .8rem
-
 img
  max-width: 100%
  transition: all .2s
@@ -328,6 +325,9 @@ img
  img
    margin: 0 auto .8rem

+  p
+    margin: 0 0 .8rem
+
@media screen and (max-width: 1024px)
  .layout_post
    width: auto
@@ -338,3 +338,14 @@ img

    & > #post
      padding: 1.8rem .7rem
+
+// adjust the layout width in big screen
+@media screen and (min-width: $lr)
+  .layout_post
+    max-width: 1300px
+
+  .layout_page
+    max-width: 1500px
+
+    &.hide-aside
+      max-width: 1300px
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -1,28 +1,25 @@
 if hexo-config('valine.enable')
-  // valine
  #vcomment
    button
-      padding: .3rem 1rem
+      padding: .3rem .8rem
      border-color: $button-color
      background-color: $light-blue
      color: $button-color
      font-size: .7rem
+      transition: all .3s

      &:hover
        background-color: $theme-button-hover-color

-    textarea
    if hexo-config('valine.bg')
+      textarea
        background: url(hexo-config('valine.bg')) 100% 100% no-repeat

-    .info
-      display: none
-
    .vimg
-      border: 0
+      transition: all .3s

      &:hover
-        transform: rotate(540deg)
+        transform: rotate(360deg)

    .vat
      padding: 0 .8rem
@@ -30,6 +27,7 @@ if hexo-config('valine.enable')
      border-radius: 5px
      color: $light-blue
      font-size: .7125rem
+      transition: all .3s

      &:hover
        background-color: $light-blue
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -39,7 +39,21 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      .article-title
        color: alpha(#FFFFFF, .8) !important

-    #page-header
+    // 頭部
+    #nav
+      &:before
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        background-color: alpha($dark-black, .7)
+        content: ''
+
+      & > #page-header
+        a
+          color: alpha(#FFFFFF, .8) !important
+
        &.fixed
          background: alpha(#121212, .8)
          box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
@@ -54,9 +68,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'

          li
            &:hover
-            background: lighten(#121212, 20)
+              background: lighten(#121212, 20) !important

            a
+              color: alpha(#FFFFFF, .8)
+
+      #site_subtitle
+        & > span
          color: alpha(#FFFFFF, .6)

    // 代碼框
@@ -109,6 +127,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      .post-copyright-info
        color: alpha(#FFFFFF, .6)

+      &:after
+        background: #121212
+
    // 音樂播放器
    .aplayer
      filter: brightness(.7)
@@ -120,11 +141,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        & > i,
        & > a,
        & > div
-          background-color: lighten(#121212, 5) !important
-          color: alpha(#FFFFFF, .6) !important
+          background-color: lighten(#121212, 5)
+          color: alpha(#FFFFFF, .6)

          &:hover
-            background: lighten(#121212, 20) !important
+            background: lighten(#121212, 20)

    // 打賞按鈕
    .post-reward
@@ -138,8 +159,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
          border-top: 13px solid lighten(#121212, 10) !important

    .md-links-item:before,
-    .aside-category-list:hover,
-    .archive-list-item:hover,
+    .card-category-list-item:hover,
+    .card-archive-list-item:hover,
    #bookmark-it
      background-color: lighten(#121212, 10) !important

@@ -156,33 +177,21 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      .headline,
      .length_num,
      .aside-post_title,
-      .aside-category-list_link,
-      .archive-list-link,
-      .social-icon
+      .card-category-list-link,
+      .card-archive-list-link,
+      .social-icon,
+      .card-category-list-link-more,
+      .card-archive-list-link-more
        color: alpha(#FFFFFF, .6) !important

    .button--animated:before
-      background: lighten(#121212, 20) !important
+      background: lighten(#121212, 20)

-    // 頭部
-    #nav
-      &:before
-        position: absolute
-        top: 0
-        right: 0
-        bottom: 0
-        left: 0
-        background-color: alpha($dark-black, .7)
-        content: ''
-
-    #nav span,
-    #nav i,
-    #page-header a,
-    #page-header .toggle-menu,
    #post-meta,
    #post-meta a,
    #footer-wrap,
-    #footer-wrap a
+    #footer-wrap a,
+    .img-alt
      color: alpha(#FFFFFF, .6) !important

    .posttitle,
@@ -215,11 +224,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      color: alpha(#FFFFFF, .8) !important

    // 時間軸界面
-    .article-sort-item__title
+    .article-sort
+      &-item__title
        color: alpha(#FFFFFF, .6)

-      &:hover
-        color: #49b1f5
+      &-item:before,
+      &-title:before
+        background: #121212

    // 手機 MENU,TOC
    #mobile-sidebar
@@ -245,6 +256,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        filter: brightness(.7)
        color: #4c4948

+    // hide-tags
+    .hide-button
+      filter: brightness(.7)
+
    // 第三方
    // 插件 hexo-blog-encrypt
    #hexo-blog-encrypt
@@ -255,6 +270,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      input
        background-color: #121212

+    .mermaid
+      filter: brightness(.7)
+
    if hexo-config('gitalk') && hexo-config('gitalk.enable')
      #gitalk-container
        .gt-header-textarea,
@@ -268,61 +286,16 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
          fill: alpha(#FFFFFF, .6) !important

    if hexo-config('valine') && hexo-config('valine.enable')
-      // 評論
      #vcomment
-        p,
-        a,
-        textarea,
-        .vemoji-btn,
-        .vpreview-btn,
-        input,
-        path,
-        .vcount,
-        .vnum,
-        .vtime,
-        .vsys,
-        .vsys,
-        .vnick
-          color: alpha(#FFFFFF, .6) !important
-
-        .vsys
-          background: rgb(97, 106, 107) !important
-
        .vbtn,
        .vat
          border: 1px solid alpha(#FFFFFF, .6)
-          background: lighten(#121212, 5) !important
+          background: #121212 !important
          color: alpha(#FFFFFF, .6) !important

          &:hover
            background: lighten(#121212, 20) !important

-        .vwrap
-          border: 1px solid alpha(#FFFFFF, .6)
-
-        input
-          border-bottom: 1px dashed #616a6b
-
-        .vh
-          border-bottom: 1px dashed #616a6b
-
-        pre
-          border: 1px solid alpha(#FFFFFF, .6)
-          background-color: #121212
-
-          code
-            background: transparent
-
-        code
-          background-color: #2c2c2c
-          color: alpha(#FFFFFF, .6)
-
-        .vcontent.expand:before
-          background: linear-gradient(180deg, hsla(0, 0, 0, 0), hsl(218, 8%, 19%))
-
-        .vcontent.expand:after
-          background: hsla(204, 5%, 22%, 1)
-
    if hexo-config('local_search') && hexo-config('local_search.enable')
      #local-search
        background: #121212
@@ -366,5 +339,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
            blockquote
              color: alpha(#FFFFFF, .6)

-    .mermaid
-      filter: brightness(.7)
+    if hexo-config('preloader')
+      #loading-box
+        .loading-left-bg,
+        .loading-right-bg,
+        .configure-core
+          background-color: darken(#121212, 2)
+
+        .loading-word
+          color: alpha(#FFFFFF, .6)
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -1,7 +1,9 @@
 if hexo-config('readmode') && hexo-config('readmode.enable')
  [data-theme='light']
+    $light-redmode-bg = #fff
+
    .read-mode
-      background: #fff
+      background: $light-redmode-bg

      #nav.post-bg
        a
@@ -17,12 +19,12 @@ if hexo-config('readmode') && hexo-config('readmode.enable')

        blockquote
          border-left: .2rem solid #ddd
-          background-color: transparent
+          background-color: $light-redmode-bg

        ol,
        li
          &:before
-            background: transparent
+            background: $light-redmode-bg
            color: #4c4948

        ul
@@ -32,28 +34,40 @@ if hexo-config('readmode') && hexo-config('readmode.enable')

        hr
          border: 2px dashed #d6dbdf
-          background: transparent
+          background: $light-redmode-bg

          &:before
            color: darken(#d6dbdf, 10)

+        .hide-toggle
+          border: 1px solid darken(#d6dbdf, 10) !important
+
        .hide-button
-          background: darken(#d6dbdf, 10) !important
+          background: $light-redmode-bg !important
+          color: #4c4948 !important
+
+        .hide-inline,
+        .hide-block
+          & >.hide-button
+            border: 1px solid darken(#d6dbdf, 10)
+
+          & > .button--animated:before
+            background: $light-redmode-bg

        .note
          border: 2px solid #eee
-          border-left-color: transparent
-          background-color: transparent
+          background-color: $light-redmode-bg

-      #mobile-sidebar-menus,
-      #rightside i,
+      #rightside i:not(.fa-cog),
      #rightside a,
      #rightside #rightside_config
-        background: darken(#d6dbdf, 10) !important
+        background: darken(#d6dbdf, 20) !important

  [data-theme='dark']
+    $dark-readmode-bg = #0d0d0d
+
    .read-mode
-      background: #0d0d0d
+      background: $dark-readmode-bg

      #article-container
        code
@@ -61,12 +75,12 @@ if hexo-config('readmode') && hexo-config('readmode.enable')

        blockquote
          border-left: .2rem solid rgba(255, 255, 255, .6)
-          background-color: transparent
+          background-color: $dark-readmode-bg

        ol,
        li
          &:before
-            background: transparent
+            background: $dark-readmode-bg
            color: rgba(255, 255, 255, .6)

        ul
@@ -74,15 +88,27 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
            &:before
              border: .15rem solid rgba(255, 255, 255, .6)

-        .note
-          border: 2px solid rgba(255, 255, 255, .6)
-          border-left-color: transparent
-          filter: none
-          background-color: transparent
-          color: rgba(255, 255, 255, .6)
+        .hide-toggle
+          border: 1px solid rgba(255, 255, 255, .6) !important

        .hide-button
-          background: #1f1f1f !important
+          background: $dark-readmode-bg !important
+          filter: none
+          color: rgba(255, 255, 255, .6) !important
+
+        .hide-inline,
+        .hide-block
+          & >.hide-button
+            border: 1px solid rgba(255, 255, 255, .6)
+
+          & > .button--animated:before
+            background: $dark-readmode-bg !important
+
+        .note
+          border: 2px solid rgba(255, 255, 255, .6)
+          filter: none
+          background-color: $dark-readmode-bg
+          color: rgba(255, 255, 255, .6)

  .read-mode
    #body-wrap
@@ -114,10 +140,6 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
    .highlight
      display: block !important

-    #rightside
-      #darkmode
-        display: none
-
    & > canvas
      display: none !important

--- a/source/css/_search/algolia.styl
+++ b/source/css/_search/algolia.styl
@@ -45,6 +45,10 @@
      &:hover
        color: $search-color

+    em
+      color: $search-keyword-highlight
+      font-weight: bold
+
  .ais-pagination.pagination
    margin: .8rem 0 0
    padding: 0
--- a/source/css/_search/index.styl
+++ b/source/css/_search/index.styl
@@ -50,4 +50,5 @@
    height: 100%

  .search-result-list
-    max-height: 100% !important
+    max-height: 75vh !important
+    padding-bottom: 2rem
--- a/source/css/_search/local-search.styl
+++ b/source/css/_search/local-search.styl
@@ -18,7 +18,8 @@

  .local-search__hit-item
    position: relative
-    padding-left: 1.5rem
+    padding-left: 1.3rem
+    line-height: 1.7

    &:hover
      &:before
@@ -27,7 +28,7 @@
    &:before
      $w = .3rem
      position: absolute
-      top: .4rem
+      top: .3rem
      left: 0
      width: w = $w
      height: h = w
@@ -41,12 +42,21 @@
    a
      display: block
      color: $font-black
+      font-weight: 600
      font-size: 14px
      cursor: pointer

      &:hover
        color: $search-color

+    .search-result
+      margin: 0 0 .4rem
+      word-break: break-all
+
+    .search-keyword
+      color: $search-keyword-highlight
+      font-weight: bold
+
  .local-search-stats__hr
    display: none !important

--- a/source/css/_layout/gallery.styl
+++ b/source/css/_layout/gallery.styl
@@ -9,6 +9,9 @@ figure.gallery-group
  background: $dark-black
  -webkit-transform: translate3d(0, 0, 0)

+  @media screen and (max-width: 600px)
+    width: calc(100% - .4rem)
+
  &:hover
    img
      opacity: .4
@@ -106,7 +109,3 @@ figure.gallery-group
  .fancybox
    width: auto
    text-align: inherit
-
-@media screen and (max-width: 600px)
-  figure.gallery-group
-    width: calc(100% - .4rem)
--- a/source/css/_tags/hide.styl
+++ b/source/css/_tags/hide.styl
@@ -0,0 +1,53 @@
+// tag-hide
+.hide-inline,
+.hide-block
+  & > a.hide-button
+    position: relative
+    z-index: 1
+    display: inline-block
+    padding: 0 1rem
+    background: $tag-hide-bg
+    color: $white !important
+    text-align: center
+    cursor: pointer
+
+    &:hover
+      text-decoration: none !important
+
+    &.open
+      display: none
+
+  & > .hide-content
+    display: none
+
+.hide-inline
+  & > .hide-button
+    margin: 0 .3rem
+
+  & > .hide-content
+    margin: 0 .3rem
+
+.hide-block
+  margin: 0 0 .8rem
+
+.hide-toggle
+  margin-bottom: 1rem
+  border: 1px solid $tag-hide-toggle-bg
+
+  & > .hide-button
+    padding: .3rem .5rem
+    background: $tag-hide-toggle-bg
+    color: $font-color
+    cursor: pointer
+
+    & > i
+      font-size: 1.2em
+      transition: all .3s
+
+    &.open
+      i
+        transform: rotate(90deg)
+
+  & > .hide-content
+    display: none
+    margin: 1.5rem 1.2rem
--- a/source/css/_layout/note.styl
+++ b/source/css/_layout/note.styl
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -5,6 +5,7 @@
@import '_global'
@import '_highlight/highlight'
@import '_layout/*'
+@import '_tags/*'
@import '_mode/*'

 // search
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -39,6 +39,7 @@ $rem = 20px
 $text-line-height = 2
 $sm = 768px
 $bg = 1024px
+$lr = 2000px
 $web-bg = convert(hexo-config('background'))
 $index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh
 $index_site_info_top = convert(hexo-config('index_site_info_top')) || 43%
@@ -78,12 +79,14 @@ $reward-pop-up-color = #858585
 // search
 $search-bg = #f6f8fa
 $search-color = $theme-color
+$search-keyword-highlight = #F47466
 //gallery
 $gallery-color = #fff
 // tag-hide
 $tag-hide-bg = $theme-color
-
-
+$tag-hide-toggle-bg = #f0f0f0
+//preloader
+$preloader-bg = #37474f

 // Note colors
 // --------------------------------------------------
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -247,11 +247,15 @@ $(function () {

  /**
   * 代碼
+   * 只適用於Hexo默認的代碼渲染
   */
+  const $figureHighlight = $('figure.highlight')
+
+  if ($figureHighlight.length) {
    const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
    const isHighlightLang = GLOBAL_CONFIG.highlightLang
    const isHighlightShrink = GLOBAL_CONFIG.highlightShrink
-  const $figureHighlight = $('figure.highlight')
+
    if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') {
      $figureHighlight.wrap('<div class="code-area-wrap"></div>').before('<div class="highlight-tools"></div>')
    }
@@ -356,12 +360,30 @@ $(function () {
        selection.removeAllRanges()
      })
    }
+  }
+
+  /**
+ * PhotoFigcaption
+ */
+  function addPhotoFigcaption () {
+    var images = $('#article-container img')
+    images.each(function (i, o) {
+      var $this = $(o)
+      if ($this.attr('alt')) {
+        var t = $('<div class="img-alt is-center">' + $this.attr('alt') + '</div>')
+        $this.after(t)
+      }
+    })
+  }
+  if (GLOBAL_CONFIG.isPhotoFigcaption) addPhotoFigcaption()

  /**
   * justified-gallery 圖庫排版
   */
  var $justifiedGallery = $('.justified-gallery')
+  var isJustifiedGallery = false
  if ($justifiedGallery.length) {
+    isJustifiedGallery = true
    var $imgList = $justifiedGallery.find('img')
    $imgList.unwrap()
    if ($imgList.length) {
@@ -372,12 +394,20 @@ $(function () {
    }
    $('head').append('<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css">')
    loadScript('https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js', function () {
-      $justifiedGallery.not($('.hide-content .justified-gallery')).justifiedGallery({
+      initJustifiedGallery($justifiedGallery)
+    })
+
+    var initJustifiedGallery = function (selector) {
+      selector.each(function (i, o) {
+        if ($(this).is(':visible')) {
+          $(this).justifiedGallery({
            rowHeight: 220,
            margins: 4
          })
+        }
      })
    }
+  }

  /**
   * fancybox和 mediumZoom
@@ -503,8 +533,8 @@ $(function () {
    }

    var updateAnchor = function (anchor) {
-      if (window.history.replaceState && anchor !== window.location.hash) {
-        window.history.replaceState(undefined, undefined, anchor)
+      if (anchor !== window.location.hash) {
+        location.replace(window.location.href.split('#')[0] + anchor)
      }
    }

@@ -708,6 +738,9 @@ $(function () {
    interval = setInterval(showDateTime, 10000)
  }

+  /**
+   * 百度推送
+   */
  if (GLOBAL_CONFIG.baiduPush) {
    (function () {
      var bp = document.createElement('script')
@@ -726,26 +759,18 @@ $(function () {
   * tag-hide
   */
  var $hideInline = $('.hide-button')
+  if ($hideInline.length) {
    $hideInline.on('click', function (e) {
      e.preventDefault()
-    $(this).hide()
+      var $this = $(this)
      var $hideContent = $(this).next('.hide-content')
-    $hideContent.show()
-    $hideContent.find('.justified-gallery').justifiedGallery({
-      rowHeight: 220,
-      margins: 4
-    })
-  })
-
-  function addPhotoFigcaption () {
-    var images = $('#article-container img')
-    images.each(function (i, o) {
-      var $this = $(o)
-      if ($this.attr('alt')) {
-        var t = $('<div class="img-alt is-center">' + $this.attr('alt') + '</div>')
-        $this.after(t)
+      $this.toggleClass('open')
+      $hideContent.toggle()
+      if ($this.hasClass('open')) {
+        if (isJustifiedGallery && $hideContent.find('.justified-gallery').length > 0) {
+          initJustifiedGallery($hideContent.find('.justified-gallery'))
+        }
      }
    })
  }
-  if (GLOBAL_CONFIG.isPhotoFigcaption) addPhotoFigcaption()
 })
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -1,7 +1,10 @@
 $(function () {
  var loadFlag = false
  $('a.social-icon.search').on('click', function () {
-    $('body').css({ width: '100%', overflow: 'hidden' })
+    $('body').css({
+      width: '100%',
+      overflow: 'hidden'
+    })
    $('.search-dialog').css('display', 'block')
    $('#local-search-input input').focus()
    $('.search-mask').fadeIn()
@@ -52,6 +55,7 @@ $(function () {
            url: $('url', this).text()
          }
        }).get()
+
        var $input = $('#local-search-input input')[0]
        var $resultContent = $('#local-hits')[0]
        $input.addEventListener('input', function () {
@@ -66,13 +70,17 @@ $(function () {
          // perform local searching
          datas.forEach(function (data) {
            var isMatch = true
+            if (!data.title || data.title.trim() === '') {
+              data.title = 'Untitled'
+            }
            var dataTitle = data.title.trim().toLowerCase()
            var dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
            var dataUrl = data.url
            var indexTitle = -1
            var indexContent = -1
+            var firstOccur = -1
            // only match artiles with not empty titles and contents
-            if (dataTitle !== '' && dataContent !== '') {
+            if (dataTitle !== '' || dataContent !== '') {
              keywords.forEach(function (keyword, i) {
                indexTitle = dataTitle.indexOf(keyword)
                indexContent = dataContent.indexOf(keyword)
@@ -82,20 +90,60 @@ $(function () {
                  if (indexContent < 0) {
                    indexContent = 0
                  }
+                  if (i === 0) {
+                    firstOccur = indexContent
+                  }
                }
              })
+            } else {
+              isMatch = false
            }
+
            // show search results
            if (isMatch) {
-              str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>' + '</div>'
+              var content = data.content.trim().replace(/<[^>]+>/g, '')
+              if (firstOccur >= 0) {
+                // cut out 130 characters
+                var start = firstOccur - 30
+                var end = firstOccur + 100
+
+                if (start < 0) {
+                  start = 0
+                }
+
+                if (start === 0) {
+                  end = 100
+                }
+
+                if (end > content.length) {
+                  end = content.length
+                }
+
+                var matchContent = content.substring(start, end)
+
+                // highlight all keywords
+                keywords.forEach(function (keyword) {
+                  var regS = new RegExp(keyword, 'gi')
+                  matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
+                  dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
+                })
+
+                str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>'
                count += 1
                $('.local-search-stats__hr').show()
+
+                if (dataContent !== '') {
+                  str += '<p class="search-result">' + matchContent + '...</p>'
+                }
+              }
+              str += '</div>'
            }
          })
          if (count === 0) {
            str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
              '</div>'
          }
+          str += '</div>'
          $resultContent.innerHTML = str
        })
      }
--- a/source/js/third-party/canvas-ribbon.js
+++ b/source/js/third-party/canvas-ribbon.js
@@ -5,31 +5,32 @@
 * GitHub: https://github.com/hustcc/ribbon.js
 **/

-!(function () {
-
-  var script = document.getElementById('ribbon');
+!(function() {
+  var script = document.getElementById("ribbon");
  var mb = script.getAttribute("mobile");
-  if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
+  if (
+    mb == "false" &&
+    /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)
+  ) {
    return;
  }

  config = {
-    z: attr(script, 'zIndex', -1), // z-index
-    a: attr(script, 'alpha', 0.6), // alpha
-    s: attr(script, 'size', 90), // size
-    c: attr(script, 'data-click', true) // click-to-change
-  }
+    z: attr(script, "zIndex", -1), // z-index
+    a: attr(script, "alpha", 0.6), // alpha
+    s: attr(script, "size", 90), // size
+    c: attr(script, "data-click", true) // click-to-change
+  };

-
-  function attr (node, attr, default_value) {
+  function attr(node, attr, default_value) {
    if (default_value === true) {
-      return node.getAttribute(attr) || default_value
+      return node.getAttribute(attr) || default_value;
    }
-    return Number(node.getAttribute(attr)) || default_value
+    return Number(node.getAttribute(attr)) || default_value;
  }

-  var canvas = document.createElement('canvas'),
-    g2d = canvas.getContext('2d'),
+  var canvas = document.createElement("canvas"),
+    g2d = canvas.getContext("2d"),
    pr = window.devicePixelRatio || 1,
    width = window.innerWidth,
    height = window.innerHeight,
@@ -40,52 +41,67 @@
    r = 0,
    pi = m.PI * 2,
    cos = m.cos,
-    random = m.random
-  canvas.width = width * pr
-  canvas.height = height * pr
-  g2d.scale(pr, pr)
-  g2d.globalAlpha = config.a
+    random = m.random;
+  canvas.id = "ribbon-canvas";
+  canvas.width = width * pr;
+  canvas.height = height * pr;
+  g2d.scale(pr, pr);
+  g2d.globalAlpha = config.a;
  canvas.style.cssText =
-    'opacity: ' +
+    "opacity: " +
    config.a +
-    ';position:fixed;top:0;left:0;z-index: ' +
+    ";position:fixed;top:0;left:0;z-index: " +
    config.z +
-    ';width:100%;height:100%;pointer-events:none;'
+    ";width:100%;height:100%;pointer-events:none;";
  // create canvas
-  document.getElementsByTagName('body')[0].appendChild(canvas)
+  document.getElementsByTagName("body")[0].appendChild(canvas);

-  function redraw () {
-    g2d.clearRect(0, 0, width, height)
-    q = [{ x: 0, y: height * 0.7 + f }, { x: 0, y: height * 0.7 - f }]
-    while (q[1].x < width + f) draw(q[0], q[1])
+  function redraw() {
+    g2d.clearRect(0, 0, width, height);
+    q = [
+      {
+        x: 0,
+        y: height * 0.7 + f
+      },
+      {
+        x: 0,
+        y: height * 0.7 - f
      }
-  function draw (i, j) {
-    g2d.beginPath()
-    g2d.moveTo(i.x, i.y)
-    g2d.lineTo(j.x, j.y)
+    ];
+    while (q[1].x < width + f) draw(q[0], q[1]);
+  }
+
+  function draw(i, j) {
+    g2d.beginPath();
+    g2d.moveTo(i.x, i.y);
+    g2d.lineTo(j.x, j.y);
    var k = j.x + (random() * 2 - 0.25) * f,
-      n = line(j.y)
-    g2d.lineTo(k, n)
-    g2d.closePath()
-    r -= pi / -50
+      n = line(j.y);
+    g2d.lineTo(k, n);
+    g2d.closePath();
+    r -= pi / -50;
    g2d.fillStyle =
-      '#' +
+      "#" +
      (
        ((cos(r) * 127 + 128) << 16) |
        ((cos(r + pi / 3) * 127 + 128) << 8) |
        (cos(r + (pi / 3) * 2) * 127 + 128)
-      ).toString(16)
-    g2d.fill()
-    q[0] = q[1]
-    q[1] = { x: k, y: n }
+      ).toString(16);
+    g2d.fill();
+    q[0] = q[1];
+    q[1] = {
+      x: k,
+      y: n
+    };
  }
-  function line (p) {
-    t = p + (random() * 2 - 1.1) * f
-    return t > height || t < 0 ? line(p) : t
+
+  function line(p) {
+    t = p + (random() * 2 - 1.1) * f;
+    return t > height || t < 0 ? line(p) : t;
  }
-  if (config.c !== 'false') {
-    document.onclick = redraw
-    document.ontouchstart = redraw
+  if (config.c !== "false") {
+    document.onclick = redraw;
+    document.ontouchstart = redraw;
  }
-  redraw()
-})()
+  redraw();
+})();
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -48,10 +48,10 @@ function throttle (func, wait, options) {
  return throttled
 }

-function sidebarPaddingR() {
-  let innerWidth = window.innerWidth
-  let clientWidth = document.body.clientWidth
-  let paddingRight = innerWidth - clientWidth
+function sidebarPaddingR () {
+  var innerWidth = window.innerWidth
+  var clientWidth = document.body.clientWidth
+  var paddingRight = innerWidth - clientWidth
  if (innerWidth !== clientWidth) {
    $('body').css('padding-right', paddingRight)
  }