diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml new file mode 100644 index 0000000..4f260da --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -0,0 +1,73 @@ +name: Bug report +description: Create a report to help us improve +title: '[Bug]: ' + +body: + - type: markdown + attributes: + value: | + 重要：請依照該模板來提交 + Please follow the template to create a new issue + - type: input + id: butterfly-ver + attributes: + label: 使用的 Butterfly 版本？ | What version of Butterfly are you use? + description: 檢視主題的 package.json | Check the theme's package.json + validations: + required: true + + - type: dropdown + id: modify + attributes: + label: 是否修改过主题文件？ || Has the theme files been modified? + options: + - 是 (Yes) + - 不是 (No) + validations: + required: true + + - type: dropdown + id: browser + attributes: + label: 使用的瀏覽器？ || What browse are you using? + options: + - Chrome + - Edge + - Safari + - Opera + - Other + validations: + required: true + + - type: dropdown + id: platform + attributes: + label: 使用的系統？ || What operating system are you using? + options: + - Windows + - macOS + - Linux + - Android + - iOS + - Other + validations: + required: true + + - type: textarea + id: description + attributes: + label: 問題描述 | Describe the bug + description: 請描述你的問題現象 | A clear and concise description of what the bug is. + placeholder: 請儘量提供截圖來定位問題 | If applicable, add screenshots to help explain your problem + value: + validations: + required: true + + - type: input + id: website + attributes: + label: 出現問題網站 | Website + description: 請提供下可復現網站地址 | Please supply a website url which can reproduce problem. + placeholder: + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000..9b338d0 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,22 @@ +blank_issues_enabled: false +contact_links: + - name: Questions about Butterfly + url: https://github.com/jerryc127/hexo-theme-butterfly/discussions + about: 一些使用問題請到 Discussion 詢問。 Please ask questions in Discussion. + + - name: Butterfly Q&A + url: https://butterfly.js.org/posts/98d20436/ + about: Butterfly Q&A + + - name: Telegram + url: https://t.me/bu2fly + about: 'Official Telegram Group' + + - name: QQ 1群 + url: https://jq.qq.com/?_wv=1027&k=KU9105XR + about: '群號 1070540070，不要兩個Q群都添加' + + - name: QQ 2群 + url: https://jq.qq.com/?_wv=1027&k=r1nK0DQz + about: '群號 978221020，不要兩個Q群都添加' + diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml new file mode 100644 index 0000000..3bf7c30 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -0,0 +1,14 @@ +name: Feature request +description: Suggest an idea for this project +title: '[Feature]: ' + +body: + - type: textarea + id: feature-request + attributes: + label: 想要的功能 | What feature do you want? + description: 請描述你需要的新功能 | A clear and concise description of what the feature is. + placeholder: + value: + validations: + require: true \ No newline at end of file diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 0000000..d68365d --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,19 @@ +name: npm publish + +on: + release: + types: [created] +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + # Setup .npmrc file to publish to npm + - uses: actions/setup-node@v1 + with: + node-version: '12.x' + registry-url: 'https://registry.npmjs.org' + - run: npm install + - run: npm publish + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} \ No newline at end of file diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 0000000..a50d9de --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,19 @@ +name: 'Close stale issues and PRs' +on: + schedule: + - cron: '30 1 * * *' + +jobs: + stale: + runs-on: ubuntu-latest + steps: + - uses: actions/stale@v5 + with: + days-before-issue-stale: 30 + days-before-pr-stale: -1 + days-before-close: 7 + stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.' + close-pr-message: 'This issue has not seen any activity since it was marked stale. Closing.' + stale-issue-label: 'Stale' + exempt-issue-labels: 'pinned,bug,enhancement,documentation,Plan' + operations-per-run: 1000 \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/LICENSE @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..8b7b6e3 --- /dev/null +++ b/README.md @@ -0,0 +1,113 @@ +
+ Language: + 🇺🇸 + 🇨🇳 +
+ +# hexo-theme-butterfly + +![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/master?color=%231ab1ad&label=master) +![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev) +![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff) +![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83c) +![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531) + +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png) + +Demo: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [CrazyWong](https://crazywong.com/) + +Docs: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/) + +Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) theme. + +## 💻 Installation + +### GIT + +> If you are in Mainland China, you can download in [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git) + +Stable branch [recommend]: + +``` +git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly +``` + +Dev branch: + +``` +git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly +``` + +### NPM + +> It supports Hexo 5.0.0 or later + +In Hexo site root directory + +```powershell +npm i hexo-theme-butterfly +``` + +## ⚙ Configuration + + Set theme in the hexo work folder's root config file `_config.yml`: + +> theme: butterfly + + If you don't have pug & stylus renderer, try this: + +> npm install hexo-renderer-pug hexo-renderer-stylus + +## 🎉 Features + +- [x] Card UI Design +- [X] Support sub-menu +- [x] Two Column designs +- [x] Responsive Web Design +- [x] Dark Mode +- [x] Pjax +- [x] Read Mode +- [x] Conversion between Traditional and Simplified Chinese +- [X] TOC catalog is available for both computers and mobile phones +- [X] Color themes (darker/pale night/light/ocean/mac/mac light), support custom colors +- [X] Code Blocks (Display code language/close or expand Code Blocks/Copy Button/word wrap) +- [X] Disable copy/Add a Copyright Notice to the Copied Text +- [X] Search (Algolia SearchZ/Local Search) +- [x] Mathjax and Katex +- [x] Built-in 404 page +- [x] WordCount +- [x] Related articles +- [x] Displays outdated notice for a post +- [x] Share (AddThis/Sharejs/Addtoany) +- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk) +- [x] Multiple Comment System Support +- [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp/messenger) +- [x] Web analytics +- [x] Google AdSense +- [x] Webmaster Verification +- [x] Change website colour scheme +- [x] Typewriter Effect: activate_power_mode +- [x] Background effects (Canvas ribbon/canvas_ribbon_piao/canvas_nest) +- [x] Mouse click effects (Fireworks/Heart/Text) +- [x] Preloader/Loading Animation/pace.js +- [x] Busuanzi visitor counter +- [x] Medium Zoom/Fancybox +- [x] Mermaid +- [x] Justified Gallery +- [x] Lazyload images +- [x] Instantpage/Pangu/Snackbar notification toast/PWA...... + +## ✨ Contributors + + + + + +## 📷 Screenshots + +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg) +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg) +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg) +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg) +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-1.png) +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png) \ No newline at end of file diff --git a/README_CN.md b/README_CN.md new file mode 100644 index 0000000..1dcfc96 --- /dev/null +++ b/README_CN.md @@ -0,0 +1,113 @@ +
+ 語言: + 中文 + 英文 +
+ +# hexo-theme-butterfly + +![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/master?color=%231ab1ad&label=master) +![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev) +![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff) +![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83c) +![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531) + +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png) + +預覽: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [CrazyWong](https://crazywong.com/) + +文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/) + +一款基於[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主題 + +## 💻 安裝 + +### Git 安裝 + +> 本倉庫同時上傳到 [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git)，如果你訪問 Github 緩慢，可從 Gitee 中下載。 + +在博客根目錄裡安裝穩定版【推薦】 + +```powershell +git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly +``` + +如果想要安裝比較新的dev分支，可以 + +```powershell +git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly +``` + +### npm 安裝 + +> 此方法只支持Hexo 5.0.0以上版本 + +在博客根目錄裡 + +```powershell +npm i hexo-theme-butterfly +``` + +## ⚙ 應用主題 + +修改hexo配置文件`_config.yml`，把主題改為`Butterfly` + +``` +theme: butterfly +``` + +>如果你沒有pug以及stylus的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus --save + +## 🎉 特色 + +- [x] 卡片化設計 +- [X] 支持二級目錄 +- [x] 雙欄設計 +- [x] 響應式主題 +- [x] 夜間模式 +- [x] Pjax +- [x] 文章閲讀模式 +- [x] 簡體和繁體轉換 +- [X] 電腦和手機都可查看TOC目錄 +- [X] 內置多種代碼配色（darker/pale night/light/ocean/mac/mac light），可自定義代碼配色 +- [X] 代碼塊顯示代碼語言/關閉或展開代碼塊/代碼複製/代碼自動換行 +- [X] 可關閉文字複製/可開啟內容複製增加版權信息） +- [X] 兩種搜索（Algolia搜索和本地搜索） +- [x] Mathjax 和 Katex +- [x] 內置404頁面 +- [x] 顯示字數統計 +- [x] 顯示相關文章 +- [x] 過期文章提醒 +- [x] 多種分享系統（AddThis/Sharejs/Addtoany） +- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk） +- [x] 支持雙評論部署 +- [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp/messenger） +- [x] 多種分析系統 +- [x] 谷歌廣告/手動廣告位置 +- [x] 各種站長驗證（Google/Bing/Baidu/360/Yandex） +- [x] 修改網站配色 +- [x] 打字特效 activate_power_mode +- [x] 多種背景特效（靜止彩帶/動態彩帶/Canvas Nest） +- [x] 多種鼠標點擊特效（煙花/文字/愛心） +- [x] 內置一種 Preloader 加載動畫和 pace.js 加載動畫條 +- [x] 不蒜子訪問統計 +- [x] 兩種大圖模式（Medium Zoom/Fancybox） +- [x] Mermaid 圖表顯示 +- [x] 照片牆 +- [x] 圖片懶加載 +- [x] Instantpage/Pangu/Snackbar彈窗/PWA...... + +## ✨ 貢獻者 + + + + + +## 📷 截圖 + +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg) +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg) +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg) +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg) +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-1.png) +![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png) diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..5153937 --- /dev/null +++ b/_config.yml @@ -0,0 +1,955 @@ +# Main menu navigation (導航目錄) +# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單 +# -------------------------------------- + +menu: + # Home: / || fas fa-home + # Archives: /archives/ || fas fa-archive + # Tags: /tags/ || fas fa-tags + # Categories: /categories/ || fas fa-folder-open + # List||fas fa-list: + # Music: /music/ || fas fa-music + # Movie: /movies/ || fas fa-video + # Link: /link/ || fas fa-link + # About: /about/ || fas fa-heart + +# Code Blocks (代碼相關) +# -------------------------------------- + +highlight_theme: light # darker / pale night / light / ocean / mac / mac light / false +highlight_copy: true # copy button +highlight_lang: true # show the code language +highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button +highlight_height_limit: false # unit: px +code_word_wrap: false + +# copy settings +# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息) +copy: + enable: true + copyright: + enable: false + limit_count: 50 + +# social settings (社交圖標設置) +# formal: +# icon: link || the description +social: + # fab fa-github: https://github.com/xxxxx || Github + # fas fa-envelope: mailto:xxxxxx@gmail.com || Email + +# search (搜索) +# see https://butterfly.js.org/posts/ceeb73f/#搜索系統 +# -------------------------------------- + +# Algolia search +algolia_search: + enable: false + hits: + per_page: 6 + +# Local search +local_search: + enable: false + preload: false + CDN: + +# Math (數學) +# -------------------------------------- +# About the per_page +# if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js) +# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter) +# (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true) + +# MathJax +mathjax: + enable: false + per_page: false + +# KaTeX +katex: + enable: false + per_page: false + hide_scrollbar: true + +# Image (圖片設置) +# -------------------------------------- + +# Favicon（網站圖標） +favicon: /img/favicon.png + +# Avatar (頭像) +avatar: + img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png + effect: false + +# Disable all banner image +disable_top_img: false + +# The banner image of home page +index_img: + +# If the banner of page not setting, it will show the top_img +default_top_img: + +# The banner image of archive page +archive_img: + +# If the banner of tag page not setting, it will show the top_img +# note: tag page, not tags page (子標籤頁面的 top_img) +tag_img: + +# The banner image of tag page +# format: +# - tag name: xxxxx +tag_per_img: + +# If the banner of category page not setting, it will show the top_img +# note: category page, not categories page (子分類頁面的 top_img) +category_img: + +# The banner image of category page +# format: +# - category name: xxxxx +category_per_img: + +cover: + # display the cover or not (是否顯示文章封面) + index_enable: true + aside_enable: true + archives_enable: true + # the position of cover in home page (封面顯示的位置) + # left/right/both + position: both + # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示) + default_cover: + # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg + +# Replace Broken Images (替換無法顯示的圖片) +error_img: + flink: /img/friend_404.gif + post_page: /img/404.jpg + +# A simple 404 page +error_404: + enable: false + subtitle: 'Page Not Found' + background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png + +post_meta: + page: # Home Page + date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示 + date_format: date # date/relative 顯示日期還是相對日期 + categories: true # true or false 主頁是否顯示分類 + tags: false # true or false 主頁是否顯示標籤 + label: true # true or false 顯示描述性文字 + post: + date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示 + date_format: date # date/relative 顯示日期還是相對日期 + categories: true # true or false 文章頁是否顯示分類 + tags: true # true or false 文章頁是否顯示標籤 + label: true # true or false 顯示描述性文字 + +# wordcount (字數統計) +# see https://butterfly.js.org/posts/ceeb73f/#字數統計 +wordcount: + enable: false + post_wordcount: true + min2read: true + total_wordcount: true + +# Display the article introduction on homepage +# 1: description +# 2: both (if the description exists, it will show description, or show the auto_excerpt) +# 3: auto_excerpt (default) +# false: do not show the article introduction +index_post_content: + method: 3 + length: 500 # if you set method to 2 or 3, the length need to config + +# anchor +anchor: + button: + enable: false + always_show: false + icon: # the unicode value of Font Awesome icon, such as '\3423' + auto_update: false # when you scroll in post, the URL will update according to header id. + +# Post +# -------------------------------------- + +# toc (目錄) +toc: + post: true + page: false + number: true + expand: false + style_simple: false # for post + +post_copyright: + enable: true + decode: false + author_href: + license: CC BY-NC-SA 4.0 + license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ + +# Sponsor/reward +reward: + enable: false + QR_code: + # - img: /img/wechat.jpg + # link: + # text: wechat + # - img: /img/alipay.jpg + # link: + # text: alipay + +# Post edit +# Easily browse and edit blog source code online. +post_edit: + enable: false + # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/ + # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/ + url: + +# Related Articles +related_post: + enable: true + limit: 6 # Number of posts displayed + date_type: created # or created or updated 文章日期顯示創建日或者更新日 + +# figcaption (圖片描述文字) +photofigcaption: false + +# post_pagination (分頁) +# value: 1 || 2 || false +# 1: The 'next post' will link to old post +# 2: The 'next post' will link to new post +# false: disable pagination +post_pagination: 1 + +# Displays outdated notice for a post (文章過期提醒) +noticeOutdate: + enable: false + style: flat # style: simple/flat + limit_day: 500 # When will it be shown + position: top # position: top/bottom + message_prev: It has been + message_next: days since the last update, the content of the article may be outdated. + +# Share System (分享功能) +# -------------------------------------- + +# AddThis +# https://www.addthis.com/ +addThis: + enable: false + pubid: + +# Share.js +# https://github.com/overtrue/share.js +sharejs: + enable: true + sites: facebook,twitter,wechat,weibo,qq + +# AddToAny +# https://www.addtoany.com/ +addtoany: + enable: false + item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link + +# Comments System +# -------------------------------------- + +comments: + # Up to two comments system, the first will be shown as default + # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk + use: # Valine,Disqus + text: true # Display the comment name next to the button + # lazyload: The comment system will be load when comment element enters the browser's viewport. + # If you set it to true, the comment count will be invalid + lazyload: false + count: false # Display comment count in post's top_img + card_post_count: false # Display comment count in Home Page + +# disqus +# https://disqus.com/ +disqus: + shortname: + apikey: # For newest comments widget + +# Alternative Disqus - Render comments with Disqus API +# DisqusJS 評論系統，可以實現在網路審查地區載入 Disqus 評論列表，兼容原版 +# https://github.com/SukkaW/DisqusJS +disqusjs: + shortname: + apikey: + option: + +# livere (來必力) +# https://www.livere.com/ +livere: + uid: + +# gitalk +# https://github.com/gitalk/gitalk +gitalk: + client_id: + client_secret: + repo: + owner: + admin: + option: + +# valine +# https://valine.js.org +valine: + appId: # leancloud application app id + appKey: # leancloud application app key + avatar: monsterid # gravatar style https://valine.js.org/#/avatar + serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in) + bg: # valine background + visitor: false + option: + +# waline - A simple comment system with backend support fork from Valine +# https://waline.js.org/ +waline: + serverURL: # Waline server address url + bg: # waline background + pageview: false + option: + +# utterances +# https://utteranc.es/ +utterances: + repo: + # Issue Mapping: pathname/url/title/og:title + issue_term: pathname + # Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark + light_theme: github-light + dark_theme: photon-dark + +# Facebook Comments Plugin +# https://developers.facebook.com/docs/plugins/comments/ +facebook_comments: + app_id: + user_id: # optional + pageSize: 10 # The number of comments to show + order_by: social # social/time/reverse_time + lang: zh_TW # Language en_US/zh_CN/zh_TW and so on + +# Twikoo +# https://github.com/imaegoo/twikoo +twikoo: + envId: + region: + visitor: false + option: + +# Giscus +# https://giscus.app/ +giscus: + repo: + repo_id: + category_id: + theme: + light: light + dark: dark + option: + +# Remark42 +# https://remark42.com/docs/configuration/frontend/ +remark42: + host: # Your Host URL + siteId: # Your Site ID + option: + +# Artalk +# https://artalk.js.org/guide/frontend/config.html +artalk: + server: + site: + visitor: false + option: + +# Chat Services +# -------------------------------------- + +# Chat Button [recommend] +# It will create a button in the bottom right corner of website, and hide the origin button +chat_btn: false + +# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down +chat_hide_show: false + +# chatra +# https://chatra.io/ +chatra: + enable: false + id: + +# tidio +# https://www.tidio.com/ +tidio: + enable: false + public_key: + +# daovoice +# http://daovoice.io/ +daovoice: + enable: false + app_id: + +# gitter +# https://gitter.im/ +gitter: + enable: false + room: + +# crisp +# https://crisp.chat/en/ +crisp: + enable: false + website_id: + +# messenger +# https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/ +messenger: + enable: false + pageID: + lang: zh_TW # Language en_US/zh_CN/zh_TW and so on + +# Footer Settings +# -------------------------------------- +footer: + owner: + enable: true + since: 2020 + custom_text: + copyright: true # Copyright of theme and framework + +# Analysis +# -------------------------------------- + +# Baidu Analytics +# https://tongji.baidu.com/web/welcome/login +baidu_analytics: + +# Google Analytics +# https://analytics.google.com/analytics/web/ +google_analytics: + +# CNZZ Analytics +# https://www.umeng.com/ +cnzz_analytics: + +# Cloudflare Analytics +# https://www.cloudflare.com/zh-tw/web-analytics/ +cloudflare_analytics: + +# Microsoft Clarity +# https://clarity.microsoft.com/ +microsoft_clarity: + +# Advertisement +# -------------------------------------- + +# Google Adsense (谷歌廣告) +google_adsense: + enable: false + auto_ads: true + js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js + client: + enable_page_level_ads: true + +# Insert ads manually (手動插入廣告) +# ad: +# index: +# aside: +# post: + +# Verification (站長驗證) +# -------------------------------------- + +site_verification: + # - name: google-site-verification + # content: xxxxxx + # - name: baidu-site-verification + # content: xxxxxxx + +# Beautify/Effect (美化/效果) +# -------------------------------------- + +# Theme color for customize +# Notice: color value must in double quotes like "#000" or may cause error! + +# theme_color: +# enable: true +# main: "#32C9EB" +# paginator: "#32C9EB" +# button_hover: "#ff7a7a" +# text_selection: "#32C9EB" +# link_color: "#99a9bf" +# meta_color: "#858585" +# hr_color: "#A4D8FA" +# code_foreground: "#F47466" +# code_background: "rgba(27, 31, 35, .05)" +# toc_color: "#32C9EB" +# blockquote_padding_color: "#32C9EB" +# blockquote_background_color: "#32C9EB" +# scrollbar_color: "#32C9EB" +# meta_theme_color_light: "ffffff" +# meta_theme_color_dark: "#0d0d0d" + +# The top_img settings of home page +# default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間) +# The position of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離) +index_site_info_top: +# The height of top_img, eg: 300px/300em/300rem (主頁top_img高度) +index_top_img_height: + +# The user interface setting of category and tag page (category和tag頁的UI設置) +# index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣) +# default - same as archives UI 默認跟archives頁面UI一樣 +category_ui: # 留空或 index +tag_ui: # 留空或 index + +# Website Background (設置網站背景) +# can set it to color or image (可設置圖片 或者 顔色) +# The formal of image: url(http://xxxxxx.com/xxx.jpg) +background: + +# Footer Background +footer_bg: false + +# the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px) +rightside-bottom: + +# Enter transitions (開啓網頁進入效果) +enter_transitions: true + +# Background effects (背景特效) +# -------------------------------------- + +# canvas_ribbon (靜止彩帶背景) +# See: https://github.com/hustcc/ribbon.js +canvas_ribbon: + enable: false + size: 150 + alpha: 0.6 + zIndex: -1 + click_to_change: false + mobile: false + +# Fluttering Ribbon (動態彩帶) +canvas_fluttering_ribbon: + enable: false + mobile: false + +# canvas_nest +# https://github.com/hustcc/canvas-nest.js +canvas_nest: + enable: false + color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.) + opacity: 0.7 # the opacity of line (0~1), default: 0.5. + zIndex: -1 # z-index property of the background, default: -1. + count: 99 # the number of lines, default: 99. + mobile: false + +# Typewriter Effect (打字效果) +# https://github.com/disjukr/activate-power-mode +activate_power_mode: + enable: false + colorful: true # open particle animation (冒光特效) + shake: true # open shake (抖動特效) + mobile: false + +# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效) +fireworks: + enable: false + zIndex: 9999 # -1 or 9999 + mobile: false + +# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心) +click_heart: + enable: false + mobile: false + +# Mouse click effects: words (鼠標點擊效果: 文字) +ClickShowText: + enable: false + text: + # - I + # - LOVE + # - YOU + fontSize: 15px + random: false + mobile: false + +# Default display mode (網站默認的顯示模式) +# light (default) / dark +display_mode: light + +# Beautify (美化頁面顯示) +beautify: + enable: false + field: post # site/post + title-prefix-icon: # '\f0c1' + title-prefix-icon-color: # '#F47466' + +# Global font settings +# Don't modify the following settings unless you know how they work (非必要不要修改) +font: + global-font-size: + code-font-size: + font-family: + code-font-family: + +# Font settings for the site title and site subtitle +# 左上角網站名字 主頁居中網站名字 +blog_title_font: + font_link: + font-family: + +# The setting of divider icon (水平分隔線圖標設置) +hr_icon: + enable: true + icon: # the unicode value of Font Awesome icon, such as '\3423' + icon-top: + +# the subtitle on homepage (主頁subtitle) +subtitle: + enable: false + # Typewriter Effect (打字效果) + effect: true + # Effect Speed Options (打字效果速度參數) + startDelay: 300 # time before typing starts in milliseconds + typeSpeed: 150 # type speed in milliseconds + backSpeed: 50 # backspacing speed in milliseconds + # loop (循環打字) + loop: true + # source 調用第三方服務 + # source: false 關閉調用 + # source: 1 調用一言網的一句話（簡體） https://hitokoto.cn/ + # source: 2 調用一句網（簡體） http://yijuzhan.com/ + # source: 3 調用今日詩詞（簡體） https://www.jinrishici.com/ + # subtitle 會先顯示 source , 再顯示 sub 的內容 + source: false + # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字 + sub: + +# Loading Animation (加載動畫) +preloader: + enable: false + # source + # 1. fullpage-loading + # 2. pace (progress bar) + source: 1 + # pace theme (see https://codebyzach.github.io/pace/) + pace_css_url: + +# aside (側邊欄) +# -------------------------------------- + +aside: + enable: true + hide: false + button: true + mobile: true # display on mobile + position: right # left or right + display: + archive: true + tag: true + category: true + card_author: + enable: true + description: + button: + enable: true + icon: fab fa-github + text: Follow Me + link: https://github.com/xxxxxx + card_announcement: + enable: true + content: This is my Blog + card_recent_post: + enable: true + limit: 5 # if set 0 will show all + sort: date # date or updated + sort_order: # Don't modify the setting unless you know how it works + card_categories: + enable: true + limit: 8 # if set 0 will show all + expand: none # none/true/false + sort_order: # Don't modify the setting unless you know how it works + card_tags: + enable: true + limit: 40 # if set 0 will show all + color: false + sort_order: # Don't modify the setting unless you know how it works + card_archives: + enable: true + type: monthly # yearly or monthly + format: MMMM YYYY # eg: YYYY年MM月 + order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending + limit: 8 # if set 0 will show all + sort_order: # Don't modify the setting unless you know how it works + card_webinfo: + enable: true + post_count: true + last_push_date: true + sort_order: # Don't modify the setting unless you know how it works + +# busuanzi count for PV / UV in site +# 訪問人數 +busuanzi: + site_uv: true + site_pv: true + page_pv: true + +# Time difference between publish date and now (網頁運行時間) +# Formal: Month/Day/Year Time or Year/Month/Day Time +runtimeshow: + enable: false + publish_date: + +# Aside widget - Newest Comments +newest_comments: + enable: false + sort_order: # Don't modify the setting unless you know how it works + limit: 6 + storage: 10 # unit: mins, save data to localStorage + avatar: true + +# Bottom right button (右下角按鈕) +# -------------------------------------- + +# Conversion between Traditional and Simplified Chinese (簡繁轉換) +translate: + enable: false + # The text of a button + default: 繁 + # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese） + defaultEncoding: 2 + # Time delay + translateDelay: 0 + # The text of the button when the language is Simplified Chinese + msgToTraditionalChinese: '繁' + # The text of the button when the language is Traditional Chinese + msgToSimplifiedChinese: '簡' + +# Read Mode (閲讀模式) +readmode: true + +# dark mode +darkmode: + enable: true + # Toggle Button to switch dark/light mode + button: true + # Switch dark/light mode automatically (自動切換 dark mode和 light mode) + # autoChangeMode: 1 Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am + # autoChangeMode: 2 Switch dark mode between 6 pm to 6 am + # autoChangeMode: false + autoChangeMode: false + +# Don't modify the following settings unless you know how they work (非必要請不要修改 ) +# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment +# Don't repeat 不要重複 +rightside_item_order: + enable: false + hide: # readmode,translate,darkmode,hideAside + show: # toc,chat,comment + +# Lightbox (圖片大圖查看模式) +# -------------------------------------- +# You can only choose one, or neither (只能選擇一個 或者 兩個都不選) + +# medium-zoom +# https://github.com/francoischalifour/medium-zoom +medium_zoom: false + +# fancybox +# http://fancyapps.com/fancybox/3/ +fancybox: true + +# Tag Plugins settings (標籤外掛) +# -------------------------------------- + +# mermaid +# see https://github.com/mermaid-js/mermaid +mermaid: + enable: false + # built-in themes: default/forest/dark/neutral + theme: + light: default + dark: dark + +# Note (Bootstrap Callout) +note: + # Note tag style values: + # - simple bs-callout old alert style. Default. + # - modern bs-callout new (v2-v3) alert style. + # - flat flat callout style with background, like on Mozilla or StackOverflow. + # - disabled disable all CSS styles import of note tag. + style: flat + icons: true + border_radius: 3 + # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). + # Offset also applied to label tag variables. This option can work with disabled note tag. + light_bg_offset: 0 + +# other +# -------------------------------------- + +# Pjax +# It may contain bugs and unstable, give feedback when you find the bugs. +# https://github.com/MoOx/pjax +pjax: + enable: false + exclude: + # - xxxx + # - xxxx + +# Inject the css and script (aplayer/meting) +aplayerInject: + enable: false + per_page: true + +# Snackbar (Toast Notification 彈窗) +# https://github.com/polonel/SnackBar +# position 彈窗位置 +# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right +snackbar: + enable: false + position: bottom-left + bg_light: '#32C9EB' # The background color of Toast Notification in light mode + bg_dark: '#1f1f1f' # The background color of Toast Notification in dark mode + +# https://instant.page/ +# prefetch (預加載) +instantpage: false + +# https://github.com/vinta/pangu.js +# Insert a space between Chinese character and English character (中英文之間添加空格) +pangu: + enable: false + field: site # site/post + +# Lazyload (圖片懶加載) +# https://github.com/verlok/vanilla-lazyload +lazyload: + enable: false + field: site # site/post + placeholder: + blur: false + +# PWA +# See https://github.com/JLHwung/hexo-offline +# --------------- +# pwa: +# enable: false +# manifest: /pwa/manifest.json +# apple_touch_icon: /pwa/apple-touch-icon.png +# favicon_32_32: /pwa/32.png +# favicon_16_16: /pwa/16.png +# mask_icon: /pwa/safari-pinned-tab.svg + +# Open graph meta tags +# https://developers.facebook.com/docs/sharing/webmasters/ +Open_Graph_meta: + enable: true + option: + # twitter_card: + # twitter_image: + # twitter_id: + # twitter_site: + # google_plus: + # fb_admins: + # fb_app_id: + +# Add the vendor prefixes to ensure compatibility +css_prefix: true + +# Inject +# Insert the code to head (before '' tag) and the bottom (before '' tag) +# 插入代码到头部 之前 和 底部 之前 +inject: + head: + # - + bottom: + # - + +# CDN +# Don't modify the following settings unless you know how they work +# 非必要請不要修改 +CDN: + # The CDN provider of internal scripts (主題內部 js 的 cdn 配置) + # option: local/jsdelivr/unpkg/cdnjs/custom + # Dev version can only choose. ( dev版的主題只能設置為 local ) + internal_provider: local + + # The CDN provider of third party scripts (第三方 js 的 cdn 配置) + # option: local/jsdelivr/unpkg/cdnjs/custom + # when set it to local, you need to install hexo-butterfly-extjs + third_party_provider: jsdelivr + + # Add version number to CDN, true or false + version: false + + # Custom format + # For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file} + custom_format: + + option: + # main_css: + # main: + # utils: + # translate: + # local_search: + # algolia_js: + # algolia_search_v4: + # instantsearch_v4: + # pjax: + # gitalk: + # gitalk_css: + # blueimp_md5: + # valine: + # disqusjs: + # disqusjs_css: + # twikoo: + # waline_js: + # waline_css: + # sharejs: + # sharejs_css: + # mathjax: + # katex: + # katex_copytex: + # mermaid: + # canvas_ribbon: + # canvas_fluttering_ribbon: + # canvas_nest: + # lazyload: + # instantpage: + # typed: + # pangu: + # fancybox_css_v4: + # fancybox_v4: + # medium_zoom: + # snackbar_css: + # snackbar: + # activate_power_mode: + # fireworks: + # click_heart: + # ClickShowText: + # fontawesomeV6: + # flickr_justified_gallery_js: + # flickr_justified_gallery_css: + # aplayer_css: + # aplayer_js: + # meting_js: + # prismjs_js: + # prismjs_lineNumber_js: + # prismjs_autoloader: + # artalk_js: + # artalk_css: \ No newline at end of file diff --git a/languages/default.yml b/languages/default.yml new file mode 100644 index 0000000..833fb6c --- /dev/null +++ b/languages/default.yml @@ -0,0 +1,121 @@ +footer: + framework: Framework + theme: Theme + +copy: + success: Copy successfully + error: Copy error + noSupport: The browser does not support + +page: + articles: Articles + tag: Tag + category: Category + archives: Archives + +card_post_count: comments + +sticky: Sticky +no_title: No title + +post: + created: Created + updated: Updated + wordcount: Word count + min2read: Reading time + min2read_unit: min + page_pv: Post View + comments: Comments + copyright: + author: Author + link: Link + copyright_notice: Copyright Notice + copyright_content: 'All articles in this blog are licensed under %s unless stating additionally.' + recommend: Related Articles + edit: Edited on + +search: + title: Search + load_data: Loading the Database + algolia_search: + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}." + hits_stats: '${hits} results found in ${time} ms' + + local_search: + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}" + +pagination: + prev: Previous Post + next: Next Post + +comment: Comment + +aside: + articles: Articles + tags: Tags + categories: Categories + card_announcement: Announcement + card_categories: Categories + card_tags: Tags + card_archives: Archives + card_recent_post: Recent Post + card_webinfo: + headline: Info + article_name: Article + runtime: + name: Run time + unit: days + last_push_date: + name: Last Push + site_wordcount: Total Count + site_uv_name: UV + site_pv_name: PV + more_button: More + card_newest_comments: + headline: Newest Comments + loading_text: loading... + error: Unable to get the data, please make sure the settings are correct. + zero: No Comment + image: image + link: link + code: code + card_toc: Catalog + +date_suffix: + just: Just + min: minutes ago + hour: hours ago + day: days ago + month: months ago + +donate: Donate +share: Share + +rightside: + readmode_title: Read Mode + translate_title: Toggle Between Traditional Chinese And Simplified Chinese + night_mode_title: Toggle Between Light And Dark Mode + back_to_top: Back To Top + toc: Table Of Contents + scroll_to_comment: Scroll To Comments + setting: Setting + aside: Toggle between single-column and double-column + chat: Chat + +copy_copyright: + author: Author + link: Link + source: Source + info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source. + +Snackbar: + chs_to_cht: Traditional Chinese Activated Manually + cht_to_chs: Simplified Chinese Activated Manually + day_to_night: Dark Mode Activated Manually + night_to_day: Light Mode Activated Manually + +loading: Loading... + +error404: Page not found diff --git a/languages/en.yml b/languages/en.yml new file mode 100644 index 0000000..9d303e0 --- /dev/null +++ b/languages/en.yml @@ -0,0 +1,121 @@ +footer: + framework: Framework + theme: Theme + +copy: + success: Copy successfully + error: Copy error + noSupport: The browser does not support + +page: + articles: Articles + tag: Tag + category: Category + archives: Archives + +card_post_count: comments + +sticky: Sticky +no_title: No title + +post: + created: Created + updated: Updated + wordcount: Word count + min2read: Reading time + min2read_unit: min + page_pv: Post View + comments: Comments + copyright: + author: Author + link: Link + copyright_notice: Copyright Notice + copyright_content: 'All articles in this blog are licensed under %s unless stating additionally.' + recommend: Related Articles + edit: Edited on + +search: + title: Search + load_data: Loading the Database + algolia_search: + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}." + hits_stats: '${hits} results found in ${time} ms' + + local_search: + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}" + +pagination: + prev: Previous Post + next: Next Post + +comment: Comment + +aside: + articles: Articles + tags: Tags + categories: Categories + card_announcement: Announcement + card_categories: Categories + card_tags: Tags + card_archives: Archives + card_recent_post: Recent Post + card_webinfo: + headline: Info + article_name: Article + runtime: + name: Run time + unit: days + last_push_date: + name: Last Push + site_wordcount: Total Count + site_uv_name: UV + site_pv_name: PV + more_button: More + card_newest_comments: + headline: Newest Comments + loading_text: loading... + error: Unable to get the data, please make sure the settings are correct. + zero: No Comment + image: image + link: link + code: code + card_toc: Catalog + +date_suffix: + just: Just + min: minutes ago + hour: hours ago + day: days ago + month: months ago + +donate: Donate +share: Share + +rightside: + readmode_title: Read Mode + translate_title: Switch Between Traditional Chinese And Simplified Chinese + night_mode_title: Switch Between Light And Dark Mode + back_to_top: Back To Top + toc: Table Of Contents + scroll_to_comment: Scroll To Comments + setting: Setting + aside: Toggle between single-column and double-column + chat: Chat + +copy_copyright: + author: Author + link: Link + source: Source + info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source. + +Snackbar: + chs_to_cht: Traditional Chinese Activated Manually + cht_to_chs: Simplified Chinese Activated Manually + day_to_night: Dark Mode Activated Manually + night_to_day: Light Mode Activated Manually + +loading: Loading... + +error404: Page not found diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml new file mode 100644 index 0000000..55900d2 --- /dev/null +++ b/languages/zh-CN.yml @@ -0,0 +1,122 @@ +footer: + framework: 框架 + theme: 主题 + +copy: + success: 复制成功 + error: 复制错误 + noSupport: 浏览器不支持 + +page: + articles: 文章总览 + tag: 标签 + category: 分类 + archives: 归档 + +card_post_count: 条评论 + +sticky: 置顶 +no_title: 无题 + +post: + created: 发表于 + updated: 更新于 + wordcount: 字数总计 + min2read: 阅读时长 + min2read_unit: 分钟 + page_pv: 阅读量 + comments: 评论数 + copyright: + author: 文章作者 + link: 文章链接 + copyright_notice: 版权声明 + copyright_content: '本博客所有文章除特别声明外，均采用 + %s 许可协议。转载请注明来自 %s！' + recommend: 相关推荐 + edit: 编辑 + +search: + title: 搜索 + load_data: 数据库加载中 + algolia_search: + input_placeholder: 搜索文章 + hits_empty: '找不到您查询的内容：${query}' + hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒' + + local_search: + input_placeholder: 搜索文章 + hits_empty: '找不到您查询的内容：${query}' + +pagination: + prev: 上一篇 + next: 下一篇 + +comment: 评论 + +aside: + articles: 文章 + tags: 标签 + categories: 分类 + card_announcement: 公告 + card_categories: 分类 + card_tags: 标签 + card_archives: 归档 + card_recent_post: 最新文章 + card_webinfo: + headline: 网站资讯 + article_name: 文章数目 + runtime: + name: 已运行时间 + unit: 天 + last_push_date: + name: 最后更新时间 + site_wordcount: 本站总字数 + site_uv_name: 本站访客数 + site_pv_name: 本站总访问量 + more_button: 查看更多 + card_newest_comments: + headline: 最新评论 + loading_text: 正在加载中... + error: 无法获取评论，请确认相关配置是否正确 + zero: 没有评论 + image: 图片 + link: 链接 + code: 代码 + card_toc: 目录 + +date_suffix: + just: 刚刚 + min: 分钟前 + hour: 小时前 + day: 天前 + month: 个月前 + +donate: 打赏 +share: 分享 + +rightside: + readmode_title: 阅读模式 + translate_title: 简繁转换 + night_mode_title: 浅色和深色模式转换 + back_to_top: 回到顶部 + toc: 目录 + scroll_to_comment: 直达评论 + setting: 设置 + aside: 单栏和双栏切换 + chat: 聊天 + +copy_copyright: + author: 作者 + link: 链接 + source: 来源 + info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 + +Snackbar: + chs_to_cht: 你已切换为繁体 + cht_to_chs: 你已切换为简体 + day_to_night: 你已切换为深色模式 + night_to_day: 你已切换为浅色模式 + +loading: 加载中... + +error404: 页面没有找到 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml new file mode 100644 index 0000000..61d667f --- /dev/null +++ b/languages/zh-TW.yml @@ -0,0 +1,122 @@ +footer: + framework: 框架 + theme: 主題 + +copy: + success: 複製成功 + error: 複製錯誤 + noSupport: 瀏覽器不支援 + +page: + articles: 文章總覽 + tag: 標籤 + category: 分類 + archives: 歸檔 + +card_post_count: 條評論 + +sticky: 置頂 +no_title: 無題 + +post: + created: 發表於 + updated: 更新於 + wordcount: 字數總計 + min2read: 閱讀時長 + min2read_unit: 分鐘 + page_pv: 閱讀量 + comments: 評論數 + copyright: + author: 文章作者 + link: 文章連結 + copyright_notice: 版權聲明 + copyright_content: '本部落格所有文章除特別聲明外，均採用 + %s 許可協議。轉載請註明來自 %s！' + recommend: 相關推薦 + edit: 編輯 + +search: + title: 搜尋 + load_data: 資料庫載入中 + algolia_search: + input_placeholder: 搜尋文章 + hits_empty: '找不到您查詢的內容：${query}' + hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒' + + local_search: + input_placeholder: 搜尋文章 + hits_empty: '找不到您查詢的內容：${query}' + +pagination: + prev: 上一篇 + next: 下一篇 + +comment: 評論 + +aside: + articles: 文章 + tags: 標籤 + categories: 分類 + card_announcement: 公告 + card_categories: 分類 + card_tags: 標籤 + card_archives: 歸檔 + card_recent_post: 最新文章 + card_webinfo: + headline: 網站資訊 + article_name: 文章數目 + runtime: + name: 已執行時間 + unit: 天 + last_push_date: + name: 最後更新時間 + site_wordcount: 本站總字數 + site_uv_name: 本站訪客數 + site_pv_name: 本站總訪問量 + more_button: 檢視更多 + card_newest_comments: + headline: 最新評論 + loading_text: 正在載入中... + error: 無法獲取評論，請確認相關配置是否正確 + zero: 沒有評論 + image: 圖片 + link: 連結 + code: 程式碼 + card_toc: 目錄 + +date_suffix: + just: 剛剛 + min: 分鐘前 + hour: 小時前 + day: 天前 + month: 個月前 + +donate: 打賞 +share: 分享 + +rightside: + readmode_title: 閱讀模式 + translate_title: 簡繁轉換 + night_mode_title: 淺色和深色模式轉換 + back_to_top: 回到頂部 + toc: 目錄 + scroll_to_comment: 直達評論 + setting: 設定 + aside: 單欄和雙欄切換 + chat: 聊天 + +copy_copyright: + author: 作者 + link: 連結 + source: 來源 + info: 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。 + +Snackbar: + chs_to_cht: 你已切換為繁體 + cht_to_chs: 你已切換為簡體 + day_to_night: 你已切換為深色模式 + night_to_day: 你已切換為淺色模式 + +loading: 載入中... + +error404: 頁面沒有找到 diff --git a/layout/archive.pug b/layout/archive.pug new file mode 100644 index 0000000..815cdd1 --- /dev/null +++ b/layout/archive.pug @@ -0,0 +1,9 @@ +extends includes/layout.pug + +block content + include ./includes/mixins/article-sort.pug + #archive + - const archiveLength = findArchiveLength(fragment_cache) + .article-sort-title= _p('page.articles') + ' - ' + archiveLength + +articleSort(page.posts) + include includes/pagination.pug \ No newline at end of file diff --git a/layout/category.pug b/layout/category.pug new file mode 100644 index 0000000..234a0af --- /dev/null +++ b/layout/category.pug @@ -0,0 +1,14 @@ +extends includes/layout.pug + +block content + if theme.category_ui == 'index' + include ./includes/mixins/post-ui.pug + #recent-posts.recent-posts.category_ui + +postUI + include includes/pagination.pug + else + include ./includes/mixins/article-sort.pug + #category + .article-sort-title= _p('page.category') + ' - ' + page.category + +articleSort(page.posts) + include includes/pagination.pug \ No newline at end of file diff --git a/layout/includes/404.pug b/layout/includes/404.pug new file mode 100644 index 0000000..4a022c8 --- /dev/null +++ b/layout/includes/404.pug @@ -0,0 +1,12 @@ +- var top_img_404 = theme.error_404.background || theme.default_top_img + +#body-wrap.error404 + include ./header/index.pug + + #error-wrap + .error-content + .error-img + img(src=url_for(top_img_404) alt='Page not found') + .error-info + h1.error_title= '404' + .error_subtitle= theme.error_404.subtitle || _p('error404') diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug new file mode 100644 index 0000000..3ef0223 --- /dev/null +++ b/layout/includes/additional-js.pug @@ -0,0 +1,69 @@ +div + script(src=url_for(theme.asset.utils)) + script(src=url_for(theme.asset.main)) + + if theme.translate.enable + script(src=url_for(theme.asset.translate)) + + if theme.medium_zoom + script(src=url_for(theme.asset.medium_zoom)) + else if theme.fancybox + script(src=url_for(theme.asset.fancybox_v4)) + + if theme.instantpage + script(src=url_for(theme.asset.instantpage), type='module') + + if theme.lazyload.enable + script(src=url_for(theme.asset.lazyload)) + + if theme.snackbar.enable + script(src=url_for(theme.asset.snackbar)) + + if theme.pangu.enable + != partial("includes/third-party/pangu.pug", {}, { cache: true }) + + //- search + if theme.algolia_search.enable + script(src=url_for(theme.asset.algolia_search_v4)) + script(src=url_for(theme.asset.instantsearch_v4)) + script(src=url_for(theme.asset.algolia_js)) + else if theme.local_search.enable + script(src=url_for(theme.asset.local_search)) + + .js-pjax + if needLoadCountJs + != partial("includes/third-party/card-post-count/index", {}, { cache: true }) + + if loadSubJs + include ./third-party/subtitle.pug + + include ./third-party/math/index.pug + + if commentsJsLoad + include ./third-party/comments/js.pug + + != partial("includes/third-party/prismjs", {}, { cache: true }) + + if theme.aside.enable && theme.newest_comments.enable + if theme.pjax.enable + != partial("includes/third-party/newest-comments/index", {}, { cache: true }) + else if (!is_post() && page.aside !== false) + != partial("includes/third-party/newest-comments/index", {}, { cache: true }) + + != fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)}) + + != partial("includes/third-party/effect", {}, { cache: true }) + + != partial("includes/third-party/chat/index", {}, { cache: true }) + + if theme.aplayerInject && theme.aplayerInject.enable + if theme.pjax.enable || theme.aplayerInject.per_page + include ./third-party/aplayer.pug + else if page.aplayer + include ./third-party/aplayer.pug + + if theme.pjax.enable + != partial("includes/third-party/pjax", {}, { cache: true }) + + if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv + script(async data-pjax src='//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js') diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug new file mode 100644 index 0000000..c7ade67 --- /dev/null +++ b/layout/includes/footer.pug @@ -0,0 +1,52 @@ +#footer_deal + if theme.footer.footer_icons.enable + each i in theme.footer.footer_icons.left + if i.class == "in" + a.deal_link(href=`${i.link}`, title=`${i.desrc}`) + i(class=`${i.icon}`) + else if i.class == "out" + a.deal_link(target='_blank', rel='noopener external nofollow', href=`${i.link}`, title=`${i.desrc}`) + i(class=`${i.icon}`) + else + a.deal_link(href=`${i.link}`, title=`${i.desrc}`) + i(class=`${i.icon}`) + img.footer_mini_logo.entered.loading(title='返回顶部' onclick='btf.scrollToDest(0, 500)' src=`${theme.footer.footer_logo.url}` data-ll-status='loading') + if theme.footer.footer_icons.enable + each i in theme.footer.footer_icons.right + if i.class == "in" + a.deal_link(href=`${i.link}`, title=`${i.desrc}`) + i(class=`${i.icon}`) + else if i.class == "out" + a.deal_link(target='_blank', rel='noopener external nofollow', href=`${i.link}`, title=`${i.desrc}`) + i(class=`${i.icon}`) + else + a.deal_link(href=`${i.link}`, title=`${i.desrc}`) + i(class=`${i.icon}`) +#Jay-footer + each item in theme.footer.footer_group.footer_group_link + .footer-group + h3.footer-title=item.group_title + .footer-links + each i in item.footer_links + if i.class == "in" + a.footer-item(href=`${i.link}`)=i.text + else if i.class == "out" + a.footer-item(target='_blank', href=`${i.link}`)=i.text + else + a.footer-item(href=`${i.link}`)=i.text +#footer-banner + .footer-banner-links + .footer-banner-left + .footer-banner-left + #footer-banner-tips=`${theme.footer.text}` + + .footer-banner-right + a.footer-banner-link(href="https://hexo.io/zh-cn/" title="Hexo") 框架：Hexo + a.footer-banner-link | + a.footer-banner-link(href="/2023/dimension" title="theme") 主题：dimension + a.footer-banner-link | + a.footer-banner-link(href="/about/" title="about") 关于 + a.footer-banner-link | + a.footer-banner-link.cc(href="/cc/" title="cc协议") + i.fab.fa-creative-commons + span 协议。 \ No newline at end of file diff --git a/layout/includes/head.pug b/layout/includes/head.pug new file mode 100644 index 0000000..d8ff883 --- /dev/null +++ b/layout/includes/head.pug @@ -0,0 +1,69 @@ +- var pageTitle +- is_archive() ? page.title = findArchivesTitle(page, theme.menu, date) : '' +- if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag +- else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category +- else if (is_current('/404.html', [strict])) pageTitle = _p('error404') +- else pageTitle = page.title || config.title || '' + +- var isSubtitle = config.subtitle ? ' - ' + config.subtitle : '' +- var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title +- var pageAuthor = config.email ? config.author + ',' + config.email : config.author +- var pageCopyright = config.copyright || config.author +- var themeColorLight = theme.theme_color && theme.theme_color.enable && theme.theme_color.meta_theme_color_light || '#ffffff' +- var themeColorDark = theme.theme_color && theme.theme_color.enable && theme.theme_color.meta_theme_color_dark || '#0d0d0d' +- var themeColor = theme.display_mode === 'dark' ? themeColorDark : themeColorLight + +meta(charset='UTF-8') +meta(http-equiv="X-UA-Compatible" content="IE=edge") +meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no") +title= tabTitle +meta(name="author" content=pageAuthor) +meta(name="copyright" content=pageCopyright) +meta(name ="format-detection" content="telephone=no") +meta(name="theme-color" content=themeColor) + +//- Open_Graph +include ./head/Open_Graph.pug + +!=favicon_tag(theme.favicon || config.favicon) +link(rel="canonical" href=urlNoIndex()) + +//- 預解析 +!=partial('includes/head/preconnect', {}, {cache: true}) + +//- 網站驗證 +!=partial('includes/head/site_verification', {}, {cache: true}) + +//- PWA +if (theme.pwa && theme.pwa.enable) + !=partial('includes/head/pwa', {}, {cache: true}) + +//- main css +link(rel='stylesheet', href=url_for(theme.asset.main_css)) +link(rel='stylesheet', href=url_for(theme.asset.fontawesomeV6) media="print" onload="this.media='all'") + +if (theme.snackbar && theme.snackbar.enable) + link(rel='stylesheet', href=url_for(theme.asset.snackbar_css) media="print" onload="this.media='all'") + +if theme.fancybox + link(rel='stylesheet' href=url_for(theme.asset.fancybox_css_v4) media="print" onload="this.media='all'") + +//- google_adsense +!=partial('includes/head/google_adsense', {}, {cache: true}) + +//- analytics +!=partial('includes/head/analytics', {}, {cache: true}) + +//- font +if theme.blog_title_font &&　theme.blog_title_font.font_link + link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link) media="print" onload="this.media='all'") + +//- global config +!=partial('includes/head/config', {}, {cache: true}) + +include ./head/config_site.pug +include ./head/noscript.pug + +!=fragment_cache('injectHeadJs', function(){return inject_head_js()}) + +!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)}) \ No newline at end of file diff --git a/layout/includes/head/Open_Graph.pug b/layout/includes/head/Open_Graph.pug new file mode 100644 index 0000000..1d04b47 --- /dev/null +++ b/layout/includes/head/Open_Graph.pug @@ -0,0 +1,13 @@ +if theme.Open_Graph_meta.enable + - + let ogOption = Object.assign({ + type: is_post() ? 'article' : 'website', + image: (page.cover || theme.avatar.img) ? full_url_for(page.cover || theme.avatar.img) : '', + fb_admins: theme.facebook_comments.user_id || '', + fb_app_id: theme.facebook_comments.app_id || '', + }, theme.Open_Graph_meta.option) + - + != open_graph(ogOption) +else + meta(name="description" content=page_description()) + diff --git a/layout/includes/head/analytics.pug b/layout/includes/head/analytics.pug new file mode 100644 index 0000000..6452528 --- /dev/null +++ b/layout/includes/head/analytics.pug @@ -0,0 +1,31 @@ +if theme.baidu_analytics + script. + var _hmt = _hmt || []; + (function() { + var hm = document.createElement("script"); + hm.src = "https://hm.baidu.com/hm.js?!{theme.baidu_analytics}"; + var s = document.getElementsByTagName("script")[0]; + s.parentNode.insertBefore(hm, s); + })(); + +if theme.google_analytics + script(async src=`https://www.googletagmanager.com/gtag/js?id=${theme.google_analytics}`) + script. + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', '!{theme.google_analytics}'); + +if theme.cnzz_analytics + script(async data-pjax src=`https://s4.cnzz.com/z_stat.php?id=${theme.cnzz_analytics}&web_id=${theme.cnzz_analytics}`) + +if theme.cloudflare_analytics + script(defer data-pjax src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon=`{"token": "${theme.cloudflare_analytics}"}`) + +if theme.microsoft_clarity + script. + (function(c,l,a,r,i,t,y){ + c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; + t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; + y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); + })(window, document, "clarity", "script", "!{theme.microsoft_clarity}"); \ 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 0000000..5a8b8f5 --- /dev/null +++ b/layout/includes/head/config.pug @@ -0,0 +1,124 @@ +- + let algolia = 'undefined'; + let env = process.env; + if (theme.algolia_search.enable) { + algolia = JSON.stringify({ + appId: env.ALGOLIA_APP_ID || config.algolia.appId || config.algolia.applicationID, + apiKey: env.ALGOLIA_API_KEY || config.algolia.apiKey, + indexName: env.ALGOLIA_INDEX_NAME || config.algolia.indexName, + hits: theme.algolia_search.hits, + // search languages + languages: { + input_placeholder: _p("search.algolia_search.input_placeholder"), + hits_empty: _p("search.algolia_search.hits_empty"), + hits_stats: _p("search.algolia_search.hits_stats"), + } + }) + } + + let localSearch = 'undefined'; + if (theme.local_search && theme.local_search.enable) { + localSearch = JSON.stringify({ + path: theme.local_search.CDN ? theme.local_search.CDN : config.root + config.search.path, + preload: theme.local_search.preload, + languages: { + // search languages + hits_empty: _p("search.local_search.hits_empty"), + } + }) + } + + let translate = 'undefined'; + if (theme.translate && theme.translate.enable){ + translate = JSON.stringify({ + defaultEncoding: theme.translate.defaultEncoding, + translateDelay: theme.translate.translateDelay, + msgToTraditionalChinese: theme.translate.msgToTraditionalChinese, + msgToSimplifiedChinese: theme.translate.msgToSimplifiedChinese + }) + } + + let copyright = 'undefined'; + if (theme.copy.enable && theme.copy.copyright.enable){ + copyright = JSON.stringify({ + limitCount: theme.copy.copyright.limit_count, + languages: { + author: _p("copy_copyright.author") + ': ' + config.author, + link: _p("copy_copyright.link") + ': ', + source: _p("copy_copyright.source") + ': ' + config.title, + info: _p("copy_copyright.info") + } + }) + } + + let Snackbar = 'undefined'; + if (theme.snackbar && theme.snackbar.enable) { + Snackbar = JSON.stringify({ + chs_to_cht: _p("Snackbar.chs_to_cht"), + cht_to_chs: _p("Snackbar.cht_to_chs"), + day_to_night: _p("Snackbar.day_to_night"), + night_to_day: _p("Snackbar.night_to_day"), + bgLight: theme.snackbar.bg_light, + bgDark: theme.snackbar.bg_dark, + position: theme.snackbar.position, + }) + } + + let noticeOutdate = 'undefined'; + if (theme.noticeOutdate && theme.noticeOutdate.enable) { + noticeOutdate = JSON.stringify({ + limitDay: theme.noticeOutdate.limit_day, + position: theme.noticeOutdate.position, + messagePrev: theme.noticeOutdate.message_prev, + messageNext: theme.noticeOutdate.message_next, + }) + } + + let highlight = 'undefined'; + if ((config.highlight && config.highlight.enable) || (config.prismjs && config.prismjs.enable)) { + highlight = JSON.stringify({ + plugin: config.highlight.enable ? 'highlighjs' : 'prismjs', + highlightCopy: theme.highlight_copy, + highlightLang: theme.highlight_lang, + highlightHeightLimit: theme.highlight_height_limit + }) + } + +script. + const GLOBAL_CONFIG = { + root: '!{config.root}', + algolia: !{algolia}, + localSearch: !{localSearch}, + translate: !{translate}, + noticeOutdate: !{noticeOutdate}, + highlight: !{highlight}, + copy: { + success: '!{_p("copy.success")}', + error: '!{_p("copy.error")}', + noSupport: '!{_p("copy.noSupport")}' + }, + relativeDate: { + homepage: !{theme.post_meta.page.date_format === 'relative'}, + post: !{theme.post_meta.post.date_format === 'relative'} + }, + runtime: '!{theme.runtimeshow.enable ? _p("aside.card_webinfo.runtime.unit") : ""}', + date_suffix: { + just: '!{_p("date_suffix.just")}', + min: '!{_p("date_suffix.min")}', + hour: '!{_p("date_suffix.hour")}', + day: '!{_p("date_suffix.day")}', + month: '!{_p("date_suffix.month")}' + }, + copyright: !{copyright}, + lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}', + Snackbar: !{Snackbar}, + source: { + justifiedGallery: { + js: '!{url_for(theme.asset.flickr_justified_gallery_js)}', + css: '!{url_for(theme.asset.flickr_justified_gallery_css)}' + } + }, + isPhotoFigcaption: !{theme.photofigcaption}, + islazyload: !{theme.lazyload.enable}, + isAnchor: !{theme.anchor.auto_update || false} + } diff --git a/layout/includes/head/config_site.pug b/layout/includes/head/config_site.pug new file mode 100644 index 0000000..94cbb51 --- /dev/null +++ b/layout/includes/head/config_site.pug @@ -0,0 +1,30 @@ +- + const titleVal = pageTitle.replace(/'/ig,"\\'") + + let isHighlightShrink + if (theme.highlight_shrink == 'none') isHighlightShrink = 'undefined' + else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink + else isHighlightShrink = theme.highlight_shrink + + var showToc = false + if (theme.aside.enable && page.aside !== false) { + let tocEnable = false + if (is_post()) { + if (theme.toc.post) tocEnable = true + } else if (is_page()) { + if (theme.toc.page) tocEnable = true + } + const pageToc = page.toc === true || page.toc === false ? page.toc : tocEnable + showToc = pageToc && (toc(page.content) !== '' || page.encrypt == true ) + } +- + +script#config-diff. + var GLOBAL_CONFIG_SITE = { + title: '!{titleVal}', + isPost: !{is_post()}, + isHome: !{is_home()}, + isHighlightShrink: !{isHighlightShrink}, + isToc: !{showToc}, + postUpdate: '!{full_date(page.updated)}' + } diff --git a/layout/includes/head/google_adsense.pug b/layout/includes/head/google_adsense.pug new file mode 100644 index 0000000..3ef1af9 --- /dev/null +++ b/layout/includes/head/google_adsense.pug @@ -0,0 +1,9 @@ +if (theme.google_adsense && theme.google_adsense.enable) + script(async src=theme.google_adsense.js) + + if theme.google_adsense.auto_ads + script. + (adsbygoogle = window.adsbygoogle || []).push({ + google_ad_client: '!{theme.google_adsense.client}', + enable_page_level_ads: '!{theme.google_adsense.enable_page_level_ads}' + }); \ No newline at end of file diff --git a/layout/includes/head/noscript.pug b/layout/includes/head/noscript.pug new file mode 100644 index 0000000..cc3befa --- /dev/null +++ b/layout/includes/head/noscript.pug @@ -0,0 +1,14 @@ +noscript. + \ No newline at end of file diff --git a/layout/includes/head/preconnect.pug b/layout/includes/head/preconnect.pug new file mode 100644 index 0000000..d010b05 --- /dev/null +++ b/layout/includes/head/preconnect.pug @@ -0,0 +1,22 @@ +link(rel="preconnect" href="//cdn.jsdelivr.net") + +if theme.google_analytics + link(rel="preconnect" href="//www.google-analytics.com" crossorigin='') + +if theme.baidu_analytics + link(rel="preconnect" href="//hm.baidu.com") + +if theme.cnzz_analytics + link(rel="preconnect" href="//s4.cnzz.com") + +if theme.cloudflare_analytics + link(rel="preconnect" href="//static.cloudflareinsights.com") + +if theme.microsoft_clarity + link(rel="preconnect" href="//www.clarity.ms") + +if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1 + link(rel="preconnect" href="//fonts.googleapis.com" crossorigin='') + +if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv + link(rel="preconnect" href="//busuanzi.ibruce.info") \ 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 0000000..e9152f2 --- /dev/null +++ b/layout/includes/head/pwa.pug @@ -0,0 +1,11 @@ +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.apple_touch_icon) + link(rel="apple-touch-icon" sizes="180x180" href=url_for(theme.pwa.apple_touch_icon)) +if(theme.pwa.favicon_32_32) + link(rel="icon" type="image/png" sizes="32x32" href=url_for(theme.pwa.favicon_32_32)) +if(theme.pwa.favicon_16_16) + link(rel="icon" type="image/png" sizes="16x16" href=url_for(theme.pwa.favicon_16_16)) +if(theme.pwa.mask_icon) + link(rel="mask-icon" href=url_for(theme.pwa.mask_icon) color="#5bbad5") diff --git a/layout/includes/head/site_verification.pug b/layout/includes/head/site_verification.pug new file mode 100644 index 0000000..8947644 --- /dev/null +++ b/layout/includes/head/site_verification.pug @@ -0,0 +1,3 @@ +if theme.site_verification + each item in theme.site_verification + meta(name=item.name content=item.content) \ No newline at end of file diff --git a/layout/includes/header/index.pug b/layout/includes/header/index.pug new file mode 100644 index 0000000..aab6c6f --- /dev/null +++ b/layout/includes/header/index.pug @@ -0,0 +1,56 @@ +if !theme.disable_top_img && page.top_img !== false + if is_post() + - var top_img = page.top_img || page.cover || page.randomcover + else if is_page() + - var top_img = false + else if is_tag() + - var top_img = false + else if is_category() + - var top_img = false + else if is_home() + - var top_img = false + else if is_archive() + - var top_img = false + else + - var top_img = page.top_img || theme.default_top_img + + if top_img !== false + - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}` + - var bg_img = top_img ? imgSource : '' + - var site_title = page.title || page.tag || page.category || config.title + - var isHomeClass = is_home() ? 'full_page nav-fixed nav-visible' : 'not-home-page' + - is_post() ? isHomeClass = 'post-bg' : isHomeClass + else + - var isHomeClass = 'not-top-img' +else + - var top_img = false + - var isHomeClass = 'not-top-img' + +header#page-header(class=isHomeClass style=bg_img) + !=partial('includes/header/nav', {}, {cache: true}) + if is_post() + include ./post-info.pug + 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') + else if is_home() + //- #site-info + h1#site-title=site_title + if theme.subtitle.enable + - var loadSubJs = true + #site-subtitle + span#subtitle + if(theme.social) + #site_social_icons + !=fragment_cache('social', function(){return partial('includes/header/social')}) + #scroll-down + i.fas.fa-angle-down.scroll-down-effects + else + #page-site-info + h1#site-title=site_title \ No newline at end of file diff --git a/layout/includes/header/menu_item.pug b/layout/includes/header/menu_item.pug new file mode 100644 index 0000000..d172db7 --- /dev/null +++ b/layout/includes/header/menu_item.pug @@ -0,0 +1,27 @@ +if theme.menu + .menus_items + each value, label in theme.menu + if typeof value !== 'object' + .menus_item + - const valueArray = value.split('||') + a.site-page(href=url_for(trim(valueArray[0]))) + if valueArray[1] + i.fa-fw(class=trim(valueArray[1])) + span=' '+label + else + .menus_item + - const labelArray = label.split('||') + - const hideClass = labelArray[2] && trim(labelArray[2]) === 'hide' ? 'hide' : '' + a.site-page.group(class=`${hideClass}` href='javascript:void(0);') + if labelArray[1] + i.fa-fw(class=trim(labelArray[1])) + span=' '+ trim(labelArray[0]) + i.fas.fa-chevron-down + ul.menus_item_child + each val,lab in value + - const valArray = val.split('||') + li + a.site-page.child(href=url_for(trim(valArray[0]))) + if valArray[1] + i.fa-fw(class=trim(valArray[1])) + span=' '+ lab \ No newline at end of file diff --git a/layout/includes/header/nav.pug b/layout/includes/header/nav.pug new file mode 100644 index 0000000..53ab41b --- /dev/null +++ b/layout/includes/header/nav.pug @@ -0,0 +1,34 @@ +- const { darkmode } = theme +nav#nav + span#blog_name + a#site-name(href=url_for('/')) + .title #[=config.title] + i.fa-solid.fa-house + + #menus + if (theme.algolia_search.enable || theme.local_search.enable) + div.nav-button#search-button + a.site-page.social-icon.search + i.fas.fa-search.fa-fw + span=' '+_p('search.title') + + if darkmode.enable && darkmode.button + div.nav-button#darkmode_navswitch + a.darkmode_switchbutton(type="button" href='javascript:toggleTheme()' onclick="void(0)") + i.fas.fa-adjust + + div.nav-button#darkmode_navswitch + a.darkmode_switchbutton(type="button" href='javascript:toRandomPost()' onclick="void(0)") + i.fas.fa-shuffle + + //- div.nav-button#nav-totop + a.totopbtn + i.fas.fa-arrow-up + span#percent(onclick="btf.scrollToDest(0,500)") 0 + + + !=partial('includes/header/menu_item', {}, {cache: true}) + + #toggle-menu + a.site-page + i.fas.fa-bars.fa-fw diff --git a/layout/includes/header/post-info.pug b/layout/includes/header/post-info.pug new file mode 100644 index 0000000..47a3f19 --- /dev/null +++ b/layout/includes/header/post-info.pug @@ -0,0 +1,146 @@ +- let comments = theme.comments +#post-info + h1.post-title= page.title || _p('no_title') + if theme.post_edit.enable + a.post-edit-link(href=theme.post_edit.url + page.source title=_p('post.edit') target="_blank") + i.fas.fa-pencil-alt + + #post-meta + .meta-firstline + if (theme.post_meta.post.date_type) + span.post-meta-date + if (theme.post_meta.post.date_type === 'both') + i.far.fa-calendar-alt.fa-fw.post-meta-icon + span.post-meta-label= _p('post.created') + time.post-meta-date-created(datetime=date_xml(page.date) title=_p('post.created') + ' ' + full_date(page.date))=date(page.date, config.date_format) + span.post-meta-separator | + i.fas.fa-history.fa-fw.post-meta-icon + span.post-meta-label= _p('post.updated') + time.post-meta-date-updated(datetime=date_xml(page.updated) title=_p('post.updated') + ' ' + full_date(page.updated))=date(page.updated, config.date_format) + else + - let data_type_update = theme.post_meta.post.date_type === 'updated' + - let date_type = data_type_update ? 'updated' : 'date' + - let date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt' + - let date_title = data_type_update ? _p('post.updated') : _p('post.created') + i.fa-fw.post-meta-icon(class=date_icon) + span.post-meta-label= date_title + time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format) + if (theme.post_meta.post.categories && page.categories.data.length > 0) + span.post-meta-categories + if (theme.post_meta.post.date_type) + span.post-meta-separator | + + each item, index in page.categories.data + i.fas.fa-inbox.fa-fw.post-meta-icon + a(href=url_for(item.path)).post-meta-categories #[=item.name] + if (index < page.categories.data.length - 1) + i.fas.fa-angle-right.post-meta-separator + + .meta-secondline + - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read) + if (postWordcount) + span.post-meta-separator | + span.post-meta-wordcount + if theme.wordcount.post_wordcount + i.far.fa-file-word.fa-fw.post-meta-icon + span.post-meta-label= _p('post.wordcount') + ':' + span.word-count= wordcount(page.content) + if theme.wordcount.min2read + span.post-meta-separator | + if theme.wordcount.min2read + i.far.fa-clock.fa-fw.post-meta-icon + span.post-meta-label= _p('post.min2read') + ':' + span= min2read(page.content, {cn: 350, en: 160}) + _p('post.min2read_unit') + + //- for pv and count + mixin pvBlock(parent_id,parent_class,parent_title) + span.post-meta-separator | + span(class=parent_class id=parent_id data-flag-title=page.title) + i.far.fa-eye.fa-fw.post-meta-icon + span.post-meta-label=_p('post.page_pv') + ':' + if block + block + + - const commentUse = comments.use + if page.comments !== false && commentUse && !comments.lazyload + if commentUse[0] === 'Valine' && theme.valine.visitor + +pvBlock(url_for(page.path),'leancloud_visitors',page.title) + span.leancloud-visitors-count + i.fa-solid.fa-spinner.fa-spin + else if commentUse[0] === 'Waline' && theme.waline.pageview + +pvBlock('','','') + span.waline-pageview-count(data-path=url_for(page.path)) + i.fa-solid.fa-spinner.fa-spin + else if commentUse[0] === 'Twikoo' && theme.twikoo.visitor + +pvBlock('','','') + span#twikoo_visitors + i.fa-solid.fa-spinner.fa-spin + else if commentUse[0] === 'Artalk' && theme.artalk.visitor + +pvBlock('','','') + span#ArtalkPV + i.fa-solid.fa-spinner.fa-spin + else if theme.busuanzi.page_pv + +pvBlock('','post-meta-pv-cv','') + span#busuanzi_value_page_pv + i.fa-solid.fa-spinner.fa-spin + else if theme.busuanzi.page_pv + +pvBlock('','post-meta-pv-cv','') + span#busuanzi_value_page_pv + i.fa-solid.fa-spinner.fa-spin + + if comments.count && !comments.lazyload && page.comments !== false && comments.use + - var whichCount = comments.use[0] + + mixin countBlock + span.post-meta-separator | + span.post-meta-commentcount + i.far.fa-comments.fa-fw.post-meta-icon + span.post-meta-label= _p('post.comments') + ':' + if block + block + + case whichCount + when 'Disqus' + +countBlock + span.disqus-comment-count + a(href=full_url_for(page.path) + '#disqus_thread') + i.fa-solid.fa-spinner.fa-spin + when 'Disqusjs' + +countBlock + a(href=full_url_for(page.path) + '#disqusjs') + span.disqus-comment-count(data-disqus-url=full_url_for(page.path)) + i.fa-solid.fa-spinner.fa-spin + when 'Valine' + +countBlock + a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl") + span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount") + i.fa-solid.fa-spinner.fa-spin + when 'Waline' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.waline-comment-count(data-path=url_for(page.path)) + i.fa-solid.fa-spinner.fa-spin + when 'Gitalk' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.gitalk-comment-count + i.fa-solid.fa-spinner.fa-spin + when 'Twikoo' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span#twikoo-count + i.fa-solid.fa-spinner.fa-spin + when 'Facebook Comments' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.fb-comments-count(data-href=urlNoIndex()) + when 'Remark42' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.remark42__counter(data-url=urlNoIndex()) + i.fa-solid.fa-spinner.fa-spin + when 'Artalk' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.artalk-count + i.fa-solid.fa-spinner.fa-spin \ No newline at end of file diff --git a/layout/includes/header/social.pug b/layout/includes/header/social.pug new file mode 100644 index 0000000..80adfe9 --- /dev/null +++ b/layout/includes/header/social.pug @@ -0,0 +1,4 @@ +each url, icon in theme.social + a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank" + title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1])) + i(class=icon) \ No newline at end of file diff --git a/layout/includes/hometop.pug b/layout/includes/hometop.pug new file mode 100644 index 0000000..61a9409 --- /dev/null +++ b/layout/includes/hometop.pug @@ -0,0 +1,71 @@ +- var hometop = theme.hometop +- var fposts = theme.hometop.featured_posts + +.hometop + .hometopin + .blog-title + span.title=config.title + .fposts + .ftags + #category-bar.hometop_item + .category-bar-items#category-bar-items + !=getarray_bar("tag") + a.category-bar-more(href=url_for(fposts.tags_more_url)) 更多标签 + #category-bar.hometop_item + .category-bar-items#category-bar-items + !=getarray_bar("category") + a.category-bar-more(href=url_for(fposts.categroies_more_url)) 更多分类 + .group1 + .recent-top-post-group#recent-top-post-group.hometop_item + .recent-post-top#recent-post-top + .topGroup#topGroup + if fposts.posts + each i in fposts.posts + .recent-post-item#recent-post-item + .post_cover.left_radius + a(href=url_for(i.link), title=i.title) + img.post_bg.entered.loaded(src=url_for(i.cover) onerror="this.onerror=null,this.src='/img/404.png'") + .recent-post-info(href=url_for(i.link)) + a.article-title(href=url_for(i.link), title=i.title)= i.title + .hometop-creativity.hometop_item + .inbar + img(src="https://bu.dusays.com/2023/04/21/6442840244ea8.webp", style="background:#e9572b", alt="html") + img(src="https://bu.dusays.com/2023/04/21/644284024536b.webp", style="background:#2c51db", alt="css3") + img(src="https://bu.dusays.com/2023/04/21/6442840245873.webp", style="background:#f7cb4f", alt="js") + img(src="https://bu.dusays.com/2023/04/21/6442840245495.webp", style="background:#df5b40", alt="git") + img(src="https://bu.dusays.com/2023/04/28/644bdead5d78f.webp", style="background:#57b6e6", alt="docker") + img(src="https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg", style="background:#333", alt="node") + img(src="https://bu.dusays.com/2023/04/21/6442840244ea8.webp", style="background:#e9572b", alt="html") + img(src="https://bu.dusays.com/2023/04/21/644284024536b.webp", style="background:#2c51db", alt="css3") + img(src="https://bu.dusays.com/2023/04/21/6442840245873.webp", style="background:#f7cb4f", alt="js") + img(src="https://bu.dusays.com/2023/04/21/6442840245495.webp", style="background:#df5b40", alt="git") + img(src="https://bu.dusays.com/2023/04/28/644bdead5d78f.webp", style="background:#57b6e6", alt="docker") + img(src="https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg", style="background:#333", alt="node") + img(src="https://bu.dusays.com/2023/04/21/6442840244ea8.webp", style="background:#e9572b", alt="html") + img(src="https://bu.dusays.com/2023/04/21/644284024536b.webp", style="background:#2c51db", alt="css3") + img(src="https://bu.dusays.com/2023/04/21/6442840245873.webp", style="background:#f7cb4f", alt="js") + img(src="https://bu.dusays.com/2023/04/21/6442840245495.webp", style="background:#df5b40", alt="git") + img(src="https://bu.dusays.com/2023/04/28/644bdead5d78f.webp", style="background:#57b6e6", alt="docker") + img(src="https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg", style="background:#333", alt="node") + img(src="https://bu.dusays.com/2023/04/21/6442840244ea8.webp", style="background:#e9572b", alt="html") + img(src="https://bu.dusays.com/2023/04/21/644284024536b.webp", style="background:#2c51db", alt="css3") + img(src="https://bu.dusays.com/2023/04/21/6442840245873.webp", style="background:#f7cb4f", alt="js") + img(src="https://bu.dusays.com/2023/04/21/6442840245495.webp", style="background:#df5b40", alt="git") + img(src="https://bu.dusays.com/2023/04/28/644bdead5d78f.webp", style="background:#57b6e6", alt="docker") + img(src="https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg", style="background:#333", alt="node") + .group2 + .siteinfo.hometop_item + include widget/card_webinfo.pug + .descr.hometop_item + img(src=url_for(hometop.descr.img)) + .subtitle subtitle + span=hometop.descr.subtitle + 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/layout.pug b/layout/includes/layout.pug new file mode 100644 index 0000000..c5c3a61 --- /dev/null +++ b/layout/includes/layout.pug @@ -0,0 +1,60 @@ +- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : '' +- page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside +- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : '' +- var pageType = is_post() ? 'post' : 'page' + +doctype html +html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside) + head + include ./head.pug + link(rel="stylesheet", href="/css/color.css") + link(rel="stylesheet", href="https://unpkg.com/swiper@8/swiper-bundle.min.css") + body + script(src="https://unpkg.com/swiper@8/swiper-bundle.min.js") + if theme.preloader.enable + !=partial('includes/loading/index', {}, {cache: true}) + + if theme.background + #web_bg + + !=partial('includes/sidebar', {}, {cache: true}) + + if page.type !== '404' + #body-wrap(class=pageType) + include ./header/index.pug + if is_home() + include ./hometop.pug + + main#content-inner.layout(class=hideAside) + if body + div!= body + else + block content + if theme.aside.enable && page.aside !== false + include widget/index.pug + + - var footerBg = theme.footer_bg + if (footerBg) + if (footerBg === true) + - var footer_bg = bg_img + else + - var footer_bg = theme.footer_bg.indexOf('/') !== -1 ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}` + else + - var footer_bg = '' + + footer#footer(style=footer_bg) + !=partial('includes/footer', {}, {cache: true}) + + else + include ./404.pug + + include ./rightside.pug + !=partial('includes/third-party/search/index', {}, {cache: true}) + include ./additional-js.pug + .totopbutton(onclick="btf.scrollToDest(0,500)") + i.fas.fa-arrow-up + span#percent 0 + include ./waves.pug + script(async='' data-pjax='' src="/js/scroll.js") + script(src="/js/random.js") + script(src="/js/custom.js") \ No newline at end of file diff --git a/layout/includes/loading/fullpage-loading.pug b/layout/includes/loading/fullpage-loading.pug new file mode 100644 index 0000000..75a2041 --- /dev/null +++ b/layout/includes/loading/fullpage-loading.pug @@ -0,0 +1,28 @@ +#loading-box + .loading-left-bg + .loading-right-bg + .spinner-box + .configure-border-1 + .configure-core + .configure-border-2 + .configure-core + .loading-word= _p('loading') + +script. + const preloader = { + endLoading: () => { + document.body.style.overflow = 'auto'; + document.getElementById('loading-box').classList.add("loaded") + }, + initLoading: () => { + document.body.style.overflow = ''; + document.getElementById('loading-box').classList.remove("loaded") + + } + } + window.addEventListener('load',()=> { preloader.endLoading() }) + + if (!{theme.pjax && theme.pjax.enable}) { + document.addEventListener('pjax:send', () => { preloader.initLoading() }) + document.addEventListener('pjax:complete', () => { preloader.endLoading() }) + } \ No newline at end of file diff --git a/layout/includes/loading/index.pug b/layout/includes/loading/index.pug new file mode 100644 index 0000000..663fe50 --- /dev/null +++ b/layout/includes/loading/index.pug @@ -0,0 +1,4 @@ +if theme.preloader.source === 1 + include ./fullpage-loading.pug +else + include ./pace.pug \ No newline at end of file diff --git a/layout/includes/loading/pace.pug b/layout/includes/loading/pace.pug new file mode 100644 index 0000000..e6813ba --- /dev/null +++ b/layout/includes/loading/pace.pug @@ -0,0 +1,2 @@ +link(rel="stylesheet", href=url_for(theme.preloader.pace_css_url || theme.asset.pace_default_css)) +script(src=url_for(theme.asset.pace_js)) \ No newline at end of file diff --git a/layout/includes/mixins/article-sort.pug b/layout/includes/mixins/article-sort.pug new file mode 100644 index 0000000..01e9ef2 --- /dev/null +++ b/layout/includes/mixins/article-sort.pug @@ -0,0 +1,20 @@ +mixin articleSort(posts) + .article-sort + - var year + - posts.each(function (article) { + - let tempYear = date(article.date, 'YYYY') + - let no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : '' + - let title = article.title || _p('no_title') + if tempYear !== year + - year = tempYear + .article-sort-item.year= year + .article-sort-item(class=no_cover) + if article.cover && theme.cover.archives_enable + a.article-sort-item-img(href=url_for(article.path) title=title) + img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`) + .article-sort-item-info + .article-sort-item-time + i.far.fa-calendar-alt + time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format) + a.article-sort-item-title(href=url_for(article.path) title=title)= title + - }) \ No newline at end of file diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug new file mode 100644 index 0000000..4fe6f91 --- /dev/null +++ b/layout/includes/mixins/post-ui.pug @@ -0,0 +1,128 @@ +mixin postUI(posts) + each article , index in page.posts.data + .recent-post-item + - + let link = article.link || article.path + let title = article.title || _p('no_title') + let post_cover = article.cover + let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' + - + if post_cover && theme.cover.index_enable + .post_cover.left + a(href=url_for(link) title=title) + img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title) + .recent-post-info(class=no_cover href=url_for(link) title=title) + a.article-title(href=url_for(link) title=title)= title + .article-meta-wrap + if (is_home() && (article.top || article.sticky > 0)) + span.article-meta + i.fas.fa-thumbtack.sticky + span.sticky= _p('sticky') + span.article-meta-separator | + if (theme.post_meta.page.date_type) + span.post-meta-date + if (theme.post_meta.page.date_type === 'both') + i.far.fa-calendar-alt + span.article-meta-label=_p('post.created') + time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format) + span.article-meta-separator | + i.fas.fa-history + span.article-meta-label=_p('post.updated') + time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format) + else + - let data_type_updated = theme.post_meta.page.date_type === 'updated' + - let date_type = data_type_updated ? 'updated' : 'date' + - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt' + - let date_title = data_type_updated ? _p('post.updated') : _p('post.created') + i(class=date_icon) + span.article-meta-label=date_title + time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format) + if (theme.post_meta.page.categories && article.categories.data.length > 0) + span.article-meta + span.article-meta-separator | + i.fas.fa-inbox + each item, index in article.categories.data + a(href=url_for(item.path)).article-meta__categories #[=item.name] + if (index < article.categories.data.length - 1) + i.fas.fa-angle-right.article-meta-link + if (theme.post_meta.page.tags && article.tags.data.length > 0) + span.article-meta.tags + span.article-meta-separator | + i.fas.fa-tag + each item, index in article.tags.data + a(href=url_for(item.path)).article-meta__tags #[=item.name] + if (index < article.tags.data.length - 1) + span.article-meta-link #[='•'] + + mixin countBlockInIndex + - needLoadCountJs = true + span.article-meta + span.article-meta-separator | + i.fas.fa-comments + if block + block + span.article-meta-label= ' ' + _p('card_post_count') + + if theme.comments.card_post_count + case theme.comments.use[0] + when 'Disqus' + +countBlockInIndex + a(href=full_url_for(link) + '#disqus_thread') + i.fa-solid.fa-spinner.fa-spin + when 'Disqusjs' + +countBlockInIndex + a(href=full_url_for(link) + '#disqusjs') + span.disqus-comment-count(data-disqus-url=full_url_for(link)) + i.fa-solid.fa-spinner.fa-spin + when 'Valine' + +countBlockInIndex + a(href=url_for(link) + '#post-comment') + span.valine-comment-count(data-xid=url_for(link)) + i.fa-solid.fa-spinner.fa-spin + when 'Waline' + +countBlockInIndex + a(href=url_for(link) + '#post-comment') + span.waline-comment-count(id=url_for(link)) + i.fa-solid.fa-spinner.fa-spin + when 'Twikoo' + +countBlockInIndex + a.twikoo-count(href=url_for(link) + '#post-comment') + i.fa-solid.fa-spinner.fa-spin + when 'Facebook Comments' + +countBlockInIndex + a(href=url_for(link) + '#post-comment') + span.fb-comments-count(data-href=urlNoIndex(article.permalink)) + when 'Remark42' + +countBlockInIndex + a(href=url_for(link) + '#post-comment') + span.remark42__counter(data-url=urlNoIndex(article.permalink)) + i.fa-solid.fa-spinner.fa-spin + when 'Artalk' + +countBlockInIndex + a(href=url_for(link) + '#post-comment') + span.artalk-count(data-page-key=url_for(link)) + i.fa-solid.fa-spinner.fa-spin + + //- Display the article introduction on homepage + case theme.index_post_content.method + when false + - break + when 1 + .content!= article.description + when 2 + if article.description + .content!= article.description + else + - const content = strip_html(article.content) + - let expert = content.substring(0, theme.index_post_content.length) + - content.length > theme.index_post_content.length ? expert += ' ...' : '' + .content!= expert + default + - const content = strip_html(article.content) + - let expert = content.substring(0, theme.index_post_content.length) + - content.length > theme.index_post_content.length ? expert += ' ...' : '' + .content!= expert + + if theme.ad && theme.ad.index + if (index + 1) % 3 == 0 + .recent-post-item.ads-wrap!=theme.ad.index diff --git a/layout/includes/page/about.pug b/layout/includes/page/about.pug new file mode 100644 index 0000000..6d340b6 --- /dev/null +++ b/layout/includes/page/about.pug @@ -0,0 +1,259 @@ +#about-page + .author-box + .author-img + img.no-lightbox(src=url_for(theme.about_page.avatar)) + .image-dot + center + h1 + p.p.center.logo.large 关于我 + p.p.center.small 九月露湿，待君之前✨ + + .author-content + .author-content-item.myInfoAndSayHello + .title1 你好，很高兴认识你👋 + .title2 + | 我是 + span.inline-word=`${theme.about_page.author}` + .title1=`${theme.about_page.introduce}` + .aboutsiteTips.author-content-item + .author-content-item-tips 追求 + h2 + | 源于 + br + | 热爱而去 + span.inline-word 感受 + .mask + span.first-tips 学习 + | + span 生活 + | + span(data-up) 程序 + | + span(data-show) 体验 + + .hello-about + .cursor(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)') + .shapes + .shape.shape-1(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)') + .shape.shape-2(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)') + .shape.shape-3(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)') + .content + h1 Hello there! + + .author-content + .author-content-item.skills + .card-content + .author-content-item-tips 技能 + span.author-content-item-title 开启创造力 + .skills-style-group + .tags-group-all + .tags-group-wrapper + each i in site.data.creativity + - const evenNum = i.creativity_list.filter((x, index) => index % 2 === 0); + - const oddNum = i.creativity_list.filter((x, index) => index % 2 === 1); + each item, index in i.creativity_list + if ((index+1 <= evenNum.length) && (index+1 <= oddNum.length)) + .tags-group-icon-pair + .tags-group-icon(style=`background: ${evenNum[index].color}`) + img.no-lightbox(title=evenNum[index].name, src=evenNum[index].icon) + .tags-group-icon(style=`background: ${oddNum[index].color}`) + img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon) + .skills-list + each i in site.data.creativity + each item, index in i.creativity_list + .skill-info + .skill-icon(style=`background: ${item.color}`) + img.no-lightbox(title=item.name, src=item.icon) + .skill-name + span=item.name + .etc ... + .author-content-item.careers + .card-content + .author-content-item-tips 生涯 + span.author-content-item-title 无限进步 + .careers-group + .careers-item + .circle(style='background:#357ef5') + .name=`${theme.about_page.careers}` + img.author-content-img.no-lightbox(alt='生涯', src='https://img02.anzhiy.cn/adminuploads/1/2022/09/26/6330e9bcc39cc.png') + + .author-content + .author-content-item.personalities + .author-content-item-tips 人格 + span.author-content-item-title=`${theme.about_page.personalities}` + .title2(style='color:#ac899c') INTP-A + .post-tips + | 在 + a(href='https://www.16personalities.com/', target='_blank', rel='noopener nofollow') 16personalities + | 了解更多关于 + a(target='_blank', rel='noopener external nofollow', href='https://www.16personalities.com/ch/esfj-%E4%BA%BA%E6%A0%BC')=`${theme.about_page.personalities}` + .image + img.no-lightbox(src='/img/16pers.png') + .author-content-item.myphoto + img.author-content-img.no-lightbox(alt='自拍', src='/img/5.jpg') + + .author-content + .author-content-item.maxim + .author-content-item-tips 座右铭 + span.maxim-title + span(style='opacity:.6;margin-bottom:8px')=`${theme.about_page.say_first_line}` + | + span=`${theme.about_page.say_last_line}` + .author-content-item.buff + .card-content + .author-content-item-tips 特性 + span.buff-title + span(style='opacity:.6;margin-bottom:8px') + span.inline-word=`${theme.about_page.character_1}` + | + span=`${theme.about_page.character_2}` + .card-background-icon + i.fas.fa-dice-d20 + + .author-content-item.comic-content + .card-content + .author-content-item-tips 爱好番剧 + span.author-content-item-title=`${theme.about_page.anime}` + .content-bottom + .banner-button-group + + .author-content-item.like-music + .card-content + .author-content-item-tips 音乐偏好 + span.author-content-item-title=`${theme.about_page.music}` + .content-bottom + .tips 跟 Aegcbx 一起欣赏更多音乐 + + .author-content + .author-content-item.single.reward + .author-content-item-tips 致谢 + span.author-content-item-title 赞赏名单 + .author-content-item-description 感谢因为有你们，让我更加有创作的动力。 + each i in site.data.reward + - let rawData = [...i.reward_list] + .reward-list-all + - let reward_list_amount = i.reward_list.sort((a,b)=>b.amount - a.amount) + each item, index in reward_list_amount + .reward-list-item + .reward-list-item-name=item.name + .reward-list-bottom-group + if item.amount >= 50 + .reward-list-item-money(style='background:var(--anzhiyu-yellow)')=`¥${item.amount}` + else + .reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}` + .datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14) + .reward-list-updateDate + | 最新更新时间： + time.datatime.reward-list-updateDate-time(datatime=rawData[0].datatime)=new Date(rawData[0].datatime).toISOString().slice(0, -14) + +script. + (() => { + function isInViewPortOfOne(el) { + if (!el) return; + const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + const offsetTop = el.offsetTop; + const scrollTop = document.documentElement.scrollTop; + const top = offsetTop - scrollTop; + return top <= viewPortHeight; + } + fetch('https://v6-widget.51.la/v6/{掩码ID}/quote.js').then(res => res.text()).then((data) => { + let title = ['最近活跃', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量'] + let num = data.match(/(<\/span>).*?(\/span><\/p>)/g) + + num = num.map((el) => { + let val = el.replace(/(<\/span>)/g, '') + let str = val.replace(/(<\/span><\/p>)/g, '') + return str + }) + + let statisticEl = document.getElementById('statistic') + + // 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量 + let statistic = [] + for (let i = 0; i < num.length; i++) { + if (!statisticEl) return + if (i == 0 || i == num.length - 1) continue; + statisticEl.innerHTML += '
' + title[i] + '' + num[i] + '
' + queueMicrotask(()=> { + statistic.push(new CountUp(title[i], 0, num[i], 0, 2, { + useEasing: true, + useGrouping: true, + separator: ',', + decimal: '.', + prefix: '', + suffix: '' + })) + }) + } + + function statisticUP () { + let statisticElment = document.querySelector('.about-statistic.author-content-item'); + if(isInViewPortOfOne(statisticElment)) { + for (let i = 0; i < num.length; i++) { + if (i == 0 || i == num.length - 1) continue; + statistic[i-1].start(); + } + document.removeEventListener('scroll', throttleStatisticUP); + } + } + + const selfInfoContentYear = new CountUp('selfInfo-content-year', 0, 2002, 0, 2, { + useEasing: true, + useGrouping: false, + separator: ',', + decimal: '.', + prefix: '', + suffix: '' + }) + + function scrollSelfInfoContentYear() { + let selfInfoContentYearElment = document.querySelector('.author-content-item.selfInfo.single'); + if (selfInfoContentYearElment && isInViewPortOfOne(selfInfoContentYearElment)) { + selfInfoContentYear.start() + document.removeEventListener('scroll', throttleScrollSelfInfoContentYear); + } + } + const throttleStatisticUP = btf.throttle(statisticUP, 200) + document.addEventListener('scroll', throttleStatisticUP, {passive: true}) + + const throttleScrollSelfInfoContentYear = btf.throttle(scrollSelfInfoContentYear, 200) + document.addEventListener('scroll', throttleScrollSelfInfoContentYear, {passive: true}) + }); + + 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); + }); + + var helloAboutEl = document.querySelector('.hello-about') + helloAboutEl.addEventListener("mousemove", evt => { + const mouseX = evt.offsetX; + const mouseY = evt.offsetY; + gsap.set(".cursor", { + x: mouseX, + y: mouseY, + }) + + gsap.to(".shape", { + x: mouseX, + y: mouseY, + stagger: -0.1 + }) + }) + })() + diff --git a/layout/includes/page/categories.pug b/layout/includes/page/categories.pug new file mode 100644 index 0000000..79153c8 --- /dev/null +++ b/layout/includes/page/categories.pug @@ -0,0 +1 @@ +.category-lists!= list_categories() \ No newline at end of file diff --git a/layout/includes/page/default-page.pug b/layout/includes/page/default-page.pug new file mode 100644 index 0000000..e7057f7 --- /dev/null +++ b/layout/includes/page/default-page.pug @@ -0,0 +1,2 @@ +#article-container + != page.content \ No newline at end of file diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug new file mode 100644 index 0000000..1e719fe --- /dev/null +++ b/layout/includes/page/flink.pug @@ -0,0 +1,15 @@ +#article-container + .flink + if site.data.link + each i in site.data.link + if i.class_name + .flink-name!=i.class_name + .flink-list + .btns.rounded.grid5 + each item in i.link_list + a.button(href=url_for(item.link) title=item.name target="_blank") + img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) + #text= item.name + hr + + != page.content \ 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 0000000..8caac11 --- /dev/null +++ b/layout/includes/page/tags.pug @@ -0,0 +1,2 @@ +.tag-cloud-list.is-center + !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'}) \ No newline at end of file diff --git a/layout/includes/pagination.pug b/layout/includes/pagination.pug new file mode 100644 index 0000000..c50b81a --- /dev/null +++ b/layout/includes/pagination.pug @@ -0,0 +1,37 @@ +- + var options = { + prev_text: '', + next_text: '', + mid_size: 1, + escape: false + } + +if is_post() + - let prev = theme.post_pagination === 1 ? page.prev : page.next + - let next = theme.post_pagination === 1 ? page.next : page.prev + nav#pagination.pagination-post + if(prev) + - var hasPageNext = next ? 'pull-left' : 'pull-full' + .prev-post(class=hasPageNext) + - var pagination_cover = prev.cover === false ? prev.randomcover : prev.cover + a(href=url_for(prev.path)) + img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post') + .pagination-info + .label=_p('pagination.prev') + .prev_info=prev.title + + if(next) + - var hasPagePrev = prev ? 'pull-right' : 'pull-full' + - var pagination_cover = next.cover == false ? next.randomcover : next.cover + .next-post(class=hasPagePrev) + a(href=url_for(next.path)) + img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post') + .pagination-info + .label=_p('pagination.next') + .next_info=next.title +else + nav#pagination + .pagination + if is_home() + - options.format = 'page/%d/#content-inner' + !=paginator(options) \ No newline at end of file diff --git a/layout/includes/post/post-copyright.pug b/layout/includes/post/post-copyright.pug new file mode 100644 index 0000000..824f782 --- /dev/null +++ b/layout/includes/post/post-copyright.pug @@ -0,0 +1,30 @@ +if theme.post_copyright.enable && page.copyright !== false + - let author = page.copyright_author ? page.copyright_author : config.author + - let url = page.copyright_url ? page.copyright_url : page.permalink + .post-copyright + .post-copyright__title + span.post-copyright-info + h #[=page.title] + .post-copyright__type + span.post-copyright-info + a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url + .post-copyright-m + .post-copyright-m-info + .post-copyright-a(style="display: inline-block;width: 120px") + h 作者 + .post-copyright-cc-info + h=author + .post-copyright-c(style="display: inline-block;width: 120px") + h 发布于 + .post-copyright-cc-info + h=date(page.date, config.date_format) + .post-copyright-u(style="display: inline-block;width: 120px") + h 更新于 + .post-copyright-cc-info + h=date(page.updated, config.date_format) + .post-copyright-c(style="display: inline-block;width: 120px") + h 许可协议 + .post-copyright-cc-info + a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/') + i.fab.fa-creative-commons + a(rel='noopener' target='_blank' title='CC BY 4.0' href='https://creativecommons.org/licenses/by/4.0/deed.zh') CC BY 4.0 \ No newline at end of file diff --git a/layout/includes/post/reward.pug b/layout/includes/post/reward.pug new file mode 100644 index 0000000..71daa98 --- /dev/null +++ b/layout/includes/post/reward.pug @@ -0,0 +1,13 @@ +.post-reward + .reward-button + i.fas.fa-qrcode + = ' ' + _p('donate') + .reward-main + ul.reward-all + each item in theme.reward.QR_code + - var clickTo = item.link ? item.link : item.img + li.reward-item + a(href=url_for(clickTo) target='_blank') + img.post-qr-code-img(src=url_for(item.img) alt=item.text) + .post-qr-code-desc=item.text + diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug new file mode 100644 index 0000000..716f07d --- /dev/null +++ b/layout/includes/rightside.pug @@ -0,0 +1,60 @@ +- const { readmode, translate, darkmode, aside, chat_btn } = theme +mixin rightsideItem(array) + each item in array + case item + //-when 'readmode' + if is_post() && readmode + button#readmode(type="button" title=_p('rightside.readmode_title')) + i.fas.fa-book-open + //-when 'translate' + if translate.enable + button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default + //-when 'darkmode' + if darkmode.enable && darkmode.button + button#darkmode(type="button" title=_p('rightside.night_mode_title')) + i.fas.fa-adjust + //-when 'hideAside' + if aside.enable && aside.button && page.aside !== false + button#hide-aside-btn(type="button" title=_p('rightside.aside')) + i.fas.fa-arrows-alt-h + when 'toc' + if showToc + button#mobile-toc-button.close(type="button" title=_p("rightside.toc")) + i.fas.fa-list-ul + //-when 'chat' + if chat_btn + button#chat_btn(type="button" title=_p("rightside.chat")) + i.fas.fa-sms + //-when 'comment' + if commentsJsLoad + a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment")) + i.fas.fa-comments + +#rightside + - const { enable, hide, show } = theme.rightside_item_order + - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside'] + - const showArray = enable ? show && show.split(',') : ['toc','chat','comment'] + + + #rightside-config-hide + if hideArray + +rightsideItem(hideArray) + //-#rightside-config-show + if enable + if hide + button#rightside_config(type="button" title=_p("rightside.setting")) + i.fas.fa-cog.fa-spin + else + if is_post() + if (readmode || translate.enable || (darkmode.enable && darkmode.button)) + button#rightside_config(type="button" title=_p("rightside.setting")) + i.fas.fa-cog.fa-spin + else if translate.enable || (darkmode.enable && darkmode.button) + button#rightside_config(type="button" title=_p("rightside.setting")) + i.fas.fa-cog.fa-spin + + if showArray + +rightsideItem(showArray) + + //-button#go-up(type="button" title=_p("rightside.back_to_top")) + i.fas.fa-arrow-up \ No newline at end of file diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug new file mode 100644 index 0000000..11bddf8 --- /dev/null +++ b/layout/includes/sidebar.pug @@ -0,0 +1,18 @@ +#sidebar + #menu-mask + #sidebar-menus + .avatar-img.is-center + img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar") + .sidebar-site-data.site-data.is-center + a(href=url_for(config.archive_dir) + '/') + .headline= _p('aside.articles') + .length-num= site.posts.length + a(href=url_for(config.tag_dir) + '/' ) + .headline= _p('aside.tags') + .length-num= site.tags.length + a(href=url_for(config.category_dir) + '/') + .headline= _p('aside.categories') + .length-num= site.categories.length + + hr + !=partial('includes/header/menu_item', {}, {cache: true}) diff --git a/layout/includes/third-party/aplayer.pug b/layout/includes/third-party/aplayer.pug new file mode 100644 index 0000000..c439c4c --- /dev/null +++ b/layout/includes/third-party/aplayer.pug @@ -0,0 +1,3 @@ +link(rel='stylesheet' href=url_for(theme.asset.aplayer_css) media="print" onload="this.media='all'") +script(src=url_for(theme.asset.aplayer_js)) +script(src=url_for(theme.asset.meting_js)) \ No newline at end of file diff --git a/layout/includes/third-party/card-post-count/artalk.pug b/layout/includes/third-party/card-post-count/artalk.pug new file mode 100644 index 0000000..762c88d --- /dev/null +++ b/layout/includes/third-party/card-post-count/artalk.pug @@ -0,0 +1,20 @@ +- const { server, site } = theme.artalk + +script. + (() => { + const getArtalkCount = () => { + const runWidget = () => { + Artalk.LoadCountWidget({ + server: '!{server}', + site: '!{site}', + countEl: '.artalk-count' + }) + } + + if (typeof Artalk === 'function') runWidget() + else getScript('!{theme.asset.artalk_js}').then(runWidget) + } + + + window.pjax ? getArtalkCount() : window.addEventListener('load', getArtalkCount) + })() \ No newline at end of file diff --git a/layout/includes/third-party/card-post-count/disqus.pug b/layout/includes/third-party/card-post-count/disqus.pug new file mode 100644 index 0000000..1dfe327 --- /dev/null +++ b/layout/includes/third-party/card-post-count/disqus.pug @@ -0,0 +1,16 @@ +script. + (() => { + const getCount = () => { + if (window.DISQUSWIDGETS === undefined) { + var d = document, s = d.createElement('script'); + s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js'; + s.id = 'dsq-count-scr'; + (d.head || d.body).appendChild(s); + } else { + DISQUSWIDGETS.getCount({reset: true}); + } + } + + window.pjax ? getCount() : window.addEventListener('load', getCount) + + })() diff --git a/layout/includes/third-party/card-post-count/fb.pug b/layout/includes/third-party/card-post-count/fb.pug new file mode 100644 index 0000000..eee1974 --- /dev/null +++ b/layout/includes/third-party/card-post-count/fb.pug @@ -0,0 +1,18 @@ +- const fbSDKVer = 'v15.0' +- const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}` + +script. + (()=>{ + function loadFBComment () { + if (typeof FB === 'object') FB.XFBML.parse(document.getElementById('recent-posts')) + else { + let ele = document.createElement('script') + ele.setAttribute('src','!{fbSDK}') + ele.setAttribute('async', 'true') + ele.setAttribute('defer', 'true') + ele.setAttribute('crossorigin', 'anonymous') + document.body.appendChild(ele) + } + } + window.pjax ? loadFBComment() : window.addEventListener('load', loadFBComment) + })() diff --git a/layout/includes/third-party/card-post-count/index.pug b/layout/includes/third-party/card-post-count/index.pug new file mode 100644 index 0000000..5b2685c --- /dev/null +++ b/layout/includes/third-party/card-post-count/index.pug @@ -0,0 +1,16 @@ +case theme.comments.use[0] + when 'Twikoo' + include ./twikoo.pug + when 'Disqus' + when 'Disqusjs' + include ./disqus.pug + when 'Valine' + include ./valine.pug + when 'Waline' + include ./waline.pug + when 'Facebook Comments' + include ./fb.pug + when 'Remark42' + include ./remark42.pug + when 'Artalk' + include ./artalk.pug \ No newline at end of file diff --git a/layout/includes/third-party/card-post-count/remark42.pug b/layout/includes/third-party/card-post-count/remark42.pug new file mode 100644 index 0000000..b67164f --- /dev/null +++ b/layout/includes/third-party/card-post-count/remark42.pug @@ -0,0 +1,18 @@ +- const { host, siteId, option } = theme.remark42 + +script. + (()=>{ + window.remark_config = Object.assign({ + host: '!{host}', + site_id: '!{siteId}', + },!{JSON.stringify(option)}) + + function getCount () { + const s = document.createElement('script') + s.src = remark_config.host + '/web/counter.js' + s.defer = true + document.head.appendChild(s) + } + + window.pjax ? getCount() : window.addEventListener('load', getCount) + })() \ No newline at end of file diff --git a/layout/includes/third-party/card-post-count/twikoo.pug b/layout/includes/third-party/card-post-count/twikoo.pug new file mode 100644 index 0000000..314e4ac --- /dev/null +++ b/layout/includes/third-party/card-post-count/twikoo.pug @@ -0,0 +1,37 @@ +script. + (() => { + const getCommentUrl = () => { + const eleGroup = document.querySelectorAll('#recent-posts .article-title') + let urlArray = [] + eleGroup.forEach(i=>{ + urlArray.push(i.getAttribute('href')) + }) + return urlArray + } + + const getCount = () => { + const runTwikoo = () => { + twikoo.getCommentsCount({ + envId: '!{theme.twikoo.envId}', + region: '!{theme.twikoo.region}', + urls: getCommentUrl(), + includeReply: false + }).then(function (res) { + document.querySelectorAll('#recent-posts .twikoo-count').forEach((item,index) => { + item.innerText = res[index].count + }) + }).catch(function (err) { + console.log(err) + }) + } + + if (typeof twikoo === 'object') { + runTwikoo() + } else { + getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo) + } + } + + window.pjax ? getCount() : window.addEventListener('load', getCount) + + })() \ No newline at end of file diff --git a/layout/includes/third-party/card-post-count/valine.pug b/layout/includes/third-party/card-post-count/valine.pug new file mode 100644 index 0000000..dfe9b6d --- /dev/null +++ b/layout/includes/third-party/card-post-count/valine.pug @@ -0,0 +1,20 @@ +script. + (() => { + function loadValine () { + function initValine () { + let initData = { + el: '#vcomment', + appId: '#{theme.valine.appId}', + appKey: '#{theme.valine.appKey}', + serverURLs: '#{theme.valine.serverURLs}' + } + + const valine = new Valine(initData) + } + + if (typeof Valine === 'function') initValine() + else getScript('!{url_for(theme.asset.valine)}').then(initValine) + } + + window.pjax ? loadValine() : window.addEventListener('load', loadValine) + })() diff --git a/layout/includes/third-party/card-post-count/waline.pug b/layout/includes/third-party/card-post-count/waline.pug new file mode 100644 index 0000000..c43a18d --- /dev/null +++ b/layout/includes/third-party/card-post-count/waline.pug @@ -0,0 +1,18 @@ +script. + (() => { + function loadWaline () { + function initWaline () { + let initData = { + el: null, + serverURL: '!{theme.waline.serverURL}', + comment: true + } + const waline = Waline.init(initData) + } + + if (typeof Waline === 'function') initWaline() + else getScript('!{url_for(theme.asset.waline_js)}').then(initWaline) + } + + window.pjax ? loadWaline() : window.addEventListener('load', loadWaline) + })() diff --git a/layout/includes/third-party/chat/chatra.pug b/layout/includes/third-party/chat/chatra.pug new file mode 100644 index 0000000..b6c1201 --- /dev/null +++ b/layout/includes/third-party/chat/chatra.pug @@ -0,0 +1,33 @@ +//- https://chatra.io/help/api/ +script. + (function(d, w, c) { + w.ChatraID = '#{theme.chatra.id}'; + var s = d.createElement('script'); + w[c] = w[c] || function() { + (w[c].q = w[c].q || []).push(arguments); + }; + s.async = true; + s.src = 'https://call.chatra.io/chatra.js'; + if (d.head) d.head.appendChild(s); + })(document, window, 'Chatra'); + + if (!{theme.chat_btn}) { + var chatBtnFn = () => { + var chatBtn = document.getElementById("chat_btn") + chatBtn.addEventListener("click", function(){ + Chatra('openChat') + }); + } + chatBtnFn() + } else { + if (!{theme.chat_hide_show}) { + function chatBtnHide () { + Chatra('hide') + } + function chatBtnShow () { + Chatra('show') + } + } + } + + diff --git a/layout/includes/third-party/chat/crisp.pug b/layout/includes/third-party/chat/crisp.pug new file mode 100644 index 0000000..cc57e8d --- /dev/null +++ b/layout/includes/third-party/chat/crisp.pug @@ -0,0 +1,36 @@ +script. + window.$crisp = []; + window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}"; + (function () { + d = document; + s = d.createElement("script"); + s.src = "https://client.crisp.chat/l.js"; + s.async = 1; + d.getElementsByTagName("head")[0].appendChild(s); + })(); + $crisp.push(["safe", true]) + + if (!{theme.chat_btn}) { + $crisp.push(["do", "chat:hide"]) + $crisp.push(["on", "chat:closed", function() { + $crisp.push(["do", "chat:hide"]) + }]) + var chatBtnFn = () => { + var chatBtn = document.getElementById("chat_btn") + chatBtn.addEventListener("click", function(){ + $crisp.push(["do", "chat:show"]) + $crisp.push(["do", "chat:open"]) + + }); + } + chatBtnFn() + } else { + if (!{theme.chat_hide_show}) { + function chatBtnHide () { + $crisp.push(["do", "chat:hide"]) + } + function chatBtnShow () { + $crisp.push(["do", "chat:show"]) + } + } + } \ No newline at end of file diff --git a/layout/includes/third-party/chat/daovoice.pug b/layout/includes/third-party/chat/daovoice.pug new file mode 100644 index 0000000..3c6b064 --- /dev/null +++ b/layout/includes/third-party/chat/daovoice.pug @@ -0,0 +1,40 @@ +//- https://guide.daocloud.io/daovoice/javascript-api-5869833.html +script. + (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice") + +script. + var isChatBtn = !{theme.chat_btn} + daovoice('init', { + app_id: '!{theme.daovoice.app_id}',},{ + launcher: { + disableLauncherIcon: isChatBtn // 悬浮 ICON 是否显示 + }, + }); + daovoice('update'); + + if (isChatBtn) { + var chatBtnFn = () => { + var chatBtn = document.getElementById("chat_btn") + chatBtn.addEventListener("click", function(){ + daovoice('show') + }); + } + chatBtnFn() + } else { + if (!{theme.chat_hide_show}) { + function chatBtnHide () { + daovoice('update', {},{ + launcher: { + disableLauncherIcon: true // 悬浮 ICON 是否显示 + }, + }); + } + function chatBtnShow () { + daovoice('update', {},{ + launcher: { + disableLauncherIcon: false // 悬浮 ICON 是否显示 + }, + }); + } + } + } \ No newline at end of file diff --git a/layout/includes/third-party/chat/gitter.pug b/layout/includes/third-party/chat/gitter.pug new file mode 100644 index 0000000..46f979a --- /dev/null +++ b/layout/includes/third-party/chat/gitter.pug @@ -0,0 +1,43 @@ +if theme.chat_btn + script. + ((window.gitter = {}).chat = {}).options = { + disableDefaultChat: true, + }; + document.addEventListener('gitter-sidecar-ready', (e) => { + const GitterChat = e.detail.Chat + let chat + + function initGitter () { + chat = new GitterChat({ + room: '#{theme.gitter.room}', + activationElement: '#chat_btn' + }); + } + + initGitter() + + if (!{theme.pjax.enable}) { + document.addEventListener('pjax:complete', () => { + chat.destroy() + initGitter() + }) + } + + }) +else + script. + ((window.gitter = {}).chat = {}).options = { + room: '#{theme.gitter.room}', + }; + + if (!{theme.chat_hide_show}) { + function chatBtnHide () { + document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'none' + } + + function chatBtnShow () { + document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'block' + } + } + +script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer) diff --git a/layout/includes/third-party/chat/index.pug b/layout/includes/third-party/chat/index.pug new file mode 100644 index 0000000..dc6d0f8 --- /dev/null +++ b/layout/includes/third-party/chat/index.pug @@ -0,0 +1,12 @@ +if theme.chatra && theme.chatra.enable + include ./chatra.pug +else if theme.tidio && theme.tidio.enable + include ./tidio.pug +else if theme.daovoice && theme.daovoice.enable + include ./daovoice.pug +else if theme.gitter && theme.gitter.enable + include ./gitter.pug +else if theme.crisp && theme.crisp.enable + include ./crisp.pug +else if theme.messenger && theme.messenger.enable + include ./messenger.pug \ No newline at end of file diff --git a/layout/includes/third-party/chat/messenger.pug b/layout/includes/third-party/chat/messenger.pug new file mode 100644 index 0000000..e7798ee --- /dev/null +++ b/layout/includes/third-party/chat/messenger.pug @@ -0,0 +1,42 @@ +- let { pageID, lang } = theme.messenger +- lang = theme.comments.use && theme.comments.use.includes('Facebook Comments') ? theme.facebook_comments.lang : lang + +#fb-customer-chat.fb-customerchat(page_id=pageID attribution='biz_inbox') + +script. + document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '
') + + window.fbAsyncInit = function() { + FB.init({ + xfbml: true, + version: 'v15.0' + }); + }; + + (function(d, s, id) { + var js, fjs = d.getElementsByTagName(s)[0]; + if (d.getElementById(id)) return; + js = d.createElement(s); js.id = id; + js.src = 'https://connect.facebook.net/!{lang}/sdk/xfbml.customerchat.js'; + fjs.parentNode.insertBefore(js, fjs); + }(document, 'script', 'facebook-jssdk')); + + if (!{theme.chat_btn}) { + var chatBtnFn = () => { + var chatBtn = document.getElementById("chat_btn") + chatBtn.addEventListener("click", function(){ + FB.CustomerChat.show(); + }); + } + chatBtnFn() + } else { + if (!{theme.chat_hide_show}) { + function chatBtnHide () { + FB.CustomerChat.hide() + } + function chatBtnShow () { + FB.CustomerChat.show(false) + } + } + } + diff --git a/layout/includes/third-party/chat/tidio.pug b/layout/includes/third-party/chat/tidio.pug new file mode 100644 index 0000000..6b0097f --- /dev/null +++ b/layout/includes/third-party/chat/tidio.pug @@ -0,0 +1,41 @@ +script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async) + +if theme.chat_btn + script. + function onTidioChatApiReady() { + window.tidioChatApi.hide(); + window.tidioChatApi.on("close", function() { + window.tidioChatApi.hide(); + }); + } + if (window.tidioChatApi) { + window.tidioChatApi.on("ready", onTidioChatApiReady); + } else { + document.addEventListener("tidioChat-ready", onTidioChatApiReady); + } + + var chatBtnFn = () => { + document.getElementById("chat_btn").addEventListener("click", function(){ + window.tidioChatApi.show(); + window.tidioChatApi.open(); + }); + } + chatBtnFn() + +else if theme.chat_hide_show + script. + function chatBtnHide () { + if (window.tidioChatApi) { + //- window.tidioChatApi.hide(); + document.getElementById('tidio-chat').style.display= 'none' + } + } + + function chatBtnShow () { + if (window.tidioChatApi) { + //- window.tidioChatApi.show(); + document.getElementById('tidio-chat').style.display= 'block' + } + } + + diff --git a/layout/includes/third-party/comments/artalk.pug b/layout/includes/third-party/comments/artalk.pug new file mode 100644 index 0000000..97a5cd5 --- /dev/null +++ b/layout/includes/third-party/comments/artalk.pug @@ -0,0 +1,45 @@ +- const { server, site, option } = theme.artalk + +script. + function addArtalkSource () { + const ele = document.createElement('link') + ele.rel = 'stylesheet' + ele.href= '!{theme.asset.artalk_css}' + document.getElementsByTagName('head')[0].appendChild(ele) + } + + function loadArtalk () { + function initArtalk () { + window.artalkItem = new Artalk(Object.assign({ + el: '#artalk-wrap', + server: '!{server}', + site: '!{site}', + pageKey: location.pathname, + darkMode: document.documentElement.getAttribute('data-theme') === 'dark', + countEl: '.artalk-count' + },!{JSON.stringify(option)})) + } + + if (typeof window.artalkItem === 'object') setTimeout(()=>{initArtalk()},200) + else { + addArtalkSource() + typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk) + : setTimeout(()=>{initArtalk()},200) + } + } + + document.getElementById('darkmode').addEventListener('click',()=> { + if (typeof window.artalkItem !== 'object') return + let isDark = document.documentElement.getAttribute('data-theme') === 'dark' + window.artalkItem.setDarkMode(!isDark) + }) + + + if ('!{theme.comments.use[0]}' === 'Artalk' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk) + else loadArtalk() + } else { + function loadOtherComment () { + loadArtalk() + } + } \ No newline at end of file diff --git a/layout/includes/third-party/comments/disqus.pug b/layout/includes/third-party/comments/disqus.pug new file mode 100644 index 0000000..caa1222 --- /dev/null +++ b/layout/includes/third-party/comments/disqus.pug @@ -0,0 +1,51 @@ +- let disqusPageTitle = page.title.replace(/'/ig,"\\'") + +script. + function loadDisqus () { + var disqus_config = function () { + this.page.url = '!{ page.permalink }' + this.page.identifier = '!{ url_for(page.path) }' + this.page.title = '!{ disqusPageTitle }' + }; + + window.disqusReset = () => { + DISQUS.reset({ + reload: true, + config: disqus_config + }) + } + + if (window.DISQUS) disqusReset() + else { + (function() { + var d = document, s = d.createElement('script'); + s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js'; + s.setAttribute('data-timestamp', +new Date()); + (d.head || d.body).appendChild(s); + })(); + } + + document.getElementById('darkmode').addEventListener('click', () => { + setTimeout(() => window.disqusReset(), 200) + }) + } + + if ('!{theme.comments.use[0]}' === 'Disqus' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqus_thread'), loadDisqus) + else loadDisqus() + } else { + function loadOtherComment () { + loadDisqus() + } + } + +if is_post() && !theme.comments.lazyload && theme.comments.count && theme.comments.use[0] === 'Disqus' + script. + if (window.DISQUSWIDGETS === undefined) { + var d = document, s = d.createElement('script'); + s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js'; + s.id = 'dsq-count-scr'; + (d.head || d.body).appendChild(s); + } else { + DISQUSWIDGETS.getCount({reset: true}); + } diff --git a/layout/includes/third-party/comments/disqusjs.pug b/layout/includes/third-party/comments/disqusjs.pug new file mode 100644 index 0000000..1e66555 --- /dev/null +++ b/layout/includes/third-party/comments/disqusjs.pug @@ -0,0 +1,64 @@ +- let disqusjsPageTitle = page.title.replace(/'/ig,"\\'") + +script. + function loadDisqusjs () { + function addDisqusjsCSS () { + const ele = document.createElement('link') + ele.rel = 'stylesheet' + ele.href= '!{url_for(theme.asset.disqusjs_css)}' + document.getElementsByTagName('head')[0].appendChild(ele) + } + + function initDisqusjs () { + window.disqusjs = null + disqusjs = new DisqusJS(Object.assign({ + shortname: '!{theme.disqusjs.shortname}', + identifier: '!{ url_for(page.path) }', + url: '!{ page.permalink }', + title: '!{ disqusjsPageTitle }', + apikey: '!{theme.disqusjs.apikey}', + },!{JSON.stringify(theme.disqusjs.option)})) + + disqusjs.render(document.getElementById('disqusjs')) + } + + const themeChange = () => { + const ele = document.getElementById('disqus_thread') + if(!ele) return + disqusjs.destroy() + initDisqusjs() + } + + + document.getElementById('darkmode').addEventListener('click', themeChange) + + if (window.disqusJsLoad) initDisqusjs() + else { + addDisqusjsCSS() + getScript('!{url_for(theme.asset.disqusjs)}').then(initDisqusjs) + window.disqusJsLoad = true + } + } + + if ('!{theme.comments.use[0]}' === 'Disqusjs' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqusjs'), loadDisqusjs) + else loadDisqusjs() + } + else { + function loadOtherComment () { + loadDisqusjs() + } + } + + +if is_post() && !theme.comments.lazyload && theme.comments.count && theme.comments.use[0] === 'Disqusjs' + script. + if (window.DISQUSWIDGETS === undefined) { + var d = document, s = d.createElement('script'); + s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js'; + s.id = 'dsq-count-scr'; + (d.head || d.body).appendChild(s); + } else { + DISQUSWIDGETS.getCount({reset: true}); + } + diff --git a/layout/includes/third-party/comments/facebook_comments.pug b/layout/includes/third-party/comments/facebook_comments.pug new file mode 100644 index 0000000..5d4d399 --- /dev/null +++ b/layout/includes/third-party/comments/facebook_comments.pug @@ -0,0 +1,36 @@ +- const fbSDKVer = 'v15.0' +- const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}` + +script. + function loadFBComment () { + document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '
') + + const themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' + const $fbComment = document.getElementsByClassName('fb-comments')[0] + $fbComment.setAttribute('data-colorscheme',themeNow) + $fbComment.setAttribute('data-href', '!{urlNoIndex(page.permalink)}') + + if (typeof FB === 'object') { + FB.XFBML.parse(document.getElementsByClassName('post-meta-commentcount')[0]) + FB.XFBML.parse(document.getElementById('post-comment')) + } + else { + let ele = document.createElement('script') + ele.setAttribute('src','!{fbSDK}') + ele.setAttribute('async', 'true') + ele.setAttribute('defer', 'true') + ele.setAttribute('crossorigin', 'anonymous') + ele.setAttribute('id', 'facebook-jssdk') + document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele) + } + } + + if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment) + else loadFBComment() + } else { + function loadOtherComment () { + loadFBComment() + } + } + diff --git a/layout/includes/third-party/comments/giscus.pug b/layout/includes/third-party/comments/giscus.pug new file mode 100644 index 0000000..df19568 --- /dev/null +++ b/layout/includes/third-party/comments/giscus.pug @@ -0,0 +1,49 @@ +- const { repo, repo_id, category_id, option } = theme.giscus +- const themes = theme.giscus.theme +script. + function loadGiscus () { + let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}' + + const config = Object.assign({ + src: 'https://giscus.app/client.js', + 'data-repo': '!{repo}', + 'data-repo-id': '!{repo_id}', + 'data-category-id': '!{category_id}', + 'data-mapping': 'pathname', + 'data-theme': nowTheme, + 'data-reactions-enabled': '1', + crossorigin: 'anonymous', + async: true + },!{JSON.stringify(option)}) + + let ele = document.createElement('script') + for (let key in config) { + ele.setAttribute(key, config[key]) + } + document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele) + } + + function changeGiscusTheme () { + const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}' + + function sendMessage(message) { + const iframe = document.querySelector('iframe.giscus-frame'); + if (!iframe) return; + iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app'); + } + + sendMessage({ + setConfig: { + theme: theme + } + }); + } + + if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus) + else loadGiscus() + } else { + function loadOtherComment () { + loadGiscus() + } + } diff --git a/layout/includes/third-party/comments/gitalk.pug b/layout/includes/third-party/comments/gitalk.pug new file mode 100644 index 0000000..fccb64d --- /dev/null +++ b/layout/includes/third-party/comments/gitalk.pug @@ -0,0 +1,48 @@ +script. + function addGitalkSource () { + const ele = document.createElement('link') + ele.rel = 'stylesheet' + ele.href= '!{url_for(theme.asset.gitalk_css)}' + document.getElementsByTagName('head')[0].appendChild(ele) + } + + function loadGitalk () { + function initGitalk () { + var gitalk = new Gitalk(Object.assign({ + clientID: '!{theme.gitalk.client_id}', + clientSecret: '!{theme.gitalk.client_secret}', + repo: '!{theme.gitalk.repo}', + owner: '!{theme.gitalk.owner}', + admin: ['!{theme.gitalk.admin}'], + id: '!{md5(page.path)}', + updateCountCallback: commentCount + },!{JSON.stringify(theme.gitalk.option)})) + + gitalk.render('gitalk-container') + } + + if (typeof Gitalk === 'function') initGitalk() + else { + addGitalkSource() + getScript('!{url_for(theme.asset.gitalk)}').then(initGitalk) + } + } + + function commentCount(n){ + let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count') + if (isCommentCount) { + isCommentCount.innerHTML= n + } + } + + if ('!{theme.comments.use[0]}' === 'Gitalk' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('gitalk-container'), loadGitalk) + else loadGitalk() + } else { + function loadOtherComment () { + loadGitalk() + } + } + + + diff --git a/layout/includes/third-party/comments/index.pug b/layout/includes/third-party/comments/index.pug new file mode 100644 index 0000000..0821ae5 --- /dev/null +++ b/layout/includes/third-party/comments/index.pug @@ -0,0 +1,46 @@ +- let defaultComment = theme.comments.use[0] +hr +#post-comment + .comment-head + .comment-headline + i.fas.fa-comments.fa-fw + span= ' ' + _p('comment') + + if theme.comments.use.length > 1 + #comment-switch + span.first-comment=defaultComment + span.switch-btn + span.second-comment=theme.comments.use[1] + + + .comment-wrap + each name in theme.comments.use + div + case name + when 'Disqus' + #disqus_thread + when 'Valine' + #vcomment.vcomment + when 'Disqusjs' + #disqusjs + when 'Livere' + #lv-container(data-id="city" data-uid=theme.livere.uid) + when 'Gitalk' + #gitalk-container + when 'Utterances' + #utterances-wrap + when 'Twikoo' + #twikoo-wrap + when 'Waline' + #waline-wrap + when 'Giscus' + #giscus-wrap + when 'Facebook Comments' + .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light' + data-numposts= theme.facebook_comments.pageSize || 10 + data-order-by= theme.facebook_comments.order_by || 'social' + data-width="100%") + when 'Remark42' + #remark42 + when 'Artalk' + #artalk-wrap diff --git a/layout/includes/third-party/comments/js.pug b/layout/includes/third-party/comments/js.pug new file mode 100644 index 0000000..bf1d872 --- /dev/null +++ b/layout/includes/third-party/comments/js.pug @@ -0,0 +1,26 @@ +each name in theme.comments.use + case name + when 'Valine' + !=partial('includes/third-party/comments/valine', {}, {cache: true}) + when 'Disqus' + include ./disqus.pug + when 'Disqusjs' + include ./disqusjs.pug + when 'Livere' + !=partial('includes/third-party/comments/livere', {}, {cache: true}) + when 'Gitalk' + include ./gitalk.pug + when 'Utterances' + !=partial('includes/third-party/comments/utterances', {}, {cache: true}) + when 'Twikoo' + !=partial('includes/third-party/comments/twikoo', {}, {cache: true}) + when 'Waline' + !=partial('includes/third-party/comments/waline', {}, {cache: true}) + when 'Giscus' + !=partial('includes/third-party/comments/giscus', {}, {cache: true}) + when 'Facebook Comments' + include ./facebook_comments.pug + when 'Remark42' + !=partial('includes/third-party/comments/remark42', {}, {cache: true}) + when 'Artalk' + !=partial('includes/third-party/comments/artalk', {}, {cache: true}) \ No newline at end of file diff --git a/layout/includes/third-party/comments/livere.pug b/layout/includes/third-party/comments/livere.pug new file mode 100644 index 0000000..85b6d78 --- /dev/null +++ b/layout/includes/third-party/comments/livere.pug @@ -0,0 +1,26 @@ +script. + function loadLivere () { + if (typeof LivereTower === 'object') { + window.LivereTower.init() + } + else { + (function(d, s) { + var j, e = d.getElementsByTagName(s)[0]; + if (typeof LivereTower === 'function') { return; } + j = d.createElement(s); + j.src = 'https://cdn-city.livere.com/js/embed.dist.js'; + j.async = true; + e.parentNode.insertBefore(j, e); + })(document, 'script'); + } + } + + if ('!{theme.comments.use[0]}' === 'Livere' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('lv-container'), loadLivere) + else loadLivere() + } + else { + function loadOtherComment () { + loadLivere() + } + } \ No newline at end of file diff --git a/layout/includes/third-party/comments/remark42.pug b/layout/includes/third-party/comments/remark42.pug new file mode 100644 index 0000000..d6d49a6 --- /dev/null +++ b/layout/includes/third-party/comments/remark42.pug @@ -0,0 +1,67 @@ +- const { host, siteId, option } = theme.remark42 +script. + var remark_config = Object.assign({ + host: '!{host}', + site_id: '!{siteId}', + components: ['embed'], + theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' + },!{JSON.stringify(option)}) + + function addRemark42(){ + for (let i = 0; i < remark_config.components.length; i++) { + const s = document.createElement('script') + s.src = remark_config.host + '/web/' + remark_config.components[i] + '.js' + s.defer = true + document.head.appendChild(s) + } + } + + function initRemark42() { + if (window.REMARK42) { + if (this.remark42Instance) { + this.remark42Instance.destroy() + } + + this.remark42Instance = window.REMARK42.createInstance({ + ...remark_config + }) + } + } + + function getCount () { + const ele = document.querySelector('.remark42__counter') + if (ele) { + const s = document.createElement('script') + s.src = remark_config.host + '/web/counter.js' + s.defer = true + document.head.appendChild(s) + } + } + + function loadRemark42 () { + if (window.REMARK42) { + this.initRemark42() + getCount() + } else { + addRemark42() + window.addEventListener('REMARK42::ready', () => { + this.initRemark42() + getCount() + }) + } + } + + document.getElementById('darkmode').addEventListener('click',()=>{ + if (!window.REMARK42) return + let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark' + window.REMARK42.changeTheme(theme) + }) + + if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42) + else loadRemark42() + } else { + function loadOtherComment () { + loadRemark42() + } + } diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug new file mode 100644 index 0000000..437a42f --- /dev/null +++ b/layout/includes/third-party/comments/twikoo.pug @@ -0,0 +1,53 @@ +- const { envId, region, option } = theme.twikoo +- const { use, lazyload, count } = theme.comments + +script. + (()=>{ + const init = () => { + twikoo.init(Object.assign({ + el: '#twikoo-wrap', + envId: '!{envId}', + region: '!{region}', + onCommentLoaded: function () { + btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)')) + } + }, !{JSON.stringify(option)})) + } + + const getCount = () => { + const countELement = document.getElementById('twikoo-count') + if(!countELement) return + twikoo.getCommentsCount({ + envId: '!{envId}', + region: '!{region}', + urls: [window.location.pathname], + includeReply: false + }).then(function (res) { + countELement.innerText = res[0].count + }).catch(function (err) { + console.error(err); + }); + } + + const runFn = () => { + init() + !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''} + } + + const loadTwikoo = () => { + if (typeof twikoo === 'object') { + setTimeout(runFn,0) + return + } + getScript('!{url_for(theme.asset.twikoo)}').then(runFn) + } + + if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) { + if (!{lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo) + else loadTwikoo() + } else { + window.loadOtherComment = () => { + loadTwikoo() + } + } + })() \ No newline at end of file diff --git a/layout/includes/third-party/comments/utterances.pug b/layout/includes/third-party/comments/utterances.pug new file mode 100644 index 0000000..7f61831 --- /dev/null +++ b/layout/includes/third-party/comments/utterances.pug @@ -0,0 +1,34 @@ +script. + function loadUtterances () { + let ele = document.createElement('script') + ele.setAttribute('id', 'utterances_comment') + ele.setAttribute('src', 'https://utteranc.es/client.js') + ele.setAttribute('repo', '!{theme.utterances.repo}') + ele.setAttribute('issue-term', '!{theme.utterances.issue_term}') + let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}' + ele.setAttribute('theme', nowTheme) + ele.setAttribute('crossorigin', 'anonymous') + ele.setAttribute('async', 'true') + document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele) + } + + function utterancesTheme () { + const iframe = document.querySelector('.utterances-frame') + if (iframe) { + const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}' + const message = { + type: 'set-theme', + theme: theme + }; + iframe.contentWindow.postMessage(message, 'https://utteranc.es'); + } + } + + if ('!{theme.comments.use[0]}' === 'Utterances' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances) + else loadUtterances() + } else { + function loadOtherComment () { + loadUtterances() + } + } diff --git a/layout/includes/third-party/comments/valine.pug b/layout/includes/third-party/comments/valine.pug new file mode 100644 index 0000000..025849e --- /dev/null +++ b/layout/includes/third-party/comments/valine.pug @@ -0,0 +1,33 @@ +- let emojiMaps = '""' +if site.data.valine + - emojiMaps = JSON.stringify(site.data.valine) + +script. + function loadValine () { + function initValine () { + const valine = new Valine(Object.assign({ + el: '#vcomment', + appId: '#{theme.valine.appId}', + appKey: '#{theme.valine.appKey}', + avatar: '#{theme.valine.avatar}', + serverURLs: '#{theme.valine.serverURLs}', + emojiMaps: !{emojiMaps}, + path: window.location.pathname, + visitor: #{theme.valine.visitor} + }, !{JSON.stringify(theme.valine.option)})) + } + + if (typeof Valine === 'function') initValine() + else getScript('!{url_for(theme.asset.valine)}').then(initValine) + } + + if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('vcomment'),loadValine) + else setTimeout(loadValine, 0) + } else { + function loadOtherComment () { + loadValine() + } + } + + diff --git a/layout/includes/third-party/comments/waline.pug b/layout/includes/third-party/comments/waline.pug new file mode 100644 index 0000000..06e8078 --- /dev/null +++ b/layout/includes/third-party/comments/waline.pug @@ -0,0 +1,40 @@ +- const { serverURL, option, pageview } = theme.waline +- const { lazyload, count, use } = theme.comments + +script. + function loadWaline () { + function insertCSS () { + const link = document.createElement("link") + link.rel = "stylesheet" + link.href = "!{url_for(theme.asset.waline_css)}" + document.head.appendChild(link) + } + + function initWaline () { + const waline = Waline.init(Object.assign({ + el: '#waline-wrap', + serverURL: '!{serverURL}', + pageview: !{lazyload ? false : pageview}, + dark: 'html[data-theme="dark"]', + path: window.location.pathname, + comment: !{lazyload ? false : count}, + }, !{JSON.stringify(option)})) + } + + if (typeof Waline === 'function') initWaline() + else { + insertCSS() + getScript('!{url_for(theme.asset.waline_js)}').then(initWaline) + } + } + + if ('!{use[0]}' === 'Waline' || !!{lazyload}) { + if (!{lazyload}) btf.loadComment(document.getElementById('waline-wrap'),loadWaline) + else setTimeout(loadWaline, 0) + } else { + function loadOtherComment () { + loadWaline() + } + } + + diff --git a/layout/includes/third-party/effect.pug b/layout/includes/third-party/effect.pug new file mode 100644 index 0000000..275297c --- /dev/null +++ b/layout/includes/third-party/effect.pug @@ -0,0 +1,35 @@ +if theme.fireworks && theme.fireworks.enable + canvas.fireworks(mobile=`${theme.fireworks.mobile}`) + script(src=url_for(theme.asset.fireworks)) + +if (theme.canvas_ribbon && theme.canvas_ribbon.enable) + script(defer id="ribbon" src=url_for(theme.asset.canvas_ribbon) size=theme.canvas_ribbon.size + alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex mobile=`${theme.canvas_ribbon.mobile}` data-click=`${theme.canvas_ribbon.click_to_change}`) + +if (theme.canvas_fluttering_ribbon && theme.canvas_fluttering_ribbon.enable) + script(defer id="fluttering_ribbon" mobile=`${theme.canvas_fluttering_ribbon.mobile}` src=url_for(theme.asset.canvas_fluttering_ribbon)) + +if (theme.canvas_nest && theme.canvas_nest.enable) + script#canvas_nest(defer color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count mobile=`${theme.canvas_nest.mobile}` src=url_for(theme.asset.canvas_nest)) + +if theme.activate_power_mode.enable + script(src=url_for(theme.asset.activate_power_mode)) + script. + POWERMODE.colorful = !{theme.activate_power_mode.colorful}; + POWERMODE.shake = !{theme.activate_power_mode.shake}; + POWERMODE.mobile = !{theme.activate_power_mode.mobile}; + document.body.addEventListener('input', POWERMODE); + +//- 鼠標特效 +if theme.click_heart && theme.click_heart.enable + script#click-heart(src=url_for(theme.asset.click_heart) async mobile=`${theme.click_heart.mobile}`) + +if theme.ClickShowText && theme.ClickShowText.enable + script#click-show-text( + src= url_for(theme.asset.ClickShowText) + data-mobile= `${theme.ClickShowText.mobile}` + data-text= theme.ClickShowText.text.join(",") + data-fontsize= theme.ClickShowText.fontSize + data-random= `${theme.ClickShowText.random}` + async + ) \ No newline at end of file diff --git a/layout/includes/third-party/math/index.pug b/layout/includes/third-party/math/index.pug new file mode 100644 index 0000000..2b16302 --- /dev/null +++ b/layout/includes/third-party/math/index.pug @@ -0,0 +1,18 @@ +if theme.mathjax && theme.mathjax.enable + if theme.mathjax.per_page + if is_post() || is_page() + include ./mathjax.pug + else + if page.mathjax + include ./mathjax.pug + +if theme.katex && theme.katex.enable + if theme.katex.per_page + if is_post() || is_page() + include ./katex.pug + else + if page.katex + include ./katex.pug + +if theme.mermaid.enable + include ./mermaid.pug \ No newline at end of file diff --git a/layout/includes/third-party/math/katex.pug b/layout/includes/third-party/math/katex.pug new file mode 100644 index 0000000..c1f0bd6 --- /dev/null +++ b/layout/includes/third-party/math/katex.pug @@ -0,0 +1,9 @@ +link(rel="stylesheet" type="text/css" href=url_for(theme.asset.katex)) +script(src=url_for(theme.asset.katex_copytex)) +script. + (() => { + document.querySelectorAll('#article-container span.katex-display').forEach(item => { + btf.wrap(item, 'div', { class: 'katex-wrap'}) + }) + })() + \ No newline at end of file diff --git a/layout/includes/third-party/math/mathjax.pug b/layout/includes/third-party/math/mathjax.pug new file mode 100644 index 0000000..229d472 --- /dev/null +++ b/layout/includes/third-party/math/mathjax.pug @@ -0,0 +1,47 @@ +//- Mathjax 3 +script. + if (!window.MathJax) { + window.MathJax = { + tex: { + inlineMath: [ ['$','$'], ["\\(","\\)"]], + tags: 'ams' + }, + chtml: { + scale: 1.1 + }, + options: { + renderActions: { + findScript: [10, doc => { + for (const node of document.querySelectorAll('script[type^="math/tex"]')) { + const display = !!node.type.match(/; *mode=display/) + const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display) + const text = document.createTextNode('') + node.parentNode.replaceChild(text, node) + math.start = {node: text, delim: '', n: 0} + math.end = {node: text, delim: '', n: 0} + doc.math.push(math) + } + }, ''], + insertScript: [200, () => { + document.querySelectorAll('mjx-container').forEach(node => { + if (node.hasAttribute('display')) { + btf.wrap(node, 'div', { class: 'mathjax-overflow' }) + } else { + btf.wrap(node, 'span', { class: 'mathjax-overflow' }) + } + }); + }, '', false] + } + } + } + + const script = document.createElement('script') + script.src = '!{url_for(theme.asset.mathjax)}' + script.id = 'MathJax-script' + script.async = true + document.head.appendChild(script) + } else { + MathJax.startup.document.state(0) + MathJax.texReset() + MathJax.typeset() + } \ No newline at end of file diff --git a/layout/includes/third-party/math/mermaid.pug b/layout/includes/third-party/math/mermaid.pug new file mode 100644 index 0000000..5b7b496 --- /dev/null +++ b/layout/includes/third-party/math/mermaid.pug @@ -0,0 +1,26 @@ +script. + (() => { + const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap') + if ($mermaidWrap.length) { + window.runMermaid = () => { + window.loadMermaid = true + const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}' + + Array.from($mermaidWrap).forEach((item, index) => { + const mermaidSrc = item.firstElementChild + const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n' + const mermaidID = 'mermaid-' + index + const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent + mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => { + mermaidSrc.insertAdjacentHTML('afterend', svgCode) + }) + }) + } + + const loadMermaid = () => { + window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid) + } + + window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid) + } + })() \ No newline at end of file diff --git a/layout/includes/third-party/newest-comments/artalk.pug b/layout/includes/third-party/newest-comments/artalk.pug new file mode 100644 index 0000000..a51df13 --- /dev/null +++ b/layout/includes/third-party/newest-comments/artalk.pug @@ -0,0 +1,82 @@ +- const { server, option } = theme.artalk +- const avatarCdn = option !== null && option.gravatar ? option.gravatar.mirror : 'https://sdn.geekzu.org/avatar/' +- const avatarDefault = option !== null && option.gravatar ? option.gravatar.default : 'mp' + +script. + window.addEventListener('load', () => { + const changeContent = (content) => { + if (content === '') return content + + content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link + content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url + content = content.replace(/
.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '
'
+
+          if (!{theme.newest_comments.avatar}) {
+            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            result += `${array[i].nick}`
+          }
+
+          result += `

+          ${array[i].content}
+          
${array[i].nick} / 

+          
`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
+
+    const getComment = () => {
+      fetch('!{server}/api/stat?type=latest_comments&limit=!{theme.newest_comments.limit}',{method: "POST"})
+        .then(response => response.json())
+        .then(d => {
+          const artalk = d.data.map(function (e) {
+            return {
+              'avatar': '!{avatarCdn}' + e.email_encrypted + '?d=!{avatarDefault}',
+              'content': changeContent(e.content_marked),
+              'nick': e.nick,
+              'url': e.page_url,
+              'date': e.date,
+            }
+          })
+          saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24))
+          generateHtml(artalk)
+        }).catch(e => {
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
+          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+        })
+    }
+
+    const newestCommentInit = () => {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
+        const data = saveToLocal.get('artalk-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
+        }
+      }
+    }
+
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })
diff --git a/layout/includes/third-party/newest-comments/disqus-comment.pug b/layout/includes/third-party/newest-comments/disqus-comment.pug
new file mode 100644
index 0000000..5b95e74
--- /dev/null
+++ b/layout/includes/third-party/newest-comments/disqus-comment.pug
@@ -0,0 +1,82 @@
+script.
+  window.addEventListener('load', () => {
+    const changeContent = (content) => {
+      if (content === '') return content
+
+      content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+      content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+      content = content.replace(/.*?<\/code>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const getComment = () => {
+      fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{apiKey}')
+        .then(response => response.json())
+        .then(data => {
+          const disqusArray = data.response.map(item => {
+            return {
+              'avatar': item.author.avatar.cache,
+              'content': changeContent(item.message),
+              'nick': item.author.name,
+              'url': item.url,
+              'date': item.createdAt
+            }
+          })
+
+          saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), !{theme.newest_comments.storage}/(60*24))
+          generateHtml(disqusArray)
+        }).catch(e => {
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
+          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+        })
+    }
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '
'
+
+          if (!{theme.newest_comments.avatar}) {
+            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            result += `${array[i].nick}`
+          }
+          
+          result += `

+          ${array[i].content}
+          
${array[i].nick}

+          
`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
+
+    const newestCommentInit = () => {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
+        const data = saveToLocal.get('disqus-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
+        }
+      }
+    }
+
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })
+
+
+
diff --git a/layout/includes/third-party/newest-comments/github-issues.pug b/layout/includes/third-party/newest-comments/github-issues.pug
new file mode 100644
index 0000000..2153b11
--- /dev/null
+++ b/layout/includes/third-party/newest-comments/github-issues.pug
@@ -0,0 +1,109 @@
+script.
+  window.addEventListener('load', () => {
+    const changeContent = (content) => {
+      if (content === '') return content
+
+      content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+      content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+      content = content.replace(/
.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const findTrueUrl = (array) => {
+      Promise.all(array.map(item =>
+        fetch(item.url).then(resp => resp.json()).then(data => {
+          const urlArray = data.body.match(/(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?/ig)
+          if (data.user.login === 'utterances-bot') {
+            return urlArray.pop()
+          } else {
+            return urlArray.shift()
+          }
+        })
+      )).then(res => {
+          array = array.map((i,index)=> {
+            return {
+              ...i,
+              url: res[index]
+            }
+          })
+
+          saveToLocal.set('github-newest-comments', JSON.stringify(array), !{theme.newest_comments.storage}/(60*24))
+          generateHtml(array)
+      });
+    }
+
+    const getComment = () => {
+      fetch('https://api.github.com/repos/!{userRepo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1',{
+        "headers": {
+          Accept: 'application/vnd.github.v3.html+json'
+        }
+      })
+        .then(response => response.json())
+        .then(data => {
+          const githubArray = data.map(item => {
+            return {
+              'avatar': item.user.avatar_url,
+              'content': changeContent(item.body_html),
+              'nick': item.user.login,
+              'url': item.issue_url,
+              'date': item.updated_at,
+              'githubUrl': item.html_url
+            }
+          })
+          findTrueUrl(githubArray)
+        }).catch(e => {
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
+          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+        })
+    }
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '
'
+
+          if (!{theme.newest_comments.avatar}) {
+            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            result += `${array[i].nick}`
+          }
+
+          result += `

+          ${array[i].content}
+          
${array[i].nick} / 

+          
`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
+
+    const newestCommentInit = () => {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
+        const data = saveToLocal.get('github-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
+        }
+      }
+    }
+
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })
+
+
+
+
diff --git a/layout/includes/third-party/newest-comments/index.pug b/layout/includes/third-party/newest-comments/index.pug
new file mode 100644
index 0000000..8ceaccf
--- /dev/null
+++ b/layout/includes/third-party/newest-comments/index.pug
@@ -0,0 +1,30 @@
+- let { use } = theme.comments
+
+if use
+  - let forum,apiKey,userRepo
+  case use[0]
+    when 'Valine'
+      include ./valine.pug
+    when 'Waline'
+      include ./waline.pug
+    when 'Twikoo'
+      include ./twikoo-comment.pug
+    when 'Disqus'
+      - forum = theme.disqus.shortname
+      - apiKey = theme.disqus.apikey
+      include ./disqus-comment.pug
+    when 'Disqusjs'
+      - forum = theme.disqusjs.shortname
+      - apiKey = theme.disqusjs.apikey
+      include ./disqus-comment.pug
+    when 'Gitalk'
+      - let { repo,owner } = theme.gitalk
+      - userRepo = owner + '/' + repo
+      include ./github-issues.pug
+    when 'Utterances'
+      - userRepo = theme.utterances.repo
+      include ./github-issues.pug
+    when 'Remark42'
+      include ./remark42.pug
+    when 'Artalk'
+      include ./artalk.pug
\ No newline at end of file
diff --git a/layout/includes/third-party/newest-comments/remark42.pug b/layout/includes/third-party/newest-comments/remark42.pug
new file mode 100644
index 0000000..8ead708
--- /dev/null
+++ b/layout/includes/third-party/newest-comments/remark42.pug
@@ -0,0 +1,80 @@
+- const { host, siteId } = theme.remark42
+
+script.
+  window.addEventListener('load', () => {
+    const changeContent = (content) => {
+      if (content === '') return content
+
+      content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+      content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+      content = content.replace(/
.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '
'
+
+          if (!{theme.newest_comments.avatar}) {
+            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            result += `${array[i].nick}`
+          }
+
+          result += `

+          ${array[i].content}
+          
${array[i].nick} / 

+          
`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
+
+    const getComment = () => {
+      fetch('!{host}/api/v1/last/!{theme.newest_comments.limit}?site=!{siteId}')
+        .then(response => response.json())
+        .then(data => {
+          const remark42 = data.map(function (e) {
+            return {
+              'avatar': e.user.picture,
+              'content': changeContent(e.text),
+              'nick': e.user.name,
+              'url': e.locator.url,
+              'date': e.time,
+            }
+          })
+          saveToLocal.set('remark42-newest-comments', JSON.stringify(remark42), !{theme.newest_comments.storage}/(60*24))
+          generateHtml(remark42)
+        }).catch(e => {
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
+          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+        })
+    }
+
+    const newestCommentInit = () => {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
+        const data = saveToLocal.get('remark42-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
+        }
+      }
+    }
+
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })
diff --git a/layout/includes/third-party/newest-comments/twikoo-comment.pug b/layout/includes/third-party/newest-comments/twikoo-comment.pug
new file mode 100644
index 0000000..e362623
--- /dev/null
+++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug
@@ -0,0 +1,93 @@
+script.
+  window.addEventListener('load', () => {
+    const changeContent = (content) => {
+      if (content === '') return content
+
+      content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+      content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+      content = content.replace(/
.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const getComment = () => {
+      const runTwikoo = () => {
+        twikoo.getRecentComments({
+          envId: '!{theme.twikoo.envId}',
+          region: '!{theme.twikoo.region}',
+          pageSize: !{theme.newest_comments.limit},
+          includeReply: true
+        }).then(function (res) {
+          const twikooArray = res.map(e => {
+            return {
+              'content': changeContent(e.comment),
+              'avatar': e.avatar,
+              'nick': e.nick,
+              'url': e.url + '#' + e.id,
+              'date': new Date(e.created).toISOString()
+            }
+          })
+
+          saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), !{theme.newest_comments.storage}/(60*24))
+          generateHtml(twikooArray)
+        }).catch(function (err) {
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
+          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+        })
+      }
+
+      if (typeof twikoo === 'object') {
+        runTwikoo()
+      } else {
+        getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
+      }
+    }
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '
'
+
+          if (!{theme.newest_comments.avatar}) {
+            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            result += `${array[i].nick}`
+          }
+          
+          result += `

+          ${array[i].content}
+          
${array[i].nick} / 

+          
`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
+
+    const newestCommentInit = () => {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
+        const data = saveToLocal.get('twikoo-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
+        }
+      }
+    }
+
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })
+
+
+
diff --git a/layout/includes/third-party/newest-comments/valine.pug b/layout/includes/third-party/newest-comments/valine.pug
new file mode 100644
index 0000000..ef0bb10
--- /dev/null
+++ b/layout/includes/third-party/newest-comments/valine.pug
@@ -0,0 +1,99 @@
+- let default_avatar = theme.valine.avatar
+
+script(src=url_for(theme.asset.blueimp_md5))
+script.
+  window.addEventListener('load', () => {
+    const changeContent = (content) => {
+      if (content === '') return content
+
+      content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+      content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+      content = content.replace(/
.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const getIcon = (icon, mail) => {
+      if (icon) return icon
+      let defaultIcon = '!{ default_avatar ? `?d=${default_avatar}` : ''}'
+      let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase()) + defaultIcon}`
+      return iconUrl
+    }
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '
'
+
+          if (!{theme.newest_comments.avatar}) {
+            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            result += `${array[i].nick}`
+          }
+
+          result += `

+          ${array[i].content}
+          
${array[i].nick} / 

+          
`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
+
+    const getComment = () => {
+      const serverURL = '!{theme.valine.serverURLs || `https://${theme.valine.appId.substring(0,8)}.api.lncldglobal.com` }'
+
+      var settings = {
+        "method": "GET",
+        "headers": {
+          "X-LC-Id": '!{theme.valine.appId}',
+          "X-LC-Key": '!{theme.valine.appKey}',
+          "Content-Type": "application/json"
+        },
+      }
+
+      fetch(`${serverURL}/1.1/classes/Comment?limit=!{theme.newest_comments.limit}&order=-createdAt`,settings)
+        .then(response => response.json())
+        .then(data => {
+          const valineArray = data.results.map(function (e) {
+            return {
+              'avatar': getIcon(e.QQAvatar, e.mail),
+              'content': changeContent(e.comment),
+              'nick': e.nick,
+              'url': e.url + '#' + e.objectId,
+              'date': e.updatedAt,
+            }
+          })
+          saveToLocal.set('valine-newest-comments', JSON.stringify(valineArray), !{theme.newest_comments.storage}/(60*24))
+          generateHtml(valineArray)
+        }).catch(e => {
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
+          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+        }) 
+    }
+
+    const newestCommentInit = () => {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
+        const data = saveToLocal.get('valine-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
+        }
+      }
+    }
+
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })
diff --git a/layout/includes/third-party/newest-comments/waline.pug b/layout/includes/third-party/newest-comments/waline.pug
new file mode 100644
index 0000000..15ca44c
--- /dev/null
+++ b/layout/includes/third-party/newest-comments/waline.pug
@@ -0,0 +1,84 @@
+script.
+  window.addEventListener('load', () => {
+    const changeContent = (content) => {
+      if (content === '') return content
+
+      content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+      content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+      content = content.replace(/
.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '
'
+
+          if (!{theme.newest_comments.avatar}) {
+            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            result += `${array[i].nick}`
+          }
+
+          result += `

+          ${array[i].content}
+          
${array[i].nick} / 

+          
`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
+
+    const getComment = () => {
+      const loadWaline = () => {
+        Waline.RecentComments({
+          serverURL: '!{theme.waline.serverURL}',
+          count: !{theme.newest_comments.limit}
+        }).then(({comments}) => {
+          const walineArray = comments.map(e => {
+            return {
+              'content': changeContent(e.comment),
+              'avatar': e.avatar,
+              'nick': e.nick,
+              'url': e.url + '#' + e.objectId,
+              'date': e.insertedAt,
+            }
+          })
+          saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))
+          generateHtml(walineArray)
+        }).catch(e => {
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
+          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+        }) 
+      }
+
+      if (typeof Waline === 'function') loadWaline() 
+      else getScript('!{url_for(theme.asset.waline_js)}').then(loadWaline)
+    }
+
+    const newestCommentInit = () => {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
+        const data = saveToLocal.get('waline-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
+        }
+      }
+    }
+
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })
diff --git a/layout/includes/third-party/pangu.pug b/layout/includes/third-party/pangu.pug
new file mode 100644
index 0000000..2027ca7
--- /dev/null
+++ b/layout/includes/third-party/pangu.pug
@@ -0,0 +1,20 @@
+script.
+  function panguFn () {
+    if (typeof pangu === 'object') pangu.autoSpacingPage()
+    else {
+      getScript('!{url_for(theme.asset.pangu)}')
+        .then(() => {
+          pangu.autoSpacingPage()
+        })
+    }
+  }
+
+  function panguInit () {
+    if (!{theme.pangu.field === 'post'}){
+      GLOBAL_CONFIG_SITE.isPost && panguFn()
+    } else {
+      panguFn()
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', panguInit)
diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug
new file mode 100644
index 0000000..3048856
--- /dev/null
+++ b/layout/includes/third-party/pjax.pug
@@ -0,0 +1,84 @@
+- var pjaxExclude = 'a:not([target="_blank"])'
+if theme.pjax.exclude
+  each val in theme.pjax.exclude
+    - pjaxExclude = pjaxExclude + `:not([href="${val}"])`
+
+- let pjaxSelectors = ['head > title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','.js-pjax']
+
+- let choose = theme.comments.use
+if choose
+  if theme.Open_Graph_meta.enable && (choose.includes('Livere') || choose.includes('Utterances') || choose.includes('Giscus'))
+    - pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
+  if choose.includes('Utterances') || choose.includes('Giscus')
+    - pjaxSelectors.unshift('link[rel="canonical"]')
+
+script(src=url_for(theme.asset.pjax))
+script.
+  let pjaxSelectors = !{JSON.stringify(pjaxSelectors)}
+
+  var pjax = new Pjax({
+    elements: '!{pjaxExclude}',
+    selectors: pjaxSelectors,
+    cacheBust: false,
+    analytics: !{theme.google_analytics ? true : false},
+    scrollRestoration: false
+  })
+
+  document.addEventListener('pjax:send', function () {
+
+    // removeEventListener scroll 
+    window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
+    window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
+
+    document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
+    
+    if (window.aplayers) {
+      for (let i = 0; i < window.aplayers.length; i++) {
+        if (!window.aplayers[i].options.fixed) {
+          window.aplayers[i].destroy()
+        }
+      }
+    }
+
+    typeof typed === 'object' && typed.destroy()
+
+    //reset readmode
+    const $bodyClassList = document.body.classList
+    $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
+
+    typeof disqusjs === 'object' && disqusjs.destroy()
+  })
+
+  document.addEventListener('pjax:complete', function () {
+    window.refreshFn()
+
+    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)
+    })
+
+    GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
+
+    typeof chatBtnFn === 'function' && chatBtnFn()
+    typeof panguInit === 'function' && panguInit()
+
+    // google analytics
+    typeof gtag === 'function' && gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname});
+
+    // baidu analytics
+    typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);
+
+    typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
+
+    // prismjs
+    typeof Prism === 'object' && Prism.highlightAll()
+  })
+
+  document.addEventListener('pjax:error', (e) => {
+    if (e.request.status === 404) {
+      pjax.loadUrl('/404.html')
+    }
+  })
diff --git a/layout/includes/third-party/prismjs.pug b/layout/includes/third-party/prismjs.pug
new file mode 100644
index 0000000..6af44dd
--- /dev/null
+++ b/layout/includes/third-party/prismjs.pug
@@ -0,0 +1,5 @@
+if config.prismjs && config.prismjs.enable && !config.prismjs.preprocess
+  script(src=url_for(theme.asset.prismjs_js))
+  script(src=url_for(theme.asset.prismjs_autoloader))
+  if config.prismjs.line_number
+    script(src=url_for(theme.asset.prismjs_lineNumber_js))
diff --git a/layout/includes/third-party/search/algolia.pug b/layout/includes/third-party/search/algolia.pug
new file mode 100644
index 0000000..8a439e0
--- /dev/null
+++ b/layout/includes/third-party/search/algolia.pug
@@ -0,0 +1,18 @@
+#algolia-search
+  .search-dialog
+    nav.search-nav
+      span.search-dialog-title= _p('search.title')
+      button.search-close-button
+        i.fas.fa-times
+
+    .search-wrap
+      #algolia-search-input
+      hr
+      #algolia-search-results
+        #algolia-hits
+        #algolia-pagination
+        #algolia-info
+          .algolia-stats
+          .algolia-poweredBy
+  
+  #search-mask
diff --git a/layout/includes/third-party/search/index.pug b/layout/includes/third-party/search/index.pug
new file mode 100644
index 0000000..c1bd03a
--- /dev/null
+++ b/layout/includes/third-party/search/index.pug
@@ -0,0 +1,4 @@
+if theme.algolia_search.enable
+  include ./algolia.pug
+else if theme.local_search.enable
+  include ./local-search.pug
\ No newline at end of file
diff --git a/layout/includes/third-party/search/local-search.pug b/layout/includes/third-party/search/local-search.pug
new file mode 100644
index 0000000..3d1508f
--- /dev/null
+++ b/layout/includes/third-party/search/local-search.pug
@@ -0,0 +1,20 @@
+#local-search
+  .search-dialog
+    nav.search-nav
+      span.search-dialog-title= _p('search.title')
+      span#loading-status
+      button.search-close-button
+        i.fas.fa-times
+
+    #loading-database.is-center
+      i.fas.fa-spinner.fa-pulse
+      span= '  ' + _p("search.load_data")
+
+    .search-wrap
+      #local-search-input
+        .local-search-box
+          input(placeholder=_p("search.local_search.input_placeholder") type="text").local-search-box--input
+      hr
+      #local-search-results
+
+  #search-mask
\ No newline at end of file
diff --git a/layout/includes/third-party/share/add-this.pug b/layout/includes/third-party/share/add-this.pug
new file mode 100644
index 0000000..ab44267
--- /dev/null
+++ b/layout/includes/third-party/share/add-this.pug
@@ -0,0 +1,2 @@
+.addthis_inline_share_toolbox
+script(src=`//s7.addthis.com/js/300/addthis_widget.js#pubid=${theme.addThis.pubid}` async)
\ No newline at end of file
diff --git a/layout/includes/third-party/share/addtoany.pug b/layout/includes/third-party/share/addtoany.pug
new file mode 100644
index 0000000..d42f3be
--- /dev/null
+++ b/layout/includes/third-party/share/addtoany.pug
@@ -0,0 +1,10 @@
+.addtoany
+  .a2a_kit.a2a_kit_size_32.a2a_default_style
+    - let addtoanyItem = theme.addtoany.item.split(',')
+    each name in addtoanyItem
+      a(class="a2a_button_" + name)
+
+    a.a2a_dd(href="https://www.addtoany.com/share")
+script(async src='https://static.addtoany.com/menu/page.js')
+
+
diff --git a/layout/includes/third-party/share/index.pug b/layout/includes/third-party/share/index.pug
new file mode 100644
index 0000000..f28ceab
--- /dev/null
+++ b/layout/includes/third-party/share/index.pug
@@ -0,0 +1,7 @@
+.post_share
+  if theme.addThis.enable
+    !=partial('includes/third-party/share/add-this', {}, {cache: true})
+  else if theme.sharejs.enable
+    include ./share-js.pug
+  else if theme.addtoany.enable
+    !=partial('includes/third-party/share/addtoany', {}, {cache: true})
diff --git a/layout/includes/third-party/share/share-js.pug b/layout/includes/third-party/share/share-js.pug
new file mode 100644
index 0000000..0a566fa
--- /dev/null
+++ b/layout/includes/third-party/share/share-js.pug
@@ -0,0 +1,3 @@
+.social-share(data-image=url_for(page.cover|| theme.avatar.img) data-sites= theme.sharejs.sites)
+link(rel='stylesheet' href=url_for(theme.asset.sharejs_css) media="print" onload="this.media='all'")
+script(src=url_for(theme.asset.sharejs) defer)
\ No newline at end of file
diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug
new file mode 100644
index 0000000..9236757
--- /dev/null
+++ b/layout/includes/third-party/subtitle.pug
@@ -0,0 +1,128 @@
+- const { effect,loop,source,sub,startDelay,typeSpeed,backSpeed } = theme.subtitle
+- let subContent = sub || new Array()
+
+case source
+  when 1
+    script.
+      function subtitleType () {
+        fetch('https://v1.hitokoto.cn')
+          .then(response => response.json())
+          .then(data => {
+            if (!{effect}) {
+              const from = '出自 ' + data.from
+              const sub = !{JSON.stringify(subContent)}
+              sub.unshift(data.hitokoto, from)
+              window.typed = new Typed('#subtitle', {
+                strings: sub,
+                startDelay: !{startDelay},
+                typeSpeed: !{typeSpeed},
+                loop: !{loop},
+                backSpeed: !{backSpeed},
+              })
+            } else {
+              document.getElementById('subtitle').innerHTML = data.hitokoto
+            }
+          })
+      }
+
+      if (!{effect}) {
+        if (typeof Typed === 'function') {
+          subtitleType()
+        } else {
+          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+        }
+      } else {
+        subtitleType()
+      }
+
+  when 2
+    script.
+      function subtitleType () {
+        getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
+          const con = str[0]
+          if (!{effect}) {
+            const from = '出自 ' + str[1]
+            const sub = !{JSON.stringify(subContent)}
+            sub.unshift(con, from)
+            window.typed = new Typed('#subtitle', {
+              strings: sub,
+              startDelay: !{startDelay},
+              typeSpeed: !{typeSpeed},
+              loop: !{loop},
+              backSpeed: !{backSpeed},
+            })
+          } else {
+            document.getElementById('subtitle').innerHTML = con
+          }
+        })
+      }
+
+      if (!{effect}) {
+        if (typeof Typed === 'function') {
+          subtitleType()
+        } else {
+          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+        }
+      } else {
+        subtitleType()
+      }
+
+  when 3
+    script.
+      function subtitleType () {
+        getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
+          jinrishici.load(result =>{
+            if (!{effect}) {
+              const sub = !{JSON.stringify(subContent)}
+              const content = result.data.content
+              sub.unshift(content)
+              window.typed = new Typed('#subtitle', {
+                strings: sub,
+                startDelay: !{startDelay},
+                typeSpeed: !{typeSpeed},
+                loop: !{loop},
+                backSpeed: !{backSpeed},
+              })
+            } else {
+              document.getElementById('subtitle').innerHTML = result.data.content
+            }
+          })
+        })
+      }
+
+      if (!{effect}) {
+        if (typeof Typed === 'function') {
+          subtitleType()
+        } else {
+          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+        }
+      } else {
+        subtitleType()
+      }
+
+  default
+    - subContent = subContent.length ? subContent : new Array(config.subtitle)
+    script.
+      function subtitleType () {
+        if (!{effect}) { 
+          window.typed = new Typed("#subtitle", {
+            strings: !{JSON.stringify(subContent)},
+            startDelay: !{startDelay},
+            typeSpeed: !{typeSpeed},
+            loop: !{loop},
+            backSpeed: !{backSpeed}
+          })
+        } else {
+          document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
+        }
+      }
+
+      if (!{effect}) {
+        if (typeof Typed === 'function') {
+          subtitleType()
+        } else {
+          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+        }
+      } else {
+        subtitleType()
+      }
diff --git a/layout/includes/waves.pug b/layout/includes/waves.pug
new file mode 100644
index 0000000..5b3631e
--- /dev/null
+++ b/layout/includes/waves.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/widget/card_author.pug b/layout/includes/widget/card_author.pug
new file mode 100644
index 0000000..bec6254
--- /dev/null
+++ b/layout/includes/widget/card_author.pug
@@ -0,0 +1,14 @@
+if theme.aside.card_author.enable
+  .card-widget.card-info
+        .card-content
+          .card-info-avatar.is-center
+            .author-info__sayhi#author-info__sayhi 晚上好！我是
+            .author-info__name= config.author
+            .avatar-img
+              img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
+        .banner-button-group
+          a.banner-button(href="/about/")
+            i.fas.fa-circle-chevron-right
+            span.banner-button-te
+            xt 了解更多
+  line.line(style="margin-top: 10px")
\ No newline at end of file
diff --git a/layout/includes/widget/card_post_toc.pug b/layout/includes/widget/card_post_toc.pug
new file mode 100644
index 0000000..4154221
--- /dev/null
+++ b/layout/includes/widget/card_post_toc.pug
@@ -0,0 +1,15 @@
+- let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
+- let tocExpand = page.toc_expand !== undefined ? page.toc_expand : theme.toc.expand
+- let tocExpandClass = tocExpand ? 'is-expand' : ''
+
+#card-toc.card-widget
+  .item-headline
+    i.fas.fa-stream
+    span= _p('aside.card_toc')
+    span.toc-percentage
+
+  if (page.encrypt == true)
+    .toc-content.toc-div-class(class=tocExpandClass style="display:none")!=toc(page.origin, {list_number: tocNumber})
+  else 
+    .toc-content(class=tocExpandClass)!=toc(page.content, {list_number: tocNumber})
+      
\ No newline at end of file
diff --git a/layout/includes/widget/card_tags.pug b/layout/includes/widget/card_tags.pug
new file mode 100644
index 0000000..9aeb1a9
--- /dev/null
+++ b/layout/includes/widget/card_tags.pug
@@ -0,0 +1,54 @@
+if theme.aside.card_tags.enable
+  if site.tags.length
+    .card-widget.card-tags
+      .item-headline
+        i.fas.fa-tags
+        span= _p('aside.card_tags')
+
+      - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
+      if theme.aside.card_tags.color
+        .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.15, maxfontsize: 1.45, limit: tagLimit, unit: 'em'})
+      else
+        .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})
+    hrl.line
+if theme.aside.card_categories.enable
+  if site.categories.length
+    .card-widget.card-categories
+      !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand })
+    hrl.line
+if theme.aside.card_archives.enable
+  .card-widget.card-archives
+    - let type = theme.aside.card_archives.type || 'monthly'
+    - let format = theme.aside.card_archives.format || 'MMMM YYYY'
+    - let order = theme.aside.card_archives.order || -1
+    - let limit = theme.aside.card_archives.limit === 0 ? 0 : theme.aside.card_archives.limit || 8
+    != aside_archives({ type:type, format: format, order: order, limit: limit })
+  hrl.line
+.card-widget.card-webinfo
+  .item-headline
+    i.fas.fa-chart-line.fa-bounce
+    span= _p('aside.card_webinfo.headline')
+  .webinfo
+    .webinfo-item
+      .item-name
+        i.fas.fa-folder-open.fa-beat
+        .text 文章总数
+      .item-count= site.posts.length
+    .webinfo-item
+      .item-name
+        i.fas.fa-clock.fa-shake
+        .text 建站天数
+      .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date))
+        i.fa-solid.fa-spinner.fa-spin
+    .webinfo-item
+      .item-name
+        i.fas.fa-pen-to-square.fa-beat
+        .text 全站字数
+      .item-count=totalcount(site)
+    .webinfo-item
+      .item-name
+        i.fas.fa-upload.fa-shake
+        .text 最后更新
+      .item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))
+        i.fa-solid.fa-spinner.fa-spin
+
diff --git a/layout/includes/widget/card_webinfo.pug b/layout/includes/widget/card_webinfo.pug
new file mode 100644
index 0000000..5bffaf5
--- /dev/null
+++ b/layout/includes/widget/card_webinfo.pug
@@ -0,0 +1,28 @@
+.card-widget.card-webinfo
+  .item-headline
+    i.fas.fa-chart-line.fa-bounce
+    span= _p('aside.card_webinfo.headline')
+  .webinfo
+    .webinfo-item
+      .item-name
+        i.fas.fa-folder-open.fa-beat
+        .text 文章总数
+      .item-count= site.posts.length
+    .webinfo-item
+      .item-name
+        i.fas.fa-clock.fa-shake
+        .text 建站天数
+      .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date))
+        i.fa-solid.fa-spinner.fa-spin
+    .webinfo-item
+      .item-name
+        i.fas.fa-pen-to-square.fa-beat
+        .text 全站字数
+      .item-count=totalcount(site)
+    .webinfo-item
+      .item-name
+        i.fas.fa-upload.fa-shake
+        .text 最后更新
+      .item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))
+        i.fa-solid.fa-spinner.fa-spin
+
diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug
new file mode 100644
index 0000000..3990487
--- /dev/null
+++ b/layout/includes/widget/index.pug
@@ -0,0 +1,21 @@
+#aside-content.aside-content
+  //- post
+  if is_post()
+    - const tocStyle = page.toc_style_simple
+    - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
+    if showToc && tocStyleVal
+      .sticky_layout
+        include ./card_post_toc.pug
+    else
+      !=partial('includes/widget/card_author', {}, {cache: true})
+      .sticky_layout
+        if showToc
+          include ./card_post_toc.pug
+  else
+    //- page
+    !=partial('includes/widget/card_author', {}, {cache: true})  
+
+    .sticky_layout
+      if showToc
+        include ./card_post_toc.pug
+      !=partial('includes/widget/card_tags', {}, {cache: true})
\ No newline at end of file
diff --git a/layout/index.pug b/layout/index.pug
new file mode 100644
index 0000000..2655cb4
--- /dev/null
+++ b/layout/index.pug
@@ -0,0 +1,7 @@
+extends includes/layout.pug
+
+block content
+  include ./includes/mixins/post-ui.pug
+  #recent-posts.recent-posts
+    +postUI
+    include includes/pagination.pug
\ No newline at end of file
diff --git a/layout/page.pug b/layout/page.pug
new file mode 100644
index 0000000..416950a
--- /dev/null
+++ b/layout/page.pug
@@ -0,0 +1,21 @@
+extends includes/layout.pug
+
+block content
+  #page
+    h1.page-title= page.title
+
+    case page.type
+      when 'tags'
+        include includes/page/tags.pug
+      when 'link'
+        include includes/page/flink.pug
+      when 'categories'
+        include includes/page/categories.pug
+      when 'about'
+        include includes/page/about.pug
+      default
+        include includes/page/default-page.pug
+
+    if page.comments !== false && theme.comments && theme.comments.use
+      - var commentsJsLoad = true
+      !=partial('includes/third-party/comments/index', {}, {cache: true})
\ No newline at end of file
diff --git a/layout/post.pug b/layout/post.pug
new file mode 100644
index 0000000..f54ab7a
--- /dev/null
+++ b/layout/post.pug
@@ -0,0 +1,32 @@
+extends includes/layout.pug
+
+block content
+  #post
+    if top_img === false
+      include includes/header/post-info.pug
+
+    article#article-container.post-content!=page.content
+    include includes/post/post-copyright.pug
+    .tag_share
+      if (theme.post_meta.post.tags)
+        .post-meta__tag-list
+          each item, index in page.tags.data
+            a(href=url_for(item.path)).post-meta__tags #[=item.name]
+      include includes/third-party/share/index.pug
+        
+    if theme.reward.enable && theme.reward.QR_code
+      !=partial('includes/post/reward', {}, {cache: true})
+
+    //- ad
+    if theme.ad && theme.ad.post
+      .ads-wrap!=theme.ad.post
+
+    if theme.post_pagination
+      include includes/pagination.pug
+    if theme.related_post && theme.related_post.enable
+      != related_posts(page,site.posts)
+
+    if page.comments !== false && theme.comments && theme.comments.use
+      - var commentsJsLoad = true
+      !=partial('includes/third-party/comments/index', {}, {cache: true})
+      
\ No newline at end of file
diff --git a/layout/tag.pug b/layout/tag.pug
new file mode 100644
index 0000000..9f99658
--- /dev/null
+++ b/layout/tag.pug
@@ -0,0 +1,14 @@
+extends includes/layout.pug
+
+block content
+  if theme.tag_ui == 'index'
+    include ./includes/mixins/post-ui.pug
+    #recent-posts.recent-posts
+      +postUI
+      include includes/pagination.pug
+  else
+    include ./includes/mixins/article-sort.pug
+    #tag
+      .article-sort-title= _p('page.tag') + ' - ' + page.tag
+      +articleSort(page.posts)
+      include includes/pagination.pug
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..bd793bb
--- /dev/null
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "hexo-theme-butterfly",
+  "version": "1.0.1",
+  "description": "A Simple and Card UI Design theme for Hexo",
+  "main": "package.json",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "hexo",
+    "theme",
+    "butterfly",
+    "Card UI Design",
+    "Jerry",
+    "hexo-theme-butterfly"
+  ],
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/jerryc127/hexo-theme-butterfly.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jerryc127/hexo-theme-butterfly/issues",
+    "email": "my@crazywong.com"
+  },
+  "dependencies": {
+    "hexo-renderer-stylus": "^2.1.0",
+    "hexo-renderer-pug": "^3.0.0"
+  },
+  "homepage": "https://butterfly.js.org/",
+  "author": "Jerry ",
+  "license": "Apache-2.0"
+}
diff --git a/plugins.yml b/plugins.yml
new file mode 100644
index 0000000..9590b68
--- /dev/null
+++ b/plugins.yml
@@ -0,0 +1,200 @@
+algolia_search_v4:
+  name: algoliasearch
+  file: dist/algoliasearch-lite.umd.js
+  version: 4.14.2
+instantsearch_v4:
+  name: instantsearch.js
+  file: dist/instantsearch.production.min.js
+  version: 4.49.0
+pjax:
+  name: pjax
+  file: pjax.min.js
+  version: 0.2.8
+gitalk:
+  name: gitalk
+  file: dist/gitalk.min.js
+  version: 1.8.0
+gitalk_css:
+  name: gitalk
+  file: dist/gitalk.css
+  version: 1.8.0
+blueimp_md5:
+  name: blueimp-md5
+  file: js/md5.min.js
+  version: 2.19.0
+valine:
+  name: valine
+  file: dist/Valine.min.js
+  version: 1.5.1
+disqusjs:
+  name: disqusjs
+  file: dist/browser/disqusjs.es2015.umd.min.js
+  version: 3.0.2
+disqusjs_css:
+  name: disqusjs
+  file: dist/browser/styles/disqusjs.css
+  version: 3.0.2
+twikoo:
+  name: twikoo
+  file: dist/twikoo.all.min.js
+  version: 1.6.7
+waline_js:
+  name: '@waline/client'
+  file: dist/waline.js
+  other_name: waline
+  version: 2.13.0
+waline_css:
+  name: '@waline/client'
+  file: dist/waline.css
+  other_name: waline
+  version: 2.13.0
+sharejs:
+  name: butterfly-extsrc
+  file: sharejs/dist/js/social-share.min.js
+  version: 1.1.3
+sharejs_css:
+  name: butterfly-extsrc
+  file: sharejs/dist/css/share.min.css
+  version: 1.1.3
+mathjax:
+  name: mathjax
+  file: es5/tex-mml-chtml.js
+  version: 3.2.2
+katex:
+  name: katex
+  file: dist/katex.min.css
+  other_name: KaTeX
+  version: 0.16.3
+katex_copytex:
+  name: katex
+  file: dist/contrib/copy-tex.min.js
+  other_name: KaTeX
+  version: 0.16.3
+mermaid:
+  name: mermaid
+  file: dist/mermaid.min.js
+  version: 9.1.7
+canvas_ribbon:
+  name: butterfly-extsrc
+  file: dist/canvas-ribbon.min.js
+  version: 1.1.3
+canvas_fluttering_ribbon:
+  name: butterfly-extsrc
+  file: dist/canvas-fluttering-ribbon.min.js
+  version: 1.1.3
+canvas_nest:
+  name: butterfly-extsrc
+  file: dist/canvas-nest.min.js
+  version: 1.1.3
+activate_power_mode:
+  name: butterfly-extsrc
+  file: dist/activate-power-mode.min.js
+  version: 1.1.3
+fireworks:
+  name: butterfly-extsrc
+  file: dist/fireworks.min.js
+  version: 1.1.3
+click_heart:
+  name: butterfly-extsrc
+  file: dist/click-heart.min.js
+  version: 1.1.3
+ClickShowText:
+  name: butterfly-extsrc
+  file: dist/click-show-text.min.js
+  version: 1.1.3
+lazyload:
+  name: vanilla-lazyload
+  file: dist/lazyload.iife.min.js
+  version: 17.8.3
+instantpage:
+  name: instant.page
+  file: instantpage.js
+  version: 5.1.1
+typed:
+  name: typed.js
+  file: lib/typed.min.js
+  version: 2.0.12
+pangu:
+  name: pangu
+  file: dist/browser/pangu.min.js
+  version: 4.0.7
+fancybox_css_v4:
+  name: '@fancyapps/ui'
+  file: dist/fancybox.css
+  version: 4.0.31
+  other_name: fancyapps-ui
+fancybox_v4:
+  name: '@fancyapps/ui'
+  file: dist/fancybox.umd.js
+  version: 4.0.31
+  other_name: fancyapps-ui
+medium_zoom:
+  name: medium-zoom
+  file: dist/medium-zoom.min.js
+  version: 1.0.6
+snackbar_css:
+  name: node-snackbar
+  file: dist/snackbar.min.css
+  version: 0.1.16
+snackbar:
+  name: node-snackbar
+  file: dist/snackbar.min.js
+  version: 0.1.16
+fontawesomeV6:
+  name: '@fortawesome/fontawesome-free'
+  file: css/all.min.css
+  other_name: font-awesome
+  version: 6.2.0
+flickr_justified_gallery_js:
+  name: flickr-justified-gallery
+  file: dist/fjGallery.min.js
+  version: 2.1.2
+flickr_justified_gallery_css:
+  name: flickr-justified-gallery
+  file: dist/fjGallery.css
+  version: 2.1.2
+aplayer_css:
+  name: aplayer
+  file: dist/APlayer.min.css
+  version: 1.10.1
+aplayer_js:
+  name: aplayer
+  file: dist/APlayer.min.js
+  version: 1.10.1
+meting_js:
+  name: butterfly-extsrc
+  file: metingjs/dist/Meting.min.js
+  version: 1.1.3
+prismjs_js:
+  name: prismjs
+  file: prism.js
+  other_name: prism
+  version: 1.29.0
+prismjs_lineNumber_js:
+  name: prismjs
+  file: plugins/line-numbers/prism-line-numbers.min.js
+  other_name: prism
+  version: 1.29.0
+prismjs_autoloader:
+  name: prismjs
+  file: plugins/autoloader/prism-autoloader.min.js
+  other_name: prism
+  version: 1.29.0
+artalk_js:
+  name: artalk
+  file: dist/Artalk.js
+  version: 2.4.3
+artalk_css:
+  name: artalk
+  file: dist/Artalk.css
+  version: 2.4.3
+pace_js:
+  name: pace-js
+  other_name: pace
+  file: pace.min.js
+  version: 1.2.4
+pace_default_css:
+  name: pace-js
+  other_name: pace
+  file: themes/blue/pace-theme-minimal.css
+  version: 1.2.4
diff --git a/scripts/events/404.js b/scripts/events/404.js
new file mode 100644
index 0000000..02491ce
--- /dev/null
+++ b/scripts/events/404.js
@@ -0,0 +1,18 @@
+/**
+ * Butterfly
+ * 404 error page
+ */
+
+'use strict'
+
+hexo.extend.generator.register('404', function (locals) {
+  if (!hexo.theme.config.error_404.enable) return
+  return {
+    path: '404.html',
+    layout: ['page'],
+    data: {
+      type: '404',
+      top_img: false
+    }
+  }
+})
diff --git a/scripts/events/cdn.js b/scripts/events/cdn.js
new file mode 100644
index 0000000..7d77e63
--- /dev/null
+++ b/scripts/events/cdn.js
@@ -0,0 +1,94 @@
+/**
+ * Butterfly
+ * Merge CDN
+ */
+
+'use strict'
+
+const { version } = require('../../package.json')
+const path = require('path')
+
+hexo.extend.filter.register('before_generate', () => {
+  const themeConfig = hexo.theme.config
+  const { CDN } = themeConfig
+
+  const thirdPartySrc = hexo.render.renderSync({ path: path.join(hexo.theme_dir,'/plugins.yml'), engine: 'yaml'})
+  const internalSrc = {
+    main: {
+      name: 'hexo-theme-butterfly',
+      file: 'js/main.js',
+      version
+    },
+    utils: {
+      name: 'hexo-theme-butterfly',
+      file: 'js/utils.js',
+      version
+    },
+    translate: {
+      name: 'hexo-theme-butterfly',
+      file: 'js/tw_cn.js',
+      version
+    },
+    local_search: {
+      name: 'hexo-theme-butterfly',
+      file: 'js/search/local-search.js',
+      version
+    },
+    algolia_js: {
+      name: 'hexo-theme-butterfly',
+      file: 'js/search/algolia.js',
+      version
+    }
+  }
+
+  const minFile = (file) => {
+    return file.replace(/(? '.min' + ext)
+  }
+
+  const createCDNLink = (data, type, cond = '') => {
+    Object.keys(data).map(key => {
+      let { name, version, file, other_name } = data[key]
+
+      const min_file = minFile(file)
+      const cdnjs_name = other_name || name
+      const cdnjs_file = file.replace(/^[lib|dist]*\/|browser\//g, '')
+      const min_cdnjs_file = minFile(cdnjs_file)
+      if (cond === 'internal') file = `source/${file}`
+      const verType = CDN.version ? `@${version}` : ''
+
+      const value = {
+        version,
+        name,
+        file,
+        cdnjs_file,
+        min_file,
+        min_cdnjs_file,
+        cdnjs_name
+      }
+      const cdnSource = {
+        local: cond === 'internal' ? cdnjs_file : `/pluginsSrc/${name}/${file}`,
+        jsdelivr: `https://cdn.jsdelivr.net/npm/${name}${verType}/${min_file}`,
+        unpkg: `https://unpkg.com/${name}${verType}/${file}`,
+        cdnjs: `https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}`,
+        custom: (CDN.custom_format || '').replace(/\$\{(.+?)\}/g, (match, $1) => value[$1])
+      }
+      
+      data[key] = cdnSource[type]
+    })
+
+    if (cond === 'internal') data['main_css'] = 'css/index.css'
+    return data
+  }
+
+  // delete null value
+  const deleteNullValue = obj => {
+    if (!obj) return
+    for (const i in obj) {
+      obj[i] === null && delete obj[i]
+    }
+    return obj
+  }
+
+  themeConfig.asset = Object.assign(createCDNLink(internalSrc,CDN.internal_provider,'internal'),
+  createCDNLink(thirdPartySrc,CDN.third_party_provider), deleteNullValue(CDN.option))
+})
diff --git a/scripts/events/comment.js b/scripts/events/comment.js
new file mode 100644
index 0000000..b1ef856
--- /dev/null
+++ b/scripts/events/comment.js
@@ -0,0 +1,14 @@
+/**
+ * Capitalize the first letter of comment name
+ */
+
+hexo.extend.filter.register('before_generate', () => {
+  const themeConfig = hexo.theme.config
+  let { use } = themeConfig.comments
+  if (!use) return
+  if (typeof use === 'string') {
+    use = use.split(',')
+  }
+  const newArray = use.map(item => item.toLowerCase().replace(/\b[a-z]/g, s => s.toUpperCase()))
+  themeConfig.comments.use = newArray
+})
\ No newline at end of file
diff --git a/scripts/events/init.js b/scripts/events/init.js
new file mode 100644
index 0000000..69c2807
--- /dev/null
+++ b/scripts/events/init.js
@@ -0,0 +1,21 @@
+const logger = require('hexo-log')()
+
+hexo.extend.filter.register('before_generate', () => {
+  // Get first two digits of the Hexo version number
+  const hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1')
+
+  if (hexoVer < 5.3) {
+    logger.error('Please update Hexo to V5.3.0 or higher!')
+    logger.error('請把 Hexo 升級到 V5.3.0 或更高的版本！')
+    process.exit(-1)
+  }
+
+  if (hexo.locals.get) {
+    const data = hexo.locals.get('data')
+    if (data && data.butterfly) {
+      logger.error(" 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' ")
+      logger.error(" 'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml' ")
+      process.exit(-1)
+    }
+  }
+})
diff --git a/scripts/events/stylus.js b/scripts/events/stylus.js
new file mode 100644
index 0000000..4b95538
--- /dev/null
+++ b/scripts/events/stylus.js
@@ -0,0 +1,15 @@
+/**
+ * stylus
+ */
+
+'use strict'
+
+hexo.extend.filter.register('stylus:renderer', function (style) {
+  const { highlight, prismjs } = hexo.config
+  style
+    .define('$highlight_enable', highlight && highlight.enable)
+    .define('$highlight_line_number', highlight && highlight.line_number)
+    .define('$prismjs_enable', prismjs && prismjs.enable)
+    .define('$prismjs_line_number', prismjs && prismjs.line_number)
+    // .import(this.source_dir.replace(/\\/g, '/') + '_data/css/*')
+})
diff --git a/scripts/events/welcome.js b/scripts/events/welcome.js
new file mode 100644
index 0000000..ae1859e
--- /dev/null
+++ b/scripts/events/welcome.js
@@ -0,0 +1,17 @@
+const logger = require('hexo-log')()
+
+hexo.on('ready', () => {
+  const { version } = require('../../package.json')
+  console.log(`╔═════════════════════════════════════════════════════════════════════════════╗
+  
+    ██████╗   ██╗   ██╗  ███══╗  ██║    █████╗     ██████╗  █████████╗ ██╗   ██╗
+    ██╔═══██║ ╚██╗ ██╔╝  ██║██║  ██║  ██╔════██║  ██╔════╝     ██╔═══╝ ╚██╗ ██╔╝
+    ██║   ██║  ╚████╔╝   ██║██╚╗ ██║  ██║    ██║  ██║          ██║      ╚████╔╝
+    ██║   ██║   ╚██╔╝    ██║ ██╚╗██║  █████████║  ███████╗     ██║       ╚██╔╝
+    ██║   ██║    ██║     ██║  ██║██║  ██╔════██║  ╚════██║     ██║        ██║
+    ██║   ██║    ██║     ██║  ██║██║  ██║    ██║       ██║     ██║        ██║
+    ██████╔═╝    ██║     ██║    ███║  ██║    ██║  ██████╔╝     ██║        ██║
+    ╚═════╝      ╚═╝     ╚═╝    ╚══╝  ╚═╝    ╚═╝  ╚═════╝      ╚═╝        ╚═╝
+                                      ${version}
+  ╚═════════════════════════════════════════════════════════════════════════════╝`)
+})
diff --git a/scripts/filters/post_lazyload.js b/scripts/filters/post_lazyload.js
new file mode 100644
index 0000000..c4267d1
--- /dev/null
+++ b/scripts/filters/post_lazyload.js
@@ -0,0 +1,29 @@
+/**
+ * Butterfly
+ * lazyload
+ * replace src to data-lazy-src
+ */
+
+'use strict'
+
+const urlFor = require('hexo-util').url_for.bind(hexo)
+
+function lazyload (htmlContent) {
+  const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+  return htmlContent.replace(/( {
+  const config = hexo.theme.config.lazyload
+  if (!config.enable) return
+  if (config.field !== 'post') return
+  data.content = lazyload.call(this, data.content)
+  return data
+})
diff --git a/scripts/filters/random_cover.js b/scripts/filters/random_cover.js
new file mode 100644
index 0000000..47ed4fe
--- /dev/null
+++ b/scripts/filters/random_cover.js
@@ -0,0 +1,45 @@
+/**
+ * Butterfly
+ * ramdom cover
+ */
+
+'use strict'
+
+hexo.extend.filter.register('before_post_render', function (data) {
+  const { config } = this
+  if (config.post_asset_folder) {
+    const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
+    const topImg = data.top_img
+    const cover = data.cover
+    if (topImg && topImg.indexOf('/') === -1 && imgTestReg.test(topImg)) data.top_img = data.path + topImg
+    if (cover && cover.indexOf('/') === -1) data.cover = data.path + cover
+  }
+
+  if (data.cover === false) {
+    data.randomcover = randomCover()
+    return data
+  }
+
+  data.cover = data.cover || randomCover()
+  return data
+})
+
+function randomCover () {
+  const theme = hexo.theme.config
+  let cover
+  let num
+
+  if (theme.cover && theme.cover.default_cover) {
+    if (!Array.isArray(theme.cover.default_cover)) {
+      cover = theme.cover.default_cover
+      return cover
+    } else {
+      num = Math.floor(Math.random() * theme.cover.default_cover.length)
+      cover = theme.cover.default_cover[num]
+      return cover
+    }
+  } else {
+    cover = theme.default_top_img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+    return cover
+  }
+}
diff --git a/scripts/helpers/aside_archives.js b/scripts/helpers/aside_archives.js
new file mode 100644
index 0000000..779c1d4
--- /dev/null
+++ b/scripts/helpers/aside_archives.js
@@ -0,0 +1,113 @@
+/**
+ * Butterfly
+ * for aside archives
+ */
+
+'use strict'
+
+hexo.extend.helper.register('aside_archives', function (options = {}) {
+  const { config } = this
+  const archiveDir = config.archive_dir
+  const { timezone } = config
+  const lang = toMomentLocale(this.page.lang || this.page.language || config.language)
+  let { format } = options
+  const type = options.type || 'monthly'
+  const { transform } = options
+  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true
+  const order = options.order || -1
+  const compareFunc = type === 'monthly'
+    ? (yearA, monthA, yearB, monthB) => yearA === yearB && monthA === monthB
+    : (yearA, monthA, yearB, monthB) => yearA === yearB
+  const limit = options.limit
+  let result = ''
+
+  if (!format) {
+    format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY'
+  }
+
+  const posts = this.site.posts.sort('date', order)
+  if (!posts.length) return result
+
+  const data = []
+  let length = 0
+
+  posts.forEach(post => {
+    // Clone the date object to avoid pollution
+    let date = post.date.clone()
+
+    if (timezone) date = date.tz(timezone)
+
+    const year = date.year()
+    const month = date.month() + 1
+    const lastData = data[length - 1]
+
+    if (!lastData || !compareFunc(lastData.year, lastData.month, year, month)) {
+      if (lang) date = date.locale(lang)
+      const name = date.format(format)
+      length = data.push({
+        name,
+        year,
+        month,
+        count: 1
+      })
+    } else {
+      lastData.count++
+    }
+  })
+
+  const link = item => {
+    let url = `${archiveDir}/${item.year}/`
+
+    if (type === 'monthly') {
+      if (item.month < 10) url += '0'
+      url += `${item.month}/`
+    }
+
+    return this.url_for(url)
+  }
+
+  const len = data.length
+  const Judge = limit === 0 ? len : Math.min(len, limit)
+
+  result += `
${this._p('aside.card_archives')}`
+
+  if (len > Judge) {
+    result += `
+    `
+  }
+
+  result += '
'
+  return result
+})
+
+const toMomentLocale = function (lang) {
+  if (lang === undefined) {
+    return undefined
+  }
+
+  // moment.locale('') equals moment.locale('en')
+  // moment.locale(null) equals moment.locale('en')
+  if (!lang || lang === 'en' || lang === 'default') {
+    return 'en'
+  }
+  return lang.toLowerCase().replace('_', '-')
+}
diff --git a/scripts/helpers/aside_categories.js b/scripts/helpers/aside_categories.js
new file mode 100644
index 0000000..0e60b8e
--- /dev/null
+++ b/scripts/helpers/aside_categories.js
@@ -0,0 +1,97 @@
+/**
+ * Butterfly
+ * for aside categories
+ */
+
+'use strict'
+
+hexo.extend.helper.register('aside_categories', function (categories, options) {
+  if (!options && (!categories || !Object.prototype.hasOwnProperty.call(categories, 'length'))
+  ) {
+    options = categories
+    categories = this.site.categories
+  }
+
+  if (!categories || !categories.length) return ''
+  options = options || {}
+  const { config } = this
+  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count')
+    ? options.show_count
+    : true
+  const depth = options.depth ? parseInt(options.depth, 10) : 0
+  const orderby = options.orderby || 'name'
+  const order = options.order || 1
+  const categoryDir = this.url_for(config.category_dir)
+  const limit = options.limit === 0 ? categories.length : options.limit
+  const isExpand = options.expand !== 'none'
+  const expandClass = isExpand && options.expand === true ? 'expand' : ''
+  const buttonLabel = this._p('aside.more_button')
+  const prepareQuery = (parent) => {
+    const query = {}
+    if (parent) { query.parent = parent } else { query.parent = { $exists: false } }
+    return categories.find(query).sort(orderby, order).filter((cat) => cat.length)
+  }
+
+  const hierarchicalList = (t, level, parent, topparent = true) => {
+    let result = ''
+    const isTopParent = topparent
+    if (t > 0) {
+      prepareQuery(parent).forEach((cat, i) => {
+        if (t > 0) {
+          t = t - 1
+          let child
+          if (!depth || level + 1 < depth) {
+            const childList = hierarchicalList(t, level + 1, cat._id, false)
+            child = childList[0]
+            t = childList[1]
+          }
+
+          const parentClass = isExpand && isTopParent && child ? 'parent' : ''
+
+          result += `
  • `
+
+          result += ``
+
+          result += `${cat.name}`
+
+          if (showCount) {
+            result += `${cat.length}`
+          }
+
+          if (isExpand && isTopParent && child) {
+            result += ``
+          }
+
+          result += ''
+
+          if (child) {
+            result += `
      ${child}
    `
+          }
+
+          result += '
    • '
+        }
+      })
+    }
+
+    return [result, t]
+  }
+
+  const list = hierarchicalList(limit, 0)
+
+  const moreButton = function () {
+    if (categories.length <= limit) return ''
+    const moreHtml = `
+    `
+
+    return moreHtml
+  }
+
+  return `
    
+            
+            ${this._p('aside.card_categories')}
+            ${moreButton()}
+            
    
+            
      
+            ${list[0]}
+            
    `
+})
diff --git a/scripts/helpers/findArchiveLength.js b/scripts/helpers/findArchiveLength.js
new file mode 100644
index 0000000..e55dc0f
--- /dev/null
+++ b/scripts/helpers/findArchiveLength.js
@@ -0,0 +1,58 @@
+hexo.extend.helper.register('findArchiveLength', function (func) {
+  const allPostsLength = this.site.posts.length;
+  if (hexo.config.archive_generator && hexo.config.archive_generator.enable === false ) return allPostsLength
+  const { yearly, monthly, daily } = hexo.config.archive_generator
+  const { year, month, day } = this.page
+  if (yearly === false || !year) return allPostsLength
+
+  const posts = this.site.posts.sort('date')
+
+  const compareFunc = (type,y1,m1,d1,y2,m2,d2) => {
+    if (type === 'year') {
+      return y1 === y2
+    } else if (type === 'month') {
+      return y1 === y2 && m1 === m2
+    } else if (type === 'day') {
+      return y1 === y2 && m1 === m2 && d1 === d2
+    }
+  }
+
+  const generateDateObj = (type) => {
+    let dateObj = []
+    let length = 0
+
+    posts.forEach(post => {
+      let date = post.date.clone()
+      const year = date.year()
+      const month = date.month() + 1
+      const day = date.date()
+      let lastData = dateObj[length - 1]
+
+      if (!lastData || !compareFunc(type, lastData.year, lastData.month, lastData.day, year, month, day)) {
+        const name = type === 'year' ? year : type === 'month' ? `${year}-${month}` : `${year}-${month}-${day}`
+        length = dateObj.push({
+          name,
+          year,
+          month,
+          day,
+          count: 1
+        })
+      } else {
+        lastData.count++
+      }
+    });
+
+    return dateObj
+  }
+
+  const data = func('createArchiveObj', ()=> {
+    const yearObj = yearly ? generateDateObj('year') : []
+    const monthObj = monthly ? generateDateObj('month') : []
+    const dayObj = daily ? generateDateObj('day') : []
+    const fullObj = [...yearObj, ...monthObj, ...dayObj]
+    return fullObj
+  })
+
+  const name = month ? day ? `${year}-${month}-${day}` : `${year}-${month}` : year
+  return data.find(item => item.name === name).count
+})
\ No newline at end of file
diff --git a/scripts/helpers/get_arrays.js b/scripts/helpers/get_arrays.js
new file mode 100644
index 0000000..da27c1d
--- /dev/null
+++ b/scripts/helpers/get_arrays.js
@@ -0,0 +1,45 @@
+hexo.extend.helper.register('getarray_bar', function (types) {
+  if (!types) {
+    types = "category"
+  }
+  const categoriesBar = function (categories) {
+    if (!categories || !categories.length) return ``
+    const categoryArr = []
+    hexo.locals.get('categories').map(function (category) {
+      categoryArr.push({ name: category.name, value: category.length })
+    })
+    categoryArr.sort((a, b) => { return b.value - a.value })
+    let strCategoriesBar = ``
+    for (let i = 0; i < categories.length; i++) {
+      strTemp=`
+      `
+      strCategoriesBar+=strTemp
+    }
+    return strCategoriesBar
+  }
+  const tagsBar = function(tags) {
+    if (!tags || !tags.length) return ``
+    const tagArr = []
+    hexo.locals.get('tags').map(function (tag) {
+      tagArr.push({ name: tag.name, value: tag.length })
+    })
+    tagArr.sort((a, b) => { return b.value - a.value })
+    let strTagsBar = ``
+    for (let i = 0; i < tags.length; i++) {
+      strTemp=`
+      `
+      strTagsBar+=strTemp
+    }
+    return strTagsBar
+  }
+  if (types == "category"){
+    return categoriesBar(this.site.categories)
+  }
+  if (types == "tag"){
+    return tagsBar(this.site.tags)
+  }
+})
\ No newline at end of file
diff --git a/scripts/helpers/inject_head_js.js b/scripts/helpers/inject_head_js.js
new file mode 100644
index 0000000..9c845d4
--- /dev/null
+++ b/scripts/helpers/inject_head_js.js
@@ -0,0 +1,148 @@
+/**
+ * Butterfly
+ * inject js to head
+ */
+
+'use strict'
+
+hexo.extend.helper.register('inject_head_js', function () {
+  const { darkmode, aside } = this.theme
+
+  const { theme_color } = hexo.theme.config
+  const themeColorLight = theme_color && theme_color.enable && theme_color.meta_theme_color_light || '#ffffff'
+  const themeColorDark = theme_color && theme_color.enable && theme_color.meta_theme_color_dark || '#0d0d0d'
+
+  const localStore = `
+    win.saveToLocal = {
+      set: function setWithExpiry(key, value, ttl) {
+        if (ttl === 0) return
+        const now = new Date()
+        const expiryDay = ttl * 86400000
+        const item = {
+          value: value,
+          expiry: now.getTime() + expiryDay,
+        }
+        localStorage.setItem(key, JSON.stringify(item))
+      },
+
+      get: function getWithExpiry(key) {
+        const itemStr = localStorage.getItem(key)
+
+        if (!itemStr) {
+          return undefined
+        }
+        const item = JSON.parse(itemStr)
+        const now = new Date()
+
+        if (now.getTime() > item.expiry) {
+          localStorage.removeItem(key)
+          return undefined
+        }
+        return item.value
+      }
+    }
+  `
+
+  // https://stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-native-javascript
+  const getScript = `
+    win.getScript = url => new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      script.src = url
+      script.async = true
+      script.onerror = reject
+      script.onload = script.onreadystatechange = function() {
+        const loadState = this.readyState
+        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
+        script.onload = script.onreadystatechange = null
+        resolve()
+      }
+      document.head.appendChild(script)
+    })
+  `
+
+  let darkmodeJs = ''
+  if (darkmode.enable) {
+    darkmodeJs = `
+      win.activateDarkMode = function () {
+        document.documentElement.setAttribute('data-theme', 'dark')
+        if (document.querySelector('meta[name="theme-color"]') !== null) {
+          document.querySelector('meta[name="theme-color"]').setAttribute('content', '${themeColorDark}')
+        }
+      }
+      win.activateLightMode = function () {
+        document.documentElement.setAttribute('data-theme', 'light')
+        if (document.querySelector('meta[name="theme-color"]') !== null) {
+          document.querySelector('meta[name="theme-color"]').setAttribute('content', '${themeColorLight}')
+        }
+      }
+      const t = saveToLocal.get('theme')
+    `
+
+    const autoChangeMode = darkmode.autoChangeMode
+
+    if (autoChangeMode === 1) {
+      darkmodeJs += `
+          const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+          const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+          const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
+          const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+
+          if (t === undefined) {
+            if (isLightMode) activateLightMode()
+            else if (isDarkMode) activateDarkMode()
+            else if (isNotSpecified || hasNoSupport) {
+              const now = new Date()
+              const hour = now.getHours()
+              const isNight = hour <= 6 || hour >= 18
+              isNight ? activateDarkMode() : activateLightMode()
+            }
+            window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
+              if (saveToLocal.get('theme') === undefined) {
+                e.matches ? activateDarkMode() : activateLightMode()
+              }
+            })
+          } else if (t === 'light') activateLightMode()
+          else activateDarkMode()
+        `
+    } else if (autoChangeMode === 2) {
+      darkmodeJs += `
+          const now = new Date()
+          const hour = now.getHours()
+          const isNight = hour <= 6 || hour >= 18
+          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
+          else if (t === 'light') activateLightMode()
+          else activateDarkMode()
+        `
+    } else {
+      darkmodeJs += `
+          if (t === 'dark') activateDarkMode()
+          else if (t === 'light') activateLightMode()
+        `
+    }
+  }
+
+  let asideStatus = ''
+  if (aside.enable && aside.button) {
+    asideStatus = `
+      const asideStatus = saveToLocal.get('aside-status')
+      if (asideStatus !== undefined) {
+        if (asideStatus === 'hide') {
+          document.documentElement.classList.add('hide-aside')
+        } else {
+          document.documentElement.classList.remove('hide-aside')
+        }
+      }
+    `
+  }
+
+  const detectApple = `
+    const detectApple = () => {
+      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
+        document.documentElement.classList.add('apple')
+      }
+    }
+    detectApple()
+    `
+
+  return ``
+})
diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js
new file mode 100644
index 0000000..a01092a
--- /dev/null
+++ b/scripts/helpers/page.js
@@ -0,0 +1,83 @@
+/**
+ * Butterfly
+ * @example
+ *  page_description()
+ *  cloudTags(source, minfontsize, maxfontsize, limit)
+ */
+
+'use strict'
+
+const { stripHTML, escapeHTML, prettyUrls } = require('hexo-util')
+const crypto = require('crypto')
+
+hexo.extend.helper.register('page_description', function () {
+  const { config, page } = this
+  let description = page.description || page.content || page.title || config.description
+
+  if (description) {
+    description = escapeHTML(stripHTML(description).substring(0, 150)
+      .trim()
+    ).replace(/\n/g, ' ')
+    return description
+  }
+})
+
+hexo.extend.helper.register('cloudTags', function (options = {}) {
+  const env = this
+  let source = options.source
+  const limit = options.limit
+
+  let result = ''
+  if (limit > 0) {
+    source = source.limit(limit)
+  }
+
+  source.forEach(tag => {
+    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
+    style += ` color: ${color}`
+    result += `${tag.name}`
+  })
+  return result
+})
+
+hexo.extend.helper.register('urlNoIndex', function (url = null) {
+  return prettyUrls(url || this.url, { trailing_index: false, trailing_html: false })
+})
+
+hexo.extend.helper.register('md5', function (path) {
+  return crypto.createHash('md5').update(decodeURI(this.url_for(path))).digest('hex')
+})
+
+hexo.extend.helper.register('injectHtml', function (data) {
+  let result = ''
+  if (!data) return ''
+  for (let i = 0; i < data.length; i++) {
+    result += data[i]
+  }
+  return result
+})
+
+hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
+  if (page.year) {
+    const dateStr = page.month ? `${page.year}-${page.month}` : `${page.year}`
+    const date_format = page.month ? hexo.theme.config.aside.card_archives.format : 'YYYY'
+    return date(dateStr, date_format)
+  }
+
+  const defaultTitle = this._p('page.archives')
+  if (!menu) return defaultTitle
+
+  const loop = (m) => {
+    for (const key in m) {
+      if (typeof m[key] === 'object') {
+        loop(m[key])
+      }
+
+      if (/\/archives\//.test(m[key])) {
+        return key
+      }
+    }
+  }
+
+  return loop(menu) || defaultTitle
+})
diff --git a/scripts/helpers/random.js b/scripts/helpers/random.js
new file mode 100644
index 0000000..286171c
--- /dev/null
+++ b/scripts/helpers/random.js
@@ -0,0 +1,11 @@
+hexo.extend.generator.register('random', function (locals) {
+    const config = hexo.config.random || {}
+    const posts = []
+    for (const post of locals.posts.data) {
+        if (post.random !== false) posts.push(post.path)
+    }
+    return {
+        path: config.path || 'js/random.js',
+        data: `var posts=${JSON.stringify(posts)};function toRandomPost(){window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self");};`
+    }
+})
\ No newline at end of file
diff --git a/scripts/helpers/related_post.js b/scripts/helpers/related_post.js
new file mode 100644
index 0000000..6809ac7
--- /dev/null
+++ b/scripts/helpers/related_post.js
@@ -0,0 +1,99 @@
+/**
+ * Butterfly
+ * Related Posts
+ * According the tag
+ */
+
+'use strict'
+
+hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
+  let relatedPosts = []
+  currentPost.tags.forEach(function (tag) {
+    allPosts.forEach(function (post) {
+      if (isTagRelated(tag.name, post.tags)) {
+        const relatedPost = {
+          title: post.title,
+          path: post.path,
+          cover: post.cover,
+          randomcover: post.randomcover,
+          weight: 1,
+          updated: post.updated,
+          created: post.date
+        }
+        const index = findItem(relatedPosts, 'path', post.path)
+        if (index !== -1) {
+          relatedPosts[index].weight += 1
+        } else {
+          if (currentPost.path !== post.path) {
+            relatedPosts.push(relatedPost)
+          }
+        }
+      }
+    })
+  })
+  if (relatedPosts.length === 0) {
+    return ''
+  }
+  let result = ''
+  const hexoConfig = hexo.config
+  const config = hexo.theme.config
+
+  const limitNum = config.related_post.limit || 6
+  const dateType = config.related_post.date_type || 'created'
+  const headlineLang = this._p('post.recommend')
+
+  relatedPosts = relatedPosts.sort(compare('weight'))
+
+  if (relatedPosts.length > 0) {
+    result += '
    '
+    result += `
    ${headlineLang}
    `
+    result += '
    '
+
+    for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
+      const cover =
+        relatedPosts[i].cover === false
+          ? relatedPosts[i].randomcover
+          : relatedPosts[i].cover
+      const title = this.escape_html(relatedPosts[i].title)
+      result += `
    '
+    return result
+  }
+})
+
+function isTagRelated (tagName, TBDtags) {
+  let result = false
+  TBDtags.forEach(function (tag) {
+    if (tagName === tag.name) {
+      result = true
+    }
+  })
+  return result
+}
+
+function findItem (arrayToSearch, attr, val) {
+  for (let i = 0; i < arrayToSearch.length; i++) {
+    if (arrayToSearch[i][attr] === val) {
+      return i
+    }
+  }
+  return -1
+}
+
+function compare (attr) {
+  return function (a, b) {
+    const val1 = a[attr]
+    const val2 = b[attr]
+    return val2 - val1
+  }
+}
diff --git a/scripts/tag/btns.js b/scripts/tag/btns.js
new file mode 100644
index 0000000..b4edc41
--- /dev/null
+++ b/scripts/tag/btns.js
@@ -0,0 +1,35 @@
+'use strict';
+
+function postBtns(args, content) {
+  return `
    
+            ${content}
+          
    `;
+}
+
+function postCell(args, content) {
+  args = args.join(' ').split(',')
+  let text = args[0] || ''
+  let url = args[1] || ''
+  text = text.trim()
+  url = url.trim()
+  if (url.length > 0) {
+    url = "href='" + url + "'"
+  }
+  let icon = ''
+  let img = 'https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@3/img/placeholder/d570170f4f12e1ee829ca0e85a7dffeb77343a.svg'
+  if (args.length > 2) {
+    if (args[2].indexOf(' fa-') > -1) {
+      icon = args[2].trim()
+    } else {
+      img = args[2].trim()
+    }
+  }
+  if (icon.length > 0) {
+    return `${text}`
+  } else {
+    return `${text}`
+  }
+}
+
+hexo.extend.tag.register('btns', postBtns, {ends: true});
+hexo.extend.tag.register('cell', postCell);
diff --git a/scripts/tag/button.js b/scripts/tag/button.js
new file mode 100644
index 0000000..33a0e53
--- /dev/null
+++ b/scripts/tag/button.js
@@ -0,0 +1,28 @@
+/**
+ * Button
+ * {% btn url text icon option %}
+ * option: color outline center block larger
+ * color : default/blue/pink/red/purple/orange/green
+ */
+
+'use strict'
+
+const urlFor = require('hexo-util').url_for.bind(hexo)
+
+function btn (args) {
+  args = args.join(' ').split(',')
+  let url = args[0] || ''
+  let text = args[1] || ''
+  let icon = args[2] || ''
+  let option = args[3] || ''
+
+  url = url.trim()
+  text = text.trim()
+  icon = icon.trim()
+  option = option.trim()
+
+  return `${icon.length ? `` : ''}${text.length ? `${text}` : ''}`
+}
+
+hexo.extend.tag.register('btn', btn, { ends: false })
diff --git a/scripts/tag/card.js b/scripts/tag/card.js
new file mode 100644
index 0000000..29ff397
--- /dev/null
+++ b/scripts/tag/card.js
@@ -0,0 +1,48 @@
+/**
+ * card
+ * {% card name,url,bg,star,text,icon,tag,w,h %}
+ * {% card 标题,链接,背景,评分,评价,图标,标签,宽度,高度 %}
+ */
+
+'use strict'
+
+// 分数转成星星
+function tostar(num) {
+    let tmp = ''
+    for (let i = 0; i < Math.floor(num); i++) { tmp += '' } // 整数部分加实心星星
+    if (num - Math.floor(num) != 0) tmp += '' // 小数部分转成半星
+    for (let i = 0; i < 5 - Math.ceil(num); i++) { tmp += '' } // 不够5个补空心星星
+    return tmp
+}
+
+function card(args) {
+    args = args.join(' ').split(',')
+
+    // 获取参数
+    let name = (args[0] || '未知').trim()
+    let url = (args[1] || '').trim()
+    let bg = (args[2] ? `background-image: url(${args[2]});` : 'background-color: #333;').trim()
+    let star = tostar(Number(args[3]) || 0)
+    let text = (args[4] || '此作品博主暂未作出评价').trim()
+    let icon = (args[5] || '').trim()
+    let tag = (args[6] || '').trim()
+    let w = args[7] || '200px'
+    let h = args[8] || '275px'
+
+    return `
    
+    
    
+      ${text}
+      ${url?'查看详情':''}
+    
    
+    
    
+      
+      ${tag}
+    
    
+    
    
+      ${name}
+      
    ${star}
    
+    
    
+  
    `
+}
+
+hexo.extend.tag.register('card', card, { ends: false })
\ No newline at end of file
diff --git a/scripts/tag/flink.js b/scripts/tag/flink.js
new file mode 100644
index 0000000..e41a52f
--- /dev/null
+++ b/scripts/tag/flink.js
@@ -0,0 +1,39 @@
+/**
+ * flink
+ */
+
+'use strict'
+
+const urlFor = require('hexo-util').url_for.bind(hexo)
+
+const flinkFn = (args, content) => {
+  content = hexo.render.renderSync({ text: content, engine: 'yaml' })
+
+  let result = ''
+
+  content.forEach(i => {
+    const className = i.class_name ? `
    ${i.class_name}
    ` : ''
+    const classDesc = i.class_desc ? `
    ${i.class_desc}
    ` : ''
+
+    let listResult = ''
+
+    i.link_list.forEach(j => {
+      listResult += `
+          
    
+            
+              
    
+                ${j.name}
+              
    
+              
    ${j.name}
     
+              
    ${j.descr}
    
+                
+          
    `
+    })
+
+    result += `${className}${classDesc} 
    ${listResult}
    `
+  })
+
+  return `
    ${result}
    `
+}
+
+hexo.extend.tag.register('flink', flinkFn, { ends: true })
diff --git a/scripts/tag/folding.js b/scripts/tag/folding.js
new file mode 100644
index 0000000..8ebd862
--- /dev/null
+++ b/scripts/tag/folding.js
@@ -0,0 +1,34 @@
+'use strict';
+
+function postFolding(args, content) {
+  if(/::/g.test(args)){
+    args = args.join(' ').split('::');
+  }
+  else{
+    args = args.join(' ').split(',');
+  }
+  let style = '';
+  let title = '';
+  if (args.length > 1) {
+    style = args[0].trim();
+    title = args[1].trim();
+  } else if (args.length > 0) {
+    title = args[0].trim();
+  }
+  if (style != undefined) {
+    return `
     ${title} 
+              
    
+              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+              
    
+            
    `;
+  }
+  return `
     ${title} 
+              
    
+              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+              
    
+            
    `;
+
+
+}
+
+hexo.extend.tag.register('folding', postFolding, {ends: true});
diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js
new file mode 100644
index 0000000..acccd0b
--- /dev/null
+++ b/scripts/tag/gallery.js
@@ -0,0 +1,34 @@
+/**
+ * Butterfly
+ * galleryGroup and allery
+ */
+
+'use strict'
+
+const urlFor = require('hexo-util').url_for.bind(hexo)
+
+function gallery (args, content) {
+  return `
    ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
+          
    `
+}
+
+function galleryGroup (args) {
+  const name = args[0]
+  const desrc = args[1]
+  const url = urlFor(args[2])
+  const img = urlFor(args[3])
+
+  return `
+  
    
+  Group Image Gallery
+  
    
+  
    ${name}
    
+  
    ${desrc}
    
+  
+  
    
+  
    
+  `
+}
+
+hexo.extend.tag.register('gallery', gallery, { ends: true })
+hexo.extend.tag.register('galleryGroup', galleryGroup)
diff --git a/scripts/tag/ghcard.js b/scripts/tag/ghcard.js
new file mode 100644
index 0000000..f00310d
--- /dev/null
+++ b/scripts/tag/ghcard.js
@@ -0,0 +1,49 @@
+/**
+ * https://github.com/anuraghazra/github-readme-stats
+ */
+
+'use strict';
+
+// {% ghcard volantis-x %}
+// {% ghcard volantis-x/hexo-theme-volantis %}
+hexo.extend.tag.register('ghcard', function(args) {
+  if(/::/g.test(args)){
+    args = args.join(' ').split('::');
+  }
+  else{
+    args = args.join(' ').split(',');
+  }
+  const path = args[0].trim();
+  let card = '';
+  card += '';
+  let url = '';
+  if (path.includes('/')) {
+    // is repo
+    const ps = path.split('/');
+    url += 'https://github-readme-stats.xaoxuu.com/api/pin/?username=' + ps[0] + '&repo=' + ps[1];
+  } else {
+    // is user
+    url += 'https://github-readme-stats.xaoxuu.com/api/?username=' + path;
+  }
+  if (args.length > 1) {
+    for (let i = 1; i < args.length; i++) {
+      const tmp = args[i].trim();
+      url += '&' + tmp;
+    }
+  }
+  if (!url.includes('&show_owner=')) {
+    url += '&show_owner=true';
+  }
+  card += '';
+  card += '';
+  return card;
+});
+
+hexo.extend.tag.register('ghcardgroup', function(args, content) {
+  let ret = '';
+  // wrap
+  ret += '
    ';
+  ret += content;
+  ret += '
    ';
+  return ret;
+}, {ends: true});
diff --git a/scripts/tag/hide.js b/scripts/tag/hide.js
new file mode 100644
index 0000000..ccf9365
--- /dev/null
+++ b/scripts/tag/hide.js
@@ -0,0 +1,70 @@
+/**
+ * Butterfly
+ * @example
+ * hideInline
+ * {% hideInline content,display,bg,color %}
+ * content不能包含當引號，可用 '
+ * hideBlock
+ * {% hideBlock display,bg,color %}
+ * content
+ * {% endhideBlock %}
+ * hideToggle
+ * {% hideToggle display,bg,color %}
+ * content
+ * {% endhideToggle %}
+ */
+
+'use strict'
+
+function hideInline (args) {
+  args = args.join(' ').split(',')
+  const content = args[0]
+  const display = args[1] || 'Click'
+  const bg = args[2] || false
+  const color = args[3] || false
+  let group = 'style="'
+
+  if (bg) group += `background-color: ${bg};`
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `${content}`
+}
+
+function hideBlock (args, content) {
+  args = args.join(' ').split(',')
+  const display = args[0] || 'Click'
+  const bg = args[1] || false
+  const color = args[2] || false
+  let group = 'style="'
+
+  if (bg) group += `background-color: ${bg};`
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `
    ${hexo.render.renderSync({ text: content, engine: 'markdown' })}
    `
+}
+
+function hideToggle (args, content) {
+  args = args.join(' ').split(',')
+  const display = args[0]
+  const bg = args[1] || false
+  const color = args[2] || false
+  let group = 'style="'
+  let border = ''
+
+  if (bg) {
+    border = `style="border: 1px solid ${bg}"`
+    group += `background-color: ${bg};`
+  }
+  if (color) group += `color: ${color}`
+  group += '"'
+
+  return `
    ${display}
    ${hexo.render.renderSync({ text: content, engine: 'markdown' })}
    `
+}
+
+hexo.extend.tag.register('hideInline', hideInline)
+hexo.extend.tag.register('hideBlock', hideBlock, { ends: true })
+hexo.extend.tag.register('hideToggle', hideToggle, { ends: true })
diff --git a/scripts/tag/inlineImg.js b/scripts/tag/inlineImg.js
new file mode 100644
index 0000000..9bcbfdb
--- /dev/null
+++ b/scripts/tag/inlineImg.js
@@ -0,0 +1,17 @@
+/**
+ * inlineImg 圖片
+ * {% inlineImg src height %}
+ */
+
+'use strict'
+
+const urlFor = require('hexo-util').url_for.bind(hexo)
+
+function inlineImg (args) {
+  const img = args[0]
+  const height = args[1] ? `style="height:${args[1]}"` : ''
+
+  return ``
+}
+
+hexo.extend.tag.register('inlineImg', inlineImg, { ends: false })
diff --git a/scripts/tag/label.js b/scripts/tag/label.js
new file mode 100644
index 0000000..877c909
--- /dev/null
+++ b/scripts/tag/label.js
@@ -0,0 +1,16 @@
+/**
+ * Butterfly
+ * label
+ * {% label text color %}
+ */
+
+'use strict'
+
+function addLabel (args, content) {
+  const text = args[0]
+  const className = args[1] || 'default'
+
+  return `${text} `
+}
+
+hexo.extend.tag.register('label', addLabel, { ends: false })
diff --git a/scripts/tag/link.js b/scripts/tag/link.js
new file mode 100644
index 0000000..aee9c0b
--- /dev/null
+++ b/scripts/tag/link.js
@@ -0,0 +1,22 @@
+/**
+ * link
+ * {% link url,title,favicon,desc %}
+ * {% link 链接,标题,图标,介绍 %}
+ */
+
+'use strict'
+
+let defaultIcon = ''
+
+function link(args) {
+    args = args.join(' ').split(',');
+    // 获取参数
+    let url = (args[0] || '').trim(),
+        title = (args[1] || '点击直达链接').trim(),
+        favicon = (args[2] ? `` : defaultIcon).trim(),
+        desc = (args[3] || '').trim()
+
+    return `
    ${favicon}
    ${title}
    ${desc?`
    ${desc}
    `:''}
    `
+}
+
+hexo.extend.tag.register('link', link, { ends: false })
\ No newline at end of file
diff --git a/scripts/tag/media.js b/scripts/tag/media.js
new file mode 100644
index 0000000..d21a6f8
--- /dev/null
+++ b/scripts/tag/media.js
@@ -0,0 +1,53 @@
+'use strict';
+
+function postAudio(args) {
+  const src = args[0].trim();
+  return `
    `;
+}
+
+function postVideo(args) {
+  const {config} = hexo;
+  const src = args[0].trim();
+  // m3u8 https://github.com/volantis-x/hexo-theme-volantis/issues/606
+  // 文件扩展名为 .m3u8
+  if (hexo.getType(src) === "m3u8") {
+    let video_id = `video-${hexo.createUuid()}`
+    return `
    
+        `;
+  }
+  return `
    `;
+}
+
+function postVideos(args, content) {
+  if(/::/g.test(args)){
+    args = args.join(' ').split('::');
+  }
+  else{
+    args = args.join(' ').split(',');
+  }
+  var cls = args[0];
+  if (cls.length > 0) {
+    cls = ' ' + cls;
+  }
+  var col = Number(args[1]) || 0;
+  if (col > 0) {
+    return `
    ${content}
    `;
+  }
+  return `
    ${content}
    `;
+
+}
+
+hexo.extend.tag.register('audio', postAudio);
+hexo.extend.tag.register('video', postVideo);
+hexo.extend.tag.register('videos', postVideos, {ends: true});
diff --git a/scripts/tag/mermaid.js b/scripts/tag/mermaid.js
new file mode 100644
index 0000000..237b7ee
--- /dev/null
+++ b/scripts/tag/mermaid.js
@@ -0,0 +1,17 @@
+/**
+ * Butterfly
+ * mermaid
+ * https://github.com/mermaid-js/mermaid
+ */
+
+'use strict'
+
+const { escapeHTML } = require('hexo-util')
+
+function mermaid (args, content) {
+  return `
    `
+}
+
+hexo.extend.tag.register('mermaid', mermaid, { ends: true })
diff --git a/scripts/tag/msgbox.js b/scripts/tag/msgbox.js
new file mode 100644
index 0000000..9a140fc
--- /dev/null
+++ b/scripts/tag/msgbox.js
@@ -0,0 +1,39 @@
+/**
+{% msgbox %}
+{% msgguest name,avatar %}
+对话内容
+{% endmsgguest %}
+{% msgadmin name,avatar %}
+对话内容
+{% endmsgadmin %}
+{% endmsgbox %}
+*/
+
+'use strict'
+
+const urlFor = require('hexo-util').url_for.bind(hexo)
+
+function msgbox (args, content) {
+  return `
    ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
+          
    `
+}
+
+function msgguest (args, content) {
+  args = args.join(' ').split(',')
+  let guestname = args[0]?args[0].trim():'noname' //默认无名
+  let guestavatar = args[1]?args[1].trim():hexo.theme.config.error_img.flink //默认友链错误头像
+
+  return `
    ${guestname}
    ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
    `
+}
+function msgadmin (args, content) {
+  args = args.join(' ').split(',')
+  let adminname = args[0]?args[0].trim():hexo.config.author //默认作者
+  let adminavatar = args[1]?args[1].trim():hexo.theme.config.avatar.img //默认作者头像
+
+  return `
    ${adminname}
    ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
    `
+}
+
+
+hexo.extend.tag.register('msgbox', msgbox, { ends: true })
+hexo.extend.tag.register('msgguest', msgguest, { ends: true })
+hexo.extend.tag.register('msgadmin', msgadmin, { ends: true })
\ No newline at end of file
diff --git a/scripts/tag/note.js b/scripts/tag/note.js
new file mode 100644
index 0000000..aa19129
--- /dev/null
+++ b/scripts/tag/note.js
@@ -0,0 +1,27 @@
+/**
+ * note.js
+ * transplant from hexo-theme-next
+ * Modify by Jerry
+ */
+
+'use strict'
+
+function postNote (args, content) {
+  const styleConfig = hexo.theme.config.note.style
+  const lastArgs = args[args.length - 1]
+  if (!(lastArgs === 'flat' || lastArgs === 'modern' || lastArgs === 'simple' || lastArgs === 'disabled')) {
+    args.push(styleConfig)
+  }
+
+  let icon = ''
+  const iconArray = args[args.length - 2]
+  if (iconArray && iconArray.startsWith('fa')) {
+    icon = ``
+    args[args.length - 2] = 'icon-padding'
+  }
+
+  return `
    ${icon + hexo.render.renderSync({ text: content, engine: 'markdown' })}
    `
+}
+
+hexo.extend.tag.register('note', postNote, { ends: true })
+hexo.extend.tag.register('subnote', postNote, { ends: true })
diff --git a/scripts/tag/poem.js b/scripts/tag/poem.js
new file mode 100644
index 0000000..715b4f4
--- /dev/null
+++ b/scripts/tag/poem.js
@@ -0,0 +1,18 @@
+// 'use strict'
+//
+// function poem (args, content) {
+//   return `
    ${content}
    `
+// }
+//
+// hexo.extend.tag.register('poem', poem, { ends: true })
+
+'use strict'
+
+function poem (args, content) {
+  args = args.join(' ').split(',')
+  let p0 = args[0]
+  let p1 = args[1]?args[1]:''
+  return `
    ${p0}
    ${p1}
    ${hexo.render.renderSync({ text: content, engine: 'markdown' })}
    `
+}
+
+hexo.extend.tag.register('poem',poem,{ ends: true });
diff --git a/scripts/tag/progress.js b/scripts/tag/progress.js
new file mode 100644
index 0000000..cb56182
--- /dev/null
+++ b/scripts/tag/progress.js
@@ -0,0 +1,11 @@
+'use strict';
+function postprogress(args) {
+  args = args.join(',').split(',')
+  if (args.length > 1) {
+    let pwidth = args[0].trim()
+    let pcolor = args[1].trim()
+    let text = args[2].trim()
+    return `
    ${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}
    `;
+  }
+}
+hexo.extend.tag.register('progress', postprogress);
diff --git a/scripts/tag/reference.js b/scripts/tag/reference.js
new file mode 100644
index 0000000..1e1cc48
--- /dev/null
+++ b/scripts/tag/reference.js
@@ -0,0 +1,26 @@
+/*
+{% referto 'id','literature' %}
+{% referfrom 'id','literature','url' %}
+*/
+'use strict'
+const urlFor = require('hexo-util').url_for.bind(hexo)
+
+function referto (args) {
+  args = args.join(' ').split(',')
+  let referid = args[0]
+  let literature = args[1]
+  return `${referid}${literature}参考资料`;
+}
+
+
+function referfrom (args) {
+  args = args.join(' ').split(',')
+  let fromid = args[0]
+  let fromliterature = args[1]
+  let referurl = args[2] ? urlFor(args[2]) : 'javascript:void'
+  return `
    ${fromid}
    ${fromliterature}
    `;
+
+}
+
+hexo.extend.tag.register('referto',referto);
+hexo.extend.tag.register('referfrom',referfrom);
diff --git a/scripts/tag/span.js b/scripts/tag/span.js
new file mode 100644
index 0000000..205dcc9
--- /dev/null
+++ b/scripts/tag/span.js
@@ -0,0 +1,29 @@
+//- 移植自volantis
+
+'use strict';
+
+function postP(args) {
+  if(/::/g.test(args)){
+    args = args.join(' ').split('::');
+  }
+  else{
+    args = args.join(' ').split(',');
+  }
+  const p0 = args[0].trim();
+  const p1 = args[1].trim();
+  return `
    ${p1}
    `;
+}
+function postSpan(args) {
+  if(/::/g.test(args)){
+    args = args.join(' ').split('::');
+  }
+  else{
+    args = args.join(' ').split(',');
+  }
+  const p0 = args[0].trim();
+  const p1 = args[1].trim();
+  return `${p1}`;
+}
+
+hexo.extend.tag.register('p', postP);
+hexo.extend.tag.register('span', postSpan);
\ No newline at end of file
diff --git a/scripts/tag/tabs.js b/scripts/tag/tabs.js
new file mode 100644
index 0000000..050aeee
--- /dev/null
+++ b/scripts/tag/tabs.js
@@ -0,0 +1,62 @@
+/**
+ * Tabs
+ * transplant from hexo-theme-next
+ * modify by Jerry
+ */
+
+'use strict'
+
+function postTabs (args, content) {
+  const tabBlock = /\n([\w\W\s\S]*?)/g
+
+  args = args.join(' ').split(',')
+  const tabName = args[0]
+  const tabActive = Number(args[1]) || 0
+
+  const matches = []
+  let match
+  let tabId = 0
+  let tabNav = ''
+  let tabContent = ''
+
+  !tabName && hexo.log.warn('Tabs block must have unique name!')
+
+  while ((match = tabBlock.exec(content)) !== null) {
+    matches.push(match[1])
+    matches.push(match[2])
+  }
+
+  for (let i = 0; i < matches.length; i += 2) {
+    const tabParameters = matches[i].split('@')
+    let postContent = matches[i + 1]
+    let tabCaption = tabParameters[0] || ''
+    let tabIcon = tabParameters[1] || ''
+    let tabHref = ''
+
+    postContent = hexo.render.renderSync({ text: postContent, engine: 'markdown' }).trim()
+
+    tabId += 1
+    tabHref = (tabName + ' ' + tabId).toLowerCase().split(' ').join('-');
+
+    ((tabCaption.length === 0) && (tabIcon.length === 0)) && (tabCaption = tabName + ' ' + tabId)
+
+    const isOnlyicon = tabIcon.length > 0 && tabCaption.length === 0 ? ' style="text-align: center;"' : ''
+    const icon = tabIcon.trim()
+    tabIcon.length > 0 && (tabIcon = ``)
+
+    const toTop = ''
+
+    const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
+    tabNav += `
    • `
+    tabContent += `
    ${postContent + toTop}
    `
+  }
+
+  tabNav = `
      ${tabNav}
    `
+  tabContent = `
    ${tabContent}
    `
+
+  return `
    ${tabNav + tabContent}
    `
+}
+
+hexo.extend.tag.register('tabs', postTabs, { ends: true })
+hexo.extend.tag.register('subtabs', postTabs, { ends: true })
+hexo.extend.tag.register('subsubtabs', postTabs, { ends: true })
diff --git a/scripts/tag/timeline.js b/scripts/tag/timeline.js
new file mode 100644
index 0000000..6c87a6b
--- /dev/null
+++ b/scripts/tag/timeline.js
@@ -0,0 +1,41 @@
+/**
+ * timeline
+ * by Jerry
+ */
+
+'use strict'
+
+function timeLineFn (args, content) {
+  const tlBlock = /\n([\w\W\s\S]*?)/g
+
+  let result = ''
+  let color = ''
+  if (args.length) {
+    args = args.join(' ').split(',')
+    color = args[1]
+    const mdContent = hexo.render.renderSync({ text: args[0], engine: 'markdown' })
+    result += `
    ${mdContent}
    `
+  }
+
+  const matches = []
+  let match
+
+  while ((match = tlBlock.exec(content)) !== null) {
+    matches.push(match[1])
+    matches.push(match[2])
+  }
+
+  for (let i = 0; i < matches.length; i += 2) {
+    const tlChildTitle = hexo.render.renderSync({ text: matches[i], engine: 'markdown' })
+    const tlChildContent = hexo.render.renderSync({ text: matches[i + 1], engine: 'markdown' })
+
+    const tlTitleHtml = `
    ${tlChildTitle}
    `
+    const tlContentHtml = `
    ${tlChildContent}
    `
+
+    result += `
    ${tlTitleHtml + tlContentHtml}
    `
+  }
+
+  return `
    ${result}
    `
+}
+
+hexo.extend.tag.register('timeline', timeLineFn, { ends: true })
diff --git a/source/css/_custom/about.css b/source/css/_custom/about.css
new file mode 100644
index 0000000..b30d1c8
--- /dev/null
+++ b/source/css/_custom/about.css
@@ -0,0 +1,1403 @@
+#gitcalendar {
+  margin: 0 auto;
+  border-radius: 24px;
+  background: var(--anzhiyu-card-bg);
+  border: var(--style-border-always);
+  box-shadow: var(--anzhiyu-shadow-border);
+  position: relative;
+  padding: 1rem 2rem;
+  overflow: hidden;
+}
+
+#page:has(#about-page) {
+  border: 0;
+  box-shadow: none !important;
+  padding: 0 !important;
+  background: transparent !important;
+}
+
+#page:has(#about-page) .page-title {
+  display: none;
+}
+
+.page:has(#about-page) #footer-wrap {
+  opacity: 1;
+  overflow: visible;
+  height: auto !important;
+  min-height: 16px;
+  color: #666;
+}
+
+#web_bg ~ .page:has(#about-page) {
+  background: var(--anzhiyu-background);
+}
+
+.author-box {
+  position: relative;
+}
+.author-box .author-img {
+  margin: auto;
+  border-radius: 50%;
+  overflow: hidden;
+  width: 180px;
+  height: 180px;
+}
+.author-box .author-img img {
+  border-radius: 50%;
+  overflow: hidden;
+  width: 180px;
+  height: 180px;
+}
+
+.author-box .image-dot {
+  width: 45px;
+  height: 45px;
+  background: #6bdf8f;
+  position: absolute;
+  border-radius: 50%;
+  border: 6px solid var(--anzhiyu-background);
+  top: 50%;
+  left: 50%;
+  transform: translate(35px, 45px);
+}
+
+.author-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 1rem;
+}
+
+.myInfoAndSayHello {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--anzhiyu-white);
+  background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%) !important;
+  background-size: 200%;
+  animation: gradient 15s ease infinite;
+  width: 59%;
+}
+
+.author-content-item {
+  width: 49%;
+  border-radius: 24px;
+  background: var(--anzhiyu-card-bg);
+  border: var(--style-border-always);
+  box-shadow: var(--anzhiyu-shadow-border);
+  position: relative;
+  padding: 1rem 2rem;
+  overflow: hidden;
+}
+
+.myInfoAndSayHello .title1 {
+  opacity: 0.8;
+  line-height: 1.3;
+}
+
+.myInfoAndSayHello .title2 {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.1;
+  margin: 0.5rem 0;
+}
+.inline-word {
+  word-break: keep-all;
+  white-space: nowrap;
+}
+
+.myInfoAndSayHello .title1 {
+  opacity: 0.8;
+  line-height: 1.3;
+}
+
+.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: -0.02em;
+  color: var(--font-color);
+  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: 0.5s transform ease-in-out;
+}
+.aboutsiteTips .mask span[data-up] {
+  transform: translateY(-200%);
+  transition: 0.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-statistic {
+  min-height: 380px;
+  width: 39%;
+  background: url(https://img02.anheyu.com/adminuploads/1/2022/09/23/632d634f8376d.jpg) no-repeat top;
+  background-size: cover;
+  color: var(--anzhiyu-white);
+  overflow: hidden;
+}
+.about-statistic::after {
+  box-shadow: 0 -159px 173px 71px #0c1c2c inset;
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.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;
+}
+
+.author-content-item .card-content .author-content-item-title {
+  margin-bottom: 0.5rem;
+}
+.author-content-item .author-content-item-title {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1;
+}
+#statistic {
+  font-size: 16px;
+  border-radius: 15px;
+  width: 100%;
+  color: var(--anzhiyu-white);
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+#statistic div span:first-child {
+  opacity: 0.8;
+  font-size: 0.6rem;
+}
+#statistic div span:last-child {
+  font-weight: 700;
+  font-size: 34px;
+  line-height: 1;
+  white-space: nowrap;
+}
+#statistic div {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  width: 50%;
+  margin-bottom: 0.5rem;
+}
+
+.post-tips {
+  color: var(--anzhiyu-gray);
+  font-size: 14px;
+  position: absolute;
+  bottom: 1rem;
+  left: 2rem;
+}
+.post-tips a {
+  color: var(--anzhiyu-gray) !important;
+  border: none !important;
+}
+.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: 124px;
+  border-radius: 20px;
+  justify-content: center;
+  background: var(--anzhiyu-card-bg);
+  color: var(--font-color);
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  transition: 0.3s;
+  cursor: pointer;
+  border-bottom: 0 !important;
+}
+.author-content-item .card-content .banner-button-group .banner-button i {
+  margin-right: 8px;
+  font-size: 1rem;
+}
+.author-content-item .card-content .banner-button-group .banner-button i {
+  font-size: 1.5rem;
+}
+
+.author-content-item .card-content .banner-button-group .banner-button:hover {
+  background: var(--anzhiyu-main);
+  color: var(--anzhiyu-white);
+  border-radius: 20px !important;
+}
+.author-content-item.personalities {
+  position: relative;
+  width: 59%;
+}
+
+.author-content-item.personalities .image {
+  position: absolute;
+  right: 30px;
+  top: 10px;
+  width: 220px;
+  transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02);
+}
+.author-content-item.personalities .image img {
+  display: block;
+  margin: 0 auto 20px;
+  max-width: 100%;
+  transition: filter 375ms ease-in 0.2s;
+}
+.author-content-item.personalities:hover .image {
+  transform: rotate(-10deg);
+}
+.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;
+  min-width: 100%;
+  object-fit: cover;
+  transition: 0.6s;
+  animation: coverIn 2s ease-out forwards;
+  transition: transform 2s ease-out !important;
+}
+.author-content-item.myphoto:hover img {
+  transform: scale(1.1);
+}
+.author-content-item:hover .card-background-icon {
+  transform: rotate(20deg);
+}
+.author-content-item.personalities .title2 {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.author-content-item.map {
+  background: url(https://img02.anheyu.com/adminuploads/1/2022/09/24/632e6f48981d8.jpg) 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;
+}
+[data-theme="dark"] .author-content-item.map {
+  background: url(https://img02.anheyu.com/adminuploads/1/2022/09/26/6330ebf1f3e65.jpg) no-repeat center;
+  background-size: 100%;
+}
+
+.author-content-item.single {
+  width: 100%;
+}
+
+.author-content-item.map .map-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: var(--anzhiyu-maskbg);
+  padding: 0.5rem 2rem;
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transition: 1s ease-in-out;
+  font-size: 20px;
+}
+.author-content-item.map .map-title b {
+  color: var(--font-color);
+}
+.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%;
+}
+.author-content-item.selfInfo div {
+  display: flex;
+  flex-direction: column;
+  margin: 0.5rem 2rem 0.5rem 0;
+}
+.author-content-item.selfInfo .selfInfo-title {
+  opacity: 0.8;
+  font-size: 0.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-group.column.mapAndInfo {
+  width: 59%;
+}
+.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:hover .map-title {
+  bottom: -100%;
+}
+.author-content-item-group.column {
+  display: flex;
+  flex-direction: column;
+  width: 49%;
+  justify-content: space-between;
+}
+
+.post-tips a:hover {
+  color: var(--anzhiyu-main) !important;
+  background: none !important;
+}
+
+.author-content-item.single.reward .reward-list-updateDate {
+  color: var(--anzhiyu-gray);
+  font-size: 14px;
+}
+
+.author-content-item.single.reward .post-reward {
+  position: absolute;
+  margin-top: 0px;
+  width: auto;
+  text-align: none;
+  pointer-events: none;
+  right: 2rem;
+  top: 2rem;
+}
+.tip-button {
+  border: 0;
+  border-radius: 2.25rem;
+  cursor: pointer;
+  font-size: 20px;
+  font-weight: 600;
+  height: 2.6rem;
+  margin-bottom: -4rem;
+  outline: 0;
+  position: relative;
+  top: 0;
+  transform-origin: 0 100%;
+  transition: transform 50ms ease-in-out;
+  width: auto;
+  -webkit-tap-highlight-color: transparent;
+}
+.coin::before,
+.coin__back,
+.coin__back::after,
+.coin__front,
+.coin__front::after,
+.coin__middle {
+  border-radius: 50%;
+  box-sizing: border-box;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  z-index: 3;
+}
+.coin-wrapper {
+  background: 0 0;
+  bottom: 0;
+  height: 18rem;
+  left: 0;
+  opacity: 1;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  transform: none;
+  transform-origin: 50% 100%;
+  transition: opacity 0.2s linear 0.1s, transform 0.3s ease-out;
+  width: 100%;
+}
+.coin__front::after {
+  background: rgba(0, 0, 0, 0.2);
+  content: "";
+  opacity: var(--front-y-multiplier);
+}
+.coin__back::after {
+  background: rgba(0, 0, 0, 0.2);
+  content: "";
+  opacity: var(--back-y-multiplier);
+}
+.coin__middle {
+  background: #737c99;
+  transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--middle-scale-multiplier));
+}
+.coin::before {
+  background: radial-gradient(circle at 25% 65%, transparent 50%, rgba(255, 255, 255, 0.9) 90%), linear-gradient(55deg, transparent
+        calc(var(--shine-bg-multiplier) + 0), #e9f4ff calc(var(--shine-bg-multiplier) + 0), transparent calc(var(
+              --shine-bg-multiplier
+            ) + 50%));
+  content: "";
+  opacity: var(--shine-opacity-multiplier);
+  transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / -2)) scaleY(var(--middle-scale-multiplier))
+    rotate(calc(var(--coin-rotation-multiplier) * 1deg));
+  z-index: 10;
+}
+
+.coin {
+  --front-y-multiplier: 0;
+  --back-y-multiplier: 0;
+  --coin-y-multiplier: 0;
+  --coin-x-multiplier: 0;
+  --coin-scale-multiplier: 0;
+  --coin-rotation-multiplier: 0;
+  --shine-opacity-multiplier: 0.4;
+  --shine-bg-multiplier: 50%;
+  bottom: calc(var(--coin-y-multiplier) * 1rem - 3.5rem);
+  height: 3.5rem;
+  margin-bottom: 3.05rem;
+  position: absolute;
+  right: calc(var(--coin-x-multiplier) * 34% + 16%);
+  transform: translateX(50%) scale(calc(0.4 + var(--coin-scale-multiplier))) rotate(calc(var(
+            --coin-rotation-multiplier
+          ) * -1deg));
+  transition: opacity 0.1s linear 0.2s;
+  width: 3.5rem;
+  z-index: 3;
+}
+
+.coin__back {
+  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%),
+    radial-gradient(circle at 50% 40%, #fcfaf9 23%, transparent 23%), radial-gradient(circle at 50% 100%, #fcfaf9 35%, transparent
+        35%);
+  background-color: #8590b3;
+  background-size: 100% 100%;
+  transform: translateY(calc(var(--back-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--back-scale-multiplier));
+}
+.coin__front {
+  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%),
+    linear-gradient(210deg, #8590b3 32%, transparent 32%), linear-gradient(150deg, #8590b3 32%, transparent 32%),
+    linear-gradient(to right, #8590b3 22%, transparent 22%, transparent 78%, #8590b3 78%), linear-gradient(
+      to bottom,
+      #fcfaf9 44%,
+      transparent 44%,
+      transparent 65%,
+      #fcfaf9 65%,
+      #fcfaf9 71%,
+      #8590b3 71%
+    ), linear-gradient(to right, transparent 28%, #fcfaf9 28%, #fcfaf9 34%, #8590b3 34%, #8590b3 40%, #fcfaf9 40%, #fcfaf9
+        47%, #8590b3 47%, #8590b3 53%, #fcfaf9 53%, #fcfaf9 60%, #8590b3 60%, #8590b3 66%, #fcfaf9 66%, #fcfaf9 72%, transparent
+        72%);
+  background-color: #8590b3;
+  background-size: 100% 100%;
+  transform: translateY(calc(var(--front-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--front-scale-multiplier));
+}
+.tip-button__text {
+  color: #fff;
+  margin-right: 1.8rem;
+  opacity: 1;
+  position: relative;
+  transition: opacity 0.1s linear 0.5s;
+  z-index: 3;
+}
+.author-content .post-reward .reward-main {
+  bottom: 0;
+  top: 50px;
+  left: auto;
+  right: 0;
+}
+.author-content .post-reward .reward-main .reward-all:before {
+  top: -11px;
+  bottom: auto;
+}
+.post-reward .reward-item a:hover {
+  background: transparent !important;
+}
+.post-reward .reward-item a {
+  border-bottom: none !important;
+}
+.post-reward .reward-item a img {
+  margin-bottom: 0 !important;
+}
+.post-reward .reward-main .reward-all {
+  border-radius: 10px;
+  padding: 20px 10px !important;
+}
+.post-reward .reward-main .reward-all .reward-item {
+  padding: 0 8px !important;
+}
+.post-reward .reward-main .reward-all li.reward-item::before {
+  content: none !important;
+}
+.post-reward .reward-main .reward-all:after {
+  content: none !important;
+}
+.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 .author-content-item-tips {
+  opacity: 0.8;
+  font-size: 0.6rem;
+  margin-bottom: 0.5rem;
+}
+.author-content-item.maxim .maxim-title {
+  display: flex;
+  flex-direction: column;
+}
+.author-content-item.buff {
+  height: 200px;
+  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(--anzhiyu-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;
+}
+.card-background-icon {
+  font-size: 12rem;
+  opacity: 0.2;
+  position: absolute;
+  right: 0;
+  bottom: -40%;
+  transform: rotate(30deg);
+  transition: 2s ease-in-out;
+}
+.author-content-item.game-yuanshen {
+  background: url(https://img02.anheyu.com/adminuploads/1/2022/12/19/63a079ca63c8a.webp) no-repeat top;
+  background-size: cover;
+  min-height: 300px;
+  overflow: hidden;
+  color: var(--anzhiyu-white);
+  width: 59%;
+}
+
+.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;
+  position: relative;
+}
+.author-content-item .content-bottom .icon-group i {
+  display: inline-block;
+  width: 143px;
+  height: 18px;
+  margin-right: 0.5rem;
+}
+.icon-pos-mid {
+  background: url(https://img02.anheyu.com/adminuploads/1/2022/09/25/632fb9cecfc8c.png);
+}
+.author-content-item.game-yuanshen::after {
+  box-shadow: 0 -69px 203px 11px #575d8b inset;
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.author-content-item.comic-content {
+  width: 39%;
+  background: url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/violet.jpg) no-repeat top;
+  background-size: cover;
+  min-height: 300px;
+  overflow: hidden;
+  color: violet;
+}
+.author-content-item.comic-content::after {
+  box-shadow: 0 -48px 203px 11px #fbe9b8 inset;
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.author-content-item.like-technology {
+  background: url(https://img02.anheyu.com/adminuploads/1/2022/09/24/632f0dd8f33c6.webp) no-repeat;
+  background-size: cover;
+  min-height: 230px;
+  color: var(--anzhiyu-white);
+}
+
+.author-content-item.like-music {
+  background: url(https://p2.music.126.net/Mrg1i7DwcwjWBvQPIMt_Mg==/79164837213438.jpg) no-repeat top;
+  background-size: cover;
+  min-height: 400px;
+  color: var(--anzhiyu-white);
+  overflow: hidden;
+}
+
+.author-content-item .card-content .banner-button-group {
+  position: absolute;
+  bottom: 1.5rem;
+  right: 2rem;
+}
+
+.author-content-item.like-music::after {
+  box-shadow: 0 -69px 203px 11px #453e38 inset;
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+@media screen and (max-width: 768px) {
+  #gitcalendar {
+    display: none;
+  }
+  [data-theme="dark"] .author-content-item .card-content .banner-button-group .banner-button {
+    color: var(--anzhiyu-black) !important;
+  }
+  .author-content-item .card-content .banner-button-group .banner-button:hover {
+    background: none !important;
+  }
+  .author-content-item.game-yuanshen .content-bottom {
+    padding-bottom: 10px;
+  }
+  .author-content-item.game-yuanshen .game-yuanshen-uid {
+    display: none;
+  }
+  .author-content {
+    margin-top: 0;
+  }
+  .author-content-item {
+    width: 100% !important;
+    margin-top: 1rem;
+    padding: 1rem;
+  }
+  .author-content-item.map {
+    margin-bottom: 0;
+  }
+  .author-content-item-group.column {
+    width: 100% !important;
+  }
+  .author-content-item.selfInfo {
+    height: 95%;
+  }
+  .author-content-item.personalities {
+    height: 170px;
+  }
+  .post-tips {
+    left: auto;
+  }
+  .author-content-item.personalities .image {
+    width: 90px;
+  }
+  .site-card-group > a {
+    width: 100% !important;
+  }
+  .post-reward {
+    display: none;
+  }
+  .reward-list-item {
+    width: 100% !important;
+  }
+  .layout > div:first-child:not(.recent-posts) {
+    /* border-radius: 0; */
+    padding: 0 1rem !important;
+    box-shadow: none !important;
+    background: var(--anzhiyu-background);
+  }
+  .author-content-item .card-content .banner-button-group .banner-button-text {
+    display: none;
+  }
+  .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;
+    padding: 0;
+  }
+  .author-content-item .card-content .banner-button-group .banner-button i {
+    margin-right: 0;
+    font-size: 1.5rem;
+    background: white;
+    border-radius: 50%;
+    padding: 6px;
+    margin-left: 80px;
+  }
+  .author-content-item .card-content .banner-button-group .banner-button:hover i {
+    background: var(--anzhiyu-background) !important;
+    color: var(--anzhiyu-theme);
+  }
+  #selfInfo-content-year {
+    width: 90px;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 896px) {
+  .author-content-item.like-music .content-bottom .tips {
+    display: none;
+  }
+}
+
+/* 赞赏的css */
+
+.reward-list-all {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.reward-list-item {
+  padding: 1rem;
+  border-radius: 12px;
+  border: var(--style-border-always);
+  width: calc((100% / 3) - 0.5rem);
+  margin: 0 0.25rem 0.5rem 0.25rem;
+  box-shadow: var(--anzhiyu-shadow-border);
+}
+
+.reward-list-item .reward-list-item-name {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+}
+
+.reward-list-item .reward-list-bottom-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.reward-list-item .reward-list-item-money {
+  padding: 4px;
+  background: var(--font-color);
+  color: var(--card-bg);
+  font-size: 12px;
+  line-height: 1;
+  border-radius: 4px;
+  margin-right: 4px;
+  white-space: nowrap;
+}
+
+.reward-list-item .reward-list-item-time {
+  font-size: 12px;
+  color: var(--anzhiyu-secondtext);
+  white-space: nowrap;
+}
+
+.author-content-item.careers {
+  min-height: 400px;
+}
+.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(--anzhiyu-secondtext);
+}
+.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(--anzhiyu-secondtext);
+}
+.author-content-item.careers img {
+  position: absolute;
+  left: 0;
+  bottom: 20px;
+  width: 100%;
+  transition: 0.6s;
+}
+
+:root {
+  --loadingbar-background-color: #2c2b30;
+  --loadingbar-prospect-color: #ece5d8;
+}
+
+/* html.dark body {
+  background-color: #161d22;
+} */
+
+.loading-bar {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 500px;
+  height: 62.5px;
+  transform: translate(-25%, -50%) scale(0.5);
+  transition: all 0.5s;
+  user-select: none;
+  overflow: hidden;
+}
+
+.loading-bar img {
+  position: absolute;
+  top: 500px;
+  left: 0;
+  filter: drop-shadow(0 -500px 0 var(--loadingbar-background-color));
+}
+
+.loading-bar::after {
+  content: "";
+  position: absolute;
+  top: 500px;
+  left: 0;
+  filter: drop-shadow(0 -500px 0 var(--loadingbar-prospect-color));
+  width: 500px;
+  height: 62.5px;
+  background: url("https://yuanshen.site/imgs/loading-bar.png") no-repeat left 100%;
+  background-size: 500px 62.5px;
+  background-position-x: 0;
+}
+.author-content-item.game-yuanshen:hover .loading-bar::after {
+  animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards;
+}
+
+@media screen and (max-width: 719px) {
+  .loading-bar .loading-bar {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 719px) and (orientation: landscape) {
+  .loading-bar .loading-bar {
+    display: block !important;
+    transform: translate(-50%, -50%) scale(0.7) !important;
+  }
+}
+
+@supports not (filter: drop-shadow(0 0 0 #fff)) {
+  .loading-bar:before {
+    content: "Your browser does not support the animation";
+  }
+}
+
+@keyframes loading-bar {
+  0% {
+    width: 0;
+    background-size: 500px 62.5px;
+  }
+  16.6% {
+  }
+  33.2% {
+  }
+  49.8% {
+  }
+  66.4% {
+  }
+  83% {
+    width: 475px;
+  }
+  83.1% {
+    width: 475px;
+  }
+  83.2% {
+    width: 475px;
+  }
+  83.3% {
+    width: 475px;
+  }
+  83.4% {
+    width: 475px;
+  }
+  83.5% {
+    width: 475px;
+  }
+  83.6% {
+    width: 475px;
+  }
+  83.7% {
+    width: 475px;
+  }
+  83.8% {
+    width: 475px;
+  }
+  83.9% {
+    width: 475px;
+  }
+  84% {
+    width: 475px;
+  }
+  85% {
+    width: 475px;
+  }
+  86% {
+    width: 475px;
+  }
+  87% {
+    width: 475px;
+  }
+  100% {
+    width: 500px;
+  }
+}
+
+.hello-about {
+  margin: 20px auto;
+  border-radius: 24px;
+  background: var(--anzhiyu-card-bg);
+  border: var(--style-border-always);
+  box-shadow: var(--anzhiyu-shadow-border);
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+}
+
+.shapes {
+  position: relative;
+  height: 315px;
+  width: 100%;
+  background: #2128bd;
+  overflow: hidden;
+}
+
+.shape {
+  will-change: transform;
+  position: absolute;
+  border-radius: 50%;
+}
+
+.shape.shape-1 {
+  background: #005ffe;
+  width: 650px;
+  height: 650px;
+  margin: -325px 0 0 -325px;
+}
+
+.shape.shape-2 {
+  background: #ffe5e3;
+  width: 440px;
+  height: 440px;
+  margin: -220px 0 0 -220px;
+}
+
+.shape.shape-3 {
+  background: #ffcc57;
+  width: 270px;
+  height: 270px;
+  margin: -135px 0 0 -135px;
+}
+
+.hello-about .content {
+  top: 0;
+  left: 0;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 315px;
+  width: 100%;
+  background: #fff;
+  mix-blend-mode: screen;
+}
+[data-theme="dark"] .hello-about .content {
+  background: transparent;
+}
+[data-theme="dark"] .hello-about h1 {
+  color: var(--anzhiyu-white);
+}
+
+.hello-about h1 {
+  font-size: 200px;
+  color: #000;
+  margin: 0;
+  text-align: center;
+  font: inherit;
+  vertical-align: baseline;
+  line-height: 1;
+  font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media (min-width: 419px) {
+  .hello-about h1 {
+    font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
+  }
+}
+
+.cursor {
+  position: absolute;
+  background: #2128bd;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border-radius: 50%;
+  will-change: transform;
+  user-select: none;
+  pointer-events: none;
+  z-index: 3;
+}
+
+::selection {
+  color: #fff;
+  background: #2128bd;
+}
+
+.author-content-item.skills {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-direction: column;
+  width: 50%;
+  min-height: 450px;
+}
+
+.author-content-item.skills .skills-style-group {
+  position: relative;
+}
+
+.author-content-item.skills .tags-group-all {
+  display: flex;
+  transform: rotate(0);
+  transition: 0.3s;
+}
+.author-content-item.skills .tags-group-wrapper {
+  margin-top: 40px;
+  display: flex;
+  flex-wrap: nowrap;
+  animation: rowup 60s linear infinite;
+}
+.tags-group-icon-pair {
+  margin-left: 1rem;
+}
+.tags-group-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 66px;
+  font-weight: 700;
+  box-shadow: var(--anzhiyu-shadow-blackdeep);
+  width: 120px;
+  height: 120px;
+  border-radius: 30px;
+}
+.tags-group-icon img {
+  width: 60%;
+  margin: 0 auto !important;
+}
+.tags-group-icon-pair .tags-group-icon:nth-child(even) {
+  margin-top: 1rem;
+  transform: translate(-60px);
+}
+.author-content-item.skills .skills-list {
+  display: flex;
+  opacity: 0;
+  transition: 0.3s;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin-top: 10px;
+}
+.author-content-item.skills .skill-info {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  background: var(--anzhiyu-background);
+  border-radius: 40px;
+  padding: 4px 12px 4px 8px;
+  border: var(--style-border);
+  box-shadow: var(--anzhiyu-shadow-border);
+}
+.author-content-item.skills .skill-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+}
+.author-content-item.skills .skill-icon img {
+  width: 18px;
+  height: 18px;
+  margin: 0 auto !important;
+}
+.author-content-item.skills .etc {
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+@keyframes rowup {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+.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;
+}
+
+.site-card-group .site-card .info {
+  margin-top: 0;
+}
+.site-card-group > a {
+  width: calc(100% / 4 - 0.5rem);
+  height: 150px;
+  position: relative;
+  display: block;
+  margin: 0.5rem 0.25rem;
+  float: left;
+  overflow: hidden;
+  padding: 0;
+  border-radius: 8px;
+  -webkit-transition: all 0.3s ease 0s, -webkit-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
+  -moz-transition: all 0.3s ease 0s, -moz-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
+  -o-transition: all 0.3s ease 0s, -o-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
+  -ms-transition: all 0.3s ease 0s, -ms-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
+  transition: all 0.3s ease 0s, transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: var(--style-border) !important;
+}
+
+.site-card-group > a .wrapper {
+  position: relative;
+}
+
+.site-card-group > a .cover {
+  width: 100%;
+  -webkit-transition: -webkit-transform 0.5s ease-out;
+  -moz-transition: -moz-transform 0.5s ease-out;
+  -o-transition: -o-transform 0.5s ease-out;
+  -ms-transition: -ms-transform 0.5s ease-out;
+  transition: transform 0.5s ease-out;
+}
+
+.site-card-group > a .info,
+.site-card-group > a .wrapper .cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.site-card-group > a .info {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: box;
+  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: center;
+  -moz-box-pack: center;
+  -o-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -o-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 0.7);
+  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
+  -moz-transition: -moz-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
+  -o-transition: -o-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
+  -ms-transition: -ms-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
+  transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
+}
+
+.site-card-group > a .info img {
+  position: relative;
+  top: 45px;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
+  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
+  z-index: 1;
+  text-align: center;
+  pointer-events: none;
+}
+
+.site-card-group > a .info span {
+  padding: 20px 10% 60px 10%;
+  font-size: 16px;
+  width: 100%;
+  text-align: center;
+  -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
+  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
+  background-color: rgba(255, 255, 255, 0.7);
+  color: var(--font-color);
+  white-space: nowrap;
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+
+.site-card-group .site-card:hover {
+  border-color: var(--anzhiyu-main) !important;
+  background-color: var(--anzhiyu-main) !important;
+  -webkit-box-shadow: var(--anzhiyu-shadow-theme) !important;
+  box-shadow: var(--anzhiyu-shadow-theme) !important;
+}
+.site-card-group > a:hover .wrapper img {
+  -webkit-transform: scale(1.2);
+  -moz-transform: scale(1.2);
+  -o-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+}
+
+.site-card-group > a .cover {
+  width: 100%;
+  -webkit-transition: -webkit-transform 0.5s ease-out;
+  -moz-transition: -moz-transform 0.5s ease-out;
+  -o-transition: -o-transform 0.5s ease-out;
+  -ms-transition: -ms-transform 0.5s ease-out;
+  transition: transform 0.5s ease-out;
+}
+.site-card-group > a .wrapper img {
+  height: 150px;
+  pointer-events: none;
+}
+.site-card-group .site-card .wrapper img {
+  -webkit-transition: -webkit-transform 0.5s ease-out !important;
+  -moz-transition: -moz-transform 0.5s ease-out !important;
+  -o-transition: -o-transform 0.5s ease-out !important;
+  -ms-transition: -ms-transform 0.5s ease-out !important;
+  transition: transform 0.5s ease-out !important;
+}
+.site-card-group > a .wrapper .fadeIn {
+  -webkit-animation: coverIn 0.8s ease-out forwards;
+  -moz-animation: coverIn 0.8s ease-out forwards;
+  -o-animation: coverIn 0.8s ease-out forwards;
+  -ms-animation: coverIn 0.8s ease-out forwards;
+  animation: coverIn 0.8s ease-out forwards;
+}
+
+.site-card-group > a:hover .info {
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
\ No newline at end of file
diff --git a/source/css/_custom/aside.css b/source/css/_custom/aside.css
new file mode 100644
index 0000000..f3ef1b2
--- /dev/null
+++ b/source/css/_custom/aside.css
@@ -0,0 +1,361 @@
+#aside-content .card-widget {
+    background: transparent !important;
+    box-shadow: unset !important;
+}
+
+/* 作者打招呼 */
+div#author-info__sayhi {
+  text-align: left;
+  color: var(--heo-white);
+  background: var(--heo-white-op);
+  font-size: 12px;
+  margin-right: auto;
+  padding: 2px 8px;
+  border-radius: 12px;
+  width: fit-content;
+}
+
+#aside-content .card-info .author-info__name {
+  text-align: left;
+  font-weight: bold;
+  color: var(--heo-white);
+  font-size: 28px;
+  line-height: 1.1;
+  margin-top: 0.8rem;
+  margin-bottom: 1rem;
+}
+
+/* 作者卡片背景 */
+#aside-content>.card-widget:first-child {
+  transition: 0.3s;
+  border: none;
+  box-shadow: none;
+  background: #425AEF !important;
+  margin-top: 0px;
+}
+
+
+#aside-content>.card-widget.card-info {
+  background: var(--heo-card-bg);
+  box-shadow: var(--heo-shadow-black);
+  position: relative;
+}
+
+#aside-content>.card-widget.card-info::before {
+  background: linear-gradient(-25deg, var(--heo-main), var(--heo-main-op-deep), var(--heo-main), var(--heo-main-op-deep));
+  background-size: 400%;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  content: '';
+  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;
+  }
+}
+
+/* 作者卡片描述 */
+#aside-content>div.card-widget.card-info>div>div.card-info-avatar.is-center>div.author-info__description {
+  line-height: 1.38;
+  margin: .3rem 0;
+  text-align: justify;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+#aside-content>div.card-widget.card-info>div>div.card-info-avatar.is-center>div.author-info__description b {
+  color: var(--heo-white);
+}
+
+/* 作者卡片描述2 */
+.author-info__description2 {
+  line-height: 1.38;
+  margin: .3rem 0;
+  text-align: justify;
+  width: 100%;
+  z-index: 2;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.author-info__description2 b {
+  color: var(--heo-white);
+}
+
+.card-widget.card-info .banner-button-group {
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  display: flex;
+}
+
+.card-widget.card-info .banner-button-group .banner-button {
+  padding: 8px 12px;
+  background: var(--heo-white-op);
+  border-radius: 12px;
+  color: var(--heo-white);
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.card-widget.card-info .banner-button-group .banner-button:hover {
+  background: var(--heo-white);
+  color: var(--heo-black);
+}
+
+.card-widget.card-info .banner-button-group .banner-button i {
+  margin-right: 8px;
+  font-size: 1rem;
+}
+
+
+/* 头像背景 */
+/* 隐藏文章数等信息 */
+#aside-content .card-info .card-info-data {
+  display: none;
+}
+
+/* 作者头像 */
+#aside-content .card-info a img {
+  border-radius: 0px;
+  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(0.48, -0.21, 0, 1.5) 0.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: 330px;
+  position: relative;
+}
+
+#aside-content>div.card-widget.card-info>div.card-info-avatarimg {
+  overflow: hidden;
+  background: var(--heo-yellow);
+  transition: 1.5s;
+  min-height: 160px;
+  position: relative;
+  box-shadow: var(--heo-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()>a>div.headline {
+  font-weight: bold;
+}
+
+/* 作者名称和头像间距 */
+/* #aside-content .card-info .author-info__name{
+  padding-top: 30px;
+} */
+
+/* pad端隐藏部分侧边栏 */
+@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;
+}
+
+#aside-content .card-info .card-info-social-icons {
+  margin: 0;
+  padding-top: 10px;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  flex-wrap: wrap;
+  cursor: pointer;
+  position: absolute;
+  bottom: 1rem;
+  left: 1rem;
+}
+
+#aside-content .card-info .card-info-social-icons .social-icon {
+  margin: 0;
+  margin-right: 8px;
+}
+
+#aside-content .card-info .card-info-social-icons i {
+  background: var(--heo-white-op);
+  color: var(--heo-white);
+  font-size: 1.2rem;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+#aside-content .card-info .card-info-social-icons i:hover {
+  background: var(--heo-secondbg);
+  transform: scale(0.97);
+  color: var(--heo-main);
+  box-shadow: none;
+}
+
+#aside-content .card-info .banner-button {
+  height: 40px;
+  width: 124px;
+  border-radius: 20px;
+  justify-content: center;
+}
+
+@media screen and (min-width: 1300px) {
+  #aside-content .card-info .card-info-social-icons i {
+    color: var(--heo-white);
+  }
+
+  [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
+    color: var(--heo-white);
+  }
+}
+
+#aside-content .card-info .card-info-data>.card-info-data-item:hover {
+  background: var(--heo-post-blockquote-bg);
+  transform: scale(0.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(--heo-blue);
+}
+
+/* 公告 */
+.announcement_content p {
+  margin: 0.5rem 0 0 0;
+  line-height: 1.38;
+}
+
+/* 卡片标题 */
+#aside-content .item-headline {
+  padding-bottom: 0;
+  margin-left: 8px;
+  font-size: 1em;
+  font-weight: bold;
+}
+
+#aside-content .item-headline i {
+  min-width: 19.5px;
+}
+
+#aside-content .item-headline+div,
+#aside-content .item-headline+ul {
+  padding: 0;
+}
+
+@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(--heo-card-btn-bg);
+  border-radius: 8px;
+  transition: 0.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(--heo-white);
+  background: var(--heo-blue);
+  border-radius: 8px;
+  transition: 0.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: 0.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: 0.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: none;
+}
+
+#web_bg {
+  background-repeat: repeat;
+  background-size: auto;
+  width: 200%;
+  height: 200%;
+  top: -50%;
+  left: -50%;
+  transform: rotate(-15deg);
+  opacity: 1;
+  background-color: var(--heo-background);
+}
+
+#web_bg:before {
+  background-color: var(--heo-background) !important;
+  opacity: 1;
+}
+
+[data-theme='dark'] #web_bg:before,
+[data-theme='dark'] #footer:before,
+[data-theme='dark'] #page-header:before {
+  background-color: var(--heo-none) !important;
+}
+
+[data-theme=dark]#web_bg {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/source/css/_custom/bar.css b/source/css/_custom/bar.css
new file mode 100644
index 0000000..763242f
--- /dev/null
+++ b/source/css/_custom/bar.css
@@ -0,0 +1,139 @@
+/* 首页分类条展示 */
+#tag-bar{
+  padding: 0.4rem 1rem 0.4rem 0.5rem;
+  background: var(--heo-card-bg);
+  border-radius: 12px;
+  display: flex;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  border: var(--style-border);
+}
+
+@media screen and (max-width: 768px){
+  #tag-bar{
+    border-radius: 0;
+  }
+}
+
+#tag #tag-bar{
+  padding: 0;
+  border: none;
+}
+
+#tag a.tag-bar-item.select a{
+  display: none;
+}
+
+.tag-in-bar{
+  display: flex;
+  white-space: nowrap;
+}
+
+.tag-in-bar-tips{
+  margin-right: 1rem;
+}
+
+.tag-bar-items{
+  white-space: nowrap;
+  overflow-x: scroll;
+  display: flex;
+}
+
+.tag-bar-items::-webkit-scrollbar{
+  display: none;
+}
+
+.tag-bar-item a{
+  padding: 0.1rem 0.5rem;
+  margin: 0 0.25rem;
+  font-weight: bold;
+  border-radius: 12px;
+}
+
+.tag-bar-item:hover a{
+  background: var(--heo-main);
+  color: var(--heo-white);
+}
+
+.tag-bar-item.select a {
+  background: var(--heo-main);
+  color: var(--heo-white);
+  border-radius: 12px;
+}
+
+.tag-bar-more{
+  margin-left: 1rem;
+  font-weight: bold;
+}
+
+/* 首页分类条展示 */
+#category-bar{
+  padding: 0.4rem 1rem 0.4rem 0.5rem;
+  background: var(--heo-card-bg);
+  border-radius: 12px;
+  display: flex;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  border: var(--style-border);
+}
+
+@media screen and (max-width: 768px){
+  #category-bar{
+    border-radius: 0;
+  }
+}
+
+#category #category-bar{
+  padding: 0;
+  border: none;
+}
+
+#category a.category-bar-item.select a{
+  display: none;
+}
+
+.category-in-bar{
+  display: flex;
+  white-space: nowrap;
+}
+
+.category-in-bar-tips{
+  margin-right: 1rem;
+}
+
+.category-bar-items{
+  white-space: nowrap;
+  overflow-x: scroll;
+  display: flex;
+}
+
+
+
+.category-bar-items::-webkit-scrollbar{
+  display: none;
+}
+
+.category-bar-item a{
+  padding: 0.1rem 0.5rem;
+  margin: 0 0.25rem;
+  font-weight: bold;
+  border-radius: 12px;
+}
+
+.category-bar-item:hover a{
+  background: var(--heo-main);
+  color: var(--heo-white);
+}
+
+.category-bar-item.select a {
+  background: var(--heo-main);
+  color: var(--heo-white);
+  border-radius: 12px;
+}
+
+.category-bar-more{
+  margin-left: 1rem;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/source/css/_custom/custom.css b/source/css/_custom/custom.css
new file mode 100644
index 0000000..787b628
--- /dev/null
+++ b/source/css/_custom/custom.css
@@ -0,0 +1,167 @@
+#page-header.post-bg:before {
+    background-color: rgba(0,0,0,0.0);
+    backdrop-filter: saturate(180%) blur(15px);
+}
+
+#page {
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+.category-lists ul li {
+    display: inline-flex;
+    background: #ff7a7a;
+    border-radius: 10px;
+    margin-right: 10px;
+    padding: 10px !important;
+    color: #fff !important;
+}
+
+.category-list-item::before{
+    display: none;
+}
+
+.category-lists .category-list a {
+    color: #fff !important;
+    font-weight: 700;
+}
+
+#post-info .post-title {
+    text-shadow: 2px 1px black;
+    font-weight: 700;
+}
+
+[data-theme="dark"]
+  #post .post-copyright {
+    background-color: rgb(7 8 10);
+    text-shadow: #bfbeb8 1px 0 4px;
+  }
+[data-theme="dark"]
+  #post .post-copyright {
+    border: 1px solid rgb(19 18 18 / 35%);
+  }
+[data-theme="dark"]
+  .post-copyright-info {
+    color: #e0e0e4;
+  }
+#post .post-copyright__title{
+    font-size:22px;
+}
+#post .post-copyright__notice{
+    font-size:15px;
+}
+
+#footer {
+    z-index: 999;
+}
+
+#search-mask {
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+#page-header.nav-fixed #nav #site-name:hover, #page-header.nav-fixed #nav #toggle-menu:hover, #page-header.nav-fixed #nav a:hover {
+    color: #ffffff;
+}
+
+#article-container code {
+    color: #fff;
+    border-radius: 5px;
+    margin: 3px;
+    background: #ff7a7a;
+}
+
+#article-container a:hover {
+    background: #ff7a7a;
+    margin: 3px;
+    border-radius: 5px;
+    color: #fff;
+    padding: 2px 4px;
+}
+#article-container a {
+    color: var(--font-color);
+    padding: 2px 4px;
+    font-weight: bolder;
+    margin: 3px;
+    border-bottom: 2px solid #ff7a7a;
+}
+
+li.card-category-list-item, li.card-archive-list-item {
+    width: 48%;
+    background: #ff7a7abf;
+    border-radius: 9px;
+    margin-bottom: 2%;
+    margin-right: 2%;
+    display: inline-block;
+}
+
+hrl.line {
+    height: 0;
+    box-sizing: content-box;
+    border: 2px dashed #ff7a7a;
+    position: relative;
+    width: 100%;
+}
+.recent-post-item {
+    border: 1.5px solid #e3e8f7;
+}
+[data-theme="dark"]
+.recent-post-item {
+    border: 1px solid #3d3d3f
+}
+
+btn.hideasidebutton {
+    position: fixed;
+    top: 10vh;
+    background: #ff7a7a;
+    padding: 10px;
+    border-radius: 10px;
+}
+btn.hideasidebutton i {
+    line-height: 2;
+    color: #fff;
+    font-size: 20px;
+}
+
+/* 滚动条 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background-color: rgba(73, 177, 245, 0.2);
+    border-radius: 2em;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background-color: #ff7a7a;
+    background-image: -webkit-linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.4) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.4) 50%,
+      rgba(255, 255, 255, 0.4) 75%,
+      transparent 75%,
+      transparent
+    );
+    border-radius: 2em;
+  }
+  
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+  
+  ::-moz-selection {
+    color: #fff;
+    background-color: #ff7a7a;
+  }
+
+main#content-inner {
+    padding-top: 0;
+}
+
+.post main#content-inner {
+  padding-top: 50px;
+}
\ No newline at end of file
diff --git a/source/css/_custom/custom.styl b/source/css/_custom/custom.styl
new file mode 100644
index 0000000..1790403
--- /dev/null
+++ b/source/css/_custom/custom.styl
@@ -0,0 +1,62 @@
+nav#pagination
+    margin: auto
+
+.totopbutton
+    position: fixed
+    bottom: 15px
+    overflow: hidden
+    right: 15px
+    background: #94ddee
+    border-radius: 100vh
+    border: 2.5px solid #00d0ff
+    height: 80px
+    width: 80px
+    z-index: 10000
+    user-select: none
+
+.totopbutton span#percent
+    font-size: 30px
+    justify-content: center
+    align-items: center
+    display: flex
+    font-weight: 700
+    color: #fff
+    text-shadow: 2px 1px #000
+    margin: auto
+    z-index inherit
+    top: 6px
+    position: relative
+
+.totopbutton i
+    font-size: 30px
+    justify-content: center
+    align-items: center
+    display: none
+    color: #fff
+    text-shadow: 2px 1px #000
+    font-weight: 700
+    margin: auto
+    z-index inherit
+    top: 20px
+    position: relative
+
+.totopbutton:hover i
+    display: flex
+
+.totopbutton:hover span#percent
+    display: none
+
+.totopbutton .main-hero-waves-area
+    width: 100%
+    height 50%
+    position: absolute
+    bottom: 0
+    left: 0
+    .parallax>use:nth-child(1)
+      fill: #1a55ffbd
+    .parallax>use:nth-child(2)
+      fill: #1a55ff82
+    .parallax>use:nth-child(3)
+      fill: #1a55ff36
+    .parallax>use:nth-child(4)
+      fill: #1a55ff
\ No newline at end of file
diff --git a/source/css/_custom/footer.css b/source/css/_custom/footer.css
new file mode 100644
index 0000000..ddf493a
--- /dev/null
+++ b/source/css/_custom/footer.css
@@ -0,0 +1,306 @@
+#footer-wrap {
+    color: var(--Jay-fontcolor)
+}
+
+#footer-wrap a {
+    color: var(--Jay-fontcolor);
+    height: 44px;
+    line-height: 36px
+}
+
+#footer-wrap a:hover {
+    color: var(--Jay-hovertext);
+    background-color: var(--Jay-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
+    }
+}
+
+
+a.deal_link {
+    display: flex;
+    margin: 1rem 27px;
+    color: var(--Jay-card-bg);
+    border-radius: 3rem;
+    width: 32px;
+    height: 32px;
+    background: transparent;
+    justify-content: center;
+    align-items: center;
+    transition: .3s
+}
+
+a.deal_link:hover {
+    color: var(--Jay-white);
+    background: var(--Jay-main)
+}
+
+img.footer_mini_logo {
+    width: 50px;
+    height: 50px;
+    margin: 0 1rem;
+    cursor: pointer;
+    /*filter: drop-shadow(0 12px 12px #ee7d7936);*/
+    transition: cubic-bezier(0, 0, 0, 1.29) .5s
+}
+
+img.footer_mini_logo:hover {
+    -webkit-backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d
+}
+
+@media screen and (min-width: 1300px) {
+    img.footer_mini_logo:hover {
+        transform: scale(1.03)
+    }
+
+    img.footer_mini_logo:active {
+        transform: scale(.97)
+    }
+}
+
+#weblogo {
+    align-self: center
+}
+
+#footer-wrap a#Jayblog_footerlogo:hover {
+    background: var(--Jay-none)
+}
+
+.Jayblog_footerlogo_img {
+    filter: drop-shadow(0 12px 12px #ee7d7936)
+}
+
+.Jayblog_footerlogo_img:hover {
+    transform: scale(1.03)
+}
+
+#footer {
+    background: linear-gradient(180deg, var(--Jay-background) 0, var(--Jay-card-bg) 25%);
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    z-index: 1002
+}
+
+@media screen and (max-width: 768px) {
+    #footer {
+        background: linear-gradient(180deg, var(--Jay-background) 0, var(--Jay-card-bg) 25%);
+        margin-top: 0;
+        z-index: 999
+    }
+}
+
+[data-theme=dark] #footer:before, [data-theme=dark] #page-header:before, [data-theme=dark] #web_bg:before {
+    background-color: var(--Jay-none) !important
+}
+
+@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-banner-right {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap
+}
+
+#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;
+    /*margin-right: 60px;*/
+    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
+}
+
+#Jay-footer .footer-links {
+    display: flex;
+    flex-direction: column
+}
+
+#Jay-footer {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    max-width: 1200px;
+    margin: 1rem auto;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 3rem;
+    padding: 0 1rem
+}
+
+#Jay-footer .footer-item {
+    font-size: 1rem;
+    line-height: .8rem;
+    margin: .38rem 0;
+    color: var(--Jay-fontcolor);
+    /*margin-right: auto*/
+}
+
+#Jay-footer .footer-item:hover {
+    color: var(--Jay-theme)
+}
+
+#Jay-footer .footer-group {
+    min-width: 120px
+}
+
+#Jay-footer .footer-title {
+    color: var(--Jay-secondtext);
+    font-size: 1rem
+}
+
+#footer-banner {
+    padding: 1rem;
+    color: var(--Jay-fontcolor);
+    margin-top: 1rem;
+    background: var(--Jay-secondbg);
+    display: flex;
+    overflow: hidden;
+    z-index: 1002;
+    transition: .3s;
+    /*border-top: var(--style-border)*/
+}
+
+[data-theme=dark] #footer-banner {
+    background: var(--Jay-secondbg)
+}
+
+#footer-banner .footer-banner-links {
+    display: flex;
+    justify-content: space-between;
+    max-width: 1400px;
+    width: 100%;
+    margin: 0 auto;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+#footer-banner .footer-banner-left {
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 32px
+}
+
+#footer-banner .footer-banner-link {
+    margin-right: 1rem;
+    color: var(--Jay-fontcolor);
+    font-size: 1rem;
+    font-weight: 700;
+    white-space: nowrap
+}
+
+#footer-banner .footer-banner-link.cc {
+    margin-right: 0
+}
+
+#footer-banner .footer-banner-link.cc i {
+    margin-right: .5rem
+}
+
+#footer-banner .footer-banner-link:hover {
+    color: var(--Jay-theme)
+}
+
+#footer-banner > div > div.footer-banner-left > span {
+    margin-right: 1rem
+}
+
+#footer-banner .footer-banner-right a:hover {
+    color: var(--Jay-lighttext)
+}
+
+#footer_deal i {
+    font-size: 1.6rem;
+    transition: .3s;
+    line-height: 1.3rem;
+    height: 1.3rem
+}
\ No newline at end of file
diff --git a/source/css/_custom/hometop.styl b/source/css/_custom/hometop.styl
new file mode 100644
index 0000000..36ba5af
--- /dev/null
+++ b/source/css/_custom/hometop.styl
@@ -0,0 +1,230 @@
+.hometopin
+    max-width: 1200px
+    width: -webkit-fill-available
+    padding: 10px
+    margin: auto
+
+.fpostsline
+    height: 1.5px
+    border-radius: 20px
+    color: white
+    width: 90%
+
+.webinfo-item .item-name i
+    line-height: 2
+    margin-right: 5px
+
+.fposts .ftags
+    width: 100%
+    +maxwidth768
+        width: 100%
+
+#category-bar
+    border-radius: 15px
+    display: inline-flex !important
+    width: 49%
+    margin: 1%
+    margin-left: 0
+
+.recent-top-post-group
+    border-radius: 12px;
+    overflow: hidden;
+    overflow-x: auto;
+    width: 100%;
+    margin-bottom: 0rem;
+
+.recent-post-top
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+    overflow-x: scroll;
+
+.topGroup
+    display: flex;
+
+.recent-post-top .recent-post-item
+    display: flex;
+    width: 200px;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 0.5rem;
+    background: var(--heo-white);
+    border-radius: 12px;
+    overflow: hidden;
+    min-width: 200px;
+    height: 164px;
+    max-height: 164px;
+    border: #e3e8f7;
+    transition: 0.3s;
+    position: relative;
+
+#recent-post-top .recent-post-item .post_cover
+    width: 100%;
+
+.recent-post-top .recent-post-item .recent-post-info
+    padding: 0.3rem 0.5rem 0.3rem 0.5rem !important;
+    transition: 0.3s;
+
+.recent-post-top .recent-post-item .post_cover a
+    height: 100px;
+    overflow: hidden;
+    display: flex;
+
+.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;
+    padding-top: .5rem;
+    font-weight: bold;
+    font-size: 0.8rem !important;
+    padding: 0 !important;
+
+.hometop img
+    width: 100%;
+    object-fit: cover;
+
+
+.recent-top-post-group 
+    width: 59%
+    margin-right: 1%
+    display: inline-block
+
+.hometop-creativity img
+    width: 164px !important
+    height: 100%
+    display: inline-block
+    width: 40%
+    object-fit: contain
+    padding: 20px
+    margin-right: 15px
+    border-radius: 20px
+
+.hometop-creativity
+    display: inline-flex
+    border-radius: 10px
+    overflow: hidden
+    overflow-x: scroll
+    width: 38%
+    height: 100%
+    margin-right: 2%
+    &::-webkit-scrollbar
+        display: none
+
+.hometop .group1
+    height: 164px
+    display: flex
+
+.hometop .group2
+    height: 200px
+    display: flex
+
+.hometop .descr
+    height: 100%
+    width: 69%
+    display: inline-block
+    margin-top: 13px
+    padding: 15px
+    background: #fff
+    border-radius: 15px
+
+.hometop .descr span
+    font-size: 25px
+    font-weight: 700
+    position relative
+    top -20px
+
+.hometop .descr .subtitle
+    font-size: 7px
+    top -7px
+    position relative
+
+.hometop .descr img
+    height: 70%
+    border-radius: 15px
+
+.hometop .siteinfo
+    width: 30%
+    margin-right: 1%
+    display: inline-block
+    padding: 15px
+    border-radius: 15px
+    height 100%
+    overflow-y: scroll
+    margin-top: 13px
+    background: #fff
+
+[data-theme="dark"] 
+    .hometop .siteinfo
+        background: #000
+    .hometop .descr
+        background: #000
+    .recent-post-top .recent-post-item
+        background: #000
+
+.hometop-creativity .inbar
+    animation: rowup 10s linear infinite
+    display: flex
+
+.hometop
+  content: ''
+  position: relative
+  top: -90px
+  padding-top 70px
+  background-color: var(--heo-theme)
+  width: 100%
+  height: 100%
+  background-attachment: opacity(0.1)
+  background-image: linear-gradient(
+      0deg,
+      #ffffff7a 0px,
+      #ffffff7a 1px,
+      transparent 1px,
+      transparent 100px
+    ),
+    linear-gradient(
+      90deg,
+      #ffffff7a 0px,
+      #ffffff7a 1px,
+      transparent 1px,
+      transparent 100px
+    )
+  background-size: 20px 20px
+
+.blog-title
+    width: 100%
+
+.blog-title span.title
+    font-size: 35px
+    width: 100%
+    display: block
+    font-weight: 800
+    margin-bottom: 6px
+    padding: 0 17px
+    border-bottom: 1px solid #000
+    color: #000
+
+.webinfo-item
+    display: flex
+
+.webinfo-item .item-name
+    flex: 1
+    display: inline-flex
+
+.webinfo-item .item-count
+    position: relative
+    display: inline-block
+    right: 0
+
+div#recent-post-top::-webkit-scrollbar
+    display: none
+
+.skills-style-group.hometop-creativity
+    width: 40%
+    display: inline-block
+
diff --git a/source/css/_custom/nav.css b/source/css/_custom/nav.css
new file mode 100644
index 0000000..96fd7f8
--- /dev/null
+++ b/source/css/_custom/nav.css
@@ -0,0 +1,468 @@
+#nav a:hover {
+  background: var(--anzhiyu-main);
+  transition: 0.3s;
+}
+
+#nav-totop:hover .totopbtn i {
+  opacity: 1;
+}
+#nav-totop #percent {
+  font-size: 12px;
+  background: var(--anzhiyu-white);
+  color: var(--anzhiyu-main);
+  width: 25px;
+  height: 25px;
+  border-radius: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.3s;
+}
+.nav-fixed #nav-totop #percent,
+.page #nav-totop #percent {
+  background: var(--font-color);
+  color: var(--card-bg);
+  font-size: 13px;
+}
+
+#nav-totop {
+  width: 35px;
+}
+#page-header:not(.is-top-bar) #percent {
+  transition: 0.3s;
+}
+#page-header:not(.is-top-bar) #nav-totop {
+  width: 0;
+  opacity: 0;
+  transition: width 0.3s, opacity 0.2s;
+  margin-left: 0 !important;
+}
+#nav-totop #percent {
+  font-weight: 700;
+}
+#nav-totop:hover #percent {
+  opacity: 0;
+  transform: scale(1.5);
+  font-weight: 700;
+}
+#page-header #nav #nav-right div {
+  margin-left: 0.5rem;
+  padding: 0;
+}
+
+#nav-totop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.3s;
+}
+.nav-button {
+  cursor: pointer;
+}
+div#menus {
+  display: flex;
+  align-items: center;
+}
+#page-header #nav .nav-button a {
+  height: 35px;
+  width: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#nav .site-page {
+  padding-bottom: 0px;
+}
+#nav *::after {
+  background-color: transparent !important;
+}
+
+/* 顶栏修改 */
+#nav .menus_items .menus_item .menus_item_child li a {
+  padding: 2px 16px;
+}
+#nav .menus_items .menus_item .menus_item_child li:hover a {
+  color: white !important;
+}
+
+#nav .menus_items .menus_item .menus_item_child li {
+  margin: 6px;
+  border-radius: 5px;
+  transition: all 0.3s;
+  display: inline-block;
+  margin: 0 3px;
+}
+#nav .menus_items .menus_item .menus_item_child:before {
+  top: -19px;
+}
+#site-name,
+.shuoshuo {
+  white-space: nowrap;
+  overflow: hidden;
+}
+#site-name {
+  padding: 0 8px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.3s;
+}
+
+#blog_name #site-name i {
+  opacity: 0;
+  position: absolute;
+}
+
+#blog_name #site-name:hover .title {
+  opacity: 0;
+}
+
+#blog_name #site-name:hover i {
+  opacity: 1;
+  transform: scale(1.01);
+  color: white;
+}
+/* 圆角隐藏 */
+ul.menus_item_child {
+  border-radius: 5px;
+}
+
+/* 一级菜单居中 */
+#nav .menus_items {
+  position: absolute;
+  width: fit-content;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+}
+
+#nav .menus_items .menus_item:hover .menus_item_child {
+  display: block;
+  transform: translateX(-50%);
+  right: auto;
+  left: auto !important;
+  padding: 6px 4px;
+  box-sizing: content-box;
+  line-height: 35px;
+}
+#nav .menus_items .menus_item:hover {
+  padding: 0 5px 27px 5px !important;
+  margin-bottom: -14.5px !important;
+}
+
+#nav .menus_items .menus_item .menus_item_child {
+  top: 44px;
+}
+
+@media screen and (min-width: 768px) {
+  .page .menus_item:hover > a.site-page {
+    color: var(--anzhiyu-white) !important;
+    background: var(--anzhiyu-main);
+    transition: 0.3s;
+    box-shadow: var(--anzhiyu-shadow-main);
+  }
+}
+
+.nav-fixed #nav {
+  transform: translateY(58px) !important;
+}
+#nav {
+  padding: 0 calc((100% - 1420px) / 2);
+  backdrop-filter: saturate(180%) blur(20px);
+}
+
+#nav a {
+  border-radius: 8px;
+  color: var(--font-color);
+}
+.page #nav a:hover {
+  color: var(--anzhiyu-white) !important;
+  background: var(--anzhiyu-main);
+  transition: 0.3s;
+  box-shadow: var(--anzhiyu-shadow-main);
+}
+
+#menus > div.menus_items > div > a {
+  letter-spacing: 0.3rem;
+  font-weight: 700;
+  padding: 0em 0.3em 0em 0.5em;
+  height: 35px;
+  line-height: 35px;
+}
+#nav .menus_items .menus_item {
+  padding: 0 5px;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  align-items: center;
+}
+
+#nav div#toggle-menu {
+  padding: 2px 0 4px 6px;
+}
+
+#nav-totop .totopbtn i {
+  position: absolute;
+  display: flex;
+  opacity: 0;
+}
+#page-name::before {
+  font-size: 18px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  color: white !important;
+  top: 0;
+  left: 0;
+  content: "回到顶部";
+  background-color: var(--anzhiyu-theme);
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -ms-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  opacity: 0;
+  box-shadow: 0 0 3px var(--anzhiyu-theme);
+  line-height: 45px; /*如果垂直位置不居中可以微调此值，也可以删了*/
+}
+#page-name:hover:before {
+  opacity: 1;
+}
+#name-container {
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -ms-transition: all 0.3s;
+  -o-transition: all 0.3s;
+}
+#name-container:hover {
+  transform: translateX(-50%) scale(1.03);
+}
+#page-name {
+  position: relative;
+  padding: 10px 30px;
+  -webkit-animation-timing-function: ease-out;
+}
+
+center#name-container {
+  position: absolute;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: "ZhuZiAYuanJWD";
+}
+.nav-fixed.nav-visible #name-container {
+  transition: 0.3s;
+  transform: translate(-50%, 60px);
+}
+.nav-fixed.nav-visible #menus .menus_items {
+  transform: translate(-50%);
+  transition: 0.3s;
+  line-height: 60px;
+}
+.nav-fixed #menus .menus_items {
+  transform: translate(-50%, -60px);
+  transition: 0.3s;
+}
+.nav-fixed #name-container {
+  top: 15%;
+  transition: 0.3s;
+}
+#name-container {
+  bottom: 60px;
+}
+
+.mask-name-container {
+  max-width: 1200px;
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@media screen and (max-width: 992px) {
+  .mask-name-container {
+    width: 65%;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .mask-name-container {
+    display: none;
+  }
+}
+#sidebar #sidebar-menus .menus_items .site-page:hover {
+  color: var(--anzhiyu-white);
+  border-radius: var(--anzhiyu-border-radius);
+}
+#nav .menus_items .menus_item > a > i:last-child {
+  display: none;
+}
+#nav #search-button {
+  font-size: 1.3em;
+}
+
+@media screen and (min-width: 900px) {
+  #nav .back-home-button:hover {
+    box-shadow: var(--anzhiyu-shadow-main);
+  }
+}
+
+.back-home-button:hover {
+  background: var(--anzhiyu-main);
+  color: var(--anzhiyu-white) !important;
+}
+.back-home-button {
+  display: flex;
+  width: 35px;
+  height: 35px;
+  padding: 0 !important;
+  align-items: center;
+  justify-content: center;
+  margin-right: 4px;
+  transition: 0.3s;
+  border-radius: 8px;
+}
+
+.back-home-button:hover .back-menu-list-groups {
+  display: flex;
+  opacity: 1;
+  transition: 0.3s;
+  top: 55px;
+  pointer-events: auto;
+  left: 0;
+}
+.back-home-button .back-menu-list-groups {
+  position: absolute;
+  top: 65px;
+  left: 0;
+  background: var(--anzhiyu-card-bg);
+  border-radius: 12px;
+  border: var(--style-border);
+  flex-direction: column;
+  font-size: 12px;
+  color: var(--anzhiyu-secondtext);
+  box-shadow: var(--anzhiyu-shadow-border);
+  transition: 0s;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.back-home-button .back-menu-list-group {
+  display: flex;
+  flex-direction: column;
+}
+.back-home-button .back-menu-list-group .back-menu-list-title {
+  margin: 8px 0 0 16px;
+  transition: 0.3s;
+}
+.back-home-button .back-menu-list {
+  display: flex;
+  flex-direction: column;
+}
+.back-home-button .back-menu-list::before {
+  position: absolute;
+  top: -22px;
+  left: 0px;
+  width: 100%;
+  height: 25px;
+  content: "";
+}
+
+.back-home-button .back-menu-list-group:hover .back-menu-list-title {
+  color: var(--anzhiyu-main);
+}
+.back-home-button .back-menu-list-groups:hover {
+  border: var(--style-border-hover);
+}
+.back-home-button .back-menu-list .back-menu-item {
+  display: flex;
+  align-items: center;
+  margin: 4px 8px;
+  padding: 4px 8px !important;
+  transition: 0.3s;
+  border-radius: 8px;
+}
+.back-home-button .back-menu-list .back-menu-item .back-menu-item-text {
+  font-size: var(--global-font-size);
+  margin-left: 0.5rem;
+  color: var(--anzhiyu-fontcolor);
+  white-space: nowrap;
+}
+#nav #blog_name {
+  flex-wrap: nowrap;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  /* z-index: 102; */
+  transition: 0.3s;
+}
+.back-home-button .back-menu-list .back-menu-item .back-menu-item-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 24px;
+  background: var(--anzhiyu-secondbg);
+}
+#page-header #nav .back-home-button {
+  cursor: pointer;
+  position: relative;
+}
+
+@media screen and (min-width: 1300px) {
+  #nav a:hover {
+    transform: scale(1.03);
+  }
+}
+.back-home-button .back-menu-list .back-menu-item:hover .back-menu-item-text {
+  color: var(--anzhiyu-white);
+}
+.back-menu-item-icon.loading img {
+  width: 25px;
+}
+
+#page-header #nav #menus .nav-button.long a.totopbtn,
+#page-header #nav #menus .nav-button.long,
+#page-header #nav #menus .nav-button.long a.totopbtn span {
+  width: 70px;
+}
+#page-header #nav #menus .nav-button.long a.totopbtn span {
+  border-radius: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.3s;
+  white-space: nowrap;
+}
+
+#page-header #nav #menus .nav-button.long a.totopbtn:hover {
+  border-radius: 35px;
+  height: 30px;
+}
+
+#nav #search-button {
+  padding-left: 0;
+}
+#page-header #nav .nav-button {
+  margin-left: 0.5rem;
+  padding: 0;
+}
+#page-header:not(.is-top-bar) #nav-totop a {
+  display: none;
+}
+#search-button a.site-page.social-icon.search span {
+  display: none;
+}
+#page-header.nav-visible #nav {
+    padding: 15px;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
\ No newline at end of file
diff --git a/source/css/_custom/post-double-row.css b/source/css/_custom/post-double-row.css
new file mode 100644
index 0000000..4c4b959
--- /dev/null
+++ b/source/css/_custom/post-double-row.css
@@ -0,0 +1,67 @@
+#recent-posts{
+    margin-top:-1rem;  /*头部为空时抵消间隔，若有磁贴或日历请注释掉该行*/
+    align-content:flex-start;
+    display: flex;
+    flex-wrap: wrap; /*规定灵活的项目在必要的时候拆行或拆列。*/
+    justify-content: space-between; /*。*/
+}
+#recent-posts > .recent-post-item {
+  /*max-height:324px;*/  /*文章容器最大高度*/
+  margin-top: 1rem; /*最小间距*/
+  display: inline-block;
+  height:auto; /*高度自动*/
+  width:49%;/*文章容器容器宽度*/
+}
+#recent-posts > .recent-post-item .post_cover {
+  width: 100%; /*图片封面宽度*/
+    height: 200px;/*图片封面高度*/
+}
+#recent-posts > .recent-post-item .post_cover img.post_bg {
+  width: 100%;/*图片宽度*/
+  height: 100%;/*图片高度*/
+}
+
+
+#recent-posts > .recent-post-item >.recent-post-info > .content {
+display:none;/*隐藏文章详情*/
+}
+#recent-posts > .recent-post-item {
+
+  -webkit-flex-direction: column; /*容器内部纵向排列*/
+  -ms-flex-direction: column; /*容器内部纵向排列*/
+  flex-direction: column; /*容器内部纵向排列*/
+
+}
+#recent-posts > .recent-post-item .left_radius {
+    border-radius: 8px 8px 0 0;/*圆角修改*/
+}
+#recent-posts > .recent-post-item .right_radius {
+    border-radius: 8px 8px 0 0;/*圆角修改*/
+}
+.recent-post-item{
+    height:auto !important;/*容器高度自动*/
+}
+
+.recent-post-info {
+
+  padding: 0 40px;/*容器内部文字左右间距*/
+  margin-top: 1em;/*容器内部文字上间距*/
+  width: 100%!important;/*容器宽度*/
+}
+#recent-posts > .recent-post-item > .recent-post-info > .article-title {
+    -webkit-line-clamp: 1;/*控制标题的行数*/
+    margin-top: 0.3rem; /*控制标题的上间距*/
+    margin-bottom: 0.3rem;/*控制标题的下间距*/
+    color: var(--text-highlight-color);
+    font-size: 1.2em; /*控制标题的字体大小*/
+    line-height: 1.4;/*控制标题的行高*/
+
+}
+#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap {
+    margin-bottom: 1rem;/*控制标题meta信息的底部间距*/
+}
+@media screen and (max-width: 768px) {
+#recent-posts > .recent-post-item {
+ width:100%;/*控制手机自适应*/
+}
+}
diff --git a/source/css/_custom/sidebar.css b/source/css/_custom/sidebar.css
new file mode 100644
index 0000000..a5073a1
--- /dev/null
+++ b/source/css/_custom/sidebar.css
@@ -0,0 +1,31 @@
+#sidebar #sidebar-menus .menus_items .menus_item_child {
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap
+}
+
+#sidebar #sidebar-menus .menus_item_child li {
+    width: calc(50% - 8px);
+    margin: 4px
+}
+
+#sidebar #sidebar-menus .menus_item_child .site-page.child {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px;
+    border-radius: 12px;
+    border: var(--style-border-always);
+    background: var(--zhsher-card-bg);
+    font-size: 14px
+}
+
+#sidebar #sidebar-menus .menus_items a.site-page, #sidebar .menus_item ul {
+    padding-left: 0
+}
+
+#sidebar #sidebar-menus.open {
+    border-radius: 12px 0 0 0;
+}
diff --git a/source/css/_custom/waves.css b/source/css/_custom/waves.css
new file mode 100644
index 0000000..6bd968d
--- /dev/null
+++ b/source/css/_custom/waves.css
@@ -0,0 +1,74 @@
+
+
+/* 波浪css */
+.main-hero-waves-area {
+  width: 100%;
+  left: 0;
+  position: relative;
+  bottom: -11px;
+  top: 10px;
+  z-index: 5;
+}
+.waves-area .waves-svg {
+  width: 100%;
+  height: 5rem;
+}
+/* Animation */
+
+.parallax > use {
+  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+}
+.parallax > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+  fill: #f7f9febd;
+}
+.parallax > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+  fill: #f7f9fe82;
+}
+.parallax > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+  fill: #f7f9fe36;
+}
+.parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+  fill: #f7f9fe;
+}
+/* 黑色模式背景 */
+[data-theme="dark"] .parallax > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+  fill: #18171dc8;
+}
+[data-theme="dark"] .parallax > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+  fill: #18171d80;
+}
+[data-theme="dark"] .parallax > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+  fill: #18171d3e;
+}
+[data-theme="dark"] .parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+  fill: #18171d;
+}
+
+@keyframes move-forever {
+  0% {
+    transform: translate3d(-90px, 0, 0);
+  }
+  100% {
+    transform: translate3d(85px, 0, 0);
+  }
+}
+
+.post-bg .main-hero-waves-area {
+  top: 320px !important;
+}
\ 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 0000000..cf79eab
--- /dev/null
+++ b/source/css/_global/function.styl
@@ -0,0 +1,253 @@
+.limit-one-line
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+.limit-more-line
+  display: -webkit-box
+  overflow: hidden
+  -webkit-box-orient: vertical
+
+.fontawesomeIcon
+  display: inline-block
+  font-weight: 600
+  font-family: 'Font Awesome 6 Free'
+  text-rendering: auto
+  -webkit-font-smoothing: antialiased
+
+// card hover
+.cardHover
+  border-radius: 8px
+  background: var(--card-bg)
+  box-shadow: var(--card-box-shadow)
+  transition: all .3s
+
+  &:hover
+    box-shadow: var(--card-hover-box-shadow)
+
+.imgHover
+  width: 100%
+  height: 100%
+  transition: filter 375ms ease-in .2s, transform .6s
+  object-fit: cover
+
+  &:hover
+    transform: scale(1.1)
+
+.postImgHover
+  &:hover
+    img
+      opacity: .8
+      transform: scale(1.1)
+
+  img
+    position: absolute
+    width: 100%
+    height: 100%
+    opacity: .4
+    transition: all .6s, filter 375ms ease-in .2s
+    object-fit: cover
+
+.list-beauty
+  list-style: none
+
+  li
+    position: relative
+    padding: .12em .4em .12em 1.4em
+
+    &:hover
+      &:before
+        border-color: var(--pseudo-hover)
+
+    &:before
+      position: absolute
+      top: .67em
+      left: 0
+      width: w = .43em
+      height: h = w
+      border: .5 * w solid $light-blue
+      border-radius: w
+      background: transparent
+      content: ''
+      cursor: pointer
+      transition: all .3s ease-out
+
+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}
+
+// animation
+if hexo-config('enter_transitions')
+  #content-inner,
+  #footer
+    animation: bottom-top 1s
+
+  #page-header
+    animation: header-effect 1s
+
+  #site-title,
+  #site-subtitle
+    animation: titleScale 1s
+
+  #nav.show
+    animation: headerNoOpacity 1s
+
+  canvas:not(#ribbon-canvas),
+  #web_bg
+    animation: to_show 4s
+
+  #ribbon-canvas
+    animation: ribbon_to_show 4s
+
+  #sidebar-menus
+    &.open
+      for i in 1 2 3 4
+        > :nth-child({i})
+          animation: sidebarItem (i / 5)s
+
+.scroll-down-effects
+  animation: scroll-down-effect 1.5s infinite
+
+if hexo-config('avatar.effect') == true
+  .avatar-img
+    animation: avatar_turn_around 2s linear infinite
+
+.reward-main
+  animation: donate_effcet .3s .1s ease both
+
+@keyframes scroll-down-effect
+  0%
+    top: 0
+    opacity: .4
+
+  50%
+    top: -16px
+    opacity: 1
+
+  100%
+    top: 0
+    opacity: .4
+
+@keyframes header-effect
+  0%
+    opacity: 0
+    transform: translateY(-50px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes headerNoOpacity
+  0%
+    transform: translateY(-50px)
+
+  100%
+    transform: translateY(0)
+
+@keyframes bottom-top
+  0%
+    margin-top: 50px
+    opacity: 0
+
+  100%
+    margin-top: 0
+    opacity: 1
+
+@keyframes titleScale
+  0%
+    opacity: 0
+    transform: scale(.7)
+
+  100%
+    opacity: 1
+    transform: scale(1)
+
+@keyframes search_close
+  0%
+    opacity: 1
+    transform: scale(1)
+
+  100%
+    opacity: 0
+    transform: scale(.7)
+
+@keyframes to_show
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
+
+@keyframes to_hide
+  0%
+    opacity: 1
+
+  100%
+    opacity: 0
+
+@keyframes ribbon_to_show
+  0%
+    opacity: 0
+
+  100%
+    opacity: hexo-config('canvas_ribbon.alpha')
+
+@keyframes avatar_turn_around
+  from
+    transform: rotate(0)
+
+  to
+    transform: rotate(360deg)
+
+@keyframes sub_menus
+  0%
+    opacity: 0
+    transform: translateY(10px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes donate_effcet
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes sidebarItem
+  0%
+    transform: translateX(200px)
+
+  100%
+    transform: translateX(0)
\ 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 0000000..d0447da
--- /dev/null
+++ b/source/css/_global/index.styl
@@ -0,0 +1,201 @@
+:root
+  --global-font-size: $font-size
+  --global-bg: $body-bg
+  --font-color: $font-black
+  --hr-border: lighten($theme-hr-color, 50%)
+  --hr-before-color: lighten($theme-hr-color, 30%)
+  --search-bg: $search-bg
+  --search-input-color: $search-input-color
+  --search-result-title: $search-result-title
+  --preloader-bg: $preloader-bg
+  --preloader-color: $preloader-word-color
+  --tab-border-color: $tab-border-color
+  --tab-botton-bg: $tab-botton-bg
+  --tab-botton-color: $tab-botton-color
+  --tab-button-hover-bg: $tab-button-hover-bg
+  --tab-button-active-bg: $tab-button-active-bg
+  --card-bg: $card-bg
+  --sidebar-bg: $sidebar-background
+  --btn-hover-color: $button-hover-color
+  --btn-color: $button-color
+  --btn-bg: $button-bg
+  --text-bg-hover: rgba($text-bg-hover, .7)
+  --light-grey: $light-grey
+  --dark-grey: $dark-grey
+  --white: $white
+  --text-highlight-color: $text-highlight-color
+  --blockquote-color: $blockquote-color
+  --blockquote-bg: $blockquote-background-color
+  --reward-pop: $reward-pop-up-bg
+  --toc-link-color: $toc-link-color
+  --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
+  --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
+  --pseudo-hover: $pseudo-hover
+  --headline-presudo: #a0a0a0
+  --scrollbar-color: $scrollbar-color
+
+body
+  position: relative
+  min-height: 100%
+  background: var(--global-bg)
+  color: var(--font-color)
+  font-size: var(--global-font-size)
+  font-family: $font-family
+  line-height: $text-line-height
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+
+  if !hexo-config('copy.enable')
+    user-select: none
+
+// scrollbar - chrome/safari
+*::-webkit-scrollbar
+  width: 8px
+  height: 8px
+
+*::-webkit-scrollbar-thumb
+  background: var(--scrollbar-color)
+
+*::-webkit-scrollbar-track
+  background-color: transparent
+
+// scrollbar - firefox
+*
+  scrollbar-width: thin
+  scrollbar-color: var(--scrollbar-color) transparent
+
+input::placeholder
+  color: var(--font-color)
+
+if $web-bg
+  #web_bg
+    position: fixed
+    z-index: -999
+    width: 100%
+    height: 100%
+    background: $web-bg
+    background-attachment: local
+    background-position: center
+    background-size: cover
+    background-repeat: no-repeat
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  position: relative
+  margin: 20px 0 14px
+  color: var(--text-highlight-color)
+  font-weight: bold
+
+  code
+    font-size: inherit !important
+
+*
+  box-sizing: border-box
+
+hr
+  position: relative
+  margin: 40px auto
+  border: 2px dashed var(--hr-border)
+
+.table-wrap
+  overflow-x: scroll
+  margin: 0 0 20px
+
+table
+  display: table
+  width: 100%
+  border-spacing: 0
+  border-collapse: collapse
+  empty-cells: show
+
+  thead
+    background: alpha($table-thead-bg, 10%)
+
+  th,
+  td
+    padding: 6px 12px
+    border: 1px solid var(--light-grey)
+    vertical-align: middle
+
+*::selection
+  background: $theme-text-selection-color
+  color: #F7F7F7
+
+button
+  padding: 0
+  outline: 0
+  border: none
+  background: none
+  cursor: pointer
+  touch-action: manipulation
+
+a
+  color: $a-link-color
+  text-decoration: none
+  word-wrap: break-word
+  transition: all .2s
+  overflow-wrap: break-word
+
+  &:hover
+    color: $light-blue
+
+// font
+if $site-name-font
+  #site-title,
+  #site-subtitle,
+  #site-name,
+  #aside-content .author-info__name,
+  #aside-content .author-info__description
+    font-family: $site-name-font
+
+.is-center
+  text-align: center
+
+.copy-true
+  user-select: all
+
+.pull-left
+  float: left
+
+.pull-right
+  float: right
+
+img
+  &[src=''],
+  &:not([src])
+    opacity: 0
+
+// lazyload blur
+if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
+  img
+    &[data-lazy-src]:not(.loaded)
+      filter: blur(8px) brightness(1)
+
+    &[data-lazy-src].error
+      filter: none
+
+.img-alt
+  margin: -10px 0 10px
+  color: #858585
+
+  &:hover
+    text-decoration: none !important
+
+blockquote
+  margin: 0 0 20px
+  padding: 12px 15px
+  border-left: 3px solid $blockquote-padding-color
+  background-color: var(--blockquote-bg)
+  color: var(--blockquote-color)
+
+  footer
+    cite
+      &:before
+        padding: 0 5px
+        content: '—'
+
+  & > :last-child
+    margin-bottom: 0 !important
diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl
new file mode 100644
index 0000000..a0a1635
--- /dev/null
+++ b/source/css/_highlight/highlight.styl
@@ -0,0 +1,209 @@
+$highlight_theme = hexo-config('highlight_theme')
+wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap')
+
+@require 'theme'
+
+:root
+  --hl-color: $highlight-foreground
+  --hl-bg: $highlight-background
+  --hltools-bg: $highlight-tools.bg-color
+  --hltools-color: $highlight-tools.color
+  --hlnumber-bg: $highlight-gutter.bg-color
+  --hlnumber-color: $highlight-gutter.color
+  --hlscrollbar-bg: $highlight-scrollbar
+  --hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
+
+if $highlight_enable
+  @require 'highlight/index'
+
+if $prismjs_enable
+  @require 'prismjs/index'
+
+$code-block
+  overflow: auto
+  margin: 0 0 20px
+  padding: 0
+  background: var(--hl-bg)
+  color: var(--hl-color)
+  line-height: $line-height-code-block
+
+  if wordWrap
+    counter-reset: line
+    white-space: pre-wrap
+
+#article-container
+  pre,
+  code
+    font-size: $code-font-size
+    font-family: $code-font-family !important
+
+  code
+    padding: 2px 4px
+    background: $code-background
+    color: $code-foreground
+
+  pre
+    @extend $code-block
+    padding: 10px 20px
+
+    code
+      padding: 0
+      background: none
+      color: var(--hl-color)
+      text-shadow: none
+
+  figure.highlight
+    @extend $code-block
+    position: relative
+
+    pre
+      margin: 0
+      padding: 8px 0
+      border: none
+
+    figcaption,
+    .caption
+      padding: 6px 0 2px 14px
+      font-size: $code-font-size
+      line-height: 1em
+
+      a
+        float: right
+        padding-right: 10px
+        color: var(--hl-color)
+
+        &:hover
+          border-bottom-color: var(--hl-color)
+
+  .highlight-tools
+    position: relative
+    display: flex
+    align-items: center
+    overflow: hidden
+    min-height: 24px
+    height: 2.15em
+    background: var(--hltools-bg)
+    color: var(--hltools-color)
+    font-size: $code-font-size
+
+    &.closed ~ *
+      display: none
+
+    .expand
+      position: absolute
+      padding: .57em .7em
+      cursor: pointer
+      transition: transform .3s
+
+      & + .code-lang
+        left: 1.7em
+
+      &.closed
+        transition: all .3s
+        transform: rotate(-90deg) !important
+
+    .code-lang
+      position: absolute
+      left: 14px
+      text-transform: uppercase
+      font-weight: bold
+      font-size: 1.15em
+      user-select: none
+
+    .copy-notice
+      position: absolute
+      right: 2.4em
+      opacity: 0
+      transition: opacity .4s
+
+    .copy-button
+      position: absolute
+      right: 14px
+      cursor: pointer
+      transition: color .2s
+
+      &:hover
+        color: $theme-color
+
+  .gutter
+    user-select: none
+
+  .gist table
+    width: auto
+
+    td
+      border: none
+
+  if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
+    figure.highlight
+      margin: 0 0 24px
+      border-radius: 7px
+      box-shadow: 0 5px 10px 0 $highlight-mac-border
+      -webkit-transform: translateZ(0)
+
+      .highlight-tools
+        &:after
+          position: absolute
+          left: 14px
+          width: 12px
+          height: 12px
+          border-radius: 50%
+          background: #fc625d
+          box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
+          content: ' '
+
+        .expand
+          right: 0
+
+          &.closed
+            transition: all .3s
+            transform: rotate(90deg) !important
+
+          & ~ .copy-notice
+            right: 3.45em
+
+          & ~ .copy-button
+            right: 2.1em
+
+        .code-lang
+          left: 75px
+
+  if hexo-config('highlight_height_limit')
+    .code-expand-btn
+      position: absolute
+      bottom: 0
+      z-index: 10
+      width: 100%
+      background: var(--hlexpand-bg)
+      text-align: center
+      font-size: $code-font-size
+      cursor: pointer
+
+      i
+        padding: 6px 0
+        color: var(--hlnumber-color)
+        animation: code-expand-key 1.2s infinite
+
+      &.expand-done
+        & > i
+          transform: rotate(180deg)
+
+        & + table,
+        & + pre
+          margin-bottom: 1.8em
+
+      &:not(.expand-done)
+        & ~ table,
+        & ~ pre
+          overflow: hidden
+          height: unit(hexo-config('highlight_height_limit'), px)
+
+@keyframes code-expand-key
+  0%
+    opacity: .6
+
+  50%
+    opacity: .1
+
+  100%
+    opacity: .6
\ No newline at end of file
diff --git a/source/css/_highlight/highlight/diff.styl b/source/css/_highlight/highlight/diff.styl
new file mode 100644
index 0000000..83f3e17
--- /dev/null
+++ b/source/css/_highlight/highlight/diff.styl
@@ -0,0 +1,79 @@
+figure.highlight
+  table
+    scrollbar-color: var(--hlscrollbar-bg) transparent
+
+    &::-webkit-scrollbar-thumb
+      background: var(--hlscrollbar-bg)
+
+  pre .deletion
+    color: $highlight-deletion
+
+  pre .addition
+    color: $highlight-addition
+
+  pre .meta
+    color: $highlight-purple
+
+  pre
+    .comment
+      color: $highlight-comment
+
+    .variable,
+    .attribute,
+    .regexp,
+    .ruby .constant,
+    .xml .tag .title,
+    .xml .pi,
+    .xml .doctype,
+    .html .doctype,
+    .css .id,
+    .tag .name,
+    .css .class,
+    .css .pseudo
+      color: $highlight-red
+
+    .tag
+      color: $highlight-aqua
+
+    .number,
+    .preprocessor,
+    .literal,
+    .params,
+    .constant,
+    .command
+      color: $highlight-orange
+
+    .built_in
+      color: $highlight-yellow
+
+    .ruby .class .title,
+    .css .rules .attribute,
+    .string,
+    .value,
+    .inheritance,
+    .header,
+    .ruby .symbol,
+    .xml .cdata,
+    .special,
+    .number,
+    .formula
+      color: $highlight-green
+
+    .keyword,
+    .title,
+    .css .hexcolor
+      color: $highlight-aqua
+
+    .function,
+    .python .decorator,
+    .python .title,
+    .ruby .function .title,
+    .ruby .title .keyword,
+    .perl .sub,
+    .javascript .title,
+    .coffeescript .title
+      color: $highlight-blue
+
+    .tag .attr,
+    .javascript .function
+      color: $highlight-purple
diff --git a/source/css/_highlight/highlight/index.styl b/source/css/_highlight/highlight/index.styl
new file mode 100644
index 0000000..bdb9d96
--- /dev/null
+++ b/source/css/_highlight/highlight/index.styl
@@ -0,0 +1,39 @@
+if $highlight_theme != false
+  @require 'diff'
+
+#article-container
+  figure.highlight
+    .line
+      if wordWrap
+        &:before
+          display: inline-block
+          padding: 0 6px 0 0
+          min-width: 30px
+          color: var(--hlnumber-color)
+          content: counter(line)
+          counter-increment: line
+          text-align: left
+
+      &.marked
+        background-color: $highlight-selection
+
+    table
+      display: block
+      overflow: auto
+      border: none
+
+      td
+        padding: 0
+        border: none
+
+    .gutter pre
+      padding-right: 10px
+      padding-left: 10px
+      background-color: var(--hlnumber-bg)
+      color: var(--hlnumber-color)
+      text-align: right
+
+    .code pre
+      padding-right: 10px
+      padding-left: 10px
+      width: 100%
diff --git a/source/css/_highlight/prismjs/diff.styl b/source/css/_highlight/prismjs/diff.styl
new file mode 100644
index 0000000..1e63c79
--- /dev/null
+++ b/source/css/_highlight/prismjs/diff.styl
@@ -0,0 +1,302 @@
+if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
+  // prism-base16-ateliersulphurpool.light
+  pre[class*='language-']
+    .token.function
+      color: #ffb62c
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata
+      color: rgba(149, 165, 166, .8)
+
+    .token.punctuation
+      color: #5e6687
+
+    .token.namespace
+      opacity: .7
+
+    .token.operator,
+    .token.boolean,
+    .token.number
+      color: #c76b29
+
+    .token.property
+      color: #c08b30
+
+    .token.tag
+      color: #3d8fd1
+
+    .token.string
+      color: #22a2c9
+
+    .token.selector
+      color: #6679cc
+
+    .token.attr-name
+      color: #c76b29
+
+    .token.entity,
+    .token.url,
+    .language-css .token.string,
+    .style .token.string
+      color: #22a2c9
+
+    .token.attr-value,
+    .token.keyword,
+    .token.control,
+    .token.directive,
+    .token.unit
+      color: #ac9739
+
+    .token.statement,
+    .token.regex,
+    .token.atrule
+      color: #22a2c9
+
+    .token.placeholder,
+    .token.variable
+      color: #3d8fd1
+
+    .token.deleted
+      text-decoration: line-through
+
+    .token.inserted
+      border-bottom: 1px dotted #202746
+      text-decoration: none
+
+    .token.italic
+      font-style: italic
+
+    .token.important,
+    .token.bold
+      font-weight: bold
+
+    .token.important
+      color: #c94922
+
+    .token.entity
+      cursor: help
+
+    pre > code.highlight
+      outline: .4em solid #c94922
+      outline-offset: .4em
+
+if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
+  // prism-atom-dark
+  pre[class*='language-']
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata
+      color: #7C7C7C
+
+    .token.punctuation
+      color: #c5c8c6
+
+    .namespace
+      opacity: .7
+
+    .token.property,
+    .token.keyword,
+    .token.tag
+      color: #96CBFE
+
+    .token.class-name
+      color: #FFFFB6
+
+    .token.boolean,
+    .token.constant
+      color: #99CC99
+
+    .token.symbol,
+    .token.deleted
+      color: #f92672
+
+    .token.number
+      color: #FF73FD
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted
+      color: #A8FF60
+
+    .token.variable
+      color: #C6C5FE
+
+    .token.operator
+      color: #EDEDED
+
+    .token.entity
+      color: #FFFFB6
+      cursor: help
+
+    .token.url
+      color: #96CBFE
+
+    .language-css .token.string,
+    .style .token.string
+      color: #87C38A
+
+    .token.atrule,
+    .token.attr-value
+      color: #F9EE98
+
+    .token.function
+      color: #DAD085
+
+    .token.regex
+      color: #E9C062
+
+    .token.important
+      color: #fd971f
+
+    .token.important,
+    .token.bold
+      font-weight: bold
+
+    .token.italic
+      font-style: italic
+
+if $highlight_theme == 'pale night'
+  // prism-dracula
+  pre[class*='language-']
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata
+      color: #6272a4
+
+    .token.punctuation
+      color: #f8f8f2
+
+    .namespace
+      opacity: .7
+
+    .token.property,
+    .token.tag,
+    .token.constant,
+    .token.symbol,
+    .token.deleted
+      color: #ff79c6
+
+    .token.boolean,
+    .token.number
+      color: #bd93f9
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted
+      color: #50fa7b
+
+    .token.operator,
+    .token.entity,
+    .token.url,
+    .language-css .token.string,
+    .style .token.string,
+    .token.variable
+      color: #f8f8f2
+
+    .token.atrule,
+    .token.attr-value,
+    .token.function,
+    .token.class-name
+      color: #f1fa8c
+
+    .token.keyword
+      color: #8be9fd
+
+    .token.regex,
+    .token.important
+      color: #ffb86c
+
+    .token.important,
+    .token.bold
+      font-weight: bold
+
+    .token.italic
+      font-style: italic
+
+    .token.entity
+      cursor: help
+
+if $highlight_theme == 'ocean'
+  // prism-material-oceanic
+  pre[class*='language-']
+    &.language-css > code,
+    &.language-sass > code,
+    &.language-scss > code
+      color: #fd9170 !important
+
+    .namespace
+      opacity: .7
+
+    .token.atrule,
+    .token.symbol,
+    .token.constant,
+    .token.boolean,
+    .token.function
+      color: #c792ea
+
+    .token.attr-name,
+    .token.builtin,
+    .token.class
+      color: #ffcb6b
+
+    .token.attr-value,
+    .token.attribute,
+    .token.pseudo-class,
+    .token.pseudo-element,
+    .token.string
+      color: #c3e88d
+
+    .token.cdata,
+    .token.property,
+    .token.char,
+    .token.inserted
+      color: #80cbc4
+
+    .token.class-name,
+    .token.color,
+    .token.hexcode,
+    .token.regex
+      color: #f2ff00
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype
+      color: #546e7a
+
+    .token.deleted,
+    .token.variable,
+    .token.entity,
+    .token.selector,
+    .token.tag,
+    .token.unit
+      color: #f07178
+
+    .token.id
+      color: #c792ea
+      font-weight: bold
+
+    .token.important
+      color: #c792ea
+      font-weight: bold
+
+    .token.keyword
+      color: #c792ea
+      font-style: italic
+
+    .token.number,
+    .token.url
+      color: #fd9170
+
+    .token.operator,
+    .token.punctuation
+      color: #89ddff
\ No newline at end of file
diff --git a/source/css/_highlight/prismjs/index.styl b/source/css/_highlight/prismjs/index.styl
new file mode 100644
index 0000000..1b73837
--- /dev/null
+++ b/source/css/_highlight/prismjs/index.styl
@@ -0,0 +1,22 @@
+if $prismjs_line_number
+  @require 'line-number'
+
+if $highlight_theme != false
+  @require 'diff'
+
+#article-container
+  pre[class*='language-']
+    scrollbar-color: var(--hlscrollbar-bg) transparent
+
+    &::-webkit-scrollbar-thumb
+      background: var(--hlscrollbar-bg)
+
+    &:not(.line-numbers)
+      padding: 10px 20px
+
+    .caption
+      margin-left: -3.8em
+      padding: 4px 16px !important
+
+      a
+        padding: 0 !important
diff --git a/source/css/_highlight/prismjs/line-number.styl b/source/css/_highlight/prismjs/line-number.styl
new file mode 100644
index 0000000..69f2787
--- /dev/null
+++ b/source/css/_highlight/prismjs/line-number.styl
@@ -0,0 +1,41 @@
+#article-container
+  pre[class*='language-']
+    &.line-numbers
+      position: relative
+      padding-left: 3.8em
+      counter-reset: linenumber
+      line-height: $line-height-code-block
+
+      > code
+        position: relative
+        line-height: $line-height-code-block
+
+        if hexo-config('code_word_wrap')
+          white-space: pre-wrap
+        else
+          white-space: inherit
+          word-wrap: normal
+          word-break: normal
+          overflow-wrap: normal
+
+      .line-numbers-rows
+        position: absolute
+        top: 0
+        left: -3.8em
+        width: 3em
+        letter-spacing: -1px
+        font-size: 100%
+        pointer-events: none
+        user-select: none
+
+        & > span
+          display: block
+          counter-increment: linenumber
+          pointer-events: none
+
+          &:before
+            display: block
+            padding-right: .8em
+            color: var(--hlnumber-color)
+            content: counter(linenumber)
+            text-align: right
diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl
new file mode 100644
index 0000000..63393db
--- /dev/null
+++ b/source/css/_highlight/theme.styl
@@ -0,0 +1,119 @@
+if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
+  $highlight-background = #212121
+  $highlight-selection = #61616150
+  $highlight-foreground = #EEFFFF
+  $highlight-mac-border = rgba(0, 0, 0, .4)
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-tools = {
+    color: alpha($highlight-foreground, .8),
+    bg-color: darken($highlight-background, 2)
+  }
+  $highlight-scrollbar = lighten($highlight-background, 8)
+
+  if $highlight_enable
+    $highlight-comment = #969896
+    $highlight-red = #FF5370
+    $highlight-orange = #F78C6C
+    $highlight-yellow = #FFCB6B
+    $highlight-green = #C3E88D
+    $highlight-aqua = #89DDFF
+    $highlight-blue = #82AAFF
+    $highlight-purple = #C792EA
+    $highlight-deletion = #BF42BF
+    $highlight-addition = #105EDE
+
+if $highlight_theme == 'pale night'
+  $highlight-background = #292D3E
+  $highlight-selection = #717CB450
+  $highlight-foreground = #A6ACCD
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-tools = {
+    color: $highlight-foreground,
+    bg-color: darken($highlight-background, 2)
+  }
+  $highlight-scrollbar = lighten($highlight-background, 8)
+
+  if $highlight_enable
+    $highlight-comment = #676E95
+    $highlight-red = #FF5370
+    $highlight-orange = #F78C6C
+    $highlight-yellow = #FFCB6B
+    $highlight-green = #C3E88D
+    $highlight-aqua = #89DDFF
+    $highlight-blue = #82AAFF
+    $highlight-purple = #C792EA
+    $highlight-deletion = #BF42BF
+    $highlight-addition = #105EDE
+
+if $highlight_theme == 'ocean'
+  $highlight-background = #0F111A
+  $highlight-selection = #717CB450
+  $highlight-foreground = #8F93A2
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-tools = {
+    color: $highlight-foreground,
+    bg-color: darken($highlight-background, 2)
+  }
+  $highlight-scrollbar = lighten($highlight-background, 8)
+
+  if $highlight_enable
+    $highlight-comment = rgba(101, 115, 126, .8)
+    $highlight-red = #FF5370
+    $highlight-orange = #F78C6C
+    $highlight-yellow = #FFCB6B
+    $highlight-green = #C3E88D
+    $highlight-aqua = #89DDFF
+    $highlight-blue = #82AAFF
+    $highlight-purple = #C792EA
+    $highlight-deletion = #BF42BF
+    $highlight-addition = #105EDE
+
+if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
+  $highlight-background = #F6F8FA
+  $highlight-selection = #80CBC440
+  $highlight-foreground = #90A4AE
+  $highlight-mac-border = rgba(144, 164, 174, .4)
+  $highlight-tools = {
+    color: $highlight-foreground,
+    bg-color: darken($highlight-background, 5)
+  }
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-scrollbar = darken($highlight-background, 8)
+
+  if $highlight_enable
+    $highlight-comment = rgba(149, 165, 166, .8)
+    $highlight-red = #E53935
+    $highlight-orange = #F76D47
+    $highlight-yellow = #FFB62C
+    $highlight-green = #91B859
+    $highlight-aqua = #39ADB5
+    $highlight-blue = #6182B8
+    $highlight-purple = #7C4DFF
+    $highlight-deletion = #BF42BF
+    $highlight-addition = #105EDE
+
+if $highlight_theme == false
+  $highlight-background = #F6F8FA
+  $highlight-foreground = #90A4AE
+  $highlight-selection = #80CBC440
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-tools = {
+    color: $highlight-foreground,
+    bg-color: darken($highlight-background, 5)
+  }
+  $highlight-scrollbar = darken($highlight-background, 8)
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
new file mode 100644
index 0000000..16a268c
--- /dev/null
+++ b/source/css/_layout/aside.styl
@@ -0,0 +1,406 @@
+#aside-content
+  width: 26%
+
+  +minWidth900()
+    if hexo-config('aside.position') == 'right'
+      padding-left: 15px
+    else
+      padding-right: 15px
+
+  +maxWidth900()
+    width: 100%
+
+  > .card-widget:first-child
+    margin-top: 0
+
+    +maxWidth900()
+      margin-top: 20px
+
+  .card-widget
+    @extend .cardHover
+    position: relative
+    overflow: hidden
+    margin-top: 20px
+    padding: 20px 24px
+
+    if hexo-config('aside.mobile') == false
+      +maxWidth768()
+        &:not(#card-toc)
+          display: none
+
+  .card-info
+    .author-info
+      &__name
+        font-weight: 500
+        font-size: 1.57em
+
+      &__description
+        margin-top: -.42em
+
+    .card-info-data
+      margin: 14px 0 4px
+
+    .card-info-social-icons
+      margin: 6px 0 -6px
+
+      .social-icon
+        margin: 0 10px
+        color: var(--font-color)
+        font-size: 1.4em
+
+      i
+        transition: all .3s
+
+        &:hover
+          transform: rotate(540deg)
+
+    #card-info-btn
+      display: block
+      margin-top: 14px
+      background-color: var(--btn-bg)
+      color: var(--btn-color)
+      text-align: center
+      line-height: 2.4
+
+      &:hover
+        background-color: var(--btn-hover-color)
+
+      span
+        padding-left: 10px
+
+  .item-headline
+    padding-bottom: 6px
+    font-size: 1.2em
+
+    span
+      margin-left: 6px
+
+  .sticky_layout
+    +minWidth900()
+      position: sticky
+      position: -webkit-sticky
+      top: 20px
+      transition: top .3s
+
+  .card-tag-cloud
+    a
+      display: inline-block
+      padding: 0 4px
+
+      &:hover
+        color: $text-hover !important
+
+  .aside-list
+    & > span
+      display: block
+      margin-bottom: 10px
+      text-align: center
+
+    & > .aside-list-item
+      display: flex
+      align-items: center
+      padding: 6px 0
+
+      &:first-child
+        padding-top: 0
+
+      &:not(:last-child)
+        border-bottom: 1px dashed #f5f5f5
+
+      &:last-child
+        padding-bottom: 0
+
+      .thumbnail
+        overflow: hidden
+        width: w = 4.2em
+        height: w
+
+        & > img
+          @extend .imgHover
+
+      .content
+        flex: 1
+        padding-left: 10px
+        word-break: break-all
+
+        & > .name
+          @extend .limit-more-line
+          -webkit-line-clamp: 1
+
+        & > time,
+        & > .name
+          display: block
+          color: $theme-meta-color
+          font-size: 85%
+
+        & > .title,
+        & > .comment
+          @extend .limit-more-line
+          color: var(--font-color)
+          font-size: 95%
+          line-height: 1.5
+          -webkit-line-clamp: 2
+
+          &:hover
+            color: $text-hover
+
+      &.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,
+  .card-categories ul.card-category-list > .card-category-list-item
+    a
+      display: flex
+      flex-direction: row
+      padding: 3px 10px
+      color: var(--font-color)
+      transition: all .4s
+
+      span
+        @extend .limit-one-line
+
+        &:first-child
+          flex: 1
+
+  .card-categories
+    .card-category-list
+      &.child
+        padding: 0 0 0 16px
+
+      > .parent
+        > a
+          .card-category-list
+            &-name
+              width: 70% !important
+
+            &-count
+              width: calc(100% - 70% - 20px)
+              text-align: right
+
+        i
+          float: right
+          margin-right: -.5em
+          padding: .5em
+          transition: transform .3s
+          transform: rotate(0)
+
+          &.expand
+            transform: rotate(-90deg)
+
+        if hexo-config('aside.card_categories.expand') == false
+          > .child
+            display: none
+
+  .card-webinfo
+    .webinfo
+      .webinfo-item
+        display: flex
+        align-items: center
+        padding: 2px 10px 0
+
+        div
+          &:first-child
+            flex: 1
+            padding-right: 20px
+
+  // toc
+  #card-toc
+    +minWidth901()
+      right: 0 !important
+
+    +maxWidth900()
+      position: fixed
+      right: -100%
+      bottom: 30px
+      z-index: 100
+      max-width: $toc-mobile-maxWidth
+      max-height: calc(100% - 60px)
+      width: $toc-mobile-width
+      opacity: 0
+      transition: initial
+      transform-origin: right bottom
+
+    .toc-percentage
+      float: right
+      margin-top: -9px
+      color: #a9a9a9
+      font-style: italic
+      font-size: 140%
+
+    .toc-content
+      overflow-y: scroll
+      overflow-y: overlay
+      margin: 0 -24px
+      max-height: calc(100vh - 120px)
+
+      +maxWidth900()
+        max-height: calc(100vh - 140px)
+
+      & > *
+        margin: 0 20px !important
+
+        & > .toc-item > .toc-child
+          margin-left: 10px
+          padding-left: 10px
+          border-left: 1px solid var(--dark-grey)
+
+      &:not(.is-expand)
+        .toc-child
+          display: none
+
+          +maxWidth900()
+            display: block !important
+
+        .toc-item
+          &.active
+            .toc-child
+              display: block
+
+      ol,
+      li
+        list-style: none
+
+      > ol
+        padding: 0 !important
+
+      ol
+        margin: 0
+        padding-left: 18px
+
+      .toc-link
+        display: block
+        margin: 4px 0
+        padding: 1px 6px
+        color: var(--toc-link-color)
+        transition: all .2s ease-in-out
+
+        &:hover
+          color: $theme-color
+
+        &.active
+          background: $theme-toc-color
+          color: $toc-active-color
+
+  :only-child
+    > .card-widget
+      margin-top: 0
+
+  .card-more-btn
+    float: right
+    color: inherit
+
+    &:hover
+      animation: more-btn-move 1s infinite
+
+  .card-announcement
+    .item-headline
+      i
+        color: #FF0000
+
+.avatar-img
+  overflow: hidden
+  margin: 0 auto
+  width: 110px
+  height: 110px
+  border-radius: 70px
+
+  img
+    width: 100%
+    height: 100%
+    transition: filter 375ms ease-in .2s, transform .3s
+    object-fit: cover
+
+    &:hover
+      transform: rotate(360deg)
+
+.site-data
+  display: table
+  width: 100%
+  table-layout: fixed
+
+  & > a
+    display: table-cell
+
+    div
+      transition: all .3s
+
+    &:hover
+      div
+        color: $theme-color !important
+
+    .headline
+      @extend .limit-one-line
+      color: var(--font-color)
+
+    .length-num
+      margin-top: -.32em
+      color: var(--text-highlight-color)
+      font-size: 1.4em
+
+@keyframes more-btn-move
+  0%,
+  100%
+    transform: translateX(0)
+
+  50%
+    transform: translateX(3px)
+
+@keyframes toc-open
+  0%
+    transform: scale(.7)
+
+  100%
+    transform: scale(1)
+
+@keyframes toc-close
+  0%
+    transform: scale(1)
+
+  100%
+    transform: scale(.7)
+
++minWidth900()
+  html.hide-aside
+    .layout
+      justify-content: center
+
+      > .aside-content
+        display: none
+
+      > div:first-child
+        width: 80%
+
+.page
+  .sticky_layout
+    display: flex
+    flex-direction: column
+
+  if hexo-config('aside.card_recent_post.sort_order')
+    .card-recent-post
+      order: hexo-config('aside.card_recent_post.sort_order')
+
+  if hexo-config('newest_comments.sort_order')
+    #card-newest-comments
+      order: hexo-config('newest_comments.sort_order')
+
+  if hexo-config('aside.card_categories.sort_order')
+    .card-categories
+      order: hexo-config('aside.card_categories.sort_order')
+
+  if hexo-config('aside.card_tags.sort_order')
+    .card-tags
+      order: hexo-config('aside.card_tags.sort_order')
+
+  if hexo-config('aside.card_archives.sort_order')
+    .card-archives
+      order: hexo-config('aside.card_archives.sort_order')
+
+  if hexo-config('aside.card_webinfo.sort_order')
+    .card-webinfo
+      order: hexo-config('aside.card_webinfo.sort_order')
diff --git a/source/css/_layout/chat.styl b/source/css/_layout/chat.styl
new file mode 100644
index 0000000..ea12227
--- /dev/null
+++ b/source/css/_layout/chat.styl
@@ -0,0 +1,17 @@
+// chat
+if hexo-config('chat_btn') == true && hexo-config('chatra.enable')
+  #chatra:not(.chatra--expanded)
+    visibility: hidden !important
+    width: 1px !important
+    height: 1px !important
+    opacity: 0 !important
+    pointer-events: none
+
+if hexo-config('chat_btn') == true && hexo-config('messenger.enable')
+  .fb_dialog,
+  .fb-customerchat
+    visibility: hidden !important
+    width: 1px !important
+    height: 1px !important
+    opacity: 0 !important
+    pointer-events: none
\ No newline at end of file
diff --git a/source/css/_layout/comments.styl b/source/css/_layout/comments.styl
new file mode 100644
index 0000000..838094a
--- /dev/null
+++ b/source/css/_layout/comments.styl
@@ -0,0 +1,64 @@
+#post-comment
+  .comment-head
+    margin-bottom: 20px
+
+    .comment-headline
+      display: inline-block
+      vertical-align: middle
+      font-weight: 700
+      font-size: 1.43em
+
+    #comment-switch
+      display: inline-block
+
+      if hexo-config('comments.text')
+        float: right
+        margin: 2px auto 0
+        padding: 4px 16px
+        width: max-content
+        border-radius: 8px
+        background: $comments-switch-bg
+      else
+        vertical-align: middle
+
+        > span
+          display: none
+
+      .first-comment
+        color: $comments-switch-first-text
+
+      .second-comment
+        color: $comments-switch-second-text
+
+      .switch-btn
+        position: relative
+        display: inline-block
+        margin: -4px 8px 0
+        width: 42px
+        height: 22px
+        border-radius: 34px
+        background-color: $comments-switch-first-text
+        vertical-align: middle
+        cursor: pointer
+        transition: .4s
+
+        &:before
+          position: absolute
+          bottom: 4px
+          left: 4px
+          width: 14px
+          height: 14px
+          border-radius: 50%
+          background-color: $comments-switch-round
+          content: ''
+          transition: .4s
+
+        &.move
+          background-color: $comments-switch-second-text
+
+          &:before
+            transform: translateX(20px)
+
+  .comment-wrap
+    > div:nth-child(2)
+      display: none
\ 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 0000000..3fb1d39
--- /dev/null
+++ b/source/css/_layout/footer.styl
@@ -0,0 +1,35 @@
+#footer
+  position: relative
+  background: $light-blue
+  background-attachment: scroll
+  background-position: bottom
+  background-size: cover
+
+  if hexo-config('footer_bg') != false
+    &:before
+      position: absolute
+      width: 100%
+      height: 100%
+      background-color: alpha($dark-black, .5)
+      content: ''
+
+#footer-wrap
+  position: relative
+  padding: 40px 20px
+  color: var(--light-grey)
+  text-align: center
+
+  a
+    color: var(--light-grey)
+
+    &:hover
+      text-decoration: underline
+
+  .footer-separator
+    margin: 0 4px
+
+  .icp-icon
+    padding: 0 4px
+    max-height: 1.4em
+    width: auto
+    vertical-align: text-bottom
diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl
new file mode 100644
index 0000000..c7d4ca3
--- /dev/null
+++ b/source/css/_layout/head.styl
@@ -0,0 +1,376 @@
+#page-header
+  position: relative
+  width: 100%
+  background-color: $light-blue
+  background-position: center center
+  background-size: cover
+  background-repeat: no-repeat
+  transition: all .5s
+
+  &:not(.not-top-img):before
+    position: absolute
+    width: 100%
+    height: 100%
+    background-color: alpha($dark-black, .3)
+    content: ''
+
+  // index
+  &.full_page
+    height: $index_top_img_height
+    background-attachment: fixed
+
+    #site-info
+      position: absolute
+      top: $index_site_info_top
+      padding: 0 10px
+      width: 100%
+
+  #site-title,
+  #site-subtitle,
+  #scroll-down .scroll-down-effects
+    text-align: center
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
+    line-height: 1.5
+
+  #site-title
+    margin: 0
+    color: var(--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: 300px
+    text-align: center
+
+    +maxWidth768()
+      display: block
+
+    .social-icon
+      margin: 0 10px
+      color: var(--light-grey)
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
+      font-size: 1.43em
+
+  #scroll-down
+    position: absolute
+    bottom: 0
+    width: 100%
+    cursor: pointer
+
+    .scroll-down-effects
+      position: relative
+      width: 100%
+      color: var(--light-grey)
+      font-size: 30px
+
+  // page
+  &.not-home-page
+    height: 400px
+
+    +maxWidth768()
+      height: 280px
+
+  #page-site-info
+    position: absolute
+    top: 200px
+    padding: 0 10px
+    width: 100%
+
+    +maxWidth768()
+      top: 140px
+
+  // post
+  &.post-bg
+    height: 400px
+
+    +maxWidth768()
+      height: 360px
+
+    &:before
+      background-color: alpha($dark-black, .5)
+
+  #post-info
+    position: absolute
+    bottom: 100px
+    padding: 0 8%
+    width: 100%
+    text-align: center
+
+    +maxWidth900()
+      bottom: 30px
+      text-align: left
+
+    +maxWidth768()
+      bottom: 22px
+      padding: 0 22px
+
+  &.not-top-img
+    margin-bottom: 10px
+    height: 60px
+    background: 0
+
+    #nav
+      background: rgba(255, 255, 255, .8)
+      box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
+
+      a
+        color: var(--font-color)
+        text-shadow: none
+
+  &.nav-fixed
+    #nav
+      position: fixed
+      top: -60px
+      z-index: 91
+      background: rgba(255, 255, 255, .8)
+      box-shadow: 0 5px 6px -5px alpha($grey, .6)
+      transition: transform .2s ease-in-out, opacity .2s ease-in-out
+
+      a,
+      #site-name,
+      #toggle-menu
+        color: var(--font-color)
+        text-shadow: none
+
+        &:hover
+          color: $light-blue
+
+  &.nav-visible
+    #nav
+      transition: all .5s
+      transform: translate3d(0, 100%, 0)
+
+    & + .layout
+      & > .aside-content > .sticky_layout
+        top: 70px
+        transition: top .5s
+
+#page
+  h1.page-title
+    margin: 8px 0 20px
+
+// for not top_img
+#post
+  & > #post-info
+    margin-bottom: 30px
+
+    .post-title
+      padding-bottom: 4px
+      border-bottom: 1px solid var(--light-grey)
+      color: var(--text-highlight-color)
+
+      .post-edit-link
+        float: right
+
+    #post-meta,
+    #post-meta a
+      color: #78818a
+
+#post-info
+  .post-title
+    @extend .limit-more-line
+    margin-bottom: 8px
+    color: var(--white)
+    font-weight: normal
+    font-size: 2.5em
+    line-height: 1.5
+    -webkit-line-clamp: 3
+
+    +maxWidth768()
+      font-size: 2.1em
+
+    .post-edit-link
+      padding-left: 10px
+
+  #post-meta
+    color: var(--light-grey)
+    font-size: 95%
+
+    +minWidth768()
+      > .meta-secondline
+        > span:first-child
+          display: none
+
+    +maxWidth768()
+      font-size: 90%
+
+      > .meta-firstline,
+      > .meta-secondline
+        display: inline
+
+    .post-meta
+      &-separator
+        margin: 0 5px
+
+      &-icon
+        margin-right: 4px
+
+      &-label
+        if hexo-config('post_meta.post.label')
+          margin-right: 4px
+        else
+          display: none
+
+    a
+      color: var(--light-grey)
+      transition: all .3s ease-out
+
+      &:hover
+        color: $text-hover
+        text-decoration: underline
+
+    if hexo-config('post_meta.post.date_format') == 'relative'
+      time
+        display: none
+
+#nav
+  position: absolute
+  top: 0
+  z-index: 90
+  display: flex
+  align-items: center
+  padding: 0 36px
+  width: 100%
+  height: 60px
+  font-size: 1.3em
+  opacity: 0
+  transition: all .5s
+
+  +maxWidth768()
+    padding: 0 16px
+
+  &.show
+    opacity: 1
+
+  #blog_name
+    flex: 1
+
+  #toggle-menu
+    display: none
+    padding: 2px 0 0 6px
+    vertical-align: top
+
+    &:hover
+      color: var(--white)
+
+  a
+    color: var(--light-grey)
+
+    &:hover
+      color: var(--white)
+
+  #site-name
+    text-shadow: 2px 2px 4px rgba($dark-black, .15)
+    font-weight: bold
+    cursor: pointer
+
+  .menus_items
+    display: inline
+
+    .menus_item
+      position: relative
+      display: inline-block
+      padding: 0 0 0 14px
+
+      &:hover
+        .menus_item_child
+          display: block
+
+        & > a > i:last-child
+          transform: rotate(180deg)
+
+      & > a > i:last-child
+        padding: 4px
+        transition: transform .3s
+
+      .menus_item_child
+        position: absolute
+        right: 0
+        display: none
+        margin-top: 8px
+        padding: 0
+        width: max-content
+        border-radius: 5px
+        background-color: var(--sidebar-bg)
+        box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
+        animation: sub_menus .3s .1s ease both
+
+        &:before
+          position: absolute
+          top: -8px
+          left: 0
+          width: 100%
+          height: 20px
+          content: ''
+
+        li
+          list-style: none
+
+          &:hover
+            background: var(--text-bg-hover)
+
+          &:first-child
+            border-top-left-radius: 5px
+            border-top-right-radius: 5px
+
+          &:last-child
+            border-bottom-right-radius: 5px
+            border-bottom-left-radius: 5px
+
+          a
+            display: inline-block
+            padding: 8px 16px
+            width: 100%
+            color: var(--font-color) !important
+            text-shadow: none !important
+
+  &.hide-menu
+    #toggle-menu
+      display: inline-block !important
+
+      .site-page
+        font-size: inherit
+
+    .menus_items
+      display: none
+
+    #search-button span
+      display: none
+
+  #search-button
+    display: inline
+    padding: 0 0 0 14px
+
+  .site-page
+    position: relative
+    padding-bottom: 6px
+    text-shadow: 1px 1px 2px rgba($dark-black, .3)
+    font-size: .78em
+    cursor: pointer
+
+    &:not(.child)
+      &:after
+        position: absolute
+        bottom: 0
+        left: 0
+        z-index: -1
+        width: 0
+        height: 3px
+        background-color: lighten($theme-color, 30%)
+        content: ''
+        transition: all .3s ease-in-out
+
+      &:hover
+        &:after
+          width: 100%
\ No newline at end of file
diff --git a/source/css/_layout/loading.styl b/source/css/_layout/loading.styl
new file mode 100644
index 0000000..9f63e15
--- /dev/null
+++ b/source/css/_layout/loading.styl
@@ -0,0 +1,95 @@
+if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
+  .loading-bg
+    position: fixed
+    z-index: 1000
+    width: 50%
+    height: 100%
+    background-color: var(--preloader-bg)
+
+  #loading-box
+    .loading-left-bg
+      @extend .loading-bg
+
+    .loading-right-bg
+      @extend .loading-bg
+      right: 0
+
+    .spinner-box
+      position: fixed
+      z-index: 1001
+      display: flex
+      justify-content: center
+      align-items: center
+      width: 100%
+      height: 100vh
+
+      .configure-border-1
+        position: absolute
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: #ffab91
+        animation: configure-clockwise 3s ease-in-out 0s infinite alternate
+
+      .configure-border-2
+        left: -115px
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: rgb(63, 249, 220)
+        transform: rotate(45deg)
+        animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
+
+      .loading-word
+        position: absolute
+        color: var(--preloader-color)
+        font-size: 16px
+
+      .configure-core
+        width: 100%
+        height: 100%
+        background-color: var(--preloader-bg)
+
+    &.loaded
+      .loading-left-bg
+        transition: all .5s
+        transform: translate(-100%, 0)
+
+      .loading-right-bg
+        transition: all .5s
+        transform: translate(100%, 0)
+
+      .spinner-box
+        display: none
+
+  @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-xclockwise
+    0%
+      transform: rotate(45deg)
+
+    25%
+      transform: rotate(-45deg)
+
+    50%
+      transform: rotate(-135deg)
+
+    75%
+      transform: rotate(-225deg)
+
+    100%
+      transform: rotate(-315deg)
diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl
new file mode 100644
index 0000000..6d729e3
--- /dev/null
+++ b/source/css/_layout/pagination.styl
@@ -0,0 +1,83 @@
+#pagination
+  .pagination
+    margin-top: 20px
+    text-align: center
+
+  .page-number
+    &.current
+      background: $theme-paginator-color
+      color: var(--white)
+
+  .pagination-info
+    position: absolute
+    top: 50%
+    padding: 20px 40px
+    width: 100%
+    transform: translate(0, -50%)
+
+  .prev_info,
+  .next_info
+    @extend .limit-one-line
+    color: var(--white)
+    font-weight: 500
+
+  .next-post
+    .pagination-info
+      text-align: right
+
+  .pull-full
+    width: 100% !important
+
+  .prev-post .label,
+  .next-post .label
+    color: var(--light-grey)
+    text-transform: uppercase
+    font-size: 90%
+
+  .prev-post,
+  .next-post
+    @extend .postImgHover
+    width: 50%
+
+    +maxWidth768()
+      width: 100%
+
+    a
+      position: relative
+      display: block
+      overflow: hidden
+      height: 150px
+
+  &.pagination-post
+    overflow: hidden
+    margin-top: 40px
+    width: 100%
+    background: $dark-black
+
+.layout
+  & > .recent-posts
+    .pagination
+      & > *
+        display: inline-block
+        margin: 0 6px
+        width: w = 2.5em
+        height: w
+        line-height: w
+
+      & > *:not(.space)
+        @extend .cardHover
+
+        &:hover
+          background: var(--btn-hover-color)
+          color: var(--btn-color)
+
+  & > div:not(.recent-posts)
+    .pagination
+      .page-number
+        display: inline-block
+        margin: 0 4px
+        min-width: w = 24px
+        height: w
+        text-align: center
+        line-height: w
+        cursor: pointer
diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl
new file mode 100644
index 0000000..8b69a69
--- /dev/null
+++ b/source/css/_layout/post.styl
@@ -0,0 +1,261 @@
+beautify()
+  headStyle(fontsize)
+    padding-left: unit(fontsize + 12, 'px')
+
+    &:before
+      margin-left: unit((-(fontsize + 6)), 'px')
+      font-size: unit(fontsize, 'px')
+
+    &:hover
+      padding-left: unit(fontsize + 18, 'px')
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    transition: all .2s ease-out
+
+    &:before
+      position: absolute
+      top: calc(50% - 7px)
+      color: $title-prefix-icon-color
+      content: $title-prefix-icon
+      line-height: 1
+      transition: all .2s ease-out
+      @extend .fontawesomeIcon
+
+    &:hover
+      &:before
+        color: $light-blue
+
+  h1
+    headStyle(20)
+
+  h2
+    headStyle(18)
+
+  h3
+    headStyle(16)
+
+  h4
+    headStyle(14)
+
+  h5
+    headStyle(12)
+
+  h6
+    headStyle(12)
+
+  ol,
+  ul
+    p
+      margin: 0 0 8px
+
+  li
+    &::marker
+      color: $light-blue
+      font-weight: 600
+      font-size: 1.05em
+
+    &:hover
+      &::marker
+        color: var(--pseudo-hover)
+
+  ul > li
+    list-style-type: circle
+
+#article-container
+  word-wrap: break-word
+  overflow-wrap: break-word
+
+  a
+    color: $theme-link-color
+
+    &:hover
+      text-decoration: underline
+
+  img
+    display: block
+    margin: 0 auto 20px
+    max-width: 100%
+    transition: filter 375ms ease-in .2s
+
+  p
+    margin: 0 0 16px
+
+  iframe
+    margin: 0 0 20px
+
+  kbd
+    margin: 0 3px
+    padding: 3px 5px
+    border: 1px solid #b4b4b4
+    border-radius: 3px
+    background-color: #f8f8f8
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset
+    color: #34495e
+    white-space: nowrap
+    font-weight: 600
+    font-size: .9em
+    font-family: Monaco, 'Ubuntu Mono', monospace
+    line-height: 1em
+
+  if hexo-config('anchor.button.enable')
+    a.headerlink
+      &:after
+        @extend .fontawesomeIcon
+        float: right
+        color: var(--headline-presudo)
+        content: $archor-button-icon
+        font-size: .95em
+        transition: all .3s
+
+      &:hover
+        &:after
+          color: var(--pseudo-hover)
+
+    if !hexo-config('anchor.button.always_show')
+      a.headerlink
+        &:after
+          opacity: 0
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
+        &:hover
+          a.headerlink
+            &:after
+              opacity: 1
+
+  ol,
+  ul
+    ol,
+    ul
+      padding-left: 20px
+
+    li
+      margin: 4px 0
+
+    p
+      margin: 0 0 8px
+
+  if hexo-config('beautify.enable')
+    if hexo-config('beautify.field') == 'site'
+      beautify()
+    else if hexo-config('beautify.field') == 'post'
+      &.post-content
+        beautify()
+
+  > :last-child
+    margin-bottom: 0 !important
+
+#post
+  .tag_share
+    &:after
+      display: block
+      clear: both
+      content: ''
+
+    .post-meta
+      &__tag-list
+        display: inline-block
+
+      &__tags
+        display: inline-block
+        margin: 8px 8px 8px 0
+        padding: 0 12px
+        width: fit-content
+        border: 1px solid $light-blue
+        border-radius: 12px
+        color: $light-blue
+        font-size: .85em
+        transition: all .2s ease-in-out
+
+        &:hover
+          background: $light-blue
+          color: var(--white)
+
+    .post_share
+      display: inline-block
+      float: right
+      margin: 8px 0 0
+      width: fit-content
+
+      .social-share
+        font-size: .85em
+
+        .social-share-icon
+          margin: 0 4px
+          width: w = 1.85em
+          height: w
+          font-size: 1.2em
+          line-height: w
+
+  .post-copyright
+    position: relative
+    margin: 40px 0 10px
+    padding: 10px 16px
+    border: 1px solid var(--light-grey)
+    transition: box-shadow .3s ease-in-out
+    overflow: hidden
+    border-radius: 12px!important
+    background-color: rgb(239 241 243)
+
+    &:before
+      position absolute
+      right -26px
+      top -120px
+      content '\f25e'
+      font-size 200px
+      font-family 'Font Awesome 5 Brands'
+      opacity .2
+
+    &:hover
+      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
+
+    .post-copyright
+      &-meta
+        color: $light-blue
+        font-weight: bold
+
+      &-info
+        padding-left: 6px
+
+        a
+          text-decoration: none
+          word-break: break-word
+
+          &:hover
+            text-decoration: none
+
+.post-copyright-cc-info
+  color: $theme-color;
+
+  .post-outdate-notice
+    position: relative
+    margin: 0 0 20px
+    padding: .5em 1.2em
+    border-radius: 3px
+    background-color: $noticeOutdate-bg
+    color: $noticeOutdate-color
+
+    if hexo-config('noticeOutdate.style') == 'flat'
+      padding: .5em 1em .5em 2.6em
+      border-left: 5px solid $noticeOutdate-border
+
+      &:before
+        @extend .fontawesomeIcon
+        position: absolute
+        top: 50%
+        left: .9em
+        color: $noticeOutdate-border
+        content: '\f071'
+        transform: translateY(-50%)
+
+  .ads-wrap
+    margin: 40px 0
diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl
new file mode 100644
index 0000000..e064202
--- /dev/null
+++ b/source/css/_layout/relatedposts.styl
@@ -0,0 +1,43 @@
+.relatedPosts
+  margin-top: 40px
+
+  & > .headline
+    margin-bottom: 5px
+    font-weight: 700
+    font-size: 1.43em
+
+  & > .relatedPosts-list
+    & > div
+      position: relative
+      display: inline-block
+      overflow: hidden
+      margin: 3px
+      width: calc(33.333% - 6px)
+      height: 200px
+      background: $dark-black
+      vertical-align: bottom
+      @extend .postImgHover
+
+      +maxWidth768()
+        margin: 2px
+        width: calc(50% - 4px)
+        height: 150px
+
+      +maxWidth600()
+        width: calc(100% - 4px)
+
+    .content
+      position: absolute
+      top: 50%
+      padding: 0 20px
+      width: 100%
+      transform: translate(0, -50%)
+
+      .date
+        color: var(--light-grey)
+        font-size: 90%
+
+      .title
+        @extend .limit-more-line
+        color: var(--white)
+        -webkit-line-clamp: 2
diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl
new file mode 100644
index 0000000..e570967
--- /dev/null
+++ b/source/css/_layout/reward.styl
@@ -0,0 +1,74 @@
+.post-reward
+  position: relative
+  margin-top: 80px
+  width: 100%
+  text-align: center
+  pointer-events: none
+
+  & > *
+    pointer-events: auto
+
+  .reward-button
+    display: inline-block
+    padding: 4px 24px
+    background: var(--btn-bg)
+    color: var(--btn-color)
+    cursor: pointer
+
+  &:hover
+    .reward-button
+      background: var(--btn-hover-color)
+
+    & > .reward-main
+      display: block
+
+  .reward-main
+    position: absolute
+    bottom: 40px
+    left: 0
+    z-index: 100
+    display: none
+    padding: 0 0 15px
+    width: 100%
+
+    .reward-all
+      display: inline-block
+      margin: 0
+      padding: 20px 10px
+      border-radius: 4px
+      background: var(--reward-pop)
+
+      &: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
+          width: 130px
+          color: $reward-pop-up-color
diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl
new file mode 100644
index 0000000..6daea56
--- /dev/null
+++ b/source/css/_layout/rightside.styl
@@ -0,0 +1,49 @@
+#rightside
+  position: fixed
+  right: -48px
+  bottom: $rightside-bottom
+  z-index: 100
+  opacity: 0
+  transition: all .5s
+
+  #rightside-config-hide
+    height: 0
+    opacity: 0
+    transition: transform .4s
+    transform: translate(45px, 0)
+
+    &.show
+      height: auto
+      opacity: 1
+      transform: translate(0, 0)
+
+    &.status
+      height: auto
+      opacity: 1
+
+  & > div
+    & > button,
+    & > a
+      display: block
+      margin-bottom: 5px
+      width: w = 35px
+      height: w
+      border-radius: 5px
+      background-color: var(--btn-bg)
+      color: var(--btn-color)
+      text-align: center
+      font-size: 16px
+      line-height: w
+
+      &:hover
+        background-color: var(--btn-hover-color)
+
+  #mobile-toc-button
+    display: none
+
+    +maxWidth900()
+      display: block
+
+  +maxWidth900()
+    #hide-aside-btn
+      display: none
diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl
new file mode 100644
index 0000000..2e38ee8
--- /dev/null
+++ b/source/css/_layout/sidebar.styl
@@ -0,0 +1,68 @@
+#sidebar
+  #menu-mask
+    position: fixed
+    z-index: 102
+    display: none
+    width: 100%
+    height: 100%
+    background: alpha($dark-black, .8)
+
+  #sidebar-menus
+    position: fixed
+    top: 0
+    right: -($sidebar-width)
+    z-index: 103
+    overflow-x: hidden
+    overflow-y: auto
+    width: $sidebar-width
+    height: 100%
+    background: var(--sidebar-bg)
+    transition: all .5s
+
+    &.open
+      transform: translate3d(-100%, 0, 0)
+
+    & > .avatar-img
+      margin: 20px auto
+
+    .sidebar-site-data
+      padding: 0 10px
+
+    hr
+      margin: 20px auto
+
+    .menus_items
+      padding: 0 10px 40px
+
+      .site-page
+        @extend .limit-one-line
+        position: relative
+        display: block
+        padding: 6px 30px 6px 22px
+        color: var(--font-color)
+        font-size: 1.15em
+
+        &:hover
+          background: var(--text-bg-hover)
+
+        i:first-child
+          width: 15%
+          text-align: left
+
+        &.group
+          & > i:last-child
+            position: absolute
+            top: .78em
+            right: 18px
+            transition: transform .3s
+
+          &.hide
+            & > i:last-child
+              transform: rotate(90deg)
+
+            & + .menus_item_child
+              display: none
+
+      .menus_item_child
+        margin: 0
+        list-style: none
\ No newline at end of file
diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl
new file mode 100644
index 0000000..bc2bd51
--- /dev/null
+++ b/source/css/_layout/third-party.styl
@@ -0,0 +1,116 @@
+#vcomment
+  font-size: 1.1em
+
+  .vbtn
+    border: none
+    background: var(--btn-bg)
+    color: var(--btn-color)
+
+    &:hover
+      background: var(--btn-hover-color)
+
+  .vimg
+    transition: all .3s
+
+    &:hover
+      transform: rotate(360deg)
+
+  .vcards .vcard .vcontent.expand
+    &:before,
+    &:after
+      z-index: 22
+
+#waline-wrap
+  --waline-font-size: 1.1em
+  --waline-theme-color: $button-bg
+  --waline-active-color: $button-hover-color
+
+  .wl-comment-actions > button:not(last-child)
+    padding-right: 4px
+
+if hexo-config('valine.bg')
+  #vcomment
+    textarea
+      background: url(hexo-config('valine.bg')) 100% 100% no-repeat
+
+      &:focus
+        background-image: none
+
+if hexo-config('waline.bg')
+  #waline-wrap
+    textarea
+      background: url(hexo-config('waline.bg')) 100% 100% no-repeat
+
+      &:focus
+        background-image: none
+
+.fireworks
+  position: fixed
+  top: 0
+  left: 0
+  z-index: $fireworks-zIndex
+  pointer-events: none
+
+.medium-zoom-image--opened
+  z-index: 99999 !important
+  margin: 0 !important
+
+.medium-zoom-overlay
+  z-index: 99999 !important
+
+.mermaid-wrap
+  margin: 0 0 20px
+  text-align: center
+
+  & > svg
+    height: 100%
+
+.utterances,
+.fb-comments iframe
+  width: 100% !important
+
+#gitalk-container
+  .gt-meta
+    margin: 0 0 .8em
+    padding: 6px 0 16px
+
+.katex-wrap
+  overflow: auto
+
+  if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
+    &::-webkit-scrollbar
+      display: none
+
+// Mathjax
+.mathjax-overflow
+  overflow-x: auto
+  overflow-y: hidden
+
+span.mathjax-overflow
+  display: inline-block
+  padding: 0 2px
+  max-width: 100%
+  vertical-align: bottom
+
+.aplayer
+  color: $font-black
+
+#article-container
+  .aplayer
+    margin: 0 0 20px
+
+    if hexo-config('beautify.enable')
+      ol,
+      ul
+        margin: 0
+        padding: 0
+
+        li
+          margin: 0
+          padding: 0 15px
+
+          &:before
+            content: none
+
+.snackbar-css
+  border-radius: 5px !important
\ No newline at end of file
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
new file mode 100644
index 0000000..0eb9108
--- /dev/null
+++ b/source/css/_mode/darkmode.styl
@@ -0,0 +1,150 @@
+if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
+  [data-theme='dark']
+    --global-bg: darken(#121212, 2)
+    --font-color: alpha(#FFFFFF, .7)
+    --hr-border: alpha(#FFFFFF, .4)
+    --hr-before-color: alpha(#FFFFFF, .7)
+    --search-bg: #121212
+    --search-input-color: alpha(#FFFFFF, .7)
+    --search-result-title: alpha(#FFFFFF, .9)
+    --preloader-bg: darken(#121212, 2)
+    --preloader-color: alpha(#FFFFFF, .7)
+    --tab-border-color: #2c2c2c
+    --tab-botton-bg: #2c2c2c
+    --tab-botton-color: alpha(#FFFFFF, .7)
+    --tab-button-hover-bg: lighten(#121212, 15)
+    --tab-button-active-bg: #121212
+    --card-bg: #121212
+    --sidebar-bg: #121212
+    --btn-hover-color: lighten(#121212, 40)
+    --btn-color: alpha(#FFFFFF, .7)
+    --btn-bg: lighten(#121212, 5)
+    --text-bg-hover: lighten(#121212, 15)
+    --light-grey: alpha(#FFFFFF, .7)
+    --dark-grey: alpha(#FFFFFF, .2)
+    --white: alpha(#FFFFFF, .9)
+    --text-highlight-color: alpha(#FFFFFF, .9)
+    --blockquote-color: alpha(#FFFFFF, .7)
+    --blockquote-bg: lighten(#121212, 10)
+    --reward-pop: lighten(#121212, 10)
+    --toc-link-color: alpha(#FFFFFF, .6)
+    --hl-color: alpha(#FFFFFF, .7)
+    --hl-bg: lighten(#121212, 2)
+    --hltools-bg: lighten(#121212, 3)
+    --hltools-color: #90a4ae
+    --hlnumber-bg: lighten(#121212, 2)
+    --hlnumber-color: alpha(#FFFFFF, .4)
+    --hlscrollbar-bg: lighten(#121212, 5)
+    --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
+    --scrollbar-color: lighten(#121212, 5)
+    --timeline-bg: lighten(#121212, 5)
+
+    #web_bg:before,
+    #footer:before,
+    #page-header:before
+      position: absolute
+      width: 100%
+      height: 100%
+      background-color: alpha($dark-black, .7)
+      content: ''
+
+    #article-container
+      code
+        background: #2c2c2c
+
+      pre > code
+        background: lighten(#121212, 2)
+
+      figure.highlight
+        box-shadow: none
+
+      .note
+        code
+          background: $code-background
+
+      .aplayer
+        filter: brightness(.8)
+
+      kbd
+        border-color: #696969
+        background-color: #525252
+        color: #e2f1ff
+
+    // 頭部
+    #page-header
+      &.nav-fixed > #nav,
+      &.not-top-img > #nav
+        background: alpha(#121212, .8)
+        box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+
+    #post-comment
+      #comment-switch
+        if hexo-config('comments.text')
+          background: #2c2c2c !important
+
+        .switch-btn
+          filter: brightness(.8)
+
+    // note
+    if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
+      .note
+        filter: brightness(.8)
+
+    // hide-tags
+    .hide-button,
+    .btn-beautify,
+    .hl-label,
+    .post-outdate-notice,
+    .error-img,
+    #article-container iframe,
+    .gist,
+    .ads-wrap
+      filter: brightness(.8)
+
+    img
+      if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
+        filter: blur(0) brightness(.8)
+      else
+        filter: brightness(.8)
+
+    #aside-content .aside-list > .aside-list-item:not(:last-child)
+      border-bottom: 1px dashed alpha(#FFFFFF, .1)
+
+    // Gitalk
+    #gitalk-container
+      filter: brightness(.8)
+
+      svg
+        fill: alpha(#FFFFFF, .9) !important
+
+    // Disqusjs 反代模式下的適配
+    #disqusjs
+      #dsqjs
+        &:hover,
+        &:focus,
+        .dsqjs-tab-active,
+        .dsqjs-no-comment
+          color: alpha(#FFFFFF, .7)
+
+        .dsqjs-order-label
+          background-color: lighten(#121212, 5)
+
+        .dsqjs-post-body
+          color: alpha(#FFFFFF, .7)
+
+          code,
+          pre
+            background: #2c2c2c
+
+          blockquote
+            color: alpha(#FFFFFF, .7)
+
+    #artitalk_main #lazy
+      background: #121212
+
+    #operare_artitalk .c2
+      background: #121212
+
+    #card-toc
+      +maxWidth900()
+        background: lighten(#121212, 5)
\ No newline at end of file
diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl
new file mode 100644
index 0000000..88da5d3
--- /dev/null
+++ b/source/css/_mode/readmode.styl
@@ -0,0 +1,197 @@
+if hexo-config('readmode')
+  .read-mode
+    --font-color: #4c4948
+    --readmode-light-color: #fff
+    --white: #4c4948
+    --light-grey: #4c4948
+    --gray: #d6dbdf
+    --hr-border: #d6dbdf
+    --hr-before-color: darken(#d6dbdf, 10)
+    --highlight-bg: #f7f7f7
+    --exit-btn-bg: #C0C0C0
+    --exit-btn-color: #fff
+    --exit-btn-hover: darken(#C0C0C0, 20)
+    --pseudo-hover: none
+
+  [data-theme='dark']
+    .read-mode
+      --font-color: rgba(255, 255, 255, .7)
+      --readmode-light-color: #0d0d0d
+      --white: rgba(255, 255, 255, .9)
+      --light-grey: rgba(255, 255, 255, .7)
+      --gray: rgba(255, 255, 255, .7)
+      --hr-border: rgba(255, 255, 255, .5)
+      --hr-before-color: rgba(255, 255, 255, .7)
+      --highlight-bg: #171717
+      --exit-btn-bg: #1f1f1f
+      --exit-btn-color: rgba(255, 255, 255, .9)
+      --exit-btn-hover: lighten(#1f1f1f, 20)
+
+  .read-mode
+    background: var(--readmode-light-color)
+
+    .exit-readmode
+      position: fixed
+      top: 30px
+      right: 30px
+      z-index: 100
+      width: 40px
+      height: 40px
+      border-radius: 8px
+      background: var(--exit-btn-bg)
+      color: var(--exit-btn-color)
+      font-size: 16px
+      transition: background .3s
+
+      +maxWidth768()
+        top: initial
+        bottom: 30px
+
+      &:hover
+        background: var(--exit-btn-hover)
+
+    #aside-content
+      display: none
+
+    #page-header.post-bg
+      background-color: transparent
+      background-image: none !important
+
+      &:before
+        opacity: 0
+
+      & > #post-info
+        text-align: center
+
+    #post
+      margin: 0 auto
+      background: transparent
+      box-shadow: none
+
+      &:hover
+        box-shadow: none
+
+    & > canvas
+      display: none !important
+
+    .highlight-tools,
+    #footer,
+    #post > *:not(#post-info):not(.post-content),
+    #nav,
+    .post-outdate-notice,
+    #web_bg,
+    #rightside,
+    .not-top-img
+      display: none !important
+
+    #article-container
+      a
+        color: #99a9bf
+
+      pre,
+      .highlight:not(.js-file-line-container)
+        background: var(--highlight-bg) !important
+
+        *
+          color: var(--font-color) !important
+
+      figure.highlight
+        border-radius: 0 !important
+        box-shadow: none !important
+
+        & > :not(.highlight-tools)
+          display: block !important
+
+        .line:before
+          color: var(--font-color) !important
+
+        .hljs
+          background: var(-highlight-bg) !important
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
+        padding: 0
+
+        &:before
+          content: ''
+
+        &:hover
+          padding: 0
+
+      ul,
+      li,
+      ol
+        &:hover:before
+          transform: none !important
+
+      ol,
+      li
+        &:before
+          background: transparent !important
+          color: var(--font-color) !important
+
+      ul
+        >li
+          &:before
+            border-color: var(--gray) !important
+
+      .tabs
+        border: 2px solid var(--tab-border-color)
+
+        > .nav-tabs
+          background: transparent
+
+          > .tab
+            border-bottom: 0
+
+            button
+              border-top: none !important
+              background: transparent
+
+              &:hover
+                background: none !important
+
+            &.active
+              button
+                text-decoration: underline
+
+        > .tab-contents .tab-item-content.active
+          animation: none
+
+      code
+        color: var(--font-color)
+
+      blockquote
+        border-color: var(--gray)
+        background-color: var(--readmode-light-color)
+
+      kbd
+        border: 1px solid var(--gray)
+        background-color: transparent
+        box-shadow: none
+        color: var(--font-color)
+
+      .hide-toggle
+        border: 1px solid var(--gray) !important
+
+      .hide-button,
+      .btn-beautify,
+      .hl-label
+        border: 1px solid var(--gray) !important
+        background: var(--readmode-light-color) !important
+        color: var(--font-color) !important
+
+      .note
+        border: 2px solid var(--gray)
+        border-left-color: var(--gray) !important
+        filter: none
+        background-color: var(--readmode-light-color) !important
+        color: var(--font-color)
+
+        &:before,
+        .note-icon
+          color: var(--font-color)
diff --git a/source/css/_page/404.styl b/source/css/_page/404.styl
new file mode 100644
index 0000000..ea8e056
--- /dev/null
+++ b/source/css/_page/404.styl
@@ -0,0 +1,69 @@
+if hexo-config('error_404.enable')
+  .error404
+    #error-wrap
+      position: absolute
+      top: 50%
+      right: 0
+      left: 0
+      margin: 0 auto
+      padding: 60px 20px 0
+      max-width: 1000px
+      transform: translate(0, -50%)
+
+      .error-content
+        @extend .cardHover
+        overflow: hidden
+        margin: 0 20px
+        height: 360px
+
+        +maxWidth768()
+          margin: 0
+          height: 500px
+
+        .error-img
+          display: inline-block
+          overflow: hidden
+          width: 50%
+          height: 100%
+
+          +maxWidth768()
+            width: 100%
+            height: 45%
+
+          img
+            @extend .imgHover
+            background-color: $theme-color
+
+        .error-info
+          display: inline-flex
+          flex-direction: column
+          justify-content: center
+          align-content: center
+          width: 50%
+          height: 100%
+          vertical-align: top
+          text-align: center
+
+          if $site-name-font
+            font-family: $site-name-font
+
+          +maxWidth768()
+            width: 100%
+            height: 55%
+
+          .error_title
+            margin-top: -.6em
+            font-size: 9em
+
+            +maxWidth768()
+              font-size: 8em
+
+          .error_subtitle
+            @extend .limit-more-line
+            margin-top: -3em
+            word-break: break-word
+            font-size: 1.6em
+            -webkit-line-clamp: 2
+
+    & + #rightside
+      display: none
\ No newline at end of file
diff --git a/source/css/_page/archives.styl b/source/css/_page/archives.styl
new file mode 100644
index 0000000..4575fbb
--- /dev/null
+++ b/source/css/_page/archives.styl
@@ -0,0 +1,109 @@
+.article-sort
+  margin-left: 10px
+  padding-left: 20px
+  border-left: 2px solid lighten($light-blue, 20)
+
+  &-title
+    position: relative
+    margin-left: 10px
+    padding-bottom: 20px
+    padding-left: 20px
+    font-size: 1.72em
+
+    &:hover
+      &:before
+        border-color: var(--pseudo-hover)
+
+    &:before
+      position: absolute
+      top: calc(((100% - 36px) / 2))
+      left: -9px
+      z-index: 1
+      width: w = 10px
+      height: h = w
+      border: .5 * w solid $light-blue
+      border-radius: w
+      background: var(--card-bg)
+      content: ''
+      line-height: h
+      transition: all .2s ease-in-out
+
+    &:after
+      position: absolute
+      bottom: 0
+      left: 0
+      z-index: 0
+      width: 2px
+      height: 1.5em
+      background: lighten($light-blue, 20)
+      content: ''
+
+  &-item
+    position: relative
+    display: flex
+    align-items: center
+    margin: 0 0 20px 10px
+    transition: all .2s ease-in-out
+
+    &:hover
+      &:before
+        border-color: var(--pseudo-hover)
+
+    &:before
+      $w = 6px
+      position: absolute
+      left: calc(-20px - 17px)
+      width: w = $w
+      height: h = w
+      border: .5 * w solid $light-blue
+      border-radius: w
+      background: var(--card-bg)
+      content: ''
+      transition: all .2s ease-in-out
+
+    &.no-article-cover
+      height: 80px
+
+      .article-sort-item-info
+        padding: 0
+
+    &.year
+      font-size: 1.43em
+
+      &:hover
+        &:before
+          border-color: $light-blue
+
+      &:before
+        border-color: var(--pseudo-hover)
+
+    &-time
+      color: $theme-meta-color
+      font-size: 95%
+
+      time
+        padding-left: 6px
+        cursor: default
+
+    &-title
+      @extend .limit-more-line
+      color: var(--font-color)
+      font-size: 1.1em
+      transition: all .3s
+      -webkit-line-clamp: 2
+
+      &:hover
+        color: $text-hover
+        transform: translateX(10px)
+
+    &-img
+      overflow: hidden
+      width: 80px
+      height: 80px
+
+      img
+        @extend .imgHover
+
+    &-info
+      flex: 1
+      padding: 0 16px
diff --git a/source/css/_page/categories.styl b/source/css/_page/categories.styl
new file mode 100644
index 0000000..8b80107
--- /dev/null
+++ b/source/css/_page/categories.styl
@@ -0,0 +1,37 @@
+.category-lists
+  .category-title
+    font-size: 2.57em
+
+    +maxWidth768()
+      font-size: 2em
+
+  .category-list
+    margin-bottom: 0
+
+    a
+      color: var(--font-color)
+
+      &:hover
+        color: $text-hover
+
+    .category-list-count
+      margin-left: 8px
+      color: $theme-meta-color
+
+      &:before
+        content: '('
+
+      &:after
+        content: ')'
+
+  ul
+    padding: 0 0 0 20px
+    @extend .list-beauty
+
+    ul
+      padding-left: 4px
+
+    li
+      position: relative
+      margin: 6px 0
+      padding: .12em .4em .12em 1.4em
diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl
new file mode 100644
index 0000000..3356d17
--- /dev/null
+++ b/source/css/_page/common.styl
@@ -0,0 +1,60 @@
+#body-wrap
+  display: flex
+  flex-direction: column
+  min-height: 100vh
+
+.layout
+  display: flex
+  flex: 1 auto
+  margin: 0 auto
+  padding: 40px 15px
+  max-width: 1200px
+  width: 100%
+
+  +maxWidth900()
+    flex-direction: column
+
+  +maxWidth768()
+    padding: 20px 5px
+
+  +minWidth2000()
+    max-width: 1500px
+
+  & > div:first-child:not(.recent-posts)
+    @extend .cardHover
+    align-self: flex-start
+    padding: 50px 40px
+
+    +maxWidth768()
+      padding: 36px 14px
+
+  & > div:first-child
+    width: 74%
+    transition: all .3s
+
+    +maxWidth900()
+      width: 100% !important
+
+    if hexo-config('aside.position') == 'left'
+      +minWidth900()
+        order: 2
+
+  // 隱藏aside
+  &.hide-aside
+    max-width: 1000px
+
+    +minWidth2000()
+      max-width: 1300px
+
+    & > div
+      width: 100% !important
+
+// for apple device
+.apple
+  #page-header.full_page
+    background-attachment: scroll !important
+
+  .recent-post-item,
+  .avatar-img,
+  .flink-item-icon
+    transform: translateZ(0)
diff --git a/source/css/_page/flink.styl b/source/css/_page/flink.styl
new file mode 100644
index 0000000..57dd50a
--- /dev/null
+++ b/source/css/_page/flink.styl
@@ -0,0 +1,87 @@
+#article-container
+  .flink
+    margin-bottom: 20px
+
+    .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(100% / 3 - 15px)
+        height: 90px
+        border-radius: 8px
+        line-height: 17px
+        -webkit-transform: translateZ(0)
+
+        +maxWidth1024()
+          width: calc(50% - 15px) !important
+
+        +maxWidth600()
+          width: calc(100% - 15px) !important
+
+        &:hover
+          .flink-item-icon
+            margin-left: -10px
+            width: 0
+
+        &:before
+          position: absolute
+          top: 0
+          right: 0
+          bottom: 0
+          left: 0
+          z-index: -1
+          background: var(--text-bg-hover)
+          content: ''
+          transition: transform .3s ease-out
+          transform: scale(0)
+
+        &:hover:before,
+        &:focus:before,
+        &:active:before
+          transform: scale(1)
+
+        a
+          color: var(--font-color)
+          text-decoration: none
+
+          .flink-item-icon
+            float: left
+            overflow: hidden
+            margin: 15px 10px
+            width: 60px
+            height: 60px
+            border-radius: 35px
+            transition: width .3s ease-out
+
+            img
+              width: 100%
+              height: 100%
+              transition: filter 375ms ease-in .2s, transform .3s
+              object-fit: cover
+
+          .img-alt
+            display: none
+
+    .flink-item-name
+      @extend .limit-one-line
+      padding: 16px 10px 0 0
+      height: 40px
+      font-weight: bold
+      font-size: 1.43em
+
+    .flink-item-desc
+      @extend .limit-one-line
+      padding: 16px 10px 16px 0
+      height: 50px
+      font-size: .93em
+
+    .flink-name
+      margin-bottom: 5px
+      font-weight: bold
+      font-size: 1.5em
\ 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 0000000..dcfe427
--- /dev/null
+++ b/source/css/_page/homepage.styl
@@ -0,0 +1,113 @@
+#recent-posts
+  & > .recent-post-item
+    margin-top: 20px
+
+  & > .recent-post-item
+    @extend .cardHover
+    display: flex
+    flex-direction: row
+    align-items: center
+    overflow: hidden
+    height: 18em
+
+    +maxWidth768()
+      flex-direction: column
+      height: auto
+
+    &:hover
+      img.post_bg
+        transform: scale(1.1)
+
+    &.ads-wrap
+      display: block !important
+      height: auto !important
+
+    .post_cover
+      overflow: hidden
+      width: 44%
+      height: 100%
+
+      +maxWidth768()
+        width: 100%
+        height: 230px
+
+      img.post_bg
+        @extend .imgHover
+
+      &.right
+        order: 1
+
+        +maxWidth768()
+          order: 0
+
+    & >.recent-post-info
+      padding: 0 40px
+      width: 57%
+
+      +maxWidth768()
+        padding: 20px 20px 30px
+        width: 100%
+
+      &.no-cover
+        width: 100%
+
+        +maxWidth768()
+          padding: 30px 20px
+
+      & > .article-title
+        @extend .limit-more-line
+        color: var(--text-highlight-color)
+        font-size: 1.72em
+        line-height: 1.4
+        transition: all .2s ease-in-out
+        -webkit-line-clamp: 2
+
+        +maxWidth768()
+          font-size: 1.43em
+
+        &:hover
+          color: $text-hover
+
+      & > .article-meta-wrap
+        margin: 6px 0
+        color: $theme-meta-color
+        font-size: 90%
+
+        & > .post-meta-date
+          cursor: default
+
+        .sticky
+          color: $sticky-color
+
+        i
+          margin: 0 4px 0 0
+
+        .fa-spinner
+          margin: 0
+
+        .article-meta-label
+          if hexo-config('post_meta.page.label')
+            padding-right: 4px
+          else
+            display: none
+
+        .article-meta-separator
+          margin: 0 6px
+
+        .article-meta-link
+          margin: 0 4px
+
+        if hexo-config('post_meta.page.date_format') == 'relative'
+          time
+            display: none
+
+        a
+          color: $theme-meta-color
+
+          &:hover
+            color: $text-hover
+            text-decoration: underline
+
+      & > .content
+        @extend .limit-more-line
+        -webkit-line-clamp: 2
\ No newline at end of file
diff --git a/source/css/_page/tags.styl b/source/css/_page/tags.styl
new file mode 100644
index 0000000..bce33ae
--- /dev/null
+++ b/source/css/_page/tags.styl
@@ -0,0 +1,23 @@
+.tag-cloud
+  &-list
+    a
+      display: inline-block
+      padding: 0 8px
+      transition: all .3s
+
+      &:hover
+        color: $text-hover !important
+        transform: scale(1.1)
+
+      +maxWidth768()
+        zoom: .85
+
+  &-title
+    font-size: 2.57em
+
+    +maxWidth768()
+      font-size: 2em
+
+h1.page-title
+  & + .tag-cloud-list
+    text-align: left
diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl
new file mode 100644
index 0000000..e9f06ce
--- /dev/null
+++ b/source/css/_search/algolia.styl
@@ -0,0 +1,91 @@
+#algolia-search
+  .search-dialog
+    .ais-SearchBox
+      input
+        padding: 5px 14px
+        width: 100%
+        outline: none
+        border: 2px solid $search-color
+        border-radius: 40px
+        background: var(--search-bg)
+        color: var(--search-input-color)
+
+    .ais-Hits-list
+      margin: 0
+      padding: 0
+      @extend .list-beauty
+
+      a
+        color: var(--search-result-title)
+
+        &:hover
+          color: $search-color
+
+      mark
+        background: transparent
+        color: $search-keyword-highlight
+        font-weight: bold
+
+    .algolia-hit-item-content
+      margin: 0 0 8px
+      word-break: break-all
+
+    .ais-Pagination
+      margin: 20px 0 0
+      padding: 0
+      text-align: center
+
+      .ais-Pagination-list
+        margin: 0
+        padding: 0
+        list-style: none
+
+      .ais-Pagination-item
+        display: inline
+        margin: 0 4px
+        padding: 0
+
+        .ais-Pagination-link
+          display: inline-block
+          min-width: 24px
+          height: 24px
+          text-align: center
+          line-height: 24px
+
+      .ais-Pagination-item--selected
+        a
+          background: $theme-paginator-color
+          color: #eee
+          cursor: default
+
+      .ais-Pagination-item--disabled
+        visibility: hidden
+
+    .algolia-logo
+      padding-top: 2px
+      width: 80px
+      height: 30px
+
+    #algolia-hits
+      > div
+        overflow-y: scroll
+
+        +minWidth768()
+          max-height: calc(80vh - 240px)
+
+        +maxWidth768()
+          height: calc(100vh - 260px)
+
+    #algolia-info
+      div
+        display: inline
+
+      .algolia-poweredBy
+        float: right
+
+.apple
+  #algolia-search
+    #algolia-hits
+      > div
+        +maxWidth768()
+          height: calc(90vh - 260px)
diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl
new file mode 100644
index 0000000..6eea119
--- /dev/null
+++ b/source/css/_search/index.styl
@@ -0,0 +1,43 @@
+.search-dialog
+  position: fixed
+  top: 0
+  left: 0
+  z-index: 1001
+  display: none
+  padding: 20px
+  width: 100%
+  border-radius: 8px
+
+  hr
+    margin: 20px auto
+
+  .search-nav
+    margin: 0 0 14px
+    color: $search-color
+    font-size: 1.4em
+    line-height: 1
+
+    .search-dialog-title
+      margin-right: 10px
+
+    .search-close-button
+      float: right
+      color: $grey
+      transition: color .2s ease-in-out
+
+      &:hover
+        color: $search-color
+
+#search-mask
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  z-index: 1000
+  display: none
+  background: #ffffff7a
+
+[data-theme="dark"]
+  #search-mask
+    background: #0000007a
\ No newline at end of file
diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl
new file mode 100644
index 0000000..36dd38d
--- /dev/null
+++ b/source/css/_search/local-search.styl
@@ -0,0 +1,67 @@
+#local-search
+  .search-dialog
+    .local-search-box
+      margin: 0 auto
+      max-width: 100%
+      width: 100%
+
+      input
+        padding: 5px 14px
+        width: 100%
+        outline: none
+        border: 2px solid $search-color
+        border-radius: 40px
+        background: var(--search-bg)
+        color: var(--search-input-color)
+        -webkit-appearance: none
+
+    .search-wrap
+      display: none
+
+    .local-search__hit-item
+      position: relative
+      padding-left: 24px
+      line-height: 1.7
+
+      &:hover
+        &:before
+          border-color: var(--pseudo-hover)
+
+      &:before
+        $w = .5em
+        position: absolute
+        top: .45em
+        left: 0
+        width: w = $w
+        height: h = w
+        border: 3px solid $search-color
+        border-radius: w
+        background: transparent
+        content: ''
+        line-height: h
+        transition: all .2s ease-in-out
+
+      a
+        display: block
+        color: var(--search-result-title)
+        font-weight: 600
+        cursor: pointer
+
+        &:hover
+          color: $search-color
+
+      .search-result
+        margin: 0 8px 8px 0
+        word-break: break-all
+
+      .search-keyword
+        color: $search-keyword-highlight
+        font-weight: bold
+
+    .search-result-list
+      overflow-y: auto
+      max-height: calc(80vh - 130px)
+
+      +maxWidth768()
+        padding-bottom: 40px
+        max-height: 75vh !important
diff --git a/source/css/_tags/btns.styl b/source/css/_tags/btns.styl
new file mode 100644
index 0000000..43378f2
--- /dev/null
+++ b/source/css/_tags/btns.styl
@@ -0,0 +1,213 @@
+[data-theme="dark"]
+  div
+    &.btns
+      filter brightness(0.7)
+      a
+        background 0 0
+  .checkbox
+    filter brightness(0.7)
+
+div
+  &.btns
+    margin 0 -8px
+    display flex
+    flex-wrap wrap
+    align-items flex-start
+    overflow visible
+    line-height 1.8
+    b
+      font-size 0.875rem
+    &.wide
+      & > a
+        padding-left 32px
+        padding-right 32px
+    &.fill
+      & > a
+        flex-grow 1
+        width auto
+    &.around
+      justify-content space-around
+    &.center
+      justify-content center
+    &.grid2
+      & > a
+        width calc(100% / 2 - 16px)
+    &.grid3
+      & > a
+        width calc(100% / 3 - 16px)
+    &.grid4
+      & > a
+        width calc(100% / 4 - 16px)
+    &.grid5
+      & > a
+        width calc(100% / 5 - 16px)
+    a
+      transition all 0.28s ease
+      -moz-transition all 0.28s ease
+      -webkit-transition all 0.28s ease
+      -o-transition all 0.28s ease
+      margin 8px
+      margin-top calc(1.25 * 16px + 32px)
+      min-width 120px
+      font-weight bold
+      display flex
+      justify-content flex-start
+      align-content center
+      align-items center
+      flex-direction column
+      padding 8px
+      text-align center
+      background #f6f6f6
+      border-radius 4px
+      & > i
+        background #2196f3!important
+        &:first-child
+          color #fff
+          background #2196f3
+      b
+        font-weight bold
+        line-height 1.3
+      img
+        margin 0.4em auto
+      &:not([href])
+        cursor default
+        color inherit
+    a[href]:hover
+      background rgba(255, 87, 34, 0.15)
+      & > i
+        &:first-child
+          background #ff5722
+
+div.btns,
+div.btns p,
+div.btns a
+  font-size 0.8125rem
+  color #555
+
+@media screen and (max-width: 1024px)
+  div
+    &.btns
+      &.grid2
+        & > a
+          width calc(100% / 2 - 16px)
+
+@media screen and (max-width: 768px)
+  div
+    &.btns
+      &.grid2
+        & > a
+          width calc(100% / 2 - 16px)
+
+@media screen and (max-width: 500px)
+  div
+    &.btns
+      &.grid2
+        & > a
+          width calc(100% / 1 - 16px)
+
+@media screen and (max-width: 1024px)
+  div
+    &.btns
+      &.grid3
+        & > a
+          width calc(100% / 3 - 16px)
+
+@media screen and (max-width: 768px)
+  div
+    &.btns
+      &.grid3
+        & > a
+          width calc(100% / 3 - 16px)
+
+@media screen and (max-width: 500px)
+  div
+    &.btns
+      &.grid3
+        & > a
+          width calc(100% / 1 - 16px)
+
+@media screen and (max-width: 1024px)
+  div
+    &.btns
+      &.grid4
+        & > a
+          width calc(100% / 3 - 16px)
+
+@media screen and (max-width: 768px)
+  div
+    &.btns
+      &.grid4
+        & > a
+          width calc(100% / 3 - 16px)
+
+@media screen and (max-width: 500px)
+  div
+    &.btns
+      &.grid4
+        & > a
+          width calc(100% / 2 - 16px)
+
+@media screen and (max-width: 1024px)
+  div
+    &.btns
+      &.grid5
+        & > a
+          width calc(100% / 4 - 16px)
+
+@media screen and (max-width: 768px)
+  div
+    &.btns
+      &.grid5
+        & > a
+          width calc(100% / 3 - 16px)
+
+@media screen and (max-width: 500px)
+  div
+    &.btns
+      &.grid5
+        & > a
+          width calc(100% / 2 - 16px)
+
+div.btns a > img:first-child,
+div.btns a > i:first-child
+  transition all 0.28s ease
+  -moz-transition all 0.28s ease
+  -webkit-transition all 0.28s ease
+  -o-transition all 0.28s ease
+  height 64px
+  width 64px
+  box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.1)
+  margin 16px 8px 4px 8px
+  margin-top calc(-1.25 * 16px - 32px)
+  border 2px solid #fff
+  background #fff
+  line-height 60px
+  font-size 28px
+
+div.btns a > img:first-child.auto,
+div.btns a > i:first-child.auto
+  width auto
+
+div.btns a p,
+div.btns a b
+  margin 0.25em
+  font-weight normal
+  line-height 1.25
+  word-wrap break-word
+
+div.btns a[href]:hover,
+div.btns a[href]:hover b
+  color #ff5722
+
+div.btns a[href]:hover > img:first-child,
+div.btns a[href]:hover > i:first-child
+  transform scale(1.1) translateY(-8px)
+  box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.1)
+
+div.btns.circle a > img:first-child,
+div.btns.circle a > i:first-child
+  border-radius 32px
+
+div.btns.rounded a > img:first-child,
+div.btns.rounded a > i:first-child
+  border-radius 16px
diff --git a/source/css/_tags/button.styl b/source/css/_tags/button.styl
new file mode 100644
index 0000000..c4b2c3a
--- /dev/null
+++ b/source/css/_tags/button.styl
@@ -0,0 +1,55 @@
+#article-container
+  .btn-center
+    margin: 0 0 20px
+    text-align: center
+
+  .btn-beautify
+    display: inline-block
+    margin: 0 4px 6px
+    padding: 0 15px
+    background-color: var(--btn-beautify-color, $btn-default-color)
+    color: $btn-color
+    line-height: 2
+
+    for $type in $color-types
+      &.{$type}
+        --btn-beautify-color: lookup('$tagsP-' + $type + '-color')
+
+    &:hover
+      background-color: var(--btn-hover-color)
+
+    i + span
+      margin-left: 6px
+
+    &:not(.block) + .btn-beautify:not(.block)
+      margin: 0 4px 20px
+
+    &.block
+      display: block
+      margin: 0 0 20px
+      width: fit-content
+      width: -moz-fit-content
+
+      &.center
+        margin: 0 auto 20px
+
+      &.right
+        margin: 0 0 20px auto
+
+    &.larger
+      padding: 6px 15px
+
+    &:hover
+      text-decoration: none
+
+    &.outline
+      border: 1px solid transparent
+      border-color: var(--btn-beautify-color, $btn-default-color)
+      background-color: transparent
+      color: var(--btn-beautify-color, $btn-default-color)
+
+      &:hover
+        background-color: var(--btn-beautify-color, $btn-default-color)
+
+      &:hover
+        color: white !important
diff --git a/source/css/_tags/card.styl b/source/css/_tags/card.styl
new file mode 100644
index 0000000..556d297
--- /dev/null
+++ b/source/css/_tags/card.styl
@@ -0,0 +1,72 @@
+.card_box
+  display: flex
+  justify-content: space-between
+  flex-direction: column
+  background-position: center
+  background-size: cover
+  border-radius: 12px
+  position: relative
+  overflow: hidden
+  padding: 10px
+  color: #fff !important
+  margin: 10px auto
+  &::after
+    content: ''
+    position: absolute
+    height: 100%
+    width: 100%
+    left: 0
+    top: 0
+    background: rgba(0,0,0,0.1)
+    transition: .5s
+    z-index: 0
+  &:hover
+    .card_mask
+      opacity: 1
+      pointer-events: auto
+  .card_top
+    display: flex
+    z-index: 1
+    align-items: center
+    justify-content: space-between
+  .card_mask
+    position: absolute
+    pointer-events: none
+    z-index: 2
+    transition: .5s
+    opacity: 0
+    width: 100%
+    height: 100%
+    left: 0
+    top: 0
+    padding: 20px
+    background: #333
+    span
+      display: block
+      height: calc(100% - 40px)
+      overflow: auto
+    a
+      text-align: center
+      background: #fff
+      color: #333 !important
+      border-radius: 5px
+      position: absolute
+      width: calc(100% - 40px)
+      bottom: 20px
+      left: 20px
+      &:hover
+        text-decoration: none !important
+        color: white !important
+        background: #32C9EB
+
+  .card_content
+    z-index: 1
+    span
+      font-size: 18px
+      font-weight: bold
+
+[data-theme='dark']
+  .card_box
+    color: #ddd !important
+    &::after
+      background: rgba(0,0,0,0.4)
\ No newline at end of file
diff --git a/source/css/_tags/folding.styl b/source/css/_tags/folding.styl
new file mode 100644
index 0000000..1b15aeb
--- /dev/null
+++ b/source/css/_tags/folding.styl
@@ -0,0 +1,104 @@
+details
+  display: block
+  padding: 10px
+  margin: 10px-p 0
+  border-radius: 15px
+  background: var(--color-card)
+  font-size: $fontsize-list
+  trans()
+  summary
+    cursor: pointer
+    padding: 10px
+    margin: 0 - 10px
+    border-radius: 15px
+    color: black
+    font-size: 1rem
+    font-weight: bold
+    position: relative
+    line-height: normal
+    >
+      p,h1,h2,h3,h4,h5,h6
+        display: inline
+        border-bottom: none !important
+    &:hover
+      color: var(--color-p)
+      &:after
+        position: absolute
+        content: '+'
+        text-align: center
+        top: 50%
+        transform: translateY(-50%)
+        right: 10px
+
+  border: 1px solid var(--color-block)
+  >summary
+    background: var(--color-block)
+  &[blue]
+    border-color: #2196f3
+    >summary
+      background: #2196f3
+  &[cyan]
+    border-color: #1bcdfc
+    >summary
+      background: #1bcdfc
+  &[green]
+    border-color: #3dc550
+    >summary
+      background: #3dc550
+  &[yellow]
+    border-color: #ffbd2b
+    >summary
+      background: #ffbd2b
+  &[red]
+    border-color: #fe5f58
+    >summary
+      background: #fe5f58
+
+details[open]
+  border-color: alpha(blue, .2)
+  >summary
+    border-bottom: 1px solid alpha(blue, .2)
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+  &[blue]
+    border-color: #2196f3
+    >summary
+      border-bottom-color: #2196f3
+  &[cyan]
+    border-color: #1bcdfc
+    >summary
+      border-bottom-color: #1bcdfc
+  &[green]
+    border-color: #3dc550
+    >summary
+      border-bottom-color: #3dc550
+  &[yellow]
+    border-color: #ffbd2b
+    >summary
+      border-bottom-color: #ffbd2b
+  &[red]
+    border-color: #fe5f58
+    >summary
+      border-bottom-color: #fe5f58
+  >summary
+    color: black
+    margin-bottom: 0
+    &:hover
+      &:after
+        content: '-'
+  >div.content
+    padding: 10px
+    margin: 0 - 10px
+    margin-top: 0
+    p>a:hover
+      text-decoration: underline
+    >
+      p,.tabs,ul,ol,.highlight,.note,details
+        &:first-child
+          margin-top: 0
+        &:last-child
+          margin-bottom: 0
+
+details
+    margin-bottom 20px
+    box-shadow 0 0 0 1px #aaa
\ No newline at end of file
diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl
new file mode 100644
index 0000000..2be3d5d
--- /dev/null
+++ b/source/css/_tags/gallery.styl
@@ -0,0 +1,102 @@
+#article-container
+  figure.gallery-group
+    position: relative
+    float: left
+    overflow: hidden
+    margin: 6px 4px
+    width: calc(50% - 8px)
+    height: 250px
+    border-radius: 8px
+    background: $dark-black
+    -webkit-transform: translate3d(0, 0, 0)
+
+    +maxWidth600()
+      width: calc(100% - 8px)
+
+    &:hover
+      img
+        opacity: .4
+        transform: translate3d(0, 0, 0)
+
+      .gallery-group-name::after
+        transform: translate3d(0, 0, 0)
+
+      p
+        opacity: 1
+        transform: translate3d(0, 0, 0)
+
+    img
+      position: relative
+      margin: 0
+      max-width: none
+      width: calc(100% + 20px)
+      height: 250px
+      backface-visibility: hidden
+      opacity: .8
+      transition: all .3s, filter 375ms ease-in .2s
+      transform: translate3d(-10px, 0, 0)
+      object-fit: cover
+
+    figcaption
+      position: absolute
+      top: 0
+      left: 0
+      padding: 30px
+      width: 100%
+      height: 100%
+      color: $gallery-color
+      text-transform: uppercase
+      backface-visibility: hidden
+
+      & > a
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        z-index: 1000
+        opacity: 0
+
+    p
+      @extend .limit-more-line
+      margin: 0
+      padding: 8px 0 0
+      letter-spacing: 1px
+      font-size: 1.1em
+      line-height: 1.5
+      opacity: 0
+      transition: opacity .35s, transform .35s
+      transform: translate3d(100%, 0, 0)
+      -webkit-line-clamp: 4
+
+    .gallery-group-name
+      @extend .limit-more-line
+      position: relative
+      margin: 0
+      padding: 8px 0
+      font-weight: bold
+      font-size: 1.65em
+      line-height: 1.5
+      -webkit-line-clamp: 2
+
+      &:after
+        position: absolute
+        bottom: 0
+        left: 0
+        width: 100%
+        height: 2px
+        background: $gallery-color
+        content: ''
+        transition: transform .35s
+        transform: translate3d(-100%, 0, 0)
+
+  .gallery-group-main
+    overflow: auto
+    padding: 0 0 16px
+
+  .fj-gallery
+    margin: 0 0 16px
+    opacity: 0
+
+    .img-alt
+      display: none
\ No newline at end of file
diff --git a/source/css/_tags/ghcard.styl b/source/css/_tags/ghcard.styl
new file mode 100644
index 0000000..86b8d67
--- /dev/null
+++ b/source/css/_tags/ghcard.styl
@@ -0,0 +1,10 @@
+a.ghcard
+  display: inline-block
+  line-height: 0
+
+.md .ghcard-group
+  column-count: 2
+  column-gap: 0
+  margin: 0 0 - 10px * 0.5
+  .ghcard
+    margin: 10px * 0.5
diff --git a/source/css/_tags/hexo.styl b/source/css/_tags/hexo.styl
new file mode 100644
index 0000000..08cdee7
--- /dev/null
+++ b/source/css/_tags/hexo.styl
@@ -0,0 +1,30 @@
+// pullquote
+blockquote
+  &.pullquote
+    position: relative
+    max-width: 45%
+    font-size: 110%
+
+    &.left
+      float: left
+      margin: 1em .5em 0 0
+
+    &.right
+      float: right
+      margin: 1em 0 0 .5em
+
+// hexo tag video
+.video-container
+  position: relative
+  overflow: hidden
+  margin-bottom: 16px
+  padding-top: 56.25%
+  height: 0
+
+  iframe
+    position: absolute
+    top: 0
+    left: 0
+    margin-top: 0
+    width: 100%
+    height: 100%
diff --git a/source/css/_tags/hide.styl b/source/css/_tags/hide.styl
new file mode 100644
index 0000000..e16620b
--- /dev/null
+++ b/source/css/_tags/hide.styl
@@ -0,0 +1,45 @@
+// tag-hide
+.hide-inline,
+.hide-block
+  & > .hide-button
+    display: inline-block
+    padding: 5px 18px
+    background: $tag-hide-bg
+    color: var(--white)
+
+    &:hover
+      background-color: var(--btn-hover-color)
+
+    &.open
+      display: none
+
+      & + div
+        display: block
+
+      & + span
+        display: inline
+
+  & > .hide-content
+    display: none
+
+.hide-inline
+  & > .hide-button
+    margin: 0 6px
+
+  & > .hide-content
+    margin: 0 6px
+
+.hide-block
+  margin: 0 0 16px
+
+.toggle
+  margin-bottom: 20px
+  border: 1px solid $tag-hide-toggle-bg
+
+  & > .toggle-button
+    padding: 6px 15px
+    background: $tag-hide-toggle-bg
+    color: #1F2D3D
+
+  & > .toggle-content
+    margin: 30px 24px
diff --git a/source/css/_tags/inlineImg.styl b/source/css/_tags/inlineImg.styl
new file mode 100644
index 0000000..c8bb0c1
--- /dev/null
+++ b/source/css/_tags/inlineImg.styl
@@ -0,0 +1,6 @@
+#article-container
+  .inline-img
+    display: inline
+    margin: 0 3px
+    height: 1.1em
+    vertical-align: text-bottom
\ No newline at end of file
diff --git a/source/css/_tags/label.styl b/source/css/_tags/label.styl
new file mode 100644
index 0000000..d7b814e
--- /dev/null
+++ b/source/css/_tags/label.styl
@@ -0,0 +1,11 @@
+.hl-label
+  padding: 2px 4px
+  border-radius: 3px
+  color: $btn-color
+
+  &.default
+    background-color: $btn-default-color
+
+  for $type in $color-types
+    &.{$type}
+      background-color: lookup('$tagsP-' + $type + '-color')
diff --git a/source/css/_tags/link.styl b/source/css/_tags/link.styl
new file mode 100644
index 0000000..fc390a1
--- /dev/null
+++ b/source/css/_tags/link.styl
@@ -0,0 +1,40 @@
+.link_card
+  display: flex
+  margin: 10px 0
+  color: var(--font-color) !important
+  text-decoration: none !important
+  background: var(--reward-pop)
+  border-radius: 10px
+  padding: 12px
+  &:hover
+    background: #4976f5
+    color: white !important
+  .link_icon,.link_content
+    height: 4rem
+  .link_icon
+    img,svg
+      height: 4rem
+      width: 4rem
+  .link_content
+    margin-left: 1rem
+    width: calc(100% - 6rem)
+    overflow: hidden
+    line-height: 1.5
+    display: flex
+    flex-direction: column
+    justify-content: center
+    .link_title
+      font-weight: bold
+      font-size: 1.2rem
+    .link_title,.link_desc
+      word-break: break-all
+      overflow:hidden
+      text-overflow: ellipsis
+    &:not(:has(.link_desc)) .link_title
+      display:-webkit-box
+      -webkit-box-orient:vertical
+      -webkit-line-clamp:2
+    .link_desc
+      opacity: .6
+    .link_desc,&:has(.link_desc) .link_title
+      white-space: nowrap
\ No newline at end of file
diff --git a/source/css/_tags/media.styl b/source/css/_tags/media.styl
new file mode 100644
index 0000000..7a18778
--- /dev/null
+++ b/source/css/_tags/media.styl
@@ -0,0 +1,50 @@
+$sp = 4px
+
+audio,video
+  border-radius: $border-codeblock
+  max-width: 100%
+video
+  z-index: 1
+  trans()
+  &:hover
+    box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.24), 0 8px 16px 0px rgba(0, 0, 0, 0.24)
+
+div.video
+  line-height: 0
+  text-align: center
+
+div.videos
+  max-width: "calc(100% + 2 * %s)" % $sp
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: flex-end
+  margin: $gap-p 0 - $sp
+  .video,iframe
+    width: 100%
+    margin: $sp
+
+  iframe
+    border-radius: $border-codeblock
+    width: 100%
+    min-height: 300px
+  &.left
+    justify-content: flex-start
+  &.center
+    justify-content: center
+  &.right
+    justify-content: flex-end
+  &.stretch
+    align-items: stretch
+  &[col='1']
+    .video,iframe
+      width: 100%
+  &[col='2']
+    .video,iframe
+      width: "calc(50% - 2 * %s)" % $sp
+  &[col='3']
+    .video,iframe
+      width: "calc(33.33% - 2 * %s)" % $sp
+  &[col='4']
+    .video,iframe
+      width: "calc(25% - 2 * %s)" % $sp
diff --git a/source/css/_tags/msgbox.styl b/source/css/_tags/msgbox.styl
new file mode 100644
index 0000000..a303a6f
--- /dev/null
+++ b/source/css/_tags/msgbox.styl
@@ -0,0 +1,102 @@
+//default color:
+:root
+  --msgbox-name-color: #888888
+  --guest-font-color: #000000
+  --guest-background-color: #cbcbcb
+  --admin-font-color: #ffffff
+  --admin-background-color: #12b7f5
+[data-theme="dark"]
+  --msgbox-name-color: #888888
+  --guest-font-color: #e3e8e9
+  --guest-background-color: #303646
+  --admin-font-color: #ffffff
+  --admin-background-color: darken(#12b7f5,0.8)
+
+.msgbox
+  display: flex
+  flex-direction: column
+  flex-wrap: nowrap
+  width: 100%
+  height: auto
+  .msg-main
+    width: 100%
+    height: auto
+    display: flex
+    flex-direction: row
+    flex-wrap: nowrap
+    margin: 0 0 25px 0
+    .msg-avatar-box
+      width: 30px
+      min-width: 30px
+      img.msg-avatar
+        border-radius: 50%
+        width: 30px    
+        height: 30px
+        position: relative
+      .img-alt
+        display: none
+    .msg-content
+      width: 90%
+      display: flex
+      flex-direction: column
+      flex-wrap: nowrap
+      .msg-name
+        font-size: 12px
+        color: var(--msgbox-name-color)
+        line-height: 1em
+        height: 1.5em
+      .msg-content-text
+        border-radius: 8px
+        width: auto
+        max-width: calc(100% - 30px)
+        padding: 5px 5px 0px 20px
+        clip-path: polygon(0 15px,10px 16px,10px 5px,15px 0,100% 0,100% 100%,15px 100%,10px calc(100% - 5px),10px 25px)   
+        &>p
+          margin: 0 0 0!important
+          img
+            border-radius: 6px
+    &.msgguest
+      .msg-avatar-box
+        img.msg-avatar
+          top: 0
+          right: 0
+      .msg-content
+        align-items: flex-start
+        .msg-name
+          margin-left: 15px
+        .msg-content-text
+          background: var(--guest-background-color)
+          color: var(--guest-font-color)
+    &.msgadmin
+      flex-direction: row-reverse
+      .msg-avatar-box
+        img.msg-avatar
+          top: 0
+          left: 0
+      .msg-content
+        align-items: flex-end
+        .msg-name
+          margin-right: 15px
+        .msg-content-text
+          background: var(--admin-background-color)
+          color: var(--admin-font-color)
+          padding: 5px 20px 0px 5px
+          clip-path: polygon(100% 15px,calc(100% - 10px) 16px,calc(100% - 10px) 5px,calc(100% - 15px) 0,0 0,0 100%,calc(100% - 15px) 100%,calc(100% - 10px) calc(100% - 5px),calc(100% - 10px) 25px)
+          max-width: calc(100% - 30px)
+@media screen and (max-width:496px)
+  .msgbox
+    .msg-main
+      &.msgadmin
+        flex-direction: row
+        .msg-avatar-box
+          img.msg-avatar
+            top: 0
+            right: 0
+        .msg-content
+          align-items: flex-start
+          .msg-name
+            margin-left: 15px
+          .msg-content-text
+            padding: 5px 5px 0px 20px
+            clip-path: polygon(0 15px,10px 16px,10px 5px,15px 0,100% 0,100% 100%,15px 100%,10px calc(100% - 5px),10px 25px)
+            max-width: calc(100% - 30px)
\ No newline at end of file
diff --git a/source/css/_tags/note.styl b/source/css/_tags/note.styl
new file mode 100644
index 0000000..efd3781
--- /dev/null
+++ b/source/css/_tags/note.styl
@@ -0,0 +1,121 @@
+.note
+  $note-icons = hexo-config('note.icons')
+  position: relative
+  margin: 0 0 20px
+  padding: 15px
+
+  if hexo-config('note.border_radius') is a 'unit'
+    border-radius: unit(hexo-config('note.border_radius'), px)
+
+  &.icon-padding
+    padding-left: 3em
+
+  & > .note-icon
+    position: absolute
+    top: calc(50% - .5em)
+    left: .8em
+    font-size: larger
+
+  for $type in $color-types
+    &.{$type}
+      &:not(.disabled)
+        border-left-color: lookup('$tagsP-' + $type + '-color') !important
+
+        &.modern
+          border-left-color: transparent !important
+          color: lookup('$tagsP-' + $type + '-color')
+
+        &:not(.simple)
+          background: lighten(lookup('$tagsP-' + $type + '-color'), 85%) !important
+
+      & > .note-icon
+        color: lookup('$tagsP-' + $type + '-color')
+
+  &.simple
+    border: 1px solid #EEEEEE
+    border-left-width: 5px
+
+  &.modern
+    border: 1px solid transparent !important
+    background-color: #f5f5f5
+    color: $font-black
+
+  &.flat
+    border: initial
+    border-left: 5px solid #EEEEEE
+    background-color: lighten(#EEEEEE, 65%)
+    color: $font-black
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    if $note-icons
+      margin-top: 3px
+    else
+      margin-top: 0
+
+    margin-bottom: 0
+    padding-top: 0 !important
+    border-bottom: initial
+
+  p,
+  ul,
+  ol,
+  table,
+  pre,
+  blockquote,
+  img
+    &:first-child
+      margin-top: 0 !important
+
+    &:last-child
+      margin-bottom: 0 !important
+
+  if $note-icons
+    &:not(.no-icon)
+      padding-left: 3em
+
+      &::before
+        position: absolute
+        top: calc(50% - .95em)
+        left: .8em
+        font-size: larger
+        @extend .fontawesomeIcon
+
+  for $type in $note-types
+    &.{$type}
+      &.flat
+        background: lookup('$note-' + $type + '-bg')
+
+      &.modern
+        border-color: lookup('$note-modern-' + $type + '-border')
+        background: lookup('$note-modern-' + $type + '-bg')
+        color: lookup('$note-modern-' + $type + '-text')
+
+        a
+          &:not(.btn)
+            color: lookup('$note-modern-' + $type + '-text')
+
+            &:hover
+              color: lookup('$note-modern-' + $type + '-hover')
+
+      &:not(.modern)
+        border-left-color: lookup('$note-' + $type + '-border')
+
+        h2,
+        h3,
+        h4,
+        h5,
+        h6
+          color: lookup('$note-' + $type + '-text')
+
+      if $note-icons
+        &:not(.no-icon)
+          &::before
+            content: lookup('$note-' + $type + '-icon')
+
+          &:not(.modern)
+            &::before
+              color: lookup('$note-' + $type + '-text')
diff --git a/source/css/_tags/poem.styl b/source/css/_tags/poem.styl
new file mode 100644
index 0000000..64abb67
--- /dev/null
+++ b/source/css/_tags/poem.styl
@@ -0,0 +1,31 @@
+@media (min-width: 1200px)
+  .poem
+    margin 0 auto
+    height auto
+    writing-mode vertical-rl
+    writing-mode tb-rl
+    p
+      text-decoration underline
+      text-decoration-color rgba(193, 11, 11, 0.72)
+      text-decoration-style dashed
+@font-face
+  font-family 'Poem'
+  src url('https://unpkg.zhimg.com/akilar-candyassets/fonts/Poem.ttf')
+  font-display swap
+
+.poem
+  p
+    font-family 'Poem','KaiTi',sans-serif!important
+    font-size 25px
+    text-align center
+
+.poem-title
+    font-family 'Poem','KaiTi',sans-serif!important
+    font-size 2.5em
+    text-align center
+
+.poem-author
+  text-align center!important
+  font-family 'Poem','KaiTi',sans-serif!important
+  font-size 16px
+  color rgb(66, 66, 66)
diff --git a/source/css/_tags/progress.styl b/source/css/_tags/progress.styl
new file mode 100644
index 0000000..5b91f36
--- /dev/null
+++ b/source/css/_tags/progress.styl
@@ -0,0 +1,55 @@
+.progress
+  display flex
+  font-size var(--global-font-size)
+  background-color rgba(88,88,88,0.6)
+  border-radius .25rem
+  margin 1rem 0
+  height 2rem
+  overflow hidden
+  p
+    margin 0 0 0 10px !important
+
+  .progress-bar-animated
+    background-color #a7b5fd !important
+    animation progress-bar-stripes 1s linear infinite
+
+  .progress-bar-striped
+    background-image linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)
+    background-size 1rem 1rem
+
+  .progress-bar
+    display flex
+    flex-direction column
+    justify-content center
+    overflow visible
+    color #fff
+    text-align center
+    white-space nowrap
+    background-color #0d6efd
+    transition width .6s ease
+
+  @media (prefers-reduced-motion:reduce)
+    .progress-bar
+      transition none
+
+  .bg-green
+    background-color #28a745 !important
+
+  .bg-yellow
+    background-color #ffc107 !important
+
+  .bg-red
+    background-color #dc3545 !important
+
+  .bg-cyan
+    background-color #17a2b8 !important
+
+  .bg-blue
+    background-color #0d6efd !important
+
+  .bg-gray
+    background-color #7f838a !important
+
+@keyframes progress-bar-stripes
+  0%
+    background-position-x 1rem
diff --git a/source/css/_tags/reference.styl b/source/css/_tags/reference.styl
new file mode 100644
index 0000000..7a151ec
--- /dev/null
+++ b/source/css/_tags/reference.styl
@@ -0,0 +1,135 @@
+:root
+  --referto-text-color: #e9a218
+  --referto-text-hover-color: #2C7FE7
+  --referto-literature-background-color: #318efd
+  --referto-title-background-color: #183153
+  --referto-content-text-color: #f1f1ef
+  --referfrom-text-shadow: rgba(35,35,35,0.5)
+  --referfrom-text-color: #f1f1ef
+  --referfrom-text-hover-color: #f2b94b
+  --referfrom-link-color: #403e3b
+  --referfrom-link-hover-color: #235dac
+  --referfrom-background-color: #f1f1ef
+  --reference-anchor-color: #183153
+  --reference-anchor-up-color: #318efd
+
+[data-theme="dark"]
+  --referto-text-color: #f2b94b
+  --referto-text-hover-color: #2C7FE7
+  --referto-literature-background-color: #5c6167
+  --referto-title-background-color: #090a0b
+  --referto-content-text-color: #f1f1ef
+  --referfrom-text-shadow: rgba(35,35,35,0.5)
+  --referfrom-text-color: #f1f1ef
+  --referfrom-text-hover-color: #f2b94b
+  --referfrom-link-color: #f1f1ef
+  --referfrom-link-hover-color: #f2b94b
+  --referfrom-background-color: rgba(92, 97, 103, 0.68)
+  --reference-anchor-color: #090a0b
+  --reference-anchor-up-color: #183153
+
+.hidden-anchor
+  position relative
+  top -150px
+  display inline-block
+  height 0
+  overflow hidden
+
+.reference
+  a
+    display inline-block
+    color var(--referto-text-color) !important
+    font-weight bold
+    transition: all 0.2s ease-in-out
+  &:hover
+    a
+      transition: all 0.2s ease-in-out
+      text-decoration none !important
+      color var(--referto-text-hover-color) !important
+    & + .reference-bubble
+      .reference-item
+        transform translate(-40px, 10px) rotateX(0deg)
+        transition: all 0.5s ease-in-out
+        opacity: 1
+
+.reference-bubble
+  display inline-block
+
+
+.reference-item
+  transition: all 0.5s ease-in-out
+  opacity 0
+  z-index 99
+  display flex
+  position absolute
+  transform translate(-40px, 10px) rotateX(90deg)
+  width auto
+  height auto
+  clip-path polygon(5px 10px, 20px 10px, 30px 0, 40px 10px, calc(100% - 5px) 10px, 100% 15px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 15px, 5px 10px)
+
+.reference-literature
+  max-width 200px
+  padding 20px 10px 10px 10px
+  background var(--referto-literature-background-color)
+  color var(--referto-content-text-color) !important
+  word-wrap break-word
+  word-break break-all
+  display flex
+  align-items center
+
+.reference-title
+  padding 20px 10px 10px 10px
+  background var(--referto-title-background-color)
+  color var(--referto-content-text-color) !important
+  writing-mode vertical-lr
+  display flex
+  justify-content center
+
+.reference-source
+  font-size 16px
+  height auto
+  line-height 26px
+  width fit-content
+  margin 5px 0
+  max-width 90%
+  background var(--referfrom-background-color)
+  box-shadow 1px 1px 1px var(--referfrom-text-shadow)
+  border-radius 8px
+  padding-right 10px
+  pangu
+    display: none
+
+
+
+a
+  &.reference-anchor
+    border-bottom-left-radius 5px
+    border-top-left-radius 5px
+    color var(--referfrom-text-color) !important
+    background var(--reference-anchor-color)
+    height 30px
+    display inline-block
+    width fit-content
+    padding 0px 0px 0px 10px
+    &:hover
+      color var(--referfrom-text-hover-color) !important
+      text-decoration none !important
+      .reference-anchor-up
+        color var(--referfrom-text-hover-color) !important
+  &.reference-link
+    color var(--referfrom-link-color) !important
+    padding 0px 10px
+    &:hover
+      color var(--referfrom-link-hover-color) !important
+      text-decoration none !important
+
+.reference-anchor-up
+  color var(--referfrom-text-color) !important
+  height 30px
+  width 40px
+  padding 0px 0px 0px 10px
+  background var(--reference-anchor-up-color)
+  display inline-flex !important
+  align-items center
+  justify-content center
+  clip-path polygon(0 0,10px 50%,0 100%,100% 100%,100% 0)
diff --git a/source/css/_tags/span.styl b/source/css/_tags/span.styl
new file mode 100644
index 0000000..791befe
--- /dev/null
+++ b/source/css/_tags/span.styl
@@ -0,0 +1,27 @@
+span.p.center.logo.large
+    font-size 2.5rem
+    text-align center
+    display block
+
+span.p.center.small
+    text-align center
+    display block
+    font-size 1rem
+
+span.p.red
+    color #fe5f58
+
+span.p.yellow
+    color #ffbd2b
+
+span.p.green
+    color #3dc550
+
+span.p.cyan
+    color #1bcdfc
+
+span.p.blue
+    color #2196f3
+
+span.p.gray
+    color #999
\ No newline at end of file
diff --git a/source/css/_tags/tabs.styl b/source/css/_tags/tabs.styl
new file mode 100644
index 0000000..90ede9c
--- /dev/null
+++ b/source/css/_tags/tabs.styl
@@ -0,0 +1,74 @@
+
+#article-container
+  .tabs
+    position: relative
+    margin: 0 0 20px
+    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: 0
+        padding: 0
+        list-style: none
+
+        +maxWidth768()
+          flex-grow: 1
+
+        button
+          display: block
+          padding: 8px 18px
+          width: 100%
+          border-top: 2px solid var(--tab-border-color)
+          background: var(--tab-botton-bg)
+          color: var(--tab-botton-color)
+          line-height: 2
+          transition: all .4s
+
+          i
+            width: 1.5em
+
+        &.active
+          button
+            border-top: 2px solid $tab-active-border-color
+            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: 36px 24px
+
+        +maxWidth768()
+          padding: 24px 14px
+
+        &.active
+          display: block
+          animation: tabshow .5s
+
+    .tab-to-top
+      position: relative
+      display: block
+      margin: 0 0 0 auto
+      color: $tab-to-top-color
+
+@keyframes tabshow
+  0%
+    transform: translateY(15px)
+
+  100%
+    transform: translateY(0)
diff --git a/source/css/_tags/timeline.styl b/source/css/_tags/timeline.styl
new file mode 100644
index 0000000..aba927b
--- /dev/null
+++ b/source/css/_tags/timeline.styl
@@ -0,0 +1,68 @@
+#article-container
+  .timeline
+    margin: 0 0 20px 10px
+    padding: 14px 20px 5px
+    border-left: 2px solid var(--timeline-color, $theme-color)
+
+    for $type in $color-types
+      &.{$type}
+        --timeline-color: lookup('$tagsP-' + $type + '-color')
+        --timeline-bg: s('rgba(%s,%s,%s, 0.2)', red(lookup('$tagsP-' + $type + '-color')), green(lookup('$tagsP-' + $type + '-color')), blue(lookup('$tagsP-' + $type + '-color')))
+
+    .timeline-item
+      margin: 0 0 15px
+
+      &:hover
+        .item-circle
+          &:before
+            border-color: var(--timeline-color, $theme-color)
+
+      &.headline
+        .timeline-item-title
+          .item-circle
+            > p
+              font-weight: 600
+              font-size: 1.2em
+
+            &:before
+              left: -28px
+              border: 4px solid var(--timeline-color, $theme-color)
+
+        &:hover
+          .item-circle
+            &:before
+              border-color: var(--pseudo-hover)
+
+      .timeline-item-title
+        position: relative
+
+      .item-circle
+        &:before
+          position: absolute
+          top: 50%
+          left: -27px
+          width: 6px
+          height: 6px
+          border: 3px solid var(--pseudo-hover)
+          border-radius: 50%
+          background: var(--card-bg)
+          content: ''
+          transition: all .3s
+          transform: translate(0, -50%)
+
+        > p
+          margin: 0 0 8px
+          font-weight: 500
+
+      .timeline-item-content
+        position: relative
+        padding: 12px 15px
+        border-radius: 8px
+        background: var(--timeline-bg, lighten($theme-color, 85%))
+        font-size: .93em
+
+        & > :last-child
+          margin-bottom: 0
+
+    & + .timeline
+      margin-top: -20px
\ No newline at end of file
diff --git a/source/css/_third-party/normalize.min.css b/source/css/_third-party/normalize.min.css
new file mode 100644
index 0000000..ecc522f
--- /dev/null
+++ b/source/css/_third-party/normalize.min.css
@@ -0,0 +1,180 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%
+}
+
+body {
+  margin: 0
+}
+
+main {
+  display: block
+}
+
+h1 {
+  font-size: 2em;
+  margin: .67em 0
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em
+}
+
+a {
+  background-color: transparent
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  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
+}
+
+img {
+  border-style: none
+}
+
+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 {
+  -webkit-appearance: button
+}
+
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+  border-style: none;
+  padding: 0
+}
+
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring,
+button:-moz-focusring {
+  outline: 1px dotted ButtonText
+}
+
+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] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px
+}
+
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit
+}
+
+details {
+  display: block
+}
+
+summary {
+  display: list-item
+}
+
+template {
+  display: none
+}
+
+[hidden] {
+  display: none
+}
\ No newline at end of file
diff --git a/source/css/color.css b/source/css/color.css
new file mode 100644
index 0000000..8624441
--- /dev/null
+++ b/source/css/color.css
@@ -0,0 +1,177 @@
+:root{
+    --heo-white: #fff;
+    --heo-black: #000;
+    --heo-none: rgba(0,0,0,0);
+    --heo-gray: #999999;
+    --heo-yellow: #ffc93e;
+    --heo-main: var(--heo-theme);
+    --heo-main-op: var(--heo-theme-op);
+    --heo-shadow-theme: 0 8px 12px -3px var(--heo-theme-op);
+    --heo-shadow-main: 0 8px 12px -3px var(--heo-main-op);
+    --heo-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234,.20);
+    --heo-shadow-white: 0 8px 12px -3px rgba(255, 255, 255,.20);
+    --heo-shadow-black: 0 0 12px 4px rgba(0, 0, 0,.05);
+    --heo-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62,.12);
+    --heo-shadow-red: 0 8px 12px -3px #ee7d7936;
+    --heo-shadow-green: 0 8px 12px -3px #87ee7936;
+    --heo-logo-color: linear-gradient(215deg,#4584ff 30%,#ff7676 70%);
+    --style-border: 1px solid var(--heo-card-border);
+    --style-border-hover: 1px solid var(--heo-theme);
+  }
+  
+  ::selection {
+    background: var(--heo-fontcolor);
+    color: var(--heo-background);
+  }
+  
+  [data-theme=light] {
+    --heo-theme: #32C9EB;
+    --heo-theme-op: #4259ef23;
+    --heo-blue: #425AEF;
+    --heo-red: #D8213C;
+    --heo-pink: #FF7a7a;
+    --heo-green: #57bd6a;
+    --heo-fontcolor: #363636;
+    --heo-background: #f7f9fe;
+    --heo-reverse: #000;
+    --heo-maskbg: rgba(255, 255, 255, 0.6);
+    --heo-maskbgdeep: rgba(255, 255, 255, 0.85);
+    --heo-hovertext: var(--heo-theme);
+    --heo-ahoverbg: #F7F7FA;
+    --heo-lighttext: var(--heo-main);
+    --heo-secondtext: rgba(60, 60, 67, 0.6);
+    --heo-scrollbar: rgba(60, 60, 67, 0.4);
+    --heo-card-btn-bg: #edf0f7;
+    --heo-post-blockquote-bg: #fafcff;
+    --heo-post-tabs-bg: #f2f5f8;
+    --heo-secondbg: #edf0f7;
+    --heo-shadow-nav:0 5px 12px -5px rgba(102, 68, 68, 0.05);
+    --heo-card-bg: #fff;
+    --heo-shadow-lightblack:0 5px 12px -5px rgba(102, 68, 68, 0.00);
+    --heo-shadow-light2black:0 5px 12px -5px rgba(102, 68, 68, 0.00);
+    --heo-card-border: #e3e8f7;
+  }
+  
+  [data-theme=dark] {
+    --heo-theme: #F2B94B;
+    --heo-theme-op: #0084FF23;
+    --heo-blue: #0084FF;
+    --heo-red: #FF3842;
+    --heo-pink: #FF7C7C;
+    --heo-green: #57bd6a;
+    --heo-fontcolor: #F7F7FA;
+    --heo-background: #18171d;
+    --heo-reverse: #fff;
+    --heo-maskbg: rgba(0,0,0, 0.6);
+    --heo-maskbgdeep: rgba(0,0,0, 0.85);
+    --heo-hovertext: #0A84FF;
+    --heo-ahoverbg: #fff;
+    --heo-lighttext: #f2b94b;
+    --heo-secondtext: #a1a2b8;
+    --heo-scrollbar: rgba(200, 200, 223, 0.4);
+    --heo-card-btn-bg: #30343f;
+    --heo-post-blockquote-bg: #000;
+    --heo-post-tabs-bg: #121212;
+    --heo-secondbg: #30343f;
+    --heo-shadow-nav:0 5px 20px 0px rgba(28, 28, 28, 0.4);
+    --heo-card-bg: #1d1b26;
+    --heo-shadow-lightblack:0 5px 12px -5px rgba(102, 68, 68, 0.0);
+    --heo-shadow-light2black:0 5px 12px -5px rgba(102, 68, 68, 0.0);
+    --heo-card-border: #42444a;
+  }
+  
+  @media screen and (max-width: 768px){
+    :root{
+      --style-border: 0px solid var(--heo-card-border);
+      --style-border-hover: 0px solid var(--heo-theme);
+    }
+  }
+
+  /* 颜色 */
+:root {
+    --anzhiyu-theme-op: #4259ef23;
+    --anzhiyu-white: #fff;
+    --anzhiyu-black: #000;
+    --anzhiyu-none: rgba(0, 0, 0, 0);
+    --anzhiyu-gray: #999999;
+    --anzhiyu-yellow: #ffc93e;
+    --anzhiyu-border-radius: 8px;
+    --anzhiyu-main: var(--anzhiyu-theme);
+    --anzhiyu-main-op: var(--anzhiyu-theme-op);
+    --anzhiyu-shadow-theme: 0 8px 12px -3px var(--anzhiyu-theme-op);
+    --anzhiyu-shadow-main: 0 8px 12px -3px var(--anzhiyu-main-op);
+    --anzhiyu-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
+    --anzhiyu-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
+    --anzhiyu-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
+    --anzhiyu-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
+    --anzhiyu-shadow-red: 0 8px 12px -3px #ee7d7936;
+    --anzhiyu-shadow-green: 0 8px 12px -3px #87ee7936;
+    --anzhiyu-shadow-border: 0 8px 16px -4px #2c2d300c;
+    --anzhiyu-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
+    --style-border: 1px solid var(--anzhiyu-card-border);
+    --anzhiyu-blue-main: #3b70fc;
+    --style-border-hover: 1px solid var(--anzhiyu-main);
+    --style-border-dashed: 1px dashed var(--anzhiyu-theme-op);
+    --style-border-avatar: 4px solid var(--anzhiyu-background);
+    --style-border-always: 1px solid var(--anzhiyu-card-border);
+    --anzhiyu-white-acrylic1: #fefeff !important;
+    --anzhiyu-white-acrylic2: #fcfdff !important;
+    --anzhiyu-black-acrylic2: #08080a !important;
+    --anzhiyu-black-acrylic1: #0b0b0e !important;
+  }
+  
+  [data-theme="light"] {
+    --anzhiyu-theme: #3b70fc;
+    --anzhiyu-theme-op: #4259ef23;
+    --anzhiyu-blue: #3b70fc;
+    --anzhiyu-red: #d8213c;
+    --anzhiyu-pink: #ff7c7c;
+    --anzhiyu-green: #57bd6a;
+    --anzhiyu-fontcolor: #363636;
+    --anzhiyu-background: #f7f9fe;
+    --anzhiyu-reverse: #000;
+    --anzhiyu-maskbg: rgba(255, 255, 255, 0.6);
+    --anzhiyu-maskbgdeep: rgba(255, 255, 255, 0.85);
+    --anzhiyu-hovertext: var(--anzhiyu-theme);
+    --anzhiyu-ahoverbg: #f7f7fa;
+    --anzhiyu-lighttext: var(--anzhiyu-main);
+    --anzhiyu-secondtext: rgba(60, 60, 67, 0.6);
+    --anzhiyu-scrollbar: rgba(60, 60, 67, 0.4);
+    --anzhiyu-card-btn-bg: #edf0f7;
+    --anzhiyu-post-blockquote-bg: #fafcff;
+    --anzhiyu-post-tabs-bg: #f2f5f8;
+    --anzhiyu-secondbg: #edf0f7;
+    --anzhiyu-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
+    --anzhiyu-card-bg: #fff;
+    --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
+    --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
+    --anzhiyu-card-border: #c0c6d8;
+  }
+  
+  [data-theme="dark"] {
+    --anzhiyu-theme: #0084ff;
+    --anzhiyu-theme-op: #0084ff23;
+    --anzhiyu-blue: #0084ff;
+    --anzhiyu-red: #ff3842;
+    --anzhiyu-pink: #ff7c7c;
+    --anzhiyu-green: #57bd6a;
+    --anzhiyu-fontcolor: #f7f7fa;
+    --anzhiyu-background: #18171d;
+    --anzhiyu-reverse: #fff;
+    --anzhiyu-maskbg: rgba(0, 0, 0, 0.6);
+    --anzhiyu-maskbgdeep: rgba(0, 0, 0, 0.85);
+    --anzhiyu-hovertext: #0a84ff;
+    --anzhiyu-ahoverbg: #fff;
+    --anzhiyu-lighttext: #f2b94b;
+    --anzhiyu-secondtext: #a1a2b8;
+    --anzhiyu-scrollbar: rgba(200, 200, 223, 0.4);
+    --anzhiyu-card-btn-bg: #30343f;
+    --anzhiyu-post-blockquote-bg: #000;
+    --anzhiyu-post-tabs-bg: #121212;
+    --anzhiyu-secondbg: #30343f;
+    --anzhiyu-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
+    --anzhiyu-card-bg: #1d1b26;
+    --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
+    --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
+    --anzhiyu-card-border: #42444a;
+  }
\ No newline at end of file
diff --git a/source/css/index.styl b/source/css/index.styl
new file mode 100644
index 0000000..8fa64d2
--- /dev/null
+++ b/source/css/index.styl
@@ -0,0 +1,23 @@
+if hexo-config('css_prefix')
+  @import 'nib'
+
+@import '_third-party/normalize.min.css'
+// project
+@import 'var'
+@import '_global/*'
+@import '_highlight/highlight'
+@import '_page/*'
+@import '_layout/*'
+@import '_tags/*'
+@import '_mode/*'
+@import '_custom/*'
+@import '_custom/*.css'
+
+// search
+if hexo-config('algolia_search.enable')
+  @import '_search/index'
+  @import '_search/algolia'
+
+if hexo-config('local_search') && hexo-config('local_search.enable')
+  @import '_search/index'
+  @import '_search/local-search'
diff --git a/source/css/var.styl b/source/css/var.styl
new file mode 100644
index 0000000..212e468
--- /dev/null
+++ b/source/css/var.styl
@@ -0,0 +1,182 @@
+// color
+$bright-blue = #32C9EB
+$strong-cyan = #32C9EB
+$light-orange = #ff7a7a
+$light-red = #F47466
+$themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
+$theme-color = $themeColorEnable && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $bright-blue
+$theme-paginator-color = $themeColorEnable && hexo-config('theme_color.paginator') ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
+$theme-text-selection-color = $themeColorEnable && hexo-config('theme_color.text_selection') ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
+$theme-link-color = $themeColorEnable && hexo-config('theme_color.link_color') ? convert(hexo-config('theme_color.link_color')) : $bright-blue
+$theme-hr-color = $themeColorEnable && hexo-config('theme_color.hr_color') ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
+$code-foreground = $themeColorEnable && hexo-config('theme_color.code_foreground') ? convert(hexo-config('theme_color.code_foreground')) : $light-red
+$code-background = $themeColorEnable && hexo-config('theme_color.code_background') ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
+$theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
+// font
+$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
+$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
+$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
+$code-font-family = hexo-config('font.code-font-family') ? unquote(hexo-config('font.code-font-family')) : $dafault-code-font
+$site-name-font = hexo-config('blog_title_font.font-family') && unquote(hexo-config('blog_title_font.font-family'))
+// hr
+// page beatutify
+$beautifyEnable = hexo-config('beautify.enable')
+$title-prefix-icon = $beautifyEnable && hexo-config('beautify.title-prefix-icon') ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
+$title-prefix-icon-color = $beautifyEnable && hexo-config('beautify.title-prefix-icon-color') ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
+// Global Variables
+$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
+$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
+$font-color = #1F2D3D
+$text-line-height = 2
+$web-bg = hexo-config('background') && unquote(hexo-config('background'))
+$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
+$index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
+// Global color & SVG
+$light-blue = $theme-color
+$dark-black = #000000
+$light-grey = #EEEEEE
+$grey = #858585
+$dark-grey = #cacaca
+$white = #FFFFFF
+$whitesmoke = #f5f5f5
+$font-black = #4C4948
+$card-bg = $white
+$text-highlight-color = $font-color
+$text-hover = $theme-color
+$text-bg-hover = $theme-color
+// code
+$line-height-code-block = 1.6
+$blockquote-color = #6a737d
+$blockquote-padding-color = $themeColorEnable && hexo-config('theme_color.blockquote_padding_color') ? convert(hexo-config('theme_color.blockquote_padding_color')) : #32C9EB
+$blockquote-background-color = $themeColorEnable && hexo-config('theme_color.blockquote_background_color') ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)
+// page
+$body-bg = #fff
+$a-link-color = #99a9bf
+$sticky-color = $light-orange
+$theme-meta-color = $themeColorEnable && hexo-config('theme_color.meta_color') ? convert(hexo-config('theme_color.meta_color')) : #858585
+// sidebar
+$sidebar-background = #f6f8fa
+$sidebar-width = 300px
+// aside
+$toc-link-color = #666261
+$toc-mobile-width = calc(100% - 80px)
+$toc-mobile-maxWidth = 380px
+$toc-active-color = #fff
+// Button
+$button-color = #fff
+$button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
+$button-bg = $theme-color
+$pseudo-hover = $button-hover-color
+// scrollbar
+$scrollbar-color = $themeColorEnable && hexo-config('theme_color.scrollbar_color') ? convert(hexo-config('theme_color.scrollbar_color')) : $theme-color
+// table
+$table-thead-bg = #99a9bf
+// reward
+$reward-pop-up-bg = #f5f5f5
+$reward-pop-up-color = #858585
+// search
+$search-bg = #f6f8fa
+$search-input-color = $font-black
+$search-color = $theme-color
+$search-keyword-highlight = #F47466
+$search-result-title = $font-black
+// comments
+$comments-switch-first-text = $bright-blue
+$comments-switch-second-text = $light-orange
+$comments-switch-round = #fff
+$comments-switch-bg = #f6f8fa
+// noticeOutdate
+$noticeOutdate-bg = #ffe6e6
+$noticeOutdate-color = #ff6666
+$noticeOutdate-border = #ff8080
+// gallery
+$gallery-color = #fff
+// tag-hide
+$tag-hide-bg = $theme-color
+$tag-hide-toggle-bg = #f0f0f0
+// preloader
+$preloader-bg = #37474f
+$preloader-word-color = #fff
+// rightside
+$rightside-bottom = hexo-config('rightside-bottom') ? convert(hexo-config('rightside-bottom')) : 40px
+// fireworks
+$fireworks-zIndex = hexo-config('fireworks.zIndex') ? hexo-config('fireworks.zIndex') : 99999
+// Tag Plugins - Note
+hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0)
+$note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger'
+// Default
+$note-default-border = #777
+$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg)
+$note-default-text = $note-default-border
+$note-default-icon = '\f0a9'
+$note-modern-default-border = #e1e1e1
+$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4))
+$note-modern-default-text = #666
+$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
+// Primary
+$note-primary-border = #6f42c1
+$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg)
+$note-primary-text = $note-primary-border
+$note-primary-icon = '\f055'
+$note-modern-primary-border = #e1c2ff
+$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4))
+$note-modern-primary-text = #6f42c1
+$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
+// Info
+$note-info-border = #428bca
+$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg)
+$note-info-text = $note-info-border
+$note-info-icon = '\f05a'
+$note-modern-info-border = #b3e5ef
+$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4))
+$note-modern-info-text = #31708f
+$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
+// Success
+$note-success-border = #5cb85c
+$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg)
+$note-success-text = $note-success-border
+$note-success-icon = '\f058'
+$note-modern-success-border = #d0e6be
+$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4))
+$note-modern-success-text = #3c763d
+$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
+// Warning
+$note-warning-border = #f0ad4e
+$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg)
+$note-warning-text = $note-warning-border
+$note-warning-icon = '\f06a'
+$note-modern-warning-border = #fae4cd
+$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4))
+$note-modern-warning-text = #8a6d3b
+$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
+// Danger
+$note-danger-border = #d9534f
+$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg)
+$note-danger-text = $note-danger-border
+$note-danger-icon = '\f056'
+$note-modern-danger-border = #ebcdd2
+$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
+$note-modern-danger-text = #a94442
+$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
+// Tag Plugins - Button/note
+$color-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
+$btn-color = #fff
+$btn-default-color = #777
+$tagsP-blue-color = #428bca
+$tagsP-pink-color = #FF69B4
+$tagsP-red-color = #FF0000
+$tagsP-orange-color = #FF8C00
+$tagsP-purple-color = #6f42c1
+$tagsP-green-color = #5cb85c
+// Tag Plugins - Tab
+$tab-border-color = #f0f0f0
+$tab-botton-bg = #f0f0f0
+$tab-botton-color = $font-color
+$tab-button-hover-bg = darken($tab-border-color, 8)
+$tab-active-border-color = $theme-color
+$tab-button-active-bg = $card-bg
+$tab-to-top-color = #99a9bf
+// Tag Plugins - timeline
+$timeline-default-color = $theme-color
+// archor
+$archor-button-icon = hexo-config('anchor.button.icon') ? hexo-config('anchor.button.icon') : '\f0c1'
\ No newline at end of file
diff --git a/source/img/404.jpg b/source/img/404.jpg
new file mode 100644
index 0000000..4bab3c3
Binary files /dev/null and b/source/img/404.jpg differ
diff --git a/source/img/favicon.png b/source/img/favicon.png
new file mode 100644
index 0000000..862ebe8
Binary files /dev/null and b/source/img/favicon.png differ
diff --git a/source/img/friend_404.gif b/source/img/friend_404.gif
new file mode 100644
index 0000000..91dd56a
Binary files /dev/null and b/source/img/friend_404.gif differ
diff --git a/source/js/custom.js b/source/js/custom.js
new file mode 100644
index 0000000..ff2529b
--- /dev/null
+++ b/source/js/custom.js
@@ -0,0 +1,64 @@
+var custom = {
+    getTimeState: function() {
+        var e = (new Date).getHours()
+          , t = "";
+        return 0 <= e && e <= 5 ? t = "晚安😴" : 5 < e && e <= 10 ? t = "早上好👋" : 10 < e && e <= 14 ? t = "中午好👋" : 14 < e && e <= 18 ? t = "下午好👋" : 18 < e && e <= 24 && (t = "晚上好👋"),
+        t
+    },
+    sayhi: function() {
+        var e = document.getElementById("author-info__sayhi");
+        e && (e.innerHTML = custom.getTimeState() + "！我是")
+    },
+}
+custom.sayhi();
+
+// 返回顶部 显示网页阅读进度
+window.onscroll = percent; // 执行函数
+// 页面百分比
+function 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"); // 获取图标
+  (btn.innerHTML = result);
+}
+
+document.getElementById("page-name").innerText = document.title.split(" | blog")[0];
+
+let dys = {
+  switchDarkMode: function() {
+    "light" === ("dark" === document.documentElement.getAttribute("data-theme") ? "dark" : "light") ? (activateDarkMode(),
+    saveToLocal.set("theme", "dark", 2),
+    void 0 !== GLOBAL_CONFIG.Snackbar && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)) : (activateLightMode(),
+    saveToLocal.set("theme", "light", 2),
+    void 0 !== GLOBAL_CONFIG.Snackbar && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)),
+    "function" == typeof utterancesTheme && utterancesTheme(),
+    "object" == typeof FB && window.loadFBComment(),
+    window.DISQUS && document.getElementById("disqus_thread").children.length && setTimeout((()=>window.disqusReset()), 200)
+  },
+}
+
+function toggleTheme() {
+  var currentTheme = document.documentElement.getAttribute("data-theme");
+  var targetTheme = currentTheme === "dark" ? "light" : "dark";
+  document.documentElement.setAttribute("data-theme", targetTheme);
+}
+
+function hideAsideBtn() {
+  const e = document.documentElement.classList;
+  const $htmlDom = document.documentElement.classList
+  e.contains("hide-aside") ? saveToLocal.set("aside-status", "show", 2) : saveToLocal.set("aside-status", "hide", 2),
+  e.toggle("hide-aside"),
+      $htmlDom.contains('hide-aside')
+        ? saveToLocal.set('aside-status', 'show', 2)
+        : saveToLocal.set('aside-status', 'hide', 2)
+      $htmlDom.toggle('hide-aside')
+}
\ No newline at end of file
diff --git a/source/js/main.js b/source/js/main.js
new file mode 100644
index 0000000..50ba8f1
--- /dev/null
+++ b/source/js/main.js
@@ -0,0 +1,779 @@
+document.addEventListener('DOMContentLoaded', function () {
+  let blogNameWidth, menusWidth, searchWidth, $nav
+  let mobileSidebarOpen = false
+
+  const adjustMenu = (init) => {
+    if (init) {
+      blogNameWidth = document.getElementById('site-name').offsetWidth
+      const $menusEle = document.querySelectorAll('#menus .menus_item')
+      menusWidth = 0
+      $menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth })
+      const $searchEle = document.querySelector('#search-button')
+      searchWidth = $searchEle ? $searchEle.offsetWidth : 0
+      $nav = document.getElementById('nav')
+    }
+
+    let hideMenuIndex = ''
+    if (window.innerWidth <= 768) hideMenuIndex = true
+    else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
+
+    if (hideMenuIndex) {
+      $nav.classList.add('hide-menu')
+    } else {
+      $nav.classList.remove('hide-menu')
+    }
+  }
+
+  // 初始化header
+  const initAdjust = () => {
+    adjustMenu(true)
+    $nav.classList.add('show')
+  }
+
+  // sidebar menus
+  const sidebarFn = {
+    open: () => {
+      btf.sidebarPaddingR()
+      document.body.style.overflow = 'hidden'
+      btf.animateIn(document.getElementById('menu-mask'), 'to_show 0.5s')
+      document.getElementById('sidebar-menus').classList.add('open')
+      mobileSidebarOpen = true
+    },
+    close: () => {
+      const $body = document.body
+      $body.style.overflow = ''
+      $body.style.paddingRight = ''
+      btf.animateOut(document.getElementById('menu-mask'), 'to_hide 0.5s')
+      document.getElementById('sidebar-menus').classList.remove('open')
+      mobileSidebarOpen = false
+    }
+  }
+
+  /**
+   * 首頁top_img底下的箭頭
+   */
+  const scrollDownInIndex = () => {
+    const $scrollDownEle = document.getElementById('scroll-down')
+    $scrollDownEle && $scrollDownEle.addEventListener('click', function () {
+      btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300)
+    })
+  }
+
+  /**
+   * 代碼
+   * 只適用於Hexo默認的代碼渲染
+   */
+  const addHighlightTool = function () {
+    const highLight = GLOBAL_CONFIG.highlight
+    if (!highLight) return
+
+    const isHighlightCopy = highLight.highlightCopy
+    const isHighlightLang = highLight.highlightLang
+    const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
+    const highlightHeightLimit = highLight.highlightHeightLimit
+    const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
+    const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
+
+    if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
+
+    const isPrismjs = highLight.plugin === 'prismjs'
+
+    let highlightShrinkEle = ''
+    let highlightCopyEle = ''
+    const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
+
+    if (isHighlightShrink !== undefined) {
+      highlightShrinkEle = ``
+    }
+
+    if (isHighlightCopy) {
+      highlightCopyEle = '
    '
+    }
+
+    const copy = (text, ctx) => {
+      if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
+        document.execCommand('copy')
+        if (GLOBAL_CONFIG.Snackbar !== undefined) {
+          btf.snackbarShow(GLOBAL_CONFIG.copy.success)
+        } else {
+          const prevEle = ctx.previousElementSibling
+          prevEle.innerText = GLOBAL_CONFIG.copy.success
+          prevEle.style.opacity = 1
+          setTimeout(() => { prevEle.style.opacity = 0 }, 700)
+        }
+      } else {
+        if (GLOBAL_CONFIG.Snackbar !== undefined) {
+          btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
+        } else {
+          ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport
+        }
+      }
+    }
+
+    // click events
+    const highlightCopyFn = (ele) => {
+      const $buttonParent = ele.parentNode
+      $buttonParent.classList.add('copy-true')
+      const selection = window.getSelection()
+      const range = document.createRange()
+      if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0])
+      else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0])
+      selection.removeAllRanges()
+      selection.addRange(range)
+      const text = selection.toString()
+      copy(text, ele.lastChild)
+      selection.removeAllRanges()
+      $buttonParent.classList.remove('copy-true')
+    }
+
+    const highlightShrinkFn = (ele) => {
+      const $nextEle = [...ele.parentNode.children].slice(1)
+      ele.firstChild.classList.toggle('closed')
+      if (btf.isHidden($nextEle[$nextEle.length - 1])) {
+        $nextEle.forEach(e => { e.style.display = 'block' })
+      } else {
+        $nextEle.forEach(e => { e.style.display = 'none' })
+      }
+    }
+
+    const highlightToolsFn = function (e) {
+      const $target = e.target.classList
+      if ($target.contains('expand')) highlightShrinkFn(this)
+      else if ($target.contains('copy-button')) highlightCopyFn(this)
+    }
+
+    const expandCode = function () {
+      this.classList.toggle('expand-done')
+    }
+
+    function createEle (lang, item, service) {
+      const fragment = document.createDocumentFragment()
+
+      if (isShowTool) {
+        const hlTools = document.createElement('div')
+        hlTools.className = `highlight-tools ${highlightShrinkClass}`
+        hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle
+        hlTools.addEventListener('click', highlightToolsFn)
+        fragment.appendChild(hlTools)
+      }
+
+      if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) {
+        const ele = document.createElement('div')
+        ele.className = 'code-expand-btn'
+        ele.innerHTML = ''
+        ele.addEventListener('click', expandCode)
+        fragment.appendChild(ele)
+      }
+
+      if (service === 'hl') {
+        item.insertBefore(fragment, item.firstChild)
+      } else {
+        item.parentNode.insertBefore(fragment, item)
+      }
+    }
+
+    if (isHighlightLang) {
+      if (isPrismjs) {
+        $figureHighlight.forEach(function (item) {
+          const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
+          const highlightLangEle = `
    ${langName}
    `
+          btf.wrap(item, 'figure', { class: 'highlight' })
+          createEle(highlightLangEle, item)
+        })
+      } else {
+        $figureHighlight.forEach(function (item) {
+          let langName = item.getAttribute('class').split(' ')[1]
+          if (langName === 'plain' || langName === undefined) langName = 'Code'
+          const highlightLangEle = `
    ${langName}
    `
+          createEle(highlightLangEle, item, 'hl')
+        })
+      }
+    } else {
+      if (isPrismjs) {
+        $figureHighlight.forEach(function (item) {
+          btf.wrap(item, 'figure', { class: 'highlight' })
+          createEle('', item)
+        })
+      } else {
+        $figureHighlight.forEach(function (item) {
+          createEle('', item, 'hl')
+        })
+      }
+    }
+  }
+
+  /**
+   * PhotoFigcaption
+   */
+  function addPhotoFigcaption () {
+    document.querySelectorAll('#article-container img').forEach(function (item) {
+      const parentEle = item.parentNode
+      const altValue = item.title || item.alt
+      if (altValue && !parentEle.parentNode.classList.contains('justified-gallery')) {
+        const ele = document.createElement('div')
+        ele.className = 'img-alt is-center'
+        ele.textContent = altValue
+        parentEle.insertBefore(ele, item.nextSibling)
+      }
+    })
+  }
+
+  /**
+   * Lightbox
+   */
+  const runLightbox = () => {
+    btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
+  }
+
+  /**
+   * justified-gallery 圖庫排版
+   */
+  const runJustifiedGallery = function (ele) {
+    ele.forEach(item => {
+      const $imgList = item.querySelectorAll('img')
+
+      $imgList.forEach(i => {
+        const dataLazySrc = i.getAttribute('data-lazy-src')
+        if (dataLazySrc) i.src = dataLazySrc
+        btf.wrap(i, 'div', { class: 'fj-gallery-item' })
+      })
+    })
+
+    if (window.fjGallery) {
+      setTimeout(() => { btf.initJustifiedGallery(ele) }, 100)
+      return
+    }
+
+    const newEle = document.createElement('link')
+    newEle.rel = 'stylesheet'
+    newEle.href = GLOBAL_CONFIG.source.justifiedGallery.css
+    document.body.appendChild(newEle)
+    getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) })
+  }
+
+  /**
+   * 滾動處理
+   */
+  const scrollFn = function () {
+    const $rightside = document.getElementById('rightside')
+    const innerHeight = window.innerHeight + 56
+
+    // 當滾動條小于 56 的時候
+    if (document.body.scrollHeight <= innerHeight) {
+      $rightside.style.cssText = 'opacity: 1; transform: translateX(-58px)'
+      return
+    }
+
+    // find the scroll direction
+    function scrollDirection (currentTop) {
+      const result = currentTop > initTop // true is down & false is up
+      initTop = currentTop
+      return result
+    }
+
+    let initTop = 0
+    let isChatShow = true
+    const $header = document.getElementById('page-header')
+    const isChatBtnHide = typeof chatBtnHide === 'function'
+    const isChatBtnShow = typeof chatBtnShow === 'function'
+
+    const scrollTask = btf.throttle(() => {
+        const currentTop = window.scrollY || document.documentElement.scrollTop
+        const isDown = scrollDirection(currentTop)
+        if (currentTop > 56) {
+          $header.classList.add('is-top-bar','nav-visible')
+          if (isDown) {
+            if ($header.classList.contains('nav-visible')) $header.classList.add('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')
+          if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
+            $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
+          }
+        } else {
+          if (currentTop === 0) {
+            $header.classList.remove('is-top-bar')
+          }
+          $rightside.style.cssText = "opacity: ''; transform: ''"
+        }
+
+        if (document.body.scrollHeight <= innerHeight) {
+          $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
+        }
+      }, 200)
+    
+    window.scrollCollect = scrollTask
+
+    window.addEventListener('scroll', scrollCollect)
+  }
+
+  /**
+  * toc,anchor
+  */
+  const scrollFnToDo = function () {
+    const isToc = GLOBAL_CONFIG_SITE.isToc
+    const isAnchor = GLOBAL_CONFIG.isAnchor
+    const $article = document.getElementById('article-container')
+
+    if (!($article && (isToc || isAnchor))) return
+
+    let $tocLink, $cardToc, scrollPercent, autoScrollToc, isExpand
+
+    if (isToc) {
+      const $cardTocLayout = document.getElementById('card-toc')
+      $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
+      $tocLink = $cardToc.querySelectorAll('.toc-link')
+      const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
+      isExpand = $cardToc.classList.contains('is-expand')
+
+      scrollPercent = currentTop => {
+        const docHeight = $article.clientHeight
+        const winHeight = document.documentElement.clientHeight
+        const headerHeight = $article.offsetTop
+        const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
+        const scrollPercent = (currentTop - headerHeight) / (contentMath)
+        const scrollPercentRounded = Math.round(scrollPercent * 100)
+        const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
+        $tocPercentage.textContent = percentage
+      }
+
+      window.mobileToc = {
+        open: () => {
+          $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px'
+        },
+
+        close: () => {
+          $cardTocLayout.style.animation = 'toc-close .2s'
+          setTimeout(() => {
+            $cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''"
+          }, 100)
+        }
+      }
+
+      // toc元素點擊
+      $cardToc.addEventListener('click', e => {
+        e.preventDefault()
+        const target = e.target.classList
+        if (target.contains('toc-content')) return
+        const $target = target.contains('toc-link')
+          ? e.target
+          : e.target.parentElement
+        btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 300)
+        if (window.innerWidth < 900) {
+          window.mobileToc.close()
+        }
+      })
+
+      autoScrollToc = item => {
+        const activePosition = item.getBoundingClientRect().top
+        const sidebarScrollTop = $cardToc.scrollTop
+        if (activePosition > (document.documentElement.clientHeight - 100)) {
+          $cardToc.scrollTop = sidebarScrollTop + 150
+        }
+        if (activePosition < 100) {
+          $cardToc.scrollTop = sidebarScrollTop - 150
+        }
+      }
+    }
+
+    // find head position & add active class
+    const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
+    let detectItem = ''
+    const findHeadPosition = function (top) {
+      if (top === 0) {
+        return false
+      }
+
+      let currentId = ''
+      let currentIndex = ''
+
+      list.forEach(function (ele, index) {
+        if (top > btf.getEleTop(ele) - 80) {
+          const id = ele.id
+          currentId = id ? '#' + encodeURI(id) : ''
+          currentIndex = index
+        }
+      })
+
+      if (detectItem === currentIndex) return
+
+      if (isAnchor) btf.updateAnchor(currentId)
+
+      detectItem = currentIndex
+
+      if (isToc) {
+        $cardToc.querySelectorAll('.active').forEach(i => { i.classList.remove('active') })
+
+        if (currentId === '') {
+          return
+        }
+
+        const currentActive = $tocLink[currentIndex]
+        currentActive.classList.add('active')
+
+        setTimeout(() => {
+          autoScrollToc(currentActive)
+        }, 0)
+
+        if (isExpand) return
+        let parent = currentActive.parentNode
+
+        for (; !parent.matches('.toc'); parent = parent.parentNode) {
+          if (parent.matches('li')) parent.classList.add('active')
+        }
+      }
+    }
+
+    // main of scroll
+    window.tocScrollFn = function () {
+      return btf.throttle(function () {
+        const currentTop = window.scrollY || document.documentElement.scrollTop
+        isToc && scrollPercent(currentTop)
+        findHeadPosition(currentTop)
+      }, 100)()
+    }
+    window.addEventListener('scroll', tocScrollFn)
+  }
+
+  /**
+   * Rightside
+   */
+  const rightSideFn = {
+    switchReadMode: () => { // read-mode
+      const $body = document.body
+      $body.classList.add('read-mode')
+      const newEle = document.createElement('button')
+      newEle.type = 'button'
+      newEle.className = 'fas fa-sign-out-alt exit-readmode'
+      $body.appendChild(newEle)
+
+      function clickFn () {
+        $body.classList.remove('read-mode')
+        newEle.remove()
+        newEle.removeEventListener('click', clickFn)
+      }
+
+      newEle.addEventListener('click', clickFn)
+    },
+    switchDarkMode: () => { // Switch Between Light And Dark Mode
+      const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+      if (nowMode === 'light') {
+        activateDarkMode()
+        saveToLocal.set('theme', 'dark', 2)
+        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
+      } else {
+        activateLightMode()
+        saveToLocal.set('theme', 'light', 2)
+        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
+      }
+      // handle some cases
+      typeof utterancesTheme === 'function' && utterancesTheme()
+      typeof changeGiscusTheme === 'function' && changeGiscusTheme()
+      typeof FB === 'object' && window.loadFBComment && window.loadFBComment()
+      typeof runMermaid === 'function' && window.runMermaid()
+    },
+    showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
+      const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
+      rightsideHideClassList.toggle('show')
+      if (e.classList.contains('show')) {
+        rightsideHideClassList.add('status')
+        setTimeout(() => {
+          rightsideHideClassList.remove('status')
+        }, 300)
+      }
+      e.classList.toggle('show')
+    },
+    scrollToTop: () => { // Back to top
+      btf.scrollToDest(0, 500)
+    },
+    hideAsideBtn: () => { // Hide aside
+      const $htmlDom = document.documentElement.classList
+      $htmlDom.contains('hide-aside')
+        ? saveToLocal.set('aside-status', 'show', 2)
+        : saveToLocal.set('aside-status', 'hide', 2)
+      $htmlDom.toggle('hide-aside')
+    },
+
+    runMobileToc: () => {
+      if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
+      else window.mobileToc.close()
+    }
+  }
+
+  document.getElementById('rightside').addEventListener('click', function (e) {
+    const $target = e.target.id ? e.target : e.target.parentNode
+    switch ($target.id) {
+      case 'go-up':
+        rightSideFn.scrollToTop()
+        break
+      case 'rightside_config':
+        rightSideFn.showOrHideBtn($target)
+        break
+      case 'mobile-toc-button':
+        rightSideFn.runMobileToc()
+        break
+      case 'readmode':
+        rightSideFn.switchReadMode()
+        break
+      case 'darkmode':
+        rightSideFn.switchDarkMode()
+        break
+      case 'hide-aside-btn':
+        rightSideFn.hideAsideBtn()
+        break
+      default:
+        break
+    }
+  })
+
+  /**
+   * menu
+   * 側邊欄sub-menu 展開/收縮
+   */
+  const clickFnOfSubMenu = () => {
+    document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) {
+      item.addEventListener('click', function () {
+        this.classList.toggle('hide')
+      })
+    })
+  }
+
+  /**
+   * 複製時加上版權信息
+   */
+  const addCopyright = () => {
+    const copyright = GLOBAL_CONFIG.copyright
+    document.body.oncopy = (e) => {
+      e.preventDefault()
+      let textFont; const copyFont = window.getSelection(0).toString()
+      if (copyFont.length > copyright.limitCount) {
+        textFont = copyFont + '\n' + '\n' + '\n' +
+        copyright.languages.author + '\n' +
+        copyright.languages.link + window.location.href + '\n' +
+        copyright.languages.source + '\n' +
+        copyright.languages.info
+      } else {
+        textFont = copyFont
+      }
+      if (e.clipboardData) {
+        return e.clipboardData.setData('text', textFont)
+      } else {
+        return window.clipboardData.setData('text', textFont)
+      }
+    }
+  }
+
+  /**
+   * 網頁運行時間
+   */
+  const addRuntime = () => {
+    const $runtimeCount = document.getElementById('runtimeshow')
+    if ($runtimeCount) {
+      const publishDate = $runtimeCount.getAttribute('data-publishDate')
+      $runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime
+    }
+  }
+
+  /**
+   * 最後一次更新時間
+   */
+  const addLastPushDate = () => {
+    const $lastPushDateItem = document.getElementById('last-push-date')
+    if ($lastPushDateItem) {
+      const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate')
+      $lastPushDateItem.innerText = btf.diffDate(lastPushDate, true)
+    }
+  }
+
+  /**
+   * table overflow
+   */
+  const addTableWrap = () => {
+    const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
+    if ($table.length) {
+      $table.forEach(item => {
+        btf.wrap(item, 'div', { class: 'table-wrap' })
+      })
+    }
+  }
+
+  /**
+   * tag-hide
+   */
+  const clickFnOfTagHide = function () {
+    const $hideInline = document.querySelectorAll('#article-container .hide-button')
+    if ($hideInline.length) {
+      $hideInline.forEach(function (item) {
+        item.addEventListener('click', function (e) {
+          const $this = this
+          $this.classList.add('open')
+          const $fjGallery = $this.nextElementSibling.querySelectorAll('.fj-gallery')
+          $fjGallery.length && btf.initJustifiedGallery($fjGallery)
+        })
+      })
+    }
+  }
+
+  const tabsFn = {
+    clickFnOfTabs: function () {
+      document.querySelectorAll('#article-container .tab > button').forEach(function (item) {
+        item.addEventListener('click', function (e) {
+          const $this = this
+          const $tabItem = $this.parentNode
+
+          if (!$tabItem.classList.contains('active')) {
+            const $tabContent = $tabItem.parentNode.nextElementSibling
+            const $siblings = btf.siblings($tabItem, '.active')[0]
+            $siblings && $siblings.classList.remove('active')
+            $tabItem.classList.add('active')
+            const tabId = $this.getAttribute('data-href').replace('#', '')
+            const childList = [...$tabContent.children]
+            childList.forEach(item => {
+              if (item.id === tabId) item.classList.add('active')
+              else item.classList.remove('active')
+            })
+            const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .fj-gallery`)
+            if ($isTabJustifiedGallery.length > 0) {
+              btf.initJustifiedGallery($isTabJustifiedGallery)
+            }
+          }
+        })
+      })
+    },
+    backToTop: () => {
+      document.querySelectorAll('#article-container .tabs .tab-to-top').forEach(function (item) {
+        item.addEventListener('click', function () {
+          btf.scrollToDest(btf.getEleTop(btf.getParents(this, '.tabs')), 300)
+        })
+      })
+    }
+  }
+
+  const toggleCardCategory = function () {
+    const $cardCategory = document.querySelectorAll('#aside-cat-list .card-category-list-item.parent i')
+    if ($cardCategory.length) {
+      $cardCategory.forEach(function (item) {
+        item.addEventListener('click', function (e) {
+          e.preventDefault()
+          const $this = this
+          $this.classList.toggle('expand')
+          const $parentEle = $this.parentNode.nextElementSibling
+          if (btf.isHidden($parentEle)) {
+            $parentEle.style.display = 'block'
+          } else {
+            $parentEle.style.display = 'none'
+          }
+        })
+      })
+    }
+  }
+
+  const switchComments = function () {
+    let switchDone = false
+    const $switchBtn = document.querySelector('#comment-switch > .switch-btn')
+    $switchBtn && $switchBtn.addEventListener('click', function () {
+      this.classList.toggle('move')
+      document.querySelectorAll('#post-comment > .comment-wrap > div').forEach(function (item) {
+        if (btf.isHidden(item)) {
+          item.style.cssText = 'display: block;animation: tabshow .5s'
+        } else {
+          item.style.cssText = "display: none;animation: ''"
+        }
+      })
+
+      if (!switchDone && typeof loadOtherComment === 'function') {
+        switchDone = true
+        loadOtherComment()
+      }
+    })
+  }
+
+  const addPostOutdateNotice = function () {
+    const data = GLOBAL_CONFIG.noticeOutdate
+    const diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
+    if (diffDay >= data.limitDay) {
+      const ele = document.createElement('div')
+      ele.className = 'post-outdate-notice'
+      ele.textContent = data.messagePrev + ' ' + diffDay + ' ' + data.messageNext
+      const $targetEle = document.getElementById('article-container')
+      if (data.position === 'top') {
+        $targetEle.insertBefore(ele, $targetEle.firstChild)
+      } else {
+        $targetEle.appendChild(ele)
+      }
+    }
+  }
+
+  const lazyloadImg = () => {
+    window.lazyLoadInstance = new LazyLoad({
+      elements_selector: 'img',
+      threshold: 0,
+      data_src: 'lazy-src'
+    })
+  }
+
+  const relativeDate = function (selector) {
+    selector.forEach(item => {
+      const $this = item
+      const timeVal = $this.getAttribute('datetime')
+      $this.innerText = btf.diffDate(timeVal, true)
+      $this.style.display = 'inline'
+    })
+  }
+
+  const unRefreshFn = function () {
+    window.addEventListener('resize', () => {
+      adjustMenu(false)
+      btf.isHidden(document.getElementById('toggle-menu')) && mobileSidebarOpen && sidebarFn.close()
+    })
+
+    document.getElementById('menu-mask').addEventListener('click', e => { sidebarFn.close() })
+
+    clickFnOfSubMenu()
+    GLOBAL_CONFIG.islazyload && lazyloadImg()
+    GLOBAL_CONFIG.copyright !== undefined && addCopyright()
+  }
+
+  window.refreshFn = function () {
+    initAdjust()
+
+    if (GLOBAL_CONFIG_SITE.isPost) {
+      GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
+      GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
+    } else {
+      GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
+      GLOBAL_CONFIG.runtime && addRuntime()
+      addLastPushDate()
+      toggleCardCategory()
+    }
+
+    scrollFnToDo()
+    GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
+    addHighlightTool()
+    GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
+    scrollFn()
+
+    const $jgEle = document.querySelectorAll('#article-container .fj-gallery')
+    $jgEle.length && runJustifiedGallery($jgEle)
+
+    runLightbox()
+    addTableWrap()
+    clickFnOfTagHide()
+    tabsFn.clickFnOfTabs()
+    tabsFn.backToTop()
+    switchComments()
+    document.getElementById('toggle-menu').addEventListener('click', () => { sidebarFn.open() })
+  }
+
+  refreshFn()
+  unRefreshFn()
+})
diff --git a/source/js/scroll.js b/source/js/scroll.js
new file mode 100644
index 0000000..feb9f8c
--- /dev/null
+++ b/source/js/scroll.js
@@ -0,0 +1,71 @@
+PostActive()
+topPostScroll()
+
+//分类条
+function PostActive(){
+  var urlinfo = window.location.pathname;
+  urlinfo = decodeURIComponent(urlinfo)
+  console.log(urlinfo);
+  }
+
+//鼠标控制横向滚动
+function topPostScroll(){
+  if (document.getElementById("recent-post-top")){
+    let xscroll = document.getElementById("recent-post-top");
+  xscroll.addEventListener("mousewheel", function (e) {
+    //计算鼠标滚轮滚动的距离
+    let v = -e.wheelDelta / 2;
+    xscroll.scrollLeft += v;
+    //阻止浏览器默认方法
+    e.preventDefault();
+}, false);
+  }
+}
+
+tagBarActive()
+toptagBarScroll()
+
+//分类条
+function tagBarActive(){
+  var urlinfo = window.location.pathname;
+  urlinfo = decodeURIComponent(urlinfo)
+  console.log(urlinfo);
+  }
+
+//鼠标控制横向滚动
+function toptagBarScroll(){
+  if (document.getElementById("tag-bar-items")){
+    let xscroll = document.getElementById("tag-bar-items");
+  xscroll.addEventListener("mousewheel", function (e) {
+    //计算鼠标滚轮滚动的距离
+    let v = -e.wheelDelta / 2;
+    xscroll.scrollLeft += v;
+    //阻止浏览器默认方法
+    e.preventDefault();
+}, false);
+  }
+}
+
+categoryBarActive()
+topcategoryBarScroll()
+
+//分类条
+function categoryBarActive(){
+  var urlinfo = window.location.pathname;
+  urlinfo = decodeURIComponent(urlinfo)
+  console.log(urlinfo);
+  }
+
+//鼠标控制横向滚动
+function topcategoryBarScroll(){
+  if (document.getElementById("category-bar-items")){
+    let xscroll = document.getElementById("category-bar-items");
+  xscroll.addEventListener("mousewheel", function (e) {
+    //计算鼠标滚轮滚动的距离
+    let v = -e.wheelDelta / 2;
+    xscroll.scrollLeft += v;
+    //阻止浏览器默认方法
+    e.preventDefault();
+}, false);
+  }
+}
\ No newline at end of file
diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js
new file mode 100644
index 0000000..f0b9f3a
--- /dev/null
+++ b/source/js/search/algolia.js
@@ -0,0 +1,163 @@
+window.addEventListener('load', () => {
+  const openSearch = () => {
+    const bodyStyle = document.body.style
+    bodyStyle.width = '100%'
+    bodyStyle.overflow = 'hidden'
+    btf.animateIn(document.getElementById('search-mask'), 'to_show 0.5s')
+    btf.animateIn(document.querySelector('#algolia-search .search-dialog'), 'titleScale 0.5s')
+    setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100)
+
+    // shortcut: ESC
+    document.addEventListener('keydown', function f (event) {
+      if (event.code === 'Escape') {
+        closeSearch()
+        document.removeEventListener('keydown', f)
+      }
+    })
+  }
+
+  const closeSearch = () => {
+    const bodyStyle = document.body.style
+    bodyStyle.width = ''
+    bodyStyle.overflow = ''
+    btf.animateOut(document.querySelector('#algolia-search .search-dialog'), 'search_close .5s')
+    btf.animateOut(document.getElementById('search-mask'), 'to_hide 0.5s')
+  }
+
+  const searchClickFn = () => {
+    document.querySelector('#search-button > .search').addEventListener('click', openSearch)
+  }
+
+  const searchClickFnOnce = () => {
+    document.getElementById('search-mask').addEventListener('click', closeSearch)
+    document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
+  }
+
+  const cutContent = content => {
+    if (content === '') return ''
+
+    const firstOccur = content.indexOf('')
+
+    let start = firstOccur - 30
+    let end = firstOccur + 120
+    let pre = ''
+    let post = ''
+
+    if (start <= 0) {
+      start = 0
+      end = 140
+    } else {
+      pre = '...'
+    }
+
+    if (end > content.length) {
+      end = content.length
+    } else {
+      post = '...'
+    }
+
+    let 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!')
+  }
+
+  const search = instantsearch({
+    indexName: algolia.indexName,
+    searchClient: algoliasearch(algolia.appId, algolia.apiKey),
+    searchFunction(helper) {
+      helper.state.query && helper.search()
+    },
+  })
+
+  const configure = instantsearch.widgets.configure({
+    hitsPerPage: 5
+  })
+
+  const searchBox = instantsearch.widgets.searchBox({
+    container: '#algolia-search-input',
+    showReset: false,
+    showSubmit: false,
+    placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder,
+    showLoadingIndicator: true
+  })
+
+  const hits = instantsearch.widgets.hits({
+    container: '#algolia-hits',
+    templates: {
+      item(data) {
+        const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
+        const result = data._highlightResult
+        const content = result.contentStripTruncate
+                        ? cutContent(result.contentStripTruncate.value)
+                        : result.contentStrip
+                        ? cutContent(result.contentStrip.value)
+                        : result.content
+                        ? cutContent(result.content.value)
+                        : ''
+        return `
+          
+          ${result.title.value || 'no-title'}
+          
+          
    ${content}
    `
+      },
+      empty: function (data) {
+        return (
+          '
    ' +
+          GLOBAL_CONFIG.algolia.languages.hits_empty.replace(/\$\{query}/, data.query) +
+          '
    '
+        )
+      }
+    }
+  })
+
+  const stats = instantsearch.widgets.stats({
+    container: '#algolia-info > .algolia-stats',
+    templates: {
+      text: function (data) {
+        const stats = GLOBAL_CONFIG.algolia.languages.hits_stats
+          .replace(/\$\{hits}/, data.nbHits)
+          .replace(/\$\{time}/, data.processingTimeMS)
+        return (
+          `
    ${stats}`
+        )
+      }
+    }
+  })
+
+  const powerBy = instantsearch.widgets.poweredBy({
+    container: '#algolia-info > .algolia-poweredBy',
+  })
+
+  const pagination = instantsearch.widgets.pagination({
+    container: '#algolia-pagination',
+    totalPages: 5,
+    templates: {
+      first: '',
+      last: '',
+      previous: '',
+      next: ''
+    }
+  })
+
+
+  search.addWidgets([configure,searchBox,hits,stats,powerBy,pagination]) // add the widgets to the instantsearch instance
+
+  search.start()
+
+  searchClickFn()
+  searchClickFnOnce()
+
+  window.addEventListener('pjax:complete', () => {
+    getComputedStyle(document.querySelector('#algolia-search .search-dialog')).display === 'block' && closeSearch()
+    searchClickFn()
+  })
+
+  window.pjax && search.on('render', () => {
+    window.pjax.refresh(document.getElementById('algolia-hits'))
+  })
+})
diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js
new file mode 100644
index 0000000..6c1ca7d
--- /dev/null
+++ b/source/js/search/local-search.js
@@ -0,0 +1,188 @@
+window.addEventListener('load', () => {
+  let loadFlag = false
+  let dataObj = []
+  const $searchMask = document.getElementById('search-mask')
+
+  const openSearch = () => {
+    const bodyStyle = document.body.style
+    bodyStyle.width = '100%'
+    bodyStyle.overflow = 'hidden'
+    btf.animateIn($searchMask, 'to_show 0.5s')
+    btf.animateIn(document.querySelector('#local-search .search-dialog'), 'titleScale 0.5s')
+    setTimeout(() => { document.querySelector('#local-search-input input').focus() }, 100)
+    if (!loadFlag) {
+      search()
+      loadFlag = true
+    }
+    // shortcut: ESC
+    document.addEventListener('keydown', function f (event) {
+      if (event.code === 'Escape') {
+        closeSearch()
+        document.removeEventListener('keydown', f)
+      }
+    })
+  }
+
+  const closeSearch = () => {
+    const bodyStyle = document.body.style
+    bodyStyle.width = ''
+    bodyStyle.overflow = ''
+    btf.animateOut(document.querySelector('#local-search .search-dialog'), 'search_close .5s')
+    btf.animateOut($searchMask, 'to_hide 0.5s')
+  }
+
+  const searchClickFn = () => {
+    document.querySelector('#search-button > .search').addEventListener('click', openSearch)
+  }
+
+  const searchClickFnOnce = () => {
+    document.querySelector('#local-search .search-close-button').addEventListener('click', closeSearch)
+    $searchMask.addEventListener('click', closeSearch)
+    if (GLOBAL_CONFIG.localSearch.preload) dataObj = fetchData(GLOBAL_CONFIG.localSearch.path)
+  }
+
+  // check url is json or not
+  const isJson = url => {
+    const reg = /\.json$/
+    return reg.test(url)
+  }
+
+  const fetchData = async (path) => {
+    let data = []
+    const response = await fetch(path)
+    if (isJson(path)) {
+      data = await response.json()
+    } else {
+      const res = await response.text()
+      const t = await new window.DOMParser().parseFromString(res, 'text/xml')
+      const a = await t
+      data = [...a.querySelectorAll('entry')].map(item =>{
+        return {
+          title: item.querySelector('title').textContent,
+          content: item.querySelector('content') && item.querySelector('content').textContent,
+          url: item.querySelector('url').textContent
+        }
+      })
+    }
+    if (response.ok) {
+      const $loadDataItem = document.getElementById('loading-database')
+      $loadDataItem.nextElementSibling.style.display = 'block'
+      $loadDataItem.remove()
+    }
+    return data
+  }
+
+  const search = () => {
+    if (!GLOBAL_CONFIG.localSearch.preload) {
+      dataObj = fetchData(GLOBAL_CONFIG.localSearch.path)
+    }
+
+    const $input = document.querySelector('#local-search-input input')
+    const $resultContent = document.getElementById('local-search-results')
+    const $loadingStatus = document.getElementById('loading-status')
+
+    $input.addEventListener('input', function () {
+      const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
+      if (keywords[0] !== '') $loadingStatus.innerHTML = ''
+
+      $resultContent.innerHTML = ''
+      let str = '
    '
+      if (keywords.length <= 0) return
+      let count = 0
+      // perform local searching
+      dataObj.then(data => {
+        data.forEach(data => {
+          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 : GLOBAL_CONFIG.root + data.url
+          let indexTitle = -1
+          let indexContent = -1
+          let firstOccur = -1
+          // only match articles with not empty titles and contents
+          if (dataTitle !== '' || dataContent !== '') {
+            keywords.forEach((keyword, i) => {
+              indexTitle = dataTitle.indexOf(keyword)
+              indexContent = dataContent.indexOf(keyword)
+              if (indexTitle < 0 && indexContent < 0) {
+                isMatch = false
+              } else {
+                if (indexContent < 0) {
+                  indexContent = 0
+                }
+                if (i === 0) {
+                  firstOccur = indexContent
+                }
+              }
+            })
+          } else {
+            isMatch = false
+          }
+
+          // show search results
+          if (isMatch) {
+            if (firstOccur >= 0) {
+              // cut out 130 characters
+              // let start = firstOccur - 30 < 0 ? 0 : firstOccur - 30
+              // let end = firstOccur + 50 > dataContent.length ? dataContent.length : firstOccur + 50
+              let start = firstOccur - 30
+              let end = firstOccur + 100
+              let pre = ''
+              let post = ''
+
+              if (start < 0) {
+                start = 0
+              }
+
+              if (start === 0) {
+                end = 100
+              } else {
+                pre = '...'
+              }
+
+              if (end > dataContent.length) {
+                end = dataContent.length
+              } else {
+                post = '...'
+              }
+
+              let matchContent = dataContent.substring(start, end)
+
+              // highlight all keywords
+              keywords.forEach(keyword => {
+                const regS = new RegExp(keyword, 'gi')
+                matchContent = matchContent.replace(regS, '' + keyword + '')
+                dataTitle = dataTitle.replace(regS, '' + keyword + '')
+              })
+
+              str += '
    ' + dataTitle + ''
+              count += 1
+
+              if (dataContent !== '') {
+                str += '
    ' + pre + matchContent + post + '
    '
+              }
+            }
+            str += '
    '
+          }
+        })
+        if (count === 0) {
+          str += '
    ' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
+            '
    '
+        }
+        str += '
    '
+        $resultContent.innerHTML = str
+        if (keywords[0] !== '') $loadingStatus.innerHTML = ''
+        window.pjax && window.pjax.refresh($resultContent)
+      })
+    })
+  }
+
+  searchClickFn()
+  searchClickFnOnce()
+
+  // pjax
+  window.addEventListener('pjax:complete', () => {
+    !btf.isHidden($searchMask) && closeSearch()
+    searchClickFn()
+  })
+})
diff --git a/source/js/tw_cn.js b/source/js/tw_cn.js
new file mode 100644
index 0000000..ec9d37d
--- /dev/null
+++ b/source/js/tw_cn.js
@@ -0,0 +1,100 @@
+/* eslint-disable no-undef */
+document.addEventListener('DOMContentLoaded', function () {
+  const translate = GLOBAL_CONFIG.translate
+  const snackbarData = GLOBAL_CONFIG.Snackbar
+  const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文
+  const translateDelay = translate.translateDelay // 延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
+  const msgToTraditionalChinese = translate.msgToTraditionalChinese // 此處可以更改為你想要顯示的文字
+  const msgToSimplifiedChinese = translate.msgToSimplifiedChinese // 同上，但兩處均不建議更改
+  let currentEncoding = defaultEncoding
+  const targetEncodingCookie = 'translate-chn-cht'
+  let targetEncoding =
+  saveToLocal.get(targetEncodingCookie) === undefined
+    ? defaultEncoding
+    : Number(saveToLocal.get('translate-chn-cht'))
+  let translateButtonObject
+  const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
+
+  function translateText (txt) {
+    if (txt === '' || txt == null) return ''
+    if (currentEncoding === 1 && targetEncoding === 2) return Simplized(txt)
+    else if (currentEncoding === 2 && targetEncoding === 1) { return Traditionalized(txt) } else return txt
+  }
+  function translateBody (fobj) {
+    let objs
+    if (typeof fobj === 'object') objs = fobj.childNodes
+    else objs = document.body.childNodes
+    for (let i = 0; i < objs.length; i++) {
+      const obj = objs.item(i)
+      if (
+        '||BR|HR|'.indexOf('|' + obj.tagName + '|') > 0 ||
+      obj === translateButtonObject
+      ) { continue }
+      if (obj.title !== '' && obj.title != null) { obj.title = translateText(obj.title) }
+      if (obj.alt !== '' && obj.alt != null) obj.alt = translateText(obj.alt)
+      if (obj.placeholder !== '' && obj.placeholder != null) obj.placeholder = translateText(obj.placeholder)
+      if (
+        obj.tagName === 'INPUT' &&
+      obj.value !== '' &&
+      obj.type !== 'text' &&
+      obj.type !== 'hidden'
+      ) { obj.value = translateText(obj.value) }
+      if (obj.nodeType === 3) obj.data = translateText(obj.data)
+      else translateBody(obj)
+    }
+  }
+  function translatePage () {
+    if (targetEncoding === 1) {
+      currentEncoding = 1
+      targetEncoding = 2
+      translateButtonObject.innerHTML = msgToTraditionalChinese
+      saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
+      translateBody()
+      if (isSnackbar) btf.snackbarShow(snackbarData.cht_to_chs)
+    } else if (targetEncoding === 2) {
+      currentEncoding = 2
+      targetEncoding = 1
+      translateButtonObject.innerHTML = msgToSimplifiedChinese
+      saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
+      translateBody()
+      if (isSnackbar) btf.snackbarShow(snackbarData.chs_to_cht)
+    }
+  }
+  function JTPYStr () {
+    return '万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳熘爱爷牍牦牵牺犊犟状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铍铎铏铐铑铒铕铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗错锚锜锞锟锠锡锢锣锤锥锦锨锩锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镆镇镈镉镊镌镍镎镏镐镑镒镕镖镗镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾龙历志制一台皋准复猛钟注范签'
+  }
+  function FTPYStr () {
+    return '萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮衝決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁嗬噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊溜愛爺牘犛牽犧犢強狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗讚贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈹鐸鉶銬銠鉺銪鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺錯錨錡錁錕錩錫錮鑼錘錐錦鍁錈錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鏌鎮鎛鎘鑷鐫鎳鎿鎦鎬鎊鎰鎔鏢鏜鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽龍歷誌製壹臺臯準復勐鐘註範籤'
+  }
+  function Traditionalized (cc) {
+    let str = ''
+    const ss = JTPYStr()
+    const tt = FTPYStr()
+    for (let i = 0; i < cc.length; i++) {
+      if (cc.charCodeAt(i) > 10000 && ss.indexOf(cc.charAt(i)) !== -1) { str += tt.charAt(ss.indexOf(cc.charAt(i))) } else str += cc.charAt(i)
+    }
+    return str
+  }
+  function Simplized (cc) {
+    let str = ''
+    const ss = JTPYStr()
+    const tt = FTPYStr()
+    for (let i = 0; i < cc.length; i++) {
+      if (cc.charCodeAt(i) > 10000 && tt.indexOf(cc.charAt(i)) !== -1) { str += ss.charAt(tt.indexOf(cc.charAt(i))) } else str += cc.charAt(i)
+    }
+    return str
+  }
+  function translateInitialization () {
+    translateButtonObject = document.getElementById('translateLink')
+    if (translateButtonObject) {
+      if (currentEncoding !== targetEncoding) {
+        setTimeout(translateBody, translateDelay)
+        if (targetEncoding === 1) translateButtonObject.innerHTML = msgToSimplifiedChinese
+        else translateButtonObject.innerHTML = msgToTraditionalChinese
+      }
+      translateButtonObject.addEventListener('click', translatePage, false)
+    }
+  }
+  translateInitialization()
+  document.addEventListener('pjax:complete', translateInitialization)
+})
diff --git a/source/js/utils.js b/source/js/utils.js
new file mode 100644
index 0000000..a1be368
--- /dev/null
+++ b/source/js/utils.js
@@ -0,0 +1,278 @@
+const btf = {
+  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
+        }
+        previous = now
+        func.apply(context, args)
+        if (!timeout) context = args = null
+      } else if (!timeout && options.trailing !== false) {
+        timeout = setTimeout(later, remaining)
+      }
+    }
+
+    return throttled
+  },
+
+  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 = false, duration = 2000) => {
+    const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
+    const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark
+    Snackbar.show({
+      text: text,
+      backgroundColor: bg,
+      showAction: showAction,
+      duration: duration,
+      pos: position,
+      customClass: 'snackbar-css'
+    })
+  },
+
+  diffDate: (d, more = false) => {
+    const dateNow = new Date()
+    const datePost = new Date(d)
+    const dateDiff = dateNow.getTime() - datePost.getTime()
+    const minute = 1000 * 60
+    const hour = minute * 60
+    const day = hour * 24
+    const month = day * 30
+
+    let result
+    if (more) {
+      const monthCount = dateDiff / month
+      const dayCount = dateDiff / day
+      const hourCount = dateDiff / hour
+      const minuteCount = dateDiff / minute
+
+      if (monthCount > 12) {
+        result = datePost.toLocaleDateString().replace(/\//g, '-')
+      } else if (monthCount >= 1) {
+        result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month
+      } else if (dayCount >= 1) {
+        result = parseInt(dayCount) + ' ' + GLOBAL_CONFIG.date_suffix.day
+      } else if (hourCount >= 1) {
+        result = parseInt(hourCount) + ' ' + GLOBAL_CONFIG.date_suffix.hour
+      } else if (minuteCount >= 1) {
+        result = parseInt(minuteCount) + ' ' + GLOBAL_CONFIG.date_suffix.min
+      } else {
+        result = GLOBAL_CONFIG.date_suffix.just
+      }
+    } else {
+      result = parseInt(dateDiff / day)
+    }
+    return result
+  },
+
+  loadComment: (dom, callback) => {
+    if ('IntersectionObserver' in window) {
+      const observerItem = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          callback()
+          observerItem.disconnect()
+        }
+      }, { threshold: [0] })
+      observerItem.observe(dom)
+    } else {
+      callback()
+    }
+  },
+
+  scrollToDest: (pos, time = 500) => {
+    const currentPos = window.pageYOffset
+    if (currentPos > pos) 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)
+      }
+    })
+  },
+
+  animateIn: (ele, text) => {
+    ele.style.display = 'block'
+    ele.style.animation = text
+  },
+
+  animateOut: (ele, text) => {
+    ele.addEventListener('animationend', function f () {
+      ele.style.display = ''
+      ele.style.animation = ''
+      ele.removeEventListener('animationend', f)
+    })
+    ele.style.animation = text
+  },
+
+  getParents: (elem, selector) => {
+    for (; elem && elem !== document; elem = elem.parentNode) {
+      if (elem.matches(selector)) return elem
+    }
+    return null
+  },
+
+  siblings: (ele, selector) => {
+    return [...ele.parentNode.children].filter((child) => {
+      if (selector) {
+        return child !== ele && child.matches(selector)
+      }
+      return child !== ele
+    })
+  },
+
+  /**
+   * @param {*} selector
+   * @param {*} eleType the type of create element
+   * @param {*} options object key: value
+   */
+  wrap: (selector, eleType, options) => {
+    const creatEle = document.createElement(eleType)
+    for (const [key, value] of Object.entries(options)) {
+      creatEle.setAttribute(key, value)
+    }
+    selector.parentNode.insertBefore(creatEle, selector)
+    creatEle.appendChild(selector)
+  },
+
+  unwrap: el => {
+    const elParentNode = el.parentNode
+    if (elParentNode !== document.body) {
+      elParentNode.parentNode.insertBefore(el, elParentNode)
+      elParentNode.parentNode.removeChild(elParentNode)
+    }
+  },
+
+  isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
+
+  getEleTop: ele => {
+    let actualTop = ele.offsetTop
+    let current = ele.offsetParent
+
+    while (current !== null) {
+      actualTop += current.offsetTop
+      current = current.offsetParent
+    }
+
+    return actualTop
+  },
+
+  loadLightbox: ele => {
+    const service = GLOBAL_CONFIG.lightbox
+
+    if (service === 'mediumZoom') {
+      const zoom = mediumZoom(ele)
+      zoom.on('open', e => {
+        const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
+        zoom.update({
+          background: photoBg
+        })
+      })
+    }
+
+    if (service === 'fancybox') {
+      ele.forEach(i => {
+        if (i.parentNode.tagName !== 'A') {
+          const dataSrc = i.dataset.lazySrc || i.src
+          const dataCaption = i.title || i.alt || ''
+          btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc })
+        }
+      })
+
+      if (!window.fancyboxRun) {
+        Fancybox.bind('[data-fancybox]', {
+          Hash: false,
+          Thumbs: {
+            autoStart: false
+          }
+        })
+        window.fancyboxRun = true
+      }
+    }
+  },
+
+  initJustifiedGallery: function (selector) {
+    selector.forEach(function (i) {
+      if (!btf.isHidden(i)) {
+        fjGallery(i, {
+          itemSelector: '.fj-gallery-item',
+          rowHeight: 220,
+          gutter: 4,
+          onJustify: function () {
+            this.$container.style.opacity = '1'
+          }
+        })
+      }
+    })
+  },
+
+  updateAnchor: (anchor) => {
+    if (anchor !== window.location.hash) {
+      if (!anchor) anchor = location.pathname
+      const title = GLOBAL_CONFIG_SITE.title
+      window.history.replaceState({
+        url: location.href,
+        title: title
+      }, title, anchor)
+    }
+  }
+}