From 60368054edcb7e76640f46b57bc3476c4e58442c Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sat, 27 Jan 2024 13:02:03 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=95=B7=EF=B8=8Ffix:=20update=20config?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

删除固定的版本号
---
 _config.yml | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/_config.yml b/_config.yml
index 101d8b16..0a34a9c3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -404,7 +404,7 @@ aside:
 errorpage:
   # 图片
   # image
-  img: https://npm.elemecdn.com/wzheo-absolute@1.0.3/image/source/404.png
+  img: https://npm.elemecdn.com/wzheo-absolute/image/source/404.png
   # 文字
   # text
   text: =awa= 页面走丢了
@@ -832,11 +832,11 @@ pwa:
   enable: false
   manifest: /manifest.json # manifest.json 文件路径
   theme_color: '#ffffff' # 主题颜色
-  mask_icon: https://cdn.cbd.int/solitude-source@1.0.3/img/pwa/180.png # 遮罩图标
-  apple_touch_icon: https://cdn.cbd.int/solitude-source@1.0.3/img/pwa/180.png # 苹果触摸图标
-  bookmark_icon: https://cdn.cbd.int/solitude-source@1.0.3/img/pwa/180.png # 书签图标
-  favicon_32_32: https://cdn.cbd.int/solitude-source@1.0.3/img/pwa/32.png # 32x32图标
-  favicon_16_16: https://cdn.cbd.int/solitude-source@1.0.3/img/pwa/16.png # 16x16图标
+  mask_icon: https://cdn.cbd.int/solitude-source/img/pwa/180.png # 遮罩图标
+  apple_touch_icon: https://cdn.cbd.int/solitude-source/img/pwa/180.png # 苹果触摸图标
+  bookmark_icon: https://cdn.cbd.int/solitude-source/img/pwa/180.png # 书签图标
+  favicon_32_32: https://cdn.cbd.int/solitude-source/img/pwa/32.png # 32x32图标
+  favicon_16_16: https://cdn.cbd.int/solitude-source/img/pwa/16.png # 16x16图标
 
 # CDN
 # Don't modify the following settings unless you know how they work
@@ -858,9 +858,9 @@ CDN:
   custom_format: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
 
   option:
-    scoicon_css: https://cdn.cbd.int/solitude-source@1.0.3/icon/scoicon.min.css
-    waterfall: https://cdn.cbd.int/solitude-source@1.0.3/js/waterfall.min.js
-    view_image: https://cdn.cbd.int/solitude-source@1.0.3/js/view-image.min.js
+    scoicon_css: https://cdn.cbd.int/solitude-source/icon/scoicon.min.css
+    waterfall: https://cdn.cbd.int/solitude-source/js/waterfall.min.js
+    view_image: https://cdn.cbd.int/solitude-source/js/view-image.min.js
 #    algolia_search:
 #    instantsearch:
 #    pjax:

From 40e098ab8763c14fbffe881d5b703fe091df8ef6 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sat, 27 Jan 2024 13:33:24 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=95=B7=EF=B8=8Ffix:=20repair=20coverc?=
 =?UTF-8?q?olor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复文章主色调获取之后，主题原色无法恢复
---
 source/js/covercolor/api.js   | 37 +++++++---------
 source/js/covercolor/local.js | 83 +++--------------------------------
 2 files changed, 24 insertions(+), 96 deletions(-)

diff --git a/source/js/covercolor/api.js b/source/js/covercolor/api.js
index 5b383729..1b424e3f 100644
--- a/source/js/covercolor/api.js
+++ b/source/js/covercolor/api.js
@@ -7,6 +7,7 @@ const coverColor = () => {
 
 function handleApiColor(path) {
     const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
+    console.log(cacheGroup)
     if (cacheGroup.postcolor && cacheGroup.postcolor[path]) {
         const color = cacheGroup.postcolor[path].value;
         const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));
@@ -18,30 +19,24 @@ function handleApiColor(path) {
 
 function img2color(src) {
     const apiUrl = coverColorConfig.api + encodeURIComponent(src);
-
     fetch(apiUrl)
         .then(response => response.json())
         .then(data => {
             const color = data.RGB;
             const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));
             setThemeColors(color, r, g, b);
-            if (coverColorConfig.time !== 0) {
-                cacheColor(src, color);
-            }
+            const expirationTime = Date.now() + coverColorConfig.time;
+            const cacheGroup = saveToLocal.get('Solitude') || {};
+            cacheGroup.postcolor = cacheGroup.postcolor || {};
+            cacheGroup.postcolor[src] = {value: color, expiration: expirationTime};
+            localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
         })
         .catch(error => {
             console.error('请检查API是否正常！\n' + error);
+            setThemeColors();
         });
 }
 
-function cacheColor(src, color) {
-    const expirationTime = Date.now() + coverColorConfig.time;
-    const cacheGroup = saveToLocal.get('Solitude') || {};
-    cacheGroup.postcolor = cacheGroup.postcolor || {};
-    cacheGroup.postcolor[src] = {value: color, expiration: expirationTime};
-    localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
-}
-
 function setThemeColors(value, r = null, g = null, b = null) {
     if (value) {
         document.documentElement.style.setProperty('--sco-main', value);
@@ -51,15 +46,17 @@ function setThemeColors(value, r = null, g = null, b = null) {
 
         if (r && g && b) {
             var brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
-            var cardContents = document.getElementsByClassName('card-content');
-            var authorInfo = document.getElementsByClassName('author-info__sayhi');
-            for (let i = 0; i < cardContents.length; i++) {
-                cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
-            }
+            if (brightness < 125) {
+                var cardContents = document.getElementsByClassName('card-content');
+                for (let i = 0; i < cardContents.length; i++) {
+                    cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
+                }
 
-            for (let i = 0; i < authorInfo.length; i++) {
-                authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
-                authorInfo[i].style.setProperty('color', 'var(--sco-white)');
+                var authorInfo = document.getElementsByClassName('author-info__sayhi');
+                for (let i = 0; i < authorInfo.length; i++) {
+                    authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
+                    authorInfo[i].style.setProperty('color', 'var(--sco-white)');
+                }
             }
         }
 
diff --git a/source/js/covercolor/local.js b/source/js/covercolor/local.js
index 4357f0b7..5f803451 100644
--- a/source/js/covercolor/local.js
+++ b/source/js/covercolor/local.js
@@ -1,20 +1,21 @@
-const coverColor = () => {
+function coverColor() {
     const path = document.getElementById("post-cover")?.src;
+
     if (path) {
         localColor(path);
     }
 }
 
-const localColor = (path) => {
+function localColor(path) {
     const img = new Image();
     img.crossOrigin = "Anonymous";
     img.onload = function () {
         const canvas = document.createElement("canvas");
-        canvas.width = img.width;
-        canvas.height = img.height;
+        canvas.width = this.width;
+        canvas.height = this.height;
         const ctx = canvas.getContext("2d");
-        ctx.drawImage(img, 0, 0);
-        const data = ctx.getImageData(0, 0, img.width, img.height).data;
+        ctx.drawImage(this, 0, 0);
+        const data = ctx.getImageData(0, 0, this.width, this.height).data;
         const {r, g, b} = calculateRGB(data);
         let value = rgbToHex(r, g, b);
         if (getContrastYIQ(value) === "light") {
@@ -22,26 +23,9 @@ const localColor = (path) => {
         }
         setThemeColors(value, r, g, b);
     };
-    img.onerror = function() {
-        console.error('图片加载失败');
-    };
     img.src = path;
 }
 
-function calculateRGB(data) {
-    let r = 0, g = 0, b = 0;
-    const step = 5;
-    for (let i = 0; i < data.length; i += 4 * step) {
-        r += data[i];
-        g += data[i + 1];
-        b += data[i + 2];
-    }
-    r = Math.floor(r / (data.length / 4 / step));
-    g = Math.floor(g / (data.length / 4 / step));
-    b = Math.floor(b / (data.length / 4 / step));
-    return {r, g, b};
-}
-
 function rgbToHex(r, g, b) {
     return "#" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
 }
@@ -98,57 +82,4 @@ function colorRgb(str) {
     } else {
         return sColor;
     }
-}
-
-function setThemeColors(value, r = null, g = null, b = null) {
-    const cardContents = document.getElementsByClassName('card-content');
-    const authorInfo = document.getElementsByClassName('author-info__sayhi');
-
-    if (value) {
-        document.documentElement.style.setProperty('--sco-main', value);
-        document.documentElement.style.setProperty('--sco-main-op', value + '23');
-        document.documentElement.style.setProperty('--sco-main-op-deep', value + 'dd');
-        document.documentElement.style.setProperty('--sco-main-none', value + '00');
-
-        if (r && g && b) {
-            var brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
-            for (let i = 0; i < cardContents.length; i++) {
-                cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
-            }
-
-            for (let i = 0; i < authorInfo.length; i++) {
-                authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
-                authorInfo[i].style.setProperty('color', 'var(--sco-white)');
-            }
-        }
-
-        document.getElementById("coverdiv").classList.add("loaded");
-        initThemeColor();
-    } else {
-        document.documentElement.style.setProperty('--sco-main', 'var(--sco-theme)');
-        document.documentElement.style.setProperty('--sco-main-op', 'var(--sco-theme-op)');
-        document.documentElement.style.setProperty('--sco-main-op-deep', 'var(--sco-theme-op-deep)');
-        document.documentElement.style.setProperty('--sco-main-none', 'var(--sco-theme-none)');
-        initThemeColor();
-    }
-}
-
-function initThemeColor() {
-    const currentTop = window.scrollY || document.documentElement.scrollTop;
-    let themeColor;
-    if (currentTop > 0) {
-        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-card-bg');
-    } else if (PAGE_CONFIG.is_post) {
-        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-main');
-    } else {
-        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-background');
-    }
-    changeThemeColor(themeColor);
-}
-
-function changeThemeColor(color) {
-    const meta = document.querySelector('meta[name="theme-color"]');
-    if (meta) {
-        meta.setAttribute('content', color);
-    }
 }
\ No newline at end of file

From 7cc9cdb1eadddc6c256d1ed1ba7f75a8cd853459 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sat, 27 Jan 2024 14:14:23 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8feat:=20update=20essay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                                 | 4 ++--
 layout/includes/widgets/page/says/json.pug  | 6 ++----
 layout/includes/widgets/page/says/local.pug | 8 ++------
 layout/includes/widgets/page/says/memos.pug | 6 ++----
 4 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/_config.yml b/_config.yml
index 0a34a9c3..3c79f4ac 100644
--- a/_config.yml
+++ b/_config.yml
@@ -430,8 +430,8 @@ says:
   # 1：张洪heo样式 / 2：Leonus样式
   # 1: Zhang Hong heo style / 2: Leonus style
   style: 1
-  # 即刻短文数量（条）。建议范围：1 ~ 999，当数量为-1时，将显示全部。
-  # Number of immediate short articles (pieces). Suggested range: 1~999, when the quantity is -1, all will be displayed.
+  # 即刻短文仅展示前n条
+  # Jike short text only shows the first n
   strip: 30
   # 模式选择。local：本地静态 / json：动态json / memos：动态Memos
   # Mode selection. Local: local static/JSON: dynamic JSON/memory: dynamic Memos
diff --git a/layout/includes/widgets/page/says/json.pug b/layout/includes/widgets/page/says/json.pug
index 77a75891..40afd33a 100644
--- a/layout/includes/widgets/page/says/json.pug
+++ b/layout/includes/widgets/page/says/json.pug
@@ -2,11 +2,10 @@ case theme.says.style
     when 1
         script.
             !async function () {
-                let say_strip = !{theme.says.strip}
                 await fetch('!{url_for(theme.says.mode_link)}')
                     .then(res => res.json())
                     .then(res => {
-                        let list = say_strip === -1 || say_strip >= res.length ? res : res.slice(0, say_strip)
+                        let list = res.slice(0, !{theme.says.strip})
                         let aplayer = null
                         let video = null
                         let imageBox = null
@@ -43,11 +42,10 @@ case theme.says.style
     when 2
         script.
             !async function () {
-                let say_strip = !{theme.says.strip}
                 await fetch('!{url_for(theme.says.mode_link)}')
                     .then(res => res.json())
                     .then(res => {
-                        let list = say_strip === -1 || say_strip >= res.length ? res : res.slice(0, say_strip)
+                        let list = res.slice(0, !{theme.says.strip})
                         let aplayer = null
                         let video = null
                         let imageBox = null
diff --git a/layout/includes/widgets/page/says/local.pug b/layout/includes/widgets/page/says/local.pug
index 7f281cfc..e10f4826 100644
--- a/layout/includes/widgets/page/says/local.pug
+++ b/layout/includes/widgets/page/says/local.pug
@@ -1,8 +1,4 @@
-if theme.says.strip === -1
-    - var limitedList = site.data.essay.essay_list
-else
-    - var limitedList = site.data.essay.essay_list.slice(0, theme.says.strip)
-each item in limitedList
+each item in site.data.essay.essay_list.slice(0, theme.says.strip)
     li.item
         if theme.says.style === 2
             .meta
@@ -45,4 +41,4 @@ each item in limitedList
                             | 链接
                 if item.content
                     a.bber-reply(onclick=`sco.toTalk('${item.content}')`)
-                        i.scoicon.sco-chat-fill(style="font-size: 1rem;")
\ No newline at end of file
+                        i.scoicon.sco-chat-fill
\ No newline at end of file
diff --git a/layout/includes/widgets/page/says/memos.pug b/layout/includes/widgets/page/says/memos.pug
index 637e1173..8866f9a8 100644
--- a/layout/includes/widgets/page/says/memos.pug
+++ b/layout/includes/widgets/page/says/memos.pug
@@ -2,7 +2,6 @@ case theme.says.style
     when 1
         script.
             !async function () {
-                let say_strip = !{theme.says.strip};
                 let aplayerRegex = /{aplayer,(.*?),(.*?)}/g;
                 let linkRegex = /(?<!\!)\[([^\]]*)\]\(([^\)]*)\)/g;
                 let bilibiliRegex = /{bilibili,(.*?)}/g;
@@ -13,7 +12,7 @@ case theme.says.style
                 await fetch("!{url_for(theme.says.mode_link)}")
                     .then(res => res.json())
                     .then(data => {
-                        let list = say_strip === -1 || say_strip >= data.length ? data : data.slice(0, say_strip);
+                        let list = data.slice(0, !{theme.says.strip});
                         let aplayer = null;
                         let video = null;
                         let imageBox = null;
@@ -59,7 +58,6 @@ case theme.says.style
     when 2
         script.
             !async function () {
-                let say_strip = !{theme.says.strip};
                 let aplayerRegex = /{aplayer,(.*?),(.*?)}/g;
                 let bilibiliRegex = /{bilibili,(.*?)}/g;
                 let playerRegex = /{player,(.*?)}/g;
@@ -69,7 +67,7 @@ case theme.says.style
                 await fetch("!{url_for(theme.says.mode_link)}")
                     .then(res => res.json())
                     .then(data => {
-                        let list = say_strip === -1 || say_strip >= data.length ? data : data.slice(0, say_strip);
+                        let list = data.slice(0, !{theme.says.strip})
                         let aplayer = null;
                         let video = null;
                         let imageBox = null;

From dce3e4818bad1771cdbbaf4e50db909e9a1ca798 Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sat, 27 Jan 2024 17:41:57 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8feat:=20update=20about=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                               |   6 +-
 languages/en-US.yml                       |   2 +-
 languages/zh-CN.yml                       |   2 +-
 layout/404.pug                            |   2 +-
 layout/includes/head.pug                  |   2 +-
 layout/includes/page/about.pug            |   2 +-
 source/css/_layout/basic.styl             |   7 +-
 source/css/_page/about.styl               | 773 ----------------------
 source/css/_page/about/author.styl        |  94 +++
 source/css/_page/about/buff.styl          |  34 +
 source/css/_page/about/careers.styl       |  27 +
 source/css/_page/about/contentinfo.styl   |  78 +++
 source/css/_page/about/game.styl          |  41 ++
 source/css/_page/about/index.styl         |  40 +-
 source/css/_page/about/like.styl          |  29 +
 source/css/_page/about/maxim.styl         |  23 +
 source/css/_page/about/myphoto.styl       |  34 +
 source/css/_page/about/oneself.styl       |  91 +++
 source/css/_page/about/personalities.styl |  25 +
 source/css/_page/about/reward.styl        | 113 ++++
 source/css/_page/about/skills.styl        |  75 +++
 source/css/_page/about/statistic.styl     |  55 ++
 source/css/_page/index.styl               |  22 +-
 23 files changed, 789 insertions(+), 788 deletions(-)
 delete mode 100644 source/css/_page/about.styl
 create mode 100644 source/css/_page/about/author.styl
 create mode 100644 source/css/_page/about/buff.styl
 create mode 100644 source/css/_page/about/careers.styl
 create mode 100644 source/css/_page/about/contentinfo.styl
 create mode 100644 source/css/_page/about/game.styl
 create mode 100644 source/css/_page/about/like.styl
 create mode 100644 source/css/_page/about/maxim.styl
 create mode 100644 source/css/_page/about/myphoto.styl
 create mode 100644 source/css/_page/about/oneself.styl
 create mode 100644 source/css/_page/about/personalities.styl
 create mode 100644 source/css/_page/about/reward.styl
 create mode 100644 source/css/_page/about/skills.styl
 create mode 100644 source/css/_page/about/statistic.styl

diff --git a/_config.yml b/_config.yml
index 3c79f4ac..97fd865b 100644
--- a/_config.yml
+++ b/_config.yml
@@ -404,7 +404,7 @@ aside:
 errorpage:
   # 图片
   # image
-  img: https://npm.elemecdn.com/wzheo-absolute/image/source/404.png
+  img: https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif
   # 文字
   # text
   text: =awa= 页面走丢了
@@ -412,10 +412,6 @@ errorpage:
   # Recommended article list
   recommendList: true
 
-# 关于页
-# about page
-about: false
-
 # 即刻说说页
 # jike says page
 # 前置要求：需配置即刻说说页面
diff --git a/languages/en-US.yml b/languages/en-US.yml
index d2fa6a29..4e3a133e 100755
--- a/languages/en-US.yml
+++ b/languages/en-US.yml
@@ -19,7 +19,7 @@ page:
   tags: All tags
   categories: All categories
   archives: Archives
-  echarts: Echarts
+  404: Page not found
 
 home:
   bannertext: Just browsing
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 55f417de..17065a8f 100755
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -19,7 +19,7 @@ page:
   tags: 全部标签
   categories: 全部分类
   archives: 文章
-  echarts: 博客统计
+  404: 页面没有找到
 
 nav:
   site_name_title: 返回博客主页
diff --git a/layout/404.pug b/layout/404.pug
index b5d9e070..5b4e27ac 100644
--- a/layout/404.pug
+++ b/layout/404.pug
@@ -14,7 +14,7 @@ block content
     if theme.errorpage.recommendList
         .aside-list
             .aside-list-group
-                each post, index in site.posts.sort('-date').data
+                each post, index in site.posts.sort('-date').data.slice(0, 6)
                     if index >= 5
                         break
                     .aside-list-item
diff --git a/layout/includes/head.pug b/layout/includes/head.pug
index 9eb10721..450bac7e 100644
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -3,7 +3,7 @@
 - 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 (page.type === '404') title = _p('page.404')
 - else if (page.type === 'tags') title = _p('page.tags')
 - else if (page.type === 'categories') title = _p('page.categories')
 - else if (is_post() || is_page()) title = page.title
diff --git a/layout/includes/page/about.pug b/layout/includes/page/about.pug
index 3bd2ac31..1747ca47 100644
--- a/layout/includes/page/about.pug
+++ b/layout/includes/page/about.pug
@@ -1,4 +1,4 @@
-if theme.about && site.data.about
+if site.data.about
     #about-page
         include ../widgets/page/about/authorinfo
         include ../widgets/page/about/contentinfo
diff --git a/source/css/_layout/basic.styl b/source/css/_layout/basic.styl
index c4fd7deb..acb55273 100644
--- a/source/css/_layout/basic.styl
+++ b/source/css/_layout/basic.styl
@@ -295,4 +295,9 @@ table thead
   background var(--sco-secondbg)
 
 b, strong
-  color var(--sco-lighttext)
\ No newline at end of file
+  color var(--sco-lighttext)
+
+.button--animated
+  border-radius 8px
+  transition .3s
+  position relative
\ No newline at end of file
diff --git a/source/css/_page/about.styl b/source/css/_page/about.styl
deleted file mode 100644
index 13964e35..00000000
--- a/source/css/_page/about.styl
+++ /dev/null
@@ -1,773 +0,0 @@
-#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
-        &:first-child,
-        &:last-child
-          margin-right -16px
-
-    .author-tag-right
-      display flex
-      flex-direction column
-      align-items flex-start
-
-      .author-tag
-        &:first-child,
-        &:last-child
-          margin-left -16px
-
-    +maxWidth768()
-      .author-tag-left, .author-tag-right
-        display none
-
-    .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
-      transition .3s
-
-      &:hover
-        transform scale(1.1)
-
-      +maxWidth768()
-        width 120px
-        height 120px
-
-        &::before
-          bottom -5px
-          right -5px
-
-      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
-
-  .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
-
-    .inline-word
-      word-break keep-all
-      white-space nowrap
-
-  .aboutsiteTips
-    display flex
-    justify-content center
-    align-items flex-start
-    flex-direction column
-    width 39%
-
-    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)
-
-  .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 20px
-      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.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.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.personalities
-    overflow hidden
-    position relative
-    width 59%
-    +maxWidth768()
-      min-height 360px
-
-    .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
-
-      +maxWidth768()
-        right -70px
-
-    &:hover
-      .image
-        transform rotate(-10deg)
-
-  .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
-
-      span:first-child
-        opacity 0.6
-        margin-bottom 8px
-
-    .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
-
-      span:first-child
-        opacity 0.6
-        margin-bottom 8px
-
-    .title1
-      opacity .8
-      font-size .6rem
-      margin-bottom .5rem
-
-  .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
-
-  .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
-
-  .author-content-item.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
-
-  .author-content-item.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
-
-  .author-content-item
-    .card-content
-      z-index 2
-
-  .about-statistic
-    min-height 380px
-    width 39%
-    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
-
-    #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
-
-    .banner-button
-      background var(--sco-white-op)
-
-    .banner-button:hover
-      background var(--sco-theme)
-
-  .author-content-item-group
-    &.column
-      display flex
-      flex-direction column
-      width 49%
-      justify-content space-between
-
-      +maxWidth768()
-        width 100% !important
-
-    &.mapAndInfo
-      width 59%
-
-  .author-content-item
-    +minWidth1300()
-      animation slide-in .6s 0s backwards
-
-    &.map
-      background var(--site-about-oneself-map--light) no-repeat center
-      min-height 160px
-      max-height 400px
-      position relative
-      overflow hidden
-      margin-bottom 0.5rem
-      height 60%
-      background-size 100%
-      transition 1s ease-in-out
-
-      .map-title
-        position absolute
-        bottom 0
-        left 0
-        width 100%
-        background var(--sco-maskbg)
-        padding 0.5rem 2rem
-        backdrop-filter saturate(180%) blur(20px)
-        transition 1s ease-in-out
-        font-size 20px
-        transform translateZ(0)
-
-        +maxWidth768()
-          padding 1rem
-
-        b
-          color var(--sco-fontcolor)
-
-      +maxWidth768()
-        margin-bottom 0
-
-      [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%
-
-  .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%
-
-    +maxWidth1300()
-      height 70%
-
-    div
-      display flex
-      flex-direction column
-      margin .5rem 2rem .5rem 0
-
-    .selfInfo-title
-      opacity .8
-      font-size .6rem
-      line-height 1
-      margin-bottom 8px
-
-    .selfInfo-content
-      font-weight 700
-      font-size 34px
-      line-height 1
-
-  .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
-
-  .author-content-item
-    &.single.reward
-      .author-content-item
-        .author-content-item-title
-          color var(--sco-red)
-
-      .reward-list-updateDate
-        color var(--sco-gray)
-        font-size 14px
-
-      .author-content-item-description
-        font-size 16px
-        margin-top .5rem
-
-      .reward-list-all
-        display flex
-        flex-wrap wrap
-        flex-direction row
-        margin 1rem -.25rem .5rem
-
-        .post-reward
-          position absolute
-          right 2rem
-          top 2rem
-
-          .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
-
-          .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
-
-            +maxWidth768()
-              display none
-
-          &:hover
-            .reward-button
-              filter brightness(1.1)
-
-        .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
-
-          +maxWidth1200()
-            width calc((100% / 4) - .5rem)
-
-          +maxWidth900()
-            width calc((100% / 2) - .5rem)
-
-          +maxWidth768()
-            width 100%
-
-          .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-tips
-      p
-        font-size 12px
-        color var(--sco-secondtext)
-
-+maxWidth1300()
-  .author-content-item
-    animation slide-in .6s 0s backwards
-
-.author-content
-  display flex
-  flex-wrap wrap
-  justify-content space-between
-  width 100%
-  margin-top 1rem
-  +maxWidth768()
-    margin-top 0
-
-  .author-content-item
-    +maxWidth768()
-      width 100% !important
-      margin-top 1rem
-      padding 1rem
\ No newline at end of file
diff --git a/source/css/_page/about/author.styl b/source/css/_page/about/author.styl
new file mode 100644
index 00000000..493ccdb2
--- /dev/null
+++ b/source/css/_page/about/author.styl
@@ -0,0 +1,94 @@
+#about-page
+  .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
+        &:first-child,
+        &:last-child
+          margin-right -16px
+
+    .author-tag-right
+      display flex
+      flex-direction column
+      align-items flex-start
+
+      .author-tag
+        &:first-child,
+        &:last-child
+          margin-left -16px
+
+    +maxWidth768()
+      .author-tag-left, .author-tag-right
+        display none
+
+    .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
+      transition .3s
+
+      &:hover
+        transform scale(1.1)
+
+      +maxWidth768()
+        width 120px
+        height 120px
+
+        &::before
+          bottom -5px
+          right -5px
+
+      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
\ No newline at end of file
diff --git a/source/css/_page/about/buff.styl b/source/css/_page/about/buff.styl
new file mode 100644
index 00000000..111eebb1
--- /dev/null
+++ b/source/css/_page/about/buff.styl
@@ -0,0 +1,34 @@
+#about-page
+  .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
+
+      span:first-child
+        opacity 0.6
+        margin-bottom 8px
+
+    .title1
+      opacity .8
+      font-size .6rem
+      margin-bottom .5rem
\ No newline at end of file
diff --git a/source/css/_page/about/careers.styl b/source/css/_page/about/careers.styl
new file mode 100644
index 00000000..87af8687
--- /dev/null
+++ b/source/css/_page/about/careers.styl
@@ -0,0 +1,27 @@
+#about-page
+  .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)
\ No newline at end of file
diff --git a/source/css/_page/about/contentinfo.styl b/source/css/_page/about/contentinfo.styl
new file mode 100644
index 00000000..97040eee
--- /dev/null
+++ b/source/css/_page/about/contentinfo.styl
@@ -0,0 +1,78 @@
+#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%
+
+    .title1
+      opacity .8
+      line-height 1.3
+
+    .title2
+      font-size 36px
+      font-weight 700
+      line-height 1.1
+      margin .5rem 0
+
+    .inline-word
+      word-break keep-all
+      white-space nowrap
+
+  .aboutsiteTips
+    display flex
+    justify-content center
+    align-items flex-start
+    flex-direction column
+    width 39%
+
+    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)
\ No newline at end of file
diff --git a/source/css/_page/about/game.styl b/source/css/_page/about/game.styl
new file mode 100644
index 00000000..6256fe83
--- /dev/null
+++ b/source/css/_page/about/game.styl
@@ -0,0 +1,41 @@
+#about-page
+  .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
+
+  .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
\ No newline at end of file
diff --git a/source/css/_page/about/index.styl b/source/css/_page/about/index.styl
index 4d16bbc3..a364158b 100644
--- a/source/css/_page/about/index.styl
+++ b/source/css/_page/about/index.styl
@@ -1 +1,39 @@
-@import "./tenyear.styl"
\ No newline at end of file
+#about-page
+  display flex
+  padding-top 1rem
+  flex-direction column
+  align-items center
+
+  .author-title
+    font-size 2rem
+    font-weight 700
+    margin 1rem 0
+    line-height 1
+
+@import "tenyear"
+
+@import "author"
+
+@import "contentinfo"
+
+@import "skills"
+
+@import "oneself"
+
+@import "buff"
+
+@import "game"
+
+@import "personalities"
+
+@import "myphoto"
+
+@import "careers"
+
+@import "like"
+
+@import "maxim"
+
+@import "statistic"
+
+@import "reward"
\ No newline at end of file
diff --git a/source/css/_page/about/like.styl b/source/css/_page/about/like.styl
new file mode 100644
index 00000000..c584391c
--- /dev/null
+++ b/source/css/_page/about/like.styl
@@ -0,0 +1,29 @@
+#about-page
+  .author-content-item.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
+
+  .author-content-item.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
\ No newline at end of file
diff --git a/source/css/_page/about/maxim.styl b/source/css/_page/about/maxim.styl
new file mode 100644
index 00000000..933e7c81
--- /dev/null
+++ b/source/css/_page/about/maxim.styl
@@ -0,0 +1,23 @@
+#about-page
+  .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
+
+      span:first-child
+        opacity 0.6
+        margin-bottom 8px
+
+    .title1
+      opacity .8
+      font-size .6rem
+      margin-bottom .5rem
\ No newline at end of file
diff --git a/source/css/_page/about/myphoto.styl b/source/css/_page/about/myphoto.styl
new file mode 100644
index 00000000..892420b3
--- /dev/null
+++ b/source/css/_page/about/myphoto.styl
@@ -0,0 +1,34 @@
+#about-page
+  .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)
\ No newline at end of file
diff --git a/source/css/_page/about/oneself.styl b/source/css/_page/about/oneself.styl
new file mode 100644
index 00000000..7f33b52c
--- /dev/null
+++ b/source/css/_page/about/oneself.styl
@@ -0,0 +1,91 @@
+#about-page
+  .author-content-item-group
+    &.column
+      display flex
+      flex-direction column
+      width 49%
+      justify-content space-between
+
+      +maxWidth768()
+        width 100% !important
+
+    &.mapAndInfo
+      width 59%
+
+  .author-content-item
+    +minWidth1300()
+      animation slide-in .6s 0s backwards
+
+    &.map
+      background var(--site-about-oneself-map--light) no-repeat center
+      min-height 160px
+      max-height 400px
+      position relative
+      overflow hidden
+      margin-bottom 0.5rem
+      height 60%
+      background-size 100%
+      transition 1s ease-in-out
+
+      .map-title
+        position absolute
+        bottom 0
+        left 0
+        width 100%
+        background var(--sco-maskbg)
+        padding 0.5rem 2rem
+        backdrop-filter saturate(180%) blur(20px)
+        transition 1s ease-in-out
+        font-size 20px
+        transform translateZ(0)
+
+        +maxWidth768()
+          padding 1rem
+
+        b
+          color var(--sco-fontcolor)
+
+      +maxWidth768()
+        margin-bottom 0
+
+      [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%
+
+  .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%
+
+    +maxWidth1300()
+      height 70%
+
+    div
+      display flex
+      flex-direction column
+      margin .5rem 2rem .5rem 0
+
+    .selfInfo-title
+      opacity .8
+      font-size .6rem
+      line-height 1
+      margin-bottom 8px
+
+    .selfInfo-content
+      font-weight 700
+      font-size 34px
+      line-height 1
\ No newline at end of file
diff --git a/source/css/_page/about/personalities.styl b/source/css/_page/about/personalities.styl
new file mode 100644
index 00000000..382dd5b4
--- /dev/null
+++ b/source/css/_page/about/personalities.styl
@@ -0,0 +1,25 @@
+.author-content-item.personalities
+  overflow hidden
+  position relative
+  width 59%
+  +maxWidth768()
+    min-height 360px
+
+  .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
+
+    +maxWidth768()
+      right -70px
+
+  &:hover
+    .image
+      transform rotate(-10deg)
\ No newline at end of file
diff --git a/source/css/_page/about/reward.styl b/source/css/_page/about/reward.styl
new file mode 100644
index 00000000..77e87c92
--- /dev/null
+++ b/source/css/_page/about/reward.styl
@@ -0,0 +1,113 @@
+#about-page
+  .author-content-item
+    &.single.reward
+      .author-content-item
+        .author-content-item-title
+          color var(--sco-red)
+
+      .reward-list-updateDate
+        color var(--sco-gray)
+        font-size 14px
+
+      .author-content-item-description
+        font-size 16px
+        margin-top .5rem
+
+      .reward-list-all
+        display flex
+        flex-wrap wrap
+        flex-direction row
+        margin 1rem -.25rem .5rem
+
+        .post-reward
+          position absolute
+          right 2rem
+          top 2rem
+
+          .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
+
+          .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
+
+            +maxWidth768()
+              display none
+
+          &:hover
+            .reward-button
+              filter brightness(1.1)
+
+        .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
+
+          +maxWidth1200()
+            width calc((100% / 4) - .5rem)
+
+          +maxWidth900()
+            width calc((100% / 2) - .5rem)
+
+          +maxWidth768()
+            width 100%
+
+          .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-tips
+      p
+        font-size 12px
+        color var(--sco-secondtext)
\ No newline at end of file
diff --git a/source/css/_page/about/skills.styl b/source/css/_page/about/skills.styl
new file mode 100644
index 00000000..84fe204d
--- /dev/null
+++ b/source/css/_page/about/skills.styl
@@ -0,0 +1,75 @@
+#about-page
+  .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 20px
+      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
\ No newline at end of file
diff --git a/source/css/_page/about/statistic.styl b/source/css/_page/about/statistic.styl
new file mode 100644
index 00000000..53762000
--- /dev/null
+++ b/source/css/_page/about/statistic.styl
@@ -0,0 +1,55 @@
+#about-page
+  .author-content-item
+    .card-content
+      z-index 2
+
+  .about-statistic
+    min-height 380px
+    width 39%
+    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
+
+    #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
+
+    .banner-button
+      background var(--sco-white-op)
+
+    .banner-button:hover
+      background var(--sco-theme)
\ No newline at end of file
diff --git a/source/css/_page/index.styl b/source/css/_page/index.styl
index 1f0fd83f..ac0ef090 100644
--- a/source/css/_page/index.styl
+++ b/source/css/_page/index.styl
@@ -21,13 +21,29 @@ if hexo-config('says.enable')
 
 @import "links.styl"
 
-if hexo-config('about')
-  @import "about.styl"
-  @import "about/index.styl"
+@import "about/index.styl"
 
 if hexo-config('music.enable')
   @import "music.styl"
 
+.author-content
+  display flex
+  flex-wrap wrap
+  justify-content space-between
+  width 100%
+  margin-top 1rem
+
+  +maxWidth768()
+    margin-top 0
+
+  .author-content-item
+    +maxWidth1300()
+      animation slide-in .6s 0s backwards
+    +maxWidth768()
+      width 100% !important
+      margin-top 1rem
+      padding 1rem
+
 .author-content.author-content-item.sharePage
   height 19rem
   background-size cover

From 9b3a5cb9a619723af76c7eaced4733f315779e1b Mon Sep 17 00:00:00 2001
From: Jose wan <wleelw@sondy.eu.org>
Date: Sat, 27 Jan 2024 17:44:56 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8E=89release:=20update=20v1.4.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复几个bug
---
 languages/en-US.yml | 2 +-
 languages/zh-CN.yml | 2 +-
 package.json        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/languages/en-US.yml b/languages/en-US.yml
index 4e3a133e..d9484c82 100755
--- a/languages/en-US.yml
+++ b/languages/en-US.yml
@@ -71,7 +71,7 @@ search:
 
 head:
   noscript: Please enable JavaScript to view the site
-  console: 'Program: Hexo | Theme: Hexo-Theme-Solitude | Author: WangZhuoSco、YiFeng | Github: https://github.com/DuoSco/Hexo-theme-solitude | Version: v1.4.0 😄'
+  console: 'Program: Hexo | Theme: Hexo-Theme-Solitude | Author: WangZhuoSco、YiFeng | Github: https://github.com/DuoSco/Hexo-theme-solitude | Version: v1.4.1 😄'
 
 aside:
   postcount: 'Posts :'
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 17065a8f..9536d7c8 100755
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -70,7 +70,7 @@ search:
 
 head:
   noscript: 开启JavaScript才能访问本站哦~
-  console: '程序：Hexo | 主题：Hexo-Theme-Solitude | 作者：王卓Sco、亦封 | Github: https://github.com/DuoSco/Hexo-theme-solitude | 版本：v1.4.0 😄'
+  console: '程序：Hexo | 主题：Hexo-Theme-Solitude | 作者：王卓Sco、亦封 | Github: https://github.com/DuoSco/Hexo-theme-solitude | 版本：v1.4.1 😄'
 
 aside:
   postcount: '文章总数 :'
diff --git a/package.json b/package.json
index 55e1d41c..1c26fa87 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-solitude",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A beautiful, powerful, and efficient Hexo theme developed by the DuoSco team",
   "main": "package.json",
   "scripts": {