Merge branch 'dev'

feat: 支持随机友链顺序

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -16,6 +16,16 @@ body:
     validations:
       required: true
 
+  - type: dropdown
+    id: modify
+    attributes:
+      label: 是否修改过主题文件？ || Has the theme files been modified?
+      options:
+        - 是 (Yes)
+        - 不是 (No)
+    validations:
+      required: true
+
   - type: dropdown
     id: browser
     attributes:

.github/stale.yml

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

.github/workflows/stale.yml

@@ -0,0 +1,19 @@
+name: 'Close stale issues and PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v5
+        with:
+          days-before-issue-stale: 30
+          days-before-pr-stale: -1
+          days-before-close: 7
+          stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
+          close-pr-message: 'This issue has not seen any activity since it was marked stale. Closing.'
+          stale-issue-label: 'Stale'
+          exempt-issue-labels: 'pinned,bug,enhancement,documentation,Plan'
+          operations-per-run: 1000

README.md

@@ -1,7 +1,5 @@
 <div align="right">
-  Language:
+<a title="Chinese" href="/README_CN.md">中文</a>
-  🇺🇸
-  <a title="Chinese" href="/README_CN.md">🇨🇳</a>
 </div>
 
 # hexo-theme-butterfly
@@ -14,7 +12,7 @@
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
 
-Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [CrazyWong](https://crazywong.com/)
+Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [CrazyWong](https://blog.crazywong.com/)
 
 Docs: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
 
@@ -62,26 +60,26 @@ npm i hexo-theme-butterfly
 
 - [x] Card UI Design
 - [X] Support sub-menu
-- [x] Two Column designs
+- [x] Two-column layout
 - [x] Responsive Web Design
 - [x] Dark Mode
 - [x] Pjax
 - [x] Read Mode
 - [x] Conversion between Traditional and Simplified Chinese
 - [X] TOC catalog is available for both computers and mobile phones
-- [X] Color themes (darker/pale night/light/ocean/mac/mac light), support custom colors
+- [X] Built-in Syntax Highlighting Themes (darker/pale night/light/ocean/mac/mac light), also support customization
 - [X] Code Blocks (Display code language/close or expand Code Blocks/Copy Button/word wrap)
 - [X] Disable copy/Add a Copyright Notice to the Copied Text
-- [X] Search (Algolia SearchZ/Local Search)
+- [X] Search (Algolia Search/Local Search)
 - [x] Mathjax and Katex
 - [x] Built-in 404 page
 - [x] WordCount
 - [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/Giscus/Remark42)
+- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk)
 - [x] Multiple Comment System Support
-- [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp)
+- [x] Online Chats (Chatra/Tidio/Daovoice/Crisp/messenger)
 - [x] Web analytics
 - [x] Google AdSense
 - [x] Webmaster Verification
@@ -89,7 +87,7 @@ npm i hexo-theme-butterfly
 - [x] Typewriter Effect: activate_power_mode
 - [x] Background effects (Canvas ribbon/canvas_ribbon_piao/canvas_nest)
 - [x] Mouse click effects (Fireworks/Heart/Text)
-- [x] Preloader/Loading Animation
+- [x] Preloader/Loading Animation/pace.js
 - [x] Busuanzi visitor counter
 - [x] Medium Zoom/Fancybox
 - [x] Mermaid

README_CN.md

@@ -1,7 +1,5 @@
 <div align="right">
-  語言:
+  <a title="English" href="/README.md">English</a>
-  中文
-  <a title="English" href="/README.md">英文</a>
 </div>
 
 # hexo-theme-butterfly
@@ -14,7 +12,7 @@
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
 
-預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [CrazyWong](https://crazywong.com/)
+預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [CrazyWong](https://blog.crazywong.com/)
 
 文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
 
@@ -72,16 +70,16 @@ theme: butterfly
 - [X] 內置多種代碼配色（darker/pale night/light/ocean/mac/mac light），可自定義代碼配色
 - [X] 代碼塊顯示代碼語言/關閉或展開代碼塊/代碼複製/代碼自動換行
 - [X] 可關閉文字複製/可開啟內容複製增加版權信息）
-- [X] 兩種搜索（Algolia搜索和本地搜索）
+- [X] 兩種搜索（ Algolia 搜索和本地搜索）
 - [x] Mathjax 和 Katex
 - [x] 內置404頁面
 - [x] 顯示字數統計
 - [x] 顯示相關文章
 - [x] 過期文章提醒
 - [x] 多種分享系統（AddThis/Sharejs/Addtoany）
-- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42）
+- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk）
 - [x] 支持雙評論部署
-- [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp）
+- [x] 多種在線聊天（Chatra/Tidio/Daovoice/Crisp/messenger）
 - [x] 多種分析系統
 - [x] 谷歌廣告/手動廣告位置
 - [x] 各種站長驗證（Google/Bing/Baidu/360/Yandex）
@@ -89,7 +87,7 @@ theme: butterfly
 - [x] 打字特效 activate_power_mode
 - [x] 多種背景特效（靜止彩帶/動態彩帶/Canvas Nest）
 - [x] 多種鼠標點擊特效（煙花/文字/愛心）
-- [x] 內置一種 Preloader 加載動畫
+- [x] 內置一種 Preloader 加載動畫和 pace.js 加載動畫條
 - [x] 不蒜子訪問統計
 - [x] 兩種大圖模式（Medium Zoom/Fancybox）
 - [x] Mermaid 圖表顯示
@@ -97,7 +95,7 @@ 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" />

_config.yml

@@ -1,7 +1,13 @@
-# Main menu navigation (導航目錄)
+# Navigation bar settings (導航欄設置)
-# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單
+# see https://butterfly.js.org/posts/4aa8abbe/##導航欄設置-Navigation-bar-settings
 # --------------------------------------
 
+nav:
+  logo: # image
+  display_title: true
+  fixed: false # fixed navigation bar
+
+# Menu 目錄
 menu:
   # Home: / || fas fa-home
   # Archives: /archives/ || fas fa-archive
@@ -23,54 +29,12 @@ highlight_shrink: false # true: shrink the code blocks / false: expand the code
 highlight_height_limit: false # unit: px
 code_word_wrap: false
 
-# copy settings
+# Social Settings (社交圖標設置)
-# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
-copy:
-  enable: true
-  copyright:
-    enable: false
-    limit_count: 50
-
-# social settings (社交圖標設置)
 # formal:
-#   icon: link || the description
+#   icon: link || the description || color
 social:
-  # fab fa-github: https://github.com/xxxxx || Github
+  # fab fa-github: https://github.com/xxxxx || Github || '#24292e'
-  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email
+  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email || '#4a7dbe'
-
-# search (搜索)
-# see https://butterfly.js.org/posts/ceeb73f/#搜索系統
-# --------------------------------------
-
-# Algolia search
-algolia_search:
-  enable: false
-  hits:
-    per_page: 6
-
-# Local search
-local_search:
-  enable: false
-  preload: false
-  CDN:
-
-# Math (數學)
-# --------------------------------------
-# About the per_page
-# if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js)
-# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter)
-# (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true)
-
-# MathJax
-mathjax:
-  enable: false
-  per_page: false
-
-# KaTeX
-katex:
-  enable: false
-  per_page: false
-  hide_scrollbar: true
 
 # Image (圖片設置)
 # --------------------------------------
@@ -150,14 +114,6 @@ post_meta:
     tags: true # true or false 文章頁是否顯示標籤
     label: true # true or false 顯示描述性文字
 
-# wordcount (字數統計)
-# see https://butterfly.js.org/posts/ceeb73f/#字數統計
-wordcount:
-  enable: false
-  post_wordcount: true
-  min2read: true
-  total_wordcount: true
-
 # Display the article introduction on homepage
 # 1: description
 # 2: both (if the description exists, it will show description, or show the auto_excerpt)
@@ -168,8 +124,23 @@ index_post_content:
   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:
-anchor: false
+  button:
+    enable: false
+    always_show: false
+    icon: # the unicode value of Font Awesome icon, such as '\3423'
+  auto_update: false # when you scroll in post, the URL will update according to header id.
+
+# figcaption (圖片描述文字)
+photofigcaption: false
+
+# copy settings
+# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
+copy:
+  enable: true
+  copyright:
+    enable: false
+    limit_count: 50
 
 # Post
 # --------------------------------------
@@ -181,6 +152,7 @@ toc:
   number: true
   expand: false
   style_simple: false # for post
+  scroll_percent: true
 
 post_copyright:
   enable: true
@@ -214,9 +186,6 @@ related_post:
   limit: 6 # Number of posts displayed
   date_type: created # or created or updated 文章日期顯示創建日或者更新日
 
-# figcaption (圖片描述文字)
-photofigcaption: false
-
 # post_pagination (分頁)
 # value: 1 || 2 || false
 # 1: The 'next post' will link to old post
@@ -233,7 +202,183 @@ noticeOutdate:
   message_prev: It has been
   message_next: days since the last update, the content of the article may be outdated.
 
-# Share System (分享功能)
+# Footer Settings
+# --------------------------------------
+footer:
+  owner:
+    enable: true
+    since: 2020
+  custom_text:
+  copyright: true # Copyright of theme and framework
+
+# aside (側邊欄)
+# --------------------------------------
+
+aside:
+  enable: true
+  hide: false
+  button: true
+  mobile: true # display on mobile
+  position: right # left or right
+  display:
+    archive: true
+    tag: true
+    category: true
+  card_author:
+    enable: true
+    description:
+    button:
+      enable: true
+      icon: fab fa-github
+      text: Follow Me
+      link: https://github.com/xxxxxx
+  card_announcement:
+    enable: true
+    content: This is my Blog
+  card_recent_post:
+    enable: true
+    limit: 5 # if set 0 will show all
+    sort: date # date or updated
+    sort_order: # Don't modify the setting unless you know how it works
+  card_categories:
+    enable: true
+    limit: 8 # if set 0 will show all
+    expand: none # none/true/false
+    sort_order: # Don't modify the setting unless you know how it works
+  card_tags:
+    enable: true
+    limit: 40 # if set 0 will show all
+    color: false
+    orderby: random # Order of tags, random/name/length
+    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
+    sort_order: # Don't modify the setting unless you know how it works
+  card_archives:
+    enable: true
+    type: monthly # yearly or monthly
+    format: MMMM YYYY # eg: YYYY年MM月
+    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
+    limit: 8 # if set 0 will show all
+    sort_order: # Don't modify the setting unless you know how it works
+  card_webinfo:
+    enable: true
+    post_count: true
+    last_push_date: true
+    sort_order: # Don't modify the setting unless you know how it works
+
+# busuanzi count for PV / UV in site
+# 訪問人數
+busuanzi:
+  site_uv: true
+  site_pv: true
+  page_pv: true
+
+# Time difference between publish date and now (網頁運行時間)
+# Formal: Month/Day/Year Time or Year/Month/Day Time
+runtimeshow:
+  enable: false
+  publish_date:
+
+# Aside widget - Newest Comments
+newest_comments:
+  enable: false
+  sort_order: # Don't modify the setting unless you know how it works
+  limit: 6
+  storage: 10 # unit: mins, save data to localStorage
+  avatar: true
+
+# Bottom right button (右下角按鈕)
+# --------------------------------------
+
+# Conversion between Traditional and Simplified Chinese (簡繁轉換)
+translate:
+  enable: false
+  # The text of a button
+  default: 繁
+  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
+  defaultEncoding: 2
+  # Time delay
+  translateDelay: 0
+  # The text of the button when the language is Simplified Chinese
+  msgToTraditionalChinese: '繁'
+  # The text of the button when the language is Traditional Chinese
+  msgToSimplifiedChinese: '簡'
+
+# Read Mode (閲讀模式)
+readmode: true
+
+# dark mode
+darkmode:
+  enable: true
+  # Toggle Button to switch dark/light mode
+  button: true
+  # Switch dark/light mode automatically (自動切換 dark mode和 light mode)
+  # autoChangeMode: 1  Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
+  # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
+  # autoChangeMode: false
+  autoChangeMode: false
+  # Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18
+  start: # 8
+  end: # 22
+
+# show scroll percent in scroll-to-top button
+rightside_scroll_percent: 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
+
+# Math (數學)
+# --------------------------------------
+# About the per_page
+# if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js)
+# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter)
+# (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true)
+
+# MathJax
+mathjax:
+  enable: false
+  per_page: false
+
+# KaTeX
+katex:
+  enable: false
+  per_page: false
+  hide_scrollbar: true
+
+# search (搜索)
+# see https://butterfly.js.org/posts/ceeb73f/#搜索系統
+# --------------------------------------
+
+# Algolia search
+algolia_search:
+  enable: false
+  hits:
+    per_page: 6
+
+# Local search
+local_search:
+  enable: false
+  # Preload the search data when the page loads.
+  preload: false
+  # Show top n results per article, show all results by setting to -1
+  top_n_per_article: 1
+  # Unescape html strings to the readable one.
+  unescape: false
+  CDN:
+
+# Docsearch
+docsearch:
+  enable: false
+  appId:
+  apiKey:
+  indexName:
+  option:
+
+# Share System (分享)
 # --------------------------------------
 
 # AddThis
@@ -259,7 +404,7 @@ 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/Giscus/Remark42
+  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
   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.
@@ -333,7 +478,7 @@ facebook_comments:
   user_id: # optional
   pageSize: 10 # The number of comments to show
   order_by: social # social/time/reverse_time
-  lang: en_US # Language en_US/zh_CN/zh_TW and so on
+  lang: zh_TW # Language en_US/zh_CN/zh_TW and so on
 
 # Twikoo
 # https://github.com/imaegoo/twikoo
@@ -361,6 +506,14 @@ remark42:
   siteId: # Your Site ID
   option:
 
+# Artalk
+# https://artalk.js.org/guide/frontend/config.html
+artalk:
+  server:
+  site:
+  visitor: false
+  option:
+
 # Chat Services
 # --------------------------------------
 
@@ -384,31 +537,23 @@ tidio:
   public_key:
 
 # daovoice
-# http://daovoice.io/
+# http://dashboard.daovoice.io/app
 daovoice:
   enable: false
   app_id:
 
-# gitter
-# https://gitter.im/
-gitter:
-  enable: false
-  room:
-
 # crisp
 # https://crisp.chat/en/
 crisp:
   enable: false
   website_id:
 
-# Footer Settings
+# messenger
-# --------------------------------------
+# https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/
-footer:
+messenger:
-  owner:
+  enable: false
-    enable: true
+  pageID:
-    since: 2020
+  lang: zh_TW # Language en_US/zh_CN/zh_TW and so on
-  custom_text:
-  copyright: true # Copyright of theme and framework
 
 # Analysis
 # --------------------------------------
@@ -421,10 +566,6 @@ baidu_analytics:
 # https://analytics.google.com/analytics/web/
 google_analytics:
 
-# CNZZ Analytics
-# https://www.umeng.com/
-cnzz_analytics:
-
 # Cloudflare Analytics
 # https://www.cloudflare.com/zh-tw/web-analytics/
 cloudflare_analytics:
@@ -504,12 +645,25 @@ background:
 # Footer Background
 footer_bg: false
 
+# Add mask to header or footer (为 header 或 footer 添加黑色半透遮罩)
+mask:
+  header: true
+  footer: true
+
 # the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)
 rightside-bottom:
 
 # Enter transitions (開啓網頁進入效果)
 enter_transitions: true
 
+# Typewriter Effect (打字效果)
+# https://github.com/disjukr/activate-power-mode
+activate_power_mode:
+  enable: false
+  colorful: true # open particle animation (冒光特效)
+  shake: true #  open shake (抖動特效)
+  mobile: false
+
 # Background effects (背景特效)
 # --------------------------------------
 
@@ -538,14 +692,6 @@ canvas_nest:
   count: 99 # the number of lines, default: 99.
   mobile: false
 
-# Typewriter Effect (打字效果)
-# https://github.com/disjukr/activate-power-mode
-activate_power_mode:
-  enable: false
-  colorful: true # open particle animation (冒光特效)
-  shake: true #  open shake (抖動特效)
-  mobile: false
-
 # Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
 fireworks:
   enable: false
@@ -604,12 +750,13 @@ subtitle:
   enable: false
   # Typewriter Effect (打字效果)
   effect: true
-  # loop (循環打字)
+  # Customize typed.js (配置typed.js)
-  loop: true
+  # https://github.com/mattboldt/typed.js/#customization
+  typed_option:
   # source 調用第三方服務
   # source: false 關閉調用
   # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
-  # source: 2  調用一句網（簡體） http://yijuzhan.com/
+  # source: 2  調用一句網（簡體） https://yijuzhan.com/
   # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
   # subtitle 會先顯示 source , 再顯示 sub 的內容
   source: false
@@ -617,119 +764,22 @@ subtitle:
   sub:
 
 # Loading Animation (加載動畫)
-preloader: false
+preloader:
-
-# aside (側邊欄)
-# --------------------------------------
-
-aside:
-  enable: true
-  hide: false
-  button: true
-  mobile: true # display on mobile
-  position: right # left or right
-  display:
-    archive: true
-    tag: true
-    category: true
-  card_author:
-    enable: true
-    description:
-    button:
-      enable: true
-      icon: fab fa-github
-      text: Follow Me
-      link: https://github.com/xxxxxx
-  card_announcement:
-    enable: true
-    content: This is my Blog
-  card_recent_post:
-    enable: true
-    limit: 5 # if set 0 will show all
-    sort: date # date or updated
-    sort_order: # Don't modify the setting unless you know how it works
-  card_categories:
-    enable: true
-    limit: 8 # if set 0 will show all
-    expand: none # none/true/false
-    sort_order: # Don't modify the setting unless you know how it works
-  card_tags:
-    enable: true
-    limit: 40 # if set 0 will show all
-    color: false
-    sort_order: # Don't modify the setting unless you know how it works
-  card_archives:
-    enable: true
-    type: monthly # yearly or monthly
-    format: MMMM YYYY # eg: YYYY年MM月
-    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
-    limit: 8 # if set 0 will show all
-    sort_order: # Don't modify the setting unless you know how it works
-  card_webinfo:
-    enable: true
-    post_count: true
-    last_push_date: true
-    sort_order: # Don't modify the setting unless you know how it works
-
-# busuanzi count for PV / UV in site
-# 訪問人數
-busuanzi:
-  site_uv: true
-  site_pv: true
-  page_pv: true
-
-# Time difference between publish date and now (網頁運行時間)
-# Formal: Month/Day/Year Time or Year/Month/Day Time
-runtimeshow:
   enable: false
-  publish_date:
+  # source
+  # 1. fullpage-loading
+  # 2. pace (progress bar)
+  source: 1
+  # pace theme (see https://codebyzach.github.io/pace/)
+  pace_css_url:
 
-# Aside widget - Newest Comments
+# wordcount (字數統計)
-newest_comments:
+# see https://butterfly.js.org/posts/ceeb73f/#字數統計
+wordcount:
   enable: false
-  sort_order: # Don't modify the setting unless you know how it works
+  post_wordcount: true
-  limit: 6
+  min2read: true
-  storage: 10 # unit: mins, save data to localStorage
+  total_wordcount: true
-  avatar: true
-
-# Bottom right button (右下角按鈕)
-# --------------------------------------
-
-# Conversion between Traditional and Simplified Chinese (簡繁轉換)
-translate:
-  enable: false
-  # The text of a button
-  default: 繁
-  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
-  defaultEncoding: 2
-  # Time delay
-  translateDelay: 0
-  # The text of the button when the language is Simplified Chinese
-  msgToTraditionalChinese: '繁'
-  # The text of the button when the language is Traditional Chinese
-  msgToSimplifiedChinese: '簡'
-
-# Read Mode (閲讀模式)
-readmode: true
-
-# dark mode
-darkmode:
-  enable: true
-  # Toggle Button to switch dark/light mode
-  button: true
-  # Switch dark/light mode automatically (自動切換 dark mode和 light mode)
-  # autoChangeMode: 1  Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
-  # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
-  # 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 (圖片大圖查看模式)
 # --------------------------------------
@@ -740,12 +790,18 @@ rightside_item_order:
 medium_zoom: false
 
 # fancybox
-# http://fancyapps.com/fancybox/3/
+# https://fancyapps.com/fancybox/
 fancybox: true
 
 # Tag Plugins settings (標籤外掛)
 # --------------------------------------
 
+# abcjs (樂譜渲染)
+# See https://github.com/paulrosen/abcjs
+abcjs:
+  enable: false
+  per_page: true
+
 # mermaid
 # see https://github.com/mermaid-js/mermaid
 mermaid:
@@ -827,7 +883,16 @@ lazyload:
 
 # Open graph meta tags
 # https://developers.facebook.com/docs/sharing/webmasters/
-Open_Graph_meta: true
+Open_Graph_meta:
+  enable: true
+  option:
+    # twitter_card:
+    # twitter_image:
+    # twitter_id:
+    # twitter_site:
+    # google_plus:
+    # fb_admins:
+    # fb_app_id:
 
 # Add the vendor prefixes to ensure compatibility
 css_prefix: true
@@ -855,7 +920,7 @@ CDN:
   # when set it to local, you need to install hexo-butterfly-extjs
   third_party_provider: jsdelivr
 
-  # Add version number to CDN, true or false  
+  # Add version number to url, true or false
   version: false
 
   # Custom format
@@ -869,8 +934,10 @@ CDN:
     # translate:
     # local_search:
     # algolia_js:
-    # algolia_search_v4:
+    # algolia_search:
-    # instantsearch_v4:
+    # instantsearch:
+    # docsearch_js:
+    # docsearch_css:
     # pjax:
     # gitalk:
     # gitalk_css:
@@ -881,6 +948,7 @@ CDN:
     # twikoo:
     # waline_js:
     # waline_css:
+    # giscus:
     # sharejs:
     # sharejs_css:
     # mathjax:
@@ -894,8 +962,8 @@ CDN:
     # instantpage:
     # typed:
     # pangu:
-    # fancybox_css_v4:
+    # fancybox_css:
-    # fancybox_v4:
+    # fancybox:
     # medium_zoom:
     # snackbar_css:
     # snackbar:
@@ -903,7 +971,7 @@ CDN:
     # fireworks:
     # click_heart:
     # ClickShowText:
-    # fontawesomeV6:
+    # fontawesome:
     # flickr_justified_gallery_js:
     # flickr_justified_gallery_css:
     # aplayer_css:
@@ -911,4 +979,8 @@ CDN:
     # meting_js:
     # prismjs_js:
     # prismjs_lineNumber_js:
-    # prismjs_autoloader:
+    # prismjs_autoloader:
+    # artalk_js:
+    # artalk_css:
+    # busuanzi:
+    # abcjs_basic_js:

languages/default.yml

@@ -45,6 +45,7 @@ search:
   local_search:
     input_placeholder: Search for Posts
     hits_empty: "We didn't find any results for the search: ${query}"
+    hits_stats: '${hits} results found'
 
 pagination:
   prev: Previous Post
@@ -117,5 +118,6 @@ Snackbar:
   night_to_day: Light Mode Activated Manually
 
 loading: Loading...
+load_more: Load More
 
 error404: Page not found

languages/en.yml

@@ -45,6 +45,7 @@ search:
   local_search:
     input_placeholder: Search for Posts
     hits_empty: "We didn't find any results for the search: ${query}"
+    hits_stats: '${hits} results found'
 
 pagination:
   prev: Previous Post
@@ -117,5 +118,6 @@ Snackbar:
   night_to_day: Light Mode Activated Manually
 
 loading: Loading...
+load_more: Load More
 
 error404: Page not found

languages/zh-CN.yml

@@ -46,6 +46,7 @@ search:
   local_search:
     input_placeholder: 搜索文章
     hits_empty: '找不到您查询的内容：${query}'
+    hits_stats: '共找到 ${hits} 篇文章'
 
 pagination:
   prev: 上一篇
@@ -118,5 +119,6 @@ Snackbar:
   night_to_day: 你已切换为浅色模式
 
 loading: 加载中...
+load_more: 加载更多
 
 error404: 页面没有找到

languages/zh-TW.yml

@@ -46,7 +46,8 @@ search:
   local_search:
     input_placeholder: 搜尋文章
     hits_empty: '找不到您查詢的內容：${query}'
-
+    hits_stats: '共找到 ${hits} 篇文章'
+    
 pagination:
   prev: 上一篇
   next: 下一篇
@@ -118,5 +119,6 @@ Snackbar:
   night_to_day: 你已切換為淺色模式
 
 loading: 載入中...
+load_more: 載入更多
 
 error404: 頁面沒有找到

layout/includes/additional-js.pug

@@ -8,7 +8,7 @@ div
   if theme.medium_zoom
     script(src=url_for(theme.asset.medium_zoom))
   else if theme.fancybox
-    script(src=url_for(theme.asset.fancybox_v4))
+    script(src=url_for(theme.asset.fancybox))
 
   if theme.instantpage
     script(src=url_for(theme.asset.instantpage), type='module')
@@ -22,17 +22,6 @@ div
   if theme.pangu.enable
     != partial("includes/third-party/pangu.pug", {}, { cache: true })
 
-  //- search
-  if theme.algolia_search.enable
-    script(src=url_for(theme.asset.algolia_search_v4))
-    script(src=url_for(theme.asset.instantsearch_v4))
-    script(src=url_for(theme.asset.algolia_js))
-  else if theme.local_search.enable
-    script(src=url_for(theme.asset.local_search))
-
-  if theme.preloader
-    != partial("includes/loading/loading-js", {}, { cache: true })
-
   .js-pjax
     if needLoadCountJs
       != partial("includes/third-party/card-post-count/index", {}, { cache: true })
@@ -42,6 +31,8 @@ div
 
     include ./third-party/math/index.pug
 
+    include ./third-party/abcjs/index.pug
+
     if commentsJsLoad
       include ./third-party/comments/js.pug
 
@@ -69,4 +60,6 @@ div
     != 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='//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
+    script(async data-pjax src= theme.asset.busuanzi || '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
+
+  !=partial('includes/third-party/search/index', {}, {cache: true})

layout/includes/head.pug

@@ -7,11 +7,6 @@
 
 - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
 - var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title
-
-- var pageKeywords
-- if (page.keywords) pageKeywords = Array.isArray(page.keywords) ? (page.keywords).join(',') :  ([]).join(',') || page.keywords
-- else if (page.tags && page.tags.length) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
-- else pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','):  ([]).join(',') || config.keywords
 - var pageAuthor = config.email ? config.author + ',' + config.email : config.author
 - var pageCopyright = config.copyright || config.author
 - var themeColorLight = theme.theme_color && theme.theme_color.enable && theme.theme_color.meta_theme_color_light || '#ffffff'
@@ -20,10 +15,8 @@
 
 meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
-meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
+meta(name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover")
 title= tabTitle
-if pageKeywords
-  meta(name="keywords" content=pageKeywords)
 meta(name="author" content=pageAuthor)
 meta(name="copyright" content=pageCopyright)
 meta(name ="format-detection" content="telephone=no")
@@ -33,7 +26,7 @@ meta(name="theme-color" content=themeColor)
 include ./head/Open_Graph.pug
 
 !=favicon_tag(theme.favicon || config.favicon)
-link(rel="canonical" href=urlNoIndex())
+link(rel="canonical" href=urlNoIndex(null,config.pretty_urls.trailing_index,config.pretty_urls.trailing_html))
 
 //- 預解析
 !=partial('includes/head/preconnect', {}, {cache: true})
@@ -47,13 +40,13 @@ if (theme.pwa && theme.pwa.enable)
 
 //- main css
 link(rel='stylesheet', href=url_for(theme.asset.main_css))
-link(rel='stylesheet', href=url_for(theme.asset.fontawesomeV6) media="print" onload="this.media='all'")
+link(rel='stylesheet', href=url_for(theme.asset.fontawesome) media="print" onload="this.media='all'")
 
 if (theme.snackbar && theme.snackbar.enable)
   link(rel='stylesheet', href=url_for(theme.asset.snackbar_css) media="print" onload="this.media='all'")
 
 if theme.fancybox
-  link(rel='stylesheet' href=url_for(theme.asset.fancybox_css_v4) media="print" onload="this.media='all'")
+  link(rel='stylesheet' href=url_for(theme.asset.fancybox_css) media="print" onload="this.media='all'")
 
 //- google_adsense
 !=partial('includes/head/google_adsense', {}, {cache: true})
@@ -73,4 +66,4 @@ include ./head/noscript.pug
 
 !=fragment_cache('injectHeadJs', function(){return inject_head_js()})
 
-!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
+!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})

layout/includes/head/Open_Graph.pug

@@ -1,11 +1,14 @@
-if theme.Open_Graph_meta
+if theme.Open_Graph_meta.enable
-  - let contentType = is_post() ? 'article' : 'website'
+  -
-  - let metaImage = (page.cover || theme.avatar.img) ? full_url_for(page.cover || theme.avatar.img) : ''
+    const coverVal = page.cover_type === 'img' ? page.cover : theme.avatar.img
-  - let fb_appId = theme.facebook_comments.app_id || ''
+    let ogOption = Object.assign({
-  - let fb_admins = theme.facebook_comments.user_id || ''
+      type: is_post() ? 'article' : 'website',
-
+      image: coverVal ? full_url_for(coverVal) : '',
-  != open_graph({type: contentType, image: metaImage, fb_admins: fb_admins, fb_app_id: fb_appId})
+      fb_admins: theme.facebook_comments.user_id || '',
-
+      fb_app_id: theme.facebook_comments.app_id || '',
+    }, theme.Open_Graph_meta.option)
+  -
+  != open_graph(ogOption)
 else
   meta(name="description" content=page_description())
 

layout/includes/head/analytics.pug

@@ -16,9 +16,6 @@ if theme.google_analytics
     gtag('js', new Date());
     gtag('config', '!{theme.google_analytics}');
 
-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}`)
-
 if theme.cloudflare_analytics
   script(defer data-pjax src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon=`{"token": "${theme.cloudflare_analytics}"}`)
 

layout/includes/head/config.pug

@@ -21,9 +21,12 @@
     localSearch = JSON.stringify({
       path: theme.local_search.CDN ? theme.local_search.CDN : config.root + config.search.path,
       preload: theme.local_search.preload,
+      top_n_per_article: theme.local_search.top_n_per_article,
+      unescape: theme.local_search.unescape,
       languages: {
         // search languages
         hits_empty: _p("search.local_search.hits_empty"),
+        hits_stats: _p("search.local_search.hits_stats"),
       }
     })
   }
@@ -85,7 +88,7 @@
   }
 
 script.
-  const GLOBAL_CONFIG = { 
+  const GLOBAL_CONFIG = {
     root: '!{config.root}',
     algolia: !{algolia},
     localSearch: !{localSearch},
@@ -102,7 +105,7 @@ script.
       post: !{theme.post_meta.post.date_format === 'relative'}
     },
     runtime: '!{theme.runtimeshow.enable ? _p("aside.card_webinfo.runtime.unit") : ""}',
-    date_suffix: {
+    dateSuffix: {
       just: '!{_p("date_suffix.just")}',
       min: '!{_p("date_suffix.min")}',
       hour: '!{_p("date_suffix.hour")}',
@@ -120,5 +123,10 @@ script.
     },
     isPhotoFigcaption: !{theme.photofigcaption},
     islazyload: !{theme.lazyload.enable},
-    isAnchor: !{theme.anchor}
+    isAnchor: !{theme.anchor.auto_update || false},
+    percent: {
+      toc: !{theme.toc.scroll_percent},
+      rightside: !{theme.rightside_scroll_percent},
+    },
+    autoDarkmode: !{theme.darkmode.enable && theme.darkmode.autoChangeMode === 1}
   }

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.cnzz_analytics
-  link(rel="preconnect" href="//s4.cnzz.com")
-
 if theme.cloudflare_analytics
   link(rel="preconnect" href="//static.cloudflareinsights.com")
 
@@ -18,5 +15,5 @@ if theme.microsoft_clarity
 if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1
   link(rel="preconnect" href="//fonts.googleapis.com" crossorigin='')
 
-if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
+if !theme.asset.busuanzi && (theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv)
   link(rel="preconnect" href="//busuanzi.ibruce.info")

layout/includes/header/index.pug

@@ -1,6 +1,6 @@
 if !theme.disable_top_img && page.top_img !== false
   if is_post()
-    - var top_img = page.top_img || page.cover || page.randomcover
+    - var top_img = page.top_img || page.cover || theme.default_top_img
   else if is_page()
     - var top_img = page.top_img || theme.default_top_img
   else if is_tag()
@@ -17,7 +17,7 @@ if !theme.disable_top_img && page.top_img !== false
     - var top_img = page.top_img || theme.default_top_img
 
   if top_img !== false
-    - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
+    - var imgSource = top_img && isImgOrUrl(top_img) ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
     - var bg_img = top_img ? imgSource : ''
     - var site_title = page.title || page.tag || page.category || config.title
     - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
@@ -28,7 +28,9 @@ else
   - var top_img = false
   - var isHomeClass = 'not-top-img'
 
-header#page-header(class=isHomeClass style=bg_img)
+- const isFixedClass = theme.nav.fixed ? ' fixed' : ''
+
+header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
   !=partial('includes/header/nav', {}, {cache: true})
   if top_img !== false
     if is_post()
@@ -42,7 +44,7 @@ header#page-header(class=isHomeClass style=bg_img)
             span#subtitle
         if(theme.social)
           #site_social_icons
-            !=fragment_cache('social', function(){return partial('includes/header/social')})
+            !=partial('includes/header/social', {}, {cache: true})
       #scroll-down
         i.fas.fa-angle-down.scroll-down-effects
     else

layout/includes/header/nav.pug

@@ -1,17 +1,21 @@
 nav#nav
-  span#blog_name
+  span#blog-info
-    a#site-name(href=url_for('/')) #[=config.title]
+    a(href=url_for('/') title=config.title)
+      if theme.nav.logo
+        img.site-icon(src=url_for(theme.nav.logo))
+      if theme.nav.display_title
+        span.site-name=config.title
     
   #menus
-    if (theme.algolia_search.enable || theme.local_search.enable)
+    if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
       #search-button
-        a.site-page.social-icon.search
+        a.site-page.social-icon.search(href="javascript:void(0);")
           i.fas.fa-search.fa-fw
           span=' '+_p('search.title')
     !=partial('includes/header/menu_item', {}, {cache: true})
 
     #toggle-menu
-      a.site-page
+      a.site-page(href="javascript:void(0);")
         i.fas.fa-bars.fa-fw
 
 

layout/includes/header/post-info.pug

@@ -75,6 +75,10 @@
           +pvBlock('','','')
             span#twikoo_visitors
               i.fa-solid.fa-spinner.fa-spin
+        else if commentUse[0] === 'Artalk' && theme.artalk.visitor
+          +pvBlock('','','')
+            span#ArtalkPV
+              i.fa-solid.fa-spinner.fa-spin
         else if theme.busuanzi.page_pv
           +pvBlock('','post-meta-pv-cv','')
             span#busuanzi_value_page_pv
@@ -130,9 +134,13 @@
             +countBlock
               a(href=url_for(page.path) + '#post-comment')
                 span.fb-comments-count(data-href=urlNoIndex())
-                  i.fa-solid.fa-spinner.fa-spin
           when 'Remark42'
             +countBlock
               a(href=url_for(page.path) + '#post-comment')
                 span.remark42__counter(data-url=urlNoIndex())
+                  i.fa-solid.fa-spinner.fa-spin
+          when 'Artalk'
+            +countBlock
+              a(href=url_for(page.path) + '#post-comment')
+                span.artalk-count
                   i.fa-solid.fa-spinner.fa-spin

layout/includes/header/social.pug

@@ -1,4 +1,4 @@
 each url, icon in theme.social
   a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank" 
   title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1]))
-    i(class=icon)
+    i(class=icon style=url.split('||')[2] === undefined ? '' : `color: ${trim(url.split('||')[2]).replace(/[\'\"]/g, '')};`)

layout/includes/layout.pug

@@ -8,8 +8,8 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
   head
     include ./head.pug
   body
-    if theme.preloader
+    if theme.preloader.enable
-      !=partial('includes/loading/loading', {}, {cache: true})
+      !=partial('includes/loading/index', {}, {cache: true})
 
     if theme.background
       #web_bg
@@ -33,7 +33,7 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
           if (footerBg === true)
             - var footer_bg = bg_img
           else
-            - var footer_bg = theme.footer_bg.indexOf('/') !== -1 ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
+            - var footer_bg = isImgOrUrl(theme.footer_bg) ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
         else
           - var footer_bg = ''
 
@@ -44,5 +44,4 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
       include ./404.pug
 
     include ./rightside.pug
-    !=partial('includes/third-party/search/index', {}, {cache: true})
     include ./additional-js.pug

layout/includes/loading/fullpage-loading.pug

@@ -0,0 +1,33 @@
+#loading-box
+  .loading-left-bg
+  .loading-right-bg
+  .spinner-box
+    .configure-border-1
+      .configure-core
+    .configure-border-2
+      .configure-core
+    .loading-word= _p('loading')
+
+script.
+  (()=>{
+    const $loadingBox = document.getElementById('loading-box')
+    const $body = document.body
+    const preloader = {
+      endLoading: () => {
+        $body.style.overflow = ''
+        $loadingBox.classList.add('loaded')
+      },
+      initLoading: () => {
+        $body.style.overflow = 'hidden'
+        $loadingBox.classList.remove('loaded')
+      }
+    }
+
+    preloader.initLoading()
+    window.addEventListener('load',() => { preloader.endLoading() })
+
+    if (!{theme.pjax && theme.pjax.enable}) {
+      document.addEventListener('pjax:send', () => { preloader.initLoading() })
+      document.addEventListener('pjax:complete', () => { preloader.endLoading() })
+    }
+  })()

layout/includes/loading/index.pug

@@ -0,0 +1,4 @@
+if theme.preloader.source === 1
+  include ./fullpage-loading.pug
+else
+  include ./pace.pug

layout/includes/loading/loading-js.pug

@@ -1,13 +0,0 @@
-script.
-  var preloader = {
-    endLoading: () => {
-      document.body.style.overflow = 'auto';
-      document.getElementById('loading-box').classList.add("loaded")
-    },
-    initLoading: () => {
-      document.body.style.overflow = '';
-      document.getElementById('loading-box').classList.remove("loaded")
-
-    }
-  }
-  window.addEventListener('load',preloader.endLoading())

layout/includes/loading/loading.pug

@@ -1,9 +0,0 @@
-#loading-box
-  .loading-left-bg
-  .loading-right-bg
-  .spinner-box
-    .configure-border-1
-      .configure-core
-    .configure-border-2
-      .configure-core
-    .loading-word= _p('loading')

layout/includes/loading/pace.pug

@@ -0,0 +1,11 @@
+script.
+  window.paceOptions = {
+    restartOnPushState: false
+  }
+
+  document.addEventListener('pjax:send', () => {
+    Pace.restart()
+  })
+
+link(rel="stylesheet", href=url_for(theme.preloader.pace_css_url || theme.asset.pace_default_css))
+script(src=url_for(theme.asset.pace_js))

layout/includes/mixins/article-sort.pug

@@ -11,7 +11,10 @@ mixin articleSort(posts)
       .article-sort-item(class=no_cover)
         if article.cover && theme.cover.archives_enable
           a.article-sort-item-img(href=url_for(article.path) title=title)
-            img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
+            if article.cover_type === 'img'
+              img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
+            else
+              div(style=`background: ${article.cover}`)
         .article-sort-item-info
           .article-sort-item-time
             i.far.fa-calendar-alt

layout/includes/mixins/post-ui.pug

@@ -14,7 +14,10 @@ mixin postUI(posts)
       if post_cover && theme.cover.index_enable
         .post_cover(class=leftOrRight)
           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)
+            if article.cover_type === 'img'
+              img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+            else
+              div.post-bg(style=`background: ${post_cover}`)
       .recent-post-info(class=no_cover)
         a.article-title(href=url_for(link) title=title)= title
         .article-meta-wrap
@@ -67,7 +70,7 @@ mixin postUI(posts)
                 block
               span.article-meta-label= ' ' + _p('card_post_count')
           
-          if theme.comments.card_post_count
+          if theme.comments.card_post_count && theme.comments.use
             case theme.comments.use[0]
               when 'Disqus'
                 +countBlockInIndex
@@ -86,7 +89,7 @@ mixin postUI(posts)
               when 'Waline'
                 +countBlockInIndex
                   a(href=url_for(link) + '#post-comment')
-                    span.waline-comment-count(id=url_for(link))
+                    span.waline-comment-count(data-path=url_for(link))
                       i.fa-solid.fa-spinner.fa-spin
               when 'Twikoo'
                 +countBlockInIndex
@@ -96,12 +99,16 @@ mixin postUI(posts)
                 +countBlockInIndex
                   a(href=url_for(link) + '#post-comment')
                     span.fb-comments-count(data-href=urlNoIndex(article.permalink))
-                      i.fa-solid.fa-spinner.fa-spin
               when 'Remark42'
                 +countBlockInIndex
                   a(href=url_for(link) + '#post-comment')
                     span.remark42__counter(data-url=urlNoIndex(article.permalink))
                       i.fa-solid.fa-spinner.fa-spin
+              when 'Artalk'
+                +countBlockInIndex
+                  a(href=url_for(link) + '#post-comment')
+                    span.artalk-count(data-page-key=url_for(link))
+                      i.fa-solid.fa-spinner.fa-spin
 
         //- Display the article introduction on homepage
         case theme.index_post_content.method

layout/includes/page/flink.pug

@@ -1,6 +1,10 @@
 #article-container
   .flink
-    if page.flink_url
+    - let { content, random, flink_url } = page
+    - let pageContent = content
+
+    if flink_url || random
+      - const linkData = flink_url ? false : site.data.link || false
       script.
         (()=>{
           const replaceSymbol = (str) => {
@@ -8,34 +12,45 @@
           }
 
           let result = ""
-          fetch("!{url_for(page.flink_url)}")
+          const add = (str) => {
-            .then(response => response.json())
+            for(let i = 0; i < str.length; i++){
-            .then(str => {
+              const replaceClassName = replaceSymbol(str[i].class_name)
-              for(let i = 0; i < str.length; i++){
+              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 replaceClassName = replaceSymbol(str[i].class_name)
+              const classDesc = str[i].class_desc ? `<div class="flink-desc">${str[i].class_desc}</div>` : ""
-                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>`
+              let listResult = ""
+              const lists = str[i].link_list
+              if (!{random === true}) {
+                lists.sort(() => Math.random() - 0.5)
+              }
+              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>`
               }
 
-              document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
+              result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
-            })
+            }
+
+            document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
+            window.lazyLoadInstance && window.lazyLoadInstance.update()
+          }
+
+          const linkData = !{JSON.stringify(linkData)}
+          if (!{Boolean(flink_url)}) {
+            fetch("!{url_for(flink_url)}")
+              .then(response => response.json())
+              .then(add)
+          } else if (linkData) {
+            add(linkData)
+          }
         })()
 
     else
@@ -63,6 +78,5 @@
 
           - result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
 
-        - page.content = result + page.content
+        - pageContent = result + pageContent
-    != page.content
+    != pageContent
-

layout/includes/page/tags.pug

@@ -1,2 +1,2 @@
 .tag-cloud-list.is-center
-  !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})
+  !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})

layout/includes/pagination.pug

@@ -13,19 +13,23 @@ if is_post()
     if(prev)
       - var hasPageNext = next ? 'pull-left' : 'pull-full'
       .prev-post(class=hasPageNext)
-        - var pagination_cover = prev.cover === false ? prev.randomcover : prev.cover
+        a(href=url_for(prev.path) title=prev.title)
-        a(href=url_for(prev.path))
+          if prev.cover_type === 'img'
-          img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
+            img.cover(src=url_for(prev.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
+          else
+            .cover(style=`background: ${prev.cover || 'var(--default-bg-color)'}`)
           .pagination-info
             .label=_p('pagination.prev')
             .prev_info=prev.title
           
     if(next)
       - var hasPagePrev = prev ? 'pull-right' : 'pull-full'
-      - var pagination_cover = next.cover == false ? next.randomcover : next.cover
       .next-post(class=hasPagePrev)
-        a(href=url_for(next.path))
+        a(href=url_for(next.path) title=next.title)
-          img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
+          if next.cover_type === 'img'
+            img.cover(src=url_for(next.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
+          else
+            .cover(style=`background: ${next.cover || 'var(--default-bg-color)'}`)
           .pagination-info
             .label=_p('pagination.next')
             .next_info=next.title

layout/includes/rightside.pug

@@ -23,7 +23,7 @@ mixin rightsideItem(array)
             i.fas.fa-list-ul
       when 'chat'
         if chat_btn
-          button#chat_btn(type="button" title=_p("rightside.chat"))
+          button#chat-btn(type="button" title=_p("rightside.chat"))
             i.fas.fa-sms
       when 'comment'
         if commentsJsLoad
@@ -57,4 +57,5 @@ mixin rightsideItem(array)
       +rightsideItem(showArray)
 
     button#go-up(type="button" title=_p("rightside.back_to_top"))
+      span.scroll-percent
       i.fas.fa-arrow-up

layout/includes/sidebar.pug

@@ -14,5 +14,5 @@
         .headline= _p('aside.categories') 
         .length-num= site.categories.length
 
-    hr
+    hr.custom-hr
     !=partial('includes/header/menu_item', {}, {cache: true})

layout/includes/third-party/abcjs/abcjs.pug

@@ -0,0 +1,15 @@
+script.
+  (() => {
+    function abcjsInit() {
+      function abcjsFn() {
+        for (let abcContainer of document.getElementsByClassName("abc-music-sheet")) {
+          ABCJS.renderAbc(abcContainer, abcContainer.innerHTML, {responsive: 'resize'})
+        }
+      }
+      
+      typeof ABCJS === 'object' ? abcjsFn()
+        : getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)
+    }
+
+    window.pjax ? abcjsInit() : document.addEventListener('DOMContentLoaded', abcjsInit)
+  })()

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

@@ -0,0 +1,6 @@
+if theme.abcjs && theme.abcjs.enable
+  if theme.abcjs.per_page
+    if is_post() || is_page()
+      include ./abcjs.pug
+  else if page.abcjs
+    include ./abcjs.pug

layout/includes/third-party/card-post-count/artalk.pug

@@ -0,0 +1,35 @@
+- const { server, site } = theme.artalk
+
+script.
+  (() => {
+    const getArtalkCount = async() => {
+      try {
+        const eleGroup = document.querySelectorAll('#recent-posts .artalk-count')
+        const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-page-key'))
+
+        const headerList = {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'Origin': window.location.origin
+          },
+          body: new URLSearchParams({
+            'site_name': '!{site}',
+            'type':'page_comment',
+            'page_keys': keyArray
+          })
+        }
+
+        const res = await fetch('!{server}/api/stat', headerList)
+        const result = await res.json()
+
+        keyArray.forEach((key, index) => {
+          eleGroup[index].textContent = result.data[key] || 0
+        })
+      } catch (err) {
+        console.error(err)
+      }
+    }
+
+    window.pjax ? getArtalkCount() : window.addEventListener('load', getArtalkCount)
+  })()

layout/includes/third-party/card-post-count/fb.pug

@@ -1,10 +1,13 @@
+- const fbSDKVer = 'v16.0'
+- const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
+
 script.
   (()=>{
     function loadFBComment () {
-      if (typeof FB === 'object') FB.XFBML.parse()
+      if (typeof FB === 'object') FB.XFBML.parse(document.getElementById('recent-posts'))
       else {
         let ele = document.createElement('script')
-        ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v9.0')
+        ele.setAttribute('src','!{fbSDK}')
         ele.setAttribute('async', 'true')
         ele.setAttribute('defer', 'true')
         ele.setAttribute('crossorigin', 'anonymous')

layout/includes/third-party/card-post-count/index.pug

@@ -11,4 +11,6 @@ case theme.comments.use[0]
   when 'Facebook Comments'
     include ./fb.pug
   when 'Remark42'
-    include ./remark42.pug
+    include ./remark42.pug
+  when 'Artalk'
+    include ./artalk.pug

layout/includes/third-party/card-post-count/twikoo.pug

@@ -18,7 +18,7 @@ script.
           includeReply: false
         }).then(function (res) {
           document.querySelectorAll('#recent-posts .twikoo-count').forEach((item,index) => {
-            item.innerText = res[index].count
+            item.textContent = res[index].count
           })
         }).catch(function (err) {
           console.log(err)

layout/includes/third-party/card-post-count/waline.pug

@@ -1,17 +1,19 @@
 script.
   (() => {
-    function loadWaline () {
+    async function loadWaline () {
-      function initWaline () {
+      try {
-        let initData = {
+        const eleGroup = document.querySelectorAll('#recent-posts .waline-comment-count')
-          el: null,
+        const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-path'))
-          serverURL: '!{theme.waline.serverURL}',
-          comment: true
-        }
-        const waline = Waline.init(initData)
-      }
 
-      if (typeof Waline === 'function') initWaline() 
+        const res = await fetch(`!{theme.waline.serverURL}/api/comment?type=count&url=${keyArray}`, { method: 'GET' })
-      else getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+        const result = await res.json()
+        
+        result.data.forEach((count, index) => {
+          eleGroup[index].textContent = count
+        })
+      } catch (err) {
+        console.error(err)
+      }
     }
 
     window.pjax ? loadWaline() : window.addEventListener('load', loadWaline)

layout/includes/third-party/chat/chatra.pug

@@ -1,33 +1,50 @@
 //- https://chatra.io/help/api/
 script.
-  (function(d, w, c) {
+  (() => {
-      w.ChatraID = '#{theme.chatra.id}';
+    const isChatBtn = !{theme.chat_btn}
-      var s = d.createElement('script');
+    const isChatHideShow = !{theme.chat_hide_show}
-      w[c] = w[c] || function() {
-          (w[c].q = w[c].q || []).push(arguments);
-      };
-      s.async = true;
-      s.src = 'https://call.chatra.io/chatra.js';
-      if (d.head) d.head.appendChild(s);
-  })(document, window, 'Chatra');
 
-  if (!{theme.chat_btn}) {
+    if (isChatBtn) {
-    var chatBtnFn = () => {
+      const close = () => {
-      var chatBtn = document.getElementById("chat_btn")
+        Chatra('minimizeWidget')
-      chatBtn.addEventListener("click", function(){
-        Chatra('openChat')
-      });
-    }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
         Chatra('hide')
       }
-      function chatBtnShow () {
+
+      const open = () => {
+        Chatra('openChat', true)
         Chatra('show')
       }
+
+      window.ChatraSetup = {
+        startHidden: true
+      }
+    
+      window.chatBtnFn = () => {
+        const isShow = document.getElementById('chatra').classList.contains('chatra--expanded')
+        isShow ? close() : open()
+      }
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          Chatra('hide')
+        },
+        show: () => {
+          Chatra('show')
+        }
+      }
     }
-  }
+
+    (function(d, w, c) {
+      w.ChatraID = '#{theme.chatra.id}'
+      var s = d.createElement('script')
+      w[c] = w[c] || function() {
+          (w[c].q = w[c].q || []).push(arguments)
+      }
+      s.async = true
+      s.src = 'https://call.chatra.io/chatra.js'
+      if (d.head) d.head.appendChild(s)
+    })(document, window, 'Chatra')
+
+  })()
 
 

layout/includes/third-party/chat/crisp.pug

@@ -1,36 +1,45 @@
 script.
-  window.$crisp = [];
+  (() => {
-  window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}";
+    window.$crisp = [];
-  (function () {
+    window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}";
-    d = document;
+    (function () {
-    s = d.createElement("script");
+      d = document;
-    s.src = "https://client.crisp.chat/l.js";
+      s = d.createElement("script");
-    s.async = 1;
+      s.src = "https://client.crisp.chat/l.js";
-    d.getElementsByTagName("head")[0].appendChild(s);
+      s.async = 1;
-  })();
+      d.getElementsByTagName("head")[0].appendChild(s);
-  $crisp.push(["safe", true])
+    })();
+    $crisp.push(["safe", true])
 
-  if (!{theme.chat_btn}) {
+    const isChatBtn = !{theme.chat_btn}
-    $crisp.push(["do", "chat:hide"])
+    const isChatHideShow = !{theme.chat_hide_show}
-    $crisp.push(["on", "chat:closed", function() {
+
-      $crisp.push(["do", "chat:hide"])
+    if (isChatBtn) {
-    }])
+      const open = () => {
-    var chatBtnFn = () => {
-      var chatBtn = document.getElementById("chat_btn")
-      chatBtn.addEventListener("click", function(){
         $crisp.push(["do", "chat:show"])
         $crisp.push(["do", "chat:open"])
+      }
 
-      });
+      const close = () => {
-    }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
         $crisp.push(["do", "chat:hide"])
       }
-      function chatBtnShow () {
+
-        $crisp.push(["do", "chat:show"])
+      close()
+      $crisp.push(["on", "chat:closed", function() {
+        close()
+      }])
+
+      window.chatBtnFn = () => {
+        $crisp.is("chat:visible") ? close() : open()
+      }
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          $crisp.push(["do", "chat:hide"])
+        },
+        show: () => {
+          $crisp.push(["do", "chat:show"])
+        }
       }
     }
-  }
+  })()

layout/includes/third-party/chat/daovoice.pug

@@ -1,40 +1,40 @@
 //- https://guide.daocloud.io/daovoice/javascript-api-5869833.html
 script.
-  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice")
+  (() => {
+    (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice")
 
-script.
+    const isChatBtn = !{theme.chat_btn}
-  var isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
-  daovoice('init', {
-    app_id: '!{theme.daovoice.app_id}',},{
-    launcher: { 
-       disableLauncherIcon: isChatBtn // 悬浮 ICON 是否显示
-    },
-  });
-  daovoice('update');
 
-  if (isChatBtn) {
+    daovoice('init', {
-    var chatBtnFn = () => {
+      app_id: '!{theme.daovoice.app_id}',},{
-      var chatBtn = document.getElementById("chat_btn")
+      launcher: { 
-      chatBtn.addEventListener("click", function(){
+        disableLauncherIcon: isChatBtn
-        daovoice('show')
+      },
-      });
+    });
-    }
+    daovoice('update');
-    chatBtnFn()
+
-  } else {
+    if (isChatBtn) {
-    if (!{theme.chat_hide_show}) {
+      window.chatBtnFn = () => {
-      function chatBtnHide () {
+        const isShow = document.getElementById('daodream-messenger').classList.contains('daodream-messenger-active')
-        daovoice('update', {},{
+        isShow ? daovoice('hide') : daovoice('show')
-          launcher: { 
-          disableLauncherIcon: true // 悬浮 ICON 是否显示
-          },
-        });
       }
-      function chatBtnShow () {
+    } else if (isChatHideShow) {
-        daovoice('update', {},{
+      window.chatBtn = {
-          launcher: { 
+        hide: () => {
-          disableLauncherIcon: false // 悬浮 ICON 是否显示
+          daovoice('update', {},{
-          },
+            launcher: {
-        });
+              disableLauncherIcon: true
+            }
+          })
+        },
+        show: () => {
+          daovoice('update', {}, {
+            launcher: {
+              disableLauncherIcon: false
+            }
+          })
+        }
       }
     }
-  }
+  })()

layout/includes/third-party/chat/gitter.pug

@@ -1,43 +0,0 @@
-if theme.chat_btn
-  script.
-    ((window.gitter = {}).chat = {}).options = {
-      disableDefaultChat: true,
-    };
-    document.addEventListener('gitter-sidecar-ready', (e) => {
-      const GitterChat = e.detail.Chat
-      let chat
-
-      function initGitter () {
-        chat = new GitterChat({
-          room: '#{theme.gitter.room}',
-          activationElement: '#chat_btn'
-        });
-      }
-
-      initGitter()
-
-      if (!{theme.pjax.enable}) {
-        document.addEventListener('pjax:complete', () => {
-          chat.destroy()
-          initGitter()
-        })
-      }
-
-    })
-else
-  script.
-    ((window.gitter = {}).chat = {}).options = {
-      room: '#{theme.gitter.room}',
-    };
-
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
-        document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'none'
-      }
-
-      function chatBtnShow () {
-        document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'block'
-      }
-    }
-
-script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

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

@@ -4,7 +4,7 @@ else if theme.tidio && theme.tidio.enable
   include ./tidio.pug
 else if theme.daovoice && theme.daovoice.enable
   include ./daovoice.pug
-else if theme.gitter && theme.gitter.enable
-  include ./gitter.pug
 else if theme.crisp && theme.crisp.enable
-  include ./crisp.pug
+  include ./crisp.pug
+else if theme.messenger && theme.messenger.enable
+  include ./messenger.pug

layout/includes/third-party/chat/messenger.pug

@@ -0,0 +1,44 @@
+- let { pageID, lang } = theme.messenger
+- lang = theme.comments.use && theme.comments.use.includes('Facebook Comments') ? theme.facebook_comments.lang : lang
+
+#fb-customer-chat.fb-customerchat(page_id=pageID attribution='biz_inbox')
+
+script.
+  (() => {
+    document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '<div id="fb-root"></div>')
+
+    window.fbAsyncInit = function() {
+      FB.init({
+        xfbml: true,
+        version: 'v16.0'
+      });
+    };
+
+    (function(d, s, id) {
+      var js, fjs = d.getElementsByTagName(s)[0];
+      if (d.getElementById(id)) return;
+      js = d.createElement(s); js.id = id;
+      js.src = 'https://connect.facebook.net/!{lang}/sdk/xfbml.customerchat.js';
+      fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));
+
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
+
+    if (isChatBtn) {
+      window.chatBtnFn = () => {
+        const isShow = document.querySelector('.fb_customer_chat_bounce_in_v2')
+        isShow ? FB.CustomerChat.hide() : FB.CustomerChat.show()
+      }
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          FB.CustomerChat.hide()
+        },
+        show: () => {
+          FB.CustomerChat.show(false)
+        }
+      }
+    }
+  })()
+

layout/includes/third-party/chat/tidio.pug

@@ -1,41 +1,45 @@
 script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async)
+script.
+  (() => {
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
 
-if theme.chat_btn
+    if (isChatBtn) {
-  script.
+      let isShow = false
-    function onTidioChatApiReady() {
+      const close = () => {
-      window.tidioChatApi.hide();
+        window.tidioChatApi.hide()
-      window.tidioChatApi.on("close", function() {
+        isShow = false
-        window.tidioChatApi.hide();
+      }
-      });
+      
-    }
+      const open = () => {
-    if (window.tidioChatApi) {
+        window.tidioChatApi.open()
-      window.tidioChatApi.on("ready", onTidioChatApiReady);
+        window.tidioChatApi.show()
-    } else {
+        isShow = true
-      document.addEventListener("tidioChat-ready", onTidioChatApiReady);
+      }
-    }
 
-    var chatBtnFn = () => {
+      const onTidioChatApiReady = () => {
-      document.getElementById("chat_btn").addEventListener("click", function(){
+        window.tidioChatApi.hide()
-        window.tidioChatApi.show();
+        window.tidioChatApi.on("close", close)
-        window.tidioChatApi.open();
+      }
-      });
-    }
-    chatBtnFn()
-
-else if theme.chat_hide_show
-  script.
-    function chatBtnHide () {
       if (window.tidioChatApi) {
-        //- window.tidioChatApi.hide();
+        window.tidioChatApi.on("ready", onTidioChatApiReady)
-        document.getElementById('tidio-chat').style.display= 'none'
+      } else {
+        document.addEventListener("tidioChat-ready", onTidioChatApiReady)
+      }
+
+      window.chatBtnFn = () => {
+        if (!window.tidioChatApi) return
+        isShow ? close() : open()
+      }
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          window.tidioChatApi && window.tidioChatApi.hide()
+        },
+        show: () => {
+          window.tidioChatApi && window.tidioChatApi.show()
+        }
       }
     }
-
+  })()
-    function chatBtnShow () {
-      if (window.tidioChatApi) {
-        //- window.tidioChatApi.show();
-        document.getElementById('tidio-chat').style.display= 'block'
-      } 
-    }
-
 

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

@@ -0,0 +1,50 @@
+- const { server, site, option } = theme.artalk
+
+script.
+  function loadArtalk () {
+    function initArtalk () {
+      window.artalkItem = new Artalk(Object.assign({
+        el: '#artalk-wrap',
+        server: '!{server}',
+        site: '!{site}',
+        pageKey: location.pathname,
+        darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
+        countEl: '.artalk-count'
+      },!{JSON.stringify(option)}))
+
+      if (GLOBAL_CONFIG.lightbox === 'null') return
+      window.artalkItem.use(ctx => {
+        ctx.on('list-loaded', () => {
+          ctx.getCommentList().forEach(comment => {
+            const $content = comment.getRender().$content
+            btf.loadLightbox($content.querySelectorAll('img:not([atk-emoticon])'))
+          })
+        })
+      })
+    }
+
+    if (typeof window.artalkItem === 'object') initArtalk()
+    else {
+      getCSS('!{theme.asset.artalk_css}').then(()=>{
+        getScript('!{theme.asset.artalk_js}').then(initArtalk)
+      })
+    }
+  }
+
+  function artalkChangeMode (theme) {
+    const artalkWrap = document.getElementById('artalk-wrap')
+    if (!(artalkWrap && artalkWrap.children.length)) return
+    const isDark = theme === 'dark'
+    window.artalkItem.setDarkMode(isDark)
+  }
+
+  btf.addModeChange('artalk', artalkChangeMode)
+  
+  if ('!{theme.comments.use[0]}' === 'Artalk' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
+    else loadArtalk()
+  } else {
+    function loadOtherComment () {
+      loadArtalk()
+    }
+  }

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

@@ -2,19 +2,21 @@
 
 script.
   function loadDisqus () {
-    var disqus_config = function () {
+    const disqus_config = function () {
       this.page.url = '!{ page.permalink }'
       this.page.identifier = '!{ url_for(page.path) }'
       this.page.title = '!{ disqusPageTitle }'
-    };
+    }
 
-    window.disqusReset = () => {
+    const disqusReset = () => {
       DISQUS.reset({
         reload: true,
         config: disqus_config
       })
     }
 
+    btf.addModeChange('disqus', disqusReset)
+
     if (window.DISQUS) disqusReset()
     else {
       (function() { 
@@ -24,10 +26,6 @@ script.
         (d.head || d.body).appendChild(s);
       })();
     }
-
-    document.getElementById('darkmode').addEventListener('click', () => {
-      setTimeout(() => window.disqusReset(), 200)
-    })
   }
 
   if ('!{theme.comments.use[0]}' === 'Disqus' || !!{theme.comments.lazyload}) {

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

@@ -2,13 +2,6 @@
 
 script.
   function loadDisqusjs () {
-    function addDisqusjsCSS () {
-      const ele = document.createElement('link')
-      ele.rel = 'stylesheet'
-      ele.href= '!{url_for(theme.asset.disqusjs_css)}'
-      document.getElementsByTagName('head')[0].appendChild(ele)
-    }
-
     function initDisqusjs () {
       window.disqusjs = null
       disqusjs = new DisqusJS(Object.assign({
@@ -30,11 +23,11 @@ script.
     }
 
 
-    document.getElementById('darkmode').addEventListener('click', themeChange)
+    btf.addModeChange('disqusjs', themeChange)
 
     if (window.disqusJsLoad) initDisqusjs()
     else {
-      addDisqusjsCSS()
+      getCSS('!{url_for(theme.asset.disqusjs_css)}')
       getScript('!{url_for(theme.asset.disqusjs)}').then(initDisqusjs)
       window.disqusJsLoad = true
     }

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

@@ -1,20 +1,40 @@
-#fb-root
+- const fbSDKVer = 'v16.0'
+- const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
+
 script.
   function loadFBComment () {
-    var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+    document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '<div id="fb-root"></div>')
-    document.getElementsByClassName('fb-comments')[0].setAttribute('data-colorscheme',themeNow)
 
-    if (typeof FB === 'object') FB.XFBML.parse()
+    const themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+    const $fbComment = document.getElementsByClassName('fb-comments')[0]
+    $fbComment.setAttribute('data-colorscheme',themeNow)
+    $fbComment.setAttribute('data-href', '!{urlNoIndex(page.permalink)}')
+
+    if (typeof FB === 'object') {
+      FB.XFBML.parse(document.getElementsByClassName('post-meta-commentcount')[0])
+      FB.XFBML.parse(document.getElementById('post-comment'))
+    }
     else {
       let ele = document.createElement('script')
-      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v13.0&appId=!{theme.facebook_comments.app_id}&autoLogAppEvents=1')
+      ele.setAttribute('src','!{fbSDK}')
       ele.setAttribute('async', 'true')
       ele.setAttribute('defer', 'true')
       ele.setAttribute('crossorigin', 'anonymous')
+      ele.setAttribute('id', 'facebook-jssdk')
       document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele)
-    }   
+    }
   }
 
+  function fbModeChange (theme) {
+    const $fbComment = document.getElementsByClassName('fb-comments')[0]
+    if ($fbComment && typeof FB === 'object') {
+      $fbComment.setAttribute('data-colorscheme',theme)
+      FB.XFBML.parse(document.getElementById('post-comment'))
+    }
+  }
+
+  btf.addModeChange('facebook_comments', fbModeChange)
+
   if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment)
     else loadFBComment()

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

@@ -1,16 +1,20 @@
-- const { repo, repo_id, category_id, option } = theme.giscus
+- const { repo, repo_id, category_id, theme:themes, option } = theme.giscus
-- const themes = theme.giscus.theme
+- const giscusUrl = theme.asset.giscus || 'https://giscus.app/client.js'
-script.
+- const giscusOriginUrl = new URL(giscusUrl).origin
-  function loadGiscus () {
-    let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
 
+script.
+  function getGiscusTheme (theme) {
+    return theme === 'dark' ? '!{themes.dark}' : '!{themes.light}'
+  }
+
+  function loadGiscus () {
     const config = Object.assign({
-      src: 'https://giscus.app/client.js',
+      src: '!{giscusUrl}',
       'data-repo': '!{repo}',
       'data-repo-id': '!{repo_id}',
       'data-category-id': '!{category_id}',
       'data-mapping': 'pathname',
-      'data-theme': nowTheme,
+      'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
       'data-reactions-enabled': '1',
       crossorigin: 'anonymous',
       async: true
@@ -23,22 +27,22 @@ script.
     document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele)
   }
 
-  function changeGiscusTheme () {
+  function changeGiscusTheme (theme) {
-    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
-
     function sendMessage(message) {
-      const iframe = document.querySelector('iframe.giscus-frame');
+      const iframe = document.querySelector('iframe.giscus-frame')
-      if (!iframe) return;
+      if (!iframe) return
-      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+      iframe.contentWindow.postMessage({ giscus: message }, '!{giscusOriginUrl}')
     }
 
     sendMessage({
       setConfig: {
-        theme: theme
+        theme: getGiscusTheme(theme)
       }
     });
   }
 
+  btf.addModeChange('giscus', changeGiscusTheme)
+
   if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
     else loadGiscus()

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

@@ -1,11 +1,4 @@
 script.
-  function addGitalkSource () {
-    const ele = document.createElement('link')
-    ele.rel = 'stylesheet'
-    ele.href= '!{url_for(theme.asset.gitalk_css)}'
-    document.getElementsByTagName('head')[0].appendChild(ele)
-  }
-
   function loadGitalk () {
     function initGitalk () {
       var gitalk = new Gitalk(Object.assign({
@@ -23,7 +16,7 @@ script.
 
     if (typeof Gitalk === 'function') initGitalk()
     else {
-      addGitalkSource()
+      getCSS('!{url_for(theme.asset.gitalk_css)}')
       getScript('!{url_for(theme.asset.gitalk)}').then(initGitalk)
     }
   }
@@ -31,7 +24,7 @@ script.
   function commentCount(n){
     let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
     if (isCommentCount) {
-      isCommentCount.innerHTML= n
+      isCommentCount.textContent= n
     }
   }
 

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

@@ -1,5 +1,5 @@
 - let defaultComment = theme.comments.use[0]
-hr
+hr.custom-hr
 #post-comment
   .comment-head
     .comment-headline
@@ -42,3 +42,5 @@ hr
                         data-width="100%")
           when 'Remark42'
             #remark42
+          when 'Artalk'
+            #artalk-wrap

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

@@ -19,6 +19,8 @@ each name in theme.comments.use
     when 'Giscus'
       !=partial('includes/third-party/comments/giscus', {}, {cache: true})
     when 'Facebook Comments'
-      !=partial('includes/third-party/comments/facebook_comments', {}, {cache: true})
+      include ./facebook_comments.pug
     when 'Remark42'
       !=partial('includes/third-party/comments/remark42', {}, {cache: true})
+    when 'Artalk'
+      !=partial('includes/third-party/comments/artalk', {}, {cache: true})

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

@@ -51,11 +51,12 @@ script.
     }
   }
 
-  document.getElementById('darkmode').addEventListener('click',()=>{
+  function remarkChangeMode (theme) {
     if (!window.REMARK42) return
-    let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
     window.REMARK42.changeTheme(theme)
-  })
+  }
+
+  btf.addModeChange('remark42', remarkChangeMode)
 
   if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42)

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

@@ -23,7 +23,7 @@ script.
         urls: [window.location.pathname],
         includeReply: false
       }).then(function (res) {
-        countELement.innerText = res[0].count
+        countELement.textContent = res[0].count
       }).catch(function (err) {
         console.error(err);
       });

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

@@ -12,10 +12,10 @@ script.
     document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
   }
 
-  function utterancesTheme () {
+  function utterancesTheme (theme) {
     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 theme = theme === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
       const message = {
         type: 'set-theme',
         theme: theme
@@ -24,6 +24,8 @@ script.
     }
   }
 
+  btf.addModeChange('utterances', utterancesTheme)
+
   if ('!{theme.comments.use[0]}' === 'Utterances' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
     else loadUtterances()

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

@@ -3,13 +3,6 @@
 
 script.
   function loadWaline () {
-    function insertCSS () {
-      const link = document.createElement("link")
-      link.rel = "stylesheet"
-      link.href = "!{url_for(theme.asset.waline_css)}"
-      document.head.appendChild(link)
-    }
-
     function initWaline () {
       const waline = Waline.init(Object.assign({
         el: '#waline-wrap',
@@ -21,10 +14,11 @@ script.
       }, !{JSON.stringify(option)}))
     }
 
-    if (typeof Waline === 'function') initWaline()
+    if (typeof Waline === 'object') initWaline()
     else {
-      insertCSS()
+      getCSS('!{url_for(theme.asset.waline_css)}').then(() => {
-      getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+        getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+      })
     }
   }
 

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

@@ -3,11 +3,11 @@ script.
   if (!window.MathJax) {
     window.MathJax = {
       tex: {
-        inlineMath: [ ['$','$'], ["\\(","\\)"]],
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
         tags: 'ams'
       },
       chtml: {
-        scale: 1.2
+        scale: 1.1
       },
       options: {
         renderActions: {
@@ -21,17 +21,7 @@ script.
               math.end = {node: text, delim: '', n: 0}
               doc.math.push(math)
             }
-          }, ''],
+          }, '']
-          insertScript: [200, () => {
-            document.querySelectorAll('mjx-container:not\([display]\)').forEach(node => {
-              const target = node.parentNode
-              if (target.nodeName.toLowerCase() === 'li') {
-                target.parentNode.classList.add('has-jax')
-              } else {
-                target.classList.add('has-jax')
-              }
-            });
-          }, '', false]
         }
       }
     }
@@ -44,5 +34,5 @@ script.
   } else {
     MathJax.startup.document.state(0)
     MathJax.texReset()
-    MathJax.typeset()
+    MathJax.typesetPromise()
   }

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

@@ -1,26 +1,38 @@
 script.
   (() => {
-    const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
+    const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
-    if ($mermaidWrap.length) {
+    if ($mermaid.length === 0) return
-      window.runMermaid = () => {
+    const runMermaid = () => {
-        window.loadMermaid = true
+      window.loadMermaid = true
-        const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
+      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
 
-        Array.from($mermaidWrap).forEach((item, index) => {
+      Array.from($mermaid).forEach((item, index) => {
-          const mermaidSrc = item.firstElementChild
+        const mermaidSrc = item.firstElementChild
-          const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
+        const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
-          const mermaidID = 'mermaid-' + index
+        const mermaidID = 'mermaid-' + index
-          const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
+        const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
-          mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
+
-            mermaidSrc.insertAdjacentHTML('afterend', svgCode)
+        const renderFn = mermaid.render(mermaidID, mermaidDefinition)
+
+        const renderV10 = () => {
+          renderFn.then(({svg}) => {
+            mermaidSrc.insertAdjacentHTML('afterend', svg)
           })
-        })
+        }
-      }
 
-      const loadMermaid = () => {
+        const renderV9 = svg => {
-        window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
+          mermaidSrc.insertAdjacentHTML('afterend', svg)
-      }
+        }
 
-      window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
+        typeof renderFn === 'string' ? renderV9(renderFn) : renderV10()
+      })
     }
+
+    const loadMermaid = () => {
+      window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
+    }
+
+    btf.addModeChange('mermaid', runMermaid)
+
+    window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
   })()

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

@@ -0,0 +1,110 @@
+- const { server, site, option } = theme.artalk
+- const avatarCdn = option !== null && option.gravatar && option.gravatar.mirror
+- const avatarDefault = option !== null && option.gravatar && (option.gravatar.params || option.gravatar.default)
+
+script.
+  window.addEventListener('load', () => {
+    const changeContent = (content) => {
+      if (content === '') return content
+
+      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '<div class=\'aside-list-item\'>'
+
+          if (!{theme.newest_comments.avatar}) {
+            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
+          }
+
+          result += `<div class='content'>
+          <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>`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
+
+    const getSetting = async () => {
+      try {
+        const res = await fetch('!{server}/api/conf', { method: 'GET' })
+        return await res.json()
+      } catch (e) {
+        console.log(e)
+      }
+    }
+
+    const headerList = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Origin': window.location.origin
+      },
+      body: new URLSearchParams({
+        'site_name': '!{site}',
+        'limit': '!{theme.newest_comments.limit}',
+        'type':'latest_comments'
+      })
+    }
+
+    const getComment = async () => {
+      try {
+        const res = await fetch('!{server}/api/stat', headerList)
+        const result = await res.json()
+        const avatarStr = await getSetting()
+        const { mirror, params, default:defaults } = avatarStr.data.frontend_conf.gravatar
+        const avatarCdn = !{avatarCdn} || mirror
+        let avatarDefault = !{avatarDefault} || params || defaults
+        avatarDefault = avatarDefault.startsWith('d=') ? avatarDefault : `d=${avatarDefault}`
+        const artalk = result.data.map(function (e) {
+          return {
+            'avatar': `${avatarCdn}${e.email_encrypted}?${avatarDefault}`,
+            'content': changeContent(e.content_marked),
+            'nick': e.nick,
+            'url': e.page_url,
+            'date': e.date,
+          }
+        })
+        saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24))
+        generateHtml(artalk)
+      } catch (e) {
+        console.log(e)
+        const $dom = document.querySelector('#card-newest-comments .aside-list')
+        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+      }
+    }
+
+    const newestCommentInit = () => {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
+        const data = saveToLocal.get('artalk-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
+        }
+      }
+    }
+
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })

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

@@ -32,7 +32,7 @@ script.
           generateHtml(disqusArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 

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

@@ -58,7 +58,7 @@ script.
           findTrueUrl(githubArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 

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

@@ -25,4 +25,6 @@ if use
       - userRepo = theme.utterances.repo
       include ./github-issues.pug
     when 'Remark42'
-      include ./remark42.pug  
+      include ./remark42.pug
+    when 'Artalk'
+      include ./artalk.pug

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

@@ -60,7 +60,7 @@ script.
           generateHtml(remark42)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 

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

@@ -36,7 +36,7 @@ script.
           generateHtml(twikooArray)
         }).catch(function (err) {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
       }
 

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

@@ -79,7 +79,7 @@ script.
           generateHtml(valineArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         }) 
     }
 

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

@@ -1,6 +1,6 @@
 script.
   window.addEventListener('load', () => {
-    const changeContent = (content) => {
+    const changeContent = content => {
       if (content === '') return content
 
       content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
@@ -41,31 +41,26 @@ script.
       window.pjax && window.pjax.refresh($dom)
     }
 
-    const getComment = () => {
+    const getComment = async () => {
-      const loadWaline = () => {
+      try {
-        Waline.RecentComments({
+        const res = await fetch('!{theme.waline.serverURL}/api/comment?type=recent&count=!{theme.newest_comments.limit}', { method: 'GET' })
-          serverURL: '!{theme.waline.serverURL}',
+        const result = await res.json()
-          count: !{theme.newest_comments.limit}
+        const walineArray = result.data.map(e => {
-        }).then(({comments}) => {
+          return {
-          const walineArray = comments.map(e => {
+            'content': changeContent(e.comment),
-            return {
+            'avatar': e.avatar,
-              'content': changeContent(e.comment),
+            'nick': e.nick,
-              'avatar': e.avatar,
+            'url': e.url + '#' + e.objectId,
-              'nick': e.nick,
+            'date': e.time || e.insertedAt
-              'url': e.url + '#' + e.objectId,
+          }
-              'date': e.insertedAt,
+        })
-            }
+        saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))
-          })
+        generateHtml(walineArray)
-          saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))
+      } catch (err) {
-          generateHtml(walineArray)
+        console.error(err)
-        }).catch(e => {
+        const $dom = document.querySelector('#card-newest-comments .aside-list')
-          const $dom = document.querySelector('#card-newest-comments .aside-list')
+        $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
-        }) 
       }
-
-      if (typeof Waline === 'function') loadWaline() 
-      else getScript('!{url_for(theme.asset.waline_js)}').then(loadWaline)
     }
 
     const newestCommentInit = () => {

layout/includes/third-party/pjax.pug

@@ -7,7 +7,7 @@ if theme.pjax.exclude
 
 - let choose = theme.comments.use
 if choose
-  if theme.Open_Graph_meta && (choose.includes('Livere') || choose.includes('Utterances') || choose.includes('Giscus'))
+  if theme.Open_Graph_meta.enable && (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"]')
@@ -30,7 +30,6 @@ script.
     window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
     window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
 
-    typeof preloader === 'object' && preloader.initLoading()
     document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
     
     if (window.aplayers) {
@@ -63,7 +62,6 @@ script.
 
     GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
 
-    typeof chatBtnFn === 'function' && chatBtnFn()
     typeof panguInit === 'function' && panguInit()
 
     // google analytics
@@ -76,8 +74,6 @@ script.
 
     // prismjs
     typeof Prism === 'object' && Prism.highlightAll()
-
-    typeof preloader === 'object' && preloader.endLoading()
   })
 
   document.addEventListener('pjax:error', (e) => {

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

@@ -16,3 +16,7 @@
           .algolia-poweredBy
   
   #search-mask
+
+  script(src=url_for(theme.asset.algolia_search))
+  script(src=url_for(theme.asset.instantsearch))
+  script(src=url_for(theme.asset.algolia_js))

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

@@ -0,0 +1,27 @@
+- const { appId, apiKey, indexName, option } = theme.docsearch
+
+.docsearch-wrap
+  #docsearch(style="display:none")
+  link(rel="stylesheet" href=url_for(theme.asset.docsearch_css))
+  script(src=url_for(theme.asset.docsearch_js))
+  script.
+    (() => {
+      docsearch(Object.assign({
+        appId: '!{appId}',
+        apiKey: '!{apiKey}',
+        indexName: '!{indexName}',
+        container: '#docsearch',
+      }, !{JSON.stringify(option)}))
+
+
+      const searchClickFn = () => {
+        document.querySelector('#search-button > .search').addEventListener('click', () => {
+          document.querySelector('.DocSearch-Button').click()
+        })
+      }
+
+      searchClickFn()
+      window.addEventListener('pjax:complete', searchClickFn)
+    })()
+
+

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

@@ -1,4 +1,6 @@
 if theme.algolia_search.enable
   include ./algolia.pug
 else if theme.local_search.enable
-  include ./local-search.pug
+  include ./local-search.pug
+else if theme.docsearch.enable
+  include ./docsearch.pug

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

@@ -15,6 +15,8 @@
         .local-search-box
           input(placeholder=_p("search.local_search.input_placeholder") type="text").local-search-box--input
       hr
-      #local-search-results
+      #local-search-results.no-result
+      #local-search-stats-wrap
+  #search-mask
 
-  #search-mask
+  script(src=url_for(theme.asset.local_search))

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

@@ -1,3 +1,4 @@
-.social-share(data-image=url_for(page.cover|| theme.avatar.img) data-sites= theme.sharejs.sites)
+- const coverVal = page.cover_type === 'img' ? page.cover : theme.avatar.img
+.social-share(data-image=url_for(coverVal) data-sites= theme.sharejs.sites)
 link(rel='stylesheet' href=url_for(theme.asset.sharejs_css) media="print" onload="this.media='all'")
 script(src=url_for(theme.asset.sharejs) defer)

layout/includes/third-party/subtitle.pug

@@ -1,6 +1,30 @@
-- const { effect,loop,source,sub } = theme.subtitle
+- const { effect,source,sub,typed_option } = theme.subtitle
 - let subContent = sub || new Array()
 
+script.
+  window.typedJSFn = {
+    init: (str) => {
+      window.typed = new Typed('#subtitle', Object.assign({
+        strings: str,
+        startDelay: 300,
+        typeSpeed: 150,
+        loop: true,
+        backSpeed: 50,
+      }, !{JSON.stringify(typed_option)}))
+    },
+    run: (subtitleType) => {
+      if (!{effect}) {
+        if (typeof Typed === 'function') {
+          subtitleType()
+        } else {
+          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+        }
+      } else {
+        subtitleType()
+      }
+    }
+  }
+
 case source
   when 1
     script.
@@ -12,28 +36,13 @@ case source
               const from = '出自 ' + data.from
               const sub = !{JSON.stringify(subContent)}
               sub.unshift(data.hitokoto, from)
-              window.typed = new Typed('#subtitle', {
+              typedJSFn.init(sub)
-                strings: sub,
-                startDelay: 300,
-                typeSpeed: 150,
-                loop: !{loop},
-                backSpeed: 50,
-              })
             } else {
-              document.getElementById('subtitle').innerHTML = data.hitokoto
+              document.getElementById('subtitle').textContent = data.hitokoto
             }
           })
       }
-
+      typedJSFn.run(subtitleType)
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
 
   when 2
     script.
@@ -44,28 +53,13 @@ case source
             const from = '出自 ' + str[1]
             const sub = !{JSON.stringify(subContent)}
             sub.unshift(con, from)
-            window.typed = new Typed('#subtitle', {
+            typedJSFn.init(sub)
-              strings: sub,
-              startDelay: 300,
-              typeSpeed: 150,
-              loop: !{loop},
-              backSpeed: 50,
-            })
           } else {
-            document.getElementById('subtitle').innerHTML = con
+            document.getElementById('subtitle').textContent = con
           }
         })
       }
-
+      typedJSFn.run(subtitleType)
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
 
   when 3
     script.
@@ -76,53 +70,23 @@ case source
               const sub = !{JSON.stringify(subContent)}
               const content = result.data.content
               sub.unshift(content)
-              window.typed = new Typed('#subtitle', {
+              typedJSFn.init(sub)
-                strings: sub,
-                startDelay: 300,
-                typeSpeed: 150,
-                loop: !{loop},
-                backSpeed: 50,
-              })
             } else {
-              document.getElementById('subtitle').innerHTML = result.data.content
+              document.getElementById('subtitle').textContent = result.data.content
             }
           })
         })
       }
-
+      typedJSFn.run(subtitleType)
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
 
   default
     - subContent = subContent.length ? subContent : new Array(config.subtitle)
     script.
       function subtitleType () {
-        if (!{effect}) { 
+        if (!{effect}) {
-          window.typed = new Typed("#subtitle", {
+          typedJSFn.init(!{JSON.stringify(subContent)})
-            strings: !{JSON.stringify(subContent)},
-            startDelay: 300,
-            typeSpeed: 150,
-            loop: !{loop},
-            backSpeed: 50
-          })
         } else {
-          document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
+          document.getElementById("subtitle").textContent = !{JSON.stringify(subContent[0])}
         }
       }
-
+      typedJSFn.run(subtitleType)
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }

layout/includes/widget/card_author.pug

@@ -24,4 +24,4 @@ if theme.aside.card_author.enable
   
     if(theme.social)
         .card-info-social-icons.is-center
-          !=fragment_cache('social', function(){return partial('includes/header/social')}) 
+          !=partial('includes/header/social', {}, {cache: true})

layout/includes/widget/card_newest_comment.pug

@@ -1,4 +1,4 @@
-if theme.newest_comments.enable && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0])
+if theme.newest_comments.enable && theme.comments.use && !['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_recent_post.pug

@@ -14,7 +14,10 @@ if theme.aside.card_recent_post.enable
         .aside-list-item(class=no_cover)
           if post_cover && theme.cover.aside_enable
             a.thumbnail(href=url_for(link) title=title)
-              img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+              if article.cover_type === 'img'
+                img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+              else
+                div(style=`background: ${post_cover}`)
           .content
             a.title(href=url_for(link) title=title)= title
             if theme.aside.card_recent_post.sort === 'updated'

layout/includes/widget/card_tags.pug

@@ -5,8 +5,10 @@ if theme.aside.card_tags.enable
         i.fas.fa-tags
         span= _p('aside.card_tags')
 
-      - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
+      - let { limit, orderby, order } = theme.aside.card_tags
+      - limit = limit === 0 ? 0 : limit || 40
+
       if theme.aside.card_tags.color
-        .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.15, maxfontsize: 1.45, limit: tagLimit, unit: 'em'})
+        .card-tag-cloud!= cloudTags({source: site.tags, orderby: orderby, order: order, minfontsize: 1.15, maxfontsize: 1.45, limit: limit, unit: 'em'})
       else
-        .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})
+        .card-tag-cloud!= tagcloud({orderby: orderby, order: order, min_font: 1.1, max_font: 1.5, amount: limit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})

layout/includes/widget/index.pug

@@ -19,7 +19,7 @@
     //- page
     !=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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.3.1",
+  "version": "4.9.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -23,7 +23,7 @@
     "email": "my@crazywong.com"
   },
   "dependencies": {
-    "hexo-renderer-stylus": "^2.1.0",
+    "hexo-renderer-stylus": "^3.0.0",
     "hexo-renderer-pug": "^3.0.0"
   },
   "homepage": "https://butterfly.js.org/",

plugins.yml

@@ -1,11 +1,11 @@
-algolia_search_v4:
+algolia_search:
   name: algoliasearch
   file: dist/algoliasearch-lite.umd.js
-  version: 4.13.1
+  version: 4.17.1
-instantsearch_v4:
+instantsearch:
   name: instantsearch.js
   file: dist/instantsearch.production.min.js
-  version: 4.42.0
+  version: 4.56.1
 pjax:
   name: pjax
   file: pjax.min.js
@@ -13,11 +13,11 @@ pjax:
 gitalk:
   name: gitalk
   file: dist/gitalk.min.js
-  version: 1.7.2
+  version: 1.8.0
 gitalk_css:
   name: gitalk
   file: dist/gitalk.css
-  version: 1.7.2
+  version: 1.8.0
 blueimp_md5:
   name: blueimp-md5
   file: js/md5.min.js
@@ -25,29 +25,29 @@ blueimp_md5:
 valine:
   name: valine
   file: dist/Valine.min.js
-  version: 1.4.18
+  version: 1.5.1
 disqusjs:
   name: disqusjs
   file: dist/browser/disqusjs.es2015.umd.min.js
-  version: 3.0.1
+  version: 3.0.2
 disqusjs_css:
   name: disqusjs
   file: dist/browser/styles/disqusjs.css
-  version: 3.0.1
+  version: 3.0.2
 twikoo:
   name: twikoo
   file: dist/twikoo.all.min.js
-  version: 1.5.11
+  version: 1.6.16
 waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 2.6.1
+  version: 2.15.5
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 2.6.1
+  version: 2.15.5
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js
@@ -64,16 +64,16 @@ katex:
   name: katex
   file: dist/katex.min.css
   other_name: KaTeX
-  version: 0.16.0
+  version: 0.16.7
 katex_copytex:
   name: katex
   file: dist/contrib/copy-tex.min.js
   other_name: KaTeX
-  version: 0.16.0
+  version: 0.16.7
 mermaid:
   name: mermaid
   file: dist/mermaid.min.js
-  version: 9.1.2
+  version: 10.2.2
 canvas_ribbon:
   name: butterfly-extsrc
   file: dist/canvas-ribbon.min.js
@@ -105,33 +105,33 @@ ClickShowText:
 lazyload:
   name: vanilla-lazyload
   file: dist/lazyload.iife.min.js
-  version: 17.3.1
+  version: 17.8.3
 instantpage:
   name: instant.page
   file: instantpage.js
-  version: 5.1.0
+  version: 5.2.0
 typed:
   name: typed.js
-  file: lib/typed.min.js
+  file: dist/typed.umd.js
-  version: 2.0.12
+  version: 2.0.16
 pangu:
   name: pangu
   file: dist/browser/pangu.min.js
   version: 4.0.7
-fancybox_css_v4:
+fancybox_css:
   name: '@fancyapps/ui'
-  file: dist/fancybox.css
+  file: dist/fancybox/fancybox.css
-  version: 4.0.27
+  version: 5.0.19
   other_name: fancyapps-ui
-fancybox_v4:
+fancybox:
   name: '@fancyapps/ui'
-  file: dist/fancybox.umd.js
+  file: dist/fancybox/fancybox.umd.js
-  version: 4.0.27
+  version: 5.0.19
   other_name: fancyapps-ui
 medium_zoom:
   name: medium-zoom
   file: dist/medium-zoom.min.js
-  version: 1.0.6
+  version: 1.0.8
 snackbar_css:
   name: node-snackbar
   file: dist/snackbar.min.css
@@ -140,11 +140,11 @@ snackbar:
   name: node-snackbar
   file: dist/snackbar.min.js
   version: 0.1.16
-fontawesomeV6:
+fontawesome:
   name: '@fortawesome/fontawesome-free'
   file: css/all.min.css
   other_name: font-awesome
-  version: 6.1.1
+  version: 6.4.0
 flickr_justified_gallery_js:
   name: flickr-justified-gallery
   file: dist/fjGallery.min.js
@@ -169,14 +169,46 @@ prismjs_js:
   name: prismjs
   file: prism.js
   other_name: prism
-  version: 1.28.0
+  version: 1.29.0
 prismjs_lineNumber_js:
   name: prismjs
   file: plugins/line-numbers/prism-line-numbers.min.js
   other_name: prism
-  version: 1.28.0
+  version: 1.29.0
 prismjs_autoloader:
   name: prismjs
   file: plugins/autoloader/prism-autoloader.min.js
   other_name: prism
-  version: 1.28.0
+  version: 1.29.0
+artalk_js:
+  name: artalk
+  file: dist/Artalk.js
+  version: 2.5.5
+artalk_css:
+  name: artalk
+  file: dist/Artalk.css
+  version: 2.5.5
+pace_js:
+  name: pace-js
+  other_name: pace
+  file: pace.min.js
+  version: 1.2.4
+pace_default_css:
+  name: pace-js
+  other_name: pace
+  file: themes/blue/pace-theme-minimal.css
+  version: 1.2.4
+docsearch_js:
+  name: '@docsearch/js'
+  other_name: docsearch-js
+  file: dist/umd/index.js
+  version: 3.4.0
+docsearch_css:
+  name: '@docsearch/css'
+  other_name: docsearch-css
+  file: dist/style.css
+  version: 3.4.0
+abcjs_basic_js:
+  name: abcjs
+  file: dist/abcjs-basic-min.js
+  version: 6.2.2

scripts/events/cdn.js

@@ -12,7 +12,7 @@ hexo.extend.filter.register('before_generate', () => {
   const themeConfig = hexo.theme.config
   const { CDN } = themeConfig
 
-  const thirdPartySrc = hexo.render.renderSync({ path: path.join(hexo.theme_dir,'/plugins.yml'), engine: 'yaml'})
+  const thirdPartySrc = hexo.render.renderSync({ path: path.join(hexo.theme_dir, '/plugins.yml'), engine: 'yaml' })
   const internalSrc = {
     main: {
       name: 'hexo-theme-butterfly',
@@ -41,20 +41,19 @@ hexo.extend.filter.register('before_generate', () => {
     }
   }
 
-  const minFile = (file) => {
+  const minFile = file => {
     return file.replace(/(?<!\.min)\.(js|css)$/g, ext => '.min' + ext)
   }
 
   const createCDNLink = (data, type, cond = '') => {
-    Object.keys(data).map(key => {
+    Object.keys(data).forEach(key => {
       let { name, version, file, other_name } = data[key]
-
-      const min_file = minFile(file)
       const cdnjs_name = other_name || name
       const cdnjs_file = file.replace(/^[lib|dist]*\/|browser\//g, '')
       const min_cdnjs_file = minFile(cdnjs_file)
       if (cond === 'internal') file = `source/${file}`
-      const verType = CDN.version ? `@${version}` : ''
+      const min_file = minFile(file)
+      const verType = CDN.version ? (type === 'local' ? `?v=${version}` : `@${version}`) : ''
 
       const value = {
         version,
@@ -65,18 +64,19 @@ hexo.extend.filter.register('before_generate', () => {
         min_cdnjs_file,
         cdnjs_name
       }
+
       const cdnSource = {
-        local: cond === 'internal' ? cdnjs_file : `/pluginsSrc/${name}/${file}`,
+        local: cond === 'internal' ? `${cdnjs_file + verType}` : `/pluginsSrc/${name}/${file + verType}`,
         jsdelivr: `https://cdn.jsdelivr.net/npm/${name}${verType}/${min_file}`,
         unpkg: `https://unpkg.com/${name}${verType}/${file}`,
         cdnjs: `https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}`,
         custom: (CDN.custom_format || '').replace(/\$\{(.+?)\}/g, (match, $1) => value[$1])
       }
-      
+
       data[key] = cdnSource[type]
     })
 
-    if (cond === 'internal') data['main_css'] = 'css/index.css'
+    if (cond === 'internal') data.main_css = 'css/index.css' + (CDN.version ? `?v=${version}` : '')
     return data
   }
 
@@ -89,6 +89,9 @@ hexo.extend.filter.register('before_generate', () => {
     return obj
   }
 
-  themeConfig.asset = Object.assign(createCDNLink(internalSrc,CDN.internal_provider,'internal'),
+  themeConfig.asset = Object.assign(
-  createCDNLink(thirdPartySrc,CDN.third_party_provider), deleteNullValue(CDN.option))
+    createCDNLink(internalSrc, CDN.internal_provider, 'internal'),
+    createCDNLink(thirdPartySrc, CDN.third_party_provider),
+    deleteNullValue(CDN.option)
+  )
 })

scripts/events/comment.js

@@ -11,4 +11,4 @@ hexo.extend.filter.register('before_generate', () => {
   }
   const newArray = use.map(item => item.toLowerCase().replace(/\b[a-z]/g, s => s.toUpperCase()))
   themeConfig.comments.use = newArray
-})
+})

scripts/events/init.js

@@ -1,20 +1,19 @@
-const logger = require('hexo-log')()
-
 hexo.extend.filter.register('before_generate', () => {
   // Get first two digits of the Hexo version number
-  const hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1')
+  const { version, log, locals } = hexo
+  const hexoVer = version.replace(/(^.*\..*)\..*/, '$1')
 
   if (hexoVer < 5.3) {
-    logger.error('Please update Hexo to V5.3.0 or higher!')
+    log.error('Please update Hexo to V5.3.0 or higher!')
-    logger.error('請把 Hexo 升級到 V5.3.0 或更高的版本！')
+    log.error('請把 Hexo 升級到 V5.3.0 或更高的版本！')
     process.exit(-1)
   }
 
-  if (hexo.locals.get) {
+  if (locals.get) {
-    const data = hexo.locals.get('data')
+    const data = locals.get('data')
     if (data && data.butterfly) {
-      logger.error(" 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' ")
+      log.error("'butterfly.yml' is deprecated. Please use '_config.butterfly.yml'")
-      logger.error(" 'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml' ")
+      log.error("'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml'")
       process.exit(-1)
     }
   }

scripts/events/welcome.js

@@ -1,17 +1,13 @@
-const logger = require('hexo-log')()
-
 hexo.on('ready', () => {
   const { version } = require('../../package.json')
-  logger.info(`
+  hexo.log.info(`
   ===================================================================
-                                                                     
+      #####  #    # ##### ##### ###### #####  ###### #      #   #
-      #####  #    # ##### ##### ###### #####  ###### #      #   #    
+      #    # #    #   #     #   #      #    # #      #       # #
-      #    # #    #   #     #   #      #    # #      #       # #     
+      #####  #    #   #     #   #####  #    # #####  #        #
-      #####  #    #   #     #   #####  #    # #####  #        #     
+      #    # #    #   #     #   #      #####  #      #        #
-      #    # #    #   #     #   #      #####  #      #        #      
+      #    # #    #   #     #   #      #   #  #      #        #
-      #    # #    #   #     #   #      #   #  #      #        #    
+      #####   ####    #     #   ###### #    # #      ######   #
-      #####   ####    #     #   ###### #    # #      ######   #  
-
                             ${version}
   ===================================================================`)
 })

scripts/filters/random_cover.js

@@ -6,40 +6,40 @@
 'use strict'
 
 hexo.extend.filter.register('before_post_render', function (data) {
-  const { config } = this
+  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/i
-  if (config.post_asset_folder) {
+  let randomCover
-    const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
+  let coverVal = data.cover
+
+  // Add path to top_img and cover if post_asset_folder is enabled
+  if (hexo.config.post_asset_folder) {
     const topImg = data.top_img
-    const cover = data.cover
     if (topImg && topImg.indexOf('/') === -1 && imgTestReg.test(topImg)) data.top_img = data.path + topImg
-    if (cover && cover.indexOf('/') === -1) data.cover = data.path + cover
+    if (coverVal && coverVal.indexOf('/') === -1 && imgTestReg.test(coverVal)) data.cover = data.path + coverVal
   }
 
-  if (data.cover === false) {
+  const randomCoverFn = () => {
-    data.randomcover = randomCover()
+    const theme = hexo.theme.config
-    return data
+    if (!(theme.cover && theme.cover.default_cover)) return false
+    if (!Array.isArray(theme.cover.default_cover)) return theme.cover.default_cover
+    const num = Math.floor(Math.random() * theme.cover.default_cover.length)
+    return theme.cover.default_cover[num]
+  }
+
+  if (coverVal === false) return data
+
+  // If cover is not set, use random cover
+  if (!coverVal) {
+    randomCover = randomCoverFn()
+    data.cover = randomCover
+    coverVal = randomCover // update coverVal
+  }
+
+  if (coverVal) {
+    if (coverVal.indexOf('//') !== -1 || imgTestReg.test(coverVal)) {
+      data.cover_type = 'img'
+      return data
+    }
   }
 
-  data.cover = data.cover || randomCover()
   return data
 })
-
-function randomCover () {
-  const theme = hexo.theme.config
-  let cover
-  let num
-
-  if (theme.cover && theme.cover.default_cover) {
-    if (!Array.isArray(theme.cover.default_cover)) {
-      cover = theme.cover.default_cover
-      return cover
-    } else {
-      num = Math.floor(Math.random() * theme.cover.default_cover.length)
-      cover = theme.cover.default_cover[num]
-      return cover
-    }
-  } else {
-    cover = theme.default_top_img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
-    return cover
-  }
-}

scripts/helpers/findArchiveLength.js

@@ -1,13 +1,13 @@
 hexo.extend.helper.register('findArchiveLength', function (func) {
-  const allPostsLength = this.site.posts.length;
+  const allPostsLength = this.site.posts.length
-  if (hexo.config.archive_generator && hexo.config.archive_generator.enable === false ) return allPostsLength
+  if (hexo.config.archive_generator && hexo.config.archive_generator.enable === false) return allPostsLength
   const { yearly, monthly, daily } = hexo.config.archive_generator
   const { year, month, day } = this.page
   if (yearly === false || !year) return allPostsLength
 
   const posts = this.site.posts.sort('date')
 
-  const compareFunc = (type,y1,m1,d1,y2,m2,d2) => {
+  const compareFunc = (type, y1, m1, d1, y2, m2, d2) => {
     if (type === 'year') {
       return y1 === y2
     } else if (type === 'month') {
@@ -18,15 +18,15 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
   }
 
   const generateDateObj = (type) => {
-    let dateObj = []
+    const dateObj = []
     let length = 0
 
     posts.forEach(post => {
-      let date = post.date.clone()
+      const date = post.date.clone()
       const year = date.year()
       const month = date.month() + 1
       const day = date.date()
-      let lastData = dateObj[length - 1]
+      const lastData = dateObj[length - 1]
 
       if (!lastData || !compareFunc(type, lastData.year, lastData.month, lastData.day, year, month, day)) {
         const name = type === 'year' ? year : type === 'month' ? `${year}-${month}` : `${year}-${month}-${day}`
@@ -40,12 +40,12 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
       } else {
         lastData.count++
       }
-    });
+    })
 
     return dateObj
   }
 
-  const data = func('createArchiveObj', ()=> {
+  const data = func('createArchiveObj', () => {
     const yearObj = yearly ? generateDateObj('year') : []
     const monthObj = monthly ? generateDateObj('month') : []
     const dayObj = daily ? generateDateObj('day') : []
@@ -55,4 +55,4 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
 
   const name = month ? day ? `${year}-${month}-${day}` : `${year}-${month}` : year
   return data.find(item => item.name === name).count
-})
+})

scripts/helpers/inject_head_js.js

@@ -7,10 +7,11 @@
 
 hexo.extend.helper.register('inject_head_js', function () {
   const { darkmode, aside } = this.theme
-
+  const start = darkmode.start ? darkmode.start : 6
+  const end = darkmode.end ? darkmode.end : 18
   const { theme_color } = hexo.theme.config
-  const themeColorLight = theme_color && theme_color.enable && theme_color.meta_theme_color_light || '#ffffff'
+  const themeColorLight = (theme_color && theme_color.enable && theme_color.meta_theme_color_light) || '#ffffff'
-  const themeColorDark = theme_color && theme_color.enable && theme_color.meta_theme_color_dark || '#0d0d0d'
+  const themeColorDark = (theme_color && theme_color.enable && theme_color.meta_theme_color_dark) || '#0d0d0d'
 
   const localStore = `
     win.saveToLocal = {
@@ -60,6 +61,23 @@ hexo.extend.helper.register('inject_head_js', function () {
     })
   `
 
+  const getCSS = `
+    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
+      const link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.href = url
+      if (id) link.id = id
+      link.onerror = reject
+      link.onload = link.onreadystatechange = function() {
+        const loadState = this.readyState
+        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
+        link.onload = link.onreadystatechange = null
+        resolve()
+      }
+      document.head.appendChild(link)
+    })
+  `
+
   let darkmodeJs = ''
   if (darkmode.enable) {
     darkmodeJs = `
@@ -93,7 +111,7 @@ hexo.extend.helper.register('inject_head_js', function () {
             else if (isNotSpecified || hasNoSupport) {
               const now = new Date()
               const hour = now.getHours()
-              const isNight = hour <= 6 || hour >= 18
+              const isNight = hour <= ${start} || hour >= ${end}
               isNight ? activateDarkMode() : activateLightMode()
             }
             window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
@@ -108,7 +126,7 @@ hexo.extend.helper.register('inject_head_js', function () {
       darkmodeJs += `
           const now = new Date()
           const hour = now.getHours()
-          const isNight = hour <= 6 || hour >= 18
+          const isNight = hour <= ${start} || hour >= ${end}
           if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
           else if (t === 'light') activateLightMode()
           else activateDarkMode()
@@ -144,5 +162,5 @@ hexo.extend.helper.register('inject_head_js', function () {
     detectApple()
     `
 
-  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + detectApple}})(window)</script>`
+  return `<script>(win=>{${localStore + getScript + getCSS + darkmodeJs + asideStatus + detectApple}})(window)</script>`
 })

scripts/helpers/page.js

@@ -24,11 +24,8 @@ hexo.extend.helper.register('page_description', function () {
 
 hexo.extend.helper.register('cloudTags', function (options = {}) {
   const env = this
-  let source = options.source
+  let { source, minfontsize, maxfontsize, limit, unit, orderby, order } = options
-  const minfontsize = options.minfontsize
+  unit = unit || 'px'
-  const maxfontsize = options.maxfontsize
-  const limit = options.limit
-  const unit = options.unit || 'px'
 
   let result = ''
   if (limit > 0) {
@@ -43,7 +40,7 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
   })
 
   const length = sizes.length - 1
-  source.forEach(tag => {
+  source.sort(orderby, order).forEach(tag => {
     const ratio = length ? sizes.indexOf(tag.length) / length : 0
     const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
     let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
@@ -54,8 +51,8 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
   return result
 })
 
-hexo.extend.helper.register('urlNoIndex', function (url = null) {
+hexo.extend.helper.register('urlNoIndex', function (url = null, trailingIndex = false, trailingHtml = false) {
-  return prettyUrls(url || this.url, { trailing_index: false, trailing_html: false })
+  return prettyUrls(url || this.url, { trailing_index: trailingIndex, trailing_html: trailingHtml })
 })
 
 hexo.extend.helper.register('md5', function (path) {
@@ -74,8 +71,8 @@ hexo.extend.helper.register('injectHtml', function (data) {
 hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
   if (page.year) {
     const dateStr = page.month ? `${page.year}-${page.month}` : `${page.year}`
-    const date_format = page.month ? hexo.theme.config.aside.card_archives.format : 'YYYY'
+    const dateFormat = page.month ? hexo.theme.config.aside.card_archives.format : 'YYYY'
-    return date(dateStr, date_format)
+    return date(dateStr, dateFormat)
   }
 
   const defaultTitle = this._p('page.archives')
@@ -95,3 +92,11 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
 
   return loop(menu) || defaultTitle
 })
+
+hexo.extend.helper.register('isImgOrUrl', function (path) {
+  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/i
+  if (path.indexOf('//') !== -1 || imgTestReg.test(path)) {
+    return true
+  }
+  return false
+})

scripts/helpers/related_post.js

@@ -15,7 +15,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
           title: post.title,
           path: post.path,
           cover: post.cover,
-          randomcover: post.randomcover,
+          cover_type: post.cover_type,
           weight: 1,
           updated: post.updated,
           created: post.date
@@ -50,13 +50,14 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
     result += '<div class="relatedPosts-list">'
 
     for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
-      const cover =
+      const cover = relatedPosts[i].cover || 'var(--default-bg-color)'
-        relatedPosts[i].cover === false
-          ? relatedPosts[i].randomcover
-          : relatedPosts[i].cover
       const title = this.escape_html(relatedPosts[i].title)
       result += `<div><a href="${this.url_for(relatedPosts[i].path)}" title="${title}">`
-      result += `<img class="cover" src="${this.url_for(cover)}" alt="cover">`
+      if (relatedPosts[i].cover_type === 'img') {
+        result += `<img class="cover" src="${this.url_for(cover)}" alt="cover">`
+      } else {
+        result += `<div class="cover" style="background: ${cover}"></div>`
+      }
       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>`
       } else {

scripts/tag/gallery.js

@@ -1,6 +1,9 @@
 /**
  * Butterfly
- * galleryGroup and allery
+ * galleryGroup and gallery
+ * {% galleryGroup [name] [descr] [url] [img] %}
+ * {% gallery [lazyload],[rowHeight],[limit] %}
+ * {% gallery url,[url],[lazyload],[rowHeight],[limit] %}
  */
 
 'use strict'
@@ -8,13 +11,45 @@
 const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function gallery (args, content) {
-  return `<div class="fj-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
+  const { data, languages } = hexo.theme.i18n
-          </div>`
+  args = args.join(' ').split(',')
+  let rowHeight, limit, lazyload, type, dataStr
+
+  if (args[0] === 'url') {
+    [type, dataStr, lazyload, rowHeight = 220, limit = 10] = args // url,[link],[lazyload],[rowHeight],[limit]
+  } else {
+    [lazyload, rowHeight = 220, limit = 10] = args // [lazyload],[rowHeight],[limit]
+    const regex = /!\[(.*?)\]\(([^\s]*)\s*(?:["'](.*?)["']?)?\s*\)/g
+    let m
+    const arr = []
+    while ((m = regex.exec(content)) !== null) {
+      if (m.index === regex.lastIndex) {
+        regex.lastIndex++
+      }
+      arr.push({
+        url: m[2],
+        alt: m[1],
+        title: m[3]
+      })
+    }
+
+    dataStr = JSON.stringify(arr)
+  }
+
+  type = type ? ' url' : ' data'
+  const lazyloadClass = lazyload === 'true' ? 'lazyload' : ''
+
+  return `<div class="gallery">
+    <div class="fj-gallery ${lazyloadClass + type}" data-rowHeight="${rowHeight}" data-limit="${limit}">
+    <span class="gallery-data">${dataStr}</span>
+    </div>
+    <button class="gallery-load-more"><span>${data[languages[0]].load_more}</span><i class="fa-solid fa-arrow-down"></i></button>
+    </div>`
 }
 
 function galleryGroup (args) {
   const name = args[0]
-  const desrc = args[1]
+  const descr = args[1]
   const url = urlFor(args[2])
   const img = urlFor(args[3])
 
@@ -23,7 +58,7 @@ function galleryGroup (args) {
   <img class="gallery-group-img no-lightbox" src='${img}' alt="Group Image Gallery">
   <figcaption>
   <div class="gallery-group-name">${name}</div>
-  <p>${desrc}</p>
+  <p>${descr}</p>
   <a href='${url}'></a>
   </figcaption>
   </figure>

scripts/tag/score.js

@@ -0,0 +1,22 @@
+/**
+ * Music Score
+ * {% score %}
+ */
+
+'use strict';
+
+function score(args, content) {
+    function escapeHtmlTags(s) {
+        let lookup = {
+            '&': "&",
+            '"': """,
+            '\'': "'",
+            '<': "&lt;",
+            '>': "&gt;"
+        };
+        return s.replace(/[&"'<>]/g, c => lookup[c]);
+    }
+    return `<div class="abc-music-sheet">${escapeHtmlTags(content)}</div>`;
+}
+
+hexo.extend.tag.register('score', score, {ends: true});

source/css/_global/function.styl

@@ -36,11 +36,11 @@
 
 .postImgHover
   &:hover
-    img
+    .cover
       opacity: .8
       transform: scale(1.1)
 
-  img
+  .cover
     position: absolute
     width: 100%
     height: 100%
@@ -72,6 +72,30 @@
       cursor: pointer
       transition: all .3s ease-out
 
+.custom-hr
+  position: relative
+  margin: 40px auto
+  border: 2px dashed var(--hr-border)
+
+  if hexo-config('hr_icon.enable')
+    width: calc(100% - 4px)
+
+    &:hover
+      &:before
+        left: calc(95% - 20px)
+
+    &:before
+      position: absolute
+      top: $hr-icon-top
+      left: 5%
+      z-index: 1
+      color: var(--hr-before-color)
+      content: $hr-icon
+      font-size: 20px
+      line-height: 1
+      transition: all 1s ease-in-out
+      @extend .fontawesomeIcon
+
 maxWidth600()
   @media screen and (max-width: 600px)
     {block}

source/css/_global/index.styl

@@ -6,7 +6,7 @@
   --hr-before-color: lighten($theme-hr-color, 30%)
   --search-bg: $search-bg
   --search-input-color: $search-input-color
-  --search-result-title: $search-result-title
+  --search-a-color: $search-a-color
   --preloader-bg: $preloader-bg
   --preloader-color: $preloader-word-color
   --tab-border-color: $tab-border-color
@@ -33,6 +33,9 @@
   --pseudo-hover: $pseudo-hover
   --headline-presudo: #a0a0a0
   --scrollbar-color: $scrollbar-color
+  --default-bg-color: $theme-color
+  --zoom-bg: #fff
+  --mark-bg: alpha($dark-black, .3)
 
 body
   position: relative
@@ -49,8 +52,8 @@ body
 
 // scrollbar - chrome/safari
 *::-webkit-scrollbar
-  width: 8px
+  width: 5px
-  height: 8px
+  height: 5px
 
 *::-webkit-scrollbar-thumb
   background: var(--scrollbar-color)
@@ -95,30 +98,6 @@ h6
 *
   box-sizing: border-box
 
-hr
-  position: relative
-  margin: 40px auto
-  border: 2px dashed var(--hr-border)
-
-  if hexo-config('hr_icon.enable')
-    width: calc(100% - 4px)
-
-    &:hover
-      &:before
-        left: calc(95% - 20px)
-
-    &:before
-      position: absolute
-      top: $hr-icon-top
-      left: 5%
-      z-index: 1
-      color: var(--hr-before-color)
-      content: $hr-icon
-      font-size: 20px
-      line-height: 1
-      transition: all 1s ease-in-out
-      @extend .fontawesomeIcon
-
 .table-wrap
   overflow-x: scroll
   margin: 0 0 20px
@@ -165,7 +144,7 @@ a
 if $site-name-font
   #site-title,
   #site-subtitle,
-  #site-name,
+  .site-name,
   #aside-content .author-info__name,
   #aside-content .author-info__description
     font-family: $site-name-font
@@ -173,9 +152,6 @@ if $site-name-font
 .is-center
   text-align: center
 
-.copy-true
-  user-select: all
-
 .pull-left
   float: left
 

source/css/_highlight/highlight.styl

@@ -75,6 +75,14 @@ $code-block
         &:hover
           border-bottom-color: var(--hl-color)
 
+    &.copy-true
+      user-select: all
+
+      & > table,
+      & > pre
+        display: block !important
+        opacity: 0
+
   .highlight-tools
     position: relative
     display: flex

source/css/_layout/aside.styl

@@ -52,7 +52,7 @@
         transition: all .3s
 
         &:hover
-          transform: rotate(540deg)
+          transform: rotate(360deg)
 
     #card-info-btn
       display: block
@@ -115,7 +115,7 @@
         width: w = 4.2em
         height: w
 
-        & > img
+        :first-child
           @extend .imgHover
 
       .content
@@ -291,8 +291,8 @@
           background: $theme-toc-color
           color: $toc-active-color
 
-  :only-child
+  .sticky_layout:only-child
-    > .card-widget
+    > :first-child
       margin-top: 0
 
   .card-more-btn

source/css/_layout/chat.styl

@@ -6,3 +6,12 @@ if hexo-config('chat_btn') == true && hexo-config('chatra.enable')
     height: 1px !important
     opacity: 0 !important
     pointer-events: none
+
+if hexo-config('chat_btn') == true && hexo-config('messenger.enable')
+  .fb_dialog,
+  .fb-customerchat
+    visibility: hidden !important
+    width: 1px !important
+    height: 1px !important
+    opacity: 0 !important
+    pointer-events: none

source/css/_layout/footer.styl

@@ -1,16 +1,16 @@
 #footer
   position: relative
-  background: $light-blue
+  background-color: $light-blue
   background-attachment: scroll
   background-position: bottom
   background-size: cover
 
-  if hexo-config('footer_bg') != false
+  if hexo-config('footer_bg') != false && hexo-config('mask.footer')
     &:before
       position: absolute
       width: 100%
       height: 100%
-      background-color: alpha($dark-black, .5)
+      background-color: var(--mark-bg)
       content: ''
 
 #footer-wrap