Breaking Change

1. 不再支持hexo 4.0.0以下版本
2. 添加hexo fragment_cache,加快生成速度
3. 完善V5圖標顯示，不再需要同時加載V4和v5圖標
4. 去除cheerio依賴
5. 整合豆瓣配置，增加配置遊戲，圖書頁面top_img,可設置是否設置meta,解決部分瀏覽器無法顯示圖片問題
6. 友情鏈接除列表外可自定義內容
7. 可設置主頁標題距離頂部距離
8. 側邊欄可隱藏,可設置手機頁面是否隱藏
9. 增加disqusjs和utterances 兩個評論
10. 主頁文章增加tags和更新日期顯示，可以配置post_meta
11. 首頁subtitle可關閉打字效果，可設置打字效果顯示一次或loop
12. 增加valine和gitalk的配置
13. darkmode配置整理
14. 增加404頁面
15. post_beautify改為beautify，頁面美化不再只限於post頁，page頁也一樣
16. 可設置是否顯示cover，可設置各位置的cover顯示
17. 增加mermaid,可畫流程圖、狀態圖、時序圖、甘特圖等等
18. 增加pangu配置，中英文之間添加空格
19. 整合部分配置
20. post-copyright增加decode網址 (可以顯示中文)
21. 增加部分顏色配置

Feature
1. 適配IE
2. 增加一個Tag Plugins: 圖庫集
3. 增加一個Tag Plugins: tag-hide 功能 inline/block
4. 去除page頁開頭顯示與標題一樣的內容
5. aside 公告欄設置，支持html代碼
6. 手機界面sidebar顯示進度條和加深對應的標題
7. 主頁subtitle 的 hitokoto 顯示內容出處
9. footer 的hexo鏈接改為https
10. 修改手機下，menus和toc的打開效果
11. 手機頁面下，搜索界面全屏顯示
12. SEO優化，標題欄改為h1顯示
13. 閲讀模式優化，可根據light mode 和darkmode調整背景
14. 當屏蔽js時，header會出現（之前用js控制，會隱藏）

Fixed
1. 修復Tencent Analytics的script加載為https #105
2. 修復相關文章，日期顯示錯誤bug
3. 修復gitalk報錯問題
4. 修復當valine background 是絕對地址時無法顯示的bug
5. 修復medium-zoom 無法使用的bug
6. 修復在safari下，點擊或移動到首頁文章cover，圓角變成正方形的bug #114
7. 修復在部分瀏覽器下，aside,友情鏈接頭像轉動變形的bug
8. 修復在寬度限制下，表格內容溢出屏幕外而出現滾動條的bug \#138
9. 修復gitalk js 在一些沒有設置評論的page里加載的bug
10. 修復tag plugins 的gist 在不同主題下的背景顏色問題（黑色主題下，文字不易觀看）
11. 修復highlight figcaption 顯示不全的bug
12. 修復disqus評論數無法獲取的bug
13. 修復子目錄在觸摸屏下點擊,偶爾不出現的bug
14. 修復a標籤太長（連續英文字母）不會換行的bug
15. 修復toc滾動時，閲讀進度條也跟著滾動的bug
16. 修復aside的圖片，可點擊顯示大圖bug
17. 修復activate-power-mode設置參數無效bug
18. 修復語言上的錯誤 \#156
19. 修復主頁在safari桌面端，首頁滾動卡頓的bug

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,45 @@
+<!--
+IMPORTANT: Please follow the template to create a new issue.
+重要：請依照該模板來提交。
+-->
+
+## I want to create a new issue <!-- 我想要建立一個新的issue --> 
+
+<!-- Check all with "x" especially FAQ & Documentation!! (使用 "x" 選擇) -->
+<!-- 請確認是否都已經翻閱過如下的資料, 尤其是安裝文檔！！ -->
+- [] Yes, I have read [Hexo Docs page](https://hexo.io/docs/), especially [Templates](https://hexo.io/docs/templates.html), [Variables](https://hexo.io/docs/variables.html), [Helpers](https://hexo.io/docs/helpers.html) and [Troubleshooting](https://hexo.io/docs/troubleshooting.html).
+- [] Yes, I have read [Hexo-theme-butterfly Documentation](https://jerryc.me/posts/21cfbf15/).
+- [] And yes, I already searched for current [issues](https://github.com/jerryc127/hexo-theme-butterfly/issues?utf8=%E2%9C%93&q=is%3Aissue) and this did not help me.
+
+## Butterfly Information
+
+<!-- Butterfly的版本 -->
+<!-- 檢視主題的package.json -->
+**Butterfly Version:**
+
+<!-- Windows/macOS/Linux/Android/iOS -->
+**Platform:**
+
+<!-- Chrome/Safari/FireFox/.. -->
+**Browser:**
+
+## Expected behavior <!-- (預期行為) -->
+
+## Actual behavior <!-- (實際行為) -->
+
+<!-- Please give me the screenshots to locate the issue -->
+<!-- 請儘量提供截圖來定位問題 -->
+
+## Steps to reproduce the behavior <!-- (重現步驟) -->
+
+## Feature Request
+
+<!-- If you have any ideas of theme-butterfly, please write down here and we can have a discussion. -->
+<!-- 如果你有任何關於Butterfly的功能方面的想法，可以在這個部分裡寫下來我們一起討論 -->
+
+---
+
+<!--
+Love hexo-theme-butterfly? Please consider starring the repo to support it!
+喜歡 hexo-theme-butterfly嗎？ 考慮一下給它點個star來支援它吧！
+-->

.github/stale.yml

@@ -0,0 +1,21 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 30
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+  - bug
+  - enhancement
+  - Solved
+  - documentation 
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

README.md

@@ -1,42 +1,48 @@
 # hexo-theme-butterfly
 
-<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.0.0-blue"/></a>
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.2.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-3.0+-0e83c"/></a>
-<a href="https://nodejs.org/"><img alt="node.js" src="https://img.shields.io/badge/node.js-6.0-blur"/></a>
+<a href="https://hexo.io"><img alt="Hexo" src="https://img.shields.io/badge/hexo-4.0+-0e83c"/></a>
+<a href="https://nodejs.org/"><img alt="node.js" src="https://img.shields.io/badge/node.js-8.0+-blur"/></a>
 
+Demo:  https://demo.jerryc.me/
 
-[预览](https://jerryc.me/)
+JerryC:  https://jerryc.me/
 
-一款基于[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主题
+Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) theme.
 
-## 安装
+## Installation
 
-在你的博客根目录里
+Stable branch:
 
 ```
 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
 ```
 
-如果想要安裝比較新的dev分支，可以
+Dev branch:
 
 ```
 git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
 ```
 
-## 应用主题
-修改hexo配置文件`_config.yml`，把主题改为`Butterfly`
+## Configuration
 
-```
-theme: Butterfly
-```
+ Set theme in the hexo work folder's root config file `_config.yml`: 
 
->如果你没有pug以及stylus的渲染器，请下载安装： npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus
+> theme: Butterfly
 
-## 文档
+ If you don't have pug & stylus renderer, try this: 
 
-可查看[这里](https://jerryc.me/posts/21cfbf15)
+> npm install hexo-renderer-pug hexo-renderer-stylus
+
+## Documentation
+
+Find in [hexo-theme-butterfly docs](https://docs.jerryc.me) and [JerryC](https://jerryc.me/posts/21cfbf15). it supports `zh-TW`
+
+## Screenshots
 
-## 截图
 ![image](https://user-images.githubusercontent.com/16351105/58887365-1272f780-8718-11e9-9329-3292c6ba20d4.png)
-![image](https://user-images.githubusercontent.com/16351105/58887457-3cc4b500-8718-11e9-9417-2bdea603c92e.png)
+
+![](https://user-images.githubusercontent.com/16351105/58887457-3cc4b500-8718-11e9-9417-2bdea603c92e.png)
+
+![](https://user-images.githubusercontent.com/16351105/69338594-7d03f980-0c9e-11ea-8b64-7f165e6508e2.png)

README_CN.md

@@ -0,0 +1,46 @@
+# hexo-theme-butterfly
+
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.2.0-blue"/></a>
+<a href="https://jerryc.me"><img alt="Author" src="https://img.shields.io/badge/author-JerryC-blur"/></a>
+<a href="https://hexo.io"><img alt="Hexo" src="https://img.shields.io/badge/hexo-4.0+-0e83c"/></a>
+<a href="https://nodejs.org/"><img alt="node.js" src="https://img.shields.io/badge/node.js-8.0+-blur"/></a>
+
+Demo:  https://demo.jerryc.me/ 
+
+JerryC:  https://jerryc.me/
+
+
+一款基於[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主題
+
+## 安裝
+
+在你的博客根目錄裡
+
+```
+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
+```
+
+## 應用主題
+修改hexo配置文件`_config.yml`，把主題改為`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)
+
+## 截圖
+![image](https://user-images.githubusercontent.com/16351105/58887365-1272f780-8718-11e9-9329-3292c6ba20d4.png)
+![image](https://user-images.githubusercontent.com/16351105/58887457-3cc4b500-8718-11e9-9417-2bdea603c92e.png)
+
+![](https://user-images.githubusercontent.com/16351105/69338594-7d03f980-0c9e-11ea-8b64-7f165e6508e2.png)

_config.yml

@@ -33,18 +33,18 @@ favicon: /img/favicon.ico
 
 # Highlight theme
 # ---------------
-highlight_theme: light
-highlight_copy: false #代碼複製按鈕
+highlight_theme: light # default / darker / pale night / light / ocean
+highlight_copy: true #代碼複製按鈕
 highlight_lang: true #代碼語言顯示
-highlight_shrink: false #代碼框不展開，需點擊 '>' 打開
+highlight_shrink: false # true 全部代碼框不展開，需點擊 '>' 打開 / false 代碼框展開，有'>'點擊按鈕 | none 代碼框展開，不顯示 '>' 按鈕
 
 code_word_wrap: false
 
 # copy setting
 # 是否禁止複製（如果禁止，highlight_copy的功能將無效)
-# copyright 複製的内容後面加上版權信息
+# copyright 複製的內容後面加上版權信息
 copy:
-  enable: true # true 開啓 / false 禁止
+  enable: true # true 開啟 / false 禁止
   copyright: false
 
 # social settings
@@ -83,63 +83,92 @@ local_search:
 # ---------------
 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
 
-####   Analysis    ####
-# ---------------
-# baidu_analytics:
-
-#Google Analytics
-google_analytics:
-
+# mermaid
+# see https://github.com/knsv/mermaid
+# -------------------------------
+mermaid:
+  enable: false
+  # built-in themes: default/forest/dark/neutral
+  theme: default
 
 # Post info settings
 # ---------------
-# avatar: /img/avatar.png
-avatar: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/avatar.png
+avatar:
+  img: /img/avatar.png
+  effect: false # 頭像會一直轉圈
 
 # the banner image of index
-top_img: https://i.loli.net/2019/05/22/5ce53eb6dc82757840.jpg
-# 以下鏈接是動態壁紙，每次刷新會更換
-# https://source.unsplash.com/collection/collectionid/1600x900
-# https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture
-# https://api.dujin.org/bing/1920.php
-# https://api.dujin.org/bing/1366.php
+index_img:
 
 # if the banner of page not setting,it will show the top_img
-default_top_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/top_img_index.jpg
-
-# the default cover of the post
-default_cover: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
+default_top_img: /img/index.jpg
 
 # the banner image of archive page
-archive_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/archive.jpg
+archive_img:
 
 # the banner image of tag page
-tag_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/tag-bg.png
+# tag page, look like https://xxxxxxxxx.com/tags/butterfly
+tag_img:
 
 # the banner image of category page
-category_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/category-bg
+# category page, look like https://xxxxxxxxx.com/categories/butterfly
+category_img:
 
-# 如果你有使用hexo-douban去生成movie界面，可配置這個
-movies_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/Photo/movie.jpg
+# 如果你有使用hexo-douban，可配置這個
+# douban:
+#   meta: false
+#   movies_img:
+#   books_img:
+#   games_img:
+
+cover:
+  # 是否顯示文章封面
+  index_enable: true
+  aside_enable: true
+  archives_enable: true
+  # 封面顯示的位置
+  # 三個值可配置 left , right , both
+  position: both
+  # 當沒有設置cover時，默認的封面顯示
+  default_cover:
+    - /img/post.jpg
 
 # if the photo link cannot connect,it will show that
 lodding_bg:
-  flink: /img/friend_404.gif
-  post_page: /img/404.jpg
+  flink: /img/friend_404.gif #404後圖片
+  post_page: /img/404.jpg #404後圖片
+#  post: /img/loading.gif ##加載動畫
+
+# A simple 404 page
+error_404:
+  enable: false
+  subtitle: "Page Not Found"
+  background:
 
 post_meta:
-  date_type: both # or created or updated 文章日期是创建日或者更新日或都显示
-  categories: true # or false 是否显示分类
-  tags: true # or false 是否显示标签
+  page:
+    date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
+    categories: true # true or false 主頁是否顯示分類
+    tags: false # true or false 主頁是否顯示標籤
+  post:
+    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
+    categories: true # true or false 文章頁是否顯示分類
+    tags: true # true or false 文章頁是否顯示標籤
 
-# Please see doc for more details: https://jerryc.me/posts/21cfbf15/#字数统计
+# Please see doc for more details: https://jerryc.me/posts/21cfbf15/#字數統計
 wordcount:
   enable: false
 
@@ -153,6 +182,7 @@ auto_open_sidebar:
 
 post_copyright:
   enable: true
+  decode: false
   license: CC BY-NC-SA 4.0
   license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
 
@@ -188,22 +218,38 @@ addtoany:
 disqus:
   enable: false
   shortname:
+  count: false # top_img顯示評論數
 
-# laibili:
-# enable: false
-# uid:
+# Disqus.js版評論系統，應對大陸長城的折中方案，兼容原版：https://github.com/SukkaW/DisqusJS
+# API 申請地址：https://disqus.com/api/applications/
+# 與 disqus 共用樣式
+disqusjs:
+  enable: false
+  shortname:
+  siteName:
+  apikey:
+  api: https://disqus.skk.moe/disqus/ #一般情況下無需修改 API 地址
+  admin:
+  adminLabel:
+  count: true # top_img顯示評論數
 
-# gitalk:
-#   enable: false
-#   client_id:
-#   client_secret:
-#   repo:
-#   owner:
-#   admin:
-#   language:   # en , zh-CN , zh-TW
-####   Using this js for redirect to gitalk container after login
-####   See https://github.com/gitalk/gitalk/issues/125
-#   js: https://cdn.jsdelivr.net/gh/upupming/gitalk@36368e5dffd049e956cdbbd751ff96c28d8255cf/dist/gitalk.min.js
+laibili:
+  enable: false
+  uid:
+
+gitalk:
+  enable: false
+  client_id:
+  client_secret:
+  repo:
+  owner:
+  admin:
+  language: zh-CN # en , zh-CN , zh-TW
+  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: true # top_img顯示評論數
 
 # valine comment system. https://valine.js.org
 valine:
@@ -217,11 +263,25 @@ valine:
   lang: en # i18n: zh-cn/en
   placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
   guest_info: nick,mail,link #valine comment header info
+  recordIP: false # Record reviewer IP
+  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
   bg: /img/comment_bg.png # valine background
+  count: true # top_img顯示評論數
+
+# utterances
+# https://utteranc.es/
+utterances:
+  enable: false
+  repo:
+  # 可選 pathname/url/title/og:title
+  issue_term: pathname
+  # 可選 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
+  light_theme: github-light
+  dark_theme: photon-dark
 
 #####     Footer Settings    ####
 # ------------------------------------
-since: 2018
+since: 2020
 
 footer_custom_text:
 
@@ -234,6 +294,25 @@ ICP:
   text:
   icon: /img/icp.png
 
+####   Analysis    ####
+# ---------------
+baidu_analytics:
+
+# Google Analytics
+google_analytics:
+
+# Tencent_analytics ID
+tencent_analytics:
+
+# Ads
+# ---------------
+# Google Adsense
+google_adsense:
+  enable: false
+  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
+  client:
+  enable_page_level_ads: true
+
 ####    站長驗證    ####
 # Google Webmaster tools verification setting
 # See: https://www.google.com/webmasters/
@@ -251,16 +330,6 @@ baidu_site_verification:
 # see http://zhanzhang.so.com/
 qihu_site_verification:
 
-# 友情鏈接界面設置
-Flink:
-  headline: 友情鏈接
-  info_headline: 我的Blog資料
-  name: Blog 名字： JerryC
-  address: Blog 地址： https://jerryc.me/
-  avatar: Blog 頭像： https://jerryc.me/img/avatar.png
-  info: Blog 簡介： 今日事,今日畢
-  comment: 如果需要交換友鏈,請留言
-
 # 打賞按鈕
 reward:
   enable: true
@@ -276,6 +345,7 @@ reward:
 related_post:
   enable: true
   limit: 6 # 顯示推薦文章數目
+  date_type: created # or created or updated 文章日期顯示創建日或者更新日
 
 ####    美化/效果    ####
 #--------------------------------
@@ -290,16 +360,19 @@ related_post:
 #   button_hover: "#FF7242"
 #   text_selection: "#00c4b6"
 #   link_color: "#99a9bf"
-#   meta_color: '#858585'
+#   meta_color: "#858585"
 #   hr_color: "#A4D8FA"
-#   read-mode-bg_color: '#FAF9DE'
-#   inline-code-color: '#F47466'
+#   code_foreground: "#F47466"
+#   code_background: "rgba(27, 31, 35, .05)"
+#   toc_color: "#00c4b6"
+#   blockquote_padding_color: "#49b1f5"
+#   blockquote_background_color: "#49b1f5"
 
 # 主頁設置
 # 默認top_img全屏，site_info在中間
 # 使用默認, 都無需填寫（建議默認）
-index_site_info_top: #主頁標題距離頂部距離  例如 300px/300em/300rem/10%
-index_top_img_height: #主頁top_img高度 例如 300px/300em/300rem  不能使用百分比
+index_site_info_top: # 主頁標題距離頂部距離  例如 300px/300em/300rem/10%
+index_top_img_height: # 主頁top_img高度 例如 300px/300em/300rem  不能使用百分比
 
 # category和tag頁的UI設置
 # index 值代表 UI將與首頁的UI一樣
@@ -318,7 +391,7 @@ background:
 footer_bg: false
 
 # 背景特效
-# 避免卡頓，建議只開啓一個
+# 避免卡頓，建議只開啟一個
 # canvas_ribbon 禁止彩帶背景
 # See: https://github.com/hustcc/ribbon.js
 canvas_ribbon:
@@ -338,7 +411,7 @@ canvas_ribbon_piao:
 # https://github.com/hustcc/canvas-nest.js
 canvas_nest:
   enable: false
-  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
+  color: "0,0,255" #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
   opacity: 0.7 # the opacity of line (0~1), default: 0.5.
   zIndex: -1 # z-index property of the background, default: -1.
   count: 99 # the number of lines, default: 99.
@@ -347,10 +420,12 @@ canvas_nest:
 # 打字效果
 activate_power_mode:
   enable: false
+  colorful: true # 冒光特效
+  shake: true # 抖動特效
 
 # 鼠標點擊效果
-# 避免卡頓，建議只開啓一個
-# 點擊烟火特效
+# 避免卡頓，建議只開啟一個
+# 點擊煙火特效
 fireworks:
   enable: false
 
@@ -361,31 +436,18 @@ click_heart:
 # 點擊出現文字，文字可自行修改
 ClickShowText:
   enable: false
-  text: 
-    - 富强
-    - 民主
-    - 文明
-    - 和谐
-    - 自由
-    - 平等
-    - 公正
-    - 法治
-    - 爱国
-    - 敬业
-    - 诚信
-    - 友善
+  text:
+    - 本人
+    - 超帥
   fontSize: 15px
 
-# 頭像會一直轉圈
-avatar_effect: false
-
 # 網站顯示模式
 # light 默認模式
 # dark 黑暗模式（不建議）
 display_mode: light
 
-# 美化post頁顯示
-post_beautify:
+# 美化頁面顯示
+beautify:
   enable: false
   title-prefix-icon: '\f0c1'
   title-prefix-icon-color: "#F47466"
@@ -409,27 +471,37 @@ hr:
   icon-top: -20px
 
 # 主頁subtitle
-# 打字效果
-subtitle: 
+subtitle:
   enable: true
+  # 打字效果
+  effect: true
+  # 循環或者只打字一次
+  loop: false
   # source調用第三方服務
-  # source: false 關閉調用 
+  # source: false 關閉調用
   # source: 1  調用金山詞霸的每日一句（簡體）
-  # source: 2  調用一言网的一句話（簡體） #https://hitokoto.cn/
-  # source: 3  調用一句网（簡體） http://yijuzhan.com/
+  # source: 2  調用一言網的一句話（簡體） #https://hitokoto.cn/
+  # source: 3  調用一句網（簡體） http://yijuzhan.com/
   # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
-  # subtitle 會先顯示 source , 再顯示 sub 的内容
+  # subtitle 會先顯示 source , 再顯示 sub 的內容
   source: false
   # (如果有英文逗號' , '，請使用轉義字符 ,)
+  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
   sub:
     - 今日事,今日畢
     - Never put off till tomorrow what you can do today
 
+# fontawesome圖標
+# 默認使用的是 fontawesome v4版本的圖標
+fontawesome_v5:
+  enable: false
 
 ####    側邊欄    ####
 #-------------------------------------
 # 側邊欄顯示設置
 aside:
+  enable: true
+  mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
   position: right # left or right
   card_author: true
   card_announcement: true
@@ -464,40 +536,47 @@ translate:
   enable: true
   # 默認按鈕顯示文字
   default: 繁
-  #网站默认语言，1: 繁體中文, 2: 简体中文
+  #網站默認語言，1: 繁體中文, 2: 簡體中文
   defaultEncoding: 2
-  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
+  #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
   translateDelay: 0
-  #博客网址
+  #博客網址
   cookieDomain: "https://xxx/"
   #當文字是簡體時，按鈕顯示的文字
   msgToTraditionalChinese: "繁"
   #當文字是繁體時，按鈕顯示的文字
-  msgToSimplifiedChinese: "简"
+  msgToSimplifiedChinese: "簡"
 
 #閲讀模式
 readmode:
   enable: true
 
-# 夜間模式
+# dark mode
 darkmode:
   enable: true
-
-# 自動切換 dark mode和 light mode
-# autoChangeMode: 1  跟隨系統而變化，不支持的瀏覽器/系統將按照時間晚上6點到早上6點之間切換為 dark mode
-# autoChangeMode: 2  只按照時間晚上6點到早上6點之間切換為 dark mode
-# autoChangeMode: false 取消自動切換
-autoChangeMode: false
+  # dark mode和 light mode切換按鈕
+  button: true
+  # 自動切換 dark mode和 light mode
+  # autoChangeMode: 1  跟隨系統而變化，不支持的瀏覽器/系統將按照時間晚上6點到早上6點之間切換為 dark mode
+  # autoChangeMode: 2  只按照時間晚上6點到早上6點之間切換為 dark mode
+  # autoChangeMode: false 取消自動切換
+  autoChangeMode: 1
 
 ####    other     ####
 #------------------------------------------------
 
 # 圖片大圖查看模式
-# 默認為 fancybox http://fancyapps.com/fancybox/3/
-# 可以選擇改爲 medium_zoom https://github.com/francoischalifour/medium-zoom
+# 可選 medium_zoom 或者 fancybox
+# 只選一個 或者 兩個都不選
+#--------------------------------------------
+# medium_zoom https://github.com/francoischalifour/medium-zoom
 medium_zoom:
   enable: false
 
+# fancybox http://fancyapps.com/fancybox/3/
+fancybox:
+  enable: true
+
 # Snackbar 彈窗
 # https://github.com/polonel/SnackBar
 # position 彈窗位置
@@ -505,8 +584,8 @@ medium_zoom:
 snackbar:
   enable: false
   position: bottom-left
-  bg_light: '#49b1f5' #light mode時彈窗背景
-  bg_dark: '#2d3035' #dark mode時彈窗背景
+  bg_light: "#49b1f5" #light mode時彈窗背景
+  bg_dark: "#2d3035" #dark mode時彈窗背景
 
 #百度推送
 baidu_push:
@@ -517,6 +596,12 @@ baidu_push:
 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:
@@ -551,6 +636,8 @@ twitter_meta: true
 # https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png
 Open_Graph_meta: true
 
+# 開啟hexo自帶的緩存，加快生成速度
+fragment_cache: true
 
 # CDN
 # 網站必須
@@ -558,68 +645,74 @@ Open_Graph_meta: true
 CDN_USE:
   css:
     - /css/index.css
-    - https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
-    # - https://use.fontawesome.com/releases/v5.8.1/css/all.css #fontawesomeV5_css
 
   js:
-    - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js  #/js/third-party/jquery.min.js
+    - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js
     - /js/utils.js
     - /js/main.js
 
-
 # CDN
 # 非必要不要修改
 CDN:
-  #comments
-  blueimp-md5: https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js
+  # comments
+  blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js
   gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
   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_css: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqusjs.css
+  utterances: https://utteranc.es/client.js
 
   # share
   addtoany: https://static.addtoany.com/menu/page.js
-  sharejs: https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js
-  sharejs_css: https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css
+  sharejs: https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js
+  sharejs_css: https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css
 
-  #search
-  algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js
-  algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css
-  algolia_js: /js/search/algolia.js
+  # search
   local_search: /js/search/local-search.js
+  algolia_js: /js/search/algolia.js
+  algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js
+  algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
 
+  # math
   mathjax: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
   katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css
   katex_copytex: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js
   katex_copytex_css: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css
+  mermaid: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
 
-  #不蒜子計數器
+  # count
   busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
 
-  # 背景特效
-  canvas_ribbon: /js/third-party/canvas-ribbon.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/canvas-ribbon.js
-  canvas_ribbon_piao: /js/third-party/piao.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/piao.js
-  canvas_nest: /js/third-party/canvas-nest.js  # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/canvas-nest.js 
+  # background effect
+  canvas_ribbon: /js/third-party/canvas-ribbon.js
+  canvas_ribbon_piao: /js/third-party/piao.js
+  canvas_nest: /js/third-party/canvas-nest.js
 
   lazyload: https://cdn.jsdelivr.net/npm/lazysizes@latest/lazysizes.min.js
   instantpage: https://cdn.jsdelivr.net/npm/instant.page@latest/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
   fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
-  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js  #/js/third-party/jquery.fancybox.min.js
+  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
   medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js
 
-  snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar@0.1.15/dist/snackbar.min.css
-  snackbar: https://cdn.jsdelivr.net/npm/node-snackbar@0.1.15/dist/snackbar.min.js
+  # snackbar
+  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
 
-  #鼠标点击特效
-  anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js  #/js/third-party/anime.min.js
-  activate_power_mode: /js/third-party/activate-power-mode.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/activate-power-mode.js
-  fireworks: /js/third-party/fireworks.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/fireworks.js
-  click_heart: /js/third-party/click_heart.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/click_heart.js
-  ClickShowText: /js/third-party/ClickShowText.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/ClickShowText.js
+  # 鼠標點擊特效
+  anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js
+  activate_power_mode: /js/third-party/activate-power-mode.js
+  fireworks: /js/third-party/fireworks.js
+  click_heart: /js/third-party/click_heart.js
+  ClickShowText: /js/third-party/ClickShowText.js
+
+  # fontawesome
+  fontawesome_v4: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
+  fontawesome_v5: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
 
   translate: /js/tw_cn.js
-  runtimeshow: js/runtimeshow.js
-

languages/default.yml

@@ -19,7 +19,6 @@ page:
 
 sticky: Sticky
 no_title: No title
-archives: Archives
 
 post:
   created: Created
@@ -27,11 +26,13 @@ post:
   wordcount: Word count
   min2read: "Reading time: %s min"
   page_pv: Post View
+  comments: Comments
   copyright:
     author: Author
     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
 
 search: Search
 algolia_search:
@@ -70,11 +71,9 @@ aside:
 
 donate: Donate
 share: Share
-
 bookmark:
   title: Bookmark
 
-
 rightside:
   readmode_title: Read Mode
   font_plus_title: Increase font size
@@ -100,5 +99,7 @@ Snackbar:
     message_next: to bookmark this page
   chs_to_cht: Traditional Chinese Activated Manually
   cht_to_chs: Simplified Chinese Activated Manually
-  day_to_night: Light Mode Activated Manually
-  night_to_day: Dark Mode Activated Manually
+  day_to_night: Dark Mode Activated Manually
+  night_to_day: Light Mode Activated Manually
+
+error_title: Page not found

languages/en.yml

@@ -19,7 +19,6 @@ page:
 
 sticky: Sticky
 no_title: No title
-archives: Archives
 
 post:
   created: Created
@@ -27,11 +26,13 @@ post:
   wordcount: Word count
   min2read: "Reading time: %s min"
   page_pv: Post View
+  comments: Comments
   copyright:
     author: Author
     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
 
 search: Search
 algolia_search:
@@ -98,5 +99,7 @@ Snackbar:
     message_next: to bookmark this page
   chs_to_cht: Traditional Chinese Activated Manually
   cht_to_chs: Simplified Chinese Activated Manually
-  day_to_night: Light Mode Activated Manually
-  night_to_day: Dark Mode Activated Manually
+  day_to_night: Dark Mode Activated Manually
+  night_to_day: Light Mode Activated Manually
+
+error_title: Page not found

languages/zh-CN.yml

@@ -19,7 +19,6 @@ page:
 
 sticky: 置顶
 no_title: 无题
-archives: 时间轴
 
 post:
   created: 发表于
@@ -27,11 +26,14 @@ post:
   wordcount: 字数总计
   min2read: "阅读时长: %s 分钟"
   page_pv: 阅读量
+  comments: 评论数
   copyright:
     author: 文章作者
     link: 文章链接
     copyright_notice: 版权声明
-    copyright_content: '本博客所有文章除特别声明外，均采用 <a href="%s">%s</a> 许可协议。转载请注明来自 <a href="%s">%s</a>！'
+    copyright_content: '本博客所有文章除特别声明外，均采用
+      <a href="%s" target="_blank">%s</a> 许可协议。转载请注明来自 <a href="%s" target="_blank">%s</a>！'
+  recommend: 相关推荐
 
 search: 搜索
 algolia_search:
@@ -74,7 +76,6 @@ share: 分享
 bookmark:
   title: 添加书签
 
-
 rightside:
   readmode_title: 阅读模式
   font_plus_title: 放大字体
@@ -102,3 +103,5 @@ Snackbar:
   cht_to_chs: 你已切换为简体
   day_to_night: 你已切换为深色模式
   night_to_day: 你已切换为浅色模式
+
+error_title: 页面没有找到

languages/zh-TW.yml

@@ -15,11 +15,10 @@ page:
   articles: 文章總覽
   tag: 標籤
   category: 分類
-  archives: 時間軸
+  archives: 歸檔
 
 sticky: 置頂
 no_title: 無題
-archives: 時間軸
 
 post:
   created: 發表於
@@ -27,12 +26,14 @@ post:
   wordcount: 字數總計
   min2read: "閲讀時長: %s 分鐘"
   page_pv: 閲讀量
+  comments: 評論數
   copyright:
     author: 文章作者
     link: 文章鏈接
     copyright_notice: 版權聲明
     copyright_content: '本博客所有文章除特別聲明外，均採用
       <a href="%s" target="_blank">%s</a> 許可協議。轉載請註明來自 <a href="%s" target="_blank">%s</a>！'
+  recommend: 相關推薦
 
 search: 搜索
 algolia_search:
@@ -75,7 +76,6 @@ share: 分享
 bookmark:
   title: 添加書籤
 
-
 rightside:
   readmode_title: 閲讀模式
   font_plus_title: 放大字體
@@ -104,4 +104,6 @@ Snackbar:
   day_to_night: 你已切換為深色模式
   night_to_day: 你已切換為淺色模式
 
+error_title: 頁面沒有找到
+
 

layout/404.pug

@@ -0,0 +1,87 @@
+doctype html
+html(lang=config.language data-theme=theme.display_mode)
+  head
+    - var pageTitle = _p('error_title') 
+    - var tabTitle = pageTitle + ' | ' + config.title
+    - var pageDescription = page.description || page.title || config.description
+    - var pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','):  ([]).join(',') || config.keywords
+    - var pageAuthor = config.email ? config.author + ',' + config.email : config.author
+    - var pageCopyright = config.copyright || config.author
+    - var without_html = url.replace('index.html', '')
+    - var top_img = theme.error_404.background || theme.default_top_img
+    - var bg_img = `background-image: url(${top_img})`
+
+
+    meta(charset='UTF-8')
+    meta(http-equiv="X-UA-Compatible" content="IE=edge")
+    meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5")
+    title= tabTitle
+    meta(name="description" content=pageDescription)
+    if pageKeywords
+      meta(name="keywords" content=pageKeywords)
+    meta(name="author" content=pageAuthor)
+    meta(name="copyright" content=pageCopyright)
+    meta(name ="format-detection" content="telephone=no")
+    !=favicon_tag(theme.favicon || config.favicon)
+    //- 預解析
+    include includes/head/dns_prefetch.pug
+    //- 網站驗證
+    include includes/head/site_verification.pug
+    //- Open_Graph
+    include includes/head/Open_Graph.pug
+    //- PWA
+    if (theme.pwa && theme.pwa.enable)
+      include includes/head/pwa
+      
+    script(src=url_for(theme.CDN.js_cookies))
+
+    if theme.darkmode.enable
+      include includes/head/darkmode.pug
+
+    each item in theme.CDN_USE.css
+      link(rel='stylesheet', href=url_for(item))
+
+    if theme.fontawesome_v5 && theme.fontawesome_v5.enable
+      link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v5))
+    else
+      link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v4))
+
+    if (theme.snackbar && theme.snackbar.enable)
+      link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))
+
+    if theme.canonical
+      link(rel="canonical" href=without_html)
+
+    if theme.algolia_search.enable
+      link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.algolia_search_css))
+      script(src=url_for(theme.CDN.algolia_search) defer)
+
+    //- google_adsense
+    include includes/head/google_adsense.pug
+
+    //- analytics
+    include includes/head/analytics.pug
+
+    if theme.blog_title_font.font_link
+      link(rel='stylesheet', href=url_for(theme.blog_title_font.font_link))
+
+    include includes/head/config.pug
+    include includes/head/config_site.pug
+ 
+  body
+    if theme.fireworks && theme.fireworks.enable
+      canvas.fireworks
+    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/mobile-sidebar/index.pug
+    include includes/rightside.pug
+    each item in theme.CDN_USE.js
+      script(src=url_for(item))
+    include includes/additional-js.pug
+    include includes/search/index.pug
+    
+
+    

layout/archive.pug

@@ -1,4 +1,3 @@
-
 extends includes/layout.pug
 
 block content
@@ -6,6 +5,4 @@ block content
   #archive
     .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
     +articleSort(page.posts)
-    include includes/pagination.pug
-  #aside_content.aside_content
-    include includes/aside.pug
+    include includes/pagination.pug

layout/category.pug

@@ -5,15 +5,10 @@ block content
     include ./includes/mixins/UI.pug
     #recent-posts.recent-posts.category_ui   
       +UI_NEW(page.posts)
-      include includes/pagination.pug
-    #aside_content.aside_content
-      include includes/aside.pug
+      include includes/pagination.pug    
   else
     include ./includes/mixins/article-sort.pug
     #category
       .article-sort-title= _p('page.category') + ' - ' + page.category
       +articleSort(page.posts)
-      include includes/pagination.pug
-    #aside_content.aside_content
-      include includes/aside.pug
-    
+      include includes/pagination.pug    

layout/flink.pug

@@ -1,31 +1,20 @@
-.flink
-  each i in site.data.link
-    h1= i.class_name
-    .post-cards
-      ul.md-links
-        each item in i.link_list
-          li.md-links-item
-            a(href=item.link  title=item.name target="_blank")
-              if theme.lazyload.enable
-                img.lazyload(data-src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
-              else
-                img(src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
-              div(class="md-links-title")= item.name 
-                <br/>
-              div(class="md-links-des")=item.descr
-
-  hr
-  div 
-    p(style="font-size:15px;font-weight:bold")= theme.Flink.info_headline
-    ul
-      li= theme.Flink.name
-      li= theme.Flink.address
-      li= theme.Flink.avatar 
-      li= theme.Flink.info
-
-  hr
-  .comment_int
-    p.comment-word= theme.Flink.comment
-
+#page
+  .flink#article-container
+    each i in site.data.link
+      h2= i.class_name
+      .post-cards
+        .md-links
+          each item in i.link_list
+            .md-links-item
+              a(href=item.link  title=item.name target="_blank")
+                if theme.lazyload.enable
+                  img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+                else
+                  img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+                .md-links-title= item.name 
+                .md-links-des= item.descr
+    != page.content
+  if page.comments !== false
+    include includes/comments/index.pug
 
 

layout/includes/additional-js.pug

@@ -1,18 +1,13 @@
+if theme.translate && theme.translate.enable
+  script(src=url_for(theme.CDN.translate))
+
 if (theme.medium_zoom && theme.medium_zoom.enable)
   script(src=url_for(theme.CDN.medium_zoom))
-else
+
+if (theme.fancybox && theme.fancybox.enable)
   script(src=url_for(theme.CDN.fancybox))
 
-if (theme.algolia_search.enable)
-  script(async src=url_for(theme.CDN.algolia_js))
-if (theme.mathjax && theme.mathjax.enable)
-  if(!is_tag() && !is_category() && !is_archive() && !is_home())
-    include ./third-party/mathjax.pug
-if (theme.katex && theme.katex.enable)
-  if(!is_tag() && !is_category() && !is_archive() && !is_home())
-    include ./third-party/katex.pug
-if (theme.local_search && theme.local_search.enable)
-  script(async src=url_for(theme.CDN.local_search))
+include ./math/index.pug 
 
 if theme.fireworks && theme.fireworks.enable
   script(src=url_for(theme.CDN.anime))
@@ -30,24 +25,13 @@ if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
 if (theme.canvas_nest && theme.canvas_nest.enable)
   include ./third-party/canvas-nest.pug 
 
-if theme.baidu_push && theme.baidu_push.enable
-  script(src=url_for('js/baidupush.js')) 
-
 if theme.activate_power_mode.enable
   script(src=url_for(theme.CDN.activate_power_mode))
   script.
-    POWERMODE.colorful = true; // make power mode colorful
-    POWERMODE.shake = true; // turn off shake
+    POWERMODE.colorful = #{theme.activate_power_mode.colorful};
+    POWERMODE.shake = #{theme.activate_power_mode.shake};
     document.body.addEventListener('input', POWERMODE);
 
-if theme.translate && theme.translate.enable
-  script(src=url_for(theme.CDN.translate))
-  script.
-    translateInitilization()
-
-if is_home()
-  include index-js.pug
-
 if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
   script(async src=url_for(theme.CDN.busuanzi))
 
@@ -63,3 +47,19 @@ if theme.click_heart && theme.click_heart.enable
 
 if theme.ClickShowText && theme.ClickShowText.enable
   script(src=url_for(theme.CDN.ClickShowText))
+
+if theme.pangu && theme.pangu.enable
+  include ./third-party/pangu.pug
+
+//- search
+if theme.algolia_search && theme.algolia_search.enable
+  script(src=url_for(theme.CDN.algolia_js))
+else if theme.local_search && theme.local_search.enable
+  script(src=url_for(theme.CDN.local_search))
+
+//- mermaid
+if theme.mermaid.enable
+  include ./math/mermaid.pug
+
+if is_home()
+  include index-js.pug

layout/includes/aside.pug

@@ -1,21 +0,0 @@
-if theme.aside.card_author
-  include widget/card_author.pug
-
-if theme.aside.card_announcement
-  include widget/card_announcement.pug
-
-if theme.aside.card_recent_post
-  include widget/card_recent_post.pug
-  
-if theme.aside.card_categories   
-  include widget/card_categories.pug
-
-if theme.aside.card_tags
-  include widget/card_tags.pug
-
-if theme.aside.card_archives
-  include widget/card_archives.pug
-
-if theme.aside.card_webinfo
-  include widget/card_webinfo.pug
-  

layout/includes/comments/disqus.pug

@@ -1,13 +1,23 @@
-if theme.disqus && theme.disqus.enable
-  #disqus_thread
-  script.
-    var unused = null;
-    var disqus_config = function () {
-      this.page.url = '!{ page.permalink }';
-      this.page.identifier = '!{ page.path }';
-      this.page.title = '!{ page.title }';
-    }
+#disqus_thread
+script.
+  var disqus_config = function () {
+    this.page.url = '!{ page.permalink }';
+    this.page.identifier = '!{ page.path }';
+    this.page.title = '!{ page.title }';
+  };
+  (function() { 
     var d = document, s = d.createElement('script');
-    s.src = "https://" + '!{theme.disqus.shortname}' +".disqus.com/embed.js";
-    s.setAttribute('data-timestamp', '' + +new Date());
-    (d.head || d.body).appendChild(s);
+    s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js';
+    s.setAttribute('data-timestamp', +new Date());
+    (d.head || d.body).appendChild(s);
+  })();
+
+script.
+  function getDisqusCount() {
+    var d = document, s = d.createElement('script');
+    s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js';
+    s.id = 'dsq-count-scr';
+    (d.head || d.body).appendChild(s);
+  }
+
+  window.addEventListener('load', getDisqusCount, false);

layout/includes/comments/disqusjs.pug

@@ -0,0 +1,23 @@
+#disqus_thread
+script(src=url_for(theme.CDN.disqusjs))
+script.
+  var dsqjs = new DisqusJS({
+    shortname: '!{theme.disqusjs.shortname}',
+    siteName: "!{theme.disqusjs.siteName}",
+    identifier: '!{ page.path }',
+    url: '!{ page.permalink }',
+    title: '!{ page.title }',
+    api: '!{theme.disqusjs.api}',
+    apikey: '!{theme.disqusjs.apikey}',
+    admin: '!{theme.disqusjs.admin}',
+    adminLabel: '!{theme.disqusjs.adminLabel}'
+  });
+
+script.
+  function getDisqusCount() {
+    var d = document, s = d.createElement('script');
+    s.src = 'https://!{theme.disqusjs.shortname}.disqus.com/count.js';
+    s.id = 'dsq-count-scr';
+    (d.head || d.body).appendChild(s);
+  }
+  window.addEventListener('load', getDisqusCount, false);

layout/includes/comments/gitalk.pug

@@ -1,13 +1,23 @@
-if theme.gitalk && theme.gitalk.enable
-  #gitalk-container
-  script.
-    var gitalk = new Gitalk({
-      clientID: '!{theme.gitalk.client_id}',
-      clientSecret: '!{theme.gitalk.client_secret}',
-      repo: '!{theme.gitalk.repo}',
-      owner: '!{theme.gitalk.owner}',
-      admin: '!{theme.gitalk.admin}',
-      id: md5(decodeURI(location.pathname)),
-      language: '!{theme.gitalk.language}'
-    })
-    gitalk.render('gitalk-container')
+#gitalk-container
+script.
+  var gitalk = new Gitalk({
+    clientID: '!{theme.gitalk.client_id}',
+    clientSecret: '!{theme.gitalk.client_secret}',
+    repo: '!{theme.gitalk.repo}',
+    owner: '!{theme.gitalk.owner}',
+    admin: ['!{theme.gitalk.admin}'],
+    id: md5(decodeURI(location.pathname)),
+    language: '!{theme.gitalk.language}',
+    perPage: '!{theme.gitalk.perPage}',
+    distractionFreeMode: !{theme.gitalk.distractionFreeMode},
+    pagerDirection: '!{theme.gitalk.pagerDirection}',
+    createIssueManually: !{theme.gitalk.createIssueManually},
+    updateCountCallback: commentCount
+  })
+  gitalk.render('gitalk-container')
+
+  function commentCount(n){
+    document.getElementsByClassName('gitalk-comment-count')[0].innerHTML= n
+  }
+
+

layout/includes/comments/index.pug

@@ -1,9 +1,12 @@
 - var d = theme.disqus && theme.disqus.enable
+- var dj = theme.disqusjs && theme.disqusjs.enable
 - var l = theme.laibili && theme.laibili.enable
 - var gt = theme.gitalk && theme.gitalk.enable
 - var v = theme.valine && theme.valine.enable
+- var u = theme.utterances && theme.utterances.enable
+- var isComment = d || dj || l || gt || v || u
 
-if d || l || gt || v
+if isComment
   hr
   #post-comment
     .comment_headling
@@ -11,9 +14,13 @@ if d || l || gt || v
       span= ' ' + _p('comment')
     if d
       include ./disqus.pug
+    else if dj
+      include ./disqusjs.pug
     else if l
       include ./laibili.pug
     else if gt
       include ./gitalk.pug
     else if v
-      include ./valine.pug
+      include ./valine.pug
+    else if u
+      include ./utterances.pug

layout/includes/comments/laibili.pug

@@ -1,11 +1,10 @@
-if theme.laibili && theme.laibili.enable
-  #lv-container(data-id="city" data-uid=theme.laibili.uid)
-    script.
-      (function(d, s) {
-          var j, e = d.getElementsByTagName(s)[0];
-          if (typeof LivereTower === 'function') { return; }
-          j = d.createElement(s);
-          j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
-          j.async = true;
-          e.parentNode.insertBefore(j, e);
-      })(document, 'script');
+#lv-container(data-id="city" data-uid=theme.laibili.uid)
+  script.
+    (function(d, s) {
+        var j, e = d.getElementsByTagName(s)[0];
+        if (typeof LivereTower === 'function') { return; }
+        j = d.createElement(s);
+        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+        j.async = true;
+        e.parentNode.insertBefore(j, e);
+    })(document, 'script');

layout/includes/comments/utterances.pug

@@ -0,0 +1,19 @@
+script#utterances_comment(src=theme.CDN.utterances
+        repo=theme.utterances.repo
+        issue-term=theme.utterances.issue_term
+        theme=theme.utterances.light_theme
+        crossorigin="anonymous"
+        async)
+script.
+  var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+  document.getElementById('utterances_comment').setAttribute('theme',themeNow)
+
+  function utterancesTheme () {
+  var theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+  const message = {
+    type: 'set-theme',
+    theme: theme
+  };
+  const iframe = document.querySelector('.utterances-frame');
+  iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+  }

layout/includes/comments/valine.pug

@@ -1,25 +1,23 @@
-if theme.valine && theme.valine.enable
-  #vcomment.vcomment
-  script(src=url_for(theme.CDN.valine))
-  script.
-    var notify = #{ theme.valine.notify } == true ? true : false;
-    var verify = #{ theme.valine.verify } == true ? true : false;
-    var GUEST_INFO = ['nick','mail','link'];
-    var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){
-      return GUEST_INFO.indexOf(item) > -1
-    });
-    guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
+#vcomment.vcomment
+script(src=url_for(theme.CDN.valine))
+script.
+  var GUEST_INFO = ['nick','mail','link'];
+  var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){
+    return GUEST_INFO.indexOf(item) > -1
+  });
+  guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
 
-    window.valine = new Valine({
-      el:'#vcomment',
-      notify:notify,
-      verify:verify,
-      appId:'#{theme.valine.appId}',
-      appKey:'#{theme.valine.appKey}',
-      placeholder:'#{theme.valine.placeholder}',
-      avatar:'#{theme.valine.avatar}',
-      guest_info:guest_info,
-      pageSize:'#{theme.valine.pageSize}',
-      lang:'#{theme.valine.lang}',
-      recordIP: true
-    });
+  window.valine = new Valine({
+    el:'#vcomment',
+    notify: #{theme.valine.notify},
+    verify: #{theme.valine.verify},
+    appId: '#{theme.valine.appId}',
+    appKey: '#{theme.valine.appKey}',
+    placeholder: '#{theme.valine.placeholder}',
+    avatar: '#{theme.valine.avatar}',
+    meta: guest_info,
+    pageSize: '#{theme.valine.pageSize}',
+    lang: '#{theme.valine.lang}',
+    recordIP: #{theme.valine.recordIP},
+    serverURLs: '#{theme.valine.serverURLs}'
+  });

layout/includes/darkmode.pug

@@ -1,48 +0,0 @@
-script.
-  const autoChangeMode = '#{theme.autoChangeMode}'
-  var t = Cookies.get("theme");
-  if (autoChangeMode == '1'){
-  const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
-  const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
-  const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches
-  const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
-
-  if (t === undefined){
-    if (isLightMode) activateLightMode()
-    else if (isDarkMode) activateDarkMode()
-    else if (isNotSpecified || hasNoSupport){
-      console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.')
-      now = new Date();
-      hour = now.getHours();
-      isNight = hour < 6 || hour >= 18
-      isNight ? activateDarkMode() : activateLightMode()
-  }
-  } else if (t == 'light') activateLightMode()
-  else activateDarkMode()
-
- 
-  } else if (autoChangeMode == '2'){
-    now = new Date();
-    hour = now.getHours();
-    isNight = hour < 6 || hour >= 18
-    if(t === undefined) isNight? activateDarkMode() : activateLightMode()
-    else if (t === 'light') activateLightMode()
-    else activateDarkMode() 
-  } else {
-    if ( t == 'dark' ) activateDarkMode()
-    else if ( t == 'light') activateLightMode()
-  }
-
-  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')
-    }
-  }
-

layout/includes/footer.pug

@@ -8,7 +8,7 @@
   if theme.footer_copyright.enable
     .framework-info
       span= _p('footer.driven') + ' '
-      a(href='http://hexo.io')
+      a(href='https://hexo.io')
         span Hexo
       span.footer-separator |
       span= _p('footer.theme') + ' '

layout/includes/head.pug

@@ -1,83 +1,69 @@
-if is_home()
-  - var top_img = theme.index_img || theme.default_top_img
-else if is_archive()
-  - var top_img = theme.archive_img || theme.default_top_img
-else if is_tag()
-  - var top_img = theme.tag_img || theme.default_top_img
-else if is_category()
-  - var top_img = theme.category_img || theme.default_top_img
-else if is_current('/movies/', [strict])
-  - var top_img = theme.movies_img || theme.default_top_img
-else if !is_post()
-  - var top_img = page.top_img || theme.default_top_img
+- var pageTitle = page.title || config.title || ''
+- if (is_archive()) pageTitle = _p('page.archives')
+- if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag
+- if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
+- if (is_month()) pageTitle += ': ' + page.month + '/' + page.year
+- if (is_year()) pageTitle += ': ' + page.year
+- var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
+- var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title
+- pageTitle ? '' : pageTitle = config.title || ''
 
-- var without_index = url.replace('index.html', '')
-- var without_html = without_index.replace('.html', '')
-- var photo_check = is_post() ? page.cover || theme.avatar : theme.avatar
-- var photo_link = url_check (photo_check) ? photo_check : config.url + photo_check
+- var pageDescription = page.description || page.title || config.description
+- var pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','):  ([]).join(',') || config.keywords
+- if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
+- var pageAuthor = config.email ? config.author + ',' + config.email : config.author
+- var pageCopyright = config.copyright || config.author
+- var without_html = url.replace('index.html', '')
 
-//- 預解析
-link(rel="preconnect" href="//cdn.jsdelivr.net")
-
-//- PWA
-if (theme.pwa && theme.pwa.enable)
-  link(rel="manifest" href=theme.pwa.manifest)
-  if(theme.pwa.theme_color) 
-    meta(name="theme-color" content=theme.pwa.theme_color)
-  if(theme.pwa.theme_color) 
-    meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
-  if(theme.pwa.apple_touch_icon) 
-    link(rel="apple-touch-icon" sizes="180x180" href=theme.pwa.apple_touch_icon)
-  if(theme.pwa.favicon_32_32) 
-    link(rel="icon" type="image/png" sizes="32x32" href=theme.pwa.favicon_32_32)
-  if(theme.pwa.favicon_16_16)
-    link(rel="icon" type="image/png" sizes="16x16" href=theme.pwa.favicon_16_16)
-  if(theme.pwa.mask_icon)
-    link(rel="mask-icon" href=theme.pwa.mask_icon color="#5bbad5")
-
-//- 網站驗證
-if theme.google_site_verification
-  meta(name="google-site-verification" content=theme.google_site_verification)
-
-if theme.bing_site_verification
-  meta(name="msvalidate.01" content=theme.bing_site_verification)
-
-if theme.baidu_site_verification
-  meta(name="baidu-site-verification" content=theme.baidu_site_verification)
-
-if theme.qihu_site_verification
-  meta(name="360-site-verification" content=theme.qihu_site_verification)
-
-//- twitter meta
-if theme.twitter_meta
-  meta(name="twitter:card" content="summary_large_image")
-  meta(name="twitter:title" content=pageTitle_no_include_blog_name)
-  meta(name="twitter:description" content=pageDescription)
-  meta(name="twitter:image" content=photo_link)
-
-//- Open_Graph
-if theme.Open_Graph_meta
-  - var contentType = is_post() ? 'article' : 'website'
-  meta(property="og:type" content=contentType)
-  meta(property="og:title" content=pageTitle_no_include_blog_name)
-  meta(property="og:url" content=without_html)
-  meta(property="og:site_name" content=config.title)
-  meta(property="og:description" content=pageDescription)
-  meta(property="og:image" content=photo_link)
+meta(charset='UTF-8')
+meta(http-equiv="X-UA-Compatible" content="IE=edge")
+meta(name="viewport" content="width=device-width,initial-scale=1")
+title= tabTitle
+meta(name="description" content=pageDescription)
+if pageKeywords
+  meta(name="keywords" content=pageKeywords)
+meta(name="author" content=pageAuthor)
+meta(name="copyright" content=pageCopyright)
+meta(name ="format-detection" content="telephone=no")
+!=favicon_tag(theme.favicon || config.favicon)
 
 if theme.disable_baidu_transformation
   meta(http-equiv="Cache-Control" content="no-transform")
   meta(http-equiv="Cache-Control" content="no-siteapp")
 
+if page.hide == true
+  meta(name="robots" content="noindex")
+
+if theme.douban.meta && (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict]))
+  meta(name="referrer" content="no-referrer")
+
+//- 預解析
+!=partial('includes/head/dns_prefetch', {}, {cache:theme.fragment_cache})
+
+//- 網站驗證
+!=partial('includes/head/site_verification', {}, {cache:theme.fragment_cache})
+
+//- Open_Graph
+include ./head/Open_Graph.pug
+
+//- PWA
+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 && theme.darkmode.enable) || theme.autoChangeMode !== false
-  include ./darkmode
+if theme.darkmode.enable
+  !=partial('includes/head/darkmode', {}, {cache:theme.fragment_cache})
 
 each item in theme.CDN_USE.css
   link(rel='stylesheet', href=url_for(item))
 
-if (theme.medium_zoom && !theme.medium_zoom.enable)
+if theme.fontawesome_v5 && theme.fontawesome_v5.enable
+  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)
@@ -96,35 +82,18 @@ if theme.algolia_search.enable
   link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.algolia_search_css))
   script(src=url_for(theme.CDN.algolia_search) defer)
 
-if (theme.gitalk && theme.gitalk.enable)
-  link(rel="stylesheet" type="text/css" href=url_for(gitalk_css))
-  script(src=url_for(theme.CDN.gitalk))
-  script(src=url_for(theme.CDN.blueimp-md5))
+//- comment css
+include ./head/comment.pug
 
-if theme.baidu_analytics
-  link(rel="dns-prefetch" href="https://hm.baidu.com")
-  script.
-    var _hmt = _hmt || [];
-    (function() {
-      var hm = document.createElement("script");
-      hm.src = "https://hm.baidu.com/hm.js?!{theme.baidu_analytics}";
-      var s = document.getElementsByTagName("script")[0]; 
-      s.parentNode.insertBefore(hm, s);
-    })();
+//- google_adsense
+!=partial('includes/head/google_adsense', {}, {cache:theme.fragment_cache})
 
-if theme.google_analytics
-  link(rel="dns-prefetch" href="https://www.google-analytics.com")
-  script.
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=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;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('create', '!{theme.google_analytics}', 'auto');
-    ga('send', 'pageview');
-
-if !is_post()
-  link(rel="preload" href=url_for(top_img)  as="image" )
+//- analytics
+!=partial('includes/head/analytics', {}, {cache:theme.fragment_cache})
 
 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})
+include ./head/config_site.pug

layout/includes/head/Open_Graph.pug

@@ -0,0 +1,17 @@
+- 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)
+  meta(property="og:url" content=without_html)
+  meta(property="og:site_name" content=config.title)
+  meta(property="og:description" content=pageDescription)
+  meta(property="og:image" content=full_url_for(page.cover || theme.avatar.img))

layout/includes/head/analytics.pug

@@ -0,0 +1,22 @@
+if theme.baidu_analytics
+  script.
+    var _hmt = _hmt || [];
+    (function() {
+      var hm = document.createElement("script");
+      hm.src = "https://hm.baidu.com/hm.js?!{theme.baidu_analytics}";
+      var s = document.getElementsByTagName("script")[0]; 
+      s.parentNode.insertBefore(hm, s);
+    })();
+
+if theme.google_analytics
+  script.
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=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;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', '!{theme.google_analytics}', 'auto');
+    ga('send', 'pageview');
+
+if theme.tencent_analytics
+  script(src=`https://tajs.qq.com/stats?sId=${theme.tencent_analytics}` charset="UTF-8")

layout/includes/head/comment.pug

@@ -0,0 +1,8 @@
+if (theme.disqusjs && theme.disqusjs.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
+  link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.disqusjs_css))
+
+if (theme.gitalk && theme.gitalk.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
+  link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.gitalk_css))
+  script(src=url_for(theme.CDN.gitalk))
+  script(src=url_for(theme.CDN.blueimp_md5))
+

layout/includes/head/config.pug

@@ -49,8 +49,6 @@
     })
   }
 
-  var copy_copyright_js = theme.copy.enable && theme.copy.copyright;
-
   var ClickShowText = 'undefined';
   if (theme.ClickShowText && theme.ClickShowText.enable) {
     ClickShowText = JSON.stringify({
@@ -78,15 +76,22 @@
     })
   }
 
+  var highlightCopy = theme.highlight_copy
+  var highlightLang = theme.highlight_lang
+  var highlightShrink  = theme.highlight_shrink
+  var runtime = theme.runtimeshow.enable
+  var fancybox = theme.fancybox.enable
+  var medium_zoom = theme.medium_zoom.enable
+  var baiduPush = theme.baidu_push && theme.baidu_push.enable
+  var isFontAwesomeV5 = theme.fontawesome_v5 && theme.fontawesome_v5.enable
+
+
 script.
   var GLOBAL_CONFIG = { 
     root: '!{config.root}',
     algolia: !{algolia},
     localSearch: !{localSearch},
     translate: !{translate},
-    highlight_copy: '!{theme.highlight_copy}',
-    highlight_lang: '!{theme.highlight_lang}',
-    highlight_shrink: '!{theme.highlight_shrink}',
     copy: {
       success: '!{_p("copy.success")}',
       error: '!{_p("copy.error")}',
@@ -98,11 +103,17 @@ script.
       message_next: '!{_p("Snackbar.bookmark.message_next")}'
     },
     runtime_unit: '!{_p("runtime_unit")}',
+    runtime: !{runtime},
     copyright: !{copyright},
-    copy_copyright_js: !{copy_copyright_js},
     ClickShowText: !{ClickShowText},
-    medium_zoom: '!{theme.medium_zoom.enable}',
-    Snackbar: !{Snackbar}
+    medium_zoom: !{medium_zoom},
+    fancybox: !{fancybox},
+    Snackbar: !{Snackbar},
+    baiduPush: !{baiduPush},
+    highlightCopy: !{highlightCopy},
+    highlightLang: !{highlightLang},
+    highlightShrink: !{highlightShrink},
+    isFontAwesomeV5: !{isFontAwesomeV5}
     
   }
 

layout/includes/head/config_site.pug

@@ -0,0 +1,6 @@
+script.
+  var GLOBAL_CONFIG_SITE = { 
+    isPost: !{is_post()},
+    isHome: !{is_home()}
+  }
+

layout/includes/head/darkmode.pug

@@ -0,0 +1,47 @@
+script.
+  const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
+  var t = Cookies.get("theme")
+  if (autoChangeMode == '1'){
+    const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+    const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
+    const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches
+    const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+
+    if (t === undefined){
+      if (isLightMode) activateLightMode()
+      else if (isDarkMode) activateDarkMode()
+      else if (isNotSpecified || hasNoSupport){
+        console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.')
+        now = new Date();
+        hour = now.getHours();
+        isNight = hour < 6 || hour >= 18
+        isNight ? activateDarkMode() : activateLightMode()
+    }
+    } else if (t == 'light') activateLightMode()
+    else activateDarkMode()
+ 
+  } else if (autoChangeMode == '2'){
+    now = new Date();
+    hour = now.getHours();
+    isNight = hour < 6 || hour >= 18
+    if(t === undefined) isNight? activateDarkMode() : activateLightMode()
+    else if (t === 'light') activateLightMode()
+    else activateDarkMode() 
+  } else {
+    if ( t == 'dark' ) activateDarkMode()
+    else if ( t == 'light') activateLightMode()
+  }
+
+  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')
+    }
+  }
+

layout/includes/head/dns_prefetch.pug

@@ -0,0 +1,16 @@
+link(rel="preconnect" href="//cdn.jsdelivr.net")
+
+if theme.google_analytics
+  link(rel="preconnect" href="https://www.google-analytics.com" crossorigin)
+
+if theme.baidu_analytics
+  link(rel="preconnect" href="https://hm.baidu.com")
+
+if theme.tencent_analytics
+  link(rel="preconnect" href="http://ta.qq.com")
+
+if theme.blog_title_font.font_link
+  link(rel="preconnect" href="https://fonts.googleapis.com" crossorigin)
+
+if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
+  link(rel="preconnect" href="//busuanzi.ibruce.info")

layout/includes/head/google_adsense.pug

@@ -0,0 +1,7 @@
+if (theme.google_adsense && theme.google_adsense.enable)
+  script(async src=theme.google_adsense.js)
+  script.
+    (adsbygoogle = window.adsbygoogle || []).push({
+      google_ad_client: '!{theme.google_adsense.client}',
+      enable_page_level_ads: '!{theme.google_adsense.enable_page_level_ads}'
+    });

layout/includes/head/pwa.pug

@@ -0,0 +1,13 @@
+link(rel="manifest" href=theme.pwa.manifest)
+if(theme.pwa.theme_color) 
+  meta(name="theme-color" content=theme.pwa.theme_color)
+if(theme.pwa.theme_color) 
+  meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
+if(theme.pwa.apple_touch_icon) 
+  link(rel="apple-touch-icon" sizes="180x180" href=theme.pwa.apple_touch_icon)
+if(theme.pwa.favicon_32_32) 
+  link(rel="icon" type="image/png" sizes="32x32" href=theme.pwa.favicon_32_32)
+if(theme.pwa.favicon_16_16)
+  link(rel="icon" type="image/png" sizes="16x16" href=theme.pwa.favicon_16_16)
+if(theme.pwa.mask_icon)
+  link(rel="mask-icon" href=theme.pwa.mask_icon color="#5bbad5")

layout/includes/head/site_verification.pug

@@ -0,0 +1,11 @@
+if theme.google_site_verification
+  meta(name="google-site-verification" content=theme.google_site_verification)
+
+if theme.bing_site_verification
+  meta(name="msvalidate.01" content=theme.bing_site_verification)
+
+if theme.baidu_site_verification
+  meta(name="baidu-site-verification" content=theme.baidu_site_verification)
+
+if theme.qihu_site_verification
+  meta(name="360-site-verification" content=theme.qihu_site_verification)

layout/includes/header.pug

@@ -1,13 +0,0 @@
-#header  
-  #page-header
-    span#blog_name.pull_left
-      a#site-name.blog_title(href=url_for('/')) #[=config.title]
-    i.fa.fa-bars.fa-fw.toggle-menu.pull_right.close(aria-hidden="true")
-    span.pull_right.menus
-      .menus_items
-        include menu_item.pug
-    span#search_button.pull_right
-      if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
-          a.site-page.social-icon.search
-            i.fa.fa-search.fa-fw
-            span=' '+_p('search')

layout/includes/header/header.pug

@@ -0,0 +1,15 @@
+#page-header
+  span#blog_name.pull_left
+    a#site-name.blog_title(href=url_for('/')) #[=config.title]
+  span.toggle-menu.pull_right.close
+    a.site-page
+      i.fa.fa-bars.fa-fw(aria-hidden="true")
+  span.pull_right.menus
+    .menus_items
+      include ./menu_item.pug
+
+  if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
+    span#search_button.pull_right
+      a.site-page.social-icon.search
+        i.fa.fa-search.fa-fw
+        span=' '+_p('search')

layout/includes/header/index.pug

@@ -0,0 +1,45 @@
+if is_home()
+  - var top_img = theme.index_img || theme.default_top_img
+else if is_post()
+  - var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
+else if is_archive()
+  - var top_img = theme.archive_img || theme.default_top_img
+else if is_tag()
+  - var top_img = theme.tag_img || theme.default_top_img
+else if is_category()
+  - var top_img = theme.category_img || theme.default_top_img
+else
+  - var top_img = page.top_img || theme.default_top_img
+
+if theme.douban
+  if is_current('/movies/', [strict])
+    - var top_img = theme.douban.movies_img || theme.default_top_img
+  else if is_current('/books/', [strict])
+    - var top_img = theme.douban.books_img || theme.default_top_img
+  else if is_current('/games/', [strict])
+    - var top_img = theme.douban.games_img || theme.default_top_img
+
+- var bg_img = top_img && top_img !== true ? `background-image: url(${top_img})` : ''
+- var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
+- var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
+- is_post() ? isHomeClass = 'post-bg' : isHomeClass
+
+#nav(class=isHomeClass style=bg_img)
+  !=partial('includes/header/header', {}, {cache:theme.fragment_cache})
+  if is_home()
+    #site-info
+      h1#site_title=site_title
+      #site_subtitle
+        span#subtitle
+      if(theme.social)
+        #site_social_icons
+          each url, icon in theme.social
+            a.social-icon(href=url target="_blank")
+              i(class=icon aria-hidden="true")     
+    #scroll_down
+      i.fa.fa-angle-down.scroll-down-effects
+  else if is_post()
+    include ./post-info.pug 
+  else
+    #page_site-info
+      h1#site_title=site_title

layout/includes/header/menu_item.pug

@@ -1,7 +1,7 @@
 each value, label in theme.menu
   if !Array.isArray(value)
     .menus_item
-      a.site-page(href=trim(value.split('||')[0]))
+      a.site-page(href=url_for(trim(value.split('||')[0])))
         i.fa-fw(class=trim(value.split('||')[1]))
         span=' '+label
   else
@@ -13,6 +13,6 @@ each value, label in theme.menu
       ul.menus_item_child
         each i in value
           li
-            a.site-page(href=trim(i.split('||')[1]))
+            a.site-page(href=url_for(trim(i.split('||')[1])))
               i.fa-fw(class=trim(i.split('||')[2]))
               span=' '+trim(i.split('||')[0])

layout/includes/header/post-info.pug

@@ -0,0 +1,65 @@
+#post-info
+  #post-title
+    .posttitle= page.title || _p('no_title')
+  #post-meta
+    if (theme.post_meta.post.date_type)
+      if (theme.post_meta.post.date_type === 'both')
+        time.post-meta__date
+          i.fa.fa-calendar.fa-fw(aria-hidden="true")
+          =' '+_p('post.created')+' '+date(page.date, config.date_format)
+          span.post-meta__separator |
+          i.fa.fa-history.fa-fw(aria-hidden="true")
+          =' '+_p('post.updated')+' '+date(page.updated, config.date_format)
+      else
+        - var date_type = theme.post_meta.post.date_type === 'updated' ? 'updated' : 'date'
+        time.post-meta__date #[i.fa.fa-calendar.fa-fw(aria-hidden="true")] #[=date(page[date_type], config.date_format)]
+              
+    if (theme.post_meta.post.categories && page.categories.data.length > 0)
+      if (theme.post_meta.post.date_type)
+        span.post-meta__separator |
+      span
+        each item, index in page.categories.data
+          i.fa.fa-inbox.post-meta__icon.fa-fw(aria-hidden="true")
+          a(href=url_for(item.path)).post-meta__categories #[=item.name]
+          if (index < page.categories.data.length - 1)
+            i.fa.fa-angle-right.fa-fw(aria-hidden="true")
+    .post-meta-wordcount
+      if (theme.wordcount && theme.wordcount.enable)
+        - var wordCountIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-file-word' : 'fa fa-file-word-o'
+        i.post-meta__icon.fa-fw(class=wordCountIcon aria-hidden="true")
+        span= _p('post.wordcount') + ':'
+        span.word-count= wordcount(page.content)
+        span.post-meta__separator |
+        - var readCountIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-clock' : 'fa fa-clock-o'
+        i.post-meta__icon.fa-fw(class=readCountIcon aria-hidden="true")
+        span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
+      .post-meta-pv-cv
+        if (theme.wordcount && theme.wordcount.enable && theme.busuanzi.page_pv)
+          span.post-meta__separator |
+        if theme.busuanzi.page_pv
+          i.fa.fa-eye.post-meta__icon.fa-fw(aria-hidden="true") 
+          span=_p('post.page_pv') + ':'
+          span#busuanzi_value_page_pv
+        
+        - var commentCount = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-comments' : 'fa fa-comment-o'
+        if ((theme.disqus && theme.disqus.enable && theme.disqus.count && page.comments !== false) || (theme.disqusjs && theme.disqusjs.enable && theme.disqusjs.count && page.comments !== false))
+          if (theme.busuanzi && theme.busuanzi.page_pv)
+            span.post-meta__separator |
+          i.post-meta__icon.fa-fw(class=commentCount aria-hidden="true")
+          span= _p('post.comments') + ':'
+          span.disqus-comment-count.comment-count
+            a(href=full_url_for(page.path) + '#disqus_thread')
+        if (theme.valine && theme.valine.enable && theme.valine.count && page.comments !== false)
+          if (theme.busuanzi && theme.busuanzi.page_pv)
+            span.post-meta__separator |
+          i.post-meta__icon.fa-fw(class=commentCount aria-hidden="true")
+          span= _p('post.comments') + ':'
+          a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
+            span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
+        if (theme.gitalk && theme.gitalk.enable && theme.gitalk.count && page.comments !== false)
+          if (theme.busuanzi && theme.busuanzi.page_pv)
+            span.post-meta__separator |
+          i.post-meta__icon.fa-fw(class=commentCount aria-hidden="true")
+          span= _p('post.comments') + ':'
+          a(href=url_for(page.path) + '#post-comment')
+            span.gitalk-comment-count.comment-count

layout/includes/index-js.pug

@@ -1,113 +1,116 @@
-script.
-  if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else {
-    $('.full_page .nav_bg').css('background-attachment', 'fixed');
-  }
-
-
 if theme.subtitle.enable
-  script(src=url_for(theme.CDN.typed))
-  - var source = theme.subtitle.source
+  - let source = theme.subtitle.source
+  - let subtitleEffect = theme.subtitle.effect
 
-  if source == '1' || source == '2'
-    script(src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js")
-    script(src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js")
+  if subtitleEffect
+    script(src=url_for(theme.CDN.typed))
 
   if source == '1'
     script.
+      let subtitleEffect = !{subtitleEffect}
       fetch('https://api.ooopn.com/ciba/api.php',)
       .then(function (res){
         return res.json();
       })
       .then(function (data) {
-        var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
-        var both = sub.unshift(data['ciba-en'],data.ciba)
-        var typed = new Typed(".subtitle", {
-        strings: sub,
-        startDelay: 300,
-        typeSpeed: 100,
-        loop: true,
-        backSpeed: 50
-        });
+        if (subtitleEffect){
+          let sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
+          let both = sub.unshift(data['ciba-en'],data.ciba)
+          let typed = new Typed("#subtitle", {
+            strings: sub,
+            startDelay: 300,
+            typeSpeed: 150,
+            loop: !{theme.subtitle.loop},
+            backSpeed: 50
+          });
+        }else{
+          document.getElementById("subtitle").innerHTML = data['ciba-en']
+        }
       })
       .catch(function (err) {
         console.error(err);
       })
+
   else if source == '2'
     script.
+      let subtitleEffect = !{subtitleEffect}
       fetch('https://v1.hitokoto.cn')
       .then(function (res){
         return res.json();
       })
       .then(function (data) {
-        var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
-        var both = sub.unshift(data.hitokoto)  
-        var typed = new Typed(".subtitle", {
-        strings: sub,
-        startDelay: 300,
-        typeSpeed: 100,
-        loop: true,
-        backSpeed: 50
-        });
+        if (subtitleEffect){
+          let from = '出自 ' + data.from
+          let sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
+          let both = sub.unshift(data.hitokoto,from)  
+          let typed = new Typed("#subtitle", {
+            strings: sub,
+            startDelay: 300,
+            typeSpeed: 150,
+            loop: !{theme.subtitle.loop},
+            backSpeed: 50
+          });
+        }else{
+          document.getElementById("subtitle").innerHTML = data.hitokoto        
+        }
       })
       .catch(function (err) {
         console.error(err);
       })
+
   else if source == "3"
     script(type="text/javascript" src="http://yijuzhan.com/api/word.php?m=js")
     script.
-      var con = str[0];
-      var author = "出自 " + str[1];
-      var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
-      var both = sub.unshift(con,author)
-      var typed = new Typed(".subtitle", {
-      strings: sub,
-      startDelay: 300,
-      typeSpeed: 100,
-      loop: true,
-      backSpeed: 50
-      });
+      let subtitleEffect = !{subtitleEffect}
+      let con = str[0];
+      if (subtitleEffect){
+        let from = "出自 " + str[1];
+        let sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
+        let both = sub.unshift(con,from)
+        let typed = new Typed("#subtitle", {
+          strings: sub,
+          startDelay: 300,
+          typeSpeed: 150,
+          loop: !{theme.subtitle.loop},
+          backSpeed: 50
+        });
+      }else{
+        document.getElementById("subtitle").innerHTML = con
+      }
+
   else if source == '4'
-    script(type="text/javascript" src="https://sdk.jinrishici.com/v2/browser/jinrishici.js")
+    script(type="text/javascript" src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8")
     script.
+      let subtitleEffect = !{subtitleEffect}
       jinrishici.load(function(result) {
-        var sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
-        var content = result.data.content;
-        var both = sub.unshift(content)
-        var typed = new Typed(".subtitle", {
-        strings: sub,
-        startDelay: 300,
-        typeSpeed: 100,
-        loop: true,
-        backSpeed: 50
-      });
+        if (subtitleEffect){
+          let sub = '!{theme.subtitle.sub}'.length == 0  ? new Array() : '!{theme.subtitle.sub}'.split(",");
+          let content = result.data.content;
+          let both = sub.unshift(content)
+          let typed = new Typed("#subtitle", {
+            strings: sub,
+            startDelay: 300,
+            typeSpeed: 150,
+            loop: !{theme.subtitle.loop},
+            backSpeed: 50
+          });
+        }else{
+          document.getElementById("subtitle").innerHTML = result.data.content        
+        }
       })
-     
+
   else
+    - var subtitle = theme.subtitle.sub[0]
     script.
-      var typed = new Typed(".subtitle", {
-      strings: '!{theme.subtitle.sub}'.split(","),
-      startDelay: 300,
-      typeSpeed: 100,
-      loop: true,
-      backSpeed: 50
-      });
-
-if !theme.index_top_img_height && !theme.index_site_info_top
-  script.
-    //首頁fullpage
-    function alignContent() {
-      for (var n = $(window).height(), e = document.querySelectorAll(".full_page"), i = 0; i < e.length; i++) 
-        e[i].style.height = n + "px";
-        $("#site-info").each(function () {
-          var x = $(this).height();
-          $(this).css("top", (n-x)/2)       
+      let subtitleEffect = !{subtitleEffect}
+      if (subtitleEffect){ 
+        let typed = new Typed("#subtitle", {
+          strings: '!{theme.subtitle.sub}'.split(","),
+          startDelay: 300,
+          typeSpeed: 150,
+          loop: !{theme.subtitle.loop},
+          backSpeed: 50
         })
-    }
-    alignContent();
-    
-    $(window).bind("resize", function () {
-      alignContent()
-    })
-
-
-
+      }else{
+        document.getElementById("subtitle").innerHTML = '!{subtitle}'
+        }

layout/includes/layout.pug

@@ -1,82 +1,46 @@
-
-- var pageTitle = page.title || config.subtitle || ''
-- if (is_archive()) pageTitle = _p('page.archives')
-- if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag
-- if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
-- if (is_month()) pageTitle += ': ' + page.month + '/' + page.year
-- if (is_year()) pageTitle += ': ' + page.year
-- var pageTitle_saved  //- 暫時存儲pageTitle
-- var pageTitle_no_include_blog_name //- 存儲pageTitle， 不帶 " | "，meta用
-- var home_subtitle_true //有subtitle
-//- home時顯示config.title (JerryC)，其他顯示 pageTitle。meta用
-- is_home() ? pageTitle_no_include_blog_name = config.title : pageTitle_no_include_blog_name = pageTitle
-//- 暫時存儲pageTitle
-- pageTitle ? pageTitle_saved = pageTitle + ' | ' + config.title : pageTitle_saved = config.title
-//- 是否有 config.subtitle 是各自显示
-- config.subtitle ? home_subtitle_true = ' - ' + config.subtitle : home_subtitle_true = ''
-//- home時pageTitle顯示 JerryC - subtitle，其他顯示 pageTitle | JerryC
-- is_home() ? pageTitle = config.title + home_subtitle_true : pageTitle = pageTitle_saved
-//- 判断keywords
-
-- var pageDescription = page.description || page.title || config.description || ''
-- var pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','):  ([]).join(',') || config.keywords
-- if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
-- var pageAuthor = config.email ? config.author + ',' + config.email : config.author
-- var pageCopyright = config.copyright || config.author
+- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
+- var autoOpenSidebar = theme.auto_open_sidebar.enable === true ? 'on' : ''
 
 doctype html
 html(lang=config.language data-theme=theme.display_mode)
   head
-    meta(charset='UTF-8')
-    meta(http-equiv="X-UA-Compatible" content="IE=edge")
-    meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1")
-    title= pageTitle
-    meta(name="description" content=pageDescription)
-    meta(name="keywords" content=pageKeywords)
-    meta(name="author" content=pageAuthor)
-    meta(name="copyright" content=pageCopyright)
-    meta(name ="format-detection" content="telephone=no")
-    !=favicon_tag(config.favicon || theme.favicon || '/favicon.ico')
     include ./head.pug
-    include ./config.pug
   body
     if theme.fireworks && theme.fireworks.enable
       canvas.fireworks
-    include ./header.pug
-    include ./mobile-sidebar.pug
+    !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})
+    if (is_post() && page.toc != false && theme.toc.enable)      
+      i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true" class=autoOpenSidebar)      
+      include ./sidebar.pug
     #body-wrap
       if theme.background
-        - var source = theme.background
-        - var is_photo = source.substring(3,0) === 'url' ? 'photo':'color'
+        - var is_photo = theme.background.substring(3,0) === 'url' ? 'photo':'color'
         #web_bg(data-type=is_photo)
-      if (is_post() && page.toc != false && theme.toc.enable)      
-        i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true")      
-        include ./sidebar.pug
+      include ./header/index.pug
+
       if (!is_post())
-        include ./nav.pug
-      #content-outer
-        block top_img
-        if (!is_post())
-          #content-inner.layout_page
-            if body
-              div!= body
-            else
-              block content
-        else
-          #content-inner.layout.layout_post    
-            if body
-              div!= body
-            else
-              block content
+        main#content-inner.layout_page(class=hideAside)
+          if body
+            div!= body
+          else
+            block content
+            include widget/index.pug
+      else
+        main#content-inner.layout_post
+          if body
+            div!= body
+          else
+            block content
       
       - var footer_bg = theme.footer_bg == false ? '' : bg_img
-      footer#footer(style=footer_bg)
-        include ./footer.pug    
+      - var is_bg = theme.footer_bg == false ? 'color' : 'photo'
+      footer#footer(style=footer_bg data-type=is_bg)
+        !=partial('includes/footer', {}, {cache:theme.fragment_cache})
     include ./rightside.pug
+    !=partial('includes/search/index', {}, {cache:theme.fragment_cache})
     each item in theme.CDN_USE.js
       script(src=url_for(item))
     include ./additional-js.pug
-    include ./search/index.pug
     
 
     

layout/includes/math/index.pug

@@ -0,0 +1,15 @@
+if theme.mathjax && theme.mathjax.enable
+  if theme.mathjax.per_page
+    if(!is_tag() && !is_category() && !is_archive() && !is_home())
+      include ./mathjax.pug
+  else
+    if page.mathjax
+      include ./mathjax.pug
+
+if theme.katex && theme.katex.enable
+  if theme.katex.per_page
+    if(!is_tag() && !is_category() && !is_archive() && !is_home())
+      include ./katex.pug
+  else
+    if page.katex
+      include ./katex.pug

layout/includes/math/katex.pug

@@ -1,4 +1,4 @@
-link(rel="stylesheet" type="text/css" href=theme.katex.cdn.css)
+link(rel="stylesheet" type="text/css" href=theme.CDN.katex)
 script(src=url_for(theme.CDN.katex_copytex))
 link(rel="stylesheet" type="text/css" href=theme.CDN.katex_copytex_css)
 script.

layout/includes/math/mermaid.pug

@@ -0,0 +1,8 @@
+script.
+  if (document.getElementsByClassName('mermaid').length) {
+    loadScript('!{theme.CDN.mermaid}',function () {
+      mermaid.initialize({
+        theme: '!{theme.mermaid.theme}',
+    })
+  })
+  }

layout/includes/mixins/UI.pug

@@ -1,36 +1,48 @@
 mixin UI_NEW(posts)
   - posts.each(function(article,index){
-    .recent-post-item.article-container
+    .recent-post-item
       - var link = article.link || article.path
-        if index%2 == 0
-          .post_cover.pull_left.left_radius
-            a(href=url_for(link) title=article.title || _p('no_title'))
-              - var post_cover = article.cover
-              if theme.lazyload.enable
-                img.post_bg.lazyload(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-              else
-                img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-        else
-          .post_cover.pull_right.right_radius
-            a(href=url_for(link) title=article.title || _p('no_title'))
-              - var post_cover = article.cover
-              if theme.lazyload.enable
-                img.post_bg.lazyload(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-              else
-                img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)            
-      .recent-post-info   
-        a.article-title(href=url_for(link) title= article.title || _p('no_title'))= article.title || _p('no_title')
-        if (theme.post_meta.date_type)
-          - var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
-          time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[=date(article[date_type], config.date_format)]
-        if (theme.post_meta.categories && article.categories.data.length > 0)
-          span.article-meta
-            span.article-meta__separator |
-            each item, index in article.categories.data
-              i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
-              a(href=url_for(item.path)).article-meta__categories #[=item.name]
-              if (index < article.categories.data.length - 1)
-                  i.fa.fa-angle-right(aria-hidden="true")
+      - var post_cover = article.cover
+      - var title = article.title || _p('no_title')
+      - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
+      - var no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+      if post_cover && theme.cover.index_enable
+        .post_cover(class=leftOrRight)
+          a(href=url_for(link) title=title)          
+            if theme.lazyload.enable
+              img.post_bg.lazyload(data-src=`${post_cover}` alt=title onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+            else
+              img.post_bg(src=`${post_cover}` alt=title onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+      .recent-post-info(class=no_cover)
+        a.article-title(href=url_for(link) title=title)= title
+        .article-meta-wrap
+          if (theme.post_meta.page.date_type)
+            if (theme.post_meta.page.date_type === 'both')
+              time.post-meta__date
+                i.fa.fa-calendar.fa-fw(aria-hidden="true")
+                =date(page.date, config.date_format)
+                span.article-meta__separator |
+                i.fa.fa-history.fa-fw(aria-hidden="true")
+                =date(page.updated, config.date_format)
+            else
+              - var date_type = theme.post_meta.post.date_type === 'updated' ? 'updated' : 'date'
+              time.post-meta__date #[i.fa.fa-calendar.fa-fw(aria-hidden="true")]#[=date(page[date_type], config.date_format)]
+          if (theme.post_meta.page.categories && article.categories.data.length > 0)
+            span.article-meta
+              span.article-meta__separator |
+              each item, index in article.categories.data
+                i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
+                a(href=url_for(item.path)).article-meta__categories #[=item.name]
+                if (index < article.categories.data.length - 1)
+                    i.fa.fa-angle-right(aria-hidden="true")
+          if (theme.post_meta.page.tags && article.tags.data.length > 0)
+            span.article-meta.tags
+              span.article-meta__separator |
+              each item, index in article.tags.data
+                i.fa.fa-tag.article-meta__icon(aria-hidden="true")
+                a(href=url_for(item.path)).article-meta__tags #[=item.name]
+                if (index < article.tags.data.length - 1)
+                  span.article-meta__link -
         if theme.auto_excerpt && theme.auto_excerpt.enable
           - const content = strip_html(article.content)
           - let expert = content.substring(0, theme.auto_excerpt.length) 

layout/includes/mixins/article-sort.pug

@@ -3,13 +3,15 @@ mixin articleSort(posts)
     - var year
     - posts.each(function (article) {
       - var tempYear = date(article.date, 'YYYY')
+      - var no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
       if tempYear !== year
         - year = tempYear
         .article-sort-item.year= year
-      .article-sort-item
-        .article-sort-img
-          a.article-sort-item__img(href=url_for(article.path))
-            img(src=article.cover)
+      .article-sort-item(class=no_cover)
+        if article.cover && theme.cover.archives_enable
+          .article-sort-img
+            a.article-sort-item__img(href=url_for(article.path))
+              img(src=article.cover alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
         .article-sort-post
           a.article-sort-item__post(href=url_for(article.path))
             i.fa.fa-clock-o(aria-hidden="true")

layout/includes/mobile-sidebar.pug

@@ -1,46 +0,0 @@
-#mobile-sidebar
-  #menu_mask
-  #mobile-sidebar-menus
-    .mobile_author_icon
-      img.lazyload.avatar_img(src=url_for(theme.avatar) onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
-    .mobile_post_data
-      if site.posts.length
-        .mobile_data_item.is_center
-          .mobile_data_link
-            a(href=url_for(config.archive_dir) + '/')
-              .headline= _p('aside.articles') 
-              .length_num= site.posts.length
-
-      if site.tags.length
-        .mobile_data_item.is_center       
-          .mobile_data_link
-            a(href=url_for(config.tag_dir) + '/' )
-              .headline= _p('aside.tags')
-              .length_num= site.tags.length
-
-      if site.categories.length
-        .mobile_data_item.is_center      
-          .mobile_data_link
-            a(href=url_for(config.category_dir) + '/')
-              .headline= _p('aside.categories') 
-              .length_num= site.categories.length
-    hr
-    .menus_items
-      include menu_item.pug
-
-
-  
-  - const showToc = is_post() && page.toc != false && theme.toc.enable
-  -
-    let tocNumber
-    if (page.toc_number !== undefined) tocNumber = page.toc_number
-    else if (theme.toc.number !== undefined) tocNumber = theme.toc.number
-    else tocNumber = true
-  -
-  if (showToc)
-    #mobile-sidebar-toc
-      .toc_mobile_headline= _p('sidebar.catalog')
-      if (page.encrypt == true)
-        .toc-div-class(style="display:none")!=toc(page.origin,{"class":"toc_mobile_items",list_number:tocNumber})
-      else 
-        !=toc(page.content,{"class":"toc_mobile_items",list_number:tocNumber})

layout/includes/mobile-sidebar/index.pug

@@ -0,0 +1,3 @@
+#mobile-sidebar
+  #menu_mask
+  include ../mobile-sidebar/mobile-menus.pug

layout/includes/mobile-sidebar/mobile-menus.pug

@@ -0,0 +1,27 @@
+#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")
+  .mobile_post_data
+    if site.posts.length
+      .mobile_data_item.is-center
+        .mobile_data_link
+          a(href=url_for(config.archive_dir) + '/')
+            .headline= _p('aside.articles') 
+            .length_num= site.posts.length
+
+    if site.tags.length
+      .mobile_data_item.is-center       
+        .mobile_data_link
+          a(href=url_for(config.tag_dir) + '/' )
+            .headline= _p('aside.tags')
+            .length_num= site.tags.length
+
+    if site.categories.length
+      .mobile_data_item.is-center      
+        .mobile_data_link
+          a(href=url_for(config.category_dir) + '/')
+            .headline= _p('aside.categories') 
+            .length_num= site.categories.length
+  hr
+  .menus_items
+    include ../header/menu_item.pug

layout/includes/nav.pug

@@ -1,31 +0,0 @@
-
-- var bg_img = top_img && top_img !== true ? `background-image: url(${top_img})` : ''
-
-
-if is_home()
-  nav#nav.full_page
-    .nav_bg(style=bg_img)
-    #site-info
-      #site-title
-        span.blogtitle= page.title || page.tag || page.category || config.title
-      #site-sub-title
-        span.subtitle
-        
-      if(theme.social)
-        #site-social-icons
-          each url, icon in theme.social
-            a.social-icon(href=url target="_blank")
-              i(class=icon)
-      
-    .scroll-down
-      i.fa.fa-angle-down.scroll-down-effects
-
-else
-  nav#nav.not_index_bg
-    .nav_bg(style=bg_img)
-    #page_site-info
-      #site-title
-          if (is_archive()) 
-            span.blogtitle= _p('archives')
-          else
-            span.blogtitle= page.title || page.tag || page.category || config.title

layout/includes/page_tag.pug

@@ -1,6 +0,0 @@
-- site.tags.sort('path').each(function (tags){
-  - var fontSize = Math.floor(Math.random() * 15 + 15) + "px"; //15 ~ 30
-  - var color = "rgb(" + Math.floor(Math.random() * 201) + ", " + Math.floor(Math.random() * 201) +", " + Math.floor(Math.random() * 201) +")"; // 0,0,0 -> 200,200,200
-
-  a(href=url_for(tags.path) style='font-size:' + fontSize + ';color:' + color)=tags.name
--})

layout/includes/pagination.pug

@@ -1,7 +1,7 @@
 -
   var options = {
-    prev_text: '<i class="fa fa-chevron-left"></i>',
-    next_text: '<i class="fa fa-chevron-right"></i>',
+    prev_text: '<i class="fa fa-fw fa-chevron-left" aria-hidden="true"></i>',
+    next_text: '<i class="fa fa-fw fa-chevron-right" aria-hidden="true"></i>',
     mid_size: 1,
     escape: false
   }
@@ -13,51 +13,27 @@ if(!is_post())
 else
   nav#pagination.pagination_post
     if(page.prev)
-      if(page.next)
-        .prev-post.pull_left
-          - var pagination_cover = page.prev.cover
-          a(href=url_for(page.prev.path))
-            if theme.lazyload.enable
-              img.prev_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
-            else
-              img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
-
+      - var hasPageNext = page.prev ? '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.enable
+            img.prev_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+          else
+            img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+          .pagination-info
             .label=_p('pagination.prev')
-            .prev_info
-              span=page.prev.title
-      else
-        .prev-post.pull-full
-          - var pagination_cover = page.prev.cover
-          a(href=url_for(page.prev.path))
-            if theme.lazyload.enable
-              img.prev_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-            else
-              img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-            .label=_p('pagination.prev')
-            .prev_info
-              span=page.prev.title
+            .prev_info=page.prev.title
           
     if(page.next)
-      if(page.prev)
-        .next-post.pull_right
-          - var pagination_cover = page.next.cover
-          a(href=url_for(page.next.path))
-            if theme.lazyload.enable
-              img.next_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-            else
-              img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)            
+      - 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.enable
+            img.next_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+          else
+            img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)                      
+          .pagination-info
             .label=_p('pagination.next')
-            .next_info
-              span=page.next.title 
-      else
-        .next-post.pull-full
-          - var pagination_cover = page.next.cover
-          a(href=url_for(page.next.path))
-            if theme.lazyload.enable
-              img.next_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-            else
-              img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-            .label=_p('pagination.next')
-            .next_info
-              span=page.next.title      
-
+            .next_info=page.next.title 

layout/includes/post/post-copyright.pug

@@ -0,0 +1,13 @@
+if (theme.post_copyright && theme.post_copyright.enable && page.copyright != false)
+  .post-copyright
+    .post-copyright__author
+      span.post-copyright-meta= _p('post.copyright.author') + ": "
+      span.post-copyright-info
+        a(href=`mailto:${config.email}`) #[=config.author]
+    .post-copyright__type
+      span.post-copyright-meta= _p('post.copyright.link') + ": "
+      span.post-copyright-info
+        a(href=url_for(page.permalink))= theme.post_copyright.decode ? decodeURI(page.permalink) : page.permalink
+    .post-copyright__notice
+      span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
+      span.post-copyright-info!= _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)

layout/includes/post/reward.pug

@@ -1,11 +1,11 @@
 .post-reward
-  a.reward-button
+  a.reward-button.button--primary.button--animated 
     i.fa.fa-qrcode
     = ' ' + _p('donate')
     .reward-main
       ul.reward-all
         each item in theme.reward.QR_code
           li.reward-item
-            img.lazyload.post-qr-code__img(src=(item.itemlist||item).img)
+            img.lazyload.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)
             .post-qr-code__desc=(item.itemlist||item).text
 

layout/includes/recent-posts.pug

@@ -1,40 +1,52 @@
 each article , index in page.posts.data
-  .recent-post-item.article-container
+  .recent-post-item
     - var link = article.link || article.path
-      if index%2 == 0
-        .post_cover.pull_left.left_radius
-          a(href=url_for(link) title=article.title || _p('no_title'))
-            - var post_cover = article.cover
-            if theme.lazyload.enable
-              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-            else
-              img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-      else
-        .post_cover.pull_right.right_radius
-          a(href=url_for(link) title=article.title || _p('no_title'))
-            - var post_cover = article.cover
-            if theme.lazyload.enable
-              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
-            else
-              img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)            
-    .recent-post-info   
-      a.article-title(href=url_for(link) title= article.title || _p('no_title'))= article.title || _p('no_title')
-      if (article.top)
-        span.article-meta
-          i.fa.fa-thumb-tack.article-meta__icon.sticky
-          span.sticky= _p('sticky')
-          span.article-meta__separator(style="margin-right: 0.3rem") |
-      if (theme.post_meta.date_type)
-        - var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
-        time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[=date(article[date_type], config.date_format)]
-      if (theme.post_meta.categories && article.categories.data.length > 0)
-        span.article-meta
-          span.article-meta__separator |
-          each item, index in article.categories.data
-            i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
-            a(href=url_for(item.path)).article-meta__categories #[=item.name]
-            if (index < article.categories.data.length - 1)
-                i.fa.fa-angle-right(aria-hidden="true")
+    - var title = article.title || _p('no_title')
+    - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
+    - var post_cover = article.cover
+    - var no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+    if post_cover && theme.cover.index_enable
+      .post_cover(class=leftOrRight)
+        a(href=url_for(link) title=title)      
+          if theme.lazyload.enable
+            img.post_bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
+          else
+            img.post_bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
+    .recent-post-info(class=no_cover)
+      a.article-title(href=url_for(link) title=title)= title
+      .article-meta-wrap
+        if (article.top)
+          span.article-meta
+            i.fa.fa-thumb-tack.article-meta__icon.sticky
+            span.sticky= _p('sticky')
+            span.article-meta__separator |
+        if (theme.post_meta.page.date_type)
+          if (theme.post_meta.page.date_type === 'both')
+            time.post-meta__date
+              i.fa.fa-calendar.fa-fw(aria-hidden="true")
+              =date(page.date, config.date_format)
+              span.article-meta__separator |
+              i.fa.fa-history.fa-fw(aria-hidden="true")
+              =date(page.updated, config.date_format)
+          else
+            - var date_type = theme.post_meta.post.date_type === 'updated' ? 'updated' : 'date'
+            time.post-meta__date #[i.fa.fa-calendar.fa-fw(aria-hidden="true")]#[=date(page[date_type], config.date_format)]
+        if (theme.post_meta.page.categories && article.categories.data.length > 0)
+          span.article-meta
+            span.article-meta__separator |
+            each item, index in article.categories.data
+              i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
+              a(href=url_for(item.path)).article-meta__categories #[=item.name]
+              if (index < article.categories.data.length - 1)
+                  i.fa.fa-angle-right(aria-hidden="true")
+        if (theme.post_meta.page.tags && article.tags.data.length > 0)
+          span.article-meta.tags
+            span.article-meta__separator |
+            each item, index in article.tags.data
+              i.fa.fa-tag.article-meta__icon(aria-hidden="true")
+              a(href=url_for(item.path)).article-meta__tags #[=item.name]
+              if (index < article.tags.data.length - 1)
+                span.article-meta__link -
       if theme.auto_excerpt && theme.auto_excerpt.enable
         - const content = strip_html(article.content)
         - let expert = content.substring(0, theme.auto_excerpt.length) 

layout/includes/rightside.pug

@@ -2,17 +2,20 @@ section#rightside.rightside
   #rightside-config-hide
     if theme.readmode.enable && is_post()
       i#readmode.fa.fa-book(title=_p('rightside.readmode_title'))
-    i#font_plus.fa.fa-plus(title=_p('rightside.font_plus_title'))
-    i#font_minus.fa.fa-minus(title=_p('rightside.font_minus_title'))
+    if is_post()
+      i#font_plus.fa.fa-plus(title=_p('rightside.font_plus_title'))
+      i#font_minus.fa.fa-minus(title=_p('rightside.font_minus_title'))
     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
-    if theme.darkmode && theme.darkmode.enable
-      - var display_mode = theme.display_mode == 'dark' ? 'fa fa-sun-o' : 'fa fa-moon-o'
+    if theme.darkmode.enable && theme.darkmode.button
+      - var lightModeIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-sun' : 'fa fa-sun-o'
+      - var darkModeIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-moon' : 'fa fa-moon-o'
+      - 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"))
       i.fa.fa-cog(aria-hidden="true")
-    if is_post() && page.comments !== false && (d || l || gt || v)
+    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   
     if is_post() && page.toc != false && theme.toc.enable

layout/includes/search/local-search.pug

@@ -3,7 +3,7 @@
   #local-input-panel
     #local-search-input
       .local-search-box
-        input(placeholder=_p("local_search.input_placeholder")).local-search-box--input
+        input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input
   hr
   #local-search-results
     #local-hits

layout/includes/share/share-js.pug

@@ -1,4 +1,4 @@
 if (theme.sharejs && theme.sharejs.enable)
-  .social-share(data-image= page.cover|| theme.avatar data-sites= theme.sharejs.sites)
+  .social-share(data-image= page.cover|| theme.avatar.img data-sites= theme.sharejs.sites)
   link(rel="stylesheet" href=url_for(theme.CDN.sharejs_css))
   script(src=url_for(theme.CDN.sharejs))

layout/includes/sidebar.pug

@@ -1,7 +1,4 @@
-
-- var sidebar_class = theme.auto_open_sidebar.enable === true ? 'auto_open' : ''
-
-#sidebar(class=sidebar_class)
+#sidebar
   - const showToc = is_post() && page.toc != false && theme.toc.enable
   -
     let tocNumber

layout/includes/third-party/canvas-ribbon.pug

@@ -1,3 +1,3 @@
-script(id="ribbon" src=url_for(theme.CDN.canvas_ribbon) size=theme.canvas_ribbon.size
+script(defer id="ribbon" src=url_for(theme.CDN.canvas_ribbon) size=theme.canvas_ribbon.size
 alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex mobile=`${theme.canvas_ribbon.mobile}` data-click=`${theme.canvas_ribbon.click_to_change}`)
 

layout/includes/third-party/pangu.pug

@@ -0,0 +1,13 @@
+script(src=url_for(theme.CDN.pangu))
+if theme.pangu.field === 'post'
+  if is_post()
+    script.
+      document.addEventListener('DOMContentLoaded', function() {
+          pangu.spacingElementById('content-inner')
+      })
+else if theme.pangu.field === 'page'
+  script.
+    document.addEventListener('DOMContentLoaded', function() {
+          pangu.spacingElementById('content-inner')
+    })
+

layout/includes/widget/card_announcement.pug

@@ -1,6 +1,6 @@
-.card_widget.card-announcement
+.card-widget.card-announcement
   .card-content
-    .item_headline
+    .item-headline
       i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
       span= _p('aside.card_announcement')
-    .announcement_content= theme.announcement.content
+    .announcement_content!= theme.announcement.content

layout/includes/widget/card_archives.pug

@@ -1,6 +1,6 @@
-.card_widget.card-archives
+.card-widget.card-archives
   .card-content
-    .item_headline
+    .item-headline
       i.fa.fa-archive(aria-hidden="true")
       span= _p('aside.card_archives')
-    div.archives_item!= list_archives({type:'monthly',format: 'YYYY年MM月'})
+    != list_archives({type:'monthly',format: 'YYYY年MM月'})

layout/includes/widget/card_author.pug

@@ -1,43 +1,36 @@
-.card_widget.card-author
+.card-widget.card-info
   .card-content
-    .post_data
-      .data-item.is_center
-        img.lazyload.avatar_img(src=url_for(theme.avatar) onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
-        p.author-info__name.is_center= config.author
-        p.author-info__description.is_center= config.description
+    .card-info-avatar.is-center
+      img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt="avatar")
+      .author-info__name= config.author
+      .author-info__description= config.description
 
-    .post_data.data_config
+    .card-info-data
       if site.posts.length
-        .data-item.is_center
-          .data_link
-            a(href=url_for(config.archive_dir) + '/')
-              p.headline= _p('aside.articles') 
-              p.length_num= site.posts.length
+        .card-info-data-item.is-center
+          a(href=url_for(config.archive_dir))
+            .headline= _p('aside.articles') 
+            .length_num= site.posts.length
 
       if site.tags.length
-        .data-item.is_center       
-          .data_link
-            a(href=url_for(config.tag_dir) + '/' )
-              p.headline= _p('aside.tags')
-              p.length_num= site.tags.length
+        .card-info-data-item.is-center       
+          a(href=url_for(config.tag_dir))
+            .headline= _p('aside.tags')
+            .length_num= site.tags.length
 
       if site.categories.length
-        .data-item.is_center      
-          .data_link
-            a(href=url_for(config.category_dir) + '/')
-              p.headline= _p('aside.categories') 
-              p.length_num= site.categories.length
+        .card-info-data-item.is-center      
+          a(href=url_for(config.category_dir))
+            .headline= _p('aside.categories') 
+            .length_num= site.categories.length
 
-    .post_data.is_center
-      a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') target="_self")
+    .card-info-bookmark.is-center
+      a#bookmark-it.bookmark.button--primary.button--animated(href="javascript:;" title= _p('aside.card_bookmark') target="_self")
         i.fa.fa-bookmark(aria-hidden="true")
         span= _p('aside.card_bookmark') || 'Follow Me'
-      
-  
   
     if(theme.social)
-      .post_data.data_config
-        #aside-social-icons 
+        .card-info-social-icons.is-center
           each url, icon in theme.social
-            a.social-icon.data-item(href=url target="_blank")
-              i(class=icon)
+            a.social-icon(href=url target="_blank")
+              i(class=icon aria-hidden="true")

layout/includes/widget/card_categories.pug

@@ -1,20 +1,20 @@
 if site.categories.length
-  .card_widget.card-categories
+  .card-widget.card-categories
       .card-content
-        .item_headline
+        .item-headline
           i.fa.fa-folder-open(aria-hidden="true")
           span= _p('aside.card_categories')
-        ul.aside_category_item        
+        ul.aside-category-item        
           mixin displayCategories(parent = undefined) 
             - site.categories.find({ parent }).sort("name").each(function(category) {
                 - var childCount = site.categories.find({ parent: category._id }).count();              
-                li.aside_category_list
-                  a.aside_category_list_link(href=url_for(category.path))
-                    span.aside_category_list_name= category.name
-                    span.aside_category_list_length= category.length
+                li.aside-category-list
+                  a.aside-category-list_link(href=url_for(category.path))
+                    span.aside-category-list_name= category.name
+                    span.aside-category-list_length= category.length
                   
                 if childCount > 0
-                  ul.aside_category_item.child
+                  ul.aside-category-item.child
                     +displayCategories(category._id)
             - })
 

layout/includes/widget/card_recent_post.pug

@@ -1,23 +1,27 @@
-.card_widget.card-recent-post
+.card-widget.card-recent-post
   .card-content
-    .item_headline
+    .item-headline
       i.fa.fa-history(aria-hidden="true")
       span= _p('aside.card_recent_post')
-    .aside_recent_item
+    .aside-recent-item 
       - site.posts.sort('date', -1).limit(5).each(function(article){
-        .aside_recent_post
+        .aside-recent-post
           - var link = article.link || article.path
+          - var title = article.title || _p('no_title')
+          - var no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-aside-cover' : ''
+          - var post_cover = article.cover
+
             a(href=url_for(link))
-              - var post_cover = article.cover
-              .aside_post_cover
-                if theme.lazyload.enable
-                  img.aside_post_bg.lazyload(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
-                else
-                  img.aside_post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
-              div#aside_title
-                .aside_post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
-                if (theme.post_meta.date_type)
-                  - var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
-                  time.aside_post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
+              if post_cover && theme.cover.aside_enable
+                .aside-post-cover
+                  if theme.lazyload.enable
+                    img.aside-post-bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
+                  else
+                    img.aside-post-bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.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')
+                if (theme.post_meta.page.date_type)
+                  - var date_type = theme.post_meta.page.date_type == 'updated' ? 'updated' : 'date'
+                  time.aside-post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
     
       - })

layout/includes/widget/card_tags.pug

@@ -1,7 +1,7 @@
 if site.tags.length
-  .card_widget.card-tags
+  .card-widget.card-tags
     .card-content
-      .item_headline
+      .item-headline
         i.fa.fa-tags(aria-hidden="true")
         span= _p('aside.card_tags')
-      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})
+      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#99a9bf'})

layout/includes/widget/card_webinfo.pug

@@ -1,24 +1,23 @@
-.card_widget.card-webinfo
+- 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.fa.fa-line-chart(aria-hidden="true")
+    .item-headline
+        i(class=webinfoIcon aria-hidden="true")
         span= _p('aside.card_webinfo.headline')
     .webinfo
-      .webinfo_item
-        .webinfo_article_name= _p('aside.card_webinfo.article_name') + " :"
-        .webinfo_article_count= site.posts.length      
+      .webinfo-item
+        .webinfo-article-name= _p('aside.card_webinfo.article_name') + " :"
+        .webinfo-article-count= site.posts.length      
       if theme.runtimeshow.enable
-        .webinfo_item
-          .webinfo_runtime_name= _p('aside.card_webinfo.runtime_name') + " :"
-          #webinfo_runtime_count.webinfo_runtime_count
-          script#runtionshow(src=url_for(theme.CDN.runtimeshow) start_date=theme.runtimeshow.start_date)       
-      
+        .webinfo-item
+          .webinfo-runtime-name= _p('aside.card_webinfo.runtime_name') + " :"
+          #webinfo-runtime-count.webinfo-runtime-count(start_date=theme.runtimeshow.start_date)      
       if theme.busuanzi.site_uv 
-        .webinfo_item       
-          .webinfo_site_uv_name= _p('aside.card_webinfo.site_uv_name') + " :"
-          .webinfo_site_uv_count#busuanzi_value_site_uv
+        .webinfo-item       
+          .webinfo-site-uv-name= _p('aside.card_webinfo.site_uv_name') + " :"
+          .webinfo-site-uv-count#busuanzi_value_site_uv
       if theme.busuanzi.site_pv
-        .webinfo_item
-          .webinfo_site_name= _p('aside.card_webinfo.site_pv_name') + " :"
-          .webinfo_site_pv_count#busuanzi_value_site_pv
+        .webinfo-item
+          .webinfo-site-name= _p('aside.card_webinfo.site_pv_name') + " :"
+          .webinfo-site-pv-count#busuanzi_value_site_pv
 

layout/includes/widget/index.pug

@@ -0,0 +1,17 @@
+if theme.aside.enable 
+  if page.aside !== false
+    #aside_content.aside_content
+      if theme.aside.card_author
+        !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_announcement
+        !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_recent_post
+        !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_categories
+        !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_tags
+        !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_archives
+        !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_webinfo
+        !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})  

layout/index.pug

@@ -3,6 +3,4 @@ extends includes/layout.pug
 block content
   #recent-posts.recent-posts
     include includes/recent-posts.pug  
-    include includes/pagination.pug
-  #aside_content.aside_content
-    include includes/aside.pug
+    include includes/pagination.pug

layout/page-tags.pug

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

layout/page.pug

@@ -2,25 +2,11 @@ extends includes/layout.pug
 
 block content
   if page.type === 'tags'
-    .tag-cloud
-      .tag-cloud__title= _p('page.tag')
-        |  - 
-        span.tag-cloud__amount= site.tags.length
-      .tag-cloud-tags
-        include includes/page_tag.pug
-      if page.comments !== false
-        include includes/comments/index.pug
-    #aside_content.aside_content
-      include includes/aside.pug
-
+    include page-tags.pug
   else if page.type === 'link'
     include flink.pug
-      if page.comments !== false
-        include includes/comments/index.pug
-    #aside_content.aside_content
-      include includes/aside.pug
   else if page.type === 'categories'    
-    #post-content.category-content
+    .category-content
       .category-lists
         .category__title= _p('page.category')
           |  - 
@@ -28,14 +14,8 @@ block content
         div!= list_categories()
       if page.comments !== false
         include includes/comments/index.pug
-    #aside_content.aside_content
-      include includes/aside.pug
   else
-    article#page
-      h1= page.title
-      .article-container!= page.content
-      include includes/pagination.pug
+    #page
+      #article-container!= page.content
       if page.comments !== false
-        include includes/comments/index.pug
-    #aside_content.aside_content
-      include includes/aside.pug
+        include includes/comments/index.pug

layout/post.pug

@@ -1,79 +1,21 @@
 extends includes/layout.pug
 
-block top_img
-  - var top_img =  page.top_img || page.cover || theme.post_meta.top_img || theme.default_top_img
-  - var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
-  div#top-container(style=bg_img)
-    #post-info
-      #post-title
-          .posttitle= page.title || _p('no_title')
-      #post-meta
-        if (theme.post_meta.date_type)
-          if (theme.post_meta.date_type === 'both')
-            time.post-meta__date
-              i.fa.fa-calendar(aria-hidden="true")
-              =' '+_p('post.created')+' '+date(page.date, config.date_format)
-              span.post-meta__separator |
-              i.fa.fa-history(aria-hidden="true")
-              =' '+_p('post.updated')+' '+date(page.updated, config.date_format)
-          else
-            - var date_type = theme.post_meta.date_type === 'updated' ? 'updated' : 'date'
-            time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[=date(page[date_type], config.date_format)]
-                  
-        if (theme.post_meta.categories && page.categories.data.length > 0)
-          if (theme.post_meta.date_type)
-            span.post-meta__separator.mobile_hidden |
-          span.mobile_hidden
-            each item, index in page.categories.data
-              i.fa.fa-inbox.post-meta__icon(aria-hidden="true")
-              a(href=url_for(item.path)).post-meta__categories #[=item.name]
-              if (index < page.categories.data.length - 1)
-                i.fa.fa-angle-right(aria-hidden="true")
-        .post-meta-wordcount
-          if (theme.wordcount && theme.wordcount.enable)
-            i.fa.fa-file-word-o.post-meta__icon(aria-hidden="true")
-            span= _p('post.wordcount') + ': '
-            span.word-count= wordcount(page.content)
-            span.post-meta__separator |
-            i.fa.fa-clock-o.post-meta__icon(aria-hidden="true")
-            span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
-          if (theme.wordcount && theme.wordcount.enable && theme.busuanzi.page_pv)
-            span.post-meta__separator |
-          if theme.busuanzi.page_pv
-            i.fa.fa-eye.post-meta__icon(aria-hidden="true")        
-            span= _p('post.page_pv') + ': '
-            span#busuanzi_value_page_pv
-
-
 block content
   article#post(class="")
-    #post-content.article-container!= page.content
-  if (theme.post_copyright && theme.post_copyright.enable && page.copyright != false)
-    .post-copyright
-      .post-copyright__author
-        span.post-copyright-meta= _p('post.copyright.author') + ": "
-        span.post-copyright-info
-          a(href=`mailto:${config.email}`) #[=config.author]
-      .post-copyright__type
-        span.post-copyright-meta= _p('post.copyright.link') + ": "
-        span.post-copyright-info
-          a(href=url_for(page.permalink)) #[=page.permalink]
-      .post-copyright__notice
-        span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
-        span.post-copyright-info!= _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
-  
-  .tag_share
-    if (theme.post_meta.tags)
-      .post-meta__tag-list
-        each item, index in page.tags.data
-          a(href=url_for(item.path)).post-meta__tags #[=item.name]    
-    include includes/share/index.pug
+    #article-container!=page.content
+    include includes/post/post-copyright.pug
+    .tag_share
+      if (theme.post_meta.post.tags)
+        .post-meta__tag-list
+          each item, index in page.tags.data
+            a(href=url_for(item.path)).post-meta__tags #[=item.name]    
+      !=partial('includes/share/index', {}, {cache:theme.fragment_cache})
         
-  if theme.reward.enable
-    include includes/reward.pug
-  include includes/pagination.pug
-  
-  if theme.related_post && theme.related_post.enable
-    != related_posts(page,site.posts)
-  if page.comments !== false
-    include includes/comments/index.pug
+    if theme.reward.enable
+      !=partial('includes/post/reward', {}, {cache:theme.fragment_cache})
+    include includes/pagination.pug
+    
+    if theme.related_post && theme.related_post.enable
+      != related_posts(page,site.posts)
+    if page.comments !== false
+      include includes/comments/index.pug

layout/tag.pug

@@ -6,13 +6,9 @@ block content
     #recent-posts.recent-posts    
       +UI_NEW(page.posts)
       include includes/pagination.pug
-    #aside_content.aside_content
-      include includes/aside.pug
   else
     include ./includes/mixins/article-sort.pug
     #tag
       .article-sort-title= _p('page.tag') + ' - ' + page.tag
       +articleSort(page.posts)
-      include includes/pagination.pug
-    #aside_content.aside_content
-      include includes/aside.pug
+      include includes/pagination.pug

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "hexo-theme-melody",
-  "version": "2.0.0",
+  "name": "hexo-theme-butterfly",
+  "version": "2.2.0",
   "description": "A Hexo Theme: Butterfly"
 }

scripts/events/404.js

@@ -0,0 +1,8 @@
+hexo.extend.generator.register('404', function(locals){
+  if (!hexo.theme.config.error_404.enable) return
+  return {
+    path: '404.html',
+    data: locals.posts,
+    layout: ['404']
+  }
+});

scripts/filters/hide-post.js

@@ -0,0 +1,63 @@
+/**
+ * global hexo
+ * from printempw/hexo-hide-posts
+ * modify by Jerry
+ */
+
+'use strict';
+
+var public_generators = [];
+
+hexo.extend.filter.register('before_generate', function () {
+  this._bindLocals();
+
+  const all_posts = this.locals.get('posts');
+  const hidden_posts = all_posts.find({
+    'hide': true
+  });
+  const normal_posts = all_posts.filter(post => !post['hide']);
+
+  this.locals.set('all_posts', all_posts);
+  this.locals.set('hidden_posts', hidden_posts);
+  this.locals.set('posts', normal_posts);
+});
+
+hexo.extend.filter.register('after_init', function () {
+
+  const original = {};
+  for (const name in hexo.extend.generator.list()) {
+    original[name] = hexo.extend.generator.get(name);
+  }
+
+  hexo.extend.generator.register('post', async function (locals) {
+    const fg = original.post.bind(this);
+
+    const generated_public = await fg(locals);
+    const generated_hidden = await fg(Object.assign({}, locals, {
+      posts: locals.hidden_posts
+    }));
+
+    // Remove post.prev and post.next for hidden posts
+    generated_hidden.forEach(ele => {
+      ele.data.prev = ele.data.next = null;
+    });
+
+    return generated_public.concat(generated_hidden);
+  });
+
+  // Then we hack into other generators if necessary
+  public_generators.filter(
+    name => Object.keys(original).includes(name)
+  ).forEach(name => {
+    // Overwrite original generator
+    hexo.extend.generator.register(name, function (locals) {
+      const fg = original[name].bind(this);
+
+      return fg(Object.assign({}, locals, {
+        posts: new locals.posts.constructor(
+          locals.posts.data.concat(locals.hidden_posts.data)
+        )
+      }));
+    });
+  });
+});

scripts/filters/post-lazyload.js

@@ -0,0 +1,30 @@
+'use strict';
+
+const fs = require('hexo-fs');
+const url_for = require('hexo-util').url_for.bind(hexo);
+
+function lazyProcess(htmlContent)  {
+  var bg = url_for(hexo.theme.config.lodding_bg.post);
+  return htmlContent.replace(/<img(\s*?)src="(.*?)"(.*?)>/gi, (str, p1, p2, p3)  =>  {
+    if (/data-src/gi.test(str)) {
+      return str;
+    }
+    if (/class="(.*?)"/gi.test(str)){
+      str = str.replace(/class="(.*?)"/gi, (classStr, p1) => {
+        return classStr.replace(p1, `${p1} lazyload`);
+      })
+      str = str.replace(p2, `${bg}`)
+      return str.replace(p3, `${p3} data-src="${p2}"`);
+    }
+    str = str.replace(p2, `${bg}`)
+    return str.replace(p3, `${p3} class="lazyload" data-src="${p2}"`);
+  });
+}
+
+var processPost = function(data) {
+  if (!hexo.theme.config.lazyload.enable) return;
+  data.content = lazyProcess.call(this, data.content);
+  return data;
+};
+
+hexo.extend.filter.register('after_post_render', processPost);

scripts/filters/random-cover.js

@@ -0,0 +1,23 @@
+hexo.extend.filter.register("before_post_render", function(data) {
+  if (data.cover == false) {
+    data.randomcover = random_cover();
+    return data;
+  }
+  data.cover = data.cover || random_cover();
+  return data;
+});
+
+var random_cover = function() {
+  var cover;
+  var num;
+  if (!Array.isArray(hexo.theme.config.cover.default_cover)) {
+    cover = hexo.theme.config.cover.default_cover;
+    return cover;
+  } else {
+    num = Math.floor(
+      Math.random() * hexo.theme.config.cover.default_cover.length
+    );
+    cover = hexo.theme.config.cover.default_cover[num];
+    return cover;
+  }
+};

scripts/gallery-tag.js

@@ -1,6 +0,0 @@
-function gallery(args, content) {
-  return `<div class="justified-gallery">${hexo.render.renderSync({text: content, engine: 'markdown'})}
-          </div>`;
-}
-
-hexo.extend.tag.register('gallery', gallery, {ends: true});

scripts/helpers/list-archives.js

@@ -0,0 +1,103 @@
+"use strict";
+
+hexo.extend.helper.register("list_archives", function(options = {}) {
+  const { config } = this;
+  const archiveDir = config.archive_dir;
+  const { timezone } = config;
+  const lang = this.page.lang || this.page.language || config.language;
+  let { format } = options;
+  const type = options.type || "monthly";
+  const { style = "list", transform, separator = ", " } = options;
+  const showCount = Object.prototype.hasOwnProperty.call(options, "show_count")
+    ? options.show_count
+    : true;
+  const order = options.order || -1;
+  const limit = 8;
+  let result = "";
+
+  var more_button;
+  if (lang === "zh-CN") {
+    more_button = "查看更多";
+  } else if (lang === "zh-TW") {
+    more_button = "查看更多";
+  } else {
+    more_button = "More";
+  }
+
+  if (!format) {
+    format = type === "monthly" ? "MMMM YYYY" : "YYYY";
+  }
+
+  const posts = this.site.posts.sort("date", order);
+  if (!posts.length) return result;
+
+  const data = [];
+  let length = 0;
+
+  posts.forEach(post => {
+    // Clone the date object to avoid pollution
+    let date = post.date.clone();
+
+    if (timezone) date = date.tz(timezone);
+    if (lang) date = date.locale(lang);
+
+    const year = date.year();
+    const month = date.month() + 1;
+    const name = date.format(format);
+    const lastData = data[length - 1];
+
+    if (!lastData || lastData.name !== name) {
+      length = data.push({
+        name,
+        year,
+        month,
+        count: 1
+      });
+    } else {
+      lastData.count++;
+    }
+  });
+
+  const link = item => {
+    let url = `${archiveDir}/${item.year}/`;
+
+    if (type === "monthly") {
+      if (item.month < 10) url += "0";
+      url += `${item.month}/`;
+    }
+
+    return this.url_for(url);
+  };
+
+  result += `<ul class="archive-list">`;
+
+  for (let i = 0, len = data.length; i < Math.min(len, limit); i++) {
+    const item = data[i];
+
+    result += `<li class="archive-list-item">`;
+
+    result += `<a class="archive-list-link" href="${link(item)}">`;
+    result += `<span class="archive-list-date">`;
+    result += transform ? transform(item.name) : item.name;
+    result += `</span>`;
+
+    if (showCount) {
+      result += `<span class="archive-list-count">${item.count}</span>`;
+    }
+    result += "</a>";
+    result += "</li>";
+  }
+
+  if (data.length > limit) {
+    result += `<li class="archive-list-item">`;
+    result +=
+      `<a class="archive-list-link-more" href="` +
+      "/" +
+      `${archiveDir}" >`;
+    result += more_button;
+    result += "</a>";
+    result += "</li>";
+  }
+  result += "</ul>";
+  return result;
+});

scripts/helpers/related-post.js

@@ -0,0 +1,90 @@
+hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
+  var relatedPosts = [];
+  currentPost.tags.forEach(function (tag) {
+    allPosts.forEach(function (post) {
+      if (isTagRelated(tag.name, post.tags)) {
+        var relatedPost = {
+          title: post.title,
+          path: post.path,
+          cover: post.cover,
+          randomcover: post.randomcover,
+          weight: 1,
+          updated: post.updated,
+          created: post.date
+        };
+        var index = findItem(relatedPosts, 'path', post.path);
+        if (index != -1) {
+          relatedPosts[index].weight += 1;
+        } else {
+          if (currentPost.path != post.path) {
+            relatedPosts.push(relatedPost);
+          };
+        };
+      };
+    });
+  });
+  if (relatedPosts.length == 0) {
+    return ''
+  };
+  var result = "";
+  const hexoConfig = hexo.theme.config.rootConfig;
+  const config = hexo.theme.config;
+
+  var limit_num = config.related_post.limit || 6
+  var date_type = config.related_post.date_type || 'created'
+  var headline_lang = this._p('post.recommend')
+  
+  relatedPosts = relatedPosts.sort(compare('weight'));
+  var lazy_src = config.lazyload.enable ? lazy_src = 'data-src' : lazy_src = 'src'
+  var lazy_class = config.lazyload.enable ? lazy_class = 'lazyload' : lazy_class = ''
+
+  if (relatedPosts.length > 0) {
+    result += '<div class="relatedPosts">'
+    result += '<div class="relatedPosts_headline"><i class="fa fa-fw fa-thumbs-up" aria-hidden="true"></i><span>' + ' ' + headline_lang + '</span></div>'
+    result += '<div class="relatedPosts_list">'
+
+    for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) {
+      var cover = relatedPosts[i].cover === false ? relatedPosts[i].randomcover : relatedPosts[i].cover
+      result += '<div class="relatedPosts_item"><a href="' + hexoConfig.root + relatedPosts[i].path + '" title="' + relatedPosts[i].title + '">';
+      result += '<img class="relatedPosts_cover ' + lazy_class + '"' + lazy_src + '="' + cover + '">';
+      if (date_type == 'created') {
+        result += '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="fa fa-calendar fa-fw" aria-hidden="true"></i>' + ' ' + this.date(relatedPosts[i].created,hexoConfig.date_format) + '</div>'
+      } else {
+        result += '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="fa fa-history fa-fw" aria-hidden="true"></i>' + ' ' + this.date(relatedPosts[i].updated,hexoConfig.date_format) + '</div>'
+      }
+      result += '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>';
+      result += '</div></a></div>'
+    };
+
+    result += '</div><div class="clear_both"></div></div>'
+    return result;
+
+  }
+});
+
+function isTagRelated(tagName, TBDtags) {
+  var result = false;
+  TBDtags.forEach(function (tag) {
+    if (tagName == tag.name) {
+      result = true;
+    };
+  })
+  return result;
+}
+
+function findItem(arrayToSearch, attr, val) {
+  for (var i = 0; i < arrayToSearch.length; i++) {
+    if (arrayToSearch[i][attr] == val) {
+      return i
+    };
+  };
+  return -1;
+}
+
+function compare(attr) {
+  return function (a, b) {
+    var val1 = a[attr];
+    var val2 = b[attr];
+    return val2 - val1;
+  }
+}

scripts/list_archives.js

@@ -1,133 +0,0 @@
-'use strict';
-
-hexo.extend.helper.register('list_archives', function (options = {}) {
-
-  const {
-    config
-  } = this;
-  const archiveDir = config.archive_dir;
-  const {
-    timezone
-  } = config;
-  const lang = this.page.lang || this.page.language || config.language;
-  let {
-    format
-  } = options;
-  const type = options.type || 'monthly';
-  const {
-    style = 'list', transform, separator = ', '
-  } = options;
-  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true;
-  const className = options.class || 'archive';
-  const order = options.order || -1;
-  const limit = 8;
-  let result = '';
-
-  var more_button
-  if (lang === 'zh-CN') {
-    more_button = '查看更多';
-  } else if (lang === 'zh-TW') {
-    more_button = '查看更多';
-  } else {
-    more_button = 'More';
-  }
-
-
-  if (!format) {
-    format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY';
-  }
-
-  const posts = this.site.posts.sort('date', order);
-  if (!posts.length) return result;
-
-  const data = [];
-  let length = 0;
-
-  posts.forEach(post => {
-    // Clone the date object to avoid pollution
-    let date = post.date.clone();
-
-    if (timezone) date = date.tz(timezone);
-    if (lang) date = date.locale(lang);
-
-    const year = date.year();
-    const month = date.month() + 1;
-    const name = date.format(format);
-    const lastData = data[length - 1];
-
-    if (!lastData || lastData.name !== name) {
-      length = data.push({
-        name,
-        year,
-        month,
-        count: 1
-      });
-    } else {
-      lastData.count++;
-    }
-  });
-
-  const link = item => {
-    let url = `${archiveDir}/${item.year}/`;
-
-    if (type === 'monthly') {
-      if (item.month < 10) url += '0';
-      url += `${item.month}/`;
-    }
-
-    return this.url_for(url);
-  };
-
-  if (style === 'list') {
-    result += `<ul class="${className}-list">`;
-
-    for (let i = 0, len = data.length; i < Math.min(len, limit); i++) {
-      const item = data[i];
-
-      result += `<li class="${className}-list-item">`;
-
-      result += `<a class="${className}-list-link" href="${link(item)}">`;
-      result += transform ? transform(item.name) : item.name;
-
-
-      if (showCount) {
-        result += `<span class="${className}-list-count">${item.count}</span>`;
-      }
-      result += '</a>';
-      result += '</li>';
-
-    }
-
-    if (data.length > limit) {
-      result += `<li class="${className}-list-item">`;
-      result += `<a class="${className}-list-link is_center" href="` + '/' + `${archiveDir}" >`;
-      result += more_button;
-      result += '</a>';
-      result += '</li>';
-    }
-    result += '</ul>';
-  } else {
-    for (let i = 0, len = data.length; i < Math.min(len, limit); i++) {
-      const item = data[i];
-
-      if (i) result += separator;
-
-      result += `<a class="${className}-link" href="${link(item)}">`;
-      result += transform ? transform(item.name) : item.name;
-
-      if (showCount) {
-        result += `<span class="${className}-count">${item.count}</span>`;
-      }
-
-      result += '</a>';
-    }
-    if (data.length > limit) {
-      result += `<a class="${className}-link" is_center" href="${archiveDir}" >`;
-      result += more_button;
-      result += '</a>';
-    }
-
-  }
-
-  return result;
-})

scripts/post-lazyload.js

@@ -1,19 +0,0 @@
-'use strict';
-hexo.extend.filter.register('after_post_render', data => {
-  var theme = hexo.theme.config;
-  if (!theme.lazyload.enable) return;
-
-  const cheerio = require('cheerio');
-
-  const $ = cheerio.load(data.content, {decodeEntities: false});
-  const images = $('img');
-  if (!images.length) return;
-
-  images.each((i, o) => {
-    let src = $(o).attr('src');
-    $(o).attr('data-src', src).removeAttr('src');
-    $(o).addClass('lazyload');
-  });
-
-  data.content = $.html();
-}, 100);

scripts/random_cover.js

@@ -1,18 +0,0 @@
-hexo.extend.filter.register('before_post_render', function(data){
-  data.cover = data.cover || random_cover()
-  return data;
-});
-
-var random_cover = function () {
-  var cover;
-  var num;
-  if (!Array.isArray(hexo.theme.config.default_cover)) {
-    cover = hexo.theme.config.default_cover
-    return cover
-  } else {
-    num = Math.floor(Math.random() * (hexo.theme.config.default_cover.length));
-    cover = hexo.theme.config.default_cover[num];
-    return cover
-  }
-
-}

scripts/related_post.js

@@ -1,86 +0,0 @@
-hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
-  var relatedPosts = [];
-  currentPost.tags.forEach(function (tag) {
-    allPosts.forEach(function (post) {
-      if (isTagRelated(tag.name, post.tags)) {
-        var relatedPost = {
-          title: post.title,
-          path: post.path,
-          cover: post.cover,
-          weight: 1
-        };
-        var index = findItem(relatedPosts, 'path', post.path);
-        if (index != -1) {
-          relatedPosts[index].weight += 1;
-        } else {
-          if (currentPost.path != post.path) {
-            relatedPosts.push(relatedPost);
-          };
-        };
-      };
-    });
-  });
-  if (relatedPosts.length == 0) { return '' };
-  var result = "";
-  var limit_num = hexo.theme.config.related_post.limit || 6
-  var lang = hexo.theme.config.rootConfig.language;
-  var headline_lang;
-  if (lang === 'zh-CN') {
-    headline_lang = '相关推荐';
-  } else if ( lang === 'zh-TW') {
-    headline_lang = '相關推薦';
-  } else {
-    headline_lang = 'Recommend';
-  }
-    
-  relatedPosts = relatedPosts.sort(compare('weight'));
-  var lazy_src = hexo.theme.config.lazyload.enable ? lazy_src = 'data-src' : lazy_src = 'src'
-  var lazy_class = hexo.theme.config.lazyload.enable ? lazy_class  = 'lazyload' : lazy_class  = ''
-
-  if (relatedPosts.length > 0) {
-    result += '<div class="relatedPosts">'
-    result += '<div class="relatedPosts_headline"><i class="fa fa-fw fa-thumbs-up" aria-hidden="true"></i><span>' + ' ' + headline_lang + '</span></div>'
-    result += '<div class="relatedPosts_list">'
-  
-  for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) {
- 
-    var cover = relatedPosts[i].cover
-
-    result += '<div class="relatedPosts_item"><a href="' + hexo.theme.config.rootConfig.root + relatedPosts[i].path + '" title="' + relatedPosts[i].title + '">';
-    result += '<img class="relatedPosts_cover '+ lazy_class + '"' + lazy_src + '="' + cover + '">';
-    result += '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>';
-    result += '</a></div>'
-    };
-    
-    result += '</div><div class="clear_both"></div></div>'
-  return result;
-
-}
-});
-hexo.extend.helper.register('echo', function(path){
-return path;
-});
-function isTagRelated (tagName, TBDtags) {
-  var result = false;
-  TBDtags.forEach(function (tag) {
-      if (tagName == tag.name) {
-          result = true;
-      };
-  })
-  return result;
-}
-function findItem (arrayToSearch, attr, val) {
-  for (var i = 0; i < arrayToSearch.length; i++) {
-      if (arrayToSearch[i][attr] == val) {
-          return i
-      };
-  };
-  return -1;
-}
-function compare (attr) {
-  return function (a, b) {
-      var val1 = a[attr];
-      var val2 = b[attr];
-      return val2 - val1;
-  }
-}

scripts/tags/gallery.js

@@ -0,0 +1,27 @@
+const url_for = require('hexo-util').url_for.bind(hexo);
+
+function gallery(args, content) {
+  return `<div class="justified-gallery">${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+          </div>`;
+}
+
+function galleryGroup(args){
+  const name = args[0]
+  const desrc = args[1]
+  const url = url_for(args[2])
+  const img = url_for(args[3])
+
+  return `
+  <figure class="gallery-group">
+  <img class="gallery-group-img" src='${img}'>
+  <figcaption>
+  <div class="gallery-group-name">${name}</div>
+  <p>${desrc}</p>
+  <a href='${url}'></a>
+  </figcaption>
+  </figure>
+  `
+}
+
+hexo.extend.tag.register('gallery', gallery, {ends: true});
+hexo.extend.tag.register('galleryGroup', galleryGroup);

scripts/tags/hide.js

@@ -0,0 +1,33 @@
+
+/**
+  * {% hideInline content,display,bg,color %}
+  * content不能包含當引號，可用 '
+ */
+function hideInline(args) {
+  args = args.join(' ').split(',')
+  let content = args[0].trim()
+  let display = args[1] || 'Click'
+  let bg = args[2] ==='' || typeof args[2] ==='undefined' ? '' : `background-color:${args[2]}`
+  let color = args[3] || '#fff'
+   return `<span class="hide-inline"><a class="hide-button button--primary button--animated" style="color:${color};${bg}">${display}
+    </a><span class="hide-content">${content}</span></span>`
+}
+
+/**
+  * {% hideBlock display,bg,color %}
+  * content
+  * {% endhideBlock %}
+ */
+function hideBlock(args,content) {
+  args = args.join(' ').split(',')
+  let display = args[0] || 'Click'
+  let bg = args[1] ==='' || typeof args[2] ==='undefined' ? '' : `background-color:${args[2]}`
+  let color = args[2] || '#fff'
+
+   return `<div class="hide-block"><a class="hide-button button--primary button--animated" style="color:${color};${bg}">${display}
+    </a><span class="hide-content">${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}</span></div>`
+
+}
+
+hexo.extend.tag.register('hideInline', hideInline);
+hexo.extend.tag.register('hideBlock', hideBlock, {ends: true});

scripts/tags/mermaid.js

@@ -0,0 +1,7 @@
+function mermaid(args, content) {
+  return `<div class="mermaid">
+          ${content}
+          </div>`;
+}
+
+hexo.extend.tag.register('mermaid', mermaid, {ends: true});

scripts/url_check.js

@@ -1,8 +0,0 @@
-hexo.extend.helper.register('url_check', function (p) {
-  
-    let src = p ;
-    let reg = /^https?/ig;
-    return reg.test(src)
-    
-  
-})

source/css/_global/index.styl

@@ -4,14 +4,13 @@ html
 
 body
   position: relative
-  display: flex
-  flex-direction: column
   min-height: 100%
-  background: #fff
+  background: $body-bg
   color: $font-black
   font-size: $font-size
   font-family: $font-family
   line-height: $text-line-height
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
 
   if !hexo-config('copy.enable')
     user-select: none
@@ -19,13 +18,6 @@ body
     -webkit-user-select: none
     -ms-user-select: none
 
-#body-wrap
-  position relative
-  flex: 1 auto
-  display: flex
-  flex-direction: column
-  transition: all .3s
-
 *::-webkit-scrollbar
   width: 8px
   height: 8px
@@ -36,18 +28,16 @@ body
 *::-webkit-scrollbar-track
   background-color: transparent
 
-
 #web_bg
-  background: $web-bg
-  height: 100%
-  width: 100%
-  background-size: cover
   position: fixed
   z-index: -999
+  width: 100%
+  height: 100%
+  background: $web-bg
   background-attachment: local
-  background-repeat: no-repeat
   background-position: center
-  
+  background-size: cover
+  background-repeat: no-repeat
 
 h1,
 h2,
@@ -56,40 +46,31 @@ h4,
 h5,
 h6
   position: relative
-  margin: 0.2rem 0
+  margin: 1rem 0 .7rem
   color: lighten($font-color, 15%)
   font-weight: bold
 
-  code  
+  code
     font-size: inherit !important
 
-#content-outer
-  flex: 1 auto
-
 *
   box-sizing: border-box
 
-#content-inner
-  .img-alt
-    text-decoration: none
-    color: $a-link-color
-
 #toggle-sidebar
   position: fixed
   bottom: $sidebar-icon-top
   left: $sidebar-icon-left
   z-index: 100
   font-size: $sidebar-icon-size
-  cursor: pointer
-  transition: all 0.2s
   opacity: 0
+  cursor: pointer
+  transition: all .2s
 
 hr
   position: relative
   margin: 2rem auto
   width: calc(100% - 4px)
-  border: 2px dashed $pale-blue
-  background: $white
+  border: 2px dashed lighten($theme-hr-color, 50%)
 
   &:hover
     &:before
@@ -100,62 +81,63 @@ hr
     top: $hr-icon-top
     left: 5%
     z-index: 1
-    color: $light-blue
+    color: $theme-hr-color
     content: $hr-icon
-    font: normal normal normal 14px / 1 FontAwesome
+    font-style: normal
+    font-variant: normal
     font-size: 20px
+    line-height: 1
     transition: all 1s ease-in-out
+    text-rendering: auto
+    -webkit-font-smoothing: antialiased
 
-// collapse/expand beautify
-details
-  padding: 0.3rem
-  border: 2px solid darken($light-grey, 10%)
+    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
 
-  summary
-    color: $theme-color
-
-// set <caption> of <figure> to center-align
-// use class="not-code" to avoid conflicts because code also use <figure> tag
-.not-code
-  margin: 0.5em
-  padding: 0.5em
-  border: thin silver solid
-  text-align: center
+iframe
+  margin: 0 0 1rem
 
 table
+  display: block
   overflow: auto
+  margin: 0 0 1rem
   width: 100%
   border-spacing: 0
   border-collapse: collapse
+  empty-cells: show
 
   thead
-    background: alpha($a-link-color, 10%)
+    background: alpha($table-thead-bg, 10%)
 
   th,
   td
-    padding: 0.3rem 0.6rem
+    padding: .3rem .6rem
     border: 1px solid darken($light-grey, 10%)
-    vertical-align: top
+    vertical-align: middle
 
 *::selection
-  background: $selection
-  color: $pale-grey
+  background: $theme-text-selection-color
+  color: #F7F7F7
 
-
-.full_page #site-title, 
-.full_page #site-sub-title, 
+// font
+#nav #site_title,
+#nav #site_subtitle,
 #site-name,
 #aside_content .author-info__name,
 #aside_content .author-info__description
   font-family: $site-name-font
 
 .is_right
-  text-align: right 
+  text-align: right
 
 .is_left
   text-align: left
 
-.is_center
+.is-center
   text-align: center
 
 .is_visible
@@ -173,79 +155,99 @@ table
 .pull_right
   float: right
 
-.fireworks
-  position: fixed
-  z-index: -1
-  pointer-events: none
+// button hover
+.button--primary
+  color: $theme-button-hover-color
 
+.button--animated
+  transition-duration: 1s
+  transition-property: color
 
-.fireworks
-  z-index: 99999
+  &:before
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: -1
+    background: $theme-button-hover-color
+    content: ''
+    transition-timing-function: ease-out
+    transition-duration: .5s
+    transition-property: transform
+    transform: scaleX(0)
+    transform-origin: 0 50%
 
-@media screen and (max-width: $bg)
-  i#toggle-sidebar,
-  #sidebar
-    display: none
+  &:hover
+    &:before
+      transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
+      transform: scaleX(1)
 
-  body
-    padding-left: 0 !important
-
-
-// 懶加載
-.lazyload,
-.lazyloading 
-	opacity: 0
-
-.lazyloaded 
-	opacity: 1
-	transition: opacity 0.3s
-
-img[src=""],img:not([src])
+img[src=''],
+img:not([src])
   opacity: 0
 
-.justified-gallery
-  img 
-    opacity 0
-  .fancybox 
-    width: auto
-    text-align: inherit    
-  .img-alt
-    display: none
-
-.medium-zoom-image--opened
-  margin: 0 !important
-  z-index: 99999 !important
-
-.medium-zoom-overlay
-  z-index: 99999 !important
-
 // hexo tag video
 .video-container
   position: relative
+  overflow: hidden
+  margin-bottom: .8rem
   padding-top: 56.25%
   height: 0
-  overflow: hidden
-  margin-bottom: 0.8rem
 
   iframe
     position: absolute
     top: 0
     left: 0
+    margin-top: 0
     width: 100%
     height: 100%
-    margin-top: 0
 
+// tag-hide
+.hide-inline,
+.hide-block
+  & > .hide-button
+    position: relative
+    z-index: 1
+    display: inline-block
+    padding: 0 1rem
+    background: $tag-hide-bg
+    text-align: center
+    cursor: pointer
 
-.layout_page,
-.layout_post,
+    &:hover
+      text-decoration: none !important
+
+  & > .hide-content
+    display: none
+
+.hide-inline
+  & > .hide-button
+    margin: 0 .3rem
+
+  & > .hide-content
+    margin: 0 .3rem
+
+.hide-block
+  margin: 0 0 .8rem
+
+.comment_headling
+  margin-bottom: 10px
+  font-weight: 700
+  font-size: 20px
+
+#content-inner,
 #footer
   animation: main 1s
 
-#nav,
-#top-container
-  animation: header 1s
+#nav
+  animation: nav-effect 1s
 
-#site-title
+#page-header
+  animation: header-effect 1s
+
+#site_title,
+#site_subtitle
   animation: titlescale 1s
 
 canvas,
@@ -253,60 +255,95 @@ canvas,
   animation: to_show 4s
 
 .card-announcement-animation
-  animation: announ_animation .8s linear infinite
   color: #FF0000
+  animation: announ_animation .8s linear infinite
 
 .scroll-down-effects
   animation: scroll-down-effect 1.5s infinite
 
-if hexo-config("avatar_effect") == true
-  .avatar_img
+if hexo-config('avatar.effect') == true
+  .avatar-img
     animation: avatar_turn_around 2s linear infinite
 
 .reward-main
   animation: donate_effcet .3s .1s ease both
 
-#rightside-config-hide
-  animation: rightside_in_animate .3s
+.tocOpenPc
+  .sidebar-toc__title
+    animation: tocsidebarLtoR .5s
+
+  .sidebar-toc__progress
+    animation: tocsidebarLtoR .7s
+
+  .sidebar-toc__content
+    animation: tocsidebarLtoR .9s
+
+.tocOpenMobile
+  .sidebar-toc__title
+    animation: tocsidebarRtoL .5s
+
+  .sidebar-toc__progress
+    animation: tocsidebarRtoL .5s
+
+  .sidebar-toc__content
+    animation: tocsidebarRtoL .7s
 
 @keyframes scroll-down-effect
   0%
-    opacity: 0.4
     top: 0
+    opacity: .4
+
   50%
-    opacity: 1
     top: -16px
+    opacity: 1
+
   100%
-    opacity: 0.4
     top: 0
-    
-@keyframes header 
-  0% 
+    opacity: .4
+
+@keyframes nav-effect
+  0%
     opacity: 0
     transform: translateY(-50px)
-  100% 
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes header-effect
+  0%
+    opacity: 0
+
+  50%
+    opacity: 0
+    transform: translateY(-50px)
+
+  100%
     opacity: 1
     transform: translateY(0)
 
 @keyframes headerNoOpacity
-  0% 
+  0%
     transform: translateY(-50px)
-  100% 
+
+  100%
     transform: translateY(0)
 
 @keyframes main
-  0% 
+  0%
     opacity: 0
     transform: translateY(50px)
-  100% 
+
+  100%
     opacity: 1
     transform: translateY(0)
 
 @keyframes titlescale
   0%
     opacity: 0
-    transform: scale(0.7)
-  100% 
+    transform: scale(.7)
+
+  100%
     opacity: 1
     transform: scale(1)
 
@@ -314,19 +351,22 @@ if hexo-config("avatar_effect") == true
   0%
     opacity: 1
     transform: scale(1)
-  100% 
+
+  100%
     opacity: 0
-    transform: scale(0.7)
+    transform: scale(.7)
 
 @keyframes to_show
   0%
     opacity: 0
+
   100%
     opacity: 1
- 
+
 @keyframes avatar_turn_around
   from
-    transform: rotate(0deg)
+    transform: rotate(0)
+
   to
     transform: rotate(360deg)
 
@@ -334,6 +374,7 @@ if hexo-config("avatar_effect") == true
   0%
     opacity: 0
     transform: translateY(10px)
+
   100%
     opacity: 1
     transform: translateY(0)
@@ -342,31 +383,36 @@ if hexo-config("avatar_effect") == true
   0%
     opacity: 0
     transform: translateY(-20px)
+
   100%
     opacity: 1
     transform: translateY(0)
 
 @keyframes announ_animation
-  0%,to
+  0%,
+  to
     transform: scale(1)
+
   50%
     transform: scale(1.2)
 
-@keyframes rightside_in_animate
-  0%    
-    transform: translateX(28px)
+@keyframes sidebarItem
+  0%
+    transform: translateX(200px)
+
   100%
     transform: translateX(0)
 
-@keyframes rightside_out_animate
-  0%    
-    transform: translateX(0)
-  100%
-    transform: translateX(28px)
+@keyframes tocsidebarRtoL
+  0%
+    transform: translateX(200px)
+
+  100%
+    transform: translateX(0)
+
+@keyframes tocsidebarLtoR
+  0%
+    transform: translateX(-200px)
 
-@keyframes right_to_left
-  0%    
-    transform: translateX(100px)
   100%
     transform: translateX(0)
-  

source/css/_highlight/highlight.styl

@@ -1,58 +1,66 @@
 // https://github.com/equinusocio/vsc-material-theme
-@require "theme"
-@require "diff"
+@require 'theme'
+@require 'diff'
 
-wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap")
+wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
 
 $code-block
   overflow: auto
-  margin: 1rem 0
+  margin: 0 0 1rem
   padding: 0
-  padding-top: 1.4rem
   background: $highlight-background
   color: $highlight-foreground
-  font-size: $code-font-size
   line-height: $line-height-code-block
 
   if wordWrap
     counter-reset: line
     white-space: pre-wrap
 
+.code-area-wrap
+  position: relative
+  margin: 0 0 1rem
+
 figure.highlight
   position: relative
 
 blockquote
-  margin: 0
-  padding: 0.1rem 0.8rem
-  border-left: 0.2rem solid $blockquote-padding-color
+  margin: 0 0 1rem
+  padding: .1rem .8rem
+  border-left: .2rem solid $blockquote-padding-color
+  background-color: $blockquote-background-color
   color: $blockquote-color
-  background-color: lighten($blockquote-padding-color,33)
+
+  a
+    word-break: break-all
 
   p
     margin: 0 !important
-    padding: 0.5rem 0
+    padding: .5rem 0
 
   footer
-    padding: 0 0 0.5rem 0
-    cite 
-      &:before
-        content: "—"
-        padding: 0 .3em
+    padding: 0 0 .5rem
 
-.article-container
+    cite
+      &:before
+        padding: 0 .3em
+        content: '—'
+
+#article-container
   pre,
   code
     font-family: $code-font !important
 
   code
-    padding: 0.1rem 0.2rem
+    padding: .1rem .2rem
     background: $code-background
     color: $code-foreground
     word-wrap: break-word
-    font-size: $code-font-size
+    word-break: break-word
+    overflow-wrap: break-word
 
   pre
     @extend $code-block
+    padding: 10px 20px
 
     code
       padding: 0
@@ -61,20 +69,13 @@ blockquote
       text-shadow: none
 
   figure.highlight
-    &:after
-      position: absolute
-      top: 0
-      z-index: 0
-      min-width: 100%
-      height: 1.4rem
-      background: darken($highlight-background, 5)
-      content: ""
-
-  .highlight
     @extend $code-block
     position: relative
     border-radius: 1px
 
+    if hexo-config('highlight_shrink') == true
+      display: none
+
     pre
       margin: 0
       padding: 8px 0
@@ -88,54 +89,34 @@ blockquote
       if wordWrap
         &:before
           display: inline-block
-          padding: 0 0.3rem 0 0
+          padding: 0 .3rem 0 0
           min-width: 1.6rem
           color: $highlight-gutter.color
           content: counter(line)
           counter-increment: line
           text-align: left
 
+      &.marked
+        background-color: $highlight-selection
+
     table
       position: relative
+      display: table
       margin: 0
       width: auto
       border: none
 
-      if hexo-config('highlight_shrink') == true
-        display: none
-
-      &:after
-        position: absolute
-        top: -1.4rem
-        z-index: 0
-        width: 100%
-        height: 1.4rem
-        background: darken($highlight-background, 5)
-        content: ""
-
     td
       padding: 0
       border: none
 
     figcaption
       clearfix()
-      position: absolute
-      z-index: 1
-      margin-bottom: 1em
-      padding: 0.2em 0 0.2em 0.7rem
-      width: 100%
-      height: 1.4em
+      padding: .3rem 0 .1rem .7rem
       color: $highlight-foreground
       font-size: 1em
       line-height: 1em
 
-      span
-        float: left
-        overflow: hidden
-        max-width: 100%
-        text-overflow: ellipsis
-        white-space: nowrap
-
       a
         float: right
         padding-right: 10px
@@ -144,25 +125,16 @@ blockquote
         &:hover
           border-bottom-color: $highlight-foreground
 
-      &+table
-        margin-top: 1em
-
-        &:before
-          margin-top: -2.1rem
-
-        &:after
-          top: -2.1rem
-
     .gutter pre
-      padding-right: 0.5rem
-      padding-left: 0.5rem
+      padding-right: .5rem
+      padding-left: .5rem
       background-color: $highlight-gutter.bg-color
       color: $highlight-gutter.color
       text-align: right
 
     .code pre
-      padding-right: 0.5rem
-      padding-left: 0.5rem
+      padding-right: .5rem
+      padding-left: .5rem
       width: 100%
       background-color: $highlight-background
 
@@ -289,4 +261,16 @@ blockquote
 
       &::selection
         background: $highlight-selection
-        color: $highlight-foreground
+        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
+
+.highlight-close
+  height: 0 !important

source/css/_highlight/theme.styl

@@ -1,6 +1,6 @@
-$highlight_theme = hexo-config("highlight_theme")
+$highlight_theme = hexo-config('highlight_theme')
 
-if $highlight_theme == "default"
+if $highlight_theme == 'default'
   $highlight-background = #263238
   $highlight-current-line = #efefef
   $highlight-selection = #80CBC420
@@ -18,7 +18,7 @@ if $highlight_theme == "default"
     bg-color: $highlight-background
   }
 
-if $highlight_theme == "darker"
+if $highlight_theme == 'darker'
   $highlight-background = #212121
   $highlight-current-line = #282a2e
   $highlight-selection = #61616150
@@ -36,7 +36,7 @@ if $highlight_theme == "darker"
     bg-color: $highlight-background
   }
 
-if $highlight_theme == "pale night"
+if $highlight_theme == 'pale night'
   $highlight-background = #292D3E
   $highlight-current-line = #393939
   $highlight-selection = #717CB450
@@ -54,7 +54,7 @@ if $highlight_theme == "pale night"
     bg-color: $highlight-background
   }
 
-if $highlight_theme == "ocean"
+if $highlight_theme == 'ocean'
   $highlight-background = #0F111A
   $highlight-current-line = #000000
   $highlight-selection = #717CB450
@@ -72,7 +72,7 @@ if $highlight_theme == "ocean"
     bg-color: $highlight-background
   }
 
-if $highlight_theme == "light"
+if $highlight_theme == 'light'
   $highlight-background = #F6F8FA
   $highlight-current-line = #00346e
   $highlight-selection = #80CBC440

source/css/_layout/404.styl

@@ -0,0 +1,44 @@
+if hexo-config('error_404.enable')
+  #nav.error-no-found
+    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
+      width: 100%
+      letter-spacing: 3px
+      line-height: 1
+
+      #error_title,
+      #error_subtitle
+        margin: 0
+        padding: 0
+        color: $light-grey
+        letter-spacing: 5px
+        font-family: $site-name-font
+
+      #error_title
+        font-size: 10rem
+
+      #error_subtitle
+        font-size: 2rem
+
+  @media screen and (max-width: $sm)
+    #nav.error-no-found
+      #error_info
+        padding: 0 2rem
+
+        #error_title
+          font-size: 7rem !important
+
+        #error_subtitle
+          font-size: 1rem !important

source/css/_layout/aside.styl

@@ -1,25 +1,24 @@
 #aside_content
   width: 25%
 
-  .card_widget
-    -webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
-    box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
-    border-radius: 8px
-    transition: all .3s
-    background: #fff
-    margin-top: 20px
+  .card-widget:not(:first-child)
+    margin-top: 1rem
+
+  .card-widget
     overflow: hidden
+    border-radius: 8px
+    background: $card-bg
+    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+    transition: all .3s
 
     &:hover
-      box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
 
-  .card-author
+  .card-info
     img
-      height: 120px
-      width: 120px
-      padding: 0
       display: inline-block
-      vertical-align: top
+      width: 110px
+      height: 110px
       border-radius: 70px
       transition: all .3s
 
@@ -28,248 +27,205 @@
 
     .author-info
       &__name
-        font-size: 1.1rem
-        display: block
-        margin: -0.1rem auto
         font-weight: 500
+        font-size: 1.1rem
 
       &__description
-        display: block
-        margin: -0.1rem auto
+        margin-top: -.3rem
 
-    .data_link 
-      a
-        text-decoration: none
+    .card-info-data
+      padding: .7rem 0
 
-      .length_num 
-        font-size: 1rem
-        color: #000
+      & > .card-info-data-item
+        display: inline-block
+        width: 33.3%
 
-      .headline 
-        display: block
-        font-size: 0.7rem
-        margin-bottom: -21px
-        text-transform: uppercase
-        color:$font-black
+        a
+          .headline
+            display: block
+            overflow: hidden
+            color: $font-black
+            // text-transform: uppercase
+            text-overflow: ellipsis
+            white-space: nowrap
+            font-size: .7rem
 
-    #aside-social-icons
-      margin: 0.5rem auto -0.7rem
-      width: 15rem
-      text-align: center
+          .length_num
+            color: $dark-black
+            font-size: 1rem
 
-      .social-icon 
-        margin: 0 0.5rem
+    .card-info-social-icons
+      margin: .3rem 0 -.3rem
+
+      .social-icon
+        margin: 0 .5rem
         color: $font-black
         font-size: 1rem
         cursor: pointer
-      
+
       i
-        transition: all 0.3s
-        
+        transition: all .3s
+
         &:hover
           transform: rotate(540deg)
 
     #bookmark-it
-      margin-top: .2rem
-      height: 1.6rem
-      background-color: $light-blue
-      color: #fff
-      text-decoration: none
-      line-height: 1.6rem
       position: relative
-      text-transform: uppercase
       z-index: 1
+      display: block
+      background-color: $light-blue
+      color: $button-color
+      text-transform: uppercase
+      line-height: 1.6rem
 
       span
-        padding-left: 10px
+        padding-left: .5rem
 
-    .bookmark--primary 
-      color: $ruby
-    
-    .bookmark--animated 
-      transition-property: color
-      transition-duration: 1s
-
-      &:before
-        content: ""
-        position: absolute
-        top: 0
-        left: 0
-        right: 0
-        bottom: 0
-        background: $ruby
-        transform: scaleX(0)
-        transform-origin: 0 50%
-        transition-property: transform
-        transition-duration: 0.5s
-        transition-timing-function: ease-out
-        z-index: -1
-      
-      &:hover 
-        color: white
-
-        &:before 
-          transform: scaleX(1)
-          transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
-
-  .card-content 
+  .card-content
     padding: 1rem 1.2rem
-  
-  .post_data
-    display: flex
 
-  .data-item
-    flex-grow: 1
-    align-items: center
-    flex-basis: auto
-    justify-content: center
+  .item-headline
+    font-size: .8rem
 
-  .item_headline 
-    font-size: 0.8rem
-    
-    span 
-      margin-left: 10px
+    span
+      margin-left: .5rem
 
-  .card-tag-cloud 
+  .card-tag-cloud
     a
-      text-decoration: none
-      position: relative
-      padding-bottom: 0.3rem
       word-break: keep-all
 
       &:hover
         color: $light-blue !important
 
-      // &::after
-      //   width: 100%
+  .card-recent-post
+    .aside-recent-item
+      margin: 10px 0 -15px
 
-  .aside_recent_item 
-      margin: 10px 0 -15px 0
-    
-    .aside_recent_post 
-      a
-        text-decoration: none
-        color: $font-black
+      & > .aside-recent-post
+        margin-bottom: 10px
 
-    .aside_recent_post
-      margin-bottom: 10px
-      width: 100%
+        & > a
+          color: $font-black
 
-    .aside_post_cover
-      height: 66px
-      width: 66px
-      float: left
-      overflow: hidden
+          .aside-post-cover
+            float: left
+            overflow: hidden
+            width: 66px
+            height: 66px
 
-    .aside_post_bg
-      object-fit: cover
-      width: 100%
-      height: 100%
-      max-width: 100%
-      padding: 0
-      transition: all .6s
+            .aside-post-bg
+              padding: 0
+              max-width: 100%
+              width: 100%
+              height: 100%
+              transition: all .6s
+              object-fit: cover
 
-      &:hover
-        box-shadow: none
-        transform: scale(1.1)
-    
-    #aside_title    
-      .aside_post_meta
-        font-size: 0.6rem
-        padding-left: 10px
-        color: #99a9bf
+              &:hover
+                box-shadow: none
+                transform: scale(1.1)
 
-      .aside_post_title
-        line-height: 1rem
-        display: -webkit-box
-        -webkit-line-clamp: 2
-        -webkit-box-orient: vertical
-        overflow: hidden
-        height: 40px
-        padding-left: 10px
+          .aside-post-title
+            .aside-post_meta
+              padding-left: 10px
+              color: $theme-meta-color
+              font-size: .6rem
 
-        &:hover
-          color: $light-blue !important
+            .aside-post_title
+              display: -webkit-box
+              overflow: hidden
+              padding-left: 10px
+              height: 40px
+              line-height: 1rem
+              -webkit-line-clamp: 2
+              -webkit-box-orient: vertical
 
-  .aside_category_item,.archive-list
+              &:hover
+                color: $light-blue !important
+
+            &.no-aside-cover
+              .aside-post_title
+                height: auto
+
+  .card-archives ul.archive-list,
+  .card-categories ul.aside-category-item
+    margin: 0
+    padding: .2rem 0 0
     list-style: none
-    margin-bottom: -3px
-    margin-block-start: 0.2rem
-  
-  .aside_category_item.child
-    margin-bottom: -3px
-    margin-block-start: 0rem
 
-    .aside_category_list
-      margin-left: -50px
-
-  .aside_category_list,.archive-list-item
-    margin-left: -40px
+  .card-archives ul.archive-list > .archive-list-item,
+  .card-categories ul.aside-category-item > .aside-category-list
+    padding: .2rem 1rem
+    cursor: pointer
+    transition: all .3s
 
     &:hover
+      padding: .2rem .85rem
       background-color: $light-blue
-      color: #363636
+
     a
-      text-decoration: none
       color: $font-black
-      padding: 0.2rem 1rem
-      transition: .2s
 
-      &:hover
-        padding: 0.2rem 0.85rem
-  
-  .aside_category_list_name,.archive-list-link
-    white-space: nowrap
-    overflow: hidden
-    text-overflow: ellipsis
-    flex: auto
+      span
+        display: inline-block
+        overflow: hidden
+        vertical-align: bottom
+        text-overflow: ellipsis
+        white-space: nowrap
+
+        &:first-child
+          width: 80%
+
+        &:last-child
+          width: 20%
+          text-align: right
+
+  .card-categories
+    .aside-category-item
+      &.child
+        padding: 0 0 0 1.2rem
 
-  .aside_category_list_link,.archive-list-item
-    display: flex
-  
-  .aside_category_list_length,.archive-list-count
-    float: right 
-  
   .card-archives
-    margin-bottom: 20px
-  
+    .archive-list-link-more
+      justify-content: center
+
   .card-webinfo
     .webinfo
-      padding: 0.2rem 1rem
+      padding: .2rem 1rem
 
-      .webinfo_item
+      .webinfo-item
         display: block
         padding: 4px 0 0
 
-        .webinfo_article_name,
-        .webinfo_runtime_name,
-        .webinfo_site_uv_name,
-        .webinfo_site_name
-          display: inline-block
-        
-        .webinfo_article_count,
-        .webinfo_runtime_count,
-        .webinfo_site_uv_count,
-        .webinfo_site_pv_count
-          float: right
-          display: inline-block
+        div
+          &:first-child
+            display: inline-block
 
-@media screen and (max-width: 900px) 
+          &:last-child
+            display: inline-block
+            float: right
+
+@media screen and (max-width: 900px)
   .layout_page
     flex-direction: column
-  
-  #recent-posts,#aside_content
+
+  #recent-posts,
+  #aside_content
     width: 100% !important
-  
-  .card_widget
-    margin-left: 0 
-    margin-right: 0 
 
+  #aside_content
+    .card-widget:first-child
+      margin-top: 1rem
 
-@media screen and (min-width: 900px) 
-  #aside_content    
-    .card_widget
-        if hexo-config("aside.position") == "right"
-          margin-left: 15px
-        else 
-          margin-right: 15px
+@media screen and (min-width: 900px)
+  #aside_content
+    .card-widget
+      if hexo-config('aside.position') == 'right'
+        margin-left: 15px
+      else
+        margin-right: 15px
+
+if hexo-config('aside.mobile') == false
+  @media screen and (max-width: $sm)
+    #aside_content
+      display: none

source/css/_layout/category.styl

@@ -1,8 +1,8 @@
 .category-content
   ol,
   ul
-    margin-top: 0.4rem
-    padding: 0 0 0 0.8rem
+    margin-top: .4rem
+    padding: 0 0 0 .8rem
     list-style: none
     counter-reset: li
 
@@ -11,12 +11,12 @@
 
     ol,
     ul
-      padding-left: 0.5rem
+      padding-left: .5rem
 
     li
       position: relative
-      margin: 0.3rem 0
-      padding: 0.1rem 0.5rem 0.1rem 1.5rem !important
+      margin: .3rem 0
+      padding: .1rem .5rem .1rem 1.5rem !important
 
       &:hover
         &:before
@@ -27,37 +27,37 @@
         top: 0
         left: 0
         background: $light-blue
-        color: $white
+        color: $card-bg
         cursor: pointer
-        transition: all 0.3s ease-out
+        transition: all .3s ease-out
 
   ol
     li
       &:before
-        margin-top: 0.2rem
+        margin-top: .2rem
         width: w = 1.2rem
         height: h = w
-        border-radius: 0.5 * w
+        border-radius: .5 * w
         content: counter(li)
         counter-increment: li
         text-align: center
-        font-size: 0.6rem
+        font-size: .6rem
         line-height: h
 
   ul
     li
       &:hover
         &:before
-          border-color: $ruby
+          border-color: $theme-button-hover-color
 
       &:before
-        $w = 0.3rem
+        $w = .3rem
         top: 10px
-        margin-left: 0.45rem
+        margin-left: .45rem
         width: w = $w
         height: h = w
-        border: 0.5 * w solid $light-blue
+        border: .5 * w solid $light-blue
         border-radius: w
-        background: $white
-        content: ""
+        background: transparent
+        content: ''
         line-height: h