♻️ Refactor: refactor reading progress with css animation

chore(deps-dev): bump @hugo-fixit/fixit-releaser from 1.1.1 to 1.1.4 (#573 )
Bumps [@hugo-fixit/fixit-releaser](https://github.com/hugo-fixit/fixit-releaser) from 1.1.1 to 1.1.4. - [Release notes](https://github.com/hugo-fixit/fixit-releaser/releases) - [Commits](https://github.com/hugo-fixit/fixit-releaser/compare/v1.1.1...v1.1.4) --- updated-dependencies: - dependency-name: "@hugo-fixit/fixit-releaser" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-08-29 17:52:40 +00:00 · 2025-03-06 15:02:41 +08:00 · 2025-03-06 11:50:11 +08:00 · 2025-03-05 01:23:50 +00:00 · 2025-01-21 01:18:25 +00:00 · 2025-01-20 12:23:15 +08:00
240 changed files with 5439 additions and 4797 deletions
@@ -1 +1,3 @@
-assets/lib/**/* linguist-vendored
+assets/lib/**/* linguist-vendored
+*.toml linguist-detectable
+*.md linguist-detectable
@@ -1,3 +0,0 @@
-custom: [
-  "https://paypal.me/Lruihao"
-]
@@ -1,13 +1,9 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
  - name: Questions 问题讨论
    url: https://github.com/hugo-fixit/FixIt/discussions/new
    about: Please ask questions in Discussion. 请在讨论中提问。

-  - name: 官方 QQ 群
-    url: https://qm.qq.com/cgi-bin/qm/qr?k=awbwdTtSQ_-H5QGzeJxdWgv6JMbNehNM&jump_from=webapi
-    about: '加入 FixIt 主题交流群: 814031017'
-
  - name: Theme Documentation 主题文档
-    url: https://fixit.lruihao.cn/categories/documentation/
+    url: https://fixit.lruihao.cn/documentation/
    about: Please read the documentation carefully. 请先仔细阅读主题文档。
@@ -1,27 +0,0 @@
-# Set to true to add reviewers to PRs
-addReviewers: true
-
-# Set to 'author' to add PR's author as a assignee
-addAssignees: author
-
-# A list of reviewers to be added to PRs (GitHub user name)
-reviewers:
-  - Lruihao
-  
-# A number of reviewers added to the PR
-# Set 0 to add all the reviewers (default: 0)
-numberOfReviewers: 1
-
-# A list of assignees, overrides reviewers if set
-assignees:
-  - Lruihao
-  
-# A number of assignees to add to the PRs
-# Set to 0 to add all of the assignees.
-# Uses numberOfReviewers if unset.
-numberOfAssignees: 0
-
-# A list of keywords to be skipped the process if PR's title include it
-skipKeywords:
-  - wip
-  - deps-dev
@@ -1,14 +0,0 @@
-name: Auto Assign
-on:
-  issues:
-    types: [opened]
-  pull_request_target:
-    types: [opened]
-jobs:
-  run:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: wow-actions/auto-assign@v3
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CONFIG_FILE: .github/configs/auto-assign.yml
@@ -1,7 +1,7 @@
 name: Hugo build check
 on:
  pull_request:
-    branches: [ master ]
+    branches: [ main ]
  workflow_dispatch:
 jobs:
  Actions-Hugo-Check:
@@ -13,9 +13,9 @@ jobs:
          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
+        uses: peaceiris/actions-hugo@v3
        with:
-          hugo-version: latest
+          hugo-version: ${{ vars.HUGO_VERSION || 'latest' }}
          extended: true
      - name: Build Hugo static files
-        run: hugo -v --source=docs --gc --minify
+        run: hugo --source=demo --gc --minify --logLevel info
@@ -14,10 +14,10 @@ name: "CodeQL"
 on:
  push:
    branches:
-      - master
+      - main
  pull_request:
    branches:
-      - master
+      - main
  schedule:
    - cron: "30 18 * * 5"

@@ -1,27 +0,0 @@
-name: Generate Contribute List
-on:
-  push:
-    branches:
-      - master
-    workflow_dispatch:
-jobs:
-  contrib-readme-job:
-    runs-on: ubuntu-latest
-    name: A job to automate contribute list in contributors.md file
-    steps:
-      - name: First Contribution Check
-        id: first-check
-        uses: sukki37/first-contribution-check-action@v1.0.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.CONTRIBUTORS_TOKEN }}
-      - name: Contribute List
-        uses: akhilmhdh/contributors-readme-action@master
-        if: ${{ steps.first-check.outputs.isNewContributor == 'true' }}
-        with:
-          readme_path: "contributors.md"
-          image_size: 100
-          commit_message: ":busts_in_silhouette: Chore(contributor): contrib-readme-action has updated contributors.md"
-          committer_username: "github-actions[bot]"
-          committer_email: "github-actions[bot]@users.noreply.github.com"
-        env:
-          GITHUB_TOKEN: ${{ secrets.CONTRIBUTORS_TOKEN }}
@@ -0,0 +1,28 @@
+name: Generate hugo-fixit component list
+on:
+  schedule: # Run workflow automatically
+    - cron: '0 0 * * *' # Runs every day at 00:00 UTC
+  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
+permissions:
+  contents: write # To write the generated contents to the readme
+
+jobs:
+  generate-component-list:
+    name: Update this repo's README with the list of hugo-fixit theme components
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Generate hugo-fixit component list
+        uses: hugo-fixit/action-component-list@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          comment_tag_name: HUGO_FIXIT_COMPONENTS
+          readme_path: 'README.md,README.zh-cn.md'
+          template: "- [{$repo.name}]({$repo.html_url})\\\n  {$repo.description}"
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: ':memo: Docs: update hugo-fixit component list'
+          commit_author: 'github-actions[bot] <github-actions[bot]@users.noreply.github.com>'
@@ -0,0 +1,46 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Release for new tag
+
+# Controls when the action will run.
+on:
+  # Triggers the workflow on push or pull request events but only for the main branch
+  push:
+    tags:
+      - 'v*.*.*'
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0    # Fetch all history for generating release notes
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      
+      - name: Install dependencies and generate release notes
+        run: |
+          npm install
+          npm run release -- --starting-version ${{ github.ref_name }}
+          sed -i '1,4d' CHANGELOG.md
+
+      - name: GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          # Creates a draft release. Defaults to false
+          draft: true
+          body_path: CHANGELOG.md
@@ -25,4 +25,4 @@ $RECYCLE.BIN/
 ## Linux
 .directory

-
+CHANGELOG.md
@@ -0,0 +1 @@
+npx fixit-releaser version --dev
@@ -0,0 +1 @@
+v18
@@ -1,5 +1,7 @@
 # CONTRIBUTING

+Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contributing and engaging in the discussions.
+
 ## How to contribute to this project

 First, fork this repository by clicking the fork button.
@@ -39,26 +41,23 @@ Finally, create a new pull request at <https://github.com/hugo-fixit/FixIt/pulls

 ### Branches

-| Branch | Description |
-| :-- | :-- |
-| master | _The branch open to the public and release versions_ |
-| dev | _The development branch of the next version_ |
-| RC branch | _The release candidate branch of the next version, e.g. v0.2.12-RC_ |
-| single feature | _The branch to enhancements or fixes_ |
+| Branch         | Description                                            |
+| :------------- | :----------------------------------------------------- |
+| main           | _The development branch, may contain unstable updates_ |
+| 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` |
+| event          | merge                                 |
+| :------------- | :------------------------------------ |
+| PR             | **others:main => main:** `--rebase`   |
+| single feature | **feature branch => main:** `--merge` |

 ### Commit message

 #### Format

-`[{emoji} ]{type}[({module})]: {subject within 50 words}[ (#{issue/pull request})]`
+`[{emoji} ]{type}[({scope})]: {subject within 50 words}[ (#{issue/pull request})]`

 example:

@@ -73,15 +72,19 @@ example:

 #### 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 |
+| 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       |
+| :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                                                                                   |
+
+> [!note]
+> The change log is automatically generated based on the commit message.\
+> Use `Chore` type or add `(ignore)` scope to ignore including in.
@@ -2,7 +2,7 @@ The MIT License (MIT)

 Copyright (c) 2018 LIUZHICHAO.COM
 Copyright (c) 2019-2020 DILLONZQ.COM
-Copyright (c) 2021-2023 LRUIHAO.CN
+Copyright (c) 2021-2025 Lruihao (https://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,83 +1,103 @@
-# FixIt Theme | Hugo
+<!-- markdownlint-disable-file MD033 MD041 -->
+![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.png)
+
+<div align="center" class="ignore">
+  <p>
+    FixIt is a clean, elegant but advanced blog theme for <a href="https://gohugo.io/">Hugo</a>.<br>
+    <em><sub>Don't forget to leave a ⭐️ if you like this theme, thanks!</sub></em>
+  </p>
+  English |
+  <a href="/README.zh-cn.md">简体中文</a> |
+  <a href="https://fixit.lruihao.cn/zh-cn/ecosystem/hugo-fixit/fixit/?lang=chinese_traditional">繁體中文</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=french">Français</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=russian">Русский язык</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=spanish">Español</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=hindi">हिन्दी</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=german">deutsch</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=korean">한국어</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">しろうと</a>
+</div>
+
+<a title="FixIt website" href="https://fixit.lruihao.cn"><img align="right" alt="FixIt logo" width="70" height="70" src="https://avatars.githubusercontent.com/u/110414864?s=200&v=4"></a>
+
+# FixIt
+
+> It is based on the original [LoveIt](https://github.com/dillonzq/LoveIt) Theme, [KeepIt](https://github.com/Fastbyte01/KeepIt) Theme and [LeaveIt](https://github.com/liuzc/LeaveIt) Theme.

 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.112.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.141.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
+[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)

-👉 English README | [简体中文说明](README.zh-cn.md)
+## Live Preview

-> [FixIt](https://github.com/hugo-fixit/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), [KeepIt Theme](https://github.com/Fastbyte01/KeepIt) and [LeaveIt Theme](https://github.com/liuzc/LeaveIt).
-
-The FixIt theme inherits the excellent features of these themes, and adds new features and optimizations on those basis. Please read [Why Choose FixIt](#why-choose-fixit) to learn more.
-
-![Hugo Theme FixIt](https://fixit.lruihao.cn/images/Apple-Devices-Preview.jpg)
-
-## Getting started
-
-Head to the [getting started page](http://fixit.lruihao.cn/documentation/getting-started/) or start with a template:
-
- [hugo-fixit/hugo-fixit-blog-git](https://github.com/hugo-fixit/hugo-fixit-blog-git)
- [hugo-fixit/hugo-fixit-blog-go](https://github.com/hugo-fixit/hugo-fixit-blog-go)
-
-## [Documentation](https://fixit.lruihao.cn/categories/documentation/)
-
-Head to this [documentation page](https://fixit.lruihao.cn/documentation/basics/) for a complete guidence to get started with the FixIt theme.
-
-Or run [Documentation Site](https://fixit.lruihao.cn) locally, see more details from [Contributing](#contributing).
-
-In addition, there is the [FixIt wiki](https://github.com/hugo-fixit/FixIt/wiki).
-
-## 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. Alternatively, you can install the theme in [other ways](https://fixit.lruihao.cn/documentation/basics/#install-theme).
-
-```bash
-git submodule add https://github.com/hugo-fixit/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
-```
-
-Next, go to the `hugo.toml` and change the default theme to `FixIt`.
-
-```diff
- theme = "LoveIt"
-+ theme = "FixIt"
-```
-
-Now the migration is finished and everything is ready 🎉
+<p align="center">
+  💟 <a href="https://fixit.lruihao.cn">Production</a> | ❇️ <a href="https://pre.fixit.lruihao.cn">Preview</a> | 🚼 <a href="https://demo.fixit.lruihao.cn">Demo</a> | 🆕 <a href="https://hugo-fixit.github.io/hugo-fixit-starter/">Starter</a>
+<br>
+<br>
+  More FixIt examples <a href="https://fixit.lruihao.cn/showcase/">here</a>.
+</p>

 ## Why choose FixIt

-The FixIt theme inherits the excellent features of themes such as LoveIt, and adds new features and optimizations on those basis, as detailed in [Features](#features). In addition, the FixIt theme has the following advantages:
+I don't know why 🤷.

- Complete Chinese and English official documentations
- Community support: Theme official website, Discussions and official QQ group
- Continuously and actively update
- Constantly incorporate suggestions and ideas from all sides
- Highly open theme customizable section
+<!-- Too lazy to write... -->

-In short, if you prefer the design language and freedom of the FixIt theme, and if you like to personalize your own themes as I do, the FixIt theme may be more suitable for you.
+## Usage

-## Who used FixIt
+### Documentation

-To see this theme in action, here are some [live demo sites](https://fixit.lruihao.cn/friends/) which are rendered with **FixIt** theme.
+Head to the [Quick Start](https://fixit.lruihao.cn/documentation/getting-started/quick-start/) page for a step-by-step guide on how to create a new website with FixIt.
+
+Outline: [Installation](https://fixit.lruihao.cn/documentation/installation/) ➜ [Getting Started](https://fixit.lruihao.cn/documentation/getting-started/) ➜ [Content Management](https://fixit.lruihao.cn/documentation/content-management/) ➜ [Advanced Usage](https://fixit.lruihao.cn/documentation/advanced/)
+
+### Starter Wizard
+
+We provided a CLI tool to help you create a new project with FixIt by a single command.
+
+```bash
+pnpx fixit-cli create my-blog
+```
+
+[![asciicast](https://asciinema.org/a/697494.svg)](https://asciinema.org/a/697494)
+
+### Templates
+
+Click the following links to generate a new repository with template:
+
+| Template                                      | repository                        | Generate link                  |
+| :-------------------------------------------- | :-------------------------------- | :----------------------------: |
+| A quick-start template base on Hugo Modules.  | [hugo-fixit-starter][starter]     | [Click][starter:generate]      |
+| A quick-start template base on Git submodule. | [hugo-fixit-starter1][starter1]   | [Click][starter1:generate]     |
+| Build multilingual sites using Fixit theme.   | [docs][docs]                      | [Click][docs:generate]         |
+| Customize with FixIt theme.                   | [Lruihao/hugo-blog][lruihao-blog] | [Click][lruihao-blog:generate] |
+
+[starter]: https://github.com/hugo-fixit/hugo-fixit-starter
+[starter:generate]: https://github.com/hugo-fixit/hugo-fixit-starter/generate
+[starter1]: https://github.com/hugo-fixit/hugo-fixit-starter1
+[starter1:generate]: https://github.com/hugo-fixit/hugo-fixit-starter1/generate
+[docs]: https://github.com/hugo-fixit/docs
+[docs:generate]: https://github.com/hugo-fixit/docs/generate
+[lruihao-blog]: https://github.com/Lruihao/hugo-blog
+[lruihao-blog:generate]: https://github.com/Lruihao/hugo-blog/generate

 ## Features

+<details>
+<summary>Click to view.</summary>
+
 ### 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
+- **[Baidu Analytics](https://tongji.baidu.com/)** supported
+- **[Umami Analytics](https://umami.is/)** supported
+- **[Plausible Analytics](https://plausible.io/)** supported
+- **[Cloudflare Web Analytics](https://www.cloudflare.com/web-analytics)** supported
+- **[Splitbee Analytics](https://splitbee.io)** supported
 - Search engine **verification** supported (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
 - **CDN** for third-party libraries supported

@@ -111,11 +131,13 @@ To see this theme in action, here are some [live demo sites](https://fixit.lruih

 ### Extended Features

+- **AI Summary**, **AI Search** and **AI Chatbot** supported by [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z)
 - **PWA (Progressive Web App)** supported
 - **Sub Menu** supported
 - **Content Encryption** supported (Pages, Partial)
 - **Friends** page embedded template
- **Search** supported by [algolia](https://www.algolia.com/) or [Fuse.js](https://fusejs.io/)
+- **Search** supported by [algolia](https://www.algolia.com/), [Fuse.js](https://fusejs.io/), CSE or [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z)
+- **Custom Search Engine (CSE)** supported by [Google](https://programmablesearchengine.google.com/)
 - **Twemoji** supported
 - Automatically **highlighting** code
 - **Copy code** to clipboard with one click
@@ -124,14 +146,16 @@ To see this theme in action, here are some [live demo sites](https://fixit.lruih
 - 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/)
+- **Diagrams** code fences extended and shortcode supported by [mermaid](https://github.com/knsv/mermaid)
+- **Interactive data visualization** shortcode and code fences extended supported by [ECharts](https://echarts.apache.org/)
+- **Timeline** code fences extended and shortcode supported
 - **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
+- **Bilibili player** and **Douyin player** shortcode
 - Kinds of **admonitions** shortcode
 - **Custom style** shortcode
 - **Custom script** shortcode
+- Open more **custom blocks**
 - **Animated typing** supported by [TypeIt](https://typeitjs.com/)
 - **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
 - **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
@@ -139,9 +163,14 @@ To see this theme in action, here are some [live demo sites](https://fixit.lruih
 - Options to **cache remote image** locally
 - ...

+</details>
+
 ## Multilingual and i18n

-FixIt supports the following languages:
+FixIt supports multilingual and i18n. For more information, see the [Content Management](https://fixit.lruihao.cn/documentation/content-management/introduction#multilingual) documentation. You are welcome to [contribute with a new language](https://github.com/hugo-fixit/FixIt/pulls).
+
+<details>
+<summary>FixIt supports the following languages.</summary>

 - English
 - Simplified Chinese
@@ -156,31 +185,76 @@ FixIt supports the following languages:
 - Russian
 - Romanian
 - Vietnamese
- [Contribute with a new language](https://github.com/hugo-fixit/FixIt/pulls)
+- Hindi

-[Languages Compatibility](https://fixit.lruihao.cn/documentation/basics/#language-compatibility)
+</details>

-## [Roadmap](https://github.com/hugo-fixit/FixIt/projects/1)
+## Theme Components

-## [Changelog](/CHANGELOG.md)
+The FixIt theme balances **simplicity** and **extensibility** with extra [Hugo theme components](https://fixit.lruihao.cn/ecosystem/#-components) for customization.

-## Questions, ideas, bugs, pull requests
+<details>
+<summary>Click to view.</summary>

-All feedback is welcome! Head over to the [issues](https://github.com/hugo-fixit/FixIt/issues) or [discussions](https://github.com/hugo-fixit/FixIt/discussions) tracker.
+<!-- HUGO_FIXIT_COMPONENTS:START -->
+- [fixit-bundle](https://github.com/hugo-fixit/fixit-bundle)\
+  🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component.
+- [cmpt-flyfish](https://github.com/hugo-fixit/cmpt-flyfish)\
+  🐟 一个 canvas 实现的小鱼游动动画效果。
+- [cmpt-mdevtools](https://github.com/hugo-fixit/cmpt-mdevtools)\
+  Mobile devtools component powered by vConsole and eruda.
+- [cmpt-translate](https://github.com/hugo-fixit/cmpt-translate)\
+  🌐 A component for site automatic translation.
+- [component-projects](https://github.com/hugo-fixit/component-projects)\
+  🐙 Display your GitHub projects in the FixIt theme and generate blog posts from readme.
+- [hugo-atom-feed](https://github.com/hugo-fixit/hugo-atom-feed)\
+  Hugo theme component for ATOM feed custom Output Format.
+- [hugo-json-feed](https://github.com/hugo-fixit/hugo-json-feed)\
+  Hugo theme component for JSON feed custom Output Format.
+- [shortcode-asciinema](https://github.com/hugo-fixit/shortcode-asciinema)\
+  A Hugo theme component with asciinema-embed shortcode.
+- [shortcode-caniuse](https://github.com/hugo-fixit/shortcode-caniuse)\
+  一个含有 caniuse shortcode 的 Hugo 主题组件。
+- [shortcode-docs-bookmark](https://github.com/hugo-fixit/shortcode-docs-bookmark)\
+  🔖 Embed bookmark of FixIt Docs.
+- [shortcode-rewards](https://github.com/hugo-fixit/shortcode-rewards)\
+  A Hugo theme component with reward-log or sponsor-log shortcode.
+<!-- HUGO_FIXIT_COMPONENTS:END -->
+
+</details>
+
+## Community
+
+All feedback is welcome! Head over to the [discussions][discussions], [Pull requests][pulls] and [issues][issues] tracker.
+
+| Official Community          | Description                     |
+| :-------------------------- | :------------------------------ |
+| [Discussions][discussions]  | GitHub discussion forum         |
+| [FixIt WeChat group][wx-mp] | Follow and reply "FixIt" to get |
+| [FixIt QQ group][qq-group]  | QQ group: `814031017`           |
+| [Hugo FixIt Planet][zsxq]   | Paid knowledge Planet           |
+
+[discussions]: https://github.com/hugo-fixit/FixIt/discussions
+[pulls]: https://github.com/hugo-fixit/FixIt/pulls
+[issues]: https://github.com/hugo-fixit/FixIt/issues
+[qq-group]: https://qm.qq.com/cgi-bin/qm/qr?k=awbwdTtSQ_-H5QGzeJxdWgv6JMbNehNM&jump_from=webapi
+[zsxq]: https://t.zsxq.com/GgKEW
+[wx-mp]: https://lruihao.cn/images/qr-wx-mp.webp

 ## Contributing

-Please see [CONTRIBUTING.md](CONTRIBUTING.md) for getting started with the contribution.
+We welcome you to join the development of FixIt. Please see [contributing document](/CONTRIBUTING.md). 🤗

-Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contributing and engaging in the discussions.
+Also, we welcome Issue or PR to our [official-components](https://github.com/hugo-fixit).

-**When contributing, please first discuss the change you wish to make via an issue on this repository before making the actual change**.
-
-## [Contributors](contributors.md)
+> [!note]
+> When contributing, please first discuss the change you wish to make via a discussion on this repository before making the actual change.

 ## Acknowledgements

-<details open>
+Thanks to all the [contributors](https://github.com/hugo-fixit/FixIt/graphs/contributors) for their support!
+
+<details>
 <summary>Thanks to the authors of following resources included in the theme:</summary>

 - [normalize.css](https://github.com/necolas/normalize.css)
@@ -207,6 +281,7 @@ Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contrib
 - [cookieconsent](https://github.com/osano/cookieconsent)
 - [cell-watermark](https://github.com/Lruihao/watermark)
 - [不蒜子](http://busuanzi.ibruce.info/)
+- [Vercount](https://github.com/EvanNotFound/vercount)
 - [pangu.js](https://github.com/vinta/pangu.js)
 - [Artalk](https://artalk.js.org/)
 - [Waline](https://waline.js.org/)
@@ -214,13 +289,12 @@ Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contrib
 - [github-corners](https://github.com/tholman/github-corners)
 - [giscus](https://giscus.app/)
 - [crypto-js](https://github.com/brix/crypto-js)
- [vConsole](https://github.com/Tencent/vConsole)
- [eruda](https://github.com/liriliri/eruda)
 - [pace](https://github.com/CodeByZach/pace)
+- [xxhash-wasm](https://github.com/jungomi/xxhash-wasm)

 </details>

-<details open>
+<details>
 <summary>The FixIt also draws on some features of the following projects, and thanks to their authors as well:</summary>

 - [DoIt](https://github.com/HEIGE-PCloud/DoIt)
@@ -230,19 +304,20 @@ Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contrib

 ## License

-FixIt is licensed under the **MIT** license. Check the [LICENSE file](LICENSE) for details.
+FixIt is licensed under the **MIT** license. Check the [LICENSE file](/LICENSE) for details.
+
+## Sponsor
+
+If you enjoy the theme, please consider buying me a coffee ☕️. Thanks!
+
+- [Wechat](/images/wechatpay.jpg)
+- [Alipay](/images/alipay.jpg)
+- [PayPal](https://paypal.me/Lruihao)
+
+Thanks to the following sponsors for their support:
+
+- [translate.js](https://github.com/xnx3/translate) Sponsoring [Enterprise Translation Channel](https://translate.zvo.cn/4087.html).

 ## Author

 [Lruihao](https://github.com/Lruihao "Follow me on GitHub")
-
-## Sponsor
-
-Giving me a Star 🌟 is already the greatest encouragement and support for me.\
-If you enjoy the theme, please consider buying me a coffee ☕️.
-
- [PayPal](https://paypal.me/Lruihao)
- [Alipay](images/alipay.jpg)
- [Wechat](images/wechatpay.jpg)
-
-Thanks! ❤️
@@ -1,76 +1,95 @@
-# FixIt 主题 | Hugo
+<!-- markdownlint-disable-file MD033 MD041 -->
+![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.png)
+
+<div align="center" class="ignore">
+  <p>
+    FixIt 是一个简洁、优雅且高效的 <a href="https://gohugo.io/">Hugo</a> 博客主题。<br>
+    <em><sub>如果你喜欢这个主题，别忘了留下一颗 ⭐️ 哦，谢谢！</sub></em>
+  </p>
+  <a href="/README.md">English</a> |
+  简体中文 |
+  <a href="https://fixit.lruihao.cn/zh-cn/ecosystem/hugo-fixit/fixit/?lang=chinese_traditional">繁體中文</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=french">Français</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=russian">Русский язык</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=spanish">Español</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=hindi">हिन्दी</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=german">deutsch</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=korean">한국어</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">しろうと</a>
+</div>
+
+<a title="FixIt 官网" href="https://fixit.lruihao.cn/zh-cn/"><img align="right" alt="FixIt logo" width="70" height="70" src="https://avatars.githubusercontent.com/u/110414864?s=200&v=4"></a>
+
+# FixIt
+
+> 它的原型基于 [LoveIt](https://github.com/dillonzq/LoveIt) 主题，[KeepIt](https://github.com/Fastbyte01/KeepIt) 主题和 [LeaveIt](https://github.com/liuzc/LeaveIt) 主题。

 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.112.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.141.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
+[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)

-👉 [English README](README.md) | 简体中文说明
+## 即时预览

-> [FixIt](https://github.com/hugo-fixit/FixIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
-
-它的原型基于 [LoveIt 主题](https://github.com/dillonzq/LoveIt)，[KeepIt 主题](https://github.com/Fastbyte01/KeepIt) 和 [LeaveIt 主题](https://github.com/liuzc/LeaveIt)。
-
-FixIt 主题继承了这些主题的优秀功能，并在此基础上添加了新的功能与优化，请阅读 [为什么选择 FixIt](#为什么选择-FixIt) 来了解更多。
-
-![Hugo Theme FixIt](https://fixit.lruihao.cn/images/Apple-Devices-Preview.jpg)
-
-## 快速上手
-
-前往 [快速上手页面](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/) 或从一个模板直接开始：
-
- [hugo-fixit/hugo-fixit-blog-git](https://github.com/hugo-fixit/hugo-fixit-blog-git)
- [hugo-fixit/hugo-fixit-blog-go](https://github.com/hugo-fixit/hugo-fixit-blog-go)
-
-## [完整文档](https://fixit.lruihao.cn/zh-cn/categories/documentation/)
-
-前往这篇 [文档](https://fixit.lruihao.cn/zh-cn/documentation/basics/)，阅读关于安装与使用的详细指南。
-
-或者在本地运行 [文档站点](https://fixit.lruihao.cn/zh-cn/)，更多细节详见 [参与贡献](#参与贡献)。
-
-除此之外，还有 [FixIt 主题维基](https://github.com/hugo-fixit/FixIt/wiki)。
-
-## 从 LoveIt 迁移
-
-如果你现在正在使用 LoveIt 主题（或者一些其他的主题），你可以很容易地迁移至 FixIt。
-
-你可以将这个主题仓库添加为你的网站目录的子模块。或者，你可以通过 [其他方式](https://fixit.lruihao.cn/zh-cn/documentation/basics/#install-theme) 安装主题。
-
-```bash
-git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
-```
-
-之后，你可以在站点目录通过这条命令来将主题更新至最新版本：
-
-```bash
-git submodule update --remote --merge
-```
-
-接着，前往 `hugo.toml` 并将默认主题更改为 `FixIt`。
-
-```diff
- theme = "LoveIt"
-+ theme = "FixIt"
-```
-
-这样就完成了迁移工作，现在一切准备就绪 🎉
+<p align="center">
+  💟 <a href="https://fixit.lruihao.cn/zh-cn/">Production</a> | ❇️ <a href="https://pre.fixit.lruihao.cn/zh-cn/">Preview</a> | 🚼 <a href="https://demo.fixit.lruihao.cn">Demo</a> | 🆕 <a href="https://hugo-fixit.github.io/hugo-fixit-starter/">Starter</a>
+<br>
+<br>
+  更多 FixIt 的例子参见 <a href="https://fixit.lruihao.cn/zh-cn/showcase/">这里</a>。
+</p>

 ## 为什么选择 FixIt

-FixIt 主题继承了 LoveIt 等主题的优秀功能，并在它们的基础上添加了新的功能与优化，详见 [特性](#特性)。除此之外，FixIt 主题还有以下优点：
+我也不知道为什么 🤷。

- 完善的中英文官方文档
- 社区支持：主题官网、Discussions 和官方 QQ 群
- 持续积极地更新
- 不断收纳各方的建议和想法
- 高度开放主题可自定义部分
+<!-- 懒的写…… -->

-总之，如果你更偏好 FixIt 主题的设计语言和自由度，如果你和我一样喜欢个性化自定义主题，那么，FixIt 主题可能是更适合你。  
+## 使用指南

-## 谁在用 FixIt
+### 主题文档

-为了直观地浏览主题特性，这里有一些基于 **FixIt** 主题渲染的 [预览网站](https://fixit.lruihao.cn/zh-cn/friends/)。
+前往 [快速上手](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/quick-start/) 页面，了解如何使用 FixIt 主题创建一个新网站的详细步骤。

-## 特性
+大纲：[安装篇](https://fixit.lruihao.cn/zh-cn/documentation/installation/) ➜ [入门篇](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/) ➜ [内容管理](https://fixit.lruihao.cn/zh-cn/documentation/content-management/) ➜ [进阶篇](https://fixit.lruihao.cn/zh-cn/documentation/advanced/)
+
+### 快速开始
+
+我们提供了一个 CLI 工具，可以通过一个命令来创建一个新的 FixIt 项目。
+
+```bash
+pnpx fixit-cli create my-blog
+```
+
+[![asciicast](https://asciinema.org/a/697494.svg)](https://asciinema.org/a/697494)
+
+### 模板
+
+点击以下链接使用模板生成一个新的仓库：
+
+| 模板                                | 仓库                              | 生成链接                          |
+| :---------------------------------- | :-------------------------------- | :-------------------------------: |
+| 基于 Hugo Modules 的快速入门模板。  | [hugo-fixit-starter][starter]     | [点击生成][starter:generate]      |
+| 基于 Git submodule 的快速入门模板。 | [hugo-fixit-starter1][starter1]   | [点击生成][starter1:generate]     |
+| 使用 Fixit 主题构建多语言网站。     | [docs][docs]                      | [点击生成][docs:generate]         |
+| 基于 FixIt 主题进行自定义设置。     | [Lruihao/hugo-blog][lruihao-blog] | [点击生成][lruihao-blog:generate] |
+
+[starter]: https://github.com/hugo-fixit/hugo-fixit-starter
+[starter:generate]: https://github.com/hugo-fixit/hugo-fixit-starter/generate
+[starter1]: https://github.com/hugo-fixit/hugo-fixit-starter1
+[starter1:generate]: https://github.com/hugo-fixit/hugo-fixit-starter1/generate
+[docs]: https://github.com/hugo-fixit/docs
+[docs:generate]: https://github.com/hugo-fixit/docs/generate
+[lruihao-blog]: https://github.com/Lruihao/hugo-blog
+[lruihao-blog:generate]: https://github.com/Lruihao/hugo-blog/generate
+
+### 镜像
+
+Gitee 镜像仓库：<https://gitee.com/lruihao/FixIt>
+
+## 特色
+
+<details>
+<summary>点击展开</summary>

 ### 性能和 SEO

@@ -78,6 +97,11 @@ FixIt 主题继承了 LoveIt 等主题的优秀功能，并在它们的基础上
 - 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
 - 支持 **[Google Analytics](https://analytics.google.com/analytics)**
 - 支持 **[Fathom Analytics](https://usefathom.com/)**
+- 支持 **[百度统计](https://tongji.baidu.com/)**
+- 支持 **[Umami Analytics](https://umami.is/)**
+- 支持 **[Plausible Analytics](https://plausible.io/)**
+- 支持 **[Cloudflare Web Analytics](https://www.cloudflare.com/web-analytics)**
+- 支持 **[Splitbee Analytics](https://splitbee.io)**
 - 支持搜索引擎的**网站验证** (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
 - 支持所有第三方库的 **CDN**

@@ -111,11 +135,13 @@ FixIt 主题继承了 LoveIt 等主题的优秀功能，并在它们的基础上

 ### 扩展功能

+- 支持基于 [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z) 的 **AI 摘要**、**AI 搜索** 和 **AI 智能客服**
 - 支持**渐进式网页应用**
 - 支持**二级菜单**
 - 支持**内容加密**（页面、局部）
 - 支持**友情链接**的页面模板
- 支持基于 [algolia](https://www.algolia.com/) 或 [Fuse.js](https://fusejs.io/) 的**搜索**
+- 支持基于 [algolia](https://www.algolia.com/)、[Fuse.js](https://fusejs.io/)、 **CSE** 或 [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z) 的**搜索**
+- 支持基于 [Google](https://programmablesearchengine.google.com/) 的**自定义搜索引擎 (CSE)**
 - 支持 **Twemoji**
 - 支持**代码高亮**
 - 一键**复制代码**到剪贴板
@@ -124,14 +150,16 @@ FixIt 主题继承了 LoveIt 等主题的优秀功能，并在它们的基础上
 - 支持**上标注释**的扩展 Markdown 语法
 - 支持**分数**的扩展 Markdown 语法
 - 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
- 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
- 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
+- 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** 代码块扩展语法和 shortcode
+- 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** 代码块扩展语法和 shortcode
+- 支持 **Timeline** 的代码块扩展语法和 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
+- 支持 **Bilibili 视频** 和 **抖音视频** shortcode
 - 支持多种**注释**的 shortcode
 - 支持**自定义样式**的 shortcode
 - 支持**自定义脚本**的 shortcode
+- 支持**自定义模板块**
 - 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
 - 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
 - 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
@@ -139,9 +167,14 @@ FixIt 主题继承了 LoveIt 等主题的优秀功能，并在它们的基础上
 - 支持本地**缓存远程图床图片**
 - ……

+</details>
+
 ## 多语言和国际化

-FixIt 支持下列语言：
+FixIt 主题多语言基本配置及自动翻译等详见 [内容管理](https://fixit.lruihao.cn/zh-cn/documentation/content-management/introduction#multilingual) 文档，欢迎 [贡献一种新的语言](https://github.com/hugo-fixit/FixIt/pulls)。
+
+<details>
+<summary>FixIt 支持下列语言。</summary>

 - 英语
 - 简体中文
@@ -156,35 +189,76 @@ FixIt 支持下列语言：
 - 俄语
 - 罗马尼亚语
 - 越南语
- [贡献一种新的语言](https://github.com/hugo-fixit/FixIt/pulls)
+- 印地语

-[语言兼容性](https://fixit.lruihao.cn/zh-cn/theme-documentation-basics/#language-compatibility)
+</details>

-## [路线图](https://github.com/hugo-fixit/FixIt/projects/1)
+## 主题组件

-## [更新日志](/CHANGELOG.md)
+FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此，我们开发了一系列额外的 [Hugo 主题组件](https://fixit.lruihao.cn/zh-cn/ecosystem/#-组件) 供用户选择。

-## 问题、想法、bugs 和 PRs
+<details>
+<summary>点击展开</summary>

-所有的反馈都是欢迎的！详见 [议题](https://github.com/hugo-fixit/FixIt/issues) 或者 [讨论](https://github.com/hugo-fixit/FixIt/discussions)。
+<!-- HUGO_FIXIT_COMPONENTS:START -->
+- [fixit-bundle](https://github.com/hugo-fixit/fixit-bundle)\
+  🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component.
+- [cmpt-flyfish](https://github.com/hugo-fixit/cmpt-flyfish)\
+  🐟 一个 canvas 实现的小鱼游动动画效果。
+- [cmpt-mdevtools](https://github.com/hugo-fixit/cmpt-mdevtools)\
+  Mobile devtools component powered by vConsole and eruda.
+- [cmpt-translate](https://github.com/hugo-fixit/cmpt-translate)\
+  🌐 A component for site automatic translation.
+- [component-projects](https://github.com/hugo-fixit/component-projects)\
+  🐙 Display your GitHub projects in the FixIt theme and generate blog posts from readme.
+- [hugo-atom-feed](https://github.com/hugo-fixit/hugo-atom-feed)\
+  Hugo theme component for ATOM feed custom Output Format.
+- [hugo-json-feed](https://github.com/hugo-fixit/hugo-json-feed)\
+  Hugo theme component for JSON feed custom Output Format.
+- [shortcode-asciinema](https://github.com/hugo-fixit/shortcode-asciinema)\
+  A Hugo theme component with asciinema-embed shortcode.
+- [shortcode-caniuse](https://github.com/hugo-fixit/shortcode-caniuse)\
+  一个含有 caniuse shortcode 的 Hugo 主题组件。
+- [shortcode-docs-bookmark](https://github.com/hugo-fixit/shortcode-docs-bookmark)\
+  🔖 Embed bookmark of FixIt Docs.
+- [shortcode-rewards](https://github.com/hugo-fixit/shortcode-rewards)\
+  A Hugo theme component with reward-log or sponsor-log shortcode.
+<!-- HUGO_FIXIT_COMPONENTS:END -->
+
+</details>
+
+## 社区支持
+
+所有的反馈都是欢迎的！详见 [Discussions][discussions]、[Pull requests][pulls] 和 [Issues][issues]。
+
+| 官方社区                           | 说明                            |
+| :--------------------------------- | :------------------------------ |
+| [Discussions][discussions]         | GitHub 讨论区                   |
+| [FixIt 主题交流群（微信）][wx-mp]  | 关注「菠菜眾長」回复“FixIt”获取 |
+| [FixIt 主题交流群（QQ）][qq-group] | QQ 群：`814031017`              |
+| [Hugo FixIt 星球][zsxq]            | 付费知识星球                    |
+
+[discussions]: https://github.com/hugo-fixit/FixIt/discussions
+[pulls]: https://github.com/hugo-fixit/FixIt/pulls
+[issues]: https://github.com/hugo-fixit/FixIt/issues
+[qq-group]: https://qm.qq.com/cgi-bin/qm/qr?k=awbwdTtSQ_-H5QGzeJxdWgv6JMbNehNM&jump_from=webapi
+[zsxq]: https://t.zsxq.com/GgKEW
+[wx-mp]: https://lruihao.cn/images/qr-wx-mp.webp

 ## 参与贡献

-请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 以了解贡献该项目的基本信息。
+我们欢迎你加入 FixIt 的开发，贡献出你的一份力量。请看开源 [贡献指南](/CONTRIBUTING.md)。 🤗

-确保在贡献和参与讨论时遵守 [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)。
+你也可以随时向我们的 [官方插件](https://github.com/hugo-fixit) 提交 Issue 或 Pull Request。

-**贡献时，请先通过此存储库上的问题讨论你希望进行的更改，然后再进行实际更改**。
-
-## [所有贡献者](contributors.md)
-
-## 镜像
-
- Gitee 镜像仓库：<https://gitee.com/lruihao/FixIt>
+> [!note]
+> 在贡献时，请先通过此存储库上的讨论来讨论你希望进行的更改，然后再进行实际更改。

 ## 致谢

-<details open>
+感谢 [所有贡献者](https://github.com/hugo-fixit/FixIt/graphs/contributors) 的支持！
+
+<details>
 <summary>FixIt 主题中用到了以下项目，感谢它们的作者：</summary>

 - [normalize.css](https://github.com/necolas/normalize.css)
@@ -211,6 +285,7 @@ FixIt 支持下列语言：
 - [cookieconsent](https://github.com/osano/cookieconsent)
 - [cell-watermark](https://github.com/Lruihao/watermark)
 - [不蒜子](http://busuanzi.ibruce.info/)
+- [Vercount](https://github.com/EvanNotFound/vercount)
 - [pangu.js](https://github.com/vinta/pangu.js)
 - [Artalk](https://artalk.js.org/)
 - [Waline](https://waline.js.org/)
@@ -218,13 +293,12 @@ FixIt 支持下列语言：
 - [github-corners](https://github.com/tholman/github-corners)
 - [giscus](https://giscus.app/zh-CN)
 - [crypto-js](https://github.com/brix/crypto-js)
- [vConsole](https://github.com/Tencent/vConsole)
- [eruda](https://github.com/liriliri/eruda)
 - [pace](https://github.com/CodeByZach/pace)
+- [xxhash-wasm](https://github.com/jungomi/xxhash-wasm)

 </details>

-<details open>
+<details>
 <summary>FixIt 主题还借鉴了以下项目的部分功能，同样感谢它们的作者：</summary>

 - [DoIt](https://github.com/HEIGE-PCloud/DoIt)
@@ -234,19 +308,20 @@ FixIt 支持下列语言：

 ## 许可协议

-FixIt 根据 **MIT** 许可协议授权。 更多信息请查看 [LICENSE 文件](LICENSE)。
+FixIt 根据 **MIT** 许可协议授权。更多信息请查看 [LICENSE 文件](/LICENSE)。
+
+## 赞助支持
+
+如果你喜爱这个主题，请考虑给我买杯咖啡 ☕️，谢谢！
+
+- [微信支付](/images/wechatpay.jpg)
+- [支付宝](/images/alipay.jpg)
+- [PayPal](https://paypal.me/Lruihao)
+
+感谢以下赞助商提供大力支持：
+
+- [translate.js](https://github.com/xnx3/translate) 赞助[企业级翻译通道](https://translate.zvo.cn/4087.html)。

 ## 作者

 [Lruihao](https://github.com/Lruihao "在 GitHub 上关注我")
-
-## 赞助支持
-
-给我一个 Star 🌟 已经是对我最大的鼓励和支持了。\
-如果你喜爱这个主题，请考虑给我买杯咖啡 ☕️。
-
- [PayPal](https://paypal.me/Lruihao)
- [支付宝](images/alipay.jpg)
- [微信支付](images/wechatpay.jpg)
-
-谢谢！❤️
@@ -2,12 +2,16 @@

 ## Supported Versions

+| Version       | Supported          |
+| :-----------: | :----------------: |
+| 0.3.x         | :white_check_mark: |
+
+legacy and transitional versions:
+
 | Version       | Supported          | LoveIt Compatibility |
 | :-----------: | :----------------: | :------------------: |
 | 0.1.x         | :x:                | :white_check_mark:   |
-| 0.2.x ~ 0.5.x | :x:                | :white_check_mark:   |
-| 0.5.x ~ 1.0   | :white_check_mark: | :x:                  |
-| > 1.0         | :white_check_mark: | :x:                  |
+| 0.2.x         | :x:                | :white_check_mark:   |

 ## Reporting a Vulnerability

@@ -11,7 +11,7 @@ keywords:
 comment: false
 ---

-<!-- When you set data `friends.yml` in `yourProject/data/` directory, it will be automatically loaded here. -->
+<!-- The `friends.yml` file placed in the `yourProject/data/` directory will be loaded automatically here. -->

 ---

@@ -19,18 +19,27 @@ comment: false

 ## Base info

-```yaml
 - nickname: Lruihao
-  avatar: https://lruihao.cn/images/avatar.jpg
-  url: https://lruihao.cn
-  description: Lruihao's Note
-```
+- avatar: https://lruihao.cn/images/avatar.jpg
+- url: https://lruihao.cn
+- description: Lruihao's Note

 ## Friendly Reminder

+Comment like this:
+
+````markdown
+```yaml
+- nickname: <your nickname>
+  avatar: <your avatar>
+  url: <your site link>
+  description: <description of your site>
+```
+````
+
 {{< 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)
+1. If you want to exchange link, please leave a comment as the above format. (personal non-commercial blogs / websites only)
 2. :(fa-solid fa-exclamation-triangle): Website failure, stop maintenance and improper content may be unlinked!
 3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.

@@ -20,8 +20,8 @@ categories:
  - draft
 hiddenFromHomePage: false
 hiddenFromSearch: false
-hiddenFromRss: false
 hiddenFromRelated: false
+hiddenFromFeed: false
 summary:
 resources:
  - name: featured-image
@@ -40,4 +40,6 @@ repost:
 # See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter
 ---

-<!--more-->
+<!--more-->
+
+<!-- Place resource files in the current article directory and reference them using relative paths, like this: `![alt](images/screenshot.jpg)`. -->
@@ -20,8 +20,8 @@ categories:
  - draft
 hiddenFromHomePage: false
 hiddenFromSearch: false
-hiddenFromRss: false
 hiddenFromRelated: false
+hiddenFromFeed: false
 summary:
 resources:
  - name: featured-image
@@ -0,0 +1,5 @@
+---
+title: {{ T "assets.search" }}
+layout: search
+date: {{ .Date }}
+---
@@ -17,21 +17,6 @@ html {
  }
 }

-/* scrollbar, only support webkit */
-::-webkit-scrollbar {
-  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;
-  }
-}
-
 ::selection {
  background-color: $selection-color;

@@ -43,27 +28,9 @@ html {
 body {
  background-color: $global-background-color;
  color: $global-font-color;
-  scrollbar-color: auto;
  @include overflow-wrap(break-word);

-  &::-webkit-scrollbar {
-    width: 0.75rem;
-    height: 0.75rem;
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    background-clip: content-box;
-    border: 2px solid transparent;
-    @include border-radius(0.5rem);
-  }
-
-  &[data-scroll]::-webkit-scrollbar-thumb {
-    background-color: $scrollbar-color;
-  }
-
-  &[data-theme='dark'] {
+  [data-theme='dark'] & {
    color: $global-font-color-dark;
    background-color: $global-background-color-dark;
  }
@@ -89,6 +56,7 @@ abbr[title] {

@include link(true, true);

+@import '../_partials/scrollbar';
@import '../_partials/mask';
@import '../_partials/img';
@import '../_partials/icon';
@@ -30,8 +30,8 @@
    .breadcrumb-item {
      display: flex;

-      +.breadcrumb-item::before {
-        content: "/";
+      + .breadcrumb-item::before {
+        content: attr(data-separator);
        display: inline-block;
        padding-inline: 0.5rem;
        color: $global-font-secondary-color;
@@ -42,7 +42,7 @@
      }

      &.active {
-        @extend .text-secondary;
+        color: var(--#{$prefix}secondary);
      }
    }
  }
@@ -21,12 +21,6 @@
 .d-none {
  display: none !important;
 }
-.d-none-desktop {
-  display: none;
-}
-.d-none-mobile {
-  display: block;
-}

 .ms-1,
 .mx-1 {
@@ -47,11 +41,7 @@

@each $color, $value in $theme-colors {
  .text-#{$color} {
-    color: #{$value} !important;
-
-    [data-theme='dark'] & {
-      color: #{darken($value, 5%)} !important;
-    }
+    color: var(--#{$prefix}#{$color}) !important;
  }
 }

@@ -58,6 +58,17 @@ header {
  margin: 0;
  padding: 0;

+  .menu-item-divider {
+    list-style: none;
+    margin: 0.25rem 0.5rem;
+    height: 1px;
+    background-color: $menu-border-color;
+
+    [data-theme='dark'] & {
+      background-color: $menu-border-color-dark;
+    }
+  }
+
  .menu-item {
    list-style: none;

@@ -87,6 +98,10 @@ header {
      }
    }

+    .menu-link[href="javascript:void(0);"] {
+      color: inherit;
+    }
+
    .menu-link i {
      @include transform(perspective(1rem));
      @include transition(transform 0.4s ease);
@@ -103,7 +118,7 @@ header {
  }
 }

-.search {
+.menu .search {
  position: relative;

  input {
@@ -262,20 +277,22 @@ header {
        display: none;
        top: calc(#{$header-height} - 0.75rem);
        border-radius: $global-border-radius;
-        border: 1px solid $global-border-color;
+        border: 1px solid $menu-border-color;
        background-color: $header-background-color;
+        max-height: 60vh;
+        overflow-y: auto;
        @include transition(box-shadow 0.3s ease);
        @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));

        [data-theme='dark'] & {
          background-color: $header-background-color-dark;
-          border-color: $global-border-color-dark;
+          border-color: $menu-border-color-dark;
          @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1));
        }

        .menu-item {
-          height: $header-height*0.5;
-          line-height: $header-height*0.5;
+          height: $submenu-height;
+          line-height: $submenu-height;
          max-width: 15rem;
          white-space: nowrap;
          text-overflow: ellipsis;
@@ -366,14 +383,13 @@ header {
      overflow-y: overlay;
      max-height: 70vh;
      @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
+      @include scrollbar-width(none, 0);

      [data-theme='dark'] & {
+        background: $header-background-color-dark;
+        border-top-color: $global-border-color-dark;
        @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
      }
-      
-      &::-webkit-scrollbar {
-        width: 0;
-      }

      .search-wrapper {
        display: flex;
@@ -500,11 +516,6 @@ header {
      &.active {
        display: block;
      }
-
-      [data-theme='dark'] & {
-        background: $header-background-color-dark;
-        border-top-color: $global-border-color-dark;
-      }
    }
  }

@@ -1,9 +1,9 @@
@media only screen and (min-width: 1441px) {
  %page-style {
-    width: 60%;
+    width: ROUND(60%, 2px);

    [data-page-style='wide'] & {
-      width: 64%;
+      width: ROUND(64%, 2px);
    }

    [data-page-style='narrow'] & {
@@ -14,20 +14,20 @@

@media only screen and (max-width: 1440px) {
  %page-style {
-    width: 56%;
+    width: ROUND(56%, 2px);

    [data-page-style='wide'] & {
-      width: 60%;
+      width: ROUND(60%, 2px);
    }
  }
 }

@media only screen and (max-width: 1200px) {
  %page-style {
-    width: 52%;
+    width: ROUND(52%, 2px);

    [data-page-style='wide'] & {
-      width: 56%;
+      width: ROUND(56%, 2px);
    }
  }

@@ -42,7 +42,7 @@

@media only screen and (max-width: 960px) {
  %page-style {
-    width: 80% !important;
+    width: ROUND(80%, 2px) !important;
  }
  
  aside {
@@ -58,8 +58,10 @@
  }
 }

-
@media only screen and (min-width: 681px) {
+  .d-none-desktop {
+    display: none;
+  }
  .breadcrumb-container.sticky {
    body:not([data-header-desktop='sticky']) & {
      top: 0;
@@ -80,8 +82,7 @@
    display: none;
  }

-  #header-mobile,
-  .d-none-desktop {
+  #header-mobile {
    display: block;
  }

@@ -18,3 +18,51 @@
  -webkit-animation-name: #{$prefix}pulse !important;
  animation-name: #{$prefix}pulse !important;
 }
+
+/**
+ * After the CSS round() function exceeds 90% browser support in the future, this code can be removed
+ * See https://caniuse.com/mdn-css_types_round
+ */
+@supports not (width: ROUND(60%, 2px)) {
+  @media only screen and (min-width: 1441px) {
+    %page-style {
+      width: 60%;
+  
+      [data-page-style='wide'] & {
+        width: 64%;
+      }
+  
+      [data-page-style='narrow'] & {
+        max-width: 800px;
+      }
+    }
+  }
+  @media only screen and (max-width: 1440px) {
+    %page-style {
+      width: 56%;
+  
+      [data-page-style='wide'] & {
+        width: 60%;
+      }
+    }
+  }
+  @media only screen and (max-width: 1200px) {
+    %page-style {
+      width: 52%;
+  
+      [data-page-style='wide'] & {
+        width: 56%;
+      }
+    }
+  }
+  @media only screen and (max-width: 960px) {
+    %page-style {
+      width: 80% !important;
+    }
+  }
+  @media only screen and (max-width: 680px) {
+    %page-style {
+      width: 100% !important;
+    }
+  }
+}
@@ -1,17 +1,42 @@
 :root {
  // Note: Custom variable values only support SassScript inside `#{}`.
+  // TODO migrate SCSS variables to CSS variables

-  // Theme colors varibles
+  --#{$prefix}global-font-color: #{$global-font-color};
+  --#{$prefix}global-border-color: #{$global-border-color};
+
+  // Theme colors variables
  @each $color, $value in $theme-colors {
    --#{$prefix}#{$color}: #{$value};
  }
-  @each $color, $value in $theme-colors {
-    --#{$prefix}#{$color}-dark: #{darken($value, 5%)};
-  }

  // Scroll margin top and Stack sticky top related
  --#{$prefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});

  // Set breadcrumb height to 0px if breadcrumb is disabled
  --#{$prefix}breadcrumb-height: 0px;
+
+  // hr style
+  --#{$prefix}hr-background-color: #{darken($global-border-color, 5%)};
+  --#{$prefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
+
+  // Scrollbar related variables
+  --#{$prefix}scrollbar-thumb-color: #{$scrollbar-color};
+  --#{$prefix}scrollbar-thumb-hover-color: #{$scrollbar-hover-color};
+  --#{$prefix}scrollbar-track-color: transparent;
+  --#{$prefix}scrollbar-width: thin;
+  --#{$prefix}scrollbar-width-legacy: 12px;
+}
+
+// Dark theme
+[data-theme=dark] {
+  --#{$prefix}global-font-color: #{$global-font-color-dark};
+  --#{$prefix}global-border-color: #{$global-border-color-dark};
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{darken($value, 5%)};
+  }
+
+  --#{$prefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
+  --#{$prefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
 }
@@ -5,3 +5,11 @@
@mixin details-transition-close {
  @include transition(max-height 0.2s cubic-bezier(0.5, 0, 1, 0) 0s);
 }
+
+details {
+  &.center {
+    summary {
+      text-align: center;
+    }
+  }
+}
@@ -2,4 +2,5 @@
@import '_link';
@import '_blur';
@import '_details';
+@import '_scrollbar-width';
@import '_z-index';
@@ -0,0 +1,4 @@
+@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
+  --#{$prefix}scrollbar-width: #{$width};
+  --#{$prefix}scrollbar-width-legacy: #{$widthLegacy};
+}
@@ -81,23 +81,32 @@
  }

  .summary {
-    padding-top: 1rem;
-    padding-bottom: 0.8rem;
-    color: $global-font-color;
-    border-bottom: 1px dashed $global-border-color;
+    padding-block: 1rem;
+    color: var(--#{$prefix}global-font-color);
+
+    &:not(:last-of-type)::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      padding: 2px;
+      transform: translateY(18px);
+      background: repeating-linear-gradient(
+        135deg,
+        var(--#{$prefix}hr-background-color) 0px,
+        var(--#{$prefix}hr-background-color) 4px,
+        transparent 4px,
+        transparent 8px
+      );
+    }

    &:first-of-type {
      padding-top: 0;
    }

-    [data-theme='dark'] & {
-      color: $global-font-color-dark;
-      border-bottom: 1px dashed $global-border-color-dark;
-    }
-
    .featured-image-preview {
      width: 100%;
-      padding: 30% 0 0;
+      // use the same proportions as the cover image of https://dev.to/
+      aspect-ratio: auto 1000 / 420;
      position: relative;
      margin: 0.6rem auto;
      @include transition(transform 0.4s ease);
@@ -123,39 +132,13 @@
    }

    .content {
-      @include box(vertical);
-      -webkit-line-clamp: 3;
      margin-top: 0.3rem;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      @include overflow-wrap(break-word);
      color: $global-font-secondary-color;

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

-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p {
-        font-size: 1rem;
-        line-height: 1.5;
-        display: inline;
-
-        &::after {
-          content: '\A';
-          white-space: pre;
-        }
-      }
-
-      h2 {
-        font-size: 1.125rem;
-      }
-
      @include link(false, true);

      b,
@@ -169,7 +152,7 @@
    }

    .post-footer {
-      margin-top: 0.4rem;
+      margin-block: 0.4rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
@@ -181,7 +164,7 @@
        padding: 0;

        @include link(true, true);
-        
+
        .post-tag:not(:last-child)::after {
          content: ',';
          margin-right: 0.25rem;
@@ -17,4 +17,3 @@
@import '_home';
@import '_404';
@import '_offline';
-@import '_friends';
@@ -15,22 +15,22 @@
      width: max-content;
      transform: rotate(30deg);
      margin-right: 0.25em;
-      @extend .text-danger;
+      color: var(--#{$prefix}danger);
    }

    .icon-repost {
      display: inline-block;
      width: max-content;
      margin-right: 0.25em;
-      @extend .text-success;
+      color: var(--#{$prefix}success);
    }
  }

  .single-subtitle {
-    margin: 0.5rem 0;
+    margin-block: 0 0.5rem;
    font-size: 1.2rem;
    font-weight: normal;
-    line-height: 100%;
+    line-height: 1.15;
  }

  .post-meta {
@@ -73,7 +73,7 @@
  }

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

    img {
      display: block;
@@ -94,71 +94,101 @@
    padding: 5px;
  }

+  hr {
+    position: relative;
+    height: 1em;
+    margin-block: 1em;
+    background: linear-gradient(to right, var(--#{$prefix}hr-background-color) 50%, transparent 50%);
+    background-size: 10px 2px;
+    background-position: center;
+    background-repeat: repeat-x;
+    border: none;
+
+    &.awesome-hr {
+      &::before {
+        display: inline-block;
+        font-weight: 600;
+        font-family: 'Font Awesome 6 Free';
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        position: absolute;
+        left: 5%;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        color: var(--#{$prefix}hr-before-color);
+        content: '\f0c4';
+        font-size: 20px;
+        line-height: 1;
+        transition: left 1s ease-in-out, color 0.3s ease, border-color 0.3s ease;
+      }
+    
+      &:hover::before {
+        left: calc(95% - 20px);
+      }
+    }
+  }
+
  .content {
+    margin-block: 1rem;
    > h1,
    > h2 {
-      font-size: 1.5rem;
-
-      & code {
-        font-size: 1.25rem;
-      }
+      font-size: 1.5em;
+      padding-bottom: 0.3em;
+      border-bottom: 1px solid $global-border-color;
    }

    > h3 {
-      font-size: 1.375rem;
-
-      & code {
-        font-size: 1.125rem;
-      }
+      font-size: 1.25em;
    }

    > h4 {
-      font-size: 1.25rem;
-
-      & code {
-        font-size: 1rem;
-      }
+      font-size: 1em;
    }

    > h5 {
-      font-size: 1.125rem;
+      font-size: 0.875em;
    }

    > h6 {
-      font-size: 1rem;
+      font-size: 0.85em;
    }

-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
+    > .heading-element {
+      display: flex;
      font-weight: bold;
-      margin: 1.2rem 0;
+      line-height: 1.25;
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;

      [data-theme='dark'] & {
        font-weight: bolder;
      }
-    }

-    > h2,
-    > h3,
-    > h4,
-    > h5,
-    > h6 {
-      > .heading-mark::before {
-        content: '|';
-        margin-right: 0.3125rem;
-        color: $single-link-color;
+      code {
+        padding: 0 .2em;
+        font-size: inherit;
+      }

-        [data-theme='dark'] & {
-          color: $single-link-color-dark;
+      &:hover,
+      &:target {
+        > .heading-mark {
+          opacity: 1;
        }
      }
-    }

-    > h2 > .heading-mark::before {
-      content: '#';
+      > .heading-mark {
+        display: inline-flex;
+        align-items: center;
+        opacity: 0;
+        padding-inline: 0.5rem;
+        transition: all 0.2s ease-in-out;
+        @include link(false, false);
+
+        svg {
+          fill: currentColor;
+        }
+      }
    }

    p {
@@ -199,14 +229,49 @@

    ul {
      list-style-type: disc;
+
+      // Task lists
+      li[data-task] {
+        list-style: none;
+        margin-left: -1.5rem;
+      }
+    }
+
+    // Task lists
+    li[data-task] {
+      color: var(--#{$prefix}task-color);
+      .checkbox-icon {
+        margin-right: 0.25em;
+        color: var(--#{$prefix}checkbox-color);
+      }
+    }
+    li[data-task='x'],
+    li[data-task='-'] {
+      --#{$prefix}task-color: var(--#{$prefix}secondary);
+      text-decoration: line-through rgba(145, 145, 145, 0.6);
+    }
+    li[data-task='x'] {
+      --#{$prefix}checkbox-color: var(--#{$prefix}primary);
+    }
+    li[data-task='-'] {
+      opacity: 0.6;
+    }
+    li[data-task='/'] {
+      --#{$prefix}task-color: var(--#{$prefix}success);
+    }
+    li[data-task='!'] {
+      --#{$prefix}checkbox-color: var(--#{$prefix}danger);
+    }
+    li[data-task='?'] {
+      --#{$prefix}checkbox-color: var(--#{$prefix}warning);
    }

    dl {
      dt {
-        margin-bottom: 0.5em;
+        font-weight: bold;
      }
      dd {
-        margin-inline-start: 1.25em;
+        margin: 0.25em 0 1em;
      }
    }

@@ -226,16 +291,28 @@
      }
    }

-    .table-wrapper {
-      overflow-x: auto;
+    mark {
+      padding: 0.14em 0.28em;
+      background-color: var(--#{$prefix}mark-background-color, mark);
+      color: var(--#{$prefix}mark-color, marktext);
+      @include border-radius($global-border-radius);

-      &::-webkit-scrollbar {
-        background-color: $table-background-color;
-
-        [data-theme='dark'] & {
-          background-color: $table-background-color-dark;
+      @each $color, $value in $theme-colors {
+        &.mark-#{$color} {
+          --#{$prefix}mark-color: #fff;
+          --#{$prefix}mark-background-color: var(--#{$prefix}#{$color});
        }
      }
+    }
+
+    .table-wrapper {
+      position: relative;
+      overflow-x: auto;
+      --#{$prefix}scrollbar-thumb-color: #{$table-background-color};
+
+      [data-theme='dark'] & {
+        --#{$prefix}scrollbar-thumb-color: #{$table-background-color-dark};
+      }

      > table {
        width: 100%;
@@ -370,7 +447,7 @@
      @include link(false, true);
    }

-    sup[id^='fnref:']:has(.footnote-ref) {
+    sup[id^='fnref']:has(.footnote-ref) {
      padding: 2px 4px;
      background-color: rgba(238, 238, 238, 0.7);
      color: #555555;
@@ -394,6 +471,16 @@
        margin-block: 1em;
        padding-left: 1rem;
      }
+      
+      hr {
+        background-color: var(--#{$prefix}hr-background-color);
+        height: 1px;
+        margin-block: 1em;
+      }
+
+      code {
+        font-size: 0.75rem;
+      }

      a:not(.footnote-backref) {
        color: inherit;
@@ -411,20 +498,6 @@
      }
    }

-    @import '../_partials/_single/code';
-    @import '../_shortcodes';
-
-    hr {
-      margin-block: 1em;
-      position: relative;
-      border-top: 1px dashed darken($global-border-color, 5%);
-      border-bottom: none;
-
-      [data-theme='dark'] & {
-        border-top: 1px dashed lighten($global-border-color-dark, 5%);
-      }
-    }
-
    kbd {
      display: inline-block;
      padding: 0 0.25rem;
@@ -443,6 +516,17 @@
        @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
      }
    }
+
+    // Katex styles
+    .katex-display {
+      max-width: 100%;
+      overflow-x: auto;
+      padding-block: 2px;
+    }
+
+    @import '../_partials/_single/alert';
+    @import '../_partials/_single/code';
+    @import '../_shortcodes';
  }

  @import '../_partials/_single/reward';
@@ -1,6 +0,0 @@
-.special {
-  .single-title,
-  .single-subtitle {
-    text-align: right;
-  }
-}
@@ -1,5 +1,5 @@
 /**
- * @Description: Style of layout named 'friends'.
+ * Style of layout named 'friends'.
 * @Author: Lruihao <https://lruihao.cn>
 * @Updated:  2022/3/11 21:36
 */
@@ -0,0 +1,14 @@
+.special {
+  .single-title,
+  .single-subtitle {
+    text-align: right;
+  }
+
+  &.friends {
+    @import '_friends';
+  }
+
+  &.search {
+    @import '_search';
+  }
+}
@@ -0,0 +1,10 @@
+// Style of layout named 'search'
+// TODO Adapting to dark mode, maybe use css variables
+
+// Google CSE
+.gcse-searchbox:empty,
+.gcse-searchresults:empty {
+  display: none;
+}
+
+// Bing CSE (Unsupported)
@@ -1,40 +1,46 @@
 .details {
-  .details-summary {
+  > .details-summary {
    @include border-radius($global-border-radius);

    &:hover {
      cursor: pointer;
    }
-  }

-  i.details-icon {
-    color: $global-font-secondary-color;
-    @include transition(transform 0.2s ease);
+    i.details-icon {
+      color: $global-font-secondary-color;
+      @include transition(transform 0.2s ease);

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

-  .details-content {
+  > .details-content {
    max-height: 0;
    overflow-y: hidden;
    @include details-transition-open;
  }

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

-    i.details-icon {
-      @include transform(rotate(90deg));
-    }
-
-    .details-content {
+    > .details-content {
      max-height: 100%;
      @include border-radius(0 0 $global-border-radius $global-border-radius);
      @include details-transition-close;
    }
  }
+
+  &.disabled {
+    > .details-summary {
+      cursor: default;
+    }
+  }
 }
@@ -1,15 +1,55 @@
-// Color map of admonition [$type $color $background-color, ... ]
-$admonition-color-map:
-  'note' #448aff rgba(68, 138, 255, 0.1),
-  'abstract' #00b0ff rgba(0, 176, 255, 0.1),
-  'info' #00b8d4 rgba(0, 184, 212, 0.1),
-  'tip' #00bfa5 rgba(0, 191, 165, 0.1),
-  'success' #00c853 rgba(0, 200, 83, 0.1),
-  'question' #64dd17 rgba(100, 221, 23, 0.1),
-  'warning' #ff9100 rgba(255, 145, 0, 0.1),
-  'failure' #ff5252 rgba(255, 82, 82, 0.1),
-  'danger' #ff1744 rgba(255, 23, 68, 0.1),
-  'bug' #f50057 rgba(245, 0, 87, 0.1),
-  'example' #651fff rgba(101, 31, 255, 0.1),
-  'quote' #9e9e9e rgba(159, 159, 159, 0.1)
-  !default;
+// Color map of admonitions
+$admonition-color-map: (
+  note: (
+    color: #448aff,
+    bg-color: rgba(68, 138, 255, 0.1),
+  ),
+  abstract: (
+    color: #00b0ff,
+    bg-color: rgba(0, 176, 255, 0.1),
+  ),
+  info: (
+    color: #00b8d4,
+    bg-color: rgba(0, 184, 212, 0.1),
+  ),
+  todo: (
+    color: #5e9aff,
+    bg-color: rgba(94, 154, 255, 0.1),
+  ),
+  tip: (
+    color: #00bfa5,
+    bg-color: rgba(0, 191, 165, 0.1),
+  ),
+  success: (
+    color: #00c853,
+    bg-color: rgba(0, 200, 83, 0.1),
+  ),
+  question: (
+    color: #ffbd67,
+    bg-color: rgba(255, 190, 0, 0.1),
+  ),
+  warning: (
+    color: #ff9100,
+    bg-color: rgba(255, 145, 0, 0.1),
+  ),
+  failure: (
+    color: #ff5252,
+    bg-color: rgba(255, 82, 82, 0.1),
+  ),
+  danger: (
+    color: #ff1744,
+    bg-color: rgba(255, 23, 68, 0.1),
+  ),
+  bug: (
+    color: #f50057,
+    bg-color: rgba(245, 0, 87, 0.1),
+  ),
+  example: (
+    color: #651fff,
+    bg-color: rgba(101, 31, 255, 0.1),
+  ),
+  quote: (
+    color: #9e9e9e,
+    bg-color: rgba(159, 159, 159, 0.1),
+  ),
+) !default;
@@ -0,0 +1,46 @@
+// Color map of basic alerts
+$alert-color-map: (
+  note: (
+    border-color: #0969da,
+    color: #0969da,
+  ),
+  tip: (
+    border-color: #1a7f37,
+    color: #1a7f37,
+  ),
+  important: (
+    border-color: #8250df,
+    color: #8250df,
+  ),
+  warning: (
+    border-color: #bf8700,
+    color: #9a6700,
+  ),
+  caution: (
+    border-color: #cf222e,
+    color: #d1242f,
+  ),
+) !default;
+
+$alert-color-map-dark: (
+  note: (
+    border-color: #316dca,
+    color: #478be6,
+  ),
+  tip: (
+    border-color: #347d39,
+    color: #57ab5a,
+  ),
+  important: (
+    border-color: #8256d0,
+    color: #986ee2,
+  ),
+  warning: (
+    border-color: #966600,
+    color: #c69026,
+  ),
+  caution: (
+    border-color: #c93c37,
+    color: #e5534b,
+  ),
+) !default;
@@ -180,8 +180,8 @@ $code-type-map: (
  "llvm": "LLVM",
  "lua": "Lua",
  "mako": "Mako",
-  "md": "markdown",
-  "mkd": "markdown",
+  "md": "Markdown",
+  "mkd": "Markdown",
  "mason": "Mason",
  "mathematica": "Mathematica",
  "mma": "Mathematica",
@@ -368,6 +368,6 @@ $code-type-map: (
  "zed": "Zed",
  "zig": "Zig",
  // Custom code type
-  "markdown": "markdown",
+  "markdown": "Markdown",
  "yml": "YAML"
 ) !default;
@@ -0,0 +1,36 @@
+/* Modern browsers with `scrollbar-*` support (high priority) */
+@supports (scrollbar-width: auto) {
+  * {
+    scrollbar-color: var(--#{$prefix}scrollbar-thumb-color) var(--#{$prefix}scrollbar-track-color);;
+    scrollbar-width: var(--#{$prefix}scrollbar-width);
+  }
+}
+
+/* Legacy browsers with `::-webkit-scrollbar-*` support */
+::-webkit-scrollbar {
+  height: var(--#{$prefix}scrollbar-width-legacy);
+  width: var(--#{$prefix}scrollbar-width-legacy);
+  overflow: visible;
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+::-webkit-scrollbar-corner {
+  background-color: var(--#{$prefix}scrollbar-track-color);
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--#{$prefix}scrollbar-thumb-color);
+  &:hover {
+    background-color: var(--#{$prefix}scrollbar-thumb-hover-color);
+  }
+}
+::-webkit-scrollbar-track {
+  background-color: var(--#{$prefix}scrollbar-track-color);
+}
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  border-radius: 100px;
+}
@@ -0,0 +1,44 @@
+.alert {
+  padding: 0.5rem 1rem;
+  margin-block: 1rem;
+  color: inherit;
+  border-left: 0.25em solid var(--#{$prefix}alert-border-color);
+
+  > :first-child {
+    margin-top: 0;
+  }
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  .alert-title {
+    display: flex;
+    font-weight: 500;
+    align-items: center;
+    line-height: 1;
+    margin-bottom: 1rem;
+    color: var(--#{$prefix}alert-color);
+
+    > svg.icon {
+      width: initial;
+      height: initial;
+      margin-right: 0.5rem;
+    }
+  }
+
+  @each $type, $item in $alert-color-map {
+    &.alert-#{$type} {
+      --#{$prefix}alert-border-color: #{map-get($item, border-color)};
+      --#{$prefix}alert-color: #{map-get($item, color)};
+    }
+  }
+
+  [data-theme='dark'] & {
+    @each $type, $item in $alert-color-map-dark {
+      &.alert-#{$type} {
+        --#{$prefix}alert-border-color: #{map-get($item, border-color)};
+        --#{$prefix}alert-color: #{map-get($item, color)};
+      }
+    }
+  }
+}
@@ -18,7 +18,7 @@ code {
 }

 // indented code
-pre {
+pre:not(.mermaid[data-processed='true']) {
  margin: 0;
  line-height: 1.45em;
  padding: 0.5rem;
@@ -58,6 +58,7 @@ pre {
  font-family: $code-font-family;

  .table-wrapper {
+    --#{$prefix}scrollbar-thumb-color: initial;
    > table,
    > table thead,
    > table tr,
@@ -78,6 +79,7 @@ pre {
    position: relative;

    .code-header {
+      --#{$prefix}bg-code-header: #{darken($code-background-color, 3%)};
      display: flex;
      justify-content: space-between;
      align-items: center;
@@ -87,13 +89,20 @@ pre {
      font-weight: bold;
      line-height: 1.4em;
      color: $code-info-color;
-      background-color: darken($code-background-color, 3%);
+      background-color: var(--#{$prefix}bg-code-header);
      @include border-radius($global-border-radius);
      @include transition(border-radius 0.2s ease);

+      // delayed loading table-wrapper
+      & + .table-wrapper {
+        max-height: 0;
+        @include border-radius(0 0 $global-border-radius $global-border-radius);
+        @include details-transition-open;
+      }
+
      [data-theme='dark'] & {
        color: $code-info-color-dark;
-        background-color: darken($code-background-color-dark, 6%);
+        --#{$prefix}bg-code-header: #{darken($code-background-color-dark, 3%)};
      }

      &:hover {
@@ -119,6 +128,13 @@ pre {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
+          background-color: var(--#{$prefix}bg-code-header);
+          padding-inline: 1em;
+          max-width: 80%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          @include z-index(0, 1);
        }
      }

@@ -155,10 +171,8 @@ pre {

    // delayed loading table-wrapper
    .table-wrapper {
-      max-height: 0;
      overflow: hidden;
-      @include border-radius(0 0 $global-border-radius $global-border-radius);
-      @include details-transition-open;
+      @include border-radius($global-border-radius);
    }

    table {
@@ -217,11 +231,11 @@ pre {

    &.open {
      .code-header {
-        background-color: darken($code-background-color, 6%);
+        --#{$prefix}bg-code-header: #{darken($code-background-color, 6%)};
        @include border-radius($global-border-radius $global-border-radius 0 0);

        [data-theme='dark'] & {
-          background-color: darken($code-background-color-dark, 3%);
+          --#{$prefix}bg-code-header: #{darken($code-background-color-dark, 6%)};
        }
      }

@@ -348,12 +362,11 @@ pre {
  }

  .table-wrapper {
-    .highlight,
-    &::-webkit-scrollbar {
-      background-color: #f6f8fa;
+    .highlight {
+      background-color: $code-background-color;

      [data-theme='dark'] & {
-        background-color: #2d333b;
+        background-color: $code-background-color-dark;
      }
    }
  }
@@ -2,7 +2,7 @@
 .collection-card {
  font-size: 0.875rem;
  background-color: darken($global-background-color, 3%);
-  margin-block: 2rem -1rem;
+  margin-block: 1rem;
  padding: 1rem 1.25rem;
  position: relative;
  @include border-radius($global-border-radius * 1.5);
@@ -127,15 +127,16 @@
    .collection-name {
      flex-grow: 1;
      font-weight: bold;
+      font-size: $collection-title-font-size;

      &::before {
-        content: attr(data-collections) '・';
+        content: attr(title) '・';
      }
    }

    .collection-count {
      flex-shrink: 0;
-      @extend .text-secondary;
+      color: var(--#{$prefix}secondary);
    }

    .details-icon {
@@ -146,7 +147,7 @@
  }

  .collection-content {
-    font-size: $toc-content-font-size;
+    font-size: $collection-list-font-size;
    background-color: darken($global-background-color, 2%);

    [data-theme='dark'] & {
@@ -161,10 +162,7 @@
      list-style: none;
      overflow-y: scroll;
      max-height: 60vh;
-
-      &::-webkit-scrollbar {
-        width: 0;
-      }
+      @include scrollbar-width(none, 0);

      .collection-item > a::before,
      .collection-item > span::before {
@@ -1,4 +1,8 @@
 >#comments {
  padding: 2rem 0;
  @extend .print-d-none;
+
+  iframe {
+    width: 100%;
+  }
 }
@@ -1,16 +1,16 @@
 .fixit-decryptor-container {
  font-family: $global-font-family;
  text-align: center;
-  margin-top: 3rem;
+  margin-block: var(--fixit-decryptor-margin-block);

-  .fixit-encryptor-shortcode & {
-    margin-top: 1rem;
+  .fixit-decryptor-loading {
+    vertical-align: middle;
  }

-  #fixit-decryptor-input,
  .fixit-decryptor-input,
+  .fixit-decryptor-btn,
  .fixit-encryptor-btn {
-    display: inline-block;
+    display: none;
    box-sizing: border-box;
    outline: none;
    color: $global-font-color;
@@ -40,9 +40,8 @@
    }
  }

-  #fixit-decryptor-input,
  .fixit-decryptor-input {
-    width: clamp(50%, 400px, 100%);
+    width: calc(clamp(50%, 450px, 100%) - 100px);
    height: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
@@ -53,10 +52,11 @@
    }
  }

+  .fixit-decryptor-btn,
  .fixit-encryptor-btn {
    cursor: pointer;
    @include transition(all 0.1s ease-out);
-    padding: 0.6rem 1rem;
+    padding: 0.8rem 1rem;

    background-color: $header-background-color;

@@ -64,8 +64,57 @@
      background-color: $header-background-color-dark;
    }
  }
+
+  .fixit-encryptor-btn {
+    display: none;
+  }
+}
+
+fixit-encryptor {
+  &.initialized > .fixit-decryptor-container {
+    .fixit-decryptor-input,
+    .fixit-decryptor-btn {
+      display: inline-block;
+    }
+
+    .fixit-decryptor-loading {
+      display: none;
+    }
+  }
+
+  cipher-text {
+    display: none !important;
+  }
+}
+
+// fixit-encryptor for for the encrypted pages
+article fixit-encryptor {
+  .fixit-decryptor-container {
+    --fixit-decryptor-margin-block: 2rem;
+  }
+  &.decrypted > .fixit-decryptor-container {
+    .fixit-decryptor-loading,
+    .fixit-decryptor-input,
+    .fixit-decryptor-btn {
+      display: none;
+    }
+
+    .fixit-encryptor-btn {
+      display: inline-block;
+    }
+  }
+}
+
+// fixit-encryptor shortcodes
+#content fixit-encryptor {
+  .fixit-decryptor-container {
+    --fixit-decryptor-margin-block: 1rem;
+  }
+  &.decrypted > .fixit-decryptor-container {
+    display: none;
+  }
 }

 .encrypted-hidden {
-  display: none;
+  display: none !important;
 }
@@ -1,73 +1,79 @@
 /**
- * Theme: GitHub Dark Dimmed
- * Description: Dark Dimmed theme as seen on github.com
- * Author: github.com
- * Maintainer: https://github.com/hugo-fixit/FixIt
- * Updated: 2022-03-01
+ * GitHub Dark Dimmed
+ * Copyright (c) 2012 - current GitHub, Inc.
+ * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
+ * Maintained by @Lruihao for FixIt theme
+ * Created on 2022-03-01
+ * Updated on 2024-07-14
 */
 & {
-  --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 colors
+  --#{$prefix}color-blob-num: #778491;
+  --#{$prefix}color-blob-code-inner: #c5d1de;
+  // Syntax colors
+  --#{$prefix}color-prettylights-syntax-comment: #768390;
+  --#{$prefix}color-prettylights-syntax-constant: #6cb6ff;
+  --#{$prefix}color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+  --#{$prefix}color-prettylights-syntax-entity: #dcbdfb;
+  --#{$prefix}color-prettylights-syntax-storage-modifier-import: #adbac7;
+  --#{$prefix}color-prettylights-syntax-entity-tag: #8ddb8c;
+  --#{$prefix}color-prettylights-syntax-keyword: #f47067;
+  --#{$prefix}color-prettylights-syntax-string: #96d0ff;
+  --#{$prefix}color-prettylights-syntax-variable: #f69d50;
+  --#{$prefix}color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+  --#{$prefix}color-prettylights-syntax-brackethighlighter-angle: #768390;
+  --#{$prefix}color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
+  --#{$prefix}color-prettylights-syntax-invalid-illegal-bg: #922323;
+  --#{$prefix}color-prettylights-syntax-carriage-return-text: #cdd9e5;
+  --#{$prefix}color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+  --#{$prefix}color-prettylights-syntax-string-regexp: #8ddb8c;
+  --#{$prefix}color-prettylights-syntax-markup-list: #eac55f;
+  --#{$prefix}color-prettylights-syntax-markup-heading: #316dca;
+  --#{$prefix}color-prettylights-syntax-markup-italic: #adbac7;
+  --#{$prefix}color-prettylights-syntax-markup-bold: #adbac7;
+  --#{$prefix}color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+  --#{$prefix}color-prettylights-syntax-markup-deleted-bg: #78191b;
+  --#{$prefix}color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+  --#{$prefix}color-prettylights-syntax-markup-inserted-bg: #1b4721;
+  --#{$prefix}color-prettylights-syntax-markup-changed-text: #ffddb0;
+  --#{$prefix}color-prettylights-syntax-markup-changed-bg: #682d0f;
+  --#{$prefix}color-prettylights-syntax-markup-ignored-text: #adbac7;
+  --#{$prefix}color-prettylights-syntax-markup-ignored-bg: #255ab2;
+  --#{$prefix}color-prettylights-syntax-meta-diff-range: #dcbdfb;
+  --#{$prefix}color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;

-  .blob-num,
+  .blob-num {
+    color: var(--#{$prefix}color-blob-num);
+  }
  .blob-code-inner {
-    color: val(--color-fg-default);
+    color: var(--#{$prefix}color-blob-code-inner);
  }

  .pl-c /* comment, punctuation.definition.comment, string.comment */ {
-    color: var(--color-prettylights-syntax-comment);
+    color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-constant);
  }

  .pl-e /* entity */,
  .pl-en /* entity.name */ {
-    color: var(--color-prettylights-syntax-entity);
+    color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-storage-modifier-import);
  }

  .pl-ent /* entity.name.tag, markup.quote */ {
-    color: var(--color-prettylights-syntax-entity-tag);
+    color: var(--#{$prefix}color-prettylights-syntax-entity-tag);
  }

  .pl-k /* keyword, storage, storage.type */ {
-    color: var(--color-prettylights-syntax-keyword);
+    color: var(--#{$prefix}color-prettylights-syntax-keyword);
  }

  .pl-s /* string */,
@@ -77,26 +83,26 @@
  .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);
+    color: var(--#{$prefix}color-prettylights-syntax-string);
  }

  .pl-v /* variable */,
  .pl-smw /* sublimelinter.mark.warning */ {
-    color: var(--color-prettylights-syntax-variable);
+    color: var(--#{$prefix}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);
+    color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-invalid-illegal-text);
+    background-color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-carriage-return-text);
+    background-color: var(--#{$prefix}color-prettylights-syntax-carriage-return-bg);
  }

  .pl-c2::before /* carriage-return */ {
@@ -105,65 +111,65 @@

  .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
    font-weight: bold;
-    color: var(--color-prettylights-syntax-string-regexp);
+    color: var(--#{$prefix}color-prettylights-syntax-string-regexp);
  }

  .pl-ml /* markup.list */ {
-    color: var(--color-prettylights-syntax-markup-list);
+    color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-markup-heading);
  }

  .pl-mi /* markup.italic */ {
    font-style: italic;
-    color: var(--color-prettylights-syntax-markup-italic);
+    color: var(--#{$prefix}color-prettylights-syntax-markup-italic);
  }

  .pl-mb /* markup.bold */ {
    font-weight: bold;
-    color: var(--color-prettylights-syntax-markup-bold);
+    color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-markup-deleted-text);
+    background-color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-markup-inserted-text);
+    background-color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-markup-changed-text);
+    background-color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-markup-ignored-text);
+    background-color: var(--#{$prefix}color-prettylights-syntax-markup-ignored-bg);
  }

  .pl-mdr /* meta.diff.range */ {
    font-weight: bold;
-    color: var(--color-prettylights-syntax-meta-diff-range);
+    color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-brackethighlighter-angle);
  }

  .pl-sg /* sublimelinter.gutter-mark */ {
-    color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+    color: var(--#{$prefix}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);
+    color: var(--#{$prefix}color-prettylights-syntax-constant-other-reference-link);
  }
 }
@@ -1,7 +1,6 @@
 .post-reward {
  padding: 1rem;
  text-align: center;
-  margin-bottom: -1rem;
  @extend .print-d-none;

  &:has(.reward-ways:empty) {
@@ -111,10 +111,7 @@
  .toc-content {
    overflow-y: scroll;
    max-height: calc(100vh - #{2*$header-height});
-    
-    &::-webkit-scrollbar {
-      width: 0;
-    }
+    @include scrollbar-width(none, 0);

    &.always-active ul,
    &.always-active ol {
@@ -1,13 +1,37 @@
 .reading-progress-bar {
-  --progress: 0;
-  height: var(--progress-h, 2px);
-  width: var(--progress);
-  background-color: var(--bg-progress, var(--#{$prefix}info));
+  height: var(--#{$prefix}progress-h, 2px);
+  background-color: var(--#{$prefix}progress-bg, var(--#{$prefix}info));
  position: fixed;
+  left: 0;
+  right: 0;
+  transform-origin: var(--#{$prefix}progress-start, left) 50%;
+  animation: grow-progress 3s linear;
+  animation-timeline: scroll();
  @include z-index(2);
  @extend .print-d-none;
+
+  &[data-reversed=true] {
+    animation-name: grow-progress-reversed;
+  }
  
  [data-theme="dark"] & {
-    background-color: var(--bg-progress-dark, var(--#{$prefix}info-dark));
+    background-color: var(--#{$prefix}progress-bg-dark, var(--#{$prefix}info-dark));
+  }
+
+  @keyframes grow-progress {
+    from { transform: scaleX(0); }
+    to { transform: scaleX(1); }
+  }
+  @keyframes grow-progress-reversed {
+    from { transform: scaleX(1); }
+    to { transform: scaleX(0); }
+  }
+
+  /**
+   * After the CSS property `animation-timeline: scroll()` exceeds 90% browser support in the future, this code can be removed
+   * See https://caniuse.com/mdn-css_properties_animation-timeline_scroll
+   */
+  @supports not (animation-timeline: scroll()) {
+    display: none;
  }
 }
@@ -9,14 +9,5 @@
  }

  --ti-cursor-font-family: #{$global-font-family};
-  --ti-cursor-font-size: #{$global-font-size};
-  --ti-cursor-font-style: normal;
-  --ti-cursor-font-weight: #{$global-font-weight};
-  --ti-cursor-line-height: #{$global-line-height};
-  --ti-cursor-color: #{$global-font-color};
  --ti-cursor-transform: translateX(0);
-
-  [data-theme='dark'] & {
-    --ti-cursor-color: #{$global-font-color-dark};
-  }
 }
@@ -3,7 +3,7 @@
  margin: 1rem 0;
  padding: 0 0.75rem;
  border-left: .25rem solid;
-  overflow: auto;
+  overflow: hidden;
  @include border-radius($global-border-radius);

  .admonition-title {
@@ -16,6 +16,15 @@

  .admonition-content {
    padding: 0.5rem 0;
+    
+    // for extended alert syntax
+    > p {
+      margin: 0;
+    }
+    // title-only alert
+    &:empty {
+      display: none;
+    }
  }

  i.icon {
@@ -30,43 +39,35 @@
    top: 0.6rem;
    right: 0.3rem;
  }
+  
+  background-color: var(--#{$prefix}admonition-bg-color);
+  border-left-color: var(--#{$prefix}admonition-color);

-  @each $type, $color, $background-color in $admonition-color-map {
-    @if $type == 'note' {
-      background-color: $background-color;
-      border-left-color: $color;
+  > .admonition-title {
+    border-bottom-color: var(--#{$prefix}admonition-bg-color);
+    background-color: var(--#{$prefix}admonition-bg-color-collapsed);

-      .admonition-title {
-        border-bottom-color: $background-color;
-        background-color: opacify($background-color, 0.15);
-      }
-
-      &.open .admonition-title {
-        background-color: $background-color;
-      }
-
-      i.icon {
-        color: $color;
-      }
+    i.icon {
+      color: var(--#{$prefix}admonition-color);
    }
-    
-    @else {
+  }
+
+  &.open > .admonition-title {
+    background-color: var(--#{$prefix}admonition-bg-color);
+  }
+
+  // default admonition type is note
+  --#{$prefix}admonition-color: #{map-get(map-get($admonition-color-map, note), color)};
+  --#{$prefix}admonition-bg-color: #{map-get(map-get($admonition-color-map, note), bg-color)};
+  --#{$prefix}admonition-bg-color-collapsed: #{opacify(map-get(map-get($admonition-color-map, note), bg-color), 0.15)};
+
+  // set color for each admonition type
+  @each $type, $item in $admonition-color-map {
+    @if $type != 'note' {
      &.#{$type} {
-        background-color: $background-color;
-        border-left-color: $color;
-
-        .admonition-title {
-          border-bottom-color: $background-color;
-          background-color: opacify($background-color, 0.15);
-        }
-
-        &.open .admonition-title {
-          background-color: $background-color;
-        }
-
-        i.icon {
-          color: $color;
-        }
+        --#{$prefix}admonition-color: #{map-get($item, color)};
+        --#{$prefix}admonition-bg-color: #{map-get($item, bg-color)};
+        --#{$prefix}admonition-bg-color-collapsed: #{opacify(map-get($item, bg-color), 0.15)};
      }
    }
  }
@@ -1,9 +1,9 @@
 .bilibili {
  position: relative;
  width: 100%;
-  height: 0;
-  padding-bottom: 75%;
-  margin: 3% auto;
+  height: auto;
+  aspect-ratio: 16 / 9;
+  margin: 1rem auto;
  text-align: center;

  iframe {
@@ -76,11 +76,28 @@
    white-space: nowrap;
  }

-  &icon-globe {
+  &shortcut-icon {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    margin-left: 0.25rem;
+
+    &:is(i) {
+      text-align: center;
+      font-size: 3rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &shortcut-image {
+    width: 4rem;
+    height: 4rem !important;
+    flex-shrink: 0;
+    margin-left: 0.25rem;
+    object-fit: cover;
+    border-radius: 50%;
  }

  [data-theme='dark'] & {
@@ -1,10 +1,10 @@
-.blockquote-center {
+blockquote.blockquote-center {
  border-left: none;
  margin: 40px 0;
  padding: 0;
  position: relative;
  text-align: center;
-  color: initial;
+  color: inherit;

  &::after,
  &::before {
@@ -0,0 +1,24 @@
+.douyin {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 60.725%;
+  margin: 1rem auto;
+  text-align: center;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+}
+
+@media only screen and (max-width: 680px) {
+  .douyin {
+    width: 92%;
+    margin-inline: 4%;
+    padding-bottom: 190%;
+  }
+}
@@ -1,8 +1,10 @@
@import '_admonition';
@import '_bilibili';
+@import '_douyin';
@import '_cardlink';
@import '_center-quote';
@import '_echarts';
@import '_instagram';
@import '_mapbox';
@import '_mermaid';
+@import '_timeline';
@@ -1,5 +1,7 @@
 .mermaid {
-  text-align: center;
+  &[data-processed='true'] {
+    text-align: center;
+  }

  svg {
    max-width: 100%;
@@ -0,0 +1,108 @@
+.#{$prefix}timeline {
+  list-style: none;
+  box-sizing: border-box;
+  overflow: auto;
+  margin: 1rem auto;
+  --timeline-color: #{darken($global-border-color, 5%)};
+  --timeline-circle-color: #FF735A;
+  --timeline-circle-size: 10px;
+  --timeline-width: 2px;
+
+  &[data-animation] {
+    .#{$prefix}timeline-item::before {
+      border-color: var(--timeline-color);
+      animation-name: border-color-fade;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+      animation-delay: calc(var(--timeline-index) * 0.3s);
+  
+      @keyframes border-color-fade {
+        0% {
+          border-color: var(--timeline-color);
+        }
+        50% {
+          border-color: var(--timeline-circle-color);
+        }
+        100% {
+          border-color: var(--timeline-color);
+        }
+      }
+    }
+  }
+
+  .#{$prefix}timeline-item {
+    position: relative;
+    padding: 0.5rem 1.75rem;
+
+    @each $color, $value in $theme-colors {
+      &[data-type='#{$color}'] {
+        --timeline-circle-color: var(--#{$prefix}#{$color});
+      }
+    }
+
+    .#{$prefix}timeline-item__timestamp {
+      font-size: 0.8125rem;
+      line-height: 1;
+      color: var(--#{$prefix}secondary);
+
+      &.is-top {
+        margin-bottom: 0.25rem;
+        padding-top: 0.34375rem;
+      }
+      &.is-bottom {
+        margin-top: 0.25rem;
+      }
+    }
+
+    .#{$prefix}timeline-item__content {
+      font-size: 0.875rem;
+    }
+
+    &[data-node='dot']::before {
+      background-color: var(--timeline-circle-color) !important;
+    }
+    &[data-size='small']::before {
+      transform: scale(0.8) translateY(-50%);
+    }
+    &[data-size='large']::before {
+      transform: scale(1.2) translateY(-50%);
+    }
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 1.25rem;
+      transform: translateY(-50%);
+      left: 0;
+      width: var(--timeline-circle-size);
+      height: var(--timeline-circle-size);
+      font-size: var(--timeline-circle-size);
+      line-height: var(--timeline-circle-size);
+      text-align: center;
+      border-radius: 50%;
+      border-width: var(--timeline-width);
+      border-style: solid;
+      border-color: var(--timeline-circle-color);
+      background-color: $global-background-color;
+      color: transparent;
+      z-index: 1;
+  
+      [data-theme='dark'] & {
+        background-color: $global-background-color-dark;
+      }
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: calc(var(--timeline-circle-size) / 2 + var(--timeline-width) / 2);
+      width: var(--timeline-width);
+      height: 100%;
+      background-color: var(--timeline-color);
+    }
+  
+    [data-theme='dark'] & {
+      --timeline-color: #{darken($global-border-color, 50%)};
+    }
+  }  
+}
@@ -39,16 +39,17 @@ $global-link-hover-color: #2983bb !default; // 潮蓝
 $global-link-hover-color-dark: #fff !default;

 // Color of the border
+// TODO refactor border colors
 $global-border-color: #f0f0f0 !default;
 $global-border-color-dark: #363636 !default;
 // ========== Global ========== //

 // ========== Scrollbar ========== //
 // Color of the scrollbar
-$scrollbar-color: #87878d !default;
+$scrollbar-color: #a6a6a6 !default;

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

 // ========== Selection ========== //
@@ -73,6 +74,13 @@ $header-title-font-size: 1.5rem !default;
 $menu-active-color: #161209 !default;
 $menu-active-color-dark: #fff !default;

+// Border color of the menu item
+$menu-border-color: darken($global-border-color, 5%) !default;
+$menu-border-color-dark: lighten($global-border-color-dark, 5%) !default;
+
+// Height of the submenu item of desktop header
+$submenu-height: $header-height * 0.5 !default;
+
 // Color of the search background
 $search-background-color: #e9e9e9 !default;
 $search-background-color-dark: #363636 !default;
@@ -88,8 +96,12 @@ $tag-cloud-end-dark: $global-font-color-dark!default;

 // ========== Single Content ========== //
 // Font size of the TOC
-$toc-title-font-size: 1.2rem !default;
-$toc-content-font-size: 1rem !default;
+$toc-title-font-size: 1rem !default;
+$toc-content-font-size: 0.875rem !default;
+
+// Font size of the Collection List
+$collection-title-font-size: 1rem !default;
+$collection-list-font-size: 0.875rem !default;

 // Color of the single link
 $single-link-color: #2376b7 !default; // 花青
@@ -165,6 +177,7 @@ $github-corner-fill-dark: $header-background-color !default;
 // ========== GitHub Corners ========== //

@import '_partials/_maps/admonition';
+@import '_partials/_maps/alert';
@import '_partials/_maps/code-highlight';
@import '_partials/_maps/code-type';
@import '_partials/_maps/colors';
@@ -7,7 +7,7 @@
@import "_core/base";
@import "_core/layout";
@import "_core/common";
-@import "_core/patch";
@import "_page";
@import "_core/media";
+@import "_core/patch";
@import "_custom";
@@ -13,9 +13,9 @@ libFiles:
  # 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
-  # artalk@2.6.4 https://github.com/ArtalkJS/Artalk
-  artalkCSS: artalk@2.6.4/dist/Artalk.css
-  artalkJS: artalk@2.6.4/dist/Artalk.js
+  # artalk@latest https://github.com/ArtalkJS/Artalk
+  artalkCSS: artalk@latest/dist/Artalk.css
+  artalkJS: artalk@latest/dist/Artalk.js
  # autocomplete-js@0.38.1 https://github.com/algolia/autocomplete
  # TODO update autocompleteJS: '@algolia/autocomplete-js@1.7.1/dist/umd/index.production.js'
  autocompleteJS: autocomplete.js@0.38.1/dist/autocomplete.min.js
@@ -24,17 +24,14 @@ libFiles:
  # 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
-  # crypto-js@4.1.1 https://github.com/brix/crypto-js
-  cryptoCoreJS: crypto-js@4.1.1/core.js
-  cryptoEncBase64JS: crypto-js@4.1.1/enc-base64.js
-  cryptoMd5JS: crypto-js@4.1.1/md5.js
-  cryptoSha256JS: crypto-js@4.1.1/sha256.js
+  # crypto-js@4.2.0 https://github.com/brix/crypto-js
+  cryptoCoreJS: crypto-js@4.2.0/core.js
+  cryptoEncBase64JS: crypto-js@4.2.0/enc-base64.js
+  cryptoSha256JS: crypto-js@4.2.0/sha256.js
  # echarts@5.3.3 https://github.com/apache/echarts
  echartsJS: echarts@5.3.3/dist/echarts.min.js
-  # eruda@3.0.1 https://github.com/liriliri/eruda
-  erudaJS: eruda@3.0.1/eruda.js
-  # fontawesome-free@6.4.2 https://github.com/FortAwesome/Font-Awesome
-  fontawesomeFreeCSS: '@fortawesome/fontawesome-free@6.4.2/css/all.min.css'
+  # fontawesome-free@6.7.1 https://github.com/FortAwesome/Font-Awesome
+  fontawesomeFreeCSS: '@fortawesome/fontawesome-free@6.7.1/css/all.min.css'
  # fusejs@6.6.2 https://github.com/krisk/fuse
  fuseJS: fuse.js@6.6.2/dist/fuse.min.js
  # gitalk@1.7.2 https://github.com/gitalk/gitalk
@@ -42,12 +39,12 @@ libFiles:
  gitalkJS: gitalk@1.7.2/dist/gitalk.min.js
  # instant.page@5.2.0 https://github.com/instantpage/instant.page
  instantPage: instant.page@5.2.0/instantpage.min.js
-  # katex@0.16.9 https://github.com/KaTeX/KaTeX
-  katexAutoRenderJS: katex@0.16.9/dist/contrib/auto-render.min.js
-  katexCopyTexJS: katex@0.16.9/dist/contrib/copy-tex.min.js
-  katexCSS: katex@0.16.9/dist/katex.min.css
-  katexJS: katex@0.16.9/dist/katex.min.js
-  katexMhchemJS: katex@0.16.9/dist/contrib/mhchem.min.js
+  # katex@0.16.10 https://github.com/KaTeX/KaTeX
+  katexAutoRenderJS: katex@0.16.10/dist/contrib/auto-render.min.js
+  katexCopyTexJS: katex@0.16.10/dist/contrib/copy-tex.min.js
+  katexCSS: katex@0.16.10/dist/katex.min.css
+  katexJS: katex@0.16.10/dist/katex.min.js
+  katexMhchemJS: katex@0.16.10/dist/contrib/mhchem.min.js
  # lightgallery@2.7.2 https://github.com/sachinchoolur/lightgallery
  lightgalleryCSS: lightgallery@2.7.2/css/lightgallery-bundle.min.css
  lightgalleryJS: lightgallery@2.7.2/lightgallery.min.js
@@ -57,9 +54,6 @@ libFiles:
  # TODO update to 3.x
  mapboxGLCSS: mapbox-gl@2.10.0/dist/mapbox-gl.css
  mapboxGLJS: mapbox-gl@2.10.0/dist/mapbox-gl.js
-  # mermaid@9.4.3 https://github.com/mermaid-js/mermaid
-  # TODO bump Mermaid from 9.x to 10.x
-  mermaidJS: mermaid@9.4.3/dist/mermaid.min.js
  # meting@2.0.1 https://github.com/metowolf/MetingJS
  metingJS: meting@2.0.1/dist/Meting.min.js
  # object-fit-images@3.2.4 https://github.com/fregante/object-fit-images
@@ -74,13 +68,13 @@ libFiles:
  twemojiJS: twemoji@14.0.2/dist/twemoji.min.js
  # twikoo@1.6.22 https://github.com/imaegoo/twikoo
  twikooJS: twikoo@1.6.22/dist/twikoo.all.min.js
-  # typeit@8.7.1 https://github.com/alexmacarthur/typeit
-  typeitJS: typeit@8.7.1/dist/index.umd.js
-  # valine@1.5.1 https://github.com/xCss/Valine
-  valineJS: valine@1.5.1/dist/Valine.min.js
-  # vconsole@3.15.1 https://github.com/Tencent/vConsole
-  vconsoleJS: vconsole@3.15.1/dist/vconsole.min.js
-  # waline@2.15.8 https://github.com/walinejs/waline
-  walineCSS: '@waline/client@2.15.8/dist/waline.css'
-  walineJS: '@waline/client@2.15.8/dist/waline.js'
+  # typeit@8.8.4 https://github.com/alexmacarthur/typeit
+  typeitJS: typeit@8.8.4/dist/index.umd.js
+  # valine@1.5.2 https://github.com/xCss/Valine
+  valineJS: valine@1.5.2/dist/Valine.min.js
+  # waline@3.4.1 https://github.com/walinejs/waline
+  walineCSS: '@waline/client@3.4.1/dist/waline.css'
+  walineJS: '@waline/client@3.4.1/dist/waline.umd.js'
+  # xxhash-wasm@1.0.2 https://github.com/jungomi/xxhash-wasm
+  xxhashWasmJS: xxhash-wasm@1.0.2/umd/xxhash-wasm.js
  
@@ -13,9 +13,9 @@ libFiles:
  # 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
-  # artalk@2.6.4 https://github.com/ArtalkJS/Artalk
-  artalkCSS: artalk@2.6.4/dist/Artalk.css
-  artalkJS: artalk@2.6.4/dist/Artalk.js
+  # artalk@latest https://github.com/ArtalkJS/Artalk
+  artalkCSS: artalk@latest/dist/Artalk.css
+  artalkJS: artalk@latest/dist/Artalk.js
  # autocomplete-js@0.38.1 https://github.com/algolia/autocomplete
  # TODO update autocompleteJS: '@algolia/autocomplete-js@1.7.1/dist/umd/index.production.js'
  autocompleteJS: autocomplete.js@0.38.1/dist/autocomplete.min.js
@@ -24,17 +24,14 @@ libFiles:
  # 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
-  # crypto-js@4.1.1 https://github.com/brix/crypto-js
-  cryptoCoreJS: crypto-js@4.1.1/core.js
-  cryptoEncBase64JS: crypto-js@4.1.1/enc-base64.js
-  cryptoMd5JS: crypto-js@4.1.1/md5.js
-  cryptoSha256JS: crypto-js@4.1.1/sha256.js
+  # crypto-js@4.2.0 https://github.com/brix/crypto-js
+  cryptoCoreJS: crypto-js@4.2.0/core.js
+  cryptoEncBase64JS: crypto-js@4.2.0/enc-base64.js
+  cryptoSha256JS: crypto-js@4.2.0/sha256.js
  # echarts@5.3.3 https://github.com/apache/echarts
  echartsJS: echarts@5.3.3/dist/echarts.min.js
-  # eruda@3.0.1 https://github.com/liriliri/eruda
-  erudaJS: eruda@3.0.1/eruda.js
-  # fontawesome-free@6.4.2 https://github.com/FortAwesome/Font-Awesome
-  fontawesomeFreeCSS: '@fortawesome/fontawesome-free@6.4.2/css/all.min.css'
+  # fontawesome-free@6.7.1 https://github.com/FortAwesome/Font-Awesome
+  fontawesomeFreeCSS: '@fortawesome/fontawesome-free@6.7.1/css/all.min.css'
  # fusejs@6.6.2 https://github.com/krisk/fuse
  fuseJS: fuse.js@6.6.2/dist/fuse.min.js
  # gitalk@1.7.2 https://github.com/gitalk/gitalk
@@ -42,12 +39,12 @@ libFiles:
  gitalkJS: gitalk@1.7.2/dist/gitalk.min.js
  # instant.page@5.2.0 https://github.com/instantpage/instant.page
  instantPage: instant.page@5.2.0/instantpage.js
-  # katex@0.16.9 https://github.com/KaTeX/KaTeX
-  katexAutoRenderJS: katex@0.16.9/dist/contrib/auto-render.min.js
-  katexCopyTexJS: katex@0.16.9/dist/contrib/copy-tex.min.js
-  katexCSS: katex@0.16.9/dist/katex.min.css
-  katexJS: katex@0.16.9/dist/katex.min.js
-  katexMhchemJS: katex@0.16.9/dist/contrib/mhchem.min.js
+  # katex@0.16.10 https://github.com/KaTeX/KaTeX
+  katexAutoRenderJS: katex@0.16.10/dist/contrib/auto-render.min.js
+  katexCopyTexJS: katex@0.16.10/dist/contrib/copy-tex.min.js
+  katexCSS: katex@0.16.10/dist/katex.min.css
+  katexJS: katex@0.16.10/dist/katex.min.js
+  katexMhchemJS: katex@0.16.10/dist/contrib/mhchem.min.js
  # lightgallery@2.7.2 https://github.com/sachinchoolur/lightgallery
  lightgalleryCSS: lightgallery@2.7.2/css/lightgallery-bundle.min.css
  lightgalleryJS: lightgallery@2.7.2/lightgallery.min.js
@@ -57,9 +54,6 @@ libFiles:
  # TODO update to 3.x
  mapboxGLCSS: mapbox-gl@2.10.0/dist/mapbox-gl.css
  mapboxGLJS: mapbox-gl@2.10.0/dist/mapbox-gl.js
-  # mermaid@9.4.3 https://github.com/mermaid-js/mermaid
-  # TODO bump Mermaid from 9.x to 10.x
-  mermaidJS: mermaid@9.4.3/dist/mermaid.min.js
  # meting@2.0.1 https://github.com/metowolf/MetingJS
  metingJS: meting@2.0.1/dist/Meting.min.js
  # object-fit-images@3.2.4 https://github.com/fregante/object-fit-images
@@ -74,13 +68,12 @@ libFiles:
  twemojiJS: twemoji@14.0.2/dist/twemoji.min.js
  # twikoo@1.6.22 https://github.com/imaegoo/twikoo
  twikooJS: twikoo@1.6.22/dist/twikoo.all.min.js
-  # typeit@8.7.1 https://github.com/alexmacarthur/typeit
-  typeitJS: typeit@8.7.1/dist/index.umd.js
-  # valine@1.5.1 https://github.com/xCss/Valine
-  valineJS: valine@1.5.1/dist/Valine.min.js
-  # vconsole@3.15.1 https://github.com/Tencent/vConsole
-  vconsoleJS: vconsole@3.15.1/dist/vconsole.min.js
-  # waline@2.15.8 https://github.com/walinejs/waline
-  walineCSS: '@waline/client@2.15.8/dist/waline.css'
-  walineJS: '@waline/client@2.15.8/dist/waline.js'
-  
+  # typeit@8.8.4 https://github.com/alexmacarthur/typeit
+  typeitJS: typeit@8.8.4/dist/index.umd.js
+  # valine@1.5.2 https://github.com/xCss/Valine
+  valineJS: valine@1.5.2/dist/Valine.min.js
+  # waline@3.4.1 https://github.com/walinejs/waline
+  walineCSS: '@waline/client@3.4.1/dist/waline.css'
+  walineJS: '@waline/client@3.4.1/dist/waline.umd.js'
+  # xxhash-wasm@1.0.2 https://github.com/jungomi/xxhash-wasm
+  xxhashWasmJS: xxhash-wasm@1.0.2/umd/xxhash-wasm.js
@@ -14,13 +14,13 @@ linkedin:
  Icon:
    Class: fa-brands fa-linkedin fa-fw

-# 003: Twitter
+# 003: Twitter (X)
 twitter:
  Weight: 3
  Prefix: https://twitter.com/
-  Title: Twitter
+  Title: X
  Icon:
-    Class: fa-brands fa-twitter fa-fw
+    Class: fa-brands fa-x-twitter fa-fw

 # 004: Instagram
 instagram:
@@ -665,6 +665,22 @@ tiktok:
  Icon:
    Class: fa-brands fa-tiktok

+# 085 Credly
+credly:
+  Weight: 85
+  Title: Credly
+  Prefix: https://www.credly.com/users/
+  Icon:
+    Class: fa-solid fa-certificate
+
+# 086: Bluesky
+bluesky:
+  Weight: 86
+  Title: Bluesky
+  Prefix: https://bsky.app/profile/
+  Icon:
+    Class: fa-brands fa-bluesky
+
 # Phone
 phone:
  Weight: 997
@@ -684,7 +700,7 @@ email:
 # RSS
 rss:
  Weight: 999
-  Url: /index.xml
+  Url: index.xml
  Title: RSS
  Newtab: true
  Icon:
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" version="1.1" width="16" height="16">
  <defs>
    <style>.fixit-ban{opacity:.9;}</style>
  </defs>
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-  viewBox="0 0 370 391" xml:space="preserve">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 370 391" xml:space="preserve" width="16" height="16">
 <style type="text/css">
 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4088;stroke:#C9177E;stroke-width:27;}
 	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>
@@ -1,35 +1,35 @@
 /**
- * Custom javascript for FixIt site.
+ * Custom JavaScript for FixIt blog site.
 * @author @Lruihao https://lruihao.cn
 */
-const FixItCustom = new (function () {
+class FixItBlog {
  /**
-   * Hello World
-   * You can define your own functions below.
-   * @returns {FixItCustom}
+   * say hello
+   * you can define your own functions below
+   * @returns {FixItBlog}
   */
-  this.hello = () => {
-    console.log('FixItCustom echo: Hello FixIt!');
+  hello() {
+    console.log('custom.js: Hello FixIt!');
    return this;
-  };
+  }
+
  /**
-   * Initialize.
-   * @returns {FixItCustom}
+   * initialize
+   * @returns {FixItBlog}
   */
-  this.init = () => {
-    // Custom infos.
+  init() {
    this.hello();
    return this;
-  };
-})();
+  }
+}

 /**
- * Immediate.
+ * immediate execution
 */
 (() => {
-  FixItCustom.init();
-  // It will be executed when the DOM tree is built.
+  window.fixitBlog = new FixItBlog();
+  // it will be executed when the DOM tree is built
  document.addEventListener('DOMContentLoaded', () => {
-    // FixItCustom.init();
+    window.fixitBlog.init();
  });
 })();
@@ -1,177 +1,205 @@
-/**
- * FixIt decryptor for encrypted pages and fixit-encryptor shortcode
- * @param {Object} options
- * @param {Function} [options.decrypted] [Lifecycle Hooks] handler after decrypting
- * @param {Function} [options.reset] [Lifecycle Hooks] handler after encrypting again
- * @param {Number} [options.duration=86400] number of seconds to cache decryption statistics. unit: s
- * @author @Lruihao https://lruihao.cn
- * @since v0.2.15
- */
-FixItDecryptor = function (options = {}) {
-  var _proto = FixItDecryptor.prototype;
-  this.options = options || {};
-  this.options.duration = this.options.duration || 24 * 60 * 60; // default cache one day
-  this.decryptedEventSet = new Set();
-  this.resetEventSet = new Set();
-  this.$el = document.querySelector('.fixit-decryptor-container');
+class FixItDecryptor {
+  /**
+   * FixIt decryptor for encrypted pages and fixit-encryptor shortcode
+   * @param {Object} options
+   * @param {Function} [options.decrypted] [Lifecycle Hooks] handler after decrypting
+   * @param {Function} [options.reset] [Lifecycle Hooks] handler after encrypting again
+   * @param {Number} [options.duration=86400] number of seconds to cache decryption statistics. unit: s
+   */
+  constructor(options = {}) {
+    this.options = options || {};
+    this.options.duration = this.options.duration || 24 * 60 * 60; // default cache one day
+    this.decryptedEventSet = new Set();
+    this.partialDecryptedEventSet = new Set();
+    this.resetEventSet = new Set();
+    customElements.get('fixit-encryptor') || customElements.define('fixit-encryptor', class extends HTMLElement {});
+    customElements.get('cipher-text') || customElements.define('cipher-text', class extends HTMLElement {});
+  }

  /**
   * decrypt content
-   * @param {String} base64EncodeContent encrypted content
+   * @param {Element} $cipherText cipher text element
+   * @param {Element} $target target content element
+   * @param {String} salt salt string
   */
-  var _decryptContent = (base64EncodeContent) => {
+  #decryptContent($cipherText, $target, salt) {
    try {
-      this.$el.querySelector('.fixit-decryptor-loading').classList.add('d-none');
-      this.$el.querySelector('#fixit-decryptor-input').classList.add('d-none');
-      this.$el.querySelector('.fixit-encryptor-btn').classList.remove('d-none');
-      document.querySelector('#content').insertAdjacentHTML(
-        'afterbegin',
-        CryptoJS.enc.Base64.parse(base64EncodeContent).toString(CryptoJS.enc.Utf8)
-      );
+      $target.innerHTML = CryptoJS.enc.Base64
+        .parse($cipherText.innerText.replace(salt, ''))
+        .toString(CryptoJS.enc.Utf8);
+      $cipherText.parentElement.classList.add('decrypted');
    } catch (err) {
      return console.error(err);
    }
    // decrypted hook
-    console.log(this.decryptedEventSet)
-    for (const event of this.decryptedEventSet) {
-      event();
-    }    
-  };
+    const eventSet = $target.id === 'content' ? this.decryptedEventSet : this.partialDecryptedEventSet;
+    for (const event of eventSet) {
+      event($target);
+    }
+  }
+
+  /**
+   * validate password
+   * @param {Element} $encryptor fixit-encryptor element
+   * @param {Function} callback callback function after password validation
+   * @returns 
+   */
+  async #validatePassword($encryptor, callback) {
+    const $cipherText = $encryptor.querySelector('cipher-text');
+    const password = $cipherText.dataset.password;
+    const inputEl = $encryptor.querySelector('.fixit-decryptor-input');
+    const input = inputEl.value.trim();
+    // Warning: insufficient-password-hash Weak hashing algorithms for passwords poses security risks.
+    const { h64ToString } = await xxhash();
+    const inputHash = h64ToString(input);
+    const inputSha256 = CryptoJS.SHA256(input).toString();
+    const saltLen = input.length % 2 ? input.length : input.length + 1;
+
+    inputEl.value = '';
+    inputEl.blur();
+    if (!input) {
+      alert('Please enter the correct password!');
+      return console.warn('Please enter the correct password!');
+    }
+    if (inputHash !== password) {
+      alert(`Password error: ${input} not the correct password!`);
+      return console.warn(`Password error: ${input} not the correct password!`);
+    }
+    callback($cipherText, inputHash, inputSha256.slice(saltLen));
+  }

  /**
   * initialize FixIt decryptor
+   * @param {Object} options
+   * @param {Boolean} options.all whether to decrypt all content
+   * @param {String} options.shortcode whether to decrypt fixit-encryptor shortcode
   */
-  _proto.init = () => {
+  init({ all, shortcode }) {
    this.addEventListener('decrypted', this.options?.decrypted);
+    this.addEventListener('partial-decrypted', this.options?.partialDecrypted);
    this.addEventListener('reset', this.options?.reset);
+    const $content = document.querySelector('#content');
+    if (shortcode) {
+      this.addEventListener('decrypted', () => {
+        this.initShortcodes($content);
+      });
+      this.addEventListener('partial-decrypted', ($parent) => {
+        this.initShortcodes($parent);
+      });
+    }
+    if (all) {
+      this.initPage();
+    } else if (shortcode) {
+      this.initShortcodes($content);
+    }
+  }
+
+  /**
+   * initialize FixIt decryptor for the encrypted pages
+   */
+  initPage() {
    this.validateCache();
+    const $encryptor = document.querySelector('article > fixit-encryptor');
+    const $content = document.querySelector('#content');

-    const _decryptor = this;
-    this.$el.querySelector('#fixit-decryptor-input')?.addEventListener('keydown', function (e) {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        const $content = document.querySelector('#content');
-        const password = $content.getAttribute('data-password');
-        const input = this.value.trim();
-        const saltLen = input.length % 2 ? input.length : input.length + 1;
-        const inputMd5 = CryptoJS.MD5(input).toString();
-        const inputSha256 = CryptoJS.SHA256(input).toString();
-
-        this.value = '';
-        this.blur();
-        if (!input) {
-          alert('Please enter the correct password!');
-          return console.warn('Please enter the correct password!');
-        }
-        if (inputMd5 !== password) {
-          alert(`Password error: ${input} not the correct password!`);
-          return console.warn(`Password error: ${input} not the correct password!`);
-        }
+    const decryptorHandler = () => {
+      this.#validatePassword($encryptor, ($cipherText, passwordHash, salt) => {
        // cache decryption statistics
        window.localStorage?.setItem(
          `fixit-decryptor/#${location.pathname}`,
          JSON.stringify({
-            expiration: Math.ceil(Date.now() / 1000) + _decryptor.options.duration,
-            md5: inputMd5,
-            sha256: inputSha256.slice(saltLen)
+            expiration: Math.ceil(Date.now() / 1000) + this.options.duration,
+            password: passwordHash,
+            salt,
          })
        );
-        _decryptContent($content.getAttribute('data-content').replace(inputSha256.slice(saltLen), ''));
+        this.#decryptContent($cipherText, $content, salt);
+      });
+    };
+
+    // bind decryptor input enter keydown event
+    $encryptor.querySelector('.fixit-decryptor-input')?.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        decryptorHandler();
      }
    });

-    this.$el.querySelector('.fixit-encryptor-btn')?.addEventListener('click', function (e) {
+    // bind decryptor button click event
+    $encryptor.querySelector('.fixit-decryptor-btn')?.addEventListener('click', (e) => {
      e.preventDefault();
-      this.classList.add('d-none')
-      _decryptor.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
-      document.querySelector('#content').innerHTML = '';
-      document.querySelector('#content').insertAdjacentElement(
-        'afterbegin',
-        _decryptor.$el
-      );
+      decryptorHandler();
+    });
+
+    // bind encryptor button click event
+    $encryptor.querySelector('.fixit-encryptor-btn')?.addEventListener('click', (e) => {
+      e.preventDefault();
+      $encryptor.classList.remove('decrypted');
+      $content.innerHTML = '';
      window.localStorage?.removeItem(`fixit-decryptor/#${location.pathname}`);
      // reset hook
-      for (const event of _decryptor.resetEventSet) {
+      for (const event of this.resetEventSet) {
        event();
      }
    });
-  };
+
+    $encryptor.classList.add('initialized');
+  }

  /**
-   * initialize fixit-encryptor shortcodes
+   * initialize FixIt decryptor for fixit-encryptor shortcodes
+   * @param {Element} $parent parent element
   */
-  _proto.initShortcodes = () => {
-    // TODO TODO shortcode decrypted event
-    // this.addEventListener('decrypted', this.options?.decrypted);
-    const _decryptor = this;
-    const $shortcodes = document.querySelectorAll('fixit-encryptor:not(.decrypted)');
+  initShortcodes($parent) {
+    const $shortcodes = $parent.querySelectorAll('fixit-encryptor:not(.initialized)');

    $shortcodes.forEach($shortcode => {
+      const decryptorHandler = () => {
+        const $content = $shortcode.querySelector('.decryptor-content');
+        this.#validatePassword($shortcode, ($cipherText, passwordHash, salt) => {
+          this.#decryptContent($cipherText, $content, salt);
+        });
+      };
+
+      // bind decryptor input enter keydown event
      $shortcode.querySelector('.fixit-decryptor-input')?.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
          e.preventDefault();
-          const $decryptor = this.parentElement.parentElement;
-          const $content = $decryptor.nextElementSibling;
-          const password = $content.getAttribute('data-password');
-          const input = this.value.trim();
-          const saltLen = input.length % 2 ? input.length : input.length + 1;
-          const inputMd5 = CryptoJS.MD5(input).toString();
-          const inputSha256 = CryptoJS.SHA256(input).toString();
-  
-          this.value = '';
-          this.blur();
-          if (!input) {
-            alert('Please enter the correct password!');
-            return console.warn('Please enter the correct password!');
-          }
-          if (inputMd5 !== password) {
-            alert(`Password error: ${input} not the correct password!`);
-            return console.warn(`Password error: ${input} not the correct password!`);
-          }
-          try {
-            const base64EncodeContent = $content.getAttribute('data-content').replace(inputSha256.slice(saltLen), '');
-            $decryptor.querySelector('.fixit-decryptor-input').classList.add('d-none');
-            $content.insertAdjacentHTML(
-              'afterbegin',
-              CryptoJS.enc.Base64.parse(base64EncodeContent).toString(CryptoJS.enc.Utf8)
-            );
-            $decryptor.parentElement.classList.add('decrypted');
-          } catch (err) {
-            return console.error(err);
-          }
-          // TODO shortcode decrypted hook
-          // for (const event of _decryptor.decryptedEventSet) {
-          //   event();
-          // }
+          decryptorHandler();
        }
      });
+
+      // bind decryptor button click event
+      $shortcode.querySelector('.fixit-decryptor-btn')?.addEventListener('click', function (e) {
+        e.preventDefault();
+        decryptorHandler();
+      });
+
+      $shortcode.classList.add('initialized');
    });
-  };
+  }

  /**
   * validate the cached decryption statistics in localStorage
   * @returns {FixItDecryptor}
   */
-  _proto.validateCache = () => {
+  validateCache() {
    const $content = document.querySelector('#content');
-    const password = $content.getAttribute('data-password');
+    const $encryptor = document.querySelector('article > fixit-encryptor');
+    const $cipherText = $encryptor.querySelector('cipher-text');
+    const password = $cipherText.dataset.password;
    const cachedStat = JSON.parse(window.localStorage?.getItem(`fixit-decryptor/#${location.pathname}`));

-    if (!cachedStat) {
-      this.$el.querySelector('.fixit-decryptor-loading').classList.add('d-none');
-      this.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
+    if (!cachedStat || cachedStat?.password !== password || Number(cachedStat?.expiration) < Math.ceil(Date.now() / 1000)) {
+      if (cachedStat) {
+        window.localStorage?.removeItem(`fixit-decryptor/#${location.pathname}`);
+        console.warn('The password has expired, please re-enter!');
+      }
      return this;
    }
-    if (cachedStat?.md5 !== password || Number(cachedStat?.expiration) < Math.ceil(Date.now() / 1000)) {
-      this.$el.querySelector('.fixit-decryptor-loading').classList.add('d-none');
-      this.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
-      window.localStorage?.removeItem(`fixit-decryptor/#${location.pathname}`);
-      console.warn('The password has expired, please re-enter!');
-      return this;
-    }
-    _decryptContent($content.getAttribute('data-content').replace(cachedStat.sha256, ''));
+    this.#decryptContent($cipherText, $content, cachedStat.salt);
    return this;
-  };
+  }

  /**
   * add event listener for FixIt Decryptor
@@ -179,7 +207,7 @@ FixItDecryptor = function (options = {}) {
   * @param {Function} listener event handler
   * @returns {FixItDecryptor}
   */
-  _proto.addEventListener = (event, listener) => {
+  addEventListener(event, listener) {
    if (typeof listener !== 'function') {
      return this;
    }
@@ -187,6 +215,9 @@ FixItDecryptor = function (options = {}) {
      case 'decrypted':
        this.decryptedEventSet.add(listener);
        break;
+      case 'partial-decrypted':
+        this.partialDecryptedEventSet.add(listener);
+        break;
      case 'reset':
        this.resetEventSet.add(listener);
        break;
@@ -195,7 +226,7 @@ FixItDecryptor = function (options = {}) {
        break;
    }
    return this;
-  };
+  }

  /**
   * remove event listener for FixIt Decryptor
@@ -203,7 +234,7 @@ FixItDecryptor = function (options = {}) {
   * @param {Function} listener event handler
   * @returns {FixItDecryptor}
   */
-  _proto.removeEventListener = (event, listener) => {
+  removeEventListener(event, listener) {
    if (typeof listener !== 'function') {
      return this;
    }
@@ -211,6 +242,9 @@ FixItDecryptor = function (options = {}) {
      case 'decrypted':
        this.decryptedEventSet.delete(listener);
        break;
+      case 'partial-decrypted':
+        this.partialDecryptedEventSet.delete(listener);
+        break;
      case 'reset':
        this.resetEventSet.delete(listener);
        break;
@@ -219,5 +253,8 @@ FixItDecryptor = function (options = {}) {
        break;
    }
    return this;
-  };
-};
+  }
+}
+
+window.FixItDecryptor = FixItDecryptor;
+
@@ -0,0 +1,21 @@
+import params from '@params';
+
+/**
+ * Check theme isDark before body rendering
+ */
+(function () {
+  const localStorage = window.localStorage;
+  if (!localStorage) {
+    return;
+  }
+  let isDark = false;
+  const themeUsed = localStorage.getItem('theme');
+  if (themeUsed) {
+    isDark = themeUsed === 'dark';
+  } else {
+    isDark = params.defaultTheme === 'auto' ?
+      window.matchMedia('(prefers-color-scheme: dark)').matches :
+      params.defaultTheme === 'dark';
+  }
+  isDark && (document.documentElement.dataset.theme = 'dark');
+})();
@@ -3,8 +3,7 @@ import Util from './util';
 class FixIt {
  constructor() {
    this.config = window.config;
-    this.data = this.config.data || [];
-    this.isDark = document.body.dataset.theme === 'dark';
+    this.isDark = document.documentElement.dataset.theme === 'dark';
    this.util = new Util();
    this.newScrollTop = this.util.getScrollTop();
    this.oldScrollTop = this.newScrollTop;
@@ -49,8 +48,8 @@ class FixIt {
    });
  }

-  initTwemoji() {
-    this.config.twemoji && twemoji.parse(document.body);
+  initTwemoji(target = document.body) {
+    this.config.twemoji && twemoji.parse(target);
  }

  initMenu() {
@@ -90,11 +89,11 @@ class FixIt {
  initSwitchTheme() {
    this.util.forEach(document.getElementsByClassName('theme-switch'), ($themeSwitch) => {
      $themeSwitch.addEventListener('click', () => {
-        document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
+        document.documentElement.dataset.theme = this.isDark ? 'light' : 'dark';
        this.isDark = !this.isDark;
        window.localStorage?.setItem('theme', this.isDark ? 'dark' : 'light');
        for (let event of this.switchThemeEventSet) {
-          event();
+          event(this.isDark);
        }
      }, false);
    });
@@ -125,6 +124,21 @@ class FixIt {
    const $searchToggle = document.getElementById(`search-toggle-${suffix}`);
    const $searchLoading = document.getElementById(`search-loading-${suffix}`);
    const $searchClear = document.getElementById(`search-clear-${suffix}`);
+    const $searchCancel = document.getElementById('search-cancel-mobile');
+
+    // goto the PostChat panel rather than search results
+    if (searchConfig.type === 'post-chat' && window.postChatUser) {
+      if (isMobile) {
+        $searchInput.addEventListener('focus', () => {
+          window.postChatUser.setSearchInput('');
+        }, false);
+      } else {
+        $searchToggle.addEventListener('click', () => {
+          window.postChatUser.setSearchInput('');
+        }, false);
+      }
+      return;      
+    }

    if (isMobile) {
      this._searchMobileOnce = true;
@@ -133,7 +147,7 @@ class FixIt {
        document.body.classList.add('blur');
        $header.classList.add('open');
      }, false);
-      document.getElementById('search-cancel-mobile').addEventListener('click', () => {
+      $searchCancel.addEventListener('click', () => {
        this.disableScrollEvent = false;
        $header.classList.remove('open');
        document.body.classList.remove('blur');
@@ -160,8 +174,10 @@ class FixIt {
        document.body.classList.add('blur');
        $header.classList.add('open');
        $searchInput.focus();
+        this.disableScrollEvent = true;
      }, false);
      $searchClear.addEventListener('click', () => {
+        this.disableScrollEvent = false;
        $searchClear.style.display = 'none';
        this._searchDesktop && this._searchDesktop.autocomplete.setVal('');
      }, false);
@@ -234,7 +250,7 @@ class FixIt {
                const results = {};
                window._index.search(query).forEach(({ item, refIndex, matches }) => {
                  let title = item.title;
-                  let content = item.content;
+                  let content = item.content.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
                  matches.forEach(({ indices, value, key }) => {
                    if (key === 'content') {
                      let offset = 0;
@@ -290,25 +306,49 @@ class FixIt {
                    finish([]);
                  });
              } else finish(search());
-            }            
+            } else if (searchConfig.type === 'cse') {
+              const cseConfig = this.config.cse;
+              if (cseConfig.engine === 'google' && cseConfig.cx) {
+                finish([{
+                  uri: `${cseConfig.resultsPage}#gsc.tab=0&gsc.q=${encodeURIComponent(query)}`,
+                  title: cseConfig.searchIn,
+                  date: '<i class="fa-brands fa-searchengin fa-xl" aria-hidden="true"></i>',
+                  context: cseConfig.gotoResultsPage
+                }]);
+              }
+            } else {
+              finish([]);
+            }
          },
          templates: {
            suggestion: ({ title, date, context }) =>
              `<div><span class="suggestion-title">${title}</span><span class="suggestion-date">${date}</span></div><div class="suggestion-context">${context}</div>`,
            empty: ({ query }) => `<div class="search-empty">${searchConfig.noResultsFound}: <span class="search-query">"${query}"</span></div>`,
            footer: ({}) => {
-              const { searchType, icon, href } =
-                searchConfig.type === 'algolia'
-                  ? {
-                      searchType: 'algolia',
-                      icon: '<i class="fa-brands fa-algolia fa-fw" aria-hidden="true"></i>',
-                      href: 'https://www.algolia.com/'
-                    }
-                  : {
-                      searchType: 'Fuse.js',
-                      icon: '',
-                      href: 'https://fusejs.io/'
-                    }
+              let searchType, icon, href;
+              switch (searchConfig.type) {
+                case 'algolia':
+                  searchType = 'algolia';
+                  icon = '<i class="fa-brands fa-algolia fa-fw" aria-hidden="true"></i>';
+                  href = 'https://www.algolia.com/';
+                  break;
+                case 'fuse':
+                  searchType = 'Fuse.js';
+                  icon = '';
+                  href = 'https://fusejs.io/';
+                  break;
+                case 'cse':
+                  if (this.config.cse.engine === 'google') {
+                    searchType = 'Google CSE';
+                    icon = '<i class="fa-brands fa-google fa-fw" aria-hidden="true"></i>';
+                    href = 'https://programmablesearchengine.google.com/';
+                  }
+                  break;
+                default:
+                  searchType = '';
+                  icon = '';
+                  href = '';
+              }
              return `<div class="search-footer">Search by <a href="${href}" rel="noopener noreferrer" target="_blank">${icon} ${searchType}</a></div>`;
            }
          }
@@ -334,8 +374,8 @@ class FixIt {
    }
  }

-  initDetails() {
-    this.util.forEach(document.getElementsByClassName('details'), ($details) => {
+  initDetails(target = document) {
+    this.util.forEach(target.querySelectorAll('.details:not(.disabled)'), ($details) => {
      const $summary = $details.querySelector('.details-summary');
      $summary.addEventListener('click', () => {
        $details.classList.toggle('open');
@@ -345,7 +385,8 @@ class FixIt {

  initLightGallery() {
    if (this.config.lightgallery) {
-      lightGallery(document.getElementById('content'), {
+      this.lg && this.lg.destroy(true);
+      this.lg = lightGallery(document.getElementById('content'), {
        plugins: [lgThumbnail, lgZoom],
        selector: '.lightgallery',
        speed: 400,
@@ -362,7 +403,15 @@ class FixIt {
    }
  }

-  initHighlight() {
+  /**
+   * init code wrapper
+   */
+  initCodeWrapper() {
+    if (!this.config.code) {
+      this.initCopyCode();
+      return
+    }
+    // if markup.highlight.lineNumbersInTable set to false
    this.util.forEach(document.querySelectorAll('.highlight > pre.chroma'), ($preChroma) => {
      const $chroma = document.createElement('div');
      $chroma.className = $preChroma.className;
@@ -377,7 +426,13 @@ class FixIt {
      $preChroma.parentElement.replaceChild($chroma, $preChroma);
      $td.appendChild($preChroma);
    });
-    this.util.forEach(document.querySelectorAll('.highlight > .chroma'), ($chroma) => {
+    // render code header
+    this.util.forEach(document.querySelectorAll('.highlight > .chroma:not([data-init])'), ($chroma) => {
+      $chroma.dataset.init = 'true';
+      if ($chroma.parentElement.classList.contains('no-header')) {
+        this.initCopyCode($chroma);
+        return;
+      }
      const $codeElements = $chroma.querySelectorAll('pre.chroma > code');
      if ($codeElements.length) {
        const $code = $codeElements[$codeElements.length - 1];
@@ -386,8 +441,13 @@ class FixIt {
        // code title
        const $title = document.createElement('span');
        $title.classList.add('code-title');
-        const hlAttrs = this.data[$chroma.parentNode.id];
-        $title.insertAdjacentHTML('afterbegin', `<i class="arrow fa-solid fa-chevron-right fa-fw" aria-hidden="true"></i><span class="title-inner">${hlAttrs?.title ?? ''}</span>`);
+        // insert code title inner
+        $title.insertAdjacentHTML(
+          'afterbegin',
+          $chroma.parentNode.title
+            ? `<i class="arrow fa-solid fa-chevron-right fa-fw" aria-hidden="true"></i><span class="title-inner">${$chroma.parentNode.title}</span>`
+            : '<i class="arrow fa-solid fa-chevron-right fa-fw" aria-hidden="true"></i>'
+        );
        $title.addEventListener('click', () => {
          $chroma.classList.toggle('open');
        }, false);
@@ -404,20 +464,20 @@ class FixIt {
        if (this.config.code.editable) {
          const $edit = document.createElement('span');
          $edit.classList.add('edit');
-          $edit.insertAdjacentHTML('afterbegin', `<i class="fa-solid fa-key fa-fw" title="${this.config.code.editUnLockTitle}" aria-hidden="true"></i>`);
+          $edit.insertAdjacentHTML('afterbegin', `<i class="fa-solid fa-pen-to-square fa-fw" title="${this.config.code.editUnLockTitle}" aria-hidden="true"></i>`);
          $edit.addEventListener('click', () => {
-            const $iconKey = $edit.querySelector('.fa-key');
+            const $iconKey = $edit.querySelector('.fa-pen-to-square');
            const $iconLock = $edit.querySelector('.fa-lock');
            const $preChromas = $edit.parentElement.parentElement.querySelectorAll('pre.chroma');
            const $preChroma = $preChromas.length === 2 ? $preChromas[1] : $preChromas[0];
            if ($iconKey) {
              $iconKey.classList.add('fa-lock');
-              $iconKey.classList.remove('fa-key');
+              $iconKey.classList.remove('fa-pen-to-square');
              $iconKey.title = this.config.code.editLockTitle;
              $preChroma.setAttribute('contenteditable', true);
              $preChroma.focus();
            } else {
-              $iconLock.classList.add('fa-key');
+              $iconLock.classList.add('fa-pen-to-square');
              $iconLock.classList.remove('fa-lock');
              $iconLock.title = this.config.code.editUnLockTitle;
              $preChroma.setAttribute('contenteditable', false);
@@ -432,13 +492,20 @@ class FixIt {
          $copy.insertAdjacentHTML('afterbegin', '<i class="fa-regular fa-copy fa-fw" aria-hidden="true"></i>');
          $copy.classList.add('copy');
          // remove the leading and trailing whitespace of the code string
-          const code = $code.innerText.trim();
-          if (this.config.code.maxShownLines < 0 || code.split('\n').length < this.config.code.maxShownLines + 2) {
+          let code = $code.innerText.trim();
+          // in the details element, the code string cannot be gotten directly.
+          if ($chroma.closest('details') !== null) {
+            const _tempEl = document.createElement('div');
+            _tempEl.appendChild($code.cloneNode(true));
+            code = _tempEl.innerText.trim();
+          }
+          const forceOpen = $chroma.parentElement.dataset.open ? JSON.parse($chroma.parentElement.dataset.open) : void 0;
+          if (forceOpen ?? (this.config.code.maxShownLines < 0 || code.split('\n').length < this.config.code.maxShownLines + 2)) {
            $chroma.classList.add('open');
          }
          $copy.title = this.config.code.copyTitle;
          $copy.addEventListener('click', () => {
-            navigator.clipboard.writeText(code).then(() => {
+            this.util.copyText(code).then(() => {
              this.util.animateCSS($code, 'animate__flash');
            }, () => {
              console.error('Clipboard write failed!', 'Your browser does not support clipboard API!');
@@ -451,8 +518,8 @@ class FixIt {
    });
  }

-  initTable() {
-    this.util.forEach(document.querySelectorAll('.content table'), ($table) => {
+  initTable(target = document) {
+    this.util.forEach(target.querySelectorAll('.content table'), ($table) => {
      const $wrapper = document.createElement('div');
      $wrapper.className = 'table-wrapper';
      $table.parentElement.replaceChild($wrapper, $table);
@@ -460,20 +527,23 @@ class FixIt {
    });
  }

+  /**
+   * init simple copy code when there is no code header
+   * https://github.com/github/clipboard-copy-element
+   * @param {ELement} singleCode single code block
+   */
+  initCopyCode(singleCode) {
+    // TODO
+  }
+
  /**
   * init table of contents
   */
  initToc() {
-    let $tocCore = document.getElementById('TableOfContents');
+    const $tocCore = document.getElementById('TableOfContents');
    if ($tocCore === null) {
      return;
    }
-    // It's a dirty hack to fix the bug of APlayer, see https://github.com/hugo-fixit/FixIt/issues/292
-    if (typeof APlayer === 'function') {
-      const $newTocCore = $tocCore.cloneNode(true);
-      $tocCore.parentElement.replaceChild($newTocCore, $tocCore);
-      $tocCore = $newTocCore;
-    }
    if (document.getElementById('toc-static').dataset.kept === 'true' || this.util.isTocStatic()) {
      const $tocContentStatic = document.getElementById('toc-content-static');
      if ($tocCore.parentElement !== $tocContentStatic) {
@@ -544,30 +614,59 @@ class FixIt {
    }, false);
  }

-  initMath() {
-    if (this.config.math) {
-      renderMathInElement(document.body, this.config.math);
+  /**
+   * It's a dirty hack to fix the bug of APlayer and smoothScroll. 
+   * see https://github.com/hugo-fixit/FixIt/issues/292
+   */
+  fixTocScroll() {
+    if (typeof APlayer === 'function') {
+      // remove APlayer click event listener of the toc link
+      let $tocCore = document.getElementById('TableOfContents');
+      if ($tocCore) {
+        const $newTocCore = $tocCore.cloneNode(true);
+        $tocCore.parentElement.replaceChild($newTocCore, $tocCore);
+        $tocCore = $newTocCore;
+      }
+      // remove APlayer click event listener of the heading mark
+      this.util.forEach(document.querySelectorAll('.heading-mark'), ($headingMark) => {
+        const $newHeadingMark = $headingMark.cloneNode(true);
+        $headingMark.parentElement.replaceChild($newHeadingMark, $headingMark);
+      });
    }
  }

-  switchMermaidTheme(theme) {
-    const $mermaidElements = document.getElementsByClassName('mermaid');
-    if ($mermaidElements.length) {
-      // TODO perf
-      const themes = this.config.mermaid.themes ?? ['default', 'dark', 'neutral'];
-      mermaid.initialize({ startOnLoad: false, theme: theme ?? (this.isDark ? themes[1] : themes[0]), securityLevel: 'loose' });
-      this.util.forEach($mermaidElements, $mermaid => {
-        mermaid.render('svg-' + $mermaid.id, this.data[$mermaid.id], svgCode => {
-          $mermaid.innerHTML = svgCode;
-        }, $mermaid);
-      });
+  initMath(target = document.body) {
+    if (this.config.math) {
+      renderMathInElement(target, this.config.math);
    }
-  };
+  }

  initMermaid() {
-    this.switchMermaidTheme();
-    this.switchThemeEventSet.add(() => { this.switchMermaidTheme(); });
-    this.beforeprintEventSet.add(() => { this.switchMermaidTheme('neutral'); });
+    if (!this.config.mermaid) {
+      return;
+    }
+    const _initializeAndRun = () => {
+      const themes = this.config.mermaid.themes ?? ['default', 'dark'];
+      window.mermaid.initialize({
+        securityLevel: 'loose',
+        startOnLoad: false,
+        theme: this.isDark ? themes[1] : themes[0],
+      });
+      window.mermaid.run()
+    }
+    _initializeAndRun()
+    this.switchThemeEventSet.add(() => {
+      // Reinitialize and run mermaid when theme changes.
+      this.util.forEach(document.querySelectorAll('.mermaid[data-processed]'), ($mermaid) => {
+        $mermaid.dataset.processed = ''
+        $mermaid.innerHTML = ''
+        $mermaid.appendChild($mermaid.nextElementSibling.content.cloneNode(true))
+      })
+      _initializeAndRun()
+    });
+    this.beforeprintEventSet.add(() => { 
+      // Set the theme to neutral when printing.
+    });
  }

  initEcharts() {
@@ -582,11 +681,16 @@ class FixIt {
        this._echartsArr[i].dispose();
      }
      this._echartsArr = [];
+      const stagingDOM = this.util.getStagingDOM()
      this.util.forEach(document.getElementsByClassName('echarts'), ($echarts) => {
-        const chart = echarts.init($echarts, this.isDark ? 'dark' : 'light', { renderer: 'svg' });
-        chart.setOption(JSON.parse(this.data[$echarts.id]));
-        this._echartsArr.push(chart);
+        if ($echarts.nextElementSibling.tagName === 'TEMPLATE') {
+          const chart = echarts.init($echarts, this.isDark ? 'dark' : 'light', { renderer: 'svg' });
+          stagingDOM.stage($echarts.nextElementSibling.content.cloneNode(true));
+          chart.setOption(stagingDOM.contentAsJson());
+          this._echartsArr.push(chart);
+        }
      });
+      stagingDOM.destroy();
    });
    this.switchThemeEventSet.add(this._echartsOnSwitchTheme);
    this._echartsOnSwitchTheme();
@@ -600,11 +704,13 @@ class FixIt {

  initMapbox() {
    if (this.config.mapbox) {
-      mapboxgl.accessToken = this.config.mapbox.accessToken;
-      mapboxgl.setRTLTextPlugin(this.config.mapbox.RTLTextPlugin);
-      this._mapboxArr = this._mapboxArr || [];
-      this.util.forEach(document.getElementsByClassName('mapbox'), ($mapbox) => {
-        const { lng, lat, zoom, lightStyle, darkStyle, marked, navigation, geolocate, scale, fullscreen } = this.data[$mapbox.id];
+      if (!mapboxgl.accessToken) {
+        mapboxgl.accessToken = this.config.mapbox.accessToken;
+        mapboxgl.setRTLTextPlugin(this.config.mapbox.RTLTextPlugin);
+        this._mapboxArr = this._mapboxArr || [];
+      }
+      this.util.forEach(document.querySelectorAll('.mapbox:empty'), ($mapbox) => {
+        const { lng, lat, zoom, lightStyle, darkStyle, marked, markers, navigation, geolocate, scale, fullscreen } = JSON.parse($mapbox.dataset.options);
        const mapbox = new mapboxgl.Map({
          container: $mapbox,
          center: [lng, lat],
@@ -616,6 +722,17 @@ class FixIt {
        if (marked) {
          new mapboxgl.Marker().setLngLat([lng, lat]).addTo(mapbox);
        }
+        const markerArray = typeof markers === 'string' ? JSON.parse(markers) : markers;
+        if (Array.isArray(markerArray) && markerArray.length > 0) {
+          markerArray.forEach(marker => {
+            const { lng: markerLng, lat: markerLat, description } = marker;
+            const popup = new mapboxgl.Popup({ offset: 25 }).setText(description); 
+            new mapboxgl.Marker()
+              .setLngLat([markerLng, markerLat])
+              .setPopup(popup)
+              .addTo(mapbox);
+          });
+        }
        if (navigation) {
          mapbox.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
        }
@@ -643,7 +760,7 @@ class FixIt {
      this._mapboxOnSwitchTheme = this._mapboxOnSwitchTheme || (() => {
        this.util.forEach(this._mapboxArr, (mapbox) => {
          const $mapbox = mapbox.getContainer();
-          const { lightStyle, darkStyle } = this.data[$mapbox.id];
+          const { lightStyle, darkStyle } = JSON.parse($mapbox.dataset.options);
          mapbox.setStyle(this.isDark ? darkStyle : lightStyle);
          mapbox.addControl(new MapboxLanguage());
        });
@@ -652,31 +769,52 @@ class FixIt {
    }
  }

-  initTypeit() {
+  initTypeit(target = document) {
    if (this.config.typeit) {
      const typeitConfig = this.config.typeit;
      const speed = typeitConfig.speed || 100;
      const cursorSpeed = typeitConfig.cursorSpeed || 1000;
      const cursorChar = typeitConfig.cursorChar || '|';
      const loop = typeitConfig.loop ?? false;
-      Object.values(typeitConfig.data).forEach((group) => {
+      // divide them into different groups according to the data-group attribute value of the element
+      // results in an object like {group1: [ele1, ele2], group2: [ele3, ele4]}
+      const typeitElements = target.querySelectorAll('.typeit')
+      const groupMap = Array.from(typeitElements).reduce((acc, ele) => {
+        const group = ele.dataset.group || ele.id || Math.random().toString(36).substring(2);
+        acc[group] = acc[group] || [];
+        acc[group].push(ele);
+        return acc;
+      }, {});
+      const stagingDOM = this.util.getStagingDOM()
+
+      Object.values(groupMap).forEach((group) => {
        const typeone = (i) => {
-          const id = group[i];
-          const shortcodeLoop = document.querySelector(`#${id}`).parentElement.dataset.loop;
-          const instance = new TypeIt(`#${id}`, {
-            strings: this.data[id],
-            speed: speed,
+          const typeitElement = group[i];
+          const singleData = typeitElement.dataset;
+          stagingDOM.stage(typeitElement.querySelector('template').content.cloneNode(true));
+          // for shortcodes usage
+          let targetEle = typeitElement.firstElementChild
+          // for system elements usage
+          if (typeitElement.firstElementChild.tagName === 'TEMPLATE') {
+            typeitElement.innerHTML = '';
+            targetEle = typeitElement
+          }
+          // create a new instance of TypeIt for each element
+          const instance = new TypeIt(targetEle, {
+            strings: stagingDOM.$el.querySelector('pre')?.innerHTML || stagingDOM.contentAsHtml(),
+            speed: Number(singleData.speed) >= 0 ? Number(singleData.speed) : speed,
            lifeLike: true,
-            cursorSpeed: cursorSpeed,
-            cursorChar: cursorChar,
+            cursorSpeed: Number(singleData.cursorSpeed) >= 0 ? Number(singleData.cursorSpeed) : cursorSpeed,
+            cursorChar: singleData.cursorChar || cursorChar,
            waitUntilVisible: true,
-            loop: shortcodeLoop ? JSON.parse(shortcodeLoop) : loop,
+            loop: singleData.loop ? singleData.loop === 'true' : loop,
            afterComplete: () => {
+              const duration = Number(singleData.duration ?? typeitConfig.duration);
              if (i === group.length - 1) {
-                if (typeitConfig.duration >= 0) {
+                if (duration >= 0) {
                  window.setTimeout(() => {
                    instance.destroy();
-                  }, typeitConfig.duration);
+                  }, duration);
                }
                return;
              }
@@ -687,6 +825,7 @@ class FixIt {
        };
        typeone(0);
      });
+      stagingDOM.destroy();
    }
  }

@@ -813,22 +952,26 @@ class FixIt {
      const giscusConfig = this.config.comment.giscus;
      this._giscusOnSwitchTheme = this._giscusOnSwitchTheme || (() => {
        const message = { setConfig: { theme: this.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme }};
-        document.querySelector('.giscus-frame')?.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+        document.querySelector('.giscus-frame')?.contentWindow.postMessage({ giscus: message }, giscusConfig.origin);
      });
      this.switchThemeEventSet.add(this._giscusOnSwitchTheme);
-      this.giscus2parentMsg = window.addEventListener('message', (event) => {
+      // gicuss to parent message
+      this._messageListener = (event) => {
+        if (event.origin !== giscusConfig.origin) return;
        const $script = document.querySelector('#giscus>script');
        if ($script){
-          this._giscusOnSwitchTheme();
          $script.parentElement.removeChild($script);
        }
-      }, { once: true });
+        this._giscusOnSwitchTheme()
+        window.removeEventListener('message', this._messageListener, false);
+      };
+      window.addEventListener('message', this._messageListener, false);
      return;
    }
  }

  initCookieconsent() {
-    this.config.cookieconsent && cookieconsent.initialise(this.config.cookieconsent);
+    this.config.cookieconsent && window.cookieconsent?.initialise(this.config.cookieconsent);
  }

  getSiteTime = () => {
@@ -901,6 +1044,8 @@ class FixIt {
    }
    const selector = this.config.pangu.selector;
    if (selector) {
+      // to avoid extra spaces for extended Markdown syntax fraction in Chinese
+      pangu.ignoredTags = /^(script|code|pre|textarea|sup|sub)$/i;
      if (selector.startsWith('#')) {
        pangu.spacingElementById(selector.slice(1));
      } else if (selector.startsWith('.')) {
@@ -919,19 +1064,36 @@ class FixIt {
        this.initTwemoji();
        this.initDetails();
        this.initLightGallery();
-        this.initHighlight();
+        this.initCodeWrapper();
        this.initTable();
        this.initMath();
        this.initMermaid();
        this.initEcharts();
        this.initTypeit();
        this.initMapbox();
-        this.util.forEach(document.querySelectorAll('.encrypted-hidden'), ($element) => {
-          $element.classList.replace('encrypted-hidden', 'decrypted-shown');
-        });
        this.initToc();
        this.initTocListener();
        this.initPangu();
+        this.fixTocScroll();
+        this.util.forEach(document.querySelectorAll('.encrypted-hidden'), ($element) => {
+          $element.classList.replace('encrypted-hidden', 'decrypted-shown');
+        });
+      },
+      partialDecrypted: ($content) => {
+        this.initTwemoji($content);
+        this.initDetails($content);
+        this.initLightGallery();
+        this.initCodeWrapper();
+        this.initTable($content);
+        this.initMath($content);
+        this.initMermaid();
+        this.initEcharts();
+        this.initTypeit($content);
+        this.initMapbox();
+        this.initPangu();
+        this.util.forEach($content.querySelectorAll('.encrypted-hidden'), ($element) => {
+          $element.classList.replace('encrypted-hidden', 'decrypted-shown');
+        });
      },
      reset: () => {
        this.util.forEach(document.querySelectorAll('.decrypted-shown'), ($element) => {
@@ -939,39 +1101,7 @@ class FixIt {
        });
      }
    });
-    if (this.config.encryption?.shortcode) {
-      this.decryptor.addEventListener('decrypted', () => {
-        this.decryptor.initShortcodes();
-      })
-      this.decryptor.initShortcodes();
-    }
-    this.config.encryption?.all && this.decryptor.init();
-  }
-
-  initMDevtools() {
-    const type = this.config?.mDevtools;
-    if (typeof window.orientation === 'undefined') {
-      return;
-    }
-    if (type === 'vConsole') {
-      const vConsole = new VConsole({
-        target: '.widgets',
-        theme: this.isDark ? 'dark' : 'light'
-      });
-      this._vConsoleOnSwitchTheme = this._vConsoleOnSwitchTheme || (() => {
-        vConsole.setOption('theme', this.isDark ? 'dark' : 'light');
-      });
-      this.switchThemeEventSet.add(this._vConsoleOnSwitchTheme);
-    }
-    if(type === 'eruda') {
-      eruda.init({
-        defaults: { theme: this.isDark ? 'Dark' : 'Light' }
-      });
-      this._erudaOnSwitchTheme = this._erudaOnSwitchTheme || (() => {
-        eruda.util.evalCss.setTheme(this.isDark ? 'Dark' : 'Light');
-      });
-      this.switchThemeEventSet.add(this._erudaOnSwitchTheme);
-    }
+    this.decryptor.init(this.config.encryption);
  }

  initAutoMark() {
@@ -979,9 +1109,9 @@ class FixIt {
      return;
    }
    window.addEventListener('beforeunload', () => {
-      window.localStorage?.setItem(`fixit-bookmark/#${location.pathname}`, this.util.getScrollTop());
+      window.sessionStorage?.setItem(`fixit-bookmark/#${location.pathname}`, this.util.getScrollTop());
    });
-    const scrollTop = Number(window.localStorage?.getItem(`fixit-bookmark/#${location.pathname}`));
+    const scrollTop = Number(window.sessionStorage?.getItem(`fixit-bookmark/#${location.pathname}`));
    // If the page opens with a specific hash, just jump out
    if (scrollTop && location.hash === '') {
      window.scrollTo({ 
@@ -1021,13 +1151,26 @@ class FixIt {
    this.scrollEventSet.add(_closeRewardExclude);
  }

+  initPostChatUser() {
+    if (!window.postChatUser || !postChatConfig || postChatConfig.userMode === 'magic') {
+      return;
+    }
+    postChat_theme = this.isDark ? 'dark' : 'light';
+    this.switchThemeEventSet.add((isDark) => {
+      const targetFrame = document.getElementById("postChat_iframeContainer")
+      if (targetFrame) {
+        window.postChatUser.setPostChatTheme(isDark ? 'dark' : 'light');
+      } else {
+        postChat_theme  = isDark ? 'dark' : 'light';
+      }
+    });
+  }
+
  onScroll() {
    const $headers = [];
    const ACCURACY = 20;
    const $fixedButtons = document.querySelector('.fixed-buttons');
    const $backToTop = document.querySelector('.back-to-top');
-    const $readingProgressBar = document.querySelector('.reading-progress-bar');
-    let scrollTimer = void 0;
    if (document.body.dataset.headerDesktop === 'auto') {
      $headers.push(document.getElementById('header-desktop'));
    }
@@ -1046,12 +1189,6 @@ class FixIt {
      const $mask = document.getElementById('mask');
      this.newScrollTop = this.util.getScrollTop();
      const scroll = this.newScrollTop - this.oldScrollTop;
-      // body scrollbar style
-      document.body.toggleAttribute('data-scroll', true);
-      scrollTimer && window.clearTimeout(scrollTimer);
-      scrollTimer = window.setTimeout(() => {
-        document.body.toggleAttribute('data-scroll');
-      }, 500);
      // header animation
      this.util.forEach($headers, ($header) => {
        if (scroll > ACCURACY) {
@@ -1066,9 +1203,6 @@ class FixIt {
      });
      const contentHeight = document.body.scrollHeight - window.innerHeight;
      const scrollPercent = Math.max(Math.min(100 * Math.max(this.newScrollTop, 0) / contentHeight, 100), 0);
-      if ($readingProgressBar) {
-        $readingProgressBar.style.setProperty('--progress', `${scrollPercent.toFixed(2)}%`);
-      }
      // whether to show fixed buttons
      if ($fixedButtons) {
        if (scrollPercent > 1) {
@@ -1101,7 +1235,6 @@ class FixIt {
            event();
          }
          this.initToc();
-          this.switchMermaidTheme();
          this.initSearch();

          const isMobile = this.util.isMobile()
@@ -1142,11 +1275,12 @@ class FixIt {
    try {
      if (this.config.encryption) {
        this.initFixItDecryptor();
-      } else if (!this.config.encryption?.all) {
+      }
+      if (!this.config.encryption?.all) {
        this.initTwemoji();
        this.initDetails();
        this.initLightGallery();
-        this.initHighlight();
+        this.initCodeWrapper();
        this.initTable();
        this.initMath();
        this.initMermaid();
@@ -1165,15 +1299,16 @@ class FixIt {
      this.initSiteTime();
      this.initServiceWorker();
      this.initWatermark();
-      this.initMDevtools();
      this.initAutoMark();
      this.initReward();
+      this.initPostChatUser();

      window.setTimeout(() => {
        this.initComment();
        if (!this.config.encryption?.all) {
          this.initToc();
          this.initTocListener();
+          this.fixTocScroll();
        }
        this.onScroll();
        this.onResize();
@@ -55,4 +55,60 @@ export default class Util {
      behavior: 'smooth'
    });
  }
+
+  /**
+   * get a hidden element for temporary use
+   * @returns {Object} { $el: Element, destroy: Function }
+   */
+  getStagingDOM() {
+    const stagingElement = document.createElement('div')
+    stagingElement.style.display = 'none';
+    stagingElement.dataset.stagingId = Math.random().toString(36).slice(2);
+    document.body.appendChild(stagingElement);
+
+    return {
+      $el: stagingElement,
+      stage(dom) {
+        stagingElement.innerHTML = '';
+        stagingElement.appendChild(dom);
+      },
+      contentAsHtml() {
+        return stagingElement.innerHTML;
+      },
+      contentAsText() {
+        return stagingElement.innerText;
+      },
+      contentAsJson() {
+        return JSON.parse(stagingElement.innerHTML);
+      },
+      destroy() {
+        document.body.removeChild(stagingElement);
+      }
+    }
+  }
+
+  /**
+   * copy text to clipboard
+   * @param {String} text text to copy
+   * @returns {Promise} promise
+   */
+  copyText(text) {
+    if (navigator.clipboard) {
+      this.copyText = (text) => navigator.clipboard.writeText(text);
+      return this.copyText(text);
+    }
+    this.copyText = (text) => new Promise((resolve, reject) => {
+      const input = document.createElement('input');
+      input.value = text;
+      document.body.appendChild(input);
+      input.select();
+      if (document.execCommand('copy')) {
+        document.body.removeChild(input);
+        resolve();
+      } else {
+        reject();
+      }
+    });
+    return this.copyText(text); 
+  }
 }
@@ -1,23 +1,21 @@
 algoliasearch@4.20.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
-artalk@2.6.4 https://github.com/ArtalkJS/Artalk
+artalk@latest https://github.com/ArtalkJS/Artalk
 autocomplete-js@0.38.1 https://github.com/algolia/autocomplete
 cell-watermark@1.0.3 https://github.com/Lruihao/watermark
 cookieconsent@3.1.1 https://github.com/osano/cookieconsent
-crypto-js@4.1.1 https://github.com/brix/crypto-js
+crypto-js@4.2.0 https://github.com/brix/crypto-js
 echarts@5.3.3 https://github.com/apache/echarts
 TODO update emoji-data to 15.x
 emoji-data@14.0.0 https://github.com/iamcal/emoji-data
-eruda@3.0.1 https://github.com/liriliri/eruda
-fontawesome-free@6.4.2 https://github.com/FortAwesome/Font-Awesome
+fontawesome-free@6.7.1 https://github.com/FortAwesome/Font-Awesome
 fusejs@6.6.2 https://github.com/krisk/fuse
 gitalk@1.7.2 https://github.com/gitalk/gitalk
 instant.page@5.2.0 https://github.com/instantpage/instant.page
-katex@0.16.9 https://github.com/KaTeX/KaTeX
+katex@0.16.10 https://github.com/KaTeX/KaTeX
 lightgallery@2.7.2 https://github.com/sachinchoolur/lightgallery
 mapbox-gl@2.10.0 https://github.com/mapbox/mapbox-gl-js
-mermaid@9.4.3 https://github.com/mermaid-js/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 [archived]
@@ -26,7 +24,7 @@ sharer.js@0.5.1 https://github.com/ellisonleao/sharer.js
 simple-icons@9.19.0 https://github.com/simple-icons/simple-icons
 twemoji@14.0.2 https://github.com/twitter/twemoji
 twikoo@1.6.22 https://github.com/imaegoo/twikoo
-typeit@8.7.1 https://github.com/alexmacarthur/typeit
-valine@1.5.1 https://github.com/xCss/Valine
-vconsole@3.15.1 https://github.com/Tencent/vConsole
-waline@2.15.8 https://github.com/walinejs/waline
+typeit@8.8.4 https://github.com/alexmacarthur/typeit
+valine@1.5.2 https://github.com/xCss/Valine
+waline@3.4.1 https://github.com/walinejs/waline
+xxhash-wasm@1.0.2 https://github.com/jungomi/xxhash-wasm
@@ -48,14 +48,6 @@
  .aplayer-list {
    background-color: #212121;

-    &::-webkit-scrollbar-thumb {
-      background-color: #999;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: #bbb;
-    }
-
    li {
      color: #fff;
      border-top-color: #666;
@@ -1,268 +0,0 @@
-;(function (root, factory) {
-	if (typeof exports === "object") {
-		// CommonJS
-		module.exports = exports = factory(require("./core"));
-	}
-	else if (typeof define === "function" && define.amd) {
-		// AMD
-		define(["./core"], factory);
-	}
-	else {
-		// Global (browser)
-		factory(root.CryptoJS);
-	}
-}(this, function (CryptoJS) {
-
-	(function (Math) {
-	    // Shortcuts
-	    var C = CryptoJS;
-	    var C_lib = C.lib;
-	    var WordArray = C_lib.WordArray;
-	    var Hasher = C_lib.Hasher;
-	    var C_algo = C.algo;
-
-	    // Constants table
-	    var T = [];
-
-	    // Compute constants
-	    (function () {
-	        for (var i = 0; i < 64; i++) {
-	            T[i] = (Math.abs(Math.sin(i + 1)) * 0x100000000) | 0;
-	        }
-	    }());
-
-	    /**
-	     * MD5 hash algorithm.
-	     */
-	    var MD5 = C_algo.MD5 = Hasher.extend({
-	        _doReset: function () {
-	            this._hash = new WordArray.init([
-	                0x67452301, 0xefcdab89,
-	                0x98badcfe, 0x10325476
-	            ]);
-	        },
-
-	        _doProcessBlock: function (M, offset) {
-	            // Swap endian
-	            for (var i = 0; i < 16; i++) {
-	                // Shortcuts
-	                var offset_i = offset + i;
-	                var M_offset_i = M[offset_i];
-
-	                M[offset_i] = (
-	                    (((M_offset_i << 8)  | (M_offset_i >>> 24)) & 0x00ff00ff) |
-	                    (((M_offset_i << 24) | (M_offset_i >>> 8))  & 0xff00ff00)
-	                );
-	            }
-
-	            // Shortcuts
-	            var H = this._hash.words;
-
-	            var M_offset_0  = M[offset + 0];
-	            var M_offset_1  = M[offset + 1];
-	            var M_offset_2  = M[offset + 2];
-	            var M_offset_3  = M[offset + 3];
-	            var M_offset_4  = M[offset + 4];
-	            var M_offset_5  = M[offset + 5];
-	            var M_offset_6  = M[offset + 6];
-	            var M_offset_7  = M[offset + 7];
-	            var M_offset_8  = M[offset + 8];
-	            var M_offset_9  = M[offset + 9];
-	            var M_offset_10 = M[offset + 10];
-	            var M_offset_11 = M[offset + 11];
-	            var M_offset_12 = M[offset + 12];
-	            var M_offset_13 = M[offset + 13];
-	            var M_offset_14 = M[offset + 14];
-	            var M_offset_15 = M[offset + 15];
-
-	            // Working varialbes
-	            var a = H[0];
-	            var b = H[1];
-	            var c = H[2];
-	            var d = H[3];
-
-	            // Computation
-	            a = FF(a, b, c, d, M_offset_0,  7,  T[0]);
-	            d = FF(d, a, b, c, M_offset_1,  12, T[1]);
-	            c = FF(c, d, a, b, M_offset_2,  17, T[2]);
-	            b = FF(b, c, d, a, M_offset_3,  22, T[3]);
-	            a = FF(a, b, c, d, M_offset_4,  7,  T[4]);
-	            d = FF(d, a, b, c, M_offset_5,  12, T[5]);
-	            c = FF(c, d, a, b, M_offset_6,  17, T[6]);
-	            b = FF(b, c, d, a, M_offset_7,  22, T[7]);
-	            a = FF(a, b, c, d, M_offset_8,  7,  T[8]);
-	            d = FF(d, a, b, c, M_offset_9,  12, T[9]);
-	            c = FF(c, d, a, b, M_offset_10, 17, T[10]);
-	            b = FF(b, c, d, a, M_offset_11, 22, T[11]);
-	            a = FF(a, b, c, d, M_offset_12, 7,  T[12]);
-	            d = FF(d, a, b, c, M_offset_13, 12, T[13]);
-	            c = FF(c, d, a, b, M_offset_14, 17, T[14]);
-	            b = FF(b, c, d, a, M_offset_15, 22, T[15]);
-
-	            a = GG(a, b, c, d, M_offset_1,  5,  T[16]);
-	            d = GG(d, a, b, c, M_offset_6,  9,  T[17]);
-	            c = GG(c, d, a, b, M_offset_11, 14, T[18]);
-	            b = GG(b, c, d, a, M_offset_0,  20, T[19]);
-	            a = GG(a, b, c, d, M_offset_5,  5,  T[20]);
-	            d = GG(d, a, b, c, M_offset_10, 9,  T[21]);
-	            c = GG(c, d, a, b, M_offset_15, 14, T[22]);
-	            b = GG(b, c, d, a, M_offset_4,  20, T[23]);
-	            a = GG(a, b, c, d, M_offset_9,  5,  T[24]);
-	            d = GG(d, a, b, c, M_offset_14, 9,  T[25]);
-	            c = GG(c, d, a, b, M_offset_3,  14, T[26]);
-	            b = GG(b, c, d, a, M_offset_8,  20, T[27]);
-	            a = GG(a, b, c, d, M_offset_13, 5,  T[28]);
-	            d = GG(d, a, b, c, M_offset_2,  9,  T[29]);
-	            c = GG(c, d, a, b, M_offset_7,  14, T[30]);
-	            b = GG(b, c, d, a, M_offset_12, 20, T[31]);
-
-	            a = HH(a, b, c, d, M_offset_5,  4,  T[32]);
-	            d = HH(d, a, b, c, M_offset_8,  11, T[33]);
-	            c = HH(c, d, a, b, M_offset_11, 16, T[34]);
-	            b = HH(b, c, d, a, M_offset_14, 23, T[35]);
-	            a = HH(a, b, c, d, M_offset_1,  4,  T[36]);
-	            d = HH(d, a, b, c, M_offset_4,  11, T[37]);
-	            c = HH(c, d, a, b, M_offset_7,  16, T[38]);
-	            b = HH(b, c, d, a, M_offset_10, 23, T[39]);
-	            a = HH(a, b, c, d, M_offset_13, 4,  T[40]);
-	            d = HH(d, a, b, c, M_offset_0,  11, T[41]);
-	            c = HH(c, d, a, b, M_offset_3,  16, T[42]);
-	            b = HH(b, c, d, a, M_offset_6,  23, T[43]);
-	            a = HH(a, b, c, d, M_offset_9,  4,  T[44]);
-	            d = HH(d, a, b, c, M_offset_12, 11, T[45]);
-	            c = HH(c, d, a, b, M_offset_15, 16, T[46]);
-	            b = HH(b, c, d, a, M_offset_2,  23, T[47]);
-
-	            a = II(a, b, c, d, M_offset_0,  6,  T[48]);
-	            d = II(d, a, b, c, M_offset_7,  10, T[49]);
-	            c = II(c, d, a, b, M_offset_14, 15, T[50]);
-	            b = II(b, c, d, a, M_offset_5,  21, T[51]);
-	            a = II(a, b, c, d, M_offset_12, 6,  T[52]);
-	            d = II(d, a, b, c, M_offset_3,  10, T[53]);
-	            c = II(c, d, a, b, M_offset_10, 15, T[54]);
-	            b = II(b, c, d, a, M_offset_1,  21, T[55]);
-	            a = II(a, b, c, d, M_offset_8,  6,  T[56]);
-	            d = II(d, a, b, c, M_offset_15, 10, T[57]);
-	            c = II(c, d, a, b, M_offset_6,  15, T[58]);
-	            b = II(b, c, d, a, M_offset_13, 21, T[59]);
-	            a = II(a, b, c, d, M_offset_4,  6,  T[60]);
-	            d = II(d, a, b, c, M_offset_11, 10, T[61]);
-	            c = II(c, d, a, b, M_offset_2,  15, T[62]);
-	            b = II(b, c, d, a, M_offset_9,  21, T[63]);
-
-	            // Intermediate hash value
-	            H[0] = (H[0] + a) | 0;
-	            H[1] = (H[1] + b) | 0;
-	            H[2] = (H[2] + c) | 0;
-	            H[3] = (H[3] + d) | 0;
-	        },
-
-	        _doFinalize: function () {
-	            // Shortcuts
-	            var data = this._data;
-	            var dataWords = data.words;
-
-	            var nBitsTotal = this._nDataBytes * 8;
-	            var nBitsLeft = data.sigBytes * 8;
-
-	            // Add padding
-	            dataWords[nBitsLeft >>> 5] |= 0x80 << (24 - nBitsLeft % 32);
-
-	            var nBitsTotalH = Math.floor(nBitsTotal / 0x100000000);
-	            var nBitsTotalL = nBitsTotal;
-	            dataWords[(((nBitsLeft + 64) >>> 9) << 4) + 15] = (
-	                (((nBitsTotalH << 8)  | (nBitsTotalH >>> 24)) & 0x00ff00ff) |
-	                (((nBitsTotalH << 24) | (nBitsTotalH >>> 8))  & 0xff00ff00)
-	            );
-	            dataWords[(((nBitsLeft + 64) >>> 9) << 4) + 14] = (
-	                (((nBitsTotalL << 8)  | (nBitsTotalL >>> 24)) & 0x00ff00ff) |
-	                (((nBitsTotalL << 24) | (nBitsTotalL >>> 8))  & 0xff00ff00)
-	            );
-
-	            data.sigBytes = (dataWords.length + 1) * 4;
-
-	            // Hash final blocks
-	            this._process();
-
-	            // Shortcuts
-	            var hash = this._hash;
-	            var H = hash.words;
-
-	            // Swap endian
-	            for (var i = 0; i < 4; i++) {
-	                // Shortcut
-	                var H_i = H[i];
-
-	                H[i] = (((H_i << 8)  | (H_i >>> 24)) & 0x00ff00ff) |
-	                       (((H_i << 24) | (H_i >>> 8))  & 0xff00ff00);
-	            }
-
-	            // Return final computed hash
-	            return hash;
-	        },
-
-	        clone: function () {
-	            var clone = Hasher.clone.call(this);
-	            clone._hash = this._hash.clone();
-
-	            return clone;
-	        }
-	    });
-
-	    function FF(a, b, c, d, x, s, t) {
-	        var n = a + ((b & c) | (~b & d)) + x + t;
-	        return ((n << s) | (n >>> (32 - s))) + b;
-	    }
-
-	    function GG(a, b, c, d, x, s, t) {
-	        var n = a + ((b & d) | (c & ~d)) + x + t;
-	        return ((n << s) | (n >>> (32 - s))) + b;
-	    }
-
-	    function HH(a, b, c, d, x, s, t) {
-	        var n = a + (b ^ c ^ d) + x + t;
-	        return ((n << s) | (n >>> (32 - s))) + b;
-	    }
-
-	    function II(a, b, c, d, x, s, t) {
-	        var n = a + (c ^ (b | ~d)) + x + t;
-	        return ((n << s) | (n >>> (32 - s))) + b;
-	    }
-
-	    /**
-	     * Shortcut function to the hasher's object interface.
-	     *
-	     * @param {WordArray|string} message The message to hash.
-	     *
-	     * @return {WordArray} The hash.
-	     *
-	     * @static
-	     *
-	     * @example
-	     *
-	     *     var hash = CryptoJS.MD5('message');
-	     *     var hash = CryptoJS.MD5(wordArray);
-	     */
-	    C.MD5 = Hasher._createHelper(MD5);
-
-	    /**
-	     * Shortcut function to the HMAC's object interface.
-	     *
-	     * @param {WordArray|string} message The message to hash.
-	     * @param {WordArray|string} key The secret key.
-	     *
-	     * @return {WordArray} The HMAC.
-	     *
-	     * @static
-	     *
-	     * @example
-	     *
-	     *     var hmac = CryptoJS.HmacMD5(message, key);
-	     */
-	    C.HmacMD5 = Hasher._createHmacHelper(MD5);
-	}(Math));
-
-
-	return CryptoJS.MD5;
-
-}));
@@ -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(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var i=r[e];if(void 0!==i)return i.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.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 i={};return function(){n.d(i,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,i=0,a=e.length;n<t.length;){var o=t[n];if(i<=0&&t.slice(n,n+a)===e)return n;"\\"===o?n++:"{"===o?i++:"}"===o&&i--,n++}return-1},a=/^\\begin{/,o=function(e,t){for(var n,i=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(i.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=a.test(d)?d:e.slice(t[l].left.length,n);i.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&i.push({type:"text",data:e}),i},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var i=document.createDocumentFragment(),a=0;a<n.length;a++)if("text"===n[a].type)i.appendChild(document.createTextNode(n[a].data));else{var l=document.createElement("span"),d=n[a].data;r.displayMode=n[a].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[a].data+"` with ",e),i.appendChild(document.createTextNode(n[a].rawData));continue}i.appendChild(l)}return i},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var i=t.childNodes[n];if(3===i.nodeType){for(var a=i.textContent,o=i.nextSibling,d=0;o&&o.nodeType===Node.TEXT_NODE;)a+=o.textContent,o=o.nextSibling,d++;var s=l(a,r);if(s){for(var f=0;f<d;f++)i.nextSibling.remove();n+=s.childNodes.length-1,t.replaceChild(s,i)}else n+=d}else 1===i.nodeType&&function(){var t=" "+i.className+" ";-1===r.ignoredTags.indexOf(i.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(i,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)}}(),i=i.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}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};return function(){r.d(o,{default:function(){return d}});var e=r(771),t=r.n(e);const n=function(e,t,n){let r=n,o=0;const i=e.length;for(;r<t.length;){const n=t[r];if(o<=0&&t.slice(r,r+i)===e)return r;"\\"===n?r++:"{"===n?o++:"}"===n&&o--,r++}return-1},i=/^\\begin{/;var a=function(e,t){let r;const o=[],a=new RegExp("("+t.map((e=>e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"))).join("|")+")");for(;r=e.search(a),-1!==r;){r>0&&(o.push({type:"text",data:e.slice(0,r)}),e=e.slice(r));const a=t.findIndex((t=>e.startsWith(t.left)));if(r=n(t[a].right,e,t[a].left.length),-1===r)break;const l=e.slice(0,r+t[a].right.length),s=i.test(l)?l:e.slice(t[a].left.length,r);o.push({type:"math",data:s,rawData:l,display:t[a].display}),e=e.slice(r+t[a].right.length)}return""!==e&&o.push({type:"text",data:e}),o};const l=function(e,n){const r=a(e,n.delimiters);if(1===r.length&&"text"===r[0].type)return null;const o=document.createDocumentFragment();for(let e=0;e<r.length;e++)if("text"===r[e].type)o.appendChild(document.createTextNode(r[e].data));else{const i=document.createElement("span");let a=r[e].data;n.displayMode=r[e].display;try{n.preProcess&&(a=n.preProcess(a)),t().render(a,i,n)}catch(i){if(!(i instanceof t().ParseError))throw i;n.errorCallback("KaTeX auto-render: Failed to parse `"+r[e].data+"` with ",i),o.appendChild(document.createTextNode(r[e].rawData));continue}o.appendChild(i)}return o},s=function(e,t){for(let n=0;n<e.childNodes.length;n++){const r=e.childNodes[n];if(3===r.nodeType){let o=r.textContent,i=r.nextSibling,a=0;for(;i&&i.nodeType===Node.TEXT_NODE;)o+=i.textContent,i=i.nextSibling,a++;const s=l(o,t);if(s){for(let e=0;e<a;e++)r.nextSibling.remove();n+=s.childNodes.length-1,e.replaceChild(s,r)}else n+=a}else if(1===r.nodeType){const e=" "+r.className+" ";-1===t.ignoredTags.indexOf(r.nodeName.toLowerCase())&&t.ignoredClasses.every((t=>-1===e.indexOf(" "+t+" ")))&&s(r,t)}}};var d=function(e,t){if(!e)throw new Error("No element provided to render");const n={};for(const e in t)t.hasOwnProperty(e)&&(n[e]=t[e]);n.delimiters=n.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}],n.ignoredTags=n.ignoredTags||["script","noscript","style","textarea","pre","code","option"],n.ignoredClasses=n.ignoredClasses||[],n.errorCallback=n.errorCallback||console.error,n.macros=n.macros||{},s(e,n)}}(),o=o.default}()}));
@@ -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(){"use strict";var e={},t={inline:["$","$"],display:["$$","$$"]};var n=function(e,n){void 0===n&&(n=t);for(var r=e.querySelectorAll(".katex-mathml + .katex-html"),a=0;a<r.length;a++){var o=r[a];o.remove?o.remove():o.parentNode&&o.parentNode.removeChild(o)}for(var i=e.querySelectorAll(".katex-mathml"),l=0;l<i.length;l++){var f=i[l],c=f.querySelector("annotation");c&&(f.replaceWith?f.replaceWith(c):f.parentNode&&f.parentNode.replaceChild(c,f),c.innerHTML=n.inline[0]+c.innerHTML+n.inline[1])}for(var d=e.querySelectorAll(".katex-display annotation"),s=0;s<d.length;s++){var p=d[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};function r(e){var t=e instanceof Element?e:e.parentElement;return t&&t.closest(".katex")}return document.addEventListener("copy",(function(e){var t=window.getSelection();if(!t.isCollapsed&&e.clipboardData){var a=e.clipboardData,o=t.getRangeAt(0),i=r(o.startContainer);i&&o.setStartBefore(i);var l=r(o.endContainer);l&&o.setEndAfter(l);var f=o.cloneContents();if(f.querySelector(".katex-mathml")){var c=Array.prototype.map.call(f.childNodes,(function(e){return e instanceof Text?e.textContent:e.outerHTML})).join("");a.setData("text/html",c),a.setData("text/plain",n(f).textContent),e.preventDefault()}}})),e=e.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 o in n)("object"==typeof exports?exports:e)[o]=n[o]}}("undefined"!=typeof self?self:this,(function(){return function(){"use strict";var e={};const t={inline:["$","$"],display:["$$","$$"]};var n=function(e,n){void 0===n&&(n=t);const o=e.querySelectorAll(".katex-mathml + .katex-html");for(let e=0;e<o.length;e++){const t=o[e];t.remove?t.remove():t.parentNode&&t.parentNode.removeChild(t)}const r=e.querySelectorAll(".katex-mathml");for(let e=0;e<r.length;e++){const t=r[e],o=t.querySelector("annotation");o&&(t.replaceWith?t.replaceWith(o):t.parentNode&&t.parentNode.replaceChild(o,t),o.innerHTML=n.inline[0]+o.innerHTML+n.inline[1])}const l=e.querySelectorAll(".katex-display annotation");for(let e=0;e<l.length;e++){const t=l[e];t.innerHTML=n.display[0]+t.innerHTML.substr(n.inline[0].length,t.innerHTML.length-n.inline[0].length-n.inline[1].length)+n.display[1]}return e};function o(e){const t=e instanceof Element?e:e.parentElement;return t&&t.closest(".katex")}return document.addEventListener("copy",(function(e){const t=window.getSelection();if(t.isCollapsed||!e.clipboardData)return;const r=e.clipboardData,l=t.getRangeAt(0),i=o(l.startContainer);i&&l.setStartBefore(i);const a=o(l.endContainer);a&&l.setEndAfter(a);const s=l.cloneContents();if(!s.querySelector(".katex-mathml"))return;const c=Array.prototype.map.call(s.childNodes,(e=>e instanceof Text?e.textContent:e.outerHTML)).join("");r.setData("text/html",c),r.setData("text/plain",n(s).textContent),e.preventDefault()})),e=e.default}()}));
@@ -1,330 +0,0 @@
-# Contributors-Readme
-## [Contributors](https://github.com/hugo-fixit/FixIt/graphs/contributors)
-
-<!-- readme: contributors,d-baer -start -->
-<table>
-<tr>
-    <td align="center">
-        <a href="https://github.com/Lruihao">
-            <img src="https://avatars.githubusercontent.com/u/33419593?v=4" width="100;" alt="Lruihao"/>
-            <br />
-            <sub><b>Cell</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/dillonzq">
-            <img src="https://avatars.githubusercontent.com/u/30786232?v=4" width="100;" alt="dillonzq"/>
-            <br />
-            <sub><b>Dillon</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/Fastbyte01">
-            <img src="https://avatars.githubusercontent.com/u/16869546?v=4" width="100;" alt="Fastbyte01"/>
-            <br />
-            <sub><b>Giuseppe Pignataro</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/Programazing">
-            <img src="https://avatars.githubusercontent.com/u/11393826?v=4" width="100;" alt="Programazing"/>
-            <br />
-            <sub><b>Christopher C. Johnson</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/astropenguin">
-            <img src="https://avatars.githubusercontent.com/u/13254278?v=4" width="100;" alt="astropenguin"/>
-            <br />
-            <sub><b>Akio Taniguchi</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/DaveA-W">
-            <img src="https://avatars.githubusercontent.com/u/6415842?v=4" width="100;" alt="DaveA-W"/>
-            <br />
-            <sub><b>Dave A-W</b></sub>
-        </a>
-    </td></tr>
-<tr>
-    <td align="center">
-        <a href="https://github.com/yureiita">
-            <img src="https://avatars.githubusercontent.com/u/26035759?v=4" width="100;" alt="yureiita"/>
-            <br />
-            <sub><b>Abdul Halim Daud</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/psi59">
-            <img src="https://avatars.githubusercontent.com/u/15508203?v=4" width="100;" alt="psi59"/>
-            <br />
-            <sub><b>Sangil Park</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/Fedomn">
-            <img src="https://avatars.githubusercontent.com/u/6177727?v=4" width="100;" alt="Fedomn"/>
-            <br />
-            <sub><b>Frank Ma</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/Mejituu">
-            <img src="https://avatars.githubusercontent.com/u/36153418?v=4" width="100;" alt="Mejituu"/>
-            <br />
-            <sub><b>Mejituu</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/ctj12461">
-            <img src="https://avatars.githubusercontent.com/u/42143810?v=4" width="100;" alt="ctj12461"/>
-            <br />
-            <sub><b>Justin Chen</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/edte">
-            <img src="https://avatars.githubusercontent.com/u/50194671?v=4" width="100;" alt="edte"/>
-            <br />
-            <sub><b>Edte</b></sub>
-        </a>
-    </td></tr>
-<tr>
-    <td align="center">
-        <a href="https://github.com/solarpowerinncr">
-            <img src="https://avatars.githubusercontent.com/u/37186560?v=4" width="100;" alt="solarpowerinncr"/>
-            <br />
-            <sub><b>Solarpowerinncr</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/xueweiwujxw">
-            <img src="https://avatars.githubusercontent.com/u/45992640?v=4" width="100;" alt="xueweiwujxw"/>
-            <br />
-            <sub><b>Xuewei Wu</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/youngxhui">
-            <img src="https://avatars.githubusercontent.com/u/16971804?v=4" width="100;" alt="youngxhui"/>
-            <br />
-            <sub><b>Youngxhui</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/Kapusch">
-            <img src="https://avatars.githubusercontent.com/u/9576733?v=4" width="100;" alt="Kapusch"/>
-            <br />
-            <sub><b>Jean-Emmanuel BAILLAT</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/0x020B">
-            <img src="https://avatars.githubusercontent.com/u/106423923?v=4" width="100;" alt="0x020B"/>
-            <br />
-            <sub><b>N0tr00t</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/dogukanerel">
-            <img src="https://avatars.githubusercontent.com/u/19349444?v=4" width="100;" alt="dogukanerel"/>
-            <br />
-            <sub><b>Doğukan Erel</b></sub>
-        </a>
-    </td></tr>
-<tr>
-    <td align="center">
-        <a href="https://github.com/devandreacarratta">
-            <img src="https://avatars.githubusercontent.com/u/46504271?v=4" width="100;" alt="devandreacarratta"/>
-            <br />
-            <sub><b>Andrea Carratta</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/cmpsoares91">
-            <img src="https://avatars.githubusercontent.com/u/4914211?v=4" width="100;" alt="cmpsoares91"/>
-            <br />
-            <sub><b>Carlos Manuel Soares</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/AutomationD">
-            <img src="https://avatars.githubusercontent.com/u/1790594?v=4" width="100;" alt="AutomationD"/>
-            <br />
-            <sub><b>Dmitry Kireev</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/thejayhaykid">
-            <img src="https://avatars.githubusercontent.com/u/9452325?v=4" width="100;" alt="thejayhaykid"/>
-            <br />
-            <sub><b>Jake Hayes</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/markdluethje">
-            <img src="https://avatars.githubusercontent.com/u/31922494?v=4" width="100;" alt="markdluethje"/>
-            <br />
-            <sub><b>Mark-Daniel Lüthje</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/mathieu-gilloots">
-            <img src="https://avatars.githubusercontent.com/u/1282351?v=4" width="100;" alt="mathieu-gilloots"/>
-            <br />
-            <sub><b>Mathieu GILLOOTS</b></sub>
-        </a>
-    </td></tr>
-<tr>
-    <td align="center">
-        <a href="https://github.com/NicoDreamzZ">
-            <img src="https://avatars.githubusercontent.com/u/12086166?v=4" width="100;" alt="NicoDreamzZ"/>
-            <br />
-            <sub><b>Nico Rügheimer</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/ramrodo">
-            <img src="https://avatars.githubusercontent.com/u/2797052?v=4" width="100;" alt="ramrodo"/>
-            <br />
-            <sub><b>Rodolfo Martínez Vega</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/SilkeHenderickx">
-            <img src="https://avatars.githubusercontent.com/u/28140438?v=4" width="100;" alt="SilkeHenderickx"/>
-            <br />
-            <sub><b>Silke Henderickx</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/stefanoginobili">
-            <img src="https://avatars.githubusercontent.com/u/67482642?v=4" width="100;" alt="stefanoginobili"/>
-            <br />
-            <sub><b>Stefano Ginobili</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/tlereste">
-            <img src="https://avatars.githubusercontent.com/u/12964583?v=4" width="100;" alt="tlereste"/>
-            <br />
-            <sub><b>Thibault Le Reste</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/vanildosouto">
-            <img src="https://avatars.githubusercontent.com/u/1603028?v=4" width="100;" alt="vanildosouto"/>
-            <br />
-            <sub><b>Vanildo Souto Mangueira</b></sub>
-        </a>
-    </td></tr>
-<tr>
-    <td align="center">
-        <a href="https://github.com/victor-pogor">
-            <img src="https://avatars.githubusercontent.com/u/24962085?v=4" width="100;" alt="victor-pogor"/>
-            <br />
-            <sub><b>Victor Pogor</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/wtchangdm">
-            <img src="https://avatars.githubusercontent.com/u/1546333?v=4" width="100;" alt="wtchangdm"/>
-            <br />
-            <sub><b>W.T. Chang</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/anup92k">
-            <img src="https://avatars.githubusercontent.com/u/51033013?v=4" width="100;" alt="anup92k"/>
-            <br />
-            <sub><b>Anup</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/codedge">
-            <img src="https://avatars.githubusercontent.com/u/4409904?v=4" width="100;" alt="codedge"/>
-            <br />
-            <sub><b>Holger Lösken</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/hiifong">
-            <img src="https://avatars.githubusercontent.com/u/89133723?v=4" width="100;" alt="hiifong"/>
-            <br />
-            <sub><b>Hiifong</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/nikusaikou">
-            <img src="https://avatars.githubusercontent.com/u/32993922?v=4" width="100;" alt="nikusaikou"/>
-            <br />
-            <sub><b>Niku</b></sub>
-        </a>
-    </td></tr>
-<tr>
-    <td align="center">
-        <a href="https://github.com/onisuly">
-            <img src="https://avatars.githubusercontent.com/u/8399827?v=4" width="100;" alt="onisuly"/>
-            <br />
-            <sub><b>Onisuly</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/quyleanh">
-            <img src="https://avatars.githubusercontent.com/u/9365035?v=4" width="100;" alt="quyleanh"/>
-            <br />
-            <sub><b>Quy Le Anh</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/sarathsp06">
-            <img src="https://avatars.githubusercontent.com/u/964542?v=4" width="100;" alt="sarathsp06"/>
-            <br />
-            <sub><b>Sarath Sadasivan Pillai</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/tomaja-linuxo">
-            <img src="https://avatars.githubusercontent.com/u/37209662?v=4" width="100;" alt="tomaja-linuxo"/>
-            <br />
-            <sub><b>Tomaja</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/ziobron">
-            <img src="https://avatars.githubusercontent.com/u/4595135?v=4" width="100;" alt="ziobron"/>
-            <br />
-            <sub><b>Łukasz Ziobroń</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/d-baer">
-            <img src="https://avatars.githubusercontent.com/u/22482986?v=4" width="100;" alt="d-baer"/>
-            <br />
-            <sub><b>D-baer</b></sub>
-        </a>
-    </td></tr>
-</table>
-<!-- readme: contributors,d-baer -end -->
-
-## Bots
-
-<!-- readme: bots -start -->
-<table>
-<tr>
-    <td align="center">
-        <a href="https://github.com/dependabot[bot]">
-            <img src="https://avatars.githubusercontent.com/in/29110?v=4" width="100;" alt="dependabot[bot]"/>
-            <br />
-            <sub><b>dependabot[bot]</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/github-actions[bot]">
-            <img src="https://avatars.githubusercontent.com/in/15368?v=4" width="100;" alt="github-actions[bot]"/>
-            <br />
-            <sub><b>github-actions[bot]</b></sub>
-        </a>
-    </td></tr>
-</table>
-<!-- readme: bots -end -->
@@ -2,6 +2,12 @@
 title: My First Post
 date: 2023-02-20T20:14:22+08:00
 draft: false
+categories:
+  - blog
+collections:
+  - blog
+tags:
+  - blog
 ---

 A blog (a truncation of "weblog") is an informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries (posts). Posts are typically displayed in reverse chronological order so that the most recent post appears first, at the top of the web page. Until 2009, blogs were usually the work of a single individual,[citation needed] occasionally of a small group, and often covered a single subject or topic. In the 2010s, "multi-author blogs" (MABs) emerged, featuring the writing of multiple authors and sometimes professionally edited. MABs from newspapers, other media outlets, universities, think tanks, advocacy groups, and similar institutions account for an increasing quantity of blog traffic. The rise of Twitter and other "microblogging" systems helps integrate MABs and single-author blogs into the news media. Blog can also be used as a verb, meaning to maintain or add content to a blog.
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>