label 4.0.0

fix: Utterances 評論區在多個頁面顯示的是同一個評論區
fix: 修復評論配置爲 Livere 和 Facebook Comments 時，最新評論模塊仍然顯示的 bug
improvement: blueimp_md5 CDN 可配置
improvement: timeline 優化
improvement: css優化
improvement: 友情鏈接優化

README.md

@@ -14,17 +14,17 @@
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
 
-Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [MYW](https://immyw.com/)
+Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [CrazyWong](https://crazywong.com/)
 
 Docs: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
 
 Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) theme.
 
-## Installation
+## 💻 Installation
 
 ### GIT
 
-> If you are in Mainland China, you can download in [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)
+> If you are in Mainland China, you can download in [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git)
 
 Stable branch [recommend]:
 
@@ -48,7 +48,7 @@ In Hexo site root directory
 npm i hexo-theme-butterfly
 ```
 
-## Configuration
+## ⚙ Configuration
 
  Set theme in the hexo work folder's root config file `_config.yml`: 
 
@@ -58,7 +58,7 @@ npm i hexo-theme-butterfly
 
 > npm install hexo-renderer-pug hexo-renderer-stylus
 
-## Features
+## 🎉 Features
 
 - [x] Card UI Design
 - [X] Support sub-menu
@@ -79,7 +79,7 @@ npm i hexo-theme-butterfly
 - [x] Related articles
 - [x] Displays outdated notice for a post
 - [x] Share (AddThis/Sharejs/Addtoany)
-- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo)
+- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus)
 - [x] Multiple Comment System Support
 - [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp)
 - [x] Web analytics
@@ -97,7 +97,13 @@ npm i hexo-theme-butterfly
 - [x] Lazyload images
 - [x] Instantpage/Pangu/Snackbar notification toast/PWA......
 
-## Screenshots
+## ✨ Contributors
+
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly" />
+</a>
+
+## 📷 Screenshots
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg)
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg)

README_CN.md

@@ -14,17 +14,17 @@
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
 
-預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [MYW](https://immyw.com/)
+預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [CrazyWong](https://crazywong.com/)
 
 文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
 
 一款基於[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主題
 
-## 安裝
+## 💻 安裝
 
 ### Git 安裝
 
-> 本倉庫同時上傳到 [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)，如果你訪問 Github 緩慢，可從 Gitee 中下載。
+> 本倉庫同時上傳到 [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git)，如果你訪問 Github 緩慢，可從 Gitee 中下載。
 
 在博客根目錄裡安裝穩定版【推薦】
 
@@ -48,7 +48,8 @@ git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/bu
 npm i hexo-theme-butterfly
 ```
 
-## 應用主題
+## ⚙ 應用主題
+
 修改hexo配置文件`_config.yml`，把主題改為`Butterfly`
 
 ```
@@ -57,7 +58,7 @@ theme: butterfly
 
 >如果你沒有pug以及stylus的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus --save
 
-## 特色
+## 🎉 特色
 
 - [x] 卡片化設計
 - [X] 支持二級目錄
@@ -78,7 +79,7 @@ theme: butterfly
 - [x] 顯示相關文章
 - [x] 過期文章提醒
 - [x] 多種分享系統（AddThis/Sharejs/Addtoany）
-- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo）
+- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus）
 - [x] 支持雙評論部署
 - [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp）
 - [x] 多種分析系統
@@ -96,11 +97,17 @@ theme: butterfly
 - [x] 圖片懶加載
 - [x] Instantpage/Pangu/Snackbar彈窗/PWA......
 
-## 截圖
+## ✨ 贡献者
+
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly" />
+</a>
+
+## 📷 截圖
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg)
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg)
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg)
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg)
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-1.png)
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png)
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png)

_config.yml

@@ -1,11 +1,7 @@
 # Main menu navigation (導航目錄)
+# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單
 # --------------------------------------
 
-# format: name: link || icon
-# sub-menu
-# name || icon:
-#   name: link || icon
-
 menu:
   # Home: / || fas fa-home
   # Archives: /archives/ || fas fa-archive
@@ -17,9 +13,6 @@ menu:
   # Link: /link/ || fas fa-link
   # About: /about/ || fas fa-heart
 
-# Hide the child menu items in mobile sidebar
-hide_sidebar_menu_child: false
-
 # Code Blocks (代碼相關)
 # --------------------------------------
 
@@ -170,14 +163,20 @@ index_post_content:
   method: 3
   length: 500 # if you set method to 2 or 3, the length need to config
 
+# anchor
+# when you scroll in post, the URL will update according to header id.
+anchor: false
+
 # Post
 # --------------------------------------
 
 # toc (目錄)
 toc:
-  enable: true
+  post: true
+  page: false
   number: true
-  style_simple: false
+  expand: false
+  style_simple: false # for post
 
 post_copyright:
   enable: true
@@ -220,10 +219,6 @@ photofigcaption: false
 # false: disable pagination
 post_pagination: 1
 
-# anchor
-# when you scroll in post, the URL will update according to header id.
-anchor: false
-
 # Displays outdated notice for a post (文章過期提醒)
 noticeOutdate:
   enable: false
@@ -259,10 +254,8 @@ addtoany:
 
 comments:
   # Up to two comments system, the first will be shown as default
-  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
-  use:
-  # - Valine
-  # - Disqus
+  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus
+  use: # Valine,Disqus
   text: true # Display the comment name next to the button
   # lazyload: The comment system will be load when comment element enters the browser's viewport.
   # If you set it to true, the comment count will be invalid
@@ -281,12 +274,8 @@ disqus:
 # https://github.com/SukkaW/DisqusJS
 disqusjs:
   shortname:
-  siteName:
   apikey:
-  api:
-  nocomment: # display when a blog post or an article has no comment attached
-  admin:
-  adminLabel:
+  option:
 
 # livere (來必力)
 # https://www.livere.com/
@@ -301,11 +290,6 @@ gitalk:
   repo:
   owner:
   admin:
-  language: en # en, zh-CN, zh-TW, es-ES, fr, ru
-  perPage: 10 # Pagination size, with maximum 100.
-  distractionFreeMode: false # Facebook-like distraction free mode.
-  pagerDirection: last # Comment sorting direction, available values are last and first.
-  createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
   option:
 
 # valine
@@ -313,17 +297,9 @@ gitalk:
 valine:
   appId: # leancloud application app id
   appKey: # leancloud application app key
-  pageSize: 10 # comment list page size
   avatar: monsterid # gravatar style https://valine.js.org/#/avatar
-  lang: en # i18n: zh-CN/zh-TW/en/ja
-  placeholder: Please leave your footprints # valine comment input placeholder (like: Please leave your footprints)
-  guest_info: nick,mail,link # valine comment header info (nick/mail/link)
-  recordIP: false # Record reviewer IP
   serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
   bg: # valine background
-  emojiCDN: # emoji CDN
-  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
-  requiredFields: nick,mail # required fields (nick/mail)
   visitor: false
   option:
 
@@ -331,8 +307,6 @@ valine:
 # https://waline.js.org/
 waline:
   serverURL: # Waline server address url
-  avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image
-  avatarCDN: # Gravatar CDN baseURL
   bg: # waline background
   visitor: false
   option:
@@ -364,6 +338,17 @@ twikoo:
   visitor: false
   option:
 
+# Giscus
+# https://giscus.app/
+giscus:
+  repo:
+  repo_id:
+  category_id:
+  theme:
+    light: light
+    dark: dark
+  option:
+
 # Chat Services
 # --------------------------------------
 
@@ -424,10 +409,6 @@ baidu_analytics:
 # https://analytics.google.com/analytics/web/
 google_analytics:
 
-# Tencent Analytics ID
-# https://mta.qq.com
-tencent_analytics:
-
 # CNZZ Analytics
 # https://www.umeng.com/
 cnzz_analytics:
@@ -486,6 +467,7 @@ site_verification:
 #   toc_color: "#00c4b6"
 #   blockquote_padding_color: "#49b1f5"
 #   blockquote_background_color: "#49b1f5"
+#   scrollbar_color: "#49b1f5"
 
 # The top_img settings of home page
 # default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間)
@@ -580,8 +562,8 @@ display_mode: light
 beautify:
   enable: false
   field: post # site/post
-  title-prefix-icon: '\f0c1'
-  title-prefix-icon-color: '#F47466'
+  title-prefix-icon: # '\f0c1'
+  title-prefix-icon-color: # '#F47466'
 
 # Global font settings
 # Don't modify the following settings unless you know how they work (非必要不要修改)
@@ -610,18 +592,14 @@ subtitle:
   effect: true
   # loop (循環打字)
   loop: true
-  # source調用第三方服務
+  # source 調用第三方服務
   # source: false 關閉調用
-  # source: 1  調用搏天api的隨機語錄（簡體）
-  # source: 2  調用一言網的一句話（簡體）
-  # source: 3  調用一句網（簡體）
-  # source: 4  調用今日詩詞（簡體）
+  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
+  # source: 2  調用一句網（簡體） http://yijuzhan.com/
+  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
   # subtitle 會先顯示 source , 再顯示 sub 的內容
   source: false
-  # 如果有英文逗號' , ',請使用轉義字元 ,
-  # 如果有英文雙引號' " ',請使用轉義字元 "
-  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
-  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
+  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
   sub:
 
 # Loading Animation (加載動畫)
@@ -699,9 +677,6 @@ newest_comments:
 # Bottom right button (右下角按鈕)
 # --------------------------------------
 
-# Change font size
-change_font_size: false
-
 # Conversion between Traditional and Simplified Chinese (簡繁轉換)
 translate:
   enable: false
@@ -730,6 +705,14 @@ darkmode:
   # autoChangeMode: false
   autoChangeMode: false
 
+# Don't modify the following settings unless you know how they work (非必要請不要修改 )
+# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
+# Don't repeat 不要重複
+rightside_item_order:
+  enable: false
+  hide: # readmode,translate,darkmode,hideAside
+  show: # toc,chat,comment
+
 # Lightbox (圖片大圖查看模式)
 # --------------------------------------
 # You can only choose one, or neither (只能選擇一個 或者 兩個都不選)
@@ -750,7 +733,9 @@ fancybox: true
 mermaid:
   enable: false
   # built-in themes: default/forest/dark/neutral
-  theme: default
+  theme:
+    light: default
+    dark: dark
 
 # Note (Bootstrap Callout)
 note:
@@ -843,86 +828,87 @@ inject:
 # 非必要請不要修改
 CDN:
   # main
-  main_css: /css/index.css
-  jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
-  main: /js/main.js
-  utils: /js/utils.js
+  main_css:
+  main:
+  utils:
 
   # pjax
-  pjax: https://cdn.jsdelivr.net/npm/pjax/pjax.min.js
+  pjax:
 
   # comments
-  gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
-  gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
-  valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
-  disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
-  disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
-  utterances: https://utteranc.es/client.js
-  twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js
-  waline: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js
+  gitalk:
+  gitalk_css:
+  blueimp_md5:
+  valine:
+  disqusjs:
+  disqusjs_css:
+  utterances:
+  twikoo:
+  waline:
+  giscus:
 
   # 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
+  addtoany:
+  sharejs:
+  sharejs_css:
 
   # search
-  local_search: /js/search/local-search.js
-  algolia_js: /js/search/algolia.js
-  algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js
-  algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
+  local_search:
+  algolia_js:
+  algolia_search_v4:
+  instantsearch_v4:
 
   # math
-  mathjax: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
-  katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css
-  katex_copytex: https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.min.js
-  katex_copytex_css: https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.css
-  mermaid: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
+  mathjax:
+  katex:
+  katex_copytex:
+  katex_copytex_css:
+  mermaid:
 
   # count
-  busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
+  busuanzi:
 
   # background effect
-  canvas_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js
-  canvas_fluttering_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js
-  canvas_nest: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js
+  canvas_ribbon:
+  canvas_fluttering_ribbon:
+  canvas_nest:
 
-  lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js
-  instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js
-  typed: https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js
-  pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js
+  lazyload:
+  instantpage:
+  typed:
+  pangu:
 
   # photo
-  fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
-  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
-  medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js
+  fancybox_css_v4:
+  fancybox_v4:
+  medium_zoom:
 
   # snackbar
-  snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css
-  snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js
+  snackbar_css:
+  snackbar:
 
   # effect
-  activate_power_mode: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js
-  fireworks: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js
-  click_heart: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js
-  ClickShowText: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js
+  activate_power_mode:
+  fireworks:
+  click_heart:
+  ClickShowText:
 
   # fontawesome
-  fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
+  fontawesome:
 
   # Conversion between Traditional and Simplified Chinese
-  translate: /js/tw_cn.js
+  translate:
 
-  # justifiedGallery
-  justifiedGallery_js: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js
-  justifiedGallery_css: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css
+  # flickr-justified-gallery
+  flickr_justified_gallery_js:
+  flickr_justified_gallery_css:
 
   # aplayer
-  aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
-  aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
-  meting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js
+  aplayer_css:
+  aplayer_js:
+  meting_js:
 
   # Prism.js
-  prismjs_js: https://cdn.jsdelivr.net/npm/prismjs/prism.min.js
-  prismjs_lineNumber_js: https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
-  prismjs_autoloader: https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js
+  prismjs_js:
+  prismjs_lineNumber_js:
+  prismjs_autoloader:

languages/default.yml

@@ -34,16 +34,18 @@ post:
   recommend: Related Articles
   edit: Edited on
 
-search: Search
-algolia_search:
-  input_placeholder: Search for Posts
-  hits_empty: "We didn't find any results for the search: ${query}."
-  hits_stats: '${hits} results found in ${time} ms'
+search:
+  title: Search
+  load_data: Loading the Database
+  algolia_search:
+    input_placeholder: Search for Posts
+    hits_empty: "We didn't find any results for the search: ${query}."
+    hits_stats: '${hits} results found in ${time} ms'
 
-local_search:
-  label: Local search
-  input_placeholder: Search for Posts
-  hits_empty: "We didn't find any results for the search: ${query}"
+  local_search:
+    label: Local search
+    input_placeholder: Search for Posts
+    hits_empty: "We didn't find any results for the search: ${query}"
 
 pagination:
   prev: Previous Post
@@ -94,8 +96,6 @@ share: Share
 
 rightside:
   readmode_title: Read Mode
-  font_plus_title: Increase font size
-  font_minus_title: Decrease font size
   translate_title: Toggle Between Traditional Chinese And Simplified Chinese
   night_mode_title: Toggle Between Light And Dark Mode
   back_to_top: Back To Top
@@ -118,6 +118,4 @@ Snackbar:
 
 loading: Loading...
 
-error404:
-  error_title: Page not found
-  back_button: Go back home
+error404: Page not found

languages/en.yml

@@ -34,16 +34,18 @@ post:
   recommend: Related Articles
   edit: Edited on
 
-search: Search
-algolia_search:
-  input_placeholder: Search for Posts
-  hits_empty: "We didn't find any results for the search: ${query}."
-  hits_stats: '${hits} results found in ${time} ms'
+search:
+  title: Search
+  load_data: Loading the Database
+  algolia_search:
+    input_placeholder: Search for Posts
+    hits_empty: "We didn't find any results for the search: ${query}."
+    hits_stats: '${hits} results found in ${time} ms'
 
-local_search:
-  label: Local search
-  input_placeholder: Search for Posts
-  hits_empty: "We didn't find any results for the search: ${query}"
+  local_search:
+    label: Local search
+    input_placeholder: Search for Posts
+    hits_empty: "We didn't find any results for the search: ${query}"
 
 pagination:
   prev: Previous Post
@@ -94,8 +96,6 @@ share: Share
 
 rightside:
   readmode_title: Read Mode
-  font_plus_title: Increase font size
-  font_minus_title: Decrease font size
   translate_title: Switch Between Traditional Chinese And Simplified Chinese
   night_mode_title: Switch Between Light And Dark Mode
   back_to_top: Back To Top
@@ -118,6 +118,4 @@ Snackbar:
 
 loading: Loading...
 
-error404:
-  error_title: Page not found
-  back_button: Go back home
+error404: Page not found

languages/zh-CN.yml

@@ -35,16 +35,18 @@ post:
   recommend: 相关推荐
   edit: 编辑
 
-search: 搜索
-algolia_search:
-  input_placeholder: 搜索文章
-  hits_empty: '找不到您查询的内容：${query}'
-  hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'
+search:
+  title: 搜索
+  load_data: 数据库加载中
+  algolia_search:
+    input_placeholder: 搜索文章
+    hits_empty: '找不到您查询的内容：${query}'
+    hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'
 
-local_search:
-  label: 本地搜索
-  input_placeholder: 搜索文章
-  hits_empty: '找不到您查询的内容：${query}'
+  local_search:
+    label: 本地搜索
+    input_placeholder: 搜索文章
+    hits_empty: '找不到您查询的内容：${query}'
 
 pagination:
   prev: 上一篇
@@ -95,8 +97,6 @@ share: 分享
 
 rightside:
   readmode_title: 阅读模式
-  font_plus_title: 放大字体
-  font_minus_title: 缩小字体
   translate_title: 简繁转换
   night_mode_title: 浅色和深色模式转换
   back_to_top: 回到顶部
@@ -119,6 +119,4 @@ Snackbar:
 
 loading: 加载中...
 
-error404:
-  error_title: 页面没有找到
-  back_button: 回到主页
+error404: 页面没有找到

languages/zh-TW.yml

@@ -35,16 +35,18 @@ post:
   recommend: 相關推薦
   edit: 編輯
 
-search: 搜尋
-algolia_search:
-  input_placeholder: 搜尋文章
-  hits_empty: '找不到您查詢的內容：${query}'
-  hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒'
+search:
+  title: 搜尋
+  load_data: 資料庫載入中
+  algolia_search:
+    input_placeholder: 搜尋文章
+    hits_empty: '找不到您查詢的內容：${query}'
+    hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒'
 
-local_search:
-  label: 本地搜尋
-  input_placeholder: 搜尋文章
-  hits_empty: '找不到您查詢的內容：${query}'
+  local_search:
+    label: 本地搜尋
+    input_placeholder: 搜尋文章
+    hits_empty: '找不到您查詢的內容：${query}'
 
 pagination:
   prev: 上一篇
@@ -65,7 +67,7 @@ aside:
     headline: 網站資訊
     article_name: 文章數目
     runtime:
-      name: 已運行時間
+      name: 已執行時間
       unit: 天
     last_push_date:
       name: 最後更新時間
@@ -80,7 +82,7 @@ aside:
     zero: 沒有評論
     image: 圖片
     link: 連結
-    code: 代碼
+    code: 程式碼
   card_toc: 目錄
 
 date_suffix:
@@ -95,8 +97,6 @@ share: 分享
 
 rightside:
   readmode_title: 閱讀模式
-  font_plus_title: 放大字型
-  font_minus_title: 縮小字型
   translate_title: 簡繁轉換
   night_mode_title: 淺色和深色模式轉換
   back_to_top: 回到頂部
@@ -119,6 +119,4 @@ Snackbar:
 
 loading: 載入中...
 
-error404:
-  error_title: 頁面沒有找到
-  back_button: 回到主頁
+error404: 頁面沒有找到

layout/category.pug

@@ -3,9 +3,9 @@ extends includes/layout.pug
 block content
   if theme.category_ui == 'index'
     include ./includes/mixins/post-ui.pug
-    #recent-posts.recent-posts.category_ui   
+    #recent-posts.recent-posts.category_ui
       +postUI
-      include includes/pagination.pug    
+      include includes/pagination.pug
   else
     include ./includes/mixins/article-sort.pug
     #category

layout/includes/404.pug

@@ -1,17 +1,12 @@
-- var top_img = theme.error_404.background || theme.default_top_img
-- var bg_img = `background-image: url('${url_for(top_img)}')`
+- var top_img_404 = theme.error_404.background || theme.default_top_img
 
 #body-wrap.error404
-  div(style='display: none')
-    include ./header/index.pug
+  include ./header/index.pug
 
   #error-wrap
     .error-content
-      .error-img(style=bg_img)
+      .error-img
+        img(src=url_for(top_img_404) alt='Page not found')
       .error-info
         h1.error_title= '404'
-        .error_subtitle= theme.error_404.subtitle
-        a.button--animated(href=config.root)
-          i.fas.fa-rocket
-          = _p('error404.back_button')
-          
+        .error_subtitle= theme.error_404.subtitle || _p('error404')

layout/includes/additional-js.pug

@@ -7,9 +7,11 @@ div
 
   if theme.medium_zoom
     script(src=url_for(theme.CDN.medium_zoom))
+  else if theme.fancybox
+    script(src=url_for(theme.CDN.fancybox_v4))
 
   if theme.instantpage
-    script(src=url_for(theme.CDN.instantpage) type="module")
+    script(src=url_for(theme.CDN.instantpage), type='module')
 
   if theme.lazyload.enable
     script(src=url_for(theme.CDN.lazyload))
@@ -18,21 +20,23 @@ div
     script(src=url_for(theme.CDN.snackbar))
 
   if theme.pangu.enable
-    !=partial('includes/third-party/pangu.pug', {}, {cache: true})
+    != partial("includes/third-party/pangu.pug", {}, { cache: true })
 
   //- search
   if theme.algolia_search.enable
+    script(src=url_for(theme.CDN.algolia_search_v4))
+    script(src=url_for(theme.CDN.instantsearch_v4))
     script(src=url_for(theme.CDN.algolia_js))
   else if theme.local_search.enable
     script(src=url_for(theme.CDN.local_search))
 
   if theme.preloader
-    !=partial('includes/loading/loading-js', {}, {cache: true})
+    != partial("includes/loading/loading-js", {}, { cache: true })
 
   .js-pjax
     if needLoadCountJs
-      !=partial('includes/third-party/card-post-count/index', {}, {cache: true})
-    
+      != partial("includes/third-party/card-post-count/index", {}, { cache: true })
+
     if loadSubJs
       include ./third-party/subtitle.pug
 
@@ -41,20 +45,20 @@ div
     if commentsJsLoad
       include ./third-party/comments/js.pug
 
-  !=partial('includes/third-party/prismjs', {}, {cache: true})
+  != partial("includes/third-party/prismjs", {}, { cache: true })
 
   if theme.aside.enable && theme.newest_comments.enable
     if theme.pjax.enable
-      !=partial('includes/third-party/newest-comments/index', {}, {cache: true})
+      != partial("includes/third-party/newest-comments/index", {}, { cache: true })
     else if (!is_post() && page.aside !== false)
-      !=partial('includes/third-party/newest-comments/index', {}, {cache: true})
+      != partial("includes/third-party/newest-comments/index", {}, { cache: true })
 
-  !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
+  != fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
 
-  !=partial('includes/third-party/effect', {}, {cache: true})
+  != partial("includes/third-party/effect", {}, { cache: true })
+
+  != partial("includes/third-party/chat/index", {}, { cache: true })
 
-  !=partial('includes/third-party/chat/index', {}, {cache: true})
-  
   if theme.aplayerInject && theme.aplayerInject.enable
     if theme.pjax.enable || theme.aplayerInject.per_page
       include ./third-party/aplayer.pug
@@ -62,7 +66,7 @@ div
       include ./third-party/aplayer.pug
 
   if theme.pjax.enable
-    !=partial('includes/third-party/pjax', {}, {cache: true})
-    
+    != partial("includes/third-party/pjax", {}, { cache: true })
+
   if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
     script(async data-pjax src=url_for(theme.CDN.busuanzi))

layout/includes/head.pug

@@ -4,7 +4,7 @@
 - else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
 - else if (is_month()) pageTitle += ': ' + page.month + '/' + page.year
 - else if (is_year()) pageTitle += ': ' + page.year
-- else if (is_current('/404.html', [strict])) pageTitle = _p('error404.error_title')
+- else if (is_current('/404.html', [strict])) pageTitle = _p('error404')
 - else pageTitle = page.title || config.title || ''
 
 - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
@@ -20,7 +20,7 @@
 
 meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
-meta(name="viewport" content="width=device-width,initial-scale=1")
+meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
 title= tabTitle
 if pageKeywords
   meta(name="keywords" content=pageKeywords)
@@ -52,9 +52,8 @@ link(rel='stylesheet', href=url_for(theme.CDN.fontawesome) media="print" onload=
 if (theme.snackbar && theme.snackbar.enable)
   link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css) media="print" onload="this.media='all'")
 
-if theme.algolia_search.enable
-  link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css) media="print" onload="this.media='all'")
-  script(src=url_for(theme.CDN.algolia_search) defer)
+if theme.fancybox
+  link(rel='stylesheet' href=url_for(theme.CDN.fancybox_css_v4) media="print" onload="this.media='all'")
 
 //- google_adsense
 !=partial('includes/head/google_adsense', {}, {cache: true})

layout/includes/head/analytics.pug

@@ -16,18 +16,6 @@ if theme.google_analytics
     gtag('js', new Date());
     gtag('config', '!{theme.google_analytics}');
 
-if theme.tencent_analytics
-  script.
-    var _mtac = {};
-    (function() {
-        var mta = document.createElement("script");
-        mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
-        mta.setAttribute("name", "MTAH5");
-        mta.setAttribute("sid", "!{theme.tencent_analytics}");
-        var s = document.getElementsByTagName("script")[0];
-        s.parentNode.insertBefore(mta, s);
-    })();
-
 if theme.cnzz_analytics
   script(async data-pjax src=`https://s4.cnzz.com/z_stat.php?id=${theme.cnzz_analytics}&web_id=${theme.cnzz_analytics}`)
 

layout/includes/head/config.pug

@@ -9,9 +9,9 @@
       hits: theme.algolia_search.hits,
       // search languages
       languages: {
-        input_placeholder: _p("algolia_search.input_placeholder"),
-        hits_empty: _p("algolia_search.hits_empty"),
-        hits_stats: _p("algolia_search.hits_stats")
+        input_placeholder: _p("search.algolia_search.input_placeholder"),
+        hits_empty: _p("search.algolia_search.hits_empty"),
+        hits_stats: _p("search.algolia_search.hits_stats"),
       }
     })
   }
@@ -22,7 +22,7 @@
       path: config.search.path,
       languages: {
         // search languages
-        hits_empty: _p("local_search.hits_empty")
+        hits_empty: _p("search.local_search.hits_empty"),
       }
     })
   }
@@ -112,17 +112,12 @@ script.
     lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
     Snackbar: !{Snackbar},
     source: {
-      jQuery: '!{url_for(theme.CDN.jquery)}',
       justifiedGallery: {
-        js: '!{url_for(theme.CDN.justifiedGallery_js)}',
-        css: '!{url_for(theme.CDN.justifiedGallery_css)}'
-      },
-      fancybox: {
-        js: '!{url_for(theme.CDN.fancybox)}',
-        css: '!{url_for(theme.CDN.fancybox_css)}'
+        js: '!{url_for(theme.CDN.flickr_justified_gallery_js)}',
+        css: '!{url_for(theme.CDN.flickr_justified_gallery_css)}'
       }
     },
     isPhotoFigcaption: !{theme.photofigcaption},
     islazyload: !{theme.lazyload.enable},
-    isanchor: !{theme.anchor}
+    isAnchor: !{theme.anchor}
   }

layout/includes/head/config_site.pug

@@ -1,13 +1,22 @@
 -
+  const titleVal = pageTitle.replace(/'/ig,"\\'")
+
   let isHighlightShrink
   if (theme.highlight_shrink == 'none') isHighlightShrink = 'undefined'
   else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink
   else isHighlightShrink = theme.highlight_shrink
 
-  var pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable
-  var showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true )
-
-  let titleVal = pageTitle.replace(/'/ig,"\\'")
+  var showToc = false
+  if (theme.aside.enable) {
+    let tocEnable = false
+    if (is_post()) {
+      if (theme.toc.post) tocEnable = true
+    } else if (is_page()) {
+      if (theme.toc.page) tocEnable = true
+    }
+    const pageToc = page.toc === true || page.toc === false ? page.toc : tocEnable
+    showToc = pageToc && (toc(page.content) !== '' || page.encrypt == true )
+  }
 -
 
 script#config-diff.

layout/includes/head/preconnect.pug

@@ -6,9 +6,6 @@ if theme.google_analytics
 if theme.baidu_analytics
   link(rel="preconnect" href="//hm.baidu.com")
 
-if theme.tencent_analytics
-  link(rel="preconnect" href="//pingjs.qq.com")
-
 if theme.cnzz_analytics
   link(rel="preconnect" href="//s4.cnzz.com")
 

layout/includes/header/menu_item.pug

@@ -1,26 +1,27 @@
 if theme.menu
-  //- for mobile sidebar
-  - let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : ''
-
   .menus_items
     each value, label in theme.menu
       if typeof value !== 'object'
         .menus_item
-          a.site-page(href=url_for(trim(value.split('||')[0])))
-            if value.split('||')[1]
-              i.fa-fw(class=trim(value.split('||')[1]))
+          - const valueArray = value.split('||')
+          a.site-page(href=url_for(trim(valueArray[0])))
+            if valueArray[1]
+              i.fa-fw(class=trim(valueArray[1]))
             span=' '+label
       else
         .menus_item
-          a.site-page(href='javascript:void(0);')
-            if label.split('||')[1]
-              i.fa-fw(class=trim(label.split('||')[1]))
-            span=' '+ trim(label.split('||')[0])
-            i.fas.fa-chevron-down.expand(class=sidebarChildHide)
+          - const labelArray = label.split('||')
+          - const hideClass = labelArray[2] && trim(labelArray[2]) === 'hide' ? 'hide' : ''
+          a.site-page.group(class=`${hideClass}` href='javascript:void(0);')
+            if labelArray[1]
+              i.fa-fw(class=trim(labelArray[1]))
+            span=' '+ trim(labelArray[0])
+            i.fas.fa-chevron-down
           ul.menus_item_child
             each val,lab in value 
+              - const valArray = val.split('||')
               li
-                a.site-page.child(href=url_for(trim(val.split('||')[0])))
-                  if val.split('||')[1]
-                    i.fa-fw(class=trim(val.split('||')[1]))
+                a.site-page.child(href=url_for(trim(valArray[0])))
+                  if valArray[1]
+                    i.fa-fw(class=trim(valArray[1]))
                   span=' '+ lab

layout/includes/header/nav.pug

@@ -7,7 +7,7 @@ nav#nav
       #search-button
         a.site-page.social-icon.search
           i.fas.fa-search.fa-fw
-          span=' '+_p('search')
+          span=' '+_p('search.title')
     !=partial('includes/header/menu_item', {}, {cache: true})
 
     #toggle-menu

layout/includes/header/post-info.pug

@@ -21,9 +21,9 @@
             - let data_type_update = theme.post_meta.post.date_type === 'updated'
             - let date_type = data_type_update ? 'updated' : 'date'
             - let date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt'
-            - let data_info = data_type_update ? _p('post.updated') : _p('post.created')
+            - let date_title = data_type_update ? _p('post.updated') : _p('post.created')
             i.fa-fw.post-meta-icon(class=date_icon)
-            span.post-meta-label= data_info
+            span.post-meta-label= date_title
             time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)
       if (theme.post_meta.post.categories && page.categories.data.length > 0)
         span.post-meta-categories

layout/includes/mixins/post-ui.pug

@@ -1,14 +1,19 @@
 mixin postUI(posts)
   each article , index in page.posts.data
     .recent-post-item
-      - let link = article.link || article.path
-      - let title = article.title || _p('no_title')
-      - let leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
-      - let post_cover = article.cover
-      - let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+      -
+        let link = article.link || article.path
+        let title = article.title || _p('no_title')
+        const position = theme.cover.position
+        let leftOrRight = position === 'both' 
+          ? index%2 == 0 ? 'left' : 'right'
+          : position === 'left' ? 'left' : 'right'
+        let post_cover = article.cover
+        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+      -
       if post_cover && theme.cover.index_enable
         .post_cover(class=leftOrRight)
-          a(href=url_for(link) title=title)      
+          a(href=url_for(link) title=title)
             img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
       .recent-post-info(class=no_cover)
         a.article-title(href=url_for(link) title=title)= title
@@ -17,14 +22,14 @@ mixin postUI(posts)
             span.article-meta
               i.fas.fa-thumbtack.sticky
               span.sticky= _p('sticky')
-              span.article-meta__separator |
+              span.article-meta-separator |
           if (theme.post_meta.page.date_type)
             span.post-meta-date
-              if (theme.post_meta.page.date_type === 'both')               
+              if (theme.post_meta.page.date_type === 'both')
                 i.far.fa-calendar-alt
                 span.article-meta-label=_p('post.created')
                 time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
-                span.article-meta__separator |
+                span.article-meta-separator |
                 i.fas.fa-history
                 span.article-meta-label=_p('post.updated')
                 time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
@@ -38,25 +43,25 @@ mixin postUI(posts)
                 time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
           if (theme.post_meta.page.categories && article.categories.data.length > 0)
             span.article-meta
-              span.article-meta__separator |
+              span.article-meta-separator |
               i.fas.fa-inbox
               each item, index in article.categories.data
                 a(href=url_for(item.path)).article-meta__categories #[=item.name]
                 if (index < article.categories.data.length - 1)
-                  i.fas.fa-angle-right
+                  i.fas.fa-angle-right.article-meta-link
           if (theme.post_meta.page.tags && article.tags.data.length > 0)
             span.article-meta.tags
-              span.article-meta__separator |
+              span.article-meta-separator |
               i.fas.fa-tag
               each item, index in article.tags.data
                 a(href=url_for(item.path)).article-meta__tags #[=item.name]
                 if (index < article.tags.data.length - 1)
-                  span.article-meta__link #[='•']
+                  span.article-meta-link #[='•']
           
           mixin countBlockInIndex
             - needLoadCountJs = true
             span.article-meta
-              span.article-meta__separator |
+              span.article-meta-separator |
               i.fas.fa-comments
               if block
                 block

layout/includes/page/categories.pug

@@ -1,5 +1 @@
-.category-lists
-  .category-title.is-center= _p('page.category')
-    |  - 
-    span.category-amount= site.categories.length
-  div!= list_categories()
+.category-lists!= list_categories()

layout/includes/page/default-page.pug

@@ -1,4 +1,2 @@
 #article-container
-  if top_img === false
-    h1.page-title= page.title
   != page.content

layout/includes/page/flink.pug

@@ -1,21 +1,68 @@
 #article-container
-  if top_img === false
-    h1.page-title= page.title
-
   .flink
-    if site.data.link
-      each i in site.data.link
-        if i.class_name
-          h2!= i.class_name
-        if i.class_desc
-          .flink-desc!=i.class_desc
-        .flink-list
-          each item in i.link_list
-            .flink-list-item
-              a(href=url_for(item.link)  title=item.name target="_blank")
-                .flink-item-icon
-                  img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
-                .flink-item-name= item.name 
-                .flink-item-desc(title=item.descr)= item.descr
+    if page.flink_url
+      script.
+        (()=>{
+          const replaceSymbol = (str) => {
+            return str.replace(/[\p{P}\p{S}]/gu, '-')
+          }
+
+          let result = ''
+          fetch('!{url_for(page.flink_url)}')
+            .then(response => response.json())
+            .then(str => {
+              for(let i = 0; i < str.length; i++){
+                const replaceClassName = replaceSymbol(str[i].class_name)
+                const className = str[i].class_name ? `<h2 id='${replaceClassName}'><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ''
+                const classDesc = str[i].class_desc ? `<div class='flink-desc'>${str[i].class_desc}</div>` : ''
+                
+                let listResult = ''
+                const lists = str[i].link_list
+                for(let j = 0; j < lists.length; j++){
+                  listResult += `
+                    <div class="flink-list-item">
+                      <a href='${lists[j].link}' title='${lists[j].name}' target='_blank'>
+                        <div class='flink-item-icon'>
+                          <img class='no-lightbox' src='${lists[j].avatar}' onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt='${lists[j].name}' />
+                        </div>
+                        <div class='flink-item-name'>${lists[j].name}</div> 
+                        <div class='flink-item-desc' title='${lists[j].descr}'>${lists[j].descr}</div>
+                      </a>
+                    </div>`
+                }
+
+                result += `${className}${classDesc} <div class='flink-list'>${listResult}</div>`
+              }
+
+              document.querySelector('.flink').insertAdjacentHTML('afterbegin', result)
+            })
+        })()
+
+    else
+      if site.data.link
+        - let result = ''
+        each i in site.data.link
+          - let className = i.class_name ? markdown(`## ${i.class_name}`) : ''
+          - let classDesc = i.class_desc ? `<div class='flink-desc'>${i.class_desc}</div>` : ''
+
+          - let listResult = ''
+
+          each j in i.link_list
+            - 
+              listResult += `
+                <div class="flink-list-item">
+                  <a href='${j.link}' title='${j.name}' target='_blank'>
+                    <div class='flink-item-icon'>
+                      <img class='no-lightbox' src='${j.avatar}' onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt='${j.name}' />
+                    </div>
+                    <div class='flink-item-name'>${j.name}</div> 
+                    <div class='flink-item-desc' title='${j.descr}'>${j.descr}</div>
+                  </a>
+                </div>`
+            -
+
+          - result += `${className}${classDesc} <div class='flink-list'>${listResult}</div>`
+
+        - page.content = result + page.content
     != page.content
 

layout/includes/page/tags.pug

@@ -1,5 +1,2 @@
-.tag-cloud-title.is-center= _p('page.tag')
-  |  - 
-  span.tag-cloud-amount= site.tags.length
 .tag-cloud-list.is-center
   !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})

layout/includes/post/reward.pug

@@ -1,5 +1,5 @@
 .post-reward
-  .reward-button.button--animated
+  .reward-button
     i.fas.fa-qrcode
     = ' ' + _p('donate')
   .reward-main

layout/includes/rightside.pug

@@ -1,38 +1,60 @@
+- const { readmode, translate, darkmode, aside, chat_btn } = theme
+mixin rightsideItem(array)
+  each item in array
+    case item
+      when 'readmode'
+        if is_post() && readmode
+          button#readmode(type="button" title=_p('rightside.readmode_title'))
+            i.fas.fa-book-open
+      when 'translate'
+        if translate.enable
+          button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
+      when 'darkmode'
+        if darkmode.enable && darkmode.button
+          button#darkmode(type="button" title=_p('rightside.night_mode_title'))
+            i.fas.fa-adjust
+      when 'hideAside'
+        if aside.enable && aside.button && page.aside !== false
+          button#hide-aside-btn(type="button" title=_p('rightside.aside'))
+            i.fas.fa-arrows-alt-h
+      when 'toc'
+        if showToc
+          button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
+            i.fas.fa-list-ul
+      when 'chat'
+        if chat_btn
+          button#chat_btn(type="button" title=_p("rightside.chat_btn"))
+            i.fas.fa-sms
+      when 'comment'
+        if commentsJsLoad
+          a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
+            i.fas.fa-comments
+
 #rightside
+  - const { enable, hide, show } = theme.rightside_item_order
+  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
+  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment']
+
+  
   #rightside-config-hide
-    if is_post() && theme.readmode
-      button#readmode(type="button" title=_p('rightside.readmode_title'))
-        i.fas.fa-book-open
-    if theme.change_font_size
-      button#font-plus(type="button" title=_p('rightside.font_plus_title'))
-        i.fas.fa-plus
-      button#font-minus(type="button" title=_p('rightside.font_minus_title'))
-        i.fas.fa-minus
-    if theme.translate.enable
-      button#translateLink(type="button" title=_p('rightside.translate_title'))= theme.translate.default
-    if theme.darkmode.enable && theme.darkmode.button
-      button#darkmode(type="button" title=_p('rightside.night_mode_title'))
-        i.fas.fa-adjust
-    if theme.aside.enable && theme.aside.button && page.aside !== false
-      button#hide-aside-btn(type="button" title=_p('rightside.aside'))
-        i.fas.fa-arrows-alt-h
+    if hideArray
+      +rightsideItem(hideArray)
   #rightside-config-show
-    if is_post()
-      if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size)
+    if enable
+      if hide
+        button#rightside_config(type="button" title=_p("rightside.setting"))
+          i.fas.fa-cog.fa-spin
+    else
+      if is_post()
+        if (readmode || translate.enable || (darkmode.enable && darkmode.button))
+          button#rightside_config(type="button" title=_p("rightside.setting"))
+            i.fas.fa-cog.fa-spin
+      else if translate.enable || (darkmode.enable && darkmode.button)
         button#rightside_config(type="button" title=_p("rightside.setting"))
           i.fas.fa-cog.fa-spin
-      if showToc
-        button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
-          i.fas.fa-list-ul
-    else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size
-      button#rightside_config(type="button" title=_p("rightside.setting"))
-        i.fas.fa-cog.fa-spin
 
-    if theme.chat_btn
-      button#chat_btn(type="button" title=_p("rightside.chat_btn"))
-        i.fas.fa-sms
-    if commentsJsLoad
-      a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
-        i.fas.fa-comments
+    if showArray
+      +rightsideItem(showArray)
+
     button#go-up(type="button" title=_p("rightside.back_to_top"))
       i.fas.fa-arrow-up

layout/includes/sidebar.pug

@@ -3,26 +3,21 @@
   #sidebar-menus
     .avatar-img.is-center
       img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
-    .site-data
-      if site.posts.length
-        .data-item.is-center
-          .data-item-link
-            a(href=url_for(config.archive_dir) + '/')
-              .headline= _p('aside.articles') 
-              .length-num= site.posts.length
+    .site-data.is-center
+      .data-item
+        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-item-link
-            a(href=url_for(config.tag_dir) + '/' )
-              .headline= _p('aside.tags')
-              .length-num= site.tags.length
+      .data-item
+        a(href=url_for(config.tag_dir) + '/' )
+          .headline= _p('aside.tags')
+          .length-num= site.tags.length
+
+      .data-item
+        a(href=url_for(config.category_dir) + '/')
+          .headline= _p('aside.categories') 
+          .length-num= site.categories.length
 
-      if site.categories.length
-        .data-item.is-center
-          .data-item-link
-            a(href=url_for(config.category_dir) + '/')
-              .headline= _p('aside.categories') 
-              .length-num= site.categories.length
     hr
     !=partial('includes/header/menu_item', {}, {cache: true})

layout/includes/third-party/comments/disqusjs.pug

@@ -1,4 +1,3 @@
-- let disqusjsApi = theme.disqusjs.api || 'https://disqus.skk.moe/disqus/'
 - let disqusjsPageTitle = page.title.replace(/'/ig,"\\'")
 
 script.
@@ -12,20 +11,16 @@ script.
 
     function initDisqusjs () {
       window.DISQUS = null
-      new DisqusJS({
+      new DisqusJS(Object.assign({
         shortname: '!{theme.disqusjs.shortname}',
-        siteName: '!{theme.disqusjs.siteName}',
         identifier: '!{ page.path }',
         url: '!{ page.permalink }',
         title: '!{ disqusjsPageTitle }',
-        api: '!{disqusjsApi}',
         apikey: '!{theme.disqusjs.apikey}',
-        nocomment: '!{theme.disqusjs.nocomment}',
-        admin: '!{theme.disqusjs.admin}',
-        adminLabel: '!{theme.disqusjs.adminLabel}'
-      });
+      },!{JSON.stringify(theme.disqusjs.option)}))
     }
 
+
     window.disqusReset = initDisqusjs
 
     if (window.disqusJsLoad) initDisqusjs()

layout/includes/third-party/comments/facebook_comments.pug

@@ -7,7 +7,7 @@ script.
     if (typeof FB === 'object') FB.XFBML.parse()
     else {
       let ele = document.createElement('script')
-      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v10.0')
+      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v11.0')
       ele.setAttribute('async', 'true')
       ele.setAttribute('defer', 'true')
       ele.setAttribute('crossorigin', 'anonymous')

layout/includes/third-party/comments/giscus.pug

@@ -0,0 +1,49 @@
+- const { repo, repo_id, category_id, option } = theme.giscus
+- const themes = theme.giscus.theme
+script.
+  function loadGiscus () {
+    let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
+
+    const config = Object.assign({
+      src: '!{theme.CDN.giscus}',
+      'data-repo': '!{repo}',
+      'data-repo-id': '!{repo_id}',
+      'data-category-id': '!{category_id}',
+      'data-mapping': 'pathname',
+      'data-theme': nowTheme,
+      'data-reactions-enabled': '1',
+      crossorigin: 'anonymous',
+      async: true
+    },!{JSON.stringify(option)})
+
+    let ele = document.createElement('script')
+    for (let key in config) {
+      ele.setAttribute(key, config[key])
+    }
+    document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele)
+  }
+
+  function changeGiscusTheme () {
+    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
+
+    function sendMessage(message) {
+      const iframe = document.querySelector('iframe.giscus-frame');
+      if (!iframe) return;
+      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+    }
+
+    sendMessage({
+      setConfig: {
+        theme: theme
+      }
+    });
+  }
+
+  if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
+    else loadGiscus()
+  } else {
+    function loadOtherComment () {
+      loadGiscus()
+    }
+  }

layout/includes/third-party/comments/gitalk.pug

@@ -15,11 +15,6 @@ script.
         owner: '!{theme.gitalk.owner}',
         admin: ['!{theme.gitalk.admin}'],
         id: '!{md5(page.path)}',
-        language: '!{theme.gitalk.language}',
-        perPage: !{theme.gitalk.perPage},
-        distractionFreeMode: !{theme.gitalk.distractionFreeMode},
-        pagerDirection: '!{theme.gitalk.pagerDirection}',
-        createIssueManually: !{theme.gitalk.createIssueManually},
         updateCountCallback: commentCount
       },!{JSON.stringify(theme.gitalk.option)}))
 

layout/includes/third-party/comments/index.pug

@@ -33,6 +33,8 @@ hr
             #twikoo-wrap
           when 'Waline'
             #waline-wrap
+          when 'Giscus'
+            #giscus-wrap
           when 'Facebook Comments'
             .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
                         data-numposts= theme.facebook_comments.pageSize || 10

layout/includes/third-party/comments/js.pug

@@ -16,5 +16,7 @@ each name in theme.comments.use
       !=partial('includes/third-party/comments/twikoo', {}, {cache: true})
     when 'Waline'
       !=partial('includes/third-party/comments/waline', {}, {cache: true})
+    when 'Giscus'
+      !=partial('includes/third-party/comments/giscus', {}, {cache: true})
     when 'Facebook Comments'
       !=partial('includes/third-party/comments/facebook_comments', {}, {cache: true})

layout/includes/third-party/comments/twikoo.pug

@@ -1,42 +1,48 @@
+- const { envId, region, option } = theme.twikoo
+- const { use, lazyload, count } = theme.comments
+
 script.
   (()=>{
-    const $countDom = document.getElementById('twikoo-count')
     const init = () => {
       twikoo.init(Object.assign({
         el: '#twikoo-wrap',
-        envId: '!{theme.twikoo.envId}',
-        region: '!{theme.twikoo.region}'
-      }, !{JSON.stringify(theme.twikoo.option)}))
+        envId: '!{envId}',
+        region: '!{region}',
+        onCommentLoaded: function () {
+          btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.vemoji)'))
+        }
+      }, !{JSON.stringify(option)}))
     }
 
     const getCount = () => {
       twikoo.getCommentsCount({
-        envId: '!{theme.twikoo.envId}',
-        region: '!{theme.twikoo.region}',
+        envId: '!{envId}',
+        region: '!{region}',
         urls: [window.location.pathname],
         includeReply: false
       }).then(function (res) {
-        $countDom.innerText = res[0].count
+        document.getElementById('twikoo-count').innerText = res[0].count
       }).catch(function (err) {
         console.error(err);
       });
     }
 
-    const loadTwikoo = (bool = false) => {
-      if (typeof twikoo === 'object') {
-        init()
-        bool && $countDom && setTimeout(getCount,0)
-      } else {
-        getScript('!{theme.CDN.twikoo}').then(()=> {
-          init()
-          bool && $countDom && setTimeout(getCount,0)
-        })
-      }
+    const runFn = () => {
+      init()
+      !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''}
     }
 
-    if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) {
-      if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
-      else loadTwikoo(true)
+    const loadTwikoo = () => {
+      if (typeof twikoo === 'object') {
+        setTimeout(runFn,0)
+        return
+      } 
+      getScript('!{theme.CDN.twikoo}').then(runFn)
+    }
+
+    if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
+      else loadTwikoo()
     } else {
       window.loadOtherComment = () => {
         loadTwikoo()

layout/includes/third-party/comments/utterances.pug

@@ -13,13 +13,13 @@ script.
   }
 
   function utterancesTheme () {
-    if (document.querySelector('.utterances-frame')) {
+    const iframe = document.querySelector('.utterances-frame')
+    if (iframe) {
       const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
       const message = {
         type: 'set-theme',
         theme: theme
       };
-      const iframe = document.querySelector('.utterances-frame');
       iframe.contentWindow.postMessage(message, 'https://utteranc.es');
     }
   }

layout/includes/third-party/comments/valine.pug

@@ -9,18 +9,10 @@ script.
         el: '#vcomment',
         appId: '#{theme.valine.appId}',
         appKey: '#{theme.valine.appKey}',
-        placeholder: '#{theme.valine.placeholder}',
         avatar: '#{theme.valine.avatar}',
-        meta: '#{theme.valine.guest_info }'.split(','),
-        pageSize: '#{theme.valine.pageSize}',
-        lang: '#{theme.valine.lang}',
-        recordIP: #{theme.valine.recordIP},
         serverURLs: '#{theme.valine.serverURLs}',
-        emojiCDN: '#{theme.valine.emojiCDN}',
         emojiMaps: !{emojiMaps},
-        enableQQ: #{theme.valine.enableQQ},
         path: window.location.pathname,
-        requiredFields: [!{theme.valine.requiredFields ? JSON.stringify(theme.valine.requiredFields).split(',') : ''}],
         visitor: #{theme.valine.visitor}
       }, !{JSON.stringify(theme.valine.option)}))
     }

layout/includes/third-party/comments/waline.pug

@@ -1,17 +1,18 @@
+- const { serverURL, visitor, option } = theme.waline
+
 script.
   function loadWaline () {
     function initWaline () {
       const waline = new Waline(Object.assign({
         el: '#waline-wrap',
-        serverURL: '!{theme.waline.serverURL}',
-        avatar: '#{theme.waline.avatar}',
+        serverURL: '!{serverURL}',
         path: location.pathname,
-        visitor: #{theme.waline.visitor},
+        visitor: !{visitor},
         dark: 'html[data-theme="dark"]'
-      }, !{JSON.stringify(theme.waline.option)}))
+      }, !{JSON.stringify(option)}))
     }
 
-    if (typeof Waline === 'function') initWaline() 
+    if (typeof Waline === 'function') initWaline()
     else getScript('!{url_for(theme.CDN.waline)}').then(initWaline)
   }
 

layout/includes/third-party/math/mermaid.pug

@@ -1,15 +1,26 @@
 script.
-  if (document.getElementsByClassName('mermaid').length) {
-    if (window.mermaidJsLoad) mermaid.init()
-    else {
-      getScript('!{theme.CDN.mermaid}').then(() => {
-        window.mermaidJsLoad = true
-        mermaid.initialize({
-          theme: '!{theme.mermaid.theme}',
+  (() => {
+    const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
+    if ($mermaidWrap.length) {
+      window.runMermaid = () => {
+        window.loadMermaid = true
+        const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
+
+        Array.from($mermaidWrap).forEach((item, index) => {
+          const mermaidSrc = item.firstElementChild
+          const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
+          const mermaidID = 'mermaid-' + index
+          const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
+          mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
+            mermaidSrc.insertAdjacentHTML('afterend', svgCode)
+          })
         })
-        !{theme.pjax.enable} && mermaid.init()
-      })
+      }
+
+      const loadMermaid = () => {
+        window.loadMermaid ? runMermaid() : getScript('!{theme.CDN.mermaid}').then(runMermaid)
+      }
+
+      window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
     }
-  }
-
-
+  })()

layout/includes/third-party/newest-comments/disqus-comment.pug

@@ -49,7 +49,7 @@ script.
           }
           
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
           <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
           </div></div>`
         }

layout/includes/third-party/newest-comments/github-issues.pug

@@ -75,7 +75,7 @@ script.
           }
 
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
           <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
           </div></div>`
         }

layout/includes/third-party/newest-comments/twikoo-comment.pug

@@ -60,7 +60,7 @@ script.
           }
           
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
           <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
           </div></div>`
         }

layout/includes/third-party/newest-comments/valine.pug

@@ -1,6 +1,6 @@
 - let default_avatar = theme.valine.avatar
 
-script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.17.0/js/md5.min.js")
+script(src=url_for(theme.CDN.blueimp_md5))
 script.
   window.addEventListener('load', () => {
     const changeContent = (content) => {
@@ -37,7 +37,7 @@ script.
           }
 
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
           <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
           </div></div>`
         }

layout/includes/third-party/newest-comments/waline.pug

@@ -16,13 +16,6 @@ script.
       return content
     }
 
-    const getIcon = (ava,mail) => {
-      if (ava) return ava
-      let defaultIcon = '!{ avatar ? `?d=${avatar}` : ''}'
-      let iconUrl = "!{avatarCDN ? avatarCDN : 'https://gravatar.loli.net/avatar/'}" + mail + defaultIcon
-      return iconUrl
-    }
-
     const generateHtml = array => {
       let result = ''
 
@@ -36,7 +29,7 @@ script.
           }
 
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
           <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
           </div></div>`
         }
@@ -59,10 +52,10 @@ script.
           const walineArray = res.comments.map(e => {
             return {
               'content': changeContent(e.comment),
-              'avatar': getIcon(e.QQAvatar,e.mail),
+              'avatar': e.avatar,
               'nick': e.nick,
               'url': e.url + '#' + e.objectId,
-              'date': e.updatedAt,
+              'date': e.insertedAt,
             }
           })
           saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))

layout/includes/third-party/pjax.pug

@@ -3,20 +3,18 @@ if theme.pjax.exclude
   each val in theme.pjax.exclude
     - pjaxExclude = pjaxExclude + `:not([href="${val}"])`
 
+- let pjaxSelectors = ['title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','.js-pjax']
+
+- let choose = theme.comments.use
+if choose
+  if theme.Open_Graph_meta && (choose.includes('Livere') || choose.includes('Utterances') || choose.includes('Giscus'))
+    - pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
+  if choose.includes('Utterances') || choose.includes('Giscus')
+    - pjaxSelectors.unshift('link[rel="canonical"]')
+
 script(src=url_for(theme.CDN.pjax))
 script.
-  let pjaxSelectors = [
-    'title',
-    '#config-diff',
-    '#body-wrap',
-    '#rightside-config-hide',
-    '#rightside-config-show',
-    '.js-pjax'
-  ]
-
-  if (!{Boolean(theme.Open_Graph_meta && theme.comments.use && theme.comments.use.includes('Livere'))}) {
-    pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
-  }
+  let pjaxSelectors = !{JSON.stringify(pjaxSelectors)}
 
   var pjax = new Pjax({
     elements: '!{pjaxExclude}',
@@ -74,11 +72,6 @@ script.
 
     typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
 
-    // Analytics
-    if (!{theme.tencent_analytics ? true : false}) {
-      MtaH5.pgv()
-    }
-
     // prismjs
     typeof Prism === 'object' && Prism.highlightAll()
 

layout/includes/third-party/search/algolia.pug

@@ -1,13 +1,16 @@
 #algolia-search
   .search-dialog
-    #algolia-search-title.search-dialog__title Algolia
-    #algolia-input-panel
+    nav.search-nav
+      span.search-dialog-title= 'Algolia'
+      button.search-close-button
+        i.fas.fa-times
+
+    .search-wrap
       #algolia-search-input
-    hr
-    #algolia-search-results
-      #algolia-hits
-      #algolia-pagination
-      #algolia-stats
-    span.search-close-button
-      i.fas.fa-times
+      hr
+      #algolia-search-results
+        #algolia-hits
+        #algolia-pagination
+        #algolia-stats
+  
   #search-mask

layout/includes/third-party/search/local-search.pug

@@ -1,12 +1,20 @@
 #local-search
   .search-dialog
-    #local-search-title.search-dialog__title=_p("local_search.label")
-    #local-input-panel
+    nav.search-nav
+      span.search-dialog-title=_p("search.local_search.label")
+      span#loading-status
+      button.search-close-button
+        i.fas.fa-times
+
+    #loading-database.is-center
+      i.fas.fa-spinner.fa-pulse
+      span= '  ' + _p("search.load_data")
+
+    .search-wrap
       #local-search-input
         .local-search-box
-          input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input
-    hr
-    #local-search-results
-    span.search-close-button
-      i.fas.fa-times
+          input(placeholder=_p("search.local_search.input_placeholder") type="text").local-search-box--input
+      hr
+      #local-search-results
+
   #search-mask

layout/includes/third-party/subtitle.pug

@@ -1,29 +1,31 @@
-- let source = theme.subtitle.source
+- const { effect,loop,source,sub } = theme.subtitle
+- let subContent = sub || new Array()
 
 case source
   when 1
     script.
       function subtitleType () {
-        fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json')
+        fetch('https://v1.hitokoto.cn')
           .then(response => response.json())
           .then(data => {
-            if (!{theme.subtitle.effect}) {
-              var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-              var both = sub.unshift(data.text)
-              typed = new Typed('#subtitle', {
+            if (!{effect}) {
+              const from = '出自 ' + data.from
+              const sub = !{JSON.stringify(subContent)}
+              sub.unshift(data.hitokoto, from)
+              window.typed = new Typed('#subtitle', {
                 strings: sub,
                 startDelay: 300,
                 typeSpeed: 150,
-                loop: !{theme.subtitle.loop},
+                loop: !{loop},
                 backSpeed: 50,
               })
             } else {
-              document.getElementById('subtitle').innerHTML = data.text
+              document.getElementById('subtitle').innerHTML = data.hitokoto
             }
           })
       }
 
-      if (!{theme.subtitle.effect}) {
+      if (!{effect}) {
         if (typeof Typed === 'function') {
           subtitleType()
         } else {
@@ -36,27 +38,26 @@ case source
   when 2
     script.
       function subtitleType () {
-        fetch('https://v1.hitokoto.cn')
-          .then(response => response.json())
-          .then(data => {
-            if (!{theme.subtitle.effect}) {
-              var from = '出自 ' + data.from
-              var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-              var both = sub.unshift(data.hitokoto, from)
-              var typed = new Typed('#subtitle', {
-                strings: sub,
-                startDelay: 300,
-                typeSpeed: 150,
-                loop: !{theme.subtitle.loop},
-                backSpeed: 50,
-              })
-            } else {
-              document.getElementById('subtitle').innerHTML = data.hitokoto
-            }
-          })
+        getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
+          const con = str[0]
+          if (!{effect}) {
+            const from = '出自 ' + str[1]
+            const sub = !{JSON.stringify(subContent)}
+            sub.unshift(con, from)
+            window.typed = new Typed('#subtitle', {
+              strings: sub,
+              startDelay: 300,
+              typeSpeed: 150,
+              loop: !{loop},
+              backSpeed: 50,
+            })
+          } else {
+            document.getElementById('subtitle').innerHTML = con
+          }
+        })
       }
 
-      if (!{theme.subtitle.effect}) {
+      if (!{effect}) {
         if (typeof Typed === 'function') {
           subtitleType()
         } else {
@@ -67,51 +68,19 @@ case source
       }
 
   when 3
-    script.
-      function subtitleType () {
-        getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
-          var con = str[0]
-          if (!{theme.subtitle.effect}) {
-            var from = '出自 ' + str[1]
-            var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-            var both = sub.unshift(con, from)
-            var typed = new Typed('#subtitle', {
-              strings: sub,
-              startDelay: 300,
-              typeSpeed: 150,
-              loop: !{theme.subtitle.loop},
-              backSpeed: 50,
-            })
-          } else {
-            document.getElementById('subtitle').innerHTML = con
-          }
-        })
-      }
-
-      if (!{theme.subtitle.effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.CDN.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
-
-  when 4
     script.
       function subtitleType () {
         getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
-          jinrishici.load(function (result) {
-            if (!{theme.subtitle.effect}) {
-              var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-              var content = result.data.content
-              var both = sub.unshift(content)
-              var typed = new Typed('#subtitle', {
+          jinrishici.load(result =>{
+            if (!{effect}) {
+              const sub = !{JSON.stringify(subContent)}
+              const content = result.data.content
+              sub.unshift(content)
+              window.typed = new Typed('#subtitle', {
                 strings: sub,
                 startDelay: 300,
                 typeSpeed: 150,
-                loop: !{theme.subtitle.loop},
+                loop: !{loop},
                 backSpeed: 50,
               })
             } else {
@@ -121,7 +90,7 @@ case source
         })
       }
 
-      if (!{theme.subtitle.effect}) {
+      if (!{effect}) {
         if (typeof Typed === 'function') {
           subtitleType()
         } else {
@@ -132,22 +101,23 @@ case source
       }
 
   default
+    - subContent = subContent.length ? subContent : new Array(config.subtitle)
     script.
       function subtitleType () {
-        if (!{theme.subtitle.effect}) { 
-          var typed = new Typed("#subtitle", {
-            strings: "!{theme.subtitle.sub}".split(","),
+        if (!{effect}) { 
+          window.typed = new Typed("#subtitle", {
+            strings: !{JSON.stringify(subContent)},
             startDelay: 300,
             typeSpeed: 150,
-            loop: !{theme.subtitle.loop},
+            loop: !{loop},
             backSpeed: 50
           })
         } else {
-          document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
+          document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
         }
       }
 
-      if (!{theme.subtitle.effect}) {
+      if (!{effect}) {
         if (typeof Typed === 'function') {
           subtitleType()
         } else {

layout/includes/widget/card_author.pug

@@ -6,27 +6,24 @@ if theme.aside.card_author.enable
       .author-info__name= config.author
       .author-info__description!= theme.aside.card_author.description || config.description
 
-    .card-info-data
-      if 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
+    .card-info-data.is-center
+      .card-info-data-item
+        a(href=url_for(config.archive_dir) + '/')
+          .headline= _p('aside.articles') 
+          .length-num= site.posts.length
 
-      if site.tags.length
-        .card-info-data-item.is-center
-          a(href=url_for(config.tag_dir) + '/')
-            .headline= _p('aside.tags')
-            .length-num= site.tags.length
+      .card-info-data-item
+        a(href=url_for(config.tag_dir) + '/')
+          .headline= _p('aside.tags')
+          .length-num= site.tags.length
 
-      if site.categories.length
-        .card-info-data-item.is-center
-          a(href=url_for(config.category_dir) + '/')
-            .headline= _p('aside.categories') 
-            .length-num= site.categories.length
+      .card-info-data-item
+        a(href=url_for(config.category_dir) + '/')
+          .headline= _p('aside.categories') 
+          .length-num= site.categories.length
 
     if theme.aside.card_author.button.enable
-      a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
+      a#card-info-btn(href=theme.aside.card_author.button.link)
         i(class=theme.aside.card_author.button.icon)
         span=theme.aside.card_author.button.text
   

layout/includes/widget/card_newest_comment.pug

@@ -1,4 +1,4 @@
-if theme.newest_comments.enable
+if theme.newest_comments.enable && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0])
   .card-widget#card-newest-comments
     .item-headline
       i.fas.fa-comment-dots

layout/includes/widget/card_post_toc.pug

@@ -1,12 +1,15 @@
 - let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
+- let tocExpand = page.toc_expand !== undefined ? page.toc_expand : theme.toc.expand
+- let tocExpandClass = tocExpand ? 'is-expand' : ''
 
 #card-toc.card-widget
   .item-headline
     i.fas.fa-stream
     span= _p('aside.card_toc')
+    span.toc-percentage
 
   if (page.encrypt == true)
-    .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
+    .toc-content.toc-div-class(class=tocExpandClass style="display:none")!=toc(page.origin, {list_number: tocNumber})
   else 
-    .toc-content!=toc(page.content, {list_number: tocNumber})
+    .toc-content(class=tocExpandClass)!=toc(page.content, {list_number: tocNumber})
       

layout/includes/widget/index.pug

@@ -1,13 +1,15 @@
 #aside-content.aside-content
   //- post
   if is_post()
-    if showToc && theme.toc.style_simple
+    - const tocStyle = page.toc_style_simple
+    - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
+    if showToc && tocStyleVal
       .sticky_layout
         include ./card_post_toc.pug
     else
       !=partial('includes/widget/card_author', {}, {cache: true})
       !=partial('includes/widget/card_announcement', {}, {cache: true})
-      !=partial('includes/widget/card_top_self', {}, {cache: true})      
+      !=partial('includes/widget/card_top_self', {}, {cache: true})
       .sticky_layout
         if showToc
           include ./card_post_toc.pug
@@ -20,6 +22,8 @@
     !=partial('includes/widget/card_top_self', {}, {cache: true})      
 
     .sticky_layout
+      if showToc
+        include ./card_post_toc.pug
       !=partial('includes/widget/card_recent_post', {}, {cache: true})
       !=partial('includes/widget/card_ad', {}, {cache: true})
       !=partial('includes/widget/card_newest_comment', {}, {cache: true})

layout/page.pug

@@ -2,6 +2,9 @@ extends includes/layout.pug
 
 block content
   #page
+    if top_img === false
+      h1.page-title= page.title
+
     case page.type
       when 'tags'
         include includes/page/tags.pug

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.8.2",
+  "version": "4.0.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -20,13 +20,13 @@
   },
   "bugs": {
     "url": "https://github.com/jerryc127/hexo-theme-butterfly/issues",
-    "email": "btf@immyw.com"
+    "email": "my@crazywong.com"
   },
   "dependencies": {
     "hexo-renderer-stylus": "^2.0.1",
     "hexo-renderer-pug": "^2.0.0"
   },
   "homepage": "https://butterfly.js.org/",
-  "author": "Jerry <i@immyw.com>",
+  "author": "Jerry <my@crazywong.com>",
   "license": "Apache-2.0"
 }

scripts/events/config.js

@@ -0,0 +1,128 @@
+/**
+ * Butterfly
+ * 1. Merge CDN
+ * 2. Capitalize the first letter of comment name
+ */
+
+'use strict'
+
+hexo.extend.filter.register('before_generate', () => {
+  const themeConfig = hexo.theme.config
+
+  /**
+   * Merge CDN
+   */
+
+  const defaultCDN = {
+    main_css: '/css/index.css',
+    main: '/js/main.js',
+    utils: '/js/utils.js',
+
+    // pjax
+    pjax: 'https://cdn.jsdelivr.net/npm/pjax/pjax.min.js',
+
+    // comments
+    gitalk: 'https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js',
+    gitalk_css: 'https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css',
+    blueimp_md5: 'https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js',
+    valine: 'https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js',
+    disqusjs: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js',
+    disqusjs_css: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css',
+    utterances: 'https://utteranc.es/client.js',
+    twikoo: 'https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js',
+    waline: 'https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js',
+    giscus: 'https://giscus.app/client.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
+    local_search: '/js/search/local-search.js',
+    algolia_js: '/js/search/algolia.js',
+    algolia_search_v4: 'https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js',
+    instantsearch_v4: 'https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js',
+
+    // math
+    mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
+    katex: 'https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css',
+    katex_copytex: 'https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.min.js',
+    katex_copytex_css: 'https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.css',
+    mermaid: 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js',
+
+    // count
+    busuanzi: '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js',
+
+    // background effect
+    canvas_ribbon: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js',
+    canvas_fluttering_ribbon: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js',
+    canvas_nest: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js',
+
+    lazyload: 'https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js',
+    instantpage: 'https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js',
+    typed: 'https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js',
+    pangu: 'https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js',
+
+    // photo
+    fancybox_css_v4: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css',
+    fancybox_v4: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js',
+    medium_zoom: 'https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js',
+
+    // snackbar
+    snackbar_css: 'https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css',
+    snackbar: 'https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js',
+
+    // effect
+    activate_power_mode: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js',
+    fireworks: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js',
+    click_heart: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js',
+    ClickShowText: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js',
+
+    // fontawesome
+    fontawesome: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css',
+
+    // Conversion between Traditional and Simplified Chinese
+    translate: '/js/tw_cn.js',
+
+    // flickr-justified-gallery
+    flickr_justified_gallery_js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.js',
+    flickr_justified_gallery_css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.css',
+
+    // aplayer
+    aplayer_css: 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css',
+    aplayer_js: 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js',
+    meting_js: 'https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js',
+
+    // Prism.js
+    prismjs_js: 'https://cdn.jsdelivr.net/npm/prismjs/prism.min.js',
+    prismjs_lineNumber_js: 'https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js',
+    prismjs_autoloader: 'https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js'
+  }
+
+  // delete null value
+  const deleteNullValue = obj => {
+    for (const i in obj) {
+      obj[i] === null && delete obj[i]
+    }
+    return obj
+  }
+
+  themeConfig.CDN = Object.assign(defaultCDN, deleteNullValue(themeConfig.CDN))
+
+  /**
+   * Capitalize the first letter of comment name
+   */
+
+  let { use } = themeConfig.comments
+
+  if (!use) return
+
+  if (typeof use === 'string') {
+    use = use.split(',')
+  }
+
+  const newArray = use.map(item => item.toLowerCase().replace(/^\S/, s => s.toUpperCase()))
+
+  themeConfig.comments.use = newArray
+})

scripts/events/init.js

@@ -18,10 +18,4 @@ hexo.extend.filter.register('before_generate', () => {
       process.exit(-1)
     }
   }
-
-  // let stylus to get the hexo highlight config
-  const themeConfig = hexo.theme.config
-  const hexoConfig = hexo.config
-  themeConfig.highlight_settings = hexoConfig.highlight
-  themeConfig.prismjs_settings = hexoConfig.prismjs
 })

scripts/events/stylus.js

@@ -0,0 +1,15 @@
+/**
+ * stylus
+ */
+
+'use strict'
+
+hexo.extend.filter.register('stylus:renderer', function (style) {
+  const { highlight, prismjs } = hexo.config
+  style
+    .define('$highlight_enable', highlight && highlight.enable)
+    .define('$highlight_line_number', highlight && highlight.line_number)
+    .define('$prismjs_enable', prismjs && prismjs.enable)
+    .define('$prismjs_line_number', prismjs && prismjs.line_number)
+    // .import(this.source_dir.replace(/\\/g, '/') + '_data/css/*')
+})

scripts/filters/post_lazyload.js

@@ -9,7 +9,7 @@
 const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function lazyload (htmlContent) {
-  const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
+  const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
   return htmlContent.replace(/(<img.*? src=)/ig, `$1 "${bg}" data-lazy-src=`)
 }
 

scripts/filters/random_cover.js

@@ -39,7 +39,7 @@ function randomCover () {
       return cover
     }
   } else {
-    cover = theme.default_top_img || 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg'
+    cover = theme.default_top_img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
     return cover
   }
 }

scripts/helpers/inject_head_js.js

@@ -6,7 +6,7 @@
 'use strict'
 
 hexo.extend.helper.register('inject_head_js', function () {
-  const { darkmode, aside, change_font_size, index_img, disable_top_img, pjax} = this.theme
+  const { darkmode, aside } = this.theme
 
   const localStore = `
     win.saveToLocal = {
@@ -131,31 +131,14 @@ hexo.extend.helper.register('inject_head_js', function () {
     `
   }
 
-  let changFontAside = ''
-  if (change_font_size) {
-    changFontAside = `
-    const fontSizeVal = saveToLocal.get('global-font-size')
-    if (fontSizeVal !== undefined) {
-      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
-    }
-    `
-  }
-
-  let detectApple = ''
-  if (!disable_top_img || index_img !== false) {
-    detectApple = `
+  const detectApple = `
     const detectApple = () => {
-      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
+      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
         document.documentElement.classList.add('apple')
       }
     }
     detectApple()
     `
 
-    if (pjax.enable) {
-      detectApple += 'document.addEventListener(\'pjax:complete\', detectApple)'
-    }
-  }
-
-  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + changFontAside + detectApple}})(window)</script>`
+  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + detectApple}})(window)</script>`
 })

scripts/helpers/related_post.js

@@ -46,11 +46,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
 
   if (relatedPosts.length > 0) {
     result += '<div class="relatedPosts">'
-    result +=
-      '<div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>' +
-      ' ' +
-      headlineLang +
-      '</span></div>'
+    result += `<div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>${headlineLang}</span></div>`
     result += '<div class="relatedPosts-list">'
 
     for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
@@ -58,32 +54,14 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
         relatedPosts[i].cover === false
           ? relatedPosts[i].randomcover
           : relatedPosts[i].cover
-      result +=
-        '<div><a href="' +
-        hexoConfig.root +
-        relatedPosts[i].path +
-        '" title="' +
-        relatedPosts[i].title +
-        '">'
-      result +=
-        '<img class="cover" src="' +
-        this.url_for(cover) +
-        '" alt="cover">'
+      result += `<div><a href="${this.url_for(relatedPosts[i].path)}" title="${relatedPosts[i].title}">`
+      result += `<img class="cover" src="${this.url_for(cover)}" alt="cover">`
       if (dateType === 'created') {
-        result +=
-          '<div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i>' +
-          ' ' +
-          this.date(relatedPosts[i].created, hexoConfig.date_format) +
-          '</div>'
+        result += `<div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> ${this.date(relatedPosts[i].created, hexoConfig.date_format)}</div>`
       } else {
-        result +=
-          '<div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i>' +
-          ' ' +
-          this.date(relatedPosts[i].updated, hexoConfig.date_format) +
-          '</div>'
+        result += `<div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> ${this.date(relatedPosts[i].updated, hexoConfig.date_format)}</div>`
       }
-      result +=
-        '<div class="title">' + relatedPosts[i].title + '</div>'
+      result += `<div class="title">${relatedPosts[i].title}</div>`
       result += '</div></a></div>'
     }
 

scripts/tag/button.js

@@ -21,7 +21,7 @@ function btn (args) {
   icon = icon.trim()
   option = option.trim()
 
-  return `<a class="btn-beautify button--animated ${option}" href="${urlFor(url)}" 
+  return `<a class="btn-beautify ${option}" href="${urlFor(url)}" 
   title="${text}">${icon.length ? `<i class="${icon}"></i>` : ''}${text.length ? `<span>${text}</span>` : ''}</a>`
 }
 

scripts/tag/gallery.js

@@ -8,7 +8,7 @@
 const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function gallery (args, content) {
-  return `<div class="justified-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
+  return `<div class="fj-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
           </div>`
 }
 
@@ -20,7 +20,7 @@ function galleryGroup (args) {
 
   return `
   <figure class="gallery-group">
-  <img class="gallery-group-img" src='${img}' alt="Group Image Gallery">
+  <img class="gallery-group-img no-lightbox" src='${img}' alt="Group Image Gallery">
   <figcaption>
   <div class="gallery-group-name">${name}</div>
   <p>${desrc}</p>

scripts/tag/hide.js

@@ -28,7 +28,7 @@ function hideInline (args) {
   if (color) group += `color: ${color}`
   group += '"'
 
-  return `<span class="hide-inline"><button type="button" class="hide-button button--animated" ${group}>${display}
+  return `<span class="hide-inline"><button type="button" class="hide-button" ${group}>${display}
   </button><span class="hide-content">${content}</span></span>`
 }
 
@@ -43,7 +43,7 @@ function hideBlock (args, content) {
   if (color) group += `color: ${color}`
   group += '"'
 
-  return `<div class="hide-block"><button type="button" class="hide-button button--animated" ${group}>${display}
+  return `<div class="hide-block"><button type="button" class="hide-button" ${group}>${display}
     </button><div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></div>`
 }
 

scripts/tag/mermaid.js

@@ -9,7 +9,9 @@
 const { escapeHTML } = require('hexo-util')
 
 function mermaid (args, content) {
-  return `<div class="mermaid">${escapeHTML(content)}</div>`
+  return `<div class="mermaid-wrap"><pre class="mermaid-src" hidden>
+  ${escapeHTML(content)}
+  </pre></div>`
 }
 
 hexo.extend.tag.register('mermaid', mermaid, { ends: true })

scripts/tag/timeline.js

@@ -0,0 +1,41 @@
+/**
+ * timeline
+ * by Jerry
+ */
+
+'use strict'
+
+function timeLineFn (args, content) {
+  const tlBlock = /<!--\s*timeline (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtimeline\s*-->/g
+
+  let result = ''
+  let color = ''
+  if (args.length) {
+    args = args.join(' ').split(',')
+    color = args[1]
+    const mdContent = hexo.render.renderSync({ text: args[0], engine: 'markdown' })
+    result += `<div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'>${mdContent}</div></div></div>`
+  }
+
+  const matches = []
+  let match
+
+  while ((match = tlBlock.exec(content)) !== null) {
+    matches.push(match[1])
+    matches.push(match[2])
+  }
+
+  for (let i = 0; i < matches.length; i += 2) {
+    const tlChildTitle = hexo.render.renderSync({ text: matches[i], engine: 'markdown' })
+    const tlChildContent = hexo.render.renderSync({ text: matches[i + 1], engine: 'markdown' })
+
+    const tlTitleHtml = `<div class='timeline-item-title'><div class='item-circle'>${tlChildTitle}</div></div>`
+    const tlContentHtml = `<div class='timeline-item-content'>${tlChildContent}</div>`
+
+    result += `<div class='timeline-item'>${tlTitleHtml + tlContentHtml}</div>`
+  }
+
+  return `<div class="timeline ${color}">${result}</div>`
+}
+
+hexo.extend.tag.register('timeline', timeLineFn, { ends: true })

source/css/_global/function.styl

@@ -17,6 +17,63 @@
   text-rendering: auto
   -webkit-font-smoothing: antialiased
 
+// card hover
+.cardHover
+  border-radius: 8px
+  background: var(--card-bg)
+  box-shadow: var(--card-box-shadow)
+  transition: all .3s
+
+  &:hover
+    box-shadow: var(--card-hover-box-shadow)
+
+.imgHover
+  width: 100%
+  height: 100%
+  transition: filter 375ms ease-in .2s, transform .6s
+  object-fit: cover
+
+  &:hover
+    transform: scale(1.1)
+
+.postImgHover
+  &:hover
+    img
+      opacity: .8
+      transform: scale(1.1)
+
+  img
+    position: absolute
+    width: 100%
+    height: 100%
+    opacity: .4
+    transition: all .6s, filter 375ms ease-in .2s
+    object-fit: cover
+
+.list-beauty
+  list-style: none
+
+  li
+    position: relative
+    padding 0.12em 0.4em 0.12em 1.4em
+
+    &:hover
+      &:before
+        border-color: var(--pseudo-hover)
+
+    &:before
+      position: absolute
+      top: .67em
+      left: 0
+      width: w = .43em
+      height: h = w
+      border: .5 * w solid $light-blue
+      border-radius: w
+      background: transparent
+      content: ''
+      cursor: pointer
+      transition: all .3s ease-out
+
 maxWidth600()
   @media screen and (max-width: 600px)
     {block}
@@ -60,7 +117,7 @@ if hexo-config('enter_transitions')
 
   #site-title,
   #site-subtitle
-    animation: titlescale 1s
+    animation: titleScale 1s
 
   #nav.show
     animation: headerNoOpacity 1s
@@ -123,14 +180,14 @@ if hexo-config('avatar.effect') == true
 
 @keyframes bottom-top
   0%
-    opacity: 0
     margin-top: 50px
+    opacity: 0
 
   100%
-    opacity: 1
     margin-top: 0
+    opacity: 1
 
-@keyframes titlescale
+@keyframes titleScale
   0%
     opacity: 0
     transform: scale(.7)
@@ -207,4 +264,4 @@ if hexo-config('avatar.effect') == true
     transform: translateX(200px)
 
   100%
-    transform: translateX(0)
+    transform: translateX(0)

source/css/_global/index.styl

@@ -21,18 +21,18 @@
   --btn-bg: $button-bg
   --text-bg-hover: rgba($text-bg-hover, .7)
   --light-grey: $light-grey
+  --dark-grey: $dark-grey
   --white: $white
   --text-highlight-color: $text-highlight-color
   --blockquote-color: $blockquote-color
   --blockquote-bg: $blockquote-background-color
   --reward-pop: $reward-pop-up-bg
   --toc-link-color: $toc-link-color
-  --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .06)
-  --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .15)
-
-html
-  height: 100%
-  font-size: 20px
+  --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
+  --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
+  --pseudo-hover: $pseudo-hover
+  --headline-presudo: #a0a0a0
+  --scrollbar-color: $scrollbar-color
 
 body
   position: relative
@@ -47,16 +47,22 @@ body
   if !hexo-config('copy.enable')
     user-select: none
 
+// scrollbar - chrome/safari
 *::-webkit-scrollbar
   width: 8px
   height: 8px
 
 *::-webkit-scrollbar-thumb
-  background: var(--btn-bg)
+  background: var(--scrollbar-color)
 
 *::-webkit-scrollbar-track
   background-color: transparent
 
+// scrollbar - firefox
+*
+  scrollbar-width: thin
+  scrollbar-color: var(--scrollbar-color) transparent
+
 input::placeholder
   color: var(--font-color)
 
@@ -79,7 +85,7 @@ h4,
 h5,
 h6
   position: relative
-  margin: 1rem 0 .7rem
+  margin: 20px 0 14px
   color: var(--text-highlight-color)
   font-weight: bold
 
@@ -91,7 +97,7 @@ h6
 
 hr
   position: relative
-  margin: 2rem auto
+  margin: 40px auto
   border: 2px dashed var(--hr-border)
 
   if hexo-config('hr_icon.enable')
@@ -115,7 +121,7 @@ hr
 
 .table-wrap
   overflow-x: scroll
-  margin: 0 0 1rem
+  margin: 0 0 20px
 
 table
   display: table
@@ -129,7 +135,7 @@ table
 
   th,
   td
-    padding: .3rem .6rem
+    padding: 6px 12px
     border: 1px solid var(--light-grey)
     vertical-align: middle
 
@@ -143,6 +149,7 @@ button
   border: none
   background: none
   cursor: pointer
+  touch-action: manipulation
 
 a
   color: $a-link-color
@@ -175,33 +182,7 @@ if $site-name-font
 .pull-right
   float: right
 
-.button--animated
-  position: relative
-  z-index: 1
-  transition: color 1s
-
-  &:before
-    position: absolute
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-    z-index: -1
-    background: var(--btn-hover-color)
-    content: ''
-    transition: transform .5s ease-out
-    transform: scaleX(0)
-    transform-origin: 0 50%
-
-  &:hover
-    &:before
-      transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
-      transform: scaleX(1)
-
 img
-  max-width: 100%
-  transition: all .2s
-
   &[src=''],
   &:not([src])
     opacity: 0
@@ -210,14 +191,30 @@ img
 if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
   img
     &[data-lazy-src]:not(.loaded)
-      filter: blur(10px) brightness(1)
+      filter: blur(8px) brightness(1)
 
     &[data-lazy-src].error
       filter: none
 
 .img-alt
-  margin: -.5rem 0 .5rem
+  margin: -10px 0 10px
   color: #858585
 
   &:hover
-    text-decoration: none !important
+    text-decoration: none !important
+
+blockquote
+  margin: 0 0 20px
+  padding: 12px 15px
+  border-left: 3px solid $blockquote-padding-color
+  background-color: var(--blockquote-bg)
+  color: var(--blockquote-color)
+
+  footer
+    cite
+      &:before
+        padding: 0 5px
+        content: '—'
+
+  & > :last-child
+    margin-bottom: 0 !important

source/css/_highlight/highlight.styl

@@ -1,7 +1,5 @@
 $highlight_theme = hexo-config('highlight_theme')
-$highlighEnable = hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
-$prismjsEnable = hexo-config('prismjs_settings') && hexo-config('prismjs_settings.enable')
-wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_word_wrap')
+wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap')
 
 @require 'theme'
 
@@ -15,15 +13,15 @@ wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_w
   --hlscrollbar-bg: $highlight-scrollbar
   --hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
 
-if $highlighEnable
+if $highlight_enable
   @require 'highlight/index'
 
-if $prismjsEnable
+if $prismjs_enable
   @require 'prismjs/index'
 
 $code-block
   overflow: auto
-  margin: 0 0 1rem
+  margin: 0 0 20px
   padding: 0
   background: var(--hl-bg)
   color: var(--hl-color)
@@ -33,28 +31,6 @@ $code-block
     counter-reset: line
     white-space: pre-wrap
 
-blockquote
-  margin: 0 0 1rem
-  padding: .1rem .8rem
-  border-left: .2rem solid $blockquote-padding-color
-  background-color: var(--blockquote-bg)
-  color: var(--blockquote-color)
-
-  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,
   code
@@ -62,7 +38,7 @@ blockquote
     font-family: $code-font-family !important
 
   code
-    padding: .1rem .2rem
+    padding: 2px 4px
     background: $code-background
     color: $code-foreground
 
@@ -87,7 +63,7 @@ blockquote
 
     figcaption,
     .caption
-      padding: .3rem 0 .1rem .7rem
+      padding: 6px 0 2px 14px
       font-size: $code-font-size
       line-height: 1em
 
@@ -104,7 +80,7 @@ blockquote
     display: flex
     align-items: center
     overflow: hidden
-    min-height: 1.2rem
+    min-height: 24px
     height: 2.15em
     background: var(--hltools-bg)
     color: var(--hltools-color)
@@ -115,12 +91,12 @@ blockquote
 
     .expand
       position: absolute
-      padding: .4rem .7rem
+      padding: .57em .7em
       cursor: pointer
       transition: transform .3s
 
       & + .code-lang
-        left: 1.7rem
+        left: 1.6em
 
       &.closed
         transition: all .3s
@@ -128,7 +104,7 @@ blockquote
 
     .code-lang
       position: absolute
-      left: .7rem
+      left: 14px
       text-transform: uppercase
       font-weight: bold
       font-size: 1.15em
@@ -136,13 +112,13 @@ blockquote
 
     .copy-notice
       position: absolute
-      right: 1.7rem
+      right: 2.1em
       opacity: 0
       transition: opacity .4s
 
     .copy-button
       position: absolute
-      right: .7rem
+      right: 14px
       cursor: pointer
       transition: color .2s
 
@@ -160,7 +136,7 @@ blockquote
 
   if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
     figure.highlight
-      margin: 0 0 1.2rem
+      margin: 0 0 24px
       border-radius: 7px
       box-shadow: 0 5px 10px 0 $highlight-mac-border
       -webkit-transform: translateZ(0)
@@ -168,7 +144,7 @@ blockquote
       .highlight-tools
         &:after
           position: absolute
-          left: .7rem
+          left: 14px
           width: 12px
           height: 12px
           border-radius: 50%
@@ -184,13 +160,13 @@ blockquote
             transform: rotate(90deg) !important
 
           & ~ .copy-notice
-            right: 2.8rem
+            right: 3.3em
 
           & ~ .copy-button
-            right: 1.8rem
+            right: 2.1em
 
         .code-lang
-          left: 3.8rem !important
+          left: 75px
 
   if hexo-config('highlight_height_limit')
     .code-expand-btn
@@ -204,12 +180,17 @@ blockquote
       cursor: pointer
 
       i
-        padding: .3rem 0
+        padding: 6px 0
         color: var(--hlnumber-color)
         animation: code-expand-key 1.2s infinite
 
       &.expand-done
-        display: none !important
+        & > i
+          transform: rotate(180deg)
+
+        & + table,
+        & + pre
+          margin-bottom: 1.8em
 
       &:not(.expand-done)
         & ~ table,

source/css/_highlight/highlight/diff.styl

@@ -1,5 +1,7 @@
 figure.highlight
   table
+    scrollbar-color: var(--hlscrollbar-bg) transparent
+
     &::-webkit-scrollbar-thumb
       background: var(--hlscrollbar-bg)
 

source/css/_highlight/highlight/index.styl

@@ -7,8 +7,8 @@ if $highlight_theme != false
       if wordWrap
         &:before
           display: inline-block
-          padding: 0 .3rem 0 0
-          min-width: 1.6rem
+          padding: 0 6px 0 0
+          min-width: 30px
           color: var(--hlnumber-color)
           content: counter(line)
           counter-increment: line
@@ -27,13 +27,13 @@ if $highlight_theme != false
         border: none
 
     .gutter pre
-      padding-right: .5rem
-      padding-left: .5rem
+      padding-right: 10px
+      padding-left: 10px
       background-color: var(--hlnumber-bg)
       color: var(--hlnumber-color)
       text-align: right
 
     .code pre
-      padding-right: .5rem
-      padding-left: .5rem
+      padding-right: 10px
+      padding-left: 10px
       width: 100%

source/css/_highlight/prismjs/index.styl

@@ -1,4 +1,4 @@
-if hexo-fonfig('prismjs_settings.line_number')
+if $prismjs_line_number
   @require 'line-number'
 
 if $highlight_theme != false
@@ -6,6 +6,8 @@ if $highlight_theme != false
 
 #article-container
   pre[class*='language-']
+    scrollbar-color: var(--hlscrollbar-bg) transparent
+
     &::-webkit-scrollbar-thumb
       background: var(--hlscrollbar-bg)
 
@@ -14,7 +16,7 @@ if $highlight_theme != false
 
     .caption
       margin-left: -3.8em
-      padding: .2rem .8rem !important
+      padding: 4px 16px !important
 
       a
         padding: 0 !important

source/css/_highlight/theme.styl

@@ -11,9 +11,9 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
     color: alpha($highlight-foreground, .8),
     bg-color: darken($highlight-background, 2)
   }
-  $highlight-scrollbar = darken($highlight-background, 6)
+  $highlight-scrollbar = lighten($highlight-background, 8)
 
-  if $highlighEnable
+  if $highlight_enable
     $highlight-comment = #969896
     $highlight-red = #FF5370
     $highlight-orange = #F78C6C
@@ -37,9 +37,9 @@ if $highlight_theme == 'pale night'
     color: $highlight-foreground,
     bg-color: darken($highlight-background, 2)
   }
-  $highlight-scrollbar = darken($highlight-background, 6)
+  $highlight-scrollbar = lighten($highlight-background, 8)
 
-  if $highlighEnable
+  if $highlight_enable
     $highlight-comment = #676E95
     $highlight-red = #FF5370
     $highlight-orange = #F78C6C
@@ -63,9 +63,9 @@ if $highlight_theme == 'ocean'
     color: $highlight-foreground,
     bg-color: darken($highlight-background, 2)
   }
-  $highlight-scrollbar = darken($highlight-background, 5)
+  $highlight-scrollbar = lighten($highlight-background, 8)
 
-  if $highlighEnable
+  if $highlight_enable
     $highlight-comment = rgba(101, 115, 126, .8)
     $highlight-red = #FF5370
     $highlight-orange = #F78C6C
@@ -92,7 +92,7 @@ if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
   }
   $highlight-scrollbar = darken($highlight-background, 8)
 
-  if $highlighEnable
+  if $highlight_enable
     $highlight-comment = rgba(149, 165, 166, .8)
     $highlight-red = #E53935
     $highlight-orange = #F76D47

source/css/_layout/aside.styl

@@ -1,5 +1,5 @@
 #aside-content
-  width: 25%
+  width: 26%
 
   +minWidth900()
     if hexo-config('aside.position') == 'right'
@@ -14,20 +14,14 @@
     margin-top: 0
 
     +maxWidth900()
-      margin-top: 1rem
+      margin-top: 20px
 
   .card-widget
+    @extend .cardHover
     position: relative
     overflow: hidden
-    margin-top: 1rem
-    padding: 1rem 1.2rem
-    border-radius: 8px
-    background: var(--card-bg)
-    box-shadow: var(--card-box-shadow)
-    transition: box-shadow .3s
-
-    &:hover
-      box-shadow: var(--card-hover-box-shadow)
+    margin-top: 20px
+    padding: 20px 24px
 
     if hexo-config('aside.mobile') == false
       +maxWidth768()
@@ -41,11 +35,11 @@
         font-size: 1.57em
 
       &__description
-        margin-top: -.3rem
+        margin-top: -.42em
 
     .card-info-data
       display: table
-      margin: .7rem 0 .2rem
+      margin: 14px 0 4px
       width: 100%
       table-layout: fixed
 
@@ -59,18 +53,17 @@
             font-size: 1em
 
           .length-num
-            margin-top: -.3rem
+            margin-top: -.42em
             color: var(--text-highlight-color)
             font-size: 1.4em
 
     .card-info-social-icons
-      margin: .3rem 0 -.3rem
+      margin: 6px 0 -6px
 
       .social-icon
-        margin: 0 .5rem
+        margin: 0 10px
         color: var(--font-color)
         font-size: 1.4em
-        cursor: pointer
 
       i
         transition: all .3s
@@ -80,21 +73,24 @@
 
     #card-info-btn
       display: block
-      margin-top: .7rem
+      margin-top: 14px
       background-color: var(--btn-bg)
       color: var(--btn-color)
       text-align: center
       line-height: 2.4
 
+      &:hover
+        background-color: var(--btn-hover-color)
+
       span
-        padding-left: .5rem
+        padding-left: 10px
 
   .item-headline
-    padding-bottom: .3rem
+    padding-bottom: 6px
     font-size: 1.2em
 
     span
-      margin-left: .3rem
+      margin-left: 6px
 
   .sticky_layout
     +minWidth900()
@@ -106,7 +102,7 @@
   .card-tag-cloud
     a
       display: inline-block
-      padding: 0 .2rem
+      padding: 0 4px
 
       &:hover
         color: $text-hover !important
@@ -114,13 +110,13 @@
   .aside-list
     & > span
       display: block
-      margin-bottom: .5rem
+      margin-bottom: 10px
       text-align: center
 
     & > .aside-list-item
       display: flex
       align-items: center
-      padding: .3rem 0
+      padding: 6px 0
 
       &:first-child
         padding-top: 0
@@ -137,13 +133,7 @@
         height: w
 
         & > img
-          width: 100%
-          height: 100%
-          transition: all .6s
-          object-fit: cover
-
-          &:hover
-            transform: scale(1.1)
+          @extend .imgHover
 
       .content
         flex: 1
@@ -183,32 +173,26 @@
   .card-archives ul.card-archive-list > .card-archive-list-item,
   .card-categories ul.card-category-list > .card-category-list-item
     a
-      display: inline-block
-      padding: .15rem .5rem
-      width: 100%
+      display: flex
+      flex-direction: row
+      padding: 3px 10px
       color: var(--font-color)
       transition: all .4s
 
       &:hover
-        padding: .15rem .85rem
+        padding: 3px 17px
         background-color: var(--text-bg-hover)
 
       span
         @extend .limit-one-line
-        display: inline-block
-        vertical-align: bottom
 
         &:first-child
-          width: 80%
-
-        &:last-child
-          width: 20%
-          text-align: right
+          flex: 1
 
   .card-categories
     .card-category-list
       &.child
-        padding: 0 0 0 .8rem
+        padding: 0 0 0 16px
 
       > .parent
         > a
@@ -222,8 +206,8 @@
 
         i
           float: right
-          margin-right: -.35rem
-          padding: .35rem
+          margin-right: -.5em
+          padding: .5em
           transition: transform .3s
           transform: rotate(0)
 
@@ -239,12 +223,12 @@
       .webinfo-item
         display: flex
         align-items: center
-        padding: .1rem .5rem 0
+        padding: 2px 10px 0
 
         div
           &:first-child
             flex: 1
-            padding-right: 1rem
+            padding-right: 20px
 
   // toc
   #card-toc
@@ -256,28 +240,48 @@
       right: -100%
       bottom: 30px
       z-index: 100
+      max-width: $toc-mobile-maxWidth
       max-height: calc(100% - 60px)
       width: $toc-mobile-width
       opacity: 0
+      transition: initial
       transform-origin: right bottom
 
+    .toc-percentage
+      float: right
+      margin-top: -9px
+      color: #a9a9a9
+      font-style: italic
+      font-size: 140%
+
     .toc-content
-      overflow-y: auto
+      overflow-y: scroll
+      overflow-y: overlay
+      margin: 0 -24px
       max-height: calc(100vh - 120px)
 
       +maxWidth900()
         max-height: calc(100vh - 140px)
 
-      .toc-child
-        display: none
+      & > *
+        margin: 0 20px !important
 
-        +maxWidth900()
-          display: block !important
+        & > .toc-item > .toc-child
+          margin-left: 10px
+          padding-left: 10px
+          border-left: 1px solid var(--dark-grey)
 
-      .toc-item
-        &.active
-          .toc-child
-            display: block
+      &:not(.is-expand)
+        .toc-child
+          display: none
+
+          +maxWidth900()
+            display: block !important
+
+        .toc-item
+          &.active
+            .toc-child
+              display: block
 
       ol,
       li
@@ -288,29 +292,22 @@
 
       ol
         margin: 0
-        padding-left: .4rem
+        padding-left: 18px
 
       .toc-link
         display: block
-        padding-left: .3rem
-        border-left: 3px solid transparent
+        margin: 4px 0
+        padding: 1px 6px
         color: var(--toc-link-color)
         transition: all .2s ease-in-out
 
+        &:hover
+          color: $theme-color
+
         &.active
-          border-left-color: darken($theme-toc-color, 20%)
           background: $theme-toc-color
           color: $toc-active-color
 
-      &:before
-        position: absolute
-        top: .6rem
-        right: 1.2rem
-        color: #a9a9a9
-        content: attr(progress-percentage)
-        font-style: italic
-        font-size: 1.2rem
-
   :only-child
     > .card-widget
       margin-top: 0
@@ -330,8 +327,9 @@
   border-radius: 70px
 
   img
+    width: 100%
     height: 100%
-    transition: all .5s
+    transition: filter 375ms ease-in .2s, transform .3s
     object-fit: cover
 
     &:hover

source/css/_layout/comments.styl

@@ -1,6 +1,6 @@
 #post-comment
   .comment-head
-    margin-bottom: 1rem
+    margin-bottom: 20px
 
     .comment-headline
       display: inline-block
@@ -13,8 +13,8 @@
 
       if hexo-config('comments.text')
         float: right
-        margin: .1rem auto 0
-        padding: .2rem .8rem
+        margin: 2px auto 0
+        padding: 4px 16px
         width: max-content
         border-radius: 8px
         background: $comments-switch-bg
@@ -33,7 +33,7 @@
       .switch-btn
         position: relative
         display: inline-block
-        margin: -4px .4rem 0
+        margin: -4px 8px 0
         width: 42px
         height: 22px
         border-radius: 34px

source/css/_layout/footer.styl

@@ -1,7 +1,7 @@
 #footer
   position: relative
   background: $light-blue
-  background-attachment: local
+  background-attachment: scroll
   background-position: bottom
   background-size: cover
 
@@ -15,7 +15,7 @@
 
 #footer-wrap
   position: relative
-  padding: 2rem 1rem
+  padding: 40px 20px
   color: var(--light-grey)
   text-align: center
 
@@ -26,10 +26,10 @@
       text-decoration: underline
 
   .footer-separator
-    margin: 0 .2rem
+    margin: 0 4px
 
   .icp-icon
     padding: 0 4px
-    vertical-align: text-bottom
     max-height: 1.4em
-    width auto
+    width: auto
+    vertical-align: text-bottom

source/css/_layout/head.styl

@@ -7,6 +7,13 @@
   background-repeat: no-repeat
   transition: all .5s
 
+  &:not(.not-top-img):before
+    position: absolute
+    width: 100%
+    height: 100%
+    background-color: alpha($dark-black, .3)
+    content: ''
+
   // index
   &.full_page
     height: $index_top_img_height
@@ -15,14 +22,14 @@
     #site-info
       position: absolute
       top: $index_site_info_top
-      padding: 0 .5rem
+      padding: 0 10px
       width: 100%
 
   #site-title,
   #site-subtitle,
   #scroll-down .scroll-down-effects
     text-align: center
-    text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
     line-height: 1.5
 
   #site-title
@@ -43,18 +50,17 @@
   #site_social_icons
     display: none
     margin: 0 auto
-    width: 15rem
+    width: 300px
     text-align: center
 
     +maxWidth768()
       display: block
 
     .social-icon
-      margin: 0 .5rem
+      margin: 0 10px
       color: var(--light-grey)
-      text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
       font-size: 1.43em
-      cursor: pointer
 
   #scroll-down
     position: absolute
@@ -70,54 +76,47 @@
 
   // page
   &.not-home-page
-    height: 20rem
+    height: 400px
 
     +maxWidth768()
-      height: 14rem
+      height: 280px
 
   #page-site-info
     position: absolute
-    top: 10rem
-    padding: 0 .5rem
+    top: 200px
+    padding: 0 10px
     width: 100%
 
     +maxWidth768()
-      top: 7rem
+      top: 140px
 
   // post
   &.post-bg
-    height: 20rem
+    height: 400px
 
     +maxWidth768()
-      height: 18rem
+      height: 360px
 
     &:before
-      position: absolute
-      top: 0
-      left: 0
-      display: block
-      width: 100%
-      height: 100%
       background-color: alpha($dark-black, .5)
-      content: ''
 
   #post-info
     position: absolute
-    bottom: 5rem
+    bottom: 100px
     padding: 0 8%
     width: 100%
     text-align: center
 
     +maxWidth900()
-      bottom: 1.5rem
+      bottom: 30px
       text-align: left
 
     +maxWidth768()
-      bottom: 1.1rem
-      padding: 0 1.1rem
+      bottom: 22px
+      padding: 0 22px
 
   &.not-top-img
-    margin-bottom: .5rem
+    margin-bottom: 10px
     height: 60px
     background: 0
 
@@ -157,21 +156,17 @@
         top: 70px
         transition: top .5s
 
-.apple
-  #page-header.full_page
-    background-attachment: scroll !important
-
 #page
   h1.page-title
-    margin: .4rem 0 1rem
+    margin: 8px 0 20px
 
 // for not top_img
 #post
   & > #post-info
-    margin-bottom: 1.5rem
+    margin-bottom: 30px
 
     .post-title
-      padding-bottom: .2rem
+      padding-bottom: 4px
       border-bottom: 1px solid var(--light-grey)
       color: var(--text-highlight-color)
 
@@ -185,7 +180,7 @@
 #post-info
   .post-title
     @extend .limit-more-line
-    margin-bottom: .4rem
+    margin-bottom: 8px
     color: var(--white)
     font-weight: normal
     font-size: 2.5em
@@ -193,10 +188,10 @@
     -webkit-line-clamp: 3
 
     +maxWidth768()
-      font-size: 1.72em
+      font-size: 2.1em
 
     .post-edit-link
-      padding-left: .5rem
+      padding-left: 10px
 
   #post-meta
     color: var(--light-grey)
@@ -216,14 +211,14 @@
 
     .post-meta
       &-separator
-        margin: 0 .25rem
+        margin: 0 5px
 
       &-icon
-        margin-right: .2rem
+        margin-right: 4px
 
       &-label
         if hexo-config('post_meta.post.label')
-          margin-right: .2rem
+          margin-right: 4px
         else
           display: none
 
@@ -244,7 +239,6 @@
   top: 0
   z-index: 90
   display: flex
-  flex-wrap: wrap
   align-items: center
   padding: 0 36px
   width: 100%
@@ -264,7 +258,7 @@
 
   #toggle-menu
     display: none
-    padding: .1rem 0 0 .3rem
+    padding: 2px 0 0 6px
     vertical-align: top
 
     &:hover
@@ -277,7 +271,7 @@
       color: var(--white)
 
   #site-name
-    text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
+    text-shadow: 2px 2px 4px rgba($dark-black, .15)
     font-weight: bold
     cursor: pointer
 
@@ -287,16 +281,16 @@
     .menus_item
       position: relative
       display: inline-block
-      padding: 0 0 0 .7rem
+      padding: 0 0 0 14px
 
       &:hover
         .menus_item_child
           display: block
 
-        i.expand
-          transform: rotate(180deg) !important
+        & > a > i:last-child
+          transform: rotate(180deg)
 
-      i.expand
+      & > a > i:last-child
         padding: 4px
         transition: transform .3s
 
@@ -310,6 +304,7 @@
         background-color: var(--sidebar-bg)
         box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
         animation: sub_menus .3s .1s ease both
+        border-radius: 5px
 
         &:before
           position: absolute
@@ -325,9 +320,13 @@
           &:hover
             background: var(--text-bg-hover)
 
+          &:first-child
+            border-radius: 5px 5px 0 0
+          &:last-child
+            border-radius: 0 0 5px 5px
           a
             display: inline-block
-            padding: .3rem .7rem
+            padding: 8px 16px
             width: 100%
             color: var(--font-color) !important
             text-shadow: none !important
@@ -340,22 +339,19 @@
         font-size: inherit
 
     .menus_items
-      position: absolute
-      left: 0
-      visibility: hidden
-      opacity: 0
+      display: none
 
     #search-button span
-      display: none !important
+      display: none
 
   #search-button
     display: inline
-    padding: 0 0 0 .7rem
+    padding: 0 0 0 14px
 
   .site-page
     position: relative
-    padding-bottom: .3rem
-    text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
+    padding-bottom: 6px
+    text-shadow: 1px 1px 2px rgba($dark-black, .3)
     font-size: .78em
     cursor: pointer
 

source/css/_layout/loading.styl

@@ -43,7 +43,7 @@ if hexo-config('preloader')
       .loading-word
         position: absolute
         color: var(--preloader-color)
-        font-size: .8rem
+        font-size: 16px
 
       .configure-core
         width: 100%

source/css/_layout/pagination.styl

@@ -1,38 +1,17 @@
 #pagination
-  overflow: hidden
-  margin-top: 1rem
-  width: 100%
-
   .pagination
+    margin-top: 20px
     text-align: center
 
   .page-number
-    display: inline-block
-    margin: 0 .2rem
-    min-width: w = 1.2rem
-    height: w
-    text-align: center
-    line-height: w
-    cursor: pointer
-
     &.current
       background: $theme-paginator-color
       color: var(--white)
-      cursor: default
-
-  img.prev-cover,
-  img.next-cover
-    position: absolute
-    width: 100%
-    height: 100%
-    opacity: .4
-    transition: all .6s
-    object-fit: cover
 
   .pagination-info
     position: absolute
     top: 50%
-    padding: 1rem 2rem
+    padding: 20px 40px
     width: 100%
     transform: translate(0, -50%)
 
@@ -57,6 +36,7 @@
 
   .prev-post,
   .next-post
+    @extend .postImgHover
     width: 50%
 
     +maxWidth768()
@@ -68,12 +48,35 @@
       overflow: hidden
       height: 150px
 
-    &:hover
-      img.prev-cover,
-      img.next-cover
-        opacity: .8
-        transform: scale(1.1)
-
   &.pagination-post
-    margin-top: 2rem
-    background: $dark-black
+    overflow: hidden
+    margin-top: 40px
+    background: $dark-black
+
+.layout
+  & > .recent-posts
+    .pagination
+      & > *
+        display: inline-block
+        margin: 0 6px
+        width: w = 2.5em
+        height: w
+        line-height: w
+
+      & > *:not(.space)
+        @extend .cardHover
+
+        &:hover
+          background: var(--btn-hover-color)
+          color: var(--btn-color)
+
+  & > div:not(.recent-posts)
+    .pagination
+      .page-number
+        display: inline-block
+        margin: 0 4px
+        min-width: w = 24px
+        height: w
+        text-align: center
+        line-height: w
+        cursor: pointer

source/css/_layout/post.styl

@@ -1,16 +1,13 @@
 beautify()
   headStyle(fontsize)
-    padding-left: unit(fontsize + .4, 'rem')
-
-    code
-      font-size: unit(fontsize, 'rem')
+    padding-left: unit(fontsize + 12, 'px')
 
     &:before
-      margin-left: unit((-(fontsize + .2)), 'rem')
-      font-size: unit(fontsize, 'rem')
+      margin-left: unit((-(fontsize + 6)), 'px')
+      font-size: unit(fontsize, 'px')
 
     &:hover
-      padding-left: unit(fontsize + .6, 'rem')
+      padding-left: unit(fontsize + 18, 'px')
 
   h1,
   h2,
@@ -22,7 +19,7 @@ beautify()
 
     &:before
       position: absolute
-      top: calc(50% - .35rem)
+      top: calc(50% - 7px)
       color: $title-prefix-icon-color
       content: $title-prefix-icon
       line-height: 1
@@ -34,112 +31,40 @@ beautify()
         color: $light-blue
 
   h1
-    headStyle(1)
+    headStyle(20)
 
   h2
-    headStyle(.9)
+    headStyle(18)
 
   h3
-    headStyle(.8)
+    headStyle(16)
 
   h4
-    headStyle(.7)
+    headStyle(14)
 
   h5
-    headStyle(.6)
+    headStyle(12)
 
   h6
-    headStyle(.6)
+    headStyle(12)
 
   ol,
   ul
-    margin-top: .4rem
-    padding: 0 0 0 .8rem
-    list-style: none
-    counter-reset: li
-
-    +maxWidth768()
-      padding: 0 0 0 .4rem
-
     p
-      margin: 0 0 .5rem
+      margin: 0 0 8px
 
-    ol,
-    ul
-      padding-left: .6rem
+  li
+    &::marker
+      color: $light-blue
+      font-weight: 600
+      font-size: 1.05em
 
-      +maxWidth768()
-        padding-left: .2rem
+    &:hover
+      &::marker
+        color: var(--pseudo-hover)
 
-    li
-      &:not(.tab)
-        position: relative
-        margin: .2rem 0
-
-      &:hover
-        &:before
-          transform: rotate(360deg)
-
-      &:before
-        position: absolute
-        top: 0
-        left: 0
-        background: $light-blue
-        color: $white
-        cursor: pointer
-        transition: all .3s ease-out
-
-  ol
-    > li
-      &:not(.tab)
-        padding: .2em .2em .2em 1.8em
-
-      &:before
-        margin-top: .65em
-        width: w = 1.45em
-        height: h = w
-        border-radius: .5 * w
-        content: counter(li)
-        counter-increment: li
-        text-align: center
-        font-size: .85em
-        line-height: h
-
-  ul
-    > li:not(.tab)
-      padding: .2em .2em .2em 1.4em
-
-      &:hover
-        &:before
-          border-color: $pseudo-hover
-
-      &:before
-        $w = .42em
-        top: .78em
-        width: w = $w
-        height: h = w
-        border: .5 * w solid $light-blue
-        border-radius: w
-        background: transparent
-        content: ''
-        line-height: h
-
-no-beautify()
-  ol,
-  ul
-    margin-top: .4rem
-
-    p
-      margin: 0 0 .5rem
-
-    ol,
-    ul
-      padding-left: .5rem
-
-    li
-      position: relative
-      margin: .3rem 0
-      padding-left: .3rem
+  ul > li
+    list-style-type: circle
 
 #article-container
   word-wrap: break-word
@@ -153,13 +78,15 @@ no-beautify()
 
   img
     display: block
-    margin: 0 auto .8rem
+    margin: 0 auto 20px
+    max-width: 100%
+    transition: filter 375ms ease-in .2s
 
   p
-    margin: 0 0 .8rem
+    margin: 0 0 16px
 
   iframe
-    margin: 0 0 1rem
+    margin: 0 0 20px
 
   kbd
     margin: 0 3px
@@ -175,15 +102,50 @@ no-beautify()
     font-family: Monaco, 'Ubuntu Mono', monospace
     line-height: 1em
 
-  if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
-    beautify()
-  else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
-    no-beautify()
+  if hexo-config('anchor')
+    a.headerlink
+      &:after
+        @extend .fontawesomeIcon
+        float: right
+        color: var(--headline-presudo)
+        content: '\f0c1'
+        font-size: .95em
+        opacity: 0
+        transition: all .3s
 
-    &.post-content
+      &:hover
+        &:after
+          color: var(--pseudo-hover)
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      &:hover
+        a.headerlink
+          &:after
+            opacity: 1
+
+  ol,
+  ul
+    ol,
+    ul
+      padding-left: 20px
+
+    li
+      margin: 4px 0
+
+    p
+      margin: 0 0 8px
+
+  if hexo-config('beautify.enable')
+    if hexo-config('beautify.field') == 'site'
       beautify()
-  else
-    no-beautify()
+    else if hexo-config('beautify.field') == 'post'
+      &.post-content
+        beautify()
 
   > :last-child
     margin-bottom: 0 !important
@@ -196,11 +158,11 @@ no-beautify()
 
       &__tags
         display: inline-block
-        margin: .4rem .4rem .4rem 0
-        padding: 0 .6rem
+        margin: 8px 8px 8px 0
+        padding: 0 12px
         width: fit-content
         border: 1px solid $light-blue
-        border-radius: .6rem
+        border-radius: 12px
         color: $light-blue
         font-size: .85em
         transition: all .2s ease-in-out
@@ -212,7 +174,7 @@ no-beautify()
     .post_share
       display: inline-block
       float: right
-      margin: .4rem 0
+      margin: 8px 0
       width: fit-content
 
       .social-share
@@ -227,19 +189,19 @@ no-beautify()
 
   .post-copyright
     position: relative
-    margin: 2rem 0 .5rem
-    padding: .5rem .8rem
+    margin: 40px 0 10px
+    padding: 10px 16px
     border: 1px solid var(--light-grey)
     transition: box-shadow .3s ease-in-out
 
     &:before
       @extend .fontawesomeIcon
       position: absolute
-      top: .1rem
-      right: .6rem
+      top: 2px
+      right: 12px
       color: $theme-color
       content: '\f1f9'
-      font-size: 1rem
+      font-size: 1.3em
 
     &:hover
       box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
@@ -250,7 +212,7 @@ no-beautify()
         font-weight: bold
 
       &-info
-        padding-left: .3rem
+        padding-left: 6px
 
         a
           text-decoration: underline
@@ -261,7 +223,7 @@ no-beautify()
 
   .post-outdate-notice
     position: relative
-    margin: 0 0 1rem
+    margin: 0 0 20px
     padding: .5em 1.2em
     border-radius: 3px
     background-color: $noticeOutdate-bg
@@ -281,4 +243,4 @@ no-beautify()
         transform: translateY(-50%)
 
   .ads-wrap
-    margin: 2rem 0
+    margin: 40px 0

source/css/_layout/relatedposts.styl

@@ -1,5 +1,5 @@
 .relatedPosts
-  margin-top: 2rem
+  margin-top: 40px
 
   & > .headline
     margin-bottom: 5px
@@ -16,11 +16,7 @@
       height: 200px
       background: $dark-black
       vertical-align: bottom
-
-      &:hover
-        .cover
-          opacity: .8
-          transform: scale(1.1)
+      @extend .postImgHover
 
       +maxWidth768()
         margin: 2px
@@ -30,17 +26,10 @@
       +maxWidth600()
         width: calc(100% - 4px)
 
-    .cover
-      width: 100%
-      height: 100%
-      opacity: .4
-      transition: all .6s
-      object-fit: cover
-
     .content
       position: absolute
       top: 50%
-      padding: 0 1rem
+      padding: 0 20px
       width: 100%
       transform: translate(0, -50%)
 

source/css/_layout/reward.styl

@@ -1,18 +1,24 @@
 .post-reward
   position: relative
-  margin-top: 4rem
+  margin-top: 80px
   width: 100%
   text-align: center
+  pointer-events: none
+
+  & > *
+    pointer-events: auto
 
   .reward-button
     display: inline-block
-    padding: .2rem 1.2rem
+    padding: 4px 24px
     background: var(--btn-bg)
     color: var(--btn-color)
     cursor: pointer
-    transition: all .4s
 
   &:hover
+    .reward-button
+      background: var(--btn-hover-color)
+
     & > .reward-main
       display: block
 
@@ -28,7 +34,7 @@
     .reward-all
       display: inline-block
       margin: 0
-      padding: 1rem .5rem
+      padding: 20px 10px
       border-radius: 4px
       background: var(--reward-pop)
 
@@ -64,6 +70,5 @@
           height: 130px
 
         .post-qr-code-desc
-          padding-top: .4rem
           width: 130px
           color: $reward-pop-up-color

source/css/_layout/rightside.styl

@@ -1,29 +1,39 @@
 #rightside
   position: fixed
-  right: -38px
+  right: -48px
   bottom: $rightside-bottom
   z-index: 100
   opacity: 0
   transition: all .5s
 
   #rightside-config-hide
+    height: 0
+    opacity: 0
     transition: transform .4s
-    transform: translate(35px, 0)
+    transform: translate(45px, 0)
 
     &.show
-      transform: translate(0, 0) !important
+      height: auto
+      opacity: 1
+      transform: translate(0, 0)
+
+    &.status
+      height: auto
+      opacity: 1
 
   & > div
     & > button,
     & > a
       display: block
-      margin-bottom: 2px
-      width: 30px
-      height: 30px
+      margin-bottom: 5px
+      width: w = 35px
+      height: w
+      border-radius: 5px
       background-color: var(--btn-bg)
       color: var(--btn-color)
       text-align: center
       font-size: 16px
+      line-height: w
 
       &:hover
         background-color: var(--btn-hover-color)

source/css/_layout/sidebar.styl

@@ -23,39 +23,38 @@
       transform: translate3d(-100%, 0, 0)
 
     & > .avatar-img
-      margin: 1rem auto
+      margin: 20px auto
 
     .site-data
       display: table
-      padding: 0 .5rem
+      padding: 0 10px
       width: 100%
       table-layout: fixed
 
       .data-item
         display: table-cell
 
-        .data-item-link
-          & > a > div
-            @extend .limit-one-line
+        & > a > div
+          @extend .limit-one-line
 
-          .length-num
-            color: var(--text-highlight-color)
-            font-size: 1.28em
+        .length-num
+          color: var(--text-highlight-color)
+          font-size: 1.28em
 
-          .headline
-            color: var(--font-color)
+        .headline
+          color: var(--font-color)
 
     hr
-      margin: 1rem auto
+      margin: 20px auto
 
     .menus_items
-      padding: 0 .5rem 2rem
+      padding: 0 10px 40px
 
       .site-page
         @extend .limit-one-line
         position: relative
         display: block
-        padding: .3rem 1.5rem .3rem 1.1rem
+        padding: 6px 30px 6px 22px
         color: var(--font-color)
         font-size: 1.15em
 
@@ -66,18 +65,20 @@
           width: 15%
           text-align: left
 
-      .expand
-        position: absolute
-        top: .78em
-        right: .9rem
-        transition: transform .3s
+        &.group
+          & > i:last-child
+            position: absolute
+            top: .78em
+            right: 18px
+            transition: transform .3s
 
-        &.hide
-          transform: rotate(90deg) !important
+          &.hide
+            & > i:last-child
+              transform: rotate(90deg)
+
+            & + .menus_item_child
+              display: none
 
       .menus_item_child
         margin: 0
-        list-style: none
-
-        if hexo-config('hide_sidebar_menu_child')
-          display: none
+        list-style: none

source/css/_layout/third-party.styl

@@ -24,7 +24,6 @@
   --waline-font-size: 1.1em
   --waline-theme-color: $button-bg
   --waline-active-color: $button-hover-color
-  --waline-avatar-size: 2.75rem
 
   .vuser
     transition: all .5s
@@ -62,16 +61,9 @@ if hexo-config('waline.bg')
 .medium-zoom-overlay
   z-index: 99999 !important
 
-.mermaid
-  overflow: auto
-  margin: 0 0 1rem
-  background: $white
+.mermaid-wrap
+  margin: 0 0 20px
   text-align: center
-  opacity: 0
-  transition: all .3s
-
-  &[data-processed]
-    opacity: 1
 
 .utterances,
 .fb-comments iframe
@@ -80,7 +72,7 @@ if hexo-config('waline.bg')
 #gitalk-container
   .gt-meta
     margin: 0 0 .8em
-    padding: .3rem 0 .8em
+    padding: 6px 0 16px
 
 .katex-wrap
   overflow: auto
@@ -100,7 +92,7 @@ mjx-container[display],
 
 #article-container
   .aplayer
-    margin: 0 0 1rem
+    margin: 0 0 20px
 
     if hexo-config('beautify.enable')
       ol,

source/css/_mode/darkmode.styl

@@ -21,6 +21,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --btn-bg: lighten(#121212, 5)
     --text-bg-hover: lighten(#121212, 15)
     --light-grey: alpha(#FFFFFF, .7)
+    --dark-grey: alpha(#FFFFFF, .2)
     --white: alpha(#FFFFFF, .9)
     --text-highlight-color: alpha(#FFFFFF, .9)
     --blockquote-color: alpha(#FFFFFF, .7)
@@ -35,6 +36,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --hlnumber-color: alpha(#FFFFFF, .4)
     --hlscrollbar-bg: lighten(#121212, 5)
     --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
+    --scrollbar-color: lighten(#121212, 5)
+    --timeline-bg: lighten(#121212, 5)
 
     #web_bg:before,
     #footer:before,
@@ -90,7 +93,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     // hide-tags
     .hide-button,
     .btn-beautify,
-    .mermaid,
     .hl-label,
     .post-outdate-notice,
     .error-img,

source/css/_mode/readmode.styl

@@ -11,6 +11,7 @@ if hexo-config('readmode')
     --exit-btn-bg: #C0C0C0
     --exit-btn-color: #fff
     --exit-btn-hover: darken(#C0C0C0, 20)
+    --pseudo-hover: none
 
   [data-theme='dark']
     .read-mode
@@ -33,6 +34,7 @@ if hexo-config('readmode')
       position: fixed
       top: 30px
       right: 30px
+      z-index: 100
       width: 40px
       height: 40px
       border-radius: 8px
@@ -41,6 +43,10 @@ if hexo-config('readmode')
       font-size: 16px
       transition: background .3s
 
+      +maxWidth768()
+        top: initial
+        bottom: 30px
+
       &:hover
         background: var(--exit-btn-hover)
 
@@ -131,7 +137,7 @@ if hexo-config('readmode')
       ul
         >li
           &:before
-            border: .15rem solid var(--gray) !important
+            border-color: var(--gray) !important
 
       .tabs
         border: 2px solid var(--tab-border-color)
@@ -160,7 +166,7 @@ if hexo-config('readmode')
         color: var(--font-color)
 
       blockquote
-        border-left: .2rem solid var(--gray)
+        border-color: var(--gray)
         background-color: var(--readmode-light-color)
 
       kbd
@@ -179,9 +185,6 @@ if hexo-config('readmode')
         background: var(--readmode-light-color) !important
         color: var(--font-color) !important
 
-      .button--animated:before
-        background: var(--readmode-light-color) !important
-
       .note
         border: 2px solid var(--gray)
         border-left-color: var(--gray) !important

source/css/_page/404.styl

@@ -6,81 +6,64 @@ if hexo-config('error_404.enable')
       right: 0
       left: 0
       margin: 0 auto
-      padding: 0 1rem
+      padding: 60px 20px 0
       max-width: 1000px
       transform: translate(0, -50%)
 
       .error-content
-        display: flex
-        flex-direction: row
-        justify-content: center
-        align-items: center
-        margin: 0 1rem
-        height: 18rem
-        border-radius: 8px
-        background: var(--card-bg)
-        box-shadow: var(--card-box-shadow)
-        transition: all .3s
-
-        &:hover
-          box-shadow: var(--card-hover-box-shadow)
+        @extend .cardHover
+        overflow: hidden
+        margin: 0 20px
+        height: 360px
 
         +maxWidth768()
-          flex-direction: column
           margin: 0
-          height: 25rem
+          height: 500px
 
         .error-img
-          flex: 1
+          display: inline-block
+          overflow: hidden
+          width: 50%
           height: 100%
-          border-top-left-radius: 8px
-          border-bottom-left-radius: 8px
-          background-color: $theme-color
-          background-position: center
-          background-size: cover
 
           +maxWidth768()
-            flex: 1
             width: 100%
-            border-top-right-radius: 8px
-            border-bottom-left-radius: 0
+            height: 45%
+
+          img
+            @extend .imgHover
+            background-color: $theme-color
 
         .error-info
-          flex: 1
-          padding: .5rem
+          display: inline-flex
+          flex-direction: column
+          justify-content: center
+          align-content: center
+          width: 50%
+          height: 100%
+          vertical-align: top
           text-align: center
-          font-size: 14px
 
           if $site-name-font
             font-family: $site-name-font
 
           +maxWidth768()
-            flex: 1.1
             width: 100%
+            height: 55%
 
           .error_title
-            margin-top: -4rem
+            margin-top: -.6em
             font-size: 9em
 
             +maxWidth768()
-              margin-top: -3rem
+              font-size: 8em
 
           .error_subtitle
             @extend .limit-more-line
-            margin-top: -3.5rem
+            margin-top: -3em
             word-break: break-word
             font-size: 1.6em
             -webkit-line-clamp: 2
 
-          a
-            display: inline-block
-            margin-top: .5rem
-            padding: .3rem 1.5rem
-            background: var(--btn-bg)
-            color: var(--btn-color)
-
-            i
-              padding-right: .3rem
-
     & + #rightside
       display: none

source/css/_page/archives.styl

@@ -1,25 +1,25 @@
 .article-sort
-  margin-left: .5rem
-  padding-left: 1rem
+  margin-left: 10px
+  padding-left: 20px
   border-left: 2px solid lighten($light-blue, 20)
 
   &-title
     position: relative
-    margin-left: .5rem
-    padding-bottom: 1rem
-    padding-left: 1rem
+    margin-left: 10px
+    padding-bottom: 20px
+    padding-left: 20px
     font-size: 1.72em
 
     &:hover
       &:before
-        border-color: $pseudo-hover
+        border-color: var(--pseudo-hover)
 
     &:before
       position: absolute
-      top: calc(((100% - 1.8rem) / 2))
-      left: -.45rem
+      top: calc(((100% - 36px) / 2))
+      left: -9px
       z-index: 1
-      width: w = .5rem
+      width: w = 10px
       height: h = w
       border: .5 * w solid $light-blue
       border-radius: w
@@ -33,7 +33,7 @@
       bottom: 0
       left: 0
       z-index: 0
-      width: .1rem
+      width: 2px
       height: 1.5em
       background: lighten($light-blue, 20)
       content: ''
@@ -42,17 +42,17 @@
     position: relative
     display: flex
     align-items: center
-    margin: 0 0 1rem .5rem
+    margin: 0 0 20px 10px
     transition: all .2s ease-in-out
 
     &:hover
       &:before
-        border-color: $pseudo-hover
+        border-color: var(--pseudo-hover)
 
     &:before
-      $w = .3rem
+      $w = 6px
       position: absolute
-      left: calc(-1rem - 17px)
+      left: calc(-20px - 17px)
       width: w = $w
       height: h = w
       border: .5 * w solid $light-blue
@@ -75,14 +75,14 @@
           border-color: $light-blue
 
       &:before
-        border-color: $pseudo-hover
+        border-color: var(--pseudo-hover)
 
     &-time
       color: $theme-meta-color
       font-size: 95%
 
       time
-        padding-left: .3rem
+        padding-left: 6px
         cursor: default
 
     &-title
@@ -102,14 +102,8 @@
       height: 80px
 
       img
-        width: 100%
-        height: 100%
-        transition: all .6s
-        object-fit: cover
-
-        &:hover
-          transform: scale(1.1)
+        @extend .imgHover
 
     &-info
       flex: 1
-      padding: 0 .8rem
+      padding: 0 16px

source/css/_page/categories.styl

@@ -1,62 +1,37 @@
-#page
-  .category-lists
-    padding: 1rem 0 1.5rem
+.category-lists
+  .category-title
+    font-size: 2.57em
 
     +maxWidth768()
-      padding: 0
+      font-size: 2em
 
-    .category-title
-      font-size: 2.57em
+  .category-list
+    margin-bottom: 0
 
-      +maxWidth768()
-        font-size: 2em
+    a
+      color: var(--font-color)
 
-    .category-list
-      a
-        color: var(--font-color)
+      &:hover
+        color: $text-hover
 
-        &:hover
-          color: $text-hover
+    .category-list-count
+      margin-left: 8px
+      color: $theme-meta-color
 
-      .category-list-count
-        margin-left: .4rem
-        color: $theme-meta-color
+      &:before
+        content: '('
 
-        &:before
-          content: '('
+      &:after
+        content: ')'
 
-        &:after
-          content: ')'
+  ul
+    padding: 0 0 0 20px
+    @extend .list-beauty
 
     ul
-      margin-top: .4rem
-      padding: 0 0 0 1rem
-      list-style: none
-      counter-reset: li
+      padding-left: 4px
 
-      ul
-        padding-left: .2rem
-
-      li
-        position: relative
-        margin: .3rem 0
-        padding: .12em .4em .12em 1.4em
-
-        &:before
-          position: absolute
-          left: 0
-          cursor: pointer
-          transition: all .3s ease-out
-          $w = .43em
-          top: .7em
-          width: w = $w
-          height: h = w
-          border: .5 * w solid $light-blue
-          border-radius: w
-          background: transparent
-          content: ''
-          // line-height: h
-
-        &:hover
-          &:before
-            border-color: $pseudo-hover
+    li
+      position: relative
+      margin: 6px 0
+      padding: .12em .4em .12em 1.4em

source/css/_page/common.styl

@@ -7,7 +7,7 @@
   display: flex
   flex: 1 auto
   margin: 0 auto
-  padding: 2rem 15px
+  padding: 40px 15px
   max-width: 1200px
   width: 100%
 
@@ -15,26 +15,21 @@
     flex-direction: column
 
   +maxWidth768()
-    padding: 1rem 5px
+    padding: 20px 5px
 
   +minWidth2000()
     max-width: 1500px
 
   & > div:first-child:not(.recent-posts)
+    @extend .cardHover
     align-self: flex-start
     padding: 50px 40px
-    border-radius: 8px
-    background: var(--card-bg)
-    box-shadow: var(--card-box-shadow)
-
-    &:hover
-      box-shadow: var(--card-hover-box-shadow)
 
     +maxWidth768()
-      padding: 1.8rem .7rem !important
+      padding: 36px 14px
 
   & > div:first-child
-    width: 75%
+    width: 74%
     transition: all .3s
 
     +maxWidth900()
@@ -53,3 +48,13 @@
 
     & > div
       width: 100% !important
+
+// for apple device
+.apple
+  #page-header.full_page
+    background-attachment: scroll !important
+
+  .recent-post-item,
+  .avatar-img,
+  .flink-item-icon
+    transform: translateZ(0)

source/css/_page/flink.styl

@@ -1,8 +1,5 @@
 #article-container
   .flink
-    .flink-desc
-      margin: .2rem 0 .5rem
-
     .flink-list
       overflow: auto
       padding: 10px 10px 0
@@ -61,7 +58,8 @@
             img
               width: 100%
               height: 100%
-              transition: all .3s
+              object-fit: cover
+              transition: filter 375ms ease-in 0.2s, transform .3s
 
           .img-alt
             display: none

source/css/_page/homepage.styl

@@ -1,89 +1,75 @@
 #recent-posts
   & > .recent-post-item:not(:first-child)
-    margin-top: 1rem
+    margin-top: 20px
 
   & > .recent-post-item
+    @extend .cardHover
     display: flex
     flex-direction: row
     align-items: center
-    height: 20em
-    border-radius: 12px 8px 8px 12px
-    background: var(--card-bg)
-    box-shadow: var(--card-box-shadow)
-    transition: all .3s
+    overflow: hidden
+    height: 18em
 
     +maxWidth768()
-      border-radius: 12px 12px 8px 8px
+      flex-direction: column
+      height: auto
 
     &:hover
-      box-shadow: var(--card-hover-box-shadow)
-
       img.post_bg
         transform: scale(1.1)
 
-    if hexo-config('cover.position') == 'both'
-      .left_radius
-        border-radius: 8px 0 0 8px
-
-      .right_radius
-        order: 2
-        border-radius: 0 8px 8px 0
-    else if hexo-config('cover.position') == 'left'
-      .left_radius
-        border-radius: 8px 0 0 8px
-
-      .right_radius
-        border-radius: 8px 0 0 8px
-    else if hexo-config('cover.position') == 'right'
-      .left_radius
-        order: 2
-        border-radius: 0 8px 8px 0
-
-      .right_radius
-        order: 2
-        border-radius: 0 8px 8px 0
-
     &.ads-wrap
       display: block !important
       height: auto !important
 
     .post_cover
       overflow: hidden
-      width: 45%
+      width: 44%
       height: 100%
-      -webkit-mask-image: -webkit-radial-gradient(white, black)
+
+      +maxWidth768()
+        width: 100%
+        height: 230px
 
       img.post_bg
-        width: 100%
-        height: 100%
-        transition: all .6s
-        object-fit: cover
+        @extend .imgHover
 
-        &:hover
-          transform: scale(1.1)
+      &.right
+        order: 1
+
+        +maxWidth768()
+          order: 0
 
     & >.recent-post-info
-      display: inline-block
-      overflow: hidden
       padding: 0 40px
-      width: 55%
+      width: 57%
+
+      +maxWidth768()
+        padding: 20px 20px 30px
+        width: 100%
 
       &.no-cover
         width: 100%
 
+        +maxWidth768()
+          padding: 30px 20px
+
       & > .article-title
         @extend .limit-more-line
-        margin-bottom: .3rem
         color: var(--text-highlight-color)
         font-size: 1.72em
         line-height: 1.4
         transition: all .2s ease-in-out
         -webkit-line-clamp: 2
 
+        +maxWidth768()
+          font-size: 1.43em
+
         &:hover
           color: $text-hover
 
       & > .article-meta-wrap
+        margin: 6px 0
         color: $theme-meta-color
         font-size: 90%
 
@@ -94,22 +80,19 @@
           color: $sticky-color
 
         i
-          margin: 0 .2rem 0 0
+          margin: 0 4px 0 0
 
         .article-meta-label
           if hexo-config('post_meta.page.label')
-            padding-right: .2rem
+            padding-right: 4px
           else
             display: none
 
-        .article-meta__separator
-          margin: 0 .3rem
+        .article-meta-separator
+          margin: 0 6px
 
-        .article-meta__link
-          margin: 0 .2rem
-
-        .fa-angle-right
-          margin: 0 .2rem
+        .article-meta-link
+          margin: 0 4px
 
         if hexo-config('post_meta.page.date_format') == 'relative'
           time
@@ -124,31 +107,4 @@
 
       & > .content
         @extend .limit-more-line
-        margin-top: .3rem
-        -webkit-line-clamp: 3
-
-+maxWidth768()
-  #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: 1rem 1rem 1.5rem
-        width: 100%
-
-        &.no-cover
-          padding: 1.5rem 1rem
-
-        .article-title
-          font-size: 1.43em
-
-        .content
-          height: auto
+        -webkit-line-clamp: 2

source/css/_page/tags.styl

@@ -2,7 +2,7 @@
   &-list
     a
       display: inline-block
-      padding: 0 .4rem
+      padding: 0 8px
       transition: all .3s
 
       &:hover
@@ -17,3 +17,7 @@
 
     +maxWidth768()
       font-size: 2em
+
+h1.page-title
+  & + .tag-cloud-list
+    text-align: left

source/css/_search/algolia.styl

@@ -1,69 +1,52 @@
 #algolia-search
   .search-dialog
-    .ais-search-box
-      margin: 0 auto
-      max-width: 100%
-      width: 100%
-
+    .ais-SearchBox
       input
-        padding: .25rem .7rem
+        padding: 5px 14px
+        width: 100%
         outline: none
         border: 2px solid $search-color
-        border-radius: 2rem
+        border-radius: 40px
         background: var(--search-bg)
         color: var(--search-input-color)
 
-    .ais-hits--item.algolia-hit-item
-      position: relative
-      padding-left: 1.2rem
-
-      &:hover
-        &:before
-          border-color: $pseudo-hover
-
-      &:before
-        $w = .5em
-        position: absolute
-        top: .53em
-        left: 0
-        width: w = $w
-        height: h = w
-        border: .15rem solid $search-color
-        border-radius: w
-        background: transparent
-        content: ''
-        line-height: h
-        transition: all .2s ease-in-out
+    .ais-Hits-list
+      padding-left: 24px
+      @extend .list-beauty
 
       a
-        display: block
         color: var(--search-result-title)
-        cursor: pointer
 
         &:hover
           color: $search-color
 
-      em
+      mark
+        background: transparent
         color: $search-keyword-highlight
         font-weight: bold
 
-    .ais-pagination.pagination
-      margin: .8rem 0 0
+    .ais-Pagination
+      margin: 16px 0 0
       padding: 0
       text-align: center
 
-      .ais-pagination--item
-        margin: 0 .2rem
+      .ais-Pagination-list
+        padding: 0
+        list-style: none
+
+      .ais-Pagination-item
+        display: inline
+        margin: 0 4px
         padding: 0
 
-        a
+        .ais-Pagination-link
           display: inline-block
-          min-width: 1.2rem
-          height: 1.2rem
+          min-width: 24px
+          height: 24px
           text-align: center
-          line-height: 1.2rem
+          line-height: 24px
 
-      .ais-pagination--item.current
+      .ais-Pagination-item--selected
         a
           background: $theme-paginator-color
           color: #eee
@@ -71,5 +54,5 @@
 
     .algolia-logo
       padding-top: 2px
-      width: 4rem
-      height: 1.5rem
+      width: 80px
+      height: 30px

source/css/_search/index.styl

@@ -1,15 +1,14 @@
 .search-dialog
   position: fixed
-  top: 5rem
+  top: 100px
   left: 50%
   z-index: 1001
   display: none
-  margin-left: -15rem
-  padding: 1rem
-  width: 30rem
+  margin-left: -300px
+  padding: 20px
+  width: 600px
   border-radius: 8px
   background: var(--search-bg)
-  animation: titlescale .5s
 
   +maxWidth768()
     top: 0
@@ -20,27 +19,25 @@
     border-radius: 0
 
   hr
-    margin: 1rem auto
+    margin: 20px auto
 
-  span.search-close-button
-    position: absolute
-    top: .8rem
-    right: 1rem
-    color: $grey
-    font-size: 1.4em
-    line-height: 1
-    cursor: pointer
-    transition: color .2s ease-in-out
-
-    &:hover
-      color: $search-color
-
-  &__title
-    padding: 0 0 .7rem
+  .search-nav
+    margin: 0 0 14px
     color: $search-color
     font-size: 1.4em
     line-height: 1
 
+    .search-dialog-title
+      margin-right: 10px
+
+    .search-close-button
+      float: right
+      color: $grey
+      transition: color .2s ease-in-out
+
+      &:hover
+        color: $search-color
+
 #search-mask
   position: fixed
   top: 0

source/css/_search/local-search.styl

@@ -6,23 +6,26 @@
       width: 100%
 
       input
-        padding: .25rem .7rem
+        padding: 5px 14px
         width: 100%
         outline: none
         border: 2px solid $search-color
-        border-radius: 2rem
+        border-radius: 40px
         background: var(--search-bg)
         color: var(--search-input-color)
         -webkit-appearance: none
 
+    .search-wrap
+      display: none
+
     .local-search__hit-item
       position: relative
-      padding-left: 1.2rem
+      padding-left: 24px
       line-height: 1.7
 
       &:hover
         &:before
-          border-color: $pseudo-hover
+          border-color: var(--pseudo-hover)
 
       &:before
         $w = .5em
@@ -31,7 +34,7 @@
         left: 0
         width: w = $w
         height: h = w
-        border: .15rem solid $search-color
+        border: 3px solid $search-color
         border-radius: w
         background: transparent
         content: ''
@@ -48,7 +51,7 @@
           color: $search-color
 
       .search-result
-        margin: 0 0 .4rem
+        margin: 0 0 8px
         word-break: break-all
 
       .search-keyword
@@ -57,8 +60,8 @@
 
     .search-result-list
       overflow-y: auto
-      max-height: 10.5rem
+      max-height: 210px
 
       +maxWidth768()
-        padding-bottom: 2rem
+        padding-bottom: 40px
         max-height: 75vh !important

source/css/_tags/button.styl

@@ -1,61 +1,55 @@
 #article-container
   .btn-center
-    margin: 0 0 1rem
+    margin: 0 0 20px
     text-align: center
 
   .btn-beautify
     display: inline-block
-    margin: 0 .2rem .3rem
-    padding: 0 1rem
-    background-color: $btn-default-color
+    margin: 0 4px 6px
+    padding: 0 15px
+    background-color: var(--btn-beautify-color, $btn-default-color)
     color: $btn-color
     line-height: 2
 
+    for $type in $color-types
+      &.{$type}
+        --btn-beautify-color: lookup('$tagsP-' + $type + '-color')
+
+    &:hover
+      background-color: var(--btn-hover-color)
+
     i + span
-      margin-left: .3rem
+      margin-left: 6px
 
     &:not(.block) + .btn-beautify:not(.block)
-      margin: 0 .2rem 1rem
+      margin: 0 4px 20px
 
     &.block
       display: block
-      margin: 0 0 1rem
+      margin: 0 0 20px
       width: fit-content
       width: -moz-fit-content
 
       &.center
-        margin: 0 auto 1rem
+        margin: 0 auto 20px
 
       &.right
-        margin: 0 0 1rem auto
+        margin: 0 0 20px auto
 
     &.larger
-      padding: .3rem 1.3rem
+      padding: 6px 15px
 
     &:hover
       text-decoration: none
 
-    for $type in $tagsP-types
-      &.{$type}
-        background-color: lookup('$tagsP-' + $type + '-color')
-
     &.outline
       border: 1px solid transparent
-      border-color: $btn-default-color
+      border-color: var(--btn-beautify-color, $btn-default-color)
       background-color: transparent
-      color: $btn-default-color
-      transition: all .3s
+      color: var(--btn-beautify-color, $btn-default-color)
 
-      &.button--animated:before
-        background: $btn-default-color
+      &:hover
+        background-color: var(--btn-beautify-color, $btn-default-color)
 
       &:hover
         color: white !important
-
-      for $type in $tagsP-types
-        &.{$type}
-          border-color: lookup('$tagsP-' + $type + '-color')
-          color: lookup('$tagsP-' + $type + '-color')
-
-          &.button--animated:before
-            background: lookup('$tagsP-' + $type + '-color')

source/css/_tags/gallery.styl

@@ -1,107 +1,102 @@
-figure.gallery-group
-  position: relative
-  float: left
-  overflow: hidden
-  margin: .3rem .2rem
-  width: calc(50% - .4rem)
-  height: 250px
-  border-radius: 8px
-  background: $dark-black
-  -webkit-transform: translate3d(0, 0, 0)
-
-  +maxWidth600()
-    width: calc(100% - .4rem)
-
-  &:hover
-    img
-      opacity: .4
-      transform: translate3d(0, 0, 0)
-
-    .gallery-group-name::after
-      transform: translate3d(0, 0, 0)
-
-    p
-      opacity: 1
-      transform: translate3d(0, 0, 0)
-
-  img
+#article-container
+  figure.gallery-group
     position: relative
-    margin: 0 !important
-    max-width: none
-    width: calc(100% + 20px)
+    float: left
+    overflow: hidden
+    margin: 6px 4px
+    width: calc(50% - 8px)
     height: 250px
-    backface-visibility: hidden
-    opacity: .8
-    transition: opacity .35s, transform .35s
-    transform: translate3d(-10px, 0, 0)
-    object-fit: cover
+    border-radius: 8px
+    background: $dark-black
+    -webkit-transform: translate3d(0, 0, 0)
 
-  figcaption
-    position: absolute
-    top: 0
-    left: 0
-    padding: 1.5rem
-    width: 100%
-    height: 100%
-    color: $gallery-color
-    text-transform: uppercase
-    backface-visibility: hidden
+    +maxWidth600()
+      width: calc(100% - 8px)
 
-    & > a
+    &:hover
+      img
+        opacity: .4
+        transform: translate3d(0, 0, 0)
+
+      .gallery-group-name::after
+        transform: translate3d(0, 0, 0)
+
+      p
+        opacity: 1
+        transform: translate3d(0, 0, 0)
+
+    img
+      position: relative
+      margin: 0
+      max-width: none
+      width: calc(100% + 20px)
+      height: 250px
+      backface-visibility: hidden
+      opacity: .8
+      transition: all .3s, filter 375ms ease-in .2s
+      transform: translate3d(-10px, 0, 0)
+      object-fit: cover
+
+    figcaption
       position: absolute
       top: 0
-      right: 0
-      bottom: 0
-      left: 0
-      z-index: 1000
-      opacity: 0
-
-  p
-    @extend .limit-more-line
-    margin: 0
-    padding: .4rem 0 0
-    letter-spacing: 1px
-    font-size: 1.1em
-    line-height: 1.5
-    opacity: 0
-    transition: opacity .35s, transform .35s
-    transform: translate3d(100%, 0, 0)
-    -webkit-line-clamp: 4
-
-  .gallery-group-name
-    @extend .limit-more-line
-    position: relative
-    margin: 0
-    padding: .4rem 0
-    font-weight: bold
-    font-size: 1.65em
-    line-height: 1.5
-    -webkit-line-clamp: 2
-
-    &:after
-      position: absolute
-      bottom: 0
       left: 0
+      padding: 30px
       width: 100%
-      height: 2px
-      background: $gallery-color
-      content: ''
-      transition: transform .35s
-      transform: translate3d(-100%, 0, 0)
+      height: 100%
+      color: $gallery-color
+      text-transform: uppercase
+      backface-visibility: hidden
 
-.gallery-group-main
-  overflow: auto
-  padding: 0 0 .8rem
+      & > a
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        z-index: 1000
+        opacity: 0
 
-.justified-gallery
-  margin: 0 0 .8rem
+    p
+      @extend .limit-more-line
+      margin: 0
+      padding: 8px 0 0
+      letter-spacing: 1px
+      font-size: 1.1em
+      line-height: 1.5
+      opacity: 0
+      transition: opacity .35s, transform .35s
+      transform: translate3d(100%, 0, 0)
+      -webkit-line-clamp: 4
 
-  img
+    .gallery-group-name
+      @extend .limit-more-line
+      position: relative
+      margin: 0
+      padding: 8px 0
+      font-weight: bold
+      font-size: 1.65em
+      line-height: 1.5
+      -webkit-line-clamp: 2
+
+      &:after
+        position: absolute
+        bottom: 0
+        left: 0
+        width: 100%
+        height: 2px
+        background: $gallery-color
+        content: ''
+        transition: transform .35s
+        transform: translate3d(-100%, 0, 0)
+
+  .gallery-group-main
+    overflow: auto
+    padding: 0 0 16px
+
+  .fj-gallery
+    margin: 0 0 16px
     opacity: 0
 
-  .img-alt
-    display: none
-
-  .fancybox
-    width: auto
-    text-align: inherit
+    .img-alt
+      display: none

source/css/_tags/hexo.styl

@@ -11,13 +11,13 @@ blockquote
 
     &.right
       float: right
-      margin: 1em 0 0 .5rem
+      margin: 1em 0 0 .5em
 
 // hexo tag video
 .video-container
   position: relative
   overflow: hidden
-  margin-bottom: .8rem
+  margin-bottom: 16px
   padding-top: 56.25%
   height: 0
 

source/css/_tags/hide.styl

@@ -3,10 +3,13 @@
 .hide-block
   & > .hide-button
     display: inline-block
-    padding: .3rem 1rem
+    padding: 6px 20px
     background: $tag-hide-bg
     color: var(--white)
 
+    &:hover
+      background-color: var(--btn-hover-color)
+
     &.open
       display: none
 
@@ -21,20 +24,20 @@
 
 .hide-inline
   & > .hide-button
-    margin: 0 .3rem
+    margin: 0 6px
 
   & > .hide-content
-    margin: 0 .3rem
+    margin: 0 6px
 
 .hide-block
-  margin: 0 0 .8rem
+  margin: 0 0 16px
 
 .hide-toggle
-  margin-bottom: 1rem
+  margin-bottom: 20px
   border: 1px solid $tag-hide-toggle-bg
 
   & > .hide-button
-    padding: .3rem .5rem
+    padding: 6px 10px
     background: $tag-hide-toggle-bg
     color: #1F2D3D
     cursor: pointer
@@ -52,4 +55,4 @@
 
   & > .hide-content
     display: none
-    margin: 1.5rem 1.2rem
+    margin: 30px 24px

source/css/_tags/label.styl

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