💄 Style: modify detail style (#40 )

💄 Style: modify watermark opacity to 1.25% for exmaple site
🎨 Style: enhance table style (#40 )
2026-09-01 19:22:41 +00:00 · 2022-03-14 15:09:24 +08:00 · 2022-03-14 12:35:10 +08:00 · 2022-03-14 12:25:04 +08:00 · 2022-03-14 11:17:13 +08:00 · 2022-03-12 16:15:52 +08:00
2474 changed files with 12524 additions and 14669 deletions
@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
  - name: Theme Documentation 主题文档
-    url: https://hugoloveit.com/categories/documentation/
+    url: https://fixit.lruihao.cn/categories/documentation/
    about: Please read the documentation carefully. 请先仔细阅读主题文档.
@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 1000
@@ -0,0 +1,45 @@
+name: Update Algolia Search Index
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+jobs:
+  algolia-atomic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: 'latest'
+          extended: true
+
+      - name: Build
+        run: |
+            npm install
+            npm run build
+
+      - name: Update Algolia Index (en)
+        env:
+          ALGOLIA_APP_ID: YKOM6PKLUY
+          ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
+          ALGOLIA_INDEX_NAME: 'index.en'
+          ALGOLIA_INDEX_FILE: './exampleSite/public/index.json'
+        run: |
+          npm run algolia
+
+      - name: Update Algolia Index (zh-cn)
+        env:
+          ALGOLIA_APP_ID: YKOM6PKLUY
+          ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
+          ALGOLIA_INDEX_NAME: 'index.zh-cn'
+          ALGOLIA_INDEX_FILE: './exampleSite/public/zh-cn/index.json'
+        run: |
+          npm run algolia
@@ -0,0 +1,21 @@
+name: Hugo build check
+on:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+jobs:
+  Actions-Hugo-Check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v2
+        with:
+          submodules: recursive  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: latest
+          extended: true
+      - name: Build Hugo static files
+        run: hugo -v --source=exampleSite --themesDir ../.. --gc
@@ -0,0 +1,65 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ master ]
+  schedule:
+    - cron: '45 0 * * 1'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1
@@ -4,6 +4,7 @@ public/

 node_modules/
 build/
+resources/

 ## OS Files
 # Windows
@@ -17,3 +18,7 @@ $RECYCLE.BIN/

 # Linux
 .directory
+
+# Hugo
+.hugo_build.lock
+jsconfig.json
@@ -0,0 +1,76 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+<!-- Releases see https://github.com/Lruihao/FixIt/releases -->
+
+## v0.2.13 [2022.3.14]
+
+- :recycle: Refactor: page layout ([#65](https://github.com/Lruihao/FixIt/issues/65))
+- :tada: Feat: add Artalk comment support ([#54](https://github.com/Lruihao/FixIt/issues/54), @hiifong[#57](https://github.com/Lruihao/FixIt/pull/57))
+- :tada: Feat: add Waline comment support ([#36](https://github.com/Lruihao/FixIt/issues/36))
+- :tada: Feat: add Twikoo comment support ([#64](https://github.com/Lruihao/FixIt/issues/64))
+- :sparkles: Feat: add recently updated section ([#50](https://github.com/Lruihao/FixIt/issues/50))
+- :sparkles: Feat: add article expiration reminder support ([#51](https://github.com/Lruihao/FixIt/issues/51))
+- :sparkles: Feat: add pageStyle option ([#62](https://github.com/Lruihao/FixIt/issues/62))
+- :sparkles: Style: add media style for print view ([#61](https://github.com/Lruihao/FixIt/issues/61))
+- :sparkles: Feat: add Gravatar mirror site support (@ctj12461[#66](https://github.com/Lruihao/FixIt/pull/66))
+- :sparkles: Feat: add archive count display ([#33](https://github.com/Lruihao/FixIt/issues/33))
+- :sparkles: Feat: add `details` shortcode ([#68](https://github.com/Lruihao/FixIt/issues/68))
+- :sparkles: Feat: add `center-quote` shortcode ([#69](https://github.com/Lruihao/FixIt/issues/69))
+- :sparkles: Feat: add markdown support for **title** parameter of the admonition shortcode
+- :sparkles: Feat: add 9 newly supported social links ([#17](https://github.com/Lruihao/FixIt/issues/17))
+- :zap: Perf: enhance highlight feature (GitHub syntax supported) and fix some css bugs ([#43](https://github.com/Lruihao/FixIt/issues/43))
+  - Inline Code
+  - Indented Code
+  - Block Fenced Code
+  - gist shortcode
+- :sparkles: Feat: add `params.page.code.edit` option support ([#76](https://github.com/Lruihao/FixIt/issues/76))
+- :mag: Feat: add 360 and sougou seo support
+- :bug: Fix: remove source map of local libraries to avoid 404 error ([#67](https://github.com/Lruihao/FixIt/issues/67))
+- :fire: Feat: remove shortcode cardlink ([#42](https://github.com/Lruihao/FixIt/issues/42))
+- :lipstick: Style: more refined theme style ([#40](https://github.com/Lruihao/FixIt/issues/40))
+- :pencil2: Style: fix typo *discription* should be **description** ([#60](https://github.com/Lruihao/FixIt/issues/60))
+- :wrench: Chore(update-libs):
+  - Update cell-watermark 1.0.3 and CDN support (fontFamily supported)
+  - Update animate.css 3.7.2 -> 4.1.1 ([#74](https://github.com/Lruihao/FixIt/issues/74))
+- :wrench: Chore: add atomic-algolia for exampleSite ([#70](https://github.com/Lruihao/FixIt/issues/70))
+- **Full Changelog:** [`v0.2.12...v0.2.13`](https://github.com/Lruihao/FixIt/compare/v0.2.12...v0.2.13)
+
+## v0.2.12 [2022-1-27]
+
+- :tada: Feat: add PWA support
+- :tada: Feat: add Watermark support ([#16](https://github.com/Lruihao/FixIt/issues/16))
+- :tada: Feat: add "不蒜子" count and site run time ([#18](https://github.com/Lruihao/FixIt/issues/18))
+- :sparkles: Feat: add pangu.js support ([#20](https://github.com/Lruihao/FixIt/issues/20))
+- :sparkles: Feat: add public network security config (only in China) ([#15](https://github.com/Lruihao/FixIt/issues/15))
+- :sparkles: Feat: add CustomJS option ([#24](https://github.com/Lruihao/FixIt/issues/24))
+- :sparkles: Feat: add theme embedded archeTypes
+- :mag: Feat(SEO): optimize SEO meta ([#30](https://github.com/Lruihao/FixIt/issues/30))
+- :zap: Feat: remove lib smooth-scroll ([#1](https://github.com/Lruihao/FixIt/issues/1)) replaced by CSS native properties scroll-margin, scroll-behavior ([#39](https://github.com/Lruihao/FixIt/issues/39))
+- :zap: Perf: merge shortcode cardlink (deprecated v0.2.13) into shortcode link and add 'download' param ([#42](https://github.com/Lruihao/FixIt/issues/42))
+- :zap: Perf: optimize JS loading ([#25](https://github.com/Lruihao/FixIt/issues/25))
+- :recycle: Refactor: header title DOM and add subtitle option ([#26](https://github.com/Lruihao/FixIt/issues/26))
+- :bug: Fix: set mermaid theme as 'default' when initialization ([#38](https://github.com/Lruihao/FixIt/issues/38))
+- :bug: Fix: typeit print code error ([#19](https://github.com/Lruihao/FixIt/issues/19))
+- :bug: Fix: pre element overflow error ([#29](https://github.com/Lruihao/FixIt/issues/29))
+- :bug: Fix: toc display error without content header ([#21](https://github.com/Lruihao/FixIt/issues/21))
+- :lipstick: Style: style detail adjustments, change scroll-behavior to smooth, taxonomy, header, footer, shortcode style etc.
+- :pencil: Docs: improve demo site documentation ([#37](https://github.com/Lruihao/FixIt/issues/37))
+- :wrench: Chore: add commands `fixit_checker.sh`
+- :wrench: Chore(i18n): change some translations
+- :arrow_up: Chore: update all third-party libraries
+- **Full Changelog:** [`v0.2.11...v0.2.12`](https://github.com/Lruihao/FixIt/compare/v0.2.11...v0.2.12)
+## v0.2.11 [2021-12-19]
+
+> :tada: The beginning of FixIt to fix the theme LoveIt.
+
+- :sparkles: Feat: add cardlink shortcode ([Lruihao/hugo-blog@`df9eca2`](https://github.com/Lruihao/hugo-blog/commit/df9eca26af43287748fd8d4654014357a8269b0b)) 
+- :tada: Feat: add friends layout template
+- :wrench: Chore(i18n): add translations for Traditional Chinese ([Lruihao/hugo-blog@`df9eca2`](https://github.com/Lruihao/hugo-blog/commit/b86157d8b84830bda415ab2488580afd843acac2))
+- :bug: Fix: mobile style ([Lruihao/hugo-blog#19](https://github.com/Lruihao/hugo-blog/issues/19))
+- :bug: Style: fix content h1 style ([Lruihao/hugo-blog#8](https://github.com/Lruihao/hugo-blog/issues/8))
+- :bug: Fix: `.params.author` should be `$params.author`  ([Lruihao/hugo-blog#1](https://github.com/Lruihao/hugo-blog/issues/1))
+- **Full Changelog:** [`v0.2.10...v0.2.11`](https://github.com/Lruihao/FixIt/compare/v0.2.10...v0.2.11)
+
+## v0.2.10 :arrow_down: [2020-5-29 before]
+
+Thanks [dillonzq/LoveIt](https://github.com/dillonzq/LoveIt/releases)
@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+1024@lruihao.cn.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.
@@ -0,0 +1,74 @@
+## How to contribute to this project
+
+First, fork this repository by clicking the fork button.
+
+Next, clone your forked repo.
+
+```
+git clone https://github.com/example/FixIt.git
+cd FixIt
+```
+
+Then, install the dev dependencies.
+
+```
+npm install
+```
+
+And now you are ready to go!
+
+Here are some useful commands.
+
+```
+npm run babel #build theme.js with babel
+npm run build #build theme.js and then build the static site
+npm run start #build theme.js and then run a local debugging server
+npm run start:production #build theme.js and then run a local debugging server in production environment
+npm run serve #run a local debugging server without building a new theme.js
+npm run serve:production #run a local debugging server in production environment without building a new theme.js
+```
+
+Finally, create a new pull request at https://github.com/Lruihao/FixIt/pulls to submit your contribution 🎉
+
+## Git standard for developers
+
+### Branches
+
+| Branch | Description |
+| :-- | :-- |
+| master | _The branch open to the public and release versions_ |
+| RC branch | _The development branch of the next version, e.g. v0.2.12-RC_ |
+| single feature | _The branch to enhancements or fixes_ |
+
+### Merge events
+
+| event | merge |
+| :-- | :-- |
+| release | **RC branch => master:** `--rebase` |
+| PR | **others:master => master:** `--rebase` |
+| single feature| **feature branch => RC branch:** `--merge` |
+
+### Commit message
+
+#### Format
+> {emoji} {type}: {subject within 50 words} (#{issue/pull request})
+
+#### Emoji
+- https://gitmoji.dev
+- [vscode plugin](https://github.com/maixiaojie/git-emoji-zh.git)
+- utools plugin `GitEmoji`
+
+#### Message
+
+| Emoji                                         | Type     | Example                                                      | Description (No Ambiguous)                                   |
+| :-------------------------------------------- | :------- | :----------------------------------------------------------- | :----------------------------------------------------------- |
+| :tada:  <br>:sparkles:                        | Feat     | Feat: add {feature}                                          | new feature                                                  |
+| :truck:                                       |          | Feat: adjust/migrate {feature name}，{change details}        | For the adjustment feature, it is necessary to describe the current situation (before) and after adjustment (after) |
+| :fire:                                        |          | Feat: delete {feature name}, {deletion reason}               | If the feature is deleted, the reason for deletion must be explained |
+| :bug: <br>:construction: <br>:rotating_light: | Fix      | Fix: fix {bug description}                                   | Fix known bugs                                               |
+| :art: <br>:lipstick: <br>:pencil2:            | Style    | Style: Typesetting/CSS style {optimizing content}            | Changes that do not affect code operation, such as code layout and style change |
+| :recycle:                                     | Refactor | Refactor: override {feature name}                            | It is neither a new function nor a code change to fix a bug. Simply rewriting the code of a function does not affect the function result |
+| :zap:                                         | Perf     | Perf: improve performance {function name}, {improve content} | Optimize code performance                                    |
+| :rewind:                                      | Revert   | Revert: restore version {commit message of restore version}  | Restore the version of one commit                            |
+| :pencil: <br>:pencil2:                              | Docs     | Docs: revise comments/update documents                     | Adjustment of documents and notes                            |
+| :wrench:                                      | Chore    | Chore: update plugin version                                 | Changes in the construction process or auxiliary tools       |
@@ -1,8 +1,8 @@
 The MIT License (MIT)

 Copyright (c) 2018 LIUZHICHAO.COM
-Copyright (c) 2019 DILLONZQ.COM
-Copyright (c) 2021 LRUIHAO.CN
+Copyright (c) 2019-2020 DILLONZQ.COM
+Copyright (c) 2021-2022 LRUIHAO.CN

 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in
@@ -1,21 +1,199 @@
 # FixIt Theme | Hugo

 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/Lruihao/FixIt?style=flat-square)](https://github.com/Lruihao/FixIt/releases)
+[![GitHub commits since tagged version](https://img.shields.io/github/commits-since/Lruihao/FixIt/v0.2.10?style=flat-square)](https://github.com/Lruihao/FixIt/compare/v0.2.10...master)
 [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/Lruihao/FixIt?style=flat-square)](https://github.com/Lruihao/FixIt/blob/master/LICENSE)

+English README | [简体中文说明](https://github.com/Lruihao/FixIt/blob/master/README.zh-cn.md)
+
 > **FixIt** is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/).

 It is based on the original [LoveIt Theme](https://github.com/dillonzq/LoveIt), [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/Fastbyte01/KeepIt).

-**It is mainly based on [LoveIt Theme](https://github.com/dillonzq/LoveIt) that's repository has stopped maintenance, so i just wanna fix it.**
+[LoveIt Theme](https://github.com/dillonzq/LoveIt) is a awesome hugo theme for us, I'm sorry that it's repository has been out of maintenance for a long time, so I rebuilt a new fork named FixIt so that I can better **Fix It** and make it more user-friendly.
+
+The FixIt theme inherits the excellent functions of these themes, and adds new functions and optimizations on this basis. Please read [Why Choose FixIt](#why-choose-fixit) to learn more.

 ![Hugo Theme FixIt](https://github.com/Lruihao/FixIt/raw/master/images/Apple-Devices-Preview.png)

-[Read more](https://github.com/dillonzq/LoveIt)
-## [Demo Site](https://lruihao.cn)
+## Getting started
+Head to this [documentation page](https://fixit.lruihao.cn/theme-documentation-basics/) for a complete guidence to get started with the FixIt theme.

-To see this theme in action, here is a live [demo site](https://lruihao.cn) which is rendered with **FixIt** theme.
+### [Demo Site](https://fixit.lruihao.cn)
+To see this theme in action, here is a live [demo site](https://fixit.lruihao.cn) which is rendered with **FixIt** theme.
+
+### [Documentation](https://fixit.lruihao.cn/categories/documentation/)
+Build Documentation Locally:
+
+```bash
+hugo server --source=exampleSite
+```
+
+Of course, you can also read the [FixIt wiki](https://github.com/Lruihao/FixIt/wiki) directly.
+
+## Migrate from LoveIt
+
+If you are currently using the LoveIt theme (or some other themes), it is very easy to migrate to FixIt.
+
+You can add this repo as a submodule of your site directory.
+
+```bash
+git submodule add https://github.com/Lruihao/FixIt.git themes/FixIt
+```
+
+And later you can update the submodule in your site directory to the latest commit using this command:
+
+```bash
+git submodule update --remote --merge
+```
+
+Or use shell command `fixit_checker.sh` to update and commit in the theme directory.
+
+```bash
+sh fixit_checker.sh
+```
+
+Next, go to the `config.toml` and change the default theme to `FixIt`.
+
+```diff
+- theme = "LoveIt"
+ theme = "FixIt"
+```
+
+Now the migration is finished and everything is ready 🎉
+
+## Why choose FixIt
+
+* Custom **Header**
+* Custom **CSS Style**
+* A new **home page**, compatible with the latest version of Hugo
+* A lot of **style detail adjustments,** including color, font size, margins, code preview style
+* More readable **dark mode**
+* Some beautiful **CSS animations**
+* Easy-to-use and self-expanding **table of contents**
+* More **social links**, **share sites** and **comment system**
+* **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
+* **Copy code** to clipboard with one click
+* Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
+* Extended Markdown syntax for **ruby annotation**
+* Extended Markdown syntax for **fraction**
+* **Mathematical formula** supported by [KaTeX](https://katex.org/)
+* **Diagram syntax** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
+* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
+* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+* Embedded **music player** supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
+* **Bilibili** player supported
+* Kinds of **admonitions** shortcode supported
+* Custom style shortcodes supported
+* **CDN** for all third-party libraries supported
+* **PWA (Progressive Web App)** supported
+* **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
+* **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
+* **Card type** link shortcode
+* **Friends** page embedded template
+* ...
+
+In short,  
+if you prefer the design language and freedom of the FixIt theme,  
+if you want to use the extended Font Awesome icons conveniently,  
+if you want to embed mathematical formulas, flowcharts, music or Bilibili videos in your posts,  
+the FixIt theme may be more suitable for you.  
+
+## Features
+
+### Performance and SEO
+
+* Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
+* Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
+* **[Google Analytics](https://analytics.google.com/analytics)** supported
+* **[Fathom Analytics](https://usefathom.com/)** supported
+* Search engine **verification** supported (Google, Bind, Yandex and Baidu)
+* **CDN** for third-party libraries supported
+* Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
+
+### Appearance and Layout
+
+* **Responsive** layout
+* **Light/Dark** mode
+* Globally consistent **design language**
+* **Pagination** supported
+* Easy-to-use and self-expanding **table of contents**
+* **Multilanguage** supported and i18n ready
+* Beautiful **CSS animation**
+
+### Social and Comment Systems
+
+* **Gravatar** supported by [Gravatar](https://gravatar.com)
+* Local **Avatar** supported
+* Up to **73** social links supported
+* Up to **28** share sites supported
+* **Disqus** comment system supported by [Disqus](https://disqus.com)
+* **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
+* **Valine** comment system supported by [Valine](https://valine.js.org/)
+* **Waline** comment system supported by [Waline](https://waline.js.org/)
+* **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
+* **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
+* **Commento** comment system supported by [Commento](https://commento.io/)
+* **Utterances** comment system supported by [Utterances](https://utteranc.es/)
+* **Artalk** comment system supported by [Artalk](https://artalk.js.org/)
+* **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)
+
+### Extended Features
+
+* **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
+* **Twemoji** supported
+* Automatically **highlighting** code
+* **Copy code** to clipboard with one click
+* **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
+* Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
+* Extended Markdown syntax for **ruby annotation**
+* Extended Markdown syntax for **fraction**
+* **Mathematical formula** supported by [KaTeX](https://katex.org/)
+* **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
+* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
+* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+* **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
+* **Bilibili player** shortcode
+* Kinds of **admonitions** shortcode
+* **Custom style** shortcode
+* **Custom script** shortcode
+* **Animated typing** supported by [TypeIt](https://typeitjs.com/)
+* **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
+* **PWA (Progressive Web App)** supported
+* **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
+* **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
+* **Card type** link shortcode
+* **Friends** page embedded template
+* ...
+
+## Multilingual and i18n
+
+FixIt supports the following languages:
+
+* English
+* Simplified Chinese
+* French
+* Polish
+* Brazilian Portuguese
+* Italian
+* Spanish
+* German
+* Serbian
+* Russian
+* Romanian
+* Vietnamese
+* Traditional Chinese
+* [Contribute with a new language](https://github.com/Lruihao/FixIt/pulls)
+[Languages Compatibility](https://fixit.lruihao.cn/theme-documentation-basics/#language-compatibility)
+
+## [Roadmap](https://github.com/Lruihao/FixIt/projects/1)
+
+## [Changelog](https://github.com/Lruihao/FixIt/blob/master/CHANGELOG.md)
+
+## Questions, ideas, bugs, pull requests
+
+All feedback is welcome! Head over to the [issue tracker](https://github.com/Lruihao/FixIt/issues).

 ## License

@@ -27,7 +205,6 @@ Thanks to the authors of following resources included in the theme:
 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
 * [Animate.css](https://daneden.github.io/animate.css/)
-* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
@@ -47,6 +224,11 @@ Thanks to the authors of following resources included in the theme:
 * [Gitalk](https://github.com/gitalk/gitalk)
 * [Valine](https://valine.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
+* [cell-watermark](https://github.com/Lruihao/watermark)
+* [pangu.js](https://github.com/vinta/pangu.js)
+* [Artalk](https://artalk.js.org/)
+* [Waline](https://waline.js.org/)
+* [Twikoo](https://twikoo.js.org/)

 ## Author

@@ -0,0 +1,234 @@
+# FixIt 主题 | Hugo
+
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/Lruihao/FixIt?style=flat-square)](https://github.com/Lruihao/FixIt/releases)
+[![GitHub commits since tagged version](https://img.shields.io/github/commits-since/Lruihao/FixIt/v0.2.10?style=flat-square)](https://github.com/Lruihao/FixIt/compare/v0.2.10...master)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
+[![License](https://img.shields.io/github/license/Lruihao/FixIt?style=flat-square)](https://github.com/Lruihao/FixIt/blob/master/LICENSE)
+
+[English README](https://github.com/Lruihao/FixIt/blob/master/README.md) | 简体中文说明
+
+> [FixIt](https://github.com/Lruihao/FixIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
+
+它的原型基于 [LoveIt 主题](https://github.com/dillonzq/LoveIt), [LeaveIt 主题](https://github.com/liuzc/LeaveIt) 和 [KeepIt 主题](https://github.com/Fastbyte01/KeepIt)。
+
+[LoveIt 主题](https://github.com/dillonzq/LoveIt) 对我们来说是一个很棒的 Hugo 主题，很抱歉的是它的存储库已经停止维护很长一段时间了，所以我重建了一个名为 FixIt 的新主题，这样我可以更好地 **Fix It** 并使它用户体验更好。
+
+FixIt 主题继承了这些主题的优秀功能，并在此基础上添加了新的功能与优化，请阅读 [为什么选择 FixIt](#为什么选择-FixIt) 来了解更多。
+
+![Hugo Theme FixIt](https://github.com/Lruihao/FixIt/raw/master/images/Apple-Devices-Preview.png)
+
+## 立即开始
+前往这篇 [文档](https://fixit.lruihao.cn/zh-cn/theme-documentation-basics/)，阅读关于安装与使用的详细指南。
+
+### 主题 [预览](https://fixit.lruihao.cn/zh-cn/)
+为了直观地浏览主题特性，这里有一个基于 **FixIt** 主题渲染的 [预览网站](https://fixit.lruihao.cn/zh-cn/)。
+
+### [文档](https://fixit.lruihao.cn/zh-cn/categories/documentation/)
+在本地构建文档：
+```bash
+hugo server --source=exampleSite
+```
+
+当然，你也可以直接阅读 [FixIt 主题维基](https://github.com/Lruihao/FixIt/wiki)
+
+## 从 LoveIt 迁移
+
+如果你现在正在使用 LoveIt 主题（或者一些其他的主题），你可以很容易地迁移至 FixIt。
+
+你可以将这个主题仓库添加为你的网站目录的子模块。
+
+```bash
+git submodule add https://github.com/Lruihao/FixIt.git themes/FixIt
+```
+
+之后，你可以在站点目录通过这条命令来将主题更新至最新版本：
+
+```bash
+git submodule update --remote --merge
+```
+
+或者在主题目录中使用 shell 命令 `fixit_checker.sh` 将主题更新至最新版本：
+
+```bash
+sh fixit_checker.sh
+```
+
+接着，前往 `config.toml` 并将默认主题更改为 `FixIt`。
+
+```diff
+- theme = "LoveIt"
+ theme = "FixIt"
+```
+
+这样就完成了迁移工作，现在一切准备就绪 🎉
+
+## 为什么选择 FixIt
+
+* 自定义**标题栏**
+* 自定义 **CSS 样式**
+* 焕然一新的**主页**，已经兼容最新版 Hugo
+* 大量的**样式细节调整**，包括颜色、字体大小、边距、代码预览样式
+* 可读性更强的**深色模式**
+* 一些美观的 **CSS 动画**
+* 易用和自动展开的**文章目录**
+* 支持更多的**社交链接**、**网站分享**和**评论系统**
+* 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
+* 一键**复制代码**到剪贴板
+* 支持基于 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
+* 支持**上标注释**的扩展 Markdown 语法
+* 支持**分数**的扩展 Markdown 语法
+* 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
+* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表**生成功能
+* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化**生成功能
+* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** 地图显示功能
+* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌**音乐播放器**
+* 支持内嵌 **Bilibili** 视频
+* 支持多种**注释**的 shortcode
+* 支持自定义样式的 shortcode
+* 支持所有第三方库的 **CDN**
+* 支持**渐进式网页应用**
+* 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
+* 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
+* 支持**卡片式链接**的 shortcode
+* 支持**友情链接**的页面模板
+* ...
+
+所以，  
+如果你更偏好 FixIt 主题的设计语言和自由度，  
+如果你想便捷地使用扩展的 Font Awesome 图标，  
+如果你想在文章内嵌数学公式、流程图、音乐或是 Bilibili 视频，  
+那么，FixIt 主题可能是更适合你。  
+
+## 特性
+
+### 性能和 SEO
+
+* **性能**优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， 99/100 的移动设备得分和 100/100 的桌面设备得分
+* 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
+* 支持 **[Google Analytics](https://analytics.google.com/analytics)**
+* 支持 **[Fathom Analytics](https://usefathom.com/)**
+* 支持搜索引擎的**网站验证** (Google, Bind, Yandex and Baidu)
+* 支持所有第三方库的 **CDN**
+* 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为**懒加载**
+
+### 外观和布局
+
+* **响应式**布局
+* **浅色/深色** 主题模式
+* 全局一致的**设计语言**
+* 支持**分页**
+* 易用和自动展开的**文章目录**
+* 支持**多语言**和国际化
+* 美观的 **CSS 动画**
+
+### 社交和评论系统
+
+* 支持 **[Gravatar](https://gravatar.com)** 头像
+* 支持本地**头像**
+* 支持多达 **73** 种社交链接
+* 支持多达 **28** 种网站分享
+* 支持 **[Disqus](https://disqus.com)** 评论系统
+* 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
+* 支持 **[Valine](https://valine.js.org/)** 评论系统
+* 支持 **[Waline](https://waline.js.org/)** 评论系统
+* 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
+* 支持 **[Telegram comments](https://comments.app/) 评论**系统
+* 支持 **[Commento](https://commento.io/)** 评论系统
+* 支持 **[Utterances](https://utteranc.es/)** 评论系统
+* 支持 **[Artalk](https://artalk.js.org/)** 评论系统
+* 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统
+
+### 扩展功能
+
+* 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
+* 支持 **Twemoji**
+* 支持**代码高亮**
+* 一键**复制代码**到剪贴板
+* 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
+* 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
+* 支持**上标注释**的扩展 Markdown 语法
+* 支持**分数**的扩展 Markdown 语法
+* 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
+* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
+* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
+* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
+* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
+* 支持 **Bilibili 视频** shortcode
+* 支持多种**注释**的 shortcode
+* 支持**自定义样式**的 shortcode
+* 支持**自定义脚本**的 shortcode
+* 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
+* 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
+* 支持**渐进式网页应用**
+* 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
+* 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
+* 支持**卡片式链接**的 shortcode
+* 支持**友情链接**的页面模板
+* ...
+
+## 多语言和国际化
+
+FixIt 支持下列语言：
+
+* 英语
+* 简体中文
+* 法语
+* 波兰语
+* 巴西葡萄牙语
+* 意大利语
+* 西班牙语
+* 德语
+* 塞尔维亚语
+* 俄语
+* 罗马尼亚语
+* 越南语
+* 繁体中文
+* [贡献一种新的语言](https://github.com/Lruihao/FixIt/pulls)
+[语言兼容性](https://fixit.lruihao.cn/zh-cn/theme-documentation-basics/#language-compatibility)
+
+## [路线图](https://github.com/Lruihao/FixIt/projects/1)
+
+## [更新日志](https://github.com/Lruihao/FixIt/blob/master/CHANGELOG.md)
+
+## 问题、想法、 bugs 和 PRs
+
+所有的反馈都是欢迎的！详见 [issue tracker](https://github.com/Lruihao/FixIt/issues)。
+
+## 许可协议
+
+FixIt 根据 **MIT** 许可协议授权。 更多信息请查看 [LICENSE 文件](https://github.com/Lruihao/FixIt/blob/master/LICENSE)。
+
+FixIt 主题中用到了以下项目，感谢它们的作者：
+
+* [normalize.css](https://github.com/necolas/normalize.css)
+* [Font Awesome](https://fontawesome.com/)
+* [Simple Icons](https://github.com/simple-icons/simple-icons)
+* [Animate.css](https://daneden.github.io/animate.css/)
+* [autocomplete.js](https://github.com/algolia/autocomplete.js)
+* [Lunr.js](https://lunrjs.com/)
+* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
+* [lazysizes](https://github.com/aFarkas/lazysizes)
+* [object-fit-images](https://github.com/fregante/object-fit-images)
+* [Twemoji](https://github.com/twitter/twemoji)
+* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
+* [clipboard.js](https://github.com/zenorocha/clipboard.js)
+* [Sharer.js](https://github.com/ellisonleao/sharer.js)
+* [TypeIt](https://typeitjs.com/)
+* [KaTeX](https://katex.org/)
+* [mermaid](https://github.com/knsv/mermaid)
+* [ECharts](https://echarts.apache.org/)
+* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+* [APlayer](https://github.com/MoePlayer/APlayer)
+* [MetingJS](https://github.com/metowolf/MetingJS)
+* [Gitalk](https://github.com/gitalk/gitalk)
+* [Valine](https://valine.js.org/)
+* [cookieconsent](https://github.com/osano/cookieconsent)
+* [cell-watermark](https://github.com/Lruihao/watermark)
+* [pangu.js](https://github.com/vinta/pangu.js)
+* [Artalk](https://artalk.js.org/)
+* [Waline](https://waline.js.org/)
+* [Twikoo](https://twikoo.js.org/)
+
+## 作者
+
+[Lruihao](https://lruihao.cn)
@@ -2,27 +2,7 @@
 title: "{{ replace .TranslationBaseName "-" " " | title }}"
 subtitle: ""
 date: {{ .Date }}
-lastmod: {{ .Date }}
-draft: true
-author: ""
-authorLink: ""
 description: ""
-
-tags: []
-categories: []
-
-hiddenFromHomePage: false
-hiddenFromSearch: false
-
-featuredImage: ""
-featuredImagePreview: ""
-
-toc:
-  enable: true
-math:
-  enable: false
-lightgallery: false
-license: ""
+keywords: ""
+comment: false
 ---
-
-<!--more-->
@@ -0,0 +1,31 @@
+---
+title: "{{ replace .TranslationBaseName "-" " " | title }}"
+subtitle: ""
+type: "friends"
+date: {{ .Date }}
+description: "{{ .Site.Author.name }}'s friends"
+keywords: 
+  - Hugo
+  - friends tempalate
+comment: false
+---
+
+<!-- When you set data `friends.yml` in `yourProject/data/` directory, it will be automatically loaded here. -->
+---
+<!-- You can define additional content below for this page. -->
+## Base info
+
+```yaml
+- nickname: Lruihao
+  avatar: https://lruihao.cn/images/avatar.jpg
+  url: https://lruihao.cn
+  description: Lruihao's Note
+```
+
+## Friendly Reminder
+
+{{< admonition info "Notice" true >}}
+1. If you want to exchange link, please leave a comment in the above format. (personal non-commercial blogs / websites only)
+2. Warn: Website failure, stop maintenance and improper content may be cancelled!
+3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
+{{< /admonition >}}
@@ -0,0 +1,10 @@
+---
+type: "offline"
+description: "{{ T "offlineTitle" }} - {{ .Site.Title }}"
+keywords: 
+  - PWA
+  - offline
+  - 离线
+---
+
+<!-- You need do nothing for this page. -->
@@ -0,0 +1,40 @@
+---
+title: "{{ replace .TranslationBaseName "-" " " | title }}"
+subtitle: ""
+date: {{ .Date }}
+draft: true
+author: ""
+authorLink: ""
+description: ""
+keywords: ""
+license: ""
+comment: false
+weight: 0
+
+tags:
+- draft
+categories:
+- draft
+
+hiddenFromHomePage: false
+hiddenFromSearch: false
+
+summary: ""
+resources:
+- name: featured-image
+  src: featured-image.jpg
+- name: featured-image-preview
+  src: featured-image-preview.jpg
+
+toc:
+  enable: true
+math:
+  enable: false
+lightgallery: false
+seo:
+  images: []
+
+# See details front matter: /theme-documentation-content/#front-matter
+---
+
+<!--more-->
@@ -0,0 +1,40 @@
+---
+title: "{{ replace .TranslationBaseName "-" " " | title }}"
+subtitle: ""
+date: {{ .Date }}
+draft: true
+author: ""
+authorLink: ""
+description: ""
+keywords: ""
+license: ""
+comment: false
+weight: 0
+
+tags:
+- draft
+categories:
+- draft
+
+hiddenFromHomePage: false
+hiddenFromSearch: false
+
+summary: ""
+resources:
+- name: featured-image
+  src: featured-image.jpg
+- name: featured-image-preview
+  src: featured-image-preview.jpg
+
+toc:
+  enable: true
+math:
+  enable: false
+lightgallery: false
+seo:
+  images: []
+
+# See details front matter: /theme-documentation-content/#front-matter
+---
+
+<!--more-->
@@ -4,17 +4,26 @@ html {
  font-display: swap;
  font-size: $global-font-size;
  line-height: $global-line-height;
-  width:100%;
+  width: 100%;
+  scroll-behavior: smooth;
+  overflow: overlay;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
 }

 /* scrollbar, only support webkit */
 ::-webkit-scrollbar {
-  width: .5rem;
-  height: .5rem;
+  width: 0.5rem;
+  height: 0.5rem;
 }

 ::-webkit-scrollbar-thumb {
  background-color: $scrollbar-color;
+  @include border-radius($global-border-radius);

  &:hover {
    background-color: $scrollbar-hover-color;
@@ -24,7 +33,7 @@ html {
 ::selection {
  background-color: $selection-color;

-  [theme=dark] & {
+  [theme='dark'] & {
    background-color: $selection-color-dark;
  }
 }
@@ -35,21 +44,26 @@ body {
  @include overflow-wrap(break-word);
  scrollbar-color: auto;

-  &[theme=dark] {
+  &[theme='dark'] {
    color: $global-font-color-dark;
    background-color: $global-background-color-dark;
  }
 }

+img {
+  @include object-fit(contain);
+  @include border-radius($global-border-radius/2);
+}
+
+iframe {
+  @include border-radius($global-border-radius);
+}
+
@include ms;
@include link(true, true);

-@import "../_partial/mask";
-@import "../_partial/icon";
-@import "../_partial/details";
-@import "../_partial/fixed-button";
-@import "../_partial/cookieconsent";
-
-img {
-  @include object-fit(contain);
-}
+@import '../_partial/mask';
+@import '../_partial/icon';
+@import '../_partial/details';
+@import '../_partial/fixed-button';
+@import '../_partial/cookieconsent';
@@ -8,8 +8,20 @@
  main {
    flex: 1 0 auto;

-    .container {
+    aside:first-child {
+      order: 2;
+    }
+
+    &.container {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
      padding: 0 1rem;
    }
+
+    &.container-reverse {
+      @extend .container;
+      flex-direction: row-reverse;
+    }
  }
 }
@@ -1,12 +1,62 @@
+@media only screen and (min-width: 1441px) {
+  .page {
+    width: 60%;
+
+    [page-style='wide'] & {
+      width: 64%;
+    }
+
+    [page-style='narrow'] & {
+      max-width: 800px;
+    }
+  }
+
+  aside {
+    width: 20%;
+
+    [page-style='wide'] & {
+      width: 18%;
+    }
+
+    [page-style='narrow'] & {
+      width: calc(50% - 400px);
+    }
+  }
+}
+
@media only screen and (max-width: 1440px) {
  .page {
    width: 56%;
+
+    [page-style='wide'] & {
+      width: 60%;
+    }
+  }
+
+  aside {
+    width: 22%;
+
+    [page-style='wide'] & {
+      width: 20%;
+    }
  }
 }

@media only screen and (max-width: 1200px) {
  .page {
    width: 52%;
+
+    [page-style='wide'] & {
+      width: 56%;
+    }
+  }
+
+  aside {
+    width: 24%;
+
+    [page-style='wide'] & {
+      width: 22%;
+    }
  }

  #header-desktop .header-wrapper {
@@ -19,8 +69,8 @@
 }

@media only screen and (max-width: 960px) {
-  #toc-auto {
-    display: none;
+  aside {
+    display: none !important;
  }

  #toc-static {
@@ -28,7 +78,7 @@
  }

  .page {
-    width: 80%;
+    width: 80% !important;
  }

  #header-desktop .header-wrapper {
@@ -45,19 +95,15 @@
    display: block;
  }

-  body.blur {
-    overflow: hidden;
-  }
-
  .page {
-    width: 100%;
+    width: 100% !important;

-    [header-mobile] & {
-      padding-top: $header-height;
-    }
-
-    [header-mobile=normal] & {
-      padding-top: 0;
+    .content {
+      [id] {
+        [header-mobile='normal'] & {
+          scroll-margin-top: 0;
+        }
+      }
    }

    .categories-card {
@@ -67,14 +113,48 @@
    }
  }

-  .copyright {
-    .copyright-line {
-      .icp-splitter {
-        display: none;
-      }
-      .icp-br {
-        display: block;
-      }
+  footer {
+    .footer-container {
+      font-size: 0.618rem;
    }
  }
 }
+
+@media only print {
+  @page {
+    size: A4 portrait;
+    margin: 1.27cm;
+  }
+
+  .page {
+    width: 100% !important;
+    padding-top: 0 !important;
+
+    .single-title,
+    .single-subtitle,
+    .post-meta {
+      text-align: center;
+    }
+
+    h1:not(.single-title),
+    .page-break-before {
+      page-break-before: always;
+    }
+
+    .page-break-after {
+      page-break-after: always;
+    }
+  }
+
+  .print-d-none,
+  header,
+  footer .footer-line:not(.powered):not(.copyright),
+  #toc-auto,
+  .post-info-share,
+  .post-info-more section:last-child,
+  .post-nav,
+  #fixed-buttons,
+  #comments {
+    display: none !important;
+  }
+}
@@ -47,19 +47,19 @@
 }

@mixin placeholder($color) {
-  input::-webkit-input-placeholder{
+  input::-webkit-input-placeholder {
    color: $color;
  }

-  input:-moz-placeholder{
+  input:-moz-placeholder {
    color: $color;
  }

-  input::-moz-placeholder{
+  input::-moz-placeholder {
    color: $color;
  }

-  input:-ms-input-placeholder{
+  input:-ms-input-placeholder {
    color: $color;
  }

@@ -1,7 +1,7 @@
@mixin details-transition-open {
-  @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+  @include transition(max-height 0.2s cubic-bezier(0, 1, 0, 1) -0.1s);
 }

@mixin details-transition-close {
-  @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+  @include transition(max-height 0.2s cubic-bezier(0.5, 0, 1, 0) 0s);
 }
@@ -1,4 +1,4 @@
-@import "_compatibility";
-@import "_link";
-@import "_blur";
-@import "_details";
+@import '_compatibility';
+@import '_link';
+@import '_blur';
+@import '_details';
@@ -1,10 +1,12 @@
@mixin link($light, $dark) {
-  a, a::before, a::after {
+  a,
+  a::before,
+  a::after {
    text-decoration: none;

    color: if($light, $global-link-color, $single-link-color);

-    [theme=dark] & {
+    [theme='dark'] & {
      color: if($dark, $global-link-color-dark, $single-link-color-dark);
    }
  }
@@ -13,7 +15,7 @@
  a:hover {
    color: if($light, $global-link-hover-color, $single-link-hover-color);

-    [theme=dark] & {
+    [theme='dark'] & {
      color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
    }
  }
@@ -1,6 +1,14 @@
 .archive {
  .single-title {
    text-align: right;
+
+    sup {
+      color: $global-font-secondary-color;
+
+      [theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
  }

  .group-title {
@@ -8,6 +16,6 @@
    margin-bottom: 1rem;
  }

-  @import "../_partial/_archive/terms";
-  @import "../_partial/_archive/tags";
+  @import '../_partial/_archive/terms';
+  @import '../_partial/_archive/tags';
 }
@@ -1,9 +1,9 @@
 /**
- * @Description: Style of layout named 'Friend links'.
- * @Author: lruihao.cn
- * @Updated:  2021/9/20 19:26
+ * @Description: Style of layout named 'friends'.
+ * @Author: Lruihao <https://lruihao.cn>
+ * @Updated:  2022/3/11 21:36
 */
- 
+
 .friend-links {
  margin-top: 1rem;
  display: flex;
@@ -21,11 +21,11 @@
  height: 200px;
  font-size: 1rem;
  text-align: center;
-  background: rgba(255,255,255,0.3);
-  box-sizing: border-box; 
+  background: rgba(255, 255, 255, 0.3);
+  box-sizing: border-box;
  box-shadow: 3px 3px 5px #aaa;
-  border-radius: 5px;
-  border:none;
+  @include border-radius($global-border-radius);
+  border: none;
  transition-duration: 0.3s;
  margin-bottom: 1rem;
  display: flex;
@@ -40,13 +40,13 @@
 .friend-avatar {
  object-fit: cover;
  object-position: center;
-  width: 100%!important;
-  height: 150px!important;
-  border-radius: 5px;
+  width: 100% !important;
+  height: 150px !important;
+  @include border-radius($global-border-radius);
  margin: 0;
  padding: 0;
 }
-.friend-nickname{
+.friend-nickname {
  display: block;
  position: relative;
  color: #2bbc8a;
@@ -60,4 +60,4 @@
 }
 .friend-nickname:hover {
  color: #d480aa;
-}
+}
@@ -1,11 +1,11 @@
 .home {
  .home-profile {
-    @include transform(translateY( 16vh));
-    padding: 0 0 .5rem;
+    @include transform(translateY(16vh));
+    padding: 0 0 0.5rem;
    text-align: center;

    .home-avatar {
-      padding: .5rem;
+      padding: 0.5rem;

      img {
        display: inline-block;
@@ -13,12 +13,12 @@
        height: auto;
        margin: 0 auto;
        @include border-radius(100%);
-        @include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
+        @include box-shadow(0 0 0 0.3618em rgba(0, 0, 0, 0.05));
        @include transition(all 0.4s ease);

        &:hover {
          position: relative;
-          @include transform(translateY(-.75rem));
+          @include transform(translateY(-0.75rem));
        }
      }
    }
@@ -27,18 +27,18 @@
      font-size: 1.25rem;
      font-weight: bold;
      margin: 0;
-      padding: .5rem;
+      padding: 0.5rem;
    }

    .home-subtitle {
      font-size: 1rem;
      font-weight: normal;
      margin: 0;
-      padding: .5rem;
+      padding: 0.5rem;
    }

    .links {
-      padding: .5rem;
+      padding: 0.5rem;
      font-size: 1.5rem;

      a * {
@@ -47,7 +47,7 @@

      img {
        height: 1.5rem;
-        padding: 0 .25rem;
+        padding: 0 0.25rem;
      }
    }

@@ -56,10 +56,10 @@
      line-height: 1.5rem;
      font-weight: normal;
      margin: 0;
-      padding: .5rem;
+      padding: 0.5rem;
      color: $global-font-secondary-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $global-font-secondary-color-dark;
      }
    }
@@ -78,11 +78,11 @@

  .summary {
    padding-top: 1rem;
-    padding-bottom: .8rem;
+    padding-bottom: 0.8rem;
    color: $global-font-color;
    border-bottom: 1px dashed $global-border-color;

-    [theme=dark] & {
+    [theme='dark'] & {
      color: $global-font-color-dark;
      border-bottom: 1px dashed $global-border-color-dark;
    }
@@ -121,14 +121,14 @@
    .content {
      @include box(vertical);
      -webkit-line-clamp: 3;
-      margin-top: .3rem;
+      margin-top: 0.3rem;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      @include overflow-wrap(break-word);
      color: $global-font-secondary-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $global-font-secondary-color-dark;
      }

@@ -143,7 +143,7 @@
        display: inline;

        &::after {
-          content: "\A";
+          content: '\A';
          white-space: pre;
        }
      }
@@ -154,21 +154,22 @@

      @include link(false, true);

-      b, strong {
+      b,
+      strong {
        color: $global-font-secondary-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $global-font-secondary-color-dark;
        }
      }
    }

    .post-footer {
-      margin-top: .4rem;
+      margin-top: 0.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
-      font-size: .875rem;
+      font-size: 0.875rem;

      @include link(false, false);

@@ -1,23 +1,23 @@
 .page {
  position: relative;
-  max-width: 800px;
-  width: 60%;
-  margin: 0 auto;

-  [header-desktop] & {
-    padding-top: $header-height;
-  }
+  .content {
+    [id] {
+      scroll-margin-top: $header-height;

-  [header-desktop=normal] & {
-    padding-top: 0;
+      [header-desktop='normal'] & {
+        scroll-margin-top: 0;
+      }
+    }
  }

  @include blur;
 }

-@import "_single";
-@import "_special";
-@import "_archive";
-@import "_home";
-@import "_404";
-@import "_friends";
+@import '_single';
+@import '_special';
+@import '_archive';
+@import '_home';
+@import '_404';
+@import '_offline';
+@import '_friends';
@@ -0,0 +1,19 @@
+#content-offline {
+  @include transform(translateY(30vh));
+  text-align: center;
+
+  .offline-title {
+    font-size: 3.6rem;
+  }
+  .offline-subtitle {
+    margin: 0.4rem 0;
+    font-size: 1rem;
+    font-weight: normal;
+    font-style: italic;
+    line-height: 100%;
+    color: #57606a;
+  }
+  .error-text {
+    font-size: 1.2rem;
+  }
+}
@@ -1,15 +1,16 @@
-@import "../_partial/_single/toc";
+@import '../_partial/_single/toc';

 .single {
  .single-title {
-    margin: 1rem 0 .5rem;
+    padding: 1rem 0 0.5rem;
+    margin: 0;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 140%;
  }

  .single-subtitle {
-    margin: .4rem 0;
+    margin: 0.4rem 0;
    font-size: 1.2rem;
    font-weight: normal;
    font-style: italic;
@@ -17,14 +18,14 @@
  }

  .post-meta {
-    font-size: .875rem;
+    font-size: 0.875rem;
    color: $global-font-secondary-color;

    span {
      display: inline-block;
    }

-    [theme=dark] & {
+    [theme='dark'] & {
      color: $global-font-secondary-color-dark;
    }

@@ -36,7 +37,7 @@
  }

  .featured-image {
-    margin: .5rem 0 1rem 0;
+    margin: 0.5rem 0 1rem 0;

    img {
      display: block;
@@ -52,7 +53,8 @@
  }

  .content {
-    > h1, > h2 {
+    > h1,
+    > h2 {
      font-size: 1.5rem;

      & code {
@@ -92,7 +94,7 @@
      font-weight: bold;
      margin: 1.2rem 0;

-      [theme=dark] & {
+      [theme='dark'] & {
        font-weight: bolder;
      }
    }
@@ -103,28 +105,29 @@
    > h5,
    > h6 {
      > .header-mark::before {
-        content: "|";
-        margin-right: .3125rem;
+        content: '|';
+        margin-right: 0.3125rem;
        color: $single-link-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $single-link-color-dark;
        }
      }
    }

    > h2 > .header-mark::before {
-      content: "#";
+      content: '#';
    }

    p {
-      margin: .5rem 0;
+      margin: 0.5rem 0;
    }

-    b, strong {
+    b,
+    strong {
      font-weight: bold;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: #ddd;
      }
    }
@@ -134,17 +137,20 @@
    a {
      @include overflow-wrap(break-word);

-      [theme=dark] & b, [theme=dark] & strong {
+      [theme='dark'] & b,
+      [theme='dark'] & strong {
        color: $single-link-color-dark;
      }
    }

-    [theme=dark] a:hover b, [theme=dark] a:hover strong {
+    [theme='dark'] a:hover b,
+    [theme='dark'] a:hover strong {
      color: $single-link-hover-color-dark;
    }

-    ul, ol {
-      margin: .5rem 0;
+    ul,
+    ol {
+      margin: 0.5rem 0;
      padding-left: 2.5rem;
    }

@@ -159,7 +165,7 @@
        color: $global-font-secondary-color;
      }

-      [theme=dark] & {
+      [theme='dark'] & {
        background: $code-background-color-dark;

        rt {
@@ -174,7 +180,7 @@
      &::-webkit-scrollbar {
        background-color: $table-background-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          background-color: $table-background-color-dark;
        }
      }
@@ -182,28 +188,47 @@
      > table {
        width: 100%;
        max-width: 100%;
-        margin: .625rem 0;
+        margin: 0.625rem 0;
        border-spacing: 0;
        background: $table-background-color;
        border-collapse: collapse;

-        [theme=dark] & {
+        [theme='dark'] & {
          background: $table-background-color-dark;
        }

        thead {
          background: $table-thead-color;

-          [theme=dark] & {
+          [theme='dark'] & {
            background-color: $table-thead-color-dark;
          }
        }

-        th, td {
-          padding: .3rem 1rem;
+        &:not([class]) tbody {
+          & tr:nth-child(odd) {
+            background: darken($table-background-color, 2.25%);
+
+            [theme='dark'] & {
+              background-color: lighten($table-background-color-dark, 2.75%);
+            }
+          }
+          
+          & tr:hover {
+            background: darken($table-background-color, 4.5%);
+
+            [theme='dark'] & {
+              background-color: lighten($table-background-color-dark, 5.5%);
+            }
+          }
+        }
+
+        th,
+        td {
+          padding: 0.3rem 1rem;
          border: 1px solid darken($table-thead-color, 2%);

-          [theme=dark] & {
+          [theme='dark'] & {
            border-color: darken($table-thead-color-dark, 2%);
          }
        }
@@ -216,16 +241,16 @@
    }

    figure {
-      margin: .5rem;
+      margin: 0.5rem;
      text-align: center;

      .image-caption:not(:empty) {
        min-width: 20%;
        max-width: 80%;
        display: inline-block;
-        padding: .5rem;
+        padding: 0.5rem;
        margin: 0 auto;
-        font-size: .875rem;
+        font-size: 0.875rem;
        color: #969696;
      }

@@ -243,37 +268,38 @@

    blockquote {
      display: block;
-      border-left: .5rem solid $blockquote-color;
-      background-color: rgba($blockquote-color, .2);
-      padding: .25rem .75rem;
+      border-left: 0.25em solid $global-border-color;
+      color: $blockquote-color;
+      padding: 0 1em;
      margin: 1rem 0;

-      [theme=dark] & {
-        border-left-color: $blockquote-color-dark;
-        background-color: rgba($blockquote-color-dark, .2);
+      ul,
+      ol {
+        padding-left: 1.5em;
      }
+
+      [theme='dark'] & {
+        color: $blockquote-color-dark;
+        border-left-color: $global-border-color-dark;
+      }
+
+      @include link(false, true);
    }

    .footnotes {
      color: $global-font-secondary-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $global-font-secondary-color-dark;
      }

      p {
-        margin: .25rem 0;
+        margin: 0.25rem 0;
      }
    }

-    @import "../_partial/_single/code";
-    @import "../_partial/_single/instagram";
-    @import "../_partial/_single/admonition";
-    @import "../_partial/_single/echarts";
-    @import "../_partial/_single/mapbox";
-    @import "../_partial/_single/music";
-    @import "../_partial/_single/bilibili";
-    @import "../_partial/_single/cardlink";
+    @import '../_partial/_single/code';
+    @import '../_shortcodes/index';

    hr {
      margin: 1rem 0;
@@ -281,24 +307,24 @@
      border-top: 1px dashed $global-border-color;
      border-bottom: none;

-      [theme=dark] & {
+      [theme='dark'] & {
        border-top: 1px dashed $global-border-color-dark;
      }
    }

    kbd {
      display: inline-block;
-      padding: .25rem;
+      padding: 0.25rem;
      background-color: $global-background-color;
      border: 1px solid $global-border-color;
      border-bottom-color: $global-border-color;
      @include border-radius(3px);
      @include box-shadow(inset 0 -1px 0 $global-border-color);
-      font-size: .8rem;
+      font-size: 0.8rem;
      font-family: $code-font-family;
      color: $code-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        background-color: $global-background-color-dark;
        border: 1px solid $global-border-color-dark;
        border-bottom-color: $global-border-color-dark;
@@ -309,8 +335,8 @@

    .typeit {
      .code {
-        padding: .375rem;
-        font-size: .875rem;
+        padding: 0.375rem;
+        font-size: 0.875rem;
        font-family: $code-font-family;
        font-weight: bold;
        word-break: break-all;
@@ -323,8 +349,8 @@
    }
  }

-  @import "../_partial/_single/footer";
-  @import "../_partial/_single/comment";
+  @import '../_partial/_single/footer';
+  @import '../_partial/_single/comment';
 }

 .lg-toolbar .lg-icon::after {
@@ -1,5 +1,6 @@
 .special {
-  .single-title, .single-subtitle {
+  .single-title,
+  .single-subtitle {
    text-align: right;
  }
 }
@@ -19,7 +19,7 @@
    sup {
      color: $global-font-secondary-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $global-font-secondary-color-dark;
      }
    }
@@ -2,14 +2,14 @@
  margin: 0 auto;
  margin-top: 3rem;
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  line-height: 1.6rem;

  .card-item {
-    font-size: .875rem;
+    font-size: 0.875rem;
    text-align: left;
    width: 45%;
    display: flex;
@@ -28,7 +28,7 @@
        font-weight: bold;
        display: inline-block;
        margin-top: 1rem;
-        margin-bottom: .75rem;
+        margin-bottom: 0.75rem;
      }

      span {
@@ -44,7 +44,7 @@
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
-  margin: .25rem 0 .25rem 1.5rem;
+  margin: 0.25rem 0 0.25rem 1.5rem;
 }

 .archive-item-link {
@@ -58,7 +58,7 @@
    background-color: transparent;
  }

-  [theme=dark] & {
+  [theme='dark'] & {
    color: $global-link-color-dark;

    &:hover {
@@ -68,12 +68,12 @@
 }

 .archive-item-date {
-  width: 4em;
  text-align: right;
  color: $global-font-secondary-color;
  white-space: nowrap;
+  font-variant-numeric: tabular-nums lining-nums;

-  [theme=dark] & {
+  [theme='dark'] & {
    color: $global-font-secondary-color-dark;
  }
 }
@@ -2,14 +2,16 @@
  .cc-btn {
    color: $global-font-color;

-    &:hover, &:focus {
+    &:hover,
+    &:focus {
      background-color: #ccc;
    }

-    [theme=dark] & {
+    [theme='dark'] & {
      color: $global-font-color;

-      &:hover, &:focus {
+      &:hover,
+      &:focus {
        background-color: #fff;
      }
    }
@@ -1,5 +1,7 @@
 .details {
  .details-summary {
+    @include border-radius($global-border-radius);
+
    &:hover {
      cursor: pointer;
    }
@@ -9,7 +11,7 @@
    color: $global-font-secondary-color;
    @include transition(transform 0.2s ease);

-    [theme=dark] & {
+    [theme='dark'] & {
      color: $global-font-secondary-color-dark;
    }
  }
@@ -21,12 +23,17 @@
  }

  &.open {
+    .details-summary {
+      @include border-radius($global-border-radius $global-border-radius 0 0);
+    }
+
    i.details-icon {
      @include transform(rotate(90deg));
    }

    .details-content {
-      max-height: $MAX_LENGTH;
+      max-height: 100%;
+      @include border-radius(0 0 $global-border-radius $global-border-radius);
      @include details-transition-close;
    }
  }
@@ -9,7 +9,7 @@
  right: 1.5rem;
  font-size: 1rem;
  line-height: 1.3rem;
-  padding: .6rem .6rem;
+  padding: 0.6rem 0.6rem;
  color: $global-font-secondary-color;
  background: $header-background-color;
  @include border-radius(2rem);
@@ -17,20 +17,24 @@

  @include blur;

-  &:hover, &:active {
+  &:hover,
+  &:active {
    color: $global-font-color;
    cursor: pointer;
  }

-  &:active, &:focus, &:hover {
+  &:active,
+  &:focus,
+  &:hover {
    outline: none;
  }

-  [theme=dark] & {
+  [theme='dark'] & {
    color: $global-font-secondary-color-dark;
    background: $header-background-color-dark;

-    &:hover, &:active {
+    &:hover,
+    &:active {
      color: $global-font-color-dark;
    }
  }
@@ -1,25 +1,60 @@
 footer {
-  height: 2rem;
+  height: auto;
  width: 100%;
  text-align: center;
  line-height: 1.25rem;
  padding: 1rem 0;

  .footer-container {
-    font-size: .875rem;
+    font-size: 0.875rem;

    .footer-line {
      width: 100%;

-      .icp-br {
-        display: none;
+      .footer-divider::before {
+        content: '|';
+        margin-left: 0.25rem;
+        margin-right: 0.25rem;
      }

-      .fa-ban {
-        color: Tomato;
+      .fixit-icon {
+        top: 0.25em;
+      }
+
+      .animate-icon {
+        color: #dc143c;
+        animation: icon-animate 1.33s ease-in-out infinite;
+      }
+
+      .run-times {
+        font-variant-numeric: tabular-nums lining-nums;
      }
    }
  }

  @include blur;
 }
+
+@keyframes icon-animate {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  10%,
+  30% {
+    transform: scale(0.9);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: scale(1.1);
+  }
+
+  50%,
+  70% {
+    transform: scale(1.1);
+  }
+}
@@ -4,26 +4,12 @@ header {
  background-color: $header-background-color;
  @include transition(box-shadow 0.3s ease);

-  [theme=dark] & {
+  [theme='dark'] & {
    background-color: $header-background-color-dark;
  }

-  .logo {
-    min-height: 1.5em;
-    height: 1.5em;
-    vertical-align: text-bottom;
-  }
-
-  .logo, .header-title-pre {
-    padding-right: .25rem;
-  }
-
-  .header-title-post {
-    padding-left: .25rem;
-  }
-
  &:hover {
-    @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, .1));
+    @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
  }
 }

@@ -38,12 +24,28 @@ header {
 .header-title {
  font-family: $header-title-font-family;
  font-weight: bold;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
  min-width: 10%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  @include flex(10);
+
+  .logo {
+    min-height: 1.5em;
+    height: 1.5em;
+    vertical-align: text-bottom;
+  }
+
+  .header-title-text {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+  }
+
+  .header-subtitle {
+    margin-left: 0.25rem;
+    font-size: 0.6em;
+  }
 }

 .menu .menu-item {
@@ -71,14 +73,14 @@ header {
    box-sizing: border-box;
    height: 2.5rem;
    width: 2.5rem;
-    @include border-radius(.5rem);
+    @include border-radius(0.5rem);
    border: none;
    outline: none;
    background-color: $header-background-color;
    vertical-align: baseline !important;
    @include transition(width 0.3s ease);

-    [theme=dark] & {
+    [theme='dark'] & {
      background-color: $header-background-color-dark;
    }
  }
@@ -93,7 +95,7 @@ header {
  }

  .search-toggle {
-    left: .5rem;
+    left: 0.5rem;
    right: auto;
  }

@@ -105,14 +107,15 @@ header {
    display: none;
  }

-  .open &, &.mobile {
+  .open &,
+  &.mobile {
    input {
      color: $global-font-color;
      background-color: $search-background-color;
      padding: 0 2rem 0 2rem;
    }

-    [theme=dark] & {
+    [theme='dark'] & {
      input {
        color: $global-font-color-dark;
        background-color: $search-background-color-dark;
@@ -126,7 +129,7 @@ header {
    .search-button {
      color: $global-font-secondary-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $global-font-secondary-color-dark;
      }
    }
@@ -147,11 +150,12 @@ header {

 #header-desktop {
  display: block;
-  position: fixed;
+  position: sticky;
+  top: 0;
  height: $header-height;
  line-height: $header-height;

-  [header-desktop=normal] & {
+  [header-desktop='normal'] & {
    position: static;
  }

@@ -171,12 +175,12 @@ header {
      }

      .menu-item {
-        margin: 0 .5rem;
+        margin: 0 0.5rem;

        &.delimiter {
          border-left: 1.5px solid $global-font-color;

-          [theme=dark] & {
+          [theme='dark'] & {
            border-left-color: $global-border-color-dark;
          }
        }
@@ -186,7 +190,7 @@ header {
        }

        &.search {
-          margin: 0 -.5rem 0 0;
+          margin: 0 -0.5rem 0 0;
        }
      }

@@ -194,7 +198,7 @@ header {
        font-weight: 900;
        color: $header-hover-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $header-hover-color-dark;
        }
      }
@@ -202,7 +206,7 @@ header {
  }

  &.open .header-wrapper .menu .menu-item.search {
-    margin: 0 .25rem 0 .5rem;
+    margin: 0 0.25rem 0 0.5rem;

    input {
      width: 24rem;
@@ -212,11 +216,12 @@ header {

 #header-mobile {
  display: none;
-  position: fixed;
-  height: $header-height;
+  position: sticky;
+  top: 0;
+  min-height: $header-height;
  line-height: $header-height;

-  [header-mobile=normal] & {
+  [header-mobile='normal'] & {
    position: static;
  }

@@ -247,30 +252,30 @@ header {
          @include border-radius(3px);
          @include transition(all 0.3s ease-in-out);

-          [theme=dark] & {
+          [theme='dark'] & {
            background: $global-font-color-dark;
          }
        }

        span:nth-child(1) {
-          margin-bottom: .5rem;
+          margin-bottom: 0.5rem;
        }

        span:nth-child(3) {
-          margin-top: .5rem;
+          margin-top: 0.5rem;
        }

        &.active {
          span:nth-child(1) {
-            @include transform(rotate(45deg) translate(.4rem, .5rem));
+            @include transform(rotate(45deg) translate(0.4rem, 0.5rem));
          }

          span:nth-child(2) {
-            opacity: 0
+            opacity: 0;
          }

          span:nth-child(3) {
-            @include transform(rotate(-45deg) translate(.4rem, -.5rem));
+            @include transform(rotate(-45deg) translate(0.4rem, -0.5rem));
          }
        }
      }
@@ -281,8 +286,8 @@ header {
      background: $header-background-color;
      border-top: 2px solid $global-border-color;
      display: none;
-      padding-top: .5rem;
-      @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
+      padding-top: 0.5rem;
+      @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));

      .search-wrapper {
        display: flex;
@@ -296,7 +301,8 @@ header {
      .search {
        flex-grow: 10;

-        .algolia-autocomplete, input {
+        .algolia-autocomplete,
+        input {
          width: 100%;
        }
      }
@@ -307,7 +313,7 @@ header {

      .search-cancel {
        display: none;
-        margin-left: .75rem;
+        margin-left: 0.75rem;
      }

      .menu-item {
@@ -319,7 +325,7 @@ header {
        display: block;
      }

-      [theme=dark] & {
+      [theme='dark'] & {
        background: $header-background-color-dark;
        border-top-color: $global-border-color-dark;
      }
@@ -350,7 +356,7 @@ header {
  position: fixed;
  z-index: 200;
  top: $header-height;
-  @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
+  @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));

  &.desktop {
    right: 2rem;
@@ -366,7 +372,7 @@ header {
    right: 0 !important;
    background-color: $global-background-color;

-    [theme=dark] & {
+    [theme='dark'] & {
      background-color: $global-background-color-dark;
    }

@@ -375,7 +381,7 @@ header {
      max-height: calc(100vh - #{$header-height});

      .suggestion {
-        padding: .75rem 1rem;
+        padding: 0.75rem 1rem;

        .suggestion-title {
          display: inline-block;
@@ -388,12 +394,12 @@ header {
        }

        .suggestion-date {
-          font-size: .875rem;
+          font-size: 0.875rem;
          float: right;
          text-align: right;
          color: $global-font-secondary-color;

-          [theme=dark] & {
+          [theme='dark'] & {
            color: $global-font-secondary-color-dark;
          }
        }
@@ -407,7 +413,7 @@ header {
          @include overflow-wrap(break-word);
          color: $global-font-secondary-color;

-          [theme=dark] & {
+          [theme='dark'] & {
            color: $global-font-secondary-color-dark;
          }
        }
@@ -416,7 +422,7 @@ header {
          font-style: normal;
          background-color: $selection-color;

-          [theme=dark] & {
+          [theme='dark'] & {
            background-color: $selection-color-dark;
          }
        }
@@ -424,7 +430,7 @@ header {
        &.cursor {
          background: darken($code-background-color, 5%);

-          [theme=dark] & {
+          [theme='dark'] & {
            background: lighten($code-background-color-dark, 5%);
          }
        }
@@ -442,19 +448,19 @@ header {
      .search-query {
        font-weight: bold;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: #ddd;
        }
      }
    }

    .search-footer {
-      padding: .5rem 1rem;
+      padding: 0.5rem 1rem;
      float: right;
-      font-size: .8rem;
+      font-size: 0.8rem;
      color: $global-font-secondary-color;

-      [theme=dark] {
+      [theme='dark'] {
        color: $global-font-secondary-color-dark;
      }

@@ -12,6 +12,15 @@ svg.icon {
 img.emoji {
  height: 1em;
  width: 1em;
-  margin: 0 .05em 0 .1em;
-  vertical-align: -.1em;
+  margin: 0 0.05em 0 0.1em;
+  vertical-align: -0.1em;
+}
+
+.fixit-icon {
+  display: inline-block;
+  height: 1.5em;
+  width: 1.5em;
+  line-height: 1.5em;
+  position: relative;
+  vertical-align: text-bottom;
 }
@@ -11,6 +11,6 @@

  .blur & {
    z-index: 100;
-    background-color: rgba(0, 0, 0, .25);
+    background-color: rgba(0, 0, 0, 0.25);
  }
 }
@@ -8,13 +8,17 @@
  padding: 1rem 0 0;

  a {
-    font-size: .8rem;
-    color: #bfbfbf;
-    letter-spacing: .1rem;
+    font-size: 0.8rem;
+    color: $pagination-link-color;
+    letter-spacing: 0.1rem;
    font-weight: 700;
    padding: 5px 5px;
    text-decoration: none;
    @include transition(0.3s);
+
+    [theme='dark'] & {
+      color: $pagination-link-color-dark;
+    }
  }

  li {
@@ -32,14 +36,14 @@
      color: $pagination-link-hover-color;
    }

-    [theme=dark] &:hover a {
+    [theme='dark'] &:hover a {
      color: $pagination-link-hover-color-dark;
    }

    &:before,
    &:after {
      position: absolute;
-      content: "";
+      content: '';
      width: 0;
      height: 3px;
      background: $pagination-link-hover-color;
@@ -47,8 +51,8 @@
      bottom: 0px;
    }

-    [theme=dark] &:before,
-    [theme=dark] &:after {
+    [theme='dark'] &:before,
+    [theme='dark'] &:after {
      background: $pagination-link-hover-color-dark;
    }

@@ -66,7 +70,6 @@
    }

    &:hover {
-
      &:before,
      &:after {
        width: 50%;
@@ -78,7 +81,7 @@
        color: $pagination-link-hover-color;
      }

-      [theme=dark] & a {
+      [theme='dark'] & a {
        color: $pagination-link-hover-color-dark;
      }

@@ -1,97 +0,0 @@
-//卡片式链接样式 cardlink
-
-.card-link,.card-link:hover {
-  text-decoration: none;
-  border: none!important;
-  color: inherit!important
-}
-
-.card-link {
-  position: relative;
-  display: block;
-  margin: 1em auto;
-  width: 390px;
-  box-sizing: border-box;
-  border-radius: 12px;
-  max-width: 100%;
-  overflow: hidden;
-  color: inherit;
-  text-decoration: none
-}
-
-.ztext {
-  word-break: break-word;
-  line-height: 1.6
-}
-
-.card-link-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: url(/lib/img/card-link-bg.jpg);
-  background-repeat: no-repeat;
-  -webkit-filter: blur(20px);
-  filter: blur(20px);
-  background-size: cover;
-  background-position: center
-}
-
-.card-link,.card-link:hover {
-  text-decoration: none;
-  border: none!important;
-  color: inherit!important
-}
-
-.card-link-content {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  border-radius: inherit;
-  background-color: rgba(246,246,246,0.88)
-}
-
-.card-link-text {
-  overflow: hidden
-}
-
-.card-link-title {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: calc(16px * 1.25 * 2);
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1.25;
-  color: #1a1a1a
-}
-
-.card-link-meta {
-  display: flex;
-  margin-top: 4px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #999;
-  white-space: nowrap
-}
-
-.card-link-url {
-  display: inline-flex;
-  align-items: center;
-}
-
-.card-link-imageCell {
-  margin-left: 8px;
-  border-radius: 6px
-}
-
-.card-link-image {
-  display: block;
-  width: 60px;
-  height: 60px;
-  border-radius: inherit
-}
@@ -1,25 +1,48 @@
+// inline code
 code {
-  display:inline-block;
+  display: inline-block;
  max-width: 100%;
-  padding: 0 .4rem;
-  @include overflow-wrap(break-word);
-  @include line-break(anywhere);
+  padding: 0 0.4rem;
  font-size: $code-font-size;
  font-family: $code-font-family;
  color: $code-color;
+  background-color: rgba(175, 184, 193, 0.2);
+  @include border-radius($global-border-radius);
+  @include overflow-wrap(break-word);
+  @include line-break(anywhere);

-  [theme=dark] & {
+  [theme='dark'] & {
    color: $code-color-dark;
+    background-color: rgba(99, 110, 123, 0.4);
  }
 }

+// indented code
 pre {
  margin: 0;
-  padding: .25rem 0 .25rem .5rem;
+  line-height: 1.45em;
+  padding: 0.5rem;
+  overflow: auto;
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+  @include border-radius($global-border-radius);
  @include tab-size(4);

+  background-color: $code-background-color;
+
+  [theme='dark'] & {
+    background-color: $code-background-color-dark;
+  }
+
  code {
    padding: 0;
+    background-color: transparent;
+    @include border-radius(0);
+    @include max-content(min-width);
+
+    [theme='dark'] & {
+      background-color: transparent;
+    }
  }

  img {
@@ -29,17 +52,10 @@ pre {
  }
 }

-code, pre, .highlight table, .highlight tr, .highlight td {
-  background: $code-background-color;
-
-  [theme=dark] & {
-    background: $code-background-color-dark;
-  }
-}
-
-.highlight, .gist {
-  font-family: $code-font-family;
+.highlight,
+.gist {
  font-size: $code-font-size;
+  font-family: $code-font-family;

  .table-wrapper {
    > table,
@@ -54,9 +70,9 @@ code, pre, .highlight table, .highlight tr, .highlight td {
  }
 }

+// block fenced code
 .highlight {
-  line-height: 1.4em;
-  margin: .5rem 0;
+  margin: 0.5rem 0;

  > .chroma {
    position: relative;
@@ -69,12 +85,15 @@ code, pre, .highlight table, .highlight tr, .highlight td {
      width: 100%;
      font-family: $global-font-family;
      font-weight: bold;
+      line-height: 1.4em;
      color: $code-info-color;
-      background: darken($code-background-color, 8%);
+      background-color: darken($code-background-color, 3%);
+      @include border-radius($global-border-radius);
+      @include transition(border-radius 0.2s ease);

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $code-info-color-dark;
-        background: darken($code-background-color-dark, 6%);
+        background-color: darken($code-background-color-dark, 6%);
      }

      &:hover {
@@ -83,14 +102,38 @@ code, pre, .highlight table, .highlight tr, .highlight td {

      .code-title {
        width: 100%;
-        padding: .4rem;
+        padding: 0.4rem;
+
+        .arrow {
+          padding: 0 0.2rem;
+          @include transition(transform 0.2s ease);
+        }
      }

      .code-title::after {
-        padding-left: .2rem;
+        padding-left: 0.2rem;
        content: 'Code';
      }

+      .ellipses {
+        padding: 0.4rem;
+      }
+
+      .edit,
+      .copy {
+        display: none;
+        padding: 0.4rem;
+
+        &:hover {
+          cursor: pointer;
+          color: $global-link-hover-color;
+
+          [theme='dark'] & {
+            color: $global-link-hover-color-dark;
+          }
+        }
+      }
+
      @each $type, $text in $code-type-map {
        &.#{$type} .code-title::after {
          content: $text;
@@ -98,80 +141,78 @@ code, pre, .highlight table, .highlight tr, .highlight td {
      }
    }

-    .lntd:first-child {
-      min-width: 1.6rem;
-      text-align: right;
-    }
-
-    .lntd:last-child {
-      width: 100%;
-
-      pre {
-        @include max-content(min-width);
-      }
-    }
-
-    .ln {
-      padding-right: .75rem;
-    }
-
-    .hl {
-      display: block;
-      background-color: darken($code-background-color, 10%);
-
-      [theme=dark] & {
-        background-color: darken($code-background-color-dark, 5%);
-      }
-    }
-
-    .ln, .lnt {
-      color: $global-font-secondary-color;
-
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-
-    .arrow {
-      padding: 0 .2rem;
-      @include transition(transform 0.2s ease);
-    }
-
-    .ellipses {
-      padding: .4rem;
-    }
-
-    .copy {
-      display: none;
-      padding: .4rem;
-
-      &:hover {
-        cursor: pointer;
-        color: $global-link-hover-color;
-
-        [theme=dark] & {
-          color: $global-link-hover-color-dark;
-        }
-      }
-    }
-
+    // delayed loading table-wrapper
    .table-wrapper {
      max-height: 0;
-      overflow-y: hidden;
+      overflow: hidden;
+      @include border-radius(0 0 $global-border-radius $global-border-radius);
      @include details-transition-open;
    }

+    table {
+      border-spacing: 0;
+      width: auto;
+      overflow: auto;
+      display: block;
+      background-color: $code-background-color;
+
+      [theme='dark'] & {
+        background-color: $code-background-color-dark;
+      }
+
+      td {
+        vertical-align: top;
+        padding: 0;
+      }
+
+      pre {
+        padding: 0.25rem;
+        outline-offset: -1px;
+        @include border-radius(0);
+      }
+
+      /* lineNumbersInTable=false */
+      .ln {
+        min-width: 1.25rem;
+      }
+
+      // ========== lineNumbersInTable ========== //
+      // line numbers
+      .lntd:first-child {
+        min-width: 1.6rem;
+        text-align: right;
+
+        pre {
+          padding-right: 0;
+        }
+      }
+      // code content
+      .lntd:last-child {
+        width: 100%;
+
+        pre {
+          padding-left: 0.5rem;
+          padding-right: 0.5rem;
+        }
+        code {
+          width: 100%;
+        }
+      }
+      // ========== lineNumbersInTable ========== //
+    }
+
    &.open {
      .code-header {
-        background: darken($code-background-color, 3%);
+        background-color: darken($code-background-color, 6%);
+        @include border-radius($global-border-radius $global-border-radius 0 0);

-        [theme=dark] & {
-          background: darken($code-background-color-dark, 3%);
+        [theme='dark'] & {
+          background-color: darken($code-background-color-dark, 3%);
        }
      }

      .table-wrapper {
-        max-height: $MAX_LENGTH;
+        max-height: 100%;
        @include details-transition-close;
      }

@@ -183,203 +224,127 @@ code, pre, .highlight table, .highlight tr, .highlight td {
        display: none;
      }

+      .edit,
      .copy {
        display: inline;
      }
    }
  }

-  /* Comment */  .c,
-  /* CommentHashbang */  .ch,
-  /* CommentMultiline */  .cm,
-  /* CommentSingle */  .c1,
-  /* CommentSpecial */  .cs,
-  /* CommentPreproc */  .cp,
-  /* CommentPreprocFile */  .cpf { font-style: italic }
-  /* GenericUnderline */  .gl { text-decoration: underline }
+  /* LineHighlight */
+  .hl {
+    display: block;
+    background-color: $code-hightlight-color;
+    box-shadow: -0.5rem 0 0 $code-hightlight-color, 0.5rem 0 0 $code-hightlight-color;

-  @each $class, $color in $code-highlight-color-map {
-    .#{$class} { color: $color; }
-  }
-
-  [theme=dark] & {
-    @each $class, $color in $code-highlight-color-map-dark {
-      .#{$class} { color: $color; }
+    [theme='dark'] & {
+      background-color: $code-hightlight-color-dark;
+      box-shadow: -0.5rem 0 0 $code-hightlight-color-dark, 0.5rem 0 0 $code-hightlight-color-dark;
    }
  }
+  /* GenericUnderline */
+  .gl {
+    text-decoration: underline;
+  }
+  /* GenericStrong */
+  .gs {
+    font-weight: bold;
+  }
+  /* GenericEmph */
+  .ge {
+    font-style: italic;
+  }
+  /* lineNumbersInTable=false */
+  .ln {
+    padding-right: 0.5rem;
+    display: inline-block;
+    min-width: 1.1rem;
+    text-align: right;
+  }
+  /* LineNumbers */
+  .lnt,
+  .ln {
+    color: $global-font-secondary-color;
+
+    [theme='dark'] & {
+      color: $global-font-secondary-color-dark;
+    }
+  }
+
+  // ========== Higtlight Color ========== //
+
+  /* Error */
+  .err {
+    font-style: italic;
+    border-bottom: 1px dotted $code-error-color;
+  }
+  /* GenericDeleted */
+  .gd {
+    background-color: #ffebe9;
+
+    [theme='dark'] & {
+      background-color: #78191b;
+    }
+  }
+  /* GenericInserted */
+  .gi {
+    background-color: #dafbe1;
+
+    [theme='dark'] & {
+      background-color: #1b4721;
+    }
+  }
+
+  @each $class, $color in $code-highlight-color-map {
+    .#{$class} {
+      color: $color;
+    }
+  }
+
+  [theme='dark'] & {
+    @each $class, $color in $code-highlight-color-map-dark {
+      .#{$class} {
+        color: $color;
+      }
+    }
+  }
+  // ========== Higtlight Color ========== //
 }

+// gist shortcode
 .gist {
-  .gist-file, .gist-data, .gist-meta {
+  .gist-file,
+  .gist-data,
+  .gist-meta {
    border: none;
  }

+  .gist-data {
+    background-color: transparent;
+  }
+
  .gist-meta {
-    padding: .4rem .8rem;
+    padding: 0.4rem 0.8rem;
+    @include link(false, false);
    background-color: darken($code-background-color, 5%);

-    @include link(false, false);
-
-    [theme=dark] & {
+    [theme='dark'] & {
      background-color: darken($code-background-color-dark, 5%);
    }
  }

-  [theme=dark] & {
-    // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
-    .highlight {
-      background: #141414;
-    }
-    .blob-num,
-    .blob-code-inner,
+  .table-wrapper {
    .highlight,
-    .pl-enm,
-    .pl-ko,
-    .pl-mo,
-    .pl-mp1 .pl-sf,
-    .pl-ms,
-    .pl-pdc1,
-    .pl-scp,
-    .pl-smc,
-    .pl-som,
-    .pl-va,
-    .pl-vpf,
-    .pl-vpu,
-    .pl-mdr {
-        color: #aab1bf;
-    }
-    .pl-mb,
-    .pl-pdb {
-        font-weight: 700;
-    }
-    .pl-c,
-    .pl-c span,
-    .pl-pdc {
-        color: #5b6270;
-        font-style: italic;
-    }
-    .pl-sr .pl-cce {
-        color: #56b5c2;
-        font-weight: 400;
-    }
-    .pl-ef,
-    .pl-en,
-    .pl-enf,
-    .pl-eoai,
-    .pl-kos,
-    .pl-mh .pl-pdh,
-    .pl-mr {
-        color: #61afef;
-    }
-    .pl-ens,
-    .pl-vi {
-        color: #be5046;
-    }
-    .pl-enti,
-    .pl-mai .pl-sf,
-    .pl-ml,
-    .pl-sf,
-    .pl-sr,
-    .pl-sr .pl-sra,
-    .pl-src,
-    .pl-st,
-    .pl-vo {
-        color: #56b5c2;
-    }
-    .pl-eoi,
-    .pl-mri,
-    .pl-pds,
-    .pl-pse .pl-s1,
-    .pl-s,
-    .pl-s1 {
-        color: #97c279;
-    }
-    .pl-k,
-    .pl-kolp,
-    .pl-mc,
-    .pl-pde {
-        color: #c578dd;
-    }
-    .pl-mi,
-    .pl-pdi {
-        color: #c578dd;
-        font-style: italic;
-    }
-    .pl-mp,
-    .pl-stp {
-        color: #818896;
-    }
-    .pl-mdh,
-    .pl-mdi,
-    .pl-mdr {
-        font-weight: 400;
-    }
-    .pl-mdht,
-    .pl-mi1 {
-        color: #97c279;
-        background: #020;
-    }
-    .pl-md,
-    .pl-mdhf {
-        color: #df6b75;
-        background: #200;
-    }
-    .pl-corl {
-        color: #df6b75;
-        text-decoration: underline;
-    }
-    .pl-ib {
-        background: #df6b75;
-    }
-    .pl-ii {
-        background: #e0c184;
-        color: #fff;
-    }
-    .pl-iu {
-        background: #e05151;
-    }
-    .pl-ms1 {
-        color: #aab1bf;
-        background: #373b41;
-    }
-    .pl-c1,
-    .pl-cn,
-    .pl-e,
-    .pl-eoa,
-    .pl-eoac,
-    .pl-eoac .pl-pde,
-    .pl-kou,
-    .pl-mm,
-    .pl-mp .pl-s3,
-    .pl-mq,
-    .pl-s3,
-    .pl-sok,
-    .pl-sv,
-    .pl-mb {
-        color: #d19965;
-    }
-    .pl-enc,
-    .pl-entc,
-    .pl-pse .pl-s2,
-    .pl-s2,
-    .pl-sc,
-    .pl-smp,
-    .pl-sr .pl-sre,
-    .pl-stj,
-    .pl-v,
-    .pl-pdb {
-        color: #e4bf7a;
-    }
-    .pl-ent,
-    .pl-entl,
-    .pl-entm,
-    .pl-mh,
-    .pl-pdv,
-    .pl-smi,
-    .pl-sol,
-    .pl-mdh,
-    .pl-mdi {
-        color: #df6b75;
+    &::-webkit-scrollbar {
+      background-color: #f6f8fa;
+
+      [theme='dark'] & {
+        background-color: #2d333b;
+      }
    }
  }
+
+  [theme='dark'] & {
+    @import './github-dark-dimmed';
+  }
 }
@@ -5,7 +5,7 @@
    border-bottom: 1px solid $global-border-color;
    padding: 1rem 0 0.3rem;

-    [theme=dark] & {
+    [theme='dark'] & {
      border-bottom: 1px solid $global-border-color-dark;
    }

@@ -17,7 +17,7 @@
        font-size: 0.8em;
        color: $global-font-secondary-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $global-font-secondary-color-dark;
        }

@@ -28,7 +28,7 @@
        font-size: 0.8em;
        color: $global-font-secondary-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $global-font-secondary-color-dark;
        }

@@ -0,0 +1,169 @@
+/**
+ * Theme: GitHub Dark Dimmed
+ * Description: Dark Dimmed theme as seen on github.com
+ * Author: github.com
+ * Maintainer: https://github.com/Lruihao/FixIt
+ * Updated: 2022-03-01
+ */
+& {
+  --color-fg-default: #adbac7;
+  --color-prettylights-syntax-comment: #768390;
+  --color-prettylights-syntax-constant: #6cb6ff;
+  --color-prettylights-syntax-entity: #dcbdfb;
+  --color-prettylights-syntax-storage-modifier-import: #adbac7;
+  --color-prettylights-syntax-entity-tag: #8ddb8c;
+  --color-prettylights-syntax-keyword: #f47067;
+  --color-prettylights-syntax-string: #96d0ff;
+  --color-prettylights-syntax-variable: #f69d50;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+  --color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
+  --color-prettylights-syntax-invalid-illegal-bg: #922323;
+  --color-prettylights-syntax-carriage-return-text: #cdd9e5;
+  --color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+  --color-prettylights-syntax-string-regexp: #8ddb8c;
+  --color-prettylights-syntax-markup-list: #eac55f;
+  --color-prettylights-syntax-markup-heading: #316dca;
+  --color-prettylights-syntax-markup-italic: #adbac7;
+  --color-prettylights-syntax-markup-bold: #adbac7;
+  --color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+  --color-prettylights-syntax-markup-deleted-bg: #78191b;
+  --color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+  --color-prettylights-syntax-markup-inserted-bg: #1b4721;
+  --color-prettylights-syntax-markup-changed-text: #ffddb0;
+  --color-prettylights-syntax-markup-changed-bg: #682d0f;
+  --color-prettylights-syntax-markup-ignored-text: #adbac7;
+  --color-prettylights-syntax-markup-ignored-bg: #255ab2;
+  --color-prettylights-syntax-meta-diff-range: #dcbdfb;
+  --color-prettylights-syntax-brackethighlighter-angle: #768390;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
+  --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+
+  .blob-num,
+  .blob-code-inner {
+    color: val(--color-fg-default);
+  }
+
+  .pl-c /* comment, punctuation.definition.comment, string.comment */ {
+    color: var(--color-prettylights-syntax-comment);
+  }
+
+  .pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
+  .pl-s .pl-v /* string variable */ {
+    color: var(--color-prettylights-syntax-constant);
+  }
+
+  .pl-e /* entity */,
+  .pl-en /* entity.name */ {
+    color: var(--color-prettylights-syntax-entity);
+  }
+
+  .pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
+  .pl-s .pl-s1 /* string source */ {
+    color: var(--color-prettylights-syntax-storage-modifier-import);
+  }
+
+  .pl-ent /* entity.name.tag, markup.quote */ {
+    color: var(--color-prettylights-syntax-entity-tag);
+  }
+
+  .pl-k /* keyword, storage, storage.type */ {
+    color: var(--color-prettylights-syntax-keyword);
+  }
+
+  .pl-s /* string */,
+  .pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
+  .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
+  .pl-sr /* string.regexp */,
+  .pl-sr .pl-cce /* string.regexp constant.character.escape */,
+  .pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
+  .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
+    color: var(--color-prettylights-syntax-string);
+  }
+
+  .pl-v /* variable */,
+  .pl-smw /* sublimelinter.mark.warning */ {
+    color: var(--color-prettylights-syntax-variable);
+  }
+
+  .pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
+    color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
+  }
+
+  .pl-ii /* invalid.illegal */ {
+    color: var(--color-prettylights-syntax-invalid-illegal-text);
+    background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
+  }
+
+  .pl-c2 /* carriage-return */ {
+    color: var(--color-prettylights-syntax-carriage-return-text);
+    background-color: var(--color-prettylights-syntax-carriage-return-bg);
+  }
+
+  .pl-c2::before /* carriage-return */ {
+    content: '^M';
+  }
+
+  .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-string-regexp);
+  }
+
+  .pl-ml /* markup.list */ {
+    color: var(--color-prettylights-syntax-markup-list);
+  }
+
+  .pl-mh /* markup.heading */,
+  .pl-mh .pl-en /* markup.heading entity.name */,
+  .pl-ms /* meta.separator */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-markup-heading);
+  }
+
+  .pl-mi /* markup.italic */ {
+    font-style: italic;
+    color: var(--color-prettylights-syntax-markup-italic);
+  }
+
+  .pl-mb /* markup.bold */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-markup-bold);
+  }
+
+  .pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
+    color: var(--color-prettylights-syntax-markup-deleted-text);
+    background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+  }
+
+  .pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
+    color: var(--color-prettylights-syntax-markup-inserted-text);
+    background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+  }
+
+  .pl-mc /* markup.changed, punctuation.definition.changed */ {
+    color: var(--color-prettylights-syntax-markup-changed-text);
+    background-color: var(--color-prettylights-syntax-markup-changed-bg);
+  }
+
+  .pl-mi2 /* markup.ignored, markup.untracked */ {
+    color: var(--color-prettylights-syntax-markup-ignored-text);
+    background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+  }
+
+  .pl-mdr /* meta.diff.range */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-meta-diff-range);
+  }
+
+  .pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
+    color: var(--color-prettylights-syntax-brackethighlighter-angle);
+  }
+
+  .pl-sg /* sublimelinter.gutter-mark */ {
+    color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+  }
+
+  .pl-corl /* constant.other.reference.link, string.other.link */ {
+    text-decoration: underline;
+    color: var(--color-prettylights-syntax-constant-other-reference-link);
+  }
+}
@@ -1,4 +0,0 @@
-.mapbox {
-  margin: .5rem 0;
-  padding: .5rem 0;
-}
@@ -1,3 +0,0 @@
-meting-js {
-  margin: .5rem 0;
-}
@@ -10,16 +10,16 @@

    ul {
      text-indent: -0.85rem;
-      padding-left: .8rem;
+      padding-left: 0.8rem;
      list-style: none;

      a:first-child::before {
-        content: "|";
+        content: '|';
        font-weight: bolder;
-        margin-right: .5rem;
+        margin-right: 0.5rem;
        color: $single-link-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $single-link-color-dark;
        }
      }
@@ -37,7 +37,7 @@
      color: $global-font-secondary-color;
    }

-    [theme=dark] & {
+    [theme='dark'] & {
      background: $code-background-color-dark;

      rt {
@@ -49,29 +49,29 @@

 #toc-auto {
  display: block;
-  position: absolute;
-  width: $MAX_LENGTH;
-  max-width: 0;
-  padding: 0 .8rem;
-  border-left: 4px solid $global-border-color;
+  position: sticky;
+  top: $header-height + 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
  @include overflow-wrap(break-word);
  box-sizing: border-box;
-  top: 10rem;
-  left: 0;
  visibility: hidden;

-  [header-desktop=normal] & {
-    top: 5rem;
-  }
-
  @include blur;

-  [theme=dark] & {
-    border-left-color: $global-border-color-dark;
-  }
-
  .toc-title {
-    margin: .8rem 0;
+    margin: 0.5rem 0;
+
+    &::before {
+      content: '|';
+      font-weight: bolder;
+      margin-right: 0.5rem;
+      color: $global-border-color;
+
+      [theme='dark'] & {
+        color: $global-border-color-dark;
+      }
+    }
  }

  .toc-content {
@@ -80,7 +80,7 @@
    }

    > nav > ul {
-      margin: .625rem 0;
+      margin: 0.625rem 0;
    }

    ul {
@@ -97,14 +97,14 @@
      font-weight: bold;
      color: $single-link-color;

-      [theme=dark] & {
+      [theme='dark'] & {
        color: $single-link-color-dark;
      }

      &::before {
        color: $single-link-hover-color;

-        [theme=dark] & {
+        [theme='dark'] & {
          color: $single-link-hover-color-dark;
        }
      }
@@ -114,9 +114,9 @@

 #toc-static {
  display: none;
-  margin: .8rem 0;
+  margin: 0.8rem 0;

-  &[kept=true] {
+  &[kept='true'] {
    display: block;
  }

@@ -124,10 +124,10 @@
    display: flex;
    justify-content: space-between;
    line-height: 2em;
-    padding: 0 .75rem;
+    padding: 0 0.75rem;
    background: darken($code-background-color, 6%);

-    [theme=dark] & {
+    [theme='dark'] & {
      background: darken($code-background-color-dark, 6%);
    }
  }
@@ -137,10 +137,10 @@

    > nav > ul {
      margin: 0;
-      padding: .4rem 1rem .4rem 1.8rem;
+      padding: 0.4rem 1rem 0.4rem 1.8rem;
    }

-    [theme=dark] & {
+    [theme='dark'] & {
      background-color: $code-background-color-dark;
    }
  }
@@ -149,7 +149,7 @@
    .toc-title {
      background: darken($code-background-color, 3%);

-      [theme=dark] & {
+      [theme='dark'] & {
        background: darken($code-background-color-dark, 3%);
      }
    }
@@ -1,17 +1,19 @@
 .admonition {
  position: relative;
  margin: 1rem 0;
-  padding: 0 .75rem;
+  padding: 0 0.75rem;
  background-color: map-get($admonition-background-color-map, 'note');
-  border-left: .25rem solid map-get($admonition-color-map, 'note');
+  border-left: 0.25rem solid map-get($admonition-color-map, 'note');
  overflow: auto;
+  @include border-radius($global-border-radius);

  .admonition-title {
    font-weight: bold;
    margin: 0 -0.75rem;
-    padding: .25rem 1.8rem;
+    padding: 0.25rem 1.8rem;
    border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
    background-color: opacify(map-get($admonition-background-color-map, 'note'), 0.15);
+    @include border-radius(0);
  }

  &.open .admonition-title {
@@ -19,21 +21,21 @@
  }

  .admonition-content {
-    padding: .5rem 0;
+    padding: 0.5rem 0;
  }

  i.icon {
    font-size: 0.85rem;
    color: map-get($admonition-color-map, 'note');
    position: absolute;
-    top: .6rem;
-    left: .4rem;
+    top: 0.6rem;
+    left: 0.4rem;
  }

  i.details-icon {
    position: absolute;
-    top: .6rem;
-    right: .3rem;
+    top: 0.6rem;
+    right: 0.3rem;
  }

  @each $type, $color in $admonition-color-map {
@@ -62,6 +64,6 @@
  }

  &:last-child {
-    margin-bottom: .75rem;
+    margin-bottom: 0.75rem;
  }
 }
@@ -0,0 +1,99 @@
+/**
+ * Card link style
+ * @author  @Lruihao https://lruihao.cn
+ */
+
+.card-link {
+  position: relative;
+  display: block;
+  margin: 0.5rem auto;
+  box-sizing: border-box;
+  width: 400px;
+  max-width: 100%;
+  overflow: hidden;
+  text-decoration: none;
+  border: none;
+  @include border-radius(0.75rem);
+}
+
+.cl- {
+  &backdrop {
+    position: absolute;
+    top: 0.75rem;
+    bottom: 0.75rem;
+    left: 0;
+    right: 0;
+    background-image: url('/images/fixit.svg');
+    background-repeat: no-repeat;
+    filter: blur(0.15rem);
+    opacity: 0.5;
+    background-size: contain;
+    background-position: center;
+  }
+
+  &content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+    background-color: rgba(245, 245, 245, 0.88);
+  }
+
+  &text {
+    overflow: hidden;
+  }
+
+  &title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    max-height: calc(1rem * 1.25 * 2);
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.25;
+    color: $global-font-color;
+  }
+
+  &meta {
+    display: flex;
+    align-items: center;
+    margin-top: 0.25rem;
+    font-size: 0.825rem;
+    color: $global-font-secondary-color;
+  }
+
+  &icon-link {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    margin-right: 0.25rem;
+  }
+
+  &url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &icon-globe {
+    width: 4rem;
+    height: 4rem;
+    flex-shrink: 0;
+    margin-left: 0.25rem;
+  }
+
+  [theme='dark'] & {
+    &content {
+      background-color: rgba(61, 62, 65, 0.88);
+    }
+
+    &title {
+      color: $global-font-color-dark;
+    }
+
+    &meta {
+      color: $global-font-secondary-color-dark;
+    }
+  }
+}
@@ -0,0 +1,42 @@
+.blockquote-center {
+  border-left: none;
+  margin: 40px 0;
+  padding: 0;
+  position: relative;
+  text-align: center;
+
+  &::after,
+  &::before {
+    left: 0;
+    line-height: 1;
+    opacity: 0.6;
+    position: absolute;
+    width: 100%;
+  }
+
+  &::before {
+    border-top: 1px solid $global-border-color;
+    text-align: left;
+    top: -20px;
+    content: '\f10d';
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+
+    [theme='dark'] & {
+      border-top-color: $global-border-color-dark;
+    }
+  }
+
+  &::after {
+    border-bottom: 1px solid $global-border-color;
+    bottom: -20px;
+    text-align: right;
+    content: '\f10e';
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+
+    [theme='dark'] & {
+      border-bottom-color: $global-border-color-dark;
+    }
+  }
+}
@@ -1,4 +1,4 @@
 .echarts {
-  margin: .5rem 0;
+  margin: 0.5rem 0;
  text-align: center;
 }
@@ -0,0 +1,7 @@
+@import '_admonition';
+@import '_bilibili';
+@import '_cardlink';
+@import '_center-quote';
+@import '_echarts';
+@import '_instagram';
+@import '_mapbox';
@@ -1,5 +1,5 @@
 iframe.instagram-media {
-  [theme=dark] & {
+  [theme='dark'] & {
    border: none !important;
  }
 }
@@ -0,0 +1,5 @@
+.mapbox {
+  margin: 0.5rem 0;
+  padding: 0.5rem 0;
+  @include border-radius($global-border-radius);
+}
@@ -9,24 +9,27 @@ $global-font-size: 16px;
 $global-font-weight: 400;
 $global-line-height: 1.5rem;

+// Radius of the border
+$global-border-radius: 5px !default;
+
 // Color of the background
-$global-background-color: #fff !default;
-$global-background-color-dark: #292a2d !default;
+$global-background-color: #ffffff !default;
+$global-background-color-dark: #292a2e !default;

 // Color of the text
 $global-font-color: #161209 !default;
-$global-font-color-dark: #a9a9b3 !default;
+$global-font-color-dark: #b1b1ba !default;

 // Color of the secondary text
-$global-font-secondary-color: #a9a9b3 !default;
-$global-font-secondary-color-dark: #5d5d5f !default;
+$global-font-secondary-color: #b1b1ba !default;
+$global-font-secondary-color-dark: #909092 !default;

 // Color of the link
 $global-link-color: #161209 !default;
-$global-link-color-dark: #a9a9b3 !default;
+$global-link-color-dark: #b1b1ba !default;

 // Color of the hover link
-$global-link-hover-color: #2d96bd !default;
+$global-link-hover-color: #2983bb !default; // 潮蓝
 $global-link-hover-color-dark: #fff !default;

 // Color of the border
@@ -39,7 +42,7 @@ $global-border-color-dark: #363636 !default;
 $scrollbar-color: #87878d !default;

 // Color of the hover scrollbar
-$scrollbar-hover-color: #a9a9b3 !default;
+$scrollbar-hover-color: #b1b1ba !default;
 // ========== Scrollbar ========== //

 // ========== Selection ========== //
@@ -75,12 +78,12 @@ $toc-title-font-size: 1.2rem !default;
 $toc-content-font-size: 1rem !default;

 // Color of the single link
-$single-link-color: #2d96bd !default;
-$single-link-color-dark: #55bde2 !default;
+$single-link-color: #2376b7 !default; // 花青
+$single-link-color-dark: #1781b5 !default; // 釉蓝

 // Color of the hover single link
-$single-link-hover-color: #ef3982 !default;
-$single-link-hover-color-dark: #bdebfc !default;
+$single-link-hover-color: #ea517f !default; // 莲瓣红
+$single-link-hover-color-dark: #619ac3 !default; // 羽扇豆蓝

 // Color of the table background
 $table-background-color: #fff !default;
@@ -91,14 +94,14 @@ $table-thead-color: #ededed !default;
 $table-thead-color-dark: #20252b !default;

 // Color of the blockquote
-$blockquote-color: #6bd6fd !default;
-$blockquote-color-dark: #59c5ec !default;
+$blockquote-color: #bbc2c8 !default; 
+$blockquote-color-dark: #808992 !default;
 // ========== Single Content ========== //

 // ========== Pagination ========== //
 // Color of the link in pagination
-$pagination-link-color: #2d96bd !default;
-$pagination-link-color-dark: #a9a9b3 !default;
+$pagination-link-color: #bfbfbf !default;
+$pagination-link-color-dark: #b1b1ba !default;

 // Color of the hover link in pagination
 $pagination-link-hover-color: #000 !default;
@@ -107,18 +110,24 @@ $pagination-link-hover-color-dark: #fff !default;

 // ========== Code ========== //
 // Color of the code
-$code-color: #E74C3C !default;
-$code-color-dark: #E5BF78 !default;
+$code-color: #24292f !default;
+$code-color-dark: #adbac7 !default;

 // Color of the code background
-$code-background-color: #f5f5f5 !default;
-$code-background-color-dark: #272C34 !default;
+$code-background-color: #f6f8fa !default;
+$code-background-color-dark: #2d333b !default;
+
+$code-error-color: #dc3545 !default;
+
+// Color of the hightlight code
+$code-hightlight-color: #fff8c5 !default;
+$code-hightlight-color-dark: rgba(174, 124, 20, 0.15) !default;

 $code-info-color: #9c9c9c !default;
 $code-info-color-dark: #b1b0b0 !default;

 // Font size of the code
-$code-font-size: .875rem !default;
+$code-font-size: 0.875rem !default;

 // Font family of the code
 $code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-font-family !default;
@@ -173,159 +182,165 @@ $code-type-map: (
  language-typescript: 'TypeScript',
  language-vue: 'Vue',
  language-yml: 'YAML',
-  language-yaml: 'YAML',
+  language-yaml: 'YAML'
 ) !default;

 // Color map of the code highlight
 $code-highlight-color-map: (
-  /* Parentheses */ 'p': #a9a9b3,
-  /* Keyword */ 'k': #b501a9,
-  /* KeywordConstant */ 'kc': #b501a9,
-  /* KeywordDeclaration */ 'kd': #b501a9,
-  /* KeywordNamespace */ 'kn': #b501a9,
-  /* KeywordPseudo */ 'kp': #b501a9,
-  /* KeywordReserved */ 'kr': #b501a9,
-  /* KeywordType */ 'kt': #b501a9,
-  /* Name */ 'n': #333333,
-  /* NameAttribute */ 'na': #2b77fa,
-  /* NameBuiltin */ 'nb': #f74840,
-  /* NameBuiltinPseudo */ 'bp': #f74840,
-  /* NameClass */ 'nc': #cb8100,
-  /* NameConstant */ 'no': #2b77fa,
-  /* NameDecorator */ 'nd': #0086c1,
-  /* NameEntity */ 'ni': #2b77fa,
-  /* NameException */ 'ne': #2b77fa,
-  /* NameFunction */ 'nf': #2b77fa,
-  /* NameFunctionMagic */ 'fm': #1ccad6,
-  /* NameLabel */ 'nl': #2b77fa,
-  /* NameNamespace */ 'nn': #2b77fa,
-  /* NameOther */ 'nx': #333333,
-  /* NameProperty */ 'py': #2b77fa,
-  /* NameTag */ 'nt': #2b77fa,
-  /* NameVariable */ 'nv': #2b77fa,
-  /* NameVariableClass */ 'vc': #2b77fa,
-  /* NameVariableGlobal */ 'vg': #2b77fa,
-  /* NameVariableInstance */ 'vi': #2b77fa,
-  /* NameVariableMagic */ 'vm': #2b77fa,
-  /* Literal */ 'l': #2aa198,
-  /* LiteralDate */ 'ld': #2aa198,
-  /* LiteralString */ 's': #24a443,
-  /* LiteralStringAffix */ 'sa': #24a443,
-  /* LiteralStringBacktick */ 'sb': #24a443,
-  /* LiteralStringChar */ 'sc': #24a443,
-  /* LiteralStringDelimiter */ 'dl': #24a443,
-  /* LiteralStringDoc */ 'sd': #24a443,
-  /* LiteralStringDouble */ 's2': #24a443,
-  /* LiteralStringEscape */ 'se': #24a443,
-  /* LiteralStringHeredoc */ 'sh': #24a443,
-  /* LiteralStringInterpol */ 'si': #24a443,
-  /* LiteralStringOther */ 'sx': #24a443,
-  /* LiteralStringRegex */ 'sr': #24a443,
-  /* LiteralStringSingle */ 's1': #24a443,
-  /* LiteralStringSymbol */ 'ss': #24a443,
-  /* LiteralNumber */ 'm': #e2893c,
-  /* LiteralNumberBin */ 'mb': #e2893c,
-  /* LiteralNumberFloat */ 'mf': #e2893c,
-  /* LiteralNumberHex */ 'mh': #e2893c,
-  /* LiteralNumberInteger */ 'mi': #e2893c,
-  /* LiteralNumberIntegerLong */ 'il': #e2893c,
-  /* LiteralNumberOct */ 'mo': #e2893c,
-  /* Operator */ 'o': #f19b04,
-  /* OperatorWord */ 'ow': #b501a9,
-  /* Comment */ 'c': #a0a1a8,
-  /* CommentHashbang */ 'ch': #a0a1a8,
-  /* CommentMultiline */ 'cm': #a0a1a8,
-  /* CommentSingle */ 'c1': #a0a1a8,
-  /* CommentSpecial */ 'cs': #a0a1a8,
-  /* CommentPreproc */ 'cp': #a0a1a8,
-  /* CommentPreprocFile */ 'cpf': #a0a1a8,
-  /* Generic */ 'g': #e72d40,
-  /* GenericDeleted */ 'gd': #e72d40,
-  /* GenericEmph */ 'ge': #e72d40,
-  /* GenericError */ 'gr': #e72d40,
-  /* GenericHeading */ 'gh': #e72d40,
-  /* GenericInserted */ 'gi': #e72d40,
-  /* GenericOutput */ 'go': #e72d40,
-  /* GenericPrompt */ 'gp': #e72d40,
-  /* GenericStrong */ 'gs': #e72d40,
-  /* GenericSubheading */ 'gu': #e72d40,
-  /* GenericTraceback */ 'gt': #e72d40,
-  /* TextWhitespace */ 'w': #bbbbbb,
+  /* Error */ 'err': $code-error-color,
+  /* Keyword */ 'k': #cf222e,
+  /* KeywordConstant */ 'kc': #0550ae,
+  /* KeywordDeclaration */ 'kd': #cf222e,
+  /* KeywordNamespace */ 'kn': #cf222e,
+  /* KeywordPseudo */ 'kp': #cf222e,
+  /* KeywordReserved */ 'kr': #cf222e,
+  /* KeywordType */ 'kt': #cf222e,
+  /* Name */ 'n': $code-color,
+  /* NameAttribute */ 'na': #0550ae,
+  /* NameBuiltin */ 'nb': #0550ae,
+  /* NameBuiltinPseudo */ 'bp': $code-color,
+  /* NameClass */ 'nc': #8250df,
+  /* NameConstant */ 'no': #cf222e,
+  /* NameDecorator */ 'nd': #8250df,
+  /* NameEntity */ 'ni': #0550ae,
+  /* NameException */ 'ne': #0550ae,
+  /* NameFunction */ 'nf': #0550ae,
+  /* NameFunctionMagic */ 'fm': #0550ae,
+  /* NameLabel */ 'nl': #0550ae,
+  /* NameNamespace */ 'nn': #8250df,
+  /* NameOther */ 'nx': #0550ae,
+  /* NameProperty */ 'py': #0550ae,
+  /* NameTag */ 'nt': #116329,
+  /* NameVariable */ 'nv': #953800,
+  /* NameVariableClass */ 'vc': #0550ae,
+  /* NameVariableGlobal */ 'vg': #0550ae,
+  /* NameVariableInstance */ 'vi': #0550ae,
+  /* NameVariableMagic */ 'vm': #0550ae,
+  /* Literal */ 'l': #0550ae,
+  /* LiteralDate */ 'ld': #0a3069,
+  /* LiteralString */ 's': #0a3069,
+  /* LiteralStringAffix */ 'sa': #0a3069,
+  /* LiteralStringBacktick */ 'sb': #0a3069,
+  /* LiteralStringChar */ 'sc': #0a3069,
+  /* LiteralStringDelimiter */ 'dl': #0a3069,
+  /* LiteralStringDoc */ 'sd': #0a3069,
+  /* LiteralStringDouble */ 's2': #0a3069,
+  /* LiteralStringEscape */ 'se': #0a3069,
+  /* LiteralStringHeredoc */ 'sh': #0a3069,
+  /* LiteralStringInterpol */ 'si': #0a3069,
+  /* LiteralStringOther */ 'sx': #0a3069,
+  /* LiteralStringRegex */ 'sr': #0a3069,
+  /* LiteralStringSingle */ 's1': #0a3069,
+  /* LiteralStringSymbol */ 'ss': #0a3069,
+  /* LiteralNumber */ 'm': #0550ae,
+  /* LiteralNumberBin */ 'mb': #0550ae,
+  /* LiteralNumberFloat */ 'mf': #0550ae,
+  /* LiteralNumberHex */ 'mh': #0550ae,
+  /* LiteralNumberInteger */ 'mi': #0550ae,
+  /* LiteralNumberIntegerLong */ 'il': #0550ae,
+  /* LiteralNumberOct */ 'mo': #0550ae,
+  /* Operator */ 'o': #cf222e,
+  /* OperatorWord */ 'ow': #cf222e,
+  /* Punctuation */ 'p': $code-color,
+  /* Comment */ 'c': #6e7781,
+  /* CommentHashbang */ 'ch': #6e7781,
+  /* CommentMultiline */ 'cm': #6e7781,
+  /* CommentSingle */ 'c1': #6e7781,
+  /* CommentSpecial */ 'cs': #6e7781,
+  /* CommentPreproc */ 'cp': #0550ae,
+  /* CommentPreprocFile */ 'cpf': #6e7781,
+  /* Generic */ 'g': $code-color,
+  /* GenericDeleted */ 'gd': #82071e,
+  /* GenericEmph */ 'ge': $code-color,
+  /* GenericError */ 'gr': $code-error-color,
+  /* GenericHeading */ 'gh': $code-color,
+  /* GenericInserted */ 'gi': #116329,
+  /* GenericOutput */ 'go': $code-color,
+  /* GenericPrompt */ 'gp': $code-color,
+  /* GenericStrong */ 'gs': $code-color,
+  /* GenericSubheading */ 'gu': $code-color,
+  /* GenericTraceback */ 'gt': $code-error-color,
+  /* GenericUnderline */ 'gl': $code-color,
+  /* TextWhitespace */ 'w': $code-color,
+  /* Other */ 'x': $code-color
 ) !default;
 $code-highlight-color-map-dark: (
-  /* Parentheses */ 'p': #a9a9b3,
-  /* Keyword */ 'k': #d371e3,
-  /* KeywordConstant */ 'kc': #d371e3,
-  /* KeywordDeclaration */ 'kd': #d371e3,
-  /* KeywordNamespace */ 'kn': #d371e3,
-  /* KeywordPseudo */ 'kp': #d371e3,
-  /* KeywordReserved */ 'kr': #d371e3,
-  /* KeywordType */ 'kt': #d371e3,
-  /* Name */ 'n': #a9b2c0,
-  /* NameAttribute */ 'na': #41b0f5,
-  /* NameBuiltin */ 'nb': #19b9c4,
-  /* NameBuiltinPseudo */ 'bp': #ecbf6f,
-  /* NameClass */ 'nc': #ecbf6f,
-  /* NameConstant */ 'no': #41b0f5,
-  /* NameDecorator */ 'nd': #ecbf6f,
-  /* NameEntity */ 'ni': #41b0f5,
-  /* NameException */ 'ne': #41b0f5,
-  /* NameFunction */ 'nf': #41b0f5,
-  /* NameFunctionMagic */ 'fm': #19b9c4,
-  /* NameLabel */ 'nl': #41b0f5,
-  /* NameNamespace */ 'nn': #41b0f5,
-  /* NameOther */ 'nx': #a9a9b3,
-  /* NameProperty */ 'py': #41b0f5,
-  /* NameTag */ 'nt': #41b0f5,
-  /* NameVariable */ 'nv': #41b0f5,
-  /* NameVariableClass */ 'vc': #41b0f5,
-  /* NameVariableGlobal */ 'vg': #41b0f5,
-  /* NameVariableInstance */ 'vi': #41b0f5,
-  /* NameVariableMagic */ 'vm': #41b0f5,
-  /* Literal */ 'l': #2aa198,
-  /* LiteralDate */ 'ld': #2aa198,
-  /* LiteralString */ 's': #8cc570,
-  /* LiteralStringAffix */ 'sa': #8cc570,
-  /* LiteralStringBacktick */ 'sb': #8cc570,
-  /* LiteralStringChar */ 'sc': #8cc570,
-  /* LiteralStringDelimiter */ 'dl': #8cc570,
-  /* LiteralStringDoc */ 'sd': #8cc570,
-  /* LiteralStringDouble */ 's2': #8cc570,
-  /* LiteralStringEscape */ 'se': #8cc570,
-  /* LiteralStringHeredoc */ 'sh': #8cc570,
-  /* LiteralStringInterpol */ 'si': #8cc570,
-  /* LiteralStringOther */ 'sx': #8cc570,
-  /* LiteralStringRegex */ 'sr': #8cc570,
-  /* LiteralStringSingle */ 's1': #8cc570,
-  /* LiteralStringSymbol */ 'ss': #8cc570,
-  /* LiteralNumber */ 'm': #db985c,
-  /* LiteralNumberBin */ 'mb': #db985c,
-  /* LiteralNumberFloat */ 'mf': #db985c,
-  /* LiteralNumberHex */ 'mh': #db985c,
-  /* LiteralNumberInteger */ 'mi': #db985c,
-  /* LiteralNumberIntegerLong */ 'il': #db985c,
-  /* LiteralNumberOct */ 'mo': #db985c,
-  /* Operator */ 'o': #ecbf6f,
-  /* OperatorWord */ 'ow': #d371e3,
-  /* Comment */ 'c': #7e848f,
-  /* CommentHashbang */ 'ch': #7e848f,
-  /* CommentMultiline */ 'cm': #7e848f,
-  /* CommentSingle */ 'c1': #7e848f,
-  /* CommentSpecial */ 'cs': #7e848f,
-  /* CommentPreproc */ 'cp': #7e848f,
-  /* CommentPreprocFile */ 'cpf': #7e848f,
-  /* Generic */ 'g': #f16372,
-  /* GenericDeleted */ 'gd': #f16372,
-  /* GenericEmph */ 'ge': #f16372,
-  /* GenericError */ 'gr': #f16372,
-  /* GenericHeading */ 'gh': #f16372,
-  /* GenericInserted */ 'gi': #f16372,
-  /* GenericOutput */ 'go': #f16372,
-  /* GenericPrompt */ 'gp': #f16372,
-  /* GenericStrong */ 'gs': #f16372,
-  /* GenericSubheading */ 'gu': #f16372,
-  /* GenericTraceback */ 'gt': #f16372,
-  /* TextWhitespace */ 'w': #bbbbbb,
+  /* Error */ 'err': $code-error-color,
+  /* Keyword */ 'k': #f47067,
+  /* KeywordConstant */ 'kc': #6cb6ff,
+  /* KeywordDeclaration */ 'kd': #f47067,
+  /* KeywordNamespace */ 'kn': #f47067,
+  /* KeywordPseudo */ 'kp': #f47067,
+  /* KeywordReserved */ 'kr': #f47067,
+  /* KeywordType */ 'kt': #f47067,
+  /* Name */ 'n': $code-color-dark,
+  /* NameAttribute */ 'na': #6cb6ff,
+  /* NameBuiltin */ 'nb': #dcbdfb,
+  /* NameBuiltinPseudo */ 'bp': $code-color-dark,
+  /* NameClass */ 'nc': #dcbdfb,
+  /* NameConstant */ 'no': #6cb6ff,
+  /* NameDecorator */ 'nd': #dcbdfb,
+  /* NameEntity */ 'ni': #6cb6ff,
+  /* NameException */ 'ne': #6cb6ff,
+  /* NameFunction */ 'nf': #dcbdfb,
+  /* NameFunctionMagic */ 'fm': #6cb6ff,
+  /* NameLabel */ 'nl': #6cb6ff,
+  /* NameNamespace */ 'nn': #f47067,
+  /* NameOther */ 'nx': #dcbdfb,
+  /* NameProperty */ 'py': #6cb6ff,
+  /* NameTag */ 'nt': #8ddb8c,
+  /* NameVariable */ 'nv': #f69d50,
+  /* NameVariableClass */ 'vc': #6cb6ff,
+  /* NameVariableGlobal */ 'vg': #6cb6ff,
+  /* NameVariableInstance */ 'vi': #6cb6ff,
+  /* NameVariableMagic */ 'vm': #6cb6ff,
+  /* Literal */ 'l': #6cb6ff,
+  /* LiteralDate */ 'ld': #96d0ff,
+  /* LiteralString */ 's': #96d0ff,
+  /* LiteralStringAffix */ 'sa': #96d0ff,
+  /* LiteralStringBacktick */ 'sb': #96d0ff,
+  /* LiteralStringChar */ 'sc': #96d0ff,
+  /* LiteralStringDelimiter */ 'dl': #96d0ff,
+  /* LiteralStringDoc */ 'sd': #96d0ff,
+  /* LiteralStringDouble */ 's2': #96d0ff,
+  /* LiteralStringEscape */ 'se': #96d0ff,
+  /* LiteralStringHeredoc */ 'sh': #96d0ff,
+  /* LiteralStringInterpol */ 'si': #96d0ff,
+  /* LiteralStringOther */ 'sx': #96d0ff,
+  /* LiteralStringRegex */ 'sr': #96d0ff,
+  /* LiteralStringSingle */ 's1': #96d0ff,
+  /* LiteralStringSymbol */ 'ss': #96d0ff,
+  /* LiteralNumber */ 'm': #6cb6ff,
+  /* LiteralNumberBin */ 'mb': #6cb6ff,
+  /* LiteralNumberFloat */ 'mf': #6cb6ff,
+  /* LiteralNumberHex */ 'mh': #6cb6ff,
+  /* LiteralNumberInteger */ 'mi': #6cb6ff,
+  /* LiteralNumberIntegerLong */ 'il': #6cb6ff,
+  /* LiteralNumberOct */ 'mo': #6cb6ff,
+  /* Operator */ 'o': #f47067,
+  /* OperatorWord */ 'ow': #f47067,
+  /* Punctuation */ 'p': $code-color-dark,
+  /* Comment */ 'c': #768390,
+  /* CommentHashbang */ 'ch': #768390,
+  /* CommentMultiline */ 'cm': #768390,
+  /* CommentSingle */ 'c1': #768390,
+  /* CommentSpecial */ 'cs': #768390,
+  /* CommentPreproc */ 'cp': #6cb6ff,
+  /* CommentPreprocFile */ 'cpf': #768390,
+  /* Generic */ 'g': $code-color-dark,
+  /* GenericDeleted */ 'gd': #ffd8d3,
+  /* GenericEmph */ 'ge': $code-color-dark,
+  /* GenericError */ 'gr': $code-error-color,
+  /* GenericHeading */ 'gh': $code-color-dark,
+  /* GenericInserted */ 'gi': #b4f1b4,
+  /* GenericOutput */ 'go': $code-color-dark,
+  /* GenericPrompt */ 'gp': $code-color-dark,
+  /* GenericStrong */ 'gs': $code-color-dark,
+  /* GenericSubheading */ 'gu': $code-color-dark,
+  /* GenericTraceback */ 'gt': $code-error-color,
+  /* GenericUnderline */ 'gl': $code-color-dark,
+  /* TextWhitespace */ 'w': $code-color-dark,
+  /* Other */ 'x': $code-color-dark
 ) !default;
 // ========== Code ========== //

@@ -343,7 +358,7 @@ $admonition-color-map: (
  'danger': #ff1744,
  'bug': #f50057,
  'example': #651fff,
-  'quote': #9e9e9e,
+  'quote': #9e9e9e
 ) !default;

 // Color map of the admonition background
@@ -359,8 +374,6 @@ $admonition-background-color-map: (
  'danger': rgba(255, 23, 68, 0.1),
  'bug': rgba(245, 0, 87, 0.1),
  'example': rgba(101, 31, 255, 0.1),
-  'quote': rgba(159, 159, 159, 0.1),
+  'quote': rgba(159, 159, 159, 0.1)
 ) !default;
 // ========== Admonition ========== //
-
-$MAX_LENGTH: 12000px;
@@ -1,66 +1,73 @@
 prefix:
  libFiles: https://cdn.jsdelivr.net/npm/
-  # simple-icons@2.14.0 https://github.com/simple-icons/simple-icons
-  simpleIcons: https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/
+  # simple-icons@6.3.0 https://github.com/simple-icons/simple-icons
+  simpleIcons: https://cdn.jsdelivr.net/npm/simple-icons@6.3.0/icons/
 libFiles:
-  # normalize.css@8.0.1 https://github.com/necolas/normalize.css
-  normalizeCSS: normalize.css@8.0.1/normalize.min.css
-  # fontawesome-free@5.13.0 https://fontawesome.com/
-  fontawesomeFreeCSS: '@fortawesome/fontawesome-free@5.13.0/css/all.min.css'
-  # animate.css@3.7.2 https://github.com/daneden/animate.css
-  animateCSS: animate.css@3.7.2/animate.min.css
-  # smooth-scroll@16.1.3 https://github.com/cferdinandi/smooth-scroll
-  smoothScrollJS: smooth-scroll@16.1.3/dist/smooth-scroll.min.js
-  # autocomplete.js@0.37.1 https://github.com/algolia/autocomplete.js
-  autocompleteJS: autocomplete.js@0.37.1/dist/autocomplete.min.js
-  # lunr.js@2.3.8 https://lunrjs.com/
-  lunrJS: lunr@2.3.8/lunr.min.js
-  # algoliasearch@4.2.0 https://github.com/algolia/algoliasearch-client-javascript
-  algoliasearchJS: algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js
-  # lazysizes@5.2.2 https://github.com/aFarkas/lazysizes
-  lazysizesJS: lazysizes@5.2.2/lazysizes.min.js
-  # object-fit-images@3.2.4 https://github.com/fregante/object-fit-images
-  objectFitImagesJS: object-fit-images@3.2.4/dist/ofi.min.js
-  # twemoji@13.0.0 https://github.com/twitter/twemoji
-  twemojiJS: twemoji@13.0.0/dist/twemoji.min.js
-  # lightgallery.js@1.2.0 https://github.com/sachinchoolur/lightgallery.js
-  # lg-thumbnail.js@1.2.0 https://github.com/sachinchoolur/lg-thumbnail.js
-  # lg-zoom.js@1.2.0 https://github.com/sachinchoolur/lg-zoom.js
-  lightgalleryCSS: lightgallery.js@1.2.0/dist/css/lightgallery.min.css
-  lightgalleryJS: lightgallery.js@1.2.0/dist/js/lightgallery.min.js
-  lightgalleryThumbnailJS: lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js
-  lightgalleryZoomJS: lg-zoom.js@1.2.0/dist/lg-zoom.min.js
-  # clipboard.js@2.0.6 https://github.com/zenorocha/clipboard.js
-  clipboardJS: clipboard@2.0.6/dist/clipboard.min.js
-  # sharer.js@0.4.0 https://github.com/ellisonleao/sharer.js
-  sharerJS: sharer.js@0.4.0/sharer.min.js
-  # typeit@7.0.4 https://github.com/alexmacarthur/typeit
-  typeitJS: typeit@7.0.4/dist/typeit.min.js
-  # katex@0.11.1 https://katex.org/
-  katexCSS: katex@0.11.1/dist/katex.min.css
-  katexJS: katex@0.11.1/dist/katex.min.js
-  katexAutoRenderJS: katex@0.11.1/dist/contrib/auto-render.min.js
-  katexCopyTexCSS: katex@0.11.1/dist/contrib/copy-tex.min.css
-  katexCopyTexJS: katex@0.11.1/dist/contrib/copy-tex.min.js
-  katexMhchemJS: katex@0.11.1/dist/contrib/mhchem.min.js
-  # mermaid@8.5.1 https://github.com/knsv/mermaid
-  mermaidJS: mermaid@8.5.1/dist/mermaid.min.js
-  # echarts@4.8.0 https://echarts.apache.org/
-  echartsJS: echarts@4.8.0/dist/echarts.min.js
-  echartsMacaronsJS: echarts@4.8.0/theme/macarons.min.js
-  # mapbox-gl@1.10.1 https://docs.mapbox.com/mapbox-gl-js
-  mapboxGLCSS: mapbox-gl@1.10.1/dist/mapbox-gl.min.css
-  mapboxGLJS: mapbox-gl@1.10.1/dist/mapbox-gl.min.js
+  # algoliasearch@4.11.0 https://github.com/algolia/algoliasearch-client-javascript
+  algoliasearchJS: algoliasearch@4.11.0/dist/algoliasearch-lite.umd.min.js
+  # animate.css@4.1.1 https://github.com/daneden/animate.css
+  animateCSS: animate.css@4.1.1/animate.min.css
  # aplayer@1.10.1 https://github.com/MoePlayer/APlayer
  aplayerCSS: aplayer@1.10.1/dist/APlayer.min.css
  aplayerJS: aplayer@1.10.1/dist/APlayer.min.js
-  # meting@2.0.1 https://github.com/metowolf/MetingJS
-  metingJS: meting@2.0.1/dist/Meting.min.js
-  # gitalk@1.6.2 https://github.com/gitalk/gitalk
-  gitalkCSS: gitalk@1.6.2/dist/gitalk.min.css
-  gitalkJS: gitalk@1.6.2/dist/gitalk.min.js
-  # valine@1.4.14 https://valine.js.org/
-  valineJS: valine@1.4.14/dist/Valine.min.js
+  # artalk@2.1.4 https://github.com/ArtalkJS/Artalk
+  artalkCSS: artalk@2.1.4/dist/Artalk.min.css
+  artalkJS: artalk@2.1.4/dist/Artalk.min.js
+  # autocomplete.js@0.38.1 https://github.com/algolia/autocomplete.js
+  autocompleteJS: autocomplete.js@0.38.1/dist/autocomplete.min.js
+  # cell-watermark@1.0.3 https://github.com/Lruihao/watermark
+  cellWatermarkJS: cell-watermark@1.0.3/src/watermark.min.js
+  # clipboard.js@2.0.8 https://github.com/zenorocha/clipboard.js
+  clipboardJS: clipboard@2.0.8/dist/clipboard.min.js
  # cookieconsent@3.1.1 https://github.com/osano/cookieconsent
  cookieconsentCSS: cookieconsent@3.1.1/build/cookieconsent.min.css
  cookieconsentJS: cookieconsent@3.1.1/build/cookieconsent.min.js
+  # echarts@5.2.2 https://github.com/apache/echarts
+  echartsJS: echarts@5.2.2/dist/echarts.min.js
+  echartsMacaronsJS: echarts@5.2.2/theme/macarons.min.js
+  # fontawesome-free@5.14.0 https://github.com/FortAwesome/Font-Awesome
+  fontawesomeFreeCSS: '@fortawesome/fontawesome-free@5.14.0/css/all.min.css'
+  # gitalk@1.7.2 https://github.com/gitalk/gitalk
+  gitalkCSS: gitalk@1.7.2/dist/gitalk.min.css
+  gitalkJS: gitalk@1.7.2/dist/gitalk.min.js
+  # katex@0.15.1 https://github.com/KaTeX/KaTeX
+  katexAutoRenderJS: katex@0.15.1/dist/contrib/auto-render.min.js
+  katexCopyTexCSS: katex@0.15.1/dist/contrib/copy-tex.min.css
+  katexCopyTexJS: katex@0.15.1/dist/contrib/copy-tex.min.js
+  katexCSS: katex@0.15.1/dist/katex.min.css
+  katexJS: katex@0.15.1/dist/katex.min.js
+  katexMhchemJS: katex@0.15.1/dist/contrib/mhchem.min.js
+  # lazysizes@5.3.2 https://github.com/aFarkas/lazysizes
+  lazysizesJS: lazysizes@5.3.2/lazysizes.min.js
+   # lightgallery.js@1.4.0 https://github.com/sachinchoolur/lightgallery.js
+  # lg-thumbnail.js@1.4.0 https://github.com/sachinchoolur/lg-thumbnail.js
+  # lg-zoom.js@1.3.0 https://github.com/sachinchoolur/lg-zoom.js
+  lightgalleryCSS: lightgallery.js@1.4.0/dist/css/lightgallery.min.css
+  lightgalleryJS: lightgallery.js@1.4.0/dist/js/lightgallery.min.js
+  lightgalleryThumbnailJS: lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js
+  lightgalleryZoomJS: lg-zoom.js@1.3.0/dist/lg-zoom.min.js
+  # lunr.js@2.3.9 https://github.com/olivernn/lunr.js
+  lunrJS: lunr@2.3.9/lunr.min.js
+  # mapbox-gl@1.10.1 https://docs.mapbox.com/mapbox-gl-js
+  mapboxGLCSS: mapbox-gl@1.10.1/dist/mapbox-gl.min.css
+  mapboxGLJS: mapbox-gl@1.10.1/dist/mapbox-gl.min.js
+  # mermaid@8.5.1 https://github.com/knsv/mermaid
+  mermaidJS: mermaid@8.5.1/dist/mermaid.min.js
+  # meting@2.0.1 https://github.com/metowolf/MetingJS
+  metingJS: meting@2.0.1/dist/Meting.min.js
+  # normalize.css@8.0.1 https://github.com/necolas/normalize.css
+  normalizeCSS: normalize.css@8.0.1/normalize.min.css
+  # object-fit-images@3.2.4 https://github.com/fregante/object-fit-images
+  objectFitImagesJS: object-fit-images@3.2.4/dist/ofi.min.js
+  # pangu.js@4.0.7 https://github.com/vinta/pangu.js
+  panguJS: pangu@4.0.7/dist/browser/pangu.min.js
+  # sharer.js@0.4.2 https://github.com/ellisonleao/sharer.js
+  sharerJS: sharer.js@0.4.2/sharer.min.js
+  # twemoji@13.1.0 https://github.com/twitter/twemoji
+  twemojiJS: twemoji@13.0.0/dist/twemoji.min.js
+  # typeit@7.0.4 https://github.com/alexmacarthur/typeit
+  typeitJS: typeit@7.0.4/dist/typeit.min.js
+  # valine@1.4.16 https://github.com/xCss/Valine
+  valineJS: valine@1.4.16/dist/Valine.min.js
+  # waline@1.5.2 https://github.com/walinejs/waline
+  walineJS: "@waline/client@1.5.2/dist/Waline.min.js"
@@ -4,10 +4,6 @@ theme:
  - Promise
  - fetch
  - Element.prototype.after
-smooth-scroll:
-  - Element.prototype.closest
-  - requestAnimationFrame
-  - CustomEvent
 algoliasearch:
  - Promise
  - Object.entries
@@ -493,17 +493,88 @@ bilibili:
  Icon:
    Src: svg/icons/bilibili.svg

-# 063: Email
-email:
+# 063: ORCID
+orcid:
  Weight: 63
+  Prefix: https://orcid.org/
+  Title: ORCID
+  Icon:
+    Class: fab fa-orcid fa-fw
+
+# 064 Liberapay
+liberapay:
+  Weight: 64
+  Prefix: https://liberapay.com/
+  Title: Liberapay
+  Icon:
+    Simpleicons: liberapay
+
+# 065 Ko-Fi
+ko-fi:
+  Weight: 65
+  Prefix: https://ko-fi.com/
+  Title: Ko-Fi
+  Icon:
+    Simpleicons: kofi
+
+# 066: BuyMeaCoffee
+buymeacoffee:
+  Weight: 66
+  Prefix: https://www.buymeacoffee.com/
+  Title: BuyMeaCoffee
+  Icon:
+    Simpleicons: buymeacoffee
+
+# 067: Linktree
+linktree:
+  Weight: 67
+  Prefix: https://linktr.ee/
+  Title: Linktree
+  Icon:
+    Simpleicons: linktree
+
+# 068: QQ
+qq:
+  Weight: 68
+  Template: https://wpa.qq.com/msgrd?v=3&uin=%v&site=qq&menu=yes
+  Title: QQ
+  Icon:
+    Simpleicons: tencentqq
+
+# 069: QQGroup
+qqgroup:
+  Weight: 69
+  Template: https://qm.qq.com/cgi-bin/qm/qr?k=%v&jump_from=webapi
+  Title: QQGroup
+  Icon:
+    Class: fas fa-users
+
+# 070: Diaspora
+diaspora:
+  Weight: 70
+  Title: diaspora*
+  Icon:
+    Simpleicons: diaspora
+
+# 071: CSDN
+csdn:
+  Weight: 71
+  Prefix: https://blog.csdn.net/
+  Title: CSDN
+  Icon:
+    Src: svg/icons/csdn.svg
+
+# 072: Email
+email:
+  Weight: 72
  Template: mailto:%v
  Title: Email
  Icon:
    Class: far fa-envelope fa-fw

-# 064: RSS
+# 073: RSS
 rss:
-  Weight: 64
+  Weight: 73
  Url: /index.xml
  Title: RSS
  Newtab: true
@@ -0,0 +1,35 @@
+/**
+ * @author @Lruihao https://lruihao.cn
+ * @description Custom javascript for the hugo theme FixIt.
+ */
+const CustomJS = new (function () {
+  /**
+   * Hello World
+   * You can define your own functions below.
+   * @returns {CustomJS}
+   */
+  this.hello = () => {
+    // console.log('Hello CustomJS!');
+    return this;
+  }
+  /**
+   * Initialize.
+   * @returns {CustomJS}
+   */
+  this.init = () => {
+    // Custom infos.
+    this.hello();
+    return this;
+  };
+})();
+
+/**
+ * Immediate.
+ */
+(() => {
+  CustomJS.init();
+  // It will be executed when the DOM tree is built.
+  document.addEventListener('DOMContentLoaded', () => {
+    // console.log('DOM content loaded!')
+  });
+})();
@@ -1,26 +1,29 @@
-normalize.css@8.0.1 https://github.com/necolas/normalize.css
-fontawesome-free@5.13.0 https://fontawesome.com/
-simple-icons@2.14.0 https://github.com/simple-icons/simple-icons
-animate.css@3.7.2 https://github.com/daneden/animate.css
-smooth-scroll@16.1.3 https://github.com/cferdinandi/smooth-scroll
-autocomplete.js@0.37.1 https://github.com/algolia/autocomplete.js
-lunr.js@2.3.8 https://lunrjs.com/
-algoliasearch@4.2.0 https://github.com/algolia/algoliasearch-client-javascript
-lazysizes@5.2.2 https://github.com/aFarkas/lazysizes
-object-fit-images@3.2.4 https://github.com/fregante/object-fit-images
-twemoji@13.0.0 https://github.com/twitter/twemoji
-lightgallery.js@1.2.0 https://github.com/sachinchoolur/lightgallery.js
-lg-thumbnail.js@1.2.0 https://github.com/sachinchoolur/lg-thumbnail.js
-lg-zoom.js@1.2.0 https://github.com/sachinchoolur/lg-zoom.js
-clipboard.js@2.0.6 https://github.com/zenorocha/clipboard.js
-sharer.js@0.4.0 https://github.com/ellisonleao/sharer.js
-typeit@7.0.4 https://github.com/alexmacarthur/typeit
-katex@0.11.1 https://katex.org/
-mermaid@8.5.1 https://github.com/knsv/mermaid
-echarts@4.8.0 https://echarts.apache.org/
-mapbox-gl@1.10.1 https://github.com/mapbox/mapbox-gl-js
+algoliasearch@4.11.0 https://github.com/algolia/algoliasearch-client-javascript
+animate.css@4.1.1 https://github.com/daneden/animate.css
 aplayer@1.10.1 https://github.com/MoePlayer/APlayer
-meting@2.0.1 https://github.com/metowolf/MetingJS
-gitalk@1.6.2 https://github.com/gitalk/gitalk
-valine@1.4.14 https://valine.js.org/
+artalk@2.1.4 https://github.com/ArtalkJS/Artalk
+autocomplete.js@0.38.1 https://github.com/algolia/autocomplete.js
+cell-watermark@1.0.3 https://github.com/Lruihao/watermark
+clipboard.js@2.0.8 https://github.com/zenorocha/clipboard.js
 cookieconsent@3.1.1 https://github.com/osano/cookieconsent
+echarts@5.2.2 https://github.com/apache/echarts
+fontawesome-free@5.14.0 https://github.com/FortAwesome/Font-Awesome
+gitalk@1.7.2 https://github.com/gitalk/gitalk
+katex@0.15.1 https://github.com/KaTeX/KaTeX
+lazysizes@5.3.2 https://github.com/aFarkas/lazysizes
+lg-thumbnail.js@1.2.0 https://github.com/sachinchoolur/lg-thumbnail.js
+lg-zoom.js@1.3.0 https://github.com/sachinchoolur/lg-zoom.js
+lightgallery.js@1.4.0 https://github.com/sachinchoolur/lightgallery.js
+lunr.js@2.3.9 https://github.com/olivernn/lunr.js
+mapbox-gl@2.3.1 https://github.com/mapbox/mapbox-gl-js
+mermaid@8.13.3 https://github.com/knsv/mermaid
+meting@2.0.1 https://github.com/metowolf/MetingJS
+normalize.css@8.0.1 https://github.com/necolas/normalize.css
+object-fit-images@3.2.4 https://github.com/fregante/object-fit-images
+pangu.js@4.0.7 https://github.com/vinta/pangu.js
+sharer.js@0.4.2 https://github.com/ellisonleao/sharer.js
+simple-icons@5.21.1 https://github.com/simple-icons/simple-icons
+twemoji@13.1.0 https://github.com/twitter/twemoji
+typeit@7.0.4 https://github.com/alexmacarthur/typeit
+valine@1.4.16 https://github.com/xCss/Valine
+waline@1.5.2 https://github.com/walinejs/waline
@@ -0,0 +1 @@
+(function(e,t){"function"==typeof define&&define.amd?define([],t()):"object"==typeof module&&module.exports?module.exports=t():e.Watermark=t()})(this,function(){function e(t={}){var n=e.prototype;this.options=t,s(this),d(this,this.options),h(this),p(this),n.upload=function(e){if(e){o.disconnect(),i.disconnect(),this.options.content=e;for(const t of this._container.querySelectorAll(".cell-watermark"))t.innerHTML=e;o.observe(this._container.parentNode,{childList:!0,subtree:!0}),i.observe(this._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}},n.render=function(e={}){l(this,Object.assign(this.options,e))},n.destroy=function(){i.disconnect(),o.disconnect(),window.removeEventListener("resize",r),this._container.parentNode.removeChild(this._container)}}var t,n,i,o,r,c=window.outerWidth,a=window.outerHeight,s=function(e){e._container=document.createElement("div"),e._container.classList.add("cell-watermark-container"),e._container.style.cssText="display: block; pointer-events: none;",e._container.setAttribute("aria-hidden",!0),t=document.querySelector(e.options.appendTo)||document.body,t.appendChild(e._container)},d=function(e,t){t.rowSpacing=t.rowSpacing||60,t.colSpacing=t.colSpacing||30,t.width=t.width||150,t.height=t.height||20;let i=parseInt(a/(t.height+t.rowSpacing)),o=parseInt(c/(t.width+t.colSpacing)),r=(c-t.width*o-t.colSpacing*(o-1))/2,s=(a-t.height*i-t.rowSpacing*(i-1))/2,d=document.createElement("div");d.classList.add("cell-watermark"),d.style.cssText="transform: rotate(15deg); opacity: 0.1; font-size: 0.85rem; text-align: center;position: fixed; user-select: none; word-break: break-all; overflow: hidden; z-index: 999999;";for(let n=0;n<i;n++){let i=s+(t.rowSpacing+t.height)*n,c=o;n%2!=0&&c++;for(let n=0;n<c;n++){let a=r+(t.colSpacing+t.width)*n;c!==o&&(a-=(t.colSpacing+t.width)/2);let s=d.cloneNode();s.style.cssText+=`left: ${a}px; top: ${i}px; width: ${t.width}px; height: ${t.height}px`,s.style.transform=`rotate(${t.rotate}deg)`,s.style.opacity=t.opacity,s.style.fontSize=`${t.fontSize}rem`,s.style.fontFamily=t.fontFamily,s.innerHTML=t.content,e._container.appendChild(s)}}n=e._container},l=function(e,t){i.disconnect(),e._container.innerHTML="",d(e,t),i.observe(e._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},h=function(e){i=new MutationObserver(function(t,n){l(e,e.options)}),i.observe(e._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),o=new MutationObserver(function(e){for(let i of e)"childList"===i.type&&i.removedNodes.length>0&&0===document.querySelectorAll(".cell-watermark-container").length&&t.appendChild(n)}),o.observe(e._container.parentNode,{childList:!0,subtree:!0})},p=function(e){r=function(){window.outerHeight===a&&window.outerWidth===c||(a=window.outerHeight,c=window.outerWidth,l(e,e.options))},window.addEventListener("resize",r)};return e});
@@ -26,7 +26,7 @@
        typeof exports.nodeName !== 'string'
    ) {
        // CommonJS
-        factory(exports, require('echarts'));
+        factory(exports, require('echarts/lib/echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
@@ -835,6 +835,7 @@
 .gt-container .gt-avatar-github {
  width: 3em;
  height: 3em;
+  cursor: pointer;
 }
@media (max-width: 479px) {
  .gt-container .gt-avatar-github {
@@ -1246,5 +1247,3 @@
            transform: rotate(360deg);
  }
 }
-
-/*# sourceMappingURL=gitalk.css.map*/
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(t,r){t.exports=e},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n),a=function(e,t,r){for(var n=r,o=0,a=e.length;n<t.length;){var i=t[n];if(o<=0&&t.slice(n,n+a)===e)return n;"\\"===i?n++:"{"===i?o++:"}"===i&&o--,n++}return-1},i=function(e,t,r,n){for(var o=[],i=0;i<e.length;i++)if("text"===e[i].type){var l=e[i].data,d=!0,s=0,f=void 0;for(-1!==(f=l.indexOf(t))&&(s=f,o.push({type:"text",data:l.slice(0,s)}),d=!1);;){if(d){if(-1===(f=l.indexOf(t,s)))break;o.push({type:"text",data:l.slice(s,f)}),s=f}else{if(-1===(f=a(r,l,s+t.length)))break;o.push({type:"math",data:l.slice(s+t.length,f),rawData:l.slice(s,f+r.length),display:n}),s=f+r.length}d=!d}o.push({type:"text",data:l.slice(s)})}else o.push(e[i]);return o},l=function(e,t){for(var r=function(e,t){for(var r=[{type:"text",data:e}],n=0;n<t.length;n++){var o=t[n];r=i(r,o.left,o.right,o.display||!1)}return r}(e,t.delimiters),n=document.createDocumentFragment(),a=0;a<r.length;a++)if("text"===r[a].type)n.appendChild(document.createTextNode(r[a].data));else{var l=document.createElement("span"),d=r[a].data;t.displayMode=r[a].display;try{t.preProcess&&(d=t.preProcess(d)),o.a.render(d,l,t)}catch(e){if(!(e instanceof o.a.ParseError))throw e;t.errorCallback("KaTeX auto-render: Failed to parse `"+r[a].data+"` with ",e),n.appendChild(document.createTextNode(r[a].rawData));continue}n.appendChild(l)}return n};t.default=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},function e(t,r){for(var n=0;n<t.childNodes.length;n++){var o=t.childNodes[n];if(3===o.nodeType){var a=l(o.textContent,r);n+=a.childNodes.length-1,t.replaceChild(a,o)}else 1===o.nodeType&&function(){var t=" "+o.className+" ";-1===r.ignoredTags.indexOf(o.nodeName.toLowerCase())&&r.ignoredClasses.every(function(e){return-1===t.indexOf(" "+e+" ")})&&e(o,r)}()}}(e,r)}}]).default});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var a={};return function(){n.d(a,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,a=0,i=e.length;n<t.length;){var o=t[n];if(a<=0&&t.slice(n,n+i)===e)return n;"\\"===o?n++:"{"===o?a++:"}"===o&&a--,n++}return-1},i=/^\\begin{/,o=function(e,t){for(var n,a=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(a.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=i.test(d)?d:e.slice(t[l].left.length,n);a.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&a.push({type:"text",data:e}),a},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var a=document.createDocumentFragment(),i=0;i<n.length;i++)if("text"===n[i].type)a.appendChild(document.createTextNode(n[i].data));else{var l=document.createElement("span"),d=n[i].data;r.displayMode=n[i].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[i].data+"` with ",e),a.appendChild(document.createTextNode(n[i].rawData));continue}a.appendChild(l)}return a},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var a=t.childNodes[n];if(3===a.nodeType){var i=l(a.textContent,r);i&&(n+=i.childNodes.length-1,t.replaceChild(i,a))}else 1===a.nodeType&&function(){var t=" "+a.className+" ";-1===r.ignoredTags.indexOf(a.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(a,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),a=a.default}()}));
@@ -1 +1 @@
-.katex,.katex-display{user-select:all;-moz-user-select:all;-webkit-user-select:all;-ms-user-select:all}
+.katex,.katex-display{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
@@ -1 +1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t,n){},function(e,t,n){"use strict";n.r(t);n(0);var r={inline:["$","$"],display:["$$","$$"]},o=function(e,t){void 0===t&&(t=r);for(var n=e.querySelectorAll(".katex-mathml + .katex-html"),o=0;o<n.length;o++){var l=n[o];l.remove?l.remove(null):l.parentNode.removeChild(l)}for(var i=e.querySelectorAll(".katex-mathml"),a=0;a<i.length;a++){var u=i[a],f=u.querySelector("annotation");f&&(u.replaceWith?u.replaceWith(f):u.parentNode.replaceChild(f,u),f.innerHTML=t.inline[0]+f.innerHTML+t.inline[1])}for(var c=e.querySelectorAll(".katex-display annotation"),d=0;d<c.length;d++){var p=c[d];p.innerHTML=t.display[0]+p.innerHTML.substr(t.inline[0].length,p.innerHTML.length-t.inline[0].length-t.inline[1].length)+t.display[1]}return e};document.addEventListener("copy",function(e){var t=window.getSelection();if(!t.isCollapsed){var n=t.getRangeAt(0).cloneContents();if(n.querySelector(".katex-mathml")){for(var r=[],l=0;l<n.childNodes.length;l++)r.push(n.childNodes[l].outerHTML);e.clipboardData.setData("text/html",r.join("")),e.clipboardData.setData("text/plain",o(n).textContent),e.preventDefault()}}})}]).default});
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var l in n)("object"==typeof exports?exports:e)[l]=n[l]}}("undefined"!=typeof self?self:this,(function(){return function(){"use strict";var e={},t={inline:["$","$"],display:["$$","$$"]},n=function(e,n){void 0===n&&(n=t);for(var l=e.querySelectorAll(".katex-mathml + .katex-html"),r=0;r<l.length;r++){var i=l[r];i.remove?i.remove(null):i.parentNode.removeChild(i)}for(var o=e.querySelectorAll(".katex-mathml"),a=0;a<o.length;a++){var d=o[a],f=d.querySelector("annotation");f&&(d.replaceWith?d.replaceWith(f):d.parentNode.replaceChild(f,d),f.innerHTML=n.inline[0]+f.innerHTML+n.inline[1])}for(var c=e.querySelectorAll(".katex-display annotation"),s=0;s<c.length;s++){var p=c[s];p.innerHTML=n.display[0]+p.innerHTML.substr(n.inline[0].length,p.innerHTML.length-n.inline[0].length-n.inline[1].length)+n.display[1]}return e};return document.addEventListener("copy",(function(e){var t=window.getSelection();if(!t.isCollapsed){var l=t.getRangeAt(0).cloneContents();if(l.querySelector(".katex-mathml")){for(var r=[],i=0;i<l.childNodes.length;i++)r.push(l.childNodes[i].outerHTML);e.clipboardData.setData("text/html",r.join("")),e.clipboardData.setData("text/plain",n(l).textContent),e.preventDefault()}}})),e=e.default}()}));
@@ -12,6 +12,9 @@
  [theme=dark] & {
    @import "themes/dark/index";
  }
+  [theme=black] & {
+    @import "themes/dark/index";
+  }

  div.mermaidTooltip {
    z-index: 50;
@@ -6,4 +6,3 @@
 */
 /*! 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}
-/*# sourceMappingURL=/sm/5d8a97cdb40a6c49031b52d63494a6eca084416b5b035e5698fdc5fa0969b2c3.map */
@@ -1 +1 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>1001Tracklists icon</title><path d="M9.422 10.723h-1.35v3.807h2.458v-4.048h2.94v4.337h-1.35v1.35h-1.349v2.458h2.458v-2.7h2.699v-5.204h-1.35v-1.35H9.422zm1.35 11.952h2.457v-2.458H10.77v2.458zm-2.676-20H6.747v1.35h-1.35v1.348H4.049v1.35h-1.35v6.699H1.35v1.35H0v2.457h1.35v1.35h1.349v1.349h2.458v-7.856h-1.35v-4.24h1.35v-1.35h1.349v-1.35h1.35V3.784h8.289v1.35h1.349v1.349h1.35v1.35h1.349v4.24h-1.35v7.856h2.458v-1.35h1.35v-1.35H24v-2.457h-1.35v-1.35h-1.349V6.724h-1.35v-1.35h-1.349V4.024h-1.349v-1.35h-1.35V1.326H8.097v1.35Z"/></svg>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>1001Tracklists</title><path d="M9.422 10.723h-1.35v3.807h2.458v-4.048h2.94v4.337h-1.35v1.35h-1.349v2.458h2.458v-2.7h2.699v-5.204h-1.35v-1.35H9.422zm1.35 11.952h2.457v-2.458H10.77v2.458zm-2.676-20H6.747v1.35h-1.35v1.348H4.049v1.35h-1.35v6.699H1.35v1.35H0v2.457h1.35v1.35h1.349v1.349h2.458v-7.856h-1.35v-4.24h1.35v-1.35h1.349v-1.35h1.35V3.784h8.289v1.35h1.349v1.349h1.35v1.35h1.349v4.24h-1.35v7.856h2.458v-1.35h1.35v-1.35H24v-2.457h-1.35v-1.35h-1.349V6.724h-1.35v-1.35h-1.349V4.024h-1.349v-1.35h-1.35V1.326H8.097v1.35Z"/></svg>
@@ -1 +1 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>1Password icon</title><path d="M10.51,10.013V7.299c0-0.306,0.248-0.554,0.554-0.554h1.911c0.306,0,0.554,0.248,0.554,0.554v4.968 c0,0.076-0.038,0.134-0.076,0.191l-0.478,0.478c-0.115,0.115-0.115,0.287,0,0.382l0.478,0.478c0.057,0.057,0.076,0.115,0.076,0.191 v2.713c0,0.306-0.248,0.554-0.554,0.554h-1.911c-0.306,0-0.554-0.248-0.554-0.554v-4.968c0-0.076,0.038-0.134,0.076-0.191 l0.478-0.478c0.115-0.115,0.115-0.287,0-0.382l-0.478-0.478C10.529,10.146,10.51,10.089,10.51,10.013z M19.127,12 c0-3.936-3.191-7.127-7.127-7.127S4.873,8.064,4.873,12S8.064,19.127,12,19.127S19.127,15.936,19.127,12z M21.382,12 c0,5.178-4.204,9.363-9.363,9.363c-5.178,0-9.363-4.204-9.363-9.363c0-5.178,4.204-9.363,9.363-9.363 C17.178,2.637,21.382,6.822,21.382,12z M0.764,12c0,6.21,5.025,11.236,11.236,11.236S23.236,18.21,23.236,12S18.21,0.764,12,0.764 S0.764,5.79,0.764,12z M0,12C0,5.369,5.369,0,12,0c6.631,0,12,5.369,12,12s-5.369,12-12,12S0,18.631,0,12z"/></svg>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>1Password</title><path d="M10.51,10.013V7.299c0-0.306,0.248-0.554,0.554-0.554h1.911c0.306,0,0.554,0.248,0.554,0.554v4.968 c0,0.076-0.038,0.134-0.076,0.191l-0.478,0.478c-0.115,0.115-0.115,0.287,0,0.382l0.478,0.478c0.057,0.057,0.076,0.115,0.076,0.191 v2.713c0,0.306-0.248,0.554-0.554,0.554h-1.911c-0.306,0-0.554-0.248-0.554-0.554v-4.968c0-0.076,0.038-0.134,0.076-0.191 l0.478-0.478c0.115-0.115,0.115-0.287,0-0.382l-0.478-0.478C10.529,10.146,10.51,10.089,10.51,10.013z M19.127,12 c0-3.936-3.191-7.127-7.127-7.127S4.873,8.064,4.873,12S8.064,19.127,12,19.127S19.127,15.936,19.127,12z M21.382,12 c0,5.178-4.204,9.363-9.363,9.363c-5.178,0-9.363-4.204-9.363-9.363c0-5.178,4.204-9.363,9.363-9.363 C17.178,2.637,21.382,6.822,21.382,12z M0.764,12c0,6.21,5.025,11.236,11.236,11.236S23.236,18.21,23.236,12S18.21,0.764,12,0.764 S0.764,5.79,0.764,12z M0,12C0,5.369,5.369,0,12,0c6.631,0,12,5.369,12,12s-5.369,12-12,12S0,18.631,0,12z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>3M</title><path d="M18.903 5.954L17.17 13.03l-1.739-7.076h-5.099v2.613C9.72 6.28 7.56 5.706 5.558 5.674 3.12 5.641.563 6.701.469 9.936h3.373c0-.977.747-1.536 1.588-1.523 1.032-.008 1.508.434 1.533 1.124-.036.597-.387 1.014-1.525 1.014H4.303V12.9h1.03c.584 0 1.399.319 1.431 1.155.04.995-.652 1.435-1.501 1.443-1.517-.053-1.763-1.225-1.763-2.23H0c.015.677-.151 5.091 5.337 5.059 2.629.025 4.464-1.085 5.003-2.613v2.342h3.455v-7.632l1.867 7.634h3.018l1.875-7.626v7.634H24V5.954h-5.097zm-8.561 7.06c-.429-.893-1.034-1.284-1.376-1.407.714-.319 1.09-.751 1.376-1.614v3.021z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>42</title><path d="M24 12.42l-4.428 4.415H24zm-4.428-4.417l-4.414 4.418v4.414h4.414V12.42L24 8.003V3.575h-4.428zm-4.414 0l4.414-4.428h-4.414zM0 15.996h8.842v4.43h4.412V12.42H4.428l8.826-8.846H8.842L0 12.421z"/></svg>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				(function(e,t){"function"==typeof define&&define.amd?define([],t()):"object"==typeof module&&module.exports?module.exports=t():e.Watermark=t()})(this,function(){function e(t={}){var n=e.prototype;this.options=t,s(this),d(this,this.options),h(this),p(this),n.upload=function(e){if(e){o.disconnect(),i.disconnect(),this.options.content=e;for(const t of this._container.querySelectorAll(".cell-watermark"))t.innerHTML=e;o.observe(this._container.parentNode,{childList:!0,subtree:!0}),i.observe(this._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}},n.render=function(e={}){l(this,Object.assign(this.options,e))},n.destroy=function(){i.disconnect(),o.disconnect(),window.removeEventListener("resize",r),this._container.parentNode.removeChild(this._container)}}var t,n,i,o,r,c=window.outerWidth,a=window.outerHeight,s=function(e){e._container=document.createElement("div"),e._container.classList.add("cell-watermark-container"),e._container.style.cssText="display: block; pointer-events: none;",e._container.setAttribute("aria-hidden",!0),t=document.querySelector(e.options.appendTo)\|\|document.body,t.appendChild(e._container)},d=function(e,t){t.rowSpacing=t.rowSpacing\|\|60,t.colSpacing=t.colSpacing\|\|30,t.width=t.width\|\|150,t.height=t.height\|\|20;let i=parseInt(a/(t.height+t.rowSpacing)),o=parseInt(c/(t.width+t.colSpacing)),r=(c-t.widtho-t.colSpacing(o-1))/2,s=(a-t.heighti-t.rowSpacing(i-1))/2,d=document.createElement("div");d.classList.add("cell-watermark"),d.style.cssText="transform: rotate(15deg); opacity: 0.1; font-size: 0.85rem; text-align: center;position: fixed; user-select: none; word-break: break-all; overflow: hidden; z-index: 999999;";for(let n=0;n<i;n++){let i=s+(t.rowSpacing+t.height)n,c=o;n%2!=0&&c++;for(let n=0;n<c;n++){let a=r+(t.colSpacing+t.width)n;c!==o&&(a-=(t.colSpacing+t.width)/2);let s=d.cloneNode();s.style.cssText+=`left: ${a}px; top: ${i}px; width: ${t.width}px; height: ${t.height}px`,s.style.transform=`rotate(${t.rotate}deg)`,s.style.opacity=t.opacity,s.style.fontSize=`${t.fontSize}rem`,s.style.fontFamily=t.fontFamily,s.innerHTML=t.content,e._container.appendChild(s)}}n=e._container},l=function(e,t){i.disconnect(),e._container.innerHTML="",d(e,t),i.observe(e._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},h=function(e){i=new MutationObserver(function(t,n){l(e,e.options)}),i.observe(e._container,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),o=new MutationObserver(function(e){for(let i of e)"childList"===i.type&&i.removedNodes.length>0&&0===document.querySelectorAll(".cell-watermark-container").length&&t.appendChild(n)}),o.observe(e._container.parentNode,{childList:!0,subtree:!0})},p=function(e){r=function(){window.outerHeight===a&&window.outerWidth===c\|\|(a=window.outerHeight,c=window.outerWidth,l(e,e.options))},window.addEventListener("resize",r)};return e});
				`@@ -0,0 +1 @@`
				<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>3M</title><path d="M18.903 5.954L17.17 13.03l-1.739-7.076h-5.099v2.613C9.72 6.28 7.56 5.706 5.558 5.674 3.12 5.641.563 6.701.469 9.936h3.373c0-.977.747-1.536 1.588-1.523 1.032-.008 1.508.434 1.533 1.124-.036.597-.387 1.014-1.525 1.014H4.303V12.9h1.03c.584 0 1.399.319 1.431 1.155.04.995-.652 1.435-1.501 1.443-1.517-.053-1.763-1.225-1.763-2.23H0c.015.677-.151 5.091 5.337 5.059 2.629.025 4.464-1.085 5.003-2.613v2.342h3.455v-7.632l1.867 7.634h3.018l1.875-7.626v7.634H24V5.954h-5.097zm-8.561 7.06c-.429-.893-1.034-1.284-1.376-1.407.714-.319 1.09-.751 1.376-1.614v3.021z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>42</title><path d="M24 12.42l-4.428 4.415H24zm-4.428-4.417l-4.414 4.418v4.414h4.414V12.42L24 8.003V3.575h-4.428zm-4.414 0l4.414-4.428h-4.414zM0 15.996h8.842v4.43h4.412V12.42H4.428l8.826-8.846H8.842L0 12.421z"/></svg>`