From b0c21b3619575cad7ede091e7e9456624fb45429 Mon Sep 17 00:00:00 2001
From: yife68 <2714344056@qq.com>
Date: Sat, 11 Nov 2023 16:56:45 +0800
Subject: [PATCH 01/43] =?UTF-8?q?stylus=E5=88=9D=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 搜索功能样式stylus化完成
- 色值变量stylus化完成
---
 _config.yml                                   |   9 +
 .../compoment/third-party/search/index.ejs    |   2 -
 layout/partial/head.ejs                       |   2 +-
 source/css/_global/animation.css              | 756 +++++++++++++++++
 source/css/_global/function.styl              |  31 +
 source/css/_global/index.styl                 | 120 +++
 source/css/_mode/index.styl                   |  41 +
 source/css/_search/algolia-search.styl        | 116 +++
 source/css/_search/local-search.styl          | 112 +++
 source/css/index.styl                         |  17 +
 source/css/main.css                           | 758 +-----------------
 source/css/search/algolia-search.css          | 141 ----
 source/css/search/local-search.css            | 138 ----
 source/css/var.css                            | 189 -----
 14 files changed, 1206 insertions(+), 1226 deletions(-)
 create mode 100644 source/css/_global/animation.css
 create mode 100644 source/css/_global/function.styl
 create mode 100644 source/css/_global/index.styl
 create mode 100644 source/css/_mode/index.styl
 create mode 100644 source/css/_search/algolia-search.styl
 create mode 100644 source/css/_search/local-search.styl
 create mode 100644 source/css/index.styl
 delete mode 100755 source/css/search/algolia-search.css
 delete mode 100755 source/css/search/local-search.css
 delete mode 100755 source/css/var.css

diff --git a/_config.yml b/_config.yml
index 62f765c1..36632412 100755
--- a/_config.yml
+++ b/_config.yml
@@ -425,6 +425,15 @@ pwa:
   favicon_640_1136: /img/pwa/siteicon/splash-640x1136.png
   favicon_1136_640: /img/pwa/siteicon/splash-1136x640.png
 
+
+# CSS 前缀
+# 有些 CSS 并不是所有浏览器都支持，需要增加对应的前缀才会生效
+# 开启 css_prefix 后，会自动为一些 CSS 增加前缀。（会增加 20%的体积）
+# --------------------------------------
+
+css_prefix: true
+
+
 # 非必要勿动
 cdn:
   head:
diff --git a/layout/partial/compoment/third-party/search/index.ejs b/layout/partial/compoment/third-party/search/index.ejs
index 0d57b735..4fdb58e5 100755
--- a/layout/partial/compoment/third-party/search/index.ejs
+++ b/layout/partial/compoment/third-party/search/index.ejs
@@ -1,10 +1,8 @@
 <% if(theme.thirdparty.search.local_search.enable){ %>
     <%- partial('partial/compoment/third-party/search/local-search') %>
-    <%- css('/css/search/local-search.css') %>
     <%- js('/js/extend/search/local-search.js') %>
 <% } %>
 <% if(theme.thirdparty.search.algolia_search.enable){ %>
     <%- partial('partial/compoment/third-party/search/algolia-search') %>
-        <%- css('/css/search/algolia-search') %>
     <%- js('/js/extend/search/algolia-search.js') %>
 <% } %>     
\ No newline at end of file
diff --git a/layout/partial/head.ejs b/layout/partial/head.ejs
index 782d0222..e0590c31 100755
--- a/layout/partial/head.ejs
+++ b/layout/partial/head.ejs
@@ -27,7 +27,7 @@ var description = page.desc || page.excerpt || config.description
     <link rel="bookmark" href="<%= url_for(theme.site.siteIcon) %>">
     <link rel="apple-touch-icon-precomposed" sizes="180x180" href="<%= url_for(theme.site.siteIcon) %>">
 <% } %>
-<link rel="stylesheet" href="/css/var.css">
+<link rel="stylesheet" href="/css/index.css">
 <link rel="stylesheet" href="/css/main.css">
 <link rel="stylesheet" href="/css/custom.css">
 <%- partial('partial/compoment/inject/head', {cache: true}) %>
diff --git a/source/css/_global/animation.css b/source/css/_global/animation.css
new file mode 100644
index 00000000..dd7f30da
--- /dev/null
+++ b/source/css/_global/animation.css
@@ -0,0 +1,756 @@
+@keyframes barrageIn {
+    0% {
+        transform: translateY(20px);
+        opacity: 0
+    }
+
+    100% {
+        transform: translateY(0);
+        opacity: 1
+    }
+}
+
+@keyframes barrageOut {
+    0% {
+        transform: translateY(0);
+        opacity: 1
+    }
+
+    100% {
+        transform: translateY(20px);
+        opacity: 0
+    }
+}
+
+@-webkit-keyframes scroll-down-effect {
+    0% {
+        top: 0;
+        opacity: .4
+    }
+
+    50% {
+        top: -16px;
+        opacity: 1;
+        filter: none
+    }
+
+    100% {
+        top: 0;
+        opacity: .4
+    }
+}
+
+@keyframes scroll-down-effect {
+    0% {
+        top: 0;
+        opacity: .4
+    }
+
+    50% {
+        top: -16px;
+        opacity: 1;
+        filter: none
+    }
+
+    100% {
+        top: 0;
+        opacity: .4
+    }
+}
+
+@-webkit-keyframes header-effect {
+    0% {
+        opacity: 0;
+        transform: translateY(-50px)
+    }
+
+    100% {
+        opacity: 1;
+        filter: none;
+        transform: translateY(0)
+    }
+}
+
+@keyframes header-effect {
+    0% {
+        opacity: 0;
+        transform: translateY(-50px)
+    }
+
+    100% {
+        opacity: 1;
+        filter: none;
+        transform: translateY(0)
+    }
+}
+
+@-webkit-keyframes headerNoOpacity {
+    0% {
+        transform: translateY(-50px)
+    }
+
+    100% {
+        transform: translateY(0)
+    }
+}
+
+@keyframes headerNoOpacity {
+    0% {
+        transform: translateY(-50px)
+    }
+
+    100% {
+        transform: translateY(0)
+    }
+}
+
+@-webkit-keyframes bottom-top {
+    0% {
+        opacity: 0;
+        margin-top: 50px
+    }
+
+    100% {
+        opacity: 1;
+        filter: none;
+        margin-top: 0
+    }
+}
+
+@keyframes bottom-top {
+    0% {
+        opacity: 0;
+        margin-top: 50px
+    }
+
+    100% {
+        opacity: 1;
+        filter: none;
+        margin-top: 0
+    }
+}
+
+@-webkit-keyframes titlescale {
+    0% {
+        opacity: 0;
+        transform: scale(.7)
+    }
+
+    100% {
+        opacity: 1;
+        filter: none;
+        transform: scale(1)
+    }
+}
+
+@keyframes titlescale {
+    0% {
+        opacity: 0;
+        transform: scale(.7)
+    }
+
+    100% {
+        opacity: 1;
+        filter: none;
+        transform: scale(1)
+    }
+}
+
+@-webkit-keyframes search_close {
+    0% {
+        transform: translateY(0);
+        opacity: 1
+    }
+
+    100% {
+        transform: translateY(20px);
+        opacity: 0
+    }
+}
+
+@keyframes search_close {
+    0% {
+        transform: translateY(0);
+        opacity: 1
+    }
+
+    100% {
+        transform: translateY(20px);
+        opacity: 0
+    }
+}
+
+@-webkit-keyframes to_show {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1;
+        filter: none
+    }
+}
+
+@keyframes to_show {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1;
+        filter: none
+    }
+}
+
+@-webkit-keyframes to_hide {
+    0% {
+        opacity: 1;
+        filter: none
+    }
+
+    100% {
+        opacity: 0
+    }
+}
+
+@keyframes to_hide {
+    0% {
+        opacity: 1;
+        filter: none
+    }
+
+    100% {
+        opacity: 0
+    }
+}
+
+@-webkit-keyframes ribbon_to_show {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: .6
+    }
+}
+
+@keyframes ribbon_to_show {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: .6
+    }
+}
+
+@-webkit-keyframes avatar_turn_around {
+    0% {
+        transform: rotate(0)
+    }
+
+    100% {
+        transform: rotate(360deg)
+    }
+}
+
+@keyframes avatar_turn_around {
+    0% {
+        transform: rotate(0)
+    }
+
+    100% {
+        transform: rotate(360deg)
+    }
+}
+
+@-webkit-keyframes sub_menus {
+    0% {
+        opacity: 0;
+        transform: translateY(10px)
+    }
+
+    100% {
+        opacity: 1;
+        filter: none;
+        transform: translateY(0)
+    }
+}
+
+@keyframes sub_menus {
+    0% {
+        opacity: 0;
+        transform: translateY(10px)
+    }
+
+    100% {
+        opacity: 1;
+        filter: none;
+        transform: translateY(0)
+    }
+}
+
+@-webkit-keyframes donate_effcet {
+    0% {
+        opacity: 0;
+        transform: translateY(-20px)
+    }
+
+    100% {
+        opacity: 1;
+        filter: none;
+        transform: translateY(0)
+    }
+}
+
+@keyframes donate_effcet {
+    0% {
+        opacity: 0;
+        transform: translateY(-20px)
+    }
+
+    100% {
+        opacity: 1;
+        filter: none;
+        transform: translateY(0)
+    }
+}
+
+@-webkit-keyframes announ_animation {
+    0%, 100% {
+        transform: scale(1);
+        filter: blur(0)
+    }
+
+    50% {
+        transform: scale(1.2);
+        filter: blur(20px)
+    }
+}
+
+@keyframes announ_animation {
+    0%, 100% {
+        transform: scale(1);
+        filter: blur(0)
+    }
+
+    50% {
+        transform: scale(1.2);
+        filter: blur(20px)
+    }
+}
+
+@-webkit-keyframes sidebarItem {
+    0% {
+        transform: translateX(200px)
+    }
+
+    100% {
+        transform: translateX(0)
+    }
+}
+
+@keyframes sidebarItem {
+    0% {
+        transform: translateX(200px)
+    }
+
+    100% {
+        transform: translateX(0)
+    }
+}
+
+@keyframes heo-spin {
+    0% {
+        transform: rotate(0)
+    }
+
+    100% {
+        transform: rotate(360deg)
+    }
+}
+
+@-webkit-keyframes code-expand-key {
+    0% {
+        opacity: .6
+    }
+
+    50% {
+        opacity: .1
+    }
+
+    100% {
+        opacity: .6
+    }
+}
+
+@keyframes code-expand-key {
+    0% {
+        opacity: .6
+    }
+
+    50% {
+        opacity: .1
+    }
+
+    100% {
+        opacity: .6
+    }
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateY(20px);
+        opacity: 0
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1
+    }
+}
+
+@keyframes slide-in-op {
+    from {
+        opacity: 0
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes more-btn-move {
+    0%, 100% {
+        transform: translateX(0)
+    }
+
+    50% {
+        transform: translateX(3px)
+    }
+}
+
+@keyframes more-btn-move {
+    0%, 100% {
+        transform: translateX(0)
+    }
+
+    50% {
+        transform: translateX(3px)
+    }
+}
+
+@-webkit-keyframes toc-open {
+    0% {
+        transform: scale(.7)
+    }
+
+    100% {
+        transform: scale(1)
+    }
+}
+
+@keyframes toc-open {
+    0% {
+        transform: scale(.7)
+    }
+
+    100% {
+        transform: scale(1)
+    }
+}
+
+@-webkit-keyframes toc-close {
+    0% {
+        transform: scale(1)
+    }
+
+    100% {
+        transform: scale(.7)
+    }
+}
+
+@keyframes toc-close {
+    0% {
+        transform: scale(1)
+    }
+
+    100% {
+        transform: scale(.7)
+    }
+}
+
+@-webkit-keyframes configure-clockwise {
+    0% {
+        transform: rotate(0)
+    }
+
+    25% {
+        transform: rotate(90deg)
+    }
+
+    50% {
+        transform: rotate(180deg)
+    }
+
+    75% {
+        transform: rotate(270deg)
+    }
+
+    100% {
+        transform: rotate(360deg)
+    }
+}
+
+@keyframes configure-clockwise {
+    0% {
+        transform: rotate(0)
+    }
+
+    25% {
+        transform: rotate(90deg)
+    }
+
+    50% {
+        transform: rotate(180deg)
+    }
+
+    75% {
+        transform: rotate(270deg)
+    }
+
+    100% {
+        transform: rotate(360deg)
+    }
+}
+
+@-webkit-keyframes configure-xclockwise {
+    0% {
+        transform: rotate(45deg)
+    }
+
+    25% {
+        transform: rotate(-45deg)
+    }
+
+    50% {
+        transform: rotate(-135deg)
+    }
+
+    75% {
+        transform: rotate(-225deg)
+    }
+
+    100% {
+        transform: rotate(-315deg)
+    }
+}
+
+@keyframes configure-xclockwise {
+    0% {
+        transform: rotate(45deg)
+    }
+
+    25% {
+        transform: rotate(-45deg)
+    }
+
+    50% {
+        transform: rotate(-135deg)
+    }
+
+    75% {
+        transform: rotate(-225deg)
+    }
+
+    100% {
+        transform: rotate(-315deg)
+    }
+}
+
+@-webkit-keyframes tabshow {
+    0% {
+        transform: translateY(15px)
+    }
+
+    100% {
+        transform: translateY(0)
+    }
+}
+
+@keyframes tabshow {
+    0% {
+        transform: translateY(15px)
+    }
+
+    100% {
+        transform: translateY(0)
+    }
+}
+
+@-webkit-keyframes playingShadow {
+    0% {
+        box-shadow: 0 0 12px -6px var(--sco-none)
+    }
+
+    50% {
+        box-shadow: 0 0 12px 0 var(--sco-main)
+    }
+
+    100% {
+        box-shadow: 0 0 12px -6px var(--sco-none)
+    }
+}
+
+@-webkit-keyframes changeright {
+    0% {
+        -webkit-transform: rotate(0) scale(1.1);
+        box-shadow: 0 0 2px #ffffff00
+    }
+
+    25% {
+        -webkit-transform: rotate(90deg) scale(1.1);
+        box-shadow: 0 0 10px #fff
+    }
+
+    50% {
+        -webkit-transform: rotate(180deg) scale(1.1);
+        box-shadow: 0 0 2px #ffffff00
+    }
+
+    75% {
+        -webkit-transform: rotate(270deg) scale(1.1);
+        box-shadow: 0 0 10px #fff
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg) scale(1.1);
+        box-shadow: 0 0 2px #ffffff00
+    }
+}
+
+@-webkit-keyframes lightBar {
+    0% {
+        opacity: .1
+    }
+
+    60% {
+        opacity: .3
+    }
+
+    100% {
+        opacity: .1
+    }
+}
+
+@keyframes snackbar-progress {
+    from {
+        width: 0
+    }
+
+    to {
+        width: 100%
+    }
+}
+
+@keyframes move-forever {
+    0% {
+        transform: translate3d(-90px, 0, 0)
+    }
+
+    100% {
+        transform: translate3d(85px, 0, 0)
+    }
+}
+
+@keyframes rowup {
+    from {
+        transform: translateX(0)
+    }
+
+    to {
+        transform: translateX(-50%)
+    }
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0 50%
+    }
+
+    50% {
+        background-position: 100% 50%
+    }
+
+    100% {
+        background-position: 0 50%
+    }
+}
+
+@keyframes commonTipsIn {
+    0% {
+        top: -50px;
+        opacity: 0
+    }
+
+    100% {
+        top: -60px;
+        opacity: 1
+    }
+}
+
+@keyframes commonTriangleIn {
+    0% {
+        transform: translate(-50%, -36px);
+        opacity: 0
+    }
+
+    100% {
+        transform: translate(-50%, -46px);
+        opacity: 1
+    }
+}
+
+@keyframes owoIn {
+    0% {
+        transform: translate(0, -95%);
+        opacity: 0
+    }
+
+    100% {
+        transform: translate(0, -105%);
+        opacity: 1
+    }
+}
+
+@keyframes light_tag {
+    0% {
+        transform: skewx(0);
+        -o-transform: skewx(0);
+        -moz-transform: skewx(0);
+        -webkit-transform: skewx(0);
+        left: -150px
+    }
+
+    99% {
+        transform: skewx(-25deg);
+        -o-transform: skewx(-25deg);
+        -moz-transform: skewx(-25deg);
+        -webkit-transform: skewx(-25deg);
+        left: 50px
+    }
+}
+
+@keyframes floating {
+    0% {
+        transform: translate(0, -4px)
+    }
+
+    50% {
+        transform: translate(0, 4px)
+    }
+
+    100% {
+        transform: translate(0, -4px)
+    }
+}
\ No newline at end of file
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
new file mode 100644
index 00000000..54ba9b37
--- /dev/null
+++ b/source/css/_global/function.styl
@@ -0,0 +1,31 @@
+maxWidth600()
+    @media screen and (max-width: 600px)
+        {block}
+
+maxWidth768()
+    @media screen and (max-width: 768px)
+        {block}
+
+minWidth768()
+    @media screen and (min-width: 768px)
+        {block}
+
+maxWidth1024()
+    @media screen and (max-width: 1024px)
+        {block}
+
+maxWidth900()
+    @media screen and (max-width: 900px)
+        {block}
+
+minWidth901()
+    @media screen and (min-width: 901px)
+        {block}
+
+minWidth900()
+    @media screen and (min-width: 900px)
+        {block}
+
+minWidth2000()
+    @media screen and (min-width: 2000px)
+        {block}
\ No newline at end of file
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
new file mode 100644
index 00000000..aa0db6f5
--- /dev/null
+++ b/source/css/_global/index.styl
@@ -0,0 +1,120 @@
+:root 
+	--sco-white #fff
+	--sco-white-op rgba(255, 255, 255, 0.2)
+	--sco-black #000
+	--sco-black-op rgba(0, 0, 0, 0.2)
+	--sco-none #00000000
+	--sco-gray #999999
+	--sco-gray-op #9999992b
+	--sco-vip #e5a80d
+	--sco-main var(--sco-theme)
+	--sco-main-op var(--sco-theme-op)
+	--sco-main-op-deep var(--sco-theme-op-deep)
+	--sco-main-op-light var(--sco-theme-op-light)
+	--sco-main-none var(--sco-theme-none)
+	--sco-shadow-theme 0 8px 12px -3px var(--sco-theme-op)
+	--sco-shadow-blackdeep 0 2px 16px -3px rgba(0, 0, 0, .15)
+	--sco-shadow-main 0 8px 12px -3px var(--sco-main-op)
+	--sco-shadow-blue 0 8px 12px -3px rgba(40, 109, 234, .20)
+	--sco-shadow-white 0 8px 12px -3px rgba(255, 255, 255, .20)
+	--sco-shadow-black 0 0 12px 4px rgba(0, 0, 0, .05)
+	--sco-shadow-yellow 0px 38px 77px -26px rgba(255, 201, 62, .12)
+	--sco-shadow-red 0 8px 12px -3px #ee7d7936
+	--sco-shadow-green 0 8px 12px -3px #87ee7936
+	--sco-logo-color linear-gradient(215deg, #4584ff 0%, #cf0db9 100%)
+	--sco-snackbar-time 5s
+	--global-font-size 14px
+	--global-bg #fff
+	--hr-border #97bcfb
+	--hr-before-color #6ea2f9
+	--search-bg #f6f8fa
+	--search-input-color #4c4948
+	--search-result-title #4c4948
+	--preloader-bg #37474f
+	--preloader-color #fff
+	--tab-border-color #f0f0f0
+	--tab-botton-bg #f0f0f0
+	--tab-botton-color #1f2d3d
+	--tab-button-hover-bg #dcdcdc
+	--tab-button-active-bg #fff
+	--sidebar-bg #f6f8fa
+	--btn-hover-color #ff7242
+	--btn-color #fff
+	--btn-bg #307af6
+	--text-bg-hover #307af6
+	--light-grey #eee
+	--text-highlight-color #1f2d3d
+	--blockquote-color #6a737d
+	--blockquote-bg rgba(73, 177, 245, 0.1)
+	--reward-pop #f5f5f5
+	--toc-link-color #666261
+	--card-box-shadow 0 3px 8px 6px rgba(7, 17, 27, 0.06)
+	--card-hover-box-shadow 0 3px 8px 6px rgba(7, 17, 27, 0.15)
+	--offset 0px
+
+	// highlight
+	--hl-color #eff
+	--hl-bg #212121
+	--hltools-bg #1c1c1c
+	--hltools-color rgba(238, 255, 255, 0.8)
+	--hlnumber-bg #212121
+	--hlnumber-color rgba(238, 255, 255, 0.5)
+	--hlscrollbar-bg #121212
+	--hlexpand-bg linear-gradient(180deg, rgba(33, 33, 33, 0.6), rgba(33, 33, 33, 0.9))
+
+	// ai摘要
+	--ai-post-bg rgba(255,255,255,0.32)
+	--ai-border 1px solid #e3e8f7bd
+	--ai-tag-bg rgba(48, 52, 63, 0.86)
+	--ai-cursor #333
+
+	// 个性定位
+	--icat-card-welcome #49b1f5
+
+	+maxWidth768()
+		--style-border 0px solid var(--sco-card-border)
+		--style-border-hover 0px solid var(--sco-main)
+
+[data-theme=light] 
+	--sco-theme #bdbdf0
+	--sco-theme-op #4259ef23
+	--sco-theme-op-deep #eccec5
+	--sco-theme-op-light #4259ef0d
+	--sco-theme-none #4259ef01
+	--sco-blue #425aef
+	--sco-red #f04a63
+	--sco-pink #ff7c7c
+	--sco-green #57bd6a
+	--sco-yellow #c28b00
+	--sco-yellow-op #d99c001a
+	--sco-orange #e38100
+	--sco-purple #7a60d2
+	--sco-fontcolor #363636
+	--sco-background #f7f9fe
+	--sco-reverse #000
+	--sco-maskbg rgba(255, 255, 255, 0.6)
+	--sco-maskbgdeep rgba(255, 255, 255, 0.85)
+	--sco-hovertext var(--sco-main)
+	--sco-ahoverbg #f7f7fa
+	--sco-lighttext var(--sco-main)
+	--sco-secondtext rgba(60, 60, 67, 0.8)
+	--sco-scrollbar rgba(60, 60, 67, 0.4)
+	--sco-card-btn-bg #edf0f7
+	--sco-post-blockquote-bg #fafcff
+	--sco-post-tabs-bg #f2f5f8
+	--sco-secondbg #f7f7f9
+	--sco-shadow-nav 0 5px 12px -5px rgba(102, 68, 68, 0.05)
+	--sco-card-bg #fff
+	--sco-card-bg-op var(--sco-black-op)
+	--sco-card-bg-none rgba(255, 255, 255, 0)
+	--sco-shadow-lightblack 0 5px 12px -5px rgba(102, 68, 68, 0.00)
+	--sco-shadow-light2black 0 5px 12px -5px rgba(102, 68, 68, 0.00)
+	--sco-card-border #e3e8f7
+	--sco-shadow-border 0 8px 16px -4px #2c2d300c
+	--style-border 1px solid var(--sco-card-border)
+	--style-border-always 1px solid var(--sco-card-border)
+	--style-border-hover 1px solid var(--sco-main)
+	--style-border-hover-always 1px solid var(--sco-main)
+	--style-border-dashed 1px dashed var(--sco-theme-op)
+	--style-border-forever 2px solid var(--sco-main)
+	--sco-navbg var(--sco-theme-op)
diff --git a/source/css/_mode/index.styl b/source/css/_mode/index.styl
new file mode 100644
index 00000000..da8bcbd8
--- /dev/null
+++ b/source/css/_mode/index.styl
@@ -0,0 +1,41 @@
+[data-theme=dark] 
+	--sco-theme #f2b94b
+	--sco-theme-op #f2b94b23
+	--sco-theme-op-deep #f2b94bdd
+	--sco-theme-none #f2b94b00
+	--sco-blue #0084ff
+	--sco-red #ff3842
+	--sco-pink #d44040
+	--sco-green #3e9f50
+	--sco-purple #7a60d2
+	--sco-yellow #ffc93e
+	--sco-yellow-op #ffc93e30
+	--sco-orange #ff953e
+	--sco-fontcolor #f7f7fa
+	--sco-background #18171d
+	--sco-reverse #fff
+	--sco-maskbg rgba(0, 0, 0, 0.6)
+	--sco-maskbgdeep rgba(0, 0, 0, 0.85)
+	--sco-hovertext #0a84ff
+	--sco-ahoverbg #fff
+	--sco-lighttext var(--sco-theme)
+	--sco-secondtext #a1a2b8
+	--sco-scrollbar rgba(200, 200, 223, 0.4)
+	--sco-card-btn-bg #30343f
+	--sco-post-blockquote-bg #000
+	--sco-post-tabs-bg #121212
+	--sco-secondbg #30343f
+	--sco-shadow-nav 0 5px 20px 0px rgba(28, 28, 28, 0.4)
+	--sco-card-bg #1b1c20
+	--sco-card-bg-op var(--sco-white-op)
+	--sco-card-bg-none #1d1b2600
+	--sco-shadow-lightblack 0 5px 12px -5px rgba(102, 68, 68, 0.0)
+	--sco-shadow-light2black 0 5px 12px -5px rgba(102, 68, 68, 0.0)
+	--sco-card-border #3d3d3f
+	--sco-shadow-border 0 8px 16px -4px #00000050
+	--style-border 1px solid var(--sco-card-border)
+	--style-border-always 1px solid var(--sco-card-border)
+	--style-border-hover 1px solid var(--sco-theme)
+	--style-border-hover-always 1px solid var(--sco-theme)
+	--style-border-dashed 1px dashed var(--sco-theme-op)
+	--style-border-forever 2px solid var(--sco-lighttext)
diff --git a/source/css/_search/algolia-search.styl b/source/css/_search/algolia-search.styl
new file mode 100644
index 00000000..5e8c3bee
--- /dev/null
+++ b/source/css/_search/algolia-search.styl
@@ -0,0 +1,116 @@
+.search-dialog 
+	position fixed
+	top 5rem
+	left 50%
+	z-index 1001
+	display none
+	margin-left -15rem
+	padding 1rem
+	width 30rem
+	box-shadow var(--sco-shadow-lightblack)
+	background var(--sco-card-bg)
+	border var(--style-border)
+	transition 0.3s
+	border-radius 12px
+
+	+maxWidth768()
+		top 0px
+		left 0px
+		margin 0px
+		width 100%
+		height 100%
+
+	.search-close-button
+		&:hover
+			color rgb(48, 122, 246)
+
+	.search-box
+		padding-top 8px
+		max-width 100%
+        
+		input
+			height 100%
+			width 100%
+			padding 0.25rem 0.7rem
+			outline 0px
+			border var(--style-border)
+			border-radius 8px
+			background var(--sco-secondbg)
+			color var(--sco-fontcolor)
+			&:focus
+				border var(--style-border-hover)
+
+	.search-close-button
+		color rgb(133, 133, 133)
+		font-size 1.2em
+		line-height 1
+		cursor pointer
+		transition color 0.2s ease-in-out 0s
+
+#search-mask 
+	position fixed
+	inset 0px
+	z-index 1000
+	display none
+	background rgba(0, 0, 0, 0.6)
+	backdrop-filter blur(12px)
+	-webkit-backdrop-filter blur(12px)
+	transform translateZ(0)
+	background var(--sco-maskbgdeep)
+
+.search-nav 
+	display flex
+	align-items center
+	justify-content space-between
+	padding 0 0.2rem 0.7rem 0.2rem
+
+.search-dialog-title 
+	font-weight bold
+	color var(--sco-main)
+	font-size 1.4em
+	line-height 1
+
+.search-box 
+	input 
+		&::placeholder 
+			color var(--sco-gray)
+			
+#algolia-search 
+	#search-results 
+		padding 8px
+		max-height calc(80vh - 130px)
+		overflow-y auto
+
+		+maxWidth768()
+			max-height 80vh !important
+            
+	.ais-Hits-list 
+		padding 0
+
+	.ais-Hits-item 
+		margin 10px 0
+
+	.algolia-hit-item-content 
+		margin 0
+
+	.algolia-hit-item-link 
+		width auto
+		max-width 100%
+		white-space nowrap
+		text-overflow ellipsis
+		overflow hidden
+		font-weight bold
+
+	mark 
+		color var(--sco-theme)
+		font-style normal
+		background var(--sco-card-bg)
+
+	.ais-Hits--empty 
+		text-align center
+		font-weight 600
+
+	.algolia-stats 
+		color var(--sco-gray)
+		font-size .8rem
+		font-weight bold
diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl
new file mode 100644
index 00000000..95d702e7
--- /dev/null
+++ b/source/css/_search/local-search.styl
@@ -0,0 +1,112 @@
+.search-dialog 
+	position fixed
+	top 5rem
+	left 50%
+	z-index 1001
+	display none
+	margin-left -15rem
+	padding 1rem
+	width 30rem
+	box-shadow var(--sco-shadow-lightblack)
+	background var(--sco-card-bg)
+	border var(--style-border)
+	transition 0.3s
+	border-radius 12px
+
+	+maxWidth768()
+		top 0px
+		left 0px
+		margin 0px
+		width 100%
+		height 100%
+
+	.search-close-button 
+		color rgb(133, 133, 133)
+		font-size 1.2em
+		line-height 1
+		cursor pointer
+		transition color 0.2s ease-in-out 0s
+
+		&:hover 
+			color rgb(48, 122, 246)
+
+	.search-box 
+		padding-top 8px
+		max-width 100%
+
+		input 
+			height 100%
+			width 100%
+			padding 0.25rem 0.7rem
+			outline 0px
+			border var(--style-border)
+			border-radius 8px
+			background var(--sco-secondbg)
+			color var(--sco-fontcolor)
+
+			&:focus 
+				border var(--style-border-hover)
+
+#search-mask 
+	position fixed
+	inset 0px
+	z-index 1000
+	display none
+	background rgba(0, 0, 0, 0.6)
+	backdrop-filter blur(12px)
+	-webkit-backdrop-filter blur(12px)
+	transform translateZ(0)
+	background var(--sco-maskbgdeep)
+
+.search-wrap 
+	display none
+
+#loading-database,
+#loading-status 
+	text-align center
+	padding-top 10px
+
+.search-nav 
+	display flex
+	align-items center
+	justify-content space-between
+	padding 0 0.2rem 0.7rem 0.2rem
+
+.search-dialog-title 
+	font-weight bold
+	color var(--sco-main)
+	font-size 1.4em
+	line-height 1
+
+#search-results 
+	max-height calc(80vh - 130px)
+	overflow-y auto
+
+	+maxWidth768()
+		max-height 80vh !important
+
+	.search__hit-item 
+		font-weight bold
+		margin 10px 0
+
+	.search-result 
+		margin 0
+		font-weight 500
+
+	.search-keyword 
+		color var(--sco-theme)
+		font-style normal
+
+#search__hits-empty 
+	text-align center
+	font-weight 600
+
+.search__hits-count 
+	color var(--sco-gray)
+	font-size .8rem
+	font-weight bold
+
+.search-box 
+	input 
+		&::placeholder 
+			color var(--sco-gray)
\ No newline at end of file
diff --git a/source/css/index.styl b/source/css/index.styl
new file mode 100644
index 00000000..5ad50f23
--- /dev/null
+++ b/source/css/index.styl
@@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+if hexo-config('css_prefix')
+    @import 'nib'
+
+// project
+@import '_global/animation.css'
+@import '_global/*'
+
+// search
+if hexo-config('thirdparty.search.algolia_search.enable')
+    @import '_search/algolia-search'
+if hexo-config('thirdparty.search.local_search.enable')
+    @import '_search/local-search'
+
+// dark
+@import '_mode/*'
\ No newline at end of file
diff --git a/source/css/main.css b/source/css/main.css
index ef193cb3..a4d9df12 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -1,27 +1,8 @@
 @charset "UTF-8";
 
-@keyframes barrageIn {
-    0% {
-        transform: translateY(20px);
-        opacity: 0
-    }
-
-    100% {
-        transform: translateY(0);
-        opacity: 1
-    }
-}
-
-@keyframes barrageOut {
-    0% {
-        transform: translateY(0);
-        opacity: 1
-    }
-
-    100% {
-        transform: translateY(20px);
-        opacity: 0
-    }
+::selection {
+    background: var(--sco-fontcolor);
+    color: var(--sco-background)
 }
 
 i.scoicon {
@@ -252,354 +233,6 @@ template {
     animation: .3s ease .1s 1 normal both running donate_effcet
 }
 
-@-webkit-keyframes scroll-down-effect {
-    0% {
-        top: 0;
-        opacity: .4
-    }
-
-    50% {
-        top: -16px;
-        opacity: 1;
-        filter: none
-    }
-
-    100% {
-        top: 0;
-        opacity: .4
-    }
-}
-
-@keyframes scroll-down-effect {
-    0% {
-        top: 0;
-        opacity: .4
-    }
-
-    50% {
-        top: -16px;
-        opacity: 1;
-        filter: none
-    }
-
-    100% {
-        top: 0;
-        opacity: .4
-    }
-}
-
-@-webkit-keyframes header-effect {
-    0% {
-        opacity: 0;
-        transform: translateY(-50px)
-    }
-
-    100% {
-        opacity: 1;
-        filter: none;
-        transform: translateY(0)
-    }
-}
-
-@keyframes header-effect {
-    0% {
-        opacity: 0;
-        transform: translateY(-50px)
-    }
-
-    100% {
-        opacity: 1;
-        filter: none;
-        transform: translateY(0)
-    }
-}
-
-@-webkit-keyframes headerNoOpacity {
-    0% {
-        transform: translateY(-50px)
-    }
-
-    100% {
-        transform: translateY(0)
-    }
-}
-
-@keyframes headerNoOpacity {
-    0% {
-        transform: translateY(-50px)
-    }
-
-    100% {
-        transform: translateY(0)
-    }
-}
-
-@-webkit-keyframes bottom-top {
-    0% {
-        opacity: 0;
-        margin-top: 50px
-    }
-
-    100% {
-        opacity: 1;
-        filter: none;
-        margin-top: 0
-    }
-}
-
-@keyframes bottom-top {
-    0% {
-        opacity: 0;
-        margin-top: 50px
-    }
-
-    100% {
-        opacity: 1;
-        filter: none;
-        margin-top: 0
-    }
-}
-
-@-webkit-keyframes titlescale {
-    0% {
-        opacity: 0;
-        transform: scale(.7)
-    }
-
-    100% {
-        opacity: 1;
-        filter: none;
-        transform: scale(1)
-    }
-}
-
-@keyframes titlescale {
-    0% {
-        opacity: 0;
-        transform: scale(.7)
-    }
-
-    100% {
-        opacity: 1;
-        filter: none;
-        transform: scale(1)
-    }
-}
-
-@-webkit-keyframes search_close {
-    0% {
-        transform: translateY(0);
-        opacity: 1
-    }
-
-    100% {
-        transform: translateY(20px);
-        opacity: 0
-    }
-}
-
-@keyframes search_close {
-    0% {
-        transform: translateY(0);
-        opacity: 1
-    }
-
-    100% {
-        transform: translateY(20px);
-        opacity: 0
-    }
-}
-
-@-webkit-keyframes to_show {
-    0% {
-        opacity: 0
-    }
-
-    100% {
-        opacity: 1;
-        filter: none
-    }
-}
-
-@keyframes to_show {
-    0% {
-        opacity: 0
-    }
-
-    100% {
-        opacity: 1;
-        filter: none
-    }
-}
-
-@-webkit-keyframes to_hide {
-    0% {
-        opacity: 1;
-        filter: none
-    }
-
-    100% {
-        opacity: 0
-    }
-}
-
-@keyframes to_hide {
-    0% {
-        opacity: 1;
-        filter: none
-    }
-
-    100% {
-        opacity: 0
-    }
-}
-
-@-webkit-keyframes ribbon_to_show {
-    0% {
-        opacity: 0
-    }
-
-    100% {
-        opacity: .6
-    }
-}
-
-@keyframes ribbon_to_show {
-    0% {
-        opacity: 0
-    }
-
-    100% {
-        opacity: .6
-    }
-}
-
-@-webkit-keyframes avatar_turn_around {
-    0% {
-        transform: rotate(0)
-    }
-
-    100% {
-        transform: rotate(360deg)
-    }
-}
-
-@keyframes avatar_turn_around {
-    0% {
-        transform: rotate(0)
-    }
-
-    100% {
-        transform: rotate(360deg)
-    }
-}
-
-@-webkit-keyframes sub_menus {
-    0% {
-        opacity: 0;
-        transform: translateY(10px)
-    }
-
-    100% {
-        opacity: 1;
-        filter: none;
-        transform: translateY(0)
-    }
-}
-
-@keyframes sub_menus {
-    0% {
-        opacity: 0;
-        transform: translateY(10px)
-    }
-
-    100% {
-        opacity: 1;
-        filter: none;
-        transform: translateY(0)
-    }
-}
-
-@-webkit-keyframes donate_effcet {
-    0% {
-        opacity: 0;
-        transform: translateY(-20px)
-    }
-
-    100% {
-        opacity: 1;
-        filter: none;
-        transform: translateY(0)
-    }
-}
-
-@keyframes donate_effcet {
-    0% {
-        opacity: 0;
-        transform: translateY(-20px)
-    }
-
-    100% {
-        opacity: 1;
-        filter: none;
-        transform: translateY(0)
-    }
-}
-
-@-webkit-keyframes announ_animation {
-    0%, 100% {
-        transform: scale(1);
-        filter: blur(0)
-    }
-
-    50% {
-        transform: scale(1.2);
-        filter: blur(20px)
-    }
-}
-
-@keyframes announ_animation {
-    0%, 100% {
-        transform: scale(1);
-        filter: blur(0)
-    }
-
-    50% {
-        transform: scale(1.2);
-        filter: blur(20px)
-    }
-}
-
-@-webkit-keyframes sidebarItem {
-    0% {
-        transform: translateX(200px)
-    }
-
-    100% {
-        transform: translateX(0)
-    }
-}
-
-@keyframes sidebarItem {
-    0% {
-        transform: translateX(200px)
-    }
-
-    100% {
-        transform: translateX(0)
-    }
-}
-
-@keyframes heo-spin {
-    0% {
-        transform: rotate(0)
-    }
-
-    100% {
-        transform: rotate(360deg)
-    }
-}
-
 html {
     height: 100%;
     font-size: 20px
@@ -1005,56 +638,6 @@ blockquote footer cite::before {
     height: 400px
 }
 
-@-webkit-keyframes code-expand-key {
-    0% {
-        opacity: .6
-    }
-
-    50% {
-        opacity: .1
-    }
-
-    100% {
-        opacity: .6
-    }
-}
-
-@keyframes code-expand-key {
-    0% {
-        opacity: .6
-    }
-
-    50% {
-        opacity: .1
-    }
-
-    100% {
-        opacity: .6
-    }
-}
-
-@keyframes slide-in {
-    from {
-        transform: translateY(20px);
-        opacity: 0
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1
-    }
-}
-
-@keyframes slide-in-op {
-    from {
-        opacity: 0
-    }
-
-    to {
-        opacity: 1
-    }
-}
-
 .article-sort {
     margin-left: .5rem;
     padding-left: 1rem;
@@ -2222,66 +1805,6 @@ blockquote footer cite::before {
     flex-direction: column
 }
 
-@-webkit-keyframes more-btn-move {
-    0%, 100% {
-        transform: translateX(0)
-    }
-
-    50% {
-        transform: translateX(3px)
-    }
-}
-
-@keyframes more-btn-move {
-    0%, 100% {
-        transform: translateX(0)
-    }
-
-    50% {
-        transform: translateX(3px)
-    }
-}
-
-@-webkit-keyframes toc-open {
-    0% {
-        transform: scale(.7)
-    }
-
-    100% {
-        transform: scale(1)
-    }
-}
-
-@keyframes toc-open {
-    0% {
-        transform: scale(.7)
-    }
-
-    100% {
-        transform: scale(1)
-    }
-}
-
-@-webkit-keyframes toc-close {
-    0% {
-        transform: scale(1)
-    }
-
-    100% {
-        transform: scale(.7)
-    }
-}
-
-@keyframes toc-close {
-    0% {
-        transform: scale(1)
-    }
-
-    100% {
-        transform: scale(.7)
-    }
-}
-
 #post-comment .comment-head .comment-headline {
     display: inline-block;
     vertical-align: middle;
@@ -2789,94 +2312,6 @@ li, ul {
     padding: 0
 }
 
-@-webkit-keyframes configure-clockwise {
-    0% {
-        transform: rotate(0)
-    }
-
-    25% {
-        transform: rotate(90deg)
-    }
-
-    50% {
-        transform: rotate(180deg)
-    }
-
-    75% {
-        transform: rotate(270deg)
-    }
-
-    100% {
-        transform: rotate(360deg)
-    }
-}
-
-@keyframes configure-clockwise {
-    0% {
-        transform: rotate(0)
-    }
-
-    25% {
-        transform: rotate(90deg)
-    }
-
-    50% {
-        transform: rotate(180deg)
-    }
-
-    75% {
-        transform: rotate(270deg)
-    }
-
-    100% {
-        transform: rotate(360deg)
-    }
-}
-
-@-webkit-keyframes configure-xclockwise {
-    0% {
-        transform: rotate(45deg)
-    }
-
-    25% {
-        transform: rotate(-45deg)
-    }
-
-    50% {
-        transform: rotate(-135deg)
-    }
-
-    75% {
-        transform: rotate(-225deg)
-    }
-
-    100% {
-        transform: rotate(-315deg)
-    }
-}
-
-@keyframes configure-xclockwise {
-    0% {
-        transform: rotate(45deg)
-    }
-
-    25% {
-        transform: rotate(-45deg)
-    }
-
-    50% {
-        transform: rotate(-135deg)
-    }
-
-    75% {
-        transform: rotate(-225deg)
-    }
-
-    100% {
-        transform: rotate(-315deg)
-    }
-}
-
 #pagination .pagination {
     text-align: center
 }
@@ -4601,26 +4036,6 @@ blockquote.pullquote.right {
     color: #99a9bf
 }
 
-@-webkit-keyframes tabshow {
-    0% {
-        transform: translateY(15px)
-    }
-
-    100% {
-        transform: translateY(0)
-    }
-}
-
-@keyframes tabshow {
-    0% {
-        transform: translateY(15px)
-    }
-
-    100% {
-        transform: translateY(0)
-    }
-}
-
 .search-dialog {
     position: fixed;
     top: 5rem;
@@ -5572,20 +4987,6 @@ html {
     -webkit-animation: playingShadow 5s linear infinite
 }
 
-@-webkit-keyframes playingShadow {
-    0% {
-        box-shadow: 0 0 12px -6px var(--sco-none)
-    }
-
-    50% {
-        box-shadow: 0 0 12px 0 var(--sco-main)
-    }
-
-    100% {
-        box-shadow: 0 0 12px -6px var(--sco-none)
-    }
-}
-
 #nav-music .aplayer.aplayer-withlrc .aplayer-pic {
     height: 25px;
     width: 25px;
@@ -5605,33 +5006,6 @@ html {
     animation-play-state: running
 }
 
-@-webkit-keyframes changeright {
-    0% {
-        -webkit-transform: rotate(0) scale(1.1);
-        box-shadow: 0 0 2px #ffffff00
-    }
-
-    25% {
-        -webkit-transform: rotate(90deg) scale(1.1);
-        box-shadow: 0 0 10px #fff
-    }
-
-    50% {
-        -webkit-transform: rotate(180deg) scale(1.1);
-        box-shadow: 0 0 2px #ffffff00
-    }
-
-    75% {
-        -webkit-transform: rotate(270deg) scale(1.1);
-        box-shadow: 0 0 10px #fff
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg) scale(1.1);
-        box-shadow: 0 0 2px #ffffff00
-    }
-}
-
 #nav-music .aplayer.aplayer-withlrc .aplayer-info {
     height: 100%;
     color: var(--sco-fontcolor);
@@ -5789,20 +5163,6 @@ html {
     animation-play-state: running
 }
 
-@-webkit-keyframes lightBar {
-    0% {
-        opacity: .1
-    }
-
-    60% {
-        opacity: .3
-    }
-
-    100% {
-        opacity: .1
-    }
-}
-
 #nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
     width: 0;
     opacity: 0;
@@ -5896,16 +5256,6 @@ i.fab {
     pointer-events: none
 }
 
-@keyframes snackbar-progress {
-    from {
-        width: 0
-    }
-
-    to {
-        width: 100%
-    }
-}
-
 #nav a {
     transition: .3s
 }
@@ -6810,16 +6160,6 @@ a.console_switchbutton {
     fill: var(--sco-background)
 }
 
-@keyframes move-forever {
-    0% {
-        transform: translate3d(-90px, 0, 0)
-    }
-
-    100% {
-        transform: translate3d(85px, 0, 0)
-    }
-}
-
 @media (max-width: 768px) {
     .main-hero-waves-area {
         display: none
@@ -7822,16 +7162,6 @@ div#banners {
     }
 }
 
-@keyframes rowup {
-    from {
-        transform: translateX(0)
-    }
-
-    to {
-        transform: translateX(-50%)
-    }
-}
-
 .tags-group-icon {
     width: 120px;
     height: 120px;
@@ -9226,20 +8556,6 @@ div#author-info__sayhi:hover {
     animation: gradient 15s ease infinite
 }
 
-@keyframes gradient {
-    0% {
-        background-position: 0 50%
-    }
-
-    50% {
-        background-position: 100% 50%
-    }
-
-    100% {
-        background-position: 0 50%
-    }
-}
-
 @media screen and (max-width: 1300px) {
     #aside-content > .card-widget:first-child {
         min-height: 329px
@@ -11769,30 +11085,6 @@ img.tk-avatar-img {
     animation: commonTriangleIn .3s
 }
 
-@keyframes commonTipsIn {
-    0% {
-        top: -50px;
-        opacity: 0
-    }
-
-    100% {
-        top: -60px;
-        opacity: 1
-    }
-}
-
-@keyframes commonTriangleIn {
-    0% {
-        transform: translate(-50%, -36px);
-        opacity: 0
-    }
-
-    100% {
-        transform: translate(-50%, -46px);
-        opacity: 1
-    }
-}
-
 .el-input.el-input--small.el-input-group.el-input-group--prepend::before {
     display: none;
     position: absolute;
@@ -12093,18 +11385,6 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     pointer-events: none
 }
 
-@keyframes owoIn {
-    0% {
-        transform: translate(0, -95%);
-        opacity: 0
-    }
-
-    100% {
-        transform: translate(0, -105%);
-        opacity: 1
-    }
-}
-
 @media screen and (max-width: 768px) {
     .OwO .OwO-body {
         width: 300px
@@ -13153,24 +12433,6 @@ figure.gallery-group:hover .gallery-group-name::after {
     animation: light_tag 4s both infinite
 }
 
-@keyframes light_tag {
-    0% {
-        transform: skewx(0);
-        -o-transform: skewx(0);
-        -moz-transform: skewx(0);
-        -webkit-transform: skewx(0);
-        left: -150px
-    }
-
-    99% {
-        transform: skewx(-25deg);
-        -o-transform: skewx(-25deg);
-        -moz-transform: skewx(-25deg);
-        -webkit-transform: skewx(-25deg);
-        left: 50px
-    }
-}
-
 .site-card-tag.speed {
     background: var(--sco-green);
     box-shadow: var(--sco-shadow-green)
@@ -14345,20 +13607,6 @@ span.hexo-douban-pagenum {
     align-items: center
 }
 
-@keyframes floating {
-    0% {
-        transform: translate(0, -4px)
-    }
-
-    50% {
-        transform: translate(0, 4px)
-    }
-
-    100% {
-        transform: translate(0, -4px)
-    }
-}
-
 #about-page .author-info {
     display: flex;
     align-items: center;
diff --git a/source/css/search/algolia-search.css b/source/css/search/algolia-search.css
deleted file mode 100755
index 1ec4c161..00000000
--- a/source/css/search/algolia-search.css
+++ /dev/null
@@ -1,141 +0,0 @@
-/* 搜索 */
-.search-dialog {
-    position: fixed;
-    top: 5rem;
-    left: 50%;
-    z-index: 1001;
-    display: none;
-    margin-left: -15rem;
-    padding: 1rem;
-    width: 30rem;
-    box-shadow: var(--sco-shadow-lightblack);
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    transition: 0.3s;
-    border-radius: 12px;
-}
-
-@media screen and (max-width: 768px) {
-    .search-dialog {
-        top: 0px;
-        left: 0px;
-        margin: 0px;
-        width: 100%;
-        height: 100%;
-    }
-
-    #search-results {
-        max-height: 80vh !important;
-    }
-}
-
-.search-dialog .search-close-button {
-    color: rgb(133, 133, 133);
-    font-size: 1.2em;
-    line-height: 1;
-    cursor: pointer;
-    transition: color 0.2s ease-in-out 0s;
-}
-
-.search-dialog .search-close-button:hover {
-    color: rgb(48, 122, 246);
-}
-
-#search-mask {
-    position: fixed;
-    inset: 0px;
-    z-index: 1000;
-    display: none;
-    background: rgba(0, 0, 0, 0.6);
-}
-
-/* 搜索背景模糊 */
-#search-mask {
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    transform: translateZ(0);
-    background: var(--sco-maskbgdeep);
-}
-
-.search-nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 0.2rem 0.7rem 0.2rem;
-}
-
-.search-dialog-title {
-    font-weight: bold;
-    color: var(--sco-main);
-    font-size: 1.4em;
-    line-height: 1;
-}
-
-/* 搜索框间距 */
-.search-dialog .search-box {
-    padding-top: 8px;
-    max-width: 100%;
-}
-
-.search-dialog .search-box input {
-    height: 100%;
-    width: 100%;
-    padding: 0.25rem 0.7rem;
-    outline: 0px;
-    border: var(--style-border);
-    border-radius: 8px;
-    background: var(--sco-secondbg);
-    color: var(--sco-fontcolor);
-}
-
-.search-dialog .search-box input:focus {
-    border: var(--style-border-hover);
-}
-
-.search-box input::placeholder {
-    color: var(--sco-gray);
-}
-
-#algolia-search #search-results{
-    padding: 8px;
-    max-height: calc(80vh - 130px);
-    overflow-y: auto;
-}
-
-#algolia-search .ais-Hits-list{
-    padding: 0;
-}
-
-#algolia-search .ais-Hits-item{
-    margin: 10px 0;
-}
-
-#algolia-search .algolia-hit-item-content{
-    margin: 0;
-}
-
-#algolia-search .algolia-hit-item-link {
-    width: auto;
-    max-width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-weight: bold;
-}
-
-#algolia-search mark{
-    color: var(--sco-theme);
-    font-style: normal;
-    background: var(--sco-card-bg);
-}
-
-#algolia-search .ais-Hits--empty{
-    text-align: center;
-    font-weight: 600;
-}
-
-#algolia-search .algolia-stats {
-    color: var(--sco-gray);
-    font-size: .8rem;
-    font-weight: bold;
-}
diff --git a/source/css/search/local-search.css b/source/css/search/local-search.css
deleted file mode 100755
index eaa15481..00000000
--- a/source/css/search/local-search.css
+++ /dev/null
@@ -1,138 +0,0 @@
-/* 搜索 */
-.search-dialog {
-    position: fixed;
-    top: 5rem;
-    left: 50%;
-    z-index: 1001;
-    display: none;
-    margin-left: -15rem;
-    padding: 1rem;
-    width: 30rem;
-    box-shadow: var(--sco-shadow-lightblack);
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    transition: 0.3s;
-    border-radius: 12px;
-}
-
-@media screen and (max-width: 768px) {
-    .search-dialog {
-        top: 0px;
-        left: 0px;
-        margin: 0px;
-        width: 100%;
-        height: 100%;
-    }
-
-    #search-results {
-        max-height: 80vh !important;
-    }
-}
-
-.search-dialog .search-close-button {
-    color: rgb(133, 133, 133);
-    font-size: 1.2em;
-    line-height: 1;
-    cursor: pointer;
-    transition: color 0.2s ease-in-out 0s;
-}
-
-.search-dialog .search-close-button:hover {
-    color: rgb(48, 122, 246);
-}
-
-#search-mask {
-    position: fixed;
-    inset: 0px;
-    z-index: 1000;
-    display: none;
-    background: rgba(0, 0, 0, 0.6);
-}
-
-/* 搜索背景模糊 */
-#search-mask {
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    transform: translateZ(0);
-    background: var(--sco-maskbgdeep);
-}
-
-.search-wrap {
-    display: none;
-}
-
-#loading-database,
-#loading-status {
-    text-align: center;
-    padding-top: 10px;
-}
-
-.search-nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 0.2rem 0.7rem 0.2rem;
-}
-
-.search-dialog-title {
-    font-weight: bold;
-    color: var(--sco-main);
-    font-size: 1.4em;
-    line-height: 1;
-}
-
-/* 搜索框间距 */
-.search-dialog .search-box {
-    padding-top: 8px;
-    max-width: 100%;
-}
-
-.search-dialog .search-box input {
-    height: 100%;
-    width: 100%;
-    padding: 0.25rem 0.7rem;
-    outline: 0px;
-    border: var(--style-border);
-    border-radius: 8px;
-    background: var(--sco-secondbg);
-    color: var(--sco-fontcolor);;
-}
-
-.search-dialog .search-box input:focus {
-    border: var(--style-border-hover);
-}
-
-#search-results {
-    max-height: calc(80vh - 130px);
-    overflow-y: auto;
-}
-
-#search-results .search__hit-item {
-    font-weight: bold;
-    margin: 10px 0;
-}
-
-#search-results .search-result {
-    margin: 0;
-    font-weight: 500;
-}
-
-#search-results .search-keyword {
-    color: var(--sco-theme);
-    font-style: normal;
-}
-
-#search__hits-empty {
-    text-align: center;
-    font-weight: 600;
-}
-
-.search__hits-count {
-    color: var(--sco-gray);
-    font-size: .8rem;
-    font-weight: bold;
-}
-
-.search-box input::placeholder {
-    color: var(--sco-gray);
-}
\ No newline at end of file
diff --git a/source/css/var.css b/source/css/var.css
deleted file mode 100755
index be1107e2..00000000
--- a/source/css/var.css
+++ /dev/null
@@ -1,189 +0,0 @@
-@charset "UTF-8";
-
-:root {
-    --sco-white: #fff;
-    --sco-white-op: rgba(255, 255, 255, 0.2);
-    --sco-black: #000;
-    --sco-black-op: rgba(0, 0, 0, 0.2);
-    --sco-none: #00000000;
-    --sco-gray: #999999;
-    --sco-gray-op: #9999992b;
-    --sco-vip: #e5a80d;
-    --sco-main: var(--sco-theme);
-    --sco-main-op: var(--sco-theme-op);
-    --sco-main-op-deep: var(--sco-theme-op-deep);
-    --sco-main-op-light: var(--sco-theme-op-light);
-    --sco-main-none: var(--sco-theme-none);
-    --sco-shadow-theme: 0 8px 12px -3px var(--sco-theme-op);
-    --sco-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, .15);
-    --sco-shadow-main: 0 8px 12px -3px var(--sco-main-op);
-    --sco-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, .20);
-    --sco-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, .20);
-    --sco-shadow-black: 0 0 12px 4px rgba(0, 0, 0, .05);
-    --sco-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, .12);
-    --sco-shadow-red: 0 8px 12px -3px #ee7d7936;
-    --sco-shadow-green: 0 8px 12px -3px #87ee7936;
-    --sco-logo-color: linear-gradient(215deg, #4584ff 0%, #cf0db9 100%);
-    --sco-snackbar-time: 5s;
-
-    --global-font-size: 14px;
-
-
-    --global-bg: #fff;
-    --hr-border: #97bcfb;
-    --hr-before-color: #6ea2f9;
-    --search-bg: #f6f8fa;
-    --search-input-color: #4c4948;
-    --search-result-title: #4c4948;
-    --preloader-bg: #37474f;
-    --preloader-color: #fff;
-    --tab-border-color: #f0f0f0;
-    --tab-botton-bg: #f0f0f0;
-    --tab-botton-color: #1f2d3d;
-    --tab-button-hover-bg: #dcdcdc;
-    --tab-button-active-bg: #fff;
-    --sidebar-bg: #f6f8fa;
-    --btn-hover-color: #ff7242;
-    --btn-color: #fff;
-    --btn-bg: #307af6;
-    --text-bg-hover: #307af6;
-    --light-grey: #eee;
-    --text-highlight-color: #1f2d3d;
-    --blockquote-color: #6a737d;
-    --blockquote-bg: rgba(73, 177, 245, 0.1);
-    --reward-pop: #f5f5f5;
-    --toc-link-color: #666261;
-    --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.06);
-    --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.15);
-
-    --offset: 0px;
-
-    /* highlight */
-    --hl-color: #eff;
-    --hl-bg: #212121;
-    --hltools-bg: #1c1c1c;
-    --hltools-color: rgba(238, 255, 255, 0.8);
-    --hlnumber-bg: #212121;
-    --hlnumber-color: rgba(238, 255, 255, 0.5);
-    --hlscrollbar-bg: #121212;
-    --hlexpand-bg: linear-gradient(180deg, rgba(33, 33, 33, 0.6), rgba(33, 33, 33, 0.9));
-
-    /*  ai  */
-    --ai-post-bg:rgba(255,255,255,0.32);
-    --ai-border:1px solid #e3e8f7bd;
-    --ai-tag-bg:rgba(48, 52, 63, 0.86);
-    --ai-cursor:#333;
-
-    /* 相册变量定义 */
-    --album-background-dark: #2d3548;
-    --album-text-light: rgba(255, 255, 255, 0.6);
-    --album-text-lighter: rgba(255, 255, 255, 0.9);
-    --album-spacing-s: 8px;
-    --album-spacing-m: 16px;
-    --album-spacing-l: 24px;
-    --album-spacing-xl: 32px;
-    --album-spacing-xxl: 64px;
-
-    /* 个性定位 */
-    --icat-card-welcome: #49B1F5
-}
-
-::selection {
-    background: var(--sco-fontcolor);
-    color: var(--sco-background)
-}
-
-[data-theme=light] {
-    --sco-theme: #bdbdf0;
-    --sco-theme-op: #4259ef23;
-    --sco-theme-op-deep: #eccec5;
-    --sco-theme-op-light: #4259ef0d;
-    --sco-theme-none: #4259ef01;
-    --sco-blue: #425AEF;
-    --sco-red: #f04a63;
-    --sco-pink: #FF7C7C;
-    --sco-green: #57bd6a;
-    --sco-yellow: #c28b00;
-    --sco-yellow-op: #d99c001a;
-    --sco-orange: #e38100;
-    --sco-purple: #7a60d2;
-    --sco-fontcolor: #363636;
-    --sco-background: #f7f9fe;
-    --sco-reverse: #000;
-    --sco-maskbg: rgba(255, 255, 255, 0.6);
-    --sco-maskbgdeep: rgba(255, 255, 255, 0.85);
-    --sco-hovertext: var(--sco-main);
-    --sco-ahoverbg: #F7F7FA;
-    --sco-lighttext: var(--sco-main);
-    --sco-secondtext: rgba(60, 60, 67, 0.8);
-    --sco-scrollbar: rgba(60, 60, 67, 0.4);
-    --sco-card-btn-bg: #edf0f7;
-    --sco-post-blockquote-bg: #fafcff;
-    --sco-post-tabs-bg: #f2f5f8;
-    --sco-secondbg: #f7f7f9;
-    --sco-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
-    --sco-card-bg: #fff;
-    --sco-card-bg-op: var(--sco-black-op);
-    --sco-card-bg-none: rgba(255, 255, 255, 0);
-    --sco-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
-    --sco-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
-    --sco-card-border: #e3e8f7;
-    --sco-shadow-border: 0 8px 16px -4px #2c2d300c;
-    --style-border: 1px solid var(--sco-card-border);
-    --style-border-always: 1px solid var(--sco-card-border);
-    --style-border-hover: 1px solid var(--sco-main);
-    --style-border-hover-always: 1px solid var(--sco-main);
-    --style-border-dashed: 1px dashed var(--sco-theme-op);
-    --style-border-forever: 2px solid var(--sco-main);
-    --sco-navbg: var(--sco-theme-op);
-}
-
-[data-theme=dark] {
-    --sco-theme: #f2b94b;
-    --sco-theme-op: #f2b94b23;
-    --sco-theme-op-deep: #f2b94bdd;
-    --sco-theme-none: #f2b94b00;
-    --sco-blue: #0084FF;
-    --sco-red: #FF3842;
-    --sco-pink: #d44040;
-    --sco-green: #3e9f50;
-    --sco-purple: #7a60d2;
-    --sco-yellow: #ffc93e;
-    --sco-yellow-op: #ffc93e30;
-    --sco-orange: #ff953e;
-    --sco-fontcolor: #F7F7FA;
-    --sco-background: #18171d;
-    --sco-reverse: #fff;
-    --sco-maskbg: rgba(0, 0, 0, 0.6);
-    --sco-maskbgdeep: rgba(0, 0, 0, 0.85);
-    --sco-hovertext: #0A84FF;
-    --sco-ahoverbg: #fff;
-    --sco-lighttext: var(--sco-theme);
-    --sco-secondtext: #a1a2b8;
-    --sco-scrollbar: rgba(200, 200, 223, 0.4);
-    --sco-card-btn-bg: #30343f;
-    --sco-post-blockquote-bg: #000;
-    --sco-post-tabs-bg: #121212;
-    --sco-secondbg: #30343f;
-    --sco-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
-    --sco-card-bg: #1b1c20;
-    --sco-card-bg-op: var(--sco-white-op);
-    --sco-card-bg-none: #1d1b2600;
-    --sco-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
-    --sco-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
-    --sco-card-border: #3d3d3f;
-    --sco-shadow-border: 0 8px 16px -4px #00000050;
-    --style-border: 1px solid var(--sco-card-border);
-    --style-border-always: 1px solid var(--sco-card-border);
-    --style-border-hover: 1px solid var(--sco-theme);
-    --style-border-hover-always: 1px solid var(--sco-theme);
-    --style-border-dashed: 1px dashed var(--sco-theme-op);
-    --style-border-forever: 2px solid var(--sco-lighttext)
-}
-
-@media screen and (max-width: 768px) {
-    :root {
-        --style-border: 0px solid var(--sco-card-border);
-        --style-border-hover: 0px solid var(--sco-main)
-    }
-}
\ No newline at end of file

From 7de39ea5ebd02f74b1f63c63b735767288dedbc3 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sun, 12 Nov 2023 14:03:03 +0800
Subject: [PATCH 02/43] =?UTF-8?q?=E5=AE=8C=E5=96=84Note=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/css/custom.css | 833 +++++++++++++++++++-----------------------
 source/css/main.css   | 376 +------------------
 2 files changed, 381 insertions(+), 828 deletions(-)

diff --git a/source/css/custom.css b/source/css/custom.css
index 37bb5f68..56417882 100755
--- a/source/css/custom.css
+++ b/source/css/custom.css
@@ -1,5 +1,5 @@
 @media screen and (min-width: 900px) {
-    #page-header #nav a:hover .heoicon {
+    #page-header #nav a:hover .scoicon {
         transition: .3s;
         opacity: 0;
     }
@@ -31,26 +31,6 @@
     border-radius: 0;
 }
 
-/* 侧公众号卡片 */
-#flip-wrapper .left {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    line-height: 1.3;
-    color: white;
-}
-
-#flip-wrapper .left .title {
-    font-size: 1.35rem;
-    font-weight: 700;
-}
-
-#flip-wrapper .left .desc {
-    font-size: small;
-    font-weight: 600;
-}
-
 #article-container .highlight-tools {
     position: relative;
     display: flex;
@@ -255,442 +235,10 @@
     opacity: .8
 }
 
-/* 配置相册界面album的CSS */
-/* 相册顶部那一坨 */
-.author-content.author-content-item.album {
-    height: 19rem;
-    color: var(--sco-white);
-    overflow: hidden;
-    margin-top: 0;
-}
-
-/* 移动端那一坨 */
-@media screen and (max-width: 768px) {
-    .author-content.author-content-item.album {
-        height: 9rem;
-    }
-}
-
-#album .card-album {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    margin: var(--album-spacing-xxl) 0 0;
-}
-
-#album .card-album .album-content-nocover {
-    width: calc(100% / 4 - 40px);
-}
-
-#album .card-album .card {
-    list-style: none;
-    position: relative;
-    display: flex;
-    width: calc(100% / 4 - 10px);
-    padding: 10px;
-}
-
-#album .card-album .card:hover {
-    cursor: pointer;
-}
-
-#album .card_cover {
-    border-radius: var(--album-spacing-l);
-    filter: brightness(0.75) saturate(1.2) contrast(0.85);
-    transform-origin: center;
-    transform: scale(1) translateZ(0);
-    transition: filter 200ms linear, transform 200ms linear;
-    max-width: 100%;
-    overflow: hidden;
-    height: 550px;
-    width: 100%;
-    max-width: 100%;
-    object-fit: cover;
-    border-radius: var(--album-spacing-l);
-}
-
-#album .card:hover .card_cover {
-    transform: scale(1.05) translateZ(0);
-    filter: brightness(0.9) saturate(1.2) contrast(1);
-}
-
-#album .card-album:hover > .card:not(:hover) .card_cover {
-    filter: brightness(0.5) saturate(0.9) contrast(1.2) blur(20px);
-}
-
-#album .card__content {
-    left: 0;
-    padding: var(--album-spacing-l);
-    position: absolute;
-    top: 0;
-}
-
-#album .card__category {
-    color: var(--album-text-light);
-    font-size: 0.9rem;
-    margin-bottom: var(--album-spacing-s);
-    text-transform: uppercase;
-}
-
-#album .card__heading {
-    color: var(--album-text-lighter);
-    font-size: 1.9rem;
-    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
-    line-height: 1.4;
-    word-spacing: 100vw;
-}
-
-@media (min-width: 1300px) {
-    #album img.card_cover {
-        height: 600px;
-    }
-}
-
-@media (max-width: 960px) {
-    #album .card-album .card {
-        width: calc(100% / 2 - 40px);
-    }
-}
-
-@media (max-width: 540px) {
-    #album .card-album .card {
-        width: calc(100%);
-    }
-}
-
-/* 配置相册界面album_detail的CSS */
-/* 处理页面样式 */
-#album_detail .album-container-img {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    width: 100%;
-    height: 100%;
-    flex-wrap: wrap;
-    margin-bottom: 0.3rem;
-}
-
-#album_detail .album-container-img .album-content-noimg {
-    width: calc(100% / 2 - 5px);
-}
-
-#album_detail .album-container-img img {
-    object-fit: cover;
-    max-width: 100%;
-    max-height: 150px;
-    border-radius: 12px;
-    margin: 0 10px 0 0;
-}
-
-#album_detail .album-container-img {
-    height: 100%;
-    border-radius: 12px;
-    overflow: hidden;
-    display: flex;
-    justify-content: flex-start;
-    position: relative;
-}
-
-#album_detail .album-content .datacont {
-    order: 0;
-    font-size: 0.8rem;
-    font-weight: 700;
-    color: var(--sco-fontcolor);
-    width: 100%;
-    line-height: 1.38;
-    border-radius: 12px;
-    margin-bottom: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    text-align: justify;
-}
-
-#album_detail p {
-    margin: 0;
-}
-
-#album_detail div.album-content {
-    display: flex;
-    flex-flow: wrap;
-    border-radius: 12px;
-    width: 100%;
-    height: 100%;
-}
-
-#album_detail .timeline ul li.album-item {
-    position: relative;
-    width: 32%;
-    border: var(--style-border-always);
-    border-radius: 12px;
-    padding: 1rem 1rem 0.5rem;
-    transition: all 0.3s ease 0s;
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: start;
-    align-items: flex-start;
-    background: var(--sco-card-bg);
-    box-shadow: var(--sco-shadow-border);
-    margin-right: 2%;
-}
-
-#album_detail .timeline #waterfall.show {
-    opacity: 1;
-}
-
-#album_detail .timeline #waterfall {
-    opacity: 0;
-    transition: all 0.3s ease 0s;
-}
-
-#album_detail ul.list {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-}
-
-#album_detail {
-    margin-top: 1rem;
-    width: 100%;
-}
-
-#album_detail > section > ul > li.album-item {
-    margin-bottom: 1rem;
-}
-
-#album-tips {
-    font-size: 14px;
-    display: flex;
-    justify-content: center;
-    margin-top: 1rem;
-}
-
-#album_detail .timeline ul li.album-item hr {
-    display: flex;
-    position: relative;
-    margin: 8px 0px;
-    border: 1px dashed var(--sco-theme-op);
-    width: 100%;
-}
-
-#album_detail .album-info {
-    display: flex;
-    align-items: center;
-}
-
-#album_detail > section > ul > li > div .album-info-time,
-#album_detail > section > ul > li > div .album-info-address,
-#album_detail > section > ul > li > div .album-info-from {
-    color: var(--sco-fontcolor);
-    font-size: 0.7rem;
-    background-color: var(--sco-gray-op);
-    padding: 0 8px;
-    border-radius: 20px;
-    cursor: default;
-    display: flex;
-    align-items: center;
-}
-
-#album_detail > section > ul > li > div .album-info-address,
-#album_detail > section > ul > li > div .album-info-from {
-    margin-left: 4px;
-}
-
-#album_detail > section > ul > li > div .album-info-address span,
-#album_detail > section > ul > li > div .album-info-from span {
-    margin-left: 4px;
-}
-
-#album_detail .album-info .fa-brands.fa-instagram {
-    margin-right: 8px;
-}
-
-#album_detail .album-bottom {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    margin-top: 10px;
-}
-
-#album_detail .album-bottom .album-reply {
-    cursor: pointer;
-}
-
-#album_detail .timeline ul li.album-item:hover {
-    border: var(--style-border-hover);
-}
-
-#album_detail .album-content-link {
-    display: flex;
-    margin-left: 0.5rem;
-    font-size: 0.7rem;
-    align-items: center;
-    background-color: rgba(245, 108, 108, 0.13);
-    color: rgb(245, 108, 108);
-    padding: 0 8px;
-    border-radius: 20px;
-}
-
-#album_detail .album-content-link i {
-    margin-right: 3px;
-}
-
-#album_detail .album-content-link:hover {
-    background-color: var(--sco-main);
-    color: var(--sco-white);
-}
-
-body[data-type="album_detail"] #page .author-content-item .card-content .banner-button-group .banner-button:hover {
-    color: var(--sco-white);
-    border-radius: 20px !important;
-}
-
-/* 响应式 */
-@media screen and (max-width: 1300px) {
-    #album_detail .timeline ul li.album-item {
-        width: 49%;
-        margin-right: 1%;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    #album_detail .timeline ul li.album-item {
-        width: 100%;
-        margin-right: 0;
-    }
-}
-
-/* 我的装备 */
-.equipment-item-content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -8px;
-}
-
-.equipment-item-content-item {
-    width: calc(25% - 12px);
-    border-radius: 12px;
-    border: var(--style-border-always);
-    overflow: hidden;
-    margin: 8px 6px;
-    background: var(--sco-card-bg);
-    box-shadow: var(--sco-shadow-border);
-    min-height: 400px;
-    position: relative;
-}
-
-@media screen and (max-width: 1200px) {
-    .equipment-item-content-item {
-        width: calc(50% - 12px);
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .equipment-item-content-item {
-        width: 100%;
-    }
-}
-
-.equipment-item-content-item-info {
-    padding: 8px 16px 16px 16px;
-    margin-top: 12px;
-}
-
-.equipment-item-content-item-name {
-    font-size: 18px;
-    font-weight: bold;
-    line-height: 1;
-    margin-bottom: 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: fit-content;
-}
-
-.equipment-item-content-item-specification {
-    font-size: 12px;
-    color: var(--sco-secondtext);
-    line-height: 1;
-    margin-bottom: 12px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.equipment-item-content-item-description {
-    line-height: 20px;
-    color: var(--sco-secondtext);
-    height: 60px;
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    font-size: 14px;
-}
-
-a.equipment-item-content-item-link {
-    font-size: 12px;
-    background: var(--sco-gray-op);
-    padding: 4px 8px;
-    border-radius: 8px;
-    cursor: pointer;
-}
-
-a.equipment-item-content-item-link:hover {
-    background: var(--sco-main);
-    color: var(--sco-white);
-}
-
-h2.equipment-item-title {
-    line-height: 1;
-}
-
-.equipment-item-description {
-    line-height: 1;
-    margin: 4px 0 8px 0;
-    color: var(--sco-secondtext);
-}
-
-.equipment-item-content-item-cover {
-    width: 100%;
-    height: 200px;
-    background: var(--sco-secondbg);
-    display: flex;
-    justify-content: center;
-}
-
-img.equipment-item-content-item-image {
-    object-fit: cover;
-    height: 100%;
-}
-
-div#equipment {
-    margin-top: 26px;
-}
-
-.equipment-item-content-item-toolbar {
-    display: flex;
-    justify-content: space-between;
-    position: absolute;
-    bottom: 12px;
-    left: 0;
-    width: 100%;
-    padding: 0 16px;
-}
-
 a.bber-reply {
     cursor: pointer;
 }
 
-/*
-* twikoo
-*/
-
-.tk-footer {
-    display: none;
-}
-
 
 /* TAG Link */
 
@@ -892,10 +440,389 @@ div.timenode:hover .meta:after {
     transform: scale(1);
 }
 
+
 /*
  * home list
 */
 .recent-post-item .recent-post-info .recent-post-info-top #post-list-tips {
     font-size: 15px;
     color: #555535;
+}
+
+/**
+  * Note
+ */
+
+.note {
+    position: relative;
+    margin: 0 0 1rem;
+    padding: 15px;
+    border-radius: 3px
+}
+
+.note.icon {
+    padding-left: 2.25rem
+}
+
+.note > .note-icon {
+    position: absolute;
+    top: calc(50% - .4rem);
+    left: .7rem;
+    font-size: larger
+}
+
+.note.blue:not(.disabled) {
+    border-left-color: #428bca !important
+}
+
+.note.blue:not(.disabled).modern {
+    color: #428bca;
+    border-left-color: transparent !important
+}
+
+.note.blue:not(.disabled):not(.simple) {
+    background: #e3eef7 !important
+}
+
+.note.blue > .note-icon {
+    color: #428bca
+}
+
+.note.pink:not(.disabled) {
+    border-left-color: #ff69b4 !important
+}
+
+.note.pink:not(.disabled).modern {
+    color: #ff69b4;
+    border-left-color: transparent !important
+}
+
+.note.pink:not(.disabled):not(.simple) {
+    background: #ffe9f4 !important
+}
+
+.note.pink > .note-icon {
+    color: #ff69b4
+}
+
+.note.red:not(.disabled) {
+    border-left-color: red !important
+}
+
+.note.red:not(.disabled).modern {
+    color: red;
+    border-left-color: transparent !important
+}
+
+.note.red:not(.disabled):not(.simple) {
+    background: #ffd9d9 !important
+}
+
+.note.red > .note-icon {
+    color: red
+}
+
+.note.purple:not(.disabled) {
+    border-left-color: #6f42c1 !important
+}
+
+.note.purple:not(.disabled).modern {
+    color: #6f42c1;
+    border-left-color: transparent !important
+}
+
+.note.purple:not(.disabled):not(.simple) {
+    background: #e9e3f6 !important
+}
+
+.note.purple > .note-icon {
+    color: #6f42c1
+}
+
+.note.orange:not(.disabled) {
+    border-left-color: #ff8c00 !important
+}
+
+.note.orange:not(.disabled).modern {
+    color: #ff8c00;
+    border-left-color: transparent !important
+}
+
+.note.orange:not(.disabled):not(.simple) {
+    background: #ffeed9 !important
+}
+
+.note.orange > .note-icon {
+    color: #ff8c00
+}
+
+.note.green:not(.disabled) {
+    border-left-color: #5cb85c !important
+}
+
+.note.green:not(.disabled).modern {
+    color: #5cb85c;
+    border-left-color: transparent !important
+}
+
+.note.green:not(.disabled):not(.simple) {
+    background: #e7f4e7 !important
+}
+
+.note.green > .note-icon {
+    color: #5cb85c
+}
+
+.note.simple {
+    border-width: 1px 1px 1px 5px;
+    border-style: solid;
+    border-color: #eee;
+    border-image: initial
+}
+
+.note.modern {
+    background-color: #f5f5f5;
+    color: #4c4948;
+    border: 1px solid transparent !important
+}
+
+.note.flat {
+    border-top: initial;
+    border-right: initial;
+    border-bottom: initial;
+    border-image: initial;
+    border-left: 5px solid #eee;
+    background-color: #f9f9f9;
+    color: #4c4948
+}
+
+.note h2, .note h3, .note h4, .note h5, .note h6 {
+    margin-top: 3px;
+    margin-bottom: 0;
+    border-bottom: initial;
+    padding-top: 0 !important
+}
+
+.note blockquote:first-child, .note img:first-child, .note ol:first-child, .note p:first-child, .note pre:first-child, .note table:first-child, .note ul:first-child {
+    margin-top: 0 !important
+}
+
+.note blockquote:last-child, .note img:last-child, .note ol:last-child, .note p:last-child, .note pre:last-child, .note table:last-child, .note ul:last-child {
+    margin-bottom: 0 !important;
+    font-size: 14px !important
+}
+
+.note:not(.no-icon) {
+    padding-left: 2.25rem
+}
+
+.note:not(.no-icon)::before {
+    position: absolute;
+    top: calc(50% - 19px);
+    left: .7rem;
+    font-size: larger
+}
+
+.note.default.flat {
+    background: #f7f7f7
+}
+
+.note.default.modern {
+    border-color: #e1e1e1;
+    background: #f3f3f3;
+    color: #666
+}
+
+.note.default.modern a:not(.btn) {
+    color: #666
+}
+
+.note.default.modern a:not(.btn):hover {
+    color: #454545
+}
+
+.note.default:not(.modern) {
+    border-left-color: #777
+}
+
+.note.default:not(.modern) h2, .note.default:not(.modern) h3, .note.default:not(.modern) h4, .note.default:not(.modern) h5, .note.default:not(.modern) h6 {
+    color: #777
+}
+
+.note.default:not(.no-icon)::before {
+    content: "\e0a9"
+}
+
+.note.default:not(.no-icon):not(.modern)::before {
+    color: #777
+}
+
+.note.primary.flat {
+    background: #f5f0fa
+}
+
+.note.primary.modern {
+    border-color: #e1c2ff;
+    background: #f3daff;
+    color: #6f42c1
+}
+
+.note.primary.modern a:not(.btn) {
+    color: #6f42c1
+}
+
+.note.primary.modern a:not(.btn):hover {
+    color: #453298
+}
+
+.note.primary:not(.modern) {
+    border-left-color: #6f42c1
+}
+
+.note.primary:not(.modern) h2, .note.primary:not(.modern) h3, .note.primary:not(.modern) h4, .note.primary:not(.modern) h5, .note.primary:not(.modern) h6 {
+    color: #6f42c1
+}
+
+.note.primary:not(.no-icon)::before {
+    content: "\e0a8"
+}
+
+.note.primary:not(.no-icon):not(.modern)::before {
+    color: #6f42c1
+}
+
+.note.info.flat {
+    background: #eef7fa
+}
+
+.note.info.modern {
+    border-color: #b3e5ef;
+    background: #d9edf7;
+    color: #31708f
+}
+
+.note.info.modern a:not(.btn) {
+    color: #31708f
+}
+
+.note.info.modern a:not(.btn):hover {
+    color: #215761
+}
+
+.note.info:not(.modern) {
+    border-left-color: #428bca
+}
+
+.note.info:not(.modern) h2, .note.info:not(.modern) h3, .note.info:not(.modern) h4, .note.info:not(.modern) h5, .note.info:not(.modern) h6 {
+    color: #428bca
+}
+
+.note.info:not(.no-icon)::before {
+    content: "\e0a7"
+}
+
+.note.info:not(.no-icon):not(.modern)::before {
+    color: #428bca
+}
+
+.note.success.flat {
+    background: #eff8f0
+}
+
+.note.success.modern {
+    border-color: #d0e6be;
+    background: #dff0d8;
+    color: #3c763d
+}
+
+.note.success.modern a:not(.btn) {
+    color: #3c763d
+}
+
+.note.success.modern a:not(.btn):hover {
+    color: #32562c
+}
+
+.note.success:not(.modern) {
+    border-left-color: #5cb85c
+}
+
+.note.success:not(.modern) h2, .note.success:not(.modern) h3, .note.success:not(.modern) h4, .note.success:not(.modern) h5, .note.success:not(.modern) h6 {
+    color: #5cb85c
+}
+
+.note.success:not(.no-icon)::before {
+    content: "\e0a4"
+}
+
+.note.success:not(.no-icon):not(.modern)::before {
+    color: #5cb85c
+}
+
+.note.warning.flat {
+    background: #fdf8ea
+}
+
+.note.warning.modern {
+    border-color: #fae4cd;
+    background: #fcf4e3;
+    color: #8a6d3b
+}
+
+.note.warning.modern a:not(.btn) {
+    color: #8a6d3b
+}
+
+.note.warning.modern a:not(.btn):hover {
+    color: #714f30
+}
+
+.note.warning:not(.modern) {
+    border-left-color: var(--sco-orange)
+}
+
+.note.warning:not(.modern) h2, .note.warning:not(.modern) h3, .note.warning:not(.modern) h4, .note.warning:not(.modern) h5, .note.warning:not(.modern) h6 {
+    color: var(--sco-orange)
+}
+
+.note.warning:not(.no-icon)::before {
+    content: "\e0a5"
+}
+
+.note.warning:not(.no-icon):not(.modern)::before {
+    color: var(--sco-orange)
+}
+
+.note.danger.flat {
+    background: #fcf1f2
+}
+
+.note.danger.modern {
+    border-color: #ebcdd2;
+    background: #f2dfdf;
+    color: #a94442
+}
+
+.note.danger.modern a:not(.btn) {
+    color: #a94442
+}
+
+.note.danger.modern a:not(.btn):hover {
+    color: #84333f
+}
+
+.note.danger:not(.modern) {
+    border-left-color: #d9534f
+}
+
+.note.danger:not(.modern) h2, .note.danger:not(.modern) h3, .note.danger:not(.modern) h4, .note.danger:not(.modern) h5, .note.danger:not(.modern) h6 {
+    color: #d9534f
+}
+
+.note.danger:not(.no-icon)::before {
+    content: "\e0aa"
+}
+
+.note.danger:not(.no-icon):not(.modern)::before {
+    color: #d9534f
 }
\ No newline at end of file
diff --git a/source/css/main.css b/source/css/main.css
index a4d9df12..92e7c67d 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -3592,380 +3592,6 @@ blockquote.pullquote.right {
     background-color: #5cb85c
 }
 
-.note {
-    position: relative;
-    margin: 0 0 1rem;
-    padding: 15px;
-    border-radius: 3px
-}
-
-.note.icon {
-    padding-left: 2.25rem
-}
-
-.note > .note-icon {
-    position: absolute;
-    top: calc(50% - .4rem);
-    left: .7rem;
-    font-size: larger
-}
-
-.note.blue:not(.disabled) {
-    border-left-color: #428bca !important
-}
-
-.note.blue:not(.disabled).modern {
-    color: #428bca;
-    border-left-color: transparent !important
-}
-
-.note.blue:not(.disabled):not(.simple) {
-    background: #e3eef7 !important
-}
-
-.note.blue > .note-icon {
-    color: #428bca
-}
-
-.note.pink:not(.disabled) {
-    border-left-color: #ff69b4 !important
-}
-
-.note.pink:not(.disabled).modern {
-    color: #ff69b4;
-    border-left-color: transparent !important
-}
-
-.note.pink:not(.disabled):not(.simple) {
-    background: #ffe9f4 !important
-}
-
-.note.pink > .note-icon {
-    color: #ff69b4
-}
-
-.note.red:not(.disabled) {
-    border-left-color: red !important
-}
-
-.note.red:not(.disabled).modern {
-    color: red;
-    border-left-color: transparent !important
-}
-
-.note.red:not(.disabled):not(.simple) {
-    background: #ffd9d9 !important
-}
-
-.note.red > .note-icon {
-    color: red
-}
-
-.note.purple:not(.disabled) {
-    border-left-color: #6f42c1 !important
-}
-
-.note.purple:not(.disabled).modern {
-    color: #6f42c1;
-    border-left-color: transparent !important
-}
-
-.note.purple:not(.disabled):not(.simple) {
-    background: #e9e3f6 !important
-}
-
-.note.purple > .note-icon {
-    color: #6f42c1
-}
-
-.note.orange:not(.disabled) {
-    border-left-color: #ff8c00 !important
-}
-
-.note.orange:not(.disabled).modern {
-    color: #ff8c00;
-    border-left-color: transparent !important
-}
-
-.note.orange:not(.disabled):not(.simple) {
-    background: #ffeed9 !important
-}
-
-.note.orange > .note-icon {
-    color: #ff8c00
-}
-
-.note.green:not(.disabled) {
-    border-left-color: #5cb85c !important
-}
-
-.note.green:not(.disabled).modern {
-    color: #5cb85c;
-    border-left-color: transparent !important
-}
-
-.note.green:not(.disabled):not(.simple) {
-    background: #e7f4e7 !important
-}
-
-.note.green > .note-icon {
-    color: #5cb85c
-}
-
-.note.simple {
-    border-width: 1px 1px 1px 5px;
-    border-style: solid;
-    border-color: #eee;
-    border-image: initial
-}
-
-.note.modern {
-    background-color: #f5f5f5;
-    color: #4c4948;
-    border: 1px solid transparent !important
-}
-
-.note.flat {
-    border-top: initial;
-    border-right: initial;
-    border-bottom: initial;
-    border-image: initial;
-    border-left: 5px solid #eee;
-    background-color: #f9f9f9;
-    color: #4c4948
-}
-
-.note h2, .note h3, .note h4, .note h5, .note h6 {
-    margin-top: 3px;
-    margin-bottom: 0;
-    border-bottom: initial;
-    padding-top: 0 !important
-}
-
-.note blockquote:first-child, .note img:first-child, .note ol:first-child, .note p:first-child, .note pre:first-child, .note table:first-child, .note ul:first-child {
-    margin-top: 0 !important
-}
-
-.note blockquote:last-child, .note img:last-child, .note ol:last-child, .note p:last-child, .note pre:last-child, .note table:last-child, .note ul:last-child {
-    margin-bottom: 0 !important;
-    font-size: 14px !important
-}
-
-.note:not(.no-icon) {
-    padding-left: 2.25rem
-}
-
-.note:not(.no-icon)::before {
-    position: absolute;
-    top: calc(50% - 19px);
-    left: .7rem;
-    font-size: larger
-}
-
-.note.default.flat {
-    background: #f7f7f7
-}
-
-.note.default.modern {
-    border-color: #e1e1e1;
-    background: #f3f3f3;
-    color: #666
-}
-
-.note.default.modern a:not(.btn) {
-    color: #666
-}
-
-.note.default.modern a:not(.btn):hover {
-    color: #454545
-}
-
-.note.default:not(.modern) {
-    border-left-color: #777
-}
-
-.note.default:not(.modern) h2, .note.default:not(.modern) h3, .note.default:not(.modern) h4, .note.default:not(.modern) h5, .note.default:not(.modern) h6 {
-    color: #777
-}
-
-.note.default:not(.no-icon)::before {
-    content: ""
-}
-
-.note.default:not(.no-icon):not(.modern)::before {
-    color: #777
-}
-
-.note.primary.flat {
-    background: #f5f0fa
-}
-
-.note.primary.modern {
-    border-color: #e1c2ff;
-    background: #f3daff;
-    color: #6f42c1
-}
-
-.note.primary.modern a:not(.btn) {
-    color: #6f42c1
-}
-
-.note.primary.modern a:not(.btn):hover {
-    color: #453298
-}
-
-.note.primary:not(.modern) {
-    border-left-color: #6f42c1
-}
-
-.note.primary:not(.modern) h2, .note.primary:not(.modern) h3, .note.primary:not(.modern) h4, .note.primary:not(.modern) h5, .note.primary:not(.modern) h6 {
-    color: #6f42c1
-}
-
-.note.primary:not(.no-icon)::before {
-    content: "\e060"
-}
-
-.note.primary:not(.no-icon):not(.modern)::before {
-    color: #6f42c1
-}
-
-.note.info.flat {
-    background: #eef7fa
-}
-
-.note.info.modern {
-    border-color: #b3e5ef;
-    background: #d9edf7;
-    color: #31708f
-}
-
-.note.info.modern a:not(.btn) {
-    color: #31708f
-}
-
-.note.info.modern a:not(.btn):hover {
-    color: #215761
-}
-
-.note.info:not(.modern) {
-    border-left-color: #428bca
-}
-
-.note.info:not(.modern) h2, .note.info:not(.modern) h3, .note.info:not(.modern) h4, .note.info:not(.modern) h5, .note.info:not(.modern) h6 {
-    color: #428bca
-}
-
-.note.info:not(.no-icon)::before {
-    content: ""
-}
-
-.note.info:not(.no-icon):not(.modern)::before {
-    color: #428bca
-}
-
-.note.success.flat {
-    background: #eff8f0
-}
-
-.note.success.modern {
-    border-color: #d0e6be;
-    background: #dff0d8;
-    color: #3c763d
-}
-
-.note.success.modern a:not(.btn) {
-    color: #3c763d
-}
-
-.note.success.modern a:not(.btn):hover {
-    color: #32562c
-}
-
-.note.success:not(.modern) {
-    border-left-color: #5cb85c
-}
-
-.note.success:not(.modern) h2, .note.success:not(.modern) h3, .note.success:not(.modern) h4, .note.success:not(.modern) h5, .note.success:not(.modern) h6 {
-    color: #5cb85c
-}
-
-.note.success:not(.no-icon)::before {
-    content: ""
-}
-
-.note.success:not(.no-icon):not(.modern)::before {
-    color: #5cb85c
-}
-
-.note.warning.flat {
-    background: #fdf8ea
-}
-
-.note.warning.modern {
-    border-color: #fae4cd;
-    background: #fcf4e3;
-    color: #8a6d3b
-}
-
-.note.warning.modern a:not(.btn) {
-    color: #8a6d3b
-}
-
-.note.warning.modern a:not(.btn):hover {
-    color: #714f30
-}
-
-.note.warning:not(.modern) {
-    border-left-color: var(--sco-orange)
-}
-
-.note.warning:not(.modern) h2, .note.warning:not(.modern) h3, .note.warning:not(.modern) h4, .note.warning:not(.modern) h5, .note.warning:not(.modern) h6 {
-    color: var(--sco-orange)
-}
-
-.note.warning:not(.no-icon)::before {
-    content: "\e067"
-}
-
-.note.warning:not(.no-icon):not(.modern)::before {
-    color: var(--sco-orange)
-}
-
-.note.danger.flat {
-    background: #fcf1f2
-}
-
-.note.danger.modern {
-    border-color: #ebcdd2;
-    background: #f2dfdf;
-    color: #a94442
-}
-
-.note.danger.modern a:not(.btn) {
-    color: #a94442
-}
-
-.note.danger.modern a:not(.btn):hover {
-    color: #84333f
-}
-
-.note.danger:not(.modern) {
-    border-left-color: #d9534f
-}
-
-.note.danger:not(.modern) h2, .note.danger:not(.modern) h3, .note.danger:not(.modern) h4, .note.danger:not(.modern) h5, .note.danger:not(.modern) h6 {
-    color: #d9534f
-}
-
-.note.danger:not(.no-icon)::before {
-    content: ""
-}
-
-.note.danger:not(.no-icon):not(.modern)::before {
-    color: #d9534f
-}
-
 #article-container .tabs {
     position: relative;
     margin: 0 0 1rem;
@@ -9863,7 +9489,7 @@ b, strong {
     color: var(--sco-yellow)
 }
 
-.note.warning:not(.modern) {
+.note.warning:class(.modern) {
     border-radius: 8px;
     border-width: 1px;
     border-color: var(--sco-yellow);

From 8ad6a9e8a98b1d159b666ec2e19bbcce7d63f61e Mon Sep 17 00:00:00 2001
From: yife68 <2714344056@qq.com>
Date: Sun, 12 Nov 2023 17:12:09 +0800
Subject: [PATCH 03/43] =?UTF-8?q?=E5=8D=B3=E5=88=BB=E7=9F=AD=E6=96=87stylu?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                      |   5 +
 source/css/_global/function.styl |   4 +
 source/css/_page/says.styl       | 327 ++++++++++++++++++++++++++
 source/css/custom.css            |   4 -
 source/css/index.styl            |   1 +
 source/css/main.css              | 388 -------------------------------
 6 files changed, 337 insertions(+), 392 deletions(-)
 create mode 100644 source/css/_page/says.styl

diff --git a/_config.yml b/_config.yml
index 36632412..db05fd87 100755
--- a/_config.yml
+++ b/_config.yml
@@ -426,6 +426,11 @@ pwa:
   favicon_1136_640: /img/pwa/siteicon/splash-1136x640.png
 
 
+says:
+  enable: true
+  style: 1 # 1：张洪heo样式 / 2：Leonus样式
+
+
 # CSS 前缀
 # 有些 CSS 并不是所有浏览器都支持，需要增加对应的前缀才会生效
 # 开启 css_prefix 后，会自动为一些 CSS 增加前缀。（会增加 20%的体积）
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
index 54ba9b37..d411d557 100644
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -10,6 +10,10 @@ minWidth768()
     @media screen and (min-width: 768px)
         {block}
 
+maxWidth1300()
+    @media screen and (max-width: 1300px)
+        {block}
+
 maxWidth1024()
     @media screen and (max-width: 1024px)
         {block}
diff --git a/source/css/_page/says.styl b/source/css/_page/says.styl
new file mode 100644
index 00000000..933f032d
--- /dev/null
+++ b/source/css/_page/says.styl
@@ -0,0 +1,327 @@
+#bber 
+	margin-top 1rem
+	width 100%
+
+	div 
+		&.bber-content 
+			display flex
+			flex-direction initial
+			flex-wrap wrap
+			border-radius 12px
+			width 100%
+			height 100%
+
+	& > section
+		& > ul 
+			& > li 
+				&.item
+					margin-bottom 1rem
+
+				& > div 
+					.bber-info-time 
+						color var(--sco-fontcolor)
+						font-size .7rem
+						background-color var(--sco-gray-op)
+						padding 0 8px
+						border-radius 20px
+						cursor default
+						display flex
+						align-items center
+
+						i 
+							margin-right 8px
+							font-size 16px
+
+					.datafrom 
+						order 2
+						color var(--sco-secondtext)
+						font-size .7rem
+						margin-left 8px
+						small 
+							font-size .7rem
+	.bber-info 
+		display flex
+		align-items center
+
+		.fa-rectangles-mixed 
+			margin-right 8px
+
+	.bber-content-link 
+		display flex
+		margin-left .5rem
+		color var(--sco-secondtext)
+		font-size .7rem
+		align-items center
+		background-color rgba(245, 108, 108, .13)
+		padding 0 8px
+		border-radius 20px
+
+		&:hover 
+			background-color var(--sco-main)
+			color var(--sco-white)
+
+		i 
+			margin-right 3px
+			font-size 16px
+
+	.bber-reply 
+		cursor pointer
+		margin 0 4px
+
+	.bber-bottom 
+		display flex
+		justify-content space-between
+		width 100%
+		-webkit-user-select none
+		user-select none
+
+	.count 
+		color var(--sco-secondtext)
+		font-size .8rem
+
+	p 
+		margin 0
+
+	.datafrom 
+		i 
+			margin-right 4px
+
+	.bber-music 
+		width 100%
+		height 90px
+		margin .5rem 0
+		border-radius 8px
+		overflow hidden
+		border var(--style-border-always)
+		background var(--sco-secondbg)
+
+		.aplayer-lrc 
+			display none
+
+	.aplayer 
+		margin 0
+
+		.aplayer-info 
+			.aplayer-music 
+				height 23px
+
+				.aplayer-title 
+					font-size .8rem
+					font-weight 700
+					margin 0
+					color var(--sco-black)
+
+			.aplayer-controller 
+				align-items center
+
+				.aplayer-bar-wrap 
+					padding 0
+
+					.aplayer-bar 
+						background var(--sco-gray)
+						height 8px
+						border-radius 12px
+						transition .3s
+						overflow hidden
+
+						.aplayer-played 
+							height 100%
+							border-radius 12px
+
+							.aplayer-thumb 
+								display none
+
+						.aplayer-loaded 
+							height 100%
+							border-radius 12px
+
+					&:hover 
+						.aplayer-bar 
+							height 12px
+
+				.aplayer-time 
+					position initial
+
+		&.aplayer-withlrc 
+			.aplayer-pic 
+				height 82px
+				width 82px
+				margin 4px
+				border-radius 4px
+
+	.bber-video 
+		position relative
+		padding 30% 50%
+		margin 0.5rem 0
+
+	.bber-content-img 
+		height 100px
+		margin .2rem auto .3rem 0
+		border-radius 12px
+		overflow hidden
+		display flex
+		position relative
+
+		img 
+			object-fit cover
+			max-height 100%
+			border-radius 12px
+			min-height 100px
+			height 100px
+
+	.bber-content 
+		.datacont 
+			order 0
+			font-size .8rem
+			font-weight 700
+			color var(--sco-fontcolor)
+			width 100%
+			line-height 1.38
+			border-radius 12px
+			margin-bottom .5rem
+			display flex
+			flex-direction column
+			text-align justify
+
+	.timeline 
+		#waterfall 
+			opacity 0
+			transition .3s
+
+			&.show 
+				opacity 1
+
+		ul 
+			li 
+				&.item 
+					position relative
+					width 32%
+					border var(--style-border-always)
+					border-radius 12px
+					padding 1rem 1rem .5rem
+					transition .3s
+					display flex
+					flex-direction column
+					flex-wrap nowrap
+					justify-content space-between
+					align-items flex-start
+					background var(--sco-card-bg)
+					box-shadow var(--sco-shadow-border)
+					margin-right 2%
+
+					+maxWidth1300()
+						width 49%
+						margin-right 1%
+
+					+maxWidth768()
+						width 100%
+						margin-right 0
+						padding 16px 20px
+
+					hr 
+						display flex
+						position relative
+						margin 8px 0
+						border 1px dashed var(--sco-theme-op)
+						width 100%
+
+					&:hover 
+						border var(--style-border-hover)
+	ul 
+		&.list 
+			display flex
+			flex-direction row
+			flex-wrap wrap
+			justify-content space-between
+
+	li 
+		&.item 
+			display flex
+			flex-direction column
+			flex-wrap nowrap
+			align-items flex-start
+
+#bber .bber-video video,
+#bber .bber-video iframe 
+	position absolute
+	width 100%
+	height 100%
+	left 0
+	top 0
+	margin 0
+	border-radius 8px
+	border var(--style-border)
+
+#bber-tips 
+	font-size 14px
+	display flex
+	justify-content center
+	margin-top 1rem
+
+#bber-talk 
+	width 100%
+	height 25px
+	line-height 25px
+	display flex
+	flex-direction column
+
+	.li-style 
+		width auto
+		max-width 100%
+		height 25px
+		text-align center
+		overflow hidden
+		text-overflow ellipsis
+		transition .3s
+		font-weight 700
+		margin auto
+		cursor pointer
+		white-space nowrap
+
+#bbtalk 
+	overflow hidden
+	width 100%
+	text-overflow ellipsis
+	white-space nowrap
+
+#bbTimeList 
+	background var(--sco-card-bg)
+	color var(--sco-fontcolor)
+	padding .5rem 1rem
+	border-radius 12px
+	box-shadow var(--sco-shadow-lightblack)
+	display flex
+	transition .3s
+	margin-bottom 1rem
+	border var(--style-border)
+	align-items center
+	height 50px
+	-webkit-user-select none
+	user-select none
+
+	+maxWidth1300()
+		margin-bottom 1rem
+		animation slide-in .6s 0s backwards
+
+	.li-style 
+		&:hover 
+			color var(--sco-theme)
+			transition .3s
+
+.bber-gotobb 
+	line-height 25px
+	margin-left 1rem
+	transition .3s
+	cursor pointer
+
+	&:hover 
+		opacity .8
+		color var(--sco-theme)
+
+i 
+	&.bber-gotobb 
+		font-size 16px
+
+a 
+	&.bber-reply 
+		cursor pointer
\ No newline at end of file
diff --git a/source/css/custom.css b/source/css/custom.css
index 56417882..60861d51 100755
--- a/source/css/custom.css
+++ b/source/css/custom.css
@@ -235,10 +235,6 @@
     opacity: .8
 }
 
-a.bber-reply {
-    cursor: pointer;
-}
-
 
 /* TAG Link */
 
diff --git a/source/css/index.styl b/source/css/index.styl
index 5ad50f23..5eb3aea6 100644
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -6,6 +6,7 @@ if hexo-config('css_prefix')
 // project
 @import '_global/animation.css'
 @import '_global/*'
+@import '_page/*'
 
 // search
 if hexo-config('thirdparty.search.algolia_search.enable')
diff --git a/source/css/main.css b/source/css/main.css
index 92e7c67d..a70fbbc2 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -7110,40 +7110,6 @@ a.categoryButton:hover {
     color: var(--sco-lighttext)
 }
 
-#bber-talk {
-    width: 100%;
-    height: 25px;
-    line-height: 25px;
-    display: flex;
-    flex-direction: column
-}
-
-#bbtalk {
-    overflow: hidden;
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap
-}
-
-#bber-talk .li-style {
-    width: auto;
-    max-width: 100%;
-    height: 25px;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: .3s;
-    font-weight: 700;
-    margin: auto;
-    cursor: pointer;
-    white-space: nowrap
-}
-
-#bbTimeList .li-style:hover {
-    color: var(--sco-theme);
-    transition: .3s
-}
-
 li, ul {
     list-style: none;
     display: block;
@@ -7151,52 +7117,6 @@ li, ul {
     padding: 0
 }
 
-#bbTimeList {
-    background: var(--sco-card-bg);
-    color: var(--sco-fontcolor);
-    padding: .5rem 1rem;
-    border-radius: 12px;
-    box-shadow: var(--sco-shadow-lightblack);
-    display: flex;
-    transition: .3s;
-    margin-bottom: 1rem;
-    border: var(--style-border);
-    align-items: center;
-    height: 50px;
-    -webkit-user-select: none
-}
-
-@media screen and (min-width: 768px) {
-    #bbTimeList:hover {
-        border: var(--style-border-hover);
-        box-shadow: var(--sco-shadow-main);
-        background: var(--sco-card-bg)
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    #bbTimeList {
-        margin-bottom: 1rem;
-        animation: slide-in .6s 0s backwards
-    }
-}
-
-.bber-gotobb {
-    line-height: 25px;
-    margin-left: 1rem;
-    transition: .3s;
-    cursor: pointer
-}
-
-.bber-gotobb:hover {
-    opacity: .8;
-    color: var(--sco-theme)
-}
-
-i.bber-gotobb {
-    font-size: 16px
-}
-
 .icon-bblogo {
     font-size: 2rem;
     line-height: 22px;
@@ -12361,82 +12281,6 @@ div#sco-footer-bar .footer-bar-description {
     }
 }
 
-#bber .timeline #waterfall {
-    opacity: 0;
-    transition: .3s
-}
-
-#bber .timeline #waterfall.show {
-    opacity: 1
-}
-
-#bber .timeline ul li.item {
-    position: relative;
-    width: 32%;
-    border: var(--style-border-always);
-    border-radius: 12px;
-    padding: 1rem 1rem .5rem;
-    transition: .3s;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: flex-start;
-    background: var(--sco-card-bg);
-    box-shadow: var(--sco-shadow-border);
-    margin-right: 2%
-}
-
-#bber .timeline ul li.item hr {
-    display: flex;
-    position: relative;
-    margin: 8px 0;
-    border: 1px dashed var(--sco-theme-op);
-    width: 100%
-}
-
-@media screen and (max-width: 768px) {
-    #bber .timeline ul li.item {
-        padding: 0
-    }
-}
-
-#bber .timeline ul li.item:hover {
-    border: var(--style-border-hover)
-}
-
-#bber ul.list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between
-}
-
-#bber li.item {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    align-items: flex-start
-}
-
-@media screen and (max-width: 1300px) {
-    #bber .timeline ul li.item {
-        width: 49%;
-        margin-right: 1%
-    }
-}
-
-@media screen and (max-width: 768px) {
-    #bber .timeline ul li.item {
-        width: 100%;
-        margin-right: 0
-    }
-
-    #bber .timeline ul li.item {
-        padding: 16px 20px
-    }
-}
-
 .timeline ul .list {
     display: flex;
     flex-direction: row;
@@ -12458,235 +12302,7 @@ div#sco-footer-bar .footer-bar-description {
     color: var(--sco-hovertext)
 }
 
-#bber {
-    margin-top: 1rem;
-    width: 100%
-}
-
-#bber div.bber-content {
-    display: flex;
-    flex-direction: initial;
-    flex-wrap: wrap;
-    border-radius: 12px;
-    width: 100%;
-    height: 100%
-}
-
-#bber > section > ul > li.item {
-    margin-bottom: 1rem
-}
-
-#bber .bber-info {
-    display: flex;
-    align-items: center
-}
-
-#bber .bber-info .fa-rectangles-mixed {
-    margin-right: 8px
-}
-
-#bber .bber-content-link {
-    display: flex;
-    margin-left: .5rem;
-    color: var(--sco-secondtext);
-    font-size: .7rem;
-    align-items: center;
-    background-color: rgba(245, 108, 108, .13);
-    padding: 0 8px;
-    border-radius: 20px
-}
-
-#bber .bber-content-link:hover {
-    background-color: var(--sco-main);
-    color: var(--sco-white)
-}
-
-#bber .bber-content-link i {
-    margin-right: 3px;
-    font-size: 16px
-}
-
-#bber .bber-reply {
-    cursor: pointer;
-    margin: 0 4px
-}
-
-#bber .bber-bottom {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    -webkit-user-select: none
-}
-
-#bber .count {
-    color: var(--sco-secondtext);
-    font-size: .8rem
-}
-
-#bber p {
-    margin: 0
-}
-
-#bber .datafrom i {
-    margin-right: 4px
-}
-
-#bber .bber-music {
-    width: 100%;
-    height: 90px;
-    margin: .5rem 0;
-    border-radius: 8px;
-    overflow: hidden;
-    border: var(--style-border-always);
-    background: var(--sco-secondbg)
-}
-
-#bber .aplayer {
-    margin: 0
-}
-
-#bber .aplayer .aplayer-info .aplayer-music .aplayer-title {
-    font-size: .8rem;
-    font-weight: 700;
-    margin: 0;
-    color: var(--sco-black)
-}
-
-#bber .aplayer.aplayer-withlrc .aplayer-pic {
-    height: 82px;
-    width: 82px;
-    margin: 4px;
-    border-radius: 4px
-}
-
-#bber .aplayer .aplayer-info .aplayer-music {
-    height: 23px
-}
-
-#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
-    padding: 0
-}
-
-#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
-    background: var(--sco-gray);
-    height: 8px;
-    border-radius: 12px;
-    transition: .3s;
-    overflow: hidden
-}
-
-#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar {
-    height: 12px
-}
-
-#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
-    height: 100%;
-    border-radius: 12px
-}
-
-#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
-    height: 100%;
-    border-radius: 12px
-}
-
-#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
-    display: none
-}
-
-#bber .aplayer .aplayer-info .aplayer-controller {
-    align-items: center
-}
-
-#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
-    position: initial
-}
-
-#bber .bber-music .aplayer-lrc {
-    display: none
-}
-
-#bber .bber-video {
-    position: relative;
-    padding: 30% 50%;
-    margin: 0.5rem 0
-}
-
-#bber .bber-video video,
-#bber .bber-video iframe {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    margin: 0;
-    border-radius: 8px;
-    border: var(--style-border)
-}
-
-#bber-tips {
-    font-size: 14px;
-    display: flex;
-    justify-content: center;
-    margin-top: 1rem
-}
 
-#bber .bber-content-img img {
-    object-fit: cover;
-    max-height: 100%;
-    border-radius: 12px;
-    min-height: 100px;
-    height: 100px
-}
-
-#bber .bber-content-img {
-    height: 100px;
-    margin: .2rem auto .3rem 0;
-    border-radius: 12px;
-    overflow: hidden;
-    display: flex;
-    position: relative
-}
-
-#bber > section > ul > li > div .bber-info-time {
-    color: var(--sco-fontcolor);
-    font-size: .7rem;
-    background-color: var(--sco-gray-op);
-    padding: 0 8px;
-    border-radius: 20px;
-    cursor: default;
-    display: flex;
-    align-items: center
-}
-
-#bber > section > ul > li > div .bber-info-time i {
-    margin-right: 8px;
-    font-size: 16px
-}
-
-#bber .bber-content .datacont {
-    order: 0;
-    font-size: .8rem;
-    font-weight: 700;
-    color: var(--sco-fontcolor);
-    width: 100%;
-    line-height: 1.38;
-    border-radius: 12px;
-    margin-bottom: .5rem;
-    display: flex;
-    flex-direction: column;
-    text-align: justify
-}
-
-#bber > section > ul > li > div .datafrom {
-    order: 2;
-    color: var(--sco-secondtext);
-    font-size: .7rem;
-    margin-left: 8px
-}
-
-#bber > section > ul > li > div .datafrom small {
-    font-size: .7rem
-}
 
 .load-btn.button-load {
     background: var(--sco-card-btn-bg);
@@ -15152,8 +14768,4 @@ div#equipment {
     left: 0;
     width: 100%;
     padding: 0 16px
-}
-
-a.bber-reply {
-    cursor: pointer
 }
\ No newline at end of file

From 0c78ac979b01e2345e8646aff4536b54800e3d1f Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Tue, 14 Nov 2023 13:10:33 +0800
Subject: [PATCH 04/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复顶部导航栏悬停字体颜色不显示的问题
将note标签样式代码调整到main
---
 layout/partial/head.ejs        |   4 +-
 source/css/_global/index.styl  |   2 +-
 source/css/commentBarrage.css  | 174 ---------------
 source/css/commentBarrage.styl | 150 +++++++++++++
 source/css/custom.css          | 383 ---------------------------------
 source/css/index.styl          |   2 +-
 source/css/main.css            | 376 +++++++++++++++++++++++++++++++-
 7 files changed, 530 insertions(+), 561 deletions(-)
 delete mode 100755 source/css/commentBarrage.css
 create mode 100644 source/css/commentBarrage.styl

diff --git a/layout/partial/head.ejs b/layout/partial/head.ejs
index e0590c31..4d72e1af 100755
--- a/layout/partial/head.ejs
+++ b/layout/partial/head.ejs
@@ -28,8 +28,10 @@ var description = page.desc || page.excerpt || config.description
     <link rel="apple-touch-icon-precomposed" sizes="180x180" href="<%= url_for(theme.site.siteIcon) %>">
 <% } %>
 <link rel="stylesheet" href="/css/index.css">
-<link rel="stylesheet" href="/css/main.css">
 <link rel="stylesheet" href="/css/custom.css">
+<%- css('/css/index') %>
+<%- css('/css/main') %>
+<%- css('/css/custom') %>
 <%- partial('partial/compoment/inject/head', {cache: true}) %>
 <% if (theme.extends.head) for (const i of theme.extends.head){ %>
     <%- i %>
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index aa0db6f5..1f4a48f2 100644
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -117,4 +117,4 @@
 	--style-border-hover-always 1px solid var(--sco-main)
 	--style-border-dashed 1px dashed var(--sco-theme-op)
 	--style-border-forever 2px solid var(--sco-main)
-	--sco-navbg var(--sco-theme-op)
+	--sco-navbg var(--sco-theme-op)
\ No newline at end of file
diff --git a/source/css/commentBarrage.css b/source/css/commentBarrage.css
deleted file mode 100755
index 6a3031f6..00000000
--- a/source/css/commentBarrage.css
+++ /dev/null
@@ -1,174 +0,0 @@
-.comment-barrage {
-    position: fixed;
-    bottom: 0px;
-    right: 20px;
-    padding: 0px 0px 20px 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: end;
-    align-items: flex-end;
-    z-index: 999;
-    transition: all 0.3s ease 0s;
-    user-select: none;
-}
-
-@media screen and (max-width: 768px) {
-    .comment-barrage {
-        display: none !important;
-    }
-}
-
-.comment-barrage-item {
-    min-width: 300px;
-    max-width: 300px;
-    width: fit-content;
-    min-height: 80px;
-    max-height: 150px;
-    margin: 4px;
-    padding: 8px 14px;
-    background: var(--sco-maskbgdeep);
-    border-radius: 8px;
-    color: var(--sco-fontcolor);
-    animation: 0.6s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running barrageIn;
-    transition: all 0.3s ease 0s;
-    display: flex;
-    flex-direction: column;
-    border: var(--style-border);
-    backdrop-filter: saturate(180%) blur(20px);
-    position: fixed;
-    box-shadow: var(--sco-shadow-border);
-    overflow: hidden;
-}
-
-.comment-barrage-item:hover {
-    border: var(--style-border-hover);
-    box-shadow: var(--sco-shadow-main);
-}
-
-.comment-barrage-item.out {
-    opacity: 0;
-    animation: 0.6s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running barrageOut;
-}
-
-.comment-barrage-item.hovered {
-    opacity: 0;
-}
-
-.comment-barrage-item .comment-barrage-close {
-    color: var(--sco-secondtext);
-    cursor: pointer;
-    line-height: 1;
-    margin: 4px;
-}
-
-.comment-barrage-item .comment-barrage-close:hover {
-    color: var(--sco-main);
-}
-
-.comment-barrage-item .comment-barrage-close .heofont {
-    color: var(--sco-fontcolor);
-    font-size: 18px !important;
-}
-
-.comment-barrage-item pre {
-    display: none;
-}
-
-.comment-barrage-item li {
-    display: none;
-}
-
-.comment-barrage-item p img:not(.tk-owo-emotion) {
-    display: none;
-}
-
-.comment-barrage-item p img.tk-owo-emotion {
-    width: 16px;
-    padding: 0px;
-    margin: 0px;
-    transform: translateY(2px);
-}
-
-.comment-barrage-item blockquote {
-    display: none;
-}
-
-.comment-barrage-item br {
-    display: none;
-}
-
-.comment-barrage-item .barrageHead {
-    height: 30px;
-    padding: 0px 0px 6px;
-    line-height: 30px;
-    font-size: 12px;
-    border-bottom: var(--style-border);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 700;
-}
-
-.comment-barrage-item .barrageHead .barrageTitle {
-    color: var(--sco-card-bg);
-    margin-right: 8px;
-    background: var(--sco-fontcolor);
-    line-height: 1;
-    padding: 4px;
-    border-radius: 4px;
-    white-space: nowrap;
-}
-
-.comment-barrage-item .barrageHead .barrageTitle:hover {
-    background: var(--sco-main);
-    color: var(--sco-white);
-}
-
-.comment-barrage-item .barrageAvatar {
-    width: 16px;
-    height: 16px;
-    margin: 0px 8px 0px auto;
-    border-radius: 50%;
-    background: var(--sco-secondbg);
-}
-
-.comment-barrage-item .barrageContent {
-    height: calc(100% - 30px);
-    overflow: hidden;
-    width: fit-content;
-    max-height: 48px;
-    font-size: 14px !important;
-    font-weight: 400 !important;
-}
-
-.comment-barrage-item .barrageContent a {
-    pointer-events: none;
-    font-size: 14px !important;
-}
-
-.comment-barrage-item .barrageContent::-webkit-scrollbar {
-    height: 0px;
-    width: 4px;
-}
-
-.comment-barrage-item .barrageContent::-webkit-scrollbar-button {
-    display: none;
-}
-
-.comment-barrage-item p {
-    margin: 8px 0px;
-    line-height: 1.3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    font-size: 14px;
-    max-width: 270px;
-}
-
-.comment-barrage-item .barrageContent h1, .comment-barrage-item .barrageContent h2, .comment-barrage-item .barrageContent h3, .comment-barrage-item .barrageContent h4 {
-    font-size: 14px !important;
-    font-weight: 400 !important;
-    margin: 8px 0px !important;
-}
diff --git a/source/css/commentBarrage.styl b/source/css/commentBarrage.styl
new file mode 100644
index 00000000..5e498232
--- /dev/null
+++ b/source/css/commentBarrage.styl
@@ -0,0 +1,150 @@
+.comment-barrage
+  position fixed
+  bottom 0
+  right 20px
+  padding 0 0 20px 10px
+  display flex
+  flex-direction column
+  justify-content flex-end
+  align-items flex-end
+  z-index 999
+  transition all 0.3s ease 0s
+  user-select none
+
+@media screen and (max-width: 768px)
+  .comment-barrage
+    display none !important
+
+.comment-barrage-item
+  min-width 300px
+  max-width 300px
+  width fit-content
+  min-height 80px
+  max-height 150px
+  margin 4px
+  padding 8px 14px
+  background var(--sco-maskbgdeep)
+  border-radius 8px
+  color var(--sco-fontcolor)
+  animation 0.6s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running barrageIn
+  transition all 0.3s ease 0s
+  display flex
+  flex-direction column
+  border var(--style-border)
+  backdrop-filter saturate(180%) blur(20px)
+  position fixed
+  box-shadow var(--sco-shadow-border)
+  overflow hidden
+
+  &:hover
+    border var(--style-border-hover)
+    box-shadow var(--sco-shadow-main)
+
+  &.out
+    opacity 0
+    animation 0.6s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running barrageOut
+
+  &.hovered
+    opacity 0
+
+  .comment-barrage-close
+    color var(--sco-secondtext)
+    cursor pointer
+    line-height 1
+    margin 4px
+
+    &:hover
+      color var(--sco-main)
+
+    .heofont
+      color var(--sco-fontcolor)
+      font-size 18px !important
+
+  pre
+    display none
+
+  li
+    display none
+
+  p
+    img:not(.tk-owo-emotion)
+      display none
+
+    img.tk-owo-emotion
+      width 16px
+      padding 0
+      margin 0
+      transform translateY(2px)
+
+  blockquote
+    display none
+
+  br
+    display none
+
+  .barrageHead
+    height 30px
+    padding 0 0 6px
+    line-height 30px
+    font-size 12px
+    border-bottom var(--style-border)
+    display flex
+    justify-content space-between
+    align-items center
+    font-weight 700
+
+    .barrageTitle
+      color var(--sco-card-bg)
+      margin-right 8px
+      background var(--sco-fontcolor)
+      line-height 1
+      padding 4px
+      border-radius 4px
+      white-space nowrap
+
+      &:hover
+        background var(--sco-main)
+        color var(--sco-white)
+
+  .barrageAvatar
+    width 16px
+    height 16px
+    margin 0 8px 0 auto
+    border-radius 50%
+    background var(--sco-secondbg)
+
+  .barrageContent
+    height calc(100% - 30px)
+    overflow hidden
+    width fit-content
+    max-height 48px
+    font-size 14px !important
+    font-weight 400 !important
+
+    a
+      pointer-events none
+      font-size 14px !important
+
+    &::-webkit-scrollbar
+      height 0
+      width 4px
+
+    &::-webkit-scrollbar-button
+      display none
+
+  p
+    margin 8px 0
+    line-height 1.3
+    overflow hidden
+    text-overflow ellipsis
+    -webkit-line-clamp 2
+    display -webkit-box
+    -webkit-box-orient vertical
+    font-size 14px
+    max-width 270px
+
+  .barrageContent
+    h1, h2, h3, h4
+      font-size 14px !important
+      font-weight 400 !important
+      margin 8px 0 !important
\ No newline at end of file
diff --git a/source/css/custom.css b/source/css/custom.css
index 56417882..cb1b13c1 100755
--- a/source/css/custom.css
+++ b/source/css/custom.css
@@ -1,10 +1,5 @@
-@media screen and (min-width: 900px) {
     #page-header #nav a:hover .scoicon {
         transition: .3s;
-        opacity: 0;
-    }
-}
-
 #sidebar-menus .menus_item .not-child {
     padding: 4px 8px !important;
     width: 100%;
@@ -447,382 +442,4 @@ div.timenode:hover .meta:after {
 .recent-post-item .recent-post-info .recent-post-info-top #post-list-tips {
     font-size: 15px;
     color: #555535;
-}
-
-/**
-  * Note
- */
-
-.note {
-    position: relative;
-    margin: 0 0 1rem;
-    padding: 15px;
-    border-radius: 3px
-}
-
-.note.icon {
-    padding-left: 2.25rem
-}
-
-.note > .note-icon {
-    position: absolute;
-    top: calc(50% - .4rem);
-    left: .7rem;
-    font-size: larger
-}
-
-.note.blue:not(.disabled) {
-    border-left-color: #428bca !important
-}
-
-.note.blue:not(.disabled).modern {
-    color: #428bca;
-    border-left-color: transparent !important
-}
-
-.note.blue:not(.disabled):not(.simple) {
-    background: #e3eef7 !important
-}
-
-.note.blue > .note-icon {
-    color: #428bca
-}
-
-.note.pink:not(.disabled) {
-    border-left-color: #ff69b4 !important
-}
-
-.note.pink:not(.disabled).modern {
-    color: #ff69b4;
-    border-left-color: transparent !important
-}
-
-.note.pink:not(.disabled):not(.simple) {
-    background: #ffe9f4 !important
-}
-
-.note.pink > .note-icon {
-    color: #ff69b4
-}
-
-.note.red:not(.disabled) {
-    border-left-color: red !important
-}
-
-.note.red:not(.disabled).modern {
-    color: red;
-    border-left-color: transparent !important
-}
-
-.note.red:not(.disabled):not(.simple) {
-    background: #ffd9d9 !important
-}
-
-.note.red > .note-icon {
-    color: red
-}
-
-.note.purple:not(.disabled) {
-    border-left-color: #6f42c1 !important
-}
-
-.note.purple:not(.disabled).modern {
-    color: #6f42c1;
-    border-left-color: transparent !important
-}
-
-.note.purple:not(.disabled):not(.simple) {
-    background: #e9e3f6 !important
-}
-
-.note.purple > .note-icon {
-    color: #6f42c1
-}
-
-.note.orange:not(.disabled) {
-    border-left-color: #ff8c00 !important
-}
-
-.note.orange:not(.disabled).modern {
-    color: #ff8c00;
-    border-left-color: transparent !important
-}
-
-.note.orange:not(.disabled):not(.simple) {
-    background: #ffeed9 !important
-}
-
-.note.orange > .note-icon {
-    color: #ff8c00
-}
-
-.note.green:not(.disabled) {
-    border-left-color: #5cb85c !important
-}
-
-.note.green:not(.disabled).modern {
-    color: #5cb85c;
-    border-left-color: transparent !important
-}
-
-.note.green:not(.disabled):not(.simple) {
-    background: #e7f4e7 !important
-}
-
-.note.green > .note-icon {
-    color: #5cb85c
-}
-
-.note.simple {
-    border-width: 1px 1px 1px 5px;
-    border-style: solid;
-    border-color: #eee;
-    border-image: initial
-}
-
-.note.modern {
-    background-color: #f5f5f5;
-    color: #4c4948;
-    border: 1px solid transparent !important
-}
-
-.note.flat {
-    border-top: initial;
-    border-right: initial;
-    border-bottom: initial;
-    border-image: initial;
-    border-left: 5px solid #eee;
-    background-color: #f9f9f9;
-    color: #4c4948
-}
-
-.note h2, .note h3, .note h4, .note h5, .note h6 {
-    margin-top: 3px;
-    margin-bottom: 0;
-    border-bottom: initial;
-    padding-top: 0 !important
-}
-
-.note blockquote:first-child, .note img:first-child, .note ol:first-child, .note p:first-child, .note pre:first-child, .note table:first-child, .note ul:first-child {
-    margin-top: 0 !important
-}
-
-.note blockquote:last-child, .note img:last-child, .note ol:last-child, .note p:last-child, .note pre:last-child, .note table:last-child, .note ul:last-child {
-    margin-bottom: 0 !important;
-    font-size: 14px !important
-}
-
-.note:not(.no-icon) {
-    padding-left: 2.25rem
-}
-
-.note:not(.no-icon)::before {
-    position: absolute;
-    top: calc(50% - 19px);
-    left: .7rem;
-    font-size: larger
-}
-
-.note.default.flat {
-    background: #f7f7f7
-}
-
-.note.default.modern {
-    border-color: #e1e1e1;
-    background: #f3f3f3;
-    color: #666
-}
-
-.note.default.modern a:not(.btn) {
-    color: #666
-}
-
-.note.default.modern a:not(.btn):hover {
-    color: #454545
-}
-
-.note.default:not(.modern) {
-    border-left-color: #777
-}
-
-.note.default:not(.modern) h2, .note.default:not(.modern) h3, .note.default:not(.modern) h4, .note.default:not(.modern) h5, .note.default:not(.modern) h6 {
-    color: #777
-}
-
-.note.default:not(.no-icon)::before {
-    content: "\e0a9"
-}
-
-.note.default:not(.no-icon):not(.modern)::before {
-    color: #777
-}
-
-.note.primary.flat {
-    background: #f5f0fa
-}
-
-.note.primary.modern {
-    border-color: #e1c2ff;
-    background: #f3daff;
-    color: #6f42c1
-}
-
-.note.primary.modern a:not(.btn) {
-    color: #6f42c1
-}
-
-.note.primary.modern a:not(.btn):hover {
-    color: #453298
-}
-
-.note.primary:not(.modern) {
-    border-left-color: #6f42c1
-}
-
-.note.primary:not(.modern) h2, .note.primary:not(.modern) h3, .note.primary:not(.modern) h4, .note.primary:not(.modern) h5, .note.primary:not(.modern) h6 {
-    color: #6f42c1
-}
-
-.note.primary:not(.no-icon)::before {
-    content: "\e0a8"
-}
-
-.note.primary:not(.no-icon):not(.modern)::before {
-    color: #6f42c1
-}
-
-.note.info.flat {
-    background: #eef7fa
-}
-
-.note.info.modern {
-    border-color: #b3e5ef;
-    background: #d9edf7;
-    color: #31708f
-}
-
-.note.info.modern a:not(.btn) {
-    color: #31708f
-}
-
-.note.info.modern a:not(.btn):hover {
-    color: #215761
-}
-
-.note.info:not(.modern) {
-    border-left-color: #428bca
-}
-
-.note.info:not(.modern) h2, .note.info:not(.modern) h3, .note.info:not(.modern) h4, .note.info:not(.modern) h5, .note.info:not(.modern) h6 {
-    color: #428bca
-}
-
-.note.info:not(.no-icon)::before {
-    content: "\e0a7"
-}
-
-.note.info:not(.no-icon):not(.modern)::before {
-    color: #428bca
-}
-
-.note.success.flat {
-    background: #eff8f0
-}
-
-.note.success.modern {
-    border-color: #d0e6be;
-    background: #dff0d8;
-    color: #3c763d
-}
-
-.note.success.modern a:not(.btn) {
-    color: #3c763d
-}
-
-.note.success.modern a:not(.btn):hover {
-    color: #32562c
-}
-
-.note.success:not(.modern) {
-    border-left-color: #5cb85c
-}
-
-.note.success:not(.modern) h2, .note.success:not(.modern) h3, .note.success:not(.modern) h4, .note.success:not(.modern) h5, .note.success:not(.modern) h6 {
-    color: #5cb85c
-}
-
-.note.success:not(.no-icon)::before {
-    content: "\e0a4"
-}
-
-.note.success:not(.no-icon):not(.modern)::before {
-    color: #5cb85c
-}
-
-.note.warning.flat {
-    background: #fdf8ea
-}
-
-.note.warning.modern {
-    border-color: #fae4cd;
-    background: #fcf4e3;
-    color: #8a6d3b
-}
-
-.note.warning.modern a:not(.btn) {
-    color: #8a6d3b
-}
-
-.note.warning.modern a:not(.btn):hover {
-    color: #714f30
-}
-
-.note.warning:not(.modern) {
-    border-left-color: var(--sco-orange)
-}
-
-.note.warning:not(.modern) h2, .note.warning:not(.modern) h3, .note.warning:not(.modern) h4, .note.warning:not(.modern) h5, .note.warning:not(.modern) h6 {
-    color: var(--sco-orange)
-}
-
-.note.warning:not(.no-icon)::before {
-    content: "\e0a5"
-}
-
-.note.warning:not(.no-icon):not(.modern)::before {
-    color: var(--sco-orange)
-}
-
-.note.danger.flat {
-    background: #fcf1f2
-}
-
-.note.danger.modern {
-    border-color: #ebcdd2;
-    background: #f2dfdf;
-    color: #a94442
-}
-
-.note.danger.modern a:not(.btn) {
-    color: #a94442
-}
-
-.note.danger.modern a:not(.btn):hover {
-    color: #84333f
-}
-
-.note.danger:not(.modern) {
-    border-left-color: #d9534f
-}
-
-.note.danger:not(.modern) h2, .note.danger:not(.modern) h3, .note.danger:not(.modern) h4, .note.danger:not(.modern) h5, .note.danger:not(.modern) h6 {
-    color: #d9534f
-}
-
-.note.danger:not(.no-icon)::before {
-    content: "\e0aa"
-}
-
-.note.danger:not(.no-icon):not(.modern)::before {
-    color: #d9534f
 }
\ No newline at end of file
diff --git a/source/css/index.styl b/source/css/index.styl
index 5ad50f23..f05403e1 100644
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@charset "UTF-8"
 
 if hexo-config('css_prefix')
     @import 'nib'
diff --git a/source/css/main.css b/source/css/main.css
index 92e7c67d..a4d9df12 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -3592,6 +3592,380 @@ blockquote.pullquote.right {
     background-color: #5cb85c
 }
 
+.note {
+    position: relative;
+    margin: 0 0 1rem;
+    padding: 15px;
+    border-radius: 3px
+}
+
+.note.icon {
+    padding-left: 2.25rem
+}
+
+.note > .note-icon {
+    position: absolute;
+    top: calc(50% - .4rem);
+    left: .7rem;
+    font-size: larger
+}
+
+.note.blue:not(.disabled) {
+    border-left-color: #428bca !important
+}
+
+.note.blue:not(.disabled).modern {
+    color: #428bca;
+    border-left-color: transparent !important
+}
+
+.note.blue:not(.disabled):not(.simple) {
+    background: #e3eef7 !important
+}
+
+.note.blue > .note-icon {
+    color: #428bca
+}
+
+.note.pink:not(.disabled) {
+    border-left-color: #ff69b4 !important
+}
+
+.note.pink:not(.disabled).modern {
+    color: #ff69b4;
+    border-left-color: transparent !important
+}
+
+.note.pink:not(.disabled):not(.simple) {
+    background: #ffe9f4 !important
+}
+
+.note.pink > .note-icon {
+    color: #ff69b4
+}
+
+.note.red:not(.disabled) {
+    border-left-color: red !important
+}
+
+.note.red:not(.disabled).modern {
+    color: red;
+    border-left-color: transparent !important
+}
+
+.note.red:not(.disabled):not(.simple) {
+    background: #ffd9d9 !important
+}
+
+.note.red > .note-icon {
+    color: red
+}
+
+.note.purple:not(.disabled) {
+    border-left-color: #6f42c1 !important
+}
+
+.note.purple:not(.disabled).modern {
+    color: #6f42c1;
+    border-left-color: transparent !important
+}
+
+.note.purple:not(.disabled):not(.simple) {
+    background: #e9e3f6 !important
+}
+
+.note.purple > .note-icon {
+    color: #6f42c1
+}
+
+.note.orange:not(.disabled) {
+    border-left-color: #ff8c00 !important
+}
+
+.note.orange:not(.disabled).modern {
+    color: #ff8c00;
+    border-left-color: transparent !important
+}
+
+.note.orange:not(.disabled):not(.simple) {
+    background: #ffeed9 !important
+}
+
+.note.orange > .note-icon {
+    color: #ff8c00
+}
+
+.note.green:not(.disabled) {
+    border-left-color: #5cb85c !important
+}
+
+.note.green:not(.disabled).modern {
+    color: #5cb85c;
+    border-left-color: transparent !important
+}
+
+.note.green:not(.disabled):not(.simple) {
+    background: #e7f4e7 !important
+}
+
+.note.green > .note-icon {
+    color: #5cb85c
+}
+
+.note.simple {
+    border-width: 1px 1px 1px 5px;
+    border-style: solid;
+    border-color: #eee;
+    border-image: initial
+}
+
+.note.modern {
+    background-color: #f5f5f5;
+    color: #4c4948;
+    border: 1px solid transparent !important
+}
+
+.note.flat {
+    border-top: initial;
+    border-right: initial;
+    border-bottom: initial;
+    border-image: initial;
+    border-left: 5px solid #eee;
+    background-color: #f9f9f9;
+    color: #4c4948
+}
+
+.note h2, .note h3, .note h4, .note h5, .note h6 {
+    margin-top: 3px;
+    margin-bottom: 0;
+    border-bottom: initial;
+    padding-top: 0 !important
+}
+
+.note blockquote:first-child, .note img:first-child, .note ol:first-child, .note p:first-child, .note pre:first-child, .note table:first-child, .note ul:first-child {
+    margin-top: 0 !important
+}
+
+.note blockquote:last-child, .note img:last-child, .note ol:last-child, .note p:last-child, .note pre:last-child, .note table:last-child, .note ul:last-child {
+    margin-bottom: 0 !important;
+    font-size: 14px !important
+}
+
+.note:not(.no-icon) {
+    padding-left: 2.25rem
+}
+
+.note:not(.no-icon)::before {
+    position: absolute;
+    top: calc(50% - 19px);
+    left: .7rem;
+    font-size: larger
+}
+
+.note.default.flat {
+    background: #f7f7f7
+}
+
+.note.default.modern {
+    border-color: #e1e1e1;
+    background: #f3f3f3;
+    color: #666
+}
+
+.note.default.modern a:not(.btn) {
+    color: #666
+}
+
+.note.default.modern a:not(.btn):hover {
+    color: #454545
+}
+
+.note.default:not(.modern) {
+    border-left-color: #777
+}
+
+.note.default:not(.modern) h2, .note.default:not(.modern) h3, .note.default:not(.modern) h4, .note.default:not(.modern) h5, .note.default:not(.modern) h6 {
+    color: #777
+}
+
+.note.default:not(.no-icon)::before {
+    content: ""
+}
+
+.note.default:not(.no-icon):not(.modern)::before {
+    color: #777
+}
+
+.note.primary.flat {
+    background: #f5f0fa
+}
+
+.note.primary.modern {
+    border-color: #e1c2ff;
+    background: #f3daff;
+    color: #6f42c1
+}
+
+.note.primary.modern a:not(.btn) {
+    color: #6f42c1
+}
+
+.note.primary.modern a:not(.btn):hover {
+    color: #453298
+}
+
+.note.primary:not(.modern) {
+    border-left-color: #6f42c1
+}
+
+.note.primary:not(.modern) h2, .note.primary:not(.modern) h3, .note.primary:not(.modern) h4, .note.primary:not(.modern) h5, .note.primary:not(.modern) h6 {
+    color: #6f42c1
+}
+
+.note.primary:not(.no-icon)::before {
+    content: "\e060"
+}
+
+.note.primary:not(.no-icon):not(.modern)::before {
+    color: #6f42c1
+}
+
+.note.info.flat {
+    background: #eef7fa
+}
+
+.note.info.modern {
+    border-color: #b3e5ef;
+    background: #d9edf7;
+    color: #31708f
+}
+
+.note.info.modern a:not(.btn) {
+    color: #31708f
+}
+
+.note.info.modern a:not(.btn):hover {
+    color: #215761
+}
+
+.note.info:not(.modern) {
+    border-left-color: #428bca
+}
+
+.note.info:not(.modern) h2, .note.info:not(.modern) h3, .note.info:not(.modern) h4, .note.info:not(.modern) h5, .note.info:not(.modern) h6 {
+    color: #428bca
+}
+
+.note.info:not(.no-icon)::before {
+    content: ""
+}
+
+.note.info:not(.no-icon):not(.modern)::before {
+    color: #428bca
+}
+
+.note.success.flat {
+    background: #eff8f0
+}
+
+.note.success.modern {
+    border-color: #d0e6be;
+    background: #dff0d8;
+    color: #3c763d
+}
+
+.note.success.modern a:not(.btn) {
+    color: #3c763d
+}
+
+.note.success.modern a:not(.btn):hover {
+    color: #32562c
+}
+
+.note.success:not(.modern) {
+    border-left-color: #5cb85c
+}
+
+.note.success:not(.modern) h2, .note.success:not(.modern) h3, .note.success:not(.modern) h4, .note.success:not(.modern) h5, .note.success:not(.modern) h6 {
+    color: #5cb85c
+}
+
+.note.success:not(.no-icon)::before {
+    content: ""
+}
+
+.note.success:not(.no-icon):not(.modern)::before {
+    color: #5cb85c
+}
+
+.note.warning.flat {
+    background: #fdf8ea
+}
+
+.note.warning.modern {
+    border-color: #fae4cd;
+    background: #fcf4e3;
+    color: #8a6d3b
+}
+
+.note.warning.modern a:not(.btn) {
+    color: #8a6d3b
+}
+
+.note.warning.modern a:not(.btn):hover {
+    color: #714f30
+}
+
+.note.warning:not(.modern) {
+    border-left-color: var(--sco-orange)
+}
+
+.note.warning:not(.modern) h2, .note.warning:not(.modern) h3, .note.warning:not(.modern) h4, .note.warning:not(.modern) h5, .note.warning:not(.modern) h6 {
+    color: var(--sco-orange)
+}
+
+.note.warning:not(.no-icon)::before {
+    content: "\e067"
+}
+
+.note.warning:not(.no-icon):not(.modern)::before {
+    color: var(--sco-orange)
+}
+
+.note.danger.flat {
+    background: #fcf1f2
+}
+
+.note.danger.modern {
+    border-color: #ebcdd2;
+    background: #f2dfdf;
+    color: #a94442
+}
+
+.note.danger.modern a:not(.btn) {
+    color: #a94442
+}
+
+.note.danger.modern a:not(.btn):hover {
+    color: #84333f
+}
+
+.note.danger:not(.modern) {
+    border-left-color: #d9534f
+}
+
+.note.danger:not(.modern) h2, .note.danger:not(.modern) h3, .note.danger:not(.modern) h4, .note.danger:not(.modern) h5, .note.danger:not(.modern) h6 {
+    color: #d9534f
+}
+
+.note.danger:not(.no-icon)::before {
+    content: ""
+}
+
+.note.danger:not(.no-icon):not(.modern)::before {
+    color: #d9534f
+}
+
 #article-container .tabs {
     position: relative;
     margin: 0 0 1rem;
@@ -9489,7 +9863,7 @@ b, strong {
     color: var(--sco-yellow)
 }
 
-.note.warning:class(.modern) {
+.note.warning:not(.modern) {
     border-radius: 8px;
     border-width: 1px;
     border-color: var(--sco-yellow);

From 8a306907bb8e41f6c3b5f1efeca056afb0f8fd54 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Tue, 14 Nov 2023 13:11:13 +0800
Subject: [PATCH 05/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

细微修改
---
 source/css/custom.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/source/css/custom.css b/source/css/custom.css
index cb1b13c1..886ad97b 100755
--- a/source/css/custom.css
+++ b/source/css/custom.css
@@ -1,5 +1,3 @@
-    #page-header #nav a:hover .scoicon {
-        transition: .3s;
 #sidebar-menus .menus_item .not-child {
     padding: 4px 8px !important;
     width: 100%;

From b0b294f7f765b5c065f9a93df33ec0d04b3f582a Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Tue, 14 Nov 2023 17:16:32 +0800
Subject: [PATCH 06/43] Stylus Repiar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

整理样式
新增页面、文章页样式
---
 layout/page/equipment.ejs                     |    2 +-
 layout/partial/compoment/circle/banner.ejs    |    2 +-
 layout/partial/compoment/equipment/banner.ejs |   10 +
 layout/partial/compoment/inject/head.ejs      |    1 -
 layout/partial/compoment/says/banner.ejs      |    2 +-
 layout/partial/head.ejs                       |    3 -
 scripts/tags/bvideo.js                        |   37 +-
 source/css/_extra/console.styl                |    0
 source/css/_global/function.styl              |    4 +
 source/css/_layout/homeTop.styl               |    0
 source/css/_page/equipment.styl               |  108 +
 source/css/_page/index.styl                   |   46 +
 source/css/_page/link.styl                    |  430 ++++
 source/css/_page/moment.styl                  |   39 +
 source/css/_page/rss.styl                     |   87 +
 source/css/_page/says.styl                    |   29 +-
 source/css/{ => _post}/commentBarrage.styl    |    4 +-
 source/css/_post/externalTags.styl            |  694 ++++++
 source/css/custom.css                         |  439 ----
 source/css/index.styl                         |   11 +
 source/css/main.css                           | 2095 ++---------------
 21 files changed, 1649 insertions(+), 2394 deletions(-)
 create mode 100755 layout/partial/compoment/equipment/banner.ejs
 create mode 100644 source/css/_extra/console.styl
 create mode 100644 source/css/_layout/homeTop.styl
 create mode 100644 source/css/_page/equipment.styl
 create mode 100644 source/css/_page/index.styl
 create mode 100644 source/css/_page/link.styl
 create mode 100644 source/css/_page/moment.styl
 create mode 100644 source/css/_page/rss.styl
 rename source/css/{ => _post}/commentBarrage.styl (98%)
 create mode 100644 source/css/_post/externalTags.styl
 delete mode 100755 source/css/custom.css

diff --git a/layout/page/equipment.ejs b/layout/page/equipment.ejs
index c7adc678..8f67b164 100755
--- a/layout/page/equipment.ejs
+++ b/layout/page/equipment.ejs
@@ -1,2 +1,2 @@
-<%- partial('partial/compoment/says/banner') %>
+<%- partial('partial/compoment/equipment/banner') %>
 <%- partial('partial/compoment/equipment/list') %>
diff --git a/layout/partial/compoment/circle/banner.ejs b/layout/partial/compoment/circle/banner.ejs
index df4229bf..e7da3611 100755
--- a/layout/partial/compoment/circle/banner.ejs
+++ b/layout/partial/compoment/circle/banner.ejs
@@ -1,4 +1,4 @@
-<div class="author-content author-content-item essayPage single nolazyload"
+<div class="author-content author-content-item momentsPage single nolazyload"
      style="background: url(<%= page.cover %>) no-repeat center;background-size: cover;">
     <div class="card-content">
         <div class="author-content-item-tips"><%= page.title %></div>
diff --git a/layout/partial/compoment/equipment/banner.ejs b/layout/partial/compoment/equipment/banner.ejs
new file mode 100755
index 00000000..4e8dc547
--- /dev/null
+++ b/layout/partial/compoment/equipment/banner.ejs
@@ -0,0 +1,10 @@
+<div class="author-content author-content-item equipment single" style="background: url(<%= page.cover %>) no-repeat center;">
+    <div class="card-content">
+        <div class="author-content-item-tips"><%= page.title %></div>
+        <span class="author-content-item-title"><%= page.desc %></span>
+        <div class="content-bottom">
+            <div class="tips"><%- page.tipl %></div>
+            <div class="tips"><%- page.tipr %></div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/inject/head.ejs b/layout/partial/compoment/inject/head.ejs
index 6b2b2ff5..a6f3ff46 100755
--- a/layout/partial/compoment/inject/head.ejs
+++ b/layout/partial/compoment/inject/head.ejs
@@ -11,7 +11,6 @@
 <%- css(cdn.scoicon) %>
 <%- css(cdn.snackbarcss) %>
 <% if(theme.comment.enable){ %>
-    <%- css('/css/commentBarrage') %>
     <%- js(cdn.twikoojs) %>
 <% } %>
 <% if(theme.thirdparty.search.algolia_search.enable){ %>
diff --git a/layout/partial/compoment/says/banner.ejs b/layout/partial/compoment/says/banner.ejs
index 83355e17..b8f234d4 100755
--- a/layout/partial/compoment/says/banner.ejs
+++ b/layout/partial/compoment/says/banner.ejs
@@ -1,4 +1,4 @@
-<div class="author-content author-content-item essayPage single nolazyload" style="background: url(<%= page.cover %>) no-repeat center;background-size: cover;">
+<div class="author-content author-content-item essayPage single nolazyload" style="background: url(<%= page.cover %>) no-repeat center;">
     <div class="card-content">
         <div class="author-content-item-tips"><%= page.title %></div>
         <span class="author-content-item-title"><%= page.desc %></span>
diff --git a/layout/partial/head.ejs b/layout/partial/head.ejs
index 4d72e1af..3650b088 100755
--- a/layout/partial/head.ejs
+++ b/layout/partial/head.ejs
@@ -27,11 +27,8 @@ var description = page.desc || page.excerpt || config.description
     <link rel="bookmark" href="<%= url_for(theme.site.siteIcon) %>">
     <link rel="apple-touch-icon-precomposed" sizes="180x180" href="<%= url_for(theme.site.siteIcon) %>">
 <% } %>
-<link rel="stylesheet" href="/css/index.css">
-<link rel="stylesheet" href="/css/custom.css">
 <%- css('/css/index') %>
 <%- css('/css/main') %>
-<%- css('/css/custom') %>
 <%- partial('partial/compoment/inject/head', {cache: true}) %>
 <% if (theme.extends.head) for (const i of theme.extends.head){ %>
     <%- i %>
diff --git a/scripts/tags/bvideo.js b/scripts/tags/bvideo.js
index c8fa7818..93018745 100755
--- a/scripts/tags/bvideo.js
+++ b/scripts/tags/bvideo.js
@@ -1,42 +1,7 @@
 'use strict'
-let playIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67735 4.2798C5.98983 4.1725 7.85812 4.0625 10 4.0625C12.1421 4.0625 14.0105 4.17252 15.323 4.27983C16.2216 4.3533 16.9184 5.04049 16.9989 5.9318C17.0962 7.00837 17.1875 8.43614 17.1875 10C17.1875 11.5639 17.0962 12.9916 16.9989 14.0682C16.9184 14.9595 16.2216 15.6467 15.323 15.7202C14.0105 15.8275 12.1421 15.9375 10 15.9375C7.85812 15.9375 5.98983 15.8275 4.67735 15.7202C3.77861 15.6467 3.08174 14.9593 3.00119 14.0678C2.90388 12.9908 2.8125 11.5627 2.8125 10C2.8125 8.43727 2.90388 7.00924 3.00119 5.93221C3.08174 5.04067 3.77861 4.35327 4.67735 4.2798ZM10 2.8125C7.81674 2.8125 5.9136 2.92456 4.5755 3.03395C3.07738 3.15643 1.8921 4.31616 1.75626 5.81973C1.65651 6.92379 1.5625 8.39058 1.5625 10C1.5625 11.6094 1.65651 13.0762 1.75626 14.1803C1.8921 15.6838 3.07738 16.8436 4.5755 16.966C5.9136 17.0754 7.81674 17.1875 10 17.1875C12.1835 17.1875 14.0868 17.0754 15.4249 16.966C16.9228 16.8436 18.108 15.6841 18.2438 14.1807C18.3435 13.077 18.4375 11.6105 18.4375 10C18.4375 8.38948 18.3435 6.92296 18.2438 5.81931C18.108 4.31588 16.9228 3.15645 15.4249 3.03398C14.0868 2.92458 12.1835 2.8125 10 2.8125ZM12.1876 10.722C12.7431 10.4013 12.7431 9.59941 12.1876 9.27866L9.06133 7.47373C8.50577 7.15298 7.81133 7.55392 7.81133 8.19542V11.8053C7.81133 12.4468 8.50577 12.8477 9.06133 12.527L12.1876 10.722Z" fill="#9499A0"/></svg>`
-let likeIcon = `<svg width="18" height="18" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"></path></svg>`
-let coinIcon = `<svg width="18" height="18" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="icon" style="fill:;"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z"></path></svg>`
 
 function bilibili(args) {
-  const id = args[0].replace(/.*video\/(.*)\/.*/, '$1')
-  const time = args[1]
-  return `
-  <a href="https://www.bilibili.com/video/${id}/" class="bilibili_box" id="${id}" onclick="event.stopPropagation()"></a>
-
-  <script>
-    bilibili()
-    function bilibili() {
-      let dom = document.getElementById('${id}')
-      fetch('https://api.320.ink/api/b?id=${id}').then(res=>res.json()).then(data=>{
-        dom.innerHTML = \`
-        <div class="bilibili_cover">
-          <img src="https://s1.hdslb.com/bfs/static/player/img/play.svg" class="play_icon nolazyload">
-          <img src="\${data.pic + '&h=300'}" class="nolazyload">
-          ${time ? `<span>${time}</span>` : ''}
-        </div>
-        <div class="bilibili_info">
-          <div class="title">\${data.title}</div>
-          <div class="stat">
-            <span>${playIcon}\${data.view}</span>
-            <span>${likeIcon}\${data.like}</span>
-            <span>${coinIcon}\${data.coin}</span>
-          </div>
-          <div class="owner">
-            <span class="tip">视频</span>
-            <img src="\${data.face + '&h=100'}" class="nolazyload">
-            <span>\${data.owner}</span>
-          </div>
-        </div>\`
-      })
-    }
-  </script>
-  `
+  return `<iframe class="bvideo" src="${args}"></iframe>`
 }
 
 hexo.extend.tag.register('bilibili', bilibili, { ends: false })
\ No newline at end of file
diff --git a/source/css/_extra/console.styl b/source/css/_extra/console.styl
new file mode 100644
index 00000000..e69de29b
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
index d411d557..da878c5d 100644
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -14,6 +14,10 @@ maxWidth1300()
     @media screen and (max-width: 1300px)
         {block}
 
+minWidth1300()
+    @media screen and (min-width: 1300px)
+        {block}
+
 maxWidth1024()
     @media screen and (max-width: 1024px)
         {block}
diff --git a/source/css/_layout/homeTop.styl b/source/css/_layout/homeTop.styl
new file mode 100644
index 00000000..e69de29b
diff --git a/source/css/_page/equipment.styl b/source/css/_page/equipment.styl
new file mode 100644
index 00000000..2a0dddcd
--- /dev/null
+++ b/source/css/_page/equipment.styl
@@ -0,0 +1,108 @@
+.author-content.author-content-item.equipment
+  height 19rem
+  background-size cover
+  color var(--sco-white)
+  overflow hidden
+  margin-top 0
+
+.equipment-item-content
+  display flex
+  flex-direction row
+  flex-wrap wrap
+  margin 0 -8px
+
+.equipment-item-content-item
+  width calc(25% - 12px)
+  border-radius 12px
+  border var(--style-border-always)
+  overflow hidden
+  margin 8px 6px
+  background var(--sco-card-bg)
+  box-shadow var(--sco-shadow-border)
+  min-height 400px
+  position relative
+
+  @media screen and (max-width: 1200px)
+    width calc(50% - 12px)
+
+  @media screen and (max-width: 768px)
+    width 100%
+
+.equipment-item-content-item-info
+  padding 8px 16px 16px 16px
+  margin-top 12px
+
+.equipment-item-content-item-name
+  font-size 18px
+  font-weight 700
+  line-height 1
+  margin-bottom 8px
+  white-space nowrap
+  overflow hidden
+  text-overflow ellipsis
+  cursor pointer
+  width fit-content
+
+  &:hover
+    color var(--sco-main)
+
+.equipment-item-content-item-specification
+  font-size 12px
+  color var(--sco-secondtext)
+  line-height 1
+  margin-bottom 12px
+  white-space nowrap
+  overflow hidden
+  text-overflow ellipsis
+
+.equipment-item-content-item-description
+  line-height 20px
+  color var(--sco-secondtext)
+  height 60px
+  display -webkit-box
+  overflow hidden
+  -webkit-line-clamp 3
+  -webkit-box-orient vertical
+  font-size 14px
+
+a.equipment-item-content-item-link
+  font-size 12px
+  background var(--sco-gray-op)
+  padding 4px 8px
+  border-radius 8px
+  cursor pointer
+
+  &:hover
+    background var(--sco-main)
+    color var(--sco-white)
+
+h2.equipment-item-title
+  line-height 1
+
+.equipment-item-description
+  line-height 1
+  margin 4px 0 8px 0
+  color var(--sco-secondtext)
+
+.equipment-item-content-item-cover
+  width 100%
+  height 200px
+  background var(--sco-secondbg)
+  display flex
+  justify-content center
+
+img.equipment-item-content-item-image
+  object-fit cover
+  height 100%
+
+div#equipment
+  margin-top 26px
+
+.equipment-item-content-item-toolbar
+  display flex
+  justify-content space-between
+  position absolute
+  bottom 12px
+  left 0
+  width 100%
+  padding 0 16px
\ No newline at end of file
diff --git a/source/css/_page/index.styl b/source/css/_page/index.styl
new file mode 100644
index 00000000..87e81461
--- /dev/null
+++ b/source/css/_page/index.styl
@@ -0,0 +1,46 @@
+// 即刻、categoriesBar 样式
+#bbTimeList,
+#category-bar
+  background var(--sco-card-bg)
+  width 100%
+  color var(--sco-fontcolor)
+  padding .5rem 1rem
+  border-radius 12px
+  box-shadow var(--sco-shadow-lightblack)
+  display flex
+  transition .3s
+  margin-bottom 1rem
+  border var(--style-border)
+  align-items center
+  height 50px
+  user-select none
+
+  +maxWidth1300()
+    margin-bottom 1rem
+    animation slide-in .6s 0s backwards
+
+  +minWidth1300()
+    &:hover
+      border var(--style-border-hover)
+      box-shadow var(--sco-shadow-main)
+
+  +maxWidth768()
+    margin-bottom 0
+    margin-top 0
+    border-radius 0
+    background var(--sco-background)
+    padding 0.5rem 20px
+    border none
+
+#category-bar
+  padding 0.4rem 1rem 0.4rem 0.7rem
+  white-space nowrap
+  overflow hidden
+  justify-content space-between
+
+  +minWidth1300()
+    margin-bottom 0.75rem
+    animation slide-in .6s .3s backwards
+
+    .category-in-bar-tips
+      margin-bottom .25rem
\ No newline at end of file
diff --git a/source/css/_page/link.styl b/source/css/_page/link.styl
new file mode 100644
index 00000000..ab7efe42
--- /dev/null
+++ b/source/css/_page/link.styl
@@ -0,0 +1,430 @@
+// link and tlink
+.flink#article-container
+  .flink-desc
+    margin .2rem 0 .5rem
+
+  .flink-list
+    overflow auto
+    padding 10px 10px 0
+    text-align center
+
+    > .flink-list-item
+      position relative
+      float left
+      overflow hidden
+      margin 15px 7px
+      width calc(25% - 12px)
+      height 90px
+      border-radius 5px
+      line-height 17px
+      transform translateZ(0)
+      transition all .3s ease 0s
+
+      &:hover
+        background #006cf2
+        transform scale(1.05)
+
+      a
+        color var(--sco-fontcolor)
+        text-decoration none
+
+        img
+          float left
+          margin 15px 10px
+          width 60px
+          height 60px
+          border-radius 35px
+          transition all .3s ease 0s
+
+        .img-alt
+          display none
+
+        .flink-item-name
+          display block
+          padding 0 10px 0 0
+          font-weight 700
+          font-size 1.43em
+          max-width calc(100% - 12px)
+          overflow hidden
+          text-overflow ellipsis
+          white-space nowrap
+
+        .flink-item-desc
+          display block
+          padding 4px 10px 0 0
+          height 50px
+          font-size .93em
+
+    &.mini
+      > .flink-list-item
+        height 60px
+
+        a
+          img
+            width 30px
+            height 30px
+            min-width 30px
+            min-height 30px
+
+@media screen and (max-width: 1200px)
+  .flink#article-container .flink-list > .flink-list-item
+    width calc(25% - 12px) !important
+
++maxWidth1024()
+  .flink#article-container .flink-list > .flink-list-item
+    width calc(33.3333% - 12px) !important
+
++maxWidth768()
+  .flink#article-container .flink-list > .flink-list-item
+    width calc(50% - 12px) !important
+
++maxWidth600()
+  .flink#article-container .flink-list > .flink-list-item
+    width calc(100% - 12px) !important
+
+
+.flink#article-container
+  .flink-list.mini
+    > .flink-list-item a .flink-item-desc
+      display none
+
+  .site-card-group
+    display flex
+    flex-wrap wrap
+    justify-content flex-start
+    margin -8px
+    align-items stretch
+
+  .site-card
+    margin 8px
+    width calc(20% - 16px)
+    display block
+    line-height 1.4
+    height 100%
+
+    .img
+      width 100%
+      height 120px
+      overflow hidden
+      border-radius 12px 12px 0 0
+      background #f6f6f6
+      transition all .3s ease 0s
+
+      img
+        width 100%
+        height 100%
+        transition transform 2s ease 0s
+        object-fit cover
+
+    .info
+      margin-top 8px
+
+      img
+        width 32px
+        height 32px
+        border-radius 16px
+        float left
+        margin-right 8px
+        margin-top 2px
+
+      span
+        display block
+
+      .title
+        font-weight 600
+        color #444
+        display -webkit-box
+        overflow hidden
+        -webkit-line-clamp 1
+        transition all .3s ease 0s
+
+      .desc
+        overflow-wrap break-word
+        line-height 1.2
+        color #888
+        display -webkit-box
+        overflow hidden
+        -webkit-line-clamp 2
+
+    .img-alt
+      display none
+
+    &:hover .info .title
+      color #ff5722
+
+@media screen and (max-width: 1200px)
+  .flink#article-container .site-card
+    width calc(20% - 16px) !important
+
++maxWidth1024()
+  .flink#article-container .site-card
+    width calc(25% - 16px) !important
+
++maxWidth768()
+  .flink#article-container .site-card
+    width calc(33.3333% - 16px) !important
+
++maxWidth600()
+  .flink#article-container .site-card
+    width calc(50% - 16px) !important
+
+@media screen and (max-width: 500px)
+  .flink#article-container .site-card .img
+    height 100px
+
+.flink#article-container
+  .flink-list
+    padding 0
+    margin .5rem -6px 1rem -6px
+    overflow-x hidden
+
+  .flink-desc
+    margin 0
+    color var(--sco-secondtext)
+
+  .flink-list > .flink-list-item a .flink-item-desc
+    white-space normal
+    padding 5px 10px 16px 0
+    color var(--sco-fontcolor)
+    text-align left
+    height 40px
+    text-overflow ellipsis
+    opacity .7
+    display -webkit-box
+    overflow hidden
+    -webkit-box-orient vertical
+    -webkit-line-clamp 2
+
+  .flink-list > .flink-list-item:hover a .flink-item-desc
+    color var(--sco-white)
+
+  .flink-list > .flink-list-item a .flink-item-name
+    text-align left
+    font-size 19px
+    line-height 20px
+    color var(--sco-fontcolor)
+
+  .flink-list > .flink-list-item:hover a .flink-item-name
+    color var(--sco-white)
+
+  .flink-list > .flink-list-item a
+    display flex
+    border none
+    width 100%
+    height 100%
+    align-items center
+
+  .flink-list > .flink-list-item a:hover
+    background 0 0
+
+  .flink-list > .flink-list-item a img
+    border-radius 32px
+    margin 15px 20px 15px 15px
+    transition .3s
+    background var(--sco-background)
+    min-width 60px
+    min-height 60px
+
+  .flink-list > .flink-list-item:hover a img
+    transition .6s
+    width 0
+    height 0
+    opacity 0
+    margin .5rem
+    min-width 0
+    min-height 0
+
+  .flink-list > .flink-list-item a span
+    transition .3s
+
+  .flink-list > .flink-list-item:hover a .flink-item-desc
+    overflow hidden
+    width 100%
+
+  .flink-list > .flink-list-item
+    margin 6px 6px
+    transition .3s
+    border-radius 12px
+    transition-timing-function ease-in-out
+    position relative
+    width calc(20% - 12px)
+    border var(--style-border)
+    box-shadow var(--sco-shadow-border)
+    background var(--sco-card-bg)
+    display flex
+
+.flink-list-item
+  .flink-item-info
+    display flex
+    flex-direction column
+    justify-content center
+    width calc(100% - 90px)
+    height fit-content
+
+  &:hover .flink-item-info
+    min-width calc(100% - 20px)
+
+
+.flink#article-container
+  .flink-list > .flink-list-item:hover
+    transform scale(1)
+    background var(--sco-theme)
+    border var(--style-border-hover)
+    box-shadow var(--sco-shadow-main)
+
+  .site-card
+    .info .title
+      color var(--sco-fontcolor)
+      text-align left
+
+    &:hover .info .title
+      color var(--sco-white)
+
+    &:hover .info
+      height 120px
+
+    .site-card-text
+      display flex
+      flex-direction column
+      align-items flex-start
+
+    .info .desc
+      font-size .7rem
+      color var(--sco-fontcolor)
+      opacity .7
+      transition .3s
+      text-align left
+
+    &:hover .info .desc
+      color var(--sco-white)
+
+    border var(--style-border)
+    border-radius 12px
+    transition .3s
+    transition-timing-function ease-in-out
+    overflow hidden
+    height 200px
+    position relative
+    width calc(100% / 7 - 16px)
+    background var(--sco-card-bg)
+    box-shadow var(--sco-shadow-border)
+
+    &:hover .site-card-tag
+      left -50px
+
+    .info
+      display flex
+      border none
+      padding .5rem
+      width 100%
+      height 90px
+      margin 0
+      border-radius 0 0 12px 12px
+
+    .img img
+      border-radius 0
+      transform scale(1.03)
+      transition .3s
+      margin 0
+      max-width 100%
+
+.site-card-tag
+  position absolute
+  top 0
+  left 0
+  padding 4px 8px
+  background-color var(--sco-blue)
+  box-shadow var(--sco-shadow-blue)
+  color var(--sco-white)
+  z-index 1
+  border-radius 12px 0 12px 0
+  transition .3s
+  font-size .6rem
+
+  &.vip
+    background -moz-linear-gradient(38deg, #e5b085 0, #d48f16 100%)
+    background -webkit-linear-gradient(38deg, #e5b085 0, #d48f16 100%)
+    background linear-gradient(38deg, #e5b085 0, #d48f16 100%)
+    overflow hidden
+    box-shadow var(--sco-shadow-yellow)
+
+  &.power
+    background-color var(--sco-purple)
+
+  &.speed
+    background var(--sco-green)
+    box-shadow var(--sco-shadow-green)
+
+.light
+  cursor pointer
+  position absolute
+  top 0
+  width 100px
+  height 50px
+  background-image -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0))
+  background-image -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0))
+  -webkit-animation light_tag 4s both infinite
+  -moz-animation light_tag 4s both infinite
+  -ms-animation light_tag 4s both infinite
+  animation light_tag 4s both infinite
+
+.flink-list-item:hover .site-card-tag
+  left -70px
+
++minWidth768()
+  .flink#article-container
+    .site-card:hover
+      .info .desc
+        -webkit-line-clamp 4
+        transition .3s
+        color var(--sco-white)
+        width 100%
+
+      .info
+        background var(--sco-theme)
+
+
++minWidth768()
+  .flink#article-container
+    .site-card:hover
+      .img img
+        transform scale(1.1)
+        filter brightness(.3)
+
+      .img
+        height 80px
+
+.flink#article-container
+  .site-card
+    .img
+      -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
+      border-radius 0
+      height 120px
+      width 100%
+      display flex
+      border none
+      padding 0 !important
+
+    .info img
+      border-radius 32px
+      transition .3s !important
+      margin 2px 8px 0 0
+      width 20px
+      height 20px
+      min-width 20px
+      min-height 20px
+      background var(--sco-secondbg)
+
+    &:hover
+      .info img
+        width 0
+        height 0
+        opacity 0
+        min-width 0
+        min-height 0
+
+      border var(--style-border-hover)
+      box-shadow var(--sco-shadow-main)
+
+  .site-card-group
+    padding 20px 0
\ No newline at end of file
diff --git a/source/css/_page/moment.styl b/source/css/_page/moment.styl
new file mode 100644
index 00000000..06511d4c
--- /dev/null
+++ b/source/css/_page/moment.styl
@@ -0,0 +1,39 @@
+.author-content.author-content-item.momentsPage
+  height 19rem
+  background-size cover
+  color var(--sco-white)
+  overflow hidden
+  margin-top 0
+
+#random-post
+  min-height 32px
+  background var(--sco-card-bg)
+  border var(--style-border-always)
+  box-shadow var(--sco-shadow-border)
+  padding 20px 30px
+  border-radius 12px
+  margin-top 8px
+
+.random-friends-post
+  text-decoration none
+  border-bottom 2px solid var(--sco-lighttext)
+  color var(--sco-fontcolor)
+  font-weight 700
+  padding 0 4px
+
+.random-friends-post:hover
+  text-decoration none
+  border-bottom 2px solid var(--sco-none)
+  color var(--sco-white)
+  background var(--sco-main)
+  border-radius 4px
+  box-shadow var(--sco-shadow-main)
+
+.random-post-start
+  transition-duration .3s
+
+.random-post-start:hover
+  color var(--sco-hovertext)
+
+.title-h2-a a.random-post-start
+  opacity .6
\ No newline at end of file
diff --git a/source/css/_page/rss.styl b/source/css/_page/rss.styl
new file mode 100644
index 00000000..e83be183
--- /dev/null
+++ b/source/css/_page/rss.styl
@@ -0,0 +1,87 @@
+.rss-plan-list
+  display flex
+  width 100%
+  flex-direction row
+  flex-wrap wrap
+  margin 0 -4px
+  position relative
+
+.rss-plan-item.rss-plan-wechat
+  background #27c125
+  overflow hidden
+
+.rss-plan-item.rss-plan-mail
+  background var(--sco-blue)
+
+.rss-plan-item.rss-plan-rss
+  background var(--sco-orange)
+
+.rss-plan-item
+  border-radius 12px
+  display flex
+  flex-direction column
+  justify-content space-between
+  min-width 240px
+  height 240px
+  margin 4px auto
+  overflow hidden
+  text-decoration none
+  width calc(100% / 3 - 8px)
+  filter brightness(1)
+  transition .3s
+
+.rss-plan-item:hover
+  filter brightness(1.1)
+
++maxWidth1024()
+  .rss-plan-item
+    width calc(100% / 2 - 4px)
+
+  .rss-plan-item:first-child
+    width 100%
+
++maxWidth768()
+  .rss-plan-item
+    width 100%
+
+.rss-plan-item:visited
+  color var(--sco-white)
+
+.rss-plan-description
+  font-size 16px
+  color var(--sco-white)
+  margin 26px 0 0 30px
+  line-height 20px
+
+img.rss-plan-icon
+  position absolute
+  bottom -50px
+  right -20px
+  height 140px
+  user-select none
+  -webkit-user-drag none
+  transition all 1.2s cubic-bezier(.39, .575, .565, 1)
+  transform-origin bottom right
+  filter blur(8px)
+  opacity .6
+
+.rss-plan-item:hover img.rss-plan-icon
+  bottom -40px
+  right -10px
+  filter blur(0)
+  opacity 1
+
+.rss-plan-info-group
+  position relative
+  margin 0 0 26px 30px
+  color var(--sco-white)
+
+.rss-plan-title
+  font-size 36px
+  font-weight 700
+  width fit-content
+  line-height 1
+
+.rss-plan-info
+  width fit-content
+  opacity .6
diff --git a/source/css/_page/says.styl b/source/css/_page/says.styl
index 933f032d..4a6b8e8b 100644
--- a/source/css/_page/says.styl
+++ b/source/css/_page/says.styl
@@ -1,4 +1,11 @@
-#bber 
+.author-content.author-content-item.essayPage
+	height 19rem
+	background-size cover
+	color var(--sco-white)
+	overflow hidden
+	margin-top 0
+
+#bber
 	margin-top 1rem
 	width 100%
 
@@ -284,25 +291,7 @@
 	text-overflow ellipsis
 	white-space nowrap
 
-#bbTimeList 
-	background var(--sco-card-bg)
-	color var(--sco-fontcolor)
-	padding .5rem 1rem
-	border-radius 12px
-	box-shadow var(--sco-shadow-lightblack)
-	display flex
-	transition .3s
-	margin-bottom 1rem
-	border var(--style-border)
-	align-items center
-	height 50px
-	-webkit-user-select none
-	user-select none
-
-	+maxWidth1300()
-		margin-bottom 1rem
-		animation slide-in .6s 0s backwards
-
+#bbTimeList
 	.li-style 
 		&:hover 
 			color var(--sco-theme)
diff --git a/source/css/commentBarrage.styl b/source/css/_post/commentBarrage.styl
similarity index 98%
rename from source/css/commentBarrage.styl
rename to source/css/_post/commentBarrage.styl
index 5e498232..ec3d6baa 100644
--- a/source/css/commentBarrage.styl
+++ b/source/css/_post/commentBarrage.styl
@@ -11,7 +11,7 @@
   transition all 0.3s ease 0s
   user-select none
 
-@media screen and (max-width: 768px)
+maxWidth768()
   .comment-barrage
     display none !important
 
@@ -56,7 +56,7 @@
     &:hover
       color var(--sco-main)
 
-    .heofont
+    .scoicon
       color var(--sco-fontcolor)
       font-size 18px !important
 
diff --git a/source/css/_post/externalTags.styl b/source/css/_post/externalTags.styl
new file mode 100644
index 00000000..0f48ee90
--- /dev/null
+++ b/source/css/_post/externalTags.styl
@@ -0,0 +1,694 @@
+// Note (Bootstrap)
+.note
+  position relative
+  margin 0 0 1rem
+  padding 15px
+  border-radius 3px
+
+  &.icon
+    padding-left 2.25rem
+
+  > .note-icon
+    position absolute
+    top calc(50% - .4rem)
+    left .7rem
+    font-size larger
+
+  &.blue:not(.disabled)
+    border-left-color #428bca !important
+
+    &.modern
+      color #428bca
+      border-left-color transparent !important
+
+    &:not(.simple)
+      background #e3eef7 !important
+
+  > .note-icon
+    color #428bca
+
+  &.pink:not(.disabled)
+    border-left-color #ff69b4 !important
+
+    &.modern
+      color #ff69b4
+      border-left-color transparent !important
+
+    &:not(.simple)
+      background #ffe9f4 !important
+
+  > .note-icon
+    color #ff69b4
+
+  &.red:not(.disabled)
+    border-left-color red !important
+
+    &.modern
+      color red
+      border-left-color transparent !important
+
+    &:not(.simple)
+      background #ffd9d9 !important
+
+  > .note-icon
+    color red
+
+  &.purple:not(.disabled)
+    border-left-color #6f42c1 !important
+
+    &.modern
+      color #6f42c1
+      border-left-color transparent !important
+
+    &:not(.simple)
+      background #e9e3f6 !important
+
+  > .note-icon
+    color #6f42c1
+
+  &.orange:not(.disabled)
+    border-left-color #ff8c00 !important
+
+    &.modern
+      color #ff8c00
+      border-left-color transparent !important
+
+    &:not(.simple)
+      background #ffeed9 !important
+
+  > .note-icon
+    color #ff8c00
+
+  &.green:not(.disabled)
+    border-left-color #5cb85c !important
+
+    &.modern
+      color #5cb85c
+      border-left-color transparent !important
+
+    &:not(.simple)
+      background #e7f4e7 !important
+
+  > .note-icon
+    color #5cb85c
+
+  &.simple
+    border-width 1px 1px 1px 5px
+    border-style solid
+    border-color #eee
+    border-image initial
+
+  &.modern
+    background-color #f5f5f5
+    color #4c4948
+    border 1px solid transparent !important
+
+  &.flat
+    border-top initial
+    border-right initial
+    border-bottom initial
+    border-image initial
+    border-left 5px solid #eee
+    background-color #f9f9f9
+    color #4c4948
+
+  h2, h3, h4, h5, h6
+    margin-top 3px
+    margin-bottom 0
+    border-bottom initial
+    padding-top 0 !important
+
+  blockquote:first-child, img:first-child, ol:first-child, p:first-child, pre:first-child, table:first-child, ul:first-child
+    margin-top 0 !important
+
+  blockquote:last-child, img:last-child, ol:last-child, p:last-child, pre:last-child, table:last-child, ul:last-child
+    margin-bottom 0 !important
+    font-size 14px !important
+
+  &:not(.no-icon)
+    padding-left 2.25rem
+
+  &:not(.no-icon)::before
+    position absolute
+    top calc(50% - 19px)
+    left .7rem
+    font-size larger
+
+  &.default.flat
+    background #f7f7f7
+
+  &.default.modern
+    border-color #e1e1e1
+    background #f3f3f3
+    color #666
+
+  &.default.modern a:not(.btn)
+    color #666
+
+  &.default.modern a:not(.btn):hover
+    color #454545
+
+  &.default:not(.modern)
+    border-left-color #777
+
+  &.default:not(.modern) h2, &.default:not(.modern) h3, &.default:not(.modern) h4, &.default:not(.modern) h5, &.default:not(.modern) h6
+    color #777
+
+  &.default:not(.no-icon)::before
+    content "\e0a9"
+
+  &.default:not(.no-icon):not(.modern)::before
+    color #777
+
+  &.primary.flat
+    background #f5f0fa
+
+  &.primary.modern
+    border-color #e1c2ff
+    background #f3daff
+    color #6f42c1
+
+  &.primary.modern a:not(.btn)
+    color #6f42c1
+
+  &.primary.modern a:not(.btn):hover
+    color #453298
+
+  &.primary:not(.modern)
+    border-left-color #6f42c1
+
+  &.primary:not(.modern) h2, &.primary:not(.modern) h3, &.primary:not(.modern) h4, &.primary:not(.modern) h5, &.primary:not(.modern) h6
+    color #6f42c1
+
+  &.primary:not(.no-icon)::before
+    content "\e0a8"
+
+  &.primary:not(.no-icon):not(.modern)::before
+    color #6f42c1
+
+  &.info.flat
+    background #eef7fa
+
+  &.info.modern
+    border-color #b3e5ef
+    background #d9edf7
+    color #31708f
+
+  &.info.modern a:not(.btn)
+    color #31708f
+
+  &.info.modern a:not(.btn):hover
+    color #215761
+
+  &.info:not(.modern)
+    border-left-color #428bca
+
+  &.info:not(.modern) h2, &.info:not(.modern) h3, &.info:not(.modern) h4, &.info:not(.modern) h5, &.info:not(.modern) h6
+    color #428bca
+
+  &.info:not(.no-icon)::before
+    content "\e0a5"
+
+  &.info:not(.no-icon):not(.modern)::before
+    color #428bca
+
+  &.success.flat
+    background #eff8f0
+
+  &.success.modern
+    border-color #d0e6be
+    background #dff0d8
+    color #3c763d
+
+  &.success.modern a:not(.btn)
+    color #3c763d
+
+  &.success.modern a:not(.btn):hover
+    color #32562c
+
+  &.success:not(.modern)
+    border-left-color #5cb85c
+
+  &.success:not(.modern) h2, &.success:not(.modern) h3, &.success:not(.modern) h4, &.success:not(.modern) h5, &.success:not(.modern) h6
+    color #5cb85c
+
+  &.success:not(.no-icon)::before
+    content "\e0a4"
+
+  &.success:not(.no-icon):not(.modern)::before
+    color #5cb85c
+
+  &.warning.flat
+    background #fdf8ea
+
+  &.warning.modern
+    border-color #fae4cd
+    background #fcf4e3
+    color #8a6d3b
+
+  &.warning.modern a:not(.btn)
+    color #8a6d3b
+
+  &.warning.modern a:not(.btn):hover
+    color #714f30
+
+  &.warning:not(.modern)
+    border-left-color var(--sco-orange)
+
+  &.warning:not(.modern) h2, &.warning:not(.modern) h3, &.warning:not(.modern) h4, &.warning:not(.modern) h5, &.warning:not(.modern) h6
+    color var(--sco-orange)
+
+  &.warning:not(.no-icon)::before
+    content "\e0a5"
+
+  &.warning:not(.no-icon):not(.modern)::before
+    color var(--sco-orange)
+
+  &.danger.flat
+    background #fcf1f2
+
+  &.danger.modern
+    border-color #ebcdd2
+    background #f2dfdf
+    color #a94442
+
+  &.danger.modern a:not(.btn)
+    color #a94442
+
+  &.danger.modern a:not(.btn):hover
+    color #84333f
+
+  &.danger:not(.modern)
+    border-left-color #d9534f
+
+  &.danger:not(.modern) h2, &.danger:not(.modern) h3, &.danger:not(.modern) h4, &.danger:not(.modern) h5, &.danger:not(.modern) h6
+    color #d9534f
+
+  &.danger:not(.no-icon)::before
+    content "\e0aa"
+
+  &.danger:not(.no-icon):not(.modern)::before
+    color #d9534f
+
+  &.warning:not(.no-icon):not(.modern)::before
+    display inline-block
+    align-items center
+    height 30px
+    color var(--sco-yellow)
+
+  &.warning:class(.modern)
+    border-radius 8px
+    border-width 1px
+    border-color var(--sco-yellow)
+    box-shadow var(--sco-shadow-border)
+    background var(--sco-card-bg)
+
+#article-container
+  h1::before, h2::before, h3::before, h4::before, h5::before, h6::before, #post .post-copyright::before, #post .post-outdate-notice::before, .fontawesomeIcon, .note:not(.no-icon)::before
+    display inline-block
+    font-weight 600
+    font-style normal
+    font-variant normal
+    font-family scoicon
+    text-rendering auto
+    -webkit-font-smoothing antialiased
+
+// Tabs
+#article-container .tabs
+  position relative
+  margin 0 0 1rem
+  border-right 1px solid var(--tab-border-color)
+  border-bottom 1px solid var(--tab-border-color)
+  border-left 1px solid var(--tab-border-color)
+
+  > .nav-tabs
+    display flex
+    flex-wrap wrap
+    margin 0
+    padding 0
+    background var(--tab-botton-bg)
+
+    > .tab
+      margin 4px
+      padding 0
+      list-style none
+
+      +maxWidth768()
+        -webkit-box-flex 1
+        flex-grow 1
+
+      button i
+        width 1.5em
+
+      &.active button
+        border-top 2px solid #307af6
+        background var(--tab-button-active-bg)
+        cursor default
+
+      &:not(.active) button:hover
+        border-top 2px solid var(--tab-button-hover-bg)
+        background var(--tab-button-hover-bg)
+
+  > .tab-contents .tab-item-content
+    position relative
+    display none
+    padding 1.8rem 1.2rem
+    background var(--sco-background)
+    border var(--style-border-always)
+
+    +maxWidth768()
+      padding 1.2rem .7rem
+
+    &.active
+      display block
+      animation .5s ease 0s 1 normal none running tabshow
+
+  .tab-to-top
+    position relative
+    display block
+    margin 16px 0 0 auto
+    color #99a9bf
+
+  margin 1rem 0 !important
+  border-radius 12px
+  overflow hidden
+  box-shadow var(--sco-shadow-border)
+  padding 8px
+  background var(--sco-card-bg)
+  border var(--style-border)
+
+  .nav-tabs
+    background var(--sco-card-bg)
+    padding 16px
+    display flex
+    justify-content center
+    flex-wrap wrap
+    flex-direction row
+
+    +maxWidth768()
+      padding 0
+      margin-bottom 8px
+
+  > .nav-tabs > .tab.active button
+    border var(--style-border-hover-always)
+    background var(--sco-background)
+    border-radius 8px
+
+  > .nav-tabs > .tab button
+    -webkit-transition all 0s
+    background var(--sco-secondbg)
+    transition .3s
+    border var(--style-border-always)
+    border-radius 8px
+    font-size 1.2em
+    line-height 1
+    padding 8px 16px
+    display flex
+    width 100%
+    justify-content center
+    align-items center
+    color var(--sco-fontcolor)
+
+  > .nav-tabs > .tab:not(.active) button:hover
+    background var(--sco-main)
+    color var(--sco-white)
+    transition .3s
+    border var(--style-border-hover-always)
+
+.tab-item-content
+  background var(--sco-card-bg)
+
+#article-container .tabs
+  border 3px solid var(--sco-secondbg) !important
+
+  > .tab-contents .tab-item-content.active
+    animation tabshow 0s
+    -webkit-animation tabshow 0s
+    padding 1.2rem 1.2rem
+    border-radius 8px
+
+    +maxWidth768()
+      padding .5rem .5rem
+
+.tab-contents
+  border-radius 8px
+  overflow hidden
+
+// bvideo
+.bvideo
+  border 0
+  width 100%
+  height 600px
+  +maxWidth768()
+    height 200px!important
+
+// link
+#article-container .tag-Link
+  background var(--sco-secondbg)
+  border-radius 8px !important
+  display flex
+  border var(--style-border)
+  flex-direction column
+  padding .3rem 1rem .6rem
+  border-width 1px !important
+  margin-top 1rem
+
+  &:hover
+    border var(--style-border-hover)
+
+  .tag-link-tips
+    border-bottom var(--style-border-always)
+    padding-bottom 4px
+    font-size .6rem
+    color var(--sco-gray)
+    font-weight 400
+    pointer-events none
+
+  &:hover .tag-link-tips
+    color var(--sco-fontcolor)
+
+  .tag-link-bottom
+    display flex
+    margin-top .5rem
+    align-items center
+    justify-content space-around
+    pointer-events none
+
+    .tag-link-left
+      width 60px
+      min-width 60px
+      height 60px
+      background-size cover !important
+      border-radius 8px
+      background var(--sco-card-bg)
+      pointer-events none
+      display flex
+
+      i
+        padding 0
+        margin auto
+        font-size 24px
+        color var(--sco-fontcolor)
+
+    .tag-link-right
+      margin-left 1rem
+      pointer-events none
+
+      .tag-link-title
+        font-size 16px
+        line-height 1.2
+        pointer-events none
+        word-break break-all
+        text-overflow ellipsis
+        display -webkit-box
+        -webkit-box-orient vertical
+        -webkit-line-clamp 2
+        overflow hidden
+
+      .tag-link-sitename
+        font-size .7rem
+        color var(--sco-gray)
+        font-weight 400
+        margin-top 8px
+        pointer-events none
+        line-height 1
+        overflow hidden
+        text-overflow ellipsis
+        white-space nowrap
+
+  &:hover .tag-link-bottom .tag-link-right .tag-link-sitename
+    color var(--sco-fontcolor)
+
+  .tag-link-bottom i
+    margin-left auto
+    padding-left .5rem
+    pointer-events none
+
+// fold
+details:not(.tk-admin-config-group)
+  display block
+  position relative
+  margin-bottom 1rem
+  min-height 54px
+  overflow hidden
+  border-radius 12px
+  border var(--style-border)
+  transition border .3s
+
+  &:hover
+    border var(--style-border-hover-always)
+
+  summary
+    position absolute
+    padding .5rem 1rem
+    background var(--sco-card-bg)
+    margin 0
+    transition .3s
+    box-shadow var(--sco-shadow-border)
+    left 0
+    width 100%
+    font-weight 700
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis
+
+    &::before
+      content ''
+      padding 4px
+
+    &:hover
+      cursor pointer
+      background var(--sco-main)
+      color var(--sco-white)
+      transition .3s
+      box-shadow var(--sco-shadow-main)
+
+    &:focus
+      outline 0
+
+    &::marker
+      color var(--sco-main)
+      transition .3s
+
+    &:hover::marker
+      color var(--sco-white)
+
+    &:hover:after
+      position absolute
+      content '+'
+      text-align center
+      top calc(50% - 2px)
+      transform translateY(-50%)
+      right 16px
+      line-height 1
+
+  > :nth-child(2)
+    margin-top calc(54px + 1rem) !important
+
+  &[open]
+    border-radius 12px
+    border var(--style-border-hover-always)
+    padding 0 1.5rem
+    background var(--sco-card-bg)
+
+    summary
+      background var(--sco-main)
+      color var(--sco-white)
+
+      &::marker
+        color var(--sco-white)
+
+      &:hover:after
+        content '-'
+
++maxWidth768()
+  details[open]:not(.tk-admin-config-group)
+    padding 0 16px
+
+// timeline
+div.timenode
+  position relative
+
+  &:before,
+  &:after
+    content ''
+    z-index 1
+    position absolute
+    background var(--sco-theme)
+    width 2px
+    left 7px
+
+  &:before
+    top 0
+    height 6px
+
+  &:after
+    top 26px
+    height 100%
+
+  &:last-child:after
+    height calc(100% - 26px - 16px)
+    border-bottom-left-radius 2px
+    border-bottom-right-radius 2px
+
+  .meta
+    position relative
+    color var(--tab-botton-color)
+    font-size 0.375rem
+    line-height 32px
+    height 32px
+    left 27px
+
+    &:before,
+    &:after
+      content ''
+      position absolute
+      top 8px
+      z-index 2
+      left -27px
+
+    &:before
+      background var(--sco-theme)
+      width 16px
+      height 16px
+      border-radius 8px
+
+    &:after
+      background var(--sco-theme)
+      margin-left 2px
+      margin-top 2px
+      width 12px
+      height 12px
+      border-radius 6px
+      transform scale(0.5)
+      transition all 0.28s ease
+      -moz-transition all 0.28s ease
+      -webkit-transition all 0.28s ease
+      -o-transition all 0.28s ease
+
+    p
+      font-weight bold
+      margin 0 0 0 24px
+
+  .body
+    margin 4px 0 16px 24px
+    padding 16px
+    border-radius 8px
+    background var(--blockquote-bg)
+
+    p:first-child
+      margin-top 0
+
+    p:last-child
+      margin-bottom 0
+
+  &:hover
+    .meta
+      color var(--sco-theme)
+
+      &:before
+        background rgba(255, 87, 34, 0.5)
+
+      &:after
+        background var(--sco-theme-op)
+        transform scale(1)
\ No newline at end of file
diff --git a/source/css/custom.css b/source/css/custom.css
deleted file mode 100755
index 8fbe452e..00000000
--- a/source/css/custom.css
+++ /dev/null
@@ -1,439 +0,0 @@
-#sidebar-menus .menus_item .not-child {
-    padding: 4px 8px !important;
-    width: 100%;
-    background: var(--sco-card-bg);
-    border-radius: 8px;
-    border: var(--style-border-always);
-    align-items: center;
-    font-size: 14px !important;
-    margin: 10px 0;
-    justify-content: center;
-}
-
-#sidebar-menus .menus_item .not-child span {
-    color: var(--sco-fontcolor) !important;
-}
-
-.meta-secondline > span {
-    opacity: .6;
-    transition: .3s;
-    margin-right: 1.1rem;
-}
-
-#category #category-bar {
-    border-radius: 0;
-}
-
-#article-container .highlight-tools {
-    position: relative;
-    display: flex;
-    -webkit-box-align: center;
-    align-items: center;
-    overflow: hidden;
-    min-height: 1.2rem;
-    height: 2.15em;
-    background: var(--sco-secondbg);
-    border-bottom: var(--style-border-always);
-    color: var(--sco-fontcolor);
-    font-size: var(--global-font-size);
-}
-
-#article-container .highlight-tools .copy-button {
-    position: absolute;
-    right: 0.7rem;
-    cursor: pointer;
-    transition: color .2s;
-    font-size: 18px;
-}
-
-#article-container .highlight-tools .code-lang {
-    position: absolute;
-    font-weight: 700;
-    font-size: 1.15em;
-    user-select: none;
-    left: 0.6rem;
-}
-
-#article-container .code-expand-btn.expand-done {
-    display: none !important;
-}
-
-
-#article-container .bilibili_box {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    border-radius: 10px;
-    overflow: hidden;
-    color: var(--sco-fontcolor) !important;
-    text-decoration: none !important;
-    -webkit-transition: .3s;
-    -moz-transition: .3s;
-    -o-transition: .3s;
-    -ms-transition: .3s;
-    transition: .3s
-}
-
-#article-container .bilibili_box:hover {
-    border-color: var(--sco-theme)
-}
-
-@media screen and (max-width: 768px) {
-    #article-container .bilibili_box {
-        -webkit-box-orient: vertical;
-        -moz-box-orient: vertical;
-        -o-box-orient: vertical;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column
-    }
-}
-
-#article-container .bilibili_box .bilibili_cover {
-    width: 200px;
-    position: relative
-}
-
-@media screen and (max-width: 768px) {
-    #article-container .bilibili_box .bilibili_cover {
-        width: 100%
-    }
-}
-
-#article-container .bilibili_box .bilibili_cover img {
-    width: 100%;
-    filter: none;
-    margin: 0 !important;
-    border-radius: 0 !important
-}
-
-#article-container .bilibili_box .bilibili_cover .play_icon {
-    position: absolute;
-    width: 45px;
-    height: 45px;
-    opacity: .8;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%)
-}
-
-#article-container .bilibili_box .bilibili_cover span {
-    position: absolute;
-    bottom: 0;
-    right: 5px;
-    color: #fff;
-}
-
-#article-container .bilibili_box .bilibili_info {
-    padding: 10px 10px 10px 18px;
-    width: calc(100% - 200px);
-    display: -webkit-box;
-    display: -moz-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -moz-box-orient: vertical;
-    -o-box-orient: vertical;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-pack: distribute;
-    -moz-box-pack: distribute;
-    -o-box-pack: distribute;
-    -ms-flex-pack: distribute;
-    -webkit-justify-content: space-around;
-    justify-content: space-around
-}
-
-@media screen and (max-width: 768px) {
-    #article-container .bilibili_box .bilibili_info {
-        width: 100%;
-        padding-bottom: 25px
-    }
-}
-
-#article-container .bilibili_box .bilibili_info .title {
-    font-size: 1.2rem;
-    font-weight: 700;
-    white-space: nowrap;
-    overflow: hidden;
-    -o-text-overflow: ellipsis;
-    text-overflow: ellipsis;
-    line-height: 1.7
-}
-
-#article-container .bilibili_box .bilibili_info .stat {
-    font-size: 15px
-}
-
-#article-container .bilibili_box .bilibili_info .stat svg {
-    margin-right: 3px;
-    font-size: 18px;
-    vertical-align: -0.15em;
-}
-
-#article-container .bilibili_box .bilibili_info .stat svg path {
-    fill: #99a9bf
-}
-
-#article-container .bilibili_box .bilibili_info .stat span {
-    margin-right: 10px
-}
-
-#article-container .bilibili_box .bilibili_info .owner {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: center;
-    -moz-box-align: center;
-    -o-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    line-height: 1;
-    font-size: 15px;
-    margin-top: 3px
-}
-
-#article-container .bilibili_box .bilibili_info .owner .tip {
-    color: #f69;
-    border: 1px solid;
-    padding: 4px 7px;
-    font-size: 13px;
-    border-radius: 5px;
-    margin-right: 10px
-}
-
-#article-container .bilibili_box .bilibili_info .owner img {
-    width: 25px;
-    height: 25px;
-    border-radius: 50% !important;
-    object-fit: cover;
-    margin: 0 5px 0 0 !important
-}
-
-[data-theme=dark] #article-container .bilibili_box .bilibili_cover,
-[data-theme=light] #article-container .bilibili_box .bilibili_info .stat svg {
-    opacity: .8
-}
-
-
-/* TAG Link */
-
-#post a.link-card {
-    text-decoration: none;
-    margin: 0.2rem auto;
-    background: var(--tab-botton-bg);
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -ms-flex-align: center;
-    align-items: center;
-    cursor: pointer;
-    text-align: left;
-    font-size: 0.575rem;
-    min-width: 200px;
-    max-width: 361px;
-    color: var(--tab-botton-color);
-    border-radius: 8px;
-}
-
-@media screen and (max-width: 425px) {
-    #post a.link-card {
-        max-width: 100%;
-    }
-}
-
-@media screen and (max-width: 375px) {
-    #post a.link-card {
-        width: 100%;
-    }
-}
-
-#post a.link-card:hover {
-    box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1);
-}
-
-#post a.link-card div.left,
-#post a.link-card div.right {
-    pointer-events: none;
-}
-
-#post a.link-card div.left {
-    width: 48px;
-    height: 48px;
-    margin: 12px;
-    overflow: hidden;
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-    position: relative;
-}
-
-#post a.link-card div.left i {
-    font-size: 32px;
-    line-height: 48px;
-    margin-left: 4px;
-}
-
-#post a.link-card div.left img {
-    display: block;
-    position: absolute;
-    border-radius: 8px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-#post a.link-card div.right {
-    overflow: hidden;
-    margin-right: 12px;
-}
-
-#post a.link-card p {
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-#post a.link-card p.text {
-    font-weight: bold;
-}
-
-#post a.link-card p.url {
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-    color: var(--search-input-color);
-    font-size: 0.7125rem;
-}
-
-
-/* TAG 时间线 */
-span.p.h2,
-p.p.h2 {
-    font-size: 1.375rem;
-    color: var(--sco-fontcolor);
-    padding-top: 0.8rem;
-    border-bottom: 1px solid var(--hr-border);
-}
-
-div.timenode {
-    position: relative;
-}
-
-div.timenode:before,
-div.timenode:after {
-    content: "";
-    z-index: 1;
-    position: absolute;
-    background: var(--sco-theme);
-    width: 2px;
-    left: 7px;
-}
-
-div.timenode:before {
-    top: 0px;
-    height: 6px;
-}
-
-div.timenode:after {
-    top: 26px;
-    height: 100%;
-}
-
-div.timenode:last-child:after {
-    height: calc(100% - 26px - 16px);
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-}
-
-div.timenode .meta {
-    position: relative;
-    color: var(--tab-botton-color);
-    font-size: 0.375rem;
-    line-height: 32px;
-    height: 32px;
-    left: 27px;
-}
-
-div.timenode .meta:before,
-div.timenode .meta:after {
-    content: "";
-    position: absolute;
-    top: 8px;
-    z-index: 2;
-    left: -27px;
-}
-
-div.timenode .meta:before {
-    background: var(--sco-theme);
-    width: 16px;
-    height: 16px;
-    border-radius: 8px;
-}
-
-div.timenode .meta:after {
-    background: var(--sco-theme);
-    margin-left: 2px;
-    margin-top: 2px;
-    width: 12px;
-    height: 12px;
-    border-radius: 6px;
-    transform: scale(0.5);
-    transition: all 0.28s ease;
-    -moz-transition: all 0.28s ease;
-    -webkit-transition: all 0.28s ease;
-    -o-transition: all 0.28s ease;
-}
-
-div.timenode .meta p {
-    font-weight: bold;
-    margin: 0 0 0 24px;
-}
-
-div.timenode .body {
-    margin: 4px 0 16px 24px;
-    padding: 16px;
-    border-radius: 8px;
-    background: var(--blockquote-bg);
-}
-
-div.timenode .body p:first-child {
-    margin-top: 0;
-}
-
-div.timenode .body p:last-child {
-    margin-bottom: 0;
-}
-
-div.timenode:hover .meta {
-    color: var(--sco-theme);
-}
-
-div.timenode:hover .meta:before {
-    background: rgba(255, 87, 34, 0.5);
-}
-
-div.timenode:hover .meta:after {
-    background: #ff5722;
-    transform: scale(1);
-}
-
-
-/*
- * home list
-*/
-.recent-post-item .recent-post-info .recent-post-info-top #post-list-tips {
-    font-size: 15px;
-    color: #555535;
-}
\ No newline at end of file
diff --git a/source/css/index.styl b/source/css/index.styl
index 94f34eb7..63350a1e 100644
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -6,6 +6,7 @@ if hexo-config('css_prefix')
 // project
 @import '_global/animation.css'
 @import '_global/*'
+@import '_layout/*'
 @import '_page/*'
 
 // search
@@ -14,5 +15,15 @@ if hexo-config('thirdparty.search.algolia_search.enable')
 if hexo-config('thirdparty.search.local_search.enable')
     @import '_search/local-search'
 
+// commentBarrage
+if hexo-config('thirdparty.comment.enable')
+    @import '_post/commentBarrage.styl'
+
+// console
+@import '_extra/console.styl'
+
+// External tags
+@import '_post/externalTags.styl'
+
 // dark
 @import '_mode/*'
\ No newline at end of file
diff --git a/source/css/main.css b/source/css/main.css
index 3be217ca..6c7319cb 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -210,16 +210,6 @@ template {
     overflow: hidden
 }
 
-#article-container h1::before, #article-container h2::before, #article-container h3::before, #article-container h4::before, #article-container h5::before, #article-container h6::before, #post .post-copyright::before, #post .post-outdate-notice::before, .fontawesomeIcon, .note:not(.no-icon)::before {
-    display: inline-block;
-    font-weight: 600;
-    font-style: normal;
-    font-variant: normal;
-    font-family: scoicon;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased
-}
-
 .card-announcement-animation {
     color: red;
     animation: .8s linear 0s infinite normal none running announ_animation
@@ -893,220 +883,7 @@ blockquote footer cite::before {
     width: 100% !important
 }
 
-.flink#article-container .flink-desc {
-    margin: .2rem 0 .5rem
-}
-
-.flink#article-container .flink-list {
-    overflow: auto;
-    padding: 10px 10px 0;
-    text-align: center
-}
-
-.flink#article-container .flink-list > .flink-list-item {
-    position: relative;
-    float: left;
-    overflow: hidden;
-    margin: 15px 7px;
-    width: calc(25% - 12px);
-    height: 90px;
-    border-radius: 5px;
-    line-height: 17px;
-    transform: translateZ(0);
-    transition: all .3s ease 0s
-}
-
-.flink#article-container .flink-list.mini > .flink-list-item {
-    height: 60px
-}
-
-@media screen and (max-width: 1200px) {
-    .flink#article-container .flink-list > .flink-list-item {
-        width: calc(25% - 12px) !important
-    }
-}
-
-@media screen and (max-width: 1024px) {
-    .flink#article-container .flink-list > .flink-list-item {
-        width: calc(33.3333% - 12px) !important
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .flink#article-container .flink-list > .flink-list-item {
-        width: calc(50% - 12px) !important
-    }
-}
-
-@media screen and (max-width: 600px) {
-    .flink#article-container .flink-list > .flink-list-item {
-        width: calc(100% - 12px) !important
-    }
-}
-
-.flink#article-container .flink-list > .flink-list-item:hover {
-    background: #006cf2;
-    transform: scale(1.05)
-}
-
-.flink#article-container .flink-list > .flink-list-item a {
-    color: var(--sco-fontcolor);
-    text-decoration: none
-}
-
-.flink#article-container .flink-list > .flink-list-item a img {
-    float: left;
-    margin: 15px 10px;
-    width: 60px;
-    height: 60px;
-    border-radius: 35px;
-    transition: all .3s ease 0s
-}
-
-.flink#article-container .flink-list.mini > .flink-list-item a img {
-    width: 30px;
-    height: 30px;
-    min-width: 30px;
-    min-height: 30px
-}
-
-.flink#article-container .flink-list > .flink-list-item a .img-alt {
-    display: none
-}
-
-.flink#article-container .flink-list > .flink-list-item a .flink-item-name {
-    display: block;
-    padding: 0 10px 0 0;
-    font-weight: 700;
-    font-size: 1.43em;
-    max-width: calc(100% - 12px);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap
-}
-
-.flink#article-container .flink-list > .flink-list-item a .flink-item-desc {
-    display: block;
-    padding: 4px 10px 0 0;
-    height: 50px;
-    font-size: .93em
-}
-
-.flink#article-container .flink-list.mini > .flink-list-item a .flink-item-desc {
-    display: none
-}
-
-.flink#article-container .site-card-group {
-    display: flex;
-    flex-wrap: wrap;
-    -webkit-box-pack: start;
-    justify-content: flex-start;
-    margin: -8px;
-    -webkit-box-align: stretch;
-    align-items: stretch
-}
-
-.flink#article-container .site-card {
-    margin: 8px;
-    width: calc(20% - 16px);
-    display: block;
-    line-height: 1.4;
-    height: 100%
-}
-
-@media screen and (max-width: 1200px) {
-    .flink#article-container .site-card {
-        width: calc(20% - 16px) !important
-    }
-}
-
-@media screen and (max-width: 1024px) {
-    .flink#article-container .site-card {
-        width: calc(25% - 16px) !important
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .flink#article-container .site-card {
-        width: calc(33.3333% - 16px) !important
-    }
-}
-
-@media screen and (max-width: 600px) {
-    .flink#article-container .site-card {
-        width: calc(50% - 16px) !important
-    }
-}
-
-.flink#article-container .site-card .img {
-    width: 100%;
-    height: 120px;
-    overflow: hidden;
-    border-radius: 12px 12px 0 0;
-    background: #f6f6f6
-}
-
-@media screen and (max-width: 500px) {
-    .flink#article-container .site-card .img {
-        height: 100px
-    }
-}
-
-.flink#article-container .site-card .img img {
-    width: 100%;
-    height: 100%;
-    transition: transform 2s ease 0s;
-    object-fit: cover
-}
-
-.flink#article-container .site-card .info {
-    margin-top: 8px
-}
-
-.flink#article-container .site-card .info img {
-    width: 32px;
-    height: 32px;
-    border-radius: 16px;
-    float: left;
-    margin-right: 8px;
-    margin-top: 2px
-}
-
-.flink#article-container .site-card .info span {
-    display: block
-}
-
-.flink#article-container .site-card .info .title {
-    font-weight: 600;
-    color: #444;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    -webkit-line-clamp: 1;
-    transition: all .3s ease 0s
-}
-
-.flink#article-container .site-card .info .desc {
-    overflow-wrap: break-word;
-    line-height: 1.2;
-    color: #888;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    -webkit-line-clamp: 2
-}
-
-.flink#article-container .site-card .img {
-    transition: all .3s ease 0s
-}
-
-.flink#article-container .site-card .img-alt {
-    display: none
-}
 
-.flink#article-container .site-card:hover .info .title {
-    color: #ff5722
-}
 
 @media screen and (max-width: 768px) {
     #recent-posts > .recent-post-item {
@@ -3592,587 +3369,143 @@ blockquote.pullquote.right {
     background-color: #5cb85c
 }
 
-.note {
-    position: relative;
-    margin: 0 0 1rem;
-    padding: 15px;
-    border-radius: 3px
-}
-
-.note.icon {
-    padding-left: 2.25rem
+.search-dialog {
+    position: fixed;
+    top: 5rem;
+    left: 50%;
+    z-index: 1001;
+    display: none;
+    margin-left: -15rem;
+    padding: 1rem;
+    width: 30rem;
+    background: var(--search-bg);
+    border-radius: 5px
 }
 
-.note > .note-icon {
-    position: absolute;
-    top: calc(50% - .4rem);
-    left: .7rem;
-    font-size: larger
+@media screen and (max-width: 768px) {
+    .search-dialog {
+        top: 0;
+        left: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%
+    }
 }
 
-.note.blue:not(.disabled) {
-    border-left-color: #428bca !important
+.search-dialog hr {
+    margin: 1rem auto
 }
 
-.note.blue:not(.disabled).modern {
-    color: #428bca;
-    border-left-color: transparent !important
+.search-dialog span.search-close-button {
+    position: absolute;
+    top: .8rem;
+    right: 1rem;
+    color: #858585;
+    font-size: 1.4em;
+    line-height: 1;
+    cursor: pointer;
+    transition: color .2s ease-in-out 0s
 }
 
-.note.blue:not(.disabled):not(.simple) {
-    background: #e3eef7 !important
+.search-dialog span.search-close-button:hover {
+    color: #307af6
 }
 
-.note.blue > .note-icon {
-    color: #428bca
+.search-dialog__title {
+    padding: 0 0 .7rem;
+    color: #307af6;
+    font-size: 1.4em;
+    line-height: 1
 }
 
-.note.pink:not(.disabled) {
-    border-left-color: #ff69b4 !important
+#search-mask {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: none;
+    background: rgba(0, 0, 0, .6)
 }
 
-.note.pink:not(.disabled).modern {
-    color: #ff69b4;
-    border-left-color: transparent !important
+#algolia-search .search-dialog {
+    animation: slide-in .6s ease 0s 1 normal none running
 }
 
-.note.pink:not(.disabled):not(.simple) {
-    background: #ffe9f4 !important
+#algolia-search .search-dialog .ais-search-box {
+    margin: 0 auto;
+    max-width: 100%;
+    width: 100%
 }
 
-.note.pink > .note-icon {
-    color: #ff69b4
+#algolia-search .search-dialog .ais-search-box input {
+    padding: .25rem .7rem;
+    outline: 0;
+    border: 2px solid #307af6;
+    border-radius: 2rem;
+    background: var(--sco-secondbg);
+    color: var(--search-input-color)
 }
 
-.note.red:not(.disabled) {
-    border-left-color: red !important
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item {
+    position: relative;
+    padding-left: 1.2rem
 }
 
-.note.red:not(.disabled).modern {
-    color: red;
-    border-left-color: transparent !important
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item:hover::before {
+    border-color: #ff7242
 }
 
-.note.red:not(.disabled):not(.simple) {
-    background: #ffd9d9 !important
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item::before {
+    position: absolute;
+    top: .53em;
+    left: 0;
+    width: .5em;
+    height: .5em;
+    border: .15rem solid #307af6;
+    border-radius: .5em;
+    background: 0 0;
+    content: "";
+    line-height: .5em;
+    transition: all .2s ease-in-out 0s
 }
 
-.note.red > .note-icon {
-    color: red
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a {
+    display: block;
+    color: var(--search-result-title);
+    cursor: pointer
 }
 
-.note.purple:not(.disabled) {
-    border-left-color: #6f42c1 !important
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a:hover {
+    color: #307af6
 }
 
-.note.purple:not(.disabled).modern {
-    color: #6f42c1;
-    border-left-color: transparent !important
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item em {
+    color: #f47466;
+    font-weight: 700
 }
 
-.note.purple:not(.disabled):not(.simple) {
-    background: #e9e3f6 !important
+#algolia-search .search-dialog .ais-pagination.pagination {
+    margin: .8rem 0 0;
+    padding: 0;
+    text-align: center
 }
 
-.note.purple > .note-icon {
-    color: #6f42c1
+#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item {
+    margin: 0 .2rem;
+    padding: 0
 }
 
-.note.orange:not(.disabled) {
-    border-left-color: #ff8c00 !important
+#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item a {
+    display: inline-block;
+    min-width: 1.2rem;
+    height: 1.2rem;
+    text-align: center;
+    line-height: 1.2rem
 }
 
-.note.orange:not(.disabled).modern {
-    color: #ff8c00;
-    border-left-color: transparent !important
-}
-
-.note.orange:not(.disabled):not(.simple) {
-    background: #ffeed9 !important
-}
-
-.note.orange > .note-icon {
-    color: #ff8c00
-}
-
-.note.green:not(.disabled) {
-    border-left-color: #5cb85c !important
-}
-
-.note.green:not(.disabled).modern {
-    color: #5cb85c;
-    border-left-color: transparent !important
-}
-
-.note.green:not(.disabled):not(.simple) {
-    background: #e7f4e7 !important
-}
-
-.note.green > .note-icon {
-    color: #5cb85c
-}
-
-.note.simple {
-    border-width: 1px 1px 1px 5px;
-    border-style: solid;
-    border-color: #eee;
-    border-image: initial
-}
-
-.note.modern {
-    background-color: #f5f5f5;
-    color: #4c4948;
-    border: 1px solid transparent !important
-}
-
-.note.flat {
-    border-top: initial;
-    border-right: initial;
-    border-bottom: initial;
-    border-image: initial;
-    border-left: 5px solid #eee;
-    background-color: #f9f9f9;
-    color: #4c4948
-}
-
-.note h2, .note h3, .note h4, .note h5, .note h6 {
-    margin-top: 3px;
-    margin-bottom: 0;
-    border-bottom: initial;
-    padding-top: 0 !important
-}
-
-.note blockquote:first-child, .note img:first-child, .note ol:first-child, .note p:first-child, .note pre:first-child, .note table:first-child, .note ul:first-child {
-    margin-top: 0 !important
-}
-
-.note blockquote:last-child, .note img:last-child, .note ol:last-child, .note p:last-child, .note pre:last-child, .note table:last-child, .note ul:last-child {
-    margin-bottom: 0 !important;
-    font-size: 14px !important
-}
-
-.note:not(.no-icon) {
-    padding-left: 2.25rem
-}
-
-.note:not(.no-icon)::before {
-    position: absolute;
-    top: calc(50% - 19px);
-    left: .7rem;
-    font-size: larger
-}
-
-.note.default.flat {
-    background: #f7f7f7
-}
-
-.note.default.modern {
-    border-color: #e1e1e1;
-    background: #f3f3f3;
-    color: #666
-}
-
-.note.default.modern a:not(.btn) {
-    color: #666
-}
-
-.note.default.modern a:not(.btn):hover {
-    color: #454545
-}
-
-.note.default:not(.modern) {
-    border-left-color: #777
-}
-
-.note.default:not(.modern) h2, .note.default:not(.modern) h3, .note.default:not(.modern) h4, .note.default:not(.modern) h5, .note.default:not(.modern) h6 {
-    color: #777
-}
-
-.note.default:not(.no-icon)::before {
-    content: ""
-}
-
-.note.default:not(.no-icon):not(.modern)::before {
-    color: #777
-}
-
-.note.primary.flat {
-    background: #f5f0fa
-}
-
-.note.primary.modern {
-    border-color: #e1c2ff;
-    background: #f3daff;
-    color: #6f42c1
-}
-
-.note.primary.modern a:not(.btn) {
-    color: #6f42c1
-}
-
-.note.primary.modern a:not(.btn):hover {
-    color: #453298
-}
-
-.note.primary:not(.modern) {
-    border-left-color: #6f42c1
-}
-
-.note.primary:not(.modern) h2, .note.primary:not(.modern) h3, .note.primary:not(.modern) h4, .note.primary:not(.modern) h5, .note.primary:not(.modern) h6 {
-    color: #6f42c1
-}
-
-.note.primary:not(.no-icon)::before {
-    content: "\e060"
-}
-
-.note.primary:not(.no-icon):not(.modern)::before {
-    color: #6f42c1
-}
-
-.note.info.flat {
-    background: #eef7fa
-}
-
-.note.info.modern {
-    border-color: #b3e5ef;
-    background: #d9edf7;
-    color: #31708f
-}
-
-.note.info.modern a:not(.btn) {
-    color: #31708f
-}
-
-.note.info.modern a:not(.btn):hover {
-    color: #215761
-}
-
-.note.info:not(.modern) {
-    border-left-color: #428bca
-}
-
-.note.info:not(.modern) h2, .note.info:not(.modern) h3, .note.info:not(.modern) h4, .note.info:not(.modern) h5, .note.info:not(.modern) h6 {
-    color: #428bca
-}
-
-.note.info:not(.no-icon)::before {
-    content: ""
-}
-
-.note.info:not(.no-icon):not(.modern)::before {
-    color: #428bca
-}
-
-.note.success.flat {
-    background: #eff8f0
-}
-
-.note.success.modern {
-    border-color: #d0e6be;
-    background: #dff0d8;
-    color: #3c763d
-}
-
-.note.success.modern a:not(.btn) {
-    color: #3c763d
-}
-
-.note.success.modern a:not(.btn):hover {
-    color: #32562c
-}
-
-.note.success:not(.modern) {
-    border-left-color: #5cb85c
-}
-
-.note.success:not(.modern) h2, .note.success:not(.modern) h3, .note.success:not(.modern) h4, .note.success:not(.modern) h5, .note.success:not(.modern) h6 {
-    color: #5cb85c
-}
-
-.note.success:not(.no-icon)::before {
-    content: ""
-}
-
-.note.success:not(.no-icon):not(.modern)::before {
-    color: #5cb85c
-}
-
-.note.warning.flat {
-    background: #fdf8ea
-}
-
-.note.warning.modern {
-    border-color: #fae4cd;
-    background: #fcf4e3;
-    color: #8a6d3b
-}
-
-.note.warning.modern a:not(.btn) {
-    color: #8a6d3b
-}
-
-.note.warning.modern a:not(.btn):hover {
-    color: #714f30
-}
-
-.note.warning:not(.modern) {
-    border-left-color: var(--sco-orange)
-}
-
-.note.warning:not(.modern) h2, .note.warning:not(.modern) h3, .note.warning:not(.modern) h4, .note.warning:not(.modern) h5, .note.warning:not(.modern) h6 {
-    color: var(--sco-orange)
-}
-
-.note.warning:not(.no-icon)::before {
-    content: "\e067"
-}
-
-.note.warning:not(.no-icon):not(.modern)::before {
-    color: var(--sco-orange)
-}
-
-.note.danger.flat {
-    background: #fcf1f2
-}
-
-.note.danger.modern {
-    border-color: #ebcdd2;
-    background: #f2dfdf;
-    color: #a94442
-}
-
-.note.danger.modern a:not(.btn) {
-    color: #a94442
-}
-
-.note.danger.modern a:not(.btn):hover {
-    color: #84333f
-}
-
-.note.danger:not(.modern) {
-    border-left-color: #d9534f
-}
-
-.note.danger:not(.modern) h2, .note.danger:not(.modern) h3, .note.danger:not(.modern) h4, .note.danger:not(.modern) h5, .note.danger:not(.modern) h6 {
-    color: #d9534f
-}
-
-.note.danger:not(.no-icon)::before {
-    content: ""
-}
-
-.note.danger:not(.no-icon):not(.modern)::before {
-    color: #d9534f
-}
-
-#article-container .tabs {
-    position: relative;
-    margin: 0 0 1rem;
-    border-right: 1px solid var(--tab-border-color);
-    border-bottom: 1px solid var(--tab-border-color);
-    border-left: 1px solid var(--tab-border-color)
-}
-
-#article-container .tabs > .nav-tabs {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-    background: var(--tab-botton-bg)
-}
-
-#article-container .tabs > .nav-tabs > .tab {
-    margin: 4px;
-    padding: 0;
-    list-style: none
-}
-
-@media screen and (max-width: 768px) {
-    #article-container .tabs > .nav-tabs > .tab {
-        -webkit-box-flex: 1;
-        flex-grow: 1
-    }
-}
-
-#article-container .tabs > .nav-tabs > .tab button i {
-    width: 1.5em
-}
-
-#article-container .tabs > .nav-tabs > .tab.active button {
-    border-top: 2px solid #307af6;
-    background: var(--tab-button-active-bg);
-    cursor: default
-}
-
-#article-container .tabs > .nav-tabs > .tab:not(.active) button:hover {
-    border-top: 2px solid var(--tab-button-hover-bg);
-    background: var(--tab-button-hover-bg)
-}
-
-#article-container .tabs > .tab-contents .tab-item-content {
-    position: relative;
-    display: none;
-    padding: 1.8rem 1.2rem;
-    background: var(--sco-background);
-    border: var(--style-border-always)
-}
-
-@media screen and (max-width: 768px) {
-    #article-container .tabs > .tab-contents .tab-item-content {
-        padding: 1.2rem .7rem
-    }
-}
-
-#article-container .tabs > .tab-contents .tab-item-content.active {
-    display: block;
-    animation: .5s ease 0s 1 normal none running tabshow
-}
-
-#article-container .tabs .tab-to-top {
-    position: relative;
-    display: block;
-    margin: 16px 0 0 auto;
-    color: #99a9bf
-}
-
-.search-dialog {
-    position: fixed;
-    top: 5rem;
-    left: 50%;
-    z-index: 1001;
-    display: none;
-    margin-left: -15rem;
-    padding: 1rem;
-    width: 30rem;
-    background: var(--search-bg);
-    border-radius: 5px
-}
-
-@media screen and (max-width: 768px) {
-    .search-dialog {
-        top: 0;
-        left: 0;
-        margin: 0;
-        width: 100%;
-        height: 100%
-    }
-}
-
-.search-dialog hr {
-    margin: 1rem auto
-}
-
-.search-dialog span.search-close-button {
-    position: absolute;
-    top: .8rem;
-    right: 1rem;
-    color: #858585;
-    font-size: 1.4em;
-    line-height: 1;
-    cursor: pointer;
-    transition: color .2s ease-in-out 0s
-}
-
-.search-dialog span.search-close-button:hover {
-    color: #307af6
-}
-
-.search-dialog__title {
-    padding: 0 0 .7rem;
-    color: #307af6;
-    font-size: 1.4em;
-    line-height: 1
-}
-
-#search-mask {
-    position: fixed;
-    inset: 0;
-    z-index: 1000;
-    display: none;
-    background: rgba(0, 0, 0, .6)
-}
-
-#algolia-search .search-dialog {
-    animation: slide-in .6s ease 0s 1 normal none running
-}
-
-#algolia-search .search-dialog .ais-search-box {
-    margin: 0 auto;
-    max-width: 100%;
-    width: 100%
-}
-
-#algolia-search .search-dialog .ais-search-box input {
-    padding: .25rem .7rem;
-    outline: 0;
-    border: 2px solid #307af6;
-    border-radius: 2rem;
-    background: var(--sco-secondbg);
-    color: var(--search-input-color)
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item {
-    position: relative;
-    padding-left: 1.2rem
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item:hover::before {
-    border-color: #ff7242
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item::before {
-    position: absolute;
-    top: .53em;
-    left: 0;
-    width: .5em;
-    height: .5em;
-    border: .15rem solid #307af6;
-    border-radius: .5em;
-    background: 0 0;
-    content: "";
-    line-height: .5em;
-    transition: all .2s ease-in-out 0s
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a {
-    display: block;
-    color: var(--search-result-title);
-    cursor: pointer
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a:hover {
-    color: #307af6
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item em {
-    color: #f47466;
-    font-weight: 700
-}
-
-#algolia-search .search-dialog .ais-pagination.pagination {
-    margin: .8rem 0 0;
-    padding: 0;
-    text-align: center
-}
-
-#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item {
-    margin: 0 .2rem;
-    padding: 0
-}
-
-#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item a {
-    display: inline-block;
-    min-width: 1.2rem;
-    height: 1.2rem;
-    text-align: center;
-    line-height: 1.2rem
-}
-
-#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item.current a {
-    background: #0079ff;
-    color: #eee;
-    cursor: default
+#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item.current a {
+    background: #0079ff;
+    color: #eee;
+    cursor: default
 }
 
 #algolia-search .search-dialog .algolia-logo {
@@ -6372,10 +5705,6 @@ li.tree-list-item {
     color: var(--sco-secondtext)
 }
 
-.title-h2-a a.random-post-start {
-    opacity: .6
-}
-
 #card-funds .funds-list::-webkit-scrollbar {
     display: none !important
 }
@@ -7233,7 +6562,6 @@ div#banners {
     height: 24px;
     width: 44px;
     content: "";
-    background: url(https://p.zhheo.com/20235ba0ff2cde251cd0819f60a48cf9cc71082802.png) no-repeat;
     background-size: 38px 24px;
     position: absolute;
     top: 0;
@@ -7340,48 +6668,6 @@ a.categoryButton:hover {
     background-position: 100% 0
 }
 
-#category-bar {
-    padding: .4rem 1rem .4rem .7rem;
-    background: var(--sco-card-bg);
-    border-radius: 12px;
-    display: flex;
-    white-space: nowrap;
-    overflow: hidden;
-    margin-bottom: 1rem;
-    border: var(--style-border);
-    transition: .3s;
-    width: 100%;
-    justify-content: space-between;
-    -webkit-user-select: none;
-    align-items: center
-}
-
-@media screen and (min-width: 1300px) {
-    #category-bar:hover {
-        border: var(--style-border-hover);
-        box-shadow: var(--sco-shadow-main)
-    }
-
-    .category-in-bar-tips {
-        margin-bottom: .25rem
-    }
-}
-
-@media screen and (max-width: 768px) {
-    #category-bar {
-        border-radius: 0;
-        background: var(--sco-background);
-        margin-bottom: 0;
-        position: -webkit-sticky;
-        position: sticky;
-        top: 60px;
-        z-index: 1;
-        padding: 0 1rem 0 1rem;
-        height: 50px;
-        margin-top: 0;
-        align-items: center
-    }
-}
 
 #category #category-bar {
     padding: 0;
@@ -7946,12 +7232,6 @@ span.recent-post-top-text {
         box-shadow: var(--sco-shadow-border)
     }
 
-    #category-bar {
-        margin-bottom: .75rem;
-        box-shadow: var(--sco-shadow-border);
-        animation: slide-in .6s .3s backwards
-    }
-
     #category #category-bar {
         animation: none
     }
@@ -7990,13 +7270,6 @@ span.recent-post-top-text {
         width: 100%
     }
 
-    #bbTimeList {
-        margin-top: 0;
-        border-radius: 0;
-        background: var(--sco-background);
-        padding: .5rem 20px
-    }
-
     a.article-meta__categories {
         left: 12px !important;
         top: 12px !important;
@@ -8004,10 +7277,6 @@ span.recent-post-top-text {
         padding: 2px 9px !important;
         font-size: 12px
     }
-
-    #bbTimeList {
-        margin-bottom: 0
-    }
 }
 
 @media screen and (min-width: 1300px) {
@@ -9107,6 +8376,12 @@ a.extend.prev {
     margin-right: .8rem
 }
 
+.meta-secondline > span {
+    opacity: .6;
+    transition: .3s;
+    margin-right: 1.1rem;
+}
+
 .meta-secondline span {
     display: flex;
     align-items: center;
@@ -9470,190 +8745,13 @@ span.post-meta-position {
     padding-left: 1.3rem
 }
 
-#article-container ul > li:not(.tab):before {
-    border: .21em solid var(--sco-lighttext);
-    background: var(--sco-lighttext)
-}
-
-#article-container ol, #article-container ul {
-    padding: 0
-}
-
-#article-container .tabs {
-    margin: 1rem 0 !important;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: var(--sco-shadow-border);
-    padding: 8px;
-    background: var(--sco-card-bg);
-    border: var(--style-border)
-}
-
-#article-container .tabs .nav-tabs {
-    background: var(--sco-card-bg);
-    padding: 16px;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    flex-direction: row
-}
-
-@media screen and (max-width: 768px) {
-    #article-container .tabs .nav-tabs {
-        padding: 0;
-        margin-bottom: 8px
-    }
-}
-
-#article-container .tabs > .nav-tabs > .tab.active button {
-    border: var(--style-border-hover-always);
-    background: var(--sco-background);
-    border-radius: 8px
-}
-
-#article-container .tabs > .nav-tabs > .tab button {
-    -webkit-transition: all 0s;
-    background: var(--sco-secondbg);
-    transition: .3s;
-    border: var(--style-border-always);
-    border-radius: 8px;
-    font-size: 1.2em;
-    line-height: 1;
-    padding: 8px 16px;
-    display: flex;
-    width: 100%;
-    justify-content: center;
-    align-items: center;
-    color: var(--sco-fontcolor)
-}
-
-#article-container .tabs > .nav-tabs > .tab:not(.active) button:hover {
-    background: var(--sco-main);
-    color: var(--sco-white);
-    transition: .3s;
-    border: var(--style-border-hover-always)
-}
-
-.tab-item-content {
-    background: var(--sco-card-bg)
-}
-
-#article-container .tabs {
-    border: 3px solid var(--sco-secondbg) !important
-}
-
-#article-container .tabs > .tab-contents .tab-item-content.active {
-    animation: tabshow 0s;
-    -webkit-animation: tabshow 0s;
-    padding: 1.2rem 1.2rem;
-    border-radius: 8px
-}
-
-@media screen and (max-width: 768px) {
-    #article-container .tabs > .tab-contents .tab-item-content.active {
-        padding: .5rem .5rem
-    }
-}
-
-.tab-contents {
-    border-radius: 8px;
-    overflow: hidden
-}
-
-details:not(.tk-admin-config-group) {
-    display: block;
-    position: relative;
-    margin-bottom: 1rem;
-    min-height: 54px;
-    overflow: hidden;
-    border-radius: 12px;
-    border: var(--style-border);
-    transition: border .3s
-}
-
-details:not(.tk-admin-config-group):hover {
-    border: var(--style-border-hover-always)
-}
-
-details:not(.tk-admin-config-group) summary {
-    position: absolute;
-    padding: .5rem 1rem;
-    background: var(--sco-card-bg);
-    margin: 0;
-    transition: .3s;
-    box-shadow: var(--sco-shadow-border);
-    left: 0;
-    width: 100%;
-    font-weight: 700;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis
-}
-
-details:not(.tk-admin-config-group) > :nth-child(2) {
-    margin-top: calc(54px + 1rem) !important
-}
-
-details[open]:not(.tk-admin-config-group) summary {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-details:not(.tk-admin-config-group) summary::before {
-    content: '';
-    padding: 4px
-}
-
-details:not(.tk-admin-config-group) summary:hover {
-    cursor: pointer;
-    background: var(--sco-main);
-    color: var(--sco-white);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-main)
-}
-
-details:not(.tk-admin-config-group) summary:focus {
-    outline: 0
-}
-
-details:not(.tk-admin-config-group) summary::marker {
-    color: var(--sco-main);
-    transition: .3s
-}
-
-details[open]:not(.tk-admin-config-group) summary::marker {
-    color: var(--sco-white)
-}
-
-details:not(.tk-admin-config-group) summary:hover::marker {
-    color: var(--sco-white)
-}
-
-details[open]:not(.tk-admin-config-group) {
-    border-radius: 12px;
-    border: var(--style-border-hover-always);
-    padding: 0 1.5rem;
-    background: var(--sco-card-bg)
-}
-
-details:not(.tk-admin-config-group) summary:hover:after {
-    position: absolute;
-    content: '+';
-    text-align: center;
-    top: calc(50% - 2px);
-    transform: translateY(-50%);
-    right: 16px;
-    line-height: 1
-}
-
-details[open]:not(.tk-admin-config-group) > summary:hover:after {
-    content: '-'
+#article-container ul > li:not(.tab):before {
+    border: .21em solid var(--sco-lighttext);
+    background: var(--sco-lighttext)
 }
 
-@media screen and (max-width: 768px) {
-    details[open]:not(.tk-admin-config-group) {
-        padding: 0 16px
-    }
+#article-container ol, #article-container ul {
+    padding: 0
 }
 
 #article-container ul > li:not(.tab):hover:before {
@@ -9776,114 +8874,6 @@ b, strong {
     }
 }
 
-.note.warning:not(.no-icon):not(.modern)::before {
-    display: flex;
-    align-items: center;
-    height: 30px;
-    color: var(--sco-yellow)
-}
-
-.note.warning:not(.modern) {
-    border-radius: 8px;
-    border-width: 1px;
-    border-color: var(--sco-yellow);
-    box-shadow: var(--sco-shadow-border);
-    background: var(--sco-card-bg)
-}
-
-#article-container .tag-Link {
-    background: var(--sco-secondbg);
-    border-radius: 8px !important;
-    display: flex;
-    border: var(--style-border);
-    flex-direction: column;
-    padding: .3rem 1rem .6rem;
-    border-width: 1px !important;
-    margin-top: 1rem
-}
-
-#article-container .tag-Link:hover {
-    border: var(--style-border-hover)
-}
-
-#article-container .tag-Link .tag-link-tips {
-    border-bottom: var(--style-border-always);
-    padding-bottom: 4px;
-    font-size: .6rem;
-    color: var(--sco-gray);
-    font-weight: 400;
-    pointer-events: none
-}
-
-#article-container .tag-Link:hover .tag-link-tips {
-    color: var(--sco-main)
-}
-
-#article-container .tag-Link .tag-link-bottom {
-    display: flex;
-    margin-top: .5rem;
-    align-items: center;
-    justify-content: space-around;
-    pointer-events: none
-}
-
-#article-container .tag-Link .tag-link-bottom .tag-link-left {
-    width: 60px;
-    min-width: 60px;
-    height: 60px;
-    background-size: cover !important;
-    border-radius: 8px;
-    background: var(--sco-card-bg);
-    pointer-events: none;
-    display: flex
-}
-
-#article-container .tag-Link .tag-link-bottom .tag-link-left i {
-    padding: 0;
-    margin: auto;
-    font-size: 24px;
-    color: var(--sco-fontcolor)
-}
-
-#article-container .tag-Link .tag-link-bottom .tag-link-right {
-    margin-left: 1rem;
-    pointer-events: none
-}
-
-#article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-title {
-    font-size: 16px;
-    line-height: 1.2;
-    pointer-events: none;
-    word-break: break-all;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden
-}
-
-#article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-sitename {
-    font-size: .7rem;
-    color: var(--sco-gray);
-    font-weight: 400;
-    margin-top: 8px;
-    pointer-events: none;
-    line-height: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap
-}
-
-#article-container .tag-Link:hover .tag-link-bottom .tag-link-right .tag-link-sitename {
-    color: var(--sco-main)
-}
-
-#article-container .tag-Link .tag-link-bottom i {
-    margin-left: auto;
-    padding-left: .5rem;
-    pointer-events: none
-}
-
 h1, h2, h3, h4, h5, h6 {
     margin-top: 1rem;
     padding-top: 0;
@@ -12017,299 +11007,88 @@ figure.gallery-group:hover .gallery-group-name::after {
 #tag #tag-page-tags a:hover {
     color: var(--sco-white) !important;
     background: var(--sco-theme);
-    box-shadow: var(--sco-shadow-theme)
-}
-
-.article-sort-item:before {
-    display: none
-}
-
-.article-sort-title:before {
-    display: none
-}
-
-.article-sort-title:after {
-    display: none
-}
-
-.article-sort {
-    border: none
-}
-
-.article-sort {
-    margin-left: 0;
-    padding-left: 0
-}
-
-.article-sort-title {
-    margin-left: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    font-weight: 700;
-    font-size: 2em
-}
-
-.article-sort-title sup {
-    margin-left: 4px;
-    font-size: 16px;
-    font-weight: 700;
-    opacity: .4;
-    top: -1em
-}
-
-.article-sort-item {
-    margin: 0 0 1rem 0;
-    overflow: hidden;
-    border-radius: 12px
-}
-
-@media screen and (max-width: 768px) {
-    .article-sort-item-info a {
-        white-space: inherit !important
-    }
-}
-
-.article-sort-item.year {
-    font-size: .8rem;
-    color: var(--sco-secondtext);
-    margin-bottom: .2rem
-}
-
-.article-sort-item-img img:hover {
-    transform: scale(1)
-}
-
-.article-sort-item-info {
-    padding: 0 .8rem;
-    display: flex;
-    flex-direction: column
-}
-
-.article-sort-item-time {
-    order: 1;
-    margin-top: 4px;
-    color: var(--sco-secondtext)
-}
-
-.article-sort-item-title {
-    order: 0;
-    font-weight: 700
-}
-
-.article-sort-item-title:hover {
-    transform: translateX(0);
-    color: var(--sco-hovertext)
-}
-
-#random-post {
-    min-height: 32px;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    box-shadow: var(--sco-shadow-border);
-    padding: 20px 30px;
-    border-radius: 12px;
-    margin-top: 8px
-}
-
-.random-friends-post {
-    text-decoration: none;
-    border-bottom: 2px solid var(--sco-lighttext);
-    color: var(--sco-fontcolor);
-    font-weight: 700;
-    padding: 0 4px
-}
-
-.random-friends-post:hover {
-    text-decoration: none;
-    border-bottom: 2px solid var(--sco-none);
-    color: var(--sco-white);
-    background: var(--sco-main);
-    border-radius: 4px;
-    box-shadow: var(--sco-shadow-main)
-}
-
-.random-post-start {
-    transition-duration: .3s
-}
-
-.random-post-start:hover {
-    color: var(--sco-hovertext)
-}
-
-.flink#article-container .flink-list {
-    padding: 0;
-    margin: .5rem -6px 1rem -6px;
-    overflow-x: hidden
-}
-
-.flink#article-container .flink-desc {
-    margin: 0;
-    color: var(--sco-secondtext)
-}
-
-.flink#article-container .flink-list > .flink-list-item a .flink-item-desc {
-    white-space: normal;
-    padding: 5px 10px 16px 0;
-    color: var(--sco-fontcolor);
-    text-align: left;
-    height: 40px;
-    text-overflow: ellipsis;
-    opacity: .7;
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2
-}
-
-.flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc {
-    color: var(--sco-white)
-}
-
-.flink-list-item .flink-item-info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: calc(100% - 90px);
-    height: fit-content
-}
-
-.flink-list-item:hover .flink-item-info {
-    min-width: calc(100% - 20px)
-}
-
-.flink#article-container .flink-list > .flink-list-item a .flink-item-name {
-    text-align: left;
-    font-size: 19px;
-    line-height: 20px;
-    color: var(--sco-fontcolor)
-}
-
-.flink#article-container .flink-list > .flink-list-item:hover a .flink-item-name {
-    color: var(--sco-white)
-}
-
-.flink#article-container .flink-list > .flink-list-item a {
-    display: flex;
-    border: none;
-    width: 100%;
-    height: 100%;
-    align-items: center
-}
-
-.flink#article-container .flink-list > .flink-list-item a:hover {
-    background: 0 0
-}
-
-.flink#article-container .flink-list > .flink-list-item a img {
-    border-radius: 32px;
-    margin: 15px 20px 15px 15px;
-    transition: .3s;
-    background: var(--sco-background);
-    min-width: 60px;
-    min-height: 60px
+    box-shadow: var(--sco-shadow-theme)
 }
 
-.flink#article-container .flink-list > .flink-list-item:hover a img {
-    transition: .6s;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    margin: .5rem;
-    min-width: 0;
-    min-height: 0
+.article-sort-item:before {
+    display: none
 }
 
-.flink#article-container .flink-list > .flink-list-item a span {
-    transition: .3s
+.article-sort-title:before {
+    display: none
 }
 
-.flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc {
-    overflow: hidden;
-    width: 100%
+.article-sort-title:after {
+    display: none
 }
 
-.flink#article-container .flink-list > .flink-list-item {
-    margin: 6px 6px;
-    transition: .3s;
-    border-radius: 12px;
-    transition-timing-function: ease-in-out;
-    position: relative;
-    width: calc(20% - 12px);
-    border: var(--style-border);
-    box-shadow: var(--sco-shadow-border);
-    background: var(--sco-card-bg);
-    display: flex
+.article-sort {
+    border: none
 }
 
-.flink#article-container .flink-list > .flink-list-item:hover {
-    transform: scale(1);
-    background: var(--sco-theme);
-    border: var(--style-border-hover);
-    box-shadow: var(--sco-shadow-main)
+.article-sort {
+    margin-left: 0;
+    padding-left: 0
 }
 
-.gallery-group figcaption p {
-    line-height: 1.5 !important
+.article-sort-title {
+    margin-left: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    font-weight: 700;
+    font-size: 2em
 }
 
-.flink#article-container .site-card .info .title {
-    color: var(--sco-fontcolor);
-    text-align: left
+.article-sort-title sup {
+    margin-left: 4px;
+    font-size: 16px;
+    font-weight: 700;
+    opacity: .4;
+    top: -1em
 }
 
-.flink#article-container .site-card:hover .info .title {
-    color: var(--sco-white)
+.article-sort-item {
+    margin: 0 0 1rem 0;
+    overflow: hidden;
+    border-radius: 12px
 }
 
-.flink#article-container .site-card:hover .info {
-    height: 120px
+@media screen and (max-width: 768px) {
+    .article-sort-item-info a {
+        white-space: inherit !important
+    }
 }
 
-.flink#article-container .site-card .site-card-text {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start
+.article-sort-item.year {
+    font-size: .8rem;
+    color: var(--sco-secondtext);
+    margin-bottom: .2rem
 }
 
-.flink#article-container .site-card .info .desc {
-    font-size: .7rem;
-    color: var(--sco-fontcolor);
-    opacity: .7;
-    transition: .3s;
-    text-align: left
+.article-sort-item-img img:hover {
+    transform: scale(1)
 }
 
-.flink#article-container .site-card:hover .info .desc {
-    color: var(--sco-white)
+.article-sort-item-info {
+    padding: 0 .8rem;
+    display: flex;
+    flex-direction: column
 }
 
-@media screen and (min-width: 768px) {
-    .flink#article-container .site-card:hover .info .desc {
-        -webkit-line-clamp: 4
-    }
-
-    .flink#article-container .site-card:hover .info .desc {
-        transition: .3s;
-        color: var(--sco-white);
-        width: 100%
-    }
+.article-sort-item-time {
+    order: 1;
+    margin-top: 4px;
+    color: var(--sco-secondtext)
+}
 
-    .flink#article-container .site-card:hover .info {
-        background: var(--sco-theme)
-    }
+.article-sort-item-title {
+    order: 0;
+    font-weight: 700
 }
 
-.flink#article-container .site-card {
-    border: var(--style-border);
-    border-radius: 12px;
-    transition: .3s;
-    transition-timing-function: ease-in-out;
-    overflow: hidden;
-    height: 200px;
-    position: relative;
-    width: calc(100% / 7 - 16px);
-    background: var(--sco-card-bg);
-    box-shadow: var(--sco-shadow-border)
+.article-sort-item-title:hover {
+    transform: translateX(0);
+    color: var(--sco-hovertext)
 }
 
 .site-card-tag {
@@ -12358,85 +11137,6 @@ figure.gallery-group:hover .gallery-group-name::after {
     box-shadow: var(--sco-shadow-green)
 }
 
-.flink#article-container .site-card:hover .site-card-tag {
-    left: -50px
-}
-
-.flink-list-item:hover .site-card-tag {
-    left: -70px
-}
-
-.flink#article-container .site-card .info {
-    display: flex;
-    border: none;
-    padding: .5rem;
-    width: 100%;
-    height: 90px;
-    margin: 0;
-    border-radius: 0 0 12px 12px
-}
-
-.flink#article-container .site-card .img img {
-    border-radius: 0;
-    transform: scale(1.03);
-    transition: .3s;
-    margin: 0;
-    max-width: 100%
-}
-
-@media screen and (min-width: 769px) {
-    .flink#article-container .site-card:hover .img img {
-        transform: scale(1.1);
-        filter: brightness(.3)
-    }
-
-    .flink#article-container .site-card:hover .img {
-        height: 80px
-    }
-}
-
-#cf-more i {
-    font-style: normal
-}
-
-.flink#article-container .site-card .img {
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000);
-    border-radius: 0;
-    height: 120px;
-    width: 100%;
-    display: flex;
-    border: none;
-    padding: 0 !important
-}
-
-.flink#article-container .site-card .info img {
-    border-radius: 32px;
-    transition: .3s !important;
-    margin: 2px 8px 0 0;
-    width: 20px;
-    height: 20px;
-    min-width: 20px;
-    min-height: 20px;
-    background: var(--sco-secondbg)
-}
-
-.flink#article-container .site-card-group {
-    padding: 20px 0
-}
-
-.flink#article-container .site-card:hover .info img {
-    width: 0;
-    height: 0;
-    opacity: 0;
-    min-width: 0;
-    min-height: 0
-}
-
-.flink#article-container .site-card:hover {
-    border: var(--style-border-hover);
-    box-shadow: var(--sco-shadow-main)
-}
-
 .article-sort-item-info a {
     margin-right: auto;
     overflow: hidden;
@@ -12655,13 +11355,6 @@ div#sco-footer-bar .footer-bar-description {
     }
 }
 
-.timeline ul .list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between
-}
-
 .bb-info {
     display: inline;
     float: right;
@@ -12858,187 +11551,67 @@ a.bb-link-info:hover {
     flex-direction: column
 }
 
-.moments_post_time {
-    display: none
-}
-
-.moments_post_time i {
-    margin-right: 8px
-}
-
-.chart {
-    align-items: flex-start;
-    flex: 1;
-    width: 100px;
-    height: 60px;
-    margin: 20px
-}
-
-.moments-item-title {
-    font-weight: 700
-}
-
-.moments_post_info_number {
-    float: right
-}
-
-@media screen and (max-width: 500px) {
-    #info_user_pool {
-        padding: 10px;
-        flex-direction: column;
-        max-height: 200px
-    }
-
-    .chart {
-        flex: 0;
-        width: 100%;
-        height: 160px;
-        margin: 0
-    }
-}
-
-.moments-item-img {
-    width: 60px !important;
-    height: 60px !important
-}
-
-.moments-item-img img {
-    border-radius: 99px;
-    width: 80px;
-    height: 80px;
-    overflow: hidden
-}
-
-#info_user_pool {
-    background: var(--sco-secondbg);
-    border-radius: 12px !important;
-    margin-top: 1rem;
-    box-shadow: none !important
-}
-
-.moments-item {
-    margin-left: 0 !important;
-    box-shadow: none !important
-}
-
-.hexo-douban-item {
-    border-bottom: none !important;
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    box-shadow: var(--sco-shadow-border);
-    border-radius: 12px;
-    margin: 8px 0;
-    height: 160px;
-    min-height: 160px !important;
-    width: 49%;
-    overflow: hidden
-}
-
-@media screen and (min-width: 1300px) {
-    .hexo-douban-item {
-        width: 32%
-    }
-}
-
-#hexo-douban-item3 {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between
-}
-
-.hexo-douban-item .hexo-douban-picture a {
-    padding: 0 !important
-}
-
-.hexo-douban-item .hexo-douban-picture img {
-    margin: 0 !important;
-    height: 100% !important
-}
-
-.hexo-douban-tabs {
-    display: none
-}
-
-.hexo-douban-title a {
-    border-bottom: 0 !important
-}
-
-.hexo-douban-title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap
-}
-
-.hexo-douban-title a:hover {
-    color: var(--sco-lighttext) !important;
-    background: var(--sco-none) !important
+.moments_post_time {
+    display: none
 }
 
-.hexo-douban-pagination {
-    margin: auto;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center
+.moments_post_time i {
+    margin-right: 8px
 }
 
-span.hexo-douban-pagenum {
-    margin: 0 .5rem
+.chart {
+    align-items: flex-start;
+    flex: 1;
+    width: 100px;
+    height: 60px;
+    margin: 20px
 }
 
-.hexo-douban-title {
-    font-size: 1rem;
-    line-height: 1
+.moments-item-title {
+    font-weight: 700
 }
 
-.hexo-douban-title a {
-    padding: 0 !important
+.moments_post_info_number {
+    float: right
 }
 
-.hexo-douban-info {
-    padding-left: 130px !important;
-    margin-right: .5rem
-}
+@media screen and (max-width: 500px) {
+    #info_user_pool {
+        padding: 10px;
+        flex-direction: column;
+        max-height: 200px
+    }
 
-.hexo-douban-meta {
-    font-size: .7rem !important;
-    color: var(--sco-secondtext);
-    margin-top: .3rem;
-    line-height: 1.05
+    .chart {
+        flex: 0;
+        width: 100%;
+        height: 160px;
+        margin: 0
+    }
 }
 
-.hexo-douban-comments {
-    line-height: 1.2;
-    margin-top: .5rem;
-    font-size: .8rem !important;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical
+.moments-item-img {
+    width: 60px !important;
+    height: 60px !important
 }
 
-.hexo-douban-picture {
-    height: 100%;
-    top: 0 !important;
-    padding: 10px 0 10px 10px
+.moments-item-img img {
+    border-radius: 99px;
+    width: 80px;
+    height: 80px;
+    overflow: hidden
 }
 
-.hexo-douban-picture a img {
-    border-radius: 8px !important
+#info_user_pool {
+    background: var(--sco-secondbg);
+    border-radius: 12px !important;
+    margin-top: 1rem;
+    box-shadow: none !important
 }
 
-.hexo-douban-button {
-    width: 4rem;
-    height: 2rem;
-    line-height: 1.9rem;
-    border-radius: 8px !important;
-    background: var(--sco-card-bg);
-    box-shadow: var(--sco-shadow-lightblack);
-    border: var(--style-border);
-    margin: 0 .2rem;
-    border-bottom: var(--style-border) !important
+.moments-item {
+    margin-left: 0 !important;
+    box-shadow: none !important
 }
 
 .article-sort-item-time {
@@ -14247,7 +12820,6 @@ video.author-content-video {
 
 .author-content-item.single.like-movie {
     height: 19rem;
-    background: url(https://p.zhheo.com/202391f23ec6a5aea2a7ca8bd5ad79d0e9b5082502.png) no-repeat top;
     background-size: cover;
     color: var(--sco-white);
     overflow: hidden
@@ -14310,34 +12882,6 @@ video.author-content-video {
 
 .author-content.author-content-item.toolPage {
     height: 19rem;
-    background: url(https://p.zhheo.com/2023331f5bb47c063ef770c13ed9d1c2912b083802.png) no-repeat top;
-    background-size: cover;
-    color: var(--sco-white);
-    overflow: hidden;
-    margin-top: 0
-}
-
-.author-content.author-content-item.momentsPage {
-    height: 19rem;
-    background: url(https://p.zhheo.com/20234860bdbab0f500c3b0e0f1a21d3c166e081002.png) no-repeat top;
-    background-size: cover;
-    color: var(--sco-white);
-    overflow: hidden;
-    margin-top: 0
-}
-
-.author-content.author-content-item.essayPage {
-    height: 19rem;
-    background: url(https://p.zhheo.com/2023e02cff7c3ddef5c06b908fef079fbcfe081902.png) no-repeat center;
-    background-size: cover;
-    color: var(--sco-white);
-    overflow: hidden;
-    margin-top: 0
-}
-
-.author-content.author-content-item.equipment {
-    height: 19rem;
-    background: url(https://p.zhheo.com/kPJnWT22990681686042509223.png) no-repeat top;
     background-size: cover;
     color: var(--sco-white);
     overflow: hidden;
@@ -14822,112 +13366,6 @@ video.author-content-video {
     }
 }
 
-.rss-plan-list {
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -4px;
-    position: relative
-}
-
-.rss-plan-item.rss-plan-wechat {
-    background: #27c125;
-    overflow: hidden
-}
-
-.rss-plan-item.rss-plan-mail {
-    background: var(--sco-blue)
-}
-
-.rss-plan-item.rss-plan-rss {
-    background: var(--sco-orange)
-}
-
-.rss-plan-item {
-    border-radius: 12px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    min-width: 240px;
-    height: 240px;
-    margin: 4px auto;
-    overflow: hidden;
-    text-decoration: none;
-    width: calc(100% / 3 - 8px);
-    filter: brightness(1);
-    transition: .3s
-}
-
-.rss-plan-item:hover {
-    filter: brightness(1.1)
-}
-
-@media screen and (max-width: 1024px) {
-    .rss-plan-item {
-        width: calc(100% / 2 - 4px)
-    }
-
-    .rss-plan-item:first-child {
-        width: 100%
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .rss-plan-item {
-        width: 100%
-    }
-}
-
-.rss-plan-item:visited {
-    color: var(--sco-white)
-}
-
-.rss-plan-description {
-    font-size: 16px;
-    color: var(--sco-white);
-    margin: 26px 0 0 30px;
-    line-height: 20px
-}
-
-img.rss-plan-icon {
-    position: absolute;
-    bottom: -50px;
-    right: -20px;
-    height: 140px;
-    user-select: none;
-    -webkit-user-drag: none;
-    transition: all 1.2s cubic-bezier(.39, .575, .565, 1);
-    transform-origin: bottom right;
-    filter: blur(8px);
-    opacity: .6
-}
-
-.rss-plan-item:hover img.rss-plan-icon {
-    bottom: -40px;
-    right: -10px;
-    filter: blur(0);
-    opacity: 1
-}
-
-.rss-plan-info-group {
-    position: relative;
-    margin: 0 0 26px 30px;
-    color: var(--sco-white)
-}
-
-.rss-plan-title {
-    font-size: 36px;
-    font-weight: 700;
-    width: fit-content;
-    line-height: 1
-}
-
-.rss-plan-info {
-    width: fit-content;
-    opacity: .6
-}
-
 .pagination input {
     width: 40px;
     height: 40px;
@@ -15019,127 +13457,4 @@ a#toPageButton.haveValue:hover {
     .highlight .code pre .line span {
         font-size: 8px
     }
-}
-
-.equipment-item-content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -8px
-}
-
-.equipment-item-content-item {
-    width: calc(25% - 12px);
-    border-radius: 12px;
-    border: var(--style-border-always);
-    overflow: hidden;
-    margin: 8px 6px;
-    background: var(--sco-card-bg);
-    box-shadow: var(--sco-shadow-border);
-    min-height: 400px;
-    position: relative
-}
-
-@media screen and (max-width: 1200px) {
-    .equipment-item-content-item {
-        width: calc(50% - 12px)
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .equipment-item-content-item {
-        width: 100%
-    }
-}
-
-.equipment-item-content-item-info {
-    padding: 8px 16px 16px 16px;
-    margin-top: 12px
-}
-
-.equipment-item-content-item-name {
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 1;
-    margin-bottom: 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: pointer;
-    width: fit-content
-}
-
-.equipment-item-content-item-name:hover {
-    color: var(--sco-main)
-}
-
-.equipment-item-content-item-specification {
-    font-size: 12px;
-    color: var(--sco-secondtext);
-    line-height: 1;
-    margin-bottom: 12px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis
-}
-
-.equipment-item-content-item-description {
-    line-height: 20px;
-    color: var(--sco-secondtext);
-    height: 60px;
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    font-size: 14px
-}
-
-a.equipment-item-content-item-link {
-    font-size: 12px;
-    background: var(--sco-gray-op);
-    padding: 4px 8px;
-    border-radius: 8px;
-    cursor: pointer
-}
-
-a.equipment-item-content-item-link:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-h2.equipment-item-title {
-    line-height: 1
-}
-
-.equipment-item-description {
-    line-height: 1;
-    margin: 4px 0 8px 0;
-    color: var(--sco-secondtext)
-}
-
-.equipment-item-content-item-cover {
-    width: 100%;
-    height: 200px;
-    background: var(--sco-secondbg);
-    display: flex;
-    justify-content: center
-}
-
-img.equipment-item-content-item-image {
-    object-fit: cover;
-    height: 100%
-}
-
-div#equipment {
-    margin-top: 26px
-}
-
-.equipment-item-content-item-toolbar {
-    display: flex;
-    justify-content: space-between;
-    position: absolute;
-    bottom: 12px;
-    left: 0;
-    width: 100%;
-    padding: 0 16px
 }
\ No newline at end of file

From 4b76bf188e1124f299e70be7559eeca89943819d Mon Sep 17 00:00:00 2001
From: yife68 <2714344056@qq.com>
Date: Wed, 15 Nov 2023 20:39:05 +0800
Subject: [PATCH 07/43] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=20-=20?=
 =?UTF-8?q?=E5=85=AC=E4=BC=97=E5=8F=B7=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 同步更新为Heo最新样式
---
 layout/partial/compoment/aside/asideFlipCard.ejs | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/layout/partial/compoment/aside/asideFlipCard.ejs b/layout/partial/compoment/aside/asideFlipCard.ejs
index 500e46ec..5dfa8407 100755
--- a/layout/partial/compoment/aside/asideFlipCard.ejs
+++ b/layout/partial/compoment/aside/asideFlipCard.ejs
@@ -19,11 +19,13 @@
         top: 0;
         background: url("<%- theme.aside.flip.favicon || 'https://img.meuicat.com/blog/14.webp' %>") center center no-repeat;
         content: '';
-        background-size: cover
+        background-size: cover;
+        transition: .2s cubic-bezier(.45,.04,.43,1.21)
     }
     #aside-content .card-widget.card-platform:hover:before {
-        filter: blur(12px) saturate(1.5);
-        transition: .3s
+        top: 100%;
+        opacity: 0;
+        transition: .3s ease-out
     }
     #aside-content .card-widget #flip-wrapper {
         perspective: 1000;

From ed024181c1de0345e7b70c71fa933be1bf2c3001 Mon Sep 17 00:00:00 2001
From: yife68 <2714344056@qq.com>
Date: Wed, 15 Nov 2023 23:17:16 +0800
Subject: [PATCH 08/43] =?UTF-8?q?=E5=8D=B3=E5=88=BB=E7=9F=AD=E6=96=87?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增Leonus样式切换

注意：已更改主题配置项，在使用时需要打开对应开关
---
 _config.yml                                |   4 +-
 layout/index.ejs                           |   2 +-
 layout/page/not_configured.ejs             |  13 +
 layout/page/says.ejs                       |  43 +-
 layout/partial/compoment/inject/body.ejs   |   2 +-
 layout/partial/compoment/inject/head.ejs   |   2 +-
 layout/partial/compoment/says/banner.ejs   |   2 +-
 layout/partial/compoment/says/saysMeta.ejs |  10 +
 source/css/_page/homepage.styl             |   3 +
 source/css/_page/says.styl                 | 585 +++++++++++----------
 source/css/index.styl                      |  16 +-
 source/css/main.css                        |  13 -
 12 files changed, 377 insertions(+), 318 deletions(-)
 create mode 100644 layout/page/not_configured.ejs
 create mode 100644 layout/partial/compoment/says/saysMeta.ejs
 create mode 100644 source/css/_page/homepage.styl

diff --git a/_config.yml b/_config.yml
index db05fd87..7838c8cc 100755
--- a/_config.yml
+++ b/_config.yml
@@ -74,7 +74,6 @@ icon:
 
 # 首页顶部样式
 hometop:
-  bbtime: false # 即刻顶部是否开启
   banner:
     enable: false # 是否打开顶部banner
     title: 宁静致远<br>热爱生活 # 左上角显示文字
@@ -427,7 +426,8 @@ pwa:
 
 
 says:
-  enable: true
+  enable: false
+  home_mini: false # 主页的即刻轮播条
   style: 1 # 1：张洪heo样式 / 2：Leonus样式
 
 
diff --git a/layout/index.ejs b/layout/index.ejs
index 36dea13b..14c04ed1 100755
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -1,5 +1,5 @@
 <div id="home_top">
-    <% if(theme.hometop.bbtime){ %>
+    <% if(theme.says.home_mini){ %>
         <%- partial('partial/compoment/hometop/bbTimeList') %>
     <% } %>
     <% if(theme.hometop.banner.enable){ %>
diff --git a/layout/page/not_configured.ejs b/layout/page/not_configured.ejs
new file mode 100644
index 00000000..950053dd
--- /dev/null
+++ b/layout/page/not_configured.ejs
@@ -0,0 +1,13 @@
+<style>
+    .not-configured {
+        display: flex;
+        justify-content: center;
+        font-size: 18px;
+        font-weight: bold
+    }
+    .not-configured strong {
+        padding: 0 4px;
+        border-bottom: 2px dotted var(--sco-lighttext)
+    }
+</style>
+<div class="not-configured">请前往<strong>主题配置文件</strong>进行配置</div>
\ No newline at end of file
diff --git a/layout/page/says.ejs b/layout/page/says.ejs
index 1209686e..0c8af7b3 100755
--- a/layout/page/says.ejs
+++ b/layout/page/says.ejs
@@ -1,17 +1,26 @@
-<%- partial('partial/compoment/says/banner') %>
-<div id="bber">
-    <section class="timeline page-1">
-        <ul class="list" id="waterfall">
-            <% for(let i in site.data.essay.essay_list){ %>
-                <% const item = site.data.essay.essay_list[i];if(i >= 30)break; %>
-                <li class="item">
-                    <%- partial('partial/compoment/says/saysContent', {item:item}) %>
-                    <%- partial('partial/compoment/says/saysFunction', {item:item}) %>
-                    <hr>
-                    <%- partial('partial/compoment/says/saysBottom', {item:item}) %>
-                </li>
-            <% }; %>
-        </ul>
-    </section>
-</div>
-<div id="bber-tips" style="color: var(--sco-secondtext);">- 只展示最近30条短文 -</div>
+<% if (theme.says.enable === false) { %>
+    <%- partial('not_configured') %>
+<% } else { %>
+    <%- partial('partial/compoment/says/banner') %>
+    <div id="bber">
+        <section class="timeline page-1">
+            <ul class="list" id="waterfall">
+                <% for(let i in site.data.essay.essay_list){ %>
+                    <% const item = site.data.essay.essay_list[i];if(i >= 30)break; %>
+                    <li class="item">
+                        <% if (theme.says.style === 2) { %>
+                            <%- partial('partial/compoment/says/saysMeta', {item:item}) %>
+                        <% } %>
+                        <%- partial('partial/compoment/says/saysContent', {item:item}) %>
+                        <%- partial('partial/compoment/says/saysFunction', {item:item}) %>
+                        <% if (theme.says.style === 1) { %>
+                            <hr>
+                            <%- partial('partial/compoment/says/saysBottom', {item:item}) %>
+                        <% } %>
+                    </li>
+                <% }; %>
+            </ul>
+        </section>
+    </div>
+    <div id="bber-tips" style="color: var(--sco-secondtext);">- 只展示最近30条短文 -</div>
+<% } %>
\ No newline at end of file
diff --git a/layout/partial/compoment/inject/body.ejs b/layout/partial/compoment/inject/body.ejs
index 27c71a51..09a68e21 100755
--- a/layout/partial/compoment/inject/body.ejs
+++ b/layout/partial/compoment/inject/body.ejs
@@ -7,7 +7,7 @@
 <% if(theme.lightbox){ %>
     <%- js(cdn.viewimagejs) %>
 <% } %>
-<% if(theme.hometop.bbtime || theme.aside.history.enable){ %>
+<% if(theme.says.home_mini || theme.aside.history.enable){ %>
     <%- js(cdn.swiperjs) %>
 <% } %>
 <%- js('/js/utils') %>
diff --git a/layout/partial/compoment/inject/head.ejs b/layout/partial/compoment/inject/head.ejs
index a6f3ff46..6b607fbf 100755
--- a/layout/partial/compoment/inject/head.ejs
+++ b/layout/partial/compoment/inject/head.ejs
@@ -20,7 +20,7 @@
 <% if(theme.thirdparty.aplayer.enable){%>
     <%- css(cdn.aplayercss) %>
 <%} %>
-<% if(theme.hometop.bbtime || theme.aside.history.enable){ %>
+<% if(theme.says.home_mini || theme.aside.history.enable){ %>
     <%- css(cdn.swipercss) %>
 <% } %>
 <script>
diff --git a/layout/partial/compoment/says/banner.ejs b/layout/partial/compoment/says/banner.ejs
index b8f234d4..2d5f37f9 100755
--- a/layout/partial/compoment/says/banner.ejs
+++ b/layout/partial/compoment/says/banner.ejs
@@ -1,4 +1,4 @@
-<div class="author-content author-content-item essayPage single nolazyload" style="background: url(<%= page.cover %>) no-repeat center;">
+<div class="author-content author-content-item essayPage single nolazyload" style="background: url(<%= page.cover %>) no-repeat center;background-size: cover">
     <div class="card-content">
         <div class="author-content-item-tips"><%= page.title %></div>
         <span class="author-content-item-title"><%= page.desc %></span>
diff --git a/layout/partial/compoment/says/saysMeta.ejs b/layout/partial/compoment/says/saysMeta.ejs
new file mode 100644
index 00000000..cea7d320
--- /dev/null
+++ b/layout/partial/compoment/says/saysMeta.ejs
@@ -0,0 +1,10 @@
+<div class="meta">
+    <img class="no-lightbox no-lazyload avatar" src="<%= theme.aside.card.author.img %>">
+    <div class="info">
+        <span class="bber_nick"><%= config.author %></span>
+        <time class="datetime bber_date" datetime="<%= moment(item.date).format() %>"></time>
+    </div>
+    <a class="bber-reply goComment" onclick="sco.toTalk('<%- item.content %>')" >
+        <i class="scoicon sco-chat-fill" style="font-size: 1rem;"></i>
+    </a>
+</div>
\ No newline at end of file
diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl
new file mode 100644
index 00000000..946879cd
--- /dev/null
+++ b/source/css/_page/homepage.styl
@@ -0,0 +1,3 @@
+a 
+	&.bber-reply 
+		cursor pointer
\ No newline at end of file
diff --git a/source/css/_page/says.styl b/source/css/_page/says.styl
index 4a6b8e8b..ff6466b4 100644
--- a/source/css/_page/says.styl
+++ b/source/css/_page/says.styl
@@ -1,43 +1,115 @@
-.author-content.author-content-item.essayPage
-	height 19rem
-	background-size cover
-	color var(--sco-white)
-	overflow hidden
-	margin-top 0
-
-#bber
-	margin-top 1rem
-	width 100%
-
-	div 
-		&.bber-content 
-			display flex
-			flex-direction initial
-			flex-wrap wrap
-			border-radius 12px
-			width 100%
-			height 100%
+if hexo-config('says.home_mini')
+	.bber-logo,
+	.bber-gotobb 
+		line-height 25px
+		transition .3s
+		cursor pointer
+
+		&:hover
+			opacity .8
+			color var(--sco-theme)
 
-	& > section
-		& > ul 
-			& > li 
-				&.item
-					margin-bottom 1rem
+	.bber-logo
+		margin-right 1rem
 
-				& > div 
-					.bber-info-time 
-						color var(--sco-fontcolor)
-						font-size .7rem
-						background-color var(--sco-gray-op)
-						padding 0 8px
-						border-radius 20px
-						cursor default
-						display flex
-						align-items center
+	.bber-gotobb
+		margin-left 1rem
+
+	i 
+		&.bber-gotobb 
+			font-size 16px
+
+if hexo-config('says.enable')
+	.author-content.author-content-item.essayPage
+		height 19rem
+		color var(--sco-white)
+		overflow hidden
+		margin-top 0
+
+	#bber
+		margin-top 1rem
+		width 100%
+
+		if hexo-config('says.style') == 2
+			.meta
+				display flex
+				align-items center
+				line-height 1.5
+				position relative
+				width 100%
+				margin-bottom 4px
+
+				.avatar
+					margin 0
+					width 50px
+					height 50px
+					border-radius 10px
+
+				.info
+					display flex
+					flex-direction column
+					margin-left 10px
+
+					span.bber_nick
+						color #6dbdc3
+						font-size .9rem
+
+					time.bber_date
+						font-size 14px
+						opacity .6
+
+				.goComment
+					position: absolute
+					top: 0
+					right: 0
+
+		div 
+			&.bber-content 
+				display flex
+				flex-direction initial
+				flex-wrap wrap
+				border-radius 12px
+				width 100%
+				height 100%
+
+		& > section
+			& > ul 
+				& > li 
+					&.item
+						margin-bottom 1rem
+
+		.bber-reply 
+			cursor pointer
+			margin 0 4px
+
+		if hexo-config('says.style') == 1
+			.bber-bottom 
+				display flex
+				justify-content space-between
+				width 100%
+				-webkit-user-select none
+				user-select none
+
+			.bber-info 
+				display flex
+				align-items center
 
-						i 
-							margin-right 8px
-							font-size 16px
+				.fa-rectangles-mixed 
+					margin-right 8px
+
+				.bber-info-time 
+					color var(--sco-fontcolor)
+					font-size .7rem
+					background-color var(--sco-gray-op)
+					padding 0 8px
+					border-radius 20px
+					cursor default
+					display flex
+					align-items center
+
+					i 
+						margin-right 8px
+						font-size 16px
 
 					.datafrom 
 						order 2
@@ -46,271 +118,236 @@
 						margin-left 8px
 						small 
 							font-size .7rem
-	.bber-info 
-		display flex
-		align-items center
-
-		.fa-rectangles-mixed 
-			margin-right 8px
-
-	.bber-content-link 
-		display flex
-		margin-left .5rem
-		color var(--sco-secondtext)
-		font-size .7rem
-		align-items center
-		background-color rgba(245, 108, 108, .13)
-		padding 0 8px
-		border-radius 20px
-
-		&:hover 
-			background-color var(--sco-main)
-			color var(--sco-white)
-
-		i 
-			margin-right 3px
-			font-size 16px
 
-	.bber-reply 
-		cursor pointer
-		margin 0 4px
+				.bber-content-link 
+					display flex
+					margin-left .5rem
+					color var(--sco-secondtext)
+					font-size .7rem
+					align-items center
+					background-color rgba(245, 108, 108, .13)
+					padding 0 8px
+					border-radius 20px
 
-	.bber-bottom 
-		display flex
-		justify-content space-between
-		width 100%
-		-webkit-user-select none
-		user-select none
+					&:hover 
+						background-color var(--sco-main)
+						color var(--sco-white)
 
-	.count 
-		color var(--sco-secondtext)
-		font-size .8rem
+					i 
+						margin-right 3px
+						font-size 16px
 
-	p 
-		margin 0
+		.count 
+			color var(--sco-secondtext)
+			font-size .8rem
 
-	.datafrom 
-		i 
-			margin-right 4px
+		p 
+			margin 0
 
-	.bber-music 
-		width 100%
-		height 90px
-		margin .5rem 0
-		border-radius 8px
-		overflow hidden
-		border var(--style-border-always)
-		background var(--sco-secondbg)
+		.datafrom 
+			i 
+				margin-right 4px
 
-		.aplayer-lrc 
-			display none
+		.bber-music 
+			width 100%
+			height 90px
+			margin .5rem 0
+			border-radius 8px
+			overflow hidden
+			border var(--style-border-always)
+			background var(--sco-secondbg)
 
-	.aplayer 
-		margin 0
+			.aplayer-lrc 
+				display none
 
-		.aplayer-info 
-			.aplayer-music 
-				height 23px
+		.aplayer 
+			margin 0
 
-				.aplayer-title 
-					font-size .8rem
-					font-weight 700
-					margin 0
-					color var(--sco-black)
+			.aplayer-info 
+				.aplayer-music 
+					height 23px
 
-			.aplayer-controller 
-				align-items center
+					.aplayer-title 
+						font-size .8rem
+						font-weight 700
+						margin 0
+						color var(--sco-black)
 
-				.aplayer-bar-wrap 
-					padding 0
+				.aplayer-controller 
+					align-items center
 
-					.aplayer-bar 
-						background var(--sco-gray)
-						height 8px
-						border-radius 12px
-						transition .3s
-						overflow hidden
+					.aplayer-bar-wrap 
+						padding 0
 
-						.aplayer-played 
-							height 100%
+						.aplayer-bar 
+							background var(--sco-gray)
+							height 8px
 							border-radius 12px
+							transition .3s
+							overflow hidden
 
-							.aplayer-thumb 
-								display none
+							.aplayer-played 
+								height 100%
+								border-radius 12px
 
-						.aplayer-loaded 
-							height 100%
-							border-radius 12px
+								.aplayer-thumb 
+									display none
 
-					&:hover 
-						.aplayer-bar 
-							height 12px
-
-				.aplayer-time 
-					position initial
-
-		&.aplayer-withlrc 
-			.aplayer-pic 
-				height 82px
-				width 82px
-				margin 4px
-				border-radius 4px
-
-	.bber-video 
-		position relative
-		padding 30% 50%
-		margin 0.5rem 0
-
-	.bber-content-img 
-		height 100px
-		margin .2rem auto .3rem 0
-		border-radius 12px
-		overflow hidden
-		display flex
-		position relative
+							.aplayer-loaded 
+								height 100%
+								border-radius 12px
 
-		img 
-			object-fit cover
-			max-height 100%
-			border-radius 12px
-			min-height 100px
-			height 100px
+						&:hover 
+							.aplayer-bar 
+								height 12px
 
-	.bber-content 
-		.datacont 
-			order 0
-			font-size .8rem
-			font-weight 700
-			color var(--sco-fontcolor)
-			width 100%
-			line-height 1.38
-			border-radius 12px
-			margin-bottom .5rem
-			display flex
-			flex-direction column
-			text-align justify
+					.aplayer-time 
+						position initial
 
-	.timeline 
-		#waterfall 
-			opacity 0
-			transition .3s
+			&.aplayer-withlrc 
+				.aplayer-pic 
+					height 82px
+					width 82px
+					margin 4px
+					border-radius 4px
 
-			&.show 
-				opacity 1
+		.bber-video 
+			position relative
+			padding 30% 50%
+			margin 0.5rem 0
 
-		ul 
-			li 
-				&.item 
-					position relative
-					width 32%
-					border var(--style-border-always)
-					border-radius 12px
-					padding 1rem 1rem .5rem
-					transition .3s
-					display flex
-					flex-direction column
-					flex-wrap nowrap
-					justify-content space-between
-					align-items flex-start
-					background var(--sco-card-bg)
-					box-shadow var(--sco-shadow-border)
-					margin-right 2%
-
-					+maxWidth1300()
-						width 49%
-						margin-right 1%
-
-					+maxWidth768()
-						width 100%
-						margin-right 0
-						padding 16px 20px
-
-					hr 
-						display flex
+		.bber-content-img 
+			height 100px
+			margin .2rem auto .3rem 0
+			border-radius 12px
+			overflow hidden
+			display flex
+			position relative
+
+			img 
+				object-fit cover
+				max-height 100%
+				border-radius 12px
+				min-height 100px
+				height 100px
+
+		.bber-content 
+			.datacont 
+				order 0
+				font-size .8rem
+				font-weight 700
+				color var(--sco-fontcolor)
+				width 100%
+				line-height 1.38
+				border-radius 12px
+				margin-bottom .5rem
+				display flex
+				flex-direction column
+				text-align justify
+
+		.timeline 
+			#waterfall 
+				opacity 0
+				transition .3s
+
+				&.show 
+					opacity 1
+
+			ul 
+				li 
+					&.item 
 						position relative
-						margin 8px 0
-						border 1px dashed var(--sco-theme-op)
-						width 100%
+						width 32%
+						border var(--style-border-always)
+						border-radius 12px
+						padding 1rem 1rem .5rem
+						transition .3s
+						display flex
+						flex-direction column
+						flex-wrap nowrap
+						justify-content space-between
+						align-items flex-start
+						background var(--sco-card-bg)
+						box-shadow var(--sco-shadow-border)
+						margin-right 2%
+
+						+maxWidth1300()
+							width 49%
+							margin-right 1%
+
+						+maxWidth768()
+							width 100%
+							margin-right 0
+							padding 16px 20px
+
+						hr 
+							display flex
+							position relative
+							margin 8px 0
+							border 1px dashed var(--sco-theme-op)
+							width 100%
+
+						&:hover 
+							border var(--style-border-hover)
+		ul 
+			&.list 
+				display flex
+				flex-direction row
+				flex-wrap wrap
+				justify-content space-between
+
+		li 
+			&.item 
+				display flex
+				flex-direction column
+				flex-wrap nowrap
+				align-items flex-start
+
+	#bber .bber-video video,
+	#bber .bber-video iframe 
+		position absolute
+		width 100%
+		height 100%
+		left 0
+		top 0
+		margin 0
+		border-radius 8px
+		border var(--style-border)
 
-					&:hover 
-						border var(--style-border-hover)
-	ul 
-		&.list 
-			display flex
-			flex-direction row
-			flex-wrap wrap
-			justify-content space-between
+	#bber-tips 
+		font-size 14px
+		display flex
+		justify-content center
+		margin-top 1rem
 
-	li 
-		&.item 
-			display flex
-			flex-direction column
-			flex-wrap nowrap
-			align-items flex-start
-
-#bber .bber-video video,
-#bber .bber-video iframe 
-	position absolute
-	width 100%
-	height 100%
-	left 0
-	top 0
-	margin 0
-	border-radius 8px
-	border var(--style-border)
-
-#bber-tips 
-	font-size 14px
-	display flex
-	justify-content center
-	margin-top 1rem
-
-#bber-talk 
-	width 100%
-	height 25px
-	line-height 25px
-	display flex
-	flex-direction column
-
-	.li-style 
-		width auto
-		max-width 100%
+	#bber-talk 
+		width 100%
 		height 25px
-		text-align center
+		line-height 25px
+		display flex
+		flex-direction column
+
+		.li-style 
+			width auto
+			max-width 100%
+			height 25px
+			text-align center
+			overflow hidden
+			text-overflow ellipsis
+			transition .3s
+			font-weight 700
+			margin auto
+			cursor pointer
+			white-space nowrap
+
+	#bbtalk 
 		overflow hidden
+		width 100%
 		text-overflow ellipsis
-		transition .3s
-		font-weight 700
-		margin auto
-		cursor pointer
 		white-space nowrap
 
-#bbtalk 
-	overflow hidden
-	width 100%
-	text-overflow ellipsis
-	white-space nowrap
-
-#bbTimeList
-	.li-style 
-		&:hover 
-			color var(--sco-theme)
-			transition .3s
-
-.bber-gotobb 
-	line-height 25px
-	margin-left 1rem
-	transition .3s
-	cursor pointer
-
-	&:hover 
-		opacity .8
-		color var(--sco-theme)
-
-i 
-	&.bber-gotobb 
-		font-size 16px
-
-a 
-	&.bber-reply 
-		cursor pointer
\ No newline at end of file
+	#bbTimeList
+		.li-style 
+			&:hover 
+				color var(--sco-theme)
+				transition .3s
\ No newline at end of file
diff --git a/source/css/index.styl b/source/css/index.styl
index 63350a1e..c1bce1ae 100644
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -1,7 +1,7 @@
 @charset "UTF-8"
 
 if hexo-config('css_prefix')
-    @import 'nib'
+	@import 'nib'
 
 // project
 @import '_global/animation.css'
@@ -9,15 +9,9 @@ if hexo-config('css_prefix')
 @import '_layout/*'
 @import '_page/*'
 
-// search
-if hexo-config('thirdparty.search.algolia_search.enable')
-    @import '_search/algolia-search'
-if hexo-config('thirdparty.search.local_search.enable')
-    @import '_search/local-search'
-
 // commentBarrage
 if hexo-config('thirdparty.comment.enable')
-    @import '_post/commentBarrage.styl'
+	@import '_post/commentBarrage.styl'
 
 // console
 @import '_extra/console.styl'
@@ -25,5 +19,11 @@ if hexo-config('thirdparty.comment.enable')
 // External tags
 @import '_post/externalTags.styl'
 
+// search
+if hexo-config('thirdparty.search.algolia_search.enable')
+	@import '_search/algolia-search'
+if hexo-config('thirdparty.search.local_search.enable')
+	@import '_search/local-search'
+
 // dark
 @import '_mode/*'
\ No newline at end of file
diff --git a/source/css/main.css b/source/css/main.css
index 6c7319cb..afd9cbf9 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -6777,19 +6777,6 @@ li, ul {
     padding: 0
 }
 
-.icon-bblogo {
-    font-size: 2rem;
-    line-height: 22px;
-    margin-right: 1rem;
-    transition: .3s;
-    cursor: pointer
-}
-
-.icon-bblogo:hover {
-    opacity: .8;
-    color: var(--sco-theme)
-}
-
 .recent-post-item .recent-post-info .recent-post-info-top {
     position: relative;
     transition: .3s;

From 5f6be94ece1ab116a70e1a2befc5d7a70169213f Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Thu, 16 Nov 2023 14:44:15 +0800
Subject: [PATCH 09/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

微调样式&修改个人信息侧边栏
---
 _config.yml                                      | 4 ----
 layout/partial/compoment/aside/asideInfoCard.ejs | 5 +++--
 source/css/main.css                              | 2 +-
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/_config.yml b/_config.yml
index 7838c8cc..c2c62768 100755
--- a/_config.yml
+++ b/_config.yml
@@ -161,10 +161,6 @@ aside:
       Bilibili:
         icon: scoicon sco-bilibili-line
         url: https://space.bilibili.com/1329819902
-    # 跳转按钮
-    button:
-      text: 了解更多
-      url: /about/
   # 公众号二维码
   flip:
     favicon: # 右下角头像
diff --git a/layout/partial/compoment/aside/asideInfoCard.ejs b/layout/partial/compoment/aside/asideInfoCard.ejs
index a9ca8e3e..baa716dc 100755
--- a/layout/partial/compoment/aside/asideInfoCard.ejs
+++ b/layout/partial/compoment/aside/asideInfoCard.ejs
@@ -10,7 +10,7 @@
         <div class="avatar-img-group">
             <img class="avatar-img" alt="avatar" src="<%= theme.aside.card.author.img %>">
             <div class="avatar-sticker">
-                <svg class="avatar-sticker-img"  alt="avatar" aria-hidden="true">
+                <svg class="avatar-sticker-img" alt="avatar" aria-hidden="true">
                     <use xlink:href="<%= theme.aside.card.author.state %>"></use>
                 </svg>
                 <%- js(theme.aside.card.author.js) %>
@@ -21,7 +21,8 @@
             <div class="author-info__description2"><%- theme.aside.card.content2 %></div>
         </div>
         <div class="author-info__bottom-group">
-            <a class="author-info__bottom-group-left" href="/about" data-pjax-state="">
+            <a class="author-info__bottom-group-left" href="<% if(theme.about){ %>/about<% }else{ %>/<% } %>"
+               data-pjax-state="">
                 <div class="author-info__name">
                     <%= config.author %>
                 </div>
diff --git a/source/css/main.css b/source/css/main.css
index afd9cbf9..c4c757d2 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -11922,7 +11922,7 @@ a.bb-link-info:hover {
 
 .author-content-item {
     width: 49%;
-    border-radius: 24px;
+    border-radius: 12px;
     background: var(--sco-card-bg);
     border: var(--style-border-always);
     box-shadow: var(--sco-shadow-border);

From 9cbb337e004ba6597101b6b9270cc721e0ec0148 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Thu, 16 Nov 2023 17:31:26 +0800
Subject: [PATCH 10/43] Bug Repiar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复首页音乐弹窗问题
调整main.js代码
---
 languages/zh-CN.yml                 |  11 +-
 scripts/helper/themeJsExport.js     |   1 -
 source/css/main.css                 |   3 +-
 source/js/extend/console/comment.js | 123 +++--
 source/js/main.js                   | 750 +++++++++++++---------------
 source/js/utils.js                  | 301 +++++------
 6 files changed, 573 insertions(+), 616 deletions(-)

diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 51ee4f72..87f9389c 100755
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -14,12 +14,11 @@ time:
   runtime:  天
 
 sayhello:
-  morning: 早上好
-  noon: 中午好
-  afternoon: 下午好
-  night: 晚上好
-  goodnight: 晚安
-  iam: '!  我是'
+  morning: 一日之计在于晨
+  noon: 吃饱了才有力气干活
+  afternoon: 集中精力，攻克难关
+  night: 不要太劳累了，早睡更健康
+  goodnight: 睡个好觉，保证精力充沛
 
 page:
   tag: 标签
diff --git a/scripts/helper/themeJsExport.js b/scripts/helper/themeJsExport.js
index ca1884e9..1f6230ba 100755
--- a/scripts/helper/themeJsExport.js
+++ b/scripts/helper/themeJsExport.js
@@ -36,7 +36,6 @@ hexo.extend.helper.register('export_config', function () {
                 afternoon: lang['sayhello.afternoon'],
                 night: lang['sayhello.night'],
                 goodnight: lang['sayhello.goodnight'],
-                iam: lang['sayhello.iam'],
             },
             search: {
                 empty: lang['search.empty'],
diff --git a/source/css/main.css b/source/css/main.css
index c4c757d2..cc1e6e4d 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -4881,7 +4881,8 @@ a.deal_link {
 
 a.deal_link:hover {
     color: var(--sco-white);
-    background: var(--sco-main)
+    background: var(--sco-main);
+    transform: scale(1.1);
 }
 
 img.footer_mini_logo {
diff --git a/source/js/extend/console/comment.js b/source/js/extend/console/comment.js
index c0a083da..6e9a4814 100755
--- a/source/js/extend/console/comment.js
+++ b/source/js/extend/console/comment.js
@@ -1,77 +1,76 @@
 const changeContent = (content) => {
     if (content === '') return content
-  
+
     content = content.replace(/<img.*?src="(.*?)"?[^\>]+>|<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>|<pre><code>.*?<\/pre>|<[^>]+>/g, (match, img, link, code) => {
-      if (img) return '[图片]';
-      if (link) return '[链接]';
-      if (code) return '[代码]';
-      return '';
+        if (img) return '[图片]';
+        if (link) return '[链接]';
+        if (code) return '[代码]';
+        return '';
     })
-  
+
     if (content.length > 150) {
-      content = content.substring(0,150) + '...'
+        content = content.substring(0, 150) + '...'
     }
     return content
-  }
-  
-  const getComment = () => {
+}
+
+const getComment = () => {
     const $dom = document.querySelector('#card-newest-comments .aside-list')
-  
+
     const runTwikoo = () => {
-      twikoo.getRecentComments({
-        envId: GLOBALCONFIG.comment.twikooUrl,
-        region: '',
-        pageSize: 6,
-        includeReply: true
-      }).then(function (res) {
-        const twikooArray = res.map(e => ({
-          'content': changeContent(e.comment),
-          'avatar': e.avatar,
-          'nick': e.nick,
-          'url': `${e.url}#${e.id}`,
-          'date': new Date(e.created).toISOString()
-        }))
+        twikoo.getRecentComments({
+            envId: GLOBALCONFIG.comment.twikooUrl,
+            region: '',
+            pageSize: 6,
+            includeReply: true
+        }).then(function (res) {
+            const twikooArray = res.map(e => ({
+                'content': changeContent(e.comment),
+                'avatar': e.avatar,
+                'nick': e.nick,
+                'url': `${e.url}#${e.id}`,
+                'date': new Date(e.created).toISOString()
+            }))
 
-        if(window.location.pathname === "/links/" || window.location.pathname === "/links"){
-            let submit = document.getElementsByClassName('tk-submit ')
-            let text = document.getElementsByClassName("el-textarea__inner");
-            text[0].value += `昵称（请勿包含博客等字样）：
+            if (window.location.pathname === "/links/" || window.location.pathname === "/links") {
+                let submit = document.getElementsByClassName('tk-submit ')
+                let text = document.getElementsByClassName("el-textarea__inner");
+                text[0].value += `昵称（请勿包含博客等字样）：
 网站地址（要求博客地址，请勿提交个人主页）：
 头像图片url（请提供尽可能清晰的图片，我会上传到我的图床）：
 描述：`;
-            text[0].style.height = "142px"
-          submit.item(0).style.display = "none";
+                text[0].style.height = "142px"
+                submit.item(0).style.display = "none";
 
-          window.checkForm = function(){
-            const checkboxes = document.querySelectorAll('input[onclick="checkForm()"]');
-            let allChecked = true;
+                window.checkForm = function () {
+                    const checkboxes = document.querySelectorAll('input[onclick="checkForm()"]');
+                    let allChecked = true;
 
-            checkboxes.forEach(checkbox => {
-              if (!checkbox.checked) {
-                allChecked = false;
-              }
-            });
+                    checkboxes.forEach(checkbox => {
+                        if (!checkbox.checked) {
+                            allChecked = false;
+                        }
+                    });
 
-            if(allChecked){
-              submit.item(0).style.display = "block";
-            }else {
-              submit.item(0).style.display = "none";
+                    if (allChecked) {
+                        submit.item(0).style.display = "block";
+                    } else {
+                        submit.item(0).style.display = "none";
+                    }
+                }
             }
-          }
-        }
-  
-        generateHtml(twikooArray)
-      }).catch(function (err) {
-        $dom.innerHTML= "无法获取评论，请确认相关配置是否正确"
-      })
+
+            generateHtml(twikooArray)
+        }).catch(function (err) {
+            $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
+        })
     }
-        runTwikoo()
-  }
-  
-  const generateHtml = array => {
+    runTwikoo()
+}
+
+const generateHtml = array => {
     const $dom = document.querySelector('#card-newest-comments .aside-list')
-  
-    let result = array.length ? array.map(item => `
+    $dom.innerHTML = array.length ? array.map(item => `
     <div class='aside-list-item'>
       <a href='${item.url}' class='thumbnail'>
         <img src='${item.avatar}' alt='${item.nick}'>
@@ -83,17 +82,15 @@ const changeContent = (content) => {
       </div>
     </div>
   `).join('') : '没有评论'
-  
-    $dom.innerHTML = result
     window.lazyLoadInstance && window.lazyLoadInstance.update()
     window.pjax && window.pjax.refresh($dom)
-    chageTimeFormate()
-  }
-  
-  const newestCommentInit = () => {
+    changeTimeFormat()
+}
+
+const newestCommentInit = () => {
     const $asideList = document.querySelector('#card-newest-comments .aside-list')
     if ($asideList) {
-      getComment()
+        getComment()
     }
-  }
+}
   
\ No newline at end of file
diff --git a/source/js/main.js b/source/js/main.js
index f9992e83..f9ce734a 100755
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,103 +1,82 @@
-function set_fest() {
-    let date = new Date();
-    switch ((date.getMonth() + 1).toString() + '.' + date.getDate()) {
-        case '1.8': // 周总理逝世
-        case '9.9': // 毛主席逝世
-        case '7.7': // 七七事变
-        case '9.18': // 九一八事变
-        case '12.13': // 南京大屠杀国家公祭日
-        {
-            // 创建一个<style>元素
-            const styleElement = document.createElement('style');
-            // 定义要添加的CSS样式
-            const css = `
-              html {
-                -webkit-filter: grayscale(100%);
-                -moz-filter: grayscale(100%);
-                -ms-filter: grayscale(100%);
-                -o-filter: grayscale(100%);
-                filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-                _filter: none;
-              }
-            `;
-            // 将CSS样式添加到<style>元素中
-            styleElement.appendChild(document.createTextNode(css));
-            // 将<style>元素添加到<head>标签中
-            document.head.appendChild(styleElement);
-        }
-            break;
-    }
-}
-
-function setFixed(el) {
-    if (!el) return
-    const currentTop = window.scrollY || document.documentElement.scrollTop
-    if (currentTop > 0) {
-        el.classList.add('nav-fixed')
-    } else {
-        el.classList.remove('nav-fixed')
-    }
-}
-
-function getTimeState() {
-    var e = (new Date).getHours()
-        , t = "";
-    e >= 0 && e <= 5 ? t = "睡个好觉，保证精力充沛" : e > 5 && e <= 10 ? t = "一日之计在于晨" : e > 10 && e <= 14 ? t = "吃饱了才有力气干活" : e > 14 && e <= 18 ? t = "集中精力，攻克难关" : e > 18 && e <= 24 && (t = "不要太劳累了，早睡更健康")
-    return t;
-}
-
+/**
+ * 滚动处理
+ */
 const scrollFn = function () {
-    const innerHeight = window.innerHeight + 0
-    const $header = document.getElementById('page-header')
-    setFixed($header)
-    if (document.body.scrollHeight <= innerHeight) {
-        return
-    }
-    let initTop = 0
+    const innerHeight = window.innerHeight;
+    const $header = document.getElementById('page-header');
+    if (!$header || document.body.scrollHeight <= innerHeight) return;
+
+    let initTop = 0;
     window.addEventListener('scroll', utils.throttle(function (e) {
-        const currentTop = window.scrollY || document.documentElement.scrollTop
-        const isDown = scrollDirection(currentTop)
+        const currentTop = window.scrollY || document.documentElement.scrollTop;
+        const isDown = scrollDirection(currentTop);
+
         if (currentTop > 0) {
+            $header.classList.add('nav-fixed');
             if (isDown) {
-                if ($header.classList.contains('nav-visible')) $header.classList.remove(
-                    'nav-visible')
+                if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible');
             } else {
-                if (!$header.classList.contains('nav-visible')) $header.classList.add(
-                    'nav-visible')
+                if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible');
             }
-            $header.classList.add('nav-fixed')
         } else {
-            if (currentTop === 0) {
-                $header.classList.remove('nav-fixed', 'nav-visible')
-            }
+            $header.classList.remove('nav-fixed', 'nav-visible');
         }
-        percent()
-    }, 200))
+        percent();
+    }, 200));
 
     function scrollDirection(currentTop) {
-        const result = currentTop > initTop
-        initTop = currentTop
-        return result
+        const result = currentTop > initTop;
+        initTop = currentTop;
+        return result;
     }
 }
 
 /**
- * 滾動處理
+ * 滑动导航栏数字变化
  */
+const percent = () => {
+    let scrollTop = document.documentElement.scrollTop || window.pageYOffset
+    let totalHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight
+    let scrollPercent = Math.round(scrollTop / totalHeight * 100)
+    let percentElement = document.querySelector("#percent")
+    let viewportBottom = window.scrollY + document.documentElement.clientHeight
+    let remainingScroll = totalHeight - scrollTop
+
+    if ((document.getElementById("post-comment") || document.getElementById("footer")).offsetTop < viewportBottom || scrollPercent > 90) {
+        document.querySelector("#nav-totop").classList.add("long")
+        percentElement.innerHTML = "返回顶部"
+    } else {
+        document.querySelector("#nav-totop").classList.remove("long")
+        if (scrollPercent >= 0) {
+            percentElement.innerHTML = scrollPercent
+        }
+    }
+
+    let elementsToHide = document.querySelectorAll(".needEndHide")
+    if (remainingScroll < 100) {
+        elementsToHide.forEach(function (element) {
+            element.classList.add("hide")
+        })
+    } else {
+        elementsToHide.forEach(function (element) {
+            element.classList.remove("hide")
+        })
+    }
 
+    window.onscroll = percent
+}
+
+
+/**
+ * side menu
+ */
 const sidebarFn = () => {
     const $toggleMenu = document.getElementById('toggle-menu')
     const $mobileSidebarMenus = document.getElementById('sidebar-menus')
     const $menuMask = document.getElementById('menu-mask')
-    const $cookies_window = document.getElementById('cookies-window')
-    const $header = document.getElementById('page-header')
     const $body = document.body
 
-    if (!$toggleMenu) return
-
-    let initTop = 0
-    const isChatBtnHide = typeof chatBtnHide === 'function'
-    const isChatBtnShow = typeof chatBtnShow === 'function'
+    const isOpen = () => $mobileSidebarMenus.classList.contains('open')
 
     function openMobileSidebar() {
         utils.sidebarPaddingR()
@@ -115,86 +94,39 @@ const sidebarFn = () => {
 
     $toggleMenu.addEventListener('click', openMobileSidebar)
 
-    $menuMask.addEventListener('click', e => {
-        if ($mobileSidebarMenus.classList.contains('open')) {
+    $menuMask.addEventListener('click', () => {
+        if (isOpen()) {
             closeMobileSidebar()
         }
     })
 
-    window.addEventListener('resize', e => {
-        if ($mobileSidebarMenus.classList.contains('open')) closeMobileSidebar()
-    })
-    window.addEventListener('scroll', e => {
-        const currentTop = window.scrollY || document.documentElement.scrollTop
-        const isDown = scrollDirection(currentTop)
-        if (currentTop > 0) {
-            if (isDown) {
-                if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-                if (isChatBtnShow && isChatShow === true) {
-                    chatBtnHide()
-                    isChatShow = false
-                }
-            } else {
-                if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-                if (isChatBtnHide && isChatShow === false) {
-                    chatBtnShow()
-                    isChatShow = true
-                }
-            }
-            $header.classList.add('nav-fixed')
-            $cookies_window.classList.add('cw-hide')
-        } else {
-            if (currentTop === 0) {
-                $header.classList.remove('nav-fixed', 'nav-visible')
-            }
+    window.addEventListener('resize', () => {
+        if (utils.isHidden($toggleMenu) && isOpen()) {
+            closeMobileSidebar()
         }
-    }, 200)
-
-    // find the scroll direction
-    function scrollDirection(currentTop) {
-        const result = currentTop > initTop // true is down & false is up
-        initTop = currentTop
-        return result
-    }
+    })
 }
 
 const showTodayCard = () => {
     const el = document.getElementById('todayCard')
-    if (el) {
-        document.getElementsByClassName('topGroup')[0].addEventListener('mouseleave', () => {
-            if (el.classList.contains('hide')) {
-                el.classList.remove('hide')
-            }
+    const topGroup = document.getElementsByClassName('topGroup')[0]
+
+    if (el && topGroup) {
+        topGroup.addEventListener('mouseleave', () => {
+            el.classList.remove('hide')
         })
     }
 }
 
-const setTimeState = () => {
-    const el = document.getElementById('author-info__sayhi')
-    if (el) {
-        const timeNow = new Date(), hours = timeNow.getHours(), lang = GLOBALCONFIG.lang.sayhello;
-        let text = '';
-        if (hours >= 0 && hours <= 5) {
-            text = lang.goodnight;
-        } else if (hours > 5 && hours <= 10) {
-            text = lang.morning;
-        } else if (hours > 10 && hours <= 14) {
-            text = lang.noon;
-        } else if (hours > 14 && hours <= 18) {
-            text = lang.afternoon;
-        } else if (hours > 18 && hours <= 24) {
-            text = lang.night;
-        }
-        el.innerText = text + lang.iam;
-    }
-};
-
-const chageTimeFormate = () => {
+/**
+ * 修改时间格式
+ */
+const changeTimeFormat = () => {
     const timeElements = document.getElementsByTagName("time"), lang = GLOBALCONFIG.lang.time
-    for (var i = 0; i < timeElements.length; i++) {
+    for (let i = 0; i < timeElements.length; i++) {
         const datetime = timeElements[i].getAttribute("datetime"), timeObj = new Date(datetime),
             daysDiff = utils.timeDiff(timeObj, new Date())
-        var timeString;
+        let timeString;
         if (daysDiff === 0) {
             timeString = lang.recent;
         } else if (daysDiff === 1) {
@@ -218,49 +150,24 @@ const chageTimeFormate = () => {
  * 文章页右下角下一篇
  */
 const initObserver = () => {
-    let e = document.getElementById("post-comment");
-    let t = document.getElementById("pagination");
+    let commentElement = document.getElementById("post-comment");
+    let paginationElement = document.getElementById("pagination");
 
     function handleIntersection(entries) {
         entries.forEach(function (entry) {
             if (entry.isIntersecting) {
-                t.classList.add("show-window");
+                paginationElement.classList.add("show-window");
                 document.querySelector(".comment-barrage").style.bottom = "-200px";
             } else {
-                t.classList.remove("show-window");
+                paginationElement.classList.remove("show-window");
                 document.querySelector(".comment-barrage").style.bottom = "0px";
             }
         });
     }
 
-    if (e && t) {
+    if (commentElement && paginationElement) {
         let observer = new IntersectionObserver(handleIntersection);
-        observer.observe(e);
-    }
-}
-
-const percent = () => {
-    let a = document.documentElement.scrollTop || window.pageYOffset,
-        b = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight, // 整个网页高度
-        result = Math.round(a / b * 100),
-        btn = document.querySelector("#percent");
-    const visibleBottom = window.scrollY + document.documentElement.clientHeight;
-    const eventlistner = document.getElementById('post-tools') || document.getElementById('footer');
-    const centerY = eventlistner.offsetTop + (eventlistner.offsetHeight / 2);
-    if ((centerY > visibleBottom) || (result > 90)) {
-        document.querySelector("#nav-totop").classList.add("long");
-        btn.innerHTML = GLOBALCONFIG.lang.backtop;
-        document.querySelectorAll(".needEndHide").forEach(item => {
-            item.classList.add("hide")
-        })
-    } else {
-        document.querySelector("#nav-totop").classList.remove("long");
-        if (result >= 0) {
-            btn.innerHTML = result;
-            document.querySelectorAll(".needEndHide").forEach(item => {
-                item.classList.remove("hide")
-            })
-        }
+        observer.observe(commentElement);
     }
 }
 
@@ -286,8 +193,7 @@ class toc {
         const $tocContent = document.getElementById('toc-content')
         const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
         let detectItem = ''
-
-        function autoScroll(el) {
+        const autoScroll = (el) => {
             const activePosition = el.getBoundingClientRect().top
             const sidebarScrollTop = $tocContent.scrollTop
             if (activePosition > (document.documentElement.clientHeight - 100)) {
@@ -297,20 +203,16 @@ class toc {
                 $tocContent.scrollTop = sidebarScrollTop - 150
             }
         }
-
-        function findHeadPosition(top) {
+        const findHeadPosition = (top) => {
             if (top === 0) {
                 return false
             }
-
             let currentIndex = ''
-
-            list.forEach(function (ele, index) {
+            list.forEach((ele, index) => {
                 if (top > utils.getEleTop(ele) - 80) {
                     currentIndex = index
                 }
             })
-
             if (detectItem === currentIndex) return
             detectItem = currentIndex
             document.querySelectorAll('.toc .active').forEach((i) => {
@@ -318,42 +220,36 @@ class toc {
             })
             const activeitem = toc[detectItem]
             if (activeitem) {
-                let parent = toc[detectItem].parentNode
                 activeitem.classList.add('active')
                 autoScroll(activeitem)
-                for (; !parent.matches('.toc'); parent = parent.parentNode) {
+                let parent = activeitem.parentNode
+                while (!parent.matches('.toc')) {
                     if (parent.matches('li')) parent.classList.add('active')
+                    parent = parent.parentNode
                 }
             }
         }
-
-        window.tocScrollFn = utils.throttle(function () {
+        window.tocScrollFn = utils.throttle(() => {
             const currentTop = window.scrollY || document.documentElement.scrollTop
             findHeadPosition(currentTop)
         }, 100)
-
         window.addEventListener('scroll', tocScrollFn)
     }
 }
 
 let lastSayHello = "";
+let wleelw_musicPlaying = false
 
-class sco {
+let sco = {
     /**
      * 个性定位
      */
-    static card_welcome() {
-        /**
-         * 请求数据
-         */
+    card_welcome: function () {
         ipLoacation = window.saveToLocal.get('ipLocation');
-        if (ipLoacation) {
-            // 使用 ipLocation
-
-        } else {
+        if (!ipLoacation) {
             // 数据已过期或不存在
-            var script = document.createElement('script');
-            var url = `https://apis.map.qq.com/ws/location/v1/ip?key=${txkey}&output=jsonp`;
+            let script = document.createElement('script');
+            let url = `https://apis.map.qq.com/ws/location/v1/ip?key=${txkey}&output=jsonp`;
             script.src = url;
             window.QQmap = function (data) {
                 ipLoacation = data;
@@ -365,95 +261,73 @@ class sco {
             document.body.appendChild(script);
         }
         showWelcome();
-    }
-
+    },
     /**
      * 那年今日
-     * @type {*}
      */
-    static card_history() {
+    card_history: function () {
         if (document.getElementById('history-container')) {
+            async function fetchHistoryData() {
+                let myDate = new Date();
+                let myMonth = myDate.getMonth() + 1;
+                let getDate = myDate.getDate();
+                let getMonth = myMonth < 10 ? "0" + myMonth : "" + myMonth;
+                let getDay = getDate < 10 ? "0" + getDate : "" + getDate;
+                let getMonthDate = "S" + getMonth + getDay;
+                let history_data_url = `https://cdn.meuicat.com/gh/Zfour/Butterfly-card-history@2.08/${getMonth}.json`;
+
+                let response = await fetch(history_data_url);
+                let data = await response.json();
+                return data[getMonthDate];
+            }
             function append(parent, text) {
-                if (typeof text === 'string') {
-                    let temp = document.createElement('div');
-                    temp.innerHTML = text;
-                    // 防止元素太多 进行提速
-                    let frag = document.createDocumentFragment();
-                    while (temp.firstChild) {
-                        frag.appendChild(temp.firstChild);
-                    }
-                    parent.appendChild(frag);
-                } else {
-                    parent.appendChild(text);
+                let temp = document.createElement('div');
+                temp.innerHTML = text;
+                let frag = document.createDocumentFragment();
+                while (temp.firstChild) {
+                    frag.appendChild(temp.firstChild);
                 }
+                parent.appendChild(frag);
             }
-
-            let history_data = sco.history_get_data()
-            fetch(history_data[0])
-                .then(data => data.json())
-                .then(data => {
-                    let html_item = ''
-                    for (let item of data[history_data[1]]) {
-                        html_item += '<div class="swiper-slide history_slide"><span class="history_slide_time">A.D.' +
-                            item.year + '</span>' + '<span class="history_slide_link">' + item.title + '</span></div>'
-
-                    }
-                    var history_container_wrapper = document.getElementById('history_container_wrapper')
-                    append(history_container_wrapper, html_item);
-                    var swiper_history = new Swiper('.history_swiper-container', {
-                        passiveListeners: true,
-                        spaceBetween: 30,
-                        effect: 'coverflow',
-                        coverflowEffect: {
-                            rotate: 30,
-                            slideShadows: false,
-                        },
-                        loop: true,
-                        direction: 'vertical',
-                        autoplay: {
-                            disableOnInteraction: true,
-                            delay: 5000
-                        },
-
-                        mousewheel: false,
-                        // autoHeight: true,
-
-                    });
-
-                    let history_comtainer = document.getElementById('history-container');
-                    history_comtainer.onmouseenter = function () {
-                        swiper_history.autoplay.stop();
-                    };
-                    history_comtainer.onmouseleave = function () {
-                        swiper_history.autoplay.start();
-                    }
-                })
-        }
-    }
-
-    static history_get_data() {
-        let myDate = new Date();
-        let myMonth = myDate.getMonth() + 1;
-        let getMonth;
-        if (myMonth < 10) {
-            getMonth = "0" + String(myMonth);
-        } else {
-            getMonth = String(myMonth);
-        }
-        let getDate = String(myDate.getDate());
-        if (getDate < 10) {
-            getDate = "0" + String(getDate);
-        } else {
-            getDate = String(getDate);
+            fetchHistoryData().then(data => {
+                let html_item = data.map(item => `
+            <div class="swiper-slide history_slide">
+                <span class="history_slide_time">A.D.${item.year}</span>
+                <span class="history_slide_link">${item.title}</span>
+            </div>
+        `).join('');
+                let history_container_wrapper = document.getElementById('history_container_wrapper');
+                append(history_container_wrapper, html_item);
+                let swiper_history = new Swiper('.history_swiper-container', {
+                    passiveListeners: true,
+                    spaceBetween: 30,
+                    effect: 'coverflow',
+                    coverflowEffect: {
+                        rotate: 30,
+                        slideShadows: false,
+                    },
+                    loop: true,
+                    direction: 'vertical',
+                    autoplay: {
+                        disableOnInteraction: true,
+                        delay: 5000
+                    },
+                    mousewheel: false,
+                });
+                let history_container = document.getElementById('history-container');
+                history_container.onmouseenter = function () {
+                    swiper_history.autoplay.stop();
+                };
+                history_container.onmouseleave = function () {
+                    swiper_history.autoplay.start();
+                }
+            });
         }
-        let getMonthDate = "S" + getMonth + getDate;
-        return ["https://cdn.meuicat.com/gh/Zfour/Butterfly-card-history@2.08/" + getMonth + ".json", getMonthDate]
-    }
-
-    /*
-     * 隐藏协议提醒助手
+    },
+    /**
+     * 隐藏协议小助手
      */
-    static hideCookie() {
+    hideCookie: function () {
         setTimeout(() => {
             const cookiesWindow = document.getElementById("cookies-window");
             if (cookiesWindow) {
@@ -463,29 +337,33 @@ class sco {
                 }, 1000);
             }
         }, 3000);
-    }
-
-    static scrollTo(e) {
-        const t = document.getElementById(e);
-        if (t) {
-            const e = t.getBoundingClientRect().top + window.pageYOffset - 80
-                , o = window.pageYOffset
-                , n = e - o;
-            let a = null;
-            window.requestAnimationFrame((function e(t) {
-                    a || (a = t);
-                    const l = t - a
-                        , i = (c = Math.min(l / 0, 1)) < .5 ? 2 * c * c : (4 - 2 * c) * c - 1;
-                    var c;
-                    window.scrollTo(0, o + n * i),
-                    l < 600 && window.requestAnimationFrame(e)
-                }
-            ))
+    },
+    /**
+     * 平滑滚动处理
+     * @param elementId
+     */
+    scrollTo: function (elementId) {
+        const targetElement = document.getElementById(elementId);
+        if (targetElement) {
+            const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - 80;
+            const startPosition = window.pageYOffset;
+            const distanceToScroll = targetPosition - startPosition;
+            let animationStartTime = null;
+            window.requestAnimationFrame((function smoothScroll(currentTime) {
+                animationStartTime = animationStartTime || currentTime;
+                const elapsedTime = currentTime - animationStartTime;
+                const progressRatio = Math.min(elapsedTime / 0, 1);
+                const easing = progressRatio < .5 ? 2 * progressRatio * progressRatio : (4 - 2 * progressRatio) * progressRatio - 1;
+                window.scrollTo(0, startPosition + distanceToScroll * easing);
+                elapsedTime < 600 && window.requestAnimationFrame(smoothScroll);
+            }));
         }
-    }
-
-    static switchCommentBarrage() {
-        var commentBarrageElement = document.querySelector(".comment-barrage");
+    },
+    /**
+     * 控制台热评隐藏显示切换
+     */
+    switchCommentBarrage: function () {
+        let commentBarrageElement = document.querySelector(".comment-barrage");
         if (commentBarrageElement) {
             if (window.getComputedStyle(commentBarrageElement).display === "flex") {
                 commentBarrageElement.style.display = "none";
@@ -499,35 +377,37 @@ class sco {
                 localStorage.setItem("commentBarrageSwitch", "false");
             }
         }
-    }
-
-    static switchHideAside() {
-        const e = document.documentElement.classList;
-        e.contains("hide-aside") ? saveToLocal.set("aside-status", "show", 2) : saveToLocal.set("aside-status", "hide", 2),
-            e.toggle("hide-aside"),
-            e.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
-    }
-
-    static initConsoleState() {
+    },
+    /**
+     * 控制台侧边栏隐藏显示切换
+     */
+    switchHideAside: function () {
+        const htmlClassList = document.documentElement.classList;
+        htmlClassList.contains("hide-aside") ? saveToLocal.set("aside-status", "show", 1) : saveToLocal.set("aside-status", "hide", 1)
+        htmlClassList.toggle("hide-aside");
+        htmlClassList.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on");
+    },
+    initConsoleState: function () {
         document.documentElement.classList.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
-    }
-
-    static sayhi() {
-        document.querySelector("#author-info__sayhi") && (document.getElementById("author-info__sayhi").innerHTML = getTimeState())
-    }
-
-    static changeSayHelloText() {
-        const e = ["🤖️ 数码科技爱好者", "🔍 分享与热心帮助", "🏠 智能家居小能手", "🔨 设计开发一条龙", "🤝 专修交互与设计", "🏃 脚踏实地行动派", "🧱 团队小组发动机", "💢 壮汉人狠话不多"]
-            , t = document.getElementById("author-info__sayhi");
-        let o = e[Math.floor(Math.random() * e.length)];
-        for (; o === lastSayHello;)
-            o = e[Math.floor(Math.random() * e.length)];
-        t.textContent = o,
-            lastSayHello = o
-    }
-
-    static switchDarkMode() {
-        const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' :
+    },
+    /**
+     * 个人信息顶部
+     */
+    changeSayHelloText: function () {
+        const greetings = ["🤖️ 数码科技爱好者", "🔍 分享与热心帮助", "🏠 智能家居小能手", "🔨 设计开发一条龙", "🤝 专修交互与设计", "🏃 脚踏实地行动派", "🧱 团队小组发动机", "💢 壮汉人狠话不多"];
+        const greetingElement = document.getElementById("author-info__sayhi");
+        let randomGreeting = greetings[Math.floor(Math.random() * greetings.length)];
+        while (randomGreeting === lastSayHello) {
+            randomGreeting = greetings[Math.floor(Math.random() * greetings.length)];
+        }
+        greetingElement.textContent = randomGreeting;
+        lastSayHello = randomGreeting;
+    },
+    /**
+     * 昼夜切换
+     */
+    switchDarkMode: function () {
+        let nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' :
             'light'
         if (nowMode === 'light') {
             document.documentElement.setAttribute('data-theme', 'dark')
@@ -540,36 +420,45 @@ class sco {
             utils.snackbarShow(GLOBALCONFIG.lang.theme.light, false, 2000)
             document.querySelector(".menu-darkmode-text").textContent = "浅色模式";
         }
-    }
-
-    static hideTodayCard() {
+    },
+    hideTodayCard: function () {
         document.getElementById('todayCard').classList.add('hide')
-    }
-
-    static toTop() {
+    },
+    /**
+     * 返回顶部
+     */
+    toTop: function () {
         utils.scrollToDest(0)
-    }
-
-    static showConsole() {
-        const el = document.getElementById('console')
+    },
+    /**
+     * 显示控制台
+     */
+    showConsole: function () {
+        let el = document.getElementById('console')
         if (!el.classList.contains('show')) {
             el.classList.add('show')
         }
-    }
-
-    static hideConsole() {
+    },
+    /**
+     * 隐藏控制台
+     */
+    hideConsole: function () {
         const el = document.getElementById('console')
         if (el.classList.contains('show')) {
             el.classList.remove('show')
         }
-    }
-
-    static lightbox(el) {
+    },
+    /**
+     * 灯箱使用
+     */
+    lightbox: function () {
         window.ViewImage && window.ViewImage.init("#article-container img:not(.flink-avatar), .bber-content-img img, #album_detail img, #equipment img, #twikoo .tk-content img:not(.tk-owo-emotion)");
-    }
-
-    static initTheme() {
-        const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    },
+    /**
+     * 初始化
+     */
+    initTheme: function () {
+        let isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
         try {
             const cachedMode = saveToLocal.get('theme');
             if (cachedMode === undefined) {
@@ -587,25 +476,31 @@ class sco {
                 saveToLocal.set('theme', 'light', 0.5)
             }
         }
-    }
-
-    static reflashEssayWaterFall() {
+    },
+    /**
+     *
+     */
+    reflashEssayWaterFall: function () {
         if (document.getElementById('waterfall')) {
             setTimeout(function () {
                 waterfall('#waterfall');
                 document.getElementById("waterfall").classList.add('show');
             }, 500);
         }
-    }
-
-    static addRuntime() {
-        const el = document.getElementById('runtimeshow')
+    },
+    /**
+     * 更新站点运行时间
+     */
+    addRuntime: function () {
+        let el = document.getElementById('runtimeshow')
         if (el && GLOBALCONFIG.runtime) {
             el.innerText = utils.timeDiff(new Date(GLOBALCONFIG.runtime), new Date()) + GLOBALCONFIG.lang.time.runtime
         }
-    }
-
-    static lazyloadImg() {
+    },
+    /**
+     * 懒加载图片
+     */
+    lazyloadImg: function () {
         window.lazyLoadInstance = new LazyLoad({
             elements_selector: 'img',
             threshold: 0,
@@ -614,9 +509,12 @@ class sco {
                 img.setAttribute("src", GLOBALCONFIG.lazyload.error);
             }
         })
-    }
-
-    static toTalk(txt) {
+    },
+    /**
+     * 跳转到输评论
+     * @param txt
+     */
+    toTalk: function (txt) {
         const input = document.querySelector('.el-textarea__inner');
         const evt = new Event('input', {bubbles: true, cancelable: true});
         const inputValue = txt.replace(/\n/g, '\n> ');
@@ -629,11 +527,13 @@ class sco {
         if (commentTips) {
             commentTips.classList.add("show");
         }
-    }
-
-    static initbbtalk() {
+    },
+    /**
+     * 初始化即刻mini
+     */
+    initbbtalk: function () {
         if (document.querySelector('#bber-talk')) {
-            var swiper = new Swiper('.swiper-container', {
+            let swiper = new Swiper('.swiper-container', {
                 direction: 'vertical',
                 loop: true,
                 autoplay: {
@@ -642,10 +542,12 @@ class sco {
                 },
             });
         }
-    }
-
-    static addPhotoFigcaption() {
-        const images = document.querySelectorAll('#article-container img');
+    },
+    /**
+     * 图片添加盲水印
+     */
+    addPhotoFigcaption: function () {
+        let images = document.querySelectorAll('#article-container img');
         images.forEach((image) => {
             const imageParent = image.parentNode;
             const captionText = image.getAttribute('alt');
@@ -658,12 +560,11 @@ class sco {
                 imageParent.insertBefore(captionElement, image.nextSibling);
             }
         });
-    }
-
-    /*
-     * 图片加水印
+    },
+    /**
+     * 下载图片并添加水印
      */
-    static downloadImage(e, t) {
+    downloadImage: function (e, t) {
         rm.hideRightMenu();
         if (0 == rm.downloadimging) {
             rm.downloadimging = !0;
@@ -690,10 +591,11 @@ class sco {
         } else {
             utils.snackbarShow("有正在进行中的下载，请稍后再试");
         }
-    }
-
-
-    static musicToggle() {
+    },
+    /**
+     * 音乐播放暂停
+     */
+    musicToggle: function () {
         const $music = document.querySelector('#nav-music'),
             $meting = document.querySelector('meting-js'),
             $console = document.getElementById('consoleMusic')
@@ -711,32 +613,93 @@ class sco {
             document.getElementById('menu-music-toggle').innerHTML = `<i class="scoicon sco-pause-fill"></i><span>暂停音乐</span>`
         }
         rm.hideRightMenu()
-    }
-
-    static musicSkipBack() {
+    },
+    /**
+     * 音乐上一首
+     */
+    musicSkipBack: function () {
         document.querySelector('meting-js').aplayer.skipBack()
         rm.hideRightMenu()
-    }
-
-    static musicSkipForward() {
+    },
+    /**
+     * 音乐下一首
+     */
+    musicSkipForward: function () {
         document.querySelector('meting-js').aplayer.skipForward()
         rm.hideRightMenu()
-    }
-
-    static musicGetName() {
+    },
+    /**
+     * 获取歌曲名称
+     */
+    musicGetName: function () {
         var e = document.querySelectorAll('.aplayer-title');
         var t = [];
         for (var o = e.length - 1; o >= 0; o--) {
             t[o] = e[o].innerText;
         }
         return t[0];
-    }
-
-    static scrollToComment() {
+    },
+    /**
+     * 跳转到评论
+     */
+    scrollToComment: function () {
         utils.scrollToDest(utils.getEleTop(document.getElementById('post-comment')), 300)
+    },
+    /**
+     * 一些日子灰色页面
+     */
+    setFest: function (){
+        let date = new Date();
+        let currentDate = (date.getMonth() + 1) + '.' + date.getDate();
+
+        const specialDates = ['1.8', '9.9', '7.7', '9.18', '12.13'];
+
+        if (specialDates.includes(currentDate)) {
+            const css = `
+            html {
+                -webkit-filter: grayscale(100%);
+                -moz-filter: grayscale(100%);
+                -ms-filter: grayscale(100%);
+                -o-filter: grayscale(100%);
+                filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
+                _filter: none;
+            }
+        `;
+
+            const styleElement = document.createElement('style');
+            styleElement.appendChild(document.createTextNode(css));
+            document.head.appendChild(styleElement);
+        }
+    },
+    /**
+     * 个人信息顶部文字更新
+     */
+    setTimeState: function (){
+        const el = document.getElementById('author-info__sayhi');
+        if (el) {
+            const timeNow = new Date();
+            const hours = timeNow.getHours();
+            const lang = GLOBALCONFIG.lang.sayhello;
+            const greetings = [
+                { start: 0, end: 5, text: lang.goodnight },
+                { start: 6, end: 10, text: lang.morning },
+                { start: 11, end: 14, text: lang.noon },
+                { start: 15, end: 18, text: lang.afternoon },
+                { start: 19, end: 24, text: lang.night },
+            ];
+            for (let greeting of greetings) {
+                if (hours >= greeting.start && hours <= greeting.end) {
+                    el.innerText = greeting.text;
+                    break;
+                }
+            }
+        }
     }
 }
 
+/*
+ * 代码高亮显示
+ */
 class hightlight {
     static createEle(langEl, item) {
         const fragment = document.createDocumentFragment()
@@ -836,18 +799,17 @@ class tabs {
     }
 }
 
-
 window.refreshFn = () => {
     scrollFn()
     sidebarFn()
-    setTimeState()
     GLOBALCONFIG.comment.enable && newestCommentInit()
-    chageTimeFormate()
+    changeTimeFormat()
     initObserver()
     sco.addRuntime()
     sco.hideCookie()
     sco.addPhotoFigcaption()
-    sco.sayhi()
+    sco.setFest()
+    sco.setTimeState()
     addRightMenuClickEvent()
     GLOBALCONFIG.lazyload.enable && sco.lazyloadImg()
     GLOBALCONFIG.lightbox && sco.lightbox('')
@@ -867,7 +829,6 @@ window.refreshFn = () => {
         if (document.getElementById('album_detail')) sco.reflashEssayWaterFall()
     }
     GLOBALCONFIG.covercolor && coverColor();
-    set_fest()
     sco.initConsoleState()
     if (document.getElementById('history-baidu')) sco.card_history() // 那年今日
     if (document.getElementById('welcome-info')) sco.card_welcome() // 个性定位
@@ -876,7 +837,6 @@ window.refreshFn = () => {
 
 sco.initTheme()
 
-let wleelw_musicPlaying = false
 document.addEventListener('DOMContentLoaded', function () {
     window.refreshFn()
 })
diff --git a/source/js/utils.js b/source/js/utils.js
index 70dc7f0b..d01001c7 100755
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -1,153 +1,154 @@
 const utils = {
-  debounce: function (func, wait, immediate) {
-    let timeout
-    return function () {
-      const context = this
-      const args = arguments
-      const later = function () {
-        timeout = null
-        if (!immediate) func.apply(context, args)
-      }
-      const callNow = immediate && !timeout
-      clearTimeout(timeout)
-      timeout = setTimeout(later, wait)
-      if (callNow) func.apply(context, args)
-    }
-  },
-
-  throttle: function (func, wait, options) {
-    let timeout, context, args
-    let previous = 0
-    if (!options) options = {}
-
-    const later = function () {
-      previous = options.leading === false ? 0 : new Date().getTime()
-      timeout = null
-      func.apply(context, args)
-      if (!timeout) context = args = null
-    }
-
-    const throttled = function () {
-      const now = new Date().getTime()
-      if (!previous && options.leading === false) previous = now
-      const remaining = wait - (now - previous)
-      context = this
-      args = arguments
-      if (remaining <= 0 || remaining > wait) {
-        if (timeout) {
-          clearTimeout(timeout)
-          timeout = null
+    debounce: function (func, wait, immediate) {
+        let timeout
+        return function () {
+            const context = this
+            const args = arguments
+            const later = function () {
+                timeout = null
+                if (!immediate) func.apply(context, args)
+            }
+            const callNow = immediate && !timeout
+            clearTimeout(timeout)
+            timeout = setTimeout(later, wait)
+            if (callNow) func.apply(context, args)
         }
-        previous = now
-        func.apply(context, args)
-        if (!timeout) context = args = null
-      } else if (!timeout && options.trailing !== false) {
-        timeout = setTimeout(later, remaining)
-      }
-    }
-
-    return throttled
-  },
-
-  fadeIn: (ele, time) => {
-    ele.style.cssText = `display:block;animation: to_show ${time}s`
-  },
-
-  fadeOut: (ele, time) => {
-    ele.addEventListener('animationend', function f() {
-      ele.style.cssText = "display: none; animation: '' "
-      ele.removeEventListener('animationend', f)
-    })
-    ele.style.animation = `to_hide ${time}s`
-  },
-
-  sidebarPaddingR: () => {
-    const innerWidth = window.innerWidth
-    const clientWidth = document.body.clientWidth
-    const paddingRight = innerWidth - clientWidth
-    if (innerWidth !== clientWidth) {
-      document.body.style.paddingRight = paddingRight + 'px'
-    }
-  },
-
-  snackbarShow: (text, showAction, duration) => {
-    const sa = (typeof showAction !== 'undefined') ? showAction : false
-    const dur = (typeof duration !== 'undefined') ? duration : 5000
-    document.styleSheets[0].addRule(':root', '--sco-snackbar-time:' + dur + 'ms!important')
-    Snackbar.show({
-      text: text,
-      showAction: sa,
-      duration: dur,
-      pos: 'top-center'
-    })
-  },
-
-  copy: async (text) => {
-    try {
-      await navigator.clipboard.writeText(text)
-      utils.snackbarShow(GLOBALCONFIG.lang.copy.success, false, 2000)
-    } catch (err) {
-      utils.snackbarShow(GLOBALCONFIG.lang.copy.error, false, 2000)
-    }
-  },
-
-  getEleTop: ele => {
-    let actualTop = ele.offsetTop
-    let current = ele.offsetParent
-
-    while (current !== null) {
-      actualTop += current.offsetTop
-      current = current.offsetParent
-    }
-
-    return actualTop
-  },
-
-  randomNum: (length) => {
-    return Math.floor(Math.random() * length)
-  },
-
-  timeDiff: (timeObj, today) => {
-    var timeDiff = today.getTime() - timeObj.getTime();
-    return Math.floor(timeDiff / (1000 * 3600 * 24));
-  },
-
-  scrollToDest: (pos, time = 500) => {
-    const currentPos = window.pageYOffset
-    const isNavFixed = document.getElementById('page-header').classList.contains('nav-fixed')
-    if (currentPos > pos || isNavFixed) pos = pos - 70
-    if ('scrollBehavior' in document.documentElement.style) {
-      window.scrollTo({
-        top: pos,
-        behavior: 'smooth'
-      })
-      return
-    }
-    let start = null
-    pos = + pos
-    window.requestAnimationFrame(function step(currentTime) {
-      start = !start ? currentTime : start
-      const progress = currentTime - start
-      if (currentPos < pos) {
-        window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos)
-      } else {
-        window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time))
-      }
-      if (progress < time) {
-        window.requestAnimationFrame(step)
-      } else {
-        window.scrollTo(0, pos)
-      }
-    })
-  },
-  
-  siblings: (ele, selector) => {
-    return [...ele.parentNode.children].filter((child) => {
-      if (selector) {
-        return child !== ele && child.matches(selector)
-      }
-      return child !== ele
-    })
-  },
-  isMobile: () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
+    },
+
+    throttle: function (func, wait, options) {
+        let timeout, context, args
+        let previous = 0
+        if (!options) options = {}
+
+        const later = function () {
+            previous = options.leading === false ? 0 : new Date().getTime()
+            timeout = null
+            func.apply(context, args)
+            if (!timeout) context = args = null
+        }
+
+        const throttled = function () {
+            const now = new Date().getTime()
+            if (!previous && options.leading === false) previous = now
+            const remaining = wait - (now - previous)
+            context = this
+            args = arguments
+            if (remaining <= 0 || remaining > wait) {
+                if (timeout) {
+                    clearTimeout(timeout)
+                    timeout = null
+                }
+                previous = now
+                func.apply(context, args)
+                if (!timeout) context = args = null
+            } else if (!timeout && options.trailing !== false) {
+                timeout = setTimeout(later, remaining)
+            }
+        }
+
+        return throttled
+    },
+
+    fadeIn: (ele, time) => {
+        ele.style.cssText = `display:block;animation: to_show ${time}s`
+    },
+
+    fadeOut: (ele, time) => {
+        ele.addEventListener('animationend', function f() {
+            ele.style.cssText = "display: none; animation: '' "
+            ele.removeEventListener('animationend', f)
+        })
+        ele.style.animation = `to_hide ${time}s`
+    },
+
+    sidebarPaddingR: () => {
+        const innerWidth = window.innerWidth
+        const clientWidth = document.body.clientWidth
+        const paddingRight = innerWidth - clientWidth
+        if (innerWidth !== clientWidth) {
+            document.body.style.paddingRight = paddingRight + 'px'
+        }
+    },
+
+    snackbarShow: (text, showAction, duration) => {
+        const sa = (typeof showAction !== 'undefined') ? showAction : false
+        const dur = (typeof duration !== 'undefined') ? duration : 5000
+        document.styleSheets[0].addRule(':root', '--sco-snackbar-time:' + dur + 'ms!important')
+        Snackbar.show({
+            text: text,
+            showAction: sa,
+            duration: dur,
+            pos: 'top-center'
+        })
+    },
+
+    copy: async (text) => {
+        try {
+            await navigator.clipboard.writeText(text)
+            utils.snackbarShow(GLOBALCONFIG.lang.copy.success, false, 2000)
+        } catch (err) {
+            utils.snackbarShow(GLOBALCONFIG.lang.copy.error, false, 2000)
+        }
+    },
+
+    getEleTop: ele => {
+        let actualTop = ele.offsetTop
+        let current = ele.offsetParent
+
+        while (current !== null) {
+            actualTop += current.offsetTop
+            current = current.offsetParent
+        }
+
+        return actualTop
+    },
+
+    randomNum: (length) => {
+        return Math.floor(Math.random() * length)
+    },
+
+    timeDiff: (timeObj, today) => {
+        var timeDiff = today.getTime() - timeObj.getTime();
+        return Math.floor(timeDiff / (1000 * 3600 * 24));
+    },
+
+    scrollToDest: (pos, time = 500) => {
+        const currentPos = window.pageYOffset
+        const isNavFixed = document.getElementById('page-header').classList.contains('nav-fixed')
+        if (currentPos > pos || isNavFixed) pos = pos - 70
+        if ('scrollBehavior' in document.documentElement.style) {
+            window.scrollTo({
+                top: pos,
+                behavior: 'smooth'
+            })
+            return
+        }
+        let start = null
+        pos = +pos
+        window.requestAnimationFrame(function step(currentTime) {
+            start = !start ? currentTime : start
+            const progress = currentTime - start
+            if (currentPos < pos) {
+                window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos)
+            } else {
+                window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time))
+            }
+            if (progress < time) {
+                window.requestAnimationFrame(step)
+            } else {
+                window.scrollTo(0, pos)
+            }
+        })
+    },
+
+    siblings: (ele, selector) => {
+        return [...ele.parentNode.children].filter((child) => {
+            if (selector) {
+                return child !== ele && child.matches(selector)
+            }
+            return child !== ele
+        })
+    },
+    isMobile: () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
+    isHidden: e => 0 === e.offsetHeight && 0 === e.offsetWidth
 }

From 13c6f015fe24b162e9d71579f0374482e1a10af1 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Thu, 16 Nov 2023 18:43:04 +0800
Subject: [PATCH 11/43] Bug Repiar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

调整 分类、标签页样式
删除冗余样式代码
---
 layout/category.ejs                        | 17 ++++--
 layout/partial/compoment/home/postList.ejs |  2 +-
 layout/tag.ejs                             | 12 +++-
 source/css/main.css                        | 68 +++++++++++++---------
 4 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/layout/category.ejs b/layout/category.ejs
index 922b7a1d..06c86f2d 100755
--- a/layout/category.ejs
+++ b/layout/category.ejs
@@ -1,18 +1,23 @@
 <main class="layout" id="content-inner">
     <div id="category">
         <div class="category-in-bar">
-            <div class="category-in-bar-tips">分类</div>
             <div id="category-bar">
                 <div class="category-bar-items" id="category-bar-items">
-                    <%- partial('partial/compoment/home/homeCategoryBar', {select:page.category}) %>
+                    <%- partial('partial/compoment/home/homeCategoryBar', {select: page.category}) %>
                 </div>
             </div>
         </div>
-        <div class="article-sort-title"><%= page.category %></div>
-        <div class="article-sort">
-            <%- partial('partial/compoment/mixins/articleSort') %>
+        <div class="recent-posts category_ui" id="recent-posts">
+            <% const currentCategory = page.category; %>
+            <% site.posts.each(post => { %>
+                <% post.categories.each(category => { %>
+                    <% if (category.name === currentCategory) { %>
+                        <%- partial('partial/compoment/home/postList', {post: post}) %>
+                    <% } %>
+                <% }); %>
+            <% }); %>
         </div>
         <%- partial('partial/compoment/mixins/pagination') %>
     </div>
-    <%- partial('partial/compoment/aside/aside') %> 
+    <%- partial('partial/compoment/aside/aside') %>
 </main> 
\ No newline at end of file
diff --git a/layout/partial/compoment/home/postList.ejs b/layout/partial/compoment/home/postList.ejs
index f02a02d4..3698a260 100755
--- a/layout/partial/compoment/home/postList.ejs
+++ b/layout/partial/compoment/home/postList.ejs
@@ -10,7 +10,7 @@
                 <% post.categories.data.forEach(categories => { %>
                     <span class="original"><%= categories.name %></span>
                 <% }) %>
-                <% if(post.prev == null){ %>
+                <% if(post.prev == null && is_home()){ %>
                     <span class="original">最新</span>
                 <% }%>
                     <a class="unvisited-post" href="<%= url_for(post.path) %>" title="<%= post.title %>" data-pjax-state>未读</a>
diff --git a/layout/tag.ejs b/layout/tag.ejs
index 3ce4580a..ce837323 100755
--- a/layout/tag.ejs
+++ b/layout/tag.ejs
@@ -9,9 +9,15 @@
                 </a>
             <% }) %>
         </div>
-        <div class="article-sort-title"><%= page.tag %></div>
-        <div class="article-sort">
-            <%- partial('partial/compoment/mixins/articleSort') %>
+        <div class="recent-posts category_ui" id="recent-posts">
+            <% const currentTag = page.tag; %>
+            <% site.posts.each(post => { %>
+                <% post.tags.each(tag => { %>
+                    <% if (tag.name === currentTag) { %>
+                        <%- partial('partial/compoment/home/postList', {post: post}) %>
+                    <% } %>
+                <% }); %>
+            <% }); %>
         </div>
         <%- partial('partial/compoment/mixins/pagination') %>       
     </div>
diff --git a/source/css/main.css b/source/css/main.css
index cc1e6e4d..bccd6734 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -911,20 +911,6 @@ blockquote footer cite::before {
     -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
 }
 
-/*#recent-posts > .recent-post-item .post_cover .post_cover_tag {*/
-/*    position: absolute;*/
-/*    top: 10px;*/
-/*    left: 5px;*/
-/*    padding: 1px 6px;*/
-/*    background: var(--sco-black-op);*/
-/*    border-radius: 8px;*/
-/*    margin-left: 4px;*/
-/*    font-size: 12px;*/
-/*    font-weight: 700;*/
-/*    color: var(--sco-white);*/
-/*    z-index: 999;*/
-/*}*/
-
 #recent-posts > .recent-post-item .post_cover img.post_bg {
     width: 100%;
     height: 100%;
@@ -7196,16 +7182,8 @@ span.recent-post-top-text {
     -webkit-box-orient: horizontal;
     -webkit-box-align: center;
     align-items: center;
-    transition: all .3s ease 0s
-}
-
-#recent-posts > .recent-post-item:not(:first-child) {
-    margin-bottom: 1rem;
-    position: relative;
-    overflow: hidden;
-    margin-top: 1rem;
     animation: slide-in .6s .4s backwards;
-    will-change: transform
+    transition: all .3s ease 0s
 }
 
 @media screen and (min-width: 1300px) {
@@ -7220,6 +7198,23 @@ span.recent-post-top-text {
         box-shadow: var(--sco-shadow-border)
     }
 
+    #category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item {
+        position: relative;
+        overflow: hidden;
+        animation: slide-in .6s .4s backwards;
+        will-change: transform;
+        width: calc(100% / 2 - .5rem);
+        margin-top: .25rem;
+        margin-bottom: .75rem;
+        box-shadow: var(--sco-shadow-border)
+    }
+
+    #category-bar {
+        margin-bottom: .75rem;
+        box-shadow: var(--sco-shadow-border);
+        animation: slide-in .6s .3s backwards
+    }
+
     #category #category-bar {
         animation: none
     }
@@ -7234,6 +7229,16 @@ span.recent-post-top-text {
     }
 }
 
+@media screen and (min-width: 1200px) {
+    #category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item {
+        animation:slide-in .6s .4s backwards
+    }
+
+    #category-bar {
+        animation: slide-in .6s .3s backwards
+    }
+}
+
 #recent-posts {
     position: relative
 }
@@ -7253,6 +7258,10 @@ span.recent-post-top-text {
         clip-path: inset(0 0 0 0 round 12px)
     }
 
+    #category #recent-posts,#tag #recent-posts {
+        padding: 0
+    }
+
     #recent-posts .recent-post-item .post_cover {
         border-radius: 0 !important;
         width: 100%
@@ -11651,19 +11660,26 @@ a.bb-link-info:hover {
     font-size: .8rem;
     line-height: .8rem;
     color: var(--sco-fontcolor);
-    margin: 8px auto 8px 0;
+    margin-right: auto;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 120px;
     cursor: pointer;
-    padding: 2px 0
+    padding: 8px;
+    border-radius: 12px
 }
 
 #sco-footer .footer-item:hover {
-    color: var(--sco-theme)
+    color: var(--sco-theme);
+    background: var(--sco-main-op-light)
 }
 
+[data-theme=dark] #sco-footer .footer-item:hover {
+    background: var(--sco-theme-op)
+}
+
+
 #sco-footer .footer-group {
     min-width: 120px
 }

From 81b0d0b53bf154a9b85a17af6634f38b9c2b5796 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Thu, 16 Nov 2023 19:13:50 +0800
Subject: [PATCH 12/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复首页文章图片溢出不隐藏bug
完善 文章底部显示
---
 layout/partial/footer.ejs        |  4 ++--
 source/css/_global/animation.css |  2 +-
 source/css/main.css              | 26 ++++++++++++++------------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/layout/partial/footer.ejs b/layout/partial/footer.ejs
index b27ab969..3f074c47 100755
--- a/layout/partial/footer.ejs
+++ b/layout/partial/footer.ejs
@@ -8,8 +8,8 @@
             <span class="scoicon"><%= theme.site.name.custom %></span>
         <% } %>
     </div>
-    <div class="footer-bar-description">来自 <%- config.title %> 最新设计与科技的文章</div>
-    <a class="footer-bar-link" href="/" data-pjax-state="">了解更多</a>
+    <div class="footer-bar-description">来自 <%- config.title %> <%- config.subtitle %>的文章</div>
+    <a class="footer-bar-link" href="/" data-pjax-state>了解更多</a>
 </div>
 <div id="footer_deal">
     <% for(const i in theme.footer.information.left){ %>
diff --git a/source/css/_global/animation.css b/source/css/_global/animation.css
index dd7f30da..980d4323 100644
--- a/source/css/_global/animation.css
+++ b/source/css/_global/animation.css
@@ -360,7 +360,7 @@
     }
 }
 
-@keyframes heo-spin {
+@keyframes sco-spin {
     0% {
         transform: rotate(0)
     }
diff --git a/source/css/main.css b/source/css/main.css
index bccd6734..c82b9192 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -294,7 +294,7 @@ table td, table th {
 }
 
 .fa-spin {
-    animation: heo-spin 1.2s linear infinite;
+    animation: sco-spin 1.2s linear infinite;
     opacity: .6
 }
 
@@ -4891,14 +4891,6 @@ img.footer_mini_logo:hover {
     align-self: center
 }
 
-#footer-wrap a#heoblog_footerlogo:hover {
-    background: var(--sco-none)
-}
-
-.heoblog_footerlogo_img {
-    filter: drop-shadow(0 12px 12px #ee7d7936)
-}
-
 #nav #menus {
     display: flex;
     justify-content: center;
@@ -6951,6 +6943,14 @@ li, ul {
         filter: brightness(.85)
     }
 
+    @media screen and (min-width: 1200px) {
+        #recent-posts>.recent-post-item:hover .post_cover img.post_bg {
+            transform:scale(1.03);
+            transition: .3s ease-in-out;
+            filter: brightness(.85)
+        }
+    }
+
     #recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg {
         transform: scale(1.03)
     }
@@ -7183,7 +7183,8 @@ span.recent-post-top-text {
     -webkit-box-align: center;
     align-items: center;
     animation: slide-in .6s .4s backwards;
-    transition: all .3s ease 0s
+    transition: all .3s ease 0s;
+    overflow: hidden;
 }
 
 @media screen and (min-width: 1300px) {
@@ -11251,8 +11252,9 @@ div#sco-footer-bar a.footer-bar-link {
 }
 
 div#sco-footer-bar a.footer-bar-link:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
+    color: var(--sco-white);
+    transform: scale(1.1);
+    border-color: var(--sco-main);
 }
 
 div#sco-footer-bar .footer-logo {

From 30960eb4849b380e8229109fe3585428158164bf Mon Sep 17 00:00:00 2001
From: yife68 <2714344056@qq.com>
Date: Fri, 17 Nov 2023 09:16:43 +0800
Subject: [PATCH 13/43] =?UTF-8?q?=F0=9F=9B=A0modify=EF=BC=9Acss=5Fprefix?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E4=B8=BA=E5=85=B3=E9=97=AD=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_config.yml b/_config.yml
index c2c62768..9e86d9b7 100755
--- a/_config.yml
+++ b/_config.yml
@@ -432,7 +432,7 @@ says:
 # 开启 css_prefix 后，会自动为一些 CSS 增加前缀。（会增加 20%的体积）
 # --------------------------------------
 
-css_prefix: true
+css_prefix: false
 
 
 # 非必要勿动

From a490e3a8e052057d2877b12a0e5c612872900b18 Mon Sep 17 00:00:00 2001
From: yife68 <2714344056@qq.com>
Date: Fri, 17 Nov 2023 11:07:37 +0800
Subject: [PATCH 14/43] =?UTF-8?q?=E2=9C=A8ci=EF=BC=9A=E6=89=A9=E5=B1=95?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0Ai=E6=91=98=E8=A6=81=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml     | 11 +++++++++++
 layout/post.ejs | 26 ++++++++++++++++++++------
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/_config.yml b/_config.yml
index 9e86d9b7..5c7f57c4 100755
--- a/_config.yml
+++ b/_config.yml
@@ -332,6 +332,17 @@ thirdparty:
     enable: false
     key: # 前往tianli-AI 购买
     rec_method: # 推荐文章方式（all:匹配数据库所有文章、web:仅当前博客文章）默认：web
+    ai_name: # 左上角AI名称
+    ai_tips: # 右上角GPT版本文字
+    ai_introduce: # AI自我介绍
+    hide_shuttle: false # 隐藏矩阵穿梭按钮
+    typewriter: true # 打字机效果
+    speed: 20 # 打字机速度，默认20ms
+    BlackWhite_List:
+      mode: false  # false：全部文章显示摘要AI / black：让指定页面、文章不显示摘要AI / white：只让指定文章（页面）显示摘要AI
+      List: 
+        # - 544ba770
+        # - /article/544ba770.html
 
   # 朋友圈配置
   circle:
diff --git a/layout/post.ejs b/layout/post.ejs
index 202f5de5..540f2b48 100755
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -36,16 +36,30 @@
         <script data-pjax defer>
             // AI构造函数
             new ChucklePostAI({
-                /* 必须配置 */
-                // 文章内容所在的元素属性的选择器，也是AI挂载的容器，AI将会挂载到该容器的最前面
                 el: '#post #article-container',
-                // 驱动AI所必须的key，即是tianliGPT后端服务所必须的key
                 key: '<%= theme.thirdparty.ai.key %>',
-                /* 非必须配置，但最好根据自身需要进行配置 */
-                // 文章标题所在的元素属性的选择器，默认获取当前网页的标题
                 title_el: '.post-title',
-                // 文章推荐方式，all：匹配数据库内所有文章进行推荐，web：仅当前站内的文章，默认all
                 rec_method: '<%= theme.thirdparty.ai.rec_method || 'web' %>',
+                interface: {
+                    name: "<%= theme.thirdparty.ai.ai_name || 'Solitude-AI' %>",
+                    introduce: "<%= theme.thirdparty.ai.ai_introduce || '我是文章辅助AI生成工具: Solitude-AI。你可以点击下方的按钮，让我生成本文简介、推荐相关文章等。' %>",
+                    version: "<%= theme.thirdparty.ai.ai_tips || 'GPT-4' %>",
+                },
+                <% if(theme.thirdparty.ai.hide_shuttle) { %>
+                    hide_shuttle: true,
+                <% } %><% if(theme.thirdparty.ai.typewriter === false) { %>
+                    typewriter: false,
+                <% } %><% if(theme.thirdparty.ai.speed !== 20) { %>
+                    speed: <%= theme.thirdparty.ai.speed %>,
+                <% } %><% if(theme.thirdparty.ai.BlackWhite_List.mode === 'black') { %>
+                    eliminate: [<%- theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', ') %>],
+                <% } else if(theme.thirdparty.ai.BlackWhite_List.mode === 'white') { %>
+                    whitelist: [<%- theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', ') %>],
+                <% } %><% if(page.ai_total_length) { %>
+                    total_length: <%= page.total_length %>,
+                <% } %><% if(page.ai_ratio_string) { %>
+                    ratio_string: "<%= page.ratio_string %>",
+                <% } %>
             })
         </script>
     <% } %>

From 654c3cb63078d9b616cd94594c4dff502ead614d Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Fri, 17 Nov 2023 19:48:50 +0800
Subject: [PATCH 15/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

支持Hexo7.0.0
---
 layout/page/categories.ejs                    |  8 ++---
 layout/page/tags.ejs                          |  8 ++---
 layout/partial/compoment/aside/asideTag.ejs   |  5 ++--
 .../compoment/home/homeCategoryBar.ejs        | 10 +++----
 layout/partial/compoment/nav/left.ejs         |  2 +-
 .../third-party/comments/twikoo_k.ejs         | 29 -------------------
 layout/partial/console.ejs                    | 14 ++++-----
 layout/partial/sidebar.ejs                    |  8 ++---
 layout/tag.ejs                                | 12 ++++----
 9 files changed, 34 insertions(+), 62 deletions(-)
 delete mode 100755 layout/partial/compoment/third-party/comments/twikoo_k.ejs

diff --git a/layout/page/categories.ejs b/layout/page/categories.ejs
index b1c602f2..58ea000d 100755
--- a/layout/page/categories.ejs
+++ b/layout/page/categories.ejs
@@ -1,11 +1,11 @@
 <h1 class="page-title"><%= __('page.category') %></h1>
 <div class="category-lists">
     <div class="tag-cloud-list is-center">
-        <% site.categories.data.forEach(data => { %>
-            <a href="<%= url_for(data.path.toLowerCase()) %>">
+        <% site.categories.each(function (item) { %>
+            <a href="<%= url_for(item.path.toLowerCase()) %>">
                 <span class="tags-punctuation"></span>
-                <%= data.name %>
-                <span class="tagsPageCount"><%= data.length %></span>
+                <%= item.name %>
+                <span class="tagsPageCount"><%= item.length %></span>
             </a>
         <% }) %>
     </div>
diff --git a/layout/page/tags.ejs b/layout/page/tags.ejs
index ba57a7ff..8296a7cd 100755
--- a/layout/page/tags.ejs
+++ b/layout/page/tags.ejs
@@ -1,11 +1,11 @@
 <h1 class="page-title"><%= __('page.tag') %></h1>
 <div class="category-lists">
     <div class="tag-cloud-list is-center">
-        <% site.tags.data.forEach(data => { %>
-            <a href="<%= url_for(data.path) %>">
+        <% site.tags.each(function (tag) { %>
+            <a href="<%= url_for(tag.path) %>">
                 <span class="tags-punctuation"></span>
-                <%= data.name %>
-                <span class="tagsPageCount"><%= data.length %></span>
+                <%= tag.name %>
+                <span class="tagsPageCount"><%= tag.length %></span>
             </a>
         <% }) %>
     </div>
diff --git a/layout/partial/compoment/aside/asideTag.ejs b/layout/partial/compoment/aside/asideTag.ejs
index 9b41cb2c..00ccb5c6 100755
--- a/layout/partial/compoment/aside/asideTag.ejs
+++ b/layout/partial/compoment/aside/asideTag.ejs
@@ -1,5 +1,6 @@
 <div class="card-tag-cloud">
-    <% site.tags.data.slice(0, 50).forEach((data, index) => { %>
-        <a href="<%= url_for(data.path) %>" style="font-size: 0.8rem; color: #d3d3d3"><%= data.name %><sup><%= data.length %></sup></a>
+    <% site.tags.each(function (tag) { %>
+        <a href="<%= url_for(tag.path) %>" style="font-size: 0.8rem; color: #d3d3d3"><%= tag.name %>
+            <sup><%= tag.length %></sup></a>
     <% }) %>
 </div>
\ No newline at end of file
diff --git a/layout/partial/compoment/home/homeCategoryBar.ejs b/layout/partial/compoment/home/homeCategoryBar.ejs
index d16e5ff0..6f6617de 100755
--- a/layout/partial/compoment/home/homeCategoryBar.ejs
+++ b/layout/partial/compoment/home/homeCategoryBar.ejs
@@ -2,10 +2,10 @@
     <div class="category-bar-item <%= is_home() ? 'select' : '' %>" id="category-bar-home">
         <a href="/">首页</a>
     </div>
-    <% for(const item of site.categories.data){ %>
-        <div class="category-bar-item <%= select ? (select === item.name ? 'select' : '') : '' %>">
-            <a href="<%= url_for(item.path) %>"><%= item.name %></a>
+    <% site.tags.each(function(tag){ %>
+        <div class="category-bar-item <%= select ? (select === tag.name ? 'select' : '') : '' %>">
+            <a href="<%= url_for(tag.path) %>"><%= tag.name %></a>
         </div>
-    <% } %>
+    <% }) %>
 </div>
-<a class="category-bar-more" href="/categories/">更多</a>
+<a class="category-bar-more" href="/categories/">更多</a>
\ No newline at end of file
diff --git a/layout/partial/compoment/nav/left.ejs b/layout/partial/compoment/nav/left.ejs
index 32f63922..b65d96d4 100755
--- a/layout/partial/compoment/nav/left.ejs
+++ b/layout/partial/compoment/nav/left.ejs
@@ -9,7 +9,7 @@
           <% for(const y in groupData){ %>
             <% const data=groupData[y] %>
             <a class="back-menu-item" href="<%= url_for(data.url) %>" rel="external nofollow" title="<%= y %>">
-              <img class="back-menu-item-icon" src="<%= data.icon %>" loading="lazy">
+              <img class="back-menu-item-icon" src="<%= data.icon %>" loading="lazy" alt="<%= x %>">
               <span class="back-menu-item-text">
                 <%= y %>
               </span>
diff --git a/layout/partial/compoment/third-party/comments/twikoo_k.ejs b/layout/partial/compoment/third-party/comments/twikoo_k.ejs
deleted file mode 100755
index e07b6f9e..00000000
--- a/layout/partial/compoment/third-party/comments/twikoo_k.ejs
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-    async function initComment(){
-        var initOptions = Object.assign(
-            <%- JSON.stringify(theme.comment.twikoo || {}) %>,
-            {
-                el: '#comment',
-                onCommentLoaded: function() {
-                    GLOBALCONFIG.lightbox && sco.lightbox('#article-container img, #twikoo .tk-content img:not(.tk-owo-emotion)')
-                }
-            }
-        )
-        await twikoo.init(initOptions)
-        <% if(theme.post.meta.comment && is_post()){ %>
-            var countOptions = Object.assign(
-                <%- JSON.stringify(theme.comment.twikoo || {}) %>,
-                {
-                    urls: [window.location.pathname],
-                    includeReply: false
-                }
-            )
-            const res = await twikoo.getCommentsCount(countOptions)
-            try{
-                document.getElementById('twikoo-count').innerText = res[0].count
-            }catch (e) {
-                document.getElementById('twikoo-count').innerText = '加载错误'
-            }
-        <% } %>
-    }
-</script>
\ No newline at end of file
diff --git a/layout/partial/console.ejs b/layout/partial/console.ejs
index 1f25626f..7bf1c21f 100755
--- a/layout/partial/console.ejs
+++ b/layout/partial/console.ejs
@@ -21,10 +21,10 @@
                         <div class="author-content-item-title">寻找感兴趣的领域</div>
                     </div>
                     <div class="card-tag-cloud">
-                        <% site.tags.data.forEach(data => { %>
-                            <a href="<%= url_for(data.path) %>"
-                               style="font-size: 0.8rem; color: #d3d3d3"><%= data.name %>
-                                <sup><%= data.length %></sup></a>
+                        <% site.tags.each(function (tag) { %>
+                            <a href="<%= url_for(tag.path) %>"
+                               style="font-size: 0.8rem; color: #d3d3d3"><%= tag.name %>
+                                <sup><%= tag.length %></sup></a>
                         <% }) %>
                     </div>
                 </div>
@@ -38,13 +38,13 @@
     <div class="button-group">
         <div class="console-btn-item">
             <a class="darkmode_switchbutton" onclick="sco.switchDarkMode()" title="显示模式切换"
-               href="javascript:void(0);" rel="external nofollow" data-pjax-state="">
+               href="javascript:void(0);" rel="external nofollow" data-pjax-state>
                 <i class="scoicon sco-moon-clear-fill" style="font-size: 1rem;"></i>
             </a>
         </div>
         <div class="console-btn-item" id="consoleHideAside">
             <a class="asideSwitch" onclick="sco.switchHideAside()" title="边栏显示控制"
-               href="javascript:void(0);" rel="external nofollow" data-pjax-state="">
+               href="javascript:void(0);" rel="external nofollow" data-pjax-state>
                 <i class="scoicon sco-side-bar-fill" style="font-size: 1rem;"></i>
             </a>
         </div>
@@ -62,7 +62,7 @@
                     <i class="scoicon sco-chat-fill"></i>
                 </a>
             </div>
-        <% }%>
+        <% } %>
     </div>
     <div class="console-mask" onclick="sco.hideConsole()" href="javascript:void(0);" rel="external nofollow"></div>
 </div>
\ No newline at end of file
diff --git a/layout/partial/sidebar.ejs b/layout/partial/sidebar.ejs
index 85eedcfc..54627a0a 100755
--- a/layout/partial/sidebar.ejs
+++ b/layout/partial/sidebar.ejs
@@ -20,10 +20,10 @@
                 <span>标签</span>
             </div>
             <div class="card-tag-cloud">
-                <% site.tags.data.forEach(data => { %>
-                    <a href="<%= url_for(data.path) %>" style="font-size: 1em; color: #d3d3d3"><%= data.name %>
-                        <sup><%= data.length %></sup>
-                    </a>
+                <% site.tags.each(function (tag) { %>
+                    <a href="<%= url_for(tag.path) %>"
+                       style="font-size: 1rem; color: #d3d3d3"><%= tag.name %>
+                        <sup><%= tag.length %></sup></a>
                 <% }) %>
             </div>
         </div>
diff --git a/layout/tag.ejs b/layout/tag.ejs
index ce837323..40f75b56 100755
--- a/layout/tag.ejs
+++ b/layout/tag.ejs
@@ -1,11 +1,11 @@
 <main class="layout" id="content-inner">
     <div id="tag">
         <div id="tag-page-tags">
-            <% site.tags.data.forEach(data => { %>
-                <a href="<%= url_for(data.path) %>" class="<%= data.name === page.tag ? 'select' : '' %>">
+            <% site.tags.each(function (tag) { %>
+                <a href="<%= url_for(tag.path) %>" class="<%= tag.name === page.tag ? 'select' : '' %>">
                     <span class="tags-punctuation"></span>
-                    <%= data.name %>
-                    <span class="tagsPageCount"><%= data.length %></span>
+                    <%= tag.name %>
+                    <span class="tagsPageCount"><%= tag.length %></span>
                 </a>
             <% }) %>
         </div>
@@ -19,7 +19,7 @@
                 <% }); %>
             <% }); %>
         </div>
-        <%- partial('partial/compoment/mixins/pagination') %>       
+        <%- partial('partial/compoment/mixins/pagination') %>
     </div>
-    <%- partial('partial/compoment/aside/aside') %> 
+    <%- partial('partial/compoment/aside/aside') %>
 </main>
\ No newline at end of file

From 65ce693aa7ea064c2eb1d45ba897feeaae6312bf Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Fri, 17 Nov 2023 23:14:29 +0800
Subject: [PATCH 16/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

完善css样式
---
 source/css/main.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/source/css/main.css b/source/css/main.css
index c82b9192..39793cb0 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -11248,10 +11248,13 @@ div#sco-footer-bar a.footer-bar-link {
     border-radius: 20px;
     cursor: pointer;
     margin-top: 8px;
-    font-size: 14px
+    font-size: 14px;
+    cursor: pointer;
+    border: var(--style-border-always);
 }
 
 div#sco-footer-bar a.footer-bar-link:hover {
+    background: var(--sco-main);
     color: var(--sco-white);
     transform: scale(1.1);
     border-color: var(--sco-main);
@@ -11668,7 +11671,7 @@ a.bb-link-info:hover {
     text-overflow: ellipsis;
     max-width: 120px;
     cursor: pointer;
-    padding: 8px;
+    padding: 8px 8px 8px 0;
     border-radius: 12px
 }
 

From d2c4f003f8bd6685df259affa2e2b2dda3f926c7 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Fri, 17 Nov 2023 23:15:07 +0800
Subject: [PATCH 17/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

删除多余
---
 source/css/main.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/source/css/main.css b/source/css/main.css
index 39793cb0..015f74c0 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -11246,7 +11246,6 @@ div#sco-footer-bar a.footer-bar-link {
     padding: 4px 16px;
     background: var(--sco-secondbg);
     border-radius: 20px;
-    cursor: pointer;
     margin-top: 8px;
     font-size: 14px;
     cursor: pointer;

From ee119a784d1e27481e75c9d3f828619abe0118ef Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Fri, 17 Nov 2023 23:20:30 +0800
Subject: [PATCH 18/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复底部页脚样式显示异常
---
 source/css/main.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/source/css/main.css b/source/css/main.css
index 015f74c0..3e849515 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -11670,7 +11670,7 @@ a.bb-link-info:hover {
     text-overflow: ellipsis;
     max-width: 120px;
     cursor: pointer;
-    padding: 8px 8px 8px 0;
+    padding: 8px;
     border-radius: 12px
 }
 
@@ -11721,7 +11721,8 @@ a.bb-link-info:hover {
 
 #sco-footer .footer-title {
     color: var(--sco-secondtext);
-    font-size: .8rem
+    font-size: .8rem;
+    margin-left: 8px;
 }
 
 #footer-bar {

From 6f6ba81ececbaac323a515ebb1e234b7eb7d9709 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sat, 18 Nov 2023 15:06:59 +0800
Subject: [PATCH 19/43] Bug Repair

---
 source/css/_extra/console.styl  |  356 ++
 source/css/_layout/header.styl  | 1687 +++++++++
 source/css/_layout/homeTop.styl |    0
 source/css/main.css             | 6047 ++++++++++---------------------
 4 files changed, 3921 insertions(+), 4169 deletions(-)
 create mode 100644 source/css/_layout/header.styl
 delete mode 100644 source/css/_layout/homeTop.styl

diff --git a/source/css/_extra/console.styl b/source/css/_extra/console.styl
index e69de29b..a1947862 100644
--- a/source/css/_extra/console.styl
+++ b/source/css/_extra/console.styl
@@ -0,0 +1,356 @@
+#console
+  display flex
+  position fixed
+  width 100vw
+  height 100vh
+  top 0
+  left 0
+  z-index 9999
+  justify-content center
+  opacity 0
+  transition .3s ease-out
+  flex-direction column
+  align-items center
+  pointer-events none
+  -webkit-user-select none
+
+  &.show
+    opacity 1
+    pointer-events all
+
+  &.show .close-btn i
+    transform rotate(0)
+
+  .console-card-group
+    display flex
+    justify-content space-between
+    align-items center
+    margin 0 30px
+    transform translateY(20px)
+    transition .3s
+    max-width 1400px
+
+  &.show
+    .console-card-group
+      transform translateY(0)
+      opacity 1
+      transition-delay .1s
+
+  .console-card-group-left
+    margin-right .5rem
+    width 40%
+    height 100%
+
+  .console-card-group-right
+    display flex
+    flex-direction column
+    justify-content center
+    height 100%
+    width 60%
+    overflow hidden
+
+  .console-card
+    background var(--sco-maskbg)
+    border-radius 12px
+    overflow hidden
+    border var(--style-border)
+    box-shadow var(--sco-shadow-border)
+    padding 40px
+
+  .console-card.tags
+    height calc(100% - 172px)
+
+  .console-mask
+    background var(--sco-maskbgdeep)
+    backdrop-filter saturate(180%) blur(20px)
+    -webkit-backdrop-filter blur(20px)
+    width 100vw
+    height 100vh
+    top 0
+    left 0
+    position absolute
+    z-index -1
+    -webkit-backface-visibility hidden
+    -webkit-transform-style preserve-3d
+    transform translateZ(0)
+
+  &.show
+    .console-mask
+      backdrop-filter saturate(180%) blur(20px)
+      -webkit-backdrop-filter blur(20px)
+      transform translateZ(0)
+      animation .6s ease 0s 1 normal none running to_show
+
+  .author-content-item-tips
+    opacity .8
+    font-size .6rem
+    margin-bottom .5rem
+
+  .author-content-item-title
+    font-size 36px
+    font-weight 700
+    line-height 1
+
+  .aside-list-item
+    .thumbnail
+      display flex
+      align-items center
+
+    &:hover
+      .thumbnail
+        color var(--sco-white)
+
+    .content
+      display flex
+      flex-direction column
+      height 100%
+      margin-top .5rem
+
+      .comment
+        -webkit-line-clamp 2
+        display -webkit-box
+        overflow hidden
+        -webkit-box-orient vertical
+        line-height 24px
+        font-size 14px
+
+        &::before
+          content ''
+          width 100%
+          height 100%
+          position absolute
+          top 0
+          left 0
+
+      &:hover
+        .comment
+          color var(--sco-white)
+
+      time
+        font-size 12px
+        color var(--sco-secondtext)
+        margin-top auto
+
+      &:hover
+        time
+          color var(--sco-white)
+
+  .aside-list
+    display flex
+    flex-wrap wrap
+    flex-direction row
+    justify-content space-between
+    margin-top 1.5rem
+
+  .button-group
+    display flex
+    margin 1rem auto 0 auto
+    justify-content center
+    width fit-content
+
+    .console-btn-item
+      width 60px
+      height 60px
+      transition .3s
+      cursor pointer
+  .button-group
+    .console-btn-item
+      &:not(:last-child)
+        margin-right .5rem
+
+      &:hover
+        a
+          background var(--sco-main)
+
+      a
+        width 100%
+        height 100%
+        background var(--sco-card-bg)
+        border var(--style-border)
+        border-radius 60px
+        display flex
+        align-items center
+        justify-content center
+        color var(--sco-fontcolor)
+
+        i
+          font-size 24px
+
+      &.on
+        a
+          background var(--sco-orange)
+          color var(--sco-white)
+          transition .3s
+
+      &:not(.on)
+        a:hover
+          background var(--sco-main) !important
+
+      &:hover
+        a
+          color var(--sco-white)
+
+  .console-card.tags
+    .card-tag-cloud
+      margin-top 1.5rem
+      display flex
+      flex-wrap wrap
+
+      a
+        color var(--sco-fontcolor) !important
+        margin 6px 4px
+        padding 2px 8px
+        border-radius 8px
+        background var(--sco-card-bg)
+        border var(--style-border)
+        font-size 14px !important
+        font-weight 700
+
+        &:hover
+          background var(--sco-main)
+          color var(--sco-white) !important
+
+        sup
+          opacity .6
+
+  .close-btn
+    width 100%
+    height 60px
+    position fixed
+    right max('calc((100% - 1400px) / 2)', someValue)
+    top 0
+    font-size 35px
+    color var(--sco-fontcolor)
+    cursor pointer
+    transition .3s
+    display flex
+    align-items center
+    justify-content center
+    max-width 1400px
+
+    i
+      font-size 32px
+      margin-right 1.5rem
+      margin-left auto
+      line-height 1
+      transform rotate(-30deg)
+      transition .6s
+
+    i:hover
+      color var(--sco-hovertext)
+      background var(--sco-main-op)
+      border-radius 32px
+
+  .console-card.history
+    margin-top 8px
+    padding 0
+    background 0 0
+    box-shadow none
+    border none
+    overflow hidden
+    border-radius 0
+
+    .item-headline
+      display none
+
+  .console-card.history
+    .card-archive-list
+      display flex
+      flex-direction row
+      justify-content space-between
+      flex-wrap wrap
+      height 164px
+
+      li.card-archive-list-item
+        flex 0 0 24%
+
+      .card-archive-list-link
+        border-radius 8px
+        margin-top 8px
+        display flex
+        flex-direction column
+        align-content space-between
+        border var(--style-border)
+        background var(--sco-maskbgdeep)
+        padding 8px 16px
+
+        &:hover
+          background var(--sco-main)
+          color var(--sco-white)
+          cursor pointer
+
+  #card-newest-comments
+    height 100%
+
+  .button-group
+    i
+      font-size 1rem
+
++maxWidth1300()
+  #console
+    .console-card-group
+      justify-content center
+
+    .console-card-group-left
+      display none
+
+    .console-card-group-right
+      width 100%
+      margin 0
+
+    #consoleMusic
+      display none
+
+    #consoleCommentBarrage
+      display none
+
++maxWidth768()
+  #console
+    .console-card-group
+      display none
+
+    #consoleHideAside
+      display none
+
+@media screen and (max-height: 800px)
+  #console
+    .console-card-group
+      display none
+
+    #consoleMusic
+      display none
+
+    #consoleCommentBarrage
+      display none
+
+#card-newest-comments
+  .aside-list-item
+    background: var(--sco-card-bg)
+    border-radius: 12px
+    border: var(--style-border)
+    padding: 12px 16px
+    width: 49%
+    display: flex
+    flex-direction: column
+    height: 150px
+    transition: .3s
+    position: relative
+
+    &:hover
+      background: var(--sco-main)
+      color: var(--sco-white)
+
+    &:not(:last-child)
+      margin-bottom: .5rem
+
+    .thumbnail img
+      width: 20px
+      height: 20px
+      margin-right: 8px
+      border-radius: 20px
+
+    .name
+      text-overflow: ellipsis
+      overflow: hidden
+      white-space: nowrap
+      font-weight: 700
\ No newline at end of file
diff --git a/source/css/_layout/header.styl b/source/css/_layout/header.styl
new file mode 100644
index 00000000..3a76c8b5
--- /dev/null
+++ b/source/css/_layout/header.styl
@@ -0,0 +1,1687 @@
+#page-header {
+  position: relative;
+  width: 100%;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  transition: all .5s ease 0s
+}
+
+#page-header.full_page {
+  height: 20rem;
+  background-attachment: fixed
+}
+
+#page-header.full_page #site-info {
+  position: absolute;
+  top: 7.8rem;
+  padding: 0 .5rem;
+  width: 100%
+}
+
+#page-header #scroll-down .scroll-down-effects, #page-header #site-subtitle, #page-header #site-title {
+  text-align: center;
+  line-height: 1.5
+}
+
+#page-header #site-title {
+  margin: 0;
+  color: var(--sco-white);
+  font-size: 1.85em
+}
+
+@media screen and (min-width: 768px) {
+  #page-header #site-title {
+    font-size: 2.85em
+  }
+}
+
+#page-header #site-subtitle {
+  color: var(--light-grey);
+  font-size: 1.15em
+}
+
+@media screen and (min-width: 768px) {
+  #page-header #site-subtitle {
+    font-size: 1.72em
+  }
+}
+
+#page-header #site_social_icons {
+  display: none;
+  margin: 0 auto;
+  width: 15rem;
+  text-align: center
+}
+
+@media screen and (max-width: 768px) {
+  #page-header #site_social_icons {
+    display: block
+  }
+}
+
+#page-header #site_social_icons .social-icon {
+  margin: 0 .5rem;
+  color: var(--light-grey);
+  text-shadow: rgba(0, 0, 0, .15) .1rem .1rem .2rem;
+  font-size: 1.43em;
+  cursor: pointer
+}
+
+#page-header #scroll-down {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  cursor: pointer;
+  display: none
+}
+
+#page-header #scroll-down .scroll-down-effects {
+  position: relative;
+  width: 100%;
+  color: var(--light-grey);
+  font-size: 30px
+}
+
+#page-header.not-home-page {
+  height: 20rem
+}
+
+@media screen and (max-width: 768px) {
+  #page-header.not-home-page {
+    height: 14rem
+  }
+}
+
+#page-header #page-site-info {
+  position: absolute;
+  top: 10rem;
+  padding: 0 .5rem;
+  width: 100%
+}
+
+@media screen and (max-width: 768px) {
+  #page-header #page-site-info {
+    top: 7rem
+  }
+}
+
+#page-header.post-bg {
+  height: 20rem
+}
+
+@media screen and (max-width: 768px) {
+  #page-header.post-bg {
+    height: 18rem;
+    background-color: var(--sco-main) !important;
+    transition: 0s
+  }
+}
+
+#page-header #post-info {
+  position: absolute;
+  padding: 0 8%;
+  width: 100%;
+  text-align: center
+}
+
+@media screen and (max-width: 900px) {
+  #page-header #post-info {
+    bottom: 1.5rem;
+    text-align: left
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #page-header #post-info {
+    bottom: 1.1rem;
+    padding: 0 1.1rem
+  }
+}
+
+#page-header.not-top-img {
+  margin-bottom: .5rem;
+  height: 60px;
+  background: 0 center
+}
+
+#page-header.not-top-img #nav a {
+  color: var(--sco-fontcolor);
+  text-shadow: none
+}
+
+#page-header.not-top-img #nav a:hover {
+  color: var(--sco-white);
+  text-shadow: none;
+  align-items: center
+}
+
+#page-header #nav a:hover span.scoicon {
+  opacity: 0;
+}
+
+#page-header.nav-fixed #nav {
+  position: fixed;
+  top: 0;
+  z-index: 103;
+  transition: .3s
+}
+
+#page-header.nav-fixed #nav #site-name, #page-header.nav-fixed #nav #toggle-menu, #page-header.nav-fixed #nav a {
+  text-shadow: none
+}
+
+#page-header.nav-visible + .layout > .aside-content > .sticky_layout {
+  top: 70px;
+  transition: top .5s ease 0s
+}
+
+#page-header.nav-fixed > #nav, #page-header.not-top-img > #nav {
+  box-shadow: none
+}
+
+#page-header.nav-fixed #nav {
+  top: 0;
+  box-shadow: none;
+  background: var(--sco-card-bg);
+  outline: 1px solid var(--sco-card-border)
+}
+
+#nav {
+  padding: 0
+}
+
+#page-header #nav {
+  box-shadow: none;
+  transition: 0.3s;
+  display: flex;
+  justify-content: center;
+  -webkit-user-select: none;
+}
+
+@media screen and (max-width: 768px) {
+  #nav {
+    padding: 0
+  }
+
+  #page-header #nav {
+    background: linear-gradient(to top, var(--sco-main-none) 0, var(--sco-main) 100%);
+    transition: 0s
+  }
+}
+
+#page-header #nav #nav-group {
+  max-width: 1400px;
+  width: 100%;
+  display: flex;
+  position: relative;
+  padding: 0 1.5rem;
+  align-items: center
+}
+
+#page-header #nav #nav-right {
+  position: absolute;
+  right: 0;
+  z-index: 102;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  align-items: center;
+  margin-right: 1.5rem;
+  overflow: hidden;
+}
+
+#page-header #nav #nav-left {
+  z-index: 102;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  align-items: center;
+  margin-right: 1.5rem;
+  overflow: hidden
+}
+
+.nav-button {
+  cursor: pointer
+}
+
+#page-header #nav #nav-left .nav-button a, #page-header #nav #nav-right .nav-button a {
+  height: 35px;
+  width: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 40px
+}
+
+#page-header #nav #nav-left .nav-button a i, #page-header #nav #nav-right .nav-button a i {
+  line-height: 1;
+  font-size: 22px
+}
+
+#page-header #nav #nav-right div {
+  margin-left: .5rem;
+  padding: 0
+}
+
+@media screen and (max-width: 768px) {
+  #nav #menus {
+    display: none !important
+  }
+
+  #nav.hide-menu #toggle-menu .site-page {
+    width: 35px;
+    height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center
+  }
+
+  #page-header #nav #nav-group {
+    width: 100%;
+    display: flex;
+    position: relative;
+    padding: 0 12px
+  }
+
+  #page-header #nav #nav-right {
+    margin-right: 12px
+  }
+}
+
+#nav.show {
+  top: 0;
+  transition: .2s;
+  position: fixed;
+  z-index: 91
+}
+
+#page-header.not-top-img #nav {
+  z-index: 500;
+  transition: .3s;
+  background: var(--sco-card-bg)
+}
+
+#page-header.not-top-img:not(.nav-fixed) #nav {
+  background: var(--sco-none);
+  transition: .3s
+}
+
+@media screen and (max-width: 768px) {
+  #page-header.not-top-img:not(.nav-fixed) #nav {
+    transition: 0s
+  }
+}
+
+#page-header.nav-fixed #nav #menus > div.menus_items {
+  transition: .3s;
+  height: 40px;
+  margin: auto 0
+}
+
+#page-header.not-top-img {
+  margin-bottom: 0
+}
+
+#nav #toggle-menu {
+  padding: 0 .4rem
+}
+
+@media screen and (max-width: 768px) {
+  #nav #menus {
+    display: none !important;
+  }
+
+  #nav.hide-menu #toggle-menu .site-page {
+    width: 35px;
+    height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #page-header #nav #nav-group {
+    width: 100%;
+    display: flex;
+    position: relative;
+    padding: 0 12px;
+  }
+
+  #page-header #nav #nav-right {
+    margin-right: 12px;
+  }
+
+  #nav #toggle-menu {
+    display: inline-block !important;
+  }
+}
+
+#page-header.no-top-img {
+  margin-bottom: 0
+}
+
+.layout {
+  padding: 1rem 1.5rem
+}
+
+@media screen and (min-width: 1300px) {
+  .layout {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem 1.5rem
+  }
+}
+
+#site-name .iconfont {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 48px
+}
+
+#site-logo {
+  width: 121px
+}
+
+#nav-totop {
+  position: relative;
+  width: 35px;
+  height: 35px;
+  display: flex;
+  border-radius: 40px;
+  transition: all .3s ease-in-out;
+  align-items: center
+}
+
+#nav-totop.long {
+  width: 80px
+}
+
+#nav-totop .totopbtn {
+  padding-top: 0
+}
+
+#nav-totop .totopbtn i {
+  position: absolute;
+  display: flex;
+  font-size: .8rem;
+  opacity: 0
+}
+
+#nav-totop:hover .totopbtn i {
+  opacity: 1;
+  color: var(--sco-white);
+  transition: .3s
+}
+
+#nav-totop #percent {
+  font-size: 12px;
+  border-radius: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: .3s;
+  white-space: nowrap
+}
+
+.nav-fixed #nav-totop #percent, .page #nav-totop #percent {
+  font-size: 12px;
+  border-radius: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: .3s;
+  white-space: nowrap
+}
+
+#page-header:not(.nav-fixed) #percent {
+  transition: .3s
+}
+
+#page-header:not(.nav-fixed) #nav-totop {
+  width: 0;
+  transform: scale(0);
+  margin-left: 0 !important;
+  overflow: hidden;
+  transition: .3s ease-in
+}
+
+#nav-totop:hover #percent {
+  opacity: 0;
+  font-weight: 700
+}
+
+#page-header #nav #nav-right .nav-button a.totopbtn {
+  width: 25px;
+  height: 25px;
+  border-radius: 40px;
+  background: var(--sco-fontcolor);
+  color: var(--sco-card-bg);
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  transition: .3s
+}
+
+#page-header #nav #nav-right .nav-button.long a.totopbtn {
+  width: 70px
+}
+
+#page-header #nav #nav-right .nav-button:hover a.totopbtn {
+  background: var(--sco-main)
+}
+
+#page-header #nav #nav-right .nav-button:not(.long):hover a.totopbtn {
+  width: 35px;
+  height: 35px;
+  top: 0;
+  right: 0
+}
+
+#nav #site-name i {
+  font-size: 16px;
+  line-height: 35px;
+  padding: 0 12px
+}
+
+.back-home-button {
+  display: flex;
+  width: 35px;
+  height: 35px;
+  padding: 0 !important;
+  align-items: center;
+  justify-content: center;
+  margin-right: 4px;
+  transition: .3s;
+  color: var(--sco-white);
+  border-radius: 40px
+}
+
+.back-home-button i {
+  font-size: 22px
+}
+
+@media screen and (max-width: 768px) {
+  .back-home-button {
+    display: none
+  }
+}
+
+.nav-fixed #nav .back-home-button {
+  color: var(--sco-fontcolor)
+}
+
+#page-header.not-top-img #nav .back-home-button {
+  color: var(--sco-fontcolor)
+}
+
+#page-header.not-top-img #nav .back-home-button i {
+  font-size: 20px
+}
+
+.back-home-button:hover {
+  background: var(--sco-main);
+  color: var(--sco-white) !important
+}
+
+.post .back-home-button:hover {
+  background: var(--sco-white-op);
+  color: var(--sco-white) !important;
+  cursor: pointer;
+}
+
+.nav-fixed .back-home-button:hover {
+  background: var(--sco-main);
+  color: var(--sco-white) !important
+}
+
+.back-menu-list-groups .back-menu-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 340px;
+  justify-content: space-between
+}
+
+.back-menu-list-groups .back-menu-list::before {
+  position: absolute;
+  top: -15px;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  content: ''
+}
+
+.back-menu-list-groups .back-menu-list .back-menu-item {
+  display: flex;
+  align-items: center;
+  margin: 4px 8px;
+  padding: 4px 8px !important;
+  transition: .3s;
+  border-radius: 8px
+}
+
+.back-menu-list-groups .back-menu-list .back-menu-item:hover {
+  background: var(--sco-main) !important;
+  transform: scale(1) !important
+}
+
+.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  background: var(--sco-none)
+}
+
+.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text {
+  font-size: 16px;
+  margin-left: .5rem;
+  color: var(--sco-fontcolor)
+}
+
+@media screen and (max-width: 768px) {
+  .back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text {
+    font-size: 14px
+  }
+}
+
+.back-menu-list-groups .back-menu-list .back-menu-item:hover .back-menu-item-text {
+  color: var(--sco-white)
+}
+
+.back-home-button .back-menu-list-group {
+  display: flex;
+  flex-direction: column
+}
+
+.back-home-button .back-menu-list-groups {
+  position: absolute;
+  top: 65px;
+  left: 1.5rem;
+  background: var(--sco-card-bg);
+  border-radius: 12px;
+  border: var(--style-border);
+  flex-direction: column;
+  font-size: 12px;
+  color: var(--sco-secondtext);
+  box-shadow: var(--sco-shadow-border);
+  transition: 0s;
+  opacity: 0;
+  pointer-events: none
+}
+
+.back-home-button .back-menu-list-groups:hover {
+  border: var(--style-border-hover)
+}
+
+.back-home-button .back-menu-list-group .back-menu-list-title {
+  margin: 8px 0 0 16px;
+  transition: .3s
+}
+
+.back-home-button .back-menu-list-group:hover .back-menu-list-title {
+  color: var(--sco-main)
+}
+
+.back-home-button:hover .back-menu-list-groups {
+  display: flex;
+  opacity: 1;
+  transition: .3s;
+  top: 55px;
+  pointer-events: auto;
+  left: 1.5rem
+}
+
+.back-home-button .back-menu-list .back-menu-item {
+  width: 150px
+}
+
+@media screen and (max-width: 768px) {
+  .back-home-button .back-menu-list-groups {
+    left: 0
+  }
+
+  .back-home-button:hover .back-menu-list-groups {
+    padding-bottom: 8px;
+    box-shadow: var(--sco-shadow-border);
+    left: 0
+  }
+}
+
+#nav #blog_name {
+  flex-wrap: nowrap;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  z-index: 102;
+  transition: .3s
+}
+
+@media screen and (min-width: 900px) {
+  #nav #site-name i {
+    opacity: 1;
+    transition: all .3s, color 0s, opacity .3s
+  }
+
+  #nav #site-name:hover i {
+    opacity: 0
+  }
+
+  #nav #site-name:after {
+    opacity: 0;
+    position: absolute;
+    display: flex;
+    z-index: 1;
+    content: "\e008";
+    font-family: scoicon, serif !important;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    line-height: 1;
+    color: var(--sco-white)
+  }
+
+  .post #nav #site-name:hover {
+    background: var(--sco-white-op);
+    align-items: center
+  }
+
+  .nav-fixed #nav #site-name:hover {
+    background: var(--sco-main)
+  }
+
+  #nav #site-name:hover:after {
+    opacity: 1
+  }
+
+  #nav .back-home-button:hover {
+    box-shadow: var(--sco-shadow-main);
+    cursor: pointer;
+  }
+
+  #nav #page-name-text {
+    display: inline;
+    font-weight: 700;
+    padding: 4px 8px;
+    opacity: 0;
+    transition: .1s;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    text-align: center;
+    cursor: pointer;
+    top: 0;
+    font-size: .9rem;
+    animation-timing-function: ease-in;
+    -webkit-animation-timing-function: ease-in
+  }
+
+  #nav #page-name-text:hover {
+    color: var(--sco-main) !important;
+    background: var(--sco-none);
+    box-shadow: none
+  }
+
+  #page-header.nav-fixed #nav #page-name-text {
+    display: inline;
+    opacity: 1;
+    transition: .3s;
+    line-height: 1
+  }
+
+  #page-header.nav-fixed #nav #page-name-text:hover:after {
+    opacity: 1;
+    line-height: 36px
+  }
+
+  #page-header.nav-fixed #nav div.menus_items {
+    transition: .15s;
+    position: relative;
+    top: -60px
+  }
+
+  #page-header.nav-fixed.nav-visible #nav #page-name-text {
+    display: inline;
+    transition: .15s
+  }
+
+  #page-header.nav-fixed.nav-visible #nav div.menus_items {
+    opacity: 1;
+    transition: .15s;
+    position: relative;
+    top: 0
+  }
+
+  #page-name {
+    align-items: center;
+    display: flex;
+    border-radius: 12px;
+    height: 40px;
+    position: absolute;
+    top: 62px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    justify-content: center;
+    animation-timing-function: ease-out;
+    -webkit-animation-timing-function: ease-out
+  }
+
+  #page-header.nav-fixed #nav #menus {
+    z-index: 100
+  }
+
+  #page-header.nav-fixed.nav-visible #nav #menus {
+    z-index: 101
+  }
+
+  #page-header.nav-fixed #page-name {
+    z-index: 101;
+    transition: .3s;
+    top: 10px
+  }
+
+  #page-header.nav-fixed.nav-visible #page-name {
+    z-index: 100;
+    top: 60px;
+    transition: .3s
+  }
+
+  #page-name-mask {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow: hidden;
+    left: 0
+  }
+}
+
+@media screen and (max-width: 899px) {
+  #nav #page-name-mask {
+    display: none !important
+  }
+}
+
+@media screen and (max-width: 798px) {
+  #nav-music {
+    display: none !important
+  }
+}
+
+#nav-music {
+  display: flex;
+  align-items: center;
+  z-index: 1001;
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  cursor: pointer;
+  transition: .3s;
+  transform-origin: left bottom;
+  box-shadow: var(--sco-shadow-border);
+  border-radius: 40px;
+  overflow: hidden;
+  user-select: none
+}
+
+#nav-music span {
+  user-select: none
+}
+
+#nav-music div {
+  user-select: none
+}
+
+#nav-music.playing {
+  box-shadow: 0 0 12px -3px var(--sco-none);
+  -webkit-animation: playingShadow 5s linear infinite
+}
+
+#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
+  height: 25px;
+  width: 25px;
+  border-radius: 40px;
+  z-index: 1;
+  transition: .3s;
+  -webkit-transform: rotate(0) scale(1);
+  border: var(--style-border-always);
+  -webkit-animation: changeright 24s linear infinite;
+  animation-play-state: paused
+}
+
+#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic {
+  box-shadow: 0 0 14px #ffffffa6;
+  -webkit-transform: rotate(0) scale(1.1);
+  border-color: var(--sco-white);
+  animation-play-state: running
+}
+
+#nav-music .aplayer.aplayer-withlrc .aplayer-info {
+  height: 100%;
+  color: var(--sco-fontcolor);
+  margin-left: 8px;
+  padding: 0;
+  display: flex;
+  align-items: center
+}
+
+#nav-music.playing .aplayer.aplayer-withlrc .aplayer-info {
+  color: var(--sco-white)
+}
+
+#nav-music #nav-music-hoverTips {
+  color: var(--sco-white);
+  background: var(--sco-main);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  border-radius: 40px;
+  opacity: 0;
+  font-size: 12px;
+  z-index: 2;
+  pointer-events: none;
+  transition: .3s
+}
+
+#nav-music:hover:not(.playing) #nav-music-hoverTips {
+  opacity: 1
+}
+
+#nav-music.playing #nav-music-hoverTips {
+  opacity: 0
+}
+
+#nav-music .aplayer {
+  background: var(--sco-card-bg);
+  border-radius: 60px;
+  height: 41px;
+  display: flex;
+  margin: 0;
+  pointer-events: none;
+  transition: .3s;
+  border: var(--style-border);
+  box-shadow: none
+}
+
+#nav-music.playing .aplayer {
+  background: var(--sco-main-op-deep);
+  border: var(--style-border-hover);
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transform: translateZ(0)
+}
+
+#nav-music .aplayer .aplayer-notice {
+  display: none
+}
+
+#nav-music .aplayer .aplayer-miniswitcher {
+  display: none
+}
+
+#nav-music .aplayer .aplayer-body {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 12px 0 8px;
+}
+
+#nav-music .aplayer .aplayer-pic .aplayer-play {
+  opacity: 0
+}
+
+#nav-music .aplayer-list {
+  display: none
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-music {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  z-index: 1
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
+  display: none
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author {
+  display: none
+}
+
+#nav-music .aplayer.aplayer-withlist .aplayer-info {
+  border: none
+}
+
+#nav-music .aplayer .aplayer-pic div {
+  display: none
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title {
+  cursor: pointer;
+  line-height: 1;
+  display: inline-block;
+  white-space: nowrap;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: .3s
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
+  margin: 0;
+  padding: 0
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
+  height: 100%;
+  background: 0 0;
+  opacity: 0
+}
+
+#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
+  opacity: 1
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
+  display: none
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
+  height: 100%;
+  opacity: .1;
+  background-color: var(--sco-white) !important;
+  -webkit-animation: lightBar 5s ease infinite;
+  animation-play-state: paused
+}
+
+#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
+  animation-play-state: running
+}
+
+#nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
+  width: 0;
+  opacity: 0;
+  transition: .3s;
+  margin-left: 8px;
+  margin-top: -2px
+}
+
+#nav-music.playing .aplayer.aplayer-withlrc .aplayer-lrc {
+  width: 200px;
+  margin-bottom: 0;
+  opacity: 1
+}
+
+#nav-music .aplayer .aplayer-lrc p {
+  color: #ffffffb3;
+  filter: blur(1px)
+}
+
+#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
+  color: var(--sco-white);
+  border: none;
+  filter: blur(0)
+}
+
+#nav-music .aplayer .aplayer-lrc:after, #nav-music .aplayer .aplayer-lrc:before {
+  display: none
+}
+
+i.fab {
+  font-size: 20px;
+  vertical-align: middle;
+  margin-bottom: 4px
+}
+
+#body-wrap .full_page:before {
+  background-color: var(--sco-none) !important;
+  transition: 0s !important
+}
+
+.full_page #page-header:before {
+  display: none !important
+}
+
+.snackbar-container {
+  background: var(--sco-main) !important;
+  color: var(--sco-white) !important;
+  border-radius: 0 !important;
+  display: flex;
+  justify-content: center !important;
+  max-width: none !important;
+  min-width: 100% !important;
+  margin: 0 !important;
+  left: 0 !important;
+  height: 60px !important;
+  transform: none !important
+}
+
+.snackbar-container p {
+  font-weight: 700 !important;
+  text-align: center !important;
+  font-size: .8rem !important;
+  display: flex !important;
+  justify-content: center !important
+}
+
+.snackbar-container .action {
+  color: var(--sco-white) !important;
+  padding: 4px 6px !important;
+  font-weight: 700;
+  border-radius: 8px !important;
+  transition: .3s;
+  border: var(--style-border) !important
+}
+
+.snackbar-container .action:hover {
+  color: var(--sco-main) !important;
+  background: var(--sco-white) !important
+}
+
+.snackbar-container::after {
+  position: absolute;
+  width: 0;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: var(--sco-white);
+  opacity: .1;
+  content: "";
+  animation: snackbar-progress var(--sco-snackbar-time) linear forwards;
+  pointer-events: none
+}
+
+#nav a {
+  transition: .3s
+}
+
+#nav a:hover {
+  color: var(--sco-white);
+  background: var(--sco-white-op);
+  transition: .3s
+}
+
+.page #nav a:hover {
+  color: var(--sco-white);
+  background: var(--sco-main);
+  transition: .3s;
+  box-shadow: var(--sco-shadow-main)
+}
+
+.error #nav a:hover {
+  background: var(--sco-main)
+}
+
+.nav-fixed #nav a:hover {
+  background: var(--sco-main);
+  color: var(--sco-white);
+  transition: .3s
+}
+
+@media screen and (min-width: 768px) {
+  .menus_item:hover > a.site-page {
+    color: var(--sco-white) !important;
+    background: var(--sco-white-op);
+    transition: .3s;
+    box-shadow: var(--sco-shadow-main)
+  }
+
+  .page .menus_item:hover > a.site-page {
+    color: var(--sco-white) !important;
+    background: var(--sco-main);
+    transition: .3s;
+    box-shadow: var(--sco-shadow-main)
+  }
+
+  .nav-fixed .menus_item:hover > a.site-page {
+    background-color: var(--sco-main)
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #page-header #nav a:hover span.scoicon {
+    opacity: 1 !important;
+  }
+  #page-header.not-top-img #nav a:hover {
+    align-items: flex-end !important;
+  }
+
+  #nav #site-name span{
+    padding-left: 8px
+  }
+
+  #sidebar #sidebar-menus .menus_items li .site-page:hover {
+    background: var(--sco-main);
+    color: var(--sco-white)
+  }
+
+  #sidebar #sidebar-menus .menus_items li .site-page span:hover {
+    color: var(--sco-white)
+  }
+
+  #nav #site-name i {
+    color: var(--sco-white);
+    transition: .1s
+  }
+
+  .error #nav #site-name i {
+    color: var(--sco-fontcolor)
+  }
+
+  .nav-fixed #nav #site-name i {
+    color: var(--sco-fontcolor);
+    transition: .3s
+  }
+
+  .page #nav #site-name i {
+    color: var(--sco-fontcolor)
+  }
+
+  #nav a:hover {
+    background: var(--sco-none) !important;
+    box-shadow: none !important;
+    transition: .3s;
+    color: var(--sco-fontcolor)
+  }
+
+  #page-header.not-top-img #nav a:hover {
+    color: var(--sco-fontcolor)
+  }
+}
+
+.nav-fixed #nav #site-name i {
+  color: var(--sco-fontcolor);
+  transition: .3s
+}
+
+#search-mask {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  transform: translateZ(0);
+  background: var(--sco-maskbgdeep)
+}
+
+#algolia-search .search-dialog .ais-search-box input {
+  border-radius: 8px !important;
+  border: var(--style-border)
+}
+
+#algolia-search .search-dialog .ais-search-box input:focus {
+  border: var(--style-border-hover)
+}
+
+#algolia-search .search-dialog .ais-search-box input::placeholder {
+  opacity: .6
+}
+
+#algolia-input-panel {
+  margin-bottom: 8px
+}
+
+.search-dialog {
+  border-radius: 12px !important;
+  box-shadow: var(--sco-shadow-lightblack);
+  background: var(--sco-card-bg);
+  border: var(--style-border);
+  transition: .3s
+}
+
+.search-dialog:hover {
+  border: var(--style-border-hover);
+  box-shadow: var(--sco-shadow-theme)
+}
+
+.search-dialog__title {
+  font-weight: 700;
+  color: var(--sco-main)
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a:hover {
+  color: var(--sco-hovertext)
+}
+
+#algolia-search .search-dialog .algolia-logo {
+  display: none
+}
+
+#algolia-tips {
+  padding-top: 12px;
+  color: var(--sco-secondtext);
+  right: 0;
+  margin: auto
+}
+
+#algolia-tips i {
+  font-size: 22px
+}
+
+.algolia-tips-text {
+  margin-left: .4rem
+}
+
+#algolia-search-results {
+  padding-top: 8px
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item:before {
+  display: none
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item {
+  padding-left: 0;
+  font-weight: 700
+}
+
+#algolia-search .search-dialog .ais-pagination.pagination {
+  margin: .2rem 0 0
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item em {
+  color: var(--sco-theme);
+  font-style: normal
+}
+
+#algolia-search .search-dialog .ais-search-box {
+  padding-top: 8px
+}
+
+#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item.current a {
+  border-radius: 4px;
+  background: var(--sco-main);
+  color: var(--sco-white)
+}
+
+#weblogo {
+  align-self: center
+}
+
+#nav #menus {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  position: absolute;
+  height: 60px;
+  left: 0;
+  margin: 0;
+  transform: translateZ(0)
+}
+
+#nav .menus_items {
+  position: relative;
+  width: fit-content;
+  text-align: center;
+  left: 0;
+  right: 0;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center
+}
+
+#menus > div.menus_items > div > a {
+  letter-spacing: .3rem;
+  padding-left: .7rem;
+  font-weight: 700;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 35px;
+  line-height: 35px;
+  border-radius: 40px
+}
+
+#nav .menus_items .menus_item .menus_item_child li a {
+  letter-spacing: 0;
+  display: flex;
+  align-items: center;
+  border-radius: 100px;
+  padding: .3rem .8rem;
+  width: 100%;
+  color: var(--sco-fontcolor) !important;
+  text-shadow: none !important
+}
+
+#page-header.nav-fixed #nav #menus[style*="padding-right: 300px;"] .menus_items {
+  transform: translateX(-150px)
+}
+
+#travellings_button {
+  display: inline;
+  padding: 0 .4rem;
+  transition: .3s
+}
+
+@media screen and (max-width: 768px) {
+  #page-header.nav-fixed #travellings_button {
+    opacity: 0
+  }
+}
+
+[data-theme=dark] #page-header.not-top-img #nav .darkmode_switchbutton {
+  color: var(--sco-yellow)
+}
+
+#page-header.full_page {
+  height: 2rem;
+  background-image: none !important;
+  background-color: var(--sco-none)
+}
+
+#page-header.full_page #site-info {
+  display: none
+}
+
+#page-header.post-bg::before {
+  transition: .3s;
+  height: 20rem;
+  background-color: var(--sco-main);
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  content: ""
+}
+
+@media screen and (max-width: 768px) {
+  #page-header.post-bg {
+    height: 30rem !important;
+    margin-bottom: -12px
+  }
+
+  #page-header.post-bg:before {
+    height: 15rem
+  }
+
+  .post-bg #post-cover {
+    min-height: 15rem !important;
+    height: 70% !important;
+    opacity: 1 !important
+  }
+}
+
+@media screen and (min-width: 1300px) {
+  #page-header.post-bg {
+    height: 25rem
+  }
+
+  #page-header {
+    height: 25rem
+  }
+
+  #page-header.post-bg:before {
+    height: 25rem;
+    opacity: 0;
+    background-color: var(--sco-main);
+    animation: slide-in-op .6s 0s forwards
+  }
+
+  #post-info .post-title {
+    width: 1100px;
+    font-size: 2.6rem !important
+  }
+}
+
+#page-header.post-bg {
+  background-color: var(--sco-background);
+  transition: .6s;
+  overflow: hidden
+}
+
+#page-header {
+  background-image: none !important;
+  display: flex;
+  justify-content: center
+}
+
+#page-header #post-info {
+  top: 0;
+  position: absolute;
+  padding: 0 3rem;
+  margin: 0 auto;
+  z-index: 10;
+  color: var(--sco-white);
+  max-width: 1400px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: calc(100% + 0px);
+  justify-content: center;
+  animation: slide-in .6s 0s backwards
+}
+
+@media screen and (max-width: 768px) {
+  #page-header #post-info {
+    justify-content: normal;
+    padding: 18rem 6% 0;
+  }
+}
+
+@media screen and (min-width: 1300px) {
+  #page-header #post-info {
+    height: calc(100% + 0px);
+    top: 0;
+    display: flex;
+    justify-content: center
+  }
+}
+
+#nav {
+  position: absolute;
+  top: 0;
+  z-index: 90;
+  display: flex;
+  flex-wrap: wrap;
+  -webkit-box-align: center;
+  align-items: center;
+  padding: 0 36px;
+  width: 100%;
+  height: 60px;
+  font-size: 1.3em;
+  opacity: 0;
+  transition: all .5s ease 0s;
+  outline: 1px solid var(--sco-none)
+}
+
+@media screen and (max-width: 768px) {
+  #nav {
+    padding: 0 16px
+  }
+}
+
+#nav.show {
+  opacity: 1;
+  filter: none
+}
+
+#nav #toggle-menu {
+  display: none;
+  padding: .1rem 0 0 .3rem;
+  vertical-align: top
+}
+
+#nav #toggle-menu:hover {
+  color: var(--sco-white)
+}
+
+#nav a {
+  color: var(--sco-white);
+  padding: .3rem .4rem 0;
+  border-radius: 5px
+}
+
+#nav a:hover {
+  color: var(--sco-white)
+}
+
+#nav .menus_items .menus_item:hover .menus_item_child {
+  display: block
+}
+
+#nav .menus_items .menus_item:hover i.expand {
+  transform: rotate(180deg) !important
+}
+
+#nav .menus_items .menus_item i.expand {
+  padding: 4px;
+  transition: transform .3s ease 0s
+}
+
+#nav .menus_items .menus_item .menus_item_child {
+  position: absolute;
+  display: none;
+  margin-top: 8px;
+  padding: 0;
+  background-color: var(--sidebar-bg);
+  box-shadow: rgba(0, 0, 0, .5) 0 5px 20px -4px;
+  animation: .3s ease .1s 1 normal both running sub_menus;
+  border-radius: 5px;
+  white-space: nowrap
+}
+
+#nav .menus_items .menus_item .menus_item_child::before {
+  position: absolute;
+  top: -8px;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  content: ""
+}
+
+#nav .menus_items .menus_item:last-child .menus_item_child::after {
+  position: absolute;
+  top: -60px;
+  right: 0;
+  width: 50%;
+  height: 60px;
+  content: ""
+}
+
+#nav .menus_items .menus_item:first-child .menus_item_child::after {
+  position: absolute;
+  top: -60px;
+  left: 0;
+  width: 50%;
+  height: 60px;
+  content: ""
+}
+
+#nav.hide-menu #toggle-menu {
+  display: inline-block
+}
+
+@media screen and (min-width: 768px) {
+  #nav.hide-menu #toggle-menu {
+    display: none
+  }
+}
+
+#nav.hide-menu #toggle-menu .site-page {
+  font-size: inherit
+}
+
+#nav.hide-menu .menus_items {
+  position: absolute;
+  left: 0;
+  visibility: hidden;
+  opacity: 0
+}
+
+#nav.hide-menu #search-button span {
+  display: none !important
+}
+
+#nav #search-button {
+  display: inline;
+  padding: 0 .4rem
+}
+
+#nav .site-page {
+  position: relative;
+  padding-bottom: .3rem;
+  text-shadow: rgba(0, 0, 0, .3) .05rem .05rem .1rem;
+  font-size: .78em;
+  cursor: pointer
+}
+
+#nav {
+  flex-wrap: nowrap;
+  justify-content: space-between
+}
+
+#nav .menus_items .menus_item .menus_item_child {
+  padding: 6px 4px 8px 4px;
+  border-radius: 100px;
+  background-color: var(--sco-maskbgdeep);
+  box-shadow: var(--sco-shadow-black);
+  border: var(--style-border);
+  transition: .3s;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transform: translateZ(0);
+  top: 35px
+}
+
+#nav .menus_items .menus_item:hover .menus_item_child {
+  border: var(--style-border-hover);
+  box-shadow: var(--sco-shadow-main)
+}
+
+#nav .menus_items .menus_item .menus_item_child:before {
+  top: -10px
+}
+
+#nav .menus_items .menus_item .menus_item_child li a:hover {
+  background: var(--sco-main) !important;
+  color: var(--sco-white) !important;
+  box-shadow: var(--sco-shadow-main);
+  margin: 0 auto;
+  transform: scale(1) !important;
+  padding: .3rem 1rem
+}
+
+#nav .menus_items .menus_item .menus_item_child li a i:not(.fa-brands) {
+  font-size: 22px;
+  margin-right: 8px;
+  line-height: 1
+}
+
+#nav .menus_items .menus_item {
+  padding: 0 .4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+  position: relative
+}
+
+#nav .menus_items .menus_item .menus_item_child li {
+  display: inline-flex;
+  list-style: none;
+  border-radius: 5px;
+  margin: 0 4px
+}
+
+#nav a {
+  border-radius: 8px
+}
+
+.nav-fixed #nav a {
+  color: var(--sco-fontcolor);
+  transition: .3s
+}
\ No newline at end of file
diff --git a/source/css/_layout/homeTop.styl b/source/css/_layout/homeTop.styl
deleted file mode 100644
index e69de29b..00000000
diff --git a/source/css/main.css b/source/css/main.css
index 3e849515..23acb4b0 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -1666,184 +1666,6 @@ blockquote footer cite::before {
     width: auto
 }
 
-#page-header {
-    position: relative;
-    width: 100%;
-    background-position: center center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    transition: all .5s ease 0s
-}
-
-#page-header.full_page {
-    height: 20rem;
-    background-attachment: fixed
-}
-
-#page-header.full_page #site-info {
-    position: absolute;
-    top: 7.8rem;
-    padding: 0 .5rem;
-    width: 100%
-}
-
-#page-header #scroll-down .scroll-down-effects, #page-header #site-subtitle, #page-header #site-title {
-    text-align: center;
-    line-height: 1.5
-}
-
-#page-header #site-title {
-    margin: 0;
-    color: var(--sco-white);
-    font-size: 1.85em
-}
-
-@media screen and (min-width: 768px) {
-    #page-header #site-title {
-        font-size: 2.85em
-    }
-}
-
-#page-header #site-subtitle {
-    color: var(--light-grey);
-    font-size: 1.15em
-}
-
-@media screen and (min-width: 768px) {
-    #page-header #site-subtitle {
-        font-size: 1.72em
-    }
-}
-
-#page-header #site_social_icons {
-    display: none;
-    margin: 0 auto;
-    width: 15rem;
-    text-align: center
-}
-
-@media screen and (max-width: 768px) {
-    #page-header #site_social_icons {
-        display: block
-    }
-}
-
-#page-header #site_social_icons .social-icon {
-    margin: 0 .5rem;
-    color: var(--light-grey);
-    text-shadow: rgba(0, 0, 0, .15) .1rem .1rem .2rem;
-    font-size: 1.43em;
-    cursor: pointer
-}
-
-#page-header #scroll-down {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    cursor: pointer;
-    display: none
-}
-
-#page-header #scroll-down .scroll-down-effects {
-    position: relative;
-    width: 100%;
-    color: var(--light-grey);
-    font-size: 30px
-}
-
-#page-header.not-home-page {
-    height: 20rem
-}
-
-@media screen and (max-width: 768px) {
-    #page-header.not-home-page {
-        height: 14rem
-    }
-}
-
-#page-header #page-site-info {
-    position: absolute;
-    top: 10rem;
-    padding: 0 .5rem;
-    width: 100%
-}
-
-@media screen and (max-width: 768px) {
-    #page-header #page-site-info {
-        top: 7rem
-    }
-}
-
-#page-header.post-bg {
-    height: 20rem
-}
-
-@media screen and (max-width: 768px) {
-    #page-header.post-bg {
-        height: 18rem;
-        background-color: var(--sco-main) !important;
-        transition: 0s
-    }
-}
-
-#page-header #post-info {
-    position: absolute;
-    padding: 0 8%;
-    width: 100%;
-    text-align: center
-}
-
-@media screen and (max-width: 900px) {
-    #page-header #post-info {
-        bottom: 1.5rem;
-        text-align: left
-    }
-}
-
-@media screen and (max-width: 768px) {
-    #page-header #post-info {
-        bottom: 1.1rem;
-        padding: 0 1.1rem
-    }
-}
-
-#page-header.not-top-img {
-    margin-bottom: .5rem;
-    height: 60px;
-    background: 0 center
-}
-
-#page-header.not-top-img #nav a {
-    color: var(--sco-fontcolor);
-    text-shadow: none
-}
-
-#page-header.not-top-img #nav a:hover {
-    color: var(--sco-white);
-    text-shadow: none;
-    align-items: center
-}
-
-#page-header #nav a:hover span.scoicon {
-    opacity: 0;
-}
-
-#page-header.nav-fixed #nav {
-    position: fixed;
-    top: 0;
-    z-index: 103;
-    transition: .3s
-}
-
-#page-header.nav-fixed #nav #site-name, #page-header.nav-fixed #nav #toggle-menu, #page-header.nav-fixed #nav a {
-    text-shadow: none
-}
-
-#page-header.nav-visible + .layout > .aside-content > .sticky_layout {
-    top: 70px;
-    transition: top .5s ease 0s
-}
-
 #page h1.page-title {
     margin: .4rem 0 1rem
 }
@@ -1924,144 +1746,6 @@ blockquote footer cite::before {
     text-decoration: underline
 }
 
-#nav {
-    position: absolute;
-    top: 0;
-    z-index: 90;
-    display: flex;
-    flex-wrap: wrap;
-    -webkit-box-align: center;
-    align-items: center;
-    padding: 0 36px;
-    width: 100%;
-    height: 60px;
-    font-size: 1.3em;
-    opacity: 0;
-    transition: all .5s ease 0s;
-    outline: 1px solid var(--sco-none)
-}
-
-@media screen and (max-width: 768px) {
-    #nav {
-        padding: 0 16px
-    }
-}
-
-#nav.show {
-    opacity: 1;
-    filter: none
-}
-
-#nav #toggle-menu {
-    display: none;
-    padding: .1rem 0 0 .3rem;
-    vertical-align: top
-}
-
-#nav #toggle-menu:hover {
-    color: var(--sco-white)
-}
-
-#nav a {
-    color: var(--sco-white);
-    padding: .3rem .4rem 0;
-    border-radius: 5px
-}
-
-#nav a:hover {
-    color: var(--sco-white)
-}
-
-#nav .menus_items .menus_item:hover .menus_item_child {
-    display: block
-}
-
-#nav .menus_items .menus_item:hover i.expand {
-    transform: rotate(180deg) !important
-}
-
-#nav .menus_items .menus_item i.expand {
-    padding: 4px;
-    transition: transform .3s ease 0s
-}
-
-#nav .menus_items .menus_item .menus_item_child {
-    position: absolute;
-    display: none;
-    margin-top: 8px;
-    padding: 0;
-    background-color: var(--sidebar-bg);
-    box-shadow: rgba(0, 0, 0, .5) 0 5px 20px -4px;
-    animation: .3s ease .1s 1 normal both running sub_menus;
-    border-radius: 5px;
-    white-space: nowrap
-}
-
-#nav .menus_items .menus_item .menus_item_child::before {
-    position: absolute;
-    top: -8px;
-    left: 0;
-    width: 100%;
-    height: 20px;
-    content: ""
-}
-
-#nav .menus_items .menus_item:last-child .menus_item_child::after {
-    position: absolute;
-    top: -60px;
-    right: 0;
-    width: 50%;
-    height: 60px;
-    content: ""
-}
-
-#nav .menus_items .menus_item:first-child .menus_item_child::after {
-    position: absolute;
-    top: -60px;
-    left: 0;
-    width: 50%;
-    height: 60px;
-    content: ""
-}
-
-#nav.hide-menu #toggle-menu {
-    display: inline-block
-}
-
-@media screen and (min-width: 768px) {
-    #nav.hide-menu #toggle-menu {
-        display: none
-    }
-}
-
-#nav.hide-menu #toggle-menu .site-page {
-    font-size: inherit
-}
-
-#nav.hide-menu .menus_items {
-    position: absolute;
-    left: 0;
-    visibility: hidden;
-    opacity: 0
-}
-
-#nav.hide-menu #search-button span {
-    display: none !important
-}
-
-#nav #search-button {
-    display: inline;
-    padding: 0 .4rem
-}
-
-#nav .site-page {
-    position: relative;
-    padding-bottom: .3rem;
-    text-shadow: rgba(0, 0, 0, .3) .05rem .05rem .1rem;
-    font-size: .78em;
-    cursor: pointer
-}
-
 .li-style {
     width: 100%;
     height: 25px;
@@ -3537,33 +3221,6 @@ html {
     filter: brightness(1)
 }
 
-#nav {
-    flex-wrap: nowrap;
-    justify-content: space-between
-}
-
-#nav .menus_items .menus_item .menus_item_child {
-    padding: 6px 4px 8px 4px;
-    border-radius: 100px;
-    background-color: var(--sco-maskbgdeep);
-    box-shadow: var(--sco-shadow-black);
-    border: var(--style-border);
-    transition: .3s;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0);
-    top: 35px
-}
-
-#nav .menus_items .menus_item:hover .menus_item_child {
-    border: var(--style-border-hover);
-    box-shadow: var(--sco-shadow-main)
-}
-
-#page-header.nav-fixed > #nav, #page-header.not-top-img > #nav {
-    box-shadow: none
-}
-
 #sidebar #sidebar-menus .menus_items .site-page span:hover {
     color: var(--sco-fontcolor)
 }
@@ -3576,2520 +3233,1135 @@ html {
     line-height: 1
 }
 
-#nav .menus_items .menus_item .menus_item_child:before {
-    top: -10px
+hr {
+    display: none
 }
 
-#nav .menus_items .menus_item .menus_item_child li a:hover {
-    background: var(--sco-main) !important;
-    color: var(--sco-white) !important;
-    box-shadow: var(--sco-shadow-main);
-    margin: 0 auto;
-    transform: scale(1) !important;
-    padding: .3rem 1rem
+#footer-wrap {
+    color: var(--sco-fontcolor)
 }
 
-#nav .menus_items .menus_item .menus_item_child li a i:not(.fa-brands) {
-    font-size: 22px;
-    margin-right: 8px;
-    line-height: 1
+#footer-wrap a {
+    color: var(--sco-fontcolor);
+    height: 44px;
+    line-height: 36px
 }
 
-#nav .menus_items .menus_item {
-    padding: 0 .4rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: auto;
-    position: relative
+#footer-wrap a:hover {
+    color: var(--sco-hovertext);
+    background-color: var(--sco-none)
 }
 
-#nav .menus_items .menus_item .menus_item_child li {
-    display: inline-flex;
-    list-style: none;
-    border-radius: 5px;
-    margin: 0 4px
+div#footer_deal {
+    justify-content: center;
+    display: flex;
+    padding-top: 2rem;
+    align-items: center
 }
 
-#nav a {
-    border-radius: 8px
+#card-poem {
+    display: flex;
+    flex-direction: column;
+    padding: .5rem !important;
+    min-height: 130px
 }
 
-.nav-fixed #nav a {
-    color: var(--sco-fontcolor);
-    transition: .3s
+div#poem_sentence {
+    text-align: center;
+    font-family: serif, cursive;
+    line-height: 1.4;
+    margin-bottom: .5rem;
+    padding: 1rem;
+    border-radius: 12px;
+    background: var(--sco-secondbg);
+    min-height: 62px
 }
 
-.topbar-html {
-    background: #aeaeae !important
+div#poem_info {
+    display: flex;
+    color: var(--sco-secondtext);
+    font-size: .5rem;
+    justify-content: center;
+    flex-wrap: wrap
 }
 
-#mozi-assist {
-    position: fixed;
-    z-index: 999
+div#poem_author {
+    order: 1;
+    padding: 2px;
+    margin-left: 8px
 }
 
-.topbar-html-content {
-    height: 160px !important;
-    align-items: flex-end;
-    padding-bottom: 12px
+div#poem_dynasty {
+    order: 0;
+    padding: 2px 4px 2px 6px;
+    background: var(--sco-card-btn-bg);
+    color: var(--sco-fontcolor);
+    border-radius: 8px
 }
 
-.topbar-html {
-    box-shadow: none !important
+@media screen and (max-width: 768px) {
+    img.footer_mini_logo {
+        display: none
+    }
+
+    div#footer_deal {
+        flex-wrap: wrap;
+        flex-direction: row
+    }
 }
 
-.bigtext-html-btn {
+a.deal_link {
     display: flex;
+    margin: 1rem 27px;
+    color: var(--sco-card-bg);
+    border-radius: 3rem;
+    width: 32px;
+    height: 32px;
+    background: var(--sco-fontcolor);
+    justify-content: center;
     align-items: center;
-    justify-content: center
+    transition: .3s
 }
 
-.topbar-html-content-item img {
-    border-radius: 12px !important
+a.deal_link:hover {
+    color: var(--sco-white);
+    background: var(--sco-main);
+    transform: scale(1.1);
 }
 
-#page-header.nav-fixed #nav {
-    top: 0;
-    box-shadow: none;
-    background: var(--sco-card-bg);
-    outline: 1px solid var(--sco-card-border)
+img.footer_mini_logo {
+    width: 50px;
+    height: 50px;
+    margin: 0 1rem;
+    cursor: pointer;
+    transition: cubic-bezier(0, 0, 0, 1.29) .5s;
+    -webkit-user-select: none;
+    border-radius: 50px
 }
 
-#nav {
-    padding: 0
+img.footer_mini_logo:hover {
+    -webkit-backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d;
+    transform: scale(1.2)
 }
 
-#page-header #nav {
-    box-shadow: none;
-    transition: 0.3s;
-    display: flex;
-    justify-content: center;
-    -webkit-user-select: none;
+#rightMenu {
+    display: none;
+    position: fixed;
+    padding: 0 .25rem;
+    width: 9rem;
+    height: fit-content;
+    top: 10%;
+    left: 10%;
+    background-color: var(--sco-maskbgdeep);
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    transform: translateZ(0);
+    color: var(--sco-fontcolor);
+    border-radius: 12px;
+    z-index: 99994;
+    border: var(--style-border);
+    user-select: none;
+    box-shadow: var(--sco-shadow-black);
+    transition: border .3s
 }
 
-@media screen and (max-width: 768px) {
-    #nav {
-        padding: 0
-    }
-
-    #page-header #nav {
-        background: linear-gradient(to top, var(--sco-main-none) 0, var(--sco-main) 100%);
-        transition: 0s
-    }
+#rightMenu:hover {
+    border: var(--style-border-hover);
+    box-shadow: var(--sco-shadow-theme)
 }
 
-#page-header #nav #nav-group {
-    max-width: 1400px;
-    width: 100%;
-    display: flex;
-    position: relative;
-    padding: 0 1.5rem;
-    align-items: center
+#rightMenu .rightMenu-group {
+    padding: .35rem .3rem;
+    transition: .3s
 }
 
-#page-header #nav #nav-right {
-    position: absolute;
-    right: 0;
-    z-index: 102;
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    align-items: center;
-    margin-right: 1.5rem;
-    overflow: hidden;
+#rightMenu .rightMenu-line {
+    border-top: 1px dashed var(--sco-theme-op)
 }
 
-#page-header #nav #nav-left {
-    z-index: 102;
+#rightMenu .rightMenu-group.rightMenu-small {
     display: flex;
-    flex-direction: row;
-    height: 100%;
-    align-items: center;
-    margin-right: 1.5rem;
-    overflow: hidden
+    justify-content: space-between
 }
 
-.nav-button {
+#rightMenu .rightMenu-group .rightMenu-item {
+    border-radius: 8px;
+    transition: .3s;
     cursor: pointer
 }
 
-#page-header #nav #nav-left .nav-button a, #page-header #nav #nav-right .nav-button a {
-    height: 35px;
-    width: 35px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 40px
+#rightMenu .rightMenu-line .rightMenu-item {
+    margin: .25rem 0;
+    padding: .25rem 0
 }
 
-#page-header #nav #nav-left .nav-button a i, #page-header #nav #nav-right .nav-button a i {
-    line-height: 1;
-    font-size: 22px
+#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
+    display: flex
 }
 
-#page-header #nav #nav-right div {
-    margin-left: .5rem;
-    padding: 0
+#rightMenu .rightMenu-group .rightMenu-item:hover {
+    background-color: var(--sco-main);
+    color: var(--sco-white);
+    box-shadow: var(--sco-shadow-main)
 }
 
-@media screen and (max-width: 768px) {
-    #nav #menus {
-        display: none !important
-    }
+#rightMenu .rightMenu-group .rightMenu-item i {
+    display: inline-block;
+    text-align: center;
+    line-height: 1.5rem;
+    width: 1.5rem;
+    padding: 0 .25rem
+}
 
-    #nav.hide-menu #toggle-menu .site-page {
-        width: 35px;
-        height: 35px;
-        display: flex;
-        align-items: center;
-        justify-content: center
-    }
+#rightMenu .rightMenu-line .rightMenu-item i {
+    margin: 0 .25rem
+}
 
-    #page-header #nav #nav-group {
-        width: 100%;
-        display: flex;
-        position: relative;
-        padding: 0 12px
-    }
+#rightMenu .rightMenu-group .rightMenu-item span {
+    line-height: 1.5rem
+}
 
-    #page-header #nav #nav-right {
-        margin-right: 12px
-    }
+.rightMenu-small .rightMenu-item {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center
 }
 
-#nav.show {
-    top: 0;
-    transition: .2s;
+#rightmenu-mask {
     position: fixed;
-    z-index: 91
+    width: 100vw;
+    height: 100vh;
+    background: 0 0;
+    top: 0;
+    left: 0;
+    display: none;
+    margin: 0 !important;
+    z-index: 99993
 }
 
-#page-header.not-top-img #nav {
-    z-index: 500;
-    transition: .3s;
-    background: var(--sco-card-bg)
-}
 
-#page-header.not-top-img:not(.nav-fixed) #nav {
-    background: var(--sco-none);
-    transition: .3s
+#footer {
+    background: linear-gradient(180deg, var(--sco-card-bg-none) 0, var(--sco-card-bg) 25%);
+    margin-top: .5rem;
+    display: flex;
+    flex-direction: column
 }
 
 @media screen and (max-width: 768px) {
-    #page-header.not-top-img:not(.nav-fixed) #nav {
-        transition: 0s
+    #footer {
+        background: linear-gradient(180deg, var(--sco-background) 0, var(--sco-card-bg) 25%);
+        margin-top: 0;
+        z-index: 999
     }
 }
 
-#page-header.nav-fixed #nav #menus > div.menus_items {
-    transition: .3s;
-    height: 40px;
-    margin: auto 0
-}
-
-#page-header.not-top-img {
-    margin-bottom: 0
+#algolia-search .ais-hits--item.algolia-hit-item a {
+    color: var(--sco-fontcolor)
 }
 
-#nav #toggle-menu {
-    padding: 0 .4rem
+.aplayer .aplayer-list ol {
+    backdrop-filter: blur(1px);
+    -webkit-backdrop-filter: blur(1px);
+    transform: translateZ(0)
 }
 
-@media screen and (max-width: 768px) {
-    #nav #menus {
-        display: none !important;
-    }
-
-    #nav.hide-menu #toggle-menu .site-page {
-        width: 35px;
-        height: 35px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    #page-header #nav #nav-group {
-        width: 100%;
-        display: flex;
-        position: relative;
-        padding: 0 12px;
-    }
-
-    #page-header #nav #nav-right {
-        margin-right: 12px;
-    }
-
-    #nav #toggle-menu {
-        display: inline-block !important;
-    }
+.aplayer .aplayer-lrc:after {
+    display: none !important
 }
 
-#page-header.no-top-img {
-    margin-bottom: 0
+.aplayer.aplayer-withlrc.aplayer-withlist {
+    border-radius: 12px
 }
 
-.layout {
-    padding: 1rem 1.5rem
+#article-container .aplayer {
+    border-radius: 12px;
+    min-height: 90px;
+    background: var(--sco-card-bg);
+    border: var(--style-border);
+    box-shadow: var(--sco-shadow-border)
 }
 
-@media screen and (min-width: 1300px) {
-    .layout {
-        display: flex;
-        justify-content: space-between;
-        padding: 1rem 1.5rem
-    }
+#article-container.flink {
+    margin-top: 1rem
 }
 
-#site-name .iconfont {
-    font-size: 20px;
-    font-weight: 400;
-    line-height: 48px
+#article-container.flink h2 {
+    margin-top: .5rem;
+    margin-bottom: 0
 }
 
-#site-logo {
-    width: 121px
+#algolia-hits .tag-list {
+    padding: 4px 8px;
+    border-radius: 8px;
+    margin-right: .5rem;
+    margin-top: .5rem;
+    border: var(--style-border-always);
+    cursor: pointer
 }
 
-#nav-totop {
-    position: relative;
-    width: 35px;
-    height: 35px;
-    display: flex;
-    border-radius: 40px;
-    transition: all .3s ease-in-out;
-    align-items: center
+#algolia-hits .tag-list:hover {
+    background: var(--sco-main);
+    color: var(--sco-white)
 }
 
-#nav-totop.long {
-    width: 80px
+#mobile-sidebar #mobile-sidebar-menus.open {
+    background: var(--sco-maskbg)
 }
 
-#nav-totop .totopbtn {
-    padding-top: 0
+#aside-content .card-info .card-info-data > .card-info-data-item {
+    transition: .3s
 }
 
-#nav-totop .totopbtn i {
-    position: absolute;
-    display: flex;
-    font-size: .8rem;
-    opacity: 0
+#sidebar #sidebar-menus .site-data {
+    margin: 1rem 0;
+    padding: .6rem .5rem
 }
 
-#nav-totop:hover .totopbtn i {
-    opacity: 1;
-    color: var(--sco-white);
-    transition: .3s
+#sidebar-menus > hr {
+    display: none
 }
 
-#nav-totop #percent {
-    font-size: 12px;
-    border-radius: 35px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: .3s;
-    white-space: nowrap
+#card-info-btn {
+    border-radius: 25px;
+    overflow: hidden
 }
 
-.nav-fixed #nav-totop #percent, .page #nav-totop #percent {
-    font-size: 12px;
-    border-radius: 35px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: .3s;
-    white-space: nowrap
+#card-info-btn:before {
+    border-radius: 25px
 }
 
-#page-header:not(.nav-fixed) #percent {
-    transition: .3s
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a {
+    color: var(--sco-fontcolor);
+    width: auto;
+    max-width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden
 }
 
-#page-header:not(.nav-fixed) #nav-totop {
-    width: 0;
-    transform: scale(0);
-    margin-left: 0 !important;
-    overflow: hidden;
-    transition: .3s ease-in
+.not-index-bg {
+    height: 2rem !important;
+    background-image: none !important;
+    background-color: var(--sco-none) !important
 }
 
-#nav-totop:hover #percent {
-    opacity: 0;
-    font-weight: 700
+.not-index-bg img {
+    display: none
 }
 
-#page-header #nav #nav-right .nav-button a.totopbtn {
-    width: 25px;
-    height: 25px;
-    border-radius: 40px;
-    background: var(--sco-fontcolor);
-    color: var(--sco-card-bg);
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    transition: .3s
+.not-index-bg #page-site-info {
+    display: none
 }
 
-#page-header #nav #nav-right .nav-button.long a.totopbtn {
-    width: 70px
+.pace {
+    -webkit-pointer-events: none;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    z-index: 2000;
+    position: fixed;
+    margin: auto;
+    top: 4px;
+    left: 0;
+    right: 0;
+    height: 8px;
+    border-radius: 8px;
+    width: 4rem;
+    background: var(--sco-secondbg);
+    border: var(--style-border);
+    overflow: hidden
 }
 
-#page-header #nav #nav-right .nav-button:hover a.totopbtn {
-    background: var(--sco-main)
+.pace-inactive .pace-progress {
+    opacity: 0;
+    transition: .3s ease-in
 }
 
-#page-header #nav #nav-right .nav-button:not(.long):hover a.totopbtn {
-    width: 35px;
-    height: 35px;
+.pace .pace-progress {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    max-width: 200px;
+    z-index: 2000;
+    display: block;
+    position: absolute;
     top: 0;
-    right: 0
+    right: 100%;
+    height: 100%;
+    width: 100%;
+    background: var(--sco-logo-color);
+    animation: gradient 2s ease infinite;
+    background-size: 200%
 }
 
-#nav #site-name i {
-    font-size: 16px;
-    line-height: 35px;
-    padding: 0 12px
+.pace.pace-inactive {
+    opacity: 0;
+    transition: .3s;
+    top: -8px
 }
 
-.back-home-button {
-    display: flex;
-    width: 35px;
-    height: 35px;
-    padding: 0 !important;
-    align-items: center;
-    justify-content: center;
-    margin-right: 4px;
-    transition: .3s;
-    color: var(--sco-white);
-    border-radius: 40px
+@media screen and (max-width: 1300px) {
+    #aside-content .sticky_layout {
+        top: 60px
+    }
 }
 
-.back-home-button i {
-    font-size: 22px
+#aside-content .sticky_layout {
+    top: 80px;
+    transition: top 0s
 }
 
-@media screen and (max-width: 768px) {
-    .back-home-button {
-        display: none
-    }
+#aside-content .card-widget:hover {
+    box-shadow: var(--sco-shadow-border)
 }
 
-.nav-fixed #nav .back-home-button {
-    color: var(--sco-fontcolor)
+#aside-content #card-funds {
+    margin-bottom: 1rem;
+    min-height: 260px
 }
 
-#page-header.not-top-img #nav .back-home-button {
-    color: var(--sco-fontcolor)
+#page-header.nav-visible + .layout > .aside-content > .sticky_layout {
+    top: 80px
 }
 
-#page-header.not-top-img #nav .back-home-button i {
-    font-size: 20px
+#aside-content {
+    width: 300px
 }
 
-.back-home-button:hover {
-    background: var(--sco-main);
-    color: var(--sco-white) !important
+@media screen and (max-width: 1300px) {
+    #aside-content {
+        width: 300px
+    }
 }
 
-.post .back-home-button:hover {
-    background: var(--sco-white-op);
-    color: var(--sco-white) !important;
-    cursor: pointer;
+@media screen and (max-width: 1200px) {
+    #aside-content {
+        display: none
+    }
 }
 
-.nav-fixed .back-home-button:hover {
-    background: var(--sco-main);
-    color: var(--sco-white) !important
+.card-widget.card-recent-post {
+    padding: .4rem .6rem !important
 }
 
-.back-menu-list-groups .back-menu-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 340px;
-    justify-content: space-between
+#aside-content .aside-list > .aside-list-item .content > time {
+    display: none
 }
 
-.back-menu-list-groups .back-menu-list::before {
-    position: absolute;
-    top: -15px;
-    left: 0;
-    width: 100%;
-    height: 20px;
-    content: ''
+#aside-content .aside-list > .aside-list-item .content > .title {
+    font-weight: 700;
+    padding: 2px 0
 }
 
-.back-menu-list-groups .back-menu-list .back-menu-item {
-    display: flex;
-    align-items: center;
-    margin: 4px 8px;
-    padding: 4px 8px !important;
-    transition: .3s;
-    border-radius: 8px
+.article-recent_post_categories {
+    font-size: 12px;
+    font-weight: 700;
+    opacity: .6;
+    line-height: 1
 }
 
-.back-menu-list-groups .back-menu-list .back-menu-item:hover {
-    background: var(--sco-main) !important;
-    transform: scale(1) !important
+#aside-content .aside-list > .aside-list-item {
+    padding: 6px !important;
+    border-radius: 12px;
+    transition: .3s;
+    margin: 4px 0;
+    cursor: pointer;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center
 }
 
-.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-icon {
-    width: 24px;
-    height: 24px;
-    border-radius: 8px;
-    background: var(--sco-none)
+#aside-content .aside-list > .aside-list-item:hover .thumbnail > img {
+    transform: scale(1)
 }
 
-.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text {
-    font-size: 16px;
-    margin-left: .5rem;
-    color: var(--sco-fontcolor)
+#aside-content .aside-list > .aside-list-item:not(:last-child) {
+    border-bottom: 0 dashed var(--sco-background) !important
 }
 
-@media screen and (max-width: 768px) {
-    .back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text {
-        font-size: 14px
-    }
+#aside-content .aside-list > .aside-list-item .thumbnail {
+    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000);
+    border-radius: 8px;
+    border: var(--style-border)
 }
 
-.back-menu-list-groups .back-menu-list .back-menu-item:hover .back-menu-item-text {
-    color: var(--sco-white)
+#aside-content .aside-list > .aside-list-item:hover {
+    background: var(--sco-main);
+    color: var(--sco-white);
+    transition: .3s;
+    box-shadow: var(--sco-shadow-main)
 }
 
-.back-home-button .back-menu-list-group {
-    display: flex;
-    flex-direction: column
+#aside-content .aside-list > .aside-list-item:hover a {
+    color: var(--sco-white) !important
 }
 
-.back-home-button .back-menu-list-groups {
+.main-hero-waves-area {
+    width: 100%;
     position: absolute;
-    top: 65px;
-    left: 1.5rem;
-    background: var(--sco-card-bg);
-    border-radius: 12px;
-    border: var(--style-border);
-    flex-direction: column;
-    font-size: 12px;
-    color: var(--sco-secondtext);
-    box-shadow: var(--sco-shadow-border);
-    transition: 0s;
-    opacity: 0;
-    pointer-events: none
+    left: 0;
+    bottom: -11px;
+    z-index: 5
 }
 
-.back-home-button .back-menu-list-groups:hover {
-    border: var(--style-border-hover)
+.waves-area .waves-svg {
+    width: 100%;
+    height: 60px
 }
 
-.back-home-button .back-menu-list-group .back-menu-list-title {
-    margin: 8px 0 0 16px;
-    transition: .3s
+.parallax > use {
+    animation: move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
 }
 
-.back-home-button .back-menu-list-group:hover .back-menu-list-title {
-    color: var(--sco-main)
+.parallax > use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s;
+    fill: var(--sco-background);
+    opacity: .5
 }
 
-.back-home-button:hover .back-menu-list-groups {
-    display: flex;
-    opacity: 1;
-    transition: .3s;
-    top: 55px;
-    pointer-events: auto;
-    left: 1.5rem
+.parallax > use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s;
+    fill: var(--sco-background);
+    opacity: .6
+}
+
+.parallax > use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s;
+    fill: var(--sco-background);
+    opacity: .7
 }
 
-.back-home-button .back-menu-list .back-menu-item {
-    width: 150px
+.parallax > use:nth-child(4) {
+    animation-delay: -5s;
+    animation-duration: 20s;
+    fill: var(--sco-background)
 }
 
-@media screen and (max-width: 768px) {
-    .back-home-button .back-menu-list-groups {
-        left: 0
+@media (max-width: 768px) {
+    .main-hero-waves-area {
+        display: none
     }
+}
 
-    .back-home-button:hover .back-menu-list-groups {
-        padding-bottom: 8px;
-        box-shadow: var(--sco-shadow-border);
-        left: 0
-    }
+a.card-archive-list-link-more {
+    color: var(--sco-white) !important;
+    background: var(--sco-card-btn-bg);
+    margin-top: 8px
 }
 
-#nav #blog_name {
-    flex-wrap: nowrap;
-    height: 60px;
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
+    border-radius: 8px;
+    margin: 4px 0;
     display: flex;
-    align-items: center;
-    z-index: 102;
-    transition: .3s
+    flex-direction: column;
+    align-content: space-between;
+    border: var(--style-border)
 }
 
-@media screen and (min-width: 900px) {
-    #nav #site-name i {
-        opacity: 1;
-        transition: all .3s, color 0s, opacity .3s
-    }
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
+    width: auto
+}
 
-    #nav #site-name:hover i {
-        opacity: 0
-    }
+#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap
+}
 
-    #nav #site-name:after {
-        opacity: 0;
-        position: absolute;
-        display: flex;
-        z-index: 1;
-        content: "\e008";
-        font-family: scoicon, serif !important;
-        align-items: center;
-        justify-content: center;
-        font-size: 22px;
-        line-height: 1;
-        color: var(--sco-white)
-    }
+.card-allinfo hr {
+    display: flex;
+    position: relative;
+    margin: 1rem 0;
+    border: 1px dashed var(--sco-theme-op)
+}
 
-    .post #nav #site-name:hover {
-        background: var(--sco-white-op);
-        align-items: center
-    }
+.card-allinfo .item-headline {
+    display: none
+}
 
-    .nav-fixed #nav #site-name:hover {
-        background: var(--sco-main)
-    }
+span.card-archive-list-count {
+    width: auto;
+    text-align: left;
+    font-size: 1.1rem;
+    line-height: .9;
+    font-weight: 700
+}
 
-    #nav #site-name:hover:after {
-        opacity: 1
-    }
+.card-archive-list-count-group {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline
+}
 
-    #nav .back-home-button:hover {
-        box-shadow: var(--sco-shadow-main);
-        cursor: pointer;
-    }
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
+    width: fit-content;
+    margin-left: 4px
+}
 
-    #nav #page-name-text {
-        display: inline;
-        font-weight: 700;
-        padding: 4px 8px;
-        opacity: 0;
-        transition: .1s;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        position: relative;
-        text-align: center;
-        cursor: pointer;
-        top: 0;
-        font-size: .9rem;
-        animation-timing-function: ease-in;
-        -webkit-animation-timing-function: ease-in
-    }
+.card-archive-list-count-unit {
+    width: auto;
+    text-align: left;
+    font-size: 14px;
+    font-weight: 700
+}
 
-    #nav #page-name-text:hover {
-        color: var(--sco-main) !important;
-        background: var(--sco-none);
-        box-shadow: none
-    }
+.card-archive-list-date {
+    font-size: 14px;
+    opacity: .6
+}
 
-    #page-header.nav-fixed #nav #page-name-text {
-        display: inline;
-        opacity: 1;
-        transition: .3s;
-        line-height: 1
-    }
+li.card-archive-list-item {
+    width: 100%;
+    flex: 0 0 48%
+}
 
-    #page-header.nav-fixed #nav #page-name-text:hover:after {
-        opacity: 1;
-        line-height: 36px
-    }
+.card-category-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between
+}
 
-    #page-header.nav-fixed #nav div.menus_items {
-        transition: .15s;
-        position: relative;
-        top: -60px
-    }
+.card-category-list-item {
+    width: 45%
+}
 
-    #page-header.nav-fixed.nav-visible #nav #page-name-text {
-        display: inline;
-        transition: .15s
-    }
+.card-category-list-count {
+    display: none !important
+}
 
-    #page-header.nav-fixed.nav-visible #nav div.menus_items {
-        opacity: 1;
-        transition: .15s;
-        position: relative;
-        top: 0
-    }
+.card-category-list-name {
+    width: 100% !important;
+    text-align: center
+}
 
-    #page-name {
-        align-items: center;
-        display: flex;
-        border-radius: 12px;
-        height: 40px;
-        position: absolute;
-        top: 62px;
-        left: 0;
-        right: 0;
-        margin: auto;
-        justify-content: center;
-        animation-timing-function: ease-out;
-        -webkit-animation-timing-function: ease-out
-    }
+.webinfo-item {
+    display: flex;
+    white-space: nowrap
+}
 
-    #page-header.nav-fixed #nav #menus {
-        z-index: 100
-    }
+.webinfo-item-title {
+    display: flex
+}
+
+.webinfo-item-title i {
+    line-height: 2;
+    margin-right: 6px;
+    width: 16px;
+    text-align: center;
+    font-size: 16px
+}
 
-    #page-header.nav-fixed.nav-visible #nav #menus {
-        z-index: 101
+@media screen and (min-width: 1300px) {
+    #aside-content {
+        padding-left: 1rem;
+        animation: slide-in .6s .3s backwards
     }
 
-    #page-header.nav-fixed #page-name {
-        z-index: 101;
-        transition: .3s;
-        top: 10px
+    #aside-content .sticky_layout {
+        top: calc(60px + 1rem)
     }
 
-    #page-header.nav-fixed.nav-visible #page-name {
-        z-index: 100;
-        top: 60px;
-        transition: .3s
+    #page-header.nav-visible + .layout > .aside-content > .sticky_layout {
+        top: calc(60px + 1rem)
     }
 
-    #page-name-mask {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        overflow: hidden;
-        left: 0
+    [data-theme=dark] #aside-content > .card-widget.card-info {
+        border: var(--style-border)
     }
-}
 
-@media screen and (max-width: 899px) {
-    #nav #page-name-mask {
-        display: none !important
+    .coverdiv {
+        height: 130%
     }
 }
 
-@media screen and (max-width: 798px) {
-    #nav-music {
-        display: none !important
-    }
+.medium-zoom-overlay {
+    background: var(--sco-maskbg) !important;
+    z-index: 99998 !important;
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    transform: translateZ(0)
 }
 
-#nav-music {
-    display: flex;
-    align-items: center;
-    z-index: 1001;
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
-    cursor: pointer;
-    transition: .3s;
-    transform-origin: left bottom;
-    box-shadow: var(--sco-shadow-border);
-    border-radius: 40px;
-    overflow: hidden;
-    user-select: none
+.medium-zoom-image--opened {
+    border-radius: 2px
 }
 
-#nav-music span {
-    user-select: none
+#toggle-sidebar {
+    bottom: 80px
 }
 
-#nav-music div {
-    user-select: none
+.button--animated {
+    border-radius: 8px !important;
+    transition: .3s
 }
 
-#nav-music.playing {
-    box-shadow: 0 0 12px -3px var(--sco-none);
-    -webkit-animation: playingShadow 5s linear infinite
+#error-wrap .error-content .error-info a:hover {
+    background-color: var(--sco-blue);
+    transition: .3s;
+    box-shadow: var(--sco-shadow-blue)
 }
 
-#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
-    height: 25px;
-    width: 25px;
-    border-radius: 40px;
-    z-index: 1;
-    transition: .3s;
-    -webkit-transform: rotate(0) scale(1);
-    border: var(--style-border-always);
-    -webkit-animation: changeright 24s linear infinite;
-    animation-play-state: paused
-}
-
-#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic {
-    box-shadow: 0 0 14px #ffffffa6;
-    -webkit-transform: rotate(0) scale(1.1);
-    border-color: var(--sco-white);
-    animation-play-state: running
+.button--animated:before {
+    display: none
 }
 
-#nav-music .aplayer.aplayer-withlrc .aplayer-info {
-    height: 100%;
-    color: var(--sco-fontcolor);
-    margin-left: 8px;
-    padding: 0;
-    display: flex;
-    align-items: center
+a.tree-list-post-link {
+    font-size: .8rem;
+    line-height: 1.2 !important
 }
 
-#nav-music.playing .aplayer.aplayer-withlrc .aplayer-info {
-    color: var(--sco-white)
+li.tree-list-item {
+    line-height: 1.9;
+    margin: .3rem 0
 }
 
-#nav-music #nav-music-hoverTips {
-    color: var(--sco-white);
-    background: var(--sco-main);
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    align-items: center;
-    justify-content: center;
+.title-h2-a {
     display: flex;
-    border-radius: 40px;
-    opacity: 0;
-    font-size: 12px;
-    z-index: 2;
-    pointer-events: none;
-    transition: .3s
+    align-items: center;
+    justify-content: space-between;
+    margin-top: .5rem
 }
 
-#nav-music:hover:not(.playing) #nav-music-hoverTips {
-    opacity: 1
+.title-h2-a a {
+    margin-left: .5rem;
+    color: var(--sco-secondtext);
+    font-weight: 700
 }
 
-#nav-music.playing #nav-music-hoverTips {
-    opacity: 0
+.title-h2-a a:hover {
+    color: var(--sco-hovertext)
 }
 
-#nav-music .aplayer {
-    background: var(--sco-card-bg);
-    border-radius: 60px;
-    height: 41px;
+.title-h2-a-left {
     display: flex;
-    margin: 0;
-    pointer-events: none;
-    transition: .3s;
-    border: var(--style-border);
-    box-shadow: none
+    align-items: center
 }
 
-#nav-music.playing .aplayer {
-    background: var(--sco-main-op-deep);
-    border: var(--style-border-hover);
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
+.title-h2-a-left h2 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important
 }
 
-#nav-music .aplayer .aplayer-notice {
-    display: none
+.title-h2-a-right {
+    font-size: 14px;
+    color: var(--sco-secondtext)
 }
 
-#nav-music .aplayer .aplayer-miniswitcher {
-    display: none
+#card-funds .funds-list::-webkit-scrollbar {
+    display: none !important
 }
 
-#nav-music .aplayer .aplayer-body {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 0 12px 0 8px;
+.funds-tips {
+    font-size: .5rem;
+    width: 100%;
+    text-align: center;
+    color: var(--sco-secondtext);
+    margin: .5rem 0 0 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: absolute;
+    bottom: .5rem;
+    left: 0;
+    padding: 0 1rem
 }
 
-#nav-music .aplayer .aplayer-pic .aplayer-play {
-    opacity: 0
+.funds-list {
+    height: 200px;
+    overflow: scroll
 }
 
-#nav-music .aplayer-list {
-    display: none
+span.fund_name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
 }
 
-#nav-music .aplayer .aplayer-info .aplayer-music {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    padding: 0;
-    z-index: 1
+.funds-info {
+    margin-left: 4px;
+    color: var(--sco-secondtext)
 }
 
-#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
-    display: none
+.funds-list-item .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: nowrap
 }
 
-#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author {
-    display: none
+.fund_dayGrowth {
+    display: inline;
+    float: right
 }
 
-#nav-music .aplayer.aplayer-withlist .aplayer-info {
-    border: none
+.fund-up {
+    color: var(--sco-red)
 }
 
-#nav-music .aplayer .aplayer-pic div {
-    display: none
+.fund-down {
+    color: var(--sco-green)
 }
 
-#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title {
+#aside-content .card-widget#card-music {
+    background: var(--sco-pink);
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    padding: 0;
     cursor: pointer;
-    line-height: 1;
-    display: inline-block;
-    white-space: nowrap;
-    max-width: 120px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: .3s
+    border: none
 }
 
-#nav-music .aplayer .aplayer-info .aplayer-controller {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
+#aside-content .card-widget#card-music img {
+    max-height: 110px;
+    object-fit: cover
 }
 
-#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
-    margin: 0;
-    padding: 0
+#aside-content .card-widget#card-music:hover img {
+    transition: .5s;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d
 }
 
-#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
-    height: 100%;
-    background: 0 0;
-    opacity: 0
+.music-link {
+    display: flex;
+    justify-content: center;
+    align-content: center
 }
 
-#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
-    opacity: 1
+#aside-content .card-widget#card-friendlinks {
+    background: var(--sco-main);
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    padding: 0;
+    cursor: pointer;
+    border: none
 }
 
-#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
-    display: none
+#aside-content .card-widget#card-friendlinks img {
+    max-height: 110px;
+    object-fit: cover
 }
 
-#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
-    height: 100%;
-    opacity: .1;
-    background-color: var(--sco-white) !important;
-    -webkit-animation: lightBar 5s ease infinite;
-    animation-play-state: paused
+#aside-content .card-widget#card-friendlinks:hover img {
+    transition: .5s;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d
 }
 
-#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
-    animation-play-state: running
+.friend-link {
+    display: flex;
+    justify-content: center;
+    align-content: center
 }
 
-#nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
-    width: 0;
-    opacity: 0;
-    transition: .3s;
-    margin-left: 8px;
-    margin-top: -2px
+#aside-content .card-widget.card-power,#aside-content .card-widget.card-history,#aside-content .card-widget.card-welcome {
+    padding: .4rem .6rem !important
 }
 
-#nav-music.playing .aplayer.aplayer-withlrc .aplayer-lrc {
-    width: 200px;
-    margin-bottom: 0;
-    opacity: 1
+#aside-content .card-widget.card-power .power-charge {
+    margin-left: auto;
+    color: var(--sco-secondtext);
+    font-size: 14px;
+    line-height: 1
 }
 
-#nav-music .aplayer .aplayer-lrc p {
-    color: #ffffffb3;
-    filter: blur(1px)
+#aside-content .card-widget.card-power .power-charge:hover {
+    color: var(--sco-lighttext)
 }
 
-#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
-    color: var(--sco-white);
-    border: none;
-    filter: blur(0)
+.power-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0 -4px
 }
 
-#nav-music .aplayer .aplayer-lrc:after, #nav-music .aplayer .aplayer-lrc:before {
-    display: none
+.power-list .power-item .power-item-link a {
+    padding: 2px 4px;
+    border-radius: 4px;
+    margin-left: 8px
 }
 
-i.fab {
-    font-size: 20px;
-    vertical-align: middle;
-    margin-bottom: 4px
+.power-list .power-item .power-item-link a:hover {
+    background: var(--sco-main);
+    color: var(--sco-white)
 }
 
-#body-wrap .full_page:before {
-    background-color: var(--sco-none) !important;
-    transition: 0s !important
+#aside-content .power-item-body {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap
 }
 
-.full_page #page-header:before {
-    display: none !important
+#power-star-image {
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    background-size: contain;
+    margin-right: 12px
 }
 
-.snackbar-container {
-    background: var(--sco-main) !important;
-    color: var(--sco-white) !important;
-    border-radius: 0 !important;
+a#power-star {
     display: flex;
-    justify-content: center !important;
-    max-width: none !important;
-    min-width: 100% !important;
-    margin: 0 !important;
-    left: 0 !important;
-    height: 60px !important;
-    transform: none !important
+    padding: 8px;
+    border: var(--style-border-always);
+    border-radius: 8px;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    position: relative;
+    margin: 12px 0
 }
 
-.snackbar-container p {
-    font-weight: 700 !important;
-    text-align: center !important;
-    font-size: .8rem !important;
-    display: flex !important;
-    justify-content: center !important
+a#power-star:hover {
+    background: var(--sco-main);
+    color: var(--sco-white)
 }
 
-.snackbar-container .action {
-    color: var(--sco-white) !important;
-    padding: 4px 6px !important;
+div#power-star-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 16px;
     font-weight: 700;
-    border-radius: 8px !important;
-    transition: .3s;
-    border: var(--style-border) !important
-}
-
-.snackbar-container .action:hover {
-    color: var(--sco-main) !important;
-    background: var(--sco-white) !important
+    line-height: 1;
+    margin-bottom: 8px
 }
 
-.snackbar-container::after {
-    position: absolute;
-    width: 0;
-    height: 100%;
-    left: 0;
-    top: 0;
-    background: var(--sco-white);
-    opacity: .1;
-    content: "";
-    animation: snackbar-progress var(--sco-snackbar-time) linear forwards;
-    pointer-events: none
+#power-star-desc {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    font-size: 12px;
+    max-width: 100%;
+    line-height: 1.2
 }
 
-#nav a {
-    transition: .3s
+.power-star-body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    position: relative;
+    width: calc(100% - 68px);
+    justify-content: center
 }
 
-#nav a:hover {
-    color: var(--sco-white);
-    background: var(--sco-white-op);
-    transition: .3s
+#card-vip-designweekly.card-widget {
+    display: flex !important;
+    padding: 0;
+    cursor: pointer
 }
 
-.page #nav a:hover {
-    color: var(--sco-white);
-    background: var(--sco-main);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-main)
+#card-vip-designweekly.card-widget .card-vip-designweekly-img {
+    width: 100%;
+    object-fit: cover
 }
 
-.error #nav a:hover {
-    background: var(--sco-main)
+.card-vip-tips {
+    display: flex;
+    position: absolute;
+    font-size: 12px;
+    bottom: 8px;
+    left: 8px;
+    padding: 1px 6px;
+    background: var(--sco-black-op);
+    border-radius: 8px;
+    color: var(--sco-white)
 }
 
-.nav-fixed #nav a:hover {
-    background: var(--sco-main);
-    color: var(--sco-white);
-    transition: .3s
+#widget-tree-button {
+    background-color: var(--sco-secondbg) !important;
+    box-shadow: var(--sco-shadow-light2black) !important;
+    color: var(--sco-fontcolor)
 }
 
-@media screen and (min-width: 768px) {
-    .menus_item:hover > a.site-page {
-        color: var(--sco-white) !important;
-        background: var(--sco-white-op);
-        transition: .3s;
-        box-shadow: var(--sco-shadow-main)
-    }
-
-    .page .menus_item:hover > a.site-page {
-        color: var(--sco-white) !important;
-        background: var(--sco-main);
-        transition: .3s;
-        box-shadow: var(--sco-shadow-main)
-    }
-
-    .nav-fixed .menus_item:hover > a.site-page {
-        background-color: var(--sco-main)
-    }
+#widget-tree:hover #widget-tree-button {
+    opacity: 0;
+    left: -1.5rem
 }
 
-@media screen and (max-width: 768px) {
-    #page-header #nav a:hover span.scoicon {
-        opacity: 1 !important;
-    }
-    #page-header.not-top-img #nav a:hover {
-        align-items: flex-end !important;
-    }
-
-    #nav #site-name span{
-        padding-left: 8px
-    }
-
-    #sidebar #sidebar-menus .menus_items li .site-page:hover {
-        background: var(--sco-main);
-        color: var(--sco-white)
-    }
-
-    #sidebar #sidebar-menus .menus_items li .site-page span:hover {
-        color: var(--sco-white)
-    }
-
-    #nav #site-name i {
-        color: var(--sco-white);
-        transition: .1s
-    }
-
-    .error #nav #site-name i {
-        color: var(--sco-fontcolor)
-    }
-
-    .nav-fixed #nav #site-name i {
-        color: var(--sco-fontcolor);
-        transition: .3s
-    }
-
-    .page #nav #site-name i {
-        color: var(--sco-fontcolor)
-    }
-
-    #nav a:hover {
-        background: var(--sco-none) !important;
-        box-shadow: none !important;
-        transition: .3s;
-        color: var(--sco-fontcolor)
-    }
+#widget-tree {
+    background-color: var(--sco-maskbg) !important
+}
 
-    #page-header.not-top-img #nav a:hover {
-        color: var(--sco-fontcolor)
-    }
+#widget-tree:hover {
+    left: 0 !important;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    transform: translateZ(0)
 }
 
-.nav-fixed #nav #site-name i {
-    color: var(--sco-fontcolor);
-    transition: .3s
+#widget-tree a {
+    -webkit-line-clamp: 2;
+    color: var(--sco-fontcolor) !important
 }
 
-#search-mask {
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    transform: translateZ(0);
-    background: var(--sco-maskbgdeep)
+#widget-tree a:hover {
+    color: var(--sco-hovertext) !important
 }
 
-#algolia-search .search-dialog .ais-search-box input {
-    border-radius: 8px !important;
-    border: var(--style-border)
+.toggle-post-icon, .toggle-toc-icon {
+    color: var(--sco-fontcolor) !important
 }
 
-#algolia-search .search-dialog .ais-search-box input:focus {
-    border: var(--style-border-hover)
+@media screen and (max-width: 768px) {
+    #widget-tree {
+        display: none !important
+    }
 }
 
-#algolia-search .search-dialog .ais-search-box input::placeholder {
-    opacity: .6
+.guli_top {
+    position: fixed;
+    z-index: 99;
+    right: 30px;
+    display: flex;
+    transition: .3s;
+    opacity: 0;
+    bottom: -25px;
+    width: 88px;
+    height: 123px;
+    user-select: none
 }
 
-#algolia-input-panel {
-    margin-bottom: 8px
+.guli_top.guli-fixed {
+    opacity: 1;
+    bottom: 25px
 }
 
-.search-dialog {
-    border-radius: 12px !important;
-    box-shadow: var(--sco-shadow-lightblack);
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    transition: .3s
+#guli_top .guli_body {
+    position: relative;
+    height: 123px;
+    z-index: 1003
 }
 
-.search-dialog:hover {
-    border: var(--style-border-hover);
-    box-shadow: var(--sco-shadow-theme)
+#guli_top .guli_body:hover {
+    cursor: pointer
 }
 
-.search-dialog__title {
-    font-weight: 700;
-    color: var(--sco-main)
+#guli_top .guli_wing {
+    position: relative;
+    height: 64px;
+    z-index: 1002;
+    bottom: -120px;
+    transform: scale(.01);
+    box-shadow: var(--sco-shadow-yellow)
 }
 
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a:hover {
-    color: var(--sco-hovertext)
+#guli_top.open_wing .guli_wing {
+    transform: scale(1.03)
 }
 
-#algolia-search .search-dialog .algolia-logo {
-    display: none
+#guli_top.open_wing .guli_body {
+    transform: scale(1)
 }
 
-#algolia-tips {
-    padding-top: 12px;
-    color: var(--sco-secondtext);
-    right: 0;
-    margin: auto
+@media screen and (max-width: 1300px) {
+    #guli_top {
+        display: none
+    }
 }
 
-#algolia-tips i {
-    font-size: 22px
+#cookies-window {
+    min-width: 300px;
+    background: var(--sco-maskbgdeep);
+    color: var(--sco-fontcolor);
+    padding: 8px 16px;
+    display: flex;
+    flex-direction: column;
+    bottom: 20px;
+    right: 20px;
+    position: fixed;
+    border-radius: 12px;
+    transition: .3s;
+    z-index: 1002;
+    user-select: none;
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    transform: translateZ(0);
+    border: var(--style-border);
+    animation: barrageIn .6s cubic-bezier(.42, 0, .3, 1.11)
 }
 
-.algolia-tips-text {
-    margin-left: .4rem
+#cookies-window.cw-hide {
+    opacity: 0;
+    animation: barrageOut .6s cubic-bezier(.42, 0, .3, 1.11);
+    z-index: -1
 }
 
-#algolia-search-results {
-    padding-top: 8px
+#cookies-window .cookies-window-title {
+    padding-bottom: 4px;
+    border-bottom: var(--style-border);
+    font-size: 12px;
+    font-weight: 700
 }
 
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item:before {
-    display: none
+#cookies-window .cookies-window-content {
+    font-size: 14px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center
 }
 
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item {
-    padding-left: 0;
+.cookie-to {
+    margin-right: 4px;
     font-weight: 700
 }
 
-#algolia-search .search-dialog .ais-pagination.pagination {
-    margin: .2rem 0 0
+.cookies-link {
+    margin-left: auto;
+    font-size: 16px
 }
 
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item em {
-    color: var(--sco-theme);
-    font-style: normal
+.cookies-link i.scoicon {
+    font-size: 16px
 }
 
-#algolia-search .search-dialog .ais-search-box {
-    padding-top: 8px
+@media screen and (max-width: 1300px) {
+    #cookies-window {
+        display: none
+    }
 }
 
-#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item.current a {
-    border-radius: 4px;
-    background: var(--sco-main);
-    color: var(--sco-white)
+.heo-tag {
+    padding: 1px 6px;
+    border-radius: 6px 6px 6px 0;
+    margin-left: 4px;
+    height: 20px;
+    line-height: 19px
 }
 
-hr {
-    display: none
+.heo-tag-new-view {
+    color: var(--sco-white);
+    background: var(--sco-green)
 }
 
-#footer-wrap {
-    color: var(--sco-fontcolor)
+.heo-tag-hot-view {
+    color: var(--sco-white);
+    background: var(--sco-red)
 }
 
-#footer-wrap a {
-    color: var(--sco-fontcolor);
-    height: 44px;
-    line-height: 36px
-}
 
-#footer-wrap a:hover {
-    color: var(--sco-hovertext);
-    background-color: var(--sco-none)
-}
-
-div#footer_deal {
-    justify-content: center;
-    display: flex;
-    padding-top: 2rem;
-    align-items: center
-}
-
-#card-poem {
-    display: flex;
-    flex-direction: column;
-    padding: .5rem !important;
-    min-height: 130px
-}
-
-div#poem_sentence {
-    text-align: center;
-    font-family: serif, cursive;
-    line-height: 1.4;
-    margin-bottom: .5rem;
-    padding: 1rem;
-    border-radius: 12px;
-    background: var(--sco-secondbg);
-    min-height: 62px
-}
-
-div#poem_info {
-    display: flex;
-    color: var(--sco-secondtext);
-    font-size: .5rem;
-    justify-content: center;
-    flex-wrap: wrap
-}
-
-div#poem_author {
-    order: 1;
-    padding: 2px;
-    margin-left: 8px
-}
-
-div#poem_dynasty {
-    order: 0;
-    padding: 2px 4px 2px 6px;
-    background: var(--sco-card-btn-bg);
-    color: var(--sco-fontcolor);
-    border-radius: 8px
-}
-
-@media screen and (max-width: 768px) {
-    img.footer_mini_logo {
-        display: none
-    }
-
-    div#footer_deal {
-        flex-wrap: wrap;
-        flex-direction: row
-    }
-}
-
-a.deal_link {
-    display: flex;
-    margin: 1rem 27px;
-    color: var(--sco-card-bg);
-    border-radius: 3rem;
-    width: 32px;
-    height: 32px;
-    background: var(--sco-fontcolor);
-    justify-content: center;
-    align-items: center;
-    transition: .3s
-}
-
-a.deal_link:hover {
-    color: var(--sco-white);
-    background: var(--sco-main);
-    transform: scale(1.1);
-}
-
-img.footer_mini_logo {
-    width: 50px;
-    height: 50px;
-    margin: 0 1rem;
-    cursor: pointer;
-    transition: cubic-bezier(0, 0, 0, 1.29) .5s;
-    -webkit-user-select: none;
-    border-radius: 50px
-}
-
-img.footer_mini_logo:hover {
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d;
-    transform: scale(1.2)
-}
-
-#weblogo {
-    align-self: center
-}
-
-#nav #menus {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    position: absolute;
-    height: 60px;
-    left: 0;
-    margin: 0;
-    transform: translateZ(0)
-}
-
-#nav .menus_items {
-    position: relative;
-    width: fit-content;
-    text-align: center;
-    left: 0;
-    right: 0;
-    top: 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center
-}
-
-#menus > div.menus_items > div > a {
-    letter-spacing: .3rem;
-    padding-left: .7rem;
-    font-weight: 700;
-    padding-top: 0;
-    padding-bottom: 0;
-    height: 35px;
-    line-height: 35px;
-    border-radius: 40px
-}
-
-#nav .menus_items .menus_item .menus_item_child li a {
-    letter-spacing: 0;
-    display: flex;
-    align-items: center;
-    border-radius: 100px;
-    padding: .3rem .8rem;
-    width: 100%;
-    color: var(--sco-fontcolor) !important;
-    text-shadow: none !important
-}
-
-#page-header.nav-fixed #nav #menus[style*="padding-right: 300px;"] .menus_items {
-    transform: translateX(-150px)
-}
-
-#travellings_button {
-    display: inline;
-    padding: 0 .4rem;
-    transition: .3s
-}
-
-@media screen and (max-width: 768px) {
-    #page-header.nav-fixed #travellings_button {
-        opacity: 0
-    }
-}
-
-#rightMenu {
-    display: none;
-    position: fixed;
-    padding: 0 .25rem;
-    width: 9rem;
-    height: fit-content;
-    top: 10%;
-    left: 10%;
-    background-color: var(--sco-maskbgdeep);
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-    transform: translateZ(0);
-    color: var(--sco-fontcolor);
-    border-radius: 12px;
-    z-index: 99994;
-    border: var(--style-border);
-    user-select: none;
-    box-shadow: var(--sco-shadow-black);
-    transition: border .3s
-}
-
-#rightMenu:hover {
-    border: var(--style-border-hover);
-    box-shadow: var(--sco-shadow-theme)
-}
-
-#rightMenu .rightMenu-group {
-    padding: .35rem .3rem;
-    transition: .3s
-}
-
-#rightMenu .rightMenu-line {
-    border-top: 1px dashed var(--sco-theme-op)
-}
-
-#rightMenu .rightMenu-group.rightMenu-small {
-    display: flex;
-    justify-content: space-between
-}
-
-#rightMenu .rightMenu-group .rightMenu-item {
-    border-radius: 8px;
-    transition: .3s;
-    cursor: pointer
-}
-
-#rightMenu .rightMenu-line .rightMenu-item {
-    margin: .25rem 0;
-    padding: .25rem 0
-}
-
-#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
-    display: flex
-}
-
-#rightMenu .rightMenu-group .rightMenu-item:hover {
-    background-color: var(--sco-main);
-    color: var(--sco-white);
-    box-shadow: var(--sco-shadow-main)
-}
-
-#rightMenu .rightMenu-group .rightMenu-item i {
-    display: inline-block;
-    text-align: center;
-    line-height: 1.5rem;
-    width: 1.5rem;
-    padding: 0 .25rem
-}
-
-#rightMenu .rightMenu-line .rightMenu-item i {
-    margin: 0 .25rem
-}
-
-#rightMenu .rightMenu-group .rightMenu-item span {
-    line-height: 1.5rem
-}
-
-.rightMenu-small .rightMenu-item {
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center
-}
-
-#rightmenu-mask {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    background: 0 0;
-    top: 0;
-    left: 0;
-    display: none;
-    margin: 0 !important;
-    z-index: 99993
-}
-
-#darkmode_navswitch {
-    display: inline;
-    position: relative
-}
-
-#darkmode_navswitch a i {
-    font-size: .9rem
-}
-
-[data-theme=dark] #page-header.not-top-img #nav .darkmode_switchbutton {
-    color: var(--sco-yellow)
-}
-
-a.darkmode_switchbutton {
-    padding: 4px 8px !important;
-    cursor: pointer;
-    margin: 0 !important;
-    font-size: .9rem;
-    color: var(--sco-fontcolor)
-}
-
-[data-theme=dark] a.darkmode_switchbutton {
-    background: var(--sco-orange) !important;
-    color: var(--sco-white) !important
-}
-
-a.console_switchbutton {
-    padding: 4px 8px !important;
-    cursor: pointer
-}
-
-@media screen and (max-width: 768px) {
-    #nav-console {
-        display: none
-    }
-}
-
-#nav .site-page {
-    text-shadow: .05rem .05rem .1rem transparent;
-    border-radius: 8px
-}
-
-#nav .site-page {
-    color: var(--sco-white)
-}
-
-.nav-fixed #nav .site-page {
-    color: var(--sco-fontcolor)
-}
-
-#nav #site-name {
-    padding: 0;
-    transition: .3s;
-    display: flex;
-    height: 35px;
-    min-width: 70px;
-    justify-content: center;
-    align-items: flex-end;
-    text-shadow: none;
-    border-radius: 40px;
-    cursor: pointer
-}
-
-#nav #site-name img {
-    height: 100%
-}
-#nav #site-name:hover img {
-    opacity: 0
-}
-
-#search-button > a > span {
-    display: none
-}
-
-#nav .menus_items .menus_item i.expand {
-    display: none
-}
-
-#rightside {
-    display: none;
-    padding-right: 8px;
-    position: fixed;
-    right: -38px;
-    bottom: 40px;
-    z-index: 100;
-    opacity: 0;
-    transition: all .5s ease 0s
-}
-
-#rightside > div > a, #rightside > div > button {
-    margin-bottom: 8px;
-    transition: .3s
-}
-
-#rightside > div > a:hover, #rightside > div > button {
-    transition: .3s
-}
-
-#rightside #rightside-config-hide {
-    transform: translate(42px, 0)
-}
-
-#footer {
-    background: linear-gradient(180deg, var(--sco-card-bg-none) 0, var(--sco-card-bg) 25%);
-    margin-top: .5rem;
-    display: flex;
-    flex-direction: column
-}
-
-@media screen and (max-width: 768px) {
-    #footer {
-        background: linear-gradient(180deg, var(--sco-background) 0, var(--sco-card-bg) 25%);
-        margin-top: 0;
-        z-index: 999
-    }
-}
-
-#algolia-search .ais-hits--item.algolia-hit-item a {
-    color: var(--sco-fontcolor)
-}
-
-.aplayer .aplayer-list ol {
-    backdrop-filter: blur(1px);
-    -webkit-backdrop-filter: blur(1px);
-    transform: translateZ(0)
-}
-
-.aplayer .aplayer-lrc:after {
-    display: none !important
-}
-
-.aplayer.aplayer-withlrc.aplayer-withlist {
-    border-radius: 12px
-}
-
-#article-container .aplayer {
-    border-radius: 12px;
-    min-height: 90px;
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    box-shadow: var(--sco-shadow-border)
-}
-
-#article-container.flink {
-    margin-top: 1rem
-}
-
-#article-container.flink h2 {
-    margin-top: .5rem;
-    margin-bottom: 0
-}
-
-#algolia-hits .tag-list {
-    padding: 4px 8px;
-    border-radius: 8px;
-    margin-right: .5rem;
-    margin-top: .5rem;
-    border: var(--style-border-always);
-    cursor: pointer
-}
-
-#algolia-hits .tag-list:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-#mobile-sidebar #mobile-sidebar-menus.open {
-    background: var(--sco-maskbg)
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item {
-    transition: .3s
-}
-
-#sidebar #sidebar-menus .site-data {
-    margin: 1rem 0;
-    padding: .6rem .5rem
-}
-
-#sidebar-menus > hr {
-    display: none
-}
-
-#card-info-btn {
-    border-radius: 25px;
-    overflow: hidden
-}
-
-#card-info-btn:before {
-    border-radius: 25px
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a {
-    color: var(--sco-fontcolor);
-    width: auto;
-    max-width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden
-}
-
-.not-index-bg {
-    height: 2rem !important;
-    background-image: none !important;
-    background-color: var(--sco-none) !important
-}
-
-.not-index-bg img {
-    display: none
-}
-
-.not-index-bg #page-site-info {
-    display: none
-}
-
-.pace {
-    -webkit-pointer-events: none;
-    pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    z-index: 2000;
-    position: fixed;
-    margin: auto;
-    top: 4px;
-    left: 0;
-    right: 0;
-    height: 8px;
-    border-radius: 8px;
-    width: 4rem;
-    background: var(--sco-secondbg);
-    border: var(--style-border);
-    overflow: hidden
-}
-
-.pace-inactive .pace-progress {
-    opacity: 0;
-    transition: .3s ease-in
-}
-
-.pace .pace-progress {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    -o-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    -o-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    max-width: 200px;
-    z-index: 2000;
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 100%;
-    height: 100%;
-    width: 100%;
-    background: var(--sco-logo-color);
-    animation: gradient 2s ease infinite;
-    background-size: 200%
-}
-
-.pace.pace-inactive {
-    opacity: 0;
-    transition: .3s;
-    top: -8px
-}
-
-@media screen and (max-width: 1300px) {
-    #aside-content .sticky_layout {
-        top: 60px
-    }
-}
-
-/*@media screen and (min-width: 768px) {*/
-/*    #aside-content .sticky_layout {*/
-/*        margin-top: 1rem*/
-/*    }*/
-/*}*/
-
-/*@media screen and (min-width: 1300px) {*/
-/*    #aside-content .sticky_layout {*/
-/*        margin-top: 1rem*/
-/*    }*/
-/*}*/
-
-#aside-content .sticky_layout {
-    top: 80px;
-    transition: top 0s
-}
-
-#aside-content .card-widget:hover {
-    box-shadow: var(--sco-shadow-border)
-}
-
-#aside-content #card-funds {
-    margin-bottom: 1rem;
-    min-height: 260px
-}
-
-#page-header.nav-visible + .layout > .aside-content > .sticky_layout {
-    top: 80px
-}
-
-#aside-content {
-    width: 300px
-}
-
-@media screen and (max-width: 1300px) {
-    #aside-content {
-        width: 300px
-    }
-}
-
-@media screen and (max-width: 1200px) {
-    #aside-content {
-        display: none
-    }
-}
-
-.card-widget.card-recent-post {
-    padding: .4rem .6rem !important
-}
-
-#aside-content .aside-list > .aside-list-item .content > time {
-    display: none
-}
-
-#aside-content .aside-list > .aside-list-item .content > .title {
-    font-weight: 700;
-    padding: 2px 0
-}
-
-.article-recent_post_categories {
-    font-size: 12px;
-    font-weight: 700;
-    opacity: .6;
-    line-height: 1
-}
-
-#aside-content .aside-list > .aside-list-item {
-    padding: 6px !important;
-    border-radius: 12px;
-    transition: .3s;
-    margin: 4px 0;
-    cursor: pointer;
-    display: flex;
-    -webkit-box-align: center;
-    align-items: center
-}
-
-#aside-content .aside-list > .aside-list-item:hover .thumbnail > img {
-    transform: scale(1)
-}
-
-#aside-content .aside-list > .aside-list-item:not(:last-child) {
-    border-bottom: 0 dashed var(--sco-background) !important
-}
-
-#aside-content .aside-list > .aside-list-item .thumbnail {
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000);
-    border-radius: 8px;
-    border: var(--style-border)
-}
-
-#aside-content .aside-list > .aside-list-item:hover {
-    background: var(--sco-main);
-    color: var(--sco-white);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-main)
-}
-
-#aside-content .aside-list > .aside-list-item:hover a {
-    color: var(--sco-white) !important
-}
-
-.main-hero-waves-area {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    bottom: -11px;
-    z-index: 5
-}
-
-.waves-area .waves-svg {
-    width: 100%;
-    height: 60px
-}
-
-.parallax > use {
-    animation: move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
-}
-
-.parallax > use:nth-child(1) {
-    animation-delay: -2s;
-    animation-duration: 7s;
-    fill: var(--sco-background);
-    opacity: .5
-}
-
-.parallax > use:nth-child(2) {
-    animation-delay: -3s;
-    animation-duration: 10s;
-    fill: var(--sco-background);
-    opacity: .6
-}
-
-.parallax > use:nth-child(3) {
-    animation-delay: -4s;
-    animation-duration: 13s;
-    fill: var(--sco-background);
-    opacity: .7
-}
-
-.parallax > use:nth-child(4) {
-    animation-delay: -5s;
-    animation-duration: 20s;
-    fill: var(--sco-background)
-}
-
-@media (max-width: 768px) {
-    .main-hero-waves-area {
-        display: none
-    }
-}
-
-a.card-archive-list-link-more {
-    color: var(--sco-white) !important;
-    background: var(--sco-card-btn-bg);
-    margin-top: 8px
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
-    border-radius: 8px;
-    margin: 4px 0;
-    display: flex;
-    flex-direction: column;
-    align-content: space-between;
-    border: var(--style-border)
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
-    width: auto
-}
-
-#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    flex-wrap: wrap
-}
-
-.card-allinfo hr {
-    display: flex;
-    position: relative;
-    margin: 1rem 0;
-    border: 1px dashed var(--sco-theme-op)
-}
-
-.card-allinfo .item-headline {
-    display: none
-}
-
-span.card-archive-list-count {
-    width: auto;
-    text-align: left;
-    font-size: 1.1rem;
-    line-height: .9;
-    font-weight: 700
-}
-
-.card-archive-list-count-group {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
-    width: fit-content;
-    margin-left: 4px
-}
-
-.card-archive-list-count-unit {
-    width: auto;
-    text-align: left;
-    font-size: 14px;
-    font-weight: 700
-}
-
-.card-archive-list-date {
-    font-size: 14px;
-    opacity: .6
-}
-
-li.card-archive-list-item {
-    width: 100%;
-    flex: 0 0 48%
-}
-
-.card-category-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between
-}
-
-.card-category-list-item {
-    width: 45%
-}
-
-.card-category-list-count {
-    display: none !important
-}
-
-.card-category-list-name {
-    width: 100% !important;
-    text-align: center
-}
-
-.webinfo-item {
-    display: flex;
-    white-space: nowrap
-}
-
-.webinfo-item-title {
-    display: flex
-}
-
-.webinfo-item-title i {
-    line-height: 2;
-    margin-right: 6px;
-    width: 16px;
-    text-align: center;
-    font-size: 16px
-}
-
-@media screen and (min-width: 1300px) {
-    #aside-content {
-        padding-left: 1rem;
-        animation: slide-in .6s .3s backwards
-    }
-
-    #aside-content .sticky_layout {
-        top: calc(60px + 1rem)
-    }
-
-    #page-header.nav-visible + .layout > .aside-content > .sticky_layout {
-        top: calc(60px + 1rem)
-    }
-
-    [data-theme=dark] #aside-content > .card-widget.card-info {
-        border: var(--style-border)
-    }
-
-    .coverdiv {
-        height: 130%
-    }
-}
-
-.medium-zoom-overlay {
-    background: var(--sco-maskbg) !important;
-    z-index: 99998 !important;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
-}
-
-.medium-zoom-image--opened {
-    border-radius: 2px
-}
-
-#toggle-sidebar {
-    bottom: 80px
-}
-
-.button--animated {
-    border-radius: 8px !important;
-    transition: .3s
-}
-
-#error-wrap .error-content .error-info a:hover {
-    background-color: var(--sco-blue);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-blue)
-}
-
-.button--animated:before {
-    display: none
-}
-
-a.tree-list-post-link {
-    font-size: .8rem;
-    line-height: 1.2 !important
-}
-
-li.tree-list-item {
-    line-height: 1.9;
-    margin: .3rem 0
-}
-
-.title-h2-a {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: .5rem
-}
-
-.title-h2-a a {
-    margin-left: .5rem;
-    color: var(--sco-secondtext);
-    font-weight: 700
-}
-
-.title-h2-a a:hover {
-    color: var(--sco-hovertext)
-}
-
-.title-h2-a-left {
-    display: flex;
-    align-items: center
-}
-
-.title-h2-a-left h2 {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important
-}
-
-.title-h2-a-right {
-    font-size: 14px;
-    color: var(--sco-secondtext)
-}
-
-#card-funds .funds-list::-webkit-scrollbar {
-    display: none !important
-}
-
-.funds-tips {
-    font-size: .5rem;
-    width: 100%;
-    text-align: center;
-    color: var(--sco-secondtext);
-    margin: .5rem 0 0 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    position: absolute;
-    bottom: .5rem;
-    left: 0;
-    padding: 0 1rem
-}
-
-.funds-list {
-    height: 200px;
-    overflow: scroll
-}
-
-span.fund_name {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis
-}
-
-.funds-info {
-    margin-left: 4px;
-    color: var(--sco-secondtext)
-}
-
-.funds-list-item .content {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    flex-wrap: nowrap
-}
-
-.fund_dayGrowth {
-    display: inline;
-    float: right
-}
-
-.fund-up {
-    color: var(--sco-red)
-}
-
-.fund-down {
-    color: var(--sco-green)
-}
-
-#aside-content .card-widget#card-music {
-    background: var(--sco-pink);
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    padding: 0;
-    cursor: pointer;
-    border: none
-}
-
-#aside-content .card-widget#card-music img {
-    max-height: 110px;
-    object-fit: cover
-}
-
-#aside-content .card-widget#card-music:hover img {
-    transition: .5s;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d
-}
-
-.music-link {
-    display: flex;
-    justify-content: center;
-    align-content: center
-}
-
-#aside-content .card-widget#card-friendlinks {
-    background: var(--sco-main);
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    padding: 0;
-    cursor: pointer;
-    border: none
-}
-
-#aside-content .card-widget#card-friendlinks img {
-    max-height: 110px;
-    object-fit: cover
-}
-
-#aside-content .card-widget#card-friendlinks:hover img {
-    transition: .5s;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d
-}
-
-.friend-link {
-    display: flex;
-    justify-content: center;
-    align-content: center
-}
-
-#aside-content .card-widget.card-power,#aside-content .card-widget.card-history,#aside-content .card-widget.card-welcome {
-    padding: .4rem .6rem !important
-}
-
-#aside-content .card-widget.card-power .power-charge {
-    margin-left: auto;
-    color: var(--sco-secondtext);
-    font-size: 14px;
-    line-height: 1
-}
-
-#aside-content .card-widget.card-power .power-charge:hover {
-    color: var(--sco-lighttext)
-}
-
-.power-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -4px
-}
-
-.power-list .power-item .power-item-link a {
-    padding: 2px 4px;
-    border-radius: 4px;
-    margin-left: 8px
-}
-
-.power-list .power-item .power-item-link a:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-#aside-content .power-item-body {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap
-}
-
-#power-star-image {
-    width: 60px;
-    height: 60px;
-    border-radius: 8px;
-    background-size: contain;
-    margin-right: 12px
-}
-
-a#power-star {
-    display: flex;
-    padding: 8px;
-    border: var(--style-border-always);
-    border-radius: 8px;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    position: relative;
-    margin: 12px 0
-}
-
-a#power-star:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-div#power-star-title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 1;
-    margin-bottom: 8px
-}
-
-#power-star-desc {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    font-size: 12px;
-    max-width: 100%;
-    line-height: 1.2
-}
-
-.power-star-body {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    position: relative;
-    width: calc(100% - 68px);
-    justify-content: center
-}
-
-#card-vip-designweekly.card-widget {
-    display: flex !important;
-    padding: 0;
-    cursor: pointer
-}
-
-#card-vip-designweekly.card-widget .card-vip-designweekly-img {
-    width: 100%;
-    object-fit: cover
-}
-
-.card-vip-tips {
-    display: flex;
-    position: absolute;
-    font-size: 12px;
-    bottom: 8px;
-    left: 8px;
-    padding: 1px 6px;
-    background: var(--sco-black-op);
-    border-radius: 8px;
-    color: var(--sco-white)
-}
-
-#widget-tree-button {
-    background-color: var(--sco-secondbg) !important;
-    box-shadow: var(--sco-shadow-light2black) !important;
-    color: var(--sco-fontcolor)
-}
-
-#widget-tree:hover #widget-tree-button {
-    opacity: 0;
-    left: -1.5rem
-}
-
-#widget-tree {
-    background-color: var(--sco-maskbg) !important
-}
-
-#widget-tree:hover {
-    left: 0 !important;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
-}
-
-#widget-tree a {
-    -webkit-line-clamp: 2;
-    color: var(--sco-fontcolor) !important
-}
-
-#widget-tree a:hover {
-    color: var(--sco-hovertext) !important
-}
-
-.toggle-post-icon, .toggle-toc-icon {
-    color: var(--sco-fontcolor) !important
-}
-
-@media screen and (max-width: 768px) {
-    #widget-tree {
-        display: none !important
-    }
-}
-
-.guli_top {
-    position: fixed;
-    z-index: 99;
-    right: 30px;
-    display: flex;
-    transition: .3s;
-    opacity: 0;
-    bottom: -25px;
-    width: 88px;
-    height: 123px;
-    user-select: none
-}
-
-.guli_top.guli-fixed {
-    opacity: 1;
-    bottom: 25px
-}
-
-#guli_top .guli_body {
-    position: relative;
-    height: 123px;
-    z-index: 1003
-}
-
-#guli_top .guli_body:hover {
-    cursor: pointer
-}
-
-#guli_top .guli_wing {
-    position: relative;
-    height: 64px;
-    z-index: 1002;
-    bottom: -120px;
-    transform: scale(.01);
-    box-shadow: var(--sco-shadow-yellow)
-}
-
-#guli_top.open_wing .guli_wing {
-    transform: scale(1.03)
-}
-
-#guli_top.open_wing .guli_body {
-    transform: scale(1)
-}
-
-@media screen and (max-width: 1300px) {
-    #guli_top {
-        display: none
-    }
-}
-
-#cookies-window {
-    min-width: 300px;
-    background: var(--sco-maskbgdeep);
-    color: var(--sco-fontcolor);
-    padding: 8px 16px;
-    display: flex;
-    flex-direction: column;
-    bottom: 20px;
-    right: 20px;
-    position: fixed;
-    border-radius: 12px;
-    transition: .3s;
-    z-index: 1002;
-    user-select: none;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-    transform: translateZ(0);
-    border: var(--style-border);
-    animation: barrageIn .6s cubic-bezier(.42, 0, .3, 1.11)
-}
-
-#cookies-window.cw-hide {
-    opacity: 0;
-    animation: barrageOut .6s cubic-bezier(.42, 0, .3, 1.11);
-    z-index: -1
-}
-
-#cookies-window .cookies-window-title {
-    padding-bottom: 4px;
-    border-bottom: var(--style-border);
-    font-size: 12px;
-    font-weight: 700
-}
-
-#cookies-window .cookies-window-content {
-    font-size: 14px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center
-}
-
-.cookie-to {
-    margin-right: 4px;
-    font-weight: 700
-}
-
-.cookies-link {
-    margin-left: auto;
-    font-size: 16px
-}
-
-.cookies-link i.scoicon {
-    font-size: 16px
-}
-
-@media screen and (max-width: 1300px) {
-    #cookies-window {
-        display: none
-    }
-}
-
-.heo-tag {
-    padding: 1px 6px;
-    border-radius: 6px 6px 6px 0;
-    margin-left: 4px;
-    height: 20px;
-    line-height: 19px
-}
-
-.heo-tag-new-view {
-    color: var(--sco-white);
-    background: var(--sco-green)
-}
-
-.heo-tag-hot-view {
-    color: var(--sco-white);
-    background: var(--sco-red)
-}
-
-#page-header.full_page {
-    height: 2rem;
-    background-image: none !important;
-    background-color: var(--sco-none)
-}
-
-#page-header.full_page #site-info {
-    display: none
-}
 
 .layout > div:first-child {
     width: calc(100% - 300px)
@@ -8091,64 +6363,6 @@ a.extend.prev {
     display: none
 }
 
-#page-header.post-bg::before {
-    transition: .3s;
-    height: 20rem;
-    background-color: var(--sco-main);
-    opacity: 1;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    content: ""
-}
-
-@media screen and (max-width: 768px) {
-    #page-header.post-bg {
-        height: 30rem !important;
-        margin-bottom: -12px
-    }
-
-    #page-header.post-bg:before {
-        height: 15rem
-    }
-
-    .post-bg #post-cover {
-        min-height: 15rem !important;
-        height: 70% !important;
-        opacity: 1 !important
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    #page-header.post-bg {
-        height: 25rem
-    }
-
-    #page-header {
-        height: 25rem
-    }
-
-    #page-header.post-bg:before {
-        height: 25rem;
-        opacity: 0;
-        background-color: var(--sco-main);
-        animation: slide-in-op .6s 0s forwards
-    }
-
-    #post-info .post-title {
-        width: 1100px;
-        font-size: 2.6rem !important
-    }
-}
-
-#page-header.post-bg {
-    background-color: var(--sco-background);
-    transition: .6s;
-    overflow: hidden
-}
-
 .post-bg #post-cover {
     width: 100%;
     height: 100%;
@@ -8250,11 +6464,7 @@ a.extend.prev {
     }
 }
 
-#page-header {
-    background-image: none !important;
-    display: flex;
-    justify-content: center
-}
+
 
 #post-cover-rgb {
     position: absolute;
@@ -8334,42 +6544,12 @@ a.extend.prev {
     max-width: 1400px
 }
 
-.full_page #post-cover {
-    display: none
-}
-
-#page-header #post-info {
-    top: 0;
-    position: absolute;
-    padding: 0 3rem;
-    margin: 0 auto;
-    z-index: 10;
-    color: var(--sco-white);
-    max-width: 1400px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    height: calc(100% + 0px);
-    justify-content: center;
-    animation: slide-in .6s 0s backwards
-}
-
-@media screen and (max-width: 768px) {
-    #page-header #post-info {
-        justify-content: normal;
-        padding: 18rem 6% 0;
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    #page-header #post-info {
-        height: calc(100% + 0px);
-        top: 0;
-        display: flex;
-        justify-content: center
-    }
+.full_page #post-cover {
+    display: none
 }
 
+
+
 #post-info #post-meta > .meta-secondline > span:first-child {
     margin-right: .8rem
 }
@@ -11259,1583 +9439,1191 @@ div#sco-footer-bar a.footer-bar-link:hover {
     border-color: var(--sco-main);
 }
 
-div#sco-footer-bar .footer-logo {
-    font-size: 24px
-}
-
-div#sco-footer-bar .footer-bar-description {
-    color: var(--sco-secondtext);
-    font-weight: 700
-}
-
-.weixin:hover::after {
-    transform: scale(1);
-    opacity: 1
-}
-
-#error-wrap .error-content {
-    box-shadow: none !important;
-    border-radius: 12px;
-    background: var(--sco-card-bg) !important
-}
-
-#body-wrap.error {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 50px 1rem 1rem;
-    position: relative
-}
-
-#body-wrap.error .aside-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    margin: 1rem;
-    max-width: 100%
-}
-
-#body-wrap.error .aside-list .aside-list-group {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    max-width: 800px;
-    margin: 0 auto;
-    justify-content: space-between
-}
-
-#body-wrap.error .aside-list .aside-list-item {
-    padding: .5rem 0;
-    width: 49%
-}
-
-#body-wrap.error .aside-list .aside-list-item img {
-    width: 100%;
-    object-fit: cover;
-    border-radius: 12px
-}
-
-#body-wrap.error .aside-list .aside-list-item .thumbnail {
-    overflow: hidden;
-    width: 100%;
-    height: 200px;
-    background: var(--sco-card-bg);
-    display: flex
-}
-
-#body-wrap.error .aside-list .aside-list-item .content .title {
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    line-height: 1.5;
-    justify-content: center;
-    align-items: flex-end;
-    align-content: center;
-    padding-top: .5rem;
-    font-size: 16px;
-    font-weight: 700
-}
-
-#body-wrap.error .aside-list .aside-list-item .content time {
-    display: none
-}
-
-@media screen and (max-width: 768px) {
-    #body-wrap.error {
-        padding-top: 0
-    }
-
-    #body-wrap.error .aside-list {
-        margin: 0
-    }
-
-    #body-wrap.error .aside-list .aside-list-item .thumbnail {
-        height: 100px
-    }
-}
-
-.bb-info {
-    display: inline;
-    float: right;
-    line-height: 1;
-    color: var(--sco-secondtext);
-    margin-left: auto;
-    margin-bottom: 1rem;
-    margin-right: .5rem
-}
-
-.bb-info:hover {
-    color: var(--sco-hovertext)
-}
-
-
-
-.load-btn.button-load {
-    background: var(--sco-card-btn-bg);
-    color: var(--sco-fontcolor);
-    padding: 12px 12px;
-    margin: 1.5rem 0 0 0;
-    width: 100%;
-    text-align: center;
-    border-radius: 12px;
-    transition: .3s;
-    font-weight: 700
-}
-
-.load-btn.button-load:hover {
-    background: var(--sco-blue);
-    color: var(--sco-white);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-blue)
-}
-
-#cf-container a {
-    width: fit-content
-}
-
-#hexo-circle-of-friends-root {
-    margin: 0 -8px
-}
-
-.moments-list {
-    display: flex;
-    flex-direction: column
-}
-
-.moments-list .article-sort-item-info {
-    display: flex;
-    flex-direction: column
-}
-
-.article-sort-item-info-more {
-    display: flex;
-    font-size: .7rem;
-    margin-right: auto
-}
-
-.friend_post_time {
-    margin-left: 8px;
-    color: var(--sco-secondtext)
-}
-
-.friendlink-avatar {
-    width: 3rem;
-    height: 3rem;
-    min-width: 3rem;
-    min-height: 3rem;
-    border-radius: 32px;
-    overflow: hidden;
-    background: var(--sco-secondbg);
-    padding: 0 !important
-}
-
-.friendlink-avatar:hover {
-    border-radius: 32px !important;
-    background: var(--sco-secondbg)
-}
-
-.moments-list .article-sort-item-info .article-sort-item-title {
-    color: var(--sco-lighttext)
-}
-
-.moments-list .article-sort-item-info .article-sort-item-title:hover {
-    color: var(--sco-hovertext)
-}
-
-a.bb-link {
-    margin-left: 8px;
-    color: var(--sco-secondtext) !important;
-    display: inline;
-    border: none !important
-}
-
-a.bb-link-info {
-    display: inline;
-    float: right;
-    border: none !important;
-    color: var(--sco-secondtext) !important;
-    line-height: 2.7rem
-}
-
-a.bb-link-info:hover {
-    color: var(--sco-fontcolor) !important;
-    background: 0 0 !important
-}
-
-#friend_link_moments {
-    border: none !important
-}
-
-.moments-article-img {
-    height: 100%;
-    margin: 0 !important
-}
-
-.tab-item-content #moments_container .moments-item a {
-    border-bottom: none;
-    padding: 0;
-    margin-right: auto;
-    width: auto
-}
-
-.tab-item-content #moments_container .moments-item a:hover {
-    background: 0 0;
-    color: var(--sco-lighttext);
-    box-shadow: none
-}
-
-.tab-item-content #moments_container h2 {
-    display: none
-}
-
-#friend_moments_list .moments-sort-item {
-    margin: 1rem 0
-}
-
-.moments-sort-item-img {
-    border-radius: 12px
-}
-
-.moments-item-time {
-    order: 1
-}
-
-.moments-sort-item-title {
-    color: var(--sco-lighttext);
-    border-bottom: none !important;
-    padding: 0 !important
+div#sco-footer-bar .footer-logo {
+    font-size: 24px
 }
 
-.moments-sort-item-title:hover {
-    color: var(--sco-hovertext) !important;
-    background: 0 0 !important;
-    box-shadow: none !important
+div#sco-footer-bar .footer-bar-description {
+    color: var(--sco-secondtext);
+    font-weight: 700
 }
 
-.friendlink-avatar {
-    border-bottom: none !important
+.weixin:hover::after {
+    transform: scale(1);
+    opacity: 1
 }
 
-.moments_load_button {
-    color: var(--sco-fontcolor) !important;
-    background: var(--sco-card-btn-bg) !important;
-    padding: 12px 16px !important;
-    border-radius: 12px !important;
-    transition: .3s;
-    width: 100%;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    border: 0 !important
+#error-wrap .error-content {
+    box-shadow: none !important;
+    border-radius: 12px;
+    background: var(--sco-card-bg) !important
 }
 
-.moments_load_button:hover {
-    color: var(--sco-white) !important;
-    background: var(--sco-main) !important;
-    transition: .3s
+#body-wrap.error {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 50px 1rem 1rem;
+    position: relative
 }
 
-.moments-item-title {
-    color: var(--sco-lighttext);
-    font-size: 1rem;
-    order: 0;
-    width: 100%;
-    font-weight: 700;
-    -webkit-line-clamp: 1 !important;
-    overflow: hidden;
-    -webkit-box-orient: vertical
+#body-wrap.error .aside-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    margin: 1rem;
+    max-width: 100%
 }
 
-.moments-item-info {
+#body-wrap.error .aside-list .aside-list-group {
     display: flex;
-    flex-direction: column
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 800px;
+    margin: 0 auto;
+    justify-content: space-between
 }
 
-.moments_post_time {
-    display: none
+#body-wrap.error .aside-list .aside-list-item {
+    padding: .5rem 0;
+    width: 49%
 }
 
-.moments_post_time i {
-    margin-right: 8px
+#body-wrap.error .aside-list .aside-list-item img {
+    width: 100%;
+    object-fit: cover;
+    border-radius: 12px
 }
 
-.chart {
-    align-items: flex-start;
-    flex: 1;
-    width: 100px;
-    height: 60px;
-    margin: 20px
+#body-wrap.error .aside-list .aside-list-item .thumbnail {
+    overflow: hidden;
+    width: 100%;
+    height: 200px;
+    background: var(--sco-card-bg);
+    display: flex
 }
 
-.moments-item-title {
+#body-wrap.error .aside-list .aside-list-item .content .title {
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    line-height: 1.5;
+    justify-content: center;
+    align-items: flex-end;
+    align-content: center;
+    padding-top: .5rem;
+    font-size: 16px;
     font-weight: 700
 }
 
-.moments_post_info_number {
-    float: right
+#body-wrap.error .aside-list .aside-list-item .content time {
+    display: none
 }
 
-@media screen and (max-width: 500px) {
-    #info_user_pool {
-        padding: 10px;
-        flex-direction: column;
-        max-height: 200px
+@media screen and (max-width: 768px) {
+    #body-wrap.error {
+        padding-top: 0
     }
 
-    .chart {
-        flex: 0;
-        width: 100%;
-        height: 160px;
+    #body-wrap.error .aside-list {
         margin: 0
     }
-}
 
-.moments-item-img {
-    width: 60px !important;
-    height: 60px !important
+    #body-wrap.error .aside-list .aside-list-item .thumbnail {
+        height: 100px
+    }
 }
 
-.moments-item-img img {
-    border-radius: 99px;
-    width: 80px;
-    height: 80px;
-    overflow: hidden
+.bb-info {
+    display: inline;
+    float: right;
+    line-height: 1;
+    color: var(--sco-secondtext);
+    margin-left: auto;
+    margin-bottom: 1rem;
+    margin-right: .5rem
 }
 
-#info_user_pool {
-    background: var(--sco-secondbg);
-    border-radius: 12px !important;
-    margin-top: 1rem;
-    box-shadow: none !important
+.bb-info:hover {
+    color: var(--sco-hovertext)
 }
 
-.moments-item {
-    margin-left: 0 !important;
-    box-shadow: none !important
-}
 
-.article-sort-item-time {
-    display: none
-}
 
-.article-sort-item-tags {
-    margin-top: 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    display: inline-block;
-    text-overflow: ellipsis;
+.load-btn.button-load {
+    background: var(--sco-card-btn-bg);
+    color: var(--sco-fontcolor);
+    padding: 12px 12px;
+    margin: 1.5rem 0 0 0;
     width: 100%;
-    font-size: .7rem
+    text-align: center;
+    border-radius: 12px;
+    transition: .3s;
+    font-weight: 700
 }
 
-.article-sort-item-tags a {
-    color: var(--sco-fontcolor);
-    transition: .3s
+.load-btn.button-load:hover {
+    background: var(--sco-blue);
+    color: var(--sco-white);
+    transition: .3s;
+    box-shadow: var(--sco-shadow-blue)
 }
 
-.article-sort-item-tags a:hover {
-    color: var(--sco-theme);
-    transition: .3s
+#cf-container a {
+    width: fit-content
 }
 
-.article-sort-item-tags a .tags-punctuation {
-    font-size: 12px;
-    margin-right: 1px
+#hexo-circle-of-friends-root {
+    margin: 0 -8px
 }
 
-#sco-footer .footer-links {
+.moments-list {
     display: flex;
     flex-direction: column
 }
 
-#sco-footer {
+.moments-list .article-sort-item-info {
     display: flex;
-    flex-direction: row;
-    width: 100%;
-    max-width: 1200px;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    margin: 1rem auto 3rem;
-    padding: 0 1rem
-}
-
-#sco-footer .footer-item {
-    font-size: .8rem;
-    line-height: .8rem;
-    color: var(--sco-fontcolor);
-    margin-right: auto;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 120px;
-    cursor: pointer;
-    padding: 8px;
-    border-radius: 12px
-}
-
-#sco-footer .footer-item:hover {
-    color: var(--sco-theme);
-    background: var(--sco-main-op-light)
-}
-
-[data-theme=dark] #sco-footer .footer-item:hover {
-    background: var(--sco-theme-op)
-}
-
-
-#sco-footer .footer-group {
-    min-width: 120px
+    flex-direction: column
 }
 
-#sco-footer .footer-title-group {
+.article-sort-item-info-more {
     display: flex;
-    align-items: center;
-    margin: 1rem 0 .7rem 0
+    font-size: .7rem;
+    margin-right: auto
 }
 
-#sco-footer .footer-title-group a {
-    margin-left: 8px
+.friend_post_time {
+    margin-left: 8px;
+    color: var(--sco-secondtext)
 }
 
-#sco-footer .footer-title-group i {
-    line-height: 1;
-    color: var(--sco-secondtext);
-    transition: .3s;
-    font-size: 16px;
-    opacity: .6
+.friendlink-avatar {
+    width: 3rem;
+    height: 3rem;
+    min-width: 3rem;
+    min-height: 3rem;
+    border-radius: 32px;
+    overflow: hidden;
+    background: var(--sco-secondbg);
+    padding: 0 !important
 }
 
-#sco-footer .footer-title-group a:hover i {
-    color: var(--sco-main);
-    opacity: 1
+.friendlink-avatar:hover {
+    border-radius: 32px !important;
+    background: var(--sco-secondbg)
 }
 
-#sco-footer .footer-title-group .footer-title {
-    margin: 0
+.moments-list .article-sort-item-info .article-sort-item-title {
+    color: var(--sco-lighttext)
 }
 
-#sco-footer .random-friends-btn {
-    display: flex
+.moments-list .article-sort-item-info .article-sort-item-title:hover {
+    color: var(--sco-hovertext)
 }
 
-#sco-footer .footer-title {
-    color: var(--sco-secondtext);
-    font-size: .8rem;
+a.bb-link {
     margin-left: 8px;
+    color: var(--sco-secondtext) !important;
+    display: inline;
+    border: none !important
 }
 
-#footer-bar {
-    padding: 1rem;
-    color: var(--sco-fontcolor);
-    margin-top: 1rem;
-    background: var(--sco-secondbg);
-    display: flex;
-    overflow: hidden;
-    z-index: 1002;
-    transition: .3s
+a.bb-link-info {
+    display: inline;
+    float: right;
+    border: none !important;
+    color: var(--sco-secondtext) !important;
+    line-height: 2.7rem
 }
 
-#footer-bar .footer-bar-links {
-    display: flex;
-    justify-content: space-between;
-    max-width: 1400px;
-    width: 100%;
-    margin: 0 auto;
-    flex-wrap: wrap;
-    align-items: center;
-    line-height: 1
+a.bb-link-info:hover {
+    color: var(--sco-fontcolor) !important;
+    background: 0 0 !important
 }
 
-#footer-bar .footer-bar-left {
-    display: flex;
-    flex-wrap: wrap;
-    min-height: 32px;
-    align-items: center
+#friend_link_moments {
+    border: none !important
 }
 
-#footer-bar .footer-bar-link {
-    margin-top: 8px;
-    margin-bottom: 8px;
-    margin-right: 1rem;
-    color: var(--sco-fontcolor);
-    font-size: .8rem;
-    font-weight: 700;
-    white-space: nowrap
+.moments-article-img {
+    height: 100%;
+    margin: 0 !important
 }
 
-#footer-bar .footer-bar-link.cc {
-    margin-right: 0
+.tab-item-content #moments_container .moments-item a {
+    border-bottom: none;
+    padding: 0;
+    margin-right: auto;
+    width: auto
 }
 
-#footer-bar .footer-bar-link.cc i {
-    margin-right: .5rem;
-    font-size: 18px
+.tab-item-content #moments_container .moments-item a:hover {
+    background: 0 0;
+    color: var(--sco-lighttext);
+    box-shadow: none
 }
 
-#footer-bar .footer-bar-link:hover {
-    color: var(--sco-theme)
+.tab-item-content #moments_container h2 {
+    display: none
 }
 
-#footer-bar > div > div.footer-bar-left > span {
-    margin-right: 1rem
+#friend_moments_list .moments-sort-item {
+    margin: 1rem 0
 }
 
-#footer-bar .footer-bar-right a:hover {
-    color: var(--sco-lighttext)
+.moments-sort-item-img {
+    border-radius: 12px
 }
 
-#footer_deal i {
-    font-size: .9rem;
-    line-height: .9rem;
-    height: .9rem
+.moments-item-time {
+    order: 1
 }
 
-.la-widget.la-data-widget__container {
-    border-radius: 12px;
-    border: var(--style-border) !important;
-    box-shadow: var(--sco-shadow-border);
-    border-color: var(--sco-card-border)
+.moments-sort-item-title {
+    color: var(--sco-lighttext);
+    border-bottom: none !important;
+    padding: 0 !important
 }
 
-#about-page {
-    display: flex;
-    padding-top: 1rem;
-    flex-direction: column;
-    align-items: center
+.moments-sort-item-title:hover {
+    color: var(--sco-hovertext) !important;
+    background: 0 0 !important;
+    box-shadow: none !important
 }
 
-#about-page .author-info {
-    display: flex;
-    align-items: center;
-    margin: 0 0 16px 0
+.friendlink-avatar {
+    border-bottom: none !important
 }
 
-#about-page .author-tag-left {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end
+.moments_load_button {
+    color: var(--sco-fontcolor) !important;
+    background: var(--sco-card-btn-bg) !important;
+    padding: 12px 16px !important;
+    border-radius: 12px !important;
+    transition: .3s;
+    width: 100%;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border: 0 !important
 }
 
-#about-page .author-tag-right {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start
+.moments_load_button:hover {
+    color: var(--sco-white) !important;
+    background: var(--sco-main) !important;
+    transition: .3s
 }
 
-@media screen and (max-width: 768px) {
-    #about-page .author-tag-left, #about-page .author-tag-right {
-        display: none
-    }
+.moments-item-title {
+    color: var(--sco-lighttext);
+    font-size: 1rem;
+    order: 0;
+    width: 100%;
+    font-weight: 700;
+    -webkit-line-clamp: 1 !important;
+    overflow: hidden;
+    -webkit-box-orient: vertical
 }
 
-#about-page .author-tag-left .author-tag:first-child, #about-page .author-tag-left .author-tag:last-child {
-    margin-right: -16px
+.moments-item-info {
+    display: flex;
+    flex-direction: column
 }
 
-#about-page .author-tag-right .author-tag:first-child, #about-page .author-tag-right .author-tag:last-child {
-    margin-left: -16px
+.moments_post_time {
+    display: none
 }
 
-#about-page .author-tag {
-    transform: translate(0, -4px);
-    padding: 1px 8px;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    border-radius: 40px;
-    margin-top: 6px;
-    font-size: 14px;
-    font-weight: 700;
-    box-shadow: var(--sco-shadow-lightblack);
-    animation: 6s ease-in-out 0s infinite normal none running floating
+.moments_post_time i {
+    margin-right: 8px
 }
 
-#about-page .author-tag:nth-child(1) {
-    animation-delay: 0s
+.chart {
+    align-items: flex-start;
+    flex: 1;
+    width: 100px;
+    height: 60px;
+    margin: 20px
 }
 
-#about-page .author-tag:nth-child(2) {
-    animation-delay: .6s
+.moments-item-title {
+    font-weight: 700
 }
 
-#about-page .author-tag:nth-child(3) {
-    animation-delay: 1.2s
+.moments_post_info_number {
+    float: right
 }
 
-#about-page .author-tag:nth-child(4) {
-    animation-delay: 1.8s
-}
+@media screen and (max-width: 500px) {
+    #info_user_pool {
+        padding: 10px;
+        flex-direction: column;
+        max-height: 200px
+    }
 
-#about-page .author-img {
-    margin: 0 30px;
-    border-radius: 50%;
-    width: 180px;
-    height: 180px;
-    position: relative;
-    background: var(--sco-secondbg);
-    user-select: none
+    .chart {
+        flex: 0;
+        width: 100%;
+        height: 160px;
+        margin: 0
+    }
 }
 
-#about-page .author-img img {
-    border-radius: 200px
+.moments-item-img {
+    width: 60px !important;
+    height: 60px !important
 }
 
-#about-page .author-img::before {
-    content: '';
-    -webkit-transition: 1s;
-    -moz-transition: 1s;
-    -o-transition: 1s;
-    -ms-transition: 1s;
-    transition: 1s;
-    width: 30px;
-    height: 30px;
-    background: var(--sco-green);
-    position: absolute;
-    border-radius: 50%;
-    border: 5px solid var(--sco-background);
-    bottom: 5px;
-    right: 10px;
-    z-index: 2
+.moments-item-img img {
+    border-radius: 99px;
+    width: 80px;
+    height: 80px;
+    overflow: hidden
 }
 
-@media screen and (max-width: 768px) {
-    #about-page .author-img {
-        width: 120px;
-        height: 120px
-    }
-
-    #about-page .author-img::before {
-        bottom: -5px;
-        right: -5px
-    }
+#info_user_pool {
+    background: var(--sco-secondbg);
+    border-radius: 12px !important;
+    margin-top: 1rem;
+    box-shadow: none !important
 }
 
-#about-page .author-title {
-    font-size: 2rem;
-    font-weight: 700;
-    margin: 1rem 0;
-    line-height: 1
+.moments-item {
+    margin-left: 0 !important;
+    box-shadow: none !important
 }
 
-.page-title {
+.article-sort-item-time {
     display: none
 }
 
+.article-sort-item-tags {
+    margin-top: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    text-overflow: ellipsis;
+    width: 100%;
+    font-size: .7rem
+}
 
-.inline-word {
-    word-break: keep-all;
-    white-space: nowrap
+.article-sort-item-tags a {
+    color: var(--sco-fontcolor);
+    transition: .3s
 }
 
-.author-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    width: 100%;
-    margin-top: 1rem
+.article-sort-item-tags a:hover {
+    color: var(--sco-theme);
+    transition: .3s
 }
 
-.author-content-item-group.column {
+.article-sort-item-tags a .tags-punctuation {
+    font-size: 12px;
+    margin-right: 1px
+}
+
+#sco-footer .footer-links {
     display: flex;
-    flex-direction: column;
-    width: 49%;
-    justify-content: space-between
+    flex-direction: column
 }
 
-.author-content-item {
-    width: 49%;
-    border-radius: 12px;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    box-shadow: var(--sco-shadow-border);
-    position: relative;
-    padding: 1rem 2rem;
-    overflow: hidden
+#sco-footer {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    max-width: 1200px;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin: 1rem auto 3rem;
+    padding: 0 1rem
 }
 
-.author-content-item.single {
-    width: 100%
+#sco-footer .footer-item {
+    font-size: .8rem;
+    line-height: .8rem;
+    color: var(--sco-fontcolor);
+    margin-right: auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 120px;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 12px
 }
 
-.author-content-item .author-content-item-title {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 1
+#sco-footer .footer-item:hover {
+    color: var(--sco-theme);
+    background: var(--sco-main-op-light)
 }
 
-.author-content-item .author-content-item-tips {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+[data-theme=dark] #sco-footer .footer-item:hover {
+    background: var(--sco-theme-op)
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item {
-        width: 100% !important;
-        margin-top: 1rem;
-        padding: 1rem
-    }
 
-    .author-content-item-group.column {
-        width: 100% !important
-    }
+#sco-footer .footer-group {
+    min-width: 120px
+}
 
-    .author-content {
-        margin-top: 0
-    }
+#sco-footer .footer-title-group {
+    display: flex;
+    align-items: center;
+    margin: 1rem 0 .7rem 0
 }
 
-.card-background-icon {
-    font-size: 12rem;
-    opacity: .2;
-    position: absolute;
-    right: 0;
-    bottom: -40%;
-    transform: rotate(30deg);
-    transition: 2s ease-in-out
+#sco-footer .footer-title-group a {
+    margin-left: 8px
 }
 
-.author-content-item:hover .card-background-icon {
-    transform: rotate(20deg)
+#sco-footer .footer-title-group i {
+    line-height: 1;
+    color: var(--sco-secondtext);
+    transition: .3s;
+    font-size: 16px;
+    opacity: .6
 }
 
-#about-page .myInfoAndSayHello {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    color: var(--sco-white);
-    background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);
-    background-size: 200%;
-    animation: gradient 15s ease infinite;
-    width: 59%
+#sco-footer .footer-title-group a:hover i {
+    color: var(--sco-main);
+    opacity: 1
 }
 
-#about-page .myInfoAndSayHello .title1 {
-    opacity: .8;
-    line-height: 1.3
+#sco-footer .footer-title-group .footer-title {
+    margin: 0
 }
 
-#about-page .myInfoAndSayHello .title2 {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 1.1;
-    margin: .5rem 0
+#sco-footer .random-friends-btn {
+    display: flex
 }
 
-.author-content-item-group.column.mapAndInfo {
-    width: 59%
+#sco-footer .footer-title {
+    color: var(--sco-secondtext);
+    font-size: .8rem;
+    margin-left: 8px;
 }
 
-.author-content-item.map {
-    background: var(--site-about-oneself-map--light) no-repeat center;
-    min-height: 160px;
-    max-height: 400px;
-    position: relative;
+#footer-bar {
+    padding: 1rem;
+    color: var(--sco-fontcolor);
+    margin-top: 1rem;
+    background: var(--sco-secondbg);
+    display: flex;
     overflow: hidden;
-    margin-bottom: .5rem;
-    height: 60%;
-    background-size: 100%;
-    transition: 1s ease-in-out
+    z-index: 1002;
+    transition: .3s
 }
 
-[data-theme=dark] .author-content-item.map {
-    background: var(--site-about-oneself-map--dark) no-repeat center;
-    background-size: 100%
+#footer-bar .footer-bar-links {
+    display: flex;
+    justify-content: space-between;
+    max-width: 1400px;
+    width: 100%;
+    margin: 0 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    line-height: 1
 }
 
-.author-content-item.map:hover {
-    background-size: 120%;
-    transition: 4s ease-in-out;
-    background-position-x: 0;
-    background-position-y: 36%
+#footer-bar .footer-bar-left {
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 32px;
+    align-items: center
 }
 
-.author-content-item.map .map-title {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: var(--sco-maskbg);
-    padding: .5rem 2rem;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transition: 1s ease-in-out;
-    font-size: 20px;
-    transform: translateZ(0)
+#footer-bar .footer-bar-link {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    margin-right: 1rem;
+    color: var(--sco-fontcolor);
+    font-size: .8rem;
+    font-weight: 700;
+    white-space: nowrap
 }
 
-.author-content-item.map:hover .map-title {
-    bottom: -100%
+#footer-bar .footer-bar-link.cc {
+    margin-right: 0
 }
 
-.author-content-item.map .map-title b {
-    color: var(--sco-fontcolor)
+#footer-bar .footer-bar-link.cc i {
+    margin-right: .5rem;
+    font-size: 18px
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item.map.myphoto {
-        background-size: cover !important
-    }
+#footer-bar .footer-bar-link:hover {
+    color: var(--sco-theme)
+}
 
-    .author-content-item.map .map-title {
-        padding: 1rem
-    }
+#footer-bar > div > div.footer-bar-left > span {
+    margin-right: 1rem
 }
 
-.author-content-item.selfInfo {
-    display: flex;
-    min-height: 100px;
-    max-height: 400px;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    height: -webkit-fill-available;
-    height: 40%
+#footer-bar .footer-bar-right a:hover {
+    color: var(--sco-lighttext)
 }
 
-@media screen and (max-width: 1300px) {
-    .author-content-item.selfInfo {
-        height: 70%
-    }
+#footer_deal i {
+    font-size: .9rem;
+    line-height: .9rem;
+    height: .9rem
+}
+
+.la-widget.la-data-widget__container {
+    border-radius: 12px;
+    border: var(--style-border) !important;
+    box-shadow: var(--sco-shadow-border);
+    border-color: var(--sco-card-border)
 }
 
-.author-content-item.selfInfo div {
+#about-page {
     display: flex;
+    padding-top: 1rem;
     flex-direction: column;
-    margin: .5rem 2rem .5rem 0
-}
-
-.author-content-item.selfInfo .selfInfo-title {
-    opacity: .8;
-    font-size: .6rem;
-    line-height: 1;
-    margin-bottom: 8px
+    align-items: center
 }
 
-.author-content-item.selfInfo .selfInfo-content {
-    font-weight: 700;
-    font-size: 34px;
-    line-height: 1
+#about-page .author-info {
+    display: flex;
+    align-items: center;
+    margin: 0 0 16px 0
 }
 
-.author-content-item.myphoto {
-    height: 60%;
-    min-height: 240px;
-    position: relative;
-    overflow: hidden;
-    width: 39%;
+#about-page .author-tag-left {
     display: flex;
-    align-items: center;
-    justify-content: center
+    flex-direction: column;
+    align-items: flex-end
 }
 
-.author-content-item.myphoto img {
-    position: absolute;
-    height: 100%;
-    min-width: 100%;
-    object-fit: cover;
-    transition: .6s;
-    user-select: none
+#about-page .author-tag-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start
 }
 
-.author-content-item.myphoto:hover img {
-    min-width: 105%;
-    transition: 2s
+@media screen and (max-width: 768px) {
+    #about-page .author-tag-left, #about-page .author-tag-right {
+        display: none
+    }
 }
 
-.author-content-item.myphoto .myphoto-title {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: var(--sco-maskbgdeep);
-    padding: .5rem 2rem;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
+#about-page .author-tag-left .author-tag:first-child, #about-page .author-tag-left .author-tag:last-child {
+    margin-right: -16px
 }
 
-.author-content-item.careers {
-    min-height: 400px
+#about-page .author-tag-right .author-tag:first-child, #about-page .author-tag-right .author-tag:last-child {
+    margin-left: -16px
 }
 
-.author-content-item.careers img {
-    position: absolute;
-    left: 0;
-    bottom: 20px;
-    width: 100%;
-    transition: .6s;
-    user-select: none
+#about-page .author-tag {
+    transform: translate(0, -4px);
+    padding: 1px 8px;
+    background: var(--sco-card-bg);
+    border: var(--style-border-always);
+    border-radius: 40px;
+    margin-top: 6px;
+    font-size: 14px;
+    font-weight: 700;
+    box-shadow: var(--sco-shadow-lightblack);
+    animation: 6s ease-in-out 0s infinite normal none running floating
 }
 
-.author-content-item.careers .careers-group {
-    margin-top: 12px
+#about-page .author-tag:nth-child(1) {
+    animation-delay: 0s
 }
 
-.author-content-item.careers .careers-item {
-    display: flex;
-    align-items: center
+#about-page .author-tag:nth-child(2) {
+    animation-delay: .6s
 }
 
-.author-content-item.careers .careers-item .circle {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-    border-radius: 16px
+#about-page .author-tag:nth-child(3) {
+    animation-delay: 1.2s
 }
 
-.author-content-item.careers .careers-item .name {
-    color: var(--sco-secondtext)
+#about-page .author-tag:nth-child(4) {
+    animation-delay: 1.8s
 }
 
-.author-content-item.personalities {
-    overflow: hidden;
+#about-page .author-img {
+    margin: 0 30px;
+    border-radius: 50%;
+    width: 180px;
+    height: 180px;
     position: relative;
-    width: 59%
+    background: var(--sco-secondbg);
+    user-select: none
 }
 
-.author-content-item.personalities .title2 {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 1.1
+#about-page .author-img img {
+    border-radius: 200px
 }
 
-.author-content-item.personalities .image {
+#about-page .author-img::before {
+    content: '';
+    -webkit-transition: 1s;
+    -moz-transition: 1s;
+    -o-transition: 1s;
+    -ms-transition: 1s;
+    transition: 1s;
+    width: 30px;
+    height: 30px;
+    background: var(--sco-green);
     position: absolute;
-    right: -40px;
-    bottom: -10rem;
-    transition: transform 2s cubic-bezier(.13, .45, .21, 1.02);
-    user-select: none
-}
-
-.author-content-item.personalities:hover .image {
-    transform: rotate(-10deg)
+    border-radius: 50%;
+    border: 5px solid var(--sco-background);
+    bottom: 5px;
+    right: 10px;
+    z-index: 2
 }
 
 @media screen and (max-width: 768px) {
-    .author-content-item.personalities {
-        min-height: 360px
+    #about-page .author-img {
+        width: 120px;
+        height: 120px
     }
 
-    .author-content-item.personalities .image {
-        right: -70px
+    #about-page .author-img::before {
+        bottom: -5px;
+        right: -5px
     }
 }
 
-.author-content-item.maxim {
-    font-size: 36px;
+#about-page .author-title {
+    font-size: 2rem;
     font-weight: 700;
-    line-height: 1.1;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    justify-content: center;
-    width: 39%
-}
-
-.author-content-item.maxim .maxim-title {
-    display: flex;
-    flex-direction: column
+    margin: 1rem 0;
+    line-height: 1
 }
 
-.author-content-item.maxim .title1 {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+.page-title {
+    display: none
 }
 
-.author-content-item.buff {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 1.1;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    justify-content: center;
-    background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%);
-    color: var(--sco-white);
-    background-size: 200%;
-    animation: gradient 15s ease infinite;
-    min-height: 200px;
-    height: fit-content;
-    width: 59%
-}
 
-.author-content-item.buff .card-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center
+.inline-word {
+    word-break: keep-all;
+    white-space: nowrap
 }
 
-.author-content-item.buff .buff-title {
+.author-content {
     display: flex;
-    flex-direction: column
-}
-
-.author-content-item.buff .title1 {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 1rem
 }
 
-.author-content-item.skills {
+.author-content-item-group.column {
     display: flex;
-    justify-content: center;
-    align-items: flex-start;
     flex-direction: column;
     width: 49%;
-    min-height: 450px
-}
-
-.author-content-item.skills .tags-group-all {
-    display: flex;
-    transform: rotate(0);
-    transition: .3s
+    justify-content: space-between
 }
 
-.author-content-item.skills .tags-group-wrapper {
-    margin-top: 40px;
-    display: flex;
-    flex-wrap: nowrap;
-    animation: rowup 60s linear infinite
+.author-content-item {
+    width: 49%;
+    border-radius: 12px;
+    background: var(--sco-card-bg);
+    border: var(--style-border-always);
+    box-shadow: var(--sco-shadow-border);
+    position: relative;
+    padding: 1rem 2rem;
+    overflow: hidden
 }
 
-.author-content-item.skills .skills-style-group {
-    position: relative
+.author-content-item.single {
+    width: 100%
 }
 
-.author-content-item.skills .skills-list {
-    display: flex;
-    opacity: 0;
-    transition: .3s;
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    flex-wrap: wrap;
-    flex-direction: row;
-    margin-top: 10px
+.author-content-item .author-content-item-title {
+    font-size: 36px;
+    font-weight: 700;
+    line-height: 1
 }
 
-.author-content-item.skills:hover .skills-style-group .tags-group-all {
-    opacity: 0
+.author-content-item .author-content-item-tips {
+    opacity: .8;
+    font-size: .6rem;
+    margin-bottom: .5rem
 }
 
-.author-content-item.skills:hover .skills-style-group .skills-list {
-    opacity: 1
+@media screen and (max-width: 768px) {
+    .author-content-item {
+        width: 100% !important;
+        margin-top: 1rem;
+        padding: 1rem
+    }
+
+    .author-content-item-group.column {
+        width: 100% !important
+    }
+
+    .author-content {
+        margin-top: 0
+    }
 }
 
-.author-content-item.skills .skill-info {
-    display: flex;
-    align-items: center;
-    margin-right: 10px;
-    margin-top: 10px;
-    background: var(--sco-background);
-    border-radius: 40px;
-    padding: 4px 12px 4px 8px;
-    border: var(--style-border);
-    box-shadow: var(--sco-shadow-border)
+.card-background-icon {
+    font-size: 12rem;
+    opacity: .2;
+    position: absolute;
+    right: 0;
+    bottom: -40%;
+    transform: rotate(30deg);
+    transition: 2s ease-in-out
 }
 
-.author-content-item.skills .etc {
-    margin-right: 10px;
-    margin-top: 10px
+.author-content-item:hover .card-background-icon {
+    transform: rotate(20deg)
 }
 
-.author-content-item.skills .skill-icon {
-    width: 32px;
-    height: 32px;
-    border-radius: 32px;
+#about-page .myInfoAndSayHello {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     justify-content: center;
-    margin-right: 8px;
-    user-select: none
+    color: var(--sco-white);
+    background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);
+    background-size: 200%;
+    animation: gradient 15s ease infinite;
+    width: 59%
 }
 
-.author-content-item.skills .skill-icon img {
-    width: 18px;
-    height: 18px
+#about-page .myInfoAndSayHello .title1 {
+    opacity: .8;
+    line-height: 1.3
 }
 
-.author-content-item.skills .skill-name {
+#about-page .myInfoAndSayHello .title2 {
+    font-size: 36px;
     font-weight: 700;
-    line-height: 1
-}
-
-.author-content-item.aboutsiteTips {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    flex-direction: column;
-    width: 39%
+    line-height: 1.1;
+    margin: .5rem 0
 }
 
-.aboutsiteTips h2 {
-    margin-right: auto;
-    font-size: 36px;
-    font-family: Helvetica;
-    line-height: 1.06;
-    letter-spacing: -.02em;
-    color: var(--sco-fontcolor);
-    margin-top: 0
+.author-content-item-group.column.mapAndInfo {
+    width: 59%
 }
 
-.aboutsiteTips .mask {
-    height: 36px;
+.author-content-item.map {
+    background: var(--site-about-oneself-map--light) no-repeat center;
+    min-height: 160px;
+    max-height: 400px;
     position: relative;
     overflow: hidden;
-    margin-top: 4px
+    margin-bottom: .5rem;
+    height: 60%;
+    background-size: 100%;
+    transition: 1s ease-in-out
 }
 
-.aboutsiteTips .mask span {
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    top: 36px;
-    padding-bottom: var(--offset);
-    background-size: 100% 100%;
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-repeat: no-repeat
+[data-theme=dark] .author-content-item.map {
+    background: var(--site-about-oneself-map--dark) no-repeat center;
+    background-size: 100%
 }
 
-.aboutsiteTips .mask span[data-show] {
-    transform: translateY(-100%);
-    transition: .5s transform ease-in-out
+.author-content-item.map:hover {
+    background-size: 120%;
+    transition: 4s ease-in-out;
+    background-position-x: 0;
+    background-position-y: 36%
 }
 
-.aboutsiteTips .mask span[data-up] {
-    transform: translateY(-200%);
-    transition: .5s transform ease-in-out
+.author-content-item.map .map-title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: var(--sco-maskbg);
+    padding: .5rem 2rem;
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    transition: 1s ease-in-out;
+    font-size: 20px;
+    transform: translateZ(0)
 }
 
-.aboutsiteTips .mask span:nth-child(1) {
-    background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1)
+.author-content-item.map:hover .map-title {
+    bottom: -100%
 }
 
-.aboutsiteTips .mask span:nth-child(2) {
-    background-image: linear-gradient(45deg, #18e198 50%, #0ec15d)
+.author-content-item.map .map-title b {
+    color: var(--sco-fontcolor)
 }
 
-.aboutsiteTips .mask span:nth-child(3) {
-    background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c)
+@media screen and (max-width: 768px) {
+    .author-content-item.map.myphoto {
+        background-size: cover !important
+    }
+
+    .author-content-item.map .map-title {
+        padding: 1rem
+    }
 }
 
-.aboutsiteTips .mask span:nth-child(4) {
-    background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f)
+.author-content-item.selfInfo {
+    display: flex;
+    min-height: 100px;
+    max-height: 400px;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    height: -webkit-fill-available;
+    height: 40%
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item.map {
-        margin-bottom: 0
+@media screen and (max-width: 1300px) {
+    .author-content-item.selfInfo {
+        height: 70%
     }
 }
 
-#about-page .about-statistic {
-    min-height: 380px;
-    width: 39%;
-    background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp) no-repeat top;
-    background-size: cover;
-    color: var(--sco-white);
-    overflow: hidden
+.author-content-item.selfInfo div {
+    display: flex;
+    flex-direction: column;
+    margin: .5rem 2rem .5rem 0
 }
 
-#about-page .about-statistic::after {
-    box-shadow: 0 -159px 173px 71px #0f1114 inset;
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
+.author-content-item.selfInfo .selfInfo-title {
+    opacity: .8;
+    font-size: .6rem;
+    line-height: 1;
+    margin-bottom: 8px
 }
 
-#about-page .about-statistic .banner-button {
-    background: var(--sco-white-op)
+.author-content-item.selfInfo .selfInfo-content {
+    font-weight: 700;
+    font-size: 34px;
+    line-height: 1
 }
 
-#about-page .about-statistic .banner-button:hover {
-    background: var(--sco-theme)
+.author-content-item.myphoto {
+    height: 60%;
+    min-height: 240px;
+    position: relative;
+    overflow: hidden;
+    width: 39%;
+    display: flex;
+    align-items: center;
+    justify-content: center
 }
 
-#statistic {
-    font-size: 16px;
-    border-radius: 15px;
-    width: 100%;
-    color: var(--sco-white);
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-top: 1rem;
-    margin-bottom: 2rem
+.author-content-item.myphoto img {
+    position: absolute;
+    height: 100%;
+    min-width: 100%;
+    object-fit: cover;
+    transition: .6s;
+    user-select: none
 }
 
-#statistic div {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    width: 50%;
-    margin-bottom: .5rem
+.author-content-item.myphoto:hover img {
+    min-width: 105%;
+    transition: 2s
 }
 
-#statistic div span:first-child {
-    opacity: .8;
-    font-size: .6rem
+.author-content-item.myphoto .myphoto-title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: var(--sco-maskbgdeep);
+    padding: .5rem 2rem;
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    transform: translateZ(0)
 }
 
-#statistic div span:last-child {
-    font-weight: 700;
-    font-size: 34px;
-    line-height: 1;
-    white-space: nowrap
+.author-content-item.careers {
+    min-height: 400px
 }
 
-.author-content-item.about-statistic .card-content .banner-button-group .banner-button:hover {
-    background: #998c5a;
-    color: var(--sco-white)
+.author-content-item.careers img {
+    position: absolute;
+    left: 0;
+    bottom: 20px;
+    width: 100%;
+    transition: .6s;
+    user-select: none
 }
 
-.author-content-item.single.reward .author-content-item .author-content-item-title {
-    color: var(--sco-red)
+.author-content-item.careers .careers-group {
+    margin-top: 12px
 }
 
-.author-content-item.single.reward .reward-list-all {
+.author-content-item.careers .careers-item {
     display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    margin: 1rem -.25rem .5rem;
+    align-items: center
 }
 
-.author-content-item.single.reward .reward-list-all .reward-list-item {
-    padding: 1rem;
-    border-radius: 12px;
-    border: var(--style-border-always);
-    width: calc((100% / 6) - .5rem);
-    margin: 0 .25rem .5rem .25rem;
-    box-shadow: var(--sco-shadow-border);
-    flex-direction: column;
-    justify-content: space-between
+.author-content-item.careers .careers-item .circle {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    border-radius: 16px
 }
 
-.reward-list-tips p {
-    font-size: 12px;
+.author-content-item.careers .careers-item .name {
     color: var(--sco-secondtext)
 }
 
-@media screen and (max-width: 1200px) {
-    .author-content-item.single.reward .reward-list-all .reward-list-item {
-        width: calc((100% / 4) - .5rem)
-    }
-}
-
-@media screen and (max-width: 900px) {
-    .author-content-item.single.reward .reward-list-all .reward-list-item {
-        width: calc((100% / 2) - .5rem)
-    }
+.author-content-item.personalities {
+    overflow: hidden;
+    position: relative;
+    width: 59%
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item.single.reward .reward-list-all .reward-list-item {
-        width: 100%
-    }
+.author-content-item.personalities .title2 {
+    font-size: 36px;
+    font-weight: 700;
+    line-height: 1.1
 }
 
-.author-content-item.single.reward .author-content-item-description {
-    font-size: 16px;
-    margin-top: .5rem
+.author-content-item.personalities .image {
+    position: absolute;
+    right: -40px;
+    bottom: -10rem;
+    transition: transform 2s cubic-bezier(.13, .45, .21, 1.02);
+    user-select: none
 }
 
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-name {
-    font-size: 1rem;
-    font-weight: 700;
-    line-height: 1;
-    margin-bottom: .5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis
+.author-content-item.personalities:hover .image {
+    transform: rotate(-10deg)
 }
 
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-bottom-group {
-    display: flex;
-    align-items: center;
-    justify-content: space-between
-}
+@media screen and (max-width: 768px) {
+    .author-content-item.personalities {
+        min-height: 360px
+    }
 
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-money {
-    padding: 4px;
-    background: var(--sco-fontcolor);
-    color: var(--sco-card-bg);
-    font-size: 12px;
-    line-height: 1;
-    border-radius: 4px;
-    margin-right: 4px;
-    white-space: nowrap
+    .author-content-item.personalities .image {
+        right: -70px
+    }
 }
 
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-time {
-    font-size: 12px;
-    color: var(--sco-secondtext);
-    white-space: nowrap
+.author-content-item.maxim {
+    font-size: 36px;
+    font-weight: 700;
+    line-height: 1.1;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    width: 39%
 }
 
-.author-content-item.single.reward .reward-list-updateDate {
-    color: var(--sco-gray);
-    font-size: 14px
+.author-content-item.maxim .maxim-title {
+    display: flex;
+    flex-direction: column
 }
 
-.author-content-item.single.reward .post-reward {
-    position: absolute;
-    right: 2rem;
-    top: 2rem
+.author-content-item.maxim .title1 {
+    opacity: .8;
+    font-size: .6rem;
+    margin-bottom: .5rem
 }
 
-.author-content-item.single.reward .post-reward .reward-button {
-    padding: 8px 12px;
-    background: var(--sco-red);
-    border-radius: 12px;
-    color: var(--sco-white);
+.author-content-item.buff {
+    font-size: 36px;
+    font-weight: 700;
+    line-height: 1.1;
     display: flex;
-    align-items: center;
-    z-index: 1;
-    transition: .3s;
-    cursor: pointer;
-    box-shadow: none;
-    width: fit-content;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%);
+    color: var(--sco-white);
+    background-size: 200%;
+    animation: gradient 15s ease infinite;
+    min-height: 200px;
     height: fit-content;
-    line-height: 2;
-    user-select: none
+    width: 59%
 }
 
-.author-content-item.single.reward .post-reward:hover .reward-button {
-    filter: brightness(1.1)
+.author-content-item.buff .card-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item.single.reward .post-reward .reward-button {
-        display: none
-    }
+.author-content-item.buff .buff-title {
+    display: flex;
+    flex-direction: column
 }
 
-.author-content-item.single.reward .post-reward .reward-button i {
-    margin-right: 8px;
-    font-size: 1rem
+.author-content-item.buff .title1 {
+    opacity: .8;
+    font-size: .6rem;
+    margin-bottom: .5rem
 }
 
-.author-content-item.single.reward .post-reward .reward-main {
-    top: 60px;
-    right: 0;
-    left: auto;
-    bottom: auto;
-    width: fit-content;
-    box-shadow: var(--sco-shadow-border)
+.author-content-item.skills {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    width: 49%;
+    min-height: 450px
 }
 
-.author-content-item.single.reward .post-reward .reward-main .reward-all::before {
-    bottom: auto;
-    top: -16px
+.author-content-item.skills .tags-group-all {
+    display: flex;
+    transform: rotate(0);
+    transition: .3s
 }
 
-.author-content-item.single.reward a.reward-main-btn {
-    display: none
+.author-content-item.skills .tags-group-wrapper {
+    margin-top: 40px;
+    display: flex;
+    flex-wrap: nowrap;
+    animation: rowup 60s linear infinite
 }
 
-.author-content-item.game-apex {
-    min-height: 300px;
-    overflow: hidden;
-    color: var(--sco-white);
-    width: 59%
+.author-content-item.skills .skills-style-group {
+    position: relative
 }
 
-.author-content-item .card-content {
+.author-content-item.skills .skills-list {
+    display: flex;
+    opacity: 0;
+    transition: .3s;
     position: absolute;
     width: 100%;
-    height: 100%;
     top: 0;
     left: 0;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    padding: 1rem 2rem
+    flex-wrap: wrap;
+    flex-direction: row;
+    margin-top: 10px
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item .card-content {
-        padding: 1rem
-    }
+.author-content-item.skills:hover .skills-style-group .tags-group-all {
+    opacity: 0
 }
 
-@media screen and (min-width: 1300px) {
-    .author-content-item {
-        animation: slide-in .6s 0s backwards
-    }
+.author-content-item.skills:hover .skills-style-group .skills-list {
+    opacity: 1
 }
 
-.author-content-item.game-apex::after {
-    box-shadow: 0 -69px 203px 11px #04120f inset;
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
+.author-content-item.skills .skill-info {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    margin-top: 10px;
+    background: var(--sco-background);
+    border-radius: 40px;
+    padding: 4px 12px 4px 8px;
+    border: var(--style-border);
+    box-shadow: var(--sco-shadow-border)
 }
 
-video.author-content-video {
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: -1
+.author-content-item.skills .etc {
+    margin-right: 10px;
+    margin-top: 10px
 }
 
-.author-content-item .content-bottom {
-    margin-top: auto;
+.author-content-item.skills .skill-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 32px;
     display: flex;
     align-items: center;
-    justify-content: space-between
+    justify-content: center;
+    margin-right: 8px;
+    user-select: none
 }
 
-.author-content-item .content-bottom .icon-group {
-    display: flex
+.author-content-item.skills .skill-icon img {
+    width: 18px;
+    height: 18px
 }
 
-.author-content-item .content-bottom .icon-group i {
-    display: inline-block;
-    width: 22px;
-    height: 18px;
-    margin-right: .5rem
+.author-content-item.skills .skill-name {
+    font-weight: 700;
+    line-height: 1
 }
 
-.icon-pos-sup {
-    background: url(https://bu.dusays.com/2023/03/12/640dc913ee26b.webp)
+.author-content-item.aboutsiteTips {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    width: 39%
 }
 
-.icon-pos-mid {
-    background: url(https://bu.dusays.com/2023/03/12/640dc931a2cd4.webp)
+.aboutsiteTips h2 {
+    margin-right: auto;
+    font-size: 36px;
+    font-family: Helvetica;
+    line-height: 1.06;
+    letter-spacing: -.02em;
+    color: var(--sco-fontcolor);
+    margin-top: 0
 }
 
-.author-content-item.game-jl {
-    width: 39%;
-    min-height: 300px;
+.aboutsiteTips .mask {
+    height: 36px;
+    position: relative;
     overflow: hidden;
-    color: var(--sco-white)
-}
-
-.author-content-item.game-jl::after {
-    box-shadow: 0 -69px 203px 11px #415dc9 inset;
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
-}
-
-.author-content-item.like-technology {
-    background-size: cover;
-    min-height: 230px;
-    color: var(--sco-white)
+    margin-top: 4px
 }
 
-.author-content-item.like-technology::after {
-    box-shadow: 0 -69px 203px 11px #050b20 inset;
+.aboutsiteTips .mask span {
+    display: block;
+    box-sizing: border-box;
     position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
-}
-
-.author-content-item.like-music {
-    background-size: cover;
-    min-height: 400px;
-    color: var(--sco-white);
-    overflow: hidden
+    top: 36px;
+    padding-bottom: var(--offset);
+    background-size: 100% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-repeat: no-repeat
 }
 
-.author-content-item.like-music::after {
-    box-shadow: 0 -69px 203px 11px #0e0e0e inset;
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
+.aboutsiteTips .mask span[data-show] {
+    transform: translateY(-100%);
+    transition: .5s transform ease-in-out
 }
 
-.author-content-item .card-content .author-content-item-title {
-    margin-bottom: .5rem
+.aboutsiteTips .mask span[data-up] {
+    transform: translateY(-200%);
+    transition: .5s transform ease-in-out
 }
 
-.author-content-item .card-content .banner-button-group {
-    position: absolute;
-    bottom: 1.5rem;
-    right: 2rem
+.aboutsiteTips .mask span:nth-child(1) {
+    background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1)
 }
 
-.author-content-item .card-content .banner-button-group .banner-button {
-    height: 40px;
-    width: 118px;
-    border-radius: 20px;
-    justify-content: center;
-    background: var(--sco-black-op);
-    color: var(--sco-white);
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    transition: .3s;
-    cursor: pointer;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
+.aboutsiteTips .mask span:nth-child(2) {
+    background-image: linear-gradient(45deg, #18e198 50%, #0ec15d)
 }
 
-.author-content-item .card-content .banner-button-group .banner-button:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
+.aboutsiteTips .mask span:nth-child(3) {
+    background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c)
 }
 
-.author-content-item .card-content .banner-button-group .banner-button i {
-    margin-right: 8px;
-    font-size: 22px
+.aboutsiteTips .mask span:nth-child(4) {
+    background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f)
 }
 
 @media screen and (max-width: 768px) {
-    .author-content-item .card-content .banner-button-group {
-        right: 1rem;
-        bottom: 1rem
-    }
-
-    .author-content-item .card-content .banner-button-group .banner-button {
-        background: 0 0;
-        color: var(--sco-white);
-        padding: 0;
-        width: fit-content
-    }
-
-    .author-content-item .card-content .banner-button-group .banner-button i {
-        margin-right: 0;
-        font-size: 1.5rem
-    }
-
-    .author-content-item .card-content .banner-button-group .banner-button-text {
-        display: none
+    .author-content-item.map {
+        margin-bottom: 0
     }
 }
 
-.author-content-item.single.like-movie {
-    height: 19rem;
+#about-page .about-statistic {
+    min-height: 380px;
+    width: 39%;
+    background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp) no-repeat top;
     background-size: cover;
     color: var(--sco-white);
     overflow: hidden
 }
 
-.author-content-item.single.like-movie::after {
-    box-shadow: 0 21px 133px 81px #1c1c1c inset;
+#about-page .about-statistic::after {
+    box-shadow: 0 -159px 173px 71px #0f1114 inset;
     position: absolute;
     content: '';
     width: 100%;
@@ -12844,528 +10632,449 @@ video.author-content-video {
     left: 0
 }
 
-#article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
-    padding: 8px 12px;
-    background: var(--sco-white);
-    border-radius: 12px;
-    color: var(--sco-black);
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    transition: .3s;
-    cursor: pointer;
-    border: none
-}
-
-#article-container .author-content-item.single.like-movie .banner-button-group .banner-button:hover {
-    background: #d0b247;
-    color: var(--sco-white)
-}
-
-#article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
-    margin-right: 8px;
-    font-size: 1rem
+#about-page .about-statistic .banner-button {
+    background: var(--sco-white-op)
 }
 
-@media screen and (max-width: 768px) {
-    #article-container .author-content-item.single.like-movie .banner-button-group {
-        right: 1rem;
-        bottom: 1rem
-    }
-
-    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
-        background: 0 0;
-        color: var(--sco-white);
-        padding: 0
-    }
-
-    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
-        margin-right: 0;
-        font-size: 1.5rem
-    }
-
-    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button-text {
-        display: none
-    }
+#about-page .about-statistic .banner-button:hover {
+    background: var(--sco-theme)
 }
 
-.author-content.author-content-item.toolPage {
-    height: 19rem;
-    background-size: cover;
+#statistic {
+    font-size: 16px;
+    border-radius: 15px;
+    width: 100%;
     color: var(--sco-white);
-    overflow: hidden;
-    margin-top: 0
-}
-
-#console {
     display: flex;
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    z-index: 9999;
-    justify-content: center;
-    opacity: 0;
-    transition: .3s ease-out;
-    flex-direction: column;
-    align-items: center;
-    pointer-events: none;
-    -webkit-user-select: none
-}
-
-#console.show {
-    opacity: 1;
-    pointer-events: all
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-top: 1rem;
+    margin-bottom: 2rem
 }
 
-#console .console-card-group {
+#statistic div {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    margin: 0 30px;
-    transform: translateY(20px);
-    transition: .3s;
-    opacity: 0;
-    max-width: 1400px
+    flex-direction: column;
+    width: 50%;
+    margin-bottom: .5rem
 }
 
-#console.show .console-card-group {
-    transform: translateY(0);
-    opacity: 1;
-    transition-delay: .1s
+#statistic div span:first-child {
+    opacity: .8;
+    font-size: .6rem
 }
 
-#console .console-card-group-left {
-    margin-right: .5rem;
-    width: 40%;
-    height: 100%
+#statistic div span:last-child {
+    font-weight: 700;
+    font-size: 34px;
+    line-height: 1;
+    white-space: nowrap
 }
 
-#console .console-card-group-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-    width: 60%;
-    overflow: hidden
+.author-content-item.about-statistic .card-content .banner-button-group .banner-button:hover {
+    background: #998c5a;
+    color: var(--sco-white)
 }
 
-@media screen and (max-width: 1300px) {
-    #console .console-card-group {
-        justify-content: center
-    }
-
-    #console .console-card-group-left {
-        display: none
-    }
-
-    #console .console-card-group-right {
-        width: 100%;
-        margin: 0
-    }
+.author-content-item.single.reward .author-content-item .author-content-item-title {
+    color: var(--sco-red)
+}
 
-    #consoleMusic {
-        display: none
-    }
+.author-content-item.single.reward .reward-list-all {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    margin: 1rem -.25rem .5rem;
+}
 
-    #consoleCommentBarrage {
-        display: none
-    }
+.author-content-item.single.reward .reward-list-all .reward-list-item {
+    padding: 1rem;
+    border-radius: 12px;
+    border: var(--style-border-always);
+    width: calc((100% / 6) - .5rem);
+    margin: 0 .25rem .5rem .25rem;
+    box-shadow: var(--sco-shadow-border);
+    flex-direction: column;
+    justify-content: space-between
 }
 
-@media screen and (max-width: 768px) {
-    #console .console-card-group {
-        display: none
-    }
+.reward-list-tips p {
+    font-size: 12px;
+    color: var(--sco-secondtext)
+}
 
-    #consoleHideAside {
-        display: none
+@media screen and (max-width: 1200px) {
+    .author-content-item.single.reward .reward-list-all .reward-list-item {
+        width: calc((100% / 4) - .5rem)
     }
 }
 
-@media screen and (max-height: 800px) {
-    #console .console-card-group {
-        display: none
+@media screen and (max-width: 900px) {
+    .author-content-item.single.reward .reward-list-all .reward-list-item {
+        width: calc((100% / 2) - .5rem)
     }
+}
 
-    #consoleMusic {
-        display: none
+@media screen and (max-width: 768px) {
+    .author-content-item.single.reward .reward-list-all .reward-list-item {
+        width: 100%
     }
+}
 
-    #consoleCommentBarrage {
-        display: none
-    }
+.author-content-item.single.reward .author-content-item-description {
+    font-size: 16px;
+    margin-top: .5rem
 }
 
-#console .console-card {
-    background: var(--sco-maskbg);
-    border-radius: 12px;
+.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-name {
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: .5rem;
+    white-space: nowrap;
     overflow: hidden;
-    border: var(--style-border);
-    box-shadow: var(--sco-shadow-border);
-    padding: 40px
+    text-overflow: ellipsis
 }
 
-#console .console-card.tags {
-    height: calc(100% - 172px)
+.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-bottom-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-between
 }
 
-#console .console-mask {
-    background: var(--sco-maskbgdeep);
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    position: absolute;
-    z-index: -1;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d;
-    transform: translateZ(0)
+.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-money {
+    padding: 4px;
+    background: var(--sco-fontcolor);
+    color: var(--sco-card-bg);
+    font-size: 12px;
+    line-height: 1;
+    border-radius: 4px;
+    margin-right: 4px;
+    white-space: nowrap
 }
 
-#console.show .console-mask {
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0);
-    animation: .6s ease 0s 1 normal none running to_show
+.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-time {
+    font-size: 12px;
+    color: var(--sco-secondtext);
+    white-space: nowrap
 }
 
-#card-newest-comments .aside-list-item .thumbnail img {
-    width: 20px;
-    height: 20px;
-    margin-right: 8px;
-    border-radius: 20px
+.author-content-item.single.reward .reward-list-updateDate {
+    color: var(--sco-gray);
+    font-size: 14px
 }
 
-#card-newest-comments .aside-list-item {
-    background: var(--sco-card-bg);
+.author-content-item.single.reward .post-reward {
+    position: absolute;
+    right: 2rem;
+    top: 2rem
+}
+
+.author-content-item.single.reward .post-reward .reward-button {
+    padding: 8px 12px;
+    background: var(--sco-red);
     border-radius: 12px;
-    border: var(--style-border);
-    padding: 12px 16px;
-    width: 49%;
+    color: var(--sco-white);
     display: flex;
-    flex-direction: column;
-    height: 150px;
+    align-items: center;
+    z-index: 1;
     transition: .3s;
-    position: relative
-}
-
-#card-newest-comments .aside-list-item:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-#card-newest-comments .aside-list-item:not(:last-child) {
-    margin-bottom: .5rem
+    cursor: pointer;
+    box-shadow: none;
+    width: fit-content;
+    height: fit-content;
+    line-height: 2;
+    user-select: none
 }
 
-#card-newest-comments .aside-list-item .name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    font-weight: 700
+.author-content-item.single.reward .post-reward:hover .reward-button {
+    filter: brightness(1.1)
 }
 
-#console .author-content-item-tips {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+@media screen and (max-width: 768px) {
+    .author-content-item.single.reward .post-reward .reward-button {
+        display: none
+    }
 }
 
-#console .author-content-item-title {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 1
+.author-content-item.single.reward .post-reward .reward-button i {
+    margin-right: 8px;
+    font-size: 1rem
 }
 
-#console .aside-list-item .thumbnail {
-    display: flex;
-    align-items: center
+.author-content-item.single.reward .post-reward .reward-main {
+    top: 60px;
+    right: 0;
+    left: auto;
+    bottom: auto;
+    width: fit-content;
+    box-shadow: var(--sco-shadow-border)
 }
 
-#console .aside-list-item:hover .thumbnail {
-    color: var(--sco-white)
+.author-content-item.single.reward .post-reward .reward-main .reward-all::before {
+    bottom: auto;
+    top: -16px
 }
 
-#console .aside-list-item .content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    margin-top: .5rem
+.author-content-item.single.reward a.reward-main-btn {
+    display: none
 }
 
-#console .aside-list-item .content .comment {
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
+.author-content-item.game-apex {
+    min-height: 300px;
     overflow: hidden;
-    -webkit-box-orient: vertical;
-    line-height: 24px;
-    font-size: 14px
+    color: var(--sco-white);
+    width: 59%
 }
 
-#console .aside-list-item .content .comment::before {
-    content: '';
+.author-content-item .card-content {
+    position: absolute;
     width: 100%;
     height: 100%;
-    position: absolute;
     top: 0;
-    left: 0
-}
-
-#console .aside-list-item:hover .content .comment {
-    color: var(--sco-white)
-}
-
-#console .aside-list-item .content time {
-    font-size: 12px;
-    color: var(--sco-secondtext);
-    margin-top: auto
-}
-
-#console .aside-list-item:hover .content time {
-    color: var(--sco-white)
-}
-
-#console .aside-list {
+    left: 0;
+    z-index: 2;
     display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-top: 1.5rem
+    flex-direction: column;
+    padding: 1rem 2rem
 }
 
-#console .button-group {
-    display: flex;
-    margin: 1rem auto 0 auto;
-    justify-content: center;
-    width: fit-content
+@media screen and (max-width: 768px) {
+    .author-content-item .card-content {
+        padding: 1rem
+    }
 }
 
-#console .button-group .console-btn-item {
-    width: 60px;
-    height: 60px;
-    transition: .3s;
-    cursor: pointer
+@media screen and (min-width: 1300px) {
+    .author-content-item {
+        animation: slide-in .6s 0s backwards
+    }
 }
 
-#console .button-group .console-btn-item:not(:last-child) {
-    margin-right: .5rem
+.author-content-item.game-apex::after {
+    box-shadow: 0 -69px 203px 11px #04120f inset;
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0
 }
 
-#console .button-group .console-btn-item:hover a {
-    background: var(--sco-main)
+video.author-content-video {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: -1
 }
 
-#console .button-group .console-btn-item a {
-    width: 100%;
-    height: 100%;
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    border-radius: 60px;
+.author-content-item .content-bottom {
+    margin-top: auto;
     display: flex;
     align-items: center;
-    justify-content: center;
-    color: var(--sco-fontcolor)
+    justify-content: space-between
 }
 
-#console .button-group .console-btn-item a i {
-    font-size: 24px
+.author-content-item .content-bottom .icon-group {
+    display: flex
 }
 
-#console .button-group .console-btn-item.on a {
-    background: var(--sco-orange);
-    color: var(--sco-white);
-    transition: .3s
+.author-content-item .content-bottom .icon-group i {
+    display: inline-block;
+    width: 22px;
+    height: 18px;
+    margin-right: .5rem
 }
 
-#console .button-group .console-btn-item:not(.on) a:hover {
-    background: var(--sco-main) !important
+.icon-pos-sup {
+    background: url(https://bu.dusays.com/2023/03/12/640dc913ee26b.webp)
+}
+
+.icon-pos-mid {
+    background: url(https://bu.dusays.com/2023/03/12/640dc931a2cd4.webp)
 }
 
-#console .button-group .console-btn-item:hover a {
+.author-content-item.game-jl {
+    width: 39%;
+    min-height: 300px;
+    overflow: hidden;
     color: var(--sco-white)
 }
 
-.console-card.tags .card-tag-cloud {
-    margin-top: 1.5rem;
-    display: flex;
-    flex-wrap: wrap
+.author-content-item.game-jl::after {
+    box-shadow: 0 -69px 203px 11px #415dc9 inset;
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0
 }
 
-.console-card.tags .card-tag-cloud a {
-    color: var(--sco-fontcolor) !important;
-    margin: 6px 4px;
-    padding: 2px 8px;
-    border-radius: 8px;
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    font-size: 14px !important;
-    font-weight: 700
+.author-content-item.like-technology {
+    background-size: cover;
+    min-height: 230px;
+    color: var(--sco-white)
 }
 
-.console-card.tags .card-tag-cloud a:hover {
-    background: var(--sco-main);
-    color: var(--sco-white) !important
+.author-content-item.like-technology::after {
+    box-shadow: 0 -69px 203px 11px #050b20 inset;
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0
 }
 
-.console-card.tags .card-tag-cloud a sup {
-    opacity: .6
+.author-content-item.like-music {
+    background-size: cover;
+    min-height: 400px;
+    color: var(--sco-white);
+    overflow: hidden
 }
 
-#console .close-btn {
+.author-content-item.like-music::after {
+    box-shadow: 0 -69px 203px 11px #0e0e0e inset;
+    position: absolute;
+    content: '';
     width: 100%;
-    height: 60px;
-    position: fixed;
-    right: max(0, calc((100% - 1400px) / 2));
+    height: 100%;
     top: 0;
-    font-size: 35px;
-    color: var(--sco-fontcolor);
-    cursor: pointer;
-    transition: .3s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 1400px
+    left: 0
 }
 
-#console .close-btn i {
-    font-size: 32px;
-    margin-right: 1.5rem;
-    margin-left: auto;
-    line-height: 1;
-    transform: rotate(-30deg);
-    transition: .6s
+.author-content-item .card-content .author-content-item-title {
+    margin-bottom: .5rem
 }
 
-#console.show .close-btn i {
-    transform: rotate(0)
+.author-content-item .card-content .banner-button-group {
+    position: absolute;
+    bottom: 1.5rem;
+    right: 2rem
 }
 
-#console .close-btn i:hover {
-    color: var(--sco-hovertext);
-    background: var(--sco-main-op);
-    border-radius: 32px
+.author-content-item .card-content .banner-button-group .banner-button {
+    height: 40px;
+    width: 118px;
+    border-radius: 20px;
+    justify-content: center;
+    background: var(--sco-black-op);
+    color: var(--sco-white);
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    transition: .3s;
+    cursor: pointer;
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    transform: translateZ(0)
 }
 
-#console .console-card.history {
-    margin-top: 8px;
-    padding: 0;
-    background: 0 0;
-    box-shadow: none;
-    border: none;
-    overflow: hidden;
-    border-radius: 0
+.author-content-item .card-content .banner-button-group .banner-button:hover {
+    background: var(--sco-main);
+    color: var(--sco-white)
 }
 
-#console .console-card.history .item-headline {
-    display: none
+.author-content-item .card-content .banner-button-group .banner-button i {
+    margin-right: 8px;
+    font-size: 22px
 }
 
-#console .console-card.history .card-archive-list {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    height: 164px
-}
+@media screen and (max-width: 768px) {
+    .author-content-item .card-content .banner-button-group {
+        right: 1rem;
+        bottom: 1rem
+    }
 
-#console .console-card.history .card-archive-list li.card-archive-list-item {
-    flex: 0 0 24%
-}
+    .author-content-item .card-content .banner-button-group .banner-button {
+        background: 0 0;
+        color: var(--sco-white);
+        padding: 0;
+        width: fit-content
+    }
 
-#console .console-card.history .card-archive-list .card-archive-list-link {
-    border-radius: 8px;
-    margin-top: 8px;
-    display: flex;
-    flex-direction: column;
-    align-content: space-between;
-    border: var(--style-border);
-    background: var(--sco-maskbgdeep);
-    padding: 8px 16px
-}
+    .author-content-item .card-content .banner-button-group .banner-button i {
+        margin-right: 0;
+        font-size: 1.5rem
+    }
 
-#console .console-card.history .card-archive-list .card-archive-list-link:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
+    .author-content-item .card-content .banner-button-group .banner-button-text {
+        display: none
+    }
 }
 
-#console #card-newest-comments {
-    height: 100%
+.author-content-item.single.like-movie {
+    height: 19rem;
+    background-size: cover;
+    color: var(--sco-white);
+    overflow: hidden
 }
 
-#console .button-group i {
-    font-size: 1rem
+.author-content-item.single.like-movie::after {
+    box-shadow: 0 21px 133px 81px #1c1c1c inset;
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0
 }
 
-#keyboard-tips {
-    position: fixed;
-    top: 80px;
-    left: 20px;
-    z-index: 999;
-    background: var(--sco-maskbgdeep);
+#article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
+    padding: 8px 12px;
+    background: var(--sco-white);
     border-radius: 12px;
-    border: var(--style-border);
-    padding: 20px;
+    color: var(--sco-black);
     display: flex;
-    flex-direction: column;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0);
-    pointer-events: none;
-    box-shadow: var(--sco-shadow-border);
-    opacity: 0;
-    transition: .3s
+    align-items: center;
+    z-index: 1;
+    transition: .3s;
+    cursor: pointer;
+    border: none
 }
 
-#keyboard-tips.show {
-    opacity: 1;
-    transition: .1s
+#article-container .author-content-item.single.like-movie .banner-button-group .banner-button:hover {
+    background: #d0b247;
+    color: var(--sco-white)
 }
 
-#keyboard-tips .keybordList {
-    display: flex;
-    flex-direction: column;
-    margin-top: 8px
+#article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
+    margin-right: 8px;
+    font-size: 1rem
 }
 
-#keyboard-tips .keyboardTitle {
-    font-size: 12px;
-    color: var(--sco-secondtext);
-    line-height: 1
-}
+@media screen and (max-width: 768px) {
+    #article-container .author-content-item.single.like-movie .banner-button-group {
+        right: 1rem;
+        bottom: 1rem
+    }
 
-#keyboard-tips .keybordItem {
-    display: flex;
-    margin-top: 4px
-}
+    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
+        background: 0 0;
+        color: var(--sco-white);
+        padding: 0
+    }
 
-#keyboard-tips .keyGroup {
-    display: flex;
-    align-items: center;
-    width: 90px
+    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
+        margin-right: 0;
+        font-size: 1.5rem
+    }
+
+    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button-text {
+        display: none
+    }
 }
 
-#keyboard-tips .keyGroup .key {
-    padding: .2em .4em;
-    font-family: inherit;
-    background-color: var(--sco-card-bg);
-    color: var(--sco-fontcolor);
-    border: var(--style-border);
-    border-color: var(--sco-secondtext);
-    border-bottom: 2px solid var(--sco-secondtext);
-    box-shadow: var(--sco-shadow-border);
-    border-radius: .25rem;
-    overflow-wrap: break-word;
-    overflow-x: auto;
-    font-weight: 500;
-    font-size: .875em;
-    margin-right: 4px;
-    vertical-align: baseline;
-    line-height: 1;
-    height: 24px
+.author-content.author-content-item.toolPage {
+    height: 19rem;
+    background-size: cover;
+    color: var(--sco-white);
+    overflow: hidden;
+    margin-top: 0
 }
 
 @media screen and (min-width: 768px) {

From 830007de410099c5dba7a0cc93739d331ff035f5 Mon Sep 17 00:00:00 2001
From: yife68 <2714344056@qq.com>
Date: Sun, 19 Nov 2023 11:45:48 +0800
Subject: [PATCH 20/43] =?UTF-8?q?=F0=9F=8C=88=20stylus:=20header=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/css/_extra/console.styl       |   51 +-
 source/css/_global/function.styl     |   68 +-
 source/css/_layout/header.styl       | 3126 ++++++++++++--------------
 source/css/_mode/index.styl          |    6 +
 source/css/_page/equipment.styl      |    4 +-
 source/css/_post/commentBarrage.styl |    3 +-
 source/css/main.css                  |   11 +
 7 files changed, 1531 insertions(+), 1738 deletions(-)

diff --git a/source/css/_extra/console.styl b/source/css/_extra/console.styl
index a1947862..09c1ec66 100644
--- a/source/css/_extra/console.styl
+++ b/source/css/_extra/console.styl
@@ -30,6 +30,15 @@
     transition .3s
     max-width 1400px
 
+    +maxWidth1300()
+      justify-content center
+
+    +maxWidth768()
+      display none
+
+    +maxHeight800()
+      display none
+
   &.show
     .console-card-group
       transform translateY(0)
@@ -41,6 +50,9 @@
     width 40%
     height 100%
 
+    +maxWidth1300()
+      display none
+
   .console-card-group-right
     display flex
     flex-direction column
@@ -49,6 +61,10 @@
     width 60%
     overflow hidden
 
+    +maxWidth1300()
+      width 100%
+      margin 0
+
   .console-card
     background var(--sco-maskbg)
     border-radius 12px
@@ -286,41 +302,22 @@
     i
       font-size 1rem
 
-+maxWidth1300()
-  #console
-    .console-card-group
-      justify-content center
-
-    .console-card-group-left
-      display none
-
-    .console-card-group-right
-      width 100%
-      margin 0
-
-    #consoleMusic
+  #consoleMusic
+    +maxWidth1300()
       display none
 
-    #consoleCommentBarrage
+    +maxHeight800()
       display none
 
-+maxWidth768()
-  #console
-    .console-card-group
-      display none
-
-    #consoleHideAside
-      display none
-
-@media screen and (max-height: 800px)
-  #console
-    .console-card-group
+  #consoleCommentBarrage
+    +maxWidth1300()
       display none
 
-    #consoleMusic
+    +maxHeight800()
       display none
 
-    #consoleCommentBarrage
+  #consoleHideAside
+    +maxWidth768()
       display none
 
 #card-newest-comments
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
index da878c5d..830837fc 100644
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -1,39 +1,67 @@
 maxWidth600()
-    @media screen and (max-width: 600px)
-        {block}
+	@media screen and (max-width: 600px)
+		{block}
 
 maxWidth768()
-    @media screen and (max-width: 768px)
-        {block}
+	@media screen and (max-width: 768px)
+		{block}
 
 minWidth768()
-    @media screen and (min-width: 768px)
-        {block}
+	@media screen and (min-width: 768px)
+		{block}
+
+maxWidth798()
+	@media screen and (max-width: 798px)
+		{block}
+
+minWidth798()
+	@media screen and (min-width: 798px)
+		{block}
+
+maxWidth899()
+	@media screen and (max-width: 899px)
+		{block}
+
+minWidth899()
+	@media screen and (min-width: 899px)
+		{block}
 
 maxWidth1300()
-    @media screen and (max-width: 1300px)
-        {block}
+	@media screen and (max-width: 1300px)
+		{block}
 
 minWidth1300()
-    @media screen and (min-width: 1300px)
-        {block}
+	@media screen and (min-width: 1300px)
+		{block}
+
+maxWidth1200()
+	@media screen and (max-width: 1200px)
+		{block}
+
+minWidth1200()
+	@media screen and (min-width: 1200px)
+		{block}
 
 maxWidth1024()
-    @media screen and (max-width: 1024px)
-        {block}
+	@media screen and (max-width: 1024px)
+		{block}
 
 maxWidth900()
-    @media screen and (max-width: 900px)
-        {block}
+	@media screen and (max-width: 900px)
+		{block}
 
 minWidth901()
-    @media screen and (min-width: 901px)
-        {block}
+	@media screen and (min-width: 901px)
+		{block}
 
 minWidth900()
-    @media screen and (min-width: 900px)
-        {block}
+	@media screen and (min-width: 900px)
+		{block}
 
 minWidth2000()
-    @media screen and (min-width: 2000px)
-        {block}
\ No newline at end of file
+	@media screen and (min-width: 2000px)
+		{block}
+
+maxHeight800()
+	@media screen and (max-height: 800px)
+		{block}
\ No newline at end of file
diff --git a/source/css/_layout/header.styl b/source/css/_layout/header.styl
index 3a76c8b5..0e0727e9 100644
--- a/source/css/_layout/header.styl
+++ b/source/css/_layout/header.styl
@@ -1,1687 +1,1439 @@
-#page-header {
-  position: relative;
-  width: 100%;
-  background-position: center center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  transition: all .5s ease 0s
-}
-
-#page-header.full_page {
-  height: 20rem;
-  background-attachment: fixed
-}
-
-#page-header.full_page #site-info {
-  position: absolute;
-  top: 7.8rem;
-  padding: 0 .5rem;
-  width: 100%
-}
-
-#page-header #scroll-down .scroll-down-effects, #page-header #site-subtitle, #page-header #site-title {
-  text-align: center;
-  line-height: 1.5
-}
-
-#page-header #site-title {
-  margin: 0;
-  color: var(--sco-white);
-  font-size: 1.85em
-}
-
-@media screen and (min-width: 768px) {
-  #page-header #site-title {
-    font-size: 2.85em
-  }
-}
-
-#page-header #site-subtitle {
-  color: var(--light-grey);
-  font-size: 1.15em
-}
-
-@media screen and (min-width: 768px) {
-  #page-header #site-subtitle {
-    font-size: 1.72em
-  }
-}
-
-#page-header #site_social_icons {
-  display: none;
-  margin: 0 auto;
-  width: 15rem;
-  text-align: center
-}
-
-@media screen and (max-width: 768px) {
-  #page-header #site_social_icons {
-    display: block
-  }
-}
-
-#page-header #site_social_icons .social-icon {
-  margin: 0 .5rem;
-  color: var(--light-grey);
-  text-shadow: rgba(0, 0, 0, .15) .1rem .1rem .2rem;
-  font-size: 1.43em;
-  cursor: pointer
-}
-
-#page-header #scroll-down {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  cursor: pointer;
-  display: none
-}
-
-#page-header #scroll-down .scroll-down-effects {
-  position: relative;
-  width: 100%;
-  color: var(--light-grey);
-  font-size: 30px
-}
-
-#page-header.not-home-page {
-  height: 20rem
-}
-
-@media screen and (max-width: 768px) {
-  #page-header.not-home-page {
-    height: 14rem
-  }
-}
-
-#page-header #page-site-info {
-  position: absolute;
-  top: 10rem;
-  padding: 0 .5rem;
-  width: 100%
-}
-
-@media screen and (max-width: 768px) {
-  #page-header #page-site-info {
-    top: 7rem
-  }
-}
-
-#page-header.post-bg {
-  height: 20rem
-}
-
-@media screen and (max-width: 768px) {
-  #page-header.post-bg {
-    height: 18rem;
-    background-color: var(--sco-main) !important;
-    transition: 0s
-  }
-}
-
-#page-header #post-info {
-  position: absolute;
-  padding: 0 8%;
-  width: 100%;
-  text-align: center
-}
-
-@media screen and (max-width: 900px) {
-  #page-header #post-info {
-    bottom: 1.5rem;
-    text-align: left
-  }
-}
-
-@media screen and (max-width: 768px) {
-  #page-header #post-info {
-    bottom: 1.1rem;
-    padding: 0 1.1rem
-  }
-}
-
-#page-header.not-top-img {
-  margin-bottom: .5rem;
-  height: 60px;
-  background: 0 center
-}
-
-#page-header.not-top-img #nav a {
-  color: var(--sco-fontcolor);
-  text-shadow: none
-}
-
-#page-header.not-top-img #nav a:hover {
-  color: var(--sco-white);
-  text-shadow: none;
-  align-items: center
-}
-
-#page-header #nav a:hover span.scoicon {
-  opacity: 0;
-}
-
-#page-header.nav-fixed #nav {
-  position: fixed;
-  top: 0;
-  z-index: 103;
-  transition: .3s
-}
-
-#page-header.nav-fixed #nav #site-name, #page-header.nav-fixed #nav #toggle-menu, #page-header.nav-fixed #nav a {
-  text-shadow: none
-}
-
-#page-header.nav-visible + .layout > .aside-content > .sticky_layout {
-  top: 70px;
-  transition: top .5s ease 0s
-}
-
-#page-header.nav-fixed > #nav, #page-header.not-top-img > #nav {
-  box-shadow: none
-}
-
-#page-header.nav-fixed #nav {
-  top: 0;
-  box-shadow: none;
-  background: var(--sco-card-bg);
-  outline: 1px solid var(--sco-card-border)
-}
-
-#nav {
-  padding: 0
-}
-
-#page-header #nav {
-  box-shadow: none;
-  transition: 0.3s;
-  display: flex;
-  justify-content: center;
-  -webkit-user-select: none;
-}
-
-@media screen and (max-width: 768px) {
-  #nav {
-    padding: 0
-  }
-
-  #page-header #nav {
-    background: linear-gradient(to top, var(--sco-main-none) 0, var(--sco-main) 100%);
-    transition: 0s
-  }
-}
-
-#page-header #nav #nav-group {
-  max-width: 1400px;
-  width: 100%;
-  display: flex;
-  position: relative;
-  padding: 0 1.5rem;
-  align-items: center
-}
-
-#page-header #nav #nav-right {
-  position: absolute;
-  right: 0;
-  z-index: 102;
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  align-items: center;
-  margin-right: 1.5rem;
-  overflow: hidden;
-}
-
-#page-header #nav #nav-left {
-  z-index: 102;
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  align-items: center;
-  margin-right: 1.5rem;
-  overflow: hidden
-}
-
-.nav-button {
-  cursor: pointer
-}
-
-#page-header #nav #nav-left .nav-button a, #page-header #nav #nav-right .nav-button a {
-  height: 35px;
-  width: 35px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 40px
-}
-
-#page-header #nav #nav-left .nav-button a i, #page-header #nav #nav-right .nav-button a i {
-  line-height: 1;
-  font-size: 22px
-}
-
-#page-header #nav #nav-right div {
-  margin-left: .5rem;
-  padding: 0
-}
-
-@media screen and (max-width: 768px) {
-  #nav #menus {
-    display: none !important
-  }
-
-  #nav.hide-menu #toggle-menu .site-page {
-    width: 35px;
-    height: 35px;
-    display: flex;
-    align-items: center;
-    justify-content: center
-  }
-
-  #page-header #nav #nav-group {
-    width: 100%;
-    display: flex;
-    position: relative;
-    padding: 0 12px
-  }
-
-  #page-header #nav #nav-right {
-    margin-right: 12px
-  }
-}
-
-#nav.show {
-  top: 0;
-  transition: .2s;
-  position: fixed;
-  z-index: 91
-}
-
-#page-header.not-top-img #nav {
-  z-index: 500;
-  transition: .3s;
-  background: var(--sco-card-bg)
-}
-
-#page-header.not-top-img:not(.nav-fixed) #nav {
-  background: var(--sco-none);
-  transition: .3s
-}
-
-@media screen and (max-width: 768px) {
-  #page-header.not-top-img:not(.nav-fixed) #nav {
-    transition: 0s
-  }
-}
-
-#page-header.nav-fixed #nav #menus > div.menus_items {
-  transition: .3s;
-  height: 40px;
-  margin: auto 0
-}
-
-#page-header.not-top-img {
-  margin-bottom: 0
-}
-
-#nav #toggle-menu {
-  padding: 0 .4rem
-}
-
-@media screen and (max-width: 768px) {
-  #nav #menus {
-    display: none !important;
-  }
-
-  #nav.hide-menu #toggle-menu .site-page {
-    width: 35px;
-    height: 35px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  #page-header #nav #nav-group {
-    width: 100%;
-    display: flex;
-    position: relative;
-    padding: 0 12px;
-  }
-
-  #page-header #nav #nav-right {
-    margin-right: 12px;
-  }
-
-  #nav #toggle-menu {
-    display: inline-block !important;
-  }
-}
-
-#page-header.no-top-img {
-  margin-bottom: 0
-}
-
-.layout {
-  padding: 1rem 1.5rem
-}
-
-@media screen and (min-width: 1300px) {
-  .layout {
-    display: flex;
-    justify-content: space-between;
-    padding: 1rem 1.5rem
-  }
-}
-
-#site-name .iconfont {
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 48px
-}
-
-#site-logo {
-  width: 121px
-}
-
-#nav-totop {
-  position: relative;
-  width: 35px;
-  height: 35px;
-  display: flex;
-  border-radius: 40px;
-  transition: all .3s ease-in-out;
-  align-items: center
-}
-
-#nav-totop.long {
-  width: 80px
-}
-
-#nav-totop .totopbtn {
-  padding-top: 0
-}
-
-#nav-totop .totopbtn i {
-  position: absolute;
-  display: flex;
-  font-size: .8rem;
-  opacity: 0
-}
-
-#nav-totop:hover .totopbtn i {
-  opacity: 1;
-  color: var(--sco-white);
-  transition: .3s
-}
-
-#nav-totop #percent {
-  font-size: 12px;
-  border-radius: 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: .3s;
-  white-space: nowrap
-}
-
-.nav-fixed #nav-totop #percent, .page #nav-totop #percent {
-  font-size: 12px;
-  border-radius: 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: .3s;
-  white-space: nowrap
-}
-
-#page-header:not(.nav-fixed) #percent {
-  transition: .3s
-}
-
-#page-header:not(.nav-fixed) #nav-totop {
-  width: 0;
-  transform: scale(0);
-  margin-left: 0 !important;
-  overflow: hidden;
-  transition: .3s ease-in
-}
-
-#nav-totop:hover #percent {
-  opacity: 0;
-  font-weight: 700
-}
-
-#page-header #nav #nav-right .nav-button a.totopbtn {
-  width: 25px;
-  height: 25px;
-  border-radius: 40px;
-  background: var(--sco-fontcolor);
-  color: var(--sco-card-bg);
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  transition: .3s
-}
-
-#page-header #nav #nav-right .nav-button.long a.totopbtn {
-  width: 70px
-}
-
-#page-header #nav #nav-right .nav-button:hover a.totopbtn {
-  background: var(--sco-main)
-}
-
-#page-header #nav #nav-right .nav-button:not(.long):hover a.totopbtn {
-  width: 35px;
-  height: 35px;
-  top: 0;
-  right: 0
-}
-
-#nav #site-name i {
-  font-size: 16px;
-  line-height: 35px;
-  padding: 0 12px
-}
-
-.back-home-button {
-  display: flex;
-  width: 35px;
-  height: 35px;
-  padding: 0 !important;
-  align-items: center;
-  justify-content: center;
-  margin-right: 4px;
-  transition: .3s;
-  color: var(--sco-white);
-  border-radius: 40px
-}
-
-.back-home-button i {
-  font-size: 22px
-}
-
-@media screen and (max-width: 768px) {
-  .back-home-button {
-    display: none
-  }
-}
-
-.nav-fixed #nav .back-home-button {
-  color: var(--sco-fontcolor)
-}
-
-#page-header.not-top-img #nav .back-home-button {
-  color: var(--sco-fontcolor)
-}
-
-#page-header.not-top-img #nav .back-home-button i {
-  font-size: 20px
-}
-
-.back-home-button:hover {
-  background: var(--sco-main);
-  color: var(--sco-white) !important
-}
-
-.post .back-home-button:hover {
-  background: var(--sco-white-op);
-  color: var(--sco-white) !important;
-  cursor: pointer;
-}
-
-.nav-fixed .back-home-button:hover {
-  background: var(--sco-main);
-  color: var(--sco-white) !important
-}
-
-.back-menu-list-groups .back-menu-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 340px;
-  justify-content: space-between
-}
-
-.back-menu-list-groups .back-menu-list::before {
-  position: absolute;
-  top: -15px;
-  left: 0;
-  width: 100%;
-  height: 20px;
-  content: ''
-}
-
-.back-menu-list-groups .back-menu-list .back-menu-item {
-  display: flex;
-  align-items: center;
-  margin: 4px 8px;
-  padding: 4px 8px !important;
-  transition: .3s;
-  border-radius: 8px
-}
-
-.back-menu-list-groups .back-menu-list .back-menu-item:hover {
-  background: var(--sco-main) !important;
-  transform: scale(1) !important
-}
-
-.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 8px;
-  background: var(--sco-none)
-}
-
-.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text {
-  font-size: 16px;
-  margin-left: .5rem;
-  color: var(--sco-fontcolor)
-}
-
-@media screen and (max-width: 768px) {
-  .back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text {
-    font-size: 14px
-  }
-}
-
-.back-menu-list-groups .back-menu-list .back-menu-item:hover .back-menu-item-text {
-  color: var(--sco-white)
-}
-
-.back-home-button .back-menu-list-group {
-  display: flex;
-  flex-direction: column
-}
-
-.back-home-button .back-menu-list-groups {
-  position: absolute;
-  top: 65px;
-  left: 1.5rem;
-  background: var(--sco-card-bg);
-  border-radius: 12px;
-  border: var(--style-border);
-  flex-direction: column;
-  font-size: 12px;
-  color: var(--sco-secondtext);
-  box-shadow: var(--sco-shadow-border);
-  transition: 0s;
-  opacity: 0;
-  pointer-events: none
-}
-
-.back-home-button .back-menu-list-groups:hover {
-  border: var(--style-border-hover)
-}
-
-.back-home-button .back-menu-list-group .back-menu-list-title {
-  margin: 8px 0 0 16px;
-  transition: .3s
-}
-
-.back-home-button .back-menu-list-group:hover .back-menu-list-title {
-  color: var(--sco-main)
-}
-
-.back-home-button:hover .back-menu-list-groups {
-  display: flex;
-  opacity: 1;
-  transition: .3s;
-  top: 55px;
-  pointer-events: auto;
-  left: 1.5rem
-}
-
-.back-home-button .back-menu-list .back-menu-item {
-  width: 150px
-}
-
-@media screen and (max-width: 768px) {
-  .back-home-button .back-menu-list-groups {
-    left: 0
-  }
-
-  .back-home-button:hover .back-menu-list-groups {
-    padding-bottom: 8px;
-    box-shadow: var(--sco-shadow-border);
-    left: 0
-  }
-}
-
-#nav #blog_name {
-  flex-wrap: nowrap;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  z-index: 102;
-  transition: .3s
-}
-
-@media screen and (min-width: 900px) {
-  #nav #site-name i {
-    opacity: 1;
-    transition: all .3s, color 0s, opacity .3s
-  }
-
-  #nav #site-name:hover i {
-    opacity: 0
-  }
-
-  #nav #site-name:after {
-    opacity: 0;
-    position: absolute;
-    display: flex;
-    z-index: 1;
-    content: "\e008";
-    font-family: scoicon, serif !important;
-    align-items: center;
-    justify-content: center;
-    font-size: 22px;
-    line-height: 1;
-    color: var(--sco-white)
-  }
-
-  .post #nav #site-name:hover {
-    background: var(--sco-white-op);
-    align-items: center
-  }
-
-  .nav-fixed #nav #site-name:hover {
-    background: var(--sco-main)
-  }
-
-  #nav #site-name:hover:after {
-    opacity: 1
-  }
-
-  #nav .back-home-button:hover {
-    box-shadow: var(--sco-shadow-main);
-    cursor: pointer;
-  }
-
-  #nav #page-name-text {
-    display: inline;
-    font-weight: 700;
-    padding: 4px 8px;
-    opacity: 0;
-    transition: .1s;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    position: relative;
-    text-align: center;
-    cursor: pointer;
-    top: 0;
-    font-size: .9rem;
-    animation-timing-function: ease-in;
-    -webkit-animation-timing-function: ease-in
-  }
-
-  #nav #page-name-text:hover {
-    color: var(--sco-main) !important;
-    background: var(--sco-none);
-    box-shadow: none
-  }
-
-  #page-header.nav-fixed #nav #page-name-text {
-    display: inline;
-    opacity: 1;
-    transition: .3s;
-    line-height: 1
-  }
-
-  #page-header.nav-fixed #nav #page-name-text:hover:after {
-    opacity: 1;
-    line-height: 36px
-  }
-
-  #page-header.nav-fixed #nav div.menus_items {
-    transition: .15s;
-    position: relative;
-    top: -60px
-  }
-
-  #page-header.nav-fixed.nav-visible #nav #page-name-text {
-    display: inline;
-    transition: .15s
-  }
-
-  #page-header.nav-fixed.nav-visible #nav div.menus_items {
-    opacity: 1;
-    transition: .15s;
-    position: relative;
-    top: 0
-  }
-
-  #page-name {
-    align-items: center;
-    display: flex;
-    border-radius: 12px;
-    height: 40px;
-    position: absolute;
-    top: 62px;
-    left: 0;
-    right: 0;
-    margin: auto;
-    justify-content: center;
-    animation-timing-function: ease-out;
-    -webkit-animation-timing-function: ease-out
-  }
-
-  #page-header.nav-fixed #nav #menus {
-    z-index: 100
-  }
-
-  #page-header.nav-fixed.nav-visible #nav #menus {
-    z-index: 101
-  }
-
-  #page-header.nav-fixed #page-name {
-    z-index: 101;
-    transition: .3s;
-    top: 10px
-  }
-
-  #page-header.nav-fixed.nav-visible #page-name {
-    z-index: 100;
-    top: 60px;
-    transition: .3s
-  }
-
-  #page-name-mask {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    overflow: hidden;
-    left: 0
-  }
-}
-
-@media screen and (max-width: 899px) {
-  #nav #page-name-mask {
-    display: none !important
-  }
-}
-
-@media screen and (max-width: 798px) {
-  #nav-music {
-    display: none !important
-  }
-}
-
-#nav-music {
-  display: flex;
-  align-items: center;
-  z-index: 1001;
-  position: fixed;
-  bottom: 20px;
-  left: 20px;
-  cursor: pointer;
-  transition: .3s;
-  transform-origin: left bottom;
-  box-shadow: var(--sco-shadow-border);
-  border-radius: 40px;
-  overflow: hidden;
-  user-select: none
-}
-
-#nav-music span {
-  user-select: none
-}
-
-#nav-music div {
-  user-select: none
-}
-
-#nav-music.playing {
-  box-shadow: 0 0 12px -3px var(--sco-none);
-  -webkit-animation: playingShadow 5s linear infinite
-}
-
-#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
-  height: 25px;
-  width: 25px;
-  border-radius: 40px;
-  z-index: 1;
-  transition: .3s;
-  -webkit-transform: rotate(0) scale(1);
-  border: var(--style-border-always);
-  -webkit-animation: changeright 24s linear infinite;
-  animation-play-state: paused
-}
-
-#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic {
-  box-shadow: 0 0 14px #ffffffa6;
-  -webkit-transform: rotate(0) scale(1.1);
-  border-color: var(--sco-white);
-  animation-play-state: running
-}
-
-#nav-music .aplayer.aplayer-withlrc .aplayer-info {
-  height: 100%;
-  color: var(--sco-fontcolor);
-  margin-left: 8px;
-  padding: 0;
-  display: flex;
-  align-items: center
-}
-
-#nav-music.playing .aplayer.aplayer-withlrc .aplayer-info {
-  color: var(--sco-white)
-}
-
-#nav-music #nav-music-hoverTips {
-  color: var(--sco-white);
-  background: var(--sco-main);
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  border-radius: 40px;
-  opacity: 0;
-  font-size: 12px;
-  z-index: 2;
-  pointer-events: none;
-  transition: .3s
-}
-
-#nav-music:hover:not(.playing) #nav-music-hoverTips {
-  opacity: 1
-}
-
-#nav-music.playing #nav-music-hoverTips {
-  opacity: 0
-}
-
-#nav-music .aplayer {
-  background: var(--sco-card-bg);
-  border-radius: 60px;
-  height: 41px;
-  display: flex;
-  margin: 0;
-  pointer-events: none;
-  transition: .3s;
-  border: var(--style-border);
-  box-shadow: none
-}
-
-#nav-music.playing .aplayer {
-  background: var(--sco-main-op-deep);
-  border: var(--style-border-hover);
-  backdrop-filter: saturate(180%) blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  transform: translateZ(0)
-}
-
-#nav-music .aplayer .aplayer-notice {
-  display: none
-}
-
-#nav-music .aplayer .aplayer-miniswitcher {
-  display: none
-}
-
-#nav-music .aplayer .aplayer-body {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 12px 0 8px;
-}
-
-#nav-music .aplayer .aplayer-pic .aplayer-play {
-  opacity: 0
-}
-
-#nav-music .aplayer-list {
-  display: none
-}
-
-#nav-music .aplayer .aplayer-info .aplayer-music {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  z-index: 1
-}
-
-#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
-  display: none
-}
-
-#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author {
-  display: none
-}
-
-#nav-music .aplayer.aplayer-withlist .aplayer-info {
-  border: none
-}
-
-#nav-music .aplayer .aplayer-pic div {
-  display: none
-}
-
-#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title {
-  cursor: pointer;
-  line-height: 1;
-  display: inline-block;
-  white-space: nowrap;
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: .3s
-}
-
-#nav-music .aplayer .aplayer-info .aplayer-controller {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0
-}
-
-#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
-  margin: 0;
-  padding: 0
-}
-
-#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
-  height: 100%;
-  background: 0 0;
-  opacity: 0
-}
-
-#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
-  opacity: 1
-}
-
-#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
-  display: none
-}
-
-#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
-  height: 100%;
-  opacity: .1;
-  background-color: var(--sco-white) !important;
-  -webkit-animation: lightBar 5s ease infinite;
-  animation-play-state: paused
-}
-
-#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
-  animation-play-state: running
-}
-
-#nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
-  width: 0;
-  opacity: 0;
-  transition: .3s;
-  margin-left: 8px;
-  margin-top: -2px
-}
-
-#nav-music.playing .aplayer.aplayer-withlrc .aplayer-lrc {
-  width: 200px;
-  margin-bottom: 0;
-  opacity: 1
-}
-
-#nav-music .aplayer .aplayer-lrc p {
-  color: #ffffffb3;
-  filter: blur(1px)
-}
-
-#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
-  color: var(--sco-white);
-  border: none;
-  filter: blur(0)
-}
-
-#nav-music .aplayer .aplayer-lrc:after, #nav-music .aplayer .aplayer-lrc:before {
-  display: none
-}
-
-i.fab {
-  font-size: 20px;
-  vertical-align: middle;
-  margin-bottom: 4px
-}
-
-#body-wrap .full_page:before {
-  background-color: var(--sco-none) !important;
-  transition: 0s !important
-}
-
-.full_page #page-header:before {
-  display: none !important
-}
-
-.snackbar-container {
-  background: var(--sco-main) !important;
-  color: var(--sco-white) !important;
-  border-radius: 0 !important;
-  display: flex;
-  justify-content: center !important;
-  max-width: none !important;
-  min-width: 100% !important;
-  margin: 0 !important;
-  left: 0 !important;
-  height: 60px !important;
-  transform: none !important
-}
-
-.snackbar-container p {
-  font-weight: 700 !important;
-  text-align: center !important;
-  font-size: .8rem !important;
-  display: flex !important;
-  justify-content: center !important
-}
-
-.snackbar-container .action {
-  color: var(--sco-white) !important;
-  padding: 4px 6px !important;
-  font-weight: 700;
-  border-radius: 8px !important;
-  transition: .3s;
-  border: var(--style-border) !important
-}
-
-.snackbar-container .action:hover {
-  color: var(--sco-main) !important;
-  background: var(--sco-white) !important
-}
-
-.snackbar-container::after {
-  position: absolute;
-  width: 0;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background: var(--sco-white);
-  opacity: .1;
-  content: "";
-  animation: snackbar-progress var(--sco-snackbar-time) linear forwards;
-  pointer-events: none
-}
-
-#nav a {
-  transition: .3s
-}
-
-#nav a:hover {
-  color: var(--sco-white);
-  background: var(--sco-white-op);
-  transition: .3s
-}
-
-.page #nav a:hover {
-  color: var(--sco-white);
-  background: var(--sco-main);
-  transition: .3s;
-  box-shadow: var(--sco-shadow-main)
-}
-
-.error #nav a:hover {
-  background: var(--sco-main)
-}
-
-.nav-fixed #nav a:hover {
-  background: var(--sco-main);
-  color: var(--sco-white);
-  transition: .3s
-}
-
-@media screen and (min-width: 768px) {
-  .menus_item:hover > a.site-page {
-    color: var(--sco-white) !important;
-    background: var(--sco-white-op);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-main)
-  }
-
-  .page .menus_item:hover > a.site-page {
-    color: var(--sco-white) !important;
-    background: var(--sco-main);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-main)
-  }
-
-  .nav-fixed .menus_item:hover > a.site-page {
-    background-color: var(--sco-main)
-  }
-}
-
-@media screen and (max-width: 768px) {
-  #page-header #nav a:hover span.scoicon {
-    opacity: 1 !important;
-  }
-  #page-header.not-top-img #nav a:hover {
-    align-items: flex-end !important;
-  }
-
-  #nav #site-name span{
-    padding-left: 8px
-  }
-
-  #sidebar #sidebar-menus .menus_items li .site-page:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-  }
-
-  #sidebar #sidebar-menus .menus_items li .site-page span:hover {
-    color: var(--sco-white)
-  }
-
-  #nav #site-name i {
-    color: var(--sco-white);
-    transition: .1s
-  }
-
-  .error #nav #site-name i {
-    color: var(--sco-fontcolor)
-  }
-
-  .nav-fixed #nav #site-name i {
-    color: var(--sco-fontcolor);
-    transition: .3s
-  }
-
-  .page #nav #site-name i {
-    color: var(--sco-fontcolor)
-  }
-
-  #nav a:hover {
-    background: var(--sco-none) !important;
-    box-shadow: none !important;
-    transition: .3s;
-    color: var(--sco-fontcolor)
-  }
-
-  #page-header.not-top-img #nav a:hover {
-    color: var(--sco-fontcolor)
-  }
-}
-
-.nav-fixed #nav #site-name i {
-  color: var(--sco-fontcolor);
-  transition: .3s
-}
-
-#search-mask {
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  transform: translateZ(0);
-  background: var(--sco-maskbgdeep)
-}
-
-#algolia-search .search-dialog .ais-search-box input {
-  border-radius: 8px !important;
-  border: var(--style-border)
-}
-
-#algolia-search .search-dialog .ais-search-box input:focus {
-  border: var(--style-border-hover)
-}
-
-#algolia-search .search-dialog .ais-search-box input::placeholder {
-  opacity: .6
-}
-
-#algolia-input-panel {
-  margin-bottom: 8px
-}
-
-.search-dialog {
-  border-radius: 12px !important;
-  box-shadow: var(--sco-shadow-lightblack);
-  background: var(--sco-card-bg);
-  border: var(--style-border);
-  transition: .3s
-}
-
-.search-dialog:hover {
-  border: var(--style-border-hover);
-  box-shadow: var(--sco-shadow-theme)
-}
-
-.search-dialog__title {
-  font-weight: 700;
-  color: var(--sco-main)
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a:hover {
-  color: var(--sco-hovertext)
-}
-
-#algolia-search .search-dialog .algolia-logo {
-  display: none
-}
-
-#algolia-tips {
-  padding-top: 12px;
-  color: var(--sco-secondtext);
-  right: 0;
-  margin: auto
-}
-
-#algolia-tips i {
-  font-size: 22px
-}
-
-.algolia-tips-text {
-  margin-left: .4rem
-}
-
-#algolia-search-results {
-  padding-top: 8px
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item:before {
-  display: none
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item {
-  padding-left: 0;
-  font-weight: 700
-}
-
-#algolia-search .search-dialog .ais-pagination.pagination {
-  margin: .2rem 0 0
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item em {
-  color: var(--sco-theme);
-  font-style: normal
-}
-
-#algolia-search .search-dialog .ais-search-box {
-  padding-top: 8px
-}
-
-#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item.current a {
-  border-radius: 4px;
-  background: var(--sco-main);
-  color: var(--sco-white)
-}
-
-#weblogo {
-  align-self: center
-}
-
-#nav #menus {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  position: absolute;
-  height: 60px;
-  left: 0;
-  margin: 0;
-  transform: translateZ(0)
-}
-
-#nav .menus_items {
-  position: relative;
-  width: fit-content;
-  text-align: center;
-  left: 0;
-  right: 0;
-  top: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center
-}
-
-#menus > div.menus_items > div > a {
-  letter-spacing: .3rem;
-  padding-left: .7rem;
-  font-weight: 700;
-  padding-top: 0;
-  padding-bottom: 0;
-  height: 35px;
-  line-height: 35px;
-  border-radius: 40px
-}
-
-#nav .menus_items .menus_item .menus_item_child li a {
-  letter-spacing: 0;
-  display: flex;
-  align-items: center;
-  border-radius: 100px;
-  padding: .3rem .8rem;
-  width: 100%;
-  color: var(--sco-fontcolor) !important;
-  text-shadow: none !important
-}
-
-#page-header.nav-fixed #nav #menus[style*="padding-right: 300px;"] .menus_items {
-  transform: translateX(-150px)
-}
-
-#travellings_button {
-  display: inline;
-  padding: 0 .4rem;
-  transition: .3s
-}
-
-@media screen and (max-width: 768px) {
-  #page-header.nav-fixed #travellings_button {
-    opacity: 0
-  }
-}
-
-[data-theme=dark] #page-header.not-top-img #nav .darkmode_switchbutton {
-  color: var(--sco-yellow)
-}
-
-#page-header.full_page {
-  height: 2rem;
-  background-image: none !important;
-  background-color: var(--sco-none)
-}
-
-#page-header.full_page #site-info {
-  display: none
-}
-
-#page-header.post-bg::before {
-  transition: .3s;
-  height: 20rem;
-  background-color: var(--sco-main);
-  opacity: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  content: ""
-}
-
-@media screen and (max-width: 768px) {
-  #page-header.post-bg {
-    height: 30rem !important;
-    margin-bottom: -12px
-  }
-
-  #page-header.post-bg:before {
-    height: 15rem
-  }
-
-  .post-bg #post-cover {
-    min-height: 15rem !important;
-    height: 70% !important;
-    opacity: 1 !important
-  }
-}
-
-@media screen and (min-width: 1300px) {
-  #page-header.post-bg {
-    height: 25rem
-  }
-
-  #page-header {
-    height: 25rem
-  }
-
-  #page-header.post-bg:before {
-    height: 25rem;
-    opacity: 0;
-    background-color: var(--sco-main);
-    animation: slide-in-op .6s 0s forwards
-  }
-
-  #post-info .post-title {
-    width: 1100px;
-    font-size: 2.6rem !important
-  }
-}
-
-#page-header.post-bg {
-  background-color: var(--sco-background);
-  transition: .6s;
-  overflow: hidden
-}
-
-#page-header {
-  background-image: none !important;
-  display: flex;
-  justify-content: center
-}
-
-#page-header #post-info {
-  top: 0;
-  position: absolute;
-  padding: 0 3rem;
-  margin: 0 auto;
-  z-index: 10;
-  color: var(--sco-white);
-  max-width: 1400px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  height: calc(100% + 0px);
-  justify-content: center;
-  animation: slide-in .6s 0s backwards
-}
-
-@media screen and (max-width: 768px) {
-  #page-header #post-info {
-    justify-content: normal;
-    padding: 18rem 6% 0;
-  }
-}
-
-@media screen and (min-width: 1300px) {
-  #page-header #post-info {
-    height: calc(100% + 0px);
-    top: 0;
-    display: flex;
-    justify-content: center
-  }
-}
-
-#nav {
-  position: absolute;
-  top: 0;
-  z-index: 90;
-  display: flex;
-  flex-wrap: wrap;
-  -webkit-box-align: center;
-  align-items: center;
-  padding: 0 36px;
-  width: 100%;
-  height: 60px;
-  font-size: 1.3em;
-  opacity: 0;
-  transition: all .5s ease 0s;
-  outline: 1px solid var(--sco-none)
-}
-
-@media screen and (max-width: 768px) {
-  #nav {
-    padding: 0 16px
-  }
-}
-
-#nav.show {
-  opacity: 1;
-  filter: none
-}
-
-#nav #toggle-menu {
-  display: none;
-  padding: .1rem 0 0 .3rem;
-  vertical-align: top
-}
-
-#nav #toggle-menu:hover {
-  color: var(--sco-white)
-}
-
-#nav a {
-  color: var(--sco-white);
-  padding: .3rem .4rem 0;
-  border-radius: 5px
-}
-
-#nav a:hover {
-  color: var(--sco-white)
-}
-
-#nav .menus_items .menus_item:hover .menus_item_child {
-  display: block
-}
-
-#nav .menus_items .menus_item:hover i.expand {
-  transform: rotate(180deg) !important
-}
-
-#nav .menus_items .menus_item i.expand {
-  padding: 4px;
-  transition: transform .3s ease 0s
-}
-
-#nav .menus_items .menus_item .menus_item_child {
-  position: absolute;
-  display: none;
-  margin-top: 8px;
-  padding: 0;
-  background-color: var(--sidebar-bg);
-  box-shadow: rgba(0, 0, 0, .5) 0 5px 20px -4px;
-  animation: .3s ease .1s 1 normal both running sub_menus;
-  border-radius: 5px;
-  white-space: nowrap
-}
-
-#nav .menus_items .menus_item .menus_item_child::before {
-  position: absolute;
-  top: -8px;
-  left: 0;
-  width: 100%;
-  height: 20px;
-  content: ""
-}
-
-#nav .menus_items .menus_item:last-child .menus_item_child::after {
-  position: absolute;
-  top: -60px;
-  right: 0;
-  width: 50%;
-  height: 60px;
-  content: ""
-}
-
-#nav .menus_items .menus_item:first-child .menus_item_child::after {
-  position: absolute;
-  top: -60px;
-  left: 0;
-  width: 50%;
-  height: 60px;
-  content: ""
-}
-
-#nav.hide-menu #toggle-menu {
-  display: inline-block
-}
-
-@media screen and (min-width: 768px) {
-  #nav.hide-menu #toggle-menu {
-    display: none
-  }
-}
-
-#nav.hide-menu #toggle-menu .site-page {
-  font-size: inherit
-}
-
-#nav.hide-menu .menus_items {
-  position: absolute;
-  left: 0;
-  visibility: hidden;
-  opacity: 0
-}
-
-#nav.hide-menu #search-button span {
-  display: none !important
-}
-
-#nav #search-button {
-  display: inline;
-  padding: 0 .4rem
-}
-
-#nav .site-page {
-  position: relative;
-  padding-bottom: .3rem;
-  text-shadow: rgba(0, 0, 0, .3) .05rem .05rem .1rem;
-  font-size: .78em;
-  cursor: pointer
-}
-
-#nav {
-  flex-wrap: nowrap;
-  justify-content: space-between
-}
-
-#nav .menus_items .menus_item .menus_item_child {
-  padding: 6px 4px 8px 4px;
-  border-radius: 100px;
-  background-color: var(--sco-maskbgdeep);
-  box-shadow: var(--sco-shadow-black);
-  border: var(--style-border);
-  transition: .3s;
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  transform: translateZ(0);
-  top: 35px
-}
-
-#nav .menus_items .menus_item:hover .menus_item_child {
-  border: var(--style-border-hover);
-  box-shadow: var(--sco-shadow-main)
-}
-
-#nav .menus_items .menus_item .menus_item_child:before {
-  top: -10px
-}
-
-#nav .menus_items .menus_item .menus_item_child li a:hover {
-  background: var(--sco-main) !important;
-  color: var(--sco-white) !important;
-  box-shadow: var(--sco-shadow-main);
-  margin: 0 auto;
-  transform: scale(1) !important;
-  padding: .3rem 1rem
-}
-
-#nav .menus_items .menus_item .menus_item_child li a i:not(.fa-brands) {
-  font-size: 22px;
-  margin-right: 8px;
-  line-height: 1
-}
-
-#nav .menus_items .menus_item {
-  padding: 0 .4rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: auto;
-  position: relative
-}
-
-#nav .menus_items .menus_item .menus_item_child li {
-  display: inline-flex;
-  list-style: none;
-  border-radius: 5px;
-  margin: 0 4px
-}
-
-#nav a {
-  border-radius: 8px
-}
-
-.nav-fixed #nav a {
-  color: var(--sco-fontcolor);
-  transition: .3s
-}
\ No newline at end of file
+#page-header 
+	position relative
+	width 100%
+	background-position center center
+	background-size cover
+	background-repeat no-repeat
+	transition all .5s ease 0s
+	background-image none !important
+	display flex
+	justify-content center
+
+	+minWidth1300()
+		height: 25rem
+
+	&.full_page 
+		height 20rem
+		background-attachment fixed
+		height 2rem
+		background-image none !important
+		background-color var(--sco-none)
+
+		#site-info 
+			position absolute
+			top 7.8rem
+			padding 0 .5rem
+			width 100%
+			display none
+
+	#site-title 
+		margin 0
+		color var(--sco-white)
+		font-size 1.85em
+
+		+minWidth768()
+			font-size 2.85em
+
+	#site-subtitle 
+		color var(--light-grey)
+		font-size 1.15em
+
+		+minWidth768()
+			font-size 1.72em
+
+	#site_social_icons 
+		display none
+		margin 0 auto
+		width 15rem
+		text-align center
+
+		+maxWidth768()
+			display block
+
+		.social-icon 
+			margin 0 .5rem
+			color var(--light-grey)
+			text-shadow rgba(0, 0, 0, .15) .1rem .1rem .2rem
+			font-size 1.43em
+			cursor pointer
+
+	#scroll-down 
+		position absolute
+		bottom 0
+		width 100%
+		cursor pointer
+		display none
+
+		.scroll-down-effects 
+			position relative
+			width 100%
+			color var(--light-grey)
+			font-size 30px
+
+	&.not-home-page 
+		height 20rem
+
+		+maxWidth768()
+			height 14rem
+
+	#page-site-info 
+		position absolute
+		top 10rem
+		padding 0 .5rem
+		width 100%
+
+		+maxWidth768()
+			top 7rem
+
+	&.post-bg 
+		height 20rem
+		background-color var(--sco-background)
+		transition .6s
+		overflow hidden
+
+		+minWidth1300()
+			height: 25rem
+
+		+maxWidth768()
+			height 18rem
+			background-color var(--sco-main) !important
+			transition 0s
+			margin-bottom -12px
+
+		&::before 
+			transition .3s
+			height 20rem
+			background-color var(--sco-main)
+			opacity 1
+			position absolute
+			top 0
+			left 0
+			display block
+			width 100%
+			content ""
+
+			+minWidth1300()
+				height 25rem
+				opacity 0
+				background-color var(--sco-main)
+				animation slide-in-op .6s 0s forwards
+
+			+maxWidth768()
+				height 15rem
+
+	#post-info 
+		position absolute
+		padding 0 8%
+		width 100%
+		text-align center
+		top 0
+		position absolute
+		padding 0 3rem
+		margin 0 auto
+		z-index 10
+		color var(--sco-white)
+		max-width 1400px
+		display flex
+		flex-direction column
+		align-items flex-start
+		height calc(100% + 0px)
+		justify-content center
+		animation slide-in .6s 0s backwards
+
+		+minWidth1300()
+			height calc(100% + 0px)
+			top 0
+			display flex
+			justify-content center
+
+		+maxWidth900()
+			bottom 1.5rem
+			text-align left
+
+		+maxWidth768()
+			bottom 1.1rem
+			padding 0 1.1rem
+			justify-content normal
+			padding 18rem 6% 0
+
+	&.not-top-img 
+		margin-bottom .5rem
+		height 60px
+		background 0 center
+		margin-bottom 0
+
+		#nav 
+			z-index 500
+			transition .3s
+			background var(--sco-card-bg)
+
+			a 
+				color var(--sco-fontcolor)
+				text-shadow none
+
+				&:hover 
+					color var(--sco-white)
+					text-shadow none
+					align-items center
+
+					+maxWidth768()
+						align-items flex-end !important
+						color var(--sco-fontcolor)
+
+			.back-home-button 
+				color var(--sco-fontcolor)
+
+				i 
+					font-size 20px
+
+		&:not(.nav-fixed) 
+			#nav 
+				background var(--sco-none)
+				transition .3s
+
+				+maxWidth768()
+					transition 0s
+
+	#nav 
+		box-shadow none
+		transition 0.3s
+		display flex
+		justify-content center
+		-webkit-user-select none
+
+		+maxWidth768()
+			background linear-gradient(to top, var(--sco-main-none) 0, var(--sco-main) 100%)
+			transition 0s
+
+		a 
+			&:hover 
+				span 
+					&.scoicon 
+						opacity 0
+
+						+maxWidth768()
+							opacity 1 !important
+
+		#nav-group 
+			max-width 1400px
+			width 100%
+			display flex
+			position relative
+			padding 0 1.5rem
+			align-items center
+
+			+maxWidth768()
+				width 100%
+				display flex
+				position relative
+				padding 0 12px
+
+		#nav-right 
+			position absolute
+			right 0
+			z-index 102
+			display flex
+			flex-direction row
+			height 100%
+			align-items center
+			margin-right 1.5rem
+			overflow hidden
+
+			+maxWidth768()
+				margin-right 12px
+
+			div 
+				margin-left .5rem
+				padding 0
+
+			.nav-button 
+				a 
+					&.totopbtn 
+						width 25px
+						height 25px
+						border-radius 40px
+						background var(--sco-fontcolor)
+						color var(--sco-card-bg)
+						position absolute
+						top 5px
+						right 5px
+						transition .3s
+
+				&.long 
+					a 
+						&.totopbtn 
+							width 70px
+
+				&:hover 
+					a 
+						&.totopbtn 
+							background var(--sco-main)
+
+				&:not(.long):hover 
+					a 
+						&.totopbtn 
+							width 35px
+							height 35px
+							top 0
+							right 0
+
+		#nav-left 
+			z-index 102
+			display flex
+			flex-direction row
+			height 100%
+			align-items center
+			margin-right 1.5rem
+			overflow hidden
+
+	&.nav-fixed 
+		#nav 
+			position fixed
+			top 0
+			z-index 103
+			transition .3s
+			top 0
+			box-shadow none
+			background var(--sco-card-bg)
+			outline 1px solid var(--sco-card-border)
+
+			#menus 
+				+minWidth900()
+					z-index 100
+
+				& > div 
+					&.menus_items 
+						transition .3s
+						height 40px
+						margin auto 0
+
+			#menus[style*="padding-right: 300px;"]
+				.menus_items 
+					transform translateX(-150px)
+
+			#page-name
+				+minWidth900()
+					z-index 101
+					transition .3s
+					top 10px
+
+				&-text
+					+minWidth900()
+						display inline
+						opacity 1
+						transition .3s
+						line-height 1
+
+					&:hover
+						&:after
+							+minWidth900()
+								opacity 1
+								line-height 36px
+
+			div.menus_items
+				+minWidth900()
+					transition .15s
+					position relative
+					top -60px
+
+		&.nav-visible
+			#nav
+				#page-name
+					+minWidth900()
+						z-index 100
+						top 60px
+						transition .3s
+
+					&-text
+						+minWidth900()
+							display inline
+							transition .15s
+
+				div.menus_items
+					+minWidth900()
+						opacity 1
+						transition .15s
+						position relative
+						top: 0
+
+				#menus
+					+minWidth900()
+						z-index 101
+
+		#travellings_button
+			+maxWidth768()
+				opacity 0
+
+	&.nav-visible 
+		& + .layout 
+			& > .aside-content 
+				& > .sticky_layout 
+					top 70px
+					transition top .5s ease 0s
+
+	&.no-top-img 
+		margin-bottom 0
+
+	&:not(.nav-fixed) 
+		#percent 
+			transition .3s
+
+		#nav-totop 
+			width 0
+			transform scale(0)
+			margin-left 0 !important
+			overflow hidden
+			transition .3s ease-in
+
+#page-header #scroll-down .scroll-down-effects,
+#page-header #site-subtitle, #page-header #site-title 
+	text-align center
+	line-height 1.5
+
+#page-header.nav-fixed #nav #site-name,
+#page-header.nav-fixed #nav #toggle-menu,
+#page-header.nav-fixed #nav a 
+	text-shadow none
+
+#page-header.nav-fixed > #nav,
+#page-header.not-top-img > #nav 
+	box-shadow none
+
+#nav 
+	padding 0
+	position absolute
+	top 0
+	z-index 90
+	display flex
+	flex-wrap wrap
+	-webkit-box-align center
+	align-items center
+	padding 0 36px
+	width 100%
+	height 60px
+	font-size 1.3em
+	opacity 0
+	transition all .5s ease 0s
+	outline 1px solid var(--sco-none)
+	flex-wrap nowrap
+	justify-content space-between
+
+	+maxWidth768()
+		padding 0
+
+	&.show 
+		top 0
+		transition .2s
+		position fixed
+		z-index 91
+		opacity 1
+		filter none
+
+	#toggle-menu 
+		padding 0 .4rem
+		display none
+		padding .1rem 0 0 .3rem
+		vertical-align top
+
+		&:hover 
+			color var(--sco-white)
+
+	#site-name
+		padding 0
+		transition .3s
+		display flex
+		height 35px
+		min-width 70px
+		justify-content center
+		align-items flex-end
+		text-shadow none
+		border-radius 40px
+		cursor pointer
+
+		&:hover
+			i
+				+minWidth900()
+					opacity 0
+
+			&:after
+				+minWidth900()
+					opacity: 1
+
+		&:after
+			+minWidth900()
+				opacity 0
+				position absolute
+				display flex
+				z-index 1
+				content "\e008"
+				font-family scoicon, serif !important
+				align-items center
+				justify-content center
+				font-size 22px
+				line-height 1
+				color var(--sco-white)
+
+		i 
+			font-size 16px
+			line-height 35px
+			padding 0 12px
+
+			+maxWidth768()
+				color var(--sco-white)
+				transition .1s
+
+			+minWidth900()
+				opacity 1
+				transition all .3s, color 0s, opacity .3s
+
+		span
+			+maxWidth768()
+				padding-left 8px
+
+	#blog_name 
+		flex-wrap nowrap
+		height 60px
+		display flex
+		align-items center
+		z-index 102
+		transition .3s
+
+	a 
+		transition .3s
+		color var(--sco-white)
+		padding .3rem .4rem 0
+		border-radius 5px
+		border-radius 8px
+
+		&:hover 
+			color var(--sco-white)
+			background var(--sco-white-op)
+			transition .3s
+			color var(--sco-white)
+
+			+maxWidth768()
+				background var(--sco-none) !important
+				box-shadow none !important
+				transition .3s
+				color var(--sco-fontcolor)
+
+	#menus 
+		display flex
+		justify-content center
+		width 100%
+		position absolute
+		height 60px
+		left 0
+		margin 0
+		transform translateZ(0)
+
+		+maxWidth768()
+			display none !important
+
+	.menus_items 
+		position relative
+		width fit-content
+		text-align center
+		left 0
+		right 0
+		top 0
+		display flex
+		flex-direction row
+		justify-content center
+
+		.menus_item 
+			padding 0 .4rem
+			display flex
+			flex-direction column
+			align-items center
+			margin auto
+			position relative
+
+			.menus_item_child 
+				position absolute
+				display none
+				margin-top 8px
+				padding 0
+				background-color var(--sidebar-bg)
+				box-shadow rgba(0, 0, 0, .5) 0 5px 20px -4px
+				animation .3s ease .1s 1 normal both running sub_menus
+				border-radius 5px
+				white-space nowrap
+				padding 6px 4px 8px 4px
+				border-radius 100px
+				background-color var(--sco-maskbgdeep)
+				box-shadow var(--sco-shadow-black)
+				border var(--style-border)
+				transition .3s
+				backdrop-filter blur(20px)
+				-webkit-backdrop-filter blur(20px)
+				transform translateZ(0)
+				top 35px
+
+				li 
+					display inline-flex
+					list-style none
+					border-radius 5px
+					margin 0 4px
+
+					a 
+						letter-spacing 0
+						display flex
+						align-items center
+						border-radius 100px
+						padding .3rem .8rem
+						width 100%
+						color var(--sco-fontcolor) !important
+						text-shadow none !important
+
+						&:hover 
+							background var(--sco-main) !important
+							color var(--sco-white) !important
+							box-shadow var(--sco-shadow-main)
+							margin 0 auto
+							transform scale(1) !important
+							padding .3rem 1rem
+
+						i 
+							&:not(.fa-brands) 
+								font-size 22px
+								margin-right 8px
+								line-height 1
+
+				&::before 
+					position absolute
+					top -8px
+					left 0
+					width 100%
+					height 20px
+					content ""
+
+				&:before 
+					top -10px
+
+			&:hover 
+				.menus_item_child 
+					display block
+					border var(--style-border-hover)
+					box-shadow var(--sco-shadow-main)
+
+				i 
+					&.expand 
+						transform rotate(180deg) !important
+
+			i 
+				&.expand 
+					padding 4px
+					transition transform .3s ease 0s
+
+			&:last-child 
+				.menus_item_child 
+					&::after 
+						position absolute
+						top -60px
+						right 0
+						width 50%
+						height 60px
+						content ""
+
+			&:first-child 
+				.menus_item_child 
+					&::after 
+						position absolute
+						top -60px
+						left 0
+						width 50%
+						height 60px
+						content ""
+
+	&.hide-menu 
+		#toggle-menu 
+			display inline-block
+
+			+minWidth768()
+				display none
+
+			.site-page 
+				font-size inherit
+
+				+maxWidth768()
+					width 35px
+					height 35px
+					display flex
+					align-items center
+					justify-content center
+
+		.menus_items 
+			position absolute
+			left 0
+			visibility hidden
+			opacity 0
+
+		#search-button 
+			span 
+				display none !important
+
+	#search-button 
+		display inline
+		padding 0 .4rem
+
+	.site-page 
+		position relative
+		padding-bottom .3rem
+		text-shadow rgba(0, 0, 0, .3) .05rem .05rem .1rem
+		font-size .78em
+		cursor pointer
+
+	.back-home-button
+		&:hover
+			+minWidth900()
+				box-shadow var(--sco-shadow-main)
+				cursor pointer
+	
+	#page-name
+		&-text
+			+minWidth900()
+				display inline
+				font-weight 700
+				padding 4px 8px
+				opacity 0
+				transition .1s
+				text-overflow ellipsis
+				overflow hidden
+				white-space nowrap
+				position relative
+				text-align center
+				cursor pointer
+				top 0
+				font-size .9rem
+				animation-timing-function ease-in
+				-webkit-animation-timing-function ease-in
+
+			&:hover
+				+minWidth900()
+					color var(--sco-main) !important
+					background var(--sco-none)
+					box-shadow none
+
+		&-mask
+			+maxWidth899()
+				display none !important
+
+.nav-button 
+	cursor pointer
+
+#page-header #nav #nav-left .nav-button a,
+#page-header #nav #nav-right .nav-button a 
+	height 35px
+	width 35px
+	display flex
+	align-items center
+	justify-content center
+	border-radius 40px
+
+#page-header #nav #nav-left .nav-button a i,
+#page-header #nav #nav-right .nav-button a i 
+	line-height 1
+	font-size 22px
+
+.layout 
+	padding 1rem 1.5rem
+
+	+minWidth1300()
+		display flex
+		justify-content space-between
+		padding 1rem 1.5rem
+
+#site-name 
+	.iconfont 
+		font-size 20px
+		font-weight 400
+		line-height 48px
+
+#site-logo 
+	width 121px
+
+#nav-totop 
+	position relative
+	width 35px
+	height 35px
+	display flex
+	border-radius 40px
+	transition all .3s ease-in-out
+	align-items center
+
+	&.long 
+		width 80px
+
+	.totopbtn 
+		padding-top 0
+
+		i 
+			position absolute
+			display flex
+			font-size .8rem
+			opacity 0
+
+	&:hover 
+		.totopbtn 
+			i 
+				opacity 1
+				color var(--sco-white)
+				transition .3s
+
+		#percent 
+			opacity 0
+			font-weight 700
+
+	#percent 
+		font-size 12px
+		border-radius 35px
+		display flex
+		justify-content center
+		align-items center
+		transition .3s
+		white-space nowrap
+
+.nav-fixed #nav-totop #percent,
+.page #nav-totop #percent 
+	font-size 12px
+	border-radius 35px
+	display flex
+	justify-content center
+	align-items center
+	transition .3s
+	white-space nowrap
+
+.back-home-button 
+	display flex
+	width 35px
+	height 35px
+	padding 0 !important
+	align-items center
+	justify-content center
+	margin-right 4px
+	transition .3s
+	color var(--sco-white)
+	border-radius 40px
+
+	+maxWidth768()
+		display: none
+
+	i 
+		font-size 22px
+
+	&:hover 
+		background var(--sco-main)
+		color var(--sco-white) !important
+
+		.back-menu-list-groups 
+			display flex
+			opacity 1
+			transition .3s
+			top 55px
+			pointer-events auto
+			left 1.5rem
+
+			+maxWidth768()
+				padding-bottom 8px
+				box-shadow var(--sco-shadow-border)
+				left: 0
+
+	.back-menu-list-group 
+		display flex
+		flex-direction column
+
+		.back-menu-list-title 
+			margin 8px 0 0 16px
+			transition .3s
+
+		&:hover 
+			.back-menu-list-title 
+				color var(--sco-main)
+
+	.back-menu-list-groups 
+		position absolute
+		top 65px
+		left 1.5rem
+		background var(--sco-card-bg)
+		border-radius 12px
+		border var(--style-border)
+		flex-direction column
+		font-size 12px
+		color var(--sco-secondtext)
+		box-shadow var(--sco-shadow-border)
+		transition 0s
+		opacity 0
+		pointer-events none
+
+		+maxWidth768()
+			left 0
+
+		&:hover 
+			border var(--style-border-hover)
+
+	.back-menu-list 
+		.back-menu-item 
+			width 150px
+
+.nav-fixed 
+	#nav 
+		.back-home-button 
+			color var(--sco-fontcolor)
+		a 
+			color var(--sco-fontcolor)
+			transition .3s
+
+			&:hover 
+				background var(--sco-main)
+				color var(--sco-white)
+				transition .3s
+
+		#site-name
+			&:hover
+				+minWidth900()
+					background var(--sco-main)
+
+			i 
+				color var(--sco-fontcolor)
+				transition .3s
+
+				+maxWidth768()
+					color var(--sco-fontcolor)
+					transition .3s
+
+	.back-home-button 
+		&:hover 
+			background var(--sco-main)
+			color var(--sco-white) !important
+
+	.menus_item
+		&:hover
+			& >
+				a.site-page
+					+minWidth768()
+						background-color var(--sco-main)
+
+.post 
+	.back-home-button 
+		&:hover 
+			background var(--sco-white-op)
+			color var(--sco-white) !important
+			cursor pointer
+
+	#nav
+		#site-name
+			&:hover
+				+minWidth900()
+					background var(--sco-white-op)
+					align-items center
+
+.back-menu-list-groups 
+	.back-menu-list 
+		display flex
+		flex-direction row
+		flex-wrap wrap
+		width 340px
+		justify-content space-between
+
+		&::before 
+			position absolute
+			top -15px
+			left 0
+			width 100%
+			height 20px
+			content ''
+
+		.back-menu-item 
+			display flex
+			align-items center
+			margin 4px 8px
+			padding 4px 8px !important
+			transition .3s
+			border-radius 8px
+
+			&:hover 
+				background var(--sco-main) !important
+				transform scale(1) !important
+
+				.back-menu-item-text 
+					color var(--sco-white)
+
+			.back-menu-item-icon 
+				width 24px
+				height 24px
+				border-radius 8px
+				background var(--sco-none)
+
+			.back-menu-item-text 
+				font-size 16px
+				margin-left .5rem
+				color var(--sco-fontcolor)
+
+				+maxWidth768()
+					font-size 14px
+
+#nav-music 
+	display flex
+	align-items center
+	z-index 1001
+	position fixed
+	bottom 20px
+	left 20px
+	cursor pointer
+	transition .3s
+	transform-origin left bottom
+	box-shadow var(--sco-shadow-border)
+	border-radius 40px
+	overflow hidden
+	user-select none
+
+	+maxWidth798()
+		display none !important
+
+	span 
+		user-select none
+
+	div 
+		user-select none
+
+	&.playing 
+		box-shadow 0 0 12px -3px var(--sco-none)
+		-webkit-animation playingShadow 5s linear infinite
+
+		.aplayer 
+			background var(--sco-main-op-deep)
+			border var(--style-border-hover)
+			backdrop-filter saturate(180%) blur(20px)
+			-webkit-backdrop-filter blur(20px)
+			transform translateZ(0)
+
+			&.aplayer-withlrc 
+				.aplayer-pic 
+					box-shadow 0 0 14px #ffffffa6
+					-webkit-transform rotate(0) scale(1.1)
+					border-color var(--sco-white)
+					animation-play-state running
+
+				.aplayer-info 
+					color var(--sco-white)
+
+				.aplayer-lrc 
+					width 200px
+					margin-bottom 0
+					opacity 1
+
+			.aplayer-info 
+				.aplayer-controller 
+					.aplayer-bar-wrap 
+						.aplayer-bar 
+							opacity 1
+
+							.aplayer-played 
+								animation-play-state running
+
+		#nav-music-hoverTips 
+			opacity 0
+
+	.aplayer 
+		background var(--sco-card-bg)
+		border-radius 60px
+		height 41px
+		display flex
+		margin 0
+		pointer-events none
+		transition .3s
+		border var(--style-border)
+		box-shadow none
+
+		&.aplayer-withlrc 
+			.aplayer-pic 
+				height 25px
+				width 25px
+				border-radius 40px
+				z-index 1
+				transition .3s
+				-webkit-transform rotate(0) scale(1)
+				border var(--style-border-always)
+				-webkit-animation changeright 24s linear infinite
+				animation-play-state paused
+
+			.aplayer-info 
+				height 100%
+				color var(--sco-fontcolor)
+				margin-left 8px
+				padding 0
+				display flex
+				align-items center
+
+			.aplayer-lrc 
+				width 0
+				opacity 0
+				transition .3s
+				margin-left 8px
+				margin-top -2px
+
+		.aplayer-notice 
+			display none
+
+		.aplayer-miniswitcher 
+			display none
+
+		.aplayer-body 
+			position relative
+			display flex
+			align-items center
+			padding 0 12px 0 8px
+
+		.aplayer-pic 
+			.aplayer-play 
+				opacity 0
+
+			div 
+				display none
+
+		.aplayer-info 
+			.aplayer-music 
+				margin 0
+				display flex
+				align-items center
+				padding 0
+				z-index 1
+
+				.aplayer-author 
+					display none
+
+				.aplayer-title 
+					cursor pointer
+					line-height 1
+					display inline-block
+					white-space nowrap
+					max-width 120px
+					overflow hidden
+					text-overflow ellipsis
+					transition .3s
+
+			.aplayer-controller 
+				position absolute
+				width 100%
+				height 100%
+				top 0
+				left 0
+
+				.aplayer-time 
+					display none
+
+				.aplayer-bar-wrap 
+					margin 0
+					padding 0
+
+					.aplayer-bar 
+						height 100%
+						background 0 0
+						opacity 0
+
+						.aplayer-loaded 
+							display none
+
+						.aplayer-played 
+							height 100%
+							opacity .1
+							background-color var(--sco-white) !important
+							-webkit-animation lightBar 5s ease infinite
+							animation-play-state paused
+
+		&.aplayer-withlist 
+			.aplayer-info 
+				border none
+
+		.aplayer-lrc 
+			p 
+				color #ffffffb3
+				filter blur(1px)
+
+				&.aplayer-lrc-current 
+					color var(--sco-white)
+					border none
+					filter blur(0)
+
+	#nav-music-hoverTips 
+		color var(--sco-white)
+		background var(--sco-main)
+		width 100%
+		height 100%
+		position absolute
+		top 0
+		left 0
+		align-items center
+		justify-content center
+		display flex
+		border-radius 40px
+		opacity 0
+		font-size 12px
+		z-index 2
+		pointer-events none
+		transition .3s
+
+	&:hover 
+		&:not(.playing) 
+			#nav-music-hoverTips 
+				opacity 1
+
+	.aplayer-list 
+		display none
+
+#nav-music .aplayer .aplayer-lrc:after,
+#nav-music .aplayer .aplayer-lrc:before 
+	display none
+
+i 
+	&.fab 
+		font-size 20px
+		vertical-align middle
+		margin-bottom 4px
+
+#body-wrap 
+	.full_page 
+		&:before 
+			background-color var(--sco-none) !important
+			transition 0s !important
+
+.full_page 
+	#page-header 
+		&:before 
+			display none !important
+
+.snackbar-container 
+	background var(--sco-main) !important
+	color var(--sco-white) !important
+	border-radius 0 !important
+	display flex
+	justify-content center !important
+	max-width none !important
+	min-width 100% !important
+	margin 0 !important
+	left 0 !important
+	height 60px !important
+	transform none !important
+
+	p 
+		font-weight 700 !important
+		text-align center !important
+		font-size .8rem !important
+		display flex !important
+		justify-content center !important
+
+	.action 
+		color var(--sco-white) !important
+		padding 4px 6px !important
+		font-weight 700
+		border-radius 8px !important
+		transition .3s
+		border var(--style-border) !important
+
+		&:hover 
+			color var(--sco-main) !important
+			background var(--sco-white) !important
+
+	&::after 
+		position absolute
+		width 0
+		height 100%
+		left 0
+		top 0
+		background var(--sco-white)
+		opacity .1
+		content ""
+		animation snackbar-progress var(--sco-snackbar-time) linear forwards
+		pointer-events none
+
+.page 
+	#nav 
+		a 
+			&:hover 
+				color var(--sco-white)
+				background var(--sco-main)
+				transition .3s
+				box-shadow var(--sco-shadow-main)
+
+	.menus_item
+		&:hover
+			& >
+				a.site-page
+					+minWidth768()
+						color var(--sco-white) !important
+						background var(--sco-main)
+						transition .3s
+						box-shadow var(--sco-shadow-main)
+
+	#site-name
+		i
+			+maxWidth768()
+				color var(--sco-fontcolor)
+
+.error 
+	#nav 
+		a 
+			&:hover 
+				background var(--sco-main)
+
+		#site-name
+			i
+				+maxWidth768()
+					color var(--sco-fontcolor)
+
+#search-mask 
+	backdrop-filter blur(12px)
+	-webkit-backdrop-filter blur(12px)
+	transform translateZ(0)
+	background var(--sco-maskbgdeep)
+
+#algolia-search 
+	.search-dialog 
+		.ais-search-box 
+			padding-top 8px
+
+			input 
+				border-radius 8px !important
+				border var(--style-border)
+
+				&:focus 
+					border var(--style-border-hover)
+
+				&::placeholder 
+					opacity .6
+
+		.ais-hits--item 
+			&.algolia-hit-item 
+				padding-left 0
+				font-weight 700
+
+				a 
+					&:hover 
+						color var(--sco-hovertext)
+
+				&:before 
+					display none
+
+				em 
+					color var(--sco-theme)
+					font-style normal
+
+		.algolia-logo 
+			display none
+
+		.ais-pagination 
+			&.pagination 
+				margin .2rem 0 0
+
+				.ais-pagination--item 
+					&.current 
+						a 
+							border-radius 4px
+							background var(--sco-main)
+							color var(--sco-white)
+
+#algolia-input-panel 
+	margin-bottom 8px
+
+.search-dialog 
+	border-radius 12px !important
+	box-shadow var(--sco-shadow-lightblack)
+	background var(--sco-card-bg)
+	border var(--style-border)
+	transition .3s
+
+	&:hover 
+		border var(--style-border-hover)
+		box-shadow var(--sco-shadow-theme)
+
+.search-dialog__title 
+	font-weight 700
+	color var(--sco-main)
+
+#algolia-tips 
+	padding-top 12px
+	color var(--sco-secondtext)
+	right 0
+	margin auto
+
+	i 
+		font-size 22px
+
+.algolia-tips-text 
+	margin-left .4rem
+
+#algolia-search-results 
+	padding-top 8px
+
+#weblogo 
+	align-self center
+
+#menus 
+	& > div 
+		&.menus_items 
+			& > div 
+				& > a 
+					letter-spacing .3rem
+					padding-left .7rem
+					font-weight 700
+					padding-top 0
+					padding-bottom 0
+					height 35px
+					line-height 35px
+					border-radius 40px
+					
+#travellings_button 
+	display inline
+	padding 0 .4rem
+	transition .3s
+
+#page-name
+	+minWidth900()
+		align-items center
+		display flex
+		border-radius 12px
+		height 40px
+		position absolute
+		top 62px
+		left 0
+		right 0
+		margin auto
+		justify-content center
+		animation-timing-function ease-out
+		-webkit-animation-timing-function ease-out
+
+#page-name-mask
+	+minWidth900()
+		width 100%
+		height 100%
+		position absolute
+		overflow hidden
+		left 0
+
+.menus_item
+	&:hover
+		& >
+			a.site-page
+				+minWidth768()
+					color var(--sco-white) !important
+					background var(--sco-white-op)
+					transition .3s;
+					box-shadow var(--sco-shadow-main)
+
+.post-bg
+	#post-cover
+		+minWidth768()
+			min-height 15rem !important
+			height 70% !important
+			opacity 1 !important
+
+#post-info
+	.post-title
+		+minWidth1300()
+			width 1100px
+			font-size 2.6rem !important
+
+a.console_switchbutton
+	padding 4px 8px!important
+	cursor pointer
\ No newline at end of file
diff --git a/source/css/_mode/index.styl b/source/css/_mode/index.styl
index da8bcbd8..16298c60 100644
--- a/source/css/_mode/index.styl
+++ b/source/css/_mode/index.styl
@@ -39,3 +39,9 @@
 	--style-border-hover-always 1px solid var(--sco-theme)
 	--style-border-dashed 1px dashed var(--sco-theme-op)
 	--style-border-forever 2px solid var(--sco-lighttext)
+
+	#page-header
+		&.not-top-img
+			#nav
+				.darkmode_switchbutton
+					color var(--sco-yellow)
\ No newline at end of file
diff --git a/source/css/_page/equipment.styl b/source/css/_page/equipment.styl
index 2a0dddcd..8f9a2b51 100644
--- a/source/css/_page/equipment.styl
+++ b/source/css/_page/equipment.styl
@@ -22,10 +22,10 @@
   min-height 400px
   position relative
 
-  @media screen and (max-width: 1200px)
+  +maxWidth1200()
     width calc(50% - 12px)
 
-  @media screen and (max-width: 768px)
+  +maxWidth768()
     width 100%
 
 .equipment-item-content-item-info
diff --git a/source/css/_post/commentBarrage.styl b/source/css/_post/commentBarrage.styl
index ec3d6baa..10e2635a 100644
--- a/source/css/_post/commentBarrage.styl
+++ b/source/css/_post/commentBarrage.styl
@@ -11,8 +11,7 @@
   transition all 0.3s ease 0s
   user-select none
 
-maxWidth768()
-  .comment-barrage
+  +maxWidth768()
     display none !important
 
 .comment-barrage-item
diff --git a/source/css/main.css b/source/css/main.css
index 23acb4b0..68486b1f 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -7114,6 +7114,17 @@ blockquote p {
     background: var(--sco-maskbg)
 }
 
+@media screen and (max-width: 768px) {
+    #sidebar #sidebar-menus .menus_items li .site-page:hover {
+      background: var(--sco-main);
+      color: var(--sco-white)
+    }
+  
+    #sidebar #sidebar-menus .menus_items li .site-page span:hover {
+      color: var(--sco-white)
+    }
+}
+
 #article-container img {
     border-radius: 12px;
     margin-bottom: .5rem;

From cd0bd1a30db3d32f9160ccbeadd9fad1e5b528fb Mon Sep 17 00:00:00 2001
From: yife68 <2714344056@qq.com>
Date: Sun, 19 Nov 2023 13:44:08 +0800
Subject: [PATCH 21/43] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/partial/compoment/nav/right.ejs |  2 +-
 source/css/_layout/header.styl         | 10 ++++++++--
 source/css/_mode/index.styl            |  7 ++++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/layout/partial/compoment/nav/right.ejs b/layout/partial/compoment/nav/right.ejs
index 0365f423..88261182 100755
--- a/layout/partial/compoment/nav/right.ejs
+++ b/layout/partial/compoment/nav/right.ejs
@@ -37,6 +37,6 @@
 </div>
 <div id="toggle-menu">
     <a class="site-page">
-        <i class="scoicon sco-menu-line" style="font-size: 1rem;"></i>
+        <i class="scoicon sco-menu-line"></i>
     </a>
 </div>
\ No newline at end of file
diff --git a/source/css/_layout/header.styl b/source/css/_layout/header.styl
index 0e0727e9..60040961 100644
--- a/source/css/_layout/header.styl
+++ b/source/css/_layout/header.styl
@@ -435,6 +435,9 @@
 		padding .1rem 0 0 .3rem
 		vertical-align top
 
+		+maxWidth768()
+			display inline-block !important
+
 		&:hover 
 			color var(--sco-white)
 
@@ -479,7 +482,6 @@
 			padding 0 12px
 
 			+maxWidth768()
-				color var(--sco-white)
 				transition .1s
 
 			+minWidth900()
@@ -1436,4 +1438,8 @@ i
 
 a.console_switchbutton
 	padding 4px 8px!important
-	cursor pointer
\ No newline at end of file
+	cursor pointer
+
+#nav-console
+	+maxWidth768()
+		display none
\ No newline at end of file
diff --git a/source/css/_mode/index.styl b/source/css/_mode/index.styl
index 16298c60..3b5a82b0 100644
--- a/source/css/_mode/index.styl
+++ b/source/css/_mode/index.styl
@@ -44,4 +44,9 @@
 		&.not-top-img
 			#nav
 				.darkmode_switchbutton
-					color var(--sco-yellow)
\ No newline at end of file
+					color var(--sco-yellow)
+
+	a
+		&.darkmode_switchbutton
+			background var(--sco-orange) !important
+			color var(--sco-white) !important
\ No newline at end of file

From f24bbe3bb8ba7c21c1e5c172d480bdb6b281c8be Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sun, 19 Nov 2023 23:52:26 +0800
Subject: [PATCH 22/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

拆解main.css
---
 _config.yml                            |     2 +
 source/css/_comment/index.styl         |   134 +
 source/css/_comment/twikoo.styl        |   535 +
 source/css/_extra/aplayer.styl         |    40 +
 source/css/_extra/rightmenu.styl       |    97 +
 source/css/_global/function.styl       |    16 +
 source/css/_layout/articleSort.styl    |   149 +
 source/css/_layout/aside.styl          |  1256 +++
 source/css/_layout/base.styl           |   300 +
 source/css/_layout/footer.styl         |   383 +
 source/css/_layout/header.styl         |  2829 +++---
 source/css/_layout/index.styl          |   213 +
 source/css/_layout/layout.styl         |    95 +
 source/css/_layout/sidebar.styl        |   282 +
 source/css/_page/about.styl            |  1067 ++
 source/css/_page/error.styl            |   107 +
 source/css/_page/homeTop.styl          |   810 ++
 source/css/_page/homepage.styl         |     3 -
 source/css/_page/moment.styl           |   138 +-
 source/css/_post/highlight.styl        |   103 +
 source/css/_post/index.styl            |   650 ++
 source/css/_post/pagination.styl       |   467 +
 source/css/_post/postContent.styl      |  1039 ++
 source/css/_post/relatedPost.styl      |   178 +
 source/css/_post/reward.styl           |   236 +
 source/css/_search/algolia-search.styl |     3 +
 source/css/index.styl                  |    13 +-
 source/css/main.css                    | 11966 +++--------------------
 source/js/main.js                      |   129 +-
 29 files changed, 11309 insertions(+), 11931 deletions(-)
 create mode 100644 source/css/_comment/index.styl
 create mode 100644 source/css/_comment/twikoo.styl
 create mode 100644 source/css/_extra/aplayer.styl
 create mode 100644 source/css/_extra/rightmenu.styl
 create mode 100644 source/css/_layout/articleSort.styl
 create mode 100644 source/css/_layout/aside.styl
 create mode 100644 source/css/_layout/base.styl
 create mode 100644 source/css/_layout/footer.styl
 create mode 100644 source/css/_layout/index.styl
 create mode 100644 source/css/_layout/layout.styl
 create mode 100644 source/css/_layout/sidebar.styl
 create mode 100644 source/css/_page/about.styl
 create mode 100644 source/css/_page/error.styl
 create mode 100644 source/css/_page/homeTop.styl
 delete mode 100644 source/css/_page/homepage.styl
 create mode 100644 source/css/_post/highlight.styl
 create mode 100644 source/css/_post/index.styl
 create mode 100644 source/css/_post/pagination.styl
 create mode 100644 source/css/_post/postContent.styl
 create mode 100644 source/css/_post/relatedPost.styl
 create mode 100644 source/css/_post/reward.styl

diff --git a/_config.yml b/_config.yml
index 5c7f57c4..9246f736 100755
--- a/_config.yml
+++ b/_config.yml
@@ -364,6 +364,8 @@ thirdparty:
 # 评论
 comment:
   enable: false
+  type: 'twikoo'
+  # 评论系统
   twikoo:
     envId: https://twikoo.sondy.top
     lang: 'zh-CN'
diff --git a/source/css/_comment/index.styl b/source/css/_comment/index.styl
new file mode 100644
index 00000000..094f146f
--- /dev/null
+++ b/source/css/_comment/index.styl
@@ -0,0 +1,134 @@
+#post-comment .comment-head .comment-headline {
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: 700;
+  font-size: 20px
+}
+
+#post-comment .comment-head #comment-switch {
+  display: inline-block;
+  float: right;
+  margin: .1rem auto 0;
+  padding: .2rem .8rem;
+  width: max-content;
+  border-radius: 5px;
+  background: #f6f8fa
+}
+
+#post-comment .comment-head #comment-switch .first-comment {
+  color: #307af6
+}
+
+#post-comment .comment-head #comment-switch .second-comment {
+  color: #ff7242
+}
+
+#post-comment .comment-head #comment-switch .switch-btn {
+  position: relative;
+  display: inline-block;
+  margin: -4px .4rem 0;
+  width: 42px;
+  height: 22px;
+  border-radius: 34px;
+  background-color: #307af6;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: all .4s ease 0s
+}
+
+#post-comment .comment-head #comment-switch .switch-btn::before {
+  position: absolute;
+  bottom: 4px;
+  left: 4px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background-color: #fff;
+  content: "";
+  transition: all .4s ease 0s
+}
+
+#post-comment .comment-head #comment-switch .switch-btn.move {
+  background-color: #ff7242
+}
+
+#post-comment .comment-head #comment-switch .switch-btn.move::before {
+  transform: translateX(20px)
+}
+
+#post-comment .comment-wrap > div:nth-child(2) {
+  display: none
+}
+
+.post-comment {
+  background: var(--sco-card-bg)
+}
+
+div#post-comment {
+  margin-top: 2rem
+}
+
+#post-comment > div.comment-head > div.comment-privacy {
+  display: block;
+  justify-content: space-between;
+  margin-left: 8px;
+  font-size: 13px
+}
+
+#post-comment > div.comment-head > div.comment-privacy a:hover {
+  color: var(--sco-main)
+}
+
+#post-comment .comment-tips {
+  background-color: rgba(103, 194, 58, .9);
+  border: var(--style-border-always);
+  border-color: var(--sco-green);
+  color: var(--sco-white);
+  border-radius: 8px 8px 0 0;
+  padding: 8px 12px;
+  margin-top: .5rem;
+  display: none;
+  width: 100%;
+  position: absolute;
+  top: 50px;
+  z-index: 1000;
+  opacity: 1;
+  transition: .3s
+}
+
+#post-comment .comment-tips:hover {
+  opacity: 0
+}
+
+#post-comment .comment-tips.show {
+  display: flex;
+  font-weight: 700
+}
+
+#post-comment blockquote {
+  background: var(--sco-secondbg);
+  border: var(--style-border);
+  box-shadow: none;
+  margin: 0 0 .5rem;
+  font-size: .6rem;
+  color: var(--sco-secondtext);
+  border-radius: 8px
+}
+
+#post-comment .comment-head {
+  font-size: .8em !important;
+  margin-bottom: .5rem;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  position: relative
+}
+
+.comment-randomInfo {
+  margin-left: auto;
+  font-size: 13px
+}
+
+.comment-randomInfo:hover a {
+  color: var(--sco-theme)
+}
\ No newline at end of file
diff --git a/source/css/_comment/twikoo.styl b/source/css/_comment/twikoo.styl
new file mode 100644
index 00000000..2e1f9661
--- /dev/null
+++ b/source/css/_comment/twikoo.styl
@@ -0,0 +1,535 @@
+#twikoo .tk-row .tk-col {
+  flex-direction: column-reverse !important
+}
+
+#twikoo > div.tk-comments > div.tk-comments-container > div.tk-comments-title > span:nth-child(1) {
+  display: none !important
+}
+
+#twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > a {
+  display: none !important
+}
+
+#twikoo {
+  z-index: 102
+}
+
+.tk-meta {
+  display: flex;
+  align-items: center
+}
+
+.twikoo-info {
+  color: var(--sco-secondtext)
+}
+
+.tk-action .tk-action-link:first-child {
+  display: none
+}
+
+.tk-action-link {
+  color: var(--sco-lighttext) !important;
+  cursor: pointer;
+  -webkit-user-select: none
+}
+
+.tk-action-icon svg {
+  fill: var(--sco-lighttext) !important
+}
+
+.tk-content img {
+  max-height: 1100px !important;
+  max-width: 100% !important;
+  border-radius: 12px
+}
+
+.tk-avatar {
+  width: 32px !important;
+  height: 32px !important;
+  box-shadow: var(--sco-shadow-border);
+  margin-right: 16px !important
+}
+
+.tk-avatar.tk-has-avatar {
+  width: 32px !important;
+  height: 32px !important;
+  border-radius: 32px !important
+}
+
+.tk-row .tk-avatar {
+  display: none
+}
+
+.tk-avatar .tk-avatar-img:hover {
+  transform: rotate(360deg)
+}
+
+img.tk-avatar-img {
+  height: 32px !important;
+  border-radius: 32px;
+  border: var(--style-border-always)
+}
+
+.el-input--small .el-input__inner {
+  padding: 8px
+}
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
+  content: '输入QQ号会自动获取昵称和头像'
+}
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
+  content: '收到回复将会发送到你的邮箱'
+}
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
+  content: '可以通过昵称访问你的网站'
+}
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before {
+  display: block;
+  animation: commonTipsIn .3s
+}
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
+  display: block;
+  animation: commonTriangleIn .3s
+}
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
+  display: none;
+  position: absolute;
+  top: -60px;
+  white-space: nowrap;
+  border-radius: 10px;
+  left: 50%;
+  transform: translate(-50%);
+  padding: 14px 18px;
+  background: #444;
+  color: #fff;
+  z-index: 100
+}
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
+  display: none;
+  content: '';
+  position: absolute;
+  border: 12px solid transparent;
+  border-top-color: #444;
+  left: 50%;
+  transform: translate(-50%, -46px)
+}
+
+.tk-nick {
+  font-size: 1rem !important;
+  line-height: 32px
+}
+
+.el-input-group__append, .el-input-group__prepend {
+  background-color: var(--sco-card-bg) !important;
+  color: var(--sco-fontcolor) !important;
+  border-color: var(--sco-card-border) !important;
+  border: var(--style-border-always) !important;
+  font-weight: 700
+}
+
+.el-input__inner {
+  background: var(--sco-secondbg) !important;
+  border: 1px solid var(--sco-card-border) !important;
+  color: var(--sco-fontcolor) !important;
+  padding-left: 8px
+}
+
+.page .el-input__inner {
+  background: var(--sco-card-bg) !important
+}
+
+.el-input__inner:focus {
+  border: 1px solid var(--sco-main) !important
+}
+
+.el-textarea__inner {
+  background: var(--sco-secondbg) !important;
+  color: var(--sco-fontcolor) !important;
+  border-radius: 12px !important;
+  min-height: 100px !important;
+  padding: 16px 16px 40px 16px !important;
+  border: var(--style-border-always) !important;
+  box-shadow: none !important
+}
+
+@media screen and (max-width: 768px) {
+  .el-textarea__inner {
+    border-radius: 4px !important;
+    background: var(--sco-card-bg) !important
+  }
+}
+
+#page .el-textarea__inner {
+  background: var(--sco-card-bg) !important;
+  box-shadow: var(--sco-shadow-border)
+}
+
+.el-textarea__inner:focus {
+  border: var(--style-border-hover-always) !important;
+  box-shadow: var(--sco-shadow-main)
+}
+
+#page .tk-meta-input .el-input {
+  box-shadow: var(--sco-shadow-border)
+}
+
+.el-loading-mask {
+  background-color: none !important
+}
+
+.tk-tag {
+  margin-left: 4px
+}
+
+.tk-tag-green {
+  border-radius: 4px !important;
+  border: 0 solid #e1f3d8 !important;
+  font-size: .5rem !important
+}
+
+[data-theme=dark] .tk-tag-green {
+  background-color: #67c23a21 !important
+}
+
+.tk-tag-yellow {
+  border-radius: 4px !important;
+  border: 0 solid #e1f3d8 !important;
+  font-size: .5rem !important
+}
+
+[data-theme=dark] .tk-tag-green {
+  background-color: #c0c23a21 !important
+}
+
+.tk-tag-red {
+  border-radius: 4px !important;
+  border: 0 solid #f3d8d8 !important;
+  font-size: .5rem !important
+}
+
+[data-theme=dark] .tk-tag-red {
+  background-color: #c23a3a21 !important
+}
+
+.el-button {
+  background-color: var(--sco-fontcolor) !important;
+  border: 0 solid var(--sco-main) !important;
+  color: var(--sco-background) !important;
+  border-radius: 8px !important
+}
+
+.el-button:hover {
+  background: var(--sco-main) !important;
+  color: var(--sco-white) !important
+}
+
+.el-button.tk-preview {
+  display: none !important
+}
+
+button.el-button.tk-cancel.el-button--default.el-button--small {
+  background: var(--sco-secondbg) !important;
+  border-radius: 8px !important;
+  color: var(--sco-fontcolor) !important
+}
+
+.tk-submit-action-icon.__markdown {
+  display: none
+}
+
+.tk-comments .el-button--primary {
+  border-color: var(--sco-fontcolor) !important;
+  color: var(--sco-card-bg) !important;
+  border-radius: 4px !important;
+  box-shadow: var(--sco-shadow-black);
+  transition: .3s;
+  width: 5rem;
+  position: absolute;
+  top: -53px;
+  right: 0;
+  margin-left: .5rem !important;
+  height: 32px
+}
+
+.tk-comments .el-button--primary.is-disabled, .tk-comments .el-button--primary.is-disabled:active, .tk-comments .el-button--primary.is-disabled:focus, .tk-comments .el-button--primary.is-disabled:hover {
+  opacity: .2
+}
+
+.tk-row-actions-start {
+  position: absolute;
+  top: -100px;
+  left: 17px
+}
+
+@media screen and (max-width: 768px) {
+  .tk-submit .el-button--primary {
+    width: 5rem;
+    height: 132px;
+    top: -161px
+  }
+
+  .tk-row-actions-start {
+    top: -210px
+  }
+}
+
+.tk-comments-title {
+  position: absolute;
+  bottom: 0;
+  left: 0
+}
+
+.tk-extras {
+  margin-top: .5rem;
+  padding-bottom: .5rem
+}
+
+.tk-icon.__comments:first-child {
+  display: none
+}
+
+.tk-icon.__comments {
+  margin-left: 0 !important
+}
+
+.tk-row.actions {
+  margin-bottom: .5rem !important;
+  margin-left: 0 !important;
+  margin-top: .5rem !important;
+  justify-content: space-around !important
+}
+
+.tk-meta-input {
+  position: relative !important;
+  margin-top: .8rem;
+  width: calc(100% - 5.5rem)
+}
+
+.tk-content .tk-owo-emotion {
+  width: 3em;
+  margin: 0 2px 0 2px
+}
+
+.OwO .OwO-body .OwO-bar .OwO-packages li {
+  line-height: 45px !important;
+}
+
+.OwO .OwO-body {
+  z-index: 102;
+  width: 500px
+}
+
+#owo-big {
+  position: fixed;
+  align-items: center;
+  background-color: var(--sco-card-bg);
+  border: var(--style-border-always);
+  border-radius: 10px;
+  z-index: 9999;
+  display: none;
+  transform: translate(0, -105%);
+  overflow: hidden;
+  animation: owoIn .3s cubic-bezier(.42, 0, .3, 1.11);
+  padding: 1rem
+}
+
+#owo-big img {
+  width: 100%
+}
+
+.tk-owo-emotion, .twikoo .OwO-item img {
+  pointer-events: none
+}
+
+@media screen and (max-width: 768px) {
+  .OwO .OwO-body {
+    width: 300px
+  }
+}
+
+.tk-extra {
+  background: var(--sco-card-bg);
+  border: var(--style-border-always);
+  padding: 1px 5px 1px 2px;
+  border-radius: 8px;
+  margin-right: 4px !important;
+  color: var(--sco-secondtext) !important;
+  display: inline !important;
+  margin-top: 6px !important;
+  font-size: .5rem
+}
+
+.tk-extra .tk-icon {
+  display: none
+}
+
+.tk-expand {
+  background: var(--sco-card-bg) !important;
+  color: var(--sco-fontcolor) !important;
+  border: var(--style-border-always);
+  box-shadow: var(--sco-shadow-border);
+  border-radius: 12px;
+  -webkit-user-select: none
+}
+
+.tk-expand:hover {
+  background: var(--sco-theme) !important;
+  color: var(--sco-white) !important
+}
+
+.tk-time {
+  color: var(--sco-secondtext) !important;
+  font-size: .6rem;
+  margin-left: .5rem
+}
+
+.tk-comments-container > .tk-comment {
+  margin-top: 0 !important;
+  margin-bottom: .5rem !important;
+  background: var(--sco-card-bg);
+  transition: .3s;
+  border-radius: 12px;
+  padding: .5rem 0 0;
+  border: none;
+  border-top: var(--style-border-dashed)
+}
+
+#page .tk-comments-container > .tk-comment {
+  padding: 1rem 1rem 1.5rem;
+  border: var(--style-border);
+  border-top: var(--style-border);
+  box-shadow: var(--sco-shadow-border)
+}
+
+@media screen and (max-width: 768px) {
+  .tk-comments-container > .tk-comment {
+    padding: 1rem;
+    border: var(--style-border-always);
+    box-shadow: var(--sco-shadow-border)
+  }
+
+  .tk-icon.__comments {
+    left: .5rem
+  }
+}
+
+.tk-icon {
+  position: absolute
+}
+
+.tk-comments-no {
+  display: none !important
+}
+
+.tk-comments-container {
+  min-height: 0 !important;
+  margin-top: .5rem
+}
+
+.tk-replies > .tk-comment {
+  background: var(--sco-card-bg);
+  border-top: var(--style-border-dashed);
+  border-radius: 12px;
+  transition: .3s;
+  padding: 1rem 0 0;
+  margin-top: 0
+}
+
+.tk-content p {
+  margin: 0 !important
+}
+
+.tk-replies .tk-content span:first-child {
+  font-size: .5rem;
+  color: var(--sco-secondtext)
+}
+
+.tk-meta-input .el-input .el-input-group__prepend {
+  -webkit-user-select: none
+}
+
+@media screen and (max-width: 768px) {
+  .tk-meta-input .el-input .el-input-group__prepend {
+    padding: 0 .3rem !important
+  }
+
+  .tk-meta-input {
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    position: inherit !important
+  }
+
+  .tk-meta-input .el-input {
+    margin-left: 0 !important;
+    width: 100% !important;
+    margin-bottom: 8px
+  }
+
+  .tk-icon {
+    position: absolute;
+    right: 0
+  }
+}
+
+.OwO .OwO-body {
+  border: var(--style-border-always) !important;
+  border-radius: 8px !important;
+  overflow: hidden;
+  background-color: var(--sco-maskbg) !important;
+  backdrop-filter: saturate(180%) blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transform: translateZ(0)
+}
+
+.OwO .OwO-body .OwO-bar {
+  border-top: none !important
+}
+
+.OwO .OwO-body .OwO-items .OwO-item:hover {
+  box-shadow: var(--sco-shadow-lightblack) !important;
+  border-radius: 8px
+}
+
+#twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > div > div.tk-action-icon.OwO.OwO-open > div.OwO-body > div > ul > li > span {
+  line-height: 48px;
+  font-size: 28px
+}
+
+.OwO .OwO-body .OwO-bar .OwO-packages li {
+  margin-right: 0 !important;
+  height: 48px;
+  transition: .3s
+}
+
+.OwO .OwO-body .OwO-bar .OwO-packages li:hover {
+  transition: .3s
+}
+
+.OwO-packages {
+  background: var(--sco-background);
+  padding-left: 8px !important
+}
+
+.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active {
+  background: var(--sco-secondbg) !important
+}
+
+.OwO .OwO-body .OwO-items-show {
+  margin: 12px 8px !important;
+  min-height: 197px
+}
+
+.tk-replies .tk-content {
+  margin-top: 0 !important
+}
+
+.el-input-group--prepend .el-input__inner, .el-input-group__append {
+  border-left-width: 0 !important
+}
\ No newline at end of file
diff --git a/source/css/_extra/aplayer.styl b/source/css/_extra/aplayer.styl
new file mode 100644
index 00000000..3d868619
--- /dev/null
+++ b/source/css/_extra/aplayer.styl
@@ -0,0 +1,40 @@
+#article-container .aplayer {
+  margin: 0 0 1rem
+}
+
+#article-container .aplayer ol, #article-container .aplayer ul {
+  margin: 0;
+  padding: 0
+}
+
+#article-container .aplayer ol li, #article-container .aplayer ul li {
+  margin: 0;
+  padding: 0 15px
+}
+
+#article-container .aplayer ol li::before, #article-container .aplayer ul li::before {
+  content: none
+}
+
+.aplayer .aplayer-list ol {
+  backdrop-filter: blur(1px);
+  -webkit-backdrop-filter: blur(1px);
+  transform: translateZ(0)
+}
+
+.aplayer .aplayer-lrc:after {
+  display: none !important
+}
+
+.aplayer.aplayer-withlrc.aplayer-withlist {
+  border-radius: 12px
+}
+
+#article-container .aplayer {
+  border-radius: 12px;
+  min-height: 90px;
+  background: var(--sco-card-bg);
+  border: var(--style-border);
+  box-shadow: var(--sco-shadow-border)
+}
+
diff --git a/source/css/_extra/rightmenu.styl b/source/css/_extra/rightmenu.styl
new file mode 100644
index 00000000..2e17793d
--- /dev/null
+++ b/source/css/_extra/rightmenu.styl
@@ -0,0 +1,97 @@
+#rightMenu {
+  display: none;
+  position: fixed;
+  padding: 0 .25rem;
+  width: 9rem;
+  height: fit-content;
+  top: 10%;
+  left: 10%;
+  background-color: var(--sco-maskbgdeep);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  transform: translateZ(0);
+  color: var(--sco-fontcolor);
+  border-radius: 12px;
+  z-index: 99994;
+  border: var(--style-border);
+  user-select: none;
+  box-shadow: var(--sco-shadow-black);
+  transition: border .3s
+}
+
+#rightMenu:hover {
+  border: var(--style-border-hover);
+  box-shadow: var(--sco-shadow-theme)
+}
+
+#rightMenu .rightMenu-group {
+  padding: .35rem .3rem;
+  transition: .3s
+}
+
+#rightMenu .rightMenu-line {
+  border-top: 1px dashed var(--sco-theme-op)
+}
+
+#rightMenu .rightMenu-group.rightMenu-small {
+  display: flex;
+  justify-content: space-between
+}
+
+#rightMenu .rightMenu-group .rightMenu-item {
+  border-radius: 8px;
+  transition: .3s;
+  cursor: pointer
+}
+
+#rightMenu .rightMenu-line .rightMenu-item {
+  margin: .25rem 0;
+  padding: .25rem 0
+}
+
+#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
+  display: flex
+}
+
+#rightMenu .rightMenu-group .rightMenu-item:hover {
+  background-color: var(--sco-main);
+  color: var(--sco-white);
+  box-shadow: var(--sco-shadow-main)
+}
+
+#rightMenu .rightMenu-group .rightMenu-item i {
+  display: inline-block;
+  text-align: center;
+  line-height: 1.5rem;
+  width: 1.5rem;
+  padding: 0 .25rem
+}
+
+#rightMenu .rightMenu-line .rightMenu-item i {
+  margin: 0 .25rem
+}
+
+#rightMenu .rightMenu-group .rightMenu-item span {
+  line-height: 1.5rem
+}
+
+.rightMenu-small .rightMenu-item {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+#rightmenu-mask {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: 0 0;
+  top: 0;
+  left: 0;
+  display: none;
+  margin: 0 !important;
+  z-index: 99993
+}
\ No newline at end of file
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
index 830837fc..54675d3c 100644
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -26,6 +26,14 @@ minWidth899()
 	@media screen and (min-width: 899px)
 		{block}
 
+maxWidth900()
+	@media screen and (max-width: 900px)
+		{block}
+
+minWidth900()
+	@media screen and (min-width: 900px)
+		{block}
+
 maxWidth1300()
 	@media screen and (max-width: 1300px)
 		{block}
@@ -34,6 +42,14 @@ minWidth1300()
 	@media screen and (min-width: 1300px)
 		{block}
 
+maxWidth1400()
+	@media screen and (max-width: 1400px)
+		{block}
+
+minWidth1400()
+	@media screen and (min-width: 1400px)
+		{block}
+
 maxWidth1200()
 	@media screen and (max-width: 1200px)
 		{block}
diff --git a/source/css/_layout/articleSort.styl b/source/css/_layout/articleSort.styl
new file mode 100644
index 00000000..27363338
--- /dev/null
+++ b/source/css/_layout/articleSort.styl
@@ -0,0 +1,149 @@
+.article-sort-title:before {
+  display: none
+}
+
+.article-sort-title:after {
+  display: none
+}
+
+.article-sort-title {
+  margin-left: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  font-weight: 700;
+  font-size: 2em
+}
+
+.article-sort-title sup {
+  margin-left: 4px;
+  font-size: 16px;
+  font-weight: 700;
+  opacity: .4;
+  top: -1em
+}
+
+.article-sort-item-title {
+  line-height: 1.3;
+  -webkit-line-clamp: 1
+}
+
+@media screen and (max-width: 768px) {
+  .article-sort-item-title {
+    -webkit-line-clamp: 2
+  }
+}
+
+.article-sort .article-sort-item .article-sort-item-img {
+  border-radius: 12px;
+  min-width: 151px;
+  min-height: 80px;
+  background: var(--sco-secondbg);
+  -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+}
+
+@media screen and (max-width: 768px) {
+  .article-sort .article-sort-item .article-sort-item-img {
+    min-width: 80px
+  }
+}
+
+.article-sort-item:before {
+  display: none
+}
+
+.article-sort {
+  border: none
+}
+
+.article-sort {
+  margin-left: 0;
+  padding-left: 0
+}
+
+.article-sort-item {
+  margin: 0 0 1rem 0;
+  overflow: hidden;
+  border-radius: 12px
+}
+
+@media screen and (max-width: 768px) {
+  .article-sort-item-info a {
+    white-space: inherit !important
+  }
+}
+
+.article-sort-item.year {
+  font-size: .8rem;
+  color: var(--sco-secondtext);
+  margin-bottom: .2rem
+}
+
+.article-sort-item-img img:hover {
+  transform: scale(1)
+}
+
+.article-sort-item-info {
+  padding: 0 .8rem;
+  display: flex;
+  flex-direction: column
+}
+
+.article-sort-item-time {
+  order: 1;
+  margin-top: 4px;
+  color: var(--sco-secondtext)
+}
+
+.article-sort-item-title {
+  order: 0;
+  font-weight: 700
+}
+
+.article-sort-item-title:hover {
+  transform: translateX(0);
+  color: var(--sco-hovertext)
+}
+
+.article-sort-item-info a {
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.article-sort-item-info-more {
+  display: flex;
+  font-size: .7rem;
+  margin-right: auto
+}
+
+.article-sort-item-time {
+  display: none
+}
+
+.article-sort-item-tags {
+  margin-top: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  width: 100%;
+  font-size: .7rem
+}
+
+.article-sort-item-tags a {
+  color: var(--sco-fontcolor);
+  transition: .3s
+}
+
+.article-sort-item-tags a:hover {
+  color: var(--sco-theme);
+  transition: .3s
+}
+
+.article-sort-item-tags a .tags-punctuation {
+  font-size: 12px;
+  margin-right: 1px
+}
+
+
+
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
new file mode 100644
index 00000000..b18128c3
--- /dev/null
+++ b/source/css/_layout/aside.styl
@@ -0,0 +1,1256 @@
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span, #aside-content .card-info .card-info-data > .card-info-data-item a .headline, #pagination .next_info, #pagination .prev_info, #sidebar #sidebar-menus .menus_items .site-page, #sidebar #sidebar-menus .site-data .data-item .data-item-link > a > div, .flink#article-container .flink-list > .flink-list-item a .flink-item-desc, .flink#article-container .flink-list > .flink-list-item a .flink-item-name, .limit-one-line {
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+#aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > .title, #error-wrap .error-content .error-info .error_subtitle, #post-info .post-title, #recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts > .recent-post-item > .recent-post-info > .content, .article-sort-item-title, .limit-more-line, .relatedPosts > .relatedPosts-list .content .title, figure.gallery-group .gallery-group-name, figure.gallery-group p {
+  display: -webkit-box;
+  -webkit-box-orient: vertical
+}
+
+#aside-content .aside-list > .aside-list-item .content > .title {
+  overflow: hidden
+}
+
+#aside-content .author-info__description, #aside-content .author-info__name, #site-name, #site-subtitle, #site-title {
+  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
+}
+
+@media screen and (min-width: 900px) {
+  #aside-content {
+    padding-left: 15px
+  }
+}
+
+@media screen and (max-width: 900px) {
+  #aside-content {
+    width: 100%
+  }
+}
+
+@media screen and (max-width: 900px) {
+  #aside-content > .card-widget:first-child {
+    margin-top: 1rem
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #aside-content .card-widget:not(#card-toc) {
+    display: none !important;
+  }
+}
+
+#aside-content .card-info img.avatar-img {
+  width: 118px;
+  right: 0;
+  top: 0;
+  border-radius: 500px;
+  position: absolute;
+  opacity: 1;
+  transition: .3s;
+
+}
+
+.author-info__top-group {
+  display: flex;
+  height: 28px;
+  width: 100%
+}
+
+#aside-content .card-info .author-info__description {
+  margin-top: -.3rem
+}
+
+#aside-content .card-info .card-info-data {
+  display: table;
+  margin: .7rem 0 .2rem;
+  width: 100%;
+  table-layout: fixed
+}
+
+#aside-content .card-info .card-info-data > .card-info-data-item {
+  display: table-cell
+}
+
+#aside-content .card-info .card-info-data > .card-info-data-item:hover {
+  background: #000;
+  border-radius: 5px
+}
+
+#aside-content .card-info .card-info-data > .card-info-data-item a .headline {
+  color: var(--sco-fontcolor);
+  font-size: 1em
+}
+
+#aside-content .card-info .card-info-data > .card-info-data-item a .length-num {
+  margin-top: -.3rem;
+  color: var(--text-highlight-color);
+  font-size: 1.4em
+}
+
+#aside-content .card-info .card-info-social-icons {
+  margin: .3rem 0 -.3rem
+}
+
+#aside-content .card-info .card-info-social-icons .social-icon {
+  margin: 0 .5rem;
+  color: var(--sco-fontcolor);
+  font-size: 1.4em;
+  cursor: pointer;
+  display: flex
+}
+
+#aside-content .card-info .card-info-social-icons i {
+  transition: all .3s ease 0s;
+  padding: 8px;
+  border-radius: 32px
+}
+
+#aside-content .card-info .card-info-social-icons i:hover {
+  transform: rotate(540deg);
+  background-color: #000;
+  cursor: pointer
+}
+
+#aside-content .card-info #card-info-btn {
+  display: block;
+  margin-top: .7rem;
+  background-color: var(--btn-bg);
+  color: var(--btn-color);
+  text-align: center;
+  line-height: 2.4
+}
+
+#aside-content .card-info #card-info-btn span {
+  padding-left: .5rem
+}
+
+@media screen and (min-width: 900px) {
+  #aside-content .sticky_layout {
+    position: sticky;
+    top: 20px;
+    transition: top .3s ease 0s
+  }
+}
+
+#aside-content .card-tag-cloud a {
+  display: inline-block;
+  padding: 0 .3rem
+}
+
+#aside-content .card-tag-cloud a:hover {
+  background-color: #fff;
+  cursor: pointer;
+  border-radius: 5px;
+  transform: scale(1.1);
+  color: #307af6 !important
+}
+
+#aside-content .aside-list > span {
+  display: block;
+  margin-bottom: .5rem;
+  text-align: center
+}
+
+#aside-content .aside-list > .aside-list-item:last-child {
+  padding-bottom: 0
+}
+
+#aside-content .aside-list > .aside-list-item .thumbnail {
+  overflow: hidden;
+  width: 4.2em;
+  height: 4.2em
+}
+
+#aside-content .aside-list > .aside-list-item .thumbnail > img {
+  width: 100%;
+  height: 100%;
+  transition: all .6s ease 0s;
+  object-fit: cover
+}
+
+#aside-content .aside-list > .aside-list-item .thumbnail > img:hover {
+  transform: scale(1.1)
+}
+
+#aside-content .aside-list > .aside-list-item .content {
+  -webkit-box-flex: 1;
+  flex: 1 1 0;
+  padding-left: 10px;
+  word-break: break-all;
+  display: flex;
+  flex-direction: column
+}
+
+#aside-content .aside-list > .aside-list-item .content > .name {
+  -webkit-line-clamp: 1
+}
+
+#aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > time {
+  display: block;
+  color: #858585;
+  font-size: 85%
+}
+
+#aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .title {
+  color: var(--sco-fontcolor);
+  font-size: 95%;
+  line-height: 1.3;
+  -webkit-line-clamp: 2
+}
+
+#aside-content .aside-list > .aside-list-item .content > .comment:hover, #aside-content .aside-list > .aside-list-item .content > .title:hover {
+  color: #307af6
+}
+
+#aside-content .aside-list > .aside-list-item.no-cover {
+  min-height: 4.4em
+}
+
+#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
+  margin: 0;
+  padding: 0;
+  list-style: none
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
+  display: inline-block;
+  padding: .15rem .5rem;
+  width: 100%;
+  color: var(--sco-fontcolor);
+  transition: all .4s ease 0s;
+  border-radius: 5px
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
+  padding: .15rem .85rem;
+  background-color: #fff;
+  color: #427bee;
+  border-radius: 5px
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span {
+  display: inline-block;
+  vertical-align: bottom
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
+  width: 80%
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
+  width: 20%;
+  text-align: right
+}
+
+#aside-content .card-categories .card-category-list.child {
+  padding: 0 0 0 .8rem
+}
+
+#aside-content .card-categories .card-category-list > .parent > a .card-category-list-name {
+  width: 70% !important
+}
+
+#aside-content .card-categories .card-category-list > .parent > a .card-category-list-count {
+  width: calc(30% - 20px);
+  text-align: right
+}
+
+#aside-content .card-categories .card-category-list > .parent i {
+  float: right;
+  margin-right: -.35rem;
+  padding: .35rem;
+  transition: transform .3s ease 0s;
+  transform: rotate(0)
+}
+
+#aside-content .card-categories .card-category-list > .parent i.expand {
+  transform: rotate(-90deg)
+}
+
+#aside-content .card-webinfo .webinfo .webinfo-item {
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  padding: .1rem .5rem 0
+}
+
+#aside-content .card-webinfo .webinfo .webinfo-item div:first-child {
+  -webkit-box-flex: 1;
+  flex: 1 1 0;
+  padding-right: 1rem
+}
+
+@media screen and (min-width: 901px) {
+  #aside-content #card-toc {
+    right: 0 !important
+  }
+}
+
+@media screen and (max-width: 900px) {
+  #aside-content #card-toc {
+    position: fixed;
+    right: -100%;
+    bottom: 30px;
+    z-index: 100;
+    max-height: calc(100% - 60px);
+    width: 300px;
+    opacity: 0;
+    transform-origin: right bottom
+  }
+}
+
+#aside-content #card-toc .toc-content {
+  overflow-y: auto;
+  max-height: calc(100vh - 300px)
+}
+
+@media screen and (max-width: 900px) {
+  #aside-content #card-toc .toc-content {
+    max-height: calc(100vh - 140px)
+  }
+}
+
+#aside-content #card-toc .toc-content .toc-child {
+  display: none
+}
+
+@media screen and (max-width: 900px) {
+  #aside-content #card-toc .toc-content .toc-child {
+    display: block !important
+  }
+}
+
+#aside-content #card-toc .toc-content .toc-item.active .toc-child {
+  display: block
+}
+
+#aside-content #card-toc .toc-content li, #aside-content #card-toc .toc-content ol {
+  list-style: none
+}
+
+#aside-content #card-toc .toc-content > ol {
+  padding: 0 !important
+}
+
+#aside-content #card-toc .toc-content ol {
+  margin: 0;
+  padding-left: .4rem
+}
+
+#aside-content #card-toc .toc-content .toc-link {
+  display: block;
+  padding-left: .3rem;
+  border-left: 3px solid transparent;
+  color: var(--toc-link-color);
+  transition: all .2s ease-in-out 0s
+}
+
+#aside-content #card-toc .toc-content .toc-link.active {
+  border-left-color: #0061cc;
+  background: #0079ff;
+  color: #fff
+}
+
+#aside-content #card-toc .toc-content::before {
+  position: absolute;
+  top: .6rem;
+  right: 1.2rem;
+  color: #a9a9a9;
+  content: attr(progress-percentage);
+  font-style: italic;
+  font-size: 1.2rem
+}
+
+#aside-content :only-child > .card-widget {
+  margin-top: 0
+}
+
+#aside-content .card-more-btn {
+  float: right;
+  color: inherit
+}
+
+#aside-content .card-more-btn:hover {
+  animation: 1s ease 0s infinite normal none running more-btn-move
+}
+
+#aside-content .card-info .card-info-data > .card-info-data-item {
+  transition: .3s
+}
+
+@media screen and (max-width: 1300px) {
+  #aside-content .sticky_layout {
+    top: 60px
+  }
+}
+
+#aside-content .sticky_layout {
+  top: 80px;
+  transition: top 0s
+}
+
+#aside-content .card-widget:hover {
+  box-shadow: var(--sco-shadow-border)
+}
+
+#aside-content #card-funds {
+  margin-bottom: 1rem;
+  min-height: 260px
+}
+
+#page-header.nav-visible + .layout > .aside-content > .sticky_layout {
+  top: 80px
+}
+
+#aside-content {
+  width: 300px
+}
+
+@media screen and (max-width: 1300px) {
+  #aside-content {
+    width: 300px;
+    animation: slide-in .6s .3s backwards
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  #aside-content {
+    display: none
+  }
+}
+
+#aside-content .aside-list > .aside-list-item .content > time {
+  display: none
+}
+
+#aside-content .aside-list > .aside-list-item .content > .title {
+  font-weight: 700;
+  padding: 2px 0
+}
+
+#aside-content .aside-list > .aside-list-item {
+  padding: 6px !important;
+  border-radius: 12px;
+  transition: .3s;
+  margin: 4px 0;
+  cursor: pointer;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center
+}
+
+#aside-content .aside-list > .aside-list-item:hover .thumbnail > img {
+  transform: scale(1)
+}
+
+#aside-content .aside-list > .aside-list-item:not(:last-child) {
+  border-bottom: 0 dashed var(--sco-background) !important
+}
+
+#aside-content .aside-list > .aside-list-item .thumbnail {
+  -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000);
+  border-radius: 8px;
+  border: var(--style-border)
+}
+
+#aside-content .aside-list > .aside-list-item:hover {
+  background: var(--sco-main);
+  color: var(--sco-white);
+  transition: .3s;
+  box-shadow: var(--sco-shadow-main)
+}
+
+#aside-content .aside-list > .aside-list-item:hover a {
+  color: var(--sco-white) !important
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
+  border-radius: 8px;
+  margin: 4px 0;
+  display: flex;
+  flex-direction: column;
+  align-content: space-between;
+  border: var(--style-border)
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
+  width: auto
+}
+
+#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap
+}
+
+a.card-archive-list-link-more {
+  color: var(--sco-white) !important;
+  background: var(--sco-card-btn-bg);
+  margin-top: 8px
+}
+
+.card-allinfo hr {
+  display: flex;
+  position: relative;
+  margin: 1rem 0;
+  border: 1px dashed var(--sco-theme-op)
+}
+
+.card-allinfo .item-headline {
+  display: none
+}
+
+span.card-archive-list-count {
+  width: auto;
+  text-align: left;
+  font-size: 1.1rem;
+  line-height: .9;
+  font-weight: 700
+}
+
+.card-archive-list-count-group {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
+  width: fit-content;
+  margin-left: 4px
+}
+
+.card-archive-list-count-unit {
+  width: auto;
+  text-align: left;
+  font-size: 14px;
+  font-weight: 700
+}
+
+.card-archive-list-date {
+  font-size: 14px;
+  opacity: .6
+}
+
+li.card-archive-list-item {
+  width: 100%;
+  flex: 0 0 48%
+}
+
+.card-category-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between
+}
+
+.card-category-list-item {
+  width: 45%
+}
+
+.card-category-list-count {
+  display: none !important
+}
+
+.card-category-list-name {
+  width: 100% !important;
+  text-align: center
+}
+
+.webinfo-item {
+  display: flex;
+  white-space: nowrap
+}
+
+.webinfo-item-title {
+  display: flex
+}
+
+.webinfo-item-title i {
+  line-height: 2;
+  margin-right: 6px;
+  width: 16px;
+  text-align: center;
+  font-size: 16px
+}
+
+@media screen and (min-width: 1300px) {
+  #aside-content {
+    padding-left: 1rem;
+    animation: slide-in .6s .3s backwards
+  }
+
+  #aside-content .sticky_layout {
+    top: calc(60px + 1rem)
+  }
+
+  #page-header.nav-visible + .layout > .aside-content > .sticky_layout {
+    top: calc(60px + 1rem)
+  }
+
+  [data-theme=dark] #aside-content > .card-widget.card-info {
+    border: var(--style-border)
+  }
+
+  .coverdiv {
+    height: 130%
+  }
+}
+
+#aside-content .card-widget#card-music {
+  background: var(--sco-pink);
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  padding: 0;
+  cursor: pointer;
+  border: none
+}
+
+#aside-content .card-widget#card-music img {
+  max-height: 110px;
+  object-fit: cover
+}
+
+#aside-content .card-widget#card-music:hover img {
+  transition: .5s;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d
+}
+
+#aside-content .card-widget#card-friendlinks {
+  background: var(--sco-main);
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  padding: 0;
+  cursor: pointer;
+  border: none
+}
+
+#aside-content .card-widget#card-friendlinks img {
+  max-height: 110px;
+  object-fit: cover
+}
+
+#aside-content .card-widget#card-friendlinks:hover img {
+  transition: .5s;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d
+}
+
+#aside-content .card-widget.card-power,#aside-content .card-widget.card-history,#aside-content .card-widget.card-welcome {
+  padding: .4rem .6rem !important
+}
+
+#aside-content .card-widget.card-power .power-charge {
+  margin-left: auto;
+  color: var(--sco-secondtext);
+  font-size: 14px;
+  line-height: 1
+}
+
+#aside-content .card-widget.card-power .power-charge:hover {
+  color: var(--sco-lighttext)
+}
+
+.power-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0 -4px
+}
+
+.power-list .power-item .power-item-link a {
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-left: 8px
+}
+
+.power-list .power-item .power-item-link a:hover {
+  background: var(--sco-main);
+  color: var(--sco-white)
+}
+
+#aside-content .power-item-body {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap
+}
+
+#power-star-image {
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+  background-size: contain;
+  margin-right: 12px
+}
+
+a#power-star {
+  display: flex;
+  padding: 8px;
+  border: var(--style-border-always);
+  border-radius: 8px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  position: relative;
+  margin: 12px 0
+}
+
+a#power-star:hover {
+  background: var(--sco-main);
+  color: var(--sco-white)
+}
+
+div#power-star-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 8px
+}
+
+#power-star-desc {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  font-size: 12px;
+  max-width: 100%;
+  line-height: 1.2
+}
+
+.power-star-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  position: relative;
+  width: calc(100% - 68px);
+  justify-content: center
+}
+
+#card-vip-designweekly.card-widget {
+  display: flex !important;
+  padding: 0;
+  cursor: pointer
+}
+
+#card-vip-designweekly.card-widget .card-vip-designweekly-img {
+  width: 100%;
+  object-fit: cover
+}
+
+.card-vip-tips {
+  display: flex;
+  position: absolute;
+  font-size: 12px;
+  bottom: 8px;
+  left: 8px;
+  padding: 1px 6px;
+  background: var(--sco-black-op);
+  border-radius: 8px;
+  color: var(--sco-white)
+}
+
+#aside-content .card-widget {
+  box-shadow: var(--sco-shadow-border);
+  background: var(--sco-card-bg);
+  border: var(--style-border);
+  transition: .3s;
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 1rem;
+  padding: 1rem 1.2rem
+}
+
+#aside-content #card-toc .toc-content .toc-link.active {
+  line-height: 24px;
+  border-radius: 12px;
+  border-left-color: var(--sco-hovertext);
+  background-color: var(--sco-card-bg);
+  color: var(--sco-lighttext);
+  font-weight: 700;
+  font-size: 20px
+}
+
+[data-theme=dark].toc .toc-item.active .toc-link .toc-text {
+  color: var(--sco-white)
+}
+
+#aside-content #card-toc .toc-content .toc-item.active .toc-link {
+  opacity: 1;
+  border-radius: 8px
+}
+
+#aside-content #card-toc .toc-content .toc-link {
+  line-height: 24px;
+  padding: 8px;
+  border-left: 0 solid transparent;
+  border-radius: 12px;
+  color: var(--sco-secondtext);
+  cursor: default;
+  min-height: 40px;
+  display: flex;
+  align-items: center
+}
+
+#aside-content #card-toc .toc-content .toc-link:not(.active) span {
+  opacity: .6;
+  cursor: pointer;
+  filter: blur(1px);
+  transition: .3s
+}
+
+#aside-content #card-toc:hover .toc-content .toc-link:not(.active) span {
+  filter: blur(0);
+  opacity: 1
+}
+
+#aside-content #card-toc .toc-content .toc-link:not(.active) span:hover {
+  color: var(--sco-lighttext)
+}
+
+#card-toc {
+  padding: .5rem .5rem !important
+}
+
+#aside-content .card-tag-cloud a sup {
+  opacity: .6;
+  margin-left: 2px
+}
+
+div#author-info__sayhi {
+  text-align: center;
+  width: fit-content;
+  color: var(--sco-white);
+  background: var(--sco-white-op);
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  transition: .3s;
+  margin: auto;
+  min-width: 100px
+}
+
+div#author-info__sayhi:hover {
+  background: var(--sco-card-bg);
+  color: var(--sco-fontcolor);
+  transform: scale(1.1)
+}
+
+#aside-content .card-info .author-info__name {
+  text-align: left;
+  font-weight: 700;
+  color: var(--sco-white);
+  font-size: 20px;
+  line-height: 1;
+  margin-bottom: 5px
+}
+
+.author-info__desc {
+  font-size: 12px;
+  color: var(--sco-white);
+  opacity: .6;
+  line-height: 1.5;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical
+}
+
+.avatar-img-group {
+  width: 118px;
+  height: 118px;
+  right: calc(50% - 59px);
+  top: 90px;
+  border-radius: 500px;
+  position: absolute;
+  transition: cubic-bezier(.69, .39, 0, 1.21) .3s;
+  transform-origin: bottom;
+  border: 5px solid var(--sco-card-bg)
+}
+
+#aside-content .card-info:hover .avatar-img-group {
+  opacity: 0;
+  transform: scale(0)
+}
+
+.avatar-sticker {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 33px;
+  height: 33px;
+  line-height: 34px;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: .3s .2s;
+  transform: scale(1);
+  background: var(--sco-white);
+  border-radius: 50%
+}
+
+.avatar-sticker svg {
+
+  width: 26px;
+  height: 26px
+}
+
+.card-widget:hover .avatar-sticker {
+  opacity: 0;
+  transform: scale(0)
+}
+
+#aside-content > .card-widget:first-child {
+  transition: .3s;
+  border: none;
+  box-shadow: none;
+  background: var(--sco-main);
+  margin-top: 0
+}
+
+#aside-content > .card-widget.card-info {
+  background: var(--sco-card-bg);
+  box-shadow: var(--sco-shadow-black);
+  position: relative
+}
+
+#aside-content > .card-widget.card-info::before {
+  background: linear-gradient(-25deg, var(--sco-main), var(--sco-main-op-deep), var(--sco-main), var(--sco-main-op-deep));
+  background-size: 400%;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  content: '';
+  animation: gradient 15s ease infinite
+}
+
+@media screen and (max-width: 1300px) {
+  #aside-content > .card-widget:first-child {
+    min-height: 329px
+  }
+}
+
+.author-info__description {
+  line-height: 1.38;
+  margin: .3rem 0;
+  text-align: justify;
+  color: rgba(255, 255, 255, .8)
+}
+
+.author-info__description b {
+  color: var(--sco-white)
+}
+
+.author-info__description_group {
+  position: absolute;
+  top: 50px;
+  width: 100%;
+  left: 0;
+  padding: 1.2rem;
+  opacity: 0;
+  transition: .3s
+}
+
+.card-widget:hover .author-info__description_group {
+  opacity: 1
+}
+
+.author-info__description2 {
+  line-height: 1.38;
+  margin: .3rem 0;
+  text-align: justify;
+  width: 100%;
+  z-index: 2;
+  color: rgba(255, 255, 255, .8)
+}
+
+.author-info__description2 b {
+  color: var(--sco-white)
+}
+
+.card-widget.card-info .banner-button-group {
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  display: flex;
+  -webkit-user-select: none
+}
+
+.card-widget.card-info .banner-button-group .banner-button {
+  padding: 8px 12px;
+  background: var(--sco-white-op);
+  border-radius: 12px;
+  color: var(--sco-white);
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  transition: .3s;
+  cursor: pointer
+}
+
+.card-widget.card-info .banner-button-group .banner-button:hover {
+  background: var(--sco-white);
+  color: var(--sco-black)
+}
+
+.card-widget.card-info .banner-button-group .banner-button i {
+  margin-right: 8px;
+  font-size: 22px
+}
+
+#aside-content .card-info .card-info-data {
+  display: none
+}
+
+#aside-content .card-info a img {
+  border-radius: 0;
+  height: 200px;
+  display: inherit;
+  filter: drop-shadow(-5px 14px 8px #00000008);
+  position: absolute;
+  right: -24px;
+  bottom: -82px;
+  width: auto;
+  z-index: 0;
+  transition: cubic-bezier(.48, -.21, 0, 1.5) .3s
+}
+
+#aside-content .card-info a img:hover {
+  bottom: -42px
+}
+
+[data-theme=light] #aside-content .card-info a img {
+  filter: drop-shadow(-5px 14px 8px #ffffff08)
+}
+
+.card-widget.card-info {
+  padding: 0 !important
+}
+
+#aside-content > div.card-widget.card-info > div.card-content {
+  padding: 1rem 1.2rem;
+  min-height: 320px;
+  position: relative
+}
+
+#aside-content > div.card-widget.card-info > div.card-info-avatarimg {
+  overflow: hidden;
+  background: var(--sco-yellow);
+  transition: 1.5s;
+  min-height: 160px;
+  position: relative;
+  box-shadow: var(--sco-shadow-yellow)
+}
+
+#aside-content > div.card-widget.card-info > div.card-info-avatarimg:hover img {
+  transform: scale(1.03)
+}
+
+#aside-content > div.card-widget.card-info > div > div.card-info-data > div:nth-child(0) > a > div.headline {
+  font-weight: 700
+}
+
+@media screen and (max-width: 900px) {
+  #aside-content .card-announcement {
+    display: none
+  }
+
+  #aside-content #card-funds {
+    display: none
+  }
+}
+
+#aside-content .card-info #card-info-btn {
+  display: none
+}
+
+.author-info__bottom-group {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  padding: 1.2rem;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  align-items: center
+}
+
+#aside-content .card-info .card-info-social-icons {
+  margin: 0;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  cursor: pointer
+}
+
+#aside-content .card-info .card-info-social-icons .social-icon {
+  margin: 0 0 0 8px;
+}
+
+#aside-content .card-info .card-info-social-icons i {
+  background: var(--sco-white-op);
+  color: var(--sco-white);
+  font-size: 1rem;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+#aside-content .card-info .card-info-social-icons i:hover {
+  background: var(--sco-white-op);
+  transform: scale(1.1);
+  color: var(--sco-white);
+  box-shadow: none
+}
+
+#aside-content .card-info .banner-button {
+  height: 40px;
+  width: 118px;
+  border-radius: 20px;
+  justify-content: center
+}
+
+@media screen and (min-width: 1300px) {
+  #aside-content .card-info .card-info-social-icons i {
+    color: var(--sco-white)
+  }
+
+  [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
+    color: var(--sco-white)
+  }
+}
+
+#aside-content .card-info .card-info-data > .card-info-data-item:hover {
+  background: var(--sco-post-blockquote-bg);
+  transform: scale(.97)
+}
+
+#aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.headline, #aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.length-num {
+  color: var(--sco-blue)
+}
+
+.announcement_content p {
+  margin: .5rem 0 0 0;
+  line-height: 1.38
+}
+
+#aside-content .item-headline {
+  padding-bottom: 0;
+  margin-left: 8px;
+  font-size: 1em;
+  font-weight: 700;
+  display: flex;
+  align-items: center
+}
+
+#aside-content .item-headline span {
+  margin-left: 4px
+}
+
+#aside-content .card-allinfo .item-headline {
+  display: none
+}
+
+#aside-content .item-headline i {
+  min-width: 20px;
+  font-size: 18px
+}
+
+#aside-content .item-headline + div, #aside-content .item-headline + ul {
+  padding: 0;
+  -webkit-user-select: none
+}
+
+@media screen and (min-width: 1300px) {
+  #aside-content .card-widget {
+    margin-top: 1rem
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #aside-content .card-widget {
+    border-radius: 12px
+  }
+}
+
+#aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center {
+  margin-top: 8px;
+  background: var(--sco-card-btn-bg);
+  border-radius: 8px;
+  transition: .3s !important
+}
+
+#aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center :hover {
+  color: var(--sco-white);
+  background: var(--sco-blue);
+  border-radius: 8px;
+  transition: .3s !important
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item.more span, #aside-content .card-categories ul.card-category-list > .card-category-list-item.more span {
+  transition: .3s !important
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item:hover.more span, #aside-content .card-categories ul.card-category-list > .card-category-list-item.more span {
+  transition: .3s !important
+}
+
+#aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center :hover span {
+  background: 0 0
+}
+
+#aside-content .card-tag-cloud a {
+  color: var(--sco-fontcolor) !important;
+  font-size: .8rem;
+  border-radius: 8px
+}
+
+#aside-content .card-tag-cloud a:hover {
+  background: var(--sco-theme);
+  color: var(--sco-white) !important;
+  box-shadow: var(--sco-shadow-theme)
+}
+
+#aside-content .card-tag-cloud a.tags-cloud-more {
+  width: 100%;
+  text-align: center;
+  border-radius: 8px !important;
+  border: var(--style-border);
+  margin-top: 8px;
+  font-size: 16px !important
+}
+
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
+  color: var(--sco-white);
+  background-color: var(--sco-theme);
+  box-shadow: var(--sco-shadow-theme);
+  border-radius: 8px;
+  padding: .15rem .5rem;
+  border: var(--style-border-hover)
+}
+
+#aside-content #card-toc .toc-content:before {
+  display: none
+}
+
+.page .sticky_layout {
+  display: flex;
+  -webkit-box-orient: vertical;
+  flex-direction: column
+}
\ No newline at end of file
diff --git a/source/css/_layout/base.styl b/source/css/_layout/base.styl
new file mode 100644
index 00000000..40202172
--- /dev/null
+++ b/source/css/_layout/base.styl
@@ -0,0 +1,300 @@
+*
+  box-sizing border-box
+
+html
+  line-height 1.15
+  -webkit-text-size-adjust 100%
+  text-size-adjust 100%
+  height: 100%;
+  font-size: 20px
+
+main
+  display block
+
+body
+  position relative
+  min-height 100%
+  background var(--sco-background)
+  color var(--sco-fontcolor)
+  font-size 16px
+  font-family "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"
+  line-height 2
+  -webkit-tap-highlight-color transparent
+  margin 0
+
+::selection
+  background var(--sco-fontcolor)
+  color var(--sco-background)
+
+i.scoicon
+  font-size 22px
+  line-height 1
+
+svg.scoicon
+  width 1em
+  height 1em
+  vertical-align -0.15em
+  fill currentColor
+  overflow hidden
+
+svg.scoicon.tab
+  width 1.5em
+  height 1.5em
+  vertical-align -0.15em
+  fill currentColor
+  overflow hidden
+  padding-right 5px
+
+#page img
+  border-radius 12px
+
+#page p a:not(.headerlink)
+  text-decoration none
+  border-bottom 2px solid var(--sco-lighttext)
+  color var(--sco-fontcolor)
+  font-weight 700
+  padding 0 4px
+  border-radius 4px 4px 0 0
+
+#page p a:hover
+  text-decoration none
+
+h1
+  font-size 2em
+  margin .67em 0
+
+h1, h2, h3, h4, h5, h6
+  position relative
+  margin 1rem 0 .7rem
+  color var(--sco-fontcolor)
+  font-weight 700
+
+h1 code, h2 code, h3 code, h4 code, h5 code, h6 code
+  font-size inherit !important
+
+hr
+  box-sizing content-box
+  height 0
+  overflow visible
+
+pre
+  font-family monospace, monospace
+
+a
+  color var(--sco-fontcolor)
+  text-decoration none
+  transition all .2s ease 0s
+  overflow-wrap break-word
+  -webkit-user-drag none
+
+abbr[title]
+  border-bottom none
+  text-decoration underline dotted
+
+b, strong
+  font-weight bolder
+
+code, kbd, samp
+  font-family monospace, monospace
+  font-size 1em
+
+small
+  font-size 80%
+
+sub, sup
+  font-size 75%
+  line-height 0
+  position relative
+  vertical-align baseline
+
+sub
+  bottom -.25em
+
+sup
+  top -.5em
+
+button, input, optgroup, select, textarea
+  font-family inherit
+  font-size 100%
+  line-height 1.15
+  margin 0
+
+button, input
+  overflow visible
+
+button, select
+  text-transform none
+
+[type=button], [type=reset], [type=submit], button
+  appearance button
+
+fieldset
+  padding .35em .75em .625em
+
+legend
+  box-sizing border-box
+  color inherit
+  display table
+  max-width 100%
+  padding 0
+  white-space normal
+
+progress
+  vertical-align baseline
+
+textarea
+  overflow auto
+
+[type=checkbox], [type=radio]
+  box-sizing border-box
+  padding 0
+
+[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button
+  height auto
+
+[type=search]
+  appearance textfield
+  outline-offset -2px
+
+[type=search]::-webkit-search-decoration
+  appearance none
+
+input[type=checkbox] + label::before, input[type=radio] + label::before
+  content ''
+  display inline-block
+  width 16px
+  height 16px
+  border 1px solid #999
+  background-color #fff
+  margin-right 5px
+  vertical-align middle
+
+::-webkit-file-upload-button
+  appearance button
+  font inherit
+
+summary
+  display list-item
+
+template
+  display none
+
+[hidden]
+  display none
+
+input::placeholder
+  color var(--sco-fontcolor)
+
+.table-wrap
+  overflow-x scroll
+  margin 0 0 1rem
+
+table
+  display table
+  width 100%
+  border-spacing 0
+  border-collapse collapse
+  empty-cells show
+
+table thead
+  background rgba(153, 169, 191, .1)
+
+table td, table th
+  padding .3rem .6rem
+  border 1px solid var(--light-grey)
+  vertical-align middle
+
+::selection
+  background #0079ff
+  color #f7f7f7
+
+button
+  padding 0
+  outline 0
+  border none
+  background 0 0
+  cursor pointer
+
+a:hover
+  color var(--sco-lighttext)
+
+img
+  max-width 100%
+  transition all .2s ease 0s;
+  border-style none
+
+img:not([src]), img[src=""]
+  opacity 0
+
+.img-alt
+  margin -.5rem 0 .5rem
+  color #858585
+
+.img-alt:hover
+  text-decoration none !important
+
+.is-center
+  text-align center
+  display flex
+  flex-wrap wrap
+  justify-content center
+  flex-direction row
+  align-items center
+
+.card-info-avatar.is-center
+  flex-direction column
+  display flex
+  align-items flex-start
+
+.copy-true
+  user-select all
+
+.pull-left
+  float left
+
+.pull-right
+  float right
+
+.button--animated
+  position relative
+  z-index 1
+  transition color 1s ease 0s
+
+.button--animated::before
+  position absolute
+  inset 0
+  z-index -1
+  background var(--btn-hover-color)
+  content ""
+  transition transform .5s ease-out 0s
+  transform scaleX(0)
+  transform-origin 0 50%
+
+.button--animated:hover::before
+  transition-timing-function cubic-bezier(.45, 1.64, .47, .66)
+  transform scaleX(1)
+
+blockquote
+  margin 0 0 1rem
+  padding .1rem .8rem
+  border-left .2rem solid #49b1f5
+  background-color var(--blockquote-bg)
+  color var(--blockquote-color)
+
+blockquote a
+  color var(--blockquote-color)
+
+blockquote p
+  margin 0 !important
+  padding .5rem 0
+
+li,ul
+  list-style none
+  display block
+  margin 0
+  padding 0
+
+.li-style
+  width 100%
+  height 25px
+  text-align center
\ No newline at end of file
diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl
new file mode 100644
index 00000000..1c965f01
--- /dev/null
+++ b/source/css/_layout/footer.styl
@@ -0,0 +1,383 @@
+#footer {
+  position: relative;
+  background: center bottom / cover local #307af6
+}
+
+#footer-wrap {
+  position: relative;
+  padding: 2rem 1rem;
+  color: var(--light-grey);
+  text-align: center
+}
+
+#footer-wrap a {
+  color: var(--light-grey);
+  padding: 4px 12px;
+  border-radius: 5px
+}
+
+#footer-wrap a:hover {
+  background-color: #fff;
+  color: #3b82ff;
+  cursor: pointer;
+  border-radius: 5px
+}
+
+#footer-wrap .footer-separator {
+  margin: 0 .2rem
+}
+
+#footer-wrap .icp-icon {
+  padding: 0 4px;
+  vertical-align: text-bottom;
+  max-height: 1.4em;
+  width: auto
+}
+
+#footer-wrap {
+  color: var(--sco-fontcolor)
+}
+
+#footer-wrap a {
+  color: var(--sco-fontcolor);
+  height: 44px;
+  line-height: 36px
+}
+
+#footer-wrap a:hover {
+  color: var(--sco-hovertext);
+  background-color: var(--sco-none)
+}
+
+div#footer_deal {
+  justify-content: center;
+  display: flex;
+  padding-top: 2rem;
+  align-items: center
+}
+
+@media screen and (max-width: 768px) {
+  img.footer_mini_logo {
+    display: none
+  }
+
+  div#footer_deal {
+    flex-wrap: wrap;
+    flex-direction: row
+  }
+}
+
+#footer {
+  background: linear-gradient(180deg, var(--sco-card-bg-none) 0, var(--sco-card-bg) 25%);
+  margin-top: .5rem;
+  display: flex;
+  flex-direction: column
+}
+
+@media screen and (max-width: 768px) {
+  #footer {
+    background: linear-gradient(180deg, var(--sco-background) 0, var(--sco-card-bg) 25%);
+    margin-top: 0;
+    z-index: 999
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #letlink {
+    flex-direction: column !important;
+    text-align: center !important
+  }
+
+  #letlogo {
+    display: none !important
+  }
+
+  #footer-wrap {
+    margin-top: 1rem !important
+  }
+}
+
+.footer-bar-right {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center
+}
+
+#footer-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding: 20px 50px 0 50px;
+  text-align: left !important;
+  max-width: 1200px;
+  margin: 0 auto
+}
+
+#footer-wrap h1 {
+  font-size: 1.5rem;
+  margin: 0
+}
+
+#footer-wrap h3 {
+  padding: 0 12px
+}
+
+#footer-wrap p {
+  margin: 0 0 0 .2rem;
+  font-size: .8rem;
+  opacity: .8
+}
+
+#footer-wrap i {
+  margin-right: .5rem;
+  width: 22px;
+  font-size: 18px;
+  display: inline-block
+}
+
+#footer-wrap #letlogo {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  margin: auto 0;
+  max-width: 200px
+}
+
+#footer-wrap #letlink .link_group {
+  display: flex;
+  flex-direction: column;
+  margin-right: 20px;
+  min-width: 180px
+}
+
+#footer-wrap #letlink {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin: 0 0 1rem 0
+}
+
+#weblogo i {
+  font-size: 2rem;
+  line-height: 2rem;
+  letter-spacing: -10px
+}
+
+#footer:before {
+  position: absolute !important;
+  width: 100% !important;
+  height: 100% !important;
+  content: '' !important;
+  z-index: -1
+}
+
+div#sco-footer-bar {
+  display: none
+}
+
+.post div#sco-footer-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 16px
+}
+
+div#sco-footer-bar a.footer-bar-link {
+  padding: 4px 16px;
+  background: var(--sco-secondbg);
+  border-radius: 20px;
+  margin-top: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  border: var(--style-border-always);
+}
+
+div#sco-footer-bar a.footer-bar-link:hover {
+  background: var(--sco-main);
+  color: var(--sco-white);
+  transform: scale(1.1);
+  border-color: var(--sco-main);
+}
+
+div#sco-footer-bar .footer-logo {
+  font-size: 24px
+}
+
+div#sco-footer-bar .footer-bar-description {
+  color: var(--sco-secondtext);
+  font-weight: 700
+}
+
+#sco-footer .footer-links {
+  display: flex;
+  flex-direction: column
+}
+
+#sco-footer {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: 1200px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 1rem auto 3rem;
+  padding: 0 1rem
+}
+
+#sco-footer .footer-item {
+  font-size: .8rem;
+  line-height: .8rem;
+  color: var(--sco-fontcolor);
+  margin-right: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 120px;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 12px
+}
+
+#sco-footer .footer-item:hover {
+  color: var(--sco-theme);
+  background: var(--sco-main-op-light)
+}
+
+[data-theme=dark] #sco-footer .footer-item:hover {
+  background: var(--sco-theme-op)
+}
+
+
+#sco-footer .footer-group {
+  min-width: 120px
+}
+
+#sco-footer .footer-title-group {
+  display: flex;
+  align-items: center;
+  margin: 1rem 0 .7rem 0
+}
+
+#sco-footer .footer-title-group a {
+  margin-left: 8px
+}
+
+#sco-footer .footer-title-group i {
+  line-height: 1;
+  color: var(--sco-secondtext);
+  transition: .3s;
+  font-size: 16px;
+  opacity: .6
+}
+
+#sco-footer .footer-title-group a:hover i {
+  color: var(--sco-main);
+  opacity: 1
+}
+
+#sco-footer .footer-title-group .footer-title {
+  margin: 0
+}
+
+#sco-footer .random-friends-btn {
+  display: flex
+}
+
+#sco-footer .footer-title {
+  color: var(--sco-secondtext);
+  font-size: .8rem;
+  margin-left: 8px !important;
+}
+
+#footer-bar {
+  padding: 1rem;
+  color: var(--sco-fontcolor);
+  margin-top: 1rem;
+  background: var(--sco-secondbg);
+  display: flex;
+  overflow: hidden;
+  z-index: 1002;
+  transition: .3s;
+  border-top: var(--style-border-always)
+}
+
+#footer-bar .footer-bar-links {
+  display: flex;
+  justify-content: space-between;
+  max-width: 1400px;
+  width: 100%;
+  margin: 0 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  line-height: 1
+}
+
+#footer-bar .footer-bar-left {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 32px;
+  align-items: center
+}
+
+#footer-bar .footer-bar-link {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-right: 1rem;
+  color: var(--sco-fontcolor);
+  font-size: .8rem;
+  font-weight: 700;
+  white-space: nowrap
+}
+
+#footer-bar .footer-bar-link.cc {
+  margin-right: 0
+}
+
+#footer-bar .footer-bar-link.cc i {
+  margin-right: .5rem;
+  font-size: 18px
+}
+
+#footer-bar .footer-bar-link:hover {
+  color: var(--sco-theme)
+}
+
+#footer-bar > div > div.footer-bar-left > span {
+  margin-right: 1rem
+}
+
+#footer-bar .footer-bar-right a:hover {
+  color: var(--sco-lighttext)
+}
+
+#footer_deal i {
+  font-size: .9rem;
+  line-height: .9rem;
+  height: .9rem
+}
+
+blockquote footer {
+  padding: 0 0 .5rem
+}
+
+blockquote footer cite::before {
+  padding: 0 .3em;
+  content: "—"
+}
+
+img.footer_mini_logo {
+  width: 50px;
+  height: 50px;
+  margin: 0 1rem;
+  cursor: pointer;
+  transition: cubic-bezier(0, 0, 0, 1.29) .5s;
+  -webkit-user-select: none;
+  border-radius: 50px
+}
+
+img.footer_mini_logo:hover {
+  -webkit-backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d;
+  transform: scale(1.2)
+}
\ No newline at end of file
diff --git a/source/css/_layout/header.styl b/source/css/_layout/header.styl
index 60040961..4dbd4ed3 100644
--- a/source/css/_layout/header.styl
+++ b/source/css/_layout/header.styl
@@ -1,1445 +1,1442 @@
-#page-header 
-	position relative
-	width 100%
-	background-position center center
-	background-size cover
-	background-repeat no-repeat
-	transition all .5s ease 0s
-	background-image none !important
-	display flex
-	justify-content center
-
-	+minWidth1300()
-		height: 25rem
-
-	&.full_page 
-		height 20rem
-		background-attachment fixed
-		height 2rem
-		background-image none !important
-		background-color var(--sco-none)
-
-		#site-info 
-			position absolute
-			top 7.8rem
-			padding 0 .5rem
-			width 100%
-			display none
-
-	#site-title 
-		margin 0
-		color var(--sco-white)
-		font-size 1.85em
-
-		+minWidth768()
-			font-size 2.85em
-
-	#site-subtitle 
-		color var(--light-grey)
-		font-size 1.15em
-
-		+minWidth768()
-			font-size 1.72em
-
-	#site_social_icons 
-		display none
-		margin 0 auto
-		width 15rem
-		text-align center
-
-		+maxWidth768()
-			display block
-
-		.social-icon 
-			margin 0 .5rem
-			color var(--light-grey)
-			text-shadow rgba(0, 0, 0, .15) .1rem .1rem .2rem
-			font-size 1.43em
-			cursor pointer
-
-	#scroll-down 
-		position absolute
-		bottom 0
-		width 100%
-		cursor pointer
-		display none
-
-		.scroll-down-effects 
-			position relative
-			width 100%
-			color var(--light-grey)
-			font-size 30px
-
-	&.not-home-page 
-		height 20rem
-
-		+maxWidth768()
-			height 14rem
-
-	#page-site-info 
-		position absolute
-		top 10rem
-		padding 0 .5rem
-		width 100%
-
-		+maxWidth768()
-			top 7rem
-
-	&.post-bg 
-		height 20rem
-		background-color var(--sco-background)
-		transition .6s
-		overflow hidden
-
-		+minWidth1300()
-			height: 25rem
-
-		+maxWidth768()
-			height 18rem
-			background-color var(--sco-main) !important
-			transition 0s
-			margin-bottom -12px
-
-		&::before 
-			transition .3s
-			height 20rem
-			background-color var(--sco-main)
-			opacity 1
-			position absolute
-			top 0
-			left 0
-			display block
-			width 100%
-			content ""
-
-			+minWidth1300()
-				height 25rem
-				opacity 0
-				background-color var(--sco-main)
-				animation slide-in-op .6s 0s forwards
-
-			+maxWidth768()
-				height 15rem
-
-	#post-info 
-		position absolute
-		padding 0 8%
-		width 100%
-		text-align center
-		top 0
-		position absolute
-		padding 0 3rem
-		margin 0 auto
-		z-index 10
-		color var(--sco-white)
-		max-width 1400px
-		display flex
-		flex-direction column
-		align-items flex-start
-		height calc(100% + 0px)
-		justify-content center
-		animation slide-in .6s 0s backwards
-
-		+minWidth1300()
-			height calc(100% + 0px)
-			top 0
-			display flex
-			justify-content center
-
-		+maxWidth900()
-			bottom 1.5rem
-			text-align left
-
-		+maxWidth768()
-			bottom 1.1rem
-			padding 0 1.1rem
-			justify-content normal
-			padding 18rem 6% 0
-
-	&.not-top-img 
-		margin-bottom .5rem
-		height 60px
-		background 0 center
-		margin-bottom 0
-
-		#nav 
-			z-index 500
-			transition .3s
-			background var(--sco-card-bg)
-
-			a 
-				color var(--sco-fontcolor)
-				text-shadow none
-
-				&:hover 
-					color var(--sco-white)
-					text-shadow none
-					align-items center
-
-					+maxWidth768()
-						align-items flex-end !important
-						color var(--sco-fontcolor)
-
-			.back-home-button 
-				color var(--sco-fontcolor)
-
-				i 
-					font-size 20px
-
-		&:not(.nav-fixed) 
-			#nav 
-				background var(--sco-none)
-				transition .3s
-
-				+maxWidth768()
-					transition 0s
-
-	#nav 
-		box-shadow none
-		transition 0.3s
-		display flex
-		justify-content center
-		-webkit-user-select none
-
-		+maxWidth768()
-			background linear-gradient(to top, var(--sco-main-none) 0, var(--sco-main) 100%)
-			transition 0s
-
-		a 
-			&:hover 
-				span 
-					&.scoicon 
-						opacity 0
-
-						+maxWidth768()
-							opacity 1 !important
-
-		#nav-group 
-			max-width 1400px
-			width 100%
-			display flex
-			position relative
-			padding 0 1.5rem
-			align-items center
-
-			+maxWidth768()
-				width 100%
-				display flex
-				position relative
-				padding 0 12px
-
-		#nav-right 
-			position absolute
-			right 0
-			z-index 102
-			display flex
-			flex-direction row
-			height 100%
-			align-items center
-			margin-right 1.5rem
-			overflow hidden
-
-			+maxWidth768()
-				margin-right 12px
-
-			div 
-				margin-left .5rem
-				padding 0
-
-			.nav-button 
-				a 
-					&.totopbtn 
-						width 25px
-						height 25px
-						border-radius 40px
-						background var(--sco-fontcolor)
-						color var(--sco-card-bg)
-						position absolute
-						top 5px
-						right 5px
-						transition .3s
-
-				&.long 
-					a 
-						&.totopbtn 
-							width 70px
-
-				&:hover 
-					a 
-						&.totopbtn 
-							background var(--sco-main)
-
-				&:not(.long):hover 
-					a 
-						&.totopbtn 
-							width 35px
-							height 35px
-							top 0
-							right 0
-
-		#nav-left 
-			z-index 102
-			display flex
-			flex-direction row
-			height 100%
-			align-items center
-			margin-right 1.5rem
-			overflow hidden
-
-	&.nav-fixed 
-		#nav 
-			position fixed
-			top 0
-			z-index 103
-			transition .3s
-			top 0
-			box-shadow none
-			background var(--sco-card-bg)
-			outline 1px solid var(--sco-card-border)
-
-			#menus 
-				+minWidth900()
-					z-index 100
-
-				& > div 
-					&.menus_items 
-						transition .3s
-						height 40px
-						margin auto 0
-
-			#menus[style*="padding-right: 300px;"]
-				.menus_items 
-					transform translateX(-150px)
-
-			#page-name
-				+minWidth900()
-					z-index 101
-					transition .3s
-					top 10px
-
-				&-text
-					+minWidth900()
-						display inline
-						opacity 1
-						transition .3s
-						line-height 1
-
-					&:hover
-						&:after
-							+minWidth900()
-								opacity 1
-								line-height 36px
-
-			div.menus_items
-				+minWidth900()
-					transition .15s
-					position relative
-					top -60px
-
-		&.nav-visible
-			#nav
-				#page-name
-					+minWidth900()
-						z-index 100
-						top 60px
-						transition .3s
-
-					&-text
-						+minWidth900()
-							display inline
-							transition .15s
-
-				div.menus_items
-					+minWidth900()
-						opacity 1
-						transition .15s
-						position relative
-						top: 0
-
-				#menus
-					+minWidth900()
-						z-index 101
-
-		#travellings_button
-			+maxWidth768()
-				opacity 0
-
-	&.nav-visible 
-		& + .layout 
-			& > .aside-content 
-				& > .sticky_layout 
-					top 70px
-					transition top .5s ease 0s
-
-	&.no-top-img 
-		margin-bottom 0
-
-	&:not(.nav-fixed) 
-		#percent 
-			transition .3s
-
-		#nav-totop 
-			width 0
-			transform scale(0)
-			margin-left 0 !important
-			overflow hidden
-			transition .3s ease-in
+#page-header
+  position relative
+  width 100%
+  background-position center center
+  background-size cover
+  background-repeat no-repeat
+  transition all .5s ease 0s
+  background-image none !important
+  display flex
+  justify-content center
+
+  +minWidth1300()
+    height: 25rem
+
+  &.full_page
+    height 20rem
+    background-attachment fixed
+    height 2rem
+    background-image none !important
+    background-color var(--sco-none)
+
+    #site-info
+      position absolute
+      top 7.8rem
+      padding 0 .5rem
+      width 100%
+      display none
+
+  #site-title
+    margin 0
+    color var(--sco-white)
+    font-size 1.85em
+
+    +minWidth768()
+      font-size 2.85em
+
+  #site-subtitle
+    color var(--light-grey)
+    font-size 1.15em
+
+    +minWidth768()
+      font-size 1.72em
+
+  #site_social_icons
+    display none
+    margin 0 auto
+    width 15rem
+    text-align center
+
+    +maxWidth768()
+      display block
+
+    .social-icon
+      margin 0 .5rem
+      color var(--light-grey)
+      text-shadow rgba(0, 0, 0, .15) .1rem .1rem .2rem
+      font-size 1.43em
+      cursor pointer
+
+  #scroll-down
+    position absolute
+    bottom 0
+    width 100%
+    cursor pointer
+    display none
+
+    .scroll-down-effects
+      animation: 1.5s ease 0s infinite normal none running scroll-down-effect
+      position relative
+      width 100%
+      color var(--light-grey)
+      font-size 30px
+
+  &.not-home-page
+    height 20rem
+
+    +maxWidth768()
+      height 14rem
+
+  #page-site-info
+    position absolute
+    top 10rem
+    padding 0 .5rem
+    width 100%
+
+    +maxWidth768()
+      top 7rem
+
+  &.post-bg
+    height 20rem
+    background-color var(--sco-background)
+    transition .6s
+    overflow hidden
+
+    +minWidth1300()
+      height: 25rem
+
+    +maxWidth768()
+      height 18rem
+      background-color var(--sco-main) !important
+      transition 0s
+      margin-bottom -12px
+
+    &::before
+      transition .3s
+      height 20rem
+      background-color var(--sco-main)
+      opacity 1
+      position absolute
+      top 0
+      left 0
+      display block
+      width 100%
+      content ""
+
+      +minWidth1300()
+        height 25rem
+        opacity 0
+        background-color var(--sco-main)
+        animation slide-in-op .6s 0s forwards
+
+      +maxWidth768()
+        height 15rem
+
+  #post-info
+    position absolute
+    padding 0 8%
+    width 100%
+    text-align center
+    top 0
+    position absolute
+    padding 0 3rem
+    margin 0 auto
+    z-index 10
+    color var(--sco-white)
+    max-width 1400px
+    display flex
+    flex-direction column
+    align-items flex-start
+    height calc(100% + 0px)
+    justify-content center
+    animation slide-in .6s 0s backwards
+
+    +minWidth1300()
+      height calc(100% + 0px)
+      top 0
+      display flex
+      justify-content center
+
+    +maxWidth900()
+      bottom 1.5rem
+      text-align left
+
+    +maxWidth768()
+      bottom 1.1rem
+      padding 0 1.1rem
+      justify-content normal
+      padding 18rem 6% 0
+
+  &.not-top-img
+    margin-bottom .5rem
+    height 60px
+    background 0 center
+    margin-bottom 0
+
+    #nav
+      z-index 500
+      transition .3s
+      background var(--sco-card-bg)
+
+      a
+        color var(--sco-fontcolor)
+        text-shadow none
+
+        &:hover
+          color var(--sco-white)
+          text-shadow none
+          align-items center
+
+          +maxWidth768()
+            align-items flex-end !important
+            color var(--sco-fontcolor)
+
+      .back-home-button
+        color var(--sco-fontcolor)
+
+        i
+          font-size 20px
+
+    &:not(.nav-fixed)
+      #nav
+        background var(--sco-none)
+        transition .3s
+
+        +maxWidth768()
+          transition 0s
+
+  #nav
+    box-shadow none
+    transition 0.3s
+    display flex
+    justify-content center
+    -webkit-user-select none
+
+    +maxWidth768()
+      background linear-gradient(to top, var(--sco-main-none) 0, var(--sco-main) 100%)
+      transition 0s
+
+    +maxWidth1400()
+      padding 0
+
+    a
+      &:hover
+        span
+          &.scoicon
+            opacity 0
+
+            +maxWidth768()
+              opacity 1 !important
+
+    #nav-group
+      max-width 1400px
+      width 100%
+      display flex
+      position relative
+      padding 0 1.5rem
+      align-items center
+
+      +maxWidth768()
+        width 100%
+        display flex
+        position relative
+        padding 0 12px
+
+    #nav-right
+      position absolute
+      right 0
+      z-index 102
+      display flex
+      flex-direction row
+      height 100%
+      align-items center
+      margin-right 1.5rem
+      overflow hidden
+
+      +maxWidth768()
+        margin-right 12px
+
+      div
+        margin-left .5rem
+        padding 0
+
+      .nav-button
+        a
+          &.totopbtn
+            width 25px
+            height 25px
+            border-radius 40px
+            background var(--sco-fontcolor)
+            color var(--sco-card-bg)
+            position absolute
+            top 5px
+            right 5px
+            transition .3s
+
+        &.long
+          a
+            &.totopbtn
+              width 70px
+
+        &:hover
+          a
+            &.totopbtn
+              background var(--sco-main)
+
+        &:not(.long):hover
+          a
+            &.totopbtn
+              width 35px
+              height 35px
+              top 0
+              right 0
+
+    #nav-left
+      z-index 102
+      display flex
+      flex-direction row
+      height 100%
+      align-items center
+      margin-right 1.5rem
+      overflow hidden
+
+  &.nav-fixed
+    #nav
+      position fixed
+      top 0
+      z-index 103
+      transition .3s
+      box-shadow none
+      background var(--sco-card-bg)
+      outline 1px solid var(--sco-card-border)
+
+      #menus
+        +minWidth900()
+          z-index 100
+
+        & > div
+          &.menus_items
+            transition .3s
+            height 40px
+            margin auto 0
+
+      #menus[style*="padding-right: 300px;"]
+        .menus_items
+          transform translateX(-150px)
+
+      #page-name
+        +minWidth900()
+          z-index 101
+          transition .3s
+          top 10px
+
+        &-text
+          +minWidth900()
+            display inline
+            opacity 1
+            transition .3s
+            line-height 1
+
+          &:hover
+            &:after
+              +minWidth900()
+                opacity 1
+                line-height 36px
+
+      div.menus_items
+        +minWidth900()
+          transition .15s
+          position relative
+          top -60px
+
+    &.nav-visible
+      #nav
+        #page-name
+          +minWidth900()
+            z-index 100
+            top 60px
+            transition .3s
+
+          &-text
+            +minWidth900()
+              display inline
+              transition .15s
+
+        div.menus_items
+          +minWidth900()
+            opacity 1
+            transition .15s
+            position relative
+            top: 0
+
+        #menus
+          +minWidth900()
+            z-index 101
+
+    #travellings_button
+      +maxWidth768()
+        opacity 0
+
+  &.nav-visible
+    & + .layout
+      & > .aside-content
+        & > .sticky_layout
+          top 70px
+          transition top .5s ease 0s
+
+  &.no-top-img
+    margin-bottom 0
+
+  &:not(.nav-fixed)
+    #percent
+      transition .3s
+
+    #nav-totop
+      width 0
+      transform scale(0)
+      margin-left 0 !important
+      overflow hidden
+      transition .3s ease-in
 
 #page-header #scroll-down .scroll-down-effects,
-#page-header #site-subtitle, #page-header #site-title 
-	text-align center
-	line-height 1.5
+#page-header #site-subtitle, #page-header #site-title
+  text-align center
+  line-height 1.5
 
 #page-header.nav-fixed #nav #site-name,
 #page-header.nav-fixed #nav #toggle-menu,
-#page-header.nav-fixed #nav a 
-	text-shadow none
+#page-header.nav-fixed #nav a
+  text-shadow none
 
 #page-header.nav-fixed > #nav,
-#page-header.not-top-img > #nav 
-	box-shadow none
-
-#nav 
-	padding 0
-	position absolute
-	top 0
-	z-index 90
-	display flex
-	flex-wrap wrap
-	-webkit-box-align center
-	align-items center
-	padding 0 36px
-	width 100%
-	height 60px
-	font-size 1.3em
-	opacity 0
-	transition all .5s ease 0s
-	outline 1px solid var(--sco-none)
-	flex-wrap nowrap
-	justify-content space-between
-
-	+maxWidth768()
-		padding 0
-
-	&.show 
-		top 0
-		transition .2s
-		position fixed
-		z-index 91
-		opacity 1
-		filter none
-
-	#toggle-menu 
-		padding 0 .4rem
-		display none
-		padding .1rem 0 0 .3rem
-		vertical-align top
-
-		+maxWidth768()
-			display inline-block !important
-
-		&:hover 
-			color var(--sco-white)
-
-	#site-name
-		padding 0
-		transition .3s
-		display flex
-		height 35px
-		min-width 70px
-		justify-content center
-		align-items flex-end
-		text-shadow none
-		border-radius 40px
-		cursor pointer
-
-		&:hover
-			i
-				+minWidth900()
-					opacity 0
-
-			&:after
-				+minWidth900()
-					opacity: 1
-
-		&:after
-			+minWidth900()
-				opacity 0
-				position absolute
-				display flex
-				z-index 1
-				content "\e008"
-				font-family scoicon, serif !important
-				align-items center
-				justify-content center
-				font-size 22px
-				line-height 1
-				color var(--sco-white)
-
-		i 
-			font-size 16px
-			line-height 35px
-			padding 0 12px
-
-			+maxWidth768()
-				transition .1s
-
-			+minWidth900()
-				opacity 1
-				transition all .3s, color 0s, opacity .3s
-
-		span
-			+maxWidth768()
-				padding-left 8px
-
-	#blog_name 
-		flex-wrap nowrap
-		height 60px
-		display flex
-		align-items center
-		z-index 102
-		transition .3s
-
-	a 
-		transition .3s
-		color var(--sco-white)
-		padding .3rem .4rem 0
-		border-radius 5px
-		border-radius 8px
-
-		&:hover 
-			color var(--sco-white)
-			background var(--sco-white-op)
-			transition .3s
-			color var(--sco-white)
-
-			+maxWidth768()
-				background var(--sco-none) !important
-				box-shadow none !important
-				transition .3s
-				color var(--sco-fontcolor)
-
-	#menus 
-		display flex
-		justify-content center
-		width 100%
-		position absolute
-		height 60px
-		left 0
-		margin 0
-		transform translateZ(0)
-
-		+maxWidth768()
-			display none !important
-
-	.menus_items 
-		position relative
-		width fit-content
-		text-align center
-		left 0
-		right 0
-		top 0
-		display flex
-		flex-direction row
-		justify-content center
-
-		.menus_item 
-			padding 0 .4rem
-			display flex
-			flex-direction column
-			align-items center
-			margin auto
-			position relative
-
-			.menus_item_child 
-				position absolute
-				display none
-				margin-top 8px
-				padding 0
-				background-color var(--sidebar-bg)
-				box-shadow rgba(0, 0, 0, .5) 0 5px 20px -4px
-				animation .3s ease .1s 1 normal both running sub_menus
-				border-radius 5px
-				white-space nowrap
-				padding 6px 4px 8px 4px
-				border-radius 100px
-				background-color var(--sco-maskbgdeep)
-				box-shadow var(--sco-shadow-black)
-				border var(--style-border)
-				transition .3s
-				backdrop-filter blur(20px)
-				-webkit-backdrop-filter blur(20px)
-				transform translateZ(0)
-				top 35px
-
-				li 
-					display inline-flex
-					list-style none
-					border-radius 5px
-					margin 0 4px
-
-					a 
-						letter-spacing 0
-						display flex
-						align-items center
-						border-radius 100px
-						padding .3rem .8rem
-						width 100%
-						color var(--sco-fontcolor) !important
-						text-shadow none !important
-
-						&:hover 
-							background var(--sco-main) !important
-							color var(--sco-white) !important
-							box-shadow var(--sco-shadow-main)
-							margin 0 auto
-							transform scale(1) !important
-							padding .3rem 1rem
-
-						i 
-							&:not(.fa-brands) 
-								font-size 22px
-								margin-right 8px
-								line-height 1
-
-				&::before 
-					position absolute
-					top -8px
-					left 0
-					width 100%
-					height 20px
-					content ""
-
-				&:before 
-					top -10px
-
-			&:hover 
-				.menus_item_child 
-					display block
-					border var(--style-border-hover)
-					box-shadow var(--sco-shadow-main)
-
-				i 
-					&.expand 
-						transform rotate(180deg) !important
-
-			i 
-				&.expand 
-					padding 4px
-					transition transform .3s ease 0s
-
-			&:last-child 
-				.menus_item_child 
-					&::after 
-						position absolute
-						top -60px
-						right 0
-						width 50%
-						height 60px
-						content ""
-
-			&:first-child 
-				.menus_item_child 
-					&::after 
-						position absolute
-						top -60px
-						left 0
-						width 50%
-						height 60px
-						content ""
-
-	&.hide-menu 
-		#toggle-menu 
-			display inline-block
-
-			+minWidth768()
-				display none
-
-			.site-page 
-				font-size inherit
-
-				+maxWidth768()
-					width 35px
-					height 35px
-					display flex
-					align-items center
-					justify-content center
-
-		.menus_items 
-			position absolute
-			left 0
-			visibility hidden
-			opacity 0
-
-		#search-button 
-			span 
-				display none !important
-
-	#search-button 
-		display inline
-		padding 0 .4rem
-
-	.site-page 
-		position relative
-		padding-bottom .3rem
-		text-shadow rgba(0, 0, 0, .3) .05rem .05rem .1rem
-		font-size .78em
-		cursor pointer
-
-	.back-home-button
-		&:hover
-			+minWidth900()
-				box-shadow var(--sco-shadow-main)
-				cursor pointer
-	
-	#page-name
-		&-text
-			+minWidth900()
-				display inline
-				font-weight 700
-				padding 4px 8px
-				opacity 0
-				transition .1s
-				text-overflow ellipsis
-				overflow hidden
-				white-space nowrap
-				position relative
-				text-align center
-				cursor pointer
-				top 0
-				font-size .9rem
-				animation-timing-function ease-in
-				-webkit-animation-timing-function ease-in
-
-			&:hover
-				+minWidth900()
-					color var(--sco-main) !important
-					background var(--sco-none)
-					box-shadow none
-
-		&-mask
-			+maxWidth899()
-				display none !important
-
-.nav-button 
-	cursor pointer
+#page-header.not-top-img > #nav
+  box-shadow none
+
+#nav
+  padding 0
+  position absolute
+  top 0
+  z-index 90
+  display flex
+  flex-wrap wrap
+  -webkit-box-align center
+  align-items center
+  padding 0 36px
+  width 100%
+  height 60px
+  font-size 1.3em
+  opacity 0
+  transition all .5s ease 0s
+  outline 1px solid var(--sco-none)
+  flex-wrap nowrap
+  justify-content space-between
+
+  +maxWidth768()
+    padding 0
+
+  &.show
+    top 0
+    transition .2s
+    position fixed
+    z-index 91
+    opacity 1
+    filter none
+
+  #toggle-menu
+    padding 0 .4rem
+    display none
+    padding .1rem 0 0 .3rem
+    vertical-align top
+
+    +maxWidth768()
+      display inline-block !important
+
+    &:hover
+      color var(--sco-white)
+
+  #site-name
+    padding 0
+    transition .3s
+    display flex
+    height 35px
+    min-width 70px
+    justify-content center
+    align-items flex-end
+    text-shadow none
+    border-radius 40px
+    cursor pointer
+
+    &:hover
+      i
+        +minWidth900()
+          opacity 0
+
+      &:after
+        +minWidth900()
+          opacity: 1
+
+    &:after
+      +minWidth900()
+        opacity 0
+        position absolute
+        display flex
+        z-index 1
+        content "\e008"
+        font-family scoicon, serif !important
+        align-items center
+        justify-content center
+        font-size 22px
+        line-height 1
+        color var(--sco-white)
+
+    i
+      font-size 16px
+      line-height 35px
+      padding 0 12px
+
+      +maxWidth768()
+        transition .1s
+
+      +minWidth900()
+        opacity 1
+        transition all .3s, color 0s, opacity .3s
+
+    span
+      +maxWidth768()
+        padding-left 8px
+
+  #blog_name
+    flex-wrap nowrap
+    height 60px
+    display flex
+    align-items center
+    z-index 102
+    transition .3s
+
+  a
+    transition .3s
+    color var(--sco-white)
+    padding .3rem .4rem 0
+    border-radius 8px
+
+    &:hover
+      background var(--sco-white-op)
+      transition .3s
+      color var(--sco-white)
+
+      +maxWidth768()
+        background var(--sco-none) !important
+        box-shadow none !important
+        transition .3s
+        color var(--sco-fontcolor)
+
+  #menus
+    display flex
+    justify-content center
+    width 100%
+    position absolute
+    height 60px
+    left 0
+    margin 0
+    transform translateZ(0)
+
+    +maxWidth768()
+      display none !important
+
+  .menus_items
+    position relative
+    width fit-content
+    text-align center
+    left 0
+    right 0
+    top 0
+    display flex
+    flex-direction row
+    justify-content center
+
+    .menus_item
+      padding 0 .4rem
+      display flex
+      flex-direction column
+      align-items center
+      margin auto
+      position relative
+
+      .menus_item_child
+        position absolute
+        display none
+        margin-top 8px
+        padding 0
+        background-color var(--sidebar-bg)
+        box-shadow rgba(0, 0, 0, .5) 0 5px 20px -4px
+        animation .3s ease .1s 1 normal both running sub_menus
+        border-radius 5px
+        white-space nowrap
+        padding 6px 4px 8px 4px
+        border-radius 100px
+        background-color var(--sco-maskbgdeep)
+        box-shadow var(--sco-shadow-black)
+        border var(--style-border)
+        transition .3s
+        backdrop-filter blur(20px)
+        -webkit-backdrop-filter blur(20px)
+        transform translateZ(0)
+        top 35px
+
+        li
+          display inline-flex
+          list-style none
+          border-radius 5px
+          margin 0 4px
+
+          a
+            letter-spacing 0
+            display flex
+            align-items center
+            border-radius 100px
+            padding .3rem .8rem
+            width 100%
+            color var(--sco-fontcolor) !important
+            text-shadow none !important
+
+            &:hover
+              background var(--sco-main) !important
+              color var(--sco-white) !important
+              box-shadow var(--sco-shadow-main)
+              margin 0 auto
+              transform scale(1) !important
+              padding .3rem 1rem
+
+            i
+              &:not(.fa-brands)
+                font-size 22px
+                margin-right 8px
+                line-height 1
+
+        &::before
+          position absolute
+          top -8px
+          left 0
+          width 100%
+          height 20px
+          content ""
+
+        &:before
+          top -10px
+
+      &:hover
+        .menus_item_child
+          display block
+          border var(--style-border-hover)
+          box-shadow var(--sco-shadow-main)
+
+        i
+          &.expand
+            transform rotate(180deg) !important
+
+      i
+        &.expand
+          padding 4px
+          transition transform .3s ease 0s
+
+      &:last-child
+        .menus_item_child
+          &::after
+            position absolute
+            top -60px
+            right 0
+            width 50%
+            height 60px
+            content ""
+
+      &:first-child
+        .menus_item_child
+          &::after
+            position absolute
+            top -60px
+            left 0
+            width 50%
+            height 60px
+            content ""
+
+  &.hide-menu
+    #toggle-menu
+      display inline-block
+
+      +minWidth768()
+        display none
+
+      .site-page
+        font-size inherit
+
+        +maxWidth768()
+          width 35px
+          height 35px
+          display flex
+          align-items center
+          justify-content center
+
+    .menus_items
+      position absolute
+      left 0
+      visibility hidden
+      opacity 0
+
+    #search-button
+      span
+        display none !important
+
+  #search-button
+    display inline
+    padding 0 .4rem
+
+  .site-page
+    position relative
+    padding-bottom .3rem
+    text-shadow rgba(0, 0, 0, .3) .05rem .05rem .1rem
+    font-size .78em
+    cursor pointer
+
+  .back-home-button
+    &:hover
+      +minWidth900()
+        box-shadow var(--sco-shadow-main)
+        cursor pointer
+
+  #page-name
+    &-text
+      +minWidth900()
+        display inline
+        font-weight 700
+        padding 4px 8px
+        opacity 0
+        transition .1s
+        text-overflow ellipsis
+        overflow hidden
+        white-space nowrap
+        position relative
+        text-align center
+        cursor pointer
+        top 0
+        font-size .9rem
+        animation-timing-function ease-in
+        -webkit-animation-timing-function ease-in
+
+      &:hover
+        +minWidth900()
+          color var(--sco-main) !important
+          background var(--sco-none)
+          box-shadow none
+
+    &-mask
+      +maxWidth899()
+        display none !important
+
+.nav-button
+  cursor pointer
 
 #page-header #nav #nav-left .nav-button a,
-#page-header #nav #nav-right .nav-button a 
-	height 35px
-	width 35px
-	display flex
-	align-items center
-	justify-content center
-	border-radius 40px
+#page-header #nav #nav-right .nav-button a
+  height 35px
+  width 35px
+  display flex
+  align-items center
+  justify-content center
+  border-radius 40px
 
 #page-header #nav #nav-left .nav-button a i,
-#page-header #nav #nav-right .nav-button a i 
-	line-height 1
-	font-size 22px
-
-.layout 
-	padding 1rem 1.5rem
-
-	+minWidth1300()
-		display flex
-		justify-content space-between
-		padding 1rem 1.5rem
-
-#site-name 
-	.iconfont 
-		font-size 20px
-		font-weight 400
-		line-height 48px
-
-#site-logo 
-	width 121px
-
-#nav-totop 
-	position relative
-	width 35px
-	height 35px
-	display flex
-	border-radius 40px
-	transition all .3s ease-in-out
-	align-items center
-
-	&.long 
-		width 80px
-
-	.totopbtn 
-		padding-top 0
-
-		i 
-			position absolute
-			display flex
-			font-size .8rem
-			opacity 0
-
-	&:hover 
-		.totopbtn 
-			i 
-				opacity 1
-				color var(--sco-white)
-				transition .3s
-
-		#percent 
-			opacity 0
-			font-weight 700
-
-	#percent 
-		font-size 12px
-		border-radius 35px
-		display flex
-		justify-content center
-		align-items center
-		transition .3s
-		white-space nowrap
+#page-header #nav #nav-right .nav-button a i
+  line-height 1
+  font-size 22px
+
+#site-name
+  .iconfont
+    font-size 20px
+    font-weight 400
+    line-height 48px
+
+#site-logo
+  width 121px
+
+#nav-totop
+  position relative
+  width 35px
+  height 35px
+  display flex
+  border-radius 40px
+  transition all .3s ease-in-out
+  align-items center
+
+  &.long
+    width 80px
+
+  .totopbtn
+    padding-top 0
+
+    i
+      position absolute
+      display flex
+      font-size .8rem
+      opacity 0
+
+  &:hover
+    .totopbtn
+      i
+        opacity 1
+        color var(--sco-white)
+        transition .3s
+
+    #percent
+      opacity 0
+      font-weight 700
+
+  #percent
+    font-size 12px
+    border-radius 35px
+    display flex
+    justify-content center
+    align-items center
+    transition .3s
+    white-space nowrap
 
 .nav-fixed #nav-totop #percent,
-.page #nav-totop #percent 
-	font-size 12px
-	border-radius 35px
-	display flex
-	justify-content center
-	align-items center
-	transition .3s
-	white-space nowrap
-
-.back-home-button 
-	display flex
-	width 35px
-	height 35px
-	padding 0 !important
-	align-items center
-	justify-content center
-	margin-right 4px
-	transition .3s
-	color var(--sco-white)
-	border-radius 40px
-
-	+maxWidth768()
-		display: none
-
-	i 
-		font-size 22px
-
-	&:hover 
-		background var(--sco-main)
-		color var(--sco-white) !important
-
-		.back-menu-list-groups 
-			display flex
-			opacity 1
-			transition .3s
-			top 55px
-			pointer-events auto
-			left 1.5rem
-
-			+maxWidth768()
-				padding-bottom 8px
-				box-shadow var(--sco-shadow-border)
-				left: 0
-
-	.back-menu-list-group 
-		display flex
-		flex-direction column
-
-		.back-menu-list-title 
-			margin 8px 0 0 16px
-			transition .3s
-
-		&:hover 
-			.back-menu-list-title 
-				color var(--sco-main)
-
-	.back-menu-list-groups 
-		position absolute
-		top 65px
-		left 1.5rem
-		background var(--sco-card-bg)
-		border-radius 12px
-		border var(--style-border)
-		flex-direction column
-		font-size 12px
-		color var(--sco-secondtext)
-		box-shadow var(--sco-shadow-border)
-		transition 0s
-		opacity 0
-		pointer-events none
-
-		+maxWidth768()
-			left 0
-
-		&:hover 
-			border var(--style-border-hover)
-
-	.back-menu-list 
-		.back-menu-item 
-			width 150px
-
-.nav-fixed 
-	#nav 
-		.back-home-button 
-			color var(--sco-fontcolor)
-		a 
-			color var(--sco-fontcolor)
-			transition .3s
-
-			&:hover 
-				background var(--sco-main)
-				color var(--sco-white)
-				transition .3s
-
-		#site-name
-			&:hover
-				+minWidth900()
-					background var(--sco-main)
-
-			i 
-				color var(--sco-fontcolor)
-				transition .3s
-
-				+maxWidth768()
-					color var(--sco-fontcolor)
-					transition .3s
-
-	.back-home-button 
-		&:hover 
-			background var(--sco-main)
-			color var(--sco-white) !important
-
-	.menus_item
-		&:hover
-			& >
-				a.site-page
-					+minWidth768()
-						background-color var(--sco-main)
-
-.post 
-	.back-home-button 
-		&:hover 
-			background var(--sco-white-op)
-			color var(--sco-white) !important
-			cursor pointer
-
-	#nav
-		#site-name
-			&:hover
-				+minWidth900()
-					background var(--sco-white-op)
-					align-items center
-
-.back-menu-list-groups 
-	.back-menu-list 
-		display flex
-		flex-direction row
-		flex-wrap wrap
-		width 340px
-		justify-content space-between
-
-		&::before 
-			position absolute
-			top -15px
-			left 0
-			width 100%
-			height 20px
-			content ''
-
-		.back-menu-item 
-			display flex
-			align-items center
-			margin 4px 8px
-			padding 4px 8px !important
-			transition .3s
-			border-radius 8px
-
-			&:hover 
-				background var(--sco-main) !important
-				transform scale(1) !important
-
-				.back-menu-item-text 
-					color var(--sco-white)
-
-			.back-menu-item-icon 
-				width 24px
-				height 24px
-				border-radius 8px
-				background var(--sco-none)
-
-			.back-menu-item-text 
-				font-size 16px
-				margin-left .5rem
-				color var(--sco-fontcolor)
-
-				+maxWidth768()
-					font-size 14px
-
-#nav-music 
-	display flex
-	align-items center
-	z-index 1001
-	position fixed
-	bottom 20px
-	left 20px
-	cursor pointer
-	transition .3s
-	transform-origin left bottom
-	box-shadow var(--sco-shadow-border)
-	border-radius 40px
-	overflow hidden
-	user-select none
-
-	+maxWidth798()
-		display none !important
-
-	span 
-		user-select none
-
-	div 
-		user-select none
-
-	&.playing 
-		box-shadow 0 0 12px -3px var(--sco-none)
-		-webkit-animation playingShadow 5s linear infinite
-
-		.aplayer 
-			background var(--sco-main-op-deep)
-			border var(--style-border-hover)
-			backdrop-filter saturate(180%) blur(20px)
-			-webkit-backdrop-filter blur(20px)
-			transform translateZ(0)
-
-			&.aplayer-withlrc 
-				.aplayer-pic 
-					box-shadow 0 0 14px #ffffffa6
-					-webkit-transform rotate(0) scale(1.1)
-					border-color var(--sco-white)
-					animation-play-state running
-
-				.aplayer-info 
-					color var(--sco-white)
-
-				.aplayer-lrc 
-					width 200px
-					margin-bottom 0
-					opacity 1
-
-			.aplayer-info 
-				.aplayer-controller 
-					.aplayer-bar-wrap 
-						.aplayer-bar 
-							opacity 1
-
-							.aplayer-played 
-								animation-play-state running
-
-		#nav-music-hoverTips 
-			opacity 0
-
-	.aplayer 
-		background var(--sco-card-bg)
-		border-radius 60px
-		height 41px
-		display flex
-		margin 0
-		pointer-events none
-		transition .3s
-		border var(--style-border)
-		box-shadow none
-
-		&.aplayer-withlrc 
-			.aplayer-pic 
-				height 25px
-				width 25px
-				border-radius 40px
-				z-index 1
-				transition .3s
-				-webkit-transform rotate(0) scale(1)
-				border var(--style-border-always)
-				-webkit-animation changeright 24s linear infinite
-				animation-play-state paused
-
-			.aplayer-info 
-				height 100%
-				color var(--sco-fontcolor)
-				margin-left 8px
-				padding 0
-				display flex
-				align-items center
-
-			.aplayer-lrc 
-				width 0
-				opacity 0
-				transition .3s
-				margin-left 8px
-				margin-top -2px
-
-		.aplayer-notice 
-			display none
-
-		.aplayer-miniswitcher 
-			display none
-
-		.aplayer-body 
-			position relative
-			display flex
-			align-items center
-			padding 0 12px 0 8px
-
-		.aplayer-pic 
-			.aplayer-play 
-				opacity 0
-
-			div 
-				display none
-
-		.aplayer-info 
-			.aplayer-music 
-				margin 0
-				display flex
-				align-items center
-				padding 0
-				z-index 1
-
-				.aplayer-author 
-					display none
-
-				.aplayer-title 
-					cursor pointer
-					line-height 1
-					display inline-block
-					white-space nowrap
-					max-width 120px
-					overflow hidden
-					text-overflow ellipsis
-					transition .3s
-
-			.aplayer-controller 
-				position absolute
-				width 100%
-				height 100%
-				top 0
-				left 0
-
-				.aplayer-time 
-					display none
-
-				.aplayer-bar-wrap 
-					margin 0
-					padding 0
-
-					.aplayer-bar 
-						height 100%
-						background 0 0
-						opacity 0
-
-						.aplayer-loaded 
-							display none
-
-						.aplayer-played 
-							height 100%
-							opacity .1
-							background-color var(--sco-white) !important
-							-webkit-animation lightBar 5s ease infinite
-							animation-play-state paused
-
-		&.aplayer-withlist 
-			.aplayer-info 
-				border none
-
-		.aplayer-lrc 
-			p 
-				color #ffffffb3
-				filter blur(1px)
-
-				&.aplayer-lrc-current 
-					color var(--sco-white)
-					border none
-					filter blur(0)
-
-	#nav-music-hoverTips 
-		color var(--sco-white)
-		background var(--sco-main)
-		width 100%
-		height 100%
-		position absolute
-		top 0
-		left 0
-		align-items center
-		justify-content center
-		display flex
-		border-radius 40px
-		opacity 0
-		font-size 12px
-		z-index 2
-		pointer-events none
-		transition .3s
-
-	&:hover 
-		&:not(.playing) 
-			#nav-music-hoverTips 
-				opacity 1
-
-	.aplayer-list 
-		display none
+.page #nav-totop #percent
+  font-size 12px
+  border-radius 35px
+  display flex
+  justify-content center
+  align-items center
+  transition .3s
+  white-space nowrap
+
+.back-home-button
+  display flex
+  width 35px
+  height 35px
+  padding 0 !important
+  align-items center
+  justify-content center
+  margin-right 4px
+  transition .3s
+  color var(--sco-white)
+  border-radius 40px
+
+  +maxWidth768()
+    display: none
+
+  i
+    font-size 22px
+
+  &:hover
+    background var(--sco-main)
+    color var(--sco-white) !important
+
+    .back-menu-list-groups
+      display flex
+      opacity 1
+      transition .3s
+      top 55px
+      pointer-events auto
+      left 1.5rem
+
+      +maxWidth768()
+        padding-bottom 8px
+        box-shadow var(--sco-shadow-border)
+        left: 0
+
+  .back-menu-list-group
+    display flex
+    flex-direction column
+
+    .back-menu-list-title
+      margin 8px 0 0 16px
+      transition .3s
+
+    &:hover
+      .back-menu-list-title
+        color var(--sco-main)
+
+  .back-menu-list-groups
+    position absolute
+    top 65px
+    left 1.5rem
+    background var(--sco-card-bg)
+    border-radius 12px
+    border var(--style-border)
+    flex-direction column
+    font-size 12px
+    color var(--sco-secondtext)
+    box-shadow var(--sco-shadow-border)
+    transition 0s
+    opacity 0
+    pointer-events none
+
+    +maxWidth768()
+      left 0
+
+    &:hover
+      border var(--style-border-hover)
+
+  .back-menu-list
+    .back-menu-item
+      width 150px
+
+.nav-fixed
+  #nav
+    .back-home-button
+      color var(--sco-fontcolor)
+
+    a
+      color var(--sco-fontcolor)
+      transition .3s
+
+      &:hover
+        background var(--sco-main)
+        color var(--sco-white)
+        transition .3s
+
+    #site-name
+      &:hover
+        +minWidth900()
+          background var(--sco-main)
+
+      i
+        color var(--sco-fontcolor)
+        transition .3s
+
+        +maxWidth768()
+          color var(--sco-fontcolor)
+          transition .3s
+
+  .back-home-button
+    &:hover
+      background var(--sco-main)
+      color var(--sco-white) !important
+
+  .menus_item
+    &:hover
+      & >
+      a.site-page
+        +minWidth768()
+          background-color var(--sco-main)
+
+.post
+  .back-home-button
+    &:hover
+      background var(--sco-white-op)
+      color var(--sco-white) !important
+      cursor pointer
+
+  #nav
+    #site-name
+      &:hover
+        +minWidth900()
+          background var(--sco-white-op)
+          align-items center
+
+.back-menu-list-groups
+  .back-menu-list
+    display flex
+    flex-direction row
+    flex-wrap wrap
+    width 340px
+    justify-content space-between
+
+    &::before
+      position absolute
+      top -15px
+      left 0
+      width 100%
+      height 20px
+      content ''
+
+    .back-menu-item
+      display flex
+      align-items center
+      margin 4px 8px
+      padding 4px 8px !important
+      transition .3s
+      border-radius 8px
+
+      &:hover
+        background var(--sco-main) !important
+        transform scale(1) !important
+
+        .back-menu-item-text
+          color var(--sco-white)
+
+      .back-menu-item-icon
+        width 24px
+        height 24px
+        border-radius 8px
+        background var(--sco-none)
+
+      .back-menu-item-text
+        font-size 16px
+        margin-left .5rem
+        color var(--sco-fontcolor)
+
+        +maxWidth768()
+          font-size 14px
+
+#nav-music
+  display flex
+  align-items center
+  z-index 1001
+  position fixed
+  bottom 20px
+  left 20px
+  cursor pointer
+  transition .3s
+  transform-origin left bottom
+  box-shadow var(--sco-shadow-border)
+  border-radius 40px
+  overflow hidden
+  user-select none
+
+  +maxWidth798()
+    display none !important
+
+  span
+    user-select none
+
+  div
+    user-select none
+
+  &.playing
+    box-shadow 0 0 12px -3px var(--sco-none)
+    -webkit-animation playingShadow 5s linear infinite
+
+    .aplayer
+      background var(--sco-main-op-deep)
+      border var(--style-border-hover)
+      backdrop-filter saturate(180%) blur(20px)
+      -webkit-backdrop-filter blur(20px)
+      transform translateZ(0)
+
+      &.aplayer-withlrc
+        .aplayer-pic
+          box-shadow 0 0 14px #ffffffa6
+          -webkit-transform rotate(0) scale(1.1)
+          border-color var(--sco-white)
+          animation-play-state running
+
+        .aplayer-info
+          color var(--sco-white)
+
+        .aplayer-lrc
+          width 200px
+          margin-bottom 0
+          opacity 1
+
+      .aplayer-info
+        .aplayer-controller
+          .aplayer-bar-wrap
+            .aplayer-bar
+              opacity 1
+
+              .aplayer-played
+                animation-play-state running
+
+    #nav-music-hoverTips
+      opacity 0
+
+  .aplayer
+    background var(--sco-card-bg)
+    border-radius 60px
+    height 41px
+    display flex
+    margin 0
+    pointer-events none
+    transition .3s
+    border var(--style-border)
+    box-shadow none
+
+    &.aplayer-withlrc
+      .aplayer-pic
+        height 25px
+        width 25px
+        border-radius 40px
+        z-index 1
+        transition .3s
+        -webkit-transform rotate(0) scale(1)
+        border var(--style-border-always)
+        -webkit-animation changeright 24s linear infinite
+        animation-play-state paused
+
+      .aplayer-info
+        height 100%
+        color var(--sco-fontcolor)
+        margin-left 8px
+        padding 0
+        display flex
+        align-items center
+
+      .aplayer-lrc
+        width 0
+        opacity 0
+        transition .3s
+        margin-left 8px
+        margin-top -2px
+
+    .aplayer-notice
+      display none
+
+    .aplayer-miniswitcher
+      display none
+
+    .aplayer-body
+      position relative
+      display flex
+      align-items center
+      padding 0 12px 0 8px
+
+    .aplayer-pic
+      .aplayer-play
+        opacity 0
+
+      div
+        display none
+
+    .aplayer-info
+      .aplayer-music
+        margin 0
+        display flex
+        align-items center
+        padding 0
+        z-index 1
+
+        .aplayer-author
+          display none
+
+        .aplayer-title
+          cursor pointer
+          line-height 1
+          display inline-block
+          white-space nowrap
+          max-width 120px
+          overflow hidden
+          text-overflow ellipsis
+          transition .3s
+
+      .aplayer-controller
+        position absolute
+        width 100%
+        height 100%
+        top 0
+        left 0
+
+        .aplayer-time
+          display none
+
+        .aplayer-bar-wrap
+          margin 0
+          padding 0
+
+          .aplayer-bar
+            height 100%
+            background 0 0
+            opacity 0
+
+            .aplayer-loaded
+              display none
+
+            .aplayer-played
+              height 100%
+              opacity .1
+              background-color var(--sco-white) !important
+              -webkit-animation lightBar 5s ease infinite
+              animation-play-state paused
+
+    &.aplayer-withlist
+      .aplayer-info
+        border none
+
+    .aplayer-lrc
+      p
+        color #ffffffb3
+        filter blur(1px)
+
+        &.aplayer-lrc-current
+          color var(--sco-white)
+          border none
+          filter blur(0)
+
+  #nav-music-hoverTips
+    color var(--sco-white)
+    background var(--sco-main)
+    width 100%
+    height 100%
+    position absolute
+    top 0
+    left 0
+    align-items center
+    justify-content center
+    display flex
+    border-radius 40px
+    opacity 0
+    font-size 12px
+    z-index 2
+    pointer-events none
+    transition .3s
+
+  &:hover
+    &:not(.playing)
+      #nav-music-hoverTips
+        opacity 1
+
+  .aplayer-list
+    display none
 
 #nav-music .aplayer .aplayer-lrc:after,
-#nav-music .aplayer .aplayer-lrc:before 
-	display none
-
-i 
-	&.fab 
-		font-size 20px
-		vertical-align middle
-		margin-bottom 4px
-
-#body-wrap 
-	.full_page 
-		&:before 
-			background-color var(--sco-none) !important
-			transition 0s !important
-
-.full_page 
-	#page-header 
-		&:before 
-			display none !important
-
-.snackbar-container 
-	background var(--sco-main) !important
-	color var(--sco-white) !important
-	border-radius 0 !important
-	display flex
-	justify-content center !important
-	max-width none !important
-	min-width 100% !important
-	margin 0 !important
-	left 0 !important
-	height 60px !important
-	transform none !important
-
-	p 
-		font-weight 700 !important
-		text-align center !important
-		font-size .8rem !important
-		display flex !important
-		justify-content center !important
-
-	.action 
-		color var(--sco-white) !important
-		padding 4px 6px !important
-		font-weight 700
-		border-radius 8px !important
-		transition .3s
-		border var(--style-border) !important
-
-		&:hover 
-			color var(--sco-main) !important
-			background var(--sco-white) !important
-
-	&::after 
-		position absolute
-		width 0
-		height 100%
-		left 0
-		top 0
-		background var(--sco-white)
-		opacity .1
-		content ""
-		animation snackbar-progress var(--sco-snackbar-time) linear forwards
-		pointer-events none
-
-.page 
-	#nav 
-		a 
-			&:hover 
-				color var(--sco-white)
-				background var(--sco-main)
-				transition .3s
-				box-shadow var(--sco-shadow-main)
-
-	.menus_item
-		&:hover
-			& >
-				a.site-page
-					+minWidth768()
-						color var(--sco-white) !important
-						background var(--sco-main)
-						transition .3s
-						box-shadow var(--sco-shadow-main)
-
-	#site-name
-		i
-			+maxWidth768()
-				color var(--sco-fontcolor)
-
-.error 
-	#nav 
-		a 
-			&:hover 
-				background var(--sco-main)
-
-		#site-name
-			i
-				+maxWidth768()
-					color var(--sco-fontcolor)
-
-#search-mask 
-	backdrop-filter blur(12px)
-	-webkit-backdrop-filter blur(12px)
-	transform translateZ(0)
-	background var(--sco-maskbgdeep)
-
-#algolia-search 
-	.search-dialog 
-		.ais-search-box 
-			padding-top 8px
-
-			input 
-				border-radius 8px !important
-				border var(--style-border)
-
-				&:focus 
-					border var(--style-border-hover)
-
-				&::placeholder 
-					opacity .6
-
-		.ais-hits--item 
-			&.algolia-hit-item 
-				padding-left 0
-				font-weight 700
-
-				a 
-					&:hover 
-						color var(--sco-hovertext)
-
-				&:before 
-					display none
-
-				em 
-					color var(--sco-theme)
-					font-style normal
-
-		.algolia-logo 
-			display none
-
-		.ais-pagination 
-			&.pagination 
-				margin .2rem 0 0
-
-				.ais-pagination--item 
-					&.current 
-						a 
-							border-radius 4px
-							background var(--sco-main)
-							color var(--sco-white)
-
-#algolia-input-panel 
-	margin-bottom 8px
-
-.search-dialog 
-	border-radius 12px !important
-	box-shadow var(--sco-shadow-lightblack)
-	background var(--sco-card-bg)
-	border var(--style-border)
-	transition .3s
-
-	&:hover 
-		border var(--style-border-hover)
-		box-shadow var(--sco-shadow-theme)
-
-.search-dialog__title 
-	font-weight 700
-	color var(--sco-main)
-
-#algolia-tips 
-	padding-top 12px
-	color var(--sco-secondtext)
-	right 0
-	margin auto
-
-	i 
-		font-size 22px
-
-.algolia-tips-text 
-	margin-left .4rem
-
-#algolia-search-results 
-	padding-top 8px
-
-#weblogo 
-	align-self center
-
-#menus 
-	& > div 
-		&.menus_items 
-			& > div 
-				& > a 
-					letter-spacing .3rem
-					padding-left .7rem
-					font-weight 700
-					padding-top 0
-					padding-bottom 0
-					height 35px
-					line-height 35px
-					border-radius 40px
-					
-#travellings_button 
-	display inline
-	padding 0 .4rem
-	transition .3s
+#nav-music .aplayer .aplayer-lrc:before
+  display none
+
+i
+  &.fab
+    font-size 20px
+    vertical-align middle
+    margin-bottom 4px
+
+#body-wrap
+  .full_page
+    &:before
+      background-color var(--sco-none) !important
+      transition 0s !important
+
+.full_page
+  #page-header
+    &:before
+      display none !important
+
+.snackbar-container
+  background var(--sco-main) !important
+  color var(--sco-white) !important
+  border-radius 0 !important
+  display flex
+  justify-content center !important
+  max-width none !important
+  min-width 100% !important
+  margin 0 !important
+  left 0 !important
+  height 60px !important
+  transform none !important
+
+  p
+    font-weight 700 !important
+    text-align center !important
+    font-size .8rem !important
+    display flex !important
+    justify-content center !important
+
+  .action
+    color var(--sco-white) !important
+    padding 4px 6px !important
+    font-weight 700
+    border-radius 8px !important
+    transition .3s
+    border var(--style-border) !important
+
+    &:hover
+      color var(--sco-main) !important
+      background var(--sco-white) !important
+
+  &::after
+    position absolute
+    width 0
+    height 100%
+    left 0
+    top 0
+    background var(--sco-white)
+    opacity .1
+    content ""
+    animation snackbar-progress var(--sco-snackbar-time) linear forwards
+    pointer-events none
+
+.page
+  #nav
+    a
+      &:hover
+        color var(--sco-white)
+        background var(--sco-main)
+        transition .3s
+        box-shadow var(--sco-shadow-main)
+
+  .menus_item
+    &:hover
+      & >
+      a.site-page
+        +minWidth768()
+          color var(--sco-white) !important
+          background var(--sco-main)
+          transition .3s
+          box-shadow var(--sco-shadow-main)
+
+  #site-name
+    i
+      +maxWidth768()
+        color var(--sco-fontcolor)
+
+.error
+  #nav
+    a
+      &:hover
+        background var(--sco-main)
+
+    #site-name
+      i
+        +maxWidth768()
+          color var(--sco-fontcolor)
+
+#search-mask
+  backdrop-filter blur(12px)
+  -webkit-backdrop-filter blur(12px)
+  transform translateZ(0)
+  background var(--sco-maskbgdeep)
+
+#algolia-search
+  .search-dialog
+    .ais-search-box
+      padding-top 8px
+
+      input
+        border-radius 8px !important
+        border var(--style-border)
+
+        &:focus
+          border var(--style-border-hover)
+
+        &::placeholder
+          opacity .6
+
+    .ais-hits--item
+      &.algolia-hit-item
+        padding-left 0
+        font-weight 700
+
+        a
+          &:hover
+            color var(--sco-hovertext)
+
+        &:before
+          display none
+
+        em
+          color var(--sco-theme)
+          font-style normal
+
+    .algolia-logo
+      display none
+
+    .ais-pagination
+      &.pagination
+        margin .2rem 0 0
+
+        .ais-pagination--item
+          &.current
+            a
+              border-radius 4px
+              background var(--sco-main)
+              color var(--sco-white)
+
+#algolia-input-panel
+  margin-bottom 8px
+
+.search-dialog
+  border-radius 12px !important
+  box-shadow var(--sco-shadow-lightblack)
+  background var(--sco-card-bg)
+  border var(--style-border)
+  transition .3s
+
+  &:hover
+    border var(--style-border-hover)
+    box-shadow var(--sco-shadow-theme)
+
+.search-dialog__title
+  font-weight 700
+  color var(--sco-main)
+
+#algolia-tips
+  padding-top 12px
+  color var(--sco-secondtext)
+  right 0
+  margin auto
+
+  i
+    font-size 22px
+
+.algolia-tips-text
+  margin-left .4rem
+
+#algolia-search-results
+  padding-top 8px
+
+#weblogo
+  align-self center
+
+#menus
+  & > div
+    &.menus_items
+      & > div
+        & > a
+          letter-spacing .3rem
+          padding-left .7rem
+          font-weight 700
+          padding-top 0
+          padding-bottom 0
+          height 35px
+          line-height 35px
+          border-radius 40px
+
+#travellings_button
+  display inline
+  padding 0 .4rem
+  transition .3s
+
+  +maxWidth1200()
+    display none
 
 #page-name
-	+minWidth900()
-		align-items center
-		display flex
-		border-radius 12px
-		height 40px
-		position absolute
-		top 62px
-		left 0
-		right 0
-		margin auto
-		justify-content center
-		animation-timing-function ease-out
-		-webkit-animation-timing-function ease-out
+  +minWidth900()
+    align-items center
+    display flex
+    border-radius 12px
+    height 40px
+    position absolute
+    top 62px
+    left 0
+    right 0
+    margin auto
+    justify-content center
+    animation-timing-function ease-out
+    -webkit-animation-timing-function ease-out
 
 #page-name-mask
-	+minWidth900()
-		width 100%
-		height 100%
-		position absolute
-		overflow hidden
-		left 0
+  +minWidth900()
+    width 100%
+    height 100%
+    position absolute
+    overflow hidden
+    left 0
 
 .menus_item
-	&:hover
-		& >
-			a.site-page
-				+minWidth768()
-					color var(--sco-white) !important
-					background var(--sco-white-op)
-					transition .3s;
-					box-shadow var(--sco-shadow-main)
+  &:hover
+    & >
+    a.site-page
+      +minWidth768()
+        color var(--sco-white) !important
+        background var(--sco-white-op)
+        transition .3s;
+        box-shadow var(--sco-shadow-main)
 
 .post-bg
-	#post-cover
-		+minWidth768()
-			min-height 15rem !important
-			height 70% !important
-			opacity 1 !important
+  #post-cover
+    +minWidth768()
+      min-height 15rem !important
+      height 70% !important
+      opacity 1 !important
 
 #post-info
-	.post-title
-		+minWidth1300()
-			width 1100px
-			font-size 2.6rem !important
+  .post-title
+    +minWidth1300()
+      width 1100px
+      font-size 2.6rem !important
 
 a.console_switchbutton
-	padding 4px 8px!important
-	cursor pointer
+  padding 4px 8px !important
+  cursor pointer
 
 #nav-console
-	+maxWidth768()
-		display none
\ No newline at end of file
+  +maxWidth768()
+    display none
\ No newline at end of file
diff --git a/source/css/_layout/index.styl b/source/css/_layout/index.styl
new file mode 100644
index 00000000..2bb379ae
--- /dev/null
+++ b/source/css/_layout/index.styl
@@ -0,0 +1,213 @@
+// 文章列表
+#recent-posts
+  position relative
+
+  > .recent-post-item
+    box-shadow var(--sco-shadow-light2black)
+    display flex
+    -webkit-box-orient horizontal
+    -webkit-box-align center
+    align-items center
+    animation slide-in .6s .4s backwards
+    transition all .3s ease 0s
+    overflow hidden
+    height fit-content
+    background var(--sco-card-bg)
+    border-radius 12px
+    cursor pointer
+    border var(--style-border)
+
+    &:hover
+      box-shadow var(--card-hover-box-shadow)
+      border var(--style-border-hover)
+
+      .post_cover img.post_bg
+        transform scale(1.03)
+        transition .3s ease-in-out
+        filter brightness(.85)
+
+    &.ads-wrap
+      display block !important
+      height auto !important
+
+    .post_cover
+      overflow hidden
+      width 45%
+      height 100%
+      -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
+
+      img.post_bg
+        width 100%
+        height 100%
+        transition all .6s ease 0s
+        object-fit cover
+
+        &:hover
+          transform scale(1.1)
+
+    > .recent-post-info
+      height 174px
+      width 100%
+      cursor pointer
+      position relative
+      padding 0
+      display inline-block
+      overflow hidden
+
+      &.no-cover
+        width 100%
+
+      > .article-title
+        line-height 1.4
+        margin-top 0
+        font-weight 700
+        color var(--sco-fontcolor)
+        margin-bottom 0
+        position absolute
+        width 100%
+        left 0
+        padding 0 40px
+        transition .3s
+
+        &:hover
+          color var(--sco-fontcolor)
+
+      > .article-meta-wrap
+        position absolute
+        bottom 16px
+        transition .3s
+        display flex
+        flex-direction row
+        flex-wrap nowrap
+        justify-content space-between
+        width 100%
+        left 0
+        padding 0 32px
+        white-space nowrap
+        color var(--sco-fontcolor)
+        font-size .7rem
+
+        > .post-meta-date
+          right 0
+          text-align right
+
+          i
+            display none
+
+        .article-meta__separator
+          display none
+
+        a:hover
+          background-color var(--sco-none)
+          color var(--sco-lighttext)
+          cursor pointer
+          border-radius 4px
+
+        i
+          margin 0 .4rem 0 0
+
+        .sticky
+          color var(--sco-fontcolor)
+
+      > .content
+        line-height 1.4
+        color var(--sco-secondtext)
+        margin-top 0
+        cursor pointer
+        transition .3s
+        opacity 1
+        position absolute
+        width 100%
+        left 0
+        padding 0 40px
+        -webkit-line-clamp 2
+
+  > div > i .post_cover
+    display none
+
+  .recent-post-item
+    .left_radius a, .right_radius a
+      min-height 100%
+      min-width 100%
+
+@media screen and (max-width: 768px) {
+  #recent-posts > .recent-post-item {
+    border-radius: 12px 12px 8px 8px
+  }
+}
+
+#post > #post-info {
+  margin-bottom: 1.5rem
+}
+
+#post > #post-info .post-title {
+  padding-bottom: .2rem;
+  border-bottom: 1px solid var(--light-grey);
+  color: var(--text-highlight-color)
+}
+
+#post > #post-info .post-title .post-edit-link {
+  float: right
+}
+
+#post > #post-info #post-meta, #post > #post-info #post-meta a {
+  color: #78818a
+}
+
+#post-info .post-title {
+  margin-bottom: .4rem;
+  color: var(--sco-white);
+  font-weight: 400;
+  font-size: 2.5em;
+  line-height: 1.5;
+  -webkit-line-clamp: 3
+}
+
+@media screen and (max-width: 768px) {
+  #post-info .post-title {
+    font-size: 1.72em
+  }
+}
+
+#post-info .post-title .post-edit-link {
+  padding-left: .5rem
+}
+
+#post-info #post-meta {
+  color: var(--light-grey);
+  font-size: 95%
+}
+
+@media screen and (min-width: 768px) {
+  #post-info #post-meta > .meta-secondline > span:first-child {
+    display: none
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #post-info #post-meta {
+    font-size: 90%
+  }
+}
+
+#post-info #post-meta .post-meta-separator {
+  margin: 0 .25rem
+}
+
+#post-info #post-meta .post-meta-icon {
+  margin-right: .2rem
+}
+
+#post-info #post-meta .post-meta-label {
+  margin-right: .2rem
+}
+
+#post-info #post-meta a {
+  color: var(--light-grey);
+  transition: all .3s ease-out 0s
+}
+
+#post-info #post-meta a:hover {
+  color: #307af6;
+  text-decoration: underline
+}
\ No newline at end of file
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
new file mode 100644
index 00000000..d6405e55
--- /dev/null
+++ b/source/css/_layout/layout.styl
@@ -0,0 +1,95 @@
+.layout
+  display flex
+  margin 0 auto
+  padding 1rem 1.5rem
+  max-width 1200px
+
+  &#content-inner
+    max-width 1400px
+
+  &.hide-aside
+    max-width 1400px
+
+    > div
+      width 100% !important
+
+  #aside-content
+    +maxWidth768()
+      z-index 2
+      background var(--sco-background)
+      padding 0 1rem
+      display flex
+      flex-direction column
+      width 100%
+
+  > div:first-child
+    width calc(100% - 300px)
+
+  > div:first-child:not(.recent-posts)
+    box-shadow var(--sco-shadow-border)
+    padding 1rem 2rem
+    border-radius 12px
+    background var(--sco-card-bg)
+    border var(--style-border)
+    width calc(100% - 300px)
+    align-self flex-start
+    animation slide-in .6s .1s backwards
+    position relative
+    overflow hidden
+
+    &:hover
+      box-shadow var(--sco-shadow-border-hover)
+
+  +maxWidth768()
+    padding: 0
+
+    > div:first-child:not(.recent-posts)
+      border-radius: 0;
+      padding: 0 1rem !important;
+      box-shadow: none !important;
+      background: var(--sco-background)
+      z-index: 10
+
+  +maxWidth900()
+    flex-direction: column
+
+  +maxWidth1200()
+    > div:first-child
+      width 100% !important
+
+  +minWidth1300()
+    justify-content space-between
+
+  +minWidth2000()
+    max-width 1500px
+
+    &.hide-aside
+      max-width 1300px
+
++maxWidth768()
+  .post
+    .layout
+      > div:first-child:not(.recent-posts)
+        border-radius 12px 12px 0 0
+
+      &#content-inner
+        background: var(--sco-main)
+
+  .page
+    .layout
+      > div:first-child:not(.recent-posts)
+        border-radius: 12px 12px 0 0
+
+      &#content-inner
+        background: var(--sco-background)
+
++minWidth900()
+  html.hide-aside .layout
+    -webkit-box-pack: center
+    justify-content: center
+
+  html.hide-aside .layout > .aside-content
+    display: none
+
+  html.hide-aside .layout > div:first-child
+    width: 100%
\ No newline at end of file
diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl
new file mode 100644
index 00000000..b9ff06dd
--- /dev/null
+++ b/source/css/_layout/sidebar.styl
@@ -0,0 +1,282 @@
+#sidebar #menu-mask {
+  position: fixed;
+  z-index: 1001;
+  display: none;
+  width: 100%;
+  height: 100%;
+  background: var(--sco-maskbg);
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transform: translateZ(0);
+  animation: .6s ease 0s 1 normal none running to_show
+}
+
+#sidebar #sidebar-menus {
+  position: fixed;
+  top: 0;
+  right: -300px;
+  overflow: hidden auto;
+  width: 300px;
+  height: 100%;
+  background: var(--sco-background);
+  transition: all .5s ease 0s;
+  padding-top: 30px;
+  z-index: 1001;
+  border-left: var(--style-border-always)
+}
+
+#sidebar #sidebar-menus.open {
+  transform: translate3d(-100%, 0, 0)
+}
+
+@media screen and (min-width: 768px) {
+  #sidebar #sidebar-menus {
+    display: none
+  }
+}
+
+#sidebar #sidebar-menus .back-menu-list-groups {
+  padding: 0 16px
+}
+
+#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list-title {
+  font-size: 12px;
+  color: var(--sco-secondtext)
+}
+
+#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list {
+  width: calc(100% + 16px);
+  justify-content: flex-start;
+  margin: 0 -8px
+}
+
+#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list .back-menu-item {
+  background: var(--sco-card-bg);
+  border: var(--style-border-always);
+  border-radius: 8px
+}
+
+@media screen and (max-width: 768px) {
+  #sidebar #sidebar-menus .back-menu-list-groups .back-menu-list .back-menu-item {
+    width: calc(50% - 16px)
+  }
+}
+
+#sidebar #sidebar-menus .back-home-button {
+  display: none
+}
+
+#sidebar #sidebar-menus > .author-avatar {
+  padding: 1.3rem 1.5rem 0;
+  text-align: center
+}
+
+#sidebar #sidebar-menus > .author-avatar img {
+  width: 110px;
+  height: 110px;
+  border-radius: 70px;
+  transition: all .5s ease 0s
+}
+
+#sidebar #sidebar-menus > .author-avatar img:hover {
+  transform: rotate(360deg)
+}
+
+#sidebar #sidebar-menus .site-data {
+  display: table;
+  padding: .6rem .5rem 0;
+  width: 100%;
+  table-layout: fixed
+}
+
+#sidebar #sidebar-menus .site-data .data-item {
+  display: table-cell
+}
+
+#sidebar #sidebar-menus .site-data .data-item .data-item-link .length-num {
+  color: var(--text-highlight-color);
+  font-size: 1.28em
+}
+
+#sidebar #sidebar-menus .site-data .data-item .data-item-link .headline {
+  color: var(--sco-fontcolor)
+}
+
+#sidebar #sidebar-menus hr {
+  margin: 1rem auto
+}
+
+#sidebar #sidebar-menus .menus_items {
+  padding: 0 16px
+}
+
+#sidebar #sidebar-menus .menus_items .site-page {
+  position: relative;
+  display: block;
+  padding: 0;
+  color: var(--sco-fontcolor);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700
+}
+
+@media screen and (max-width: 768px) {
+  #sidebar #sidebar-menus .menus_items .site-page {
+    font-weight: 400
+  }
+}
+
+#sidebar #sidebar-menus .menus_items .site-page span:hover {
+  color: #307af6
+}
+
+#sidebar #sidebar-menus .menus_item > .site-page {
+  display: flex;
+  font-size: 12px;
+  color: var(--sco-secondtext)
+}
+
+#sidebar #sidebar-menus .menus_items .expand {
+  position: absolute;
+  top: .78em;
+  right: .4rem;
+  transition: transform .3s ease 0s
+}
+
+#sidebar #sidebar-menus .menus_items .expand.hide {
+  transform: rotate(90deg) !important
+}
+
+#sidebar #sidebar-menus .menus_items .menus_item_child {
+  margin: 0 -4px;
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap
+}
+
+#sidebar #sidebar-menus .menus_item_child .site-page.child {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  border-radius: 8px;
+  border: var(--style-border-always);
+  background: var(--sco-card-bg)
+}
+
+#sidebar #sidebar-menus .menus_item_child li {
+  width: calc(50% - 8px);
+  margin: 4px
+}
+
+#sidebar #sidebar-menus .menus_item_child .site-page.child span {
+  line-height: 1;
+  margin-top: 8px;
+  font-size: 14px
+}
+
+#sidebar #sidebar-menus .card-tag-cloud {
+  padding: 0 16px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 60px
+}
+
+#sidebar #sidebar-menus .card-tag-cloud a {
+  color: var(--sco-fontcolor) !important;
+  padding: 2px 8px 2px 12px;
+  margin: 4px;
+  border-radius: 8px;
+  border: var(--style-border-always);
+  background: var(--sco-card-bg);
+  font-size: 14px !important
+}
+
+#sidebar #sidebar-menus .card-tag-cloud a sup {
+  opacity: .6;
+  margin-left: 4px
+}
+
+#sidebar #sidebar-menus span.sidebar-menu-item-title {
+  font-size: 12px;
+  color: var(--sco-secondtext);
+  margin-left: 16px
+}
+
+#sidebar #sidebar-menus .sidebar-menu-item {
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  margin-bottom: 6px
+}
+
+#sidebar #sidebar-menus .sidebar-menu-item a.menu-child {
+  width: 100%;
+  background: var(--sco-card-bg);
+  border-radius: 8px;
+  border: var(--style-border-always);
+  display: flex;
+  align-items: center;
+  font-size: 14px
+}
+
+#sidebar #sidebar-menus .sidebar-menu-item a.menu-child i {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+#sidebar #sidebar-menus .sidebar-menu-item a.menu-child span {
+  margin-left: 10px
+}
+
+#sidebar #sidebar-menus .webinfo {
+  padding: 0 16px;
+  display: flex;
+  white-space: nowrap;
+  flex-direction: column
+}
+
+#sidebar #sidebar-menus .webinfo .webinfo-item {
+  justify-content: space-between
+}
+
+#sidebar #sidebar-menus .menus_items .site-page span:hover {
+  color: var(--sco-fontcolor)
+}
+
+#mobile-sidebar #mobile-sidebar-menus.open {
+  background: var(--sco-maskbg)
+}
+
+#sidebar #sidebar-menus .site-data {
+  margin: 1rem 0;
+  padding: .6rem .5rem
+}
+
+#sidebar-menus > hr {
+  display: none
+}
+
+#toggle-sidebar {
+  bottom: 80px
+}
+
+#sidebar {
+  background: var(--sco-maskbg)
+}
+
+@media screen and (max-width: 768px) {
+  #sidebar #sidebar-menus .menus_items li .site-page:hover {
+    background: var(--sco-main);
+    color: var(--sco-white)
+  }
+
+  #sidebar #sidebar-menus .menus_items li .site-page span:hover {
+    color: var(--sco-white)
+  }
+}
\ No newline at end of file
diff --git a/source/css/_page/about.styl b/source/css/_page/about.styl
new file mode 100644
index 00000000..e1130f57
--- /dev/null
+++ b/source/css/_page/about.styl
@@ -0,0 +1,1067 @@
+#about-page {
+  display: flex;
+  padding-top: 1rem;
+  flex-direction: column;
+  align-items: center
+}
+
+#about-page .author-info {
+  display: flex;
+  align-items: center;
+  margin: 0 0 16px 0
+}
+
+#about-page .author-tag-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end
+}
+
+#about-page .author-tag-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start
+}
+
+@media screen and (max-width: 768px) {
+  #about-page .author-tag-left, #about-page .author-tag-right {
+    display: none
+  }
+}
+
+#about-page .author-tag-left .author-tag:first-child, #about-page .author-tag-left .author-tag:last-child {
+  margin-right: -16px
+}
+
+#about-page .author-tag-right .author-tag:first-child, #about-page .author-tag-right .author-tag:last-child {
+  margin-left: -16px
+}
+
+#about-page .author-tag {
+  transform: translate(0, -4px);
+  padding: 1px 8px;
+  background: var(--sco-card-bg);
+  border: var(--style-border-always);
+  border-radius: 40px;
+  margin-top: 6px;
+  font-size: 14px;
+  font-weight: 700;
+  box-shadow: var(--sco-shadow-lightblack);
+  animation: 6s ease-in-out 0s infinite normal none running floating
+}
+
+#about-page .author-tag:nth-child(1) {
+  animation-delay: 0s
+}
+
+#about-page .author-tag:nth-child(2) {
+  animation-delay: .6s
+}
+
+#about-page .author-tag:nth-child(3) {
+  animation-delay: 1.2s
+}
+
+#about-page .author-tag:nth-child(4) {
+  animation-delay: 1.8s
+}
+
+#about-page .author-img {
+  margin: 0 30px;
+  border-radius: 50%;
+  width: 180px;
+  height: 180px;
+  position: relative;
+  background: var(--sco-secondbg);
+  user-select: none
+}
+
+#about-page .author-img img {
+  border-radius: 200px
+}
+
+#about-page .author-img::before {
+  content: '';
+  -webkit-transition: 1s;
+  -moz-transition: 1s;
+  -o-transition: 1s;
+  -ms-transition: 1s;
+  transition: 1s;
+  width: 30px;
+  height: 30px;
+  background: var(--sco-green);
+  position: absolute;
+  border-radius: 50%;
+  border: 5px solid var(--sco-background);
+  bottom: 5px;
+  right: 10px;
+  z-index: 2
+}
+
+@media screen and (max-width: 768px) {
+  #about-page .author-img {
+    width: 120px;
+    height: 120px
+  }
+
+  #about-page .author-img::before {
+    bottom: -5px;
+    right: -5px
+  }
+}
+
+#about-page .author-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 1rem 0;
+  line-height: 1
+}
+
+
+#about-page .myInfoAndSayHello {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--sco-white);
+  background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);
+  background-size: 200%;
+  animation: gradient 15s ease infinite;
+  width: 59%
+}
+
+#about-page .myInfoAndSayHello .title1 {
+  opacity: .8;
+  line-height: 1.3
+}
+
+#about-page .myInfoAndSayHello .title2 {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.1;
+  margin: .5rem 0
+}
+
+.author-content-item:hover .card-background-icon {
+  transform: rotate(20deg)
+}
+
+.author-content-item-group.column.mapAndInfo {
+  width: 59%
+}
+
+.author-content-item.map {
+  background: var(--site-about-oneself-map--light) no-repeat center;
+  min-height: 160px;
+  max-height: 400px;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: .5rem;
+  height: 60%;
+  background-size: 100%;
+  transition: 1s ease-in-out
+}
+
+[data-theme=dark] .author-content-item.map {
+  background: var(--site-about-oneself-map--dark) no-repeat center;
+  background-size: 100%
+}
+
+.author-content-item.map:hover {
+  background-size: 120%;
+  transition: 4s ease-in-out;
+  background-position-x: 0;
+  background-position-y: 36%
+}
+
+.author-content-item.map .map-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: var(--sco-maskbg);
+  padding: .5rem 2rem;
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transition: 1s ease-in-out;
+  font-size: 20px;
+  transform: translateZ(0)
+}
+
+.author-content-item.map:hover .map-title {
+  bottom: -100%
+}
+
+.author-content-item.map .map-title b {
+  color: var(--sco-fontcolor)
+}
+
+@media screen and (max-width: 768px) {
+  .author-content-item.map.myphoto {
+    background-size: cover !important
+  }
+
+  .author-content-item.map .map-title {
+    padding: 1rem
+  }
+}
+
+.author-content-item.selfInfo {
+  display: flex;
+  min-height: 100px;
+  max-height: 400px;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  height: -webkit-fill-available;
+  height: 40%
+}
+
+@media screen and (max-width: 1300px) {
+  .author-content-item.selfInfo {
+    height: 70%
+  }
+}
+
+.author-content-item.selfInfo div {
+  display: flex;
+  flex-direction: column;
+  margin: .5rem 2rem .5rem 0
+}
+
+.author-content-item.selfInfo .selfInfo-title {
+  opacity: .8;
+  font-size: .6rem;
+  line-height: 1;
+  margin-bottom: 8px
+}
+
+.author-content-item.selfInfo .selfInfo-content {
+  font-weight: 700;
+  font-size: 34px;
+  line-height: 1
+}
+
+.author-content-item.myphoto {
+  height: 60%;
+  min-height: 240px;
+  position: relative;
+  overflow: hidden;
+  width: 39%;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.author-content-item.myphoto img {
+  position: absolute;
+  height: 100%;
+  min-width: 100%;
+  object-fit: cover;
+  transition: .6s;
+  user-select: none
+}
+
+.author-content-item.myphoto:hover img {
+  min-width: 105%;
+  transition: 2s
+}
+
+.author-content-item.myphoto .myphoto-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: var(--sco-maskbgdeep);
+  padding: .5rem 2rem;
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transform: translateZ(0)
+}
+
+.author-content-item.careers {
+  min-height: 400px
+}
+
+.author-content-item.careers img {
+  position: absolute;
+  left: 0;
+  bottom: 20px;
+  width: 100%;
+  transition: .6s;
+  user-select: none
+}
+
+.author-content-item.careers .careers-group {
+  margin-top: 12px
+}
+
+.author-content-item.careers .careers-item {
+  display: flex;
+  align-items: center
+}
+
+.author-content-item.careers .careers-item .circle {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  border-radius: 16px
+}
+
+.author-content-item.careers .careers-item .name {
+  color: var(--sco-secondtext)
+}
+
+.author-content-item.personalities {
+  overflow: hidden;
+  position: relative;
+  width: 59%
+}
+
+.author-content-item.personalities .title2 {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.1
+}
+
+.author-content-item.personalities .image {
+  position: absolute;
+  right: -40px;
+  bottom: -10rem;
+  transition: transform 2s cubic-bezier(.13, .45, .21, 1.02);
+  user-select: none
+}
+
+.author-content-item.personalities:hover .image {
+  transform: rotate(-10deg)
+}
+
+@media screen and (max-width: 768px) {
+  .author-content-item.personalities {
+    min-height: 360px
+  }
+
+  .author-content-item.personalities .image {
+    right: -70px
+  }
+}
+
+.author-content-item.maxim {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.1;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+  width: 39%
+}
+
+.author-content-item.maxim .maxim-title {
+  display: flex;
+  flex-direction: column
+}
+
+.author-content-item.maxim .title1 {
+  opacity: .8;
+  font-size: .6rem;
+  margin-bottom: .5rem
+}
+
+.author-content-item.buff {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.1;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+  background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%);
+  color: var(--sco-white);
+  background-size: 200%;
+  animation: gradient 15s ease infinite;
+  min-height: 200px;
+  height: fit-content;
+  width: 59%
+}
+
+.author-content-item.buff .card-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center
+}
+
+.author-content-item.buff .buff-title {
+  display: flex;
+  flex-direction: column
+}
+
+.author-content-item.buff .title1 {
+  opacity: .8;
+  font-size: .6rem;
+  margin-bottom: .5rem
+}
+
+.author-content-item.skills {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-direction: column;
+  width: 49%;
+  min-height: 450px
+}
+
+.author-content-item.skills .tags-group-all {
+  display: flex;
+  transform: rotate(0);
+  transition: .3s
+}
+
+.author-content-item.skills .tags-group-wrapper {
+  margin-top: 40px;
+  display: flex;
+  flex-wrap: nowrap;
+  animation: rowup 60s linear infinite
+}
+
+.author-content-item.skills .skills-style-group {
+  position: relative
+}
+
+.author-content-item.skills .skills-list {
+  display: flex;
+  opacity: 0;
+  transition: .3s;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin-top: 10px
+}
+
+.author-content-item.skills:hover .skills-style-group .tags-group-all {
+  opacity: 0
+}
+
+.author-content-item.skills:hover .skills-style-group .skills-list {
+  opacity: 1
+}
+
+.author-content-item.skills .skill-info {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  background: var(--sco-background);
+  border-radius: 40px;
+  padding: 4px 12px 4px 8px;
+  border: var(--style-border);
+  box-shadow: var(--sco-shadow-border)
+}
+
+.author-content-item.skills .etc {
+  margin-right: 10px;
+  margin-top: 10px
+}
+
+.author-content-item.skills .skill-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  user-select: none
+}
+
+.author-content-item.skills .skill-icon img {
+  width: 18px;
+  height: 18px
+}
+
+.author-content-item.skills .skill-name {
+  font-weight: 700;
+  line-height: 1
+}
+
+.author-content-item.aboutsiteTips {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-direction: column;
+  width: 39%
+}
+
+.aboutsiteTips h2 {
+  margin-right: auto;
+  font-size: 36px;
+  font-family: Helvetica;
+  line-height: 1.06;
+  letter-spacing: -.02em;
+  color: var(--sco-fontcolor);
+  margin-top: 0
+}
+
+.aboutsiteTips .mask {
+  height: 36px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 4px
+}
+
+.aboutsiteTips .mask span {
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  top: 36px;
+  padding-bottom: var(--offset);
+  background-size: 100% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-repeat: no-repeat
+}
+
+.aboutsiteTips .mask span[data-show] {
+  transform: translateY(-100%);
+  transition: .5s transform ease-in-out
+}
+
+.aboutsiteTips .mask span[data-up] {
+  transform: translateY(-200%);
+  transition: .5s transform ease-in-out
+}
+
+.aboutsiteTips .mask span:nth-child(1) {
+  background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1)
+}
+
+.aboutsiteTips .mask span:nth-child(2) {
+  background-image: linear-gradient(45deg, #18e198 50%, #0ec15d)
+}
+
+.aboutsiteTips .mask span:nth-child(3) {
+  background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c)
+}
+
+.aboutsiteTips .mask span:nth-child(4) {
+  background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f)
+}
+
+@media screen and (max-width: 768px) {
+  .author-content-item.map {
+    margin-bottom: 0
+  }
+}
+
+#about-page .about-statistic {
+  min-height: 380px;
+  width: 39%;
+  background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp) no-repeat top;
+  background-size: cover;
+  color: var(--sco-white);
+  overflow: hidden
+}
+
+#about-page .about-statistic::after {
+  box-shadow: 0 -159px 173px 71px #0f1114 inset;
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0
+}
+
+#about-page .about-statistic .banner-button {
+  background: var(--sco-white-op)
+}
+
+#about-page .about-statistic .banner-button:hover {
+  background: var(--sco-theme)
+}
+
+#statistic {
+  font-size: 16px;
+  border-radius: 15px;
+  width: 100%;
+  color: var(--sco-white);
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+  margin-bottom: 2rem
+}
+
+#statistic div {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  width: 50%;
+  margin-bottom: .5rem
+}
+
+#statistic div span:first-child {
+  opacity: .8;
+  font-size: .6rem
+}
+
+#statistic div span:last-child {
+  font-weight: 700;
+  font-size: 34px;
+  line-height: 1;
+  white-space: nowrap
+}
+
+.author-content-item.about-statistic .card-content .banner-button-group .banner-button:hover {
+  background: #998c5a;
+  color: var(--sco-white)
+}
+
+.author-content-item.single.reward .author-content-item .author-content-item-title {
+  color: var(--sco-red)
+}
+
+.author-content-item.single.reward .reward-list-all {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin: 1rem -.25rem .5rem;
+}
+
+.author-content-item.single.reward .reward-list-all .reward-list-item {
+  padding: 1rem;
+  border-radius: 12px;
+  border: var(--style-border-always);
+  width: calc((100% / 6) - .5rem);
+  margin: 0 .25rem .5rem .25rem;
+  box-shadow: var(--sco-shadow-border);
+  flex-direction: column;
+  justify-content: space-between
+}
+
+.reward-list-tips p {
+  font-size: 12px;
+  color: var(--sco-secondtext)
+}
+
+@media screen and (max-width: 1200px) {
+  .author-content-item.single.reward .reward-list-all .reward-list-item {
+    width: calc((100% / 4) - .5rem)
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .author-content-item.single.reward .reward-list-all .reward-list-item {
+    width: calc((100% / 2) - .5rem)
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .author-content-item.single.reward .reward-list-all .reward-list-item {
+    width: 100%
+  }
+}
+
+.author-content-item.single.reward .author-content-item-description {
+  font-size: 16px;
+  margin-top: .5rem
+}
+
+.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-name {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: .5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-bottom-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between
+}
+
+.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-money {
+  padding: 4px;
+  background: var(--sco-fontcolor);
+  color: var(--sco-card-bg);
+  font-size: 12px;
+  line-height: 1;
+  border-radius: 4px;
+  margin-right: 4px;
+  white-space: nowrap
+}
+
+.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-time {
+  font-size: 12px;
+  color: var(--sco-secondtext);
+  white-space: nowrap
+}
+
+.author-content-item.single.reward .reward-list-updateDate {
+  color: var(--sco-gray);
+  font-size: 14px
+}
+
+.author-content-item.single.reward .post-reward {
+  position: absolute;
+  right: 2rem;
+  top: 2rem
+}
+
+.author-content-item.single.reward .post-reward .reward-button {
+  padding: 8px 12px;
+  background: var(--sco-red);
+  border-radius: 12px;
+  color: var(--sco-white);
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  transition: .3s;
+  cursor: pointer;
+  box-shadow: none;
+  width: fit-content;
+  height: fit-content;
+  line-height: 2;
+  user-select: none
+}
+
+.author-content-item.single.reward .post-reward:hover .reward-button {
+  filter: brightness(1.1)
+}
+
+@media screen and (max-width: 768px) {
+  .author-content-item.single.reward .post-reward .reward-button {
+    display: none
+  }
+}
+
+.author-content-item.single.reward .post-reward .reward-button i {
+  margin-right: 8px;
+  font-size: 1rem
+}
+
+.author-content-item.single.reward .post-reward .reward-main {
+  top: 60px;
+  right: 0;
+  left: auto;
+  bottom: auto;
+  width: fit-content;
+  box-shadow: var(--sco-shadow-border)
+}
+
+.author-content-item.single.reward .post-reward .reward-main .reward-all::before {
+  bottom: auto;
+  top: -16px
+}
+
+.author-content-item.single.reward a.reward-main-btn {
+  display: none
+}
+
+.author-content-item.game-apex {
+  min-height: 300px;
+  overflow: hidden;
+  color: var(--sco-white);
+  width: 59%
+}
+
+.author-content-item .card-content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 2rem
+}
+
+@media screen and (max-width: 768px) {
+  .author-content-item .card-content {
+    padding: 1rem
+  }
+}
+
+@media screen and (min-width: 1300px) {
+  .author-content-item {
+    animation: slide-in .6s 0s backwards
+  }
+}
+
+.author-content-item.game-apex::after {
+  box-shadow: 0 -69px 203px 11px #04120f inset;
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0
+}
+
+.author-content-item .content-bottom {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between
+}
+
+.author-content-item .content-bottom .icon-group {
+  display: flex
+}
+
+.author-content-item .content-bottom .icon-group i {
+  display: inline-block;
+  width: 22px;
+  height: 18px;
+  margin-right: .5rem
+}
+
+.icon-pos-sup {
+  background: url(https://bu.dusays.com/2023/03/12/640dc913ee26b.webp)
+}
+
+.icon-pos-mid {
+  background: url(https://bu.dusays.com/2023/03/12/640dc931a2cd4.webp)
+}
+
+.author-content-item.game-jl {
+  width: 39%;
+  min-height: 300px;
+  overflow: hidden;
+  color: var(--sco-white)
+}
+
+.author-content-item.game-jl::after {
+  box-shadow: 0 -69px 203px 11px #415dc9 inset;
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0
+}
+
+.author-content-item.like-technology {
+  background-size: cover;
+  min-height: 230px;
+  color: var(--sco-white)
+}
+
+.author-content-item.like-technology::after {
+  box-shadow: 0 -69px 203px 11px #050b20 inset;
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0
+}
+
+.author-content-item.like-music {
+  background-size: cover;
+  min-height: 400px;
+  color: var(--sco-white);
+  overflow: hidden
+}
+
+.author-content-item.like-music::after {
+  box-shadow: 0 -69px 203px 11px #0e0e0e inset;
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0
+}
+
+.author-content-item .card-content .author-content-item-title {
+  margin-bottom: .5rem
+}
+
+.author-content-item .card-content .banner-button-group {
+  position: absolute;
+  bottom: 1.5rem;
+  right: 2rem
+}
+
+.author-content-item .card-content .banner-button-group .banner-button {
+  height: 40px;
+  width: 118px;
+  border-radius: 20px;
+  justify-content: center;
+  background: var(--sco-black-op);
+  color: var(--sco-white);
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  transition: .3s;
+  cursor: pointer;
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transform: translateZ(0)
+}
+
+.author-content-item .card-content .banner-button-group .banner-button:hover {
+  background: var(--sco-main);
+  color: var(--sco-white)
+}
+
+.author-content-item .card-content .banner-button-group .banner-button i {
+  margin-right: 8px;
+  font-size: 22px
+}
+
+@media screen and (max-width: 768px) {
+  .author-content-item .card-content .banner-button-group {
+    right: 1rem;
+    bottom: 1rem
+  }
+
+  .author-content-item .card-content .banner-button-group .banner-button {
+    background: 0 0;
+    color: var(--sco-white);
+    padding: 0;
+    width: fit-content
+  }
+
+  .author-content-item .card-content .banner-button-group .banner-button i {
+    margin-right: 0;
+    font-size: 1.5rem
+  }
+
+  .author-content-item .card-content .banner-button-group .banner-button-text {
+    display: none
+  }
+}
+
+.author-content-item.single.like-movie {
+  height: 19rem;
+  background-size: cover;
+  color: var(--sco-white);
+  overflow: hidden
+}
+
+.author-content-item.single.like-movie::after {
+  box-shadow: 0 21px 133px 81px #1c1c1c inset;
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0
+}
+
+.author-content.author-content-item.toolPage {
+  height: 19rem;
+  background-size: cover;
+  color: var(--sco-white);
+  overflow: hidden;
+  margin-top: 0
+}
+
+video.author-content-video {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: -1
+}
+
+.author-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 1rem
+}
+
+.author-content-item-group.column {
+  display: flex;
+  flex-direction: column;
+  width: 49%;
+  justify-content: space-between
+}
+
+.author-content-item {
+  width: 49%;
+  border-radius: 12px;
+  background: var(--sco-card-bg);
+  border: var(--style-border-always);
+  box-shadow: var(--sco-shadow-border);
+  position: relative;
+  padding: 1rem 2rem;
+  overflow: hidden
+}
+
+.author-content-item.single {
+  width: 100%
+}
+
+.author-content-item .author-content-item-title {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1
+}
+
+.author-content-item .author-content-item-tips {
+  opacity: .8;
+  font-size: .6rem;
+  margin-bottom: .5rem
+}
+
+@media screen and (max-width: 768px) {
+  .author-content-item {
+    width: 100% !important;
+    margin-top: 1rem;
+    padding: 1rem
+  }
+
+  .author-content-item-group.column {
+    width: 100% !important
+  }
+
+  .author-content {
+    margin-top: 0
+  }
+}
+
+.card-background-icon {
+  font-size: 12rem;
+  opacity: .2;
+  position: absolute;
+  right: 0;
+  bottom: -40%;
+  transform: rotate(30deg);
+  transition: 2s ease-in-out
+}
+
+.post-tips {
+  color: var(--sco-gray);
+  font-size: 14px;
+  position: absolute;
+  bottom: 1rem;
+  left: 2rem
+}
+
+.post-tips a {
+  color: var(--sco-gray) !important;
+  border: none !important
+}
+
+.post-tips a:hover {
+  color: var(--sco-main) !important
+}
+
+@media screen and (max-width: 768px) {
+  .post-tips {
+    left: 1rem
+  }
+}
\ No newline at end of file
diff --git a/source/css/_page/error.styl b/source/css/_page/error.styl
new file mode 100644
index 00000000..c5de7b9a
--- /dev/null
+++ b/source/css/_page/error.styl
@@ -0,0 +1,107 @@
+#error-wrap {
+  display: flex;
+  justify-content: center;
+  margin: 0 1rem;
+  width: 100%;
+  position: relative
+}
+
+#error-wrap .error-content {
+  display: flex;
+  -webkit-box-orient: horizontal;
+  flex-direction: row;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  margin: 0 1rem;
+  height: 18rem;
+  max-width: 800px;
+  border-radius: 5px;
+  background: var(--sco-card-bg);
+  box-shadow: var(--card-box-shadow);
+  transition: all .3s ease 0s;
+  border: var(--style-border-always);
+  position: relative;
+  width: 100%
+}
+
+#error-wrap .error-content:hover {
+  box-shadow: var(--card-hover-box-shadow)
+}
+
+@media screen and (max-width: 768px) {
+  #error-wrap .error-content {
+    -webkit-box-orient: vertical;
+    flex-direction: column;
+    margin: 0;
+    height: 25rem;
+    width: 100%
+  }
+}
+
+#error-wrap .error-content .error-img {
+  -webkit-box-flex: 1;
+  flex: 1 1 0;
+  height: 90%;
+  width: 600px;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  background-color: #307af6;
+  background-position: center center;
+  background-size: cover
+}
+
+@media screen and (max-width: 768px) {
+  #error-wrap .error-content .error-img {
+    -webkit-box-flex: 1;
+    flex: 1 1 0;
+    width: 100%;
+    border-radius: 12px
+  }
+}
+
+#error-wrap .error-content .error-info {
+  -webkit-box-flex: 1;
+  flex: 1 1 0;
+  padding: .5rem;
+  text-align: center;
+  font-size: 14px;
+  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
+}
+
+#error-wrap .error-content .error-info .error_title {
+  font-size: 9em;
+  line-height: 1
+}
+
+@media screen and (max-width: 768px) {
+  #error-wrap .error-content .error-info {
+    -webkit-box-flex: 1.1;
+    flex: 1.1 1 0;
+    width: 100%;
+    padding-bottom: 2rem
+  }
+
+  #error-wrap .error-content .error-info .error_title {
+    font-size: 4rem
+  }
+}
+
+#error-wrap .error-content .error-info .error_subtitle {
+  word-break: break-word;
+  font-size: 1.6em;
+  -webkit-line-clamp: 2
+}
+
+#error-wrap .error-content .error-info a {
+  display: inline-block;
+  margin-top: .5rem;
+  padding: .3rem 1.5rem;
+  background: var(--btn-bg);
+  color: var(--btn-color)
+}
+
+#error-wrap .error-content .error-info a i {
+  padding-right: .3rem
+}
\ No newline at end of file
diff --git a/source/css/_page/homeTop.styl b/source/css/_page/homeTop.styl
new file mode 100644
index 00000000..fe61a89e
--- /dev/null
+++ b/source/css/_page/homeTop.styl
@@ -0,0 +1,810 @@
+a 
+	&.bber-reply 
+		cursor pointer
+
+#home_top {
+	max-width: 1400px;
+	margin: .5rem auto auto;
+	padding: 0 1.5rem
+}
+
+@media screen and (max-width: 768px) {
+	#home_top {
+		padding: 0;
+		margin-top: 0
+	}
+}
+
+.recent-top-post-group {
+	border-radius: 12px;
+	overflow: hidden;
+	overflow-x: auto;
+	width: 100%;
+	margin-bottom: 0;
+	-webkit-user-select: none
+}
+
+@media screen and (min-width: 1300px) {
+	.recent-post-top .recent-post-item {
+		margin-right: 0;
+		margin-bottom: .5rem
+	}
+
+	.recent-post-top {
+		overflow-x: visible
+	}
+
+	.recent-top-post-group {
+		overflow: visible;
+	}
+}
+
+@media screen and (max-width: 768px) {
+	.recent-top-post-group {
+		border-radius: 0;
+		background: var(--sco-background)
+	}
+
+	.recent-post-top-text {
+		display: none !important
+	}
+
+	.recent-post-top .recent-post-item .post_cover img {
+		border-radius: 8px 8px 0 0 !important
+	}
+}
+
+@media screen and (max-width: 768px) {
+	a.categoryButton i {
+		display: none
+	}
+
+	.recent-post-top .categoryGroup {
+		min-width: 130px !important;
+		margin-bottom: .5rem;
+		margin-left: 1rem;
+		max-height: 164px;
+		overflow: hidden;
+		position: relative
+	}
+}
+
+.recent-post-top {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	width: 100%;
+	overflow-x: scroll
+}
+
+.recent-post-top::-webkit-scrollbar {
+	display: none
+}
+
+.recent-post-top .recent-post-item {
+	display: flex;
+	width: 200px;
+	flex-direction: column;
+	align-items: flex-start;
+	margin-left: .5rem;
+	background: var(--sco-card-bg);
+	border-radius: 12px;
+	overflow: hidden;
+	min-width: 200px;
+	height: 164px;
+	max-height: 164px;
+	border: var(--style-border-always);
+	transition: .3s;
+	position: relative;
+	box-shadow: var(--sco-shadow-border)
+}
+
+@media screen and (max-width: 768px) {
+	.recent-post-top .recent-post-item {
+		border-radius: 8px;
+		box-shadow: none;
+		clip-path: inset(0 0 0 0 round 8px)
+	}
+
+	.recent-post-top .recent-post-item:last-child {
+		margin-right: 1rem
+	}
+}
+
+span.recent-post-top-text {
+	position: absolute;
+	top: 0;
+	left: -40px;
+	display: flex;
+	z-index: 1;
+	background: var(--sco-theme);
+	color: var(--sco-white);
+	padding: 2px 8px;
+	font-size: .6rem;
+	border-radius: 12px 0 12px 0;
+	transition: .3s;
+	cursor: pointer
+}
+
+.recent-post-item:hover .recent-post-top-text {
+	left: 0
+}
+
+.recent-post-top .recent-post-item .post_cover a {
+	height: 100px;
+	overflow: hidden;
+	display: flex
+}
+
+.recent-post-top .recent-post-item .post_cover img {
+	object-fit: cover;
+	width: 100%;
+	background: var(--sco-secondbg);
+	border-radius: 12px 12px 0 0
+}
+
+.recent-post-top .recent-post-item:hover .post_cover img {
+	transform: scale(1)
+}
+
+.recent-post-item .post_cover {
+	-webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+}
+
+.recent-post-top .recent-post-item .recent-post-info {
+	padding: .3rem .5rem .3rem .5rem !important;
+	transition: .3s
+}
+
+.recent-post-top .recent-post-item:hover .recent-post-info a {
+	color: var(--sco-fontcolor)
+}
+
+@media screen and (max-width: 1300px) {
+	.recent-post-top .recent-post-item:hover .recent-post-info a {
+		color: var(--sco-theme);
+		transition: .3s
+	}
+}
+
+.recent-post-top .recent-post-item .recent-post-info .article-title {
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	line-height: 1.5;
+	justify-content: center;
+	align-items: flex-end;
+	align-content: center;
+	font-weight: 700;
+	font-size: .8rem !important;
+	padding: 0 !important;
+}
+
+// categories bar
+
+.recent-post-top .categoryGroup {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	min-width: 200px
+}
+
+.categoryGroup .categoryItem:nth-child(3) {
+	display: none
+}
+
+@media screen and (min-width: 1200px) {
+	.recent-post-top .categoryGroup {
+		flex-direction: row;
+		height: 24%;
+		animation: slide-in .6s .2s backwards
+	}
+
+	.categoryItem {
+		width: calc(100% / 3 - .33rem);
+		height: 100%;
+		margin-right: .5rem
+	}
+
+	.categoryItem:last-child {
+		margin-right: 0
+	}
+
+	.categoryItem:hover {
+		width: 50%
+	}
+
+	.categoryGroup .categoryItem:nth-child(3) {
+		display: flex
+	}
+}
+
+a.categoryButton.bikan {
+	background: linear-gradient(to right, #358bff, #15c6ff);
+	background-size: 200%
+}
+
+a.categoryButton.remen {
+	background: linear-gradient(to right, #f65, #ffbf37);
+	background-size: 200%
+}
+
+a.categoryButton.shiyong {
+	background: linear-gradient(to right, #18e7ae, #1eebeb);
+	background-size: 200%
+}
+
+[data-theme=dark] a.categoryButton.bikan {
+	background: linear-gradient(to right, #0653b8, #2fcbff);
+	background-size: 200%
+}
+
+[data-theme=dark] a.categoryButton.remen {
+	background: linear-gradient(to right, #e22a16, #da980c);
+	background-size: 200%
+}
+
+[data-theme=dark] a.categoryButton.shiyong {
+	background: linear-gradient(to right, #099e74, #0ea4a4);
+	background-size: 200%
+}
+
+a.categoryButton:hover {
+	background-position: 100% 0
+}
+
+
+#category #category-bar {
+	padding: 0;
+	border: none;
+	box-shadow: none
+}
+
+#category a.category-bar-item.select a {
+	display: none
+}
+
+.category-in-bar {
+	display: flex;
+	white-space: nowrap;
+	align-items: center
+}
+
+.category-in-bar-tips {
+	margin-right: 1rem
+}
+
+.category-bar-items {
+	white-space: nowrap;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	display: flex;
+	border-radius: 8px;
+	align-items: center;
+	height: 30px
+}
+
+.category-in-bar .category-in-bar-tips {
+	margin-bottom: 0
+}
+
+.category-in-bar #category-bar {
+	margin-bottom: 0
+}
+
+.category-bar-items::-webkit-scrollbar {
+	display: none
+}
+
+.category-bar-item a {
+	padding: .1rem .5rem;
+	margin-right: 6px;
+	font-weight: 700;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	height: 30px
+}
+
+.category-bar-item:hover a {
+	background: var(--sco-theme);
+	color: var(--sco-white)
+}
+
+.category-bar-item.select a {
+	background: var(--sco-theme);
+	color: var(--sco-white);
+	border-radius: 8px
+}
+
+@media screen and (max-width: 768px) {
+	.category-bar-item.select a {
+		border-radius: 8px
+	}
+
+	.category-bar-item a {
+		border-radius: 8px
+	}
+
+	.category-in-bar {
+		position: -webkit-sticky;
+		position: sticky;
+		top: 60px;
+		background: var(--sco-background);
+		z-index: 1002
+	}
+}
+
+.category-bar-next {
+	margin-left: 16px;
+	cursor: pointer;
+	height: 22px;
+	display: flex
+}
+
+.category-bar-next:hover {
+	color: var(--sco-lighttext)
+}
+
+.category-bar-more {
+	margin-left: 14px;
+	font-weight: 700
+}
+
+.category-bar-more:hover {
+	color: var(--sco-lighttext)
+}
+
+@media screen and (max-width: 768px) {
+	#recent-posts .recent-post-item {
+		-webkit-box-orient: vertical;
+		flex-direction: column;
+		height: auto !important
+	}
+
+	#recent-posts .recent-post-item .post_cover {
+		width: 100%;
+		height: 230px;
+		border-radius: 5px 8px 0 0;
+		-webkit-box-ordinal-group: 1 !important;
+		order: 1 !important
+	}
+
+	#recent-posts .recent-post-item .recent-post-info {
+		padding: 1rem 1rem 1.5rem;
+		width: 100%;
+		-webkit-box-ordinal-group: 2 !important;
+		order: 2 !important
+	}
+
+	#recent-posts .recent-post-item .recent-post-info.no-cover {
+		padding: 1.5rem 1rem
+	}
+
+	#recent-posts .recent-post-item .recent-post-info .article-title {
+		font-size: 1.43em
+	}
+
+	#recent-posts .recent-post-item .recent-post-info .content {
+		height: auto
+	}
+}
+
+.recent-post-item .recent-post-info .recent-post-info-top {
+	position: relative;
+	transition: .3s;
+	padding: 0 32px;
+	width: 100%
+}
+
+.recent-post-item .recent-post-info .recent-post-info-top .article-title {
+	line-height: 30px;
+	margin-top: 0;
+	font-weight: 700;
+	color: var(--sco-fontcolor);
+	margin-bottom: 0;
+	width: 100%;
+	transition: .3s;
+	font-size: 1rem;
+	-webkit-line-clamp: 2;
+	display: -webkit-box;
+	overflow: hidden;
+	-webkit-box-orient: vertical
+}
+
+.recent-post-item .recent-post-info .recent-post-info-top .original {
+	display: flex;
+	color: var(--sco-secondtext);
+	font-size: .5rem;
+	position: relative;
+	margin-right: 8px
+}
+
+.recent-post-item .recent-post-info .recent-post-info-top .lastestpost {
+	display: none;
+	margin-right: 8px
+}
+
+.recent-post-info-top-tips {
+	display: flex;
+	margin-top: 20px
+}
+
+.recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post {
+	display: flex;
+	color: var(--sco-secondtext);
+	font-size: .5rem;
+	position: relative
+}
+
+.recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post:visited {
+	color: var(--sco-card-bg)
+}
+
+@media screen and (max-width: 768px) {
+	.recent-post-info-top-tips {
+		display: none
+	}
+}
+
+@media screen and (min-width: 1300px) {
+	#recent-posts > .recent-post-item:nth-child(2) .lastestpost {
+		display: flex;
+		color: var(--sco-secondtext);
+		font-size: .5rem;
+		position: relative
+	}
+
+	.recent-post-item .recent-post-info .recent-post-info-top .article-title {
+		font-size: 20px;
+		-webkit-line-clamp: 2
+	}
+
+	.recent-post-item:hover .recent-post-info .recent-post-info-top .article-title {
+		-webkit-line-clamp: 2
+	}
+
+	#recent-posts > .recent-post-item .post_cover {
+		transition: 1s !important;
+		height: 225px;
+		width: 100%
+	}
+
+	.recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content {
+		opacity: 0 !important;
+		-webkit-line-clamp: 2 !important
+	}
+
+	.recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content {
+		opacity: 1 !important
+	}
+}
+
+.recent-post-item .recent-post-info .recent-post-info-top .content {
+	opacity: 0;
+	transition: .3s;
+	display: -webkit-box;
+	overflow: hidden;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-height: 1.4;
+	color: var(--sco-secondtext);
+	margin-top: .5rem
+}
+
+@media screen and (max-width: 1300px) {
+	.recent-post-item:hover .recent-post-info .recent-post-info-top .content {
+		display: none
+	}
+}
+
+@media screen and (min-width: 1300px) {
+	.recent-post-item:hover .recent-post-info .recent-post-info-top .content {
+		display: none
+	}
+}
+
+@media screen and (min-width: 768px) {
+	.recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content {
+		opacity: 1;
+		-webkit-line-clamp: 4
+	}
+
+	.recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content {
+		-webkit-line-clamp: 6
+	}
+}
+
+@media screen and (max-width: 768px) {
+	.recent-post-item .recent-post-info .recent-post-info-top {
+		padding: 0 20px;
+		top: 20px
+	}
+
+	.recent-post-item .recent-post-info .recent-post-info-top .content {
+		opacity: 1;
+		-webkit-line-clamp: 3;
+		display: none
+	}
+
+	#recent-posts .recent-post-item .recent-post-info .article-title {
+		font-size: 19px
+	}
+}
+
+#recent-post-top .recent-post-item .post_cover {
+	width: 100%
+}
+
+@media screen and (max-width: 768px) {
+	#recent-posts .recent-post-item:hover {
+		border: none;
+		box-shadow: none
+	}
+}
+
+@media screen and (max-width: 1300px) {
+	#recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius {
+		width: 75%;
+		display: flex;
+		height: 200px
+	}
+
+	#recent-posts > .recent-post-item:hover .post_cover img.post_bg {
+		transform: scale(1.03);
+		transition: .3s ease-in-out;
+		filter: brightness(.85)
+	}
+
+	@media screen and (min-width: 1200px) {
+		#recent-posts>.recent-post-item:hover .post_cover img.post_bg {
+			transform:scale(1.03);
+			transition: .3s ease-in-out;
+			filter: brightness(.85)
+		}
+	}
+
+	#recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg {
+		transform: scale(1.03)
+	}
+
+	#recent-posts > .recent-post-item .post_cover img.post_bg {
+		min-width: 100%;
+		-webkit-backface-visibility: hidden;
+		-webkit-transform-style: preserve-3d;
+		transition: .3s ease-in-out;
+		min-height: 100%;
+		user-select: none
+	}
+
+	#recent-posts > .recent-post-item:hover > .recent-post-info {
+		transition: all .3s;
+		position: relative
+	}
+
+	#recent-posts > .recent-post-item > .recent-post-info {
+		transition: all .3s
+	}
+}
+
+@media screen and (min-width: 1300px) {
+	#recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius {
+		width: 100%;
+		display: flex
+	}
+}
+
+@media screen and (min-width: 1300px) {
+	#recent-posts > .recent-post-item {
+		flex-direction: column
+	}
+
+	#recent-posts > .recent-post-item:not(:first-child) {
+		width: calc(100% / 2 - .5rem);
+		margin-top: .25rem;
+		margin-bottom: .75rem;
+		box-shadow: var(--sco-shadow-border)
+	}
+
+	#category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item {
+		position: relative;
+		overflow: hidden;
+		animation: slide-in .6s .4s backwards;
+		will-change: transform;
+		width: calc(100% / 2 - .5rem);
+		margin-top: .25rem;
+		margin-bottom: .75rem;
+		box-shadow: var(--sco-shadow-border)
+	}
+
+	#category-bar {
+		margin-bottom: .75rem;
+		box-shadow: var(--sco-shadow-border);
+		animation: slide-in .6s .3s backwards
+	}
+
+	#category #category-bar {
+		animation: none
+	}
+
+	#recent-posts {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: flex-start;
+		align-content: flex-start;
+		-webkit-user-select: none
+	}
+}
+
+@media screen and (min-width: 1200px) {
+	#category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item {
+		animation:slide-in .6s .4s backwards
+	}
+
+	#category-bar {
+		animation: slide-in .6s .3s backwards
+	}
+}
+
+@media screen and (max-width: 768px) {
+	#recent-posts > .recent-post-item {
+		border-radius: 0
+	}
+
+	#recent-posts > .recent-post-item:not(:first-child) {
+		border-radius: 12px;
+		margin: .5rem 1rem 1.5rem;
+		border: var(--style-border-always);
+		box-shadow: var(--sco-shadow-border);
+		display: block;
+		position: relative;
+		clip-path: inset(0 0 0 0 round 12px)
+	}
+
+	#category #recent-posts,#tag #recent-posts {
+		padding: 0
+	}
+
+	#recent-posts .recent-post-item .post_cover {
+		border-radius: 0 !important;
+		width: 100%
+	}
+
+	a.article-meta__categories {
+		left: 12px !important;
+		top: 12px !important;
+		border-radius: 4px !important;
+		padding: 2px 9px !important;
+		font-size: 12px
+	}
+}
+
+@media screen and (min-width: 1300px) {
+	.topGroup .recent-post-item:nth-child(7) {
+		display: none
+	}
+}
+
+@media screen and (max-width: 768px) {
+	#sidebar-menus > div.author-avatar {
+		display: none
+	}
+
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
+		bottom: .5rem !important
+	}
+
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap time {
+		display: absolute;
+		right: 0
+	}
+
+	#web_bg {
+		background: 0 0 !important
+	}
+
+	#recent-posts > .recent-post-item .post_cover img.post_bg {
+		border-radius: 12px 12px 0 0 !important
+	}
+
+	#recent-posts > .recent-post-item .post_cover img.post_bg:hover {
+		transform: scale(1)
+	}
+
+	#recent-posts > .recent-post-item:hover img.post_bg {
+		transform: scale(1)
+	}
+
+	.recent-post-top .recent-post-item:hover .post_cover img {
+		transform: scale(1)
+	}
+
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap, #recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts > .recent-post-item > .recent-post-info > .content {
+		padding: 0 20px !important
+	}
+}
+
+@media screen and (min-width: 768px) {
+	#recent-posts > .recent-post-item > .recent-post-info > .article-title {
+		top: 40px
+	}
+
+	#recent-posts > .recent-post-item:hover > .recent-post-info > .article-title {
+		top: 20px
+	}
+
+	#recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-title {
+		top: 30px
+	}
+
+	#recent-posts .recent-post-item:hover .recent-post-info .article-title {
+		color: var(--sco-theme)
+	}
+}
+
+@media screen and (max-width: 768px) {
+	#recent-posts .recent-post-item .recent-post-info {
+		height: 7rem
+	}
+}
+
+@media screen and (min-width: 1300px) {
+	#recent-posts > .recent-post-item:hover > .recent-post-info > .article-meta-wrap {
+		bottom: 30px
+	}
+
+	#recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-meta-wrap {
+		bottom: 30px
+	}
+
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
+		bottom: 30px
+	}
+}
+
+@media screen and (min-width: 768px) {
+	#recent-posts > .recent-post-item > .recent-post-info > .content {
+		opacity: 0;
+		top: 120px
+	}
+
+	#recent-posts > .recent-post-item:hover > .recent-post-info > .content {
+		opacity: 1;
+		top: 90px
+	}
+
+	@media screen and (max-width: 1300px) {
+		#recent-posts > .post-card-large > .recent-post-info > .content {
+			opacity: 1 !important
+		}
+
+		#recent-posts > .post-card-large:hover > .recent-post-info > .content {
+			top: 110px
+		}
+
+		#recent-posts > .post-card-large > .recent-post-info > .content {
+			-webkit-line-clamp: 3 !important
+		}
+
+		#recent-posts > .post-card-large:hover > .recent-post-info > .content {
+			-webkit-line-clamp: 5 !important
+		}
+
+		#recent-posts > .post-card-large {
+			height: 20em !important
+		}
+	}
+}
+
+@media screen and (max-width: 768px) {
+	#recent-posts > .recent-post-item > .recent-post-info > .content {
+		top: 5rem
+	}
+}
+
+.recent-post-item span.tags-punctuation {
+	margin-right: 0;
+	font-size: 13px
+}
\ No newline at end of file
diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl
deleted file mode 100644
index 946879cd..00000000
--- a/source/css/_page/homepage.styl
+++ /dev/null
@@ -1,3 +0,0 @@
-a 
-	&.bber-reply 
-		cursor pointer
\ No newline at end of file
diff --git a/source/css/_page/moment.styl b/source/css/_page/moment.styl
index 06511d4c..7d84bd6b 100644
--- a/source/css/_page/moment.styl
+++ b/source/css/_page/moment.styl
@@ -36,4 +36,140 @@
   color var(--sco-hovertext)
 
 .title-h2-a a.random-post-start
-  opacity .6
\ No newline at end of file
+  opacity .6
+
+.moments-list {
+  display: flex;
+  flex-direction: column
+}
+
+.moments-list .article-sort-item-info {
+  display: flex;
+  flex-direction: column
+}
+
+.moments-list .article-sort-item-info .article-sort-item-title {
+  color: var(--sco-lighttext)
+}
+
+.moments-list .article-sort-item-info .article-sort-item-title:hover {
+  color: var(--sco-hovertext)
+}
+
+#friend_link_moments {
+  border: none !important
+}
+
+.moments-article-img {
+  height: 100%;
+  margin: 0 !important
+}
+
+.tab-item-content #moments_container .moments-item a {
+  border-bottom: none;
+  padding: 0;
+  margin-right: auto;
+  width: auto
+}
+
+.tab-item-content #moments_container .moments-item a:hover {
+  background: 0 0;
+  color: var(--sco-lighttext);
+  box-shadow: none
+}
+
+.tab-item-content #moments_container h2 {
+  display: none
+}
+
+#friend_moments_list .moments-sort-item {
+  margin: 1rem 0
+}
+
+.moments-sort-item-img {
+  border-radius: 12px
+}
+
+.moments-item-time {
+  order: 1
+}
+
+.moments-sort-item-title {
+  color: var(--sco-lighttext);
+  border-bottom: none !important;
+  padding: 0 !important
+}
+
+.moments-sort-item-title:hover {
+  color: var(--sco-hovertext) !important;
+  background: 0 0 !important;
+  box-shadow: none !important
+}
+
+.moments_load_button {
+  color: var(--sco-fontcolor) !important;
+  background: var(--sco-card-btn-bg) !important;
+  padding: 12px 16px !important;
+  border-radius: 12px !important;
+  transition: .3s;
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border: 0 !important
+}
+
+.moments_load_button:hover {
+  color: var(--sco-white) !important;
+  background: var(--sco-main) !important;
+  transition: .3s
+}
+
+.moments-item-title {
+  color: var(--sco-lighttext);
+  font-size: 1rem;
+  order: 0;
+  width: 100%;
+  font-weight: 700;
+  -webkit-line-clamp: 1 !important;
+  overflow: hidden;
+  -webkit-box-orient: vertical
+}
+
+.moments-item-info {
+  display: flex;
+  flex-direction: column
+}
+
+.moments_post_time {
+  display: none
+}
+
+.moments_post_time i {
+  margin-right: 8px
+}
+
+.moments-item-title {
+  font-weight: 700
+}
+
+.moments_post_info_number {
+  float: right
+}
+
+.moments-item-img {
+  width: 60px !important;
+  height: 60px !important
+}
+
+.moments-item-img img {
+  border-radius: 99px;
+  width: 80px;
+  height: 80px;
+  overflow: hidden
+}
+
+.moments-item {
+  margin-left: 0 !important;
+  box-shadow: none !important
+}
+
diff --git a/source/css/_post/highlight.styl b/source/css/_post/highlight.styl
new file mode 100644
index 00000000..c4913b62
--- /dev/null
+++ b/source/css/_post/highlight.styl
@@ -0,0 +1,103 @@
+// 代码块
+figure
+  margin 1rem 0
+  padding 1rem
+  border-radius 12px
+  background var(--sco-card-bg)
+  border var(--style-border)
+  position relative
+  overflow hidden
+  animation slide-in .6s .1s backwards
+
+  &:hover
+    box-shadow var(--sco-shadow-border-hover)
+
+  .copy-btn
+    position absolute
+    top 1rem
+    right 1rem
+    z-index 10
+    color var(--sco-fontcolor)
+    cursor pointer
+    transition all .2s ease 0s
+
+    &:hover
+      color var(--sco-lighttext)
+
+  .copy-btn svg
+    width 1.5em
+    height 1.5em
+    vertical-align middle
+    fill currentColor
+    overflow hidden
+    padding-right 5px
+
+  .copy-btn svg:hover
+    color var(--sco-lighttext)
+
+  &.highlight
+    margin 0
+    padding 0
+    border 0
+    background none
+    font-size 1em
+    line-height 1.5
+    overflow auto
+    -webkit-overflow-scrolling touch
+
+    +maxWidth768()
+      .code pre .line
+        font-size 12px
+
+      .code pre .line span
+        font-size 8px
+
+    .line
+      &.marked
+        background-color: rgba(97, 97, 97, .314)
+
+    .deletion
+      color #bf42bf
+
+    .addition
+      color #105ede
+
+    .meta
+      color #c792ea
+
+    .comment
+      color #969896
+
+    .attribute, .css .class, .css .id, .css .pseudo, .html .doctype, .regexp, .ruby .constant, .tag .name, .variable, .xml .doctype, .xml .pi, .xml .tag .title
+      color var(--sco-red)
+
+    .tag
+      color var(--sco-pink)
+
+    .command, .constant, .literal, .number, .params, .preprocessor
+      color var(--sco-orange)
+
+    .built_in
+      color var(--sco-yellow)
+
+    .css .rules .attribute, .formula, .header, .inheritance, .number, .ruby .class .title, .ruby .symbol, .special, .string, .value, .xml .cdata
+      color var(--sco-green)
+
+    .css .hexcolor, .keyword, .title
+      color #3eb1df
+
+    .coffeescript .title, .function
+      color var(--sco-blue)
+
+    .javascript .function, .tag .attr
+      color #c792ea
+
+.highlight-tools .sco-copy-fill
+  position absolute
+  right .7rem
+  cursor pointer
+  transition color .2s
+  font-size 18px
+
+.highlight-tools .sco-copy-fill:hover
+  color var(--sco-main)
\ No newline at end of file
diff --git a/source/css/_post/index.styl b/source/css/_post/index.styl
new file mode 100644
index 00000000..a027fbe1
--- /dev/null
+++ b/source/css/_post/index.styl
@@ -0,0 +1,650 @@
+#post .tag_share .post-meta__tags span.tags-punctuation {
+  font-size: 12px;
+  margin-right: 1px;
+  display: flex;
+  align-items: center
+}
+
+#post .tag_share .post_share {
+  display: inline-block;
+  float: right;
+  margin: .4rem 0;
+  width: fit-content
+}
+
+#post .tag_share .post_share .social-share {
+  font-size: .85em
+}
+
+#post .tag_share .post_share .social-share .social-share-icon {
+  margin: 0 4px;
+  width: 1.85em;
+  height: 1.85em;
+  font-size: 1.2em;
+  line-height: 1.85em
+}
+
+#post .post-copyright::before {
+  position: absolute;
+  top: .1rem;
+  right: .6rem;
+  color: #307af6;
+  content: "";
+  font-size: 1rem
+}
+
+#post .post-copyright .post-copyright-meta {
+  color: #307af6;
+  font-weight: 700
+}
+
+#post .post-copyright .post-copyright-info {
+  padding-left: .3rem
+}
+
+#post .post-copyright .post-copyright-info a {
+  text-decoration: none;
+  word-break: break-word;
+  color: #3b82ff;
+  padding: 0 4px;
+  border-radius: 4px
+}
+
+#post .post-copyright .post-copyright-info a:hover {
+  text-decoration: none;
+  background-color: var(--sco-main);
+  color: var(--sco-white);
+  cursor: pointer;
+  border-radius: 4px
+}
+
+#post .post-outdate-notice {
+  position: relative;
+  margin: 0 0 1rem;
+  border-radius: 3px;
+  background-color: #ffe6e6;
+  color: #f66;
+  padding: .5em 1em .5em 2.6em;
+  border-left: 5px solid #ff8080
+}
+
+#post .post-outdate-notice::before {
+  position: absolute;
+  top: 50%;
+  left: .9em;
+  color: #ff8080;
+  content: "";
+  transform: translateY(-50%)
+}
+
+#post .ads-wrap {
+  margin: 2rem 0
+}
+
+// post-meta
+#post-meta .post-meta-date {
+  opacity: .6
+}
+
+#post-info #post-meta > .meta-secondline > span:first-child {
+  margin-right: .8rem
+}
+
+.post-meta-date .far {
+  opacity: .6
+}
+
+.post-meta-date .article-meta-label {
+  display: none
+}
+
+.post-meta-date {
+  margin-right: .8rem
+}
+
+#post-firstinfo .post-meta__tags {
+  color: var(--sco-white);
+  opacity: .8;
+  margin-right: 8px
+}
+
+#post-firstinfo .post-meta__tags:hover {
+  color: var(--sco-white);
+  opacity: 1
+}
+
+span.post-meta-categories {
+  background-color: var(--sco-white-op);
+  padding: 0 .5rem;
+  border-radius: 8px;
+  line-height: 32px;
+  height: 32px;
+  transition: .3s
+}
+
+span.post-meta-categories:not(:first-child) {
+  margin-left: 8px
+}
+
+span.post-meta-categories:hover {
+  background-color: var(--sco-white)
+}
+
+a.post-meta-categories {
+  color: var(--sco-white);
+  font-size: .7rem;
+  width: 100%;
+  height: 100%;
+  display: flex
+}
+
+span.post-meta-categories:hover a.post-meta-categories {
+  color: var(--sco-main)
+}
+
+.meta-firstline .tag_share {
+  margin-left: 1rem
+}
+
+#post-firstinfo .meta-firstline {
+  display: flex;
+  align-items: center;
+  height: 32px
+}
+
+@media screen and (max-width: 768px) {
+  #post-firstinfo .meta-firstline {
+    margin-bottom: .4rem
+  }
+}
+
+.meta-avatar img {
+  width: 30px;
+  border-radius: 30px;
+  height: 30px
+}
+
+a.post-meta-original {
+  background: var(--sco-white-op) !important;
+  color: var(--sco-white) !important;
+  padding: 0 .5rem;
+  font-size: .7rem;
+  margin: auto;
+  border-radius: 8px;
+  font-weight: 700;
+  line-height: 32px;
+  width: 100%;
+  height: 100%;
+  display: flex
+}
+
+a.post-meta-original:hover {
+  color: var(--sco-main) !important;
+  background: var(--sco-white) !important;
+  border-radius: 8px !important
+}
+
+.meta-avatar img:hover {
+  transform: rotate(360deg)
+}
+
+@media screen and (max-width: 768px) {
+  .meta-share-time {
+    display: none !important
+  }
+
+  #post-info #post-meta {
+    z-index: 1
+  }
+
+  #post-info:after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    left: 0;
+    box-shadow: 0 -214px 287px 45px var(--sco-main) inset;
+    z-index: 0
+  }
+
+  .meta-secondline {
+    justify-content: center !important
+  }
+
+  .post-meta__tag-list {
+    display: none
+  }
+
+  .typed-cursor {
+    display: none
+  }
+
+  .meta-avatar {
+    display: none !important
+  }
+
+  #post-firstinfo {
+    white-space: nowrap;
+    margin: 0 auto;
+    z-index: 1
+  }
+
+  .meta-firstline .tag_share {
+    display: none
+  }
+}
+
+.post-meta__tag-list::-webkit-scrollbar {
+  display: none
+}
+
+.meta-share-time a:hover {
+  background: 0 0 !important
+}
+
+.meta-share-time .meta-avatar-name {
+  opacity: 1;
+  color: var(--sco-white) !important;
+  font-weight: 700
+}
+
+.meta-share-time {
+  display: flex
+}
+
+.meta-share-time .meta-info {
+  margin: 0 .5rem
+}
+
+.meta-secondline {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center
+}
+
+.meta-avatar {
+  display: flex
+}
+
+.meta-avatar .meta-avatar-name {
+  margin: 0 .5rem
+}
+
+#post-info #post-meta i {
+  font-size: 16px;
+  margin-right: 4px
+}
+
+span.post-meta-pv-cv {
+  margin-left: .8rem
+}
+
+span.post-meta-wechat {
+  margin-right: .8rem;
+  opacity: .6;
+  transition: .3s;
+  cursor: pointer
+}
+
+.post-meta-wechat:hover {
+  opacity: 1
+}
+
+span.post-meta-position {
+  margin-right: .8rem;
+  opacity: .6
+}
+
+#post-info #post-meta .post-meta-label {
+  display: none
+}
+
+#post-info #post-meta .post-meta-icon {
+  margin-right: .4rem
+}
+
+#post-info #post-meta .post-meta-separator {
+  margin: 0 .4rem
+}
+
+.post-meta-pv-cv #busuanzi_value_page_pv {
+  font-weight: 800
+}
+
+#post-meta > div > span.post-meta-wordcount > span.word-count {
+  font-weight: 800
+}
+
+#post-meta > div > span.post-meta-wordcount > span:nth-child(7) {
+  font-weight: 800
+}
+
+#post-firstinfo > div > span.post-meta-categories > a {
+  font-weight: 800
+}
+
+.post-meta-wordcount {
+  opacity: .6;
+  margin-right: .8rem
+}
+
+@media screen and (max-width: 768px) {
+  .post-meta-wordcount {
+    margin-left: 0
+  }
+}
+
+.post-meta-pv-cv {
+  opacity: .6
+}
+
+.post-meta-pv {
+  opacity: .6;
+  margin-right: .8rem
+}
+
+.post-meta-commentcount {
+  opacity: .6;
+  cursor: pointer;
+  transition: .3s
+}
+
+.post-meta-commentcount:hover {
+  opacity: 1
+}
+
+#twikoo-count {
+  font-weight: 800;
+  color: var(--sco-white)
+}
+
+.el-textarea .el-input__count {
+  color: var(--sco-secondtext) !important;
+  -webkit-user-select: none
+}
+
+.post-meta-commentcount i {
+  margin-right: .5rem
+}
+
+#post-meta > div {
+  text-align: left
+}
+
+#post-info #post-meta {
+  color: var(--sco-white);
+  margin-top: .4rem;
+  transition: .3s;
+  display: flex;
+  -webkit-user-select: none
+}
+
+#post-info #post-meta a {
+  text-decoration: none;
+  color: var(--sco-fontcolor);
+  line-height: 1
+}
+
+#post-info #post-meta a:hover {
+  text-decoration: none;
+  color: var(--sco-blue);
+  border-radius: 12px
+}
+
+#post .tag_share .post-meta__tags {
+  background: var(--sco-card-bg);
+  border: var(--style-border-always);
+  color: var(--sco-fontcolor);
+  border-radius: 8px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  height: 40px;
+  padding: 0 .6rem;
+  width: fit-content;
+  font-size: .85em;
+  transition: all .2s ease-in-out 0s
+}
+
+#post .tag_share .post-meta__tags:hover {
+  background: var(--sco-lighttext);
+  box-shadow: var(--sco-shadow-main);
+  color: var(--sco-white)
+}
+
+@media screen and (min-width: 1300px) {
+  #post .tag_share .post-meta__tags {
+    background: var(--sco-card-bg);
+    border: var(--style-border)
+  }
+
+  #post .tag_share .post-meta__tags:hover {
+    border: var(--style-border-hover)
+  }
+}
+
+// post copyright
+#post .post-copyright {
+  background: var(--sco-secondbg);
+  border-width: 1px;
+  transition: .3s;
+  position: relative;
+  margin: 80px 0 30px;
+  border-radius: 12px;
+  padding: 34px 0 20px 0;
+  border: var(--style-border-always)
+}
+
+@media screen and (max-width: 768px) {
+  #post .post-copyright {
+    padding: 1rem 1.3rem
+  }
+}
+
+.post-copyright__author_img {
+  width: 66px;
+  height: 66px;
+  margin: auto;
+  border-radius: 66px;
+  overflow: hidden;
+  position: absolute;
+  left: calc(50% - 33px);
+  top: -33px;
+  border: var(--style-border-always);
+  box-shadow: var(--sco-shadow-main)
+}
+
+.post-copyright__author_img img {
+  position: absolute;
+  bottom: 0;
+  left: 0
+}
+
+img.post-copyright__author_img_back {
+  border-radius: 66px;
+  z-index: 10
+}
+
+img.post-copyright__author_img_front {
+  z-index: 20;
+  transform: scale(1.2) translateY(6px)
+}
+
+.post-copyright__author_img:hover img.post-copyright__author_img_front {
+  transform: scale(1) translateY(3px)
+}
+
+.post-copyright__author_img:hover img.post-copyright__author_img_back {
+  transform: scale(.8)
+}
+
+.post-copyright__author_name {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 700;
+  margin-top: 16px;
+  color: var(--sco-fontcolor);
+  line-height: 1
+}
+
+.post-copyright__author_desc {
+  text-align: center;
+  font-size: 14px;
+  color: var(--sco-secondtext);
+  margin-top: 4px
+}
+
+.post-copyright__author {
+  display: flex;
+  align-items: center
+}
+
+.post-copyright__original {
+  background: var(--sco-fontcolor);
+  color: var(--sco-card-bg);
+  padding: .2rem .5rem;
+  font-size: .7rem;
+  border-radius: 8px;
+  margin-right: .5rem;
+  font-weight: 700;
+  line-height: 1.5;
+  white-space: nowrap;
+  -webkit-user-select: none
+}
+
+.post-copyright__original:hover {
+  background: var(--sco-main);
+  color: var(--sco-white)
+}
+
+@media screen and (max-width: 768px) {
+  #post .post-copyright {
+    background: var(--sco-card-bg);
+    box-shadow: var(--sco-shadow-border)
+  }
+
+  .post-copyright .post-meta-original {
+    display: none
+  }
+
+  .post-copyright__original {
+    display: none
+  }
+}
+
+.post-copyright-copybtn {
+  margin-left: .5rem;
+  color: var(--sco-fontcolor);
+  opacity: .4;
+  transition: .3s
+}
+
+.post-copyright-copybtn:hover {
+  opacity: 1;
+  transition: .3s
+}
+
+.post-copyright-copybtn i {
+  font-size: 16px
+}
+
+#post .post-copyright .post-copyright-info a {
+  padding: 0;
+  color: var(--sco-fontcolor);
+  font-weight: 700
+}
+
+#post .post-copyright .post-copyright__notice .post-copyright-info a {
+  padding: 0 4px
+}
+
+#post .post-copyright .post-copyright-info {
+  padding-left: 0;
+  color: var(--sco-secondtext);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-align: center
+}
+
+#post .post-copyright .post-copyright-title {
+  padding-left: 0;
+  color: var(--sco-fontcolor);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  font-size: 1rem;
+  font-weight: 700
+}
+
+#post .post-copyright .post-copyright-title:hover {
+  color: var(--sco-lighttext)
+}
+
+#post > div.post-copyright > div.post-copyright__author > span > span {
+  padding: 0;
+  color: var(--sco-fontcolor);
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.38;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical
+}
+
+@media screen and (max-width: 768px) {
+  #post > div.post-copyright > div.post-copyright__author > span > span {
+    -webkit-line-clamp: 3
+  }
+
+  #post .post-copyright .post-copyright-info {
+    -webkit-line-clamp: 2
+  }
+
+  #post .post-copyright .post-copyright-title {
+    -webkit-line-clamp: 3;
+    line-height: 1.2
+  }
+}
+
+#post > div.post-copyright > div.post-copyright__type {
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  margin-top: 4px
+}
+
+#post > div.post-copyright > div.post-copyright__type > span > a {
+  font-size: 14px;
+  opacity: .6;
+  line-height: 16px
+}
+
+#post > div.post-copyright > div.post-copyright__type > span > a:hover {
+  opacity: 1;
+  background: 0 0
+}
+
+#post-copyright-url a {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical
+}
+
+#post > div.post-copyright > div.post-copyright__notice {
+  font-size: 12px;
+  margin: .5rem 0
+}
+
+#post .post-copyright:before {
+  display: none
+}
+
diff --git a/source/css/_post/pagination.styl b/source/css/_post/pagination.styl
new file mode 100644
index 00000000..95327a8a
--- /dev/null
+++ b/source/css/_post/pagination.styl
@@ -0,0 +1,467 @@
+#pagination .pagination {
+  text-align: center
+}
+
+#pagination .page-number {
+  display: inline-block;
+  margin: 0 .2rem;
+  min-width: 1.2rem;
+  height: 1.2rem;
+  text-align: center;
+  line-height: 1.2rem;
+  cursor: pointer
+}
+
+#pagination .page-number.current {
+  background: #0079ff;
+  color: var(--sco-white);
+  cursor: default;
+  border-radius: 5px
+}
+
+#pagination img.next-cover, #pagination img.prev-cover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: .4;
+  transition: all .6s ease 0s;
+  object-fit: cover
+}
+
+#pagination .pagination-info {
+  position: absolute;
+  top: 50%;
+  padding: 1rem 2rem;
+  width: 100%;
+  transform: translate(0, -50%)
+}
+
+#pagination .next_info, #pagination .prev_info {
+  color: var(--sco-white);
+  font-weight: 500
+}
+
+#pagination .next-post .pagination-info {
+  text-align: right
+}
+
+#pagination .pull-full {
+  width: 100% !important
+}
+
+#pagination .next-post .label, #pagination .prev-post .label {
+  color: var(--light-grey);
+  text-transform: uppercase;
+  font-size: 90%
+}
+
+#pagination .next-post, #pagination .prev-post {
+  width: 50%
+}
+
+@media screen and (max-width: 768px) {
+  #pagination .next-post, #pagination .prev-post {
+    width: 100%
+  }
+}
+
+#pagination .next-post a, #pagination .prev-post a {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  height: 150px
+}
+
+#pagination .next-post:hover img.next-cover, #pagination .next-post:hover img.prev-cover, #pagination .prev-post:hover img.next-cover, #pagination .prev-post:hover img.prev-cover {
+  opacity: .8;
+  transform: scale(1.1)
+}
+
+#pagination.pagination-post {
+  margin-top: 1.5rem;
+  background: #000
+}
+
+#pagination {
+  width: 100%
+}
+
+@media screen and (max-width: 768px) {
+  #pagination {
+    margin-bottom: 0;
+    margin-top: 0
+  }
+}
+
+@media screen and (min-width: 1300px) {
+  #pagination {
+    margin-top: .25rem
+  }
+}
+
+#pagination .next-post, #pagination .prev-post, .next-post.pull-right, .prev-post.pull-left {
+  background: var(--sco-secondbg)
+}
+
+@media screen and (min-width: 768px) {
+  #pagination .next-post a {
+    border-left: var(--sco-main-op);
+    border-left-width: 1px;
+    border-left-style: solid;
+    display: flex;
+    align-items: flex-start;
+    height: 150px
+  }
+
+  #pagination .next-post.pull-full a {
+    border-left-width: 0
+  }
+
+  #pagination .prev-post a {
+    border-right: var(--sco-main-op);
+    border-right-width: 1px;
+    border-right-style: solid
+  }
+
+  #pagination .pagination-info {
+    padding: 1rem 1.5rem 1rem 1.5rem;
+    position: relative;
+    display: flex;
+    top: 0;
+    transform: none;
+    flex-direction: column;
+    justify-content: center;
+    margin: auto;
+    height: 100%
+  }
+
+  #pagination .next-post a:hover, #pagination .prev-post a:hover {
+    background: var(--sco-main)
+  }
+
+  #pagination .next-post a:hover div, #pagination .prev-post a:hover div {
+    color: var(--sco-white) !important
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #pagination .next-post a:hover, #pagination .prev-post a:hover {
+    background: var(--sco-none)
+  }
+}
+
+#pagination img.next-cover, #pagination img.prev-cover {
+  opacity: .15;
+  transform: scale(1.03);
+  transition: .3s;
+  filter: blur(0);
+  -webkit-backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d
+}
+
+#pagination .next-post:hover img.next-cover, #pagination .next-post:hover img.prev-cover, #pagination .prev-post:hover img.next-cover, #pagination .prev-post:hover img.prev-cover {
+  opacity: .25;
+  transform: scale(1.03);
+  filter: blur(5px)
+}
+
+#pagination .next-post .label, #post #pagination .prev-post .label {
+  color: var(--sco-fontcolor)
+}
+
+#pagination .next_info, #post #pagination .prev_info {
+  color: var(--sco-fontcolor);
+  font-weight: 700;
+  -webkit-line-clamp: 2;
+  white-space: normal;
+  line-height: 1.3;
+  font-size: .9rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-bottom: 10px
+}
+
+#post #pagination {
+  overflow: hidden;
+  position: inherit;
+  border: var(--style-border-always)
+}
+
+#pagination.pagination-post {
+  background: var(--sco-card-bg)
+}
+
+@media screen and (min-width: 1300px) {
+  #post #pagination {
+    position: fixed;
+    width: 300px;
+    bottom: -100px;
+    right: 20px;
+    height: fit-content;
+    transition: cubic-bezier(.42, 0, .3, 1.11) .3s;
+    border: var(--style-border);
+    border-radius: 12px;
+    overflow: hidden;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 1002
+  }
+
+  #post #pagination.show-window {
+    bottom: 20px;
+    opacity: 1
+  }
+
+  #post #pagination:hover {
+    border: var(--style-border-hover)
+  }
+
+  #pagination .next-post a {
+    border: none;
+    height: fit-content;
+    padding: .5rem 0
+  }
+
+  #pagination.pagination-post {
+    border-radius: 0
+  }
+
+  #pagination .next_info, #post #pagination .prev_info {
+    font-size: 14px;
+    font-weight: 400;
+    margin-bottom: 0
+  }
+
+  #pagination .pagination-info {
+    padding: .5rem 1rem;
+    transform: none
+  }
+
+  #post #pagination {
+    background: 0 0
+  }
+
+  #pagination .next-post, #pagination .prev-post, .next-post.pull-right, .prev-post.pull-left {
+    background: var(--sco-maskbgdeep);
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+    transform: translateZ(0)
+  }
+
+  .prev-post.pull-left {
+    display: none
+  }
+
+  .next-post.pull-right {
+    width: 100% !important
+  }
+
+  #pagination .next-post .pagination-info {
+    text-align: left;
+    position: relative
+  }
+
+  #pagination .next-post .label, #post #pagination .prev-post .label {
+    color: var(--sco-fontcolor);
+    font-weight: 700;
+    font-size: 12px;
+    margin-bottom: .5rem;
+    border-bottom: var(--style-border);
+    line-height: 1;
+    padding-bottom: .5rem
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .prev-post.pull-left {
+    border-bottom: var(--style-border-always)
+  }
+
+  #post #pagination {
+    border-radius: 12px;
+    border: var(--style-border-always);
+    box-shadow: var(--sco-shadow-border)
+  }
+
+  #pagination .next-post .label, #post #pagination .prev-post .label {
+    text-align: left
+  }
+
+  #pagination .next_info, #post #pagination .prev_info {
+    text-align: left
+  }
+
+  #pagination .next-post, #pagination .prev-post, .next-post.pull-right, .prev-post.pull-left {
+    background: var(--sco-card-bg)
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #pagination .page-number {
+    display: none
+  }
+
+  #pagination .pagination .space {
+    display: none
+  }
+
+  #pagination .pagination .extend {
+    width: 100%;
+    height: 2.5rem;
+    margin: .2rem 1rem 1rem 1rem;
+    border-radius: 12px;
+    line-height: 2.5rem;
+    background: var(--sco-card-bg);
+    border: var(--style-border-always);
+    box-shadow: var(--sco-shadow-border)
+  }
+
+  #pagination .pagination .extend i {
+    display: none
+  }
+
+  #pagination .pagination .extend:hover {
+    background: var(--sco-theme);
+    color: var(--sco-white)
+  }
+
+  #pagination .pagination {
+    background: var(--sco-background);
+    transition: .3s;
+    display: flex
+  }
+}
+
+@media screen and (min-width: 768px) {
+  #pagination .page-number {
+    width: 2rem;
+    background: var(--sco-card-bg);
+    height: 2rem;
+    line-height: calc(2rem - 2px);
+    border-radius: 8px !important;
+    margin: 0 .3rem;
+    box-shadow: var(--sco-shadow-border);
+    border: var(--style-border);
+    transition: .3s
+  }
+
+  #pagination .page-number.current {
+    background: var(--sco-theme);
+    border: var(--style-border-hover);
+    box-shadow: var(--sco-shadow-theme)
+  }
+
+  #pagination .page-number.current:hover {
+    background: var(--sco-theme);
+    box-shadow: var(--sco-shadow-theme);
+    color: var(--sco-white)
+  }
+
+  #pagination .page-number:hover {
+    color: var(--sco-theme);
+    border: var(--style-border-hover);
+    box-shadow: var(--sco-shadow-main)
+  }
+
+  #pagination a.extend.next:hover, #pagination a.extend.prev:hover {
+    color: var(--sco-theme);
+    border: var(--style-border-hover);
+    box-shadow: var(--sco-shadow-main)
+  }
+
+  #pagination span.space {
+    margin: 0 .3rem
+  }
+
+  #pagination a.extend.next, #pagination a.extend.prev {
+    width: 4rem;
+    height: 2rem;
+    line-height: 1.9rem;
+    border-radius: 8px !important;
+    background: var(--sco-card-bg);
+    box-shadow: var(--sco-shadow-border);
+    position: absolute;
+    border: var(--style-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    transition: .3s
+  }
+
+  #pagination a.extend.next i, #pagination a.extend.prev i {
+    transition: .3s
+  }
+
+  #pagination a.extend.next {
+    overflow: hidden
+  }
+
+  #pagination a.extend.next .pagination_tips_next {
+    margin-left: -32px;
+    transition: .3s;
+    opacity: 0
+  }
+
+  #pagination a.extend.next:hover .pagination_tips_next {
+    margin-left: 2px;
+    opacity: 1;
+    white-space: nowrap
+  }
+
+  #pagination a.extend.prev .pagination_tips_prev {
+    margin-right: -32px;
+    transition: .3s;
+    opacity: 0
+  }
+
+  #pagination a.extend.prev:hover .pagination_tips_prev {
+    margin-right: 2px;
+    opacity: 1;
+    white-space: nowrap
+  }
+
+  #pagination {
+    overflow: visible
+  }
+
+  #pagination .pagination {
+    position: relative;
+    display: flex;
+    justify-content: center
+  }
+}
+
+@media screen and (min-width: 768px) {
+  #pagination.pagination-post {
+    border-radius: 12px;
+    margin-top: 1rem
+  }
+}
+
+@media screen and (min-width: 1300px) {
+  #pagination.pagination-post {
+    border-radius: 0;
+    margin-top: 0
+  }
+}
+
+.pagination input {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: var(--style-border-always);
+  transition: .3s;
+  outline-style: none;
+  font-size: 16px;
+  padding-left: 12px;
+  background: var(--sco-secondbg);
+  color: var(--sco-fontcolor)
+}
+
+.pagination .toPageGroup input:focus, .pagination .toPageGroup:hover input {
+  border: var(--style-border-hover-always);
+  outline-style: none;
+  width: 100px
+}
\ No newline at end of file
diff --git a/source/css/_post/postContent.styl b/source/css/_post/postContent.styl
new file mode 100644
index 00000000..a5b09f36
--- /dev/null
+++ b/source/css/_post/postContent.styl
@@ -0,0 +1,1039 @@
+#article-container figure.highlight .line.marked {
+  background-color: rgba(97, 97, 97, .314)
+}
+
+#article-container figure.highlight table {
+  display: inline-flex;
+  border: none;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+#article-container figure.highlight table td {
+  padding: 0;
+  border: none;
+  height: 100%
+}
+
+#article-container figure.highlight table td.code {
+  width: 100%;
+  display: flex;
+  position: relative
+}
+
+#article-container figure.highlight .code pre {
+  padding-right: .5rem;
+  padding-left: .5rem;
+  width: 100%
+}
+
+#article-container figure.highlight, #article-container pre {
+  overflow: auto;
+  margin: 0 0 1rem;
+  padding: 0;
+  line-height: 1.6
+}
+
+#article-container code, #article-container pre {
+  font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important
+}
+
+#article-container code {
+  padding: .1rem .2rem;
+  background: rgba(27, 31, 35, .05);
+  color: #f47466
+}
+
+#article-container pre code {
+  padding: 0;
+  background: 0 0;
+  color: var(--hl-color);
+  text-shadow: none
+}
+
+#article-container figure.highlight {
+  position: relative
+}
+
+#article-container figure.highlight pre {
+  margin: 0;
+  padding: 8px 0;
+  border: none
+}
+
+#article-container figure.highlight .caption, #article-container figure.highlight figcaption {
+  padding: .3rem 0 .1rem .7rem;
+  font-size: 16px;
+  line-height: 1em
+}
+
+#article-container figure.highlight .caption a, #article-container figure.highlight figcaption a {
+  float: right;
+  padding-right: 10px;
+  color: var(--hl-color)
+}
+
+#article-container figure.highlight .caption a:hover, #article-container figure.highlight figcaption a:hover {
+  border-bottom-color: var(--hl-color)
+}
+
+#article-container .highlight-tools {
+  position: relative;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  overflow: hidden;
+  min-height: 1.2rem;
+  height: 2.15em;
+  background: var(--hltools-bg);
+  color: var(--hltools-color);
+  font-size: 16px
+}
+
+#article-container .highlight-tools.closed + table {
+  display: none
+}
+
+#article-container .highlight-tools .expand {
+  position: absolute;
+  padding: .4rem .3rem;
+  cursor: pointer;
+  transition: transform .3s ease 0s
+}
+
+#article-container .highlight-tools .expand + .code-lang {
+  left: 1.7rem
+}
+
+#article-container .highlight-tools .expand.closed {
+  transition: all .3s ease 0s;
+  transform: rotate(-90deg) !important
+}
+
+#article-container .highlight-tools .code-lang {
+  position: absolute;
+  left: .7rem;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 1.15em;
+  user-select: none
+}
+
+#article-container .highlight-tools .copy-notice {
+  position: absolute;
+  right: 1.7rem;
+  opacity: 0;
+  transition: opacity .4s ease 0s
+}
+
+#article-container .highlight-tools .copy-button {
+  position: absolute;
+  right: .7rem;
+  cursor: pointer;
+  transition: color .2s ease 0s
+}
+
+#article-container .highlight-tools .copy-button:hover {
+  color: #307af6
+}
+
+#article-container .gist table {
+  width: auto
+}
+
+#article-container .gist table td {
+  border: none
+}
+
+#article-container .code-expand-btn.expand-done {
+  display: none !important
+}
+
+#article-container .code-expand-btn:not(.expand-done) ~ pre, #article-container .code-expand-btn:not(.expand-done) ~ table {
+  overflow: hidden;
+  height: 400px
+}
+
+.article-sort {
+  margin-left: .5rem;
+  padding-left: 1rem;
+  border-left: 2px solid #92b9fa
+}
+
+.article-sort-title::before {
+  position: absolute;
+  top: calc((100% - 1.8rem) / 2);
+  left: -.45rem;
+  z-index: 1;
+  width: .5rem;
+  height: .5rem;
+  border: .25rem solid #307af6;
+  border-radius: .5rem;
+  background: var(--sco-card-bg);
+  content: "";
+  line-height: .5rem;
+  transition: all .2s ease-in-out 0s
+}
+
+.article-sort-title::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  width: .1rem;
+  height: 1.5em;
+  background: #92b9fa;
+  content: ""
+}
+
+.article-sort-item {
+  position: relative;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  margin: 0 0 1rem .5rem;
+  transition: all .2s ease-in-out 0s
+}
+
+.article-sort-item:hover::before {
+  border-color: #ff7242
+}
+
+.article-sort-item::before {
+  position: absolute;
+  left: calc(-1rem - 17px);
+  width: .3rem;
+  height: .3rem;
+  border: .15rem solid #307af6;
+  border-radius: .3rem;
+  background: var(--sco-card-bg);
+  content: "";
+  transition: all .2s ease-in-out 0s
+}
+
+.article-sort-item.no-article-cover {
+  height: 80px
+}
+
+.article-sort-item.no-article-cover .article-sort-item-info {
+  padding: 0
+}
+
+.article-sort-item.year {
+  font-size: 1.43em
+}
+
+.article-sort-item.year:hover::before {
+  border-color: #307af6
+}
+
+.article-sort-item.year::before {
+  border-color: #ff7242
+}
+
+.article-sort-item-time {
+  color: #858585;
+  font-size: 95%
+}
+
+.article-sort-item-time time {
+  padding-left: .3rem;
+  cursor: default
+}
+
+.article-sort-item-title {
+  color: var(--sco-fontcolor);
+  font-size: 1.1em;
+  transition: all .3s ease 0s;
+  -webkit-line-clamp: 2
+}
+
+.article-sort-item-title:hover {
+  color: #307af6;
+  transform: translateX(10px)
+}
+
+.article-sort-item-img {
+  overflow: hidden;
+  width: 80px;
+  height: 80px
+}
+
+.article-sort-item-img img {
+  width: 100%;
+  height: 100%;
+  transition: all .6s ease 0s;
+  object-fit: cover
+}
+
+.article-sort-item-img img:hover {
+  transform: scale(1.1)
+}
+
+.article-sort-item-info {
+  -webkit-box-flex: 1;
+  flex: 1 1 0;
+  padding: 0 .8rem
+}
+
+#article-container {
+  overflow-wrap: break-word
+}
+
+#article-container a {
+  color: #307af6
+}
+
+#article-container a:hover {
+  text-decoration: none;
+  background: var(--sco-main);
+  border: none;
+  color: var(--sco-white);
+  border-radius: 4px
+}
+
+#article-container img {
+  display: block;
+  margin: 0 auto .8rem;
+  max-width: 90%;
+  max-height: 450px
+}
+
+@media screen and (max-width: 768px) {
+  #article-container img {
+    max-width: 100%
+  }
+}
+
+#article-container p {
+  margin: 0 0 .8rem
+}
+
+#article-container iframe {
+  margin: 0 0 1rem
+}
+
+#article-container kbd {
+  margin: 0 3px;
+  padding: 3px 5px;
+  border: 1px solid #b4b4b4;
+  border-radius: 3px;
+  background-color: #f8f8f8;
+  box-shadow: rgba(0, 0, 0, .25) 0 1px 3px, rgba(255, 255, 255, .6) 0 2px 1px 0 inset;
+  color: #34495e;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: .9em;
+  font-family: Monaco, "Ubuntu Mono", monospace;
+  line-height: 1em
+}
+
+#article-container h1, #article-container h2, #article-container h3, #article-container h4, #article-container h5, #article-container h6 {
+  transition: all .2s ease-out 0s
+}
+
+#article-container h1::before, #article-container h2::before, #article-container h3::before, #article-container h4::before, #article-container h5::before, #article-container h6::before {
+  position: absolute;
+  top: calc(50% - .35rem);
+  color: #f2ba4b;
+  content: "";
+  line-height: 1;
+  transition: all .2s ease-out 0s
+}
+
+#article-container h1:hover::before, #article-container h2:hover::before, #article-container h3:hover::before, #article-container h4:hover::before, #article-container h5:hover::before, #article-container h6:hover::before {
+  color: #307af6
+}
+
+#article-container h1 {
+  padding-left: 1.4rem
+}
+
+#article-container h1 code {
+  font-size: 1rem
+}
+
+#article-container h1::before {
+  margin-left: -1.2rem;
+  font-size: 1rem
+}
+
+#article-container h1:hover {
+  padding-left: 1.6rem
+}
+
+#article-container h2 {
+  padding-left: 1.3rem
+}
+
+#article-container h2 code {
+  font-size: .9rem
+}
+
+#article-container h2::before {
+  margin-left: -1.1rem;
+  font-size: .9rem
+}
+
+#article-container h2:hover {
+  padding-left: 1.5rem
+}
+
+#article-container h3 {
+  padding-left: 1.2rem
+}
+
+#article-container h3 code {
+  font-size: .8rem
+}
+
+#article-container h3::before {
+  margin-left: -1rem;
+  font-size: .8rem
+}
+
+#article-container h3:hover {
+  padding-left: 1.4rem
+}
+
+#article-container h4 {
+  padding-left: 1.1rem
+}
+
+#article-container h4 code {
+  font-size: .7rem
+}
+
+#article-container h4::before {
+  margin-left: -.9rem;
+  font-size: .7rem
+}
+
+#article-container h4:hover {
+  padding-left: 1.3rem
+}
+
+#article-container h5 {
+  padding-left: 1rem
+}
+
+#article-container h5 code {
+  font-size: .6rem
+}
+
+#article-container h5::before {
+  margin-left: -.8rem;
+  font-size: .6rem
+}
+
+#article-container h5:hover {
+  padding-left: 1.2rem
+}
+
+#article-container h6 {
+  padding-left: 1rem
+}
+
+#article-container h6 code {
+  font-size: .6rem
+}
+
+#article-container h6::before {
+  margin-left: -.8rem;
+  font-size: .6rem
+}
+
+#article-container h6:hover {
+  padding-left: 1.2rem
+}
+
+#article-container ol, #article-container ul {
+  margin-top: .4rem;
+  padding: 0 0 0 .8rem;
+  list-style: none;
+  counter-reset: li 0
+}
+
+@media screen and (max-width: 768px) {
+  #article-container ol, #article-container ul {
+    padding: 0 0 0 .4rem
+  }
+}
+
+#article-container ol p, #article-container ul p {
+  margin: 0 0 .5rem
+}
+
+#article-container ol ol, #article-container ol ul, #article-container ul ol, #article-container ul ul {
+  padding-left: .6rem
+}
+
+@media screen and (max-width: 768px) {
+  #article-container ol ol, #article-container ol ul, #article-container ul ol, #article-container ul ul {
+    padding-left: .2rem
+  }
+}
+
+#article-container ol li:not(.tab), #article-container ul li:not(.tab) {
+  position: relative;
+  margin: .2rem 0
+}
+
+#article-container ol li:hover::before, #article-container ul li:hover::before {
+  transform: rotate(360deg)
+}
+
+#article-container ol li::before, #article-container ul li::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #307af6;
+  color: #fff;
+  cursor: pointer;
+  transition: all .3s ease-out 0s
+}
+
+#article-container ol > li:not(.tab) {
+  padding: .2em .2em .2em 1.8em
+}
+
+#article-container ol > li::before {
+  margin-top: .65em;
+  width: 1.45em;
+  height: 1.45em;
+  border-radius: .725em;
+  content: counter(li);
+  counter-increment: li 1;
+  text-align: center;
+  font-size: .85em;
+  line-height: 1.45em
+}
+
+#article-container ul > li:not(.tab) {
+  padding: .2em .2em .2em 1.4em
+}
+
+#article-container ul > li:not(.tab):hover::before {
+  border-color: #ff7242
+}
+
+#article-container ul > li:not(.tab)::before {
+  top: .78em;
+  width: .42em;
+  height: .42em;
+  border: .21em solid #307af6;
+  border-radius: .42em;
+  background: 0 0;
+  content: "";
+  line-height: .42em
+}
+
+#article-container > :last-child {
+  margin-bottom: 0 !important
+}
+
+#article-container .btn-center {
+  margin: 0 0 1rem;
+  text-align: center
+}
+
+#article-container .btn-beautify {
+  display: inline-block;
+  margin: 0 .2rem .3rem;
+  padding: 0 1rem;
+  background-color: #777;
+  color: #fff;
+  line-height: 2
+}
+
+#article-container .btn-beautify i + span {
+  margin-left: .3rem
+}
+
+#article-container .btn-beautify:not(.block) + .btn-beautify:not(.block) {
+  margin: 0 .2rem 1rem
+}
+
+#article-container .btn-beautify.block {
+  display: block;
+  margin: 0 0 1rem;
+  width: fit-content
+}
+
+#article-container .btn-beautify.block.center {
+  margin: 0 auto 1rem
+}
+
+#article-container .btn-beautify.block.right {
+  margin: 0 0 1rem auto
+}
+
+#article-container .btn-beautify.larger {
+  padding: .3rem 1.3rem
+}
+
+#article-container .btn-beautify:hover {
+  text-decoration: none
+}
+
+#article-container .btn-beautify.blue {
+  background-color: #428bca
+}
+
+#article-container .btn-beautify.pink {
+  background-color: #ff69b4
+}
+
+#article-container .btn-beautify.red {
+  background-color: red
+}
+
+#article-container .btn-beautify.purple {
+  background-color: #6f42c1
+}
+
+#article-container .btn-beautify.orange {
+  background-color: #ff8c00
+}
+
+#article-container .btn-beautify.green {
+  background-color: #5cb85c
+}
+
+#article-container .btn-beautify.outline {
+  border: 1px solid #777;
+  background-color: transparent;
+  color: #777;
+  transition: all .3s ease 0s
+}
+
+#article-container .btn-beautify.outline.button--animated::before {
+  background: #777
+}
+
+#article-container .btn-beautify.outline:hover {
+  color: #fff !important
+}
+
+#article-container .btn-beautify.outline.blue {
+  border-color: #428bca;
+  color: #428bca
+}
+
+#article-container .btn-beautify.outline.blue.button--animated::before {
+  background: #428bca
+}
+
+#article-container .btn-beautify.outline.pink {
+  border-color: #ff69b4;
+  color: #ff69b4
+}
+
+#article-container .btn-beautify.outline.pink.button--animated::before {
+  background: #ff69b4
+}
+
+#article-container .btn-beautify.outline.red {
+  border-color: red;
+  color: red
+}
+
+#article-container .btn-beautify.outline.red.button--animated::before {
+  background: red
+}
+
+#article-container .btn-beautify.outline.purple {
+  border-color: #6f42c1;
+  color: #6f42c1
+}
+
+#article-container .btn-beautify.outline.purple.button--animated::before {
+  background: #6f42c1
+}
+
+#article-container .btn-beautify.outline.orange {
+  border-color: #ff8c00;
+  color: #ff8c00
+}
+
+#article-container .btn-beautify.outline.orange.button--animated::before {
+  background: #ff8c00
+}
+
+#article-container .btn-beautify.outline.green {
+  border-color: #5cb85c;
+  color: #5cb85c
+}
+
+#article-container .btn-beautify.outline.green.button--animated::before {
+  background: #5cb85c
+}
+
+#article-container .inline-img {
+  display: inline;
+  margin: 0 3px;
+  height: 1.1em;
+  vertical-align: text-bottom
+}
+
+#article-container.flink {
+  margin-top: 1rem
+}
+
+#article-container.flink h2 {
+  margin-top: .5rem;
+  margin-bottom: 0
+}
+
+.article-recent_post_categories {
+  font-size: 12px;
+  font-weight: 700;
+  opacity: .6;
+  line-height: 1
+}
+
+#article-container h1:before, #article-container h2:before, #article-container h3:before, #article-container h4:before, #article-container h5:before, #article-container h6:before {
+  top: calc(50% - .45rem);
+  content: ''
+}
+
+#article-container h1:hover:before, #article-container h2:hover:before, #article-container h3:hover:before, #article-container h4:hover:before, #article-container h5:hover:before, #article-container h6:hover:before {
+  color: var(--sco-lighttext)
+}
+
+#article-container h1:hover, #article-container h2:hover, #article-container h3:hover, #article-container h4:hover, #article-container h5:hover, #article-container h6:hover {
+  padding-left: 1.3rem
+}
+
+#article-container ul > li:not(.tab):before {
+  border: .21em solid var(--sco-lighttext);
+  background: var(--sco-lighttext)
+}
+
+#article-container ol, #article-container ul {
+  padding: 0
+}
+
+#article-container ul > li:not(.tab):hover:before {
+  border-color: var(--sco-none)
+}
+
+#article-container a {
+  text-decoration: none;
+  border-bottom: 2px solid var(--sco-lighttext);
+  color: var(--sco-fontcolor);
+  font-weight: 700;
+  padding: 0 4px;
+  border-radius: 4px 4px 0 0
+}
+
+#article-container .site-card:hover a:not(.fancybox) {
+  text-decoration: none;
+  border-bottom: 2px solid var(--sco-none);
+  color: var(--sco-white);
+  background: var(--sco-main);
+  box-shadow: var(--sco-shadow-main)
+}
+
+#article-container a.fancybox {
+  border-bottom: 0;
+  padding: 0;
+  margin: auto;
+  display: contents;
+  width: fit-content;
+  -webkit-user-select: none
+}
+
+#article-container a.fancybox img {
+  cursor: zoom-in
+}
+
+#article-container p {
+  margin: 1rem 0;
+  text-align: left;
+  letter-spacing: 1px
+}
+
+#article-container blockquote p {
+  line-height: 1.4;
+  font-size: 15px
+}
+
+#article-container code {
+  color: var(--sco-white);
+  padding: .2rem .4rem;
+  border-radius: 4px;
+  margin: 0 4px;
+  background: var(--sco-pink);
+  line-height: 2;
+  box-shadow: var(--sco-shadow-border)
+}
+
+#article-container code::selection {
+  background: var(--sco-main) !important
+}
+
+#article-container p {
+  font-size: .9rem;
+  line-height: 1.7;
+  font-weight: 400
+}
+
+#article-container.post-content h1, #article-container.post-content h2, #article-container.post-content h3, #article-container.post-content h4 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#article-container.post-content h1 {
+  font-size: 1.5rem;
+  line-height: 1.3
+}
+
+#article-container.post-content h2 {
+  font-size: 1.3rem;
+  line-height: 1.3;
+  border-top: 1px dashed var(--sco-theme-op);
+  padding-top: 1.5rem
+}
+
+#article-container.post-content h3 {
+  font-size: 1.1rem;
+  line-height: 1.3
+}
+
+#article-container.post-content h4 {
+  font-size: 1rem;
+  line-height: 1.3
+}
+
+@media screen and (max-width: 768px) {
+  #article-container p {
+    line-height: 1.5
+  }
+}
+
+#article-container > h1:nth-child(1), #article-container > h2:nth-child(1) {
+  margin: 0
+}
+
+#article-container .headerlink::before {
+  content: "\e038";
+  font-family: scoicon !important
+}
+
+#article-container .headerlink {
+  float: right;
+  opacity: .08;
+  position: relative;
+  padding: 0;
+  border-style: none;
+  border-radius: 8px !important;
+  line-height: 1;
+  font-size: 1rem
+}
+
+#article-container .headerlink:hover {
+  background: 0 0 !important;
+  opacity: 1;
+  border-bottom: none !important;
+  box-shadow: none !important;
+  background: var(--sco-none);
+  color: var(--sco-lighttext) !important;
+  text-decoration: none
+}
+
+#article-container img {
+  border-radius: 12px;
+  margin-bottom: .5rem;
+  object-fit: cover
+}
+
+#article-container img.error {
+  content: url(https://bu.dusays.com/2023/03/03/6401a79030db5.png)
+}
+
+.doge-inner-player {
+  border-radius: 12px !important
+}
+
+#article-container ol li:before, #article-container ul li:before {
+  background: var(--sco-main);
+  cursor: default
+}
+
+#article-container ol li:hover:before, #article-container ul li:hover:before {
+  transform: rotate(0)
+}
+
+#article-container figure.highlight .highlight-tools {
+  background: var(--sco-secondbg);
+  border-bottom: var(--style-border-always);
+  color: var(--sco-fontcolor)
+}
+
+#article-container .gutter {
+  opacity: .6;
+  user-select: none
+}
+
+#article-container .code-lang {
+  margin-left: 6px
+}
+
+#article-container .highlight-tools .code-lang {
+  text-transform: capitalize;
+  left: 1.9rem
+}
+
+#article-container figure.highlight table::-webkit-scrollbar {
+  color: var(--sco-blue);
+  background: var(--sco-card-bg);
+  height: 8px
+}
+
+#article-container figure.highlight table::-webkit-scrollbar-thumb {
+  background: var(--sco-main-op)
+}
+
+#article-container figure.highlight table::-webkit-scrollbar-thumb:hover {
+  background: var(--sco-main)
+}
+
+#article-container .code-expand-btn i {
+  color: var(--sco-fontcolor);
+  font-size: 14px;
+  line-height: 1;
+  animation: 1.2s ease 0s infinite normal none running code-expand-key
+}
+
+#article-container .code-expand-btn {
+  background: var(--sco-secondbg);
+  transition: .3s;
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transform: translateZ(0);
+  border-top: var(--style-border-always);
+  position: absolute;
+  bottom: 0;
+  z-index: 10;
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px
+}
+
+#article-container .code-expand-btn:hover {
+  background: var(--sco-main)
+}
+
+#article-container .code-expand-btn:hover i {
+  color: var(--sco-white)
+}
+
+#readmore-talk {
+  text-align: center;
+  color: var(--sco-lighttext);
+  padding: 8px;
+  border-radius: 12px;
+  background: #f2b94b0c
+}
+
+#article-container iframe {
+  border-radius: 12px !important
+}
+
+#article-container figure.highlight {
+  border-radius: 8px 8px 4px 4px
+}
+
+#article-container figure.highlight .gutter pre {
+  color: var(--sco-secondtext);
+  background: var(--sco-secondbg);
+  border-right: var(--style-border-always);
+  padding-right: .5rem;
+  padding-left: .5rem;
+  text-align: right
+}
+
+#article-container figure.highlight figcaption a {
+  color: #a9a9a9 !important
+}
+
+#article-container .highlight:not(.js-file-line-container) {
+  background-color: var(--sco-card-bg) !important;
+  color: var(--sco-fontcolor);
+  border: var(--style-border-always);
+  overflow: hidden
+}
+
+#article-container figure.highlight pre span::selection {
+  background: var(--sco-main) !important;
+  color: var(--sco-white) !important
+}
+
+#article-container h1 {
+  padding-left: 0
+}
+
+#article-container h1:before {
+  display: none
+}
+
+#article-container h1:hover {
+  padding-left: 0
+}
+
+#article-container > div > figure > figcaption > p {
+  margin: 0
+}
+
+#article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
+  padding: 8px 12px;
+  background: var(--sco-white);
+  border-radius: 12px;
+  color: var(--sco-black);
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  transition: .3s;
+  cursor: pointer;
+  border: none
+}
+
+#article-container .author-content-item.single.like-movie .banner-button-group .banner-button:hover {
+  background: #d0b247;
+  color: var(--sco-white)
+}
+
+#article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
+  margin-right: 8px;
+  font-size: 1rem
+}
+
+@media screen and (max-width: 768px) {
+  #article-container .author-content-item.single.like-movie .banner-button-group {
+    right: 1rem;
+    bottom: 1rem
+  }
+
+  #article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
+    background: 0 0;
+    color: var(--sco-white);
+    padding: 0
+  }
+
+  #article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
+    margin-right: 0;
+    font-size: 1.5rem
+  }
+
+  #article-container .author-content-item.single.like-movie .banner-button-group .banner-button-text {
+    display: none
+  }
+}
+
diff --git a/source/css/_post/relatedPost.styl b/source/css/_post/relatedPost.styl
new file mode 100644
index 00000000..3498871c
--- /dev/null
+++ b/source/css/_post/relatedPost.styl
@@ -0,0 +1,178 @@
+.relatedPosts {
+  margin-top: 2rem;
+  -webkit-user-select: none
+}
+
+.relatedPosts > .relatedPosts-list > div {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  margin: 3px;
+  width: calc(33.333% - 6px);
+  height: 200px;
+  background: var(--sco-main);
+  vertical-align: bottom
+}
+
+@media screen and (max-width: 768px) {
+  .relatedPosts > .relatedPosts-list > div {
+    margin: 2px;
+    width: calc(50% - 4px);
+    height: 150px
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .relatedPosts > .relatedPosts-list > div {
+    width: calc(100% - 4px)
+  }
+}
+
+.relatedPosts > .relatedPosts-list .cover {
+  width: 360px;
+  min-width: 45%;
+  height: 100%;
+  transition: all .6s ease 0s;
+  object-fit: cover;
+  filter: brightness(.9);
+  max-width: 45%
+}
+
+.relatedPosts > .relatedPosts-list .content {
+  padding: 0 1rem;
+  width: 100%
+}
+
+.relatedPosts > .relatedPosts-list .content .date {
+  color: var(--light-grey);
+  font-size: 90%
+}
+
+.relatedPosts > .relatedPosts-list .content .title {
+  color: var(--sco-white);
+  -webkit-line-clamp: 2;
+  margin-right: auto
+}
+
+.relatedPosts-link {
+  display: block;
+  justify-content: space-between;
+  margin-left: 8px;
+  font-size: 13px
+}
+
+.relatedPosts > .relatedPosts-list .cover::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(https://bu.dusays.com/2023/03/03/6401a79030db5.png) 50%;
+  background-size: cover
+}
+
+.relatedPosts > .relatedPosts-list a {
+  display: flex;
+  width: 100%;
+  height: 100%
+}
+
+@media screen and (min-width: 768px) {
+  #post > div.relatedPosts > div.relatedPosts-list > div {
+    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+  }
+
+  #post > div.relatedPosts > div.relatedPosts-list > div {
+    border-radius: 12px
+  }
+
+  .relatedPosts > .headline {
+    font-size: .8em
+  }
+
+  @media screen and (max-width: 1300px) {
+    #post > div.relatedPosts > div.relatedPosts-list > div:nth-child(7) {
+      display: none
+    }
+
+    #post > div.relatedPosts > div.relatedPosts-list > div:nth-child(8) {
+      display: none
+    }
+  }
+}
+
+.relatedPosts > .headline {
+  margin-bottom: .8rem;
+  font-weight: 700;
+  font-size: 20px;
+  display: flex;
+  align-items: center
+}
+
+.relatedPosts > .headline span {
+  margin-right: auto;
+  margin-left: 8px
+}
+
+.relatedPosts > .headline a {
+  font-weight: 400
+}
+
+.relatedPosts-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  flex-direction: column
+}
+
+.relatedPosts > .relatedPosts-list > div {
+  background: var(--sco-secondbg);
+  border: var(--style-border);
+  transition: .3s;
+  cursor: pointer;
+  overflow: hidden;
+  width: 100%;
+  margin-bottom: 8px
+}
+
+.relatedPosts > .relatedPosts-list > div:hover {
+  background: var(--sco-main)
+}
+
+@media screen and (max-width: 768px) {
+  .relatedPosts {
+    display: none
+  }
+
+  .relatedPosts > .relatedPosts-list > div {
+    border-radius: 4px
+  }
+}
+
+.relatedPosts > .relatedPosts-list > div:hover a .title {
+  color: var(--sco-white)
+}
+
+.relatedPosts > .relatedPosts-list .content .title {
+  color: var(--sco-fontcolor);
+  font-weight: 700;
+  line-height: 1.5;
+  -webkit-line-clamp: 4;
+  font-size: .9rem;
+  text-align: left;
+  overflow: hidden
+}
+
+.relatedPosts > .relatedPosts-list .content .date {
+  color: var(--sco-fontcolor);
+  display: none
+}
+
+@media screen and (min-width: 768px) {
+  .relatedPosts {
+    margin-top: 1rem
+  }
+}
\ No newline at end of file
diff --git a/source/css/_post/reward.styl b/source/css/_post/reward.styl
new file mode 100644
index 00000000..b25057e5
--- /dev/null
+++ b/source/css/_post/reward.styl
@@ -0,0 +1,236 @@
+.reward-main {
+  animation: .3s ease .1s 1 normal both running donate_effcet
+}
+
+.post-reward {
+   position: relative;
+   margin-top: 4rem;
+   text-align: center
+ }
+
+.post-reward:hover > .reward-main {
+  display: block
+}
+
+.post-reward .reward-main {
+  position: absolute;
+  bottom: 40px;
+  left: -96px;
+  z-index: 100;
+  display: none;
+  padding: 0 0 15px;
+  width: fit-content
+}
+
+.post-reward .reward-main .reward-all {
+  display: inline-block;
+  margin: 0;
+  padding: 1rem .5rem;
+  border-radius: 4px;
+  background: var(--sco-maskbgdeep)
+}
+
+.post-reward .reward-main .reward-all::before {
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  content: ""
+}
+
+.post-reward .reward-main .reward-all::after {
+  position: absolute;
+  right: 0;
+  bottom: 2px;
+  left: 0;
+  margin: 0 auto;
+  width: 0;
+  height: 0;
+  border-top: 13px solid var(--reward-pop);
+  border-right: 13px solid transparent;
+  border-left: 13px solid transparent;
+  content: ""
+}
+
+.post-reward .reward-main .reward-all .reward-item {
+  display: inline-block;
+  padding: 0 8px;
+  list-style-type: none;
+  vertical-align: top
+}
+
+.post-reward .reward-main .reward-all .reward-item img {
+  width: 130px;
+  height: 130px
+}
+
+.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
+  padding-top: .4rem;
+  width: 130px;
+  color: #858585
+}
+
+.post-reward .reward-button {
+  background: var(--sco-red);
+  color: var(--sco-white);
+  padding: 0 16px;
+  height: 40px;
+  line-height: 39px;
+  box-shadow: var(--sco-shadow-red);
+  display: inline-block;
+  cursor: pointer;
+  transition: all .4s ease 0s
+}
+
+.post-reward:hover .reward-button {
+  color: var(--sco-white);
+  background: var(--sco-theme);
+  box-shadow: none
+}
+
+.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
+  padding-top: 0;
+  margin-top: -8px;
+  margin-bottom: 8px
+}
+
+.post-reward .reward-main .reward-all {
+  border-radius: 12px;
+  background: var(--sco-card-bg);
+  border: var(--style-border-always);
+  padding: .8rem;
+  display: flex;
+  box-shadow: var(--sco-shadow-border);
+  flex-direction: column;
+  align-items: center
+}
+
+.reward-dec {
+  font-size: .6rem
+}
+
+.reward-text {
+  margin-bottom: 0;
+  font-weight: 700
+}
+
+a.reward-main-btn {
+  background: var(--sco-secondbg);
+  color: var(--sco-fontcolor);
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  padding: 4px 0;
+  border: var(--style-border-always);
+  margin: 8px;
+  width: 100%
+}
+
+a.reward-main-btn:hover {
+  color: var(--sco-white);
+  background: var(--sco-red);
+  background-image: url(https://bu.dusays.com/2023/11/01/6541f7aeb5752.gif);
+  box-shadow: var(--sco-shadow-red)
+}
+
+.reward-title {
+  font-weight: 700;
+  color: var(--sco-red)
+}
+
+.reward-link.mode {
+  background: var(--sco-green);
+  color: var(--sco-white);
+  padding: 0 16px;
+  height: 40px;
+  line-height: 39px;
+  box-shadow: var(--sco-shadow-green);
+  border-radius: 8px;
+  margin-left: .5rem;
+  text-align: center;
+  transition: .3s
+}
+
+.reward-link.mode a {
+  color: var(--sco-white)
+}
+
+.reward-link.mode i {
+  margin-right: 4px
+}
+
+.reward-link.mode:hover {
+  background: var(--sco-theme);
+  box-shadow: none
+}
+
+.post-reward {
+  margin-top: 0;
+  display: flex;
+  justify-content: center
+}
+
+.post-reward:hover > .reward-main {
+  display: none
+}
+
+.post-reward .reward-main {
+  z-index: 1003
+}
+
+@media screen and (min-width: 768px) {
+  .post-reward:hover > .reward-main {
+    display: flex !important;
+    justify-content: left
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .post-reward .reward-main {
+    justify-content: center !important;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1003;
+    width: 100%;
+    margin: auto;
+    padding: 0
+  }
+
+  .post-reward .reward-main .reward-all {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 30px 0 60px 0;
+    border-radius: 12px 12px 0 0
+  }
+
+  #post .tag_share .post-meta__tags {
+    margin: 0 .5rem 0 0
+  }
+
+  a.reward-main-btn {
+    margin: 4px auto
+  }
+}
+
+.post-reward .reward-main .reward-all:after {
+  display: none
+}
+
+.reward-group {
+  display: flex;
+  margin-top: .5rem
+}
+
+.post-reward .reward-main .reward-all .reward-item:first-child img {
+  border-color: var(--sco-green)
+}
+
+.post-reward .reward-main .reward-all .reward-item:last-child img {
+  border-color: var(--sco-blue)
+}
+
diff --git a/source/css/_search/algolia-search.styl b/source/css/_search/algolia-search.styl
index 5e8c3bee..98e25b41 100644
--- a/source/css/_search/algolia-search.styl
+++ b/source/css/_search/algolia-search.styl
@@ -92,6 +92,9 @@
 
 	.algolia-hit-item-content 
 		margin 0
+		padding-left 10px
+		font-size 14px
+		color var(--sco-gray)
 
 	.algolia-hit-item-link 
 		width auto
diff --git a/source/css/index.styl b/source/css/index.styl
index c1bce1ae..96bcff76 100644
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -8,16 +8,19 @@ if hexo-config('css_prefix')
 @import '_global/*'
 @import '_layout/*'
 @import '_page/*'
+@import '_post/*'
+
+// comment
+if hexo-config('comment.enable')
+	@import '_comment/index.styl'
+	@import '_comment/twikoo.styl' when hexo-config('comment.type') == 'twikoo'
 
 // commentBarrage
 if hexo-config('thirdparty.comment.enable')
 	@import '_post/commentBarrage.styl'
 
-// console
-@import '_extra/console.styl'
-
-// External tags
-@import '_post/externalTags.styl'
+// extra
+@import '_extra/*'
 
 // search
 if hexo-config('thirdparty.search.algolia_search.enable')
diff --git a/source/css/main.css b/source/css/main.css
index 68486b1f..45c6ec18 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -1,11091 +1,2113 @@
 @charset "UTF-8";
 
-::selection {
-    background: var(--sco-fontcolor);
-    color: var(--sco-background)
-}
-
-i.scoicon {
-    font-size: 22px;
-    line-height: 1
-}
-
-svg.scoicon {
-    width: 1em;
-    height: 1em;
-    vertical-align: -0.15em;
-    fill: currentColor;
-    overflow: hidden;
+#page .category-lists {
+    padding: 1rem 0 1.5rem
 }
 
-svg.scoicon.tab {
-    width: 1.5em;
-    height: 1.5em;
-    vertical-align: -0.15em;
-    fill: currentColor;
-    overflow: hidden;
-    padding-right: 5px;
+@media screen and (max-width: 768px) {
+    #page .category-lists {
+        padding: 0
+    }
 }
 
-#page img {
-    border-radius: 12px
+#page .category-lists .category-title {
+    font-size: 2.57em
 }
 
-#page p a:not(.headerlink) {
-    text-decoration: none;
-    border-bottom: 2px solid var(--sco-lighttext);
-    color: var(--sco-fontcolor);
-    font-weight: 700;
-    padding: 0 4px;
-    border-radius: 4px 4px 0 0
+@media screen and (max-width: 768px) {
+    #page .category-lists .category-title {
+        font-size: 2em
+    }
 }
 
-#page p a:hover {
-    text-decoration: none
+#page .category-lists .category-list a {
+    color: var(--sco-fontcolor)
 }
 
-html {
-    line-height: 1.15;
-    text-size-adjust: 100%
+#page .category-lists .category-list a:hover {
+    color: #307af6
 }
 
-main {
-    display: block
+#page .category-lists .category-list .category-list-count {
+    margin-left: .4rem;
+    color: #858585
 }
 
-h1 {
-    font-size: 2em;
-    margin: .67em 0
+#page .category-lists .category-list .category-list-count::before {
+    content: "("
 }
 
-hr {
-    box-sizing: content-box;
-    height: 0;
-    overflow: visible
+#page .category-lists .category-list .category-list-count::after {
+    content: ")"
 }
 
-pre {
-    font-family: monospace, monospace
+#page .category-lists ul {
+    margin-top: .4rem;
+    padding: 0 0 0 1rem;
+    list-style: none;
+    counter-reset: li 0
 }
 
-a {
-    background-color: transparent;
-    color: var(--sco-fontcolor);
-    text-decoration: none;
-    transition: all .2s ease 0s;
-    overflow-wrap: break-word;
-    -webkit-user-drag: none
+#page .category-lists ul ul {
+    padding-left: .2rem
 }
 
-abbr[title] {
-    border-bottom: none;
-    text-decoration: underline dotted
+#page .category-lists ul li {
+    position: relative;
+    margin: .3rem 0;
+    padding: .12em .4em .12em 1.4em
 }
 
-b, strong {
-    font-weight: bolder
+#page .category-lists ul li::before {
+    position: absolute;
+    left: 0;
+    cursor: pointer;
+    transition: all .3s ease-out 0s;
+    top: .7em;
+    width: .43em;
+    height: .43em;
+    border: .215em solid #307af6;
+    border-radius: .43em;
+    background: 0 0;
+    content: ""
 }
 
-code, kbd, samp {
-    font-family: monospace, monospace;
-    font-size: 1em
+#page .category-lists ul li:hover::before {
+    border-color: #ff7242
 }
 
-small {
-    font-size: 80%
+.tag-cloud-list a {
+    display: inline-block;
+    padding: 0 .4rem;
+    transition: all .3s ease 0s
 }
 
-sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline
+.tag-cloud-list a:hover {
+    transform: scale(1.1);
+    color: #307af6 !important
 }
 
-sub {
-    bottom: -.25em
+@media screen and (max-width: 768px) {
+    .tag-cloud-list a {
+        zoom: .85
+    }
 }
 
-sup {
-    top: -.5em
+.tag-cloud-title {
+    font-size: 2.57em
 }
 
-button, input, optgroup, select, textarea {
-    font-family: inherit;
-    font-size: 100%;
-    line-height: 1.15;
-    margin: 0
+@media screen and (max-width: 768px) {
+    .tag-cloud-title {
+        font-size: 2em
+    }
 }
 
-button, input {
-    overflow: visible
+#page h1.page-title {
+    margin: .4rem 0 1rem
 }
 
-button, select {
-    text-transform: none
+.fireworks {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    pointer-events: none
 }
 
-[type=button], [type=reset], [type=submit], button {
-    appearance: button
+.medium-zoom-image--opened {
+    z-index: 99999 !important;
+    margin: 0 !important
 }
 
-fieldset {
-    padding: .35em .75em .625em
+.medium-zoom-overlay {
+    z-index: 99999 !important
 }
 
-legend {
-    box-sizing: border-box;
-    color: inherit;
-    display: table;
-    max-width: 100%;
-    padding: 0;
-    white-space: normal
+.mermaid {
+    overflow: auto;
+    margin: 0 0 1rem;
+    background: #fff;
+    text-align: center;
+    opacity: 0;
+    transition: all .3s ease 0s
 }
 
-progress {
-    vertical-align: baseline
+.mermaid[data-processed] {
+    opacity: 1;
+    filter: none
 }
 
-textarea {
+.katex-wrap {
     overflow: auto
 }
 
-[type=checkbox], [type=radio] {
-    box-sizing: border-box;
-    padding: 0
+.katex-wrap::-webkit-scrollbar {
+    display: none
 }
 
-[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
-    height: auto
+blockquote.pullquote {
+    position: relative;
+    max-width: 45%;
+    font-size: 110%
 }
 
-[type=search] {
-    appearance: textfield;
-    outline-offset: -2px
+blockquote.pullquote.left {
+    float: left;
+    margin: 1em .5em 0 0
 }
 
-[type=search]::-webkit-search-decoration {
-    appearance: none
+blockquote.pullquote.right {
+    float: right;
+    margin: 1em 0 0 .5rem
 }
 
-input[type=checkbox] + label::before {
-    content: "";
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border: 1px solid #999;
-    background-color: #fff;
-    margin-right: 5px;
-    vertical-align: middle
+.video-container {
+    position: relative;
+    overflow: hidden;
+    margin-bottom: .8rem;
+    padding-top: 56.25%;
+    height: 0
 }
 
-::-webkit-file-upload-button {
-    appearance: button;
-    font: inherit
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: 0;
+    width: 100%;
+    height: 100%
 }
 
-summary {
-    display: list-item
+.hl-label {
+    padding: 2px 4px;
+    border-radius: 3px;
+    color: #fff
 }
 
-template {
-    display: none
+.hl-label.default {
+    background-color: #777
 }
 
-[hidden] {
-    display: none
+.hl-label.blue {
+    background-color: #428bca
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span, #aside-content .card-info .card-info-data > .card-info-data-item a .headline, #pagination .next_info, #pagination .prev_info, #sidebar #sidebar-menus .menus_items .site-page, #sidebar #sidebar-menus .site-data .data-item .data-item-link > a > div, .flink#article-container .flink-list > .flink-list-item a .flink-item-desc, .flink#article-container .flink-list > .flink-list-item a .flink-item-name, .limit-one-line {
-    text-overflow: ellipsis;
-    white-space: nowrap
+.hl-label.pink {
+    background-color: #ff69b4
 }
 
-#aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > .title, #error-wrap .error-content .error-info .error_subtitle, #post-info .post-title, #recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts > .recent-post-item > .recent-post-info > .content, .article-sort-item-title, .limit-more-line, .relatedPosts > .relatedPosts-list .content .title, figure.gallery-group .gallery-group-name, figure.gallery-group p {
-    display: -webkit-box;
-    -webkit-box-orient: vertical
+.hl-label.red {
+    background-color: red
 }
 
-#aside-content .aside-list > .aside-list-item .content > .title {
-    overflow: hidden
+.hl-label.purple {
+    background-color: #6f42c1
 }
 
-.card-announcement-animation {
-    color: red;
-    animation: .8s linear 0s infinite normal none running announ_animation
+.hl-label.orange {
+    background-color: #ff8c00
 }
 
-.scroll-down-effects {
-    animation: 1.5s ease 0s infinite normal none running scroll-down-effect
+.hl-label.green {
+    background-color: #5cb85c
 }
 
-.reward-main {
-    animation: .3s ease .1s 1 normal both running donate_effcet
+#page {
+    min-height: calc(100vh - 464px)
 }
 
-html {
-    height: 100%;
-    font-size: 20px
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px
 }
 
-body {
-    position: relative;
-    min-height: 100%;
-    background: var(--sco-background);
-    color: var(--sco-fontcolor);
-    font-size: 16px;
-    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
-    line-height: 2;
-    -webkit-tap-highlight-color: transparent;
-    margin: 0
+::-webkit-scrollbar-thumb {
+    background: var(--sco-scrollbar);
+    border-radius: 8px;
+    cursor: pointer
 }
 
-input::placeholder {
-    color: var(--sco-fontcolor)
+::-webkit-scrollbar-thumb:hover {
+    background: var(--sco-main);
+    opacity: 1;
+    display: block !important
 }
 
-h1, h2, h3, h4, h5, h6 {
-    position: relative;
-    margin: 1rem 0 .7rem;
-    color: var(--sco-fontcolor);
-    font-weight: 700
+::-webkit-scrollbar-track {
+    background-color: var(--sco-none)
 }
 
-h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
-    font-size: inherit !important
+html {
+    overflow-y: overlay
 }
 
-* {
-    box-sizing: border-box
-}
 
-hr {
-    position: relative;
-    margin: 2rem auto;
-    border: 2px dashed var(--hr-border)
-}
 
-.table-wrap {
-    overflow-x: scroll;
-    margin: 0 0 1rem
+[data-theme=dark] img {
+    filter: brightness(1)
 }
 
-table {
-    display: table;
-    width: 100%;
-    border-spacing: 0;
-    border-collapse: collapse;
-    empty-cells: show
+.site-page i.fa-chevron-down {
+    display: none
 }
 
-table thead {
-    background: rgba(153, 169, 191, .1)
+.fa, .fa-brands, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fat {
+    line-height: 1
 }
 
-table td, table th {
-    padding: .3rem .6rem;
-    border: 1px solid var(--light-grey);
-    vertical-align: middle;
+hr {
+    display: none
 }
 
-::selection {
-    background: #0079ff;
-    color: #f7f7f7
+#card-poem {
+    display: flex;
+    flex-direction: column;
+    padding: .5rem !important;
+    min-height: 130px
 }
 
-.fa-spin {
-    animation: sco-spin 1.2s linear infinite;
-    opacity: .6
+div#poem_sentence {
+    text-align: center;
+    font-family: serif, cursive;
+    line-height: 1.4;
+    margin-bottom: .5rem;
+    padding: 1rem;
+    border-radius: 12px;
+    background: var(--sco-secondbg);
+    min-height: 62px
 }
 
-button {
-    padding: 0;
-    outline: 0;
-    border: none;
-    background: 0 0;
-    cursor: pointer
+div#poem_info {
+    display: flex;
+    color: var(--sco-secondtext);
+    font-size: .5rem;
+    justify-content: center;
+    flex-wrap: wrap
 }
 
-a:hover {
-    color: var(--sco-lighttext)
+div#poem_author {
+    order: 1;
+    padding: 2px;
+    margin-left: 8px
 }
 
-#aside-content .author-info__description, #aside-content .author-info__name, #site-name, #site-subtitle, #site-title {
-    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
+div#poem_dynasty {
+    order: 0;
+    padding: 2px 4px 2px 6px;
+    background: var(--sco-card-btn-bg);
+    color: var(--sco-fontcolor);
+    border-radius: 8px
 }
 
-.is-center {
-    text-align: center;
+a.deal_link {
     display: flex;
-    flex-wrap: wrap;
+    margin: 1rem 27px;
+    color: var(--sco-card-bg);
+    border-radius: 3rem;
+    width: 32px;
+    height: 32px;
+    background: var(--sco-fontcolor);
     justify-content: center;
-    flex-direction: row;
-    align-items: center
+    align-items: center;
+    transition: .3s
 }
 
-.card-info-avatar.is-center {
-    flex-direction: column;
-    display: flex;
-    align-items: flex-start;
+a.deal_link:hover {
+    color: var(--sco-white);
+    background: var(--sco-main);
+    transform: scale(1.1);
 }
 
-.copy-true {
-    user-select: all
+#algolia-hits .tag-list:hover {
+    background: var(--sco-main);
+    color: var(--sco-white)
 }
 
-.pull-left {
-    float: left
+#card-info-btn {
+    border-radius: 25px;
+    overflow: hidden
 }
 
-.pull-right {
-    float: right
+#card-info-btn:before {
+    border-radius: 25px
 }
 
-.button--animated {
-    position: relative;
-    z-index: 1;
-    transition: color 1s ease 0s
+.not-index-bg {
+    height: 2rem !important;
+    background-image: none !important;
+    background-color: var(--sco-none) !important
 }
 
-.button--animated::before {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    background: var(--btn-hover-color);
-    content: "";
-    transition: transform .5s ease-out 0s;
-    transform: scaleX(0);
-    transform-origin: 0 50%
+.not-index-bg img {
+    display: none
 }
 
-.button--animated:hover::before {
-    transition-timing-function: cubic-bezier(.45, 1.64, .47, .66);
-    transform: scaleX(1)
+.not-index-bg #page-site-info {
+    display: none
 }
 
-img {
-    max-width: 100%;
-    transition: all .2s ease 0s;
-    border-style: none
+.pace {
+    -webkit-pointer-events: none;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    z-index: 2000;
+    position: fixed;
+    margin: auto;
+    top: 4px;
+    left: 0;
+    right: 0;
+    height: 8px;
+    border-radius: 8px;
+    width: 4rem;
+    background: var(--sco-secondbg);
+    border: var(--style-border);
+    overflow: hidden
 }
 
-img:not([src]), img[src=""] {
-    opacity: 0
+.pace-inactive .pace-progress {
+    opacity: 0;
+    transition: .3s ease-in
 }
 
-.img-alt {
-    margin: -.5rem 0 .5rem;
-    color: #858585
+.pace .pace-progress {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    max-width: 200px;
+    z-index: 2000;
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 100%;
+    height: 100%;
+    width: 100%;
+    background: var(--sco-logo-color);
+    animation: gradient 2s ease infinite;
+    background-size: 200%
 }
 
-.img-alt:hover {
-    text-decoration: none !important
+.pace.pace-inactive {
+    opacity: 0;
+    transition: .3s;
+    top: -8px
 }
 
-figure.highlight table::-webkit-scrollbar-thumb {
-    background: var(--hlscrollbar-bg)
+.card-widget.card-recent-post {
+    padding: .4rem .6rem !important
 }
 
-figure.highlight pre .deletion {
-    color: #bf42bf
+.main-hero-waves-area {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: -11px;
+    z-index: 5
 }
 
-figure.highlight pre .addition {
-    color: #105ede
+.waves-area .waves-svg {
+    width: 100%;
+    height: 60px
 }
 
-figure.highlight pre .meta {
-    color: #c792ea
+.parallax > use {
+    animation: move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
 }
 
-figure.highlight pre .comment {
-    color: #969896
+.parallax > use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s;
+    fill: var(--sco-background);
+    opacity: .5
 }
 
-figure.highlight pre .attribute, figure.highlight pre .css .class, figure.highlight pre .css .id, figure.highlight pre .css .pseudo, figure.highlight pre .html .doctype, figure.highlight pre .regexp, figure.highlight pre .ruby .constant, figure.highlight pre .tag .name, figure.highlight pre .variable, figure.highlight pre .xml .doctype, figure.highlight pre .xml .pi, figure.highlight pre .xml .tag .title {
-    color: var(--sco-red)
+.parallax > use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s;
+    fill: var(--sco-background);
+    opacity: .6
 }
 
-figure.highlight pre .tag {
-    color: var(--sco-pink)
+.parallax > use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s;
+    fill: var(--sco-background);
+    opacity: .7
 }
 
-figure.highlight pre .command, figure.highlight pre .constant, figure.highlight pre .literal, figure.highlight pre .number, figure.highlight pre .params, figure.highlight pre .preprocessor {
-    color: var(--sco-orange)
+.parallax > use:nth-child(4) {
+    animation-delay: -5s;
+    animation-duration: 20s;
+    fill: var(--sco-background)
 }
 
-figure.highlight pre .built_in {
-    color: var(--sco-yellow)
+@media (max-width: 768px) {
+    .main-hero-waves-area {
+        display: none
+    }
 }
 
-figure.highlight pre .css .rules .attribute, figure.highlight pre .formula, figure.highlight pre .header, figure.highlight pre .inheritance, figure.highlight pre .number, figure.highlight pre .ruby .class .title, figure.highlight pre .ruby .symbol, figure.highlight pre .special, figure.highlight pre .string, figure.highlight pre .value, figure.highlight pre .xml .cdata {
-    color: var(--sco-green)
+.medium-zoom-overlay {
+    background: var(--sco-maskbg) !important;
+    z-index: 99998 !important;
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    transform: translateZ(0)
 }
 
-figure.highlight pre .css .hexcolor, figure.highlight pre .keyword, figure.highlight pre .title {
-    color: #3eb1df
+.medium-zoom-image--opened {
+    border-radius: 2px
 }
 
-figure.highlight pre .coffeescript .title, figure.highlight pre .function, figure.highlight pre .javascript .title, figure.highlight pre .perl .sub, figure.highlight pre .python .decorator, figure.highlight pre .python .title, figure.highlight pre .ruby .function .title, figure.highlight pre .ruby .title .keyword {
-    color: var(--sco-blue)
+.button--animated {
+    border-radius: 8px !important;
+    transition: .3s
 }
 
-figure.highlight pre .javascript .function, figure.highlight pre .tag .attr {
-    color: #c792ea
+#error-wrap .error-content .error-info a:hover {
+    background-color: var(--sco-blue);
+    transition: .3s;
+    box-shadow: var(--sco-shadow-blue)
 }
 
-#article-container figure.highlight .line.marked {
-    background-color: rgba(97, 97, 97, .314)
+.button--animated:before {
+    display: none
 }
 
-#article-container figure.highlight table {
-    display: inline-flex;
-    border: none;
-    overflow-y: hidden;
-    overflow-x: auto;
+a.tree-list-post-link {
+    font-size: .8rem;
+    line-height: 1.2 !important
 }
 
-#article-container figure.highlight table td {
-    padding: 0;
-    border: none;
-    height: 100%
+li.tree-list-item {
+    line-height: 1.9;
+    margin: .3rem 0
 }
 
-#article-container figure.highlight table td.code {
-    width: 100%;
+.title-h2-a {
     display: flex;
-    position: relative
+    align-items: center;
+    justify-content: space-between;
+    margin-top: .5rem
 }
 
-#article-container figure.highlight .code pre {
-    padding-right: .5rem;
-    padding-left: .5rem;
-    width: 100%
+.title-h2-a a {
+    margin-left: .5rem;
+    color: var(--sco-secondtext);
+    font-weight: 700
 }
 
-#article-container figure.highlight, #article-container pre {
-    overflow: auto;
-    margin: 0 0 1rem;
-    padding: 0;
-    line-height: 1.6
+.title-h2-a a:hover {
+    color: var(--sco-hovertext)
 }
 
-blockquote {
-    margin: 0 0 1rem;
-    padding: .1rem .8rem;
-    border-left: .2rem solid #49b1f5;
-    background-color: var(--blockquote-bg);
-    color: var(--blockquote-color)
+.title-h2-a-left {
+    display: flex;
+    align-items: center
 }
 
-blockquote a {
-    word-break: break-all
+.title-h2-a-left h2 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important
 }
 
-blockquote p {
-    padding: .5rem 0;
-    margin: 0 !important
+.title-h2-a-right {
+    font-size: 14px;
+    color: var(--sco-secondtext)
 }
 
-blockquote footer {
-    padding: 0 0 .5rem
+#card-funds .funds-list::-webkit-scrollbar {
+    display: none !important
 }
 
-blockquote footer cite::before {
-    padding: 0 .3em;
-    content: "—"
+.funds-tips {
+    font-size: .5rem;
+    width: 100%;
+    text-align: center;
+    color: var(--sco-secondtext);
+    margin: .5rem 0 0 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: absolute;
+    bottom: .5rem;
+    left: 0;
+    padding: 0 1rem
 }
 
-#article-container code, #article-container pre {
-    font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important
+.funds-list {
+    height: 200px;
+    overflow: scroll
 }
 
-#article-container code {
-    padding: .1rem .2rem;
-    background: rgba(27, 31, 35, .05);
-    color: #f47466
+span.fund_name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
 }
 
-#article-container pre code {
-    padding: 0;
-    background: 0 0;
-    color: var(--hl-color);
-    text-shadow: none
+.funds-info {
+    margin-left: 4px;
+    color: var(--sco-secondtext)
 }
 
-#article-container figure.highlight {
-    position: relative
+.funds-list-item .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: nowrap
 }
 
-#article-container figure.highlight pre {
-    margin: 0;
-    padding: 8px 0;
-    border: none
+.fund_dayGrowth {
+    display: inline;
+    float: right
 }
 
-#article-container figure.highlight .caption, #article-container figure.highlight figcaption {
-    padding: .3rem 0 .1rem .7rem;
-    font-size: 16px;
-    line-height: 1em
+.fund-up {
+    color: var(--sco-red)
 }
 
-#article-container figure.highlight .caption a, #article-container figure.highlight figcaption a {
-    float: right;
-    padding-right: 10px;
-    color: var(--hl-color)
+.fund-down {
+    color: var(--sco-green)
 }
 
-#article-container figure.highlight .caption a:hover, #article-container figure.highlight figcaption a:hover {
-    border-bottom-color: var(--hl-color)
+.music-link {
+    display: flex;
+    justify-content: center;
+    align-content: center
 }
 
-#article-container .highlight-tools {
-    position: relative;
+.friend-link {
     display: flex;
-    -webkit-box-align: center;
-    align-items: center;
-    overflow: hidden;
-    min-height: 1.2rem;
-    height: 2.15em;
-    background: var(--hltools-bg);
-    color: var(--hltools-color);
-    font-size: 16px
+    justify-content: center;
+    align-content: center
 }
 
-.highlight-tools .sco-copy-fill {
-    position: absolute;
-    right: .7rem;
-    cursor: pointer;
-    transition: color .2s;
-    font-size: 18px
+#widget-tree-button {
+    background-color: var(--sco-secondbg) !important;
+    box-shadow: var(--sco-shadow-light2black) !important;
+    color: var(--sco-fontcolor)
 }
 
-.highlight-tools .sco-copy-fill:hover {
-    color: var(--sco-main)
+#widget-tree:hover #widget-tree-button {
+    opacity: 0;
+    left: -1.5rem
 }
 
-#article-container .highlight-tools.closed + table {
-    display: none
+#widget-tree {
+    background-color: var(--sco-maskbg) !important
 }
 
-#article-container .highlight-tools .expand {
-    position: absolute;
-    padding: .4rem .3rem;
-    cursor: pointer;
-    transition: transform .3s ease 0s
+#widget-tree:hover {
+    left: 0 !important;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    transform: translateZ(0)
 }
 
-#article-container .highlight-tools .expand + .code-lang {
-    left: 1.7rem
+#widget-tree a {
+    -webkit-line-clamp: 2;
+    color: var(--sco-fontcolor) !important
 }
 
-#article-container .highlight-tools .expand.closed {
-    transition: all .3s ease 0s;
-    transform: rotate(-90deg) !important
+#widget-tree a:hover {
+    color: var(--sco-hovertext) !important
 }
 
-#article-container .highlight-tools .code-lang {
-    position: absolute;
-    left: .7rem;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 1.15em;
-    user-select: none
-}
-
-#article-container .highlight-tools .copy-notice {
-    position: absolute;
-    right: 1.7rem;
-    opacity: 0;
-    transition: opacity .4s ease 0s
+.toggle-post-icon, .toggle-toc-icon {
+    color: var(--sco-fontcolor) !important
 }
 
-#article-container .highlight-tools .copy-button {
-    position: absolute;
-    right: .7rem;
-    cursor: pointer;
-    transition: color .2s ease 0s
+@media screen and (max-width: 768px) {
+    #widget-tree {
+        display: none !important
+    }
 }
 
-#article-container .highlight-tools .copy-button:hover {
-    color: #307af6
+.guli_top {
+    position: fixed;
+    z-index: 99;
+    right: 30px;
+    display: flex;
+    transition: .3s;
+    opacity: 0;
+    bottom: -25px;
+    width: 88px;
+    height: 123px;
+    user-select: none
 }
 
-#article-container .gist table {
-    width: auto
+.guli_top.guli-fixed {
+    opacity: 1;
+    bottom: 25px
 }
 
-#article-container .gist table td {
-    border: none
+#guli_top .guli_body {
+    position: relative;
+    height: 123px;
+    z-index: 1003
 }
 
-#article-container .code-expand-btn.expand-done {
-    display: none !important
+#guli_top .guli_body:hover {
+    cursor: pointer
 }
 
-#article-container .code-expand-btn:not(.expand-done) ~ pre, #article-container .code-expand-btn:not(.expand-done) ~ table {
-    overflow: hidden;
-    height: 400px
+#guli_top .guli_wing {
+    position: relative;
+    height: 64px;
+    z-index: 1002;
+    bottom: -120px;
+    transform: scale(.01);
+    box-shadow: var(--sco-shadow-yellow)
 }
 
-.article-sort {
-    margin-left: .5rem;
-    padding-left: 1rem;
-    border-left: 2px solid #92b9fa
+#guli_top.open_wing .guli_wing {
+    transform: scale(1.03)
 }
 
-.article-sort-title::before {
-    position: absolute;
-    top: calc((100% - 1.8rem) / 2);
-    left: -.45rem;
-    z-index: 1;
-    width: .5rem;
-    height: .5rem;
-    border: .25rem solid #307af6;
-    border-radius: .5rem;
-    background: var(--sco-card-bg);
-    content: "";
-    line-height: .5rem;
-    transition: all .2s ease-in-out 0s
+#guli_top.open_wing .guli_body {
+    transform: scale(1)
 }
 
-.article-sort-title::after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 0;
-    width: .1rem;
-    height: 1.5em;
-    background: #92b9fa;
-    content: ""
+@media screen and (max-width: 1300px) {
+    #guli_top {
+        display: none
+    }
 }
 
-.article-sort-item {
-    position: relative;
+#cookies-window {
+    min-width: 300px;
+    background: var(--sco-maskbgdeep);
+    color: var(--sco-fontcolor);
+    padding: 8px 16px;
     display: flex;
-    -webkit-box-align: center;
-    align-items: center;
-    margin: 0 0 1rem .5rem;
-    transition: all .2s ease-in-out 0s
+    flex-direction: column;
+    bottom: 20px;
+    right: 20px;
+    position: fixed;
+    border-radius: 12px;
+    transition: .3s;
+    z-index: 1002;
+    user-select: none;
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    transform: translateZ(0);
+    border: var(--style-border);
+    animation: barrageIn .6s cubic-bezier(.42, 0, .3, 1.11)
 }
 
-.article-sort-item:hover::before {
-    border-color: #ff7242
+#cookies-window.cw-hide {
+    opacity: 0;
+    animation: barrageOut .6s cubic-bezier(.42, 0, .3, 1.11);
+    z-index: -1
 }
 
-.article-sort-item::before {
-    position: absolute;
-    left: calc(-1rem - 17px);
-    width: .3rem;
-    height: .3rem;
-    border: .15rem solid #307af6;
-    border-radius: .3rem;
-    background: var(--sco-card-bg);
-    content: "";
-    transition: all .2s ease-in-out 0s
+#cookies-window .cookies-window-title {
+    padding-bottom: 4px;
+    border-bottom: var(--style-border);
+    font-size: 12px;
+    font-weight: 700
 }
 
-.article-sort-item.no-article-cover {
-    height: 80px
+#cookies-window .cookies-window-content {
+    font-size: 14px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center
 }
 
-.article-sort-item.no-article-cover .article-sort-item-info {
-    padding: 0
+.cookie-to {
+    margin-right: 4px;
+    font-weight: 700
 }
 
-.article-sort-item.year {
-    font-size: 1.43em
+.cookies-link {
+    margin-left: auto;
+    font-size: 16px
 }
 
-.article-sort-item.year:hover::before {
-    border-color: #307af6
+.cookies-link i.scoicon {
+    font-size: 16px
 }
 
-.article-sort-item.year::before {
-    border-color: #ff7242
+@media screen and (max-width: 1300px) {
+    #cookies-window {
+        display: none
+    }
 }
 
-.article-sort-item-time {
-    color: #858585;
-    font-size: 95%
+.heo-tag {
+    padding: 1px 6px;
+    border-radius: 6px 6px 6px 0;
+    margin-left: 4px;
+    height: 20px;
+    line-height: 19px
 }
 
-.article-sort-item-time time {
-    padding-left: .3rem;
-    cursor: default
+.heo-tag-new-view {
+    color: var(--sco-white);
+    background: var(--sco-green)
 }
 
-.article-sort-item-title {
-    color: var(--sco-fontcolor);
-    font-size: 1.1em;
-    transition: all .3s ease 0s;
-    -webkit-line-clamp: 2
+.heo-tag-hot-view {
+    color: var(--sco-white);
+    background: var(--sco-red)
 }
 
-.article-sort-item-title:hover {
-    color: #307af6;
-    transform: translateX(10px)
-}
 
-.article-sort-item-img {
-    overflow: hidden;
-    width: 80px;
-    height: 80px
-}
 
-.article-sort-item-img img {
-    width: 100%;
-    height: 100%;
-    transition: all .6s ease 0s;
-    object-fit: cover
-}
 
-.article-sort-item-img img:hover {
-    transform: scale(1.1)
-}
 
-.article-sort-item-info {
-    -webkit-box-flex: 1;
-    flex: 1 1 0;
-    padding: 0 .8rem
+div#categoryList {
+    display: flex;
+    width: 100%;
+    justify-content: space-between
 }
 
-#page .category-lists {
-    padding: 1rem 0 1.5rem
+.categoryItem {
+    overflow: hidden;
+    transform: scale(1);
+    transition: all .8s cubic-bezier(.65, .15, .37, 1.19);
+    height: 48%;
+    border-radius: 12px
 }
 
-@media screen and (max-width: 768px) {
-    #page .category-lists {
-        padding: 0
-    }
+a.categoryButton {
+    height: 100%;
+    width: 100%;
+    background: var(--sco-card-bg);
+    border-radius: 12px;
+    display: inline-block;
+    text-align: left;
+    line-height: 4em;
+    font-weight: 700;
+    font-size: .9rem;
+    color: var(--sco-white);
+    transition: all .8s cubic-bezier(.39, .575, .565, 1);
+    transform: scale(1);
+    overflow: hidden;
+    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei
 }
 
-#page .category-lists .category-title {
-    font-size: 2.57em
+a.categoryButton i {
+    transform: scale(1) rotate(15deg)
 }
 
 @media screen and (max-width: 768px) {
-    #page .category-lists .category-title {
-        font-size: 2em
+    a.categoryButton {
+        border-radius: 8px
     }
-}
-
-#page .category-lists .category-list a {
-    color: var(--sco-fontcolor)
-}
-
-#page .category-lists .category-list a:hover {
-    color: #307af6
-}
-
-#page .category-lists .category-list .category-list-count {
-    margin-left: .4rem;
-    color: #858585
-}
-
-#page .category-lists .category-list .category-list-count::before {
-    content: "("
-}
-
-#page .category-lists .category-list .category-list-count::after {
-    content: ")"
-}
 
-#page .category-lists ul {
-    margin-top: .4rem;
-    padding: 0 0 0 1rem;
-    list-style: none;
-    counter-reset: li 0
+    .categoryItem {
+        border-radius: 0;
+        height: 47%;
+        box-shadow: none !important
+    }
 }
 
-#page .category-lists ul ul {
-    padding-left: .2rem
+a.categoryButton:after {
+    top: 50px;
+    width: 1rem;
+    left: 21px;
+    height: 2px;
+    background: var(--sco-white);
+    content: "";
+    border-radius: 1px;
+    position: absolute
 }
 
-#page .category-lists ul li {
-    position: relative;
-    margin: .3rem 0;
-    padding: .12em .4em .12em 1.4em
+.categoryButtonText {
+    padding-left: 21px
 }
 
-#page .category-lists ul li::before {
+a.categoryButton i {
+    font-size: 5rem;
+    opacity: .2;
     position: absolute;
-    left: 0;
-    cursor: pointer;
-    transition: all .3s ease-out 0s;
-    top: .7em;
-    width: .43em;
-    height: .43em;
-    border: .215em solid #307af6;
-    border-radius: .43em;
-    background: 0 0;
-    content: ""
+    right: 0;
+    top: 20%;
+    transition: .3s;
+    width: 100px;
+    text-align: center;
+    filter: blur(2px)
 }
 
-#page .category-lists ul li:hover::before {
-    border-color: #ff7242
+.topGroup {
+    display: flex
 }
 
-.layout {
-    display: flex;
-    margin: 0 auto;
-    padding: 2rem 15px;
-    max-width: 1200px
+#bannerGroup {
+    display: flex
 }
 
-@media screen and (max-width: 900px) {
-    .layout {
-        -webkit-box-orient: vertical;
-        flex-direction: column
-    }
+div#banners {
+    display: none
 }
 
-@media screen and (max-width: 768px) {
-    .layout {
-        padding: 1rem 5px
-    }
+.topGroup .todayCard {
+    display: none
 }
 
-@media screen and (min-width: 2000px) {
-    .layout {
-        max-width: 1500px
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .layout > div:first-child:not(.recent-posts) {
-        padding: 1.8rem .7rem !important
-    }
-}
-
-.layout > div:first-child {
-    width: 75%;
-    transition: all .3s ease 0s
-}
-
-@media screen and (max-width: 1200px) {
-    .layout > div:first-child {
-        width: 100% !important
-    }
-}
-
-.layout.hide-aside {
-    max-width: 1000px
-}
-
-@media screen and (min-width: 2000px) {
-    .layout.hide-aside {
-        max-width: 1300px
-    }
-}
-
-.layout.hide-aside > div {
-    width: 100% !important
-}
-
-
-
-@media screen and (max-width: 768px) {
-    #recent-posts > .recent-post-item {
-        border-radius: 12px 12px 8px 8px
+@media screen and (min-width: 1200px) {
+    .topGroup {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        height: calc(328px + .5rem);
+        align-content: space-between;
+        width: calc(600px + 1.5rem);
+        position: relative;
+        animation: slide-in .6s .1s backwards
     }
-}
-
-#recent-posts > .recent-post-item:hover {
-    box-shadow: var(--card-hover-box-shadow)
-}
-
-#recent-posts > .recent-post-item:hover img.post_bg {
-    transform: scale(1.1)
-}
-
-#recent-posts > .recent-post-item.ads-wrap {
-    display: block !important;
-    height: auto !important
-}
-
-#recent-posts > .recent-post-item .post_cover {
-    overflow: hidden;
-    width: 45%;
-    height: 100%;
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
-}
-
-#recent-posts > .recent-post-item .post_cover img.post_bg {
-    width: 100%;
-    height: 100%;
-    transition: all .6s ease 0s;
-    object-fit: cover
-}
-
-#recent-posts > .recent-post-item .post_cover img.post_bg:hover {
-    transform: scale(1.1)
-}
-
-#recent-posts > .recent-post-item > .recent-post-info.no-cover {
-    width: 100%
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-title {
-    margin-bottom: .3rem;
-    color: var(--text-highlight-color);
-    font-size: 1.4em;
-    line-height: 1.4;
-    transition: all .2s ease-in-out 0s;
-    -webkit-line-clamp: 2
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-title:hover {
-    color: #307af6
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
-    color: var(--sco-fontcolor);
-    font-size: .7rem
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .post-meta-date {
-    cursor: default
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .sticky {
-    color: #ff7242
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap i {
-    margin: 0 .2rem 0 0
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta-label {
-    padding-right: .2rem
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta__separator {
-    margin: 0 .3rem
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta__link {
-    margin: 0 .2rem
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .fa-angle-right {
-    margin: 0 .2rem
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap time {
-    display: block;
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .content {
-    margin-top: .3rem;
-    -webkit-line-clamp: 3
-}
 
-@media screen and (max-width: 768px) {
-    #recent-posts .recent-post-item {
-        -webkit-box-orient: vertical;
+    div#bannerGroup {
+        width: calc(100% - 600px - 2rem);
+        margin-right: .5rem;
+        height: calc(328px + .5rem);
+        display: flex;
         flex-direction: column;
-        height: auto !important
+        justify-content: space-between
     }
 
-    #recent-posts .recent-post-item .post_cover {
+    div#banners {
+        display: flex;
         width: 100%;
-        height: 230px;
-        border-radius: 5px 8px 0 0;
-        -webkit-box-ordinal-group: 1 !important;
-        order: 1 !important
+        height: 76%;
+        background: var(--sco-card-bg);
+        margin-bottom: .5rem;
+        border: var(--style-border);
+        border-radius: 12px;
+        overflow: hidden;
+        position: relative;
+        box-shadow: var(--sco-shadow-border);
+        flex-direction: column;
+        transition: .3s;
+        will-change: transform;
+        animation: slide-in .6s .1s backwards
     }
 
-    #recent-posts .recent-post-item .recent-post-info {
-        padding: 1rem 1rem 1.5rem;
-        width: 100%;
-        -webkit-box-ordinal-group: 2 !important;
-        order: 2 !important
+    div#banners:hover {
+        box-shadow: var(--sco-shadow-main)
     }
 
-    #recent-posts .recent-post-item .recent-post-info.no-cover {
-        padding: 1.5rem 1rem
+    #banners.flink {
+        margin-bottom: .5rem
     }
 
-    #recent-posts .recent-post-item .recent-post-info .article-title {
-        font-size: 1.43em
+    #banners .banner-button-group {
+        position: absolute;
+        right: 2rem;
+        top: 2rem;
+        display: flex
     }
 
-    #recent-posts .recent-post-item .recent-post-info .content {
-        height: auto
+    #banners .banner-button {
+        padding: 8px 12px;
+        background: var(--sco-fontcolor);
+        border-radius: 12px;
+        color: var(--sco-card-bg);
+        display: flex;
+        align-items: center;
+        z-index: 1;
+        transition: .3s;
+        cursor: pointer;
+        box-shadow: var(--sco-shadow-black)
     }
-}
-
-.tag-cloud-list a {
-    display: inline-block;
-    padding: 0 .4rem;
-    transition: all .3s ease 0s
-}
-
-.tag-cloud-list a:hover {
-    transform: scale(1.1);
-    color: #307af6 !important
-}
 
-@media screen and (max-width: 768px) {
-    .tag-cloud-list a {
-        zoom: .85
+    #banners .banner-button.secondary {
+        background: var(--sco-secondbg);
+        border: var(--style-border-always);
+        color: var(--sco-lighttext);
+        margin-right: 1rem;
+        box-shadow: var(--sco-shadow-border)
     }
-}
-
-.tag-cloud-title {
-    font-size: 2.57em
-}
 
-@media screen and (max-width: 768px) {
-    .tag-cloud-title {
-        font-size: 2em
+    #banners .banner-button:hover {
+        background: var(--sco-theme);
+        color: var(--sco-white)
     }
-}
-
-#error-wrap {
-    display: flex;
-    justify-content: center;
-    margin: 0 1rem;
-    width: 100%;
-    position: relative
-}
-
-#error-wrap .error-content {
-    display: flex;
-    -webkit-box-orient: horizontal;
-    flex-direction: row;
-    -webkit-box-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    align-items: center;
-    margin: 0 1rem;
-    height: 18rem;
-    max-width: 800px;
-    border-radius: 5px;
-    background: var(--sco-card-bg);
-    box-shadow: var(--card-box-shadow);
-    transition: all .3s ease 0s;
-    border: var(--style-border-always);
-    position: relative;
-    width: 100%
-}
-
-#error-wrap .error-content:hover {
-    box-shadow: var(--card-hover-box-shadow)
-}
 
-@media screen and (max-width: 768px) {
-    #error-wrap .error-content {
-        -webkit-box-orient: vertical;
-        flex-direction: column;
-        margin: 0;
-        height: 25rem;
-        width: 100%
+    #banners .banner-button i {
+        margin-right: 8px;
+        font-size: 1rem
     }
-}
-
-#error-wrap .error-content .error-img {
-    -webkit-box-flex: 1;
-    flex: 1 1 0;
-    height: 90%;
-    width: 600px;
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-    background-color: #307af6;
-    background-position: center center;
-    background-size: cover
-}
 
-@media screen and (max-width: 768px) {
-    #error-wrap .error-content .error-img {
-        -webkit-box-flex: 1;
-        flex: 1 1 0;
-        width: 100%;
-        border-radius: 12px
+    .banners-title {
+        top: 2rem;
+        left: 1.5rem;
+        position: absolute;
+        display: flex;
+        flex-direction: column
     }
-}
-
-#error-wrap .error-content .error-info {
-    -webkit-box-flex: 1;
-    flex: 1 1 0;
-    padding: .5rem;
-    text-align: center;
-    font-size: 14px;
-    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
-}
-
-#error-wrap .error-content .error-info .error_title {
-    font-size: 9em;
-    line-height: 1
-}
 
-@media screen and (max-width: 768px) {
-    #error-wrap .error-content .error-info {
-        -webkit-box-flex: 1.1;
-        flex: 1.1 1 0;
-        width: 100%;
-        padding-bottom: 2rem
+    .flink .banners-title {
+        top: 1.5rem
     }
 
-    #error-wrap .error-content .error-info .error_title {
-        font-size: 4rem
+    .banners-title-big {
+        font-size: 36px;
+        line-height: 1;
+        font-weight: 700;
+        margin-bottom: 8px
     }
-}
-
-#error-wrap .error-content .error-info .error_subtitle {
-    word-break: break-word;
-    font-size: 1.6em;
-    -webkit-line-clamp: 2
-}
-
-#error-wrap .error-content .error-info a {
-    display: inline-block;
-    margin-top: .5rem;
-    padding: .3rem 1.5rem;
-    background: var(--btn-bg);
-    color: var(--btn-color)
-}
-
-#error-wrap .error-content .error-info a i {
-    padding-right: .3rem
-}
 
-@media screen and (min-width: 900px) {
-    #aside-content {
-        padding-left: 15px
+    .banners-title-small {
+        font-size: 12px;
+        line-height: 1;
+        color: var(--sco-secondtext);
+        margin-top: 8px;
+        margin-bottom: .5rem
     }
-}
 
-@media screen and (max-width: 900px) {
-    #aside-content {
-        width: 100%
+    #banner-hover {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: var(--sco-theme);
+        color: var(--sco-white);
+        padding-left: .5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        opacity: 0;
+        transition: cubic-bezier(.71, .15, .16, 1.15) .6s
     }
-}
 
-@media screen and (max-width: 900px) {
-    #aside-content > .card-widget:first-child {
-        margin-top: 1rem
+    .bannerText {
+        font-size: 4rem;
+        line-height: 4rem;
+        font-weight: 700
     }
-}
 
-@media screen and (max-width: 768px) {
-    #aside-content .card-widget:not(#card-toc) {
-        display: none !important;
+    .banner-righticon {
+        font-size: 4rem;
+        opacity: .6
     }
-}
-
-#aside-content .card-info img.avatar-img {
-    width: 118px;
-    right: 0;
-    top: 0;
-    border-radius: 500px;
-    position: absolute;
-    opacity: 1;
-    transition: .3s;
 
-}
-
-.author-info__top-group {
-    display: flex;
-    height: 28px;
-    width: 100%
-}
-
-#aside-content .card-info .author-info__description {
-    margin-top: -.3rem
-}
-
-#aside-content .card-info .card-info-data {
-    display: table;
-    margin: .7rem 0 .2rem;
-    width: 100%;
-    table-layout: fixed
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item {
-    display: table-cell
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item:hover {
-    background: #000;
-    border-radius: 5px
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item a .headline {
-    color: var(--sco-fontcolor);
-    font-size: 1em
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item a .length-num {
-    margin-top: -.3rem;
-    color: var(--text-highlight-color);
-    font-size: 1.4em
-}
-
-#aside-content .card-info .card-info-social-icons {
-    margin: .3rem 0 -.3rem
-}
-
-#aside-content .card-info .card-info-social-icons .social-icon {
-    margin: 0 .5rem;
-    color: var(--sco-fontcolor);
-    font-size: 1.4em;
-    cursor: pointer;
-    display: flex
-}
-
-#aside-content .card-info .card-info-social-icons i {
-    transition: all .3s ease 0s;
-    padding: 8px;
-    border-radius: 32px
-}
-
-#aside-content .card-info .card-info-social-icons i:hover {
-    transform: rotate(540deg);
-    background-color: #000;
-    cursor: pointer
-}
-
-#aside-content .card-info #card-info-btn {
-    display: block;
-    margin-top: .7rem;
-    background-color: var(--btn-bg);
-    color: var(--btn-color);
-    text-align: center;
-    line-height: 2.4
-}
-
-#aside-content .card-info #card-info-btn span {
-    padding-left: .5rem
-}
-
-@media screen and (min-width: 900px) {
-    #aside-content .sticky_layout {
-        position: sticky;
-        top: 20px;
-        transition: top .3s ease 0s
-    }
-}
-
-/*自定义高亮标签*/
-
-#aside-content .card-tag-cloud a[href*="/tags/Kotlin/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E6%95%B0%E5%AD%A6/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E8%8B%B1%E8%AF%AD/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E8%AF%AD%E6%96%87/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E7%89%A9%E7%90%86/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E7%94%9F%E7%89%A9/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E5%9C%B0%E7%90%86/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a {
-    display: inline-block;
-    padding: 0 .3rem
-}
-
-#aside-content .card-tag-cloud a:hover {
-    background-color: #fff;
-    cursor: pointer;
-    border-radius: 5px;
-    transform: scale(1.1);
-    color: #307af6 !important
-}
-
-#aside-content .aside-list > span {
-    display: block;
-    margin-bottom: .5rem;
-    text-align: center
-}
-
-#aside-content .aside-list > .aside-list-item:last-child {
-    padding-bottom: 0
-}
-
-#aside-content .aside-list > .aside-list-item .thumbnail {
-    overflow: hidden;
-    width: 4.2em;
-    height: 4.2em
-}
-
-#aside-content .aside-list > .aside-list-item .thumbnail > img {
-    width: 100%;
-    height: 100%;
-    transition: all .6s ease 0s;
-    object-fit: cover
-}
-
-#aside-content .aside-list > .aside-list-item .thumbnail > img:hover {
-    transform: scale(1.1)
-}
-
-#aside-content .aside-list > .aside-list-item .content {
-    -webkit-box-flex: 1;
-    flex: 1 1 0;
-    padding-left: 10px;
-    word-break: break-all;
-    display: flex;
-    flex-direction: column
-}
-
-#aside-content .aside-list > .aside-list-item .content > .name {
-    -webkit-line-clamp: 1
-}
-
-#aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > time {
-    display: block;
-    color: #858585;
-    font-size: 85%
-}
-
-#aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .title {
-    color: var(--sco-fontcolor);
-    font-size: 95%;
-    line-height: 1.3;
-    -webkit-line-clamp: 2
-}
-
-#aside-content .aside-list > .aside-list-item .content > .comment:hover, #aside-content .aside-list > .aside-list-item .content > .title:hover {
-    color: #307af6
-}
-
-#aside-content .aside-list > .aside-list-item.no-cover {
-    min-height: 4.4em
-}
-
-#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
-    margin: 0;
-    padding: 0;
-    list-style: none
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
-    display: inline-block;
-    padding: .15rem .5rem;
-    width: 100%;
-    color: var(--sco-fontcolor);
-    transition: all .4s ease 0s;
-    border-radius: 5px
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
-    padding: .15rem .85rem;
-    background-color: #fff;
-    color: #427bee;
-    border-radius: 5px
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span {
-    display: inline-block;
-    vertical-align: bottom
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
-    width: 80%
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
-    width: 20%;
-    text-align: right
-}
-
-#aside-content .card-categories .card-category-list.child {
-    padding: 0 0 0 .8rem
-}
-
-#aside-content .card-categories .card-category-list > .parent > a .card-category-list-name {
-    width: 70% !important
-}
-
-#aside-content .card-categories .card-category-list > .parent > a .card-category-list-count {
-    width: calc(30% - 20px);
-    text-align: right
-}
-
-#aside-content .card-categories .card-category-list > .parent i {
-    float: right;
-    margin-right: -.35rem;
-    padding: .35rem;
-    transition: transform .3s ease 0s;
-    transform: rotate(0)
-}
-
-#aside-content .card-categories .card-category-list > .parent i.expand {
-    transform: rotate(-90deg)
-}
-
-#aside-content .card-webinfo .webinfo .webinfo-item {
-    display: flex;
-    -webkit-box-align: center;
-    align-items: center;
-    padding: .1rem .5rem 0
-}
-
-#aside-content .card-webinfo .webinfo .webinfo-item div:first-child {
-    -webkit-box-flex: 1;
-    flex: 1 1 0;
-    padding-right: 1rem
-}
-
-@media screen and (min-width: 901px) {
-    #aside-content #card-toc {
-        right: 0 !important
-    }
-}
-
-@media screen and (max-width: 900px) {
-    #aside-content #card-toc {
-        position: fixed;
-        right: -100%;
-        bottom: 30px;
-        z-index: 100;
-        max-height: calc(100% - 60px);
-        width: 300px;
-        opacity: 0;
-        transform-origin: right bottom
-    }
-}
-
-#aside-content #card-toc .toc-content {
-    overflow-y: auto;
-    max-height: calc(100vh - 300px)
-}
-
-@media screen and (max-width: 900px) {
-    #aside-content #card-toc .toc-content {
-        max-height: calc(100vh - 140px)
-    }
-}
-
-#aside-content #card-toc .toc-content .toc-child {
-    display: none
-}
-
-@media screen and (max-width: 900px) {
-    #aside-content #card-toc .toc-content .toc-child {
-        display: block !important
-    }
-}
-
-#aside-content #card-toc .toc-content .toc-item.active .toc-child {
-    display: block
-}
-
-#aside-content #card-toc .toc-content li, #aside-content #card-toc .toc-content ol {
-    list-style: none
-}
-
-#aside-content #card-toc .toc-content > ol {
-    padding: 0 !important
-}
-
-#aside-content #card-toc .toc-content ol {
-    margin: 0;
-    padding-left: .4rem
-}
-
-#aside-content #card-toc .toc-content .toc-link {
-    display: block;
-    padding-left: .3rem;
-    border-left: 3px solid transparent;
-    color: var(--toc-link-color);
-    transition: all .2s ease-in-out 0s
-}
-
-#aside-content #card-toc .toc-content .toc-link.active {
-    border-left-color: #0061cc;
-    background: #0079ff;
-    color: #fff
-}
-
-#aside-content #card-toc .toc-content::before {
-    position: absolute;
-    top: .6rem;
-    right: 1.2rem;
-    color: #a9a9a9;
-    content: attr(progress-percentage);
-    font-style: italic;
-    font-size: 1.2rem
-}
-
-#aside-content :only-child > .card-widget {
-    margin-top: 0
-}
-
-#aside-content .card-more-btn {
-    float: right;
-    color: inherit
-}
-
-#aside-content .card-more-btn:hover {
-    animation: 1s ease 0s infinite normal none running more-btn-move
-}
-
-@media screen and (min-width: 900px) {
-    html.hide-aside .layout {
-        -webkit-box-pack: center;
-        justify-content: center
-    }
-
-    html.hide-aside .layout > .aside-content {
-        display: none
-    }
-
-    html.hide-aside .layout > div:first-child {
-        width: 100%
-    }
-}
-
-.page .sticky_layout {
-    display: flex;
-    -webkit-box-orient: vertical;
-    flex-direction: column
-}
-
-#post-comment .comment-head .comment-headline {
-    display: inline-block;
-    vertical-align: middle;
-    font-weight: 700;
-    font-size: 20px
-}
-
-#post-comment .comment-head #comment-switch {
-    display: inline-block;
-    float: right;
-    margin: .1rem auto 0;
-    padding: .2rem .8rem;
-    width: max-content;
-    border-radius: 5px;
-    background: #f6f8fa
-}
-
-#post-comment .comment-head #comment-switch .first-comment {
-    color: #307af6
-}
-
-#post-comment .comment-head #comment-switch .second-comment {
-    color: #ff7242
-}
-
-#post-comment .comment-head #comment-switch .switch-btn {
-    position: relative;
-    display: inline-block;
-    margin: -4px .4rem 0;
-    width: 42px;
-    height: 22px;
-    border-radius: 34px;
-    background-color: #307af6;
-    vertical-align: middle;
-    cursor: pointer;
-    transition: all .4s ease 0s
-}
-
-#post-comment .comment-head #comment-switch .switch-btn::before {
-    position: absolute;
-    bottom: 4px;
-    left: 4px;
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background-color: #fff;
-    content: "";
-    transition: all .4s ease 0s
-}
-
-#post-comment .comment-head #comment-switch .switch-btn.move {
-    background-color: #ff7242
-}
-
-#post-comment .comment-head #comment-switch .switch-btn.move::before {
-    transform: translateX(20px)
-}
-
-#post-comment .comment-wrap > div:nth-child(2) {
-    display: none
-}
-
-#footer {
-    position: relative;
-    background: center bottom/cover local #307af6
-}
-
-#footer-wrap {
-    position: relative;
-    padding: 2rem 1rem;
-    color: var(--light-grey);
-    text-align: center
-}
-
-#footer-wrap a {
-    color: var(--light-grey);
-    padding: 4px 12px;
-    border-radius: 5px
-}
-
-#footer-wrap a:hover {
-    background-color: #fff;
-    color: #3b82ff;
-    cursor: pointer;
-    border-radius: 5px
-}
-
-#footer-wrap .footer-separator {
-    margin: 0 .2rem
-}
-
-#footer-wrap .icp-icon {
-    padding: 0 4px;
-    vertical-align: text-bottom;
-    max-height: 1.4em;
-    width: auto
-}
-
-#page h1.page-title {
-    margin: .4rem 0 1rem
-}
-
-#post > #post-info {
-    margin-bottom: 1.5rem
-}
-
-#post > #post-info .post-title {
-    padding-bottom: .2rem;
-    border-bottom: 1px solid var(--light-grey);
-    color: var(--text-highlight-color)
-}
-
-#post > #post-info .post-title .post-edit-link {
-    float: right
-}
-
-#post > #post-info #post-meta, #post > #post-info #post-meta a {
-    color: #78818a
-}
-
-#post-info .post-title {
-    margin-bottom: .4rem;
-    color: var(--sco-white);
-    font-weight: 400;
-    font-size: 2.5em;
-    line-height: 1.5;
-    -webkit-line-clamp: 3
-}
-
-@media screen and (max-width: 768px) {
-    #post-info .post-title {
-        font-size: 1.72em
-    }
-}
-
-#post-info .post-title .post-edit-link {
-    padding-left: .5rem
-}
-
-#post-info #post-meta {
-    color: var(--light-grey);
-    font-size: 95%
-}
-
-@media screen and (min-width: 768px) {
-    #post-info #post-meta > .meta-secondline > span:first-child {
-        display: none
-    }
-}
-
-@media screen and (max-width: 768px) {
-    #post-info #post-meta {
-        font-size: 90%
-    }
-}
-
-#post-info #post-meta .post-meta-separator {
-    margin: 0 .25rem
-}
-
-#post-info #post-meta .post-meta-icon {
-    margin-right: .2rem
-}
-
-#post-info #post-meta .post-meta-label {
-    margin-right: .2rem
-}
-
-#post-info #post-meta a {
-    color: var(--light-grey);
-    transition: all .3s ease-out 0s
-}
-
-#post-info #post-meta a:hover {
-    color: #307af6;
-    text-decoration: underline
-}
-
-.li-style {
-    width: 100%;
-    height: 25px;
-    text-align: center
-}
-
-li, ul {
-    list-style: none;
-    display: block;
-    margin: 0;
-    padding: 0
-}
-
-#pagination .pagination {
-    text-align: center
-}
-
-#pagination .page-number {
-    display: inline-block;
-    margin: 0 .2rem;
-    min-width: 1.2rem;
-    height: 1.2rem;
-    text-align: center;
-    line-height: 1.2rem;
-    cursor: pointer
-}
-
-#pagination .page-number.current {
-    background: #0079ff;
-    color: var(--sco-white);
-    cursor: default;
-    border-radius: 5px
-}
-
-#pagination img.next-cover, #pagination img.prev-cover {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    opacity: .4;
-    transition: all .6s ease 0s;
-    object-fit: cover
-}
-
-#pagination .pagination-info {
-    position: absolute;
-    top: 50%;
-    padding: 1rem 2rem;
-    width: 100%;
-    transform: translate(0, -50%)
-}
-
-#pagination .next_info, #pagination .prev_info {
-    color: var(--sco-white);
-    font-weight: 500
-}
-
-#pagination .next-post .pagination-info {
-    text-align: right
-}
-
-#pagination .pull-full {
-    width: 100% !important
-}
-
-#pagination .next-post .label, #pagination .prev-post .label {
-    color: var(--light-grey);
-    text-transform: uppercase;
-    font-size: 90%
-}
-
-#pagination .next-post, #pagination .prev-post {
-    width: 50%
-}
-
-@media screen and (max-width: 768px) {
-    #pagination .next-post, #pagination .prev-post {
-        width: 100%
-    }
-}
-
-#pagination .next-post a, #pagination .prev-post a {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    height: 150px
-}
-
-#pagination .next-post:hover img.next-cover, #pagination .next-post:hover img.prev-cover, #pagination .prev-post:hover img.next-cover, #pagination .prev-post:hover img.prev-cover {
-    opacity: .8;
-    transform: scale(1.1)
-}
-
-#pagination.pagination-post {
-    margin-top: 1.5rem;
-    background: #000
-}
-
-#article-container {
-    overflow-wrap: break-word
-}
-
-#article-container a {
-    color: #307af6
-}
-
-#article-container a:hover {
-    text-decoration: none;
-    background: var(--sco-main);
-    border: none;
-    color: var(--sco-white);
-    border-radius: 4px
-}
-
-#article-container img {
-    display: block;
-    margin: 0 auto .8rem;
-    max-width: 90%;
-    max-height: 450px
-}
-
-@media screen and (max-width: 768px) {
-    #article-container img {
-        max-width: 100%
-    }
-}
-
-#article-container p {
-    margin: 0 0 .8rem
-}
-
-#article-container iframe {
-    margin: 0 0 1rem
-}
-
-#article-container kbd {
-    margin: 0 3px;
-    padding: 3px 5px;
-    border: 1px solid #b4b4b4;
-    border-radius: 3px;
-    background-color: #f8f8f8;
-    box-shadow: rgba(0, 0, 0, .25) 0 1px 3px, rgba(255, 255, 255, .6) 0 2px 1px 0 inset;
-    color: #34495e;
-    white-space: nowrap;
-    font-weight: 600;
-    font-size: .9em;
-    font-family: Monaco, "Ubuntu Mono", monospace;
-    line-height: 1em
-}
-
-#article-container h1, #article-container h2, #article-container h3, #article-container h4, #article-container h5, #article-container h6 {
-    transition: all .2s ease-out 0s
-}
-
-#article-container h1::before, #article-container h2::before, #article-container h3::before, #article-container h4::before, #article-container h5::before, #article-container h6::before {
-    position: absolute;
-    top: calc(50% - .35rem);
-    color: #f2ba4b;
-    content: "";
-    line-height: 1;
-    transition: all .2s ease-out 0s
-}
-
-#article-container h1:hover::before, #article-container h2:hover::before, #article-container h3:hover::before, #article-container h4:hover::before, #article-container h5:hover::before, #article-container h6:hover::before {
-    color: #307af6
-}
-
-#article-container h1 {
-    padding-left: 1.4rem
-}
-
-#article-container h1 code {
-    font-size: 1rem
-}
-
-#article-container h1::before {
-    margin-left: -1.2rem;
-    font-size: 1rem
-}
-
-#article-container h1:hover {
-    padding-left: 1.6rem
-}
-
-#article-container h2 {
-    padding-left: 1.3rem
-}
-
-#article-container h2 code {
-    font-size: .9rem
-}
-
-#article-container h2::before {
-    margin-left: -1.1rem;
-    font-size: .9rem
-}
-
-#article-container h2:hover {
-    padding-left: 1.5rem
-}
-
-#article-container h3 {
-    padding-left: 1.2rem
-}
-
-#article-container h3 code {
-    font-size: .8rem
-}
-
-#article-container h3::before {
-    margin-left: -1rem;
-    font-size: .8rem
-}
-
-#article-container h3:hover {
-    padding-left: 1.4rem
-}
-
-#article-container h4 {
-    padding-left: 1.1rem
-}
-
-#article-container h4 code {
-    font-size: .7rem
-}
-
-#article-container h4::before {
-    margin-left: -.9rem;
-    font-size: .7rem
-}
-
-#article-container h4:hover {
-    padding-left: 1.3rem
-}
-
-#article-container h5 {
-    padding-left: 1rem
-}
-
-#article-container h5 code {
-    font-size: .6rem
-}
-
-#article-container h5::before {
-    margin-left: -.8rem;
-    font-size: .6rem
-}
-
-#article-container h5:hover {
-    padding-left: 1.2rem
-}
-
-#article-container h6 {
-    padding-left: 1rem
-}
-
-#article-container h6 code {
-    font-size: .6rem
-}
-
-#article-container h6::before {
-    margin-left: -.8rem;
-    font-size: .6rem
-}
-
-#article-container h6:hover {
-    padding-left: 1.2rem
-}
-
-#article-container ol, #article-container ul {
-    margin-top: .4rem;
-    padding: 0 0 0 .8rem;
-    list-style: none;
-    counter-reset: li 0
-}
-
-@media screen and (max-width: 768px) {
-    #article-container ol, #article-container ul {
-        padding: 0 0 0 .4rem
-    }
-}
-
-#article-container ol p, #article-container ul p {
-    margin: 0 0 .5rem
-}
-
-#article-container ol ol, #article-container ol ul, #article-container ul ol, #article-container ul ul {
-    padding-left: .6rem
-}
-
-@media screen and (max-width: 768px) {
-    #article-container ol ol, #article-container ol ul, #article-container ul ol, #article-container ul ul {
-        padding-left: .2rem
-    }
-}
-
-#article-container ol li:not(.tab), #article-container ul li:not(.tab) {
-    position: relative;
-    margin: .2rem 0
-}
-
-#article-container ol li:hover::before, #article-container ul li:hover::before {
-    transform: rotate(360deg)
-}
-
-#article-container ol li::before, #article-container ul li::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: #307af6;
-    color: #fff;
-    cursor: pointer;
-    transition: all .3s ease-out 0s
-}
-
-#article-container ol > li:not(.tab) {
-    padding: .2em .2em .2em 1.8em
-}
-
-#article-container ol > li::before {
-    margin-top: .65em;
-    width: 1.45em;
-    height: 1.45em;
-    border-radius: .725em;
-    content: counter(li);
-    counter-increment: li 1;
-    text-align: center;
-    font-size: .85em;
-    line-height: 1.45em
-}
-
-#article-container ul > li:not(.tab) {
-    padding: .2em .2em .2em 1.4em
-}
-
-#article-container ul > li:not(.tab):hover::before {
-    border-color: #ff7242
-}
-
-#article-container ul > li:not(.tab)::before {
-    top: .78em;
-    width: .42em;
-    height: .42em;
-    border: .21em solid #307af6;
-    border-radius: .42em;
-    background: 0 0;
-    content: "";
-    line-height: .42em
-}
-
-#article-container > :last-child {
-    margin-bottom: 0 !important
-}
-
-#post .tag_share .post-meta__tags span.tags-punctuation {
-    font-size: 12px;
-    margin-right: 1px;
-    display: flex;
-    align-items: center
-}
-
-.el-input-group--prepend .el-input__inner, .el-input-group__append {
-    border-left-width: 0 !important
-}
-
-#post .tag_share .post_share {
-    display: inline-block;
-    float: right;
-    margin: .4rem 0;
-    width: fit-content
-}
-
-#post .tag_share .post_share .social-share {
-    font-size: .85em
-}
-
-#post .tag_share .post_share .social-share .social-share-icon {
-    margin: 0 4px;
-    width: 1.85em;
-    height: 1.85em;
-    font-size: 1.2em;
-    line-height: 1.85em
-}
-
-#post .post-copyright::before {
-    position: absolute;
-    top: .1rem;
-    right: .6rem;
-    color: #307af6;
-    content: "";
-    font-size: 1rem
-}
-
-#post .post-copyright .post-copyright-meta {
-    color: #307af6;
-    font-weight: 700
-}
-
-#post .post-copyright .post-copyright-info {
-    padding-left: .3rem
-}
-
-#post .post-copyright .post-copyright-info a {
-    text-decoration: none;
-    word-break: break-word;
-    color: #3b82ff;
-    padding: 0 4px;
-    border-radius: 4px
-}
-
-#post .post-copyright .post-copyright-info a:hover {
-    text-decoration: none;
-    background-color: var(--sco-main);
-    color: var(--sco-white);
-    cursor: pointer;
-    border-radius: 4px
-}
-
-#post .post-outdate-notice {
-    position: relative;
-    margin: 0 0 1rem;
-    border-radius: 3px;
-    background-color: #ffe6e6;
-    color: #f66;
-    padding: .5em 1em .5em 2.6em;
-    border-left: 5px solid #ff8080
-}
-
-#post .post-outdate-notice::before {
-    position: absolute;
-    top: 50%;
-    left: .9em;
-    color: #ff8080;
-    content: "";
-    transform: translateY(-50%)
-}
-
-#post .ads-wrap {
-    margin: 2rem 0
-}
-
-.relatedPosts {
-    margin-top: 2rem;
-    -webkit-user-select: none
-}
-
-.relatedPosts > .relatedPosts-list > div {
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    margin: 3px;
-    width: calc(33.333% - 6px);
-    height: 200px;
-    background: var(--sco-main);
-    vertical-align: bottom
-}
-
-@media screen and (max-width: 768px) {
-    .relatedPosts > .relatedPosts-list > div {
-        margin: 2px;
-        width: calc(50% - 4px);
-        height: 150px
-    }
-}
-
-@media screen and (max-width: 600px) {
-    .relatedPosts > .relatedPosts-list > div {
-        width: calc(100% - 4px)
-    }
-}
-
-.relatedPosts > .relatedPosts-list .cover {
-    width: 360px;
-    min-width: 45%;
-    height: 100%;
-    transition: all .6s ease 0s;
-    object-fit: cover;
-    filter: brightness(.9);
-    max-width: 45%
-}
-
-.relatedPosts > .relatedPosts-list .content {
-    padding: 0 1rem;
-    width: 100%
-}
-
-.relatedPosts > .relatedPosts-list .content .date {
-    color: var(--light-grey);
-    font-size: 90%
-}
-
-.relatedPosts > .relatedPosts-list .content .title {
-    color: var(--sco-white);
-    -webkit-line-clamp: 2;
-    margin-right: auto
-}
-
-.relatedPosts-link {
-    display: block;
-    justify-content: space-between;
-    margin-left: 8px;
-    font-size: 13px
-}
-
-.post-reward {
-    position: relative;
-    margin-top: 4rem;
-    text-align: center
-}
-
-.post-reward:hover > .reward-main {
-    display: block
-}
-
-.post-reward .reward-main {
-    position: absolute;
-    bottom: 40px;
-    left: -96px;
-    z-index: 100;
-    display: none;
-    padding: 0 0 15px;
-    width: fit-content
-}
-
-.post-reward .reward-main .reward-all {
-    display: inline-block;
-    margin: 0;
-    padding: 1rem .5rem;
-    border-radius: 4px;
-    background: var(--sco-maskbgdeep)
-}
-
-.post-reward .reward-main .reward-all::before {
-    position: absolute;
-    bottom: -10px;
-    left: 0;
-    width: 100%;
-    height: 20px;
-    content: ""
-}
-
-.post-reward .reward-main .reward-all::after {
-    position: absolute;
-    right: 0;
-    bottom: 2px;
-    left: 0;
-    margin: 0 auto;
-    width: 0;
-    height: 0;
-    border-top: 13px solid var(--reward-pop);
-    border-right: 13px solid transparent;
-    border-left: 13px solid transparent;
-    content: ""
-}
-
-.post-reward .reward-main .reward-all .reward-item {
-    display: inline-block;
-    padding: 0 8px;
-    list-style-type: none;
-    vertical-align: top
-}
-
-.post-reward .reward-main .reward-all .reward-item img {
-    width: 130px;
-    height: 130px
-}
-
-.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
-    padding-top: .4rem;
-    width: 130px;
-    color: #858585
-}
-
-#rightside #rightside-config-hide {
-    transition: transform .4s ease 0s;
-    transform: translate(35px, 0)
-}
-
-#rightside #rightside-config-hide.show {
-    transform: translate(0, 0) !important
-}
-
-#rightside > div > a, #rightside > div > button {
-    display: block;
-    margin-bottom: 2px;
-    width: 30px;
-    height: 30px;
-    background-color: var(--btn-bg);
-    color: var(--btn-color);
-    text-align: center;
-    font-size: 16px
-}
-
-#rightside > div > a:hover, #rightside > div > button:hover {
-    background-color: var(--btn-hover-color)
-}
-
-#rightside #mobile-toc-button {
-    display: none
-}
-
-@media screen and (max-width: 900px) {
-    #rightside #mobile-toc-button {
-        display: block
-    }
-}
-
-@media screen and (max-width: 900px) {
-    #rightside #hide-aside-btn {
-        display: none
-    }
-}
-
-#sidebar #menu-mask {
-    position: fixed;
-    z-index: 1001;
-    display: none;
-    width: 100%;
-    height: 100%;
-    background: var(--sco-maskbg);
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0);
-    animation: .6s ease 0s 1 normal none running to_show
-}
-
-#sidebar #sidebar-menus {
-    position: fixed;
-    top: 0;
-    right: -300px;
-    overflow: hidden auto;
-    width: 300px;
-    height: 100%;
-    background: var(--sco-background);
-    transition: all .5s ease 0s;
-    padding-top: 30px;
-    z-index: 1001;
-    border-left: var(--style-border-always)
-}
-
-#sidebar #sidebar-menus.open {
-    transform: translate3d(-100%, 0, 0)
-}
-
-@media screen and (min-width: 768px) {
-    #sidebar #sidebar-menus {
-        display: none
-    }
-}
-
-#sidebar #sidebar-menus .back-menu-list-groups {
-    padding: 0 16px
-}
-
-#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list-title {
-    font-size: 12px;
-    color: var(--sco-secondtext)
-}
-
-#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list {
-    width: calc(100% + 16px);
-    justify-content: flex-start;
-    margin: 0 -8px
-}
-
-#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list .back-menu-item {
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    border-radius: 8px
-}
-
-@media screen and (max-width: 768px) {
-    #sidebar #sidebar-menus .back-menu-list-groups .back-menu-list .back-menu-item {
-        width: calc(50% - 16px)
-    }
-}
-
-#sidebar #sidebar-menus .back-home-button {
-    display: none
-}
-
-#sidebar #sidebar-menus > .author-avatar {
-    padding: 1.3rem 1.5rem 0;
-    text-align: center
-}
-
-#sidebar #sidebar-menus > .author-avatar img {
-    width: 110px;
-    height: 110px;
-    border-radius: 70px;
-    transition: all .5s ease 0s
-}
-
-#sidebar #sidebar-menus > .author-avatar img:hover {
-    transform: rotate(360deg)
-}
-
-#sidebar #sidebar-menus .site-data {
-    display: table;
-    padding: .6rem .5rem 0;
-    width: 100%;
-    table-layout: fixed
-}
-
-#sidebar #sidebar-menus .site-data .data-item {
-    display: table-cell
-}
-
-#sidebar #sidebar-menus .site-data .data-item .data-item-link .length-num {
-    color: var(--text-highlight-color);
-    font-size: 1.28em
-}
-
-#sidebar #sidebar-menus .site-data .data-item .data-item-link .headline {
-    color: var(--sco-fontcolor)
-}
-
-#sidebar #sidebar-menus hr {
-    margin: 1rem auto
-}
-
-#sidebar #sidebar-menus .menus_items {
-    padding: 0 16px
-}
-
-#sidebar #sidebar-menus .menus_items .site-page {
-    position: relative;
-    display: block;
-    padding: 0;
-    color: var(--sco-fontcolor);
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 700
-}
-
-@media screen and (max-width: 768px) {
-    #sidebar #sidebar-menus .menus_items .site-page {
-        font-weight: 400
-    }
-}
-
-#sidebar #sidebar-menus .menus_items .site-page span:hover {
-    color: #307af6
-}
-
-#sidebar #sidebar-menus .menus_item > .site-page {
-    display: flex;
-    font-size: 12px;
-    color: var(--sco-secondtext)
-}
-
-#sidebar #sidebar-menus .menus_items .expand {
-    position: absolute;
-    top: .78em;
-    right: .4rem;
-    transition: transform .3s ease 0s
-}
-
-#sidebar #sidebar-menus .menus_items .expand.hide {
-    transform: rotate(90deg) !important
-}
-
-#sidebar #sidebar-menus .menus_items .menus_item_child {
-    margin: 0 -4px;
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap
-}
-
-#sidebar #sidebar-menus .menus_item_child .site-page.child {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 8px;
-    border-radius: 8px;
-    border: var(--style-border-always);
-    background: var(--sco-card-bg)
-}
-
-#sidebar #sidebar-menus .menus_item_child li {
-    width: calc(50% - 8px);
-    margin: 4px
-}
-
-#sidebar #sidebar-menus .menus_item_child .site-page.child span {
-    line-height: 1;
-    margin-top: 8px;
-    font-size: 14px
-}
-
-#sidebar #sidebar-menus .card-tag-cloud {
-    padding: 0 16px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-bottom: 60px
-}
-
-#sidebar #sidebar-menus .card-tag-cloud a {
-    color: var(--sco-fontcolor) !important;
-    padding: 2px 8px 2px 12px;
-    margin: 4px;
-    border-radius: 8px;
-    border: var(--style-border-always);
-    background: var(--sco-card-bg);
-    font-size: 14px !important
-}
-
-#sidebar #sidebar-menus .card-tag-cloud a sup {
-    opacity: .6;
-    margin-left: 4px
-}
-
-#sidebar #sidebar-menus span.sidebar-menu-item-title {
-    font-size: 12px;
-    color: var(--sco-secondtext);
-    margin-left: 16px
-}
-
-#sidebar #sidebar-menus .sidebar-menu-item {
-    display: flex;
-    flex-direction: column;
-    padding: 0 16px;
-    margin-bottom: 6px
-}
-
-#sidebar #sidebar-menus .sidebar-menu-item a.menu-child {
-    width: 100%;
-    background: var(--sco-card-bg);
-    border-radius: 8px;
-    border: var(--style-border-always);
-    display: flex;
-    align-items: center;
-    font-size: 14px
-}
-
-#sidebar #sidebar-menus .sidebar-menu-item a.menu-child i {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center
-}
-
-#sidebar #sidebar-menus .sidebar-menu-item a.menu-child span {
-    margin-left: 10px
-}
-
-#sidebar #sidebar-menus .webinfo {
-    padding: 0 16px;
-    display: flex;
-    white-space: nowrap;
-    flex-direction: column
-}
-
-#sidebar #sidebar-menus .webinfo .webinfo-item {
-    justify-content: space-between
-}
-
-#vcomment, #waline {
-    font-size: 1.1em
-}
-
-#vcomment .vbtn, #waline .vbtn {
-    border: none;
-    background: var(--btn-bg);
-    color: var(--btn-color)
-}
-
-#vcomment .vbtn:hover, #waline .vbtn:hover {
-    background: var(--btn-hover-color)
-}
-
-#vcomment .vimg, #waline .vimg {
-    transition: all .3s ease 0s
-}
-
-#vcomment .vimg:hover, #waline .vimg:hover {
-    transform: rotate(360deg)
-}
-
-#vcomment .vcards .vcard .vcontent.expand::after, #vcomment .vcards .vcard .vcontent.expand::before, #waline .vcards .vcard .vcontent.expand::after, #waline .vcards .vcard .vcontent.expand::before {
-    z-index: 22
-}
-
-.fireworks {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 9999;
-    pointer-events: none
-}
-
-.medium-zoom-image--opened {
-    z-index: 99999 !important;
-    margin: 0 !important
-}
-
-.medium-zoom-overlay {
-    z-index: 99999 !important
-}
-
-.mermaid {
-    overflow: auto;
-    margin: 0 0 1rem;
-    background: #fff;
-    text-align: center;
-    opacity: 0;
-    transition: all .3s ease 0s
-}
-
-.mermaid[data-processed] {
-    opacity: 1;
-    filter: none
-}
-
-.fb-comments iframe, .utterances {
-    width: 100% !important
-}
-
-#gitalk-container .gt-meta {
-    margin: 0 0 .8em;
-    padding: .3rem 0 .8em
-}
-
-.katex-wrap {
-    overflow: auto
-}
-
-.katex-wrap::-webkit-scrollbar {
-    display: none
-}
-
-.mathjax-overflow {
-    overflow: auto hidden
-}
-
-mjx-container[jax=CHTML][display=true] {
-    overflow: auto hidden;
-    padding-bottom: .3rem
-}
-
-#article-container .aplayer {
-    margin: 0 0 1rem
-}
-
-#article-container .aplayer ol, #article-container .aplayer ul {
-    margin: 0;
-    padding: 0
-}
-
-#article-container .aplayer ol li, #article-container .aplayer ul li {
-    margin: 0;
-    padding: 0 15px
-}
-
-#article-container .aplayer ol li::before, #article-container .aplayer ul li::before {
-    content: none
-}
-
-#article-container .btn-center {
-    margin: 0 0 1rem;
-    text-align: center
-}
-
-#article-container .btn-beautify {
-    display: inline-block;
-    margin: 0 .2rem .3rem;
-    padding: 0 1rem;
-    background-color: #777;
-    color: #fff;
-    line-height: 2
-}
-
-#article-container .btn-beautify i + span {
-    margin-left: .3rem
-}
-
-#article-container .btn-beautify:not(.block) + .btn-beautify:not(.block) {
-    margin: 0 .2rem 1rem
-}
-
-#article-container .btn-beautify.block {
-    display: block;
-    margin: 0 0 1rem;
-    width: fit-content
-}
-
-#article-container .btn-beautify.block.center {
-    margin: 0 auto 1rem
-}
-
-#article-container .btn-beautify.block.right {
-    margin: 0 0 1rem auto
-}
-
-#article-container .btn-beautify.larger {
-    padding: .3rem 1.3rem
-}
-
-#article-container .btn-beautify:hover {
-    text-decoration: none
-}
-
-#article-container .btn-beautify.blue {
-    background-color: #428bca
-}
-
-#article-container .btn-beautify.pink {
-    background-color: #ff69b4
-}
-
-#article-container .btn-beautify.red {
-    background-color: red
-}
-
-#article-container .btn-beautify.purple {
-    background-color: #6f42c1
-}
-
-#article-container .btn-beautify.orange {
-    background-color: #ff8c00
-}
-
-#article-container .btn-beautify.green {
-    background-color: #5cb85c
-}
-
-#article-container .btn-beautify.outline {
-    border: 1px solid #777;
-    background-color: transparent;
-    color: #777;
-    transition: all .3s ease 0s
-}
-
-#article-container .btn-beautify.outline.button--animated::before {
-    background: #777
-}
-
-#article-container .btn-beautify.outline:hover {
-    color: #fff !important
-}
-
-#article-container .btn-beautify.outline.blue {
-    border-color: #428bca;
-    color: #428bca
-}
-
-#article-container .btn-beautify.outline.blue.button--animated::before {
-    background: #428bca
-}
-
-#article-container .btn-beautify.outline.pink {
-    border-color: #ff69b4;
-    color: #ff69b4
-}
-
-#article-container .btn-beautify.outline.pink.button--animated::before {
-    background: #ff69b4
-}
-
-#article-container .btn-beautify.outline.red {
-    border-color: red;
-    color: red
-}
-
-#article-container .btn-beautify.outline.red.button--animated::before {
-    background: red
-}
-
-#article-container .btn-beautify.outline.purple {
-    border-color: #6f42c1;
-    color: #6f42c1
-}
-
-#article-container .btn-beautify.outline.purple.button--animated::before {
-    background: #6f42c1
-}
-
-#article-container .btn-beautify.outline.orange {
-    border-color: #ff8c00;
-    color: #ff8c00
-}
-
-#article-container .btn-beautify.outline.orange.button--animated::before {
-    background: #ff8c00
-}
-
-#article-container .btn-beautify.outline.green {
-    border-color: #5cb85c;
-    color: #5cb85c
-}
-
-#article-container .btn-beautify.outline.green.button--animated::before {
-    background: #5cb85c
-}
-
-figure.gallery-group {
-    position: relative;
-    float: left;
-    overflow: hidden;
-    margin: .3rem .2rem;
-    width: calc(50% - .4rem);
-    height: 250px;
-    border-radius: 5px;
-    background: #000;
-    transform: translate3d(0, 0, 0)
-}
-
-@media screen and (max-width: 600px) {
-    figure.gallery-group {
-        width: calc(100% - .4rem)
-    }
-}
-
-figure.gallery-group:hover img {
-    opacity: .4;
-    transform: translate3d(0, 0, 0)
-}
-
-figure.gallery-group:hover .gallery-group-name::after {
-    transform: translate3d(0, 0, 0)
-}
-
-figure.gallery-group:hover p {
-    opacity: 1;
-    filter: none;
-    transform: translate3d(0, 0, 0)
-}
-
-figure.gallery-group img {
-    position: relative;
-    max-width: none;
-    width: calc(100% + 20px);
-    height: 250px;
-    backface-visibility: hidden;
-    opacity: .8;
-    transition: opacity .35s ease 0s, transform .35s ease 0s;
-    transform: translate3d(-10px, 0, 0);
-    object-fit: cover;
-    margin: 0 !important
-}
-
-figure.gallery-group figcaption {
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 1.5rem;
-    width: 100%;
-    height: 100%;
-    color: #fff;
-    text-transform: uppercase;
-    backface-visibility: hidden
-}
-
-figure.gallery-group figcaption > a {
-    position: absolute;
-    inset: 0;
-    z-index: 1000;
-    opacity: 0
-}
-
-figure.gallery-group p {
-    margin: 0;
-    padding: .4rem 0 0;
-    letter-spacing: 1px;
-    font-size: 1.1em;
-    line-height: 1.5;
-    opacity: 0;
-    transition: opacity .35s ease 0s, transform .35s ease 0s;
-    transform: translate3d(100%, 0, 0);
-    -webkit-line-clamp: 4
-}
-
-figure.gallery-group .gallery-group-name {
-    position: relative;
-    margin: 0;
-    padding: .4rem 0;
-    font-weight: 700;
-    font-size: 1.65em;
-    line-height: 1.5;
-    -webkit-line-clamp: 2
-}
-
-figure.gallery-group .gallery-group-name::after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: #fff;
-    content: "";
-    transition: transform .35s ease 0s;
-    transform: translate3d(-100%, 0, 0)
-}
-
-.gallery-group-main {
-    overflow: auto;
-    padding: 0 0 .8rem
-}
-
-.justified-gallery {
-    margin: 0 0 .8rem
-}
-
-.justified-gallery img {
-    opacity: 0
-}
-
-.justified-gallery .img-alt {
-    display: none
-}
-
-.justified-gallery .fancybox {
-    width: auto;
-    text-align: inherit
-}
-
-blockquote.pullquote {
-    position: relative;
-    max-width: 45%;
-    font-size: 110%
-}
-
-blockquote.pullquote.left {
-    float: left;
-    margin: 1em .5em 0 0
-}
-
-blockquote.pullquote.right {
-    float: right;
-    margin: 1em 0 0 .5rem
-}
-
-.video-container {
-    position: relative;
-    overflow: hidden;
-    margin-bottom: .8rem;
-    padding-top: 56.25%;
-    height: 0
-}
-
-.video-container iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin-top: 0;
-    width: 100%;
-    height: 100%
-}
-
-
-#article-container .inline-img {
-    display: inline;
-    margin: 0 3px;
-    height: 1.1em;
-    vertical-align: text-bottom
-}
-
-.hl-label {
-    padding: 2px 4px;
-    border-radius: 3px;
-    color: #fff
-}
-
-.hl-label.default {
-    background-color: #777
-}
-
-.hl-label.blue {
-    background-color: #428bca
-}
-
-.hl-label.pink {
-    background-color: #ff69b4
-}
-
-.hl-label.red {
-    background-color: red
-}
-
-.hl-label.purple {
-    background-color: #6f42c1
-}
-
-.hl-label.orange {
-    background-color: #ff8c00
-}
-
-.hl-label.green {
-    background-color: #5cb85c
-}
-
-.search-dialog {
-    position: fixed;
-    top: 5rem;
-    left: 50%;
-    z-index: 1001;
-    display: none;
-    margin-left: -15rem;
-    padding: 1rem;
-    width: 30rem;
-    background: var(--search-bg);
-    border-radius: 5px
-}
-
-@media screen and (max-width: 768px) {
-    .search-dialog {
-        top: 0;
-        left: 0;
-        margin: 0;
-        width: 100%;
-        height: 100%
-    }
-}
-
-.search-dialog hr {
-    margin: 1rem auto
-}
-
-.search-dialog span.search-close-button {
-    position: absolute;
-    top: .8rem;
-    right: 1rem;
-    color: #858585;
-    font-size: 1.4em;
-    line-height: 1;
-    cursor: pointer;
-    transition: color .2s ease-in-out 0s
-}
-
-.search-dialog span.search-close-button:hover {
-    color: #307af6
-}
-
-.search-dialog__title {
-    padding: 0 0 .7rem;
-    color: #307af6;
-    font-size: 1.4em;
-    line-height: 1
-}
-
-#search-mask {
-    position: fixed;
-    inset: 0;
-    z-index: 1000;
-    display: none;
-    background: rgba(0, 0, 0, .6)
-}
-
-#algolia-search .search-dialog {
-    animation: slide-in .6s ease 0s 1 normal none running
-}
-
-#algolia-search .search-dialog .ais-search-box {
-    margin: 0 auto;
-    max-width: 100%;
-    width: 100%
-}
-
-#algolia-search .search-dialog .ais-search-box input {
-    padding: .25rem .7rem;
-    outline: 0;
-    border: 2px solid #307af6;
-    border-radius: 2rem;
-    background: var(--sco-secondbg);
-    color: var(--search-input-color)
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item {
-    position: relative;
-    padding-left: 1.2rem
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item:hover::before {
-    border-color: #ff7242
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item::before {
-    position: absolute;
-    top: .53em;
-    left: 0;
-    width: .5em;
-    height: .5em;
-    border: .15rem solid #307af6;
-    border-radius: .5em;
-    background: 0 0;
-    content: "";
-    line-height: .5em;
-    transition: all .2s ease-in-out 0s
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a {
-    display: block;
-    color: var(--search-result-title);
-    cursor: pointer
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a:hover {
-    color: #307af6
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item em {
-    color: #f47466;
-    font-weight: 700
-}
-
-#algolia-search .search-dialog .ais-pagination.pagination {
-    margin: .8rem 0 0;
-    padding: 0;
-    text-align: center
-}
-
-#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item {
-    margin: 0 .2rem;
-    padding: 0
-}
-
-#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item a {
-    display: inline-block;
-    min-width: 1.2rem;
-    height: 1.2rem;
-    text-align: center;
-    line-height: 1.2rem
-}
-
-#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item.current a {
-    background: #0079ff;
-    color: #eee;
-    cursor: default
-}
-
-#algolia-search .search-dialog .algolia-logo {
-    padding-top: 2px;
-    width: 4rem;
-    height: 1.5rem
-}
-
-#page {
-    min-height: calc(100vh - 464px)
-}
-
-::-webkit-scrollbar {
-    width: 6px;
-    height: 6px
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--sco-scrollbar);
-    border-radius: 8px;
-    cursor: pointer
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--sco-main);
-    opacity: 1;
-    display: block !important
-}
-
-::-webkit-scrollbar-track {
-    background-color: var(--sco-none)
-}
-
-html {
-    overflow-y: overlay
-}
-
-.layout.hide-aside {
-    max-width: 1400px
-}
-
-[data-theme=dark] img {
-    filter: brightness(1)
-}
-
-#sidebar #sidebar-menus .menus_items .site-page span:hover {
-    color: var(--sco-fontcolor)
-}
-
-.site-page i.fa-chevron-down {
-    display: none
-}
-
-.fa, .fa-brands, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fat {
-    line-height: 1
-}
-
-hr {
-    display: none
-}
-
-#footer-wrap {
-    color: var(--sco-fontcolor)
-}
-
-#footer-wrap a {
-    color: var(--sco-fontcolor);
-    height: 44px;
-    line-height: 36px
-}
-
-#footer-wrap a:hover {
-    color: var(--sco-hovertext);
-    background-color: var(--sco-none)
-}
-
-div#footer_deal {
-    justify-content: center;
-    display: flex;
-    padding-top: 2rem;
-    align-items: center
-}
-
-#card-poem {
-    display: flex;
-    flex-direction: column;
-    padding: .5rem !important;
-    min-height: 130px
-}
-
-div#poem_sentence {
-    text-align: center;
-    font-family: serif, cursive;
-    line-height: 1.4;
-    margin-bottom: .5rem;
-    padding: 1rem;
-    border-radius: 12px;
-    background: var(--sco-secondbg);
-    min-height: 62px
-}
-
-div#poem_info {
-    display: flex;
-    color: var(--sco-secondtext);
-    font-size: .5rem;
-    justify-content: center;
-    flex-wrap: wrap
-}
-
-div#poem_author {
-    order: 1;
-    padding: 2px;
-    margin-left: 8px
-}
-
-div#poem_dynasty {
-    order: 0;
-    padding: 2px 4px 2px 6px;
-    background: var(--sco-card-btn-bg);
-    color: var(--sco-fontcolor);
-    border-radius: 8px
-}
-
-@media screen and (max-width: 768px) {
-    img.footer_mini_logo {
-        display: none
-    }
-
-    div#footer_deal {
-        flex-wrap: wrap;
-        flex-direction: row
-    }
-}
-
-a.deal_link {
-    display: flex;
-    margin: 1rem 27px;
-    color: var(--sco-card-bg);
-    border-radius: 3rem;
-    width: 32px;
-    height: 32px;
-    background: var(--sco-fontcolor);
-    justify-content: center;
-    align-items: center;
-    transition: .3s
-}
-
-a.deal_link:hover {
-    color: var(--sco-white);
-    background: var(--sco-main);
-    transform: scale(1.1);
-}
-
-img.footer_mini_logo {
-    width: 50px;
-    height: 50px;
-    margin: 0 1rem;
-    cursor: pointer;
-    transition: cubic-bezier(0, 0, 0, 1.29) .5s;
-    -webkit-user-select: none;
-    border-radius: 50px
-}
-
-img.footer_mini_logo:hover {
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d;
-    transform: scale(1.2)
-}
-
-#rightMenu {
-    display: none;
-    position: fixed;
-    padding: 0 .25rem;
-    width: 9rem;
-    height: fit-content;
-    top: 10%;
-    left: 10%;
-    background-color: var(--sco-maskbgdeep);
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-    transform: translateZ(0);
-    color: var(--sco-fontcolor);
-    border-radius: 12px;
-    z-index: 99994;
-    border: var(--style-border);
-    user-select: none;
-    box-shadow: var(--sco-shadow-black);
-    transition: border .3s
-}
-
-#rightMenu:hover {
-    border: var(--style-border-hover);
-    box-shadow: var(--sco-shadow-theme)
-}
-
-#rightMenu .rightMenu-group {
-    padding: .35rem .3rem;
-    transition: .3s
-}
-
-#rightMenu .rightMenu-line {
-    border-top: 1px dashed var(--sco-theme-op)
-}
-
-#rightMenu .rightMenu-group.rightMenu-small {
-    display: flex;
-    justify-content: space-between
-}
-
-#rightMenu .rightMenu-group .rightMenu-item {
-    border-radius: 8px;
-    transition: .3s;
-    cursor: pointer
-}
-
-#rightMenu .rightMenu-line .rightMenu-item {
-    margin: .25rem 0;
-    padding: .25rem 0
-}
-
-#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
-    display: flex
-}
-
-#rightMenu .rightMenu-group .rightMenu-item:hover {
-    background-color: var(--sco-main);
-    color: var(--sco-white);
-    box-shadow: var(--sco-shadow-main)
-}
-
-#rightMenu .rightMenu-group .rightMenu-item i {
-    display: inline-block;
-    text-align: center;
-    line-height: 1.5rem;
-    width: 1.5rem;
-    padding: 0 .25rem
-}
-
-#rightMenu .rightMenu-line .rightMenu-item i {
-    margin: 0 .25rem
-}
-
-#rightMenu .rightMenu-group .rightMenu-item span {
-    line-height: 1.5rem
-}
-
-.rightMenu-small .rightMenu-item {
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center
-}
-
-#rightmenu-mask {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    background: 0 0;
-    top: 0;
-    left: 0;
-    display: none;
-    margin: 0 !important;
-    z-index: 99993
-}
-
-
-#footer {
-    background: linear-gradient(180deg, var(--sco-card-bg-none) 0, var(--sco-card-bg) 25%);
-    margin-top: .5rem;
-    display: flex;
-    flex-direction: column
-}
-
-@media screen and (max-width: 768px) {
-    #footer {
-        background: linear-gradient(180deg, var(--sco-background) 0, var(--sco-card-bg) 25%);
-        margin-top: 0;
-        z-index: 999
-    }
-}
-
-#algolia-search .ais-hits--item.algolia-hit-item a {
-    color: var(--sco-fontcolor)
-}
-
-.aplayer .aplayer-list ol {
-    backdrop-filter: blur(1px);
-    -webkit-backdrop-filter: blur(1px);
-    transform: translateZ(0)
-}
-
-.aplayer .aplayer-lrc:after {
-    display: none !important
-}
-
-.aplayer.aplayer-withlrc.aplayer-withlist {
-    border-radius: 12px
-}
-
-#article-container .aplayer {
-    border-radius: 12px;
-    min-height: 90px;
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    box-shadow: var(--sco-shadow-border)
-}
-
-#article-container.flink {
-    margin-top: 1rem
-}
-
-#article-container.flink h2 {
-    margin-top: .5rem;
-    margin-bottom: 0
-}
-
-#algolia-hits .tag-list {
-    padding: 4px 8px;
-    border-radius: 8px;
-    margin-right: .5rem;
-    margin-top: .5rem;
-    border: var(--style-border-always);
-    cursor: pointer
-}
-
-#algolia-hits .tag-list:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-#mobile-sidebar #mobile-sidebar-menus.open {
-    background: var(--sco-maskbg)
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item {
-    transition: .3s
-}
-
-#sidebar #sidebar-menus .site-data {
-    margin: 1rem 0;
-    padding: .6rem .5rem
-}
-
-#sidebar-menus > hr {
-    display: none
-}
-
-#card-info-btn {
-    border-radius: 25px;
-    overflow: hidden
-}
-
-#card-info-btn:before {
-    border-radius: 25px
-}
-
-#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a {
-    color: var(--sco-fontcolor);
-    width: auto;
-    max-width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden
-}
-
-.not-index-bg {
-    height: 2rem !important;
-    background-image: none !important;
-    background-color: var(--sco-none) !important
-}
-
-.not-index-bg img {
-    display: none
-}
-
-.not-index-bg #page-site-info {
-    display: none
-}
-
-.pace {
-    -webkit-pointer-events: none;
-    pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    z-index: 2000;
-    position: fixed;
-    margin: auto;
-    top: 4px;
-    left: 0;
-    right: 0;
-    height: 8px;
-    border-radius: 8px;
-    width: 4rem;
-    background: var(--sco-secondbg);
-    border: var(--style-border);
-    overflow: hidden
-}
-
-.pace-inactive .pace-progress {
-    opacity: 0;
-    transition: .3s ease-in
-}
-
-.pace .pace-progress {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    -o-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    -o-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    max-width: 200px;
-    z-index: 2000;
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 100%;
-    height: 100%;
-    width: 100%;
-    background: var(--sco-logo-color);
-    animation: gradient 2s ease infinite;
-    background-size: 200%
-}
-
-.pace.pace-inactive {
-    opacity: 0;
-    transition: .3s;
-    top: -8px
-}
-
-@media screen and (max-width: 1300px) {
-    #aside-content .sticky_layout {
-        top: 60px
-    }
-}
-
-#aside-content .sticky_layout {
-    top: 80px;
-    transition: top 0s
-}
-
-#aside-content .card-widget:hover {
-    box-shadow: var(--sco-shadow-border)
-}
-
-#aside-content #card-funds {
-    margin-bottom: 1rem;
-    min-height: 260px
-}
-
-#page-header.nav-visible + .layout > .aside-content > .sticky_layout {
-    top: 80px
-}
-
-#aside-content {
-    width: 300px
-}
-
-@media screen and (max-width: 1300px) {
-    #aside-content {
-        width: 300px
-    }
-}
-
-@media screen and (max-width: 1200px) {
-    #aside-content {
-        display: none
-    }
-}
-
-.card-widget.card-recent-post {
-    padding: .4rem .6rem !important
-}
-
-#aside-content .aside-list > .aside-list-item .content > time {
-    display: none
-}
-
-#aside-content .aside-list > .aside-list-item .content > .title {
-    font-weight: 700;
-    padding: 2px 0
-}
-
-.article-recent_post_categories {
-    font-size: 12px;
-    font-weight: 700;
-    opacity: .6;
-    line-height: 1
-}
-
-#aside-content .aside-list > .aside-list-item {
-    padding: 6px !important;
-    border-radius: 12px;
-    transition: .3s;
-    margin: 4px 0;
-    cursor: pointer;
-    display: flex;
-    -webkit-box-align: center;
-    align-items: center
-}
-
-#aside-content .aside-list > .aside-list-item:hover .thumbnail > img {
-    transform: scale(1)
-}
-
-#aside-content .aside-list > .aside-list-item:not(:last-child) {
-    border-bottom: 0 dashed var(--sco-background) !important
-}
-
-#aside-content .aside-list > .aside-list-item .thumbnail {
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000);
-    border-radius: 8px;
-    border: var(--style-border)
-}
-
-#aside-content .aside-list > .aside-list-item:hover {
-    background: var(--sco-main);
-    color: var(--sco-white);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-main)
-}
-
-#aside-content .aside-list > .aside-list-item:hover a {
-    color: var(--sco-white) !important
-}
-
-.main-hero-waves-area {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    bottom: -11px;
-    z-index: 5
-}
-
-.waves-area .waves-svg {
-    width: 100%;
-    height: 60px
-}
-
-.parallax > use {
-    animation: move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
-}
-
-.parallax > use:nth-child(1) {
-    animation-delay: -2s;
-    animation-duration: 7s;
-    fill: var(--sco-background);
-    opacity: .5
-}
-
-.parallax > use:nth-child(2) {
-    animation-delay: -3s;
-    animation-duration: 10s;
-    fill: var(--sco-background);
-    opacity: .6
-}
-
-.parallax > use:nth-child(3) {
-    animation-delay: -4s;
-    animation-duration: 13s;
-    fill: var(--sco-background);
-    opacity: .7
-}
-
-.parallax > use:nth-child(4) {
-    animation-delay: -5s;
-    animation-duration: 20s;
-    fill: var(--sco-background)
-}
-
-@media (max-width: 768px) {
-    .main-hero-waves-area {
-        display: none
-    }
-}
-
-a.card-archive-list-link-more {
-    color: var(--sco-white) !important;
-    background: var(--sco-card-btn-bg);
-    margin-top: 8px
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
-    border-radius: 8px;
-    margin: 4px 0;
-    display: flex;
-    flex-direction: column;
-    align-content: space-between;
-    border: var(--style-border)
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
-    width: auto
-}
-
-#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    flex-wrap: wrap
-}
-
-.card-allinfo hr {
-    display: flex;
-    position: relative;
-    margin: 1rem 0;
-    border: 1px dashed var(--sco-theme-op)
-}
-
-.card-allinfo .item-headline {
-    display: none
-}
-
-span.card-archive-list-count {
-    width: auto;
-    text-align: left;
-    font-size: 1.1rem;
-    line-height: .9;
-    font-weight: 700
-}
-
-.card-archive-list-count-group {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
-    width: fit-content;
-    margin-left: 4px
-}
-
-.card-archive-list-count-unit {
-    width: auto;
-    text-align: left;
-    font-size: 14px;
-    font-weight: 700
-}
-
-.card-archive-list-date {
-    font-size: 14px;
-    opacity: .6
-}
-
-li.card-archive-list-item {
-    width: 100%;
-    flex: 0 0 48%
-}
-
-.card-category-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between
-}
-
-.card-category-list-item {
-    width: 45%
-}
-
-.card-category-list-count {
-    display: none !important
-}
-
-.card-category-list-name {
-    width: 100% !important;
-    text-align: center
-}
-
-.webinfo-item {
-    display: flex;
-    white-space: nowrap
-}
-
-.webinfo-item-title {
-    display: flex
-}
-
-.webinfo-item-title i {
-    line-height: 2;
-    margin-right: 6px;
-    width: 16px;
-    text-align: center;
-    font-size: 16px
-}
-
-@media screen and (min-width: 1300px) {
-    #aside-content {
-        padding-left: 1rem;
-        animation: slide-in .6s .3s backwards
-    }
-
-    #aside-content .sticky_layout {
-        top: calc(60px + 1rem)
-    }
-
-    #page-header.nav-visible + .layout > .aside-content > .sticky_layout {
-        top: calc(60px + 1rem)
-    }
-
-    [data-theme=dark] #aside-content > .card-widget.card-info {
-        border: var(--style-border)
-    }
-
-    .coverdiv {
-        height: 130%
-    }
-}
-
-.medium-zoom-overlay {
-    background: var(--sco-maskbg) !important;
-    z-index: 99998 !important;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
-}
-
-.medium-zoom-image--opened {
-    border-radius: 2px
-}
-
-#toggle-sidebar {
-    bottom: 80px
-}
-
-.button--animated {
-    border-radius: 8px !important;
-    transition: .3s
-}
-
-#error-wrap .error-content .error-info a:hover {
-    background-color: var(--sco-blue);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-blue)
-}
-
-.button--animated:before {
-    display: none
-}
-
-a.tree-list-post-link {
-    font-size: .8rem;
-    line-height: 1.2 !important
-}
-
-li.tree-list-item {
-    line-height: 1.9;
-    margin: .3rem 0
-}
-
-.title-h2-a {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: .5rem
-}
-
-.title-h2-a a {
-    margin-left: .5rem;
-    color: var(--sco-secondtext);
-    font-weight: 700
-}
-
-.title-h2-a a:hover {
-    color: var(--sco-hovertext)
-}
-
-.title-h2-a-left {
-    display: flex;
-    align-items: center
-}
-
-.title-h2-a-left h2 {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important
-}
-
-.title-h2-a-right {
-    font-size: 14px;
-    color: var(--sco-secondtext)
-}
-
-#card-funds .funds-list::-webkit-scrollbar {
-    display: none !important
-}
-
-.funds-tips {
-    font-size: .5rem;
-    width: 100%;
-    text-align: center;
-    color: var(--sco-secondtext);
-    margin: .5rem 0 0 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    position: absolute;
-    bottom: .5rem;
-    left: 0;
-    padding: 0 1rem
-}
-
-.funds-list {
-    height: 200px;
-    overflow: scroll
-}
-
-span.fund_name {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis
-}
-
-.funds-info {
-    margin-left: 4px;
-    color: var(--sco-secondtext)
-}
-
-.funds-list-item .content {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    flex-wrap: nowrap
-}
-
-.fund_dayGrowth {
-    display: inline;
-    float: right
-}
-
-.fund-up {
-    color: var(--sco-red)
-}
-
-.fund-down {
-    color: var(--sco-green)
-}
-
-#aside-content .card-widget#card-music {
-    background: var(--sco-pink);
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    padding: 0;
-    cursor: pointer;
-    border: none
-}
-
-#aside-content .card-widget#card-music img {
-    max-height: 110px;
-    object-fit: cover
-}
-
-#aside-content .card-widget#card-music:hover img {
-    transition: .5s;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d
-}
-
-.music-link {
-    display: flex;
-    justify-content: center;
-    align-content: center
-}
-
-#aside-content .card-widget#card-friendlinks {
-    background: var(--sco-main);
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    padding: 0;
-    cursor: pointer;
-    border: none
-}
-
-#aside-content .card-widget#card-friendlinks img {
-    max-height: 110px;
-    object-fit: cover
-}
-
-#aside-content .card-widget#card-friendlinks:hover img {
-    transition: .5s;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d
-}
-
-.friend-link {
-    display: flex;
-    justify-content: center;
-    align-content: center
-}
-
-#aside-content .card-widget.card-power,#aside-content .card-widget.card-history,#aside-content .card-widget.card-welcome {
-    padding: .4rem .6rem !important
-}
-
-#aside-content .card-widget.card-power .power-charge {
-    margin-left: auto;
-    color: var(--sco-secondtext);
-    font-size: 14px;
-    line-height: 1
-}
-
-#aside-content .card-widget.card-power .power-charge:hover {
-    color: var(--sco-lighttext)
-}
-
-.power-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -4px
-}
-
-.power-list .power-item .power-item-link a {
-    padding: 2px 4px;
-    border-radius: 4px;
-    margin-left: 8px
-}
-
-.power-list .power-item .power-item-link a:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-#aside-content .power-item-body {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap
-}
-
-#power-star-image {
-    width: 60px;
-    height: 60px;
-    border-radius: 8px;
-    background-size: contain;
-    margin-right: 12px
-}
-
-a#power-star {
-    display: flex;
-    padding: 8px;
-    border: var(--style-border-always);
-    border-radius: 8px;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    position: relative;
-    margin: 12px 0
-}
-
-a#power-star:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-div#power-star-title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 1;
-    margin-bottom: 8px
-}
-
-#power-star-desc {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    font-size: 12px;
-    max-width: 100%;
-    line-height: 1.2
-}
-
-.power-star-body {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    position: relative;
-    width: calc(100% - 68px);
-    justify-content: center
-}
-
-#card-vip-designweekly.card-widget {
-    display: flex !important;
-    padding: 0;
-    cursor: pointer
-}
-
-#card-vip-designweekly.card-widget .card-vip-designweekly-img {
-    width: 100%;
-    object-fit: cover
-}
-
-.card-vip-tips {
-    display: flex;
-    position: absolute;
-    font-size: 12px;
-    bottom: 8px;
-    left: 8px;
-    padding: 1px 6px;
-    background: var(--sco-black-op);
-    border-radius: 8px;
-    color: var(--sco-white)
-}
-
-#widget-tree-button {
-    background-color: var(--sco-secondbg) !important;
-    box-shadow: var(--sco-shadow-light2black) !important;
-    color: var(--sco-fontcolor)
-}
-
-#widget-tree:hover #widget-tree-button {
-    opacity: 0;
-    left: -1.5rem
-}
-
-#widget-tree {
-    background-color: var(--sco-maskbg) !important
-}
-
-#widget-tree:hover {
-    left: 0 !important;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
-}
-
-#widget-tree a {
-    -webkit-line-clamp: 2;
-    color: var(--sco-fontcolor) !important
-}
-
-#widget-tree a:hover {
-    color: var(--sco-hovertext) !important
-}
-
-.toggle-post-icon, .toggle-toc-icon {
-    color: var(--sco-fontcolor) !important
-}
-
-@media screen and (max-width: 768px) {
-    #widget-tree {
-        display: none !important
-    }
-}
-
-.guli_top {
-    position: fixed;
-    z-index: 99;
-    right: 30px;
-    display: flex;
-    transition: .3s;
-    opacity: 0;
-    bottom: -25px;
-    width: 88px;
-    height: 123px;
-    user-select: none
-}
-
-.guli_top.guli-fixed {
-    opacity: 1;
-    bottom: 25px
-}
-
-#guli_top .guli_body {
-    position: relative;
-    height: 123px;
-    z-index: 1003
-}
-
-#guli_top .guli_body:hover {
-    cursor: pointer
-}
-
-#guli_top .guli_wing {
-    position: relative;
-    height: 64px;
-    z-index: 1002;
-    bottom: -120px;
-    transform: scale(.01);
-    box-shadow: var(--sco-shadow-yellow)
-}
-
-#guli_top.open_wing .guli_wing {
-    transform: scale(1.03)
-}
-
-#guli_top.open_wing .guli_body {
-    transform: scale(1)
-}
-
-@media screen and (max-width: 1300px) {
-    #guli_top {
-        display: none
-    }
-}
-
-#cookies-window {
-    min-width: 300px;
-    background: var(--sco-maskbgdeep);
-    color: var(--sco-fontcolor);
-    padding: 8px 16px;
-    display: flex;
-    flex-direction: column;
-    bottom: 20px;
-    right: 20px;
-    position: fixed;
-    border-radius: 12px;
-    transition: .3s;
-    z-index: 1002;
-    user-select: none;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-    transform: translateZ(0);
-    border: var(--style-border);
-    animation: barrageIn .6s cubic-bezier(.42, 0, .3, 1.11)
-}
-
-#cookies-window.cw-hide {
-    opacity: 0;
-    animation: barrageOut .6s cubic-bezier(.42, 0, .3, 1.11);
-    z-index: -1
-}
-
-#cookies-window .cookies-window-title {
-    padding-bottom: 4px;
-    border-bottom: var(--style-border);
-    font-size: 12px;
-    font-weight: 700
-}
-
-#cookies-window .cookies-window-content {
-    font-size: 14px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center
-}
-
-.cookie-to {
-    margin-right: 4px;
-    font-weight: 700
-}
-
-.cookies-link {
-    margin-left: auto;
-    font-size: 16px
-}
-
-.cookies-link i.scoicon {
-    font-size: 16px
-}
-
-@media screen and (max-width: 1300px) {
-    #cookies-window {
-        display: none
-    }
-}
-
-.heo-tag {
-    padding: 1px 6px;
-    border-radius: 6px 6px 6px 0;
-    margin-left: 4px;
-    height: 20px;
-    line-height: 19px
-}
-
-.heo-tag-new-view {
-    color: var(--sco-white);
-    background: var(--sco-green)
-}
-
-.heo-tag-hot-view {
-    color: var(--sco-white);
-    background: var(--sco-red)
-}
-
-
-
-.layout > div:first-child {
-    width: calc(100% - 300px)
-}
-
-div#categoryList {
-    display: flex;
-    width: 100%;
-    justify-content: space-between
-}
-
-.categoryItem {
-    overflow: hidden;
-    transform: scale(1);
-    transition: all .8s cubic-bezier(.65, .15, .37, 1.19);
-    height: 48%;
-    border-radius: 12px
-}
-
-a.categoryButton {
-    height: 100%;
-    width: 100%;
-    background: var(--sco-card-bg);
-    border-radius: 12px;
-    display: inline-block;
-    text-align: left;
-    line-height: 4em;
-    font-weight: 700;
-    font-size: .9rem;
-    color: var(--sco-white);
-    transition: all .8s cubic-bezier(.39, .575, .565, 1);
-    transform: scale(1);
-    overflow: hidden;
-    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei
-}
-
-a.categoryButton i {
-    transform: scale(1) rotate(15deg)
-}
-
-@media screen and (max-width: 768px) {
-    a.categoryButton {
-        border-radius: 8px
-    }
-
-    .categoryItem {
-        border-radius: 0;
-        height: 47%;
-        box-shadow: none !important
-    }
-}
-
-a.categoryButton:after {
-    top: 50px;
-    width: 1rem;
-    left: 21px;
-    height: 2px;
-    background: var(--sco-white);
-    content: "";
-    border-radius: 1px;
-    position: absolute
-}
-
-.categoryButtonText {
-    padding-left: 21px
-}
-
-a.categoryButton i {
-    font-size: 5rem;
-    opacity: .2;
-    position: absolute;
-    right: 0;
-    top: 20%;
-    transition: .3s;
-    width: 100px;
-    text-align: center;
-    filter: blur(2px)
-}
-
-@media screen and (max-width: 768px) {
-    a.categoryButton i {
-        display: none
-    }
-
-    .recent-post-top .categoryGroup {
-        min-width: 130px !important;
-        margin-bottom: .5rem;
-        margin-left: 1rem;
-        max-height: 164px;
-        overflow: hidden;
-        position: relative
-    }
-}
-
-.topGroup {
-    display: flex
-}
-
-#bannerGroup {
-    display: flex
-}
-
-div#banners {
-    display: none
-}
-
-.topGroup .todayCard {
-    display: none
-}
-
-@media screen and (min-width: 1200px) {
-    .topGroup {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        height: calc(328px + .5rem);
-        align-content: space-between;
-        width: calc(600px + 1.5rem);
-        position: relative;
-        animation: slide-in .6s .1s backwards
-    }
-
-    div#bannerGroup {
-        width: calc(100% - 600px - 2rem);
-        margin-right: .5rem;
-        height: calc(328px + .5rem);
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between
-    }
-
-    div#banners {
-        display: flex;
-        width: 100%;
-        height: 76%;
-        background: var(--sco-card-bg);
-        margin-bottom: .5rem;
-        border: var(--style-border);
-        border-radius: 12px;
-        overflow: hidden;
-        position: relative;
-        box-shadow: var(--sco-shadow-border);
-        flex-direction: column;
-        transition: .3s;
-        will-change: transform;
-        animation: slide-in .6s .1s backwards
-    }
-
-    div#banners:hover {
-        box-shadow: var(--sco-shadow-main)
-    }
-
-    #banners.flink {
-        margin-bottom: .5rem
-    }
-
-    #banners .banner-button-group {
-        position: absolute;
-        right: 2rem;
-        top: 2rem;
-        display: flex
-    }
-
-    #banners .banner-button {
-        padding: 8px 12px;
-        background: var(--sco-fontcolor);
-        border-radius: 12px;
-        color: var(--sco-card-bg);
-        display: flex;
-        align-items: center;
-        z-index: 1;
-        transition: .3s;
-        cursor: pointer;
-        box-shadow: var(--sco-shadow-black)
-    }
-
-    #banners .banner-button.secondary {
-        background: var(--sco-secondbg);
-        border: var(--style-border-always);
-        color: var(--sco-lighttext);
-        margin-right: 1rem;
-        box-shadow: var(--sco-shadow-border)
-    }
-
-    #banners .banner-button:hover {
-        background: var(--sco-theme);
-        color: var(--sco-white)
-    }
-
-    #banners .banner-button i {
-        margin-right: 8px;
-        font-size: 1rem
-    }
-
-    .banners-title {
-        top: 2rem;
-        left: 1.5rem;
-        position: absolute;
-        display: flex;
-        flex-direction: column
-    }
-
-    .flink .banners-title {
-        top: 1.5rem
-    }
-
-    .banners-title-big {
-        font-size: 36px;
-        line-height: 1;
-        font-weight: 700;
-        margin-bottom: 8px
-    }
-
-    .banners-title-small {
-        font-size: 12px;
-        line-height: 1;
-        color: var(--sco-secondtext);
-        margin-top: 8px;
-        margin-bottom: .5rem
-    }
-
-    #banner-hover {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        background: var(--sco-theme);
-        color: var(--sco-white);
-        padding-left: .5rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        opacity: 0;
-        transition: cubic-bezier(.71, .15, .16, 1.15) .6s
-    }
-
-    .bannerText {
-        font-size: 4rem;
-        line-height: 4rem;
-        font-weight: 700
-    }
-
-    .banner-righticon {
-        font-size: 4rem;
-        opacity: .6
-    }
-
-    #banners:hover #banner-hover {
-        opacity: 1;
-        padding-left: 2rem;
-        background: var(--sco-theme-op-deep);
-        backdrop-filter: blur(15px);
-        -webkit-backdrop-filter: blur(15px);
-        transform: translateZ(0);
-        -webkit-backface-visibility: hidden;
-        -webkit-transform-style: preserve-3d;
-        transition: .3s;
-        background-size: 200%;
-        cursor: pointer
-    }
-
-    #banners #banner-hover i {
-        font-size: 80px;
-        opacity: .4
-    }
-
-    .topGroup .todayCard {
-        position: absolute;
-        width: calc(600px + 1rem);
-        height: 100%;
-        z-index: 1;
-        top: 0;
-        left: 0;
-        background: var(--sco-card-bg);
-        border-radius: 12px;
-        margin-left: .5rem;
-        overflow: hidden;
-        transition: .3s;
-        display: flex;
-        cursor: pointer;
-        pointer-events: all
-    }
-
-    .topGroup .todayCard::after {
-        position: absolute;
-        content: '';
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0
-    }
-
-    .topGroup .todayCard.hide {
-        opacity: 0;
-        pointer-events: none
-    }
-
-    .topGroup .todayCard .todayCard-info {
-        position: absolute;
-        bottom: 2rem;
-        left: 2rem;
-        z-index: 2;
-        color: var(--sco-white);
-        max-width: 60%;
-        transition: .3s
-    }
-
-    .topGroup .todayCard.hide .todayCard-info {
-        bottom: 1rem;
-        opacity: 0
-    }
-
-    .topGroup .todayCard .todayCard-info .todayCard-tips {
-        opacity: .8;
-        font-size: .6rem
-    }
-
-    .topGroup .todayCard .todayCard-info .todayCard-title {
-        font-size: 28px;
-        font-weight: 700;
-        line-height: 36px
-    }
-
-    .topGroup .banner-button-group {
-        position: absolute;
-        right: 2rem;
-        bottom: 2rem;
-        display: flex;
-        transition: .3s
-    }
-
-    .topGroup .todayCard.hide .banner-button-group {
-        bottom: 1rem
-    }
-
-    .topGroup .banner-button {
-        background: var(--sco-white-op);
-        border-radius: 20px;
-        color: var(--sco-white);
-        display: flex;
-        align-items: center;
-        z-index: 1;
-        transition: .3s;
-        cursor: pointer;
-        backdrop-filter: saturate(180%) blur(20px);
-        -webkit-backdrop-filter: blur(20px);
-        transform: translateZ(0);
-        height: 40px;
-        width: 118px;
-        justify-content: center
-    }
-
-    .topGroup .banner-button:hover {
-        background: var(--sco-theme);
-        color: var(--sco-white)
-    }
-
-    .topGroup .banner-button i {
-        margin-right: 8px;
-        font-size: 22px
-    }
-
-    .topGroup .todayCard .todayCard-cover {
-        position: absolute;
-        min-width: 100%;
-        min-height: 100%;
-        top: 0;
-        left: 0;
-        background-size: cover;
-        z-index: -1;
-        transition: .3s
-    }
-
-    .topGroup .todayCard.hide .todayCard-cover {
-        transform: scale(1.2)
-    }
-}
-
-.tags-group-icon {
-    width: 120px;
-    height: 120px;
-    border-radius: 30px
-}
-
-.tags-group-all {
-    display: flex;
-    transform: rotate(-30deg)
-}
-
-.tags-group-all.nowrapMove {
-    transform: rotate(0);
-    padding-bottom: 2rem
-}
-
-.tags-group-wrapper {
-    margin-top: 5rem;
-    display: flex;
-    flex-wrap: nowrap;
-    animation: rowup 60s linear infinite
-}
-
-.nowrapMove .tags-group-wrapper {
-    margin-top: 7rem;
-    animation: rowup 120s linear infinite
-}
-
-.tags-group-icon-pair .tags-group-icon:nth-child(even) {
-    margin-top: 1rem;
-    transform: translate(-60px)
-}
-
-.tags-group-icon-pair {
-    margin-left: 1rem;
-    user-select: none
-}
-
-.tags-group-icon-pair a img {
-    border-radius: 50% !important
-}
-
-.tags-group-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    font-size: 66px;
-    font-weight: 700;
-    box-shadow: var(--sco-shadow-blackdeep)
-}
-
-.nowrapMove .tags-group-icon {
-    border-radius: 50%
-}
-
-.tags-group-icon img {
-    width: 60%
-}
-
-.nowrapMove .tags-group-icon img {
-    min-width: 100%;
-    min-height: 100%;
-    border-radius: 50%;
-    object-fit: cover
-}
-
-#categoryList > div:nth-child(1) > a::before {
-    height: 24px;
-    width: 44px;
-    content: "";
-    background-size: 38px 24px;
-    position: absolute;
-    top: 0;
-    left: 0
-}
-
-.categoryItem:hover i {
-    opacity: .8;
-    transition: .8s;
-    transition-delay: .15s;
-    transform: scale(1.03) rotate(0);
-    font-size: 2.5rem;
-    filter: blur(0)
-}
-
-@media screen and (min-width: 1300px) {
-    .categoryItem:hover i {
-        transform: scale(1.03) rotate(0)
-    }
-}
-
-#categoryList > a:nth-child(0) > i {
-    padding-right: 8px
-}
-
-.cate-button-text {
-    box-shadow: var(--sco-shadow-black)
-}
-
-@media screen and (max-width: 768px) {
-    div#categoryList {
-        display: none
-    }
-}
-
-.recent-post-top .categoryGroup {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    min-width: 200px
-}
-
-.categoryGroup .categoryItem:nth-child(3) {
-    display: none
-}
-
-@media screen and (min-width: 1200px) {
-    .recent-post-top .categoryGroup {
-        flex-direction: row;
-        height: 24%;
-        animation: slide-in .6s .2s backwards
-    }
-
-    .categoryItem {
-        width: calc(100% / 3 - .33rem);
-        height: 100%;
-        margin-right: .5rem
-    }
-
-    .categoryItem:last-child {
-        margin-right: 0
-    }
-
-    .categoryItem:hover {
-        width: 50%
-    }
-
-    .categoryGroup .categoryItem:nth-child(3) {
-        display: flex
-    }
-}
-
-a.categoryButton.bikan {
-    background: linear-gradient(to right, #358bff, #15c6ff);
-    background-size: 200%
-}
-
-a.categoryButton.remen {
-    background: linear-gradient(to right, #f65, #ffbf37);
-    background-size: 200%
-}
-
-a.categoryButton.shiyong {
-    background: linear-gradient(to right, #18e7ae, #1eebeb);
-    background-size: 200%
-}
-
-[data-theme=dark] a.categoryButton.bikan {
-    background: linear-gradient(to right, #0653b8, #2fcbff);
-    background-size: 200%
-}
-
-[data-theme=dark] a.categoryButton.remen {
-    background: linear-gradient(to right, #e22a16, #da980c);
-    background-size: 200%
-}
-
-[data-theme=dark] a.categoryButton.shiyong {
-    background: linear-gradient(to right, #099e74, #0ea4a4);
-    background-size: 200%
-}
-
-a.categoryButton:hover {
-    background-position: 100% 0
-}
-
-
-#category #category-bar {
-    padding: 0;
-    border: none;
-    box-shadow: none
-}
-
-#category a.category-bar-item.select a {
-    display: none
-}
-
-.category-in-bar {
-    display: flex;
-    white-space: nowrap;
-    align-items: center
-}
-
-.category-in-bar-tips {
-    margin-right: 1rem
-}
-
-.category-bar-items {
-    white-space: nowrap;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    display: flex;
-    border-radius: 8px;
-    align-items: center;
-    height: 30px
-}
-
-.category-in-bar .category-in-bar-tips {
-    margin-bottom: 0
-}
-
-.category-in-bar #category-bar {
-    margin-bottom: 0
-}
-
-.category-bar-items::-webkit-scrollbar {
-    display: none
-}
-
-.category-bar-item a {
-    padding: .1rem .5rem;
-    margin-right: 6px;
-    font-weight: 700;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    height: 30px
-}
-
-.category-bar-item:hover a {
-    background: var(--sco-theme);
-    color: var(--sco-white)
-}
-
-.category-bar-item.select a {
-    background: var(--sco-theme);
-    color: var(--sco-white);
-    border-radius: 8px
-}
-
-@media screen and (max-width: 768px) {
-    .category-bar-item.select a {
-        border-radius: 8px
-    }
-
-    .category-bar-item a {
-        border-radius: 8px
-    }
-
-    .category-in-bar {
-        position: -webkit-sticky;
-        position: sticky;
-        top: 60px;
-        background: var(--sco-background);
-        z-index: 1002
-    }
-}
-
-.category-bar-next {
-    margin-left: 16px;
-    cursor: pointer;
-    height: 22px;
-    display: flex
-}
-
-.category-bar-next:hover {
-    color: var(--sco-lighttext)
-}
-
-.category-bar-more {
-    margin-left: 14px;
-    font-weight: 700
-}
-
-.category-bar-more:hover {
-    color: var(--sco-lighttext)
-}
-
-li, ul {
-    list-style: none;
-    display: block;
-    margin: 0;
-    padding: 0
-}
-
-.recent-post-item .recent-post-info .recent-post-info-top {
-    position: relative;
-    transition: .3s;
-    padding: 0 32px;
-    width: 100%
-}
-
-.recent-post-item .recent-post-info .recent-post-info-top .article-title {
-    line-height: 30px;
-    margin-top: 0;
-    font-weight: 700;
-    color: var(--sco-fontcolor);
-    margin-bottom: 0;
-    width: 100%;
-    transition: .3s;
-    font-size: 1rem;
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical
-}
-
-.recent-post-item .recent-post-info .recent-post-info-top .original {
-    display: flex;
-    color: var(--sco-secondtext);
-    font-size: .5rem;
-    position: relative;
-    margin-right: 8px
-}
-
-.recent-post-item .recent-post-info .recent-post-info-top .lastestpost {
-    display: none;
-    margin-right: 8px
-}
-
-.recent-post-info-top-tips {
-    display: flex;
-    margin-top: 20px
-}
-
-.recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post {
-    display: flex;
-    color: var(--sco-secondtext);
-    font-size: .5rem;
-    position: relative
-}
-
-.recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post:visited {
-    color: var(--sco-card-bg)
-}
-
-@media screen and (max-width: 768px) {
-    .recent-post-info-top-tips {
-        display: none
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    #recent-posts > .recent-post-item:nth-child(2) .lastestpost {
-        display: flex;
-        color: var(--sco-secondtext);
-        font-size: .5rem;
-        position: relative
-    }
-
-    .recent-post-item .recent-post-info .recent-post-info-top .article-title {
-        font-size: 20px;
-        -webkit-line-clamp: 2
-    }
-
-    .recent-post-item:hover .recent-post-info .recent-post-info-top .article-title {
-        -webkit-line-clamp: 2
-    }
-
-    #recent-posts > .recent-post-item .post_cover {
-        transition: 1s !important;
-        height: 225px;
-        width: 100%
-    }
-
-    .recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content {
-        opacity: 0 !important;
-        -webkit-line-clamp: 2 !important
-    }
-
-    .recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content {
-        opacity: 1 !important
-    }
-}
-
-.recent-post-item .recent-post-info .recent-post-info-top .content {
-    opacity: 0;
-    transition: .3s;
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-height: 1.4;
-    color: var(--sco-secondtext);
-    margin-top: .5rem
-}
-
-@media screen and (max-width: 1300px) {
-    .recent-post-item:hover .recent-post-info .recent-post-info-top .content {
-        display: none
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    .recent-post-item:hover .recent-post-info .recent-post-info-top .content {
-        display: none
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content {
-        opacity: 1;
-        -webkit-line-clamp: 4
-    }
-
-    .recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content {
-        -webkit-line-clamp: 6
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .recent-post-item .recent-post-info .recent-post-info-top {
-        padding: 0 20px;
-        top: 20px
-    }
-
-    .recent-post-item .recent-post-info .recent-post-info-top .content {
-        opacity: 1;
-        -webkit-line-clamp: 3;
-        display: none
-    }
-
-    #recent-posts .recent-post-item .recent-post-info .article-title {
-        font-size: 19px
-    }
-}
-
-#recent-post-top .recent-post-item .post_cover {
-    width: 100%
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap i {
-    margin: 0 .4rem 0 0
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .sticky {
-    color: var(--sco-fontcolor)
-}
-
-#recent-posts .recent-post-item {
-    height: fit-content;
-    background: var(--sco-card-bg);
-    border-radius: 12px;
-    cursor: pointer;
-    border: var(--style-border)
-}
-
-#recent-posts .recent-post-item:hover {
-    border: var(--style-border-hover);
-    box-shadow: var(--sco-shadow-main)
-}
-
-@media screen and (max-width: 768px) {
-    #recent-posts .recent-post-item:hover {
-        border: none;
-        box-shadow: none
-    }
-}
-
-@media screen and (max-width: 1300px) {
-    #recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius {
-        width: 75%;
-        display: flex;
-        height: 200px
-    }
-
-    #recent-posts > .recent-post-item:hover .post_cover img.post_bg {
-        transform: scale(1.03);
-        transition: .3s ease-in-out;
-        filter: brightness(.85)
-    }
-
-    @media screen and (min-width: 1200px) {
-        #recent-posts>.recent-post-item:hover .post_cover img.post_bg {
-            transform:scale(1.03);
-            transition: .3s ease-in-out;
-            filter: brightness(.85)
-        }
-    }
-
-    #recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg {
-        transform: scale(1.03)
-    }
-
-    #recent-posts > .recent-post-item .post_cover img.post_bg {
-        min-width: 100%;
-        -webkit-backface-visibility: hidden;
-        -webkit-transform-style: preserve-3d;
-        transition: .3s ease-in-out;
-        min-height: 100%;
-        user-select: none
-    }
-
-    #recent-posts > .recent-post-item:hover > .recent-post-info {
-        transition: all .3s;
-        position: relative
-    }
-
-    #recent-posts > .recent-post-item > .recent-post-info {
-        transition: all .3s
-    }
-}
-
-#recent-posts > .recent-post-item:hover .post_cover img.post_bg {
-    transform: scale(1.03);
-    transition: .3s ease-in-out;
-    filter: brightness(.85)
-}
-
-@media screen and (min-width: 1300px) {
-    #recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius {
-        width: 100%;
-        display: flex
-    }
-}
-
-#recent-posts > .recent-post-item .left_radius a, #recent-posts > .recent-post-item .right_radius a {
-    min-height: 100%;
-    min-width: 100%
-}
-
-.recent-top-post-group {
-    border-radius: 12px;
-    overflow: hidden;
-    overflow-x: auto;
-    width: 100%;
-    margin-bottom: 0;
-    -webkit-user-select: none
-}
-
-.recent-post-top {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    width: 100%;
-    overflow-x: scroll
-}
-
-.recent-post-top::-webkit-scrollbar {
-    display: none
-}
-
-.recent-post-top .recent-post-item {
-    display: flex;
-    width: 200px;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-left: .5rem;
-    background: var(--sco-card-bg);
-    border-radius: 12px;
-    overflow: hidden;
-    min-width: 200px;
-    height: 164px;
-    max-height: 164px;
-    border: var(--style-border-always);
-    transition: .3s;
-    position: relative;
-    box-shadow: var(--sco-shadow-border)
-}
-
-@media screen and (max-width: 768px) {
-    .recent-post-top .recent-post-item {
-        border-radius: 8px;
-        box-shadow: none;
-        clip-path: inset(0 0 0 0 round 8px)
-    }
-
-    .recent-post-top .recent-post-item:last-child {
-        margin-right: 1rem
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    .recent-post-top .recent-post-item {
-        margin-right: 0;
-        margin-bottom: .5rem
-    }
-
-    .recent-post-top {
-        overflow-x: visible
-    }
-
-    .recent-top-post-group {
-        overflow: visible;
-    }
-}
-
-span.recent-post-top-text {
-    position: absolute;
-    top: 0;
-    left: -40px;
-    display: flex;
-    z-index: 1;
-    background: var(--sco-theme);
-    color: var(--sco-white);
-    padding: 2px 8px;
-    font-size: .6rem;
-    border-radius: 12px 0 12px 0;
-    transition: .3s;
-    cursor: pointer
-}
-
-.recent-post-item:hover .recent-post-top-text {
-    left: 0
-}
-
-@media screen and (max-width: 768px) {
-    .recent-top-post-group {
-        border-radius: 0;
-        background: var(--sco-background)
-    }
-
-    .recent-post-top-text {
-        display: none !important
-    }
-
-    .recent-post-top .recent-post-item .post_cover img {
-        border-radius: 8px 8px 0 0 !important
-    }
-}
-
-.recent-post-top .recent-post-item .post_cover a {
-    height: 100px;
-    overflow: hidden;
-    display: flex
-}
-
-.recent-post-top .recent-post-item .post_cover img {
-    object-fit: cover;
-    width: 100%;
-    background: var(--sco-secondbg);
-    border-radius: 12px 12px 0 0
-}
-
-.recent-post-top .recent-post-item:hover .post_cover img {
-    transform: scale(1)
-}
-
-.recent-post-item .post_cover {
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
-}
-
-.recent-post-top .recent-post-item .recent-post-info {
-    padding: .3rem .5rem .3rem .5rem !important;
-    transition: .3s
-}
-
-.recent-post-top .recent-post-item:hover .recent-post-info a {
-    color: var(--sco-fontcolor)
-}
-
-@media screen and (max-width: 1300px) {
-    .recent-post-top .recent-post-item:hover .recent-post-info a {
-        color: var(--sco-theme);
-        transition: .3s
-    }
-}
-
-.recent-post-top .recent-post-item .recent-post-info .article-title {
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    line-height: 1.5;
-    justify-content: center;
-    align-items: flex-end;
-    align-content: center;
-    font-weight: 700;
-    font-size: .8rem !important;
-    padding: 0 !important;
-}
-
-.title-and-tips {
-    display: flex;
-    margin-top: 1rem;
-    align-items: center
-}
-
-.title-and-tips .page-title {
-    line-height: 1;
-    margin: 0
-}
-
-.title-and-tips .page-tips {
-    background: var(--sco-yellow-op);
-    color: var(--sco-yellow);
-    margin-bottom: auto;
-    border-radius: 8px;
-    padding: 2px 6px;
-    font-size: .5rem;
-    margin-left: 8px
-}
-
-#aside-content .card-widget {
-    box-shadow: var(--sco-shadow-border);
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    transition: .3s;
-    border-radius: 12px;
-    position: relative;
-    overflow: hidden;
-    margin-top: 1rem;
-    padding: 1rem 1.2rem
-}
-
-#recent-posts > .recent-post-item {
-    box-shadow: var(--sco-shadow-light2black);
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-align: center;
-    align-items: center;
-    animation: slide-in .6s .4s backwards;
-    transition: all .3s ease 0s;
-    overflow: hidden;
-}
-
-@media screen and (min-width: 1300px) {
-    #recent-posts > .recent-post-item {
-        flex-direction: column
-    }
-
-    #recent-posts > .recent-post-item:not(:first-child) {
-        width: calc(100% / 2 - .5rem);
-        margin-top: .25rem;
-        margin-bottom: .75rem;
-        box-shadow: var(--sco-shadow-border)
-    }
-
-    #category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item {
-        position: relative;
-        overflow: hidden;
-        animation: slide-in .6s .4s backwards;
-        will-change: transform;
-        width: calc(100% / 2 - .5rem);
-        margin-top: .25rem;
-        margin-bottom: .75rem;
-        box-shadow: var(--sco-shadow-border)
-    }
-
-    #category-bar {
-        margin-bottom: .75rem;
-        box-shadow: var(--sco-shadow-border);
-        animation: slide-in .6s .3s backwards
-    }
-
-    #category #category-bar {
-        animation: none
-    }
-
-    #recent-posts {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-items: flex-start;
-        align-content: flex-start;
-        -webkit-user-select: none
-    }
-}
-
-@media screen and (min-width: 1200px) {
-    #category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item {
-        animation:slide-in .6s .4s backwards
-    }
-
-    #category-bar {
-        animation: slide-in .6s .3s backwards
-    }
-}
-
-#recent-posts {
-    position: relative
-}
-
-@media screen and (max-width: 768px) {
-    #recent-posts > .recent-post-item {
-        border-radius: 0
-    }
-
-    #recent-posts > .recent-post-item:not(:first-child) {
-        border-radius: 12px;
-        margin: .5rem 1rem 1.5rem;
-        border: var(--style-border-always);
-        box-shadow: var(--sco-shadow-border);
-        display: block;
-        position: relative;
-        clip-path: inset(0 0 0 0 round 12px)
-    }
-
-    #category #recent-posts,#tag #recent-posts {
-        padding: 0
-    }
-
-    #recent-posts .recent-post-item .post_cover {
-        border-radius: 0 !important;
-        width: 100%
-    }
-
-    a.article-meta__categories {
-        left: 12px !important;
-        top: 12px !important;
-        border-radius: 4px !important;
-        padding: 2px 9px !important;
-        font-size: 12px
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    .topGroup .recent-post-item:nth-child(7) {
-        display: none
-    }
-}
-
-@media screen and (max-width: 768px) {
-    #sidebar-menus > div.author-avatar {
-        display: none
-    }
-
-    #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
-        bottom: .5rem !important
-    }
-
-    #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap time {
-        display: absolute;
-        right: 0
-    }
-
-    #rightside {
-        display: none
-    }
-
-    #web_bg {
-        background: 0 0 !important
-    }
-
-    #recent-posts > .recent-post-item .post_cover img.post_bg {
-        border-radius: 12px 12px 0 0 !important
-    }
-
-    #recent-posts > .recent-post-item .post_cover img.post_bg:hover {
-        transform: scale(1)
-    }
-
-    #recent-posts > .recent-post-item:hover img.post_bg {
-        transform: scale(1)
-    }
-
-    .recent-post-top .recent-post-item:hover .post_cover img {
-        transform: scale(1)
-    }
-
-    #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap, #recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts > .recent-post-item > .recent-post-info > .content {
-        padding: 0 20px !important
-    }
-}
-
-a.article-meta__categories {
-    position: absolute;
-    padding: 1px 6px;
-    background: var(--sco-black-op);
-    border-radius: 8px;
-    margin-left: 0;
-    font-size: 12px;
-    font-weight: 700;
-    color: var(--sco-white);
-    top: 8px;
-    left: 8px;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
-}
-
-a.article-meta__categories:hover {
-    background: var(--sco-theme) !important;
-    color: var(--sco-white) !important;
-    box-shadow: var(--sco-shadow-theme)
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-title {
-    line-height: 1.4;
-    margin-top: 0;
-    font-weight: 700;
-    color: var(--sco-fontcolor);
-    margin-bottom: 0;
-    position: absolute;
-    width: 100%;
-    left: 0;
-    padding: 0 40px;
-    transition: .3s
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-title:hover {
-    color: var(--sco-fontcolor)
-}
-
-@media screen and (min-width: 768px) {
-    #recent-posts > .recent-post-item > .recent-post-info > .article-title {
-        top: 40px
-    }
-
-    #recent-posts > .recent-post-item:hover > .recent-post-info > .article-title {
-        top: 20px
-    }
-
-    #recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-title {
-        top: 30px
-    }
-
-    #recent-posts .recent-post-item:hover .recent-post-info .article-title {
-        color: var(--sco-theme)
-    }
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .post-meta-date {
-    right: 0;
-    text-align: right
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .post-meta-date i {
-    display: none
-}
-
-.post-meta-date .far {
-    opacity: .6
-}
-
-.post-meta-date .article-meta-label {
-    display: none
-}
-
-.post-meta-date {
-    margin-right: .8rem
-}
-
-#post-meta .post-meta-date {
-    opacity: .6
-}
-
-#aside-content #card-toc .toc-content .toc-link.active {
-    line-height: 24px;
-    border-radius: 12px;
-    border-left-color: var(--sco-hovertext);
-    background-color: var(--sco-card-bg);
-    color: var(--sco-lighttext);
-    font-weight: 700;
-    font-size: 20px
-}
-
-[data-theme=dark].toc .toc-item.active .toc-link .toc-text {
-    color: var(--sco-white)
-}
-
-#aside-content #card-toc .toc-content .toc-item.active .toc-link {
-    opacity: 1;
-    border-radius: 8px
-}
-
-#aside-content #card-toc .toc-content .toc-link {
-    line-height: 24px;
-    padding: 8px;
-    border-left: 0 solid transparent;
-    border-radius: 12px;
-    color: var(--sco-secondtext);
-    cursor: default;
-    min-height: 40px;
-    display: flex;
-    align-items: center
-}
-
-#aside-content #card-toc .toc-content .toc-link:not(.active) span {
-    opacity: .6;
-    cursor: pointer;
-    filter: blur(1px);
-    transition: .3s
-}
-
-#aside-content #card-toc:hover .toc-content .toc-link:not(.active) span {
-    filter: blur(0);
-    opacity: 1
-}
-
-#aside-content #card-toc .toc-content .toc-link:not(.active) span:hover {
-    color: var(--sco-lighttext)
-}
-
-#card-toc {
-    padding: .5rem .5rem !important
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta__separator {
-    display: none
-}
-
-.article-meta {
-    margin: 0 8px 0 0;
-    white-space: nowrap;
-    overflow: hidden;
-    display: inline-block;
-    text-overflow: ellipsis
-}
-
-.article-meta__link {
-    display: none
-}
-
-.article-meta__tags {
-    margin-right: 8px;
-    padding: 0 .2rem 0 0;
-    color: var(--sco-fontcolor)
-}
-
-#recent-posts > div > i .post_cover {
-    display: none
-}
-
-#recent-posts > .recent-post-item > .recent-post-info {
-    height: 174px;
-    width: 100%;
-    cursor: pointer;
-    position: relative;
-    padding: 0;
-    display: inline-block;
-    overflow: hidden
-}
-
-@media screen and (max-width: 768px) {
-    #recent-posts .recent-post-item .recent-post-info {
-        height: 7rem
-    }
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
-    position: absolute;
-    bottom: 16px;
-    transition: .3s;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    width: 100%;
-    left: 0;
-    padding: 0 32px;
-    white-space: nowrap
-}
-
-@media screen and (min-width: 1300px) {
-    #recent-posts > .recent-post-item:hover > .recent-post-info > .article-meta-wrap {
-        bottom: 30px
-    }
-
-    #recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-meta-wrap {
-        bottom: 30px
-    }
-
-    #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
-        bottom: 30px
-    }
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap a:hover {
-    background-color: var(--sco-none);
-    color: var(--sco-lighttext);
-    cursor: pointer;
-    border-radius: 4px
-}
-
-#home_top {
-    max-width: 1400px;
-    margin: .5rem auto auto;
-    padding: 0 1.5rem
-}
-
-@media screen and (max-width: 768px) {
-    #home_top {
-        padding: 0;
-        margin-top: 0
-    }
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/Sketch/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E8%AE%BE%E8%AE%A1/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E5%B9%B2%E8%B4%A7/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E6%95%99%E7%A8%8B/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a sup {
-    opacity: .6;
-    margin-left: 2px
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .content {
-    line-height: 1.4;
-    color: var(--sco-secondtext);
-    margin-top: 0;
-    cursor: pointer;
-    transition: .3s;
-    opacity: 1;
-    position: absolute;
-    width: 100%;
-    left: 0;
-    padding: 0 40px
-}
-
-@media screen and (min-width: 768px) {
-    #recent-posts > .recent-post-item > .recent-post-info > .content {
-        opacity: 0;
-        top: 120px
-    }
-
-    #recent-posts > .recent-post-item:hover > .recent-post-info > .content {
-        opacity: 1;
-        top: 90px
-    }
-
-    @media screen and (max-width: 1300px) {
-        #recent-posts > .post-card-large > .recent-post-info > .content {
-            opacity: 1 !important
-        }
-
-        #recent-posts > .post-card-large:hover > .recent-post-info > .content {
-            top: 110px
-        }
-
-        #recent-posts > .post-card-large > .recent-post-info > .content {
-            -webkit-line-clamp: 3 !important
-        }
-
-        #recent-posts > .post-card-large:hover > .recent-post-info > .content {
-            -webkit-line-clamp: 5 !important
-        }
-
-        #recent-posts > .post-card-large {
-            height: 20em !important
-        }
-    }
-}
-
-@media screen and (max-width: 768px) {
-    #recent-posts > .recent-post-item > .recent-post-info > .content {
-        top: 5rem
-    }
-}
-
-#recent-posts > .recent-post-item > .recent-post-info > .content {
-    -webkit-line-clamp: 2
-}
-
-div#author-info__sayhi {
-    text-align: center;
-    width: fit-content;
-    color: var(--sco-white);
-    background: var(--sco-white-op);
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 12px;
-    cursor: pointer;
-    -webkit-user-select: none;
-    transition: .3s;
-    margin: auto;
-    min-width: 100px
-}
-
-div#author-info__sayhi:hover {
-    background: var(--sco-card-bg);
-    color: var(--sco-fontcolor);
-    transform: scale(1.1)
-}
-
-#aside-content .card-info .author-info__name {
-    text-align: left;
-    font-weight: 700;
-    color: var(--sco-white);
-    font-size: 20px;
-    line-height: 1;
-    margin-bottom: 5px
-}
-
-.author-info__desc {
-    font-size: 12px;
-    color: var(--sco-white);
-    opacity: .6;
-    line-height: 1.5;
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical
-}
-
-.avatar-img-group {
-    width: 118px;
-    height: 118px;
-    right: calc(50% - 59px);
-    top: 90px;
-    border-radius: 500px;
-    position: absolute;
-    transition: cubic-bezier(.69, .39, 0, 1.21) .3s;
-    transform-origin: bottom;
-    border: 5px solid var(--sco-card-bg)
-}
-
-#aside-content .card-info:hover .avatar-img-group {
-    opacity: 0;
-    transform: scale(0)
-}
-
-.avatar-sticker {
-    position: absolute;
-    bottom: 2px;
-    right: 2px;
-    width: 33px;
-    height: 33px;
-    line-height: 34px;
-    z-index: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: .3s .2s;
-    transform: scale(1);
-    background: var(--sco-white);
-    border-radius: 50%
-}
-
-.avatar-sticker svg {
-
-    width: 26px;
-    height: 26px
-}
-
-.card-widget:hover .avatar-sticker {
-    opacity: 0;
-    transform: scale(0)
-}
-
-#aside-content > .card-widget:first-child {
-    transition: .3s;
-    border: none;
-    box-shadow: none;
-    background: var(--sco-main);
-    margin-top: 0
-}
-
-#aside-content > .card-widget.card-info {
-    background: var(--sco-card-bg);
-    box-shadow: var(--sco-shadow-black);
-    position: relative
-}
-
-#aside-content > .card-widget.card-info::before {
-    background: linear-gradient(-25deg, var(--sco-main), var(--sco-main-op-deep), var(--sco-main), var(--sco-main-op-deep));
-    background-size: 400%;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    content: '';
-    animation: gradient 15s ease infinite
-}
-
-@media screen and (max-width: 1300px) {
-    #aside-content > .card-widget:first-child {
-        min-height: 329px
-    }
-}
-
-.author-info__description {
-    line-height: 1.38;
-    margin: .3rem 0;
-    text-align: justify;
-    color: rgba(255, 255, 255, .8)
-}
-
-.author-info__description b {
-    color: var(--sco-white)
-}
-
-.author-info__description_group {
-    position: absolute;
-    top: 50px;
-    width: 100%;
-    left: 0;
-    padding: 1.2rem;
-    opacity: 0;
-    transition: .3s
-}
-
-.card-widget:hover .author-info__description_group {
-    opacity: 1
-}
-
-.author-info__description2 {
-    line-height: 1.38;
-    margin: .3rem 0;
-    text-align: justify;
-    width: 100%;
-    z-index: 2;
-    color: rgba(255, 255, 255, .8)
-}
-
-.author-info__description2 b {
-    color: var(--sco-white)
-}
-
-.card-widget.card-info .banner-button-group {
-    position: absolute;
-    right: 1rem;
-    bottom: 1rem;
-    display: flex;
-    -webkit-user-select: none
-}
-
-.card-widget.card-info .banner-button-group .banner-button {
-    padding: 8px 12px;
-    background: var(--sco-white-op);
-    border-radius: 12px;
-    color: var(--sco-white);
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    transition: .3s;
-    cursor: pointer
-}
-
-.card-widget.card-info .banner-button-group .banner-button:hover {
-    background: var(--sco-white);
-    color: var(--sco-black)
-}
-
-.card-widget.card-info .banner-button-group .banner-button i {
-    margin-right: 8px;
-    font-size: 22px
-}
-
-#aside-content .card-info .card-info-data {
-    display: none
-}
-
-#aside-content .card-info a img {
-    border-radius: 0;
-    height: 200px;
-    display: inherit;
-    filter: drop-shadow(-5px 14px 8px #00000008);
-    position: absolute;
-    right: -24px;
-    bottom: -82px;
-    width: auto;
-    z-index: 0;
-    transition: cubic-bezier(.48, -.21, 0, 1.5) .3s
-}
-
-#aside-content .card-info a img:hover {
-    bottom: -42px
-}
-
-[data-theme=light] #aside-content .card-info a img {
-    filter: drop-shadow(-5px 14px 8px #ffffff08)
-}
-
-.card-widget.card-info {
-    padding: 0 !important
-}
-
-#aside-content > div.card-widget.card-info > div.card-content {
-    padding: 1rem 1.2rem;
-    min-height: 320px;
-    position: relative
-}
-
-#aside-content > div.card-widget.card-info > div.card-info-avatarimg {
-    overflow: hidden;
-    background: var(--sco-yellow);
-    transition: 1.5s;
-    min-height: 160px;
-    position: relative;
-    box-shadow: var(--sco-shadow-yellow)
-}
-
-#aside-content > div.card-widget.card-info > div.card-info-avatarimg:hover img {
-    transform: scale(1.03)
-}
-
-#aside-content > div.card-widget.card-info > div > div.card-info-data > div:nth-child(0) > a > div.headline {
-    font-weight: 700
-}
-
-@media screen and (max-width: 900px) {
-    #aside-content .card-announcement {
-        display: none
-    }
-
-    #aside-content #card-funds {
-        display: none
-    }
-}
-
-#aside-content .card-info #card-info-btn {
-    display: none
-}
-
-.author-info__bottom-group {
-    display: flex;
-    justify-content: space-between;
-    position: absolute;
-    padding: 1.2rem;
-    width: 100%;
-    left: 0;
-    bottom: 0;
-    align-items: center
-}
-
-#aside-content .card-info .card-info-social-icons {
-    margin: 0;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    cursor: pointer
-}
-
-#aside-content .card-info .card-info-social-icons .social-icon {
-    margin: 0 0 0 8px;
-}
-
-#aside-content .card-info .card-info-social-icons i {
-    background: var(--sco-white-op);
-    color: var(--sco-white);
-    font-size: 1rem;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center
-}
-
-#aside-content .card-info .card-info-social-icons i:hover {
-    background: var(--sco-white-op);
-    transform: scale(1.1);
-    color: var(--sco-white);
-    box-shadow: none
-}
-
-#aside-content .card-info .banner-button {
-    height: 40px;
-    width: 118px;
-    border-radius: 20px;
-    justify-content: center
-}
-
-@media screen and (min-width: 1300px) {
-    #aside-content .card-info .card-info-social-icons i {
-        color: var(--sco-white)
-    }
-
-    [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
-        color: var(--sco-white)
-    }
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item:hover {
-    background: var(--sco-post-blockquote-bg);
-    transform: scale(.97)
-}
-
-#aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.headline, #aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.length-num {
-    color: var(--sco-blue)
-}
-
-.announcement_content p {
-    margin: .5rem 0 0 0;
-    line-height: 1.38
-}
-
-#aside-content .item-headline {
-    padding-bottom: 0;
-    margin-left: 8px;
-    font-size: 1em;
-    font-weight: 700;
-    display: flex;
-    align-items: center
-}
-
-#aside-content .item-headline span {
-    margin-left: 4px
-}
-
-#aside-content .card-allinfo .item-headline {
-    display: none
-}
-
-#aside-content .item-headline i {
-    min-width: 20px;
-    font-size: 18px
-}
-
-#aside-content .item-headline + div, #aside-content .item-headline + ul {
-    padding: 0;
-    -webkit-user-select: none
-}
-
-@media screen and (min-width: 1300px) {
-    #aside-content .card-widget {
-        margin-top: 1rem
-    }
-}
-
-@media screen and (max-width: 768px) {
-    #aside-content .card-widget {
-        border-radius: 12px
-    }
-}
-
-#aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center {
-    margin-top: 8px;
-    background: var(--sco-card-btn-bg);
-    border-radius: 8px;
-    transition: .3s !important
-}
-
-#aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center :hover {
-    color: var(--sco-white);
-    background: var(--sco-blue);
-    border-radius: 8px;
-    transition: .3s !important
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item.more span, #aside-content .card-categories ul.card-category-list > .card-category-list-item.more span {
-    transition: .3s !important
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item:hover.more span, #aside-content .card-categories ul.card-category-list > .card-category-list-item.more span {
-    transition: .3s !important
-}
-
-#aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center :hover span {
-    background: 0 0
-}
-
-#web_bg {
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 1;
-    position: fixed;
-    z-index: -999;
-    background: var(--sco-background)
-}
-
-#aside-content .card-tag-cloud a {
-    color: var(--sco-fontcolor) !important;
-    font-size: .8rem;
-    border-radius: 8px
-}
-
-#aside-content .card-tag-cloud a:hover {
-    background: var(--sco-theme);
-    color: var(--sco-white) !important;
-    box-shadow: var(--sco-shadow-theme)
-}
-
-#aside-content .card-tag-cloud a.tags-cloud-more {
-    width: 100%;
-    text-align: center;
-    border-radius: 8px !important;
-    border: var(--style-border);
-    margin-top: 8px;
-    font-size: 16px !important
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
-    color: var(--sco-white);
-    background-color: var(--sco-theme);
-    box-shadow: var(--sco-shadow-theme);
-    border-radius: 8px;
-    padding: .15rem .5rem;
-    border: var(--style-border-hover)
-}
-
-a.extend.next {
-    right: 0
-}
-
-a.extend.prev {
-    left: 0
-}
-
-#pagination {
-    width: 100%
-}
-
-@media screen and (max-width: 768px) {
-    #pagination {
-        margin-bottom: 0;
-        margin-top: 0
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    #pagination {
-        margin-top: .25rem
-    }
-}
-
-.lg-container {
-    display: none
-}
-
-.post-bg #post-cover {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    min-width: 50vw;
-    min-height: 20rem;
-    opacity: .8
-}
-
-.coverdiv {
-    width: 70%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    margin: 0 -20% 0 auto;
-    transform: rotate(10deg) translateY(-10%) scale(2);
-    filter: blur(10px)
-}
-
-.coverdiv.loaded {
-    display: block
-}
-
-.coverdiv:after {
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    box-shadow: 110px -130px 300px 60px var(--sco-main) inset
-}
-
-@media screen and (max-width: 768px) {
-    .coverdiv {
-        margin: 0 0 0 auto;
-        transform: rotate(0) translateY(0) scale(1);
-        filter: blur(0);
-        width: 100%;
-        position: fixed;
-        height: 30rem;
-        z-index: 1
-    }
-
-    .coverdiv:after {
-        box-shadow: 0 0 205px 59px var(--sco-main) inset
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    .coverdiv {
-        width: 70%;
-        height: 100%;
-        position: relative;
-        overflow: hidden;
-        margin: 0 -20% 0 auto;
-        transform: rotate(10deg) translateY(-8%) scale(1.8);
-        filter: blur(10px);
-        opacity: 0
-    }
-
-    .coverdiv.loaded {
-        display: block;
-        opacity: .5;
-        animation: showCover 1s .3s backwards;
-        transform: rotate(10deg) translateY(-10%) scale(2)
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .coverdiv {
-        width: 70%;
-        height: 100%;
-        position: relative;
-        overflow: hidden;
-        margin: 0 -20% 0 auto;
-        transform: rotate(10deg) translateY(-8%) scale(1.8);
-        filter: blur(10px);
-        opacity: 0
-    }
-
-    .coverdiv.loaded {
-        display: block;
-        opacity: .5;
-        animation: showCover 1s .3s backwards;
-        transform: rotate(10deg) translateY(-10%) scale(2)
-    }
-
-    @keyframes showCover {
-        from {
-            opacity: 0;
-            transform: rotate(10deg) translateY(-8%) scale(1.8)
-        }
-
-        to {
-            opacity: .5;
-            transform: rotate(10deg) translateY(-10%) scale(2)
-        }
-    }
-}
-
-
-
-#post-cover-rgb {
-    position: absolute;
-    width: 100% !important;
-    height: 100% !important;
-    background: var(--sco-lighttext)
-}
-
-.layout > div:first-child:not(.recent-posts) {
-    box-shadow: var(--sco-shadow-border);
-    padding: 1rem 2rem;
-    border-radius: 12px;
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    width: calc(100% - 300px);
-    align-self: flex-start;
-    animation: slide-in .6s .1s backwards
-}
-
-#page {
-    box-shadow: none
-}
-
-.post-comment {
-    background: var(--sco-card-bg)
-}
-
-.layout > div:first-child:not(.recent-posts):hover {
-    box-shadow: var(--sco-shadow-border)
-}
-
-@media screen and (max-width: 768px) {
-    .layout > div:first-child:not(.recent-posts) {
-        border-radius: 0;
-        padding: 0 1rem !important;
-        box-shadow: none !important;
-        background: var(--sco-background)
-    }
-
-    .layout {
-        padding: 0 1.5rem
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .layout {
-        padding: 0
-    }
-
-    .layout > div:first-child:not(.recent-posts) {
-        z-index: 10
-    }
-
-    .post .layout > div:first-child:not(.recent-posts) {
-        border-radius: 12px 12px 0 0
-    }
-
-    .post .layout#content-inner {
-        background: var(--sco-main)
-    }
-
-    .page .layout#content-inner {
-        background: var(--sco-background)
-    }
-
-    #aside-content {
-        z-index: 2;
-        background: var(--sco-background);
-        padding: 0 1rem;
-        display: flex;
-        flex-direction: column;
-        width: 100%
-    }
-}
-
-.layout#content-inner {
-    max-width: 1400px
-}
-
-.full_page #post-cover {
-    display: none
-}
-
-
-
-#post-info #post-meta > .meta-secondline > span:first-child {
-    margin-right: .8rem
-}
-
-.meta-secondline > span {
-    opacity: .6;
-    transition: .3s;
-    margin-right: 1.1rem;
-}
-
-.meta-secondline span {
-    display: flex;
-    align-items: center;
-    line-height: 1
-}
-
-@media screen and (max-width: 768px) {
-    .meta-secondline span {
-        line-height: 1.5
-    }
-}
-
-#post-firstinfo {
-    text-align: left;
-    display: flex;
-    white-space: nowrap;
-    -webkit-user-select: none
-}
-
-#post-firstinfo .post-meta__tags {
-    color: var(--sco-white);
-    opacity: .8;
-    margin-right: 8px
-}
-
-#post-firstinfo .post-meta__tags:hover {
-    color: var(--sco-white);
-    opacity: 1
-}
-
-span.post-meta-categories {
-    background-color: var(--sco-white-op);
-    padding: 0 .5rem;
-    border-radius: 8px;
-    line-height: 32px;
-    height: 32px;
-    transition: .3s
-}
-
-span.post-meta-categories:not(:first-child) {
-    margin-left: 8px
-}
-
-span.post-meta-categories:hover {
-    background-color: var(--sco-white)
-}
-
-a.post-meta-categories {
-    color: var(--sco-white);
-    font-size: .7rem;
-    width: 100%;
-    height: 100%;
-    display: flex
-}
-
-span.post-meta-categories:hover a.post-meta-categories {
-    color: var(--sco-main)
-}
-
-.meta-firstline .tag_share {
-    margin-left: 1rem
-}
-
-#post-firstinfo .meta-firstline {
-    display: flex;
-    align-items: center;
-    height: 32px
-}
-
-@media screen and (max-width: 768px) {
-    #post-firstinfo .meta-firstline {
-        margin-bottom: .4rem
-    }
-}
-
-.meta-avatar img {
-    width: 30px;
-    border-radius: 30px;
-    height: 30px
-}
-
-a.post-meta-original {
-    background: var(--sco-white-op) !important;
-    color: var(--sco-white) !important;
-    padding: 0 .5rem;
-    font-size: .7rem;
-    margin: auto;
-    border-radius: 8px;
-    font-weight: 700;
-    line-height: 32px;
-    width: 100%;
-    height: 100%;
-    display: flex
-}
-
-a.post-meta-original:hover {
-    color: var(--sco-main) !important;
-    background: var(--sco-white) !important;
-    border-radius: 8px !important
-}
-
-.meta-avatar img:hover {
-    transform: rotate(360deg)
-}
-
-@media screen and (max-width: 768px) {
-    .meta-share-time {
-        display: none !important
-    }
-
-    #post-info #post-meta {
-        z-index: 1
-    }
-
-    #post-info:after {
-        position: absolute;
-        content: '';
-        width: 100%;
-        height: 100%;
-        bottom: 0;
-        left: 0;
-        box-shadow: 0 -214px 287px 45px var(--sco-main) inset;
-        z-index: 0
-    }
-
-    .meta-secondline {
-        justify-content: center !important
-    }
-
-    .post-meta__tag-list {
-        display: none
-    }
-
-    .typed-cursor {
-        display: none
-    }
-
-    .meta-avatar {
-        display: none !important
-    }
-
-    #post-firstinfo {
-        white-space: nowrap;
-        margin: 0 auto;
-        z-index: 1
-    }
-
-    .meta-firstline .tag_share {
-        display: none
-    }
-}
-
-.post-meta__tag-list::-webkit-scrollbar {
-    display: none
-}
-
-.meta-share-time a:hover {
-    background: 0 0 !important
-}
-
-.meta-share-time .meta-avatar-name {
-    opacity: 1;
-    color: var(--sco-white) !important;
-    font-weight: 700
-}
-
-.meta-share-time {
-    display: flex
-}
-
-.meta-share-time .meta-info {
-    margin: 0 .5rem
-}
-
-.meta-secondline {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center
-}
-
-.meta-avatar {
-    display: flex
-}
-
-.meta-avatar .meta-avatar-name {
-    margin: 0 .5rem
-}
-
-#post-info #post-meta i {
-    font-size: 16px;
-    margin-right: 4px
-}
-
-span.post-meta-pv-cv {
-    margin-left: .8rem
-}
-
-span.post-meta-wechat {
-    margin-right: .8rem;
-    opacity: .6;
-    transition: .3s;
-    cursor: pointer
-}
-
-.post-meta-wechat:hover {
-    opacity: 1
-}
-
-span.post-meta-position {
-    margin-right: .8rem;
-    opacity: .6
-}
-
-#post-info #post-meta .post-meta-label {
-    display: none
-}
-
-#post-info #post-meta .post-meta-icon {
-    margin-right: .4rem
-}
-
-#post-info #post-meta .post-meta-separator {
-    margin: 0 .4rem
-}
-
-.post-meta-pv-cv #busuanzi_value_page_pv {
-    font-weight: 800
-}
-
-#post-meta > div > span.post-meta-wordcount > span.word-count {
-    font-weight: 800
-}
-
-#post-meta > div > span.post-meta-wordcount > span:nth-child(7) {
-    font-weight: 800
-}
-
-#post-firstinfo > div > span.post-meta-categories > a {
-    font-weight: 800
-}
-
-.post-meta-wordcount {
-    opacity: .6;
-    margin-right: .8rem
-}
-
-@media screen and (max-width: 768px) {
-    .post-meta-wordcount {
-        margin-left: 0
-    }
-}
-
-.post-meta-pv-cv {
-    opacity: .6
-}
-
-.post-meta-pv {
-    opacity: .6;
-    margin-right: .8rem
-}
-
-.post-meta-commentcount {
-    opacity: .6;
-    cursor: pointer;
-    transition: .3s
-}
-
-.post-meta-commentcount:hover {
-    opacity: 1
-}
-
-#twikoo-count {
-    font-weight: 800;
-    color: var(--sco-white)
-}
-
-.el-textarea .el-input__count {
-    color: var(--sco-secondtext) !important;
-    -webkit-user-select: none
-}
-
-.post-meta-commentcount i {
-    margin-right: .5rem
-}
-
-.inline-image {
-    display: flex;
-    margin: 8px auto;
-    width: fit-content;
-    justify-content: center
-}
-
-.inline-image a:hover {
-    background: 0 0 !important;
-    box-shadow: none !important
-}
-
-.inline-image img {
-    margin: 0 !important;
-    display: inline-flex;
-}
-
-#post-info .post-title {
-    color: var(--sco-white);
-    font-weight: 700;
-    font-size: 2.3rem;
-    line-height: 1.2;
-    text-align: left;
-    margin: 1rem 0 1rem 0 !important;
-    -webkit-line-clamp: 2;
-    padding: 0;
-    overflow: hidden
-}
-
-@media screen and (max-width: 768px) {
-    #post-info .post-title {
-        font-size: 1.2rem;
-        -webkit-line-clamp: 3;
-        margin: .2rem auto !important;
-        text-align: center;
-        z-index: 1
-    }
-}
-
-#post-meta > div {
-    text-align: left
-}
-
-#post-info #post-meta {
-    color: var(--sco-white);
-    margin-top: .4rem;
-    transition: .3s;
-    display: flex;
-    -webkit-user-select: none
-}
-
-#post-info #post-meta a {
-    text-decoration: none;
-    color: var(--sco-fontcolor);
-    line-height: 1
-}
-
-#post-info #post-meta a:hover {
-    text-decoration: none;
-    color: var(--sco-blue);
-    border-radius: 12px
-}
-
-#article-container h1:before, #article-container h2:before, #article-container h3:before, #article-container h4:before, #article-container h5:before, #article-container h6:before {
-    top: calc(50% - .45rem);
-    content: ''
-}
-
-#article-container h1:hover:before, #article-container h2:hover:before, #article-container h3:hover:before, #article-container h4:hover:before, #article-container h5:hover:before, #article-container h6:hover:before {
-    color: var(--sco-lighttext)
-}
-
-#article-container h1:hover, #article-container h2:hover, #article-container h3:hover, #article-container h4:hover, #article-container h5:hover, #article-container h6:hover {
-    padding-left: 1.3rem
-}
-
-#article-container ul > li:not(.tab):before {
-    border: .21em solid var(--sco-lighttext);
-    background: var(--sco-lighttext)
-}
-
-#article-container ol, #article-container ul {
-    padding: 0
-}
-
-#article-container ul > li:not(.tab):hover:before {
-    border-color: var(--sco-none)
-}
-
-#article-container a {
-    text-decoration: none;
-    border-bottom: 2px solid var(--sco-lighttext);
-    color: var(--sco-fontcolor);
-    font-weight: 700;
-    padding: 0 4px;
-    border-radius: 4px 4px 0 0
-}
-
-#article-container .site-card:hover a:not(.fancybox) {
-    text-decoration: none;
-    border-bottom: 2px solid var(--sco-none);
-    color: var(--sco-white);
-    background: var(--sco-main);
-    box-shadow: var(--sco-shadow-main)
-}
-
-#article-container a.fancybox {
-    border-bottom: 0;
-    padding: 0;
-    margin: auto;
-    display: contents;
-    width: fit-content;
-    -webkit-user-select: none
-}
-
-#article-container a.fancybox img {
-    cursor: zoom-in
-}
-
-.site-card-avatar a.fancybox {
-    padding: 0 !important
-}
-
-#article-container p {
-    margin: 1rem 0;
-    text-align: left;
-    letter-spacing: 1px
-}
-
-#article-container blockquote p {
-    line-height: 1.4;
-    font-size: 15px
-}
-
-#article-container code {
-    color: var(--sco-white);
-    padding: .2rem .4rem;
-    border-radius: 4px;
-    margin: 0 4px;
-    background: var(--sco-pink);
-    line-height: 2;
-    box-shadow: var(--sco-shadow-border)
-}
-
-#article-container code::selection {
-    background: var(--sco-main) !important
-}
-
-.table-wrap {
-    margin: 1rem 0;
-    border-radius: 8px
-}
-
-table td, table th {
-    border: var(--style-border-always)
-}
-
-table thead {
-    background: var(--sco-secondbg)
-}
-
-b, strong {
-    color: var(--sco-lighttext)
-}
-
-#article-container p {
-    font-size: .9rem;
-    line-height: 1.7;
-    font-weight: 400
-}
-
-#article-container.post-content h1, #article-container.post-content h2, #article-container.post-content h3, #article-container.post-content h4 {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-#article-container.post-content h1 {
-    font-size: 1.5rem;
-    line-height: 1.3
-}
-
-#article-container.post-content h2 {
-    font-size: 1.3rem;
-    line-height: 1.3;
-    border-top: 1px dashed var(--sco-theme-op);
-    padding-top: 1.5rem
-}
-
-#article-container.post-content h3 {
-    font-size: 1.1rem;
-    line-height: 1.3
-}
-
-#article-container.post-content h4 {
-    font-size: 1rem;
-    line-height: 1.3
-}
-
-@media screen and (max-width: 768px) {
-    #article-container p {
-        line-height: 1.5
-    }
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin-top: 1rem;
-    padding-top: 0;
-    padding-left: 0 !important;
-    font-weight: 700
-}
-
-#post h2 {
-    margin-top: 1.5rem
-}
-
-#article-container > h1:nth-child(1), #article-container > h2:nth-child(1) {
-    margin: 0
-}
-
-#aside-content #card-toc .toc-content:before {
-    display: none
-}
-
-blockquote {
-    border: var(--style-border-always);
-    background-color: var(--sco-secondbg);
-    color: var(--sco-secondtext);
-    border-radius: 8px;
-    margin: 1rem 0;
-    padding: .5rem .8rem
-}
-
-blockquote p {
-    padding: 0
-}
-
-#article-container .headerlink::before {
-    content: "\e038";
-    font-family: scoicon !important
-}
-
-#article-container .headerlink {
-    float: right;
-    opacity: .08;
-    position: relative;
-    padding: 0;
-    border-style: none;
-    border-radius: 8px !important;
-    line-height: 1;
-    font-size: 1rem
-}
-
-#article-container .headerlink:hover {
-    background: 0 0 !important;
-    opacity: 1;
-    border-bottom: none !important;
-    box-shadow: none !important;
-    background: var(--sco-none);
-    color: var(--sco-lighttext) !important;
-    text-decoration: none
-}
-
-#sidebar {
-    background: var(--sco-maskbg)
-}
-
-@media screen and (max-width: 768px) {
-    #sidebar #sidebar-menus .menus_items li .site-page:hover {
-      background: var(--sco-main);
-      color: var(--sco-white)
-    }
-  
-    #sidebar #sidebar-menus .menus_items li .site-page span:hover {
-      color: var(--sco-white)
-    }
-}
-
-#article-container img {
-    border-radius: 12px;
-    margin-bottom: .5rem;
-    object-fit: cover
-}
-
-#article-container img.error {
-    content: url(https://bu.dusays.com/2023/03/03/6401a79030db5.png)
-}
-
-.doge-inner-player {
-    border-radius: 12px !important
-}
-
-#article-container ol li:before, #article-container ul li:before {
-    background: var(--sco-main);
-    cursor: default
-}
-
-#article-container ol li:hover:before, #article-container ul li:hover:before {
-    transform: rotate(0)
-}
-
-figure {
-    margin-top: .5rem !important
-}
-
-#article-container figure.highlight .highlight-tools {
-    background: var(--sco-secondbg);
-    border-bottom: var(--style-border-always);
-    color: var(--sco-fontcolor)
-}
-
-#article-container .gutter {
-    opacity: .6;
-    user-select: none
-}
-
-#article-container .code-lang {
-    margin-left: 6px
-}
-
-#article-container .highlight-tools .code-lang {
-    text-transform: capitalize;
-    left: 1.9rem
-}
-
-#article-container figure.highlight table::-webkit-scrollbar {
-    color: var(--sco-blue);
-    background: var(--sco-card-bg);
-    height: 8px
-}
-
-#article-container figure.highlight table::-webkit-scrollbar-thumb {
-    background: var(--sco-main-op)
-}
-
-#article-container figure.highlight table::-webkit-scrollbar-thumb:hover {
-    background: var(--sco-main)
-}
-
-#article-container .code-expand-btn i {
-    color: var(--sco-fontcolor);
-    font-size: 14px;
-    line-height: 1;
-    animation: 1.2s ease 0s infinite normal none running code-expand-key
-}
-
-#article-container .code-expand-btn {
-    background: var(--sco-secondbg);
-    transition: .3s;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0);
-    border-top: var(--style-border-always);
-    position: absolute;
-    bottom: 0;
-    z-index: 10;
-    width: 100%;
-    text-align: center;
-    font-size: 16px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 32px
-}
-
-#article-container .code-expand-btn:hover {
-    background: var(--sco-main)
-}
-
-#article-container .code-expand-btn:hover i {
-    color: var(--sco-white)
-}
-
-#readmore-talk {
-    text-align: center;
-    color: var(--sco-lighttext);
-    padding: 8px;
-    border-radius: 12px;
-    background: #f2b94b0c
-}
-
-#article-container iframe {
-    border-radius: 12px !important
-}
-
-.relatedPosts > .relatedPosts-list .cover::after {
-    content: ' ';
-    display: block;
-    position: absolute;
-    z-index: 0;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: url(https://bu.dusays.com/2023/03/03/6401a79030db5.png) 50%;
-    background-size: cover
-}
-
-.relatedPosts > .relatedPosts-list a {
-    display: flex;
-    width: 100%;
-    height: 100%
-}
-
-@media screen and (min-width: 768px) {
-    #post > div.relatedPosts > div.relatedPosts-list > div {
-        -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
-    }
-
-    #post > div.relatedPosts > div.relatedPosts-list > div {
-        border-radius: 12px
-    }
-
-    .relatedPosts > .headline {
-        font-size: .8em
-    }
-
-    @media screen and (max-width: 1300px) {
-        #post > div.relatedPosts > div.relatedPosts-list > div:nth-child(7) {
-            display: none
-        }
-
-        #post > div.relatedPosts > div.relatedPosts-list > div:nth-child(8) {
-            display: none
-        }
-    }
-}
-
-.relatedPosts > .headline {
-    margin-bottom: .8rem;
-    font-weight: 700;
-    font-size: 20px;
-    display: flex;
-    align-items: center
-}
-
-.relatedPosts > .headline span {
-    margin-right: auto;
-    margin-left: 8px
-}
-
-.relatedPosts > .headline a {
-    font-weight: 400
-}
-
-#post .tag_share .post-meta__tags {
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    color: var(--sco-fontcolor);
-    border-radius: 8px;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    height: 40px;
-    padding: 0 .6rem;
-    width: fit-content;
-    font-size: .85em;
-    transition: all .2s ease-in-out 0s
-}
-
-#post .tag_share .post-meta__tags:hover {
-    background: var(--sco-lighttext);
-    box-shadow: var(--sco-shadow-main);
-    color: var(--sco-white)
-}
-
-@media screen and (min-width: 1300px) {
-    #post .tag_share .post-meta__tags {
-        background: var(--sco-card-bg);
-        border: var(--style-border)
-    }
-
-    #post .tag_share .post-meta__tags:hover {
-        border: var(--style-border-hover)
-    }
-}
-
-#post .post-copyright {
-    background: var(--sco-secondbg);
-    border-width: 1px;
-    transition: .3s;
-    position: relative;
-    margin: 80px 0 30px;
-    border-radius: 12px;
-    padding: 34px 0 20px 0;
-    border: var(--style-border-always)
-}
-
-@media screen and (max-width: 768px) {
-    #post .post-copyright {
-        padding: 1rem 1.3rem
-    }
-}
-
-.post-copyright__author_img {
-    width: 66px;
-    height: 66px;
-    margin: auto;
-    border-radius: 66px;
-    overflow: hidden;
-    position: absolute;
-    left: calc(50% - 33px);
-    top: -33px;
-    border: var(--style-border-always);
-    box-shadow: var(--sco-shadow-main)
-}
-
-.post-copyright__author_img img {
-    position: absolute;
-    bottom: 0;
-    left: 0
-}
-
-img.post-copyright__author_img_back {
-    border-radius: 66px;
-    z-index: 10
-}
-
-img.post-copyright__author_img_front {
-    z-index: 20;
-    transform: scale(1.2) translateY(6px)
-}
-
-.post-copyright__author_img:hover img.post-copyright__author_img_front {
-    transform: scale(1) translateY(3px)
-}
-
-.post-copyright__author_img:hover img.post-copyright__author_img_back {
-    transform: scale(.8)
-}
-
-.post-copyright__author_name {
-    text-align: center;
-    font-size: 20px;
-    font-weight: 700;
-    margin-top: 16px;
-    color: var(--sco-fontcolor);
-    line-height: 1
-}
-
-.post-copyright__author_desc {
-    text-align: center;
-    font-size: 14px;
-    color: var(--sco-secondtext);
-    margin-top: 4px
-}
-
-.post-copyright__author {
-    display: flex;
-    align-items: center
-}
-
-.post-copyright__original {
-    background: var(--sco-fontcolor);
-    color: var(--sco-card-bg);
-    padding: .2rem .5rem;
-    font-size: .7rem;
-    border-radius: 8px;
-    margin-right: .5rem;
-    font-weight: 700;
-    line-height: 1.5;
-    white-space: nowrap;
-    -webkit-user-select: none
-}
-
-.post-copyright__original:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-@media screen and (max-width: 768px) {
-    #post .post-copyright {
-        background: var(--sco-card-bg);
-        box-shadow: var(--sco-shadow-border)
-    }
-
-    .post-copyright .post-meta-original {
-        display: none
-    }
-
-    .post-copyright__original {
-        display: none
-    }
-}
-
-.post-copyright-copybtn {
-    margin-left: .5rem;
-    color: var(--sco-fontcolor);
-    opacity: .4;
-    transition: .3s
-}
-
-.post-copyright-copybtn:hover {
-    opacity: 1;
-    transition: .3s
-}
-
-.post-copyright-copybtn i {
-    font-size: 16px
-}
-
-#post .post-copyright .post-copyright-info a {
-    padding: 0;
-    color: var(--sco-fontcolor);
-    font-weight: 700
-}
-
-#post .post-copyright .post-copyright__notice .post-copyright-info a {
-    padding: 0 4px
-}
-
-#post .post-copyright .post-copyright-info {
-    padding-left: 0;
-    color: var(--sco-secondtext);
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    text-align: center
-}
-
-#post .post-copyright .post-copyright-title {
-    padding-left: 0;
-    color: var(--sco-fontcolor);
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    font-size: 1rem;
-    font-weight: 700
-}
-
-#post .post-copyright .post-copyright-title:hover {
-    color: var(--sco-lighttext)
-}
-
-#post > div.post-copyright > div.post-copyright__author > span > span {
-    padding: 0;
-    color: var(--sco-fontcolor);
-    font-weight: 700;
-    font-size: 1rem;
-    line-height: 1.38;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical
-}
-
-@media screen and (max-width: 768px) {
-    #post > div.post-copyright > div.post-copyright__author > span > span {
-        -webkit-line-clamp: 3
-    }
-
-    #post .post-copyright .post-copyright-info {
-        -webkit-line-clamp: 2
-    }
-
-    #post .post-copyright .post-copyright-title {
-        -webkit-line-clamp: 3;
-        line-height: 1.2
-    }
-}
-
-#post > div.post-copyright > div.post-copyright__type {
-    line-height: 16px;
-    display: flex;
-    align-items: center;
-    margin-top: 4px
-}
-
-#post > div.post-copyright > div.post-copyright__type > span > a {
-    font-size: 14px;
-    opacity: .6;
-    line-height: 16px
-}
-
-#post > div.post-copyright > div.post-copyright__type > span > a:hover {
-    opacity: 1;
-    background: 0 0
-}
-
-#post-copyright-url a {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical
-}
-
-#post > div.post-copyright > div.post-copyright__notice {
-    font-size: 12px;
-    margin: .5rem 0
-}
-
-#post .post-copyright:before {
-    display: none
-}
-
-.post-reward .reward-button {
-    background: var(--sco-red);
-    color: var(--sco-white);
-    padding: 0 16px;
-    height: 40px;
-    line-height: 39px;
-    box-shadow: var(--sco-shadow-red);
-    display: inline-block;
-    cursor: pointer;
-    transition: all .4s ease 0s
-}
-
-.post-reward:hover .reward-button {
-    color: var(--sco-white);
-    background: var(--sco-theme);
-    box-shadow: none
-}
-
-.share-button .fa-qrcode:before {
-    font-size: 1rem
-}
-
-.post-qr-code-img {
-    box-shadow: var(--sco-shadow-lightblack);
-    border-radius: 12px;
-    border: var(--style-border-always)
-}
-
-.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
-    padding-top: 0;
-    margin-top: -8px;
-    margin-bottom: 8px
-}
-
-.post-reward .reward-main .reward-all {
-    border-radius: 12px;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    padding: .8rem;
-    display: flex;
-    box-shadow: var(--sco-shadow-border);
-    flex-direction: column;
-    align-items: center
-}
-
-.reward-dec {
-    font-size: .6rem
-}
-
-.reward-text {
-    margin-bottom: 0;
-    font-weight: 700
-}
-
-a.reward-main-btn {
-    background: var(--sco-secondbg);
-    color: var(--sco-fontcolor);
-    display: flex;
-    flex-direction: column;
-    border-radius: 12px;
-    padding: 4px 0;
-    border: var(--style-border-always);
-    margin: 8px;
-    width: 100%
-}
-
-a.reward-main-btn:hover {
-    color: var(--sco-white);
-    background: var(--sco-red);
-    background-image: url(https://bu.dusays.com/2023/11/01/6541f7aeb5752.gif);
-    box-shadow: var(--sco-shadow-red)
-}
-
-.reward-title {
-    font-weight: 700;
-    color: var(--sco-red)
-}
-
-.reward-link.mode {
-    background: var(--sco-green);
-    color: var(--sco-white);
-    padding: 0 16px;
-    height: 40px;
-    line-height: 39px;
-    box-shadow: var(--sco-shadow-green);
-    border-radius: 8px;
-    margin-left: .5rem;
-    text-align: center;
-    transition: .3s
-}
-
-.reward-link.mode a {
-    color: var(--sco-white)
-}
-
-.reward-link.mode i {
-    margin-right: 4px
-}
-
-.reward-link.mode:hover {
-    background: var(--sco-theme);
-    box-shadow: none
-}
-
-#quit-box {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, .2);
-    top: 0;
-    left: 0;
-    display: none;
-    z-index: 101;
-    margin: 0 !important
-}
-
-.post-tools-left #quit-box {
-    display: none
-}
-
-@media screen and (max-width: 768px) {
-    #quit-box {
-        z-index: 109;
-        height: calc(100vh - 380px);
-    }
-}
-
-#pagination .next-post, #pagination .prev-post, .next-post.pull-right, .prev-post.pull-left {
-    background: var(--sco-secondbg)
-}
-
-@media screen and (min-width: 768px) {
-    #pagination .next-post a {
-        border-left: var(--sco-main-op);
-        border-left-width: 1px;
-        border-left-style: solid;
-        display: flex;
-        align-items: flex-start;
-        height: 150px
-    }
-
-    #pagination .next-post.pull-full a {
-        border-left-width: 0
-    }
-
-    #pagination .prev-post a {
-        border-right: var(--sco-main-op);
-        border-right-width: 1px;
-        border-right-style: solid
-    }
-
-    #pagination .pagination-info {
-        padding: 1rem 1.5rem 1rem 1.5rem;
-        position: relative;
-        display: flex;
-        top: 0;
-        transform: none;
-        flex-direction: column;
-        justify-content: center;
-        margin: auto;
-        height: 100%
-    }
-
-    #pagination .next-post a:hover, #pagination .prev-post a:hover {
-        background: var(--sco-main)
-    }
-
-    #pagination .next-post a:hover div, #pagination .prev-post a:hover div {
-        color: var(--sco-white) !important
-    }
-}
-
-@media screen and (max-width: 768px) {
-    #pagination .next-post a:hover, #pagination .prev-post a:hover {
-        background: var(--sco-none)
-    }
-}
-
-#pagination img.next-cover, #pagination img.prev-cover {
-    opacity: .15;
-    transform: scale(1.03);
-    transition: .3s;
-    filter: blur(0);
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d
-}
-
-#pagination .next-post:hover img.next-cover, #pagination .next-post:hover img.prev-cover, #pagination .prev-post:hover img.next-cover, #pagination .prev-post:hover img.prev-cover {
-    opacity: .25;
-    transform: scale(1.03);
-    filter: blur(5px)
-}
-
-#pagination .next-post .label, #post #pagination .prev-post .label {
-    color: var(--sco-fontcolor)
-}
-
-#pagination .next_info, #post #pagination .prev_info {
-    color: var(--sco-fontcolor);
-    font-weight: 700;
-    -webkit-line-clamp: 2;
-    white-space: normal;
-    line-height: 1.3;
-    font-size: .9rem;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    margin-bottom: 10px
-}
-
-#post #pagination {
-    overflow: hidden;
-    position: inherit;
-    border: var(--style-border-always)
-}
-
-#pagination.pagination-post {
-    background: var(--sco-card-bg)
-}
-
-@media screen and (min-width: 1300px) {
-    #post #pagination {
-        position: fixed;
-        width: 300px;
-        bottom: -100px;
-        right: 20px;
-        height: fit-content;
-        transition: cubic-bezier(.42, 0, .3, 1.11) .3s;
-        border: var(--style-border);
-        border-radius: 12px;
-        overflow: hidden;
-        cursor: pointer;
-        opacity: 0;
-        z-index: 1002
-    }
-
-    #post #pagination.show-window {
-        bottom: 20px;
-        opacity: 1
-    }
-
-    #post #pagination:hover {
-        border: var(--style-border-hover)
-    }
-
-    #pagination .next-post a {
-        border: none;
-        height: fit-content;
-        padding: .5rem 0
-    }
-
-    #pagination.pagination-post {
-        border-radius: 0
-    }
-
-    #pagination .next_info, #post #pagination .prev_info {
-        font-size: 14px;
-        font-weight: 400;
-        margin-bottom: 0
-    }
-
-    #pagination .pagination-info {
-        padding: .5rem 1rem;
-        transform: none
-    }
-
-    #post #pagination {
-        background: 0 0
-    }
-
-    #pagination .next-post, #pagination .prev-post, .next-post.pull-right, .prev-post.pull-left {
-        background: var(--sco-maskbgdeep);
-        -webkit-backdrop-filter: blur(5px);
-        backdrop-filter: blur(5px);
-        transform: translateZ(0)
-    }
-
-    .prev-post.pull-left {
-        display: none
-    }
-
-    .next-post.pull-right {
-        width: 100% !important
-    }
-
-    #pagination .next-post .pagination-info {
-        text-align: left;
-        position: relative
-    }
-
-    #pagination .next-post .label, #post #pagination .prev-post .label {
-        color: var(--sco-fontcolor);
-        font-weight: 700;
-        font-size: 12px;
-        margin-bottom: .5rem;
-        border-bottom: var(--style-border);
-        line-height: 1;
-        padding-bottom: .5rem
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .prev-post.pull-left {
-        border-bottom: var(--style-border-always)
-    }
-
-    #post #pagination {
-        border-radius: 12px;
-        border: var(--style-border-always);
-        box-shadow: var(--sco-shadow-border)
-    }
-
-    #pagination .next-post .label, #post #pagination .prev-post .label {
-        text-align: left
-    }
-
-    #pagination .next_info, #post #pagination .prev_info {
-        text-align: left
-    }
-
-    #pagination .next-post, #pagination .prev-post, .next-post.pull-right, .prev-post.pull-left {
-        background: var(--sco-card-bg)
-    }
-}
-
-@media screen and (max-width: 768px) {
-    #pagination .page-number {
-        display: none
-    }
-
-    #pagination .pagination .space {
-        display: none
-    }
-
-    #pagination .pagination .extend {
-        width: 100%;
-        height: 2.5rem;
-        margin: .2rem 1rem 1rem 1rem;
-        border-radius: 12px;
-        line-height: 2.5rem;
-        background: var(--sco-card-bg);
-        border: var(--style-border-always);
-        box-shadow: var(--sco-shadow-border)
-    }
-
-    #pagination .pagination .extend i {
-        display: none
-    }
-
-    #pagination .pagination .extend:hover {
-        background: var(--sco-theme);
-        color: var(--sco-white)
-    }
-
-    #pagination .pagination {
-        background: var(--sco-background);
-        transition: .3s;
-        display: flex
-    }
-}
-
-@media screen and (min-width: 768px) {
-    #pagination .page-number {
-        width: 2rem;
-        background: var(--sco-card-bg);
-        height: 2rem;
-        line-height: calc(2rem - 2px);
-        border-radius: 8px !important;
-        margin: 0 .3rem;
-        box-shadow: var(--sco-shadow-border);
-        border: var(--style-border);
-        transition: .3s
-    }
-
-    #pagination .page-number.current {
-        background: var(--sco-theme);
-        border: var(--style-border-hover);
-        box-shadow: var(--sco-shadow-theme)
-    }
-
-    #pagination .page-number.current:hover {
-        background: var(--sco-theme);
-        box-shadow: var(--sco-shadow-theme);
-        color: var(--sco-white)
-    }
-
-    #pagination .page-number:hover {
-        color: var(--sco-theme);
-        border: var(--style-border-hover);
-        box-shadow: var(--sco-shadow-main)
-    }
-
-    #pagination a.extend.next:hover, #pagination a.extend.prev:hover {
-        color: var(--sco-theme);
-        border: var(--style-border-hover);
-        box-shadow: var(--sco-shadow-main)
-    }
-
-    #pagination span.space {
-        margin: 0 .3rem
-    }
-
-    #pagination a.extend.next, #pagination a.extend.prev {
-        width: 4rem;
-        height: 2rem;
-        line-height: 1.9rem;
-        border-radius: 8px !important;
-        background: var(--sco-card-bg);
-        box-shadow: var(--sco-shadow-border);
-        position: absolute;
-        border: var(--style-border);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        transition: .3s
-    }
-
-    #pagination a.extend.next i, #pagination a.extend.prev i {
-        transition: .3s
-    }
-
-    #pagination a.extend.next {
-        overflow: hidden
-    }
-
-    #pagination a.extend.next .pagination_tips_next {
-        margin-left: -32px;
-        transition: .3s;
-        opacity: 0
-    }
-
-    #pagination a.extend.next:hover .pagination_tips_next {
-        margin-left: 2px;
-        opacity: 1;
-        white-space: nowrap
-    }
-
-    #pagination a.extend.prev .pagination_tips_prev {
-        margin-right: -32px;
-        transition: .3s;
-        opacity: 0
-    }
-
-    #pagination a.extend.prev:hover .pagination_tips_prev {
-        margin-right: 2px;
-        opacity: 1;
-        white-space: nowrap
-    }
-
-    #pagination {
-        overflow: visible
-    }
-
-    #pagination .pagination {
-        position: relative;
-        display: flex;
-        justify-content: center
-    }
-}
-
-.relatedPosts-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    flex-direction: column
-}
-
-.relatedPosts > .relatedPosts-list > div {
-    background: var(--sco-secondbg);
-    border: var(--style-border);
-    transition: .3s;
-    cursor: pointer;
-    overflow: hidden;
-    width: 100%;
-    margin-bottom: 8px
-}
-
-.relatedPosts > .relatedPosts-list > div:hover {
-    background: var(--sco-main)
-}
-
-@media screen and (max-width: 768px) {
-    .relatedPosts {
-        display: none
-    }
-
-    .relatedPosts > .relatedPosts-list > div {
-        border-radius: 4px
-    }
-}
-
-.relatedPosts > .relatedPosts-list > div:hover a .title {
-    color: var(--sco-white)
-}
-
-.relatedPosts > .relatedPosts-list .content .title {
-    color: var(--sco-fontcolor);
-    font-weight: 700;
-    line-height: 1.5;
-    -webkit-line-clamp: 4;
-    font-size: .9rem;
-    text-align: left;
-    overflow: hidden
-}
-
-.relatedPosts > .relatedPosts-list .content .date {
-    color: var(--sco-fontcolor);
-    display: none
-}
-
-#post > hr {
-    display: none
-}
-
-.post-tips {
-    color: var(--sco-gray);
-    font-size: 14px;
-    position: absolute;
-    bottom: 1rem;
-    left: 2rem
-}
-
-.post-tips a {
-    color: var(--sco-gray) !important;
-    border: none !important
-}
-
-.post-tips a:hover {
-    color: var(--sco-main) !important
-}
-
-@media screen and (max-width: 768px) {
-    .post-tips {
-        left: 1rem
-    }
-}
-
-div#post-comment {
-    margin-top: 2rem
-}
-
-#post-comment > div.comment-head > div.comment-privacy {
-    display: block;
-    justify-content: space-between;
-    margin-left: 8px;
-    font-size: 13px
-}
-
-#post-comment > div.comment-head > div.comment-privacy a:hover {
-    color: var(--sco-main)
-}
-
-#post-comment .comment-tips {
-    background-color: rgba(103, 194, 58, .9);
-    border: var(--style-border-always);
-    border-color: var(--sco-green);
-    color: var(--sco-white);
-    border-radius: 8px 8px 0 0;
-    padding: 8px 12px;
-    margin-top: .5rem;
-    display: none;
-    width: 100%;
-    position: absolute;
-    top: 50px;
-    z-index: 1000;
-    opacity: 1;
-    transition: .3s
-}
-
-#post-comment .comment-tips:hover {
-    opacity: 0
-}
-
-.tk-content img {
-    max-height: 1100px !important;
-    max-width: 100% !important;
-    border-radius: 12px
-}
-
-#post-comment .comment-tips.show {
-    display: flex;
-    font-weight: 700
-}
-
-.el-input--small .el-input__inner {
-    padding: 8px
-}
-
-.tk-avatar {
-    width: 32px !important;
-    height: 32px !important;
-    box-shadow: var(--sco-shadow-border);
-    margin-right: 16px !important
-}
-
-.tk-avatar.tk-has-avatar {
-    width: 32px !important;
-    height: 32px !important;
-    border-radius: 32px !important
-}
-
-.tk-row .tk-avatar {
-    display: none
-}
-
-.tk-avatar .tk-avatar-img:hover {
-    transform: rotate(360deg)
-}
-
-img.tk-avatar-img {
-    height: 32px !important;
-    border-radius: 32px;
-    border: var(--style-border-always)
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
-    content: '输入QQ号会自动获取昵称和头像'
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
-    content: '收到回复将会发送到你的邮箱'
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
-    content: '可以通过昵称访问你的网站'
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before {
-    display: block;
-    animation: commonTipsIn .3s
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
-    display: block;
-    animation: commonTriangleIn .3s
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
-    display: none;
-    position: absolute;
-    top: -60px;
-    white-space: nowrap;
-    border-radius: 10px;
-    left: 50%;
-    transform: translate(-50%);
-    padding: 14px 18px;
-    background: #444;
-    color: #fff;
-    z-index: 100
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
-    display: none;
-    content: '';
-    position: absolute;
-    border: 12px solid transparent;
-    border-top-color: #444;
-    left: 50%;
-    transform: translate(-50%, -46px)
-}
-
-.tk-nick {
-    font-size: 1rem !important;
-    line-height: 32px
-}
-
-.el-input-group__append, .el-input-group__prepend {
-    background-color: var(--sco-card-bg) !important;
-    color: var(--sco-fontcolor) !important;
-    border-color: var(--sco-card-border) !important;
-    border: var(--style-border-always) !important;
-    font-weight: 700
-}
-
-.el-input__inner {
-    background: var(--sco-secondbg) !important;
-    border: 1px solid var(--sco-card-border) !important;
-    color: var(--sco-fontcolor) !important;
-    padding-left: 8px
-}
-
-.page .el-input__inner {
-    background: var(--sco-card-bg) !important
-}
-
-.el-input__inner:focus {
-    border: 1px solid var(--sco-main) !important
-}
-
-.el-textarea__inner {
-    background: var(--sco-secondbg) !important;
-    color: var(--sco-fontcolor) !important;
-    border-radius: 12px !important;
-    min-height: 100px !important;
-    padding: 16px 16px 40px 16px !important;
-    border: var(--style-border-always) !important;
-    box-shadow: none !important
-}
-
-@media screen and (max-width: 768px) {
-    .el-textarea__inner {
-        border-radius: 4px !important;
-        background: var(--sco-card-bg) !important
-    }
-}
-
-#page .el-textarea__inner {
-    background: var(--sco-card-bg) !important;
-    box-shadow: var(--sco-shadow-border)
-}
-
-.el-textarea__inner:focus {
-    border: var(--style-border-hover-always) !important;
-    box-shadow: var(--sco-shadow-main)
-}
-
-#page .tk-meta-input .el-input {
-    box-shadow: var(--sco-shadow-border)
-}
-
-#twikoo .tk-row .tk-col {
-    flex-direction: column-reverse !important
-}
-
-#twikoo > div.tk-comments > div.tk-comments-container > div.tk-comments-title > span:nth-child(1) {
-    display: none !important
-}
-
-.el-loading-mask {
-    background-color: none !important
-}
-
-.tk-tag {
-    margin-left: 4px
-}
-
-.tk-tag-green {
-    border-radius: 4px !important;
-    border: 0 solid #e1f3d8 !important;
-    font-size: .5rem !important
-}
-
-[data-theme=dark] .tk-tag-green {
-    background-color: #67c23a21 !important
-}
-
-.tk-tag-yellow {
-    border-radius: 4px !important;
-    border: 0 solid #e1f3d8 !important;
-    font-size: .5rem !important
-}
-
-[data-theme=dark] .tk-tag-green {
-    background-color: #c0c23a21 !important
-}
-
-.tk-tag-red {
-    border-radius: 4px !important;
-    border: 0 solid #f3d8d8 !important;
-    font-size: .5rem !important
-}
-
-[data-theme=dark] .tk-tag-red {
-    background-color: #c23a3a21 !important
-}
-
-.el-button {
-    background-color: var(--sco-fontcolor) !important;
-    border: 0 solid var(--sco-main) !important;
-    color: var(--sco-background) !important;
-    border-radius: 8px !important
-}
-
-.el-button:hover {
-    background: var(--sco-main) !important;
-    color: var(--sco-white) !important
-}
-
-.el-button.tk-preview {
-    display: none !important
-}
-
-#twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > a {
-    display: none !important
-}
-
-#twikoo {
-    z-index: 102
-}
-
-.tk-meta {
-    display: flex;
-    align-items: center
-}
-
-.twikoo-info {
-    color: var(--sco-secondtext)
-}
-
-.tk-action .tk-action-link:first-child {
-    display: none
-}
-
-.tk-action-link {
-    color: var(--sco-lighttext) !important;
-    cursor: pointer;
-    -webkit-user-select: none
-}
-
-.tk-action-icon svg {
-    fill: var(--sco-lighttext) !important
-}
-
-button.el-button.tk-cancel.el-button--default.el-button--small {
-    background: var(--sco-secondbg) !important;
-    border-radius: 8px !important;
-    color: var(--sco-fontcolor) !important
-}
-
-.tk-submit-action-icon.__markdown {
-    display: none
-}
-
-.tk-comments .el-button--primary {
-    border-color: var(--sco-fontcolor) !important;
-    color: var(--sco-card-bg) !important;
-    border-radius: 4px !important;
-    box-shadow: var(--sco-shadow-black);
-    transition: .3s;
-    width: 5rem;
-    position: absolute;
-    top: -53px;
-    right: 0;
-    margin-left: .5rem !important;
-    height: 32px
-}
-
-.tk-comments .el-button--primary.is-disabled, .tk-comments .el-button--primary.is-disabled:active, .tk-comments .el-button--primary.is-disabled:focus, .tk-comments .el-button--primary.is-disabled:hover {
-    opacity: .2
-}
-
-.tk-row-actions-start {
-    position: absolute;
-    top: -100px;
-    left: 17px
-}
-
-@media screen and (max-width: 768px) {
-    .tk-submit .el-button--primary {
-        width: 5rem;
-        height: 132px;
-        top: -161px
-    }
-
-    .tk-row-actions-start {
-        top: -210px
-    }
-}
-
-.tk-comments-title {
-    position: absolute;
-    bottom: 0;
-    left: 0
-}
-
-.tk-extras {
-    margin-top: .5rem;
-    padding-bottom: .5rem
-}
-
-.tk-icon.__comments:first-child {
-    display: none
-}
-
-.tk-icon.__comments {
-    margin-left: 0 !important
-}
-
-.tk-row.actions {
-    margin-bottom: .5rem !important;
-    margin-left: 0 !important;
-    margin-top: .5rem !important;
-    justify-content: space-around !important
-}
-
-.tk-meta-input {
-    position: relative !important;
-    margin-top: .8rem;
-    width: calc(100% - 5.5rem)
-}
-
-#post-comment blockquote {
-    background: var(--sco-secondbg);
-    border: var(--style-border);
-    box-shadow: none;
-    margin: 0 0 .5rem;
-    font-size: .6rem;
-    color: var(--sco-secondtext);
-    border-radius: 8px
-}
-
-.tk-content .tk-owo-emotion {
-    width: 3em;
-    margin: 0 2px 0 2px
-}
-
-.OwO .OwO-body .OwO-bar .OwO-packages li {
-    line-height: 45px !important;
-}
-
-.OwO .OwO-body {
-    z-index: 102;
-    width: 500px
-}
-
-#owo-big {
-    position: fixed;
-    align-items: center;
-    background-color: var(--sco-card-bg);
-    border: var(--style-border-always);
-    border-radius: 10px;
-    z-index: 9999;
-    display: none;
-    transform: translate(0, -105%);
-    overflow: hidden;
-    animation: owoIn .3s cubic-bezier(.42, 0, .3, 1.11);
-    padding: 1rem
-}
-
-#owo-big img {
-    width: 100%
-}
-
-.tk-owo-emotion, .twikoo .OwO-item img {
-    pointer-events: none
-}
-
-@media screen and (max-width: 768px) {
-    .OwO .OwO-body {
-        width: 300px
-    }
-}
-
-.tk-extra {
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    padding: 1px 5px 1px 2px;
-    border-radius: 8px;
-    margin-right: 4px !important;
-    color: var(--sco-secondtext) !important;
-    display: inline !important;
-    margin-top: 6px !important;
-    font-size: .5rem
-}
-
-.tk-extra .tk-icon {
-    display: none
-}
-
-.tk-expand {
-    background: var(--sco-card-bg) !important;
-    color: var(--sco-fontcolor) !important;
-    border: var(--style-border-always);
-    box-shadow: var(--sco-shadow-border);
-    border-radius: 12px;
-    -webkit-user-select: none
-}
-
-.tk-expand:hover {
-    background: var(--sco-theme) !important;
-    color: var(--sco-white) !important
-}
-
-.tk-time {
-    color: var(--sco-secondtext) !important;
-    font-size: .6rem;
-    margin-left: .5rem
-}
-
-.tk-comments-container > .tk-comment {
-    margin-top: 0 !important;
-    margin-bottom: .5rem !important;
-    background: var(--sco-card-bg);
-    transition: .3s;
-    border-radius: 12px;
-    padding: .5rem 0 0;
-    border: none;
-    border-top: var(--style-border-dashed)
-}
-
-#page .tk-comments-container > .tk-comment {
-    padding: 1rem 1rem 1.5rem;
-    border: var(--style-border);
-    border-top: var(--style-border);
-    box-shadow: var(--sco-shadow-border)
-}
-
-@media screen and (max-width: 768px) {
-    .tk-comments-container > .tk-comment {
-        padding: 1rem;
-        border: var(--style-border-always);
-        box-shadow: var(--sco-shadow-border)
-    }
-
-    .tk-icon.__comments {
-        left: .5rem
-    }
-}
-
-.tk-icon {
-    position: absolute
-}
-
-#post-comment .comment-head {
-    font-size: .8em !important;
-    margin-bottom: .5rem;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    position: relative
-}
-
-.comment-randomInfo {
-    margin-left: auto;
-    font-size: 13px
-}
-
-.comment-randomInfo:hover a {
-    color: var(--sco-theme)
-}
-
-.tk-comments-no {
-    display: none !important
-}
-
-.tk-comments-container {
-    min-height: 0 !important;
-    margin-top: .5rem
-}
-
-.tk-replies > .tk-comment {
-    background: var(--sco-card-bg);
-    border-top: var(--style-border-dashed);
-    border-radius: 12px;
-    transition: .3s;
-    padding: 1rem 0 0;
-    margin-top: 0
-}
-
-.tk-content p {
-    margin: 0 !important
-}
-
-.tk-replies .tk-content span:first-child {
-    font-size: .5rem;
-    color: var(--sco-secondtext)
-}
-
-.img-alt {
-    font-size: 12px;
-    margin: 0;
-    color: var(--sco-secondtext)
-}
-
-.long-img .img-alt {
-    display: none
-}
-
-.long-img img {
-    border-radius: 0 !important;
-    margin: 0 !important
-}
-
-@media screen and (min-width: 768px) {
-    #pagination.pagination-post {
-        border-radius: 12px;
-        margin-top: 1rem
-    }
-
-    .relatedPosts {
-        margin-top: 1rem
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    #pagination.pagination-post {
-        border-radius: 0;
-        margin-top: 0
-    }
-}
-
-.post-tools {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-    margin-top: 8px;
-    flex-wrap: wrap;
-    -webkit-user-select: none
-}
-
-.post-reward {
-    margin-top: 0;
-    display: flex;
-    justify-content: center
-}
-
-.post-reward:hover > .reward-main {
-    display: none
-}
-
-.post-reward .reward-main {
-    z-index: 1003
-}
-
-.tk-meta-input .el-input .el-input-group__prepend {
-    -webkit-user-select: none
-}
-
-@media screen and (min-width: 768px) {
-    .post-reward:hover > .reward-main {
-        display: flex !important;
-        justify-content: left
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .post-reward .reward-main {
-        justify-content: center !important;
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 1003;
-        width: 100%;
-        margin: auto;
-        padding: 0
-    }
-
-    .post-reward .reward-main .reward-all {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-        padding: 30px 0 60px 0;
-        border-radius: 12px 12px 0 0
-    }
-
-    #post .tag_share .post-meta__tags {
-        margin: 0 .5rem 0 0
-    }
-
-    a.reward-main-btn {
-        margin: 4px auto
-    }
-
-    .tk-meta-input .el-input .el-input-group__prepend {
-        padding: 0 .3rem !important
-    }
-
-    .tk-meta-input {
-        display: flex;
-        flex-direction: column;
-        top: 0;
-        position: inherit !important
-    }
-
-    .tk-meta-input .el-input {
-        margin-left: 0 !important;
-        width: 100% !important;
-        margin-bottom: 8px
-    }
-
-    .tk-icon {
-        position: absolute;
-        right: 0
-    }
-}
-
-.post-tools-left {
-    white-space: nowrap;
-    display: flex;
-    text-overflow: ellipsis;
-    flex-wrap: wrap
-}
-
-.post-tools-right {
-    padding-right: 0;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    flex-wrap: wrap
-}
-
-@media screen and (max-width: 768px) {
-    .post-tools-left > div {
-        margin: 8px
-    }
-
-    .post-tools-left {
-        white-space: nowrap;
-        display: flex;
-        text-overflow: ellipsis;
-        justify-content: center;
-        width: 100%
-    }
-
-    .post-tools-right {
-        margin-top: 1rem;
-        width: 100%;
-        justify-content: center
-    }
-}
-
-.post-reward .reward-main .reward-all:after {
-    display: none
-}
-
-.reward-group {
-    display: flex;
-    margin-top: .5rem
-}
-
-.post-reward .reward-main .reward-all .reward-item:first-child img {
-    border-color: var(--sco-green)
-}
-
-.post-reward .reward-main .reward-all .reward-item:last-child img {
-    border-color: var(--sco-blue)
-}
-
-.share-link {
-    margin-left: .5rem;
-    display: flex;
-    justify-content: center;
-    position: relative;
-    text-align: center
-}
-
-.share-button {
-    background: var(--sco-card-btn-bg);
-    color: var(--sco-fontcolor);
-    border-radius: 8px;
-    cursor: pointer;
-    transition: .3s;
-    width: 56px;
-    height: 40px
-}
-
-.share-button i {
-    line-height: 40px
-}
-
-.share-button i.fab {
-    line-height: 42px
-}
-
-@media screen and (min-width: 768px) {
-    .share-button {
-        background: var(--sco-card-bg);
-        border: var(--style-border)
-    }
-
-    .share-button i {
-        line-height: 38px
-    }
-
-    .share-button i.fab {
-        line-height: 40px
-    }
-}
-
-.share-button:hover {
-    background: var(--sco-theme);
-    border-color: var(--sco-theme);
-    color: var(--sco-white);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-blue)
-}
-
-.share-link.weibo:hover .share-button {
-    background: var(--sco-red);
-    border-color: var(--sco-red);
-    box-shadow: var(--sco-shadow-red)
-}
-
-.share-link.mobile:hover .share-button {
-    background: var(--sco-green);
-    border-color: var(--sco-green);
-    box-shadow: var(--sco-shadow-green);
-    color: var(--sco-white)
-}
-
-.share-main {
-    position: absolute;
-    bottom: 40px;
-    z-index: 100;
-    padding-bottom: 15px;
-    opacity: 0;
-    pointer-events: none;
-    transition: .3s;
-    transform: translateY(8px)
-}
-
-.share-main-all {
-    padding: 12px;
-    border-radius: 12px;
-    background: var(--sco-background);
-    animation: donate_effcet .3s .1s ease both;
-    flex-direction: column;
-    border: var(--style-border-always)
-}
-
-#qrcode {
-    width: 150px;
-    height: 150px;
-    min-width: 150px;
-    min-height: 150px;
-    background: var(--sco-white);
-    padding: 8px;
-    border-radius: 8px;
-    margin-bottom: 8px;
-    border: var(--style-border-always)
-}
-
-.share-link:hover .share-main {
-    opacity: 1;
-    transform: translateY(0)
-}
-
-.share-qrcode {
-    display: flex;
-    justify-content: center
-}
-
-@media screen and (max-width: 768px) {
-    .share-link.mobile {
-        display: none
-    }
-
-    .share-button {
-        background: var(--sco-card-bg);
-        border: var(--style-border-always);
-        box-shadow: var(--sco-shadow-border)
-    }
-}
-
-#article-container figure.highlight {
-    border-radius: 8px 8px 4px 4px
-}
-
-#article-container figure.highlight .gutter pre {
-    color: var(--sco-secondtext);
-    background: var(--sco-secondbg);
-    border-right: var(--style-border-always);
-    padding-right: .5rem;
-    padding-left: .5rem;
-    text-align: right
-}
-
-#article-container figure.highlight figcaption a {
-    color: #a9a9a9 !important
-}
-
-#article-container .highlight:not(.js-file-line-container) {
-    background-color: var(--sco-card-bg) !important;
-    color: var(--sco-fontcolor);
-    border: var(--style-border-always);
-    overflow: hidden
-}
-
-#article-container figure.highlight pre span::selection {
-    background: var(--sco-main) !important;
-    color: var(--sco-white) !important
-}
-
-.OwO .OwO-body {
-    border: var(--style-border-always) !important;
-    border-radius: 8px !important;
-    overflow: hidden;
-    background-color: var(--sco-maskbg) !important;
-    backdrop-filter: saturate(180%) blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    transform: translateZ(0)
-}
-
-.OwO .OwO-body .OwO-bar {
-    border-top: none !important
-}
-
-.OwO .OwO-body .OwO-items .OwO-item:hover {
-    box-shadow: var(--sco-shadow-lightblack) !important;
-    border-radius: 8px
-}
-
-#twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > div > div.tk-action-icon.OwO.OwO-open > div.OwO-body > div > ul > li > span {
-    line-height: 48px;
-    font-size: 28px
-}
-
-.OwO .OwO-body .OwO-bar .OwO-packages li {
-    margin-right: 0 !important;
-    height: 48px;
-    transition: .3s
-}
-
-.OwO .OwO-body .OwO-bar .OwO-packages li:hover {
-    transition: .3s
-}
-
-.OwO-packages {
-    background: var(--sco-background);
-    padding-left: 8px !important
-}
-
-.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active {
-    background: var(--sco-secondbg) !important
-}
-
-.OwO .OwO-body .OwO-items-show {
-    margin: 12px 8px !important;
-    min-height: 197px
-}
-
-#page .category-lists .category-title {
-    display: none
-}
-
-.article-sort-item-title {
-    line-height: 1.3;
-    -webkit-line-clamp: 1
-}
-
-@media screen and (max-width: 768px) {
-    .article-sort-item-title {
-        -webkit-line-clamp: 2
-    }
-}
-
-#page {
-    background: 0 0;
-    border: none;
-    padding: 0
-}
-
-@media screen and (min-width: 1300px) {
-    #page > div:not(.author-content-item) {
-        animation: slide-in .6s .2s backwards
-    }
-}
-
-.article-sort .article-sort-item .article-sort-item-img {
-    border-radius: 12px;
-    min-width: 151px;
-    min-height: 80px;
-    background: var(--sco-secondbg);
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
-}
-
-@media screen and (max-width: 768px) {
-    .article-sort .article-sort-item .article-sort-item-img {
-        min-width: 80px
-    }
-}
-
-#post .tag_share .post-meta__tag-list {
-    display: flex;
-    padding: 0;
-    width: 100%;
-    flex-wrap: wrap;
-    flex-direction: row
-}
-
-#post .tag_share .post-meta__tag-list a {
-    margin-bottom: 8px;
-    margin-right: 8px
-}
-
-#page .tag-cloud-list a {
-    display: flex;
-    width: fit-content;
-    color: var(--sco-fontcolor) !important;
-    font-size: 1.4em !important;
-    padding: .2em .5em;
-    background: var(--sco-card-bg);
-    margin: .5em .5em;
-    border-radius: 12px;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d;
-    border: var(--style-border-always);
-    box-shadow: var(--sco-shadow-border);
-    align-items: center
-}
-
-#page .tag-cloud-list a:hover {
-    background: var(--sco-main) !important;
-    box-shadow: var(--sco-shadow-blue);
-    color: var(--sco-white) !important;
-    border: var(--style-border-hover)
-}
-
-span.tagsPageCount {
-    background: var(--sco-secondbg);
-    padding: 4px 4px;
-    border-radius: 8px;
-    color: var(--sco-secondtext);
-    line-height: 1;
-    text-align: center;
-    min-width: 35px;
-    display: inline-block;
-    font-size: 1rem;
-    margin-left: 4px
-}
-
-.category-lists span.tagsPageCount {
-    margin-left: 4px
-}
-
-#page .tag-cloud-list a:hover span.tagsPageCount {
-    color: var(--sco-lighttext)
-}
-
-#post .tag_share .post-meta__tags span.tagsPageCount, #tag-page-tags .tagsPageCount {
-    padding: 2px;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    min-width: 23px;
-    display: inline-block;
-    border-radius: 4px;
-    text-align: center;
-    font-size: .6rem;
-    color: var(--sco-fontcolor);
-    margin-left: 4px
-}
-
-#tag #tag-page-tags a.select .tagsPageCount {
-    background: var(--sco-card-bg);
-    color: var(--sco-lighttext)
-}
-
-span.tags-punctuation {
-    margin-right: 2px
-}
-
-span.tags-punctuation::before {
-    content: "\e071";
-    font-family: scoicon, serif !important;
-    font-size: 14px;
-    opacity: .4;
-}
-
-.hide-aside #page span.tags-punctuation::before {
-    font-size: 22px
-}
-
-.recent-post-item span.tags-punctuation {
-    margin-right: 0;
-    font-size: 13px
-}
-
-.category-lists span.tags-punctuation {
-    font-size: 18px
-}
-
-.tags-name {
-    margin-left: 2px
-}
-
-#article-container h1 {
-    padding-left: 0
-}
-
-#article-container h1:before {
-    display: none
-}
-
-#article-container h1:hover {
-    padding-left: 0
-}
-
-#article-container > div > figure > figcaption > p {
-    margin: 0
-}
-
-#page .category-lists ul li::before {
-    display: none
-}
-
-#page .category-lists ul li {
-    margin: 0 8px 8px 0;
-}
-
-#page .category-lists ul {
-    display: flex;
-    padding: 0;
-    flex-wrap: wrap;
-    flex-direction: row
-}
-
-#page .category-lists ul li {
-    padding: 4px 16px;
-    width: 200px;
-    border-radius: 12px;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always)
-}
-
-figure.gallery-group {
-    border-radius: 12px
-}
-
-figure.gallery-group:hover .gallery-group-name::after {
-    display: none
-}
-
-.tag-cloud-title {
-    display: none
-}
-
-.tk-replies .tk-content {
-    margin-top: 0 !important
-}
-
-#tag #tag-page-tags {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.75rem .5rem;
-}
-
-#tag #tag-page-tags a {
-    padding: .1rem .5rem;
-    margin: .25rem .25rem;
-    line-height: 1.6;
-    border-radius: 8px;
-    color: var(--sco-fontcolor) !important;
-    border: var(--style-border-always);
-    display: flex;
-    align-items: center
-}
-
-#tag #tag-page-tags a.select {
-    color: var(--sco-white) !important;
-    background: var(--sco-theme);
-    box-shadow: var(--sco-shadow-theme)
-}
-
-#tag #tag-page-tags a:hover {
-    color: var(--sco-white) !important;
-    background: var(--sco-theme);
-    box-shadow: var(--sco-shadow-theme)
-}
-
-.article-sort-item:before {
-    display: none
-}
-
-.article-sort-title:before {
-    display: none
-}
-
-.article-sort-title:after {
-    display: none
-}
-
-.article-sort {
-    border: none
-}
-
-.article-sort {
-    margin-left: 0;
-    padding-left: 0
-}
-
-.article-sort-title {
-    margin-left: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    font-weight: 700;
-    font-size: 2em
-}
-
-.article-sort-title sup {
-    margin-left: 4px;
-    font-size: 16px;
-    font-weight: 700;
-    opacity: .4;
-    top: -1em
-}
-
-.article-sort-item {
-    margin: 0 0 1rem 0;
-    overflow: hidden;
-    border-radius: 12px
-}
-
-@media screen and (max-width: 768px) {
-    .article-sort-item-info a {
-        white-space: inherit !important
-    }
-}
-
-.article-sort-item.year {
-    font-size: .8rem;
-    color: var(--sco-secondtext);
-    margin-bottom: .2rem
-}
-
-.article-sort-item-img img:hover {
-    transform: scale(1)
-}
-
-.article-sort-item-info {
-    padding: 0 .8rem;
-    display: flex;
-    flex-direction: column
-}
-
-.article-sort-item-time {
-    order: 1;
-    margin-top: 4px;
-    color: var(--sco-secondtext)
-}
-
-.article-sort-item-title {
-    order: 0;
-    font-weight: 700
-}
-
-.article-sort-item-title:hover {
-    transform: translateX(0);
-    color: var(--sco-hovertext)
-}
-
-.site-card-tag {
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 4px 8px;
-    background-color: var(--sco-blue);
-    box-shadow: var(--sco-shadow-blue);
-    color: var(--sco-white);
-    z-index: 1;
-    border-radius: 12px 0 12px 0;
-    transition: .3s;
-    font-size: .6rem
-}
-
-.site-card-tag.vip {
-    /*! Edit and share this gradient: https://html5kit.com/gradient-editor/?preset=d48f16,100;e5b085,0 */
-    background: -moz-linear-gradient(38deg, #e5b085 0, #d48f16 100%);
-    background: -webkit-linear-gradient(38deg, #e5b085 0, #d48f16 100%);
-    background: linear-gradient(38deg, #e5b085 0, #d48f16 100%);
-    overflow: hidden;
-    box-shadow: var(--sco-shadow-yellow)
-}
-
-.site-card-tag.power {
-    background-color: var(--sco-purple)
-}
-
-.light {
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    width: 100px;
-    height: 50px;
-    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
-    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
-    -webkit-animation: light_tag 4s both infinite;
-    -moz-animation: light_tag 4s both infinite;
-    -ms-animation: light_tag 4s both infinite;
-    animation: light_tag 4s both infinite
-}
-
-.site-card-tag.speed {
-    background: var(--sco-green);
-    box-shadow: var(--sco-shadow-green)
-}
-
-.article-sort-item-info a {
-    margin-right: auto;
-    overflow: hidden;
-    text-overflow: ellipsis
-}
-
-@media screen and (max-width: 768px) {
-    #letlink {
-        flex-direction: column !important;
-        text-align: center !important
-    }
-
-    #letlogo {
-        display: none !important
-    }
-
-    #footer-wrap {
-        margin-top: 1rem !important
-    }
-}
-
-.footer-bar-right {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center
-}
-
-#footer-wrap {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    padding: 20px 50px 0 50px;
-    text-align: left !important;
-    max-width: 1200px;
-    margin: 0 auto
-}
-
-#footer-wrap h1 {
-    font-size: 1.5rem;
-    margin: 0
-}
-
-#footer-wrap h3 {
-    padding: 0 12px
-}
-
-#footer-wrap p {
-    margin: 0 0 0 .2rem;
-    font-size: .8rem;
-    opacity: .8
-}
-
-#footer-wrap i {
-    margin-right: .5rem;
-    width: 22px;
-    font-size: 18px;
-    display: inline-block
-}
-
-#footer-wrap #letlogo {
-    display: flex;
-    flex-direction: column;
-    align-self: center;
-    margin: auto 0;
-    max-width: 200px
-}
-
-#footer-wrap #letlink .link_group {
-    display: flex;
-    flex-direction: column;
-    margin-right: 20px;
-    min-width: 180px
-}
-
-#footer-wrap #letlink {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    margin: 0 0 1rem 0
-}
-
-#weblogo i {
-    font-size: 2rem;
-    line-height: 2rem;
-    letter-spacing: -10px
-}
-
-#footer:before {
-    position: absolute !important;
-    width: 100% !important;
-    height: 100% !important;
-    content: '' !important;
-    z-index: -1
-}
-
-div#sco-footer-bar {
-    display: none
-}
-
-.post div#sco-footer-bar {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 16px
-}
-
-div#sco-footer-bar a.footer-bar-link {
-    padding: 4px 16px;
-    background: var(--sco-secondbg);
-    border-radius: 20px;
-    margin-top: 8px;
-    font-size: 14px;
-    cursor: pointer;
-    border: var(--style-border-always);
-}
-
-div#sco-footer-bar a.footer-bar-link:hover {
-    background: var(--sco-main);
-    color: var(--sco-white);
-    transform: scale(1.1);
-    border-color: var(--sco-main);
-}
-
-div#sco-footer-bar .footer-logo {
-    font-size: 24px
-}
-
-div#sco-footer-bar .footer-bar-description {
-    color: var(--sco-secondtext);
-    font-weight: 700
-}
-
-.weixin:hover::after {
-    transform: scale(1);
-    opacity: 1
-}
-
-#error-wrap .error-content {
-    box-shadow: none !important;
-    border-radius: 12px;
-    background: var(--sco-card-bg) !important
-}
-
-#body-wrap.error {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 50px 1rem 1rem;
-    position: relative
-}
-
-#body-wrap.error .aside-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    margin: 1rem;
-    max-width: 100%
-}
-
-#body-wrap.error .aside-list .aside-list-group {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    max-width: 800px;
-    margin: 0 auto;
-    justify-content: space-between
-}
-
-#body-wrap.error .aside-list .aside-list-item {
-    padding: .5rem 0;
-    width: 49%
-}
-
-#body-wrap.error .aside-list .aside-list-item img {
-    width: 100%;
-    object-fit: cover;
-    border-radius: 12px
-}
-
-#body-wrap.error .aside-list .aside-list-item .thumbnail {
-    overflow: hidden;
-    width: 100%;
-    height: 200px;
-    background: var(--sco-card-bg);
-    display: flex
-}
-
-#body-wrap.error .aside-list .aside-list-item .content .title {
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    line-height: 1.5;
-    justify-content: center;
-    align-items: flex-end;
-    align-content: center;
-    padding-top: .5rem;
-    font-size: 16px;
-    font-weight: 700
-}
-
-#body-wrap.error .aside-list .aside-list-item .content time {
-    display: none
-}
-
-@media screen and (max-width: 768px) {
-    #body-wrap.error {
-        padding-top: 0
-    }
-
-    #body-wrap.error .aside-list {
-        margin: 0
-    }
-
-    #body-wrap.error .aside-list .aside-list-item .thumbnail {
-        height: 100px
-    }
-}
-
-.bb-info {
-    display: inline;
-    float: right;
-    line-height: 1;
-    color: var(--sco-secondtext);
-    margin-left: auto;
-    margin-bottom: 1rem;
-    margin-right: .5rem
-}
-
-.bb-info:hover {
-    color: var(--sco-hovertext)
-}
-
-
-
-.load-btn.button-load {
-    background: var(--sco-card-btn-bg);
-    color: var(--sco-fontcolor);
-    padding: 12px 12px;
-    margin: 1.5rem 0 0 0;
-    width: 100%;
-    text-align: center;
-    border-radius: 12px;
-    transition: .3s;
-    font-weight: 700
-}
-
-.load-btn.button-load:hover {
-    background: var(--sco-blue);
-    color: var(--sco-white);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-blue)
-}
-
-#cf-container a {
-    width: fit-content
-}
-
-#hexo-circle-of-friends-root {
-    margin: 0 -8px
-}
-
-.moments-list {
-    display: flex;
-    flex-direction: column
-}
-
-.moments-list .article-sort-item-info {
-    display: flex;
-    flex-direction: column
-}
-
-.article-sort-item-info-more {
-    display: flex;
-    font-size: .7rem;
-    margin-right: auto
-}
-
-.friend_post_time {
-    margin-left: 8px;
-    color: var(--sco-secondtext)
-}
-
-.friendlink-avatar {
-    width: 3rem;
-    height: 3rem;
-    min-width: 3rem;
-    min-height: 3rem;
-    border-radius: 32px;
-    overflow: hidden;
-    background: var(--sco-secondbg);
-    padding: 0 !important
-}
-
-.friendlink-avatar:hover {
-    border-radius: 32px !important;
-    background: var(--sco-secondbg)
-}
-
-.moments-list .article-sort-item-info .article-sort-item-title {
-    color: var(--sco-lighttext)
-}
-
-.moments-list .article-sort-item-info .article-sort-item-title:hover {
-    color: var(--sco-hovertext)
-}
-
-a.bb-link {
-    margin-left: 8px;
-    color: var(--sco-secondtext) !important;
-    display: inline;
-    border: none !important
-}
-
-a.bb-link-info {
-    display: inline;
-    float: right;
-    border: none !important;
-    color: var(--sco-secondtext) !important;
-    line-height: 2.7rem
-}
-
-a.bb-link-info:hover {
-    color: var(--sco-fontcolor) !important;
-    background: 0 0 !important
-}
-
-#friend_link_moments {
-    border: none !important
-}
-
-.moments-article-img {
-    height: 100%;
-    margin: 0 !important
-}
-
-.tab-item-content #moments_container .moments-item a {
-    border-bottom: none;
-    padding: 0;
-    margin-right: auto;
-    width: auto
-}
-
-.tab-item-content #moments_container .moments-item a:hover {
-    background: 0 0;
-    color: var(--sco-lighttext);
-    box-shadow: none
-}
-
-.tab-item-content #moments_container h2 {
-    display: none
-}
-
-#friend_moments_list .moments-sort-item {
-    margin: 1rem 0
-}
-
-.moments-sort-item-img {
-    border-radius: 12px
-}
-
-.moments-item-time {
-    order: 1
-}
-
-.moments-sort-item-title {
-    color: var(--sco-lighttext);
-    border-bottom: none !important;
-    padding: 0 !important
-}
-
-.moments-sort-item-title:hover {
-    color: var(--sco-hovertext) !important;
-    background: 0 0 !important;
-    box-shadow: none !important
-}
-
-.friendlink-avatar {
-    border-bottom: none !important
-}
-
-.moments_load_button {
-    color: var(--sco-fontcolor) !important;
-    background: var(--sco-card-btn-bg) !important;
-    padding: 12px 16px !important;
-    border-radius: 12px !important;
-    transition: .3s;
-    width: 100%;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    border: 0 !important
-}
-
-.moments_load_button:hover {
-    color: var(--sco-white) !important;
-    background: var(--sco-main) !important;
-    transition: .3s
-}
-
-.moments-item-title {
-    color: var(--sco-lighttext);
-    font-size: 1rem;
-    order: 0;
-    width: 100%;
-    font-weight: 700;
-    -webkit-line-clamp: 1 !important;
-    overflow: hidden;
-    -webkit-box-orient: vertical
-}
-
-.moments-item-info {
-    display: flex;
-    flex-direction: column
-}
-
-.moments_post_time {
-    display: none
-}
-
-.moments_post_time i {
-    margin-right: 8px
-}
-
-.chart {
-    align-items: flex-start;
-    flex: 1;
-    width: 100px;
-    height: 60px;
-    margin: 20px
-}
-
-.moments-item-title {
-    font-weight: 700
-}
-
-.moments_post_info_number {
-    float: right
-}
-
-@media screen and (max-width: 500px) {
-    #info_user_pool {
-        padding: 10px;
-        flex-direction: column;
-        max-height: 200px
-    }
-
-    .chart {
-        flex: 0;
-        width: 100%;
-        height: 160px;
-        margin: 0
-    }
-}
-
-.moments-item-img {
-    width: 60px !important;
-    height: 60px !important
-}
-
-.moments-item-img img {
-    border-radius: 99px;
-    width: 80px;
-    height: 80px;
-    overflow: hidden
-}
-
-#info_user_pool {
-    background: var(--sco-secondbg);
-    border-radius: 12px !important;
-    margin-top: 1rem;
-    box-shadow: none !important
-}
-
-.moments-item {
-    margin-left: 0 !important;
-    box-shadow: none !important
-}
-
-.article-sort-item-time {
-    display: none
-}
-
-.article-sort-item-tags {
-    margin-top: 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    display: inline-block;
-    text-overflow: ellipsis;
-    width: 100%;
-    font-size: .7rem
-}
-
-.article-sort-item-tags a {
-    color: var(--sco-fontcolor);
-    transition: .3s
-}
-
-.article-sort-item-tags a:hover {
-    color: var(--sco-theme);
-    transition: .3s
-}
-
-.article-sort-item-tags a .tags-punctuation {
-    font-size: 12px;
-    margin-right: 1px
-}
-
-#sco-footer .footer-links {
-    display: flex;
-    flex-direction: column
-}
-
-#sco-footer {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    max-width: 1200px;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    margin: 1rem auto 3rem;
-    padding: 0 1rem
-}
-
-#sco-footer .footer-item {
-    font-size: .8rem;
-    line-height: .8rem;
-    color: var(--sco-fontcolor);
-    margin-right: auto;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 120px;
-    cursor: pointer;
-    padding: 8px;
-    border-radius: 12px
-}
-
-#sco-footer .footer-item:hover {
-    color: var(--sco-theme);
-    background: var(--sco-main-op-light)
-}
-
-[data-theme=dark] #sco-footer .footer-item:hover {
-    background: var(--sco-theme-op)
-}
-
-
-#sco-footer .footer-group {
-    min-width: 120px
-}
-
-#sco-footer .footer-title-group {
-    display: flex;
-    align-items: center;
-    margin: 1rem 0 .7rem 0
-}
-
-#sco-footer .footer-title-group a {
-    margin-left: 8px
-}
-
-#sco-footer .footer-title-group i {
-    line-height: 1;
-    color: var(--sco-secondtext);
-    transition: .3s;
-    font-size: 16px;
-    opacity: .6
-}
+    #banners:hover #banner-hover {
+        opacity: 1;
+        padding-left: 2rem;
+        background: var(--sco-theme-op-deep);
+        backdrop-filter: blur(15px);
+        -webkit-backdrop-filter: blur(15px);
+        transform: translateZ(0);
+        -webkit-backface-visibility: hidden;
+        -webkit-transform-style: preserve-3d;
+        transition: .3s;
+        background-size: 200%;
+        cursor: pointer
+    }
 
-#sco-footer .footer-title-group a:hover i {
-    color: var(--sco-main);
-    opacity: 1
-}
+    #banners #banner-hover i {
+        font-size: 80px;
+        opacity: .4
+    }
 
-#sco-footer .footer-title-group .footer-title {
-    margin: 0
-}
+    .topGroup .todayCard {
+        position: absolute;
+        width: calc(600px + 1rem);
+        height: 100%;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        background: var(--sco-card-bg);
+        border-radius: 12px;
+        margin-left: .5rem;
+        overflow: hidden;
+        transition: .3s;
+        display: flex;
+        cursor: pointer;
+        pointer-events: all
+    }
 
-#sco-footer .random-friends-btn {
-    display: flex
-}
+    .topGroup .todayCard::after {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0
+    }
 
-#sco-footer .footer-title {
-    color: var(--sco-secondtext);
-    font-size: .8rem;
-    margin-left: 8px;
-}
+    .topGroup .todayCard.hide {
+        opacity: 0;
+        pointer-events: none
+    }
 
-#footer-bar {
-    padding: 1rem;
-    color: var(--sco-fontcolor);
-    margin-top: 1rem;
-    background: var(--sco-secondbg);
-    display: flex;
-    overflow: hidden;
-    z-index: 1002;
-    transition: .3s
-}
+    .topGroup .todayCard .todayCard-info {
+        position: absolute;
+        bottom: 2rem;
+        left: 2rem;
+        z-index: 2;
+        color: var(--sco-white);
+        max-width: 60%;
+        transition: .3s
+    }
 
-#footer-bar .footer-bar-links {
-    display: flex;
-    justify-content: space-between;
-    max-width: 1400px;
-    width: 100%;
-    margin: 0 auto;
-    flex-wrap: wrap;
-    align-items: center;
-    line-height: 1
-}
+    .topGroup .todayCard.hide .todayCard-info {
+        bottom: 1rem;
+        opacity: 0
+    }
 
-#footer-bar .footer-bar-left {
-    display: flex;
-    flex-wrap: wrap;
-    min-height: 32px;
-    align-items: center
-}
+    .topGroup .todayCard .todayCard-info .todayCard-tips {
+        opacity: .8;
+        font-size: .6rem
+    }
 
-#footer-bar .footer-bar-link {
-    margin-top: 8px;
-    margin-bottom: 8px;
-    margin-right: 1rem;
-    color: var(--sco-fontcolor);
-    font-size: .8rem;
-    font-weight: 700;
-    white-space: nowrap
-}
+    .topGroup .todayCard .todayCard-info .todayCard-title {
+        font-size: 28px;
+        font-weight: 700;
+        line-height: 36px
+    }
 
-#footer-bar .footer-bar-link.cc {
-    margin-right: 0
-}
+    .topGroup .banner-button-group {
+        position: absolute;
+        right: 2rem;
+        bottom: 2rem;
+        display: flex;
+        transition: .3s
+    }
 
-#footer-bar .footer-bar-link.cc i {
-    margin-right: .5rem;
-    font-size: 18px
-}
+    .topGroup .todayCard.hide .banner-button-group {
+        bottom: 1rem
+    }
 
-#footer-bar .footer-bar-link:hover {
-    color: var(--sco-theme)
-}
+    .topGroup .banner-button {
+        background: var(--sco-white-op);
+        border-radius: 20px;
+        color: var(--sco-white);
+        display: flex;
+        align-items: center;
+        z-index: 1;
+        transition: .3s;
+        cursor: pointer;
+        backdrop-filter: saturate(180%) blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        transform: translateZ(0);
+        height: 40px;
+        width: 118px;
+        justify-content: center
+    }
 
-#footer-bar > div > div.footer-bar-left > span {
-    margin-right: 1rem
-}
+    .topGroup .banner-button:hover {
+        background: var(--sco-theme);
+        color: var(--sco-white)
+    }
 
-#footer-bar .footer-bar-right a:hover {
-    color: var(--sco-lighttext)
-}
+    .topGroup .banner-button i {
+        margin-right: 8px;
+        font-size: 22px
+    }
 
-#footer_deal i {
-    font-size: .9rem;
-    line-height: .9rem;
-    height: .9rem
-}
+    .topGroup .todayCard .todayCard-cover {
+        position: absolute;
+        min-width: 100%;
+        min-height: 100%;
+        top: 0;
+        left: 0;
+        background-size: cover;
+        z-index: -1;
+        transition: .3s
+    }
 
-.la-widget.la-data-widget__container {
-    border-radius: 12px;
-    border: var(--style-border) !important;
-    box-shadow: var(--sco-shadow-border);
-    border-color: var(--sco-card-border)
+    .topGroup .todayCard.hide .todayCard-cover {
+        transform: scale(1.2)
+    }
 }
 
-#about-page {
-    display: flex;
-    padding-top: 1rem;
-    flex-direction: column;
-    align-items: center
+.tags-group-icon {
+    width: 120px;
+    height: 120px;
+    border-radius: 30px
 }
 
-#about-page .author-info {
+.tags-group-all {
     display: flex;
-    align-items: center;
-    margin: 0 0 16px 0
+    transform: rotate(-30deg)
 }
 
-#about-page .author-tag-left {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end
+.tags-group-all.nowrapMove {
+    transform: rotate(0);
+    padding-bottom: 2rem
 }
 
-#about-page .author-tag-right {
+.tags-group-wrapper {
+    margin-top: 5rem;
     display: flex;
-    flex-direction: column;
-    align-items: flex-start
-}
-
-@media screen and (max-width: 768px) {
-    #about-page .author-tag-left, #about-page .author-tag-right {
-        display: none
-    }
+    flex-wrap: nowrap;
+    animation: rowup 60s linear infinite
 }
 
-#about-page .author-tag-left .author-tag:first-child, #about-page .author-tag-left .author-tag:last-child {
-    margin-right: -16px
+.nowrapMove .tags-group-wrapper {
+    margin-top: 7rem;
+    animation: rowup 120s linear infinite
 }
 
-#about-page .author-tag-right .author-tag:first-child, #about-page .author-tag-right .author-tag:last-child {
-    margin-left: -16px
+.tags-group-icon-pair .tags-group-icon:nth-child(even) {
+    margin-top: 1rem;
+    transform: translate(-60px)
 }
 
-#about-page .author-tag {
-    transform: translate(0, -4px);
-    padding: 1px 8px;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    border-radius: 40px;
-    margin-top: 6px;
-    font-size: 14px;
-    font-weight: 700;
-    box-shadow: var(--sco-shadow-lightblack);
-    animation: 6s ease-in-out 0s infinite normal none running floating
+.tags-group-icon-pair {
+    margin-left: 1rem;
+    user-select: none
 }
 
-#about-page .author-tag:nth-child(1) {
-    animation-delay: 0s
+.tags-group-icon-pair a img {
+    border-radius: 50% !important
 }
 
-#about-page .author-tag:nth-child(2) {
-    animation-delay: .6s
+.tags-group-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 66px;
+    font-weight: 700;
+    box-shadow: var(--sco-shadow-blackdeep)
 }
 
-#about-page .author-tag:nth-child(3) {
-    animation-delay: 1.2s
+.nowrapMove .tags-group-icon {
+    border-radius: 50%
 }
 
-#about-page .author-tag:nth-child(4) {
-    animation-delay: 1.8s
+.tags-group-icon img {
+    width: 60%
 }
 
-#about-page .author-img {
-    margin: 0 30px;
+.nowrapMove .tags-group-icon img {
+    min-width: 100%;
+    min-height: 100%;
     border-radius: 50%;
-    width: 180px;
-    height: 180px;
-    position: relative;
-    background: var(--sco-secondbg);
-    user-select: none
-}
-
-#about-page .author-img img {
-    border-radius: 200px
+    object-fit: cover
 }
 
-#about-page .author-img::before {
-    content: '';
-    -webkit-transition: 1s;
-    -moz-transition: 1s;
-    -o-transition: 1s;
-    -ms-transition: 1s;
-    transition: 1s;
-    width: 30px;
-    height: 30px;
-    background: var(--sco-green);
+#categoryList > div:nth-child(1) > a::before {
+    height: 24px;
+    width: 44px;
+    content: "";
+    background-size: 38px 24px;
     position: absolute;
-    border-radius: 50%;
-    border: 5px solid var(--sco-background);
-    bottom: 5px;
-    right: 10px;
-    z-index: 2
+    top: 0;
+    left: 0
 }
 
-@media screen and (max-width: 768px) {
-    #about-page .author-img {
-        width: 120px;
-        height: 120px
-    }
-
-    #about-page .author-img::before {
-        bottom: -5px;
-        right: -5px
-    }
+.categoryItem:hover i {
+    opacity: .8;
+    transition: .8s;
+    transition-delay: .15s;
+    transform: scale(1.03) rotate(0);
+    font-size: 2.5rem;
+    filter: blur(0)
 }
 
-#about-page .author-title {
-    font-size: 2rem;
-    font-weight: 700;
-    margin: 1rem 0;
-    line-height: 1
+@media screen and (min-width: 1300px) {
+    .categoryItem:hover i {
+        transform: scale(1.03) rotate(0)
+    }
 }
 
-.page-title {
-    display: none
+#categoryList > a:nth-child(0) > i {
+    padding-right: 8px
 }
 
-
-.inline-word {
-    word-break: keep-all;
-    white-space: nowrap
+.cate-button-text {
+    box-shadow: var(--sco-shadow-black)
 }
 
-.author-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    width: 100%;
-    margin-top: 1rem
+@media screen and (max-width: 768px) {
+    div#categoryList {
+        display: none
+    }
 }
 
-.author-content-item-group.column {
+li, ul {
+    list-style: none;
+    display: block;
+    margin: 0;
+    padding: 0
+}
+
+.title-and-tips {
     display: flex;
-    flex-direction: column;
-    width: 49%;
-    justify-content: space-between
+    margin-top: 1rem;
+    align-items: center
 }
 
-.author-content-item {
-    width: 49%;
-    border-radius: 12px;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    box-shadow: var(--sco-shadow-border);
-    position: relative;
-    padding: 1rem 2rem;
-    overflow: hidden
+.title-and-tips .page-title {
+    line-height: 1;
+    margin: 0
 }
 
-.author-content-item.single {
-    width: 100%
+.title-and-tips .page-tips {
+    background: var(--sco-yellow-op);
+    color: var(--sco-yellow);
+    margin-bottom: auto;
+    border-radius: 8px;
+    padding: 2px 6px;
+    font-size: .5rem;
+    margin-left: 8px
 }
 
-.author-content-item .author-content-item-title {
-    font-size: 36px;
+a.article-meta__categories {
+    position: absolute;
+    padding: 1px 6px;
+    background: var(--sco-black-op);
+    border-radius: 8px;
+    margin-left: 0;
+    font-size: 12px;
     font-weight: 700;
-    line-height: 1
+    color: var(--sco-white);
+    top: 8px;
+    left: 8px;
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    transform: translateZ(0)
 }
 
-.author-content-item .author-content-item-tips {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+a.article-meta__categories:hover {
+    background: var(--sco-theme) !important;
+    color: var(--sco-white) !important;
+    box-shadow: var(--sco-shadow-theme)
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item {
-        width: 100% !important;
-        margin-top: 1rem;
-        padding: 1rem
-    }
-
-    .author-content-item-group.column {
-        width: 100% !important
-    }
+.article-meta {
+    margin: 0 8px 0 0;
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    text-overflow: ellipsis
+}
 
-    .author-content {
-        margin-top: 0
-    }
+.article-meta__link {
+    display: none
 }
 
-.card-background-icon {
-    font-size: 12rem;
-    opacity: .2;
-    position: absolute;
-    right: 0;
-    bottom: -40%;
-    transform: rotate(30deg);
-    transition: 2s ease-in-out
+.article-meta__tags {
+    margin-right: 8px;
+    padding: 0 .2rem 0 0;
+    color: var(--sco-fontcolor)
 }
 
-.author-content-item:hover .card-background-icon {
-    transform: rotate(20deg)
+#web_bg {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    position: fixed;
+    z-index: -999;
+    background: var(--sco-background)
 }
 
-#about-page .myInfoAndSayHello {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    color: var(--sco-white);
-    background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);
-    background-size: 200%;
-    animation: gradient 15s ease infinite;
-    width: 59%
+a.extend.next {
+    right: 0
 }
 
-#about-page .myInfoAndSayHello .title1 {
-    opacity: .8;
-    line-height: 1.3
+a.extend.prev {
+    left: 0
 }
 
-#about-page .myInfoAndSayHello .title2 {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 1.1;
-    margin: .5rem 0
+.lg-container {
+    display: none
 }
 
-.author-content-item-group.column.mapAndInfo {
-    width: 59%
+.post-bg #post-cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    min-width: 50vw;
+    min-height: 20rem;
+    opacity: .8
 }
 
-.author-content-item.map {
-    background: var(--site-about-oneself-map--light) no-repeat center;
-    min-height: 160px;
-    max-height: 400px;
+.coverdiv {
+    width: 70%;
+    height: 100%;
     position: relative;
     overflow: hidden;
-    margin-bottom: .5rem;
-    height: 60%;
-    background-size: 100%;
-    transition: 1s ease-in-out
-}
-
-[data-theme=dark] .author-content-item.map {
-    background: var(--site-about-oneself-map--dark) no-repeat center;
-    background-size: 100%
+    margin: 0 -20% 0 auto;
+    transform: rotate(10deg) translateY(-10%) scale(2);
+    filter: blur(10px)
 }
 
-.author-content-item.map:hover {
-    background-size: 120%;
-    transition: 4s ease-in-out;
-    background-position-x: 0;
-    background-position-y: 36%
+.coverdiv.loaded {
+    display: block
 }
 
-.author-content-item.map .map-title {
+.coverdiv:after {
     position: absolute;
-    bottom: 0;
-    left: 0;
+    content: '';
     width: 100%;
-    background: var(--sco-maskbg);
-    padding: .5rem 2rem;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transition: 1s ease-in-out;
-    font-size: 20px;
-    transform: translateZ(0)
+    height: 100%;
+    top: 0;
+    left: 0;
+    box-shadow: 110px -130px 300px 60px var(--sco-main) inset
 }
 
-.author-content-item.map:hover .map-title {
-    bottom: -100%
-}
+@media screen and (max-width: 768px) {
+    .coverdiv {
+        margin: 0 0 0 auto;
+        transform: rotate(0) translateY(0) scale(1);
+        filter: blur(0);
+        width: 100%;
+        position: fixed;
+        height: 30rem;
+        z-index: 1
+    }
 
-.author-content-item.map .map-title b {
-    color: var(--sco-fontcolor)
+    .coverdiv:after {
+        box-shadow: 0 0 205px 59px var(--sco-main) inset
+    }
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item.map.myphoto {
-        background-size: cover !important
+@media screen and (min-width: 1300px) {
+    .coverdiv {
+        width: 70%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        margin: 0 -20% 0 auto;
+        transform: rotate(10deg) translateY(-8%) scale(1.8);
+        filter: blur(10px);
+        opacity: 0
     }
 
-    .author-content-item.map .map-title {
-        padding: 1rem
+    .coverdiv.loaded {
+        display: block;
+        opacity: .5;
+        animation: showCover 1s .3s backwards;
+        transform: rotate(10deg) translateY(-10%) scale(2)
     }
 }
 
-.author-content-item.selfInfo {
-    display: flex;
-    min-height: 100px;
-    max-height: 400px;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    height: -webkit-fill-available;
-    height: 40%
-}
+@media screen and (min-width: 768px) {
+    .coverdiv {
+        width: 70%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        margin: 0 -20% 0 auto;
+        transform: rotate(10deg) translateY(-8%) scale(1.8);
+        filter: blur(10px);
+        opacity: 0
+    }
 
-@media screen and (max-width: 1300px) {
-    .author-content-item.selfInfo {
-        height: 70%
+    .coverdiv.loaded {
+        display: block;
+        opacity: .5;
+        animation: showCover 1s .3s backwards;
+        transform: rotate(10deg) translateY(-10%) scale(2)
     }
-}
 
-.author-content-item.selfInfo div {
-    display: flex;
-    flex-direction: column;
-    margin: .5rem 2rem .5rem 0
-}
+    @keyframes showCover {
+        from {
+            opacity: 0;
+            transform: rotate(10deg) translateY(-8%) scale(1.8)
+        }
 
-.author-content-item.selfInfo .selfInfo-title {
-    opacity: .8;
-    font-size: .6rem;
-    line-height: 1;
-    margin-bottom: 8px
+        to {
+            opacity: .5;
+            transform: rotate(10deg) translateY(-10%) scale(2)
+        }
+    }
 }
 
-.author-content-item.selfInfo .selfInfo-content {
-    font-weight: 700;
-    font-size: 34px;
-    line-height: 1
-}
 
-.author-content-item.myphoto {
-    height: 60%;
-    min-height: 240px;
-    position: relative;
-    overflow: hidden;
-    width: 39%;
-    display: flex;
-    align-items: center;
-    justify-content: center
-}
 
-.author-content-item.myphoto img {
+#post-cover-rgb {
     position: absolute;
-    height: 100%;
-    min-width: 100%;
-    object-fit: cover;
-    transition: .6s;
-    user-select: none
+    width: 100% !important;
+    height: 100% !important;
+    background: var(--sco-lighttext)
 }
 
-.author-content-item.myphoto:hover img {
-    min-width: 105%;
-    transition: 2s
+
+
+#page {
+    box-shadow: none
 }
 
-.author-content-item.myphoto .myphoto-title {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: var(--sco-maskbgdeep);
-    padding: .5rem 2rem;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
+
+.full_page #post-cover {
+    display: none
 }
 
-.author-content-item.careers {
-    min-height: 400px
+.meta-secondline > span {
+    opacity: .6;
+    transition: .3s;
+    margin-right: 1.1rem;
 }
 
-.author-content-item.careers img {
-    position: absolute;
-    left: 0;
-    bottom: 20px;
-    width: 100%;
-    transition: .6s;
-    user-select: none
+.meta-secondline span {
+    display: flex;
+    align-items: center;
+    line-height: 1
 }
 
-.author-content-item.careers .careers-group {
-    margin-top: 12px
+@media screen and (max-width: 768px) {
+    .meta-secondline span {
+        line-height: 1.5
+    }
 }
 
-.author-content-item.careers .careers-item {
+#post-firstinfo {
+    text-align: left;
     display: flex;
-    align-items: center
+    white-space: nowrap;
+    -webkit-user-select: none
 }
 
-.author-content-item.careers .careers-item .circle {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-    border-radius: 16px
+.inline-image {
+    display: flex;
+    margin: 8px auto;
+    width: fit-content;
+    justify-content: center
 }
 
-.author-content-item.careers .careers-item .name {
-    color: var(--sco-secondtext)
+.inline-image a:hover {
+    background: 0 0 !important;
+    box-shadow: none !important
 }
 
-.author-content-item.personalities {
-    overflow: hidden;
-    position: relative;
-    width: 59%
+.inline-image img {
+    margin: 0 !important;
+    display: inline-flex;
 }
 
-.author-content-item.personalities .title2 {
-    font-size: 36px;
+#post-info .post-title {
+    color: var(--sco-white);
     font-weight: 700;
-    line-height: 1.1
-}
-
-.author-content-item.personalities .image {
-    position: absolute;
-    right: -40px;
-    bottom: -10rem;
-    transition: transform 2s cubic-bezier(.13, .45, .21, 1.02);
-    user-select: none
-}
-
-.author-content-item.personalities:hover .image {
-    transform: rotate(-10deg)
+    font-size: 2.3rem;
+    line-height: 1.2;
+    text-align: left;
+    margin: 1rem 0 1rem 0 !important;
+    -webkit-line-clamp: 2;
+    padding: 0;
+    overflow: hidden
 }
 
 @media screen and (max-width: 768px) {
-    .author-content-item.personalities {
-        min-height: 360px
-    }
-
-    .author-content-item.personalities .image {
-        right: -70px
+    #post-info .post-title {
+        font-size: 1.2rem;
+        -webkit-line-clamp: 3;
+        margin: .2rem auto !important;
+        text-align: center;
+        z-index: 1
     }
 }
 
-.author-content-item.maxim {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 1.1;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    justify-content: center;
-    width: 39%
-}
-
-.author-content-item.maxim .maxim-title {
-    display: flex;
-    flex-direction: column
+.table-wrap {
+    margin: 1rem 0;
+    border-radius: 8px
 }
 
-.author-content-item.maxim .title1 {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+table td, table th {
+    border: var(--style-border-always)
 }
 
-.author-content-item.buff {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 1.1;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    justify-content: center;
-    background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%);
-    color: var(--sco-white);
-    background-size: 200%;
-    animation: gradient 15s ease infinite;
-    min-height: 200px;
-    height: fit-content;
-    width: 59%
+table thead {
+    background: var(--sco-secondbg)
 }
 
-.author-content-item.buff .card-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center
+b, strong {
+    color: var(--sco-lighttext)
 }
 
-.author-content-item.buff .buff-title {
-    display: flex;
-    flex-direction: column
+h1, h2, h3, h4, h5, h6 {
+    margin-top: 1rem;
+    padding-top: 0;
+    padding-left: 0 !important;
+    font-weight: 700
 }
 
-.author-content-item.buff .title1 {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+#post h2 {
+    margin-top: 1.5rem
 }
 
-.author-content-item.skills {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    flex-direction: column;
-    width: 49%;
-    min-height: 450px
+blockquote {
+    border: var(--style-border-always);
+    background-color: var(--sco-secondbg);
+    color: var(--sco-secondtext);
+    border-radius: 8px;
+    margin: 1rem 0;
+    padding: .5rem .8rem
 }
 
-.author-content-item.skills .tags-group-all {
-    display: flex;
-    transform: rotate(0);
-    transition: .3s
+blockquote p {
+    padding: 0
 }
 
-.author-content-item.skills .tags-group-wrapper {
-    margin-top: 40px;
-    display: flex;
-    flex-wrap: nowrap;
-    animation: rowup 60s linear infinite
+figure {
+    margin-top: .5rem !important
 }
 
-.author-content-item.skills .skills-style-group {
-    position: relative
+.post-qr-code-img {
+    box-shadow: var(--sco-shadow-lightblack);
+    border-radius: 12px;
+    border: var(--style-border-always)
 }
 
-.author-content-item.skills .skills-list {
-    display: flex;
-    opacity: 0;
-    transition: .3s;
-    position: absolute;
-    width: 100%;
+#quit-box {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, .2);
     top: 0;
     left: 0;
-    flex-wrap: wrap;
-    flex-direction: row;
-    margin-top: 10px
-}
-
-.author-content-item.skills:hover .skills-style-group .tags-group-all {
-    opacity: 0
+    display: none;
+    z-index: 101;
+    margin: 0 !important
 }
 
-.author-content-item.skills:hover .skills-style-group .skills-list {
-    opacity: 1
+.post-tools-left #quit-box {
+    display: none
 }
 
-.author-content-item.skills .skill-info {
-    display: flex;
-    align-items: center;
-    margin-right: 10px;
-    margin-top: 10px;
-    background: var(--sco-background);
-    border-radius: 40px;
-    padding: 4px 12px 4px 8px;
-    border: var(--style-border);
-    box-shadow: var(--sco-shadow-border)
+@media screen and (max-width: 768px) {
+    #quit-box {
+        z-index: 109;
+        height: calc(100vh - 380px);
+    }
 }
 
-.author-content-item.skills .etc {
-    margin-right: 10px;
-    margin-top: 10px
+#post > hr {
+    display: none
 }
 
-.author-content-item.skills .skill-icon {
-    width: 32px;
-    height: 32px;
-    border-radius: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 8px;
-    user-select: none
+.img-alt {
+    font-size: 12px;
+    margin: 0;
+    color: var(--sco-secondtext)
 }
 
-.author-content-item.skills .skill-icon img {
-    width: 18px;
-    height: 18px
+.long-img .img-alt {
+    display: none
 }
 
-.author-content-item.skills .skill-name {
-    font-weight: 700;
-    line-height: 1
+.long-img img {
+    border-radius: 0 !important;
+    margin: 0 !important
 }
 
-.author-content-item.aboutsiteTips {
+.post-tools {
     display: flex;
+    width: 100%;
     justify-content: center;
-    align-items: flex-start;
-    flex-direction: column;
-    width: 39%
+    margin-top: 8px;
+    flex-wrap: wrap;
+    -webkit-user-select: none
 }
 
-.aboutsiteTips h2 {
-    margin-right: auto;
-    font-size: 36px;
-    font-family: Helvetica;
-    line-height: 1.06;
-    letter-spacing: -.02em;
-    color: var(--sco-fontcolor);
-    margin-top: 0
+.post-tools-left {
+    white-space: nowrap;
+    display: flex;
+    text-overflow: ellipsis;
+    flex-wrap: wrap
 }
 
-.aboutsiteTips .mask {
-    height: 36px;
-    position: relative;
-    overflow: hidden;
-    margin-top: 4px
+.post-tools-right {
+    padding-right: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap
 }
 
-.aboutsiteTips .mask span {
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    top: 36px;
-    padding-bottom: var(--offset);
-    background-size: 100% 100%;
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-repeat: no-repeat
+@media screen and (max-width: 768px) {
+    .post-tools-left > div {
+        margin: 8px
+    }
+
+    .post-tools-left {
+        white-space: nowrap;
+        display: flex;
+        text-overflow: ellipsis;
+        justify-content: center;
+        width: 100%
+    }
+
+    .post-tools-right {
+        margin-top: 1rem;
+        width: 100%;
+        justify-content: center
+    }
 }
 
-.aboutsiteTips .mask span[data-show] {
-    transform: translateY(-100%);
-    transition: .5s transform ease-in-out
+#qrcode {
+    width: 150px;
+    height: 150px;
+    min-width: 150px;
+    min-height: 150px;
+    background: var(--sco-white);
+    padding: 8px;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    border: var(--style-border-always)
 }
 
-.aboutsiteTips .mask span[data-up] {
-    transform: translateY(-200%);
-    transition: .5s transform ease-in-out
+.share-link:hover .share-main {
+    opacity: 1;
+    transform: translateY(0)
 }
 
-.aboutsiteTips .mask span:nth-child(1) {
-    background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1)
+.share-qrcode {
+    display: flex;
+    justify-content: center
 }
 
-.aboutsiteTips .mask span:nth-child(2) {
-    background-image: linear-gradient(45deg, #18e198 50%, #0ec15d)
+@media screen and (max-width: 768px) {
+    .share-link.mobile {
+        display: none
+    }
 }
 
-.aboutsiteTips .mask span:nth-child(3) {
-    background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c)
+#page .category-lists .category-title {
+    display: none
 }
 
-.aboutsiteTips .mask span:nth-child(4) {
-    background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f)
+#page {
+    background: 0 0;
+    border: none;
+    padding: 0
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item.map {
-        margin-bottom: 0
+@media screen and (min-width: 1300px) {
+    #page > div:not(.author-content-item) {
+        animation: slide-in .6s .2s backwards
     }
 }
 
-#about-page .about-statistic {
-    min-height: 380px;
-    width: 39%;
-    background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp) no-repeat top;
-    background-size: cover;
-    color: var(--sco-white);
-    overflow: hidden
+#post .tag_share .post-meta__tag-list {
+    display: flex;
+    padding: 0;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row
 }
 
-#about-page .about-statistic::after {
-    box-shadow: 0 -159px 173px 71px #0f1114 inset;
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
+#post .tag_share .post-meta__tag-list a {
+    margin-bottom: 8px;
+    margin-right: 8px
+}
+
+#page .tag-cloud-list a {
+    display: flex;
+    width: fit-content;
+    color: var(--sco-fontcolor) !important;
+    font-size: 1.4em !important;
+    padding: .2em .5em;
+    background: var(--sco-card-bg);
+    margin: .5em .5em;
+    border-radius: 12px;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d;
+    border: var(--style-border-always);
+    box-shadow: var(--sco-shadow-border);
+    align-items: center
 }
 
-#about-page .about-statistic .banner-button {
-    background: var(--sco-white-op)
+#page .tag-cloud-list a:hover {
+    background: var(--sco-main) !important;
+    box-shadow: var(--sco-shadow-blue);
+    color: var(--sco-white) !important;
+    border: var(--style-border-hover)
 }
 
-#about-page .about-statistic .banner-button:hover {
-    background: var(--sco-theme)
+span.tagsPageCount {
+    background: var(--sco-secondbg);
+    padding: 4px 4px;
+    border-radius: 8px;
+    color: var(--sco-secondtext);
+    line-height: 1;
+    text-align: center;
+    min-width: 35px;
+    display: inline-block;
+    font-size: 1rem;
+    margin-left: 4px
 }
 
-#statistic {
-    font-size: 16px;
-    border-radius: 15px;
-    width: 100%;
-    color: var(--sco-white);
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-top: 1rem;
-    margin-bottom: 2rem
+.category-lists span.tagsPageCount {
+    margin-left: 4px
 }
 
-#statistic div {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    width: 50%;
-    margin-bottom: .5rem
+#page .tag-cloud-list a:hover span.tagsPageCount {
+    color: var(--sco-lighttext)
 }
 
-#statistic div span:first-child {
-    opacity: .8;
-    font-size: .6rem
+#post .tag_share .post-meta__tags span.tagsPageCount, #tag-page-tags .tagsPageCount {
+    padding: 2px;
+    background: var(--sco-card-bg);
+    border: var(--style-border-always);
+    min-width: 23px;
+    display: inline-block;
+    border-radius: 4px;
+    text-align: center;
+    font-size: .6rem;
+    color: var(--sco-fontcolor);
+    margin-left: 4px
 }
 
-#statistic div span:last-child {
-    font-weight: 700;
-    font-size: 34px;
-    line-height: 1;
-    white-space: nowrap
+#tag #tag-page-tags a.select .tagsPageCount {
+    background: var(--sco-card-bg);
+    color: var(--sco-lighttext)
 }
 
-.author-content-item.about-statistic .card-content .banner-button-group .banner-button:hover {
-    background: #998c5a;
-    color: var(--sco-white)
+span.tags-punctuation {
+    margin-right: 2px
 }
 
-.author-content-item.single.reward .author-content-item .author-content-item-title {
-    color: var(--sco-red)
+span.tags-punctuation::before {
+    content: "\e071";
+    font-family: scoicon, serif !important;
+    font-size: 14px;
+    opacity: .4;
 }
 
-.author-content-item.single.reward .reward-list-all {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    margin: 1rem -.25rem .5rem;
+.hide-aside #page span.tags-punctuation::before {
+    font-size: 22px
 }
 
-.author-content-item.single.reward .reward-list-all .reward-list-item {
-    padding: 1rem;
-    border-radius: 12px;
-    border: var(--style-border-always);
-    width: calc((100% / 6) - .5rem);
-    margin: 0 .25rem .5rem .25rem;
-    box-shadow: var(--sco-shadow-border);
-    flex-direction: column;
-    justify-content: space-between
+.category-lists span.tags-punctuation {
+    font-size: 18px
 }
 
-.reward-list-tips p {
-    font-size: 12px;
-    color: var(--sco-secondtext)
+.tags-name {
+    margin-left: 2px
 }
 
-@media screen and (max-width: 1200px) {
-    .author-content-item.single.reward .reward-list-all .reward-list-item {
-        width: calc((100% / 4) - .5rem)
-    }
+#page .category-lists ul li::before {
+    display: none
 }
 
-@media screen and (max-width: 900px) {
-    .author-content-item.single.reward .reward-list-all .reward-list-item {
-        width: calc((100% / 2) - .5rem)
-    }
+#page .category-lists ul li {
+    margin: 0 8px 8px 0;
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item.single.reward .reward-list-all .reward-list-item {
-        width: 100%
-    }
+#page .category-lists ul {
+    display: flex;
+    padding: 0;
+    flex-wrap: wrap;
+    flex-direction: row
 }
 
-.author-content-item.single.reward .author-content-item-description {
-    font-size: 16px;
-    margin-top: .5rem
+#page .category-lists ul li {
+    padding: 4px 16px;
+    width: 200px;
+    border-radius: 12px;
+    background: var(--sco-card-bg);
+    border: var(--style-border-always)
 }
 
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-name {
-    font-size: 1rem;
-    font-weight: 700;
-    line-height: 1;
-    margin-bottom: .5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis
+.tag-cloud-title {
+    display: none
 }
 
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-bottom-group {
+#tag #tag-page-tags {
     display: flex;
-    align-items: center;
-    justify-content: space-between
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0 -.75rem .5rem;
 }
 
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-money {
-    padding: 4px;
-    background: var(--sco-fontcolor);
-    color: var(--sco-card-bg);
-    font-size: 12px;
-    line-height: 1;
-    border-radius: 4px;
-    margin-right: 4px;
-    white-space: nowrap
+#tag #tag-page-tags a {
+    padding: .1rem .5rem;
+    margin: .25rem .25rem;
+    line-height: 1.6;
+    border-radius: 8px;
+    color: var(--sco-fontcolor) !important;
+    border: var(--style-border-always);
+    display: flex;
+    align-items: center
 }
 
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-time {
-    font-size: 12px;
-    color: var(--sco-secondtext);
-    white-space: nowrap
+#tag #tag-page-tags a.select {
+    color: var(--sco-white) !important;
+    background: var(--sco-theme);
+    box-shadow: var(--sco-shadow-theme)
 }
 
-.author-content-item.single.reward .reward-list-updateDate {
-    color: var(--sco-gray);
-    font-size: 14px
+#tag #tag-page-tags a:hover {
+    color: var(--sco-white) !important;
+    background: var(--sco-theme);
+    box-shadow: var(--sco-shadow-theme)
 }
 
-.author-content-item.single.reward .post-reward {
+.site-card-tag {
     position: absolute;
-    right: 2rem;
-    top: 2rem
-}
-
-.author-content-item.single.reward .post-reward .reward-button {
-    padding: 8px 12px;
-    background: var(--sco-red);
-    border-radius: 12px;
+    top: 0;
+    left: 0;
+    padding: 4px 8px;
+    background-color: var(--sco-blue);
+    box-shadow: var(--sco-shadow-blue);
     color: var(--sco-white);
-    display: flex;
-    align-items: center;
     z-index: 1;
+    border-radius: 12px 0 12px 0;
     transition: .3s;
-    cursor: pointer;
-    box-shadow: none;
-    width: fit-content;
-    height: fit-content;
-    line-height: 2;
-    user-select: none
-}
-
-.author-content-item.single.reward .post-reward:hover .reward-button {
-    filter: brightness(1.1)
+    font-size: .6rem
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item.single.reward .post-reward .reward-button {
-        display: none
-    }
+.site-card-tag.vip {
+    background: -moz-linear-gradient(38deg, #e5b085 0, #d48f16 100%);
+    background: -webkit-linear-gradient(38deg, #e5b085 0, #d48f16 100%);
+    background: linear-gradient(38deg, #e5b085 0, #d48f16 100%);
+    overflow: hidden;
+    box-shadow: var(--sco-shadow-yellow)
 }
 
-.author-content-item.single.reward .post-reward .reward-button i {
-    margin-right: 8px;
-    font-size: 1rem
+.site-card-tag.power {
+    background-color: var(--sco-purple)
 }
 
-.author-content-item.single.reward .post-reward .reward-main {
-    top: 60px;
-    right: 0;
-    left: auto;
-    bottom: auto;
-    width: fit-content;
-    box-shadow: var(--sco-shadow-border)
+.light {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    width: 100px;
+    height: 50px;
+    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
+    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
+    -webkit-animation: light_tag 4s both infinite;
+    -ms-animation: light_tag 4s both infinite;
+    animation: light_tag 4s both infinite
 }
 
-.author-content-item.single.reward .post-reward .reward-main .reward-all::before {
-    bottom: auto;
-    top: -16px
+.site-card-tag.speed {
+    background: var(--sco-green);
+    box-shadow: var(--sco-shadow-green)
 }
 
-.author-content-item.single.reward a.reward-main-btn {
-    display: none
+.weixin:hover::after {
+    transform: scale(1);
+    opacity: 1
 }
 
-.author-content-item.game-apex {
-    min-height: 300px;
-    overflow: hidden;
-    color: var(--sco-white);
-    width: 59%
+#error-wrap .error-content {
+    box-shadow: none !important;
+    border-radius: 12px;
+    background: var(--sco-card-bg) !important
 }
 
-.author-content-item .card-content {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 2;
+#body-wrap.error {
     display: flex;
     flex-direction: column;
-    padding: 1rem 2rem
+    justify-content: center;
+    align-items: center;
+    padding: 50px 1rem 1rem;
+    position: relative
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item .card-content {
-        padding: 1rem
-    }
+#body-wrap.error .aside-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    margin: 1rem;
+    max-width: 100%
 }
 
-@media screen and (min-width: 1300px) {
-    .author-content-item {
-        animation: slide-in .6s 0s backwards
-    }
+#body-wrap.error .aside-list .aside-list-group {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 800px;
+    margin: 0 auto;
+    justify-content: space-between
 }
 
-.author-content-item.game-apex::after {
-    box-shadow: 0 -69px 203px 11px #04120f inset;
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
+#body-wrap.error .aside-list .aside-list-item {
+    padding: .5rem 0;
+    width: 49%
 }
 
-video.author-content-video {
-    position: absolute;
+#body-wrap.error .aside-list .aside-list-item img {
     width: 100%;
-    top: 0;
-    left: 0;
-    z-index: -1
+    object-fit: cover;
+    border-radius: 12px
 }
 
-.author-content-item .content-bottom {
-    margin-top: auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between
+#body-wrap.error .aside-list .aside-list-item .thumbnail {
+    overflow: hidden;
+    width: 100%;
+    height: 200px;
+    background: var(--sco-card-bg);
+    display: flex
 }
 
-.author-content-item .content-bottom .icon-group {
-    display: flex
+#body-wrap.error .aside-list .aside-list-item .content .title {
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    line-height: 1.5;
+    justify-content: center;
+    align-items: flex-end;
+    align-content: center;
+    padding-top: .5rem;
+    font-size: 16px;
+    font-weight: 700
 }
 
-.author-content-item .content-bottom .icon-group i {
-    display: inline-block;
-    width: 22px;
-    height: 18px;
-    margin-right: .5rem
+#body-wrap.error .aside-list .aside-list-item .content time {
+    display: none
 }
 
-.icon-pos-sup {
-    background: url(https://bu.dusays.com/2023/03/12/640dc913ee26b.webp)
+@media screen and (max-width: 768px) {
+    #body-wrap.error {
+        padding-top: 0
+    }
+
+    #body-wrap.error .aside-list {
+        margin: 0
+    }
+
+    #body-wrap.error .aside-list .aside-list-item .thumbnail {
+        height: 100px
+    }
 }
 
-.icon-pos-mid {
-    background: url(https://bu.dusays.com/2023/03/12/640dc931a2cd4.webp)
+.bb-info {
+    display: inline;
+    float: right;
+    line-height: 1;
+    color: var(--sco-secondtext);
+    margin-left: auto;
+    margin-bottom: 1rem;
+    margin-right: .5rem
 }
 
-.author-content-item.game-jl {
-    width: 39%;
-    min-height: 300px;
-    overflow: hidden;
-    color: var(--sco-white)
+.bb-info:hover {
+    color: var(--sco-hovertext)
 }
 
-.author-content-item.game-jl::after {
-    box-shadow: 0 -69px 203px 11px #415dc9 inset;
-    position: absolute;
-    content: '';
+.load-btn.button-load {
+    background: var(--sco-card-btn-bg);
+    color: var(--sco-fontcolor);
+    padding: 12px 12px;
+    margin: 1.5rem 0 0 0;
     width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
+    text-align: center;
+    border-radius: 12px;
+    transition: .3s;
+    font-weight: 700
 }
 
-.author-content-item.like-technology {
-    background-size: cover;
-    min-height: 230px;
-    color: var(--sco-white)
+.load-btn.button-load:hover {
+    background: var(--sco-blue);
+    color: var(--sco-white);
+    transition: .3s;
+    box-shadow: var(--sco-shadow-blue)
 }
 
-.author-content-item.like-technology::after {
-    box-shadow: 0 -69px 203px 11px #050b20 inset;
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
+#cf-container a {
+    width: fit-content
 }
 
-.author-content-item.like-music {
-    background-size: cover;
-    min-height: 400px;
-    color: var(--sco-white);
-    overflow: hidden
+#hexo-circle-of-friends-root {
+    margin: 0 -8px
 }
 
-.author-content-item.like-music::after {
-    box-shadow: 0 -69px 203px 11px #0e0e0e inset;
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
+.friend_post_time {
+    margin-left: 8px;
+    color: var(--sco-secondtext)
 }
 
-.author-content-item .card-content .author-content-item-title {
-    margin-bottom: .5rem
+.friendlink-avatar {
+    width: 3rem;
+    height: 3rem;
+    min-width: 3rem;
+    min-height: 3rem;
+    border-radius: 32px;
+    overflow: hidden;
+    background: var(--sco-secondbg);
+    padding: 0 !important
 }
 
-.author-content-item .card-content .banner-button-group {
-    position: absolute;
-    bottom: 1.5rem;
-    right: 2rem
+.friendlink-avatar:hover {
+    border-radius: 32px !important;
+    background: var(--sco-secondbg)
 }
 
-.author-content-item .card-content .banner-button-group .banner-button {
-    height: 40px;
-    width: 118px;
-    border-radius: 20px;
-    justify-content: center;
-    background: var(--sco-black-op);
-    color: var(--sco-white);
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    transition: .3s;
-    cursor: pointer;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
+a.bb-link {
+    margin-left: 8px;
+    color: var(--sco-secondtext) !important;
+    display: inline;
+    border: none !important
 }
 
-.author-content-item .card-content .banner-button-group .banner-button:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
+a.bb-link-info {
+    display: inline;
+    float: right;
+    border: none !important;
+    color: var(--sco-secondtext) !important;
+    line-height: 2.7rem
 }
 
-.author-content-item .card-content .banner-button-group .banner-button i {
-    margin-right: 8px;
-    font-size: 22px
+a.bb-link-info:hover {
+    color: var(--sco-fontcolor) !important;
+    background: 0 0 !important
 }
 
-@media screen and (max-width: 768px) {
-    .author-content-item .card-content .banner-button-group {
-        right: 1rem;
-        bottom: 1rem
-    }
+.friendlink-avatar {
+    border-bottom: none !important
+}
 
-    .author-content-item .card-content .banner-button-group .banner-button {
-        background: 0 0;
-        color: var(--sco-white);
-        padding: 0;
-        width: fit-content
-    }
+.chart {
+    align-items: flex-start;
+    flex: 1;
+    width: 100px;
+    height: 60px;
+    margin: 20px
+}
 
-    .author-content-item .card-content .banner-button-group .banner-button i {
-        margin-right: 0;
-        font-size: 1.5rem
+@media screen and (max-width: 500px) {
+    #info_user_pool {
+        padding: 10px;
+        flex-direction: column;
+        max-height: 200px
     }
 
-    .author-content-item .card-content .banner-button-group .banner-button-text {
-        display: none
+    .chart {
+        flex: 0;
+        width: 100%;
+        height: 160px;
+        margin: 0
     }
 }
 
-.author-content-item.single.like-movie {
-    height: 19rem;
-    background-size: cover;
-    color: var(--sco-white);
-    overflow: hidden
-}
-
-.author-content-item.single.like-movie::after {
-    box-shadow: 0 21px 133px 81px #1c1c1c inset;
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0
+#info_user_pool {
+    background: var(--sco-secondbg);
+    border-radius: 12px !important;
+    margin-top: 1rem;
+    box-shadow: none !important
 }
 
-#article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
-    padding: 8px 12px;
-    background: var(--sco-white);
+.la-widget.la-data-widget__container {
     border-radius: 12px;
-    color: var(--sco-black);
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    transition: .3s;
-    cursor: pointer;
-    border: none
-}
-
-#article-container .author-content-item.single.like-movie .banner-button-group .banner-button:hover {
-    background: #d0b247;
-    color: var(--sco-white)
+    border: var(--style-border) !important;
+    box-shadow: var(--sco-shadow-border);
+    border-color: var(--sco-card-border)
 }
 
-#article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
-    margin-right: 8px;
-    font-size: 1rem
+.page-title {
+    display: none
 }
 
-@media screen and (max-width: 768px) {
-    #article-container .author-content-item.single.like-movie .banner-button-group {
-        right: 1rem;
-        bottom: 1rem
-    }
-
-    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
-        background: 0 0;
-        color: var(--sco-white);
-        padding: 0
-    }
-
-    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
-        margin-right: 0;
-        font-size: 1.5rem
-    }
-
-    #article-container .author-content-item.single.like-movie .banner-button-group .banner-button-text {
-        display: none
-    }
-}
 
-.author-content.author-content-item.toolPage {
-    height: 19rem;
-    background-size: cover;
-    color: var(--sco-white);
-    overflow: hidden;
-    margin-top: 0
+.inline-word {
+    word-break: keep-all;
+    white-space: nowrap
 }
 
 @media screen and (min-width: 768px) {
@@ -11095,25 +2117,6 @@ video.author-content-video {
     }
 }
 
-.pagination input {
-    width: 40px;
-    height: 40px;
-    border-radius: 8px;
-    border: var(--style-border-always);
-    transition: .3s;
-    outline-style: none;
-    font-size: 16px;
-    padding-left: 12px;
-    background: var(--sco-secondbg);
-    color: var(--sco-fontcolor)
-}
-
-.pagination .toPageGroup input:focus, .pagination .toPageGroup:hover input {
-    border: var(--style-border-hover-always);
-    outline-style: none;
-    width: 100px
-}
-
 .toPageGroup {
     display: flex;
     position: relative;
@@ -11178,12 +2181,59 @@ a#toPageButton.haveValue:hover {
     display: flex
 }
 
-@media screen and (max-width: 768px) {
-    .highlight .code pre .line {
-        font-size: 12px
-    }
+/*自定义高亮标签*/
 
-    .highlight .code pre .line span {
-        font-size: 8px
-    }
+#aside-content .card-tag-cloud a[href*="/tags/Kotlin/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
+}
+
+#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E6%95%B0%E5%AD%A6/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
+}
+
+#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E8%8B%B1%E8%AF%AD/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
+}
+
+#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E8%AF%AD%E6%96%87/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
+}
+
+#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E7%89%A9%E7%90%86/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
+}
+
+#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E7%94%9F%E7%89%A9/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
+}
+
+#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E5%9C%B0%E7%90%86/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
+}
+
+#aside-content .card-tag-cloud a[href*="/tags/Sketch/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
+}
+
+#aside-content .card-tag-cloud a[href*="/tags/%E8%AE%BE%E8%AE%A1/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
+}
+
+#aside-content .card-tag-cloud a[href*="/tags/%E5%B9%B2%E8%B4%A7/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
+}
+
+#aside-content .card-tag-cloud a[href*="/tags/%E6%95%99%E7%A8%8B/"] {
+    color: var(--sco-lighttext) !important;
+    font-weight: 500
 }
\ No newline at end of file
diff --git a/source/js/main.js b/source/js/main.js
index f9ce734a..f89d5460 100755
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,3 +1,73 @@
+const adjustMenu = (change = false) => {
+    const $blogName = document.getElementById('site-name')
+    let blogNameWidth = $blogName && $blogName.offsetWidth
+    const $menusEle = document.querySelector('#menus .menus_items')
+    let menusWidth = $menusEle && $menusEle.offsetWidth
+    const $searchEle = document.querySelector('#search-button')
+    let searchWidth = $searchEle && $searchEle.offsetWidth
+    if (change) {
+        blogNameWidth = $blogName && $blogName.offsetWidth
+        menusWidth = $menusEle && $menusEle.offsetWidth
+        searchWidth = $searchEle && $searchEle.offsetWidth
+    }
+    const $nav = document.getElementById('nav')
+    let t
+    if (window.innerWidth < 768) t = true
+    else t = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
+
+    if (t) {
+        $nav.classList.add('hide-menu')
+    } else {
+        $nav.classList.remove('hide-menu')
+    }
+}
+
+// 初始化header
+const initAdjust = () => {
+    adjustMenu()
+    document.getElementById('nav').classList.add('show')
+}
+
+/**
+ * side menu
+ */
+const sidebarFn = () => {
+    const $toggleMenu = document.getElementById('toggle-menu')
+    const $mobileSidebarMenus = document.getElementById('sidebar-menus')
+    const $menuMask = document.getElementById('menu-mask')
+    const $body = document.body
+
+    const isOpen = () => $mobileSidebarMenus.classList.contains('open')
+
+    function openMobileSidebar() {
+        utils.sidebarPaddingR()
+        $body.style.overflow = 'hidden'
+        utils.fadeIn($menuMask, 0.5)
+        $mobileSidebarMenus.classList.add('open')
+    }
+
+    function closeMobileSidebar() {
+        $body.style.overflow = ''
+        $body.style.paddingRight = ''
+        utils.fadeOut($menuMask, 0.5)
+        $mobileSidebarMenus.classList.remove('open')
+    }
+
+    $toggleMenu.addEventListener('click', openMobileSidebar)
+
+    $menuMask.addEventListener('click', () => {
+        if (isOpen()) {
+            closeMobileSidebar()
+        }
+    })
+
+    window.addEventListener('resize', () => {
+        if (utils.isHidden($toggleMenu) && isOpen()) {
+            closeMobileSidebar()
+        }
+    })
+}
+
 /**
  * 滚动处理
  */
@@ -67,46 +137,6 @@ const percent = () => {
 }
 
 
-/**
- * side menu
- */
-const sidebarFn = () => {
-    const $toggleMenu = document.getElementById('toggle-menu')
-    const $mobileSidebarMenus = document.getElementById('sidebar-menus')
-    const $menuMask = document.getElementById('menu-mask')
-    const $body = document.body
-
-    const isOpen = () => $mobileSidebarMenus.classList.contains('open')
-
-    function openMobileSidebar() {
-        utils.sidebarPaddingR()
-        $body.style.overflow = 'hidden'
-        utils.fadeIn($menuMask, 0.5)
-        $mobileSidebarMenus.classList.add('open')
-    }
-
-    function closeMobileSidebar() {
-        $body.style.overflow = ''
-        $body.style.paddingRight = ''
-        utils.fadeOut($menuMask, 0.5)
-        $mobileSidebarMenus.classList.remove('open')
-    }
-
-    $toggleMenu.addEventListener('click', openMobileSidebar)
-
-    $menuMask.addEventListener('click', () => {
-        if (isOpen()) {
-            closeMobileSidebar()
-        }
-    })
-
-    window.addEventListener('resize', () => {
-        if (utils.isHidden($toggleMenu) && isOpen()) {
-            closeMobileSidebar()
-        }
-    })
-}
-
 const showTodayCard = () => {
     const el = document.getElementById('todayCard')
     const topGroup = document.getElementsByClassName('topGroup')[0]
@@ -280,6 +310,7 @@ let sco = {
                 let data = await response.json();
                 return data[getMonthDate];
             }
+
             function append(parent, text) {
                 let temp = document.createElement('div');
                 temp.innerHTML = text;
@@ -289,6 +320,7 @@ let sco = {
                 }
                 parent.appendChild(frag);
             }
+
             fetchHistoryData().then(data => {
                 let html_item = data.map(item => `
             <div class="swiper-slide history_slide">
@@ -648,7 +680,7 @@ let sco = {
     /**
      * 一些日子灰色页面
      */
-    setFest: function (){
+    setFest: function () {
         let date = new Date();
         let currentDate = (date.getMonth() + 1) + '.' + date.getDate();
 
@@ -674,18 +706,18 @@ let sco = {
     /**
      * 个人信息顶部文字更新
      */
-    setTimeState: function (){
+    setTimeState: function () {
         const el = document.getElementById('author-info__sayhi');
         if (el) {
             const timeNow = new Date();
             const hours = timeNow.getHours();
             const lang = GLOBALCONFIG.lang.sayhello;
             const greetings = [
-                { start: 0, end: 5, text: lang.goodnight },
-                { start: 6, end: 10, text: lang.morning },
-                { start: 11, end: 14, text: lang.noon },
-                { start: 15, end: 18, text: lang.afternoon },
-                { start: 19, end: 24, text: lang.night },
+                {start: 0, end: 5, text: lang.goodnight},
+                {start: 6, end: 10, text: lang.morning},
+                {start: 11, end: 14, text: lang.noon},
+                {start: 15, end: 18, text: lang.afternoon},
+                {start: 19, end: 24, text: lang.night},
             ];
             for (let greeting of greetings) {
                 if (hours >= greeting.start && hours <= greeting.end) {
@@ -694,7 +726,7 @@ let sco = {
                 }
             }
         }
-    }
+    },
 }
 
 /*
@@ -800,6 +832,7 @@ class tabs {
 }
 
 window.refreshFn = () => {
+    initAdjust()
     scrollFn()
     sidebarFn()
     GLOBALCONFIG.comment.enable && newestCommentInit()

From 6d5ddd83b8730f3cad5e099ca0636ce6a574109a Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Mon, 20 Nov 2023 21:48:52 +0800
Subject: [PATCH 23/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

拆解main.css
---
 source/css/_layout/aside.styl  |   17 +
 source/css/_layout/base.styl   |  108 +-
 source/css/_layout/footer.styl |   80 ++
 source/css/_layout/index.styl  |   64 +
 source/css/_layout/layout.styl |   93 +-
 source/css/_page/about.styl    |   58 +-
 source/css/_page/category.styl |  150 +++
 source/css/_page/error.styl    |  101 +-
 source/css/_page/homeTop.styl  |  470 ++++++-
 source/css/_page/index.styl    |   14 +-
 source/css/_page/moment.styl   |   40 +
 source/css/_page/tag.styl      |   34 +
 source/css/_post/index.styl    |  325 +++++
 source/css/main.css            | 2183 --------------------------------
 14 files changed, 1541 insertions(+), 2196 deletions(-)
 create mode 100644 source/css/_page/category.styl
 create mode 100644 source/css/_page/tag.styl

diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index b18128c3..a2dbf562 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -1253,4 +1253,21 @@ div#author-info__sayhi:hover {
   display: flex;
   -webkit-box-orient: vertical;
   flex-direction: column
+}
+
+#card-info-btn {
+  border-radius: 25px;
+  overflow: hidden
+}
+
+#card-info-btn:before {
+  border-radius: 25px
+}
+
+.card-widget.card-recent-post {
+  padding: .4rem .6rem !important
+}
+
+#card-funds .funds-list::-webkit-scrollbar {
+  display: none !important
 }
\ No newline at end of file
diff --git a/source/css/_layout/base.styl b/source/css/_layout/base.styl
index 40202172..8cc7dfdd 100644
--- a/source/css/_layout/base.styl
+++ b/source/css/_layout/base.styl
@@ -7,6 +7,7 @@ html
   text-size-adjust 100%
   height: 100%;
   font-size: 20px
+  overflow-y: overlay
 
 main
   display block
@@ -76,6 +77,7 @@ hr
   box-sizing content-box
   height 0
   overflow visible
+  display: none
 
 pre
   font-family monospace, monospace
@@ -275,20 +277,36 @@ img:not([src]), img[src=""]
   transform scaleX(1)
 
 blockquote
-  margin 0 0 1rem
-  padding .1rem .8rem
   border-left .2rem solid #49b1f5
-  background-color var(--blockquote-bg)
-  color var(--blockquote-color)
+  border: var(--style-border-always);
+  background-color: var(--sco-secondbg);
+  color: var(--sco-secondtext);
+  border-radius: 8px;
+  margin: 1rem 0;
+  padding: .5rem .8rem
+
+  .pullquote
+    position relative
+    max-width 45%
+    font-size 110%
+
+    .left
+      left 0
+      margin 1em .5em 0 0
+
+    .right
+      right 0
+      margin 1em 0 0 .5em
+
 
 blockquote a
   color var(--blockquote-color)
 
 blockquote p
   margin 0 !important
-  padding .5rem 0
+  padding: 0
 
-li,ul
+li, ul
   list-style none
   display block
   margin 0
@@ -297,4 +315,80 @@ li,ul
 .li-style
   width 100%
   height 25px
-  text-align center
\ No newline at end of file
+  text-align center
+
+.fireworks
+  position fixed
+  top 0
+  left 0
+  z-index 9999
+  pointer-events none
+
+.katex-wrap
+  overflow auto
+
+.katex-wrap::-webkit-scrollbar
+  display none
+
+.video-container
+  position relative
+  overflow hidden
+  margin-bottom .8rem
+  padding-top 56.25%
+  height 0
+
+.video-container iframe
+  position absolute
+  top 0
+  left 0
+  margin-top 0
+  width 100%
+  height 100%
+
+::-webkit-scrollbar
+  width 6px
+  height 6px
+
+::-webkit-scrollbar-thumb
+  background var(--sco-scrollbar)
+  border-radius 8px
+  cursor pointer
+
+::-webkit-scrollbar-thumb:hover
+  background var(--sco-main)
+  opacity 1
+  display block !important
+
+::-webkit-scrollbar-track
+  background-color var(--sco-none)
+
+[data-theme=dark] img
+  filter brightness(1)
+
+a.extend.next
+  right 0
+
+a.extend.prev
+  left 0
+
+.table-wrap
+  margin 1rem 0
+  border-radius 8px
+
+table td, table th
+  border var(--style-border-always)
+
+table thead
+  background var(--sco-secondbg)
+
+b, strong
+  color var(--sco-lighttext)
+
+h1, h2, h3, h4, h5, h6
+  margin-top 1rem
+  padding-top 0
+  padding-left 0 !important
+  font-weight 700
+
+figure
+  margin-top .5rem !important
\ No newline at end of file
diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl
index 1c965f01..c8c1796a 100644
--- a/source/css/_layout/footer.styl
+++ b/source/css/_layout/footer.styl
@@ -380,4 +380,84 @@ img.footer_mini_logo:hover {
   -webkit-backface-visibility: hidden;
   -webkit-transform-style: preserve-3d;
   transform: scale(1.2)
+}
+
+#cookies-window {
+  min-width: 300px;
+  background: var(--sco-maskbgdeep);
+  color: var(--sco-fontcolor);
+  padding: 8px 16px;
+  display: flex;
+  flex-direction: column;
+  bottom: 20px;
+  right: 20px;
+  position: fixed;
+  border-radius: 12px;
+  transition: .3s;
+  z-index: 1002;
+  user-select: none;
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  transform: translateZ(0);
+  border: var(--style-border);
+  animation: barrageIn .6s cubic-bezier(.42, 0, .3, 1.11)
+}
+
+#cookies-window.cw-hide {
+  opacity: 0;
+  animation: barrageOut .6s cubic-bezier(.42, 0, .3, 1.11);
+  z-index: -1
+}
+
+#cookies-window .cookies-window-title {
+  padding-bottom: 4px;
+  border-bottom: var(--style-border);
+  font-size: 12px;
+  font-weight: 700
+}
+
+#cookies-window .cookies-window-content {
+  font-size: 14px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center
+}
+
+.cookie-to {
+  margin-right: 4px;
+  font-weight: 700
+}
+
+.cookies-link {
+  margin-left: auto;
+  font-size: 16px
+}
+
+.cookies-link i.scoicon {
+  font-size: 16px
+}
+
+@media screen and (max-width: 1300px) {
+  #cookies-window {
+    display: none
+  }
+}
+
+a.deal_link {
+  display: flex;
+  margin: 1rem 27px;
+  color: var(--sco-card-bg);
+  border-radius: 3rem;
+  width: 32px;
+  height: 32px;
+  background: var(--sco-fontcolor);
+  justify-content: center;
+  align-items: center;
+  transition: .3s
+}
+
+a.deal_link:hover {
+  color: var(--sco-white);
+  background: var(--sco-main);
+  transform: scale(1.1);
 }
\ No newline at end of file
diff --git a/source/css/_layout/index.styl b/source/css/_layout/index.styl
index 2bb379ae..71cb1263 100644
--- a/source/css/_layout/index.styl
+++ b/source/css/_layout/index.styl
@@ -210,4 +210,68 @@
 #post-info #post-meta a:hover {
   color: #307af6;
   text-decoration: underline
+}
+
+// 分页按钮
+.toPageGroup {
+  display: flex;
+  position: relative;
+  margin: 0 .3rem
+}
+
+a#toPageButton {
+  display: flex;
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  right: 0;
+  top: 0;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  transition: .3s;
+  background: var(--sco-card-bg);
+  border: var(--style-border-always);
+  cursor: text;
+  pointer-events: none
+}
+
+.toPageGroup:focus-within a#toPageButton, .toPageGroup:hover a#toPageButton {
+  width: 30px;
+  height: 30px;
+  right: 4px;
+  top: 5px;
+  background: var(--sco-card-bg);
+  border: 1px solid var(--sco-none);
+  border-radius: 4px;
+  opacity: .2
+}
+
+.toPageGroup:focus-within a#toPageButton.haveValue {
+  opacity: 1;
+  cursor: pointer
+}
+
+a#toPageButton.haveValue {
+  opacity: 1 !important;
+  cursor: pointer !important;
+  pointer-events: all
+}
+
+a#toPageButton.haveValue:hover {
+  background: var(--sco-theme);
+  color: var(--sco-white)
+}
+
+@media screen and (max-width: 768px) {
+  .toPageGroup {
+    display: none
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .needEndHide.hide {
+    bottom: -200px !important;
+    opacity: 0
+  }
 }
\ No newline at end of file
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
index d6405e55..22330f93 100644
--- a/source/css/_layout/layout.styl
+++ b/source/css/_layout/layout.styl
@@ -92,4 +92,95 @@
     display: none
 
   html.hide-aside .layout > div:first-child
-    width: 100%
\ No newline at end of file
+    width: 100%
+
+.hide-aside #page span.tags-punctuation::before {
+  font-size: 22px
+}
+
+#page .category-lists .category-title {
+  display: none
+}
+
+#page {
+  background: 0 0;
+  border: none;
+  padding: 0
+}
+
+@media screen and (min-width: 1300px) {
+  #page > div:not(.author-content-item) {
+    animation: slide-in .6s .2s backwards
+  }
+}
+
+#post-cover-rgb {
+  position: absolute;
+  width: 100% !important;
+  height: 100% !important;
+  background: var(--sco-lighttext)
+}
+
+#page {
+  box-shadow: none
+}
+
+
+.full_page #post-cover {
+  display: none
+}
+
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  z-index: 2000;
+  position: fixed;
+  margin: auto;
+  top: 4px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  border-radius: 8px;
+  width: 4rem;
+  background: var(--sco-secondbg);
+  border: var(--style-border);
+  overflow: hidden
+}
+
+.pace-inactive .pace-progress {
+  opacity: 0;
+  transition: .3s ease-in
+}
+
+.pace .pace-progress {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  max-width: 200px;
+  z-index: 2000;
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 100%;
+  height: 100%;
+  width: 100%;
+  background: var(--sco-logo-color);
+  animation: gradient 2s ease infinite;
+  background-size: 200%
+}
+
+.pace.pace-inactive {
+  opacity: 0;
+  transition: .3s;
+  top: -8px
+}
\ No newline at end of file
diff --git a/source/css/_page/about.styl b/source/css/_page/about.styl
index e1130f57..372b701b 100644
--- a/source/css/_page/about.styl
+++ b/source/css/_page/about.styl
@@ -1064,4 +1064,60 @@ video.author-content-video {
   .post-tips {
     left: 1rem
   }
-}
\ No newline at end of file
+}
+
+.inline-word {
+  word-break: keep-all;
+  white-space: nowrap
+}
+
+.main-hero-waves-area {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -11px;
+  z-index: 5
+}
+
+.waves-area .waves-svg {
+  width: 100%;
+  height: 60px
+}
+
+.parallax > use {
+  animation: move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
+}
+
+.parallax > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+  fill: var(--sco-background);
+  opacity: .5
+}
+
+.parallax > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+  fill: var(--sco-background);
+  opacity: .6
+}
+
+.parallax > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+  fill: var(--sco-background);
+  opacity: .7
+}
+
+.parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+  fill: var(--sco-background)
+}
+
+@media (max-width: 768px) {
+  .main-hero-waves-area {
+    display: none
+  }
+}
+
diff --git a/source/css/_page/category.styl b/source/css/_page/category.styl
new file mode 100644
index 00000000..65933363
--- /dev/null
+++ b/source/css/_page/category.styl
@@ -0,0 +1,150 @@
+.category-lists span.tags-punctuation {
+  font-size: 18px
+}
+
+.tags-name {
+  margin-left: 2px
+}
+
+#page .category-lists ul li::before {
+  display: none
+}
+
+#page .category-lists ul li {
+  margin: 0 8px 8px 0;
+}
+
+#page .category-lists ul {
+  display: flex;
+  padding: 0;
+  flex-wrap: wrap;
+  flex-direction: row
+}
+
+#page .category-lists ul li {
+  padding: 4px 16px;
+  width: 200px;
+  border-radius: 12px;
+  background: var(--sco-card-bg);
+  border: var(--style-border-always)
+}
+
+#page .category-lists {
+  padding: 1rem 0 1.5rem
+}
+
+@media screen and (max-width: 768px) {
+  #page .category-lists {
+    padding: 0
+  }
+}
+
+#page .category-lists .category-title {
+  font-size: 2.57em
+}
+
+@media screen and (max-width: 768px) {
+  #page .category-lists .category-title {
+    font-size: 2em
+  }
+}
+
+#page .category-lists .category-list a {
+  color: var(--sco-fontcolor)
+}
+
+#page .category-lists .category-list a:hover {
+  color: #307af6
+}
+
+#page .category-lists .category-list .category-list-count {
+  margin-left: .4rem;
+  color: #858585
+}
+
+#page .category-lists .category-list .category-list-count::before {
+  content: "("
+}
+
+#page .category-lists .category-list .category-list-count::after {
+  content: ")"
+}
+
+#page .category-lists ul {
+  margin-top: .4rem;
+  padding: 0 0 0 1rem;
+  list-style: none;
+  counter-reset: li 0
+}
+
+#page .category-lists ul ul {
+  padding-left: .2rem
+}
+
+#page .category-lists ul li {
+  position: relative;
+  margin: .3rem 0;
+  padding: .12em .4em .12em 1.4em
+}
+
+#page .category-lists ul li::before {
+  position: absolute;
+  left: 0;
+  cursor: pointer;
+  transition: all .3s ease-out 0s;
+  top: .7em;
+  width: .43em;
+  height: .43em;
+  border: .215em solid #307af6;
+  border-radius: .43em;
+  background: 0 0;
+  content: ""
+}
+
+#page .category-lists ul li:hover::before {
+  border-color: #ff7242
+}
+
+#page .tag-cloud-list a {
+  display: flex;
+  width: fit-content;
+  color: var(--sco-fontcolor) !important;
+  font-size: 1.4em !important;
+  padding: .2em .5em;
+  background: var(--sco-card-bg);
+  margin: .5em .5em;
+  border-radius: 12px;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d;
+  border: var(--style-border-always);
+  box-shadow: var(--sco-shadow-border);
+  align-items: center
+}
+
+#page .tag-cloud-list a:hover {
+  background: var(--sco-main) !important;
+  box-shadow: var(--sco-shadow-blue);
+  color: var(--sco-white) !important;
+  border: var(--style-border-hover)
+}
+
+span.tagsPageCount {
+  background: var(--sco-secondbg);
+  padding: 4px 4px;
+  border-radius: 8px;
+  color: var(--sco-secondtext);
+  line-height: 1;
+  text-align: center;
+  min-width: 35px;
+  display: inline-block;
+  font-size: 1rem;
+  margin-left: 4px
+}
+
+.category-lists span.tagsPageCount {
+  margin-left: 4px
+}
+
+#page .tag-cloud-list a:hover span.tagsPageCount {
+  color: var(--sco-lighttext)
+}
\ No newline at end of file
diff --git a/source/css/_page/error.styl b/source/css/_page/error.styl
index c5de7b9a..4561ec5a 100644
--- a/source/css/_page/error.styl
+++ b/source/css/_page/error.styl
@@ -104,4 +104,103 @@
 
 #error-wrap .error-content .error-info a i {
   padding-right: .3rem
-}
\ No newline at end of file
+}
+
+#error-wrap .error-content {
+  box-shadow: none !important;
+  border-radius: 12px;
+  background: var(--sco-card-bg) !important
+}
+
+#body-wrap.error {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 50px 1rem 1rem;
+  position: relative
+}
+
+#body-wrap.error .aside-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: 1rem;
+  max-width: 100%
+}
+
+#body-wrap.error .aside-list .aside-list-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 800px;
+  margin: 0 auto;
+  justify-content: space-between
+}
+
+#body-wrap.error .aside-list .aside-list-item {
+  padding: .5rem 0;
+  width: 49%
+}
+
+#body-wrap.error .aside-list .aside-list-item img {
+  width: 100%;
+  object-fit: cover;
+  border-radius: 12px
+}
+
+#body-wrap.error .aside-list .aside-list-item .thumbnail {
+  overflow: hidden;
+  width: 100%;
+  height: 200px;
+  background: var(--sco-card-bg);
+  display: flex
+}
+
+#body-wrap.error .aside-list .aside-list-item .content .title {
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-height: 1.5;
+  justify-content: center;
+  align-items: flex-end;
+  align-content: center;
+  padding-top: .5rem;
+  font-size: 16px;
+  font-weight: 700
+}
+
+#body-wrap.error .aside-list .aside-list-item .content time {
+  display: none
+}
+
+@media screen and (max-width: 768px) {
+  #body-wrap.error {
+    padding-top: 0
+  }
+
+  #body-wrap.error .aside-list {
+    margin: 0
+  }
+
+  #body-wrap.error .aside-list .aside-list-item .thumbnail {
+    height: 100px
+  }
+}
+
+.button--animated {
+  border-radius: 8px !important;
+  transition: .3s
+}
+
+#error-wrap .error-content .error-info a:hover {
+  background-color: var(--sco-blue);
+  transition: .3s;
+  box-shadow: var(--sco-shadow-blue)
+}
+
+.button--animated:before {
+  display: none
+}
+
diff --git a/source/css/_page/homeTop.styl b/source/css/_page/homeTop.styl
index fe61a89e..2c5587f3 100644
--- a/source/css/_page/homeTop.styl
+++ b/source/css/_page/homeTop.styl
@@ -181,7 +181,6 @@ span.recent-post-top-text {
 	padding: 0 !important;
 }
 
-// categories bar
 
 .recent-post-top .categoryGroup {
 	display: flex;
@@ -203,7 +202,7 @@ span.recent-post-top-text {
 
 	.categoryItem {
 		width: calc(100% / 3 - .33rem);
-		height: 100%;
+		height: 100% !important;
 		margin-right: .5rem
 	}
 
@@ -807,4 +806,471 @@ a.categoryButton:hover {
 .recent-post-item span.tags-punctuation {
 	margin-right: 0;
 	font-size: 13px
+}
+
+// category bar
+div#categoryList {
+	display: flex;
+	width: 100%;
+	justify-content: space-between
+}
+
+.categoryItem {
+	overflow: hidden;
+	transform: scale(1);
+	transition: all .8s cubic-bezier(.65, .15, .37, 1.19);
+	height: 48%;
+	border-radius: 12px
+}
+
+a.categoryButton {
+	height: 100%;
+	width: 100%;
+	background: var(--sco-card-bg);
+	border-radius: 12px;
+	display: inline-block;
+	text-align: left;
+	line-height: 4em;
+	font-weight: 700;
+	font-size: .9rem;
+	color: var(--sco-white);
+	transition: all .8s cubic-bezier(.39, .575, .565, 1);
+	transform: scale(1);
+	overflow: hidden;
+	font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei
+}
+
+a.categoryButton i {
+	transform: scale(1) rotate(15deg)
+}
+
+@media screen and (max-width: 768px) {
+	a.categoryButton {
+		border-radius: 8px
+	}
+
+	.categoryItem {
+		border-radius: 0;
+		height: 47%;
+		box-shadow: none !important
+	}
+}
+
+a.categoryButton:after {
+	top: 50px;
+	width: 1rem;
+	left: 21px;
+	height: 2px;
+	background: var(--sco-white);
+	content: "";
+	border-radius: 1px;
+	position: absolute
+}
+
+.categoryButtonText {
+	padding-left: 21px
+}
+
+a.categoryButton i {
+	font-size: 5rem;
+	opacity: .2;
+	position: absolute;
+	right: 0;
+	top: 20%;
+	transition: .3s;
+	width: 100px;
+	text-align: center;
+	filter: blur(2px)
+}
+
+.topGroup {
+	display: flex
+}
+
+#bannerGroup {
+	display: flex
+}
+
+div#banners {
+	display: none
+}
+
+.topGroup .todayCard {
+	display: none
+}
+
+@media screen and (min-width: 1200px) {
+	.topGroup {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		height: calc(328px + .5rem);
+		align-content: space-between;
+		width: calc(600px + 1.5rem);
+		position: relative;
+		animation: slide-in .6s .1s backwards
+	}
+
+	div#bannerGroup {
+		width: calc(100% - 600px - 2rem);
+		margin-right: .5rem;
+		height: calc(328px + .5rem);
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between
+	}
+
+	div#banners {
+		display: flex;
+		width: 100%;
+		height: 76%;
+		background: var(--sco-card-bg);
+		margin-bottom: .5rem;
+		border: var(--style-border);
+		border-radius: 12px;
+		overflow: hidden;
+		position: relative;
+		box-shadow: var(--sco-shadow-border);
+		flex-direction: column;
+		transition: .3s;
+		will-change: transform;
+		animation: slide-in .6s .1s backwards
+	}
+
+	div#banners:hover {
+		box-shadow: var(--sco-shadow-main)
+	}
+
+	#banners.flink {
+		margin-bottom: .5rem
+	}
+
+	#banners .banner-button-group {
+		position: absolute;
+		right: 2rem;
+		top: 2rem;
+		display: flex
+	}
+
+	#banners .banner-button {
+		padding: 8px 12px;
+		background: var(--sco-fontcolor);
+		border-radius: 12px;
+		color: var(--sco-card-bg);
+		display: flex;
+		align-items: center;
+		z-index: 1;
+		transition: .3s;
+		cursor: pointer;
+		box-shadow: var(--sco-shadow-black)
+	}
+
+	#banners .banner-button.secondary {
+		background: var(--sco-secondbg);
+		border: var(--style-border-always);
+		color: var(--sco-lighttext);
+		margin-right: 1rem;
+		box-shadow: var(--sco-shadow-border)
+	}
+
+	#banners .banner-button:hover {
+		background: var(--sco-theme);
+		color: var(--sco-white)
+	}
+
+	#banners .banner-button i {
+		margin-right: 8px;
+		font-size: 1rem
+	}
+
+	.banners-title {
+		top: 2rem;
+		left: 1.5rem;
+		position: absolute;
+		display: flex;
+		flex-direction: column
+	}
+
+	.flink .banners-title {
+		top: 1.5rem
+	}
+
+	.banners-title-big {
+		font-size: 36px;
+		line-height: 1;
+		font-weight: 700;
+		margin-bottom: 8px
+	}
+
+	.banners-title-small {
+		font-size: 12px;
+		line-height: 1;
+		color: var(--sco-secondtext);
+		margin-top: 8px;
+		margin-bottom: .5rem
+	}
+
+	#banner-hover {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		background: var(--sco-theme);
+		color: var(--sco-white);
+		padding-left: .5rem;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		opacity: 0;
+		transition: cubic-bezier(.71, .15, .16, 1.15) .6s
+	}
+
+	.bannerText {
+		font-size: 4rem;
+		line-height: 4rem;
+		font-weight: 700
+	}
+
+	.banner-righticon {
+		font-size: 4rem;
+		opacity: .6
+	}
+
+	#banners:hover #banner-hover {
+		opacity: 1;
+		padding-left: 2rem;
+		background: var(--sco-theme-op-deep);
+		backdrop-filter: blur(15px);
+		-webkit-backdrop-filter: blur(15px);
+		transform: translateZ(0);
+		-webkit-backface-visibility: hidden;
+		-webkit-transform-style: preserve-3d;
+		transition: .3s;
+		background-size: 200%;
+		cursor: pointer
+	}
+
+	#banners #banner-hover i {
+		font-size: 80px;
+		opacity: .4
+	}
+
+	.topGroup .todayCard {
+		position: absolute;
+		width: calc(600px + 1rem);
+		height: 100%;
+		z-index: 1;
+		top: 0;
+		left: 0;
+		background: var(--sco-card-bg);
+		border-radius: 12px;
+		margin-left: .5rem;
+		overflow: hidden;
+		transition: .3s;
+		display: flex;
+		cursor: pointer;
+		pointer-events: all
+	}
+
+	.topGroup .todayCard::after {
+		position: absolute;
+		content: '';
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0
+	}
+
+	.topGroup .todayCard.hide {
+		opacity: 0;
+		pointer-events: none
+	}
+
+	.topGroup .todayCard .todayCard-info {
+		position: absolute;
+		bottom: 2rem;
+		left: 2rem;
+		z-index: 2;
+		color: var(--sco-white);
+		max-width: 60%;
+		transition: .3s
+	}
+
+	.topGroup .todayCard.hide .todayCard-info {
+		bottom: 1rem;
+		opacity: 0
+	}
+
+	.topGroup .todayCard .todayCard-info .todayCard-tips {
+		opacity: .8;
+		font-size: .6rem
+	}
+
+	.topGroup .todayCard .todayCard-info .todayCard-title {
+		font-size: 28px;
+		font-weight: 700;
+		line-height: 36px
+	}
+
+	.topGroup .banner-button-group {
+		position: absolute;
+		right: 2rem;
+		bottom: 2rem;
+		display: flex;
+		transition: .3s
+	}
+
+	.topGroup .todayCard.hide .banner-button-group {
+		bottom: 1rem
+	}
+
+	.topGroup .banner-button {
+		background: var(--sco-white-op);
+		border-radius: 20px;
+		color: var(--sco-white);
+		display: flex;
+		align-items: center;
+		z-index: 1;
+		transition: .3s;
+		cursor: pointer;
+		backdrop-filter: saturate(180%) blur(20px);
+		-webkit-backdrop-filter: blur(20px);
+		transform: translateZ(0);
+		height: 40px;
+		width: 118px;
+		justify-content: center
+	}
+
+	.topGroup .banner-button:hover {
+		background: var(--sco-theme);
+		color: var(--sco-white)
+	}
+
+	.topGroup .banner-button i {
+		margin-right: 8px;
+		font-size: 22px
+	}
+
+	.topGroup .todayCard .todayCard-cover {
+		position: absolute;
+		min-width: 100%;
+		min-height: 100%;
+		top: 0;
+		left: 0;
+		background-size: cover;
+		z-index: -1;
+		transition: .3s
+	}
+
+	.topGroup .todayCard.hide .todayCard-cover {
+		transform: scale(1.2)
+	}
+}
+
+.tags-group-icon {
+	width: 120px;
+	height: 120px;
+	border-radius: 30px
+}
+
+.tags-group-all {
+	display: flex;
+	transform: rotate(-30deg)
+}
+
+.tags-group-all.nowrapMove {
+	transform: rotate(0);
+	padding-bottom: 2rem
+}
+
+.tags-group-wrapper {
+	margin-top: 5rem;
+	display: flex;
+	flex-wrap: nowrap;
+	animation: rowup 60s linear infinite
+}
+
+.nowrapMove .tags-group-wrapper {
+	margin-top: 7rem;
+	animation: rowup 120s linear infinite
+}
+
+.tags-group-icon-pair .tags-group-icon:nth-child(even) {
+	margin-top: 1rem;
+	transform: translate(-60px)
+}
+
+.tags-group-icon-pair {
+	margin-left: 1rem;
+	user-select: none
+}
+
+.tags-group-icon-pair a img {
+	border-radius: 50% !important
+}
+
+.tags-group-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #fff;
+	font-size: 66px;
+	font-weight: 700;
+	box-shadow: var(--sco-shadow-blackdeep)
+}
+
+.nowrapMove .tags-group-icon {
+	border-radius: 50%
+}
+
+.tags-group-icon img {
+	width: 60%
+}
+
+.nowrapMove .tags-group-icon img {
+	min-width: 100%;
+	min-height: 100%;
+	border-radius: 50%;
+	object-fit: cover
+}
+
+#categoryList > div:nth-child(1) > a::before {
+	height: 24px;
+	width: 44px;
+	content: "";
+	background-size: 38px 24px;
+	position: absolute;
+	top: 0;
+	left: 0
+}
+
+.categoryItem:hover i {
+	opacity: .8;
+	transition: .8s;
+	transition-delay: .15s;
+	transform: scale(1.03) rotate(0);
+	font-size: 2.5rem;
+	filter: blur(0)
+}
+
+@media screen and (min-width: 1300px) {
+	.categoryItem:hover i {
+		transform: scale(1.03) rotate(0)
+	}
+}
+
+#categoryList > a:nth-child(0) > i {
+	padding-right: 8px
+}
+
+.cate-button-text {
+	box-shadow: var(--sco-shadow-black)
+}
+
+@media screen and (max-width: 768px) {
+	div#categoryList {
+		display: none
+	}
 }
\ No newline at end of file
diff --git a/source/css/_page/index.styl b/source/css/_page/index.styl
index 87e81461..6fe55c17 100644
--- a/source/css/_page/index.styl
+++ b/source/css/_page/index.styl
@@ -43,4 +43,16 @@
     animation slide-in .6s .3s backwards
 
     .category-in-bar-tips
-      margin-bottom .25rem
\ No newline at end of file
+      margin-bottom .25rem
+
+.page-title {
+  display: none
+}
+
+#page h1.page-title {
+  margin: .4rem 0 1rem
+}
+
+#page {
+  min-height: calc(100vh - 464px)
+}
\ No newline at end of file
diff --git a/source/css/_page/moment.styl b/source/css/_page/moment.styl
index 7d84bd6b..8f9c70e1 100644
--- a/source/css/_page/moment.styl
+++ b/source/css/_page/moment.styl
@@ -173,3 +173,43 @@
   box-shadow: none !important
 }
 
+#hexo-circle-of-friends-root {
+  margin: 0 -8px
+}
+
+#cf-container a {
+  width: fit-content
+}
+
+.title-h2-a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: .5rem
+}
+
+.title-h2-a a {
+  margin-left: .5rem;
+  color: var(--sco-secondtext);
+  font-weight: 700
+}
+
+.title-h2-a a:hover {
+  color: var(--sco-hovertext)
+}
+
+.title-h2-a-left {
+  display: flex;
+  align-items: center
+}
+
+.title-h2-a-left h2 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important
+}
+
+.title-h2-a-right {
+  font-size: 14px;
+  color: var(--sco-secondtext)
+}
+
diff --git a/source/css/_page/tag.styl b/source/css/_page/tag.styl
new file mode 100644
index 00000000..cdadd74b
--- /dev/null
+++ b/source/css/_page/tag.styl
@@ -0,0 +1,34 @@
+#tag #tag-page-tags {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0 -.75rem .5rem;
+}
+
+#tag #tag-page-tags a {
+  padding: .1rem .5rem;
+  margin: .25rem .25rem;
+  line-height: 1.6;
+  border-radius: 8px;
+  color: var(--sco-fontcolor) !important;
+  border: var(--style-border-always);
+  display: flex;
+  align-items: center
+}
+
+#tag #tag-page-tags a.select {
+  color: var(--sco-white) !important;
+  background: var(--sco-theme);
+  box-shadow: var(--sco-shadow-theme)
+}
+
+#tag #tag-page-tags a:hover {
+  color: var(--sco-white) !important;
+  background: var(--sco-theme);
+  box-shadow: var(--sco-shadow-theme)
+}
+
+#tag #tag-page-tags a.select .tagsPageCount {
+  background: var(--sco-card-bg);
+  color: var(--sco-lighttext)
+}
\ No newline at end of file
diff --git a/source/css/_post/index.styl b/source/css/_post/index.styl
index a027fbe1..d340a6e1 100644
--- a/source/css/_post/index.styl
+++ b/source/css/_post/index.styl
@@ -648,3 +648,328 @@ img.post-copyright__author_img_front {
   display: none
 }
 
+#post .tag_share .post-meta__tags span.tagsPageCount, #tag-page-tags .tagsPageCount {
+  padding: 2px;
+  background: var(--sco-card-bg);
+  border: var(--style-border-always);
+  min-width: 23px;
+  display: inline-block;
+  border-radius: 4px;
+  text-align: center;
+  font-size: .6rem;
+  color: var(--sco-fontcolor);
+  margin-left: 4px
+}
+
+span.tags-punctuation {
+  margin-right: 2px
+}
+
+span.tags-punctuation::before {
+  content: "\e071";
+  font-family: scoicon, serif !important;
+  font-size: 14px;
+  opacity: .4;
+}
+
+#post .tag_share .post-meta__tag-list {
+  display: flex;
+  padding: 0;
+  width: 100%;
+  flex-wrap: wrap;
+  flex-direction: row
+}
+
+#post .tag_share .post-meta__tag-list a {
+  margin-bottom: 8px;
+  margin-right: 8px
+}
+
+.post-tools {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  margin-top: 8px;
+  flex-wrap: wrap;
+  -webkit-user-select: none
+}
+
+.post-tools-left {
+  white-space: nowrap;
+  display: flex;
+  text-overflow: ellipsis;
+  flex-wrap: wrap
+}
+
+.post-tools-right {
+  padding-right: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: wrap
+}
+
+@media screen and (max-width: 768px) {
+  .post-tools-left > div {
+    margin: 8px
+  }
+
+  .post-tools-left {
+    white-space: nowrap;
+    display: flex;
+    text-overflow: ellipsis;
+    justify-content: center;
+    width: 100%
+  }
+
+  .post-tools-right {
+    margin-top: 1rem;
+    width: 100%;
+    justify-content: center
+  }
+}
+
+#qrcode {
+  width: 150px;
+  height: 150px;
+  min-width: 150px;
+  min-height: 150px;
+  background: var(--sco-white);
+  padding: 8px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  border: var(--style-border-always)
+}
+
+.share-link:hover .share-main {
+  opacity: 1;
+  transform: translateY(0)
+}
+
+.share-qrcode {
+  display: flex;
+  justify-content: center
+}
+
+@media screen and (max-width: 768px) {
+  .share-link.mobile {
+    display: none
+  }
+}
+
+.post-qr-code-img {
+  box-shadow: var(--sco-shadow-lightblack);
+  border-radius: 12px;
+  border: var(--style-border-always)
+}
+
+#quit-box {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, .2);
+  top: 0;
+  left: 0;
+  display: none;
+  z-index: 101;
+  margin: 0 !important
+}
+
+.post-tools-left #quit-box {
+  display: none
+}
+
+@media screen and (max-width: 768px) {
+  #quit-box {
+    z-index: 109;
+    height: calc(100vh - 380px);
+  }
+}
+
+#post > hr {
+  display: none
+}
+
+.img-alt {
+  font-size: 12px;
+  margin: 0;
+  color: var(--sco-secondtext)
+}
+
+.long-img .img-alt {
+  display: none
+}
+
+.long-img img {
+  border-radius: 0 !important;
+  margin: 0 !important
+}
+
+.meta-secondline > span {
+  opacity: .6;
+  transition: .3s;
+  margin-right: 1.1rem;
+}
+
+.meta-secondline span {
+  display: flex;
+  align-items: center;
+  line-height: 1
+}
+
+@media screen and (max-width: 768px) {
+  .meta-secondline span {
+    line-height: 1.5
+  }
+}
+
+#post-firstinfo {
+  text-align: left;
+  display: flex;
+  white-space: nowrap;
+  -webkit-user-select: none
+}
+
+.inline-image {
+  display: flex;
+  margin: 8px auto;
+  width: fit-content;
+  justify-content: center
+}
+
+.inline-image a:hover {
+  background: 0 0 !important;
+  box-shadow: none !important
+}
+
+.inline-image img {
+  margin: 0 !important;
+  display: inline-flex;
+}
+
+#post-info .post-title {
+  color: var(--sco-white);
+  font-weight: 700;
+  font-size: 2.3rem;
+  line-height: 1.2;
+  text-align: left;
+  margin: 1rem 0 1rem 0 !important;
+  -webkit-line-clamp: 2;
+  padding: 0;
+  overflow: hidden
+}
+
+@media screen and (max-width: 768px) {
+  #post-info .post-title {
+    font-size: 1.2rem;
+    -webkit-line-clamp: 3;
+    margin: .2rem auto !important;
+    text-align: center;
+    z-index: 1
+  }
+}
+
+.post-bg #post-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  min-width: 50vw;
+  min-height: 20rem;
+  opacity: .8
+}
+
+.coverdiv {
+  width: 70%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  margin: 0 -20% 0 auto;
+  transform: rotate(10deg) translateY(-10%) scale(2);
+  filter: blur(10px)
+}
+
+.coverdiv.loaded {
+  display: block
+}
+
+.coverdiv:after {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  box-shadow: 110px -130px 300px 60px var(--sco-main) inset
+}
+
+@media screen and (max-width: 768px) {
+  .coverdiv {
+    margin: 0 0 0 auto;
+    transform: rotate(0) translateY(0) scale(1);
+    filter: blur(0);
+    width: 100%;
+    position: fixed;
+    height: 30rem;
+    z-index: 1
+  }
+
+  .coverdiv:after {
+    box-shadow: 0 0 205px 59px var(--sco-main) inset
+  }
+}
+
+@media screen and (min-width: 1300px) {
+  .coverdiv {
+    width: 70%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    margin: 0 -20% 0 auto;
+    transform: rotate(10deg) translateY(-8%) scale(1.8);
+    filter: blur(10px);
+    opacity: 0
+  }
+
+  .coverdiv.loaded {
+    display: block;
+    opacity: .5;
+    animation: showCover 1s .3s backwards;
+    transform: rotate(10deg) translateY(-10%) scale(2)
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .coverdiv {
+    width: 70%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    margin: 0 -20% 0 auto;
+    transform: rotate(10deg) translateY(-8%) scale(1.8);
+    filter: blur(10px);
+    opacity: 0
+  }
+
+  .coverdiv.loaded {
+    display: block;
+    opacity: .5;
+    animation: showCover 1s .3s backwards;
+    transform: rotate(10deg) translateY(-10%) scale(2)
+  }
+
+  @keyframes showCover {
+    from {
+      opacity: 0;
+      transform: rotate(10deg) translateY(-8%) scale(1.8)
+    }
+
+    to {
+      opacity: .5;
+      transform: rotate(10deg) translateY(-10%) scale(2)
+    }
+  }
+}
+
+#post h2 {
+  margin-top: 1.5rem
+}
diff --git a/source/css/main.css b/source/css/main.css
index 45c6ec18..b7fc6baa 100755
--- a/source/css/main.css
+++ b/source/css/main.css
@@ -1,2188 +1,5 @@
 @charset "UTF-8";
-
-#page .category-lists {
-    padding: 1rem 0 1.5rem
-}
-
-@media screen and (max-width: 768px) {
-    #page .category-lists {
-        padding: 0
-    }
-}
-
-#page .category-lists .category-title {
-    font-size: 2.57em
-}
-
-@media screen and (max-width: 768px) {
-    #page .category-lists .category-title {
-        font-size: 2em
-    }
-}
-
-#page .category-lists .category-list a {
-    color: var(--sco-fontcolor)
-}
-
-#page .category-lists .category-list a:hover {
-    color: #307af6
-}
-
-#page .category-lists .category-list .category-list-count {
-    margin-left: .4rem;
-    color: #858585
-}
-
-#page .category-lists .category-list .category-list-count::before {
-    content: "("
-}
-
-#page .category-lists .category-list .category-list-count::after {
-    content: ")"
-}
-
-#page .category-lists ul {
-    margin-top: .4rem;
-    padding: 0 0 0 1rem;
-    list-style: none;
-    counter-reset: li 0
-}
-
-#page .category-lists ul ul {
-    padding-left: .2rem
-}
-
-#page .category-lists ul li {
-    position: relative;
-    margin: .3rem 0;
-    padding: .12em .4em .12em 1.4em
-}
-
-#page .category-lists ul li::before {
-    position: absolute;
-    left: 0;
-    cursor: pointer;
-    transition: all .3s ease-out 0s;
-    top: .7em;
-    width: .43em;
-    height: .43em;
-    border: .215em solid #307af6;
-    border-radius: .43em;
-    background: 0 0;
-    content: ""
-}
-
-#page .category-lists ul li:hover::before {
-    border-color: #ff7242
-}
-
-.tag-cloud-list a {
-    display: inline-block;
-    padding: 0 .4rem;
-    transition: all .3s ease 0s
-}
-
-.tag-cloud-list a:hover {
-    transform: scale(1.1);
-    color: #307af6 !important
-}
-
-@media screen and (max-width: 768px) {
-    .tag-cloud-list a {
-        zoom: .85
-    }
-}
-
-.tag-cloud-title {
-    font-size: 2.57em
-}
-
-@media screen and (max-width: 768px) {
-    .tag-cloud-title {
-        font-size: 2em
-    }
-}
-
-#page h1.page-title {
-    margin: .4rem 0 1rem
-}
-
-.fireworks {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 9999;
-    pointer-events: none
-}
-
-.medium-zoom-image--opened {
-    z-index: 99999 !important;
-    margin: 0 !important
-}
-
-.medium-zoom-overlay {
-    z-index: 99999 !important
-}
-
-.mermaid {
-    overflow: auto;
-    margin: 0 0 1rem;
-    background: #fff;
-    text-align: center;
-    opacity: 0;
-    transition: all .3s ease 0s
-}
-
-.mermaid[data-processed] {
-    opacity: 1;
-    filter: none
-}
-
-.katex-wrap {
-    overflow: auto
-}
-
-.katex-wrap::-webkit-scrollbar {
-    display: none
-}
-
-blockquote.pullquote {
-    position: relative;
-    max-width: 45%;
-    font-size: 110%
-}
-
-blockquote.pullquote.left {
-    float: left;
-    margin: 1em .5em 0 0
-}
-
-blockquote.pullquote.right {
-    float: right;
-    margin: 1em 0 0 .5rem
-}
-
-.video-container {
-    position: relative;
-    overflow: hidden;
-    margin-bottom: .8rem;
-    padding-top: 56.25%;
-    height: 0
-}
-
-.video-container iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin-top: 0;
-    width: 100%;
-    height: 100%
-}
-
-.hl-label {
-    padding: 2px 4px;
-    border-radius: 3px;
-    color: #fff
-}
-
-.hl-label.default {
-    background-color: #777
-}
-
-.hl-label.blue {
-    background-color: #428bca
-}
-
-.hl-label.pink {
-    background-color: #ff69b4
-}
-
-.hl-label.red {
-    background-color: red
-}
-
-.hl-label.purple {
-    background-color: #6f42c1
-}
-
-.hl-label.orange {
-    background-color: #ff8c00
-}
-
-.hl-label.green {
-    background-color: #5cb85c
-}
-
-#page {
-    min-height: calc(100vh - 464px)
-}
-
-::-webkit-scrollbar {
-    width: 6px;
-    height: 6px
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--sco-scrollbar);
-    border-radius: 8px;
-    cursor: pointer
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--sco-main);
-    opacity: 1;
-    display: block !important
-}
-
-::-webkit-scrollbar-track {
-    background-color: var(--sco-none)
-}
-
-html {
-    overflow-y: overlay
-}
-
-
-
-[data-theme=dark] img {
-    filter: brightness(1)
-}
-
-.site-page i.fa-chevron-down {
-    display: none
-}
-
-.fa, .fa-brands, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fat {
-    line-height: 1
-}
-
-hr {
-    display: none
-}
-
-#card-poem {
-    display: flex;
-    flex-direction: column;
-    padding: .5rem !important;
-    min-height: 130px
-}
-
-div#poem_sentence {
-    text-align: center;
-    font-family: serif, cursive;
-    line-height: 1.4;
-    margin-bottom: .5rem;
-    padding: 1rem;
-    border-radius: 12px;
-    background: var(--sco-secondbg);
-    min-height: 62px
-}
-
-div#poem_info {
-    display: flex;
-    color: var(--sco-secondtext);
-    font-size: .5rem;
-    justify-content: center;
-    flex-wrap: wrap
-}
-
-div#poem_author {
-    order: 1;
-    padding: 2px;
-    margin-left: 8px
-}
-
-div#poem_dynasty {
-    order: 0;
-    padding: 2px 4px 2px 6px;
-    background: var(--sco-card-btn-bg);
-    color: var(--sco-fontcolor);
-    border-radius: 8px
-}
-
-a.deal_link {
-    display: flex;
-    margin: 1rem 27px;
-    color: var(--sco-card-bg);
-    border-radius: 3rem;
-    width: 32px;
-    height: 32px;
-    background: var(--sco-fontcolor);
-    justify-content: center;
-    align-items: center;
-    transition: .3s
-}
-
-a.deal_link:hover {
-    color: var(--sco-white);
-    background: var(--sco-main);
-    transform: scale(1.1);
-}
-
-#algolia-hits .tag-list:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-}
-
-#card-info-btn {
-    border-radius: 25px;
-    overflow: hidden
-}
-
-#card-info-btn:before {
-    border-radius: 25px
-}
-
-.not-index-bg {
-    height: 2rem !important;
-    background-image: none !important;
-    background-color: var(--sco-none) !important
-}
-
-.not-index-bg img {
-    display: none
-}
-
-.not-index-bg #page-site-info {
-    display: none
-}
-
-.pace {
-    -webkit-pointer-events: none;
-    pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    z-index: 2000;
-    position: fixed;
-    margin: auto;
-    top: 4px;
-    left: 0;
-    right: 0;
-    height: 8px;
-    border-radius: 8px;
-    width: 4rem;
-    background: var(--sco-secondbg);
-    border: var(--style-border);
-    overflow: hidden
-}
-
-.pace-inactive .pace-progress {
-    opacity: 0;
-    transition: .3s ease-in
-}
-
-.pace .pace-progress {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    -o-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    -o-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    max-width: 200px;
-    z-index: 2000;
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 100%;
-    height: 100%;
-    width: 100%;
-    background: var(--sco-logo-color);
-    animation: gradient 2s ease infinite;
-    background-size: 200%
-}
-
-.pace.pace-inactive {
-    opacity: 0;
-    transition: .3s;
-    top: -8px
-}
-
-.card-widget.card-recent-post {
-    padding: .4rem .6rem !important
-}
-
-.main-hero-waves-area {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    bottom: -11px;
-    z-index: 5
-}
-
-.waves-area .waves-svg {
-    width: 100%;
-    height: 60px
-}
-
-.parallax > use {
-    animation: move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
-}
-
-.parallax > use:nth-child(1) {
-    animation-delay: -2s;
-    animation-duration: 7s;
-    fill: var(--sco-background);
-    opacity: .5
-}
-
-.parallax > use:nth-child(2) {
-    animation-delay: -3s;
-    animation-duration: 10s;
-    fill: var(--sco-background);
-    opacity: .6
-}
-
-.parallax > use:nth-child(3) {
-    animation-delay: -4s;
-    animation-duration: 13s;
-    fill: var(--sco-background);
-    opacity: .7
-}
-
-.parallax > use:nth-child(4) {
-    animation-delay: -5s;
-    animation-duration: 20s;
-    fill: var(--sco-background)
-}
-
-@media (max-width: 768px) {
-    .main-hero-waves-area {
-        display: none
-    }
-}
-
-.medium-zoom-overlay {
-    background: var(--sco-maskbg) !important;
-    z-index: 99998 !important;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
-}
-
-.medium-zoom-image--opened {
-    border-radius: 2px
-}
-
-.button--animated {
-    border-radius: 8px !important;
-    transition: .3s
-}
-
-#error-wrap .error-content .error-info a:hover {
-    background-color: var(--sco-blue);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-blue)
-}
-
-.button--animated:before {
-    display: none
-}
-
-a.tree-list-post-link {
-    font-size: .8rem;
-    line-height: 1.2 !important
-}
-
-li.tree-list-item {
-    line-height: 1.9;
-    margin: .3rem 0
-}
-
-.title-h2-a {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: .5rem
-}
-
-.title-h2-a a {
-    margin-left: .5rem;
-    color: var(--sco-secondtext);
-    font-weight: 700
-}
-
-.title-h2-a a:hover {
-    color: var(--sco-hovertext)
-}
-
-.title-h2-a-left {
-    display: flex;
-    align-items: center
-}
-
-.title-h2-a-left h2 {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important
-}
-
-.title-h2-a-right {
-    font-size: 14px;
-    color: var(--sco-secondtext)
-}
-
-#card-funds .funds-list::-webkit-scrollbar {
-    display: none !important
-}
-
-.funds-tips {
-    font-size: .5rem;
-    width: 100%;
-    text-align: center;
-    color: var(--sco-secondtext);
-    margin: .5rem 0 0 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    position: absolute;
-    bottom: .5rem;
-    left: 0;
-    padding: 0 1rem
-}
-
-.funds-list {
-    height: 200px;
-    overflow: scroll
-}
-
-span.fund_name {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis
-}
-
-.funds-info {
-    margin-left: 4px;
-    color: var(--sco-secondtext)
-}
-
-.funds-list-item .content {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    flex-wrap: nowrap
-}
-
-.fund_dayGrowth {
-    display: inline;
-    float: right
-}
-
-.fund-up {
-    color: var(--sco-red)
-}
-
-.fund-down {
-    color: var(--sco-green)
-}
-
-.music-link {
-    display: flex;
-    justify-content: center;
-    align-content: center
-}
-
-.friend-link {
-    display: flex;
-    justify-content: center;
-    align-content: center
-}
-
-#widget-tree-button {
-    background-color: var(--sco-secondbg) !important;
-    box-shadow: var(--sco-shadow-light2black) !important;
-    color: var(--sco-fontcolor)
-}
-
-#widget-tree:hover #widget-tree-button {
-    opacity: 0;
-    left: -1.5rem
-}
-
-#widget-tree {
-    background-color: var(--sco-maskbg) !important
-}
-
-#widget-tree:hover {
-    left: 0 !important;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
-}
-
-#widget-tree a {
-    -webkit-line-clamp: 2;
-    color: var(--sco-fontcolor) !important
-}
-
-#widget-tree a:hover {
-    color: var(--sco-hovertext) !important
-}
-
-.toggle-post-icon, .toggle-toc-icon {
-    color: var(--sco-fontcolor) !important
-}
-
-@media screen and (max-width: 768px) {
-    #widget-tree {
-        display: none !important
-    }
-}
-
-.guli_top {
-    position: fixed;
-    z-index: 99;
-    right: 30px;
-    display: flex;
-    transition: .3s;
-    opacity: 0;
-    bottom: -25px;
-    width: 88px;
-    height: 123px;
-    user-select: none
-}
-
-.guli_top.guli-fixed {
-    opacity: 1;
-    bottom: 25px
-}
-
-#guli_top .guli_body {
-    position: relative;
-    height: 123px;
-    z-index: 1003
-}
-
-#guli_top .guli_body:hover {
-    cursor: pointer
-}
-
-#guli_top .guli_wing {
-    position: relative;
-    height: 64px;
-    z-index: 1002;
-    bottom: -120px;
-    transform: scale(.01);
-    box-shadow: var(--sco-shadow-yellow)
-}
-
-#guli_top.open_wing .guli_wing {
-    transform: scale(1.03)
-}
-
-#guli_top.open_wing .guli_body {
-    transform: scale(1)
-}
-
-@media screen and (max-width: 1300px) {
-    #guli_top {
-        display: none
-    }
-}
-
-#cookies-window {
-    min-width: 300px;
-    background: var(--sco-maskbgdeep);
-    color: var(--sco-fontcolor);
-    padding: 8px 16px;
-    display: flex;
-    flex-direction: column;
-    bottom: 20px;
-    right: 20px;
-    position: fixed;
-    border-radius: 12px;
-    transition: .3s;
-    z-index: 1002;
-    user-select: none;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-    transform: translateZ(0);
-    border: var(--style-border);
-    animation: barrageIn .6s cubic-bezier(.42, 0, .3, 1.11)
-}
-
-#cookies-window.cw-hide {
-    opacity: 0;
-    animation: barrageOut .6s cubic-bezier(.42, 0, .3, 1.11);
-    z-index: -1
-}
-
-#cookies-window .cookies-window-title {
-    padding-bottom: 4px;
-    border-bottom: var(--style-border);
-    font-size: 12px;
-    font-weight: 700
-}
-
-#cookies-window .cookies-window-content {
-    font-size: 14px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center
-}
-
-.cookie-to {
-    margin-right: 4px;
-    font-weight: 700
-}
-
-.cookies-link {
-    margin-left: auto;
-    font-size: 16px
-}
-
-.cookies-link i.scoicon {
-    font-size: 16px
-}
-
-@media screen and (max-width: 1300px) {
-    #cookies-window {
-        display: none
-    }
-}
-
-.heo-tag {
-    padding: 1px 6px;
-    border-radius: 6px 6px 6px 0;
-    margin-left: 4px;
-    height: 20px;
-    line-height: 19px
-}
-
-.heo-tag-new-view {
-    color: var(--sco-white);
-    background: var(--sco-green)
-}
-
-.heo-tag-hot-view {
-    color: var(--sco-white);
-    background: var(--sco-red)
-}
-
-
-
-
-
-div#categoryList {
-    display: flex;
-    width: 100%;
-    justify-content: space-between
-}
-
-.categoryItem {
-    overflow: hidden;
-    transform: scale(1);
-    transition: all .8s cubic-bezier(.65, .15, .37, 1.19);
-    height: 48%;
-    border-radius: 12px
-}
-
-a.categoryButton {
-    height: 100%;
-    width: 100%;
-    background: var(--sco-card-bg);
-    border-radius: 12px;
-    display: inline-block;
-    text-align: left;
-    line-height: 4em;
-    font-weight: 700;
-    font-size: .9rem;
-    color: var(--sco-white);
-    transition: all .8s cubic-bezier(.39, .575, .565, 1);
-    transform: scale(1);
-    overflow: hidden;
-    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei
-}
-
-a.categoryButton i {
-    transform: scale(1) rotate(15deg)
-}
-
-@media screen and (max-width: 768px) {
-    a.categoryButton {
-        border-radius: 8px
-    }
-
-    .categoryItem {
-        border-radius: 0;
-        height: 47%;
-        box-shadow: none !important
-    }
-}
-
-a.categoryButton:after {
-    top: 50px;
-    width: 1rem;
-    left: 21px;
-    height: 2px;
-    background: var(--sco-white);
-    content: "";
-    border-radius: 1px;
-    position: absolute
-}
-
-.categoryButtonText {
-    padding-left: 21px
-}
-
-a.categoryButton i {
-    font-size: 5rem;
-    opacity: .2;
-    position: absolute;
-    right: 0;
-    top: 20%;
-    transition: .3s;
-    width: 100px;
-    text-align: center;
-    filter: blur(2px)
-}
-
-.topGroup {
-    display: flex
-}
-
-#bannerGroup {
-    display: flex
-}
-
-div#banners {
-    display: none
-}
-
-.topGroup .todayCard {
-    display: none
-}
-
-@media screen and (min-width: 1200px) {
-    .topGroup {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        height: calc(328px + .5rem);
-        align-content: space-between;
-        width: calc(600px + 1.5rem);
-        position: relative;
-        animation: slide-in .6s .1s backwards
-    }
-
-    div#bannerGroup {
-        width: calc(100% - 600px - 2rem);
-        margin-right: .5rem;
-        height: calc(328px + .5rem);
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between
-    }
-
-    div#banners {
-        display: flex;
-        width: 100%;
-        height: 76%;
-        background: var(--sco-card-bg);
-        margin-bottom: .5rem;
-        border: var(--style-border);
-        border-radius: 12px;
-        overflow: hidden;
-        position: relative;
-        box-shadow: var(--sco-shadow-border);
-        flex-direction: column;
-        transition: .3s;
-        will-change: transform;
-        animation: slide-in .6s .1s backwards
-    }
-
-    div#banners:hover {
-        box-shadow: var(--sco-shadow-main)
-    }
-
-    #banners.flink {
-        margin-bottom: .5rem
-    }
-
-    #banners .banner-button-group {
-        position: absolute;
-        right: 2rem;
-        top: 2rem;
-        display: flex
-    }
-
-    #banners .banner-button {
-        padding: 8px 12px;
-        background: var(--sco-fontcolor);
-        border-radius: 12px;
-        color: var(--sco-card-bg);
-        display: flex;
-        align-items: center;
-        z-index: 1;
-        transition: .3s;
-        cursor: pointer;
-        box-shadow: var(--sco-shadow-black)
-    }
-
-    #banners .banner-button.secondary {
-        background: var(--sco-secondbg);
-        border: var(--style-border-always);
-        color: var(--sco-lighttext);
-        margin-right: 1rem;
-        box-shadow: var(--sco-shadow-border)
-    }
-
-    #banners .banner-button:hover {
-        background: var(--sco-theme);
-        color: var(--sco-white)
-    }
-
-    #banners .banner-button i {
-        margin-right: 8px;
-        font-size: 1rem
-    }
-
-    .banners-title {
-        top: 2rem;
-        left: 1.5rem;
-        position: absolute;
-        display: flex;
-        flex-direction: column
-    }
-
-    .flink .banners-title {
-        top: 1.5rem
-    }
-
-    .banners-title-big {
-        font-size: 36px;
-        line-height: 1;
-        font-weight: 700;
-        margin-bottom: 8px
-    }
-
-    .banners-title-small {
-        font-size: 12px;
-        line-height: 1;
-        color: var(--sco-secondtext);
-        margin-top: 8px;
-        margin-bottom: .5rem
-    }
-
-    #banner-hover {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        background: var(--sco-theme);
-        color: var(--sco-white);
-        padding-left: .5rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        opacity: 0;
-        transition: cubic-bezier(.71, .15, .16, 1.15) .6s
-    }
-
-    .bannerText {
-        font-size: 4rem;
-        line-height: 4rem;
-        font-weight: 700
-    }
-
-    .banner-righticon {
-        font-size: 4rem;
-        opacity: .6
-    }
-
-    #banners:hover #banner-hover {
-        opacity: 1;
-        padding-left: 2rem;
-        background: var(--sco-theme-op-deep);
-        backdrop-filter: blur(15px);
-        -webkit-backdrop-filter: blur(15px);
-        transform: translateZ(0);
-        -webkit-backface-visibility: hidden;
-        -webkit-transform-style: preserve-3d;
-        transition: .3s;
-        background-size: 200%;
-        cursor: pointer
-    }
-
-    #banners #banner-hover i {
-        font-size: 80px;
-        opacity: .4
-    }
-
-    .topGroup .todayCard {
-        position: absolute;
-        width: calc(600px + 1rem);
-        height: 100%;
-        z-index: 1;
-        top: 0;
-        left: 0;
-        background: var(--sco-card-bg);
-        border-radius: 12px;
-        margin-left: .5rem;
-        overflow: hidden;
-        transition: .3s;
-        display: flex;
-        cursor: pointer;
-        pointer-events: all
-    }
-
-    .topGroup .todayCard::after {
-        position: absolute;
-        content: '';
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0
-    }
-
-    .topGroup .todayCard.hide {
-        opacity: 0;
-        pointer-events: none
-    }
-
-    .topGroup .todayCard .todayCard-info {
-        position: absolute;
-        bottom: 2rem;
-        left: 2rem;
-        z-index: 2;
-        color: var(--sco-white);
-        max-width: 60%;
-        transition: .3s
-    }
-
-    .topGroup .todayCard.hide .todayCard-info {
-        bottom: 1rem;
-        opacity: 0
-    }
-
-    .topGroup .todayCard .todayCard-info .todayCard-tips {
-        opacity: .8;
-        font-size: .6rem
-    }
-
-    .topGroup .todayCard .todayCard-info .todayCard-title {
-        font-size: 28px;
-        font-weight: 700;
-        line-height: 36px
-    }
-
-    .topGroup .banner-button-group {
-        position: absolute;
-        right: 2rem;
-        bottom: 2rem;
-        display: flex;
-        transition: .3s
-    }
-
-    .topGroup .todayCard.hide .banner-button-group {
-        bottom: 1rem
-    }
-
-    .topGroup .banner-button {
-        background: var(--sco-white-op);
-        border-radius: 20px;
-        color: var(--sco-white);
-        display: flex;
-        align-items: center;
-        z-index: 1;
-        transition: .3s;
-        cursor: pointer;
-        backdrop-filter: saturate(180%) blur(20px);
-        -webkit-backdrop-filter: blur(20px);
-        transform: translateZ(0);
-        height: 40px;
-        width: 118px;
-        justify-content: center
-    }
-
-    .topGroup .banner-button:hover {
-        background: var(--sco-theme);
-        color: var(--sco-white)
-    }
-
-    .topGroup .banner-button i {
-        margin-right: 8px;
-        font-size: 22px
-    }
-
-    .topGroup .todayCard .todayCard-cover {
-        position: absolute;
-        min-width: 100%;
-        min-height: 100%;
-        top: 0;
-        left: 0;
-        background-size: cover;
-        z-index: -1;
-        transition: .3s
-    }
-
-    .topGroup .todayCard.hide .todayCard-cover {
-        transform: scale(1.2)
-    }
-}
-
-.tags-group-icon {
-    width: 120px;
-    height: 120px;
-    border-radius: 30px
-}
-
-.tags-group-all {
-    display: flex;
-    transform: rotate(-30deg)
-}
-
-.tags-group-all.nowrapMove {
-    transform: rotate(0);
-    padding-bottom: 2rem
-}
-
-.tags-group-wrapper {
-    margin-top: 5rem;
-    display: flex;
-    flex-wrap: nowrap;
-    animation: rowup 60s linear infinite
-}
-
-.nowrapMove .tags-group-wrapper {
-    margin-top: 7rem;
-    animation: rowup 120s linear infinite
-}
-
-.tags-group-icon-pair .tags-group-icon:nth-child(even) {
-    margin-top: 1rem;
-    transform: translate(-60px)
-}
-
-.tags-group-icon-pair {
-    margin-left: 1rem;
-    user-select: none
-}
-
-.tags-group-icon-pair a img {
-    border-radius: 50% !important
-}
-
-.tags-group-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    font-size: 66px;
-    font-weight: 700;
-    box-shadow: var(--sco-shadow-blackdeep)
-}
-
-.nowrapMove .tags-group-icon {
-    border-radius: 50%
-}
-
-.tags-group-icon img {
-    width: 60%
-}
-
-.nowrapMove .tags-group-icon img {
-    min-width: 100%;
-    min-height: 100%;
-    border-radius: 50%;
-    object-fit: cover
-}
-
-#categoryList > div:nth-child(1) > a::before {
-    height: 24px;
-    width: 44px;
-    content: "";
-    background-size: 38px 24px;
-    position: absolute;
-    top: 0;
-    left: 0
-}
-
-.categoryItem:hover i {
-    opacity: .8;
-    transition: .8s;
-    transition-delay: .15s;
-    transform: scale(1.03) rotate(0);
-    font-size: 2.5rem;
-    filter: blur(0)
-}
-
-@media screen and (min-width: 1300px) {
-    .categoryItem:hover i {
-        transform: scale(1.03) rotate(0)
-    }
-}
-
-#categoryList > a:nth-child(0) > i {
-    padding-right: 8px
-}
-
-.cate-button-text {
-    box-shadow: var(--sco-shadow-black)
-}
-
-@media screen and (max-width: 768px) {
-    div#categoryList {
-        display: none
-    }
-}
-
-li, ul {
-    list-style: none;
-    display: block;
-    margin: 0;
-    padding: 0
-}
-
-.title-and-tips {
-    display: flex;
-    margin-top: 1rem;
-    align-items: center
-}
-
-.title-and-tips .page-title {
-    line-height: 1;
-    margin: 0
-}
-
-.title-and-tips .page-tips {
-    background: var(--sco-yellow-op);
-    color: var(--sco-yellow);
-    margin-bottom: auto;
-    border-radius: 8px;
-    padding: 2px 6px;
-    font-size: .5rem;
-    margin-left: 8px
-}
-
-a.article-meta__categories {
-    position: absolute;
-    padding: 1px 6px;
-    background: var(--sco-black-op);
-    border-radius: 8px;
-    margin-left: 0;
-    font-size: 12px;
-    font-weight: 700;
-    color: var(--sco-white);
-    top: 8px;
-    left: 8px;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transform: translateZ(0)
-}
-
-a.article-meta__categories:hover {
-    background: var(--sco-theme) !important;
-    color: var(--sco-white) !important;
-    box-shadow: var(--sco-shadow-theme)
-}
-
-.article-meta {
-    margin: 0 8px 0 0;
-    white-space: nowrap;
-    overflow: hidden;
-    display: inline-block;
-    text-overflow: ellipsis
-}
-
-.article-meta__link {
-    display: none
-}
-
-.article-meta__tags {
-    margin-right: 8px;
-    padding: 0 .2rem 0 0;
-    color: var(--sco-fontcolor)
-}
-
-#web_bg {
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 1;
-    position: fixed;
-    z-index: -999;
-    background: var(--sco-background)
-}
-
-a.extend.next {
-    right: 0
-}
-
-a.extend.prev {
-    left: 0
-}
-
-.lg-container {
-    display: none
-}
-
-.post-bg #post-cover {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    min-width: 50vw;
-    min-height: 20rem;
-    opacity: .8
-}
-
-.coverdiv {
-    width: 70%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    margin: 0 -20% 0 auto;
-    transform: rotate(10deg) translateY(-10%) scale(2);
-    filter: blur(10px)
-}
-
-.coverdiv.loaded {
-    display: block
-}
-
-.coverdiv:after {
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    box-shadow: 110px -130px 300px 60px var(--sco-main) inset
-}
-
-@media screen and (max-width: 768px) {
-    .coverdiv {
-        margin: 0 0 0 auto;
-        transform: rotate(0) translateY(0) scale(1);
-        filter: blur(0);
-        width: 100%;
-        position: fixed;
-        height: 30rem;
-        z-index: 1
-    }
-
-    .coverdiv:after {
-        box-shadow: 0 0 205px 59px var(--sco-main) inset
-    }
-}
-
-@media screen and (min-width: 1300px) {
-    .coverdiv {
-        width: 70%;
-        height: 100%;
-        position: relative;
-        overflow: hidden;
-        margin: 0 -20% 0 auto;
-        transform: rotate(10deg) translateY(-8%) scale(1.8);
-        filter: blur(10px);
-        opacity: 0
-    }
-
-    .coverdiv.loaded {
-        display: block;
-        opacity: .5;
-        animation: showCover 1s .3s backwards;
-        transform: rotate(10deg) translateY(-10%) scale(2)
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .coverdiv {
-        width: 70%;
-        height: 100%;
-        position: relative;
-        overflow: hidden;
-        margin: 0 -20% 0 auto;
-        transform: rotate(10deg) translateY(-8%) scale(1.8);
-        filter: blur(10px);
-        opacity: 0
-    }
-
-    .coverdiv.loaded {
-        display: block;
-        opacity: .5;
-        animation: showCover 1s .3s backwards;
-        transform: rotate(10deg) translateY(-10%) scale(2)
-    }
-
-    @keyframes showCover {
-        from {
-            opacity: 0;
-            transform: rotate(10deg) translateY(-8%) scale(1.8)
-        }
-
-        to {
-            opacity: .5;
-            transform: rotate(10deg) translateY(-10%) scale(2)
-        }
-    }
-}
-
-
-
-#post-cover-rgb {
-    position: absolute;
-    width: 100% !important;
-    height: 100% !important;
-    background: var(--sco-lighttext)
-}
-
-
-
-#page {
-    box-shadow: none
-}
-
-
-.full_page #post-cover {
-    display: none
-}
-
-.meta-secondline > span {
-    opacity: .6;
-    transition: .3s;
-    margin-right: 1.1rem;
-}
-
-.meta-secondline span {
-    display: flex;
-    align-items: center;
-    line-height: 1
-}
-
-@media screen and (max-width: 768px) {
-    .meta-secondline span {
-        line-height: 1.5
-    }
-}
-
-#post-firstinfo {
-    text-align: left;
-    display: flex;
-    white-space: nowrap;
-    -webkit-user-select: none
-}
-
-.inline-image {
-    display: flex;
-    margin: 8px auto;
-    width: fit-content;
-    justify-content: center
-}
-
-.inline-image a:hover {
-    background: 0 0 !important;
-    box-shadow: none !important
-}
-
-.inline-image img {
-    margin: 0 !important;
-    display: inline-flex;
-}
-
-#post-info .post-title {
-    color: var(--sco-white);
-    font-weight: 700;
-    font-size: 2.3rem;
-    line-height: 1.2;
-    text-align: left;
-    margin: 1rem 0 1rem 0 !important;
-    -webkit-line-clamp: 2;
-    padding: 0;
-    overflow: hidden
-}
-
-@media screen and (max-width: 768px) {
-    #post-info .post-title {
-        font-size: 1.2rem;
-        -webkit-line-clamp: 3;
-        margin: .2rem auto !important;
-        text-align: center;
-        z-index: 1
-    }
-}
-
-.table-wrap {
-    margin: 1rem 0;
-    border-radius: 8px
-}
-
-table td, table th {
-    border: var(--style-border-always)
-}
-
-table thead {
-    background: var(--sco-secondbg)
-}
-
-b, strong {
-    color: var(--sco-lighttext)
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin-top: 1rem;
-    padding-top: 0;
-    padding-left: 0 !important;
-    font-weight: 700
-}
-
-#post h2 {
-    margin-top: 1.5rem
-}
-
-blockquote {
-    border: var(--style-border-always);
-    background-color: var(--sco-secondbg);
-    color: var(--sco-secondtext);
-    border-radius: 8px;
-    margin: 1rem 0;
-    padding: .5rem .8rem
-}
-
-blockquote p {
-    padding: 0
-}
-
-figure {
-    margin-top: .5rem !important
-}
-
-.post-qr-code-img {
-    box-shadow: var(--sco-shadow-lightblack);
-    border-radius: 12px;
-    border: var(--style-border-always)
-}
-
-#quit-box {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, .2);
-    top: 0;
-    left: 0;
-    display: none;
-    z-index: 101;
-    margin: 0 !important
-}
-
-.post-tools-left #quit-box {
-    display: none
-}
-
-@media screen and (max-width: 768px) {
-    #quit-box {
-        z-index: 109;
-        height: calc(100vh - 380px);
-    }
-}
-
-#post > hr {
-    display: none
-}
-
-.img-alt {
-    font-size: 12px;
-    margin: 0;
-    color: var(--sco-secondtext)
-}
-
-.long-img .img-alt {
-    display: none
-}
-
-.long-img img {
-    border-radius: 0 !important;
-    margin: 0 !important
-}
-
-.post-tools {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-    margin-top: 8px;
-    flex-wrap: wrap;
-    -webkit-user-select: none
-}
-
-.post-tools-left {
-    white-space: nowrap;
-    display: flex;
-    text-overflow: ellipsis;
-    flex-wrap: wrap
-}
-
-.post-tools-right {
-    padding-right: 0;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    flex-wrap: wrap
-}
-
-@media screen and (max-width: 768px) {
-    .post-tools-left > div {
-        margin: 8px
-    }
-
-    .post-tools-left {
-        white-space: nowrap;
-        display: flex;
-        text-overflow: ellipsis;
-        justify-content: center;
-        width: 100%
-    }
-
-    .post-tools-right {
-        margin-top: 1rem;
-        width: 100%;
-        justify-content: center
-    }
-}
-
-#qrcode {
-    width: 150px;
-    height: 150px;
-    min-width: 150px;
-    min-height: 150px;
-    background: var(--sco-white);
-    padding: 8px;
-    border-radius: 8px;
-    margin-bottom: 8px;
-    border: var(--style-border-always)
-}
-
-.share-link:hover .share-main {
-    opacity: 1;
-    transform: translateY(0)
-}
-
-.share-qrcode {
-    display: flex;
-    justify-content: center
-}
-
-@media screen and (max-width: 768px) {
-    .share-link.mobile {
-        display: none
-    }
-}
-
-#page .category-lists .category-title {
-    display: none
-}
-
-#page {
-    background: 0 0;
-    border: none;
-    padding: 0
-}
-
-@media screen and (min-width: 1300px) {
-    #page > div:not(.author-content-item) {
-        animation: slide-in .6s .2s backwards
-    }
-}
-
-#post .tag_share .post-meta__tag-list {
-    display: flex;
-    padding: 0;
-    width: 100%;
-    flex-wrap: wrap;
-    flex-direction: row
-}
-
-#post .tag_share .post-meta__tag-list a {
-    margin-bottom: 8px;
-    margin-right: 8px
-}
-
-#page .tag-cloud-list a {
-    display: flex;
-    width: fit-content;
-    color: var(--sco-fontcolor) !important;
-    font-size: 1.4em !important;
-    padding: .2em .5em;
-    background: var(--sco-card-bg);
-    margin: .5em .5em;
-    border-radius: 12px;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d;
-    border: var(--style-border-always);
-    box-shadow: var(--sco-shadow-border);
-    align-items: center
-}
-
-#page .tag-cloud-list a:hover {
-    background: var(--sco-main) !important;
-    box-shadow: var(--sco-shadow-blue);
-    color: var(--sco-white) !important;
-    border: var(--style-border-hover)
-}
-
-span.tagsPageCount {
-    background: var(--sco-secondbg);
-    padding: 4px 4px;
-    border-radius: 8px;
-    color: var(--sco-secondtext);
-    line-height: 1;
-    text-align: center;
-    min-width: 35px;
-    display: inline-block;
-    font-size: 1rem;
-    margin-left: 4px
-}
-
-.category-lists span.tagsPageCount {
-    margin-left: 4px
-}
-
-#page .tag-cloud-list a:hover span.tagsPageCount {
-    color: var(--sco-lighttext)
-}
-
-#post .tag_share .post-meta__tags span.tagsPageCount, #tag-page-tags .tagsPageCount {
-    padding: 2px;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    min-width: 23px;
-    display: inline-block;
-    border-radius: 4px;
-    text-align: center;
-    font-size: .6rem;
-    color: var(--sco-fontcolor);
-    margin-left: 4px
-}
-
-#tag #tag-page-tags a.select .tagsPageCount {
-    background: var(--sco-card-bg);
-    color: var(--sco-lighttext)
-}
-
-span.tags-punctuation {
-    margin-right: 2px
-}
-
-span.tags-punctuation::before {
-    content: "\e071";
-    font-family: scoicon, serif !important;
-    font-size: 14px;
-    opacity: .4;
-}
-
-.hide-aside #page span.tags-punctuation::before {
-    font-size: 22px
-}
-
-.category-lists span.tags-punctuation {
-    font-size: 18px
-}
-
-.tags-name {
-    margin-left: 2px
-}
-
-#page .category-lists ul li::before {
-    display: none
-}
-
-#page .category-lists ul li {
-    margin: 0 8px 8px 0;
-}
-
-#page .category-lists ul {
-    display: flex;
-    padding: 0;
-    flex-wrap: wrap;
-    flex-direction: row
-}
-
-#page .category-lists ul li {
-    padding: 4px 16px;
-    width: 200px;
-    border-radius: 12px;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always)
-}
-
-.tag-cloud-title {
-    display: none
-}
-
-#tag #tag-page-tags {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.75rem .5rem;
-}
-
-#tag #tag-page-tags a {
-    padding: .1rem .5rem;
-    margin: .25rem .25rem;
-    line-height: 1.6;
-    border-radius: 8px;
-    color: var(--sco-fontcolor) !important;
-    border: var(--style-border-always);
-    display: flex;
-    align-items: center
-}
-
-#tag #tag-page-tags a.select {
-    color: var(--sco-white) !important;
-    background: var(--sco-theme);
-    box-shadow: var(--sco-shadow-theme)
-}
-
-#tag #tag-page-tags a:hover {
-    color: var(--sco-white) !important;
-    background: var(--sco-theme);
-    box-shadow: var(--sco-shadow-theme)
-}
-
-.site-card-tag {
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 4px 8px;
-    background-color: var(--sco-blue);
-    box-shadow: var(--sco-shadow-blue);
-    color: var(--sco-white);
-    z-index: 1;
-    border-radius: 12px 0 12px 0;
-    transition: .3s;
-    font-size: .6rem
-}
-
-.site-card-tag.vip {
-    background: -moz-linear-gradient(38deg, #e5b085 0, #d48f16 100%);
-    background: -webkit-linear-gradient(38deg, #e5b085 0, #d48f16 100%);
-    background: linear-gradient(38deg, #e5b085 0, #d48f16 100%);
-    overflow: hidden;
-    box-shadow: var(--sco-shadow-yellow)
-}
-
-.site-card-tag.power {
-    background-color: var(--sco-purple)
-}
-
-.light {
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    width: 100px;
-    height: 50px;
-    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
-    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
-    -webkit-animation: light_tag 4s both infinite;
-    -ms-animation: light_tag 4s both infinite;
-    animation: light_tag 4s both infinite
-}
-
-.site-card-tag.speed {
-    background: var(--sco-green);
-    box-shadow: var(--sco-shadow-green)
-}
-
-.weixin:hover::after {
-    transform: scale(1);
-    opacity: 1
-}
-
-#error-wrap .error-content {
-    box-shadow: none !important;
-    border-radius: 12px;
-    background: var(--sco-card-bg) !important
-}
-
-#body-wrap.error {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 50px 1rem 1rem;
-    position: relative
-}
-
-#body-wrap.error .aside-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    margin: 1rem;
-    max-width: 100%
-}
-
-#body-wrap.error .aside-list .aside-list-group {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    max-width: 800px;
-    margin: 0 auto;
-    justify-content: space-between
-}
-
-#body-wrap.error .aside-list .aside-list-item {
-    padding: .5rem 0;
-    width: 49%
-}
-
-#body-wrap.error .aside-list .aside-list-item img {
-    width: 100%;
-    object-fit: cover;
-    border-radius: 12px
-}
-
-#body-wrap.error .aside-list .aside-list-item .thumbnail {
-    overflow: hidden;
-    width: 100%;
-    height: 200px;
-    background: var(--sco-card-bg);
-    display: flex
-}
-
-#body-wrap.error .aside-list .aside-list-item .content .title {
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    line-height: 1.5;
-    justify-content: center;
-    align-items: flex-end;
-    align-content: center;
-    padding-top: .5rem;
-    font-size: 16px;
-    font-weight: 700
-}
-
-#body-wrap.error .aside-list .aside-list-item .content time {
-    display: none
-}
-
-@media screen and (max-width: 768px) {
-    #body-wrap.error {
-        padding-top: 0
-    }
-
-    #body-wrap.error .aside-list {
-        margin: 0
-    }
-
-    #body-wrap.error .aside-list .aside-list-item .thumbnail {
-        height: 100px
-    }
-}
-
-.bb-info {
-    display: inline;
-    float: right;
-    line-height: 1;
-    color: var(--sco-secondtext);
-    margin-left: auto;
-    margin-bottom: 1rem;
-    margin-right: .5rem
-}
-
-.bb-info:hover {
-    color: var(--sco-hovertext)
-}
-
-.load-btn.button-load {
-    background: var(--sco-card-btn-bg);
-    color: var(--sco-fontcolor);
-    padding: 12px 12px;
-    margin: 1.5rem 0 0 0;
-    width: 100%;
-    text-align: center;
-    border-radius: 12px;
-    transition: .3s;
-    font-weight: 700
-}
-
-.load-btn.button-load:hover {
-    background: var(--sco-blue);
-    color: var(--sco-white);
-    transition: .3s;
-    box-shadow: var(--sco-shadow-blue)
-}
-
-#cf-container a {
-    width: fit-content
-}
-
-#hexo-circle-of-friends-root {
-    margin: 0 -8px
-}
-
-.friend_post_time {
-    margin-left: 8px;
-    color: var(--sco-secondtext)
-}
-
-.friendlink-avatar {
-    width: 3rem;
-    height: 3rem;
-    min-width: 3rem;
-    min-height: 3rem;
-    border-radius: 32px;
-    overflow: hidden;
-    background: var(--sco-secondbg);
-    padding: 0 !important
-}
-
-.friendlink-avatar:hover {
-    border-radius: 32px !important;
-    background: var(--sco-secondbg)
-}
-
-a.bb-link {
-    margin-left: 8px;
-    color: var(--sco-secondtext) !important;
-    display: inline;
-    border: none !important
-}
-
-a.bb-link-info {
-    display: inline;
-    float: right;
-    border: none !important;
-    color: var(--sco-secondtext) !important;
-    line-height: 2.7rem
-}
-
-a.bb-link-info:hover {
-    color: var(--sco-fontcolor) !important;
-    background: 0 0 !important
-}
-
-.friendlink-avatar {
-    border-bottom: none !important
-}
-
-.chart {
-    align-items: flex-start;
-    flex: 1;
-    width: 100px;
-    height: 60px;
-    margin: 20px
-}
-
-@media screen and (max-width: 500px) {
-    #info_user_pool {
-        padding: 10px;
-        flex-direction: column;
-        max-height: 200px
-    }
-
-    .chart {
-        flex: 0;
-        width: 100%;
-        height: 160px;
-        margin: 0
-    }
-}
-
-#info_user_pool {
-    background: var(--sco-secondbg);
-    border-radius: 12px !important;
-    margin-top: 1rem;
-    box-shadow: none !important
-}
-
-.la-widget.la-data-widget__container {
-    border-radius: 12px;
-    border: var(--style-border) !important;
-    box-shadow: var(--sco-shadow-border);
-    border-color: var(--sco-card-border)
-}
-
-.page-title {
-    display: none
-}
-
-
-.inline-word {
-    word-break: keep-all;
-    white-space: nowrap
-}
-
-@media screen and (min-width: 768px) {
-    .needEndHide.hide {
-        bottom: -200px !important;
-        opacity: 0
-    }
-}
-
-.toPageGroup {
-    display: flex;
-    position: relative;
-    margin: 0 .3rem
-}
-
-a#toPageButton {
-    display: flex;
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    right: 0;
-    top: 0;
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    transition: .3s;
-    background: var(--sco-card-bg);
-    border: var(--style-border-always);
-    cursor: text;
-    pointer-events: none
-}
-
-.toPageGroup:focus-within a#toPageButton, .toPageGroup:hover a#toPageButton {
-    width: 30px;
-    height: 30px;
-    right: 4px;
-    top: 5px;
-    background: var(--sco-card-bg);
-    border: 1px solid var(--sco-none);
-    border-radius: 4px;
-    opacity: .2
-}
-
-.toPageGroup:focus-within a#toPageButton.haveValue {
-    opacity: 1;
-    cursor: pointer
-}
-
-a#toPageButton.haveValue {
-    opacity: 1 !important;
-    cursor: pointer !important;
-    pointer-events: all
-}
-
-a#toPageButton.haveValue:hover {
-    background: var(--sco-theme);
-    color: var(--sco-white)
-}
-
-@media screen and (max-width: 768px) {
-    .toPageGroup {
-        display: none
-    }
-}
-
-#post amp-ad {
-    display: flex
-}
-
-#post amp-ad div {
-    display: flex
-}
-
 /*自定义高亮标签*/
-
 #aside-content .card-tag-cloud a[href*="/tags/Kotlin/"] {
     color: var(--sco-lighttext) !important;
     font-weight: 500

From 700e2369162736203c19c2738422261077bb2acc Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Mon, 20 Nov 2023 22:56:36 +0800
Subject: [PATCH 24/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

删除冗余样式代码
---
 layout/partial/compoment/home/postList.ejs |    5 +-
 source/css/_comment/index.styl             |  255 +++--
 source/css/_comment/twikoo.styl            | 1018 ++++++++++----------
 source/css/_extra/aplayer.styl             |   40 -
 source/css/_extra/rightmenu.styl           |  154 ++-
 source/css/_layout/articleSort.styl        |  262 +++--
 source/css/_layout/aside.styl              |   38 +-
 source/css/_layout/layout.styl             |    4 -
 source/css/_page/tag.styl                  |   10 +-
 source/css/_post/index.styl                |    4 +-
 10 files changed, 825 insertions(+), 965 deletions(-)
 delete mode 100644 source/css/_extra/aplayer.styl

diff --git a/layout/partial/compoment/home/postList.ejs b/layout/partial/compoment/home/postList.ejs
index 3698a260..4ad5fdcb 100755
--- a/layout/partial/compoment/home/postList.ejs
+++ b/layout/partial/compoment/home/postList.ejs
@@ -24,8 +24,9 @@
                 <% post.tags.data.forEach(tags => { %>
                     <a class="article-meta__tags" href="<%= url_for(tags.path) %>"
                        onclick="window.event.cancelBubble=true;">
-                        <span class="tags-punctuation"></span>
-                        <%= tags.name %>
+                        <span class="tags-punctuation">
+                            <%=tags.name%>
+                        </span>
                     </a>
                 <% }) %>
             </span>
diff --git a/source/css/_comment/index.styl b/source/css/_comment/index.styl
index 094f146f..355378d5 100644
--- a/source/css/_comment/index.styl
+++ b/source/css/_comment/index.styl
@@ -1,134 +1,121 @@
-#post-comment .comment-head .comment-headline {
-  display: inline-block;
-  vertical-align: middle;
-  font-weight: 700;
-  font-size: 20px
-}
-
-#post-comment .comment-head #comment-switch {
-  display: inline-block;
-  float: right;
-  margin: .1rem auto 0;
-  padding: .2rem .8rem;
-  width: max-content;
-  border-radius: 5px;
-  background: #f6f8fa
-}
-
-#post-comment .comment-head #comment-switch .first-comment {
-  color: #307af6
-}
-
-#post-comment .comment-head #comment-switch .second-comment {
-  color: #ff7242
-}
-
-#post-comment .comment-head #comment-switch .switch-btn {
-  position: relative;
-  display: inline-block;
-  margin: -4px .4rem 0;
-  width: 42px;
-  height: 22px;
-  border-radius: 34px;
-  background-color: #307af6;
-  vertical-align: middle;
-  cursor: pointer;
-  transition: all .4s ease 0s
-}
-
-#post-comment .comment-head #comment-switch .switch-btn::before {
-  position: absolute;
-  bottom: 4px;
-  left: 4px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background-color: #fff;
-  content: "";
-  transition: all .4s ease 0s
-}
-
-#post-comment .comment-head #comment-switch .switch-btn.move {
-  background-color: #ff7242
-}
-
-#post-comment .comment-head #comment-switch .switch-btn.move::before {
-  transform: translateX(20px)
-}
-
-#post-comment .comment-wrap > div:nth-child(2) {
-  display: none
-}
-
-.post-comment {
-  background: var(--sco-card-bg)
-}
-
-div#post-comment {
-  margin-top: 2rem
-}
-
-#post-comment > div.comment-head > div.comment-privacy {
-  display: block;
-  justify-content: space-between;
-  margin-left: 8px;
-  font-size: 13px
-}
-
-#post-comment > div.comment-head > div.comment-privacy a:hover {
-  color: var(--sco-main)
-}
-
-#post-comment .comment-tips {
-  background-color: rgba(103, 194, 58, .9);
-  border: var(--style-border-always);
-  border-color: var(--sco-green);
-  color: var(--sco-white);
-  border-radius: 8px 8px 0 0;
-  padding: 8px 12px;
-  margin-top: .5rem;
-  display: none;
-  width: 100%;
-  position: absolute;
-  top: 50px;
-  z-index: 1000;
-  opacity: 1;
-  transition: .3s
-}
-
-#post-comment .comment-tips:hover {
-  opacity: 0
-}
-
-#post-comment .comment-tips.show {
-  display: flex;
-  font-weight: 700
-}
-
-#post-comment blockquote {
-  background: var(--sco-secondbg);
-  border: var(--style-border);
-  box-shadow: none;
-  margin: 0 0 .5rem;
-  font-size: .6rem;
-  color: var(--sco-secondtext);
-  border-radius: 8px
-}
-
-#post-comment .comment-head {
-  font-size: .8em !important;
-  margin-bottom: .5rem;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  position: relative
-}
-
-.comment-randomInfo {
-  margin-left: auto;
-  font-size: 13px
-}
-
-.comment-randomInfo:hover a {
-  color: var(--sco-theme)
-}
\ No newline at end of file
+#post-comment
+  .comment-head
+    .comment-headline
+      display inline-block
+      vertical-align middle
+      font-weight 700
+      font-size 20px
+
+    #comment-switch
+      display inline-block
+      float right
+      margin .1rem auto 0
+      padding .2rem .8rem
+      width max-content
+      border-radius 5px
+      background #f6f8fa
+
+      .first-comment
+        color #307af6
+
+      .second-comment
+        color #ff7242
+
+      .switch-btn
+        position relative
+        display inline-block
+        margin -4px .4rem 0
+        width 42px
+        height 22px
+        border-radius 34px
+        background-color #307af6
+        vertical-align middle
+        cursor pointer
+        transition all .4s ease 0s
+
+        &::before
+          position absolute
+          bottom 4px
+          left 4px
+          width 14px
+          height 14px
+          border-radius 50%
+          background-color #fff
+          content ""
+          transition all .4s ease 0s
+
+        &.move
+          background-color #ff7242
+
+          &::before
+            transform translateX(20px)
+
+  .comment-wrap
+    > div:nth-child(2)
+      display none
+
+.post-comment
+  background var(--sco-card-bg)
+
+div#post-comment
+  margin-top 2rem
+
+#post-comment
+  > div.comment-head
+    > div.comment-privacy
+      display block
+      justify-content space-between
+      margin-left 8px
+      font-size 13px
+
+    > div.comment-privacy
+      a:hover
+        color var(--sco-main)
+
+  .comment-tips
+    background-color rgba(103, 194, 58, .9)
+    border var(--style-border-always)
+    border-color var(--sco-green)
+    color var(--sco-white)
+    border-radius 8px 8px 0 0
+    padding 8px 12px
+    margin-top .5rem
+    display none
+    width 100%
+    position absolute
+    top 50px
+    z-index 1000
+    opacity 1
+    transition .3s
+
+    &:hover
+      opacity 0
+
+    &.show
+      display flex
+      font-weight 700
+
+  blockquote
+    background var(--sco-secondbg)
+    border var(--style-border)
+    box-shadow none
+    margin 0 0 .5rem
+    font-size .6rem
+    color var(--sco-secondtext)
+    border-radius 8px
+
+  .comment-head
+    font-size .8em !important
+    margin-bottom .5rem
+    display flex
+    align-items center
+    flex-wrap wrap
+    position relative
+
+.comment-randomInfo
+  margin-left auto
+  font-size 13px
+
+  &:hover
+    a
+      color var(--sco-theme)
\ No newline at end of file
diff --git a/source/css/_comment/twikoo.styl b/source/css/_comment/twikoo.styl
index 2e1f9661..61740e00 100644
--- a/source/css/_comment/twikoo.styl
+++ b/source/css/_comment/twikoo.styl
@@ -1,535 +1,483 @@
-#twikoo .tk-row .tk-col {
-  flex-direction: column-reverse !important
-}
-
-#twikoo > div.tk-comments > div.tk-comments-container > div.tk-comments-title > span:nth-child(1) {
-  display: none !important
-}
-
-#twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > a {
-  display: none !important
-}
-
-#twikoo {
-  z-index: 102
-}
-
-.tk-meta {
-  display: flex;
-  align-items: center
-}
-
-.twikoo-info {
-  color: var(--sco-secondtext)
-}
-
-.tk-action .tk-action-link:first-child {
-  display: none
-}
-
-.tk-action-link {
-  color: var(--sco-lighttext) !important;
-  cursor: pointer;
-  -webkit-user-select: none
-}
-
-.tk-action-icon svg {
-  fill: var(--sco-lighttext) !important
-}
-
-.tk-content img {
-  max-height: 1100px !important;
-  max-width: 100% !important;
-  border-radius: 12px
-}
-
-.tk-avatar {
-  width: 32px !important;
-  height: 32px !important;
-  box-shadow: var(--sco-shadow-border);
-  margin-right: 16px !important
-}
-
-.tk-avatar.tk-has-avatar {
-  width: 32px !important;
-  height: 32px !important;
-  border-radius: 32px !important
-}
-
-.tk-row .tk-avatar {
-  display: none
-}
-
-.tk-avatar .tk-avatar-img:hover {
-  transform: rotate(360deg)
-}
-
-img.tk-avatar-img {
-  height: 32px !important;
-  border-radius: 32px;
-  border: var(--style-border-always)
-}
-
-.el-input--small .el-input__inner {
-  padding: 8px
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
-  content: '输入QQ号会自动获取昵称和头像'
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
-  content: '收到回复将会发送到你的邮箱'
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
-  content: '可以通过昵称访问你的网站'
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before {
-  display: block;
-  animation: commonTipsIn .3s
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
-  display: block;
-  animation: commonTriangleIn .3s
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
-  display: none;
-  position: absolute;
-  top: -60px;
-  white-space: nowrap;
-  border-radius: 10px;
-  left: 50%;
-  transform: translate(-50%);
-  padding: 14px 18px;
-  background: #444;
-  color: #fff;
-  z-index: 100
-}
-
-.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
-  display: none;
-  content: '';
-  position: absolute;
-  border: 12px solid transparent;
-  border-top-color: #444;
-  left: 50%;
-  transform: translate(-50%, -46px)
-}
-
-.tk-nick {
-  font-size: 1rem !important;
-  line-height: 32px
-}
-
-.el-input-group__append, .el-input-group__prepend {
-  background-color: var(--sco-card-bg) !important;
-  color: var(--sco-fontcolor) !important;
-  border-color: var(--sco-card-border) !important;
-  border: var(--style-border-always) !important;
-  font-weight: 700
-}
-
-.el-input__inner {
-  background: var(--sco-secondbg) !important;
-  border: 1px solid var(--sco-card-border) !important;
-  color: var(--sco-fontcolor) !important;
-  padding-left: 8px
-}
-
-.page .el-input__inner {
-  background: var(--sco-card-bg) !important
-}
-
-.el-input__inner:focus {
-  border: 1px solid var(--sco-main) !important
-}
-
-.el-textarea__inner {
-  background: var(--sco-secondbg) !important;
-  color: var(--sco-fontcolor) !important;
-  border-radius: 12px !important;
-  min-height: 100px !important;
-  padding: 16px 16px 40px 16px !important;
-  border: var(--style-border-always) !important;
-  box-shadow: none !important
-}
-
-@media screen and (max-width: 768px) {
-  .el-textarea__inner {
-    border-radius: 4px !important;
-    background: var(--sco-card-bg) !important
-  }
-}
-
-#page .el-textarea__inner {
-  background: var(--sco-card-bg) !important;
-  box-shadow: var(--sco-shadow-border)
-}
-
-.el-textarea__inner:focus {
-  border: var(--style-border-hover-always) !important;
-  box-shadow: var(--sco-shadow-main)
-}
-
-#page .tk-meta-input .el-input {
-  box-shadow: var(--sco-shadow-border)
-}
-
-.el-loading-mask {
-  background-color: none !important
-}
-
-.tk-tag {
-  margin-left: 4px
-}
-
-.tk-tag-green {
-  border-radius: 4px !important;
-  border: 0 solid #e1f3d8 !important;
-  font-size: .5rem !important
-}
-
-[data-theme=dark] .tk-tag-green {
-  background-color: #67c23a21 !important
-}
-
-.tk-tag-yellow {
-  border-radius: 4px !important;
-  border: 0 solid #e1f3d8 !important;
-  font-size: .5rem !important
-}
-
-[data-theme=dark] .tk-tag-green {
-  background-color: #c0c23a21 !important
-}
-
-.tk-tag-red {
-  border-radius: 4px !important;
-  border: 0 solid #f3d8d8 !important;
-  font-size: .5rem !important
-}
-
-[data-theme=dark] .tk-tag-red {
-  background-color: #c23a3a21 !important
-}
-
-.el-button {
-  background-color: var(--sco-fontcolor) !important;
-  border: 0 solid var(--sco-main) !important;
-  color: var(--sco-background) !important;
-  border-radius: 8px !important
-}
-
-.el-button:hover {
-  background: var(--sco-main) !important;
-  color: var(--sco-white) !important
-}
-
-.el-button.tk-preview {
-  display: none !important
-}
-
-button.el-button.tk-cancel.el-button--default.el-button--small {
-  background: var(--sco-secondbg) !important;
-  border-radius: 8px !important;
-  color: var(--sco-fontcolor) !important
-}
-
-.tk-submit-action-icon.__markdown {
-  display: none
-}
-
-.tk-comments .el-button--primary {
-  border-color: var(--sco-fontcolor) !important;
-  color: var(--sco-card-bg) !important;
-  border-radius: 4px !important;
-  box-shadow: var(--sco-shadow-black);
-  transition: .3s;
-  width: 5rem;
-  position: absolute;
-  top: -53px;
-  right: 0;
-  margin-left: .5rem !important;
-  height: 32px
-}
-
-.tk-comments .el-button--primary.is-disabled, .tk-comments .el-button--primary.is-disabled:active, .tk-comments .el-button--primary.is-disabled:focus, .tk-comments .el-button--primary.is-disabled:hover {
-  opacity: .2
-}
-
-.tk-row-actions-start {
-  position: absolute;
-  top: -100px;
-  left: 17px
-}
-
-@media screen and (max-width: 768px) {
-  .tk-submit .el-button--primary {
-    width: 5rem;
-    height: 132px;
-    top: -161px
-  }
-
-  .tk-row-actions-start {
-    top: -210px
-  }
-}
-
-.tk-comments-title {
-  position: absolute;
-  bottom: 0;
-  left: 0
-}
-
-.tk-extras {
-  margin-top: .5rem;
-  padding-bottom: .5rem
-}
-
-.tk-icon.__comments:first-child {
-  display: none
-}
-
-.tk-icon.__comments {
-  margin-left: 0 !important
-}
-
-.tk-row.actions {
-  margin-bottom: .5rem !important;
-  margin-left: 0 !important;
-  margin-top: .5rem !important;
-  justify-content: space-around !important
-}
-
-.tk-meta-input {
-  position: relative !important;
-  margin-top: .8rem;
-  width: calc(100% - 5.5rem)
-}
-
-.tk-content .tk-owo-emotion {
-  width: 3em;
-  margin: 0 2px 0 2px
-}
-
-.OwO .OwO-body .OwO-bar .OwO-packages li {
-  line-height: 45px !important;
-}
-
-.OwO .OwO-body {
-  z-index: 102;
-  width: 500px
-}
-
-#owo-big {
-  position: fixed;
-  align-items: center;
-  background-color: var(--sco-card-bg);
-  border: var(--style-border-always);
-  border-radius: 10px;
-  z-index: 9999;
-  display: none;
-  transform: translate(0, -105%);
-  overflow: hidden;
-  animation: owoIn .3s cubic-bezier(.42, 0, .3, 1.11);
-  padding: 1rem
-}
-
-#owo-big img {
-  width: 100%
-}
-
-.tk-owo-emotion, .twikoo .OwO-item img {
-  pointer-events: none
-}
-
-@media screen and (max-width: 768px) {
-  .OwO .OwO-body {
-    width: 300px
-  }
-}
-
-.tk-extra {
-  background: var(--sco-card-bg);
-  border: var(--style-border-always);
-  padding: 1px 5px 1px 2px;
-  border-radius: 8px;
-  margin-right: 4px !important;
-  color: var(--sco-secondtext) !important;
-  display: inline !important;
-  margin-top: 6px !important;
-  font-size: .5rem
-}
-
-.tk-extra .tk-icon {
-  display: none
-}
-
-.tk-expand {
-  background: var(--sco-card-bg) !important;
-  color: var(--sco-fontcolor) !important;
-  border: var(--style-border-always);
-  box-shadow: var(--sco-shadow-border);
-  border-radius: 12px;
-  -webkit-user-select: none
-}
-
-.tk-expand:hover {
-  background: var(--sco-theme) !important;
-  color: var(--sco-white) !important
-}
-
-.tk-time {
-  color: var(--sco-secondtext) !important;
-  font-size: .6rem;
-  margin-left: .5rem
-}
-
-.tk-comments-container > .tk-comment {
-  margin-top: 0 !important;
-  margin-bottom: .5rem !important;
-  background: var(--sco-card-bg);
-  transition: .3s;
-  border-radius: 12px;
-  padding: .5rem 0 0;
-  border: none;
-  border-top: var(--style-border-dashed)
-}
-
-#page .tk-comments-container > .tk-comment {
-  padding: 1rem 1rem 1.5rem;
-  border: var(--style-border);
-  border-top: var(--style-border);
-  box-shadow: var(--sco-shadow-border)
-}
-
-@media screen and (max-width: 768px) {
-  .tk-comments-container > .tk-comment {
-    padding: 1rem;
-    border: var(--style-border-always);
-    box-shadow: var(--sco-shadow-border)
-  }
-
-  .tk-icon.__comments {
-    left: .5rem
-  }
-}
-
-.tk-icon {
-  position: absolute
-}
-
-.tk-comments-no {
-  display: none !important
-}
-
-.tk-comments-container {
-  min-height: 0 !important;
-  margin-top: .5rem
-}
-
-.tk-replies > .tk-comment {
-  background: var(--sco-card-bg);
-  border-top: var(--style-border-dashed);
-  border-radius: 12px;
-  transition: .3s;
-  padding: 1rem 0 0;
-  margin-top: 0
-}
-
-.tk-content p {
-  margin: 0 !important
-}
-
-.tk-replies .tk-content span:first-child {
-  font-size: .5rem;
-  color: var(--sco-secondtext)
-}
-
-.tk-meta-input .el-input .el-input-group__prepend {
-  -webkit-user-select: none
-}
-
-@media screen and (max-width: 768px) {
-  .tk-meta-input .el-input .el-input-group__prepend {
-    padding: 0 .3rem !important
-  }
-
-  .tk-meta-input {
-    display: flex;
-    flex-direction: column;
-    top: 0;
-    position: inherit !important
-  }
-
-  .tk-meta-input .el-input {
-    margin-left: 0 !important;
-    width: 100% !important;
-    margin-bottom: 8px
-  }
-
-  .tk-icon {
-    position: absolute;
-    right: 0
-  }
-}
-
-.OwO .OwO-body {
-  border: var(--style-border-always) !important;
-  border-radius: 8px !important;
-  overflow: hidden;
-  background-color: var(--sco-maskbg) !important;
-  backdrop-filter: saturate(180%) blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  transform: translateZ(0)
-}
-
-.OwO .OwO-body .OwO-bar {
-  border-top: none !important
-}
-
-.OwO .OwO-body .OwO-items .OwO-item:hover {
-  box-shadow: var(--sco-shadow-lightblack) !important;
-  border-radius: 8px
-}
-
-#twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > div > div.tk-action-icon.OwO.OwO-open > div.OwO-body > div > ul > li > span {
-  line-height: 48px;
-  font-size: 28px
-}
-
-.OwO .OwO-body .OwO-bar .OwO-packages li {
-  margin-right: 0 !important;
-  height: 48px;
-  transition: .3s
-}
-
-.OwO .OwO-body .OwO-bar .OwO-packages li:hover {
-  transition: .3s
-}
-
-.OwO-packages {
-  background: var(--sco-background);
-  padding-left: 8px !important
-}
-
-.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active {
-  background: var(--sco-secondbg) !important
-}
-
-.OwO .OwO-body .OwO-items-show {
-  margin: 12px 8px !important;
-  min-height: 197px
-}
-
-.tk-replies .tk-content {
-  margin-top: 0 !important
-}
-
-.el-input-group--prepend .el-input__inner, .el-input-group__append {
-  border-left-width: 0 !important
-}
\ No newline at end of file
+#twikoo
+  .tk-row
+    .tk-col
+      flex-direction column-reverse !important
+
+  > div.tk-comments
+    > div.tk-comments-container
+      > div.tk-comments-title
+        > span:nth-child(1)
+          display none !important
+
+    > div.tk-submit
+      > div.tk-row.actions
+        > a
+          display none !important
+
+  z-index 102
+
+.tk-meta
+  display flex
+  align-items center
+
+.twikoo-info
+  color var(--sco-secondtext)
+
+.tk-action
+  .tk-action-link:first-child
+    display none
+
+.tk-action-link
+  color var(--sco-lighttext) !important
+  cursor pointer
+  -webkit-user-select none
+
+.tk-action-icon
+  svg
+    fill var(--sco-lighttext) !important
+
+.tk-content
+  img
+    max-height 1100px !important
+    max-width 100% !important
+    border-radius 12px
+
+.tk-avatar
+  width 32px !important
+  height 32px !important
+  box-shadow var(--sco-shadow-border)
+  margin-right 16px !important
+
+  &.tk-has-avatar
+    width 32px !important
+    height 32px !important
+    border-radius 32px !important
+
+.tk-row
+  .tk-avatar
+    display none
+
+.tk-avatar
+  .tk-avatar-img:hover
+    transform rotate(360deg)
+
+.tk-nick
+  font-size 1rem !important
+  line-height 32px
+
+#page
+  .tk-meta-input
+    .el-input
+      box-shadow var(--sco-shadow-border)
+
+.el-loading-mask
+  background-color none !important
+
+.tk-tag
+  margin-left 4px
+
+.tk-tag-green
+  border-radius 4px !important
+  border 0 solid #e1f3d8 !important
+  font-size .5rem !important
+
+[data-theme=dark]
+  .tk-tag-green
+    background-color #67c23a21 !important
+
+.tk-tag-yellow
+  border-radius 4px !important
+  border 0 solid #e1f3d8 !important
+  font-size .5rem !important
+
+[data-theme=dark]
+  .tk-tag-green
+    background-color #c0c23a21 !important
+
+.tk-tag-red
+  border-radius 4px !important
+  border 0 solid #f3d8d8 !important
+  font-size .5rem !important
+
+[data-theme=dark]
+  .tk-tag-red
+    background-color #c23a3a21 !important
+
+.tk-submit-action-icon.__markdown
+  display none
+
+.tk-comments
+  .el-button--primary
+    border-color var(--sco-fontcolor) !important
+    color var(--sco-card-bg) !important
+    border-radius 4px !important
+    box-shadow var(--sco-shadow-black)
+    transition .3s
+    width 5rem
+    position absolute
+    top -53px
+    right 0
+    margin-left .5rem !important
+    height 32px
+
+  .el-button--primary.is-disabled,
+  .el-button--primary.is-disabled:active,
+  .el-button--primary.is-disabled:focus,
+  .el-button--primary.is-disabled:hover
+    opacity .2
+
+.tk-row-actions-start
+  position absolute
+  top -100px
+  left 17px
+
+@media screen and (max-width: 768px)
+  .tk-submit
+    .el-button--primary
+      width 5rem
+      height 132px
+      top -161px
+
+  .tk-row-actions-start
+    top -210px
+
+.tk-comments-title
+  position absolute
+  bottom 0
+  left 0
+
+.tk-extras
+  margin-top .5rem
+  padding-bottom .5rem
+
+.tk-icon.__comments:first-child
+  display none
+
+.tk-icon.__comments
+  margin-left 0 !important
+
+.tk-row.actions
+  margin-bottom .5rem !important
+  margin-left 0 !important
+  margin-top .5rem !important
+  justify-content space-around !important
+
+.tk-meta-input
+  position relative !important
+  margin-top .8rem
+  width calc(100% - 5.5rem)
+
+.tk-content
+  .tk-owo-emotion
+    width 3em
+    margin 0 2px 0 2px
+
+.tk-owo-emotion,
+.twikoo
+  .OwO-item
+    img
+      pointer-events none
+
+.tk-extra
+  background var(--sco-card-bg)
+  border var(--style-border-always)
+  padding 1px 5px 1px 2px
+  border-radius 8px
+  margin-right 4px !important
+  color var(--sco-secondtext) !important
+  display inline !important
+  margin-top 6px !important
+  font-size .5rem
+
+.tk-extra
+  .tk-icon
+    display none
+
+.tk-expand
+  background var(--sco-card-bg) !important
+  color var(--sco-fontcolor) !important
+  border var(--style-border-always)
+  box-shadow var(--sco-shadow-border)
+  border-radius 12px
+  -webkit-user-select none
+
+  &:hover
+    background var(--sco-theme) !important
+    color var(--sco-white) !important
+
+.tk-time
+  color var(--sco-secondtext) !important
+  font-size .6rem
+  margin-left .5rem
+
+.tk-comments-container
+  > .tk-comment
+    margin-top 0 !important
+    margin-bottom .5rem !important
+    background var(--sco-card-bg)
+    transition .3s
+    border-radius 12px
+    padding .5rem 0 0
+    border none
+    border-top var(--style-border-dashed)
+
+#page
+  .tk-comments-container
+    > .tk-comment
+      padding 1rem 1rem 1.5rem
+      border var(--style-border)
+      border-top var(--style-border)
+      box-shadow var(--sco-shadow-border)
+
+@media screen and (max-width: 768px)
+  .tk-comments-container
+    > .tk-comment
+      padding 1rem
+      border var(--style-border-always)
+      box-shadow var(--sco-shadow-border)
+
+  .tk-icon.__comments
+    left .5rem
+
+.tk-icon
+  position absolute
+
+.tk-comments-no
+  display none !important
+
+.tk-comments-container
+  min-height 0 !important
+  margin-top .5rem
+
+.tk-replies
+  > .tk-comment
+    background var(--sco-card-bg)
+    border-top var(--style-border-dashed)
+    border-radius 12px
+    transition .3s
+    padding 1rem 0 0
+    margin-top 0
+
+.tk-content
+  p
+    margin 0 !important
+
+.tk-replies
+  .tk-content
+    span:first-child
+      font-size .5rem
+      color var(--sco-secondtext)
+
+.tk-meta-input
+  .el-input
+    .el-input-group__prepend
+      -webkit-user-select none
+
+@media screen and (max-width: 768px)
+  .tk-meta-input
+    .el-input
+      .el-input-group__prepend
+        padding 0 .3rem !important
+
+  .tk-meta-input
+    display flex
+    flex-direction column
+    top 0
+    position inherit !important
+
+  .tk-meta-input
+    .el-input
+      margin-left 0 !important
+      width 100% !important
+      margin-bottom 8px
+
+  .tk-icon
+    position absolute
+    right 0
+
+img.tk-avatar-img
+  height 32px !important
+  border-radius 32px
+  border var(--style-border-always)
+
+.el-input--small
+  .el-input__inner
+    padding 8px
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before
+  content '输入QQ号会自动获取昵称和头像'
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before
+  content '收到回复将会发送到你的邮箱'
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before
+  content '可以通过昵称访问你的网站'
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before
+  display block
+  animation commonTipsIn .3s
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after
+  display block
+  animation commonTriangleIn .3s
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend::before
+  display none
+  position absolute
+  top -60px
+  white-space nowrap
+  border-radius 10px
+  left 50%
+  transform translate(-50%)
+  padding 14px 18px
+  background #444
+  color #fff
+  z-index 100
+
+.el-input.el-input--small.el-input-group.el-input-group--prepend::after
+  display none
+  content ''
+  position absolute
+  border 12px solid transparent
+  border-top-color #444
+  left 50%
+  transform translate(-50%, -46px)
+
+.el-input-group__append, .el-input-group__prepend
+  background-color var(--sco-card-bg) !important
+  color var(--sco-fontcolor) !important
+  border-color var(--sco-card-border) !important
+  border var(--style-border-always) !important
+  font-weight 700
+
+.el-input__inner
+  background var(--sco-secondbg) !important
+  border 1px solid var(--sco-card-border) !important
+  color var(--sco-fontcolor) !important
+  padding-left 8px
+
+.page
+  .el-input__inner
+    background var(--sco-card-bg) !important
+
+.el-input__inner:focus
+  border 1px solid var(--sco-main) !important
+
+.el-textarea__inner
+  background var(--sco-secondbg) !important
+  color var(--sco-fontcolor) !important
+  border-radius 12px !important
+  min-height 100px !important
+  padding 16px 16px 40px 16px !important
+  border var(--style-border-always) !important
+  box-shadow none !important
+
+@media screen and (max-width: 768px)
+  .el-textarea__inner
+    border-radius 4px !important
+    background var(--sco-card-bg) !important
+
+#page
+  .el-textarea__inner
+    background var(--sco-card-bg) !important
+    box-shadow var(--sco-shadow-border)
+
+.el-textarea__inner:focus
+  border var(--style-border-hover-always) !important
+  box-shadow var(--sco-shadow-main)
+
+.el-button
+  background-color var(--sco-fontcolor) !important
+  border 0 solid var(--sco-main) !important
+  color var(--sco-background) !important
+  border-radius 8px !important
+
+.el-button:hover
+  background var(--sco-main) !important
+  color var(--sco-white) !important
+
+.el-button.tk-preview
+  display none !important
+
+button.el-button.tk-cancel.el-button--default.el-button--small
+  background var(--sco-secondbg) !important
+  border-radius 8px !important
+  color var(--sco-fontcolor) !important
+
+@media screen and (max-width: 768px)
+  .OwO .OwO-body
+    width 300px
+
+.OwO
+  .OwO-body
+    border var(--style-border-always) !important
+    border-radius 8px !important
+    overflow hidden
+    background-color var(--sco-maskbg) !important
+    backdrop-filter saturate(180%) blur(10px)
+    -webkit-backdrop-filter blur(10px)
+    transform translateZ(0)
+    .OwO-bar
+      border-top none !important
+    .OwO-items
+      .OwO-item:hover
+        box-shadow var(--sco-shadow-lightblack) !important
+        border-radius 8px
+
+#twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > div > div.tk-action-icon.OwO.OwO-open > div.OwO-body > div > ul > li > span
+  line-height 48px
+  font-size 28px
+
+.OwO
+  .OwO-body
+    .OwO-bar
+      .OwO-packages
+        li
+          margin-right 0 !important
+          height 48px
+          transition .3s
+        li:hover
+          transition .3s
+
+.OwO-packages
+  background var(--sco-background)
+  padding-left 8px !important
+
+.OwO
+  .OwO-body
+    .OwO-bar
+      .OwO-packages
+        .OwO-package-active
+          background var(--sco-secondbg) !important
+    .OwO-items-show
+      margin 12px 8px !important
+      min-height 197px
+    .OwO-bar
+      .OwO-packages
+        li
+          line-height 45px !important
+    z-index 102
+    width 500px
+
+#owo-big
+  position fixed
+  align-items center
+  background-color var(--sco-card-bg)
+  border var(--style-border-always)
+  border-radius 10px
+  z-index 9999
+  display none
+  transform translate(0, -105%)
+  overflow hidden
+  animation owoIn .3s cubic-bezier(.42, 0, .3, 1.11)
+  padding 1rem
+  img
+    width 100%
+
+.tk-replies
+  .tk-content
+    margin-top 0 !important
+
+.el-input-group--prepend
+  .el-input__inner, .el-input-group__append
+    border-left-width 0 !important
\ No newline at end of file
diff --git a/source/css/_extra/aplayer.styl b/source/css/_extra/aplayer.styl
deleted file mode 100644
index 3d868619..00000000
--- a/source/css/_extra/aplayer.styl
+++ /dev/null
@@ -1,40 +0,0 @@
-#article-container .aplayer {
-  margin: 0 0 1rem
-}
-
-#article-container .aplayer ol, #article-container .aplayer ul {
-  margin: 0;
-  padding: 0
-}
-
-#article-container .aplayer ol li, #article-container .aplayer ul li {
-  margin: 0;
-  padding: 0 15px
-}
-
-#article-container .aplayer ol li::before, #article-container .aplayer ul li::before {
-  content: none
-}
-
-.aplayer .aplayer-list ol {
-  backdrop-filter: blur(1px);
-  -webkit-backdrop-filter: blur(1px);
-  transform: translateZ(0)
-}
-
-.aplayer .aplayer-lrc:after {
-  display: none !important
-}
-
-.aplayer.aplayer-withlrc.aplayer-withlist {
-  border-radius: 12px
-}
-
-#article-container .aplayer {
-  border-radius: 12px;
-  min-height: 90px;
-  background: var(--sco-card-bg);
-  border: var(--style-border);
-  box-shadow: var(--sco-shadow-border)
-}
-
diff --git a/source/css/_extra/rightmenu.styl b/source/css/_extra/rightmenu.styl
index 2e17793d..8e1a3024 100644
--- a/source/css/_extra/rightmenu.styl
+++ b/source/css/_extra/rightmenu.styl
@@ -1,97 +1,83 @@
-#rightMenu {
-  display: none;
-  position: fixed;
-  padding: 0 .25rem;
-  width: 9rem;
-  height: fit-content;
-  top: 10%;
-  left: 10%;
-  background-color: var(--sco-maskbgdeep);
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  transform: translateZ(0);
-  color: var(--sco-fontcolor);
-  border-radius: 12px;
-  z-index: 99994;
-  border: var(--style-border);
-  user-select: none;
-  box-shadow: var(--sco-shadow-black);
-  transition: border .3s
-}
+#rightMenu
+  display none
+  position fixed
+  padding 0 .25rem
+  width 9rem
+  height fit-content
+  top 10%
+  left 10%
+  background-color var(--sco-maskbgdeep)
+  -webkit-backdrop-filter blur(20px)
+  backdrop-filter blur(20px)
+  transform translateZ(0)
+  color var(--sco-fontcolor)
+  border-radius 12px
+  z-index 99994
+  border var(--style-border)
+  user-select none
+  box-shadow var(--sco-shadow-black)
+  transition border .3s
 
-#rightMenu:hover {
-  border: var(--style-border-hover);
-  box-shadow: var(--sco-shadow-theme)
-}
+#rightMenu:hover
+  border var(--style-border-hover)
+  box-shadow var(--sco-shadow-theme)
 
-#rightMenu .rightMenu-group {
-  padding: .35rem .3rem;
-  transition: .3s
-}
+#rightMenu .rightMenu-group
+  padding .35rem .3rem
+  transition .3s
 
-#rightMenu .rightMenu-line {
-  border-top: 1px dashed var(--sco-theme-op)
-}
+#rightMenu .rightMenu-line
+  border-top 1px dashed var(--sco-theme-op)
 
-#rightMenu .rightMenu-group.rightMenu-small {
-  display: flex;
-  justify-content: space-between
-}
+#rightMenu .rightMenu-group.rightMenu-small
+  display flex
+  justify-content space-between
 
-#rightMenu .rightMenu-group .rightMenu-item {
-  border-radius: 8px;
-  transition: .3s;
-  cursor: pointer
-}
+#rightMenu .rightMenu-group .rightMenu-item
+  border-radius 8px
+  transition .3s
+  cursor pointer
 
-#rightMenu .rightMenu-line .rightMenu-item {
-  margin: .25rem 0;
-  padding: .25rem 0
-}
+#rightMenu .rightMenu-line .rightMenu-item
+  margin .25rem 0
+  padding .25rem 0
 
-#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
-  display: flex
-}
+#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item
+  display flex
 
-#rightMenu .rightMenu-group .rightMenu-item:hover {
-  background-color: var(--sco-main);
-  color: var(--sco-white);
-  box-shadow: var(--sco-shadow-main)
-}
+#rightMenu .rightMenu-group .rightMenu-item:hover
+  background-color var(--sco-main)
+  color var(--sco-white)
+  box-shadow var(--sco-shadow-main)
 
-#rightMenu .rightMenu-group .rightMenu-item i {
-  display: inline-block;
-  text-align: center;
-  line-height: 1.5rem;
-  width: 1.5rem;
-  padding: 0 .25rem
-}
+#rightMenu .rightMenu-group .rightMenu-item i
+  display inline-block
+  text-align center
+  line-height 1.5rem
+  width 1.5rem
+  padding 0 .25rem
 
-#rightMenu .rightMenu-line .rightMenu-item i {
-  margin: 0 .25rem
-}
+#rightMenu .rightMenu-line .rightMenu-item i
+  margin 0 .25rem
 
-#rightMenu .rightMenu-group .rightMenu-item span {
-  line-height: 1.5rem
-}
+#rightMenu .rightMenu-group .rightMenu-item span
+  line-height 1.5rem
 
-.rightMenu-small .rightMenu-item {
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center
-}
+.rightMenu-small .rightMenu-item
+  width 30px
+  height 30px
+  line-height 30px
+  display flex
+  align-items center
+  justify-content center
 
-#rightmenu-mask {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  background: 0 0;
-  top: 0;
-  left: 0;
-  display: none;
-  margin: 0 !important;
-  z-index: 99993
-}
\ No newline at end of file
+#rightmenu-mask
+  position fixed
+  width 100vw
+  height 100vh
+  background 0 0
+  top 0
+  left 0
+  display none
+  margin 0 !important
+  z-index 99993
\ No newline at end of file
diff --git a/source/css/_layout/articleSort.styl b/source/css/_layout/articleSort.styl
index 27363338..005e928f 100644
--- a/source/css/_layout/articleSort.styl
+++ b/source/css/_layout/articleSort.styl
@@ -1,149 +1,113 @@
-.article-sort-title:before {
-  display: none
-}
-
-.article-sort-title:after {
-  display: none
-}
-
-.article-sort-title {
-  margin-left: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  font-weight: 700;
-  font-size: 2em
-}
-
-.article-sort-title sup {
-  margin-left: 4px;
-  font-size: 16px;
-  font-weight: 700;
-  opacity: .4;
-  top: -1em
-}
-
-.article-sort-item-title {
-  line-height: 1.3;
-  -webkit-line-clamp: 1
-}
-
-@media screen and (max-width: 768px) {
-  .article-sort-item-title {
-    -webkit-line-clamp: 2
-  }
-}
-
-.article-sort .article-sort-item .article-sort-item-img {
-  border-radius: 12px;
-  min-width: 151px;
-  min-height: 80px;
-  background: var(--sco-secondbg);
-  -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
-}
-
-@media screen and (max-width: 768px) {
-  .article-sort .article-sort-item .article-sort-item-img {
-    min-width: 80px
-  }
-}
-
-.article-sort-item:before {
-  display: none
-}
-
-.article-sort {
-  border: none
-}
-
-.article-sort {
-  margin-left: 0;
-  padding-left: 0
-}
-
-.article-sort-item {
-  margin: 0 0 1rem 0;
-  overflow: hidden;
-  border-radius: 12px
-}
-
-@media screen and (max-width: 768px) {
-  .article-sort-item-info a {
-    white-space: inherit !important
-  }
-}
-
-.article-sort-item.year {
-  font-size: .8rem;
-  color: var(--sco-secondtext);
-  margin-bottom: .2rem
-}
-
-.article-sort-item-img img:hover {
-  transform: scale(1)
-}
-
-.article-sort-item-info {
-  padding: 0 .8rem;
-  display: flex;
-  flex-direction: column
-}
-
-.article-sort-item-time {
-  order: 1;
-  margin-top: 4px;
-  color: var(--sco-secondtext)
-}
-
-.article-sort-item-title {
-  order: 0;
-  font-weight: 700
-}
-
-.article-sort-item-title:hover {
-  transform: translateX(0);
-  color: var(--sco-hovertext)
-}
-
-.article-sort-item-info a {
-  margin-right: auto;
-  overflow: hidden;
-  text-overflow: ellipsis
-}
-
-.article-sort-item-info-more {
-  display: flex;
-  font-size: .7rem;
-  margin-right: auto
-}
-
-.article-sort-item-time {
-  display: none
-}
-
-.article-sort-item-tags {
-  margin-top: 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  display: inline-block;
-  text-overflow: ellipsis;
-  width: 100%;
-  font-size: .7rem
-}
-
-.article-sort-item-tags a {
-  color: var(--sco-fontcolor);
-  transition: .3s
-}
-
-.article-sort-item-tags a:hover {
-  color: var(--sco-theme);
-  transition: .3s
-}
-
-.article-sort-item-tags a .tags-punctuation {
-  font-size: 12px;
-  margin-right: 1px
-}
-
-
-
+.article-sort-title:before
+  display none
+
+.article-sort-title:after
+  display none
+
+.article-sort-title
+  margin-left 0
+  padding-bottom 0
+  padding-left 0
+  font-weight 700
+  font-size 2em
+
+.article-sort-title sup
+  margin-left 4px
+  font-size 16px
+  font-weight 700
+  opacity .4
+  top -1em
+
+.article-sort-item-title
+  line-height 1.3
+  -webkit-line-clamp 1
+
+@media screen and (max-width: 768px)
+  .article-sort-item-title
+    -webkit-line-clamp 2
+
+.article-sort .article-sort-item .article-sort-item-img
+  border-radius 12px
+  min-width 151px
+  min-height 80px
+  background var(--sco-secondbg)
+  -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
+
+@media screen and (max-width: 768px)
+  .article-sort .article-sort-item .article-sort-item-img
+    min-width 80px
+
+.article-sort-item:before
+  display none
+
+.article-sort
+  border none
+  margin-left 0
+  padding-left 0
+
+.article-sort-item
+  margin 0 0 1rem 0
+  overflow hidden
+  border-radius 12px
+
+@media screen and (max-width: 768px)
+  .article-sort-item-info a
+    white-space inherit !important
+
+.article-sort-item.year
+  font-size .8rem
+  color var(--sco-secondtext)
+  margin-bottom .2rem
+
+.article-sort-item-img img:hover
+  transform scale(1)
+
+.article-sort-item-info
+  padding 0 .8rem
+  display flex
+  flex-direction column
+
+.article-sort-item-time
+  order 1
+  margin-top 4px
+  color var(--sco-secondtext)
+  display none
+
+.article-sort-item-title
+  order 0
+  font-weight 700
+
+.article-sort-item-title:hover
+  transform translateX(0)
+  color var(--sco-hovertext)
+
+.article-sort-item-info a
+  margin-right auto
+  overflow hidden
+  text-overflow ellipsis
+
+.article-sort-item-info-more
+  display flex
+  font-size .7rem
+  margin-right auto
+
+.article-sort-item-tags
+  margin-top 8px
+  white-space nowrap
+  overflow hidden
+  display inline-block
+  text-overflow ellipsis
+  width 100%
+  font-size .7rem
+
+.article-sort-item-tags a
+  color var(--sco-fontcolor)
+  transition .3s
+
+.article-sort-item-tags a:hover
+  color var(--sco-theme)
+  transition .3s
+
+.article-sort-item-tags a .tags-punctuation
+  font-size 12px
+  margin-right 1px
\ No newline at end of file
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index a2dbf562..2fe50231 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -568,11 +568,11 @@ li.card-archive-list-item {
 }
 
 .webinfo-item-title i {
-  line-height: 2;
+  line-height: 2 !important;
   margin-right: 6px;
   width: 16px;
   text-align: center;
-  font-size: 16px
+  font-size: 16px !important;
 }
 
 @media screen and (min-width: 1300px) {
@@ -640,7 +640,7 @@ li.card-archive-list-item {
   -webkit-transform-style: preserve-3d
 }
 
-#aside-content .card-widget.card-power,#aside-content .card-widget.card-history,#aside-content .card-widget.card-welcome {
+#aside-content .card-widget.card-power, #aside-content .card-widget.card-history, #aside-content .card-widget.card-welcome {
   padding: .4rem .6rem !important
 }
 
@@ -679,14 +679,6 @@ li.card-archive-list-item {
   flex-wrap: wrap
 }
 
-#power-star-image {
-  width: 60px;
-  height: 60px;
-  border-radius: 8px;
-  background-size: contain;
-  margin-right: 12px
-}
-
 a#power-star {
   display: flex;
   padding: 8px;
@@ -696,12 +688,29 @@ a#power-star {
   flex-wrap: nowrap;
   justify-content: flex-start;
   position: relative;
-  margin: 12px 0
+  margin: 12px 0;
+  background: var(--sco-secondbg);
+  transition: .3s ease-out
 }
 
 a#power-star:hover {
   background: var(--sco-main);
-  color: var(--sco-white)
+  color: var(--sco-white);
+  box-shadow: var(--sco-shadow-theme);
+}
+
+a#power-star:hover #power-star-image {
+  transform: scale(.9);
+}
+
+#power-star-image {
+  width: 60px;
+  height: 60px;
+  border-radius: 60px;
+  background-size: cover;
+  margin-right: 12px;
+  border: var(--style-border-always);
+  transition: .3s ease-out;
 }
 
 div#power-star-title {
@@ -1242,7 +1251,8 @@ div#author-info__sayhi:hover {
   box-shadow: var(--sco-shadow-theme);
   border-radius: 8px;
   padding: .15rem .5rem;
-  border: var(--style-border-hover)
+  border: var(--style-border-hover);
+  cursor pointer
 }
 
 #aside-content #card-toc .toc-content:before {
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
index 22330f93..ec3269cc 100644
--- a/source/css/_layout/layout.styl
+++ b/source/css/_layout/layout.styl
@@ -94,10 +94,6 @@
   html.hide-aside .layout > div:first-child
     width: 100%
 
-.hide-aside #page span.tags-punctuation::before {
-  font-size: 22px
-}
-
 #page .category-lists .category-title {
   display: none
 }
diff --git a/source/css/_page/tag.styl b/source/css/_page/tag.styl
index cdadd74b..24f65cc7 100644
--- a/source/css/_page/tag.styl
+++ b/source/css/_page/tag.styl
@@ -17,7 +17,7 @@
 }
 
 #tag #tag-page-tags a.select {
-  color: var(--sco-white) !important;
+  color: var(--sco-card-bg) !important;
   background: var(--sco-theme);
   box-shadow: var(--sco-shadow-theme)
 }
@@ -31,4 +31,12 @@
 #tag #tag-page-tags a.select .tagsPageCount {
   background: var(--sco-card-bg);
   color: var(--sco-lighttext)
+}
+
+span.tags-punctuation {
+  margin-right: 2px;
+  font-size: .7rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
 }
\ No newline at end of file
diff --git a/source/css/_post/index.styl b/source/css/_post/index.styl
index d340a6e1..dbc42d95 100644
--- a/source/css/_post/index.styl
+++ b/source/css/_post/index.styl
@@ -661,8 +661,8 @@ img.post-copyright__author_img_front {
   margin-left: 4px
 }
 
-span.tags-punctuation {
-  margin-right: 2px
+.hide-aside #page span.tags-punctuation::before {
+  font-size: 22px
 }
 
 span.tags-punctuation::before {

From 6781aee6eb8370a9ba971975a20308048970a41e Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Mon, 20 Nov 2023 23:15:32 +0800
Subject: [PATCH 25/43] =?UTF-8?q?=F0=9F=9A=97=20=E8=BD=ACStylus=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/css/_comment/twikoo.styl |  3 ++
 source/css/_layout/layout.styl  | 86 ---------------------------------
 source/css/_page/category.styl  |  8 +--
 source/css/_page/index.styl     | 18 +++----
 source/css/_page/tag.styl       | 69 ++++++++++++--------------
 5 files changed, 48 insertions(+), 136 deletions(-)

diff --git a/source/css/_comment/twikoo.styl b/source/css/_comment/twikoo.styl
index 61740e00..52db6b56 100644
--- a/source/css/_comment/twikoo.styl
+++ b/source/css/_comment/twikoo.styl
@@ -429,6 +429,9 @@ button.el-button.tk-cancel.el-button--default.el-button--small
   font-size 28px
 
 .OwO
+  &.OwO-open
+    .OwO-body
+      animation .3s ease .1s 1 normal both running donate_effcet
   .OwO-body
     .OwO-bar
       .OwO-packages
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
index ec3269cc..5d1a9af7 100644
--- a/source/css/_layout/layout.styl
+++ b/source/css/_layout/layout.styl
@@ -94,89 +94,3 @@
   html.hide-aside .layout > div:first-child
     width: 100%
 
-#page .category-lists .category-title {
-  display: none
-}
-
-#page {
-  background: 0 0;
-  border: none;
-  padding: 0
-}
-
-@media screen and (min-width: 1300px) {
-  #page > div:not(.author-content-item) {
-    animation: slide-in .6s .2s backwards
-  }
-}
-
-#post-cover-rgb {
-  position: absolute;
-  width: 100% !important;
-  height: 100% !important;
-  background: var(--sco-lighttext)
-}
-
-#page {
-  box-shadow: none
-}
-
-
-.full_page #post-cover {
-  display: none
-}
-
-.pace {
-  -webkit-pointer-events: none;
-  pointer-events: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  z-index: 2000;
-  position: fixed;
-  margin: auto;
-  top: 4px;
-  left: 0;
-  right: 0;
-  height: 8px;
-  border-radius: 8px;
-  width: 4rem;
-  background: var(--sco-secondbg);
-  border: var(--style-border);
-  overflow: hidden
-}
-
-.pace-inactive .pace-progress {
-  opacity: 0;
-  transition: .3s ease-in
-}
-
-.pace .pace-progress {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  -o-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  max-width: 200px;
-  z-index: 2000;
-  display: block;
-  position: absolute;
-  top: 0;
-  right: 100%;
-  height: 100%;
-  width: 100%;
-  background: var(--sco-logo-color);
-  animation: gradient 2s ease infinite;
-  background-size: 200%
-}
-
-.pace.pace-inactive {
-  opacity: 0;
-  transition: .3s;
-  top: -8px
-}
\ No newline at end of file
diff --git a/source/css/_page/category.styl b/source/css/_page/category.styl
index 65933363..2bde1153 100644
--- a/source/css/_page/category.styl
+++ b/source/css/_page/category.styl
@@ -2,10 +2,6 @@
   font-size: 18px
 }
 
-.tags-name {
-  margin-left: 2px
-}
-
 #page .category-lists ul li::before {
   display: none
 }
@@ -147,4 +143,8 @@ span.tagsPageCount {
 
 #page .tag-cloud-list a:hover span.tagsPageCount {
   color: var(--sco-lighttext)
+}
+
+.tags-name {
+  margin-left: 2px
 }
\ No newline at end of file
diff --git a/source/css/_page/index.styl b/source/css/_page/index.styl
index 6fe55c17..07656a3d 100644
--- a/source/css/_page/index.styl
+++ b/source/css/_page/index.styl
@@ -45,14 +45,14 @@
     .category-in-bar-tips
       margin-bottom .25rem
 
-.page-title {
-  display: none
-}
+.page-title
+  display none
 
-#page h1.page-title {
-  margin: .4rem 0 1rem
-}
+#page h1.page-title
+  margin .4rem 0 1rem
 
-#page {
-  min-height: calc(100vh - 464px)
-}
\ No newline at end of file
+#page
+  background 0 0
+  border none
+  padding 0
+  box-shadow none
\ No newline at end of file
diff --git a/source/css/_page/tag.styl b/source/css/_page/tag.styl
index 24f65cc7..47333850 100644
--- a/source/css/_page/tag.styl
+++ b/source/css/_page/tag.styl
@@ -1,42 +1,37 @@
-#tag #tag-page-tags {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: 0 -.75rem .5rem;
-}
+#tag
+  #tag-page-tags
+    display flex
+    flex-direction row
+    flex-wrap wrap
+    margin 0 -.75rem .5rem
 
-#tag #tag-page-tags a {
-  padding: .1rem .5rem;
-  margin: .25rem .25rem;
-  line-height: 1.6;
-  border-radius: 8px;
-  color: var(--sco-fontcolor) !important;
-  border: var(--style-border-always);
-  display: flex;
-  align-items: center
-}
+    a
+      padding .1rem .5rem
+      margin .25rem .25rem
+      line-height 1.6
+      border-radius 8px
+      color var(--sco-fontcolor) !important
+      border var(--style-border-always)
+      display flex
+      align-items center
 
-#tag #tag-page-tags a.select {
-  color: var(--sco-card-bg) !important;
-  background: var(--sco-theme);
-  box-shadow: var(--sco-shadow-theme)
-}
+      &.select
+        color var(--sco-card-bg) !important
+        background var(--sco-theme)
+        box-shadow var(--sco-shadow-theme)
 
-#tag #tag-page-tags a:hover {
-  color: var(--sco-white) !important;
-  background: var(--sco-theme);
-  box-shadow: var(--sco-shadow-theme)
-}
+      &:hover
+        color var(--sco-white) !important
+        background var(--sco-theme)
+        box-shadow var(--sco-shadow-theme)
 
-#tag #tag-page-tags a.select .tagsPageCount {
-  background: var(--sco-card-bg);
-  color: var(--sco-lighttext)
-}
+      &.select .tagsPageCount
+        background var(--sco-card-bg)
+        color var(--sco-lighttext)
 
-span.tags-punctuation {
-  margin-right: 2px;
-  font-size: .7rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-}
\ No newline at end of file
+span.tags-punctuation
+  margin-right 2px
+  font-size .7rem
+  font-weight 700
+  display flex;
+  align-items center
\ No newline at end of file

From c6eee9855d9c8021f30d74c3df8fd16a6555f40b Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Wed, 22 Nov 2023 23:41:30 +0800
Subject: [PATCH 26/43] =?UTF-8?q?=F0=9F=9A=97stylus=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                                   |    2 +-
 layout/partial/compoment/equipment/list.ejs   |    2 +-
 .../compoment/home/homeCategoryBar.ejs        |    6 +-
 .../partial/compoment/mixins/articleSort.ejs  |    3 +-
 layout/partial/compoment/post/postMeta.ejs    |   38 +-
 layout/tag.ejs                                |    2 +-
 source/css/_comment/twikoo.styl               |   12 +-
 source/css/_layout/articleSort.styl           |  115 +-
 source/css/_layout/aside.styl                 |    4 +-
 source/css/_layout/footer.styl                |  765 +++----
 source/css/_layout/header.styl                |   25 +-
 source/css/_layout/index.styl                 |  186 +-
 source/css/_layout/layout.styl                |   16 +-
 source/css/_layout/sidebar.styl               |  496 ++---
 source/css/_page/about.styl                   |    3 +-
 source/css/_page/category.styl                |  268 ++-
 source/css/_page/error.styl                   |  345 ++-
 source/css/_page/homeTop.styl                 | 1747 +++++++--------
 source/css/_page/index.styl                   |    3 +-
 source/css/_page/moment.styl                  |  235 +-
 source/css/_page/rss.styl                     |    2 +-
 source/css/_post/index.styl                   | 1890 ++++++++---------
 source/css/_post/postContent.styl             |  125 +-
 source/css/_post/relatedPost.styl             |  332 ++-
 source/css/_post/reward.styl                  |  413 ++--
 source/js/main.js                             |   62 +
 26 files changed, 3220 insertions(+), 3877 deletions(-)

diff --git a/_config.yml b/_config.yml
index 9246f736..0410aaec 100755
--- a/_config.yml
+++ b/_config.yml
@@ -333,7 +333,7 @@ thirdparty:
     key: # 前往tianli-AI 购买
     rec_method: # 推荐文章方式（all:匹配数据库所有文章、web:仅当前博客文章）默认：web
     ai_name: # 左上角AI名称
-    ai_tips: # 右上角GPT版本文字
+    ai_tips:  # 右上角GPT版本文字
     ai_introduce: # AI自我介绍
     hide_shuttle: false # 隐藏矩阵穿梭按钮
     typewriter: true # 打字机效果
diff --git a/layout/partial/compoment/equipment/list.ejs b/layout/partial/compoment/equipment/list.ejs
index 055d75bf..76ee77b0 100755
--- a/layout/partial/compoment/equipment/list.ejs
+++ b/layout/partial/compoment/equipment/list.ejs
@@ -22,7 +22,7 @@
                                             <a class="equipment-item-content-item-link" href="<%= item.link %>" target="_blank">查看文章</a>
                                         <% } %>
                                         <a class="bber-reply" onclick="sco.toTalk('<%- item.description %>')" >
-                                            <i class="fa-solid fa-comment" style="font-size: 1rem;">
+                                            <i class="scoicon sco-chat-fill" style="font-size: 1rem;">
                                             </i>
                                           </a>
                                     </div>
diff --git a/layout/partial/compoment/home/homeCategoryBar.ejs b/layout/partial/compoment/home/homeCategoryBar.ejs
index 6f6617de..74c536c1 100755
--- a/layout/partial/compoment/home/homeCategoryBar.ejs
+++ b/layout/partial/compoment/home/homeCategoryBar.ejs
@@ -2,9 +2,9 @@
     <div class="category-bar-item <%= is_home() ? 'select' : '' %>" id="category-bar-home">
         <a href="/">首页</a>
     </div>
-    <% site.tags.each(function(tag){ %>
-        <div class="category-bar-item <%= select ? (select === tag.name ? 'select' : '') : '' %>">
-            <a href="<%= url_for(tag.path) %>"><%= tag.name %></a>
+    <% site.categories.each(function(item){ %>
+        <div class="category-bar-item <%= select ? (select === item.name ? 'select' : '') : '' %>" id="<%= item.name %>">
+            <a href="<%= url_for(item.path) %>"><%= item.name %></a>
         </div>
     <% }) %>
 </div>
diff --git a/layout/partial/compoment/mixins/articleSort.ejs b/layout/partial/compoment/mixins/articleSort.ejs
index 3d3b2dd6..8abd6ef1 100755
--- a/layout/partial/compoment/mixins/articleSort.ejs
+++ b/layout/partial/compoment/mixins/articleSort.ejs
@@ -16,8 +16,7 @@
             <div class="article-sort-item-tags">
                 <% post.tags.data.forEach(tags => { %>
                     <a class="article-meta__tags" href="<%= url_for(tags.path) %>" onclick="window.event.cancelBubble=true;">
-                        <span class="tags-punctuation"></span>
-                        <%= tags.name %>
+                        <span class="tags-punctuation"><%= tags.name %></span>
                     </a>
                 <% }) %>
             </div>
diff --git a/layout/partial/compoment/post/postMeta.ejs b/layout/partial/compoment/post/postMeta.ejs
index 815c1d28..e1889cf8 100755
--- a/layout/partial/compoment/post/postMeta.ejs
+++ b/layout/partial/compoment/post/postMeta.ejs
@@ -18,8 +18,7 @@
                 <div class="post-meta__tag-list">
                     <% page.tags.data.forEach(tags => { %>
                         <a class="post-meta__tags" href="<%= url_for(tags.path) %>">
-                            <span class="tags-punctuation"></span>
-                            <span class="tags-name"><%= tags.name %></span>
+                            <span class="tags-name tags-punctuation"><%= tags.name %></span>
                         </a>
                     <% }) %>
                 </div>
@@ -41,40 +40,39 @@
                     <time datetime="<%= moment(page.updated).format() %>"></time>
                 </span>
             <% } %>
-            <% if(theme.post.meta.locate){ %>
-                <span class="post-meta-position" title="作者IP归属地为<%= page.locate %>">
-                    <i class="post-meta-icon scoicon sco-map-pin-fill"></i>
-                    <span><%= page.locate %></span>
-                </span>
-            <% } %>
             <% if(theme.thirdparty.wordcount){ %>
-                <% if(theme.post.meta.wordcount){ %>
-                    <span class="post-meta-wordcount">
+                <span class="post-meta-wordcount">
+                    <% if(theme.post.meta.wordcount){ %>
                         <i class="scoicon sco-word-fill post-meta-icon" title="文章字数"></i>
                         <span class="word-count"><%= wordcount(page.content) %></span>
-                    </span>
-                <% } %>
-                <% if(theme.post.meta.readtime){ %>
-                    <span class="post-meta-time">
+                    <% } %>
+                    <span class="post-meta-separator"></span>
+                    <% if(theme.post.meta.readtime){ %>
                         <i class="scoicon sco-clock-fill post-meta-icon" title="阅读耗时"></i>
                         <span><%= min2read(page.content) %> min</span>
-                    </span>
-                <% } %>
+                    <% } %>
+                </span>
+            <% } %>
+            <% if(theme.post.meta.locate){ %>
+                <span class="post-meta-position" title="作者IP归属地为<%= page.locate %>">
+                    <i class="post-meta-icon scoicon sco-map-pin-fill"></i>
+                    <span><%= page.locate %></span>
+                </span>
             <% } %>
             <% if(theme.thirdparty.busuanzi.enable && theme.post.meta.pv){ %>
-                <span class="post-meta-pv" title="文章热度">
+                <a class="post-meta-pv" href="/<%= page.path %>" title="文章热度">
                     <i class="scoicon sco-fire-fill post-meta-icon"></i>
                     <% if(theme.thirdparty.busuanzi.usecomment){ %>
                         <span id="twikoo_visitors"><i class="scoicon sco-loading-line"></i></span>
                     <% }else{ %>
                         <span id="busuanzi_value_page_pv"><i class="scoicon sco-loading-line"></i></span>
                     <% } %>
-                </span>
+                </a>
             <% } %>
             <% if(theme.post.meta.comment && page.comment){ %>
-                <span class="post-meta-commentcount" title="评论数">
+                <span class="post-meta-commentcount" title="评论数" onclick="sco.scrollTo('post-comment')">
                     <i class="scoicon sco-chat-fill"></i>
-                    <a href="#post-comment">
+                    <a href="/<%= page.path %>#post-comment">
                         <span id="twikoo-count"><i class="scoicon sco-loading-line"></i></span>
                     </a>
                 </span>
diff --git a/layout/tag.ejs b/layout/tag.ejs
index 40f75b56..80695e77 100755
--- a/layout/tag.ejs
+++ b/layout/tag.ejs
@@ -2,7 +2,7 @@
     <div id="tag">
         <div id="tag-page-tags">
             <% site.tags.each(function (tag) { %>
-                <a href="<%= url_for(tag.path) %>" class="<%= tag.name === page.tag ? 'select' : '' %>">
+                <a href="<%= url_for(tag.path) %>" id="<%= tag.name %>" class="<%= tag.name === page.tag ? 'select' : '' %>">
                     <span class="tags-punctuation"></span>
                     <%= tag.name %>
                     <span class="tagsPageCount"><%= tag.length %></span>
diff --git a/source/css/_comment/twikoo.styl b/source/css/_comment/twikoo.styl
index 52db6b56..7af9b08d 100644
--- a/source/css/_comment/twikoo.styl
+++ b/source/css/_comment/twikoo.styl
@@ -304,6 +304,11 @@ img.tk-avatar-img
   .el-input__inner
     padding 8px
 
+.el-input.el-input--small.el-input-group.el-input-group--prepend
+  border-radius 12px
+  background var(--sco-secondbg)
+  border var(--style-border-always)
+
 .el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before
   content '输入QQ号会自动获取昵称和头像'
 
@@ -374,7 +379,6 @@ img.tk-avatar-img
 
 @media screen and (max-width: 768px)
   .el-textarea__inner
-    border-radius 4px !important
     background var(--sco-card-bg) !important
 
 #page
@@ -483,4 +487,8 @@ button.el-button.tk-cancel.el-button--default.el-button--small
 
 .el-input-group--prepend
   .el-input__inner, .el-input-group__append
-    border-left-width 0 !important
\ No newline at end of file
+    border-left-width 0 !important
+
+.el-textarea .el-input__count
+  color var(--sco-secondtext) !important
+  -webkit-user-select none
\ No newline at end of file
diff --git a/source/css/_layout/articleSort.styl b/source/css/_layout/articleSort.styl
index 005e928f..a08875ca 100644
--- a/source/css/_layout/articleSort.styl
+++ b/source/css/_layout/articleSort.styl
@@ -40,16 +40,6 @@
 .article-sort-item:before
   display none
 
-.article-sort
-  border none
-  margin-left 0
-  padding-left 0
-
-.article-sort-item
-  margin 0 0 1rem 0
-  overflow hidden
-  border-radius 12px
-
 @media screen and (max-width: 768px)
   .article-sort-item-info a
     white-space inherit !important
@@ -66,6 +56,8 @@
   padding 0 .8rem
   display flex
   flex-direction column
+  -webkit-box-flex 1
+  flex 1 1 0
 
 .article-sort-item-time
   order 1
@@ -77,10 +69,6 @@
   order 0
   font-weight 700
 
-.article-sort-item-title:hover
-  transform translateX(0)
-  color var(--sco-hovertext)
-
 .article-sort-item-info a
   margin-right auto
   overflow hidden
@@ -110,4 +98,101 @@
 
 .article-sort-item-tags a .tags-punctuation
   font-size 12px
-  margin-right 1px
\ No newline at end of file
+  margin-right 1px
+
+.article-sort
+  margin-left 0
+  padding-left 0
+
+.article-sort-title::before
+  position absolute
+  top calc((100% - 1.8rem) / 2)
+  left -.45rem
+  z-index 1
+  width .5rem
+  height .5rem
+  border .25rem solid #307af6
+  border-radius .5rem
+  background var(--sco-card-bg)
+  content ""
+  line-height .5rem
+  transition all .2s ease-in-out 0s
+
+.article-sort-title::after
+  position absolute
+  bottom 0
+  left 0
+  z-index 0
+  width .1rem
+  height 1.5em
+  background #92b9fa
+  content ""
+
+.article-sort-item
+  position relative
+  display flex
+  -webkit-box-align center
+  align-items center
+  margin 0 0 1rem .5rem
+  transition all .2s ease-in-out 0s
+  overflow hidden
+  border-radius 12px
+
+
+.article-sort-item:hover::before
+  border-color #ff7242
+
+.article-sort-item::before
+  position absolute
+  left calc(-1rem - 17px)
+  width .3rem
+  height .3rem
+  border .15rem solid #307af6
+  border-radius .3rem
+  background var(--sco-card-bg)
+  content ""
+  transition all .2s ease-in-out 0s
+
+.article-sort-item.no-article-cover
+  height 80px
+
+.article-sort-item.no-article-cover .article-sort-item-info
+  padding 0
+
+.article-sort-item.year:hover::before
+  border-color #307af6
+
+.article-sort-item.year::before
+  border-color #ff7242
+
+.article-sort-item-time
+  color #858585
+  font-size 95%
+
+.article-sort-item-time time
+  padding-left .3rem
+  cursor default
+
+.article-sort-item-title
+  color var(--sco-fontcolor)
+  font-size 1.1em
+  transition all .3s ease 0s
+  -webkit-line-clamp 2
+
+.article-sort-item-title:hover
+  color var(sco-main)
+  transform all .3s
+
+.article-sort-item-img
+  overflow hidden
+  width 80px
+  height 80px
+
+.article-sort-item-img img
+  width 100%
+  height 100%
+  transition all .6s ease 0s
+  object-fit cover
+
+.article-sort-item-img img:hover
+  transform scale(1.1)
\ No newline at end of file
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 2fe50231..5b0518ef 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -1122,9 +1122,9 @@ div#author-info__sayhi:hover {
 }
 
 #aside-content .card-info .card-info-social-icons i:hover {
-  background: var(--sco-white-op);
+  background: var(--sco-white);
   transform: scale(1.1);
-  color: var(--sco-white);
+  color: var(--sco-main);
   box-shadow: none
 }
 
diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl
index c8c1796a..b7e3b588 100644
--- a/source/css/_layout/footer.styl
+++ b/source/css/_layout/footer.styl
@@ -1,463 +1,364 @@
-#footer {
-  position: relative;
+#footer
+  position: relative
   background: center bottom / cover local #307af6
-}
 
-#footer-wrap {
-  position: relative;
-  padding: 2rem 1rem;
-  color: var(--light-grey);
+  &:before
+    position: absolute !important
+    width: 100% !important
+    height: 100% !important
+    content: '' !important
+    z-index: -1
+
+  background: linear-gradient(180deg, var(--sco-card-bg-none) 0, var(--sco-card-bg) 25%)
+  margin-top: .5rem
+  display: flex
+  flex-direction: column
+
+#footer-wrap
+  position: relative
+  padding: 2rem 1rem
+  color: var(--light-grey)
   text-align: center
-}
-
-#footer-wrap a {
-  color: var(--light-grey);
-  padding: 4px 12px;
-  border-radius: 5px
-}
-
-#footer-wrap a:hover {
-  background-color: #fff;
-  color: #3b82ff;
-  cursor: pointer;
-  border-radius: 5px
-}
-
-#footer-wrap .footer-separator {
-  margin: 0 .2rem
-}
-
-#footer-wrap .icp-icon {
-  padding: 0 4px;
-  vertical-align: text-bottom;
-  max-height: 1.4em;
-  width: auto
-}
-
-#footer-wrap {
   color: var(--sco-fontcolor)
-}
-
-#footer-wrap a {
-  color: var(--sco-fontcolor);
-  height: 44px;
-  line-height: 36px
-}
-
-#footer-wrap a:hover {
-  color: var(--sco-hovertext);
-  background-color: var(--sco-none)
-}
-
-div#footer_deal {
-  justify-content: center;
-  display: flex;
-  padding-top: 2rem;
-  align-items: center
-}
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-around
+  padding: 20px 50px 0 50px
+  text-align: left !important
+  max-width: 1200px
+  margin: 0 auto
+  margin-top: 1rem !important
+
+  a
+    color: var(--light-grey)
+    padding: 4px 12px
+    border-radius: 5px
+    color: var(--sco-fontcolor)
+    height: 44px
+    line-height: 36px
+
+    &:hover
+      background-color: #fff
+      color: #3b82ff
+      cursor: pointer
+      border-radius: 5px
+      color: var(--sco-hovertext)
+      background-color: var(--sco-none)
+
+  .footer-separator
+    margin: 0 .2rem
+
+  .icp-icon
+    padding: 0 4px
+    vertical-align: text-bottom
+    max-height: 1.4em
+    width: auto
+
+  h1
+    font-size: 1.5rem
+    margin: 0
+
+  h3
+    padding: 0 12px
+
+  p
+    margin: 0 0 0 .2rem
+    font-size: .8rem
+    opacity: .8
+
+  i
+    margin-right: .5rem
+    width: 22px
+    font-size: 18px
+    display: inline-block
+
+  #letlogo
+    display: flex
+    flex-direction: column
+    align-self: center
+    margin: auto 0
+    max-width: 200px
+
+  #letlink
+    display: flex
+    flex-direction: row
+    justify-content: space-around
+    margin: 0 0 1rem 0
+
+    .link_group
+      display: flex
+      flex-direction: column
+      margin-right: 20px
+      min-width: 180px
+
+#weblogo i
+  font-size: 2rem
+  line-height: 2rem
+  letter-spacing: -10px
 
-@media screen and (max-width: 768px) {
-  img.footer_mini_logo {
-    display: none
-  }
+div#footer_deal
+  justify-content: center
+  display: flex
+  padding-top: 2rem
+  align-items: center
 
-  div#footer_deal {
-    flex-wrap: wrap;
-    flex-direction: row
-  }
-}
+div#sco-footer-bar
+  display: none
 
-#footer {
-  background: linear-gradient(180deg, var(--sco-card-bg-none) 0, var(--sco-card-bg) 25%);
-  margin-top: .5rem;
-  display: flex;
+  a.footer-bar-link
+    padding: 4px 16px
+    background: var(--sco-secondbg)
+    border-radius: 20px
+    margin-top: 8px
+    font-size: 14px
+    cursor: pointer
+    border: var(--style-border-always)
+
+    &:hover
+      background: var(--sco-main)
+      color: var(--sco-white)
+      transform: scale(1.1)
+      border-color: var(--sco-main)
+
+  .footer-logo
+    font-size: 24px
+
+  .footer-bar-description
+    color: var(--sco-secondtext)
+    font-weight: 700
+
+.post div#sco-footer-bar
+  display: flex
   flex-direction: column
-}
+  align-items: center
+  margin-top: 16px
 
-@media screen and (max-width: 768px) {
-  #footer {
-    background: linear-gradient(180deg, var(--sco-background) 0, var(--sco-card-bg) 25%);
-    margin-top: 0;
-    z-index: 999
-  }
-}
+#sco-footer
+  display: flex
+  flex-direction: row
+  width: 100%
+  max-width: 1200px
+  justify-content: space-between
+  flex-wrap: wrap
+  margin: 1rem auto 3rem
+  padding: 0 1rem
 
-@media screen and (max-width: 768px) {
-  #letlink {
-    flex-direction: column !important;
-    text-align: center !important
-  }
+  .footer-links
+    display: flex
+    flex-direction: column
+
+  .footer-item
+    font-size: .8rem
+    line-height: .8rem
+    color: var(--sco-fontcolor)
+    margin-right: auto
+    overflow: hidden
+    white-space: nowrap
+    text-overflow: ellipsis
+    max-width: 120px
+    cursor: pointer
+    padding: 8px
+    border-radius: 12px
+
+    &:hover
+      color: var(--sco-theme)
+      background: var(--sco-main-op-light)
+
+  .footer-group
+    min-width: 120px
+
+  .footer-title-group
+    display: flex
+    align-items: center
+    margin: 1rem 0 .7rem 0
+
+    a
+      margin-left: 8px
+
+      &:hover i
+        color: var(--sco-main)
+        opacity: 1
+
+    i
+      line-height: 1
+      color: var(--sco-secondtext)
+      transition: .3s
+      font-size: 16px
+      opacity: .6
+
+  .footer-title
+    color: var(--sco-secondtext)
+    font-size: .8rem
+    margin-left: 8px !important
+
+  .random-friends-btn
+    display: flex
+
+#footer-bar
+  padding: 1rem
+  color: var(--sco-fontcolor)
+  margin-top: 1rem
+  background: var(--sco-secondbg)
+  display: flex
+  overflow: hidden
+  z-index: 1002
+  transition: .3s
+  border-top: var(--style-border-always)
 
-  #letlogo {
-    display: none !important
-  }
+  .footer-bar-links
+    display: flex
+    justify-content: space-between
+    max-width: 1400px
+    width: 100%
+    margin: 0 auto
+    flex-wrap: wrap
+    align-items: center
+    line-height: 1
+
+  .footer-bar-left
+    display: flex
+    flex-wrap: wrap
+    min-height: 32px
+    align-items: center
+
+  .footer-bar-link
+    margin-top: 8px
+    margin-bottom: 8px
+    margin-right: 1rem
+    color: var(--sco-fontcolor)
+    font-size: .8rem
+    font-weight: 700
+    white-space: nowrap
+
+    &:hover
+      color: var(--sco-theme)
+
+  .footer-bar-right
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    align-items: center
 
-  #footer-wrap {
-    margin-top: 1rem !important
-  }
-}
+  > div > div.footer-bar-left > span
+    margin-right: 1rem
 
-.footer-bar-right {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center
-}
-
-#footer-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  padding: 20px 50px 0 50px;
-  text-align: left !important;
-  max-width: 1200px;
-  margin: 0 auto
-}
-
-#footer-wrap h1 {
-  font-size: 1.5rem;
-  margin: 0
-}
-
-#footer-wrap h3 {
-  padding: 0 12px
-}
-
-#footer-wrap p {
-  margin: 0 0 0 .2rem;
-  font-size: .8rem;
-  opacity: .8
-}
-
-#footer-wrap i {
-  margin-right: .5rem;
-  width: 22px;
-  font-size: 18px;
-  display: inline-block
-}
-
-#footer-wrap #letlogo {
-  display: flex;
-  flex-direction: column;
-  align-self: center;
-  margin: auto 0;
-  max-width: 200px
-}
-
-#footer-wrap #letlink .link_group {
-  display: flex;
-  flex-direction: column;
-  margin-right: 20px;
-  min-width: 180px
-}
-
-#footer-wrap #letlink {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  margin: 0 0 1rem 0
-}
-
-#weblogo i {
-  font-size: 2rem;
-  line-height: 2rem;
-  letter-spacing: -10px
-}
+#cookies-window
+  min-width: 300px
+  background: var(--sco-maskbgdeep)
+  color: var(--sco-fontcolor)
+  padding: 8px 16px
+  display: flex
+  flex-direction: column
+  bottom: 20px
+  right: 20px
+  position: fixed
+  border-radius: 12px
+  transition: .3s
+  z-index: 1002
+  user-select: none
+  backdrop-filter: saturate(180%) blur(20px)
+  -webkit-backdrop-filter: saturate(180%) blur(20px)
+  transform: translateZ(0)
+  border: var(--style-border)
+  animation: barrageIn .6s cubic-bezier(.42, 0, .3, 1.11)
 
-#footer:before {
-  position: absolute !important;
-  width: 100% !important;
-  height: 100% !important;
-  content: '' !important;
-  z-index: -1
-}
+  &.cw-hide
+    opacity: 0
+    animation: barrageOut .6s cubic-bezier(.42, 0, .3, 1.11)
+    z-index: -1
+
+  .cookies-window-title
+    padding-bottom: 4px
+    border-bottom: var(--style-border)
+    font-size: 12px
+    font-weight: 700
+
+  .cookies-window-content
+    font-size: 14px
+    display: flex
+    justify-content: space-around
+    align-items: center
+
+.cookie-to
+  margin-right: 4px
+  font-weight: 700
 
-div#sco-footer-bar {
-  display: none
-}
+.cookies-link
+  margin-left: auto
+  font-size: 16px
 
-.post div#sco-footer-bar {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 16px
-}
-
-div#sco-footer-bar a.footer-bar-link {
-  padding: 4px 16px;
-  background: var(--sco-secondbg);
-  border-radius: 20px;
-  margin-top: 8px;
-  font-size: 14px;
-  cursor: pointer;
-  border: var(--style-border-always);
-}
-
-div#sco-footer-bar a.footer-bar-link:hover {
-  background: var(--sco-main);
-  color: var(--sco-white);
-  transform: scale(1.1);
-  border-color: var(--sco-main);
-}
-
-div#sco-footer-bar .footer-logo {
-  font-size: 24px
-}
-
-div#sco-footer-bar .footer-bar-description {
-  color: var(--sco-secondtext);
-  font-weight: 700
-}
+.cookies-link i.scoicon
+  font-size: 16px
 
-#sco-footer .footer-links {
-  display: flex;
-  flex-direction: column
-}
-
-#sco-footer {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  max-width: 1200px;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin: 1rem auto 3rem;
-  padding: 0 1rem
-}
-
-#sco-footer .footer-item {
-  font-size: .8rem;
-  line-height: .8rem;
-  color: var(--sco-fontcolor);
-  margin-right: auto;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 120px;
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 12px
-}
-
-#sco-footer .footer-item:hover {
-  color: var(--sco-theme);
-  background: var(--sco-main-op-light)
-}
-
-[data-theme=dark] #sco-footer .footer-item:hover {
-  background: var(--sco-theme-op)
-}
-
-
-#sco-footer .footer-group {
-  min-width: 120px
-}
-
-#sco-footer .footer-title-group {
-  display: flex;
-  align-items: center;
-  margin: 1rem 0 .7rem 0
-}
-
-#sco-footer .footer-title-group a {
-  margin-left: 8px
-}
-
-#sco-footer .footer-title-group i {
-  line-height: 1;
-  color: var(--sco-secondtext);
-  transition: .3s;
-  font-size: 16px;
-  opacity: .6
-}
-
-#sco-footer .footer-title-group a:hover i {
-  color: var(--sco-main);
-  opacity: 1
-}
-
-#sco-footer .footer-title-group .footer-title {
-  margin: 0
-}
-
-#sco-footer .random-friends-btn {
+a.deal_link
   display: flex
-}
-
-#sco-footer .footer-title {
-  color: var(--sco-secondtext);
-  font-size: .8rem;
-  margin-left: 8px !important;
-}
-
-#footer-bar {
-  padding: 1rem;
-  color: var(--sco-fontcolor);
-  margin-top: 1rem;
-  background: var(--sco-secondbg);
-  display: flex;
-  overflow: hidden;
-  z-index: 1002;
-  transition: .3s;
-  border-top: var(--style-border-always)
-}
-
-#footer-bar .footer-bar-links {
-  display: flex;
-  justify-content: space-between;
-  max-width: 1400px;
-  width: 100%;
-  margin: 0 auto;
-  flex-wrap: wrap;
-  align-items: center;
-  line-height: 1
-}
-
-#footer-bar .footer-bar-left {
-  display: flex;
-  flex-wrap: wrap;
-  min-height: 32px;
+  margin: 1rem 27px
+  color: var(--sco-card-bg)
+  border-radius: 3rem
+  width: 32px
+  height: 32px
+  background: var(--sco-fontcolor)
+  justify-content: center
   align-items: center
-}
-
-#footer-bar .footer-bar-link {
-  margin-top: 8px;
-  margin-bottom: 8px;
-  margin-right: 1rem;
-  color: var(--sco-fontcolor);
-  font-size: .8rem;
-  font-weight: 700;
-  white-space: nowrap
-}
-
-#footer-bar .footer-bar-link.cc {
-  margin-right: 0
-}
-
-#footer-bar .footer-bar-link.cc i {
-  margin-right: .5rem;
-  font-size: 18px
-}
-
-#footer-bar .footer-bar-link:hover {
-  color: var(--sco-theme)
-}
-
-#footer-bar > div > div.footer-bar-left > span {
-  margin-right: 1rem
-}
-
-#footer-bar .footer-bar-right a:hover {
-  color: var(--sco-lighttext)
-}
-
-#footer_deal i {
-  font-size: .9rem;
-  line-height: .9rem;
-  height: .9rem
-}
+  transition: .3s
+
+  &:hover
+    color: var(--sco-white)
+    background: var(--sco-main)
+    transform: scale(1.1)
 
-blockquote footer {
+blockquote footer
   padding: 0 0 .5rem
-}
 
-blockquote footer cite::before {
-  padding: 0 .3em;
+blockquote footer cite::before
+  padding: 0 .3em
   content: "—"
-}
-
-img.footer_mini_logo {
-  width: 50px;
-  height: 50px;
-  margin: 0 1rem;
-  cursor: pointer;
-  transition: cubic-bezier(0, 0, 0, 1.29) .5s;
-  -webkit-user-select: none;
+
+img.footer_mini_logo
+  width: 50px
+  height: 50px
+  margin: 0 1rem
+  cursor: pointer
+  transition: cubic-bezier(0, 0, 0, 1.29) .5s
+  -webkit-user-select: none
   border-radius: 50px
-}
-
-img.footer_mini_logo:hover {
-  -webkit-backface-visibility: hidden;
-  -webkit-transform-style: preserve-3d;
-  transform: scale(1.2)
-}
-
-#cookies-window {
-  min-width: 300px;
-  background: var(--sco-maskbgdeep);
-  color: var(--sco-fontcolor);
-  padding: 8px 16px;
-  display: flex;
-  flex-direction: column;
-  bottom: 20px;
-  right: 20px;
-  position: fixed;
-  border-radius: 12px;
-  transition: .3s;
-  z-index: 1002;
-  user-select: none;
-  backdrop-filter: saturate(180%) blur(20px);
-  -webkit-backdrop-filter: saturate(180%) blur(20px);
-  transform: translateZ(0);
-  border: var(--style-border);
-  animation: barrageIn .6s cubic-bezier(.42, 0, .3, 1.11)
-}
-
-#cookies-window.cw-hide {
-  opacity: 0;
-  animation: barrageOut .6s cubic-bezier(.42, 0, .3, 1.11);
-  z-index: -1
-}
-
-#cookies-window .cookies-window-title {
-  padding-bottom: 4px;
-  border-bottom: var(--style-border);
-  font-size: 12px;
-  font-weight: 700
-}
 
-#cookies-window .cookies-window-content {
-  font-size: 14px;
-  display: flex;
-  justify-content: space-around;
-  align-items: center
-}
+  &:hover
+    -webkit-backface-visibility: hidden
+    -webkit-transform-style: preserve-3d
+    transform: scale(1.2)
 
-.cookie-to {
-  margin-right: 4px;
-  font-weight: 700
-}
+#footer_deal i
+  font-size: .9rem
+  line-height: .9rem
+  height: .9rem
 
-.cookies-link {
-  margin-left: auto;
-  font-size: 16px
-}
+@media screen and (max-width: 768px)
+  img.footer_mini_logo
+    display: none
 
-.cookies-link i.scoicon {
-  font-size: 16px
-}
+  div#footer_deal
+    flex-wrap: wrap
+    flex-direction: row
 
-@media screen and (max-width: 1300px) {
-  #cookies-window {
+  #footer
+    background: linear-gradient(180deg, var(--sco-background) 0, var(--sco-card-bg) 25%)
+    margin-top: 0
+    z-index: 999
+
+  #letlink
+    flex-direction: column !important
+    text-align: center !important
+
+  #letlogo
+    display: none !important
+
+  #footer-wrap
+    margin-top: 1rem !important
+
+@media screen and (max-width: 1300px)
+  #cookies-window
     display: none
-  }
-}
-
-a.deal_link {
-  display: flex;
-  margin: 1rem 27px;
-  color: var(--sco-card-bg);
-  border-radius: 3rem;
-  width: 32px;
-  height: 32px;
-  background: var(--sco-fontcolor);
-  justify-content: center;
-  align-items: center;
-  transition: .3s
-}
 
-a.deal_link:hover {
-  color: var(--sco-white);
-  background: var(--sco-main);
-  transform: scale(1.1);
-}
\ No newline at end of file
+[data-theme=dark] #sco-footer .footer-item:hover
+  background: var(--sco-theme-op)
\ No newline at end of file
diff --git a/source/css/_layout/header.styl b/source/css/_layout/header.styl
index 4dbd4ed3..1910640b 100644
--- a/source/css/_layout/header.styl
+++ b/source/css/_layout/header.styl
@@ -96,7 +96,7 @@
       height: 25rem
 
     +maxWidth768()
-      height 18rem
+      height 30rem
       background-color var(--sco-main) !important
       transition 0s
       margin-bottom -12px
@@ -124,12 +124,10 @@
 
   #post-info
     position absolute
-    padding 0 8%
+    padding 0 3rem
     width 100%
     text-align center
     top 0
-    position absolute
-    padding 0 3rem
     margin 0 auto
     z-index 10
     color var(--sco-white)
@@ -152,13 +150,11 @@
       text-align left
 
     +maxWidth768()
-      bottom 1.1rem
-      padding 0 1.1rem
+      padding 0 6%
       justify-content normal
-      padding 18rem 6% 0
+      padding-top 18rem
 
   &.not-top-img
-    margin-bottom .5rem
     height 60px
     background 0 center
     margin-bottom 0
@@ -1420,19 +1416,6 @@ i
         transition .3s;
         box-shadow var(--sco-shadow-main)
 
-.post-bg
-  #post-cover
-    +minWidth768()
-      min-height 15rem !important
-      height 70% !important
-      opacity 1 !important
-
-#post-info
-  .post-title
-    +minWidth1300()
-      width 1100px
-      font-size 2.6rem !important
-
 a.console_switchbutton
   padding 4px 8px !important
   cursor pointer
diff --git a/source/css/_layout/index.styl b/source/css/_layout/index.styl
index 71cb1263..ce1984d0 100644
--- a/source/css/_layout/index.styl
+++ b/source/css/_layout/index.styl
@@ -130,148 +130,60 @@
       min-height 100%
       min-width 100%
 
-@media screen and (max-width: 768px) {
-  #recent-posts > .recent-post-item {
-    border-radius: 12px 12px 8px 8px
-  }
-}
-
-#post > #post-info {
-  margin-bottom: 1.5rem
-}
-
-#post > #post-info .post-title {
-  padding-bottom: .2rem;
-  border-bottom: 1px solid var(--light-grey);
-  color: var(--text-highlight-color)
-}
-
-#post > #post-info .post-title .post-edit-link {
-  float: right
-}
-
-#post > #post-info #post-meta, #post > #post-info #post-meta a {
-  color: #78818a
-}
-
-#post-info .post-title {
-  margin-bottom: .4rem;
-  color: var(--sco-white);
-  font-weight: 400;
-  font-size: 2.5em;
-  line-height: 1.5;
-  -webkit-line-clamp: 3
-}
-
-@media screen and (max-width: 768px) {
-  #post-info .post-title {
-    font-size: 1.72em
-  }
-}
-
-#post-info .post-title .post-edit-link {
-  padding-left: .5rem
-}
-
-#post-info #post-meta {
-  color: var(--light-grey);
-  font-size: 95%
-}
-
-@media screen and (min-width: 768px) {
-  #post-info #post-meta > .meta-secondline > span:first-child {
-    display: none
-  }
-}
-
-@media screen and (max-width: 768px) {
-  #post-info #post-meta {
-    font-size: 90%
-  }
-}
-
-#post-info #post-meta .post-meta-separator {
-  margin: 0 .25rem
-}
-
-#post-info #post-meta .post-meta-icon {
-  margin-right: .2rem
-}
-
-#post-info #post-meta .post-meta-label {
-  margin-right: .2rem
-}
-
-#post-info #post-meta a {
-  color: var(--light-grey);
-  transition: all .3s ease-out 0s
-}
-
-#post-info #post-meta a:hover {
-  color: #307af6;
-  text-decoration: underline
-}
++maxWidth768()
+  #recent-posts > .recent-post-item
+    border-radius 12px 12px 8px 8px
 
 // 分页按钮
-.toPageGroup {
-  display: flex;
-  position: relative;
-  margin: 0 .3rem
-}
-
-a#toPageButton {
-  display: flex;
-  position: absolute;
-  width: 40px;
-  height: 40px;
-  right: 0;
-  top: 0;
-  border-radius: 8px;
-  justify-content: center;
-  align-items: center;
-  transition: .3s;
-  background: var(--sco-card-bg);
-  border: var(--style-border-always);
-  cursor: text;
-  pointer-events: none
-}
+.toPageGroup
+  display flex
+  position relative
+  margin 0 .3rem
 
-.toPageGroup:focus-within a#toPageButton, .toPageGroup:hover a#toPageButton {
-  width: 30px;
-  height: 30px;
-  right: 4px;
-  top: 5px;
-  background: var(--sco-card-bg);
-  border: 1px solid var(--sco-none);
-  border-radius: 4px;
-  opacity: .2
-}
+  a#toPageButton
+    display flex
+    position absolute
+    width 40px
+    height 40px
+    right 0
+    top 0
+    border-radius 8px
+    justify-content center
+    align-items center
+    transition .3s
+    background var(--sco-card-bg)
+    border var(--style-border-always)
+    cursor text
+    pointer-events none
+
+  &:focus-within a#toPageButton, &:hover a#toPageButton
+    width 30px
+    height 30px
+    right 4px
+    top 5px
+    background var(--sco-card-bg)
+    border 1px solid var(--sco-none)
+    border-radius 4px
+    opacity .2
 
-.toPageGroup:focus-within a#toPageButton.haveValue {
-  opacity: 1;
-  cursor: pointer
-}
+  &:focus-within a#toPageButton.haveValue, &:hover a#toPageButton.haveValue
+    opacity 1
+    cursor pointer
 
-a#toPageButton.haveValue {
-  opacity: 1 !important;
-  cursor: pointer !important;
-  pointer-events: all
-}
+  a#toPageButton.haveValue
+    opacity 1 !important
+    cursor pointer !important
+    pointer-events all
 
-a#toPageButton.haveValue:hover {
-  background: var(--sco-theme);
-  color: var(--sco-white)
-}
+  a#toPageButton.haveValue:hover
+    background var(--sco-theme)
+    color var(--sco-white)
 
-@media screen and (max-width: 768px) {
-  .toPageGroup {
-    display: none
-  }
-}
++maxWidth768()
+  .toPageGroup
+    display none
 
-@media screen and (min-width: 768px) {
-  .needEndHide.hide {
-    bottom: -200px !important;
-    opacity: 0
-  }
-}
\ No newline at end of file
++minWidth768()
+  .needEndHide.hide
+    bottom: -200px !important
+    opacity: 0
\ No newline at end of file
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
index 5d1a9af7..6c58032d 100644
--- a/source/css/_layout/layout.styl
+++ b/source/css/_layout/layout.styl
@@ -25,7 +25,7 @@
   > div:first-child
     width calc(100% - 300px)
 
-  > div:first-child:not(.recent-posts)
+  > #post,#category,#tag
     box-shadow var(--sco-shadow-border)
     padding 1rem 2rem
     border-radius 12px
@@ -39,6 +39,13 @@
 
     &:hover
       box-shadow var(--sco-shadow-border-hover)
+  > #page
+    padding: 1rem 2rem;
+    width: calc(100% - 300px);
+    align-self: flex-start;
+    animation: slide-in 0.6s 0.1s backwards;
+    position: relative;
+    overflow: hidden;
 
   +maxWidth768()
     padding: 0
@@ -69,7 +76,7 @@
 +maxWidth768()
   .post
     .layout
-      > div:first-child:not(.recent-posts)
+      > #post,#page
         border-radius 12px 12px 0 0
 
       &#content-inner
@@ -77,7 +84,7 @@
 
   .page
     .layout
-      > div:first-child:not(.recent-posts)
+      > #post,#page
         border-radius: 12px 12px 0 0
 
       &#content-inner
@@ -92,5 +99,4 @@
     display: none
 
   html.hide-aside .layout > div:first-child
-    width: 100%
-
+    width: 100%
\ No newline at end of file
diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl
index b9ff06dd..4c40741b 100644
--- a/source/css/_layout/sidebar.styl
+++ b/source/css/_layout/sidebar.styl
@@ -1,282 +1,226 @@
-#sidebar #menu-mask {
-  position: fixed;
-  z-index: 1001;
-  display: none;
-  width: 100%;
-  height: 100%;
-  background: var(--sco-maskbg);
-  backdrop-filter: saturate(180%) blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  transform: translateZ(0);
-  animation: .6s ease 0s 1 normal none running to_show
-}
-
-#sidebar #sidebar-menus {
-  position: fixed;
-  top: 0;
-  right: -300px;
-  overflow: hidden auto;
-  width: 300px;
-  height: 100%;
-  background: var(--sco-background);
-  transition: all .5s ease 0s;
-  padding-top: 30px;
-  z-index: 1001;
-  border-left: var(--style-border-always)
-}
-
-#sidebar #sidebar-menus.open {
-  transform: translate3d(-100%, 0, 0)
-}
-
-@media screen and (min-width: 768px) {
-  #sidebar #sidebar-menus {
-    display: none
-  }
-}
-
-#sidebar #sidebar-menus .back-menu-list-groups {
-  padding: 0 16px
-}
-
-#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list-title {
-  font-size: 12px;
-  color: var(--sco-secondtext)
-}
-
-#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list {
-  width: calc(100% + 16px);
-  justify-content: flex-start;
-  margin: 0 -8px
-}
-
-#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list .back-menu-item {
-  background: var(--sco-card-bg);
-  border: var(--style-border-always);
-  border-radius: 8px
-}
-
-@media screen and (max-width: 768px) {
-  #sidebar #sidebar-menus .back-menu-list-groups .back-menu-list .back-menu-item {
-    width: calc(50% - 16px)
-  }
-}
-
-#sidebar #sidebar-menus .back-home-button {
-  display: none
-}
-
-#sidebar #sidebar-menus > .author-avatar {
-  padding: 1.3rem 1.5rem 0;
-  text-align: center
-}
-
-#sidebar #sidebar-menus > .author-avatar img {
-  width: 110px;
-  height: 110px;
-  border-radius: 70px;
-  transition: all .5s ease 0s
-}
-
-#sidebar #sidebar-menus > .author-avatar img:hover {
-  transform: rotate(360deg)
-}
-
-#sidebar #sidebar-menus .site-data {
-  display: table;
-  padding: .6rem .5rem 0;
-  width: 100%;
-  table-layout: fixed
-}
-
-#sidebar #sidebar-menus .site-data .data-item {
-  display: table-cell
-}
-
-#sidebar #sidebar-menus .site-data .data-item .data-item-link .length-num {
-  color: var(--text-highlight-color);
-  font-size: 1.28em
-}
-
-#sidebar #sidebar-menus .site-data .data-item .data-item-link .headline {
-  color: var(--sco-fontcolor)
-}
-
-#sidebar #sidebar-menus hr {
-  margin: 1rem auto
-}
-
-#sidebar #sidebar-menus .menus_items {
-  padding: 0 16px
-}
-
-#sidebar #sidebar-menus .menus_items .site-page {
-  position: relative;
-  display: block;
-  padding: 0;
-  color: var(--sco-fontcolor);
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 700
-}
-
-@media screen and (max-width: 768px) {
-  #sidebar #sidebar-menus .menus_items .site-page {
-    font-weight: 400
-  }
-}
-
-#sidebar #sidebar-menus .menus_items .site-page span:hover {
-  color: #307af6
-}
-
-#sidebar #sidebar-menus .menus_item > .site-page {
-  display: flex;
-  font-size: 12px;
-  color: var(--sco-secondtext)
-}
-
-#sidebar #sidebar-menus .menus_items .expand {
-  position: absolute;
-  top: .78em;
-  right: .4rem;
-  transition: transform .3s ease 0s
-}
-
-#sidebar #sidebar-menus .menus_items .expand.hide {
-  transform: rotate(90deg) !important
-}
-
-#sidebar #sidebar-menus .menus_items .menus_item_child {
-  margin: 0 -4px;
-  list-style: none;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap
-}
-
-#sidebar #sidebar-menus .menus_item_child .site-page.child {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 8px;
-  border-radius: 8px;
-  border: var(--style-border-always);
-  background: var(--sco-card-bg)
-}
-
-#sidebar #sidebar-menus .menus_item_child li {
-  width: calc(50% - 8px);
-  margin: 4px
-}
-
-#sidebar #sidebar-menus .menus_item_child .site-page.child span {
-  line-height: 1;
-  margin-top: 8px;
-  font-size: 14px
-}
-
-#sidebar #sidebar-menus .card-tag-cloud {
-  padding: 0 16px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-bottom: 60px
-}
-
-#sidebar #sidebar-menus .card-tag-cloud a {
-  color: var(--sco-fontcolor) !important;
-  padding: 2px 8px 2px 12px;
-  margin: 4px;
-  border-radius: 8px;
-  border: var(--style-border-always);
-  background: var(--sco-card-bg);
-  font-size: 14px !important
-}
-
-#sidebar #sidebar-menus .card-tag-cloud a sup {
-  opacity: .6;
-  margin-left: 4px
-}
-
-#sidebar #sidebar-menus span.sidebar-menu-item-title {
-  font-size: 12px;
-  color: var(--sco-secondtext);
-  margin-left: 16px
-}
-
-#sidebar #sidebar-menus .sidebar-menu-item {
-  display: flex;
-  flex-direction: column;
-  padding: 0 16px;
-  margin-bottom: 6px
-}
-
-#sidebar #sidebar-menus .sidebar-menu-item a.menu-child {
-  width: 100%;
-  background: var(--sco-card-bg);
-  border-radius: 8px;
-  border: var(--style-border-always);
-  display: flex;
-  align-items: center;
-  font-size: 14px
-}
-
-#sidebar #sidebar-menus .sidebar-menu-item a.menu-child i {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center
-}
-
-#sidebar #sidebar-menus .sidebar-menu-item a.menu-child span {
-  margin-left: 10px
-}
-
-#sidebar #sidebar-menus .webinfo {
-  padding: 0 16px;
-  display: flex;
-  white-space: nowrap;
-  flex-direction: column
-}
-
-#sidebar #sidebar-menus .webinfo .webinfo-item {
-  justify-content: space-between
-}
-
-#sidebar #sidebar-menus .menus_items .site-page span:hover {
-  color: var(--sco-fontcolor)
-}
-
-#mobile-sidebar #mobile-sidebar-menus.open {
+#sidebar
   background: var(--sco-maskbg)
-}
 
-#sidebar #sidebar-menus .site-data {
-  margin: 1rem 0;
-  padding: .6rem .5rem
-}
+  #menu-mask
+    position: fixed
+    z-index: 1001
+    display: none
+    width: 100%
+    height: 100%
+    background: var(--sco-maskbg)
+    backdrop-filter: saturate(180%) blur(20px)
+    -webkit-backdrop-filter: blur(20px)
+    transform: translateZ(0)
+    animation: .6s ease 0s 1 normal none running to_show
+
+  #sidebar-menus
+    position: fixed
+    top: 0
+    right: -300px
+    overflow: hidden auto
+    width: 300px
+    height: 100%
+    background: var(--sco-background)
+    transition: all .5s ease 0s
+    padding-top: 30px
+    z-index: 1001
+    border-left: var(--style-border-always)
+
+    &.open
+      transform: translate3d(-100%, 0, 0)
+
+    .back-menu-list-groups
+      padding: 0 16px
+
+      .back-menu-list-title
+        font-size: 12px
+        color: var(--sco-secondtext)
+
+      .back-menu-list
+        width: calc(100% + 16px)
+        justify-content: flex-start
+        margin: 0 -8px
+
+        .back-menu-item
+          background: var(--sco-card-bg)
+          border: var(--style-border-always)
+          border-radius: 8px
+
+    .back-home-button
+      display: none
+
+    > .author-avatar
+      padding: 1.3rem 1.5rem 0
+      text-align: center
+
+      img
+        width: 110px
+        height: 110px
+        border-radius: 70px
+        transition: all .5s ease 0s
+
+        &:hover
+          transform: rotate(360deg)
+
+    .site-data
+      display: table
+      padding: .6rem .5rem 0
+      width: 100%
+      table-layout: fixed
+
+      .data-item
+        display: table-cell
+
+        .data-item-link .length-num
+          color: var(--text-highlight-color)
+          font-size: 1.28em
+
+        .data-item-link .headline
+          color: var(--sco-fontcolor)
+
+    hr
+      margin: 1rem auto
+
+    .menus_items
+      padding: 0 16px
+
+      .site-page
+        position: relative
+        display: block
+        padding: 0
+        color: var(--sco-fontcolor)
+        cursor: pointer
+        font-size: 14px
+        font-weight: 700
+
+        span:hover
+          color: #307af6
+
+      .menus_item > .site-page
+        display: flex
+        font-size: 12px
+        color: var(--sco-secondtext)
+
+      .expand
+        position: absolute
+        top: .78em
+        right: .4rem
+        transition: transform .3s ease 0s
+
+        &.hide
+          transform: rotate(90deg) !important
+
+      .menus_item_child
+        margin: 0 -4px
+        list-style: none
+        display: flex
+        flex-direction: row
+        flex-wrap: wrap
+
+        .site-page.child
+          display: flex
+          flex-direction: column
+          align-items: center
+          padding: 8px
+          border-radius: 8px
+          border: var(--style-border-always)
+          background: var(--sco-card-bg)
+
+        li
+          width: calc(50% - 8px)
+          margin: 4px
+
+        .site-page.child span
+          line-height: 1
+          margin-top: 8px
+
+    .card-tag-cloud
+      padding: 0 16px
+      display: flex
+      white-space: nowrap
+      flex-direction: row
+      flex-wrap: wrap
+      margin-bottom: 60px
+
+      a
+        color: var(--sco-fontcolor) !important
+        padding: 2px 8px 2px 12px
+        margin: 4px
+        border-radius: 8px
+        border: var(--style-border-always)
+        background: var(--sco-card-bg)
+        font-size: 14px !important
+
+        sup
+          opacity: .6
+          margin-left: 4px
+
+    span.sidebar-menu-item-title
+      font-size: 12px
+      color: var(--sco-secondtext)
+      margin-left: 16px
+
+    .sidebar-menu-item
+      display: flex
+      flex-direction: column
+      padding: 0 16px
+      margin-bottom: 6px
+
+      a.menu-child
+        width: 100%
+        background: var(--sco-card-bg)
+        border-radius: 8px
+        border: var(--style-border-always)
+        display: flex
+        align-items: center
+        font-size: 14px
+
+        i
+          width: 24px
+          height: 24px
+          display: flex
+          align-items: center
+          justify-content: center
+
+      a.menu-child span
+        margin-left: 10px
+
+    .webinfo
+      padding: 0 16px
+      display: flex
+      white-space: nowrap
+      flex-direction: column
+
+      .webinfo-item
+        justify-content: space-between
+
+    .menus_items .site-page span:hover
+      color: var(--sco-fontcolor)
+
+  #toggle-sidebar
+    bottom: 80px
+
+@media screen and (min-width: 768px)
+  #sidebar #sidebar-menus
+    display: none
+
+@media screen and (max-width: 768px)
+  #sidebar #sidebar-menus
+    .back-menu-list-groups .back-menu-list .back-menu-item
+      width: calc(50% - 16px)
+
+    .menus_items .site-page
+      font-weight: 400
 
-#sidebar-menus > hr {
-  display: none
-}
+    .menus_items li .site-page:hover
+      background: var(--sco-main)
+      color: var(--sco-white)
 
-#toggle-sidebar {
-  bottom: 80px
-}
+    .menus_items li .site-page span:hover
+      color: var(--sco-white)
 
-#sidebar {
+#mobile-sidebar #mobile-sidebar-menus.open
   background: var(--sco-maskbg)
-}
-
-@media screen and (max-width: 768px) {
-  #sidebar #sidebar-menus .menus_items li .site-page:hover {
-    background: var(--sco-main);
-    color: var(--sco-white)
-  }
-
-  #sidebar #sidebar-menus .menus_items li .site-page span:hover {
-    color: var(--sco-white)
-  }
-}
\ No newline at end of file
+
+#sidebar-menus > hr
+  display: none
\ No newline at end of file
diff --git a/source/css/_page/about.styl b/source/css/_page/about.styl
index 372b701b..9e4c389b 100644
--- a/source/css/_page/about.styl
+++ b/source/css/_page/about.styl
@@ -1119,5 +1119,4 @@ video.author-content-video {
   .main-hero-waves-area {
     display: none
   }
-}
-
+}
\ No newline at end of file
diff --git a/source/css/_page/category.styl b/source/css/_page/category.styl
index 2bde1153..1a5374c0 100644
--- a/source/css/_page/category.styl
+++ b/source/css/_page/category.styl
@@ -1,150 +1,120 @@
-.category-lists span.tags-punctuation {
-  font-size: 18px
-}
-
-#page .category-lists ul li::before {
-  display: none
-}
-
-#page .category-lists ul li {
-  margin: 0 8px 8px 0;
-}
-
-#page .category-lists ul {
-  display: flex;
-  padding: 0;
-  flex-wrap: wrap;
-  flex-direction: row
-}
-
-#page .category-lists ul li {
-  padding: 4px 16px;
-  width: 200px;
-  border-radius: 12px;
-  background: var(--sco-card-bg);
-  border: var(--style-border-always)
-}
-
-#page .category-lists {
-  padding: 1rem 0 1.5rem
-}
-
-@media screen and (max-width: 768px) {
-  #page .category-lists {
-    padding: 0
-  }
-}
-
-#page .category-lists .category-title {
-  font-size: 2.57em
-}
-
-@media screen and (max-width: 768px) {
-  #page .category-lists .category-title {
-    font-size: 2em
-  }
-}
-
-#page .category-lists .category-list a {
-  color: var(--sco-fontcolor)
-}
-
-#page .category-lists .category-list a:hover {
-  color: #307af6
-}
-
-#page .category-lists .category-list .category-list-count {
-  margin-left: .4rem;
-  color: #858585
-}
-
-#page .category-lists .category-list .category-list-count::before {
-  content: "("
-}
-
-#page .category-lists .category-list .category-list-count::after {
-  content: ")"
-}
-
-#page .category-lists ul {
-  margin-top: .4rem;
-  padding: 0 0 0 1rem;
-  list-style: none;
-  counter-reset: li 0
-}
-
-#page .category-lists ul ul {
-  padding-left: .2rem
-}
-
-#page .category-lists ul li {
-  position: relative;
-  margin: .3rem 0;
-  padding: .12em .4em .12em 1.4em
-}
-
-#page .category-lists ul li::before {
-  position: absolute;
-  left: 0;
-  cursor: pointer;
-  transition: all .3s ease-out 0s;
-  top: .7em;
-  width: .43em;
-  height: .43em;
-  border: .215em solid #307af6;
-  border-radius: .43em;
-  background: 0 0;
-  content: ""
-}
-
-#page .category-lists ul li:hover::before {
-  border-color: #ff7242
-}
-
-#page .tag-cloud-list a {
-  display: flex;
-  width: fit-content;
-  color: var(--sco-fontcolor) !important;
-  font-size: 1.4em !important;
-  padding: .2em .5em;
-  background: var(--sco-card-bg);
-  margin: .5em .5em;
-  border-radius: 12px;
-  -webkit-backface-visibility: hidden;
-  -webkit-transform-style: preserve-3d;
-  border: var(--style-border-always);
-  box-shadow: var(--sco-shadow-border);
-  align-items: center
-}
-
-#page .tag-cloud-list a:hover {
-  background: var(--sco-main) !important;
-  box-shadow: var(--sco-shadow-blue);
-  color: var(--sco-white) !important;
-  border: var(--style-border-hover)
-}
-
-span.tagsPageCount {
-  background: var(--sco-secondbg);
-  padding: 4px 4px;
-  border-radius: 8px;
-  color: var(--sco-secondtext);
-  line-height: 1;
-  text-align: center;
-  min-width: 35px;
-  display: inline-block;
-  font-size: 1rem;
-  margin-left: 4px
-}
-
-.category-lists span.tagsPageCount {
-  margin-left: 4px
-}
-
-#page .tag-cloud-list a:hover span.tagsPageCount {
-  color: var(--sco-lighttext)
-}
-
-.tags-name {
+.category-lists
+  span.tags-punctuation
+    font-size: 18px
+
+  span.tagsPageCount
+    margin-left: 4px
+
+#page
+  .category-lists
+    padding: 1rem 0 1.5rem
+
+    ul
+      display: flex
+      padding: 0
+      flex-wrap: wrap
+      flex-direction: row
+      margin-top: .4rem
+      padding: 0 0 0 1rem
+      list-style: none
+      counter-reset: li 0
+
+      ul
+        padding-left: .2rem
+
+      li
+        margin: 0 8px 8px 0
+        position: relative
+        margin: .3rem 0
+        padding: .12em .4em .12em 1.4em
+
+        &::before
+          display: none
+          position: absolute
+          left: 0
+          cursor: pointer
+          transition: all .3s ease-out 0s
+          top: .7em
+          width: .43em
+          height: .43em
+          border: .215em solid #307af6
+          border-radius: .43em
+          background: 0 0
+          content: ""
+
+        &:hover::before
+          border-color: #ff7242
+
+        padding: 4px 16px
+        width: 200px
+        border-radius: 12px
+        background: var(--sco-card-bg)
+        border: var(--style-border-always)
+
+    .category-title
+      font-size: 2.57em
+
+    .category-list
+      a
+        color: var(--sco-fontcolor)
+
+        &:hover
+          color: #307af6
+
+      .category-list-count
+        margin-left: .4rem
+        color: #858585
+
+        &::before
+          content: "("
+
+        &::after
+          content: ")"
+
+  .tag-cloud-list
+    a
+      display: flex
+      width: fit-content
+      color: var(--sco-fontcolor) !important
+      font-size: 1.4em !important
+      padding: .2em .5em
+      background: var(--sco-card-bg)
+      margin: .5em .5em
+      border-radius: 12px
+      -webkit-backface-visibility: hidden
+      -webkit-transform-style: preserve-3d
+      border: var(--style-border-always)
+      box-shadow: var(--sco-shadow-border)
+      align-items: center
+
+      &:hover
+        background: var(--sco-main) !important
+        box-shadow: var(--sco-shadow-blue)
+        color: var(--sco-white) !important
+        border: var(--style-border-hover)
+
+      span.tagsPageCount
+        color: var(--sco-lighttext)
+
+.tags-name
   margin-left: 2px
-}
\ No newline at end of file
+
+@media screen and (max-width: 768px)
+  #page
+    .category-lists
+      padding: 0
+
+      .category-title
+        font-size: 2em
+
+span.tagsPageCount
+  background: var(--sco-secondbg)
+  padding: 4px 4px
+  border-radius: 4px
+  color: var(--sco-secondtext)
+  line-height: 1
+  text-align: center
+  min-width: 22.5px
+  display: inline-block
+  font-size: .6rem
+  margin-left: 4px
\ No newline at end of file
diff --git a/source/css/_page/error.styl b/source/css/_page/error.styl
index 4561ec5a..10083685 100644
--- a/source/css/_page/error.styl
+++ b/source/css/_page/error.styl
@@ -1,206 +1,161 @@
-#error-wrap {
-  display: flex;
-  justify-content: center;
-  margin: 0 1rem;
-  width: 100%;
-  position: relative
-}
-
-#error-wrap .error-content {
-  display: flex;
-  -webkit-box-orient: horizontal;
-  flex-direction: row;
-  -webkit-box-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  align-items: center;
-  margin: 0 1rem;
-  height: 18rem;
-  max-width: 800px;
-  border-radius: 5px;
-  background: var(--sco-card-bg);
-  box-shadow: var(--card-box-shadow);
-  transition: all .3s ease 0s;
-  border: var(--style-border-always);
-  position: relative;
+#error-wrap
+  display: flex
+  justify-content: center
+  margin: 0 1rem
   width: 100%
-}
-
-#error-wrap .error-content:hover {
-  box-shadow: var(--card-hover-box-shadow)
-}
-
-@media screen and (max-width: 768px) {
-  #error-wrap .error-content {
-    -webkit-box-orient: vertical;
-    flex-direction: column;
-    margin: 0;
-    height: 25rem;
+  position: relative
+
+  .error-content
+    display: flex
+    flex-direction: row
+    justify-content: center
+    align-items: center
+    margin: 0 1rem
+    height: 18rem
+    max-width: 800px
+    border-radius: 5px
+    background: var(--sco-card-bg)
+    box-shadow: var(--card-box-shadow)
+    transition: all .3s ease 0s
+    border: var(--style-border-always)
+    position: relative
     width: 100%
-  }
-}
-
-#error-wrap .error-content .error-img {
-  -webkit-box-flex: 1;
-  flex: 1 1 0;
-  height: 90%;
-  width: 600px;
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-  background-color: #307af6;
-  background-position: center center;
-  background-size: cover
-}
-
-@media screen and (max-width: 768px) {
-  #error-wrap .error-content .error-img {
-    -webkit-box-flex: 1;
-    flex: 1 1 0;
-    width: 100%;
+
+    &:hover
+      box-shadow: var(--card-hover-box-shadow)
+
+    .error-img
+      flex: 1 1 0
+      height: 90%
+      width: 600px
+      border-top-left-radius: 8px
+      border-bottom-left-radius: 8px
+      background-color: #307af6
+      background-position: center center
+      background-size: cover
+
+    .error-info
+      flex: 1 1 0
+      padding: .5rem
+      text-align: center
+      font-size: 14px
+      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
+
+      .error_title
+        font-size: 9em
+        line-height: 1
+
+      .error_subtitle
+        word-break: break-word
+        font-size: 1.6em
+        -webkit-line-clamp: 2
+
+      a
+        display: inline-block
+        margin-top: .5rem
+        padding: .3rem 1.5rem
+        background: var(--btn-bg)
+        color: var(--btn-color)
+
+        i
+          padding-right: .3rem
+
+    box-shadow: none !important
     border-radius: 12px
-  }
-}
-
-#error-wrap .error-content .error-info {
-  -webkit-box-flex: 1;
-  flex: 1 1 0;
-  padding: .5rem;
-  text-align: center;
-  font-size: 14px;
-  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
-}
-
-#error-wrap .error-content .error-info .error_title {
-  font-size: 9em;
-  line-height: 1
-}
-
-@media screen and (max-width: 768px) {
-  #error-wrap .error-content .error-info {
-    -webkit-box-flex: 1.1;
-    flex: 1.1 1 0;
-    width: 100%;
-    padding-bottom: 2rem
-  }
-
-  #error-wrap .error-content .error-info .error_title {
-    font-size: 4rem
-  }
-}
-
-#error-wrap .error-content .error-info .error_subtitle {
-  word-break: break-word;
-  font-size: 1.6em;
-  -webkit-line-clamp: 2
-}
-
-#error-wrap .error-content .error-info a {
-  display: inline-block;
-  margin-top: .5rem;
-  padding: .3rem 1.5rem;
-  background: var(--btn-bg);
-  color: var(--btn-color)
-}
-
-#error-wrap .error-content .error-info a i {
-  padding-right: .3rem
-}
-
-#error-wrap .error-content {
-  box-shadow: none !important;
-  border-radius: 12px;
-  background: var(--sco-card-bg) !important
-}
-
-#body-wrap.error {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 50px 1rem 1rem;
-  position: relative
-}
-
-#body-wrap.error .aside-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  margin: 1rem;
-  max-width: 100%
-}
-
-#body-wrap.error .aside-list .aside-list-group {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  max-width: 800px;
-  margin: 0 auto;
-  justify-content: space-between
-}
-
-#body-wrap.error .aside-list .aside-list-item {
-  padding: .5rem 0;
-  width: 49%
-}
-
-#body-wrap.error .aside-list .aside-list-item img {
-  width: 100%;
-  object-fit: cover;
-  border-radius: 12px
-}
-
-#body-wrap.error .aside-list .aside-list-item .thumbnail {
-  overflow: hidden;
-  width: 100%;
-  height: 200px;
-  background: var(--sco-card-bg);
+    background: var(--sco-card-bg) !important
+
+#body-wrap.error
   display: flex
-}
-
-#body-wrap.error .aside-list .aside-list-item .content .title {
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  line-height: 1.5;
-  justify-content: center;
-  align-items: flex-end;
-  align-content: center;
-  padding-top: .5rem;
-  font-size: 16px;
-  font-weight: 700
-}
-
-#body-wrap.error .aside-list .aside-list-item .content time {
-  display: none
-}
-
-@media screen and (max-width: 768px) {
-  #body-wrap.error {
-    padding-top: 0
-  }
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  padding: 50px 1rem 1rem
+  position: relative
 
-  #body-wrap.error .aside-list {
+  .aside-list
+    display: flex
+    flex-direction: row
+    flex-wrap: nowrap
+    margin: 1rem
+    max-width: 100%
+
+    .aside-list-group
+      display: flex
+      flex-direction: row
+      flex-wrap: wrap
+      max-width: 800px
+      margin: 0 auto
+      justify-content: space-between
+
+    .aside-list-item
+      padding: .5rem 0
+      width: 49%
+
+      img
+        width: 100%
+        object-fit: cover
+        border-radius: 12px
+
+      .thumbnail
+        overflow: hidden
+        width: 100%
+        height: 200px
+        background: var(--sco-card-bg)
+        display: flex
+
+      .content .title
+        -webkit-line-clamp: 2
+        overflow: hidden
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        line-height: 1.5
+        justify-content: center
+        align-items: flex-end
+        align-content: center
+        padding-top: .5rem
+        font-size: 16px
+        font-weight: 700
+
+      .content time
+        display: none
+
+.button--animated
+  border-radius: 8px !important
+  transition: .3s
+
+  &:before
+    display: none
+
+@media screen and (max-width: 768px)
+  #error-wrap .error-content
+    flex-direction: column
     margin: 0
-  }
+    height: 25rem
+    width: 100%
 
-  #body-wrap.error .aside-list .aside-list-item .thumbnail {
-    height: 100px
-  }
-}
+    .error-img
+      flex: 1 1 0
+      width: 100%
+      border-radius: 12px
 
-.button--animated {
-  border-radius: 8px !important;
-  transition: .3s
-}
+    .error-info
+      flex: 1.1 1 0
+      width: 100%
+      padding-bottom: 2rem
+
+      .error_title
+        font-size: 4rem
+
+  #body-wrap.error
+    padding-top: 0
 
-#error-wrap .error-content .error-info a:hover {
-  background-color: var(--sco-blue);
-  transition: .3s;
-  box-shadow: var(--sco-shadow-blue)
-}
+    .aside-list
+      margin: 0
 
-.button--animated:before {
-  display: none
-}
+    .aside-list .aside-list-item .thumbnail
+      height: 100px
 
+  #error-wrap .error-content .error-info a:hover
+    background-color: var(--sco-blue)
+    transition: .3s
+    box-shadow: var(--sco-shadow-blue)
\ No newline at end of file
diff --git a/source/css/_page/homeTop.styl b/source/css/_page/homeTop.styl
index 2c5587f3..29054419 100644
--- a/source/css/_page/homeTop.styl
+++ b/source/css/_page/homeTop.styl
@@ -2,1275 +2,1040 @@ a
 	&.bber-reply 
 		cursor pointer
 
-#home_top {
-	max-width: 1400px;
-	margin: .5rem auto auto;
+#home_top
+	max-width: 1400px
+	margin: .5rem auto auto
 	padding: 0 1.5rem
-}
 
-@media screen and (max-width: 768px) {
-	#home_top {
-		padding: 0;
+	@media screen and (max-width:768px)
+		padding: 0
 		margin-top: 0
-	}
-}
-
-.recent-top-post-group {
-	border-radius: 12px;
-	overflow: hidden;
-	overflow-x: auto;
-	width: 100%;
-	margin-bottom: 0;
+
+.recent-top-post-group
+	border-radius: 12px
+	overflow: hidden
+	overflow-x: auto
+	width: 100%
+	margin-bottom: 0
 	-webkit-user-select: none
-}
 
-@media screen and (min-width: 1300px) {
-	.recent-post-top .recent-post-item {
-		margin-right: 0;
-		margin-bottom: .5rem
-	}
+	@media screen and (min-width: 1300px)
+		.recent-post-top .recent-post-item
+			margin-right: 0
+			margin-bottom: .5rem
 
-	.recent-post-top {
-		overflow-x: visible
-	}
+		.recent-post-top
+			overflow-x: visible
 
-	.recent-top-post-group {
-		overflow: visible;
-	}
-}
+		overflow: visible
 
-@media screen and (max-width: 768px) {
-	.recent-top-post-group {
-		border-radius: 0;
+	@media screen and (max-width: 768px)
+		border-radius: 0
 		background: var(--sco-background)
-	}
 
-	.recent-post-top-text {
-		display: none !important
-	}
+		.recent-post-top-text
+			display: none !important
+
+		.recent-post-top .recent-post-item .post_cover img
+			border-radius: 8px 8px 0 0 !important
+
+	@media screen and (max-width: 768px)
+		a.categoryButton i
+			display: none
+
+		.recent-post-top .categoryGroup
+			min-width: 130px !important
+			margin-bottom: .5rem
+			margin-left: 1rem
+			max-height: 164px
+			overflow: hidden
+			position: relative
 
-	.recent-post-top .recent-post-item .post_cover img {
-		border-radius: 8px 8px 0 0 !important
-	}
-}
+.recent-post-top
+	display: flex
+	flex-direction: row
+	flex-wrap: nowrap
+	width: 100%
+	overflow-x: scroll
 
-@media screen and (max-width: 768px) {
-	a.categoryButton i {
+	&::-webkit-scrollbar
 		display: none
-	}
-
-	.recent-post-top .categoryGroup {
-		min-width: 130px !important;
-		margin-bottom: .5rem;
-		margin-left: 1rem;
-		max-height: 164px;
-		overflow: hidden;
+
+	.recent-post-item
+		display: flex
+		width: 200px
+		flex-direction: column
+		align-items: flex-start
+		margin-left: .5rem
+		background: var(--sco-card-bg)
+		border-radius: 12px
+		overflow: hidden
+		min-width: 200px
+		height: 164px
+		max-height: 164px
+		border: var(--style-border-always)
+		transition: .3s
 		position: relative
-	}
-}
-
-.recent-post-top {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	width: 100%;
-	overflow-x: scroll
-}
+		box-shadow: var(--sco-shadow-border)
 
-.recent-post-top::-webkit-scrollbar {
-	display: none
-}
-
-.recent-post-top .recent-post-item {
-	display: flex;
-	width: 200px;
-	flex-direction: column;
-	align-items: flex-start;
-	margin-left: .5rem;
-	background: var(--sco-card-bg);
-	border-radius: 12px;
-	overflow: hidden;
-	min-width: 200px;
-	height: 164px;
-	max-height: 164px;
-	border: var(--style-border-always);
-	transition: .3s;
-	position: relative;
-	box-shadow: var(--sco-shadow-border)
-}
-
-@media screen and (max-width: 768px) {
-	.recent-post-top .recent-post-item {
-		border-radius: 8px;
-		box-shadow: none;
-		clip-path: inset(0 0 0 0 round 8px)
-	}
-
-	.recent-post-top .recent-post-item:last-child {
-		margin-right: 1rem
-	}
-}
-
-span.recent-post-top-text {
-	position: absolute;
-	top: 0;
-	left: -40px;
-	display: flex;
-	z-index: 1;
-	background: var(--sco-theme);
-	color: var(--sco-white);
-	padding: 2px 8px;
-	font-size: .6rem;
-	border-radius: 12px 0 12px 0;
-	transition: .3s;
-	cursor: pointer
-}
+		@media screen and (max-width: 768px)
+			border-radius: 8px
+			box-shadow: none
+			clip-path: inset(0 0 0 0 round 8px)
 
-.recent-post-item:hover .recent-post-top-text {
-	left: 0
-}
+			&:last-child
+				margin-right: 1rem
 
-.recent-post-top .recent-post-item .post_cover a {
-	height: 100px;
-	overflow: hidden;
-	display: flex
-}
+	span.recent-post-top-text
+		position: absolute
+		top: 0
+		left: -40px
+		display: flex
+		z-index: 1
+		background: var(--sco-theme)
+		color: var(--sco-white)
+		padding: 2px 8px
+		font-size: .6rem
+		border-radius: 12px 0 12px 0
+		transition: .3s
+		cursor: pointer
 
-.recent-post-top .recent-post-item .post_cover img {
-	object-fit: cover;
-	width: 100%;
-	background: var(--sco-secondbg);
-	border-radius: 12px 12px 0 0
-}
+	.recent-post-item:hover .recent-post-top-text
+		left: 0
 
-.recent-post-top .recent-post-item:hover .post_cover img {
-	transform: scale(1)
-}
+	.recent-post-item .post_cover a
+		height: 100px
+		overflow: hidden
+		display: flex
 
-.recent-post-item .post_cover {
-	-webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
-}
+	.recent-post-item .post_cover img
+		object-fit: cover
+		width: 100%
+		background: var(--sco-secondbg)
+		border-radius: 12px 12px 0 0
 
-.recent-post-top .recent-post-item .recent-post-info {
-	padding: .3rem .5rem .3rem .5rem !important;
-	transition: .3s
-}
+	.recent-post-item:hover .post_cover img
+		transform: scale(1)
 
-.recent-post-top .recent-post-item:hover .recent-post-info a {
-	color: var(--sco-fontcolor)
-}
+	.recent-post-item .post_cover
+		-webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
 
-@media screen and (max-width: 1300px) {
-	.recent-post-top .recent-post-item:hover .recent-post-info a {
-		color: var(--sco-theme);
+	.recent-post-item .recent-post-info
+		padding: .3rem .5rem .3rem .5rem !important
 		transition: .3s
-	}
-}
-
-.recent-post-top .recent-post-item .recent-post-info .article-title {
-	-webkit-line-clamp: 2;
-	overflow: hidden;
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	line-height: 1.5;
-	justify-content: center;
-	align-items: flex-end;
-	align-content: center;
-	font-weight: 700;
-	font-size: .8rem !important;
-	padding: 0 !important;
-}
-
-
-.recent-post-top .categoryGroup {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
+
+	.recent-post-item:hover .recent-post-info a
+		color: var(--sco-fontcolor)
+
+		@media screen and (max-width: 1300px)
+			.recent-post-item:hover .recent-post-info a
+				color: var(--sco-theme)
+				transition: .3s
+
+	.recent-post-item .recent-post-info .article-title
+		-webkit-line-clamp: 2
+		overflow: hidden
+		display: -webkit-box
+		-webkit-box-orient: vertical
+		line-height: 1.5
+		justify-content: center
+		align-items: flex-end
+		align-content: center
+		font-weight: 700
+		font-size: .8rem !important
+		padding: 0 !important
+
+.recent-post-top .categoryGroup
+	display: flex
+	flex-direction: column
+	justify-content: space-between
 	min-width: 200px
-}
 
-.categoryGroup .categoryItem:nth-child(3) {
+.categoryGroup .categoryItem:nth-child(3)
 	display: none
-}
 
-@media screen and (min-width: 1200px) {
-	.recent-post-top .categoryGroup {
-		flex-direction: row;
-		height: 24%;
+@media screen and (min-width: 1200px)
+	.recent-post-top .categoryGroup
+		flex-direction: row
+		height: 24%
 		animation: slide-in .6s .2s backwards
-	}
 
-	.categoryItem {
-		width: calc(100% / 3 - .33rem);
-		height: 100% !important;
+	.categoryItem
+		width: calc(100% / 3 - .33rem)
+		height: 100% !important
 		margin-right: .5rem
-	}
 
-	.categoryItem:last-child {
+	.categoryItem:last-child
 		margin-right: 0
-	}
 
-	.categoryItem:hover {
+	.categoryItem:hover
 		width: 50%
-	}
 
-	.categoryGroup .categoryItem:nth-child(3) {
+	.categoryGroup .categoryItem:nth-child(3)
 		display: flex
-	}
-}
 
-a.categoryButton.bikan {
-	background: linear-gradient(to right, #358bff, #15c6ff);
+a.categoryButton.bikan
+	background: linear-gradient(to right, #358bff, #15c6ff)
 	background-size: 200%
-}
 
-a.categoryButton.remen {
-	background: linear-gradient(to right, #f65, #ffbf37);
+a.categoryButton.remen
+	background: linear-gradient(to right, #f65, #ffbf37)
 	background-size: 200%
-}
 
-a.categoryButton.shiyong {
-	background: linear-gradient(to right, #18e7ae, #1eebeb);
+a.categoryButton.shiyong
+	background: linear-gradient(to right, #18e7ae, #1eebeb)
 	background-size: 200%
-}
 
-[data-theme=dark] a.categoryButton.bikan {
-	background: linear-gradient(to right, #0653b8, #2fcbff);
+[data-theme=dark] a.categoryButton.bikan
+	background: linear-gradient(to right, #0653b8, #2fcbff)
 	background-size: 200%
-}
 
-[data-theme=dark] a.categoryButton.remen {
-	background: linear-gradient(to right, #e22a16, #da980c);
+[data-theme=dark] a.categoryButton.remen
+	background: linear-gradient(to right, #e22a16, #da980c)
 	background-size: 200%
-}
 
-[data-theme=dark] a.categoryButton.shiyong {
-	background: linear-gradient(to right, #099e74, #0ea4a4);
+[data-theme=dark] a.categoryButton.shiyong
+	background: linear-gradient(to right, #099e74, #0ea4a4)
 	background-size: 200%
-}
 
-a.categoryButton:hover {
+a.categoryButton:hover
 	background-position: 100% 0
-}
-
 
-#category #category-bar {
-	padding: 0;
-	border: none;
+#category #category-bar
+	padding: 0
+	border: none
 	box-shadow: none
-}
 
-#category a.category-bar-item.select a {
+#category a.category-bar-item.select a
 	display: none
-}
 
-.category-in-bar {
-	display: flex;
-	white-space: nowrap;
+.category-in-bar
+	display: flex
+	white-space: nowrap
 	align-items: center
-}
 
-.category-in-bar-tips {
+.category-in-bar-tips
 	margin-right: 1rem
-}
-
-.category-bar-items {
-	white-space: nowrap;
-	overflow-x: scroll;
-	overflow-y: hidden;
-	display: flex;
-	border-radius: 8px;
-	align-items: center;
+
+.category-bar-items
+	white-space: nowrap
+	overflow-x: scroll
+	overflow-y: hidden
+	display: flex
+	border-radius: 8px
+	align-items: center
 	height: 30px
-}
 
-.category-in-bar .category-in-bar-tips {
+.category-in-bar .category-in-bar-tips
 	margin-bottom: 0
-}
 
-.category-in-bar #category-bar {
+.category-in-bar #category-bar
 	margin-bottom: 0
-}
 
-.category-bar-items::-webkit-scrollbar {
+.category-bar-items::-webkit-scrollbar
 	display: none
-}
-
-.category-bar-item a {
-	padding: .1rem .5rem;
-	margin-right: 6px;
-	font-weight: 700;
-	border-radius: 8px;
-	display: flex;
-	align-items: center;
+
+.category-bar-item a
+	padding: .1rem .5rem
+	margin-right: 6px
+	font-weight: 700
+	border-radius: 8px
+	display: flex
+	align-items: center
 	height: 30px
-}
 
-.category-bar-item:hover a {
-	background: var(--sco-theme);
+.category-bar-item:hover a
+	background: var(--sco-theme)
 	color: var(--sco-white)
-}
 
-.category-bar-item.select a {
-	background: var(--sco-theme);
-	color: var(--sco-white);
+.category-bar-item.select a
+	background: var(--sco-theme)
+	color: var(--sco-white)
 	border-radius: 8px
-}
 
-@media screen and (max-width: 768px) {
-	.category-bar-item.select a {
+@media screen and (max-width: 768px)
+	.category-bar-item.select a
 		border-radius: 8px
-	}
 
-	.category-bar-item a {
+	.category-bar-item a
 		border-radius: 8px
-	}
 
-	.category-in-bar {
-		position: -webkit-sticky;
-		position: sticky;
-		top: 60px;
-		background: var(--sco-background);
+	.category-in-bar
+		position: -webkit-sticky
+		position: sticky
+		top: 60px
+		background: var(--sco-background)
 		z-index: 1002
-	}
-}
 
-.category-bar-next {
-	margin-left: 16px;
-	cursor: pointer;
-	height: 22px;
+.category-bar-next
+	margin-left: 16px
+	cursor: pointer
+	height: 22px
 	display: flex
-}
 
-.category-bar-next:hover {
+.category-bar-next:hover
 	color: var(--sco-lighttext)
-}
 
-.category-bar-more {
-	margin-left: 14px;
+.category-bar-more
+	margin-left: 14px
 	font-weight: 700
-}
 
-.category-bar-more:hover {
+.category-bar-more:hover
 	color: var(--sco-lighttext)
-}
 
-@media screen and (max-width: 768px) {
-	#recent-posts .recent-post-item {
-		-webkit-box-orient: vertical;
-		flex-direction: column;
+
+1300px = 1300px
+
+@media screen and (max-width: 768px)
+	#recent-posts .recent-post-item
+		-webkit-box-orient: vertical
+		flex-direction: column
 		height: auto !important
-	}
 
-	#recent-posts .recent-post-item .post_cover {
-		width: 100%;
-		height: 230px;
-		border-radius: 5px 8px 0 0;
-		-webkit-box-ordinal-group: 1 !important;
+	#recent-posts .recent-post-item .post_cover
+		width: 100%
+		height: 230px
+		border-radius: 5px 8px 0 0
+		-webkit-box-ordinal-group: 1 !important
 		order: 1 !important
-	}
 
-	#recent-posts .recent-post-item .recent-post-info {
-		padding: 1rem 1rem 1.5rem;
-		width: 100%;
-		-webkit-box-ordinal-group: 2 !important;
+	#recent-posts .recent-post-item .recent-post-info
+		padding: 1rem 1rem 1.5rem
+		width: 100%
+		-webkit-box-ordinal-group: 2 !important
 		order: 2 !important
-	}
 
-	#recent-posts .recent-post-item .recent-post-info.no-cover {
+	#recent-posts .recent-post-item .recent-post-info.no-cover
 		padding: 1.5rem 1rem
-	}
 
-	#recent-posts .recent-post-item .recent-post-info .article-title {
+	#recent-posts .recent-post-item .recent-post-info .article-title
 		font-size: 1.43em
-	}
 
-	#recent-posts .recent-post-item .recent-post-info .content {
+	#recent-posts .recent-post-item .recent-post-info .content
 		height: auto
-	}
-}
 
-.recent-post-item .recent-post-info .recent-post-info-top {
-	position: relative;
-	transition: .3s;
-	padding: 0 32px;
+.recent-post-item .recent-post-info .recent-post-info-top
+	position: relative
+	transition: .3s
+	padding: 0 32px
 	width: 100%
-}
-
-.recent-post-item .recent-post-info .recent-post-info-top .article-title {
-	line-height: 30px;
-	margin-top: 0;
-	font-weight: 700;
-	color: var(--sco-fontcolor);
-	margin-bottom: 0;
-	width: 100%;
-	transition: .3s;
-	font-size: 1rem;
-	-webkit-line-clamp: 2;
-	display: -webkit-box;
-	overflow: hidden;
+
+.recent-post-item .recent-post-info .recent-post-info-top .article-title
+	line-height: 30px
+	margin-top: 0
+	font-weight: 700
+	color: var(--sco-fontcolor)
+	margin-bottom: 0
+	width: 100%
+	transition: .3s
+	font-size: 1rem
+	-webkit-line-clamp: 2
+	display: -webkit-box
+	overflow: hidden
 	-webkit-box-orient: vertical
-}
 
-.recent-post-item .recent-post-info .recent-post-info-top .original {
-	display: flex;
-	color: var(--sco-secondtext);
-	font-size: .5rem;
-	position: relative;
+.recent-post-item .recent-post-info .recent-post-info-top .original
+	display: flex
+	color: var(--sco-secondtext)
+	font-size: .5rem
+	position: relative
 	margin-right: 8px
-}
 
-.recent-post-item .recent-post-info .recent-post-info-top .lastestpost {
-	display: none;
+.recent-post-item .recent-post-info .recent-post-info-top .lastestpost
+	display: none
 	margin-right: 8px
-}
 
-.recent-post-info-top-tips {
-	display: flex;
+.recent-post-info-top-tips
+	display: flex
 	margin-top: 20px
-}
 
-.recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post {
-	display: flex;
-	color: var(--sco-secondtext);
-	font-size: .5rem;
+.recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post
+	display: flex
+	color: var(--sco-secondtext)
+	font-size: .5rem
 	position: relative
-}
 
-.recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post:visited {
+.recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post:visited
 	color: var(--sco-card-bg)
-}
 
-@media screen and (max-width: 768px) {
-	.recent-post-info-top-tips {
+@media screen and (max-width: 768px)
+	.recent-post-info-top-tips
 		display: none
-	}
-}
-
-@media screen and (min-width: 1300px) {
-	#recent-posts > .recent-post-item:nth-child(2) .lastestpost {
-		display: flex;
-		color: var(--sco-secondtext);
-		font-size: .5rem;
+
+@media screen and (min-width: 1300px)
+	#recent-posts > .recent-post-item:nth-child(2) .lastestpost
+		display: flex
+		color: var(--sco-secondtext)
+		font-size: .5rem
 		position: relative
-	}
 
-	.recent-post-item .recent-post-info .recent-post-info-top .article-title {
-		font-size: 20px;
+	.recent-post-item .recent-post-info .recent-post-info-top .article-title
+		font-size: 20px
 		-webkit-line-clamp: 2
-	}
 
-	.recent-post-item:hover .recent-post-info .recent-post-info-top .article-title {
+	.recent-post-item:hover .recent-post-info .recent-post-info-top .article-title
 		-webkit-line-clamp: 2
-	}
 
-	#recent-posts > .recent-post-item .post_cover {
-		transition: 1s !important;
-		height: 225px;
+	#recent-posts > .recent-post-item .post_cover
+		transition: 1s !important
+		height: 225px
 		width: 100%
-	}
 
-	.recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content {
-		opacity: 0 !important;
+	.recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content
+		opacity: 0 !important
 		-webkit-line-clamp: 2 !important
-	}
 
-	.recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content {
+	.recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content
 		opacity: 1 !important
-	}
-}
-
-.recent-post-item .recent-post-info .recent-post-info-top .content {
-	opacity: 0;
-	transition: .3s;
-	display: -webkit-box;
-	overflow: hidden;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 2;
-	line-height: 1.4;
-	color: var(--sco-secondtext);
+
+.recent-post-item .recent-post-info .recent-post-info-top .content
+	opacity: 0
+	transition: .3s
+	display: -webkit-box
+	overflow: hidden
+	-webkit-box-orient: vertical
+	-webkit-line-clamp: 2
+	line-height: 1.4
+	color: var(--sco-secondtext)
 	margin-top: .5rem
-}
 
-@media screen and (max-width: 1300px) {
-	.recent-post-item:hover .recent-post-info .recent-post-info-top .content {
+@media screen and (max-width: 1300px)
+	.recent-post-item:hover .recent-post-info .recent-post-info-top .content
 		display: none
-	}
-}
 
-@media screen and (min-width: 1300px) {
-	.recent-post-item:hover .recent-post-info .recent-post-info-top .content {
+@media screen and (min-width: 1300px)
+	.recent-post-item:hover .recent-post-info .recent-post-info-top .content
 		display: none
-	}
-}
 
-@media screen and (min-width: 768px) {
-	.recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content {
-		opacity: 1;
+@media screen and (min-width: 768px)
+	.recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content
+		opacity: 1
 		-webkit-line-clamp: 4
-	}
 
-	.recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content {
+	.recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content
 		-webkit-line-clamp: 6
-	}
-}
 
-@media screen and (max-width: 768px) {
-	.recent-post-item .recent-post-info .recent-post-info-top {
-		padding: 0 20px;
+@media screen and (max-width: 768px)
+	.recent-post-item .recent-post-info .recent-post-info-top
+		padding: 0 20px
 		top: 20px
-	}
 
-	.recent-post-item .recent-post-info .recent-post-info-top .content {
-		opacity: 1;
-		-webkit-line-clamp: 3;
+	.recent-post-item .recent-post-info .recent-post-info-top .content
+		opacity: 1
+		-webkit-line-clamp: 3
 		display: none
-	}
 
-	#recent-posts .recent-post-item .recent-post-info .article-title {
+	#recent-posts .recent-post-item .recent-post-info .article-title
 		font-size: 19px
-	}
-}
 
-#recent-post-top .recent-post-item .post_cover {
+#recent-post-top .recent-post-item .post_cover
 	width: 100%
-}
 
-@media screen and (max-width: 768px) {
-	#recent-posts .recent-post-item:hover {
-		border: none;
+@media screen and (max-width: 768px)
+	#recent-posts .recent-post-item:hover
+		border: none
 		box-shadow: none
-	}
-}
 
-@media screen and (max-width: 1300px) {
-	#recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius {
-		width: 75%;
-		display: flex;
+@media screen and (max-width: 1300px)
+	#recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius
+		width: 75%
+		display: flex
 		height: 200px
-	}
 
-	#recent-posts > .recent-post-item:hover .post_cover img.post_bg {
-		transform: scale(1.03);
-		transition: .3s ease-in-out;
+	#recent-posts > .recent-post-item:hover .post_cover img.post_bg
+		transform: scale(1.03)
+		transition: .3s ease-in-out
 		filter: brightness(.85)
-	}
 
-	@media screen and (min-width: 1200px) {
-		#recent-posts>.recent-post-item:hover .post_cover img.post_bg {
-			transform:scale(1.03);
-			transition: .3s ease-in-out;
+	@media screen and (min-width: 1200px)
+		#recent-posts>.recent-post-item:hover .post_cover img.post_bg
+			transform:scale(1.03)
+			transition: .3s ease-in-out
 			filter: brightness(.85)
-		}
-	}
 
-	#recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg {
+	#recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg
 		transform: scale(1.03)
-	}
-
-	#recent-posts > .recent-post-item .post_cover img.post_bg {
-		min-width: 100%;
-		-webkit-backface-visibility: hidden;
-		-webkit-transform-style: preserve-3d;
-		transition: .3s ease-in-out;
-		min-height: 100%;
+
+	#recent-posts > .recent-post-item .post_cover img.post_bg
+		min-width: 100%
+		-webkit-backface-visibility: hidden
+		-webkit-transform-style: preserve-3d
+		transition: .3s ease-in-out
+		min-height: 100%
 		user-select: none
-	}
 
-	#recent-posts > .recent-post-item:hover > .recent-post-info {
-		transition: all .3s;
+	#recent-posts > .recent-post-item:hover > .recent-post-info
+		transition: all .3s
 		position: relative
-	}
 
-	#recent-posts > .recent-post-item > .recent-post-info {
+	#recent-posts > .recent-post-item > .recent-post-info
 		transition: all .3s
-	}
-}
 
-@media screen and (min-width: 1300px) {
-	#recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius {
-		width: 100%;
+@media screen and (min-width: 1300px)
+	#recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius
+		width: 100%
 		display: flex
-	}
-}
 
-@media screen and (min-width: 1300px) {
-	#recent-posts > .recent-post-item {
+@media screen and (min-width: 1300px)
+	#recent-posts > .recent-post-item
 		flex-direction: column
-	}
 
-	#recent-posts > .recent-post-item:not(:first-child) {
-		width: calc(100% / 2 - .5rem);
-		margin-top: .25rem;
-		margin-bottom: .75rem;
+	#recent-posts > .recent-post-item:not(:first-child)
+		width: calc(100% / 2 - .5rem)
+		margin-top: .25rem
+		margin-bottom: .75rem
 		box-shadow: var(--sco-shadow-border)
-	}
-
-	#category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item {
-		position: relative;
-		overflow: hidden;
-		animation: slide-in .6s .4s backwards;
-		will-change: transform;
-		width: calc(100% / 2 - .5rem);
-		margin-top: .25rem;
-		margin-bottom: .75rem;
+
+	#category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item
+		position: relative
+		overflow: hidden
+		animation: slide-in .6s .4s backwards
+		will-change: transform
+		width: calc(100% / 2 - .5rem)
+		margin-top: .25rem
+		margin-bottom: .75rem
 		box-shadow: var(--sco-shadow-border)
-	}
 
-	#category-bar {
-		margin-bottom: .75rem;
-		box-shadow: var(--sco-shadow-border);
+	#category-bar
+		margin-bottom: .75rem
+		box-shadow: var(--sco-shadow-border)
 		animation: slide-in .6s .3s backwards
-	}
 
-	#category #category-bar {
+	#category #category-bar
 		animation: none
-	}
-
-	#recent-posts {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		align-items: flex-start;
-		align-content: flex-start;
+
+	#recent-posts
+		display: flex
+		flex-wrap: wrap
+		justify-content: space-between
+		align-items: flex-start
+		align-content: flex-start
 		-webkit-user-select: none
-	}
-}
 
-@media screen and (min-width: 1200px) {
-	#category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item {
+@media screen and (min-width: 1200px)
+	#category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item
 		animation:slide-in .6s .4s backwards
-	}
 
-	#category-bar {
+	#category-bar
 		animation: slide-in .6s .3s backwards
-	}
-}
 
-@media screen and (max-width: 768px) {
-	#recent-posts > .recent-post-item {
+@media screen and (max-width: 768px)
+	#recent-posts > .recent-post-item
 		border-radius: 0
-	}
-
-	#recent-posts > .recent-post-item:not(:first-child) {
-		border-radius: 12px;
-		margin: .5rem 1rem 1.5rem;
-		border: var(--style-border-always);
-		box-shadow: var(--sco-shadow-border);
-		display: block;
-		position: relative;
+
+	#recent-posts > .recent-post-item:not(:first-child)
+		border-radius: 12px
+		margin: .5rem 1rem 1.5rem
+		border: var(--style-border-always)
+		box-shadow: var(--sco-shadow-border)
+		display: block
+		position: relative
 		clip-path: inset(0 0 0 0 round 12px)
-	}
 
-	#category #recent-posts,#tag #recent-posts {
+	#category #recent-posts,#tag #recent-posts
 		padding: 0
-	}
 
-	#recent-posts .recent-post-item .post_cover {
-		border-radius: 0 !important;
+	#recent-posts .recent-post-item .post_cover
+		border-radius: 0 !important
 		width: 100%
-	}
 
-	a.article-meta__categories {
-		left: 12px !important;
-		top: 12px !important;
-		border-radius: 4px !important;
-		padding: 2px 9px !important;
+	a.article-meta__categories
+		left: 12px !important
+		top: 12px !important
+		border-radius: 4px !important
+		padding: 2px 9px !important
 		font-size: 12px
-	}
-}
 
-@media screen and (min-width: 1300px) {
-	.topGroup .recent-post-item:nth-child(7) {
+@media screen and (min-width: 1300px)
+	.topGroup .recent-post-item:nth-child(7)
 		display: none
-	}
-}
 
-@media screen and (max-width: 768px) {
-	#sidebar-menus > div.author-avatar {
+@media screen and (max-width: 768px)
+	#sidebar-menus > div.author-avatar
 		display: none
-	}
 
-	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap
 		bottom: .5rem !important
-	}
 
-	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap time {
-		display: absolute;
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap time
+		display: absolute
 		right: 0
-	}
 
-	#web_bg {
+	#web_bg
 		background: 0 0 !important
-	}
 
-	#recent-posts > .recent-post-item .post_cover img.post_bg {
+	#recent-posts > .recent-post-item .post_cover img.post_bg
 		border-radius: 12px 12px 0 0 !important
-	}
 
-	#recent-posts > .recent-post-item .post_cover img.post_bg:hover {
+	#recent-posts > .recent-post-item .post_cover img.post_bg:hover
 		transform: scale(1)
-	}
 
-	#recent-posts > .recent-post-item:hover img.post_bg {
+	#recent-posts > .recent-post-item:hover img.post_bg
 		transform: scale(1)
-	}
 
-	.recent-post-top .recent-post-item:hover .post_cover img {
+	.recent-post-top .recent-post-item:hover .post_cover img
 		transform: scale(1)
-	}
 
-	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap, #recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts > .recent-post-item > .recent-post-info > .content {
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap, #recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts > .recent-post-item > .recent-post-info > .content
 		padding: 0 20px !important
-	}
-}
 
-@media screen and (min-width: 768px) {
-	#recent-posts > .recent-post-item > .recent-post-info > .article-title {
+@media screen and (min-width: 768px)
+	#recent-posts > .recent-post-item > .recent-post-info > .article-title
 		top: 40px
-	}
 
-	#recent-posts > .recent-post-item:hover > .recent-post-info > .article-title {
+	#recent-posts > .recent-post-item:hover > .recent-post-info > .article-title
 		top: 20px
-	}
 
-	#recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-title {
+	#recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-title
 		top: 30px
-	}
 
-	#recent-posts .recent-post-item:hover .recent-post-info .article-title {
+	#recent-posts .recent-post-item:hover .recent-post-info .article-title
 		color: var(--sco-theme)
-	}
-}
 
-@media screen and (max-width: 768px) {
-	#recent-posts .recent-post-item .recent-post-info {
+@media screen and (max-width: 768px)
+	#recent-posts .recent-post-item .recent-post-info
 		height: 7rem
-	}
-}
 
-@media screen and (min-width: 1300px) {
-	#recent-posts > .recent-post-item:hover > .recent-post-info > .article-meta-wrap {
+@media screen and (min-width: 1300px)
+	#recent-posts > .recent-post-item:hover > .recent-post-info > .article-meta-wrap
 		bottom: 30px
-	}
 
-	#recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-meta-wrap {
+	#recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-meta-wrap
 		bottom: 30px
-	}
 
-	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap
 		bottom: 30px
-	}
-}
 
-@media screen and (min-width: 768px) {
-	#recent-posts > .recent-post-item > .recent-post-info > .content {
-		opacity: 0;
+@media screen and (min-width: 768px)
+	#recent-posts > .recent-post-item > .recent-post-info > .content
+		opacity: 0
 		top: 120px
-	}
 
-	#recent-posts > .recent-post-item:hover > .recent-post-info > .content {
-		opacity: 1;
+	#recent-posts > .recent-post-item:hover > .recent-post-info > .content
+		opacity: 1
 		top: 90px
-	}
 
-	@media screen and (max-width: 1300px) {
-		#recent-posts > .post-card-large > .recent-post-info > .content {
+	@media screen and (max-width: 1300px)
+		#recent-posts > .post-card-large > .recent-post-info > .content
 			opacity: 1 !important
-		}
 
-		#recent-posts > .post-card-large:hover > .recent-post-info > .content {
+		#recent-posts > .post-card-large:hover > .recent-post-info > .content
 			top: 110px
-		}
 
-		#recent-posts > .post-card-large > .recent-post-info > .content {
+		#recent-posts > .post-card-large > .recent-post-info > .content
 			-webkit-line-clamp: 3 !important
-		}
 
-		#recent-posts > .post-card-large:hover > .recent-post-info > .content {
+		#recent-posts > .post-card-large:hover > .recent-post-info > .content
 			-webkit-line-clamp: 5 !important
-		}
 
-		#recent-posts > .post-card-large {
+		#recent-posts > .post-card-large
 			height: 20em !important
-		}
-	}
-}
 
-@media screen and (max-width: 768px) {
-	#recent-posts > .recent-post-item > .recent-post-info > .content {
+@media screen and (max-width: 768px)
+	#recent-posts > .recent-post-item > .recent-post-info > .content
 		top: 5rem
-	}
-}
 
-.recent-post-item span.tags-punctuation {
-	margin-right: 0;
+.recent-post-item span.tags-punctuation
+	margin-right: 0
 	font-size: 13px
-}
 
 // category bar
-div#categoryList {
-	display: flex;
-	width: 100%;
+div#categoryList
+	display: flex
+	width: 100%
 	justify-content: space-between
-}
 
-.categoryItem {
-	overflow: hidden;
-	transform: scale(1);
-	transition: all .8s cubic-bezier(.65, .15, .37, 1.19);
-	height: 48%;
+.categoryItem
+	overflow: hidden
+	transform: scale(1)
+	transition: all .8s cubic-bezier(.65, .15, .37, 1.19)
+	height: 48%
 	border-radius: 12px
-}
-
-a.categoryButton {
-	height: 100%;
-	width: 100%;
-	background: var(--sco-card-bg);
-	border-radius: 12px;
-	display: inline-block;
-	text-align: left;
-	line-height: 4em;
-	font-weight: 700;
-	font-size: .9rem;
-	color: var(--sco-white);
-	transition: all .8s cubic-bezier(.39, .575, .565, 1);
-	transform: scale(1);
-	overflow: hidden;
+
+a.categoryButton
+	height: 100%
+	width: 100%
+	background: var(--sco-card-bg)
+	border-radius: 12px
+	display: inline-block
+	text-align: left
+	line-height: 4em
+	font-weight: 700
+	font-size: .9rem
+	color: var(--sco-white)
+	transition: all .8s cubic-bezier(.39, .575, .565, 1)
+	transform: scale(1)
+	overflow: hidden
 	font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei
-}
 
-a.categoryButton i {
+a.categoryButton i
 	transform: scale(1) rotate(15deg)
-}
 
-@media screen and (max-width: 768px) {
-	a.categoryButton {
+@media screen and (max-width: 768px)
+	a.categoryButton
 		border-radius: 8px
-	}
 
-	.categoryItem {
-		border-radius: 0;
-		height: 47%;
+	.categoryItem
+		border-radius: 0
+		height: 47%
 		box-shadow: none !important
-	}
-}
-
-a.categoryButton:after {
-	top: 50px;
-	width: 1rem;
-	left: 21px;
-	height: 2px;
-	background: var(--sco-white);
-	content: "";
-	border-radius: 1px;
+
+a.categoryButton:after
+	top: 50px
+	width: 1rem
+	left: 21px
+	height: 2px
+	background: var(--sco-white)
+	content: ""
+	border-radius: 1px
 	position: absolute
-}
 
-.categoryButtonText {
+.categoryButtonText
 	padding-left: 21px
-}
-
-a.categoryButton i {
-	font-size: 5rem;
-	opacity: .2;
-	position: absolute;
-	right: 0;
-	top: 20%;
-	transition: .3s;
-	width: 100px;
-	text-align: center;
+
+a.categoryButton i
+	font-size: 5rem
+	opacity: .2
+	position: absolute
+	right: 0
+	top: 20%
+	transition: .3s
+	width: 100px
+	text-align: center
 	filter: blur(2px)
-}
 
-.topGroup {
+.topGroup
 	display: flex
-}
 
-#bannerGroup {
+#bannerGroup
 	display: flex
-}
 
-div#banners {
+div#banners
 	display: none
-}
 
-.topGroup .todayCard {
+.topGroup .todayCard
 	display: none
-}
-
-@media screen and (min-width: 1200px) {
-	.topGroup {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-		height: calc(328px + .5rem);
-		align-content: space-between;
-		width: calc(600px + 1.5rem);
-		position: relative;
-		animation: slide-in .6s .1s backwards
-	}
-
-	div#bannerGroup {
-		width: calc(100% - 600px - 2rem);
-		margin-right: .5rem;
-		height: calc(328px + .5rem);
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between
-	}
-
-	div#banners {
-		display: flex;
-		width: 100%;
-		height: 76%;
-		background: var(--sco-card-bg);
-		margin-bottom: .5rem;
-		border: var(--style-border);
-		border-radius: 12px;
-		overflow: hidden;
-		position: relative;
-		box-shadow: var(--sco-shadow-border);
-		flex-direction: column;
-		transition: .3s;
-		will-change: transform;
-		animation: slide-in .6s .1s backwards
-	}
 
-	div#banners:hover {
-		box-shadow: var(--sco-shadow-main)
-	}
+@media screen and (min-width: 1200px)
+	.topGroup
+		display: flex
+		flex-direction: row
+		flex-wrap: wrap
+		justify-content: flex-end
+		height: calc(328px + .5rem)
+		align-content: space-between
+		width: calc(600px + 1.5rem)
+		position: relative
+		animation: slide-in .6s .1s backwards
 
-	#banners.flink {
-		margin-bottom: .5rem
-	}
+		.todayCard
+			position: absolute
+			width: calc(600px + 1rem)
+			height: 100%
+			z-index: 1
+			top: 0
+			left: 0
+			background: var(--sco-card-bg)
+			border-radius: 12px
+			margin-left: .5rem
+			overflow: hidden
+			transition: .3s
+			display: flex
+			cursor: pointer
+			pointer-events: all
+
+			&::after
+				position: absolute
+				content: ''
+				width: 100%
+				height: 100%
+				top: 0
+				left: 0
+
+			&.hide
+				opacity: 0
+				pointer-events: none
+
+			.todayCard-info
+				position: absolute
+				bottom: 2rem
+				left: 2rem
+				z-index: 2
+				color: var(--sco-white)
+				max-width: 60%
+				transition: .3s
+
+				.todayCard-tips
+					opacity: .8
+					font-size: .6rem
+
+				.todayCard-title
+					font-size: 28px
+					font-weight: 700
+					line-height: 36px
+
+			.todayCard-cover
+				position: absolute
+				min-width: 100%
+				min-height: 100%
+				top: 0
+				left: 0
+				background-size: cover
+				z-index: -1
+				transition: .3s
+
+			.banner-button-group
+				position: absolute
+				right: 2rem
+				bottom: 2rem
+				display: flex
+				transition: .3s
+
+			.banner-button
+				background: var(--sco-white-op)
+				border-radius: 20px
+				color: var(--sco-white)
+				display: flex
+				align-items: center
+				z-index: 1
+				transition: .3s
+				cursor: pointer
+				backdrop-filter: saturate(180%) blur(20px)
+				-webkit-backdrop-filter: blur(20px)
+				transform: translateZ(0)
+				height: 40px
+				width: 118px
+				justify-content: center
+
+				i
+					margin-right: 8px
+					font-size: 22px
+
+				&:hover
+					background: var(--sco-theme)
+					color: var(--sco-white)
+
+			&.hide
+				.todayCard-info
+					bottom: 1rem
+					opacity: 0
+
+				.todayCard-cover
+					transform: scale(1.2)
+
+				.banner-button-group
+					bottom: 1rem
+
+	div#bannerGroup
+		width: calc(100% - 600px - 2rem)
+		margin-right: .5rem
+		height: calc(328px + .5rem)
+		display: flex
+		flex-direction: column
+		justify-content: space-between
 
-	#banners .banner-button-group {
-		position: absolute;
-		right: 2rem;
-		top: 2rem;
+	div#banners
 		display: flex
-	}
-
-	#banners .banner-button {
-		padding: 8px 12px;
-		background: var(--sco-fontcolor);
-		border-radius: 12px;
-		color: var(--sco-card-bg);
-		display: flex;
-		align-items: center;
-		z-index: 1;
-		transition: .3s;
-		cursor: pointer;
-		box-shadow: var(--sco-shadow-black)
-	}
-
-	#banners .banner-button.secondary {
-		background: var(--sco-secondbg);
-		border: var(--style-border-always);
-		color: var(--sco-lighttext);
-		margin-right: 1rem;
+		width: 100%
+		height: 76%
+		background: var(--sco-card-bg)
+		margin-bottom: .5rem
+		border: var(--style-border)
+		border-radius: 12px
+		overflow: hidden
+		position: relative
 		box-shadow: var(--sco-shadow-border)
-	}
-
-	#banners .banner-button:hover {
-		background: var(--sco-theme);
-		color: var(--sco-white)
-	}
-
-	#banners .banner-button i {
-		margin-right: 8px;
-		font-size: 1rem
-	}
-
-	.banners-title {
-		top: 2rem;
-		left: 1.5rem;
-		position: absolute;
-		display: flex;
 		flex-direction: column
-	}
-
-	.flink .banners-title {
-		top: 1.5rem
-	}
-
-	.banners-title-big {
-		font-size: 36px;
-		line-height: 1;
-		font-weight: 700;
-		margin-bottom: 8px
-	}
-
-	.banners-title-small {
-		font-size: 12px;
-		line-height: 1;
-		color: var(--sco-secondtext);
-		margin-top: 8px;
-		margin-bottom: .5rem
-	}
-
-	#banner-hover {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0;
-		background: var(--sco-theme);
-		color: var(--sco-white);
-		padding-left: .5rem;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		opacity: 0;
-		transition: cubic-bezier(.71, .15, .16, 1.15) .6s
-	}
-
-	.bannerText {
-		font-size: 4rem;
-		line-height: 4rem;
-		font-weight: 700
-	}
-
-	.banner-righticon {
-		font-size: 4rem;
-		opacity: .6
-	}
-
-	#banners:hover #banner-hover {
-		opacity: 1;
-		padding-left: 2rem;
-		background: var(--sco-theme-op-deep);
-		backdrop-filter: blur(15px);
-		-webkit-backdrop-filter: blur(15px);
-		transform: translateZ(0);
-		-webkit-backface-visibility: hidden;
-		-webkit-transform-style: preserve-3d;
-		transition: .3s;
-		background-size: 200%;
-		cursor: pointer
-	}
-
-	#banners #banner-hover i {
-		font-size: 80px;
-		opacity: .4
-	}
-
-	.topGroup .todayCard {
-		position: absolute;
-		width: calc(600px + 1rem);
-		height: 100%;
-		z-index: 1;
-		top: 0;
-		left: 0;
-		background: var(--sco-card-bg);
-		border-radius: 12px;
-		margin-left: .5rem;
-		overflow: hidden;
-		transition: .3s;
-		display: flex;
-		cursor: pointer;
-		pointer-events: all
-	}
-
-	.topGroup .todayCard::after {
-		position: absolute;
-		content: '';
-		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0
-	}
-
-	.topGroup .todayCard.hide {
-		opacity: 0;
-		pointer-events: none
-	}
-
-	.topGroup .todayCard .todayCard-info {
-		position: absolute;
-		bottom: 2rem;
-		left: 2rem;
-		z-index: 2;
-		color: var(--sco-white);
-		max-width: 60%;
-		transition: .3s
-	}
-
-	.topGroup .todayCard.hide .todayCard-info {
-		bottom: 1rem;
-		opacity: 0
-	}
-
-	.topGroup .todayCard .todayCard-info .todayCard-tips {
-		opacity: .8;
-		font-size: .6rem
-	}
-
-	.topGroup .todayCard .todayCard-info .todayCard-title {
-		font-size: 28px;
-		font-weight: 700;
-		line-height: 36px
-	}
-
-	.topGroup .banner-button-group {
-		position: absolute;
-		right: 2rem;
-		bottom: 2rem;
-		display: flex;
 		transition: .3s
-	}
-
-	.topGroup .todayCard.hide .banner-button-group {
-		bottom: 1rem
-	}
-
-	.topGroup .banner-button {
-		background: var(--sco-white-op);
-		border-radius: 20px;
-		color: var(--sco-white);
-		display: flex;
-		align-items: center;
-		z-index: 1;
-		transition: .3s;
-		cursor: pointer;
-		backdrop-filter: saturate(180%) blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		transform: translateZ(0);
-		height: 40px;
-		width: 118px;
-		justify-content: center
-	}
-
-	.topGroup .banner-button:hover {
-		background: var(--sco-theme);
-		color: var(--sco-white)
-	}
-
-	.topGroup .banner-button i {
-		margin-right: 8px;
-		font-size: 22px
-	}
-
-	.topGroup .todayCard .todayCard-cover {
-		position: absolute;
-		min-width: 100%;
-		min-height: 100%;
-		top: 0;
-		left: 0;
-		background-size: cover;
-		z-index: -1;
-		transition: .3s
-	}
-
-	.topGroup .todayCard.hide .todayCard-cover {
-		transform: scale(1.2)
-	}
-}
+		will-change: transform
+		animation: slide-in .6s .1s backwards
 
-.tags-group-icon {
-	width: 120px;
-	height: 120px;
+		&:hover
+			box-shadow: var(--sco-shadow-main)
+
+		&.flink
+			margin-bottom: .5rem
+
+		.banner-button-group
+			position: absolute
+			right: 2rem
+			top: 2rem
+			display: flex
+
+		.banner-button
+			padding: 8px 12px
+			background: var(--sco-fontcolor)
+			border-radius: 12px
+			color: var(--sco-card-bg)
+			display: flex
+			align-items: center
+			z-index: 1
+			transition: .3s
+			cursor: pointer
+			box-shadow: var(--sco-shadow-black)
+
+			&.secondary
+				background: var(--sco-secondbg)
+				border: var(--style-border-always)
+				color: var(--sco-lighttext)
+				margin-right: 1rem
+				box-shadow: var(--sco-shadow-border)
+
+			&:hover
+				background: var(--sco-theme)
+				color: var(--sco-white)
+
+			i
+				margin-right: 8px
+				font-size: 1rem
+
+		.banners-title
+			top: 2rem
+			left: 1.5rem
+			position: absolute
+			display: flex
+			flex-direction: column
+
+			&-big
+				font-size: 36px
+				line-height: 1
+				font-weight: 700
+				margin-bottom: 8px
+
+			&-small
+				font-size: 12px
+				line-height: 1
+				color: var(--sco-secondtext)
+				margin-top: 8px
+				margin-bottom: .5rem
+
+		#banner-hover
+			position: absolute
+			width: 100%
+			height: 100%
+			top: 0
+			left: 0
+			background: var(--sco-theme)
+			color: var(--sco-white)
+			padding-left: .5rem
+			display: flex
+			flex-direction: column
+			justify-content: center
+			opacity: 0
+			transition: cubic-bezier(.71, .15, .16, 1.15) .6s
+
+			i
+				font-size: 80px
+				opacity: .4
+
+		&:hover
+			#banner-hover
+				opacity: 1
+				padding-left: 2rem
+				background: var(--sco-theme-op-deep)
+				backdrop-filter: blur(15px)
+				-webkit-backdrop-filter: blur(15px)
+				transform: translateZ(0)
+				-webkit-backface-visibility: hidden
+				-webkit-transform-style: preserve-3d
+				transition: .3s
+				background-size: 200%
+				cursor: pointer
+
+		.flink
+			.banners-title
+				top: 1.5rem
+
+		.bannerText
+			font-size: 4rem
+			line-height: 4rem
+			font-weight: 700
+
+		.banner-righticon
+			font-size: 4rem
+			opacity: .6
+
+.tags-group-icon
+	width: 120px
+	height: 120px
 	border-radius: 30px
-}
+	display: flex
+	align-items: center
+	justify-content: center
+	color: #fff
+	font-size: 66px
+	font-weight: 700
+	box-shadow: var(--sco-shadow-blackdeep)
 
-.tags-group-all {
-	display: flex;
+	img
+		width: 60%
+
+.tags-group-all
+	display: flex
 	transform: rotate(-30deg)
-}
 
-.tags-group-all.nowrapMove {
-	transform: rotate(0);
-	padding-bottom: 2rem
-}
+	&.nowrapMove
+		transform: rotate(0)
+		padding-bottom: 2rem
 
-.tags-group-wrapper {
-	margin-top: 5rem;
-	display: flex;
-	flex-wrap: nowrap;
+.tags-group-wrapper
+	margin-top: 5rem
+	display: flex
+	flex-wrap: nowrap
 	animation: rowup 60s linear infinite
-}
-
-.nowrapMove .tags-group-wrapper {
-	margin-top: 7rem;
-	animation: rowup 120s linear infinite
-}
 
-.tags-group-icon-pair .tags-group-icon:nth-child(even) {
-	margin-top: 1rem;
-	transform: translate(-60px)
-}
+	.nowrapMove &
+		margin-top: 7rem
+		animation: rowup 120s linear infinite
 
-.tags-group-icon-pair {
-	margin-left: 1rem;
+.tags-group-icon-pair
+	margin-left: 1rem
 	user-select: none
-}
-
-.tags-group-icon-pair a img {
-	border-radius: 50% !important
-}
-
-.tags-group-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: #fff;
-	font-size: 66px;
-	font-weight: 700;
-	box-shadow: var(--sco-shadow-blackdeep)
-}
-
-.nowrapMove .tags-group-icon {
-	border-radius: 50%
-}
-
-.tags-group-icon img {
-	width: 60%
-}
-
-.nowrapMove .tags-group-icon img {
-	min-width: 100%;
-	min-height: 100%;
-	border-radius: 50%;
-	object-fit: cover
-}
-
-#categoryList > div:nth-child(1) > a::before {
-	height: 24px;
-	width: 44px;
-	content: "";
-	background-size: 38px 24px;
-	position: absolute;
-	top: 0;
-	left: 0
-}
-
-.categoryItem:hover i {
-	opacity: .8;
-	transition: .8s;
-	transition-delay: .15s;
-	transform: scale(1.03) rotate(0);
-	font-size: 2.5rem;
+
+	.tags-group-icon:nth-child(even)
+		margin-top: 1rem
+		transform: translate(-60px)
+
+	a img
+		border-radius: 50% !important
+
+.nowrapMove
+	.tags-group-icon
+		border-radius: 50%
+
+		img
+			min-width: 100%
+			min-height: 100%
+			border-radius: 50%
+			object-fit: cover
+
+#categoryList
+	> div:nth-child(1) > a::before
+		height: 24px
+		width: 44px
+		content: ""
+		background-size: 38px 24px
+		position: absolute
+		top: 0
+		left: 0
+
+	> a:nth-child(0) > i
+		padding-right: 8px
+
+.categoryItem:hover i
+	opacity: .8
+	transition: .8s
+	transition-delay: .15s
+	transform: scale(1.03) rotate(0)
+	font-size: 2.5rem
 	filter: blur(0)
-}
 
-@media screen and (min-width: 1300px) {
-	.categoryItem:hover i {
+	@media screen and (min-width: 1300px)
 		transform: scale(1.03) rotate(0)
-	}
-}
 
-#categoryList > a:nth-child(0) > i {
-	padding-right: 8px
-}
-
-.cate-button-text {
+.cate-button-text
 	box-shadow: var(--sco-shadow-black)
-}
 
-@media screen and (max-width: 768px) {
-	div#categoryList {
-		display: none
-	}
-}
\ No newline at end of file
+@media screen and (max-width: 768px)
+	div#categoryList
+		display: none
\ No newline at end of file
diff --git a/source/css/_page/index.styl b/source/css/_page/index.styl
index 07656a3d..81cb9edd 100644
--- a/source/css/_page/index.styl
+++ b/source/css/_page/index.styl
@@ -55,4 +55,5 @@
   background 0 0
   border none
   padding 0
-  box-shadow none
\ No newline at end of file
+  box-shadow none
+  min-height calc(100vh - 464px)
\ No newline at end of file
diff --git a/source/css/_page/moment.styl b/source/css/_page/moment.styl
index 8f9c70e1..3689b046 100644
--- a/source/css/_page/moment.styl
+++ b/source/css/_page/moment.styl
@@ -38,178 +38,149 @@
 .title-h2-a a.random-post-start
   opacity .6
 
-.moments-list {
-  display: flex;
+.moments-list
+  display: flex
   flex-direction: column
-}
 
-.moments-list .article-sort-item-info {
-  display: flex;
-  flex-direction: column
-}
+  .article-sort-item-info
+    display: flex
+    flex-direction: column
 
-.moments-list .article-sort-item-info .article-sort-item-title {
-  color: var(--sco-lighttext)
-}
+    .article-sort-item-title
+      color: var(--sco-lighttext)
 
-.moments-list .article-sort-item-info .article-sort-item-title:hover {
-  color: var(--sco-hovertext)
-}
+      &:hover
+        color: var(--sco-hovertext)
 
-#friend_link_moments {
+#friend_link_moments
   border: none !important
-}
 
-.moments-article-img {
-  height: 100%;
+.moments-article-img
+  height: 100%
   margin: 0 !important
-}
-
-.tab-item-content #moments_container .moments-item a {
-  border-bottom: none;
-  padding: 0;
-  margin-right: auto;
-  width: auto
-}
-
-.tab-item-content #moments_container .moments-item a:hover {
-  background: 0 0;
-  color: var(--sco-lighttext);
-  box-shadow: none
-}
-
-.tab-item-content #moments_container h2 {
-  display: none
-}
 
-#friend_moments_list .moments-sort-item {
-  margin: 1rem 0
-}
+.tab-item-content
+  #moments_container
+    .moments-item
+      a
+        border-bottom: none
+        padding: 0
+        margin-right: auto
+        width: auto
+
+        &:hover
+          background: 0 0
+          color: var(--sco-lighttext)
+          box-shadow: none
+
+    h2
+      display: none
 
-.moments-sort-item-img {
+#friend_moments_list
+  .moments-sort-item
+    margin: 1rem 0
+
+.moments-sort-item-img
   border-radius: 12px
-}
 
-.moments-item-time {
+.moments-item-time
   order: 1
-}
 
-.moments-sort-item-title {
-  color: var(--sco-lighttext);
-  border-bottom: none !important;
+.moments-sort-item-title
+  color: var(--sco-lighttext)
+  border-bottom: none !important
   padding: 0 !important
-}
 
-.moments-sort-item-title:hover {
-  color: var(--sco-hovertext) !important;
-  background: 0 0 !important;
-  box-shadow: none !important
-}
-
-.moments_load_button {
-  color: var(--sco-fontcolor) !important;
-  background: var(--sco-card-btn-bg) !important;
-  padding: 12px 16px !important;
-  border-radius: 12px !important;
-  transition: .3s;
-  width: 100%;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  border: 0 !important
-}
+  &:hover
+    color: var(--sco-hovertext) !important
+    background: 0 0 !important
+    box-shadow: none !important
 
-.moments_load_button:hover {
-  color: var(--sco-white) !important;
-  background: var(--sco-main) !important;
+.moments_load_button
+  color: var(--sco-fontcolor) !important
+  background: var(--sco-card-btn-bg) !important
+  padding: 12px 16px !important
+  border-radius: 12px !important
   transition: .3s
-}
-
-.moments-item-title {
-  color: var(--sco-lighttext);
-  font-size: 1rem;
-  order: 0;
-  width: 100%;
-  font-weight: 700;
-  -webkit-line-clamp: 1 !important;
-  overflow: hidden;
+  width: 100%
+  margin-top: 1rem
+  margin-bottom: 1rem
+  border: 0 !important
+
+  &:hover
+    color: var(--sco-white) !important
+    background: var(--sco-main) !important
+    transition: .3s
+
+.moments-item-title
+  color: var(--sco-lighttext)
+  font-size: 1rem
+  order: 0
+  width: 100%
+  font-weight: 700
+  -webkit-line-clamp: 1 !important
+  overflow: hidden
   -webkit-box-orient: vertical
-}
 
-.moments-item-info {
-  display: flex;
+.moments-item-info
+  display: flex
   flex-direction: column
-}
 
-.moments_post_time {
+.moments_post_time
   display: none
-}
 
-.moments_post_time i {
-  margin-right: 8px
-}
+  i
+    margin-right: 8px
 
-.moments-item-title {
+.moments-item-title
   font-weight: 700
-}
 
-.moments_post_info_number {
+.moments_post_info_number
   float: right
-}
 
-.moments-item-img {
-  width: 60px !important;
+.moments-item-img
+  width: 60px !important
   height: 60px !important
-}
 
-.moments-item-img img {
-  border-radius: 99px;
-  width: 80px;
-  height: 80px;
-  overflow: hidden
-}
+  img
+    border-radius: 99px
+    width: 80px
+    height: 80px
+    overflow: hidden
 
-.moments-item {
-  margin-left: 0 !important;
+.moments-item
+  margin-left: 0 !important
   box-shadow: none !important
-}
 
-#hexo-circle-of-friends-root {
+#hexo-circle-of-friends-root
   margin: 0 -8px
-}
 
-#cf-container a {
-  width: fit-content
-}
+#cf-container
+  a
+    width: fit-content
 
-.title-h2-a {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.title-h2-a
+  display: flex
+  align-items: center
+  justify-content: space-between
   margin-top: .5rem
-}
 
-.title-h2-a a {
-  margin-left: .5rem;
-  color: var(--sco-secondtext);
-  font-weight: 700
-}
+  a
+    margin-left: .5rem
+    color: var(--sco-secondtext)
+    font-weight: 700
 
-.title-h2-a a:hover {
-  color: var(--sco-hovertext)
-}
-
-.title-h2-a-left {
-  display: flex;
-  align-items: center
-}
+    &:hover
+      color: var(--sco-hovertext)
 
-.title-h2-a-left h2 {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important
-}
+  .title-h2-a-left
+    display: flex
+    align-items: center
 
-.title-h2-a-right {
-  font-size: 14px;
-  color: var(--sco-secondtext)
-}
+    h2
+      margin-top: 0 !important
+      margin-bottom: 0 !important
 
+  .title-h2-a-right
+    font-size: 14px
+    color: var(--sco-secondtext)
\ No newline at end of file
diff --git a/source/css/_page/rss.styl b/source/css/_page/rss.styl
index e83be183..bd2910e3 100644
--- a/source/css/_page/rss.styl
+++ b/source/css/_page/rss.styl
@@ -84,4 +84,4 @@ img.rss-plan-icon
 
 .rss-plan-info
   width fit-content
-  opacity .6
+  opacity .6
\ No newline at end of file
diff --git a/source/css/_post/index.styl b/source/css/_post/index.styl
index dbc42d95..c6528e38 100644
--- a/source/css/_post/index.styl
+++ b/source/css/_post/index.styl
@@ -1,975 +1,919 @@
-#post .tag_share .post-meta__tags span.tags-punctuation {
-  font-size: 12px;
-  margin-right: 1px;
-  display: flex;
-  align-items: center
-}
-
-#post .tag_share .post_share {
-  display: inline-block;
-  float: right;
-  margin: .4rem 0;
-  width: fit-content
-}
-
-#post .tag_share .post_share .social-share {
-  font-size: .85em
-}
-
-#post .tag_share .post_share .social-share .social-share-icon {
-  margin: 0 4px;
-  width: 1.85em;
-  height: 1.85em;
-  font-size: 1.2em;
-  line-height: 1.85em
-}
-
-#post .post-copyright::before {
-  position: absolute;
-  top: .1rem;
-  right: .6rem;
-  color: #307af6;
-  content: "";
-  font-size: 1rem
-}
-
-#post .post-copyright .post-copyright-meta {
-  color: #307af6;
-  font-weight: 700
-}
-
-#post .post-copyright .post-copyright-info {
-  padding-left: .3rem
-}
-
-#post .post-copyright .post-copyright-info a {
-  text-decoration: none;
-  word-break: break-word;
-  color: #3b82ff;
-  padding: 0 4px;
-  border-radius: 4px
-}
-
-#post .post-copyright .post-copyright-info a:hover {
-  text-decoration: none;
-  background-color: var(--sco-main);
-  color: var(--sco-white);
-  cursor: pointer;
-  border-radius: 4px
-}
-
-#post .post-outdate-notice {
-  position: relative;
-  margin: 0 0 1rem;
-  border-radius: 3px;
-  background-color: #ffe6e6;
-  color: #f66;
-  padding: .5em 1em .5em 2.6em;
-  border-left: 5px solid #ff8080
-}
-
-#post .post-outdate-notice::before {
-  position: absolute;
-  top: 50%;
-  left: .9em;
-  color: #ff8080;
-  content: "";
-  transform: translateY(-50%)
-}
-
-#post .ads-wrap {
-  margin: 2rem 0
-}
+#post
+  .tag_share
+    .post-meta__tags
+      span.tags-punctuation
+        font-size 12px
+        margin-right 1px
+        display flex
+        align-items center
+
+    .post_share
+      display inline-block
+      float right
+      margin .4rem 0
+      width fit-content
+
+      .social-share
+        font-size .85em
+
+        .social-share-icon
+          margin 0 4px
+          width 1.85em
+          height 1.85em
+          font-size 1.2em
+          line-height 1.85em
+
+  .post-copyright
+    &:before
+      position absolute
+      top .1rem
+      right .6rem
+      color #307af6
+      content ""
+      font-size 1rem
+
+    .post-copyright__notice
+      font-size: 12px;
+      margin: 0.5rem 0;
+
+    .post-copyright-meta
+      color #307af6
+      font-weight 700
+
+    .post-copyright-info
+      padding-left 0
+
+      a
+        text-decoration none
+        word-break break-word
+        padding 0 4px
+        border-radius 4px
+
+        &:hover
+          text-decoration none
+          background-color var(--sco-main)
+          color var(--sco-white)
+          cursor pointer
+          border-radius 4px
+
+  .post-outdate-notice
+    position relative
+    margin 0 0 1rem
+    border-radius 3px
+    background-color #ffe6e6
+    color #f66
+    padding .5em 1em .5em 2.6em
+    border-left 5px solid #ff8080
+
+    &:before
+      position absolute
+      top 50%
+      left .9em
+      color #ff8080
+      content ""
+      transform translateY(-50%)
+
+  .ads-wrap
+    margin 2rem 0
 
 // post-meta
-#post-meta .post-meta-date {
-  opacity: .6
-}
-
-#post-info #post-meta > .meta-secondline > span:first-child {
-  margin-right: .8rem
-}
-
-.post-meta-date .far {
-  opacity: .6
-}
-
-.post-meta-date .article-meta-label {
-  display: none
-}
-
-.post-meta-date {
-  margin-right: .8rem
-}
-
-#post-firstinfo .post-meta__tags {
-  color: var(--sco-white);
-  opacity: .8;
-  margin-right: 8px
-}
-
-#post-firstinfo .post-meta__tags:hover {
-  color: var(--sco-white);
-  opacity: 1
-}
-
-span.post-meta-categories {
-  background-color: var(--sco-white-op);
-  padding: 0 .5rem;
-  border-radius: 8px;
-  line-height: 32px;
-  height: 32px;
-  transition: .3s
-}
-
-span.post-meta-categories:not(:first-child) {
-  margin-left: 8px
-}
-
-span.post-meta-categories:hover {
-  background-color: var(--sco-white)
-}
-
-a.post-meta-categories {
-  color: var(--sco-white);
-  font-size: .7rem;
-  width: 100%;
-  height: 100%;
-  display: flex
-}
-
-span.post-meta-categories:hover a.post-meta-categories {
-  color: var(--sco-main)
-}
-
-.meta-firstline .tag_share {
-  margin-left: 1rem
-}
-
-#post-firstinfo .meta-firstline {
-  display: flex;
-  align-items: center;
-  height: 32px
-}
-
-@media screen and (max-width: 768px) {
-  #post-firstinfo .meta-firstline {
-    margin-bottom: .4rem
-  }
-}
-
-.meta-avatar img {
-  width: 30px;
-  border-radius: 30px;
-  height: 30px
-}
-
-a.post-meta-original {
-  background: var(--sco-white-op) !important;
-  color: var(--sco-white) !important;
-  padding: 0 .5rem;
-  font-size: .7rem;
-  margin: auto;
-  border-radius: 8px;
-  font-weight: 700;
-  line-height: 32px;
-  width: 100%;
-  height: 100%;
-  display: flex
-}
-
-a.post-meta-original:hover {
-  color: var(--sco-main) !important;
-  background: var(--sco-white) !important;
-  border-radius: 8px !important
-}
-
-.meta-avatar img:hover {
-  transform: rotate(360deg)
-}
-
-@media screen and (max-width: 768px) {
-  .meta-share-time {
-    display: none !important
-  }
-
-  #post-info #post-meta {
-    z-index: 1
-  }
-
-  #post-info:after {
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    bottom: 0;
-    left: 0;
-    box-shadow: 0 -214px 287px 45px var(--sco-main) inset;
-    z-index: 0
-  }
-
-  .meta-secondline {
-    justify-content: center !important
-  }
-
-  .post-meta__tag-list {
-    display: none
-  }
-
-  .typed-cursor {
-    display: none
-  }
-
-  .meta-avatar {
-    display: none !important
-  }
-
-  #post-firstinfo {
-    white-space: nowrap;
-    margin: 0 auto;
-    z-index: 1
-  }
-
-  .meta-firstline .tag_share {
-    display: none
-  }
-}
-
-.post-meta__tag-list::-webkit-scrollbar {
-  display: none
-}
-
-.meta-share-time a:hover {
-  background: 0 0 !important
-}
-
-.meta-share-time .meta-avatar-name {
-  opacity: 1;
-  color: var(--sco-white) !important;
-  font-weight: 700
-}
-
-.meta-share-time {
-  display: flex
-}
-
-.meta-share-time .meta-info {
-  margin: 0 .5rem
-}
-
-.meta-secondline {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center
-}
-
-.meta-avatar {
-  display: flex
-}
-
-.meta-avatar .meta-avatar-name {
-  margin: 0 .5rem
-}
-
-#post-info #post-meta i {
-  font-size: 16px;
-  margin-right: 4px
-}
-
-span.post-meta-pv-cv {
-  margin-left: .8rem
-}
-
-span.post-meta-wechat {
-  margin-right: .8rem;
-  opacity: .6;
-  transition: .3s;
-  cursor: pointer
-}
-
-.post-meta-wechat:hover {
-  opacity: 1
-}
-
-span.post-meta-position {
-  margin-right: .8rem;
-  opacity: .6
-}
-
-#post-info #post-meta .post-meta-label {
-  display: none
-}
-
-#post-info #post-meta .post-meta-icon {
-  margin-right: .4rem
-}
-
-#post-info #post-meta .post-meta-separator {
-  margin: 0 .4rem
-}
-
-.post-meta-pv-cv #busuanzi_value_page_pv {
-  font-weight: 800
-}
-
-#post-meta > div > span.post-meta-wordcount > span.word-count {
-  font-weight: 800
-}
-
-#post-meta > div > span.post-meta-wordcount > span:nth-child(7) {
-  font-weight: 800
-}
-
-#post-firstinfo > div > span.post-meta-categories > a {
-  font-weight: 800
-}
-
-.post-meta-wordcount {
-  opacity: .6;
-  margin-right: .8rem
-}
-
-@media screen and (max-width: 768px) {
-  .post-meta-wordcount {
-    margin-left: 0
-  }
-}
-
-.post-meta-pv-cv {
-  opacity: .6
-}
-
-.post-meta-pv {
-  opacity: .6;
-  margin-right: .8rem
-}
-
-.post-meta-commentcount {
-  opacity: .6;
-  cursor: pointer;
-  transition: .3s
-}
-
-.post-meta-commentcount:hover {
-  opacity: 1
-}
-
-#twikoo-count {
-  font-weight: 800;
-  color: var(--sco-white)
-}
-
-.el-textarea .el-input__count {
-  color: var(--sco-secondtext) !important;
-  -webkit-user-select: none
-}
-
-.post-meta-commentcount i {
-  margin-right: .5rem
-}
-
-#post-meta > div {
-  text-align: left
-}
-
-#post-info #post-meta {
-  color: var(--sco-white);
-  margin-top: .4rem;
-  transition: .3s;
-  display: flex;
-  -webkit-user-select: none
-}
-
-#post-info #post-meta a {
-  text-decoration: none;
-  color: var(--sco-fontcolor);
-  line-height: 1
-}
-
-#post-info #post-meta a:hover {
-  text-decoration: none;
-  color: var(--sco-blue);
-  border-radius: 12px
-}
-
-#post .tag_share .post-meta__tags {
-  background: var(--sco-card-bg);
-  border: var(--style-border-always);
-  color: var(--sco-fontcolor);
-  border-radius: 8px;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  height: 40px;
-  padding: 0 .6rem;
-  width: fit-content;
-  font-size: .85em;
-  transition: all .2s ease-in-out 0s
-}
-
-#post .tag_share .post-meta__tags:hover {
-  background: var(--sco-lighttext);
-  box-shadow: var(--sco-shadow-main);
-  color: var(--sco-white)
-}
-
-@media screen and (min-width: 1300px) {
-  #post .tag_share .post-meta__tags {
-    background: var(--sco-card-bg);
-    border: var(--style-border)
-  }
-
-  #post .tag_share .post-meta__tags:hover {
-    border: var(--style-border-hover)
-  }
-}
-
-// post copyright
-#post .post-copyright {
-  background: var(--sco-secondbg);
-  border-width: 1px;
-  transition: .3s;
-  position: relative;
-  margin: 80px 0 30px;
-  border-radius: 12px;
-  padding: 34px 0 20px 0;
-  border: var(--style-border-always)
-}
-
-@media screen and (max-width: 768px) {
-  #post .post-copyright {
-    padding: 1rem 1.3rem
-  }
-}
-
-.post-copyright__author_img {
-  width: 66px;
-  height: 66px;
-  margin: auto;
-  border-radius: 66px;
-  overflow: hidden;
-  position: absolute;
-  left: calc(50% - 33px);
-  top: -33px;
-  border: var(--style-border-always);
-  box-shadow: var(--sco-shadow-main)
-}
-
-.post-copyright__author_img img {
-  position: absolute;
-  bottom: 0;
-  left: 0
-}
-
-img.post-copyright__author_img_back {
-  border-radius: 66px;
-  z-index: 10
-}
-
-img.post-copyright__author_img_front {
-  z-index: 20;
-  transform: scale(1.2) translateY(6px)
-}
-
-.post-copyright__author_img:hover img.post-copyright__author_img_front {
-  transform: scale(1) translateY(3px)
-}
-
-.post-copyright__author_img:hover img.post-copyright__author_img_back {
-  transform: scale(.8)
-}
-
-.post-copyright__author_name {
-  text-align: center;
-  font-size: 20px;
-  font-weight: 700;
-  margin-top: 16px;
-  color: var(--sco-fontcolor);
-  line-height: 1
-}
-
-.post-copyright__author_desc {
-  text-align: center;
-  font-size: 14px;
-  color: var(--sco-secondtext);
-  margin-top: 4px
-}
-
-.post-copyright__author {
-  display: flex;
-  align-items: center
-}
-
-.post-copyright__original {
-  background: var(--sco-fontcolor);
-  color: var(--sco-card-bg);
-  padding: .2rem .5rem;
-  font-size: .7rem;
-  border-radius: 8px;
-  margin-right: .5rem;
-  font-weight: 700;
-  line-height: 1.5;
-  white-space: nowrap;
-  -webkit-user-select: none
-}
-
-.post-copyright__original:hover {
-  background: var(--sco-main);
-  color: var(--sco-white)
-}
-
-@media screen and (max-width: 768px) {
-  #post .post-copyright {
-    background: var(--sco-card-bg);
-    box-shadow: var(--sco-shadow-border)
-  }
-
-  .post-copyright .post-meta-original {
-    display: none
-  }
-
-  .post-copyright__original {
-    display: none
-  }
-}
-
-.post-copyright-copybtn {
-  margin-left: .5rem;
-  color: var(--sco-fontcolor);
-  opacity: .4;
-  transition: .3s
-}
-
-.post-copyright-copybtn:hover {
-  opacity: 1;
-  transition: .3s
-}
-
-.post-copyright-copybtn i {
-  font-size: 16px
-}
-
-#post .post-copyright .post-copyright-info a {
-  padding: 0;
-  color: var(--sco-fontcolor);
-  font-weight: 700
-}
-
-#post .post-copyright .post-copyright__notice .post-copyright-info a {
-  padding: 0 4px
-}
-
-#post .post-copyright .post-copyright-info {
-  padding-left: 0;
-  color: var(--sco-secondtext);
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  text-align: center
-}
-
-#post .post-copyright .post-copyright-title {
-  padding-left: 0;
-  color: var(--sco-fontcolor);
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  font-size: 1rem;
-  font-weight: 700
-}
-
-#post .post-copyright .post-copyright-title:hover {
-  color: var(--sco-lighttext)
-}
-
-#post > div.post-copyright > div.post-copyright__author > span > span {
-  padding: 0;
-  color: var(--sco-fontcolor);
-  font-weight: 700;
-  font-size: 1rem;
-  line-height: 1.38;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical
-}
-
-@media screen and (max-width: 768px) {
-  #post > div.post-copyright > div.post-copyright__author > span > span {
-    -webkit-line-clamp: 3
-  }
-
-  #post .post-copyright .post-copyright-info {
-    -webkit-line-clamp: 2
-  }
-
-  #post .post-copyright .post-copyright-title {
-    -webkit-line-clamp: 3;
-    line-height: 1.2
-  }
-}
-
-#post > div.post-copyright > div.post-copyright__type {
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  margin-top: 4px
-}
-
-#post > div.post-copyright > div.post-copyright__type > span > a {
-  font-size: 14px;
-  opacity: .6;
-  line-height: 16px
-}
-
-#post > div.post-copyright > div.post-copyright__type > span > a:hover {
-  opacity: 1;
-  background: 0 0
-}
-
-#post-copyright-url a {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical
-}
-
-#post > div.post-copyright > div.post-copyright__notice {
-  font-size: 12px;
-  margin: .5rem 0
-}
-
-#post .post-copyright:before {
-  display: none
-}
-
-#post .tag_share .post-meta__tags span.tagsPageCount, #tag-page-tags .tagsPageCount {
-  padding: 2px;
-  background: var(--sco-card-bg);
-  border: var(--style-border-always);
-  min-width: 23px;
-  display: inline-block;
-  border-radius: 4px;
-  text-align: center;
-  font-size: .6rem;
-  color: var(--sco-fontcolor);
-  margin-left: 4px
-}
-
-.hide-aside #page span.tags-punctuation::before {
-  font-size: 22px
-}
-
-span.tags-punctuation::before {
-  content: "\e071";
-  font-family: scoicon, serif !important;
-  font-size: 14px;
-  opacity: .4;
-}
-
-#post .tag_share .post-meta__tag-list {
-  display: flex;
-  padding: 0;
-  width: 100%;
-  flex-wrap: wrap;
-  flex-direction: row
-}
-
-#post .tag_share .post-meta__tag-list a {
-  margin-bottom: 8px;
-  margin-right: 8px
-}
-
-.post-tools {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  margin-top: 8px;
-  flex-wrap: wrap;
-  -webkit-user-select: none
-}
-
-.post-tools-left {
-  white-space: nowrap;
-  display: flex;
-  text-overflow: ellipsis;
-  flex-wrap: wrap
-}
-
-.post-tools-right {
-  padding-right: 0;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  flex-wrap: wrap
-}
-
-@media screen and (max-width: 768px) {
-  .post-tools-left > div {
-    margin: 8px
-  }
-
-  .post-tools-left {
-    white-space: nowrap;
-    display: flex;
-    text-overflow: ellipsis;
-    justify-content: center;
-    width: 100%
-  }
-
-  .post-tools-right {
-    margin-top: 1rem;
-    width: 100%;
-    justify-content: center
-  }
-}
-
-#qrcode {
-  width: 150px;
-  height: 150px;
-  min-width: 150px;
-  min-height: 150px;
-  background: var(--sco-white);
-  padding: 8px;
-  border-radius: 8px;
-  margin-bottom: 8px;
-  border: var(--style-border-always)
-}
-
-.share-link:hover .share-main {
-  opacity: 1;
-  transform: translateY(0)
-}
-
-.share-qrcode {
-  display: flex;
-  justify-content: center
-}
-
-@media screen and (max-width: 768px) {
-  .share-link.mobile {
-    display: none
-  }
-}
-
-.post-qr-code-img {
-  box-shadow: var(--sco-shadow-lightblack);
-  border-radius: 12px;
-  border: var(--style-border-always)
-}
-
-#quit-box {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, .2);
-  top: 0;
-  left: 0;
-  display: none;
-  z-index: 101;
-  margin: 0 !important
-}
-
-.post-tools-left #quit-box {
-  display: none
-}
-
-@media screen and (max-width: 768px) {
-  #quit-box {
-    z-index: 109;
-    height: calc(100vh - 380px);
-  }
-}
-
-#post > hr {
-  display: none
-}
-
-.img-alt {
-  font-size: 12px;
-  margin: 0;
-  color: var(--sco-secondtext)
-}
-
-.long-img .img-alt {
-  display: none
-}
-
-.long-img img {
-  border-radius: 0 !important;
-  margin: 0 !important
-}
-
-.meta-secondline > span {
-  opacity: .6;
-  transition: .3s;
-  margin-right: 1.1rem;
-}
-
-.meta-secondline span {
-  display: flex;
-  align-items: center;
-  line-height: 1
-}
-
-@media screen and (max-width: 768px) {
-  .meta-secondline span {
-    line-height: 1.5
-  }
-}
-
-#post-firstinfo {
-  text-align: left;
-  display: flex;
-  white-space: nowrap;
-  -webkit-user-select: none
-}
-
-.inline-image {
-  display: flex;
-  margin: 8px auto;
-  width: fit-content;
-  justify-content: center
-}
-
-.inline-image a:hover {
-  background: 0 0 !important;
-  box-shadow: none !important
-}
-
-.inline-image img {
-  margin: 0 !important;
-  display: inline-flex;
-}
-
-#post-info .post-title {
-  color: var(--sco-white);
-  font-weight: 700;
-  font-size: 2.3rem;
-  line-height: 1.2;
-  text-align: left;
-  margin: 1rem 0 1rem 0 !important;
-  -webkit-line-clamp: 2;
-  padding: 0;
-  overflow: hidden
-}
-
-@media screen and (max-width: 768px) {
-  #post-info .post-title {
-    font-size: 1.2rem;
-    -webkit-line-clamp: 3;
-    margin: .2rem auto !important;
-    text-align: center;
-    z-index: 1
-  }
-}
-
-.post-bg #post-cover {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  min-width: 50vw;
-  min-height: 20rem;
-  opacity: .8
-}
-
-.coverdiv {
-  width: 70%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  margin: 0 -20% 0 auto;
-  transform: rotate(10deg) translateY(-10%) scale(2);
-  filter: blur(10px)
-}
-
-.coverdiv.loaded {
-  display: block
-}
-
-.coverdiv:after {
-  position: absolute;
-  content: '';
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  box-shadow: 110px -130px 300px 60px var(--sco-main) inset
-}
-
-@media screen and (max-width: 768px) {
-  .coverdiv {
-    margin: 0 0 0 auto;
-    transform: rotate(0) translateY(0) scale(1);
-    filter: blur(0);
-    width: 100%;
-    position: fixed;
-    height: 30rem;
-    z-index: 1
-  }
-
-  .coverdiv:after {
-    box-shadow: 0 0 205px 59px var(--sco-main) inset
-  }
-}
-
-@media screen and (min-width: 1300px) {
-  .coverdiv {
-    width: 70%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    margin: 0 -20% 0 auto;
-    transform: rotate(10deg) translateY(-8%) scale(1.8);
-    filter: blur(10px);
-    opacity: 0
-  }
-
-  .coverdiv.loaded {
-    display: block;
-    opacity: .5;
-    animation: showCover 1s .3s backwards;
-    transform: rotate(10deg) translateY(-10%) scale(2)
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .coverdiv {
-    width: 70%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    margin: 0 -20% 0 auto;
-    transform: rotate(10deg) translateY(-8%) scale(1.8);
-    filter: blur(10px);
-    opacity: 0
-  }
-
-  .coverdiv.loaded {
-    display: block;
-    opacity: .5;
-    animation: showCover 1s .3s backwards;
-    transform: rotate(10deg) translateY(-10%) scale(2)
-  }
-
-  @keyframes showCover {
-    from {
-      opacity: 0;
-      transform: rotate(10deg) translateY(-8%) scale(1.8)
-    }
-
-    to {
-      opacity: .5;
-      transform: rotate(10deg) translateY(-10%) scale(2)
-    }
-  }
-}
-
-#post h2 {
-  margin-top: 1.5rem
-}
+#post-meta
+  .post-meta-date
+    opacity .6
+
+#post-info
+  #post-meta
+    > .meta-secondline
+      > span:first-child
+        margin-right .8rem
+
+.post-meta-date
+  .far
+    opacity .6
+
+  .article-meta-label
+    display none
+
+  margin-right .8rem
+
+#post-firstinfo
+  .post-meta__tags
+    color var(--sco-white)
+    opacity .8
+    margin-right 8px
+    padding 0 8px 0 4px
+    border-radius 12px
+    display flex
+    align-items center
+    flex-direction row
+
+    &:hover
+      color var(--sco-white)
+      opacity 1
+
+span.post-meta-categories
+  background-color var(--sco-white-op)
+  padding 0 .5rem
+  border-radius 8px
+  line-height 32px
+  height 32px
+  transition .3s
+
+  &:not(:first-child)
+    margin-left 8px
+
+  &:hover
+    background-color var(--sco-white)
+
+a.post-meta-categories
+  color var(--sco-white)
+  font-size .7rem
+  width 100%
+  height 100%
+  display flex
+
+span.post-meta-categories:hover
+  a.post-meta-categories
+    color var(--sco-main)
+
+.meta-firstline
+  .tag_share
+    margin-left 1rem
+
+#post-firstinfo
+  .meta-firstline
+    display flex
+    align-items center
+    height 32px
+
+@media screen and (max-width: 768px)
+  #post-firstinfo
+    .meta-firstline
+      margin-bottom .4rem
+
+.meta-avatar
+  img
+    width 30px
+    border-radius 30px
+    height 30px
+
+    &:hover
+      transform rotate(360deg)
+
+a.post-meta-original
+  background var(--sco-white-op) !important
+  color var(--sco-white) !important
+  padding 0 .5rem
+  font-size .7rem
+  margin auto
+  border-radius 8px
+  font-weight 700
+  line-height 32px
+  width 100%
+  height 100%
+  display flex
+
+  &:hover
+    color var(--sco-main) !important
+    background var(--sco-white) !important
+    border-radius 8px !important
+
+@media screen and (max-width: 768px)
+  .meta-share-time
+    display none !important
+
+  #post-info
+    #post-meta
+      z-index 1
+
+    &:after
+      position absolute
+      content ''
+      width 100%
+      height 100%
+      bottom 0
+      left 0
+      box-shadow 0 -214px 287px 45px var(--sco-main) inset
+      z-index 0
+
+  .meta-secondline
+    justify-content center !important
+
+  .post-meta__tag-list
+    display none
+
+  .typed-cursor
+    display none
+
+  .meta-avatar
+    display none !important
+
+  #post-firstinfo
+    white-space nowrap
+    margin 0 auto
+    z-index 1
+
+  .meta-firstline
+    .tag_share
+      display none
+
+.post-meta__tag-list::-webkit-scrollbar
+  display none
+
+.meta-share-time
+  a:hover
+    background 0 0 !important
+
+  .meta-avatar-name
+    opacity 1
+    color var(--sco-white) !important
+    font-weight 700
+
+  display flex
+
+  .meta-info
+    margin 0 .5rem
+
+.meta-secondline
+  display flex
+  flex-direction row
+  flex-wrap wrap
+  justify-content flex-start
+  align-items center
+
+.meta-avatar
+  display flex
+
+  .meta-avatar-name
+    margin 0 .5rem
+
+#post-info
+  #post-meta
+    i
+      font-size 16px
+      margin-right 4px
+
+span.post-meta-pv-cv
+  margin-left .8rem
+
+span.post-meta-wechat
+  margin-right .8rem
+  opacity .6
+  transition .3s
+  cursor pointer
+
+  &:hover
+    opacity 1
+    background var(--sco-white-op);
+
+span.post-meta-position
+  margin-right 12px
+  opacity .6
+
+#post-info
+  #post-meta
+    .post-meta-label
+      display none
+
+    .post-meta-icon
+      margin-right .4rem
+
+    .post-meta-separator
+      margin 0 .4rem
+
+.post-meta-pv-cv
+  #busuanzi_value_page_pv
+    font-weight 800
+
+#post-meta
+  > div
+    > span.post-meta-wordcount
+      > span.word-count
+        font-weight 800
+
+      > span:nth-child(7)
+        font-weight 800
+
+#post-firstinfo
+  > div
+    > span.post-meta-categories
+      > a
+        font-weight 800
+
+.post-meta-wordcount
+  opacity .6
+  margin-right 20px
+
+@media screen and (max-width: 768px)
+  .post-meta-wordcount
+    margin-left 0
+
+.post-meta-pv-cv
+  opacity .6
+
+.post-meta-pv
+  opacity .6
+  margin-right 8px
+  padding 8px
+  display flex
+  align-items center
+  border-radius 12px
+
+  &:hover
+    opacity 1
+    background var(--sco-white-op)
+    text-decoration none
+    color var(--sco-white)
+
+.post-meta-commentcount
+  opacity .6
+  cursor pointer
+  transition .3s
+  border-radius 12px
+  padding 8px
+
+  &:hover
+    opacity 1
+    background var(--sco-white-op)
+
+#twikoo-count
+  font-weight 800
+  color var(--sco-white)
+
+.post-meta-commentcount
+  i
+    margin-right .5rem
+
+#post-meta
+  > div
+    text-align left
+
+#post-info
+  #post-meta
+    margin-top .4rem
+    transition .3s
+    display flex
+    -webkit-user-select none
+
+    a
+      text-decoration none
+      color var(--sco-fontcolor)
+      line-height 1
+
+      &:hover
+        text-decoration none
+
+.hide-aside
+  #page
+    span.tags-punctuation::before
+      font-size 22px
+
+span.tags-punctuation::before
+  content "\e071"
+  font-family scoicon, serif !important
+  font-size 14px
+  opacity .4
+
+#post
+  > hr
+    display none
+
+.img-alt
+  font-size 12px
+  margin 0
+  color var(--sco-secondtext)
+
+.long-img
+  .img-alt
+    display none
+
+  img
+    border-radius 0 !important
+    margin 0 !important
+
+.meta-secondline
+  > span
+    display: flex
+    align-items center
+    line-height 1
+
+@media screen and (max-width: 768px)
+  .meta-secondline
+    span
+      line-height 1.5
+
+#post-firstinfo
+  text-align left
+  display flex
+  white-space nowrap
+  -webkit-user-select none
+
+.inline-image
+  display flex
+  margin 8px auto
+  width fit-content
+  justify-content center
+
+  a:hover
+    background 0 0 !important
+    box-shadow none !important
+
+  img
+    margin 0 !important
+    display inline-flex
+
+.post-bg
+  #post-cover
+    width 100%
+    height 100%
+    object-fit cover
+    min-width 50vw
+    min-height 20rem
+    opacity .8
+
+#post
+  h2
+    margin-top 1.5rem
+
+// 文章底部
+#post
+  .tag_share
+    .post-meta__tags
+      background var(--sco-card-bg)
+      border var(--style-border-always)
+      color var(--sco-fontcolor)
+      border-radius 8px
+      margin 0
+      display flex
+      align-items center
+      white-space nowrap
+      height 40px
+      padding 0 .6rem
+      width fit-content
+      font-size .85em
+      transition all .2s ease-in-out 0s
+
+      &:hover
+        background var(--sco-lighttext)
+        box-shadow var(--sco-shadow-main)
+        color var(--sco-white)
+
+  .post-copyright
+    background var(--sco-secondbg)
+    border-width 1px
+    transition .3s
+    position relative
+    margin 80px 0 30px
+    border-radius 12px
+    padding 34px 0 20px 0
+    border var(--style-border-always)
+
+    &__author_img
+      width 66px
+      height 66px
+      margin auto
+      border-radius 66px
+      overflow hidden
+      position absolute
+      left calc(50% - 33px)
+      top -33px
+      border var(--style-border-always)
+      box-shadow var(--sco-shadow-main)
+
+      img
+        position absolute
+        bottom 0
+        left 0
+
+    &__author_img img
+      position absolute
+      bottom 0
+      left 0
+
+    &__author_img_back
+      border-radius 66px
+      z-index 10
+
+    &__author_img_front
+      z-index 20
+      transform scale(1.2) translateY(6px)
+
+    &__author_img:hover
+      &__author_img_front
+        transform scale(1) translateY(3px)
+
+      &__author_img_back
+        transform scale(.8)
+
+    &__author_name
+      text-align center
+      font-size 20px
+      font-weight 700
+      margin-top 16px
+      color var(--sco-fontcolor)
+      line-height 1
+
+    &__author_desc
+      text-align center
+      font-size 14px
+      color var(--sco-secondtext)
+      margin-top 4px
+
+    &__author
+      display flex
+      align-items center
+
+    &__original
+      background var(--sco-fontcolor)
+      color var(--sco-card-bg)
+      padding .2rem .5rem
+      font-size .7rem
+      border-radius 8px
+      margin-right .5rem
+      font-weight 700
+      line-height 1.5
+      white-space nowrap
+      -webkit-user-select none
+
+      &:hover
+        background var(--sco-main)
+        color var(--sco-white)
+
+    &-copybtn
+      margin-left .5rem
+      color var(--sco-fontcolor)
+      opacity .4
+      transition .3s
+
+      &:hover
+        opacity 1
+        transition .3s
+
+    &-copybtn i
+      font-size 16px
+
+    &-info a
+      padding 0
+      color var(--sco-fontcolor)
+      font-weight 700
+
+    &-info
+      padding-left 0
+      color var(--sco-secondtext)
+      overflow hidden
+      display -webkit-box
+      -webkit-line-clamp 1
+      -webkit-box-orient vertical
+      text-align center
+
+    &-title
+      padding-left 0
+      color var(--sco-fontcolor)
+      overflow hidden
+      display -webkit-box
+      -webkit-line-clamp 1
+      -webkit-box-orient vertical
+      font-size 1rem
+      font-weight 700
+
+      &:hover
+        color var(--sco-lighttext)
+
+    & > div
+      &__author > span > span
+        padding 0
+        color var(--sco-fontcolor)
+        font-weight 700
+        font-size 1rem
+        line-height 1.38
+        overflow hidden
+        display -webkit-box
+        -webkit-line-clamp 1
+        -webkit-box-orient vertical
+
+      &__type
+        line-height 16px
+        display flex
+        align-items center
+        margin-top 4px
+
+      &__type > span > a
+        font-size 14px
+        opacity .6
+        line-height 16px
+
+        &:hover
+          opacity 1
+          background 0 0
+
+    &-url a
+      overflow hidden
+      display -webkit-box
+      -webkit-line-clamp 1
+      -webkit-box-orient vertical
+
+    & > div
+      &__notice
+        font-size 12px
+        margin .5rem 0
+
+    &:before
+      display none
+
+  .tag_share
+    .post-meta__tags
+      span.tagsPageCount, #tag-page-tags .tagsPageCount
+        padding 2px
+        background var(--sco-card-bg)
+        border var(--style-border-always)
+        min-width 23px
+        display inline-block
+        border-radius 4px
+        text-align center
+        font-size .6rem
+        color var(--sco-fontcolor)
+        margin-left 4px
+
+    .post-meta__tag-list
+      display flex
+      padding 0
+      width 100%
+      flex-wrap wrap
+      flex-direction row
+
+      a
+        margin-bottom 8px
+        margin-right 8px
+
+.post-tools
+  display flex
+  width 100%
+  justify-content center
+  margin-top 8px
+  flex-wrap wrap
+  -webkit-user-select none
+
+  &-left
+    white-space nowrap
+    display flex
+    text-overflow ellipsis
+    justify-content center
+    flex-wrap wrap
+
+  &-right
+    padding-right 0
+    display flex
+    align-items center
+    flex-direction row
+    flex-wrap wrap
+
+#qrcode
+  width 150px
+  height 150px
+  min-width 150px
+  min-height 150px
+  background var(--sco-white)
+  padding 8px
+  border-radius 8px
+  margin-bottom 8px
+  border var(--style-border-always)
+
+.post-qr-code-img
+  box-shadow var(--sco-shadow-lightblack)
+  border-radius 12px
+  border var(--style-border-always)
+
+#quit-box
+  position fixed
+  width 100vw
+  height 100vh
+  background rgba(0, 0, 0, .2)
+  top 0
+  left 0
+  display none
+  z-index 101
+  margin 0 !important
+
+.post-tools-left
+  #quit-box
+    display none
+
+@media screen and (min-width: 1300px)
+  #post
+    .tag_share
+      .post-meta__tags
+        background var(--sco-card-bg)
+        border var(--style-border)
+
+        &:hover
+          border var(--style-border-hover)
+
+@media screen and (max-width: 768px)
+  #post
+    .post-copyright
+      background var(--sco-card-bg)
+      box-shadow var(--sco-shadow-border)
+      padding 1rem 1.3rem
+
+    .post-copyright
+      .post-meta-original
+        display none
+
+    .post-copyright__original
+      display none
+
+    > div
+      .post-copyright__author > span > span
+        -webkit-line-clamp 3
+
+    .post-copyright
+      .post-copyright-info
+        -webkit-line-clamp 2
+
+    .post-copyright
+      .post-copyright-title
+        -webkit-line-clamp 3
+        line-height 1.2
+
+  #quit-box
+    z-index 109
+    height calc(100vh - 380px)
+
+  .post-tools-left
+    > div
+      margin 8px
+
+    .post-tools-left
+      white-space nowrap
+      display flex
+      text-overflow ellipsis
+      justify-content center
+      width 100%
+
+// 文章顶部图片
+
+.coverdiv
+  width 70%
+  height 100%
+  position relative
+  overflow hidden
+  margin 0 -20% 0 auto
+  transform rotate(10deg) translateY(-10%) scale(2)
+  filter blur(10px)
+
+.coverdiv.loaded
+  display block
+
+.coverdiv:after
+  position absolute
+  content ''
+  width 100%
+  height 100%
+  top 0
+  left 0
+  box-shadow 110px -130px 300px 60px var(--sco-main) inset
+
+@media screen and (max-width: 768px)
+  .coverdiv
+    margin 0 0 0 auto
+    transform rotate(0) translateY(0) scale(1)
+    filter blur(0)
+    width 100%
+    position fixed
+    height 30rem
+    z-index 1
+
+  .coverdiv:after
+    box-shadow 0 0 205px 59px var(--sco-main) inset
+
+@media screen and (min-width: 1300px)
+  .coverdiv
+    width 70%
+    height 100%
+    position relative
+    overflow hidden
+    margin 0 -20% 0 auto
+    transform rotate(10deg) translateY(-8%) scale(1.8)
+    filter blur(10px)
+    opacity 0
+
+  .coverdiv.loaded
+    display block
+    opacity .5
+    animation showCover 1s .3s backwards
+    transform rotate(10deg) translateY(-10%) scale(2)
+
+@media screen and (min-width: 768px)
+  .coverdiv
+    width 70%
+    height 100%
+    position relative
+    overflow hidden
+    margin 0 -20% 0 auto
+    transform rotate(10deg) translateY(-8%) scale(1.8)
+    filter blur(10px)
+    opacity 0
+
+  .coverdiv.loaded
+    display block
+    opacity .5
+    animation showCover 1s .3s backwards
+    transform rotate(10deg) translateY(-10%) scale(2)
+
+  @keyframes showCover
+    from
+      opacity 0
+      transform rotate(10deg) translateY(-8%) scale(1.8)
+    to
+      opacity .5
+      transform rotate(10deg) translateY(-10%) scale(2)
+
+// 文章顶部内容
+
+#post > #post-info
+  margin-bottom 1.5rem
+
+#post > #post-info .post-title
+  padding-bottom .2rem
+  border-bottom 1px solid var(--light-grey)
+  color var(--text-highlight-color)
+
+#post > #post-info .post-title .post-edit-link
+  float right
+
+#post > #post-info #post-meta, #post > #post-info #post-meta a
+  color #78818a
+  border-radius 12px
+
+#post-info .post-title
+  margin-bottom .4rem
+  color var(--sco-white)
+  font-weight 400
+  font-size 2.5em
+  line-height 1.5
+  -webkit-line-clamp 3
+
+@media screen and (max-width: 768px)
+  #post-info .post-title
+    font-size 1.72em
+
+#post-info .post-title .post-edit-link
+  padding-left .5rem
+
+#post-info #post-meta
+  color var(--light-grey)
+  font-size 95%
+
+@media screen and (min-width: 768px)
+  #post-info #post-meta > .meta-secondline > span:first-child
+    display none
+
+@media screen and (max-width: 768px)
+  #post-info #post-meta
+    font-size 90%
+    padding 0 2rem
+
+#post-info #post-meta .post-meta-separator
+  margin 0 10px
+
+#post-info #post-meta .post-meta-icon
+  margin-right .2rem
+
+#post-info #post-meta .post-meta-label
+  margin-right .2rem
+
+#post-info #post-meta a
+  color var(--light-grey)
+  transition all .3s ease-out 0s
+
+#post-info .post-title
+  color var(--sco-white)
+  font-weight 700
+  font-size 2.3rem
+  line-height 1.2
+  text-align left
+  margin 1rem 0 1rem 0 !important
+  -webkit-line-clamp 2
+  padding 0
+  overflow hidden
+
+@media screen and (max-width: 768px)
+  #post-info .post-title
+    font-size 1.2rem
+    -webkit-line-clamp 3
+    margin .2rem auto !important
+    text-align center
+    z-index 1
+
+.post-bg
+  #post-cover
+    +minWidth768()
+      min-height 15rem !important
+      height 70% !important
+      opacity 1 !important
+
+#post-info
+  .post-title
+    +minWidth1300()
+      width 1100px
+      font-size 2.6rem !important
\ No newline at end of file
diff --git a/source/css/_post/postContent.styl b/source/css/_post/postContent.styl
index a5b09f36..f79fcde8 100644
--- a/source/css/_post/postContent.styl
+++ b/source/css/_post/postContent.styl
@@ -154,128 +154,6 @@
   height: 400px
 }
 
-.article-sort {
-  margin-left: .5rem;
-  padding-left: 1rem;
-  border-left: 2px solid #92b9fa
-}
-
-.article-sort-title::before {
-  position: absolute;
-  top: calc((100% - 1.8rem) / 2);
-  left: -.45rem;
-  z-index: 1;
-  width: .5rem;
-  height: .5rem;
-  border: .25rem solid #307af6;
-  border-radius: .5rem;
-  background: var(--sco-card-bg);
-  content: "";
-  line-height: .5rem;
-  transition: all .2s ease-in-out 0s
-}
-
-.article-sort-title::after {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-  width: .1rem;
-  height: 1.5em;
-  background: #92b9fa;
-  content: ""
-}
-
-.article-sort-item {
-  position: relative;
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  margin: 0 0 1rem .5rem;
-  transition: all .2s ease-in-out 0s
-}
-
-.article-sort-item:hover::before {
-  border-color: #ff7242
-}
-
-.article-sort-item::before {
-  position: absolute;
-  left: calc(-1rem - 17px);
-  width: .3rem;
-  height: .3rem;
-  border: .15rem solid #307af6;
-  border-radius: .3rem;
-  background: var(--sco-card-bg);
-  content: "";
-  transition: all .2s ease-in-out 0s
-}
-
-.article-sort-item.no-article-cover {
-  height: 80px
-}
-
-.article-sort-item.no-article-cover .article-sort-item-info {
-  padding: 0
-}
-
-.article-sort-item.year {
-  font-size: 1.43em
-}
-
-.article-sort-item.year:hover::before {
-  border-color: #307af6
-}
-
-.article-sort-item.year::before {
-  border-color: #ff7242
-}
-
-.article-sort-item-time {
-  color: #858585;
-  font-size: 95%
-}
-
-.article-sort-item-time time {
-  padding-left: .3rem;
-  cursor: default
-}
-
-.article-sort-item-title {
-  color: var(--sco-fontcolor);
-  font-size: 1.1em;
-  transition: all .3s ease 0s;
-  -webkit-line-clamp: 2
-}
-
-.article-sort-item-title:hover {
-  color: #307af6;
-  transform: translateX(10px)
-}
-
-.article-sort-item-img {
-  overflow: hidden;
-  width: 80px;
-  height: 80px
-}
-
-.article-sort-item-img img {
-  width: 100%;
-  height: 100%;
-  transition: all .6s ease 0s;
-  object-fit: cover
-}
-
-.article-sort-item-img img:hover {
-  transform: scale(1.1)
-}
-
-.article-sort-item-info {
-  -webkit-box-flex: 1;
-  flex: 1 1 0;
-  padding: 0 .8rem
-}
-
 #article-container {
   overflow-wrap: break-word
 }
@@ -1035,5 +913,4 @@
   #article-container .author-content-item.single.like-movie .banner-button-group .banner-button-text {
     display: none
   }
-}
-
+}
\ No newline at end of file
diff --git a/source/css/_post/relatedPost.styl b/source/css/_post/relatedPost.styl
index 3498871c..852027b4 100644
--- a/source/css/_post/relatedPost.styl
+++ b/source/css/_post/relatedPost.styl
@@ -1,178 +1,160 @@
-.relatedPosts {
-  margin-top: 2rem;
+.relatedPosts
+  margin-top: 2rem
   -webkit-user-select: none
-}
-
-.relatedPosts > .relatedPosts-list > div {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  margin: 3px;
-  width: calc(33.333% - 6px);
-  height: 200px;
-  background: var(--sco-main);
-  vertical-align: bottom
-}
-
-@media screen and (max-width: 768px) {
-  .relatedPosts > .relatedPosts-list > div {
-    margin: 2px;
-    width: calc(50% - 4px);
-    height: 150px
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .relatedPosts > .relatedPosts-list > div {
-    width: calc(100% - 4px)
-  }
-}
-
-.relatedPosts > .relatedPosts-list .cover {
-  width: 360px;
-  min-width: 45%;
-  height: 100%;
-  transition: all .6s ease 0s;
-  object-fit: cover;
-  filter: brightness(.9);
-  max-width: 45%
-}
-
-.relatedPosts > .relatedPosts-list .content {
-  padding: 0 1rem;
-  width: 100%
-}
-
-.relatedPosts > .relatedPosts-list .content .date {
-  color: var(--light-grey);
-  font-size: 90%
-}
-
-.relatedPosts > .relatedPosts-list .content .title {
-  color: var(--sco-white);
-  -webkit-line-clamp: 2;
-  margin-right: auto
-}
-
-.relatedPosts-link {
-  display: block;
-  justify-content: space-between;
-  margin-left: 8px;
-  font-size: 13px
-}
-
-.relatedPosts > .relatedPosts-list .cover::after {
-  content: ' ';
-  display: block;
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: url(https://bu.dusays.com/2023/03/03/6401a79030db5.png) 50%;
-  background-size: cover
-}
-
-.relatedPosts > .relatedPosts-list a {
-  display: flex;
-  width: 100%;
-  height: 100%
-}
-
-@media screen and (min-width: 768px) {
-  #post > div.relatedPosts > div.relatedPosts-list > div {
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
-  }
-
-  #post > div.relatedPosts > div.relatedPosts-list > div {
-    border-radius: 12px
-  }
-
-  .relatedPosts > .headline {
-    font-size: .8em
-  }
-
-  @media screen and (max-width: 1300px) {
-    #post > div.relatedPosts > div.relatedPosts-list > div:nth-child(7) {
-      display: none
-    }
-
-    #post > div.relatedPosts > div.relatedPosts-list > div:nth-child(8) {
-      display: none
-    }
-  }
-}
-
-.relatedPosts > .headline {
-  margin-bottom: .8rem;
-  font-weight: 700;
-  font-size: 20px;
-  display: flex;
-  align-items: center
-}
-
-.relatedPosts > .headline span {
-  margin-right: auto;
-  margin-left: 8px
-}
-
-.relatedPosts > .headline a {
-  font-weight: 400
-}
-
-.relatedPosts-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+
+  > .relatedPosts-list
+    > div
+      position: relative
+      display: inline-block
+      overflow: hidden
+      margin: 3px
+      width: calc(33.333% - 6px)
+      height: 200px
+      background: var(--sco-main)
+      vertical-align: bottom
+
+    .cover
+      width: 360px
+      min-width: 45%
+      height: 100%
+      transition: all .6s ease 0s
+      object-fit: cover
+      filter: brightness(.9)
+      max-width: 45%
+
+      &::after
+        content: ' '
+        display: block
+        position: absolute
+        z-index: 0
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
+        background: url(https://bu.dusays.com/2023/03/03/6401a79030db5.png) 50%
+        background-size: cover
+
+    .content
+      padding: 0 1rem
+      width: 100%
+
+      .date
+        color: var(--light-grey)
+        font-size: 90%
+
+      .title
+        color: var(--sco-white)
+        -webkit-line-clamp: 2
+        margin-right: auto
+
+    a
+      display: flex
+      width: 100%
+      height: 100%
+
+  > .headline
+    margin-bottom: .8rem
+    font-weight: 700
+    font-size: 20px
+    display: flex
+    align-items: center
+
+    span
+      margin-right: auto
+      margin-left: 8px
+
+    a
+      font-weight: 400
+
+  &-link
+    display: block
+    justify-content: space-between
+    margin-left: 8px
+    font-size: 13px
+
+.relatedPosts-list
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
   flex-direction: column
-}
-
-.relatedPosts > .relatedPosts-list > div {
-  background: var(--sco-secondbg);
-  border: var(--style-border);
-  transition: .3s;
-  cursor: pointer;
-  overflow: hidden;
-  width: 100%;
-  margin-bottom: 8px
-}
-
-.relatedPosts > .relatedPosts-list > div:hover {
-  background: var(--sco-main)
-}
-
-@media screen and (max-width: 768px) {
-  .relatedPosts {
+
+@media screen and (max-width: 768px)
+  .relatedPosts
+    > .relatedPosts-list
+      > div
+        margin: 2px
+        width: calc(50% - 4px)
+        height: 150px
+
+@media screen and (max-width: 600px)
+  .relatedPosts
+    > .relatedPosts-list
+      > div
+        width: calc(100% - 4px)
+
+@media screen and (min-width: 768px)
+  #post
+    > div.relatedPosts
+      > div.relatedPosts-list
+        > div
+          -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+          border-radius: 12px
+
+  .relatedPosts
+    > .headline
+      font-size: .8em
+
+  @media screen and (max-width: 1300px)
+    #post
+      > div.relatedPosts
+        > div.relatedPosts-list
+          > div:nth-child(7)
+            display: none
+
+          > div:nth-child(8)
+            display: none
+
+.relatedPosts
+  > .relatedPosts-list
+    > div
+      background: var(--sco-secondbg)
+      border: var(--style-border)
+      transition: .3s
+      cursor: pointer
+      overflow: hidden
+      width: 100%
+      margin-bottom: 8px
+
+      &:hover
+        background: var(--sco-main)
+
+      .content
+        .title
+          color: var(--sco-fontcolor)
+          font-weight: 700
+          line-height: 1.5
+          -webkit-line-clamp: 4
+          font-size: .9rem
+          text-align: left
+          overflow: hidden
+
+        .date
+          color: var(--sco-fontcolor)
+          display: none
+
+      &:hover
+        a
+          .title
+            color: var(--sco-white)
+
+@media screen and (max-width: 768px)
+  .relatedPosts
     display: none
-  }
-
-  .relatedPosts > .relatedPosts-list > div {
-    border-radius: 4px
-  }
-}
-
-.relatedPosts > .relatedPosts-list > div:hover a .title {
-  color: var(--sco-white)
-}
-
-.relatedPosts > .relatedPosts-list .content .title {
-  color: var(--sco-fontcolor);
-  font-weight: 700;
-  line-height: 1.5;
-  -webkit-line-clamp: 4;
-  font-size: .9rem;
-  text-align: left;
-  overflow: hidden
-}
-
-.relatedPosts > .relatedPosts-list .content .date {
-  color: var(--sco-fontcolor);
-  display: none
-}
-
-@media screen and (min-width: 768px) {
-  .relatedPosts {
-    margin-top: 1rem
-  }
-}
\ No newline at end of file
+
+    > .relatedPosts-list
+      > div
+        border-radius: 4px
+
+@media screen and (min-width: 768px)
+  .relatedPosts
+    margin-top: 1rem
\ No newline at end of file
diff --git a/source/css/_post/reward.styl b/source/css/_post/reward.styl
index b25057e5..1550ddec 100644
--- a/source/css/_post/reward.styl
+++ b/source/css/_post/reward.styl
@@ -1,236 +1,217 @@
-.reward-main {
+.reward-main
   animation: .3s ease .1s 1 normal both running donate_effcet
-}
-
-.post-reward {
-   position: relative;
-   margin-top: 4rem;
-   text-align: center
- }
-
-.post-reward:hover > .reward-main {
-  display: block
-}
-
-.post-reward .reward-main {
-  position: absolute;
-  bottom: 40px;
-  left: -96px;
-  z-index: 100;
-  display: none;
-  padding: 0 0 15px;
-  width: fit-content
-}
-
-.post-reward .reward-main .reward-all {
-  display: inline-block;
-  margin: 0;
-  padding: 1rem .5rem;
-  border-radius: 4px;
-  background: var(--sco-maskbgdeep)
-}
-
-.post-reward .reward-main .reward-all::before {
-  position: absolute;
-  bottom: -10px;
-  left: 0;
-  width: 100%;
-  height: 20px;
-  content: ""
-}
-
-.post-reward .reward-main .reward-all::after {
-  position: absolute;
-  right: 0;
-  bottom: 2px;
-  left: 0;
-  margin: 0 auto;
-  width: 0;
-  height: 0;
-  border-top: 13px solid var(--reward-pop);
-  border-right: 13px solid transparent;
-  border-left: 13px solid transparent;
-  content: ""
-}
-
-.post-reward .reward-main .reward-all .reward-item {
-  display: inline-block;
-  padding: 0 8px;
-  list-style-type: none;
-  vertical-align: top
-}
-
-.post-reward .reward-main .reward-all .reward-item img {
-  width: 130px;
-  height: 130px
-}
-
-.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
-  padding-top: .4rem;
-  width: 130px;
-  color: #858585
-}
-
-.post-reward .reward-button {
-  background: var(--sco-red);
-  color: var(--sco-white);
-  padding: 0 16px;
-  height: 40px;
-  line-height: 39px;
-  box-shadow: var(--sco-shadow-red);
-  display: inline-block;
-  cursor: pointer;
-  transition: all .4s ease 0s
-}
-
-.post-reward:hover .reward-button {
-  color: var(--sco-white);
-  background: var(--sco-theme);
-  box-shadow: none
-}
-
-.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
-  padding-top: 0;
-  margin-top: -8px;
-  margin-bottom: 8px
-}
-
-.post-reward .reward-main .reward-all {
-  border-radius: 12px;
-  background: var(--sco-card-bg);
-  border: var(--style-border-always);
-  padding: .8rem;
-  display: flex;
-  box-shadow: var(--sco-shadow-border);
-  flex-direction: column;
-  align-items: center
-}
-
-.reward-dec {
+
+.post-reward
+  position: relative
+  margin-top: 4rem
+  text-align: center
+
+  &:hover
+    > .reward-main
+      display: block
+
+  .reward-main
+    position: absolute
+    bottom: 40px
+    left: -96px
+    z-index: 100
+    display: none
+    padding: 0 0 15px
+    width: fit-content
+
+    .reward-all
+      display: inline-block
+      margin: 0
+      padding: 1rem .5rem
+      border-radius: 4px
+      background: var(--sco-maskbgdeep)
+
+      &:before
+        position: absolute
+        bottom: -10px
+        left: 0
+        width: 100%
+        height: 20px
+        content: ""
+
+      &:after
+        position: absolute
+        right: 0
+        bottom: 2px
+        left: 0
+        margin: 0 auto
+        width: 0
+        height: 0
+        border-top: 13px solid var(--reward-pop)
+        border-right: 13px solid transparent
+        border-left: 13px solid transparent
+        content: ""
+
+      .reward-item
+        display: inline-block
+        padding: 0 8px
+        list-style-type: none
+        vertical-align: top
+
+        img
+          width: 130px
+          height: 130px
+
+        .post-qr-code-desc
+          padding-top: .4rem
+          width: 130px
+          color: #858585
+
+  .reward-button
+    background: var(--sco-red)
+    color: var(--sco-white)
+    padding: 0 16px
+    height: 40px
+    line-height: 39px
+    box-shadow: var(--sco-shadow-red)
+    display: inline-block
+    cursor: pointer
+    transition: all .4s ease 0s
+
+  &:hover
+    .reward-button
+      color: var(--sco-white)
+      background: var(--sco-theme)
+      box-shadow: none
+
+  .reward-main
+    .reward-all
+      .reward-item
+        .post-qr-code-desc
+          padding-top: 0
+          margin-top: -8px
+          margin-bottom: 8px
+
+  .reward-main
+    .reward-all
+      border-radius: 12px
+      background: var(--sco-card-bg)
+      border: var(--style-border-always)
+      padding: .8rem
+      display: flex
+      box-shadow: var(--sco-shadow-border)
+      flex-direction: column
+      align-items: center
+
+.reward-dec
   font-size: .6rem
-}
 
-.reward-text {
-  margin-bottom: 0;
+.reward-text
+  margin-bottom: 0
   font-weight: 700
-}
-
-a.reward-main-btn {
-  background: var(--sco-secondbg);
-  color: var(--sco-fontcolor);
-  display: flex;
-  flex-direction: column;
-  border-radius: 12px;
-  padding: 4px 0;
-  border: var(--style-border-always);
-  margin: 8px;
+
+a.reward-main-btn
+  background: var(--sco-secondbg)
+  color: var(--sco-fontcolor)
+  display: flex
+  flex-direction: column
+  border-radius: 12px
+  padding: 4px 0
+  border: var(--style-border-always)
+  margin: 8px
   width: 100%
-}
 
-a.reward-main-btn:hover {
-  color: var(--sco-white);
-  background: var(--sco-red);
-  background-image: url(https://bu.dusays.com/2023/11/01/6541f7aeb5752.gif);
-  box-shadow: var(--sco-shadow-red)
-}
+  &:hover
+    color: var(--sco-white)
+    background: var(--sco-red)
+    background-image: url(https://bu.dusays.com/2023/11/01/6541f7aeb5752.gif)
+    box-shadow: var(--sco-shadow-red)
 
-.reward-title {
-  font-weight: 700;
+.reward-title
+  font-weight: 700
   color: var(--sco-red)
-}
-
-.reward-link.mode {
-  background: var(--sco-green);
-  color: var(--sco-white);
-  padding: 0 16px;
-  height: 40px;
-  line-height: 39px;
-  box-shadow: var(--sco-shadow-green);
-  border-radius: 8px;
-  margin-left: .5rem;
-  text-align: center;
-  transition: .3s
-}
 
-.reward-link.mode a {
+.reward-link.mode
+  background: var(--sco-green)
   color: var(--sco-white)
-}
+  padding: 0 16px
+  height: 40px
+  line-height: 39px
+  box-shadow: var(--sco-shadow-green)
+  border-radius: 8px
+  margin-left: .5rem
+  text-align: center
+  transition: .3s
+
+  a
+    color: var(--sco-white)
 
-.reward-link.mode i {
-  margin-right: 4px
-}
+  i
+    margin-right: 4px
 
-.reward-link.mode:hover {
-  background: var(--sco-theme);
-  box-shadow: none
-}
+  &:hover
+    background: var(--sco-theme)
+    box-shadow: none
 
-.post-reward {
-  margin-top: 0;
-  display: flex;
+.post-reward
+  margin-top: 0
+  display: flex
   justify-content: center
-}
-
-.post-reward:hover > .reward-main {
-  display: none
-}
-
-.post-reward .reward-main {
-  z-index: 1003
-}
-
-@media screen and (min-width: 768px) {
-  .post-reward:hover > .reward-main {
-    display: flex !important;
-    justify-content: left
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .post-reward .reward-main {
-    justify-content: center !important;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1003;
-    width: 100%;
-    margin: auto;
-    padding: 0
-  }
-
-  .post-reward .reward-main .reward-all {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    padding: 30px 0 60px 0;
-    border-radius: 12px 12px 0 0
-  }
-
-  #post .tag_share .post-meta__tags {
-    margin: 0 .5rem 0 0
-  }
-
-  a.reward-main-btn {
+
+  &:hover
+    > .reward-main
+      display: none
+
+  .reward-main
+    z-index: 1003
+
+@media screen and (min-width: 768px)
+  .post-reward:hover
+    > .reward-main
+      display: flex !important
+      justify-content: left
+
+@media screen and (max-width: 768px)
+  .post-reward
+    .reward-main
+      justify-content: center !important
+      position: fixed
+      bottom: 0
+      left: 0
+      right: 0
+      z-index: 1003
+      width: 100%
+      margin: auto
+      padding: 0
+
+    .reward-main
+      .reward-all
+        width: 100%
+        display: flex
+        flex-wrap: wrap
+        justify-content: space-around
+        padding: 30px 0 60px 0
+        border-radius: 12px 12px 0 0
+
+  #post
+    .tag_share
+      .post-meta__tags
+        margin: 0 .5rem 0 0
+
+  a.reward-main-btn
     margin: 4px auto
-  }
-}
 
-.post-reward .reward-main .reward-all:after {
-  display: none
-}
+.post-reward
+  .reward-main
+    .reward-all:after
+      display: none
 
-.reward-group {
-  display: flex;
+.reward-group
+  display: flex
   margin-top: .5rem
-}
-
-.post-reward .reward-main .reward-all .reward-item:first-child img {
-  border-color: var(--sco-green)
-}
 
-.post-reward .reward-main .reward-all .reward-item:last-child img {
-  border-color: var(--sco-blue)
-}
+.post-reward
+  .reward-main
+    .reward-all
+      .reward-item:first-child
+        img
+          border-color: var(--sco-green)
 
+      .reward-item:last-child
+        img
+          border-color: var(--sco-blue)
\ No newline at end of file
diff --git a/source/js/main.js b/source/js/main.js
index f89d5460..1d423d91 100755
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -727,6 +727,66 @@ let sco = {
             }
         }
     },
+    /**
+     * tagPageActive
+     */
+    tagPageActive: function () {
+        const currentPath = window.location.pathname;
+        const decodedPath = decodeURIComponent(currentPath);
+
+        const isTagPage = /\/tags\/.*?\//.test(decodedPath);
+        if (isTagPage) {
+            const tag = decodedPath.split("/")[2];
+            console.log(tag);
+
+            const tagPageTagsElement = document.getElementById("#tag-page-tags");
+            if (tagPageTagsElement) {
+                const allLinks = document.querySelectorAll("a");
+                allLinks.forEach(link => {
+                    link.classList.remove("select");
+                });
+
+                const tagElement = document.getElementById(tag);
+                if (tagElement) {
+                    tagElement.classList.add("select");
+                    tagElement.style.order = "-1";
+                }
+            }
+        }
+    },
+    /**
+     * categoryBarActive
+     */
+    categoriesBarActive: function() {
+        const categoryBar = document.querySelector("#category-bar");
+        const currentPath = window.location.pathname;
+        const decodedPath = decodeURIComponent(currentPath);
+
+        if (categoryBar) {
+            const categoryBarItems = document.querySelectorAll(".category-bar-item");
+            categoryBarItems.forEach(item => {
+                item.classList.remove("select");
+            });
+        }
+
+        if (decodedPath === "/") {
+            if (categoryBar) {
+                const homeItem = document.getElementById("category-bar-home");
+                homeItem.classList.add("select");
+            }
+        } else {
+            if (/\/categories\/.*?\//.test(decodedPath)) {
+                const category = decodedPath.split("/")[2];
+                if (categoryBar) {
+                    const categoryItem = document.getElementById(category);
+                    if (categoryItem) {
+                        categoryItem.classList.add("select");
+                        categoryItem.style.order = "-1";
+                    }
+                }
+            }
+        }
+    }
 }
 
 /*
@@ -843,6 +903,8 @@ window.refreshFn = () => {
     sco.addPhotoFigcaption()
     sco.setFest()
     sco.setTimeState()
+    sco.tagPageActive()
+    sco.categoriesBarActive()
     addRightMenuClickEvent()
     GLOBALCONFIG.lazyload.enable && sco.lazyloadImg()
     GLOBALCONFIG.lightbox && sco.lightbox('')

From 6c12c05e18d5bdc94bb6fc4df72cc802bcf767de Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Wed, 22 Nov 2023 23:55:40 +0800
Subject: [PATCH 27/43] Bug Rapiar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复深色模式下侧边栏信息卡片按钮颜色
---
 source/css/_layout/aside.styl | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 5b0518ef..1adf6816 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -858,7 +858,7 @@ div#author-info__sayhi:hover {
 #aside-content .card-info .author-info__name {
   text-align: left;
   font-weight: 700;
-  color: var(--sco-white);
+  color: var(--sco-card-bg);
   font-size: 20px;
   line-height: 1;
   margin-bottom: 5px
@@ -866,7 +866,7 @@ div#author-info__sayhi:hover {
 
 .author-info__desc {
   font-size: 12px;
-  color: var(--sco-white);
+  color: var(--sco-card-bg);
   opacity: .6;
   line-height: 1.5;
   -webkit-line-clamp: 2;
@@ -1128,6 +1128,11 @@ div#author-info__sayhi:hover {
   box-shadow: none
 }
 
+[data-theme=dark] .page #aside-content .card-info .card-info-social-icons i:hover {
+  background: var(--sco-card-bg);
+  color: var(--sco-fontcolor);
+}
+
 #aside-content .card-info .banner-button {
   height: 40px;
   width: 118px;
@@ -1138,10 +1143,11 @@ div#author-info__sayhi:hover {
 @media screen and (min-width: 1300px) {
   #aside-content .card-info .card-info-social-icons i {
     color: var(--sco-white)
+    background: var(--sco-black-op)
   }
 
   [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
-    color: var(--sco-white)
+    color: var(--sco-card-bg)
   }
 }
 

From b040054c7a651d56401e99c8b867b18804c1c28d Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Fri, 24 Nov 2023 19:45:38 +0800
Subject: [PATCH 28/43] =?UTF-8?q?=F0=9F=9A=97Stylus=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                                   |   16 +-
 layout/category.ejs                           |   10 +-
 layout/page/categories.ejs                    |    4 +-
 layout/page/tags.ejs                          |    2 +-
 .../partial/compoment/aside/asideAllInfo.ejs  |    9 +-
 .../partial/compoment/aside/asideArchive.ejs  |    0
 layout/partial/compoment/aside/asideTag.ejs   |   14 +-
 .../compoment/home/homeCategoryBar.ejs        |    8 +-
 layout/partial/compoment/inject/body.ejs      |    9 +-
 layout/partial/compoment/inject/head.ejs      |    3 -
 layout/partial/compoment/post/postMeta.ejs    |    5 +-
 layout/partial/head.ejs                       |    1 -
 layout/tag.ejs                                |    2 +-
 scripts/helper/load_stylus_config.js          |    9 +
 scripts/helper/themeJsExport.js               |    3 +
 source/css/_comment/twikoo.styl               |   21 +
 source/css/_global/index.styl                 |  230 +-
 source/css/_layout/aside.styl                 | 2386 +++++++++--------
 source/css/_layout/footer.styl                |    5 +-
 source/css/_layout/header.styl                |   57 +-
 source/css/_layout/index.styl                 |   18 +
 source/css/_layout/layout.styl                |   14 +-
 source/css/_page/about.styl                   | 2107 +++++++--------
 source/css/_page/category.styl                |   31 +-
 source/css/_page/homeTop.styl                 |   34 +-
 source/css/_page/index.styl                   |   14 +-
 source/css/_page/tag.styl                     |   24 +-
 source/css/_post/highlight.styl               |    7 -
 source/css/_post/index.styl                   |   17 +-
 source/css/index.styl                         |   19 +-
 source/css/main.css                           |   56 -
 source/js/commentBarrage.js                   |    5 +-
 source/js/extend/search/algolia-search.js     |    2 +-
 source/js/extend/search/local-search.js       |    2 +-
 source/js/main.js                             |   86 +-
 35 files changed, 2624 insertions(+), 2606 deletions(-)
 mode change 100755 => 100644 layout/partial/compoment/aside/asideArchive.ejs
 create mode 100644 scripts/helper/load_stylus_config.js
 delete mode 100755 source/css/main.css

diff --git a/_config.yml b/_config.yml
index 0410aaec..f73dace3 100755
--- a/_config.yml
+++ b/_config.yml
@@ -68,10 +68,6 @@ nav:
     random: false        # 随机文章跳转
     console: false       #控制台
 
-# 自定义icon
-icon:
-  customicon:
-
 # 首页顶部样式
 hometop:
   banner:
@@ -184,6 +180,15 @@ aside:
     post: true # 在文章页显示
     page: false # 在任意页显示
 
+  tags:
+    enable: true # 是否显示标签
+    highlight: true # 高亮显示
+    list: # 高亮显示标签列表
+      - 'Solitude-使用'
+
+  archive:
+    enable: true # 是否显示归档
+
   # 建站信息
   siteinfo:
     postcount: false # 文章数
@@ -385,6 +390,9 @@ related_post:
 
 # rightmenu(右键菜单)
 
+rightmenu:
+  enable: false
+
 # 站点验证
 verify:
   # 百度
diff --git a/layout/category.ejs b/layout/category.ejs
index 06c86f2d..1d1d0468 100755
--- a/layout/category.ejs
+++ b/layout/category.ejs
@@ -1,13 +1,11 @@
 <main class="layout" id="content-inner">
     <div id="category">
-        <div class="category-in-bar">
-            <div id="category-bar">
-                <div class="category-bar-items" id="category-bar-items">
-                    <%- partial('partial/compoment/home/homeCategoryBar', {select: page.category}) %>
-                </div>
+        <div id="category-bar">
+            <div class="category-bar-items" id="category-bar-items">
+                <%- partial('partial/compoment/home/homeCategoryBar', {select: page.category}) %>
             </div>
         </div>
-        <div class="recent-posts category_ui" id="recent-posts">
+        <div class="recent-posts" id="recent-posts">
             <% const currentCategory = page.category; %>
             <% site.posts.each(post => { %>
                 <% post.categories.each(category => { %>
diff --git a/layout/page/categories.ejs b/layout/page/categories.ejs
index 58ea000d..2cda85de 100755
--- a/layout/page/categories.ejs
+++ b/layout/page/categories.ejs
@@ -1,8 +1,8 @@
-<h1 class="page-title"><%= __('page.category') %></h1>
+<h1 class="page-title" style="display: inline"><%= __('page.category') %></h1>
 <div class="category-lists">
     <div class="tag-cloud-list is-center">
         <% site.categories.each(function (item) { %>
-            <a href="<%= url_for(item.path.toLowerCase()) %>">
+            <a href="<%= url_for(item.path) %>">
                 <span class="tags-punctuation"></span>
                 <%= item.name %>
                 <span class="tagsPageCount"><%= item.length %></span>
diff --git a/layout/page/tags.ejs b/layout/page/tags.ejs
index 8296a7cd..82c68928 100755
--- a/layout/page/tags.ejs
+++ b/layout/page/tags.ejs
@@ -1,4 +1,4 @@
-<h1 class="page-title"><%= __('page.tag') %></h1>
+<h1 class="page-title" style="display: inline-block"><%= __('page.tag') %></h1>
 <div class="category-lists">
     <div class="tag-cloud-list is-center">
         <% site.tags.each(function (tag) { %>
diff --git a/layout/partial/compoment/aside/asideAllInfo.ejs b/layout/partial/compoment/aside/asideAllInfo.ejs
index 0a2ccfb1..3d306a46 100755
--- a/layout/partial/compoment/aside/asideAllInfo.ejs
+++ b/layout/partial/compoment/aside/asideAllInfo.ejs
@@ -1,6 +1,11 @@
 <div class="card-widget card-tags card-archives card-webinfo card-allinfo">
-    <%- partial('partial/compoment/aside/asideTag', {cache: true}) %>
-    <%- partial('partial/compoment/aside/asideArchive', {cache: true}) %>
+    <% if(theme.aside.tags.enable){ %>
+        <%- partial('partial/compoment/aside/asideTag', {cache: true}) %>
+    <% } %>
+    <% if(theme.aside.archive.enable){ %>
+        <hr>
+        <%- partial('partial/compoment/aside/asideArchive', {cache: true}) %>
+    <% } %>
     <hr>
     <%- partial('partial/compoment/aside/asideWebInfo', {cache: true}) %>
 </div>
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideArchive.ejs b/layout/partial/compoment/aside/asideArchive.ejs
old mode 100755
new mode 100644
diff --git a/layout/partial/compoment/aside/asideTag.ejs b/layout/partial/compoment/aside/asideTag.ejs
index 00ccb5c6..a306fb5f 100755
--- a/layout/partial/compoment/aside/asideTag.ejs
+++ b/layout/partial/compoment/aside/asideTag.ejs
@@ -1,6 +1,16 @@
 <div class="card-tag-cloud">
     <% site.tags.each(function (tag) { %>
-        <a href="<%= url_for(tag.path) %>" style="font-size: 0.8rem; color: #d3d3d3"><%= tag.name %>
+        <a href="<%= url_for(tag.path) %>" style="font-size: 0.8rem;"><%= tag.name %>
             <sup><%= tag.length %></sup></a>
     <% }) %>
-</div>
\ No newline at end of file
+</div>
+<% if(site.tags.length > 50){ %>
+    <a id="more-tags-btn" href="javascript:void(0);" rel="external nofollow" onclick="sco.openAllTags();"
+       data-pjax-state="">查看全部</a>
+<% }else{ %>
+    <style>
+        .card-tag-cloud::after {
+            display: none !important;
+        }
+    </style>
+<% } %>
\ No newline at end of file
diff --git a/layout/partial/compoment/home/homeCategoryBar.ejs b/layout/partial/compoment/home/homeCategoryBar.ejs
index 74c536c1..2a8e0ae3 100755
--- a/layout/partial/compoment/home/homeCategoryBar.ejs
+++ b/layout/partial/compoment/home/homeCategoryBar.ejs
@@ -3,9 +3,15 @@
         <a href="/">首页</a>
     </div>
     <% site.categories.each(function(item){ %>
-        <div class="category-bar-item <%= select ? (select === item.name ? 'select' : '') : '' %>" id="<%= item.name %>">
+        <div class="category-bar-item <%= select ? (select === item.name ? 'select' : '') : '' %>"
+             id="<%= item.name %>">
             <a href="<%= url_for(item.path) %>"><%= item.name %></a>
         </div>
     <% }) %>
 </div>
+<% if(site.categories.length > 10){ %>
+    <div class="category-bar-next" id="category-bar-next" onclick="sco.scrollCategoryBarToRight()">
+        <i class="scoicon sco-show-right-line"></i>
+    </div>
+<% } %>
 <a class="category-bar-more" href="/categories/">更多</a>
\ No newline at end of file
diff --git a/layout/partial/compoment/inject/body.ejs b/layout/partial/compoment/inject/body.ejs
index 09a68e21..1a296b6f 100755
--- a/layout/partial/compoment/inject/body.ejs
+++ b/layout/partial/compoment/inject/body.ejs
@@ -12,7 +12,9 @@
 <% } %>
 <%- js('/js/utils') %>
 <div id="js-pjax">
-    <%- partial('partial/compoment/dorakika/rightmenu', {cache: true}) %>
+    <% if(theme.rightmenu.enable){ %>
+        <%- partial('partial/compoment/dorakika/rightmenu', {cache: true}) %>
+    <% } %>
     <% if(page.type === 'says' || page.type === 'album' || page.type === 'album_detail' ){ %>
         <%- js(cdn.waterfalljs) %>
         <script>
@@ -49,7 +51,10 @@
     <%- js('/js/extend/console/comment')
     %>
 <% } %>
-<%- js('/js/rightmenu') %>
+
+<% if(theme.rightmenu.enable){ %>
+    <%- js('/js/rightmenu') %>
+<% } %>
 
 <% if(theme.comment.enable){ %>
     <script data-pjax src="/js/commentBarrage.js"></script>
diff --git a/layout/partial/compoment/inject/head.ejs b/layout/partial/compoment/inject/head.ejs
index 6b607fbf..1b31b92b 100755
--- a/layout/partial/compoment/inject/head.ejs
+++ b/layout/partial/compoment/inject/head.ejs
@@ -5,9 +5,6 @@
 <% if(theme.loading.pace){ %>
     <script data-pace-options="{ &quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}" src="<%= cdn.pacejs %>"></script>
 <% } %>
-<% if(theme.icon.customicon){ %>
-    <%- css(theme.icon.customicon) %>
-<% } %>
 <%- css(cdn.scoicon) %>
 <%- css(cdn.snackbarcss) %>
 <% if(theme.comment.enable){ %>
diff --git a/layout/partial/compoment/post/postMeta.ejs b/layout/partial/compoment/post/postMeta.ejs
index e1889cf8..92aa1908 100755
--- a/layout/partial/compoment/post/postMeta.ejs
+++ b/layout/partial/compoment/post/postMeta.ejs
@@ -9,9 +9,8 @@
             </a>
             <% if (page.categories.data.length) { %>
                 <span class="post-meta-categories">
-                    <% page.categories.data.forEach(item => { %>
-                        <a class="post-meta-categories" href="<%= url_for(item.path) %>"><%= item.name %></a>
-                    <% }) %>
+                        <a class="post-meta-categories"
+                           href="<%= url_for(page.categories.data[0].path) %>"><%= page.categories.data[0].name %></a>
                 </span>
             <% } %>
             <div class="tag_share">
diff --git a/layout/partial/head.ejs b/layout/partial/head.ejs
index 3650b088..e73a6423 100755
--- a/layout/partial/head.ejs
+++ b/layout/partial/head.ejs
@@ -28,7 +28,6 @@ var description = page.desc || page.excerpt || config.description
     <link rel="apple-touch-icon-precomposed" sizes="180x180" href="<%= url_for(theme.site.siteIcon) %>">
 <% } %>
 <%- css('/css/index') %>
-<%- css('/css/main') %>
 <%- partial('partial/compoment/inject/head', {cache: true}) %>
 <% if (theme.extends.head) for (const i of theme.extends.head){ %>
     <%- i %>
diff --git a/layout/tag.ejs b/layout/tag.ejs
index 80695e77..2de81920 100755
--- a/layout/tag.ejs
+++ b/layout/tag.ejs
@@ -9,7 +9,7 @@
                 </a>
             <% }) %>
         </div>
-        <div class="recent-posts category_ui" id="recent-posts">
+        <div class="recent-posts" id="recent-posts">
             <% const currentTag = page.tag; %>
             <% site.posts.each(post => { %>
                 <% post.tags.each(tag => { %>
diff --git a/scripts/helper/load_stylus_config.js b/scripts/helper/load_stylus_config.js
new file mode 100644
index 00000000..85a8f6c5
--- /dev/null
+++ b/scripts/helper/load_stylus_config.js
@@ -0,0 +1,9 @@
+hexo.extend.filter.register('stylus:renderer', function (style) {
+    const {config, theme} = this
+
+    // 侧边栏标签高亮
+    if (theme.config.aside.tags.highlight) {
+        let array = theme.config.aside.tags.list.map(item => encodeURIComponent(item));
+        style.define('highlightTags',array);
+    }
+});
\ No newline at end of file
diff --git a/scripts/helper/themeJsExport.js b/scripts/helper/themeJsExport.js
index 1f6230ba..3f9f1508 100755
--- a/scripts/helper/themeJsExport.js
+++ b/scripts/helper/themeJsExport.js
@@ -49,6 +49,9 @@ hexo.extend.helper.register('export_config', function () {
             twikooUrl: theme.comment.twikoo.envId,
             twikooAccessToken: theme.comment.twikoo.accessToken
         },
+        rightmenu:{
+            enable: theme.rightmenu.enable
+        }
     }
 
     // 搜索数据
diff --git a/source/css/_comment/twikoo.styl b/source/css/_comment/twikoo.styl
index 7af9b08d..451516f6 100644
--- a/source/css/_comment/twikoo.styl
+++ b/source/css/_comment/twikoo.styl
@@ -31,9 +31,23 @@
   color var(--sco-lighttext) !important
   cursor pointer
   -webkit-user-select none
+  padding 0 12px 0 12px
+  transition all .3s
+  border-radius 8px
+  background-color var(--sco-secondbg)
+  border var(--style-border-always)
+
+  &:hover
+    background-color var(--sco-lighttext)
+    color var(--sco-card-bg) !important
+
+    .tk-action-icon svg
+      fill var(--sco-card-bg) !important
+
 
 .tk-action-icon
   svg
+    transition all .3s
     fill var(--sco-lighttext) !important
 
 .tk-content
@@ -421,8 +435,10 @@ button.el-button.tk-cancel.el-button--default.el-button--small
     backdrop-filter saturate(180%) blur(10px)
     -webkit-backdrop-filter blur(10px)
     transform translateZ(0)
+
     .OwO-bar
       border-top none !important
+
     .OwO-items
       .OwO-item:hover
         box-shadow var(--sco-shadow-lightblack) !important
@@ -436,6 +452,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small
   &.OwO-open
     .OwO-body
       animation .3s ease .1s 1 normal both running donate_effcet
+
   .OwO-body
     .OwO-bar
       .OwO-packages
@@ -443,6 +460,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small
           margin-right 0 !important
           height 48px
           transition .3s
+
         li:hover
           transition .3s
 
@@ -456,9 +474,11 @@ button.el-button.tk-cancel.el-button--default.el-button--small
       .OwO-packages
         .OwO-package-active
           background var(--sco-secondbg) !important
+
     .OwO-items-show
       margin 12px 8px !important
       min-height 197px
+
     .OwO-bar
       .OwO-packages
         li
@@ -478,6 +498,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small
   overflow hidden
   animation owoIn .3s cubic-bezier(.42, 0, .3, 1.11)
   padding 1rem
+
   img
     width 100%
 
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index 1f4a48f2..c9035766 100644
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -1,120 +1,120 @@
-:root 
-	--sco-white #fff
-	--sco-white-op rgba(255, 255, 255, 0.2)
-	--sco-black #000
-	--sco-black-op rgba(0, 0, 0, 0.2)
-	--sco-none #00000000
-	--sco-gray #999999
-	--sco-gray-op #9999992b
-	--sco-vip #e5a80d
-	--sco-main var(--sco-theme)
-	--sco-main-op var(--sco-theme-op)
-	--sco-main-op-deep var(--sco-theme-op-deep)
-	--sco-main-op-light var(--sco-theme-op-light)
-	--sco-main-none var(--sco-theme-none)
-	--sco-shadow-theme 0 8px 12px -3px var(--sco-theme-op)
-	--sco-shadow-blackdeep 0 2px 16px -3px rgba(0, 0, 0, .15)
-	--sco-shadow-main 0 8px 12px -3px var(--sco-main-op)
-	--sco-shadow-blue 0 8px 12px -3px rgba(40, 109, 234, .20)
-	--sco-shadow-white 0 8px 12px -3px rgba(255, 255, 255, .20)
-	--sco-shadow-black 0 0 12px 4px rgba(0, 0, 0, .05)
-	--sco-shadow-yellow 0px 38px 77px -26px rgba(255, 201, 62, .12)
-	--sco-shadow-red 0 8px 12px -3px #ee7d7936
-	--sco-shadow-green 0 8px 12px -3px #87ee7936
-	--sco-logo-color linear-gradient(215deg, #4584ff 0%, #cf0db9 100%)
-	--sco-snackbar-time 5s
-	--global-font-size 14px
-	--global-bg #fff
-	--hr-border #97bcfb
-	--hr-before-color #6ea2f9
-	--search-bg #f6f8fa
-	--search-input-color #4c4948
-	--search-result-title #4c4948
-	--preloader-bg #37474f
-	--preloader-color #fff
-	--tab-border-color #f0f0f0
-	--tab-botton-bg #f0f0f0
-	--tab-botton-color #1f2d3d
-	--tab-button-hover-bg #dcdcdc
-	--tab-button-active-bg #fff
-	--sidebar-bg #f6f8fa
-	--btn-hover-color #ff7242
-	--btn-color #fff
-	--btn-bg #307af6
-	--text-bg-hover #307af6
-	--light-grey #eee
-	--text-highlight-color #1f2d3d
-	--blockquote-color #6a737d
-	--blockquote-bg rgba(73, 177, 245, 0.1)
-	--reward-pop #f5f5f5
-	--toc-link-color #666261
-	--card-box-shadow 0 3px 8px 6px rgba(7, 17, 27, 0.06)
-	--card-hover-box-shadow 0 3px 8px 6px rgba(7, 17, 27, 0.15)
-	--offset 0px
+:root
+  --sco-white #fff
+  --sco-white-op rgba(255, 255, 255, 0.2)
+  --sco-black #000
+  --sco-black-op rgba(0, 0, 0, 0.2)
+  --sco-none #00000000
+  --sco-gray #999999
+  --sco-gray-op #9999992b
+  --sco-vip #e5a80d
+  --sco-main var(--sco-theme)
+  --sco-main-op var(--sco-theme-op)
+  --sco-main-op-deep var(--sco-theme-op-deep)
+  --sco-main-op-light var(--sco-theme-op-light)
+  --sco-main-none var(--sco-theme-none)
+  --sco-shadow-theme 0 8px 12px -3px var(--sco-theme-op)
+  --sco-shadow-blackdeep 0 2px 16px -3px rgba(0, 0, 0, .15)
+  --sco-shadow-main 0 8px 12px -3px var(--sco-main-op)
+  --sco-shadow-blue 0 8px 12px -3px rgba(40, 109, 234, .20)
+  --sco-shadow-white 0 8px 12px -3px rgba(255, 255, 255, .20)
+  --sco-shadow-black 0 0 12px 4px rgba(0, 0, 0, .05)
+  --sco-shadow-yellow 0px 38px 77px -26px rgba(255, 201, 62, .12)
+  --sco-shadow-red 0 8px 12px -3px #ee7d7936
+  --sco-shadow-green 0 8px 12px -3px #87ee7936
+  --sco-logo-color linear-gradient(215deg, #4584ff 0%, #cf0db9 100%)
+  --sco-snackbar-time 5s
+  --global-font-size 14px
+  --global-bg #fff
+  --hr-border #97bcfb
+  --hr-before-color #6ea2f9
+  --search-bg #f6f8fa
+  --search-input-color #4c4948
+  --search-result-title #4c4948
+  --preloader-bg #37474f
+  --preloader-color #fff
+  --tab-border-color #f0f0f0
+  --tab-botton-bg #f0f0f0
+  --tab-botton-color #1f2d3d
+  --tab-button-hover-bg #dcdcdc
+  --tab-button-active-bg #fff
+  --sidebar-bg #f6f8fa
+  --btn-hover-color #ff7242
+  --btn-color #fff
+  --btn-bg #307af6
+  --text-bg-hover #307af6
+  --light-grey #eee
+  --text-highlight-color #1f2d3d
+  --blockquote-color #6a737d
+  --blockquote-bg rgba(73, 177, 245, 0.1)
+  --reward-pop #f5f5f5
+  --toc-link-color #666261
+  --card-box-shadow 0 3px 8px 6px rgba(7, 17, 27, 0.06)
+  --card-hover-box-shadow 0 3px 8px 6px rgba(7, 17, 27, 0.15)
+  --offset 0px
 
-	// highlight
-	--hl-color #eff
-	--hl-bg #212121
-	--hltools-bg #1c1c1c
-	--hltools-color rgba(238, 255, 255, 0.8)
-	--hlnumber-bg #212121
-	--hlnumber-color rgba(238, 255, 255, 0.5)
-	--hlscrollbar-bg #121212
-	--hlexpand-bg linear-gradient(180deg, rgba(33, 33, 33, 0.6), rgba(33, 33, 33, 0.9))
+  // highlight
+  --hl-color #eff
+  --hl-bg #212121
+  --hltools-bg #1c1c1c
+  --hltools-color rgba(238, 255, 255, 0.8)
+  --hlnumber-bg #212121
+  --hlnumber-color rgba(238, 255, 255, 0.5)
+  --hlscrollbar-bg #121212
+  --hlexpand-bg linear-gradient(180deg, rgba(33, 33, 33, 0.6), rgba(33, 33, 33, 0.9))
 
-	// ai摘要
-	--ai-post-bg rgba(255,255,255,0.32)
-	--ai-border 1px solid #e3e8f7bd
-	--ai-tag-bg rgba(48, 52, 63, 0.86)
-	--ai-cursor #333
+  // ai摘要
+  --ai-post-bg rgba(255, 255, 255, 0.32)
+  --ai-border 1px solid #e3e8f7bd
+  --ai-tag-bg rgba(48, 52, 63, 0.86)
+  --ai-cursor #333
 
-	// 个性定位
-	--icat-card-welcome #49b1f5
+  // 个性定位
+  --icat-card-welcome #49b1f5
 
-	+maxWidth768()
-		--style-border 0px solid var(--sco-card-border)
-		--style-border-hover 0px solid var(--sco-main)
+  +maxWidth768()
+    --style-border 0px solid var(--sco-none) !important
+    --style-border-hover 0px solid var(--sco-main) !important
 
-[data-theme=light] 
-	--sco-theme #bdbdf0
-	--sco-theme-op #4259ef23
-	--sco-theme-op-deep #eccec5
-	--sco-theme-op-light #4259ef0d
-	--sco-theme-none #4259ef01
-	--sco-blue #425aef
-	--sco-red #f04a63
-	--sco-pink #ff7c7c
-	--sco-green #57bd6a
-	--sco-yellow #c28b00
-	--sco-yellow-op #d99c001a
-	--sco-orange #e38100
-	--sco-purple #7a60d2
-	--sco-fontcolor #363636
-	--sco-background #f7f9fe
-	--sco-reverse #000
-	--sco-maskbg rgba(255, 255, 255, 0.6)
-	--sco-maskbgdeep rgba(255, 255, 255, 0.85)
-	--sco-hovertext var(--sco-main)
-	--sco-ahoverbg #f7f7fa
-	--sco-lighttext var(--sco-main)
-	--sco-secondtext rgba(60, 60, 67, 0.8)
-	--sco-scrollbar rgba(60, 60, 67, 0.4)
-	--sco-card-btn-bg #edf0f7
-	--sco-post-blockquote-bg #fafcff
-	--sco-post-tabs-bg #f2f5f8
-	--sco-secondbg #f7f7f9
-	--sco-shadow-nav 0 5px 12px -5px rgba(102, 68, 68, 0.05)
-	--sco-card-bg #fff
-	--sco-card-bg-op var(--sco-black-op)
-	--sco-card-bg-none rgba(255, 255, 255, 0)
-	--sco-shadow-lightblack 0 5px 12px -5px rgba(102, 68, 68, 0.00)
-	--sco-shadow-light2black 0 5px 12px -5px rgba(102, 68, 68, 0.00)
-	--sco-card-border #e3e8f7
-	--sco-shadow-border 0 8px 16px -4px #2c2d300c
-	--style-border 1px solid var(--sco-card-border)
-	--style-border-always 1px solid var(--sco-card-border)
-	--style-border-hover 1px solid var(--sco-main)
-	--style-border-hover-always 1px solid var(--sco-main)
-	--style-border-dashed 1px dashed var(--sco-theme-op)
-	--style-border-forever 2px solid var(--sco-main)
-	--sco-navbg var(--sco-theme-op)
\ No newline at end of file
+[data-theme=light]
+  --sco-theme #bdbdf0
+  --sco-theme-op #4259ef23
+  --sco-theme-op-deep #eccec5
+  --sco-theme-op-light #4259ef0d
+  --sco-theme-none #4259ef01
+  --sco-blue #425aef
+  --sco-red #f04a63
+  --sco-pink #ff7c7c
+  --sco-green #57bd6a
+  --sco-yellow #c28b00
+  --sco-yellow-op #d99c001a
+  --sco-orange #e38100
+  --sco-purple #7a60d2
+  --sco-fontcolor #363636
+  --sco-background #f7f9fe
+  --sco-reverse #000
+  --sco-maskbg rgba(255, 255, 255, 0.6)
+  --sco-maskbgdeep rgba(255, 255, 255, 0.85)
+  --sco-hovertext var(--sco-main)
+  --sco-ahoverbg #f7f7fa
+  --sco-lighttext var(--sco-main)
+  --sco-secondtext rgba(60, 60, 67, 0.8)
+  --sco-scrollbar rgba(60, 60, 67, 0.4)
+  --sco-card-btn-bg #edf0f7
+  --sco-post-blockquote-bg #fafcff
+  --sco-post-tabs-bg #f2f5f8
+  --sco-secondbg #f7f7f9
+  --sco-shadow-nav 0 5px 12px -5px rgba(102, 68, 68, 0.05)
+  --sco-card-bg #fff
+  --sco-card-bg-op var(--sco-black-op)
+  --sco-card-bg-none rgba(255, 255, 255, 0)
+  --sco-shadow-lightblack 0 5px 12px -5px rgba(102, 68, 68, 0.00)
+  --sco-shadow-light2black 0 5px 12px -5px rgba(102, 68, 68, 0.00)
+  --sco-card-border #e3e8f7
+  --sco-shadow-border 0 8px 16px -4px #2c2d300c
+  --style-border 1px solid var(--sco-card-border)
+  --style-border-always 1px solid var(--sco-card-border)
+  --style-border-hover 1px solid var(--sco-main)
+  --style-border-hover-always 1px solid var(--sco-main)
+  --style-border-dashed 1px dashed var(--sco-theme-op)
+  --style-border-forever 2px solid var(--sco-main)
+  --sco-navbg var(--sco-theme-op)
\ No newline at end of file
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 1adf6816..2e4a7b23 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -1,1289 +1,1311 @@
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span, #aside-content .card-info .card-info-data > .card-info-data-item a .headline, #pagination .next_info, #pagination .prev_info, #sidebar #sidebar-menus .menus_items .site-page, #sidebar #sidebar-menus .site-data .data-item .data-item-link > a > div, .flink#article-container .flink-list > .flink-list-item a .flink-item-desc, .flink#article-container .flink-list > .flink-list-item a .flink-item-name, .limit-one-line {
-  text-overflow: ellipsis;
-  white-space: nowrap
-}
-
-#aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > .title, #error-wrap .error-content .error-info .error_subtitle, #post-info .post-title, #recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts > .recent-post-item > .recent-post-info > .content, .article-sort-item-title, .limit-more-line, .relatedPosts > .relatedPosts-list .content .title, figure.gallery-group .gallery-group-name, figure.gallery-group p {
-  display: -webkit-box;
-  -webkit-box-orient: vertical
-}
+#aside-content
+  .card-archives ul.card-archive-list > .card-archive-list-item a span,
+  .card-categories ul.card-category-list > .card-category-list-item a span,
+  .card-info .card-info-data > .card-info-data-item a .headline,
+  #pagination .next_info,
+  #pagination .prev_info,
+  #sidebar #sidebar-menus .menus_items .site-page,
+  #sidebar #sidebar-menus .site-data .data-item .data-item-link > a > div,
+  .flink#article-container .flink-list > .flink-list-item a .flink-item-desc,
+  .flink#article-container .flink-list > .flink-list-item a .flink-item-name,
+  .limit-one-line
+    text-overflow: ellipsis
+    white-space: nowrap
+
+  .aside-list > .aside-list-item .content > .comment,
+  .aside-list > .aside-list-item .content > .name,
+  .aside-list > .aside-list-item .content > .title,
+  #error-wrap .error-content .error-info .error_subtitle,
+  #post-info .post-title,
+  #recent-posts > .recent-post-item > .recent-post-info > .article-title,
+  #recent-posts > .recent-post-item > .recent-post-info > .content,
+  .article-sort-item-title,
+  .limit-more-line,
+  .relatedPosts > .relatedPosts-list .content .title,
+  figure.gallery-group .gallery-group-name,
+  figure.gallery-group p
+    display: -webkit-box
+    -webkit-box-orient: vertical
+
+  .aside-list > .aside-list-item .content > .title
+    overflow: hidden
+
+  .author-info__description,
+  .author-info__name,
+  #site-name,
+  #site-subtitle,
+  #site-title
+    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
+
+  @media screen and (min-width: 900px)
+    padding-left: 15px
 
-#aside-content .aside-list > .aside-list-item .content > .title {
-  overflow: hidden
-}
+  @media screen and (max-width: 900px)
+    width: 100%
 
-#aside-content .author-info__description, #aside-content .author-info__name, #site-name, #site-subtitle, #site-title {
-  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
-}
+  @media screen and (max-width: 900px)
+    > .card-widget:first-child
+      margin-top: 1rem
+
+  @media screen and (max-width: 768px)
+    .card-widget:not(#card-toc)
+      display: none !important
+
+  .card-info img.avatar-img
+    width: 118px
+    right: 0
+    top: 0
+    border-radius: 500px
+    position: absolute
+    opacity: 1
+    transition: .3s
+
+  .author-info__top-group
+    display: flex
+    height: 28px
+    width: 100%
 
-@media screen and (min-width: 900px) {
-  #aside-content {
-    padding-left: 15px
-  }
-}
+  .card-info .author-info__description
+    margin-top: -.3rem
 
-@media screen and (max-width: 900px) {
-  #aside-content {
+  .card-info .card-info-data
+    display: table
+    margin: .7rem 0 .2rem
+    width: 100%
+    table-layout: fixed
+
+  .card-info .card-info-data > .card-info-data-item
+    display: table-cell
+
+  .card-info .card-info-data > .card-info-data-item:hover
+    background: #000
+    border-radius: 5px
+
+  .card-info .card-info-data > .card-info-data-item a .headline
+    color: var(--sco-fontcolor)
+    font-size: 1em
+
+  .card-info .card-info-data > .card-info-data-item a .length-num
+    margin-top: -.3rem
+    color: var(--text-highlight-color)
+    font-size: 1.4em
+
+  .card-info .card-info-social-icons
+    margin: .3rem 0 -.3rem
+
+  .card-info .card-info-social-icons .social-icon
+    margin: 0 .5rem
+    color: var(--sco-fontcolor)
+    font-size: 1.4em
+    cursor: pointer
+    display: flex
+
+  .card-info .card-info-social-icons i
+    transition: all .3s ease 0s
+    padding: 8px
+    border-radius: 32px
+
+  .card-info .card-info-social-icons i:hover
+    transform: rotate(540deg)
+    background-color: #000
+    cursor: pointer
+
+  .card-info #card-info-btn
+    display: block
+    margin-top: .7rem
+    background-color: var(--btn-bg)
+    color: var(--btn-color)
+    text-align: center
+    line-height: 2.4
+
+  .card-info #card-info-btn span
+    padding-left: .5rem
+
+  @media screen and (min-width: 900px)
+    .sticky_layout
+      position: sticky
+      top: 20px
+      transition: top .3s ease 0s
+
+  .card-tag-cloud a
+    display: inline-block
+    padding: 0 .3rem
+
+  .aside-list > span
+    display: block
+    margin-bottom: .5rem
+    text-align: center
+
+  .aside-list > .aside-list-item:last-child
+    padding-bottom: 0
+
+  .aside-list > .aside-list-item .thumbnail
+    overflow: hidden
+    width: 4.2em
+    height: 4.2em
+
+  .aside-list > .aside-list-item .thumbnail > img
     width: 100%
-  }
-}
+    height: 100%
+    transition: all .6s ease 0s
+    object-fit: cover
+
+  .aside-list > .aside-list-item .thumbnail > img:hover
+    transform: scale(1.1)
+
+  .aside-list > .aside-list-item .content
+    -webkit-box-flex: 1
+    flex: 1 1 0
+    padding-left: 10px
+    word-break: break-all
+    display: flex
+    flex-direction: column
+
+  .aside-list > .aside-list-item .content > .name
+    -webkit-line-clamp: 1
+
+  .aside-list > .aside-list-item .content > .name,
+  .aside-list > .aside-list-item .content > time
+    display: block
+    color: #858585
+    font-size: 85%
+
+  .aside-list > .aside-list-item .content > .comment,
+  .aside-list > .aside-list-item .content > .title
+    color: var(--sco-fontcolor)
+    font-size: 95%
+    line-height: 1.3
+    -webkit-line-clamp: 2
+
+  .aside-list > .aside-list-item .content > .comment:hover,
+  .aside-list > .aside-list-item .content > .title:hover
+    color: #307af6
+
+  .aside-list > .aside-list-item.no-cover
+    min-height: 4.4em
+
+  .card-archives ul.card-archive-list,
+  .card-categories ul.card-category-list
+    margin: 0
+    padding: 0
+    list-style: none
+
+  .card-archives ul.card-archive-list > .card-archive-list-item a,
+  .card-categories ul.card-category-list > .card-category-list-item a
+    display: inline-block
+    padding: .15rem .5rem
+    width: 100%
+    color: var(--sco-fontcolor)
+    transition: all .4s ease 0s
+    border-radius: 5px
+
+  .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
+  .card-categories ul.card-category-list > .card-category-list-item a:hover
+    padding: .15rem .85rem
+    background-color: #fff
+    color: #427bee
+    border-radius: 5px
+
+  .card-archives ul.card-archive-list > .card-archive-list-item a span,
+  .card-categories ul.card-category-list > .card-category-list-item a span
+    display: inline-block
+    vertical-align: bottom
+
+  .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
+  .card-categories ul.card-category-list > .card-category-list-item a span:first-child
+    width: 80%
+
+  .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child,
+  .card-categories ul.card-category-list > .card-category-list-item a span:last-child
+    width: 20%
+    text-align: right
+
+  .card-categories .card-category-list.child
+    padding: 0 0 0 .8rem
+
+  .card-categories .card-category-list > .parent > a .card-category-list-name
+    width: 70% !important
+
+  .card-categories .card-category-list > .parent > a .card-category-list-count
+    width: calc(30% - 20px)
+    text-align: right
+
+  .card-categories .card-category-list > .parent i
+    float: right
+    margin-right: -.35rem
+    padding: .35rem
+    transition: transform .3s ease 0s
+    transform: rotate(0)
+
+  .card-categories .card-category-list > .parent i.expand
+    transform: rotate(-90deg)
+
+  .card-webinfo .webinfo .webinfo-item
+    display: flex
+    -webkit-box-align: center
+    align-items: center
+    padding: .1rem .5rem 0
+
+  .card-webinfo .webinfo .webinfo-item div:first-child
+    -webkit-box-flex: 1
+    flex: 1 1 0
+    padding-right: 1rem
+
+  @media screen and (min-width: 901px)
+    #card-toc
+      right: 0 !important
+
+  @media screen and (max-width: 900px)
+    #card-toc
+      position: fixed
+      right: -100%
+      bottom: 30px
+      z-index: 100
+      max-height: calc(100% - 60px)
+      width: 300px
+      opacity: 0
+      transform-origin: right bottom
+
+  #card-toc .toc-content
+    overflow-y: auto
+    max-height: calc(100vh - 300px)
+
+  @media screen and (max-width: 900px)
+    #card-toc .toc-content
+      max-height: calc(100vh - 140px)
+
+  #card-toc .toc-content .toc-child
+    display: none
 
-@media screen and (max-width: 900px) {
-  #aside-content > .card-widget:first-child {
-    margin-top: 1rem
-  }
-}
-
-@media screen and (max-width: 768px) {
-  #aside-content .card-widget:not(#card-toc) {
-    display: none !important;
-  }
-}
-
-#aside-content .card-info img.avatar-img {
-  width: 118px;
-  right: 0;
-  top: 0;
-  border-radius: 500px;
-  position: absolute;
-  opacity: 1;
-  transition: .3s;
-
-}
-
-.author-info__top-group {
-  display: flex;
-  height: 28px;
-  width: 100%
-}
-
-#aside-content .card-info .author-info__description {
-  margin-top: -.3rem
-}
-
-#aside-content .card-info .card-info-data {
-  display: table;
-  margin: .7rem 0 .2rem;
-  width: 100%;
-  table-layout: fixed
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item {
-  display: table-cell
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item:hover {
-  background: #000;
-  border-radius: 5px
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item a .headline {
-  color: var(--sco-fontcolor);
-  font-size: 1em
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item a .length-num {
-  margin-top: -.3rem;
-  color: var(--text-highlight-color);
-  font-size: 1.4em
-}
-
-#aside-content .card-info .card-info-social-icons {
-  margin: .3rem 0 -.3rem
-}
-
-#aside-content .card-info .card-info-social-icons .social-icon {
-  margin: 0 .5rem;
-  color: var(--sco-fontcolor);
-  font-size: 1.4em;
-  cursor: pointer;
-  display: flex
-}
+  @media screen and (max-width: 900px)
+    #card-toc .toc-content .toc-child
+      display: block !important
 
-#aside-content .card-info .card-info-social-icons i {
-  transition: all .3s ease 0s;
-  padding: 8px;
-  border-radius: 32px
-}
+  #card-toc .toc-content .toc-item.active .toc-child
+    display: block
 
-#aside-content .card-info .card-info-social-icons i:hover {
-  transform: rotate(540deg);
-  background-color: #000;
-  cursor: pointer
-}
-
-#aside-content .card-info #card-info-btn {
-  display: block;
-  margin-top: .7rem;
-  background-color: var(--btn-bg);
-  color: var(--btn-color);
-  text-align: center;
-  line-height: 2.4
-}
-
-#aside-content .card-info #card-info-btn span {
-  padding-left: .5rem
-}
-
-@media screen and (min-width: 900px) {
-  #aside-content .sticky_layout {
-    position: sticky;
-    top: 20px;
-    transition: top .3s ease 0s
-  }
-}
-
-#aside-content .card-tag-cloud a {
-  display: inline-block;
-  padding: 0 .3rem
-}
-
-#aside-content .card-tag-cloud a:hover {
-  background-color: #fff;
-  cursor: pointer;
-  border-radius: 5px;
-  transform: scale(1.1);
-  color: #307af6 !important
-}
-
-#aside-content .aside-list > span {
-  display: block;
-  margin-bottom: .5rem;
-  text-align: center
-}
-
-#aside-content .aside-list > .aside-list-item:last-child {
-  padding-bottom: 0
-}
-
-#aside-content .aside-list > .aside-list-item .thumbnail {
-  overflow: hidden;
-  width: 4.2em;
-  height: 4.2em
-}
-
-#aside-content .aside-list > .aside-list-item .thumbnail > img {
-  width: 100%;
-  height: 100%;
-  transition: all .6s ease 0s;
-  object-fit: cover
-}
-
-#aside-content .aside-list > .aside-list-item .thumbnail > img:hover {
-  transform: scale(1.1)
-}
-
-#aside-content .aside-list > .aside-list-item .content {
-  -webkit-box-flex: 1;
-  flex: 1 1 0;
-  padding-left: 10px;
-  word-break: break-all;
-  display: flex;
-  flex-direction: column
-}
-
-#aside-content .aside-list > .aside-list-item .content > .name {
-  -webkit-line-clamp: 1
-}
-
-#aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > time {
-  display: block;
-  color: #858585;
-  font-size: 85%
-}
-
-#aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .title {
-  color: var(--sco-fontcolor);
-  font-size: 95%;
-  line-height: 1.3;
-  -webkit-line-clamp: 2
-}
-
-#aside-content .aside-list > .aside-list-item .content > .comment:hover, #aside-content .aside-list > .aside-list-item .content > .title:hover {
-  color: #307af6
-}
-
-#aside-content .aside-list > .aside-list-item.no-cover {
-  min-height: 4.4em
-}
-
-#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
-  margin: 0;
-  padding: 0;
-  list-style: none
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
-  display: inline-block;
-  padding: .15rem .5rem;
-  width: 100%;
-  color: var(--sco-fontcolor);
-  transition: all .4s ease 0s;
-  border-radius: 5px
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
-  padding: .15rem .85rem;
-  background-color: #fff;
-  color: #427bee;
-  border-radius: 5px
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span {
-  display: inline-block;
-  vertical-align: bottom
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
-  width: 80%
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
-  width: 20%;
-  text-align: right
-}
-
-#aside-content .card-categories .card-category-list.child {
-  padding: 0 0 0 .8rem
-}
-
-#aside-content .card-categories .card-category-list > .parent > a .card-category-list-name {
-  width: 70% !important
-}
-
-#aside-content .card-categories .card-category-list > .parent > a .card-category-list-count {
-  width: calc(30% - 20px);
-  text-align: right
-}
-
-#aside-content .card-categories .card-category-list > .parent i {
-  float: right;
-  margin-right: -.35rem;
-  padding: .35rem;
-  transition: transform .3s ease 0s;
-  transform: rotate(0)
-}
-
-#aside-content .card-categories .card-category-list > .parent i.expand {
-  transform: rotate(-90deg)
-}
-
-#aside-content .card-webinfo .webinfo .webinfo-item {
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  padding: .1rem .5rem 0
-}
-
-#aside-content .card-webinfo .webinfo .webinfo-item div:first-child {
-  -webkit-box-flex: 1;
-  flex: 1 1 0;
-  padding-right: 1rem
-}
-
-@media screen and (min-width: 901px) {
-  #aside-content #card-toc {
-    right: 0 !important
-  }
-}
-
-@media screen and (max-width: 900px) {
-  #aside-content #card-toc {
-    position: fixed;
-    right: -100%;
-    bottom: 30px;
-    z-index: 100;
-    max-height: calc(100% - 60px);
-    width: 300px;
-    opacity: 0;
-    transform-origin: right bottom
-  }
-}
-
-#aside-content #card-toc .toc-content {
-  overflow-y: auto;
-  max-height: calc(100vh - 300px)
-}
-
-@media screen and (max-width: 900px) {
-  #aside-content #card-toc .toc-content {
-    max-height: calc(100vh - 140px)
-  }
-}
-
-#aside-content #card-toc .toc-content .toc-child {
-  display: none
-}
-
-@media screen and (max-width: 900px) {
-  #aside-content #card-toc .toc-content .toc-child {
-    display: block !important
-  }
-}
-
-#aside-content #card-toc .toc-content .toc-item.active .toc-child {
-  display: block
-}
-
-#aside-content #card-toc .toc-content li, #aside-content #card-toc .toc-content ol {
-  list-style: none
-}
-
-#aside-content #card-toc .toc-content > ol {
-  padding: 0 !important
-}
-
-#aside-content #card-toc .toc-content ol {
-  margin: 0;
-  padding-left: .4rem
-}
-
-#aside-content #card-toc .toc-content .toc-link {
-  display: block;
-  padding-left: .3rem;
-  border-left: 3px solid transparent;
-  color: var(--toc-link-color);
-  transition: all .2s ease-in-out 0s
-}
-
-#aside-content #card-toc .toc-content .toc-link.active {
-  border-left-color: #0061cc;
-  background: #0079ff;
-  color: #fff
-}
-
-#aside-content #card-toc .toc-content::before {
-  position: absolute;
-  top: .6rem;
-  right: 1.2rem;
-  color: #a9a9a9;
-  content: attr(progress-percentage);
-  font-style: italic;
-  font-size: 1.2rem
-}
-
-#aside-content :only-child > .card-widget {
-  margin-top: 0
-}
-
-#aside-content .card-more-btn {
-  float: right;
-  color: inherit
-}
-
-#aside-content .card-more-btn:hover {
-  animation: 1s ease 0s infinite normal none running more-btn-move
-}
-
-#aside-content .card-info .card-info-data > .card-info-data-item {
-  transition: .3s
-}
+  #card-toc .toc-content li,
+  #card-toc .toc-content ol
+    list-style: none
 
-@media screen and (max-width: 1300px) {
-  #aside-content .sticky_layout {
-    top: 60px
-  }
-}
+  #card-toc .toc-content > ol
+    padding: 0 !important
 
-#aside-content .sticky_layout {
-  top: 80px;
-  transition: top 0s
-}
+  #card-toc .toc-content ol
+    margin: 0
+    padding-left: .4rem
 
-#aside-content .card-widget:hover {
-  box-shadow: var(--sco-shadow-border)
-}
+  #card-toc .toc-content .toc-link
+    display: block
+    padding-left: .3rem
+    border-left: 3px solid transparent
+    color: var(--toc-link-color)
+    transition: all .2s ease-in-out 0s
+
+  #card-toc .toc-content .toc-link.active
+    border-left-color: #0061cc
+    background: #0079ff
+    color: #fff
+
+  #card-toc .toc-content::before
+    position: absolute
+    top: .6rem
+    right: 1.2rem
+    color: #a9a9a9
+    content: attr(progress-percentage)
+    font-style: italic
+    font-size: 1.2rem
 
-#aside-content #card-funds {
-  margin-bottom: 1rem;
-  min-height: 260px
-}
+  :only-child > .card-widget
+    margin-top: 0
 
-#page-header.nav-visible + .layout > .aside-content > .sticky_layout {
-  top: 80px
-}
+  .card-more-btn
+    float: right
+    color: inherit
+
+  .card-more-btn:hover
+    animation: 1s ease 0s infinite normal none running more-btn-move
+
+  .card-info .card-info-data > .card-info-data-item
+    transition: .3s
+
+  @media screen and (max-width: 1300px)
+    .sticky_layout
+      top: 60px
+
+  .sticky_layout
+    top: 80px
+    transition: top 0s
+
+  .card-widget:hover
+    box-shadow: var(--sco-shadow-border)
+
+  #card-funds
+    margin-bottom: 1rem
+    min-height: 260px
+
+  #page-header.nav-visible + .layout > .aside-content > .sticky_layout
+    top: 80px
 
-#aside-content {
   width: 300px
-}
 
-@media screen and (max-width: 1300px) {
-  #aside-content {
-    width: 300px;
+  @media screen and (max-width: 1300px)
+    width: 300px
     animation: slide-in .6s .3s backwards
-  }
-}
 
-@media screen and (max-width: 1200px) {
-  #aside-content {
+  @media screen and (max-width: 1200px)
     display: none
-  }
-}
-
-#aside-content .aside-list > .aside-list-item .content > time {
-  display: none
-}
-
-#aside-content .aside-list > .aside-list-item .content > .title {
-  font-weight: 700;
-  padding: 2px 0
-}
-
-#aside-content .aside-list > .aside-list-item {
-  padding: 6px !important;
-  border-radius: 12px;
-  transition: .3s;
-  margin: 4px 0;
-  cursor: pointer;
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center
-}
 
-#aside-content .aside-list > .aside-list-item:hover .thumbnail > img {
-  transform: scale(1)
-}
+  .aside-list > .aside-list-item .content > time
+    display: none
 
-#aside-content .aside-list > .aside-list-item:not(:last-child) {
-  border-bottom: 0 dashed var(--sco-background) !important
-}
+  .aside-list > .aside-list-item .content > .title
+    font-weight: 700
+    padding: 2px 0
 
-#aside-content .aside-list > .aside-list-item .thumbnail {
-  -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000);
-  border-radius: 8px;
-  border: var(--style-border)
-}
-
-#aside-content .aside-list > .aside-list-item:hover {
-  background: var(--sco-main);
-  color: var(--sco-white);
-  transition: .3s;
-  box-shadow: var(--sco-shadow-main)
-}
-
-#aside-content .aside-list > .aside-list-item:hover a {
-  color: var(--sco-white) !important
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
-  border-radius: 8px;
-  margin: 4px 0;
-  display: flex;
-  flex-direction: column;
-  align-content: space-between;
-  border: var(--style-border)
-}
+  .aside-list > .aside-list-item
+    padding: 6px !important
+    border-radius: 12px
+    transition: .3s
+    margin: 4px 0
+    cursor: pointer
+    display: flex
+    -webkit-box-align: center
+    align-items: center
+
+  .aside-list > .aside-list-item:hover .thumbnail > img
+    transform: scale(1)
+
+  .aside-list > .aside-list-item:not(:last-child)
+    border-bottom: 0 dashed var(--sco-background) !important
+
+  .aside-list > .aside-list-item .thumbnail
+    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+    border-radius: 8px
+    border: var(--style-border)
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
-  width: auto
-}
+  .aside-list > .aside-list-item:hover
+    background: var(--sco-main)
+    color: var(--sco-white)
+    transition: .3s
+    box-shadow: var(--sco-shadow-main)
+
+  .aside-list > .aside-list-item:hover a
+    color: var(--sco-white) !important
+
+  .card-archives ul.card-archive-list > .card-archive-list-item a,
+  .card-categories ul.card-category-list > .card-category-list-item a
+    border-radius: 8px
+    margin: 4px 0
+    display: flex
+    flex-direction: column
+    align-content: space-between
+    border: var(--style-border)
 
-#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: wrap
-}
-
-a.card-archive-list-link-more {
-  color: var(--sco-white) !important;
-  background: var(--sco-card-btn-bg);
-  margin-top: 8px
-}
-
-.card-allinfo hr {
-  display: flex;
-  position: relative;
-  margin: 1rem 0;
-  border: 1px dashed var(--sco-theme-op)
-}
-
-.card-allinfo .item-headline {
-  display: none
-}
-
-span.card-archive-list-count {
-  width: auto;
-  text-align: left;
-  font-size: 1.1rem;
-  line-height: .9;
-  font-weight: 700
-}
+  .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
+  .card-categories ul.card-category-list > .card-category-list-item a span:first-child
+    width: auto
+
+  .card-archives ul.card-archive-list,
+  .card-categories ul.card-category-list
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    flex-wrap: wrap
+
+  a.card-archive-list-link-more
+    color: var(--sco-white) !important
+    background: var(--sco-card-btn-bg)
+    margin-top: 8px
+
+  .card-allinfo hr
+    display: flex
+    position: relative
+    margin: 1rem 0
+    border: 1px dashed var(--sco-theme-op)
+
+  .card-allinfo .item-headline
+    display: none
+
+  span.card-archive-list-count
+    width: auto
+    text-align: left
+    font-size: 1.1rem
+    line-height: .9
+    font-weight: 700
 
-.card-archive-list-count-group {
-  display: flex;
-  flex-direction: row;
+.card-archive-list-count-group
+  display: flex
+  flex-direction: row
   align-items: baseline
-}
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
-  width: fit-content;
-  margin-left: 4px
-}
+#aside-content
+  .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child,
+  .card-categories ul.card-category-list > .card-category-list-item a span:last-child
+    width: fit-content
+    margin-left: 4px
 
-.card-archive-list-count-unit {
-  width: auto;
-  text-align: left;
-  font-size: 14px;
+.card-archive-list-count-unit
+  width: auto
+  text-align: left
+  font-size: 14px
   font-weight: 700
-}
 
-.card-archive-list-date {
-  font-size: 14px;
+.card-archive-list-date
+  font-size: 14px
   opacity: .6
-}
 
-li.card-archive-list-item {
-  width: 100%;
+li.card-archive-list-item
+  width: 100%
   flex: 0 0 48%
-}
 
-.card-category-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+.card-category-list
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
   justify-content: space-between
-}
 
-.card-category-list-item {
+.card-category-list-item
   width: 45%
-}
 
-.card-category-list-count {
+.card-category-list-count
   display: none !important
-}
 
-.card-category-list-name {
-  width: 100% !important;
+.card-category-list-name
+  width: 100% !important
   text-align: center
-}
 
-.webinfo-item {
-  display: flex;
+.webinfo-item
+  display: flex
   white-space: nowrap
-}
 
-.webinfo-item-title {
+.webinfo-item-title
   display: flex
-}
-
-.webinfo-item-title i {
-  line-height: 2 !important;
-  margin-right: 6px;
-  width: 16px;
-  text-align: center;
-  font-size: 16px !important;
-}
-
-@media screen and (min-width: 1300px) {
-  #aside-content {
-    padding-left: 1rem;
+
+.webinfo-item-title i
+  line-height: 2 !important
+  margin-right: 6px
+  width: 16px
+  text-align: center
+  font-size: 16px !important
+
+@media screen and (min-width: 1300px)
+  #aside-content
+    padding-left: 1rem
     animation: slide-in .6s .3s backwards
-  }
 
-  #aside-content .sticky_layout {
+  #aside-content .sticky_layout
     top: calc(60px + 1rem)
-  }
 
-  #page-header.nav-visible + .layout > .aside-content > .sticky_layout {
+  #page-header.nav-visible + .layout > .aside-content > .sticky_layout
     top: calc(60px + 1rem)
-  }
 
-  [data-theme=dark] #aside-content > .card-widget.card-info {
-    border: var(--style-border)
-  }
+  [data-theme=dark] #aside-content > .card-widget.card-info
+    border: var(--style-border-always)
 
-  .coverdiv {
+  .coverdiv
     height: 130%
-  }
-}
-
-#aside-content .card-widget#card-music {
-  background: var(--sco-pink);
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  padding: 0;
-  cursor: pointer;
-  border: none
-}
-
-#aside-content .card-widget#card-music img {
-  max-height: 110px;
-  object-fit: cover
-}
-
-#aside-content .card-widget#card-music:hover img {
-  transition: .5s;
-  -webkit-backface-visibility: hidden;
-  -webkit-transform-style: preserve-3d
-}
-
-#aside-content .card-widget#card-friendlinks {
-  background: var(--sco-main);
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  padding: 0;
-  cursor: pointer;
-  border: none
-}
-
-#aside-content .card-widget#card-friendlinks img {
-  max-height: 110px;
-  object-fit: cover
-}
-
-#aside-content .card-widget#card-friendlinks:hover img {
-  transition: .5s;
-  -webkit-backface-visibility: hidden;
-  -webkit-transform-style: preserve-3d
-}
 
-#aside-content .card-widget.card-power, #aside-content .card-widget.card-history, #aside-content .card-widget.card-welcome {
-  padding: .4rem .6rem !important
-}
-
-#aside-content .card-widget.card-power .power-charge {
-  margin-left: auto;
-  color: var(--sco-secondtext);
-  font-size: 14px;
-  line-height: 1
-}
-
-#aside-content .card-widget.card-power .power-charge:hover {
-  color: var(--sco-lighttext)
-}
-
-.power-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+#aside-content
+  .card-widget#card-music
+    background: var(--sco-pink)
+    display: flex
+    justify-content: center
+    align-content: center
+    padding: 0
+    cursor: pointer
+    border: none
+
+  .card-widget#card-music img
+    max-height: 110px
+    object-fit: cover
+
+  .card-widget#card-music:hover img
+    transition: .5s
+    -webkit-backface-visibility: hidden
+    -webkit-transform-style: preserve-3d
+
+  .card-widget#card-friendlinks
+    background: var(--sco-main)
+    display: flex
+    justify-content: center
+    align-content: center
+    padding: 0
+    cursor: pointer
+    border: none
+
+  .card-widget#card-friendlinks img
+    max-height: 110px
+    object-fit: cover
+
+  .card-widget#card-friendlinks:hover img
+    transition: .5s
+    -webkit-backface-visibility: hidden
+    -webkit-transform-style: preserve-3d
+
+  .card-widget.card-power, .card-widget.card-history, .card-widget.card-welcome
+    padding: .4rem .6rem !important
+
+  .card-widget.card-power .power-charge
+    margin-left: auto
+    color: var(--sco-secondtext)
+    font-size: 14px
+    line-height: 1
+
+  .card-widget.card-power .power-charge:hover
+    color: var(--sco-lighttext)
+
+.power-list
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
   margin: 0 -4px
-}
 
-.power-list .power-item .power-item-link a {
-  padding: 2px 4px;
-  border-radius: 4px;
+.power-list .power-item .power-item-link a
+  padding: 2px 4px
+  border-radius: 4px
   margin-left: 8px
-}
 
-.power-list .power-item .power-item-link a:hover {
-  background: var(--sco-main);
+.power-list .power-item .power-item-link a:hover
+  background: var(--sco-main)
   color: var(--sco-white)
-}
 
-#aside-content .power-item-body {
-  display: flex;
-  flex-direction: row;
+#aside-content .power-item-body
+  display: flex
+  flex-direction: row
   flex-wrap: wrap
-}
-
-a#power-star {
-  display: flex;
-  padding: 8px;
-  border: var(--style-border-always);
-  border-radius: 8px;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  position: relative;
-  margin: 12px 0;
-  background: var(--sco-secondbg);
+
+a#power-star
+  display: flex
+  padding: 8px
+  border: var(--style-border-always)
+  border-radius: 8px
+  flex-direction: row
+  flex-wrap: nowrap
+  justify-content: flex-start
+  position: relative
+  margin: 12px 0
+  background: var(--sco-secondbg)
   transition: .3s ease-out
-}
-
-a#power-star:hover {
-  background: var(--sco-main);
-  color: var(--sco-white);
-  box-shadow: var(--sco-shadow-theme);
-}
-
-a#power-star:hover #power-star-image {
-  transform: scale(.9);
-}
-
-#power-star-image {
-  width: 60px;
-  height: 60px;
-  border-radius: 60px;
-  background-size: cover;
-  margin-right: 12px;
-  border: var(--style-border-always);
-  transition: .3s ease-out;
-}
-
-div#power-star-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1;
+
+a#power-star:hover
+  background: var(--sco-main)
+  color: var(--sco-white)
+  box-shadow: var(--sco-shadow-theme)
+
+a#power-star:hover #power-star-image
+  transform: scale(.9)
+
+#power-star-image
+  width: 60px
+  height: 60px
+  border-radius: 60px
+  background-size: cover
+  margin-right: 12px
+  border: var(--style-border-always)
+  transition: .3s ease-out
+
+div#power-star-title
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+  font-size: 16px
+  font-weight: 700
+  line-height: 1
   margin-bottom: 8px
-}
-
-#power-star-desc {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  font-size: 12px;
-  max-width: 100%;
+
+#power-star-desc
+  display: -webkit-box
+  -webkit-box-orient: vertical
+  -webkit-line-clamp: 2
+  overflow: hidden
+  font-size: 12px
+  max-width: 100%
   line-height: 1.2
-}
-
-.power-star-body {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  position: relative;
-  width: calc(100% - 68px);
+
+.power-star-body
+  display: flex
+  flex-direction: column
+  align-items: flex-start
+  flex-wrap: wrap
+  position: relative
+  width: calc(100% - 68px)
   justify-content: center
-}
 
-#card-vip-designweekly.card-widget {
-  display: flex !important;
-  padding: 0;
+#card-vip-designweekly.card-widget
+  display: flex !important
+  padding: 0
   cursor: pointer
-}
 
-#card-vip-designweekly.card-widget .card-vip-designweekly-img {
-  width: 100%;
+#card-vip-designweekly.card-widget .card-vip-designweekly-img
+  width: 100%
   object-fit: cover
-}
-
-.card-vip-tips {
-  display: flex;
-  position: absolute;
-  font-size: 12px;
-  bottom: 8px;
-  left: 8px;
-  padding: 1px 6px;
-  background: var(--sco-black-op);
-  border-radius: 8px;
-  color: var(--sco-white)
-}
-
-#aside-content .card-widget {
-  box-shadow: var(--sco-shadow-border);
-  background: var(--sco-card-bg);
-  border: var(--style-border);
-  transition: .3s;
-  border-radius: 12px;
-  position: relative;
-  overflow: hidden;
-  margin-top: 1rem;
-  padding: 1rem 1.2rem
-}
-
-#aside-content #card-toc .toc-content .toc-link.active {
-  line-height: 24px;
-  border-radius: 12px;
-  border-left-color: var(--sco-hovertext);
-  background-color: var(--sco-card-bg);
-  color: var(--sco-lighttext);
-  font-weight: 700;
-  font-size: 20px
-}
-
-[data-theme=dark].toc .toc-item.active .toc-link .toc-text {
-  color: var(--sco-white)
-}
 
-#aside-content #card-toc .toc-content .toc-item.active .toc-link {
-  opacity: 1;
+.card-vip-tips
+  display: flex
+  position: absolute
+  font-size: 12px
+  bottom: 8px
+  left: 8px
+  padding: 1px 6px
+  background: var(--sco-black-op)
   border-radius: 8px
-}
-
-#aside-content #card-toc .toc-content .toc-link {
-  line-height: 24px;
-  padding: 8px;
-  border-left: 0 solid transparent;
-  border-radius: 12px;
-  color: var(--sco-secondtext);
-  cursor: default;
-  min-height: 40px;
-  display: flex;
-  align-items: center
-}
+  color: var(--sco-white)
 
-#aside-content #card-toc .toc-content .toc-link:not(.active) span {
-  opacity: .6;
-  cursor: pointer;
-  filter: blur(1px);
+#aside-content .card-widget
+  box-shadow: var(--sco-shadow-border)
+  background: var(--sco-card-bg)
+  border: var(--style-border)
   transition: .3s
-}
+  border-radius: 12px
+  position: relative
+  overflow: hidden
+  margin-top: 1rem
+  padding: 1rem 1.2rem
 
-#aside-content #card-toc:hover .toc-content .toc-link:not(.active) span {
-  filter: blur(0);
-  opacity: 1
-}
+#aside-content
+  #card-toc
+    .toc-content
+      .toc-link
+        line-height: 24px
+        padding: 8px
+        border-left: 0 solid transparent
+        border-radius: 12px
+        color: var(--sco-secondtext)
+        cursor: default
+        min-height: 40px
+        display: flex
+        align-items: center
+
+        &.active
+          border-radius: 12px
+          border-left-color: var(--sco-hovertext)
+          background-color: var(--sco-card-bg)
+          color: var(--sco-lighttext)
+          font-weight: 700
+          font-size: 20px
+
+        &:not(.active) span
+          opacity: .6
+          cursor: pointer
+          filter: blur(1px)
+          transition: .3s
+
+          &:hover
+            color: var(--sco-lighttext)
+
+      .toc-item.active .toc-link
+        opacity: 1
+        border-radius: 8px
+
+    &:hover
+      .toc-content
+        .toc-link:not(.active) span
+          filter: blur(0)
+          opacity: 1
+
+  .card-tag-cloud
+    a sup
+      opacity: .6
+      margin-left: 2px
+
+  .card-info
+    .author-info__name
+      text-align: left
+      font-weight: 700
+      color: var(--sco-card-bg)
+      font-size: 20px
+      line-height: 1
+      margin-bottom: 5px
+
+    .card-info-social-icons
+      margin: 0
+      display: flex
+      justify-content: flex-start
+      flex-direction: row
+      flex-wrap: nowrap
+      cursor: pointer
+
+      .social-icon
+        margin: 0 0 0 8px
+
+      i
+        background: var(--sco-white-op)
+        color: var(--sco-white)
+        font-size: 1rem
+        width: 40px
+        height: 40px
+        display: flex
+        align-items: center
+        justify-content: center
+
+        &:hover
+          background: var(--sco-white)
+          transform: scale(1.1)
+          color: var(--sco-main)
+          box-shadow: none
+
+    .card-info-data
+      display: none
+
+    a img
+      border-radius: 0
+      height: 200px
+      display: inherit
+      filter: drop-shadow(-5px 14px 8px #00000008)
+      position: absolute
+      right: -24px
+      bottom: -82px
+      width: auto
+      z-index: 0
+      transition: cubic-bezier(.48, -.21, 0, 1.5) .3s
+
+      &:hover
+        bottom: -42px
+
+    .banner-button
+      height: 40px
+      width: 118px
+      border-radius: 20px
+      justify-content: center
+
+  > .card-widget:first-child
+    transition: .3s
+    border: none
+    box-shadow: none
+    background: var(--sco-main)
+    margin-top: 0
+
+  > .card-widget.card-info
+    background: var(--sco-card-bg)
+    box-shadow: var(--sco-shadow-black)
+    position: relative
+
+    &:before
+      background: linear-gradient(-25deg, var(--sco-main), var(--sco-main-op-deep), var(--sco-main), var(--sco-main-op-deep))
+      background-size: 400%
+      position: absolute
+      width: 100%
+      height: 100%
+      left: 0
+      top: 0
+      content: ''
+      animation: gradient 15s ease infinite
+
+    > div.card-content
+      padding: 1rem 1.2rem
+      min-height: 320px
+      position: relative
+
+    > div.card-info-avatarimg
+      overflow: hidden
+      background: var(--sco-yellow)
+      transition: 1.5s
+      min-height: 160px
+      position: relative
+      box-shadow: var(--sco-shadow-yellow)
+
+      &:hover img
+        transform: scale(1.03)
+
+    .banner-button-group
+      position: absolute
+      right: 1rem
+      bottom: 1rem
+      display: flex
+      -webkit-user-select: none
+
+      .banner-button
+        padding: 8px 12px
+        background: var(--sco-white-op)
+        border-radius: 12px
+        color: var(--sco-white)
+        display: flex
+        align-items: center
+        z-index: 1
+        transition: .3s
+        cursor: pointer
+
+        &:hover
+          background: var(--sco-white)
+          color: var(--sco-black)
+
+        i
+          margin-right: 8px
+          font-size: 22px
+
+  > div.card-widget.card-info > div > div.card-info-data > div:nth-child(0) > a > div.headline
+    font-weight: 700
+
+  .card-info #card-info-btn
+    display: none
 
-#aside-content #card-toc .toc-content .toc-link:not(.active) span:hover {
-  color: var(--sco-lighttext)
-}
+  .card-tag-cloud
+    a
+      color: var(--sco-fontcolor)
+      font-size: .8rem
+      border-radius: 8px
+
+      &:hover
+        background var(--sco-theme)
+        color var(--sco-white)!important
+        box-shadow var(--sco-shadow-theme)
+        cursor pointer
+        border-radius 5px
+
+      &.tags-cloud-more
+        width: 100%
+        text-align: center
+        border-radius: 8px !important
+        border: var(--style-border)
+        margin-top: 8px
+        font-size: 16px !important
+
+  .card-archives
+    ul.card-archive-list > .card-archive-list-item
+      a:hover
+        color: var(--sco-white)
+        background-color: var(--sco-theme)
+        box-shadow: var(--sco-shadow-theme)
+        border-radius: 8px
+        padding: .15rem .5rem
+        border: var(--style-border-hover)
+        cursor pointer
+
+  #card-toc .toc-content:before
+    display: none
 
-#card-toc {
-  padding: .5rem .5rem !important
-}
-
-#aside-content .card-tag-cloud a sup {
-  opacity: .6;
-  margin-left: 2px
-}
-
-div#author-info__sayhi {
-  text-align: center;
-  width: fit-content;
-  color: var(--sco-white);
-  background: var(--sco-white-op);
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 12px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  transition: .3s;
-  margin: auto;
+[data-theme=dark]
+  .toc
+    .toc-item.active .toc-link .toc-text
+      color: var(--sco-white)
+
+  .page
+    div#author-info__sayhi
+      background: #00000015
+      color: var(--sco-black)
+
+    &:hover
+      background: var(--sco-black)
+
+    #aside-content
+      .card-info
+        .card-info-social-icons
+          i:hover
+            background: var(--sco-card-bg)
+            color: var(--sco-fontcolor)
+
+  .page #aside-content .card-info .card-info-social-icons i:hover
+    background: var(--sco-card-bg)
+    color: var(--sco-fontcolor)
+
+div#author-info__sayhi
+  text-align: center
+  width: fit-content
+  color: var(--sco-white)
+  background: var(--sco-white-op)
+  font-size: 12px
+  padding: 2px 8px
+  border-radius: 12px
+  cursor: pointer
+  -webkit-user-select: none
+  transition: .3s
+  margin: auto
   min-width: 100px
-}
-
-div#author-info__sayhi:hover {
-  background: var(--sco-card-bg);
-  color: var(--sco-fontcolor);
-  transform: scale(1.1)
-}
-
-#aside-content .card-info .author-info__name {
-  text-align: left;
-  font-weight: 700;
-  color: var(--sco-card-bg);
-  font-size: 20px;
-  line-height: 1;
-  margin-bottom: 5px
-}
-
-.author-info__desc {
-  font-size: 12px;
-  color: var(--sco-card-bg);
-  opacity: .6;
-  line-height: 1.5;
-  -webkit-line-clamp: 2;
-  display: -webkit-box;
-  overflow: hidden;
+
+  &:hover
+    background: var(--sco-card-bg)
+    color: var(--sco-fontcolor) !important
+    transform: scale(1.1)
+
+.author-info__desc
+  font-size: 12px
+  color: var(--sco-card-bg)
+  opacity: .6
+  line-height: 1.5
+  -webkit-line-clamp: 2
+  display: -webkit-box
+  overflow: hidden
   -webkit-box-orient: vertical
-}
-
-.avatar-img-group {
-  width: 118px;
-  height: 118px;
-  right: calc(50% - 59px);
-  top: 90px;
-  border-radius: 500px;
-  position: absolute;
-  transition: cubic-bezier(.69, .39, 0, 1.21) .3s;
-  transform-origin: bottom;
+
+.avatar-img-group
+  width: 118px
+  height: 118px
+  right: calc(50% - 59px)
+  top: 90px
+  border-radius: 500px
+  position: absolute
+  transition: cubic-bezier(.69, .39, 0, 1.21) .3s
+  transform-origin: bottom
   border: 5px solid var(--sco-card-bg)
-}
-
-#aside-content .card-info:hover .avatar-img-group {
-  opacity: 0;
-  transform: scale(0)
-}
-
-.avatar-sticker {
-  position: absolute;
-  bottom: 2px;
-  right: 2px;
-  width: 33px;
-  height: 33px;
-  line-height: 34px;
-  z-index: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: .3s .2s;
-  transform: scale(1);
-  background: var(--sco-white);
+
+  #aside-content .card-info:hover &
+    opacity: 0
+    transform: scale(0)
+
+.avatar-sticker
+  position: absolute
+  bottom: 2px
+  right: 2px
+  width: 33px
+  height: 33px
+  line-height: 34px
+  z-index: 0
+  display: flex
+  align-items: center
+  justify-content: center
+  transition: .3s .2s
+  transform: scale(1)
+  background: var(--sco-white)
   border-radius: 50%
-}
-
-.avatar-sticker svg {
-
-  width: 26px;
-  height: 26px
-}
-
-.card-widget:hover .avatar-sticker {
-  opacity: 0;
-  transform: scale(0)
-}
-
-#aside-content > .card-widget:first-child {
-  transition: .3s;
-  border: none;
-  box-shadow: none;
-  background: var(--sco-main);
-  margin-top: 0
-}
-
-#aside-content > .card-widget.card-info {
-  background: var(--sco-card-bg);
-  box-shadow: var(--sco-shadow-black);
-  position: relative
-}
-
-#aside-content > .card-widget.card-info::before {
-  background: linear-gradient(-25deg, var(--sco-main), var(--sco-main-op-deep), var(--sco-main), var(--sco-main-op-deep));
-  background-size: 400%;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  content: '';
-  animation: gradient 15s ease infinite
-}
-
-@media screen and (max-width: 1300px) {
-  #aside-content > .card-widget:first-child {
+
+  svg
+    width: 26px
+    height: 26px
+
+  .card-widget:hover &
+    opacity: 0
+    transform: scale(0)
+
+#card-toc
+  padding: .5rem .5rem !important
+
+@media screen and (max-width: 1300px)
+  #aside-content > .card-widget:first-child
     min-height: 329px
-  }
-}
 
-.author-info__description {
-  line-height: 1.38;
-  margin: .3rem 0;
-  text-align: justify;
-  color: rgba(255, 255, 255, .8)
-}
+@media screen and (max-width: 900px)
+  #aside-content
+    .card-announcement
+      display: none
 
-.author-info__description b {
-  color: var(--sco-white)
-}
-
-.author-info__description_group {
-  position: absolute;
-  top: 50px;
-  width: 100%;
-  left: 0;
-  padding: 1.2rem;
-  opacity: 0;
-  transition: .3s
-}
-
-.card-widget:hover .author-info__description_group {
-  opacity: 1
-}
-
-.author-info__description2 {
-  line-height: 1.38;
-  margin: .3rem 0;
-  text-align: justify;
-  width: 100%;
-  z-index: 2;
-  color: rgba(255, 255, 255, .8)
-}
+    #card-funds
+      display: none
 
-.author-info__description2 b {
-  color: var(--sco-white)
-}
+@media screen and (min-width: 1300px)
+  #aside-content
+    .card-info
+      .card-info-social-icons i
+        color: var(--sco-white)
+        background: var(--sco-black-op)
 
-.card-widget.card-info .banner-button-group {
-  position: absolute;
-  right: 1rem;
-  bottom: 1rem;
-  display: flex;
-  -webkit-user-select: none
-}
-
-.card-widget.card-info .banner-button-group .banner-button {
-  padding: 8px 12px;
-  background: var(--sco-white-op);
-  border-radius: 12px;
-  color: var(--sco-white);
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  transition: .3s;
-  cursor: pointer
-}
-
-.card-widget.card-info .banner-button-group .banner-button:hover {
-  background: var(--sco-white);
-  color: var(--sco-black)
-}
-
-.card-widget.card-info .banner-button-group .banner-button i {
-  margin-right: 8px;
-  font-size: 22px
-}
-
-#aside-content .card-info .card-info-data {
-  display: none
-}
-
-#aside-content .card-info a img {
-  border-radius: 0;
-  height: 200px;
-  display: inherit;
-  filter: drop-shadow(-5px 14px 8px #00000008);
-  position: absolute;
-  right: -24px;
-  bottom: -82px;
-  width: auto;
-  z-index: 0;
-  transition: cubic-bezier(.48, -.21, 0, 1.5) .3s
-}
-
-#aside-content .card-info a img:hover {
-  bottom: -42px
-}
-
-[data-theme=light] #aside-content .card-info a img {
-  filter: drop-shadow(-5px 14px 8px #ffffff08)
-}
-
-.card-widget.card-info {
-  padding: 0 !important
-}
-
-#aside-content > div.card-widget.card-info > div.card-content {
-  padding: 1rem 1.2rem;
-  min-height: 320px;
-  position: relative
-}
-
-#aside-content > div.card-widget.card-info > div.card-info-avatarimg {
-  overflow: hidden;
-  background: var(--sco-yellow);
-  transition: 1.5s;
-  min-height: 160px;
-  position: relative;
-  box-shadow: var(--sco-shadow-yellow)
-}
-
-#aside-content > div.card-widget.card-info > div.card-info-avatarimg:hover img {
-  transform: scale(1.03)
-}
-
-#aside-content > div.card-widget.card-info > div > div.card-info-data > div:nth-child(0) > a > div.headline {
-  font-weight: 700
-}
+    [data-theme=dark] .card-info .card-info-social-icons i
+      color: var(--sco-card-bg)
 
-@media screen and (max-width: 900px) {
-  #aside-content .card-announcement {
-    display: none
-  }
+@media screen and (max-width: 768px)
+  #aside-content .card-widget
+    border-radius: 12px
 
-  #aside-content #card-funds {
-    display: none
-  }
-}
-
-#aside-content .card-info #card-info-btn {
-  display: none
-}
-
-.author-info__bottom-group {
-  display: flex;
-  justify-content: space-between;
-  position: absolute;
-  padding: 1.2rem;
-  width: 100%;
-  left: 0;
-  bottom: 0;
-  align-items: center
-}
-
-#aside-content .card-info .card-info-social-icons {
-  margin: 0;
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  cursor: pointer
-}
-
-#aside-content .card-info .card-info-social-icons .social-icon {
-  margin: 0 0 0 8px;
-}
-
-#aside-content .card-info .card-info-social-icons i {
-  background: var(--sco-white-op);
-  color: var(--sco-white);
-  font-size: 1rem;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center
-}
-
-#aside-content .card-info .card-info-social-icons i:hover {
-  background: var(--sco-white);
-  transform: scale(1.1);
-  color: var(--sco-main);
-  box-shadow: none
-}
-
-[data-theme=dark] .page #aside-content .card-info .card-info-social-icons i:hover {
-  background: var(--sco-card-bg);
-  color: var(--sco-fontcolor);
-}
-
-#aside-content .card-info .banner-button {
-  height: 40px;
-  width: 118px;
-  border-radius: 20px;
-  justify-content: center
-}
+@media screen and (min-width: 1300px)
+  #aside-content .card-widget
+    margin-top: 1rem
 
-@media screen and (min-width: 1300px) {
-  #aside-content .card-info .card-info-social-icons i {
-    color: var(--sco-white)
-    background: var(--sco-black-op)
-  }
+.author-info__description
+  line-height: 1.38
+  margin: .3rem 0
+  text-align: justify
+  color: rgba(255, 255, 255, .8)
 
-  [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
-    color: var(--sco-card-bg)
-  }
-}
+  b
+    color: var(--sco-white)
 
-#aside-content .card-info .card-info-data > .card-info-data-item:hover {
-  background: var(--sco-post-blockquote-bg);
-  transform: scale(.97)
-}
+.author-info__description_group
+  position: absolute
+  top: 50px
+  width: 100%
+  left: 0
+  padding: 1.2rem
+  opacity: 0
+  transition: .3s
 
-#aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.headline, #aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.length-num {
-  color: var(--sco-blue)
-}
+  .card-widget:hover &
+    opacity: 1
 
-.announcement_content p {
-  margin: .5rem 0 0 0;
+.author-info__description2
   line-height: 1.38
-}
-
-#aside-content .item-headline {
-  padding-bottom: 0;
-  margin-left: 8px;
-  font-size: 1em;
-  font-weight: 700;
-  display: flex;
-  align-items: center
-}
+  margin: .3rem 0
+  text-align: justify
+  width: 100%
+  z-index: 2
+  color: rgba(255, 255, 255, .8)
 
-#aside-content .item-headline span {
-  margin-left: 4px
-}
+  b
+    color: var(--sco-white)
 
-#aside-content .card-allinfo .item-headline {
-  display: none
-}
+.author-info__bottom-group
+  display: flex
+  justify-content: space-between
+  position: absolute
+  padding: 1.2rem
+  width: 100%
+  left: 0
+  bottom: 0
+  align-items: center
 
-#aside-content .item-headline i {
-  min-width: 20px;
-  font-size: 18px
-}
+.card-widget
+  &:hover .avatar-sticker
+    opacity: 0
+    transform: scale(0)
 
-#aside-content .item-headline + div, #aside-content .item-headline + ul {
-  padding: 0;
-  -webkit-user-select: none
-}
+  &.card-info
+    padding: 0 !important
 
-@media screen and (min-width: 1300px) {
-  #aside-content .card-widget {
-    margin-top: 1rem
-  }
-}
+  &.card-recent-post
+    padding: .4rem .6rem !important
 
-@media screen and (max-width: 768px) {
-  #aside-content .card-widget {
-    border-radius: 12px
-  }
-}
-
-#aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center {
-  margin-top: 8px;
-  background: var(--sco-card-btn-bg);
-  border-radius: 8px;
-  transition: .3s !important
-}
-
-#aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center :hover {
-  color: var(--sco-white);
-  background: var(--sco-blue);
-  border-radius: 8px;
-  transition: .3s !important
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item.more span, #aside-content .card-categories ul.card-category-list > .card-category-list-item.more span {
-  transition: .3s !important
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item:hover.more span, #aside-content .card-categories ul.card-category-list > .card-category-list-item.more span {
-  transition: .3s !important
-}
-
-#aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center :hover span {
-  background: 0 0
-}
-
-#aside-content .card-tag-cloud a {
-  color: var(--sco-fontcolor) !important;
-  font-size: .8rem;
-  border-radius: 8px
-}
+  &.card-info
+    .banner-button-group
+      .banner-button
+        i
+          margin-right: 8px
+          font-size: 22px
 
-#aside-content .card-tag-cloud a:hover {
-  background: var(--sco-theme);
-  color: var(--sco-white) !important;
-  box-shadow: var(--sco-shadow-theme)
-}
-
-#aside-content .card-tag-cloud a.tags-cloud-more {
-  width: 100%;
-  text-align: center;
-  border-radius: 8px !important;
-  border: var(--style-border);
-  margin-top: 8px;
-  font-size: 16px !important
-}
-
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
-  color: var(--sco-white);
-  background-color: var(--sco-theme);
-  box-shadow: var(--sco-shadow-theme);
-  border-radius: 8px;
-  padding: .15rem .5rem;
-  border: var(--style-border-hover);
-  cursor pointer
-}
-
-#aside-content #card-toc .toc-content:before {
-  display: none
-}
-
-.page .sticky_layout {
-  display: flex;
-  -webkit-box-orient: vertical;
-  flex-direction: column
-}
+.page
+  .sticky_layout
+    display: flex
+    -webkit-box-orient: vertical
+    flex-direction: column
 
-#card-info-btn {
-  border-radius: 25px;
+#card-info-btn
+  border-radius: 25px
   overflow: hidden
-}
 
-#card-info-btn:before {
-  border-radius: 25px
-}
+  &:before
+    border-radius: 25px
 
-.card-widget.card-recent-post {
+.card-widget.card-recent-post
   padding: .4rem .6rem !important
-}
 
-#card-funds .funds-list::-webkit-scrollbar {
+#card-funds .funds-list::-webkit-scrollbar
   display: none !important
-}
\ No newline at end of file
+
+.announcement_content p
+  margin: .5rem 0 0 0
+  line-height: 1.38
+
+#aside-content
+  .item-headline
+    padding-bottom: 0
+    margin-left: 8px
+    font-size: 1em
+    font-weight: 700
+    display: flex
+    align-items: center
+
+    span
+      margin-left: 4px
+
+    + div, + ul
+      padding: 0
+      -webkit-user-select: none
+
+  .card-allinfo
+    .item-headline
+      display: none
+
+  .item-headline
+    i
+      min-width: 20px
+      font-size: 18px
+
+  > div.sticky_layout
+    > div.card-widget.card-archives
+      > div
+        > ul
+          > li.card-archive-list-item.more.is-center
+            margin-top: 8px
+            background: var(--sco-card-btn-bg)
+            border-radius: 8px
+            transition: .3s !important
+
+            &:hover
+              color: var(--sco-white)
+              background: var(--sco-blue)
+              border-radius: 8px
+              transition: .3s !important
+
+  .card-archives
+    ul.card-archive-list
+      > .card-archive-list-item.more span
+        transition: .3s !important
+
+      > .card-archive-list-item:hover.more span
+        transition: .3s !important
+
+  > div.sticky_layout
+    > div.card-widget.card-archives
+      > div
+        > ul
+          > li.card-archive-list-item.more.is-center :hover span
+            background: 0 0
+
+  .card-tag-cloud a
+    color: var(--sco-fontcolor)
+    font-size: .8rem
+    border-radius: 8px
+
+    &:hover
+      background var(--sco-theme)
+      color var(--sco-white)!important
+      box-shadow var(--sco-shadow-theme)
+      cursor pointer
+      border-radius 5px
+
+    &.tags-cloud-more
+      width: 100%
+      text-align: center
+      border-radius: 8px !important
+      border: var(--style-border)
+      margin-top: 8px
+      font-size: 16px !important
+
+  .card-archives
+    ul.card-archive-list
+      > .card-archive-list-item a:hover
+        color: var(--sco-white)
+        background-color: var(--sco-theme)
+        box-shadow: var(--sco-shadow-theme)
+        border-radius: 8px
+        padding: .15rem .5rem
+        border: var(--style-border-hover)
+        cursor pointer
+
+  #card-toc .toc-content:before
+    display: none
+
+  > div.sticky_layout
+    > div.card-widget.card-archives
+      > div
+        > ul
+          > li.card-archive-list-item.more.is-center
+            margin-top: 8px
+            background: var(--sco-card-btn-bg)
+            border-radius: 8px
+            transition: .3s !important
+
+            &:hover
+              color: var(--sco-white)
+              background: var(--sco-blue)
+              border-radius: 8px
+              transition: .3s !important
+
+  .card-archives
+    ul.card-archive-list
+      > .card-archive-list-item.more span
+        transition: .3s !important
+
+      > .card-archive-list-item:hover.more span
+        transition: .3s !important
+
+  > div.sticky_layout
+    > div.card-widget.card-archives
+      > div
+        > ul
+          > li.card-archive-list-item.more.is-center :hover span
+            background: 0 0
+
+  .card-tag-cloud a
+    color: var(--sco-fontcolor)
+    font-size: .8rem
+    border-radius: 8px
+
+    &:hover
+      background var(--sco-theme)
+      color var(--sco-white)!important
+      box-shadow var(--sco-shadow-theme)
+      cursor pointer
+      border-radius 5px
+
+    &.tags-cloud-more
+      width: 100%
+      text-align: center
+      border-radius: 8px !important
+      border: var(--style-border)
+      margin-top: 8px
+      font-size: 16px !important
+
+  .card-archives
+    ul.card-archive-list
+      > .card-archive-list-item a:hover
+        color: var(--sco-white)
+        background-color: var(--sco-theme)
+        box-shadow: var(--sco-shadow-theme)
+        border-radius: 8px
+        padding: .15rem .5rem
+        border: var(--style-border-hover)
+        cursor pointer
+
+  #card-toc .toc-content:before
+    display: none
+
+  > div.sticky_layout
+    > div.card-widget.card-archives
+      > div
+        > ul
+          > li.card-archive-list-item.more.is-center
+            margin-top: 8px
+            background: var(--sco-card-btn-bg)
+            border-radius: 8px
+            transition: .3s !important
+
+            &:hover
+              color: var(--sco-white)
+            background: var(--sco-blue)
+            border-radius: 8px
+            transition: .3s !important
+
+  .card-archives
+    ul.card-archive-list
+      > .card-archive-list-item.more span
+        transition: .3s !important
+
+      > .card-archive-list-item:hover.more span
+        transition: .3s !important
+
+  > div.sticky_layout
+    > div.card-widget.card-archives
+      > div
+        > ul
+          > li.card-archive-list-item.more.is-center :hover span
+            background: 0 0
+
+  .card-tag-cloud a
+    color: var(--sco-fontcolor)
+    font-size: .8rem
+    border-radius: 8px
+
+    &:hover
+      background var(--sco-theme)
+      color var(--sco-white)!important
+      box-shadow var(--sco-shadow-theme)
+      cursor pointer
+      border-radius 5px
+
+    &.tags-cloud-more
+      width: 100%
+      text-align: center
+      border-radius: 8px !important
+      border: var(--style-border)
+      margin-top: 8px
+      font-size: 16px !important
+
+  .card-archives
+    ul.card-archive-list
+      > .card-archive-list-item a:hover
+        color: var(--sco-white)
+        background-color: var(--sco-theme)
+        box-shadow: var(--sco-shadow-theme)
+        border-radius: 8px
+        padding: .15rem .5rem
+        border: var(--style-border-hover)
+        cursor pointer
+
+  #card-toc .toc-content:before
+    display: none
+
+if hexo-config('aside.tags.highlight')
+  for tag in highlightTags
+    tag = '"/tags/' + tag + '/"'
+    #aside-content .card-tag-cloud a[href*={tag}]
+      color var(--sco-lighttext)
+      font-weight 500
\ No newline at end of file
diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl
index b7e3b588..ee54618a 100644
--- a/source/css/_layout/footer.styl
+++ b/source/css/_layout/footer.styl
@@ -170,7 +170,7 @@ div#sco-footer-bar
   .footer-title-group
     display: flex
     align-items: center
-    margin: 1rem 0 .7rem 0
+    margin: 1rem 0 .7rem 8px
 
     a
       margin-left: 8px
@@ -186,6 +186,9 @@ div#sco-footer-bar
       font-size: 16px
       opacity: .6
 
+    .footer-title
+      margin 0
+
   .footer-title
     color: var(--sco-secondtext)
     font-size: .8rem
diff --git a/source/css/_layout/header.styl b/source/css/_layout/header.styl
index 1910640b..8e48361d 100644
--- a/source/css/_layout/header.styl
+++ b/source/css/_layout/header.styl
@@ -123,11 +123,9 @@
         height 15rem
 
   #post-info
+    top 0
     position absolute
     padding 0 3rem
-    width 100%
-    text-align center
-    top 0
     margin 0 auto
     z-index 10
     color var(--sco-white)
@@ -138,6 +136,8 @@
     height calc(100% + 0px)
     justify-content center
     animation slide-in .6s 0s backwards
+    width 100%
+    text-align center
 
     +minWidth1300()
       height calc(100% + 0px)
@@ -407,14 +407,12 @@
   flex-wrap wrap
   -webkit-box-align center
   align-items center
-  padding 0 36px
   width 100%
   height 60px
   font-size 1.3em
   opacity 0
   transition all .5s ease 0s
   outline 1px solid var(--sco-none)
-  flex-wrap nowrap
   justify-content space-between
 
   +maxWidth768()
@@ -511,8 +509,8 @@
       color var(--sco-white)
 
       +maxWidth768()
-        background var(--sco-none) !important
-        box-shadow none !important
+        background var(--sco-none)
+        box-shadow none
         transition .3s
         color var(--sco-fontcolor)
 
@@ -625,26 +623,6 @@
           padding 4px
           transition transform .3s ease 0s
 
-      &:last-child
-        .menus_item_child
-          &::after
-            position absolute
-            top -60px
-            right 0
-            width 50%
-            height 60px
-            content ""
-
-      &:first-child
-        .menus_item_child
-          &::after
-            position absolute
-            top -60px
-            left 0
-            width 50%
-            height 60px
-            content ""
-
   &.hide-menu
     #toggle-menu
       display inline-block
@@ -884,7 +862,7 @@
     #site-name
       &:hover
         +minWidth900()
-          background var(--sco-main)
+          background var(--sco-main) !important
 
       i
         color var(--sco-fontcolor)
@@ -896,7 +874,7 @@
 
   .back-home-button
     &:hover
-      background var(--sco-main)
+      background var(--sco-main) !important
       color var(--sco-white) !important
 
   .menus_item
@@ -1422,4 +1400,23 @@ a.console_switchbutton
 
 #nav-console
   +maxWidth768()
-    display none
\ No newline at end of file
+    display none
+
++minWidth768()
+  .menus_item:hover > a.site-page
+    color var(--sco-card-bg) !important;
+    background var(--sco-white-op);
+    transition .3s;
+    box-shadow var(--sco-shadow-main)
+
+  .page .menus_item:hover > a.site-page
+    color var(--sco-card-bg) !important
+    background var(--sco-main);
+    transition .3s;
+    box-shadow var(--sco-shadow-main)
+
+  .post .menus_item:hover > a.site-page
+    color var(--sco-white)
+
+  .nav-fixed .menus_item:hover > a.site-page
+    background-color var(--sco-lighttext)
\ No newline at end of file
diff --git a/source/css/_layout/index.styl b/source/css/_layout/index.styl
index ce1984d0..42befe24 100644
--- a/source/css/_layout/index.styl
+++ b/source/css/_layout/index.styl
@@ -54,6 +54,11 @@
       display inline-block
       overflow hidden
 
+      .recent-post-info-top-tips
+        display: flex
+        margin-top: 20px
+        user-select none
+
       &.no-cover
         width 100%
 
@@ -87,6 +92,19 @@
         color var(--sco-fontcolor)
         font-size .7rem
 
+        > .article-meta
+          margin 0 8px 0 0
+          white-space nowrap
+          overflow hidden
+          text-overflow ellipsis
+          display flex
+
+          > .article-meta__tags
+            margin-right 8px
+            padding 0 0.2rem
+            padding-left 0
+            color var(--sco-fontcolor)
+
         > .post-meta-date
           right 0
           text-align right
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
index 6c58032d..2e78b8c7 100644
--- a/source/css/_layout/layout.styl
+++ b/source/css/_layout/layout.styl
@@ -25,22 +25,20 @@
   > div:first-child
     width calc(100% - 300px)
 
-  > #post,#category,#tag
+  > div:first-child:not(.recent-posts)
     box-shadow var(--sco-shadow-border)
     padding 1rem 2rem
     border-radius 12px
-    background var(--sco-card-bg)
-    border var(--style-border)
     width calc(100% - 300px)
+    background: var(--sco-card-bg);
+    border: var(--style-border);
     align-self flex-start
     animation slide-in .6s .1s backwards
     position relative
     overflow hidden
 
-    &:hover
-      box-shadow var(--sco-shadow-border-hover)
   > #page
-    padding: 1rem 2rem;
+    padding: 0;
     width: calc(100% - 300px);
     align-self: flex-start;
     animation: slide-in 0.6s 0.1s backwards;
@@ -76,7 +74,7 @@
 +maxWidth768()
   .post
     .layout
-      > #post,#page
+      > #post, #page
         border-radius 12px 12px 0 0
 
       &#content-inner
@@ -84,7 +82,7 @@
 
   .page
     .layout
-      > #post,#page
+      > #post, #page
         border-radius: 12px 12px 0 0
 
       &#content-inner
diff --git a/source/css/_page/about.styl b/source/css/_page/about.styl
index 9e4c389b..c96ee084 100644
--- a/source/css/_page/about.styl
+++ b/source/css/_page/about.styl
@@ -1,1122 +1,985 @@
-#about-page {
-  display: flex;
-  padding-top: 1rem;
-  flex-direction: column;
-  align-items: center
-}
-
-#about-page .author-info {
-  display: flex;
-  align-items: center;
-  margin: 0 0 16px 0
-}
-
-#about-page .author-tag-left {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end
-}
-
-#about-page .author-tag-right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start
-}
-
-@media screen and (max-width: 768px) {
-  #about-page .author-tag-left, #about-page .author-tag-right {
-    display: none
-  }
-}
-
-#about-page .author-tag-left .author-tag:first-child, #about-page .author-tag-left .author-tag:last-child {
-  margin-right: -16px
-}
-
-#about-page .author-tag-right .author-tag:first-child, #about-page .author-tag-right .author-tag:last-child {
-  margin-left: -16px
-}
-
-#about-page .author-tag {
-  transform: translate(0, -4px);
-  padding: 1px 8px;
-  background: var(--sco-card-bg);
-  border: var(--style-border-always);
-  border-radius: 40px;
-  margin-top: 6px;
-  font-size: 14px;
-  font-weight: 700;
-  box-shadow: var(--sco-shadow-lightblack);
-  animation: 6s ease-in-out 0s infinite normal none running floating
-}
-
-#about-page .author-tag:nth-child(1) {
-  animation-delay: 0s
-}
-
-#about-page .author-tag:nth-child(2) {
-  animation-delay: .6s
-}
-
-#about-page .author-tag:nth-child(3) {
-  animation-delay: 1.2s
-}
-
-#about-page .author-tag:nth-child(4) {
-  animation-delay: 1.8s
-}
-
-#about-page .author-img {
-  margin: 0 30px;
-  border-radius: 50%;
-  width: 180px;
-  height: 180px;
-  position: relative;
-  background: var(--sco-secondbg);
-  user-select: none
-}
-
-#about-page .author-img img {
-  border-radius: 200px
-}
-
-#about-page .author-img::before {
-  content: '';
-  -webkit-transition: 1s;
-  -moz-transition: 1s;
-  -o-transition: 1s;
-  -ms-transition: 1s;
-  transition: 1s;
-  width: 30px;
-  height: 30px;
-  background: var(--sco-green);
-  position: absolute;
-  border-radius: 50%;
-  border: 5px solid var(--sco-background);
-  bottom: 5px;
-  right: 10px;
-  z-index: 2
-}
-
-@media screen and (max-width: 768px) {
-  #about-page .author-img {
-    width: 120px;
-    height: 120px
-  }
-
-  #about-page .author-img::before {
-    bottom: -5px;
-    right: -5px
-  }
-}
-
-#about-page .author-title {
-  font-size: 2rem;
-  font-weight: 700;
-  margin: 1rem 0;
-  line-height: 1
-}
-
-
-#about-page .myInfoAndSayHello {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  color: var(--sco-white);
-  background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);
-  background-size: 200%;
-  animation: gradient 15s ease infinite;
-  width: 59%
-}
-
-#about-page .myInfoAndSayHello .title1 {
-  opacity: .8;
-  line-height: 1.3
-}
-
-#about-page .myInfoAndSayHello .title2 {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1.1;
-  margin: .5rem 0
-}
-
-.author-content-item:hover .card-background-icon {
-  transform: rotate(20deg)
-}
-
-.author-content-item-group.column.mapAndInfo {
-  width: 59%
-}
-
-.author-content-item.map {
-  background: var(--site-about-oneself-map--light) no-repeat center;
-  min-height: 160px;
-  max-height: 400px;
-  position: relative;
-  overflow: hidden;
-  margin-bottom: .5rem;
-  height: 60%;
-  background-size: 100%;
-  transition: 1s ease-in-out
-}
-
-[data-theme=dark] .author-content-item.map {
-  background: var(--site-about-oneself-map--dark) no-repeat center;
-  background-size: 100%
-}
-
-.author-content-item.map:hover {
-  background-size: 120%;
-  transition: 4s ease-in-out;
-  background-position-x: 0;
-  background-position-y: 36%
-}
-
-.author-content-item.map .map-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: var(--sco-maskbg);
-  padding: .5rem 2rem;
-  backdrop-filter: saturate(180%) blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  transition: 1s ease-in-out;
-  font-size: 20px;
-  transform: translateZ(0)
-}
-
-.author-content-item.map:hover .map-title {
-  bottom: -100%
-}
-
-.author-content-item.map .map-title b {
-  color: var(--sco-fontcolor)
-}
-
-@media screen and (max-width: 768px) {
-  .author-content-item.map.myphoto {
-    background-size: cover !important
-  }
-
-  .author-content-item.map .map-title {
-    padding: 1rem
-  }
-}
-
-.author-content-item.selfInfo {
-  display: flex;
-  min-height: 100px;
-  max-height: 400px;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  height: -webkit-fill-available;
-  height: 40%
-}
-
-@media screen and (max-width: 1300px) {
-  .author-content-item.selfInfo {
-    height: 70%
-  }
-}
-
-.author-content-item.selfInfo div {
-  display: flex;
-  flex-direction: column;
-  margin: .5rem 2rem .5rem 0
-}
-
-.author-content-item.selfInfo .selfInfo-title {
-  opacity: .8;
-  font-size: .6rem;
-  line-height: 1;
-  margin-bottom: 8px
-}
-
-.author-content-item.selfInfo .selfInfo-content {
-  font-weight: 700;
-  font-size: 34px;
-  line-height: 1
-}
-
-.author-content-item.myphoto {
-  height: 60%;
-  min-height: 240px;
-  position: relative;
-  overflow: hidden;
-  width: 39%;
-  display: flex;
-  align-items: center;
-  justify-content: center
-}
-
-.author-content-item.myphoto img {
-  position: absolute;
-  height: 100%;
-  min-width: 100%;
-  object-fit: cover;
-  transition: .6s;
-  user-select: none
-}
-
-.author-content-item.myphoto:hover img {
-  min-width: 105%;
-  transition: 2s
-}
-
-.author-content-item.myphoto .myphoto-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: var(--sco-maskbgdeep);
-  padding: .5rem 2rem;
-  backdrop-filter: saturate(180%) blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  transform: translateZ(0)
-}
-
-.author-content-item.careers {
-  min-height: 400px
-}
-
-.author-content-item.careers img {
-  position: absolute;
-  left: 0;
-  bottom: 20px;
-  width: 100%;
-  transition: .6s;
-  user-select: none
-}
-
-.author-content-item.careers .careers-group {
-  margin-top: 12px
-}
-
-.author-content-item.careers .careers-item {
-  display: flex;
-  align-items: center
-}
-
-.author-content-item.careers .careers-item .circle {
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  border-radius: 16px
-}
-
-.author-content-item.careers .careers-item .name {
-  color: var(--sco-secondtext)
-}
-
-.author-content-item.personalities {
-  overflow: hidden;
-  position: relative;
-  width: 59%
-}
-
-.author-content-item.personalities .title2 {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1.1
-}
-
-.author-content-item.personalities .image {
-  position: absolute;
-  right: -40px;
-  bottom: -10rem;
-  transition: transform 2s cubic-bezier(.13, .45, .21, 1.02);
-  user-select: none
-}
-
-.author-content-item.personalities:hover .image {
-  transform: rotate(-10deg)
-}
-
-@media screen and (max-width: 768px) {
-  .author-content-item.personalities {
-    min-height: 360px
-  }
-
-  .author-content-item.personalities .image {
-    right: -70px
-  }
-}
-
-.author-content-item.maxim {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1.1;
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: center;
-  width: 39%
-}
-
-.author-content-item.maxim .maxim-title {
-  display: flex;
-  flex-direction: column
-}
-
-.author-content-item.maxim .title1 {
-  opacity: .8;
-  font-size: .6rem;
-  margin-bottom: .5rem
-}
-
-.author-content-item.buff {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1.1;
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: center;
-  background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%);
-  color: var(--sco-white);
-  background-size: 200%;
-  animation: gradient 15s ease infinite;
-  min-height: 200px;
-  height: fit-content;
-  width: 59%
-}
-
-.author-content-item.buff .card-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center
-}
-
-.author-content-item.buff .buff-title {
-  display: flex;
-  flex-direction: column
-}
-
-.author-content-item.buff .title1 {
-  opacity: .8;
-  font-size: .6rem;
-  margin-bottom: .5rem
-}
-
-.author-content-item.skills {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-direction: column;
-  width: 49%;
-  min-height: 450px
-}
-
-.author-content-item.skills .tags-group-all {
-  display: flex;
-  transform: rotate(0);
-  transition: .3s
-}
-
-.author-content-item.skills .tags-group-wrapper {
-  margin-top: 40px;
-  display: flex;
-  flex-wrap: nowrap;
-  animation: rowup 60s linear infinite
-}
-
-.author-content-item.skills .skills-style-group {
-  position: relative
-}
-
-.author-content-item.skills .skills-list {
-  display: flex;
-  opacity: 0;
-  transition: .3s;
-  position: absolute;
-  width: 100%;
-  top: 0;
-  left: 0;
-  flex-wrap: wrap;
-  flex-direction: row;
-  margin-top: 10px
-}
-
-.author-content-item.skills:hover .skills-style-group .tags-group-all {
-  opacity: 0
-}
-
-.author-content-item.skills:hover .skills-style-group .skills-list {
-  opacity: 1
-}
-
-.author-content-item.skills .skill-info {
-  display: flex;
-  align-items: center;
-  margin-right: 10px;
-  margin-top: 10px;
-  background: var(--sco-background);
-  border-radius: 40px;
-  padding: 4px 12px 4px 8px;
-  border: var(--style-border);
-  box-shadow: var(--sco-shadow-border)
-}
-
-.author-content-item.skills .etc {
-  margin-right: 10px;
-  margin-top: 10px
-}
-
-.author-content-item.skills .skill-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px;
-  user-select: none
-}
-
-.author-content-item.skills .skill-icon img {
-  width: 18px;
-  height: 18px
-}
-
-.author-content-item.skills .skill-name {
-  font-weight: 700;
-  line-height: 1
-}
-
-.author-content-item.aboutsiteTips {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-direction: column;
-  width: 39%
-}
-
-.aboutsiteTips h2 {
-  margin-right: auto;
-  font-size: 36px;
-  font-family: Helvetica;
-  line-height: 1.06;
-  letter-spacing: -.02em;
-  color: var(--sco-fontcolor);
-  margin-top: 0
-}
-
-.aboutsiteTips .mask {
-  height: 36px;
-  position: relative;
-  overflow: hidden;
-  margin-top: 4px
-}
-
-.aboutsiteTips .mask span {
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  top: 36px;
-  padding-bottom: var(--offset);
-  background-size: 100% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-repeat: no-repeat
-}
-
-.aboutsiteTips .mask span[data-show] {
-  transform: translateY(-100%);
-  transition: .5s transform ease-in-out
-}
-
-.aboutsiteTips .mask span[data-up] {
-  transform: translateY(-200%);
-  transition: .5s transform ease-in-out
-}
-
-.aboutsiteTips .mask span:nth-child(1) {
-  background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1)
-}
-
-.aboutsiteTips .mask span:nth-child(2) {
-  background-image: linear-gradient(45deg, #18e198 50%, #0ec15d)
-}
-
-.aboutsiteTips .mask span:nth-child(3) {
-  background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c)
-}
-
-.aboutsiteTips .mask span:nth-child(4) {
-  background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f)
-}
-
-@media screen and (max-width: 768px) {
-  .author-content-item.map {
-    margin-bottom: 0
-  }
-}
-
-#about-page .about-statistic {
-  min-height: 380px;
-  width: 39%;
-  background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp) no-repeat top;
-  background-size: cover;
-  color: var(--sco-white);
-  overflow: hidden
-}
-
-#about-page .about-statistic::after {
-  box-shadow: 0 -159px 173px 71px #0f1114 inset;
-  position: absolute;
-  content: '';
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0
-}
-
-#about-page .about-statistic .banner-button {
-  background: var(--sco-white-op)
-}
-
-#about-page .about-statistic .banner-button:hover {
-  background: var(--sco-theme)
-}
-
-#statistic {
-  font-size: 16px;
-  border-radius: 15px;
-  width: 100%;
-  color: var(--sco-white);
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-top: 1rem;
-  margin-bottom: 2rem
-}
-
-#statistic div {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  width: 50%;
-  margin-bottom: .5rem
-}
-
-#statistic div span:first-child {
-  opacity: .8;
-  font-size: .6rem
-}
-
-#statistic div span:last-child {
-  font-weight: 700;
-  font-size: 34px;
-  line-height: 1;
-  white-space: nowrap
-}
-
-.author-content-item.about-statistic .card-content .banner-button-group .banner-button:hover {
-  background: #998c5a;
-  color: var(--sco-white)
-}
-
-.author-content-item.single.reward .author-content-item .author-content-item-title {
-  color: var(--sco-red)
-}
-
-.author-content-item.single.reward .reward-list-all {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  margin: 1rem -.25rem .5rem;
-}
-
-.author-content-item.single.reward .reward-list-all .reward-list-item {
-  padding: 1rem;
-  border-radius: 12px;
-  border: var(--style-border-always);
-  width: calc((100% / 6) - .5rem);
-  margin: 0 .25rem .5rem .25rem;
-  box-shadow: var(--sco-shadow-border);
-  flex-direction: column;
-  justify-content: space-between
-}
-
-.reward-list-tips p {
-  font-size: 12px;
-  color: var(--sco-secondtext)
-}
-
-@media screen and (max-width: 1200px) {
-  .author-content-item.single.reward .reward-list-all .reward-list-item {
-    width: calc((100% / 4) - .5rem)
-  }
-}
-
-@media screen and (max-width: 900px) {
-  .author-content-item.single.reward .reward-list-all .reward-list-item {
-    width: calc((100% / 2) - .5rem)
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .author-content-item.single.reward .reward-list-all .reward-list-item {
-    width: 100%
-  }
-}
-
-.author-content-item.single.reward .author-content-item-description {
-  font-size: 16px;
-  margin-top: .5rem
-}
-
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-name {
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1;
-  margin-bottom: .5rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis
-}
-
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-bottom-group {
-  display: flex;
-  align-items: center;
-  justify-content: space-between
-}
-
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-money {
-  padding: 4px;
-  background: var(--sco-fontcolor);
-  color: var(--sco-card-bg);
-  font-size: 12px;
-  line-height: 1;
-  border-radius: 4px;
-  margin-right: 4px;
-  white-space: nowrap
-}
-
-.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-time {
-  font-size: 12px;
-  color: var(--sco-secondtext);
-  white-space: nowrap
-}
-
-.author-content-item.single.reward .reward-list-updateDate {
-  color: var(--sco-gray);
-  font-size: 14px
-}
-
-.author-content-item.single.reward .post-reward {
-  position: absolute;
-  right: 2rem;
-  top: 2rem
-}
-
-.author-content-item.single.reward .post-reward .reward-button {
-  padding: 8px 12px;
-  background: var(--sco-red);
-  border-radius: 12px;
-  color: var(--sco-white);
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  transition: .3s;
-  cursor: pointer;
-  box-shadow: none;
-  width: fit-content;
-  height: fit-content;
-  line-height: 2;
-  user-select: none
-}
-
-.author-content-item.single.reward .post-reward:hover .reward-button {
-  filter: brightness(1.1)
-}
-
-@media screen and (max-width: 768px) {
-  .author-content-item.single.reward .post-reward .reward-button {
-    display: none
-  }
-}
-
-.author-content-item.single.reward .post-reward .reward-button i {
-  margin-right: 8px;
-  font-size: 1rem
-}
-
-.author-content-item.single.reward .post-reward .reward-main {
-  top: 60px;
-  right: 0;
-  left: auto;
-  bottom: auto;
-  width: fit-content;
-  box-shadow: var(--sco-shadow-border)
-}
-
-.author-content-item.single.reward .post-reward .reward-main .reward-all::before {
-  bottom: auto;
-  top: -16px
-}
-
-.author-content-item.single.reward a.reward-main-btn {
-  display: none
-}
-
-.author-content-item.game-apex {
-  min-height: 300px;
-  overflow: hidden;
-  color: var(--sco-white);
-  width: 59%
-}
-
-.author-content-item .card-content {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem 2rem
-}
-
-@media screen and (max-width: 768px) {
-  .author-content-item .card-content {
-    padding: 1rem
-  }
-}
-
-@media screen and (min-width: 1300px) {
-  .author-content-item {
-    animation: slide-in .6s 0s backwards
-  }
-}
-
-.author-content-item.game-apex::after {
-  box-shadow: 0 -69px 203px 11px #04120f inset;
-  position: absolute;
-  content: '';
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0
-}
-
-.author-content-item .content-bottom {
-  margin-top: auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between
-}
-
-.author-content-item .content-bottom .icon-group {
-  display: flex
-}
-
-.author-content-item .content-bottom .icon-group i {
-  display: inline-block;
-  width: 22px;
-  height: 18px;
-  margin-right: .5rem
-}
-
-.icon-pos-sup {
-  background: url(https://bu.dusays.com/2023/03/12/640dc913ee26b.webp)
-}
-
-.icon-pos-mid {
-  background: url(https://bu.dusays.com/2023/03/12/640dc931a2cd4.webp)
-}
-
-.author-content-item.game-jl {
-  width: 39%;
-  min-height: 300px;
-  overflow: hidden;
-  color: var(--sco-white)
-}
-
-.author-content-item.game-jl::after {
-  box-shadow: 0 -69px 203px 11px #415dc9 inset;
-  position: absolute;
-  content: '';
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0
-}
-
-.author-content-item.like-technology {
-  background-size: cover;
-  min-height: 230px;
-  color: var(--sco-white)
-}
-
-.author-content-item.like-technology::after {
-  box-shadow: 0 -69px 203px 11px #050b20 inset;
-  position: absolute;
-  content: '';
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0
-}
-
-.author-content-item.like-music {
-  background-size: cover;
-  min-height: 400px;
-  color: var(--sco-white);
-  overflow: hidden
-}
-
-.author-content-item.like-music::after {
-  box-shadow: 0 -69px 203px 11px #0e0e0e inset;
-  position: absolute;
-  content: '';
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0
-}
-
-.author-content-item .card-content .author-content-item-title {
-  margin-bottom: .5rem
-}
-
-.author-content-item .card-content .banner-button-group {
-  position: absolute;
-  bottom: 1.5rem;
-  right: 2rem
-}
-
-.author-content-item .card-content .banner-button-group .banner-button {
-  height: 40px;
-  width: 118px;
-  border-radius: 20px;
-  justify-content: center;
-  background: var(--sco-black-op);
-  color: var(--sco-white);
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  transition: .3s;
-  cursor: pointer;
-  backdrop-filter: saturate(180%) blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  transform: translateZ(0)
-}
-
-.author-content-item .card-content .banner-button-group .banner-button:hover {
-  background: var(--sco-main);
-  color: var(--sco-white)
-}
-
-.author-content-item .card-content .banner-button-group .banner-button i {
-  margin-right: 8px;
-  font-size: 22px
-}
-
-@media screen and (max-width: 768px) {
-  .author-content-item .card-content .banner-button-group {
-    right: 1rem;
-    bottom: 1rem
-  }
-
-  .author-content-item .card-content .banner-button-group .banner-button {
-    background: 0 0;
-    color: var(--sco-white);
-    padding: 0;
-    width: fit-content
-  }
-
-  .author-content-item .card-content .banner-button-group .banner-button i {
-    margin-right: 0;
-    font-size: 1.5rem
-  }
-
-  .author-content-item .card-content .banner-button-group .banner-button-text {
-    display: none
-  }
-}
-
-.author-content-item.single.like-movie {
-  height: 19rem;
-  background-size: cover;
-  color: var(--sco-white);
-  overflow: hidden
-}
-
-.author-content-item.single.like-movie::after {
-  box-shadow: 0 21px 133px 81px #1c1c1c inset;
-  position: absolute;
-  content: '';
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0
-}
-
-.author-content.author-content-item.toolPage {
-  height: 19rem;
-  background-size: cover;
-  color: var(--sco-white);
-  overflow: hidden;
-  margin-top: 0
-}
-
-video.author-content-video {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  left: 0;
-  z-index: -1
-}
-
-.author-content {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  width: 100%;
-  margin-top: 1rem
-}
-
-.author-content-item-group.column {
-  display: flex;
-  flex-direction: column;
-  width: 49%;
-  justify-content: space-between
-}
-
-.author-content-item {
-  width: 49%;
-  border-radius: 12px;
-  background: var(--sco-card-bg);
-  border: var(--style-border-always);
-  box-shadow: var(--sco-shadow-border);
-  position: relative;
-  padding: 1rem 2rem;
-  overflow: hidden
-}
-
-.author-content-item.single {
-  width: 100%
-}
-
-.author-content-item .author-content-item-title {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1
-}
-
-.author-content-item .author-content-item-tips {
-  opacity: .8;
-  font-size: .6rem;
-  margin-bottom: .5rem
-}
-
-@media screen and (max-width: 768px) {
-  .author-content-item {
-    width: 100% !important;
-    margin-top: 1rem;
-    padding: 1rem
-  }
-
-  .author-content-item-group.column {
-    width: 100% !important
-  }
-
-  .author-content {
-    margin-top: 0
-  }
-}
-
-.card-background-icon {
-  font-size: 12rem;
-  opacity: .2;
-  position: absolute;
-  right: 0;
-  bottom: -40%;
-  transform: rotate(30deg);
-  transition: 2s ease-in-out
-}
-
-.post-tips {
-  color: var(--sco-gray);
-  font-size: 14px;
-  position: absolute;
-  bottom: 1rem;
-  left: 2rem
-}
-
-.post-tips a {
-  color: var(--sco-gray) !important;
-  border: none !important
-}
-
-.post-tips a:hover {
-  color: var(--sco-main) !important
-}
-
-@media screen and (max-width: 768px) {
-  .post-tips {
-    left: 1rem
-  }
-}
-
-.inline-word {
-  word-break: keep-all;
-  white-space: nowrap
-}
-
-.main-hero-waves-area {
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: -11px;
-  z-index: 5
-}
-
-.waves-area .waves-svg {
-  width: 100%;
-  height: 60px
-}
-
-.parallax > use {
-  animation: move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
-}
-
-.parallax > use:nth-child(1) {
-  animation-delay: -2s;
-  animation-duration: 7s;
-  fill: var(--sco-background);
-  opacity: .5
-}
-
-.parallax > use:nth-child(2) {
-  animation-delay: -3s;
-  animation-duration: 10s;
-  fill: var(--sco-background);
-  opacity: .6
-}
-
-.parallax > use:nth-child(3) {
-  animation-delay: -4s;
-  animation-duration: 13s;
-  fill: var(--sco-background);
-  opacity: .7
-}
-
-.parallax > use:nth-child(4) {
-  animation-delay: -5s;
-  animation-duration: 20s;
-  fill: var(--sco-background)
-}
-
-@media (max-width: 768px) {
-  .main-hero-waves-area {
-    display: none
-  }
-}
\ No newline at end of file
+#about-page
+  display flex
+  padding-top 1rem
+  flex-direction column
+  align-items center
+
+  .author-info
+    display flex
+    align-items center
+    margin 0 0 16px 0
+
+  .author-tag-left
+    display flex
+    flex-direction column
+    align-items flex-end
+
+  .author-tag-right
+    display flex
+    flex-direction column
+    align-items flex-start
+
+  @media screen and (max-width: 768px)
+    .author-tag-left, .author-tag-right
+      display none
+
+  .author-tag-left .author-tag:first-child, .author-tag-left .author-tag:last-child
+    margin-right -16px
+
+  .author-tag-right .author-tag:first-child, .author-tag-right .author-tag:last-child
+    margin-left -16px
+
+  .author-tag
+    transform translate(0, -4px)
+    padding 1px 8px
+    background var(--sco-card-bg)
+    border var(--style-border-always)
+    border-radius 40px
+    margin-top 6px
+    font-size 14px
+    font-weight 700
+    box-shadow var(--sco-shadow-lightblack)
+    animation 6s ease-in-out 0s infinite normal none running floating
+
+    &:nth-child(1)
+      animation-delay 0s
+
+    &:nth-child(2)
+      animation-delay .6s
+
+    &:nth-child(3)
+      animation-delay 1.2s
+
+    &:nth-child(4)
+      animation-delay 1.8s
+
+  .author-img
+    margin 0 30px
+    border-radius 50%
+    width 180px
+    height 180px
+    position relative
+    background var(--sco-secondbg)
+    user-select none
+
+    img
+      border-radius 200px
+
+    &::before
+      content ''
+      -webkit-transition 1s
+      -moz-transition 1s
+      -o-transition 1s
+      -ms-transition 1s
+      transition 1s
+      width 30px
+      height 30px
+      background var(--sco-green)
+      position absolute
+      border-radius 50%
+      border 5px solid var(--sco-background)
+      bottom 5px
+      right 10px
+      z-index 2
+
+  @media screen and (max-width: 768px)
+    .author-img
+      width 120px
+      height 120px
+
+      &::before
+        bottom -5px
+        right -5px
+
+  .author-title
+    font-size 2rem
+    font-weight 700
+    margin 1rem 0
+    line-height 1
+
+  .myInfoAndSayHello
+    display flex
+    flex-direction column
+    justify-content center
+    color var(--sco-white)
+    background linear-gradient(120deg, #5b27ff 0, #00d4ff 100%)
+    background-size 200%
+    animation gradient 15s ease infinite
+    width 59%
+
+    .title1
+      opacity .8
+      line-height 1.3
+
+    .title2
+      font-size 36px
+      font-weight 700
+      line-height 1.1
+      margin .5rem 0
+
+.author-content-item
+  &:hover
+    .card-background-icon
+      transform rotate(20deg)
+
+  &-group.column.mapAndInfo
+    width 59%
+
+  &.map
+    background var(--site-about-oneself-map--light) no-repeat center
+    min-height 160px
+    max-height 400px
+    position relative
+    overflow hidden
+    margin-bottom .5rem
+    height 60%
+    background-size 100%
+    transition 1s ease-in-out
+
+    &[data-theme=dark]
+      background var(--site-about-oneself-map--dark) no-repeat center
+      background-size 100%
+
+    &:hover
+      background-size 120%
+      transition 4s ease-in-out
+      background-position-x 0
+      background-position-y 36%
+
+      .map-title
+        bottom -100%
+
+    .map-title
+      position absolute
+      bottom 0
+      left 0
+      width 100%
+      background var(--sco-maskbg)
+      padding .5rem 2rem
+      backdrop-filter saturate(180%) blur(20px)
+      -webkit-backdrop-filter blur(20px)
+      transition 1s ease-in-out
+      font-size 20px
+      transform translateZ(0)
+
+      b
+        color var(--sco-fontcolor)
+
+@media screen and (max-width: 768px)
+  .author-content-item.map.myphoto
+    background-size cover !important
+
+  .author-content-item.map .map-title
+    padding 1rem
+
+.author-content-item.selfInfo
+  display flex
+  min-height 100px
+  max-height 400px
+  justify-content space-between
+  align-items center
+  flex-wrap wrap
+  height -webkit-fill-available
+  height 40%
+
+@media screen and (max-width: 1300px)
+  .author-content-item.selfInfo
+    height 70%
+
+.author-content-item.selfInfo div
+  display flex
+  flex-direction column
+  margin .5rem 2rem .5rem 0
+
+.author-content-item.selfInfo .selfInfo-title
+  opacity .8
+  font-size .6rem
+  line-height 1
+  margin-bottom 8px
+
+.author-content-item.selfInfo .selfInfo-content
+  font-weight 700
+  font-size 34px
+  line-height 1
+
+.author-content-item.myphoto
+  height 60%
+  min-height 240px
+  position relative
+  overflow hidden
+  width 39%
+  display flex
+  align-items center
+  justify-content center
+
+  img
+    position absolute
+    height 100%
+    min-width 100%
+    object-fit cover
+    transition .6s
+    user-select none
+
+  &:hover
+    img
+      min-width 105%
+      transition 2s
+
+  .myphoto-title
+    position absolute
+    bottom 0
+    left 0
+    width 100%
+    background var(--sco-maskbgdeep)
+    padding .5rem 2rem
+    backdrop-filter saturate(180%) blur(20px)
+    -webkit-backdrop-filter blur(20px)
+    transform translateZ(0)
+
+.author-content-item.careers
+  min-height 400px
+
+  img
+    position absolute
+    left 0
+    bottom 20px
+    width 100%
+    transition .6s
+    user-select none
+
+  .careers-group
+    margin-top 12px
+
+  .careers-item
+    display flex
+    align-items center
+
+    .circle
+      width 16px
+      height 16px
+      margin-right 8px
+      border-radius 16px
+
+    .name
+      color var(--sco-secondtext)
+
+.author-content-item.personalities
+  overflow hidden
+  position relative
+  width 59%
+
+  .title2
+    font-size 36px
+    font-weight 700
+    line-height 1.1
+
+  .image
+    position absolute
+    right -40px
+    bottom -10rem
+    transition transform 2s cubic-bezier(.13, .45, .21, 1.02)
+    user-select none
+
+  &:hover
+    .image
+      transform rotate(-10deg)
+
+@media screen and (max-width: 768px)
+  .author-content-item.personalities
+    min-height 360px
+
+  .author-content-item.personalities .image
+    right -70px
+
+.author-content-item.maxim
+  font-size 36px
+  font-weight 700
+  line-height 1.1
+  display flex
+  align-items flex-start
+  flex-direction column
+  justify-content center
+  width 39%
+
+  .maxim-title
+    display flex
+    flex-direction column
+
+  .title1
+    opacity .8
+    font-size .6rem
+    margin-bottom .5rem
+
+.author-content-item.buff
+  font-size 36px
+  font-weight 700
+  line-height 1.1
+  display flex
+  align-items flex-start
+  flex-direction column
+  justify-content center
+  background linear-gradient(120deg, #ff27e8 0, #ff8000 100%)
+  color var(--sco-white)
+  background-size 200%
+  animation gradient 15s ease infinite
+  min-height 200px
+  height fit-content
+  width 59%
+
+  .card-content
+    display flex
+    flex-direction column
+    justify-content center
+
+  .buff-title
+    display flex
+    flex-direction column
+
+  .title1
+    opacity .8
+    font-size .6rem
+    margin-bottom .5rem
+
+.author-content-item.skills
+  display flex
+  justify-content center
+  align-items flex-start
+  flex-direction column
+  width 49%
+  min-height 450px
+
+  .tags-group-all
+    display flex
+    transform rotate(0)
+    transition .3s
+
+  .tags-group-wrapper
+    margin-top 40px
+    display flex
+    flex-wrap nowrap
+    animation rowup 60s linear infinite
+
+  .skills-style-group
+    position relative
+
+  .skills-list
+    display flex
+    opacity 0
+    transition .3s
+    position absolute
+    width 100%
+    top 0
+    left 0
+    flex-wrap wrap
+    flex-direction row
+    margin-top 10px
+
+  &:hover
+    .skills-style-group
+      .tags-group-all
+        opacity 0
+
+      .skills-list
+        opacity 1
+
+  .skill-info
+    display flex
+    align-items center
+    margin-right 10px
+    margin-top 10px
+    background var(--sco-background)
+    border-radius 40px
+    padding 4px 12px 4px 8px
+    border var(--style-border)
+    box-shadow var(--sco-shadow-border)
+
+  .etc
+    margin-right 10px
+    margin-top 10px
+
+  .skill-icon
+    width 32px
+    height 32px
+    border-radius 32px
+    display flex
+    align-items center
+    justify-content center
+    margin-right 8px
+    user-select none
+
+    img
+      width 18px
+      height 18px
+
+  .skill-name
+    font-weight 700
+    line-height 1
+
+.author-content-item
+  &.aboutsiteTips
+    display flex
+    justify-content center
+    align-items flex-start
+    flex-direction column
+    width 39%
+
+  &.aboutsiteTips
+    h2
+      margin-right auto
+      font-size 36px
+      font-family Helvetica
+      line-height 1.06
+      letter-spacing -.02em
+      color var(--sco-fontcolor)
+      margin-top 0
+
+    .mask
+      height 36px
+      position relative
+      overflow hidden
+      margin-top 4px
+
+      span
+        display block
+        box-sizing border-box
+        position absolute
+        top 36px
+        padding-bottom var(--offset)
+        background-size 100% 100%
+        -webkit-background-clip text
+        background-clip text
+        -webkit-text-fill-color transparent
+        background-repeat no-repeat
+
+        &[data-show]
+          transform translateY(-100%)
+          transition .5s transform ease-in-out
+
+        &[data-up]
+          transform translateY(-200%)
+          transition .5s transform ease-in-out
+
+      span:nth-child(1)
+        background-image linear-gradient(45deg, #0ecffe 50%, #07a6f1)
+
+      span:nth-child(2)
+        background-image linear-gradient(45deg, #18e198 50%, #0ec15d)
+
+      span:nth-child(3)
+        background-image linear-gradient(45deg, #8a7cfb 50%, #633e9c)
+
+      span:nth-child(4)
+        background-image linear-gradient(45deg, #fa7671 50%, #f45f7f)
+
+@media screen and (max-width: 768px)
+  .author-content-item.map
+    margin-bottom 0
+
+#about-page
+  .about-statistic
+    min-height 380px
+    width 39%
+    background url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp) no-repeat top
+    background-size cover
+    color var(--sco-white)
+    overflow hidden
+
+    &::after
+      box-shadow 0 -159px 173px 71px #0f1114 inset
+      position absolute
+      content ''
+      width 100%
+      height 100%
+      top 0
+      left 0
+
+    .banner-button
+      background var(--sco-white-op)
+
+    .banner-button:hover
+      background var(--sco-theme)
+
+#statistic
+  font-size 16px
+  border-radius 15px
+  width 100%
+  color var(--sco-white)
+  display flex
+  justify-content space-between
+  flex-direction row
+  flex-wrap wrap
+  margin-top 1rem
+  margin-bottom 2rem
+
+  div
+    display flex
+    justify-content space-between
+    flex-direction column
+    width 50%
+    margin-bottom .5rem
+
+    span:first-child
+      opacity .8
+      font-size .6rem
+
+    span:last-child
+      font-weight 700
+      font-size 34px
+      line-height 1
+      white-space nowrap
+
+.author-content-item
+  &.about-statistic
+    .card-content
+      .banner-button-group
+        .banner-button:hover
+          background #998c5a
+          color var(--sco-white)
+
+  &.single.reward
+    .author-content-item
+      .author-content-item-title
+        color var(--sco-red)
+
+    .reward-list-all
+      display flex
+      flex-wrap wrap
+      flex-direction row
+      margin 1rem -.25rem .5rem
+
+      .reward-list-item
+        padding 1rem
+        border-radius 12px
+        border var(--style-border-always)
+        width calc((100% / 6) - .5rem)
+        margin 0 .25rem .5rem .25rem
+        box-shadow var(--sco-shadow-border)
+        flex-direction column
+        justify-content space-between
+
+.reward-list-tips
+  p
+    font-size 12px
+    color var(--sco-secondtext)
+
+@media screen and (max-width: 1200px)
+  .author-content-item.single.reward
+    .reward-list-all
+      .reward-list-item
+        width calc((100% / 4) - .5rem)
+
+@media screen and (max-width: 900px)
+  .author-content-item.single.reward
+    .reward-list-all
+      .reward-list-item
+        width calc((100% / 2) - .5rem)
+
+@media screen and (max-width: 768px)
+  .author-content-item.single.reward
+    .reward-list-all
+      .reward-list-item
+        width 100%
+
+.author-content-item.single.reward
+  .author-content-item-description
+    font-size 16px
+    margin-top .5rem
+
+  .reward-list-all
+    .reward-list-item
+      .reward-list-item-name
+        font-size 1rem
+        font-weight 700
+        line-height 1
+        margin-bottom .5rem
+        white-space nowrap
+        overflow hidden
+        text-overflow ellipsis
+
+      .reward-list-bottom-group
+        display flex
+        align-items center
+        justify-content space-between
+
+      .reward-list-item-money
+        padding 4px
+        background var(--sco-fontcolor)
+        color var(--sco-card-bg)
+        font-size 12px
+        line-height 1
+        border-radius 4px
+        margin-right 4px
+        white-space nowrap
+
+      .reward-list-item-time
+        font-size 12px
+        color var(--sco-secondtext)
+        white-space nowrap
+
+  .reward-list-updateDate
+    color var(--sco-gray)
+    font-size 14px
+
+  .post-reward
+    position absolute
+    right 2rem
+    top 2rem
+
+    .reward-button
+      padding 8px 12px
+      background var(--sco-red)
+      border-radius 12px
+      color var(--sco-white)
+      display flex
+      align-items center
+      z-index 1
+      transition .3s
+      cursor pointer
+      box-shadow none
+      width fit-content
+      height fit-content
+      line-height 2
+      user-select none
+
+    &:hover
+      .reward-button
+        filter brightness(1.1)
+
+@media screen and (max-width: 768px)
+  .author-content-item.single.reward
+    .post-reward
+      .reward-button
+        display none
+
+.author-content-item.single.reward
+  .post-reward
+    .reward-main
+      top 60px
+      right 0
+      left auto
+      bottom auto
+      width fit-content
+      box-shadow var(--sco-shadow-border)
+
+    .reward-all::before
+      bottom auto
+      top -16px
+
+  a.reward-main-btn
+    display none
+
+.author-content-item.game-apex
+  min-height 300px
+  overflow hidden
+  color var(--sco-white)
+  width 59%
+
+  &::after
+    box-shadow 0 -69px 203px 11px #04120f inset
+    position absolute
+    content ''
+    width 100%
+    height 100%
+    top 0
+    left 0
+
+  .card-content
+    position absolute
+    width 100%
+    height 100%
+    top 0
+    left 0
+    z-index 2
+    display flex
+    flex-direction column
+    padding 1rem 2rem
+
+@media screen and (max-width: 768px)
+  .author-content-item
+    .card-content
+      padding 1rem
+
+@media screen and (min-width: 1300px)
+  .author-content-item
+    animation slide-in .6s 0s backwards
+
+.author-content-item
+  .content-bottom
+    margin-top auto
+    display flex
+    align-items center
+    justify-content space-between
+
+    .icon-group
+      display flex
+
+      i
+        display inline-block
+        width 22px
+        height 18px
+        margin-right .5rem
+
+.icon-pos-sup
+  background url(https://bu.dusays.com/2023/03/12/640dc913ee26b.webp)
+
+.icon-pos-mid
+  background url(https://bu.dusays.com/2023/03/12/640dc931a2cd4.webp)
+
+.author-content-item
+  &.game-jl
+    width 39%
+    min-height 300px
+    overflow hidden
+    color var(--sco-white)
+
+    &::after
+      box-shadow 0 -69px 203px 11px #415dc9 inset
+      position absolute
+      content ''
+      width 100%
+      height 100%
+      top 0
+      left 0
+
+  &.like-technology
+    background-size cover
+    min-height 230px
+    color var(--sco-white)
+
+    &::after
+      box-shadow 0 -69px 203px 11px #050b20 inset
+      position absolute
+      content ''
+      width 100%
+      height 100%
+      top 0
+      left 0
+
+  &.like-music
+    background-size cover
+    min-height 400px
+    color var(--sco-white)
+    overflow hidden
+
+    &::after
+      box-shadow 0 -69px 203px 11px #0e0e0e inset
+      position absolute
+      content ''
+      width 100%
+      height 100%
+      top 0
+      left 0
+
+  .card-content
+    position absolute
+    width 100%
+    height 100%
+    top 0
+    left 0
+    z-index 2
+    display flex
+    flex-direction column
+    padding 1rem 2rem
+
+    .author-content-item-title
+      margin-bottom .5rem
+
+    .banner-button-group
+      position absolute
+      bottom 1.5rem
+      right 2rem
+
+      .banner-button
+        height 40px
+        width 118px
+        border-radius 20px
+        justify-content center
+        background var(--sco-black-op)
+        color var(--sco-white)
+        display flex
+        align-items center
+        z-index 1
+        transition .3s
+        cursor pointer
+        backdrop-filter saturate(180%) blur(20px)
+        -webkit-backdrop-filter blur(20px)
+        transform translateZ(0)
+
+        &:hover
+          background var(--sco-main)
+          color var(--sco-white)
+
+        i
+          margin-right 8px
+          font-size 22px
+
+@media screen and (max-width: 768px)
+  .author-content-item
+    .card-content
+      .banner-button-group
+        right 1rem
+        bottom 1rem
+
+      .banner-button-group
+        .banner-button
+          background 0 0 !important
+          color var(--sco-white)
+          padding 0
+          width fit-content
+
+          i
+            margin-right 0
+            font-size 1.5rem
+
+      .banner-button-text
+        display none
+
+.author-content-item
+  &.single.like-movie
+    height 19rem
+    background-size cover
+    color var(--sco-white)
+    overflow hidden
+
+    &::after
+      box-shadow 0 21px 133px 81px #1c1c1c inset
+      position absolute
+      content ''
+      width 100%
+      height 100%
+      top 0
+      left 0
+
+  &.single.toolPage
+    height 19rem
+    background-size cover
+    color var(--sco-white)
+    overflow hidden
+    margin-top 0
+
+video.author-content-video
+  position absolute
+  width 100%
+  top 0
+  left 0
+  z-index -1
+
+.author-content
+  display flex
+  flex-wrap wrap
+  justify-content space-between
+  width 100%
+  margin-top 1rem
+
+.author-content-item-group.column
+  display flex
+  flex-direction column
+  width 49%
+  justify-content space-between
+
+.author-content-item
+  width 49%
+  border-radius 12px
+  background var(--sco-card-bg)
+  border var(--style-border-always)
+  box-shadow var(--sco-shadow-border)
+  position relative
+  padding 1rem 2rem
+  overflow hidden
+
+  &.single
+    width 100%
+
+  .author-content-item-title
+    font-size 36px
+    font-weight 700
+    line-height 1
+
+  .author-content-item-tips
+    opacity .8
+    font-size .6rem
+    margin-bottom .5rem
+
+@media screen and (max-width: 768px)
+  .author-content-item
+    width 100% !important
+    margin-top 1rem
+    padding 1rem
+
+  .author-content-item-group.column
+    width 100% !important
+
+  .author-content
+    margin-top 0
+
+.card-background-icon
+  font-size 12rem
+  opacity .2
+  position absolute
+  right 0
+  bottom -40%
+  transform rotate(30deg)
+  transition 2s ease-in-out
+
+.post-tips
+  color var(--sco-gray)
+  font-size 14px
+  position absolute
+  bottom 1rem
+  left 2rem
+
+  a
+    color var(--sco-gray) !important
+    border none !important
+
+    &:hover
+      color var(--sco-main) !important
+
+@media screen and (max-width: 768px)
+  .post-tips
+    left 1rem
+
+.inline-word
+  word-break keep-all
+  white-space nowrap
+
+.main-hero-waves-area
+  width 100%
+  position absolute
+  left 0
+  bottom -11px
+  z-index 5
+
+.waves-area .waves-svg
+  width 100%
+  height 60px
+
+.parallax > use
+  animation move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
+
+.parallax > use:nth-child(1)
+  animation-delay -2s
+  animation-duration 7s
+  fill var(--sco-background)
+  opacity .5
+
+.parallax > use:nth-child(2)
+  animation-delay -3s
+  animation-duration 10s
+  fill var(--sco-background)
+  opacity .6
+
+.parallax > use:nth-child(3)
+  animation-delay -4s
+  animation-duration 13s
+  fill var(--sco-background)
+  opacity .7
+
+.parallax > use:nth-child(4)
+  animation-delay -5s
+  animation-duration 20s
+  fill var(--sco-background)
+
+@media (max-width: 768px)
+  .main-hero-waves-area
+    display none
\ No newline at end of file
diff --git a/source/css/_page/category.styl b/source/css/_page/category.styl
index 1a5374c0..f425813d 100644
--- a/source/css/_page/category.styl
+++ b/source/css/_page/category.styl
@@ -88,14 +88,18 @@
       align-items: center
 
       &:hover
-        background: var(--sco-main) !important
-        box-shadow: var(--sco-shadow-blue)
-        color: var(--sco-white) !important
-        border: var(--style-border-hover)
+        transform scale(1.1)
+        background var(--sco-main) !important
+        box-shadow var(--sco-shadow-blue)
+        color var(--sco-white) !important
+        border var(--style-border-hover)
 
       span.tagsPageCount
         color: var(--sco-lighttext)
 
+      +maxWidth768()
+        zoom .85
+
 .tags-name
   margin-left: 2px
 
@@ -117,4 +121,21 @@ span.tagsPageCount
   min-width: 22.5px
   display: inline-block
   font-size: .6rem
-  margin-left: 4px
\ No newline at end of file
+  margin-left: 4px
+
+#category #category-bar
+  padding 0
+  border none
+  box-shadow none
+
+  +maxWidth768()
+    border-radius: 0;
+    background: var(--sco-background);
+    margin-bottom: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    z-index: 1;
+    padding: 0;
+    height: 50px;
+    margin-top: 0;
+    align-items: center;
\ No newline at end of file
diff --git a/source/css/_page/homeTop.styl b/source/css/_page/homeTop.styl
index 29054419..ec1bdb4d 100644
--- a/source/css/_page/homeTop.styl
+++ b/source/css/_page/homeTop.styl
@@ -201,14 +201,6 @@ a.categoryButton.shiyong
 a.categoryButton:hover
 	background-position: 100% 0
 
-#category #category-bar
-	padding: 0
-	border: none
-	box-shadow: none
-
-#category a.category-bar-item.select a
-	display: none
-
 .category-in-bar
 	display: flex
 	white-space: nowrap
@@ -248,11 +240,17 @@ a.categoryButton:hover
 	background: var(--sco-theme)
 	color: var(--sco-white)
 
+.category-bar-item.select
+	order -1
+
 .category-bar-item.select a
 	background: var(--sco-theme)
 	color: var(--sco-white)
 	border-radius: 8px
 
+#category a.category-bar-item.select a
+	display: none
+
 @media screen and (max-width: 768px)
 	.category-bar-item.select a
 		border-radius: 8px
@@ -283,14 +281,16 @@ a.categoryButton:hover
 .category-bar-more:hover
 	color: var(--sco-lighttext)
 
-
-1300px = 1300px
-
 @media screen and (max-width: 768px)
 	#recent-posts .recent-post-item
-		-webkit-box-orient: vertical
-		flex-direction: column
-		height: auto !important
+		margin 1.5rem 0
+		border-radius 12px
+		margin-top 0.5rem
+		border var(--style-border-always)
+		box-shadow var(--heo-shadow-border)
+		display block
+		position relative
+		clip-path inset(0 0 0 0 round 12px)
 
 	#recent-posts .recent-post-item .post_cover
 		width: 100%
@@ -345,10 +345,6 @@ a.categoryButton:hover
 	display: none
 	margin-right: 8px
 
-.recent-post-info-top-tips
-	display: flex
-	margin-top: 20px
-
 .recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post
 	display: flex
 	color: var(--sco-secondtext)
@@ -520,8 +516,6 @@ a.categoryButton:hover
 		animation: slide-in .6s .3s backwards
 
 @media screen and (max-width: 768px)
-	#recent-posts > .recent-post-item
-		border-radius: 0
 
 	#recent-posts > .recent-post-item:not(:first-child)
 		border-radius: 12px
diff --git a/source/css/_page/index.styl b/source/css/_page/index.styl
index 81cb9edd..13b5bca3 100644
--- a/source/css/_page/index.styl
+++ b/source/css/_page/index.styl
@@ -1,19 +1,19 @@
 // 即刻、categoriesBar 样式
 #bbTimeList,
 #category-bar
+  padding 0.4rem 1rem 0.4rem 0.7rem
   background var(--sco-card-bg)
-  width 100%
-  color var(--sco-fontcolor)
-  padding .5rem 1rem
   border-radius 12px
-  box-shadow var(--sco-shadow-lightblack)
   display flex
-  transition .3s
+  white-space nowrap
+  overflow hidden
   margin-bottom 1rem
   border var(--style-border)
+  transition .3s
+  width 100%
+  justify-content space-between
+  -webkit-user-select none
   align-items center
-  height 50px
-  user-select none
 
   +maxWidth1300()
     margin-bottom 1rem
diff --git a/source/css/_page/tag.styl b/source/css/_page/tag.styl
index 47333850..233340ca 100644
--- a/source/css/_page/tag.styl
+++ b/source/css/_page/tag.styl
@@ -3,7 +3,19 @@
     display flex
     flex-direction row
     flex-wrap wrap
-    margin 0 -.75rem .5rem
+    margin 0 -0.25rem
+    margin-bottom 0.5rem
+    position absolute
+    z-index 1
+    width 100%
+    padding 1rem 2rem
+    left 0
+    top 0
+    max-height 64px
+    overflow hidden
+    background var(--sco-card-bg)
+    backdrop-filter saturate(180%) blur(20px)
+    transition .1s ease-out
 
     a
       padding .1rem .5rem
@@ -16,6 +28,7 @@
       align-items center
 
       &.select
+        order -1
         color var(--sco-card-bg) !important
         background var(--sco-theme)
         box-shadow var(--sco-shadow-theme)
@@ -28,10 +41,15 @@
       &.select .tagsPageCount
         background var(--sco-card-bg)
         color var(--sco-lighttext)
-
+    +maxWidth768()
+      display none
 span.tags-punctuation
   margin-right 2px
   font-size .7rem
   font-weight 700
   display flex;
-  align-items center
\ No newline at end of file
+  align-items center
+
++minWidth1300()
+  #tag
+    padding: 4rem 2rem 1rem 2rem
\ No newline at end of file
diff --git a/source/css/_post/highlight.styl b/source/css/_post/highlight.styl
index c4913b62..a495ea73 100644
--- a/source/css/_post/highlight.styl
+++ b/source/css/_post/highlight.styl
@@ -45,13 +45,6 @@ figure
     overflow auto
     -webkit-overflow-scrolling touch
 
-    +maxWidth768()
-      .code pre .line
-        font-size 12px
-
-      .code pre .line span
-        font-size 8px
-
     .line
       &.marked
         background-color: rgba(97, 97, 97, .314)
diff --git a/source/css/_post/index.styl b/source/css/_post/index.styl
index c6528e38..b56e8e0d 100644
--- a/source/css/_post/index.styl
+++ b/source/css/_post/index.styl
@@ -87,6 +87,10 @@
       > span:first-child
         margin-right .8rem
 
+  span.tags-punctuation::before
+    font-size 20px
+    line-height 32px
+
 .post-meta-date
   .far
     opacity .6
@@ -110,6 +114,7 @@
     &:hover
       color var(--sco-white)
       opacity 1
+      background var(--sco-white-op)
 
 span.post-meta-categories
   background-color var(--sco-white-op)
@@ -136,16 +141,20 @@ span.post-meta-categories:hover
   a.post-meta-categories
     color var(--sco-main)
 
-.meta-firstline
-  .tag_share
-    margin-left 1rem
-
 #post-firstinfo
   .meta-firstline
     display flex
     align-items center
     height 32px
 
+    .tag_share
+      margin-left 1rem
+
+      .post-meta__tag-list
+        display flex
+        flex-direction row
+        align-items center
+
 @media screen and (max-width: 768px)
   #post-firstinfo
     .meta-firstline
diff --git a/source/css/index.styl b/source/css/index.styl
index 96bcff76..4010aa3a 100644
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -1,7 +1,7 @@
 @charset "UTF-8"
 
 if hexo-config('css_prefix')
-	@import 'nib'
+  @import 'nib'
 
 // project
 @import '_global/animation.css'
@@ -12,21 +12,26 @@ if hexo-config('css_prefix')
 
 // comment
 if hexo-config('comment.enable')
-	@import '_comment/index.styl'
-	@import '_comment/twikoo.styl' when hexo-config('comment.type') == 'twikoo'
+  @import '_comment/index.styl'
+  @import '_comment/twikoo.styl' when hexo-config('comment.type') == 'twikoo'
 
 // commentBarrage
 if hexo-config('thirdparty.comment.enable')
-	@import '_post/commentBarrage.styl'
+  @import '_post/commentBarrage.styl'
 
 // extra
-@import '_extra/*'
+@import '_extra/console.styl'
+
+// rightmenu
+if hexo-config('rightmenu')
+  @import '_extra/rightmenu.styl'
 
 // search
 if hexo-config('thirdparty.search.algolia_search.enable')
-	@import '_search/algolia-search'
+  @import '_search/algolia-search'
+
 if hexo-config('thirdparty.search.local_search.enable')
-	@import '_search/local-search'
+  @import '_search/local-search'
 
 // dark
 @import '_mode/*'
\ No newline at end of file
diff --git a/source/css/main.css b/source/css/main.css
deleted file mode 100755
index b7fc6baa..00000000
--- a/source/css/main.css
+++ /dev/null
@@ -1,56 +0,0 @@
-@charset "UTF-8";
-/*自定义高亮标签*/
-#aside-content .card-tag-cloud a[href*="/tags/Kotlin/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E6%95%B0%E5%AD%A6/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E8%8B%B1%E8%AF%AD/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E8%AF%AD%E6%96%87/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E7%89%A9%E7%90%86/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E7%94%9F%E7%89%A9/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E9%AB%98%E4%B8%AD%E5%9C%B0%E7%90%86/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/Sketch/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E8%AE%BE%E8%AE%A1/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E5%B9%B2%E8%B4%A7/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
-
-#aside-content .card-tag-cloud a[href*="/tags/%E6%95%99%E7%A8%8B/"] {
-    color: var(--sco-lighttext) !important;
-    font-weight: 500
-}
\ No newline at end of file
diff --git a/source/js/commentBarrage.js b/source/js/commentBarrage.js
index 831a7f1b..a9a91aa5 100755
--- a/source/js/commentBarrage.js
+++ b/source/js/commentBarrage.js
@@ -9,6 +9,7 @@ function initializeCommentBarrage() {
     };
     new class {
         commentInterval = null
+
         constructor(e) {
             this.config = {
                 ...e,
@@ -106,11 +107,11 @@ function initializeCommentBarrage() {
         async initCommentBarrage() {
             if (localStorage.getItem("commentBarrageSwitch") != null) {
                 document.querySelector(".comment-barrage").style.display = "flex";
-                document.querySelector(".menu-commentBarrage-text").textContent = "关闭热评";
+                GLOBALCONFIG.rightmenu.enable && (document.querySelector(".menu-commentBarrage-text").textContent = "关闭热评");
                 document.querySelector("#consoleCommentBarrage").classList.add("on");
             } else {
                 document.querySelector(".comment-barrage").style.display = "none";
-                document.querySelector(".menu-commentBarrage-text").textContent = "显示热评";
+                GLOBALCONFIG.rightmenu.enable && (document.querySelector(".menu-commentBarrage-text").textContent = "显示热评");
                 document.querySelector("#consoleCommentBarrage").classList.remove("on");
             }
             const comments = await this.fetchComments();
diff --git a/source/js/extend/search/algolia-search.js b/source/js/extend/search/algolia-search.js
index eca82d4a..282f6497 100755
--- a/source/js/extend/search/algolia-search.js
+++ b/source/js/extend/search/algolia-search.js
@@ -118,7 +118,7 @@ class search {
 
 const searchClickFn = () => {
     document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
-    document.getElementById('menu-search').addEventListener('click', function() {
+    GLOBALCONFIG.rightmenu.enable && document.getElementById('menu-search').addEventListener('click', function() {
         rm.hideRightMenu();
         search.openSearch();
         let t = document.getElementsByClassName('ais-search-box--input')[0];
diff --git a/source/js/extend/search/local-search.js b/source/js/extend/search/local-search.js
index 0c06c4bb..2ef7335e 100755
--- a/source/js/extend/search/local-search.js
+++ b/source/js/extend/search/local-search.js
@@ -142,7 +142,7 @@ class search{
 
 const searchClickFn = () => {
   document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
-  document.getElementById('menu-search').addEventListener('click', function() {
+  GLOBALCONFIG.rightmenu.enable && document.getElementById('menu-search').addEventListener('click', function() {
     rm.hideRightMenu();
     search.openSearch();
     let t = document.getElementsByClassName('search-box-input')[0];
diff --git a/source/js/main.js b/source/js/main.js
index 1d423d91..b87d3451 100755
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -736,8 +736,8 @@ let sco = {
 
         const isTagPage = /\/tags\/.*?\//.test(decodedPath);
         if (isTagPage) {
-            const tag = decodedPath.split("/")[2];
-            console.log(tag);
+            const tag = decodedPath.split("/").slice(-2, -1)[0];
+            console.log(tag)
 
             const tagPageTagsElement = document.getElementById("#tag-page-tags");
             if (tagPageTagsElement) {
@@ -749,7 +749,6 @@ let sco = {
                 const tagElement = document.getElementById(tag);
                 if (tagElement) {
                     tagElement.classList.add("select");
-                    tagElement.style.order = "-1";
                 }
             }
         }
@@ -757,7 +756,7 @@ let sco = {
     /**
      * categoryBarActive
      */
-    categoriesBarActive: function() {
+    categoriesBarActive: function () {
         const categoryBar = document.querySelector("#category-bar");
         const currentPath = window.location.pathname;
         const decodedPath = decodeURIComponent(currentPath);
@@ -776,16 +775,89 @@ let sco = {
             }
         } else {
             if (/\/categories\/.*?\//.test(decodedPath)) {
-                const category = decodedPath.split("/")[2];
+                let category = decodedPath.split("/").slice(-2, -1)[0];
+                category = category.charAt(0).toUpperCase() + category.slice(1);
                 if (categoryBar) {
                     const categoryItem = document.getElementById(category);
                     if (categoryItem) {
                         categoryItem.classList.add("select");
-                        categoryItem.style.order = "-1";
                     }
                 }
             }
         }
+    },
+    /**
+     * categoryBarRightButton
+     */
+    scrollCategoryBarToRight: function () {
+        // 定义一个变量用于存储 setTimeout 返回的 ID
+        let timeoutId;
+
+        // 获取滚动条元素和下一个元素
+        let scrollBar = document.getElementById("category-bar-items");
+        let nextElement = document.getElementById("category-bar-next");
+
+        // 获取滚动条元素的宽度
+        let scrollBarWidth = scrollBar.clientWidth;
+
+        // 检查滚动条是否存在
+        if (scrollBar) {
+            // 如果滚动条的滚动位置加上其宽度大于或等于其滚动宽度（减去8，可能是为了留出一些边距），
+            // 则将其滚动位置设置为0（即滚动到最左端）。
+            // 否则，将其滚动位置向右移动其宽度的距离（即滚动一个元素的宽度）。
+            if (scrollBar.scrollLeft + scrollBar.clientWidth >= scrollBar.scrollWidth - 8) {
+                scrollBar.scroll({
+                    left: 0,
+                    behavior: "smooth"
+                });
+            } else {
+                scrollBar.scrollBy({
+                    left: scrollBarWidth,
+                    behavior: "smooth"
+                });
+            }
+
+            // 为滚动条添加一个滚动事件监听器
+            scrollBar.addEventListener("scroll", function onScroll() {
+                // 清除之前的定时器
+                clearTimeout(timeoutId);
+
+                // 启动一个新的定时器，在150毫秒后执行以下操作：
+                timeoutId = setTimeout(function () {
+                    // 如果滚动条的滚动位置加上其宽度大于或等于其滚动宽度（减去8），
+                    // 则将下一个元素的 transform 样式设置为 "rotate(180deg)"（即旋转180度）。
+                    // 否则，清除下一个元素的 transform 样式。
+                    if (scrollBar.scrollLeft + scrollBar.clientWidth >= scrollBar.scrollWidth - 8) {
+                        nextElement.style.transform = "rotate(180deg)";
+                    } else {
+                        nextElement.style.transform = "";
+                    }
+
+                    // 移除滚动条的滚动事件监听器
+                    scrollBar.removeEventListener("scroll", onScroll);
+                }, 150);
+            });
+        }
+    },
+    /**
+     * 打开侧边栏标签隐藏
+     */
+    openAllTags: function () {
+        // 获取所有的 ".card-allinfo .card-tag-cloud" 元素
+        let tagCloudElements = document.querySelectorAll(".card-allinfo .card-tag-cloud");
+
+        // 遍历这些元素，为每个元素添加 "all-tags" 类
+        tagCloudElements.forEach(function (tagCloudElement) {
+            tagCloudElement.classList.add("all-tags");
+        });
+
+        // 获取 "more-tags-btn" 元素
+        let moreTagsButton = document.getElementById("more-tags-btn");
+
+        // 如果 "more-tags-btn" 元素存在，那么移除它
+        if (moreTagsButton) {
+            moreTagsButton.parentNode.removeChild(moreTagsButton);
+        }
     }
 }
 
@@ -905,7 +977,7 @@ window.refreshFn = () => {
     sco.setTimeState()
     sco.tagPageActive()
     sco.categoriesBarActive()
-    addRightMenuClickEvent()
+    GLOBALCONFIG.rightmenu.enable && addRightMenuClickEvent()
     GLOBALCONFIG.lazyload.enable && sco.lazyloadImg()
     GLOBALCONFIG.lightbox && sco.lightbox('')
     GLOBALCONFIG.randomlinks && randomLinksList()

From 669e2f5dea59ebbf8870b2f3c1ec1688f0941bc0 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sun, 26 Nov 2023 16:16:33 +0800
Subject: [PATCH 29/43] Update PUG

ejs > pug
---
 .DS_Store                                     | Bin 6148 -> 6148 bytes
 LICENSE                                       | 693 +++++++++++++++++-
 _config.yml                                   | 233 +++---
 layout/404.ejs                                |  34 -
 layout/404.pug                                |  24 +
 layout/archive.ejs                            |  10 -
 layout/archive.pug                            |  11 +
 layout/category.ejs                           |  21 -
 layout/category.pug                           |  16 +
 layout/includes/console.pug                   |  42 ++
 layout/includes/footer.pug                    |  71 ++
 layout/includes/head.pug                      |  29 +
 layout/includes/head/config.pug               |  82 +++
 layout/includes/head/pwa.pug                  |  59 ++
 layout/includes/header.pug                    |   4 +
 layout/includes/inject/body.pug               |  67 ++
 .../head.ejs => includes/inject/head.pug}     |  86 ++-
 layout/includes/layout.pug                    |  35 +
 .../loading.ejs => includes/loading.pug}      |  36 +-
 layout/includes/mixins/articleSort.pug        |  14 +
 layout/includes/mixins/pagination.pug         |   8 +
 layout/includes/nav.pug                       |  22 +
 layout/includes/page/about.pug                |  10 +
 layout/includes/page/categories.pug           |   8 +
 layout/includes/page/default.pug              |   2 +
 layout/includes/page/echarts.pug              |   7 +
 layout/includes/page/equipment.pug            |   3 +
 layout/includes/page/links.pug                |  35 +
 layout/includes/page/moments.pug              |   5 +
 layout/includes/page/not_configured.pug       |   0
 layout/includes/page/rss.pug                  |  22 +
 layout/includes/page/says.pug                 |  22 +
 layout/includes/page/tags.pug                 |   8 +
 layout/includes/page/tlink.pug                |   9 +
 layout/includes/recent-posts.pug              |   9 +
 layout/includes/sidebar.pug                   |  20 +
 layout/includes/widgets/aside/aside.pug       |  18 +
 .../includes/widgets/aside/asideAllInfo.pug   |   8 +
 .../includes/widgets/aside/asideArchive.pug   |   9 +
 .../widgets/aside/asideFlipCard.pug}          |  23 +-
 .../includes/widgets/aside/asideHistory.pug   |  44 ++
 .../includes/widgets/aside/asideInfoCard.pug  |  22 +
 .../widgets/aside/asideNewestPost.pug         |  16 +
 layout/includes/widgets/aside/asidePower.pug  |  19 +
 layout/includes/widgets/aside/asideSwitch.pug |  26 +
 layout/includes/widgets/aside/asideTag.pug    |  11 +
 layout/includes/widgets/aside/asideToc.pug    |   5 +
 .../includes/widgets/aside/asideWebInfo.pug   |  40 +
 .../includes/widgets/aside/asideWelcome.pug   |  28 +
 layout/includes/widgets/home/banner.pug       |  16 +
 layout/includes/widgets/home/bbTimeList.pug   |   8 +
 layout/includes/widgets/home/categoryBar.pug  |  10 +
 .../includes/widgets/home/categoryGroup.pug   |   9 +
 layout/includes/widgets/home/hometop.pug      |   9 +
 layout/includes/widgets/home/postList.pug     |  25 +
 layout/includes/widgets/home/rencentPost.pug  |  26 +
 layout/includes/widgets/home/topGroup.pug     |  27 +
 layout/includes/widgets/nav/left.pug          |  10 +
 layout/includes/widgets/nav/menu.pug          |  16 +
 layout/includes/widgets/nav/right.pug         |  23 +
 .../widgets/page/about/authorinfo.pug         |  12 +
 layout/includes/widgets/page/about/award.pug  |  34 +
 .../widgets/page/about/contentinfo.pug        |  38 +
 .../includes/widgets/page/about/hobbies.pug   |  33 +
 layout/includes/widgets/page/about/motto.pug  |  19 +
 layout/includes/widgets/page/about/other.pug  |  61 ++
 .../widgets/page/about/personalities.pug      |  16 +
 .../widgets/page/about/skillsinfo.pug         |  41 ++
 layout/includes/widgets/page/banner.pug       |  14 +
 .../widgets/page/equipment/content.pug        |  23 +
 layout/includes/widgets/page/links/banner.pug |  30 +
 .../includes/widgets/page/links/linksCard.pug |  18 +
 .../includes/widgets/page/links/linksItem.pug |  14 +
 .../includes/widgets/page/moments/angle.pug   |  24 +
 .../includes/widgets/page/moments/index.pug   |  18 +
 .../includes/widgets/page/says/saysBottom.pug |  11 +
 .../widgets/page/says/saysContent.pug         |   6 +
 .../widgets/page/says/saysFunction.pug        |  10 +
 .../includes/widgets/page/says/saysMeta.pug   |   7 +
 layout/includes/widgets/post/award.pug        |  48 ++
 layout/includes/widgets/post/copyright.pug    |  26 +
 layout/includes/widgets/post/postMeta.pug     |  54 ++
 layout/includes/widgets/post/postNav.pug      |  25 +
 layout/includes/widgets/post/wave.pug         |   9 +
 layout/includes/widgets/randomlink.pug        |  32 +
 layout/includes/widgets/rightside/index.pug   |  74 ++
 .../widgets/third-party/comments/comment.pug  |  14 +
 .../widgets/third-party/comments/gitalk.pug   |   0
 .../widgets/third-party/comments/twikoo.pug}  |  17 +-
 .../widgets/third-party/comments/valine.pug   |   0
 layout/includes/widgets/third-party/music.pug |   3 +
 layout/includes/widgets/third-party/pjax.pug  |  30 +
 .../third-party/search/algolia-search.pug     |  13 +
 .../widgets/third-party/search/index.pug      |   7 +
 .../third-party/search/local-search.pug       |  15 +
 layout/index.ejs                              |  20 -
 layout/index.pug                              |  20 +
 layout/layout.ejs                             |  30 -
 layout/page.ejs                               |  45 --
 layout/page.pug                               |  32 +
 layout/page/about.ejs                         |  15 -
 layout/page/categories.ejs                    |  12 -
 layout/page/circle.ejs                        |   5 -
 layout/page/echarts.ejs                       |   1 -
 layout/page/equipment.ejs                     |   2 -
 layout/page/links.ejs                         |  46 --
 layout/page/not_configured.ejs                |  13 -
 layout/page/page.ejs                          |   3 -
 layout/page/rss.ejs                           |  39 -
 layout/page/says.ejs                          |  26 -
 layout/page/tags.ejs                          |  12 -
 layout/page/tlink.ejs                         |  11 -
 layout/partial/body.ejs                       |   7 -
 layout/partial/compoment/about/authorinfo.ejs |  18 -
 layout/partial/compoment/about/award.ejs      |  59 --
 .../partial/compoment/about/contentinfo.ejs   |  33 -
 layout/partial/compoment/about/hobbies.ejs    |  53 --
 layout/partial/compoment/about/motto.ejs      |  17 -
 layout/partial/compoment/about/other.ejs      |  76 --
 .../partial/compoment/about/personalities.ejs |  11 -
 layout/partial/compoment/about/skillsinfo.ejs |  62 --
 layout/partial/compoment/aside/aside.ejs      |  28 -
 .../partial/compoment/aside/asideAllInfo.ejs  |  11 -
 .../partial/compoment/aside/asideArchive.ejs  |  11 -
 .../partial/compoment/aside/asideHistory.ejs  |  49 --
 .../partial/compoment/aside/asideInfoCard.ejs |  40 -
 .../compoment/aside/asideNewestPost.ejs       |  31 -
 layout/partial/compoment/aside/asidePower.ejs |  31 -
 .../partial/compoment/aside/asideSwitch.ejs   |  41 --
 layout/partial/compoment/aside/asideTag.ejs   |  16 -
 layout/partial/compoment/aside/asideToc.ejs   |  11 -
 .../partial/compoment/aside/asideWebInfo.ejs  |  60 --
 .../partial/compoment/aside/asideWelcome.ejs  |  33 -
 layout/partial/compoment/circle/angle.ejs     |  26 -
 layout/partial/compoment/circle/banner.ejs    |  11 -
 layout/partial/compoment/circle/content.ejs   |  19 -
 .../partial/compoment/dorakika/rightmenu.ejs  | 100 ---
 layout/partial/compoment/equipment/banner.ejs |  10 -
 layout/partial/compoment/equipment/list.ejs   |  37 -
 .../compoment/home/homeCategoryBar.ejs        |  17 -
 layout/partial/compoment/home/postList.ejs    |  38 -
 .../partial/compoment/hometop/bbTimeList.ejs  |  15 -
 .../compoment/hometop/categoryGroup.ejs       |  19 -
 layout/partial/compoment/hometop/groupTag.ejs |  30 -
 layout/partial/compoment/hometop/topGroup.ejs |  41 --
 layout/partial/compoment/inject/body.ejs      |  75 --
 layout/partial/compoment/links/angle.ejs      |  26 -
 layout/partial/compoment/links/banner.ejs     |  42 --
 layout/partial/compoment/links/linksCard.ejs  |  27 -
 layout/partial/compoment/links/linksItem.ejs  |  21 -
 .../partial/compoment/mixins/articleSort.ejs  |  25 -
 .../partial/compoment/mixins/pagination.ejs   |  11 -
 layout/partial/compoment/nav/left.ejs         |  22 -
 layout/partial/compoment/nav/menu.ejs         |  25 -
 layout/partial/compoment/nav/right.ejs        |  42 --
 layout/partial/compoment/post/award.ejs       |  60 --
 layout/partial/compoment/post/copyright.ejs   |  39 -
 layout/partial/compoment/post/postMeta.ejs    |  82 ---
 layout/partial/compoment/post/postNav.ejs     |  41 --
 layout/partial/compoment/post/wave.ejs        |  14 -
 layout/partial/compoment/says/banner.ejs      |  10 -
 layout/partial/compoment/says/saysBottom.ejs  |  18 -
 layout/partial/compoment/says/saysContent.ejs |  10 -
 .../partial/compoment/says/saysFunction.ejs   |  15 -
 layout/partial/compoment/says/saysMeta.ejs    |  10 -
 .../third-party/comments/comment.ejs          |  12 -
 .../partial/compoment/third-party/music.ejs   |   5 -
 layout/partial/compoment/third-party/pjax.ejs |  31 -
 .../third-party/search/algolia-search.ejs     |  20 -
 .../compoment/third-party/search/index.ejs    |   8 -
 .../third-party/search/local-search.ejs       |  22 -
 layout/partial/compoment/tlink/banner.ejs     |  10 -
 layout/partial/console.ejs                    |  68 --
 layout/partial/footer.ejs                     | 109 ---
 layout/partial/head.ejs                       |  35 -
 layout/partial/header.ejs                     |   6 -
 layout/partial/hometop.ejs                    |  15 -
 layout/partial/nav.ejs                        |  34 -
 layout/partial/pwa.ejs                        |  40 -
 layout/partial/sidebar.ejs                    |  31 -
 layout/post.ejs                               |  66 --
 layout/post.pug                               |  41 ++
 layout/tag.ejs                                |  25 -
 layout/tag.pug                                |  19 +
 package-lock.json                             | 674 +++++++++++++++++
 package.json                                  |   4 +-
 scripts/event/init.js                         |   0
 scripts/event/page.js                         |  14 +
 scripts/event/welcome.js                      |   0
 scripts/filter/checkThemeConfig.js            |   1 -
 scripts/filter/default.js                     |   0
 scripts/filter/lazyload.js                    |   0
 scripts/filter/randomPosts.js                 |   1 -
 scripts/helper/{charts.js => echarts.js}      |  55 +-
 scripts/helper/getArchiveLength.js            |   0
 scripts/helper/randomLinks.js                 |  16 -
 scripts/helper/related_post.js                |   0
 scripts/helper/themeJsExport.js               |  81 --
 scripts/tags/bvideo.js                        |   0
 scripts/tags/fold.js                          |   0
 scripts/tags/link.js                          |   0
 scripts/tags/note.js                          |   0
 scripts/tags/tabs.js                          |   0
 scripts/tags/timeline.js                      |   0
 source/.DS_Store                              | Bin 8196 -> 6148 bytes
 {scripts => source/css}/.DS_Store             | Bin 6148 -> 6148 bytes
 source/css/_extra/console.styl                |   1 +
 source/css/_layout/articleSort.styl           |   1 +
 source/css/_layout/aside.styl                 |   3 -
 source/css/_layout/index.styl                 | 103 ++-
 source/css/_layout/layout.styl                | 100 ---
 source/css/_page/error.styl                   |   2 +-
 source/css/_page/link.styl                    |   4 +-
 source/css/index.styl                         |  12 +-
 source/img/.DS_Store                          | Bin 6148 -> 0 bytes
 source/js/.DS_Store                           | Bin 6148 -> 0 bytes
 source/js/commentBarrage.js                   |   8 +-
 source/js/extend/console/comment.js           |   2 +-
 source/js/extend/covercolor/local.js          |   2 +-
 source/js/extend/search/algolia-search.js     |  14 +-
 source/js/extend/search/local-search.js       |  14 +-
 source/js/main.js                             |  90 ++-
 source/js/{rightmenu.js => rightside.js}      |   0
 source/js/utils.js                            |  25 +-
 source/lib/.DS_Store                          | Bin 6148 -> 0 bytes
 225 files changed, 3767 insertions(+), 3066 deletions(-)
 mode change 100755 => 100644 _config.yml
 delete mode 100755 layout/404.ejs
 create mode 100644 layout/404.pug
 delete mode 100755 layout/archive.ejs
 create mode 100644 layout/archive.pug
 delete mode 100755 layout/category.ejs
 create mode 100644 layout/category.pug
 create mode 100644 layout/includes/console.pug
 create mode 100644 layout/includes/footer.pug
 create mode 100644 layout/includes/head.pug
 create mode 100644 layout/includes/head/config.pug
 create mode 100644 layout/includes/head/pwa.pug
 create mode 100644 layout/includes/header.pug
 create mode 100644 layout/includes/inject/body.pug
 rename layout/{partial/compoment/inject/head.ejs => includes/inject/head.pug} (58%)
 mode change 100755 => 100644
 create mode 100644 layout/includes/layout.pug
 rename layout/{partial/loading.ejs => includes/loading.pug} (74%)
 mode change 100755 => 100644
 create mode 100644 layout/includes/mixins/articleSort.pug
 create mode 100644 layout/includes/mixins/pagination.pug
 create mode 100644 layout/includes/nav.pug
 create mode 100644 layout/includes/page/about.pug
 create mode 100644 layout/includes/page/categories.pug
 create mode 100644 layout/includes/page/default.pug
 create mode 100644 layout/includes/page/echarts.pug
 create mode 100644 layout/includes/page/equipment.pug
 create mode 100644 layout/includes/page/links.pug
 create mode 100644 layout/includes/page/moments.pug
 create mode 100644 layout/includes/page/not_configured.pug
 create mode 100644 layout/includes/page/rss.pug
 create mode 100644 layout/includes/page/says.pug
 create mode 100644 layout/includes/page/tags.pug
 create mode 100644 layout/includes/page/tlink.pug
 create mode 100644 layout/includes/recent-posts.pug
 create mode 100644 layout/includes/sidebar.pug
 create mode 100644 layout/includes/widgets/aside/aside.pug
 create mode 100644 layout/includes/widgets/aside/asideAllInfo.pug
 create mode 100644 layout/includes/widgets/aside/asideArchive.pug
 rename layout/{partial/compoment/aside/asideFlipCard.ejs => includes/widgets/aside/asideFlipCard.pug} (75%)
 mode change 100755 => 100644
 create mode 100644 layout/includes/widgets/aside/asideHistory.pug
 create mode 100644 layout/includes/widgets/aside/asideInfoCard.pug
 create mode 100644 layout/includes/widgets/aside/asideNewestPost.pug
 create mode 100644 layout/includes/widgets/aside/asidePower.pug
 create mode 100644 layout/includes/widgets/aside/asideSwitch.pug
 create mode 100644 layout/includes/widgets/aside/asideTag.pug
 create mode 100644 layout/includes/widgets/aside/asideToc.pug
 create mode 100644 layout/includes/widgets/aside/asideWebInfo.pug
 create mode 100644 layout/includes/widgets/aside/asideWelcome.pug
 create mode 100644 layout/includes/widgets/home/banner.pug
 create mode 100644 layout/includes/widgets/home/bbTimeList.pug
 create mode 100644 layout/includes/widgets/home/categoryBar.pug
 create mode 100644 layout/includes/widgets/home/categoryGroup.pug
 create mode 100644 layout/includes/widgets/home/hometop.pug
 create mode 100644 layout/includes/widgets/home/postList.pug
 create mode 100644 layout/includes/widgets/home/rencentPost.pug
 create mode 100644 layout/includes/widgets/home/topGroup.pug
 create mode 100644 layout/includes/widgets/nav/left.pug
 create mode 100644 layout/includes/widgets/nav/menu.pug
 create mode 100644 layout/includes/widgets/nav/right.pug
 create mode 100644 layout/includes/widgets/page/about/authorinfo.pug
 create mode 100644 layout/includes/widgets/page/about/award.pug
 create mode 100644 layout/includes/widgets/page/about/contentinfo.pug
 create mode 100644 layout/includes/widgets/page/about/hobbies.pug
 create mode 100644 layout/includes/widgets/page/about/motto.pug
 create mode 100644 layout/includes/widgets/page/about/other.pug
 create mode 100644 layout/includes/widgets/page/about/personalities.pug
 create mode 100644 layout/includes/widgets/page/about/skillsinfo.pug
 create mode 100644 layout/includes/widgets/page/banner.pug
 create mode 100644 layout/includes/widgets/page/equipment/content.pug
 create mode 100644 layout/includes/widgets/page/links/banner.pug
 create mode 100644 layout/includes/widgets/page/links/linksCard.pug
 create mode 100644 layout/includes/widgets/page/links/linksItem.pug
 create mode 100644 layout/includes/widgets/page/moments/angle.pug
 create mode 100644 layout/includes/widgets/page/moments/index.pug
 create mode 100644 layout/includes/widgets/page/says/saysBottom.pug
 create mode 100644 layout/includes/widgets/page/says/saysContent.pug
 create mode 100644 layout/includes/widgets/page/says/saysFunction.pug
 create mode 100644 layout/includes/widgets/page/says/saysMeta.pug
 create mode 100644 layout/includes/widgets/post/award.pug
 create mode 100644 layout/includes/widgets/post/copyright.pug
 create mode 100644 layout/includes/widgets/post/postMeta.pug
 create mode 100644 layout/includes/widgets/post/postNav.pug
 create mode 100644 layout/includes/widgets/post/wave.pug
 create mode 100644 layout/includes/widgets/randomlink.pug
 create mode 100644 layout/includes/widgets/rightside/index.pug
 create mode 100644 layout/includes/widgets/third-party/comments/comment.pug
 create mode 100644 layout/includes/widgets/third-party/comments/gitalk.pug
 rename layout/{partial/compoment/third-party/comments/twikoo.ejs => includes/widgets/third-party/comments/twikoo.pug} (63%)
 mode change 100755 => 100644
 create mode 100644 layout/includes/widgets/third-party/comments/valine.pug
 create mode 100644 layout/includes/widgets/third-party/music.pug
 create mode 100644 layout/includes/widgets/third-party/pjax.pug
 create mode 100644 layout/includes/widgets/third-party/search/algolia-search.pug
 create mode 100644 layout/includes/widgets/third-party/search/index.pug
 create mode 100644 layout/includes/widgets/third-party/search/local-search.pug
 delete mode 100755 layout/index.ejs
 create mode 100644 layout/index.pug
 delete mode 100755 layout/layout.ejs
 delete mode 100755 layout/page.ejs
 create mode 100644 layout/page.pug
 delete mode 100755 layout/page/about.ejs
 delete mode 100755 layout/page/categories.ejs
 delete mode 100755 layout/page/circle.ejs
 delete mode 100755 layout/page/echarts.ejs
 delete mode 100755 layout/page/equipment.ejs
 delete mode 100755 layout/page/links.ejs
 delete mode 100644 layout/page/not_configured.ejs
 delete mode 100755 layout/page/page.ejs
 delete mode 100755 layout/page/rss.ejs
 delete mode 100755 layout/page/says.ejs
 delete mode 100755 layout/page/tags.ejs
 delete mode 100755 layout/page/tlink.ejs
 delete mode 100755 layout/partial/body.ejs
 delete mode 100755 layout/partial/compoment/about/authorinfo.ejs
 delete mode 100755 layout/partial/compoment/about/award.ejs
 delete mode 100755 layout/partial/compoment/about/contentinfo.ejs
 delete mode 100755 layout/partial/compoment/about/hobbies.ejs
 delete mode 100755 layout/partial/compoment/about/motto.ejs
 delete mode 100755 layout/partial/compoment/about/other.ejs
 delete mode 100755 layout/partial/compoment/about/personalities.ejs
 delete mode 100755 layout/partial/compoment/about/skillsinfo.ejs
 delete mode 100755 layout/partial/compoment/aside/aside.ejs
 delete mode 100755 layout/partial/compoment/aside/asideAllInfo.ejs
 delete mode 100644 layout/partial/compoment/aside/asideArchive.ejs
 delete mode 100644 layout/partial/compoment/aside/asideHistory.ejs
 delete mode 100755 layout/partial/compoment/aside/asideInfoCard.ejs
 delete mode 100755 layout/partial/compoment/aside/asideNewestPost.ejs
 delete mode 100755 layout/partial/compoment/aside/asidePower.ejs
 delete mode 100755 layout/partial/compoment/aside/asideSwitch.ejs
 delete mode 100755 layout/partial/compoment/aside/asideTag.ejs
 delete mode 100755 layout/partial/compoment/aside/asideToc.ejs
 delete mode 100755 layout/partial/compoment/aside/asideWebInfo.ejs
 delete mode 100644 layout/partial/compoment/aside/asideWelcome.ejs
 delete mode 100755 layout/partial/compoment/circle/angle.ejs
 delete mode 100755 layout/partial/compoment/circle/banner.ejs
 delete mode 100755 layout/partial/compoment/circle/content.ejs
 delete mode 100755 layout/partial/compoment/dorakika/rightmenu.ejs
 delete mode 100755 layout/partial/compoment/equipment/banner.ejs
 delete mode 100755 layout/partial/compoment/equipment/list.ejs
 delete mode 100755 layout/partial/compoment/home/homeCategoryBar.ejs
 delete mode 100755 layout/partial/compoment/home/postList.ejs
 delete mode 100755 layout/partial/compoment/hometop/bbTimeList.ejs
 delete mode 100755 layout/partial/compoment/hometop/categoryGroup.ejs
 delete mode 100755 layout/partial/compoment/hometop/groupTag.ejs
 delete mode 100755 layout/partial/compoment/hometop/topGroup.ejs
 delete mode 100755 layout/partial/compoment/inject/body.ejs
 delete mode 100755 layout/partial/compoment/links/angle.ejs
 delete mode 100755 layout/partial/compoment/links/banner.ejs
 delete mode 100755 layout/partial/compoment/links/linksCard.ejs
 delete mode 100755 layout/partial/compoment/links/linksItem.ejs
 delete mode 100755 layout/partial/compoment/mixins/articleSort.ejs
 delete mode 100755 layout/partial/compoment/mixins/pagination.ejs
 delete mode 100755 layout/partial/compoment/nav/left.ejs
 delete mode 100755 layout/partial/compoment/nav/menu.ejs
 delete mode 100755 layout/partial/compoment/nav/right.ejs
 delete mode 100755 layout/partial/compoment/post/award.ejs
 delete mode 100755 layout/partial/compoment/post/copyright.ejs
 delete mode 100755 layout/partial/compoment/post/postMeta.ejs
 delete mode 100755 layout/partial/compoment/post/postNav.ejs
 delete mode 100755 layout/partial/compoment/post/wave.ejs
 delete mode 100755 layout/partial/compoment/says/banner.ejs
 delete mode 100755 layout/partial/compoment/says/saysBottom.ejs
 delete mode 100755 layout/partial/compoment/says/saysContent.ejs
 delete mode 100644 layout/partial/compoment/says/saysFunction.ejs
 delete mode 100644 layout/partial/compoment/says/saysMeta.ejs
 delete mode 100755 layout/partial/compoment/third-party/comments/comment.ejs
 delete mode 100755 layout/partial/compoment/third-party/music.ejs
 delete mode 100755 layout/partial/compoment/third-party/pjax.ejs
 delete mode 100755 layout/partial/compoment/third-party/search/algolia-search.ejs
 delete mode 100755 layout/partial/compoment/third-party/search/index.ejs
 delete mode 100755 layout/partial/compoment/third-party/search/local-search.ejs
 delete mode 100755 layout/partial/compoment/tlink/banner.ejs
 delete mode 100755 layout/partial/console.ejs
 delete mode 100755 layout/partial/footer.ejs
 delete mode 100755 layout/partial/head.ejs
 delete mode 100755 layout/partial/header.ejs
 delete mode 100755 layout/partial/hometop.ejs
 delete mode 100755 layout/partial/nav.ejs
 delete mode 100644 layout/partial/pwa.ejs
 delete mode 100755 layout/partial/sidebar.ejs
 delete mode 100755 layout/post.ejs
 create mode 100644 layout/post.pug
 delete mode 100755 layout/tag.ejs
 create mode 100644 layout/tag.pug
 create mode 100644 package-lock.json
 mode change 100755 => 100644 scripts/event/init.js
 mode change 100755 => 100644 scripts/event/page.js
 mode change 100755 => 100644 scripts/event/welcome.js
 mode change 100755 => 100644 scripts/filter/checkThemeConfig.js
 mode change 100755 => 100644 scripts/filter/default.js
 mode change 100755 => 100644 scripts/filter/lazyload.js
 mode change 100755 => 100644 scripts/filter/randomPosts.js
 rename scripts/helper/{charts.js => echarts.js} (89%)
 mode change 100755 => 100644
 mode change 100755 => 100644 scripts/helper/getArchiveLength.js
 delete mode 100755 scripts/helper/randomLinks.js
 mode change 100755 => 100644 scripts/helper/related_post.js
 delete mode 100755 scripts/helper/themeJsExport.js
 mode change 100755 => 100644 scripts/tags/bvideo.js
 mode change 100755 => 100644 scripts/tags/fold.js
 mode change 100755 => 100644 scripts/tags/link.js
 mode change 100755 => 100644 scripts/tags/note.js
 mode change 100755 => 100644 scripts/tags/tabs.js
 mode change 100755 => 100644 scripts/tags/timeline.js
 mode change 100755 => 100644 source/.DS_Store
 rename {scripts => source/css}/.DS_Store (73%)
 delete mode 100644 source/css/_layout/layout.styl
 delete mode 100755 source/img/.DS_Store
 delete mode 100755 source/js/.DS_Store
 mode change 100755 => 100644 source/js/commentBarrage.js
 mode change 100755 => 100644 source/js/extend/console/comment.js
 mode change 100755 => 100644 source/js/extend/covercolor/local.js
 mode change 100755 => 100644 source/js/extend/search/algolia-search.js
 mode change 100755 => 100644 source/js/extend/search/local-search.js
 mode change 100755 => 100644 source/js/main.js
 rename source/js/{rightmenu.js => rightside.js} (100%)
 mode change 100755 => 100644 source/js/utils.js
 delete mode 100755 source/lib/.DS_Store

diff --git a/.DS_Store b/.DS_Store
index 6d8eab22897d5c9a6f8fa1289a5198cd8d3de544..832770fa3dbf9f92845853984b1cb80eebf267d9 100644
GIT binary patch
delta 580
zcmZ{hu}Z^G6o$VjO;QYK2PYAH01X+c&P6*Es)9a1v9Vs%)D+tco#N2V#gbjRIXd)(
zd;nj-LG<LRG`Z-7%T2id_n&kAI|(Mi<H@=QSg;0{T%qt8)1TMe=jAlNTA@Qo%x&?S
zs1?OwH;TKW5R!&$|5Gpdf+`W`!YC3s6+MOq@nR6RCdN`JVf3v{f9<VJL+sF|#Q{x@
zIip#&wjK<1je#@~a`V&5j+Bb^zt1(pd^p45T|1<Uc|617A8<(-rK_AulMN0zlGCTp
zMY$At4o`*Tyaka8($O>i1?G_#K}RMDxsx{>Ff!xT2^Q71o;wkJNUz+I&M((iWJC65
cPu>0c-uBjRJ;-L2jcn$q>HX{6aX(hS0FEY_(EtDd

delta 391
zcmZoMXfc@JFUrBdz`)4BAi%&-%8<yA&XCGboK(J9kYhQsGDwP(AqOa&2b4gPE-pyQ
z$xi~x?wG8>R;VsfU2S1tprc@FXk4qKP;F@hWSbb9)z)%yh$`z_2gPUS<mTmfO+Lsb
zZ{LmG%(CF3yqx^JbckaZ*ub_{GUNkoElDcJVxN&E&<+a|LiSmM>_agP%_eq+Vuoaf
zB8E(c0)`Th*Rj}TY5}y%)Rd52@*um=%tN+qG7sBC4r2?TVWt))lb5nJZD!~A%MSon
CYhZQ&

diff --git a/LICENSE b/LICENSE
index 9cf10627..e72bfdda 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,19 +1,674 @@
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.
\ No newline at end of file
diff --git a/_config.yml b/_config.yml
old mode 100755
new mode 100644
index f73dace3..afc84533
--- a/_config.yml
+++ b/_config.yml
@@ -14,52 +14,52 @@ nav:
   left:
     enable: false
     menu:
-  #      项目:
-  #        Solitude:
-  #          icon: https://bu.dusays.com/2023/11/08/654af68b25bb8.jpg
-  #          url: https://github.com/DuoSco/Hexo-Theme-solitude
+#        项目:
+#          Solitude:
+#            icon: https://bu.dusays.com/2023/11/08/654af68b25bb8.jpg
+#            url: https://github.com/DuoSco/Hexo-Theme-solitude
 
   # 导航栏内容
   menu:
-  #    文库:
-  #      url: false
-  #      child:
-  #        文章列表:
-  #          url: /archives/
-  #          icon: scoicon sco-folder-fill
-  #        全部分类:
-  #          url: /categories/
-  #          icon: scoicon sco-checkbox-multiple-blank-fill
-  #        全部标签:
-  #          url: /tags/
-  #          icon: scoicon sco-price-tag-fill
-  #    友链:
-  #      url: false
-  #      child:
-  #        鱼塘:
-  #          url: /moments/
-  #          icon: scoicon sco-wifi-fill
-  #        友情链接:
-  #          url: /links/
-  #          icon: scoicon sco-group-fill
-  #        宝藏博主:
-  #          url: javascript:travelling()
-  #          icon: scoicon sco-gift-fill
-  #    我的:
-  #      url: false
-  #      child:
-  #        装备:
-  #          url: /equipment/
-  #          icon: scoicon sco-laptop-line
-  #        工具箱:
-  #          url: /tlink/
-  #          icon: scoicon sco-tools-fill
-  #    关于:
-  #      url: false
-  #      child:
-  #        关于本站:
-  #          url: /about/
-  #          icon: scoicon sco-contacts-fill
+#      文库:
+#        url: false
+#        child:
+#          文章列表:
+#            url: /archives/
+#            icon: scoicon sco-folder-fill
+#          全部分类:
+#            url: /categories/
+#            icon: scoicon sco-checkbox-multiple-blank-fill
+#          全部标签:
+#            url: /tags/
+#            icon: scoicon sco-price-tag-fill
+#      友链:
+#        url: false
+#        child:
+#          鱼塘:
+#            url: /moments/
+#            icon: scoicon sco-wifi-fill
+#          友情链接:
+#            url: /links/
+#            icon: scoicon sco-group-fill
+#          宝藏博主:
+#            url: javascript:travelling()
+#            icon: scoicon sco-gift-fill
+#      我的:
+#        url: false
+#        child:
+#          装备:
+#            url: /equipment/
+#            icon: scoicon sco-laptop-line
+#          工具箱:
+#            url: /tlink/
+#            icon: scoicon sco-tools-fill
+#      关于:
+#        url: false
+#        child:
+#          关于本站:
+#            url: /about/
+#            icon: scoicon sco-contacts-fill
 
 
   # 导航栏右侧快捷菜单 (true,false)
@@ -76,30 +76,30 @@ hometop:
     url: Hexo-Theme-Solitude # title下方小字
     # 轮播icon
     icon:
-      HTML:
-        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/HTML.png
-        color: '#e9572b'
-      JS:
-        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/JS.png
-        color: '#f7cb4f'
-      Kotlin:
-        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/kotlin-logo.svg
-        color: '#ffffff'
-      Docker:
-        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/docker.png
-        color: '#57b6e6'
-      Flutter:
-        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/flutter.png
-        color: '#ffffff'
-      WebPack:
-        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/webpack.png
-        color: '#2e3a41'
-      Git:
-        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/git.png
-        color: '#df5b40'
-      VS:
-        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/vs-logo.svg
-        color: '#ffffff'
+#      HTML:
+#        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/HTML.png
+#        color: '#e9572b'
+#      JS:
+#        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/JS.png
+#        color: '#f7cb4f'
+#      Kotlin:
+#        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/kotlin-logo.svg
+#        color: '#ffffff'
+#      Docker:
+#        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/docker.png
+#        color: '#57b6e6'
+#      Flutter:
+#        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/flutter.png
+#        color: '#ffffff'
+#      WebPack:
+#        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/webpack.png
+#        color: '#2e3a41'
+#      Git:
+#        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/git.png
+#        color: '#df5b40'
+#      VS:
+#        img: https://npm.elemecdn.com/wleelw-blog-abs@1.0.0/img/icon/vs-logo.svg
+#        color: '#ffffff'
 
   # 顶部三大分类
   categoryGroup:
@@ -181,13 +181,13 @@ aside:
     page: false # 在任意页显示
 
   tags:
-    enable: true # 是否显示标签
-    highlight: true # 高亮显示
+    enable: false # 是否显示标签
+    highlight: false # 高亮显示
     list: # 高亮显示标签列表
       - 'Solitude-使用'
 
   archive:
-    enable: true # 是否显示归档
+    enable: false # 是否显示归档
 
   # 建站信息
   siteinfo:
@@ -205,35 +205,35 @@ footer:
   # 底部上方一排图标
   information:
     left: # 左侧显示图标
-    #      Github:
-    #        icon: scoicon sco-bilibili-line
-    #        url: https://github.com/wleelw
-    #      Mail:
-    #        icon: scoicon sco-mail-line
-    #        url: mailto:wleelw@wzsco.top
+#          Github:
+#            icon: scoicon sco-bilibili-line
+#            url: https://github.com/wleelw
+#          Mail:
+#            icon: scoicon sco-mail-line
+#            url: mailto:wleelw@wzsco.top
     right: # 右侧显示图标
-  #      Bilibili:
-  #        icon: scoicon sco-bilibili-line
-  #        url: https://space.bilibili.com/1329819902
-  #      抖音:
-  #        icon: scoicon sco-douyin-fill
-  #        url: https://v.douyin.com/iJsLc8jt/
+#        Bilibili:
+#          icon: scoicon sco-bilibili-line
+#          url: https://space.bilibili.com/1329819902
+#        抖音:
+#          icon: scoicon sco-douyin-fill
+#          url: https://v.douyin.com/iJsLc8jt/
   # 底部导航栏
   group: # 从左至右
-  #    导航:
-  #      归档: /archives/
-  #      分类: /categories/
-  #      标签: /tags/
-  #    服务:
-  #      阿里云: https://aliyun.com/
-  #      51la统计: https://v6.51.la/
-  #      百度统计: https://tongji.baidu.com/
-  #    支持:
-  #      打赏记录: /about/
-  #    协议:
-  #      Cookies: /cookies/
-  #      用户协议: /privacy/
-  #      版权协议: /copyright/
+#      导航:
+#        归档: /archives/
+#        分类: /categories/
+#        标签: /tags/
+#      服务:
+#        阿里云: https://aliyun.com/
+#        51la统计: https://v6.51.la/
+#        百度统计: https://tongji.baidu.com/
+#      支持:
+#        打赏记录: /about/
+#      协议:
+#        Cookies: /cookies/
+#        用户协议: /privacy/
+#        版权协议: /copyright/
 
   # 底部随机友链
   randomlink: false
@@ -278,11 +278,17 @@ post:
     url: /about # 打赏统计页面链接
   # 文章颜色获取
   covercolor: #文章cover取色
-    enable: true
+    enable: false
     local: true
 
 # 关于界面
-about: false
+about:
+  enable: false
+  echarts: # 文章统计
+    enable: false
+    startDate: "2023-04-20 00:00:00" # 统计开始日期 格式：yyyy-MM-dd hh-mm-ss
+    tagLength: 10 # 标签显示数量
+    categoryParent: true # 显示父分类
 
 # 404 页面
 errorpage:
@@ -316,6 +322,8 @@ thirdparty:
     enable: false
     usecomment: false #当评论系统开启时文章页面使用评论系统的统计数据
   search: # 搜索
+    enable: false
+    type: algolia # algolia, local
     algolia_search:
       enable: false
       # hits:
@@ -327,8 +335,8 @@ thirdparty:
 
   aplayer: # 播放器
     enable: false
-    server: tencent # netease, tencent, kugou, xiami, baidu
-    id: 8651639768 # 歌单ID
+    server: netease # netease, tencent, kugou, xiami, baidu
+    id: 8407304077 # 歌单ID
     api: "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r" #自定义api
   #中控台拓展
   consolePlus: false
@@ -345,9 +353,9 @@ thirdparty:
     speed: 20 # 打字机速度，默认20ms
     BlackWhite_List:
       mode: false  # false：全部文章显示摘要AI / black：让指定页面、文章不显示摘要AI / white：只让指定文章（页面）显示摘要AI
-      List: 
-        # - 544ba770
-        # - /article/544ba770.html
+      List:
+      # - 544ba770
+      # - /article/544ba770.html
 
   # 朋友圈配置
   circle:
@@ -358,14 +366,10 @@ thirdparty:
     page_init_number: 12 # 默认加载文章数，默认10
     page_turning_number: 12 # 加载更多文章数，默认10
     angle: # 钓鱼
-      enable: false
+      enable: true
     appjs: '/lib/circle.min.js' # 主题appjs
     bundlejs: '/lib/bundle.min.js' # 主题bundejs
 
-  # 文章统计
-  echarts:
-    js: https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js
-
 # 评论
 comment:
   enable: false
@@ -384,13 +388,12 @@ extends:
 
 # 文章底部推荐文章
 related_post:
-  enable: true
+  enable: false
   limit: 2 # 推荐文章数量
   date_type: created # 根据创建日期（created）或是更新日期（updated）
 
-# rightmenu(右键菜单)
-
-rightmenu:
+# rightside(右键菜单)
+rightside:
   enable: false
 
 # 站点验证
@@ -441,13 +444,11 @@ pwa:
   favicon_640_1136: /img/pwa/siteicon/splash-640x1136.png
   favicon_1136_640: /img/pwa/siteicon/splash-1136x640.png
 
-
 says:
   enable: false
   home_mini: false # 主页的即刻轮播条
   style: 1 # 1：张洪heo样式 / 2：Leonus样式
 
-
 # CSS 前缀
 # 有些 CSS 并不是所有浏览器都支持，需要增加对应的前缀才会生效
 # 开启 css_prefix 后，会自动为一些 CSS 增加前缀。（会增加 20%的体积）
@@ -455,7 +456,6 @@ says:
 
 css_prefix: false
 
-
 # 非必要勿动
 cdn:
   head:
@@ -465,8 +465,9 @@ cdn:
     swipercss: https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.min.css
     twikoojs: https://cdn.bootcdn.net/ajax/libs/twikoo/1.6.20/twikoo.all.min.js
     instantsearch: https://cdn.bootcdn.net/ajax/libs/instantsearch.js/4.9.1/instantsearch.production.min.js
-    algolia: https://cdn.bootcdn.net/ajax/libs/algoliasearch/4.9.3/algoliasearch-lite.umd.min.js
+    algoliajs: https://cdn.bootcdn.net/ajax/libs/algoliasearch/4.9.3/algoliasearch-lite.umd.min.js
     pacejs: https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/pace.min.js
+    echartsjs: https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js
   body:
     viewimagejs: /lib/view-image.min.js
     waterfalljs: /lib/waterfall.min.js
diff --git a/layout/404.ejs b/layout/404.ejs
deleted file mode 100755
index 5c1c4ad2..00000000
--- a/layout/404.ejs
+++ /dev/null
@@ -1,34 +0,0 @@
-<div id="error-wrap">
-    <div class="error-content">
-        <div class="error-img" style="background-image: url('<%= theme.errorpage.img %>')"></div>
-        <div class="error-info">
-            <h1 class="error_title">404</h1>
-            <div class="error_subtitle">
-                <%= theme.errorpage.text %>
-            </div>
-            <a class="button--animated" href="/">
-                <i class="scoicon sco-external-link"></i>
-                回到主页
-            </a>
-        </div>
-    </div>
-</div>
-<% if(theme.errorpage.recommendList){ %>
-    <div class="aside-list">
-        <div class="aside-list-group">
-            <% for (const [index, post] of site.posts.sort('-date').data.entries()){ %>
-                <% if(index >= 5)break; %>
-                <div class="aside-list-item">
-                    <a class="thumbnail" href="<%= url_for(post.path) %>" title="<%= post.title %>">
-                        <img src="<%= post.cover %>" alt="<%= post.title %>">
-                    </a>
-                    <div class="content">
-                        <a class="title" href="<%= url_for(post.path) %>" title="<%= post.title %>">
-                            <%= post.title %>
-                        </a>
-                    </div>
-                </div>        
-            <% } %>
-        </div>
-    </div>
-<% } %>
\ No newline at end of file
diff --git a/layout/404.pug b/layout/404.pug
new file mode 100644
index 00000000..b5d9e070
--- /dev/null
+++ b/layout/404.pug
@@ -0,0 +1,24 @@
+extends includes/layout.pug
+
+block content
+    #error-wrap
+        .error-content
+            .error-img(style='background-image: url(' + url_for(theme.errorpage.img) + ')')
+            .error-info
+                h1.error_title 404
+                .error_subtitle= theme.errorpage.text
+                a.button--animated(href="/")
+                    i.scoicon.sco-external-link
+                    | 回到主页
+
+    if theme.errorpage.recommendList
+        .aside-list
+            .aside-list-group
+                each post, index in site.posts.sort('-date').data
+                    if index >= 5
+                        break
+                    .aside-list-item
+                        a.thumbnail(href=url_for(post.path), title=post.title)
+                            img(src=post.cover, alt=post.title)
+                        .content
+                            a.title(href=url_for(post.path), title=post.title)= post.title
diff --git a/layout/archive.ejs b/layout/archive.ejs
deleted file mode 100755
index 7c38b11a..00000000
--- a/layout/archive.ejs
+++ /dev/null
@@ -1,10 +0,0 @@
-<main class="layout" id="content-inner">
-    <div id="archive">
-        <div class="article-sort-title"><%= __('page.archives') %><sup><%= page.posts.length %></sup></div>
-        <div class="article-sort">
-            <%- partial('partial/compoment/mixins/articleSort') %>
-        </div>
-        <%- partial('partial/compoment/mixins/pagination') %>
-    </div>
-    <%- partial('partial/compoment/aside/aside') %> 
-</main>     
\ No newline at end of file
diff --git a/layout/archive.pug b/layout/archive.pug
new file mode 100644
index 00000000..db37fcb6
--- /dev/null
+++ b/layout/archive.pug
@@ -0,0 +1,11 @@
+extends includes/layout.pug
+
+block content
+    main.layout#content-inner
+        div#archive
+            div.article-sort-title #{__('page.archives')}<sup>#{page.posts.length}</sup>
+            div.article-sort
+                include includes/mixins/articleSort
+            include includes/mixins/pagination
+        include includes/widgets/aside/aside
+
diff --git a/layout/category.ejs b/layout/category.ejs
deleted file mode 100755
index 1d1d0468..00000000
--- a/layout/category.ejs
+++ /dev/null
@@ -1,21 +0,0 @@
-<main class="layout" id="content-inner">
-    <div id="category">
-        <div id="category-bar">
-            <div class="category-bar-items" id="category-bar-items">
-                <%- partial('partial/compoment/home/homeCategoryBar', {select: page.category}) %>
-            </div>
-        </div>
-        <div class="recent-posts" id="recent-posts">
-            <% const currentCategory = page.category; %>
-            <% site.posts.each(post => { %>
-                <% post.categories.each(category => { %>
-                    <% if (category.name === currentCategory) { %>
-                        <%- partial('partial/compoment/home/postList', {post: post}) %>
-                    <% } %>
-                <% }); %>
-            <% }); %>
-        </div>
-        <%- partial('partial/compoment/mixins/pagination') %>
-    </div>
-    <%- partial('partial/compoment/aside/aside') %>
-</main> 
\ No newline at end of file
diff --git a/layout/category.pug b/layout/category.pug
new file mode 100644
index 00000000..aff67e68
--- /dev/null
+++ b/layout/category.pug
@@ -0,0 +1,16 @@
+extends includes/layout.pug
+
+block content
+  main.layout#content-inner
+    div#category
+      div#category-bar
+        div.category-bar-items#category-bar-items
+          include includes/widgets/home/categoryBar
+      div.recent-posts#recent-posts
+        - const currentCategory = page.category
+        each post in site.posts.data
+          each category in post.categories.data
+            if category.name === currentCategory
+              include includes/widgets/home/postList
+      include includes/mixins/pagination
+    include includes/widgets/aside/aside
\ No newline at end of file
diff --git a/layout/includes/console.pug b/layout/includes/console.pug
new file mode 100644
index 00000000..d323b354
--- /dev/null
+++ b/layout/includes/console.pug
@@ -0,0 +1,42 @@
+div#console(style="zoom: 1")
+    div.close-btn(onclick="sco.hideConsole(()", href="javascript:void(0);")
+        i.scoicon.sco-close-fill
+    if theme.thirdparty.consolePlus
+        div.console-card-group
+            div.console-card-group-left
+                div.console-card#card-newest-comments(onclick="sco.hideConsole()")
+                    div.card-content
+                        div.author-content-item-tips= "互动"
+                        div.author-content-item-title= "最新评论"
+                    div.aside-list
+
+            div.console-card-group-right
+                div.console-card.tags(onclick="sco.hideConsole()")
+                    div.card-content
+                        div.author-content-item-tips= "标签"
+                        div.author-content-item-title= "寻找感兴趣的领域"
+                    div.card-tag-cloud
+                        each tag in site.tags.data
+                            a(href=url_for(tag.path), style="font-size: 0.8rem; color: #d3d3d3")= tag.name
+                                sup= tag.length
+
+                div.console-card.history(onclick="sco.hideConsole()")
+                    include ./widgets/aside/asideArchive.pug
+
+    div.button-group
+        div.console-btn-item
+            a.darkmode_switchbutton(onclick="sco.switchDarkMode()", title="昼夜切换", href="javascript:void(0);" rel="nofollow" data-pjax-state)
+                i.scoicon.sco-moon-clear-fill(style="font-size: 1rem;")
+        div.console-btn-item#consoleHideAside
+            a.asideSwitch(onclick="sco.switchHideAside()", title="边栏显示控制", href="javascript:void(0);" rel="nofollow" data-pjax-state)
+                i.scoicon.sco-side-bar-fill(style="font-size: 1rem;")
+        if theme.thirdparty.aplayer.enable
+            div.console-btn-item#consoleMusic(onclick="sco.musicToggle()")
+                a.music-switch(title="音乐开关")
+                    i.scoicon.sco-disc-fill(style="font-size: 1rem;")
+
+        if theme.comment.enable
+            div.console-btn-item.on#consoleCommentBarrage(onclick="sco.switchCommentBarrage()")
+                a.commentBarrage
+                    i.scoicon.sco-chat-fill(style="font-size: 1rem;")
+    div.console-mask(onclick="sco.hideConsole()")
\ No newline at end of file
diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug
new file mode 100644
index 00000000..10ebc154
--- /dev/null
+++ b/layout/includes/footer.pug
@@ -0,0 +1,71 @@
+div#sco-footer-bar
+    div.footer-logo
+        if theme.site.name.class === 'i_class'
+            i.scoicon(class=theme.site.name.custom, style="font-size: 1rem")
+        else if theme.site.name.class === 'img'
+            i.scoicon(style="background-image: url(" + url_for(theme.site.name.custom) + ")")
+        else if theme.site.name.class === 'text'
+            span.scoicon= theme.site.name.custom
+    div.footer-bar-description= "来自" + config.title + " - " + config.subtitle + "的文章"
+    a.footer-bar-link(href="/", data-pjax-state)= "了解更多"
+div#footer_deal
+    - var leftInfo = theme.footer && theme.footer.information && theme.footer.information.left ? theme.footer.information.left : {}
+    - var rightInfo = theme.footer && theme.footer.information && theme.footer.information.right ? theme.footer.information.right : {}
+
+    each value, i in leftInfo
+        a.deal_link(href=url_for(value.url), rel="external nofollow", title=i)
+            i(class=value.icon)
+
+    img.footer_mini_logo(src=theme.site.icon, title="返回顶部", onclick="sco.toTop()")
+
+    each value, i in rightInfo
+        a.deal_link(href=url_for(value.url), rel="external nofollow", title=i)
+            i(class=value.icon)
+div#sco-footer
+    - var group = theme.footer && theme.footer.group ? theme.footer.group : {}
+
+    each value, x in group
+        div.footer-group
+            h3.footer-title= x
+            div.footer-links
+                each url, y in value
+                    a.footer-item(href=url_for(url), title=y, rel="noopener external nofollow noreferrer")= y
+
+    if theme.footer && theme.footer.randomlink
+        div.footer-group
+            div.footer-title-group
+                h3.footer-title 友链
+                a.random-friends-btn(href="javascript:randomLinksList();", rel="external nofollow")
+                    i.scoicon.sco-refresh-line
+            div.footer-links#friend-links-in-footer
+div#footer-bar
+    div.footer-bar-links
+        div.footer-bar-left
+            div#footer-bar-tips
+                if moment(theme.aside.siteinfo.runtime).year() === new Date().getFullYear()
+                    div.copyright © #{moment(theme.aside.siteinfo.runtime).year()} By&nbsp;
+                        a.footer-bar-link(href="/", rel="external nofollow")= config.author
+                else
+                    div.copyright © #{moment(theme.aside.siteinfo.runtime).year()} - #{new Date().getFullYear()} By&nbsp;
+                        a.footer-bar-link(href="/", rel="external nofollow")= config.author
+        div.footer-bar-right
+            if theme.footer && theme.footer.rss && theme.footer.rss.enable
+                a.footer-bar-link(href="/rss/", rel="external nofollow", target="_self") 订阅
+            a.footer-bar-link(href="https://github.com/DuoSco/hexo-theme-solitude", rel="external nofollow", target="_self") 主题
+            if theme.site && theme.site.icp
+                a.footer-bar-link(href="https://beian.miit.gov.cn/#/Integrated/index", target="_blank", rel="noopener external nofollow noreferrer noopener")= theme.site.icp
+            a.footer-bar-link.cc(href=theme.footer.license.url, target="_self", rel="external nofollow")
+                i.scoicon.sco-copyright-line
+                i.scoicon.sco-creative-commons-by-line
+                i.scoicon.sco-creative-commons-nc-line
+                i.scoicon.sco-creative-commons-nd-line
+div.needEndHide#cookies-window
+    div.cookies-window-title 协议提醒助手
+    div.cookies-window-content
+        span.cookies-tip 查看本站为你的个人隐私做出的努力
+        a.cookies-link(href="/privacy/", title="本站如何保护你的隐私", data-pjax-state="")
+            i.scoicon.sco-arrow-right-circle-fill
+if theme.post.award.enable
+    div#quit-box(onclick="RemoveRewardMask()", style="display=none")
+if theme.comment.enable
+    div.comment-barrage
\ No newline at end of file
diff --git a/layout/includes/head.pug b/layout/includes/head.pug
new file mode 100644
index 00000000..50edc565
--- /dev/null
+++ b/layout/includes/head.pug
@@ -0,0 +1,29 @@
+- let title = '', subtitle =''
+- if (is_home()) title = config.title
+- else if (is_archive()) title = '归档 ' + (page.year || "")
+- else if (is_tag()) title = '标签 ' + page.tag
+- else if (is_category()) title = '分类 ' + page.category
+- else if (page.type === '404') title = '404' + theme.errorpage.text
+- else if (is_post() || is_page()) title = page.title
+
+- if (is_home()) subtitle = config.subtitle ? ' - ' + config.subtitle : ''
+- else subtitle = title ? ' | ' + config.title : config.title
+- var description = page.desc || page.excerpt || config.description
+
+meta(charset="utf-8")
+meta(http-equiv="X-UA-Compatible", content="IE=edge")
+meta(name="viewport" content="width=device-width, initial-scale=1")
+
+title= title + subtitle
+noscript 开启JavaScript才能访问本站哦
+link(rel="icon", href=theme.site.siteIcon)
+meta(name="description", content=description)
+
+// index.css
+link(rel="stylesheet", href="/css/index.css")
+
+// inject head
+include ./inject/head.pug
+
+// global head
+include ./head/config.pug
\ No newline at end of file
diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
new file mode 100644
index 00000000..ddf59429
--- /dev/null
+++ b/layout/includes/head/config.pug
@@ -0,0 +1,82 @@
+// pwa
+if theme.pwa.enable
+    include ./pwa.pug
+
+-
+    if (theme.thirdparty.search.enable) {
+        var localSearch = 'undefined';
+        if (theme.thirdparty.search.local_search.enable)
+            localSearch = JSON.stringify({
+                preload: theme.thirdparty.search.local_search.preload,
+                path: theme.thirdparty.search.local_search.path || '/search.xml'
+            })
+        var algolia = 'undefined';
+        if (theme.thirdparty.search.algolia_search.enable)
+            algolia = JSON.stringify({
+                appId: config.algolia.appId || config.algolia.applicationID,
+                apiKey: config.algolia.apiKey,
+                indexName: config.algolia.indexName
+            })
+    }
+
+script.
+    const GLOBAL_CONFIG = {
+        root: '!{config.root}',
+        algolia: !{algolia},
+        localsearch: !{localSearch},
+        runtime: '!{theme.aside.siteinfo.runtimeenable ? theme.aside.siteinfo.runtime : false}',
+        lazyload: {
+            enable: !{theme.lazyload.enable},
+            error: '!{theme.lazyload.errorimg}'
+        },
+        hightlight: {
+            enable: !{theme.hightlight.enable},
+            limit: '!{theme.hightlight.hightlimit}'
+        },
+        lightbox: !{theme.lightbox},
+        randomlinks: !{theme.footer.randomlink},
+        lang: {
+            theme: {
+                dark: '!{_p('theme.dark')}',
+                light: '!{_p('theme.light')}',
+            },
+            copy: {
+                success: '!{_p('copy.success')}',
+                error: '!{_p('copy.error')}',
+            },
+            backtop: '!{_p('nav.backtop')}',
+            time: {
+                recent: '!{_p('time.recent')}',
+                yesterday: '!{_p('time.yesterday')}',
+                berforeyesterday: '!{_p('time.berforeyesterday')}',
+                daybefore: '!{_p('time.daybefore')}',
+                runtime: '!{_p('time.runtime')}',
+            },
+            sayhello: {
+                morning: '!{_p('sayhello.morning')}',
+                noon: '!{_p('sayhello.noon')}',
+                afternoon: '!{_p('sayhello.afternoon')}',
+                night: '!{_p('sayhello.night')}',
+                goodnight: '!{_p('sayhello.goodnight')}',
+            },
+            search: {
+                empty: '!{_p('search.empty')}',
+                hit: '!{_p('search.hit')}',
+                placeholder: '!{_p('search.placeholder')}',
+            }
+        },
+        covercolor: !{theme.post.covercolor.enable},
+        comment: {
+            enable: !{theme.comment.enable},
+            twikooUrl: '!{theme.comment.twikoo.envId}',
+            type: '!{theme.comment.type}',
+            twikoo: {
+                url: '!{theme.comment.twikoo.envId}',
+                accessToken: '!{theme.comment.twikoo.accessToken}'
+            },
+            twikooAccessToken: '!{theme.comment.twikoo.accessToken}'
+        },
+        rightside: {
+            enable: !{theme.rightside.enable}
+        }
+    }
\ No newline at end of file
diff --git a/layout/includes/head/pwa.pug b/layout/includes/head/pwa.pug
new file mode 100644
index 00000000..c19e1d30
--- /dev/null
+++ b/layout/includes/head/pwa.pug
@@ -0,0 +1,59 @@
+if theme.pwa.enable
+    meta(name="theme-color", content=theme.pwa.theme_color)
+    link(rel="manifest", href=theme.pwa.manifest)
+    if theme.pwa.theme_color
+        meta(name="msapplication-TileColor", content=theme.pwa.theme_color)
+    if theme.pwa.mask_icon
+        link(rel="mask-icon", href=theme.pwa.mask_icon, color=theme.pwa.theme_color)
+    if theme.pwa.apple_touch_icon
+        link(rel="apple-touch-icon", sizes="180x180", href=theme.pwa.apple_touch_icon)
+        link(rel="apple-touch-icon-precomposed", sizes="180x180", href=theme.pwa.apple_touch_icon)
+        meta(name="apple-mobile-web-app-title", content=config.title)
+    if theme.pwa.favicon_16_16
+        link(rel="icon", type="image/png", sizes="16x16", href=theme.pwa.favicon_16_16)
+    if theme.pwa.favicon_32_32
+        link(rel="icon", type="image/png", sizes="32x32", href=theme.pwa.favicon_32_32)
+    if theme.pwa.bookmark_icon
+        link(rel="bookmark", href=theme.pwa.bookmark_icon)
+    if theme.pwa.startup_image_enable
+        -
+            var medias = {
+                "2048_2732": "(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
+                "2732_2048": "(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)",
+                "1668_2388": "(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
+                "2388_1668": "(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)",
+                "1536_2048": "(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
+                "2048_1536": "(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)",
+                "1668_2224": "(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
+                "2224_1668": "(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)",
+                "1620_2160": "(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
+                "2160_1620": "(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)",
+                "1290_2796": "(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)",
+                "2796_1290": "(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)",
+                "1179_2556": "(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)",
+                "2556_1179": "(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)",
+                "1248_2778": "(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)",
+                "2778_1248": "(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)",
+                "1170_2532": "(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)",
+                "2532_1170": "(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)",
+                "1125_2436": "(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)",
+                "2436_1125": "(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)",
+                "1242_2688": "(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)",
+                "2688_1242": "(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)",
+                "828_1792": "(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
+                "1792_828": "(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)",
+                "1242_2208": "(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)",
+                "2208_1242": "(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)",
+                "750_1334": "(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
+                "1334_750": "(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)",
+                "640_1136": "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
+                "1136_640": "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)",
+            }
+        each size, media in medias
+            if (theme.pwa["favicon_" + size])
+                link(rel="apple-touch-startup-image", href=theme.pwa["favicon_" + size], media=media)
+
+else
+    meta(name="apple-mobile-web-app-capable", content=config.title)
+    link(rel="bookmark", href=theme.site.siteIcon)
+    link(rel="apple-touch-icon", href=theme.site.siteIcon, sizes="180x180")
\ No newline at end of file
diff --git a/layout/includes/header.pug b/layout/includes/header.pug
new file mode 100644
index 00000000..621313a8
--- /dev/null
+++ b/layout/includes/header.pug
@@ -0,0 +1,4 @@
+header(class=is_post() ? 'post-bg' : 'not-top-img', id="page-header")
+    include ./nav.pug
+    if is_post()
+        include ./widgets/post/postMeta.pug
\ No newline at end of file
diff --git a/layout/includes/inject/body.pug b/layout/includes/inject/body.pug
new file mode 100644
index 00000000..96301d35
--- /dev/null
+++ b/layout/includes/inject/body.pug
@@ -0,0 +1,67 @@
+- cdn = theme.cdn.body
+
+script(src=url_for(cdn.pjaxjs))
+if theme.lazyload.enable
+    script(src=url_for(cdn.lazyloadjs))
+script(src=url_for(cdn.snackbarjs))
+if theme.lightbox
+    script(src=url_for(cdn.viewimagejs))
+if theme.says.home_mini || theme.aside.history.enable
+    script(src=url_for(cdn.swiperjs))
+
+if theme.rightside.enable
+    include ../widgets/rightside/index.pug
+    script(src='/js/rightside.js')
+
+if theme.comment.enable
+    script(src='/js/extend/console/comment.js')
+
+    if theme.comment.type === 'twikoo'
+        script(src='/js/commentBarrage.js')
+
+div#js-pjax
+    if page.type === 'says'
+        script(src=url_for(cdn.waterfalljs))
+        script.
+            window.addEventListener('resize', utils.throttle(function () {
+                if (document.getElementById('waterfall')) {
+                    sco.reflashEssayWaterFall();
+                }
+            }), 500);
+    if theme.thirdparty.busuanzi && (theme.aside.siteinfo.uv || theme.aside.siteinfo.pv || theme.thirdparty.busuanzi.usecomment === false)
+        script(async src=url_for(cdn.busuanzijs))
+
+    script#config-diff.
+        var PAGE_CONFIG = {
+            is_post: !{is_post()},
+            is_page: !{is_page()},
+            is_home: !{is_home()},
+            page: '!{page.type || 'default'}',
+            toc: !{!!page.toc},
+            comment: !{!!page.comment},
+        }
+if theme.thirdparty.aplayer.enable
+    script(src=url_for(cdn.aplayerjs))
+    script(src=url_for(cdn.metingjs))
+    script.
+        const meting_api = '!{theme.thirdparty.aplayer.api}';
+
+if theme.post.covercolor
+    script(src='/js/extend/covercolor/local.js')
+
+include ../widgets/randomlink.pug
+
+if page.katex
+    link(rel="stylesheet", href=url_for(cdn.katexcss))
+    script(src=url_for(cdn.katexjs))
+
+if theme.aside.welcome.enable
+    script(src='/js/txmap.js')
+
+// pjax
+include ../widgets/third-party/pjax.pug
+
+// inject custom body
+if theme.extends.body
+    each item in theme.extends.body
+        item
\ No newline at end of file
diff --git a/layout/partial/compoment/inject/head.ejs b/layout/includes/inject/head.pug
old mode 100755
new mode 100644
similarity index 58%
rename from layout/partial/compoment/inject/head.ejs
rename to layout/includes/inject/head.pug
index 1b31b92b..c77c48de
--- a/layout/partial/compoment/inject/head.ejs
+++ b/layout/includes/inject/head.pug
@@ -1,27 +1,51 @@
-<% const cdn = theme.cdn.head %>
-<% if(theme.verify.baidu){%>
-    <meta name="baidu-site-verification" content="<%- theme.verify.baidu %>" />
-<%} %>
-<% if(theme.loading.pace){ %>
-    <script data-pace-options="{ &quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}" src="<%= cdn.pacejs %>"></script>
-<% } %>
-<%- css(cdn.scoicon) %>
-<%- css(cdn.snackbarcss) %>
-<% if(theme.comment.enable){ %>
-    <%- js(cdn.twikoojs) %>
-<% } %>
-<% if(theme.thirdparty.search.algolia_search.enable){ %>
-    <%- js(cdn.instantsearch) %>
-    <%- js(cdn.algolia) %>
-<% } %>
-<% if(theme.thirdparty.aplayer.enable){%>
-    <%- css(cdn.aplayercss) %>
-<%} %>
-<% if(theme.says.home_mini || theme.aside.history.enable){ %>
-    <%- css(cdn.swipercss) %>
-<% } %>
-<script>
-    (win=> {
+- var cdn = theme.cdn.head
+
+if theme.verify.baidu
+    meta(name="baidu-site-verification", content=theme.verify.baidu)
+
+if theme.verify.google
+    meta(name="google-site-verification", content=theme.verify.google)
+
+if theme.loading.pace
+    script(src=cdn.pace, data-pace-options='{ &quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}')
+
+link(rel="stylesheet", href=cdn.scoicon)
+link(rel="stylesheet", href=cdn.snackbarcss)
+
+// comment
+if theme.comment.enable
+    if theme.comment.type === 'twikoo'
+        script(src=cdn.twikoojs)
+
+// search
+if theme.thirdparty.search.enable
+    if theme.thirdparty.search.type === 'algolia'
+        script(src=url_for(cdn.instantsearch))
+        script(src=url_for(cdn.algoliajs))
+
+// aplayer
+if theme.thirdparty.aplayer.enable
+    link(rel="stylesheet", href=cdn.aplayercss)
+
+// swiper
+if theme.says.home_mini || theme.aside.history.enable
+    link(rel="stylesheet", href=cdn.swipercss)
+
+// custom inject
+if theme.extends.head
+    each item in theme.extends.head
+        item
+
+// post-ai
+if theme.thirdparty.ai.enable
+    script(src='/lib/chuckle-post-ai.js')
+
+// echarts
+if theme.about.echarts.enable && theme.about.enable
+    script(src=url_for(cdn.echartsjs))
+
+script.
+    (win => {
             win.saveToLocal = {
                 set: function setWithExpiry(key, value, ttl) {
                     if (ttl === 0)
@@ -53,10 +77,10 @@
             }
 
             const DarkModeStatus = localStorage.getItem('theme')
-            if(DarkModeStatus !== null){
-                if(DarkModeStatus === 'dark'){
+            if (DarkModeStatus !== null) {
+                if (DarkModeStatus === 'dark') {
                     document.documentElement.setAttribute('data-theme', 'dark')
-                }else{
+                } else {
                     document.documentElement.setAttribute('data-theme', 'light')
                 }
             }
@@ -73,7 +97,7 @@
     )(window)
 
     console.log("%c🔥 程序：Hexo | 主题：Hexo-Theme-Solitude | 作者：DuoSco团队 | 官网：https://github.com/DuoSco/Hexo-theme-solitude 😋", "color:#fff; background: linear-gradient(270deg, #18d7d3, #68b7dd, #8695e6, #986fee); padding: 8px 15px; border-radius: 8px");
-</script>
-<% if(theme.thirdparty.ai.enable){ %>
-    <%- js('/lib/chuckle-post-ai') %>
-<% } %>
\ No newline at end of file
+
+div
+    script(src="/js/utils.js")
+    script(src="/js/main.js")
\ No newline at end of file
diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug
new file mode 100644
index 00000000..523122bf
--- /dev/null
+++ b/layout/includes/layout.pug
@@ -0,0 +1,35 @@
+doctype html
+html(lang=config.language, data-theme="light")
+    head
+        include ./head.pug
+    body(id="body")
+        // loading
+        if theme.loading.fullpage
+            include ./loading.pug
+
+        // console
+        include ./console.pug
+
+        // sidebar
+        include ./sidebar.pug
+
+        if(page.type !== '404')
+            div(class = is_post() ? 'post' : 'page', id="body-wrap")
+                include ./header.pug
+
+                block content
+
+                footer#footer
+                    include ./footer.pug
+        else
+            div.error#body-wrap
+                block content
+
+        // inject body
+        include ./inject/body.pug
+
+        // search
+        include ./widgets/third-party/search/index.pug
+
+        // music
+        include ./widgets/third-party/music.pug
\ No newline at end of file
diff --git a/layout/partial/loading.ejs b/layout/includes/loading.pug
old mode 100755
new mode 100644
similarity index 74%
rename from layout/partial/loading.ejs
rename to layout/includes/loading.pug
index 15ec6d22..da017c64
--- a/layout/partial/loading.ejs
+++ b/layout/includes/loading.pug
@@ -1,26 +1,29 @@
-<div id="loading-box" onclick="preloader.endLoading();" class style="zoom: 1;">
-    <div class="loading-bg">
-        <img class="loading-img nolazyload" alt="loading image"
-            src="<%= theme.site.icon %>">
-        </div>
-</div>
-<script>
+div(id="loading-box" onclick="preloader.endLoading();" style="zoom:1")
+    div.loading-bg
+        img.loading-img(src=url_for(theme.site.icon), alt="loading image")
+
+script.
     const preloader = {
         endLoading: () => {
-            document.getElementById('loading-box').classList.add("loaded")
+            document.getElementById('loading-box').classList.add('loaded');
         },
         initLoading: () => {
-            document.getElementById('loading-box').classList.remove("loaded")
+            document.getElementById('loading-box').classList.remove('loaded');
         },
         removePaceDone: () => {
-            document.getElementById('body').classList = 'pace-done'
+            document.getElementById('body').classList = 'pace-done';
         }
     }
-    window.addEventListener('load',()=> { preloader.endLoading() })
-    document.addEventListener('pjax:send', () => { preloader.initLoading() })
-    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
-</script>
-<style>
+    window.addEventListener('load', () => {
+        preloader.endLoading();
+    });
+    window.addEventListener('pjax:send', () => {
+        preloader.initLoading();
+    });
+    document.addEventListener('pjax:complete', () => {
+        preloader.endLoading();
+    });
+style.
     #loading-box {
         -webkit-user-select: none;
     }
@@ -82,5 +85,4 @@
         to {
             opacity: 1;
         }
-    }
-</style>
\ No newline at end of file
+    }
\ No newline at end of file
diff --git a/layout/includes/mixins/articleSort.pug b/layout/includes/mixins/articleSort.pug
new file mode 100644
index 00000000..da86a9df
--- /dev/null
+++ b/layout/includes/mixins/articleSort.pug
@@ -0,0 +1,14 @@
+- let year
+each post in page.posts.data
+    - if(year !== moment(post.date).year())
+    - year = moment(post.date).year()
+    div.article-sort-item.year #{year}
+    div.article-sort-item
+        a.article-sort-item-img(href=url_for(post.path) title=post.title)
+            img(src=post.cover alt=post.title)
+        div.article-sort-item-info
+            a.article-sort-item-title(href=url_for(post.path) title=post.title onclick="window.event.cancelBubble=true;") #{post.title}
+            div.article-sort-item-tags
+                each tags in post.tags.data
+                    a.article-meta__tags(href=url_for(tags.path) onclick="window.event.cancelBubble=true;")
+                        span.tags-punctuation #{tags.name}
\ No newline at end of file
diff --git a/layout/includes/mixins/pagination.pug b/layout/includes/mixins/pagination.pug
new file mode 100644
index 00000000..50448052
--- /dev/null
+++ b/layout/includes/mixins/pagination.pug
@@ -0,0 +1,8 @@
+nav#pagination
+    div.pagination
+        - var options = {mid_size: 1,escape: false,next_text: '<div class="pagination_tips_next">下页</div> <i class="scoicon sco-arrow-right-bold"></i>',prev_text: '<i class="scoicon sco-arrow-left-bold"></i> <div class="pagination_tips_prev">上页</div>'}
+        !=paginator(options)
+        div.toPageGroup
+            input#toPageText(oninput="value=value.replace(/[^0-9]/g,'')", maxlength="3", title="跳转到指定页面", onkeyup="if (this.value === '0') this.value = ''")
+            a#toPageButton(onclick="sco.toPage()", data-pjax-state="")
+                i.scoicon.sco-show-right-line
\ No newline at end of file
diff --git a/layout/includes/nav.pug b/layout/includes/nav.pug
new file mode 100644
index 00000000..1992306b
--- /dev/null
+++ b/layout/includes/nav.pug
@@ -0,0 +1,22 @@
+nav#nav.show
+    div#nav-group
+        div#blog_name
+            if theme.nav.left.enable
+                div.back-home-button(tabindex="-1")
+                    i.back-home-button-icon.scoicon.sco-more-fill
+                    include ./widgets/nav/left.pug
+            a#site-name(href="/", title="返回博客主页", traget="_self")
+                if theme.site.name.class === 'i_class'
+                    i.scoicon(class=theme.site.name.custom, style="font-size: 16px;")
+                else if theme.site.name.class === 'img'
+                    img(src=theme.site.name.custom, alt=config.title)
+                else if theme.site.name.class === 'text'
+                    span.scoicon= theme.site.name.custom
+        div#page-name-mask
+            div#page-name
+                a#page-name-text(onclick="sco.toTop()")= page.title || config.title
+        div#menus
+            include ./widgets/nav/menu.pug
+        div#nav-left
+        div#nav-right
+            include ./widgets/nav/right.pug
\ No newline at end of file
diff --git a/layout/includes/page/about.pug b/layout/includes/page/about.pug
new file mode 100644
index 00000000..5280f16a
--- /dev/null
+++ b/layout/includes/page/about.pug
@@ -0,0 +1,10 @@
+if theme.about.enable
+    #about-page
+        include ../widgets/page/about/authorinfo
+        include ../widgets/page/about/contentinfo
+        include ../widgets/page/about/skillsinfo
+        include ../widgets/page/about/personalities
+        include ../widgets/page/about/motto
+        include ../widgets/page/about/hobbies
+        include ../widgets/page/about/other
+        include ../widgets/page/about/award
\ No newline at end of file
diff --git a/layout/includes/page/categories.pug b/layout/includes/page/categories.pug
new file mode 100644
index 00000000..62002f0d
--- /dev/null
+++ b/layout/includes/page/categories.pug
@@ -0,0 +1,8 @@
+h1.page-title(style='display: inline')= _p('page.category')
+div.category-lists
+    div.tag-cloud-list.is-center
+        each item in site.categories.data
+            a(href=url_for(item.path))
+                span.tags-punctuation
+                = item.name
+                span.tagsPageCount= item.length
\ No newline at end of file
diff --git a/layout/includes/page/default.pug b/layout/includes/page/default.pug
new file mode 100644
index 00000000..1f6cd155
--- /dev/null
+++ b/layout/includes/page/default.pug
@@ -0,0 +1,2 @@
+div#article-container
+    != page.content
\ No newline at end of file
diff --git a/layout/includes/page/echarts.pug b/layout/includes/page/echarts.pug
new file mode 100644
index 00000000..d492619d
--- /dev/null
+++ b/layout/includes/page/echarts.pug
@@ -0,0 +1,7 @@
+- var startDate = theme.about.echarts.startDate
+- var tagLength = theme.about.echarts.tagLength
+- var categoryParent = ""+theme.about.echarts.categoryParent
+
+div#posts-chart(data-start=startDate, style="border-radius: 8px; height: 300px; padding: 10px;")
+div#tags-chart(data-length=tagLength, style="border-radius: 8px; height: 300px; padding: 10px;")
+div#categories-chart(data-parent=categoryParent, style="border-radius: 8px; height: 300px; padding: 10px;")
\ No newline at end of file
diff --git a/layout/includes/page/equipment.pug b/layout/includes/page/equipment.pug
new file mode 100644
index 00000000..a3a9f8bf
--- /dev/null
+++ b/layout/includes/page/equipment.pug
@@ -0,0 +1,3 @@
+- var pageClass = "equipment"
+include ../widgets/page/banner
+include ../widgets/page/equipment/content
\ No newline at end of file
diff --git a/layout/includes/page/links.pug b/layout/includes/page/links.pug
new file mode 100644
index 00000000..7fa36445
--- /dev/null
+++ b/layout/includes/page/links.pug
@@ -0,0 +1,35 @@
+div.flink#banners
+    include ../widgets/page/links/banner
+if theme.thirdparty.circle.angle.enable
+    include ../widgets/page/moments/angle
+div.flink#article-container
+    each data in site.data.links.links
+        h2= data.class_name
+        div.flink-desc= data.descr
+        case data.type
+            when 'card'
+                include ../widgets/page/links/linksCard
+            when 'item'
+                include ../widgets/page/links/linksItem
+h3(align='end') ——本站友链排序不分先后，所有站点都值得一看。
+if theme.comment.enable
+    h2(id="友情链接申请")= "友情链接申请"
+    div#article-container!= page.content
+    p 请<b>勾选</b>你符合的条件：
+    div#friendlink_checkboxs
+        p
+            label
+                input(type='checkbox', id='checkbox1', onclick='checkForm()')
+                | 我已添加 <b>#{config.title}</b> 博客的友情链接
+        p
+            label
+                input(type='checkbox', id='checkbox2', onclick='checkForm()')
+                | 我的链接主体为 <b>个人</b>，网站类型为<b>博客</b>
+        p
+            label
+                input(type='checkbox', id='checkbox3', onclick='checkForm()')
+                | 我的网站现在可以在中国大陆区域正常访问
+        p
+            label
+                input(type='checkbox', id='checkbox4', onclick='checkForm()')
+                | 网站内容符合中国大陆法律法规
diff --git a/layout/includes/page/moments.pug b/layout/includes/page/moments.pug
new file mode 100644
index 00000000..1a0f2ac0
--- /dev/null
+++ b/layout/includes/page/moments.pug
@@ -0,0 +1,5 @@
+- var pageClass = "momentsPage"
+include ../widgets/page/banner
+if theme.thirdparty.circle.angle.enable
+    include ../widgets/page/moments/angle
+include ../widgets/page/moments/index
\ No newline at end of file
diff --git a/layout/includes/page/not_configured.pug b/layout/includes/page/not_configured.pug
new file mode 100644
index 00000000..e69de29b
diff --git a/layout/includes/page/rss.pug b/layout/includes/page/rss.pug
new file mode 100644
index 00000000..a01e2484
--- /dev/null
+++ b/layout/includes/page/rss.pug
@@ -0,0 +1,22 @@
+main.layout.hide-aside#content-inner
+    #page
+        .rss-plan-list
+            a.rss-plan-item.rss-plan-wechat(href=theme.footer.rss.wechatOA, title="公众号", target="_blank")
+                .rss-plan-description 推送精选文章<br>推送全文
+                .rss-plan-info-group
+                    .rss-plan-title 公众号订阅
+                    .rss-plan-info 推荐的订阅方式
+                    img.rss-plan-icon(src="https://bu.dusays.com/2023/11/01/6541d14a4de78.png", alt="wechat")
+            a.rss-plan-item.rss-plan-mail(href=theme.footer.rss.emailOA, rel="external nofollow", title="email", target="_blank")
+                .rss-plan-description 推送全部文章<br>推送封面与简介
+                .rss-plan-info-group
+                    .rss-plan-title 邮件订阅
+                    .rss-plan-info 推荐的订阅方式
+                    img.rss-plan-icon(src="https://bu.dusays.com/2023/11/01/6541d16c3ea22.png", alt="email")
+            a.rss-plan-item.rss-plan-rss(href=theme.footer.rss.rssOA, title="rss", target="_blank")
+                .rss-plan-description 推送全部文章<br>推送简介
+                .rss-plan-info-group
+                    .rss-plan-title RSS
+                    .rss-plan-info 备用订阅方式
+                    img.rss-plan-icon(src="https://bu.dusays.com/2023/11/01/6541d184e2a09.png", alt="rss")
+        != page.content
\ No newline at end of file
diff --git a/layout/includes/page/says.pug b/layout/includes/page/says.pug
new file mode 100644
index 00000000..d480403d
--- /dev/null
+++ b/layout/includes/page/says.pug
@@ -0,0 +1,22 @@
+if theme.says.enable === false
+    include not_configured
+else
+    - var pageClass = "essayPage"
+    include ../widgets/page/banner
+    #bber
+        section.timeline.page-1
+            ul.list#waterfall
+                - var limitedList = site.data.essay.essay_list.slice(0, 30)
+                each item in limitedList
+                    li.item
+                        if theme.says.style === 2
+                            include ../widgets/page/says/saysMeta
+                        include ../widgets/page/says/saysContent
+                        include ../widgets/page/says/saysFunction
+                        if theme.says.style === 1
+                            hr
+                            include ../widgets/page/says/saysBottom
+    #bber-tips(style="color: var(--sco-secondtext);") - 只展示最近30条短文 -
+
+script.
+    sco.reflashEssayWaterFall()
\ No newline at end of file
diff --git a/layout/includes/page/tags.pug b/layout/includes/page/tags.pug
new file mode 100644
index 00000000..f3a5ef03
--- /dev/null
+++ b/layout/includes/page/tags.pug
@@ -0,0 +1,8 @@
+h1.page-title(style='display: inline-block')= __('page.tag')
+div.category-lists
+    div.tag-cloud-list.is-center
+        each tag in site.tags.data
+            a(href=url_for(tag.path))
+                span.tags-punctuation
+                = tag.name
+                span.tagsPageCount= tag.length
\ No newline at end of file
diff --git a/layout/includes/page/tlink.pug b/layout/includes/page/tlink.pug
new file mode 100644
index 00000000..b068879e
--- /dev/null
+++ b/layout/includes/page/tlink.pug
@@ -0,0 +1,9 @@
+- var pageClass = "essayPage"
+include ../widgets/page/banner
+.flink#article-container
+    each data in site.data.tlink.links
+        h2= data.class_name
+        .flink-desc= data.descr
+        include ../widgets/page/links/linksItem
+
+    != page.content
\ No newline at end of file
diff --git a/layout/includes/recent-posts.pug b/layout/includes/recent-posts.pug
new file mode 100644
index 00000000..908ab713
--- /dev/null
+++ b/layout/includes/recent-posts.pug
@@ -0,0 +1,9 @@
+
+if page.posts.length > 0
+  #recent-posts
+    h1 Recent Posts
+    each post in page.posts.sort('date', -1).limit(10).toArray()
+      .recent-post-item
+        a(href=url_for(post.path))= post.title
+        if post.date
+          time(datetime=post.date.toJSON())= date(post.date, date_format)
diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug
new file mode 100644
index 00000000..fffa6e8c
--- /dev/null
+++ b/layout/includes/sidebar.pug
@@ -0,0 +1,20 @@
+div#sidebar(style="zoom: 1;")
+    div#menu-mask(style="display: none;")
+    div#sidebar-menus
+        span.sidebar-menu-item-title= "功能"
+        div.sidebar-menu-item
+            a.darkmode_switchbutton.menu-child(onclick="sco.switchDarkMode()", title="显示模式切换", href="javascript:void(0);" rel="nofollow" data-pjax-state)
+                i.scoicon.sco-moon-clear-fill(style="font-size: 1rem;")
+                span= "显示模式"
+        if theme.nav.left.enable
+            include ./widgets/nav/left.pug
+        include ./widgets/nav/menu.pug
+        span.sidebar-menu-item-title= "标签"
+        div.card-widget.card-tags.card-archives.card-webinfo.card-allinfo
+            div.item-headline
+                i.scoicon.sco-price-tag-fill
+                span= "标签"
+            div.card-tag-cloud
+                each tag in site.tags.data
+                    a(href=url_for(tag.path), style="font-size: 1rem; color: #d3d3d3")= tag.name
+                        sup= tag.length
\ No newline at end of file
diff --git a/layout/includes/widgets/aside/aside.pug b/layout/includes/widgets/aside/aside.pug
new file mode 100644
index 00000000..02d8d70f
--- /dev/null
+++ b/layout/includes/widgets/aside/aside.pug
@@ -0,0 +1,18 @@
+.aside-content#aside-content
+    - var noSticky, Sticky;
+    - if(is_home())
+    -     noSticky = theme.aside.home.noSticky.split(',')
+    -     Sticky = theme.aside.home.Sticky.split(',')
+    - if(is_post())
+    -     noSticky = theme.aside.post.noSticky.split(',')
+    -     Sticky = theme.aside.post.Sticky.split(',')
+    - if(is_page() || is_archive() || is_tag() || is_category())
+    -     noSticky = theme.aside.page.noSticky.split(',')
+    -     Sticky = theme.aside.page.Sticky.split(',')
+    each item in noSticky
+        include ./asideSwitch.pug
+    .sticky_layout
+        if page.toc
+            include ./asideToc.pug
+        each item in Sticky
+            include ./asideSwitch.pug
diff --git a/layout/includes/widgets/aside/asideAllInfo.pug b/layout/includes/widgets/aside/asideAllInfo.pug
new file mode 100644
index 00000000..3772a5a4
--- /dev/null
+++ b/layout/includes/widgets/aside/asideAllInfo.pug
@@ -0,0 +1,8 @@
+.card-widget.card-tags.card-archives.card-webinfo.card-allinfo
+    if theme.aside.tags.enable
+        include ./asideTag
+        hr
+    if theme.aside.archive.enable
+        include ./asideArchive
+        hr
+    include ./asideWebInfo
diff --git a/layout/includes/widgets/aside/asideArchive.pug b/layout/includes/widgets/aside/asideArchive.pug
new file mode 100644
index 00000000..05e9b91f
--- /dev/null
+++ b/layout/includes/widgets/aside/asideArchive.pug
@@ -0,0 +1,9 @@
+ul.card-archive-list
+    - var type = locals.type ? locals.type : 'year'
+    each value, key in getArchiveLength(type)
+        li.card-archive-list-item
+            a.card-archive-list-link(onclick=`pjax.loadUrl('/archives/${key}/')`, data-pjax-state="", href="javascript:void(0);")
+                span.card-archive-list-date= key
+                .card-archive-list-count-group
+                    span.card-archive-list-count= value
+                    span.card-archive-list-count-unit 篇
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideFlipCard.ejs b/layout/includes/widgets/aside/asideFlipCard.pug
old mode 100755
new mode 100644
similarity index 75%
rename from layout/partial/compoment/aside/asideFlipCard.ejs
rename to layout/includes/widgets/aside/asideFlipCard.pug
index 5dfa8407..36615488
--- a/layout/partial/compoment/aside/asideFlipCard.ejs
+++ b/layout/includes/widgets/aside/asideFlipCard.pug
@@ -1,4 +1,4 @@
-<style>
+style.
     #aside-content .card-widget.card-platform {
         background: var(--sco-main);
         display: flex;
@@ -17,7 +17,7 @@
         height: 100%;
         left: 0;
         top: 0;
-        background: url("<%- theme.aside.flip.favicon || 'https://img.meuicat.com/blog/14.webp' %>") center center no-repeat;
+        background: url("#{theme.aside.flip.favicon || 'https://img.meuicat.com/blog/14.webp'}") center center no-repeat;
         content: '';
         background-size: cover;
         transition: .2s cubic-bezier(.45,.04,.43,1.21)
@@ -49,7 +49,7 @@
         height: 100%;
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
-        background: url("<%- theme.aside.flip.face || 'https://img.meuicat.com/blog/15.webp' %>") center center no-repeat;
+        background: url("#{theme.aside.flip.face || 'https://img.meuicat.com/blog/15.webp'}") center center no-repeat;
         background-size: 100%
     }
     #aside-content .card-platform #flip-wrapper #flip-content .face.back {
@@ -57,18 +57,15 @@
         -webkit-transform: rotateY(180deg);
         transform: rotateY(180deg);
         box-sizing: border-box;
-        background: url("<%- theme.aside.flip.backface || 'https://img.meuicat.com/blog/16.webp' %>") center center no-repeat;
+        background: url("#{theme.aside.flip.backface || 'https://img.meuicat.com/blog/16.webp'}") center center no-repeat;
         background-size: 100%
     }
     [data-theme='dark'] #aside-content .card-widget.card-platform {
         background: var(--sco-card-bg)
     }
-</style>
-<div class="card-widget card-platform">
-    <div id="flip-wrapper">
-        <div id="flip-content">
-            <div class="face"></div>
-            <div class="back face"></div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+
+.card-widget.card-platform
+    #flip-wrapper
+        #flip-content
+            .face
+            .back.face
diff --git a/layout/includes/widgets/aside/asideHistory.pug b/layout/includes/widgets/aside/asideHistory.pug
new file mode 100644
index 00000000..2c4094c7
--- /dev/null
+++ b/layout/includes/widgets/aside/asideHistory.pug
@@ -0,0 +1,44 @@
+if theme.aside.history.enable
+    style.
+        .swiper-wrapper {
+            flex-direction: column;
+        }
+        .history_slide {
+            text-align: left;
+            display: flex !important;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        #history-baidu > .blog-slider__pagination {
+            display: none;
+        }
+        .history_slide_time {
+            color: var(--sco-secondtext);
+            font-size: 14px;
+            font-style: italic;
+            font-weight: lighter;
+        }
+        .history_slide_link {
+            line-height: 1.5;
+            -webkit-line-clamp: 2;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+        }
+        .history_slide_link a {
+            color: var(--sco-main);
+            padding: 0 4px;
+            border-radius: 4px;
+        }
+        .history_slide_link a:hover {
+            color: var(--sco-white);
+            background: var(--sco-main);
+        }
+
+    .card-widget.card-history
+        .item-headline
+            i(class=theme.aside.history.icon || 'scoicon sco-clock-fill')
+            span= theme.aside.history.title || '那年今日'
+        #history-baidu(style="height: 100px;overflow: hidden")
+            #history-container.history_swiper-container(style="width: 100%;height: 100%;margin-top: 6px")
+                #history_container_wrapper.swiper-wrapper(style="height:20px")
diff --git a/layout/includes/widgets/aside/asideInfoCard.pug b/layout/includes/widgets/aside/asideInfoCard.pug
new file mode 100644
index 00000000..edec7200
--- /dev/null
+++ b/layout/includes/widgets/aside/asideInfoCard.pug
@@ -0,0 +1,22 @@
+.card-widget.card-info
+    .card-content
+        .card-info-avatar.is-center
+            .author-info__top-group
+                .author-info__sayhi#author-info__sayhi(onclick="sco.changeSayHelloText()") 一日之计在于晨
+        .avatar-img-group
+            img.avatar-img(alt="avatar", src=theme.aside.card.author.img)
+            .avatar-sticker
+                svg.avatar-sticker-img(alt="avatar", aria-hidden="true")
+                    use(xlink:href=theme.aside.card.author.state)
+                script(src=url_for(theme.aside.card.author.js))
+        .author-info__description_group
+            .author-info__description!= theme.aside.card.content
+            .author-info__description2!= theme.aside.card.content2
+        .author-info__bottom-group
+            a.author-info__bottom-group-left(href=theme.about ? "/about" : "/", data-pjax-state)
+                .author-info__name= config.author
+                .author-info__desc!= config.subtitle
+            .card-info-social-icons.is-center
+                each value, key in theme.aside.card.information
+                    a.social-icon(href=url_for(value.url), title=key)
+                        i(class=value.icon)
\ No newline at end of file
diff --git a/layout/includes/widgets/aside/asideNewestPost.pug b/layout/includes/widgets/aside/asideNewestPost.pug
new file mode 100644
index 00000000..ed287219
--- /dev/null
+++ b/layout/includes/widgets/aside/asideNewestPost.pug
@@ -0,0 +1,16 @@
+.card-widget.card-recent-post
+    .item-headline
+        i.scoicon.sco-map-line
+        span 最近发布
+    .aside-list
+        - let index = 1
+        each post in site.posts.data.sort((a, b) => b.date < a.date ? -1 : 1)
+            if index <= 5
+                .aside-list-item
+                    a.thumbnail(href=url_for(post.path) title=post.title)
+                        img(alt=post.title src=post.cover)
+                    .content
+                        each categories in post.categories.data
+                            a.article-recent_post_categories(href=url_for(post.path))= categories.name
+                        a.title(href=url_for(post.path) title=post.title)= post.title
+                - index++
\ No newline at end of file
diff --git a/layout/includes/widgets/aside/asidePower.pug b/layout/includes/widgets/aside/asidePower.pug
new file mode 100644
index 00000000..b41923c9
--- /dev/null
+++ b/layout/includes/widgets/aside/asidePower.pug
@@ -0,0 +1,19 @@
+- const data = site.data.afadian.links
+- const vip = data[Math.floor(Math.random() * data.length)]
+.card-widget.card-power
+    .item-headline
+        i.scoicon.sco-afdian-line
+        span 爱发电赞助
+        a.power-charge(href=theme.aside.power.link, rel="external nofollow", target="_blank", title="赞助博主") 赞助
+    a#power-star(data-pjax-state="", href=vip.url)
+        #power-star-image(style=`background-image: url('${vip.avatar}');`)
+        .power-star-body
+            #power-star-title= vip.name
+            #power-star-desc= vip.descr
+    .power-list
+        .power-item
+            .power-item-body
+                each item in data
+                    if item.name !== vip.name
+                        .power-item-link
+                            a(target="_blank", href=item.link, rel="external nofollow")= item.name
\ No newline at end of file
diff --git a/layout/includes/widgets/aside/asideSwitch.pug b/layout/includes/widgets/aside/asideSwitch.pug
new file mode 100644
index 00000000..2496d58c
--- /dev/null
+++ b/layout/includes/widgets/aside/asideSwitch.pug
@@ -0,0 +1,26 @@
+case item
+    when 'power'
+        include ./asidePower.pug
+    when 'about'
+        include ./asideInfoCard.pug
+    when 'flip'
+        include ./asideFlipCard.pug
+    when 'welcome'
+        include ./asideWelcome.pug
+    when 'history'
+        include ./asideHistory.pug
+    when 'newestPost'
+        include ./asideNewestPost.pug
+    when 'tag'
+        .card-widget.card-tags
+            include ./asideTag.pug
+    when 'archive'
+        .card-widget.card-archives
+            include ./asideArchive.pug
+    when 'webInfo'
+        .card-widget.card-webinfo
+            include ./asideWebInfo.pug
+    when 'allInfo'
+        include ./asideAllInfo.pug
+    default
+        include ../../page/default.pug
\ No newline at end of file
diff --git a/layout/includes/widgets/aside/asideTag.pug b/layout/includes/widgets/aside/asideTag.pug
new file mode 100644
index 00000000..4a3c4912
--- /dev/null
+++ b/layout/includes/widgets/aside/asideTag.pug
@@ -0,0 +1,11 @@
+.card-tag-cloud
+    each tag in site.tags.data
+        a(href=url_for(tag.path), style="font-size: 0.8rem;")= tag.name
+            sup= tag.length
+if site.tags.length > 50
+    a#more-tags-btn(href="javascript:void(0);", rel="external nofollow", onclick="sco.openAllTags();", data-pjax-state="") 查看全部
+else
+    style.
+        .card-tag-cloud::after {
+            display: none !important;
+        }
\ No newline at end of file
diff --git a/layout/includes/widgets/aside/asideToc.pug b/layout/includes/widgets/aside/asideToc.pug
new file mode 100644
index 00000000..4cca0134
--- /dev/null
+++ b/layout/includes/widgets/aside/asideToc.pug
@@ -0,0 +1,5 @@
+.card-widget#card-toc
+    .item-headline
+        i.scoicon.sco-menu-line
+        span 文章目录
+    .toc-content#toc-content!= toc(page.content, { list_number: false })
\ No newline at end of file
diff --git a/layout/includes/widgets/aside/asideWebInfo.pug b/layout/includes/widgets/aside/asideWebInfo.pug
new file mode 100644
index 00000000..598d02ef
--- /dev/null
+++ b/layout/includes/widgets/aside/asideWebInfo.pug
@@ -0,0 +1,40 @@
+.webinfo
+    if theme.aside.siteinfo.postcount
+        .webinfo-item
+            .webinfo-item-title
+                i.item-icon.scoicon.sco-folder-fill
+                .item-name 文章总数 :
+            .item-count= site.posts.length
+    if theme.thirdparty.busuanzi
+        if theme.aside.siteinfo.pv
+            .webinfo-item
+                .webinfo-item-title
+                    i.item-icon.scoicon.sco-visitor-line
+                    .item-name 总访问数 :
+                span#busuanzi_value_site_pv
+                    i.scoicon.sco-loading-line
+        if theme.aside.siteinfo.uv
+            .webinfo-item
+                .webinfo-item-title
+                    i.item-icon.scoicon.sco-team-fill
+                    .item-name 总访客数 :
+                span#busuanzi_value_site_uv
+                    i.scoicon.sco-loading-line
+    if theme.aside.siteinfo.runtimeenable
+        .webinfo-item
+            .webinfo-item-title
+                i.item-icon.scoicon.sco-calendar-todo-fill
+                .item-name 建站天数 :
+            .item-count#runtimeshow
+    if theme.aside.siteinfo.updatetime
+        .webinfo-item
+            .webinfo-item-title
+                i.item-icon.scoicon.sco-loop-left-fill
+                .item-name 最后更新 :
+            time.item-count(datetime=new Date())
+    if theme.thirdparty.wordcount && theme.aside.siteinfo.wordcount
+        .webinfo-item
+            .webinfo-item-title
+                i.item-icon.scoicon.sco-word-fill
+                .item-name 全站字数 :
+            .item-count= totalcount(site)
\ No newline at end of file
diff --git a/layout/includes/widgets/aside/asideWelcome.pug b/layout/includes/widgets/aside/asideWelcome.pug
new file mode 100644
index 00000000..5fa89dcc
--- /dev/null
+++ b/layout/includes/widgets/aside/asideWelcome.pug
@@ -0,0 +1,28 @@
+if theme.aside.welcome.enable
+    style.
+        #welcome-info {
+            overflow: hidden;
+            margin-top: 4px;
+        }
+        #welcome-info .welcome-time {
+            width: 100%;
+            margin: 12px 0 0;
+            display: inline-flex;
+        }
+        #welcome-info .welcome-message {
+            width: 100%;
+            margin-bottom: 8px;
+            display: inline-flex;
+        }
+
+    .card-widget.card-welcome
+        .item-headline
+            i(class=theme.aside.welcome.icon || 'scoicon sco-map-pin-fill')
+            span= theme.aside.welcome.title || '来访者'
+        #welcome-info
+
+    script(data-pjax).
+        var longitude = '#{theme.aside.welcome.longitude}';
+        var Latitude = '#{theme.aside.welcome.Latitude}';
+        var txkey = '#{theme.aside.welcome.key}';
+        var ipLoacation;
\ No newline at end of file
diff --git a/layout/includes/widgets/home/banner.pug b/layout/includes/widgets/home/banner.pug
new file mode 100644
index 00000000..020398c2
--- /dev/null
+++ b/layout/includes/widgets/home/banner.pug
@@ -0,0 +1,16 @@
+div.banners-title
+    div.banners-title-big!= theme.hometop.banner.title
+    div.banners-title-small= theme.hometop.banner.url
+div.tags-group-all
+    .tags-group-wrapper
+        each i in [1,2]
+            - var keys = Object.keys(theme.hometop.banner.icon)
+            - var pairs = keys.map((val, i) => i % 2 ? [keys[i - 1], val] : []).filter(x => x.length)
+            each pair in pairs
+                .tags-group-icon-pair
+                    each key in pair
+                        .tags-group-icon(style=`background: ${theme.hometop.banner.icon[key].color}`)
+                            img(src=theme.hometop.banner.icon[key].img, title=key)
+a#banner-hover(onclick="toRandomPost()" data-pjax-state="")
+    span.bannerText 随便逛逛
+    i.scoicon.sco-arrow-2-right-line.banner-righticon
\ No newline at end of file
diff --git a/layout/includes/widgets/home/bbTimeList.pug b/layout/includes/widgets/home/bbTimeList.pug
new file mode 100644
index 00000000..ad4203c1
--- /dev/null
+++ b/layout/includes/widgets/home/bbTimeList.pug
@@ -0,0 +1,8 @@
+.bbTimeList.container#bbTimeList
+    i.bber-logo.scoicon.sco-says(onclick="pjax.loadUrl('/essay/')", style="font-size: 1rem;")
+    .swiper-container.swiper-no-swiping.swiper-container-initialized.swiper-container-vertical.swiper-container-pointer-events#bbtalk(tabindex="-1", onclick="pjax.loadUrl('/essay/')")
+        .swiper-wrapper#bber-talk
+            each item, i in site.data.essay.essay_list
+                if i < 10
+                    .li-style.swiper-slide= item.image ? item.content + '【图片】' : item.content
+    i.bber-gotobb.scoicon.sco-right-btn-fill(style="font-size: 1rem", title="查看全文", onclick="pjax.loadUrl('/essay/')")
\ No newline at end of file
diff --git a/layout/includes/widgets/home/categoryBar.pug b/layout/includes/widgets/home/categoryBar.pug
new file mode 100644
index 00000000..ab618307
--- /dev/null
+++ b/layout/includes/widgets/home/categoryBar.pug
@@ -0,0 +1,10 @@
+.category-bar-items#category-bar-items
+    .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home")
+        a(href="/") 首页
+    each item in site.categories.data
+        .category-bar-item(class=select ? (select === item.name ? 'select' : '') : '', id=item.name)
+            a(href=url_for(item.path))= item.name
+if site.categories.length > 10
+    .category-bar-next#category-bar-next(onclick="sco.scrollCategoryBarToRight()")
+        i.scoicon.sco-show-right-line
+a.category-bar-more(href="/categories/") 更多
\ No newline at end of file
diff --git a/layout/includes/widgets/home/categoryGroup.pug b/layout/includes/widgets/home/categoryGroup.pug
new file mode 100644
index 00000000..cc4cc448
--- /dev/null
+++ b/layout/includes/widgets/home/categoryGroup.pug
@@ -0,0 +1,9 @@
+- var groupNames = ['G1', 'G2', 'G3'];
+- var styles = ['--sco-shadow-blue', '--sco-shadow-red', '--sco-shadow-green'];
+- var classes = ['CB1 bikan', 'remen', 'shiyong'];
+
+each groupName, index in groupNames
+    .categoryItem(style=`box-shadow: var(${styles[index]});`)
+        a.categoryButton(class=classes[index], href=url_for(theme.hometop.categoryGroup[groupName].url))
+            span.categoryButtonText= theme.hometop.categoryGroup[groupName].name
+            i(class=theme.hometop.categoryGroup[groupName].icon)
diff --git a/layout/includes/widgets/home/hometop.pug b/layout/includes/widgets/home/hometop.pug
new file mode 100644
index 00000000..edfca3fd
--- /dev/null
+++ b/layout/includes/widgets/home/hometop.pug
@@ -0,0 +1,9 @@
+div.recent-top-post-group#recent-top-post-group
+    div.recent-post-top#recent-post-top
+        div#bannerGroup
+            div#banners
+                include ./banner.pug
+            div.categoryGroup
+                include ./categoryGroup.pug
+        div.topGroup
+            include ./rencentPost.pug
\ No newline at end of file
diff --git a/layout/includes/widgets/home/postList.pug b/layout/includes/widgets/home/postList.pug
new file mode 100644
index 00000000..9709ff44
--- /dev/null
+++ b/layout/includes/widgets/home/postList.pug
@@ -0,0 +1,25 @@
+for post in page.posts.sort('-date').data
+    div(class="recent-post-item" onclick="pjax.loadUrl('/"+post.path+"')")
+        div.post_cover.left_radius
+            a(href=url_for(post.path), title=post.title)
+                img(src=url_for(post.cover), alt=post.title, class="post_bg")
+        div.recent-post-info
+            div.recent-post-info-top
+                div.recent-post-info-top-tips
+                    each category in post.categories.data
+                       span(class="original")= category.name
+
+                    if post.prev == null && is_home()
+                        span(class="original")="最新"
+
+                    a(class="unvisited-post" href=url_for(post.path), data-pjax-state)= "未读"
+
+                a(class="article-title" href=url_for(post.path), data-pjax-state, title=post.title)= post.title
+
+            div.article-meta-wrap
+                span.article-meta.tags
+                   each tag in post.tags.data
+                       a(class="article-meta__tags" href=url_for(tag.path), data-pjax-state, onclick="window.event.cancelable=true")= tag.name
+
+                span.post-meta-date
+                   time(datetime=moment(post.date))
\ No newline at end of file
diff --git a/layout/includes/widgets/home/rencentPost.pug b/layout/includes/widgets/home/rencentPost.pug
new file mode 100644
index 00000000..701857b0
--- /dev/null
+++ b/layout/includes/widgets/home/rencentPost.pug
@@ -0,0 +1,26 @@
+- var filteredPosts = site.posts.data.filter(item => item.recommend === true).slice(0,6)
+each post in filteredPosts
+    .recent-post-item
+        .post_cover.left_radius
+            a(href=url_for(post.path), title=post.title)
+                span.recent-post-top-text 荐
+                img.post_bg(alt=post.title, src=post.cover, loading="lazy")
+        .recent-post-info
+            a.article-title(href=url_for(post.path), title=post.title)= post.title
+
+if theme.hometop.recommendList.url.startsWith('/') && theme.hometop.recommendList.url.endsWith('/')
+    .todayCard#todayCard(onclick=`pjax.loadUrl('${theme.hometop.recommendList.url}')`, style="z-index: 1;")
+else
+    script.
+        function GoTodayCard() {
+            window.open("#{theme.hometop.recommendList.url}", "_blank");
+        }
+    .todayCard#todayCard(onclick="GoTodayCard()", style="z-index: 1;")
+        .todayCard-info
+            .todayCard-tips= theme.hometop.recommendList.sup
+            .todayCard-title= theme.hometop.recommendList.title
+        .todayCard-cover.nolazyload(style=`background: url('${theme.hometop.recommendList.img}') no-repeat center /cover`)
+        .banner-button-group
+            a.banner-button(onclick="window.event.cancelBubble=true;sco.hideTodayCard();")
+                i.scoicon.sco-add-fill
+                span.banner-button-text 更多推荐
diff --git a/layout/includes/widgets/home/topGroup.pug b/layout/includes/widgets/home/topGroup.pug
new file mode 100644
index 00000000..aa53b6c5
--- /dev/null
+++ b/layout/includes/widgets/home/topGroup.pug
@@ -0,0 +1,27 @@
+- var filteredPosts = site.posts.data.filter(item => item.recommend === true).slice(0,6)
+each post in filteredPosts
+    .recent-post-item
+        .post_cover.left_radius
+            a(href=url_for(post.path), title=post.title)
+                span.recent-post-top-text 荐
+                img.post_bg(alt=post.title, src=post.cover, loading="lazy")
+        .recent-post-info
+            a.article-title(href=url_for(post.path), title=post.title)= post.title
+
+if theme.hometop.recommendList.url.startsWith('/') && theme.hometop.recommendList.url.endsWith('/')
+    .todayCard#todayCard(onclick=`pjax.loadUrl('${theme.hometop.recommendList.url}')`, style="z-index: 1;")
+else
+    script.
+        function GoTodayCard() {
+            window.open("#{theme.hometop.recommendList.url}", "_blank");
+        }
+    .todayCard#todayCard(onclick="GoTodayCard()", style="z-index: 1;")
+
+    .todayCard-info
+        .todayCard-tips= theme.hometop.recommendList.sup
+        .todayCard-title= theme.hometop.recommendList.title
+    .todayCard-cover.nolazyload(style=`background: url('${theme.hometop.recommendList.img}') no-repeat center /cover`)
+    .banner-button-group
+        a.banner-button(onclick="window.event.cancelBubble=true;sco.hideTodayCard();")
+            i.scoicon.sco-add-fill
+            span.banner-button-text 更多推荐
diff --git a/layout/includes/widgets/nav/left.pug b/layout/includes/widgets/nav/left.pug
new file mode 100644
index 00000000..44f2a99c
--- /dev/null
+++ b/layout/includes/widgets/nav/left.pug
@@ -0,0 +1,10 @@
+div.back-menu-list-groups
+    - var menu = theme.nav && theme.nav.left && theme.nav.left.menu ? theme.nav.left.menu : {}
+    each groupData, x in menu
+        div.back-menu-list-group
+            div.back-menu-list-title= x
+            div.back-menu-list
+                each data, y in groupData
+                    a.back-menu-item(href=url_for(data.url), rel="external nofollow", title=y)
+                        img.back-menu-item-icon(src=data.icon, loading="lazy", alt=x)
+                        span.back-menu-item-text= y
\ No newline at end of file
diff --git a/layout/includes/widgets/nav/menu.pug b/layout/includes/widgets/nav/menu.pug
new file mode 100644
index 00000000..4dda0491
--- /dev/null
+++ b/layout/includes/widgets/nav/menu.pug
@@ -0,0 +1,16 @@
+div.menus_items
+    - var menu = theme.nav && theme.nav.menu ? theme.nav.menu : {}
+    each value, x in menu
+        div.menus_item
+            if !value.url
+                a.site-page(href="javascript:void(0);", rel="external nofollow")
+                    span= x
+                ul.menus_item_child
+                    each childValue, y in value.child
+                        li
+                            a.site-page.child(href=url_for(childValue.url))
+                                i(class=childValue.icon)
+                                span= y
+            else
+                a.site-page.not-child(href=url_for(value.url), rel="external nofollow")
+                    span= x
\ No newline at end of file
diff --git a/layout/includes/widgets/nav/right.pug b/layout/includes/widgets/nav/right.pug
new file mode 100644
index 00000000..36a5a841
--- /dev/null
+++ b/layout/includes/widgets/nav/right.pug
@@ -0,0 +1,23 @@
+if theme.nav.right.travellings
+    div.nav-button.only-home#travellings_button
+        a.site-page(traget="_blank", href="https://www.travellings.cn/go.html", rel="noopener noreferrer", title="开往-友链接力", width="120")
+            i.scoicon.sco-train-line(style="font-size: 1rem;")
+if theme.nav.right.random
+    div.nav-button#randomPost_button
+        a.site-page(onclick="sco.toRandomPost()", title="随机前往一个文章")
+            i.scoicon.sco-signal-tower-fill(style="font-size: 1rem;")
+if theme.thirdparty.search.enable
+    div.nav-button#search-button
+        a.site-page.social-icon.search(href="javascript:void(0);", rel= "external nofollow", title="搜索")
+            i.scoicon.sco-search-line(style="font-size: 1rem;")
+if theme.nav.right.console
+    div.nav-button#nav-console
+        a.console_switchbutton(onclick="sco.showConsole()", title="显示中控台", rel="external nofollow", href="javascript:void(0);")
+            i.scoicon.sco-dashboard-fill(style="font-size: 1rem;")
+div.nav-button#nav-totop(onclick="sco.toTop()")
+    a.totopbtn
+        i.scoicon.sco-arrow-up-line
+        span#percent= "0"
+div#toggle-menu
+    a.site-page
+        i.scoicon.sco-menu-line
\ No newline at end of file
diff --git a/layout/includes/widgets/page/about/authorinfo.pug b/layout/includes/widgets/page/about/authorinfo.pug
new file mode 100644
index 00000000..e4fac9c1
--- /dev/null
+++ b/layout/includes/widgets/page/about/authorinfo.pug
@@ -0,0 +1,12 @@
+- const authorinfo = site.data.about.authorinfo
+
+.author-info
+    .author-tag-left
+        each tag in authorinfo.leftTags
+            span.author-tag= tag
+    .author-img
+        img(src=authorinfo.image)
+    .author-tag-right
+        each tag in authorinfo.rightTags
+            span.author-tag= tag
+.author-title 关于我
\ No newline at end of file
diff --git a/layout/includes/widgets/page/about/award.pug b/layout/includes/widgets/page/about/award.pug
new file mode 100644
index 00000000..74d9d169
--- /dev/null
+++ b/layout/includes/widgets/page/about/award.pug
@@ -0,0 +1,34 @@
+- var sum = 0
+if site.data.about.rewardList
+    .author-content
+        .author-content-item.single.reward
+            .author-content-item-tips 致谢
+            span.author-content-item-title 赞赏名单
+            .author-content-item-description
+               = "感谢赞赏的人，因为你们，让我感受到写博客这件事情能够给你们创造了价值。这会让我在这条路上走得更远。"
+            .reward-list-all
+                each reward in site.data.about.rewardList
+                    - sum += reward.money
+                    .reward-list-item
+                        .reward-list-item-name= reward.name
+                        .reward-list-bottom-group
+                            .reward-list-item-money(style=reward.vip ? "background: var(--sco-vip);" : "") ¥ #{reward.money}
+                            time.datatime.reward-list-item-time(datetime=moment(reward.time).format())
+                if theme.post.award.enable
+                    .post-reward
+                        .post-reward(onclick="AddRewardMask()")
+                        .reward-button(title="赞赏作者")
+                            i.scoicon.sco-hand-heart-fill
+                            = "打赏作者"
+                        .reward-main
+                            ul.reward-all
+                                span.reward-title 感谢你赐予我前进的力量
+                                ul.reward-group
+                                    - var rewards = [{image: theme?.post?.award?.wechat, description: '微信'}, {image: theme?.post?.award?.alipay, description: '支付宝'}]
+                                    each reward in rewards
+                                        li.reward-item
+                                            a(href=reward.image, target="_blank")
+                                                img.post-qr-code-img(alt=reward.description, src=reward.image)
+                                            .post-qr-code-desc= reward.description
+            .reward-list-tips
+                p 总金额：¥ #{sum}，将全部用于博客的维护
\ No newline at end of file
diff --git a/layout/includes/widgets/page/about/contentinfo.pug b/layout/includes/widgets/page/about/contentinfo.pug
new file mode 100644
index 00000000..ae309ff2
--- /dev/null
+++ b/layout/includes/widgets/page/about/contentinfo.pug
@@ -0,0 +1,38 @@
+- const contentinfo = site.data.about.contentinfo
+
+.author-content
+    .author-content-item.myInfoAndSayHello
+        .title1 你好，很高兴认识你👋
+        .title2 我叫
+            span.inline-word= contentinfo.name
+        .title1 是一名 #{contentinfo.title}
+    .aboutsiteTips.author-content-item
+        .author-content-item-tips 追求
+        h2
+            | 源于
+            br
+            | 热爱而去
+            span.inline-word 创造
+            .mask
+                span.first-tips(data-show='')= contentinfo.product
+                span= contentinfo.design
+                span= contentinfo.program
+                span(data-up='')= contentinfo.user_experience
+
+script.
+    var pursuitInterval = null;
+    pursuitInterval = setInterval(function () {
+        const show = document.querySelector('span[data-show]')
+        const next = show.nextElementSibling || document.querySelector('.first-tips')
+        const up = document.querySelector('span[data-up]')
+        if (up) {
+            up.removeAttribute('data-up')
+        }
+        show.removeAttribute('data-show')
+        show.setAttribute('data-up', '')
+        next.setAttribute('data-show', '')
+    }, 2000)
+
+    document.addEventListener('pjax:send', function(){
+        clearInterval(pursuitInterval);
+    });
\ No newline at end of file
diff --git a/layout/includes/widgets/page/about/hobbies.pug b/layout/includes/widgets/page/about/hobbies.pug
new file mode 100644
index 00000000..cece1691
--- /dev/null
+++ b/layout/includes/widgets/page/about/hobbies.pug
@@ -0,0 +1,33 @@
+.author-content
+    if site.data.about.game1
+        .author-content-item.game-apex(style=`background: url(${site.data.about.game1.img}) no-repeat top; background-size: cover;`)
+            .card-content
+                .author-content-item-tips= site.data.about.game1.title
+                span.author-content-item-title= site.data.about.game1.subtitle
+                .content-bottom
+                    .tips= site.data.about.game1.tips_left
+                    .tips= site.data.about.game1.tips_right
+    if site.data.about.game2
+        .author-content-item.game-jl(style=`background: url(${site.data.about.game2.img}) no-repeat top; background-size: cover;`)
+            .card-content
+                .author-content-item-tips= site.data.about.game2.title
+                span.author-content-item-title= site.data.about.game2.subtitle
+                .content-bottom
+                    .tips= site.data.about.game2.tips_left
+                    .tips= site.data.about.game2.tips_right
+
+if site.data.about.likes
+    - const likes = site.data.about.likes
+    .author-content
+        each like in likes
+            .author-content-item(class=like.type, style=`background: url(${like.bg}) no-repeat center;`)
+                .card-content
+                    .author-content-item-tips= like.tips
+                    span.author-content-item-title= like.title
+                    .content-bottom
+                        .tips= like.subtips
+                        if like.button
+                            .banner-button-group
+                                a.banner-button(href=like.button_link, target="_blank", rel="noopener nofollow")
+                                    i.scoicon.sco-right-btn-fill
+                                    span.banner-button-text= like.button_text
\ No newline at end of file
diff --git a/layout/includes/widgets/page/about/motto.pug b/layout/includes/widgets/page/about/motto.pug
new file mode 100644
index 00000000..f9bdf31a
--- /dev/null
+++ b/layout/includes/widgets/page/about/motto.pug
@@ -0,0 +1,19 @@
+- const motto = site.data.about.motto
+- const expertise = site.data.about.expertise
+
+.author-content
+    .author-content-item.maxim
+        .author-content-item-tips= motto.title
+        span.maxim-title
+            span(style="opacity: 0.6; margin-bottom:8px;")= motto.prefix
+            span= motto.content
+    .author-content-item.buff
+        .card-content
+            .author-content-item-tips= expertise.title
+            span.buff-title
+                span(style="opacity: 0.6; margin-bottom:8px;")
+                    | #{expertise.prefix}
+                    span.inline-word= expertise.specialist
+                span
+                    | #{expertise.content}
+                    span.inline-word= expertise.level
\ No newline at end of file
diff --git a/layout/includes/widgets/page/about/other.pug b/layout/includes/widgets/page/about/other.pug
new file mode 100644
index 00000000..69ccb674
--- /dev/null
+++ b/layout/includes/widgets/page/about/other.pug
@@ -0,0 +1,61 @@
+.author-content
+    if site.data.about.tj
+        .about-statistic.author-content-item(style=`background: url(${site.data.about.tj.img});`)
+            .card-content
+                .author-content-item-tips 数据
+                span.author-content-item-title 访问统计
+                #statistic
+                .post-tips
+                    | 统计信息来自
+                    a(href="https://invite.51.la/1NzKqTeb?target=V6", target="_blank", rel="noopener nofollow") 51la网站统计
+                if theme.about.echarts.enable
+                    .banner-button-group
+                        a.banner-button(onclick="pjax.loadUrl('/echart/');", data-pjax-state="")
+                            i.scoicon.sco-right-btn-fill
+                            span.banner-button-text 文章统计
+            script.
+                fetch("#{site.data.about.tj.url}")
+                    .then(res => res.text())
+                    .then(data => {
+                        let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
+                        let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);
+                        num = num.map(el => {
+                            let val = el.replace(/(<\/span><span>)/g, "");
+                            let str = val.replace(/(<\/span><\/p>)/g, "");
+                            return str;
+                        });
+                        let s = document.getElementById("statistic");
+                        let statistic = [];
+                        for (let i = 0; i < num.length; i++) {
+                            if (i == 0 || i == num.length - 1) continue;
+                            s.innerHTML += "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
+                        }
+                    });
+
+    if site.data.about.oneself
+        style.
+            :root {
+                --site-about-oneself-map--light: url(#{site.data.about.oneself.map.light});
+                --site-about-oneself-map--dark: url(#{site.data.about.oneself.map.dark});
+            }
+        - const oneself = site.data.about.oneself
+        .author-content-item-group.column.mapAndInfo
+            .author-content-item.map.single
+                span.map-title 我现在住在 #{oneself.location}
+            .author-content-item.selfInfo.single
+                div
+                    span.selfInfo-title 生于
+                    span.selfInfo-content(style="color: #43a6c6;")= oneself.birthYear
+                div
+                    span.selfInfo-title= oneself.university
+                    span.selfInfo-content(style="color: #c69043;")= oneself.major
+                div
+                    span.selfInfo-title 现在职业
+                    span.selfInfo-content(style="color: #b04fe6;")= oneself.occupation
+
+if site.data.about.cause
+    .author-content
+        .create-site-post.author-content-item.single
+            .author-content-item-tips 心路历程
+            span.author-content-item-title 为什么建站？
+            != site.data.about.cause
\ No newline at end of file
diff --git a/layout/includes/widgets/page/about/personalities.pug b/layout/includes/widgets/page/about/personalities.pug
new file mode 100644
index 00000000..2255dbcc
--- /dev/null
+++ b/layout/includes/widgets/page/about/personalities.pug
@@ -0,0 +1,16 @@
+- const personalities = site.data.about.personalities
+
+.author-content
+    .author-content-item.personalities
+        .author-content-item-tips= personalities.tips
+        span.author-content-item-title= personalities.title
+        .title2(style=`color:${personalities.color}`)= personalities.type
+        .image
+            img(src=personalities.image)
+        .post-tips
+            | 在
+            a(href="https://www.16personalities.com/", target="_blank", rel="noopener nofollow")= personalities.linkText
+            | 了解更多关于
+            a(target="_blank", rel="noopener external nofollow", href=personalities.typeLink)= personalities.typeName
+    .author-content-item.myphoto
+        img.author-content-img(src=personalities.myphoto, alt="自拍")
\ No newline at end of file
diff --git a/layout/includes/widgets/page/about/skillsinfo.pug b/layout/includes/widgets/page/about/skillsinfo.pug
new file mode 100644
index 00000000..1a6d9c88
--- /dev/null
+++ b/layout/includes/widgets/page/about/skillsinfo.pug
@@ -0,0 +1,41 @@
+- var skills = site.data.about.skills
+- var careers = site.data.about.careers
+
+.author-content
+    .author-content-item.skills
+        .card-content
+            .author-content-item-tips= skills.title
+            span.author-content-item-title= skills.subtitle
+            .skills-style-group
+                .tags-group-all
+                    .tags-group-wrapper
+                        .tags-group-all
+                            .tags-group-wrapper
+                                each i in [1,2]
+                                    - var pair = []
+                                    each tag, index in skills.tags
+                                        - pair.push(tag)
+                                        if pair.length === 2 || index === skills.tags.length - 1
+                                            .tags-group-icon-pair
+                                                each item in pair
+                                                    .tags-group-icon(style=`background:${item.color}`)
+                                                        img(src=item.icon, title=item.title)
+                                            - pair = []
+                .skills-list
+                    each tag in skills.tags
+                        .skill-info
+                            .skill-icon(style=`background:${tag.color}`)
+                                img(src=tag.icon, title=tag.title)
+                            .skill-name
+                                span= tag.title
+                    .etc ...
+    .author-content-item.careers
+        .card-content
+            .author-content-item-tips= careers.title
+            span.author-content-item-title= careers.subtitle
+            .careers-group
+                each item in careers.items
+                    .careers-item
+                        .circle(style=`background:${item.color}`)
+                        .name= `${item.school}, ${item.major}`
+            img.author-content-img(src=careers.image, alt=careers.title)
\ No newline at end of file
diff --git a/layout/includes/widgets/page/banner.pug b/layout/includes/widgets/page/banner.pug
new file mode 100644
index 00000000..9a35addb
--- /dev/null
+++ b/layout/includes/widgets/page/banner.pug
@@ -0,0 +1,14 @@
+.author-content.author-content-item.single.nolazyload(style=`background: url(${page.cover}) no-repeat center; background-size: cover;`,class=`${pageClass}`)
+    .card-content
+        .author-content-item-tips= page.title
+        span.author-content-item-title= page.desc
+        .content-bottom
+            if (page.leftend)
+                .tips!= page.leftend
+            if(page.rightend)
+                .tips!= page.rightend
+        if page.rightbtn
+            .banner-button-group
+                a.banner-button(onclick="pjax.loadUrl(\"" + page.rightbtnlink + "\")", data-pjax-state)
+                    i.scoicon.sco-right-btn-fill
+                    span.banner-button-text= page.rightbtn
\ No newline at end of file
diff --git a/layout/includes/widgets/page/equipment/content.pug b/layout/includes/widgets/page/equipment/content.pug
new file mode 100644
index 00000000..71a4015f
--- /dev/null
+++ b/layout/includes/widgets/page/equipment/content.pug
@@ -0,0 +1,23 @@
+#equipment
+    if site.data.equipment
+        each i in site.data.equipment
+            .equipment-item
+                h2.equipment-item-title= i.class_name
+                .equipment-item-description= i.description
+                .equipment-item-content
+                    each item in i.equipment_list
+                        .equipment-item-content-item
+                            .equipment-item-content-item-cover
+                                img.equipment-item-content-item-image(src=item.image, alt=item.name)
+                            .equipment-item-content-item-info
+                                .equipment-item-content-item-name= item.name
+                                .equipment-item-content-item-specification= item.specification
+                                .equipment-item-content-item-description= item.description
+                                if item.link
+                                    .equipment-item-content-item-toolbar
+                                        if item.link.includes('https://') || item.link.includes('http://')
+                                            a.equipment-item-content-item-link(href=item.link, target="_blank") 详情
+                                        else
+                                            a.equipment-item-content-item-link(href=item.link, target="_blank") 查看文章
+                                        a.bber-reply(onclick=`sco.toTalk('${item.description}')`)
+                                            i.scoicon.sco-chat-fill(style="font-size: 1rem;")
\ No newline at end of file
diff --git a/layout/includes/widgets/page/links/banner.pug b/layout/includes/widgets/page/links/banner.pug
new file mode 100644
index 00000000..db65716b
--- /dev/null
+++ b/layout/includes/widgets/page/links/banner.pug
@@ -0,0 +1,30 @@
+.banners-title
+    .banners-title-small= page.title
+    .banners-title-big= page.desc
+
+.banner-button-group
+    if theme.footer.randomlink
+        a.banner-button.secondary(onclick="travelling()")
+            i.scoicon.sco-signal-tower-fill
+            span.banner-button-text 随机访问
+    a.banner-button(onclick="sco.scrollToComment()")
+        i.scoicon.sco-right-btn-fill
+        span.scoicon.banner-button-text 申请友链
+
+.tags-group-all.nowrapMove
+    .tags-group-wrapper
+        - const data = site.data.links.links
+        - for (let i = 0; i < 2; i++)
+        each x in data
+            if x.type === "item"
+                - var pairs = []
+                each y, index in x.link_list
+                    if (index % 2 === 0)
+                        - pairs.push([y])
+                    else
+                        - pairs[pairs.length - 1].push(y)
+                each pair in pairs
+                    .tags-group-icon-pair
+                        each y in pair
+                            a.tags-group-icon(href=url_for(y.link), title=y.name)
+                                img(src=y.avatar, title=y.name)
\ No newline at end of file
diff --git a/layout/includes/widgets/page/links/linksCard.pug b/layout/includes/widgets/page/links/linksCard.pug
new file mode 100644
index 00000000..63962fc7
--- /dev/null
+++ b/layout/includes/widgets/page/links/linksCard.pug
@@ -0,0 +1,18 @@
+.site-card-group
+    each item in data.link_list
+        .site-card
+            if item.tag
+                if item.vip
+                    span.site-card-tag.vip= item.tag
+                else
+                    span.site-card-tag= item.tag
+            a.img(title=item.name, href=url_for(item.link))
+                img.flink-avatar(src=item.topimg, alt=item.name)
+                .img-alt.is-center= item.name
+            a.info.cf-friends-link(title=item.name, href=url_for(item.link))
+                .site-card-avatar
+                    img.flink-avatar.cf-friends-avatar(src=item.avatar, alt=item.name)
+                    .img-alt.is-center= item.name
+                .site-card-text
+                    span.title.cf-friends-name= item.name
+                    span.desc(title=item.descr)= item.descr
\ No newline at end of file
diff --git a/layout/includes/widgets/page/links/linksItem.pug b/layout/includes/widgets/page/links/linksItem.pug
new file mode 100644
index 00000000..6ce228e9
--- /dev/null
+++ b/layout/includes/widgets/page/links/linksItem.pug
@@ -0,0 +1,14 @@
+.flink-list
+    each item in data.link_list
+        .flink-list-item
+            a.cf-friends-link(href=url_for(item.link), title=item.name)
+                if item.tag
+                    if item.vip
+                        span.site-card-tag.vip= item.tag
+                    else
+                        span.site-card-tag= item.tag
+                img.flink-avatar.cf-friends-avatar(alt=item.name, src=item.avatar)
+                .img-alt.is-center= item.name
+                .flink-item-info
+                    span.flink-item-name.cf-friends-name= item.name
+                    span.flink-item-desc(title=item.descr)= item.descr
\ No newline at end of file
diff --git a/layout/includes/widgets/page/moments/angle.pug b/layout/includes/widgets/page/moments/angle.pug
new file mode 100644
index 00000000..12f35f09
--- /dev/null
+++ b/layout/includes/widgets/page/moments/angle.pug
@@ -0,0 +1,24 @@
+.title-h2-a
+    .title-h2-a-left
+        h2(style="padding-top: 0;margin:0.6rem 0 0.6rem;") 🎣 钓鱼
+        a#random-post-start(href="javascript:fetchRandomPost();", rel="external nofollow", style="transition-duration: 0.3s; transform: rotate(63000deg); opacity: 1;", data-pjax-state="")
+            i.scoicon.refresh-line(hidden="hidden")
+    .title-h2-a-right
+        a.random-post-all(href="/links/", data-pjax-state="") 全部友链
+
+#random-post
+
+.title-h2-a
+    .title-h2-a-left
+        h2(style="padding-top: 0;margin:0.6rem 0 0.6rem;") 🐟 鱼塘
+    .title-h2-a-right
+        span 以下内容自动生成，未经过审核
+
+script.
+    var fdata = {
+        apiurl: "#{theme.thirdparty.circle.api}",
+        defaultFish: 100,
+        hungryFish: 100,
+    }
+
+script(src="/lib/friends_post.js")
\ No newline at end of file
diff --git a/layout/includes/widgets/page/moments/index.pug b/layout/includes/widgets/page/moments/index.pug
new file mode 100644
index 00000000..b0700d14
--- /dev/null
+++ b/layout/includes/widgets/page/moments/index.pug
@@ -0,0 +1,18 @@
+div#hexo-circle-of-friends-root
+script.
+    let UserConfig = {
+        // 填写你的api地址
+        private_api_url: '!{theme.thirdparty.circle.api}',
+        // 默认加载文章数
+        page_init_number: !{theme.thirdparty.circle.page_init_number},
+        // 点击加载更多时，一次最多加载几篇文章，默认10
+        page_turning_number: !{theme.thirdparty.circle.page_turning_number},
+        // 头像加载失败时，默认头像地址
+        error_img: '!{theme.thirdparty.circle.error_img}',
+        // 进入页面时第一次的排序规则
+        sort_rule: '!{theme.thirdparty.circle.sort_rule}',
+        // 本地文章缓存数据过期时间（天）
+        expire_days: !{theme.thirdparty.circle.expire_days},
+    }
+script(src=url_for(theme.thirdparty.circle.appjs))
+script(src=url_for(theme.thirdparty.circle.bundlejs))
\ No newline at end of file
diff --git a/layout/includes/widgets/page/says/saysBottom.pug b/layout/includes/widgets/page/says/saysBottom.pug
new file mode 100644
index 00000000..d783e611
--- /dev/null
+++ b/layout/includes/widgets/page/says/saysBottom.pug
@@ -0,0 +1,11 @@
+.bber-bottom
+    .bber-info
+        .bber-info-time
+            i.scoicon.sco-calendar-todo-fill
+            time.datetime(datetime=moment(item.date).format())
+        if item.link
+            a.bber-content-link(href=url_for(item.link) title="跳转到短文指引的链接")
+                i.scoicon.sco-link-m-line
+                | 链接
+    a.bber-reply(onclick=`sco.toTalk('${item.content}')`)
+        i.scoicon.sco-chat-fill(style="font-size: 1rem;")
\ No newline at end of file
diff --git a/layout/includes/widgets/page/says/saysContent.pug b/layout/includes/widgets/page/says/saysContent.pug
new file mode 100644
index 00000000..d85cd545
--- /dev/null
+++ b/layout/includes/widgets/page/says/saysContent.pug
@@ -0,0 +1,6 @@
+#bber-content
+    p.datacont= item.content
+    if item.image
+        .bber-content-img
+            each img in item.image
+                img(src=img title="即刻短文配图")
\ No newline at end of file
diff --git a/layout/includes/widgets/page/says/saysFunction.pug b/layout/includes/widgets/page/says/saysFunction.pug
new file mode 100644
index 00000000..2f3bb845
--- /dev/null
+++ b/layout/includes/widgets/page/says/saysFunction.pug
@@ -0,0 +1,10 @@
+if item.aplayer
+    .bber-music
+        meting-js(server=item.aplayer.server type="song" id=item.aplayer.id mutex="true" preload="none" theme="var(--sco-main)" data-lrctype="0")
+
+if item.video
+    .bber-video
+        if item.video.player
+            video(src=item.video.player controls="controls" style="object-fit: cover;")
+        if item.video.bilibili
+            iframe(src=item.video.bilibili scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true")
\ No newline at end of file
diff --git a/layout/includes/widgets/page/says/saysMeta.pug b/layout/includes/widgets/page/says/saysMeta.pug
new file mode 100644
index 00000000..e7198932
--- /dev/null
+++ b/layout/includes/widgets/page/says/saysMeta.pug
@@ -0,0 +1,7 @@
+.meta
+    img.no-lightbox.no-lazyload.avatar(src=theme.aside.card.author.img)
+    .info
+        span.bber_nick= config.author
+        time.datetime.bber_date(datetime=moment(item.date).format())
+    a.bber-reply.goComment(onclick=`sco.toTalk('${item.content}')`)
+        i.scoicon.sco-chat-fill(style="font-size: 1rem;")
\ No newline at end of file
diff --git a/layout/includes/widgets/post/award.pug b/layout/includes/widgets/post/award.pug
new file mode 100644
index 00000000..1d6c6961
--- /dev/null
+++ b/layout/includes/widgets/post/award.pug
@@ -0,0 +1,48 @@
+div.post-reward
+    div.reward-button.button--animated(onclick="AddRewardMask()" title="赞赏作者")
+        i.scoicon.sco-hand-heart-fill
+        | 打赏作者
+    div.reward-main
+        ul.reward-all
+            span.reward-title 感谢你赐予我前进的力量
+            ul.reward-group
+                if theme.post.award.wechat
+                    li.reward-item
+                        a(href=theme.post.award.wechat target="_blank")
+                            img.post-qr-code-img(src=theme.post.award.wechat alt="微信")
+                        div.post-qr-code-desc 微信
+                if theme.post.award.alipay
+                    li.reward-item
+                        a(href=theme.post.award.alipay target="_blank")
+                            img.post-qr-code-img(src=theme.post.award.alipay alt="支付宝")
+                        div.post-qr-code-desc 支付宝
+            a.reward-main-btn(href=url_for(theme.post.award.url))
+                div.reward-text 赞赏者名单
+                div.reward-dec 因为你们的支持让我意识到写文章的价值🙏
+
+script.
+    function RemoveRewardMask() {
+        let rewardMainElements = document.querySelectorAll(".reward-main");
+        let quitBoxElement = document.querySelector("#quit-box");
+
+        rewardMainElements.forEach(element => {
+            element.style.display = "none";
+        });
+
+        if (quitBoxElement) {
+            quitBoxElement.style.display = "none";
+        }
+    }
+
+    function AddRewardMask() {
+        let rewardMainElements = document.querySelectorAll(".reward-main");
+        let quitBoxElement = document.querySelector("#quit-box");
+
+        rewardMainElements.forEach(element => {
+            element.style.display = "flex";
+        });
+
+        if (quitBoxElement) {
+            quitBoxElement.style.display = "flex";
+        }
+    }
\ No newline at end of file
diff --git a/layout/includes/widgets/post/copyright.pug b/layout/includes/widgets/post/copyright.pug
new file mode 100644
index 00000000..8fbc5946
--- /dev/null
+++ b/layout/includes/widgets/post/copyright.pug
@@ -0,0 +1,26 @@
+div.post-copyright
+    div.post-copyright__author_group
+        a.post-copyright__author_img(href="/about/", data-pjax-state="")
+            img.post-copyright__author_img_back(src="https://bu.dusays.com/2023/11/01/6541f6d4b2573.png")
+            img.post-copyright__author_img_front(src=theme.site.icon)
+        div.post-copyright__author_name= config.title
+        div.post-copyright__author_desc= config.subtitle
+    div.post-tools#post-tools
+        div.post-tools-left
+            if theme.post.award.enable
+                include ./award
+            if theme.footer.rss.enable
+                div.reward-link.mode
+                    a.reward-link-button(href=theme.footer.rss.url)
+                        i.scoicon.sco-plant-fill
+                        | 订阅
+    div.post-copyright__notice
+        span.post-copyright-info
+            | 本文是#{page.cc || theme.post.default.copyright}文章，
+            if page.cc === "转载或翻译"
+                | 版权归原作者所有。转载本文请联系原作者。
+            else
+                | 采用
+                a(href="/copyright/", target="_blank") CC BY-NC-ND 4.0
+                | 协议，完整转载请注明来自
+                a(href="/", target="_blank") #{config.title}
\ No newline at end of file
diff --git a/layout/includes/widgets/post/postMeta.pug b/layout/includes/widgets/post/postMeta.pug
new file mode 100644
index 00000000..69a1ae05
--- /dev/null
+++ b/layout/includes/widgets/post/postMeta.pug
@@ -0,0 +1,54 @@
+div.coverdiv#coverdiv
+    img#post-cover.nolazyload(src=url_for(page.cover), alt=page.title)
+div#post-info
+    div#post-firstinfo
+        div.meta-firstline
+            a.post-meta-original(title="该文章为"+page.cc+"文章，注意版权协议")= page.cc
+            if page.categories.data.length > 0
+                span.post-meta-categories
+                    a.post-meta-categories(href=page.categories.data[0].path)= page.categories.data[0].name
+            div.tag_share
+                div.post-meta__tag-list
+                    each tag in page.tags.data
+                        a.post-meta__tags(href=url_for(tag.path))
+                            span.tags-name.tags-punctuation= tag.name
+    h1.post-title= page.title
+    div#post-meta
+        div.meta-secondline
+            if theme.post.meta.date
+                span.post-meta-date(title="发布于")
+                    i.post-meta-icon.scoicon.sco-calendar-todo-fill
+                    time.datetime=moment(page.date).format()
+            if theme.post.meta.updated
+                span.post-meta-date(title="最后更新于")
+                    i.post-meta-icon.scoicon.sco-refresh-fill
+                    time.datetime=moment(page.updated).format()
+            if theme.thirdparty.wordcount
+                span.post-meta-wordcount
+                    if theme.post.meta.wordcount
+                        i.post-meta-icon.scoicon.sco-word-fill(title="文章字数")
+                        span.word-count= wordcount(page.content)
+                    span.post-meta-separator
+                    if theme.post.meta.readtime
+                        i.post-meta-icon.scoicon.sco-clock-fill(title="阅读耗时")
+                        span= min2read(page.content) + " min"
+            if theme.post.meta.locate
+                span.post-meta-position(title="作者IP归属地为"+page.locate)
+                    i.post-meta-icon.scoicon.sco-map-pin-fill
+                    span= page.locate
+            if theme.thirdparty.busuanzi.enable && theme.post.meta.pv
+                a.post-meta-pv(href=url_for(page.path), title="文章热度")
+                    i.post-meta-icon.scoicon.sco-fire-fill
+                    if theme.thirdparty.busuanzi.usecomment
+                        span#twikoo_visitors
+                            i.scoicon.sco-loading-line
+                    else
+                        span#busuanzi_value_page_pv
+                            i.scoicon.sco-loading-line
+            if theme.post.meta.comment && page.comment
+                span.post-meta-commentcount(title="评论数", onclick="sco.scrollTo('post-comment')")
+                  i.scoicon.sco-chat-fill
+                  a(href=url_for(page.path) + "#post-comment")
+                    span#twikoo-count
+                      i.scoicon.sco-loading-line
+include ./wave
\ No newline at end of file
diff --git a/layout/includes/widgets/post/postNav.pug b/layout/includes/widgets/post/postNav.pug
new file mode 100644
index 00000000..0439ebef
--- /dev/null
+++ b/layout/includes/widgets/post/postNav.pug
@@ -0,0 +1,25 @@
+nav.needEndHide.pagination-post#pagination
+    if page.prev && page.next
+        div.prev-post.pull-left
+            a(href=url_for(page.prev.path))
+                div.pagination-info
+                    div.label 上一篇
+                    div.prev_info= page.prev.title
+        div.next-post.pull-right
+            a(href=url_for(page.next.path))
+                div.pagination-info
+                    div.label 下一篇
+                    div.next_info= page.next.title
+    else
+        if !page.prev && page.next
+            div.next-post.pull-full
+                a(href=url_for(page.next.path))
+                    div.pagination-info
+                        div.label 下一篇
+                        div.next_info= page.next.title
+        if !page.next && page.prev
+            div.prev-post.pull-full
+                a(href=url_for(page.prev.path))
+                    div.pagination-info
+                        div.label 上一篇
+                        div.prev_info= page.prev.title
\ No newline at end of file
diff --git a/layout/includes/widgets/post/wave.pug b/layout/includes/widgets/post/wave.pug
new file mode 100644
index 00000000..5feccb9d
--- /dev/null
+++ b/layout/includes/widgets/post/wave.pug
@@ -0,0 +1,9 @@
+section.main-hero-waves-area.waves-area
+    svg.waves-svg(xmlns="http://www.w3.org/2000/svg", xlink="http://www.w3.org/1999/xlink", viewBox="0 24 150 28", preserveAspectRatio="none", shape-rendering="auto")
+        defs
+            path#gentle-wave(d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z")
+        g.parallax
+            use(href="#gentle-wave", x="48", y="0")
+            use(href="#gentle-wave", x="48", y="3")
+            use(href="#gentle-wave", x="48", y="5")
+            use(href="#gentle-wave", x="48", y="7")
\ No newline at end of file
diff --git a/layout/includes/widgets/randomlink.pug b/layout/includes/widgets/randomlink.pug
new file mode 100644
index 00000000..172047d9
--- /dev/null
+++ b/layout/includes/widgets/randomlink.pug
@@ -0,0 +1,32 @@
+- var datalinks = []
+- var data = site.data.links.links
+if(data)
+    each item in data
+        if item.type === "item"
+            each y in item.link_list
+                - datalinks.push({ name: y.name,link: y.link})
+
+script.
+    const links = !{JSON.stringify(datalinks)}
+    function travelling() {
+        const link = links[utils.randomNum(links.length)];
+        utils.snackbarShow('您即将前往 ⌈ ' + link.name + ' ⌋ , 安全性未知', false, 3000);
+        setTimeout(() => {
+            window.open(link.link, "_blank")
+        }, 3000)
+    }
+
+if theme.footer.randomlink
+    script.
+        function randomLinksList(){
+            let data='';
+            let linksCopy = [...links];
+            let count = Math.min(3, linksCopy.length);
+            for (let i = 0; i < count; i++) {
+                let index = utils.randomNum(linksCopy.length);
+                const link = linksCopy[index];
+                data += '<a class="footer-item" href="' + link.link + '" target="_blank" rel="noopener nofollow">' + link.name + '</a>';
+                linksCopy.splice(index, 1);
+            }
+            document.getElementById('friend-links-in-footer').innerHTML = data + '<a class="footer-item" href="/links/">更多</a>';
+        }
\ No newline at end of file
diff --git a/layout/includes/widgets/rightside/index.pug b/layout/includes/widgets/rightside/index.pug
new file mode 100644
index 00000000..5f33d321
--- /dev/null
+++ b/layout/includes/widgets/rightside/index.pug
@@ -0,0 +1,74 @@
+div#rightMenu
+    div.rightMenu-group.rightMenu-small
+        div.rightMenu-item#menu-backward
+            i.scoicon.sco-arrow-left-line
+        div.rightMenu-item#menu-forward
+            i.scoicon.sco-arrow-right-line
+        div.rightMenu-item#menu-refresh
+            i.scoicon.sco-restart-line(style="font-size: 19px;")
+        div.rightMenu-item#menu-top
+            i.scoicon.sco-arrow-up-line
+    div.rightMenu-group.rightMenu-line.rightMenuPlugin
+        div.rightMenu-item#menu-copytext
+            i.scoicon.sco-copy-fill
+            span 复制选中文本
+        div.rightMenu-item#menu-pastetext
+            i.scoicon.sco-clipboard-fill
+            span 粘贴文本
+        a.rightMenu-item#menu-commenttext(data-pjax-state="")
+            i.scoicon.sco-chat-new-fill
+            span 引用到评论
+        div.rightMenu-item#menu-newwindow
+            i.scoicon.sco-window-fill
+            span 新窗口打开
+        div.rightMenu-item#menu-copylink
+            i.scoicon.sco-link-line
+            span 复制链接地址
+        div.rightMenu-item#menu-copyimg
+            i.scoicon.sco-copy-fill
+            span 复制此图片
+        div.rightMenu-item#menu-downloadimg
+            i.scoicon.sco-download-cloud-fill
+            span 下载此图片
+        div.rightMenu-item#menu-search
+            i.scoicon.sco-search-line
+            span 站内搜索
+        div.rightMenu-item#menu-searchBaidu
+            i.scoicon.sco-baidu-fill
+            span 百度搜索
+        div.rightMenu-item#menu-music-toggle
+            i.scoicon.sco-play-fill
+            span 播放音乐
+        div.rightMenu-item#menu-music-back
+            i.scoicon.sco-skip-back-fill
+            span 切换到上一首
+        div.rightMenu-item#menu-music-forward
+            i.scoicon.sco-skip-forward-fill
+            span 切换到下一首
+        div.rightMenu-item#menu-music-playlist(onclick=`window.open('${theme.thirdparty.aplayer.server === 'tencent' ? `https://y.qq.com/n/ryqq/playlist/${theme.thirdparty.aplayer.id}` : `https://music.163.com/#/playlist?id=${theme.thirdparty.aplayer.id}`}', '_blank');`)
+            i.scoicon.sco-play-list-2-line
+            span 查看所有歌曲
+        div.rightMenu-item#menu-music-copyMusicName
+            i.scoicon.sco-copy-fill
+            span 复制歌名
+    div.rightMenu-group.rightMenu-line.rightMenuOther
+        a.rightMenu-item.menu-Link#menu-randomPost(data-pjax-state="")
+            i.scoicon.sco-signal-tower-fill
+            span 随便逛逛
+        a.rightMenu-item.menu-link(href="/categories/", data-pjax-state="")
+            i.scoicon.sco-checkbox-multiple-blank-fill
+            span 博客分类
+        a.rightMenu-item.menu-link(href="/tags/", data-pjax-state="")
+            i.scoicon.sco-price-tag-fill
+            span 文章标签
+    div.rightMenu-group.rightMenu-line.rightMenuOther
+        div.rightMenu-item#menu-copy
+            i.scoicon.sco-external-link-fill
+            span 复制地址
+        div.rightMenu-item#menu-commentBarrage
+            i.scoicon.sco-chat-fill
+            span.menu-commentBarrage-text 关闭热评
+        div.rightMenu-item#menu-darkmode
+            i.scoicon.sco-moon-clear-fill
+            span.menu-darkmode-text 浅色模式
+div#rightmenu-mask
\ No newline at end of file
diff --git a/layout/includes/widgets/third-party/comments/comment.pug b/layout/includes/widgets/third-party/comments/comment.pug
new file mode 100644
index 00000000..103b96fa
--- /dev/null
+++ b/layout/includes/widgets/third-party/comments/comment.pug
@@ -0,0 +1,14 @@
+div#post-comment(view-image)
+    .comment-head
+        .comment-headline
+            i.scoicon.sco-chat-fill
+            span  评论
+    .comment-wrap
+        #comment
+        case theme.comment.type
+            when 'twikoo'
+                include ./twikoo.pug
+            when 'gitalk'
+                include ./gitalk.pug
+            when 'valine'
+                include ./valine.pug
\ No newline at end of file
diff --git a/layout/includes/widgets/third-party/comments/gitalk.pug b/layout/includes/widgets/third-party/comments/gitalk.pug
new file mode 100644
index 00000000..e69de29b
diff --git a/layout/partial/compoment/third-party/comments/twikoo.ejs b/layout/includes/widgets/third-party/comments/twikoo.pug
old mode 100755
new mode 100644
similarity index 63%
rename from layout/partial/compoment/third-party/comments/twikoo.ejs
rename to layout/includes/widgets/third-party/comments/twikoo.pug
index 33a749ca..242fa1fc
--- a/layout/partial/compoment/third-party/comments/twikoo.ejs
+++ b/layout/includes/widgets/third-party/comments/twikoo.pug
@@ -1,19 +1,19 @@
-<script>
+script.
     async function initComment(){
         var initOptions = Object.assign(
-            <%- JSON.stringify(theme.comment.twikoo || {}) %>,
+            !{JSON.stringify(theme.comment.twikoo || {})},
             {
                 el: '#comment',
                 onCommentLoaded: function() {
-                    GLOBALCONFIG.lightbox && sco.lightbox('#article-container img, #twikoo .tk-content img:not(.tk-owo-emotion)')
+                    GLOBAL_CONFIG.lightbox && sco.lightbox('#article-container img, #twikoo .tk-content img:not(.tk-owo-emotion)')
                 },
-                lang: '<%= theme.comment.twikoo.lang %>',
+                lang: '#{theme.comment.twikoo.lang}',
             }
         )
         await twikoo.init(initOptions)
-        <% if(theme.post.meta.comment && is_post()){ %>
+        if (#{theme.post.meta.comment && is_post()}) {
             var countOptions = Object.assign(
-                <%- JSON.stringify(theme.comment.twikoo || {}) %>,
+                !{JSON.stringify(theme.comment.twikoo || {})},
                 {
                     urls: [window.location.pathname],
                     includeReply: false
@@ -25,6 +25,5 @@
             }catch (e) {
                 document.getElementById('twikoo-count').innerText = '加载错误'
             }
-        <% } %>
-    }
-</script>
\ No newline at end of file
+        }
+    }
\ No newline at end of file
diff --git a/layout/includes/widgets/third-party/comments/valine.pug b/layout/includes/widgets/third-party/comments/valine.pug
new file mode 100644
index 00000000..e69de29b
diff --git a/layout/includes/widgets/third-party/music.pug b/layout/includes/widgets/third-party/music.pug
new file mode 100644
index 00000000..274f76c9
--- /dev/null
+++ b/layout/includes/widgets/third-party/music.pug
@@ -0,0 +1,3 @@
+div.needEndHide#nav-music(onclick="sco.musicToggle()")
+    div#nav-music-hoverTips= "音乐已暂停"
+    meting-js(id=theme.thirdparty.aplayer.id, server=theme.thirdparty.aplayer.server, type="playlist", mutex="true", preload="none", data-lrctype="0", order="random", theme="var(--sco-main)")
\ No newline at end of file
diff --git a/layout/includes/widgets/third-party/pjax.pug b/layout/includes/widgets/third-party/pjax.pug
new file mode 100644
index 00000000..ff535a51
--- /dev/null
+++ b/layout/includes/widgets/third-party/pjax.pug
@@ -0,0 +1,30 @@
+script.
+    let pjaxSelectors = [
+        'title',
+        '#body-wrap',
+        '#site-config',
+        'meta[name="description"]',
+        '#js-pjax'
+    ]
+
+    const pjax = new Pjax({
+        elements: 'a:not([target="_blank"])',
+        selectors: pjaxSelectors,
+        cacheBust: false,
+        analytics: false,
+        scrollRestoration: false
+    })
+
+    document.querySelectorAll('script[data-pjax]').forEach(item => {
+        const newScript = document.createElement('script')
+        const content = item.text || item.textContent || item.innerHTML || ""
+        Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
+        newScript.appendChild(document.createTextNode(content))
+        item.parentNode.replaceChild(newScript, item)
+    })
+
+    document.addEventListener('pjax:error', (e) => {
+        if (e.request.status === 404) {
+            pjax.loadUrl('/404.html')
+        }
+    })
\ No newline at end of file
diff --git a/layout/includes/widgets/third-party/search/algolia-search.pug b/layout/includes/widgets/third-party/search/algolia-search.pug
new file mode 100644
index 00000000..4b6e6703
--- /dev/null
+++ b/layout/includes/widgets/third-party/search/algolia-search.pug
@@ -0,0 +1,13 @@
+div#algolia-search
+    div.search-dialog
+        nav.search-nav
+            span.search-dialog-title 搜索
+            button.search-close-button
+                i.scoicon.sco-close-fill
+        div.search-wrap
+            div.search-box#search-input
+            div#search-results
+                div#algolia-hits
+                div.algolia-stats
+                div.algolia-poweredBy
+    div#search-mask
diff --git a/layout/includes/widgets/third-party/search/index.pug b/layout/includes/widgets/third-party/search/index.pug
new file mode 100644
index 00000000..ed86a4c5
--- /dev/null
+++ b/layout/includes/widgets/third-party/search/index.pug
@@ -0,0 +1,7 @@
+if theme.thirdparty.search.enable
+    if theme.thirdparty.search.type==="algolia"
+        include ./algolia-search.pug
+        script(src="/js/extend/search/algolia-search.js")
+    else if theme.thirdparty.search.type === "local"
+        include ./local-search.pug
+        script(src="/js/extend/search/local-search.js")
\ No newline at end of file
diff --git a/layout/includes/widgets/third-party/search/local-search.pug b/layout/includes/widgets/third-party/search/local-search.pug
new file mode 100644
index 00000000..6917d2f6
--- /dev/null
+++ b/layout/includes/widgets/third-party/search/local-search.pug
@@ -0,0 +1,15 @@
+div#local-search
+    div.search-dialog
+        nav.search-nav
+            span.search-dialog-title 搜索
+            button.search-close-button
+                i.scoicon.sco-close-fill
+        div#loading-database
+            i.scoicon.sco-loading-line
+            span 加载中
+        div.search-wrap
+            div.search-box
+                input.search-box-input(type="text", id="search-input", autocomplete="off", spellcheck="false", autocorrect="off", autocapitalize="off", placeholder=__('search.placeholder'))
+            div#loading-status
+            div#search-results
+    div#search-mask
\ No newline at end of file
diff --git a/layout/index.ejs b/layout/index.ejs
deleted file mode 100755
index 14c04ed1..00000000
--- a/layout/index.ejs
+++ /dev/null
@@ -1,20 +0,0 @@
-<div id="home_top">
-    <% if(theme.says.home_mini){ %>
-        <%- partial('partial/compoment/hometop/bbTimeList') %>
-    <% } %>
-    <% if(theme.hometop.banner.enable){ %>
-        <%- partial('partial/hometop') %>
-    <% } %>
-</div>
-<main class="layout" id="content-inner">
-    <div class="recent-posts" id="recent-posts">
-        <div id="category-bar">
-            <%- partial('partial/compoment/home/homeCategoryBar', {select:false}) %>
-        </div>
-        <% for (const item of page.posts.sort('-date').data){ %>
-            <%- partial('partial/compoment/home/postList', {post: item}) %>
-        <% } %>
-        <%- partial('partial/compoment/mixins/pagination') %>
-    </div>
-    <%- partial('partial/compoment/aside/aside') %> 
-</main>     
\ No newline at end of file
diff --git a/layout/index.pug b/layout/index.pug
new file mode 100644
index 00000000..f776ead9
--- /dev/null
+++ b/layout/index.pug
@@ -0,0 +1,20 @@
+extends includes/layout.pug
+
+block content
+    div#home_top
+        if(theme.says.home_mini)
+            include ./includes/widgets/home/bbTimeList.pug
+        if(theme.hometop.banner.enable)
+            include ./includes/widgets/home/hometop.pug
+    main(class="layout", id="content-inner")
+        div(class="recent-posts", id="recent-posts")
+            div#category-bar
+                include ./includes/widgets/home/categoryBar.pug
+
+            include ./includes/widgets/home/postList.pug
+
+            // pageination
+            include ./includes/mixins/pagination.pug
+
+        // aside
+        include ./includes/widgets/aside/aside.pug
\ No newline at end of file
diff --git a/layout/layout.ejs b/layout/layout.ejs
deleted file mode 100755
index f7f216e2..00000000
--- a/layout/layout.ejs
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="<%= config.language %>" data-theme="light">
-<head>
-    <%- partial('partial/head', {cache: true}) %>
-</head>
-<body id="body">
-<% if(theme.loading.fullpage){ %>
-    <%- partial('partial/loading', {cache: true}) %>
-<% } %>
-<%- partial('partial/console', {cache: true}) %>
-<%- partial('partial/sidebar', {cache: true}) %>
-
-<% if(page.type !== '404'){ %>
-    <div class="<%= is_post() ? 'post' : 'page' %>" id="body-wrap">
-        <%- partial('partial/header') %>
-        <%- body %>
-        <footer id="footer">
-            <%- partial('partial/footer', {cache: true}) %>
-        </footer>
-    </div>
-<% }else{ %>
-    <div class="error" id="body-wrap">
-        <%- body %>
-    </div>
-<% } %>
-<%- partial('partial/body', {cache: true}) %>
-<%- partial('partial/compoment/third-party/search/index', {cache: true}) %>
-<%- partial('partial/compoment/third-party/music', {cache: true}) %>
-</body>
-</html>
\ No newline at end of file
diff --git a/layout/page.ejs b/layout/page.ejs
deleted file mode 100755
index 43b8a524..00000000
--- a/layout/page.ejs
+++ /dev/null
@@ -1,45 +0,0 @@
-<main class="layout <%= page.aside ? '' : 'hide-aside' %>" id="content-inner">
-    <div id="page">
-        <% switch (page.type) {
-            case 'categories': %>
-                <%- partial('page/categories') %>
-            <% break;
-            case 'tags': %>
-            <%- partial('page/tags') %>
-            <% break;
-            case 'links': %>
-                <%- partial('page/links') %>
-			<% break;
-            case 'tlink': %>
-                <%- partial('page/tlink') %>
-            <% break;
-			case 'about': %>
-			    <%- partial('page/about') %>
-            <% break;
-            case 'says': %>
-                <%- partial('page/says') %>
-            <% break;
-            case 'equipment': %>
-                <%- partial('page/equipment') %>
-            <% break;
-            case 'circle': %>
-                <%- partial('page/circle') %>
-            <% break;
-            case 'echarts': %>
-                <%- partial('page/echarts') %>
-            <% break;
-            case 'rss': %>
-                <%- partial('page/rss') %>
-            <% break;
-            default: %>
-                <%- partial('page/page') %>
-            <% break;
-        } %>
-        <% if(page.comment){ %>
-            <%- partial('partial/compoment/third-party/comments/comment') %>
-        <% } %>
-    </div>
-    <% if(page.aside){ %>
-        <%- partial('partial/compoment/aside/aside') %>
-    <% } %>
-</main>     
diff --git a/layout/page.pug b/layout/page.pug
new file mode 100644
index 00000000..32d8b4df
--- /dev/null
+++ b/layout/page.pug
@@ -0,0 +1,32 @@
+extends includes/layout.pug
+
+block content
+  main.layout(class=page.aside ? '' : 'hide-aside', id='content-inner')
+    div#page
+      case page.type
+        when 'categories'
+          include includes/page/categories
+        when 'tags'
+          include includes/page/tags
+        when 'links'
+          include includes/page/links
+        when 'tlink'
+          include includes/page/tlink
+        when 'about'
+          include includes/page/about
+        when 'says'
+          include includes/page/says
+        when 'equipment'
+          include includes/page/equipment
+        when 'moments'
+          include includes/page/moments
+        when 'echarts'
+          include includes/page/echarts
+        when 'rss'
+          include includes/page/rss
+        default
+          include includes/page/default
+      if page.comment
+        include includes/widgets/third-party/comments/comment
+    if page.aside
+      include includes/widgets/aside/aside
\ No newline at end of file
diff --git a/layout/page/about.ejs b/layout/page/about.ejs
deleted file mode 100755
index b921a2df..00000000
--- a/layout/page/about.ejs
+++ /dev/null
@@ -1,15 +0,0 @@
-<% if (theme.about) { %>
-<div id="about-page">
-    <%- partial('partial/compoment/about/authorinfo' ) %>
-    <%- partial('partial/compoment/about/contentinfo' ) %>
-    <%- partial('partial/compoment/about/skillsinfo' ) %>
-    <%- partial('partial/compoment/about/personalities' ) %>
-    <%- partial('partial/compoment/about/motto' ) %>
-    <%- partial('partial/compoment/about/hobbies' ) %>
-    <%- partial('partial/compoment/about/other' ) %>
-    <%- partial('partial/compoment/about/award' ) %>
-</div>
-<% if(theme.thirdparty.echarts.enable){%>
-    <%- js(theme.thirdparty.echarts.js) %>
-<%} %>
-<% } %>
diff --git a/layout/page/categories.ejs b/layout/page/categories.ejs
deleted file mode 100755
index 2cda85de..00000000
--- a/layout/page/categories.ejs
+++ /dev/null
@@ -1,12 +0,0 @@
-<h1 class="page-title" style="display: inline"><%= __('page.category') %></h1>
-<div class="category-lists">
-    <div class="tag-cloud-list is-center">
-        <% site.categories.each(function (item) { %>
-            <a href="<%= url_for(item.path) %>">
-                <span class="tags-punctuation"></span>
-                <%= item.name %>
-                <span class="tagsPageCount"><%= item.length %></span>
-            </a>
-        <% }) %>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/page/circle.ejs b/layout/page/circle.ejs
deleted file mode 100755
index a0d2ddeb..00000000
--- a/layout/page/circle.ejs
+++ /dev/null
@@ -1,5 +0,0 @@
-<%- partial('partial/compoment/circle/banner') %>
-<% if(theme.thirdparty.circle.angle.enable){ %>
-    <%- partial('partial/compoment/circle/angle') %>
-<% } %>
-<%- partial('partial/compoment/circle/content') %>
\ No newline at end of file
diff --git a/layout/page/echarts.ejs b/layout/page/echarts.ejs
deleted file mode 100755
index d40f6beb..00000000
--- a/layout/page/echarts.ejs
+++ /dev/null
@@ -1 +0,0 @@
-<%- page.content %>
\ No newline at end of file
diff --git a/layout/page/equipment.ejs b/layout/page/equipment.ejs
deleted file mode 100755
index 8f67b164..00000000
--- a/layout/page/equipment.ejs
+++ /dev/null
@@ -1,2 +0,0 @@
-<%- partial('partial/compoment/equipment/banner') %>
-<%- partial('partial/compoment/equipment/list') %>
diff --git a/layout/page/links.ejs b/layout/page/links.ejs
deleted file mode 100755
index e6ea2ce1..00000000
--- a/layout/page/links.ejs
+++ /dev/null
@@ -1,46 +0,0 @@
-<div class="flink" id="banners">
-    <%- partial('partial/compoment/links/banner') %>
-</div>
-<% if(theme.thirdparty.circle.angle.enable){ %>
-    <%- partial('partial/compoment/links/angle') %>
-<% } %>
-<div class="flink" id="article-container">
-    <% site.data.links.links.forEach(data => { %>
-        <h2><%= data.class_name %></h2>
-        <div class="flink-desc"><%= data.descr %></div>
-        <% switch (data.type) {
-        case 'card': %>
-        <%- partial('partial/compoment/links/linksCard', {data: data.link_list}) %>
-        <% break;
-        case 'item': %>
-        <%- partial('partial/compoment/links/linksItem', {data: data.link_list}) %>
-        <% break;
-        default: %>
-        <% break; } %>
-    <% }); %>
-</div>
-<h3 align="end">——本站友链排序不分先后，所有站点都值得一看。</h3>
-<% if(theme.comment.enable){ %>
-    <h2 id="友情链接申请">友情链接申请</h2>
-    <div id="article-container">
-        <%- page.content %>
-    </div>
-    <p>请<b>勾选</b>你符合的条件：</p>
-    <div id="friendlink_checkboxs">
-        <p>
-            <label><input type="checkbox" id="checkbox1" onclick="checkForm()"> 我已添加 <b><%= config.title %></b>
-                博客的友情链接</label>
-        </p>
-        <p>
-            <label><input type="checkbox" id="checkbox2" onclick="checkForm()"> 我的链接主体为
-                <b>个人</b>，网站类型为<b>博客</b></label>
-        </p>
-        <p>
-            <label><input type="checkbox" id="checkbox3" onclick="checkForm()">
-                我的网站现在可以在中国大陆区域正常访问</label>
-        </p>
-        <p>
-            <label><input type="checkbox" id="checkbox4" onclick="checkForm()"> 网站内容符合中国大陆法律法规</label>
-        </p>
-    </div>
-<% } %>
\ No newline at end of file
diff --git a/layout/page/not_configured.ejs b/layout/page/not_configured.ejs
deleted file mode 100644
index 950053dd..00000000
--- a/layout/page/not_configured.ejs
+++ /dev/null
@@ -1,13 +0,0 @@
-<style>
-    .not-configured {
-        display: flex;
-        justify-content: center;
-        font-size: 18px;
-        font-weight: bold
-    }
-    .not-configured strong {
-        padding: 0 4px;
-        border-bottom: 2px dotted var(--sco-lighttext)
-    }
-</style>
-<div class="not-configured">请前往<strong>主题配置文件</strong>进行配置</div>
\ No newline at end of file
diff --git a/layout/page/page.ejs b/layout/page/page.ejs
deleted file mode 100755
index 3c9c3900..00000000
--- a/layout/page/page.ejs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id="article-container">
-    <%- page.content %>
-</div>
\ No newline at end of file
diff --git a/layout/page/rss.ejs b/layout/page/rss.ejs
deleted file mode 100755
index ba2fdd9b..00000000
--- a/layout/page/rss.ejs
+++ /dev/null
@@ -1,39 +0,0 @@
-<main class="layout hide-aside" id="content-inner">
-    <div id="page">
-        <div class="rss-plan-list">
-            <a class="rss-plan-item rss-plan-wechat" href="<%- theme.footer.rss.wechatOA %>" title="公众号"
-               target="_blank">
-                <div class="rss-plan-description">推送精选文章<br>推送全文</div>
-                <div class="rss-plan-info-group">
-                    <div class="rss-plan-title">公众号订阅</div>
-                    <div class="rss-plan-info">推荐的订阅方式</div>
-                    <img class="rss-plan-icon" src="https://bu.dusays.com/2023/11/01/6541d14a4de78.png" alt="wechat">
-                </div>
-            </a>
-            <a class="rss-plan-item rss-plan-mail" href="<%- theme.footer.rss.emailOA %>" rel="external nofollow"
-               title="email" target="_blank">
-                <div class="rss-plan-description">推送全部文章<br>推送封面与简介</div>
-                <div class="rss-plan-info-group">
-                    <div class="rss-plan-title">邮件订阅</div>
-                    <div class="rss-plan-info">推荐的订阅方式</div>
-                    <img class="rss-plan-icon" src="https://bu.dusays.com/2023/11/01/6541d16c3ea22.png" alt="email">
-                </div>
-            </a><a class="rss-plan-item rss-plan-rss" href="<%- theme.footer.rss.rssOA %>" title="rss" target="_blank">
-                <div class="rss-plan-description">推送全部文章<br>推送简介</div>
-                <div class="rss-plan-info-group">
-                    <div class="rss-plan-title">RSS</div>
-                    <div class="rss-plan-info">备用订阅方式</div>
-                    <img class="rss-plan-icon" src="https://bu.dusays.com/2023/11/01/6541d184e2a09.png" alt="rss">
-                </div>
-            </a></div>
-        <%- page.content %>
-
-        <% if(page.comment){ %>
-            <%- partial('partial/compoment/third-party/comments/comment') %>
-        <% } %>
-    </div>
-
-    <% if(page.aside){ %>
-        <%- partial('partial/compoment/aside/aside') %>
-    <% } %>
-</main>
\ No newline at end of file
diff --git a/layout/page/says.ejs b/layout/page/says.ejs
deleted file mode 100755
index 0c8af7b3..00000000
--- a/layout/page/says.ejs
+++ /dev/null
@@ -1,26 +0,0 @@
-<% if (theme.says.enable === false) { %>
-    <%- partial('not_configured') %>
-<% } else { %>
-    <%- partial('partial/compoment/says/banner') %>
-    <div id="bber">
-        <section class="timeline page-1">
-            <ul class="list" id="waterfall">
-                <% for(let i in site.data.essay.essay_list){ %>
-                    <% const item = site.data.essay.essay_list[i];if(i >= 30)break; %>
-                    <li class="item">
-                        <% if (theme.says.style === 2) { %>
-                            <%- partial('partial/compoment/says/saysMeta', {item:item}) %>
-                        <% } %>
-                        <%- partial('partial/compoment/says/saysContent', {item:item}) %>
-                        <%- partial('partial/compoment/says/saysFunction', {item:item}) %>
-                        <% if (theme.says.style === 1) { %>
-                            <hr>
-                            <%- partial('partial/compoment/says/saysBottom', {item:item}) %>
-                        <% } %>
-                    </li>
-                <% }; %>
-            </ul>
-        </section>
-    </div>
-    <div id="bber-tips" style="color: var(--sco-secondtext);">- 只展示最近30条短文 -</div>
-<% } %>
\ No newline at end of file
diff --git a/layout/page/tags.ejs b/layout/page/tags.ejs
deleted file mode 100755
index 82c68928..00000000
--- a/layout/page/tags.ejs
+++ /dev/null
@@ -1,12 +0,0 @@
-<h1 class="page-title" style="display: inline-block"><%= __('page.tag') %></h1>
-<div class="category-lists">
-    <div class="tag-cloud-list is-center">
-        <% site.tags.each(function (tag) { %>
-            <a href="<%= url_for(tag.path) %>">
-                <span class="tags-punctuation"></span>
-                <%= tag.name %>
-                <span class="tagsPageCount"><%= tag.length %></span>
-            </a>
-        <% }) %>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/page/tlink.ejs b/layout/page/tlink.ejs
deleted file mode 100755
index f46abb4c..00000000
--- a/layout/page/tlink.ejs
+++ /dev/null
@@ -1,11 +0,0 @@
-<%- partial('partial/compoment/tlink/banner') %>
-<div class="flink" id="article-container">
-    <% site.data.tlink.links.forEach(data => { %>
-        <h2><%= data.class_name %></h2>
-        <div class="flink-desc"><%= data.descr %></div>
-        <%- partial('partial/compoment/links/linksItem', {data: data.link_list}) %>
-    <% }); %>
-</div>
-<div id="article-container">
-    <%- page.content %>
-</div>
\ No newline at end of file
diff --git a/layout/partial/body.ejs b/layout/partial/body.ejs
deleted file mode 100755
index 87a6bf03..00000000
--- a/layout/partial/body.ejs
+++ /dev/null
@@ -1,7 +0,0 @@
-<div>
-    <%- partial('partial/compoment/inject/body', {cache: true}) %>
-    <%- partial('partial/compoment/third-party/pjax', {cache: true}) %>
-    <% if (theme.extends.body) for (const i of theme.extends.body){ %>
-        <%- i %>
-    <% } %>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/about/authorinfo.ejs b/layout/partial/compoment/about/authorinfo.ejs
deleted file mode 100755
index de633bcf..00000000
--- a/layout/partial/compoment/about/authorinfo.ejs
+++ /dev/null
@@ -1,18 +0,0 @@
-<% const authorinfo = site.data.about.authorinfo; %>
-
-<div class="author-info">
-  <div class="author-tag-left">
-    <% authorinfo.leftTags.forEach(tag => { %>
-      <span class="author-tag"><%= tag %></span>
-    <% }); %>
-  </div>
-  <div class="author-img">
-    <img src="<%= authorinfo.image %>" >
-  </div>
-  <div class="author-tag-right">
-    <% authorinfo.rightTags.forEach(tag => { %>
-      <span class="author-tag"><%= tag %></span>
-    <% }); %>
-  </div>
-</div>
-<div class="author-title">关于我</div>
diff --git a/layout/partial/compoment/about/award.ejs b/layout/partial/compoment/about/award.ejs
deleted file mode 100755
index 96d46b3c..00000000
--- a/layout/partial/compoment/about/award.ejs
+++ /dev/null
@@ -1,59 +0,0 @@
-<% let sum = 0; %>
-<% if(site.data.about.rewardList){ %>
-<div class="author-content">
-    <div class="author-content-item single reward">
-        <div class="author-content-item-tips">致谢</div>
-        <span class="author-content-item-title">赞赏名单</span>
-        <div class="author-content-item-description">
-            感谢赞赏的人，因为你们，让我感受到写博客这件事情能够给你们创造了价值。这会让我在这条路上走得更远。
-        </div>
-        <div class="reward-list-all">
-            <% site.data.about.rewardList.forEach(function(reward) {
-                sum += reward.money
-            %>
-            <div class="reward-list-item">
-                <div class="reward-list-item-name"><%= reward.name %></div>
-                <div class="reward-list-bottom-group">
-                    <div class="reward-list-item-money" <% if (reward.vip) { %>style="background: var(--sco-vip);"
-                            <% } %>
-                    >¥ <%= reward.money %></div>
-                    <time class="datatime reward-list-item-time" datetime="<%= moment(reward.time).format() %>"></time>
-                </div>
-            </div>
-            <% }); %>
-            <% if(theme.post.award.enable){ %>
-                <div class="post-reward">
-                    <div class="post-reward" onclick="AddRewardMask()"></div>
-                    <div class="reward-button" title="赞赏作者"><i class="scoicon sco-hand-heart-fill"></i> 打赏作者
-                    </div>
-                    <div class="reward-main">
-                        <ul class="reward-all">
-                            <span class="reward-title">感谢你赐予我前进的力量</span>
-                            <ul class="reward-group">
-                                <% var rewards = [
-                                    {image: theme?.post?.award?.wechat, description: '微信'},
-                                    {image: theme?.post?.award?.alipay, description: '支付宝'}
-                                ]; %>
-                                <% for (var i = 0; i < rewards.length; i++) { %>
-                                    <li class="reward-item">
-                                        <a href="<%= rewards[i].image %>" target="_blank">
-                                            <img class="post-qr-code-img" alt="<%= rewards[i].description %>"
-                                                 src="<%= rewards[i].image %>">
-                                        </a>
-                                        <div class="post-qr-code-desc">
-                                            <%= rewards[i].description %>
-                                        </div>
-                                    </li>
-                                <% } %>
-                            </ul>
-                        </ul>
-                    </div>
-                </div>
-            <% } %>
-        </div>
-        <div class="reward-list-tips">
-            <p>总金额：¥ <%- sum %>，将全部用于博客的维护</p>
-        </div>
-    </div>
-</div>
-<% } %>
diff --git a/layout/partial/compoment/about/contentinfo.ejs b/layout/partial/compoment/about/contentinfo.ejs
deleted file mode 100755
index be1cf4b2..00000000
--- a/layout/partial/compoment/about/contentinfo.ejs
+++ /dev/null
@@ -1,33 +0,0 @@
-<% const contentinfo = site.data.about.contentinfo; %>
-<div class="author-content">
-	<div class="author-content-item myInfoAndSayHello">
-		<div class="title1">你好，很高兴认识你👋</div>
-		<div class="title2">我叫 <span class="inline-word"><%= contentinfo.name %></span></div>
-		<div class="title1">是一名 <%= contentinfo.title %></div>
-	</div>
-	<div class="aboutsiteTips author-content-item">
-		<div class="author-content-item-tips">追求</div>
-		<h2>源于<br> 热爱而去<span class="inline-word">创造</span>
-			<div class="mask"><span class="first-tips" data-show=""><%= contentinfo.product %></span><span><%= contentinfo.design %></span><span><%= contentinfo.program %></span><span
-					data-up=""><%= contentinfo.user_experience %></span></div>
-		</h2>
-	</div>
-</div>
-<script>
-	var pursuitInterval = null;
-	pursuitInterval = setInterval(function () {
-	  const show = document.querySelector('span[data-show]')
-	  const next = show.nextElementSibling || document.querySelector('.first-tips')
-	  const up = document.querySelector('span[data-up]')
-	  if (up) {
-		up.removeAttribute('data-up')
-	  }
-	  show.removeAttribute('data-show')
-	  show.setAttribute('data-up', '')
-	  next.setAttribute('data-show', '')
-	}, 2000)
-
-	document.addEventListener('pjax:send', function(){
-	  clearInterval(pursuitInterval);
-	});
-  </script>
diff --git a/layout/partial/compoment/about/hobbies.ejs b/layout/partial/compoment/about/hobbies.ejs
deleted file mode 100755
index a5f5f5d6..00000000
--- a/layout/partial/compoment/about/hobbies.ejs
+++ /dev/null
@@ -1,53 +0,0 @@
-<div class="author-content">
-    <% if(site.data.about.game1){ %>
-        <div class="author-content-item game-apex"
-             style="background: url(<%- site.data.about.game1.img %>) no-repeat top; background-size: cover;">
-            <div class="card-content">
-                <div class="author-content-item-tips"><%= site.data.about.game1.title %></div>
-                <span class="author-content-item-title"><%= site.data.about.game1.subtitle %></span>
-                <div class="content-bottom">
-                    <div class="tips"><%= site.data.about.game1.tips_left %></div>
-                    <div class="tips"><%= site.data.about.game1.tips_right %></div>
-                </div>
-            </div>
-        </div>
-    <% } %>
-    <% if(site.data.about.game2){ %>
-        <div class="author-content-item game-jl"
-             style="background: url(<%= site.data.about.game2.img %>) no-repeat top; background-size: cover;">
-            <div class="card-content">
-                <div class="author-content-item-tips"><%= site.data.about.game2.title %></div>
-                <span class="author-content-item-title"><%= site.data.about.game2.subtitle %></span>
-                <div class="content-bottom">
-                    <div class="tips"><%= site.data.about.game2.tips_left %></div>
-                    <div class="tips"><%= site.data.about.game2.tips_right %></div>
-                </div>
-            </div>
-        </div>
-    <% } %>
-</div>
-<% if(site.data.about.likes){ %>
-    <% const likes = site.data.about.likes; %>
-    <div class="author-content">
-        <% likes.forEach(function(like) { %>
-            <div class="author-content-item <%= like.type %>" style="background: url(<%= like.bg %>) no-repeat center;">
-                <div class="card-content">
-                    <div class="author-content-item-tips"><%= like.tips %></div>
-                    <span class="author-content-item-title"><%= like.title %></span>
-                    <div class="content-bottom">
-                        <div class="tips"><%= like.subtips %></div>
-                        <% if(like.button){ %>
-                            <div class="banner-button-group">
-                                <a class="banner-button" href="<%= like.button_link %>" target="_blank"
-                                   rel="noopener nofollow">
-                                    <i class="scoicon sco-right-btn-fill"></i>
-                                    <span class="banner-button-text"><%= like.button_text %></span>
-                                </a>
-                            </div>
-                        <% } %>
-                    </div>
-                </div>
-            </div>
-        <% }); %>
-    </div>
-<% } %>
\ No newline at end of file
diff --git a/layout/partial/compoment/about/motto.ejs b/layout/partial/compoment/about/motto.ejs
deleted file mode 100755
index e6a01122..00000000
--- a/layout/partial/compoment/about/motto.ejs
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="author-content">
-    <% const motto = site.data.about.motto; %>
-    <div class="author-content-item maxim">
-        <div class="author-content-item-tips"><%= motto.title %></div>
-        <span class="maxim-title"><span
-                    style="opacity: 0.6;margin-bottom:8px;"><%= motto.prefix %></span><span><%= motto.content %></span></span>
-    </div>
-    <div class="author-content-item buff">
-        <% const expertise = site.data.about.expertise; %>
-        <div class="card-content">
-            <div class="author-content-item-tips"><%= expertise.title %></div>
-            <span class="buff-title"><span style="opacity: 0.6;margin-bottom:8px;"><%= expertise.prefix %><span
-                            class="inline-word"><%= expertise.specialist %></span></span><span><%= expertise.content %><span
-                            class="inline-word"><%= expertise.level %></span></span></span>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/about/other.ejs b/layout/partial/compoment/about/other.ejs
deleted file mode 100755
index 152efb55..00000000
--- a/layout/partial/compoment/about/other.ejs
+++ /dev/null
@@ -1,76 +0,0 @@
-<div class="author-content">
-    <% if(site.data.about.tj){ %>
-        <div class="about-statistic author-content-item" style="background: url(<%= site.data.about.tj.img %>);">
-            <div class="card-content">
-                <div class="author-content-item-tips">数据</div>
-                <span class="author-content-item-title">访问统计</span>
-                <div id="statistic"></div>
-                <div class="post-tips">
-                    统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6" target="_blank"
-                                    rel="noopener nofollow">51la网站统计</a>
-                </div>
-                <div class="banner-button-group">
-                    <a class="banner-button" onclick="pjax.loadUrl(&quot;/echart/&quot;)" data-pjax-state="">
-                        <i class="scoicon sco-right-btn-fill"></i>
-                        <span class="banner-button-text">文章统计</span>
-                    </a>
-                </div>
-            </div>
-        </div>
-        <script>
-            fetch("<%= site.data.about.tj.url %>")
-                .then(res => res.text())
-                .then(data => {
-                    let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
-                    let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);
-                    num = num.map(el => {
-                        let val = el.replace(/(<\/span><span>)/g, "");
-                        let str = val.replace(/(<\/span><\/p>)/g, "");
-                        return str;
-                    });
-                    let s = document.getElementById("statistic");
-                    let statistic = [];
-                    for (let i = 0; i < num.length; i++) {
-                        if (i == 0 || i == num.length - 1) continue;
-                        s.innerHTML += "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
-                    }
-                });
-        </script>
-    <% } %>
-    <% if(site.data.about.oneself){ %>
-        <style>
-            :root {
-                --site-about-oneself-map--light: url(<%= site.data.about.oneself.map.light %>);
-                --site-about-oneself-map--dark: url(<%= site.data.about.oneself.map.dark %>);
-            }
-        </style>
-        <% const oneself = site.data.about.oneself; %>
-        <div class="author-content-item-group column mapAndInfo">
-            <div class="author-content-item map single">
-                <span class="map-title">我现在住在 <b><%= oneself.location %></b></span></div>
-            <div class="author-content-item selfInfo single">
-                <div><span class="selfInfo-title">生于</span>
-                    <span class="selfInfo-content" style="color: #43a6c6;"><%= oneself.birthYear %></span>
-                </div>
-                <div>
-                    <span class="selfInfo-title"><%= oneself.university %></span>
-                    <span class="selfInfo-content" style="color: #c69043;"><%= oneself.major %></span>
-                </div>
-                <div>
-                    <span class="selfInfo-title">现在职业</span>
-                    <span class="selfInfo-content" style="color: #b04fe6;"><%= oneself.occupation %></span>
-                </div>
-            </div>
-        </div>
-    <% } %>
-</div>
-
-<% if(site.data.about.cause){ %>
-    <div class="author-content">
-        <div class="create-site-post author-content-item single">
-            <div class="author-content-item-tips">心路历程</div>
-            <span class="author-content-item-title">为什么建站？</span>
-            <%- site.data.about.cause %>
-        </div>
-    </div>
-<% } %>
diff --git a/layout/partial/compoment/about/personalities.ejs b/layout/partial/compoment/about/personalities.ejs
deleted file mode 100755
index 063a8cc8..00000000
--- a/layout/partial/compoment/about/personalities.ejs
+++ /dev/null
@@ -1,11 +0,0 @@
-<% const personalities = site.data.about.personalities; %>
-<div class="author-content">
-    <div class="author-content-item personalities">
-      <div class="author-content-item-tips"><%= personalities.tips %></div>
-      <span class="author-content-item-title"><%= personalities.title %></span>
-      <div class="title2" style="color: <%= personalities.color %>;"><%= personalities.type %></div>
-      <div class="image"><img src="<%= personalities.image %>"></div>
-      <div class="post-tips">在 <a href="https://www.16personalities.com/" target="_blank" rel="noopener nofollow"><%= personalities.linkText %></a> 了解更多关于 <a target="_blank" rel="noopener external nofollow" href="<%= personalities.typeLink %>"><%= personalities.typeName %></a></div>
-    </div>
-    <div class="author-content-item myphoto"><img class="author-content-img" src="<%= personalities.myphoto %>" alt="自拍"></div>
-  </div>
diff --git a/layout/partial/compoment/about/skillsinfo.ejs b/layout/partial/compoment/about/skillsinfo.ejs
deleted file mode 100755
index f8fa797a..00000000
--- a/layout/partial/compoment/about/skillsinfo.ejs
+++ /dev/null
@@ -1,62 +0,0 @@
-<div class="author-content">
- <% const skills = site.data.about.skills; %>
-    <div class="author-content-item skills">
-        <div class="card-content">
-        <div class="author-content-item-tips"><%= skills.title %></div>
-        <span class="author-content-item-title"><%= skills.subtitle %></span>
-        <div class="skills-style-group">
-            <div class="tags-group-all">
-            <div class="tags-group-wrapper">
-                <div class="tags-group-all">
-                    <div class="tags-group-wrapper" >
-                        <% for (let i = 0; i < 2; i++) { %>
-                            <% skills.tags.reduce(function(acc, tag, index) { %>
-                                <% if (index % 2 === 0) { %>
-                                    <% if (index !== 0) { %>
-                                    </div>
-                                    <% } %>
-                                    <div class="tags-group-icon-pair">
-                                <% } %>
-                                <div class="tags-group-icon" style="background:<%= tag.color %>">
-                                    <img src="<%= tag.icon %>" title="<%= tag.title %>">
-                                </div>
-                                <% if (index === skills.tags.length - 1) { %>
-                                    </div>
-                                <% } %>
-                            <% }, '') %>
-                        <% } %>
-                    </div>      
-                </div>
-            </div>
-            </div>
-            <div class="skills-list">
-            <% skills.tags.forEach(function(tag){ %>
-            <div class="skill-info">
-                <div class="skill-icon" style="background:<%= tag.color %>">
-                <img src="<%= tag.icon %>" title="<%= tag.title %>">
-                </div>
-                <div class="skill-name"> <span><%= tag.title %></span></div>
-            </div>
-            <% }); %>
-            <div class="etc">...</div>
-            </div>
-        </div>
-        </div>
-    </div>
-    <% const careers = site.data.about.careers; %>
-    <div class="author-content-item careers">
-        <div class="card-content">
-        <div class="author-content-item-tips"><%= careers.title %></div>
-        <span class="author-content-item-title"><%= careers.subtitle %></span>
-        <div class="careers-group">
-            <% careers.items.forEach(function(item) { %>
-            <div class="careers-item">
-                <div class="circle" style="background: <%= item.color %>"></div>
-                <div class="name"><%= item.school %>, <%= item.major %></div>
-            </div>
-            <% }); %>
-        </div>
-        <img class="author-content-img" src="<%= careers.image %>" alt="<%= careers.title %>">
-        </div>
-    </div>
-</div> 
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/aside.ejs b/layout/partial/compoment/aside/aside.ejs
deleted file mode 100755
index c32c6776..00000000
--- a/layout/partial/compoment/aside/aside.ejs
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="aside-content" id="aside-content">
-    <% 
-        var noSticky, Sticky;
-        if(is_home()){
-            noSticky = theme.aside.home.noSticky.split(',') 
-            Sticky = theme.aside.home.Sticky.split(',')    
-        }
-        if(is_post()){
-            noSticky = theme.aside.post.noSticky.split(',')   
-            Sticky = theme.aside.post.Sticky.split(',')   
-        }
-        if(is_page() || is_archive() || is_tag() || is_category()){
-            noSticky = theme.aside.page.noSticky.split(',')   
-            Sticky = theme.aside.page.Sticky.split(',') 
-        }
-    %>
-    <% if(noSticky)noSticky.forEach(item => { %>
-        <%- partial('partial/compoment/aside/asideSwitch', {item: item}) %>
-    <% }); %>
-    <div class="sticky_layout">
-        <% if(page.toc){ %>
-            <%- partial('partial/compoment/aside/asideToc') %>
-        <% } %>    
-        <% if(Sticky)Sticky.forEach(item => { %>
-            <%- partial('partial/compoment/aside/asideSwitch', {item: item}) %>
-        <% }); %>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideAllInfo.ejs b/layout/partial/compoment/aside/asideAllInfo.ejs
deleted file mode 100755
index 3d306a46..00000000
--- a/layout/partial/compoment/aside/asideAllInfo.ejs
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="card-widget card-tags card-archives card-webinfo card-allinfo">
-    <% if(theme.aside.tags.enable){ %>
-        <%- partial('partial/compoment/aside/asideTag', {cache: true}) %>
-    <% } %>
-    <% if(theme.aside.archive.enable){ %>
-        <hr>
-        <%- partial('partial/compoment/aside/asideArchive', {cache: true}) %>
-    <% } %>
-    <hr>
-    <%- partial('partial/compoment/aside/asideWebInfo', {cache: true}) %>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideArchive.ejs b/layout/partial/compoment/aside/asideArchive.ejs
deleted file mode 100644
index 285a1e5d..00000000
--- a/layout/partial/compoment/aside/asideArchive.ejs
+++ /dev/null
@@ -1,11 +0,0 @@
-<ul class="card-archive-list">
-    <% var type = locals.type ? locals.type : 'year'; %>
-    <% for(const [key, value] of Object.entries(getArchiveLength(type))){ %>
-        <li class="card-archive-list-item"><a class="card-archive-list-link" onclick="pjax.loadUrl('/archives/<%= key %>/')" data-pjax-state=""><span
-            class="card-archive-list-date"><%= key %></span>
-            <div class="card-archive-list-count-group"><span class="card-archive-list-count"><%= value %></span><span
-                    class="card-archive-list-count-unit">篇</span></div>
-            </a>
-        </li>
-    <% } %>    
-</ul>
diff --git a/layout/partial/compoment/aside/asideHistory.ejs b/layout/partial/compoment/aside/asideHistory.ejs
deleted file mode 100644
index c38be41e..00000000
--- a/layout/partial/compoment/aside/asideHistory.ejs
+++ /dev/null
@@ -1,49 +0,0 @@
-<% if(theme.aside.history.enable){ %>
-    <style>
-        .swiper-wrapper{
-            flex-direction: column
-        }
-        .history_slide {
-            text-align:left;
-            display: flex !important;
-            flex-direction:column;
-            align-items: flex-start
-        }
-        #history-baidu > .blog-slider__pagination{
-            display:none
-        }
-        .history_slide_time{
-            color: var(--sco-secondtext);
-            font-size: 14px;
-            font-style: italic;
-            font-weight: lighter
-        }
-        .history_slide_link {
-            line-height: 1.5;
-            -webkit-line-clamp: 2;
-            display: -webkit-box;
-            overflow: hidden;
-            -webkit-box-orient: vertical
-        }
-        .history_slide_link a{
-            color: var(--sco-main);
-            padding: 0 4px;
-            border-radius: 4px
-        }
-        .history_slide_link a:hover{
-            color: var(--sco-white);
-            background: var(--sco-main)
-        }
-    </style>
-    <div class="card-widget card-history">
-        <div class="item-headline">
-            <i class="<%- theme.aside.history.icon || 'scoicon sco-clock-fill' %>"></i>
-            <span><%- theme.aside.history.title || '那年今日' %></span>
-        </div>
-        <div id="history-baidu" style="height: 100px;overflow: hidden">
-            <div id="history-container" class="history_swiper-container" style="width: 100%;height: 100%;margin-top: 6px">
-                <div id="history_container_wrapper" class="swiper-wrapper" style="height:20px"></div>
-            </div>
-        </div>
-    </div>
-<% } %>
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideInfoCard.ejs b/layout/partial/compoment/aside/asideInfoCard.ejs
deleted file mode 100755
index baa716dc..00000000
--- a/layout/partial/compoment/aside/asideInfoCard.ejs
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="card-widget card-info">
-    <div class="card-content">
-        <div class="card-info-avatar is-center">
-            <div class="author-info__top-group">
-                <div class="author-info__sayhi" id="author-info__sayhi" onclick="sco.changeSayHelloText()">
-                    一日之计在于晨
-                </div>
-            </div>
-        </div>
-        <div class="avatar-img-group">
-            <img class="avatar-img" alt="avatar" src="<%= theme.aside.card.author.img %>">
-            <div class="avatar-sticker">
-                <svg class="avatar-sticker-img" alt="avatar" aria-hidden="true">
-                    <use xlink:href="<%= theme.aside.card.author.state %>"></use>
-                </svg>
-                <%- js(theme.aside.card.author.js) %>
-            </div>
-        </div>
-        <div class="author-info__description_group">
-            <div class="author-info__description"><%- theme.aside.card.content %></div>
-            <div class="author-info__description2"><%- theme.aside.card.content2 %></div>
-        </div>
-        <div class="author-info__bottom-group">
-            <a class="author-info__bottom-group-left" href="<% if(theme.about){ %>/about<% }else{ %>/<% } %>"
-               data-pjax-state="">
-                <div class="author-info__name">
-                    <%= config.author %>
-                </div>
-                <div class="author-info__desc"><%- config.subtitle %></div>
-            </a>
-            <div class="card-info-social-icons is-center">
-                <% for(const i in theme.aside.card.information){ %>
-                    <a class="social-icon" href="<%= url_for(theme.aside.card.information[i].url) %>" title="<%= i %>">
-                        <i class="<%= theme.aside.card.information[i].icon %>"></i>
-                    </a>
-                <% } %>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideNewestPost.ejs b/layout/partial/compoment/aside/asideNewestPost.ejs
deleted file mode 100755
index 4e8656f9..00000000
--- a/layout/partial/compoment/aside/asideNewestPost.ejs
+++ /dev/null
@@ -1,31 +0,0 @@
-<div class="card-widget card-recent-post">
-    <div class="item-headline">
-        <i class="scoicon sco-map-line"></i>
-        <span>最近发布</span>
-    </div>
-    <div class="aside-list">
-        <% let index = 1 %>
-        <% for (const post of site.posts.data.sort((a, b) => {
-            return b.date < a.date ? -1 : 1
-        })){ %>
-            <div class="aside-list-item">
-                <a class="thumbnail" href="<%= url_for(post.path) %>" title="<%= post.title %>">
-                    <img
-                        alt="<%= post.title %>"
-                        src="<%= post.cover %>">
-                </a>
-                <div class="content">
-                    <% post.categories.data.forEach(categories => { %>
-                        <a class="article-recent_post_categories" href="<%= url_for(post.path) %>">
-                            <%= categories.name %>
-                        </a>
-                    <% }) %>
-                    <a class="title" href="<%= url_for(post.path) %>" title="<%= post.title %>">
-                        <%= post.title %>
-                    </a>
-                </div>
-            </div>
-            <% index++;if(index > 5)break; %>    
-        <% } %>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asidePower.ejs b/layout/partial/compoment/aside/asidePower.ejs
deleted file mode 100755
index f9b23f94..00000000
--- a/layout/partial/compoment/aside/asidePower.ejs
+++ /dev/null
@@ -1,31 +0,0 @@
-<div class="card-widget card-power">
-    <% const data = site.data.afadian.links %>
-    <% const vip = data[Math.floor(Math.random() * data.length)] %>
-    <div class="item-headline">
-        <i class="scoicon sco-afdian-line"></i>
-        <span>爱发电赞助</span>
-        <a class="power-charge" href="<%= theme.aside.power.link %>" rel="external nofollow" target="_blank"
-           title="赞助博主">赞助</a>
-    </div>
-    <a id="power-star" data-pjax-state="" href="<%= vip.url %>">
-        <div id="power-star-image"
-             style="background-image: url('<%= vip.avatar %>');"></div>
-        <div class="power-star-body">
-            <div id="power-star-title"><%= vip.name %></div>
-            <div id="power-star-desc"><%= vip.descr %></div>
-        </div>
-    </a>
-    <div class="power-list">
-        <div class="power-item">
-            <div class="power-item-body">
-                <% data.forEach(item => { %>
-                    <% if(item.name !== vip.name){ %>
-                        <div class="power-item-link">
-                            <a target="_blank" href="<%= item.link %>" rel="external nofollow"><%= item.name %></a>
-                        </div>
-                    <% } %>
-                <% }) %>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideSwitch.ejs b/layout/partial/compoment/aside/asideSwitch.ejs
deleted file mode 100755
index d423b12e..00000000
--- a/layout/partial/compoment/aside/asideSwitch.ejs
+++ /dev/null
@@ -1,41 +0,0 @@
-<% switch (item) {
-    case 'power': %>
-        <%- partial('partial/compoment/aside/asidePower', {cache: true}) %>
-    <% break;
-    case 'about': %>
-        <%- partial('partial/compoment/aside/asideInfoCard', {cache: true}) %>
-    <% break;
-    case 'flip': %>
-        <%- partial('partial/compoment/aside/asideFlipCard', {cache: true}) %>
-    <% break;
-    case 'welcome': %>
-        <%- partial('partial/compoment/aside/asideWelcome', {cache: true}) %>
-    <% break;
-    case 'history': %>
-        <%- partial('partial/compoment/aside/asideHistory', {cache: true}) %>
-    <% break;
-    case 'newestPost': %>
-        <%- partial('partial/compoment/aside/asideNewestPost', {cache: true}) %>
-    <% break;
-    case 'tag': %>
-        <div class="card-widget card-tags">
-            <%- partial('partial/compoment/aside/asideTag', {cache: true}) %>
-        </div>
-    <% break;
-    case 'archive': %>
-        <div class="card-widget card-archives">
-            <%- partial('partial/compoment/aside/asideArchive', {cache: true}) %>
-        </div>
-    <% break;
-    case 'webInfo': %>
-        <div class="card-widget card-webinfo">
-            <%- partial('partial/compoment/aside/asideWebInfo', {cache: true}) %>
-        </div>
-    <% break;
-    case 'allInfo': %>
-        <%- partial('partial/compoment/aside/asideAllInfo', {cache: true}) %>
-    <% break;
-    default: %>
-        <%- partial('page/page') %>
-    <% break;
-} %> 
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideTag.ejs b/layout/partial/compoment/aside/asideTag.ejs
deleted file mode 100755
index a306fb5f..00000000
--- a/layout/partial/compoment/aside/asideTag.ejs
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="card-tag-cloud">
-    <% site.tags.each(function (tag) { %>
-        <a href="<%= url_for(tag.path) %>" style="font-size: 0.8rem;"><%= tag.name %>
-            <sup><%= tag.length %></sup></a>
-    <% }) %>
-</div>
-<% if(site.tags.length > 50){ %>
-    <a id="more-tags-btn" href="javascript:void(0);" rel="external nofollow" onclick="sco.openAllTags();"
-       data-pjax-state="">查看全部</a>
-<% }else{ %>
-    <style>
-        .card-tag-cloud::after {
-            display: none !important;
-        }
-    </style>
-<% } %>
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideToc.ejs b/layout/partial/compoment/aside/asideToc.ejs
deleted file mode 100755
index 046de3ed..00000000
--- a/layout/partial/compoment/aside/asideToc.ejs
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="card-widget" id="card-toc">
-    <div class="item-headline">
-        <i class="scoicon sco-menu-line"></i>
-        <span>文章目录</span>
-    </div>
-    <div class="toc-content" id="toc-content">
-        <%- toc(page.content, {
-            list_number: false,
-        }) %>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideWebInfo.ejs b/layout/partial/compoment/aside/asideWebInfo.ejs
deleted file mode 100755
index e1b0060b..00000000
--- a/layout/partial/compoment/aside/asideWebInfo.ejs
+++ /dev/null
@@ -1,60 +0,0 @@
-<div class="webinfo">
-    <% if(theme.aside.siteinfo.postcount){ %>
-        <div class="webinfo-item">
-            <div class="webinfo-item-title">
-                <i class="item-icon scoicon sco-folder-fill"></i>
-                <div class="item-name">文章总数 :</div>
-            </div>
-            <div class="item-count"><%= site.posts.length %></div>
-        </div>
-    <% } %>
-    <% if(theme.thirdparty.busuanzi){ %>
-        <% if(theme.aside.siteinfo.pv){ %>
-            <div class="webinfo-item">
-                <div class="webinfo-item-title">
-                    <i class="item-icon scoicon sco-visitor-line"></i>
-                    <div class="item-name">总访问数 :</div>
-                </div>
-                <span id="busuanzi_value_site_pv"><i class="scoicon sco-loading-line"></i></span>
-            </div>
-        <% } %>
-        <% if(theme.aside.siteinfo.uv){ %>
-            <div class="webinfo-item">
-                <div class="webinfo-item-title">
-                    <i class="item-icon scoicon sco-team-fill"></i>
-                    <div class="item-name">总访客数 :</div>
-                </div>
-                <span id="busuanzi_value_site_uv"><i class="scoicon sco-loading-line"></i></span>
-            </div>
-        <% } %>
-    <% } %>
-    <% if(theme.aside.siteinfo.runtimeenable){ %>
-        <div class="webinfo-item">
-            <div class="webinfo-item-title">
-                <i class="item-icon scoicon sco-calendar-todo-fill"></i>
-                <div class="item-name">建站天数 :</div>
-            </div>
-            <div class="item-count" id="runtimeshow">
-            </div>
-        </div>
-    <% } %>
-    <% if(theme.aside.siteinfo.updatetime){ %>
-        <div class="webinfo-item">
-            <div class="webinfo-item-title">
-                <i class="item-icon scoicon sco-loop-left-fill"></i>
-                <div class="item-name">最后更新 :</div>
-            </div>
-            <time class="item-count" datetime="<%= new Date() %>">
-            </time>
-        </div>
-    <% } %>
-    <% if(theme.thirdparty.wordcount && theme.aside.siteinfo.wordcount){ %>
-        <div class="webinfo-item">
-            <div class="webinfo-item-title">
-                <i class="item-icon scoicon sco-word-fill"></i>
-                <div class="item-name">全站字数 :</div>
-            </div>
-            <div class="item-count"><%= totalcount(site) %></div>
-        </div>
-    <% } %>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/aside/asideWelcome.ejs b/layout/partial/compoment/aside/asideWelcome.ejs
deleted file mode 100644
index d2988ee9..00000000
--- a/layout/partial/compoment/aside/asideWelcome.ejs
+++ /dev/null
@@ -1,33 +0,0 @@
-<% if(theme.aside.welcome.enable){ %>
-    <style>
-        #welcome-info {
-            overflow: hidden;
-            margin-top: 4px
-        }
-
-        #welcome-info .welcome-time {
-            width: 100%;
-            margin: 12px 0 0;
-            display: inline-flex
-        }
-
-        #welcome-info .welcome-message {
-            width: 100%;
-            margin-bottom: 8px;
-            display: inline-flex
-        }
-    </style>
-    <div class="card-widget card-welcome">
-        <div class="item-headline">
-            <i class="<%- theme.aside.welcome.icon || 'scoicon sco-map-pin-fill' %>"></i>
-            <span><%- theme.aside.welcome.title || '来访者' %></span>
-        </div>
-        <div id="welcome-info"></div>
-    </div>
-    <script data-pjax>
-        var longitude = '<%= theme.aside.welcome.longitude %>'
-        var Latitude = '<%= theme.aside.welcome.Latitude %>'
-        var txkey = '<%= theme.aside.welcome.key %>'
-        var ipLoacation;
-    </script>
-<% } %>
\ No newline at end of file
diff --git a/layout/partial/compoment/circle/angle.ejs b/layout/partial/compoment/circle/angle.ejs
deleted file mode 100755
index 0af0f2f1..00000000
--- a/layout/partial/compoment/circle/angle.ejs
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="title-h2-a">
-    <div class="title-h2-a-left">
-        <h2 style="padding-top: 0;margin:0.6rem 0 0.6rem;">🎣 钓鱼</h2>
-        <a id="random-post-start" href="javascript:fetchRandomPost();" rel="external nofollow"
-           style="transition-duration: 0.3s; transform: rotate(63000deg); opacity: 1;" data-pjax-state="">
-            <i class="scoicon sco-refresh-line"></i>
-        </a>
-    </div>
-    <div class="title-h2-a-right"><a class="random-post-all" href="/links/" data-pjax-state="">全部友链</a></div>
-</div>
-<div id="random-post"></div>
-
-<div class="title-h2-a">
-    <div class="title-h2-a-left">
-        <h2 style="padding-top: 0;margin:0.6rem 0 0.6rem;">🐟 鱼塘</h2>
-    </div>
-    <div class="title-h2-a-right"><span>以下内容自动生成，未经过审核</span></div>
-</div>
-<script>
-    var fdata = {
-        apiurl: "<%= theme.thirdparty.circle.api %>",
-        defaultFish: 100,
-        hungryFish: 100,
-    }
-</script>
-<script type="text/javascript" src="/lib/friends_post.js"></script>
\ No newline at end of file
diff --git a/layout/partial/compoment/circle/banner.ejs b/layout/partial/compoment/circle/banner.ejs
deleted file mode 100755
index e7da3611..00000000
--- a/layout/partial/compoment/circle/banner.ejs
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="author-content author-content-item momentsPage single nolazyload"
-     style="background: url(<%= page.cover %>) no-repeat center;background-size: cover;">
-    <div class="card-content">
-        <div class="author-content-item-tips"><%= page.title %></div>
-        <span class="author-content-item-title"><%= page.desc %></span>
-        <div class="content-bottom">
-            <div class="tips">使用 友链朋友圈 订阅友链最新文章</div>
-            <div class="tips"></div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/circle/content.ejs b/layout/partial/compoment/circle/content.ejs
deleted file mode 100755
index 08c6235d..00000000
--- a/layout/partial/compoment/circle/content.ejs
+++ /dev/null
@@ -1,19 +0,0 @@
-<div id="hexo-circle-of-friends-root"></div>
-<script>
-    let UserConfig = {
-        // 填写你的api地址
-        private_api_url: '<%= theme.thirdparty.circle.api %>',
-        // 默认加载文章数
-        page_init_number: <%= theme.thirdparty.circle.page_init_number%>,
-        // 点击加载更多时，一次最多加载几篇文章，默认10
-        page_turning_number: <%= theme.thirdparty.circle.page_turning_number %>,
-        // 头像加载失败时，默认头像地址
-        error_img: '<%= theme.thirdparty.circle.error_img %>',
-        // 进入页面时第一次的排序规则
-        sort_rule: '<%= theme.thirdparty.circle.sort_rule %>',
-        // 本地文章缓存数据过期时间（天）
-        expire_days: <%= theme.thirdparty.circle.expire_days %>,
-    }
-</script>
-<%- js(theme.thirdparty.circle.appjs) %>
-<%- js(theme.thirdparty.circle.bundlejs) %>
\ No newline at end of file
diff --git a/layout/partial/compoment/dorakika/rightmenu.ejs b/layout/partial/compoment/dorakika/rightmenu.ejs
deleted file mode 100755
index 36a9b403..00000000
--- a/layout/partial/compoment/dorakika/rightmenu.ejs
+++ /dev/null
@@ -1,100 +0,0 @@
-<div id="rightMenu">
-    <div class="rightMenu-group rightMenu-small">
-        <div class="rightMenu-item" id="menu-backward">
-            <i class="scoicon sco-arrow-left-line"></i>
-        </div>
-        <div class="rightMenu-item" id="menu-forward">
-            <i class="scoicon sco-arrow-right-line"></i>
-        </div>
-        <div class="rightMenu-item" id="menu-refresh">
-            <i class="scoicon sco-restart-line" style="font-size: 19px;"></i>
-        </div>
-        <div class="rightMenu-item" id="menu-top">
-            <i class="scoicon sco-arrow-up-line"></i>
-        </div>
-    </div>
-    <div class="rightMenu-group rightMenu-line rightMenuPlugin">
-        <div class="rightMenu-item" id="menu-copytext">
-            <i class="scoicon sco-copy-fill"></i>
-            <span>复制选中文本</span>
-        </div>
-        <div class="rightMenu-item" id="menu-pastetext">
-            <i class="scoicon sco-clipboard-fill"></i>
-            <span>粘贴文本</span>
-        </div>
-        <a class="rightMenu-item" id="menu-commenttext" data-pjax-state="">
-            <i class="scoicon sco-chat-new-fill"></i>
-            <span>引用到评论</span>
-        </a>
-        <div class="rightMenu-item" id="menu-newwindow">
-            <i class="scoicon sco-window-fill"></i>
-            <span>新窗口打开</span>
-        </div>
-        <div class="rightMenu-item" id="menu-copylink">
-            <i class="scoicon sco-link-line"></i>
-            <span>复制链接地址</span>
-        </div>
-        <div class="rightMenu-item" id="menu-copyimg">
-            <i class="scoicon sco-copy-fill"></i>
-            <span>复制此图片</span>
-        </div>
-        <div class="rightMenu-item" id="menu-downloadimg">
-            <i class="scoicon sco-download-cloud-fill"></i>
-            <span>下载此图片</span>
-        </div>
-        <div class="rightMenu-item" id="menu-search">
-            <i class="scoicon sco-search-line"></i>
-            <span>站内搜索</span>
-        </div>
-        <div class="rightMenu-item" id="menu-searchBaidu">
-            <i class="scoicon sco-baidu-fill"></i>
-            <span>百度搜索</span>
-        </div>
-        <div class="rightMenu-item" id="menu-music-toggle">
-            <i class="scoicon sco-play-fill"></i>
-            <span>播放音乐</span>
-        </div>
-        <div class="rightMenu-item" id="menu-music-back">
-            <i class="scoicon sco-skip-back-fill"></i>
-            <span>切换到上一首</span>
-        </div>
-        <div class="rightMenu-item" id="menu-music-forward">
-            <i class="scoicon sco-skip-forward-fill"></i>
-            <span>切换到下一首</span>
-        </div>
-        <div class="rightMenu-item" id="menu-music-playlist"
-             onclick="window.open('<%- theme.thirdparty.aplayer.server == 'tencent' ? `https://y.qq.com/n/ryqq/playlist/${theme.thirdparty.aplayer.id}` : `https://music.163.com/#/playlist?id=${theme.thirdparty.aplayer.id}` %>', '_blank');">
-            <i class="scoicon sco-play-list-2-line"></i>
-            <span>查看所有歌曲</span></div>
-        <div class="rightMenu-item" id="menu-music-copyMusicName">
-            <i class="scoicon sco-copy-fill"></i>
-            <span>复制歌名</span>
-        </div>
-    </div>
-    <div class="rightMenu-group rightMenu-line rightMenuOther">
-        <a class="rightMenu-item menu-Link" id="menu-randomPost" data-pjax-state="">
-            <i class="scoicon sco-signal-tower-fill"></i>
-            <span>随便逛逛</span></a>
-        <a class="rightMenu-item menu-link" href="/categories/" data-pjax-state="">
-            <i class="scoicon sco-checkbox-multiple-blank-fill"></i>
-            <span>博客分类</span></a>
-        <a class="rightMenu-item menu-link" href="/tags/" data-pjax-state="">
-            <i class="scoicon sco-price-tag-fill"></i>
-            <span>文章标签</span></a>
-    </div>
-    <div class="rightMenu-group rightMenu-line rightMenuOther">
-        <div class="rightMenu-item" id="menu-copy">
-            <i class="scoicon sco-external-link-fill"></i>
-            <span>复制地址</span>
-        </div>
-        <div class="rightMenu-item" id="menu-commentBarrage">
-            <i class="scoicon sco-chat-fill"></i>
-            <span class="menu-commentBarrage-text">关闭热评</span>
-        </div>
-        <div class="rightMenu-item" id="menu-darkmode">
-            <i class="scoicon sco-moon-clear-fill"></i>
-            <span class="menu-darkmode-text">浅色模式</span>
-        </div>
-    </div>
-</div>
-<div id="rightmenu-mask"></div>
\ No newline at end of file
diff --git a/layout/partial/compoment/equipment/banner.ejs b/layout/partial/compoment/equipment/banner.ejs
deleted file mode 100755
index 4e8dc547..00000000
--- a/layout/partial/compoment/equipment/banner.ejs
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="author-content author-content-item equipment single" style="background: url(<%= page.cover %>) no-repeat center;">
-    <div class="card-content">
-        <div class="author-content-item-tips"><%= page.title %></div>
-        <span class="author-content-item-title"><%= page.desc %></span>
-        <div class="content-bottom">
-            <div class="tips"><%- page.tipl %></div>
-            <div class="tips"><%- page.tipr %></div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/equipment/list.ejs b/layout/partial/compoment/equipment/list.ejs
deleted file mode 100755
index 76ee77b0..00000000
--- a/layout/partial/compoment/equipment/list.ejs
+++ /dev/null
@@ -1,37 +0,0 @@
-<div id="equipment">
-    <% if (site.data.equipment) { %>
-        <% site.data.equipment.forEach(function(i) { %>
-            <div class="equipment-item">
-                <h2 class="equipment-item-title"><%= i.class_name %></h2>
-                <div class="equipment-item-description"><%= i.description %></div>
-                <div class="equipment-item-content">
-                    <% i.equipment_list.forEach(function(item) { %>
-                        <div class="equipment-item-content-item">
-                            <div class="equipment-item-content-item-cover">
-                                <img class="equipment-item-content-item-image" src="<%= item.image %>" alt="<%= item.name %>">
-                            </div>
-                            <div class="equipment-item-content-item-info">
-                                <div class="equipment-item-content-item-name"><%= item.name %></div>
-                                <div class="equipment-item-content-item-specification"><%= item.specification %></div>
-                                <div class="equipment-item-content-item-description"><%= item.description %></div>
-                                <% if (item.link) { %>
-                                    <div class="equipment-item-content-item-toolbar">
-                                        <% if (item.link.includes('https://') || item.link.includes('http://')) { %>
-                                            <a class="equipment-item-content-item-link" href="<%= item.link %>" target="_blank">详情</a>
-                                        <% } else { %>
-                                            <a class="equipment-item-content-item-link" href="<%= item.link %>" target="_blank">查看文章</a>
-                                        <% } %>
-                                        <a class="bber-reply" onclick="sco.toTalk('<%- item.description %>')" >
-                                            <i class="scoicon sco-chat-fill" style="font-size: 1rem;">
-                                            </i>
-                                          </a>
-                                    </div>
-                                <% } %>       
-                            </div>
-                        </div>
-                    <% }) %>
-                </div>
-            </div>
-        <% }) %>
-    <% } %>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/home/homeCategoryBar.ejs b/layout/partial/compoment/home/homeCategoryBar.ejs
deleted file mode 100755
index 2a8e0ae3..00000000
--- a/layout/partial/compoment/home/homeCategoryBar.ejs
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="category-bar-items" id="category-bar-items">
-    <div class="category-bar-item <%= is_home() ? 'select' : '' %>" id="category-bar-home">
-        <a href="/">首页</a>
-    </div>
-    <% site.categories.each(function(item){ %>
-        <div class="category-bar-item <%= select ? (select === item.name ? 'select' : '') : '' %>"
-             id="<%= item.name %>">
-            <a href="<%= url_for(item.path) %>"><%= item.name %></a>
-        </div>
-    <% }) %>
-</div>
-<% if(site.categories.length > 10){ %>
-    <div class="category-bar-next" id="category-bar-next" onclick="sco.scrollCategoryBarToRight()">
-        <i class="scoicon sco-show-right-line"></i>
-    </div>
-<% } %>
-<a class="category-bar-more" href="/categories/">更多</a>
\ No newline at end of file
diff --git a/layout/partial/compoment/home/postList.ejs b/layout/partial/compoment/home/postList.ejs
deleted file mode 100755
index 4ad5fdcb..00000000
--- a/layout/partial/compoment/home/postList.ejs
+++ /dev/null
@@ -1,38 +0,0 @@
-<div class="recent-post-item" onclick="pjax.loadUrl('/<%= post.path %>')">
-    <div class="post_cover left_radius">
-        <a href="<%= url_for(post.path) %>" title="<%= post.title %>">
-            <img class="post_bg" alt="<%= post.title %>" src="<%= post.cover %>">
-        </a>
-    </div>
-    <div class="recent-post-info">
-        <div class="recent-post-info-top">
-            <div class="recent-post-info-top-tips">
-                <% post.categories.data.forEach(categories => { %>
-                    <span class="original"><%= categories.name %></span>
-                <% }) %>
-                <% if(post.prev == null && is_home()){ %>
-                    <span class="original">最新</span>
-                <% }%>
-                    <a class="unvisited-post" href="<%= url_for(post.path) %>" title="<%= post.title %>" data-pjax-state>未读</a>
-            </div>
-            <a class="article-title" href="<%= url_for(post.path) %>" title="<%= post.title %>">
-                <%= post.title %>
-            </a>
-        </div>
-        <div class="article-meta-wrap">
-            <span class="article-meta tags">
-                <% post.tags.data.forEach(tags => { %>
-                    <a class="article-meta__tags" href="<%= url_for(tags.path) %>"
-                       onclick="window.event.cancelBubble=true;">
-                        <span class="tags-punctuation">
-                            <%=tags.name%>
-                        </span>
-                    </a>
-                <% }) %>
-            </span>
-            <span class="post-meta-date">
-                <time datetime="<%= moment(post.date).format() %>"></time>
-            </span>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/hometop/bbTimeList.ejs b/layout/partial/compoment/hometop/bbTimeList.ejs
deleted file mode 100755
index 70e94210..00000000
--- a/layout/partial/compoment/hometop/bbTimeList.ejs
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="bbTimeList container" id="bbTimeList">
-    <i class="bber-logo scoicon sco-says" onclick="pjax.loadUrl('/essay/')" style="font-size: 1rem;"></i>
-    <div class="swiper-container swiper-no-swiping swiper-container-initialized swiper-container-vertical swiper-container-pointer-events"
-        id="bbtalk" tabindex="-1" onclick="pjax.loadUrl('/essay/')">
-        <div class="swiper-wrapper" id="bber-talk">
-            <% for(i in site.data.essay.essay_list){ %>
-                <% const item = site.data.essay.essay_list[i];if(i >= 10)break; %>
-                <div class="li-style swiper-slide">
-                    <%= item.image ? item.content + '【图片】' : item.content %>
-                </div>
-            <% } %>
-        </div>
-    </div>
-    <i class="bber-gotobb scoicon sco-right-btn-fill" style="font-size: 1rem" title="查看全文" onclick="pjax.loadUrl('/essay/')"></i>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/hometop/categoryGroup.ejs b/layout/partial/compoment/hometop/categoryGroup.ejs
deleted file mode 100755
index d671d636..00000000
--- a/layout/partial/compoment/hometop/categoryGroup.ejs
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="categoryItem" style="box-shadow: var(--sco-shadow-blue);"><a class="categoryButton CB1 bikan"
-        href="<%- url_for(theme.hometop.categoryGroup.G1.url) %>">
-        <span class="categoryButtonText"><%= theme.hometop.categoryGroup.G1.name %></span>
-        <i class="<%- theme.hometop.categoryGroup.G1.icon %>"></i>
-    </a>
-</div>
-<div class="categoryItem" style="box-shadow: var(--sco-shadow-red);">
-    <a class="categoryButton remen" href="<%- url_for(theme.hometop.categoryGroup.G2.url) %>">
-        <span class="categoryButtonText"><%= theme.hometop.categoryGroup.G2.name %></span>
-        <i class="<%- theme.hometop.categoryGroup.G2.icon %>"></i>
-    </a>
-</div>
-<div class="categoryItem" style="box-shadow: var(--sco-shadow-green);">
-    <a class="categoryButton shiyong"
-        href="<%- url_for(theme.hometop.categoryGroup.G3.url) %>">
-        <span class="categoryButtonText"><%= theme.hometop.categoryGroup.G3.name %></span>
-        <i class="<%- theme.hometop.categoryGroup.G3.icon %>"></i>
-    </a>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/hometop/groupTag.ejs b/layout/partial/compoment/hometop/groupTag.ejs
deleted file mode 100755
index c5f7e77f..00000000
--- a/layout/partial/compoment/hometop/groupTag.ejs
+++ /dev/null
@@ -1,30 +0,0 @@
-<div class="banners-title">
-    <div class="banners-title-big">
-        <%- theme.hometop.banner.title %>
-    </div>
-    <div class="banners-title-small">
-        <%= theme.hometop.banner.url %>
-    </div>
-</div>
-<div class="tags-group-all">
-    <div class="tags-group-wrapper">
-        <% for(let i = 1; i <= 2; i++){ %>
-            <% for(let j = 0; j < Object.keys(theme.hometop.banner.icon).length; j++){ %>
-                <% const key = Object.keys(theme.hometop.banner.icon)[j] %>
-                <% if(j % 2 == 0){ %>
-                    <div class="tags-group-icon-pair">
-                <% } %>    
-                    <div class="tags-group-icon" style="background: <%- theme.hometop.banner.icon[key].color %>">
-                        <img src="<%= theme.hometop.banner.icon[key].img %>" title="<%= key %>">
-                    </div>
-                <% if(j % 2 == 1 || j == Object.keys(theme.hometop.banner.icon).length - 1){ %>
-                    </div>
-                <% } %>
-            <% } %>   
-        <% } %>    
-    </div>
-</div>
-<a id="banner-hover" onclick="toRandomPost()" data-pjax-state="">
-    <span class="bannerText">随便逛逛</span>
-    <i class="scoicon sco-arrow-2-right-line banner-righticon"></i>
-</a>
\ No newline at end of file
diff --git a/layout/partial/compoment/hometop/topGroup.ejs b/layout/partial/compoment/hometop/topGroup.ejs
deleted file mode 100755
index 15b14fad..00000000
--- a/layout/partial/compoment/hometop/topGroup.ejs
+++ /dev/null
@@ -1,41 +0,0 @@
-<% for (const post of site.posts.data.filter(item => item.recommend === true).slice(0,6)){ %>
-    <div class="recent-post-item">
-        <div class="post_cover left_radius">
-            <a href="<%= url_for(post.path) %>"
-                title="<%= post.title %>">
-                <span class="recent-post-top-text">荐</span>
-                <img class="post_bg"
-                    alt="<%= post.title %>" src="<%= post.cover %>" loading="lazy">
-            </a>
-        </div>
-        <div class="recent-post-info">
-            <a class="article-title" href="<%= url_for(post.path) %>"
-                title="<%= post.title %>"><%= post.title %>
-            </a>
-        </div>
-    </div> 
-<% } %>
-<% if (theme.hometop.recommendList.url.startsWith('/') && theme.hometop.recommendList.url.endsWith('/')) { %>
-<div class="todayCard" id="todayCard" onclick="pjax.loadUrl('<%= theme.hometop.recommendList.url %>')" style="z-index: 1;">
-<% } else { %>
-<script>
-    function GoTodayCard() {
-        window.open("<%= theme.hometop.recommendList.url %>", "_blank");
-    }
-</script>
-<div class="todayCard" id="todayCard" onclick="GoTodayCard()" style="z-index: 1;">
-<% } %>
-    <div class="todayCard-info">
-        <div class="todayCard-tips"><%= theme.hometop.recommendList.sup %></div>
-        <div class="todayCard-title"><%= theme.hometop.recommendList.title %></div>
-    </div>
-    <div class="todayCard-cover nolazyload"
-        style="background: url('<%- theme.hometop.recommendList.img %>') no-repeat center /cover">
-    </div>
-    <div class="banner-button-group"><a class="banner-button"
-            onclick="window.event.cancelBubble=true;sco.hideTodayCard();">
-            <i class="scoicon sco-add-fill"></i>
-            <span class="banner-button-text">更多推荐</span>
-        </a>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/inject/body.ejs b/layout/partial/compoment/inject/body.ejs
deleted file mode 100755
index 1a296b6f..00000000
--- a/layout/partial/compoment/inject/body.ejs
+++ /dev/null
@@ -1,75 +0,0 @@
-<% const cdn = theme.cdn.body %>
-<%- js(cdn.pjaxjs) %>
-<% if(theme.lazyload.enable){ %>
-    <%- js(cdn.lazyloadjs) %>
-<% } %>
-<%- js(cdn.snackbarjs) %>
-<% if(theme.lightbox){ %>
-    <%- js(cdn.viewimagejs) %>
-<% } %>
-<% if(theme.says.home_mini || theme.aside.history.enable){ %>
-    <%- js(cdn.swiperjs) %>
-<% } %>
-<%- js('/js/utils') %>
-<div id="js-pjax">
-    <% if(theme.rightmenu.enable){ %>
-        <%- partial('partial/compoment/dorakika/rightmenu', {cache: true}) %>
-    <% } %>
-    <% if(page.type === 'says' || page.type === 'album' || page.type === 'album_detail' ){ %>
-        <%- js(cdn.waterfalljs) %>
-        <script>
-            window.addEventListener('resize', utils.throttle(function () {
-                if (document.getElementById('waterfall')) {
-                    sco.reflashEssayWaterFall();
-                }
-            }), 500);
-        </script>
-    <% } %>
-    <% if(theme.thirdparty.busuanzi && (theme.aside.siteinfo.uv || theme.aside.siteinfo.pv || theme.thirdparty.busuanzi.usecomment === false)){ %>
-        <script async
-                src="<%= cdn.busuanzijs %>"></script>
-    <% } %>
-</div>
-<%- js('/js/main') %>
-<% if(theme.thirdparty.aplayer.enable){ %>
-    <%- js(cdn.aplayerjs) %>
-    <%- js(cdn.metingjs) %>
-    <script>
-        var meting_api = "<%- theme.thirdparty.aplayer.api %>";
-    </script>
-<% } %>
-<% if(theme.post.covercolor){ %>
-    <%- js('/js/extend/covercolor/local') %>
-<% } %>
-
-<% if(theme.footer.randomlink){ %>
-    <%- randomLinks() %>
-<% } %>
-
-<% if(theme.comment.enable){
-%>
-    <%- js('/js/extend/console/comment')
-    %>
-<% } %>
-
-<% if(theme.rightmenu.enable){ %>
-    <%- js('/js/rightmenu') %>
-<% } %>
-
-<% if(theme.comment.enable){ %>
-    <script data-pjax src="/js/commentBarrage.js"></script>
-<% } %>
-
-<% if (page.katex){ %>
-    <%- css(cdn.katexcss) %>
-    <%- js(cdn.katexjs) %>
-<% } %>
-
-<% if (page.katex){ %>
-    <% css(cdn.katexcss) %>
-    <% js(cdn.katexjs) %>
-<% } %>
-
-<% if(theme.aside.welcome.enable){ %>
-    <%- js('/js/txmap.js') %>
-<% } %>
\ No newline at end of file
diff --git a/layout/partial/compoment/links/angle.ejs b/layout/partial/compoment/links/angle.ejs
deleted file mode 100755
index 76413880..00000000
--- a/layout/partial/compoment/links/angle.ejs
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="title-h2-a">
-    <div class="title-h2-a-left">
-        <h2 style="padding-top: 0;margin:0.6rem 0 0.6rem;">🎣 钓鱼</h2>
-        <a id="random-post-start" href="javascript:fetchRandomPost();" rel="external nofollow"
-           style="transition-duration: 0.3s; transform: rotate(63000deg); opacity: 1;" data-pjax-state="">
-            <i class="scoicon refresh-line" hidden="hidden"></i>
-        </a>
-    </div>
-    <div class="title-h2-a-right"><a class="random-post-all" href="/links/" data-pjax-state="">全部友链</a></div>
-</div>
-<div id="random-post"></div>
-
-<div class="title-h2-a">
-    <div class="title-h2-a-left">
-        <h2 style="padding-top: 0;margin:0.6rem 0 0.6rem;">🐟 鱼塘</h2>
-    </div>
-    <div class="title-h2-a-right"><span>以下内容自动生成，未经过审核</span></div>
-</div>
-<script>
-    var fdata = {
-        apiurl: "<%= theme.thirdparty.circle.api %>",
-        defaultFish: 100,
-        hungryFish: 100,
-    }
-</script>
-<%- js('/lib/friends_post') %>
\ No newline at end of file
diff --git a/layout/partial/compoment/links/banner.ejs b/layout/partial/compoment/links/banner.ejs
deleted file mode 100755
index d8522f43..00000000
--- a/layout/partial/compoment/links/banner.ejs
+++ /dev/null
@@ -1,42 +0,0 @@
-<div class="banners-title">
-    <div class="banners-title-small"><%= page.title %></div>
-    <div class="banners-title-big"><%= page.desc %></div>
-</div>
-<div class="banner-button-group">
-    <% if (theme.footer.randomlink){ %>
-        <a class="banner-button secondary" onclick="travelling()">
-            <i class="scoicon sco-signal-tower-fill"></i>
-            <span class="banner-button-text">随机访问</span>
-        </a>
-    <% } %>
-    <a class="banner-button" onclick="sco.scrollToComment()">
-        <i class="scoicon sco-right-btn-fill"></i>
-        <span class="scoicon banner-button-text">申请友链</span>
-    </a>
-</div>
-<div class="tags-group-all nowrapMove">
-    <div class="tags-group-wrapper">
-        <% const data = site.data.links.links %>
-        <% for (let i = 0; i < 2; i++){ %>
-            <% data.forEach(x => {
-            if (x.type === "item") {
-            x.link_list.forEach((y, index) => { %>
-                <% if(index % 2 === 0){ %>
-                <div class="tags-group-icon-pair">
-                    <% } %>
-                    <a class="tags-group-icon" href="<%= url_for(y.link) %>" title="<%= y.name %>">
-                        <img src="<%= y.avatar %>" title="<%= y.name %>">
-                    </a>
-                    <% if(index % 2 !== 0 || index === x.link_list.length - 1){ %>
-                </div>
-                <% } %>
-            <% })
-            }
-            }) %>
-        <% } %>
-    </div>
-</div>
-  
-  
-  
-
diff --git a/layout/partial/compoment/links/linksCard.ejs b/layout/partial/compoment/links/linksCard.ejs
deleted file mode 100755
index dbb1b8c2..00000000
--- a/layout/partial/compoment/links/linksCard.ejs
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="site-card-group">
-    <% data.forEach(item =>{ %>
-        <div class="site-card">
-            <% if(item.tag){ %>
-                <% if(item.vip){ %>
-                    <span class="site-card-tag vip"><%= item.tag %></span>
-                <% }else{ %>
-                    <span class="site-card-tag"><%= item.tag %></span>
-                <% } %>
-            <% } %>
-            <a class="img" itle="<%= item.name %>" href="<%= url_for(item.link) %>">
-                <img class="flink-avatar" src="<%= item.topimg %>" alt="<%= item.name %>">
-                <div class="img-alt is-center"><%= item.name %></div>
-            </a>
-            <a class="info cf-friends-link" title="<%= item.name %>" href="<%= url_for(item.link) %>">
-                <div class="site-card-avatar">
-                    <img class="flink-avatar cf-friends-avatar" src="<%= item.avatar %>" alt="<%= item.name %>">
-                    <div class="img-alt is-center"><%= item.name %></div>
-                </div>
-                <div class="site-card-text">
-                    <span class="title cf-friends-name"><%= item.name %></span>
-                    <span class="desc" title="<%= item.descr %>"><%= item.descr %></span>
-                </div>
-            </a>
-        </div>
-    <% }) %>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/links/linksItem.ejs b/layout/partial/compoment/links/linksItem.ejs
deleted file mode 100755
index c82c0639..00000000
--- a/layout/partial/compoment/links/linksItem.ejs
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="flink-list">
-    <% data.forEach(item =>{ %>
-        <div class="flink-list-item">
-            <a class="cf-friends-link" href="<%= url_for(item.link) %>" title="<%= item.name %>">
-                <% if(item.tag){ %>
-                    <% if(item.vip){ %>
-                        <span class="site-card-tag vip"><%= item.tag %></span>
-                    <% }else{ %>
-                        <span class="site-card-tag"><%= item.tag %></span>
-                    <% } %>
-                <% } %>
-                <img class="flink-avatar cf-friends-avatar" alt="<%= item.name %>" src="<%= item.avatar %>">
-                <div class="img-alt is-center"><%= item.name %></div>
-                <div class="flink-item-info">
-                    <span class="flink-item-name cf-friends-name"><%= item.name %></span>
-                    <span class="flink-item-desc" title="<%= item.descr %>"><%= item.descr %></span>
-                </div>
-            </a>
-        </div>
-    <% }) %>    
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/mixins/articleSort.ejs b/layout/partial/compoment/mixins/articleSort.ejs
deleted file mode 100755
index 8abd6ef1..00000000
--- a/layout/partial/compoment/mixins/articleSort.ejs
+++ /dev/null
@@ -1,25 +0,0 @@
-<% let year %>
-<% page.posts.data.forEach(post => { %>
-    <% if(year !== moment(post.date).year()){ year = moment(post.date).year() %>
-        <div class="article-sort-item year"><%= year %></div>
-    <% } %>
-    <div class="article-sort-item">
-        <a class="article-sort-item-img" href="<%= url_for(post.path) %>" title="<%= post.title %>">
-            <img src="<%= post.cover %>"
-                alt="<%= post.title %>">
-        </a>
-        <div class="article-sort-item-info">
-            <a class="article-sort-item-title" href="<%= url_for(post.path) %>" title="<%= post.title %>"
-                onclick="window.event.cancelBubble=true;">
-                <%= post.title %>
-            </a>
-            <div class="article-sort-item-tags">
-                <% post.tags.data.forEach(tags => { %>
-                    <a class="article-meta__tags" href="<%= url_for(tags.path) %>" onclick="window.event.cancelBubble=true;">
-                        <span class="tags-punctuation"><%= tags.name %></span>
-                    </a>
-                <% }) %>
-            </div>
-        </div>
-    </div>
-<% }); %>
\ No newline at end of file
diff --git a/layout/partial/compoment/mixins/pagination.ejs b/layout/partial/compoment/mixins/pagination.ejs
deleted file mode 100755
index abe9fd73..00000000
--- a/layout/partial/compoment/mixins/pagination.ejs
+++ /dev/null
@@ -1,11 +0,0 @@
-<nav id="pagination">
-    <div class="pagination">
-        <% const options = {
-            mid_size: 1,
-            escape: false,
-            next_text: '<div class="pagination_tips_next">下页</div> <i class="scoicon sco-arrow-right-bold"></i>',
-            prev_text: '<i class="scoicon sco-arrow-left-bold"></i> <div class="pagination_tips_prev">上页</div>'
-        } %>
-        <%- paginator(options) %>
-    </div>
-</nav>
\ No newline at end of file
diff --git a/layout/partial/compoment/nav/left.ejs b/layout/partial/compoment/nav/left.ejs
deleted file mode 100755
index b65d96d4..00000000
--- a/layout/partial/compoment/nav/left.ejs
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="back-menu-list-groups">
-    <% for(const x in theme.nav.left.menu){ %>
-      <% const groupData=theme.nav.left.menu[x] %>
-      <div class="back-menu-list-group">
-        <div class="back-menu-list-title">
-          <%= x %>
-        </div>
-        <div class="back-menu-list">
-          <% for(const y in groupData){ %>
-            <% const data=groupData[y] %>
-            <a class="back-menu-item" href="<%= url_for(data.url) %>" rel="external nofollow" title="<%= y %>">
-              <img class="back-menu-item-icon" src="<%= data.icon %>" loading="lazy" alt="<%= x %>">
-              <span class="back-menu-item-text">
-                <%= y %>
-              </span>
-            </a>
-          <% } %>
-        </div>
-      </div>
-    <% } %>
-  </div>
-  
\ No newline at end of file
diff --git a/layout/partial/compoment/nav/menu.ejs b/layout/partial/compoment/nav/menu.ejs
deleted file mode 100755
index 7b00adc8..00000000
--- a/layout/partial/compoment/nav/menu.ejs
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class="menus_items">
-    <% for(const x in theme.nav.menu){ %>
-        <div class="menus_item">
-            <% if(!theme.nav.menu[x].url){ %>
-                <a class="site-page" href="javascript:void(0);" rel="external nofollow">
-                    <span> <%= x %></span>
-                </a>
-                <ul class="menus_item_child">
-                    <% for(y in theme.nav.menu[x].child){ %>
-                        <li>
-                            <a class="site-page child" href="<%- url_for(theme.nav.menu[x].child[y].url) %>">
-                                <i class="<%- theme.nav.menu[x].child[y].icon %>"></i>
-                                <span> <%= y %></span>
-                            </a>
-                        </li>
-                    <% } %>
-                </ul>
-            <% } else { %>
-                <a class="site-page not-child" href="<%- url_for(theme.nav.menu[x].url) %>" rel="external nofollow">
-                    <span> <%= x %></span>
-                </a>
-            <% } %> 
-        </div>
-    <% } %>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/nav/right.ejs b/layout/partial/compoment/nav/right.ejs
deleted file mode 100755
index 88261182..00000000
--- a/layout/partial/compoment/nav/right.ejs
+++ /dev/null
@@ -1,42 +0,0 @@
-<% if(theme.nav.right.travellings){ %>
-    <div class="nav-button only-home" id="travellings_button">
-        <a class="site-page"  target="_blank" rel="noopener external nofollow" href="https://www.travellings.cn/go.html" title="开往-友链接力"  width="120">
-            <i class="scoicon sco-train-line" style="font-size: 1rem;"></i>
-        </a>
-    </div>
-<% } %>
-<% if(theme.nav.right.random){ %>
-    <div class="nav-button" id="randomPost_button">
-        <a class="site-page" onclick="toRandomPost()"
-            title="随机前往一个文章">
-            <i class="scoicon sco-signal-tower-fill" style="font-size: 1rem;"></i>
-        </a>
-    </div>
-<% } %>
-<% if(theme.thirdparty.search.algolia_search.enable || theme.thirdparty.search.local_search.enable){ %>
-    <div class="nav-button" id="search-button">
-        <a class="site-page social-icon search" title="站内搜索"
-            href="javascript:void(0);" rel="external nofollow">
-            <i class="scoicon sco-search-line" style="font-size: 1rem;"></i>
-        </a>
-    </div>
-<% } %>
-<% if(theme.nav.right.console){ %>
-    <div class="nav-button" id="nav-console">
-        <a class="console_switchbutton" onclick="sco.showConsole()"
-        title="显示中控台" href="javascript:void(0);" rel="external nofollow">
-        <i class="scoicon sco-dashboard-fill" style="font-size: 1rem;"></i>
-        </a>
-    </div>
-<% } %>
-<div class="nav-button" id="nav-totop" onclick="sco.toTop()">
-    <a class="totopbtn">
-        <i class="scoicon sco-arrow-up-line"></i>
-        <span id="percent">0</span>
-    </a>
-</div>
-<div id="toggle-menu">
-    <a class="site-page">
-        <i class="scoicon sco-menu-line"></i>
-    </a>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/post/award.ejs b/layout/partial/compoment/post/award.ejs
deleted file mode 100755
index 8bae55f3..00000000
--- a/layout/partial/compoment/post/award.ejs
+++ /dev/null
@@ -1,60 +0,0 @@
-<div class="post-reward">
-    <div class="reward-button button--animated" onclick="AddRewardMask()" title="赞赏作者">
-        <i class="scoicon sco-hand-heart-fill"></i>
-        打赏作者
-    </div>
-    <div class="reward-main">
-        <ul class="reward-all">
-            <span class="reward-title">感谢你赐予我前进的力量</span>
-            <ul class="reward-group">
-                <% if(theme.post.award.wechat){ %>
-                    <li class="reward-item">
-                        <a href="<%= theme.post.award.wechat %>" target="_blank">
-                            <img class="post-qr-code-img" src="<%= theme.post.award.wechat %>" alt="微信">
-                        </a>
-                        <div class="post-qr-code-desc">微信</div>
-                    </li>
-                <% } %>
-                <% if(theme.post.award.alipay){ %>
-                    <li class="reward-item">
-                        <a href="<%= theme.post.award.alipay %>" target="_blank">
-                            <img class="post-qr-code-img" src="<%= theme.post.award.alipay %>" alt="支付宝">
-                        </a>
-                        <div class="post-qr-code-desc">支付宝</div>
-                    </li>
-                <% } %>
-            </ul>
-            <a class="reward-main-btn" href="<%= url_for(theme.post.award.url) %>">
-                <div class="reward-text">赞赏者名单</div>
-                <div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div>
-            </a>
-        </ul>
-    </div>
-</div>
-<script type="text/javascript">
-    function RemoveRewardMask() {
-        let rewardMainElements = document.querySelectorAll(".reward-main");
-        let quitBoxElement = document.querySelector("#quit-box");
-
-        rewardMainElements.forEach(element => {
-            element.style.display = "none";
-        });
-
-        if (quitBoxElement) {
-            quitBoxElement.style.display = "none";
-        }
-    }
-
-    function AddRewardMask() {
-        let rewardMainElements = document.querySelectorAll(".reward-main");
-        let quitBoxElement = document.querySelector("#quit-box");
-
-        rewardMainElements.forEach(element => {
-            element.style.display = "flex";
-        });
-
-        if (quitBoxElement) {
-            quitBoxElement.style.display = "flex";
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/layout/partial/compoment/post/copyright.ejs b/layout/partial/compoment/post/copyright.ejs
deleted file mode 100755
index d362290b..00000000
--- a/layout/partial/compoment/post/copyright.ejs
+++ /dev/null
@@ -1,39 +0,0 @@
-<div class="post-copyright">
-    <div class="post-copyright__author_group">
-        <a class="post-copyright__author_img" href="/about/"
-           data-pjax-state="">
-            <img class="post-copyright__author_img_back"
-                 src="https://bu.dusays.com/2023/11/01/6541f6d4b2573.png">
-            <img class="post-copyright__author_img_front"
-                 src="<%= theme.site.icon %>"></a>
-        <div class="post-copyright__author_name"><%= config.title %></div>
-        <div class="post-copyright__author_desc"><%= config.subtitle %></div>
-    </div>
-    <div class="post-tools" id="post-tools">
-        <div class="post-tools-left">
-            <% if(theme.post.award.enable){ %>
-                <%- partial('/award', {cache: true}) %>
-            <% } %>
-            <% if(theme.footer.rss.enable){ %>
-                <div class="reward-link mode">
-                    <a class="reward-link-button" href="<%- theme.footer.rss.url %>">
-                        <i class="scoicon sco-plant-fill"></i>
-                        订阅
-                    </a>
-                </div>
-            <% } %>
-        </div>
-    </div>
-    <div class="post-copyright__notice">
-        <span class="post-copyright-info">
-            本文是<%= page.cc || theme.post.default.copyright %>文章，
-            <% if(page.cc === "转载或翻译"){ %>
-                版权归原作者所有。转载本文请联系原作者。
-            <% }else{ %>
-                采用 <a href="/copyright/" target="_blank">CC BY-NC-ND 4.0</a>
-                协议，完整转载请注明来自
-                <a href="/" target="_blank"><%= config.title %></a>
-            <% } %>
-        </span>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/post/postMeta.ejs b/layout/partial/compoment/post/postMeta.ejs
deleted file mode 100755
index 92aa1908..00000000
--- a/layout/partial/compoment/post/postMeta.ejs
+++ /dev/null
@@ -1,82 +0,0 @@
-<div class="coverdiv" id="coverdiv">
-    <img id="post-cover" class="nolazyload" src="<%= page.cover %>" alt="cover">
-</div>
-<div id="post-info">
-    <div id="post-firstinfo">
-        <div class="meta-firstline">
-            <a class="post-meta-original" title="该文章为<%= page.cc %>文章，注意版权协议">
-                <%= page.cc %>
-            </a>
-            <% if (page.categories.data.length) { %>
-                <span class="post-meta-categories">
-                        <a class="post-meta-categories"
-                           href="<%= url_for(page.categories.data[0].path) %>"><%= page.categories.data[0].name %></a>
-                </span>
-            <% } %>
-            <div class="tag_share">
-                <div class="post-meta__tag-list">
-                    <% page.tags.data.forEach(tags => { %>
-                        <a class="post-meta__tags" href="<%= url_for(tags.path) %>">
-                            <span class="tags-name tags-punctuation"><%= tags.name %></span>
-                        </a>
-                    <% }) %>
-                </div>
-            </div>
-        </div>
-    </div>
-    <h1 class="post-title"><%= page.title %></h1>
-    <div id="post-meta">
-        <div class="meta-secondline">
-            <% if(theme.post.meta.date){ %>
-                <span class="post-meta-date" title="发布于">
-                <i class="post-meta-icon scoicon sco-calendar-todo-fill"></i>
-                <time datetime="<%= moment(page.date).format() %>"></time>
-            </span>
-            <% } %>
-            <% if(theme.post.meta.updated){ %>
-                <span class="post-meta-date" title="更新于">
-                    <i class="post-meta-icon scoicon sco-refresh-line"></i>
-                    <time datetime="<%= moment(page.updated).format() %>"></time>
-                </span>
-            <% } %>
-            <% if(theme.thirdparty.wordcount){ %>
-                <span class="post-meta-wordcount">
-                    <% if(theme.post.meta.wordcount){ %>
-                        <i class="scoicon sco-word-fill post-meta-icon" title="文章字数"></i>
-                        <span class="word-count"><%= wordcount(page.content) %></span>
-                    <% } %>
-                    <span class="post-meta-separator"></span>
-                    <% if(theme.post.meta.readtime){ %>
-                        <i class="scoicon sco-clock-fill post-meta-icon" title="阅读耗时"></i>
-                        <span><%= min2read(page.content) %> min</span>
-                    <% } %>
-                </span>
-            <% } %>
-            <% if(theme.post.meta.locate){ %>
-                <span class="post-meta-position" title="作者IP归属地为<%= page.locate %>">
-                    <i class="post-meta-icon scoicon sco-map-pin-fill"></i>
-                    <span><%= page.locate %></span>
-                </span>
-            <% } %>
-            <% if(theme.thirdparty.busuanzi.enable && theme.post.meta.pv){ %>
-                <a class="post-meta-pv" href="/<%= page.path %>" title="文章热度">
-                    <i class="scoicon sco-fire-fill post-meta-icon"></i>
-                    <% if(theme.thirdparty.busuanzi.usecomment){ %>
-                        <span id="twikoo_visitors"><i class="scoicon sco-loading-line"></i></span>
-                    <% }else{ %>
-                        <span id="busuanzi_value_page_pv"><i class="scoicon sco-loading-line"></i></span>
-                    <% } %>
-                </a>
-            <% } %>
-            <% if(theme.post.meta.comment && page.comment){ %>
-                <span class="post-meta-commentcount" title="评论数" onclick="sco.scrollTo('post-comment')">
-                    <i class="scoicon sco-chat-fill"></i>
-                    <a href="/<%= page.path %>#post-comment">
-                        <span id="twikoo-count"><i class="scoicon sco-loading-line"></i></span>
-                    </a>
-                </span>
-            <% } %>
-        </div>
-    </div>
-</div>
-<%- partial('partial/compoment/post/wave', {cache: true}) %>
\ No newline at end of file
diff --git a/layout/partial/compoment/post/postNav.ejs b/layout/partial/compoment/post/postNav.ejs
deleted file mode 100755
index e4c7a64c..00000000
--- a/layout/partial/compoment/post/postNav.ejs
+++ /dev/null
@@ -1,41 +0,0 @@
-<nav class="needEndHide pagination-post" id="pagination">
-    <% if(page.prev && page.next){ %>
-        <div class="prev-post pull-left">
-            <a href="<%= url_for(page.prev.path) %>">
-                <div class="pagination-info">
-                    <div class="label">上一篇</div>
-                    <div class="prev_info"><%= page.prev.title %></div>
-                </div>
-            </a>
-        </div>
-        <div class="next-post pull-right">
-            <a href="<%= url_for(page.next.path) %>">
-                <div class="pagination-info">
-                    <div class="label">下一篇</div>
-                    <div class="next_info"><%= page.next.title %></div>
-                </div>
-            </a>
-        </div>
-    <% }else{ %>
-        <% if(!page.prev && page.next){ %>
-            <div class="next-post pull-full">
-                <a href="<%= url_for(page.next.path) %>">
-                    <div class="pagination-info">
-                        <div class="label">下一篇</div>
-                        <div class="next_info"><%= page.next.title %></div>
-                    </div>
-                </a>
-            </div>
-        <% } %>        
-        <% if(!page.next && page.prev){ %>
-            <div class="prev-post pull-full">
-                <a href="<%= url_for(page.prev.path) %>">
-                    <div class="pagination-info">
-                        <div class="label">上一篇</div>
-                        <div class="prev_info"><%= page.prev.title %></div>
-                    </div>
-                </a>
-            </div>
-        <% } %>
-    <% } %>
-</nav>
\ No newline at end of file
diff --git a/layout/partial/compoment/post/wave.ejs b/layout/partial/compoment/post/wave.ejs
deleted file mode 100755
index 61160e3d..00000000
--- a/layout/partial/compoment/post/wave.ejs
+++ /dev/null
@@ -1,14 +0,0 @@
-<section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg"
-    xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
-    <defs>
-        <path id="gentle-wave"
-            d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
-    </defs>
-    <g class="parallax">
-        <use href="#gentle-wave" x="48" y="0"></use>
-        <use href="#gentle-wave" x="48" y="3"></use>
-        <use href="#gentle-wave" x="48" y="5"></use>
-        <use href="#gentle-wave" x="48" y="7"></use>
-    </g>
-</svg>
-</section>
\ No newline at end of file
diff --git a/layout/partial/compoment/says/banner.ejs b/layout/partial/compoment/says/banner.ejs
deleted file mode 100755
index 2d5f37f9..00000000
--- a/layout/partial/compoment/says/banner.ejs
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="author-content author-content-item essayPage single nolazyload" style="background: url(<%= page.cover %>) no-repeat center;background-size: cover">
-    <div class="card-content">
-        <div class="author-content-item-tips"><%= page.title %></div>
-        <span class="author-content-item-title"><%= page.desc %></span>
-        <div class="content-bottom">
-            <div class="tips"><%- page.tipl %></div>
-            <div class="tips"><%- page.tipr %></div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/says/saysBottom.ejs b/layout/partial/compoment/says/saysBottom.ejs
deleted file mode 100755
index e5ae7ed1..00000000
--- a/layout/partial/compoment/says/saysBottom.ejs
+++ /dev/null
@@ -1,18 +0,0 @@
-<div class="bber-bottom">
-    <div class="bber-info">
-        <div class="bber-info-time">
-            <i class="scoicon sco-calendar-todo-fill"></i>
-            <time class="datetime" datetime="<%= moment(item.date).format() %>"></time>
-        </div>
-        <% if(item.link){ %>
-            <a class="bber-content-link" href="<%= url_for(item.link) %>" title="跳转到短文指引的链接">
-                <i class="scoicon sco-link-m-line"></i>
-                链接
-            </a>   
-        <% } %> 
-    </div>
-    <a class="bber-reply" onclick="sco.toTalk('<%- item.content %>')" >
-        <i class="scoicon sco-chat-fill" style="font-size: 1rem;">
-        </i>
-      </a>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/says/saysContent.ejs b/layout/partial/compoment/says/saysContent.ejs
deleted file mode 100755
index 9e9fe10b..00000000
--- a/layout/partial/compoment/says/saysContent.ejs
+++ /dev/null
@@ -1,10 +0,0 @@
-<div id="bber-content">
-    <p class="datacont"><%- item.content %></p>
-    <% if(item.image){ %>
-        <div class="bber-content-img">
-            <% item.image.forEach(img => { %>
-                <img src="<%= img %>" title="即刻短文配图">
-            <% }); %>
-        </div>
-    <% } %>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/says/saysFunction.ejs b/layout/partial/compoment/says/saysFunction.ejs
deleted file mode 100644
index 41fdee06..00000000
--- a/layout/partial/compoment/says/saysFunction.ejs
+++ /dev/null
@@ -1,15 +0,0 @@
-<% if(item.aplayer){ %>
-<div class="bber-music">
-    <meting-js server="<%= item.aplayer.server %>" type="song" id="<%= item.aplayer.id %>" mutex="true" preload="none" theme="var(--sco-main)" data-lrctype="0"></meting-js>
-</div>
-<% } %>
-<% if(item.video){ %>
-<div class="bber-video">
-    <% if(item.video.player){ %>
-        <video src="<%= item.video.player %>" controls="controls" style="object-fit: cover;"></video>
-    <% } %>
-    <% if(item.video.bilibili){ %>
-        <iframe src="<%= item.video.bilibili %>" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
-    <% } %>
-</div>
-<% } %>
\ No newline at end of file
diff --git a/layout/partial/compoment/says/saysMeta.ejs b/layout/partial/compoment/says/saysMeta.ejs
deleted file mode 100644
index cea7d320..00000000
--- a/layout/partial/compoment/says/saysMeta.ejs
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="meta">
-    <img class="no-lightbox no-lazyload avatar" src="<%= theme.aside.card.author.img %>">
-    <div class="info">
-        <span class="bber_nick"><%= config.author %></span>
-        <time class="datetime bber_date" datetime="<%= moment(item.date).format() %>"></time>
-    </div>
-    <a class="bber-reply goComment" onclick="sco.toTalk('<%- item.content %>')" >
-        <i class="scoicon sco-chat-fill" style="font-size: 1rem;"></i>
-    </a>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/third-party/comments/comment.ejs b/layout/partial/compoment/third-party/comments/comment.ejs
deleted file mode 100755
index a340a1a0..00000000
--- a/layout/partial/compoment/third-party/comments/comment.ejs
+++ /dev/null
@@ -1,12 +0,0 @@
-<div id="post-comment" view-image>
-    <div class="comment-head">
-        <div class="comment-headline">
-            <i class="scoicon sco-chat-fill"></i>
-            <span> 评论</span>
-        </div>
-    </div>
-    <div class="comment-wrap">
-        <div id="comment"></div>
-        <%- partial('partial/compoment/third-party/comments/twikoo', {cache: true}) %>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/third-party/music.ejs b/layout/partial/compoment/third-party/music.ejs
deleted file mode 100755
index 96c0ac63..00000000
--- a/layout/partial/compoment/third-party/music.ejs
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="needEndHide" id="nav-music" onclick="sco.musicToggle()">
-    <div id="nav-music-hoverTips">音乐已暂停</div>
-    <meting-js id="<%= theme.thirdparty.aplayer.id %>" server="<%= theme.thirdparty.aplayer.server %>" type="playlist" mutex="true"
-        preload="none" data-lrctype="0" order="random" theme="var(--sco-main)"></meting-js>
-</div>
diff --git a/layout/partial/compoment/third-party/pjax.ejs b/layout/partial/compoment/third-party/pjax.ejs
deleted file mode 100755
index e424da48..00000000
--- a/layout/partial/compoment/third-party/pjax.ejs
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-  let pjaxSelectors = [
-    'title',
-    '#body-wrap',
-    '#site-config',
-    'meta[name="description"]',
-    '#js-pjax'
-  ]
-
-  const pjax = new Pjax({
-    elements: 'a:not([target="_blank"])',
-    selectors: pjaxSelectors,
-    cacheBust: false,
-    analytics: false,
-    scrollRestoration: false
-  })
-
-  document.querySelectorAll('script[data-pjax]').forEach(item => {
-      const newScript = document.createElement('script')
-      const content = item.text || item.textContent || item.innerHTML || ""
-      Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
-      newScript.appendChild(document.createTextNode(content))
-      item.parentNode.replaceChild(newScript, item)
-  })
-
-  document.addEventListener('pjax:error', (e) => {
-    if (e.request.status === 404) {
-      pjax.loadUrl('/404.html')
-    }
-  })
-</script>
\ No newline at end of file
diff --git a/layout/partial/compoment/third-party/search/algolia-search.ejs b/layout/partial/compoment/third-party/search/algolia-search.ejs
deleted file mode 100755
index 364fb210..00000000
--- a/layout/partial/compoment/third-party/search/algolia-search.ejs
+++ /dev/null
@@ -1,20 +0,0 @@
-<div id="algolia-search">
-    <div class="search-dialog">
-        <nav class="search-nav">
-            <span class="search-dialog-title">搜索</span>
-            <button class="search-close-button">
-                <i class="scoicon sco-close-fill"></i>
-            </button>
-        </nav>
-        <div class="search-wrap">
-            <div class="search-box" id="search-input"></div>
-            <div id="search-results">
-                <div id="algolia-hits">
-                </div>
-                <div class="algolia-stats"></div>
-                <div class="algolia-poweredBy"></div>
-            </div>
-        </div>
-    </div>
-    <div id="search-mask"></div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/third-party/search/index.ejs b/layout/partial/compoment/third-party/search/index.ejs
deleted file mode 100755
index 4fdb58e5..00000000
--- a/layout/partial/compoment/third-party/search/index.ejs
+++ /dev/null
@@ -1,8 +0,0 @@
-<% if(theme.thirdparty.search.local_search.enable){ %>
-    <%- partial('partial/compoment/third-party/search/local-search') %>
-    <%- js('/js/extend/search/local-search.js') %>
-<% } %>
-<% if(theme.thirdparty.search.algolia_search.enable){ %>
-    <%- partial('partial/compoment/third-party/search/algolia-search') %>
-    <%- js('/js/extend/search/algolia-search.js') %>
-<% } %>     
\ No newline at end of file
diff --git a/layout/partial/compoment/third-party/search/local-search.ejs b/layout/partial/compoment/third-party/search/local-search.ejs
deleted file mode 100755
index 4333eaa8..00000000
--- a/layout/partial/compoment/third-party/search/local-search.ejs
+++ /dev/null
@@ -1,22 +0,0 @@
-<div id="local-search">
-    <div class="search-dialog">
-        <nav class="search-nav">
-            <span class="search-dialog-title">搜索</span>
-            <button class="search-close-button">
-                <i class="scoicon sco-close-fill"></i>
-            </button>
-        </nav>
-        <div id="loading-database">
-            <i class="scoicon sco-loading-line"></i>
-            <span>加载中</span>
-        </div>
-        <div class="search-wrap">
-            <div class="search-box">
-                <input class="search-box-input" placeholder="<%= __('search.placeholder') %>" type="text" id="search-input" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off">
-            </div>
-            <div id="loading-status"></div>
-            <div id="search-results"></div>
-        </div>
-    </div>
-    <div id="search-mask"></div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/compoment/tlink/banner.ejs b/layout/partial/compoment/tlink/banner.ejs
deleted file mode 100755
index 83355e17..00000000
--- a/layout/partial/compoment/tlink/banner.ejs
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="author-content author-content-item essayPage single nolazyload" style="background: url(<%= page.cover %>) no-repeat center;background-size: cover;">
-    <div class="card-content">
-        <div class="author-content-item-tips"><%= page.title %></div>
-        <span class="author-content-item-title"><%= page.desc %></span>
-        <div class="content-bottom">
-            <div class="tips"><%- page.tipl %></div>
-            <div class="tips"><%- page.tipr %></div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/console.ejs b/layout/partial/console.ejs
deleted file mode 100755
index 7bf1c21f..00000000
--- a/layout/partial/console.ejs
+++ /dev/null
@@ -1,68 +0,0 @@
-<div id="console" style="zoom: 1;" class="">
-    <div class="close-btn" onclick="sco.hideConsole()" href="javascript:void(0);">
-        <i class="scoicon sco-close-fill"></i>
-    </div>
-    <% if(theme.thirdparty.consolePlus){ %>
-        <div class="console-card-group">
-            <div class="console-card-group-left">
-                <div class="console-card" id="card-newest-comments" onclick="sco.hideConsole()">
-                    <div class="card-content">
-                        <div class="author-content-item-tips">互动</div>
-                        <div class="author-content-item-title">最新评论</div>
-                    </div>
-                    <div class="aside-list"></div>
-                </div>
-
-            </div>
-            <div class="console-card-group-right">
-                <div class="console-card tags" onclick="sco.hideConsole()">
-                    <div class="card-content">
-                        <div class="author-content-item-tips">标签</div>
-                        <div class="author-content-item-title">寻找感兴趣的领域</div>
-                    </div>
-                    <div class="card-tag-cloud">
-                        <% site.tags.each(function (tag) { %>
-                            <a href="<%= url_for(tag.path) %>"
-                               style="font-size: 0.8rem; color: #d3d3d3"><%= tag.name %>
-                                <sup><%= tag.length %></sup></a>
-                        <% }) %>
-                    </div>
-                </div>
-                <div class="console-card history" onclick="sco.hideConsole()">
-                    <%- partial('partial/compoment/aside/asideArchive', {type: 'month'}) %>
-                </div>
-            </div>
-        </div>
-    <% } %>
-
-    <div class="button-group">
-        <div class="console-btn-item">
-            <a class="darkmode_switchbutton" onclick="sco.switchDarkMode()" title="显示模式切换"
-               href="javascript:void(0);" rel="external nofollow" data-pjax-state>
-                <i class="scoicon sco-moon-clear-fill" style="font-size: 1rem;"></i>
-            </a>
-        </div>
-        <div class="console-btn-item" id="consoleHideAside">
-            <a class="asideSwitch" onclick="sco.switchHideAside()" title="边栏显示控制"
-               href="javascript:void(0);" rel="external nofollow" data-pjax-state>
-                <i class="scoicon sco-side-bar-fill" style="font-size: 1rem;"></i>
-            </a>
-        </div>
-        <% if(theme.thirdparty.aplayer.enable){ %>
-            <div class="console-btn-item" id="consoleMusic" onclick="sco.musicToggle()" title="音乐开关">
-                <a class="music-switch">
-                    <i class="scoicon sco-disc-fill"></i>
-                </a>
-            </div>
-        <% } %>
-        <% if(theme.comment.enable) { %>
-            <div class="console-btn-item on" id="consoleCommentBarrage" onclick="sco.switchCommentBarrage()"
-                 title="热评开关">
-                <a class="commentBarrage">
-                    <i class="scoicon sco-chat-fill"></i>
-                </a>
-            </div>
-        <% } %>
-    </div>
-    <div class="console-mask" onclick="sco.hideConsole()" href="javascript:void(0);" rel="external nofollow"></div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/footer.ejs b/layout/partial/footer.ejs
deleted file mode 100755
index 3f074c47..00000000
--- a/layout/partial/footer.ejs
+++ /dev/null
@@ -1,109 +0,0 @@
-<div id="sco-footer-bar">
-    <div class="footer-logo">
-        <% if (theme.site.name.class === 'i_class') { %>
-            <i class="<%= theme.site.name.custom %>" style="font-size: 16px;"></i>
-        <% } else if (theme.site.name.class === 'img') { %>
-            <i style="background-image: url('<%= url_for(theme.site.name.custom) %>')"></i>
-        <% } else if (theme.site.name.class === 'text') { %>
-            <span class="scoicon"><%= theme.site.name.custom %></span>
-        <% } %>
-    </div>
-    <div class="footer-bar-description">来自 <%- config.title %> <%- config.subtitle %>的文章</div>
-    <a class="footer-bar-link" href="/" data-pjax-state>了解更多</a>
-</div>
-<div id="footer_deal">
-    <% for(const i in theme.footer.information.left){ %>
-        <a class="deal_link" href="<%= url_for(theme.footer.information.left[i].url) %>" rel="external nofollow"
-           title="<%= i %>">
-            <i class="<%= theme.footer.information.left[i].icon %>"></i>
-        </a>
-    <% } %>
-    <img class="footer_mini_logo" src="<%= theme.site.icon %>"
-         title="返回顶部" onclick="sco.toTop()">
-    <% for(const i in theme.footer.information.right){ %>
-        <a class="deal_link" href="<%= url_for(theme.footer.information.right[i].url) %>" rel="external nofollow"
-           title="<%= i %>">
-            <i class="<%= theme.footer.information.right[i].icon %>"></i>
-        </a>
-    <% } %>
-</div>
-<div id="sco-footer">
-    <% for(const x in theme.footer.group){ %>
-        <div class="footer-group">
-            <h3 class="footer-title"><%= x %></h3>
-            <div class="footer-links">
-                <% for(const y in theme.footer.group[x]){ %>
-                    <a class="footer-item" href="<%= url_for(theme.footer.group[x][y]) %>" title="<%= y %>"
-                       rel="noopener external nofollow noreferrer"><%= y %></a>
-                <% } %>
-            </div>
-        </div>
-    <% } %>
-    <% if(theme.footer.randomlink){ %>
-        <div class="footer-group">
-            <div class="footer-title-group">
-                <h3 class="footer-title">友链</h3>
-                <a class="random-friends-btn" href="javascript:randomLinksList();" rel="external nofollow">
-                    <i class="scoicon sco-refresh-line"></i>
-                </a>
-            </div>
-            <div class="footer-links" id="friend-links-in-footer">
-            </div>
-        </div>
-    <% } %>
-</div>
-<div id="footer-bar">
-    <div class="footer-bar-links">
-        <div class="footer-bar-left">
-            <div id="footer-bar-tips">
-                <% if(moment(theme.aside.siteinfo.runtime).year() === new Date().getFullYear()){ %>
-                    <div class="copyright">© <%= moment(theme.aside.siteinfo.runtime).year() %>
-                        By
-                        <a class="footer-bar-link" href="/" rel="external nofollow"><%= config.author %></a>
-                    </div>
-                <% }else{ %>
-                    <div class="copyright">© <%= moment(theme.aside.siteinfo.runtime).year() %>
-                        - <%= new Date().getFullYear() %> By
-                        <a class="footer-bar-link" href="/" rel="external nofollow"><%= config.author %></a>
-                    </div>
-                <% } %>
-            </div>
-        </div>
-        <div class="footer-bar-right">
-            <% if(theme.footer.rss.enable){ %>
-                <a class="footer-bar-link" href="/rss/" rel="external nofollow"
-                   target="_self">订阅</a>
-            <% } %>
-            <a class="footer-bar-link" href="https://github.com/DuoSco/hexo-theme-solitude" rel="external nofollow"
-               target="_self">主题</a>
-            <% if(theme.site.icp){ %>
-                <a class="footer-bar-link" target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
-                   rel="noopener external nofollow noreferrer noopener">
-                    <%= theme.site.icp %>
-                </a>
-            <% } %>
-            <a class="footer-bar-link cc" href="<%- theme.footer.license.url %>" target="_self" rel="external nofollow">
-                <i class="scoicon sco-copyright-line"></i>
-                <i class="scoicon sco-creative-commons-by-line"></i>
-                <i class="scoicon sco-creative-commons-nc-line"></i>
-                <i class="scoicon sco-creative-commons-nd-line"></i>
-            </a>
-        </div>
-    </div>
-</div>
-<div class="needEndHide" id="cookies-window">
-    <div class="cookies-window-title">协议提醒助手</div>
-    <div class="cookies-window-content">
-        <span class="cookies-tip">查看本站为你的个人隐私做出的努力</span>
-        <a class="cookies-link" href="/privacy/" title="本站如何保护你的隐私" data-pjax-state="">
-            <i class="scoicon sco-arrow-right-circle-fill"></i>
-        </a>
-    </div>
-</div>
-<% if(theme.post.award.enable){%>
-    <div id="quit-box" onclick="RemoveRewardMask()" style="display: none"></div>
-<%} %>
-<% if(theme.comment.enable){ %>
-    <div class="comment-barrage">
-    </div>
-<% } %>
\ No newline at end of file
diff --git a/layout/partial/head.ejs b/layout/partial/head.ejs
deleted file mode 100755
index e73a6423..00000000
--- a/layout/partial/head.ejs
+++ /dev/null
@@ -1,35 +0,0 @@
-<% const cdn = theme.cdn.head %>
-
-<meta charset="UTF-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<%
-var title = '', subtitle = ''
-if (is_home()) {
-    title = config.title
-} else if (is_archive()) title = '归档 ' + (page.year || '')
-else if (is_category()) title = '分类 ' + page.category
-else if (is_tag()) title = '标签 ' + page.tag
-else if (page.type === '404') title = '404 ' + theme.errorpage.text
-else if (is_page() || is_post()) title = page.title
-if (is_home()) subtitle = config.subtitle ? ' - ' + config.subtitle : ''
-else subtitle = title ? ' | ' + config.title : config.title
-var description = page.desc || page.excerpt || config.description
--%>
-<title><%= title + subtitle %></title>
-<noscript>开启Javascript是必要的</noscript>
-<link rel="icon" type="image/x-icon" href="<%= url_for(theme.site.siteIcon) %>">
-<meta name="description" content="<%= description %>">
-<% if (theme.pwa.enable) { %>
-    <%- partial('partial/pwa') %>
-<% }else{ %>
-    <meta name="apple-mobile-web-app-title" content="<%= config.title %>">
-    <link rel="bookmark" href="<%= url_for(theme.site.siteIcon) %>">
-    <link rel="apple-touch-icon-precomposed" sizes="180x180" href="<%= url_for(theme.site.siteIcon) %>">
-<% } %>
-<%- css('/css/index') %>
-<%- partial('partial/compoment/inject/head', {cache: true}) %>
-<% if (theme.extends.head) for (const i of theme.extends.head){ %>
-    <%- i %>
-<% } %>
-<%- export_config() %>
\ No newline at end of file
diff --git a/layout/partial/header.ejs b/layout/partial/header.ejs
deleted file mode 100755
index cecd582a..00000000
--- a/layout/partial/header.ejs
+++ /dev/null
@@ -1,6 +0,0 @@
-<header class="<%= is_post() ? 'post-bg' : 'not-top-img' %>" id="page-header">
-    <%- partial('partial/nav', {cache: true}) %>
-    <% if(is_post()){ %>
-        <%- partial('partial/compoment/post/postMeta') %>
-    <% } %>    
-</header>
\ No newline at end of file
diff --git a/layout/partial/hometop.ejs b/layout/partial/hometop.ejs
deleted file mode 100755
index 0eac78ce..00000000
--- a/layout/partial/hometop.ejs
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="recent-top-post-group" id="recent-top-post-group">
-    <div class="recent-post-top" id="recent-post-top">
-        <div id="bannerGroup">
-            <div id="banners">
-                <%- partial('partial/compoment/hometop/groupTag') %>
-            </div>
-            <div class="categoryGroup">
-                <%- partial('partial/compoment/hometop/categoryGroup') %>
-            </div>
-        </div>
-        <div class="topGroup">
-            <%- partial('partial/compoment/hometop/topGroup') %>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/layout/partial/nav.ejs b/layout/partial/nav.ejs
deleted file mode 100755
index ce22cde6..00000000
--- a/layout/partial/nav.ejs
+++ /dev/null
@@ -1,34 +0,0 @@
-<nav id="nav" class="show">
-    <div id="nav-group">
-        <div id="blog_name">
-            <% if(theme.nav.left.enable){ %>
-                <div class="back-home-button" tabindex="-1">
-                    <i class="back-home-button-icon scoicon sco-more-fill"></i>
-                    <%- partial('partial/compoment/nav/left') %>
-                </div>
-            <% } %>
-            <a id="site-name" href="/" title="返回博客主页" target="_self">
-                    <% if (theme.site.name.class === 'i_class') { %>
-                        <i class="<%= theme.site.name.custom %>" style="font-size: 16px;"></i>
-                      <% } else if (theme.site.name.class === 'img') { %>
-                        <img src="<%= url_for(theme.site.name.custom) %>"></img>
-                      <% } else if (theme.site.name.class === 'text') { %>
-                        <span class="scoicon"><%= theme.site.name.custom %></span>
-                    <% } %>
-            </a>
-        </div>
-        <div id="page-name-mask">
-            <div id="page-name">
-                <a id="page-name-text" onclick="sco.toTop()"><%= page.title || config.title %></a>
-            </div>
-        </div>
-        <div id="menus">
-            <%- partial('partial/compoment/nav/menu') %>
-        </div>
-        <div id="nav-left">
-        </div>
-        <div id="nav-right">
-            <%- partial('partial/compoment/nav/right') %>
-        </div>
-    </div>
-</nav>
\ No newline at end of file
diff --git a/layout/partial/pwa.ejs b/layout/partial/pwa.ejs
deleted file mode 100644
index e4629963..00000000
--- a/layout/partial/pwa.ejs
+++ /dev/null
@@ -1,40 +0,0 @@
-<meta name="theme-color" content="<%- theme.pwa.theme_color %>">
-<link rel="manifest" href="<%- theme.pwa.manifest %>">
-<% if (theme.pwa.theme_color) { %><meta name="msapplication-TileColor" content="<%- theme.pwa.theme_color %>"><% } %>
-<% if (theme.pwa.mask_icon) { %><link rel="mask-icon" href="<%- theme.pwa.mask_icon %>" color="<%- theme.pwa.theme_color %>"><% } %>
-<% if (theme.pwa.apple_touch_icon) { %><link rel="apple-touch-icon" sizes="180x180" href="<%- theme.pwa.apple_touch_icon %>">
-<link rel="apple-touch-icon-precomposed" sizes="180x180" href="<%- theme.pwa.apple_touch_icon %>">
-<meta name="apple-mobile-web-app-title" content="<%= config.title %>"><% } %>
-<% if (theme.pwa.favicon_16_16) { %><link rel="icon" type="image/png" sizes="16x16" href="<%- theme.pwa.favicon_16_16 %>"><% } %>
-<% if (theme.pwa.favicon_32_32) { %><link rel="icon" type="image/png" sizes="32x32" href="<%- theme.pwa.favicon_32_32 %>"><% } %>
-<% if (theme.pwa.bookmark_icon) { %><link rel="bookmark" href="<%- theme.pwa.bookmark_icon %>"><% } %><% if (theme.pwa.startup_image_enable) { %>
-<% if (theme.pwa.favicon_2048_2732) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2048_2732 %>" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2732_2048) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2732_2048 %>" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1668_2388) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1668_2388 %>" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2388_1668) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2388_1668 %>" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1536_2048) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1536_2048 %>" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2048_1536) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2048_1536 %>" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1668_2224) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1668_2224 %>" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_1668_2224) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1668_2224 %>" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1620_2160) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1620_2160 %>" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2160_1620) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2160_1620 %>" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1290_2796) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1290_2796 %>" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2796_1290) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2796_1290 %>" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1179_2556) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1179_2556 %>" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2556_1179) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2556_1179 %>" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1248_2778) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1248_2778 %>" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2778_1248) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2778_1248 %>" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1170_2532) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1170_2532 %>" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2532_1170) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2532_1170 %>" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1125_2436) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1125_2436 %>" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2436_1125) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2436_1125 %>" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1242_2688) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1242_2688 %>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2688_1242) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2688_1242 %>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_828_1792) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_828_1792 %>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_1792_828) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1792_828 %>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_1242_2208) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1242_2208 %>" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_2208_1242) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2208_1242 %>" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_750_1334) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_750_1334 %>" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_1334_750) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1334_750 %>" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
-<% if (theme.pwa.favicon_640_1136) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_640_1136 %>" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
-<% if (theme.pwa.favicon_1136_640) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1136_640 %>" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %><% } %>
\ No newline at end of file
diff --git a/layout/partial/sidebar.ejs b/layout/partial/sidebar.ejs
deleted file mode 100755
index 54627a0a..00000000
--- a/layout/partial/sidebar.ejs
+++ /dev/null
@@ -1,31 +0,0 @@
-<div id="sidebar" style="zoom: 1;">
-    <div id="menu-mask" style="display: none;"></div>
-    <div id="sidebar-menus" class>
-        <span class="sidebar-menu-item-title">功能</span>
-        <div class="sidebar-menu-item">
-            <a class="darkmode_switchbutton menu-child" onclick="sco.switchDarkMode()" title="显示模式切换"
-               href="javascript:void(0);" rel="external nofollow">
-                <i class="scoicon sco-moon-clear-fill" style="font-size: 1rem;"></i>
-                <span>显示模式</span>
-            </a>
-        </div>
-        <% if(theme.nav.left.enable){ %>
-            <%- partial('partial/compoment/nav/left') %>
-        <% } %>
-        <%- partial('partial/compoment/nav/menu') %>
-        <span class="sidebar-menu-item-title">标签</span>
-        <div class="card-widget card-tags card-archives card-webinfo card-allinfo">
-            <div class="item-headline">
-                <i class="scoicon sco-price-tag-fill"></i>
-                <span>标签</span>
-            </div>
-            <div class="card-tag-cloud">
-                <% site.tags.each(function (tag) { %>
-                    <a href="<%= url_for(tag.path) %>"
-                       style="font-size: 1rem; color: #d3d3d3"><%= tag.name %>
-                        <sup><%= tag.length %></sup></a>
-                <% }) %>
-            </div>
-        </div>
-    </div>
-</div>    
\ No newline at end of file
diff --git a/layout/post.ejs b/layout/post.ejs
deleted file mode 100755
index 540f2b48..00000000
--- a/layout/post.ejs
+++ /dev/null
@@ -1,66 +0,0 @@
-<main class="layout" id="content-inner">
-    <div id="post">
-        <article class="post-content" id="article-container">
-            <%- page.content %>
-        </article>
-        <%- partial('partial/compoment/post/copyright') %>
-
-        <div class="post-tools-right">
-            <div class="tag_share">
-                <div class="post-meta__tag-list">
-                    <% page.tags.data.forEach(data => { %>
-                        <a href="<%= url_for(data.path) %>" class="post-meta__tags">
-                            <span class="tags-punctuation"></span>
-                            <%= data.name %>
-                            <span class="tagsPageCount"><%= data.length %></span>
-                        </a>
-                    <% }) %>
-                </div>
-            </div>
-        </div>
-
-        <% if(site.posts.length > 1){ %>
-            <%- partial('partial/compoment/post/postNav') %>
-        <% } %>
-
-        <%- related_posts(page, site.posts) %>
-
-        <% if(page.comment){ %>
-            <%- partial('partial/compoment/third-party/comments/comment') %>
-        <% } %>
-    </div>
-
-    <%- partial('partial/compoment/aside/aside') %>
-
-    <% if(theme.thirdparty.ai.enable){ %>
-        <script data-pjax defer>
-            // AI构造函数
-            new ChucklePostAI({
-                el: '#post #article-container',
-                key: '<%= theme.thirdparty.ai.key %>',
-                title_el: '.post-title',
-                rec_method: '<%= theme.thirdparty.ai.rec_method || 'web' %>',
-                interface: {
-                    name: "<%= theme.thirdparty.ai.ai_name || 'Solitude-AI' %>",
-                    introduce: "<%= theme.thirdparty.ai.ai_introduce || '我是文章辅助AI生成工具: Solitude-AI。你可以点击下方的按钮，让我生成本文简介、推荐相关文章等。' %>",
-                    version: "<%= theme.thirdparty.ai.ai_tips || 'GPT-4' %>",
-                },
-                <% if(theme.thirdparty.ai.hide_shuttle) { %>
-                    hide_shuttle: true,
-                <% } %><% if(theme.thirdparty.ai.typewriter === false) { %>
-                    typewriter: false,
-                <% } %><% if(theme.thirdparty.ai.speed !== 20) { %>
-                    speed: <%= theme.thirdparty.ai.speed %>,
-                <% } %><% if(theme.thirdparty.ai.BlackWhite_List.mode === 'black') { %>
-                    eliminate: [<%- theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', ') %>],
-                <% } else if(theme.thirdparty.ai.BlackWhite_List.mode === 'white') { %>
-                    whitelist: [<%- theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', ') %>],
-                <% } %><% if(page.ai_total_length) { %>
-                    total_length: <%= page.total_length %>,
-                <% } %><% if(page.ai_ratio_string) { %>
-                    ratio_string: "<%= page.ratio_string %>",
-                <% } %>
-            })
-        </script>
-    <% } %>
-</main>
\ No newline at end of file
diff --git a/layout/post.pug b/layout/post.pug
new file mode 100644
index 00000000..f4a0326c
--- /dev/null
+++ b/layout/post.pug
@@ -0,0 +1,41 @@
+extends includes/layout.pug
+
+block content
+  main.layout#content-inner
+    #post
+      article.post-content#article-container!= page.content
+      include includes/widgets/post/copyright
+      .post-tools-right
+        .tag_share
+          .post-meta__tag-list
+            each data in page.tags.data
+              a(href=url_for(data.path)).post-meta__tags
+                span.tags-punctuation
+                | #{data.name}
+                span.tagsPageCount #{data.length}
+      if site.posts.length > 1
+        include includes/widgets/post/postNav
+      != related_posts(page, site.posts)
+      if page.comment
+        include includes/widgets/third-party/comments/comment
+    include includes/widgets/aside/aside
+    if theme.thirdparty.ai.enable
+      script(data-pjax, defer).
+        new ChucklePostAI({
+          el: '#post #article-container',
+          key: '#{theme.thirdparty.ai.key}',
+          title_el: '.post-title',
+          rec_method: '#{theme.thirdparty.ai.rec_method || 'web'}',
+          interface: {
+            name: "#{theme.thirdparty.ai.ai_name || 'Solitude-AI'}",
+            introduce: "#{theme.thirdparty.ai.ai_introduce || '我是文章辅助AI生成工具: Solitude-AI。你可以点击下方的按钮，让我生成本文简介、推荐相关文章等。'}",
+            version: "#{theme.thirdparty.ai.ai_tips || 'GPT-4'}",
+          },
+          #{theme.thirdparty.ai.hide_shuttle ? 'hide_shuttle: true,' : ''},
+          #{theme.thirdparty.ai.typewriter === false ? 'typewriter: false,' : ''},
+          #{theme.thirdparty.ai.speed !== 20 ? `speed: ${theme.thirdparty.ai.speed},` : ''},
+          #{theme.thirdparty.ai.BlackWhite_List.mode === 'black' ? `eliminate: [${theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', ')}],` : ''},
+          #{theme.thirdparty.ai.BlackWhite_List.mode === 'white' ? `whitelist: [${theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', ')}],` : ''},
+          #{page.ai_total_length ? `total_length: ${page.total_length},` : ''},
+          #{page.ai_ratio_string ? `ratio_string: "${page.ratio_string}",` : ''}
+        })
\ No newline at end of file
diff --git a/layout/tag.ejs b/layout/tag.ejs
deleted file mode 100755
index 2de81920..00000000
--- a/layout/tag.ejs
+++ /dev/null
@@ -1,25 +0,0 @@
-<main class="layout" id="content-inner">
-    <div id="tag">
-        <div id="tag-page-tags">
-            <% site.tags.each(function (tag) { %>
-                <a href="<%= url_for(tag.path) %>" id="<%= tag.name %>" class="<%= tag.name === page.tag ? 'select' : '' %>">
-                    <span class="tags-punctuation"></span>
-                    <%= tag.name %>
-                    <span class="tagsPageCount"><%= tag.length %></span>
-                </a>
-            <% }) %>
-        </div>
-        <div class="recent-posts" id="recent-posts">
-            <% const currentTag = page.tag; %>
-            <% site.posts.each(post => { %>
-                <% post.tags.each(tag => { %>
-                    <% if (tag.name === currentTag) { %>
-                        <%- partial('partial/compoment/home/postList', {post: post}) %>
-                    <% } %>
-                <% }); %>
-            <% }); %>
-        </div>
-        <%- partial('partial/compoment/mixins/pagination') %>
-    </div>
-    <%- partial('partial/compoment/aside/aside') %>
-</main>
\ No newline at end of file
diff --git a/layout/tag.pug b/layout/tag.pug
new file mode 100644
index 00000000..adcba9cb
--- /dev/null
+++ b/layout/tag.pug
@@ -0,0 +1,19 @@
+extends includes/layout.pug
+
+block content
+  main.layout#content-inner
+    div#tag
+      div#tag-page-tags
+        each tag in site.tags.data
+          a(id=tag.name class=(tag.name === page.tag ? 'select' : '') href=url_for(tag.path))
+            span.tags-punctuation
+            | #{tag.name}
+            span.tagsPageCount #{tag.length}
+      div.recent-posts#recent-posts
+        - const currentTag = page.tag
+        each post in site.posts.data
+          each tag in post.tags.data
+            if tag.name === currentTag
+              include includes/widgets/home/postList
+      include includes/mixins/pagination
+    include includes/widgets/aside/aside
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..44775730
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,674 @@
+{
+  "name": "hexo-theme-butterfly",
+  "version": "4.11.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "hexo-theme-butterfly",
+      "version": "4.11.0",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "hexo-renderer-pug": "^3.0.0",
+        "hexo-renderer-stylus": "^3.0.0"
+      }
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
+      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg=="
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.4.tgz",
+      "integrity": "sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.4.tgz",
+      "integrity": "sha512-7uIFwVYpoplT5jp/kVv6EF93VaJ8H+Yn5IczYiaAi98ajzjfoZfslet/e0sLh+wVBjb2qqIut1b0S26VSafsSQ==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
+    "node_modules/assert-never": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz",
+      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw=="
+    },
+    "node_modules/babel-walk": {
+      "version": "3.0.0-canary-5",
+      "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
+      "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
+      "dependencies": {
+        "@babel/types": "^7.9.6"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
+      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.1",
+        "set-function-length": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/character-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
+      "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==",
+      "dependencies": {
+        "is-regex": "^1.0.3"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/constantinople": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
+      "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
+      "dependencies": {
+        "@babel/parser": "^7.6.0",
+        "@babel/types": "^7.6.1"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
+      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/doctypes": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
+      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ=="
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "dependencies": {
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
+      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hexo-renderer-pug": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hexo-renderer-pug/-/hexo-renderer-pug-3.0.0.tgz",
+      "integrity": "sha512-PmbLx6VkNv+mPLOe97OC4F8iTzTuj665dSYN7bZKArd4M/q7gb2tNs29VGuAOC50i9tvWY2f+tPQimf0GZ9Hyw==",
+      "dependencies": {
+        "pug": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/hexo-renderer-stylus": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hexo-renderer-stylus/-/hexo-renderer-stylus-3.0.0.tgz",
+      "integrity": "sha512-wgKOcjUzq1i4Y70luoyYDbh91QeQcDzJO+v1598LgY+IdREFAm+vy1MWtl/TZsVXyPaEtsULNi3Vi22hdsPUSA==",
+      "dependencies": {
+        "nib": "^1.2.0",
+        "stylus": "^0.59.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/is-core-module": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "dependencies": {
+        "hasown": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-expression": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
+      "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/js-stringify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
+      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g=="
+    },
+    "node_modules/jstransformer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
+      "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
+      "dependencies": {
+        "is-promise": "^2.0.0",
+        "promise": "^7.0.1"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/nib": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/nib/-/nib-1.2.0.tgz",
+      "integrity": "sha512-7HgrnMl/3yOmWykueO8/D0q+0iWwe7Z+CK2Eaq/xQV8w1hK80WN1oReRQkfkrztbAAnp/nTHkUSl5EcVkor6JQ==",
+      "engines": {
+        "node": "*"
+      },
+      "peerDependencies": {
+        "stylus": "*"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
+    "node_modules/pug": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz",
+      "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==",
+      "dependencies": {
+        "pug-code-gen": "^3.0.2",
+        "pug-filters": "^4.0.0",
+        "pug-lexer": "^5.0.1",
+        "pug-linker": "^4.0.0",
+        "pug-load": "^3.0.0",
+        "pug-parser": "^6.0.0",
+        "pug-runtime": "^3.0.1",
+        "pug-strip-comments": "^2.0.0"
+      }
+    },
+    "node_modules/pug-attrs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
+      "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "js-stringify": "^1.0.2",
+        "pug-runtime": "^3.0.0"
+      }
+    },
+    "node_modules/pug-code-gen": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz",
+      "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "doctypes": "^1.1.0",
+        "js-stringify": "^1.0.2",
+        "pug-attrs": "^3.0.0",
+        "pug-error": "^2.0.0",
+        "pug-runtime": "^3.0.0",
+        "void-elements": "^3.1.0",
+        "with": "^7.0.0"
+      }
+    },
+    "node_modules/pug-error": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz",
+      "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ=="
+    },
+    "node_modules/pug-filters": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
+      "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "jstransformer": "1.0.0",
+        "pug-error": "^2.0.0",
+        "pug-walk": "^2.0.0",
+        "resolve": "^1.15.1"
+      }
+    },
+    "node_modules/pug-lexer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
+      "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
+      "dependencies": {
+        "character-parser": "^2.2.0",
+        "is-expression": "^4.0.0",
+        "pug-error": "^2.0.0"
+      }
+    },
+    "node_modules/pug-linker": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
+      "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
+      "dependencies": {
+        "pug-error": "^2.0.0",
+        "pug-walk": "^2.0.0"
+      }
+    },
+    "node_modules/pug-load": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
+      "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "pug-walk": "^2.0.0"
+      }
+    },
+    "node_modules/pug-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
+      "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
+      "dependencies": {
+        "pug-error": "^2.0.0",
+        "token-stream": "1.0.0"
+      }
+    },
+    "node_modules/pug-runtime": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
+      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg=="
+    },
+    "node_modules/pug-strip-comments": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
+      "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
+      "dependencies": {
+        "pug-error": "^2.0.0"
+      }
+    },
+    "node_modules/pug-walk": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
+      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ=="
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
+    "node_modules/set-function-length": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
+      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "dependencies": {
+        "define-data-property": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/stylus": {
+      "version": "0.59.0",
+      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz",
+      "integrity": "sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==",
+      "dependencies": {
+        "@adobe/css-tools": "^4.0.1",
+        "debug": "^4.3.2",
+        "glob": "^7.1.6",
+        "sax": "~1.2.4",
+        "source-map": "^0.7.3"
+      },
+      "bin": {
+        "stylus": "bin/stylus"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://opencollective.com/stylus"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/token-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
+      "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg=="
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/with": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
+      "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
+      "dependencies": {
+        "@babel/parser": "^7.9.6",
+        "@babel/types": "^7.9.6",
+        "assert-never": "^1.2.1",
+        "babel-walk": "3.0.0-canary-5"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    }
+  }
+}
diff --git a/package.json b/package.json
index 5146ab2f..444035e9 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-solitude",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "A beautiful, powerful, and efficient Hexo theme developed by the DuoSco team",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -15,7 +15,7 @@
     "hexo-theme-solitude"
   ],
   "author": "Hexo-Theme-Solitude<admin@wzsco.top>",
-  "license": "MIT",
+  "license": "GNU",
   "bugs": {
     "url": "https://github.com/DuoSco/Hexo-theme-solitude/issues"
   },
diff --git a/scripts/event/init.js b/scripts/event/init.js
old mode 100755
new mode 100644
diff --git a/scripts/event/page.js b/scripts/event/page.js
old mode 100755
new mode 100644
index 99bf574c..cb8f5c96
--- a/scripts/event/page.js
+++ b/scripts/event/page.js
@@ -38,3 +38,17 @@ hexo.extend.generator.register('categories', function(locals) {
     }
   };
 });
+
+// generate echarts Page
+hexo.extend.generator.register('echarts', function(locals) {
+  if(!this.theme.config.about.echarts && !this.theme.config.about.enable)return
+  return {
+    path: 'echart/index.html',
+    layout: ['page'],
+    data: {
+      title: '博客统计',
+      type: 'echarts',
+      comment: false
+    }
+  };
+});
\ No newline at end of file
diff --git a/scripts/event/welcome.js b/scripts/event/welcome.js
old mode 100755
new mode 100644
diff --git a/scripts/filter/checkThemeConfig.js b/scripts/filter/checkThemeConfig.js
old mode 100755
new mode 100644
index 80f0314d..0b1f4806
--- a/scripts/filter/checkThemeConfig.js
+++ b/scripts/filter/checkThemeConfig.js
@@ -1,7 +1,6 @@
 'use strict';
 
 hexo.extend.filter.register('before_post_render', () => {
-
     const logger = hexo.log;
     const theme = hexo.theme.config;
     const config = hexo.config;
diff --git a/scripts/filter/default.js b/scripts/filter/default.js
old mode 100755
new mode 100644
diff --git a/scripts/filter/lazyload.js b/scripts/filter/lazyload.js
old mode 100755
new mode 100644
diff --git a/scripts/filter/randomPosts.js b/scripts/filter/randomPosts.js
old mode 100755
new mode 100644
index 19efe98e..6ef0f9e5
--- a/scripts/filter/randomPosts.js
+++ b/scripts/filter/randomPosts.js
@@ -4,6 +4,5 @@ hexo.extend.filter.register('after_render:html', function (data) {
       if (post.random !== false) posts.push(post.path)
     })
     data += `<script>const posts=${JSON.stringify(posts)};function toRandomPost(){ pjax.loadUrl('/'+posts[Math.floor(Math.random()*posts.length)]); };</script>`
-    //data += `<script>const posts=${JSON.stringify(posts)};function toRandomPost(){ window.pjax ?  : window.open('/'+posts[Math.floor(Math.random()*posts.length)], "_self"); };</script>`
     return data
 })
\ No newline at end of file
diff --git a/scripts/helper/charts.js b/scripts/helper/echarts.js
old mode 100755
new mode 100644
similarity index 89%
rename from scripts/helper/charts.js
rename to scripts/helper/echarts.js
index 5ac88cf7..206e7485
--- a/scripts/helper/charts.js
+++ b/scripts/helper/echarts.js
@@ -1,36 +1,35 @@
 hexo.extend.filter.register('after_render:html', function (locals) {
-    try {
-        const cheerio = require('cheerio')
-        const $ = cheerio.load(locals)
-        const post = $('#posts-chart')
-        const tag = $('#tags-chart')
-        const category = $('#categories-chart')
-        const htmlEncode = false
+    const {config, theme} = this
+    if (!theme.config.about.echarts.enable) return
 
-        if (post.length > 0 || tag.length > 0 || category.length > 0) {
-            if (post.length > 0 && $('#postsChart').length === 0) {
-                if (post.attr('data-encode') === 'true') htmlEncode = true
-                post.after(postsChart(post.attr('data-start')))
-            }
-            if (tag.length > 0 && $('#tagsChart').length === 0) {
-                if (tag.attr('data-encode') === 'true') htmlEncode = true
-                tag.after(tagsChart(tag.attr('data-length')))
-            }
-            if (category.length > 0 && $('#categoriesChart').length === 0) {
-                if (category.attr('data-encode') === 'true') htmlEncode = true
-                category.after(categoriesChart(category.attr('data-parent')))
-            }
+    const cheerio = require('cheerio')
+    const $ = cheerio.load(locals)
+    const post = $('#posts-chart')
+    const tag = $('#tags-chart')
+    const category = $('#categories-chart')
+    const htmlEncode = false
 
-            if (htmlEncode) {
-                return $.root().html().replace(/&amp;#/g, '&#')
-            } else {
-                return $.root().html()
-            }
-        } else {
-            return locals
+    if (post.length > 0 || tag.length > 0 || category.length > 0) {
+        if (post.length > 0 && $('#postsChart').length === 0) {
+            if (post.attr('data-encode') === 'true') htmlEncode = true
+            post.after(postsChart(post.attr('data-start')))
+        }
+        if (tag.length > 0 && $('#tagsChart').length === 0) {
+            if (tag.attr('data-encode') === 'true') htmlEncode = true
+            tag.after(tagsChart(tag.attr('data-length')))
+        }
+        if (category.length > 0 && $('#categoriesChart').length === 0) {
+            if (category.attr('data-encode') === 'true') htmlEncode = true
+            category.after(categoriesChart(category.attr('data-parent')))
         }
-    } catch (e) {
 
+        if (htmlEncode) {
+            return $.root().html().replace(/&amp;#/g, '&#')
+        } else {
+            return $.root().html()
+        }
+    } else {
+        return locals
     }
 }, 15)
 
diff --git a/scripts/helper/getArchiveLength.js b/scripts/helper/getArchiveLength.js
old mode 100755
new mode 100644
diff --git a/scripts/helper/randomLinks.js b/scripts/helper/randomLinks.js
deleted file mode 100755
index 8eda2b7a..00000000
--- a/scripts/helper/randomLinks.js
+++ /dev/null
@@ -1,16 +0,0 @@
-hexo.extend.helper.register('randomLinks', function(){
-    const links = []
-    const data = this.site.data.links.links
-    if(!data)return
-    data.forEach(x => {
-        if(x.type === "item"){
-            x.link_list.forEach(y => {
-                links.push({
-                    name: y.name,
-                    link: y.link
-                })
-            })
-        }
-    });
-    return `<script>const links=${JSON.stringify(links)};function travelling(){const link=links[utils.randomNum(links.length)];utils.snackbarShow('您即将前往 ⌈ '+link.name+' ⌋ , 安全性未知',false,3000);setTimeout(()=>{window.open(link.link,"_blank")},3000)};function randomLinksList(){let data='';let linksCopy = [...links];let count = Math.min(3, linksCopy.length);for (let i = 0; i < count; i++) {let index = utils.randomNum(linksCopy.length);const link = linksCopy[index];data += '<a class="footer-item" href="' + link.link + '" target="_blank" rel="noopener nofollow">' + link.name + '</a>';linksCopy.splice(index, 1);}document.getElementById('friend-links-in-footer').innerHTML = data + '<a class="footer-item" href="/links/">更多</a>';};</script>`
-})
\ No newline at end of file
diff --git a/scripts/helper/related_post.js b/scripts/helper/related_post.js
old mode 100755
new mode 100644
diff --git a/scripts/helper/themeJsExport.js b/scripts/helper/themeJsExport.js
deleted file mode 100755
index 3f9f1508..00000000
--- a/scripts/helper/themeJsExport.js
+++ /dev/null
@@ -1,81 +0,0 @@
-hexo.extend.helper.register('export_config', function () {
-    const {config, theme} = this, lang = hexo.theme.i18n.get(config.language || 'zh-CN')
-    let exportGlobalConfig = {
-        root: config.root,
-        runtime: theme.aside.siteinfo.runtimeenable ? theme.aside.siteinfo.runtime : false,
-        lazyload: {
-            enable: theme.lazyload.enable,
-            error: theme.lazyload.errorimg
-        },
-        hightlight: {
-            enable: theme.hightlight.enable,
-            limit: theme.hightlight.hightlimit
-        },
-        lightbox: theme.lightbox,
-        randomlinks: theme.footer.randomlink,
-        lang: {
-            theme: {
-                dark: lang['theme.dark'],
-                light: lang['theme.light'],
-            },
-            copy: {
-                success: lang['copy.success'],
-                error: lang['copy.error'],
-            },
-            backtop: lang['nav.backtop'],
-            time: {
-                recent: lang['time.recent'],
-                yesterday: lang['time.yesterday'],
-                berforeyesterday: lang['time.berforeyesterday'],
-                daybefore: lang['time.daybefore'],
-                runtime: lang['time.runtime'],
-            },
-            sayhello: {
-                morning: lang['sayhello.morning'],
-                noon: lang['sayhello.noon'],
-                afternoon: lang['sayhello.afternoon'],
-                night: lang['sayhello.night'],
-                goodnight: lang['sayhello.goodnight'],
-            },
-            search: {
-                empty: lang['search.empty'],
-                hit: lang['search.hit'],
-                placeholder: lang['search.placeholder'],
-            }
-        },
-        covercolor: theme.post.covercolor.enable,
-        comment: {
-            enable: theme.comment.enable,
-            twikooUrl: theme.comment.twikoo.envId,
-            twikooAccessToken: theme.comment.twikoo.accessToken
-        },
-        rightmenu:{
-            enable: theme.rightmenu.enable
-        }
-    }
-
-    // 搜索数据
-    if (theme.thirdparty.search.local_search.enable) exportGlobalConfig = Object.assign(exportGlobalConfig, {
-        localsearch: {
-            preload: theme.thirdparty.search.local_search.preload,
-            path: theme.thirdparty.search.local_search.path || '/search.xml'
-        }
-    })
-    if (theme.thirdparty.search.algolia_search.enable) exportGlobalConfig = Object.assign(exportGlobalConfig, {
-        algolia: {
-            appId: config.algolia.appId,
-            apiKey: config.algolia.apiKey,
-            indexName: config.algolia.indexName
-        }
-    })
-
-    const exportPageConfig = {
-        is_home: this.is_home(),
-        is_post: this.is_post(),
-        is_page: this.is_page(),
-        page: this.is_page() && (this.page.type || 'default'),
-        toc: this.page.toc,
-        comment: this.page.comment,
-    }
-    return `<script>var GLOBALCONFIG = ${JSON.stringify(exportGlobalConfig)};</script><script id="site-config">var PAGECONFIG = ${JSON.stringify(exportPageConfig)};</script>`;
-})
\ No newline at end of file
diff --git a/scripts/tags/bvideo.js b/scripts/tags/bvideo.js
old mode 100755
new mode 100644
diff --git a/scripts/tags/fold.js b/scripts/tags/fold.js
old mode 100755
new mode 100644
diff --git a/scripts/tags/link.js b/scripts/tags/link.js
old mode 100755
new mode 100644
diff --git a/scripts/tags/note.js b/scripts/tags/note.js
old mode 100755
new mode 100644
diff --git a/scripts/tags/tabs.js b/scripts/tags/tabs.js
old mode 100755
new mode 100644
diff --git a/scripts/tags/timeline.js b/scripts/tags/timeline.js
old mode 100755
new mode 100644
diff --git a/source/.DS_Store b/source/.DS_Store
old mode 100755
new mode 100644
index 2c88a3f8dc042087f00caef2bd272bddf88e7942..55cf87a2a2484c3de9956e092f8c94d16c3abb28
GIT binary patch
delta 145
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{MGjUEV6q~50$jG)aU^gQp+hiUA>&aJzOF0eA
zP0Vx@Oic_XdkITV&J$6a%r0m(dAg9w<hjCX8_Q~07PE732r>hW00IGSAmIu!ZDZkg
c=E?jrjv(t87#SE?Kr|D?KCsy4c%C`T0NueES^xk5

delta 523
zcmZoMXmOBWU|?W$DortDU;r^WfEYvza8E20o2aMAD6lbLH{<37%;_vZVk+Zeb`Fk-
z4J?cTlX;k|8Fx+gU@Fv<s;)LPHZjmqFf=wbtkqGdwlo5AOpMKHYdJYYmG!NI;<Iyd
z^YVKpKV*_;?48WWY%k2rkjaqCke*atT#%HLp9Hj#472Kcf%>2(<)j-1C+FuD07V!W
znD#j#WODOeT%dMv=={xm-Rp4F5m`0`k8D8(vZ)_HW<%{O3ogpz$jQ%32MRGxwq;hI
z?7+;*Lz#a>LH=Q4$YLl4nGQERky(?SnIQ)lVo8&2m>M`O&CGydZD3(M`6!d4AXpq(
y{pNKdVayX7cm$b2&ILv%H;`}zMd{{=%-@+O^NTo6cIOe`V1&dr!{&INIm`g>{(sv5

diff --git a/scripts/.DS_Store b/source/css/.DS_Store
similarity index 73%
rename from scripts/.DS_Store
rename to source/css/.DS_Store
index 73165049a7ed601116a4123b31366386c50b1d92..87fae3958496cb0eacfe644ff68b1f22eed51ca1 100644
GIT binary patch
delta 468
zcmZXRu}i~16vn^YsSOp0L+n}|+$2;{Iygw(oL!uhB*rLQ5^ZDAsUXGKa<f9GE`mt@
z4gVi;((gLuYTzLE-tWElz3;}Iap$EamYS2h)+E^4SOwq!>p+GCIm#1N#MM;Jq-Rnt
zE)b(&GSj};K3w5F!2?S45gIg7MMRGE_}~eC=O6!o2H6yf)e%A{eJ<Oci7DP58NElT
zpJjW^is@tV<aWEeJDUgld-_WpjjS}v;b}itMV@j1bz_+gGd8<KV#{%Un61k(<Sj?1
zi=;5U{*wg;#*LA+V~^<D!j1zv64H+t*S3VYBXzoo8(K`MbTBaO>4UOsoGVUvtxfnG
bDyM3=p367myL?OS`8}7b3xcT5{CD{WwJ&$E

delta 196
zcmZoMXfc=|#>B)qu~2NHo}w@t0|Nsi1A_nqLy2cjesWSye$vLmm5iJqaaM*@hO)_0
zEUKJf7Lb=W`3g%DhncyFj)J+V+2lA@dv&-JLrGb1QC?1dUOL1`1~!H?hD?SWh7zF0
zqRBoi^1N&e89;UpLjhQ%ibbB21t^=ykj_v%c?FC7=GkmHj2j!iF>Pk&;O79kakC)D
Wcjn3bB90tDBSFq&*&HFVh8X~+%PUy`

diff --git a/source/css/_extra/console.styl b/source/css/_extra/console.styl
index 09c1ec66..e82eee38 100644
--- a/source/css/_extra/console.styl
+++ b/source/css/_extra/console.styl
@@ -287,6 +287,7 @@
         flex-direction column
         align-content space-between
         border var(--style-border)
+        transition all .2s ease 0s
         background var(--sco-maskbgdeep)
         padding 8px 16px
 
diff --git a/source/css/_layout/articleSort.styl b/source/css/_layout/articleSort.styl
index a08875ca..63eab58e 100644
--- a/source/css/_layout/articleSort.styl
+++ b/source/css/_layout/articleSort.styl
@@ -87,6 +87,7 @@
   text-overflow ellipsis
   width 100%
   font-size .7rem
+  max-height 50px
 
 .article-sort-item-tags a
   color var(--sco-fontcolor)
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 2e4a7b23..316eadc0 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -885,9 +885,6 @@ div#power-star-title
       background: #00000015
       color: var(--sco-black)
 
-    &:hover
-      background: var(--sco-black)
-
     #aside-content
       .card-info
         .card-info-social-icons
diff --git a/source/css/_layout/index.styl b/source/css/_layout/index.styl
index 42befe24..47cb9ce3 100644
--- a/source/css/_layout/index.styl
+++ b/source/css/_layout/index.styl
@@ -204,4 +204,105 @@
 +minWidth768()
   .needEndHide.hide
     bottom: -200px !important
-    opacity: 0
\ No newline at end of file
+    opacity: 0
+
+.layout
+  display flex
+  margin 0 auto
+  padding 1rem 1.5rem
+  max-width 1200px
+
+  &#content-inner
+    max-width 1400px
+
+  &.hide-aside
+    max-width 1400px
+
+    > div
+      width 100% !important
+
+  #aside-content
+    +maxWidth768()
+      z-index 2
+      background var(--sco-background)
+      padding 0 1rem
+      display flex
+      flex-direction column
+      width 100%
+
+  > div:first-child
+    width calc(100% - 300px)
+
+  > div:first-child:not(.recent-posts)
+    box-shadow var(--sco-shadow-border)
+    padding 1rem 2rem
+    border-radius 12px
+    width calc(100% - 300px)
+    background: var(--sco-card-bg);
+    border: var(--style-border);
+    align-self flex-start
+    animation slide-in .6s .1s backwards
+    position relative
+    overflow hidden
+
+  > #page
+    padding: 0;
+    width: calc(100% - 300px);
+    align-self: flex-start;
+    animation: slide-in 0.6s 0.1s backwards;
+    position: relative;
+    overflow: hidden;
+
+  +maxWidth768()
+    padding: 0
+
+    > div:first-child:not(.recent-posts)
+      border-radius: 0;
+      padding: 0 1rem !important;
+      box-shadow: none !important;
+      background: var(--sco-background)
+      z-index: 10
+
+  +maxWidth900()
+    flex-direction: column
+
+  +maxWidth1200()
+    > div:first-child
+      width 100% !important
+
+  +minWidth1300()
+    justify-content space-between
+
+  +minWidth2000()
+    max-width 1500px
+
+    &.hide-aside
+      max-width 1300px
+
++maxWidth768()
+  .post
+    .layout
+      > #post, #page
+        border-radius 12px 12px 0 0
+
+      &#content-inner
+        background: var(--sco-main)
+
+  .page
+    .layout
+      > #post, #page
+        border-radius: 12px 12px 0 0
+
+      &#content-inner
+        background: var(--sco-background)
+
++minWidth900()
+  html.hide-aside .layout
+    -webkit-box-pack: center
+    justify-content: center
+
+  html.hide-aside .layout > .aside-content
+    display: none
+
+  html.hide-aside .layout > div:first-child
+    width: 100%
\ No newline at end of file
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
deleted file mode 100644
index 2e78b8c7..00000000
--- a/source/css/_layout/layout.styl
+++ /dev/null
@@ -1,100 +0,0 @@
-.layout
-  display flex
-  margin 0 auto
-  padding 1rem 1.5rem
-  max-width 1200px
-
-  &#content-inner
-    max-width 1400px
-
-  &.hide-aside
-    max-width 1400px
-
-    > div
-      width 100% !important
-
-  #aside-content
-    +maxWidth768()
-      z-index 2
-      background var(--sco-background)
-      padding 0 1rem
-      display flex
-      flex-direction column
-      width 100%
-
-  > div:first-child
-    width calc(100% - 300px)
-
-  > div:first-child:not(.recent-posts)
-    box-shadow var(--sco-shadow-border)
-    padding 1rem 2rem
-    border-radius 12px
-    width calc(100% - 300px)
-    background: var(--sco-card-bg);
-    border: var(--style-border);
-    align-self flex-start
-    animation slide-in .6s .1s backwards
-    position relative
-    overflow hidden
-
-  > #page
-    padding: 0;
-    width: calc(100% - 300px);
-    align-self: flex-start;
-    animation: slide-in 0.6s 0.1s backwards;
-    position: relative;
-    overflow: hidden;
-
-  +maxWidth768()
-    padding: 0
-
-    > div:first-child:not(.recent-posts)
-      border-radius: 0;
-      padding: 0 1rem !important;
-      box-shadow: none !important;
-      background: var(--sco-background)
-      z-index: 10
-
-  +maxWidth900()
-    flex-direction: column
-
-  +maxWidth1200()
-    > div:first-child
-      width 100% !important
-
-  +minWidth1300()
-    justify-content space-between
-
-  +minWidth2000()
-    max-width 1500px
-
-    &.hide-aside
-      max-width 1300px
-
-+maxWidth768()
-  .post
-    .layout
-      > #post, #page
-        border-radius 12px 12px 0 0
-
-      &#content-inner
-        background: var(--sco-main)
-
-  .page
-    .layout
-      > #post, #page
-        border-radius: 12px 12px 0 0
-
-      &#content-inner
-        background: var(--sco-background)
-
-+minWidth900()
-  html.hide-aside .layout
-    -webkit-box-pack: center
-    justify-content: center
-
-  html.hide-aside .layout > .aside-content
-    display: none
-
-  html.hide-aside .layout > div:first-child
-    width: 100%
\ No newline at end of file
diff --git a/source/css/_page/error.styl b/source/css/_page/error.styl
index 10083685..1d2eb085 100644
--- a/source/css/_page/error.styl
+++ b/source/css/_page/error.styl
@@ -26,7 +26,7 @@
 
     .error-img
       flex: 1 1 0
-      height: 90%
+      height: 100%
       width: 600px
       border-top-left-radius: 8px
       border-bottom-left-radius: 8px
diff --git a/source/css/_page/link.styl b/source/css/_page/link.styl
index ab7efe42..4d430b36 100644
--- a/source/css/_page/link.styl
+++ b/source/css/_page/link.styl
@@ -427,4 +427,6 @@
       box-shadow var(--sco-shadow-main)
 
   .site-card-group
-    padding 20px 0
\ No newline at end of file
+    padding 20px 0
+#friendlink_checkboxs input
+  margin-right 4px
\ No newline at end of file
diff --git a/source/css/index.styl b/source/css/index.styl
index 4010aa3a..eee9029d 100644
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -23,15 +23,15 @@ if hexo-config('thirdparty.comment.enable')
 @import '_extra/console.styl'
 
 // rightmenu
-if hexo-config('rightmenu')
+if hexo-config('rightside.enable')
   @import '_extra/rightmenu.styl'
 
 // search
-if hexo-config('thirdparty.search.algolia_search.enable')
-  @import '_search/algolia-search'
-
-if hexo-config('thirdparty.search.local_search.enable')
-  @import '_search/local-search'
+if hexo-config('thirdparty.search.enable')
+  if hexo-config('thirdparty.search.type') == 'algolia'
+    @import '_search/algolia-search'
+  else if hexo-config('thirdparty.search.type') == 'local'
+    @import '_search/local-search'
 
 // dark
 @import '_mode/*'
\ No newline at end of file
diff --git a/source/img/.DS_Store b/source/img/.DS_Store
deleted file mode 100755
index 6345b642b57e1f6fedca0c8178fe69a81ea6bbea..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHK%}T>S5Z>*NO(;SS3gRi?wP<6jAYNju2d_r-pi&bPY%tAAo7zJu<N@@Bd=Otp
zXLdJIsoq4S%)rdInVm^8--g``V~o4w&}OW`7&AZ-OD33a1m{r~q@+D%KrZhQohITg
zNJOv@OOF4^0Ipq?WvtI4HemDXho8g|==Qr5`TBE_!DRHPSNb)0OyW`2YQ6DNxl&!J
z88xGB+<1L4@iIRfk6eFvg;(c7BtbFugNrzt^cri&BF+3bjfOHI4kHM;zKqjQOk6Qe
z!;#GO)P!LgX0Ne1o!aeAt7+NoJ$u%)rU$!l(P{6`W~Q;ewR3pZdq@VUc$RO?IDDN_
zRy7vz0)x4lp1fh2i1Z%3MMe=xNDL4I#K1B!p!YbVzDz|?EyMsZ@GA`9{$PP3IvR6@
za_ayiTL8ccxTU}te;hH#(&%W+6~YV%SE+z1mFpIRt90;NI?mCUD^%%>>*j;&Cv)AQ
zaQSq&za_&NcNCH(28e;L3}EjE(!lfo<mdih29Y5Kh=Ju~fLFR+*M-{j*}70Ap0yU}
sEhq}c<qAJjU?7iTh{dCL15^t5EgS$k8gqr<0ihoONdp;T;7=L&07ouXyZ`_I

diff --git a/source/js/.DS_Store b/source/js/.DS_Store
deleted file mode 100755
index 6b30fecf9c00b585f8a1c9f2499da858c1363864..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHKL5tHs6n@jK?UY66K|ur|;B{GBy9(kZ*4=|wBYIG&i76V*W|k(kN-5;-?r+(<
zKg7SI-<z40)<%ya`X0RbX5M^nl6*7FWQa(O=jo8BPedBd*y^EZFz#pHvX+l@fy$2Y
zj><>5d7b1Y*<wrJZ&ZNiu0tus^ojOqbN+ZyJb>?ivu0nvLsR-l70QCrwYg^Q`R};N
zqCD~I;!ARpXJs`Qd{wQT_N7i&clEA*8ND@&sEVt3IgV$~x%I@DJh`aH$<u7QnDnna
zG({C>#dKy9vUCc{i)UGpn#I`6i?p=4k?YVs-JA5UFPFp7!C)^Kj_wRsd%^PFZ8Q!>
zcUP;PzIyZ4{l}B{`Eg-R?KhIbYPNRS;{}|dvZ26-XjbH=c!N0SXv%30Wn!8&si|&&
zv#w^Bj={~4(V)Hh{1aPa><a9h$|in`-(r1qG{r;#Q9u-ERKV|YdbhDxf}(&Z@INcS
z`$GU{3_aEk?bd<9UIBn@gsq{@zk-|-cnm$(4$%WsE*0ofmA_&rmyUSgd7;PJp-U&_
zFCWT3S@|1^vQNkOfu)lQ9ZD$*hyt4m?6_v1&;O%e-~Tt0q$LW70{@f(s(lz8j`2zU
zY~A`eK5GN`D>xhTYKK2kP_aibxO@~}gIhy9;0iGGSUW@nCO-mJ1}Q{=KdQiY9zly&

diff --git a/source/js/commentBarrage.js b/source/js/commentBarrage.js
old mode 100755
new mode 100644
index a9a91aa5..71a44e68
--- a/source/js/commentBarrage.js
+++ b/source/js/commentBarrage.js
@@ -3,9 +3,9 @@ function initializeCommentBarrage() {
     let e = {
         maxBarrage: 1,
         barrageTime: 8e3,
-        twikooUrl: GLOBALCONFIG.comment.twikooUrl,
+        twikooUrl: GLOBAL_CONFIG.comment.twikoo.url,
         pageUrl: window.location.pathname,
-        accessToken: GLOBALCONFIG.comment.twikooAccessToken,
+        accessToken: GLOBAL_CONFIG.comment.twikoo.accessToken,
     };
     new class {
         commentInterval = null
@@ -107,11 +107,11 @@ function initializeCommentBarrage() {
         async initCommentBarrage() {
             if (localStorage.getItem("commentBarrageSwitch") != null) {
                 document.querySelector(".comment-barrage").style.display = "flex";
-                GLOBALCONFIG.rightmenu.enable && (document.querySelector(".menu-commentBarrage-text").textContent = "关闭热评");
+                GLOBAL_CONFIG.rightside.enable && (document.querySelector(".menu-commentBarrage-text").textContent = "关闭热评");
                 document.querySelector("#consoleCommentBarrage").classList.add("on");
             } else {
                 document.querySelector(".comment-barrage").style.display = "none";
-                GLOBALCONFIG.rightmenu.enable && (document.querySelector(".menu-commentBarrage-text").textContent = "显示热评");
+                GLOBAL_CONFIG.rightside.enable && (document.querySelector(".menu-commentBarrage-text").textContent = "显示热评");
                 document.querySelector("#consoleCommentBarrage").classList.remove("on");
             }
             const comments = await this.fetchComments();
diff --git a/source/js/extend/console/comment.js b/source/js/extend/console/comment.js
old mode 100755
new mode 100644
index 6e9a4814..41c07759
--- a/source/js/extend/console/comment.js
+++ b/source/js/extend/console/comment.js
@@ -19,7 +19,7 @@ const getComment = () => {
 
     const runTwikoo = () => {
         twikoo.getRecentComments({
-            envId: GLOBALCONFIG.comment.twikooUrl,
+            envId: GLOBAL_CONFIG.comment.twikoo.url,
             region: '',
             pageSize: 6,
             includeReply: true
diff --git a/source/js/extend/covercolor/local.js b/source/js/extend/covercolor/local.js
old mode 100755
new mode 100644
index 10bc7ed6..fed51d3e
--- a/source/js/extend/covercolor/local.js
+++ b/source/js/extend/covercolor/local.js
@@ -144,7 +144,7 @@ function initThemeColor() {
     let themeColor;
     if (currentTop > 0) {
         themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-card-bg');
-    } else if (PAGECONFIG.is_post) {
+    } else if (PAGE_CONFIG.is_post) {
         themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-main');
     } else {
         themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-background');
diff --git a/source/js/extend/search/algolia-search.js b/source/js/extend/search/algolia-search.js
old mode 100755
new mode 100644
index 282f6497..797fa9d7
--- a/source/js/extend/search/algolia-search.js
+++ b/source/js/extend/search/algolia-search.js
@@ -46,7 +46,7 @@ class search {
     }
 
     static search() {
-        const algolia = GLOBALCONFIG.algolia, that = this
+        const algolia = GLOBAL_CONFIG.algolia, that = this
         const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
         if (!isAlgoliaValid) {
             return console.error('Algolia setting is invalid!')
@@ -65,7 +65,7 @@ class search {
             showReset: false,
             showSubmit: false,
             autofocus: true,
-            placeholder: GLOBALCONFIG.lang.search.placeholder,
+            placeholder: GLOBAL_CONFIG.lang.search.placeholder,
             showLoadingIndicator: false
         })
 
@@ -73,7 +73,7 @@ class search {
             container: '#algolia-hits',
             templates: {
                 item(data) {
-                    const link = '/posts/' + data.permalink.split('/')[4]
+                    const link = data.permalink
                     const result = data._highlightResult
                     const content = result.contentStripTruncate
                         ? that.cutContent(result.contentStripTruncate.value)
@@ -90,7 +90,7 @@ class search {
                 },
                 empty: function (data) {
                     return (
-                        `<div id="algolia-hits-empty">${GLOBALCONFIG.lang.search.empty}</div>`
+                        `<div id="algolia-hits-empty">${GLOBAL_CONFIG.lang.search.empty}</div>`
                     )
                 }
             }
@@ -100,7 +100,7 @@ class search {
             container: '.algolia-stats',
             templates: {
                 text: function (data) {
-                    const stats = GLOBALCONFIG.lang.search.hit.replace('${query}', `<mark>${data.nbHits}</mark>`)
+                    const stats = GLOBAL_CONFIG.lang.search.hit.replace('${query}', `<mark>${data.nbHits}</mark>`)
                     return (
                         stats
                     )
@@ -117,8 +117,8 @@ class search {
 }
 
 const searchClickFn = () => {
-    document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
-    GLOBALCONFIG.rightmenu.enable && document.getElementById('menu-search').addEventListener('click', function() {
+    if (PAGE_CONFIG.page !== "404") document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
+    GLOBAL_CONFIG.rightside.enable && document.getElementById('menu-search').addEventListener('click', function() {
         rm.hideRightMenu();
         search.openSearch();
         let t = document.getElementsByClassName('ais-search-box--input')[0];
diff --git a/source/js/extend/search/local-search.js b/source/js/extend/search/local-search.js
old mode 100755
new mode 100644
index 2ef7335e..e6004be2
--- a/source/js/extend/search/local-search.js
+++ b/source/js/extend/search/local-search.js
@@ -44,7 +44,7 @@ class search{
   }
 
   static search(){
-    if (!GLOBALCONFIG.localsearch.preload && dataObj === null) dataObj = this.fetchData(GLOBALCONFIG.localsearch.path)
+    if (!GLOBAL_CONFIG.localsearch.preload && dataObj === null) dataObj = this.fetchData(GLOBAL_CONFIG.localsearch.path)
     $input.addEventListener('input', function type() {
       const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
       if (keywords[0] !== '') $loadingStatus.innerHTML = '<i class="scoicon sco-loading-line"></i><span>加载中</span>'
@@ -61,7 +61,7 @@ class search{
           let isMatch = true
           let dataTitle = data.title ? data.title.trim().toLowerCase() : ''
           const dataContent = data.content ? data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() : ''
-          const dataUrl = data.url.startsWith('/') ? data.url : GLOBALCONFIG.root + data.url
+          const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url
           let indexTitle = -1
           let indexContent = -1
           let firstOccur = -1
@@ -128,9 +128,9 @@ class search{
           }
         })
         if (count === 0) {
-          str += `<div id="search__hits-empty">${GLOBALCONFIG.lang.search.empty}</div>`
+          str += `<div id="search__hits-empty">${GLOBAL_CONFIG.lang.search.empty}</div>`
         }else{
-          str += `<div class="search__hits-count">${GLOBALCONFIG.lang.search.hit.replace('${query}', '<span class="search-keyword">' + count + '</span>')}</div>`
+          str += `<div class="search__hits-count">${GLOBAL_CONFIG.lang.search.hit.replace('${query}', '<span class="search-keyword">' + count + '</span>')}</div>`
         }
         str += '</div>'
         $resultContent.innerHTML = str
@@ -141,8 +141,8 @@ class search{
 }
 
 const searchClickFn = () => {
-  document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
-  GLOBALCONFIG.rightmenu.enable && document.getElementById('menu-search').addEventListener('click', function() {
+  if (PAGE_CONFIG.page !== "404") document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
+  GLOBAL_CONFIG.rightmenu.enable && document.getElementById('menu-search').addEventListener('click', function() {
     rm.hideRightMenu();
     search.openSearch();
     let t = document.getElementsByClassName('search-box-input')[0];
@@ -158,7 +158,7 @@ const searchClickFn = () => {
 const searchClickFnOnce = () => {
   document.querySelector('#local-search .search-close-button').addEventListener('click', search.closeSearch)
   $searchMask.addEventListener('click', search.closeSearch)
-  if (GLOBALCONFIG.localsearch.preload) dataObj = search.fetchData(GLOBALCONFIG.localsearch.path)
+  if (GLOBAL_CONFIG.localsearch.preload) dataObj = search.fetchData(GLOBAL_CONFIG.localsearch.path)
 }
 
 window.addEventListener('load', () => {
diff --git a/source/js/main.js b/source/js/main.js
old mode 100755
new mode 100644
index b87d3451..aa76e2c2
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -152,7 +152,7 @@ const showTodayCard = () => {
  * 修改时间格式
  */
 const changeTimeFormat = () => {
-    const timeElements = document.getElementsByTagName("time"), lang = GLOBALCONFIG.lang.time
+    const timeElements = document.getElementsByTagName("time"), lang = GLOBAL_CONFIG.lang.time
     for (let i = 0; i < timeElements.length; i++) {
         const datetime = timeElements[i].getAttribute("datetime"), timeObj = new Date(datetime),
             daysDiff = utils.timeDiff(timeObj, new Date())
@@ -444,12 +444,12 @@ let sco = {
         if (nowMode === 'light') {
             document.documentElement.setAttribute('data-theme', 'dark')
             saveToLocal.set('theme', 'dark', 0.04);
-            utils.snackbarShow(GLOBALCONFIG.lang.theme.dark, false, 2000)
+            utils.snackbarShow(GLOBAL_CONFIG.lang.theme.dark, false, 2000)
             document.querySelector(".menu-darkmode-text").textContent = "深色模式";
         } else {
             document.documentElement.setAttribute('data-theme', 'light')
             saveToLocal.set('theme', 'light', 0.04);
-            utils.snackbarShow(GLOBALCONFIG.lang.theme.light, false, 2000)
+            utils.snackbarShow(GLOBAL_CONFIG.lang.theme.light, false, 2000)
             document.querySelector(".menu-darkmode-text").textContent = "浅色模式";
         }
     },
@@ -525,8 +525,8 @@ let sco = {
      */
     addRuntime: function () {
         let el = document.getElementById('runtimeshow')
-        if (el && GLOBALCONFIG.runtime) {
-            el.innerText = utils.timeDiff(new Date(GLOBALCONFIG.runtime), new Date()) + GLOBALCONFIG.lang.time.runtime
+        if (el && GLOBAL_CONFIG.runtime) {
+            el.innerText = utils.timeDiff(new Date(GLOBAL_CONFIG.runtime), new Date()) + GLOBAL_CONFIG.lang.time.runtime
         }
     },
     /**
@@ -538,7 +538,7 @@ let sco = {
             threshold: 0,
             data_src: 'lazy-src',
             callback_error: (img) => {
-                img.setAttribute("src", GLOBALCONFIG.lazyload.error);
+                img.setAttribute("src", GLOBAL_CONFIG.lazyload.error);
             }
         })
     },
@@ -711,7 +711,7 @@ let sco = {
         if (el) {
             const timeNow = new Date();
             const hours = timeNow.getHours();
-            const lang = GLOBALCONFIG.lang.sayhello;
+            const lang = GLOBAL_CONFIG.lang.sayhello;
             const greetings = [
                 {start: 0, end: 5, text: lang.goodnight},
                 {start: 6, end: 10, text: lang.morning},
@@ -737,7 +737,6 @@ let sco = {
         const isTagPage = /\/tags\/.*?\//.test(decodedPath);
         if (isTagPage) {
             const tag = decodedPath.split("/").slice(-2, -1)[0];
-            console.log(tag)
 
             const tagPageTagsElement = document.getElementById("#tag-page-tags");
             if (tagPageTagsElement) {
@@ -858,6 +857,45 @@ let sco = {
         if (moreTagsButton) {
             moreTagsButton.parentNode.removeChild(moreTagsButton);
         }
+    },
+    /**
+     * 监听底部分页输入框
+     */
+    listenToPageInputPress: function () {
+        const pageText = document.getElementById("toPageText");
+        const pageButton = document.getElementById("toPageButton");
+
+        if (!pageText) return;
+
+        const pageNumbers = document.querySelectorAll(".page-number");
+        const lastPageNumber = +pageNumbers[pageNumbers.length - 1].textContent;
+
+        if (lastPageNumber === 1) {
+            const toPageGroup = document.querySelector(".toPageGroup");
+            if (toPageGroup) toPageGroup.remove();
+        }
+
+        pageText.addEventListener("keydown", (event) => {
+            if (event.keyCode === 13) {
+                heo.toPage();
+                pjax.loadUrl(pageButton.href);
+            }
+        });
+
+        pageText.addEventListener("input", () => {
+            if (pageText.value === "" || pageText.value === "0") {
+                pageButton.classList.remove("haveValue");
+            } else {
+                pageButton.classList.add("haveValue");
+            }
+
+            const pageNumbers = document.querySelectorAll(".page-number");
+            const lastPageNumber = +pageNumbers[pageNumbers.length - 1].textContent;
+
+            if (+pageText.value > lastPageNumber) {
+                pageText.value = lastPageNumber;
+            }
+        });
     }
 }
 
@@ -903,8 +941,8 @@ class hightlight {
         fragment.appendChild(hlTools)
         const itemHeight = item.clientHeight, $table = item.querySelector('table'),
             $expand = item.getElementsByClassName('code-expand-btn')
-        if (GLOBALCONFIG.hightlight.limit && itemHeight > GLOBALCONFIG.hightlight.limit + 30) {
-            $table.setAttribute('style', `height: ${GLOBALCONFIG.hightlight.limit}px`)
+        if (GLOBAL_CONFIG.hightlight.limit && itemHeight > GLOBAL_CONFIG.hightlight.limit + 30) {
+            $table.setAttribute('style', `height: ${GLOBAL_CONFIG.hightlight.limit}px`)
             ele.className = 'code-expand-btn'
             ele.innerHTML = '<i class="scoicon sco-show-line" style="font-size: 1.2rem"></i>'
             ele.addEventListener('click', (e) => {
@@ -964,10 +1002,10 @@ class tabs {
 }
 
 window.refreshFn = () => {
+    if (PAGE_CONFIG.page === "404") return;
     initAdjust()
     scrollFn()
     sidebarFn()
-    GLOBALCONFIG.comment.enable && newestCommentInit()
     changeTimeFormat()
     initObserver()
     sco.addRuntime()
@@ -977,29 +1015,29 @@ window.refreshFn = () => {
     sco.setTimeState()
     sco.tagPageActive()
     sco.categoriesBarActive()
-    GLOBALCONFIG.rightmenu.enable && addRightMenuClickEvent()
-    GLOBALCONFIG.lazyload.enable && sco.lazyloadImg()
-    GLOBALCONFIG.lightbox && sco.lightbox('')
-    GLOBALCONFIG.randomlinks && randomLinksList()
-    PAGECONFIG.toc && toc.init()
-    if (PAGECONFIG.is_post || PAGECONFIG.is_page) {
-        GLOBALCONFIG.hightlight.enable && hightlight.init()
+    sco.listenToPageInputPress()
+    GLOBAL_CONFIG.rightside.enable && addRightMenuClickEvent()
+    GLOBAL_CONFIG.lazyload.enable && sco.lazyloadImg()
+    GLOBAL_CONFIG.lightbox && sco.lightbox('')
+    GLOBAL_CONFIG.randomlinks && randomLinksList()
+    if (PAGE_CONFIG.comment) {
+        newestCommentInit()
+        initComment()
+    }
+    PAGE_CONFIG.toc && toc.init()
+    if (PAGE_CONFIG.is_post || PAGE_CONFIG.is_page) {
+        GLOBAL_CONFIG.hightlight.enable && hightlight.init()
         tabs.init()
     }
-    PAGECONFIG.comment && initComment()
-    if (PAGECONFIG.is_home) {
+    if (PAGE_CONFIG.is_home) {
         showTodayCard()
         sco.initbbtalk()
     }
-    if (PAGECONFIG.is_page && PAGECONFIG.page === 'says') sco.reflashEssayWaterFall()
-    if (PAGECONFIG.is_page) {
-        if (document.getElementById('album_detail')) sco.reflashEssayWaterFall()
-    }
-    GLOBALCONFIG.covercolor && coverColor();
+    GLOBAL_CONFIG.covercolor && coverColor();
     sco.initConsoleState()
     if (document.getElementById('history-baidu')) sco.card_history() // 那年今日
     if (document.getElementById('welcome-info')) sco.card_welcome() // 个性定位
-    if (GLOBALCONFIG.comment.enable) initializeCommentBarrage() // 热评
+    if (GLOBAL_CONFIG.comment.type === "twikoo") initializeCommentBarrage() // 热评
 }
 
 sco.initTheme()
diff --git a/source/js/rightmenu.js b/source/js/rightside.js
similarity index 100%
rename from source/js/rightmenu.js
rename to source/js/rightside.js
diff --git a/source/js/utils.js b/source/js/utils.js
old mode 100755
new mode 100644
index d01001c7..f9678153
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -85,21 +85,18 @@ const utils = {
     copy: async (text) => {
         try {
             await navigator.clipboard.writeText(text)
-            utils.snackbarShow(GLOBALCONFIG.lang.copy.success, false, 2000)
+            utils.snackbarShow(GLOBAL_CONFIG.lang.copy.success, false, 2000)
         } catch (err) {
-            utils.snackbarShow(GLOBALCONFIG.lang.copy.error, false, 2000)
+            utils.snackbarShow(GLOBAL_CONFIG.lang.copy.error, false, 2000)
         }
     },
 
     getEleTop: ele => {
-        let actualTop = ele.offsetTop
-        let current = ele.offsetParent
-
-        while (current !== null) {
-            actualTop += current.offsetTop
-            current = current.offsetParent
+        let actualTop = 0
+        while (ele) {
+            actualTop += ele.offsetTop
+            ele = ele.offsetParent
         }
-
         return actualTop
     },
 
@@ -124,16 +121,12 @@ const utils = {
             return
         }
         let start = null
-        pos = +pos
+        const distance = pos - currentPos
         window.requestAnimationFrame(function step(currentTime) {
             start = !start ? currentTime : start
             const progress = currentTime - start
-            if (currentPos < pos) {
-                window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos)
-            } else {
-                window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time))
-            }
             if (progress < time) {
+                window.scrollTo(0, currentPos + distance * progress / time)
                 window.requestAnimationFrame(step)
             } else {
                 window.scrollTo(0, pos)
@@ -151,4 +144,4 @@ const utils = {
     },
     isMobile: () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
     isHidden: e => 0 === e.offsetHeight && 0 === e.offsetWidth
-}
+}
\ No newline at end of file
diff --git a/source/lib/.DS_Store b/source/lib/.DS_Store
deleted file mode 100755
index bd855427c8ecdd34894cc7646d9436b557fff284..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHKOG*Pl5PhXt1Y9^vH$tBv;0=Zl7p}d4PTZ)`KnC}760hJ9^}VWAoH)1)B301+
zs_WN152il=Z259`0W<*SY(kSVAu><8j%u*byv8Fs++v3Xo+b+YMU&RvpvN=Uy~g+T
z-_y3Btw(>g*{-|Iw)0rvjrjWR;-7T-Oa8-tww>=~dx`9lfn*>VNCuLDgE7D}TQWZh
z%sv@N29kj<2DCpEHep+F2=uLkovzRF&x8`{dP@jP#kS%QNDsv#l^Cg3pBNVDw3iy!
zRvZE&9p*E$PM!Jl@nSwZ?Zv}kZD97vKr%39;5dej&i_mPGLw(|aY~Mofn?yHF<`UR
z^=iqFs%Ptu&(m33*lyS)iW{U*sE;lI9B3aob7%OAbjGz6hd@=4-P4JA5pY7XO9l?W
Fzz1fbEe8Mq


From 7d694c3e236208b0da1fb3b5e51bba773694321b Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sun, 26 Nov 2023 16:33:14 +0800
Subject: [PATCH 30/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复中控台关闭无效问题
---
 layout/includes/console.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layout/includes/console.pug b/layout/includes/console.pug
index d323b354..b1d53944 100644
--- a/layout/includes/console.pug
+++ b/layout/includes/console.pug
@@ -1,5 +1,5 @@
 div#console(style="zoom: 1")
-    div.close-btn(onclick="sco.hideConsole(()", href="javascript:void(0);")
+    div.close-btn(onclick="sco.hideConsole()", href="javascript:void(0);")
         i.scoicon.sco-close-fill
     if theme.thirdparty.consolePlus
         div.console-card-group

From 4bf00842b7c46abfb1b02a324c28009b128f22ed Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sun, 26 Nov 2023 17:00:47 +0800
Subject: [PATCH 31/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复pwa失效，修复首页文章列表标签样式无效
---
 layout/includes/head/pwa.pug              | 4 ++--
 layout/includes/widgets/home/postList.pug | 3 ++-
 source/css/_page/homeTop.styl             | 3 ---
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/layout/includes/head/pwa.pug b/layout/includes/head/pwa.pug
index c19e1d30..f338d4f4 100644
--- a/layout/includes/head/pwa.pug
+++ b/layout/includes/head/pwa.pug
@@ -1,6 +1,6 @@
 if theme.pwa.enable
     meta(name="theme-color", content=theme.pwa.theme_color)
-    link(rel="manifest", href=theme.pwa.manifest)
+    link(rel="manifest", href=url_for(theme.pwa.manifest))
     if theme.pwa.theme_color
         meta(name="msapplication-TileColor", content=theme.pwa.theme_color)
     if theme.pwa.mask_icon
@@ -49,7 +49,7 @@ if theme.pwa.enable
                 "640_1136": "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
                 "1136_640": "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)",
             }
-        each size, media in medias
+        each media,size  in medias
             if (theme.pwa["favicon_" + size])
                 link(rel="apple-touch-startup-image", href=theme.pwa["favicon_" + size], media=media)
 
diff --git a/layout/includes/widgets/home/postList.pug b/layout/includes/widgets/home/postList.pug
index 9709ff44..9d1394fd 100644
--- a/layout/includes/widgets/home/postList.pug
+++ b/layout/includes/widgets/home/postList.pug
@@ -19,7 +19,8 @@ for post in page.posts.sort('-date').data
             div.article-meta-wrap
                 span.article-meta.tags
                    each tag in post.tags.data
-                       a(class="article-meta__tags" href=url_for(tag.path), data-pjax-state, onclick="window.event.cancelable=true")= tag.name
+                       a(class="article-meta__tags" href=url_for(tag.path), data-pjax-state, onclick="window.event.cancelable=true")
+                         span.tags-punctuation=tag.name
 
                 span.post-meta-date
                    time(datetime=moment(post.date))
\ No newline at end of file
diff --git a/source/css/_page/homeTop.styl b/source/css/_page/homeTop.styl
index ec1bdb4d..f23c8bca 100644
--- a/source/css/_page/homeTop.styl
+++ b/source/css/_page/homeTop.styl
@@ -300,8 +300,6 @@ a.categoryButton:hover
 		order: 1 !important
 
 	#recent-posts .recent-post-item .recent-post-info
-		padding: 1rem 1rem 1.5rem
-		width: 100%
 		-webkit-box-ordinal-group: 2 !important
 		order: 2 !important
 
@@ -414,7 +412,6 @@ a.categoryButton:hover
 @media screen and (max-width: 768px)
 	.recent-post-item .recent-post-info .recent-post-info-top
 		padding: 0 20px
-		top: 20px
 
 	.recent-post-item .recent-post-info .recent-post-info-top .content
 		opacity: 1

From 4856a3a39cbe1894e9ff6a725869d19aaecbe450 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sun, 26 Nov 2023 17:08:57 +0800
Subject: [PATCH 32/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复pwa无效问题
---
 layout/includes/head/config.pug | 4 ----
 layout/includes/inject/head.pug | 4 ++++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
index ddf59429..7058aa27 100644
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -1,7 +1,3 @@
-// pwa
-if theme.pwa.enable
-    include ./pwa.pug
-
 -
     if (theme.thirdparty.search.enable) {
         var localSearch = 'undefined';
diff --git a/layout/includes/inject/head.pug b/layout/includes/inject/head.pug
index c77c48de..c7a12fdc 100644
--- a/layout/includes/inject/head.pug
+++ b/layout/includes/inject/head.pug
@@ -9,6 +9,10 @@ if theme.verify.google
 if theme.loading.pace
     script(src=cdn.pace, data-pace-options='{ &quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}')
 
+// pwa
+if theme.pwa.enable
+    include ../head/pwa.pug
+
 link(rel="stylesheet", href=cdn.scoicon)
 link(rel="stylesheet", href=cdn.snackbarcss)
 

From ee16f1a16a23f1142878c02eb3b7b27360358cf8 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sun, 26 Nov 2023 17:46:07 +0800
Subject: [PATCH 33/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

细节修复
---
 layout/includes/footer.pug                |  2 +-
 layout/includes/inject/body.pug           | 12 ++++++------
 layout/includes/widgets/post/postMeta.pug |  2 +-
 source/js/commentBarrage.js               |  4 +++-
 source/js/main.js                         |  2 +-
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug
index 10ebc154..108272e5 100644
--- a/layout/includes/footer.pug
+++ b/layout/includes/footer.pug
@@ -68,4 +68,4 @@ div.needEndHide#cookies-window
 if theme.post.award.enable
     div#quit-box(onclick="RemoveRewardMask()", style="display=none")
 if theme.comment.enable
-    div.comment-barrage
\ No newline at end of file
+    div.comment-barrage.needEndHide
\ No newline at end of file
diff --git a/layout/includes/inject/body.pug b/layout/includes/inject/body.pug
index 96301d35..fbece51d 100644
--- a/layout/includes/inject/body.pug
+++ b/layout/includes/inject/body.pug
@@ -13,12 +13,6 @@ if theme.rightside.enable
     include ../widgets/rightside/index.pug
     script(src='/js/rightside.js')
 
-if theme.comment.enable
-    script(src='/js/extend/console/comment.js')
-
-    if theme.comment.type === 'twikoo'
-        script(src='/js/commentBarrage.js')
-
 div#js-pjax
     if page.type === 'says'
         script(src=url_for(cdn.waterfalljs))
@@ -58,6 +52,12 @@ if page.katex
 if theme.aside.welcome.enable
     script(src='/js/txmap.js')
 
+if theme.comment.enable
+    script(src='/js/extend/console/comment.js')
+
+    if theme.comment.type === 'twikoo'
+        script(src='/js/commentBarrage.js')
+
 // pjax
 include ../widgets/third-party/pjax.pug
 
diff --git a/layout/includes/widgets/post/postMeta.pug b/layout/includes/widgets/post/postMeta.pug
index 69a1ae05..a7ad84ea 100644
--- a/layout/includes/widgets/post/postMeta.pug
+++ b/layout/includes/widgets/post/postMeta.pug
@@ -21,7 +21,7 @@ div#post-info
                     time.datetime=moment(page.date).format()
             if theme.post.meta.updated
                 span.post-meta-date(title="最后更新于")
-                    i.post-meta-icon.scoicon.sco-refresh-fill
+                    i.post-meta-icon.scoicon.sco-refresh-line
                     time.datetime=moment(page.updated).format()
             if theme.thirdparty.wordcount
                 span.post-meta-wordcount
diff --git a/source/js/commentBarrage.js b/source/js/commentBarrage.js
index 71a44e68..4a08d7a1 100644
--- a/source/js/commentBarrage.js
+++ b/source/js/commentBarrage.js
@@ -155,4 +155,6 @@ function initializeCommentBarrage() {
     (e)
 }
 
-initializeCommentBarrage();
\ No newline at end of file
+if(PAGE_CONFIG.comment){
+    initializeCommentBarrage();
+}
\ No newline at end of file
diff --git a/source/js/main.js b/source/js/main.js
index aa76e2c2..225b6a73 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1037,7 +1037,7 @@ window.refreshFn = () => {
     sco.initConsoleState()
     if (document.getElementById('history-baidu')) sco.card_history() // 那年今日
     if (document.getElementById('welcome-info')) sco.card_welcome() // 个性定位
-    if (GLOBAL_CONFIG.comment.type === "twikoo") initializeCommentBarrage() // 热评
+    if (GLOBAL_CONFIG.comment.type === "twikoo" && PAGE_CONFIG.comment) initializeCommentBarrage() // 热评
 }
 
 sco.initTheme()

From 48e24c9024057bf4177404f27759556bd36755b5 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Mon, 27 Nov 2023 13:06:17 +0800
Subject: [PATCH 34/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复侧边栏异常
---
 layout/includes/widgets/aside/aside.pug | 18 +++++++++---------
 source/css/_page/about.styl             |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/layout/includes/widgets/aside/aside.pug b/layout/includes/widgets/aside/aside.pug
index 02d8d70f..897adf61 100644
--- a/layout/includes/widgets/aside/aside.pug
+++ b/layout/includes/widgets/aside/aside.pug
@@ -1,14 +1,14 @@
 .aside-content#aside-content
     - var noSticky, Sticky;
-    - if(is_home())
-    -     noSticky = theme.aside.home.noSticky.split(',')
-    -     Sticky = theme.aside.home.Sticky.split(',')
-    - if(is_post())
-    -     noSticky = theme.aside.post.noSticky.split(',')
-    -     Sticky = theme.aside.post.Sticky.split(',')
-    - if(is_page() || is_archive() || is_tag() || is_category())
-    -     noSticky = theme.aside.page.noSticky.split(',')
-    -     Sticky = theme.aside.page.Sticky.split(',')
+    if(is_home())
+        - noSticky = theme.aside.home.noSticky.split(',')
+        - Sticky = theme.aside.home.Sticky.split(',')
+    else if(is_post())
+        - noSticky = theme.aside.post.noSticky.split(',')
+        - Sticky = theme.aside.post.Sticky.split(',')
+    else if(is_page() || is_archive() || is_tag() || is_category())
+        - noSticky = theme.aside.page.noSticky.split(',')
+        - Sticky = theme.aside.page.Sticky.split(',')
     each item in noSticky
         include ./asideSwitch.pug
     .sticky_layout
diff --git a/source/css/_page/about.styl b/source/css/_page/about.styl
index c96ee084..3f32253f 100644
--- a/source/css/_page/about.styl
+++ b/source/css/_page/about.styl
@@ -354,7 +354,7 @@
     transition .3s
 
   .tags-group-wrapper
-    margin-top 40px
+    margin-top 20px
     display flex
     flex-wrap nowrap
     animation rowup 60s linear infinite

From e4d4c13600b573f74f4631aff43648b5d9124b77 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Mon, 27 Nov 2023 22:11:41 +0800
Subject: [PATCH 35/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

适配algolia新版本搜索
---
 languages/zh-CN.yml                           |   4 +-
 layout/includes/head/config.pug               |   5 +-
 .../third-party/search/algolia-search.pug     |  23 +-
 source/css/_layout/base.styl                  |   3 +
 source/css/_layout/header.styl                |  84 -----
 source/css/_post/postContent.styl             |   3 +-
 source/css/_search/algolia-search.styl        | 325 +++++++++++-------
 source/js/extend/search/algolia-search.js     | 215 ++++++------
 8 files changed, 334 insertions(+), 328 deletions(-)

diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 87f9389c..ab171ca1 100755
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -33,6 +33,6 @@ nav:
   console: 中控台
 
 search:
-  empty: 搜索结果为空
-  hit: 已为您找到 ${query} 条结果
+  empty: 找不到你查询的内容：${query}
+  hit: 找到 ${hits} 条结果，用时 ${time} 毫秒
   placeholder: 输入关键词快速查找
\ No newline at end of file
diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
index 7058aa27..665960ff 100644
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -11,7 +11,10 @@
             algolia = JSON.stringify({
                 appId: config.algolia.appId || config.algolia.applicationID,
                 apiKey: config.algolia.apiKey,
-                indexName: config.algolia.indexName
+                indexName: config.algolia.indexName,
+                hits: {
+                    per_page: theme.thirdparty.search.algolia_search.hits.per_page || 10
+                }
             })
     }
 
diff --git a/layout/includes/widgets/third-party/search/algolia-search.pug b/layout/includes/widgets/third-party/search/algolia-search.pug
index 4b6e6703..d4393e60 100644
--- a/layout/includes/widgets/third-party/search/algolia-search.pug
+++ b/layout/includes/widgets/third-party/search/algolia-search.pug
@@ -1,13 +1,16 @@
 div#algolia-search
     div.search-dialog
-        nav.search-nav
-            span.search-dialog-title 搜索
-            button.search-close-button
-                i.scoicon.sco-close-fill
-        div.search-wrap
-            div.search-box#search-input
-            div#search-results
-                div#algolia-hits
-                div.algolia-stats
-                div.algolia-poweredBy
+        div.search-dialog__title#algolia-search-title= "搜索"
+        div#algolia-input-panel
+            div#algolia-search-input
+        div#search-results
+            div#algolia-hits
+            div#algolia-pagination
+            div#algolia-stats
+            div.algolia-poweredBy
+        div#algolia-tips
+            i.scoicon.sco-algolia-fill
+            span.algolia-tips-text= "Algolia 提供搜索服务"
+        span.search-close-button
+            i.scoicon.sco-close-fill
     div#search-mask
diff --git a/source/css/_layout/base.styl b/source/css/_layout/base.styl
index 8cc7dfdd..3b791eb9 100644
--- a/source/css/_layout/base.styl
+++ b/source/css/_layout/base.styl
@@ -124,6 +124,9 @@ button, input, optgroup, select, textarea
 button, input
   overflow visible
 
+input::placeholder
+  color var(--sco-gray)!important
+
 button, select
   text-transform none
 
diff --git a/source/css/_layout/header.styl b/source/css/_layout/header.styl
index 8e48361d..0da3759d 100644
--- a/source/css/_layout/header.styl
+++ b/source/css/_layout/header.styl
@@ -1252,90 +1252,6 @@ i
         +maxWidth768()
           color var(--sco-fontcolor)
 
-#search-mask
-  backdrop-filter blur(12px)
-  -webkit-backdrop-filter blur(12px)
-  transform translateZ(0)
-  background var(--sco-maskbgdeep)
-
-#algolia-search
-  .search-dialog
-    .ais-search-box
-      padding-top 8px
-
-      input
-        border-radius 8px !important
-        border var(--style-border)
-
-        &:focus
-          border var(--style-border-hover)
-
-        &::placeholder
-          opacity .6
-
-    .ais-hits--item
-      &.algolia-hit-item
-        padding-left 0
-        font-weight 700
-
-        a
-          &:hover
-            color var(--sco-hovertext)
-
-        &:before
-          display none
-
-        em
-          color var(--sco-theme)
-          font-style normal
-
-    .algolia-logo
-      display none
-
-    .ais-pagination
-      &.pagination
-        margin .2rem 0 0
-
-        .ais-pagination--item
-          &.current
-            a
-              border-radius 4px
-              background var(--sco-main)
-              color var(--sco-white)
-
-#algolia-input-panel
-  margin-bottom 8px
-
-.search-dialog
-  border-radius 12px !important
-  box-shadow var(--sco-shadow-lightblack)
-  background var(--sco-card-bg)
-  border var(--style-border)
-  transition .3s
-
-  &:hover
-    border var(--style-border-hover)
-    box-shadow var(--sco-shadow-theme)
-
-.search-dialog__title
-  font-weight 700
-  color var(--sco-main)
-
-#algolia-tips
-  padding-top 12px
-  color var(--sco-secondtext)
-  right 0
-  margin auto
-
-  i
-    font-size 22px
-
-.algolia-tips-text
-  margin-left .4rem
-
-#algolia-search-results
-  padding-top 8px
-
 #weblogo
   align-self center
 
diff --git a/source/css/_post/postContent.styl b/source/css/_post/postContent.styl
index f79fcde8..8f0261b4 100644
--- a/source/css/_post/postContent.styl
+++ b/source/css/_post/postContent.styl
@@ -661,6 +661,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-direction: row-reverse;
 }
 
 #article-container.post-content h1 {
@@ -696,7 +697,7 @@
 }
 
 #article-container .headerlink::before {
-  content: "\e038";
+  content: "\e082";
   font-family: scoicon !important
 }
 
diff --git a/source/css/_search/algolia-search.styl b/source/css/_search/algolia-search.styl
index 98e25b41..c216a744 100644
--- a/source/css/_search/algolia-search.styl
+++ b/source/css/_search/algolia-search.styl
@@ -1,119 +1,206 @@
-.search-dialog 
-	position fixed
-	top 5rem
-	left 50%
-	z-index 1001
-	display none
-	margin-left -15rem
-	padding 1rem
-	width 30rem
-	box-shadow var(--sco-shadow-lightblack)
-	background var(--sco-card-bg)
-	border var(--style-border)
-	transition 0.3s
-	border-radius 12px
-
-	+maxWidth768()
-		top 0px
-		left 0px
-		margin 0px
-		width 100%
-		height 100%
-
-	.search-close-button
-		&:hover
-			color rgb(48, 122, 246)
-
-	.search-box
-		padding-top 8px
-		max-width 100%
-        
-		input
-			height 100%
-			width 100%
-			padding 0.25rem 0.7rem
-			outline 0px
-			border var(--style-border)
-			border-radius 8px
-			background var(--sco-secondbg)
-			color var(--sco-fontcolor)
-			&:focus
-				border var(--style-border-hover)
-
-	.search-close-button
-		color rgb(133, 133, 133)
-		font-size 1.2em
-		line-height 1
-		cursor pointer
-		transition color 0.2s ease-in-out 0s
-
-#search-mask 
-	position fixed
-	inset 0px
-	z-index 1000
-	display none
-	background rgba(0, 0, 0, 0.6)
-	backdrop-filter blur(12px)
-	-webkit-backdrop-filter blur(12px)
-	transform translateZ(0)
-	background var(--sco-maskbgdeep)
-
-.search-nav 
-	display flex
-	align-items center
-	justify-content space-between
-	padding 0 0.2rem 0.7rem 0.2rem
-
-.search-dialog-title 
-	font-weight bold
-	color var(--sco-main)
-	font-size 1.4em
-	line-height 1
-
-.search-box 
-	input 
-		&::placeholder 
-			color var(--sco-gray)
-			
-#algolia-search 
-	#search-results 
-		padding 8px
-		max-height calc(80vh - 130px)
-		overflow-y auto
-
-		+maxWidth768()
-			max-height 80vh !important
-            
-	.ais-Hits-list 
-		padding 0
-
-	.ais-Hits-item 
-		margin 10px 0
-
-	.algolia-hit-item-content 
-		margin 0
-		padding-left 10px
-		font-size 14px
-		color var(--sco-gray)
-
-	.algolia-hit-item-link 
-		width auto
-		max-width 100%
-		white-space nowrap
-		text-overflow ellipsis
-		overflow hidden
-		font-weight bold
-
-	mark 
-		color var(--sco-theme)
-		font-style normal
-		background var(--sco-card-bg)
-
-	.ais-Hits--empty 
-		text-align center
-		font-weight 600
-
-	.algolia-stats 
-		color var(--sco-gray)
-		font-size .8rem
-		font-weight bold
+.search-dialog
+  position fixed
+  top 5rem
+  left 50%
+  z-index 1001
+  display none
+  margin-left -15rem
+  padding 1rem
+  width 30rem
+  box-shadow var(--sco-shadow-lightblack)
+  background var(--sco-card-bg)
+  border var(--style-border)
+  transition 0.3s
+  border-radius 12px
+
+  +maxWidth768()
+    top 0px
+    left 0px
+    margin 0px
+    width 100%
+    height 100%
+
+  .search-close-button
+    &:hover
+      color rgb(48, 122, 246)
+
+  .search-box
+    padding-top 8px
+    max-width 100%
+
+    input
+      height 100%
+      width 100%
+      padding 0.25rem 0.7rem
+      outline 0px
+      border var(--style-border)
+      border-radius 8px
+      background var(--sco-secondbg)
+      color var(--sco-fontcolor)
+
+      &:focus
+        border var(--style-border-hover)
+
+  .search-close-button
+    position absolute
+    top 0.8rem
+    right 1rem
+    color #858585
+    font-size 1.4em
+    line-height 1
+    cursor pointer
+    transition color .2s ease-in-out 0s
+
+#search-mask
+  position fixed
+  inset 0px
+  z-index 1000
+  display none
+  background rgba(0, 0, 0, 0.6)
+  backdrop-filter blur(12px)
+  -webkit-backdrop-filter blur(12px)
+  transform translateZ(0)
+  background var(--sco-maskbgdeep)
+
+.search-nav
+  display flex
+  align-items center
+  justify-content space-between
+  padding 0 0.2rem 0.7rem 0.2rem
+
+.search-dialog-title
+  font-weight bold
+  color var(--sco-main)
+  font-size 1.4em
+  line-height 1
+
+.search-box
+  input
+    &::placeholder
+      color var(--sco-gray)
+
+#algolia-search
+  #search-results
+    padding 8px
+    max-height calc(80vh - 130px)
+    overflow-y auto
+
+    +maxWidth768()
+      max-height 80vh !important
+
+  .ais-Hits-list
+    padding 0
+
+  .ais-Hits-item
+    margin 10px 0
+
+  .algolia-hit-item-content
+    margin 0
+    padding-left 10px
+    font-size 14px
+    color var(--sco-gray)
+
+  .algolia-hit-item-link
+    width auto
+    max-width 100%
+    white-space nowrap
+    text-overflow ellipsis
+    overflow hidden
+    font-weight bold
+
+  mark
+    color var(--sco-theme)
+    font-style normal
+    background var(--sco-card-bg)
+
+  .ais-Hits--empty
+    text-align center
+    font-weight 600
+
+  .algolia-stats
+    color var(--sco-gray)
+    font-size .8rem
+    font-weight bold
+
+  .ais-SearchBox
+    padding-top: 8px
+    margin 0 auto
+    width 100%
+    min-width 100%
+    position relative
+
+  .ais-SearchBox-input
+    border-radius 8px
+    border var(--style-border)
+    padding 0.25rem 0.7rem
+    outline 0
+    background var(--sco-secondbg)
+    color var(--search-input-color)
+    width 100%
+    height 100%
+
+  .ais-Pagination-list.pagination
+    margin 0.2rem 0 0
+    padding 0
+    text-align center
+
+  .ais-Pagination-item.pagination-item
+    margin 0 0.2rem
+    padding 0
+    display inline-block
+
+    a
+      border-radius 4px
+      background var(--sco-main)
+      color var(--sco-white)
+      cursor pointer
+      display inline-block
+      min-width 1.2rem
+      text-align center
+      line-height 1.2rem
+
+  search-icon
+    animation sco-spin 1.2s linear infinite
+    opacity .6
+    font-size 2rem
+
+#search-mask
+  backdrop-filter blur(12px)
+  -webkit-backdrop-filter blur(12px)
+  transform translateZ(0)
+  background var(--sco-maskbgdeep)
+
+#algolia-input-panel
+  margin-bottom 8px
+
+.search-dialog
+  border-radius 12px !important
+  box-shadow var(--sco-shadow-lightblack)
+  background var(--sco-card-bg)
+  border var(--style-border)
+  transition .3s
+
+  &:hover
+    border var(--style-border-hover)
+    box-shadow var(--sco-shadow-theme)
+
+.search-dialog__title
+  padding 0 0 0.7rem
+  color var(--sco-main)
+  font-size 1.4em
+  line-height 1
+
+#algolia-tips
+  padding-top 12px
+  color var(--sco-secondtext)
+  right 0
+  margin auto
+
+  i
+    font-size 22px
+
+.algolia-tips-text
+  margin-left .4rem
+
+#algolia-search-results
+  padding-top 8px
\ No newline at end of file
diff --git a/source/js/extend/search/algolia-search.js b/source/js/extend/search/algolia-search.js
index 797fa9d7..16e73106 100644
--- a/source/js/extend/search/algolia-search.js
+++ b/source/js/extend/search/algolia-search.js
@@ -1,10 +1,10 @@
-const $searchMask = document.getElementById('search-mask'),
-    $searchDialog = document.querySelector('#algolia-search .search-dialog')
-
-class search {
-    static openSearch() {
-        utils.fadeIn($searchMask, '0.5')
-        utils.fadeIn($searchDialog, '0.5')
+window.addEventListener('load', () => {
+    const openSearch = () => {
+        document.body.style.cssText = 'width: 100%;overflow: hidden'
+        document.querySelector('#algolia-search .search-dialog').style.display = 'block'
+        document.querySelector('#algolia-search .ais-SearchBox-input').focus()
+        utils.fadeIn(document.getElementById('search-mask'), 0.5)
+        // shortcut: ESC
         document.addEventListener('keydown', function f(event) {
             if (event.code === 'Escape') {
                 closeSearch()
@@ -13,135 +13,128 @@ class search {
         })
     }
 
-    static closeSearch() {
-        utils.fadeOut($searchDialog, '0.5')
-        utils.fadeOut($searchMask, '0.5')
+    const closeSearch = () => {
+        document.body.style.cssText = "width: '';overflow: ''"
+        const $searchDialog = document.querySelector('#algolia-search .search-dialog')
+        $searchDialog.style.animation = 'search_close .5s'
+        setTimeout(() => {
+            $searchDialog.style.cssText = "display: none; animation: ''"
+        }, 500)
+        utils.fadeOut(document.getElementById('search-mask'), 0.5)
     }
 
-    static cutContent(content) {
-        if (content === '') return ''
-
-        const firstOccur = content.indexOf('<mark>')
-
-        let start = firstOccur - 30
-        let end = firstOccur + 120
-        let pre = ''
-        let post = ''
+    const searchClickFn = () => {
+        document.querySelector('#search-button > .search').addEventListener('click', openSearch)
+        document.getElementById('search-mask').addEventListener('click', closeSearch)
+        document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
+        document.getElementById('menu-search').addEventListener('click', function () {
+            rm.hideRightMenu();
+            openSearch();
+            let t = document.querySelector('.ais-search-box--input');
+            let evt = new Event('input', {bubbles: true, cancelable: true});
+            t.value = selectTextNow;
+            t.dispatchEvent(evt);
+        });
+    }
 
-        if (start <= 0) {
-            start = 0
-            end = 140
-        } else {
-            pre = '...'
-        }
+    searchClickFn()
 
-        if (end > content.length) {
-            end = content.length
-        } else {
-            post = '...'
-        }
+    window.addEventListener('pjax:complete', function () {
+        getComputedStyle(document.querySelector('#algolia-search .search-dialog')).display === 'block' && closeSearch()
+        searchClickFn()
+    })
 
-        const matchContent = pre + content.substring(start, end) + post
-        return matchContent
+    const algolia = GLOBAL_CONFIG.algolia
+    const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
+    if (!isAlgoliaValid) {
+        return console.error('Algolia setting is invalid!')
     }
 
-    static search() {
-        const algolia = GLOBAL_CONFIG.algolia, that = this
-        const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
-        if (!isAlgoliaValid) {
-            return console.error('Algolia setting is invalid!')
-        }
+    const searchClient = algoliasearch(
+        algolia.appId,
+        algolia.apiKey
+    );
 
-        const init = instantsearch({
-            indexName: algolia.indexName,
-            searchClient: algoliasearch(algolia.appId, algolia.apiKey),
-            searchFunction(helper) {
-                helper.state.query && helper.search()
-            }
-        })
+    const search = instantsearch({
+        indexName: algolia.indexName,
+        searchClient,
+        searchParameters: {
+            hitsPerPage: algolia.hits.per_page || 10
+        }
+    })
 
-        const searchBox = instantsearch.widgets.searchBox({
-            container: '#search-input',
+    search.addWidget(
+        instantsearch.widgets.searchBox({
+            container: '#algolia-search-input',
             showReset: false,
-            showSubmit: false,
-            autofocus: true,
             placeholder: GLOBAL_CONFIG.lang.search.placeholder,
-            showLoadingIndicator: false
+            showSubmit: false,
+            showLoadingIndicator: true,
+            templates: {
+                loadingIndicator: '<i class="scoicon sco-loading-line search-icon"></i>'
+            },
+            onStateChange({uiState, setUiState}) {
+                const searchInput = document.querySelector('#algolia-search-input input')
+                if (searchInput.value) {
+                    setUiState(uiState);
+                }
+            }
         })
-
-        const hits = instantsearch.widgets.hits({
+    )
+    search.addWidget(
+        instantsearch.widgets.hits({
             container: '#algolia-hits',
             templates: {
-                item(data) {
-                    const link = data.permalink
-                    const result = data._highlightResult
-                    const content = result.contentStripTruncate
-                        ? that.cutContent(result.contentStripTruncate.value)
-                        : result.contentStrip
-                            ? that.cutContent(result.contentStrip.value)
-                            : result.content
-                                ? that.cutContent(result.content.value)
-                                : ''
-                    return `
-                <a href="${link}" class="algolia-hit-item-link">
-                ${result.title.value}
-                </a>
-                <p class="algolia-hit-item-content">${content}</p>`
+                item(hit) {
+                    const link = hit.permalink ? hit.permalink : (GLOBAL_CONFIG.root + hit.path)
+                    return (
+                        `<a href="${link}" class="algolia-hit-item-link">${hit._highlightResult.title.value}</a>`
+                    )
                 },
-                empty: function (data) {
+                empty(data) {
                     return (
-                        `<div id="algolia-hits-empty">${GLOBAL_CONFIG.lang.search.empty}</div>`
+                        '<div id="algolia-hits-empty">' +
+                        GLOBAL_CONFIG.lang.search.empty.replace(/\$\{query}/, data.query) +
+                        '</div>'
                     )
                 }
+            },
+            cssClasses: {
+                item: 'algolia-hit-item'
             }
         })
+    )
 
-        const stats = instantsearch.widgets.stats({
-            container: '.algolia-stats',
+    search.addWidget(
+        instantsearch.widgets.stats({
+            container: '#algolia-stats',
             templates: {
-                text: function (data) {
-                    const stats = GLOBAL_CONFIG.lang.search.hit.replace('${query}', `<mark>${data.nbHits}</mark>`)
-                    return (
-                        stats
-                    )
+                text(data) {
+                    const stats = GLOBAL_CONFIG.lang.search.hit.replace(/\$\{hits}/, data.nbHits).replace(/\$\{time}/, data.processingTimeMS);
+                    return `${stats}`;
                 }
             }
         })
-
-        init.addWidgets([searchBox, hits, stats]) // add the widgets to the instantsearch instance
-        init.start()
-        init.on('render', () => {
-            pjax.refresh(document.getElementById('algolia-hits'))
+    )
+
+    search.addWidget(
+        instantsearch.widgets.pagination({
+            container: '#algolia-pagination',
+            scrollTo: false,
+            showFirst: false,
+            showPrevious: false,
+            showNext: false,
+            showLast: false,
+            cssClasses: {
+                list: 'pagination',
+                pageItem: 'pagination-item',
+                link: 'page-number',
+            },
         })
-    }
-}
-
-const searchClickFn = () => {
-    if (PAGE_CONFIG.page !== "404") document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
-    GLOBAL_CONFIG.rightside.enable && document.getElementById('menu-search').addEventListener('click', function() {
-        rm.hideRightMenu();
-        search.openSearch();
-        let t = document.getElementsByClassName('ais-search-box--input')[0];
-        let evt = new Event('input', {
-            bubbles: true,
-            cancelable: true
-        });
-        t.value = selectTextNow;
-        t.dispatchEvent(evt);
-    });
-}
-
-const searchClickFnOnce = () => {
-    document.querySelector('#algolia-search .search-close-button').addEventListener('click', search.closeSearch)
-    $searchMask.addEventListener('click', search.closeSearch)
-}
+    )
+    search.start()
 
-window.addEventListener('load', () => {
-    searchClickFn()
-    searchClickFnOnce()
-    search.search()
+    window.pjax && search.on('render', () => {
+        window.pjax.refresh(document.getElementById('algolia-hits'))
+    })
 })
-
-window.addEventListener('pjax:complete', () => {
-    searchClickFn()
-})
\ No newline at end of file

From 1351d8ebdadb3ed4afb7b8b7a7a0599938dbfc8c Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Mon, 27 Nov 2023 22:14:58 +0800
Subject: [PATCH 36/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复没配置搜索异常的问题
---
 layout/includes/head/config.pug | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
index 665960ff..216f3adb 100644
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -21,8 +21,8 @@
 script.
     const GLOBAL_CONFIG = {
         root: '!{config.root}',
-        algolia: !{algolia},
-        localsearch: !{localSearch},
+        algolia: !{algolia ? algolia : 'undefined'},
+        localsearch: !{localSearch ? localSearch : 'undefined'},
         runtime: '!{theme.aside.siteinfo.runtimeenable ? theme.aside.siteinfo.runtime : false}',
         lazyload: {
             enable: !{theme.lazyload.enable},

From 26b1a6013ec2eee0e14bb1ebbbd389501a7c5205 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Mon, 27 Nov 2023 23:21:58 +0800
Subject: [PATCH 37/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

模块化stylus（抽离aside）
---
 _config.yml                                  | 167 ++++++++++---------
 layout/includes/widgets/aside/asidePower.pug |   2 +-
 source/css/_layout/aside.styl                |  40 +----
 source/css/_layout/header.styl               |   7 -
 source/css/_layout/index.styl                |  15 --
 source/css/_widgets/aside/index.styl         |  79 +++++++++
 source/css/_widgets/aside/toc.styl           |   0
 source/css/_widgets/index.styl               |   3 +
 source/css/index.styl                        |   3 +
 9 files changed, 176 insertions(+), 140 deletions(-)
 create mode 100644 source/css/_widgets/aside/index.styl
 create mode 100644 source/css/_widgets/aside/toc.styl
 create mode 100644 source/css/_widgets/index.styl

diff --git a/_config.yml b/_config.yml
index afc84533..71f47138 100644
--- a/_config.yml
+++ b/_config.yml
@@ -138,13 +138,17 @@ aside:
     Sticky: "newestPost,allInfo"
   # 爱发电
   power:
-    link: https://afdian.net/a/wleelw0u0
-    post: true
-    page: false
+    link: https://afdian.net/a/wleelw0u0 # 爱发电链接
+#    list:
+#      - name: 王卓Sco
+#        avatar: https://bu.dusays.com/2023/11/04/6545e8a57f97b.jpg
+#        descr: 宁静致远，热爱生活。
+#        link: https://afdian.net/u/wleelw0u0
   # 侧边栏个人信息卡片
   card:
+    # 头像信息
     author:
-      img: https://bu.dusays.com/2023/11/08/654af68b25bb8.jpg # 头像
+      img: https://bu.dusays.com/2023/11/08/654af68b25bb8.jpg # 头像图片
       js: https://cdn3.codesign.qq.com/icons/XgRxnjPG4VZLmqr/latest/iconfont.js # 自定义图标js（用于显示带颜色的状态表情）
       state: "#sco-smile" # 状态表情（使用symbol）
     content: 分享自己对编程的<b>热爱</b>，对美好生活的<b>向往</b>，对知识海洋<b>探索历程</b>。 # 文案1
@@ -166,7 +170,7 @@ aside:
   welcome:
     enable: false
     title: #【选填】留空将默认显示为：来访者
-    icon:
+    icon: #【选填】留空将默认显示为：scoicon sco-map-pin-line
     key: # 腾讯key
     longitude: 112.8455033596802 # 经度
     Latitude: 26.430308353457896 # 纬度
@@ -174,20 +178,22 @@ aside:
   history:
     enable: false
     title: #【选填】留空将默认显示为：那年今日
-    icon:
+    icon: #【选填】留空将默认显示为：scoicon sco-calendar-line
   # 页面目录
   toc:
     post: true # 在文章页显示
     page: false # 在任意页显示
 
+  # 侧边栏文章列表
   tags:
     enable: false # 是否显示标签
     highlight: false # 高亮显示
     list: # 高亮显示标签列表
       - 'Solitude-使用'
 
+  # 侧边栏归档
   archive:
-    enable: false # 是否显示归档
+    enable: false # 是否显示
 
   # 建站信息
   siteinfo:
@@ -236,22 +242,22 @@ footer:
 #        版权协议: /copyright/
 
   # 底部随机友链
-  randomlink: false
+  randomlink: false # 是否开启
   # rss
   rss:
-    enable: false
+    enable: false # 是否显示
     wechatOA: # 微信公众号链接
     emailOA:  # 邮箱链接
     rss:  # rss订阅链接
   # 版权
   license:
-    url: /copyright/
+    url: /copyright/ # 点击跳转链接
 
 # 页面页默认设置
 page:
-  error: true #
-  tags: true # 标签
-  categories: true # 分类
+  error: true  # 404页面
+  tags: true # 标签页
+  categories: true # 分类页
   default: # 默认值
     cover: /img/default.png # 默认图片
 
@@ -278,42 +284,42 @@ post:
     url: /about # 打赏统计页面链接
   # 文章颜色获取
   covercolor: #文章cover取色
-    enable: false
-    local: true
+    enable: false # 是否开启
+    local: true # 本地取色
 
 # 关于界面
 about:
-  enable: false
+  enable: false # 是否开启
   echarts: # 文章统计
-    enable: false
+    enable: false # 是否开启
     startDate: "2023-04-20 00:00:00" # 统计开始日期 格式：yyyy-MM-dd hh-mm-ss
     tagLength: 10 # 标签显示数量
     categoryParent: true # 显示父分类
 
 # 404 页面
 errorpage:
-  img: https://npm.elemecdn.com/wzheo-absolute@1.0.3/image/source/404.png
-  text: =awa= 页面走丢了
-  recommendList: true # 显示随机文章
+  img: https://npm.elemecdn.com/wzheo-absolute@1.0.3/image/source/404.png # 图片
+  text: =awa= 页面走丢了 # 文字
+  recommendList: true # 推荐文章列表
 
 # 懒加载
 lazyload:
-  enable: false
+  enable: false # 是否开启
   placeholder: /img/loading.gif # 加载中显示图片
   errorimg: /img/error_load.png # 加载失败显示图片
 
 # 图片灯箱
-lightbox: false
+lightbox: false # 是否开启
 
 #代码高亮增强
 hightlight:
-  enable: false
-  hightlimit: 200
+  enable: false # 是否开启
+  hightlimit: 200 # 代码高亮字数限制
 
 # 加载动画
 loading:
-  fullpage: false
-  pace: false
+  fullpage: false # 全局加载动画
+  pace: false # 顶部加载动画
 
 # 第三方设置
 thirdparty:
@@ -359,31 +365,32 @@ thirdparty:
 
   # 朋友圈配置
   circle:
-    api: https://circle.sondy.top/  # api 地址
-    error_img: /img/theme/avatar.png # 头像加载失败显示错误图片
-    sort_rule: created # 排序规则
-    expire_days: 1 # 文章缓存天数
-    page_init_number: 12 # 默认加载文章数，默认10
-    page_turning_number: 12 # 加载更多文章数，默认10
-    angle: # 钓鱼
-      enable: true
+    api: https://circle.sondy.top/ # 朋友圈api
+    error_img: /img/theme/avatar.png # 加载失败显示图片
+    sort_rule: created # 排序规则（created:创建时间、updated:更新时间）
+    expire_days: 1 # 缓存过期时间（天）
+    page_init_number: 12 # 首次加载文章数，默认10
+    page_turning_number: 12 # 翻页加载文章数，默认10
+    angle: # 🎣钓鱼
+      enable: true # 是否开启
     appjs: '/lib/circle.min.js' # 主题appjs
-    bundlejs: '/lib/bundle.min.js' # 主题bundejs
+    bundlejs: '/lib/bundle.min.js' # 主题bundlejs
 
 # 评论
 comment:
-  enable: false
-  type: 'twikoo'
+  enable: false # 是否开启评论
+  type: 'twikoo' # valine, twikoo
   # 评论系统
   twikoo:
-    envId: https://twikoo.sondy.top
-    lang: 'zh-CN'
+    envId: # url: https://twikoo.sondy.top/
+    lang: 'zh-CN' # 语言
     accessToken:  # accessToken
 
 # 插入代码到头部 </head> 之前 和 底部 </body> 之前
 # 插入额外代码 如：统计，广告等
 extends:
   head: # 在head中插入
+  # - <script src="https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/pace.min.js"></script>
   body: # 在body中插入
 
 # 文章底部推荐文章
@@ -397,52 +404,56 @@ rightside:
   enable: false
 
 # 站点验证
+# 仅需要填写验证代码即可
 verify:
   # 百度
   baidu:
+  # 谷歌
+  google:
 
 # PWA
+# 图标信息非必选，填了就显示，不想添加的可以进行注释
 # https://github.com/JLHwung/hexo-offline
 pwa:
-  enable: false
-  startup_image_enable: false
-  manifest: /manifest.json
-  theme_color: '#ffffff'
-  mask_icon: /img/pwa/180.png
-  apple_touch_icon: /img/pwa/180.png
-  bookmark_icon: /img/pwa/180.png
-  favicon_32_32: /img/pwa/32.png
-  favicon_16_16: /img/pwa/16.png
-  favicon_2048_2732: /img/pwa/siteicon/splash-2048x2732.png
-  favicon_2732_2048: /img/pwa/siteicon/splash-2732x2048.png
-  favicon_1668_2388: /img/pwa/siteicon/splash-1668x2388.png
-  favicon_2388_1668: /img/pwa/siteicon/splash-2388x1668.png
-  favicon_1536_2048: /img/pwa/siteicon/splash-1536x2048.png
-  favicon_2048_1536: /img/pwa/siteicon/splash-2048x1536.png
-  favicon_1668_2224: /img/pwa/siteicon/splash-1668x2224.png
-  favicon_2224_1668: /img/pwa/siteicon/splash-2224x1668.png
-  favicon_1620_2160: /img/pwa/siteicon/splash-1620x2160.png
-  favicon_2160_1620: /img/pwa/siteicon/splash-2160x1620.png
-  favicon_1290_2796: /img/pwa/siteicon/splash-1290x2796.png
-  favicon_2796_1290: /img/pwa/siteicon/splash-2796x1290.png
-  favicon_1179_2556: /img/pwa/siteicon/splash-1179x2556.png
-  favicon_2556_1179: /img/pwa/siteicon/splash-2556x1179.png
-  favicon_1248_2778: /img/pwa/siteicon/splash-1248x2778.png
-  favicon_2778_1248: /img/pwa/siteicon/splash-2778x1248.png
-  favicon_1170_2532: /img/pwa/siteicon/splash-1170x2532.png
-  favicon_2532_1170: /img/pwa/siteicon/splash-2532x1170.png
-  favicon_1125_2436: /img/pwa/siteicon/splash-1125x2436.png
-  favicon_2436_1125: /img/pwa/siteicon/splash-2436x1125.png
-  favicon_1242_2688: /img/pwa/siteicon/splash-1242x2688.png
-  favicon_2688_1242: /img/pwa/siteicon/splash-2688x1242.png
-  favicon_828_1792: /img/pwa/siteicon/splash-828x1792.png
-  favicon_1792_828: /img/pwa/siteicon/splash-1792x828.png
-  favicon_1242_2208: /img/pwa/siteicon/splash-1242x2208.png
-  favicon_2208_1242: /img/pwa/siteicon/splash-2208x1242.png
-  favicon_750_1334: /img/pwa/siteicon/splash-750x1334.png
-  favicon_1334_750: /img/pwa/siteicon/splash-1334x750.png
-  favicon_640_1136: /img/pwa/siteicon/splash-640x1136.png
-  favicon_1136_640: /img/pwa/siteicon/splash-1136x640.png
+  enable: false # 是否开启
+  startup_image_enable: false # 是否开启启动画面
+  manifest: /manifest.json # manifest.json 文件路径
+  theme_color: '#ffffff' # 主题颜色
+  mask_icon: /img/pwa/180.png # 遮罩图标
+  apple_touch_icon: /img/pwa/180.png # 苹果触摸图标
+  bookmark_icon: /img/pwa/180.png # 书签图标
+  favicon_32_32: /img/pwa/32.png # 32x32图标
+  favicon_16_16: /img/pwa/16.png # 16x16图标
+  favicon_2048_2732: /img/pwa/siteicon/splash-2048x2732.png # 2048x2732图标
+  favicon_2732_2048: /img/pwa/siteicon/splash-2732x2048.png # 2732x2048图标
+  favicon_1668_2388: /img/pwa/siteicon/splash-1668x2388.png # 1668x2388图标
+  favicon_2388_1668: /img/pwa/siteicon/splash-2388x1668.png # 2388x1668图标
+  favicon_1536_2048: /img/pwa/siteicon/splash-1536x2048.png # 1536x2048图标
+  favicon_2048_1536: /img/pwa/siteicon/splash-2048x1536.png # 2048x1536图标
+  favicon_1668_2224: /img/pwa/siteicon/splash-1668x2224.png # 1668x2224图标
+  favicon_2224_1668: /img/pwa/siteicon/splash-2224x1668.png # 2224x1668图标
+  favicon_1620_2160: /img/pwa/siteicon/splash-1620x2160.png # 1620x2160图标
+  favicon_2160_1620: /img/pwa/siteicon/splash-2160x1620.png # 2160x1620图标
+  favicon_1290_2796: /img/pwa/siteicon/splash-1290x2796.png # 1290x2796图标
+  favicon_2796_1290: /img/pwa/siteicon/splash-2796x1290.png # 2796x1290图标
+  favicon_1179_2556: /img/pwa/siteicon/splash-1179x2556.png # 1179x2556图标
+  favicon_2556_1179: /img/pwa/siteicon/splash-2556x1179.png # 2556x1179图标
+  favicon_1248_2778: /img/pwa/siteicon/splash-1248x2778.png # 1248x2778图标
+  favicon_2778_1248: /img/pwa/siteicon/splash-2778x1248.png # 2778x1248图标
+  favicon_1170_2532: /img/pwa/siteicon/splash-1170x2532.png # 1170x2532图标
+  favicon_2532_1170: /img/pwa/siteicon/splash-2532x1170.png # 2532x1170图标
+  favicon_1125_2436: /img/pwa/siteicon/splash-1125x2436.png # 1125x2436图标
+  favicon_2436_1125: /img/pwa/siteicon/splash-2436x1125.png # 2436x1125图标
+  favicon_1242_2688: /img/pwa/siteicon/splash-1242x2688.png # 1242x2688图标
+  favicon_2688_1242: /img/pwa/siteicon/splash-2688x1242.png # 2688x1242图标
+  favicon_828_1792: /img/pwa/siteicon/splash-828x1792.png # 828x1792图标
+  favicon_1792_828: /img/pwa/siteicon/splash-1792x828.png # 1792x828图标
+  favicon_1242_2208: /img/pwa/siteicon/splash-1242x2208.png # 1242x2208图标
+  favicon_2208_1242: /img/pwa/siteicon/splash-2208x1242.png # 2208x1242图标
+  favicon_750_1334: /img/pwa/siteicon/splash-750x1334.png # 750x1334图标
+  favicon_1334_750: /img/pwa/siteicon/splash-1334x750.png # 1334x750图标
+  favicon_640_1136: /img/pwa/siteicon/splash-640x1136.png # 640x1136图标
+  favicon_1136_640: /img/pwa/siteicon/splash-1136x640.png # 1136x640图标
 
 says:
   enable: false
diff --git a/layout/includes/widgets/aside/asidePower.pug b/layout/includes/widgets/aside/asidePower.pug
index b41923c9..69640bb2 100644
--- a/layout/includes/widgets/aside/asidePower.pug
+++ b/layout/includes/widgets/aside/asidePower.pug
@@ -1,4 +1,4 @@
-- const data = site.data.afadian.links
+- const data = theme.aside.power.list
 - const vip = data[Math.floor(Math.random() * data.length)]
 .card-widget.card-power
     .item-headline
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 316eadc0..3c6ddd45 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -344,9 +344,6 @@
     margin-bottom: 1rem
     min-height: 260px
 
-  #page-header.nav-visible + .layout > .aside-content > .sticky_layout
-    top: 80px
-
   width: 300px
 
   @media screen and (max-width: 1300px)
@@ -490,19 +487,6 @@ li.card-archive-list-item
   font-size: 16px !important
 
 @media screen and (min-width: 1300px)
-  #aside-content
-    padding-left: 1rem
-    animation: slide-in .6s .3s backwards
-
-  #aside-content .sticky_layout
-    top: calc(60px + 1rem)
-
-  #page-header.nav-visible + .layout > .aside-content > .sticky_layout
-    top: calc(60px + 1rem)
-
-  [data-theme=dark] #aside-content > .card-widget.card-info
-    border: var(--style-border-always)
-
   .coverdiv
     height: 130%
 
@@ -587,6 +571,7 @@ a#power-star
   margin: 12px 0
   background: var(--sco-secondbg)
   transition: .3s ease-out
+  cursor pointer
 
 a#power-star:hover
   background: var(--sco-main)
@@ -652,17 +637,6 @@ div#power-star-title
   border-radius: 8px
   color: var(--sco-white)
 
-#aside-content .card-widget
-  box-shadow: var(--sco-shadow-border)
-  background: var(--sco-card-bg)
-  border: var(--style-border)
-  transition: .3s
-  border-radius: 12px
-  position: relative
-  overflow: hidden
-  margin-top: 1rem
-  padding: 1rem 1.2rem
-
 #aside-content
   #card-toc
     .toc-content
@@ -967,10 +941,6 @@ div#author-info__sayhi
 #card-toc
   padding: .5rem .5rem !important
 
-@media screen and (max-width: 1300px)
-  #aside-content > .card-widget:first-child
-    min-height: 329px
-
 @media screen and (max-width: 900px)
   #aside-content
     .card-announcement
@@ -989,14 +959,6 @@ div#author-info__sayhi
     [data-theme=dark] .card-info .card-info-social-icons i
       color: var(--sco-card-bg)
 
-@media screen and (max-width: 768px)
-  #aside-content .card-widget
-    border-radius: 12px
-
-@media screen and (min-width: 1300px)
-  #aside-content .card-widget
-    margin-top: 1rem
-
 .author-info__description
   line-height: 1.38
   margin: .3rem 0
diff --git a/source/css/_layout/header.styl b/source/css/_layout/header.styl
index 0da3759d..7c610d13 100644
--- a/source/css/_layout/header.styl
+++ b/source/css/_layout/header.styl
@@ -363,13 +363,6 @@
       +maxWidth768()
         opacity 0
 
-  &.nav-visible
-    & + .layout
-      & > .aside-content
-        & > .sticky_layout
-          top 70px
-          transition top .5s ease 0s
-
   &.no-top-img
     margin-bottom 0
 
diff --git a/source/css/_layout/index.styl b/source/css/_layout/index.styl
index 47cb9ce3..d0173dd5 100644
--- a/source/css/_layout/index.styl
+++ b/source/css/_layout/index.styl
@@ -221,15 +221,6 @@
     > div
       width 100% !important
 
-  #aside-content
-    +maxWidth768()
-      z-index 2
-      background var(--sco-background)
-      padding 0 1rem
-      display flex
-      flex-direction column
-      width 100%
-
   > div:first-child
     width calc(100% - 300px)
 
@@ -297,12 +288,6 @@
         background: var(--sco-background)
 
 +minWidth900()
-  html.hide-aside .layout
-    -webkit-box-pack: center
-    justify-content: center
-
-  html.hide-aside .layout > .aside-content
-    display: none
 
   html.hide-aside .layout > div:first-child
     width: 100%
\ No newline at end of file
diff --git a/source/css/_widgets/aside/index.styl b/source/css/_widgets/aside/index.styl
new file mode 100644
index 00000000..c18d5a8a
--- /dev/null
+++ b/source/css/_widgets/aside/index.styl
@@ -0,0 +1,79 @@
+#aside-content
+  width 300px
+
+  +minWidth900()
+    padding-left 15px
+
+  +maxWidth1200()
+    display none
+
+  +minWidth1300()
+    padding-left 1rem
+    animation slide-in .6s .3s backwards
+
+  .card-widget
+    box-shadow var(--sco-shadow-border)
+    background var(--sco-card-bg)
+    border var(--style-border)
+    transition 0.3
+    border-radius 12px
+    position relative
+    overflow hidden
+    margin-top 1rem
+    padding 1rem 1.2rem
+
+    &.card-info
+      padding 0 !important
+      background var(--sco-card-bg)
+      box-shadow var(--sco-shadow-black)
+      position relative
+
+      > div.card-content
+        padding 1rem 1.2rem
+        min-height 320px
+        position relative
+
+    > .card-widget
+      &:first-child
+        transition 0.3s
+        border none
+        margin-top 0
+
+
+  .sticky_layout
+    top 80px
+    transition top 0s
+
+    +minWidth900()
+      position sticky
+
+    +minWidth1300()
+      top calc(60px + 1rem)
+
+.page
+  .sticky_layout
+    display: flex
+    -webkit-box-orient: vertical
+    flex-direction: column
+
+
+#page-header.nav-visible + .layout > .aside-content > .sticky_layout
+  top 70px
+  transition top .5s ease 0s
+
+  +minWidth900()
+    position sticky
+
+  +minWidth1300()
+    top calc(60px + 1rem)
+
++minWidth900()
+  html.hide-aside .layout
+    -webkit-box-pack: center
+    justify-content: center
+
+  html.hide-aside .layout > .aside-content
+    display: none
+
+[data-theme=dark] #aside-content > .card-widget.card-info
+  border: var(--style-border-always)
\ No newline at end of file
diff --git a/source/css/_widgets/aside/toc.styl b/source/css/_widgets/aside/toc.styl
new file mode 100644
index 00000000..e69de29b
diff --git a/source/css/_widgets/index.styl b/source/css/_widgets/index.styl
new file mode 100644
index 00000000..5ee22c36
--- /dev/null
+++ b/source/css/_widgets/index.styl
@@ -0,0 +1,3 @@
+// aside（侧边栏）
+
+@import "aside/index.styl"
\ No newline at end of file
diff --git a/source/css/index.styl b/source/css/index.styl
index eee9029d..25bb5c6b 100644
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -10,6 +10,9 @@ if hexo-config('css_prefix')
 @import '_page/*'
 @import '_post/*'
 
+// widgets
+@import '_widgets/index.styl'
+
 // comment
 if hexo-config('comment.enable')
   @import '_comment/index.styl'

From f1c3587c515ad56385f87c33c304f77ce48db586 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Mon, 27 Nov 2023 23:37:45 +0800
Subject: [PATCH 38/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复导航栏随机文章按钮无反应问题
---
 layout/includes/widgets/nav/right.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layout/includes/widgets/nav/right.pug b/layout/includes/widgets/nav/right.pug
index 36a5a841..0da9f78c 100644
--- a/layout/includes/widgets/nav/right.pug
+++ b/layout/includes/widgets/nav/right.pug
@@ -4,7 +4,7 @@ if theme.nav.right.travellings
             i.scoicon.sco-train-line(style="font-size: 1rem;")
 if theme.nav.right.random
     div.nav-button#randomPost_button
-        a.site-page(onclick="sco.toRandomPost()", title="随机前往一个文章")
+        a.site-page(onclick="toRandomPost()", title="随机前往一个文章")
             i.scoicon.sco-signal-tower-fill(style="font-size: 1rem;")
 if theme.thirdparty.search.enable
     div.nav-button#search-button

From fb6b4c2389a842e3588321c44deabb6fd609a3aa Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Tue, 28 Nov 2023 11:20:17 +0800
Subject: [PATCH 39/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复文章顶部信息（发布时间、更新时间）显示错误问题
移除sidebar多余文字
---
 layout/includes/sidebar.pug               | 3 ---
 layout/includes/widgets/post/postMeta.pug | 4 ++--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug
index fffa6e8c..ef049ad2 100644
--- a/layout/includes/sidebar.pug
+++ b/layout/includes/sidebar.pug
@@ -11,9 +11,6 @@ div#sidebar(style="zoom: 1;")
         include ./widgets/nav/menu.pug
         span.sidebar-menu-item-title= "标签"
         div.card-widget.card-tags.card-archives.card-webinfo.card-allinfo
-            div.item-headline
-                i.scoicon.sco-price-tag-fill
-                span= "标签"
             div.card-tag-cloud
                 each tag in site.tags.data
                     a(href=url_for(tag.path), style="font-size: 1rem; color: #d3d3d3")= tag.name
diff --git a/layout/includes/widgets/post/postMeta.pug b/layout/includes/widgets/post/postMeta.pug
index a7ad84ea..02a0221a 100644
--- a/layout/includes/widgets/post/postMeta.pug
+++ b/layout/includes/widgets/post/postMeta.pug
@@ -18,11 +18,11 @@ div#post-info
             if theme.post.meta.date
                 span.post-meta-date(title="发布于")
                     i.post-meta-icon.scoicon.sco-calendar-todo-fill
-                    time.datetime=moment(page.date).format()
+                    time(datetime=date_xml(page.date))= date_xml(page.date)
             if theme.post.meta.updated
                 span.post-meta-date(title="最后更新于")
                     i.post-meta-icon.scoicon.sco-refresh-line
-                    time.datetime=moment(page.updated).format()
+                    time(datetime=date_xml(page.updated))= date_xml(page.updated)
             if theme.thirdparty.wordcount
                 span.post-meta-wordcount
                     if theme.post.meta.wordcount

From 321e731a05e16a655df8793f33802cbdef226483 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Tue, 28 Nov 2023 15:34:31 +0800
Subject: [PATCH 40/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

分解aside样式
---
 .../includes/widgets/aside/asideHistory.pug   |   36 -
 .../includes/widgets/aside/asideWelcome.pug   |   16 -
 source/css/_layout/aside.styl                 | 1270 -----------------
 source/css/_layout/base.styl                  |    5 -
 source/css/_widgets/aside/allinfo.styl        |  139 ++
 source/css/_widgets/aside/history.styl        |   35 +
 source/css/_widgets/aside/index.styl          |  100 +-
 source/css/_widgets/aside/info.styl           |  263 ++++
 source/css/_widgets/aside/power.styl          |   90 ++
 source/css/_widgets/aside/toc.styl            |   85 ++
 source/css/_widgets/aside/welcome.styl        |   14 +
 source/js/main.js                             |    2 +-
 12 files changed, 710 insertions(+), 1345 deletions(-)
 delete mode 100644 source/css/_layout/aside.styl
 create mode 100644 source/css/_widgets/aside/allinfo.styl
 create mode 100644 source/css/_widgets/aside/history.styl
 create mode 100644 source/css/_widgets/aside/info.styl
 create mode 100644 source/css/_widgets/aside/power.styl
 create mode 100644 source/css/_widgets/aside/welcome.styl

diff --git a/layout/includes/widgets/aside/asideHistory.pug b/layout/includes/widgets/aside/asideHistory.pug
index 2c4094c7..ae9be5c3 100644
--- a/layout/includes/widgets/aside/asideHistory.pug
+++ b/layout/includes/widgets/aside/asideHistory.pug
@@ -1,40 +1,4 @@
 if theme.aside.history.enable
-    style.
-        .swiper-wrapper {
-            flex-direction: column;
-        }
-        .history_slide {
-            text-align: left;
-            display: flex !important;
-            flex-direction: column;
-            align-items: flex-start;
-        }
-        #history-baidu > .blog-slider__pagination {
-            display: none;
-        }
-        .history_slide_time {
-            color: var(--sco-secondtext);
-            font-size: 14px;
-            font-style: italic;
-            font-weight: lighter;
-        }
-        .history_slide_link {
-            line-height: 1.5;
-            -webkit-line-clamp: 2;
-            display: -webkit-box;
-            overflow: hidden;
-            -webkit-box-orient: vertical;
-        }
-        .history_slide_link a {
-            color: var(--sco-main);
-            padding: 0 4px;
-            border-radius: 4px;
-        }
-        .history_slide_link a:hover {
-            color: var(--sco-white);
-            background: var(--sco-main);
-        }
-
     .card-widget.card-history
         .item-headline
             i(class=theme.aside.history.icon || 'scoicon sco-clock-fill')
diff --git a/layout/includes/widgets/aside/asideWelcome.pug b/layout/includes/widgets/aside/asideWelcome.pug
index 5fa89dcc..08d60fda 100644
--- a/layout/includes/widgets/aside/asideWelcome.pug
+++ b/layout/includes/widgets/aside/asideWelcome.pug
@@ -1,20 +1,4 @@
 if theme.aside.welcome.enable
-    style.
-        #welcome-info {
-            overflow: hidden;
-            margin-top: 4px;
-        }
-        #welcome-info .welcome-time {
-            width: 100%;
-            margin: 12px 0 0;
-            display: inline-flex;
-        }
-        #welcome-info .welcome-message {
-            width: 100%;
-            margin-bottom: 8px;
-            display: inline-flex;
-        }
-
     .card-widget.card-welcome
         .item-headline
             i(class=theme.aside.welcome.icon || 'scoicon sco-map-pin-fill')
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
deleted file mode 100644
index 3c6ddd45..00000000
--- a/source/css/_layout/aside.styl
+++ /dev/null
@@ -1,1270 +0,0 @@
-#aside-content
-  .card-archives ul.card-archive-list > .card-archive-list-item a span,
-  .card-categories ul.card-category-list > .card-category-list-item a span,
-  .card-info .card-info-data > .card-info-data-item a .headline,
-  #pagination .next_info,
-  #pagination .prev_info,
-  #sidebar #sidebar-menus .menus_items .site-page,
-  #sidebar #sidebar-menus .site-data .data-item .data-item-link > a > div,
-  .flink#article-container .flink-list > .flink-list-item a .flink-item-desc,
-  .flink#article-container .flink-list > .flink-list-item a .flink-item-name,
-  .limit-one-line
-    text-overflow: ellipsis
-    white-space: nowrap
-
-  .aside-list > .aside-list-item .content > .comment,
-  .aside-list > .aside-list-item .content > .name,
-  .aside-list > .aside-list-item .content > .title,
-  #error-wrap .error-content .error-info .error_subtitle,
-  #post-info .post-title,
-  #recent-posts > .recent-post-item > .recent-post-info > .article-title,
-  #recent-posts > .recent-post-item > .recent-post-info > .content,
-  .article-sort-item-title,
-  .limit-more-line,
-  .relatedPosts > .relatedPosts-list .content .title,
-  figure.gallery-group .gallery-group-name,
-  figure.gallery-group p
-    display: -webkit-box
-    -webkit-box-orient: vertical
-
-  .aside-list > .aside-list-item .content > .title
-    overflow: hidden
-
-  .author-info__description,
-  .author-info__name,
-  #site-name,
-  #site-subtitle,
-  #site-title
-    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
-
-  @media screen and (min-width: 900px)
-    padding-left: 15px
-
-  @media screen and (max-width: 900px)
-    width: 100%
-
-  @media screen and (max-width: 900px)
-    > .card-widget:first-child
-      margin-top: 1rem
-
-  @media screen and (max-width: 768px)
-    .card-widget:not(#card-toc)
-      display: none !important
-
-  .card-info img.avatar-img
-    width: 118px
-    right: 0
-    top: 0
-    border-radius: 500px
-    position: absolute
-    opacity: 1
-    transition: .3s
-
-  .author-info__top-group
-    display: flex
-    height: 28px
-    width: 100%
-
-  .card-info .author-info__description
-    margin-top: -.3rem
-
-  .card-info .card-info-data
-    display: table
-    margin: .7rem 0 .2rem
-    width: 100%
-    table-layout: fixed
-
-  .card-info .card-info-data > .card-info-data-item
-    display: table-cell
-
-  .card-info .card-info-data > .card-info-data-item:hover
-    background: #000
-    border-radius: 5px
-
-  .card-info .card-info-data > .card-info-data-item a .headline
-    color: var(--sco-fontcolor)
-    font-size: 1em
-
-  .card-info .card-info-data > .card-info-data-item a .length-num
-    margin-top: -.3rem
-    color: var(--text-highlight-color)
-    font-size: 1.4em
-
-  .card-info .card-info-social-icons
-    margin: .3rem 0 -.3rem
-
-  .card-info .card-info-social-icons .social-icon
-    margin: 0 .5rem
-    color: var(--sco-fontcolor)
-    font-size: 1.4em
-    cursor: pointer
-    display: flex
-
-  .card-info .card-info-social-icons i
-    transition: all .3s ease 0s
-    padding: 8px
-    border-radius: 32px
-
-  .card-info .card-info-social-icons i:hover
-    transform: rotate(540deg)
-    background-color: #000
-    cursor: pointer
-
-  .card-info #card-info-btn
-    display: block
-    margin-top: .7rem
-    background-color: var(--btn-bg)
-    color: var(--btn-color)
-    text-align: center
-    line-height: 2.4
-
-  .card-info #card-info-btn span
-    padding-left: .5rem
-
-  @media screen and (min-width: 900px)
-    .sticky_layout
-      position: sticky
-      top: 20px
-      transition: top .3s ease 0s
-
-  .card-tag-cloud a
-    display: inline-block
-    padding: 0 .3rem
-
-  .aside-list > span
-    display: block
-    margin-bottom: .5rem
-    text-align: center
-
-  .aside-list > .aside-list-item:last-child
-    padding-bottom: 0
-
-  .aside-list > .aside-list-item .thumbnail
-    overflow: hidden
-    width: 4.2em
-    height: 4.2em
-
-  .aside-list > .aside-list-item .thumbnail > img
-    width: 100%
-    height: 100%
-    transition: all .6s ease 0s
-    object-fit: cover
-
-  .aside-list > .aside-list-item .thumbnail > img:hover
-    transform: scale(1.1)
-
-  .aside-list > .aside-list-item .content
-    -webkit-box-flex: 1
-    flex: 1 1 0
-    padding-left: 10px
-    word-break: break-all
-    display: flex
-    flex-direction: column
-
-  .aside-list > .aside-list-item .content > .name
-    -webkit-line-clamp: 1
-
-  .aside-list > .aside-list-item .content > .name,
-  .aside-list > .aside-list-item .content > time
-    display: block
-    color: #858585
-    font-size: 85%
-
-  .aside-list > .aside-list-item .content > .comment,
-  .aside-list > .aside-list-item .content > .title
-    color: var(--sco-fontcolor)
-    font-size: 95%
-    line-height: 1.3
-    -webkit-line-clamp: 2
-
-  .aside-list > .aside-list-item .content > .comment:hover,
-  .aside-list > .aside-list-item .content > .title:hover
-    color: #307af6
-
-  .aside-list > .aside-list-item.no-cover
-    min-height: 4.4em
-
-  .card-archives ul.card-archive-list,
-  .card-categories ul.card-category-list
-    margin: 0
-    padding: 0
-    list-style: none
-
-  .card-archives ul.card-archive-list > .card-archive-list-item a,
-  .card-categories ul.card-category-list > .card-category-list-item a
-    display: inline-block
-    padding: .15rem .5rem
-    width: 100%
-    color: var(--sco-fontcolor)
-    transition: all .4s ease 0s
-    border-radius: 5px
-
-  .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
-  .card-categories ul.card-category-list > .card-category-list-item a:hover
-    padding: .15rem .85rem
-    background-color: #fff
-    color: #427bee
-    border-radius: 5px
-
-  .card-archives ul.card-archive-list > .card-archive-list-item a span,
-  .card-categories ul.card-category-list > .card-category-list-item a span
-    display: inline-block
-    vertical-align: bottom
-
-  .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
-  .card-categories ul.card-category-list > .card-category-list-item a span:first-child
-    width: 80%
-
-  .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child,
-  .card-categories ul.card-category-list > .card-category-list-item a span:last-child
-    width: 20%
-    text-align: right
-
-  .card-categories .card-category-list.child
-    padding: 0 0 0 .8rem
-
-  .card-categories .card-category-list > .parent > a .card-category-list-name
-    width: 70% !important
-
-  .card-categories .card-category-list > .parent > a .card-category-list-count
-    width: calc(30% - 20px)
-    text-align: right
-
-  .card-categories .card-category-list > .parent i
-    float: right
-    margin-right: -.35rem
-    padding: .35rem
-    transition: transform .3s ease 0s
-    transform: rotate(0)
-
-  .card-categories .card-category-list > .parent i.expand
-    transform: rotate(-90deg)
-
-  .card-webinfo .webinfo .webinfo-item
-    display: flex
-    -webkit-box-align: center
-    align-items: center
-    padding: .1rem .5rem 0
-
-  .card-webinfo .webinfo .webinfo-item div:first-child
-    -webkit-box-flex: 1
-    flex: 1 1 0
-    padding-right: 1rem
-
-  @media screen and (min-width: 901px)
-    #card-toc
-      right: 0 !important
-
-  @media screen and (max-width: 900px)
-    #card-toc
-      position: fixed
-      right: -100%
-      bottom: 30px
-      z-index: 100
-      max-height: calc(100% - 60px)
-      width: 300px
-      opacity: 0
-      transform-origin: right bottom
-
-  #card-toc .toc-content
-    overflow-y: auto
-    max-height: calc(100vh - 300px)
-
-  @media screen and (max-width: 900px)
-    #card-toc .toc-content
-      max-height: calc(100vh - 140px)
-
-  #card-toc .toc-content .toc-child
-    display: none
-
-  @media screen and (max-width: 900px)
-    #card-toc .toc-content .toc-child
-      display: block !important
-
-  #card-toc .toc-content .toc-item.active .toc-child
-    display: block
-
-  #card-toc .toc-content li,
-  #card-toc .toc-content ol
-    list-style: none
-
-  #card-toc .toc-content > ol
-    padding: 0 !important
-
-  #card-toc .toc-content ol
-    margin: 0
-    padding-left: .4rem
-
-  #card-toc .toc-content .toc-link
-    display: block
-    padding-left: .3rem
-    border-left: 3px solid transparent
-    color: var(--toc-link-color)
-    transition: all .2s ease-in-out 0s
-
-  #card-toc .toc-content .toc-link.active
-    border-left-color: #0061cc
-    background: #0079ff
-    color: #fff
-
-  #card-toc .toc-content::before
-    position: absolute
-    top: .6rem
-    right: 1.2rem
-    color: #a9a9a9
-    content: attr(progress-percentage)
-    font-style: italic
-    font-size: 1.2rem
-
-  :only-child > .card-widget
-    margin-top: 0
-
-  .card-more-btn
-    float: right
-    color: inherit
-
-  .card-more-btn:hover
-    animation: 1s ease 0s infinite normal none running more-btn-move
-
-  .card-info .card-info-data > .card-info-data-item
-    transition: .3s
-
-  @media screen and (max-width: 1300px)
-    .sticky_layout
-      top: 60px
-
-  .sticky_layout
-    top: 80px
-    transition: top 0s
-
-  .card-widget:hover
-    box-shadow: var(--sco-shadow-border)
-
-  #card-funds
-    margin-bottom: 1rem
-    min-height: 260px
-
-  width: 300px
-
-  @media screen and (max-width: 1300px)
-    width: 300px
-    animation: slide-in .6s .3s backwards
-
-  @media screen and (max-width: 1200px)
-    display: none
-
-  .aside-list > .aside-list-item .content > time
-    display: none
-
-  .aside-list > .aside-list-item .content > .title
-    font-weight: 700
-    padding: 2px 0
-
-  .aside-list > .aside-list-item
-    padding: 6px !important
-    border-radius: 12px
-    transition: .3s
-    margin: 4px 0
-    cursor: pointer
-    display: flex
-    -webkit-box-align: center
-    align-items: center
-
-  .aside-list > .aside-list-item:hover .thumbnail > img
-    transform: scale(1)
-
-  .aside-list > .aside-list-item:not(:last-child)
-    border-bottom: 0 dashed var(--sco-background) !important
-
-  .aside-list > .aside-list-item .thumbnail
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
-    border-radius: 8px
-    border: var(--style-border)
-
-  .aside-list > .aside-list-item:hover
-    background: var(--sco-main)
-    color: var(--sco-white)
-    transition: .3s
-    box-shadow: var(--sco-shadow-main)
-
-  .aside-list > .aside-list-item:hover a
-    color: var(--sco-white) !important
-
-  .card-archives ul.card-archive-list > .card-archive-list-item a,
-  .card-categories ul.card-category-list > .card-category-list-item a
-    border-radius: 8px
-    margin: 4px 0
-    display: flex
-    flex-direction: column
-    align-content: space-between
-    border: var(--style-border)
-
-  .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
-  .card-categories ul.card-category-list > .card-category-list-item a span:first-child
-    width: auto
-
-  .card-archives ul.card-archive-list,
-  .card-categories ul.card-category-list
-    display: flex
-    flex-direction: row
-    justify-content: space-between
-    flex-wrap: wrap
-
-  a.card-archive-list-link-more
-    color: var(--sco-white) !important
-    background: var(--sco-card-btn-bg)
-    margin-top: 8px
-
-  .card-allinfo hr
-    display: flex
-    position: relative
-    margin: 1rem 0
-    border: 1px dashed var(--sco-theme-op)
-
-  .card-allinfo .item-headline
-    display: none
-
-  span.card-archive-list-count
-    width: auto
-    text-align: left
-    font-size: 1.1rem
-    line-height: .9
-    font-weight: 700
-
-.card-archive-list-count-group
-  display: flex
-  flex-direction: row
-  align-items: baseline
-
-#aside-content
-  .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child,
-  .card-categories ul.card-category-list > .card-category-list-item a span:last-child
-    width: fit-content
-    margin-left: 4px
-
-.card-archive-list-count-unit
-  width: auto
-  text-align: left
-  font-size: 14px
-  font-weight: 700
-
-.card-archive-list-date
-  font-size: 14px
-  opacity: .6
-
-li.card-archive-list-item
-  width: 100%
-  flex: 0 0 48%
-
-.card-category-list
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-  justify-content: space-between
-
-.card-category-list-item
-  width: 45%
-
-.card-category-list-count
-  display: none !important
-
-.card-category-list-name
-  width: 100% !important
-  text-align: center
-
-.webinfo-item
-  display: flex
-  white-space: nowrap
-
-.webinfo-item-title
-  display: flex
-
-.webinfo-item-title i
-  line-height: 2 !important
-  margin-right: 6px
-  width: 16px
-  text-align: center
-  font-size: 16px !important
-
-@media screen and (min-width: 1300px)
-  .coverdiv
-    height: 130%
-
-#aside-content
-  .card-widget#card-music
-    background: var(--sco-pink)
-    display: flex
-    justify-content: center
-    align-content: center
-    padding: 0
-    cursor: pointer
-    border: none
-
-  .card-widget#card-music img
-    max-height: 110px
-    object-fit: cover
-
-  .card-widget#card-music:hover img
-    transition: .5s
-    -webkit-backface-visibility: hidden
-    -webkit-transform-style: preserve-3d
-
-  .card-widget#card-friendlinks
-    background: var(--sco-main)
-    display: flex
-    justify-content: center
-    align-content: center
-    padding: 0
-    cursor: pointer
-    border: none
-
-  .card-widget#card-friendlinks img
-    max-height: 110px
-    object-fit: cover
-
-  .card-widget#card-friendlinks:hover img
-    transition: .5s
-    -webkit-backface-visibility: hidden
-    -webkit-transform-style: preserve-3d
-
-  .card-widget.card-power, .card-widget.card-history, .card-widget.card-welcome
-    padding: .4rem .6rem !important
-
-  .card-widget.card-power .power-charge
-    margin-left: auto
-    color: var(--sco-secondtext)
-    font-size: 14px
-    line-height: 1
-
-  .card-widget.card-power .power-charge:hover
-    color: var(--sco-lighttext)
-
-.power-list
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-  margin: 0 -4px
-
-.power-list .power-item .power-item-link a
-  padding: 2px 4px
-  border-radius: 4px
-  margin-left: 8px
-
-.power-list .power-item .power-item-link a:hover
-  background: var(--sco-main)
-  color: var(--sco-white)
-
-#aside-content .power-item-body
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-
-a#power-star
-  display: flex
-  padding: 8px
-  border: var(--style-border-always)
-  border-radius: 8px
-  flex-direction: row
-  flex-wrap: nowrap
-  justify-content: flex-start
-  position: relative
-  margin: 12px 0
-  background: var(--sco-secondbg)
-  transition: .3s ease-out
-  cursor pointer
-
-a#power-star:hover
-  background: var(--sco-main)
-  color: var(--sco-white)
-  box-shadow: var(--sco-shadow-theme)
-
-a#power-star:hover #power-star-image
-  transform: scale(.9)
-
-#power-star-image
-  width: 60px
-  height: 60px
-  border-radius: 60px
-  background-size: cover
-  margin-right: 12px
-  border: var(--style-border-always)
-  transition: .3s ease-out
-
-div#power-star-title
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
-  font-size: 16px
-  font-weight: 700
-  line-height: 1
-  margin-bottom: 8px
-
-#power-star-desc
-  display: -webkit-box
-  -webkit-box-orient: vertical
-  -webkit-line-clamp: 2
-  overflow: hidden
-  font-size: 12px
-  max-width: 100%
-  line-height: 1.2
-
-.power-star-body
-  display: flex
-  flex-direction: column
-  align-items: flex-start
-  flex-wrap: wrap
-  position: relative
-  width: calc(100% - 68px)
-  justify-content: center
-
-#card-vip-designweekly.card-widget
-  display: flex !important
-  padding: 0
-  cursor: pointer
-
-#card-vip-designweekly.card-widget .card-vip-designweekly-img
-  width: 100%
-  object-fit: cover
-
-.card-vip-tips
-  display: flex
-  position: absolute
-  font-size: 12px
-  bottom: 8px
-  left: 8px
-  padding: 1px 6px
-  background: var(--sco-black-op)
-  border-radius: 8px
-  color: var(--sco-white)
-
-#aside-content
-  #card-toc
-    .toc-content
-      .toc-link
-        line-height: 24px
-        padding: 8px
-        border-left: 0 solid transparent
-        border-radius: 12px
-        color: var(--sco-secondtext)
-        cursor: default
-        min-height: 40px
-        display: flex
-        align-items: center
-
-        &.active
-          border-radius: 12px
-          border-left-color: var(--sco-hovertext)
-          background-color: var(--sco-card-bg)
-          color: var(--sco-lighttext)
-          font-weight: 700
-          font-size: 20px
-
-        &:not(.active) span
-          opacity: .6
-          cursor: pointer
-          filter: blur(1px)
-          transition: .3s
-
-          &:hover
-            color: var(--sco-lighttext)
-
-      .toc-item.active .toc-link
-        opacity: 1
-        border-radius: 8px
-
-    &:hover
-      .toc-content
-        .toc-link:not(.active) span
-          filter: blur(0)
-          opacity: 1
-
-  .card-tag-cloud
-    a sup
-      opacity: .6
-      margin-left: 2px
-
-  .card-info
-    .author-info__name
-      text-align: left
-      font-weight: 700
-      color: var(--sco-card-bg)
-      font-size: 20px
-      line-height: 1
-      margin-bottom: 5px
-
-    .card-info-social-icons
-      margin: 0
-      display: flex
-      justify-content: flex-start
-      flex-direction: row
-      flex-wrap: nowrap
-      cursor: pointer
-
-      .social-icon
-        margin: 0 0 0 8px
-
-      i
-        background: var(--sco-white-op)
-        color: var(--sco-white)
-        font-size: 1rem
-        width: 40px
-        height: 40px
-        display: flex
-        align-items: center
-        justify-content: center
-
-        &:hover
-          background: var(--sco-white)
-          transform: scale(1.1)
-          color: var(--sco-main)
-          box-shadow: none
-
-    .card-info-data
-      display: none
-
-    a img
-      border-radius: 0
-      height: 200px
-      display: inherit
-      filter: drop-shadow(-5px 14px 8px #00000008)
-      position: absolute
-      right: -24px
-      bottom: -82px
-      width: auto
-      z-index: 0
-      transition: cubic-bezier(.48, -.21, 0, 1.5) .3s
-
-      &:hover
-        bottom: -42px
-
-    .banner-button
-      height: 40px
-      width: 118px
-      border-radius: 20px
-      justify-content: center
-
-  > .card-widget:first-child
-    transition: .3s
-    border: none
-    box-shadow: none
-    background: var(--sco-main)
-    margin-top: 0
-
-  > .card-widget.card-info
-    background: var(--sco-card-bg)
-    box-shadow: var(--sco-shadow-black)
-    position: relative
-
-    &:before
-      background: linear-gradient(-25deg, var(--sco-main), var(--sco-main-op-deep), var(--sco-main), var(--sco-main-op-deep))
-      background-size: 400%
-      position: absolute
-      width: 100%
-      height: 100%
-      left: 0
-      top: 0
-      content: ''
-      animation: gradient 15s ease infinite
-
-    > div.card-content
-      padding: 1rem 1.2rem
-      min-height: 320px
-      position: relative
-
-    > div.card-info-avatarimg
-      overflow: hidden
-      background: var(--sco-yellow)
-      transition: 1.5s
-      min-height: 160px
-      position: relative
-      box-shadow: var(--sco-shadow-yellow)
-
-      &:hover img
-        transform: scale(1.03)
-
-    .banner-button-group
-      position: absolute
-      right: 1rem
-      bottom: 1rem
-      display: flex
-      -webkit-user-select: none
-
-      .banner-button
-        padding: 8px 12px
-        background: var(--sco-white-op)
-        border-radius: 12px
-        color: var(--sco-white)
-        display: flex
-        align-items: center
-        z-index: 1
-        transition: .3s
-        cursor: pointer
-
-        &:hover
-          background: var(--sco-white)
-          color: var(--sco-black)
-
-        i
-          margin-right: 8px
-          font-size: 22px
-
-  > div.card-widget.card-info > div > div.card-info-data > div:nth-child(0) > a > div.headline
-    font-weight: 700
-
-  .card-info #card-info-btn
-    display: none
-
-  .card-tag-cloud
-    a
-      color: var(--sco-fontcolor)
-      font-size: .8rem
-      border-radius: 8px
-
-      &:hover
-        background var(--sco-theme)
-        color var(--sco-white)!important
-        box-shadow var(--sco-shadow-theme)
-        cursor pointer
-        border-radius 5px
-
-      &.tags-cloud-more
-        width: 100%
-        text-align: center
-        border-radius: 8px !important
-        border: var(--style-border)
-        margin-top: 8px
-        font-size: 16px !important
-
-  .card-archives
-    ul.card-archive-list > .card-archive-list-item
-      a:hover
-        color: var(--sco-white)
-        background-color: var(--sco-theme)
-        box-shadow: var(--sco-shadow-theme)
-        border-radius: 8px
-        padding: .15rem .5rem
-        border: var(--style-border-hover)
-        cursor pointer
-
-  #card-toc .toc-content:before
-    display: none
-
-[data-theme=dark]
-  .toc
-    .toc-item.active .toc-link .toc-text
-      color: var(--sco-white)
-
-  .page
-    div#author-info__sayhi
-      background: #00000015
-      color: var(--sco-black)
-
-    #aside-content
-      .card-info
-        .card-info-social-icons
-          i:hover
-            background: var(--sco-card-bg)
-            color: var(--sco-fontcolor)
-
-  .page #aside-content .card-info .card-info-social-icons i:hover
-    background: var(--sco-card-bg)
-    color: var(--sco-fontcolor)
-
-div#author-info__sayhi
-  text-align: center
-  width: fit-content
-  color: var(--sco-white)
-  background: var(--sco-white-op)
-  font-size: 12px
-  padding: 2px 8px
-  border-radius: 12px
-  cursor: pointer
-  -webkit-user-select: none
-  transition: .3s
-  margin: auto
-  min-width: 100px
-
-  &:hover
-    background: var(--sco-card-bg)
-    color: var(--sco-fontcolor) !important
-    transform: scale(1.1)
-
-.author-info__desc
-  font-size: 12px
-  color: var(--sco-card-bg)
-  opacity: .6
-  line-height: 1.5
-  -webkit-line-clamp: 2
-  display: -webkit-box
-  overflow: hidden
-  -webkit-box-orient: vertical
-
-.avatar-img-group
-  width: 118px
-  height: 118px
-  right: calc(50% - 59px)
-  top: 90px
-  border-radius: 500px
-  position: absolute
-  transition: cubic-bezier(.69, .39, 0, 1.21) .3s
-  transform-origin: bottom
-  border: 5px solid var(--sco-card-bg)
-
-  #aside-content .card-info:hover &
-    opacity: 0
-    transform: scale(0)
-
-.avatar-sticker
-  position: absolute
-  bottom: 2px
-  right: 2px
-  width: 33px
-  height: 33px
-  line-height: 34px
-  z-index: 0
-  display: flex
-  align-items: center
-  justify-content: center
-  transition: .3s .2s
-  transform: scale(1)
-  background: var(--sco-white)
-  border-radius: 50%
-
-  svg
-    width: 26px
-    height: 26px
-
-  .card-widget:hover &
-    opacity: 0
-    transform: scale(0)
-
-#card-toc
-  padding: .5rem .5rem !important
-
-@media screen and (max-width: 900px)
-  #aside-content
-    .card-announcement
-      display: none
-
-    #card-funds
-      display: none
-
-@media screen and (min-width: 1300px)
-  #aside-content
-    .card-info
-      .card-info-social-icons i
-        color: var(--sco-white)
-        background: var(--sco-black-op)
-
-    [data-theme=dark] .card-info .card-info-social-icons i
-      color: var(--sco-card-bg)
-
-.author-info__description
-  line-height: 1.38
-  margin: .3rem 0
-  text-align: justify
-  color: rgba(255, 255, 255, .8)
-
-  b
-    color: var(--sco-white)
-
-.author-info__description_group
-  position: absolute
-  top: 50px
-  width: 100%
-  left: 0
-  padding: 1.2rem
-  opacity: 0
-  transition: .3s
-
-  .card-widget:hover &
-    opacity: 1
-
-.author-info__description2
-  line-height: 1.38
-  margin: .3rem 0
-  text-align: justify
-  width: 100%
-  z-index: 2
-  color: rgba(255, 255, 255, .8)
-
-  b
-    color: var(--sco-white)
-
-.author-info__bottom-group
-  display: flex
-  justify-content: space-between
-  position: absolute
-  padding: 1.2rem
-  width: 100%
-  left: 0
-  bottom: 0
-  align-items: center
-
-.card-widget
-  &:hover .avatar-sticker
-    opacity: 0
-    transform: scale(0)
-
-  &.card-info
-    padding: 0 !important
-
-  &.card-recent-post
-    padding: .4rem .6rem !important
-
-  &.card-info
-    .banner-button-group
-      .banner-button
-        i
-          margin-right: 8px
-          font-size: 22px
-
-.page
-  .sticky_layout
-    display: flex
-    -webkit-box-orient: vertical
-    flex-direction: column
-
-#card-info-btn
-  border-radius: 25px
-  overflow: hidden
-
-  &:before
-    border-radius: 25px
-
-.card-widget.card-recent-post
-  padding: .4rem .6rem !important
-
-#card-funds .funds-list::-webkit-scrollbar
-  display: none !important
-
-.announcement_content p
-  margin: .5rem 0 0 0
-  line-height: 1.38
-
-#aside-content
-  .item-headline
-    padding-bottom: 0
-    margin-left: 8px
-    font-size: 1em
-    font-weight: 700
-    display: flex
-    align-items: center
-
-    span
-      margin-left: 4px
-
-    + div, + ul
-      padding: 0
-      -webkit-user-select: none
-
-  .card-allinfo
-    .item-headline
-      display: none
-
-  .item-headline
-    i
-      min-width: 20px
-      font-size: 18px
-
-  > div.sticky_layout
-    > div.card-widget.card-archives
-      > div
-        > ul
-          > li.card-archive-list-item.more.is-center
-            margin-top: 8px
-            background: var(--sco-card-btn-bg)
-            border-radius: 8px
-            transition: .3s !important
-
-            &:hover
-              color: var(--sco-white)
-              background: var(--sco-blue)
-              border-radius: 8px
-              transition: .3s !important
-
-  .card-archives
-    ul.card-archive-list
-      > .card-archive-list-item.more span
-        transition: .3s !important
-
-      > .card-archive-list-item:hover.more span
-        transition: .3s !important
-
-  > div.sticky_layout
-    > div.card-widget.card-archives
-      > div
-        > ul
-          > li.card-archive-list-item.more.is-center :hover span
-            background: 0 0
-
-  .card-tag-cloud a
-    color: var(--sco-fontcolor)
-    font-size: .8rem
-    border-radius: 8px
-
-    &:hover
-      background var(--sco-theme)
-      color var(--sco-white)!important
-      box-shadow var(--sco-shadow-theme)
-      cursor pointer
-      border-radius 5px
-
-    &.tags-cloud-more
-      width: 100%
-      text-align: center
-      border-radius: 8px !important
-      border: var(--style-border)
-      margin-top: 8px
-      font-size: 16px !important
-
-  .card-archives
-    ul.card-archive-list
-      > .card-archive-list-item a:hover
-        color: var(--sco-white)
-        background-color: var(--sco-theme)
-        box-shadow: var(--sco-shadow-theme)
-        border-radius: 8px
-        padding: .15rem .5rem
-        border: var(--style-border-hover)
-        cursor pointer
-
-  #card-toc .toc-content:before
-    display: none
-
-  > div.sticky_layout
-    > div.card-widget.card-archives
-      > div
-        > ul
-          > li.card-archive-list-item.more.is-center
-            margin-top: 8px
-            background: var(--sco-card-btn-bg)
-            border-radius: 8px
-            transition: .3s !important
-
-            &:hover
-              color: var(--sco-white)
-              background: var(--sco-blue)
-              border-radius: 8px
-              transition: .3s !important
-
-  .card-archives
-    ul.card-archive-list
-      > .card-archive-list-item.more span
-        transition: .3s !important
-
-      > .card-archive-list-item:hover.more span
-        transition: .3s !important
-
-  > div.sticky_layout
-    > div.card-widget.card-archives
-      > div
-        > ul
-          > li.card-archive-list-item.more.is-center :hover span
-            background: 0 0
-
-  .card-tag-cloud a
-    color: var(--sco-fontcolor)
-    font-size: .8rem
-    border-radius: 8px
-
-    &:hover
-      background var(--sco-theme)
-      color var(--sco-white)!important
-      box-shadow var(--sco-shadow-theme)
-      cursor pointer
-      border-radius 5px
-
-    &.tags-cloud-more
-      width: 100%
-      text-align: center
-      border-radius: 8px !important
-      border: var(--style-border)
-      margin-top: 8px
-      font-size: 16px !important
-
-  .card-archives
-    ul.card-archive-list
-      > .card-archive-list-item a:hover
-        color: var(--sco-white)
-        background-color: var(--sco-theme)
-        box-shadow: var(--sco-shadow-theme)
-        border-radius: 8px
-        padding: .15rem .5rem
-        border: var(--style-border-hover)
-        cursor pointer
-
-  #card-toc .toc-content:before
-    display: none
-
-  > div.sticky_layout
-    > div.card-widget.card-archives
-      > div
-        > ul
-          > li.card-archive-list-item.more.is-center
-            margin-top: 8px
-            background: var(--sco-card-btn-bg)
-            border-radius: 8px
-            transition: .3s !important
-
-            &:hover
-              color: var(--sco-white)
-            background: var(--sco-blue)
-            border-radius: 8px
-            transition: .3s !important
-
-  .card-archives
-    ul.card-archive-list
-      > .card-archive-list-item.more span
-        transition: .3s !important
-
-      > .card-archive-list-item:hover.more span
-        transition: .3s !important
-
-  > div.sticky_layout
-    > div.card-widget.card-archives
-      > div
-        > ul
-          > li.card-archive-list-item.more.is-center :hover span
-            background: 0 0
-
-  .card-tag-cloud a
-    color: var(--sco-fontcolor)
-    font-size: .8rem
-    border-radius: 8px
-
-    &:hover
-      background var(--sco-theme)
-      color var(--sco-white)!important
-      box-shadow var(--sco-shadow-theme)
-      cursor pointer
-      border-radius 5px
-
-    &.tags-cloud-more
-      width: 100%
-      text-align: center
-      border-radius: 8px !important
-      border: var(--style-border)
-      margin-top: 8px
-      font-size: 16px !important
-
-  .card-archives
-    ul.card-archive-list
-      > .card-archive-list-item a:hover
-        color: var(--sco-white)
-        background-color: var(--sco-theme)
-        box-shadow: var(--sco-shadow-theme)
-        border-radius: 8px
-        padding: .15rem .5rem
-        border: var(--style-border-hover)
-        cursor pointer
-
-  #card-toc .toc-content:before
-    display: none
-
-if hexo-config('aside.tags.highlight')
-  for tag in highlightTags
-    tag = '"/tags/' + tag + '/"'
-    #aside-content .card-tag-cloud a[href*={tag}]
-      color var(--sco-lighttext)
-      font-weight 500
\ No newline at end of file
diff --git a/source/css/_layout/base.styl b/source/css/_layout/base.styl
index 3b791eb9..9c5c4a4a 100644
--- a/source/css/_layout/base.styl
+++ b/source/css/_layout/base.styl
@@ -246,11 +246,6 @@ img:not([src]), img[src=""]
   flex-direction row
   align-items center
 
-.card-info-avatar.is-center
-  flex-direction column
-  display flex
-  align-items flex-start
-
 .copy-true
   user-select all
 
diff --git a/source/css/_widgets/aside/allinfo.styl b/source/css/_widgets/aside/allinfo.styl
new file mode 100644
index 00000000..50489628
--- /dev/null
+++ b/source/css/_widgets/aside/allinfo.styl
@@ -0,0 +1,139 @@
+#aside-content
+  .card-webinfo
+    .webinfo
+      .webinfo-item-title
+        display flex
+
+        i
+          line-height: 2 !important
+          margin-right: 6px
+          width: 16px
+          text-align: center
+          font-size: 16px !important
+
+      .webinfo-item
+        display flex
+        justify-content space-between
+        white-space nowrap
+        -webkit-box-align center
+        align-items center
+        padding .1rem .5rem 0
+
+        div:first-child
+          -webkit-box-flex 1
+          flex 1 1 0
+          padding-right 1rem
+
+
+  .card-allinfo
+
+    hr
+      display flex
+      position relative
+      margin 1rem 0
+      border 1px dashed var(--sco-theme-op)
+
+    .item-headline
+      display none
+
+    .card-tag-cloud
+      a
+        display inline-block
+        padding 0 0.3rem
+        font-size .8rem
+        border-radius 8px
+
+        sup
+          opacity .6
+          margin-left 2px
+
+        &:hover
+          background var(--sco-theme)
+          color var(--sco-white) !important
+          box-shadow var(--sco-shadow-theme)
+          cursor pointer
+          border-radius 5px
+
+        &.tags-cloud-more
+          width 100%
+          text-align center
+          border-radius 8px !important
+          border var(--style-border)
+          margin-top 8px
+          font-size 16px !important
+
+  .card-archives
+    ul.card-archive-list
+      margin 0
+      padding 0
+      list-style none
+      display: flex
+      flex-direction: row
+      justify-content: space-between
+      flex-wrap: wrap
+
+      > .card-archive-list-item
+        width 100%
+        flex 0 0 48%
+
+        a
+          display inline-block
+          padding .15rem .5rem
+          width 100%
+          color var(--sco-fontcolor)
+          transition all .4s ease 0s
+          border-radius: 8px
+          margin: 4px 0
+          flex-direction: column
+          align-content: space-between
+          border: var(--style-border)
+
+          &:hover
+            background-color var(--sco-theme)
+            color var(--sco-card-bg)
+            border-radius 5px
+            box-shadow: var(--sco-shadow-theme)
+            padding: .15rem .5rem
+            border: var(--style-border-hover)
+            cursor pointer
+
+          span
+            display inline-block
+            vertical-align bottom
+
+            &:first-child
+              width 80%
+
+            &:last-child
+              width 20%
+              text-align right
+
+          .card-archive-list-count-group
+            display flex
+            flex-direction row
+            align-items baseline
+
+            span.card-archive-list-count
+            width auto
+            text-align left
+            font-size 1.1rem
+            line-height .9
+            font-weight 700
+
+            .card-archive-list-count-unit
+              width auto
+              text-align left
+              font-size 14px
+              font-weight 700
+
+          .card-archive-list-date
+            font-size 14px
+            opacity .6
+
+
+if hexo-config('aside.tags.highlight')
+  for tag in highlightTags
+    tag = '"/tags/' + tag + '/"'
+    #aside-content .card-tag-cloud a[href*={tag}]
+      color var(--sco-lighttext)
+      font-weight 500
\ No newline at end of file
diff --git a/source/css/_widgets/aside/history.styl b/source/css/_widgets/aside/history.styl
new file mode 100644
index 00000000..e182def9
--- /dev/null
+++ b/source/css/_widgets/aside/history.styl
@@ -0,0 +1,35 @@
+#aside-content
+  .card-history
+    .swiper-wrapper
+      flex-direction column
+
+    .history_slide
+      text-align left
+      display flex !important
+      flex-direction column
+      align-items flex-start
+
+    #history-baidu > .blog-slider__pagination
+      display none
+
+    .history_slide_time
+      color var(--sco-secondtext)
+      font-size 14px
+      font-style italic
+      font-weight lighter
+
+    .history_slide_link
+      line-height 1.5
+      -webkit-line-clamp 2
+      display -webkit-box
+      overflow hidden
+      -webkit-box-orient vertical
+
+      a
+        color var(--sco-main)
+        padding 0 4px
+        border-radius 4px
+
+        &:hover
+          color var(--sco-white)
+          background var(--sco-main)
\ No newline at end of file
diff --git a/source/css/_widgets/aside/index.styl b/source/css/_widgets/aside/index.styl
index c18d5a8a..90686056 100644
--- a/source/css/_widgets/aside/index.styl
+++ b/source/css/_widgets/aside/index.styl
@@ -1,6 +1,48 @@
 #aside-content
   width 300px
 
+  > .card-widget:first-child
+    transition: .3s
+    border: none
+    box-shadow: none
+    background: var(--sco-main)
+    margin-top: 0
+
+  .card-archives ul.card-archive-list > .card-archive-list-item a span,
+  .card-categories ul.card-category-list > .card-category-list-item a span,
+  .card-info .card-info-data > .card-info-data-item a .headline,
+  #pagination .next_info,
+  #pagination .prev_info,
+  #sidebar #sidebar-menus .menus_items .site-page,
+  #sidebar #sidebar-menus .site-data .data-item .data-item-link > a > div,
+  .flink#article-container .flink-list > .flink-list-item a .flink-item-desc,
+  .flink#article-container .flink-list > .flink-list-item a .flink-item-name,
+  .limit-one-line
+    text-overflow ellipsis
+    white-space nowrap
+
+  .aside-list > .aside-list-item .content > .comment,
+  .aside-list > .aside-list-item .content > .name,
+  .aside-list > .aside-list-item .content > .title,
+  #error-wrap .error-content .error-info .error_subtitle,
+  #post-info .post-title,
+  #recent-posts > .recent-post-item > .recent-post-info > .article-title,
+  #recent-posts > .recent-post-item > .recent-post-info > .content,
+  .article-sort-item-title,
+  .limit-more-line,
+  .relatedPosts > .relatedPosts-list .content .title,
+  figure.gallery-group .gallery-group-name,
+  figure.gallery-group p
+    display -webkit-box
+    -webkit-box-orient vertical
+
+  .author-info__description,
+  .author-info__name,
+  #site-name,
+  #site-subtitle,
+  #site-title
+    font-family "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
+
   +minWidth900()
     padding-left 15px
 
@@ -11,27 +53,41 @@
     padding-left 1rem
     animation slide-in .6s .3s backwards
 
+  .card-widget.card-power, .card-widget.card-history, .card-widget.card-welcome
+    padding: .4rem .6rem !important
+
+  .item-headline
+    padding-bottom
+    margin-left 8px
+    font-size 1rem
+    font-weight 700
+    display flex
+    align-items center
+
+    i
+      font-size 18px
+      max-width 20px
+
+    span
+      margin-left 4px
+
+    + div, + ul
+      padding 0
+      -webkit-user-select none
+
   .card-widget
     box-shadow var(--sco-shadow-border)
     background var(--sco-card-bg)
     border var(--style-border)
-    transition 0.3
+    transition 0.3s
     border-radius 12px
     position relative
     overflow hidden
     margin-top 1rem
     padding 1rem 1.2rem
 
-    &.card-info
-      padding 0 !important
-      background var(--sco-card-bg)
-      box-shadow var(--sco-shadow-black)
-      position relative
-
-      > div.card-content
-        padding 1rem 1.2rem
-        min-height 320px
-        position relative
+    &:hover
+      box-shadow var(--sco-shadow-border)
 
     > .card-widget
       &:first-child
@@ -39,22 +95,23 @@
         border none
         margin-top 0
 
-
   .sticky_layout
     top 80px
     transition top 0s
 
     +minWidth900()
       position sticky
+      top: 20px
+      transition: top .3s ease 0s
 
     +minWidth1300()
       top calc(60px + 1rem)
 
 .page
   .sticky_layout
-    display: flex
-    -webkit-box-orient: vertical
-    flex-direction: column
+    display flex
+    -webkit-box-orient vertical
+    flex-direction column
 
 
 #page-header.nav-visible + .layout > .aside-content > .sticky_layout
@@ -75,5 +132,14 @@
   html.hide-aside .layout > .aside-content
     display: none
 
-[data-theme=dark] #aside-content > .card-widget.card-info
-  border: var(--style-border-always)
\ No newline at end of file
+@import "toc.styl"
+
+@import "info.styl"
+
+@import "allinfo.styl"
+
+@import "welcome.styl"
+
+@import "history.styl"
+
+@import "power.styl"
\ No newline at end of file
diff --git a/source/css/_widgets/aside/info.styl b/source/css/_widgets/aside/info.styl
new file mode 100644
index 00000000..495d2b8e
--- /dev/null
+++ b/source/css/_widgets/aside/info.styl
@@ -0,0 +1,263 @@
+#aside-content
+  .card-widget
+    &:hover
+      .avatar-sticker
+        opacity: 0
+        transform: scale(0)
+
+    &.card-recent-post
+      padding: .4rem .6rem !important
+
+    &.card-info
+      padding 0 !important
+      box-shadow var(--sco-shadow-black)
+
+      > div.card-content
+        padding 1rem 1.2rem
+        min-height 320px
+        position relative
+
+  > .card-widget.card-info
+    &:before
+      background linear-gradient(-25deg, var(--sco-main), var(--sco-main-op-deep), var(--sco-main), var(--sco-main-op-deep))
+      background-size 400%
+      position absolute
+      width 100%
+      height 100%
+      left 0
+      top 0
+      content ''
+      animation gradient 15s ease infinite
+
+    > div.card-content
+      padding 1rem 1.2rem
+      min-height 320px
+      position relative
+
+    > div.card-info-avatarimg
+      overflow hidden
+      background var(--sco-yellow)
+      transition 1.5s
+      min-height 160px
+      position relative
+      box-shadow var(--sco-shadow-yellow)
+
+      &:hover img
+        transform: scale(1.03)
+
+  .card-info
+    .avatar-sticker
+      position absolute
+      bottom 2px
+      right 2px
+      width 33px
+      height 33px
+      line-height 34px
+      z-index 0
+      display flex
+      align-items center
+      justify-content center
+      transition .3s .2s
+      transform scale(1)
+      background var(--sco-white)
+      border-radius 50%
+
+      svg
+        width 26px
+        height 26px
+
+      ../:hover .avatar-sticker
+        opacity 0
+        transform scale(0)
+
+    .author-info__desc
+      font-size 12px
+      color var(--sco-card-bg)
+      opacity .6
+      line-height 1.5
+      -webkit-line-clamp 2
+      display -webkit-box
+      overflow hidden
+      -webkit-box-orient vertical
+
+    #author-info__sayhi
+      text-align center
+      width fit-content
+      color var(--sco-white)
+      background var(--sco-white-op)
+      font-size 12px
+      padding 2px 8px
+      border-radius 12px
+      cursor pointer
+      -webkit-user-select none
+      transition .3s
+      margin auto
+      min-width 100px
+
+      &:hover
+        background var(--sco-card-bg)
+        color var(--sco-fontcolor) !important
+        transform scale(1.1)
+
+    .card-info-avatar.is-center
+      flex-direction column
+      display flex
+      align-items flex-start
+
+    .avatar-img-group
+      width: 118px
+      height: 118px
+      right: calc(50% - 59px)
+      top: 90px
+      border-radius: 500px
+      position: absolute
+      transition: cubic-bezier(.69, .39, 0, 1.21) .3s
+      transform-origin: bottom
+      border: 5px solid var(--sco-card-bg)
+
+      ../:hover .avatar-img-group
+        opacity: 0
+        transform: scale(0)
+
+    .author-info__name
+      text-align left
+      font-weight 700
+      color var(--sco-card-bg)
+      font-size 20px
+      line-height 1
+      margin-bottom 5px
+
+    .author-info__top-group
+      display flex
+      height 28px
+      width 100%
+
+    .author-info__description_group
+      position: absolute
+      top: 50px
+      width: 100%
+      left: 0
+      padding: 1.2rem
+      opacity: 0
+      transition: .3s
+
+      ../:hover .author-info__description_group
+        opacity: 1
+
+      .author-info__description
+        line-height: 1.38
+        margin: .3rem 0
+        text-align: justify
+        color: rgba(255, 255, 255, .8)
+
+        b
+          color: var(--sco-white)
+
+      .author-info__description2
+        line-height: 1.38
+        margin: .3rem 0
+        text-align: justify
+        width: 100%
+        z-index: 2
+        color: rgba(255, 255, 255, .8)
+
+        b
+          color: var(--sco-white)
+
+    .author-info__bottom-group
+      display: flex
+      justify-content: space-between
+      position: absolute
+      padding: 1.2rem
+      width: 100%
+      left: 0
+      bottom: 0
+      align-items: center
+
+    .card-info-data
+      display table
+      margin .7rem 0 .2rem
+      width 100%
+      table-layout fixed
+
+      > div:nth-child(0) > a > div.headline
+        font-weight: 700
+
+      > .card-info-data-item
+        display table-cell
+        transition: .3s
+
+        a
+          .headline
+            color var(--sco-fontcolor)
+            font-size 1em
+
+          .length-num
+            margin-top -.3rem
+            color var(--text-highlight-color)
+            font-size 1.4em
+
+        &:hover
+          background #000
+          border-radius 5px
+
+    .card-info-social-icons
+      margin .3rem 0 -.3rem
+      display: flex
+      justify-content: flex-start
+      flex-direction: row
+      flex-wrap: nowrap
+      cursor: pointer
+
+      .social-icon
+        margin 0 .5rem
+        color var(--sco-fontcolor)
+        font-size 1.4em
+        cursor pointer
+        display flex
+
+      i
+        transition all .3s ease 0s
+        padding 8px
+        border-radius 32px
+        cursor: pointer
+        background: var(--sco-white-op)
+        color: var(--sco-white)
+        font-size: 1rem
+        width: 40px
+        height: 40px
+        display: flex
+        align-items: center
+        justify-content: center
+
+        +minWidth1300()
+          color var(--sco-white)
+          background var(--sco-black-op)
+
+        &:hover
+          background var(--sco-white)
+          transform scale(1.1)
+          color var(--sco-main)
+          box-shadow none
+
+    img.avatar-img
+      width 118px
+      right 0
+      top 0
+      border-radius 500px
+      position absolute
+      opacity 1
+      transition .3s
+
+[data-theme=dark] #aside-content
+  > .card-widget.card-info
+    border: var(--style-border-always)
+
+  .card-info
+    .card-info-social-icons
+      i
+        color: var(--sco-card-bg)
+
+        &:hover
+          background var(--sco-card-bg)
+          color var(--sco-fontcolor)
\ No newline at end of file
diff --git a/source/css/_widgets/aside/power.styl b/source/css/_widgets/aside/power.styl
new file mode 100644
index 00000000..4322b5de
--- /dev/null
+++ b/source/css/_widgets/aside/power.styl
@@ -0,0 +1,90 @@
+#aside-content
+  .card-power
+    .power-charge
+      margin-left auto
+      color var(--sco-secondtext)
+      font-size 14px
+      line-height 1
+
+      &:hover
+        color var(--sco-lighttext)
+
+    #power-star
+      display flex
+      padding 8px
+      border var(--style-border-always)
+      border-radius 8px
+      flex-direction row
+      flex-wrap nowrap
+      justify-content flex-start
+      position relative
+      margin 12px 0
+      background var(--sco-secondbg)
+      transition .3s ease-out
+      cursor pointer
+
+      &:hover
+        background var(--sco-main)
+        color var(--sco-white)
+        box-shadow var(--sco-shadow-theme)
+
+        #power-star-image
+          transform scale(.9)
+
+      #power-star-image
+        width 60px
+        height 60px
+        border-radius 60px
+        background-size cover
+        margin-right 12px
+        border var(--style-border-always)
+        transition .3s ease-out
+
+      #power-star-title
+        overflow hidden
+        text-overflow ellipsis
+        white-space nowrap
+        font-size 16px
+        font-weight 700
+        line-height 1
+        margin-bottom 8px
+
+      #power-star-desc
+        display -webkit-box
+        -webkit-box-orient vertical
+        -webkit-line-clamp 2
+        overflow hidden
+        font-size 12px
+        max-width 100%
+        line-height 1.2
+
+      .power-star-body
+        display flex
+        flex-direction column
+        align-items flex-start
+        flex-wrap wrap
+        position relative
+        width calc(100% - 68px)
+        justify-content center
+
+    .power-list
+      display flex
+      flex-direction row
+      flex-wrap wrap
+      margin 0 -4px
+
+      .power-item-body
+        display flex
+        flex-direction row
+        flex-wrap wrap
+
+      .power-item
+        .power-item-link
+          a
+            padding 2px 4px
+            border-radius 4px
+            margin-left 8px
+
+            &:hover
+              background var(--sco-main)
+              color var(--sco-white)
\ No newline at end of file
diff --git a/source/css/_widgets/aside/toc.styl b/source/css/_widgets/aside/toc.styl
index e69de29b..901ad1c2 100644
--- a/source/css/_widgets/aside/toc.styl
+++ b/source/css/_widgets/aside/toc.styl
@@ -0,0 +1,85 @@
+#aside-content
+  .card-toc
+    padding .5rem .5rem !important
+
+    &:hover
+      box-shadow var(--sco-shadow-border)
+
+    +minWidth900()
+      right 0 !important
+
+    .toc-content
+      overflow-y auto
+      max-height calc(100vh - 300px)
+
+      &::before
+        position absolute
+        top .6rem
+        right 1.2rem
+        color #a9a9a9
+        content attr(progress-percentage)
+        font-style italic
+        font-size 1.2rem
+
+      .toc-link.active
+        border-left-color #0061cc
+        background #0079ff
+        color #fff
+
+  #card-toc
+    +minWidth901()
+      right 0 !important
+
+    .toc-content
+      overflow-y: auto
+      max-height: calc(100vh - 300px)
+      ol
+        margin 0
+        padding 0
+
+        &ul
+          list-style: none
+
+      &:hover
+      .toc-content
+        .toc-link:not(.active) span
+          filter: blur(0)
+          opacity: 1
+
+      .toc-item.active .toc-link
+        opacity 1
+        border-radius 8px
+
+      .toc-link
+        line-height 24px
+        padding 8px
+        border-left 0 solid transparent
+        border-radius 12px
+        color var(--sco-secondtext)
+        cursor default
+        min-height 40px
+        display flex
+        align-items center
+        transition all .2s ease-in-out 0s
+
+        &.active
+          border-radius 12px
+          border-left-color var(--sco-hovertext)
+          background-color var(--sco-card-bg)
+          color var(--sco-lighttext)
+          font-weight 700
+          font-size 20px
+
+        &:not(.active) span
+          opacity .6
+          cursor pointer
+          filter blur(1px)
+          transition .3s
+
+          &:hover
+            color var(--sco-lighttext)
+
+[data-theme=dark]
+  .toc
+    .toc-item.active .toc-link .toc-text
+      color: var(--sco-white)
\ No newline at end of file
diff --git a/source/css/_widgets/aside/welcome.styl b/source/css/_widgets/aside/welcome.styl
new file mode 100644
index 00000000..fc1b1c34
--- /dev/null
+++ b/source/css/_widgets/aside/welcome.styl
@@ -0,0 +1,14 @@
+#aside-content
+  #welcome-info
+    overflow hidden
+    margin-top 4px
+
+    .welcome-time
+      width 100%
+      margin 12px 0 0
+      display inline-flex
+
+    .welcome-message
+      width 100%
+      margin-bottom 8px
+      display inline-flex
\ No newline at end of file
diff --git a/source/js/main.js b/source/js/main.js
index 225b6a73..90e0c610 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1020,8 +1020,8 @@ window.refreshFn = () => {
     GLOBAL_CONFIG.lazyload.enable && sco.lazyloadImg()
     GLOBAL_CONFIG.lightbox && sco.lightbox('')
     GLOBAL_CONFIG.randomlinks && randomLinksList()
+    GLOBAL_CONFIG.comment.enable && newestCommentInit()
     if (PAGE_CONFIG.comment) {
-        newestCommentInit()
         initComment()
     }
     PAGE_CONFIG.toc && toc.init()

From 31753d6954853519754584e8f4996ca12afed365 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Tue, 28 Nov 2023 16:09:45 +0800
Subject: [PATCH 41/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

拆解aside样式
---
 .../includes/widgets/aside/asideFlipCard.pug  | 66 ------------------
 .../widgets/aside/asideNewestPost.pug         |  3 +-
 source/css/_widgets/aside/flip.styl           | 68 +++++++++++++++++++
 source/css/_widgets/aside/index.styl          |  6 +-
 source/css/_widgets/aside/newPost.styl        | 52 ++++++++++++++
 5 files changed, 126 insertions(+), 69 deletions(-)
 create mode 100644 source/css/_widgets/aside/flip.styl
 create mode 100644 source/css/_widgets/aside/newPost.styl

diff --git a/layout/includes/widgets/aside/asideFlipCard.pug b/layout/includes/widgets/aside/asideFlipCard.pug
index 36615488..c9b92499 100644
--- a/layout/includes/widgets/aside/asideFlipCard.pug
+++ b/layout/includes/widgets/aside/asideFlipCard.pug
@@ -1,69 +1,3 @@
-style.
-    #aside-content .card-widget.card-platform {
-        background: var(--sco-main);
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        padding: 0;
-        cursor: pointer;
-        border: none;
-        height: 110px;
-        border: var(--style-border);
-        transition: 0.6s
-    }
-    #aside-content .card-widget.card-platform:before {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        background: url("#{theme.aside.flip.favicon || 'https://img.meuicat.com/blog/14.webp'}") center center no-repeat;
-        content: '';
-        background-size: cover;
-        transition: .2s cubic-bezier(.45,.04,.43,1.21)
-    }
-    #aside-content .card-widget.card-platform:hover:before {
-        top: 100%;
-        opacity: 0;
-        transition: .3s ease-out
-    }
-    #aside-content .card-widget #flip-wrapper {
-        perspective: 1000;
-        position: relative;
-        width: 235px;
-        height: 110px;
-        z-index: 1
-    }
-    #aside-content .card-platform #flip-wrapper:hover #flip-content {
-        transform: rotateY(180deg)
-    }
-    #aside-content .card-platform #flip-wrapper #flip-content {
-        width: 100%;
-        height: 100%;
-        transform-style: preserve-3d;
-        transition: cubic-bezier(0, 0, 0, 1.29) 0.3s
-    }
-    #aside-content .card-platform #flip-wrapper #flip-content .face {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        -webkit-backface-visibility: hidden;
-        backface-visibility: hidden;
-        background: url("#{theme.aside.flip.face || 'https://img.meuicat.com/blog/15.webp'}") center center no-repeat;
-        background-size: 100%
-    }
-    #aside-content .card-platform #flip-wrapper #flip-content .face.back {
-        display: block;
-        -webkit-transform: rotateY(180deg);
-        transform: rotateY(180deg);
-        box-sizing: border-box;
-        background: url("#{theme.aside.flip.backface || 'https://img.meuicat.com/blog/16.webp'}") center center no-repeat;
-        background-size: 100%
-    }
-    [data-theme='dark'] #aside-content .card-widget.card-platform {
-        background: var(--sco-card-bg)
-    }
-
 .card-widget.card-platform
     #flip-wrapper
         #flip-content
diff --git a/layout/includes/widgets/aside/asideNewestPost.pug b/layout/includes/widgets/aside/asideNewestPost.pug
index ed287219..2e9f2085 100644
--- a/layout/includes/widgets/aside/asideNewestPost.pug
+++ b/layout/includes/widgets/aside/asideNewestPost.pug
@@ -10,7 +10,6 @@
                     a.thumbnail(href=url_for(post.path) title=post.title)
                         img(alt=post.title src=post.cover)
                     .content
-                        each categories in post.categories.data
-                            a.article-recent_post_categories(href=url_for(post.path))= categories.name
                         a.title(href=url_for(post.path) title=post.title)= post.title
+                        a.article-recent_post_categories(href=url_for(post.path))= post.categories.data[0].name
                 - index++
\ No newline at end of file
diff --git a/source/css/_widgets/aside/flip.styl b/source/css/_widgets/aside/flip.styl
new file mode 100644
index 00000000..382b379d
--- /dev/null
+++ b/source/css/_widgets/aside/flip.styl
@@ -0,0 +1,68 @@
+favicon = hexo-config('aside.flip.favicon')
+face = hexo-config('aside.flip.face')
+faceback = hexo-config('aside.flip.backface')
+
+#aside-content
+  .card-widget.card-platform
+    background var(--sco-main)
+    display flex
+    justify-content center
+    align-content center
+    padding 0
+    cursor pointer
+    border none
+    height 110px
+    border var(--style-border)
+    transition 0.6s
+
+    &:before
+      position absolute
+      width 100%
+      height 100%
+      left 0
+      top 0
+      background url(favicon) center center no-repeat
+      content ''
+      background-size cover
+      transition .2s cubic-bezier(.45, .04, .43, 1.21)
+
+    &:hover:before
+      top 100%
+      opacity 0
+      transition .3s ease-out
+
+    #flip-wrapper
+      perspective 1000
+      position relative
+      width 235px
+      height 110px
+      z-index 1
+
+    #flip-wrapper:hover #flip-content
+      transform rotateY(180deg)
+
+    #flip-wrapper #flip-content
+      width 100%
+      height 100%
+      transform-style preserve-3d
+      transition cubic-bezier(0, 0, 0, 1.29) 0.3s
+
+    #flip-wrapper #flip-content .face
+      position absolute
+      width 100%
+      height 100%
+      -webkit-backface-visibility hidden
+      backface-visibility hidden
+      background url(face) center center no-repeat
+      background-size 100%
+
+    #flip-wrapper #flip-content .face.back
+      display block
+      -webkit-transform rotateY(180deg)
+      transform rotateY(180deg)
+      box-sizing border-box
+      background url(faceback) center center no-repeat
+      background-size 100%
+
+    [data-theme='dark'] #aside-content .card-widget.card-platform
+      background var(--sco-card-bg)
\ No newline at end of file
diff --git a/source/css/_widgets/aside/index.styl b/source/css/_widgets/aside/index.styl
index 90686056..268e40c9 100644
--- a/source/css/_widgets/aside/index.styl
+++ b/source/css/_widgets/aside/index.styl
@@ -142,4 +142,8 @@
 
 @import "history.styl"
 
-@import "power.styl"
\ No newline at end of file
+@import "power.styl"
+
+@import "newPost.styl"
+
+@import "flip.styl"
\ No newline at end of file
diff --git a/source/css/_widgets/aside/newPost.styl b/source/css/_widgets/aside/newPost.styl
new file mode 100644
index 00000000..09de6c73
--- /dev/null
+++ b/source/css/_widgets/aside/newPost.styl
@@ -0,0 +1,52 @@
+#aside-content
+  .card-recent-post
+    .aside-list
+      .aside-list-item
+        padding 2px 6px 8px 6px
+        border-radius 12px
+        transition .3s
+        margin 4px 0
+        cursor pointer
+        display flex
+        align-items flex-start
+
+        &:hover
+          background var(--sco-main)
+          color var(--sco-white)
+          transition .3s
+          box-shadow var(--sco-shadow-main)
+
+        .thumbnail
+          -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
+          border-radius 8px
+          border var(--style-border)
+          display flex
+          align-items center
+          overflow hidden
+          width 2.1em
+          height 2.1em
+          margin-top 4px
+
+          img
+            width 140%
+            height 140%
+            transition all .6s ease 0s
+            object-fit cover
+
+        .content
+          -webkit-box-flex 1
+          flex 1 1 0
+          padding-left 10px
+          word-break break-all
+          display flex
+          flex-direction column
+
+          .title
+            font-weight 700
+            padding 2px 0
+            margin-bottom 8px
+            color var(--sco-fontcolor)
+            font-size 95%
+            line-height 1.3
+            -webkit-line-clamp 2
+            overflow hidden
\ No newline at end of file

From a4fbf42d4d488caade4893bf99f7456f250e7330 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Tue, 28 Nov 2023 17:31:01 +0800
Subject: [PATCH 42/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复ai 异常
---
 layout/post.pug | 78 +++++++++++++++++++++++++------------------------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/layout/post.pug b/layout/post.pug
index f4a0326c..4f64bd1a 100644
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -1,41 +1,43 @@
 extends includes/layout.pug
 
 block content
-  main.layout#content-inner
-    #post
-      article.post-content#article-container!= page.content
-      include includes/widgets/post/copyright
-      .post-tools-right
-        .tag_share
-          .post-meta__tag-list
-            each data in page.tags.data
-              a(href=url_for(data.path)).post-meta__tags
-                span.tags-punctuation
-                | #{data.name}
-                span.tagsPageCount #{data.length}
-      if site.posts.length > 1
-        include includes/widgets/post/postNav
-      != related_posts(page, site.posts)
-      if page.comment
-        include includes/widgets/third-party/comments/comment
-    include includes/widgets/aside/aside
-    if theme.thirdparty.ai.enable
-      script(data-pjax, defer).
-        new ChucklePostAI({
-          el: '#post #article-container',
-          key: '#{theme.thirdparty.ai.key}',
-          title_el: '.post-title',
-          rec_method: '#{theme.thirdparty.ai.rec_method || 'web'}',
-          interface: {
-            name: "#{theme.thirdparty.ai.ai_name || 'Solitude-AI'}",
-            introduce: "#{theme.thirdparty.ai.ai_introduce || '我是文章辅助AI生成工具: Solitude-AI。你可以点击下方的按钮，让我生成本文简介、推荐相关文章等。'}",
-            version: "#{theme.thirdparty.ai.ai_tips || 'GPT-4'}",
-          },
-          #{theme.thirdparty.ai.hide_shuttle ? 'hide_shuttle: true,' : ''},
-          #{theme.thirdparty.ai.typewriter === false ? 'typewriter: false,' : ''},
-          #{theme.thirdparty.ai.speed !== 20 ? `speed: ${theme.thirdparty.ai.speed},` : ''},
-          #{theme.thirdparty.ai.BlackWhite_List.mode === 'black' ? `eliminate: [${theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', ')}],` : ''},
-          #{theme.thirdparty.ai.BlackWhite_List.mode === 'white' ? `whitelist: [${theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', ')}],` : ''},
-          #{page.ai_total_length ? `total_length: ${page.total_length},` : ''},
-          #{page.ai_ratio_string ? `ratio_string: "${page.ratio_string}",` : ''}
-        })
\ No newline at end of file
+    main.layout#content-inner
+        #post
+            article.post-content#article-container!= page.content
+            include includes/widgets/post/copyright
+            .post-tools-right
+                .tag_share
+                    .post-meta__tag-list
+                        each data in page.tags.data
+                            a(href=url_for(data.path)).post-meta__tags
+                                span.tags-punctuation
+                                | #{data.name}
+                                span.tagsPageCount #{data.length}
+            if site.posts.length > 1
+                include includes/widgets/post/postNav
+            != related_posts(page, site.posts)
+            if page.comment
+                include includes/widgets/third-party/comments/comment
+        include includes/widgets/aside/aside
+        if theme.thirdparty.ai.enable
+            - var ai_black_list = theme.thirdparty.ai.BlackWhite_List.mode === 'black' ? theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', '): ''
+            - var ai_white_list = theme.thirdparty.ai.BlackWhite_List.mode === 'white' ? theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', '): ''
+            script(data-pjax, defer).
+                new ChucklePostAI({
+                    el: '#post #article-container',
+                    key: '#{theme.thirdparty.ai.key}',
+                    title_el: '.post-title',
+                    rec_method: '#{theme.thirdparty.ai.rec_method || 'web'}',
+                    interface: {
+                        name: "#{theme.thirdparty.ai.ai_name || 'Solitude-AI'}",
+                        introduce: "#{theme.thirdparty.ai.ai_introduce || '我是文章辅助AI生成工具: Solitude-AI。你可以点击下方的按钮，让我生成本文简介、推荐相关文章等。'}",
+                        version: "#{theme.thirdparty.ai.ai_tips || 'GPT-4'}",
+                    },
+                    hide_shuttle: !{!!theme.thirdparty.ai.hide_shuttle},
+                    typewriter: !{!!theme.thirdparty.ai.typewriter},
+                    speed: !{!!theme.thirdparty.ai.speed},
+                    eliminate: [!{ai_black_list}],
+                    whitelist: [!{ai_white_list}],
+                    total_length: !{page.ai_total_length ? page.ai_total_length : 0},
+                    ratio_string: !{page.ai_ratio_string ? page.ai_ratio_string : 0},
+                })
\ No newline at end of file

From 67360032a1c9577b5dc32f332b9af7b5537a5061 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Wed, 29 Nov 2023 18:00:04 +0800
Subject: [PATCH 43/43] Bug Repair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

最终完善
---
 _config.yml                                   |  57 ++--
 languages/en-US.yml                           |   1 +
 languages/zh-CN.yml                           |   1 +
 layout/includes/head.pug                      |  10 +-
 layout/includes/head/config.pug               |   2 -
 layout/includes/inject/body.pug               |   3 +-
 layout/includes/page/about.pug                |   2 +-
 layout/includes/page/categories.pug           |   2 +-
 layout/includes/page/not_configured.pug       |   0
 layout/includes/page/says.pug                 |   4 +-
 layout/includes/page/tags.pug                 |   2 +-
 .../widgets/aside/asideNewestPost.pug         |   3 +-
 layout/includes/widgets/aside/asidePower.pug  |   2 +-
 layout/includes/widgets/home/categoryBar.pug  |   2 +-
 layout/includes/widgets/post/copyright.pug    |  23 +-
 layout/includes/widgets/post/postMeta.pug     |  13 +-
 layout/post.pug                               |  10 +-
 layout/tag.pug                                |   2 +-
 package.json                                  |   2 +-
 scripts/event/page.js                         |  10 +-
 scripts/helper/load_stylus_config.js          |   9 -
 scripts/helper/stylus.js                      |  23 ++
 source/css/_global/var.styl                   |   1 +
 source/css/_layout/footer.styl                |  22 +-
 source/css/_page/about.styl                   |  59 +---
 source/css/_page/home.styl                    |  58 ++++
 source/css/_page/homeTop.styl                 |   3 +
 source/css/_page/index.styl                   |  81 ++----
 source/css/_page/link.styl                    |   1 +
 source/css/_page/tag.styl                     |   1 +
 source/css/_post/index.styl                   |   9 +-
 source/css/_post/postContent.styl             |  54 +++-
 source/css/_search/algolia-search.styl        |   4 +-
 source/css/_search/local-search.styl          |   2 +-
 source/css/_widgets/aside/allinfo.styl        |  15 +-
 source/css/_widgets/aside/index.styl          |  21 +-
 source/css/_widgets/aside/newPost.styl        |   3 +
 source/css/index.styl                         |   2 +-
 source/js/main.js                             | 253 ++++++++----------
 39 files changed, 407 insertions(+), 365 deletions(-)
 delete mode 100644 layout/includes/page/not_configured.pug
 delete mode 100644 scripts/helper/load_stylus_config.js
 create mode 100644 scripts/helper/stylus.js
 create mode 100644 source/css/_global/var.styl
 create mode 100644 source/css/_page/home.styl

diff --git a/_config.yml b/_config.yml
index 71f47138..69817af4 100644
--- a/_config.yml
+++ b/_config.yml
@@ -21,18 +21,18 @@ nav:
 
   # 导航栏内容
   menu:
-#      文库:
-#        url: false
-#        child:
-#          文章列表:
-#            url: /archives/
-#            icon: scoicon sco-folder-fill
-#          全部分类:
-#            url: /categories/
-#            icon: scoicon sco-checkbox-multiple-blank-fill
-#          全部标签:
-#            url: /tags/
-#            icon: scoicon sco-price-tag-fill
+      文库:
+        url: false
+        child:
+          文章列表:
+            url: /archives/
+            icon: scoicon sco-folder-fill
+          全部分类:
+            url: /categories/
+            icon: scoicon sco-checkbox-multiple-blank-fill
+          全部标签:
+            url: /tags/
+            icon: scoicon sco-price-tag-fill
 #      友链:
 #        url: false
 #        child:
@@ -197,12 +197,12 @@ aside:
 
   # 建站信息
   siteinfo:
-    postcount: false # 文章数
-    wordcount: false # 总字数
-    pv: false # 访问量
-    uv: false # 访客数
-    updatetime: false # 最后更新日期
-    runtimeenable: false # 建站时间
+    postcount: true # 文章数
+    wordcount: true # 总字数
+    pv: true # 访问量
+    uv: true # 访客数
+    updatetime: true # 最后更新日期
+    runtimeenable: true # 建站时间
     runtime: '2023-04-20 00:00:00' # 格式：yyyy-MM-dd hh-mm-ss
 
 # Footer Settings
@@ -266,7 +266,10 @@ post:
   default:
     cover: /img/default.png
     locate: 衡阳
-    copyright: 原创
+    copyright:
+      enable: true
+      license: CC BY-NC-SA 4.0
+      licenurl: https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh
   # 顶部文章简介
   meta:
     date: false # 发布日期
@@ -286,6 +289,8 @@ post:
   covercolor: #文章cover取色
     enable: false # 是否开启
     local: true # 本地取色
+  # 底部头像背景
+  author_back: https://bu.dusays.com/2023/11/01/6541f6d4b2573.png
 
 # 关于界面
 about:
@@ -296,6 +301,14 @@ about:
     tagLength: 10 # 标签显示数量
     categoryParent: true # 显示父分类
 
+# 即刻说说界面
+# 前置要求：需配置即刻说说页面
+# 开启后将显示即刻页面
+says:
+  enable: false
+  home_mini: false # 主页的即刻轮播条
+  style: 1 # 1：张洪heo样式 / 2：Leonus样式
+
 # 404 页面
 errorpage:
   img: https://npm.elemecdn.com/wzheo-absolute@1.0.3/image/source/404.png # 图片
@@ -455,16 +468,10 @@ pwa:
   favicon_640_1136: /img/pwa/siteicon/splash-640x1136.png # 640x1136图标
   favicon_1136_640: /img/pwa/siteicon/splash-1136x640.png # 1136x640图标
 
-says:
-  enable: false
-  home_mini: false # 主页的即刻轮播条
-  style: 1 # 1：张洪heo样式 / 2：Leonus样式
-
 # CSS 前缀
 # 有些 CSS 并不是所有浏览器都支持，需要增加对应的前缀才会生效
 # 开启 css_prefix 后，会自动为一些 CSS 增加前缀。（会增加 20%的体积）
 # --------------------------------------
-
 css_prefix: false
 
 # 非必要勿动
diff --git a/languages/en-US.yml b/languages/en-US.yml
index f502d737..94d0757c 100755
--- a/languages/en-US.yml
+++ b/languages/en-US.yml
@@ -25,6 +25,7 @@ page:
   tag: Tags
   category: Categories
   archives: Archives
+  echarts: Echarts
 
 nav:
   backtop: Back to top
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index ab171ca1..2582528b 100755
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -24,6 +24,7 @@ page:
   tag: 标签
   category: 分类
   archives: 文章
+  echarts: 博客统计
 
 nav:
   backtop: 返回顶部
diff --git a/layout/includes/head.pug b/layout/includes/head.pug
index 50edc565..202944c3 100644
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -1,9 +1,9 @@
-- let title = '', subtitle =''
+- let title = page.title, subtitle =''
 - if (is_home()) title = config.title
-- else if (is_archive()) title = '归档 ' + (page.year || "")
-- else if (is_tag()) title = '标签 ' + page.tag
-- else if (is_category()) title = '分类 ' + page.category
-- else if (page.type === '404') title = '404' + theme.errorpage.text
+- else if (is_archive()) title = _p('page.archives') + (page.year || "")
+- else if (is_tag()) title = _p('page.tag')+': '  + page.tag
+- else if (is_category()) title = _p('page.category') +': ' + page.category
+- else if (page.type === '404') title = '404'+': '  + theme.errorpage.text
 - else if (is_post() || is_page()) title = page.title
 
 - if (is_home()) subtitle = config.subtitle ? ' - ' + config.subtitle : ''
diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
index 216f3adb..a6c342fe 100644
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -67,13 +67,11 @@ script.
         covercolor: !{theme.post.covercolor.enable},
         comment: {
             enable: !{theme.comment.enable},
-            twikooUrl: '!{theme.comment.twikoo.envId}',
             type: '!{theme.comment.type}',
             twikoo: {
                 url: '!{theme.comment.twikoo.envId}',
                 accessToken: '!{theme.comment.twikoo.accessToken}'
             },
-            twikooAccessToken: '!{theme.comment.twikoo.accessToken}'
         },
         rightside: {
             enable: !{theme.rightside.enable}
diff --git a/layout/includes/inject/body.pug b/layout/includes/inject/body.pug
index fbece51d..4a1c4b2d 100644
--- a/layout/includes/inject/body.pug
+++ b/layout/includes/inject/body.pug
@@ -43,7 +43,8 @@ if theme.thirdparty.aplayer.enable
 if theme.post.covercolor
     script(src='/js/extend/covercolor/local.js')
 
-include ../widgets/randomlink.pug
+if theme.footer.randomlink
+    include ../widgets/randomlink.pug
 
 if page.katex
     link(rel="stylesheet", href=url_for(cdn.katexcss))
diff --git a/layout/includes/page/about.pug b/layout/includes/page/about.pug
index 5280f16a..a54c6957 100644
--- a/layout/includes/page/about.pug
+++ b/layout/includes/page/about.pug
@@ -1,4 +1,4 @@
-if theme.about.enable
+if theme.about.enable && site.data.about
     #about-page
         include ../widgets/page/about/authorinfo
         include ../widgets/page/about/contentinfo
diff --git a/layout/includes/page/categories.pug b/layout/includes/page/categories.pug
index 62002f0d..18ad5d7a 100644
--- a/layout/includes/page/categories.pug
+++ b/layout/includes/page/categories.pug
@@ -1,7 +1,7 @@
 h1.page-title(style='display: inline')= _p('page.category')
 div.category-lists
     div.tag-cloud-list.is-center
-        each item in site.categories.data
+        each item in site.categories.find({ parent: { $exists: false } }).data
             a(href=url_for(item.path))
                 span.tags-punctuation
                 = item.name
diff --git a/layout/includes/page/not_configured.pug b/layout/includes/page/not_configured.pug
deleted file mode 100644
index e69de29b..00000000
diff --git a/layout/includes/page/says.pug b/layout/includes/page/says.pug
index d480403d..b188e328 100644
--- a/layout/includes/page/says.pug
+++ b/layout/includes/page/says.pug
@@ -1,6 +1,4 @@
-if theme.says.enable === false
-    include not_configured
-else
+if theme.says.enable
     - var pageClass = "essayPage"
     include ../widgets/page/banner
     #bber
diff --git a/layout/includes/page/tags.pug b/layout/includes/page/tags.pug
index f3a5ef03..d149203d 100644
--- a/layout/includes/page/tags.pug
+++ b/layout/includes/page/tags.pug
@@ -1,7 +1,7 @@
 h1.page-title(style='display: inline-block')= __('page.tag')
 div.category-lists
     div.tag-cloud-list.is-center
-        each tag in site.tags.data
+        each tag in site.tags.find({ parent: { $exists: false } }).data
             a(href=url_for(tag.path))
                 span.tags-punctuation
                 = tag.name
diff --git a/layout/includes/widgets/aside/asideNewestPost.pug b/layout/includes/widgets/aside/asideNewestPost.pug
index 2e9f2085..3a84b25d 100644
--- a/layout/includes/widgets/aside/asideNewestPost.pug
+++ b/layout/includes/widgets/aside/asideNewestPost.pug
@@ -11,5 +11,6 @@
                         img(alt=post.title src=post.cover)
                     .content
                         a.title(href=url_for(post.path) title=post.title)= post.title
-                        a.article-recent_post_categories(href=url_for(post.path))= post.categories.data[0].name
+                        if post.categories.data[0]
+                            a.article-recent_post_categories(href=url_for(post.path))= post.categories.data[0].name
                 - index++
\ No newline at end of file
diff --git a/layout/includes/widgets/aside/asidePower.pug b/layout/includes/widgets/aside/asidePower.pug
index 69640bb2..0c5d89ed 100644
--- a/layout/includes/widgets/aside/asidePower.pug
+++ b/layout/includes/widgets/aside/asidePower.pug
@@ -5,7 +5,7 @@
         i.scoicon.sco-afdian-line
         span 爱发电赞助
         a.power-charge(href=theme.aside.power.link, rel="external nofollow", target="_blank", title="赞助博主") 赞助
-    a#power-star(data-pjax-state="", href=vip.url)
+    a#power-star(data-pjax-state="", href=vip.link)
         #power-star-image(style=`background-image: url('${vip.avatar}');`)
         .power-star-body
             #power-star-title= vip.name
diff --git a/layout/includes/widgets/home/categoryBar.pug b/layout/includes/widgets/home/categoryBar.pug
index ab618307..3ba6f460 100644
--- a/layout/includes/widgets/home/categoryBar.pug
+++ b/layout/includes/widgets/home/categoryBar.pug
@@ -1,7 +1,7 @@
 .category-bar-items#category-bar-items
     .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home")
         a(href="/") 首页
-    each item in site.categories.data
+    each item in site.tags.find({ parent: { $exists: false } }).data
         .category-bar-item(class=select ? (select === item.name ? 'select' : '') : '', id=item.name)
             a(href=url_for(item.path))= item.name
 if site.categories.length > 10
diff --git a/layout/includes/widgets/post/copyright.pug b/layout/includes/widgets/post/copyright.pug
index 8fbc5946..8e262cb0 100644
--- a/layout/includes/widgets/post/copyright.pug
+++ b/layout/includes/widgets/post/copyright.pug
@@ -1,7 +1,7 @@
 div.post-copyright
     div.post-copyright__author_group
         a.post-copyright__author_img(href="/about/", data-pjax-state="")
-            img.post-copyright__author_img_back(src="https://bu.dusays.com/2023/11/01/6541f6d4b2573.png")
+            img.post-copyright__author_img_back(src=theme.post.author_back)
             img.post-copyright__author_img_front(src=theme.site.icon)
         div.post-copyright__author_name= config.title
         div.post-copyright__author_desc= config.subtitle
@@ -14,13 +14,14 @@ div.post-copyright
                     a.reward-link-button(href=theme.footer.rss.url)
                         i.scoicon.sco-plant-fill
                         | 订阅
-    div.post-copyright__notice
-        span.post-copyright-info
-            | 本文是#{page.cc || theme.post.default.copyright}文章，
-            if page.cc === "转载或翻译"
-                | 版权归原作者所有。转载本文请联系原作者。
-            else
-                | 采用
-                a(href="/copyright/", target="_blank") CC BY-NC-ND 4.0
-                | 协议，完整转载请注明来自
-                a(href="/", target="_blank") #{config.title}
\ No newline at end of file
+    if theme.post.default.copyright.enable || page.copyright
+        div.post-copyright__notice
+            span.post-copyright-info
+                if page.reprint
+                    | 本文是转载或翻译文章，版权归原作者所有。转载本文请联系原作者。
+                else
+                    | 本文是原创文章，采用
+                    a(href=url_for(theme.post.default.copyright.licenurl), target="_blank")
+                        | #{theme.post.default.copyright.license}
+                    | 协议，完整转载请注明来自
+                    a(href="/", target="_blank") #{config.title}
\ No newline at end of file
diff --git a/layout/includes/widgets/post/postMeta.pug b/layout/includes/widgets/post/postMeta.pug
index 02a0221a..90e9fafc 100644
--- a/layout/includes/widgets/post/postMeta.pug
+++ b/layout/includes/widgets/post/postMeta.pug
@@ -3,7 +3,8 @@ div.coverdiv#coverdiv
 div#post-info
     div#post-firstinfo
         div.meta-firstline
-            a.post-meta-original(title="该文章为"+page.cc+"文章，注意版权协议")= page.cc
+            - var cc = reprint ? '转载或翻译' : '原创'
+            a.post-meta-original(title="该文章为" + cc + "文章，注意版权协议")= cc
             if page.categories.data.length > 0
                 span.post-meta-categories
                     a.post-meta-categories(href=page.categories.data[0].path)= page.categories.data[0].name
@@ -33,7 +34,7 @@ div#post-info
                         i.post-meta-icon.scoicon.sco-clock-fill(title="阅读耗时")
                         span= min2read(page.content) + " min"
             if theme.post.meta.locate
-                span.post-meta-position(title="作者IP归属地为"+page.locate)
+                span.post-meta-position(title="作者IP归属地为" + page.locate)
                     i.post-meta-icon.scoicon.sco-map-pin-fill
                     span= page.locate
             if theme.thirdparty.busuanzi.enable && theme.post.meta.pv
@@ -47,8 +48,8 @@ div#post-info
                             i.scoicon.sco-loading-line
             if theme.post.meta.comment && page.comment
                 span.post-meta-commentcount(title="评论数", onclick="sco.scrollTo('post-comment')")
-                  i.scoicon.sco-chat-fill
-                  a(href=url_for(page.path) + "#post-comment")
-                    span#twikoo-count
-                      i.scoicon.sco-loading-line
+                    i.scoicon.sco-chat-fill
+                    a(href=url_for(page.path) + "#post-comment")
+                        span#twikoo-count
+                            i.scoicon.sco-loading-line
 include ./wave
\ No newline at end of file
diff --git a/layout/post.pug b/layout/post.pug
index 4f64bd1a..cbc246d5 100644
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -20,8 +20,8 @@ block content
                 include includes/widgets/third-party/comments/comment
         include includes/widgets/aside/aside
         if theme.thirdparty.ai.enable
-            - var ai_black_list = theme.thirdparty.ai.BlackWhite_List.mode === 'black' ? theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', '): ''
-            - var ai_white_list = theme.thirdparty.ai.BlackWhite_List.mode === 'white' ? theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', '): ''
+            -  let ai_black_list = theme.thirdparty.ai.BlackWhite_List.mode === 'black' ? theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', ') : '';
+            -  let ai_white_list = theme.thirdparty.ai.BlackWhite_List.mode === 'white' ? theme.thirdparty.ai.BlackWhite_List.List.map(item => `'${item}'`).join(', ') : '';
             script(data-pjax, defer).
                 new ChucklePostAI({
                     el: '#post #article-container',
@@ -29,9 +29,9 @@ block content
                     title_el: '.post-title',
                     rec_method: '#{theme.thirdparty.ai.rec_method || 'web'}',
                     interface: {
-                        name: "#{theme.thirdparty.ai.ai_name || 'Solitude-AI'}",
-                        introduce: "#{theme.thirdparty.ai.ai_introduce || '我是文章辅助AI生成工具: Solitude-AI。你可以点击下方的按钮，让我生成本文简介、推荐相关文章等。'}",
-                        version: "#{theme.thirdparty.ai.ai_tips || 'GPT-4'}",
+                        name: "#{theme.thirdparty.ai.ai_name || 'Solitude AI'}",
+                        introduce: "#{theme.thirdparty.ai.ai_introduce || '我是文章辅助AI生成工具: Solitude AI。你可以点击下方的按钮，让我生成本文简介、推荐相关文章等。'}",
+                        version: "#{theme.thirdparty.ai.ai_tips || 'GPT 4'}",
                     },
                     hide_shuttle: !{!!theme.thirdparty.ai.hide_shuttle},
                     typewriter: !{!!theme.thirdparty.ai.typewriter},
diff --git a/layout/tag.pug b/layout/tag.pug
index adcba9cb..6c718053 100644
--- a/layout/tag.pug
+++ b/layout/tag.pug
@@ -4,7 +4,7 @@ block content
   main.layout#content-inner
     div#tag
       div#tag-page-tags
-        each tag in site.tags.data
+        each tag in site.tags.find({ parent: { $exists: false } }).data
           a(id=tag.name class=(tag.name === page.tag ? 'select' : '') href=url_for(tag.path))
             span.tags-punctuation
             | #{tag.name}
diff --git a/package.json b/package.json
index 444035e9..8eff04ca 100755
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "theme",
     "hexo-theme-solitude"
   ],
-  "author": "Hexo-Theme-Solitude<admin@wzsco.top>",
+  "author": "Hexo-Theme-Solitude<wzsco@qq.com>",
   "license": "GNU",
   "bugs": {
     "url": "https://github.com/DuoSco/Hexo-theme-solitude/issues"
diff --git a/scripts/event/page.js b/scripts/event/page.js
index cb8f5c96..04acfa7c 100644
--- a/scripts/event/page.js
+++ b/scripts/event/page.js
@@ -1,3 +1,4 @@
+
 hexo.extend.generator.register('404', function (locals) {
   if(!this.theme.config.page.error)return
   return {
@@ -14,11 +15,12 @@ hexo.extend.generator.register('404', function (locals) {
 // generate tags Page
 hexo.extend.generator.register('tags', function(locals) {
   if(!this.theme.config.page.tags)return
+  const lang = hexo.theme.i18n.get(this.config.language || 'zh-CN')
   return {
     path: 'tags/index.html',
     layout: ['page'],
     data: {
-      title: 'tags',
+      title: lang["page.tag"],
       type: 'tags',
       comment: false
     }
@@ -28,11 +30,12 @@ hexo.extend.generator.register('tags', function(locals) {
 // generate categories Page
 hexo.extend.generator.register('categories', function(locals) {
   if(!this.theme.config.page.categories)return
+  const lang = hexo.theme.i18n.get(this.config.language || 'zh-CN')
   return {
     path: 'categories/index.html',
     layout: ['page'],
     data: {
-      title: 'categories',
+      title: lang["page.category"],
       type: 'categories',
       comment: false
     }
@@ -42,11 +45,12 @@ hexo.extend.generator.register('categories', function(locals) {
 // generate echarts Page
 hexo.extend.generator.register('echarts', function(locals) {
   if(!this.theme.config.about.echarts && !this.theme.config.about.enable)return
+  const lang = hexo.theme.i18n.get(this.config.language || 'zh-CN')
   return {
     path: 'echart/index.html',
     layout: ['page'],
     data: {
-      title: '博客统计',
+      title: lang["page.echarts"],
       type: 'echarts',
       comment: false
     }
diff --git a/scripts/helper/load_stylus_config.js b/scripts/helper/load_stylus_config.js
deleted file mode 100644
index 85a8f6c5..00000000
--- a/scripts/helper/load_stylus_config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-hexo.extend.filter.register('stylus:renderer', function (style) {
-    const {config, theme} = this
-
-    // 侧边栏标签高亮
-    if (theme.config.aside.tags.highlight) {
-        let array = theme.config.aside.tags.list.map(item => encodeURIComponent(item));
-        style.define('highlightTags',array);
-    }
-});
\ No newline at end of file
diff --git a/scripts/helper/stylus.js b/scripts/helper/stylus.js
new file mode 100644
index 00000000..1f48cbb9
--- /dev/null
+++ b/scripts/helper/stylus.js
@@ -0,0 +1,23 @@
+hexo.extend.filter.register('stylus:renderer', function (style) {
+    const {config, theme} = this
+
+    // 侧边栏标签高亮
+    if (theme.config.aside.tags.highlight) {
+        let array = theme.config.aside.tags.list.map(item => encodeURIComponent(item));
+        style.define('highlightTags', array);
+    }
+
+    // 侧边栏加载样式控制
+    let aside = [
+        theme.config.aside.home.noSticky,
+        theme.config.aside.home.Sticky,
+        theme.config.aside.post.noSticky,
+        theme.config.aside.post.Sticky,
+        theme.config.aside.page.Sticky,
+        theme.config.aside.page.noSticky
+    ].join(',').split(',');
+    let uniqueArr = [...new Set(aside)]; // 去重
+    if (uniqueArr.length > 0) { // 是否为空
+        style.define('aside', uniqueArr);
+    }
+});
\ No newline at end of file
diff --git a/source/css/_global/var.styl b/source/css/_global/var.styl
new file mode 100644
index 00000000..235f6e3c
--- /dev/null
+++ b/source/css/_global/var.styl
@@ -0,0 +1 @@
+error_img = hexo-config('errorpage.img')
\ No newline at end of file
diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl
index ee54618a..871c6044 100644
--- a/source/css/_layout/footer.styl
+++ b/source/css/_layout/footer.styl
@@ -1,6 +1,9 @@
 #footer
   position: relative
-  background: center bottom / cover local #307af6
+  background: linear-gradient(180deg, var(--sco-card-bg-none) 0, var(--sco-card-bg) 25%)
+  display: flex
+  flex-direction: column
+  margin-top: .5rem
 
   &:before
     position: absolute !important
@@ -9,28 +12,19 @@
     content: '' !important
     z-index: -1
 
-  background: linear-gradient(180deg, var(--sco-card-bg-none) 0, var(--sco-card-bg) 25%)
-  margin-top: .5rem
-  display: flex
-  flex-direction: column
-
 #footer-wrap
   position: relative
-  padding: 2rem 1rem
-  color: var(--light-grey)
-  text-align: center
   color: var(--sco-fontcolor)
   display: flex
   flex-wrap: wrap
   justify-content: space-around
   padding: 20px 50px 0 50px
-  text-align: left !important
+  text-align: left
   max-width: 1200px
   margin: 0 auto
-  margin-top: 1rem !important
+  margin-top: 1rem
 
   a
-    color: var(--light-grey)
     padding: 4px 12px
     border-radius: 5px
     color: var(--sco-fontcolor)
@@ -38,8 +32,6 @@
     line-height: 36px
 
     &:hover
-      background-color: #fff
-      color: #3b82ff
       cursor: pointer
       border-radius: 5px
       color: var(--sco-hovertext)
@@ -170,7 +162,7 @@ div#sco-footer-bar
   .footer-title-group
     display: flex
     align-items: center
-    margin: 1rem 0 .7rem 8px
+    margin: 1rem 0 .7rem 0
 
     a
       margin-left: 8px
diff --git a/source/css/_page/about.styl b/source/css/_page/about.styl
index 3f32253f..758109ec 100644
--- a/source/css/_page/about.styl
+++ b/source/css/_page/about.styl
@@ -131,12 +131,12 @@
     max-height 400px
     position relative
     overflow hidden
-    margin-bottom .5rem
+    margin-bottom 0.5rem
     height 60%
     background-size 100%
     transition 1s ease-in-out
 
-    &[data-theme=dark]
+    [data-theme=dark] &
       background var(--site-about-oneself-map--dark) no-repeat center
       background-size 100%
 
@@ -150,17 +150,17 @@
         bottom -100%
 
     .map-title
-      position absolute
+      position: absolute
       bottom 0
       left 0
       width 100%
+      color var(--font-color)
+      padding 0.5rem 2rem
+      transform translateZ(0)
+      transition all 1s,color 0s ease-in-out
+      font-size 20px
       background var(--sco-maskbg)
-      padding .5rem 2rem
       backdrop-filter saturate(180%) blur(20px)
-      -webkit-backdrop-filter blur(20px)
-      transition 1s ease-in-out
-      font-size 20px
-      transform translateZ(0)
 
       b
         color var(--sco-fontcolor)
@@ -941,45 +941,4 @@ video.author-content-video
 
 .inline-word
   word-break keep-all
-  white-space nowrap
-
-.main-hero-waves-area
-  width 100%
-  position absolute
-  left 0
-  bottom -11px
-  z-index 5
-
-.waves-area .waves-svg
-  width 100%
-  height 60px
-
-.parallax > use
-  animation move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
-
-.parallax > use:nth-child(1)
-  animation-delay -2s
-  animation-duration 7s
-  fill var(--sco-background)
-  opacity .5
-
-.parallax > use:nth-child(2)
-  animation-delay -3s
-  animation-duration 10s
-  fill var(--sco-background)
-  opacity .6
-
-.parallax > use:nth-child(3)
-  animation-delay -4s
-  animation-duration 13s
-  fill var(--sco-background)
-  opacity .7
-
-.parallax > use:nth-child(4)
-  animation-delay -5s
-  animation-duration 20s
-  fill var(--sco-background)
-
-@media (max-width: 768px)
-  .main-hero-waves-area
-    display none
\ No newline at end of file
+  white-space nowrap
\ No newline at end of file
diff --git a/source/css/_page/home.styl b/source/css/_page/home.styl
new file mode 100644
index 00000000..368deab6
--- /dev/null
+++ b/source/css/_page/home.styl
@@ -0,0 +1,58 @@
+// 即刻、categoriesBar 样式
+#bbTimeList,
+#category-bar
+  padding 0.4rem 1rem 0.4rem 1rem
+  background var(--sco-card-bg)
+  border-radius 12px
+  display flex
+  white-space nowrap
+  overflow hidden
+  margin-bottom 1rem
+  border var(--style-border)
+  transition .3s
+  width 100%
+  justify-content space-between
+  -webkit-user-select none
+  align-items center
+
+  +maxWidth1300()
+    margin-bottom 1rem
+    animation slide-in .6s 0s backwards
+
+  +minWidth1300()
+    &:hover
+      border var(--style-border-hover)
+      box-shadow var(--sco-shadow-main)
+
+  +maxWidth768()
+    margin-bottom 0
+    margin-top 0
+    border-radius 0
+    background var(--sco-background)
+    padding 0.5rem 20px
+    border none
+
+#category-bar
+  white-space nowrap
+  overflow hidden
+  justify-content space-between
+
+  +minWidth1300()
+    margin-bottom 0.75rem
+    animation slide-in .6s .3s backwards
+
+    .category-in-bar-tips
+      margin-bottom .25rem
+
+.page-title
+  display none
+
+#page h1.page-title
+  margin .4rem 0 1rem
+
+#page
+  background 0 0
+  border none
+  padding 0
+  box-shadow none
+  min-height calc(100vh - 464px)
\ No newline at end of file
diff --git a/source/css/_page/homeTop.styl b/source/css/_page/homeTop.styl
index f23c8bca..e98d4c47 100644
--- a/source/css/_page/homeTop.styl
+++ b/source/css/_page/homeTop.styl
@@ -630,6 +630,9 @@ a.categoryButton:hover
 	margin-right: 0
 	font-size: 13px
 
+	&:hover
+		color var(--sco-theme)
+
 // category bar
 div#categoryList
 	display: flex
diff --git a/source/css/_page/index.styl b/source/css/_page/index.styl
index 13b5bca3..d3a51803 100644
--- a/source/css/_page/index.styl
+++ b/source/css/_page/index.styl
@@ -1,59 +1,22 @@
-// 即刻、categoriesBar 样式
-#bbTimeList,
-#category-bar
-  padding 0.4rem 1rem 0.4rem 0.7rem
-  background var(--sco-card-bg)
-  border-radius 12px
-  display flex
-  white-space nowrap
-  overflow hidden
-  margin-bottom 1rem
-  border var(--style-border)
-  transition .3s
-  width 100%
-  justify-content space-between
-  -webkit-user-select none
-  align-items center
-
-  +maxWidth1300()
-    margin-bottom 1rem
-    animation slide-in .6s 0s backwards
-
-  +minWidth1300()
-    &:hover
-      border var(--style-border-hover)
-      box-shadow var(--sco-shadow-main)
-
-  +maxWidth768()
-    margin-bottom 0
-    margin-top 0
-    border-radius 0
-    background var(--sco-background)
-    padding 0.5rem 20px
-    border none
-
-#category-bar
-  padding 0.4rem 1rem 0.4rem 0.7rem
-  white-space nowrap
-  overflow hidden
-  justify-content space-between
-
-  +minWidth1300()
-    margin-bottom 0.75rem
-    animation slide-in .6s .3s backwards
-
-    .category-in-bar-tips
-      margin-bottom .25rem
-
-.page-title
-  display none
-
-#page h1.page-title
-  margin .4rem 0 1rem
-
-#page
-  background 0 0
-  border none
-  padding 0
-  box-shadow none
-  min-height calc(100vh - 464px)
\ No newline at end of file
+@import "category.styl"
+
+@import "equipment.styl"
+
+@import "error.styl"
+
+@import "home.styl"
+@import "homeTop.styl"
+
+@import "link.styl"
+
+@import "rss.styl"
+
+@import "moment.styl"
+
+if hexo-config('says.enable')
+  @import "says.styl"
+
+@import "tag.styl"
+
+if hexo-config('about.enable')
+  @import "about.styl"
\ No newline at end of file
diff --git a/source/css/_page/link.styl b/source/css/_page/link.styl
index 4d430b36..55649f45 100644
--- a/source/css/_page/link.styl
+++ b/source/css/_page/link.styl
@@ -143,6 +143,7 @@
         line-height 1.2
         color #888
         display -webkit-box
+        -webkit-box-orient vertical
         overflow hidden
         -webkit-line-clamp 2
 
diff --git a/source/css/_page/tag.styl b/source/css/_page/tag.styl
index 233340ca..6a4187e0 100644
--- a/source/css/_page/tag.styl
+++ b/source/css/_page/tag.styl
@@ -49,6 +49,7 @@ span.tags-punctuation
   font-weight 700
   display flex;
   align-items center
+  transition .3s
 
 +minWidth1300()
   #tag
diff --git a/source/css/_post/index.styl b/source/css/_post/index.styl
index b56e8e0d..b37eaf28 100644
--- a/source/css/_post/index.styl
+++ b/source/css/_post/index.styl
@@ -88,7 +88,7 @@
         margin-right .8rem
 
   span.tags-punctuation::before
-    font-size 20px
+    font-size 15px
     line-height 32px
 
 .post-meta-date
@@ -489,6 +489,13 @@ span.tags-punctuation::before
       border var(--style-border-always)
       box-shadow var(--sco-shadow-main)
 
+      &:hover
+        img.post-copyright__author_img_front
+          transform scale(1) translateY(3px)
+
+        img.post-copyright__author_img_back
+          transform scale(.8)
+
       img
         position absolute
         bottom 0
diff --git a/source/css/_post/postContent.styl b/source/css/_post/postContent.styl
index 8f0261b4..dfda73aa 100644
--- a/source/css/_post/postContent.styl
+++ b/source/css/_post/postContent.styl
@@ -658,10 +658,9 @@
 }
 
 #article-container.post-content h1, #article-container.post-content h2, #article-container.post-content h3, #article-container.post-content h4 {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: row-reverse;
+  border-top 1px dashed var(--sco-theme-op)
+  padding-top 1.5rem
+  margin-top 1.5rem
 }
 
 #article-container.post-content h1 {
@@ -708,7 +707,7 @@
   padding: 0;
   border-style: none;
   border-radius: 8px !important;
-  line-height: 1;
+  line-height: 2;
   font-size: 1rem
 }
 
@@ -729,7 +728,7 @@
 }
 
 #article-container img.error {
-  content: url(https://bu.dusays.com/2023/03/03/6401a79030db5.png)
+  content: url(error_img)
 }
 
 .doge-inner-player {
@@ -914,4 +913,45 @@
   #article-container .author-content-item.single.like-movie .banner-button-group .banner-button-text {
     display: none
   }
-}
\ No newline at end of file
+}
+
+.main-hero-waves-area
+  width 100%
+  position absolute
+  left 0
+  bottom -11px
+  z-index 5
+
+.waves-area .waves-svg
+  width 100%
+  height 60px
+
+.parallax > use
+  animation move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
+
+.parallax > use:nth-child(1)
+  animation-delay -2s
+  animation-duration 7s
+  fill var(--sco-background)
+  opacity .5
+
+.parallax > use:nth-child(2)
+  animation-delay -3s
+  animation-duration 10s
+  fill var(--sco-background)
+  opacity .6
+
+.parallax > use:nth-child(3)
+  animation-delay -4s
+  animation-duration 13s
+  fill var(--sco-background)
+  opacity .7
+
+.parallax > use:nth-child(4)
+  animation-delay -5s
+  animation-duration 20s
+  fill var(--sco-background)
+
+@media (max-width: 768px)
+  .main-hero-waves-area
+    display none
\ No newline at end of file
diff --git a/source/css/_search/algolia-search.styl b/source/css/_search/algolia-search.styl
index c216a744..6cfb5eb3 100644
--- a/source/css/_search/algolia-search.styl
+++ b/source/css/_search/algolia-search.styl
@@ -22,7 +22,7 @@
 
   .search-close-button
     &:hover
-      color rgb(48, 122, 246)
+      color var(--sco-main)
 
   .search-box
     padding-top 8px
@@ -45,7 +45,7 @@
     position absolute
     top 0.8rem
     right 1rem
-    color #858585
+    color var(--sco-gray)
     font-size 1.4em
     line-height 1
     cursor pointer
diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl
index 95d702e7..97a798ab 100644
--- a/source/css/_search/local-search.styl
+++ b/source/css/_search/local-search.styl
@@ -21,7 +21,7 @@
 		height 100%
 
 	.search-close-button 
-		color rgb(133, 133, 133)
+		color var(--sco-main)
 		font-size 1.2em
 		line-height 1
 		cursor pointer
diff --git a/source/css/_widgets/aside/allinfo.styl b/source/css/_widgets/aside/allinfo.styl
index 50489628..8d0479bf 100644
--- a/source/css/_widgets/aside/allinfo.styl
+++ b/source/css/_widgets/aside/allinfo.styl
@@ -101,24 +101,19 @@
             display inline-block
             vertical-align bottom
 
-            &:first-child
-              width 80%
-
             &:last-child
-              width 20%
               text-align right
+              margin-left: 4px
 
           .card-archive-list-count-group
             display flex
             flex-direction row
-            align-items baseline
 
             span.card-archive-list-count
-            width auto
-            text-align left
-            font-size 1.1rem
-            line-height .9
-            font-weight 700
+              ext-align left
+              font-size 1.1rem
+              line-height 0.9
+              font-weight bold
 
             .card-archive-list-count-unit
               width auto
diff --git a/source/css/_widgets/aside/index.styl b/source/css/_widgets/aside/index.styl
index 268e40c9..9f241ce2 100644
--- a/source/css/_widgets/aside/index.styl
+++ b/source/css/_widgets/aside/index.styl
@@ -134,16 +134,23 @@
 
 @import "toc.styl"
 
-@import "info.styl"
+if "about" in aside
+  @import "info.styl"
 
-@import "allinfo.styl"
+if "allInfo" in aside
+  @import "allinfo.styl"
 
-@import "welcome.styl"
+if "wlcome" in aside
+  @import "welcome.styl"
 
-@import "history.styl"
+if "history" in aside
+  @import "history.styl"
 
-@import "power.styl"
+if "power" in aside
+  @import "power.styl"
 
-@import "newPost.styl"
+if "newestPost" in aside
+  @import "newPost.styl"
 
-@import "flip.styl"
\ No newline at end of file
+if "flip" in aside
+  @import "flip.styl"
\ No newline at end of file
diff --git a/source/css/_widgets/aside/newPost.styl b/source/css/_widgets/aside/newPost.styl
index 09de6c73..424904b4 100644
--- a/source/css/_widgets/aside/newPost.styl
+++ b/source/css/_widgets/aside/newPost.styl
@@ -16,6 +16,9 @@
           transition .3s
           box-shadow var(--sco-shadow-main)
 
+          .content a
+            color var(--sco-white)
+
         .thumbnail
           -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
           border-radius 8px
diff --git a/source/css/index.styl b/source/css/index.styl
index 25bb5c6b..098c0eb1 100644
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -7,7 +7,7 @@ if hexo-config('css_prefix')
 @import '_global/animation.css'
 @import '_global/*'
 @import '_layout/*'
-@import '_page/*'
+@import '_page/index.styl'
 @import '_post/*'
 
 // widgets
diff --git a/source/js/main.js b/source/js/main.js
index 90e0c610..f7614c3d 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -576,7 +576,7 @@ let sco = {
         }
     },
     /**
-     * 图片添加盲水印
+     * 图片添加水印
      */
     addPhotoFigcaption: function () {
         let images = document.querySelectorAll('#article-container img');
@@ -596,55 +596,61 @@ let sco = {
     /**
      * 下载图片并添加水印
      */
-    downloadImage: function (e, t) {
+    downloadImage: async function (url, filename) {
         rm.hideRightMenu();
-        if (0 == rm.downloadimging) {
-            rm.downloadimging = !0;
-            utils.snackbarShow("正在下载中，请稍后", !1, 1e4);
-            setTimeout((function () {
-                let o = new Image;
-                o.setAttribute("crossOrigin", "anonymous");
-                o.onload = function () {
-                    let e = document.createElement("canvas");
-                    e.width = o.width;
-                    e.height = o.height;
-                    e.getContext("2d").drawImage(o, 0, 0, o.width, o.height);
-                    let n = e.toDataURL("image/png");
-                    let a = document.createElement("a");
-                    let l = new MouseEvent("click");
-                    a.download = t || "photo";
-                    a.href = n;
-                    a.dispatchEvent(l);
-                };
-                o.src = e;
-                utils.snackbarShow("图片已添加盲水印，请遵守版权协议");
-                rm.downloadimging = !1;
-            }), "10000");
-        } else {
+        if (rm.downloadimging) {
             utils.snackbarShow("有正在进行中的下载，请稍后再试");
+            return;
+        }
+        try {
+            rm.downloadimging = true;
+            utils.snackbarShow("正在下载中，请稍后", false, 10000);
+            await new Promise(resolve => setTimeout(resolve, 10000));
+            const img = new Image();
+            img.setAttribute("crossOrigin", "anonymous");
+            img.onload = function () {
+                const canvas = document.createElement("canvas");
+                const ctx = canvas.getContext("2d");
+                canvas.width = img.width;
+                canvas.height = img.height;
+                ctx.drawImage(img, 0, 0, img.width, img.height);
+                ctx.font = "30px Arial";
+                ctx.fillText(window.location.href, 10, img.height - 10);
+                const dataUrl = canvas.toDataURL("image/png");
+                const link = document.createElement("a");
+                const event = new MouseEvent("click");
+                link.download = filename || "photo";
+                link.href = dataUrl;
+                link.dispatchEvent(event);
+                utils.snackbarShow("图片已添加盲水印，请遵守版权协议");
+                rm.downloadimging = false;
+            };
+            img.src = url;
+        } catch (error) {
+            console.error(error);
+            utils.snackbarShow("下载图片时出错");
+            rm.downloadimging = false;
         }
     },
     /**
      * 音乐播放暂停
      */
     musicToggle: function () {
-        const $music = document.querySelector('#nav-music'),
-            $meting = document.querySelector('meting-js'),
-            $console = document.getElementById('consoleMusic')
+        const $music = document.querySelector('#nav-music');
+        const $meting = document.querySelector('meting-js');
+        const $console = document.getElementById('consoleMusic');
+        const $toggleButton = document.getElementById('menu-music-toggle');
+        wleelw_musicPlaying = !wleelw_musicPlaying;
+        $music.classList.toggle("playing", wleelw_musicPlaying);
+        $console.classList.toggle("on", wleelw_musicPlaying);
         if (wleelw_musicPlaying) {
-            $music.classList.remove("playing")
-            $console.classList.remove("on")
-            wleelw_musicPlaying = false;
-            $meting.aplayer.pause();
-            document.getElementById('menu-music-toggle').innerHTML = `<i class="scoicon sco-play-fill"></i><span>播放音乐</span>`
-        } else {
-            $music.classList.add("playing")
-            $console.classList.add("on")
-            wleelw_musicPlaying = true;
             $meting.aplayer.play();
-            document.getElementById('menu-music-toggle').innerHTML = `<i class="scoicon sco-pause-fill"></i><span>暂停音乐</span>`
+            $toggleButton.innerHTML = `<i class="scoicon sco-pause-fill"></i><span>暂停音乐</span>`;
+        } else {
+            $meting.aplayer.pause();
+            $toggleButton.innerHTML = `<i class="scoicon sco-play-fill"></i><span>播放音乐</span>`;
         }
-        rm.hideRightMenu()
+        rm.hideRightMenu();
     },
     /**
      * 音乐上一首
@@ -664,12 +670,8 @@ let sco = {
      * 获取歌曲名称
      */
     musicGetName: function () {
-        var e = document.querySelectorAll('.aplayer-title');
-        var t = [];
-        for (var o = e.length - 1; o >= 0; o--) {
-            t[o] = e[o].innerText;
-        }
-        return t[0];
+        const titles = Array.from(document.querySelectorAll('.aplayer-title')).map(e => e.innerText);
+        return titles[0];
     },
     /**
      * 跳转到评论
@@ -681,25 +683,20 @@ let sco = {
      * 一些日子灰色页面
      */
     setFest: function () {
-        let date = new Date();
-        let currentDate = (date.getMonth() + 1) + '.' + date.getDate();
+        const date = new Date();
+        const currentDate = `${date.getMonth() + 1}.${date.getDate()}`;
 
         const specialDates = ['1.8', '9.9', '7.7', '9.18', '12.13'];
 
         if (specialDates.includes(currentDate)) {
             const css = `
-            html {
-                -webkit-filter: grayscale(100%);
-                -moz-filter: grayscale(100%);
-                -ms-filter: grayscale(100%);
-                -o-filter: grayscale(100%);
-                filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-                _filter: none;
-            }
+        html {
+            filter: grayscale(100%);
+        }
         `;
 
             const styleElement = document.createElement('style');
-            styleElement.appendChild(document.createTextNode(css));
+            styleElement.textContent = css;
             document.head.appendChild(styleElement);
         }
     },
@@ -766,7 +763,6 @@ let sco = {
                 item.classList.remove("select");
             });
         }
-
         if (decodedPath === "/") {
             if (categoryBar) {
                 const homeItem = document.getElementById("category-bar-home");
@@ -789,21 +785,11 @@ let sco = {
      * categoryBarRightButton
      */
     scrollCategoryBarToRight: function () {
-        // 定义一个变量用于存储 setTimeout 返回的 ID
         let timeoutId;
-
-        // 获取滚动条元素和下一个元素
         let scrollBar = document.getElementById("category-bar-items");
         let nextElement = document.getElementById("category-bar-next");
-
-        // 获取滚动条元素的宽度
         let scrollBarWidth = scrollBar.clientWidth;
-
-        // 检查滚动条是否存在
         if (scrollBar) {
-            // 如果滚动条的滚动位置加上其宽度大于或等于其滚动宽度（减去8，可能是为了留出一些边距），
-            // 则将其滚动位置设置为0（即滚动到最左端）。
-            // 否则，将其滚动位置向右移动其宽度的距离（即滚动一个元素的宽度）。
             if (scrollBar.scrollLeft + scrollBar.clientWidth >= scrollBar.scrollWidth - 8) {
                 scrollBar.scroll({
                     left: 0,
@@ -815,24 +801,14 @@ let sco = {
                     behavior: "smooth"
                 });
             }
-
-            // 为滚动条添加一个滚动事件监听器
             scrollBar.addEventListener("scroll", function onScroll() {
-                // 清除之前的定时器
                 clearTimeout(timeoutId);
-
-                // 启动一个新的定时器，在150毫秒后执行以下操作：
                 timeoutId = setTimeout(function () {
-                    // 如果滚动条的滚动位置加上其宽度大于或等于其滚动宽度（减去8），
-                    // 则将下一个元素的 transform 样式设置为 "rotate(180deg)"（即旋转180度）。
-                    // 否则，清除下一个元素的 transform 样式。
                     if (scrollBar.scrollLeft + scrollBar.clientWidth >= scrollBar.scrollWidth - 8) {
                         nextElement.style.transform = "rotate(180deg)";
                     } else {
                         nextElement.style.transform = "";
                     }
-
-                    // 移除滚动条的滚动事件监听器
                     scrollBar.removeEventListener("scroll", onScroll);
                 }, 150);
             });
@@ -842,18 +818,11 @@ let sco = {
      * 打开侧边栏标签隐藏
      */
     openAllTags: function () {
-        // 获取所有的 ".card-allinfo .card-tag-cloud" 元素
         let tagCloudElements = document.querySelectorAll(".card-allinfo .card-tag-cloud");
-
-        // 遍历这些元素，为每个元素添加 "all-tags" 类
         tagCloudElements.forEach(function (tagCloudElement) {
             tagCloudElement.classList.add("all-tags");
         });
-
-        // 获取 "more-tags-btn" 元素
         let moreTagsButton = document.getElementById("more-tags-btn");
-
-        // 如果 "more-tags-btn" 元素存在，那么移除它
         if (moreTagsButton) {
             moreTagsButton.parentNode.removeChild(moreTagsButton);
         }
@@ -896,6 +865,22 @@ let sco = {
                 pageText.value = lastPageNumber;
             }
         });
+    },
+    /**
+     * 初始化Nav背景
+     */
+    addNavBackgroundInit: function () {
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        if (scrollTop !== 0) {
+            var pageHeader = document.getElementById("page-header");
+            if (pageHeader) {
+                pageHeader.classList.add("nav-fixed", "nav-visible");
+            }
+            var cookiesWindow = document.getElementById("cookies-window");
+            if (cookiesWindow) {
+                cookiesWindow.style.display = 'none';
+            }
+        }
     }
 }
 
@@ -904,64 +889,63 @@ let sco = {
  */
 class hightlight {
     static createEle(langEl, item) {
-        const fragment = document.createDocumentFragment()
-        const highlightCopyEle = '<i class="scoicon sco-copy-fill"></i>'
-        const highlightExpandEle = '<i class="scoicon sco-arrow-down expand" style="font-size: 16px"></i>'
-
-        const hlTools = document.createElement('div')
-        hlTools.className = `highlight-tools`
-        hlTools.innerHTML = highlightExpandEle + langEl + highlightCopyEle
-        let expand = true
-        hlTools.children[0].addEventListener('click', (e) => {
-            if (expand) {
-                hlTools.children[0].classList.add('closed')
-                $table.setAttribute('style', 'display:none')
-                if ($expand.length !== 0) {
-                    $expand[0].setAttribute('style', 'display:none')
-                }
-            } else {
-                hlTools.children[0].classList.remove('closed')
-                $table.setAttribute('style', 'display:block')
-                if ($expand.length !== 0) {
-                    $expand[0].setAttribute('style', 'display:block')
-                }
-                if (itemHeight < 200) {
-                    $table.setAttribute('style', 'height: auto')
-                } else {
-                    $table.setAttribute('style', 'height:200px')
-                    ele.classList.remove("expand-done")
+        const fragment = document.createDocumentFragment();
+        const highlightCopyEle = '<i class="scoicon sco-copy-fill"></i>';
+        const highlightExpandEle = '<i class="scoicon sco-arrow-down expand" style="font-size: 16px"></i>';
+
+        const hlTools = document.createElement('div');
+        hlTools.className = 'highlight-tools';
+        hlTools.innerHTML = `${highlightExpandEle}${langEl}${highlightCopyEle}`;
+
+        const itemHeight = item.clientHeight;
+        const $table = item.querySelector('table');
+        const $expand = item.getElementsByClassName('code-expand-btn');
+
+        let expand = true;
+        hlTools.children[0].addEventListener('click', () => {
+            expand = !expand;
+            hlTools.children[0].classList.toggle('closed');
+            $table.style.display = expand ? 'none' : 'block';
+            if ($expand.length !== 0) {
+                $expand[0].style.display = expand ? 'none' : 'block';
+            }
+            if (!expand) {
+                $table.style.height = itemHeight < 200 ? 'auto' : '200px';
+                if (itemHeight >= 200) {
+                    item.classList.remove("expand-done");
                 }
             }
-            expand = !expand
-        })
-        hlTools.children[2].addEventListener('click', (e) => {
-            utils.copy($table.querySelector('.code').innerText)
-        })
-        const ele = document.createElement('div')
-        fragment.appendChild(hlTools)
-        const itemHeight = item.clientHeight, $table = item.querySelector('table'),
-            $expand = item.getElementsByClassName('code-expand-btn')
+        });
+
+        hlTools.children[2].addEventListener('click', () => {
+            utils.copy($table.querySelector('.code').innerText);
+        });
+
+        fragment.appendChild(hlTools);
+
         if (GLOBAL_CONFIG.hightlight.limit && itemHeight > GLOBAL_CONFIG.hightlight.limit + 30) {
-            $table.setAttribute('style', `height: ${GLOBAL_CONFIG.hightlight.limit}px`)
-            ele.className = 'code-expand-btn'
-            ele.innerHTML = '<i class="scoicon sco-show-line" style="font-size: 1.2rem"></i>'
+            $table.style.height = `${GLOBAL_CONFIG.hightlight.limit}px`;
+            const ele = document.createElement('div');
+            ele.className = 'code-expand-btn';
+            ele.innerHTML = '<i class="scoicon sco-show-line" style="font-size: 1.2rem"></i>';
             ele.addEventListener('click', (e) => {
-                $table.setAttribute('style', `height: ${itemHeight}px`)
-                e.target.className !== 'code-expand-btn' ? e.target.parentNode.classList.add('expand-done') : e.target.classList.add('expand-done')
-            })
-            fragment.appendChild(ele)
+                $table.style.height = `${itemHeight}px`;
+                const target = e.target.className !== 'code-expand-btn' ? e.target.parentNode : e.target;
+                target.classList.add('expand-done');
+            });
+            fragment.appendChild(ele);
         }
-        item.insertBefore(fragment, item.firstChild)
+        item.insertBefore(fragment, item.firstChild);
     }
 
     static init() {
-        const $figureHighlight = document.querySelectorAll('figure.highlight'), that = this
-        $figureHighlight.forEach(function (item) {
-            let langName = item.getAttribute('class').split(' ')[1]
-            if (langName === 'plaintext' || langName === undefined) langName = 'Code'
-            const highlightLangEle = `<div class="code-lang">${langName.toUpperCase()}</div>`
-            that.createEle(highlightLangEle, item)
-        })
+        const $figureHighlight = document.querySelectorAll('figure.highlight');
+        $figureHighlight.forEach(item => {
+            let langName = item.classList[1] || 'Code';
+            if (langName === 'plaintext') langName = 'Code';
+            const highlightLangEle = `<div class="code-lang">${langName.toUpperCase()}</div>`;
+            this.createEle(highlightLangEle, item);
+        });
     }
 }
 
@@ -1016,6 +1000,7 @@ window.refreshFn = () => {
     sco.tagPageActive()
     sco.categoriesBarActive()
     sco.listenToPageInputPress()
+    sco.addNavBackgroundInit()
     GLOBAL_CONFIG.rightside.enable && addRightMenuClickEvent()
     GLOBAL_CONFIG.lazyload.enable && sco.lazyloadImg()
     GLOBAL_CONFIG.lightbox && sco.lightbox('')