diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index 9f9067a26..1520be43f 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -10,7 +10,7 @@ body:
     attributes:
       value: |
         Please follow this Issue template to provide relevant information, such as source code repository, website URL and screenshots, which will help us investigate.
-        请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行调查。
+        请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行排查。
 
   - type: checkboxes
     id: checklist
@@ -20,11 +20,11 @@ body:
         I made sure I checked
         我确认我已经检查过了
       options:
-        - label: I am using Keep version 3.8.5 or later.
+        - label: I am using Keep version `4.0.0` or later. （使用 Keep 4.0.0 或更高版本）
           required: true
-        - label: I have already read the [Troubleshooting page of Hexo](https://hexo.io/docs/troubleshooting) and [Keep documents](https://keep-docs.xpoet.cn).
+        - label: I have already read the [Troubleshooting page of Hexo](https://hexo.io/docs/troubleshooting) and [Keep documents](https://keep-docs.xpoet.cn). （已阅读 [Hexo 故障处理页面](https://hexo.io/docs/troubleshooting) 和 [Keep 文档](https://keep-docs.xpoet.cn)）
           required: true
-        - label: I have already searched for current [issues](https://github.com/XPoet/hexo-theme-keep/issues), which does not help me.
+        - label: I have already searched for current [issues](https://github.com/XPoet/hexo-theme-keep/issues), which does not help me. （已搜索 [Issues](https://github.com/XPoet/hexo-theme-keep/issues)，对我没有帮助）
           required: true
 
   - type: textarea
@@ -45,9 +45,10 @@ body:
         Please provide the following information
         请提供以下信息
       value: |
-        - Links to demo site with this issue:
-        - Links to repository or source code of the blog:
-        - Screenshots:
+        - Links to demo site with this issue （链接到这个 Issue 的演示网站）
+        - Links to source code of the blog with this issue （链接到这个 Issue 的博客源代码）
+        - Screenshots（屏幕截图）
+
     validations:
       required: true
 
@@ -59,14 +60,15 @@ body:
         Please provide a detailed description of the steps to reproduce the issue
         请仔细描述重现步骤
       value: |
-        1. First step ...
-        2. Second step ...
-        3. Third step ...
+        1. First step ...   （第一步 ...）
+        2. Second step ...  （第二步 ...）
+        3. Third step ...   （第三步 ...）
+
     validations:
       required: true
 
   - type: markdown
-    id: env
+    id: env-info
     attributes:
       value: |
         ## Environment Information | 环境信息
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml
index e8ceca3ea..437b862ba 100644
--- a/.github/ISSUE_TEMPLATE/feature-request.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
@@ -10,7 +10,7 @@ body:
     attributes:
       value: |
         Please follow this Issue template to provide relevant information, such as source code repository, website URL and screenshots, which will help us investigate.
-        请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行调查。
+        请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行排查。
 
   - type: checkboxes
     id: checklist
@@ -20,11 +20,11 @@ body:
         I made sure I checked
         我确认我已经检查过了
       options:
-        - label: I am using Keep version 3.8.5 or later.
+        - label: I am using Keep version `4.0.0` or later. （使用 Keep 4.0.0 或更高版本）
           required: true
-        - label: I have already read the [Troubleshooting page of Hexo](https://hexo.io/docs/troubleshooting) and [Keep documents](https://keep-docs.xpoet.cn).
+        - label: I have already read the [Troubleshooting page of Hexo](https://hexo.io/docs/troubleshooting) and [Keep documents](https://keep-docs.xpoet.cn). （已阅读 [Hexo 故障处理页面](https://hexo.io/docs/troubleshooting) 和 [Keep 文档](https://keep-docs.xpoet.cn)）
           required: true
-        - label: I have already searched for current [issues](https://github.com/XPoet/hexo-theme-keep/issues), which does not help me.
+        - label: I have already searched for current [issues](https://github.com/XPoet/hexo-theme-keep/issues), which does not help me. （已搜索 [Issues](https://github.com/XPoet/hexo-theme-keep/issues)，对我没有帮助）
           required: true
 
   - type: textarea
@@ -35,9 +35,9 @@ body:
         Please provide the following information
         请提供以下信息
       value: |
-        - Detailed description of feature request:
-        - This feature request reference link:
-        - This feature request reference screenshots:
+        - Detailed description of feature request （功能需求的详情描述）
+        - This feature request reference link （功能需求的参考链接）
+        - This feature request reference screenshots （功能需求的参考截图）
     validations:
       required: true
 
diff --git a/.github/ISSUE_TEMPLATE/other.yml b/.github/ISSUE_TEMPLATE/other.yml
index 32879add6..1bb94066d 100644
--- a/.github/ISSUE_TEMPLATE/other.yml
+++ b/.github/ISSUE_TEMPLATE/other.yml
@@ -10,7 +10,7 @@ body:
     attributes:
       value: |
         Please follow this Issue template to provide relevant information, such as source code repository, website URL and screenshots, which will help us investigate.
-        请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行调查。
+        请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行排查。
 
   - type: checkboxes
     id: checklist
@@ -20,11 +20,11 @@ body:
         I made sure I checked
         我确认我已经检查过了
       options:
-        - label: I am using Keep version 3.8.5 or later.
+        - label: I am using Keep version `4.0.0` or later. （使用 Keep 4.0.0 或更高版本）
           required: true
-        - label: I have already read the [Troubleshooting page of Hexo](https://hexo.io/docs/troubleshooting) and [Keep documents](https://keep-docs.xpoet.cn).
+        - label: I have already read the [Troubleshooting page of Hexo](https://hexo.io/docs/troubleshooting) and [Keep documents](https://keep-docs.xpoet.cn). （已阅读 [Hexo 故障处理页面](https://hexo.io/docs/troubleshooting) 和 [Keep 文档](https://keep-docs.xpoet.cn)）
           required: true
-        - label: I have already searched for current [issues](https://github.com/XPoet/hexo-theme-keep/issues), which does not help me.
+        - label: I have already searched for current [issues](https://github.com/XPoet/hexo-theme-keep/issues), which does not help me. （已搜索 [Issues](https://github.com/XPoet/hexo-theme-keep/issues)，对我没有帮助）
           required: true
 
   - type: textarea
diff --git a/_config.yml b/_config.yml
index c36fc30f8..62c7c0201 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,63 +1,33 @@
 ## ======================================================================================
 ## Hexo Theme Keep
-## Preview: https://xpoet.cn
 ## Documents: https://keep-docs.xpoet.cn
 ## Repository: https://github.com/XPoet/hexo-theme-keep
 ## ======================================================================================
 
 # ---------------------------------------------------------------------------------------
-# Your basic info
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/base_info.html
 # ---------------------------------------------------------------------------------------
 base_info:
-  # Your blog website title
-  title: Keep Theme
-
-  # Your blog website author name
-  author: Keep Team
-
-# ---------------------------------------------------------------------------------------
-# Theme style settings
-# Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/style.html
-# ---------------------------------------------------------------------------------------
-style:
   # Theme primary color
   primary_color: "#0066cc"
 
-  # Your blog website logo image
-  # You can use local image, image external link or don't fill
-  logo: /images/logo.svg
+  # Blog website title
+  title: Keep Theme
 
-  # Favicon (You can use local image or image external link)
-  favicon: /images/logo.svg
+  # Blog website author name
+  author: Keep Team
 
-  # Avatar (You can use local image or image external link)
+  # Author avatar, You can use local image path or image link
   avatar: /images/avatar.svg
 
-  # First screen style settings
-  first_screen:
-    enable: false  # Option values: true | false
-
-    # First screen background image (You can use local image or image external link)
-    background_img: /images/bg.svg
-
-    # First screen description
-    # You can use the "||" to begin a newline, maximum is two lines.
-    description: Keep writing and Keep loving.
-
-    # If enable hitokoto, first screen description is different every time when you enter the site
-    hitokoto: false      # Option values: true | false
+  # Website LOGO, You can use local image path or image link
+  logo: /images/logo.svg
 
-  # Page scroll style settings
-  scroll:
-    # Show progress bar in top when page scroll
-    progress_bar: false  # Option values: true | false
+  # Website favicon, You can use local image path or image link
+  favicon: /images/logo.svg
 
-    # Show percent when page scroll
-    percent: false       # Option values: true | false
 
 # ---------------------------------------------------------------------------------------
-# Navigation menu
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/menu.html
 # ---------------------------------------------------------------------------------------
 # If you want to enable Categories and Tags, you need to create categories and tags pages
@@ -70,19 +40,40 @@ menu:
   # Links: /links
   # About: /about
   # Changelog: /changelog
+  # Photos: /photos
   # ......
 
+
+# ---------------------------------------------------------------------------------------
+# Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/first_screen.html
+# ---------------------------------------------------------------------------------------
+first_screen:
+  enable: false  # Option values: true | false
+
+  # First screen background image in light mode, You can use local image path or image link
+  background_img: /images/bg.svg
+
+  # First screen background image in dark mode, You can use local image path or image link
+  background_img_dark: /images/bg.svg
+
+  # First screen description
+  # You can use the "||" to begin a newline, maximum is two lines.
+  description: Keep writing and Keep loving.
+
+  # If enable hitokoto, first screen description is different every time when you enter the website
+  hitokoto: false      # Option values: true | false
+
+
 # ---------------------------------------------------------------------------------------
-# Social contact link
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/social_contact.html
 # ---------------------------------------------------------------------------------------
 social_contact:
   enable: false      # Option values: true | false
   links:
-    # Fill in your social platform links here, e.g. [ github: https://github.com/XPoet ]
-    # If you want to click open the picture, you need to add a prefix "img |",
+    # Fill in your social platform links here, e.g. `github: https://github.com/XPoet`
+    # If you want to click open the picture, you need to add a prefix `img | `,
     # at the same time change your link to the image link.
-    # e.g. [ weixin: img | https://x.com/images/wechat.png ] or [ weixin: img | ./images/wechat.png ]
+    # e.g. `weixin: img | ./images/qrcode.png`
     github:          # GitHub
     weixin:          # WeChat
     qq:              # QQ
@@ -92,38 +83,52 @@ social_contact:
     facebook:        # Facebook
     email:           # Email
 
+
+# ---------------------------------------------------------------------------------------
+# Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/scroll.html
+# ---------------------------------------------------------------------------------------
+scroll:
+  # Show progress bar in top when page scroll
+  progress_bar: false  # Option values: true | false
+
+  # Show percent when page scroll
+  percent: false       # Option values: true | false
+
+  # Hide header in top when page scroll
+  hide_header: true    # Option values: true | false
+
+
 # ---------------------------------------------------------------------------------------
-# Home page article block display settings
-# Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/home_article.html
+# Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/home.html
 # ---------------------------------------------------------------------------------------
-home_article:
+home:
   # Show category in home page article block
-  category:
-    enable: false  # Option values: true | false
-    limit: 3       # Max number of categories shown in home page article block
+  category: false  # Option values: true | false
+
   # Show tags in home page article block
-  tag:
-    enable: false  # Option values: true | false
-    limit: 5       # Max number of tags shown in home page article block
+  tag: false  # Option values: true | false
+
+  # Website announcement in home page
+  announcement:
+
 
 # ---------------------------------------------------------------------------------------
-# Post page Settings
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/post.html
 # ---------------------------------------------------------------------------------------
 post:
-  # Author label in the post
-  author_label:
-    enable: true       # Option values: true | false
+  # Author badge in the post
+  author_badge:
+    enable: true         # Option values: true | false
 
     # If true, show Lv1, Lv2, Lv3 ...
-    # If false, show custom_label_list
-    auto: true    # Option values: true | false
+    # If false, show custom badge
+    level_badge: true    # Option values: true | false
 
-    # Label array item can be fill one or more
-    custom_label_list: ["Trainee", "Engineer", "Architect"]
+    # Custom badge array, You can be fill one or more item
+    custom_badge: ["One", "Two", "Three"]
 
   # Post word count
-  # Dependencies: hexo-wordcount (`npm install hexo-wordcount`)
+  # Depend on Hexo Plugin: hexo-wordcount (`npm install hexo-wordcount`)
   # See: https://github.com/willin/hexo-wordcount
   word_count:
     wordcount: false     # Word count, one article. Option values: true | false
@@ -144,8 +149,8 @@ post:
     img_link:            # Image link for the payment QR code
     text:                # Custom reward text, Can be null
 
+
 # ---------------------------------------------------------------------------------------
-# Code block
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/code_block.html
 # ---------------------------------------------------------------------------------------
 code_block:
@@ -155,8 +160,8 @@ code_block:
     style: default           # Option values: default | mac
   highlight_theme: default   # Option values: default | obsidian
 
+
 # ---------------------------------------------------------------------------------------
-# Table of Contents in the Sidebar
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/toc.html
 # ---------------------------------------------------------------------------------------
 toc:
@@ -174,8 +179,8 @@ toc:
   # TOC layout on article page
   layout: right      # Option values: left | right
 
+
 # ---------------------------------------------------------------------------------------
-# Website count
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/website_count.html
 # ---------------------------------------------------------------------------------------
 website_count:
@@ -187,23 +192,23 @@ website_count:
     site_pv: false    # Option values: true | false
     page_pv: false    # Option values: true | false
 
+
 # ---------------------------------------------------------------------------------------
-# Local Search
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/local_search.html
-# Dependencies: hexo-generator-searchdb (`npm install hexo-generator-searchdb`)
+# Depend on Hexo Plugin: hexo-generator-searchdb (`npm install hexo-generator-searchdb`)
 # See: https://github.com/theme-next/hexo-generator-searchdb
 # ---------------------------------------------------------------------------------------
 local_search:
   enable: false   # Option values: true | false
   preload: false  # Preload the search data when the page loads. Option values: true | false
 
+
 # ---------------------------------------------------------------------------------------
-# Comment plugin
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/comment.html
 # ---------------------------------------------------------------------------------------
 comment:
   enable: false   # Option values: true | false
-  use: valine     # Option values: valine | gitalk | twikoo | waline | giscus
+  use: valine     # Option values: valine | gitalk | twikoo | waline | giscus | artalk | disqus
 
   # Valine
   # See: https://github.com/xCss/Valine
@@ -252,39 +257,50 @@ comment:
     category_id:
     reactions_enabled: false   # Option values: true | false
 
+  # Artalk
+  # See: https://github.com/ArtalkJS/Artalk
+  #      https://artalk.js.org
+  artalk:
+    server:     # Server URL
+
+  # Disqus
+  # See: https://disqus.com/
+  disqus:
+    shortname:                 # Disqus Shortname
+
+
 # ---------------------------------------------------------------------------------------
-# RSS
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/rss.html
-# Dependencies: hexo-generator-feed (`npm install hexo-generator-feed`)
+# Depend on Hexo Plugin: hexo-generator-feed (`npm install hexo-generator-feed`)
 # See: https://github.com/hexojs/hexo-generator-feed
 # ---------------------------------------------------------------------------------------
 rss:
   enable: false  # Option values: true | false
 
+
 # ---------------------------------------------------------------------------------------
-# Lazyload image
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/lazyload.html
 # ---------------------------------------------------------------------------------------
 lazyload:
   enable: false  # Option values: true | false
 
+
 # ---------------------------------------------------------------------------------------
-# CDN
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/cdn.html
 # ---------------------------------------------------------------------------------------
 cdn:
   enable: false       # Option values: true | false
   provider: jsdelivr  # Option values: jsdelivr | unpkg
 
+
 # ---------------------------------------------------------------------------------------
-# PJAX
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/pjax.html
 # ---------------------------------------------------------------------------------------
 pjax:
   enable: false  # Option values: true | false
 
+
 # ---------------------------------------------------------------------------------------
-# Footer settings
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/footer.html
 # ---------------------------------------------------------------------------------------
 footer:
@@ -313,8 +329,8 @@ footer:
       #   img_url: https://img.shields.io/badge/Hexo-Keep%20v3.7.3-blue?style=flat-square&logo=hexo
       # - ...
 
+
 # ---------------------------------------------------------------------------------------
-# Inject custom CSS and JavaScript files
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/inject.html
 # ---------------------------------------------------------------------------------------
 inject:
diff --git a/languages/en.yml b/languages/en.yml
index e1e7118b0..c849eb583 100644
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -1,29 +1,30 @@
 # ====================================================================
 # English
 # ====================================================================
-search: Search...
-prev: Prev
-next: Next
-prev_posts: Prev posts
-next_posts: Next posts
-page: Page %d
-recent_posts: Recent Posts
-share: Share
-theme: Theme
-rss_feed: RSS Feed
+
 category: Category
 categories: Categories
 tag: Tag
 tags: Tags
 tagcloud: Tag Cloud
-comment: Comment
-comments: Comments
 home: Home
 archive: Archive
 archives: Archives
 about: About
 links: Links
 link: Link
+photos: Photos
+photo: Photo
+search: Search...
+prev: Prev
+next: Next
+prev_posts: Prev posts
+next_posts: Next posts
+page: Page %d
+recent_posts: Recent Posts
+share: Share
+theme: Theme
+rss_feed: RSS Feed
 top: TOP
 read_more: Read more
 wordcount: Words
@@ -62,7 +63,6 @@ copyright:
   license: License
   license_title: Copyright notice
   license_content: "All articles in this blog are licensed under %s unless stating additionally."
-article-aging: "It has been %s days since the last update of this article. Some contents may be outdated. Please pay attention to screening."
 ago:
   second: "%s seconds ago"
   minute: "%s minutes ago"
@@ -86,9 +86,16 @@ footer:
     upyun: UPYUN
   total_words: Total words
 post:
+  aging: "It has been %s days since the last update of this article. Some contents may be outdated. Please pay attention to screening."
   share:
     qq: "Share to QQ"
     wechat: "Share to WeChat"
     weibo: "Share to WeiBo"
     wechat_scan: "Scan by WeChat"
   reward: Reward Author
+comment:
+  comments: Comments
+  fail_tip: Comment plugin failed to load
+  reload: Click to reload
+  loading: Loading comment plugin
+  config_error: "Please fill in the required configuration items for %s comment plugin"
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 9a15f9b8e..20afeed87 100644
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -1,29 +1,30 @@
 # ====================================================================
 # 中文简体
 # ====================================================================
-search: 搜索...
-prev: 上一页
-next: 下一页
-prev_posts: 上一篇
-next_posts: 下一篇
-page: 第 %d 页
-recent_posts: 最新文章
-share: 分享
-theme: 主题
-rss_feed: RSS Feed
+
 category: 分类
 categories: 分类
 tag: 标签
 tags: 标签
 tagcloud: 标签云
-comment: 评论
-comments: 评论
 home: 首页
 archive: 归档
 archives: 归档
 about: 关于
 links: 友链
 link: 友链
+photos: 相册
+photo: 照片
+search: 搜索...
+prev: 上一页
+next: 下一页
+prev_posts: 上一篇
+next_posts: 下一篇
+page: 第 %d 页
+recent_posts: 最新文章
+share: 分享
+theme: 主题
+rss_feed: RSS Feed
 top: 置顶
 read_more: 阅读全文
 wordcount: 字
@@ -62,7 +63,6 @@ copyright:
   license: 许可
   license_title: 版权声明
   license_content: "本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！"
-article-aging: "本文距离上次更新已过去 %s 天，部分内容可能已经过时，请注意甄别。"
 ago:
   second: "%s 秒前"
   minute: "%s 分钟前"
@@ -86,9 +86,16 @@ footer:
     upyun: 又拍云
   total_words: 总字数
 post:
+  aging: "本文距离上次更新已过去 %s 天，部分内容可能已经过时，请注意甄别。"
   share:
     qq: "分享到 QQ"
     wechat: "分享到微信"
     weibo: "分享到微博"
     wechat_scan: "微信扫一扫"
   reward: 打赏作者
+comment:
+  comments: 评论
+  fail_tip: 评论插件加载失败
+  reload: 点击重新加载
+  loading: 正在加载评论插件
+  config_error: "请完整填写 %s 评论插件必需的配置项"
diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
index f566a160d..80c4fc039 100644
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -1,29 +1,30 @@
 # ====================================================================
 # 中文繁体
 # ====================================================================
-search: 搜尋...
-prev: 上一頁
-next: 下一頁
-prev_posts: 上一篇
-next_posts: 下一篇
-page: 第 %d 頁
-recent_posts: 之前的文章
-share: 分享
-theme: 主題
-rss_feed: RSS 訂閱
+
 category: 分類
 categories: 分類
 tag: 標籤
 tags: 標籤
 tagcloud: 標籤雲
-comment: 留言
-comments: 留言
 home: 首頁
 archive: 歸檔
 archives: 歸檔
 about: 關於
 links: 友鏈
 link: 友鏈
+photos: 相簿
+photo: 照片
+search: 搜尋...
+prev: 上一頁
+next: 下一頁
+prev_posts: 上一篇
+next_posts: 下一篇
+page: 第 %d 頁
+recent_posts: 之前的文章
+share: 分享
+theme: 主題
+rss_feed: RSS 訂閱
 top: 頂端
 read_more: 繼續閱讀...
 wordcount: 字數
@@ -62,7 +63,6 @@ copyright:
   license: 許可
   license_title: 版權宣告
   license_content: "這個網站所有文章均使用 %s 授權"
-article-aging: "本文距離上次更新已過去 %s 天，部分內容可能已經過時，請註意甄別。"
 ago:
   second: "%s 秒前"
   minute: "%s 分鐘前"
@@ -86,9 +86,16 @@ footer:
     upyun: 又拍雲
   total_words: 總字數
 post:
+  aging: "本文距離上次更新已過去 %s 天，部分內容可能已經過時，請註意甄別。"
   share:
     qq: "分享到 QQ"
     wechat: "分享到微信"
     weibo: "分享到微博"
     wechat_scan: "微信掃壹掃"
   reward: 給作者打賞
+comment:
+  comments: 留言
+  fail_tip: 評論插件加載失敗
+  reload: 點擊重新加載
+  loading: 正在加載評論插件
+  config_error: "請完整填寫 %s 評論插件必需的配置項"
diff --git a/layout/_partial/article-meta-info.ejs b/layout/_partial/article-meta-info.ejs
index 8554b20f9..209407c0b 100644
--- a/layout/_partial/article-meta-info.ejs
+++ b/layout/_partial/article-meta-info.ejs
@@ -1,6 +1,6 @@
 <%
-const home_category_limit_number = theme?.home_article?.category?.limit || 5
-const home_tag_limit_number = theme?.home_article?.tag?.limit || 3
+const home_category_limit_number = 3
+const home_tag_limit_number = 5
 %>
 
 <div class="article-meta-info-container border-box <%= page_type %>">
@@ -25,7 +25,7 @@ const home_tag_limit_number = theme?.home_article?.tag?.limit || 3
             </span>
         <% } %>
 
-        <% if (post.categories.length && (theme?.home_article?.category?.enable === true || page_type === 'post')) { %>
+        <% if (post.categories.length && (theme?.home?.category === true || page_type === 'post')) { %>
             <span class="meta-info-item article-category border-box"><i class="icon fas fa-folder"></i>&nbsp;
                 <ul class="article-category-ul">
                     <% post.categories.forEach((category, i) => {
@@ -37,7 +37,7 @@ const home_tag_limit_number = theme?.home_article?.tag?.limit || 3
             </span>
         <% } %>
 
-        <% if (post.tags.length && (theme?.home_article?.tag?.enable === true || page_type === 'post')) { %>
+        <% if (post.tags.length && (theme?.home?.tag === true || page_type === 'post')) { %>
             <span class="article-tag meta-info-item border-box">
                 <i class="icon fas fa-tags"></i>&nbsp;
                 <ul class="article-tag-ul">
@@ -78,6 +78,6 @@ const home_tag_limit_number = theme?.home_article?.tag?.limit || 3
     </div>
 
     <% if (page_type === 'home') { %>
-        <a class="home-read-more" href="<%- url_for(post.path) %>"><%- __('read_more') %>&nbsp;<i class="icon fas fa-angles-right"></i></a>
+        <a class="home-read-more" href="<%- url_for(post.path) %>"><%- __('read_more') %>&nbsp;<i class="icon fas fa-angle-right"></i></a>
     <% } %>
 </div>
diff --git a/layout/_partial/comment/comment.ejs b/layout/_partial/comment/comment.ejs
index a53db81b2..803c591e2 100644
--- a/layout/_partial/comment/comment.ejs
+++ b/layout/_partial/comment/comment.ejs
@@ -8,18 +8,23 @@ const {
 <% if (theme_comment_enable === true && theme_comment_use) { %>
     <div class="comments-container border-box">
         <div id="comments-anchor" class="comment-area-title border-box">
-            <i class="fas fa-comments"></i>&nbsp;<%- __('comments') %>
+            <i class="fas fa-comments"></i>&nbsp;<%- __('comment.comments') %>
         </div>
+        <%- partial('load-handler') %>
         <% if  (theme_comment_use === 'valine') { %>
-            <%- partial('valine') %>
+            <%- partial('./plugins/valine') %>
         <% } else if (theme_comment_use === 'gitalk') { %>
-            <%- partial('gitalk') %>
+            <%- partial('./plugins/gitalk') %>
         <% } else if (theme_comment_use === 'twikoo') { %>
-            <%- partial('twikoo') %>
+            <%- partial('./plugins/twikoo') %>
         <% } else if (theme_comment_use === 'waline') { %>
-            <%- partial('waline') %>
+            <%- partial('./plugins/waline') %>
         <% } else if (theme_comment_use === 'giscus') { %>
-            <%- partial('giscus') %>
+            <%- partial('./plugins/giscus') %>
+        <% } else if (theme_comment_use === 'artalk') { %>
+            <%- partial('./plugins/artalk') %>
+        <% } else if (theme_comment_use === 'disqus') { %>
+            <%- partial('./plugins/disqus') %>
         <% } %>
     </div>
 <% } %>
diff --git a/layout/_partial/comment/config-error.ejs b/layout/_partial/comment/config-error.ejs
new file mode 100644
index 000000000..22769efa4
--- /dev/null
+++ b/layout/_partial/comment/config-error.ejs
@@ -0,0 +1,4 @@
+<div class="configuration-items-error-tip border-box">
+    <i class="fa-solid fa-circle-exclamation"></i>
+    <%- __('comment.config_error', comment_plugin) %>
+</div>
diff --git a/layout/_partial/comment/giscus.ejs b/layout/_partial/comment/giscus.ejs
deleted file mode 100644
index 04ec51f10..000000000
--- a/layout/_partial/comment/giscus.ejs
+++ /dev/null
@@ -1,78 +0,0 @@
-<%
-const { enable: pjax_enable } = theme?.pjax || {}
-const {
-    repo: giscus_repo,
-    repo_id: giscus_repo_id,
-    category: giscus_category,
-    category_id: giscus_category_id,
-    reactions_enabled: giscus_reactions_enabled,
-} = theme?.comment?.giscus || {}
-const giscus_language = config?.language || 'zh-CN'
-%>
-<% if (giscus_repo && giscus_repo_id && giscus_category && giscus_category_id) { %>
-    <div class="giscus-comments-container">
-        <div class="giscus" id="giscus"></div>
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
-
-          if (!window?.__getGiscusTheme) {
-            window.__getGiscusTheme = () => {
-              return document.body.classList.contains("dark-mode") ? "dark_dimmed" : "light_tritanopia";
-            };
-          }
-
-          if (!window?.__changeGiscusTheme) {
-            window.__changeGiscusTheme = () => {
-              const iframe = document.querySelector("iframe.giscus-frame");
-              iframe && iframe.contentWindow.postMessage({
-                giscus: {
-                  setConfig: {
-                    theme: __getGiscusTheme()
-                  }
-                }
-              }, "https://giscus.app");
-            };
-          }
-
-          if (!window?.__loadGiscus) {
-            window.__loadGiscus = () => {
-              const script = document.createElement("script");
-              script.async = true;
-              script.src = "https://giscus.app/client.js";
-              script.setAttribute("data-repo", '<%= giscus_repo %>');
-              script.setAttribute("data-repo-id", '<%= giscus_repo_id %>');
-              script.setAttribute("data-category", '<%= giscus_category %>');
-              script.setAttribute("data-category-id", '<%= giscus_category_id %>');
-              script.setAttribute("data-reactions-enabled", '<%= giscus_reactions_enabled === true ? "1" : "0" %>');
-              script.setAttribute("data-lang", '<%= giscus_language %>');
-              script.setAttribute("data-mapping", "pathname");
-              script.setAttribute("data-strict", "0");
-              script.setAttribute("data-emit-metadata", "0");
-              script.setAttribute("data-input-position", "top");
-              script.setAttribute("crossorigin", "anonymous");
-              script.setAttribute("loading", "lazy");
-              script.setAttribute("data-theme", __getGiscusTheme());
-              document.querySelector(".giscus-comments-container").appendChild(script);
-
-              const toggleThemeBtn = document.querySelector(".tool-dark-light-toggle");
-              toggleThemeBtn && toggleThemeBtn.addEventListener("click", () => {
-                __changeGiscusTheme();
-              });
-            }
-          }
-
-          if ('<%= pjax_enable %>' === "true") {
-            setTimeout(() => {
-              __loadGiscus();
-            }, 1000);
-          } else {
-            window.addEventListener("DOMContentLoaded", () => {
-              setTimeout(() => {
-                __loadGiscus();
-              }, 1000);
-            });
-          }
-        </script>
-    </div>
-<% } else { %>
-    <div class="error-tips">Please fill in Giscus complete configuration items.</div>
-<% } %>
diff --git a/layout/_partial/comment/load-handler.ejs b/layout/_partial/comment/load-handler.ejs
new file mode 100644
index 000000000..e7e8bd335
--- /dev/null
+++ b/layout/_partial/comment/load-handler.ejs
@@ -0,0 +1,23 @@
+<div class="comment-plugin-fail border-box">
+    <span class="fail-tip"><%- __("comment.fail_tip") %></span>
+    <button class="reload keep-button"><%- __("comment.reload") %></button>
+</div>
+<div class="comment-plugin-loading flex-center border-box">
+    <i class="loading-icon fa-solid fa-spinner fa-spin"></i>
+    <span class="load-tip"><%- __("comment.loading") %></span>
+</div>
+<script data-pjax>
+  window.KeepCommentPlugin = {}
+  window.KeepCommentPlugin.hideLoading = () => {
+    const cplDom = document.querySelector('.comments-container .comment-plugin-loading')
+    cplDom.style.display = 'none'
+  }
+  window.KeepCommentPlugin.loadFailHandle = () => {
+    window.KeepCommentPlugin.hideLoading()
+    const cpfDom = document.querySelector('.comments-container .comment-plugin-fail')
+    cpfDom.style.display = 'flex'
+    cpfDom.querySelector('.reload').addEventListener('click', () => {
+      window.location.reload()
+    })
+  }
+</script>
diff --git a/layout/_partial/comment/plugins/artalk.ejs b/layout/_partial/comment/plugins/artalk.ejs
new file mode 100644
index 000000000..af6e78791
--- /dev/null
+++ b/layout/_partial/comment/plugins/artalk.ejs
@@ -0,0 +1,72 @@
+<%
+const { enable: pjax_enable } = theme?.pjax || {}
+const {
+  server: artalk_server_url,
+  options: artalk_options = {}
+} = theme?.comment?.artalk || {}
+const artalk_language = config?.language === 'en' ? 'en-US' : 'zh-CN'
+const artalk_css = `${artalk_server_url}/dist/Artalk.css`
+const artalk_js = `${artalk_server_url}/dist/Artalk.js`
+%>
+<% if(artalk_server_url) { %>
+    <div class="artalk-comment-container">
+        <link rel="stylesheet" href="<%= artalk_css %>" />
+        <div id="artalk-comment"></div>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                src="<%= artalk_js %>"
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        ></script>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        >
+          if (!window.KeepCommentPlugin?.initArtalkTheme) {
+            window.KeepCommentPlugin.initArtalkTheme = () => {
+              return document.body.classList.contains('dark-mode')
+            }
+          }
+
+          if (!window.KeepCommentPlugin?.changeArtalkTheme) {
+            window.KeepCommentPlugin.changeArtalkTheme = () => {
+              Artalk && Artalk.setDarkMode(window.KeepCommentPlugin.initArtalkTheme())
+            }
+          }
+
+          window.KeepCommentPlugin.artalkOptions = JSON.parse('<%= JSON.stringify(artalk_options) %>'.replace(/&#34;/g, '"'))
+          window.KeepCommentPlugin.artalkOptions.el = '#artalk-comment'
+          window.KeepCommentPlugin.artalkOptions.server = '<%= artalk_server_url %>'
+          window.KeepCommentPlugin.artalkOptions.locale = '<%= artalk_language %>'
+          window.KeepCommentPlugin.artalkOptions.site = '<%= theme?.base_info?.title %>' || '<%= config?.title %>'
+          window.KeepCommentPlugin.artalkOptions.darkMode = window.KeepCommentPlugin.initArtalkTheme()
+          window.KeepCommentPlugin.artalkOptions.countEl = '.post-comments-count'
+
+          window.KeepCommentPlugin.initArtalk = () => {
+            if (window?.Artalk) {
+              Artalk.init(window.KeepCommentPlugin.artalkOptions)
+              window.KeepCommentPlugin.hideLoading()
+
+              const toggleThemeBtn = document.querySelector('.tool-toggle-theme-mode')
+              toggleThemeBtn && toggleThemeBtn.addEventListener('click', () => {
+                window.KeepCommentPlugin.changeArtalkTheme()
+              })
+
+            } else {
+              setTimeout(() => {
+                window.KeepCommentPlugin.initArtalk()
+              }, 1000)
+            }
+          }
+
+          if ('<%= pjax_enable %>' === 'true') {
+            setTimeout(() => {
+              window.KeepCommentPlugin.initArtalk()
+            }, 1200)
+          } else {
+            window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initArtalk)
+          }
+        </script>
+    </div>
+<% } else { %>
+    <%- partial('../config-error', { comment_plugin: 'Artalk' }) %>
+<% } %>
diff --git a/layout/_partial/comment/plugins/disqus.ejs b/layout/_partial/comment/plugins/disqus.ejs
new file mode 100644
index 000000000..a26b246fd
--- /dev/null
+++ b/layout/_partial/comment/plugins/disqus.ejs
@@ -0,0 +1,39 @@
+<%
+const { enable: pjax_enable } = theme?.pjax || {}
+const { shortname } = theme?.comment?.disqus || {}
+%>
+<% if (shortname) { %>
+    <div class="disqus-comments-container">
+        <div id="disqus_thread"></div>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        >
+          if (!window.KeepCommentPlugin?.initDisqus) {
+            window.KeepCommentPlugin.initDisqus = () => {
+              const script = document.createElement('script')
+              script.async = true
+              script.src = '//<%= shortname %>.disqus.com/embed.js'
+              script.setAttribute('data-timestamp', `${Date.now()}`)
+              document.querySelector('.disqus-comments-container').appendChild(script)
+              script.onerror = () => {
+                window.KeepCommentPlugin.loadFailHandle()
+              }
+              script.onload = () => {
+                window.KeepCommentPlugin.hideLoading()
+              }
+            }
+          }
+
+          if ('<%= pjax_enable %>' === "true") {
+            setTimeout(() => {
+              window.KeepCommentPlugin.initDisqus()
+            }, 1000)
+          } else {
+            window.addEventListener("DOMContentLoaded", window.KeepCommentPlugin.initDisqus)
+          }
+        </script>
+        <script id="dsq-count-scr" src="//<%= shortname %>.disqus.com/count.js" async></script>
+    </div>
+<% } else { %>
+    <%- partial('../config-error', { comment_plugin: 'Disqus' }) %>
+<% } %>
diff --git a/layout/_partial/comment/plugins/giscus.ejs b/layout/_partial/comment/plugins/giscus.ejs
new file mode 100644
index 000000000..c2e5fa620
--- /dev/null
+++ b/layout/_partial/comment/plugins/giscus.ejs
@@ -0,0 +1,80 @@
+<%
+const { enable: pjax_enable } = theme?.pjax || {}
+const {
+    repo: giscus_repo,
+    repo_id: giscus_repo_id,
+    category: giscus_category,
+    category_id: giscus_category_id,
+    reactions_enabled: giscus_reactions_enabled,
+} = theme?.comment?.giscus || {}
+const giscus_language = config?.language || 'zh-CN'
+%>
+<% if (giscus_repo && giscus_repo_id && giscus_category && giscus_category_id) { %>
+    <div class="giscus-comments-container">
+        <div class="giscus" id="giscus"></div>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        >
+          if (!window.KeepCommentPlugin?.getGiscusTheme) {
+            window.KeepCommentPlugin.getGiscusTheme = () => {
+              return document.body.classList.contains('dark-mode') ? 'dark_dimmed' : 'light_tritanopia'
+            }
+          }
+
+          if (!window.KeepCommentPlugin?.changeGiscusTheme) {
+            window.KeepCommentPlugin.changeGiscusTheme = () => {
+              const iframe = document.querySelector('iframe.giscus-frame')
+              iframe && iframe.contentWindow.postMessage({
+                giscus: {
+                  setConfig: {
+                    theme: window.KeepCommentPlugin.getGiscusTheme()
+                  }
+                }
+              }, 'https://giscus.app')
+            }
+          }
+
+          if (!window.KeepCommentPlugin?.initGiscus) {
+            window.KeepCommentPlugin.initGiscus = () => {
+              const script = document.createElement('script')
+              script.async = true
+              script.src = 'https://giscus.app/client.js'
+              script.setAttribute('data-repo', '<%= giscus_repo %>')
+              script.setAttribute('data-repo-id', '<%= giscus_repo_id %>')
+              script.setAttribute('data-category', '<%= giscus_category %>')
+              script.setAttribute('data-category-id', '<%= giscus_category_id %>')
+              script.setAttribute('data-reactions-enabled', '<%= giscus_reactions_enabled === true ? '1' : '0' %>')
+              script.setAttribute('data-lang', '<%= giscus_language %>')
+              script.setAttribute('data-mapping', 'pathname')
+              script.setAttribute('data-strict', '0')
+              script.setAttribute('data-emit-metadata', '0')
+              script.setAttribute('data-input-position', 'top')
+              script.setAttribute('crossorigin', 'anonymous')
+              script.setAttribute('loading', 'lazy')
+              script.setAttribute('data-theme', window.KeepCommentPlugin.getGiscusTheme())
+              document.querySelector('.giscus-comments-container').appendChild(script)
+              script.onerror = () => {
+                window.KeepCommentPlugin.loadFailHandle()
+              }
+              script.onload = () => {
+                window.KeepCommentPlugin.hideLoading()
+              }
+              const toggleThemeBtn = document.querySelector('.tool-toggle-theme-mode')
+              toggleThemeBtn && toggleThemeBtn.addEventListener('click', () => {
+                window.KeepCommentPlugin.changeGiscusTheme()
+              })
+            }
+          }
+
+          if ('<%= pjax_enable %>' === "true") {
+            setTimeout(() => {
+              window.KeepCommentPlugin.initGiscus()
+            }, 1000)
+          } else {
+            window.addEventListener("DOMContentLoaded", window.KeepCommentPlugin.initGiscus)
+          }
+        </script>
+    </div>
+<% } else { %>
+    <%- partial('../config-error', { comment_plugin: 'Giscus' }) %>
+<% } %>
diff --git a/layout/_partial/comment/gitalk.ejs b/layout/_partial/comment/plugins/gitalk.ejs
similarity index 53%
rename from layout/_partial/comment/gitalk.ejs
rename to layout/_partial/comment/plugins/gitalk.ejs
index c1958f03a..3a43d5e03 100644
--- a/layout/_partial/comment/gitalk.ejs
+++ b/layout/_partial/comment/plugins/gitalk.ejs
@@ -30,42 +30,51 @@ if (t_cdn_enable === true) {
     <div class="gitalk-comment-container">
         <div id="gitalk-container"></div>
         <link rel="stylesheet" href="<%= cdn_css %>">
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
-          function loadGitalk() {
-            let __gitalk__pathname = decodeURI(location.pathname);
-            const __gitalk__pathnameLength = __gitalk__pathname.length;
-            const __gitalk__pathnameMaxLength = 50;
-            if (__gitalk__pathnameLength > __gitalk__pathnameMaxLength) {
-              __gitalk__pathname = __gitalk__pathname.substring(0, __gitalk__pathnameMaxLength - 3) + '...';
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                src="<%= cdn_js %>"
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        ></script>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        >
+          window.KeepCommentPlugin.initGitalk = () => {
+            let gitalkPathname = decodeURI(location.pathname)
+            const gitalkPathnameLength = gitalkPathname.length
+            const gitalkPathnameMaxLength = 50
+            if (gitalkPathnameLength > gitalkPathnameMaxLength) {
+              gitalkPathname = gitalkPathname.substring(0, gitalkPathnameMaxLength - 3) + '...'
             }
 
-            try {
-              Gitalk && new Gitalk({
+            if (window?.Gitalk) {
+              new Gitalk({
                 clientID: '<%= client_id %>',
                 clientSecret: '<%= client_secret %>',
                 repo: '<%= repository %>',
                 owner: '<%= github_id %>',
                 admin: '<%= github_admins || [github_id] %>',
-                id: __gitalk__pathname,
+                id: gitalkPathname,
                 proxy: '<%= proxy %>',
                 language: '<%= config?.language || 'zh-CN' %>'
-              }).render('gitalk-container');
-            } catch (e) {
-              window.Gitalk = null;
+              }).render('gitalk-container')
+              window.KeepCommentPlugin.hideLoading()
+            } else {
+              setTimeout(() => {
+                window.KeepCommentPlugin.initGitalk()
+              }, 1000)
             }
           }
 
           if ('<%= pjax_enable %>' === 'true') {
-            const loadGitalkTimeout = setTimeout(() => {
-              loadGitalk();
-              clearTimeout(loadGitalkTimeout);
-            }, 1000);
+            setTimeout(() => {
+              window.KeepCommentPlugin.initGitalk()
+            }, 1200)
           } else {
-            window.addEventListener('DOMContentLoaded', loadGitalk);
+            window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initGitalk)
           }
         </script>
     </div>
 <% } else { %>
-    <div class="error-tips">Please fill in Gitalk complete configuration items.</div>
+    <%- partial('../config-error', { comment_plugin: 'Gitalk' }) %>
 <% } %>
diff --git a/layout/_partial/comment/plugins/twikoo.ejs b/layout/_partial/comment/plugins/twikoo.ejs
new file mode 100644
index 000000000..54a05cab8
--- /dev/null
+++ b/layout/_partial/comment/plugins/twikoo.ejs
@@ -0,0 +1,63 @@
+<%
+const { enable: pjax_enable } = theme?.pjax || {}
+let {
+    env_id: tk_env_id,
+    region: tk_region,
+    version: tk_version
+} = theme?.comment?.twikoo || {}
+if (!tk_version) { tk_version = '1.6.7' }
+let twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
+const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn || {}
+
+if (t_cdn_enable === true) {
+    switch (t_cdn_provider) {
+        case 'jsdelivr':
+            twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
+            break
+
+        case 'unpkg':
+            twikoo_cdn_url = `//unpkg.com/twikoo@${tk_version}/dist/twikoo.all.min.js`
+            break
+    }
+}
+%>
+<% if(tk_env_id) { %>
+    <div class="twikoo-container">
+        <div id="twikoo-comment"></div>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                src="<%= twikoo_cdn_url %>"
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        ></script>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        >
+          window.KeepCommentPlugin.initTwikoo = () => {
+            if (window?.twikoo) {
+              twikoo.init({
+                el: '#twikoo-comment',
+                envId: '<%= tk_env_id %>',
+                region: '<%= tk_region %>',
+                lang: '<%= config.language %>' || 'zh-CN'
+              })
+              window.KeepCommentPlugin.hideLoading()
+            } else {
+              setTimeout(() => {
+                window.KeepCommentPlugin.initTwikoo()
+              }, 1000)
+            }
+          }
+
+          if ('<%= pjax_enable %>' === 'true') {
+            setTimeout(() => {
+              window.KeepCommentPlugin.initTwikoo()
+            }, 1200)
+          } else {
+            window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initTwikoo)
+          }
+        </script>
+    </div>
+<% } else { %>
+    <%- partial('../config-error', { comment_plugin: 'Twikoo' }) %>
+<% } %>
diff --git a/layout/_partial/comment/plugins/valine.ejs b/layout/_partial/comment/plugins/valine.ejs
new file mode 100755
index 000000000..331742f1f
--- /dev/null
+++ b/layout/_partial/comment/plugins/valine.ejs
@@ -0,0 +1,73 @@
+<%
+const { enable: pjax_enable } = theme?.pjax || {}
+const {
+    appid,
+    appkey,
+    server_urls,
+    placeholder
+} = theme?.comment?.valine || {}
+let cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
+const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn || {}
+
+if (t_cdn_enable === true) {
+    switch (t_cdn_provider) {
+        case 'jsdelivr':
+            cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
+            break
+
+        case 'unpkg':
+            cdn_url = '//unpkg.com/valine@latest/dist/Valine.min.js'
+            break
+    }
+}
+%>
+<% if(appid && appkey) { %>
+    <div class="valine-container">
+        <div id="vcomments"></div>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                src="<%= cdn_url %>"
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        ></script>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        >
+          window.KeepCommentPlugin.initValine = () => {
+            const config = {
+              el: '#vcomments',
+              appId: '<%= appid %>',
+              appKey: '<%= appkey %>',
+              meta: ['nick', 'mail', 'link'],
+              avatar: 'wavatar',
+              enableQQ: true,
+              placeholder: '<%= placeholder %>',
+              lang: '<%= config?.language || 'zh-CN' %>'.toLowerCase()
+            }
+
+            if ('<%= server_urls %>') {
+              config.serverURLs = '<%= server_urls %>'
+            }
+
+            if (window?.Valine) {
+              new Valine(config)
+              window.KeepCommentPlugin.hideLoading()
+            } else {
+              setTimeout(() => {
+                window.KeepCommentPlugin.initValine()
+              }, 1000)
+            }
+          }
+
+          if ('<%= pjax_enable %>' === 'true') {
+            setTimeout(() => {
+              window.KeepCommentPlugin.initValine()
+            }, 1200)
+          } else {
+            window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initValine)
+          }
+        </script>
+    </div>
+<% } else { %>
+    <%- partial('../config-error', { comment_plugin: 'Valine' }) %>
+<% } %>
diff --git a/layout/_partial/comment/waline.ejs b/layout/_partial/comment/plugins/waline.ejs
similarity index 54%
rename from layout/_partial/comment/waline.ejs
rename to layout/_partial/comment/plugins/waline.ejs
index 197cb937e..cff40d3d8 100644
--- a/layout/_partial/comment/waline.ejs
+++ b/layout/_partial/comment/plugins/waline.ejs
@@ -32,31 +32,42 @@ if (t_cdn_enable === true) {
     <div class="waline-comment-container">
         <link rel="stylesheet" href="<%= cdn_css %>"/>
         <link rel="stylesheet" href="<%= cdn_css_meta %>"/>
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
         <div id="waline-comment"></div>
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
-          function loadWaline() {
-            const tmpOptions = JSON.parse('<%= JSON.stringify(waline_options) %>'.replace(/&#34;/g, '"'))
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                src="<%= cdn_js %>"
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        ></script>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                async
+        >
+          window.KeepCommentPlugin.walineOptions = JSON.parse('<%= JSON.stringify(waline_options) %>'.replace(/&#34;/g, '"'))
 
-            Waline.init({
-              el: '#waline-comment',
-              serverURL: '<%= waline_env_server_url %>',
-              lang: '<%= config.language %>' || 'zh-CN',
-              comment: '.post-comments-count',
-              reaction: '<%= waline_reaction %>' === 'true',
-              ...tmpOptions
-            })
+          window.KeepCommentPlugin.initWaline = () => {
+            if (window?.Waline) {
+              window.KeepCommentPlugin.walineOptions.el = '#waline-comment'
+              window.KeepCommentPlugin.walineOptions.comment = '.post-comments-count'
+              window.KeepCommentPlugin.walineOptions.serverURL = '<%= waline_env_server_url %>'
+              window.KeepCommentPlugin.walineOptions.lang = '<%= config.language %>' || 'zh-CN'
+              window.KeepCommentPlugin.walineOptions.reaction = '<%= waline_reaction %>' === 'true'
+              window.Waline.init(window.KeepCommentPlugin.walineOptions)
+              window.KeepCommentPlugin.hideLoading()
+            } else {
+              setTimeout(() => {
+                window.KeepCommentPlugin.initWaline()
+              }, 1000)
+            }
           }
 
           if ('<%= pjax_enable %>' === 'true') {
             setTimeout(() => {
-              loadWaline()
-            }, 1000)
+              window.KeepCommentPlugin.initWaline()
+            }, 1200)
           } else {
-            window.addEventListener('DOMContentLoaded', loadWaline)
+            window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initWaline)
           }
         </script>
     </div>
 <% } else { %>
-    <div class="error-tips">Please fill in Waline complete configuration items.</div>
+    <%- partial('../config-error', { comment_plugin: 'Waline' }) %>
 <% } %>
diff --git a/layout/_partial/comment/twikoo.ejs b/layout/_partial/comment/twikoo.ejs
deleted file mode 100644
index 07733a432..000000000
--- a/layout/_partial/comment/twikoo.ejs
+++ /dev/null
@@ -1,50 +0,0 @@
-<%
-const { enable: pjax_enable } = theme?.pjax || {}
-let {
-    env_id: tk_env_id,
-    region: tk_region,
-    version: tk_version
-} = theme?.comment?.twikoo || {}
-if (!tk_version) { tk_version = '1.6.7' }
-let twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
-const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn || {}
-
-if (t_cdn_enable === true) {
-    switch (t_cdn_provider) {
-        case 'jsdelivr':
-            twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
-            break
-
-        case 'unpkg':
-            twikoo_cdn_url = `//unpkg.com/twikoo@${tk_version}/dist/twikoo.all.min.js`
-            break
-    }
-}
-%>
-<% if(tk_env_id) { %>
-    <div class="twikoo-container">
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= twikoo_cdn_url %>"></script>
-        <div id="twikoo-comment"></div>
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
-          function loadTwikoo() {
-            twikoo.init({
-              el: '#twikoo-comment',
-              envId: '<%= tk_env_id %>',
-              region: '<%= tk_region %>',
-              lang: '<%= config.language %>' || 'zh-CN'
-            });
-          }
-
-          if ('<%= pjax_enable %>' === 'true') {
-            const loadTwikooTimeout = setTimeout(() => {
-              loadTwikoo();
-              clearTimeout(loadTwikooTimeout);
-            }, 1000);
-          } else {
-            window.addEventListener('DOMContentLoaded', loadTwikoo);
-          }
-        </script>
-    </div>
-<% } else { %>
-    <div class="error-tips">Please fill in Twikoo complete configuration items.</div>
-<% } %>
diff --git a/layout/_partial/comment/valine.ejs b/layout/_partial/comment/valine.ejs
deleted file mode 100755
index d8649f3bd..000000000
--- a/layout/_partial/comment/valine.ejs
+++ /dev/null
@@ -1,95 +0,0 @@
-<%
-const { enable: pjax_enable } = theme?.pjax || {}
-const {
-    appid,
-    appkey,
-    server_urls,
-    placeholder
-} = theme?.comment?.valine || {}
-let cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
-const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn || {}
-
-if (t_cdn_enable === true) {
-    switch (t_cdn_provider) {
-        case 'jsdelivr':
-            cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
-            break
-
-        case 'unpkg':
-            cdn_url = '//unpkg.com/valine@latest/dist/Valine.min.js'
-            break
-    }
-}
-%>
-<% if(appid && appkey) { %>
-    <div class="valine-container">
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_url %>"></script>
-        <div id="vcomments"></div>
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
-          function loadValine() {
-
-            const config = {
-              el: '#vcomments',
-              appId: '<%= appid %>',
-              appKey: '<%= appkey %>',
-              meta: ['nick', 'mail', 'link'],
-              avatar: 'wavatar',
-              enableQQ: true,
-              placeholder: '<%= placeholder %>',
-              lang: '<%= config?.language || 'zh-CN' %>'.toLowerCase()
-            }
-
-            if ('<%= server_urls %>') {
-              config.serverURLs = '<%= server_urls %>'
-            }
-
-            new Valine(config)
-
-            function getAuthor(language) {
-              switch (language) {
-                case 'en':
-                  return 'Author'
-                case 'zh-CN':
-                  return '博主'
-                case 'zh-TW':
-                  return '站長'
-                default:
-                  return 'Master'
-              }
-            }
-
-            // Add "Author" identify
-            const getValineDomTimer = setInterval(() => {
-              const vcards = document.querySelectorAll('#vcomments .vcards .vcard')
-              if (vcards.length > 0) {
-                let author = '<%= theme?.base_info?.author || config.author %>'
-
-                if (author) {
-                  for (let vcard of vcards) {
-                    const vnick_dom = vcard.querySelector('.vhead .vnick')
-                    const vnick = vnick_dom.innerHTML
-                    if (vnick === author) {
-                      vnick_dom.innerHTML = `${vnick} <span class="author">${getAuthor(KEEP.hexo_config.language)}</span>`
-                    }
-                  }
-                }
-                clearInterval(getValineDomTimer)
-              } else {
-                clearInterval(getValineDomTimer)
-              }
-            }, 2000)
-          }
-
-          if ('<%= pjax_enable %>' === 'true') {
-            const loadValineTimeout = setTimeout(() => {
-              loadValine()
-              clearTimeout(loadValineTimeout)
-            }, 1000)
-          } else {
-            window.addEventListener('DOMContentLoaded', loadValine)
-          }
-        </script>
-    </div>
-<% } else { %>
-    <div class="error-tips">Please fill in Valine complete configuration items.</div>
-<% } %>
diff --git a/layout/_partial/first-screen.ejs b/layout/_partial/first-screen.ejs
index 1f6f4343a..f818d32ee 100644
--- a/layout/_partial/first-screen.ejs
+++ b/layout/_partial/first-screen.ejs
@@ -1,5 +1,5 @@
 <%
-const { description: fs_description, hitokoto: fs_hitokoto } = theme?.style?.first_screen || {}
+const { description: fs_description, hitokoto: fs_hitokoto } = theme?.first_screen || {}
 let final_description = fs_description || ''
 final_description = final_description.split('||').map(desc => desc.trim())
 if (final_description.length > 2) { final_description.length = 2 }
diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
index 2e9ce1e75..6247d1fd0 100644
--- a/layout/_partial/head.ejs
+++ b/layout/_partial/head.ejs
@@ -28,8 +28,8 @@
         <%= theme?.base_info?.title || config?.title || 'Keep Theme' %>
     </title>
     <%- css('css/style') %>
-    <% if (theme?.style?.favicon) { %>
-        <%- favicon_tag(theme?.style?.favicon) %>
+    <% if (theme?.base_info?.favicon) { %>
+        <%- favicon_tag(theme?.base_info?.favicon) %>
     <% } %>
     <%- __css('font/css/fontawesome.min.css') %>
     <%- __css('font/css/regular.min.css') %>
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index 74872cb89..6f18ace76 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -1,7 +1,6 @@
 <%
-const { title: bi_title, logo_img: bi_logo_img } = theme?.base_info || {}
-const { logo: s_logo, first_screen: s_first_screen } = theme?.style || {}
-const { enable: s_fs_enable } = s_first_screen || {}
+const { title: bi_title, logo: bi_logo } = theme?.base_info || {}
+const { enable: s_fs_enable } = theme?.first_screen || {}
 const { enable: local_search_enable } = theme?.local_search || {}
 const h_menu_nav_object = theme?.menu || { Home: '/',  Archives: '/archives' }
 %>
@@ -9,9 +8,9 @@ const h_menu_nav_object = theme?.menu || { Home: '/',  Archives: '/archives' }
 
     <div class="border-box header-content<%- (s_fs_enable === true && is_home() && !page.prev) ? ' has-first-screen' : '' %>">
         <div class="left border-box">
-            <% if (s_logo || bi_logo_img) { %>
+            <% if (bi_logo) { %>
                 <a class="logo-image border-box" href="/">
-                    <%- image_tag(s_logo || bi_logo_img) %>
+                    <%- image_tag(bi_logo) %>
                 </a>
             <% } %>
             <a class="site-name border-box" href="/">
@@ -33,7 +32,7 @@ const h_menu_nav_object = theme?.menu || { Home: '/',  Archives: '/archives' }
                     <% } %>
                     <% if (local_search_enable === true) { %>
                         <li class="menu-item search search-popup-trigger">
-                            <i class="fas fa-search"></i>
+                            <i class="fas search fa-search"></i>
                         </li>
                     <% } %>
                 </ul>
diff --git a/layout/_partial/progress-bar.ejs b/layout/_partial/progress-bar.ejs
index 8ff617add..447b8f8b9 100644
--- a/layout/_partial/progress-bar.ejs
+++ b/layout/_partial/progress-bar.ejs
@@ -1,5 +1,5 @@
 <div class="progress-bar-container">
-    <% if (theme?.style?.scroll?.progress_bar === true) { %>
+    <% if (theme?.scroll?.progress_bar === true) { %>
         <span class="scroll-progress-bar"></span>
     <% } %>
 
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index 2a4de34c1..736d5b79f 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -3,7 +3,8 @@
     'js/utils.js',
     'js/header-shrink.js',
     'js/back2top.js',
-    'js/dark-light-toggle.js',
+    'js/toggle-theme.js',
+    'js/code-block.js',
     'js/main.js',
     'js/libs/anime.min.js'
 ]) %>
@@ -13,11 +14,6 @@
     <%- __js('js/local-search.js') %>
 <% } %>
 
-<!-- code-block -->
-<% if (theme?.code_block?.tools?.enable === true) { %>
-    <%- __js('js/code-block.js') %>
-<% } %>
-
 <!-- lazyload -->
 <% if (theme?.lazyload?.enable === true) { %>
     <%- __js('js/lazyload.js') %>
@@ -46,12 +42,17 @@
 
     <!-- category-page -->
     <% if (isCategoriesPage(page.path) === true) { %>
-        <%- __js('js/category-page.js') %>
+        <%- __js('js/page/category-page.js') %>
     <% } %>
 
     <!-- links-page -->
     <% if (isLinksPage(page.path) === true) { %>
-        <%- __js('js/links-page.js') %>
+        <%- __js('js/page/links-page.js') %>
+    <% } %>
+
+    <!-- photos-page -->
+    <% if (isPhotosPage(page.path) === true) { %>
+        <%- __js('js/page/photos-page.js') %>
     <% } %>
 </div>
 
diff --git a/layout/_partial/side-tools.ejs b/layout/_partial/side-tools.ejs
index 61cfda00d..432d8c3ff 100644
--- a/layout/_partial/side-tools.ejs
+++ b/layout/_partial/side-tools.ejs
@@ -8,7 +8,7 @@
             <i class="fas fa-search-minus"></i>
         </li>
 
-        <li class="tools-item tool-dark-light-toggle flex-center">
+        <li class="tools-item tool-toggle-theme-mode flex-center">
             <i class="fas fa-moon"></i>
         </li>
 
diff --git a/layout/_partial/friends-link.ejs b/layout/_partial/templates/friends-link.ejs
similarity index 86%
rename from layout/_partial/friends-link.ejs
rename to layout/_partial/templates/friends-link.ejs
index 673704290..3748250d3 100644
--- a/layout/_partial/friends-link.ejs
+++ b/layout/_partial/templates/friends-link.ejs
@@ -1,7 +1,10 @@
 <ul class="friends-link-list border-box">
     <% for (const f of theme?.links) { %>
         <% if (f?.title) { %>
-           <li class="link-type-title text-ellipsis border-box"><%= f.title %></li>
+           <li class="link-type-title text-ellipsis border-box">
+               <span class="type-name text-ellipsis"><%= f.title %></span>
+               <i class="fa-solid fa-chevron-down fold"></i>
+           </li>
         <% } else { %>
             <li class="friends-link-item border-box">
                 <a class="a-wrap border-box" href="<%= f?.link %>">
diff --git a/layout/_partial/templates/photo-album.ejs b/layout/_partial/templates/photo-album.ejs
new file mode 100644
index 000000000..f9eae9172
--- /dev/null
+++ b/layout/_partial/templates/photo-album.ejs
@@ -0,0 +1,8 @@
+<div class="photo-album-box border-box">
+    <% for (const img of theme?.photos) { %>
+        <img class="photo border-box" src="<%= img?.url %>"
+             title="<%= img.name %>"
+             onerror="this.style.display='none'"
+        >
+    <% } %>
+</div>
diff --git a/layout/article-content.ejs b/layout/article-content.ejs
index f86cde7d1..c73a7fcc2 100644
--- a/layout/article-content.ejs
+++ b/layout/article-content.ejs
@@ -25,16 +25,16 @@
 
                 <% if (theme?.base_info?.author || config?.author) { %>
                     <div class="article-header border-box">
-                        <% if (theme?.style?.avatar) { %>
+                        <% if (theme?.base_info?.avatar) { %>
                             <div class="avatar-box border-box">
-                                <%- image_tag(theme?.style?.avatar) %>
+                                <%- image_tag(theme?.base_info?.avatar) %>
                             </div>
                         <% } %>
                         <div class="info-box">
                             <div class="author">
                                 <span class="name"><%= theme?.base_info?.author || config?.author %></span>
-                                <% if (theme?.post?.author_label?.enable === true) { %>
-                                    <span class="author-label"><%- getAuthorLabel(site.posts.length, theme?.post?.author_label) %></span>
+                                <% if (theme?.post?.author_badge?.enable === true) { %>
+                                    <span class="author-badge"><%- getAuthorBadge(site.posts.length, theme?.post?.author_badge) %></span>
                                 <% } %>
                             </div>
                             <div class="meta-info border-box">
@@ -56,7 +56,7 @@
                              data-update-date="<%= page.updated %>"
                              data-aging-days="<%= page?.aging_days %>"
                         >
-                            <i class="fa-solid fa-circle-exclamation"></i><%- __('article-aging', '<span class="days">0</span>') %>
+                            <i class="fa-solid fa-circle-exclamation"></i><%- __('post.aging', '<span class="days">0</span>') %>
                         </div>
                     <% } %>
 
diff --git a/layout/home-content.ejs b/layout/home-content.ejs
index 7f70fd23b..6fc01389f 100644
--- a/layout/home-content.ejs
+++ b/layout/home-content.ejs
@@ -1,4 +1,11 @@
 <div class="home-content-container fade-in-down-animation">
+    <% if (theme?.home?.announcement) { %>
+        <div class="website-announcement border-box">
+            <i class="icon left fa-solid fa-bullhorn"></i>
+            <span class="announcement border-box text-ellipsis"><%= theme?.home?.announcement %></span>
+            <i class="icon right close fa-solid fa-close"></i>
+        </div>
+    <% } %>
     <ul class="home-article-list border-box">
         <% page.posts.forEach(post => { %>
             <li class="home-article-item">
diff --git a/layout/page-template.ejs b/layout/page-template.ejs
index 2d779fb5c..60a616954 100644
--- a/layout/page-template.ejs
+++ b/layout/page-template.ejs
@@ -1,22 +1,27 @@
 <%
-const { type: p_type, title: p_title, content: p_content } = page
-const { menu: t_menu, links: t_links } = theme
-const is_render_friends_link = (
-        t_menu?.Links
-        && t_links
-        && (p_title.toLowerCase() === 'links' || p_title.toLowerCase() === 'link')
+const page_title = page.title.toLowerCase()
+const use_page_template = page?.use_template !== false
+const { menu: t_menu, links: links_data, photos: photos_data } = theme
+const use_friends_link = (
+  t_menu?.Links && links_data && (page_title === 'links' || page_title === 'link')
+)
+const use_photo_album = (
+  t_menu?.Photos && photos_data && (page_title === 'photos' || page_title === 'photo')
 )
 %>
 <div class="fade-in-down-animation">
     <div class="page-template-container border-box">
-        <% if (is_render_friends_link) { %>
-            <%- partial('_partial/friends-link') %>
+        <% if (use_friends_link && use_page_template) { %>
+            <%- partial('_partial/templates/friends-link') %>
+        <% } %>
+        <% if (use_photo_album && use_page_template) { %>
+            <%- partial('_partial/templates/photo-album') %>
         <% } %>
         <div class="page-template-content border-box keep-markdown-body">
-            <% if (is_render_friends_link || p_content) { %>
-                <%- p_content %>
+            <% if (page?.content || use_friends_link || use_photo_album) { %>
+                <%- page.content %>
             <% } else { %>
-                <h1><%= p_title %></h1>
+                <h1><%= page_title.toUpperCase() %></h1>
             <% } %>
         </div>
         <% if (page?.comment === true) { %>
diff --git a/layout/page.ejs b/layout/page.ejs
index 30be4a268..8f4f6c635 100644
--- a/layout/page.ejs
+++ b/layout/page.ejs
@@ -2,7 +2,7 @@
 <main class="page-container border-box">
 
     <!-- home first screen  -->
-    <% if (is_home() && theme?.style?.first_screen?.enable === true && !page.prev) { %>
+    <% if (is_home() && theme?.first_screen?.enable === true && !page.prev) { %>
         <%- partial('_partial/first-screen') %>
     <% } %>
 
@@ -15,7 +15,6 @@
         <div class="page-main-content-middle border-box">
 
             <div class="main-content border-box">
-
                 <% if (is_home()) { %>
 
                     <%- partial('home-content') %>
diff --git a/scripts/helpers/export-config.js b/scripts/helpers/export-config.js
index 80f5606f4..68a516160 100644
--- a/scripts/helpers/export-config.js
+++ b/scripts/helpers/export-config.js
@@ -25,33 +25,23 @@ hexo.extend.helper.register('exportThemeConfig', function () {
   }
   // -----------------------------------------------------------------------
 
-  let hexo_config = {
+  const hexoConfig = {
     hostname: url.parse(config.url).hostname || config.url,
     root: config.root,
     language: config.language
   }
 
   if (config.search) {
-    hexo_config.path = config.search.path
+    hexoConfig.path = config.search.path
   }
 
-  let theme_config = {
-    toc: theme.toc || {},
-    style: theme.style || {},
-    local_search: theme.local_search || {},
-    code_block: theme.code_block || {},
-    pjax: theme.pjax || {},
-    lazyload: theme.lazyload || {},
-    comment: theme.comment || {},
-    post: theme.post || {},
-    website_count: theme.website_count || {},
-    version: require('../../package.json').version
-  }
+  const themeConfig = theme
+  themeConfig.version = require('../../package.json').version
 
   return `<script class="keep-theme-configurations">
     const KEEP = window.KEEP || {}
-    KEEP.hexo_config = ${JSON.stringify(hexo_config)}
-    KEEP.theme_config = ${JSON.stringify(theme_config)}
+    KEEP.hexo_config = ${JSON.stringify(hexoConfig)}
+    KEEP.theme_config = ${JSON.stringify(themeConfig)}
     KEEP.language_ago = ${JSON.stringify(languageContent['ago'])}
     KEEP.language_code_block = ${JSON.stringify(languageContent['code_block'])}
     KEEP.language_copy_copyright = ${JSON.stringify(languageContent['copy_copyright'])}
diff --git a/scripts/helpers/helper.js b/scripts/helpers/helper.js
index fd45f72a2..1530c3a8d 100644
--- a/scripts/helpers/helper.js
+++ b/scripts/helpers/helper.js
@@ -28,13 +28,15 @@ hexo.extend.helper.register('createNewArchivePosts', function (posts) {
   return postList
 })
 
-hexo.extend.helper.register('getAuthorLabel', function (postCount, authorLabelConfig) {
-  const { auto: isAuto, custom_label_list: labelList } = authorLabelConfig || {}
+hexo.extend.helper.register('getAuthorBadge', function (postCount, authorLabelConfig) {
+  const { level_badge: isAuto, custom_badge: customBadge } = authorLabelConfig || {}
   let level = Math.floor(Math.log2(postCount))
   level = level < 2 ? 1 : level - 1
 
-  if (isAuto === false && Array.isArray(labelList) && labelList.length > 0) {
-    return level > labelList.length ? labelList[labelList.length - 1] : labelList[level - 1]
+  if (isAuto === false && Array.isArray(customBadge) && customBadge.length > 0) {
+    return level > customBadge.length ? customBadge[customBadge.length - 1] : customBadge[level - 1]
+  } else if (isAuto === false && typeof customBadge === 'string' && customBadge !== '') {
+    return customBadge
   } else {
     return `Lv${level}`
   }
@@ -103,6 +105,10 @@ hexo.extend.helper.register('isLinksPage', function (pagePath) {
   return pagePath === 'links/index.html'
 })
 
+hexo.extend.helper.register('isPhotosPage', function (pagePath) {
+  return pagePath === 'photos/index.html'
+})
+
 hexo.extend.helper.register('isCategoriesPage', function (pagePath) {
   return pagePath === 'categories/index.html'
 })
diff --git a/scripts/use-source-data.js b/scripts/use-source-data.js
index 98d22341b..61be6dffd 100644
--- a/scripts/use-source-data.js
+++ b/scripts/use-source-data.js
@@ -5,22 +5,27 @@ hexo.on('generateBefore', function () {
     const data = hexo.locals.get('data')
 
     if (data) {
-      // theme config file handle
+      // theme config file data
       if (data._config) {
         hexo.theme.config = data._config
       } else if (data.keep) {
         hexo.theme.config = data.keep
       }
 
-      // friends link file handle
+      // friends link data
       if (data.links) {
         hexo.theme.config.links = data.links
       }
 
-      // custom social contact icon handle
+      // custom social contact icon data
       if (data.icons) {
         hexo.theme.config.icons = data.icons
       }
+
+      // photo album data
+      if (data.photos) {
+        hexo.theme.config.photos = data.photos
+      }
     }
   }
 })
diff --git a/source/css/common/animated.styl b/source/css/common/animated.styl
index 1c980b895..88b147b78 100644
--- a/source/css/common/animated.styl
+++ b/source/css/common/animated.styl
@@ -121,3 +121,21 @@ transition-t(property, delay, duration, function) {
     opacity 1
   }
 }
+
+@keyframes shake {
+  0% {
+    transform rotate(-5deg)
+  }
+  25% {
+    transform rotate(5deg)
+  }
+  50% {
+    transform rotate(-5deg)
+  }
+  75% {
+    transform rotate(5deg)
+  }
+  100% {
+    transform rotate(-5deg)
+  }
+}
diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl
index d067e4d04..1f6f69a6e 100644
--- a/source/css/common/basic.styl
+++ b/source/css/common/basic.styl
@@ -19,13 +19,13 @@
 
   &::-webkit-scrollbar {
     width 0.4rem
-    height 0.4rem
+    height 0.32rem
     transition all 0.2s ease
   }
 
   &::-webkit-scrollbar-thumb {
     background var(--scrollbar-color)
-    border-radius 0.1rem
+    border-radius 0.2rem
   }
 
   &::-webkit-scrollbar-track {
@@ -53,30 +53,20 @@ body {
   background var(--background-color-1)
 
   &::-webkit-scrollbar {
-    width 0.6rem
-    height 0.6rem
+    width 0.56rem
+    height 0.56rem
   }
 
   +keep-tablet() {
-    &::-webkit-scrollbar {
-      width 0.5rem
-      height 0.5rem
-    }
-  }
+    font-size calc(var(--base-font-size) * 0.95) !important
+    line-height calc(var(--base-line-height) * 0.95) !important
 
-  +keep-mobile() {
     &::-webkit-scrollbar {
-      width 0.4rem
-      height 0.4rem
+      width 0.42rem
+      height 0.42rem
     }
   }
 
-  +keep-tablet() {
-    font-size calc(var(--base-font-size) * 0.95) !important
-    line-height calc(var(--base-line-height) * 0.95) !important
-  }
-
-
   +keep-mobile() {
     font-size calc(var(--base-font-size) * 0.9) !important
     line-height calc(var(--base-line-height) * 0.9) !important
diff --git a/source/css/common/code-block/code-block.styl b/source/css/common/code-block/code-block.styl
index 30049b5e1..253983609 100644
--- a/source/css/common/code-block/code-block.styl
+++ b/source/css/common/code-block/code-block.styl
@@ -127,12 +127,52 @@
 
 
   figure.highlight {
-    position relative
-    box-sizing border-box
     margin 0
 
     &.folded {
-      height 0
+      height 0 !important
+    }
+  }
+}
+
+
+figure.highlight {
+  position relative
+  box-sizing border-box
+  overflow-y hidden
+
+  &::-webkit-scrollbar-thumb {
+    background transparent
+  }
+
+  &::-webkit-scrollbar-track {
+    background transparent
+  }
+
+  transition-t("height", "0", "0.2", "linear")
+
+  .shrink-line {
+    position absolute
+    left 0
+    box-sizing border-box
+    width 100%
+    background linear-gradient(to bottom, var(--shrink-line-background-1), var(--shrink-line-background-2))
+    cursor pointer
+
+    &::before {
+      color var(--text-color-4)
+      font-weight 600
+      font-size 1rem
+      font-family 'Font Awesome 6 Free'
+      content '\f078'
+    }
+
+    &:hover {
+      &::before {
+        font-size 1.1rem
+      }
     }
   }
 }
+
+
diff --git a/source/css/common/code-block/code-theme.styl b/source/css/common/code-block/code-theme.styl
index e0ee8630a..b24414371 100644
--- a/source/css/common/code-block/code-theme.styl
+++ b/source/css/common/code-block/code-theme.styl
@@ -25,6 +25,10 @@ if (hexo-config('code_block') && hexo-config('code_block.highlight_theme') == 'o
   $highlight-purple = #b18bb7
   $highlight-deletion = #ff9999
   $highlight-addition = #ccff99
+  $shrink-line-foreground = $dark-text-color-4
+  $shrink-line-background-1 = rgba(40, 40, 40, 0.9)
+  $shrink-line-background-2 = rgba(40, 40, 40, 0.6)
+
 
   $dark-toolbar-foreground = darken($toolbar-foreground, 2%)
   $dark-toolbar-background = darken($toolbar-background, 2%)
@@ -42,6 +46,9 @@ if (hexo-config('code_block') && hexo-config('code_block.highlight_theme') == 'o
   $dark-highlight-purple = darken($highlight-purple, 2%)
   $dark-highlight-deletion = darken($highlight-deletion, 2%)
   $dark-highlight-addition = darken($highlight-addition, 2%)
+  $dark-shrink-line-foreground = $dark-text-color-4
+  $dark-shrink-line-background-1 = rgba(40, 40, 40, 0.9)
+  $dark-shrink-line-background-2 = rgba(40, 40, 40, 0.6)
 }
 else {
   $toolbar-foreground = $text-color-3
@@ -60,6 +67,10 @@ else {
   $highlight-purple = #8959a8
   $highlight-deletion = #fdd
   $highlight-addition = #dfd
+  $shrink-line-foreground = $text-color-4
+  $shrink-line-background-1 = rgba(210, 210, 210, 0.9)
+  $shrink-line-background-2 = rgba(225, 225, 225, 0.6)
+
 
   $dark-toolbar-foreground = $dark-text-color-3
   $dark-toolbar-background = $dark-background-color-3
@@ -77,6 +88,9 @@ else {
   $dark-highlight-purple = #b294bb
   $dark-highlight-deletion = #008000
   $dark-highlight-addition = #800000
+  $dark-shrink-line-foreground = $dark-text-color-4
+  $dark-shrink-line-background-1 = rgba(38, 38, 38, 0.9)
+  $dark-shrink-line-background-2 = rgba(52, 52, 52, 0.6)
 }
 
 
@@ -98,6 +112,9 @@ code-theme(mode) {
   --highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $dark-highlight-gutter-color
   --highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $dark-highlight-gutter-bg-color
   --mac-toolbar-background-color mode == 'light' ? $mac-toolbar-background-color : $dark-mac-toolbar-background-color
+  --shrink-line-foreground mode == 'light' ? $shrink-line-foreground : $dark-shrink-line-foreground
+  --shrink-line-background-1 mode == 'light' ? $shrink-line-background-1 : $dark-shrink-line-background-1
+  --shrink-line-background-2 mode == 'light' ? $shrink-line-background-2 : $dark-shrink-line-background-2
 }
 
 
diff --git a/source/css/common/css-variables.styl b/source/css/common/css-variables.styl
index 01e7584b4..fb1249c75 100644
--- a/source/css/common/css-variables.styl
+++ b/source/css/common/css-variables.styl
@@ -33,16 +33,28 @@
   --header-height 70px
   --header-shrink-height calc(var(--header-height) * 0.72)
   --header-backdrop-filter-blur 4px
-  --header-scroll-progress-bar-height 2PX
+  --header-scroll-progress-bar-height 2px
+  --header-title-font-family var(--base-font-family)
+  --header-title-font-size 1.8rem
 
 
   // ==============================================================================================
   // first screen
   // ==============================================================================================
+  --first-screen-display block    // Option values: none | block
+
+  --first-screen-font-family var(--base-font-family)
   --first-screen-font-size 2rem
-  --first-screen-icon-size 1.8rem
   --first-screen-font-color-light $text-color-3
   --first-screen-font-color-dark $dark-text-color-3
+  --first-screen-font-offset 0
+
+  --first-screen-icon-size 1.8rem
+  --first-screen-icon-color-light $text-color-3
+  --first-screen-icon-color-dark $dark-text-color-3
+
+  --first-screen-header-font-color-light $text-color-3
+  --first-screen-header-font-color-dark $dark-text-color-3
 
 
   // ==============================================================================================
diff --git a/source/css/common/markdown.styl b/source/css/common/markdown.styl
index 3ff7e3bc8..8c35517b2 100644
--- a/source/css/common/markdown.styl
+++ b/source/css/common/markdown.styl
@@ -281,40 +281,52 @@
   }
 
 
-  & > table {
+  & > .table-container {
+    box-sizing border-box
     width 100%
+    margin 1.5rem 0
     overflow auto
-    border-collapse collapse
-    border-spacing 0
 
-    +keep-mobile() {
-      & {
-        table-layout fixed
+    table {
+      box-sizing border-box
+      width 100%
+      border-collapse collapse
+      border-spacing 0
+
+      +keep-mobile() {
+        & {
+          table-layout fixed
+        }
       }
-    }
 
-    td
-    th {
-      padding 0
-    }
+      td
+      th {
+        padding 0
+      }
 
-    th {
-      font-weight 600
-    }
+      td {
+        color var(--text-color-3)
+      }
 
-    td
-    th {
-      padding 0.4rem 1rem
-      border 0.1rem solid var(--border-color)
-    }
+      th {
+        color var(--text-color-2)
+        font-weight 600
+      }
 
-    tr {
-      background-color var(--background-color-1)
-      border 0.1rem solid var(--text-color-6)
-    }
+      td
+      th {
+        padding 0.5rem 1rem
+        border 0.1rem solid var(--border-color)
+      }
+
+      tr {
+        background-color var(--background-color-1)
+        border 0.1rem solid var(--border-color)
+      }
 
-    tr:nth-child(2n) {
-      background-color var(--background-color-2)
+      tr:nth-child(2n) {
+        background-color var(--background-color-2)
+      }
     }
   }
 
diff --git a/source/css/common/stylus-variables.styl b/source/css/common/stylus-variables.styl
index 27f163cea..b3176d978 100644
--- a/source/css/common/stylus-variables.styl
+++ b/source/css/common/stylus-variables.styl
@@ -26,8 +26,8 @@ $z-index-12 = 1011
 // theme primary color
 // ==============================================================================================
 
-if (hexo-config('style')) {
-  $temp-color = hexo-config('style.primary_color')
+if (hexo-config('base_info')) {
+  $temp-color = hexo-config('base_info.primary_color')
 }
 else {
   $temp-color = ''
@@ -70,7 +70,7 @@ $selection-color = lighten($primary-color, 10%)
 $shadow-color = rgba(0, 0, 0, 0.16)
 $shadow-hover-color = rgba(0, 0, 0, 0.22)
 
-$scrollbar-color = lighten($text-color-3, 10%)
+$scrollbar-color = lighten($text-color-3, 15%)
 $scrollbar-background-color = darken($background-color-1, 10%)
 $toc-scrollbar-color = alpha($text-color-3, 0.1)
 
@@ -133,8 +133,8 @@ $dark-selection-color = darken($selection-color, 20%)
 $dark-shadow-color = rgba(120, 120, 120, 0.18)
 $dark-shadow-hover-color = rgba(120, 120, 120, 0.24)
 
-$dark-scrollbar-color = darken($dark-background-color-1, 10%)
-$dark-scrollbar-background-color = lighten($dark-background-color-1, 20%)
+$dark-scrollbar-color = lighten($dark-background-color-1, 25%)
+$dark-scrollbar-background-color = darken($dark-background-color-1, 15%)
 $dark-toc-scrollbar-color = alpha($dark-text-color-3, 0.1)
 
 $dark-copyright-icon-bg-color = alpha($dark-text-color-3, 0.12)
diff --git a/source/css/layout/_partial/comment/comment.styl b/source/css/layout/_partial/comment/comment.styl
index 6c97ec315..7fc03d708 100644
--- a/source/css/layout/_partial/comment/comment.styl
+++ b/source/css/layout/_partial/comment/comment.styl
@@ -1,4 +1,4 @@
-if (hexo-config('comment') && hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
+if (hexo-config('comment') && hexo-config('comment.enable') == true && hexo-config('comment.use')) {
   if (hexo-config('comment.use') == "valine") {
     @import "./valine.styl"
   }
@@ -34,9 +34,52 @@ if (hexo-config('comment') && hexo-config('comment.enable') == true && hexo-conf
   }
 
 
-  .error-tips {
+  .configuration-items-error-tip {
+    display flex
+    align-items center
     margin-top 1rem
     color var(--text-color-3)
     font-size 1rem
+
+    i {
+      margin-right 0.3rem
+      color var(--text-color-3)
+      font-size 1.2rem
+    }
+  }
+
+  .comment-plugin-fail {
+    display none
+    flex-direction column
+    align-items center
+    justify-content space-around
+    width 100%
+    padding 2rem
+
+    .fail-tip {
+      color var(--text-color-3)
+      font-size 1.1rem
+    }
+
+    .reload {
+      margin-top 1rem
+    }
+  }
+
+  .comment-plugin-loading {
+    flex-direction column
+    padding 1rem
+    color var(--text-color-3)
+
+    .loading-icon {
+      color var(--text-color-4)
+      font-size 2rem
+    }
+
+    .load-tip {
+      margin-top 1rem
+      color var(--text-color-4)
+      font-size 1.1rem
+    }
   }
 }
diff --git a/source/css/layout/_partial/first-screen.styl b/source/css/layout/_partial/first-screen.styl
index 20aaea967..47ba869ab 100644
--- a/source/css/layout/_partial/first-screen.styl
+++ b/source/css/layout/_partial/first-screen.styl
@@ -1,17 +1,24 @@
-if (hexo-config('style') && hexo-config('style.first_screen')) {
-  $temp-img = hexo-config('style.first_screen.background_img')
+if (hexo-config('first_screen')) {
+  $temp-fs-bg-img-light = hexo-config('first_screen.background_img')
+  $temp-fs-bg-img-dark = hexo-config('first_screen.background_img_dark')
 }
 else {
-  $temp-img = ''
+  $temp-fs-bg-img-light = ''
+  $temp-fs-bg-img-dark = ''
 }
 
-$first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'
+$fs-bg-img-light = $temp-fs-bg-img-light ? $temp-fs-bg-img-light : '/images/bg.svg'
+$fs-bg-img-dark = $temp-fs-bg-img-dark ? $temp-fs-bg-img-dark : $fs-bg-img-light
 
 .first-screen-container {
   width 100%
   height 100vh
   overflow hidden
-  background url($first-screen-img) center center / cover no-repeat
+  background url($fs-bg-img-light) center center / cover no-repeat
+
+  .dark-mode & {
+    background url($fs-bg-img-dark) center center / cover no-repeat
+  }
 
   .first-screen-content {
     display flex
@@ -31,11 +38,14 @@ $first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'
     }
 
     .description {
+      display var(--first-screen-display)
       color var(--first-screen-font-color-light)
       font-weight bold
       font-size var(--first-screen-font-size)
+      font-family var(--first-screen-font-family)
       line-height 1.8
       text-align center
+      transform translateY(var(--first-screen-font-offset))
       opacity 0
 
       .dark-mode & {
@@ -82,16 +92,30 @@ $first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'
           cursor pointer
 
           i {
-            color var(--text-color-3)
+            color var(--first-screen-icon-color-light)
             font-size var(--first-screen-icon-size)
           }
 
+
           svg {
             width var(--first-screen-icon-size)
             height var(--first-screen-icon-size)
 
             path {
-              fill var(--text-color-3)
+              fill var(--first-screen-icon-color-light)
+            }
+          }
+
+
+          .dark-mode & {
+            i {
+              color var(--first-screen-icon-color-dark)
+            }
+
+            svg {
+              path {
+                fill var(--first-screen-icon-color-dark)
+              }
             }
           }
 
@@ -107,6 +131,7 @@ $first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'
             }
           }
 
+
           a {
             display flex !important
             align-items center !important
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 4c41dcaee..1e81d84b0 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -1,7 +1,6 @@
-$site-name-font-size = 1.88rem
 $pc-search-icon-font-size = 1.5rem
 $menu-bar-line-height = 2.5px
-$logo-image-box-width = 2.8rem
+$logo-image-box-width = 2.68rem
 
 .header-wrapper {
   display flex
@@ -57,15 +56,15 @@ $logo-image-box-width = 2.8rem
       height 100%
       font-size 2rem
 
-      transition-t("transform", "0", "0.2", "linear")
+      transition-t("transform, transform-origin", "0, 0", "0.2, 0.2", "linear, linear")
 
       .header-shrink & {
-        transform scale(0.72)
+        transform scale(0.78)
         transform-origin left
       }
 
 
-      if (hexo-config('style') && hexo-config('style.logo')) {
+      if (hexo-config('base_info') && hexo-config('base_info.logo')) {
         .logo-image {
           flex-shrink 0
           width $logo-image-box-width
@@ -96,25 +95,40 @@ $logo-image-box-width = 2.8rem
       .site-name {
         color var(--text-color-1)
         font-weight 600
-        font-size $site-name-font-size
+        font-size var(--header-title-font-size)
+        font-family var(--header-title-font-family)
         line-height 1
         letter-spacing 1px
 
         +keep-tablet() {
-          font-size $site-name-font-size * 0.9
+          font-size calc(var(--header-title-font-size) * 0.9)
         }
 
         +keep-mobile() {
-          font-size $site-name-font-size * 0.8
+          font-size calc(var(--header-title-font-size) * 0.8)
+        }
+
+        .is-home & {
+          if (hexo-config('first_screen') && hexo-config('first_screen.enable') == true) {
+            color var(--first-screen-header-font-color-light)
+            filter brightness(92%)
+
+            .dark-mode & {
+              color var(--first-screen-header-font-color-dark)
+              filter brightness(106%)
+            }
+          }
+        }
+
+        .show-header-drawer & {
+          color var(--text-color-1) !important
         }
       }
     }
 
 
     .right {
-
       .pc {
-
         .menu-list {
           display flex
           align-items center
@@ -129,7 +143,6 @@ $logo-image-box-width = 2.8rem
             float left
             box-sizing border-box
             margin-left 2rem
-            color var(--text-color-3)
             font-size 1rem
             cursor pointer
 
@@ -137,28 +150,35 @@ $logo-image-box-width = 2.8rem
               margin-left 0
             }
 
-
-            a:hover
-            .active {
-
-              &::after {
+            a {
+              &::before {
                 position absolute
                 bottom -10px
                 left 50%
                 box-sizing border-box
-                width 100%
-                height 2px
+                width 0
+                height 2.6px
                 background var(--primary-color)
+                border-radius 3px
                 transform translateX(-50%)
                 content ''
-                transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear")
+                transition-t("transform, bottom, width", "0, 0, 0", "0.2, 0.2, 0.2", "linear, linear, ease")
 
                 .header-shrink & {
                   bottom calc(-1 * calc(var(--header-shrink-height) * 0.5 - 12px))
                 }
               }
+
+
+              &:hover
+              &.active {
+                &::before {
+                  width 100%
+                }
+              }
             }
 
+
             &.search {
               margin-left 26px
               font-size $pc-search-icon-font-size
@@ -167,6 +187,38 @@ $logo-image-box-width = 2.8rem
                 color var(--text-color-3)
               }
             }
+
+            .is-home & {
+              if (hexo-config('first_screen') && hexo-config('first_screen.enable') == true) {
+                a {
+                  color var(--first-screen-header-font-color-light)
+
+                  &:hover {
+                    color var(--primary-color)
+                  }
+                }
+
+
+                i.search {
+                  color var(--first-screen-header-font-color-light)
+                }
+
+
+                .dark-mode & {
+                  a {
+                    color var(--first-screen-header-font-color-dark)
+
+                    &:hover {
+                      color var(--primary-color)
+                    }
+                  }
+
+                  i.search {
+                    color var(--first-screen-header-font-color-dark)
+                  }
+                }
+              }
+            }
           }
         }
       }
@@ -189,6 +241,14 @@ $logo-image-box-width = 2.8rem
 
           i {
             color var(--text-color-3)
+
+            .show-header-drawer & {
+              color var(--text-color-3) !important
+            }
+
+            .reset-color & {
+              color var(--text-color-3) !important
+            }
           }
 
           &:first-child {
@@ -202,19 +262,14 @@ $logo-image-box-width = 2.8rem
           }
         }
 
-        .menu-bar {
 
+        .menu-bar {
           .menu-bar-middle {
             position relative
             width 18px
             height $menu-bar-line-height
             background var(--text-color-3)
 
-            .header-drawer-show & {
-              background transparent
-            }
-
-
             &::before
             &::after {
               position absolute
@@ -230,7 +285,7 @@ $logo-image-box-width = 2.8rem
             &::before {
               top -6px
 
-              .header-drawer-show & {
+              .show-header-drawer & {
                 transform translateY(6px) rotate(45deg)
               }
             }
@@ -239,10 +294,62 @@ $logo-image-box-width = 2.8rem
             &::after {
               bottom -6px
 
-              .header-drawer-show & {
+              .show-header-drawer & {
                 transform translateY(-6px) rotate(-45deg)
               }
             }
+
+
+            .reset-color & {
+              background var(--text-color-3) !important
+
+              &::before
+              &::after {
+                background var(--text-color-3) !important
+              }
+            }
+
+
+            .show-header-drawer & {
+              background transparent !important
+
+              &::before
+              &::after {
+                background var(--text-color-3) !important
+              }
+            }
+          }
+        }
+
+        .is-home & {
+          if (hexo-config('first_screen') && hexo-config('first_screen.enable') == true) {
+            .icon-item i {
+              color var(--first-screen-header-font-color-light)
+            }
+
+            .menu-bar .menu-bar-middle {
+              background var(--first-screen-header-font-color-light)
+
+              &::before
+              &::after {
+                background var(--first-screen-header-font-color-light)
+              }
+            }
+
+            .dark-mode & {
+              .icon-item i {
+                color var(--first-screen-header-font-color-dark)
+              }
+
+              .menu-bar .menu-bar-middle {
+                background var(--first-screen-header-font-color-dark)
+
+                &::before
+                &::after {
+                  background var(--first-screen-header-font-color-dark)
+                }
+              }
+            }
           }
         }
       }
@@ -262,7 +369,7 @@ $logo-image-box-width = 2.8rem
     transform-origin top
     transition-t("transform", "0", "0.38", "ease")
 
-    .header-drawer-show & {
+    .show-header-drawer & {
       transform scaleY(1)
     }
 
@@ -309,13 +416,14 @@ $logo-image-box-width = 2.8rem
     opacity 0
     transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease")
 
-    .header-drawer-show & {
+    .show-header-drawer & {
       visibility visible
       opacity 1
     }
   }
 }
 
-.header-drawer-show {
+
+.show-header-drawer {
   overflow hidden
 }
diff --git a/source/css/layout/_partial/page-template.styl b/source/css/layout/_partial/page-template.styl
index 7b20e128c..978bfee81 100644
--- a/source/css/layout/_partial/page-template.styl
+++ b/source/css/layout/_partial/page-template.styl
@@ -1,6 +1,7 @@
 $friend-link-item-height = 5.2rem
 $friend-link-item-height-tablet = 4.2rem
 $friend-link-item-border-radius = 0.6rem
+$album-img-gap = 0.8rem
 
 .page-template-container {
   keep-container(1, 2rem, 2rem)
@@ -23,19 +24,24 @@ $friend-link-item-border-radius = 0.6rem
 
 
   if (hexo-config('menu') && hexo-config('menu.Links')) {
-
     .friends-link-list {
       display grid
       grid-gap 1.2rem
       grid-template-columns repeat(2, 1fr)
 
       .link-type-title {
+        display flex
         grid-column span 2
-        margin-top 0.5rem
-        padding-left 0.7rem
-        color var(--text-color-3)
+        align-items center
+        justify-content space-between
+        margin-top 0.6rem
+        padding 0.3rem 0 0.2rem 0.8rem
         font-weight bold
-        font-size 1.4rem
+        font-size 1.3rem
+
+        &:first-child {
+          margin-top 0
+        }
 
         &::before {
           position absolute
@@ -49,9 +55,17 @@ $friend-link-item-border-radius = 0.6rem
           content ''
         }
 
-        i.fa-solid {
+
+        .type-name {
           color var(--text-color-3)
         }
+
+        i.fa-solid {
+          margin-left 1rem
+          color var(--text-color-4)
+          font-size 1.1rem
+          cursor pointer
+        }
       }
 
 
@@ -59,8 +73,13 @@ $friend-link-item-border-radius = 0.6rem
         grid-gap 1.1rem
 
         .link-type-title {
-          margin-top 0.4rem !important
-          font-size 1.1rem !important
+          padding 0.1rem 0 0 0.6rem !important
+          font-size 1.2rem !important
+
+          i.fa-solid {
+            margin-left 0.8rem !important
+            font-size 1rem !important
+          }
         }
 
         .friends-link-item {
@@ -109,6 +128,7 @@ $friend-link-item-border-radius = 0.6rem
         border-radius $friend-link-item-border-radius
         box-shadow 1px 1px 3px var(--shadow-color)
         cursor pointer
+        disable-user-select()
 
         &:hover {
           box-shadow 1px 1px 6px var(--shadow-color)
@@ -180,4 +200,21 @@ $friend-link-item-border-radius = 0.6rem
       }
     }
   }
+
+
+  if (hexo-config('menu') && hexo-config('menu.Photos')) {
+    .photo-album-box {
+      column-count 3
+      column-gap $album-img-gap
+
+      img.photo {
+        display block
+        width 100%
+        margin-bottom $album-img-gap
+        background var(--background-color-2)
+        border-radius 0.6rem
+        cursor zoom-in
+      }
+    }
+  }
 }
diff --git a/source/css/layout/_partial/progress-bar.styl b/source/css/layout/_partial/progress-bar.styl
index c257bec98..917c78a7c 100644
--- a/source/css/layout/_partial/progress-bar.styl
+++ b/source/css/layout/_partial/progress-bar.styl
@@ -48,7 +48,7 @@
     }
   }
 
-  if (hexo-config('style') && hexo-config('style.scroll') && hexo-config('style.scroll.progress_bar') == true) {
+  if (hexo-config('scroll') && hexo-config('scroll.progress_bar') == true) {
     .scroll-progress-bar {
       position absolute
       top 0
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index 98b1ae06c..f024002b0 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -105,6 +105,7 @@ $spacer-padding = 2rem
         line-height 1.6
         background var(--background-color-1-transparent)
         border-top-right-radius var(--box-border-radius)
+        -webkit-backdrop-filter blur(2px)
         backdrop-filter blur(2px)
       }
 
@@ -191,7 +192,7 @@ $spacer-padding = 2rem
               color var(--text-color-3)
             }
 
-            .author-label {
+            .author-badge {
               margin-left 0.8rem
               padding 0 0.4rem
               color #fff
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 7da76f0f9..81b173bf0 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -1,6 +1,60 @@
 .home-content-container {
   background var(--background-color-1)
 
+  if (hexo-config('home') && hexo-config('home.announcement')) {
+    .website-announcement {
+      keep-container(var(--home-post-hover-scale), 1rem, 1.8rem)
+      display flex
+      align-items center
+      justify-content space-between
+      margin-top -0.6rem
+
+      +keep-tablet() {
+        margin-top -0.4rem
+      }
+
+      +keep-mobile() {
+        margin-top -0.2rem
+
+        .announcement {
+          font-size 0.9rem
+        }
+
+        .icon {
+          font-size 1rem !important
+        }
+      }
+
+      .announcement {
+        width 100%
+        padding 0 0.4rem
+        color var(--text-color-3)
+      }
+
+
+      .icon {
+        flex-shrink 0
+        padding 0.2rem
+        font-size 1.2rem
+
+        &.left {
+          color var(--keep-danger-color)
+          font-size 1.5rem
+          transform-origin left bottom
+          animation shake 1s ease infinite
+        }
+
+        &.right {
+          color var(--text-color-4)
+          cursor pointer
+
+          &:hover {
+            color var(--text-color-3)
+          }
+        }
+      }
+    }
+  }
 
   .home-article-list {
 
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index fccebc241..5595ac412 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -15,11 +15,13 @@ $post-tools-offset = calc((100vw - var(--page-content-max-width) / 2) - 5rem)
     &.is-home {
       .transparent-1 {
         background var(--header-transparent-background-1)
+        -webkit-backdrop-filter blur(var(--header-backdrop-filter-blur))
         backdrop-filter blur(var(--header-backdrop-filter-blur))
       }
 
       .transparent-2 {
         background var(--header-transparent-background-2)
+        -webkit-backdrop-filter blur(calc(var(--header-backdrop-filter-blur) * 1.25))
         backdrop-filter blur(calc(var(--header-backdrop-filter-blur) * 1.25))
       }
     }
@@ -59,10 +61,20 @@ $post-tools-offset = calc((100vw - var(--page-content-max-width) / 2) - 5rem)
       height var(--header-height)
       transition-t("transform, height", "0, 0", "0.3, 0.2", "ease-out, ease")
 
+      +keep-tablet() {
+        height calc(var(--header-height) * 0.9)
+      }
+
+
+      +keep-mobile() {
+        height calc(var(--header-height) * 0.8)
+      }
+
       &.hide {
         transform translateY(-105%)
       }
 
+
       .header-shrink & {
         height var(--header-shrink-height)
 
@@ -76,13 +88,27 @@ $post-tools-offset = calc((100vw - var(--page-content-max-width) / 2) - 5rem)
       }
 
 
-      +keep-tablet() {
-        height calc(var(--header-height) * 0.9)
-      }
+      &.reset-color {
+        .header-content {
+          .site-name {
+            color var(--text-color-1) !important
+          }
 
+          .menu-item {
+            a {
+              color var(--text-color-3) !important
 
-      +keep-mobile() {
-        height calc(var(--header-height) * 0.8)
+              &:hover {
+                color var(--primary-color) !important
+              }
+            }
+
+
+            i.search {
+              color var(--text-color-3) !important
+            }
+          }
+        }
       }
     }
 
diff --git a/source/js/code-block.js b/source/js/code-block.js
index 0f3b69c0d..7a146102f 100644
--- a/source/js/code-block.js
+++ b/source/js/code-block.js
@@ -1,113 +1,143 @@
 /* global KEEP */
 
-KEEP.initCodeBlockTools = () => {
-  HTMLElement.prototype.wrap = function (wrapper) {
-    this.parentNode.insertBefore(wrapper, this)
-    this.parentNode.removeChild(this)
-    wrapper.appendChild(this)
-  }
-
-  const { style: codeBlockStyle } = KEEP.theme_config?.code_block || {}
-  const { style: codeBlockToolsStyle } = KEEP.theme_config?.code_block?.tools || {}
+KEEP.initCodeBlock = () => {
+  if (KEEP.theme_config?.code_block?.tools?.enable === true) {
+    KEEP.utils.initCodeBlockTools = () => {
+      const { style: codeBlockStyle } = KEEP.theme_config?.code_block || {}
+      const { style: codeBlockToolsStyle } = KEEP.theme_config?.code_block?.tools || {}
 
-  const isMac = (codeBlockStyle || codeBlockToolsStyle || 'default') === 'mac'
-  const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'
-  const {
-    copy: copyLang,
-    copied: copiedLang,
-    fold: foldLang,
-    folded: foldedLang
-  } = KEEP.language_code_block
-  const foldDom = `<span class="tool fold tooltip" data-tooltip-content="${foldLang}" data-tooltip-offset-y="-2px"><i class="fas fa-chevron-down"></i></span>`
+      const isMac = (codeBlockStyle || codeBlockToolsStyle || 'default') === 'mac'
+      const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'
+      const {
+        copy: copyLang,
+        copied: copiedLang,
+        fold: foldLang,
+        folded: foldedLang
+      } = KEEP.language_code_block
+      const foldDom = `<span class="tool fold tooltip" data-tooltip-content="${foldLang}" data-tooltip-offset-y="-2px"><i class="fas fa-chevron-down"></i></span>`
 
-  document.querySelectorAll('figure.highlight').forEach((element) => {
-    let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''
-    if (codeLang === 'PLAINTEXT') {
-      codeLang = ''
-    }
-    const highlightContainer = document.createElement('div')
-    highlightContainer.classList.add('highlight-container')
-    if (isMac) {
-      highlightContainer.classList.add('mac')
-    }
-    element.wrap(highlightContainer)
+      document.querySelectorAll('figure.highlight').forEach((element) => {
+        // code language
+        let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''
+        if (codeLang === 'PLAINTEXT') {
+          codeLang = ''
+        }
+        const highlightContainer = document.createElement('div')
+        highlightContainer.classList.add('highlight-container')
+        if (isMac) {
+          highlightContainer.classList.add('mac')
+        }
+        element.wrap(highlightContainer)
 
-    const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
+        const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
 
-    highlightContainer.insertAdjacentHTML(
-      'afterbegin',
-      `<div class="code-tools-box">
+        // code tools
+        highlightContainer.insertAdjacentHTML(
+          'afterbegin',
+          `<div class="code-tools-box">
         ${isMac ? foldDom + codeLangDom : '<span>' + foldDom + codeLangDom + '</span>'}
         <span class="tool copy tooltip" data-tooltip-content="${copyLang}" data-tooltip-offset-y="-2px"><i class="fas fa-copy"></i></span>
       </div>`
-    )
-    const codeToolsBox = element.parentNode.querySelector('.code-tools-box')
-    const copyDom = codeToolsBox.querySelector('.copy')
-    const targetFoldDom = codeToolsBox.querySelector('.fold')
+        )
+        const codeToolsBox = element.parentNode.querySelector('.code-tools-box')
+        const copyDom = codeToolsBox.querySelector('.copy')
+        const targetFoldDom = codeToolsBox.querySelector('.fold')
 
-    copyDom.addEventListener('click', (event) => {
-      const target = event.currentTarget
-      const code = [...element.querySelectorAll('.code .line')]
-        .map((line) => line.innerText)
-        .join('\n')
-      const tta = document.createElement('textarea')
-      tta.style.top = window.scrollY + 'px'
-      tta.style.position = 'absolute'
-      tta.style.opacity = '0'
-      tta.readOnly = true
-      tta.value = code
-      document.body.append(tta)
-      const selection = document.getSelection()
-      const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false
-      tta.select()
-      tta.setSelectionRange(0, code.length)
-      tta.readOnly = false
-      const result = document.execCommand('copy')
+        // copy code
+        copyDom.addEventListener('click', (event) => {
+          const target = event.currentTarget
+          const code = [...element.querySelectorAll('.code .line')]
+            .map((line) => line.innerText)
+            .join('\n')
+          const tta = document.createElement('textarea')
+          tta.style.top = window.scrollY + 'px'
+          tta.style.position = 'absolute'
+          tta.style.opacity = '0'
+          tta.readOnly = true
+          tta.value = code
+          document.body.append(tta)
+          const selection = document.getSelection()
+          const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false
+          tta.select()
+          tta.setSelectionRange(0, code.length)
+          tta.readOnly = false
+          const result = document.execCommand('copy')
 
-      const copyIconDom = target.querySelector('i')
-      const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content')
+          const copyIconDom = target.querySelector('i')
+          const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content')
 
-      if (result) {
-        copyIconDom.className = 'fas fa-check'
-        copyTooltipDom && (copyTooltipDom.innerHTML = copiedLang)
-      } else {
-        copyIconDom.className = 'fas fa-times'
-      }
+          if (result) {
+            copyIconDom.className = 'fas fa-check'
+            copyTooltipDom && (copyTooltipDom.innerHTML = copiedLang)
+          } else {
+            copyIconDom.className = 'fas fa-times'
+          }
 
-      tta.blur()
-      target.blur()
-      if (selected) {
-        selection.removeAllRanges()
-        selection.addRange(selected)
-      }
-      document.body.removeChild(tta)
-    })
+          tta.blur()
+          target.blur()
+          if (selected) {
+            selection.removeAllRanges()
+            selection.addRange(selected)
+          }
+          document.body.removeChild(tta)
+        })
 
-    copyDom.addEventListener('mouseleave', (event) => {
-      setTimeout(() => {
-        event.target.querySelector('i').className = 'fas fa-copy'
-        const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content')
-        copyTooltipDom && (copyTooltipDom.innerHTML = copyLang)
-      }, 500)
-    })
+        copyDom.addEventListener('mouseleave', (event) => {
+          setTimeout(() => {
+            event.target.querySelector('i').className = 'fas fa-copy'
+            const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content')
+            copyTooltipDom && (copyTooltipDom.innerHTML = copyLang)
+          }, 500)
+        })
+
+        // fold code block
+        let isFold = false
+        targetFoldDom.addEventListener('click', (event) => {
+          const target = event.currentTarget
+          const icon = target.querySelector('i')
+          const foldTooltipDom = codeToolsBox.querySelector('.fold .tooltip-content')
+          isFold = !isFold
+          if (isFold) {
+            icon.className = foldedIconClassName
+            element.classList.add('folded')
+            codeToolsBox.classList.add('folded')
+            foldTooltipDom && (foldTooltipDom.innerHTML = foldedLang)
+          } else {
+            icon.className = 'fas fa-chevron-down'
+            element.classList.remove('folded')
+            codeToolsBox.classList.remove('folded')
+            foldTooltipDom && (foldTooltipDom.innerHTML = foldLang)
+          }
+        })
+      })
+    }
+    KEEP.utils.initCodeBlockTools()
+  }
 
-    let isFold = false
-    targetFoldDom.addEventListener('click', (event) => {
-      const target = event.currentTarget
-      const icon = target.querySelector('i')
-      const foldTooltipDom = codeToolsBox.querySelector('.fold .tooltip-content')
-      isFold = !isFold
-      if (isFold) {
-        icon.className = foldedIconClassName
-        element.classList.add('folded')
-        codeToolsBox.classList.add('folded')
-        foldTooltipDom && (foldTooltipDom.innerHTML = foldedLang)
-      } else {
-        icon.className = 'fas fa-chevron-down'
-        element.classList.remove('folded')
-        codeToolsBox.classList.remove('folded')
-        foldTooltipDom && (foldTooltipDom.innerHTML = foldLang)
+  KEEP.utils.shrinkCodeBlock = () => {
+    const shrinkHandle = (codeBox) => {
+      const limitHeight = 200
+      const tipNodeH = 30
+      const codeBoxHeight = codeBox.getBoundingClientRect().height
+      if (codeBoxHeight - limitHeight > 50) {
+        codeBox.style.position = 'relative'
+        codeBox.style.overflow = 'hidden'
+        codeBox.style.height = `${limitHeight}px`
+        const shrinkLineDom = document.createElement('div')
+        shrinkLineDom.setAttribute('class', 'shrink-line flex-center')
+        shrinkLineDom.style.height = `${tipNodeH}px`
+        shrinkLineDom.style.top = `${limitHeight - tipNodeH}px`
+        shrinkLineDom.addEventListener('click', () => {
+          codeBox.style.height = `${codeBoxHeight}px`
+          shrinkLineDom.style.display = 'none'
+        })
+        codeBox.appendChild(shrinkLineDom)
       }
+    }
+
+    document.querySelectorAll('figure.highlight').forEach((element) => {
+      shrinkHandle(element)
     })
-  })
+  }
+  KEEP.utils.shrinkCodeBlock()
 }
diff --git a/source/js/header-shrink.js b/source/js/header-shrink.js
index 5aa5de764..bd423a4df 100644
--- a/source/js/header-shrink.js
+++ b/source/js/header-shrink.js
@@ -24,7 +24,7 @@ KEEP.initHeaderShrink = () => {
 
       const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
       const isHeaderTransparent =
-        KEEP.theme_config?.style?.first_screen?.enable === true &&
+        KEEP.theme_config?.first_screen?.enable === true &&
         !window.location.pathname.includes('/page/')
 
       if (!this.isHeaderShrink && scrollTop > this.headerHeight) {
@@ -63,7 +63,7 @@ KEEP.initHeaderShrink = () => {
 
       domList.forEach((v) => {
         v.addEventListener('click', () => {
-          document.body.classList.toggle('header-drawer-show')
+          document.body.classList.toggle('show-header-drawer')
         })
       })
     }
diff --git a/source/js/links-page.js b/source/js/links-page.js
deleted file mode 100644
index 154f52fe8..000000000
--- a/source/js/links-page.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* global KEEP */
-
-function linksPageHandle() {
-  const friendsLinkBoxDom = document.querySelector('.friends-link-list')
-  const linkTypeDoms = friendsLinkBoxDom.querySelectorAll('.link-type-title')
-  const linksCount = friendsLinkBoxDom.querySelectorAll('.friends-link-item').length
-  let columns = 2
-
-  if (linksCount >= 80) {
-    columns = 4
-  } else if (linksCount >= 60) {
-    columns = 3
-  }
-
-  friendsLinkBoxDom.style.gridTemplateColumns = `repeat(${columns}, 1fr)`
-  linkTypeDoms.forEach((ltd) => {
-    ltd.style.gridColumn = `span ${columns}`
-  })
-}
-
-if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
-  linksPageHandle()
-} else {
-  window.addEventListener('DOMContentLoaded', linksPageHandle)
-}
diff --git a/source/js/main.js b/source/js/main.js
index 55f5890d6..ea15ab3d0 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,20 +1,18 @@
 /* global KEEP */
 
 window.addEventListener('DOMContentLoaded', () => {
-  const { version, local_search, code_block, lazyload } = KEEP.theme_config
+  const { version, local_search, lazyload } = KEEP.theme_config
 
   KEEP.themeInfo = {
     theme: `Keep v${version}`,
     author: 'XPoet',
-    repository: 'https://github.com/XPoet/hexo-theme-keep'
-  }
-
-  KEEP.localStorageKey = 'KEEP-THEME-STATUS'
-
-  KEEP.styleStatus = {
-    isDark: false,
-    fontSizeLevel: 0,
-    isShowToc: true
+    repository: 'https://github.com/XPoet/hexo-theme-keep',
+    localStorageKey: 'KEEP-THEME-STATUS',
+    styleStatus: {
+      isDark: false,
+      fontSizeLevel: 0,
+      isShowToc: true
+    }
   }
 
   // print theme base info
@@ -37,16 +35,16 @@ window.addEventListener('DOMContentLoaded', () => {
 
   // set styleStatus to localStorage
   KEEP.setStyleStatus = () => {
-    localStorage.setItem(KEEP.localStorageKey, JSON.stringify(KEEP.styleStatus))
+    localStorage.setItem(KEEP.themeInfo.localStorageKey, JSON.stringify(KEEP.themeInfo.styleStatus))
   }
 
   // get styleStatus from localStorage
   KEEP.getStyleStatus = () => {
-    let temp = localStorage.getItem(KEEP.localStorageKey)
+    let temp = localStorage.getItem(KEEP.themeInfo.localStorageKey)
     if (temp) {
       temp = JSON.parse(temp)
-      for (let key in KEEP.styleStatus) {
-        KEEP.styleStatus[key] = temp[key]
+      for (let key in KEEP.themeInfo.styleStatus) {
+        KEEP.themeInfo.styleStatus[key] = temp[key]
       }
       return temp
     } else {
@@ -54,21 +52,28 @@ window.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  // init prototype function
+  KEEP.initPrototype = () => {
+    HTMLElement.prototype.wrap = function (wrapper) {
+      this.parentNode.insertBefore(wrapper, this)
+      this.parentNode.removeChild(this)
+      wrapper.appendChild(this)
+    }
+  }
+  KEEP.initPrototype()
+
   KEEP.initExecute = () => {
     KEEP.initUtils()
     KEEP.initHeaderShrink()
     KEEP.initModeToggle()
     KEEP.initBack2Top()
+    KEEP.initCodeBlock()
     KEEP.setFooterVersion()
 
     if (local_search?.enable === true) {
       KEEP.initLocalSearch()
     }
 
-    if (code_block?.tools?.enable === true) {
-      KEEP.initCodeBlockTools()
-    }
-
     if (lazyload?.enable === true) {
       KEEP.initLazyLoad()
     }
diff --git a/source/js/category-page.js b/source/js/page/category-page.js
similarity index 100%
rename from source/js/category-page.js
rename to source/js/page/category-page.js
diff --git a/source/js/page/links-page.js b/source/js/page/links-page.js
new file mode 100644
index 000000000..69750fd90
--- /dev/null
+++ b/source/js/page/links-page.js
@@ -0,0 +1,52 @@
+/* global KEEP */
+
+function linksPageHandle() {
+  const friendsLinkBoxDom = document.querySelector('.friends-link-list')
+
+  if (!friendsLinkBoxDom) {
+    return
+  }
+
+  const linkTypeDoms = friendsLinkBoxDom.querySelectorAll('.link-type-title')
+  const linkItemDoms = friendsLinkBoxDom.querySelectorAll('.friends-link-item')
+  const linksCount = linkItemDoms.length
+  let columns = 2
+
+  if (linksCount >= 80) {
+    columns = 4
+  } else if (linksCount >= 60) {
+    columns = 3
+  }
+
+  friendsLinkBoxDom.style.gridTemplateColumns = `repeat(${columns}, 1fr)`
+  linkTypeDoms.forEach((ltd) => {
+    ltd.style.gridColumn = `span ${columns}`
+
+    let folded = false
+    const siblings = []
+    let nextSibling = ltd.nextElementSibling
+
+    while (nextSibling) {
+      if (nextSibling.classList.contains('friends-link-item')) {
+        siblings.push(nextSibling)
+        nextSibling = nextSibling.nextElementSibling
+      } else {
+        break
+      }
+    }
+
+    const foldDom = ltd.querySelector('.fold')
+    foldDom.addEventListener('click', () => {
+      folded = !folded
+      foldDom.classList.remove(`fa-chevron-${folded ? 'down' : 'left'}`)
+      foldDom.classList.add(`fa-chevron-${folded ? 'left' : 'down'}`)
+      siblings.forEach((link) => (link.style.display = folded ? 'none' : 'block'))
+    })
+  })
+}
+
+if (KEEP.theme_config?.pjax?.enable === true && KEEP.utils) {
+  linksPageHandle()
+} else {
+  window.addEventListener('DOMContentLoaded', linksPageHandle)
+}
diff --git a/source/js/page/photos-page.js b/source/js/page/photos-page.js
new file mode 100644
index 000000000..809ca891b
--- /dev/null
+++ b/source/js/page/photos-page.js
@@ -0,0 +1,23 @@
+/* global KEEP */
+
+function photosPageHandle() {
+  const layoutImages = () => {
+    const gallery = document.querySelector('.photo-album-box')
+    const images = gallery.querySelectorAll('img')
+    const columns = 3
+    gallery.style.columnCount = `${columns}`
+    const columnHeights = new Array(columns).fill(0)
+    images.forEach((img) => {
+      const shortestColumn = columnHeights.indexOf(Math.min(...columnHeights))
+      img.style.column = shortestColumn + 1
+      columnHeights[shortestColumn] += img.height
+    })
+  }
+  layoutImages()
+}
+
+if (KEEP.theme_config?.pjax?.enable === true && KEEP.utils) {
+  photosPageHandle()
+} else {
+  window.addEventListener('DOMContentLoaded', photosPageHandle)
+}
diff --git a/source/js/post/post-helper.js b/source/js/post/post-helper.js
index 6462d4d73..89113bbf5 100644
--- a/source/js/post/post-helper.js
+++ b/source/js/post/post-helper.js
@@ -15,7 +15,7 @@ function initPostHelper() {
       this.toggleShowTocBtn &&
         this.toggleShowTocBtn.addEventListener('click', () => {
           this.isShowToc = !this.isShowToc
-          KEEP.styleStatus.isShowToc = this.isShowToc
+          KEEP.themeInfo.styleStatus.isShowToc = this.isShowToc
           KEEP.setStyleStatus()
           this.handleToggleToc(this.isShowToc)
         })
diff --git a/source/js/post/toc.js b/source/js/post/toc.js
index 4255897d2..56fc54fea 100644
--- a/source/js/post/toc.js
+++ b/source/js/post/toc.js
@@ -37,6 +37,7 @@ function initTOC() {
 
       // register TOC Nav
       registerTocNav() {
+        const isHideHeader = KEEP.theme_config?.scroll?.hide_header
         const register = (tocContainer) => {
           return [...tocContainer.querySelectorAll('.post-toc li a.nav-link')].map((element) => {
             const target = document.getElementById(
@@ -46,7 +47,12 @@ function initTOC() {
               event.preventDefault()
               let winScrollY = window.scrollY
               winScrollY = winScrollY <= 1 ? -19 : winScrollY
-              const offset = target.getBoundingClientRect().top + winScrollY
+              let offset = target.getBoundingClientRect().top + winScrollY
+
+              if (!isHideHeader) {
+                offset = offset - 60
+              }
+
               window.anime({
                 targets: document.scrollingElement,
                 duration: 500,
@@ -54,9 +60,11 @@ function initTOC() {
                 scrollTop: offset,
                 complete: () => {
                   history.pushState(null, document.title, element.href)
-                  setTimeout(() => {
-                    KEEP.utils.pageTopDom.classList.add('hide')
-                  }, 150)
+                  if (isHideHeader) {
+                    setTimeout(() => {
+                      KEEP.utils.pageTopDom.classList.add('hide')
+                    }, 150)
+                  }
                 }
               })
             })
diff --git a/source/js/dark-light-toggle.js b/source/js/toggle-theme.js
similarity index 86%
rename from source/js/dark-light-toggle.js
rename to source/js/toggle-theme.js
index 08d853d53..464524092 100644
--- a/source/js/dark-light-toggle.js
+++ b/source/js/toggle-theme.js
@@ -2,14 +2,14 @@
 
 KEEP.initModeToggle = () => {
   KEEP.utils.modeToggle = {
-    themeModeToggleBtn: document.querySelector('.tool-dark-light-toggle'),
-    iconDom: document.querySelector('.tool-dark-light-toggle i'),
+    themeModeToggleBtn: document.querySelector('.tool-toggle-theme-mode'),
+    iconDom: document.querySelector('.tool-toggle-theme-mode i'),
 
     enableLightMode() {
       document.body.classList.remove('dark-mode')
       document.body.classList.add('light-mode')
       this.iconDom.className = 'fas fa-moon'
-      KEEP.styleStatus.isDark = false
+      KEEP.themeInfo.styleStatus.isDark = false
       KEEP.setStyleStatus()
     },
 
@@ -17,7 +17,7 @@ KEEP.initModeToggle = () => {
       document.body.classList.add('dark-mode')
       document.body.classList.remove('light-mode')
       this.iconDom.className = 'fas fa-sun'
-      KEEP.styleStatus.isDark = true
+      KEEP.themeInfo.styleStatus.isDark = true
       KEEP.setStyleStatus()
     },
 
diff --git a/source/js/utils.js b/source/js/utils.js
index 8cbee561b..58056f5d4 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -17,11 +17,13 @@ KEEP.initUtils = () => {
     isHasScrollProgressBar: false,
     isHasScrollPercent: false,
     isHeaderTransparent: false,
+    isHideHeader: true,
     hasToc: false,
 
     // initialization data
     initData() {
-      const { scroll, first_screen } = KEEP.theme_config?.style || {}
+      const scroll = KEEP.theme_config?.scroll || {}
+      const first_screen = KEEP.theme_config?.first_screen || {}
       this.isHasScrollProgressBar = scroll?.progress_bar === true
       this.isHasScrollPercent = scroll?.percent === true
       this.isHeaderTransparent =
@@ -29,6 +31,7 @@ KEEP.initUtils = () => {
       if (!this.isHeaderTransparent) {
         this.headerWrapperDom.classList.remove('transparent-1', 'transparent-2')
       }
+      this.isHideHeader = scroll?.hide_header !== false
     },
 
     // scroll Style Handle
@@ -72,12 +75,16 @@ KEEP.initUtils = () => {
 
       // hide header handle
       if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) {
-        this.pageTopDom.classList.add('hide')
+        if (this.isHideHeader) {
+          this.pageTopDom.classList.add('hide')
+        }
         if (this.isHeaderTransparent) {
           this.headerWrapperDom.classList.remove('transparent-1', 'transparent-2')
         }
       } else {
-        this.pageTopDom.classList.remove('hide')
+        if (this.isHideHeader) {
+          this.pageTopDom.classList.remove('hide')
+        }
         if (this.isHeaderTransparent) {
           if (scrollTop <= this.headerWrapperDom.getBoundingClientRect().height) {
             this.headerWrapperDom.classList.remove('transparent-2')
@@ -88,6 +95,15 @@ KEEP.initUtils = () => {
         }
       }
 
+      // header font color handle
+      if (KEEP.theme_config?.first_screen?.enable === true) {
+        if (scrollTop > this.innerHeight - this.pageTopDom.getBoundingClientRect().height) {
+          this.pageTopDom.classList.add('reset-color')
+        } else {
+          this.pageTopDom.classList.remove('reset-color')
+        }
+      }
+
       this.prevScrollValue = scrollTop
     },
 
@@ -147,7 +163,7 @@ KEEP.initUtils = () => {
           `${fs * (1 + fontSizeLevel * 0.05)}px`,
           'important'
         )
-        KEEP.styleStatus.fontSizeLevel = fontSizeLevel
+        KEEP.themeInfo.styleStatus.fontSizeLevel = fontSizeLevel
         KEEP.setStyleStatus()
       }
 
@@ -184,9 +200,12 @@ KEEP.initUtils = () => {
       let isZoomIn = false
       let curWinScrollY = 0
       let selectedImgDom = null
-      const imgDomList = document.querySelectorAll('.keep-markdown-body img')
       const zoomInImgMask = document.querySelector('.zoom-in-image-mask')
       const zoomInImg = zoomInImgMask?.querySelector('.zoom-in-image')
+      const imgDomList = [
+        ...document.querySelectorAll('.keep-markdown-body img'),
+        ...document.querySelectorAll('.photo-album-box img')
+      ]
 
       const zoomOut = () => {
         if (isZoomIn) {
@@ -576,7 +595,7 @@ KEEP.initUtils = () => {
 
     // first screen typewriter
     initTypewriter() {
-      const fsc = KEEP.theme_config?.style?.first_screen || {}
+      const fsc = KEEP.theme_config?.first_screen || {}
       const isHitokoto = fsc?.hitokoto === true
 
       if (fsc?.enable !== true) {
@@ -648,6 +667,28 @@ KEEP.initUtils = () => {
         document.querySelector('.article-meta-info-container .article-category-ul')
       )
       this.removeWhitespace(document.querySelector('.article-meta-info-container .article-tag-ul'))
+    },
+
+    // close website announcement
+    closeWebsiteAnnouncement() {
+      if (KEEP.theme_config?.home?.announcement) {
+        const waDom = document.querySelector('.home-content-container .website-announcement')
+        if (waDom) {
+          const closeDom = waDom.querySelector('.close')
+          closeDom.addEventListener('click', () => {
+            waDom.style.display = 'none'
+          })
+        }
+      }
+    },
+
+    // wrap table dom with div
+    wrapTableWithBox() {
+      document.querySelectorAll('table').forEach((element) => {
+        const box = document.createElement('div')
+        box.className = 'table-container'
+        element.wrap(box)
+      })
     }
   }
 
@@ -664,4 +705,6 @@ KEEP.initUtils = () => {
   KEEP.utils.tabsActiveHandle()
   KEEP.utils.initTypewriter()
   KEEP.utils.trimPostMetaInfoBar()
+  KEEP.utils.closeWebsiteAnnouncement()
+  KEEP.utils.wrapTableWithBox()
 }