v2.1.0

1. 可設置隱藏文章 2. 適配 Hexo 的 Tag Plugins Code Block With marked lines 顯示 3. 可配置首頁cover顯示的位置 4. 更改深色模式下的配色 5. activate_power_mode 增加關閉顏色和抖動 6. 增加谷歌廣告，騰訊分析 7. 相關文章增加時間顯示，調整佈局，垂直居中 8. 文章頁面，top_img增加評論數顯示 9. 可以取消點擊圖片觀看大圖 10. mathjax和kathex可設置每頁都加載還是按需加載 11. 深色模式下，滾動條顔色的適配 12. 優化gitalk 在 dark mode下的顯示 13. 文章頁，文章標題過長時，只顯示三行內容 14. 深色模式下，背景圖片加上蒙板 15. 優化深色/閲讀模式下，canvas的顯示 16. 優化打賞的特效和移動到二維碼不會立刻消失 17. 優化sub-menu樣式 18. 修改aside 的tags顔色，在深色模式下不會出現觀看困難 19. 升級 normalize.css 到最新版 20. 優化手機上toc和menu的打開動畫 21. 優化代碼框打開關閉的特效 22. 精簡js,部分操作改為css控制 23. 優化主題的一些動畫，不會過於生硬 1. 修復當圖片被a標簽包圍時，點擊圖標沒有跳轉到對應網頁而是出現大圖觀看模式的bug 2. 修復當網址有subdirectory時，menu、打賞二維碼和lodding_bg 鏈接路徑錯誤的bug 3. 修復當網址有subdirectory時, 4. 修復katex 的 CSS無法讀取bug 5. 修復搜索按鈕在文章頁不顯示的bug 6. 修復gitalk css引用失敗的bug 7. 修復點擊特效煙花無效的bug 8. 修復gitalk報path.startsWith is not a function的bug 9. 修復閲讀模式下，背景沒有變純色的bug 10. 修復閲讀模式下，header 偶爾出現沒有靠攏頂部的bug 11. 修復Hexo Tag Plugins Block Quote 裏的鏈接顯示出外面的Bug 12. 修復aside歸檔日期過長導致錯位的bug 13. 修復toc為空時，toc按鈕仍存在的bug 14. 修復關閉懶加載後，頭像無法顯示的bug 15. 修復深色模式下，切換readmode偶爾會無效的bug 16. 修復在一些手機設備上，toc和menu的按鈕顯示不對齊的bug #72
update README
2026-04-10 21:17:07 +08:00 · 2019-12-20 02:19:43 +08:00 · 2019-11-21 22:08:02 +08:00 · 2019-11-21 20:03:39 +08:00 · 2019-11-21 20:03:23 +08:00 · 2019-11-21 11:52:37 +01:00
123 changed files with 4136 additions and 4308 deletions
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.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來支援它吧！
+-->
--- a/README.md
+++ b/README.md
@@ -1,37 +1,50 @@
 # hexo-theme-butterfly

-[预览](https://jerryc.me/)
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.1.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>

-一款基于[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主题
+Demo:  https://demo.jerryc.me/ 

-## 安装
+JerryC:  https://jerryc.me/

-在你的博客根目录里
+
+
+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-jade hexo-renderer-stylus --save or yarn add hexo-renderer-jade hexo-renderer-stylus
+> theme: Butterfly

-## 文档
+ If you don't have pug & stylus renderer, try this: 

-可查看或[这里](https://docs.jerryc.me/)或[这里](https://jerryc.me/posts/21cfbf15)
+> npm install hexo-renderer-pug hexo-renderer-stylus

+## Documentation
+
+ Documentation is [here](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)
--- a/README_CN.md
+++ b/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.1.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>
+
+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
+
+## 文檔
+
+可查看[這裏](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)
--- a/_config.yml
+++ b/_config.yml
@@ -1,4 +1,3 @@
-
 # Main menu navigation
 # ---------------
 # format: xxx: 連結 || icon
@@ -16,7 +15,6 @@ menu:
    - Music || /music/ || fa fa-music
    - Movie || /movies/ || fa fa-film

-
 # Favicon
 # ---------------
 favicon: /img/favicon.ico
@@ -32,15 +30,13 @@ favicon: /img/favicon.ico
 #   favicon_32_32: /img/pwa/32.png
 #   favicon_16_16: /img/pwa/16.png
 #   mask_icon: /img/pwa/safari-pinned-tab.svg
-#   shortcut_icon: /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

@@ -48,15 +44,16 @@ code_word_wrap: false
 # 是否禁止複製（如果禁止，highlight_copy的功能將無效)
 # copyright 複製的内容後面加上版權信息
 copy:
-  enable: false  # true 開啓 / false 禁止
+  enable: true # true 開啓 / false 禁止
  copyright: false

 # social settings
-# formal: 
+# formal:
 #   icon: link
 # ---------------
 social:
  fa fa-github: https://github.com/jerryc127
+  fa fa-envelope: mailto:xxxxxxxx@gmail.com
  fa fa-rss: /atom.xml

 ####    search    ####
@@ -86,77 +83,49 @@ local_search:
 # ---------------
 mathjax:
  enable: false
-  cdn: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
+  # true 表示每一頁都加載mathjax.js
+  # false 需要時加載，須在使用的Markdown Front-matter 加上 mathjax: true
+  per_page: false

 # KaTeX
 # ---------------
 katex:
  enable: false
-  cdn:
-    css: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css  
+  # true 表示每一頁都加載katex.js
+  # false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true
+  per_page: false
  hide_scrollbar: true

-
-####   Analysis    ####
-# ---------------
-# baidu_analytics: 
-
-#Google Analytics
-google_analytics:
-
-
-# stylesheets loaded in the <head>
-# ---------------
-stylesheets:
-  - /css/index.css
-
-# scripts loaded in the end of the body
-# ---------------
-scripts:
-  - /js/utils.js
-  - /js/main.js
-
-# cdn for third-party library
-# ---------------
-cdn:
-  css:
-    fontawesome: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
-    # fontawesomeV5: https://use.fontawesome.com/releases/v5.8.1/css/all.css
-    fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
-  js:
-    jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
-    fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
-    js-cookies: https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
-
 # Post info settings
 # ---------------
-# avatar: /img/avatar.png
-avatar: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/avatar.png
+avatar: /img/avatar.png

 # the banner image of index
-# if the banner of another page not setting,it will show the top_img
-top_img: https://i.loli.net/2019/05/22/5ce53eb6dc82757840.jpg
+index_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/index.jpg

-#the banner image of post
-# if the post not set the post cover and post top image, it will show it
-post_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/post.png
+# if the banner of page not setting,it will show the top_img
+default_top_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/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_cover: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/default.png

 # the banner image of archive page
-archive_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/archive.jpg
+archive_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/archive.jpg

 # the banner image of tag page
-tag_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/tag-bg.png
+tag_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/tag.png

 # the banner image of category page
-category_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/category-bg
+category_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/category.jpg
+
+# 如果你有使用hexo-douban去生成movie界面，可配置這個
+movies_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.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 ##加載動畫

 post_meta:
  date_type: both # or created or updated 文章日期是创建日或者更新日或都显示
@@ -185,7 +154,6 @@ auto_excerpt:
  enable: true
  length: 150

-
 ####    Share System    ####
 # -----------------------------------------
 addThis:
@@ -212,36 +180,28 @@ addtoany:
 # ------------------------------------
 disqus:
  enable: false
-  shortname: 
-  
-# laibili:
-  # enable: false
-  # uid:
+  shortname:
+  count: false # top_img顯示評論數

-# gitment
-  # enable: false
-  # owner: 
-  # repo: 
-  # client_id: 
-  # client_secret: 
+laibili:
+  enable: false
+  uid:

-# 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
+gitalk:
+  enable: false
+  client_id:
+  client_secret:
+  repo:
+  owner:
+  admin:
+  language: # en , zh-CN , zh-TW
+  count: false # top_img顯示評論數

 # valine comment system. https://valine.js.org
 valine:
  enable: false # if you want use valine,please set this value is true
-  appId:   # leancloud application app id
-  appKey:   # leancloud application app key
+  appId: # leancloud application app id
+  appKey: # leancloud application app key
  notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
  verify: false # valine verify code (true/false)
  pageSize: 10 # comment list page size
@@ -249,11 +209,12 @@ 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
-  bg: /img/comment_bg.png  # valine background
+  bg: /img/comment_bg.png # valine background
+  count: false # top_img顯示評論數

 #####     Footer Settings    ####
 # ------------------------------------
-since: 2018
+since: 2019

 footer_custom_text:

@@ -262,10 +223,28 @@ footer_copyright:

 ICP:
  enable: false
-  url: 
-  text: 
+  url:
+  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
@@ -284,8 +263,7 @@ baidu_site_verification:
 # see http://zhanzhang.so.com/
 qihu_site_verification:

-
-# 友情鏈接界面設置 
+# 友情鏈接界面設置
 Flink:
  headline: 友情鏈接
  info_headline: 我的Blog資料
@@ -310,6 +288,7 @@ reward:
 related_post:
  enable: true
  limit: 6 # 顯示推薦文章數目
+  date_type: created # or created or updated 文章日期顯示创建日或者更新日

 ####    美化/效果    ####
 #--------------------------------
@@ -332,16 +311,18 @@ related_post:
 # 主頁設置
 # 默認top_img全屏，site_info在中間
 # 使用默認, 都無需填寫（建議默認）
-index_site_info_top:   #主頁標題距離頂部距離  例如 300px/300em/300rem/10%
-index_top_img_height:  #主頁top_img高度 例如 300px/300em/300rem  不能使用百分比
+index_top_img_height: #主頁top_img高度 例如 300px/300em/300rem  不能使用百分比

+# 主頁文章COVER顯示位置
+# 三個值可配置 left , right , both
+# left(全部圖片顯示在左邊)，right(全部圖片顯示在右邊)，both(左右左右順序顯示)
+index_post_cover: both

 # category和tag頁的UI設置
 # index 值代表 UI將與首頁的UI一樣
 # 默認跟archives頁面UI一樣
-category_ui:  # 留空或index
-tag_ui:  # 留空或index
-
+category_ui: # 留空或index
+tag_ui: # 留空或index

 # 設置網站背景
 # 可設置圖片 或者 顔色
@@ -353,7 +334,8 @@ background:
 # footer是否顯示圖片背景(與top_img一致)
 footer_bg: false

-
+# 背景特效
+# 避免卡頓，建議只開啓一個
 # canvas_ribbon 禁止彩帶背景
 # See: https://github.com/hustcc/ribbon.js
 canvas_ribbon:
@@ -362,36 +344,64 @@ canvas_ribbon:
  alpha: 0.6
  zIndex: -1
  click_to_change: false
+  mobile: false # false 手機端不顯示 true 手機端顯示

 # 動態彩帶
 canvas_ribbon_piao:
  enable: false
+  mobile: false # false 手機端不顯示 true 手機端顯示

 # canvas_nest
 # 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.
-  script: https://cdn.jsdelivr.net/gh/jerryc127/CDN/js/canvas-nest.js # or /js/third-party/canvas-nest.js
+  mobile: false # false 手機端不顯示 true 手機端顯示

 # 打字效果
 activate_power_mode:
  enable: false
+  colorful: true # 冒光特效
+  shake: true # 抖動特效

 # 鼠標點擊效果
+# 避免卡頓，建議只開啓一個
+# 點擊烟火特效
 fireworks:
  enable: false

+# 點擊出現愛心
+click_heart:
+  enable: false
+
+# 點擊出現文字，文字可自行修改
+ClickShowText:
+  enable: false
+  text:
+    - 富强
+    - 民主
+    - 文明
+    - 和谐
+    - 自由
+    - 平等
+    - 公正
+    - 法治
+    - 爱国
+    - 敬业
+    - 诚信
+    - 友善
+  fontSize: 15px
+
 # 頭像會一直轉圈
 avatar_effect: false

 # 網站顯示模式
-# day 默認模式
-# night 黑暗模式（不建議）
-display_mode: day
+# light 默認模式
+# dark 黑暗模式（不建議）
+display_mode: light

 # 美化post頁顯示
 post_beautify:
@@ -407,7 +417,7 @@ font:

 # 網站名字字體
 # 左上角網站名字 主頁居中網站名字
-blog_title_font: 
+blog_title_font:
  font_link: https://fonts.googleapis.com/css?family=Titillium+Web #字體鏈接
  font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif

@@ -419,17 +429,26 @@ hr:

 # 主頁subtitle
 # 打字效果
-# (如果有英文逗號' , '，請使用轉義字符 &#44;)
-subtitle: 
+subtitle:
  enable: true
+  # source調用第三方服務
+  # source: false 關閉調用
+  # source: 1  調用金山詞霸的每日一句（簡體）
+  # source: 2  調用一言网的一句話（簡體） #https://hitokoto.cn/
+  # source: 3  調用一句网（簡體） http://yijuzhan.com/
+  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
+  # subtitle 會先顯示 source , 再顯示 sub 的内容
+  source: false
+  # (如果有英文逗號' , '，請使用轉義字符 &#44;)
  sub:
    - 今日事&#44;今日畢
    - Never put off till tomorrow what you can do today

-
-
 ####    側邊欄    ####
 #-------------------------------------
+# 手機頁面（ 顯示寬度 < 768px ）是否顯示aside内容
+aside_mobile: true
+
 # 側邊欄顯示設置
 aside:
  position: right # left or right
@@ -459,7 +478,6 @@ runtimeshow:
  enable: true
  start_date: 6/7/2018 00:00:00

-
 ####   右下角按鈕  ####
 #----------------------------------------------
 # 簡繁轉換
@@ -478,18 +496,45 @@ translate:
  #當文字是繁體時，按鈕顯示的文字
  msgToSimplifiedChinese: "简"

-# 夜間模式
-nightshift:
-  enable: true
-
 #閲讀模式
 readmode:
  enable: true

+# 夜間模式
+darkmode:
+  enable: true
+
+# 自動切換 dark mode和 light mode
+# autoChangeMode: 1  跟隨系統而變化，不支持的瀏覽器/系統將按照時間晚上6點到早上6點之間切換為 dark mode
+# autoChangeMode: 2  只按照時間晚上6點到早上6點之間切換為 dark mode
+# autoChangeMode: false 取消自動切換
+autoChangeMode: false

 ####    other     ####
 #------------------------------------------------

+# 圖片大圖查看模式
+# 可選 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 彈窗位置
+# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
+snackbar:
+  enable: false
+  position: bottom-left
+  bg_light: "#49b1f5" #light mode時彈窗背景
+  bg_dark: "#2d3035" #dark mode時彈窗背景
+
 #百度推送
 baidu_push:
  enable: false
@@ -507,7 +552,7 @@ note:
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
-  style: simple
+  style: flat
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
@@ -515,9 +560,9 @@ note:
  light_bg_offset: 0

 # 圖片懶加載
+# https://github.com/aFarkas/lazysizes
 lazyload:
  enable: true
-  script: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js

 # 避免重複網址分散seo
 canonical: true
@@ -532,3 +577,70 @@ twitter_meta: true
 # facebook QQ 等 分享自動帶上樣式
 # https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png
 Open_Graph_meta: true
+
+# CDN
+# 網站必須
+# 可根據需要自行添加js/css
+CDN_USE:
+  css:
+    - /css/index.css
+    - https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
+    # - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css #fontawesomeV5_css
+
+  js:
+    - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js
+    - /js/utils.js
+    - /js/main.js
+
+# CDN
+# 非必要不要修改
+CDN:
+  #comments
+  blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/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
+
+  # share
+  addtoany: https://static.addtoany.com/menu/page.js
+  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.10.5/dist/instantsearch.min.js
+  algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
+
+  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
+
+  #不蒜子計數器
+  busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
+
+  # 背景特效
+  canvas_ribbon: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/canvas-ribbon.js
+  canvas_ribbon_piao: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/piao.js
+  canvas_nest: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/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
+
+  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
+  medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js
+
+  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
+  activate_power_mode: https://cdn.jsdelivr.net/npm/activate-power-mode/dist/activate-power-mode.min.js
+  fireworks: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/fireworks.js
+  click_heart: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/click_heart.js
+  ClickShowText: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/ClickShowText.js
+
+  translate: /js/tw_cn.js
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -27,6 +27,7 @@ post:
  wordcount: Word count
  min2read: "Reading time: %s min"
  page_pv: Post View
+  comments: comments
  copyright:
    author: Author
    link: Link
@@ -73,8 +74,7 @@ share: Share

 bookmark:
  title: Bookmark
-  message_prev: Press
-  message_next: to bookmark this page
+

 rightside:
  readmode_title: Read Mode
@@ -94,3 +94,12 @@ copy_copyright:
  link: Link
  source: Source
  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
+
+Snackbar:
+  bookmark:
+    message_prev: Press
+    message_next: to bookmark this page
+  chs_to_cht: Traditional Chinese Activated Manually
+  cht_to_chs: Simplified Chinese Activated Manually
+  day_to_night: Light Mode Activated Manually
+  night_to_day: Dark Mode Activated Manually
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -27,6 +27,7 @@ post:
  wordcount: Word count
  min2read: "Reading time: %s min"
  page_pv: Post View
+  comments: comments
  copyright:
    author: Author
    link: Link
@@ -72,8 +73,6 @@ donate: Donate
 share: Share
 bookmark:
  title: Bookmark
-  message_prev: Press
-  message_next: to bookmark this page

 rightside:
  readmode_title: Read Mode
@@ -92,4 +91,13 @@ copy_copyright:
  author: Author
  link: Link
  source: Source
-  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
+  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
+
+Snackbar:
+  bookmark:
+    message_prev: Press
+    message_next: to bookmark this page
+  chs_to_cht: Traditional Chinese Activated Manually
+  cht_to_chs: Simplified Chinese Activated Manually
+  day_to_night: Light Mode Activated Manually
+  night_to_day: Dark Mode Activated Manually
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -27,6 +27,7 @@ post:
  wordcount: 字数总计
  min2read: "阅读时长: %s 分钟"
  page_pv: 阅读量
+  comments: 评论数
  copyright:
    author: 文章作者
    link: 文章链接
@@ -73,8 +74,7 @@ donate: 打赏
 share: 分享
 bookmark:
  title: 添加书签
-  message_prev: 按
-  message_next: 键将本页加入书签
+

 rightside:
  readmode_title: 阅读模式
@@ -93,4 +93,13 @@ copy_copyright:
  author: 作者
  link: 链接
  source: 来源
-  info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
+  info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
+
+Snackbar:
+  bookmark:
+    message_prev: 按
+    message_next: 键将本页加入书签
+  chs_to_cht: 你已切换为繁体
+  cht_to_chs: 你已切换为简体
+  day_to_night: 你已切换为深色模式
+  night_to_day: 你已切换为浅色模式
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -27,6 +27,7 @@ post:
  wordcount: 字數總計
  min2read: "閲讀時長: %s 分鐘"
  page_pv: 閲讀量
+  comments: 評論數
  copyright:
    author: 文章作者
    link: 文章鏈接
@@ -74,8 +75,7 @@ donate: 打賞
 share: 分享
 bookmark:
  title: 添加書籤
-  message_prev: 按
-  message_next: 鍵將本頁加入書籤
+

 rightside:
  readmode_title: 閲讀模式
@@ -94,4 +94,15 @@ copy_copyright:
  author: 作者
  link: 鏈接
  source: 來源
-  info: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
+  info: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
+
+Snackbar:
+  bookmark:
+    message_prev: 按
+    message_next: 鍵將本頁加入書籤
+  chs_to_cht: 你已切換為繁體
+  cht_to_chs: 你已切換為簡體
+  day_to_night: 你已切換為深色模式
+  night_to_day: 你已切換為淺色模式
+
+
--- a/layout/archive.pug
+++ b/layout/archive.pug
@@ -8,4 +8,4 @@ block content
    +articleSort(page.posts)
    include includes/pagination.pug
  #aside_content.aside_content
-    include includes/aside.pug
+    include includes/widget/index.pug
--- a/layout/category.pug
+++ b/layout/category.pug
@@ -7,7 +7,7 @@ block content
      +UI_NEW(page.posts)
      include includes/pagination.pug
    #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
  else
    include ./includes/mixins/article-sort.pug
    #category
@@ -15,5 +15,5 @@ block content
      +articleSort(page.posts)
      include includes/pagination.pug
    #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
    
--- a/layout/flink.pug
+++ b/layout/flink.pug
@@ -7,16 +7,15 @@
          li.md-links-item
            a(href=item.link  title=item.name target="_blank")
              if theme.lazyload.enable
-                img.lozad(data-src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
+                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=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
-              div(class="md-links-title")= item.name 
-                <br/>
-              div(class="md-links-des")=item.descr
+                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

  hr
  div 
-    p(style="font-size:15px;font-weight:bold")= theme.Flink.info_headline
+    h2= theme.Flink.info_headline
    ul
      li= theme.Flink.name
      li= theme.Flink.address
--- a/layout/gallery.pug
+++ b/layout/gallery.pug
@@ -1,4 +0,0 @@
-extends includes/layout.pug
-
-block content
-  include includes/gallery/layout.pug
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -1,20 +1,17 @@
-if (theme.algolia_search.enable)
-  script(async src=url_for('/js/search/algolia.js'))
-if (theme.mathjax && theme.mathjax.enable)
-  if(!is_tag() && !is_category() && !is_archive())
-    include ./third-party/mathjax.pug
-if (theme.katex && theme.katex.enable)
-  if(!is_tag() && !is_category() && !is_archive())
-    include ./third-party/katex.pug
-if (theme.local_search && theme.local_search.enable)
-  script(async src=url_for('/js/search/local-search.js'))
+if (theme.medium_zoom && theme.medium_zoom.enable)
+  script(src=url_for(theme.CDN.medium_zoom))
+
+if (theme.fancybox && theme.fancybox.enable)
+  script(src=url_for(theme.CDN.fancybox))
+
+include ./math/index.pug 

 if theme.fireworks && theme.fireworks.enable
-  script(src='https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js')
-  script(src=url_for('/js/third-party/fireworks.js'))
+  script(src=url_for(theme.CDN.anime))
+  script(src=url_for(theme.CDN.fireworks))

-if theme.nightshift.enable
-  script(src=url_for('js/nightshift.js'))
+if (theme.snackbar && theme.snackbar.enable)
+  script(src=url_for(theme.CDN.snackbar))

 if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
  include ./third-party/canvas-ribbon.pug
@@ -25,59 +22,33 @@ 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('js/activate-power-mode.js'))
+  - var colorful = theme.activate_power_mode.colorful == false ? false : true
+  - var shake = theme.activate_power_mode.shake == false ? false : true
+  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 = !{colorful};
+    POWERMODE.shake = !{shake}; 
    document.body.addEventListener('input', POWERMODE);

 if theme.translate && theme.translate.enable
-  script(src=url_for('/js/tw_cn.js'))
-  script.
-    translateInitilization()
+  script(src=url_for(theme.CDN.translate))

-
-if is_home() && theme.subtitle.enable
-  script(src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9")    
-  script.
-    var typed = new Typed(".subtitle", {
-    strings: '!{theme.subtitle.sub}'.split(","),
-    startDelay: 300,
-    typeSpeed: 100,
-    loop: true,
-    backSpeed: 50
-    });
+if is_home()
+  include index-js.pug

 if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
-  script(async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js")
+  script(async src=url_for(theme.CDN.busuanzi))

 if theme.instantpage.enable
-  script(src="https://cdn.jsdelivr.net/npm/instant.page@1.2.2/instantpage.min.js" type="module")
+  script(src=url_for(theme.CDN.instantpage) type="module")

 if theme.lazyload.enable
-  script(src=url_for(theme.lazyload.script))
-  script. 
-    const observer = lozad(); // lazy loads elements with default selector as '.lozad'
-    observer.observe();
+  script(src=url_for(theme.CDN.lazyload) async="")

-if is_home() && !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)       
-        })
-    }
-    alignContent();
-    
-    $(window).bind("resize", function () {
-      alignContent()
-    })
+//- 鼠標特效
+if theme.click_heart && theme.click_heart.enable
+  script(src=url_for(theme.CDN.click_heart))

+if theme.ClickShowText && theme.ClickShowText.enable
+  script(src=url_for(theme.CDN.ClickShowText))
--- a/layout/includes/aside.pug
+++ b/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
-  
--- a/layout/includes/comments/gitalk.pug
+++ b/layout/includes/comments/gitalk.pug
@@ -8,6 +8,13 @@ if theme.gitalk && theme.gitalk.enable
      owner: '!{theme.gitalk.owner}',
      admin: '!{theme.gitalk.admin}',
      id: md5(decodeURI(location.pathname)),
-      language: '!{theme.gitalk.language}'
+      language: '!{theme.gitalk.language}',
+      updateCountCallback: commentCount
    })
-    gitalk.render('gitalk-container')
+    gitalk.render('gitalk-container')
+
+    function commentCount(n){
+      document.getElementsByClassName('gitalk-comment-count')[0].innerHTML= n
+    }
+
+
--- a/layout/includes/comments/gitment.pug
+++ b/layout/includes/comments/gitment.pug
@@ -1,13 +0,0 @@
-if theme.gitment && theme.gitment.enable
-  #gitment-container
-  script.
-    var gitment = new Gitment({
-      id: md5(decodeURI(location.pathname)),
-      owner: '!{theme.gitment.owner}',
-      repo: '!{theme.gitment.repo}',
-      oauth: {
-        client_id: '!{theme.gitment.client_id}',
-        client_secret: '!{theme.gitment.client_secret}'
-      }
-    })
-    gitment.render('gitment-container')
--- a/layout/includes/comments/index.pug
+++ b/layout/includes/comments/index.pug
@@ -1,35 +1,19 @@
-if theme.disqus && theme.disqus.enable
+- var d = theme.disqus && theme.disqus.enable
+- var l = theme.laibili && theme.laibili.enable
+- var gt = theme.gitalk && theme.gitalk.enable
+- var v = theme.valine && theme.valine.enable
+
+if d || l || gt || v
  hr
  #post-comment
    .comment_headling
      i.fa.fa-comments.fa-fw(aria-hidden="true")
      span= ' ' + _p('comment')
-    include ./disqus.pug
-else if theme.laibili && theme.laibili.enable
-  hr
-  #post-comment
-    .comment_headling
-      i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= ' ' + _p('comment')
-    include ./laibili.pug
-else if theme.gitment && theme.gitment.enable
-  hr
-  #post-comment
-    .comment_headling
-      i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= ' ' +  _p('comment')
-    include ./gitment.pug
-else if theme.gitalk && theme.gitalk.enable
-  hr
-  #post-comment
-    .comment_headling
-      i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= ' ' +  _p('comment')
-    include ./gitalk.pug
-else if theme.valine && theme.valine.enable
-  hr
-  #post-comment
-    .comment_headling
-      i.fa.fa-comments.fa-fw(aria-hidden="true")
-      span= ' ' +  _p('comment')
-    include ./valine.pug
+    if d
+      include ./disqus.pug
+    else if l
+      include ./laibili.pug
+    else if gt
+      include ./gitalk.pug
+    else if v
+      include ./valine.pug
--- a/layout/includes/comments/valine.pug
+++ b/layout/includes/comments/valine.pug
@@ -1,6 +1,6 @@
 if theme.valine && theme.valine.enable
  #vcomment.vcomment
-  script(src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js')
+  script(src=url_for(theme.CDN.valine))
  script.
    var notify = #{ theme.valine.notify } == true ? true : false;
    var verify = #{ theme.valine.verify } == true ? true : false;
--- a/layout/includes/config.pug
+++ b/layout/includes/config.pug
@@ -49,8 +49,39 @@
    })
  }

-  var copy_copyright_js = theme.copy.enable && theme.copy.copyright
+  var ClickShowText = 'undefined';
+  if (theme.ClickShowText && theme.ClickShowText.enable) {
+    ClickShowText = JSON.stringify({
+    text: theme.ClickShowText.text.join(","),
+      fontSize: theme.ClickShowText.fontSize
+    })
+  }

+  
+  var Snackbar = 'undefined';
+  if (theme.snackbar && theme.snackbar.enable) {
+  Snackbar = JSON.stringify({      
+    bookmark: {
+      title: _p("Snackbar.bookmark.title"),
+      message_prev: _p("Snackbar.bookmark.message_prev"),
+      message_next: _p("Snackbar.bookmark.message_next")
+    },
+    chs_to_cht: _p("Snackbar.chs_to_cht"),
+    cht_to_chs: _p("Snackbar.cht_to_chs"),
+    day_to_night: _p("Snackbar.day_to_night"),
+    night_to_day: _p("Snackbar.night_to_day"),
+    bgLight: theme.snackbar.bg_light,
+    bgDark: theme.snackbar.bg_dark,
+    position: theme.snackbar.position,
+    })
+  }
+
+  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 isHome = is_home() ? true : false
+  var isPost = is_post() ? true : false


 script.
@@ -59,22 +90,26 @@ script.
    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")}',
      noSupport: '!{_p("copy.noSupport")}'
    },
    bookmark: {
-      title: '!{_p("bookmark.title")}',
-      message_prev: '!{_p("bookmark.message_prev")}',
-      message_next: '!{_p("bookmark.message_next")}'
+      title: '!{_p("Snackbar.bookmark.title")}',
+      message_prev: '!{_p("Snackbar.bookmark.message_prev")}',
+      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: !{medium_zoom},
+    fancybox: !{fancybox},
+    Snackbar: !{Snackbar},
+    baiduPush: !{baiduPush},
+    isHome: !{isHome},
+    isPost: !{isPost}
    
  }

--- a/layout/includes/footer.pug
+++ b/layout/includes/footer.pug
@@ -1,4 +1,4 @@
-#footer
+#footer-wrap
  - var now = new Date()
  - var nowYear = now.getFullYear()
  if theme.since && theme.since != nowYear
--- a/layout/includes/gallery/layout.pug
+++ b/layout/includes/gallery/layout.pug
@@ -1 +0,0 @@
-#gallery!= page.content
--- a/layout/includes/gallery/script.pug
+++ b/layout/includes/gallery/script.pug
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -1,124 +1,79 @@
+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 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

-meta(http-equiv="x-dns-prefetch-control" content="on")
-if theme.canonical
-  link(rel="canonical" href=without_html)
+//- 預解析
+include ./head/dns_prefetch.pug

-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)
+//- PWA
+if (theme.pwa && theme.pwa.enable)
+  include ./head/pwa.pug

-if theme.Open_Graph_meta
-  if is_post()
-    meta(property="og:type" content="article")
-  else
-    meta(property="og:type" content="website")
+//- 網站驗證
+include ./head/site_verification.pug

-  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)
+//- Open_Graph
+include ./head/Open_Graph.pug

 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")
+
+script(src=url_for(theme.CDN.js_cookies))
+
+if (theme.darkmode && theme.darkmode.enable) || theme.autoChangeMode !== false
+  include ./head/darkmode.pug
+
+each item in theme.CDN_USE.css
+  link(rel='stylesheet', href=url_for(item))
+
+if (theme.fancybox && theme.fancybox.enable)
+  link(rel='stylesheet', href=url_for(theme.CDN.fancybox_css))
+
+if (theme.snackbar && theme.snackbar.enable)
+  link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))
+
+if theme.canonical
+  link(rel="canonical" href=without_html)
+
 if is_post()
  if(page.prev)
    link(rel="prev" title=page.prev.title href=url_for(page.prev.permalink) )
  if(page.next)
    link(rel="next" title=page.next.title  href=url_for(page.next.permalink) )

-
 if theme.algolia_search.enable
-  link(rel="dns-prefetch" href="https://cdn.jsdelivr.net")
-  link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css")
-  script(src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js" defer)
+  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.gitment && theme.gitment.enable)
-  link(rel="dns-prefetch" href="https://unpkg.com")
-  link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gitment/style/default.min.css")
-  script(src="https://cdn.jsdelivr.net/npm/gitment/dist/gitment.browser.min.js")
-  script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js")
 if (theme.gitalk && theme.gitalk.enable)
-  link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css")
-  if(theme.gitalk.js)
-    script(src=theme.gitalk.js)
-  else
-    script(src="https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js")
-  script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js")
+  link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.gitalk_css))
+  script(src=url_for(theme.CDN.gitalk) defer)
+  script(src=url_for(theme.CDN.blueimp_md5) defer)

+//- google_adsense
+include ./head/google_adsense.pug

+//- analytics
+include ./head/analytics.pug

-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.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);
-    })();
-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 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)
-
-
- var preload_archive_img = theme.archive_img ||theme.top_img || config.top_img
- var preload_tag_img = theme.tag_img ||theme.top_img || config.top_img
- var preload_category_img = theme.category_img ||theme.top_img || config.top_img
- var preload_img = page.top_img || theme.top_img || config.top_img
-
-if (is_archive() && preload_archive_img) 
-  link(rel="preload" href=url_for(preload_archive_img)  as="image" )
-else if (is_tag() && preload_tag_img) 
-  link(rel="preload" href=url_for(preload_tag_img)  as="image" )
-else if (is_category() && preload_category_img) 
-  link(rel="preload" href=url_for(preload_category_img)  as="image" )
-else if (!is_post() && preload_img)
-  link(rel="preload" href=url_for(preload_img)  as="image" )
+if !is_post()
+  link(rel="preload" href=url_for(top_img)  as="image" )

 if theme.blog_title_font.font_link
  link(rel='stylesheet', href=url_for(theme.blog_title_font.font_link))
--- a/layout/includes/head/Open_Graph.pug
+++ b/layout/includes/head/Open_Graph.pug
@@ -0,0 +1,19 @@
+- 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 contentType = is_post() ? 'article' : 'website'
+
+//- twitter meta
+if theme.twitter_meta
+  meta(name="twitter:card" content="summary")
+  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
+  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)
--- a/layout/includes/head/analytics.pug
+++ b/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=`http://tajs.qq.com/stats?sId=` + theme.tencent_analytics charset="UTF-8")
--- a/layout/includes/head/darkmode.pug
+++ b/layout/includes/head/darkmode.pug
@@ -0,0 +1,48 @@
+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')
+    }
+  }
+
--- a/layout/includes/head/dns_prefetch.pug
+++ b/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")
--- a/layout/includes/head/google_adsense.pug
+++ b/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}'
+    });
--- a/layout/includes/head/pwa.pug
+++ b/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")
--- a/layout/includes/head/site_verification.pug
+++ b/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)
--- a/layout/includes/header.pug
+++ b/layout/includes/header.pug
@@ -1,13 +1,16 @@
-#header  
+header  
  #page-header
-    span#blog_name.pull-left
+    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
+    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
-    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')
+
+    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')
--- a/layout/includes/index-js.pug
+++ b/layout/includes/index-js.pug
@@ -0,0 +1,90 @@
+if theme.subtitle.enable
+  script(src=url_for(theme.CDN.typed))
+  - var source = theme.subtitle.source
+
+  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 source == '1'
+    script.
+      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
+        });
+      })
+      .catch(function (err) {
+        console.error(err);
+      })
+  else if source == '2'
+    script.
+      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
+        });
+      })
+      .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
+      });
+  else if source == '4'
+    script(type="text/javascript" src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8")
+    script.
+      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
+      });
+      })
+     
+  else
+    script.
+      var typed = new Typed(".subtitle", {
+      strings: '!{theme.subtitle.sub}'.split(","),
+      startDelay: 300,
+      typeSpeed: 100,
+      loop: true,
+      backSpeed: 50
+      });
+
+
+
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -18,49 +18,45 @@
 - is_home() ? pageTitle = config.title + home_subtitle_true : pageTitle = pageTitle_saved
 //- 判断keywords

- var pageDescription = page.description || page.title || config.description || ''
+- 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 body_class = theme.display_mode == 'night' ? 'night-mode' : ''
-

 doctype html
-html(lang=config.language)
+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")
+    meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5")
    title= pageTitle
    meta(name="description" content=pageDescription)
-    meta(name="keywords" content=pageKeywords)
+    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(config.favicon || theme.favicon || '/favicon.ico')
-    if theme.stylesheets !== undefined && theme.stylesheets.length > 0
-      each url in theme.stylesheets
-        link(rel='stylesheet', href=url_for(url))
-    each item in theme.cdn.css
-      if item !== undefined
-        link(rel='stylesheet', href=item)
    include ./head.pug
    include ./config.pug
-  body(class=body_class)
+  body
    if theme.fireworks && theme.fireworks.enable
      canvas.fireworks
+    //- !=partial('includes/header.pug', {}, {cache: true})
    include ./header.pug
    include ./mobile-sidebar.pug
    #body-wrap
      if theme.background
-        #web_bg
+        - var source = theme.background
+        - var is_photo = source.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
      if (!is_post())
        include ./nav.pug
-      #content-outer
+      main#content-outer
        block top_img
        if (!is_post())
          #content-inner.layout_page
@@ -76,16 +72,12 @@ html(lang=config.language)
              block content
      
      - var footer_bg = theme.footer_bg == false ? '' : bg_img
-      footer(style=footer_bg)
+      - var is_bg = theme.footer_bg == false ? 'color' : 'photo'
+      footer#footer(style=footer_bg data-type=is_bg)
        include ./footer.pug    
    include ./rightside.pug
-    each item in theme.cdn.js
-      if item !== undefined
-        script(src=url_for(item))
-    if theme.scripts !== undefined && theme.scripts.length > 0
-      //- scripts list from config.yml
-      each url in theme.scripts
-        script(src=url_for(url))
+    each item in theme.CDN_USE.js
+      script(src=url_for(item))
    include ./additional-js.pug
    include ./search/index.pug
    
--- a/layout/includes/math/index.pug
+++ b/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
--- a/layout/includes/math/katex.pug
+++ b/layout/includes/math/katex.pug
@@ -0,0 +1,7 @@
+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.
+  $(function () {
+    $('span.katex-display').wrap('<div class="katex-wrap"></div>')
+  })
--- a/layout/includes/third-party/mathjax.pug
+++ b/layout/includes/third-party/mathjax.pug
@@ -24,4 +24,4 @@ script(type="text/x-mathjax-config").
    }
  });

-script(src=theme.mathjax.cdn)
+script(src=theme.CDN.mathjax)
--- a/layout/includes/menu_item.pug
+++ b/layout/includes/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,8 +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])
-script.
-  document.body.addEventListener('touchstart', function(){ });
+              span=' '+trim(i.split('||')[0])
--- a/layout/includes/mixins/UI.pug
+++ b/layout/includes/mixins/UI.pug
@@ -3,19 +3,19 @@ mixin UI_NEW(posts)
    .recent-post-item.article-container
      - var link = article.link || article.path
        if index%2 == 0
-          .post_cover.is_left
+          .post_cover.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.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+                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.is_right
+          .post_cover.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.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+                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/layout/includes/mixins/article-sort.pug
+++ b/layout/includes/mixins/article-sort.pug
@@ -9,7 +9,7 @@ mixin articleSort(posts)
      .article-sort-item
        .article-sort-img
          a.article-sort-item__img(href=url_for(article.path))
-            img(src=article.cover)
+            img(src=article.cover alt=article.title || 'No Title')
        .article-sort-post
          a.article-sort-item__post(href=url_for(article.path))
            i.fa.fa-clock-o(aria-hidden="true")
--- a/layout/includes/mobile-sidebar.pug
+++ b/layout/includes/mobile-sidebar.pug
@@ -2,24 +2,24 @@
  #menu_mask
  #mobile-sidebar-menus
    .mobile_author_icon
-      img.lozad.avatar_img(src=url_for(theme.avatar) onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
+      img.avatar-img(src=url_for(theme.avatar) onerror=`onerror=null;src='${theme.lodding_bg.flink}'` alt="avatar")
    .mobile_post_data
      if site.posts.length
-        .mobile_data_item.is_center
+        .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_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_item.is-center      
          .mobile_data_link
            a(href=url_for(config.category_dir) + '/')
              .headline= _p('aside.categories') 
@@ -41,6 +41,6 @@
    #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})
+        .sidebar-toc__content.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})
+        .sidebar-toc__content!=toc(page.content,{"class":"toc_mobile_items",list_number:tocNumber})
--- a/layout/includes/nav.pug
+++ b/layout/includes/nav.pug
@@ -1,18 +1,9 @@
-if is_archive()
-  - var top_img = theme.archive_img ||theme.top_img || config.top_img
-else if is_tag()
-  - var top_img = theme.tag_img ||theme.top_img || config.top_img
-else if is_category()
-  - var top_img = theme.category_img ||theme.top_img || config.top_img
-else
-  - var top_img = page.top_img||theme.top_img || config.top_img

 - 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)
+  nav#nav.full_page(style=bg_img)
    #site-info
      #site-title
        span.blogtitle= page.title || page.tag || page.category || config.title
@@ -23,14 +14,13 @@ if is_home()
        #site-social-icons
          each url, icon in theme.social
            a.social-icon(href=url target="_blank")
-              i(class=icon)
+              i(class=icon aria-hidden="true")
      
    .scroll-down
      i.fa.fa-angle-down.scroll-down-effects

 else
-  nav#nav.not_index_bg
-    .nav_bg(style=bg_img)
+  nav#nav.not_index_bg(style=bg_img)
    #page_site-info
      #site-title
          if (is_archive()) 
--- a/layout/includes/pagination.pug
+++ b/layout/includes/pagination.pug
@@ -1,8 +1,9 @@
 -
  var options = {
-    prev_text: '<i class="fa fa-chevron-left"></i>',
-    next_text: '<i class="fa fa-chevron-right"></i>',
-    mid_size: 1
+    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
  }

 if(!is_post())
@@ -13,11 +14,11 @@ else
  nav#pagination.pagination_post
    if(page.prev)
      if(page.next)
-        .prev-post.pull-left
+        .prev-post.pull_left
          - var pagination_cover = page.prev.cover
          a(href=url_for(page.prev.path))
            if theme.lazyload.enable
-              img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+              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}'` )

@@ -29,7 +30,7 @@ else
          - var pagination_cover = page.prev.cover
          a(href=url_for(page.prev.path))
            if theme.lazyload.enable
-              img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              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')
@@ -38,11 +39,11 @@ else
          
    if(page.next)
      if(page.prev)
-        .next-post.pull-right
+        .next-post.pull_right
          - var pagination_cover = page.next.cover
          a(href=url_for(page.next.path))
            if theme.lazyload.enable
-              img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              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')
@@ -53,7 +54,7 @@ else
          - var pagination_cover = page.next.cover
          a(href=url_for(page.next.path))
            if theme.lazyload.enable
-              img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              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')
--- a/layout/includes/recent-posts.pug
+++ b/layout/includes/recent-posts.pug
@@ -1,24 +1,25 @@
 each article , index in page.posts.data
  .recent-post-item.article-container
    - var link = article.link || article.path
+    - var title = article.title || _p('no_title')
      if index%2 == 0
-        .post_cover.is_left
-          a(href=url_for(link) title=article.title || _p('no_title'))
+        .post_cover.left_radius
+          a(href=url_for(link) title=title)
            - var post_cover = article.cover
            if theme.lazyload.enable
-              img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
            else
-              img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.post_bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
      else
-        .post_cover.is_right
-          a(href=url_for(link) title=article.title || _p('no_title'))
+        .post_cover.right_radius
+          a(href=url_for(link) title=title)
            - var post_cover = article.cover
            if theme.lazyload.enable
-              img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              img.post_bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
            else
-              img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)            
+              img.post_bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)            
    .recent-post-info   
-      a.article-title(href=url_for(link) title= article.title || _p('no_title'))= article.title || _p('no_title')
+      a.article-title(href=url_for(link) title=title)= title
      if (article.top)
        span.article-meta
          i.fa.fa-thumb-tack.article-meta__icon.sticky
--- a/layout/includes/reward.pug
+++ b/layout/includes/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.lozad.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

--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -2,17 +2,18 @@ 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'))= theme.translate.default
-    if theme.nightshift && theme.nightshift.enable
-      - var display_mode = theme.display_mode == 'night'? 'fa fa-sun-o' : 'fa fa-moon-o'
-      i#nightshift.nightshift(class=display_mode title=_p('rightside.night_mode_title'))
+      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'
+      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
+    if is_post() && page.comments !== false && (d || l || gt || v)
      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
--- a/layout/includes/share/addtoany.pug
+++ b/layout/includes/share/addtoany.pug
@@ -4,6 +4,6 @@
      a(class="a2a_button_" + name)

    a.a2a_dd(href="https://www.addtoany.com/share")
-script(async src="https://static.addtoany.com/menu/page.js")
+script(async src=url_for(theme.CDN.addtoany))


--- a/layout/includes/share/share-js.pug
+++ b/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)
-  link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css")
-  script(src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js")
+  link(rel="stylesheet" href=url_for(theme.CDN.sharejs_css))
+  script(src=url_for(theme.CDN.sharejs))
--- a/layout/includes/third-party/canvas-nest.pug
+++ b/layout/includes/third-party/canvas-nest.pug
@@ -1 +1 @@
-script(color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count src=url_for(theme.canvas_nest.script))
+script#canvas_nest(color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count mobile=`${theme.canvas_nest.mobile}` src=url_for(theme.CDN.canvas_nest))
--- a/layout/includes/third-party/canvas-ribbon-piao.pug
+++ b/layout/includes/third-party/canvas-ribbon-piao.pug
@@ -1 +1 @@
-script(id="ribbon" src=url_for('https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/js/piao.js'))
+script(id="ribbon_piao" mobile=`${theme.canvas_ribbon_piao.mobile}` src=url_for(theme.CDN.canvas_ribbon_piao))
--- a/layout/includes/third-party/canvas-ribbon.pug
+++ b/layout/includes/third-party/canvas-ribbon.pug
@@ -1,3 +1,3 @@
-script(id="ribbon" src=url_for('/js/third-party/canvas-ribbon.js') size=theme.canvas_ribbon.size
-alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex data-click=`${theme.canvas_ribbon.click_to_change}`)
+script(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}`)

--- a/layout/includes/third-party/katex.pug
+++ b/layout/includes/third-party/katex.pug
@@ -1,7 +0,0 @@
-link(rel="stylesheet" type="text/css" href=theme.katex.cdn.css)
-script(src='https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js')
-link(rel="stylesheet" type="text/css" href='https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css')
-script.
-  $(function () {
-    $('span.katex-display').wrap('<div class="katex-wrap"></div>')
-  })
--- a/layout/includes/widget/card_announcement.pug
+++ b/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
--- a/layout/includes/widget/card_archives.pug
+++ b/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月'})
--- a/layout/includes/widget/card_author.pug
+++ b/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.lozad.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) 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') )
+    .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")
--- a/layout/includes/widget/card_categories.pug
+++ b/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)
            - })

--- a/layout/includes/widget/card_recent_post.pug
+++ b/layout/includes/widget/card_recent_post.pug
@@ -1,23 +1,24 @@
-.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')
            a(href=url_for(link))
              - var post_cover = article.cover
-              .aside_post_cover
+              .aside-post-cover
                if theme.lazyload.enable
-                  img.aside_post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                  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=`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')
+                  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
+                .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)]
+                  time.aside-post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
    
      - })
--- a/layout/includes/widget/card_tags.pug
+++ b/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'})
--- a/layout/includes/widget/card_webinfo.pug
+++ b/layout/includes/widget/card_webinfo.pug
@@ -1,24 +1,22 @@
-.card_widget.card-webinfo
+.card-widget.card-webinfo
  .card-content
-    .item_headline
+    .item-headline
        i.fa.fa-line-chart(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('js/runtimeshow.js') 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

--- a/layout/includes/widget/index.pug
+++ b/layout/includes/widget/index.pug
@@ -0,0 +1,21 @@
+if theme.aside.card_author
+  include ./card_author.pug
+
+if theme.aside.card_announcement
+  include ./card_announcement.pug
+
+if theme.aside.card_recent_post
+  include ./card_recent_post.pug
+  
+if theme.aside.card_categories   
+  include ./card_categories.pug
+
+if theme.aside.card_tags
+  include ./card_tags.pug
+
+if theme.aside.card_archives
+  include ./card_archives.pug
+
+if theme.aside.card_webinfo
+  include ./card_webinfo.pug
+  
--- a/layout/index.pug
+++ b/layout/index.pug
@@ -5,4 +5,4 @@ block content
    include includes/recent-posts.pug  
    include includes/pagination.pug
  #aside_content.aside_content
-    include includes/aside.pug
+    include includes/widget/index.pug
--- a/layout/page.pug
+++ b/layout/page.pug
@@ -11,14 +11,14 @@ block content
      if page.comments !== false
        include includes/comments/index.pug
    #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.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
+      include includes/widget/index.pug
  else if page.type === 'categories'    
    #post-content.category-content
      .category-lists
@@ -29,7 +29,7 @@ block content
      if page.comments !== false
        include includes/comments/index.pug
    #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
  else
    article#page
      h1= page.title
@@ -38,4 +38,4 @@ block content
      if page.comments !== false
        include includes/comments/index.pug
    #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -1,45 +1,71 @@
 extends includes/layout.pug

 block top_img
-  - var top_img =  page.top_img || page.cover || theme.post_meta.top_img || theme.post_img || theme.top_img || config.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')
+          .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")
+              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(aria-hidden="true")
+              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.date_type === 'updated' ? 'updated' : 'date'
-            time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[=date(page[date_type], config.date_format)]
+            time.post-meta__date #[i.fa.fa-calendar.fa-fw(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
+            span.post-meta__separator |
+          span
            each item, index in page.categories.data
-              i.fa.fa-inbox.post-meta__icon(aria-hidden="true")
+              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(aria-hidden="true")
+                i.fa.fa-angle-right.fa-fw(aria-hidden="true")
        .post-meta-wordcount
          if (theme.wordcount && theme.wordcount.enable)
-            span= _p('post.wordcount') + ': '
+            i.fa.fa-file-word-o.post-meta__icon.fa-fw(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.fa-fw(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           
-            span= _p('post.page_pv') + ': '
-            span#busuanzi_value_page_pv
+          .post-meta-pv-cv
+            if (theme.wordcount && theme.wordcount.enable && theme.busuanzi.page_pv)
+              span.post-meta__separator |
+            if theme.busuanzi.page_pv       
+              span
+                i.fa.fa-eye.post-meta__icon.fa-fw(aria-hidden="true") 
+                =_p('post.page_pv') + ':'
+              span#busuanzi_value_page_pv
+            if (theme.disqus && theme.disqus.enable && theme.disqus.count && page.comments !== false)
+              if (theme.busuanzi && theme.busuanzi.page_pv)
+                span.post-meta__separator |
+              i.fa.fa-comment-o.post-meta__icon.fa-fw(aria-hidden="true")
+              span= _p('post.comments') + ':'
+              a(href=url_for(page.path) + '#post-comment')
+                span.disqus-comment-count(data-disqus-url=page.permalink)
+            if (theme.valine && theme.valine.enable && theme.valine.count && page.comments !== false)
+              if (theme.busuanzi && theme.busuanzi.page_pv)
+                span.post-meta__separator |
+              i.fa.fa-comments-o.post-meta__icon.fa-fw(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.fa.fa-comments-o.post-meta__icon.fa-fw(aria-hidden="true")
+              span= _p('post.comments') + ':'
+              a(href=url_for(page.path) + '#post-comment')
+                span.gitalk-comment-count.comment-count


 block content
--- a/layout/tag.pug
+++ b/layout/tag.pug
@@ -7,7 +7,7 @@ block content
      +UI_NEW(page.posts)
      include includes/pagination.pug
    #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
  else
    include ./includes/mixins/article-sort.pug
    #tag
@@ -15,4 +15,4 @@ block content
      +articleSort(page.posts)
      include includes/pagination.pug
    #aside_content.aside_content
-      include includes/aside.pug
+      include includes/widget/index.pug
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "hexo-theme-melody",
-  "version": "1.2.0",
+  "name": "hexo-theme-butterfly",
+  "version": "2.1.0",
  "description": "A Hexo Theme: Butterfly"
 }
--- a/scripts/gallery-tag.js
+++ b/scripts/gallery-tag.js
@@ -1,16 +1,6 @@
-hexo.extend.tag.register('gallery', args => {
-  const url = args[0]
-  const title = args[1] || 'No title'
-  return `
-    <div
-      class="gallery-item"
-      style="background-image: url('${url}')"
-      data-title="${title}"
-      data-url="${url}"
-    >
-      <div class="gallery-item__title">
-        ${title}
-      </div>
-    </div>
-  `
-})
+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});
--- a/scripts/hide_post.js
+++ b/scripts/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)
+        )
+      }));
+    });
+  });
+});
--- a/scripts/highlight.js
+++ b/scripts/highlight.js
@@ -0,0 +1,57 @@
+'use strict';
+hexo.extend.filter.register('after_post_render', data => {
+
+  const cheerio = require('cheerio');
+
+  const $ = cheerio.load(data.content, {
+    decodeEntities: false
+  });
+  var theme = hexo.theme.config;
+
+  if (theme.highlight_shrink === 'none' && !theme.highlight_lang && !theme.highlight_copy) {
+    return;
+  }
+
+  $('figure.highlight').wrap('<div class="code-area-wrap"></div>')
+  var $highlight_layout = $('<div class="highlight-tools"></div>')
+
+  $('figure').before($highlight_layout)
+
+  if (theme.highlight_shrink == true) {
+    var $code_expand = $('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
+    $('.highlight-tools').append($code_expand)
+  } else if (theme.highlight_shrink === false) {
+    var $code_expand = $('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
+    $('.highlight-tools').append($code_expand)
+  }
+
+  if (theme.highlight_lang) {
+    var $highlight_lang = $('<div class="code_lang"></div>')
+    $('.highlight-tools').append($highlight_lang)
+    var lang_name_index;
+    var lang_name;
+    $('figure').each(function () {
+      lang_name_index = lang_name = $(this).attr('class').split(' ')[1];
+      if (lang_name_index == 'js')
+        lang_name = 'Javascript'
+      if (lang_name_index == 'md')
+        lang_name = 'Markdown'
+      if (lang_name_index == 'plain')
+        lang_name = 'Code'
+      if (lang_name_index == 'py')
+        lang_name = 'Python'
+
+      $(this).prev().find(".code_lang").text(lang_name)
+
+    })
+  }
+
+  if (theme.highlight_copy) {
+    var $copyIcon = $('<i class="fa fa-clipboard" aria-hidden="true"></i>')
+    var $notice = $('<div class="copy-notice"></div>')
+    $('.highlight-tools').append($notice)
+    $('.highlight-tools').append($copyIcon)
+  }
+
+  data.content = $.html();
+}, 100);
--- a/scripts/list_archives.js
+++ b/scripts/list_archives.js
@@ -1,43 +1,34 @@
-'use strict';
+"use strict";

-hexo.extend.helper.register('list_archives', function (options = {}) {
-
-  const {
-    config
-  } = this;
+hexo.extend.helper.register("list_archives", function(options = {}) {
+  const { config } = this;
  const archiveDir = config.archive_dir;
-  const {
-    timezone
-  } = config;
+  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';
+  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 = '';
+  let result = "";

-  var more_button
-  if (lang === 'zh-CN') {
-    more_button = '查看更多';
-  } else if (lang === 'zh-TW') {
-    more_button = '查看更多';
+  var more_button;
+  if (lang === "zh-CN") {
+    more_button = "查看更多";
+  } else if (lang === "zh-TW") {
+    more_button = "查看更多";
  } else {
-    more_button = 'More';
+    more_button = "More";
  }

-
  if (!format) {
-    format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY';
+    format = type === "monthly" ? "MMMM YYYY" : "YYYY";
  }

-  const posts = this.site.posts.sort('date', order);
+  const posts = this.site.posts.sort("date", order);
  if (!posts.length) return result;

  const data = [];
@@ -70,64 +61,43 @@ hexo.extend.helper.register('list_archives', function (options = {}) {
  const link = item => {
    let url = `${archiveDir}/${item.year}/`;

-    if (type === 'monthly') {
-      if (item.month < 10) url += '0';
+    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">`;
+  result += `<ul class="archive-list">`;

-    for (let i = 0, len = data.length; i < Math.min(len, limit); i++) {
-      const item = data[i];
+  for (let i = 0, len = data.length; i < Math.min(len, limit); i++) {
+    const item = data[i];

-      result += `<li class="${className}-list-item">`;
+    result += `<li class="archive-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>';
+    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>`;
    }
-
-    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>';
-    }
-
+    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;
-})
+});
--- a/scripts/photo.js
+++ b/scripts/photo.js
@@ -0,0 +1,53 @@
+'use strict'
+hexo.extend.filter.register('after_post_render', data => {
+  const theme = hexo.theme.config;
+
+  const cheerio = require('cheerio');
+
+  const $ = cheerio.load(data.content, { decodeEntities: false });
+  
+  const images = $('img').not($('a>img'));
+
+  if (theme.fancybox.enable) {
+    images.each((i, o) => {
+      var lazyload_src = $(o).attr('src') ? $(o).attr('src') : $(o).attr("data-src")
+      var alt = $(o).attr('alt')
+      if (alt !== undefined) {
+        $(o).attr('title', alt)
+      }
+      var $a = $(
+        '<a href="' +
+        lazyload_src +
+        '" data-fancybox="group" data-caption="' +
+        $(o).attr('alt') +
+        '" class="fancybox"></a>'
+      )
+      $(o).wrap($a)    
+    });
+
+  }
+  if (theme.medium_zoom.enable) {
+    images.each((i, o) => {
+      $(o).addClass('mediumZoom')
+    })
+   
+    var imgList = $(".justified-gallery img")  
+    if (imgList.length) {
+      imgList.each((i, o) => {
+        var $a = $('<div></div>')
+        $(o).wrap($a)
+      })
+    }  
+  }
+
+  if (!theme.medium_zoom.enable && !theme.fancybox.enable) {
+    var imgList = $(".justified-gallery > p >img")  
+    if (imgList.length) {
+      imgList.each((i, o) => {
+        $(o).wrap('<div></div>')
+      })
+    }  
+  }
+
+  data.content = $.html();
+}, 100);
--- a/scripts/post-lazyload.js
+++ b/scripts/post-lazyload.js
@@ -1,19 +1,24 @@
 'use strict';
-let cheerio;
+const url_for = require('hexo-util').url_for.bind(hexo);
+
 hexo.extend.filter.register('after_post_render', data => {
  var theme = hexo.theme.config;
+  var bg = theme.lodding_bg.post;
  if (!theme.lazyload.enable) return;

-  if (!cheerio) cheerio = require('cheerio');
+  const cheerio = require('cheerio');

  const $ = cheerio.load(data.content, {decodeEntities: false});
-  const images = $('img');
+  const images = $('img').not($('.justified-gallery img'));
  if (!images.length) return;

  images.each((i, o) => {
    let src = $(o).attr('src');
    $(o).attr('data-src', src).removeAttr('src');
-    $(o).addClass('lozad');
+    if (bg){
+    $(o).attr('src',url_for(bg))
+    }
+    $(o).addClass('lazyload');
  });

  data.content = $.html();
--- a/scripts/related_post.js
+++ b/scripts/related_post.js
@@ -1,3 +1,10 @@
+const moment = require('moment-timezone');
+const {
+  isMoment
+} = moment;
+
+
+
 hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
  var relatedPosts = [];
  currentPost.tags.forEach(function (tag) {
@@ -7,7 +14,9 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
          title: post.title,
          path: post.path,
          cover: post.cover,
-          weight: 1
+          weight: 1,
+          updated: post.updated,
+          created: post.created
        };
        var index = findItem(relatedPosts, 'path', post.path);
        if (index != -1) {
@@ -20,67 +29,93 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
      };
    });
  });
-  if (relatedPosts.length == 0) { return '' };
+  if (relatedPosts.length == 0) {
+    return ''
+  };
  var result = "";
-  var limit_num = hexo.theme.config.related_post.limit || 6
-  var lang = hexo.theme.config.rootConfig.language;
+  const hexoConfig = hexo.theme.config.rootConfig;
+  const config = hexo.theme.config;
+
+  var limit_num = config.related_post.limit || 6
+  var lang = hexoConfig.language;
+  var date_type = config.related_post.date_type || 'created'
  var headline_lang;
  if (lang === 'zh-CN') {
    headline_lang = '相关推荐';
-  } else if ( lang === 'zh-TW') {
+  } 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  = 'lozad' : lazy_class  = ''
+  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

-    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>'
+    for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) {
+
+      var cover = 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>' + ' ' + dateHelper(relatedPosts[i].created) + '</div>'
+      } else {
+        result += '<div class="relatedPosts_main"><div class="relatedPosts_date"><i class="fa fa-history fa-fw" aria-hidden="true"></i>' + ' ' + dateHelper(relatedPosts[i].updated) + '</div>'
+      }
+      result += '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>';
+      result += '</div></a></div>'
    };
-    
-    result += '</div><div class="clear_both"></div></div>'
-  return result;

-}
+    result += '</div><div class="clear_both"></div></div>'
+    return result;
+
+  }
 });
-hexo.extend.helper.register('echo', function(path){
-return path;
+hexo.extend.helper.register('echo', function (path) {
+  return path;
 });
-function isTagRelated (tagName, TBDtags) {
+
+function isTagRelated(tagName, TBDtags) {
  var result = false;
  TBDtags.forEach(function (tag) {
-      if (tagName == tag.name) {
-          result = true;
-      };
+    if (tagName == tag.name) {
+      result = true;
+    };
  })
  return result;
 }
-function findItem (arrayToSearch, attr, val) {
+
+function findItem(arrayToSearch, attr, val) {
  for (var i = 0; i < arrayToSearch.length; i++) {
-      if (arrayToSearch[i][attr] == val) {
-          return i
-      };
+    if (arrayToSearch[i][attr] == val) {
+      return i
+    };
  };
  return -1;
 }
-function compare (attr) {
+
+function compare(attr) {
  return function (a, b) {
-      var val1 = a[attr];
-      var val2 = b[attr];
-      return val2 - val1;
+    var val1 = a[attr];
+    var val2 = b[attr];
+    return val2 - val1;
  }
 }
+
+function dateHelper(date) {
+  const moment = getMoment(date, hexo.theme.config.rootConfig.language);
+  return moment.format(hexo.theme.config.rootConfig.date_format);
+}
+
+function getMoment(date, lang) {
+  if (date == null) date = moment();
+  if (!isMoment(date)) date = moment(isDate(date) ? date : new Date(date));
+  if (lang) date = date.locale(lang);
+  return date;
+}
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -4,10 +4,8 @@ html

 body
  position: relative
-  display: flex
-  flex-direction: column
  min-height: 100%
-  background: #fff
+  background: $white
  color: $font-black
  font-size: $font-size
  font-family: $font-family
@@ -19,6 +17,13 @@ body
    -webkit-user-select: none
    -ms-user-select: none

+#body-wrap
+  position: relative
+  display: flex
+  flex: 1 auto
+  flex-direction: column
+  transition: all .5s
+
 *::-webkit-scrollbar
  width: 8px
  height: 8px
@@ -29,18 +34,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,
@@ -49,11 +52,11 @@ 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
@@ -62,20 +65,15 @@ h6
 *
  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
@@ -99,9 +97,12 @@ hr
    font-size: 20px
    transition: all 1s ease-in-out

+iframe
+  margin: 0 0 1rem
+
 // collapse/expand beautify
 details
-  padding: 0.3rem
+  padding: .3rem
  border: 2px solid darken($light-grey, 10%)

  summary
@@ -110,13 +111,14 @@ details
 // 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
+  margin: .5em
+  padding: .5em
  border: thin silver solid
  text-align: center

 table
  overflow: auto
+  margin: 0 0 1rem
  width: 100%
  border-spacing: 0
  border-collapse: collapse
@@ -126,7 +128,7 @@ table

  th,
  td
-    padding: 0.3rem 0.6rem
+    padding: .3rem .6rem
    border: 1px solid darken($light-grey, 10%)
    vertical-align: top

@@ -134,21 +136,21 @@ table
  background: $selection
  color: $pale-grey

-
-.full_page #site-title, 
-.full_page #site-sub-title, 
+// 字體
+.full_page #site-title,
+.full_page #site-sub-title,
 #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
@@ -160,23 +162,212 @@ table
 .is_hidden
  overflow: hidden

-.pull-left
+.pull_left
  float: left

-.pull-right
+.pull_right
  float: right

+// button hover
+.button--primary
+  color: $ruby
+
+.button--animated
+  transition-duration: 1s
+  transition-property: color
+
+  &:before
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: -1
+    background: $ruby
+    content: ''
+    transition-timing-function: ease-out
+    transition-duration: .5s
+    transition-property: transform
+    transform: scaleX(0)
+    transform-origin: 0 50%
+
+  &:hover
+    &:before
+      transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
+      transform: scaleX(1)
+
+// third-party
 .fireworks
  position: fixed
  z-index: -1
+  z-index: 99999
  pointer-events: none

-// 去掉加載黑框
-img[src=""],img:not([src])
+img[src=''],
+img:not([src])
  opacity: 0

-#body-wrap
-  transition: all .3s
+.justified-gallery
+  margin: 1rem 0
+
+  img
+    opacity: 0
+
+  .fancybox
+    width: auto
+    text-align: inherit
+
+  .img-alt
+    display: none
+
+.medium-zoom-image--opened
+  z-index: 99999 !important
+  margin: 0 !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
+
+  iframe
+    position: absolute
+    top: 0
+    left: 0
+    margin-top: 0
+    width: 100%
+    height: 100%
+
+.layout_page,
+.layout_post,
+#footer
+  animation: main 1s
+
+#nav,
+#top-container
+  animation: header 1s
+
+#site-title
+  animation: titlescale 1s
+
+canvas,
+#web_bg
+  animation: to_show 4s
+
+.card-announcement-animation
+  color: #FF0000
+  animation: announ_animation .8s linear infinite
+
+.scroll-down-effects
+  animation: scroll-down-effect 1.5s infinite
+
+if hexo-config('avatar_effect') == true
+  .avatar-img
+    animation: avatar_turn_around 2s linear infinite
+
+.reward-main
+  animation: donate_effcet .3s .1s ease both
+
+@keyframes scroll-down-effect
+  0%
+    top: 0
+    opacity: .4
+
+  50%
+    top: -16px
+    opacity: 1
+
+  100%
+    top: 0
+    opacity: .4
+
+@keyframes header
+  0%
+    opacity: 0
+    transform: translateY(-50px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes headerNoOpacity
+  0%
+    transform: translateY(-50px)
+
+  100%
+    transform: translateY(0)
+
+@keyframes main
+  0%
+    opacity: 0
+    transform: translateY(50px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes titlescale
+  0%
+    opacity: 0
+    transform: scale(.7)
+
+  100%
+    opacity: 1
+    transform: scale(1)
+
+@keyframes search_close
+  0%
+    opacity: 1
+    transform: scale(1)
+
+  100%
+    opacity: 0
+    transform: scale(.7)
+
+@keyframes to_show
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
+
+@keyframes avatar_turn_around
+  from
+    transform: rotate(0)
+
+  to
+    transform: rotate(360deg)
+
+@keyframes sub_menus
+  0%
+    opacity: 0
+    transform: translateY(10px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes donate_effcet
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes announ_animation
+  0%,
+  to
+    transform: scale(1)
+
+  50%
+    transform: scale(1.2)

@media screen and (max-width: $bg)
  i#toggle-sidebar,
@@ -184,4 +375,4 @@ img[src=""],img:not([src])
    display: none

  body
-    padding-left: 0 !important
+    padding-left: 0 !important
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -1,14 +1,13 @@
 // 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
@@ -18,15 +17,34 @@ $code-block
    counter-reset: line
    white-space: pre-wrap

+.code-area-wrap
+  position: relative
+  margin: 0 0 1rem
+
 figure.highlight
  position: relative

 blockquote
-  margin: 0
-  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: lighten($blockquote-padding-color, 33)
  color: $blockquote-color
-  background-color: lighten($blockquote-padding-color,33)
+
+  a
+    word-break: break-all
+
+  p
+    margin: 0 !important
+    padding: .5rem 0
+
+  footer
+    padding: 0 0 .5rem
+
+    cite
+      &:before
+        padding: 0 .3em
+        content: '—'

 .article-container
  pre,
@@ -34,7 +52,7 @@ blockquote
    font-family: $code-font !important

  code
-    padding: 0.1rem 0.2rem
+    padding: .1rem .2rem
    background: $code-background
    color: $code-foreground
    word-wrap: break-word
@@ -42,6 +60,7 @@ blockquote

  pre
    @extend $code-block
+    padding: 10px 20px

    code
      padding: 0
@@ -54,14 +73,8 @@ blockquote
    position: relative
    border-radius: 1px

-    &:after
-      position: absolute
-      top: 0
-      z-index: 0
-      min-width: 100%
-      height: 1.4rem
-      background: darken($highlight-background, 5)
-      content: ""
+    if hexo-config('highlight_shrink') == true
+      display: none

    pre
      margin: 0
@@ -76,31 +89,22 @@ 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
      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
@@ -110,7 +114,7 @@ blockquote
      position: absolute
      z-index: 1
      margin-bottom: 1em
-      padding: 0.2em 0 0.2em 0.7rem
+      padding: .2rem 0 .2rem .7rem
      width: 100%
      height: 1.4em
      color: $highlight-foreground
@@ -133,7 +137,7 @@ blockquote
          border-bottom-color: $highlight-foreground

      &+table
-        margin-top: 1em
+        margin-top: 1.1rem

        &:before
          margin-top: -2.1rem
@@ -142,15 +146,15 @@ blockquote
          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

@@ -277,4 +281,18 @@ blockquote

      &::selection
        background: $highlight-selection
-        color: $highlight-foreground
+        color: $highlight-foreground
+
+.highlight-tools
+  position: relative
+  width: 100%
+  height: 1.4rem
+  background: darken($highlight-background, 5)
+  color: $highlight-foreground
+  font-size: 14px
+
+  & + figure
+    margin: 0 !important
+
+.highlight-close
+  height: 0 !important
--- a/source/css/_highlight/theme.styl
+++ b/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
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -1,25 +1,25 @@
 #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
    overflow: hidden
+    margin-top: 20px
+    border-radius: 8px
+    background: $white
+    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: 128px
-      width: 128px
      display: inline-block
-      vertical-align: top
+      padding: 5px
+      width: 120px
+      height: 120px
      border-radius: 70px
+      vertical-align: top
      transition: all .3s

      &:hover
@@ -27,309 +27,199 @@

    .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
+      display: flex
+      padding: .7rem 0

-      .length_num 
-        font-size: 1rem
-        color: #000
+      & > .card-info-data-item
+        flex: 1 1
+        min-width: 0

-      .headline 
-        display: block
-        font-size: 0.7rem
-        margin-bottom: -21px
-        text-transform: uppercase
-        color:$font-black
+        a
+          text-decoration: none

-    #aside-social-icons
-      margin: 0.5rem auto -0.7rem
-      width: 15rem
-      text-align: center
+          .headline
+            display: block
+            overflow: hidden
+            color: $font-black
+            text-transform: uppercase
+            text-overflow: ellipsis
+            white-space: nowrap
+            font-size: .7rem

-      .social-icon 
-        margin: 0 0.5rem
+          .length_num
+            color: $dark-black
+            font-size: 1rem
+
+    .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: $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: $white
+      text-decoration: none
+      text-transform: uppercase
+      line-height: 1.6rem

      span
-        padding-left: 10px
+        padding-left: .5rem

-    .toggle_change--primary,.bookmark--primary 
-      color: $ruby
-    
-    .toggle_change--animated,.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 a
-    text-decoration: none
-    position: relative
-    padding-bottom: 0.3rem
-    word-break: keep-all
-
-    &::after
-      position: absolute
-      bottom: 0
-      left: 0
-      z-index: -1
-      width: 0
-      height: 3px
-      background-color: lighten($theme-color, 30%)
-      content: ""
-      transition: all 0.3s ease-in-out
-
-    &:hover
-      color: $light-blue !important
-
-      &::after
-        width: 100%
-
-  .aside_recent_item 
-      margin: 10px 0 -15px 0
-    
-    .aside_recent_post 
-      a
-        text-decoration: none
-        color: $font-black
-
-    .aside_recent_post
-      margin-bottom: 10px
-      width: 100%
-
-    .aside_post_cover
-      height: 66px
-      width: 66px
-      float: left
-      overflow: hidden
-
-    .aside_post_bg
-      object-fit: cover
-      width: 100%
-      height: 100%
-      max-width: 100%
-      padding: 0
-      transition: all .6s
-
-      &:hover
-        box-shadow: none
-        transform: scale(1.1)
-    
-    #aside_title    
-      .aside_post_meta
-        font-size: 0.6rem
-        padding-left: 10px
-        color: #99a9bf
-
-      .aside_post_title
-        line-height: 1rem
-        display: -webkit-box
-        -webkit-line-clamp: 2
-        -webkit-box-orient: vertical
-        overflow: hidden
-        height: 40px
-        padding-left: 10px
-
-        &:hover
-          color: $light-blue !important
-
-  .aside_category_item,.archive-list
-    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
-
-    &:hover
-      background-color: $light-blue
-      color: #363636
+  .card-tag-cloud
    a
      text-decoration: none
-      color: $font-black
-      padding: 0.2rem 1rem
-  
-  .aside_category_list_name,.archive-list-link
-    white-space: nowrap
-    overflow: hidden
-    text-overflow: ellipsis
-    flex: auto
+      word-break: keep-all
+
+      &:hover
+        color: $light-blue !important
+
+  .card-recent-post
+    .aside-recent-item
+      margin: 10px 0 -15px
+
+      & > .aside-recent-post
+        margin-bottom: 10px
+
+        & > a
+          color: $font-black
+          text-decoration: none
+
+          .aside-post-cover
+            float: left
+            overflow: hidden
+            width: 66px
+            height: 66px
+
+            .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-post-title
+            .aside-post_meta
+              padding-left: 10px
+              color: $theme-link-color
+              font-size: .6rem
+
+            .aside-post_title
+              display: -webkit-box
+              overflow: hidden
+              padding-left: 10px
+              height: 40px
+              line-height: 1rem
+              -webkit-line-clamp: 2
+              -webkit-box-orient: vertical
+
+              &:hover
+                color: $light-blue !important
+
+  .card-archives ul.archive-list,
+  .card-categories ul.aside-category-item
+    margin: 0
+    padding: .2rem 0 0
+    list-style: none
+
+  .card-archives ul.archive-list > .archive-list-item,
+  .card-categories ul.aside-category-item > .aside-category-list
+    padding: .2rem 1rem
+    cursor: pointer
+    transition: all .3s
+
+    &:hover
+      padding: .2rem .85rem
+      background-color: $light-blue
+      color: #363636
+
+    a
+      display: flex
+      color: $font-black
+      text-decoration: none
+
+      span
+        &:first-child
+          flex: auto
+          overflow: hidden
+          text-overflow: ellipsis
+          white-space: nowrap
+
+  .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

-// bookmark 樣式
-.fc-container .fancybox-bg 
-  background: #eee
+          &:last-child
+            display: inline-block
+            float: right

-.fancybox-is-open.fc-container .fancybox-bg 
-  opacity: 0.95
-
-.fc-content 
-  margin: 20px
-  max-width: 550px
-  padding: 50px
-  box-shadow: 10px 10px 60px -25px
-  border-radius: 4px
-
-.fc-content h3 
-  margin-top: 0
-  font-size: 1.6em
-  letter-spacing: normal
-
-.fc-content p 
-  color: #666
-  line-height: 1.5
-
-.fc-content p:last-child 
-  margin-bottom: 0
-
-/* Custom animation */
-.fancybox-fx-material.fancybox-slide--previous,
-.fancybox-fx-material.fancybox-slide--next 
-  transform: translateY(-60px) scale(1.1)
-  opacity: 0
-
-.fancybox-fx-material.fancybox-slide--current 
-  opacity: 1
-  transform: translateY(0) scale(1)
-
-.bookmark-ok
-  background: #FF6666
-  border-width: 0
-  color: #fff
-  text-decoration: none
-  padding: 7px 20px
-  line-height: 1.5
-  border-radius: 20px
-  text-transform: uppercase
-  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif
-  font-size: 80%
-  font-weight: 700
-  margin: 5px 5px 5px 0
-  display: inline-block
-  cursor: pointer
-  outline: none
-  transition: all .2s ease-in-out
-  user-select: none
-
-@media screen and (max-width: 900px) 
+@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 

+@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
--- a/source/css/_layout/category.styl
+++ b/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
@@ -29,19 +29,19 @@
        background: $light-blue
        color: $white
        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
@@ -51,13 +51,13 @@
          border-color: $ruby

      &: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: ""
+        content: ''
        line-height: h
--- a/source/css/_layout/comments.styl
+++ b/source/css/_layout/comments.styl
@@ -2,64 +2,67 @@
  margin-top: 1rem

 .comment_headling
-  font-size: 20px
-  font-weight: 700
  margin-bottom: 10px
+  font-weight: 700
+  font-size: 20px

-// valine 
+// valine
 #vcomment
  font-size: inherit
-  
-  input 
-    font-size: 0.65rem

-  button 
-    font-size: .7rem
+  input
+    font-size: .65rem
+
+  button
    padding: .3rem 1rem
+    border-color: #fff
    background-color: $light-blue
    color: #fff
-    border-color: #fff
+    font-size: .7rem

    &:hover
      background-color: darken($light-blue, 40)

-  textarea 
-    font-size: 0.7rem
-    if hexo-config("valine.bg")
-      background: url(convert(hexo-config("valine.bg"))) 100% 100% no-repeat
+  textarea
+    font-size: .7rem
+
+    if hexo-config('valine.bg')
+      background: url(convert(hexo-config('valine.bg'))) 100% 100% no-repeat

  .info
    display: none
-  
+
  .vimg
    border: 0

    &:hover
      transform: rotate(540deg)
-  .vcount
-    font-size: 0.775rem

-  .vnum 
+  .vcount
+    font-size: .775rem
+
+  .vnum
    font-size: 1.1rem

  .vsys
    font-size: 80%
-  
+
  .vtime
    font-size: .65rem
-  
+
  .vcontent
    font-size: 100%
-  
+
  .vat
-    font-size: .7125rem
-    color: $cyan
-    border: 1px solid $cyan
    padding: 0 .8rem
+    border: 1px solid $cyan
    border-radius: 5px
+    color: $cyan
+    font-size: .7125rem

    &:hover
-      background-color: alpha($cyan,0.5)
-  
-  code, pre
+      background-color: alpha($cyan, .5)
+
+  code,
+  pre
    font-size: 98%
--- a/source/css/_layout/flink.styl
+++ b/source/css/_layout/flink.styl
@@ -1,121 +1,91 @@
 .flink
-  .md-links 
-    min-height: calc(100% - 120px - 5pc - 6em)
-    text-align: center
-    overflow: auto
-    padding: 0
-    margin: 0 auto
+  .post-cards
+    margin: -10px 10px 0

-    a 
-      color: #333
-      text-decoration: none
-  
-    li 
-      width: calc(100%/3 - 14px)
-      float: left
-      list-style: none
-    
-  .md-links-item 
-    height: 90px
-    line-height: 17px
-    margin: 20px 7px
-    padding: 0px 0px
-    transition: box-shadow 0.25s
-    text-overflow: ellipsis
-    overflow: hidden
-    border-radius: 8px
-    transform: perspective(1px) translateZ(0)
-    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-    position: relative
-    transition-property: color
-    transition-duration: 0.3s                      
-    
-    img 
-      float: left
-      border-radius: 35px
-      margin: 11px 10px
-      width: 70px
-      height: 70px
-      border: 0px solid #eaeefb       
-  
-    &:hover 
-      img
-        filter: unqoute("progid:DXImageTransform.Microsoft.BasicImage(rotation=3)")
-        transform: rotate(540deg)
-    
-    &:before
-      content: ""
-      position: absolute
-      z-index: -1
-      top: 0
-      left: 0
-      right: 0
-      bottom: 0
-      background: $light-blue !important
-      transform: scale(0)
-      transition-property: transform
-      transition-duration: 0.3s
-      transition-timing-function: ease-out
+    .md-links
+      overflow: auto
+      margin: 0 auto
+      padding: 0
+      text-align: center

-  .md-links-item:hover, 
-  .md-links-item:focus, 
-  .md-links-item:active 
-    color: white
+      & > .md-links-item
+        position: relative
+        float: left
+        overflow: hidden
+        margin: 20px 7px
+        padding: 0
+        width: calc(100% / 3 - 14px)
+        height: 90px
+        border-radius: 8px
+        list-style: none
+        line-height: 17px
+        transform: perspective(1px) translateZ(0)

-  .md-links-item:hover:before, 
-  .md-links-item:focus:before, 
-  .md-links-item:active:before 
-      -webkit-transform: scale(1)
-      transform: scale(1)
-  
-  .md-links-item a:hover
-    cursor: pointer
-  
-  .md-links-title 
-      padding-top: 16px
-      padding-right: 10px
-      font-size: 20px
-      font-weight: bold
-      height:40px
-      overflow: hidden
-      white-space: nowrap
-      text-overflow: ellipsis
+        &:hover
+          img
+            transform: rotate(540deg)
+
+        &:before
+          position: absolute
+          top: 0
+          right: 0
+          bottom: 0
+          left: 0
+          z-index: -1
+          background: $light-blue
+          content: ''
+          transition-timing-function: ease-out
+          transition-duration: .3s
+          transition-property: transform
+          transform: scale(0)
+
+        &:hover:before,
+        &:focus:before,
+        &:active:before
+          transform: scale(1)
+
+        a
+          color: #333
+          text-decoration: none
+
+          img
+            float: left
+            margin: 11px 10px
+            padding: 4px
+            width: 70px
+            height: 70px
+            border-radius: 35px
+            transition: all .3s
+
+          .md-links-title
+            overflow: hidden
+            padding: 16px 10px 0 0
+            height: 40px
+            text-overflow: ellipsis
+            white-space: nowrap
+            font-weight: bold
+            font-size: 20px
+
+          .md-links-des
+            overflow: hidden
+            padding: 16px 10px
+            height: 50px
+            text-overflow: ellipsis
+            white-space: nowrap
+            font-size: 13px

-  .post-cards 
-      margin-top: 5px
-      min-height: 100px
-      padding: 0 15px
-      border-radius: 15px
-  
  .comment-word
-      font-weight:bold
-      font-size:1.7em
-  
-  .md-links-des
-      padding: 16px 10px  
-      font-size:13px 
-      overflow: hidden
-      height:50px
-      white-space: nowrap
-      text-overflow: ellipsis
+    font-weight: bold
+    font-size: 1.7em

-@media screen and (max-width:1100px)
+@media screen and (max-width: 1100px)
  .flink
-    .post-cards 
-      position: relative
-      margin: -20px -16px 0
-      border-radius: 18px
-      padding: 16px
-    
-    .md-links 
-      li 
-        width: calc(100%/2 - 14px)   
+    .md-links
+      .md-links-item
+        width: calc(50% - 14px) !important

-@media screen and (max-width:600px)
+@media screen and (max-width: 600px)
  .flink
-    .md-links 
-      li 
-        width: calc(100%/1 - 14px) 
-
-
-
+    .md-links
+      .md-links-item
+        width: calc(100% - 14px) !important
--- a/source/css/_layout/footer.styl
+++ b/source/css/_layout/footer.styl
@@ -1,30 +1,26 @@
-footer
+#footer
+  position: relative
  margin-top: 1rem
  background: $light-blue
  background-attachment: local
  background-position: bottom
  background-size: cover
-  position: relative

  if hexo-config('footer_bg') != false
    &:before
      position: absolute
+      top: 0
+      right: 0
      bottom: 0
      left: 0
-      display: block
+      background-color: alpha($dark-black, .5)
      content: ''
-      width: 100%
-      height: 100%
-      opacity: 0.5
-      background-color: #394245
-      background-image: linear-gradient(234deg, #394245 0%, #000 100%)

-
-#footer
-  padding: 1.2rem 1rem 1rem
+#footer-wrap
+  position: relative
+  padding: 2rem 1rem
  color: $light-grey
  text-align: center
-  position: relative

  a
    color: $light-grey
@@ -35,9 +31,8 @@ footer
      color: $white

  .footer-separator
-    margin: 0 0.2rem
+    margin: 0 .2rem

  .icp-icon
    padding: 0 4px
    vertical-align: text-bottom
-
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -1,31 +1,30 @@
 #nav
  position: relative
  margin-bottom: 1rem
+  width: 100%
+  background-color: $light-blue
+  background-attachment: local
+  background-position: center
+  background-size: cover

  &.full_page
+    display: flex
+    align-items: center
    height: $index_top_img_height
-  
-  .nav_bg
-    width: 100%
-    height: 100%
-    background-color: $light-blue
-    background-position: center
-    background-size: cover
-    background-attachment: local

  &.not_index_bg
    height: 20rem

  #site-social-icons
+    display: none
    margin: 0 auto
    width: 15rem
    text-align: center
-    display: none

    .social-icon
-      margin: 0 0.5rem
+      margin: 0 .5rem
      color: $light-grey
-      text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+      text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
      font-size: .9rem
      cursor: pointer

@@ -35,13 +34,12 @@
 #site-info
  position: absolute
  width: 100%
-  top: $index_site_info_top

 #site-title,
 #site-sub-title
  color: $light-grey
  text-align: center
-  text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+  text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
  line-height: 1.5

 #site-title
@@ -49,7 +47,7 @@
  font-size: 1.3rem

 #site-sub-title
-  font-size: 0.8rem
+  font-size: .8rem

 #page_site-info
  position: absolute
@@ -60,16 +58,16 @@
  position: absolute
  bottom: 0
  width: 100%
-  cursor: pointer
  height: 42px
-  font-size: 30px
  text-align: center
+  font-size: 30px
+  cursor: pointer

  .scroll-down-effects
    position: absolute
    color: $white

-#header
+header
  position: relative

 #page-header
@@ -78,19 +76,23 @@
  z-index: 99
  padding: 10px 36px
  width: 100%
+  height: 58px
  border: none
  font-size: 18px
-  transition: all .3s
+  opacity: 0
+  transition: all .5s

  .toggle-menu
    display: none
-    padding-top: 0.6rem
-    color: $light-grey
-    cursor: pointer
+    padding: .1rem 0 0 .3rem

    &:hover
      color: $white
-  
+
+    &.is_visible
+      .site-page
+        font-size: inherit
+
  a
    color: $light-grey
    text-decoration: none
@@ -102,14 +104,13 @@
    position: fixed
    top: -60px
    z-index: 101
-    background: alpha($white, 0.8)
-    box-shadow: 0 5px 6px -5px alpha($grey, 0.6)
-    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
+    background: alpha($white, .8)
+    box-shadow: 0 5px 6px -5px alpha($grey, .6)
+    transition: transform .2s ease-in-out, opacity .2s ease-in-out

    &.open-sidebar
      .site-page
-        display: none
-        opacity: 0
+        visibility: hidden

    a,
    #site-name,
@@ -118,116 +119,118 @@
      text-shadow: none

      &:hover
-        color: $light-blue       
+        color: $light-blue

  &.visible
+    transition: all .5s
    transform: translate3d(0, 100%, 0)
-    transition: all .3s

    .menus_item_child
      background-color: $white !important

-      &:before
-        border-color: transparent transparent $white !important
-
  #site-name
-    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+    text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
    font-weight: bold
    cursor: pointer

  .menus_item
+    position: relative
    display: inline-block
-    padding: 0 0 0 0.7rem
+    padding: 0 0 0 .7rem

-    &:hover,&:focus
+    &:hover
      .menus_item_child
        display: block
-      
+
      .menus-expand
        transform: rotate(180deg) !important
-    
+
    .menus-expand
-      padding: 4px        
-      transform: rotate(0deg)
+      padding: 4px
      transition: all .3s
+      transform: rotate(0)
+
+    & > a
+      &:after
+        position: absolute
+        bottom: 0
+        left: 0
+        z-index: -1
+        width: 0
+        height: 3px
+        background-color: lighten($theme-color, 30%)
+        content: ''
+        transition: all .3s ease-in-out
+
+      &:hover
+        &::after
+          width: 100%

    .menus_item_child
      position: absolute
-      background-color: alpha($white, 0.8)
-      padding: 8px 10px
-      border-radius: 5px
-      box-shadow: 0 5px 20px -4px rgba(0,0,0,.5)
+      right: 0
      display: none
-      opacity: 1
+      margin-top: 8px
+      padding: 0
+      width: max-content
+      background-color: alpha($white, .8)
+      box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5)
      animation: sub_menus .3s .1s ease both

      &:before
-        content: ""
        position: absolute
-        top: -20px
-        left: 50%
-        margin-left: -10px
-        border-width: 10px
-        border-style: solid
-        border-color: transparent transparent alpha($white, 0.8)
+        top: -8px
+        left: 0
+        width: 100%
+        height: 20px
+        content: ''

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

+        &:hover
+          background: $theme-color
+
        a
          color: #3b3a3a
          text-shadow: none

-.site-page
-  position: relative
-  padding-bottom: 0.3rem
-  text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
-  font-size: 0.7rem
-  cursor: pointer
+  #search_button
+    padding: 0 0 0 .7rem

-  &::after
-    position: absolute
-    bottom: 0
-    left: 0
-    z-index: -1
-    width: 0
-    height: 3px
-    background-color: lighten($theme-color, 30%)
-    content: ""
-    transition: all 0.3s ease-in-out
+  .site-page
+    position: relative
+    padding-bottom: .3rem
+    text-shadow: .05rem .05rem .1rem rgba(0, 0, 0, .3)
+    font-size: .7rem
+    cursor: pointer

-  &:hover
-    &::after
-      width: 100%
-
-
-@media screen and (min-width: $sm)  
+@media screen and (min-width: $sm)
  #site-title
    font-size: 2rem

  #site-sub-title
    font-size: 1.2rem

-
@media screen and (max-width: $sm)
  #page-header
-    padding: 10px 0.8rem
+    padding: 10px .8rem

-    .menus
-      display: none
-
-    .toggle-menu
+  #nav
+    #site-social-icons
      display: block

-    .search 
-      span
-        display none
-  
+    &.not_index_bg
+      height: 14rem
+
+    #page_site-info
+      top: 7rem
+
@media screen and (max-width: $bg)
  #page-header
    &.fixed
      &.open-sidebar
        .site-page
-          display: inline-block
-          opacity: 1
+          visibility: visible
--- a/source/css/_layout/mobile-sidebar.styl
+++ b/source/css/_layout/mobile-sidebar.styl
@@ -2,41 +2,39 @@
  #menu_mask
    position: fixed
    top: 0
-    bottom: 0
-    width: 100%
-    height: 110vh
-    left: 0
    right: 0
-    background: alpha($black,0.7)
+    bottom: 0
+    left: 0
    z-index: 102
    display: none
+    background: alpha($dark-black, .7)

-  #mobile-sidebar-menus,#mobile-sidebar-toc
+  #mobile-sidebar-menus,
+  #mobile-sidebar-toc
    position: fixed
    top: 0
    right: -254px
-    width: 250px
-    height 101vh
-    background: $white
-    cursor: pointer
-    box-shadow: 0 0 4px alpha($dark-black,0.27)
    z-index: 103
-    overflow-y: scroll
    display: block
-    transition: all .3s
-    display: none
+    overflow-y: scroll
+    width: 250px
+    height: 100%
+    background: $white
+    box-shadow: 0 0 4px alpha($dark-black, .27)
+    transition: all .5s

  #mobile-sidebar-menus
-    .mobile_author_icon
+    & > .mobile_author_icon
      padding: 1.3rem 1.5rem 0
      text-align: center

      img
-        height: 120px
-        width: 120px
        display: inline-block
-        vertical-align: top
+        padding: 0
+        width: 120px
+        height: 120px
        border-radius: 70px
+        vertical-align: top
        transition: all .3s

    .mobile_post_data
@@ -47,117 +45,86 @@
      .mobile_data_item
        flex: 1

-      .mobile_data_link 
+      .mobile_data_link
        a
          text-decoration: none

-        .length_num 
-          font-size: .9rem
+        .length_num
          color: $dark-black
+          font-size: .9rem

-        .headline 
+        .headline
          display: block
-          font-size: 0.7rem
+          color: $font-black
          text-transform: uppercase
-          color:$font-black
-      
-    hr         
+          font-size: .7rem
+
+    hr
      margin: 1rem auto

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

-      a
-        display: block !important
-        opacity: 1 !important
+      .site-page
+        position: relative
+        z-index: 0
+        display: block
+        overflow: hidden
        margin: 0
        padding: .3rem 1.5rem
        color: $font-black
-        text-shadow: none
-        font-size: 0.8rem
-        z-index: 0
+        text-decoration: none
        text-overflow: ellipsis
-        overflow: hidden
-        white-space: nowrap  
-        
+        text-shadow: none
+        white-space: nowrap
+        font-size: .8rem
+        cursor: pointer
+
      i
        width: 30%
-        text-align: left 
+        text-align: left

      span
-        width 70%
+        width: 70%

        &:hover
          color: $light-blue

      .menus-expand
        position: absolute
+        right: 0
+        padding: 6px
        width: 30px !important
        height: 30px
-        right: 0
-        padding: 6px        
-        transform: rotate(0deg)
        transition: all .3s
-    
+        transform: rotate(0)
+
        &.menus-closed
-          transform: rotate(180deg) !important
          transition: all .3s
-      
+          transform: rotate(180deg) !important
+
      .menus_item_child
-        list-style: none
        margin: 0
-                            
-  #mobile-sidebar-toc
-    padding: 15px 10px
+        list-style: none

-    ol,li
-      list-style: none
-      padding: 0 0 0 5px
+  #mobile-sidebar-toc
+    padding: 1rem .5rem 5rem .3rem
+
+    ol,
+    li
      margin: 0
-    
+      padding: 0 0 0 8px
+      list-style: none

-    .toc_mobile_headline 
-        text-align: center
-        font-size: 18px
-        font-weight: bold
-
-  a
-    text-decoration: none
-    color: $light-black
-
-    &:hover
-          color: $light-blue
-
-// 手機打開menus，toc特效
-.open-mobile-menus,
-.open-mobile-toc
-  overflow: hidden
-  #body-wrap
-    transform: translateX(-250px)
-  #page-header
-    transform: translateX(-250px)
-    &.fixed.visible
-      transform: translate3d(-250px, 100%, 0)
-  #rightside
-    transform: translate3d(-288px, 0, 0) !important
-
-.open-mobile-menus
-  #mobile-sidebar
-    #mobile-sidebar-menus
-      transform: translateX(-254px)
-
-.open-mobile-toc
-  #mobile-sidebar
-    #mobile-sidebar-toc
-      transform: translateX(-254px)
-
-@media screen and (max-width: $sm)
-  #mobile-sidebar-menus
-    display: block !important
-
-@media screen and (max-width: $bg)
-  #mobile-sidebar-toc
-    display: block !important
+    .toc_mobile_headline
+      text-align: center
+      font-weight: bold
+      font-size: 18px

+    .toc_mobile_items-link
+      color: $font-color
+      text-decoration: none

+      &:hover
+        color: $light-blue
--- a/source/css/_layout/nightshift.styl
+++ b/source/css/_layout/nightshift.styl
@@ -1,293 +0,0 @@
-if hexo-config("nightshift") && hexo-config("nightshift.enable")
-  .night-mode 
-    color: #99a9bf 
-    background-color: #2d3032
-
-    #sidebar
-      background: #2d3035 !important
-      box-shadow: -0.25rem 0 0.25rem #2d3035 !important
-
-      &::-webkit-scrollbar-thumb
-        background: lighten(#2d3035,5)
-    
-    #toggle-sidebar
-      color: #99a9bf !important
-
-    if hexo-config("local_search") && hexo-config("local_search.enable")
-      #local-search
-        background: #2d3035  
-        .local-search-box--input  
-          background: #2d3035
-          color: #99a9bf
-            
-        .search-result-title
-          color: #99a9bf
-    if hexo-config("algolia_search.enable")
-      #algolia-search
-        background: #2d3035
-        .ais-search-box--input
-          background: #2d3035
-          color: #99a9bf
-
-        #algolia-search-results
-          .algolia-hit-item-link
-            color: #99a9bf !important
-        
-    h1, h2, h3, h4, h5, h6
-      color: #99a9bf
-
-    .article-container code
-      background: #616a6b 
-      color: #99a9bf 
-
-    // 評論
-    #vcomment
-      p,a,textarea,.vemoji-btn,.vpreview-btn,input,path,.vcount,.vnum,.vtime,.vsys,.vsys,.vnick
-        color: #99a9bf !important
-      
-      .vsys
-        background: rgb(97, 106, 107) !important
-
-      .vbtn
-        background: rgb(45, 48, 53) !important      
-        color: #99a9bf !important
-        border: 1px solid #99a9bf
-      
-      .vwrap
-        border: 1px solid #99a9bf
-      
-      input
-        border-bottom: 1px dashed #616a6b
-      
-      .vh
-        border-bottom: 1px dashed  #616a6b
-      
-      pre
-        background-color: #2d3035
-        border: 1px solid #99a9bf
-      
-      .vcontent.expand:before
-        background: linear-gradient(180deg,hsla(0, 0%, 0%, 0),hsl(218, 8%, 19%))
-
-      .vcontent.expand:after
-        background: hsla(204, 5%, 22%, 1)
-          
-    .recent-post-item
-      background: #2d3032 !important
-      
-      .article-title,
-      a
-        color: #99a9bf !important
-
-    #page-header
-        &.fixed
-            background: #2d3035
-            box-shadow: 0 5px 6px -5px rgba(133,133,133,0) 
-
-            a, 
-            .toggle-menu, 
-            #site-name 
-                color: #99a9bf 
-                
-    blockquote
-        border-left: 0.2rem solid #7A5353 
-        color: #99a9bf
-        background-color: #2f3d49
-
-    hr
-        background: 0
-        border: 2px dashed #616A6B
-        &:before
-            color: #99a9bf
-
-    .post-meta__tags
-        background: 0
-        border: 1px solid #99a9bf
-        color: #99a9bf
-
-
-    .post-copyright
-      border: 1px solid #99a9bf
-
-      *
-          color: #99a9bf
-
-    .article-container .highlight
-        background-color: #1B2631 
-        .code pre
-            background-color: #1B2631 
-
-        .gutter pre
-            background: #1C2833 
-
-
-        &:after
-            background: rgb(27, 38, 59) 
-        
-        table
-            &:after,.copy-notice
-                background: rgb(27, 38, 59) 
-        
-        &::-webkit-scrollbar-thumb
-          background: lighten(#1B2631,10)
-        
-    .copy-notice
-        background: rgb(27, 38, 59) 
-
-    .post-cards,.md-links-item
-        a
-            color: #99a9bf
-
-    .aplayer
-        color: #000000 
-        filter: brightness(0.6)
-
-    .article-sort-item__title
-        color: #99a9bf
-
-    .category-list
-        a
-            color: #99a9bf
-
-
-
-    .translate_chn_to_cht,
-    .nightshift,
-    #readmode,
-    #to_comment,
-    #font_plus,
-    #font_minus,
-    #rightside_config,
-    #go-up,
-    #mobile-toc-button
-        background-color: #2d3035 !important
-
-    img
-        filter: brightness(0.6)
-
-    .layout_post
-        background:#2d3035
-    
-    canvas
-      display: none !important
-
-    #aside_content
-      .card_widget
-        background:#2d3035 !important
-      .headline,
-      .length_num,
-      .aside_post_title,
-      .aside_category_list_link,
-      .archive-list-link,
-      .social-icon
-        color: #99a9bf !important
-      
-      #bookmark-it
-        background: #616a6b !important
-    
-    #archive,
-    .tag-cloud,
-    #tag,
-    .category-content,
-    #category,
-    #page,
-    .flink
-      background:#2d3035
-
-    #nav,
-    #top-container,
-    footer
-      &::before
-        content: ""
-        position: absolute
-        top: 0
-        bottom: 0
-        left: 0
-        right: 0
-        background-color: rgba(0,0,0,.6)
-
-    .layout_page
-      .post-meta__date,
-      .article-meta__separator,
-      .article-meta__categories,
-      i
-        color: #99a9bf
-
-    #site-info .blogtitle, 
-    span.subtitle,
-    #site-title,
-    #post-info .posttitle,
-    #post-info #post-meta,
-    #site-social-icons i,
-    #top-container a,
-    #footer,
-    #footer a,
-    #page-header a,
-    #page-header .toggle-menu
-      color: rgba(238,238,238,.6)
-    
-    #footer
-      background-color: #2d3032
-
-    //打賞 分享
-    .post-reward
-      .reward-button
-        background-color: #616a6b
-      .post_share
-        filter: brightness(0.6)
-      img
-        filter: brightness(1)
-      
-    &::-webkit-scrollbar-thumb
-      background: lighten(#2d3035,5)
-
-    #web_bg
-      background-color: #2d3032
-
-    #hbe-security
-      label
-        color: #99a9bf !important
-      input
-        background-color: #616a6b
-
-
-    #mobile-sidebar
-      #mobile-sidebar-menus
-        background: #2d3035
-
-        .headline
-          color: #99a9bf !important
-        
-        .length_num
-          color: darken(#99a9bf,10) !important
-        a
-          color: #99a9bf !important
-
-      #mobile-sidebar-toc
-        background: #2d3035
-        a
-          color: #99a9bf !important
-
-
-    #page-header 
-      .menus_item_child
-        background-color: #2d3035 !important
-
-        &:before
-          border-color: transparent transparent #2d3035 !important
-
-        li
-          a
-            color: #99a9bf
-
-
-
-
-    
-
-
-
-
-
-
-
--- a/source/css/_layout/note.styl
+++ b/source/css/_layout/note.styl
@@ -1,256 +1,282 @@
-.note 
+.note
  $note-icons = hexo-config('note.icons')
  $note-style = hexo-config('note.style')
-  margin: 10px 0
-  padding: 15px
  position: relative
+  margin: 0 0 1rem
+  padding: 15px

-  if ($note-style == 'simple') 
+  if ($note-style == 'simple')
    border: 1px solid $light-grey
    border-left-width: 5px
-  

-  if ($note-style == 'modern') 
-    background-color: $whitesmoke
+  if ($note-style == 'modern')
    border: 1px solid transparent
-  
+    background-color: $whitesmoke

-  if ($note-style == 'flat') 
-    background-color: lighten($light-grey, 65%)
+  if ($note-style == 'flat')
    border: initial
    border-left: 5px solid $light-grey
-  
+    background-color: lighten($light-grey, 65%)

-  if (hexo-config('note.border_radius') is a 'unit') 
+  if hexo-config('note.border_radius') is a 'unit'
    border-radius: unit(hexo-config('note.border_radius'), px)
-  

-  h2, h3, h4, h5, h6 
-    if ($note-icons) 
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    if $note-icons
      margin-top: 3px
-    else 
+    else
      margin-top: 0
-    

-    border-bottom: initial
    margin-bottom: 0
    padding-top: 0 !important
-  
+    border-bottom: initial

-  p, ul, ol, table, pre, blockquote, img 
-    &:first-child 
+  p,
+  ul,
+  ol,
+  table,
+  pre,
+  blockquote,
+  img
+    &:first-child
      margin-top: 0 !important

-    &:last-child 
+    &:last-child
      margin-bottom: 0 !important
-    

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

-      &::before 
-        font-family: 'FontAwesome'
-        font-size: larger
-        left: 15px
+      &::before
        position: absolute
        top: 13px
-      
-  &.default 
-    if ($note-style == 'flat') 
-      background-color: $note-default-bg
-    
+        left: 15px
+        font-size: larger
+        font-family: 'FontAwesome'

-    if ($note-style == 'modern') 
-      background-color: $note-modern-default-bg
+  &.default
+    if ($note-style == 'flat')
+      background-color: $note-default-bg
+
+    if ($note-style == 'modern')
      border-color: $note-modern-default-border
+      background-color: $note-modern-default-bg
      color: $note-modern-default-text

-      a, span.exturl 
-        &:not(.btn) 
+      a,
+      span.exturl
+        &:not(.btn)
          border-bottom: 1px solid $note-modern-default-text
          color: $note-modern-default-text

-          &:hover 
+          &:hover
            border-bottom: 1px solid $note-modern-default-hover
            color: $note-modern-default-hover
-          
-    if ($note-style != 'modern') 
+
+    if ($note-style != 'modern')
      border-left-color: $note-default-border

-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
        color: $note-default-text
-      
-    if ($note-icons) 
-      &:not(.no-icon) 
-        &::before 
+
+    if $note-icons
+      &:not(.no-icon)
+        &::before
          content: $note-default-icon

-          if ($note-style != 'modern') 
+          if ($note-style != 'modern')
            color: $note-default-text

-  &.primary 
-    if ($note-style == 'flat') 
+  &.primary
+    if ($note-style == 'flat')
      background-color: $note-primary-bg
-    

-    if ($note-style == 'modern') 
-      background-color: $note-modern-primary-bg
+    if ($note-style == 'modern')
      border-color: $note-modern-primary-border
+      background-color: $note-modern-primary-bg
      color: $note-modern-primary-text

-      a, span.exturl 
-        &:not(.btn) 
+      a,
+      span.exturl
+        &:not(.btn)
          border-bottom: 1px solid $note-modern-primary-text
          color: $note-modern-primary-text

-          &:hover 
+          &:hover
            border-bottom: 1px solid $note-modern-primary-hover
            color: $note-modern-primary-hover
-          
-    if ($note-style != 'modern') 
+
+    if ($note-style != 'modern')
      border-left-color: $note-primary-border

-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
        color: $note-primary-text
-      
-    if ($note-icons) 
-      &:not(.no-icon) 
-        &::before 
+
+    if $note-icons
+      &:not(.no-icon)
+        &::before
          content: $note-primary-icon

-          if ($note-style != 'modern') 
+          if ($note-style != 'modern')
            color: $note-primary-text
-          
-  &.info 
-    if ($note-style == 'flat') 
-      background-color: $note-info-bg
-    

-    if ($note-style == 'modern') 
-      background-color: $note-modern-info-bg
+  &.info
+    if ($note-style == 'flat')
+      background-color: $note-info-bg
+
+    if ($note-style == 'modern')
      border-color: $note-modern-info-border
+      background-color: $note-modern-info-bg
      color: $note-modern-info-text

-      a, span.exturl 
-        &:not(.btn) 
+      a,
+      span.exturl
+        &:not(.btn)
          border-bottom: 1px solid $note-modern-info-text
          color: $note-modern-info-text

-          &:hover 
+          &:hover
            border-bottom: 1px solid $note-modern-info-hover
            color: $note-modern-info-hover
-          
-    if ($note-style != 'modern') 
+
+    if ($note-style != 'modern')
      border-left-color: $note-info-border

-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
        color: $note-info-text
-      
-    if ($note-icons) 
-      &:not(.no-icon) 
-        &::before 
+
+    if $note-icons
+      &:not(.no-icon)
+        &::before
          content: $note-info-icon

-          if ($note-style != 'modern') 
+          if ($note-style != 'modern')
            color: $note-info-text
-          
-  &.success 
-    if ($note-style == 'flat') 
-      background-color: $note-success-bg
-    

-    if ($note-style == 'modern') 
-      background-color: $note-modern-success-bg
+  &.success
+    if ($note-style == 'flat')
+      background-color: $note-success-bg
+
+    if ($note-style == 'modern')
      border-color: $note-modern-success-border
+      background-color: $note-modern-success-bg
      color: $note-modern-success-text

-      a, span.exturl 
-        &:not(.btn) 
+      a,
+      span.exturl
+        &:not(.btn)
          border-bottom: 1px solid $note-modern-success-text
          color: $note-modern-success-text

-          &:hover 
+          &:hover
            border-bottom: 1px solid $note-modern-success-hover
            color: $note-modern-success-hover
-          
-    if ($note-style != 'modern') 
+
+    if ($note-style != 'modern')
      border-left-color: $note-success-border

-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
        color: $note-success-text
-      
-    if ($note-icons) 
-      &:not(.no-icon) 
-        &::before 
+
+    if $note-icons
+      &:not(.no-icon)
+        &::before
          content: $note-success-icon

-          if ($note-style != 'modern') 
+          if ($note-style != 'modern')
            color: $note-success-text
-          
-  &.warning 
-    if ($note-style == 'flat') 
-      background-color: $note-warning-bg
-    

-    if ($note-style == 'modern') 
-      background-color: $note-modern-warning-bg
+  &.warning
+    if ($note-style == 'flat')
+      background-color: $note-warning-bg
+
+    if ($note-style == 'modern')
      border-color: $note-modern-warning-border
+      background-color: $note-modern-warning-bg
      color: $note-modern-warning-text

-      a, span.exturl 
-        &:not(.btn) 
+      a,
+      span.exturl
+        &:not(.btn)
          border-bottom: 1px solid $note-modern-warning-text
          color: $note-modern-warning-text

-          &:hover 
+          &:hover
            border-bottom: 1px solid $note-modern-warning-hover
            color: $note-modern-warning-hover
-          
-    if ($note-style != 'modern') 
+
+    if ($note-style != 'modern')
      border-left-color: $note-warning-border

-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
        color: $note-warning-text
-      
-    if ($note-icons) 
-      &:not(.no-icon) 
-        &::before 
+
+    if $note-icons
+      &:not(.no-icon)
+        &::before
          content: $note-warning-icon

-          if ($note-style != 'modern') 
+          if ($note-style != 'modern')
            color: $note-warning-text
-          
-  &.danger 
-    if ($note-style == 'flat') 
-      background-color: $note-danger-bg
-    

-    if ($note-style == 'modern') 
-      background-color: $note-modern-danger-bg
+  &.danger
+    if ($note-style == 'flat')
+      background-color: $note-danger-bg
+
+    if ($note-style == 'modern')
      border-color: $note-modern-danger-border
+      background-color: $note-modern-danger-bg
      color: $note-modern-danger-text

-      a, span.exturl 
-        &:not(.btn) 
+      a,
+      span.exturl
+        &:not(.btn)
          border-bottom: 1px solid $note-modern-danger-text
          color: $note-modern-danger-text

-          &:hover 
+          &:hover
            border-bottom: 1px solid $note-modern-danger-hover
            color: $note-modern-danger-hover
-          

-    if ($note-style != 'modern') 
+    if ($note-style != 'modern')
      border-left-color: $note-danger-border

-      h2, h3, h4, h5, h6 
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
        color: $note-danger-text

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

-          if ($note-style != 'modern') 
+          if ($note-style != 'modern')
            color: $note-danger-text
--- a/source/css/_layout/page.styl
+++ b/source/css/_layout/page.styl
@@ -1,135 +1,134 @@
-galleryItemStyle(w, h)
-  .gallery
-    &-item
-      width: w
-      height: unit(h, "rem")
+.layout_page
+  display: flex
+  align-items: flex-start
+  margin: 0 auto
+  padding: 0 15px
+  max-width: 1200px

-      &__title
-        transform: translate3d(0, unit(h, "rem"), 0)
+// index
+#recent-posts
+  width: 75%

-      &:hover
-        .gallery-item__title
-          transform: translate3d(0, unit(h - 1.5, "rem"), 0)
-
-.recent-post-item
-  .content
-    margin-top: 0.5rem
-
-    p
-      word-break: break-word
-
-
-    ol,
-    ul
-      margin-top: 0.4rem
-      padding: 0 0 0 0.8rem
-      list-style: none
-      counter-reset: li
-
-      p
-        margin: 0
-
-      ol,
-      ul
-        padding-left: 0.5rem
-
-      li
-        position: relative
-        margin: 0.2rem 0
-        padding: 0.1rem 0.5rem 0.1rem 1.5rem
-
-        &:hover
-          &:before
-            transform: rotate(360deg)
-
-        &:before
-          position: absolute
-          top: 0
-          left: 0
-          background: $light-blue
-          color: $white
-          cursor: pointer
-          transition: all 0.3s ease-out
-
-    ol
-      li
-        &:before
-          margin-top: 0.2rem
-          width: w = 1.2rem
-          height: h = w
-          border-radius: 0.5 * w
-          content: counter(li)
-          counter-increment: li
-          text-align: center
-          font-size: 0.6rem
-          line-height: h
-
-    ul
-      li
-        &:hover
-          &:before
-            border-color: $ruby
-
-        &:before
-          $w = 0.3rem
-          top: 10px
-          margin-left: 0.45rem
-          width: w = $w
-          height: h = w
-          border: 0.5 * w solid $light-blue
-          border-radius: w
-          background: $white
-          content: ""
-          line-height: h
-
-  .article-type
-    margin-left: 0.3rem
-    color: $grey
-
-  .article-meta
-    color: $grey
-
-    .sticky
-      color: $theme-button-hover-color
-
-    i
-      margin: 0 0.2rem 0 0.3rem
-
-    &__separator
-      margin-left: 0.3rem
-
-    .fa-angle-right,
-    &__link
-      margin: 0 0 0 0.3rem
-
-  time
-    color: $grey
-
-  .article-title
-    margin-bottom: 0.3rem
-    color: $black
-    text-decoration: none
-    font-size: 1.2rem
-    cursor: pointer
-    transition: all 0.2s ease-in-out
-    line-height: 1.4
-    text-overflow: ellipsis
-    display: -webkit-box
-    -webkit-box-orient: vertical
-    -webkit-line-clamp: 2
-    overflow: hidden
-    word-wrap: break-word
+  & > .recent-post-item
+    display: flex
+    flex-direction: row
+    align-items: center
+    margin-top: 20px
+    padding: 0
+    height: 280px
+    border-radius: 8px
+    background: #fff
+    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+    transition: all .3s

    &:hover
-      // border-bottom: 1px solid $light-blue
-      color: $light-blue !important
+      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)

+      img.post_bg
+        transform: scale(1.1)
+
+    if hexo-config('index_post_cover') == 'both'
+      .left_radius
+        border-radius: 8px 0 0 8px
+
+      .right_radius
+        order: 2
+        border-radius: 0 8px 8px 0
+    else if hexo-config('index_post_cover') == 'left'
+      .left_radius
+        border-radius: 8px 0 0 8px
+
+      .right_radius
+        border-radius: 8px 0 0 8px
+    else if hexo-config('index_post_cover') == 'right'
+      .left_radius
+        order: 2
+        border-radius: 0 8px 8px 0
+
+      .right_radius
+        order: 2
+        border-radius: 0 8px 8px 0
+
+    .post_cover
+      overflow: hidden
+      width: 45%
+      height: 280px
+
+      img.post_bg
+        display: block
+        margin: 0
+        padding: 0
+        width: 100%
+        height: 100%
+        border: 0
+        transition: all .6s
+        object-fit: cover
+
+        &:hover
+          transform: scale(1.1)
+
+    & >.recent-post-info
+      display: inline-block
+      overflow: hidden
+      padding: 0 40px
+      width: 55%
+
+      & > .article-title
+        display: -webkit-box
+        overflow: hidden
+        margin-bottom: .3rem
+        color: $black
+        text-decoration: none
+        text-overflow: ellipsis
+        word-wrap: break-word
+        font-size: 1.2rem
+        line-height: 1.4
+        transition: all .2s ease-in-out
+        -webkit-box-orient: vertical
+        -webkit-line-clamp: 2
+
+        &:hover
+          color: $light-blue !important
+
+      & > time
+        color: $grey
+
+      & > .article-meta
+        color: $grey
+
+        .sticky
+          color: $theme-button-hover-color
+
+        i
+          margin: 0 .2rem 0 .3rem
+
+        .article-meta__separator
+          margin-left: .3rem
+
+        .fa-angle-right
+          margin: 0 0 0 .3rem
+
+        a.article-meta__categories
+          color: #858585
+          text-decoration: none
+
+          &:hover
+            color: #49b1f5 !important
+
+      & > .content
+        display: -webkit-box
+        overflow: hidden
+        margin-top: .5rem
+        height: 90px
+        word-break: break-word
+        -webkit-line-clamp: 3
+        -webkit-box-orient: vertical
+
+// tags page
 .tag-cloud
-  padding: 40px 44px 44px
-
  a
    display: inline-block
-    margin: 0 0.4rem
+    padding: 0 .4rem
    text-decoration: none
    cursor: pointer
    transition: all .3s
@@ -139,8 +138,8 @@ galleryItemStyle(w, h)
      transform: scale(1.1)

  &__title
-    font-size: 1.8rem
    text-align: center
+    font-size: 1.8rem

  &-tags
    text-align: center
@@ -148,7 +147,30 @@ galleryItemStyle(w, h)
 #tag,
 #category,
 #archive
-  padding: 3rem 3rem 3rem
+  padding: 3rem
+
+.tag-cloud,
+#page,
+.category-content,
+.flink
+  padding: 40px 44px 44px
+
+#page,
+.category-content,
+#archive,
+.tag-cloud,
+.flink,
+#tag,
+#category
+  margin-top: 20px
+  width: 75%
+  border-radius: 8px
+  background: $white
+  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+  transition: all .3s
+
+  &:hover
+    box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)

 .article-sort
  padding-left: 1rem
@@ -167,50 +189,50 @@ galleryItemStyle(w, h)

    &:before
      position: absolute
-      top: 0.25rem
-      left: calc(-0.5rem + 1px)
+      top: .25rem
+      left: calc(-.5rem + 1px)
      z-index: 1
-      width: w = 0.5rem
+      width: w = .5rem
      height: h = w
-      border: 0.5 * w solid $light-blue
+      border: .5 * w solid $light-blue
      border-radius: w
      background: $white
-      content: ""
+      content: ''
      line-height: h
-      transition: all 0.2s ease-in-out
+      transition: all .2s ease-in-out

    &:after
      position: absolute
      bottom: 0
      left: 0
      z-index: 0
-      width: 0.1rem
+      width: .1rem
      height: 1.3rem
      background: $pale-blue
-      content: ""
+      content: ''

  &-item
    position: relative
-    margin: 0 0 1rem 0.5rem
-    transition: all 0.2s ease-in-out
+    margin: 0 0 1rem .5rem
+    transition: all .2s ease-in-out

    &:hover
      &:before
        border-color: $ruby

    &:before
-      $w = 0.3rem
+      $w = .3rem
      position: absolute
      top: 1.8rem
      left: calc(-1rem - 17px)
      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: ""
+      content: ''
      line-height: h
-      transition: all 0.2s ease-in-out
+      transition: all .2s ease-in-out

    &.year
      font-size: 1rem
@@ -220,36 +242,36 @@ galleryItemStyle(w, h)
          border-color: $light-blue

      &:before
-        top: 0.7rem
+        top: .7rem
        border-color: $ruby
-    
+
    &__time
+      padding-left: .4rem
      color: $a-link-color
-      font-size: 0.7rem
-      padding-left: 0.4rem
+      font-size: .7rem

    &__title
-      color: $font-black
-      font-size: 0.75rem
-      height: 60px
-      overflow: hidden
      display: -webkit-box
+      overflow: hidden
+      height: 60px
+      color: $font-black
+      font-size: .75rem
+      transition: all .3s
      -webkit-line-clamp: 2
      -webkit-box-orient: vertical
-      transition: all .3s

      &:hover
        color: $light-blue
        transform: translateX(20px)
-    
+
    &__img
      img
-        height: 100%
-        width: 100%
-        object-fit: cover
        padding: 0
+        width: 100%
+        height: 100%
        transition: all .6s
-      
+        object-fit: cover
+
        &:hover
          transform: scale(1.1)

@@ -261,17 +283,16 @@ galleryItemStyle(w, h)
        color: $a-link-color

  &-img
-    height: 80px
-    width: 80px
    display: inline-block
    overflow: hidden
-  
-  &-post
-    display: inline-block
-    top: 0
-    position: absolute
-    margin-left: 1rem
+    width: 80px
+    height: 80px

+  &-post
+    position: absolute
+    top: 0
+    display: inline-block
+    margin-left: 1rem

 .category-lists
  padding: 1rem 0 1.5rem
@@ -287,57 +308,75 @@ galleryItemStyle(w, h)
    cursor: pointer

  .category-list-count
-    margin-left: 0.4rem
+    margin-left: .4rem
    color: $a-link-color

    &:before
-      content: "("
+      content: '('

    &:after
-      content: ")"
-
-.gallery
-  &-item
-    position: relative
-    display: inline-block
-    overflow: hidden
-    margin: 0.4rem
-    width: 6rem
-    height: 6rem
-    background-position: 50% 50%
-    background-size: cover
-    background-repeat: no-repeat
-    cursor: pointer
-    transition: all 0.2s ease-in-out
-
-    &__title
-      position: absolute
-      overflow: hidden
-      padding: 0 0.4rem
-      width: 100%
-      height: 1.5rem
-      background: rgba(0, 0, 0, 0.5)
-      color: $pale-blue
-      text-align: center
-      text-overflow: ellipsis
-      white-space: nowrap
-      line-height: 1.5rem
-      transition: 0.2s ease-in-out
-      transform: translate3d(0, 6rem, 0)
-
-    &:hover
-      .gallery-item__title
-        transform: translate3d(0, 4.5rem, 0)
+      content: ')'

@media screen and (max-width: $sm)
-  .recent-post-item
-    .article-title
-      font-size: 1rem
+  .layout_page
+    padding: 0 5px !important

-    .article-meta.tags
-      display: none
+  #page,
+  .category-content,
+  #archive,
+  .tag-cloud,
+  .flink,
+  #tag,
+  #category
+    margin: 0
+    padding: 1.8rem 1.3rem

-  galleryItemStyle(calc(50% - 22px), 6)
+  .category-lists
+    padding: 0

-@media screen and (min-width: $md)
-  galleryItemStyle(8rem, 8)
+  #recent-posts
+    .recent-post-item
+      flex-direction: column
+      height: auto !important
+
+      .post_cover
+        order: 1 !important
+        width: 100%
+        height: 230px
+        border-radius: 8px 8px 0 0
+
+      .recent-post-info
+        order: 2 !important
+        padding: 30px 25px 18px !important
+        width: 100%
+
+        .article-title
+          font-size: 1rem
+
+        .article-meta.tags
+          display: none
+
+      &:first-child
+        margin: 0
+
+@media screen and (min-width: 900px)
+  if hexo-config('aside.position') == 'left'
+    #recent-posts,
+    #page,
+    .category-content,
+    #archive,
+    .tag-cloud,
+    .flink,
+    #tag,
+    #category
+      order: 2
+
+@media screen and (max-width: 900px)
+  #page,
+  .category-content,
+  #archive,
+  .tag-cloud,
+  .flink,
+  #tag,
+  #category
+    width: 100% !important
--- a/source/css/_layout/pagination.styl
+++ b/source/css/_layout/pagination.styl
@@ -5,12 +5,13 @@

  .pagination
    text-align: center
+
  .space
    color: $a-link-color

  .page-number
    display: inline-block
-    margin: 0 0.2rem
+    margin: 0 .2rem
    min-width: w = 1.2rem
    height: w
    text-align: center
@@ -25,90 +26,76 @@
  img.prev_cover,
  img.next_cover
    position: absolute
-    padding: 0
    top: 0
    left: 0
+    padding: 0
    width: 100%
    height: 100%
-    opacity: .4
    background-size: cover
-    transition: all 0.6s;
-    object-fit: cover
+    opacity: .4
+    transition: all .6s
    pointer-events: none
+    object-fit: cover

-  .prev_info
-    position: absolute
-    z-index: 100
-    font-weight: 400
-    width: 70%
-    color: #fff
-    overflow: hidden
-    white-space: nowrap
-    -o-text-overflow: ellipsis
-    text-overflow: ellipsis
-    display: block
-    bottom: 50px
-
+  .prev_info,
  .next_info
    position: absolute
-    z-index: 100
-    font-weight: 400
-    width: 70%
-    color: #fff
-    overflow: hidden
-    white-space: nowrap
-    -o-text-overflow: ellipsis
-    text-overflow: ellipsis
-    display: block
-    right: 40px
    bottom: 50px
+    z-index: 100
+    display: block
+    overflow: hidden
+    width: 70%
+    color: $white
+    text-overflow: ellipsis
+    white-space: nowrap
+    font-weight: 400
+
+  .next_info
+    right: 40px
    text-align: right

  .pull-full
    width: 100% !important

-  .prev-post .label
-    position: absolute
-    top: 50px 
-    z-index: 100
-    font-size: 13px
-    display: block
-    text-transform: uppercase
-    color: rgba(255,255,255,.7)
-
+  .prev-post .label,
  .next-post .label
    position: absolute
    top: 50px
-    right: 40px
    z-index: 100
    display: block
+    color: alpha($white, .9)
    text-transform: uppercase
-    color: rgba(255,255,255,.7)
+    font-size: 90%

-  .prev-post, .next-post
-    width: 50%
+  .next-post .label
+    right: 40px
+
+  .prev-post,
+  .next-post
    float: left
+    width: 50%

    a
-      width: 100%
-      height: 150px
-      padding: 55px 40px
-      text-align: left
      position: relative
      display: block
      float: left
      overflow: hidden
+      padding: 55px 40px
+      width: 100%
+      height: 150px
+      text-align: left

    &:hover
-      img.prev_cover, img.next_cover
+      img.prev_cover,
+      img.next_cover
        opacity: .8
-        transform:scale(1.1)
+        transform: scale(1.1)

-
-@media screen and (max-width:768px) 
-  .prev-post, .next-post
-    width: 100% !important
-
-.pagination_post
+  &.pagination_post
    margin: 2rem 0 !important
-    background: #000
+    background: $dark-black
+
+@media screen and (max-width: 768px)
+  .prev-post,
+  .next-post
+    width: 100% !important
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -1,121 +1,81 @@
-if hexo-config("post_beautify.enable")
+if hexo-config('post_beautify.enable')
  headStyle(fontsize)
-    padding-left: unit(fontsize + 0.3, "rem")
-  
-    code 
-      font-size: unit(fontsize, "rem")
+    padding-left: unit(fontsize + .3, 'rem')
+
+    code
+      font-size: unit(fontsize, 'rem')

    &:before
-      top: calc(50% - unit(fontsize / 2 - 0.05, "rem"))
-      font-size: unit(fontsize, "rem")
+      top: calc(50% - unit(fontsize / 2 - .05, 'rem'))
+      font-size: unit(fontsize, 'rem')

    &:hover
-      padding-left: unit(fontsize + 0.2, "rem")
-
-
-#post-title
-  font-size: 1.4rem
-
-#post
-  overflow: hidden
-
-  &-meta
-    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
-
-  #post-meta
-    color: $grey
-
-    a
-      text-decoration: none
-
-    i.fa.fa-comment-o
-      margin-right: 0.2rem
+      padding-left: unit(fontsize + .2, 'rem')

 #top-container
  position: relative
  margin-bottom: 1rem
+  height: 19rem
  background-color: $light-blue
  background-attachment: local
  background-position: center
  background-size: cover
-  height: 19rem

  &:before
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    content: '';
-    width: 100%;
-    height: 100%;
-    opacity: 0.5;
-    background-color: #394245;
-    background-image: linear-gradient(234deg, #394245 0%, #000 100%);
+    position: absolute
+    top: 0
+    left: 0
+    display: block
+    width: 100%
+    height: 100%
+    background-color: alpha($dark-black, .5)
+    content: ''

  a
    color: $light-grey
    text-decoration: none
-    transition: all 0.3s ease-out
+    transition: all .3s ease-out

    &:hover
-      color: $white
+      text-decoration: underline

-  #top-img
-    padding: 0
-    border: none
-
-  #site-name
-    font-weight: bold
-    cursor: pointer
-
-  #post-info
+  & > #post-info
+    position: absolute
+    bottom: 1.5rem
+    padding: 0 8%
    width: 100%
    color: $light-grey
    text-align: left
-    padding-left: 8%
-    position: absolute
-    bottom: 1.5rem

-  #post-title
-    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
-    font-size: 1.5rem
+    #post-title
+      margin-bottom: .4rem
+      font-size: 1.5rem

-  i.fa.fa-angle-right
-    margin: 0 0.3rem 0 0.2rem
+      .posttitle
+        display: -webkit-box
+        overflow: hidden
+        line-height: 1.5
+        -webkit-line-clamp: 3
+        -webkit-box-orient: vertical

-.post-meta
-  &__separator
-    margin: 0 0.3rem
+    #post-meta
+      .word-count,
+      #busuanzi_value_page_pv,
+      .comment-count
+        padding-left: .2rem

-  &__icon
-    margin-right: 0.2rem
+      .post-meta
+        &__separator
+          margin: 0 .3rem

-  &__tags
-    display: inline-block
-    width: fit-content
-    margin: 0.4rem 0.4rem 0.4rem 0
-    padding: 0rem 0.6rem
-    border: 1px solid $light-blue
-    border-radius: 0.6rem
-    background: $white
-    color: $light-blue
-    text-decoration: none
-    font-size: 12px
-    cursor: pointer
-    transition: all 0.2s ease-in-out
+        &__icon
+          margin-right: .2rem

-    &:hover
-      background: $light-blue
-      color: $white
-
-.layout
-  margin: 0 auto
-  max-width: 1000px
+        &-pv-cv
+          display: inline-block

 #post-content
-  margin-bottom: 1rem
-
-  if hexo-config("post_beautify.enable")
+  if hexo-config('post_beautify.enable')
    h1,
    h2,
    h3,
@@ -123,17 +83,17 @@ if hexo-config("post_beautify.enable")
    h5,
    h6
      cursor: pointer
-      transition: all 0.2s ease-out
+      transition: all .2s ease-out

      &:before
        position: absolute
-        top: calc(50% - 0.35rem)
+        top: calc(50% - .35rem)
        left: 0
        color: $title-prefix-icon-color
        content: $title-prefix-icon
        font: normal normal normal 14px / 1 FontAwesome
-        font-size: 0.8rem
-        transition: all 0.2s ease-out
+        font-size: .8rem
+        transition: all .2s ease-out

      &:hover
        padding-left: 1.1rem
@@ -145,38 +105,38 @@ if hexo-config("post_beautify.enable")
      headStyle(1)

    h2
-      headStyle(0.9)
+      headStyle(.9)

    h3
-      headStyle(0.8)
+      headStyle(.8)

    h4
-      headStyle(0.7)
+      headStyle(.7)

    h5
-      headStyle(0.6)
+      headStyle(.6)

    h6
-      headStyle(0.6)
+      headStyle(.6)

    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

      p
-        margin: 0
+        margin: 0 0 .5rem

      ol,
      ul
-        padding-left: 0.5rem
+        padding-left: .5rem

      li
        position: relative
-        margin: 0.2rem 0
-        padding: 0.1rem 0.5rem 0.1rem 1.5rem
+        margin: .2rem 0
+        padding: .1rem .5rem .1rem 1.5rem

        &:hover
          &:before
@@ -189,19 +149,19 @@ if hexo-config("post_beautify.enable")
          background: $light-blue
          color: $white
          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
@@ -211,38 +171,37 @@ if hexo-config("post_beautify.enable")
            border-color: $ruby

        &: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: ""
+          content: ''
          line-height: h
-
  else
    ol,
    ul
-      margin-top: 0.4rem
+      margin-top: .4rem
      counter-reset: li

      p
-        margin: 0
+        margin: 0 0 .5rem

      ol,
      ul
-        padding-left: 0.5rem
+        padding-left: .5rem

      li
        position: relative
-        margin: 0.3rem 0
-        padding-left: 0.3rem
+        margin: .3rem 0
+        padding-left: .3rem

 a
  color: $a-link-color
-  transition: all 0.2s
+  transition: all .2s

  &:hover
    color: $light-blue
@@ -262,215 +221,209 @@ a.fancybox
  text-align: center
  text-decoration: none

+p
+  margin: 0 0 .8rem
+
 img
-  padding: $img-border-padding
  max-width: 100%
-  transition: all 0.2s
+  transition: all .2s

-  &:hover
-    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
-
-.code-area-wrap
-  position: relative
-
-.fa-clipboard
-  position: absolute
-  top: 0.4rem
-  right: 10px
-  z-index: 1
-  color: $highlight-aqua
-  cursor: pointer
-  transition: color 0.2s
-
-  &:hover
-    color: darken($highlight-aqua, 20%)
-
-.code_lang
-  position: absolute
-  font-weight: bold;
-  font-size: 0.8rem;
-  line-height: 1.4rem;
-  color: $highlight-foreground
-  left: 30px
-  z-index: 1
-  cursor: pointer
-
-.code-expand
-  position: absolute
-  top: 0
-  color: $highlight-foreground
-  padding: 7px 10px
-  z-index: 1
-  cursor: pointer
-  transition: all .3s
-  transform: rotate(0deg)
-
-.code-closed
-  transform: rotate(-90deg) !important
-  transition: all .3s
-
-
-.copy-notice
-  position: absolute
-  top: 0
-  right: 0
-  z-index: 1
-  background: darken($highlight-background, 5)
-  color: $highlight-aqua
-  opacity: 0
-
-.post-copyright
-  position: relative
-  margin-bottom: 0.4rem
-  padding: 0.5rem 0.8rem
-  border: 1px solid $light-grey
-  transition: box-shadow 0.3s ease-in-out
-
-  &:before
+// highlight
+.highlight-tools
+  .code-expand
    position: absolute
-    top: t = 0.5rem
-    right: t
-    width: w = 0.8rem
-    height: w
-    border-radius: w
-    background: $light-blue
-    content: ""
+    top: 0
+    z-index: 1
+    padding: 7px 10px
+    color: $highlight-foreground
+    cursor: pointer
+    transition: all .3s
+    transform: rotate(0)

-  &:after
+    & + .code_lang
+      left: 30px
+
+    &.code-closed
+      transition: all .3s
+      transform: rotate(-90deg) !important
+
+  .code_lang
    position: absolute
-    top: t = 0.7rem
-    right: t
-    width: w = 0.4rem
-    height: w
-    border-radius: w
-    background: $white
-    content: ""
-
-  &:hover
-    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
-
-  &-meta
-    color: $light-blue
+    left: 15px
+    z-index: 1
+    color: $highlight-foreground
+    text-transform: capitalize
    font-weight: bold
+    font-size: .8rem
+    line-height: 1.4rem
+    cursor: pointer

-  &-info
-    a
-      word-break: break-word
+  .copy-notice
+    position: absolute
+    top: 0
+    right: 0
+    z-index: 1
+    background: darken($highlight-background, 5)
+    color: $highlight-aqua
+    opacity: 0

+  .fa-clipboard
+    position: absolute
+    top: .4rem
+    right: 10px
+    z-index: 1
+    color: $highlight-aqua
+    cursor: pointer
+    transition: color .2s

-@media screen and (max-width: $sm)
-  .layout
-    margin: 0 30px
-    width: auto
-
-  #top-container
-    // background-attachment: local
-
-    #post-title
-      font-size: 1rem
-
-  #post-title
-    font-size: 1.1rem
-
+    &:hover
+      color: darken($highlight-aqua, 20%)

@media screen and (min-width: $md)
-  .layout
+  .layout_post
    width: $content-large-width
-        
+
 .katex-wrap
  overflow: auto
-  if hexo-config("katex") && hexo-config("katex.hide_scrollbar")
+
+  if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
    &::-webkit-scrollbar
      display: none
-      

-// 文章字體
-#post-content p
-  font-size: 1.1em
-
-
-#post-content ol,
-#post-content ul 
-  font-size: 1em
-
-
-@media screen and (max-width: 1024px)
-  .layout 
-    margin: 0 15px
-    width: auto
-
-.layout_post 
+.layout_post
+  margin: 40px auto
  padding: 50px
-  box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
+  max-width: 1000px
  border-radius: 8px
-  transition: all 0.3s
  background: #fff
-  margin-top: 40px
-  margin-bottom: 40px
+  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+  transition: all .3s
+
+  &:hover
+    box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)

-  &:hover 
-    box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
-  
  img
-    display:block
-
-  .tag_share
    display: block

-    .post-meta__tag-list
-      display: inline-block
+  & >.tag_share
+    .post-meta
+      &__tag-list
+        display: inline-block
+
+      &__tags
+        display: inline-block
+        margin: .4rem .4rem .4rem 0
+        padding: 0 .6rem
+        width: fit-content
+        border: 1px solid $light-blue
+        border-radius: .6rem
+        background: $white
+        color: $light-blue
+        text-decoration: none
+        font-size: 12px
+        cursor: pointer
+        transition: all .2s ease-in-out
+
+        &:hover
+          background: $light-blue
+          color: $white

    .post_share
-      width: fit-content;
-      display: inline-block;
-      float: right;
-      margin: 0.4rem 0
+      display: inline-block
+      float: right
+      margin: .4rem 0
+      width: fit-content

      .social-share
        font-size: 12px

-      .social-share .social-share-icon
-        width: 26px;
-        height: 26px;
-        font-size: 15px;
-        line-height: 25px;
+        .social-share-icon
+          margin: 0 4px
+          width: 26px
+          height: 26px
+          font-size: 15px
+          line-height: 25px

-      .social-share a
-        margin: 0 4px;
-    
+  & > .post-copyright
+    position: relative
+    margin: 2rem 0 .5rem
+    padding: .5rem .8rem
+    border: 1px solid $light-grey
+    transition: box-shadow .3s ease-in-out
+
+    &:before
+      position: absolute
+      top: t = .5rem
+      right: t
+      width: w = .8rem
+      height: w
+      border-radius: w
+      background: $light-blue
+      content: ''
+
+    &:after
+      position: absolute
+      top: t = .7rem
+      right: t
+      width: w = .4rem
+      height: w
+      border-radius: w
+      background: $white
+      content: ''
+
+    &:hover
+      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
+
+    .post-copyright
+      &-meta
+        color: $light-blue
+        font-weight: bold
+
+      &-info
+        padding-left: .3rem
+
+        a
+          word-break: break-word

  #post
    a
-      text-decoration: none
      color: $light-blue
-    
-    h1
-      margin: 0.8rem 0
-    
-    h2,
-    h3,
-    h4,
-    h5,
-    h6
-      margin: 1rem 0 0.5rem 0
-    
+      text-decoration: none
+
+      &:hover
+        text-decoration: underline
+
    img
-      margin: 0 auto 0.8rem 
-        
-    blockquote,
-    p
-      margin: 0 0 0.8rem 0
-      
+      margin: .8rem auto

-    table,.note
-      margin: 0.8rem 0
-    
-    figure
-      margin: 0.8rem 0
+@media screen and (max-width: 1024px)
+  .layout_post
+    margin: 0 15px
+    width: auto

-      table
-        margin: 0
-    
-    blockquote
-      p
-        margin: 0.5rem 0
+@media screen and (max-width: $sm)
+  .layout_post
+    margin: 0 5px
+    padding: 1.8rem 1rem
+
+  #top-container
+    height: 18rem
+
+    & > #post-info
+      bottom: 1rem
+      padding: 0 5%
+
+      & > #post-title
+        font-size: 1.2rem
+
+      & > #post-meta
+        font-size: 90%
+
+        & > span
+          display: none
+
+        .post-meta-pv-cv
+          display: block
+
+          .post-meta__separator:first-child
+            display: none
--- a/source/css/_layout/readmode.styl
+++ b/source/css/_layout/readmode.styl
@@ -1,117 +1,93 @@
-if hexo-config("readmode") && hexo-config("readmode.enable")
+if hexo-config('readmode') && hexo-config('readmode.enable')
  .read-mode
-    background: $pale-yellow
    padding: 0 !important
-
-    #sidebar,
-    #toggle-sidebar
-      display: none
+    background: $pale-yellow

    #page-header
      #site-name,
-      .site-page,
-      .toggle-menu
-        text-shadow: none
+      .site-page
        color: $font-black
-      
-      .menus_item_child
-        background-color: darken($pale-yellow,5) !important
+        text-shadow: none

-        &:before
-          border-color: transparent transparent darken($pale-yellow,5) !important
+      .menus_item_child
+        background-color: darken($pale-yellow, 3) !important
+
+        & > li
+          &:hover
+            background-color: darken($pale-yellow, 10) !important

    #top-container
-      background-image: none !important
      height: 14rem
      background-color: $pale-yellow
+      background-image: none !important

      a
        color: $font-black

      &:before
        opacity: 0
-     
-      #post-info
-        text-align: center
+
+      & > #post-info
        padding: 0
        color: $font-black
-      
-      #post-title,
-      #post-meta
-        text-shadow: none
-      
+        text-align: center
+
    #page-header
      &.fixed
-        background: alpha(darken($pale-yellow,5),0.5)
+        background: alpha(darken($pale-yellow, 5), .5)
        box-shadow: none

        &.open-sidebar
          .site-page
-            display: inline-block
-            opacity: 1
-        
+            visibility: visible

    .layout_post
-      box-shadow: none
      background: $pale-yellow
+      box-shadow: none

      &:hover
        box-shadow: none
-      
-      .article-container 
+
+      .article-container
        pre,
-        .highlight
-          background: darken($pale-yellow,5);
-        
-        .highlight
-          &:after
-            background: darken($pale-yellow,10);
-          table 
-            &:after
-              background: darken($pale-yellow,10);
-    
-    
+        .highlight:not(.js-file-line-container)
+          background: darken($pale-yellow, 5)
+
+    .highlight
+      display: block !important
+
    blockquote
-      border-left: 0.2rem solid #d6dbdf
-      background-color: rgba(102,128,153,.05)
-    
+      border-left: .2rem solid #d6dbdf
+      background-color: rgba(102, 128, 153, .05)
+
    #rightside
-      #nightshift
+      #darkmode
        display: none
-      
-    canvas
+
+    & > canvas
      display: none !important
-    
-    footer,
-    #post-comment,
-    hr,
-    .relatedPosts,
-    #pagination,
-    .post-reward,
-    .tag_share,
-    .post-copyright
+
+    .code-area-wrap > .highlight-tools,
+    #sidebar,
+    #toggle-sidebar,
+    #footer,
+    .layout_post > div,
+    .layout_post > hr,
+    .layout_post > nav
      display: none
-    
+
+    hr
+      border: 2px dashed #d6dbdf
+      background: transparent
+
+      &:before
+        color: darken(#d6dbdf, 10)
+
    &::-webkit-scrollbar-thumb
-      background: darken($pale-yellow,15)
+      background: darken($pale-yellow, 10)

    *::-webkit-scrollbar-thumb
-      background: darken($pale-yellow,15)
-    
-    .copy-notice
-      background: darken($pale-yellow,10)
+      background: darken($pale-yellow, 10)

-
-
-
-
-
-
-
-
-
-    
-
-
-
-      
+    #web_bg
+      background: none
--- a/source/css/_layout/relatedposts.styl
+++ b/source/css/_layout/relatedposts.styl
@@ -1,75 +1,74 @@
 .relatedPosts
-    margin: 0 auto
-    padding: 0
-    margin-top: 1rem
-    width: 100%
+  margin: 0 auto
+  margin-top: 1rem
+  padding: 0
+  width: 100%

-  .relatedPosts_item
-    width: calc(100%/3 - 10px)
-    height: 200px
-    overflow: hidden
-    float: left
-    position: relative
-    margin: 5px
-    background: #000
+.relatedPosts_item
+  position: relative
+  float: left
+  overflow: hidden
+  margin: 5px
+  width: calc(100% / 3 - 10px)
+  height: 200px
+  background: $dark-black

-    &:hover
-      .relatedPosts_cover
-        opacity: .8
-        transform:scale(1.1)
+  &:hover
+    .relatedPosts_cover
+      opacity: .8
+      transform: scale(1.1)

+  a
+    text-decoration: none

-  .relatedPosts_cover
-    border: 0
-    transition: all 0.6s
+.relatedPosts_cover
+  position: absolute
+  display: block
+  margin: 0
+  padding: 0
+  width: 100%
+  height: 100%
+  border: 0
+  opacity: .4
+  transition: all .6s
+  object-fit: cover
+
+.relatedPosts_main
+  position: relative
+  display: flex
+  flex-direction: column
+  justify-content: center
+  margin: 0
+  padding: 0 1rem
+  height: 100%
+  color: $white
+
+  .relatedPosts_date
    display: block
-    width: 100%
-    height: 100%
-    padding: 0
-    opacity: 0.4
-    margin: 0
-    object-fit: cover
+    color: alpha($white, .9)
+    font-size: 90%

  .relatedPosts_title
-    color: #fff
-    position: absolute
-    left: 0
-    right: 0
-    top: 45%
-    height: 60px
-    padding: 0 30px
    display: -webkit-box
+    overflow: hidden
+    max-height: 60px
    -webkit-line-clamp: 2
    -webkit-box-orient: vertical
-    overflow: hidden
-    max-width: 100%
-    width: 100%
-    margin: 0 auto
-    text-align: center

-  .relatedPosts_headline
-    font-size: 20px
-    font-weight: 700
-    margin-bottom: 5px
+.relatedPosts_headline
+  margin-bottom: 5px
+  font-weight: 700
+  font-size: 20px

-  .clear_both
-    clear: both
+.clear_both
+  clear: both

-
-@media screen and (max-width:768px) 
+@media screen and (max-width: 768px)
  .relatedPosts_item
-    width: calc(100%/2 - 4px)
-    height: 150px
    margin: 2px
-  
-  .relatedPosts_title
-    top: 40%
+    width: calc(100% / 2 - 4px)
+    height: 150px

-@media screen and (max-width:480px) 
+@media screen and (max-width: 480px)
  .relatedPosts_item
    width: calc(100% - 4px)
-    height: 150px
-    margin: 2px
-  
-  .relatedPosts_title
-    top: 40%
--- a/source/css/_layout/reward.styl
+++ b/source/css/_layout/reward.styl
@@ -1,72 +1,74 @@
 .post-reward
-  position: relative
-  width: 100%
  margin: 75px auto 0
+  width: 100%
  text-align: center
-  display: block

  .reward-button
-    text-align: center
+    position: relative
+    z-index: 1
    display: inline-block
-    cursor: pointer
-    color: #fff
-    line-height: 36px
+    width: 100px
    background: $light-blue
-    width: 80px
-    
+    color: $white
+    text-align: center
+    line-height: 36px
+    cursor: pointer
+
    &:hover
-      background: darken($light-blue,30)
-      
      .reward-main
        display: block

-  
    .reward-main
      position: absolute
      bottom: 40px
+      left: 0
+      display: none
      margin: 0
      padding: 0 0 15px
      width: 100%
-      left: 0
-      transition: all 0.6s
-      display: none
-      opacity: 1
-  
+      transition: all .6s
+
      .reward-all
-        margin: 0 auto
-        padding: 20px 10px 8px
-        background: #f5f5f5
        display: inline-block
+        margin: 0 0 0 -110px
+        padding: 20px 10px 8px
+        width: 320px
        border-radius: 4px
-        cursor: auto
+        background: #f5f5f5
+
+        &:before
+          position: absolute
+          bottom: -10px
+          left: 0
+          width: 100%
+          height: 20px
+          content: ''

        &:after
-          content: ""
-          width: 0
-          height: 0
-          border-left: 13px solid transparent
-          border-right: 13px solid transparent
-          border-top: 13px solid #f5f5f5
          position: absolute
+          right: 0
          bottom: 2px
          left: 0
-          right: 0
          margin: 0 auto
+          width: 0
+          height: 0
+          border-top: 13px solid #f5f5f5
+          border-right: 13px solid transparent
+          border-left: 13px solid transparent
+          content: ''

        .reward-item
-          list-style-type: none
-          padding: 0 8px
          display: inline-block
+          padding: 0 8px
+          list-style-type: none

          img
-            width: 130px
-            max-width: 130px
-            border-radius: 3px
            position: relative
+            max-width: 130px
+            width: 130px
+            border-radius: 3px

          .post-qr-code__desc
-            text-align: center
-            margin: -10px 0
+            margin: -5px 0
            color: #858585
-
-
+            text-align: center
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -1,64 +1,61 @@
-#rightside 
-  right: -38px
+#rightside
  position: fixed
+  right: -38px
  bottom: 40px
-  transition: all .3s
-  opacity 0
+  opacity: 0
+  transition: all .5s

  #rightside-config-hide
-    transition: all .3s
-    display none
+    transform: translate(35px, 0)

-  #readmode,
-  #font_plus,
-  #font_minus,
-  #to_comment,
-  .nightshift,
-  #mobile-toc-button,
-  #go-up,
-  #rightside_config
-    width: 30px
-    height: 30px
-    background-color: $light-blue
-    color: $white
-    text-align: center
-    line-height: 29px
-    font-size: 16px
-    display: block
-    margin-bottom: 2px
-    cursor: pointer
-    text-decoration: none
+  .rightside-in
+    transform: translate(0, 0) !important
+    animation: rightsideIn .3s
+
+  .rightside-out
+    animation: rightsideOut .3s
+
+  & > div
+    & > i,
+    & > a,
+    & > div
+      display: block
+      margin-bottom: 2px
+      width: 30px
+      height: 30px
+      background-color: $light-blue
+      color: $white
+      text-align: center
+      text-decoration: none
+      font-size: 16px
+      line-height: 29px
+      cursor: pointer
+
+      &:hover
+        background-color: $ruby

-    &:hover  
-      background-color: $ruby 
-  
  #rightside_config
    i
      animation: avatar_turn_around 2s linear infinite

-  .translate_chn_to_cht
-    width: 30px
-    height: 30px
-    background-color: $light-blue
-    color: $white
-    text-align: center
-    line-height: 29px
-    font-size: 16px
-    display: block
-    margin-bottom: 2px
-    cursor: pointer
-    text-decoration: none
-
-    &:hover  
-      background-color: $ruby 
-  
  #mobile-toc-button
    display: none

-
@media screen and (max-width: $bg)
-  #rightside 
+  #rightside
    #mobile-toc-button
      display: block
-  

+@keyframes rightsideIn
+  0%
+    transform: translate(30px, 0)
+
+  100%
+    transform: translate(0, 0)
+
+@keyframes rightsideOut
+  0%
+    transform: translate(0, 0)
+
+  100%
+    transform: translate(30px, 0)
--- a/source/css/_layout/sidebar.styl
+++ b/source/css/_layout/sidebar.styl
@@ -4,33 +4,34 @@
  left: -300px
  z-index: 10
  overflow-y: auto
-  padding: 1rem 0 2rem 0.5rem
+  padding: 1rem 0 2rem .5rem
  width: $sidebar-width
  height: 100%
  background: $sidebar-background
-  box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset
-  opacity:  0.9
-  
+  box-shadow: -.25rem 0 .25rem rgba(232, 237, 250, .6) inset
+  opacity: .9
+  transition: ease-in-out .4s
+
  .sidebar-toc
    ol,
    li
      list-style: none

    ol
-      margin-top: 0.2rem
-      padding-left: 0.4rem
+      margin-top: .2rem
+      padding-left: .4rem

    &__title
-      padding-right: 0.5rem
+      padding-right: .5rem
      text-align: center
-      font-size: unit(0.9 * $rem, "px")
+      font-size: unit(.9 * $rem, 'px')

    .toc-link
      display: block
-      padding-left: 0.2rem
+      padding-left: .2rem
      border-right: 3px solid transparent
      text-decoration: none
-      transition: all 0.2s ease-in-out
+      transition: all .2s ease-in-out

      &.active
        border-right-color: darken($cyan, 20%)
@@ -39,21 +40,18 @@

    &__progress
      position: relative
-      margin-top: -0.3rem
-      padding-left: 0.6rem
+      margin-top: -.3rem
+      padding-left: .6rem
      color: $cyan

      .progress-notice
-        margin-right: 0.4rem
+        margin-right: .4rem

      .progress-num
        display: inline-block
-        min-width: 0.9rem
+        min-width: .9rem

      &-bar
        width: 0
        height: 1px
        background: $cyan
-
-
-
--- a/source/css/_layout/z-darkmode.styl
+++ b/source/css/_layout/z-darkmode.styl
@@ -0,0 +1,356 @@
+if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hexo-config('autoChangeMode') == '2'
+  [data-theme='dark']
+    body
+      background-color: darken(#121212, 2)
+      color: alpha(#FFFFFF, .6)
+
+    ::-webkit-scrollbar-thumb
+      background: lighten(#121212, 5)
+
+    // 網站背景，footer背景
+    #web_bg[data-type=color],
+    #footer[data-type=color]
+      background: darken(#121212, 2)
+
+    #web_bg[data-type=photo]:before,
+    #footer[data-type=photo]:before
+      position: absolute
+      width: 100%
+      height: 100%
+      background-color: alpha($dark-black, .7)
+      content: ''
+
+    #archive,
+    .tag-cloud,
+    #tag,
+    .category-content,
+    #category,
+    #page,
+    .flink,
+    .layout_post
+      background: #121212
+
+    #sidebar
+      background: #121212
+      box-shadow: -.25rem 0 .25rem #121212
+
+    .article-container code
+      background: #2c2c2c
+
+    .recent-posts
+      .recent-post-item
+        background: #121212 !important
+
+      .article-title
+        color: alpha(#FFFFFF, .8) !important
+
+    #page-header
+      &.fixed
+        background: #121212
+        box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+
+        .toggle-menu,
+        #site-name,
+        a
+          color: alpha(#FFFFFF, .8)
+
+      .menus_item_child
+        background-color: lighten(#121212, 5) !important
+
+        li
+          &:hover
+            background: lighten(#121212, 20)
+
+          a
+            color: alpha(#FFFFFF, .6)
+
+    // 代碼框
+    .article-container pre,
+    .article-container pre code
+      background-color: lighten(#121212, 2)
+
+    .highlight-tools
+      background: lighten(#121212, 3)
+
+    .article-container .highlight:not(.js-file-line-container)
+      background-color: lighten(#121212, 2)
+
+      .code pre,
+      .gutter pre
+        background-color: lighten(#121212, 2)
+
+      table
+        .copy-notice
+          background: lighten(#121212, 3)
+
+    .copy-notice
+      background: lighten(#121212, 3)
+
+    blockquote
+      background-color: lighten(#121212, 10)
+      color: alpha(#FFFFFF, .6)
+
+    hr
+      border: 2px dashed alpha(#FFFFFF, .3)
+      background: 0
+
+      &:before
+        color: alpha(#FFFFFF, .6)
+
+    .layout_post >.tag_share .post-meta__tags
+      border: 1px solid alpha(#FFFFFF, .6)
+      background: 0
+      color: alpha(#FFFFFF, .6)
+
+      &:hover
+        background: darken(#FFFFFF, 60)
+
+    // 文章版權
+    .post-copyright
+      border: 1px solid alpha(#FFFFFF, .6)
+
+      .post-copyright-meta
+        color: alpha(#FFFFFF, .8)
+
+      .post-copyright-info
+        color: alpha(#FFFFFF, .6)
+
+    // 音樂播放器
+    .aplayer
+      filter: brightness(.7)
+      color: #000000
+
+    // 右下角按鈕
+    #rightside
+      & > div
+        & > i,
+        & > a,
+        & > div
+          background-color: lighten(#121212, 5) !important
+          color: alpha(#FFFFFF, .6) !important
+
+          &:hover
+            background: lighten(#121212, 20) !important
+
+    // 打賞按鈕
+    .post-reward
+      .reward-button
+        background-color: lighten(#121212, 10) !important
+
+      .reward-all
+        background-color: lighten(#121212, 10) !important
+
+        &:after
+          border-top: 13px solid lighten(#121212, 10) !important
+
+    .md-links-item:before,
+    .aside-category-list:hover,
+    .archive-list-item:hover,
+    #bookmark-it
+      background-color: lighten(#121212, 10) !important
+
+    img,
+    iframe,
+    .gist
+      filter: brightness(.7)
+
+    // 側邊欄
+    #aside_content
+      .card-widget
+        background: #121212 !important
+
+      .headline,
+      .length_num,
+      .aside-post_title,
+      .aside-category-list_link,
+      .archive-list-link,
+      .social-icon
+        color: alpha(#FFFFFF, .6) !important
+
+    .button--animated:before
+      background: lighten(#121212, 20) !important
+
+    // 頭部
+    #nav,
+    #top-container
+      &::before
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        background-color: alpha($dark-black, .7)
+        content: ''
+
+    #nav span,
+    #nav i,
+    #page-header a,
+    #page-header .toggle-menu,
+    #top-container #post-meta,
+    #top-container a,
+    #footer-wrap,
+    #footer-wrap a
+      color: alpha(#FFFFFF, .6)
+
+    .posttitle,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      color: alpha(#FFFFFF, .8)
+
+    .recent-posts .post-meta__date,
+    .recent-posts .article-meta,
+    .recent-posts .article-meta__categories,
+    .post-reward .reward-button,
+    .fa-clipboard,
+    .gutter pre,
+    #bookmark-it,
+    .copy-notice,
+    .md-links-item a,
+    .category-list-link,
+    .relatedPosts_date,
+    .prev-post .label,
+    .next-post .label
+      color: alpha(#FFFFFF, .6) !important
+
+    .prev_info,
+    .next_info,
+    .relatedPosts_title
+      color: alpha(#FFFFFF, .8) !important
+
+    // 時間軸界面
+    .article-sort-item__title
+      color: alpha(#FFFFFF, .6)
+
+      &:hover
+        color: #49b1f5
+
+    // 手機 MENU,TOC
+    #mobile-sidebar
+      #mobile-sidebar-menus
+        background: #121212
+
+        .headline
+          color: alpha(#FFFFFF, .6) !important
+
+        .length_num
+          color: alpha(#FFFFFF, .8) !important
+
+        a
+          color: alpha(#FFFFFF, .6) !important
+
+      #mobile-sidebar-toc
+        background: #121212
+
+        a
+          color: alpha(#FFFFFF, .6) !important
+
+    // note
+    if hexo-config('note.style') == 'modern'
+      .note
+        filter: brightness(.7)
+
+    if hexo-config('note.style') == 'flat'
+      .note
+        filter: brightness(.7)
+        color: #4c4948
+
+    // 第三方
+    // 插件 hexo-blog-encrypt
+    #hexo-blog-encrypt
+      label,
+      input
+        color: alpha(#FFFFFF, .6) !important
+
+      input
+        background-color: #121212
+
+    if hexo-config('gitalk') && hexo-config('gitalk.enable')
+      #gitalk-container
+        .gt-header-textarea,
+        .gt-header-preview,
+        .gt-comment-content,
+        button,
+        .gt-popup
+          filter: brightness(.7)
+
+        svg
+          fill: alpha(#FFFFFF, .6) !important
+
+    if hexo-config('valine') && hexo-config('valine.enable')
+      // 評論
+      #vcomment
+        p,
+        a,
+        textarea,
+        .vemoji-btn,
+        .vpreview-btn,
+        input,
+        path,
+        .vcount,
+        .vnum,
+        .vtime,
+        .vsys,
+        .vsys,
+        .vnick
+          color: alpha(#FFFFFF, .6) !important
+
+        .vsys
+          background: rgb(97, 106, 107) !important
+
+        .vbtn
+          border: 1px solid alpha(#FFFFFF, .6)
+          background: rgb(45, 48, 53) !important
+          color: alpha(#FFFFFF, .6) !important
+
+        .vwrap
+          border: 1px solid alpha(#FFFFFF, .6)
+
+        input
+          border-bottom: 1px dashed #616a6b
+
+        .vh
+          border-bottom: 1px dashed #616a6b
+
+        pre
+          border: 1px solid alpha(#FFFFFF, .6)
+          background-color: #121212
+
+          code
+            background: transparent
+
+        code
+          background-color: #2c2c2c
+          color: alpha(#FFFFFF, .6)
+
+        .vcontent.expand:before
+          background: linear-gradient(180deg, hsla(0, 0, 0, 0), hsl(218, 8%, 19%))
+
+        .vcontent.expand:after
+          background: hsla(204, 5%, 22%, 1)
+
+    if hexo-config('local_search') && hexo-config('local_search.enable')
+      #local-search
+        background: #121212
+
+        .local-search-box--input
+          background: #121212
+          color: alpha(#FFFFFF, .6)
+
+        .search-result-title
+          color: alpha(#FFFFFF, .6)
+
+    if hexo-config('algolia_search.enable')
+      #algolia-search
+        background: #121212
+
+        .ais-search-box--input
+          background: #121212
+          color: alpha(#FFFFFF, .6)
+
+        #algolia-search-results
+          .algolia-hit-item-link
+            color: alpha(#FFFFFF, .6)
--- a/source/css/_layout/z-other.styl
+++ b/source/css/_layout/z-other.styl
@@ -1,302 +0,0 @@
-#recent-posts
-  width: 75%
-
-  .recent-post-item 
-    padding: 0
-    box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
-    border-radius: 8px
-    transition: all 0.3s
-    background: #fff
-    margin-top: 20px
-    height: 280px
-
-    &:hover 
-      -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
-      box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
-
-      img.post_bg
-        transform:scale(1.1)
-  
-  .is_left
-    float: left
-    border-top-left-radius: 8px
-    border-bottom-left-radius: 8px
-
-  .is_right
-    float: right
-    border-top-right-radius: 8px
-    border-bottom-right-radius: 8px
-
-  .post_cover
-    width: 45%
-    height: 280px
-    overflow: hidden
-
-  img.post_bg
-    border: 0
-    transition: all .6s
-    display: block
-    width: 100%
-    height: 100%
-    padding: 0
-    margin: 0
-    object-fit: cover
-
-    &:hover
-      transform:scale(1.1)
-  
-  #pagination
-    margin-top: 2rem
-  
-  .recent-post-info 
-    padding: 50px 40px
-    display: inline-block
-    width: 55%
-    overflow hidden
-
-
-  a.article-meta__categories
-    text-decoration: none
-    color: #858585
-
-    &:hover
-      color: #49b1f5 !important
-
-  .content
-    display: -webkit-box
-    -webkit-line-clamp: 3
-    -webkit-box-orient: vertical
-    overflow: hidden
-    height: 90px
-
-.layout_page
-  display: flex 
-  margin: 0 auto
-  max-width: 1200px
-  align-items: flex-start
-  padding: 0 15px
-
-
-#page,.category-content,.flink
-  padding: 40px 44px 44px
-
-#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
-  box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
-  border-radius: 8px
-  transition: all .3s
-  background: #fff
-  margin-top: 20px
-  width: 75%
-
-.card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink
-
-  &:hover 
-    box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
-
-
-
-@media screen and (min-width: 900px) 
-  if hexo-config("aside.position") == "left"
-    #recent-posts,#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
-      order: 2
-
-@media screen and (max-width: 900px) 
-  #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
-      width: 100% !important
-
-
-@media screen and (max-width:768px)
-  #web_bg
-    display: none 
-    
-  .recent-post-item
-    height: auto !important
-    border-radius: 8px
-
-  .post_cover 
-    width: 100% !important
-    height: 230px !important
-    border-radius: 8px !important
-           
-  .recent-post-item,#page,.tag-cloud,.flink
-    margin-top: 1px
-
-  .recent-post-item,#page,.category-content,.tag-cloud,.flink
-    box-shadow: none !important
-    background: none !important
-    padding: 0px 20px 0 !important
-  
-    &:hover 
-      -webkit-box-shadow: none
-      box-shadow: none
-  
-  #archive,#category,#tag
-    box-shadow: none !important
-    background: none !important
-    padding: 0px 30px 0 !important
-
-  
-  .layout_post
-    padding: 0 20px 0
-    border-radius: 0
-    -webkit-box-shadow: none
-    box-shadow: none
-    background: none
-    margin: 0
-
-    &:hover
-      -webkit-box-shadow: none
-      box-shadow: none
-      
-  .layout_page
-    padding: 0 !important
-  
-  #aside_content
-    display: none !important
-
-  .category-lists
-    padding: 0
-  
-  #recent-posts
-    .recent-post-info 
-      padding: 20px 10px !important
-      width: 100%
-
-    #pagination
-      margin-bottom: 0
-
-  #nav 
-    #site-social-icons
-      display: block
-
-    &.not_index_bg
-      height: 14rem
-
-    #page_site-info
-      top: 7rem
-  
-  #top-container
-    height: 14rem
-
-    #post-info
-      bottom: 1rem
-      padding-left: 5%
-  
-  .mobile_hidden
-    display: none
-  
-    
-  canvas
-    display: none !important
-
-
-.layout_page,
-.layout_post,
-footer
-  animation: main 1s
-
-#nav,
-#top-container,
-#page-header
-  animation: header 1s
-
-#site-title
-  animation: titlescale 1s
-
-canvas,
-#web_bg
-  animation: to_show 4s
-
-.card-announcement-animation
-  animation: announ_animation .8s linear infinite
-  color: #FF0000
-
-.scroll-down-effects
-  animation: scroll-down-effect 1.5s infinite
-
-if hexo-config("avatar_effect") == true
-  .avatar_img
-    animation: avatar_turn_around 2s linear infinite
-
-.reward-main
-  animation: donate_effcet .3s .1s ease both
-
-.rightside-in
-  animation: rightside_in_animate .3s
-  display: block !important
-
-@keyframes scroll-down-effect
-  0%
-    opacity: 0.4
-    top: 0
-  50%
-    opacity: 1
-    top: -16px
-  100%
-    opacity: 0.4
-    top: 0
-    
-@keyframes header 
-  0% 
-    opacity: 0
-    transform: translateY(-50px)
-  100% 
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes main
-  0% 
-    opacity: 0
-    transform: translateY(50px)
-  100% 
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes titlescale
-  0%
-    opacity: 0
-    transform: scale(0.7)
-  100% 
-    opacity: 1
-    transform: scale(1)
-
-@keyframes to_show
-  0%
-    opacity: 0
-  100%
-    opacity: 1
- 
-@keyframes avatar_turn_around
-  from
-    transform: rotate(0deg)
-  to
-    transform: rotate(360deg)
-
-@keyframes sub_menus
-  0%
-    opacity: 0
-    transform: translateY(10px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes donate_effcet
-  0%
-    opacity: 0
-    transform: translateY(-20px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes announ_animation
-  0%,to
-    transform: scale(1)
-  50%
-    transform: scale(1.2)
-
-@keyframes rightside_in_animate
-  0%    
-    transform: translateX(28px)
-  100%
-    transform: translateX(0)
-
--- a/source/css/_search/algolia.styl
+++ b/source/css/_search/algolia.styl
@@ -1,11 +1,13 @@
 #algolia-search
+  animation: titlescale .5s
+
  .ais-search-box
    margin: 0 auto
    max-width: 100%
    width: 100%

    input
-      padding: 0.25rem 0.7rem
+      padding: .25rem .7rem
      outline: none
      border: 2px solid $light-blue
      border-radius: 2rem
@@ -20,18 +22,18 @@
        border-color: $ruby

    &:before
-      $w = 0.3rem
+      $w = .3rem
      position: absolute
-      top: 0.4rem
+      top: .4rem
      left: 0
      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: ""
+      content: ''
      line-height: h
-      transition: all 0.2s ease-in-out
+      transition: all .2s ease-in-out

    a
      display: block
@@ -44,12 +46,12 @@
        color: $light-blue

  .ais-pagination.pagination
-    margin: 0.8rem 0 0 0
+    margin: .8rem 0 0
    padding: 0
    text-align: center

    .ais-pagination--item
-      margin: 0 0.2rem
+      margin: 0 .2rem
      padding: 0

      a
--- a/source/css/_search/index.styl
+++ b/source/css/_search/index.styl
@@ -14,18 +14,18 @@

  span.search-close-button
    position: absolute
-    top: 0.5rem
-    right: 0.5rem
+    top: .5rem
+    right: .5rem
    color: $grey
    line-height: 1
    cursor: pointer
-    transition: color 0.2s ease-in-out
+    transition: color .2s ease-in-out

    &:hover
      color: $light-blue

  &__title
-    padding: 0 0 0.7rem
+    padding: 0 0 .7rem
    color: $light-blue
    font-size: 1rem
    line-height: 1
@@ -38,7 +38,7 @@
  left: 0
  z-index: 1000
  display: none
-  background: rgba(0, 0, 0, 0.6)
+  background: rgba(0, 0, 0, .6)

@media screen and (max-width: $sm)
  .search-dialog
--- a/source/css/_search/local-search.styl
+++ b/source/css/_search/local-search.styl
@@ -1,11 +1,13 @@
 #local-search
+  animation: titlescale .5s
+
  .local-search-box
    margin: 0 auto
    max-width: 100%
    width: 100%

    input
-      padding: 0.25rem 0.7rem
+      padding: .25rem .7rem
      width: 100%
      outline: none
      border: 2px solid $light-blue
@@ -21,18 +23,18 @@
        border-color: $ruby

    &:before
-      $w = 0.3rem
+      $w = .3rem
      position: absolute
-      top: 0.4rem
+      top: .4rem
      left: 0
      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: ""
+      content: ''
      line-height: h
-      transition: all 0.2s ease-in-out
+      transition: all .2s ease-in-out

    a
      display: block
--- a/source/css/_third-party/normalize.min.css
+++ b/source/css/_third-party/normalize.min.css
@@ -1 +1 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}/*# sourceMappingURL=normalize.min.css.map */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -1,18 +1,16 @@
-@import "nib"
-@import "_third-party/normalize.min.css"
+@import 'nib'
+@import '_third-party/normalize.min.css'
 // project
-@import "var"
-@import "_global"
-@import "_highlight/highlight"
-@import "_layout/*"
- 
+@import 'var'
+@import '_global'
+@import '_highlight/highlight'
+@import '_layout/*'
+
 // search
-if hexo-config("algolia_search.enable")
-  @import "_search/index"
-  @import "_search/algolia"
-
-if hexo-config("local_search") && hexo-config("local_search.enable")
-  @import "_search/index"
-  @import "_search/local-search"
-
+if hexo-config('algolia_search.enable')
+  @import '_search/index'
+  @import '_search/algolia'

+if hexo-config('local_search') && hexo-config('local_search.enable')
+  @import '_search/index'
+  @import '_search/local-search'
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -62,7 +62,6 @@ $sidebar-icon-left = $sidebar-icon-top - 4px
 $sidebar-icon-size = 16px
 $web-bg = convert(hexo-config("background"))
 $index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh
-$index_site_info_top = convert(hexo-config("index_site_info_top")) || 43%
 // Global color & SVG
 $pale-blue = $theme-hr-color
 $light-blue = $theme-color
@@ -109,7 +108,6 @@ $content-large-width = 1000px
 $a-link-color = $theme-link-color
 $a-hover-color = #82AAFF
 $img-border-color = #eaeefb
-$img-border-padding = 4px
 // sidebar
 $sidebar-width = 300px
 $sidebar-background = #f6f8fa
--- a/source/img/404.jpg
+++ b/source/img/404.jpg
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jerry	eae694806c	v2.1.0 1. 可設置隱藏文章 2. 適配 Hexo 的 Tag Plugins Code Block With marked lines 顯示 3. 可配置首頁cover顯示的位置 4. 更改深色模式下的配色 5. activate_power_mode 增加關閉顏色和抖動 6. 增加谷歌廣告，騰訊分析 7. 相關文章增加時間顯示，調整佈局，垂直居中 8. 文章頁面，top_img增加評論數顯示 9. 可以取消點擊圖片觀看大圖 10. mathjax和kathex可設置每頁都加載還是按需加載 11. 深色模式下，滾動條顔色的適配 12. 優化gitalk 在 dark mode下的顯示 13. 文章頁，文章標題過長時，只顯示三行內容 14. 深色模式下，背景圖片加上蒙板 15. 優化深色/閲讀模式下，canvas的顯示 16. 優化打賞的特效和移動到二維碼不會立刻消失 17. 優化sub-menu樣式 18. 修改aside 的tags顔色，在深色模式下不會出現觀看困難 19. 升級 normalize.css 到最新版 20. 優化手機上toc和menu的打開動畫 21. 優化代碼框打開關閉的特效 22. 精簡js,部分操作改為css控制 23. 優化主題的一些動畫，不會過於生硬 1. 修復當圖片被a標簽包圍時，點擊圖標沒有跳轉到對應網頁而是出現大圖觀看模式的bug 2. 修復當網址有subdirectory時，menu、打賞二維碼和lodding_bg 鏈接路徑錯誤的bug 3. 修復當網址有subdirectory時, 4. 修復katex 的 CSS無法讀取bug 5. 修復搜索按鈕在文章頁不顯示的bug 6. 修復gitalk css引用失敗的bug 7. 修復點擊特效煙花無效的bug 8. 修復gitalk報path.startsWith is not a function的bug 9. 修復閲讀模式下，背景沒有變純色的bug 10. 修復閲讀模式下，header 偶爾出現沒有靠攏頂部的bug 11. 修復Hexo Tag Plugins Block Quote 裏的鏈接顯示出外面的Bug 12. 修復aside歸檔日期過長導致錯位的bug 13. 修復toc為空時，toc按鈕仍存在的bug 14. 修復關閉懶加載後，頭像無法顯示的bug 15. 修復深色模式下，切換readmode偶爾會無效的bug 16. 修復在一些手機設備上，toc和menu的按鈕顯示不對齊的bug #72	2019-12-20 02:19:43 +08:00
Jerry	90726f1a59	update README	2019-11-21 22:08:02 +08:00
Jerry Wong	ae73a2114f	Merge pull request #75 from noraj/patch-2 Move readme and translate it in english	2019-11-21 20:03:39 +08:00
Jerry Wong	20dcc61e0d	Merge pull request #74 from noraj/patch-1 highlight themes	2019-11-21 20:03:23 +08:00
Alexandre ZANNI	f36450dbc0	Translate README in english	2019-11-21 11:52:37 +01:00
Alexandre ZANNI	2fc895102d	Move readme	2019-11-21 11:48:33 +01:00
Alexandre ZANNI	e26637c5a8	highlight themes	2019-11-21 11:20:27 +01:00
Jerry	082df56112	1. 完善gitalk 在 dark mode下的顯示 2. 完善footer 有背景和無背景下，在dark mode下的顯示 3. 界面微調 4. 增加選項可關閉aside在手機上的顯示 5. 修復關閉夜間模式情況下，console報Uncaught ReferenceError: autoChangeMode is not defined 的bug	2019-11-08 22:25:00 +08:00
Jerry	27adaecf51	1. 修復gitalk報path.startsWith is not a function的bug #66 2. 修復在屏幕縮放字體大小而導致menu變爲sidebar模式的bug #64 3. just-gallery增加上下邊距	2019-11-07 01:45:00 +08:00
Jerry	a33e7e1d89	1. 修復gitalk報path.startsWith is not a function的bug #66 2. 修復在屏幕縮放字體大小而導致menu變爲sidebar模式的bug #64 3. just-gallery增加上下邊距	2019-11-07 01:23:29 +08:00
Jerry	da4a8d77d7	1. 修復點擊特效烟花無效的Bug	2019-11-05 14:57:59 +08:00
Jerry	8cb366bdda	1. 修復gitalk css引用失敗的bug	2019-11-04 20:57:50 +08:00
Jerry	7f8e431226	1. 修復搜索按鈕在文章頁不顯示的bug	2019-11-03 18:24:26 +08:00
Jerry	b32ff6920b	1. 修復katex 的 CSS無法讀取bug	2019-11-03 13:36:39 +08:00
Jerry	25f128fb3d	V2.0.0 Breaking change 1. 手機端界面卡片化，同時，手機端也可以顯示側邊欄的內容 2. 修復當menu過多時，header界面出現錯亂的bug。當menu過多時，會變為sidebar模式 3. 增加medium-zoom大圖查看模式 4. 增加鼠標點擊特效：文字和愛心兩個點擊特效 5. 主頁subtitle可以調用第三方api(金山詞霸每日一句、一言網的一句話、一句網、今日詩詞) 6. 添加 snackbar 彈窗 7. 修改nightshift為darkmode，darkmode可隨系統設置而自動切換，可設置隨時間而切換darkmode 8. 修復hexo自帶的標籤外掛(Tag Plugins)顯示bug(Block Quote、Code Block With caption、Gist、Youtube、Vimeo) 9. 主題所需要的css和js可根據需要配置CDN 10. 更改darkmode的加載方式，網站設置dark mode後，現在進入網頁不會在'閃'一下 11. 背景特效和背景圖片在手機界面也會顯示 12. 增加justified-gallery圖片顯示(Tag Plugins) Feature 1. 文章頁面，字數統計、閲讀時長和閲讀量前面添加icon 2. 更改懶加載js 3. 升級typed.js/instantpage.js到最新版 4. 搜索和右下角按鈕添加退出特效 Fixed 1. 修復在 Hexo 4.0.0下，一些按鈕點擊會跳出一個空白頁的bug 2. 修復在 Hexo 4.0.0下，分頁按鈕出現代碼的bug 3. 修復當沒有設置評論時，右下角依舊出現'直達評論'按鈕的bug 4. 優化sidebar的打開速度 5. 修復文章頁標題左右邊距不平等的bug 6. 修復keywords讀取的bug 7. 修復當post/page 內容為空時，footer位置錯亂的bug 8. 修復在手機safari，toc sidebar底部內容被遮擋的bug 9. 完善Dark mode,一些界面的配色 10. 修復 card-archives 查看更多跳轉bug Remove 1. 移除Gitment 2. 移除Gallery	2019-11-03 02:29:05 +08:00
Jerry	9e14fca4a7	V2.0.0 Breaking change 1. 手機端界面卡片化，同時，手機端也可以顯示側邊欄的內容 2. 修復當menu過多時，header界面出現錯亂的bug。當menu過多時，會變為sidebar模式 3. 增加medium-zoom大圖查看模式 4. 增加鼠標點擊特效：文字和愛心兩個點擊特效 5. 主頁subtitle可以調用第三方api(金山詞霸每日一句、一言網的一句話、一句網、今日詩詞) 6. 添加 snackbar 彈窗 7. 修改nightshift為darkmode，darkmode可隨系統設置而自動切換，可設置隨時間而切換darkmode 8. 修復hexo自帶的標籤外掛(Tag Plugins)顯示bug(Block Quote、Code Block With caption、Gist、Youtube、Vimeo) 9. 主題所需要的css和js可根據需要配置CDN 10. 更改darkmode的加載方式，網站設置dark mode後，現在進入網頁不會在'閃'一下 11. 背景特效和背景圖片在手機界面也會顯示 12. 增加justified-gallery圖片顯示(Tag Plugins) Feature 1. 文章頁面，字數統計、閲讀時長和閲讀量前面添加icon 2. 更改懶加載js 3. 升級typed.js/instantpage.js到最新版 4. 搜索和右下角按鈕添加退出特效 Fixed 1. 修復在 Hexo 4.0.0下，一些按鈕點擊會跳出一個空白頁的bug 2. 修復在 Hexo 4.0.0下，分頁按鈕出現代碼的bug 3. 修復當沒有設置評論時，右下角依舊出現'直達評論'按鈕的bug 4. 優化sidebar的打開速度 5. 修復文章頁標題左右邊距不平等的bug 6. 修復keywords讀取的bug 7. 修復當post/page 內容為空時，footer位置錯亂的bug 8. 修復在手機safari，toc sidebar底部內容被遮擋的bug 9. 完善Dark mode,一些界面的配色 10. 修復 card-archives 查看更多跳轉bug Remove 1. 移除Gitment 2. 移除Gallery	2019-11-03 02:25:27 +08:00
Jerry	336e221de5	V2.0.0 Breaking change 1. 手機端界面卡片化，同時，手機端也可以顯示側邊欄的內容 2. 修復當menu過多時，header界面出現錯亂的bug。當menu過多時，會變為sidebar模式 3. 增加medium-zoom大圖查看模式 4. 增加鼠標點擊特效：文字和愛心兩個點擊特效 5. 主頁subtitle可以調用第三方api(金山詞霸每日一句、一言網的一句話、一句網、今日詩詞) 6. 添加 snackbar 彈窗 7. 修改nightshift為darkmode，darkmode可隨系統設置而自動切換，可設置隨時間而切換darkmode 8. 修復hexo自帶的標籤外掛(Tag Plugins)顯示bug(Block Quote、Code Block With caption、Gist、Youtube、Vimeo) 9. 主題所需要的css和js可根據需要配置CDN 10. 更改darkmode的加載方式，網站設置dark mode後，現在進入網頁不會在'閃'一下 11. 背景特效和背景圖片在手機界面也會顯示 12. 增加justified-gallery圖片顯示(Tag Plugins) Feature 1. 文章頁面，字數統計、閲讀時長和閲讀量前面添加icon 2. 更改懶加載js 3. 升級typed.js/instantpage.js到最新版 4. 搜索和右下角按鈕添加退出特效 Fixed 1. 修復在 Hexo 4.0.0下，一些按鈕點擊會跳出一個空白頁的bug 2. 修復在 Hexo 4.0.0下，分頁按鈕出現代碼的bug 3. 修復當沒有設置評論時，右下角依舊出現'直達評論'按鈕的bug 4. 優化sidebar的打開速度 5. 修復文章頁標題左右邊距不平等的bug 6. 修復keywords讀取的bug 7. 修復當post/page 內容為空時，footer位置錯亂的bug 8. 修復在手機safari，toc sidebar底部內容被遮擋的bug 9. 完善Dark mode,一些界面的配色 10. 修復 card-archives 查看更多跳轉bug Remove 1. 移除Gitment 2. 移除Gallery	2019-11-03 02:21:01 +08:00
Jerry	32d1cd3f53	v1.2.2 1. 修復在hexo 4.0.0下，分頁按鈕渲染不完全的bug	2019-10-20 13:16:08 +08:00
Jerry	1e06a6ca5e	v1.2.1 1. 修復在safari上，頭像旋轉顯示框框的bug	2019-09-25 23:37:09 +08:00