diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index 037610a7..9f9067a2 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -20,9 +20,9 @@ body:
         I made sure I checked
         我确认我已经检查过了
       options:
-        - label: I am using Keep version 3.8.4 or later.
+        - label: I am using Keep version 3.8.5 or later.
           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/tutorial/get-start/install-theme.html).
+        - label: I have already read the [Troubleshooting page of Hexo](https://hexo.io/docs/troubleshooting) and [Keep documents](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.
           required: true
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml
index 4be41789..e8ceca3e 100644
--- a/.github/ISSUE_TEMPLATE/feature-request.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
@@ -20,9 +20,9 @@ body:
         I made sure I checked
         我确认我已经检查过了
       options:
-        - label: I am using Keep version 3.8.4 or later.
+        - label: I am using Keep version 3.8.5 or later.
           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/tutorial/get-start/install-theme.html).
+        - label: I have already read the [Troubleshooting page of Hexo](https://hexo.io/docs/troubleshooting) and [Keep documents](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.
           required: true
diff --git a/.github/ISSUE_TEMPLATE/other.yml b/.github/ISSUE_TEMPLATE/other.yml
index 349d5acb..32879add 100644
--- a/.github/ISSUE_TEMPLATE/other.yml
+++ b/.github/ISSUE_TEMPLATE/other.yml
@@ -20,9 +20,9 @@ body:
         I made sure I checked
         我确认我已经检查过了
       options:
-        - label: I am using Keep version 3.8.4 or later.
+        - label: I am using Keep version 3.8.5 or later.
           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/tutorial/get-start/install-theme.html).
+        - label: I have already read the [Troubleshooting page of Hexo](https://hexo.io/docs/troubleshooting) and [Keep documents](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.
           required: true
diff --git a/.github/workflows/release-version.yml b/.github/workflows/release.yml
similarity index 98%
rename from .github/workflows/release-version.yml
rename to .github/workflows/release.yml
index b0845c12..a69c3729 100644
--- a/.github/workflows/release-version.yml
+++ b/.github/workflows/release.yml
@@ -3,10 +3,10 @@ on:
     branches:
       - master
 
-name: release-version
+name: release
 
 jobs:
-  release-version:
+  release:
     runs-on: ubuntu-latest
     steps:
       - uses: google-github-actions/release-please-action@v3
diff --git a/README.md b/README.md
index e127a16f..e9490056 100644
--- a/README.md
+++ b/README.md
@@ -11,11 +11,12 @@
 
 **Keep** is a simple and light [Hexo](https://hexo.io) theme. It makes you more focused on writing.
 
-[![Github License](https://img.shields.io/github/license/XPoet/hexo-theme-keep?style=for-the-badge&logo=github&color=3366CC)](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE)
-[![NPM version](https://img.shields.io/npm/v/hexo-theme-keep?style=for-the-badge&logo=npm&color=FF9999)](https://www.npmjs.com/package/hexo-theme-keep)
-[![NPM Downloads](https://img.shields.io/npm/dw/hexo-theme-keep?style=for-the-badge&logo=npm&color=9966CC)](https://www.npmjs.com/package/hexo-theme-keep)
-[![Node.js Version](https://img.shields.io/badge/node-%3E=14.0.0-009999?style=for-the-badge&logo=Node.js)](https://nodejs.org/)
-[![Required Hexo version](https://img.shields.io/badge/hexo-%3E=5.0.0-99ccff?style=for-the-badge&logo=hexo)](https://hexo.io)
+[![Github License](https://img.shields.io/github/license/XPoet/hexo-theme-keep?style=flat-square&logo=github&color=3366cc)](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE)
+[![Github Release](https://img.shields.io/github/release/XPoet/hexo-theme-keep?style=flat-square&logo=github&color=mediumpurple)](https://github.com/XPoet/hexo-theme-ils/releases)
+[![NPM Version](https://img.shields.io/npm/v/hexo-theme-keep?style=flat-square&logo=npm&color=indianred)](https://www.npmjs.com/package/hexo-theme-keep)
+[![NPM Downloads](https://img.shields.io/npm/dw/hexo-theme-keep?style=flat-square&logo=npm&color=darkorange)](https://www.npmjs.com/package/hexo-theme-keep)
+[![Node.js Version](https://img.shields.io/badge/node-%3E=14.0.0-forestgreen?style=flat-square&logo=Node.js)](https://nodejs.org)
+[![Required Hexo version](https://img.shields.io/badge/hexo-%3E=5.0.0-steelblue?style=flat-square&logo=hexo)](https://hexo.io)
 
 ## :star2: Online Preview
 
diff --git a/docs/README_zh-CN.md b/docs/README_zh-CN.md
index c69269cc..9a828783 100644
--- a/docs/README_zh-CN.md
+++ b/docs/README_zh-CN.md
@@ -10,11 +10,12 @@
 
 **Keep** 是一款简约轻快的 [Hexo](https://hexo.io) 主题。它能让你更专注于写作。
 
-[![Github License](https://img.shields.io/github/license/XPoet/hexo-theme-keep?style=for-the-badge&logo=github&color=3366CC)](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE)
-[![NPM version](https://img.shields.io/npm/v/hexo-theme-keep?style=for-the-badge&logo=npm&color=FF9999)](https://www.npmjs.com/package/hexo-theme-keep)
-[![NPM Downloads](https://img.shields.io/npm/dw/hexo-theme-keep?style=for-the-badge&logo=npm&color=9966CC)](https://www.npmjs.com/package/hexo-theme-keep)
-[![Node.js Version](https://img.shields.io/badge/node-%3E=14.0.0-009999?style=for-the-badge&logo=Node.js)](https://nodejs.org/)
-[![Required Hexo version](https://img.shields.io/badge/hexo-%3E=5.0.0-99ccff?style=for-the-badge&logo=hexo)](https://hexo.io)
+[![Github License](https://img.shields.io/github/license/XPoet/hexo-theme-keep?style=flat-square&logo=github&color=3366cc)](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE)
+[![Github Release](https://img.shields.io/github/release/XPoet/hexo-theme-keep?style=flat-square&logo=github&color=mediumpurple)](https://github.com/XPoet/hexo-theme-ils/releases)
+[![NPM Version](https://img.shields.io/npm/v/hexo-theme-keep?style=flat-square&logo=npm&color=indianred)](https://www.npmjs.com/package/hexo-theme-keep)
+[![NPM Downloads](https://img.shields.io/npm/dw/hexo-theme-keep?style=flat-square&logo=npm&color=darkorange)](https://www.npmjs.com/package/hexo-theme-keep)
+[![Node.js Version](https://img.shields.io/badge/node-%3E=14.0.0-forestgreen?style=flat-square&logo=Node.js)](https://nodejs.org)
+[![Required Hexo version](https://img.shields.io/badge/hexo-%3E=5.0.0-steelblue?style=flat-square&logo=hexo)](https://hexo.io)
 
 ## :star2: 在线预览
 
diff --git a/docs/README_zh-TW.md b/docs/README_zh-TW.md
index a9ba5718..97fdf168 100644
--- a/docs/README_zh-TW.md
+++ b/docs/README_zh-TW.md
@@ -11,11 +11,12 @@
 
 **Keep** 是一款簡約輕快的 [Hexo](https://hexo.io) 主題。它能讓你更專注於寫作。
 
-[![Github License](https://img.shields.io/github/license/XPoet/hexo-theme-keep?style=for-the-badge&logo=github&color=3366CC)](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE)
-[![NPM version](https://img.shields.io/npm/v/hexo-theme-keep?style=for-the-badge&logo=npm&color=FF9999)](https://www.npmjs.com/package/hexo-theme-keep)
-[![NPM Downloads](https://img.shields.io/npm/dw/hexo-theme-keep?style=for-the-badge&logo=npm&color=9966CC)](https://www.npmjs.com/package/hexo-theme-keep)
-[![Node.js Version](https://img.shields.io/badge/node-%3E=14.0.0-009999?style=for-the-badge&logo=Node.js)](https://nodejs.org/)
-[![Required Hexo version](https://img.shields.io/badge/hexo-%3E=5.0.0-99ccff?style=for-the-badge&logo=hexo)](https://hexo.io)
+[![Github License](https://img.shields.io/github/license/XPoet/hexo-theme-keep?style=flat-square&logo=github&color=3366cc)](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE)
+[![Github Release](https://img.shields.io/github/release/XPoet/hexo-theme-keep?style=flat-square&logo=github&color=mediumpurple)](https://github.com/XPoet/hexo-theme-ils/releases)
+[![NPM Version](https://img.shields.io/npm/v/hexo-theme-keep?style=flat-square&logo=npm&color=indianred)](https://www.npmjs.com/package/hexo-theme-keep)
+[![NPM Downloads](https://img.shields.io/npm/dw/hexo-theme-keep?style=flat-square&logo=npm&color=darkorange)](https://www.npmjs.com/package/hexo-theme-keep)
+[![Node.js Version](https://img.shields.io/badge/node-%3E=14.0.0-forestgreen?style=flat-square&logo=Node.js)](https://nodejs.org)
+[![Required Hexo version](https://img.shields.io/badge/hexo-%3E=5.0.0-steelblue?style=flat-square&logo=hexo)](https://hexo.io)
 
 ## :star2: 線上預覽
 
diff --git a/layout/_partial/comment/waline.ejs b/layout/_partial/comment/waline.ejs
index 9230559a..197cb937 100644
--- a/layout/_partial/comment/waline.ejs
+++ b/layout/_partial/comment/waline.ejs
@@ -3,7 +3,8 @@ const { enable: pjax_enable } = theme?.pjax || {}
 let {
     server_url: waline_env_server_url,
     version: waline_version,
-    reaction: waline_reaction
+    reaction: waline_reaction,
+    options: waline_options = {}
 } = theme?.comment?.waline || {}
 if (!waline_version) { waline_version = '2' }
 let cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
@@ -35,12 +36,15 @@ if (t_cdn_enable === true) {
         <div id="waline-comment"></div>
         <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
           function loadWaline() {
+            const tmpOptions = 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'
+              reaction: '<%= waline_reaction %>' === 'true',
+              ...tmpOptions
             })
           }
 
diff --git a/source/css/common/css-variables.styl b/source/css/common/css-variables.styl
index 1a02b851..01e7584b 100644
--- a/source/css/common/css-variables.styl
+++ b/source/css/common/css-variables.styl
@@ -10,6 +10,17 @@
   --base-font-family Optima-Regular, Optima, PingFang SC, Microsoft YaHei, sans-serif
 
 
+  // ==============================================================================================
+  // page
+  // ==============================================================================================
+  --page-content-width 80%
+  --page-content-width-tablet 88%
+  --page-content-width-mobile 90%
+  --page-content-max-width 928px
+  --page-content-max-width-2 calc(var(--page-content-max-width) * 1.2)
+  --components-spacing 36px
+
+
   // ==============================================================================================
   // box style
   // ==============================================================================================
@@ -22,6 +33,7 @@
   --header-height 70px
   --header-shrink-height calc(var(--header-height) * 0.72)
   --header-backdrop-filter-blur 4px
+  --header-scroll-progress-bar-height 2PX
 
 
   // ==============================================================================================
diff --git a/source/css/common/stylus-variables.styl b/source/css/common/stylus-variables.styl
index fb34a9e4..27f163ce 100644
--- a/source/css/common/stylus-variables.styl
+++ b/source/css/common/stylus-variables.styl
@@ -1,25 +1,3 @@
-// ==============================================================================================
-//                                     KEEP THEME VARIABLE                                     //
-// ==============================================================================================
-
-
-// ==============================================================================================
-// layout
-// ==============================================================================================
-$scroll-progress-bar-height = 2px                               // scroll progress bar height
-$main-content-width = 80%                                       // main content width (PC)
-$main-content-width-tablet = 88%                                // main content width (tablet)
-$main-content-width-mobile = 90%                                // main content width (mobile)
-$component-spacing-value = 38px                                 // component-spacing-value (PC)
-$content-max-width = 928px                                      // main content max width
-
-// main content max width of has TOC
-$has-toc-content-max-width = $content-max-width * 1.2
-
-// main content max width of has first screen
-$has-fs-content-max-width = $content-max-width * 1.2
-
-
 // ==============================================================================================
 // media query
 // ==============================================================================================
diff --git a/source/css/layout/_partial/archive-list.styl b/source/css/layout/_partial/archive-list.styl
index 4fe926f2..23be31b6 100644
--- a/source/css/layout/_partial/archive-list.styl
+++ b/source/css/layout/_partial/archive-list.styl
@@ -8,7 +8,7 @@ $timeline-circle-width = 0.6rem
 .archive-list-container {
 
   .archive-item {
-    margin-bottom $component-spacing-value
+    margin-bottom var(--components-spacing)
 
     &:last-child {
       margin-bottom 0
diff --git a/source/css/layout/_partial/comment/comment.styl b/source/css/layout/_partial/comment/comment.styl
index 511b5d30..6c97ec31 100644
--- a/source/css/layout/_partial/comment/comment.styl
+++ b/source/css/layout/_partial/comment/comment.styl
@@ -16,7 +16,7 @@ if (hexo-config('comment') && hexo-config('comment.enable') == true && hexo-conf
 .comments-container {
   display inline-block
   width 100%
-  margin-top $component-spacing-value
+  margin-top var(--components-spacing)
 
   .comment-area-title {
     width 100%
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 0b1866e1..4c41dcae 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -10,7 +10,7 @@ $logo-image-box-width = 2.8rem
   box-sizing border-box
   width 100%
   height 100%
-  padding-top $scroll-progress-bar-height
+  padding-top var(--header-scroll-progress-bar-height)
   background var(--background-color-1)
   box-shadow 1px 2px 6px var(--shadow-color)
 
@@ -24,29 +24,29 @@ $logo-image-box-width = 2.8rem
     flex-direction row
     align-items center
     justify-content space-between
-    width $main-content-width
-    max-width $content-max-width
+    width var(--page-content-width)
+    max-width var(--page-content-max-width)
     height 100%
     transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
 
 
     &.has-first-screen {
-      max-width $has-fs-content-max-width
+      max-width var(--page-content-max-width-2)
     }
 
 
     .has-toc & {
-      max-width $has-toc-content-max-width
+      max-width var(--page-content-max-width-2)
     }
 
 
     +keep-tablet() {
-      width $main-content-width-tablet
+      width var(--page-content-width-tablet)
     }
 
 
     +keep-mobile() {
-      width $main-content-width-mobile
+      width var(--page-content-width-mobile)
     }
 
 
diff --git a/source/css/layout/_partial/post/post-tools.styl b/source/css/layout/_partial/post/post-tools.styl
index 16f248a6..36e43cf7 100644
--- a/source/css/layout/_partial/post/post-tools.styl
+++ b/source/css/layout/_partial/post/post-tools.styl
@@ -2,7 +2,7 @@ $li-margin-bottom = 0.8rem
 $post-tool-button-width = 2.5rem
 
 .post-tools-container {
-  padding-top $component-spacing-value
+  padding-top var(--components-spacing)
 
   .tools-list {
 
diff --git a/source/css/layout/_partial/progress-bar.styl b/source/css/layout/_partial/progress-bar.styl
index 8aece0a0..c257bec9 100644
--- a/source/css/layout/_partial/progress-bar.styl
+++ b/source/css/layout/_partial/progress-bar.styl
@@ -55,7 +55,7 @@
       left 0
       z-index $z-index-7
       width 0
-      height $scroll-progress-bar-height
+      height var(--header-scroll-progress-bar-height)
       background var(--primary-color)
       visibility hidden
       transition-t("width", "0", "0.1", "linear")
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index fd72e3c2..98b1ae06 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -14,7 +14,6 @@ $spacer-padding = 2rem
   width 100%
   height 100%
 
-
   &.show-toc {
     .pc-post-toc {
       display block
@@ -221,15 +220,15 @@ $spacer-padding = 2rem
 
 
       .article-content {
-        margin-top $component-spacing-value * 0.8
-        padding-bottom $component-spacing-value * 0.8
+        margin-top calc(var(--components-spacing) * 0.8)
+        padding-bottom calc(var(--components-spacing) * 0.8)
         color var(--text-color-3)
         text-align justify
         word-wrap break-word
 
         +keep-tablet() {
-          margin-top $component-spacing-value * 0.6
-          padding-bottom $component-spacing-value * 0.6
+          margin-top calc(var(--components-spacing) * 0.6)
+          padding-bottom calc(var(--components-spacing) * 0.6)
         }
 
 
@@ -291,7 +290,7 @@ $spacer-padding = 2rem
 
       .article-nav {
         height 2.8rem
-        margin-top $component-spacing-value
+        margin-top var(--components-spacing)
 
         .article-prev
         .article-next {
@@ -368,12 +367,12 @@ $spacer-padding = 2rem
 
   .pc-post-toc {
     position sticky
-    top 'calc(var(--header-height) + %s)' % $component-spacing-value
+    top calc(var(--header-height) + var(--components-spacing))
     display none
     flex-shrink 0
     box-sizing border-box
     width $toc-container-width
-    max-height 'calc(100vh - %s)' % ('calc(var(--header-height) + %s)' % $component-spacing-value)
+    max-height calc(100vh - calc(var(--header-height) + var(--components-spacing)))
     transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
 
     &.right-toc {
@@ -387,8 +386,36 @@ $spacer-padding = 2rem
     }
 
     .header-shrink & {
-      top 'calc(var(--header-shrink-height) + %s)' % $component-spacing-value
-      max-height 'calc(100vh - %s)' % ('calc(var(--header-shrink-height) + %s)' % $component-spacing-value)
+      top calc(var(--header-shrink-height) + var(--components-spacing))
+      max-height calc(100vh - calc(var(--header-shrink-height) + var(--components-spacing)))
+    }
+  }
+
+  .hbe-container {
+
+    .hbe-input-field {
+      color var(--text-color-3) !important
+      background var(--background-color-3) !important
+    }
+
+
+    .hbe-input-label {
+      &::before {
+        display none !important
+      }
+
+      &::after {
+        background var(--text-color-4) !important
+      }
+
+      .hbe-input-label-content {
+        color var(--text-color-4) !important
+      }
+    }
+
+
+    .hbe-button {
+      margin-top 2rem
     }
   }
 }
diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl
index ad7dc8b9..04bf9ba1 100644
--- a/source/css/layout/category-content.styl
+++ b/source/css/layout/category-content.styl
@@ -5,7 +5,7 @@ $category-name-font-size = 1.5rem
   keep-container(1, 2rem, 2rem)
 
   .category-name {
-    margin-bottom $component-spacing-value
+    margin-bottom var(--components-spacing)
     color var(--text-color-2)
     font-weight 600
     font-size $category-name-font-size
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index 5af241af..fccebc24 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -1,4 +1,4 @@
-$post-tools-offset = 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
+$post-tools-offset = calc((100vw - var(--page-content-max-width) / 2) - 5rem)
 
 .page-container {
   width 100%
@@ -91,32 +91,34 @@ $post-tools-offset = 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
       display flex
       justify-content center
       width 100%
-      padding $component-spacing-value 0
+      padding var(--components-spacing) 0
 
       +keep-tablet() {
-        padding $component-spacing-value * 0.8 0
+        padding calc(var(--components-spacing) * 0.8) 0
       }
 
       +keep-mobile() {
-        padding $component-spacing-value * 0.6 0
+        padding calc(var(--components-spacing) * 0.6) 0
       }
 
       .main-content {
-        width $main-content-width
-        max-width $content-max-width
+        width var(--page-content-width)
+        max-width var(--page-content-max-width)
         height 100%
         transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
 
         .has-toc & {
-          max-width $has-toc-content-max-width
+          max-width var(--page-content-max-width-2)
         }
 
+
         +keep-tablet() {
-          width $main-content-width-tablet
+          width var(--page-content-width-tablet)
         }
 
+
         +keep-mobile() {
-          width $main-content-width-mobile
+          width var(--page-content-width-mobile)
         }
       }
     }
@@ -130,7 +132,7 @@ $post-tools-offset = 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
 
   .post-tools {
     position fixed
-    top 'calc(var(--header-height) + %s)' % $component-spacing-value
+    top calc(var(--header-height) + var(--components-spacing))
     box-sizing border-box
     opacity 0
     transition-t("top, transform, opacity, left", "0, 0, 0.2, 0", "0.2, 0.2, 0.2, 0.2", "ease, ease, ease, ease")
@@ -144,7 +146,7 @@ $post-tools-offset = 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
     }
 
     .header-shrink & {
-      top 'calc(var(--header-shrink-height) + %s)' % $component-spacing-value
+      top calc(var(--header-shrink-height) + var(--components-spacing))
     }
 
 
diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl
index 52eb306a..d4f4d8d5 100644
--- a/source/css/layout/tag-content.styl
+++ b/source/css/layout/tag-content.styl
@@ -5,7 +5,7 @@ $tag-name-font-size = 1.5rem
   keep-container(1, 2rem, 2rem)
 
   .tag-name {
-    margin-bottom $component-spacing-value
+    margin-bottom var(--components-spacing)
     color var(--text-color-2)
     font-weight 600
     font-size $tag-name-font-size