🏷️ 更新至3.0.0-RC-1 close #189, close #192, close #223, close #224, close #229, close 232, close #240

2026-04-10 21:17:07 +08:00 · 2020-06-16 18:37:22 +08:00
parent 0ad2c01fc9
commit aa8c509b96
93 changed files with 2109 additions and 1648 deletions
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # hexo-theme-butterfly
-<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.3.5-blue"/></a>
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-3.0.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>
@@ -14,20 +14,20 @@ Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) t
 Stable branch [recommend]:
 ```
-git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 ```
 Dev branch:
 ```
-git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 ```
 ## Configuration
 Set theme in the hexo work folder's root config file `_config.yml`: 
-> theme: Butterfly
+> theme: butterfly
 If you don't have pug & stylus renderer, try this: 
@@ -35,13 +35,13 @@ git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Bu
 ## Documentation
-Find in [hexo-theme-butterfly docs](https://docs.jerryc.me) and [JerryC](https://jerryc.me/posts/21cfbf15). it supports `zh-TW` and `zh-CN`
+Find in [Butterfly Docs](https://demo.jerryc.me/posts/21cfbf15/). it supports `zh-TW` and `zh-CN`
 You can also join the Chat Group.
-[  💬 Join QQ Group [recommend]](https://jq.qq.com/?_wv=1027&k=5KI3Jqb)
+[💬 Join QQ Group [recommend]](https://jq.qq.com/?_wv=1027&k=5KI3Jqb)
-[  💬 Join Telegram Group](https://t.me/hexo_butterfly)
+[💬 Join Telegram Group](https://t.me/hexo_butterfly)
--- a/README_CN.md
+++ b/README_CN.md
@@ -1,6 +1,6 @@
 # hexo-theme-butterfly
-<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.3.5-blue"/></a>
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-3.0.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>
@@ -14,33 +14,33 @@ Demo:  👍 [Butterfly](https://demo.jerryc.me/)  ||   🤞 [JerryC](https://jer
 在你的博客根目錄裡安裝穩定版【推薦】
 ```
-git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 ```
 如果想要安裝比較新的dev分支，可以
 ```
-git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 ```
 ## 應用主題
 修改hexo配置文件`_config.yml`，把主題改為`Butterfly`
 ```
-theme: Butterfly
+theme: butterfly
 ```
 >如果你沒有pug以及stylus的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus
 ## 文檔
-可查看[hexo-theme-butterfly docs](https://docs.jerryc.me) 和 [JerryC](https://jerryc.me/posts/21cfbf15)
+可查看[Butterfly Docs](https://demo.jerryc.me/posts/21cfbf15/)
 你也可以加入群組
 [ 💬 QQ群 [推薦]](https://jq.qq.com/?_wv=1027&k=5KI3Jqb)
-[  💬Telegram群](https://t.me/hexo_butterfly)
+[ 💬 Telegram群](https://t.me/hexo_butterfly)
 ## 截圖
--- a/_config.yml
+++ b/_config.yml
@@ -1,60 +1,48 @@
-# Main menu navigation
+# Main menu navigation (導航目錄)
-# ---------------
+# --------------------------------------
-# format: xxx: 連結 || icon
+
 # format: name: link || icon
 # sub-menu
-# xxx || icon:
+# name || icon:
-#   xxx || 連結 || icon
+#   name || link || icon
 menu:
-  Home: / || fa fa-home
+  Home: / || fas fa-home
-  Archives: /archives/ || fa fa-archive
+  Archives: /archives/ || fas fa-archive
-  Tags: /tags/ || fa fa-tags
+  Tags: /tags/ || fas fa-tags
-  Categories: /categories/ || fa fa-folder-open
+  Categories: /categories/ || fas fa-folder-open
-  Link: /link/ || fa fa-link
+  List||fas fa-list:
-  About: /about/ || fa fa-heart
+    - Music || /music/ || fas fa-music
-  List||fa fa-list:
+    - Movie || /movies/ || fas fa-video
-    - Music || /music/ || fa fa-music
+  Link: /link/ || fas fa-link
-    - Movie || /movies/ || fa fa-film
+  About: /about/ || fas fa-heart
-# PWA
+# Code Blocks (代碼相關)
-# See https://github.com/JLHwung/hexo-offline
+# --------------------------------------
 # ---------------
 # pwa:
 #   enable: true
 #   manifest: /img/pwa/manifest.json
 #   theme_color: "#fff"
 #   apple_touch_icon: /img/pwa/apple-touch-icon.png
 #   favicon_32_32: /img/pwa/32.png
 #   favicon_16_16: /img/pwa/16.png
 #   mask_icon: /img/pwa/safari-pinned-tab.svg
 # Highlight theme
 # ---------------
 highlight_theme: light # default / darker / pale night / light / ocean
 highlight_copy: true #代碼複製按鈕
 highlight_lang: true #代碼語言顯示
 highlight_shrink: false # true 全部代碼框不展開，需點擊 '>' 打開 / false 代碼框展開，有'>'點擊按鈕 | none 代碼框展開，不顯示 '>' 按鈕
 highlight_theme: light # default / darker / pale night / light / ocean / mac / false
 highlight_copy: true # copy button
 highlight_lang: true # show the code language
 highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
 code_word_wrap: false
-# copy setting
+# copy settings
-# 是否禁止複製（如果禁止，highlight_copy的功能將無效)
+# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
 # copyright 複製的內容後面加上版權信息
 copy:
-  enable: true # true 開啟 / false 禁止
+  enable: true
  copyright: false
-# social settings
+# social settings (社交圖標設置)
 # formal:
 #   icon: link || the description
 # ---------------
 social:
-  fa fa-github: https://github.com/jerryc127 || Github
+  fab fa-github: https://github.com/xxxxx || Github
-  fa fa-envelope: mailto:xxxxxxx@gmail.com || Email
+  fas fa-envelope: mailto:xxxxxx@gmail.com || Email
-  fa fa-rss: /atom.xml || RSS
+
 # search (搜索)
 # --------------------------------------
 ####    search    ####
 # Algolia search
 # ---------------
 algolia_search:
  enable: false
  hits:
@@ -66,51 +54,42 @@ algolia_search:
    hits_stats: '${hits} results found in ${time} ms'
 # Local search
 # Please see doc for more details: https://docs.jerryc.me/config.html#本地搜索
 # ---------------
 local_search:
  enable: false
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
 # Math (數學)
 # --------------------------------------
 # About the per_page
 # if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js)
 # if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter)
 # (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true)
 # MathJax
 # Please see doc for more details: https://docs.jerryc.me/config.html#mathjax
 # ---------------
 mathjax:
  enable: false
  # true 表示每一頁都加載mathjax.js
  # false 需要時加載，須在使用的Markdown Front-matter 加上 mathjax: true
  per_page: false
 # KaTeX
 # ---------------
 katex:
  enable: false
  # true 表示每一頁都加載katex.js
  # false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true
-# mermaid
+# Image (圖片設置)
-# see https://github.com/knsv/mermaid
+# --------------------------------------
 # -------------------------------
 mermaid:
  enable: false
  # built-in themes: default/forest/dark/neutral
  theme: default
-# Favicon
+# Favicon（網站圖標）
 # ---------------
 favicon: /img/favicon.png
-# Post info settings
+# Avatar (頭像)
 # ---------------
 avatar:
  img: /img/avatar.png
-  effect: false # 頭像會一直轉圈
+  effect: false
-# the banner image of index
+# the banner image of home page
 index_img:
 # if the banner of page not setting,it will show the top_img
@@ -127,7 +106,7 @@ tag_img:
 # category page, look like https://xxxxxxxxx.com/categories/butterfly
 category_img:
-# 如果你有使用hexo-douban，可配置這個
+# If you are using hexo-douban, you can configure it (如果你有使用 hexo-douban,可配置這個)
 # douban:
 #   meta: false
 #   movies_img:
@@ -135,31 +114,30 @@ category_img:
 #   games_img:
 cover:
-  # 是否顯示文章封面
+  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
-  # 封面顯示的位置
+  # the position of cover in home page (封面顯示的位置)
-  # 三個值可配置 left , right , both
+  # left/right/both
  position: both
-  # 當沒有設置cover時，默認的封面顯示
+  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover: 
    - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
-# if the photo link cannot connect,it will show that
+# Replace Broken Images (替換無法顯示的圖片)
-lodding_bg:
+error_img:
-  flink: /img/friend_404.gif #404後圖片
+  flink: /img/friend_404.gif
-  post_page: /img/404.jpg #404後圖片
+  post_page: /img/404.jpg
 #  post: /img/loading.gif ##加載動畫
 # A simple 404 page
 error_404:
  enable: false
  subtitle: 'Page Not Found'
-  background:
+  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
 post_meta:
-  page:
+  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    categories: true # true or false 主頁是否顯示分類
    tags: false # true or false 主頁是否顯示標籤
@@ -168,20 +146,29 @@ post_meta:
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
-# Please see doc for more details: https://docs.jerryc.me/config.html#字數統計
+# wordcount (字數統計)
 wordcount:
  enable: false
  post_wordcount: true
  min2read: true
  total_wordcount: true
 # Display the article introduction on homepage
 # 1: description
 # 2: both (if the description exists, it will show description. or show the auto_excerpt)
 # 3: auto_excerpt (default)
 index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config
 # Post
 # --------------------------------------
 # toc (目錄)
 toc:
  enable: true
  number: true
-
+  auto_open: true # auto open the sidebar
 # auto open the sidebar in 'post'
 auto_open_sidebar:
  enable: true
 post_copyright:
  enable: true
@@ -189,21 +176,46 @@ post_copyright:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
-# 自動節選
+# Sponsor/reward
-auto_excerpt:
+reward:
-  enable: true
+  enable: false
-  length: 150
+  QR_code:
    - img: /img/wechat.jpg
      link:
      text: wechat
    - img: /img/alipay.jpg
      link:
      text: alipay
-####    Share System    ####
+# Related Articles
-# -----------------------------------------
+related_post:
  enable: true
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示創建日或者更新日
 # figcaption (圖片描述文字)
 photofigcaption: false
 # anchor
 # when you scroll in post, the URL will update according to header id.
 anchor: false
 # Share System (分享功能)
 # --------------------------------------
 # AddThis
 # https://www.addthis.com/
 addThis:
  enable: false
  pubid:
 # Share.js
 # https://github.com/overtrue/share.js
 sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq
 # AddToAny
 # https://www.addtoany.com/
 addtoany:
  enable: false
@@ -216,30 +228,38 @@ addtoany:
    - email
    - copy_link
-####   Comments System    ####
+# Comments System
-# ------------------------------------
+# --------------------------------------
 # disqus
 # https://disqus.com/
 disqus:
  enable: false
  shortname:
  count: false # dispaly comment count in top_img
-# Disqus.js版評論系統，應對大陸長城的折中方案，兼容原版：https://github.com/SukkaW/DisqusJS
+# Alternative Disqus - Render comments with Disqus API
-# API 申請地址：https://disqus.com/api/applications/
+# DisqusJS評論系統，可以實現在網路審查地區載入 Disqus 評論列表，兼容原版
-# 與 disqus 共用樣式
+# https://github.com/SukkaW/DisqusJS
 disqusjs:
  enable: false
  shortname:
  siteName:
  apikey:
-  api: https://disqus.skk.moe/disqus/ #一般情況下無需修改 API 地址
+  api:
  nocomment: # display when a blog post or an article has no comment attached
  admin:
  adminLabel:
  count: false # dispaly comment count in top_img
-laibili:
+# livere(來必力)
 # https://www.livere.com/
 livere:
  enable: false
  uid:
 # gitalk
 # https://github.com/gitalk/gitalk
 gitalk:
  enable: false
  client_id:
@@ -247,31 +267,30 @@ gitalk:
  repo:
  owner:
  admin:
-  language: zh-CN # en , zh-CN , zh-TW
+  language: en # en, zh-CN, zh-TW, es-ES, fr, ru
  perPage: 10 # Pagination size, with maximum 100.
  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: false # dispaly comment count in top_img
-# valine comment system. https://valine.js.org
+# valine
 # 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) 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/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
+  guest_info: nick,mail,link #valine comment header info (nick/mail/link)
  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)
  bg: # valine background
  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
+  requiredFields: nick,mail # required fields (nick/mail)
  bg: # valine background
  count: false # dispaly comment count in top_img
 # utterances
@@ -279,9 +298,9 @@ valine:
 utterances:
  enable: false
  repo:
-  # 可選 pathname/url/title/og:title
+  # Issue Mapping: pathname/url/title/og:title
  issue_term: pathname
-  # 可選 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
+  # Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
  light_theme: github-light
  dark_theme: photon-dark
@@ -296,14 +315,48 @@ facebook_comments:
  lang: en_US # Language en_US/zh_CN/zh_TW and so on
  count: false
-#####     Footer Settings    ####
+# Chat Services
-# ------------------------------------
+# --------------------------------------
 # Chat Button [recommend]
 # It will create a button in the bottom right corner of website, and hide the origin button
 chat_btn: false
 # The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
 chat_hide_show: false
 # chatra
 # https://chatra.io/
 chatra:
  enable: false
  id:
 # tidio
 # https://www.tidio.com/
 tidio:
  enable: false
  public_key:
 # daovoice
 # http://daovoice.io/
 daovoice:
  enable: false
  app_id:
 # gitter
 # https://gitter.im/
 gitter:
  enable: false
  room:
 # Footer Settings
 # --------------------------------------
 since: 2020
 footer_custom_text:
-footer_copyright:
+footer_copyright: true
  enable: true
 ICP:
  enable: false
@@ -311,33 +364,37 @@ ICP:
  text:
  icon: /img/icp.png
-####   Analysis    ####
+# Analysis
-# ---------------
+# --------------------------------------
 # Baidu Analytics
 baidu_analytics:
 # Google Analytics
 google_analytics:
-# Tencent_analytics ID
+# Tencent Analytics ID
 tencent_analytics:
-# Ads
+# Advertisement
-# ---------------
+# --------------------------------------
-# Google Adsense
+
 # Google Adsense (谷歌廣告)
 google_adsense:
  enable: false
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client:
  enable_page_level_ads: true
-# 廣告插入位置
+# Insert ads manually (手動插入廣告)
 # 適用於開啓手動廣告的配置
 # ad:
 #   index:
 #   aside:
 #   post:
-####    站長驗證    ####
+# Verification (站長驗證)
 # --------------------------------------
 # Google Webmaster tools verification setting
 # See: https://www.google.com/webmasters/
 google_site_verification:
@@ -354,37 +411,12 @@ baidu_site_verification:
 # see http://zhanzhang.so.com/
 qihu_site_verification:
-# 打賞按鈕
+# Beautify/Effect (美化/效果)
-reward:
+# --------------------------------------
  enable: true
  QR_code:
    - itemlist:
        img: /img/wechat.jpg
        text: 微信
    - itemlist:
        img: /img/alipay.jpg
        text: 支付寶
 # 推薦文章
 related_post:
  enable: true
  limit: 6 # 顯示推薦文章數目
  date_type: created # or created or updated 文章日期顯示創建日或者更新日
 # figcaption
 # 圖片描述文字
 photofigcaption: false
 # anchor
 # when you scroll in post, the url will update according to header id.
 anchor: false
 ####    美化/效果    ####
 #--------------------------------
 # Theme color for customize
 # Notice: color value must in double quotes like "#000" or may cause error!
-# ---------------
+
 # theme_color:
 #   enable: true
 #   main: "#49B1F5"
@@ -400,31 +432,36 @@ anchor: false
 #   blockquote_padding_color: "#49b1f5"
 #   blockquote_background_color: "#49b1f5"
-# 主頁設置
+# The top_img settings of home page
-# 默認top_img全屏，site_info在中間
+# default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間)
-# 使用默認, 都無需填寫（建議默認）
+# The positon of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離)
-index_site_info_top: # 主頁標題距離頂部距離  例如 300px/300em/300rem/10%
+index_site_info_top:
-index_top_img_height: # 主頁top_img高度 例如 300px/300em/300rem  不能使用百分比
+# The height of top_img, eg: 300px/300em/300rem (主頁top_img高度)
 index_top_img_height:
-# category和tag頁的UI設置
+# The user interface setting of category and tag page (category和tag頁的UI設置)
-# index 值代表 UI將與首頁的UI一樣
+# index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣)
-# 默認跟archives頁面UI一樣
+# default - same as archives UI 默認跟archives頁面UI一樣
-category_ui: # 留空或index
+category_ui: # 留空或 index
-tag_ui: # 留空或index
+tag_ui: # 留空或 index
-# 設置網站背景
+# Website Background (設置網站背景)
-# 可設置圖片 或者 顔色
+# can set it to color or image (可設置圖片 或者 顔色)
-# 圖片格式 background: url(http://xxxxxx.com/xxx.jpg)
+# The formal of color: '#49B202'
-# 顔色 background: '#49B202'
+# The formal of image: url(http://xxxxxx.com/xxx.jpg)
-# 留空 顯示白色
+# White color will be shown as default
 background:
-# footer是否顯示圖片背景(與top_img一致)
+# Show the footer background image (same as top_img)
 footer_bg: false
-# 背景特效
+# the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)
-# 避免卡頓，建議只開啟一個
+rightside-bottom:
-# canvas_ribbon 禁止彩帶背景
+
 # Background effects (背景特效)
 # --------------------------------------
 # canvas_ribbon (靜止彩帶背景)
 # See: https://github.com/hustcc/ribbon.js
 canvas_ribbon:
  enable: false
@@ -432,12 +469,12 @@ canvas_ribbon:
  alpha: 0.6
  zIndex: -1
  click_to_change: false
-  mobile: false # false 手機端不顯示 true 手機端顯示
+  mobile: false
-# 動態彩帶
+# Dynamic ribbon (動態彩帶)
 canvas_ribbon_piao:
  enable: false
-  mobile: false # false 手機端不顯示 true 手機端顯示
+  mobile: false
 # canvas_nest
 # https://github.com/hustcc/canvas-nest.js
@@ -447,25 +484,24 @@ canvas_nest:
  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.
-  mobile: false # false 手機端不顯示 true 手機端顯示
+  mobile: false
-# 打字效果
+# Typewriter Effect (打字效果)
 # https://github.com/disjukr/activate-power-mode
 activate_power_mode:
  enable: false
-  colorful: true # 冒光特效
+  colorful: true # open particle animation (冒光特效)
-  shake: true # 抖動特效
+  shake: true #  open shake (抖動特效)
-# 鼠標點擊效果
+# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
 # 避免卡頓，建議只開啟一個
 # 點擊煙火特效
 fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999
-# 點擊出現愛心
+# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
-click_heart:
+click_heart: false
  enable: false
-# 點擊出現文字，文字可自行修改
+# Mouse click effects: words (鼠標點擊效果: 文字)
 ClickShowText:
  enable: false
  text:
@@ -474,43 +510,42 @@ ClickShowText:
    - YOU
  fontSize: 15px
-# 網站顯示模式
+# Default display mode (網站默認的顯示模式)
-# light 默認模式
+# light (default) / dark
 # dark 黑暗模式（不建議）
 display_mode: light
-# 美化頁面顯示
+# Beautify (美化頁面顯示)
 beautify:
  enable: false
  field: post # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: '#F47466'
-# 全局字體
+# Global font settings
 # Don't modify the following settings unless you know how they work (非必要不要修改)
 font:
-  enable: false
+  font-family:
-  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+  code-font:
  code-font: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
-# 網站名字字體
+# Font settings for the site title and site subtitle
 # 左上角網站名字 主頁居中網站名字
 blog_title_font:
-  font_link: https://fonts.googleapis.com/css?family=Titillium+Web #字體鏈接
+  font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
-  font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', Microsoft YaHei', sans-serif
-# 水平分隔綫
+# The setting of divider icon (水平分隔線圖標設置)
-hr:
+hr_icon:
-  enable: false
+  enable: true
-  icon: '\f21c' #fontawesome上圖標的Unicode
+  icon: # the unicode value of Font Awesome icon
-  icon-top: -20px
+  icon-top:
-# 主頁subtitle
+# the subtitle on homepage (主頁subtitle)
 subtitle:
  enable: true
-  # 打字效果
+  # Typewriter Effect (打字效果)
  effect: true
-  # 循環或者只打字一次
+  # loop (循環打字)
-  loop: false
+  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
@@ -519,26 +554,23 @@ subtitle:
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
-  # (如果有英文逗號' , '，請使用轉義字符 &#44;)
+  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 今日事&#44;今日畢
    - Never put off till tomorrow what you can do today
-# fontawesome圖標
+# Loading Animation (加載動畫)
 # 默認使用的是 fontawesome v4版本的圖標
 fontawesome_v5:
  enable: false
 # 加載動畫 Loading Animation
 preloader: false
-####    側邊欄    ####
+# aside (側邊欄)
-#-------------------------------------
+# --------------------------------------
-# 側邊欄顯示設置
+
 aside:
  enable: true
-  mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
+  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
@@ -552,6 +584,7 @@ aside:
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
@@ -571,88 +604,66 @@ busuanzi:
  site_pv: true
  page_pv: true
-# 網頁開通時間
+# Time difference between publish date and now (網頁運行時間)
-# 格式: 月/日/年 時間
+# Formal: Month/Day/Year Time or Year/Month/Day Time
 # 也可以寫成 年/月/日 時間
 runtimeshow:
-  enable: true
+  enable: false
-  start_date: 6/7/2018 00:00:00
+  publish_date:
-####   右下角按鈕  ####
+# Bottom right button (右下角按鈕)
-#----------------------------------------------
+# --------------------------------------
-# 簡繁轉換
+
 # Conversion between Traditional and Simplified Chinese (簡繁轉換)
 translate:
  enable: true
-  # 默認按鈕顯示文字
+  # The text of a button
  default: 繁
-  #網站默認語言，1: 繁體中文, 2: 簡體中文
+  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
  defaultEncoding: 2
-  #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
+  # Time delay
  translateDelay: 0
-  #博客網址
+  # The text of the button when the language is Simplified Chinese
  cookieDomain: 'https://xxx/'
  #當文字是簡體時，按鈕顯示的文字
  msgToTraditionalChinese: '繁'
-  #當文字是繁體時，按鈕顯示的文字
+  # The text of the button when the language is Traditional Chinese
  msgToSimplifiedChinese: '簡'
-#閲讀模式
+# Read Mode (閲讀模式)
-readmode:
+readmode: true
  enable: true
 # dark mode
 darkmode:
  enable: true
-  # dark mode和 light mode切換按鈕
+  # Toggle Button to switch dark/light mode
  button: true
-  # 自動切換 dark mode和 light mode
+  # Switch dark/light mode automatically (自動切換 dark mode和 light mode)
-  # autoChangeMode: 1  跟隨系統而變化，不支持的瀏覽器/系統將按照時間晚上6點到早上6點之間切換為 dark mode
+  # autoChangeMode: 1  Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
-  # autoChangeMode: 2  只按照時間晚上6點到早上6點之間切換為 dark mode
+  # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
-  # autoChangeMode: false 取消自動切換
+  # autoChangeMode: false
-  autoChangeMode: 1
+  autoChangeMode: false
-####    other     ####
+# Lightbox (圖片大圖查看模式)
-#------------------------------------------------
+# --------------------------------------
 # You can only choose one, or neither (只能選擇一個 或者 兩個都不選)
-# 圖片大圖查看模式
+# medium-zoom
-# 可選 medium_zoom 或者 fancybox
+# https://github.com/francoischalifour/medium-zoom
-# 只選一個 或者 兩個都不選
+medium_zoom: false
-#--------------------------------------------
+
-# medium_zoom https://github.com/francoischalifour/medium-zoom
+# fancybox
-medium_zoom:
+# http://fancyapps.com/fancybox/3/
 fancybox: true
 # Tag Plugins settings (標籤外掛)
 # --------------------------------------
 # mermaid
 # see https://github.com/knsv/mermaid
 mermaid:
  enable: false
-
+  # built-in themes: default/forest/dark/neutral
-# fancybox http://fancyapps.com/fancybox/3/
+  theme: default
 fancybox:
  enable: true
 # Snackbar 彈窗
 # https://github.com/polonel/SnackBar
 # position 彈窗位置
 # 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
 snackbar:
  enable: false
  position: bottom-left
  bg_light: '#49b1f5' #light mode時彈窗背景
  bg_dark: '#2d3035' #dark mode時彈窗背景
 #百度推送
 baidu_push:
  enable: false
 # https://instant.page/
 # prefetch預加載
 instantpage:
  enable: true
 # https://github.com/vinta/pangu.js
 # 中英文之間添加空格
 pangu:
  enable: false
  field: page # page/post
 # Note (Bootstrap Callout)
 # https://muse.theme-next.org/docs/tag-plugins/note
 note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
@@ -666,37 +677,72 @@ note:
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0
-# 圖片懶加載
+# other
-# https://github.com/ApoorvSaxena/lozad.js
+# --------------------------------------
 lazyload: false
-# 避免重複網址分散seo
+# Snackbar (Toast Notification 彈窗)
-canonical: true
+# https://github.com/polonel/SnackBar
 # position 彈窗位置
 # 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
 snackbar:
  enable: false
  position: bottom-left
  bg_light: '#49b1f5' # The background color of Toast Notification in light mode
  bg_dark: '#121212' # The background color of Toast Notification in dark mode
-# 禁止百度轉碼
+# Baidu Push (百度推送)
 baidu_push: false
 # https://instant.page/
 # prefetch (預加載)
 instantpage: true
 # https://github.com/vinta/pangu.js
 # Insert a space between Chinese character and English character (中英文之間添加空格)
 pangu:
  enable: false
  field: site # site/post
 # Lazyload (圖片懶加載)
 # https://github.com/verlok/lazyload
 lazyload:
  enable: true
  post: /img/loading.gif
 # PWA
 # See https://github.com/JLHwung/hexo-offline
 # ---------------
 # pwa:
 #   enable: false
 #   manifest: /image/pwa/manifest.json
 #   theme_color: "#fff"
 #   apple_touch_icon: /image/pwa/apple-touch-icon.png
 #   favicon_32_32: /image/pwa/32.png
 #   favicon_16_16: /image/pwa/16.png
 #   mask_icon: /image/pwa/safari-pinned-tab.svg
 # Disable Baidu transformation on mobile devices (禁止百度轉碼)
 disable_baidu_transformation: true
-# twitter分享自動帶上樣式
+# Open graph meta tags
-# https://i.loli.net/2019/09/08/qm3RfvUCKbct1Wz.png
+# https://developers.facebook.com/docs/sharing/webmasters/
 twitter_meta: true
 # facebook QQ 等 分享自動帶上樣式
 # https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png
 Open_Graph_meta: true
-# 開啟hexo自帶的緩存，加快生成速度
+# Caches the contents in a fragment, speed up the generation (開啟hexo自帶的緩存,加快生成速度)
 fragment_cache: true
-# inject
+# Inject
-# 插入代码到头部</head>之前 和 尾部</body>之前
+# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
 # 插入代码到头部 </head> 之前 和 底部 </body> 之前
 inject:
  head:
-  # - <link rel="stylesheet" href="xxxxx">
+    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>
 # CDN
-# 非必要不要修改
+# Don't modify the following settings unless you know how they work
 # 非必要請不要修改
 CDN:
  # main
  main_css: /css/index.css
@@ -709,8 +755,8 @@ CDN:
  gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
  gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
  valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
-  disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqus.js
+  disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
-  disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqusjs.css
+  disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
  utterances: https://utteranc.es/client.js
  # share
@@ -739,10 +785,9 @@ CDN:
  canvas_ribbon_piao: /js/third-party/piao.js
  canvas_nest: /js/third-party/canvas-nest.js
-  lazyload: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+  lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js
-  instantpage: https://cdn.jsdelivr.net/npm/instant.page@3/instantpage.min.js
+  instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js
  typed: https://cdn.jsdelivr.net/npm/typed.js
  js_cookies: https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js
  pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js
  # photo
@@ -754,7 +799,7 @@ CDN:
  snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css
  snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js
-  # 鼠標點擊特效
+  # effect
  anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js
  activate_power_mode: /js/third-party/activate-power-mode.js
  fireworks: /js/third-party/fireworks.js
@@ -762,8 +807,16 @@ CDN:
  ClickShowText: /js/third-party/ClickShowText.js
  # fontawesome
-  fontawesome_v4: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
+  fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
  fontawesome_v5: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
-  # 簡繁轉換
+  # Conversion between Traditional and Simplified Chinese
  translate: /js/tw_cn.js
  # justifiedGallery
  justifiedGallery_js: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js
  justifiedGallery_css: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css
  # aplayer
  aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
  aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
  meting_js: https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -24,7 +24,7 @@ post:
  created: Created
  updated: Updated
  wordcount: Word count
-  min2read: "Reading time: %s min"
+  min2read: 'Reading time: %s min'
  page_pv: Post View
  comments: Comments
  copyright:
@@ -32,13 +32,13 @@ post:
    link: Link
    copyright_notice: Copyright Notice
    copyright_content: 'All articles in this blog are licensed under <a href="%s">%s</a> unless stating additionally.'
-  recommend: Recommend
+  recommend: Related Articles
 search: Search
 algolia_search:
  input_placeholder: Search for Posts
  hits_empty: "We didn't find any results for the search: ${query}."
-  hits_stats: "${hits} results found in ${time} ms"
+  hits_stats: '${hits} results found in ${time} ms'
 local_search:
  label: Local search
@@ -78,13 +78,13 @@ bookmark:
 rightside:
  readmode_title: Read Mode
-  font_plus_title: Increase font size
+  font_plus_title: Increase Font Size
-  font_minus_title: Decrease font size
+  font_minus_title: Decrease Font Size
-  translate_title: Traditional Chinese and Simplified Chinese Conversion
+  translate_title: Switch Between Traditional Chinese And Simplified Chinese
-  night_mode_title: Dark Mode
+  night_mode_title: Switch Between Light And Dark Mode
-  back_to_top: Back to top
+  back_to_top: Back To Top
-  toc: Table of Contents
+  toc: Table Of Contents
-  scroll_to_comment: Scroll to comment
+  scroll_to_comment: Scroll To Comments
  setting: Setting
 runtime_unit: days
@@ -104,5 +104,8 @@ Snackbar:
  day_to_night: Dark Mode Activated Manually
  night_to_day: Light Mode Activated Manually
 error_title: Page not found
 loading: Loading...
 error404:
  error_title: Page not found
  back_button: Go back home
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -24,7 +24,7 @@ post:
  created: Created
  updated: Updated
  wordcount: Word count
-  min2read: "Reading time: %s min"
+  min2read: 'Reading time: %s min'
  page_pv: Post View
  comments: Comments
  copyright:
@@ -32,13 +32,13 @@ post:
    link: Link
    copyright_notice: Copyright Notice
    copyright_content: 'All articles in this blog are licensed under <a href="%s">%s</a> unless stating additionally.'
-  recommend: Recommend
+  recommend: Related Articles
 search: Search
 algolia_search:
  input_placeholder: Search for Posts
  hits_empty: "We didn't find any results for the search: ${query}."
-  hits_stats: "${hits} results found in ${time} ms"
+  hits_stats: '${hits} results found in ${time} ms'
 local_search:
  label: Local search
@@ -78,13 +78,13 @@ bookmark:
 rightside:
  readmode_title: Read Mode
-  font_plus_title: Increase font size
+  font_plus_title: Increase Font Size
-  font_minus_title: Decrease font size
+  font_minus_title: Decrease Font Size
-  translate_title: Traditional Chinese and Simplified Chinese Conversion
+  translate_title: Switch Between Traditional Chinese And Simplified Chinese
-  night_mode_title: Dark Mode
+  night_mode_title: Switch Between Light And Dark Mode
-  back_to_top: Back to top
+  back_to_top: Back To Top
-  toc: Table of Contents
+  toc: Table Of Contents
-  scroll_to_comment: Scroll to comment
+  scroll_to_comment: Scroll To Comments
  setting: Setting
 runtime_unit: days
@@ -104,5 +104,8 @@ Snackbar:
  day_to_night: Dark Mode Activated Manually
  night_to_day: Light Mode Activated Manually
 error_title: Page not found
 loading: Loading...
 error404:
  error_title: Page not found
  back_button: Go back home
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -24,7 +24,7 @@ post:
  created: 发表于
  updated: 更新于
  wordcount: 字数总计
-  min2read: "阅读时长: %s 分钟"
+  min2read: '阅读时长: %s 分钟'
  page_pv: 阅读量
  comments: 评论数
  copyright:
@@ -38,14 +38,14 @@ post:
 search: 搜索
 algolia_search:
  input_placeholder: 搜索文章
-  hits_empty: "找不到您查询的内容:${query}"
+  hits_empty: '找不到您查询的内容:${query}'
-  hits_stats: "找到 ${hits} 条结果，用时 ${time} 毫秒"
+  hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'
 local_search:
  label: 本地搜索
  input_placeholder: 搜索文章
-  hits_empty: "找不到您查询的内容:${query}"
+  hits_empty: '找不到您查询的内容:${query}'
-  powered: "提供支持"
+  powered: '提供支持'
  by: 由
 pagination:
@@ -83,7 +83,7 @@ rightside:
  font_plus_title: 放大字体
  font_minus_title: 缩小字体
  translate_title: 简繁转换
-  night_mode_title: 夜间模式
+  night_mode_title: 浅色和深色模式转换
  back_to_top: 回到顶部
  toc: 目录
  scroll_to_comment: 直达评论
@@ -108,3 +108,7 @@ Snackbar:
 error_title: 页面没有找到
 loading: 加载中...
 error404:
  error_title: 页面没有找到
  back_button: 回到主页
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -24,7 +24,7 @@ post:
  created: 發表於
  updated: 更新於
  wordcount: 字數總計
-  min2read: "閱讀時長: %s 分鐘"
+  min2read: '閱讀時長: %s 分鐘'
  page_pv: 閱讀量
  comments: 評論數
  copyright:
@@ -38,14 +38,14 @@ post:
 search: 搜尋
 algolia_search:
  input_placeholder: 搜尋文章
-  hits_empty: "找不到您查詢的內容:${query}"
+  hits_empty: '找不到您查詢的內容:${query}'
-  hits_stats: "找到 ${hits} 條結果，用時 ${time} 毫秒"
+  hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒'
 local_search:
  label: 本地搜尋
  input_placeholder: 搜尋文章
-  hits_empty: "找不到您查詢的內容:${query}"
+  hits_empty: '找不到您查詢的內容:${query}'
-  powered: "提供支援"
+  powered: '提供支援'
  by: 由
 pagination:
@@ -83,7 +83,7 @@ rightside:
  font_plus_title: 放大字型
  font_minus_title: 縮小字型
  translate_title: 簡繁轉換
-  night_mode_title: 夜間模式
+  night_mode_title: 淺色和深色模式轉換
  back_to_top: 回到頂部
  toc: 目錄
  scroll_to_comment: 直達評論
@@ -106,6 +106,8 @@ Snackbar:
  day_to_night: 你已切換為深色模式
  night_to_day: 你已切換為淺色模式
 error_title: 頁面沒有找到
 loading: 載入中...
 error404:
  error_title: 頁面沒有找到
  back_button: 回到主頁
--- a/layout/404.pug
+++ b/layout/404.pug
@@ -12,13 +12,19 @@ html(lang=config.language data-theme=theme.display_mode)
    if theme.fireworks && theme.fireworks.enable
      canvas.fireworks
-    include includes/mobile-sidebar/index.pug
+    if theme.background
      - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
      #web_bg(data-type=is_photo)
    #error-wrap
      .error-content
        .error-img(style=bg_img)
        .error-info
          h1.error_title= '404'
          .error_subtitle= theme.error_404.subtitle
          a.button--animated(href=url_for(config.root))
            i.fas.fa-rocket
            = _p('error404.back_button')
    nav#nav.error-no-found(style=bg_img)
      include includes/header/header.pug
      #error_info.is-center
        h1#error_title= '404'
        #error_subtitle= theme.error_404.subtitle
    include includes/rightside.pug
    !=partial('includes/search/index', {}, {cache:theme.fragment_cache})
    include includes/additional-js.pug
--- a/layout/flink.pug
+++ b/layout/flink.pug
@@ -2,18 +2,20 @@
  .flink#article-container
    if site.data.link
      each i in site.data.link
-        h2= i.class_name
+        if i.class_name
-        .post-cards
+          h2!= i.class_name
-          .md-links
+        if i.class_desc
          .flink-desc!=i.class_desc
        .flink-list
          each item in i.link_list
-              .md-links-item
+            .flink-list-item
              a(href=url_for(item.link)  title=item.name target="_blank")
-                  if theme.lazyload
+                if theme.lazyload.enable
-                    img(data-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+                  img(data-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                else
-                    img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+                  img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
-                  .md-links-title= item.name 
+                .flink-item-name= item.name 
-                  .md-links-des= item.descr
+                .flink-item-desc= item.descr
    != page.content
  if page.comments !== false
    include includes/comments/index.pug
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -5,10 +5,10 @@ script(src=url_for(theme.CDN.main))
 if theme.translate && theme.translate.enable
  script(src=url_for(theme.CDN.translate))
-if (theme.medium_zoom && theme.medium_zoom.enable)
+if theme.medium_zoom
  script(src=url_for(theme.CDN.medium_zoom))
-if (theme.fancybox && theme.fancybox.enable)
+if theme.fancybox
  script(src=url_for(theme.CDN.fancybox))
 include ./math/index.pug 
@@ -39,14 +39,14 @@ if theme.activate_power_mode.enable
 if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
  script(async src=url_for(theme.CDN.busuanzi))
-if theme.instantpage.enable
+if theme.instantpage
-  script(src=url_for(theme.CDN.instantpage) type="module")
+  script(src=url_for(theme.CDN.instantpage) type="module" defer)
-if theme.lazyload
+if theme.lazyload.enable
-  script(src=url_for(theme.CDN.lazyload))
+  script(src=url_for(theme.CDN.lazyload) async)
 //- 鼠標特效
-if theme.click_heart && theme.click_heart.enable
+if theme.click_heart
  script(src=url_for(theme.CDN.click_heart))
 if theme.ClickShowText && theme.ClickShowText.enable
@@ -72,3 +72,5 @@ if is_home()
 if theme.preloader
  !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})
 !=partial('includes/chat/index', {}, {cache:theme.fragment_cache})
--- a/layout/includes/chat/chatra.pug
+++ b/layout/includes/chat/chatra.pug
@@ -0,0 +1,30 @@
 //- https://chatra.io/help/api/
 script.
  (function(d, w, c) {
      w.ChatraID = '#{theme.chatra.id}';
      var s = d.createElement('script');
      w[c] = w[c] || function() {
          (w[c].q = w[c].q || []).push(arguments);
      };
      s.async = true;
      s.src = 'https://call.chatra.io/chatra.js';
      if (d.head) d.head.appendChild(s);
  })(document, window, 'Chatra');
  if (!{theme.chat_btn}) {
    var chatBtn = document.getElementById("chat_btn")
      chatBtn.addEventListener("click", function(){
        Chatra('openChat')
      });
  } else {
    if (!{theme.chat_hide_show}) {
      function chatBtnHide () {
        Chatra('hide')
      }
      function chatBtnShow () {
        Chatra('show')
      }
    }
  }
--- a/layout/includes/chat/daovoice.pug
+++ b/layout/includes/chat/daovoice.pug
@@ -0,0 +1,37 @@
 //- https://guide.daocloud.io/daovoice/javascript-api-5869833.html
 script.
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice")
 script.
  var isChatBtn = !{theme.chat_btn}
  daovoice('init', {
    app_id: '!{theme.daovoice.app_id}',},{
    launcher: { 
       disableLauncherIcon: isChatBtn // 悬浮 ICON 是否显示
    },
  });
  daovoice('update');
  if (isChatBtn) {
    var chatBtn = document.getElementById("chat_btn")
    chatBtn.addEventListener("click", function(){
      daovoice('show')
    });
  } else {
    if (!{theme.chat_hide_show}) {
      function chatBtnHide () {
        daovoice('update', {},{
          launcher: { 
          disableLauncherIcon: true // 悬浮 ICON 是否显示
          },
        });
      }
      function chatBtnShow () {
        daovoice('update', {},{
          launcher: { 
          disableLauncherIcon: false // 悬浮 ICON 是否显示
          },
        });
      }
    }
  }
--- a/layout/includes/chat/gitter.pug
+++ b/layout/includes/chat/gitter.pug
@@ -0,0 +1,28 @@
 //- https://sidecar.gitter.im/
 script.
  var isChatBtn = !{theme.chat_btn}
  if (isChatBtn) {
    ((window.gitter = {}).chat = {}).options = {
      room: '#{theme.gitter.room}',
      activationElement: '#chat_btn'
    };
  } else {
    ((window.gitter = {}).chat = {}).options = {
      room: '#{theme.gitter.room}',
    };
    if (!{theme.chat_hide_show}) {
      var gitterBtn = document.getElementsByClassName('gitter-open-chat-button')
      function chatBtnHide () {
        gitterBtn[0].style.display= 'none'
      }
      function chatBtnShow () {
        gitterBtn[0].style.display= 'block'
      }
    }
  }
 script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
--- a/layout/includes/chat/index.pug
+++ b/layout/includes/chat/index.pug
@@ -0,0 +1,8 @@
 if theme.chatra && theme.chatra.enable
  include ./chatra.pug
 else if theme.tidio && theme.tidio.enable
  include ./tidio.pug
 else if theme.daovoice && theme.daovoice.enable
  include ./daovoice.pug
 else if theme.gitter && theme.gitter.enable
  include ./gitter.pug
--- a/layout/includes/chat/tidio.pug
+++ b/layout/includes/chat/tidio.pug
@@ -0,0 +1,39 @@
 script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async)
 if theme.chat_btn
  script.
    (function() {
      function onTidioChatApiReady() {
        window.tidioChatApi.hide();
        window.tidioChatApi.on("close", function() {
          window.tidioChatApi.hide();
        });
      }
      if (window.tidioChatApi) {
        window.tidioChatApi.on("ready", onTidioChatApiReady);
      } else {
        document.addEventListener("tidioChat-ready", onTidioChatApiReady);
      }
      document.getElementById("chat_btn").addEventListener("click", function(){
        window.tidioChatApi.show();
        window.tidioChatApi.open();
    });
    })();
 else if theme.chat_hide_show
  script.
    function chatBtnHide () {
      if (window.tidioChatApi) {
        window.tidioChatApi.hide();
        //- document.getElementById('tidio-chat').style.display= 'none'
      }
    }
    function chatBtnShow () {
      if (window.tidioChatApi) {
        window.tidioChatApi.show();
        //- document.getElementById('tidio-chat').style.display= 'block'
      } 
    }
--- a/layout/includes/comments/disqusjs.pug
+++ b/layout/includes/comments/disqusjs.pug
@@ -3,12 +3,13 @@ script(src=url_for(theme.CDN.disqusjs))
 script.
  var dsqjs = new DisqusJS({
    shortname: '!{theme.disqusjs.shortname}',
-    siteName: "!{theme.disqusjs.siteName}",
+    siteName: '!{theme.disqusjs.siteName}',
    identifier: '!{ page.path }',
    url: '!{ page.permalink }',
    title: '!{ page.title }',
    api: '!{theme.disqusjs.api}',
    apikey: '!{theme.disqusjs.apikey}',
    nocomment: '!{theme.disqusjs.nocomment}',
    admin: '!{theme.disqusjs.admin}',
    adminLabel: '!{theme.disqusjs.adminLabel}'
  });
--- a/layout/includes/comments/index.pug
+++ b/layout/includes/comments/index.pug
@@ -1,6 +1,6 @@
 - var d = theme.disqus && theme.disqus.enable
 - var dj = theme.disqusjs && theme.disqusjs.enable
- var l = theme.laibili && theme.laibili.enable
+- var l = theme.livere && theme.livere.enable
 - var gt = theme.gitalk && theme.gitalk.enable
 - var v = theme.valine && theme.valine.enable
 - var u = theme.utterances && theme.utterances.enable
@@ -11,14 +11,14 @@ if isComment
  hr
  #post-comment
    .comment_headling
-      i.fa.fa-comments.fa-fw(aria-hidden="true")
+      i.fas.fa-comments.fa-fw
      span= ' ' + _p('comment')
    if d
      include ./disqus.pug
    else if dj
      include ./disqusjs.pug
    else if l
-      include ./laibili.pug
+      include ./livere.pug
    else if gt
      include ./gitalk.pug
    else if v
--- a/layout/includes/comments/laibili.pug
+++ b/layout/includes/comments/laibili.pug
@@ -1,4 +1,4 @@
-#lv-container(data-id="city" data-uid=theme.laibili.uid)
+#lv-container(data-id="city" data-uid=theme.livere.uid)
  script.
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
--- a/layout/includes/comments/valine.pug
+++ b/layout/includes/comments/valine.pug
@@ -15,14 +15,12 @@ script.
  }
  var guestInfo = requestSetting(['nick','mail','link'],'#{ theme.valine.guest_info }')
-  var requiredFields = requestSetting(['nick','mail','link'],'#{ theme.valine.requiredFields }')
+  var requiredFields = requestSetting(['nick','mail'],'#{ theme.valine.requiredFields }')
  window.valine = new Valine({
    el:'#vcomment',
    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: guestInfo,
--- a/layout/includes/footer.pug
+++ b/layout/includes/footer.pug
@@ -5,7 +5,7 @@
    .copyright!= `&copy;${theme.since} - ${nowYear} By ${config.author}`
  else
    .copyright!= `&copy;${nowYear} By ${config.author}`
-  if theme.footer_copyright.enable
+  if theme.footer_copyright
    .framework-info
      span= _p('footer.driven') + ' '
      a(href='https://hexo.io')
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -4,7 +4,7 @@
 - else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
 - else if (is_month()) pageTitle += ': ' + page.month + '/' + page.year
 - else if (is_year()) pageTitle += ': ' + page.year
- else if (is_current('/404.html', [strict])) pageTitle = _p('error_title')
+- else if (is_current('/404.html', [strict])) pageTitle = _p('error404.error_title')
 - else pageTitle = page.title || config.title || ''
 - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
@@ -29,6 +29,7 @@ meta(name="author" content=pageAuthor)
 meta(name="copyright" content=pageCopyright)
 meta(name ="format-detection" content="telephone=no")
 !=favicon_tag(theme.favicon || config.favicon)
 link(rel="canonical" href=urlNoIndex())
 if theme.disable_baidu_transformation
  meta(http-equiv="Cache-Control" content="no-transform")
@@ -39,7 +40,7 @@ if theme.douban
    meta(name="referrer" content="no-referrer")
 //- 預解析
-!=partial('includes/head/dns_prefetch', {}, {cache:theme.fragment_cache})
+!=partial('includes/head/preconnect', {}, {cache:theme.fragment_cache})
 //- 網站驗證
 !=partial('includes/head/site_verification', {}, {cache:theme.fragment_cache})
@@ -51,28 +52,19 @@ include ./head/Open_Graph.pug
 if (theme.pwa && theme.pwa.enable)
  !=partial('includes/head/pwa', {}, {cache:theme.fragment_cache})
 script(src=url_for(theme.CDN.js_cookies))
 if theme.darkmode.enable
  !=partial('includes/head/darkmode', {}, {cache:theme.fragment_cache})
 //- main css
 link(rel='stylesheet', href=url_for(theme.CDN.main_css))
 link(rel='stylesheet', href=url_for(theme.CDN.fontawesome))
-if theme.fontawesome_v5 && theme.fontawesome_v5.enable
+if theme.fancybox
  link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v5))
 else
  link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v4))
 if (theme.fancybox && theme.fancybox.enable)
  link(rel='stylesheet', href=url_for(theme.CDN.fancybox_css))
 if (theme.snackbar && theme.snackbar.enable)
  link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))
 if theme.canonical
  link(rel="canonical" href=urlNoIndex())
 if is_post()
  if(page.prev)
    link(rel="prev" title=page.prev.title href=url_for(page.prev.permalink) )
@@ -92,8 +84,9 @@ include ./head/comment.pug
 //- analytics
 !=partial('includes/head/analytics', {}, {cache:theme.fragment_cache})
 //- font
 if theme.blog_title_font.font_link
-  link(rel='stylesheet', href=url_for(theme.blog_title_font.font_link))
+  link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link))
 //- global config
 !=partial('includes/head/config', {}, {cache:theme.fragment_cache})
@@ -102,3 +95,6 @@ include ./head/config_site.pug
 include ./head/noscript.pug
 !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
 if page.aplayer
  include ./head/aplayer.pug
--- a/layout/includes/head/Open_Graph.pug
+++ b/layout/includes/head/Open_Graph.pug
@@ -1,13 +1,5 @@
 - var contentType = is_post() ? 'article' : 'website'
 //- twitter meta
 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: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)
@@ -17,3 +9,4 @@ if theme.Open_Graph_meta
  meta(property="og:image" content=full_url_for(page.cover || theme.avatar.img))
  meta(property="article:published_time" content=date_xml(page.date))
  meta(property="article:modified_time" content=date_xml(page.updated))
  meta(name="twitter:card" content="summary")
--- a/layout/includes/head/aplayer.pug
+++ b/layout/includes/head/aplayer.pug
@@ -0,0 +1,3 @@
 link(rel='stylesheet' href=url_for(theme.CDN.aplayer_css))
 script(src=url_for(theme.CDN.aplayer_js))
 script(src=url_for(theme.CDN.meting_js))
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -31,7 +31,6 @@
    translate = JSON.stringify({
      defaultEncoding: theme.translate.defaultEncoding,
      translateDelay: theme.translate.translateDelay,
      cookieDomain: theme.translate.cookieDomain,
      msgToTraditionalChinese: theme.translate.msgToTraditionalChinese,
      msgToSimplifiedChinese: theme.translate.msgToSimplifiedChinese
    })
@@ -94,17 +93,18 @@ script.
    runtime: !{theme.runtimeshow.enable},
    copyright: !{copyright},
    ClickShowText: !{ClickShowText},
-    medium_zoom: !{theme.medium_zoom.enable},
+    medium_zoom: !{theme.medium_zoom},
-    fancybox: !{theme.fancybox.enable},
+    fancybox: !{theme.fancybox},
    Snackbar: !{Snackbar},
-    baiduPush: !{theme.baidu_push && theme.baidu_push.enable},
+    justifiedGallery: {
      js: '!{theme.CDN.justifiedGallery_js}',
      css: '!{theme.CDN.justifiedGallery_css}'
    },
    baiduPush: !{theme.baidu_push},
    highlightCopy: !{theme.highlight_copy},
    highlightLang: !{theme.highlight_lang},
    highlightShrink: '!{theme.highlight_shrink}',
    isFontAwesomeV5: !{theme.fontawesome_v5 && theme.fontawesome_v5.enable},
    isPhotoFigcaption: !{theme.photofigcaption},
-    islazyload: !{theme.lazyload},
+    islazyload: !{theme.lazyload.enable},
    isanchor: !{theme.anchor}    
  }
--- a/layout/includes/head/config_site.pug
+++ b/layout/includes/head/config_site.pug
@@ -1,7 +1,17 @@
 -
  let isHighlightShrink
  if (theme.highlight_shrink == 'none') isHighlightShrink = 'undefined'
  else if (page.highlight_shrink !== undefined) isHighlightShrink = page.highlight_shrink
  else isHighlightShrink = theme.highlight_shrink
  const pageToc = page.toc !== undefined ? page.toc : theme.toc.enable
  const showToc = is_post() && pageToc && (toc(page.content) !== '' || page.encrypt == true )
 -
 script.
  var GLOBAL_CONFIG_SITE = { 
    isPost: !{is_post()},
    isHome: !{is_home()},
-    isSidebar: !{is_post() && page.toc !== false && theme.toc.enable && (toc(page.content) !== '' || page.encrypt == true )}  
+    isHighlightShrink: !{isHighlightShrink},
    isSidebar: !{showToc}
    }
--- a/layout/includes/head/darkmode.pug
+++ b/layout/includes/head/darkmode.pug
@@ -1,47 +1,56 @@
 script.
  var activateDarkMode = function () {
    document.documentElement.setAttribute('data-theme', 'dark')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#000')
    }
  }
  var activateLightMode = function () {
    document.documentElement.setAttribute('data-theme', 'light')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#fff')
    }
  }
  var getCookies = function (name) {
    const value = `; ${document.cookie}`
    const parts = value.split(`; ${name}=`)
    if (parts.length === 2) return parts.pop().split(';').shift()
  }
  var autoChangeMode = '#{theme.darkmode.autoChangeMode}'
-  var t = Cookies.get("theme")
+  var t = getCookies('theme')
-  if (autoChangeMode == '1'){
+  if (autoChangeMode === '1') {
-    var isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+    var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-    var isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
+    var isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
-    var isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches
+    var isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
    var hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
-    if (t === undefined){
+    if (t === undefined) {
      if (isLightMode) activateLightMode()
      else if (isDarkMode) activateDarkMode()
-      else if (isNotSpecified || hasNoSupport){
+      else if (isNotSpecified || hasNoSupport) {
        console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.')
        var now = new Date()
        var hour = now.getHours()
-        var isNight = hour < 6 || hour >= 18
+        var isNight = hour <= 6 || hour >= 18
        isNight ? activateDarkMode() : activateLightMode()
      }
-    } else if (t == 'light') activateLightMode()
+      window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
        if (Cookies.get('theme') === undefined) {
          e.matches ? activateDarkMode() : activateLightMode()
        }
      })
    } else if (t === 'light') activateLightMode()
    else activateDarkMode()
- 
+  } else if (autoChangeMode === '2') {
-  } else if (autoChangeMode == '2'){
+    now = new Date()
-    now = new Date();
+    hour = now.getHours()
-    hour = now.getHours();
+    isNight = hour <= 6 || hour >= 18
-    isNight = hour < 6 || hour >= 18
+    if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
    if(t === undefined) isNight? activateDarkMode() : activateLightMode()
    else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else {
-    if ( t == 'dark' ) activateDarkMode()
+    if (t === 'dark') activateDarkMode()
-    else if ( t == 'light') activateLightMode()
+    else if (t === 'light') activateLightMode()
  }
  function activateDarkMode(){
    document.documentElement.setAttribute('data-theme', 'dark')
    if (document.querySelector('meta[name="theme-color"]') !== null){
      document.querySelector('meta[name="theme-color"]').setAttribute('content','#000')
    }
  }
  function activateLightMode(){
    document.documentElement.setAttribute('data-theme', 'light')
    if (document.querySelector('meta[name="theme-color"]') !== null){
    document.querySelector('meta[name="theme-color"]').setAttribute('content','#fff')
    }
  }
--- a/layout/includes/head/dns_prefetch.pug
+++ b/layout/includes/head/dns_prefetch.pug
@@ -1,22 +0,0 @@
 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/noscript.pug
+++ b/layout/includes/head/noscript.pug
@@ -1,6 +1,6 @@
 noscript. 
  <style>
-  #page-header {
+  #nav {
    opacity: 1
  }
  .justified-gallery img{
--- a/layout/includes/head/preconnect.pug
+++ b/layout/includes/head/preconnect.pug
@@ -0,0 +1,19 @@
 link(rel="preconnect" href="//cdn.jsdelivr.net")
 if theme.google_analytics
  link(rel="preconnect" href="//www.google-analytics.com" crossorigin)
 if theme.baidu_analytics
  link(rel="preconnect" href="//hm.baidu.com")
 if theme.tencent_analytics
  link(rel="preconnect" href="//ta.qq.com")
 if theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1
  link(rel="preconnect" href="//fonts.googleapis.com" crossorigin)
 if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
  link(rel="preconnect" href="//busuanzi.ibruce.info")
 if theme.baidu_push
  link(rel="preconnect" href="//zz.bdstatic.com")
--- a/layout/includes/head/subtitle.pug
+++ b/layout/includes/head/subtitle.pug
@@ -15,7 +15,7 @@ if theme.subtitle.enable
          })
          .then(function (data) {
            if (subtitleEffect) {
-              var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
+              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,
@@ -45,7 +45,7 @@ if theme.subtitle.enable
          .then(function (data) {
            if (subtitleEffect) {
              var from = '出自 ' + data.from
-              var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
+              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,
@@ -72,7 +72,7 @@ if theme.subtitle.enable
          var con = str[0]
          if (subtitleEffect) {
            var from = '出自 ' + str[1]
-            var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
+            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,
@@ -95,7 +95,7 @@ if theme.subtitle.enable
            var subtitleEffect = !{ subtitleEffect }
            jinrishici.load(function (result) {
              if (subtitleEffect) {
-                var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
+                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', {
@@ -119,7 +119,7 @@ if theme.subtitle.enable
      var subtitleEffect = !{subtitleEffect}
      if (subtitleEffect) { 
        var typed = new Typed("#subtitle", {
-          strings: '!{theme.subtitle.sub}'.split(","),
+          strings: "!{theme.subtitle.sub}".split(","),
          startDelay: 300,
          typeSpeed: 150,
          loop: !{theme.subtitle.loop},
--- a/layout/includes/header/index.pug
+++ b/layout/includes/header/index.pug
@@ -24,8 +24,8 @@ if theme.douban
 - var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
 - is_post() ? isHomeClass = 'post-bg' : isHomeClass
-#nav(class=isHomeClass style=bg_img)
+header#page-header(class=isHomeClass style=bg_img)
-  !=partial('includes/header/header', {}, {cache:theme.fragment_cache})
+  !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
  if is_home()
    #site-info
      h1#site_title=site_title
@@ -35,7 +35,7 @@ if theme.douban
        #site_social_icons
          !=fragment_cache('social', function(){return partial('includes/header/social')})
    #scroll_down
-      i.fa.fa-angle-down.scroll-down-effects
+      i.fas.fa-angle-down.scroll-down-effects
  else if is_post()
    include ./post-info.pug 
  else
--- a/layout/includes/header/menu_item.pug
+++ b/layout/includes/header/menu_item.pug
@@ -10,9 +10,9 @@
      .menus_item
        a.site-page
          if label.split('||')[1]
-            i.fa-fw(class=trim(label.split('||')[1]) aria-hidden="true")
+            i.fa-fw(class=trim(label.split('||')[1])  )
          span=' '+ trim(label.split('||')[0])
-          i.fa.fa-chevron-down.menus-expand(aria-hidden="true")
+          i.fas.fa-chevron-down.menus-expand
        ul.menus_item_child
          each i in value
            li
--- a/layout/includes/header/header.pug
+++ b/layout/includes/header/header.pug
@@ -1,17 +1,17 @@
-#page-header
+nav#nav
-  span#blog_name.pull_left
+  span#blog_name.pull-left
    a#site-name.blog_title(href=url_for('/')) #[=config.title]
-  span.pull_right.menus
+  span.pull-right.menus
    if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
      #search_button
        a.site-page.social-icon.search
-          i.fa.fa-search.fa-fw
+          i.fas.fa-search.fa-fw
          span=' '+_p('search')
    !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})
    span.toggle-menu.close
      a.site-page
-        i.fa.fa-bars.fa-fw(aria-hidden="true")
+        i.fas.fa-bars.fa-fw
--- a/layout/includes/header/post-info.pug
+++ b/layout/includes/header/post-info.pug
@@ -8,19 +8,19 @@
        if (theme.post_meta.post.date_type === 'both')
          time.post-meta__date
            span.post-meta__date-created(title= _p('post.created')+' '+full_date(page.date))
-              i.fa.fa-calendar(aria-hidden="true")
+              i.far.fa-calendar-alt.fa-fw
              =' '+_p('post.created')+' '+date(page.date, config.date_format)
            span.post-meta__separator |
            span.post-meta__date-updated(title= _p('post.updated')+' '+full_date(page.updated))
-              i.fa.fa-history(aria-hidden="true")
+              i.fas.fa-history.fa-fw
              =' '+_p('post.updated')+' '+date(page.updated, config.date_format)
        else
          - var data_type_update = theme.post_meta.post.date_type === 'updated'
          - var date_type = data_type_update ? 'updated' : 'date'
-          - var date_icon = data_type_update ? 'fa-history' :'fa-calendar'
+          - var date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt'
          - var data_info = data_type_update ? _p('post.updated') : _p('post.created')
          time.post-meta__date(title=data_info + ' ' + full_date(page[date_type]))
-            i.fa(class=date_icon aria-hidden="true")
+            i.fa-fw(class=date_icon)
            =' ' + data_info + ' ' + date(page[date_type], config.date_format)
      if (theme.post_meta.post.categories && page.categories.data.length > 0)
@@ -29,25 +29,23 @@
            span.post-meta__separator |
          each item, index in page.categories.data
-            i.fa.fa-inbox.post-meta__icon(aria-hidden="true")
+            i.fas.fa-inbox.fa-fw.post-meta__icon
            a(href=url_for(item.path)).post-meta__categories #[=item.name]
            if (index < page.categories.data.length - 1)
-              i.fa.fa-angle-right.post-meta__separator(aria-hidden="true")
+              i.fas.fa-angle-right.post-meta__separator
    .meta-secondline  
      - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
      if (postWordcount)
        span.post-meta-wordcount
          if theme.wordcount.post_wordcount
-            - var wordCountIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-file-word' : 'fa fa-file-word-o'
+            i.far.fa-file-word.fa-fw.post-meta__icon
            i.post-meta__icon(class=wordCountIcon aria-hidden="true")
            span= _p('post.wordcount') + ':'
            span.word-count= wordcount(page.content)
            if theme.wordcount.min2read
              span.post-meta__separator |
          if theme.wordcount.min2read
-            - var readCountIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-clock' : 'fa fa-clock-o'
+            i.far.fa-clock.fa-fw.post-meta__icon
            i.post-meta__icon(class=readCountIcon aria-hidden="true")
            span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
    .meta-thirdline
@@ -55,37 +53,36 @@
        if (postWordcount && theme.busuanzi.page_pv)
          span.post-meta__separator |
        if theme.busuanzi.page_pv
-          i.fa.fa-eye.post-meta__icon(aria-hidden="true") 
+          i.far.fa-eye.fa-fw.post-meta__icon
          span=_p('post.page_pv') + ':'
          span#busuanzi_value_page_pv
      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 (postWordcount || theme.busuanzi.page_pv)
            span.post-meta__separator |
-          i.post-meta__icon(class=commentCount aria-hidden="true")
+          i.far.fa-comments.fa-fw.post-meta__icon
          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 (postWordcount || theme.busuanzi.page_pv)
            span.post-meta__separator |
-          i.post-meta__icon(class=commentCount aria-hidden="true")
+          i.far.fa-comments.fa-fw.post-meta__icon
          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 (postWordcount || theme.busuanzi.page_pv)
            span.post-meta__separator |
-          i.post-meta__icon(class=commentCount aria-hidden="true")
+          i.far.fa-comments.fa-fw.post-meta__icon
          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")
+          i.far.fa-comments.fa-fw.post-meta__icon
          span= _p('post.comments') + ':'
          a.comment-count(href=url_for(page.path) + '#post-comment')
            span.fb-comments-count(data-href=urlNoIndex())
--- a/layout/includes/header/social.pug
+++ b/layout/includes/header/social.pug
@@ -1,4 +1,4 @@
 each url, icon in theme.social
-  a.social-icon(href=trim(url.split('||')[0]) target="_blank" 
+  a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank" 
  title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1]))
-    i(class=icon aria-hidden="true")
+    i(class=icon)
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -1,4 +1,6 @@
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
 - var pageHighlightShrinkSet = page.highlight_shrink !== undefined ? page.highlight_shrink : theme.highlight_shrink
 - var pageHighlightShrink = theme.highlight_shrink !== 'none' && pageHighlightShrinkSet ? 'code-close' : ''
 doctype html
 html(lang=config.language data-theme=theme.display_mode)
@@ -15,10 +17,11 @@ html(lang=config.language data-theme=theme.display_mode)
    include ./sidebar.pug
-    #body-wrap
+    #body-wrap(class=pageHighlightShrink)
      if theme.background
-        - var is_photo = theme.background.substring(3,0) === 'url' ? 'photo':'color'
+        - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
        #web_bg(data-type=is_photo)
      include ./header/index.pug
      if (!is_post())
--- a/layout/includes/mixins/article-sort.pug
+++ b/layout/includes/mixins/article-sort.pug
@@ -11,10 +11,10 @@ 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=url_for(article.cover) alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+              img(src=url_for(article.cover) alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'`)
        .article-sort-post
          a.article-sort-item__post(href=url_for(article.path))
-            i.fa.fa-clock-o(aria-hidden="true")
+            i.far.fa-calendar-alt
            time.article-sort-item__time(title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
            .article-sort-item__title= article.title || 'No Title'
    - })
--- a/layout/includes/mixins/post-ui.pug
+++ b/layout/includes/mixins/post-ui.pug
@@ -9,59 +9,69 @@ mixin postUI(posts)
      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          a(href=url_for(link) title=title)      
-            if theme.lazyload
+            if theme.lazyload.enable
-              img.post_bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
+              img.post_bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
            else
-              img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
+              img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.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
+              i.fas.fa-thumbtack.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")
+                  i.far.fa-calendar-alt
                  =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")
+                  i.fas.fa-history
                  =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_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
              - 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")
+                i(class=date_icon)
                =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 |
              i.fas.fa-inbox.article-meta__icon
              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")
+                  i.fas.fa-angle-right
          if (theme.post_meta.page.tags && article.tags.data.length > 0)
            span.article-meta.tags
              span.article-meta__separator |
              i.fas.fa-tag.article-meta__icon
              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 -
+                  span.article-meta__link #[='•']
-        if theme.auto_excerpt && theme.auto_excerpt.enable
+
        //- Display the article introduction on homepage
        if theme.index_post_content.method == 1
          .content!= article.description
        else if theme.index_post_content.method == 2
          if article.description
            .content!= article.description
          else
            - const content = strip_html(article.content)
-          - let expert = content.substring(0, theme.auto_excerpt.length) 
+            - let expert = content.substring(0, theme.index_post_content.length) 
-          - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
+            - content.length > theme.index_post_content.length ? expert += ' ...' : ''
            .content!= expert
        else
-          .content!= article.description
+          - const content = strip_html(article.content)
          - let expert = content.substring(0, theme.index_post_content.length) 
          - content.length > theme.index_post_content.length ? expert += ' ...' : ''
          .content!= expert
    if theme.ad && theme.ad.index
      if (index + 1) % 3 == 0
--- a/layout/includes/mobile-sidebar/mobile-menus.pug
+++ b/layout/includes/mobile-sidebar/mobile-menus.pug
@@ -1,6 +1,6 @@
 #mobile-sidebar-menus
  .mobile_author_icon
-    img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.lodding_bg.flink}'` alt="avatar")
+    img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
  .mobile_post_data
    if site.posts.length
      .mobile_data_item.is-center
--- a/layout/includes/pagination.pug
+++ b/layout/includes/pagination.pug
@@ -1,7 +1,7 @@
 -
  var options = {
-    prev_text: '<i class="fa fa-fw fa-chevron-left" aria-hidden="true"></i>',
+    prev_text: '<i class="fas fa-chevron-left fa-fw"></i>',
-    next_text: '<i class="fa fa-fw fa-chevron-right" aria-hidden="true"></i>',
+    next_text: '<i class="fas fa-chevron-right fa-fw"></i>',
    mid_size: 1,
    escape: false
  }
@@ -11,29 +11,29 @@ if(!is_post())
    div.pagination
      !=paginator(options)
 else
-  nav#pagination.pagination_post
+  nav#pagination.pagination-post
    if(page.prev)
-      - var hasPageNext = page.prev ? 'pull_left' : 'pull-full'
+      - var hasPageNext = page.next ? 'pull-left' : 'pull-full'
      .prev-post(class=hasPageNext)
        - var pagination_cover = page.prev.cover === false ? page.prev.randomcover : page.prev.cover
        a(href=url_for(page.prev.path))
-          if theme.lazyload
+          if theme.lazyload.enable
-            img.prev_cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.lodding_bg.post_page)}'` )
+            img.prev-cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` )
          else
-            img.prev_cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.lodding_bg.post_page)}'` )
+            img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` )
          .pagination-info
            .label=_p('pagination.prev')
            .prev_info=page.prev.title
    if(page.next)
-      - var hasPagePrev = page.prev ? 'pull_right' : 'pull-full'
+      - var hasPagePrev = page.prev ? 'pull-right' : 'pull-full'
      - var pagination_cover = page.next.cover == false ? page.next.randomcover : page.next.cover
      .next-post(class=hasPagePrev)
        a(href=url_for(page.next.path))
-          if theme.lazyload
+          if theme.lazyload.enable
-            img.next_cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.lodding_bg.post_page)}'`)
+            img.next-cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`)
          else
-            img.next_cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.lodding_bg.post_page)}'`)
+            img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`)
          .pagination-info
            .label=_p('pagination.next')
            .next_info=page.next.title 
--- a/layout/includes/post/reward.pug
+++ b/layout/includes/post/reward.pug
@@ -1,11 +1,12 @@
 .post-reward
-  a.reward-button.button--primary.button--animated 
+  button.reward-button
-    i.fa.fa-qrcode
+    i.fas.fa-qrcode
    = ' ' + _p('donate')
    .reward-main
      ul.reward-all
        each item in theme.reward.QR_code
          - var clickTo = (item.itemlist||item).link ? (item.itemlist||item).link : (item.itemlist||item).img
          li.reward-item
-            img.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)
+            img.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text onclick=`window.open('${url_for(clickTo)}')`)
            .post-qr-code__desc=(item.itemlist||item).text
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -1,23 +1,32 @@
 section#rightside.rightside
  #rightside-config-hide
    if theme.readmode.enable && is_post()
      i#readmode.fa.fa-book(title=_p('rightside.readmode_title'))
    if is_post()
-      i#font_plus.fa.fa-plus(title=_p('rightside.font_plus_title'))
+      if theme.readmode
-      i#font_minus.fa.fa-minus(title=_p('rightside.font_minus_title'))
+        button#readmode(title=_p('rightside.readmode_title'))
          i.fas.fa-book-open
      button#font_plus(title=_p('rightside.font_plus_title'))
        i.fas.fa-plus
      button#font_minus(title=_p('rightside.font_minus_title'))
        i.fas.fa-minus
    if theme.translate && theme.translate.enable
-      a#translateLink.translate_chn_to_cht(href="javascript:translatePage();" title=_p('rightside.translate_title') target="_self")= theme.translate.default
+      button#translateLink.translate_chn_to_cht(title=_p('rightside.translate_title'))= theme.translate.default
    if theme.darkmode.enable && theme.darkmode.button
-      - var lightModeIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-sun' : 'fa fa-sun-o'
+      button#darkmode(title=_p('rightside.night_mode_title'))
-      - var darkModeIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-moon' : 'fa fa-moon-o'
+        i.fas.fa-adjust
      - var display_mode = theme.display_mode == 'dark' ? lightModeIcon : darkModeIcon
      i#darkmode.darkmode(class=display_mode title=_p('rightside.night_mode_title'))
  #rightside-config-show
-    #rightside_config(title=_p("rightside.setting"))
+    button#rightside_config(title=_p("rightside.setting"))
-      i.fa.fa-cog(aria-hidden="true")
+      i.fas.fa-cog
    if is_post() && page.comments !== false && isComment
      a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
-        i.scroll_to_comment.fa.fa-comments   
+        i.scroll_to_comment.fas.fa-comments
-    if is_post() && page.toc !== false && theme.toc.enable && (toc(page.content) !== '' || page.encrypt == true )
+    if showToc
-      i#mobile-toc-button.fa.fa-list-ul.close(title=_p("rightside.toc") aria-hidden="true")
+      button#mobile-toc-button.close(title=_p("rightside.toc"))
-    i.fa.fa-arrow-up#go-up(title=_p("rightside.back_to_top") aria-hidden="true")
+        i.fas.fa-list-ul
    if theme.chat_btn && (theme.chatra.enable || theme.tidio.enable || theme.daovoice.enable || theme.gitter.enable)
      button#chat_btn(title=_p("rightside.chat_btn"))
        i.fas.fa-sms
    button#go-up(title=_p("rightside.back_to_top"))
      i.fas.fa-arrow-up
--- a/layout/includes/search/algolia.pug
+++ b/layout/includes/search/algolia.pug
@@ -8,5 +8,5 @@
    #algolia-pagination
    #algolia-stats
  span.search-close-button
-    i.fa.fa-times
+    i.fas.fa-times
 .search-mask
--- a/layout/includes/search/local-search.pug
+++ b/layout/includes/search/local-search.pug
@@ -19,5 +19,5 @@
            span=_p("local_search.powered_by")
            |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
  span.search-close-button
-    i.fa.fa-times
+    i.fas.fa-times
 .search-mask
--- a/layout/includes/sidebar.pug
+++ b/layout/includes/sidebar.pug
@@ -1,15 +1,11 @@
 - let showToc = is_post() && page.toc !== false && theme.toc.enable && (toc(page.content) !== '' || page.encrypt == true )
 - let autoOpenSidebar = theme.auto_open_sidebar.enable === true ? 'on' : ''
 -
-  let tocNumber
+  let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
-  if (page.toc_number !== undefined) tocNumber = page.toc_number
+  let autoOpenPostSet = page.auto_open == undefined ? theme.toc.auto_open : page.auto_open
-  else if (theme.toc.number !== undefined) tocNumber = theme.toc.number
+  let autoOpenSidebar = autoOpenPostSet ? 'on' : ''
  else tocNumber = true
 -
 if(showToc)
-  i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true" class=autoOpenSidebar)      
+  i.fas.fa-arrow-right#toggle-sidebar(class=autoOpenSidebar)
  #sidebar
    .sidebar-toc
      div.sidebar-toc__title= _p('sidebar.catalog')
--- a/layout/includes/third-party/pangu.pug
+++ b/layout/includes/third-party/pangu.pug
@@ -1,13 +1,12 @@
 script(src=url_for(theme.CDN.pangu))
-if theme.pangu.field === 'post'
+if theme.pangu.field === 'post' && is_post()
  if is_post()
  script.
    document.addEventListener('DOMContentLoaded', function() {
-          pangu.spacingElementById('content-inner')
+      pangu.autoSpacingPage()
    })
-else if theme.pangu.field === 'page'
+else if theme.pangu.field === 'site'
  script.
    document.addEventListener('DOMContentLoaded', function() {
-          pangu.spacingElementById('content-inner')
+      pangu.autoSpacingPage()
    })
--- a/layout/includes/widget/card_announcement.pug
+++ b/layout/includes/widget/card_announcement.pug
@@ -1,6 +1,6 @@
 .card-widget.card-announcement
  .card-content
    .item-headline
-      i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
+      i.fas.fa-bullhorn.card-announcement-animation
      span= _p('aside.card_announcement')
    .announcement_content!= theme.aside.card_announcement.content
--- a/layout/includes/widget/card_archives.pug
+++ b/layout/includes/widget/card_archives.pug
@@ -1,7 +1,7 @@
 .card-widget.card-archives
  .card-content
    .item-headline
-      i.fa.fa-archive(aria-hidden="true")
+      i.fas.fa-archive
      span= _p('aside.card_archives')
    - let type = theme.aside.card_archives.type || 'monthly'
--- a/layout/includes/widget/card_author.pug
+++ b/layout/includes/widget/card_author.pug
@@ -1,9 +1,9 @@
 .card-widget.card-info
  .card-content
    .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")
+      img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
      .author-info__name= config.author
-      .author-info__description= theme.aside.card_author.description || config.description
+      .author-info__description!= theme.aside.card_author.description || config.description
    .card-info-data
      if site.posts.length
@@ -25,8 +25,8 @@
            .length_num= site.categories.length
    .card-info-bookmark.is-center
-      a#bookmark-it.bookmark.button--primary.button--animated(href="javascript:;" title= _p('aside.card_bookmark') target="_self")
+      button#bookmark-it.button--animated(title= _p('aside.card_bookmark'))
-        i.fa.fa-bookmark(aria-hidden="true")
+        i.fas.fa-bookmark
        span= _p('aside.card_bookmark') || 'Follow Me'
    if(theme.social)
--- a/layout/includes/widget/card_categories.pug
+++ b/layout/includes/widget/card_categories.pug
@@ -2,8 +2,8 @@ if site.categories.length
  .card-widget.card-categories
      .card-content
        .item-headline
-          i.fa.fa-folder-open(aria-hidden="true")
+          i.fas.fa-folder-open
          span= _p('aside.card_categories')
-        !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 })
+        !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand })
--- a/layout/includes/widget/card_recent_post.pug
+++ b/layout/includes/widget/card_recent_post.pug
@@ -1,7 +1,7 @@
 .card-widget.card-recent-post
  .card-content
    .item-headline
-      i.fa.fa-history(aria-hidden="true")
+      i.fas.fa-history
      span= _p('aside.card_recent_post')
    .aside-recent-item
      - var postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
@@ -15,10 +15,10 @@
            a(href=url_for(link))
              if post_cover && theme.cover.aside_enable
                .aside-post-cover
-                  if theme.lazyload
+                  if theme.lazyload.enable
-                    img.aside-post-bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
+                    img.aside-post-bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` title=title alt=title)
                  else
-                    img.aside-post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
+                    img.aside-post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` title=title alt=title)
              .aside-post-title(class=no_cover)
                .aside-post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
                time.aside-post_meta.post-meta__date(title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
--- a/layout/includes/widget/card_tags.pug
+++ b/layout/includes/widget/card_tags.pug
@@ -2,7 +2,7 @@ if site.tags.length
  .card-widget.card-tags
    .card-content
      .item-headline
-        i.fa.fa-tags(aria-hidden="true")
+        i.fas.fa-tags
        span= _p('aside.card_tags')
      - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
--- a/layout/includes/widget/card_webinfo.pug
+++ b/layout/includes/widget/card_webinfo.pug
@@ -1,8 +1,7 @@
 - var webinfoIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'fas fa-chart-line' : 'fa fa-line-chart'
 .card-widget.card-webinfo
  .card-content
    .item-headline
-        i(class=webinfoIcon aria-hidden="true")
+        i.fas.fa-chart-line
        span= _p('aside.card_webinfo.headline')
    .webinfo
      .webinfo-item
@@ -11,7 +10,7 @@
      if theme.runtimeshow.enable
        .webinfo-item
          .webinfo-runtime-name= _p('aside.card_webinfo.runtime_name') + " :"
-          #webinfo-runtime-count.webinfo-runtime-count(start_date=theme.runtimeshow.start_date)      
+          #webinfo-runtime-count.webinfo-runtime-count(publish_date=theme.runtimeshow.publish_date)      
      if theme.wordcount.enable && theme.wordcount.total_wordcount
        .webinfo-item
          .webinfo-site-wordcount-name=_p('aside.card_webinfo.site_wordcount') + " :"
--- a/scripts/filters/post_lazyload.js
+++ b/scripts/filters/post_lazyload.js
@@ -3,18 +3,19 @@
 * lazyload
 * replace src to data-src
 */
 // <figure .+class="[^"]* highlight [^"]*".+>
 'use strict'
 const urlFor = require('hexo-util').url_for.bind(hexo)
 function lazyProcess (htmlContent) {
-  var bg = hexo.theme.config.lodding_bg.post ? urlFor(hexo.theme.config.lodding_bg.post) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
+  var bg = hexo.theme.config.lazyload.post ? urlFor(hexo.theme.config.lazyload.post) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
-  return htmlContent.replace(/(<img .*?src=)/ig, `$1 ${bg} data-src=`)
+  return htmlContent.replace(/(<img .*?src=)/ig, `$1 "${bg}" data-src=`)
 }
 var processPost = function (data) {
-  if (!hexo.theme.config.lazyload) return
+  if (!hexo.theme.config.lazyload.enable) return
  data.content = lazyProcess.call(this, data.content)
  return data
 }
--- a/scripts/helpers/aside_archives.js
+++ b/scripts/helpers/aside_archives.js
@@ -92,7 +92,7 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
  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>`
+              <span>${moreButton}</span><i class="fas fa-angle-right"  ></i></a></li>`
  }
  result += '</ul>'
  return result
--- a/scripts/helpers/aside_categories.js
+++ b/scripts/helpers/aside_categories.js
@@ -6,9 +6,7 @@
 'use strict'
 hexo.extend.helper.register('aside_categories', function (categories, options) {
-  if (
+  if (!options && (!categories || !Object.prototype.hasOwnProperty.call(categories, 'length'))
    !options &&
    (!categories || !Object.prototype.hasOwnProperty.call(categories, 'length'))
  ) {
    options = categories
    categories = this.site.categories
@@ -25,47 +23,48 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
  const order = options.order || 1
  const categoryDir = this.url_for(config.category_dir)
  const limit = options.limit === 0 ? categories.length : options.limit
  const isExpand = options.expand !== 'none'
  const expandClass = isExpand && options.expand === true ? 'card-category-list-icon expand' : 'card-category-list-icon'
  const buttonLabel = this._p('aside.more_button')
  const prepareQuery = (parent) => {
    const query = {}
-    if (parent) {
+    if (parent) { query.parent = parent } else { query.parent = { $exists: false } }
-      query.parent = parent
+    return categories.find(query).sort(orderby, order).filter((cat) => cat.length)
    } else {
      query.parent = {
        $exists: false,
      }
    }
    return categories
      .find(query)
      .sort(orderby, order)
      .filter((cat) => cat.length)
  }
-  const hierarchicalList = (t, level, parent) => {
+  const hierarchicalList = (t, level, parent, topparent = true) => {
    let result = ''
    var isTopParent = topparent
    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)
+            var childList = hierarchicalList(t, level + 1, cat._id, false)
            child = childList[0]
            t = childList[1]
          }
-          result += '<li class="card-category-list-item">'
+          var parentClass = isExpand && isTopParent && child ? 'parent' : ''
          result += `<li class="card-category-list-item ${parentClass}">`
          result += `<a class="card-category-list-link" href="${this.url_for(cat.path)}">`
          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>`
          }
          if (isExpand && isTopParent && child) {
            result += `<i class="fas fa-caret-left ${expandClass}"></i>`
          }
          result += '</a>'
          result += '</li>'
          if (child) {
@@ -85,7 +84,7 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
    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>`
+                <span>${buttonLabel}</span><i class="fas fa-angle-right"></i></a></li>`
    return moreHtml
  }
--- a/scripts/helpers/related_post.js
+++ b/scripts/helpers/related_post.js
@@ -41,14 +41,14 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
  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 ? 'data-src' : 'src'
+  var lazySrc = config.lazyload.enable ? 'data-src' : 'src'
  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>' +
+      '<div class="relatedPosts_headline"><i class="fas fa-thumbs-up fa-fw"></i><span>' +
      ' ' +
      headlineLang +
      '</span></div>'
@@ -74,13 +74,13 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
        '">'
      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>' +
+          '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="far fa-calendar-alt fa-fw"></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>' +
+          '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="fas fa-history fa-fw"></i>' +
          ' ' +
          this.date(relatedPosts[i].updated, hexoConfig.date_format) +
          '</div>'
@@ -90,7 +90,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
      result += '</div></a></div>'
    }
-    result += '</div><div class="clear_both"></div></div>'
+    result += '</div></div>'
    return result
  }
 })
--- a/scripts/tags/button.js
+++ b/scripts/tags/button.js
@@ -0,0 +1,28 @@
 /**
 * Button
 * {% btn url text icon option %}
 * option: color outline center block larger
 * color : default/blue/pink/red/purple/orange/green
 */
 'use strict'
 const urlFor = require('hexo-util').url_for.bind(hexo)
 function btn (args) {
  args = args.join(' ').split(',')
  var url = args[0] || ''
  var text = args[1] || ''
  var icon = args[2] || ''
  var option = args[3] || ''
  url = url.trim()
  text = text.trim()
  icon = icon.trim()
  option = option.trim()
  return `<a class="btn-beautify button--animated ${option}" href="${urlFor(url)}" title="${text}">
  ${icon.length > 0 ? `<i class="${icon} fa-fw"></i>` : ''} ${text} </a>`
 }
 hexo.extend.tag.register('btn', btn, { ends: false })
--- a/scripts/tags/hide.js
+++ b/scripts/tags/hide.js
@@ -28,8 +28,8 @@ function hideInline (args) {
  if (color) group += `color: ${color}`
  group += '"'
-  return `<span class="hide-inline"><a class="hide-button button--primary button--animated" ${group}>${display}
+  return `<span class="hide-inline"><button class="hide-button button--animated" ${group}>${display}
-  </a><span class="hide-content">${content}</span></span>`
+  </button><span class="hide-content">${content}</span></span>`
 }
 function hideBlock (args, content) {
@@ -43,8 +43,8 @@ function hideBlock (args, content) {
  if (color) group += `color: ${color}`
  group += '"'
-  return `<div class="hide-block"><a class="hide-button button--primary button--animated" ${group}>${display}
+  return `<div class="hide-block"><button class="hide-button button--animated" ${group}>${display}
-    </a><span class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</span></div>`
+    </button><span class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</span></div>`
 }
 function hideToggle (args, content) {
@@ -62,7 +62,7 @@ function hideToggle (args, content) {
  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>
+  return `<div class="hide-toggle" ${border}><div class="hide-button toggle-title" ${group}><i class="fas 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>`
 }
--- a/scripts/tags/tabs.js
+++ b/scripts/tags/tabs.js
@@ -0,0 +1,62 @@
 /**
 * Tabs
 * transplant from hexo-theme-next
 * modify by Jerry
 */
 'use strict'
 function postTabs (args, content) {
  var tabBlock = /<!--\s*tab (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g
  args = args.join(' ').split(',')
  var tabName = args[0]
  var tabActive = Number(args[1]) || 0
  var matches = []
  var match
  var tabId = 0
  var tabNav = ''
  var tabContent = ''
  !tabName && hexo.log.warn('Tabs block must have unique name!')
  while ((match = tabBlock.exec(content)) !== null) {
    matches.push(match[1])
    matches.push(match[2])
  }
  for (var i = 0; i < matches.length; i += 2) {
    var tabParameters = matches[i].split('@')
    var postContent = matches[i + 1]
    var tabCaption = tabParameters[0] || ''
    var tabIcon = tabParameters[1] || ''
    var tabHref = ''
    postContent = hexo.render.renderSync({ text: postContent, engine: 'markdown' }).trim()
    tabId += 1
    tabHref = (tabName + ' ' + tabId).toLowerCase().split(' ').join('-');
    ((tabCaption.length === 0) && (tabIcon.length === 0)) && (tabCaption = tabName + ' ' + tabId)
    var isOnlyicon = tabIcon.length > 0 && tabCaption.length === 0 ? ' style="text-align: center;"' : ''
    var icon = tabIcon.trim()
    tabIcon.length > 0 && (tabIcon = `<i class="${icon}"${isOnlyicon}></i>`)
    var toTop = '<button class="tab-to-top" onclick="scrollToDest($(this).parents(\'.tabs\'),65)"><i class="fas fa-arrow-up"></i></button>'
    var isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
    tabNav += `<li class="tab${isActive}"><a href="#${tabHref}">${tabIcon + tabCaption.trim()}</a></li>`
    tabContent += `<div class="tab-item-content${isActive}" id="${tabHref}">${postContent + toTop}</div>`
  }
  tabNav = `<ul class="nav-tabs">${tabNav}</ul>`
  tabContent = `<div class="tab-contents">${tabContent}</div>`
  return `<div class="tabs" id="${tabName.toLowerCase().split(' ').join('-')}">${tabNav + tabContent}</div>`
 }
 hexo.extend.tag.register('tabs', postTabs, { ends: true })
 hexo.extend.tag.register('subtabs', postTabs, { ends: true })
 hexo.extend.tag.register('subsubtabs', postTabs, { ends: true })
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -0,0 +1,18 @@
 .limit-one-line
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
 .limit-more-line
  display: -webkit-box
  overflow: hidden
  -webkit-box-orient: vertical
 .fontawesomeIcon
  display: inline-block
  font-weight: 600
  font-style: normal
  font-variant: normal
  font-family: 'Font Awesome 5 Free'
  text-rendering: auto
  -webkit-font-smoothing: antialiased
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -14,9 +14,6 @@ body
  if !hexo-config('copy.enable')
    user-select: none
    -moz-user-select: none
    -webkit-user-select: none
    -ms-user-select: none
 *::-webkit-scrollbar
  width: 8px
@@ -62,16 +59,17 @@ h6
  left: $sidebar-icon-left
  z-index: 100
  font-size: $sidebar-icon-size
  // opacity: 0
  cursor: pointer
  transition: all .2s
 hr
  position: relative
  margin: 2rem auto
  width: calc(100% - 4px)
  border: 2px dashed lighten($theme-hr-color, 50%)
  if hexo-config('hr_icon.enable')
    width: calc(100% - 4px)
    &:hover
      &:before
        left: calc(95% - 20px)
@@ -81,30 +79,19 @@ hr
      top: $hr-icon-top
      left: 5%
      z-index: 1
-    color: $theme-hr-color
+      color: lighten($theme-hr-color, 30%)
      content: $hr-icon
    font-style: normal
    font-variant: normal
      font-size: 20px
      line-height: 1
      transition: all 1s ease-in-out
-    text-rendering: auto
+      @extend .fontawesomeIcon
    -webkit-font-smoothing: antialiased
-    if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
+.table-wrap
-      font-weight: 600
+  overflow-x: scroll
      font-family: 'Font Awesome 5 Free'
    else
      font-weight: normal
      font-family: FontAwesome
 iframe
  margin: 0 0 1rem
 table
-  display: block
+  display: table
  overflow: auto
  margin: 0 0 1rem
  width: 100%
  border-spacing: 0
  border-collapse: collapse
@@ -123,18 +110,26 @@ table
  background: $theme-text-selection-color
  color: #F7F7F7
 button
  margin: 0
  padding: 0
  outline: 0
  border: none
  background: none
  cursor: pointer
 // font
-#nav #site_title,
+#page-header #site_title,
-#nav #site_subtitle,
+#page-header #site_subtitle,
 #site-name,
 #aside_content .author-info__name,
 #aside_content .author-info__description
  font-family: $site-name-font
-.is_right
+.is-right
  text-align: right
-.is_left
+.is-left
  text-align: left
 .is-center
@@ -146,22 +141,21 @@ table
 .is-visible-inline
  display: inline-block !important
-.is_invisible
+.is-invisible
  display: none !important
-.is_hidden
+.is-hidden
  overflow: hidden
-.pull_left
+.copy-true
  user-select: all
 .pull-left
  float: left
-.pull_right
+.pull-right
  float: right
 // button hover
 .button--primary
  color: $theme-button-hover-color
 .button--animated
  transition-duration: 1s
  transition-property: color
@@ -197,22 +191,6 @@ img:not([src])
  &:hover
    text-decoration: none !important
 // hexo tag video
 .video-container
  position: relative
  overflow: hidden
  margin-bottom: .8rem
  padding-top: 56.25%
  height: 0
  iframe
    position: absolute
    top: 0
    left: 0
    margin-top: 0
    width: 100%
    height: 100%
 .comment_headling
  margin-bottom: 10px
  font-weight: 700
@@ -225,12 +203,13 @@ img:not([src])
  display: block !important
  height: auto !important
 // animation
 #content-inner,
 #footer
  animation: main 1s
-#nav
+#page-header
-  animation: nav-effect 1s
+  animation: header-effect 1s
 #site_title,
 #site_subtitle
@@ -290,7 +269,7 @@ if hexo-config('avatar.effect') == true
    top: 0
    opacity: .4
-@keyframes nav-effect
+@keyframes header-effect
  0%
    opacity: 0
    transform: translateY(-50px)
--- a/source/css/_highlight/diff.styl
+++ b/source/css/_highlight/diff.styl
@@ -1,8 +1,73 @@
-$highlight_theme = hexo-config('highlight_theme')
+// For diff highlight
 pre .deletion
  color: $highlight-deletion
-if $highlight_theme == 'light'
+pre .addition
-  $highlight-deletion = #fdd
+  color: $highlight-addition
-  $highlight-addition = #dfd
+
-else
+pre .meta
-  $highlight-deletion = #008000
+  color: $highlight-purple
-  $highlight-addition = #800000
+
 pre
  .comment
    color: $highlight-comment
  .variable,
  .attribute,
  .regexp,
  .ruby .constant,
  .xml .tag .title,
  .xml .pi,
  .xml .doctype,
  .html .doctype,
  .css .id,
  .tag .name,
  .css .class,
  .css .pseudo
    color: $highlight-red
  .tag
    color: $highlight-aqua
  .number,
  .preprocessor,
  .literal,
  .params,
  .constant,
  .command
    color: $highlight-orange
  .built_in
    color: $highlight-yellow
  .ruby .class .title,
  .css .rules .attribute,
  .string,
  .value,
  .inheritance,
  .header,
  .ruby .symbol,
  .xml .cdata,
  .special,
  .number,
  .formula
    color: $highlight-green
  .keyword,
  .title,
  .css .hexcolor
    color: $highlight-aqua
  .function,
  .python .decorator,
  .python .title,
  .ruby .function .title,
  .ruby .title .keyword,
  .perl .sub,
  .javascript .title,
  .coffeescript .title
    color: $highlight-blue
  .tag .attr,
  .javascript .function
    color: $highlight-purple
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -1,6 +1,10 @@
 // https://github.com/equinusocio/vsc-material-theme
 $highlight_theme = hexo-config('highlight_theme')
@require 'theme'
-@require 'diff'
+
 if $highlight_theme != false
  @require 'diff'
 wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
@@ -16,13 +20,6 @@ $code-block
    counter-reset: line
    white-space: pre-wrap
 .code-area-wrap
  position: relative
  margin: 0 0 1rem
 figure.highlight
  position: relative
 blockquote
  margin: 0 0 1rem
  padding: .1rem .8rem
@@ -71,10 +68,6 @@ blockquote
  figure.highlight
    @extend $code-block
    position: relative
    border-radius: 1px
    if hexo-config('highlight_shrink') == true
      display: none
    pre
      margin: 0
@@ -82,10 +75,6 @@ blockquote
      border: none
    .line
      &::selection
        background: $highlight-selection
        color: $highlight-foreground
      if wordWrap
        &:before
          display: inline-block
@@ -100,10 +89,8 @@ blockquote
        background-color: $highlight-selection
    table
-      position: relative
+      display: block
-      display: table
+      overflow: auto
      margin: 0
      width: auto
      border: none
    td
@@ -113,7 +100,6 @@ blockquote
    figcaption
      clearfix()
      padding: .3rem 0 .1rem .7rem
      color: $highlight-foreground
      font-size: 1em
      line-height: 1em
@@ -136,16 +122,59 @@ blockquote
      padding-right: .5rem
      padding-left: .5rem
      width: 100%
      background-color: $highlight-background
    .line
      height: 1rem
    .highlight-tools
      position: relative
      overflow: hidden
      width: 100%
      height: 1.5rem
      background: $highlight-tools.bg-color
      color: $highlight-tools.color
      font-size: 14px
      .code-expand
        position: absolute
        padding: .4rem .7rem
        cursor: pointer
        transition: all .3s
        transform: rotate(0)
        & + .code-lang
          left: 1.7rem
        &.code-closed
          transition: all .3s
          transform: rotate(-90deg) !important
      .code-lang
        position: absolute
        left: .7rem
        text-transform: capitalize
        font-weight: bold
        font-size: .8rem
        line-height: 1.5rem
      .copy-notice
        position: absolute
        top: .25rem
        right: 1.7rem
        opacity: 0
      .copy-button
        position: absolute
        top: .4rem
        right: .7rem
        cursor: pointer
        transition: color .2s
        &:hover
          color: $theme-color
  .gutter
    user-select: none
    -webkit-user-select: none
    -moz-user-select: none
    -ms-user-select: none
  .gist table
    width: auto
@@ -153,121 +182,43 @@ blockquote
    td
      border: none
-  // For diff highlight
+  if $highlight_theme == 'mac'
-  pre .deletion
+    figure.highlight
-    background: $highlight-deletion
+      margin: 0 0 1.2rem
      border-radius: 7px
      box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .4)
      -webkit-transform: translateZ(0)
-  pre .addition
+      .highlight-tools
-    background: $highlight-addition
+        &:after
          position: absolute
          top: .45rem
          left: .7rem
          width: 12px
          height: 12px
          border-radius: 50%
          background: #fc625d
          box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
          content: ' '
-  pre .meta
+        .code-expand
-    color: $highlight-purple
+          right: 0
-  pre
+          &.code-closed
-    .comment
+            transition: all .3s
-      color: $highlight-comment
+            transform: rotate(90deg) !important
-      &::selection
+          & ~ .copy-notice
-        background: $highlight-selection
+            right: 2.8rem
        color: $highlight-foreground
-    .variable,
+          & ~ .copy-button
-    .attribute,
+            right: 1.8rem
    .regexp,
    .ruby .constant,
    .xml .tag .title,
    .xml .pi,
    .xml .doctype,
    .html .doctype,
    .css .id,
    .tag .name,
    .css .class,
    .css .pseudo
      color: $highlight-red
-      &::selection
+        .code-lang
-        background: $highlight-selection
+          left: 3.8rem !important
        color: $highlight-foreground
-    .tag
+// when the page.highlight_shrink set to true
-      color: $highlight-aqua
+#body-wrap.code-close
-
+  figure.highlight
-      &::selection
+    & > :not(.highlight-tools)
-        background: $highlight-selection
+      display: none
        color: $highlight-foreground
    .number,
    .preprocessor,
    .literal,
    .params,
    .constant,
    .command
      color: $highlight-orange
      &::selection
        background: $highlight-selection
        color: $highlight-foreground
    .built_in
      color: $highlight-yellow
      &::selection
        background: $highlight-selection
        color: $highlight-foreground
    .ruby .class .title,
    .css .rules .attribute,
    .string,
    .value,
    .inheritance,
    .header,
    .ruby .symbol,
    .xml .cdata,
    .special,
    .number,
    .formula
      color: $highlight-green
      &::selection
        background: $highlight-selection
        color: $highlight-foreground
    .keyword,
    .title,
    .css .hexcolor
      color: $highlight-aqua
      &::selection
        background: $highlight-selection
        color: $highlight-foreground
    .function,
    .python .decorator,
    .python .title,
    .ruby .function .title,
    .ruby .title .keyword,
    .perl .sub,
    .javascript .title,
    .coffeescript .title
      color: $highlight-blue
      &::selection
        background: $highlight-selection
        color: $highlight-foreground
    .tag .attr,
    .javascript .function
      color: $highlight-purple
      &::selection
        background: $highlight-selection
        color: $highlight-foreground
 .highlight-tools
  position: relative
  overflow: hidden
  width: 100%
  height: 1.4rem
  background: darken($highlight-background, 5)
  color: $highlight-foreground
  font-size: 14px
--- a/source/css/_highlight/theme.styl
+++ b/source/css/_highlight/theme.styl
@@ -13,17 +13,23 @@ if $highlight_theme == 'default'
  $highlight-aqua = #89DDFF
  $highlight-blue = #82AAFF
  $highlight-purple = #C792EA
  $highlight-deletion = #BF42BF
  $highlight-addition = #105EDE
  $highlight-gutter = {
-    color: #37474F,
+    color: alpha($highlight-foreground, .5),
    bg-color: $highlight-background
  }
  $highlight-tools = {
    color: alpha($highlight-foreground, .8),
    bg-color: darken($highlight-background, 2)
  }
-if $highlight_theme == 'darker'
+if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
  $highlight-background = #212121
  $highlight-current-line = #282a2e
  $highlight-selection = #61616150
  $highlight-foreground = #EEFFFF
-  $highlight-comment = #4A4A4A
+  $highlight-comment = #969896
  $highlight-red = #FF5370
  $highlight-orange = #F78C6C
  $highlight-yellow = #FFCB6B
@@ -31,10 +37,16 @@ if $highlight_theme == 'darker'
  $highlight-aqua = #89DDFF
  $highlight-blue = #82AAFF
  $highlight-purple = #C792EA
  $highlight-deletion = #BF42BF
  $highlight-addition = #105EDE
  $highlight-gutter = {
-    color: #424242,
+    color: alpha($highlight-foreground, .5),
    bg-color: $highlight-background
  }
  $highlight-tools = {
    color: alpha($highlight-foreground, .8),
    bg-color: darken($highlight-background, 2)
  }
 if $highlight_theme == 'pale night'
  $highlight-background = #292D3E
@@ -49,17 +61,23 @@ if $highlight_theme == 'pale night'
  $highlight-aqua = #89DDFF
  $highlight-blue = #82AAFF
  $highlight-purple = #C792EA
  $highlight-deletion = #BF42BF
  $highlight-addition = #105EDE
  $highlight-gutter = {
-    color: #3A3F58,
+    color: alpha($highlight-foreground, .5),
    bg-color: $highlight-background
  }
  $highlight-tools = {
    color: $highlight-foreground,
    bg-color: darken($highlight-background, 2)
  }
 if $highlight_theme == 'ocean'
  $highlight-background = #0F111A
  $highlight-current-line = #000000
  $highlight-selection = #717CB450
  $highlight-foreground = #8F93A2
-  $highlight-comment = #464B5D
+  $highlight-comment = rgba(101, 115, 126, .8)
  $highlight-red = #FF5370
  $highlight-orange = #F78C6C
  $highlight-yellow = #FFCB6B
@@ -67,17 +85,23 @@ if $highlight_theme == 'ocean'
  $highlight-aqua = #89DDFF
  $highlight-blue = #82AAFF
  $highlight-purple = #C792EA
  $highlight-deletion = #BF42BF
  $highlight-addition = #105EDE
  $highlight-gutter = {
-    color: #3B3F5180,
+    color: alpha($highlight-foreground, .5),
    bg-color: $highlight-background
  }
  $highlight-tools = {
    color: $highlight-foreground,
    bg-color: darken($highlight-background, 2)
  }
 if $highlight_theme == 'light'
  $highlight-background = #F6F8FA
  $highlight-current-line = #00346e
  $highlight-selection = #80CBC440
  $highlight-foreground = #90A4AE
-  $highlight-comment = #90A4AE90
+  $highlight-comment = rgba(149, 165, 166, .8)
  $highlight-red = #E53935
  $highlight-orange = #F76D47
  $highlight-yellow = #FFB62C
@@ -85,7 +109,26 @@ if $highlight_theme == 'light'
  $highlight-aqua = #39ADB5
  $highlight-blue = #6182B8
  $highlight-purple = #7C4DFF
  $highlight-deletion = #BF42BF
  $highlight-addition = #105EDE
  $highlight-gutter = {
-    color: #CFD8DC,
+    color: alpha($highlight-foreground, .5),
    bg-color: $highlight-background
  }
  $highlight-tools = {
    color: $highlight-foreground,
    bg-color: darken($highlight-background, 5)
  }
 if $highlight_theme == false
  $highlight-background = #F6F8FA
  $highlight-foreground = #90A4AE
  $highlight-selection = #80CBC440
  $highlight-gutter = {
    color: alpha($highlight-foreground, .5),
    bg-color: $highlight-background
  }
  $highlight-tools = {
    color: $highlight-foreground,
    bg-color: darken($highlight-background, 5)
  }
--- a/source/css/_layout/404.styl
+++ b/source/css/_layout/404.styl
@@ -1,44 +1,80 @@
 if hexo-config('error_404.enable')
-  #nav.error-no-found
+  #error-wrap
    display: flex
    flex-direction: column
    justify-content: center
    height: 100vh
    &:before
      width: 100%
      height: 100%
      background-color: alpha($dark-black, .5)
      content: ''
    #error_info
    position: absolute
-      padding: 0 4rem
+    top: 50%
-      width: 100%
+    right: 0
-      letter-spacing: 3px
+    left: 0
-      line-height: 1
+    margin: 0 auto
    padding: 0 1rem
    max-width: 1000px
    transform: translate(0, -50%)
-      #error_title,
+    .error-content
-      #error_subtitle
+      display: flex
      flex-direction: row
      justify-content: center
      align-items: center
      margin: 0 1rem
      height: 18rem
      border-radius: 8px
      background: #fff
      box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
      @media screen and (max-width: 768px)
        flex-direction: column
        margin: 0
-        padding: 0
+        height: 25rem
-        color: $light-grey
+
-        letter-spacing: 5px
+      .error-img
        flex: 1
        height: 100%
        border-top-left-radius: 8px
        border-bottom-left-radius: 8px
        background-color: #49b1f5
        background-position: center
        background-size: cover
        @media screen and (max-width: 768px)
          flex: 1
          width: 100%
          border-top-right-radius: 8px
          border-bottom-left-radius: 0
      .error-info
        flex: 1
        padding: .5rem
        text-align: center
        font-size: 14px
        font-family: $site-name-font
-      #error_title
+        @media screen and (max-width: 768px)
-        font-size: 10rem
+          flex: 1.1
          width: 100%
-      #error_subtitle
+        .error_title
-        font-size: 2rem
+          margin-top: -4rem
          color: $font-color
          font-size: 9em
-  @media screen and (max-width: $sm)
+          @media screen and (max-width: 768px)
-    #nav.error-no-found
+            margin-top: -3rem
      #error_info
        padding: 0 2rem
-        #error_title
+        .error_subtitle
-          font-size: 7rem !important
+          @extend .limit-more-line
          margin-top: -3.5rem
          color: $font-color
          word-break: break-word
          font-size: 1.6em
          -webkit-line-clamp: 2
-        #error_subtitle
+        a
-          font-size: 1rem !important
+          position: relative
          z-index: 1
          display: inline-block
          margin-top: .5rem
          padding: .3rem 1.5rem
          background: $theme-color
          color: white
          i
            padding-right: .3rem
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -43,10 +43,8 @@
        a
          .headline
-            overflow: hidden
+            @extend .limit-one-line
            color: $font-black
            text-overflow: ellipsis
            white-space: nowrap
            font-size: .7rem
          .length_num
@@ -73,6 +71,7 @@
      position: relative
      z-index: 1
      display: block
      width: 100%
      background-color: $light-blue
      color: $button-color
      line-height: 1.6rem
@@ -132,13 +131,11 @@
              font-size: .6rem
            .aside-post_title
-              display: -webkit-box
+              @extend .limit-more-line
              overflow: hidden
              padding-left: 10px
              height: 40px
              line-height: 1rem
              -webkit-line-clamp: 2
              -webkit-box-orient: vertical
              &:hover
                color: $light-blue !important
@@ -155,23 +152,20 @@
  .card-archives ul.card-archive-list > .card-archive-list-item,
  .card-categories ul.card-category-list > .card-category-list-item
    a
      display: inline-block
      padding: .15rem 1rem
-    cursor: pointer
+      width: 100%
-    transition: all .5s
+      color: $font-black
      transition: all .4s
      &:hover
        padding: .15rem .85rem
        background-color: $light-blue
    a
      color: $font-black
      span
        display: inline-block
        overflow: hidden
        vertical-align: bottom
        text-overflow: ellipsis
        white-space: nowrap
        &:first-child
          width: 80%
@@ -193,7 +187,30 @@
  .card-categories
    .card-category-list
      &.child
-        padding: 0 0 0 1.2rem
+        padding: 0 0 0 1rem
      > .parent
        .card-category-list
          &-name
            width: 70% !important
          &-count
            width: 18%
            text-align: right
          &-icon
            float: right
            margin-right: -.35rem
            padding: .35rem
            transition: transform .3s
            transform: rotate(0)
            &.expand
              transform: rotate(-90deg)
        if hexo-config('aside.card_categories.expand') == false
          + .child
            display: none
  .card-webinfo
    .webinfo
--- a/source/css/_layout/chat.styl
+++ b/source/css/_layout/chat.styl
@@ -0,0 +1,8 @@
 // chat
 if hexo-config('chat_btn') == true && hexo-config('chatra.enable')
  #chatra:not(.chatra--expanded)
    visibility: hidden !important
    width: 1px !important
    height: 1px !important
    opacity: 0 !important
    pointer-events: none
--- a/source/css/_layout/flink.styl
+++ b/source/css/_layout/flink.styl
@@ -1,12 +1,13 @@
 .flink#article-container
-  .post-cards
+  .flink-desc
-    margin: -10px 10px 0
+    margin: .2rem 0 .5rem
-    .md-links
+  .flink-list
    overflow: auto
    padding: 10px 10px 0
    text-align: center
-      & > .md-links-item
+    & > .flink-list-item
      position: relative
      float: left
      overflow: hidden
@@ -17,9 +18,15 @@
      line-height: 17px
      transform: perspective(1px) translateZ(0)
      @media screen and (max-width: 1100px)
        width: calc(50% - 15px) !important
      @media screen and (max-width: 600px)
        width: calc(100% - 15px) !important
      &:hover
        img
-            transform: rotate(540deg)
+          transform: rotate(360deg)
      &:before
        position: absolute
@@ -55,31 +62,15 @@
        .img-alt
          display: none
-          .md-links-title
+        .flink-item-name
-            overflow: hidden
+          @extend .limit-one-line
          padding: 16px 10px 0 0
          height: 40px
            text-overflow: ellipsis
            white-space: nowrap
          font-weight: bold
          font-size: 20px
-          .md-links-des
+        .flink-item-desc
-            overflow: hidden
+          @extend .limit-one-line
          padding: 16px 10px
          height: 50px
            text-overflow: ellipsis
            white-space: nowrap
          font-size: 13px
@media screen and (max-width: 1100px)
  .flink
    .md-links
      .md-links-item
        width: calc(50% - 15px) !important
@media screen and (max-width: 600px)
  .flink
    .md-links
      .md-links-item
        width: calc(100% - 15px) !important
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -1,8 +1,8 @@
-#nav
+#page-header
  position: relative
  width: 100%
  background-color: $light-blue
-  background-attachment: local
+  background-attachment: scroll
  background-position: center center
  background-size: cover
  background-repeat: no-repeat
@@ -11,6 +11,7 @@
  // index
  &.full_page
    height: $index_top_img_height
    background-attachment: fixed
    #site-info
      position: absolute
@@ -94,11 +95,9 @@
        font-size: 1.5rem
        .posttitle
-          display: -webkit-box
+          @extend .limit-more-line
          overflow: hidden
          line-height: 1.5
          -webkit-line-clamp: 3
          -webkit-box-orient: vertical
      #post-meta
        font-size: 95%
@@ -127,10 +126,17 @@
            color: $light-blue
            text-decoration: underline
-#page-header
+// css hack
 // all browser in ios and safari in all apple device
 _::-webkit-full-page-media,
 _:future,
 :root #page-header.full_page
  background-attachment: scroll !important
 #nav
  position: absolute
  top: 0
-  z-index: 99
+  z-index: 90
  padding: 10px 36px
  width: 100%
  height: 58px
@@ -164,7 +170,7 @@
  &.fixed
    position: fixed
    top: -60px
-    z-index: 101
+    z-index: 91
    background: alpha($white, .8)
    box-shadow: 0 5px 6px -5px alpha($grey, .6)
    transition: transform .2s ease-in-out, opacity .2s ease-in-out
@@ -270,7 +276,7 @@
    cursor: pointer
@media screen and (min-width: $sm)
-  #nav
+  #page-header
    #site_title
      font-size: 2rem
@@ -278,10 +284,10 @@
      font-size: 1.2rem
@media screen and (max-width: $sm)
-  #page-header
+  #nav
    padding: 10px .8rem
-  #nav
+  #page-header
    #site_social_icons
      display: block
--- a/source/css/_layout/mobile-sidebar.styl
+++ b/source/css/_layout/mobile-sidebar.styl
@@ -1,12 +1,10 @@
 #mobile-sidebar
  #menu_mask
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: 102
    display: none
    width: 100%
    height: 100%
    background: alpha($dark-black, .8)
  #mobile-sidebar-menus
@@ -14,9 +12,7 @@
    top: 0
    right: -250px
    z-index: 103
-    display: block
+    overflow: hidden scroll
    overflow: hidden
    overflow-y: scroll
    width: 250px
    height: 100%
    background: #f6f8fa
@@ -46,9 +42,7 @@
        .mobile_data_link
          & > a > div
-            overflow: hidden
+            @extend .limit-one-line
            text-overflow: ellipsis
            white-space: nowrap
          .length_num
            color: $dark-black
@@ -66,20 +60,15 @@
      padding: 0 .5rem 2rem
      .site-page
        @extend .limit-one-line
        position: relative
        z-index: 0
        display: block
        overflow: hidden
        margin: 0
        padding: .3rem 1.5rem
        color: $font-black
        text-overflow: ellipsis
        text-shadow: none
        white-space: nowrap
        font-size: .8rem
        cursor: pointer
-      i
+        i:first-child
          width: 30%
          text-align: left
@@ -92,15 +81,12 @@
      .menus-expand
        position: absolute
        right: 0
-        padding: 6px
+        padding: .4rem
        width: 30px !important
        height: 30px
        transition: all .3s
        transform: rotate(0)
        &.menus-closed
-          transition: all .3s
+          transform: rotate(90deg) !important
          transform: rotate(180deg) !important
      .menus_item_child
        margin: 0
--- a/source/css/_layout/page.styl
+++ b/source/css/_layout/page.styl
@@ -80,27 +80,23 @@
        width: 100%
      & > .article-title
-        display: -webkit-box
+        @extend .limit-more-line
        overflow: hidden
        margin-bottom: .3rem
        color: $font-black
        text-overflow: ellipsis
        word-wrap: break-word
        font-size: 1.2rem
        line-height: 1.4
        transition: all .2s ease-in-out
        -webkit-box-orient: vertical
        -webkit-line-clamp: 2
        &:hover
          color: $light-blue !important
      & > .article-meta-wrap
-        font-size: 95%
+        font-size: 85%
        & > time
          color: $theme-meta-color
-          cursor: pointer
+          cursor: default
        & > .article-meta
          color: $theme-meta-color
@@ -111,12 +107,14 @@
        i
          margin: 0 .2rem 0 0
-        .article-meta__separator,
+        .article-meta__separator
        .article-meta__link
          margin: 0 .3rem
        .article-meta__link
          margin: 0 .2rem
        .fa-angle-right
-          margin: 0 .3rem
+          margin: 0 .2rem
        a.article-meta__categories,
        a.article-meta__tags
@@ -127,13 +125,9 @@
            text-decoration: underline
      & > .content
-        display: -webkit-box
+        @extend .limit-more-line
        overflow: hidden
        margin-top: .3rem
        // height: 85px
        word-break: break-word
        -webkit-line-clamp: 3
        -webkit-box-orient: vertical
 // tags page
 .tag-cloud
@@ -261,13 +255,11 @@
      font-size: .7rem
    &__title
-      display: -webkit-box
+      @extend .limit-more-line
      overflow: hidden
      color: $font-black
      font-size: .75rem
      transition: all .3s
      -webkit-line-clamp: 2
      -webkit-box-orient: vertical
      &:hover
        color: $light-blue !important
--- a/source/css/_layout/pagination.styl
+++ b/source/css/_layout/pagination.styl
@@ -20,8 +20,8 @@
      color: $button-color
      cursor: default
-  img.prev_cover,
+  img.prev-cover,
-  img.next_cover
+  img.next-cover
    position: absolute
    width: 100%
    height: 100%
@@ -38,10 +38,8 @@
  .prev_info,
  .next_info
-    overflow: hidden
+    @extend .limit-one-line
    color: $button-color
    text-overflow: ellipsis
    white-space: nowrap
    font-weight: 500
  .next-post
@@ -68,12 +66,12 @@
      height: 150px
    &:hover
-      img.prev_cover,
+      img.prev-cover,
-      img.next_cover
+      img.next-cover
        opacity: .8
        transform: scale(1.1)
-  &.pagination_post
+  &.pagination-post
    margin: 2rem 0 !important
    background: $dark-black
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -26,19 +26,9 @@ beautify()
      top: calc(50% - .35rem)
      color: $title-prefix-icon-color
      content: $title-prefix-icon
      font-style: normal
      font-variant: normal
      line-height: 1
      transition: all .2s ease-out
-      text-rendering: auto
+      @extend .fontawesomeIcon
      -webkit-font-smoothing: antialiased
      if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
        font-weight: 600
        font-family: 'Font Awesome 5 Free'
      else
        font-weight: normal
        font-family: FontAwesome
    &:hover
      &:before
@@ -77,6 +67,7 @@ beautify()
      padding-left: .5rem
    li
      &:not(.tab)
        position: relative
        margin: .2rem 0
        padding: .1rem .5rem .1rem 1.5rem
@@ -108,7 +99,7 @@ beautify()
        line-height: h
  ul
-    > li
+    > li:not(.tab)
      &:hover
        &:before
          border-color: $theme-button-hover-color
@@ -177,57 +168,6 @@ img
  max-width: 100%
  transition: all .2s
 // highlight
 .highlight-tools
  .code-expand
    position: absolute
    top: 0
    z-index: 1
    padding: 7px 10px
    color: $highlight-foreground
    cursor: pointer
    transition: all .3s
    transform: rotate(0)
    & + .code-lang
      left: 30px
    &.code-closed
      transition: all .3s
      transform: rotate(-90deg) !important
  .code-lang
    position: absolute
    left: 15px
    z-index: 1
    color: $highlight-foreground
    text-transform: capitalize
    font-weight: bold
    font-size: .8rem
    line-height: 1.4rem
    cursor: pointer
  .copy-notice
    position: absolute
    top: 0
    right: 0
    z-index: 1
    background: darken($highlight-background, 5)
    color: $highlight-aqua
    opacity: 0
  .fa-clipboard
    position: absolute
    top: .4rem
    right: 10px
    z-index: 1
    color: $highlight-aqua
    cursor: pointer
    transition: color .2s
    &:hover
      color: darken($highlight-aqua, 20%)
 .katex-wrap
  overflow: auto
@@ -338,6 +278,9 @@ img
  p
    margin: 0 0 .8rem
  iframe
    margin: 0 0 1rem
@media screen and (max-width: 1024px)
  .layout_post
    width: auto
--- a/source/css/_layout/relatedposts.styl
+++ b/source/css/_layout/relatedposts.styl
@@ -8,18 +8,27 @@
  .relatedPosts_item
    position: relative
-    float: left
+    display: inline-block
    overflow: hidden
-    margin: 5px
+    margin: 3px
-    width: calc(100% / 3 - 10px)
+    width: calc(33.333% - 6px)
    height: 200px
    background: $dark-black
    vertical-align: bottom
    &:hover
      .relatedPosts_cover
        opacity: .8
        transform: scale(1.1)
    @media screen and (max-width: 768px)
      margin: 2px
      width: calc(50% - 4px)
      height: 150px
    @media screen and (max-width: 480px)
      width: calc(100% - 4px)
  .relatedPosts_cover
    width: 100%
    height: 100%
@@ -40,22 +49,5 @@
      font-size: 90%
    .relatedPosts_title
-      display: -webkit-box
+      @extend .limit-more-line
      overflow: hidden
      -webkit-line-clamp: 2
      -webkit-box-orient: vertical
  .clear_both
    clear: both
@media screen and (max-width: 768px)
  .relatedPosts
    .relatedPosts_item
      margin: 2px
      width: calc(100% / 2 - 4px)
      height: 150px
@media screen and (max-width: 480px)
  .relatedPosts
    .relatedPosts_item
      width: calc(100% - 4px)
--- a/source/css/_layout/reward.styl
+++ b/source/css/_layout/reward.styl
@@ -1,20 +1,18 @@
 .post-reward
-  margin: 75px auto 0
+  position: relative
  margin-top: 4rem
  width: 100%
  text-align: center
  .reward-button
-    position: relative
+    padding: .5rem 1.2rem
    z-index: 1
    display: inline-block
    width: 100px
    background: $light-blue
    color: $button-color
-    text-align: center
+    transition: all .4s
    line-height: 36px
    cursor: pointer
    &:hover
      box-shadow: inset 9em 0 0 0 $theme-button-hover-color
      .reward-main
        display: block
@@ -22,17 +20,15 @@
      position: absolute
      bottom: 40px
      left: 0
      z-index: 100
      display: none
      margin: 0
      padding: 0 0 15px
      width: 100%
      transition: all .6s
      .reward-all
        display: inline-block
-        margin: 0 0 0 -110px
+        margin: 0
-        padding: 20px 10px 8px
+        padding: 1rem .5rem
        width: 320px
        border-radius: 4px
        background: $reward-pop-up-bg
@@ -61,14 +57,15 @@
          display: inline-block
          padding: 0 8px
          list-style-type: none
          vertical-align: top
          img
            position: relative
            max-width: 130px
            width: 130px
-            border-radius: 3px
+            height: 130px
          .post-qr-code__desc
-            margin: -5px 0
+            padding-top: .4rem
            width: 130px
            color: $reward-pop-up-color
            text-align: center
            word-break: break-all
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -1,7 +1,7 @@
 #rightside
  position: fixed
  right: -38px
-  bottom: 40px
+  bottom: $rightside-bottom
  opacity: 0
  transition: all .5s
@@ -16,9 +16,8 @@
    animation: rightsideOut .3s
  & > div
-    & > i,
+    & > button,
-    & > a,
+    & > a
    & > div
      display: block
      margin-bottom: 2px
      width: 30px
@@ -27,7 +26,6 @@
      color: $button-color
      text-align: center
      font-size: 16px
      line-height: 29px
      cursor: pointer
      &:hover
@@ -40,9 +38,7 @@
  #mobile-toc-button
    display: none
-@media screen and (max-width: $bg)
+    @media screen and (max-width: $bg)
  #rightside
    #mobile-toc-button
      display: block
@keyframes rightsideIn
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -49,11 +49,12 @@ if hexo-config('beautify.enable')
            content: none
 // third-party
 // fireworks
 .fireworks
  position: fixed
  top: 0
  left: 0
-  z-index: 999999
+  z-index: $fireworks-zIndex
  pointer-events: none
 .medium-zoom-image--opened
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -20,7 +20,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
      background-color: alpha($dark-black, .7)
      content: ''
-    #nav,
+    #page-header,
    .layout_post > #post,
    .layout_page > div:first-child:not(.recent-posts)
      background-color: #121212
@@ -40,7 +40,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        color: alpha(#FFFFFF, .8) !important
    // 頭部
-    #nav
+    #page-header
      &:before
        position: absolute
        top: 0
@@ -50,7 +50,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        background-color: alpha($dark-black, .7)
        content: ''
-      & > #page-header
+      & > #nav
        a
          color: alpha(#FFFFFF, .8) !important
@@ -78,26 +78,25 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
          color: alpha(#FFFFFF, .6)
    // 代碼框
-    #article-container pre,
+    #article-container
-    #article-container pre code
+      pre,
-      background-color: lighten(#121212, 2)
+      .highlight:not(.js-file-line-container)
        background-color: lighten(#121212, 2) !important
        color: alpha(#FFFFFF, .6) !important
      figure.highlight
        .line:before
          color: alpha(#FFFFFF, .6) !important
        .gutter pre
          background-color: lighten(#121212, 2) !important
        .hljs
          background-color: lighten(#121212, 2) !important
    .highlight-tools
-      background: lighten(#121212, 3)
+      background: lighten(#121212, 3) !important
-
+      color: #90a4ae !important
    #article-container .highlight:not(.js-file-line-container)
      background-color: lighten(#121212, 2)
      .code pre,
      .gutter pre
        background-color: lighten(#121212, 2)
      table
        .copy-notice
          background: lighten(#121212, 3)
    .copy-notice
      background: lighten(#121212, 3)
    blockquote
      background-color: lighten(#121212, 10)
@@ -138,9 +137,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
    // 右下角按鈕
    #rightside
      & > div
-        & > i,
+        & > button,
-        & > a,
+        & > a
        & > div
          background-color: lighten(#121212, 5)
          color: alpha(#FFFFFF, .6)
@@ -158,17 +156,19 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        &:after
          border-top: 13px solid lighten(#121212, 10) !important
-    .md-links-item:before,
+    .flink-list-item:before,
-    .card-category-list-item:hover,
+    .card-category-list-item a:hover,
-    .card-archive-list-item:hover,
+    .card-archive-list-item a:hover,
    #bookmark-it
      background-color: lighten(#121212, 10) !important
    img,
    iframe:not(.utterances-frame),
    .gist
      filter: brightness(.7)
    #article-container iframe
      filter: brightness(.7)
    // 側邊欄
    #aside_content
      .card-widget
@@ -207,11 +207,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
    .recent-posts .article-meta,
    .recent-posts a,
    .post-reward .reward-button,
-    .fa-clipboard,
+    .copy-button,
    .gutter pre,
    #bookmark-it,
    .copy-notice,
-    .md-links-item a,
+    .flink-list-item a,
    .category-list-link,
    .relatedPosts_date,
    .prev-post .label,
@@ -246,6 +246,24 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        a
          color: alpha(#FFFFFF, .6) !important
    // error 404
    #error-wrap
      .error-content
        background: #121212
        .error-img
          filter: brightness(.7)
        .error-info
          .error_title
            color: alpha(#FFFFFF, .8)
          .error_subtitle
            color: alpha(#FFFFFF, .6)
          a
            background: #2c2c2c
    // note
    if hexo-config('note.style') == 'modern'
      .note
@@ -257,8 +275,33 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        color: #4c4948
    // hide-tags
-    .hide-button
+    .hide-button,
-      filter: brightness(.7)
+    .btn-beautify
      filter: brightness(.8)
    // tabs
    #article-container
      .tabs
        border: 2px solid #2c2c2c
        border-top: none
        > .nav-tabs
          background: #2c2c2c
          a
            border-top: 2px solid #2c2c2c
            background: #2c2c2c
            color: alpha(#FFFFFF, .6)
          .tab:not(.active)
            a
              &:hover
                border-top: 2px solid lighten(#121212, 20)
                background: lighten(#121212, 20)
          .active
            a
              background: #121212
    // 第三方
    // 插件 hexo-blog-encrypt
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -1,11 +1,11 @@
-if hexo-config('readmode') && hexo-config('readmode.enable')
+if hexo-config('readmode')
  [data-theme='light']
    $light-redmode-bg = #fff
    .read-mode
      background: $light-redmode-bg
-      #nav.post-bg
+      #page-header.post-bg
        a
          color: $font-black !important
@@ -14,6 +14,16 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
        .highlight:not(.js-file-line-container)
          background: #f7f7f7 !important
          *
            color: $font-black !important
        figure.highlight
          .line:before
            color: $font-black !important
          .hljs
            background: #f7f7f7 !important
        code
          color: #4c4948
@@ -42,10 +52,17 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
        .hide-toggle
          border: 1px solid darken(#d6dbdf, 10) !important
-        .hide-button
+        .hide-button,
        .btn-beautify
          background: $light-redmode-bg !important
          color: #4c4948 !important
        .btn-beautify
          border: 1px solid darken(#d6dbdf, 10)
          &.button--animated:before
            background: $light-redmode-bg
        .hide-inline,
        .hide-block
          & >.hide-button
@@ -58,9 +75,10 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
          border: 2px solid #eee
          background-color: $light-redmode-bg
-      #rightside i:not(.fa-cog),
+        .tabs
-      #rightside a,
+          border: 1px solid darken(#d6dbdf, 10)
-      #rightside #rightside_config
+
      #rightside button
        background: darken(#d6dbdf, 20) !important
  [data-theme='dark']
@@ -70,6 +88,11 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
      background: $dark-readmode-bg
      #article-container
        pre,
        .highlight:not(.js-file-line-container)
          *
            color: rgba(255, 255, 255, .6) !important
        code
          color: rgba(255, 255, 255, .6)
@@ -91,11 +114,18 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
        .hide-toggle
          border: 1px solid rgba(255, 255, 255, .6) !important
-        .hide-button
+        .hide-button,
        .btn-beautify
          background: $dark-readmode-bg !important
          filter: none
          color: rgba(255, 255, 255, .6) !important
        .btn-beautify
          border: 1px solid rgba(255, 255, 255, .6)
          &.button--animated:before
            background: $dark-readmode-bg !important
        .hide-inline,
        .hide-block
          & >.hide-button
@@ -110,11 +140,20 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
          background-color: $dark-readmode-bg
          color: rgba(255, 255, 255, .6)
        .tabs
          border: 2px solid rgba(255, 255, 255, .6)
          > .nav-tabs
            filter: none
            a
              color: rgba(255, 255, 255, .6)
  .read-mode
    #body-wrap
      padding-left: 0 !important
-    #nav.post-bg
+    #page-header.post-bg
      background-color: transparent
      background-image: none !important
@@ -137,25 +176,38 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
        &:hover
          box-shadow: none
-    .highlight
+    figure.highlight
      border-radius: 0 !important
      box-shadow: none !important
      & > :not(.highlight-tools)
        display: block !important
    & > canvas
      display: none !important
-    .code-area-wrap > .highlight-tools,
+    .highlight-tools,
    #footer,
    #post > *:not(:first-child),
    #to_comment,
    #sidebar,
    #toggle-sidebar,
    #mobile-toc-button,
-    #page-header
+    #nav
      display: none !important
    #web_bg
      background: none
    if !hexo-config('chat_btn')
      #chatra,
      #tidio-chat-code,
      #tidio-chat,
      #daodream-container,
      .gitter-chat-embed,
      .gitter-open-chat-button
        display: none !important
    #article-container
      h1,
      h2,
@@ -167,3 +219,33 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
        &:before
          content: ''
        &:hover
          padding: 0
      ul,
      li,
      ol
        &:hover:before
          transform: none !important
      .tabs
        > .nav-tabs
          background: transparent
          > .tab
            border-bottom: 0
            a
              border-top: none !important
              background: transparent
              &:hover
                background: none !important
            &.active
              a
                text-decoration: underline
        > .tab-contents .tab-item-content.active
          animation: none
--- a/source/css/_search/index.styl
+++ b/source/css/_search/index.styl
@@ -50,5 +50,5 @@
    height: 100%
  .search-result-list
    max-height: 75vh !important
    padding-bottom: 2rem
    max-height: 75vh !important
--- a/source/css/_tags/button.styl
+++ b/source/css/_tags/button.styl
@@ -0,0 +1,60 @@
 #article-container
  .btn-center
    margin: 0 0 1rem
    text-align: center
  .btn-beautify
    position: relative
    z-index: 1
    display: inline-block
    margin: 0 .2rem .3rem
    padding: 0 1rem
    background-color: $btn-default-color
    color: $btn-color
    line-height: 2
    &:not(.block) + .btn-beautify:not(.block)
      margin: 0 .2rem 1rem
    &.block
      display: block
      margin: 0 0 1rem
      width: fit-content
      width: -moz-fit-content
      &.center
        margin: 0 auto 1rem
      &.right
        margin: 0 0 1rem auto
    &.larger
      padding: .3rem 1.3rem
    &:hover
      text-decoration: none
    for $type in $btn-types
      &.{$type}
        background-color: lookup('$btn-' + $type + '-color')
    &.outline
      border: 1px solid transparent
      border-color: $btn-default-color
      background-color: transparent
      color: $btn-default-color
      transition: all .3s
      &.button--animated:before
        background: $btn-default-color
      &:hover
        color: white !important
      for $type in $btn-types
        &.{$type}
          border-color: lookup('$btn-' + $type + '-color')
          color: lookup('$btn-' + $type + '-color')
          &.button--animated:before
            background: lookup('$btn-' + $type + '-color')
--- a/source/css/_tags/gallery.styl
+++ b/source/css/_tags/gallery.styl
@@ -57,8 +57,7 @@ figure.gallery-group
      opacity: 0
  p
-    display: -webkit-box
+    @extend .limit-more-line
    overflow: hidden
    margin: 0
    padding: .4rem 0 0
    letter-spacing: 1px
@@ -68,19 +67,16 @@ figure.gallery-group
    transition: opacity .35s, transform .35s
    transform: translate3d(100%, 0, 0)
    -webkit-line-clamp: 4
    -webkit-box-orient: vertical
  .gallery-group-name
    @extend .limit-more-line
    position: relative
    display: -webkit-box
    overflow: hidden
    margin: 0
    padding: .4rem 0
    font-weight: bold
    font-size: 1.2rem
    line-height: 1.5
    -webkit-line-clamp: 2
    -webkit-box-orient: vertical
    &:after
      position: absolute
--- a/source/css/_tags/hexo.styl
+++ b/source/css/_tags/hexo.styl
@@ -0,0 +1,30 @@
 // pullquote
 blockquote
  &.pullquote
    position: relative
    max-width: 45%
    font-size: 110%
    &.left
      float: left
      margin: 1em .5em 0 0
    &.right
      float: right
      margin: 1em 0 0 .5rem
 // hexo tag video
 .video-container
  position: relative
  overflow: hidden
  margin-bottom: .8rem
  padding-top: 56.25%
  height: 0
  iframe
    position: absolute
    top: 0
    left: 0
    margin-top: 0
    width: 100%
    height: 100%
--- a/source/css/_tags/hide.styl
+++ b/source/css/_tags/hide.styl
@@ -1,18 +1,13 @@
 // tag-hide
 .hide-inline,
 .hide-block
-  & > a.hide-button
+  & > .hide-button
    position: relative
    z-index: 1
    display: inline-block
-    padding: 0 1rem
+    padding: .3rem 1rem
    background: $tag-hide-bg
    color: $white !important
    text-align: center
    cursor: pointer
    &:hover
      text-decoration: none !important
    &.open
      display: none
--- a/source/css/_tags/note.styl
+++ b/source/css/_tags/note.styl
@@ -57,231 +57,41 @@
        top: 13px
        left: 15px
        font-size: larger
        @extend .fontawesomeIcon
-        if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
+  for $type in $note-types
-          font-weight: 600
+    &.{$type}
          font-family: 'Font Awesome 5 Free'
        else
          font-family: 'FontAwesome'
  &.default
      if ($note-style == 'flat')
-      background-color: $note-default-bg
+        background: lookup('$note-' + $type + '-bg')
      if ($note-style == 'modern')
-      border-color: $note-modern-default-border
+        border-color: lookup('$note-modern-' + $type + '-border')
-      background-color: $note-modern-default-bg
+        background: lookup('$note-modern-' + $type + '-bg')
-      color: $note-modern-default-text
+        color: lookup('$note-modern-' + $type + '-text')
        a,
        span.exturl
          &:not(.btn)
-          border-bottom: 1px solid $note-modern-default-text
+            border-bottom: 1px solid lookup('$note-modern-' + $type + '-text')
-          color: $note-modern-default-text
+            color: lookup('$note-modern-' + $type + '-text')
            &:hover
-            border-bottom: 1px solid $note-modern-default-hover
+              border-bottom: 1px solid lookup('$note-modern-' + $type + '-hover')
-            color: $note-modern-default-hover
+              color: lookup('$note-modern-' + $type + '-hover')
      if ($note-style != 'modern')
-      border-left-color: $note-default-border
+        border-left-color: lookup('$note-' + $type + '-border')
        h2,
        h3,
        h4,
        h5,
        h6
-        color: $note-default-text
+          color: lookup('$note-' + $type + '-text')
      if $note-icons
-      &:not(.no-icon)
+        &:not(.no-icon)::before
-        &::before
+          content: lookup('$note-' + $type + '-icon')
          content: $note-default-icon
          if ($note-style != 'modern')
-            color: $note-default-text
+            color: lookup('$note-' + $type + '-text')
  &.primary
    if ($note-style == 'flat')
      background-color: $note-primary-bg
    if ($note-style == 'modern')
      border-color: $note-modern-primary-border
      background-color: $note-modern-primary-bg
      color: $note-modern-primary-text
      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-primary-text
          color: $note-modern-primary-text
          &:hover
            border-bottom: 1px solid $note-modern-primary-hover
            color: $note-modern-primary-hover
    if ($note-style != 'modern')
      border-left-color: $note-primary-border
      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-primary-text
    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-primary-icon
          if ($note-style != 'modern')
            color: $note-primary-text
  &.info
    if ($note-style == 'flat')
      background-color: $note-info-bg
    if ($note-style == 'modern')
      border-color: $note-modern-info-border
      background-color: $note-modern-info-bg
      color: $note-modern-info-text
      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-info-text
          color: $note-modern-info-text
          &:hover
            border-bottom: 1px solid $note-modern-info-hover
            color: $note-modern-info-hover
    if ($note-style != 'modern')
      border-left-color: $note-info-border
      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-info-text
    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-info-icon
          if ($note-style != 'modern')
            color: $note-info-text
  &.success
    if ($note-style == 'flat')
      background-color: $note-success-bg
    if ($note-style == 'modern')
      border-color: $note-modern-success-border
      background-color: $note-modern-success-bg
      color: $note-modern-success-text
      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-success-text
          color: $note-modern-success-text
          &:hover
            border-bottom: 1px solid $note-modern-success-hover
            color: $note-modern-success-hover
    if ($note-style != 'modern')
      border-left-color: $note-success-border
      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-success-text
    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-success-icon
          if ($note-style != 'modern')
            color: $note-success-text
  &.warning
    if ($note-style == 'flat')
      background-color: $note-warning-bg
    if ($note-style == 'modern')
      border-color: $note-modern-warning-border
      background-color: $note-modern-warning-bg
      color: $note-modern-warning-text
      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-warning-text
          color: $note-modern-warning-text
          &:hover
            border-bottom: 1px solid $note-modern-warning-hover
            color: $note-modern-warning-hover
    if ($note-style != 'modern')
      border-left-color: $note-warning-border
      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-warning-text
    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-warning-icon
          if ($note-style != 'modern')
            color: $note-warning-text
  &.danger
    if ($note-style == 'flat')
      background-color: $note-danger-bg
    if ($note-style == 'modern')
      border-color: $note-modern-danger-border
      background-color: $note-modern-danger-bg
      color: $note-modern-danger-text
      a,
      span.exturl
        &:not(.btn)
          border-bottom: 1px solid $note-modern-danger-text
          color: $note-modern-danger-text
          &:hover
            border-bottom: 1px solid $note-modern-danger-hover
            color: $note-modern-danger-hover
    if ($note-style != 'modern')
      border-left-color: $note-danger-border
      h2,
      h3,
      h4,
      h5,
      h6
        color: $note-danger-text
    if $note-icons
      &:not(.no-icon)
        &::before
          content: $note-danger-icon
          if ($note-style != 'modern')
            color: $note-danger-text
--- a/source/css/_tags/tabs.styl
+++ b/source/css/_tags/tabs.styl
@@ -0,0 +1,71 @@
 #article-container
  .tabs
    position: relative
    margin: 0 0 1rem
    border: 1px solid $tab-border-color
    border-top: none
    > .nav-tabs
      display: flex
      flex-wrap: wrap
      margin: 0
      padding: 0
      background: $tab-botton-bg
      > .tab
        margin: 0
        padding: 0
        list-style: none
        @media screen and (max-width: 768px)
          flex-grow: 1
        a
          display: block
          padding: .5rem .8rem
          outline: 0
          border-top: 2px solid $tab-border-color
          background: $tab-botton-bg
          color: $font-color
          text-align: center
          transition: all .4s
          &:hover
            border-top: 2px solid $tab-button-hover-bg
            background: $tab-button-hover-bg
            text-decoration: none
          i
            width: 1.5em
        &.active
          a
            border-top: 2px solid $tab-active-border-color
            background: $card-bg
            cursor: default
    > .tab-contents
      .tab-item-content
        position: relative
        display: none
        padding: 1.8rem 1.2rem
        @media screen and (max-width: 768px)
          padding: 1.2rem .7rem
        &.active
          display: block
          animation: tabshow .5s
    .tab-to-top
      position: relative
      display: block
      margin: 0 0 0 auto
      color: $tab-to-top-color
@keyframes tabshow
  0%
    transform: translateY(15px)
  100%
    transform: translateY(0)
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -2,7 +2,7 @@
@import '_third-party/normalize.min.css'
 // project
@import 'var'
-@import '_global'
+@import '_global/*'
@import '_highlight/highlight'
@import '_layout/*'
@import '_tags/*'
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -3,7 +3,6 @@ $bright-blue = #49B1F5
 $strong-cyan = #00c4b6
 $light-orange = #FF7242
 $light-red = #F47466
 $themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
 $theme-color = $themeColorEnable ? convert(hexo-config('theme_color.main')) : $bright-blue
 $theme-paginator-color = $themeColorEnable ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
@@ -14,23 +13,20 @@ $theme-hr-color = $themeColorEnable ? convert(hexo-config('theme_color.hr_color'
 $code-foreground = $themeColorEnable ? convert(hexo-config('theme_color.code_foreground')) : $light-red
 $code-background = $themeColorEnable ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
 $theme-toc-color = $themeColorEnable ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
 // font
-$fontEnable = hexo-config('font') && hexo-config('font.enable')
+$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
-$font-family = $fontEnable ? convert(hexo-config('font.font-family')) : Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
-$code-font = $fontEnable ? convert(hexo-config('font.code-font')) : consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
+$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
-$site-name-font = convert(hexo-config('blog_title_font.font-family')) || '"Titillium Web",Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
+$code-font = hexo-config('font.code-font') ? unquote(hexo-config('font.code-font')) : $dafault-code-font
-
+$site-name-font = hexo-config('blog_title_font.font-family') ? unquote(hexo-config('blog_title_font.font-family')) : $font-family
-//hr
+// hr
-$hrEnable = hexo-config('hr') && hexo-config('hr.enable')
+$hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable')
-$hr-icon = $hrEnable ? hexo-config('hr.icon') : '\f0c4'
+$hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon') : '\f0c4'
-$hr-icon-top = $hrEnable ? convert(hexo-config('hr.icon-top')) : -10px
+$hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.icon-top')) : -10px
-
+// page beatutify
 //page beatutify 
 $beautifyEnable = hexo-config('beautify.enable')
 $title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
 $title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
 // Global Variables
 $font-size = 14px
 $font-color = #1F2D3D
@@ -53,11 +49,10 @@ $whitesmoke = #f5f5f5
 $font-black = #4C4948
 $card-bg = $white
 // code
 $code-font-family = $font-family
 $line-height-code-block = 20px
 $blockquote-color = #6a737d
 $blockquote-padding-color = $themeColorEnable ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
-$blockquote-background-color = $themeColorEnable ? alpha(convert(hexo-config('theme_color.blockquote_background_color')),.1) : alpha($blockquote-padding-color,.1)
+$blockquote-background-color = $themeColorEnable ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)
 // page
 $body-bg = #fff
 $a-link-color = #99a9bf
@@ -80,17 +75,20 @@ $reward-pop-up-color = #858585
 $search-bg = #f6f8fa
 $search-color = $theme-color
 $search-keyword-highlight = #F47466
-//gallery
+// gallery
 $gallery-color = #fff
 // tag-hide
 $tag-hide-bg = $theme-color
 $tag-hide-toggle-bg = #f0f0f0
-//preloader
+// preloader
 $preloader-bg = #37474f
-
+// rightside
-// Note colors
+$rightside-bottom = hexo-config('rightside-bottom') is a 'unit' ? unit(hexo-config('rightside-bottom'), px) : 40px
-// --------------------------------------------------
+// fireworks
 $fireworks-zIndex = hexo-config('fireworks.zIndex') ? hexo-config('fireworks.zIndex') : 99999
 // Tag Plugins - Note
 hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0)
 $note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger'
 // Default
 $note-default-border = #777
 $note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg)
@@ -145,3 +143,19 @@ $note-modern-danger-border = #ebcdd2
 $note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
 $note-modern-danger-text = #a94442
 $note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
 // Tag Plugins - Button
 $btn-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
 $btn-color = #fff
 $btn-default-color = #777
 $btn-blue-color = #428bca
 $btn-pink-color = #FF69B4
 $btn-red-color = #FF0000
 $btn-orange-color = #FF8C00
 $btn-purple-color = #6f42c1
 $btn-green-color = #5cb85c
 // Tag Plugins - Tab
 $tab-border-color = #f0f0f0
 $tab-botton-bg = #f0f0f0
 $tab-button-hover-bg = darken($tab-border-color, 8)
 $tab-active-border-color = $theme-color
 $tab-to-top-color = #99a9bf
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,6 +1,6 @@
 $(function () {
  const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
-  const $pageHead = $('#page-header')
+  const $nav = $('#nav')
  const $rightside = $('#rightside')
  const $body = $('body')
@@ -16,9 +16,9 @@ $(function () {
  function isAdjust (n) {
    var t
    if (n === 1) {
-      t = blogNameWidth + menusWidth > $pageHead.width() - sidebarWidth - 20
+      t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 20
    } else if (n === 2) {
-      t = blogNameWidth + menusWidth > $pageHead.width() - 20
+      t = blogNameWidth + menusWidth > $nav.width() - 20
    }
    if (t) headerAdjust()
@@ -26,15 +26,15 @@ $(function () {
  }
  function headerAdjust () {
-    $pageHead.find('.toggle-menu').addClass('is-visible-inline')
+    $nav.find('.toggle-menu').addClass('is-visible-inline')
-    $pageHead.find('.menus_items').addClass('is_invisible')
+    $nav.find('.menus_items').addClass('is-invisible')
-    $pageHead.find('#search_button span').addClass('is_invisible')
+    $nav.find('#search_button span').addClass('is-invisible')
  }
  function headerAdjustBack () {
-    $pageHead.find('.toggle-menu').removeClass('is-visible-inline')
+    $nav.find('.toggle-menu').removeClass('is-visible-inline')
-    $pageHead.find('.menus_items').removeClass('is_invisible')
+    $nav.find('.menus_items').removeClass('is-invisible')
-    $pageHead.find('#search_button span').removeClass('is_invisible')
+    $nav.find('#search_button span').removeClass('is-invisible')
  }
  // 初始化header
@@ -44,26 +44,16 @@ $(function () {
  }
  initAjust()
-  $('#page-header').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
+  $('#nav').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
  $(window).on('resize', function () {
-    if ($('#sidebar').hasClass('tocOpenPc') && $pageHead.hasClass('fixed')) {
+    if ($('#sidebar').hasClass('tocOpenPc') && $nav.hasClass('fixed')) {
      isAdjust(1)
    } else {
      initAjust()
    }
  })
  /**
   * windows時 設置主頁top_img 為 fixed
   */
  if (GLOBAL_CONFIG_SITE.isHome) {
    var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
    if (!isSafari && isDesktop()) {
      $('#nav').css('background-attachment', 'fixed')
    }
  }
  /**
   * 進入post頁sidebar處理
   */
@@ -117,7 +107,7 @@ $(function () {
      opacity: '1'
    })
    var isAdjustTimeCount = window.setInterval(function () {
-      if ($pageHead.hasClass('fixed')) isAdjust(1)
+      if ($nav.hasClass('fixed')) isAdjust(1)
      else isAdjust(2)
    }, 100)
    setTimeout(function () {
@@ -221,7 +211,7 @@ $(function () {
   * 首頁top_img底下的箭頭
   */
  $('#scroll_down').on('click', function () {
-    scrollTo('#content-inner')
+    scrollToDest('#content-inner')
  })
  /**
@@ -254,29 +244,29 @@ $(function () {
  if ($figureHighlight.length) {
    const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
    const isHighlightLang = GLOBAL_CONFIG.highlightLang
-    const isHighlightShrink = GLOBAL_CONFIG.highlightShrink
+    const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
-    if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') {
+    if (isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined) {
-      $figureHighlight.wrap('<div class="code-area-wrap"></div>').before('<div class="highlight-tools"></div>')
+      $figureHighlight.prepend('<div class="highlight-tools"></div>')
    }
    /**
   * 代碼收縮
   */
    const $highlightTools = $('.highlight-tools')
-    if (isHighlightShrink === 'true') {
+    if (isHighlightShrink === true) {
-      $highlightTools.append('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
+      $highlightTools.append('<i class="fas fa-angle-down code-expand code-closed"></i>')
-    } else if (isHighlightShrink === 'false') {
+    } else if (isHighlightShrink === false) {
-      $highlightTools.append('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
+      $highlightTools.append('<i class="fas fa-angle-down code-expand"></i>')
    }
    $(document).on('click', '.highlight-tools >.code-expand', function () {
-      var $table = $(this).parent().next()
+      var $hideItem = $(this).parent().nextAll()
      if ($(this).hasClass('code-closed')) {
-        $table.css('display', 'block')
+        $hideItem.css('display', 'block')
        $(this).removeClass('code-closed')
      } else {
-        $table.css('display', 'none')
+        $hideItem.css('display', 'none')
        $(this).addClass('code-closed')
      }
    })
@@ -289,15 +279,16 @@ $(function () {
      $figureHighlight.each(function () {
        langNameIndex = langName = $(this).attr('class').split(' ')[1]
        if (langNameIndex === 'plain') langName = 'Code'
-        $(this).prev().append('<div class="code-lang">' + langName + '</div>')
+        $(this).find('.highlight-tools').append('<div class="code-lang">' + langName + '</div>')
      })
    }
    /**
    * 代碼copy
    * copy function
    */
    if (isHighlightCopy) {
-      $highlightTools.append('<div class="copy-notice"></div><i class="fa fa-clipboard" aria-hidden="true"></i>')
+      $highlightTools.append('<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>')
      var copy = function (text, ctx) {
        if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
          try {
@@ -308,13 +299,11 @@ $(function () {
              $(ctx).prev('.copy-notice')
                .text(GLOBAL_CONFIG.copy.success)
                .animate({
-                  opacity: 1,
+                  opacity: 1
                  right: 30
                }, 450, function () {
                  setTimeout(function () {
                    $(ctx).prev('.copy-notice').animate({
-                      opacity: 0,
+                      opacity: 0
                      right: 0
                    }, 650)
                  }, 400)
                })
@@ -326,13 +315,11 @@ $(function () {
              $(ctx).prev('.copy-notice')
                .text(GLOBAL_CONFIG.copy.error)
                .animate({
-                  opacity: 1,
+                  opacity: 1
                  right: 30
                }, 650, function () {
                  setTimeout(function () {
                    $(ctx).prev('.copy-notice').animate({
-                      opacity: 0,
+                      opacity: 0
                      right: 0
                    }, 650)
                  }, 400)
                })
@@ -349,15 +336,18 @@ $(function () {
      }
      // click events
-      $(document).on('click', '.highlight-tools>.fa-clipboard', function () {
+      $(document).on('click', '.highlight-tools>.copy-button', function () {
        var $buttonParent = $(this).parents('figure.highlight')
        $buttonParent.addClass('copy-true')
        var selection = window.getSelection()
        var range = document.createRange()
-        range.selectNodeContents($(this).parent().next().find('.code pre')[0])
+        range.selectNodeContents($buttonParent.find('table .code pre')[0])
        selection.removeAllRanges()
        selection.addRange(range)
        var text = selection.toString()
        copy(text, this)
        selection.removeAllRanges()
        $buttonParent.removeClass('copy-true')
      })
    }
  }
@@ -392,8 +382,8 @@ $(function () {
        $(o).wrap('<div></div>')
      })
    }
-    $('head').append('<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css">')
+    $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.justifiedGallery.css}">`)
-    loadScript('https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js', function () {
+    loadScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () {
      initJustifiedGallery($justifiedGallery)
    })
@@ -419,13 +409,7 @@ $(function () {
    var images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
    images.each(function (i, o) {
      var lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src')
-      $(o).wrap(
+      $(o).wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${$(o).attr('alt')}" class="fancybox"></a>`)
        '<a href="' +
        lazyloadSrc +
        '" data-fancybox="group" data-caption="' +
        $(o).attr('alt') +
        '" class="fancybox"></a>'
      )
    })
    $().fancybox({
@@ -445,37 +429,41 @@ $(function () {
    })
  }
  /**
   * lazyload
   */
  if (GLOBAL_CONFIG.islazyload) {
    window.lozad('img').observe()
  }
  /**
   * 滾動處理
   */
  var initTop = 0
-  $(window).scroll(function (event) {
+  var isChatShow = true
  var isChatBtnHide = typeof chatBtnHide === 'function'
  var isChatBtnShow = typeof chatBtnShow === 'function'
  $(window).scroll(throttle(function (event) {
    var currentTop = $(this).scrollTop()
-    var isUp = scrollDirection(currentTop)
+    var isDown = scrollDirection(currentTop)
    if (currentTop > 56) {
-      if (isUp) {
+      if (isDown) {
-        if ($pageHead.hasClass('visible')) $pageHead.removeClass('visible')
+        if ($nav.hasClass('visible')) $nav.removeClass('visible')
-      } else {
+        if (isChatBtnShow && isChatShow === true) {
-        if (!$pageHead.hasClass('visible')) $pageHead.addClass('visible')
+          chatBtnHide()
          isChatShow = false
        }
-      $pageHead.addClass('fixed')
+      } else {
        if (!$nav.hasClass('visible')) $nav.addClass('visible')
        if (isChatBtnHide && isChatShow === false) {
          window.chatBtnShow()
          isChatShow = true
        }
      }
      $nav.addClass('fixed')
      if ($rightside.css('opacity') === '0') {
        $rightside.css({ opacity: '1', transform: 'translateX(-38px)' })
      }
    } else {
      if (currentTop === 0) {
-        $pageHead.removeClass('fixed').removeClass('visible')
+        $nav.removeClass('fixed').removeClass('visible')
      }
      $rightside.css({ opacity: '', transform: '' })
    }
-  })
+  }, 200))
  // find the scroll direction
  function scrollDirection (currentTop) {
@@ -488,7 +476,7 @@ $(function () {
   * 點擊滾回頂部
   */
  $('#go-up').on('click', function () {
-    scrollTo('body')
+    scrollToDest('body')
  })
  /**
@@ -512,7 +500,7 @@ $(function () {
        closeMobileSidebar('toc')
      } else {
        e.preventDefault()
-        scrollTo($(this).attr('href'))
+        scrollToDest($(this).attr('href'))
      }
    })
@@ -643,7 +631,7 @@ $(function () {
  })
  $(window).on('touchmove', function (e) {
-    var $menusChild = $('#page-header .menus_item_child')
+    var $menusChild = $('#nav .menus_item_child')
    if ($menusChild.is(':visible')) {
      $menusChild.css('display', 'none')
    }
@@ -689,31 +677,16 @@ $(function () {
  /**
   * Darkmode
   */
  var isFontAwesomeV5 = GLOBAL_CONFIG.isFontAwesomeV5
  var $darkModeButtom = $('#darkmode')
  if (typeof autoChangeMode !== 'undefined') {
    document.documentElement.getAttribute('data-theme') === 'dark' ? changeLightIcon() : changeDarkIcon()
  }
  function changeLightIcon () {
    isFontAwesomeV5 ? $darkModeButtom.removeClass('fa-moon').addClass('fa-sun') : $darkModeButtom.removeClass('fa-moon-o').addClass('fa-sun-o')
  }
  function changeDarkIcon () {
    isFontAwesomeV5 ? $darkModeButtom.removeClass('fa-sun').addClass('fa-moon') : $darkModeButtom.removeClass('fa-sun-o').addClass('fa-moon-o')
  }
  function switchReadMode () {
    var nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
    if (nowMode === 'light') {
      changeLightIcon()
      activateDarkMode()
-      Cookies.set('theme', 'dark', { expires: 2 })
+      Cookies.set('theme', 'dark', 2)
      if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    } else {
      changeDarkIcon()
      activateLightMode()
-      Cookies.set('theme', 'light', { expires: 2 })
+      Cookies.set('theme', 'light', 2)
      if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
    }
  }
@@ -729,7 +702,7 @@ $(function () {
  if (GLOBAL_CONFIG.runtime) {
    // get user config
    var $runtimeCount = $('#webinfo-runtime-count')
-    var startDate = $runtimeCount.attr('start_date')
+    var startDate = $runtimeCount.attr('publish_date')
    var showDateTime = function () {
      var BirthDay = new Date(startDate)
      var today = new Date()
@@ -743,6 +716,15 @@ $(function () {
    interval = setInterval(showDateTime, 10000)
  }
  /**
   * table overflow
   */
  var $table = $('#article-container table').not($('figure.highlight > table'))
  $table.each(function () {
    $(this).wrap('<div class="table-wrap"></div>')
  })
  /**
   * 百度推送
   */
@@ -766,7 +748,6 @@ $(function () {
  var $hideInline = $('.hide-button')
  if ($hideInline.length) {
    $hideInline.on('click', function (e) {
      e.preventDefault()
      var $this = $(this)
      var $hideContent = $(this).next('.hide-content')
      $this.toggleClass('open')
@@ -778,4 +759,34 @@ $(function () {
      }
    })
  }
  var $tab = $('#article-container .tabs')
  $tab.find('.tab a').on('click', function (e) {
    e.preventDefault()
    var $this = $(this)
    var $tabItem = $this.parent()
    if (!$tabItem.hasClass('active')) {
      var $tacbContent = $this.parents('.nav-tabs').next()
      $tabItem.siblings('.active').removeClass('active')
      $tabItem.addClass('active')
      var tabId = $this.attr('href')
      $tacbContent.find('> .tab-item-content').removeClass('active')
      $tacbContent.find(`> ${tabId}`).addClass('active')
      var $isTabJustifiedGallery = $tacbContent.find(tabId).find('.justified-gallery')
      if (isJustifiedGallery && $isTabJustifiedGallery.length > 0) {
        initJustifiedGallery($isTabJustifiedGallery)
      }
    }
  })
  var $cardCategory = $('.card-category-list-item.parent a')
  $cardCategory.on('click', function (e) {
    if ($(event.target).hasClass('card-category-list-icon')) {
      var $this = $(this)
      $this.find('.card-category-list-icon').toggleClass('expand')
      $this.parent().next().toggle()
      return false
    }
  })
 })
--- a/source/js/search/algolia.js
+++ b/source/js/search/algolia.js
@@ -100,7 +100,7 @@ $(function () {
          return (
            '<hr>' +
            stats +
-            '<span class="algolia-logo pull_right">' +
+            '<span class="algolia-logo pull-right">' +
            '  <img src="' + GLOBAL_CONFIG.root + 'img/algolia.svg" alt="Algolia" />' +
            '</span>'
          )
@@ -115,10 +115,10 @@ $(function () {
      scrollTo: false,
      showFirstLast: false,
      labels: {
-        first: '<i class="fa fa-angle-double-left"></i>',
+        first: '<i class="fas fa-angle-double-left"></i>',
-        last: '<i class="fa fa-angle-double-right"></i>',
+        last: '<i class="fas fa-angle-double-right"></i>',
-        previous: '<i class="fa fa-angle-left"></i>',
+        previous: '<i class="fas fa-angle-left"></i>',
-        next: '<i class="fa fa-angle-right"></i>'
+        next: '<i class="fas fa-angle-right"></i>'
      },
      cssClasses: {
        root: 'pagination',
--- a/source/js/tw_cn.js
+++ b/source/js/tw_cn.js
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -76,10 +76,10 @@ function isDesktop () {
  return !this.isMobile()
 }
-function scrollTo (name) {
+function scrollToDest (name, offset = 0) {
  var scrollOffset = $(name).offset()
  $('body,html').animate({
-    scrollTop: scrollOffset.top
+    scrollTop: scrollOffset.top - offset
  })
 };
@@ -117,6 +117,33 @@ function snackbarShow (text, showAction, duration) {
  })
 }
 var Cookies = {
  get: function (name) {
    const value = `; ${document.cookie}`
    const parts = value.split(`; ${name}=`)
    if (parts.length === 2) return parts.pop().split(';').shift()
  },
  set: function (name, value, days) {
    var expires = ''
    if (days) {
      var date = new Date()
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
      expires = '; expires=' + date.toUTCString()
    }
    document.cookie = name + '=' + (value || '') + expires + '; path=/'
  }
 }
 /**
 * lazyload
 */
 if (GLOBAL_CONFIG.islazyload) {
  window.lazyLoadOptions = {
    elements_selector: 'img',
    threshold: 0
  }
 }
 window.debounce = debounce
 window.throttle = throttle