🔖 Chore(release): 0.3.8

✨ Feat: Add a custom domain setting option for Giscus, configured at `params.page.comment.giscus.origin`

.auto-changelog/config.json

@@ -0,0 +1,19 @@
+{
+  "output": "CHANGELOG.md",
+  "template": ".auto-changelog/template.hbs",
+  "handlebarsSetup": ".auto-changelog/setup.js",
+  "sortCommits": "relevance",
+  "commitLimit": false,
+  "ignoreCommitPattern": "\\(ignore\\)",
+  "replaceText": {
+    "^(Feat|feat):": ":sparkles: Feat:",
+    "^(Fix|fix):": ":bug: Fix:",
+    "^(Build|build):": ":hammer: Build:",
+    "^(Refactor|refactor):": ":recycle: Refactor:",
+    "^(Style|style):": ":lipstick: Style:",
+    "^(Perf|perf):": ":zap: Perf:",
+    "^(Test|test):": ":white_check_mark: Test:",
+    "^(Docs|docs):": ":memo: Docs:",
+    "^(Chore|chore):": ":wrench: Chore:"
+  }
+}

.auto-changelog/setup.js

@@ -0,0 +1,31 @@
+// Custom Handlebars helpers
+module.exports = function (Handlebars) {
+  /**
+   * Handlebars helper to replace a string with another string
+   * @param {String} context the string to replace
+   * @param {Object} options
+   * @param {String} options.hash.from the string to replace
+   * @param {String} options.hash.to the string to replace with
+   * @example {{replace "foo bar" from="foo" to="baz"}} => "baz bar"
+   */
+  Handlebars.registerHelper('replace', function (context, options) {
+    return context.replace(options.hash.from, options.hash.to)
+  })
+  /**
+   * Handlebars helper to convert a name to a GitHub username
+   * @param {String} context name to convert
+   * @param {Object} options
+   * @param {Boolean} [options.hash.linked=true] whether to return a linked username
+   * @example {{githubUser "Cell"}} => "Lruihao"
+   */
+  Handlebars.registerHelper('githubUser', function (context, { hash: { linked = false }}) {
+    const map = {
+      'Cell': "Lruihao",
+    }
+    const username = map[context] || context
+    if (linked) {
+      return `[@${username}](https://github.com/${username})`
+    }
+    return `@${username}`
+  })
+}

.auto-changelog/template.hbs

@@ -0,0 +1,70 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+{{!-- if need, set replaceText in config.json "#(\\d+)": "[#$1](https://github.com/hugo-fixit/FixIt/issues/$1)" --}}
+
+{{#each releases}}
+  {{#if href}}
+    ## [{{title}}]({{href}}){{#if tag}} - {{isoDate}}{{/if}}
+  {{else}}
+    ## {{title}}{{#if tag}} - {{isoDate}}{{/if}}
+  {{/if}}
+
+  {{#if summary}}
+    {{summary}}
+  {{/if}}
+
+  {{!-- List commits with `Breaking change: ` somewhere in the message --}}
+  {{#commit-list commits heading='### :boom: Breaking Changes' message='^(Breaking change|BREAKING CHANGE):'}}
+  - {{subject}} [`{{shorthash}}`]({{href}}) by {{githubUser author}}
+  {{/commit-list}}
+
+  {{!-- List commits that add new features, but exclude those that have `:sparkles:` in the message --}}
+  {{#commit-list commits heading='### :tada: New Features' message='(:tada:|Feat:|feat:)' exclude='^:sparkles:'}}
+  - {{subject}} [`{{shorthash}}`]({{href}}) by {{githubUser author}}
+  {{/commit-list}}
+
+  {{!-- List commits that enhance existing features, but exclude those that have `:tada:` in the message --}}
+  {{#commit-list commits heading='### :sparkles: Enhancements' message='(:sparkles:|Feat:|feat:|Perf:|perf:)' exclude='^:tada:'}}
+  - {{subject}} [`{{shorthash}}`]({{href}}) by {{githubUser author}}
+  {{/commit-list}}
+
+  {{!-- List commits that bug fixes --}}
+  {{#commit-list commits heading='### :bug: Bug Fixes' message='(:bug:|Fix:|fix:)'}}
+  - {{subject}} [`{{shorthash}}`]({{href}}) by {{githubUser author}}
+  {{/commit-list}}
+
+  {{!-- List commits that improve the documentation --}}
+  {{#commit-list commits heading='### :memo: Documentation' message='(:memo:|Docs:|docs:)'}}
+  - {{subject}} [`{{shorthash}}`]({{href}}) by {{githubUser author}}
+  {{/commit-list}}
+
+  {{!-- List other changes commits --}}
+  {{#commit-list commits heading='### :wrench: Other Changes' message='(Refactor:|refactor:|Style:|style:|Test:|test:|Chore:|chore:|Build:|build:)'}}
+  - {{subject}} [`{{shorthash}}`]({{href}}) by {{githubUser author}}
+  {{/commit-list}}
+
+  **Full Changelog**: {{href}}
+
+  ---
+
+  ### Uncategorized
+
+  {{#if merges}}
+    #### Merged pull requests
+
+    {{#each merges}}
+      {{!-- {{#if href}}[`#{{id}}`]({{href}}){{/if}} --}}
+      - {{#if commit.breaking}}**Breaking change:** {{/if}}{{message}} by {{githubUser author}} in {{#if id}}#{{id}}{{/if}}
+    {{/each}}
+  {{/if}}
+
+  {{#if fixes}}
+    #### Closed issues
+
+    {{#each fixes}}
+      - {{#if commit.breaking}}**Breaking change:** {{/if}}{{commit.subject}}{{#each fixes}} {{#if id}}#{{id}}{{/if}}{{/each}} by {{githubUser commit.author}}
+    {{/each}}
+  {{/if}}
+
+{{/each}}

.babelrc

@@ -1,12 +0,0 @@
-{
-  "comments": false,
-  "minified": true,
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": "> 0.25%, not dead"
-      }
-    ]
-  ]
-}

.gitattributes

@@ -0,0 +1 @@
+assets/lib/**/* linguist-vendored

.github/FUNDING.yml

@@ -1,5 +1,3 @@
 custom: [
-  "https://paypal.me/Lruihao",
-  "https://lruihao.cn/images/alipay.gif",
-  "https://lruihao.cn/images/wechatpay.gif"
+  "https://paypal.me/Lruihao"
 ]

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -48,4 +48,4 @@ body:
       label: Additional Information 补充信息
       description: |
         Configuration files or front matter code ...
-        配置文件或者前置参数的代码 ...
+        配置文件或者前置参数的代码……

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -12,7 +12,7 @@ body:
             请针对不同的功能建议提交新的 issue。
         placeholder: |
           I recommend adding this feature ...
-          我希望添加这样的一个功能 ...
+          我希望添加这样的一个功能……
     - type: textarea
       id: reference
       attributes:

.github/workflows/algolia-atomic.yml

@@ -1,47 +0,0 @@
-name: Update Algolia Search Index
-
-on:
-  push:
-    branches:
-      - master
-    paths:
-      - 'docs'
-  workflow_dispatch:
-
-jobs:
-  algolia-atomic:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          submodules: true  # Fetch Hugo themes (true OR recursive)
-          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
-
-      - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
-        with:
-          hugo-version: 'latest'
-          extended: true
-
-      - name: Build
-        run: |
-            npm install
-            npm run build
-
-      - name: Update Algolia Index (en)
-        env:
-          ALGOLIA_APP_ID: YKOM6PKLUY
-          ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
-          ALGOLIA_INDEX_NAME: 'index.en'
-          ALGOLIA_INDEX_FILE: './docs/public/index.json'
-        run: |
-          npm run algolia
-
-      - name: Update Algolia Index (zh-cn)
-        env:
-          ALGOLIA_APP_ID: YKOM6PKLUY
-          ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
-          ALGOLIA_INDEX_NAME: 'index.zh-cn'
-          ALGOLIA_INDEX_FILE: './docs/public/zh-cn/index.json'
-        run: |
-          npm run algolia

.github/workflows/build.yml

@@ -8,14 +8,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           submodules: recursive  # Fetch Hugo themes (true OR recursive)
           fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
       - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
+        uses: peaceiris/actions-hugo@v3
         with:
           hugo-version: latest
           extended: true
       - name: Build Hugo static files
-        run: hugo -v --source=docs --gc --minify
+        run: hugo -v --source=demo --gc --minify

.github/workflows/codeql-analysis.yml

@@ -19,7 +19,7 @@ on:
     branches:
       - master
   schedule:
-    - cron: '30 18 * * 5'
+    - cron: "30 18 * * 5"
 
 jobs:
   analyze:
@@ -29,18 +29,21 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        language: [ "javascript" ]
+        # CodeQL supports [ "cpp", "csharp", "go", "java", "javascript", "python" ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+    - name: Check out repository code
+      uses: actions/checkout@v4
+      with:
+        submodules: true  # Fetch Hugo themes (true OR recursive)
+        fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         config-file: ./.github/configs/codeql.yml
@@ -52,7 +55,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -66,4 +69,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3

.github/workflows/contributors.yml

@@ -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 }}

.github/workflows/release.yml

@@ -0,0 +1,45 @@
+# 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 master 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 }}
+
+      - name: GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          # Creates a draft release. Defaults to false
+          draft: true
+          body_path: CHANGELOG.md

.gitignore

@@ -25,4 +25,4 @@ $RECYCLE.BIN/
 ## Linux
 .directory
 
-
+CHANGELOG.md

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "docs"]
-	path = docs
-	url = https://github.com/hugo-fixit/docs.git

.npmrc

@@ -0,0 +1,2 @@
+tag-version-prefix="v"
+message=":bookmark: Chore(release): %s"

CHANGELOG.md

@@ -1,277 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-<!-- Releases see https://github.com/hugo-fixit/FixIt/releases -->
-
-## v0.2.17 [2023.1.29]
-
-> Snapshot: <>
-
-- :tada: Feat: add support for [Fusejs search](https://fusejs.io/) ([#203](https://github.com/hugo-fixit/FixIt/issues/203))
-- :sparkles: Feat: add feature post reward support ([#216](https://github.com/hugo-fixit/FixIt/issues/216), @Lruihao[#234](https://github.com/hugo-fixit/FixIt/pull/234))
-- :sparkles: Feat: add reward shortcode support ([#216](https://github.com/hugo-fixit/FixIt/issues/216))
-- :sparkles: Feat: add TagCloud config support for tags page, see parameter `params.tagcloud` ([#235](https://github.com/hugo-fixit/FixIt/issues/235))
-- :sparkles: Feat: add [pace](https://github.com/CodeByZach/pace) support ([#190](https://github.com/hugo-fixit/FixIt/issues/190))
-- :sparkles: Feat: add custom templates and parameter `params.customFilePath` support
-- :sparkles: Feat: add feature end of post flag support ([#236](https://github.com/hugo-fixit/FixIt/issues/236))
-- :sparkles: Feat: refactor parameter `params.footer.siteTime`
-- :sparkles: Feat: add params to close wordcount and readingTime in post ([#209](https://github.com/hugo-fixit/FixIt/issues/209))
-- :sparkles: Feat: add parameter `params.footer.order` to order footer lines
-- :sparkles: Feat: add parameter `params.home.profile.avatarMenu`
-- :truck: Feat: migrate parameter `params.autoBookmark` to `params.page.autoBookmark` ([#55](https://github.com/hugo-fixit/FixIt/issues/55))
-- :truck: Feat: move `assets/data/emoji` to `assets/lib/valine/emoji/`
-- :zap: Perf: optimize close comment feature when the post has expired ([#204](https://github.com/hugo-fixit/FixIt/issues/204))
-- :zap: Perf: optimize sub menu position calculation in desktop header with css replace of javascript
-- :zap: Perf: enhance pangu spelling correction
-- :bug: Fix: remove the leading and trailing whitespace of the code string ([#205](https://github.com/hugo-fixit/FixIt/issues/205))
-- :bento: Fix: update webfonts for fontawesome 6.2.0 (@NicoDreamzZ[#228](https://github.com/hugo-fixit/FixIt/pull/228))
-- :bug: Fix: image shortcode/plugin lose the support for svg type files ([#210](https://github.com/hugo-fixit/FixIt/issues/210))
-- :bug: Fix: can't keep the static table of the contents in front of the post
-- :bug: Fix: escape hashtag character `#` in tag and category ([#245](https://github.com/hugo-fixit/FixIt/issues/245))
-- :bug: Fix: pangu.js cdn error
-- :bug: Fix: sitemap.xml link in robots.txt doesn't point to main sitemap (@Mejituu[#276](https://github.com/hugo-fixit/FixIt/pull/276))
-- :recycle: Refactor(i18n): hierarchize translation fields for supported languages
-- :globe_with_meridians: Docs(i18n): add missing translations for French + enhancements (@Kapusch[#247](https://github.com/hugo-fixit/FixIt/pull/247))
-- :lipstick: Style: refactor css style
-- :lipstick: Style: update home page stylesheet
-- :arrow_up: Chore(libs):
-  - Update Twikoo from 1.4.10 to 1.6.8 and add Katex support for it ([#215](https://github.com/hugo-fixit/FixIt/issues/215) [#243](https://github.com/hugo-fixit/FixIt/issues/243))
-- :wrench: Chore(deps-dev):
-  - Bump @babel/cli from 7.18.10 to 7.20.7
-  - Bump @babel/core from 7.19.1 to 7.20.12
-  - Bump @babel/preset-env from 7.18.10 to 7.20.2
-  - Bump core-js from 3.25.2 to 3.27.2
-
-- **Full Changelog:** @Lruihao [`v0.2.16...v0.2.17`](https://github.com/hugo-fixit/FixIt/compare/v0.2.16...v0.2.17)
-
-## v0.2.16 [2022.9.24]
-
-> This version fixes several bugs, adds a few new features and SEO optimizations, and refactors part of the project structure and code.  
-> Snapshot: <https://fixit-jir7e7kzt-x-cell.vercel.app>
-
-- :tada: Feat: add reading progress bar support ([#191](https://github.com/hugo-fixit/FixIt/issues/191))
-- :tada: Feat: add b2t scroll percent support ([#192](https://github.com/hugo-fixit/FixIt/issues/192))
-- :sparkles: Feat: add auto bookmark support ([#55](https://github.com/hugo-fixit/FixIt/issues/55))
-- :sparkles: Feat: add `raw` shortcode
-- :sparkles: Feat(menu): add params: `icon`, `type` for menu items
-- :sparkles: Feat: add custom aside template in post page ([#172](https://github.com/hugo-fixit/FixIt/issues/172))
-- :sparkles: Feat(math): add more block delimiter support for math
-- :sparkles: Feat(highlight): add full support for Chroma highlighting languages in the [list](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages)
-- :sparkles: Feat: add optional parameter `noreferrer` for the shortcode `link`
-- :sparkles: Feat: update echarts theme config
-- :sparkles: Feat: add noscript warning banner ([#194](https://github.com/hugo-fixit/FixIt/issues/194))
-- :sparkles: Feat: add 12 newly supported social links ([#175](https://github.com/hugo-fixit/FixIt/issues/175) [#197](https://github.com/hugo-fixit/FixIt/issues/197))
-- :zap: Perf: remove extra spaces in plugin link
-- :wheelchair: Feat(accessibility): use `aria-hidden=true` on icons that AT should ignore
-- :recycle: Refactor: image rendering
-- :recycle: Refactor: back to top and scroll to comments
-- :recycle: Refactor: custom.js rendering and remove `params.customJS` ([#189](https://github.com/hugo-fixit/FixIt/pull/189))
-- :recycle: Refactor: scss directory ([#185](https://github.com/hugo-fixit/FixIt/issues/185))
-- :recycle: Refactor: plugin script
-- :recycle: Refactor: version.template.svg
-- :recycle: Refactor: config ([#187](https://github.com/hugo-fixit/FixIt/issues/187))
-- :bug: Fix: add function `dos2unix` to unify new lines symbol between Windows and Unix/Mac OS
-- :bug: Fix: author display error in post and markdown file
-- :bug: Fix: use data attributes or class replace for custom attributes
-- :bug: Fix: attribute `media` not allowed on element meta in `[name=theme-color]`
-- :bug: Fix: support smooth migration from LoveIt to FixIt ([#174](https://github.com/hugo-fixit/FixIt/discussions/174) [#182](https://github.com/hugo-fixit/FixIt/issues/182))
-- :bug: Fix: `center-quote` shortcode rendering error when config `unsafe = false` (@yureiita[#160](https://github.com/hugo-fixit/FixIt/pull/160))
-- :bug: Fix: menu item invalid params `draft` in submenu
-- :bug: Fix: missing height and weight of img element and lazyload object-fit style
-- :bug: Fix: image shortcode invalid params `height` and `weight` ([#200](https://github.com/hugo-fixit/FixIt/issues/200))
-- :bug: Fix: typeit shortcode invalid config `duration = -1` and fix style
-- :bug: Fix: typeit shortcode prints consecutive spaces and newline errors
-- :art: Style: change the default icons of some social links
-- :bug: Fix: component `paginator` style error ([#188](https://github.com/hugo-fixit/FixIt/issues/188))
-- :lipstick: Style: fix language and theme switch cursor style ([#193](https://github.com/hugo-fixit/FixIt/issues/193))
-- :lipstick: Style: change line-break style of code element from `anywhere` to `auto`
-- :globe_with_meridians: Docs(i18n): update pt-br, de in i18n
-- :mag: Perf(SEO): enhance SEO performance
-- :wrench: Chore: modify babel config and optimize theme.js compilation and loading (revert [`65371a1`](https://github.com/hugo-fixit/FixIt/commit/65371a19a40591c3f403f7fde2b7001c3390354d))
-- :wrench: Chore: creating new go.mod: module github.com/hugo-fixit/FixIt
-- :arrow_up: Chore(libs):
-  - Update simple-icons from 6.3.0 to 7.12.0
-  - Update emoji-data from 5.0.1 to 14.0.0
-  - Update mermaid from 9.1.3 to 9.1.7
-  - Update typeit from 7.0.4 to 8.7.0
-  - Update lightgallery from 1.4.0 to 2.6.1
-  - Update Valine from 1.5.0 to 1.5.1
-  - Update @waline/client from 2.6.1 to 2.10.0
-  - Update mapbox-gl from 2.8.2 to 2.10.0
-  - Update fontawesome-free from 6.1.1 to 6.2.0
-  - Update katex from 0.15.3 to 0.16.2
-  - Update echarts from 5.2.2 to 5.3.3
-  - Update algoliasearch from 4.13.0 to 4.14.2
-- :wrench: Chore(deps-dev):
-  - Remove dependencies: minimist, babel-preset-minify
-  - Bump core-js from 3.24.1 to 3.25.2 (@dependabot[#201](https://github.com/hugo-fixit/FixIt/pull/201))
-  - Bump @babel/core from 7.18.10 to 7.19.1 (@dependabot[#202](https://github.com/hugo-fixit/FixIt/pull/202))
-- **Full Changelog:** @Lruihao [`v0.2.15...v0.2.16`](https://github.com/hugo-fixit/FixIt/compare/v0.2.15...v0.2.16)
-
-## v0.2.15 [2022.8.4]
-
-> Add content encryption feature(pages, partial), total word count, enhance auto toc, developer options and more.  
-> Snapshot: <https://fixit-hvd1rg4ba-x-cell.vercel.app>
-
-- :truck: Feat: ransfer repository from Lruihao to hugo-fixit
-- :tada: Feat: add content encryption of pages ([#123](https://github.com/hugo-fixit/FixIt/issues/123))
-- :tada: Feat: add `fixit-encryptor` shortcode ([#123](https://github.com/hugo-fixit/FixIt/issues/123))
-- :sparkles: Feat: add total word count feature in section and remove from footer ([#124](https://github.com/hugo-fixit/FixIt/issues/124))
-- :sparkles: Feat: enhance auto toc feature ([#104](https://github.com/hugo-fixit/FixIt/issues/104) [#136](https://github.com/hugo-fixit/FixIt/issues/136))
-- :sparkles: Feat: add repost feature ([#156](https://github.com/hugo-fixit/FixIt/issues/156))
-- :sparkles: Feat: add developer options
-  - Check for updates option
-  - Mobile Devtools config ([#163](https://github.com/hugo-fixit/FixIt/pull/163))
-- :bug: Fix: unable to show search bar of header at mobile mode ([#143](https://github.com/hugo-fixit/FixIt/issues/143))
-- :bug: Fix: Giscus comment invalid config `inputPosition`
-- :bug: Fix: Waline comment invalid config `imageUploader = false` & `highlighter = false` (@yureiita[#161](https://github.com/hugo-fixit/FixIt/pull/161))
-- :bug: Fix: busuanzi logic error
-- :bug: Fix: close comment system logic error when the article was expired
-- :bug: Style: fix typos for rel attribute value noreferrer (@yureiita[#157](https://github.com/hugo-fixit/FixIt/pull/157))
-- :recycle: Refactor: migrate theme js from src to assets by js.build
-- :recycle: Refactor: change the post edit url splicing rules
-- :mag: Feat(SEO): add options to make output `baidu_urls.txt` file ([#138](https://github.com/hugo-fixit/FixIt/issues/138))
-- :truck: Feat: migrate exampleSite to docs submodule
-- :art: Style: add theme colors variables and add common color styles
-- :art: Style: add scroll bar for auto toc ([#136](https://github.com/hugo-fixit/FixIt/issues/136))
-- :art: Style: change the version badge style form flat-square to flat
-- :memo: Docs: revise theme documentations
-- :heavy_plus_sign: Feat: add theme core configuration settings file
-- :wrench: Feat(cdn): add unpkg cdn support
-- :wrench: Chore: change the theme minimum supported Hugo versions above **0.84.0**
-- :arrow_up: Chore(libs): update some third-party libraries
-  - Update Artalk from 2.2.12 to 2.3.4 ([#150](https://github.com/hugo-fixit/FixIt/issues/150))
-  - Update Waline from 1.5.2 to 2.6.1
-  - Update Valine from 1.4.18 to 1.5.0
-  - Update mermaid from 8.13.3 to 9.1.3
-- :arrow_up: Chore(deps-dev):
-  - Bump babel-preset-minify from 0.5.1 to 0.5.2 ([#145](https://github.com/hugo-fixit/FixIt/pull/145))
-  - Bump core-js from 3.22.0 to 3.24.1 ([#168](https://github.com/hugo-fixit/FixIt/pull/168))
-  - Bump @babel/preset-env from 7.16.11 to 7.18.10 ([#169](https://github.com/hugo-fixit/FixIt/pull/169))
-  - Bump @babel/cli from 7.17.6 to 7.18.10 ([#170](https://github.com/hugo-fixit/FixIt/pull/170))
-  - Bump @babel/core from 7.17.9 to 7.18.10 ([#171](https://github.com/hugo-fixit/FixIt/pull/171))
-- **Full Changelog:** @Lruihao [`v0.2.14...v0.2.15`](https://github.com/hugo-fixit/FixIt/compare/v0.2.14...v0.2.15)
-
-## v0.2.14 [2022.5.15]
-
-> Add hugo new features support.  
-> Snapshot: <https://fixit-p1tg6tsml-lruihao.vercel.app>
-
-- :recycle: Refactor: header layout
-  - :tada: Feat: add sub menu (nested menu) support ([#31](https://github.com/hugo-fixit/FixIt/issues/31))
-  - :sparkles: Feat: add user-defined content to menu items via the `params` field ([#99](https://github.com/hugo-fixit/FixIt/issues/99))
-  - :sparkles: Feat: modified language selector to submenu (@pandaoh[`eced169`](https://github.com/hugo-fixit/FixIt/commit/eced169713ce4a0208ce70ab556824e47eb671d5), @Lruihao[#31](https://github.com/hugo-fixit/FixIt/issues/31))
-  - :bug: Fix: add "no more translations" judgment logic ([#100](https://github.com/hugo-fixit/FixIt/issues/100))
-  - :bug: Fix: fix some header css bug ([#31](https://github.com/hugo-fixit/FixIt/issues/31))
-- :sparkles: Feat: enhance link render ([#96](https://github.com/hugo-fixit/FixIt/issues/96))
-  - Add external icon for external links automatically
-  - Add download icon for downloadable links
-- :sparkles: Feat: add giscus comment system ([#130](https://github.com/hugo-fixit/FixIt/issues/130))
-- :sparkles: Feat: link shortcode add `external-icon` option ([#96](https://github.com/hugo-fixit/FixIt/issues/96))
-- :sparkles: Feat: add GitHub Corners support ([#106](https://github.com/hugo-fixit/FixIt/issues/106))
-- :sparkles: Feat: add local avatar and gravatar support for post author ([#125](https://github.com/hugo-fixit/FixIt/issues/125))
-- :sparkles: Feat: add ~~total word count support in footer~~ ([#124](https://github.com/hugo-fixit/FixIt/issues/124))
-- :sparkles: Feat: add "Edit this page" button support ([#103](https://github.com/hugo-fixit/FixIt/issues/103))
-- :sparkles: Feat: add count badge for taxonomy ([#122](https://github.com/hugo-fixit/FixIt/issues/122))
-- :zap: Perf: add Gravatar config support
-- :bug: Fix: invalid front matter `comment: true` ([#108](https://github.com/hugo-fixit/FixIt/issues/108))
-- :bug: Fix: ibruce and watermark option negative value error ([#114](https://github.com/hugo-fixit/FixIt/issues/114))
-- :truck: Feat: *migrate ~~`home.profile.gravatarSite`~~ to `gravatar.host`*
-- :truck: Feat: *migrate ~~`ibruce.siteTime`~~ to `footer.siteTime`*
-- :lipstick: Style: add some common CSS styles Class ([#101](https://github.com/hugo-fixit/FixIt/issues/101))
-- :lipstick: Style: add the gap between and icon and text at blending typesetting (@ctj12461, @Lruihao[#118](https://github.com/hugo-fixit/FixIt/pull/118))
-- :lipstick: Style: modify blockquote CSS
-- :memo: Docs: revise theme documentations
-- :zap: Perf: remove third-party library clipboard.js ([#84](https://github.com/hugo-fixit/FixIt/issues/84))
-- :pencil2: Docs: fix highlight url typo in `theme-documentation-built-in-shortcodes` (@d-baer[#85](https://github.com/hugo-fixit/FixIt/pull/85))
-- :wrench: Chore(i18n): improve translations for the supported languages ([#119](https://github.com/hugo-fixit/FixIt/issues/119))
-- :wrench: Chore(i18n): add i18n support for console messages
-- :wrench: Chore: add deprecated parameter detection in cli
-- :arrow_up: Chore: update some third-party libraries
-- :wrench: Chore(deps-dev):
-  - Bump minimist from 1.2.5 to 1.2.6 ([#92](https://github.com/hugo-fixit/FixIt/pull/92))
-  - Bump @babel/core from 7.17.5 to 7.17.10 ([#126](https://github.com/hugo-fixit/FixIt/pull/126))
-  - Bump core-js from 3.21.1 to 3.22.5 ([#129](https://github.com/hugo-fixit/FixIt/pull/129))
-  - Bump @babel/cli from 7.17.6 to 7.17.10 ([#127](https://github.com/hugo-fixit/FixIt/pull/127))
-  - Bump @babel/preset-env from 7.16.11 to 7.17.10 ([`bc74d14`](https://github.com/hugo-fixit/FixIt/commit/bc74d149c16b36644fecdd5bef325bf8087f8593))
-- **Full Changelog:** @Lruihao [`v0.2.13...v0.2.14`](https://github.com/hugo-fixit/FixIt/compare/v0.2.13...v0.2.14)
-
-## v0.2.13 [2022.3.14]
-
-> Improve and add some new features.  
-> Snapshot: <https://fixit-bbh5g5x90-lruihao.vercel.app>
-
-- :recycle: Refactor: page layout ([#65](https://github.com/hugo-fixit/FixIt/issues/65))
-- :tada: Feat: add Artalk comment support ([#54](https://github.com/hugo-fixit/FixIt/issues/54), @hiifong[#57](https://github.com/hugo-fixit/FixIt/pull/57))
-- :tada: Feat: add Waline comment support ([#36](https://github.com/hugo-fixit/FixIt/issues/36))
-- :tada: Feat: add Twikoo comment support ([#64](https://github.com/hugo-fixit/FixIt/issues/64))
-- :sparkles: Feat: add recently updated section ([#50](https://github.com/hugo-fixit/FixIt/issues/50))
-- :sparkles: Feat: add article expiration reminder support ([#51](https://github.com/hugo-fixit/FixIt/issues/51))
-- :sparkles: Feat: add pageStyle option ([#62](https://github.com/hugo-fixit/FixIt/issues/62))
-- :sparkles: Style: add media style for print view ([#61](https://github.com/hugo-fixit/FixIt/issues/61))
-- :sparkles: Feat: add Gravatar mirror site support (@ctj12461[#66](https://github.com/hugo-fixit/FixIt/pull/66))
-- :sparkles: Feat: add archive count display ([#33](https://github.com/hugo-fixit/FixIt/issues/33))
-- :sparkles: Feat: add `details` shortcode ([#68](https://github.com/hugo-fixit/FixIt/issues/68))
-- :sparkles: Feat: add `center-quote` shortcode ([#69](https://github.com/hugo-fixit/FixIt/issues/69))
-- :sparkles: Feat: add markdown support for **title** parameter of the admonition shortcode
-- :sparkles: Feat: add 9 newly supported social links ([#17](https://github.com/hugo-fixit/FixIt/issues/17))
-- :zap: Perf: enhance highlight feature (GitHub syntax supported) and fix some css bugs ([#43](https://github.com/hugo-fixit/FixIt/issues/43))
-  - Inline Code
-  - Indented Code
-  - Block Fenced Code
-  - gist shortcode
-- :sparkles: Feat: add `params.page.code.edit` option support ([#76](https://github.com/hugo-fixit/FixIt/issues/76))
-- :mag: Feat: add 360 and sougou seo support
-- :bug: Fix: remove source map of local libraries to avoid 404 error ([#67](https://github.com/hugo-fixit/FixIt/issues/67))
-- :fire: Feat: remove shortcode cardlink ([#42](https://github.com/hugo-fixit/FixIt/issues/42))
-- :lipstick: Style: more refined theme style ([#40](https://github.com/hugo-fixit/FixIt/issues/40))
-- :pencil2: Style: fix typo *discription* should be **description** ([#60](https://github.com/hugo-fixit/FixIt/issues/60))
-- :wrench: Chore(update-libs):
-  - Update cell-watermark 1.0.3 and CDN support (fontFamily supported)
-  - Update animate.css 3.7.2 -> 4.1.1 ([#74](https://github.com/hugo-fixit/FixIt/issues/74))
-- :wrench: Chore: add atomic-algolia for exampleSite ([#70](https://github.com/hugo-fixit/FixIt/issues/70))
-- **Full Changelog:** @Lruihao [`v0.2.12...v0.2.13`](https://github.com/hugo-fixit/FixIt/compare/v0.2.12...v0.2.13)
-
-## v0.2.12 [2022-1-27]
-
-> Fix most known bugs and add some new features.  
-> Snapshot: <https://fixit-e9lpwfkbp-lruihao.vercel.app>
-
-- :tada: Feat: add PWA support
-- :tada: Feat: add Watermark support ([#16](https://github.com/hugo-fixit/FixIt/issues/16))
-- :tada: Feat: add "不蒜子" count and site run time ([#18](https://github.com/hugo-fixit/FixIt/issues/18))
-- :sparkles: Feat: add pangu.js support ([#20](https://github.com/hugo-fixit/FixIt/issues/20))
-- :sparkles: Feat: add public network security config (only in China) ([#15](https://github.com/hugo-fixit/FixIt/issues/15))
-- :sparkles: Feat: add CustomJS option ([#24](https://github.com/hugo-fixit/FixIt/issues/24))
-- :sparkles: Feat: add theme embedded archeTypes
-- :mag: Feat(SEO): optimize SEO meta ([#30](https://github.com/hugo-fixit/FixIt/issues/30))
-- :zap: Feat: remove lib smooth-scroll ([#1](https://github.com/hugo-fixit/FixIt/issues/1)) replaced by CSS native properties scroll-margin, scroll-behavior ([#39](https://github.com/hugo-fixit/FixIt/issues/39))
-- :zap: Perf: merge shortcode cardlink (deprecated v0.2.13) into shortcode link and add 'download' param ([#42](https://github.com/hugo-fixit/FixIt/issues/42))
-- :zap: Perf: optimize JS loading ([#25](https://github.com/hugo-fixit/FixIt/issues/25))
-- :recycle: Refactor: header title DOM and add subtitle option ([#26](https://github.com/hugo-fixit/FixIt/issues/26))
-- :bug: Fix: set mermaid theme as 'default' when initialization ([#38](https://github.com/hugo-fixit/FixIt/issues/38))
-- :bug: Fix: typeit print code error ([#19](https://github.com/hugo-fixit/FixIt/issues/19))
-- :bug: Fix: pre element overflow error ([#29](https://github.com/hugo-fixit/FixIt/issues/29))
-- :bug: Fix: toc display error without content header ([#21](https://github.com/hugo-fixit/FixIt/issues/21))
-- :lipstick: Style: style detail adjustments, change scroll-behavior to smooth, taxonomy, header, footer, shortcode style etc.
-- :pencil: Docs: improve demo site documentation ([#37](https://github.com/hugo-fixit/FixIt/issues/37))
-- :wrench: Chore: add commands `fixit_checker.sh`
-- :wrench: Chore(i18n): change some translations
-- :arrow_up: Chore: update all third-party libraries
-- **Full Changelog:** @Lruihao [`v0.2.11...v0.2.12`](https://github.com/hugo-fixit/FixIt/compare/v0.2.11...v0.2.12)
-
-## v0.2.11 [2021-12-19]
-
-> :tada: The beginning of FixIt to fix the theme LoveIt.
-
-- :sparkles: Feat: add cardlink shortcode ([Lruihao/hugo-blog@`df9eca2`](https://github.com/Lruihao/hugo-blog/commit/df9eca26af43287748fd8d4654014357a8269b0b))
-- :tada: Feat: add friends layout template
-- :wrench: Chore(i18n): add translations for Traditional Chinese ([Lruihao/hugo-blog@`df9eca2`](https://github.com/Lruihao/hugo-blog/commit/b86157d8b84830bda415ab2488580afd843acac2))
-- :bug: Fix: mobile style ([Lruihao/hugo-blog#19](https://github.com/Lruihao/hugo-blog/issues/19))
-- :bug: Style: fix content h1 style ([Lruihao/hugo-blog#8](https://github.com/Lruihao/hugo-blog/issues/8))
-- :bug: Fix: `.params.author` should be `$params.author`  ([Lruihao/hugo-blog#1](https://github.com/Lruihao/hugo-blog/issues/1))
-- **Full Changelog:** @Lruihao [`v0.2.10...v0.2.11`](https://github.com/hugo-fixit/FixIt/compare/v0.2.10...v0.2.11)
-
-## v0.2.10 :arrow_down: [2020-5-29 before]
-
-Thanks [dillonzq/LoveIt](https://github.com/dillonzq/LoveIt/releases)

CONTRIBUTING.md

@@ -7,7 +7,7 @@ First, fork this repository by clicking the fork button.
 Next, clone your forked repo.
 
 ```bash
-git clone --recursive https://github.com/hugo-fixit/FixIt.git && cd FixIt
+git clone https://github.com/hugo-fixit/FixIt.git && cd FixIt
 ```
 
 Then, install the dev dependencies.
@@ -21,19 +21,16 @@ And now you are ready to go!
 Here are some useful commands.
 
 ```bash
-# build theme.js with babel
-npm run babel
-# build theme.js and then build the static site
-npm run build
 # run a local debugging server with watch
 npm run server
 # run a local debugging server with watch in production environment
 npm run server:production
-# build theme.js and then run a local debugging server
-npm run start
-# build theme.js and then run a local debugging server in production environment
-npm run start:production
+```
 
+If you want to do docs-related theme changes, the simplest way is to have both `FixIt` and `fixit-docs` cloned as sibling directories, and then run:
+
+```bash
+npm run server:docs
 ```
 
 Finally, create a new pull request at <https://github.com/hugo-fixit/FixIt/pulls> to submit your contribution 🎉

LICENSE

@@ -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-2024 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

README.md

@@ -1,175 +1,135 @@
 # FixIt Theme | Hugo
 
 [![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.84.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.123.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
 
 👉 English README | [简体中文说明](README.zh-cn.md)
 
-> [FixIt](https://github.com/hugo-fixit/FixIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/).
+[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).
+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).[^1]
 
-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.webp)
 
-![Hugo Theme FixIt](https://fixit.lruihao.cn/images/Apple-Devices-Preview.jpg)
+## Getting started
 
-## [Getting started](https://fixit.lruihao.cn/categories/documentation/)
+1. [Installation](https://fixit.lruihao.cn/documentation/installation/)
+2. [Getting Started](https://fixit.lruihao.cn/documentation/getting-started/)
+3. [Content Management](https://fixit.lruihao.cn/documentation/content-management/)
+4. [Advanced Usage](https://fixit.lruihao.cn/documentation/advanced/)
 
-Head to this [documentation page](https://fixit.lruihao.cn/theme-documentation-basics/) for a complete guidence to get started with the FixIt theme.
+Alternatively, you can run the [documentation site](https://fixit.lruihao.cn/) locally. For more details, see [hugo-fixit/docs](https://github.com/hugo-fixit/docs).
 
-Or run [Documentation Site](https://fixit.lruihao.cn) locally:
+## Template repository
 
-```bash
-git clone --recursive https://github.com/hugo-fixit/FixIt.git && cd FixIt
-
-hugo server --source=docs
-```
-
-In addition, there is the [FixIt wiki](https://github.com/hugo-fixit/FixIt/wiki).
-
-## Install or Migrate
-
-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](https://fixit.lruihao.cn/theme-documentation-basics/#install-theme) in other ways.
-
-```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 `config.toml` and change the default theme to `FixIt`.
-
-```diff
-- theme = "LoveIt"
-+ theme = "FixIt"
-```
-
-Now the migration is finished and everything is ready 🎉
-
-## Why choose FixIt
-
-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:
-
-* 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
-
-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.
+- [hugo-fixit/hugo-fixit-start](https://github.com/hugo-fixit/hugo-fixit-start/generate)
+- [hugo-fixit/hugo-fixit-start1](https://github.com/hugo-fixit/hugo-fixit-start1/generate)
+- [hugo-fixit/docs](https://github.com/hugo-fixit/docs/generate)
+- [Lruihao/hugo-blog](https://github.com/Lruihao/hugo-blog/generate)
 
 ## Who used FixIt
 
 To see this theme in action, here are some [live demo sites](https://fixit.lruihao.cn/friends/) which are rendered with **FixIt** theme.
 
-| Site                                                         | Repo                                                         |
-| :----------------------------------------------------------- | :----------------------------------------------------------- |
-| [FixIt Theme Official Website](https://fixit.lruihao.cn), [FixIt Preview](https://pre.fixit.lruihao.cn) | [hugo-fixit/docs](https://github.com/hugo-fixit/docs)        |
-| [FixIt Blog Template - Git](https://demo.fixit.lruihao.cn)   | [hugo-fixit/hugo-fixit-blog-git](https://github.com/hugo-fixit/hugo-fixit-blog-git) |
-| [FixIt Blog Template - Go](https://demo.fixit.lruihao.cn)    | [hugo-fixit/hugo-fixit-blog-go](https://github.com/hugo-fixit/hugo-fixit-blog-go) |
-| [Lruihao's note](https://lruihao.cn)                         | [Lruihao/hugo-blog](https://github.com/Lruihao/hugo-blog)    |
-
 ## Features
 
 ### Performance and SEO
 
-* Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
-* Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
-* **[Google Analytics](https://analytics.google.com/analytics)** supported
-* **[Fathom Analytics](https://usefathom.com/)** supported
-* Search engine **verification** supported (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
-* **CDN** for third-party libraries supported
-* Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
+- Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
+- Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
+- **[Google Analytics](https://analytics.google.com/analytics)** supported
+- **[Fathom Analytics](https://usefathom.com/)** supported
+- Search engine **verification** supported (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
+- **CDN** for third-party libraries supported
 
 ### Appearance and Layout
 
-* **Responsive** layout
-* **Light/Dark** mode
-* Globally consistent **design language**
-* **Pagination** supported
-* Easy-to-use and self-expanding **table of contents**
-* **Multilanguage** supported and i18n ready
-* Beautiful **CSS animation**
+- **Responsive** layout
+- **Light/Dark** mode
+- Globally consistent **design language**
+- **Pagination** supported
+- Easy-to-use and self-expanding **table of contents**
+- **Multilanguage** supported and i18n ready
+- Beautiful **CSS animation**
 
 ### Social and Comment Systems
 
-* **Gravatar** supported by [Gravatar](https://gravatar.com)
-* Local **Avatar** supported
-* Up to **87** social links supported
-* Up to **28** share sites supported
-* **Disqus** comment system supported by [Disqus](https://disqus.com)
-* **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
-* **Valine** comment system supported by [Valine](https://valine.js.org/)
-* **Waline** comment system supported by [Waline](https://waline.js.org/)
-* **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
-* **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
-* **Commento** comment system supported by [Commento](https://commento.io/)
-* **Utterances** comment system supported by [Utterances](https://utteranc.es/)
-* **Artalk** comment system supported by [Artalk](https://artalk.js.org/)
-* **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)
-* **giscus** comment system supported by [giscus](https://giscus.app/)
+- **Gravatar** supported by [Gravatar](https://gravatar.com)
+- Local **Avatar** supported
+- Up to **87** social links supported
+- Up to **28** share sites supported
+- **Disqus** comment system supported by [Disqus](https://disqus.com)
+- **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
+- **Valine** comment system supported by [Valine](https://valine.js.org/)
+- **Waline** comment system supported by [Waline](https://waline.js.org/)
+- **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
+- **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
+- **Commento** comment system supported by [Commento](https://commento.io/)
+- **Utterances** comment system supported by [Utterances](https://utteranc.es/)
+- **Artalk** comment system supported by [Artalk](https://artalk.js.org/)
+- **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)
+- **giscus** comment system supported by [giscus](https://giscus.app/)
 
 ### Extended Features
 
-* **PWA (Progressive Web App)** supported
-* **Sub Menu** supported
-* **Content Encryption** supported (Pages, Partial)
-* **Friends** page embedded template
-* **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/) or [Fuse.js](https://fusejs.io/)
-* **Twemoji** supported
-* Automatically **highlighting** code
-* **Copy code** to clipboard with one click
-* **Images gallery** supported by [lightgallery](https://github.com/sachinchoolur/lightgallery)
-* Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
-* Extended Markdown syntax for **ruby annotation**
-* Extended Markdown syntax for **fraction**
-* **Mathematical formula** supported by [KaTeX](https://katex.org/)
-* **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
-* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
-* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
-* **Bilibili player** shortcode
-* Kinds of **admonitions** shortcode
-* **Custom style** shortcode
-* **Custom script** shortcode
-* **Animated typing** supported by [TypeIt](https://typeitjs.com/)
-* **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
-* **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
-* **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
-* ...
+- **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/)
+- **Twemoji** supported
+- Automatically **highlighting** code
+- **Copy code** to clipboard with one click
+- **Images gallery** supported by [lightgallery](https://github.com/sachinchoolur/lightgallery)
+- Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
+- Extended Markdown syntax for **ruby annotation**
+- Extended Markdown syntax for **fraction**
+- **Mathematical formula** supported by [KaTeX](https://katex.org/)
+- **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
+- **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
+- **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+- **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
+- **Bilibili player** and **Douyin player** shortcode
+- Kinds of **admonitions** shortcode
+- **Custom style** shortcode
+- **Custom script** shortcode
+- **Animated typing** supported by [TypeIt](https://typeitjs.com/)
+- **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
+- **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
+- **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
+- Options to **cache remote image** locally
+- High **extensibility**
+- ...
+
+### Theme Components
+
+The FixIt theme balances **simplicity** and **extensibility** with extra [Hugo theme components](https://fixit.lruihao.cn/components/) for customization.
 
 ## Multilingual and i18n
 
 FixIt supports the following languages:
 
-* English
-* Simplified Chinese
-* Traditional Chinese
-* French
-* Polish
-* Brazilian Portuguese
-* Italian
-* Spanish
-* German
-* Serbian
-* Russian
-* Romanian
-* Vietnamese
-* [Contribute with a new language](https://github.com/hugo-fixit/FixIt/pulls)
+- English
+- Simplified Chinese
+- Traditional Chinese
+- French
+- Polish
+- Brazilian Portuguese
+- Italian
+- Spanish
+- German
+- Serbian
+- Russian
+- Romanian
+- Vietnamese
+- Hindi
+- [Contribute with a new language](https://github.com/hugo-fixit/FixIt/pulls)
 
-[Languages Compatibility](https://fixit.lruihao.cn/theme-documentation-basics/#language-compatibility)
+[Languages Compatibility](https://fixit.lruihao.cn/documentation/basics/#language-compatibility)
 
 ## [Roadmap](https://github.com/hugo-fixit/FixIt/projects/1)
 
-## [Changelog](/CHANGELOG.md)
-
 ## Questions, ideas, bugs, pull requests
 
 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.
@@ -182,57 +142,55 @@ Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contrib
 
 **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)
-
 ## 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)
-* [Font Awesome](https://fontawesome.com/)
-* [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
-* [autocomplete-js](https://github.com/algolia/autocomplete)
-* [Lunr.js](https://lunrjs.com/)
-* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [Fuse.js](https://fusejs.io/)
-* [lazysizes](https://github.com/aFarkas/lazysizes)
-* [object-fit-images](https://github.com/fregante/object-fit-images)
-* [Twemoji](https://github.com/twitter/twemoji)
-* [emoji-data](https://github.com/iamcal/emoji-data)
-* [lightgallery](https://github.com/sachinchoolur/lightgallery)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
-* [TypeIt](https://typeitjs.com/)
-* [KaTeX](https://katex.org/)
-* [mermaid](https://github.com/mermaid-js/mermaid)
-* [ECharts](https://echarts.apache.org/)
-* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* [APlayer](https://github.com/MoePlayer/APlayer)
-* [MetingJS](https://github.com/metowolf/MetingJS)
-* [Gitalk](https://github.com/gitalk/gitalk)
-* [Valine](https://valine.js.org/)
-* [cookieconsent](https://github.com/osano/cookieconsent)
-* [cell-watermark](https://github.com/Lruihao/watermark)
-* [不蒜子](http://busuanzi.ibruce.info/)
-* [pangu.js](https://github.com/vinta/pangu.js)
-* [Artalk](https://artalk.js.org/)
-* [Waline](https://waline.js.org/)
-* [Twikoo](https://twikoo.js.org/)
-* [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)
+- [normalize.css](https://github.com/necolas/normalize.css)
+- [Font Awesome](https://fontawesome.com/)
+- [Simple Icons](https://github.com/simple-icons/simple-icons)
+- [Animate.css](https://daneden.github.io/animate.css/)
+- [autocomplete-js](https://github.com/algolia/autocomplete)
+- [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
+- [Fuse.js](https://fusejs.io/)
+- [object-fit-images](https://github.com/fregante/object-fit-images)
+- [Twemoji](https://github.com/twitter/twemoji)
+- [emoji-data](https://github.com/iamcal/emoji-data)
+- [lightgallery](https://github.com/sachinchoolur/lightgallery)
+- [Sharer.js](https://github.com/ellisonleao/sharer.js)
+- [TypeIt](https://typeitjs.com/)
+- [KaTeX](https://katex.org/)
+- [mermaid](https://github.com/mermaid-js/mermaid)
+- [ECharts](https://echarts.apache.org/)
+- [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+- [APlayer](https://github.com/MoePlayer/APlayer)
+- [MetingJS](https://github.com/metowolf/MetingJS)
+- [Gitalk](https://github.com/gitalk/gitalk)
+- [Valine](https://valine.js.org/)
+- [cookieconsent](https://github.com/osano/cookieconsent)
+- [cell-watermark](https://github.com/Lruihao/watermark)
+- [不蒜子](http://busuanzi.ibruce.info/)
+- [pangu.js](https://github.com/vinta/pangu.js)
+- [Artalk](https://artalk.js.org/)
+- [Waline](https://waline.js.org/)
+- [Twikoo](https://twikoo.js.org/)
+- [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)
 
 </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)
-* [NexT](https://github.com/next-theme/hexo-theme-next)
+- [DoIt](https://github.com/HEIGE-PCloud/DoIt)
+- [NexT](https://github.com/next-theme/hexo-theme-next)
 
 </details>
 
@@ -242,14 +200,18 @@ FixIt is licensed under the **MIT** license. Check the [LICENSE file](LICENSE) f
 
 ## Author
 
-[Lruihao](https://lruihao.cn)
+Follow [Lruihao](https://github.com/Lruihao "Follow me on GitHub")
 
 ## Sponsor
 
-If you enjoy the theme, please consider buying me a coffee ☕️.
+[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
 
-* [PayPal](https://paypal.me/Lruihao)
-* [Alipay](images/alipay.gif)
-* [Wechat](images/wechatpay.gif)
+If you enjoy the theme, please consider buying me a coffee ☕️. Thanks!
 
-Thanks! ❤️
+- [PayPal](https://paypal.me/Lruihao)
+- [Alipay](images/alipay.jpg)
+- [Wechat](images/wechatpay.jpg)
+
+Don't forget to leave a ⭐️ if you like this theme, thanks!
+
+[^1]: The theme name is interesting: "leave it, keep it, love it, fix it". Appears and leaves, loves but cannot keep. Doesn't it look like that damn love and BUG? 🤣

README.zh-cn.md

@@ -1,180 +1,138 @@
 # FixIt 主题 | Hugo
 
 [![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.84.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.123.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
 
 👉 [English README](README.md) | 简体中文说明
 
-> [FixIt](https://github.com/hugo-fixit/FixIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
+[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)。
+它的原型基于 [LoveIt 主题](https://github.com/dillonzq/LoveIt)，[KeepIt 主题](https://github.com/Fastbyte01/KeepIt) 和 [LeaveIt 主题](https://github.com/liuzc/LeaveIt)。[^1]
 
-FixIt 主题继承了这些主题的优秀功能，并在此基础上添加了新的功能与优化，请阅读 [为什么选择 FixIt](#为什么选择-FixIt) 来了解更多。
+![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.webp)
 
-![Hugo Theme FixIt](https://fixit.lruihao.cn/images/Apple-Devices-Preview.jpg)
+## 主题文档
 
-## [立即开始](https://fixit.lruihao.cn/zh-cn/categories/documentation/)
+1. [安装篇](https://fixit.lruihao.cn/zh-cn/documentation/installation/)
+2. [入门篇](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/)
+3. [内容管理](https://fixit.lruihao.cn/zh-cn/documentation/content-management/)
+4. [进阶篇](https://fixit.lruihao.cn/zh-cn/documentation/advanced/)
 
-前往这篇 [文档](https://fixit.lruihao.cn/zh-cn/theme-documentation-basics/)，阅读关于安装与使用的详细指南。
+或者在本地运行 [文档站点](https://fixit.lruihao.cn/zh-cn/)，更多细节详见 [hugo-fixit/docs](https://github.com/hugo-fixit/docs)。
 
-或者，在本地构建 [文档](https://fixit.lruihao.cn/zh-cn/)：
+## 模板仓库
 
-> Gitee 镜像仓库：<https://gitee.com/lruihao/FixIt>
-
-```bash
-git clone --recursive https://github.com/hugo-fixit/FixIt.git && cd FixIt
-
-hugo server --source=docs
-```
-
-除此之外，还有 [FixIt 主题维基](https://github.com/hugo-fixit/FixIt/wiki)。
-
-## 安装或迁移
-
-如果你现在正在使用 LoveIt 主题（或者一些其他的主题），你可以很容易地迁移至 FixIt。
-
-你可以将这个主题仓库添加为你的网站目录的子模块。或者，您可以通过其他方式 [安装主题](https://fixit.lruihao.cn/zh-cn/theme-documentation-basics/#install-theme)。
-
-```bash
-git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
-```
-
-之后，你可以在站点目录通过这条命令来将主题更新至最新版本：
-
-```bash
-git submodule update --remote --merge
-```
-
-接着，前往 `config.toml` 并将默认主题更改为 `FixIt`。
-
-```diff
-- theme = "LoveIt"
-+ theme = "FixIt"
-```
-
-这样就完成了迁移工作，现在一切准备就绪 🎉
-
-## 为什么选择 FixIt
-
-FixIt 主题继承了 LoveIt 等主题的优秀功能，并在它们的基础上添加了新的功能与优化，详见 [特性](#特性)。除此之外，FixIt 主题还有以下优点：
-
-* 完善的中英文官方文档
-* 社区支持：主题官网、Discussions 和官方 QQ 群
-* 持续积极地更新
-* 不断收纳各方的建议和想法
-* 高度开放主题可自定义部分
-
-总之，如果你更偏好 FixIt 主题的设计语言和自由度，如果你和我一样喜欢个性化自定义主题，那么，FixIt 主题可能是更适合你。  
+- [hugo-fixit/hugo-fixit-start](https://github.com/hugo-fixit/hugo-fixit-start/generate)
+- [hugo-fixit/hugo-fixit-start1](https://github.com/hugo-fixit/hugo-fixit-start1/generate)
+- [hugo-fixit/docs](https://github.com/hugo-fixit/docs/generate)
+- [Lruihao/hugo-blog](https://github.com/Lruihao/hugo-blog/generate)
 
 ## 谁在用 FixIt
 
 为了直观地浏览主题特性，这里有一些基于 **FixIt** 主题渲染的 [预览网站](https://fixit.lruihao.cn/zh-cn/friends/)。
 
-| 站点                                                          | 仓库                                                         |
-| :----------------------------------------------------------- | :---------------------------------------------------------- |
-| [FixIt 主题官网](https://fixit.lruihao.cn), [FixIt 预览版](https://pre.fixit.lruihao.cn) | [hugo-fixit/docs](https://github.com/hugo-fixit/docs)        |
-| [FixIt 博客模板 - Git](https://demo.fixit.lruihao.cn)   | [hugo-fixit/hugo-fixit-blog-git](https://github.com/hugo-fixit/hugo-fixit-blog-git) |
-| [FixIt 博客模板 - Go](https://demo.fixit.lruihao.cn)    | [hugo-fixit/hugo-fixit-blog-go](https://github.com/hugo-fixit/hugo-fixit-blog-go) |
-| [李瑞豪的博客](https://lruihao.cn)                       | [Lruihao/hugo-blog](https://github.com/Lruihao/hugo-blog)    |
-
 ## 特性
 
 ### 性能和 SEO
 
-* **性能**优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， 99/100 的移动设备得分和 100/100 的桌面设备得分
-* 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
-* 支持 **[Google Analytics](https://analytics.google.com/analytics)**
-* 支持 **[Fathom Analytics](https://usefathom.com/)**
-* 支持搜索引擎的**网站验证** (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
-* 支持所有第三方库的 **CDN**
-* 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为**懒加载**
+- **性能**优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中，99/100 的移动设备得分和 100/100 的桌面设备得分
+- 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
+- 支持 **[Google Analytics](https://analytics.google.com/analytics)**
+- 支持 **[Fathom Analytics](https://usefathom.com/)**
+- 支持搜索引擎的**网站验证** (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
+- 支持所有第三方库的 **CDN**
 
 ### 外观和布局
 
-* **响应式**布局
-* **浅色/深色** 主题模式
-* 全局一致的**设计语言**
-* 支持**分页**
-* 易用和自动展开的**文章目录**
-* 支持**多语言**和国际化
-* 美观的 **CSS 动画**
+- **响应式**布局
+- **浅色/深色** 主题模式
+- 全局一致的**设计语言**
+- 支持**分页**
+- 易用和自动展开的**文章目录**
+- 支持**多语言**和国际化
+- 美观的 **CSS 动画**
 
 ### 社交和评论系统
 
-* 支持 **[Gravatar](https://gravatar.com)** 头像
-* 支持本地**头像**
-* 支持多达 **87** 种社交链接
-* 支持多达 **28** 种网站分享
-* 支持 **[Disqus](https://disqus.com)** 评论系统
-* 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
-* 支持 **[Valine](https://valine.js.org/)** 评论系统
-* 支持 **[Waline](https://waline.js.org/)** 评论系统
-* 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
-* 支持 **[Telegram comments](https://comments.app/) 评论**系统
-* 支持 **[Commento](https://commento.io/)** 评论系统
-* 支持 **[Utterances](https://utteranc.es/)** 评论系统
-* 支持 **[Artalk](https://artalk.js.org/)** 评论系统
-* 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统
-* 支持 **[giscus](https://giscus.app/zh-CN/)** 评论系统
+- 支持 **[Gravatar](https://gravatar.com)** 头像
+- 支持本地**头像**
+- 支持多达 **87** 种社交链接
+- 支持多达 **28** 种网站分享
+- 支持 **[Disqus](https://disqus.com)** 评论系统
+- 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
+- 支持 **[Valine](https://valine.js.org/)** 评论系统
+- 支持 **[Waline](https://waline.js.org/)** 评论系统
+- 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
+- 支持 **[Telegram comments](https://comments.app/) 评论**系统
+- 支持 **[Commento](https://commento.io/)** 评论系统
+- 支持 **[Utterances](https://utteranc.es/)** 评论系统
+- 支持 **[Artalk](https://artalk.js.org/)** 评论系统
+- 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统
+- 支持 **[giscus](https://giscus.app/zh-CN/)** 评论系统
 
 ### 扩展功能
 
-* 支持**渐进式网页应用**
-* 支持**二级菜单**
-* 支持**内容加密**（页面、局部）
-* 支持**友情链接**的页面模板
-* 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 或 [Fuse.js](https://fusejs.io/) 的**搜索**
-* 支持 **Twemoji**
-* 支持**代码高亮**
-* 一键**复制代码**到剪贴板
-* 支持基于 [lightgallery](https://github.com/sachinchoolur/lightgallery) 的**图片画廊**
-* 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
-* 支持**上标注释**的扩展 Markdown 语法
-* 支持**分数**的扩展 Markdown 语法
-* 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
-* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
-* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
-* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
-* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
-* 支持 **Bilibili 视频** shortcode
-* 支持多种**注释**的 shortcode
-* 支持**自定义样式**的 shortcode
-* 支持**自定义脚本**的 shortcode
-* 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
-* 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
-* 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
-* 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
-* ...
+- 支持**渐进式网页应用**
+- 支持**二级菜单**
+- 支持**内容加密**（页面、局部）
+- 支持**友情链接**的页面模板
+- 支持基于 [algolia](https://www.algolia.com/) 或 [Fuse.js](https://fusejs.io/) 的**搜索**
+- 支持 **Twemoji**
+- 支持**代码高亮**
+- 一键**复制代码**到剪贴板
+- 支持基于 [lightgallery](https://github.com/sachinchoolur/lightgallery) 的**图片画廊**
+- 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
+- 支持**上标注释**的扩展 Markdown 语法
+- 支持**分数**的扩展 Markdown 语法
+- 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
+- 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
+- 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
+- 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
+- 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
+- 支持 **Bilibili 视频** 和 **抖音视频** shortcode
+- 支持多种**注释**的 shortcode
+- 支持**自定义样式**的 shortcode
+- 支持**自定义脚本**的 shortcode
+- 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
+- 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
+- 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
+- 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
+- 支持本地**缓存远程图床图片**
+- 高**扩展性**
+- ……
+
+### 主题组件
+
+FixIt 主题旨在在 **简洁性** 和 **可扩展性** 之间取得平衡。为此，我们开发了一系列额外的 [Hugo 主题组件](https://fixit.lruihao.cn/zh-cn/components/) 供用户选择。
 
 ## 多语言和国际化
 
 FixIt 支持下列语言：
 
-* 英语
-* 简体中文
-* 繁体中文
-* 法语
-* 波兰语
-* 巴西葡萄牙语
-* 意大利语
-* 西班牙语
-* 德语
-* 塞尔维亚语
-* 俄语
-* 罗马尼亚语
-* 越南语
-* [贡献一种新的语言](https://github.com/hugo-fixit/FixIt/pulls)
+- 英语
+- 简体中文
+- 繁体中文
+- 法语
+- 波兰语
+- 巴西葡萄牙语
+- 意大利语
+- 西班牙语
+- 德语
+- 塞尔维亚语
+- 俄语
+- 罗马尼亚语
+- 越南语
+- 印地语
+- [贡献一种新的语言](https://github.com/hugo-fixit/FixIt/pulls)
 
 [语言兼容性](https://fixit.lruihao.cn/zh-cn/theme-documentation-basics/#language-compatibility)
 
 ## [路线图](https://github.com/hugo-fixit/FixIt/projects/1)
 
-## [更新日志](/CHANGELOG.md)
-
 ## 问题、想法、bugs 和 PRs
 
-所有的反馈都是欢迎的！详见 [议题](https://github.com/hugo-fixit/FixIt/issues) 或者 [讨论](https://github.com/hugo-fixit/FixIt/discussions)。
+所有的反馈都是欢迎的！详见 [议题](https://github.com/hugo-fixit/FixIt/issues) 或者 [讨论](https://github.com/hugo-fixit/FixIt/discussions) 或者加入 QQ 群：`814031017`。
 
 ## 参与贡献
 
@@ -182,76 +140,82 @@ FixIt 支持下列语言：
 
 确保在贡献和参与讨论时遵守 [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)。
 
-**贡献时，请先通过此存储库上的问题讨论您希望进行的更改，然后再进行实际更改**。
+**贡献时，请先通过此存储库上的问题讨论你希望进行的更改，然后再进行实际更改**。
 
-## [所有贡献者](contributors.md)
+## 镜像
+
+- Gitee 镜像仓库：<https://gitee.com/lruihao/FixIt>
 
 ## 致谢
 
-<details open>
+感谢 [所有贡献者](https://github.com/hugo-fixit/FixIt/graphs/contributors) 的支持！
+
+<details>
 <summary>FixIt 主题中用到了以下项目，感谢它们的作者：</summary>
 
-* [normalize.css](https://github.com/necolas/normalize.css)
-* [Font Awesome](https://fontawesome.com/)
-* [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
-* [autocomplete-js](https://github.com/algolia/autocomplete)
-* [Lunr.js](https://lunrjs.com/)
-* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [Fuse.js](https://fusejs.io/)
-* [lazysizes](https://github.com/aFarkas/lazysizes)
-* [object-fit-images](https://github.com/fregante/object-fit-images)
-* [Twemoji](https://github.com/twitter/twemoji)
-* [emoji-data](https://github.com/iamcal/emoji-data)
-* [lightgallery](https://github.com/sachinchoolur/lightgallery)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
-* [TypeIt](https://typeitjs.com/)
-* [KaTeX](https://katex.org/)
-* [mermaid](https://github.com/mermaid-js/mermaid)
-* [ECharts](https://echarts.apache.org/)
-* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* [APlayer](https://github.com/MoePlayer/APlayer)
-* [MetingJS](https://github.com/metowolf/MetingJS)
-* [Gitalk](https://github.com/gitalk/gitalk)
-* [Valine](https://valine.js.org/)
-* [cookieconsent](https://github.com/osano/cookieconsent)
-* [cell-watermark](https://github.com/Lruihao/watermark)
-* [不蒜子](http://busuanzi.ibruce.info/)
-* [pangu.js](https://github.com/vinta/pangu.js)
-* [Artalk](https://artalk.js.org/)
-* [Waline](https://waline.js.org/)
-* [Twikoo](https://twikoo.js.org/)
-* [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)
+- [normalize.css](https://github.com/necolas/normalize.css)
+- [Font Awesome](https://fontawesome.com/)
+- [Simple Icons](https://github.com/simple-icons/simple-icons)
+- [Animate.css](https://daneden.github.io/animate.css/)
+- [autocomplete-js](https://github.com/algolia/autocomplete)
+- [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
+- [Fuse.js](https://fusejs.io/)
+- [object-fit-images](https://github.com/fregante/object-fit-images)
+- [Twemoji](https://github.com/twitter/twemoji)
+- [emoji-data](https://github.com/iamcal/emoji-data)
+- [lightgallery](https://github.com/sachinchoolur/lightgallery)
+- [Sharer.js](https://github.com/ellisonleao/sharer.js)
+- [TypeIt](https://typeitjs.com/)
+- [KaTeX](https://katex.org/)
+- [mermaid](https://github.com/mermaid-js/mermaid)
+- [ECharts](https://echarts.apache.org/)
+- [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+- [APlayer](https://github.com/MoePlayer/APlayer)
+- [MetingJS](https://github.com/metowolf/MetingJS)
+- [Gitalk](https://github.com/gitalk/gitalk)
+- [Valine](https://valine.js.org/)
+- [cookieconsent](https://github.com/osano/cookieconsent)
+- [cell-watermark](https://github.com/Lruihao/watermark)
+- [不蒜子](http://busuanzi.ibruce.info/)
+- [pangu.js](https://github.com/vinta/pangu.js)
+- [Artalk](https://artalk.js.org/)
+- [Waline](https://waline.js.org/)
+- [Twikoo](https://twikoo.js.org/)
+- [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)
 
 </details>
 
-<details open>
+<details>
 <summary>FixIt 主题还借鉴了以下项目的部分功能，同样感谢它们的作者：</summary>
 
-* [DoIt](https://github.com/HEIGE-PCloud/DoIt)
-* [NexT](https://github.com/next-theme/hexo-theme-next)
+- [DoIt](https://github.com/HEIGE-PCloud/DoIt)
+- [NexT](https://github.com/next-theme/hexo-theme-next)
 
 </details>
 
 ## 许可协议
 
-FixIt 根据 **MIT** 许可协议授权。 更多信息请查看 [LICENSE 文件](LICENSE)。
+FixIt 根据 **MIT** 许可协议授权。更多信息请查看 [LICENSE 文件](LICENSE)。
 
 ## 作者
 
-[Lruihao](https://lruihao.cn)
+Follow [Lruihao](https://github.com/Lruihao "在 GitHub 上关注我")
 
 ## 赞助支持
 
-如果你喜爱这个主题，请考虑给我买杯咖啡 ☕️.
+[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
 
-* [PayPal](https://paypal.me/Lruihao)
-* [支付宝](images/alipay.gif)
-* [微信支付](images/wechatpay.gif)
+如果你喜爱这个主题，请考虑给我买杯咖啡 ☕️，谢谢！
 
-谢谢！❤️
+- [PayPal](https://paypal.me/Lruihao)
+- [支付宝](images/alipay.jpg)
+- [微信支付](images/wechatpay.jpg)
+
+如果你喜欢这个主题，别忘了留下一颗 ⭐️ 哦，谢谢！
+
+[^1]: 主题名称趣谈：“leave it, keep it，love it，fix it”。出现又离开，爱而不得。这像不像那该死的爱情和 BUG 呢？🤣

SECURITY.md

@@ -0,0 +1,18 @@
+# Security Policy
+
+## 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         | :x:                | :white_check_mark:   |
+
+## Reporting a Vulnerability
+
+If you want to report a vulnerability, create a new issue at https://github.com/hugo-fixit/FixIt/issues. Any vulnerabilities will be fixed as soon as possible.

archetypes/default.md

@@ -1,8 +1,9 @@
 ---
-title: "{{ replace .TranslationBaseName "-" " " | title }}"
-subtitle: ""
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
 date: {{ .Date }}
-description: ""
-keywords: ""
-comment: false
+slug: {{ substr .File.UniqueID 0 7 }}
+description:
+keywords:
+draft: true
 ---

archetypes/friends.md

@@ -1,18 +1,22 @@
 ---
-title: "{{ replace .TranslationBaseName "-" " " | title }}"
-subtitle: ""
-type: "friends"
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
+layout: friends
 date: {{ .Date }}
-description: "{{ .Site.Author.name }}'s friends"
-keywords: 
-  - Hugo
-  - friends template
+description: "{{ .Site.Params.author.name }}'s friends"
+keywords:
+  - 'Hugo FixIt'
+  - 'friends template'
+  - 友情链接
 comment: false
 ---
 
 <!-- When you set data `friends.yml` in `yourProject/data/` directory, it will be automatically loaded here. -->
+
 ---
+
 <!-- You can define additional content below for this page. -->
+
 ## Base info
 
 ```yaml
@@ -25,7 +29,9 @@ comment: false
 ## Friendly Reminder
 
 {{< admonition info "Notice" true >}}
+
 1. If you want to exchange link, please leave a comment in the above format. (personal non-commercial blogs / websites only)
 2. :(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.
+
 {{< /admonition >}}

archetypes/offline.md

@@ -1,10 +0,0 @@
----
-type: "offline"
-description: "{{ T "offlineTitle" }} - {{ .Site.Title }}"
-keywords: 
-  - PWA
-  - offline
-  - 离线
----
-
-<!-- You need do nothing for this page. -->

archetypes/post-bundle/index.md

@@ -1,45 +1,43 @@
 ---
-title: "{{ replace .TranslationBaseName "-" " " | title }}"
-subtitle: ""
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
 date: {{ .Date }}
+slug: {{ substr .File.UniqueID 0 7 }}
 draft: true
-author: ""
-authorLink: ""
-authorEmail: ""
-description: ""
-keywords: ""
-license: ""
+author:
+  name:
+  link:
+  email:
+  avatar:
+description:
+keywords:
+license:
 comment: false
 weight: 0
-
 tags:
-- draft
+  - draft
 categories:
-- draft
-
+  - draft
 hiddenFromHomePage: false
 hiddenFromSearch: false
-
-summary: ""
+hiddenFromRss: false
+hiddenFromRelated: false
+summary:
 resources:
-- name: featured-image
-  src: featured-image.jpg
-- name: featured-image-preview
-  src: featured-image-preview.jpg
-
-toc:
-  enable: true
-math:
-  enable: false
+  - name: featured-image
+    src: featured-image.jpg
+  - name: featured-image-preview
+    src: featured-image-preview.jpg
+toc: true
+math: false
 lightgallery: false
-seo:
-  images: []
-
+password:
+message:
 repost:
   enable: true
-  url: ""
+  url:
 
-# See details front matter: https://fixit.lruihao.cn/theme-documentation-content/#front-matter
+# See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter
 ---
 
 <!--more-->

archetypes/posts.md

@@ -1,45 +1,43 @@
 ---
-title: "{{ replace .TranslationBaseName "-" " " | title }}"
-subtitle: ""
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
 date: {{ .Date }}
+slug: {{ substr .File.UniqueID 0 7 }}
 draft: true
-author: ""
-authorLink: ""
-authorEmail: ""
-description: ""
-keywords: ""
-license: ""
+author:
+  name:
+  link:
+  email:
+  avatar:
+description:
+keywords:
+license:
 comment: false
 weight: 0
-
 tags:
-- draft
+  - draft
 categories:
-- draft
-
+  - draft
 hiddenFromHomePage: false
 hiddenFromSearch: false
-
-summary: ""
+hiddenFromRss: false
+hiddenFromRelated: false
+summary:
 resources:
-- name: featured-image
-  src: featured-image.jpg
-- name: featured-image-preview
-  src: featured-image-preview.jpg
-
-toc:
-  enable: true
-math:
-  enable: false
+  - name: featured-image
+    src: featured-image.jpg
+  - name: featured-image-preview
+    src: featured-image-preview.jpg
+toc: true
+math: false
 lightgallery: false
-seo:
-  images: []
-
+password:
+message:
 repost:
   enable: true
-  url: ""
+  url:
 
-# See details front matter: https://fixit.lruihao.cn/theme-documentation-content/#front-matter
+# See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter
 ---
 
 <!--more-->

assets/css/_core/_base.scss

@@ -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;
 
@@ -44,7 +29,6 @@ body {
   background-color: $global-background-color;
   color: $global-font-color;
   @include overflow-wrap(break-word);
-  scrollbar-color: auto;
 
   &[data-theme='dark'] {
     color: $global-font-color-dark;
@@ -72,6 +56,7 @@ abbr[title] {
 
 @include link(true, true);
 
+@import '../_partials/scrollbar';
 @import '../_partials/mask';
 @import '../_partials/img';
 @import '../_partials/icon';

assets/css/_core/_breadcrumb.scss

@@ -0,0 +1,49 @@
+.breadcrumb-container {
+  padding-inline: 1rem;
+  font-size: 0.75rem;
+  background-color: $global-background-color;
+  @include z-index(1);
+  @extend .print-d-none;
+
+  [data-theme='dark'] & {
+    background-color: $global-background-color-dark;
+  }
+
+  &.sticky {
+    position: sticky;
+    top: $header-height;
+  }
+
+  .breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.5rem 0;
+    margin: 0 auto;
+    list-style: none;
+    border-bottom: 1px inset $global-border-color;
+    @extend %page-style;
+
+    [data-theme='dark'] & {
+      border-bottom-color: $global-border-color-dark;
+    }
+
+    .breadcrumb-item {
+      display: flex;
+
+      +.breadcrumb-item::before {
+        content: "/";
+        display: inline-block;
+        padding-inline: 0.5rem;
+        color: $global-font-secondary-color;
+
+        [data-theme='dark'] & {
+          color: $global-font-secondary-color-dark;
+        }
+      }
+
+      &.active {
+        color: var(--#{$prefix}secondary);
+      }
+    }
+  }
+}

assets/css/_core/_common.scss

@@ -30,28 +30,24 @@
 
 .ms-1,
 .mx-1 {
-  margin-left: 0.25rem !important;
+  margin-left: 0.25em !important;
 }
 .me-1,
 .mx-1 {
-  margin-right: 0.25rem !important;
+  margin-right: 0.25em !important;
 }
 .ps-1,
 .px-1 {
-  padding-left: 0.25rem !important;
+  padding-left: 0.25em !important;
 }
 .pe-1,
 .px-1 {
-  padding-right: 0.25rem !important;
+  padding-right: 0.25em !important;
 }
 
 @each $color, $value in $theme-colors {
   .text-#{$color} {
-    color: #{$value} !important;
-
-    [data-theme='dark'] & {
-      color: #{darken($value, 5%)} !important;
-    }
+    color: var(--#{$prefix}#{$color}) !important;
   }
 }
 

assets/css/_core/_footer.scss

@@ -4,6 +4,7 @@ footer {
   text-align: center;
   line-height: 1.25rem;
   padding: 1rem 0;
+  @extend .print-d-none;
 
   .footer-container {
     display: flex;
@@ -19,10 +20,6 @@ footer {
         margin-right: 0.25rem;
       }
 
-      .fixit-icon {
-        top: 0.25em;
-      }
-
       .animate-icon {
         color: #dc143c;
         animation: icon-animate 1.33s ease-in-out infinite;
@@ -40,23 +37,23 @@ footer {
 @keyframes icon-animate {
   0%,
   100% {
-    transform: scale(1);
+    @include transform(scale(1));
   }
 
   10%,
   30% {
-    transform: scale(0.9);
+    @include transform(scale(0.9));
   }
 
   20%,
   40%,
   60%,
   80% {
-    transform: scale(1.1);
+    @include transform(scale(1.1));
   }
 
   50%,
   70% {
-    transform: scale(1.1);
+    @include transform(scale(1.1));
   }
 }

assets/css/_core/_header.scss

@@ -1,8 +1,9 @@
 header {
   width: 100%;
-  z-index: 150;
   background-color: $header-background-color;
+  @include z-index(2);
   @include transition(box-shadow 0.3s ease);
+  @extend .print-d-none;
 
   [data-theme='dark'] & {
     background-color: $header-background-color-dark;
@@ -10,6 +11,10 @@ header {
 
   &:hover {
     @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
+
+    [data-theme='dark'] & {
+      @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1));
+    }
   }
 }
 
@@ -82,7 +87,16 @@ header {
       }
     }
 
-    &.language,
+    .menu-link i {
+      @include transform(perspective(1rem));
+      @include transition(transform 0.4s ease);
+    }
+
+    .menu-link:hover i {
+      @include transform(perspective(1rem) translateZ(0.2rem));
+    }
+
+    &.language-switch,
     &.theme-switch {
       cursor: pointer;
     }
@@ -216,10 +230,13 @@ header {
       flex-wrap: nowrap;
       float: right;
 
-      >.menu-item:hover {
-        & .sub-menu {
+      >.menu-item {
+        &:hover .sub-menu {
           display: block;
-          transform: translateX(-0.5rem);
+          @include transform(translateX(-0.5rem));
+        }
+        &.language-switch:hover .sub-menu {
+          @include transform(translateX(calc(1.75rem - 100%)));
         }
       }
 
@@ -230,20 +247,15 @@ header {
           width: 0;
           margin: 0.125rem 0.25rem;
           padding: 0;
-          border-left: 1px dashed lighten($global-font-secondary-color, 20%);
+          border-left: 1px dashed lighten($global-font-secondary-color, 15%);
 
           [data-theme='dark'] & {
-            border-left-color: darken($global-font-secondary-color-dark, 20%);
+            border-left-color: darken($global-font-secondary-color-dark, 15%);
           }
         }
-
-        &.language {
-          margin-right: 0;
-        }
       }
 
       .sub-menu {
-        z-index: 160;
         position: absolute;
         margin: 0;
         padding: 0.25rem 0;
@@ -253,14 +265,14 @@ header {
         border: 1px solid $global-border-color;
         background-color: $header-background-color;
         @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;
+          @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1));
         }
 
-        @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
-
         .menu-item {
           height: $header-height*0.5;
           line-height: $header-height*0.5;
@@ -351,8 +363,14 @@ header {
       background: $header-background-color;
       border-top: 2px solid $global-border-color;
       display: none;
-      padding: 0.5rem 0 0;
+      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'] & {
+        @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
+      }
 
       .search-wrapper {
         display: flex;
@@ -361,6 +379,14 @@ header {
         box-sizing: border-box;
         padding: ($header-height - 2.5rem) / 2 1rem;
         line-height: 2.5rem;
+        position: sticky;
+        top: 0;
+        background-color: $header-background-color;
+        @include z-index(0, 50);
+ 
+        [data-theme='dark'] & {
+          background-color: $header-background-color-dark;
+        }
       }
 
       .search {
@@ -392,7 +418,7 @@ header {
         line-height: 2.5rem;
         padding: 0 1rem;
 
-        &:hover {
+        &:not(.menu-system):hover {
           background-color: lighten($global-font-secondary-color, 24%);
 
           [data-theme='dark'] & {
@@ -417,19 +443,37 @@ header {
             max-width: 80%;
           }
         }
-        
-        &.theme-switch,
-        &.language {
-          text-align: center;
+      }
+
+      .menu-system {
+        display: flex;
+        justify-content: center;
+        gap: 0.25rem;
+        position: sticky;
+        bottom: 0;
+        line-height: 2.5rem;
+        padding: 0 1rem;
+        background-color: $header-background-color;
+ 
+        [data-theme='dark'] & {
+          background-color: $header-background-color-dark;
         }
 
-        .language-select {
-          position: absolute;
-          opacity: 0;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
+        .menu-system-item {
+          padding-inline: 0.5rem;
+        }
+
+        .language-switch {
+          position: relative;
+
+          .language-select {
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+          }
         }
       }
 
@@ -483,10 +527,14 @@ header {
 
 .search-dropdown {
   position: fixed;
-  z-index: 200;
   top: $header-height;
+  @include z-index(2);
   @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
 
+  [data-theme='dark'] & {
+    @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
+  }
+
   &.desktop {
     right: 2rem;
     width: 30rem;

assets/css/_core/_layout.scss

@@ -8,28 +8,34 @@
   main {
     flex: 1 0 auto;
 
-    aside:first-child {
-      order: 2;
+    aside {
+      flex: 1;
+      padding: 0.5rem;
+
+      &:not(:has(~ aside)) {
+        display: none;
+      }
     }
 
     &.container {
       display: flex;
       align-items: flex-start;
       justify-content: center;
-      padding: 0 1rem;
+      padding-inline: 1rem;
+      gap: 0.5rem;
+
+      &.container-reverse {
+        flex-direction: row-reverse;
+      }
 
       &:has(.home:not(.posts)) {
         align-items: center;
       }
     }
-
-    &.container-reverse {
-      @extend .container;
-      flex-direction: row-reverse;
-    }
   }
 }
 
-@import "_core/header";
-@import "_core/footer";
-@import "_core/pagination";
+@import "_header";
+@import "_breadcrumb";
+@import "_footer";
+@import "_pagination";

assets/css/_core/_media.scss

@@ -1,5 +1,5 @@
 @media only screen and (min-width: 1441px) {
-  .page {
+  %page-style {
     width: 60%;
 
     [data-page-style='wide'] & {
@@ -10,40 +10,20 @@
       max-width: 800px;
     }
   }
-
-  aside {
-    width: 20%;
-
-    [data-page-style='wide'] & {
-      width: 18%;
-    }
-
-    [data-page-style='narrow'] & {
-      width: calc(50% - 400px);
-    }
-  }
 }
 
 @media only screen and (max-width: 1440px) {
-  .page {
+  %page-style {
     width: 56%;
 
     [data-page-style='wide'] & {
       width: 60%;
     }
   }
-
-  aside {
-    width: 22%;
-
-    [data-page-style='wide'] & {
-      width: 20%;
-    }
-  }
 }
 
 @media only screen and (max-width: 1200px) {
-  .page {
+  %page-style {
     width: 52%;
 
     [data-page-style='wide'] & {
@@ -51,14 +31,6 @@
     }
   }
 
-  aside {
-    width: 24%;
-
-    [data-page-style='wide'] & {
-      width: 22%;
-    }
-  }
-
   #header-desktop .header-wrapper {
     padding-right: 1rem;
   }
@@ -69,6 +41,10 @@
 }
 
 @media only screen and (max-width: 960px) {
+  %page-style {
+    width: 80% !important;
+  }
+  
   aside {
     display: none !important;
   }
@@ -77,15 +53,28 @@
     display: block;
   }
 
-  .page {
-    width: 80% !important;
-  }
-
   #header-desktop .header-wrapper {
     padding-left: 1rem;
   }
 }
 
+
+@media only screen and (min-width: 681px) {
+  .breadcrumb-container.sticky {
+    body:not([data-header-desktop='sticky']) & {
+      top: 0;
+    }
+    // adjust the scroll margin top of the content anchors on the page
+    body:not([data-header-desktop='auto']) &+.container .content [id] {
+      scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
+    }
+  }
+
+  [data-header-desktop='normal'] .page .content [id] {
+    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+  }
+}
+
 @media only screen and (max-width: 680px) {
   #header-desktop {
     display: none;
@@ -100,18 +89,27 @@
     display: none !important;
   }
 
-  .page {
-    width: 100% !important;
-
-    .content {
-      [id] {
-        [data-header-mobile='normal'] & {
-          scroll-margin-top: 0;
-        }
-      }
+  .breadcrumb-container.sticky {
+    body:not([data-header-mobile='sticky']) & {
+      top: 0;
     }
+    // adjust the scroll margin top of the content anchors on the page
+    body:not([data-header-mobile='auto']) &+.container .content [id] {
+      scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
+    }
+  }
 
-    .categories-card {
+  [data-header-mobile='normal'] .page .content [id] {
+    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+  }
+  
+  %page-style {
+    width: 100% !important;
+  }
+
+  .page {
+    .categories-card,
+    .collections-card {
       .card-item {
         width: 100%;
       }
@@ -123,7 +121,7 @@
       font-size: 0.618rem;
     }
   }
-  
+
   .pagination .page-item {
     margin: 0 5px;
   }
@@ -139,10 +137,12 @@
     width: 100% !important;
     padding-top: 0 !important;
 
-    .single-title,
-    .single-subtitle,
-    .post-meta {
-      text-align: center;
+    &.single {
+      .single-title,
+      .single-subtitle,
+      .post-meta {
+        text-align: center;
+      }
     }
 
     h1:not(.single-title),
@@ -155,21 +155,7 @@
     }
   }
 
-  .print-d-none,
-  header,
-  footer .footer-line:not(.powered):not(.copyright),
-  #toc-auto,
-  .comment-visitors,
-  .comment-count,
-  .code-header>.ellipses,
-  .code-header>.edit,
-  .code-header>.copy,
-  .post-info-share,
-  .post-info-more section:last-child,
-  .post-nav,
-  .fixed-buttons,
-  #comments,
-  .github-corner {
+  .print-d-none {
     display: none !important;
   }
 }

assets/css/_core/_patch.scss

@@ -0,0 +1,20 @@
+/* Resolve style conflicts between third-party plugins */
+
+@keyframes #{$prefix}pulse {
+  from {
+    @include transform(scale3d(1, 1, 1));
+  }
+
+  50% {
+    @include transform(scale3d(1.05, 1.05, 1.05));
+  }
+
+  to {
+    @include transform(scale3d(1, 1, 1));
+  }
+}
+
+.animate__pulse {
+  -webkit-animation-name: #{$prefix}pulse !important;
+  animation-name: #{$prefix}pulse !important;
+}

assets/css/_core/_root.scss

@@ -5,7 +5,31 @@
   @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] {
+  @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%)};
 }

assets/css/_mixin/_compatibility.scss

@@ -99,3 +99,9 @@
   object-fit: $value;
   font-family: 'object-fit: #{$value};';
 }
+
+@mixin user-select($value) {
+  -webkit-user-select: $value !important;
+  -moz-user-select: $value !important;
+  user-select: $value !important;
+}

assets/css/_mixin/_index.scss

@@ -2,3 +2,5 @@
 @import '_link';
 @import '_blur';
 @import '_details';
+@import '_scrollbar-width';
+@import '_z-index';

assets/css/_mixin/_link.scss

@@ -1,8 +1,14 @@
-@mixin link($light, $dark) {
+/**
+ * Link mixin
+ * @param {Boolean} $light use global link color
+ * @param {Boolean} $dark use global link color dark
+ * @param {String} $decoration text-decoration, default none
+ */
+@mixin link($light, $dark, $decoration: none) {
   a,
   a::before,
   a::after {
-    text-decoration: none;
+    text-decoration: $decoration;
 
     @if $light {
       color: $global-link-color;

assets/css/_mixin/_scrollbar-width.scss

@@ -0,0 +1,4 @@
+@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
+  --#{$prefix}scrollbar-width: #{$width};
+  --#{$prefix}scrollbar-width-legacy: #{$widthLegacy};
+}

assets/css/_mixin/_z-index.scss

@@ -0,0 +1,3 @@
+@mixin z-index($level, $diff: 0) {
+  z-index: ($level * 100) + $diff;
+}

assets/css/_page/_friends.scss

@@ -34,7 +34,7 @@
 }
 .friend-link:hover {
   background: #fff;
-  transform: scale(1.03);
+  @include transform(scale(1.03));
   box-shadow: 0 0 3px #aaa;
 }
 .friend-avatar {

assets/css/_page/_home.scss

@@ -14,6 +14,10 @@
         @include box-shadow(0 0 0 0.3618em rgba(0, 0, 0, 0.05));
         @include transition(all 0.4s ease);
 
+        [data-theme='dark'] & {
+          @include box-shadow(0 0 0 0.3618em rgba(255, 255, 255, 0.05));
+        }
+
         &:hover {
           position: relative;
           @include transform(translateY(-0.75rem));
@@ -25,7 +29,10 @@
       font-size: 1.25rem;
       font-weight: bold;
       margin: 0;
-      padding: 0.5rem;
+
+      &:not(:empty) {
+        padding: 0.5rem;
+      }
     }
 
     .home-subtitle {
@@ -90,7 +97,8 @@
 
     .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);
@@ -101,10 +109,7 @@
         height: 100%;
         left: 0;
         top: 0;
-
-        &.lazyloaded {
-          @include object-fit(cover);
-        }
+        @include object-fit(cover);
       }
 
       &:hover {

assets/css/_page/_index.scss

@@ -1,13 +1,10 @@
 .page {
   position: relative;
+  @extend %page-style;
 
   .content {
     [id] {
-      scroll-margin-top: $header-height;
-
-      [data-header-desktop='normal'] & {
-        scroll-margin-top: 0;
-      }
+      scroll-margin-top: var(--#{$prefix}scroll-mt);
     }
   }
 

assets/css/_page/_single.scss

@@ -1,5 +1,6 @@
 @import '../_partials/_single/toc';
 @import '../_partials/_single/fixit-decryptor';
+@import '../_partials/_single/collections';
 
 .single {
   .single-title {
@@ -8,16 +9,20 @@
     font-size: 1.6rem;
     font-weight: bold;
     line-height: 140%;
-  
-    .icon-repost {
-      color: var(--#{$prefix}success);
+
+    .icon-pin {
       display: inline-block;
       width: max-content;
-      margin-right: 0.25rem;
+      transform: rotate(30deg);
+      margin-right: 0.25em;
+      color: var(--#{$prefix}danger);
+    }
 
-      [data-theme='dark'] & {
-        color: var(--#{$prefix}success-dark);
-      }
+    .icon-repost {
+      display: inline-block;
+      width: max-content;
+      margin-right: 0.25em;
+      color: var(--#{$prefix}success);
     }
   }
 
@@ -32,6 +37,11 @@
     font-size: 0.875rem;
     color: $global-font-secondary-color;
 
+    .comment-visitors,
+    .comment-count {
+      @extend .print-d-none;
+    }
+
     span {
       display: inline-block;
     }
@@ -44,7 +54,7 @@
 
     .author {
       font-size: 1.05rem;
-      
+
       img.avatar {
         width: 1.3rem;
         height: 1.3rem;
@@ -67,14 +77,11 @@
 
     img {
       display: block;
+      width: 100%;
       max-width: 100%;
       height: auto;
       margin: 0 auto;
       overflow: hidden;
-
-      &.lazyloaded {
-        width: 100%;
-      }
     }
   }
 
@@ -87,71 +94,101 @@
     padding: 5px;
   }
 
+  hr {
+    position: relative;
+    height: 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 {
+      margin-block: 0.5em;
+
+      &::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 {
     > 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 {
-      > .header-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 > .header-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 {
@@ -185,15 +222,24 @@
     }
 
     ul,
-    ol {
-      margin: 0.5rem 0;
-      padding-left: 2.5rem;
+    ol,
+    dl {
+      margin-block: 0.5em;
     }
 
     ul {
       list-style-type: disc;
     }
 
+    dl {
+      dt {
+        font-weight: bold;
+      }
+      dd {
+        margin: 0.25em 0 1em;
+      }
+    }
+
     ruby {
       background: $code-background-color;
 
@@ -212,13 +258,10 @@
 
     .table-wrapper {
       overflow-x: auto;
+      --#{$prefix}scrollbar-thumb-color: #{$table-background-color};
 
-      &::-webkit-scrollbar {
-        background-color: $table-background-color;
-
-        [data-theme='dark'] & {
-          background-color: $table-background-color-dark;
-        }
+      [data-theme='dark'] & {
+        --#{$prefix}scrollbar-thumb-color: #{$table-background-color-dark};
       }
 
       > table {
@@ -249,7 +292,7 @@
               background-color: lighten($table-background-color-dark, 2.75%);
             }
           }
-          
+
           & tr:hover {
             background: darken($table-background-color, 4.5%);
 
@@ -275,9 +318,35 @@
       max-width: 100%;
       min-height: 1em;
 
-      &:not([data-h]) {
+      &:not([height]) {
         height: auto;
       }
+
+      &[loading='lazy'][srcset]:not([data-lazyloaded]) {
+        &:not(.suffix-invalid__small) {
+          width: var(--width-small, var(--width));
+          aspect-ratio: var(--aspect-ratio-small, var(--aspect-ratio));
+        }
+
+        &:not(.suffix-invalid) {
+          @media (min-resolution: 1.01dppx) and (max-resolution: 1.5dppx) {
+            width: calc(var(--width) / 1.5);
+            aspect-ratio: var(--aspect-ratio);
+          }
+        }
+
+        &:not(.suffix-invalid__large) {
+          @media (min-resolution: 1.51dppx) {
+            width: calc(var(--width-large, var(--width)) / 2);
+            aspect-ratio: var(--aspect-ratio-large, var(--aspect-ratio));
+          }
+        }
+      }
+
+      &.version {
+        height: 1.25em;
+        vertical-align: text-bottom;
+      }
     }
     svg {
       max-width: 100%;
@@ -301,10 +370,6 @@
         display: block;
         margin: 0 auto;
         overflow: hidden;
-
-        &.lazyloaded:not([data-w]) {
-          width: 100%;
-        }
       }
     }
 
@@ -320,6 +385,10 @@
         padding-left: 1.5em;
       }
 
+      dl dd {
+        margin-inline-start: 0.25em;
+      }
+
       [data-theme='dark'] & {
         color: $blockquote-color-dark;
         border-left-color: $global-border-color-dark;
@@ -328,11 +397,40 @@
       @include link(false, true);
     }
 
-    .footnotes {
-      color: $global-font-secondary-color;
+    sup[id^='fnref:']:has(.footnote-ref) {
+      padding: 2px 4px;
+      background-color: rgba(238, 238, 238, 0.7);
+      color: #555555;
+      border-radius: 4px;
+      cursor: pointer;
 
       [data-theme='dark'] & {
-        color: $global-font-secondary-color-dark;
+        background-color: rgba(56, 139, 253, 0.1);
+        color: #58a6ff;
+      }
+
+      @include link(true, false);
+    }
+
+    .footnotes {
+      font-size: 0.75rem;
+      white-space: normal;
+      color: darken($global-font-secondary-color, 5%);
+
+      ol {
+        margin-block: 1em;
+        padding-left: 1rem;
+      }
+
+      a:not(.footnote-backref) {
+        color: inherit;
+        text-decoration: underline;
+      }
+
+      @include link(false, true);
+
+      [data-theme='dark'] & {
+        color: lighten($global-font-secondary-color-dark, 5%);
       }
 
       p {
@@ -340,17 +438,15 @@
       }
     }
 
-    @import '../_partials/_single/code';
-    @import '../_shortcodes';
-
     hr {
-      margin: 1rem 0;
-      position: relative;
-      border-top: 1px dashed $global-border-color;
-      border-bottom: none;
+      margin-block: 0;
+    }
 
-      [data-theme='dark'] & {
-        border-top: 1px dashed $global-border-color-dark;
+    .footnotes {
+      hr {
+        background-color: var(--#{$prefix}hr-background-color);
+        height: 1px;
+        margin-block: 1em;
       }
     }
 
@@ -359,26 +455,22 @@
       padding: 0 0.25rem;
       background-color: $global-background-color;
       border: 1px solid $global-border-color;
-      border-bottom-color: $global-border-color;
-      @include border-radius($global-border-radius);
-      @include box-shadow(inset 0 -1px 0 $global-border-color);
       font-size: 0.8rem;
       font-family: $code-font-family;
       color: $code-color;
+      @include border-radius($global-border-radius);
+      @include box-shadow(inset 0 -1px 0 $global-border-color);
 
       [data-theme='dark'] & {
         background-color: $global-background-color-dark;
         border: 1px solid $global-border-color-dark;
-        border-bottom-color: $global-border-color-dark;
-        @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
         color: $code-color-dark;
+        @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
       }
     }
 
-    .version {
-      height: 1.25em;
-      vertical-align: text-bottom;
-    }
+    @import '../_partials/_single/code';
+    @import '../_shortcodes';
   }
 
   @import '../_partials/_single/reward';

assets/css/_partials/_archive/_terms.scss

@@ -1,4 +1,5 @@
-.categories-card {
+.categories-card,
+.collections-card {
   margin: 0 auto;
   display: flex;
   align-items: flex-start;

assets/css/_partials/_icon.scss

@@ -10,17 +10,19 @@ svg.icon {
 }
 
 img.emoji {
+  display: inline-block;
   height: 1em;
   width: 1em;
   margin: 0 0.05em 0 0.1em;
   vertical-align: -0.1em;
 }
 
+.hugo-icon,
 .fixit-icon {
   display: inline-block;
-  height: 1.5em;
-  width: 1.5em;
-  line-height: 1.5em;
+  height: 1.2em;
+  width: 1.2em;
+  line-height: 1.2em;
   position: relative;
   vertical-align: text-bottom;
 }

assets/css/_partials/_img.scss

@@ -1,12 +1,3 @@
 img {
   @include border-radius($global-border-radius/2);
-
-  &.lazyload,
-  &.lazyloading {
-    @include object-fit(scale-down);
-  }
-
-  &.lazyloaded {
-    @include object-fit(contain);
-  }
 }

assets/css/_partials/_mask.scss

@@ -6,11 +6,11 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
   background-color: rgba(0, 0, 0, 0);
+  @include z-index(0, -1);
 
   .blur & {
-    z-index: 100;
+    @include z-index(1);
     background-color: rgba(0, 0, 0, 0.25);
   }
 }

assets/css/_partials/_scrollbar.scss

@@ -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;
+}

assets/css/_partials/_single/_code.scss

@@ -18,7 +18,7 @@ code {
 }
 
 // indented code
-pre {
+pre:not(.mermaid[data-processed='true']) {
   margin: 0;
   line-height: 1.45em;
   padding: 0.5rem;
@@ -100,6 +100,12 @@ pre {
         cursor: pointer;
       }
 
+      .ellipses,
+      .edit,
+      .copy {
+        @extend .print-d-none;
+      }
+
       .code-title {
         width: 100%;
         padding: 0.4rem;
@@ -108,6 +114,12 @@ pre {
           padding: 0 0.2rem;
           @include transition(transform 0.2s ease);
         }
+
+        .title-inner {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+        }
       }
 
       .code-title::after {
@@ -181,9 +193,11 @@ pre {
       .lntd:first-child {
         min-width: 1.6rem;
         text-align: right;
+        position: sticky;
+        left: 0;
 
         pre {
-          padding-right: 0;
+          @include user-select(none);
         }
       }
       // code content
@@ -334,12 +348,16 @@ pre {
   }
 
   .table-wrapper {
-    .highlight,
-    &::-webkit-scrollbar {
-      background-color: #f6f8fa;
+    --#{$prefix}scrollbar-thumb-color: #{$code-background-color};
+
+    [data-theme='dark'] & {
+      --#{$prefix}scrollbar-thumb-color: #{$code-background-color-dark};
+    }
+    .highlight {
+      background-color: $code-background-color;
 
       [data-theme='dark'] & {
-        background-color: #2d333b;
+        background-color: $code-background-color-dark;
       }
     }
   }

assets/css/_partials/_single/_collections.scss

@@ -0,0 +1,229 @@
+// Collection Navigation
+.collection-card {
+  font-size: 0.875rem;
+  background-color: darken($global-background-color, 3%);
+  margin-block: 2rem -1rem;
+  padding: 1rem 1.25rem;
+  position: relative;
+  @include border-radius($global-border-radius * 1.5);
+  @include user-select(none);
+  @extend .print-d-none;
+
+  [data-theme='dark'] & {
+    background-color: lighten($global-background-color-dark, 3%);
+  }
+
+  &:has(.collection-nav-item:nth-child(2))::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 0.75rem;
+    width: 1px;
+    height: 2rem;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.03) 100%);
+
+    [data-theme='dark'] & {
+      background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.03),
+        rgba(255, 255, 255, 0.05) 50%,
+        rgba(255, 255, 255, 0.03) 100%
+      );
+    }
+  }
+
+  .collection-title {
+    @include link(false, false);
+  }
+
+  .collection-nav {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+
+    &:not(:empty) {
+      margin-top: 0.5rem;
+    }
+
+    .collection-nav-item {
+      flex-grow: 1;
+      max-width: calc(50% - 0.5rem);
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      @include transition(all 0.3s ease-out);
+
+      &:only-child {
+        max-width: 100%;
+      }
+
+      i {
+        flex-shrink: 0;
+      }
+
+      span {
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &[rel='next'] {
+        text-align: right;
+      }
+
+      &[rel='prev']:hover {
+        @include transform(translateX(-4px));
+      }
+
+      &[rel='next']:hover {
+        @include transform(translateX(4px));
+      }
+    }
+  }
+}
+
+// Collection aside container
+.aside-collection {
+  position: sticky;
+  top: calc(#{$header-height} + var(--#{$prefix}breadcrumb-height));
+  box-sizing: border-box;
+  @include overflow-wrap(break-word);
+  @include blur;
+  @extend .print-d-none;
+}
+
+// Collection List
+.collection-details {
+  &:not(:last-of-type) {
+    margin-bottom: 0.5rem;
+  }
+
+  &.open {
+    .collection-summary {
+      background-color: darken($global-background-color, 4%);
+
+      [data-theme='dark'] & {
+        background-color: lighten($global-background-color-dark, 4%);
+      }
+    }
+  }
+
+  .collection-summary {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+    padding: 0.2em 0.5em;
+    background-color: darken($global-background-color, 3%);
+
+    [data-theme='dark'] & {
+      background-color: lighten($global-background-color-dark, 3%);
+    }
+    
+    > i.fa-layer-group {
+      flex-shrink: 0;
+    }
+
+    .collection-name {
+      flex-grow: 1;
+      font-weight: bold;
+
+      &::before {
+        content: attr(data-collections) '・';
+      }
+    }
+
+    .collection-count {
+      flex-shrink: 0;
+      color: var(--#{$prefix}secondary);
+    }
+
+    .details-icon {
+      flex-shrink: 0;
+    }
+
+    @include user-select(none);
+  }
+
+  .collection-content {
+    font-size: $toc-content-font-size;
+    background-color: darken($global-background-color, 2%);
+
+    [data-theme='dark'] & {
+      background-color: lighten($global-background-color-dark, 2%);
+    }
+
+    .collection-list {
+      margin: 0;
+      padding-inline: 1.6em 0.8em;
+      padding-block: 0.4em;
+      text-indent: -0.8em;
+      list-style: none;
+      overflow-y: scroll;
+      max-height: 60vh;
+      @include scrollbar-width(none, 0);
+
+      .collection-item > a::before,
+      .collection-item > span::before {
+        content: '|';
+        font-weight: 600;
+        margin-right: 0.5em;
+        position: relative;
+        bottom: 2px;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+
+      .collection-item > .active {
+        font-weight: bold;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+
+        &::before {
+          color: $single-link-hover-color;
+  
+          [data-theme='dark'] & {
+            color: $single-link-hover-color-dark;
+          }
+        }
+      }
+    }
+
+    .collection-nav-simple {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5em;
+      background-color: darken($global-background-color, 3%);
+
+      [data-theme='dark'] & {
+        background-color: lighten($global-background-color-dark, 3%);
+      }
+
+      a.collection-nav-item {
+        padding-inline: 2px;
+        border-radius: 50%;
+        @include transition(background-color 0.3s ease-out);
+
+        &:hover {
+          background-color: darken($global-background-color, 10%);
+
+          [data-theme='dark'] & {
+            background-color: lighten($global-background-color-dark, 10%);
+          }
+        }
+      }
+
+      > i.collection-nav-item {
+        padding: 4px 2px;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

assets/css/_partials/_single/_comment.scss

@@ -1,3 +1,8 @@
-#comments {
+>#comments {
   padding: 2rem 0;
+  @extend .print-d-none;
+
+  iframe {
+    width: 100%;
+  }
 }

assets/css/_partials/_single/_fixit-decryptor.scss

@@ -3,12 +3,8 @@
   text-align: center;
   margin-top: 3rem;
 
-  .fixit-encryptor-shortcode & {
-    margin-top: 1rem;
-  }
-
-  #fixit-decryptor-input,
   .fixit-decryptor-input,
+  .fixit-decryptor-btn,
   .fixit-encryptor-btn {
     display: inline-block;
     box-sizing: border-box;
@@ -40,9 +36,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 +48,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;
 
@@ -65,3 +61,21 @@
     }
   }
 }
+
+// fixit-encryptor shortcodes
+fixit-encryptor {
+  .fixit-decryptor-container {
+    margin-top: 1rem;
+  }
+  &.decrypted > .fixit-decryptor-container {
+    .fixit-decryptor-loading,
+    .fixit-decryptor-input,
+    .fixit-decryptor-btn {
+      display: none;
+    }
+  }
+}
+
+.encrypted-hidden {
+  display: none !important;
+}

assets/css/_partials/_single/_footer.scss

@@ -1,13 +1,13 @@
 .post-footer {
   margin: 2rem 0;
 
-  &:has(~.post-reward) {
-    margin-bottom: 0;
+  &~.post-reward {
+    margin-block: -2rem 0;
   }
 
   .post-info {
     border-bottom: 1px solid $global-border-color;
-    padding: 1rem 0 0.3rem;
+    padding: 0.3rem 0;
 
     [data-theme='dark'] & {
       border-bottom: 1px solid $global-border-color-dark;
@@ -53,6 +53,7 @@
       }
 
       .post-info-share {
+        @extend .print-d-none;
         a * {
           vertical-align: text-bottom;
         }
@@ -61,10 +62,14 @@
   }
 
   .post-info-more {
-    padding: 0.3rem 0 1rem;
+    padding: 0.3rem 0;
     display: flex;
     justify-content: space-between;
     font-size: 0.9rem;
+
+    section:last-child {
+      @extend .print-d-none;
+    }
   }
 
   .post-tags {
@@ -86,6 +91,8 @@
     display: flex;
     justify-content: space-between;
     gap: 1.5rem;
+    padding-block: 0.5rem;
+    @extend .print-d-none;
 
     .post-nav-item {
       flex: 1;

assets/css/_partials/_single/_reward.scss

@@ -1,10 +1,8 @@
 .post-reward {
   padding: 1rem;
   text-align: center;
-
-  &~.post-footer {
-    margin-top: 0;
-  }
+  margin-bottom: -1rem;
+  @extend .print-d-none;
 
   &:has(.reward-ways:empty) {
     display: none;
@@ -15,8 +13,53 @@
     font-weight: 500;
   }
 
+  .reward-ways {
+    display: none;
+  }
+
   .reward-input:checked~.reward-ways {
     display: block;
+    padding-top: 20px;
+
+    div {
+      display: inline-block;
+      @include user-select(none);
+  
+      span {
+        display: block;
+      }
+  
+      &:hover span[data-animation] {
+        animation: var(--animation-reward, jackInTheBox) 0.8s infinite linear;
+        // The animation may affect :hover of img in dark mode
+        pointer-events: none;
+      }
+  
+      img {
+        display: inline-block;
+        margin: 0.8em 2em 0;
+        max-width: 100%;
+        width: $reward-img-width;
+      }
+    }
+
+    // `fixed` mode only supports desktop
+    &[data-mode='fixed'] {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      padding: 1rem;
+      background-color: $global-background-color;
+      @include z-index(2);
+      @include border-radius($global-border-radius);
+      @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.2));
+
+      [data-theme='dark'] & {
+        background-color: $global-background-color-dark;
+        @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.2));
+      }
+    }
   }
 
   .reward-button {
@@ -27,11 +70,11 @@
     color: lighten($reward-color, 5%);
     border: 2px solid lighten($reward-color, 10%);
     border-radius: $global-border-radius;
-    @include transition(all 0.3s ease-out);
     padding: 0.6rem 1rem;
     background-color: $global-background-color;
     vertical-align: text-top;
     line-height: 1rem;
+    @include transition(all 0.3s ease-out);
 
     &:active,
     &:hover {
@@ -53,29 +96,3 @@
     }
   }
 }
-
-.reward-ways {
-  display: none;
-  padding-top: 20px;
-
-  div {
-    display: inline-block;
-
-    span {
-      display: block;
-    }
-
-    &:hover span[data-animation] {
-      animation: var(--animation-reward, jackInTheBox) 0.8s infinite linear;
-      // The animation may affect :hover of img in dark mode
-      pointer-events: none;
-    }
-  }
-
-  img {
-    display: inline-block;
-    margin: .8em 2em 0;
-    max-width: 100%;
-    width: $reward-img-width;
-  }
-}

assets/css/_partials/_single/_toc.scss

@@ -9,14 +9,16 @@
     font-size: $toc-content-font-size;
 
     ul {
-      text-indent: -0.8rem;
-      padding-left: 0.8rem;
+      text-indent: -0.8em;
+      padding-left: 0.8em;
       list-style: none;
 
       a:first-child::before {
         content: '|';
         font-weight: bolder;
-        margin-right: 0.5rem;
+        margin-right: 0.5em;
+        position: relative;
+        bottom: 2px;
         color: $single-link-color;
 
         [data-theme='dark'] & {
@@ -25,7 +27,24 @@
       }
 
       ul {
-        padding-left: 1.5rem;
+        padding-left: 1em;
+      }
+    }
+
+    ol {
+      margin: 0;
+      padding-left: 2.25em;
+
+      ol {
+        padding-left: 1.25em;
+      }
+
+      li:has(> a:hover)::marker {
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
       }
     }
   }
@@ -50,23 +69,28 @@
 #toc-auto {
   display: block;
   position: sticky;
-  top: $header-height + 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  @include overflow-wrap(break-word);
+  top: calc(#{$header-height} + var(--#{$prefix}breadcrumb-height));
   box-sizing: border-box;
   visibility: hidden;
-
+  @include overflow-wrap(break-word);
   @include blur;
+  @extend .print-d-none;
+
+  [data-header-desktop='normal'] & {
+    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+  }
 
   .toc-title {
-    margin: 0.5rem 0;
+    margin-block: 0 0.5em;
     cursor: pointer;
+    @include user-select(none);
 
     &::before {
       content: '|';
       font-weight: bolder;
-      margin-right: 0.5rem;
+      margin-right: 0.5em;
+      position: relative;
+      bottom: 2px;
       color: $global-border-color;
 
       [data-theme='dark'] & {
@@ -87,8 +111,10 @@
   .toc-content {
     overflow-y: scroll;
     max-height: calc(100vh - #{2*$header-height});
+    @include scrollbar-width(none, 0);
 
-    &.always-active ul {
+    &.always-active ul,
+    &.always-active ol {
       display: block;
     }
 
@@ -96,6 +122,29 @@
       margin: 0;
     }
 
+    li.has-active {
+      &::marker {
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+
+      &:has(> .active)::marker {
+        font-weight: bold;
+      }
+
+      > a {
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+    }
+
+    // for unordered list automatically collapsed
     ul {
       ul {
         display: none;
@@ -104,17 +153,8 @@
       .has-active > ul {
         display: block;
       }
-    }
 
-    a.active {
-      font-weight: bold;
-      color: $single-link-color;
-
-      [data-theme='dark'] & {
-        color: $single-link-color-dark;
-      }
-
-      &::before {
+      a.active::before {
         color: $single-link-hover-color;
 
         [data-theme='dark'] & {
@@ -122,12 +162,27 @@
         }
       }
     }
+
+    // for ordered list automatically collapsed
+    ol {
+      ol {
+        display: none;
+      }
+
+      .has-active > ol {
+        display: block;
+      }
+    }
+
+    a.active {
+      font-weight: bold;
+    }
   }
 }
 
 #toc-static {
   display: none;
-  margin: 0.8rem 0;
+  margin: 0.8em 0;
 
   &[data-kept='true'] {
     display: block;
@@ -137,7 +192,7 @@
     display: flex;
     justify-content: space-between;
     line-height: 2em;
-    padding: 0 0.75rem;
+    padding: 0 0.75em;
     background: darken($code-background-color, 3%);
 
     [data-theme='dark'] & {
@@ -148,9 +203,33 @@
   .toc-content {
     background-color: $code-background-color;
 
-    > nav > ul {
-      margin: 0;
-      padding: 0.4rem 1rem 0.4rem 1.8rem;
+    > nav {
+      > ul {
+        margin: 0;
+        padding: 0.4em 1em 0.4em 1.8em;
+
+        a:hover {
+          font-weight: bold;
+
+          &::before {
+            color: $single-link-hover-color;
+  
+            [data-theme='dark'] & {
+              color: $single-link-hover-color-dark;
+            }
+          }
+        }
+      }
+      
+      > ol {
+        margin: 0;
+        padding: 0.4em 1em 0.4em 2.25em;
+
+        li:has(> a:hover)::marker,
+        a:hover {
+          font-weight: bold;
+        }
+      }
     }
 
     [data-theme='dark'] & {

assets/css/_partials/_widgets/_fixed-button.scss

@@ -1,5 +1,4 @@
 .fixed-button {
-  z-index: 100;
   position: fixed;
   right: 1.5rem;
   font-size: 1rem;
@@ -7,10 +6,11 @@
   padding: 0.5rem 0.625rem;
   color: $global-font-secondary-color;
   background-color: $header-background-color;
+  @include z-index(1);
   @include border-radius(1.25rem);
   @include transition(color 0.4s ease);
-
   @include blur;
+  @extend .print-d-none;
 
   &:hover,
   &:active {

assets/css/_partials/_widgets/_github-corner.scss

@@ -1,22 +1,23 @@
 @keyframes octocat-wave {
   0%,
   100% {
-    transform: rotate(0);
+    @include transform(rotate(0));
   }
   20%,
   60% {
-    transform: rotate(-25deg);
+    @include transform(rotate(-25deg));
   }
   40%,
   80% {
-    transform: rotate(10deg);
+    @include transform(rotate(10deg));
   }
 }
 
 .github-corner {
   position: fixed;
   top: 0;
-  z-index: 150;
+  @include z-index(2);
+  @extend .print-d-none;
 
   :hover .octo-arm {
     animation: octocat-wave 560ms ease-in-out;
@@ -37,7 +38,7 @@
     left: 0;
 
     svg {
-      transform: scale(-1, 1);
+      @include transform(scale(-1, 1));
     }
   }
   &.right {

assets/css/_partials/_widgets/_noscript-warning.scss

@@ -6,9 +6,9 @@
   position: fixed;
   text-align: center;
   left: 0;
-  top: 0;
+  bottom: 0;
   width: 100%;
-  z-index: 150;
+  @include z-index(2);
 
   [data-theme='dark'] & {
     background-color: var(--#{$prefix}danger-dark);

assets/css/_partials/_widgets/_reading-progress.scss

@@ -3,8 +3,9 @@
   height: var(--progress-h, 2px);
   width: var(--progress);
   background-color: var(--bg-progress, var(--#{$prefix}info));
-  z-index: 150;
   position: fixed;
+  @include z-index(2);
+  @extend .print-d-none;
   
   [data-theme="dark"] & {
     background-color: var(--bg-progress-dark, var(--#{$prefix}info-dark));

assets/css/_partials/_widgets/_typeit.scss

@@ -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};
-  }
 }

assets/css/_shortcodes/_cardlink.scss

@@ -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'] & {

assets/css/_shortcodes/_douyin.scss

@@ -0,0 +1,24 @@
+.douyin {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 60.725%;
+  margin: 3% 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%;
+  }
+}

assets/css/_shortcodes/_index.scss

@@ -1,7 +1,9 @@
 @import '_admonition';
 @import '_bilibili';
+@import '_douyin';
 @import '_cardlink';
 @import '_center-quote';
 @import '_echarts';
 @import '_instagram';
 @import '_mapbox';
+@import '_mermaid';

assets/css/_shortcodes/_mermaid.scss

@@ -0,0 +1,10 @@
+.mermaid {
+  &[data-processed='true'] {
+    text-align: center;
+  }
+
+  svg {
+    max-width: 100%;
+    height: auto; 
+  }
+}

assets/css/_variables.scss

@@ -12,6 +12,9 @@ $global-font-size: 16px !default;
 $global-font-weight: 400 !default;
 $global-line-height: 1.5rem !default;
 
+// scroll-margin-top of content anchor
+$global-scroll-margin-top: 0.5rem;
+
 // Radius of the border
 $global-border-radius: 5px !default;
 
@@ -42,10 +45,10 @@ $global-border-color-dark: #363636 !default;
 
 // ========== 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 ========== //
@@ -94,7 +97,7 @@ $single-link-color-dark: #1781b5 !default; // 釉蓝
 
 // Color of the hover single link
 $single-link-hover-color: #ea517f !default; // 莲瓣红
-$single-link-hover-color-dark: #619ac3 !default; // 羽扇豆蓝
+$single-link-hover-color-dark: #cc5595 !default; // 龙须红
 
 // Color of the table background
 $table-background-color: #fff !default;

assets/css/style.scss

@@ -7,6 +7,7 @@
 @import "_core/base";
 @import "_core/layout";
 @import "_core/common";
+@import "_core/patch";
 @import "_page";
 @import "_core/media";
 @import "_custom";

assets/data/cdn/jsdelivr.yml

@@ -3,19 +3,19 @@
 
 prefix:
   libFiles: https://cdn.jsdelivr.net/npm/
-  # simple-icons@7.12.0 https://github.com/simple-icons/simple-icons
-  simpleIcons: https://cdn.jsdelivr.net/npm/simple-icons@7.12.0/icons/
+  # simple-icons@9.19.0 https://github.com/simple-icons/simple-icons
+  simpleIcons: https://cdn.jsdelivr.net/npm/simple-icons@9.19.0/icons/
 libFiles:
-  # algoliasearch@4.14.2 https://github.com/algolia/algoliasearch-client-javascript
-  algoliasearchJS: algoliasearch@4.14.2/dist/algoliasearch-lite.umd.min.js
+  # algoliasearch@4.20.0 https://github.com/algolia/algoliasearch-client-javascript
+  algoliasearchJS: algoliasearch@4.20.0/dist/algoliasearch-lite.umd.min.js
   # animate.css@4.1.1 https://github.com/daneden/animate.css
   animateCSS: animate.css@4.1.1/animate.min.css
   # aplayer@1.10.1 https://github.com/MoePlayer/APlayer
   aplayerCSS: aplayer@1.10.1/dist/APlayer.min.css
   aplayerJS: aplayer@1.10.1/dist/APlayer.min.js
-  # artalk@2.3.4 https://github.com/ArtalkJS/Artalk
-  artalkCSS: artalk@2.3.4/dist/Artalk.min.css
-  artalkJS: artalk@2.3.4/dist/Artalk.min.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,42 +24,39 @@ 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
+  cryptoMd5JS: crypto-js@4.2.0/md5.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@2.5.0 https://github.com/liriliri/eruda
-  erudaJS: eruda@2.5.0/eruda.js
-  # fontawesome-free@6.2.0 https://github.com/FortAwesome/Font-Awesome
-  fontawesomeFreeCSS: '@fortawesome/fontawesome-free@6.2.0/css/all.min.css'
+  # 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'
   # 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
   gitalkCSS: gitalk@1.7.2/dist/gitalk.min.css
   gitalkJS: gitalk@1.7.2/dist/gitalk.min.js
-  # katex@0.16.2 https://github.com/KaTeX/KaTeX
-  katexAutoRenderJS: katex@0.16.2/dist/contrib/auto-render.min.js
-  katexCopyTexJS: katex@0.16.2/dist/contrib/copy-tex.min.js
-  katexCSS: katex@0.16.2/dist/katex.min.css
-  katexJS: katex@0.16.2/dist/katex.min.js
-  katexMhchemJS: katex@0.16.2/dist/contrib/mhchem.min.js
-  # lazysizes@5.3.2 https://github.com/aFarkas/lazysizes
-  lazysizesJS: lazysizes@5.3.2/lazysizes.min.js
-  # lightgallery@2.6.1 https://github.com/sachinchoolur/lightgallery
-  lightgalleryCSS: lightgallery@2.6.1/css/lightgallery-bundle.min.css
-  lightgalleryJS: lightgallery@2.6.1/lightgallery.min.js
-  lightgalleryThumbnailJS: lightgallery@2.6.1/plugins/thumbnail/lg-thumbnail.min.js
-  lightgalleryZoomJS: lightgallery@2.6.1/plugins/zoom/lg-zoom.min.js
-  # lunr.js@2.3.9 https://github.com/olivernn/lunr.js
-  lunrJS: lunr@2.3.9/lunr.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.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
+  lightgalleryThumbnailJS: lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.min.js
+  lightgalleryZoomJS: lightgallery@2.7.2/plugins/zoom/lg-zoom.min.js
   # mapbox-gl@2.10.0 https://docs.mapbox.com/mapbox-gl-js
+  # 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.1.7 https://github.com/mermaid-js/mermaid
-  mermaidJS: mermaid@9.1.7/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
@@ -68,19 +65,19 @@ libFiles:
   panguJS: pangu@4.0.7/dist/browser/pangu.min.js
   # pace-js@1.2.4 https://github.com/CodeByZach/pace
   paceJS: pace-js@1.2.4
-  # sharer.js@0.4.2 https://github.com/ellisonleao/sharer.js
+  # sharer.js@0.5.1 https://github.com/ellisonleao/sharer.js
   sharerJS: sharer.js@0.5.1/sharer.min.js
-  # twemoji@13.1.0 https://github.com/twitter/twemoji
+  # twemoji@14.0.2 https://github.com/twitter/twemoji
   twemojiJS: twemoji@14.0.2/dist/twemoji.min.js
-  # twikoo@1.6.8 https://github.com/imaegoo/twikoo
-  twikooJS: twikoo@1.6.8/dist/twikoo.all.min.js
-  # typeit@8.7.0 https://github.com/alexmacarthur/typeit
-  typeitJS: typeit@8.7.0/dist/index.umd.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.14.6 https://github.com/Tencent/vConsole
-  vconsoleJS: vconsole@3.14.6/dist/vconsole.min.js
-  # waline@2.10.0 https://github.com/walinejs/waline
-  walineCSS: '@waline/client@2.10.0/dist/waline.css'
-  walineJS: '@waline/client@2.10.0/dist/waline.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'
   

assets/data/cdn/unpkg.yml

@@ -3,19 +3,19 @@
 
 prefix:
   libFiles: https://unpkg.com/
-  # simple-icons@7.12.0 https://github.com/simple-icons/simple-icons
-  simpleIcons: https://unpkg.com/simple-icons@7.12.0/icons/
+  # simple-icons@9.19.0 https://github.com/simple-icons/simple-icons
+  simpleIcons: https://unpkg.com/simple-icons@9.19.0/icons/
 libFiles:
-  # algoliasearch@4.14.2 https://github.com/algolia/algoliasearch-client-javascript
-  algoliasearchJS: algoliasearch@4.14.2/dist/algoliasearch-lite.umd.min.js
+  # algoliasearch@4.20.0 https://github.com/algolia/algoliasearch-client-javascript
+  algoliasearchJS: algoliasearch@4.20.0/dist/algoliasearch-lite.umd.js
   # animate.css@4.1.1 https://github.com/daneden/animate.css
   animateCSS: animate.css@4.1.1/animate.min.css
   # aplayer@1.10.1 https://github.com/MoePlayer/APlayer
   aplayerCSS: aplayer@1.10.1/dist/APlayer.min.css
   aplayerJS: aplayer@1.10.1/dist/APlayer.min.js
-  # artalk@2.3.4 https://github.com/ArtalkJS/Artalk
-  artalkCSS: artalk@2.3.4/dist/Artalk.css
-  artalkJS: artalk@2.3.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,42 +24,39 @@ 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
+  cryptoMd5JS: crypto-js@4.2.0/md5.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@2.5.0 https://github.com/liriliri/eruda
-  erudaJS: eruda@2.5.0/eruda.js
-  # fontawesome-free@6.2.0 https://github.com/FortAwesome/Font-Awesome
-  fontawesomeFreeCSS: '@fortawesome/fontawesome-free@6.2.0/css/all.min.css'
+  # 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'
   # 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
   gitalkCSS: gitalk@1.7.2/dist/gitalk.min.css
   gitalkJS: gitalk@1.7.2/dist/gitalk.min.js
-  # katex@0.16.2 https://github.com/KaTeX/KaTeX
-  katexAutoRenderJS: katex@0.16.2/dist/contrib/auto-render.min.js
-  katexCopyTexJS: katex@0.16.2/dist/contrib/copy-tex.min.js
-  katexCSS: katex@0.16.2/dist/katex.min.css
-  katexJS: katex@0.16.2/dist/katex.min.js
-  katexMhchemJS: katex@0.16.2/dist/contrib/mhchem.min.js
-  # lazysizes@5.3.2 https://github.com/aFarkas/lazysizes
-  lazysizesJS: lazysizes@5.3.2/lazysizes.min.js
-  # lightgallery@2.6.1 https://github.com/sachinchoolur/lightgallery
-  lightgalleryCSS: lightgallery@2.6.1/css/lightgallery-bundle.min.css
-  lightgalleryJS: lightgallery@2.6.1/lightgallery.min.js
-  lightgalleryThumbnailJS: lightgallery@2.6.1/plugins/thumbnail/lg-thumbnail.min.js
-  lightgalleryZoomJS: lightgallery@2.6.1/plugins/zoom/lg-zoom.min.js
-  # lunr.js@2.3.9 https://github.com/olivernn/lunr.js
-  lunrJS: lunr@2.3.9/lunr.min.js
+  # instant.page@5.2.0 https://github.com/instantpage/instant.page
+  instantPage: instant.page@5.2.0/instantpage.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
+  lightgalleryThumbnailJS: lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.min.js
+  lightgalleryZoomJS: lightgallery@2.7.2/plugins/zoom/lg-zoom.min.js
   # mapbox-gl@2.10.0 https://docs.mapbox.com/mapbox-gl-js
+  # 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.1.7 https://github.com/mermaid-js/mermaid
-  mermaidJS: mermaid@9.1.7/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
@@ -68,19 +65,19 @@ libFiles:
   panguJS: pangu@4.0.7/dist/browser/pangu.min.js
   # pace-js@1.2.4 https://github.com/CodeByZach/pace
   paceJS: pace-js@1.2.4
-  # sharer.js@0.4.2 https://github.com/ellisonleao/sharer.js
+  # sharer.js@0.5.1 https://github.com/ellisonleao/sharer.js
   sharerJS: sharer.js@0.5.1/sharer.min.js
-  # twemoji@13.1.0 https://github.com/twitter/twemoji
+  # twemoji@14.0.2 https://github.com/twitter/twemoji
   twemojiJS: twemoji@14.0.2/dist/twemoji.min.js
-  # twikoo@1.6.8 https://github.com/imaegoo/twikoo
-  twikooJS: twikoo@1.6.8/dist/twikoo.all.min.js
-  # typeit@8.7.0 https://github.com/alexmacarthur/typeit
-  typeitJS: typeit@8.7.0/dist/index.umd.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.14.6 https://github.com/Tencent/vConsole
-  vconsoleJS: vconsole@3.14.6/dist/vconsole.min.js
-  # waline@2.10.0 https://github.com/walinejs/waline
-  walineCSS: '@waline/client@2.10.0/dist/waline.css'
-  walineJS: '@waline/client@2.10.0/dist/waline.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'
   

assets/data/social.yml

@@ -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:
@@ -547,7 +547,7 @@ qqgroup:
   Template: https://qm.qq.com/cgi-bin/qm/qr?k=%v&jump_from=webapi
   Title: QQ Group
   Icon:
-    Class: fa-solid fa-users
+    Simpleicons: tencentqq
 
 # 070: Diaspora
 diaspora:
@@ -562,7 +562,7 @@ csdn:
   Prefix: https://blog.csdn.net/
   Title: CSDN
   Icon:
-    Src: svg/icons/csdn.svg
+    Src: images/icons/csdn.svg
 
 # 072: Discord User Profile
 discord:
@@ -573,7 +573,7 @@ discord:
     Class: fa-brands fa-discord fa-fw
 
 # 073: Discord Server Invite Link
-discordInvite:
+discordinvite:
   Weight: 73
   Prefix: https://discord.gg/
   Title: Discord
@@ -615,13 +615,13 @@ plume:
   Weight: 78
   Title: Plume
   Icon:
-    Src: svg/icons/plume.svg
+    Src: images/icons/plume.svg
 
 # 079: Hack The Box
 hackthebox:
   Weight: 79
   Title: Hack The Box
-  Prefix: https://app.hackthebox.com/profile/
+  Prefix: https://app.hackthebox.com/users/
   Icon:
     Simpleicons: hackthebox
 
@@ -631,7 +631,7 @@ rootme:
   Title: Root-Me
   Prefix: https://www.root-me.org/
   Icon:
-    Src: svg/icons/rootme.svg
+    Src: images/icons/rootme.svg
 
 # 081: Feishu
 feishu:

assets/fixit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" version="1.1"><defs><style>.fixit-ban{opacity:.9;}</style></defs><path d="M159.12 338.69l24.8-16.54a78.87 78.87 0 0 1-6.77-22.72l-30.88 4.41a16 16 0 0 1-4.54-31.68l34.27-4.9v-.76l98.94 98.95a76.89 76.89 0 0 1-71.68-17.73l-26.39 17.59c-.15.11-.31.21-.47.31a16 16 0 0 1-17.28-26.93zm224.72-48.42a16 16 0 0 0-13.57-18.11l-34.27-4.9V244.9l34.27-4.9a16 16 0 1 0-4.54-31.68l-30.54 4.36a79.31 79.31 0 0 0-6.85-22.85l24.54-16.36a16 16 0 1 0-17.29-26.93l-.46.31-26 17.34a79.9 79.9 0 0 0-102.64-3l139.83 139.88 19.41 2.77a16 16 0 0 0 18.11-13.57z" fill="#358C3C" class="fixit-bug"/><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 432c-101.46 0-184-82.54-184-184a182.84 182.84 0 0 1 33.38-105.37l256 256A182.86 182.86 0 0 1 256 440zm150.62-78.63l-256-256A182.84 182.84 0 0 1 256 72c101.46 0 184 82.54 184 184a182.84 182.84 0 0 1-33.38 105.37z" fill="#FF6347" class="fixit-ban"/></svg>

assets/images/fixit.svg

@@ -0,0 +1,11 @@
+<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>
+  <path
+    d="M159.12 338.69l24.8-16.54a78.87 78.87 0 0 1-6.77-22.72l-30.88 4.41a16 16 0 0 1-4.54-31.68l34.27-4.9v-.76l98.94 98.95a76.89 76.89 0 0 1-71.68-17.73l-26.39 17.59c-.15.11-.31.21-.47.31a16 16 0 0 1-17.28-26.93zm224.72-48.42a16 16 0 0 0-13.57-18.11l-34.27-4.9V244.9l34.27-4.9a16 16 0 1 0-4.54-31.68l-30.54 4.36a79.31 79.31 0 0 0-6.85-22.85l24.54-16.36a16 16 0 1 0-17.29-26.93l-.46.31-26 17.34a79.9 79.9 0 0 0-102.64-3l139.83 139.88 19.41 2.77a16 16 0 0 0 18.11-13.57z"
+    fill="#358C3C" class="fixit-bug" />
+  <path
+    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 432c-101.46 0-184-82.54-184-184a182.84 182.84 0 0 1 33.38-105.37l256 256A182.86 182.86 0 0 1 256 440zm150.62-78.63l-256-256A182.84 182.84 0 0 1 256 72c101.46 0 184 82.54 184 184a182.84 182.84 0 0 1-33.38 105.37z"
+    fill="#FF6347" class="fixit-ban" />
+</svg>

assets/images/hugo.svg

@@ -0,0 +1,12 @@
+<?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" 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;}
+</style>
+<path class="st0" d="M207.5,22.4L321.9,89c13.5,7.9,21.9,22.4,21.9,38v136.4c0,17.3-9.3,33.3-24.5,41.8l-113.5,63.9
+	c-15.1,8.5-33.5,8.4-48.5-0.2L52.8,308.8c-16.4-9.5-26.6-27-26.6-45.9V133.4c0-19.1,9.9-36.8,26.1-46.8l102.8-63.5
+	C171.1,13.2,191.3,13,207.5,22.4z"/>
+<polygon class="st1" points="105.6,298.2 105.6,91 149,91 149,166.5 220.9,166.5 220.9,91 264.4,91 264.4,298.2 220.9,298.2 
+	220.9,207.6 149,207.6 149,298.2 "/>
+</svg>

assets/js/custom.js.example

@@ -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();
   });
 })();

assets/js/fixit-decryptor.js

@@ -12,86 +12,125 @@ FixItDecryptor = function (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();
   this.$el = document.querySelector('.fixit-decryptor-container');
 
   /**
    * decrypt content
-   * @param {String} base64EncodeContent encrypted content
+   * @param {Element} $content content element
+   * @param {String} salt salt string
+   * @param {Boolean} [isAll=true] whether to decrypt all content
    */
-  var _decryptContent = (base64EncodeContent) => {
+  var _decryptContent = ($content, salt, isAll=true) => {
     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(
+      if (isAll) {
+        // decrypt all content
+        this.$el.querySelector('.fixit-decryptor-loading').classList.add('d-none');
+        this.$el.querySelector('.fixit-decryptor-input').classList.add('d-none');
+        this.$el.querySelector('.fixit-decryptor-btn').classList.add('d-none');
+        this.$el.querySelector('.fixit-encryptor-btn').classList.remove('d-none');
+      } else {
+        // decrypt shortcode content
+        $content.parentElement.classList.add('decrypted');
+      }
+      $content.insertAdjacentHTML(
         'afterbegin',
-        CryptoJS.enc.Base64.parse(base64EncodeContent).toString(CryptoJS.enc.Utf8)
+        CryptoJS.enc.Base64
+          .parse($content.getAttribute('data-content').replace(salt, ''))
+          .toString(CryptoJS.enc.Utf8)
       );
     } catch (err) {
       return console.error(err);
     }
     // decrypted hook
-    console.log(this.decryptedEventSet)
-    for (const event of this.decryptedEventSet) {
-      event();
-    }    
+    const eventSet = isAll ? this.decryptedEventSet : this.partialDecryptedEventSet;
+    for (const event of eventSet) {
+      event($content);
+    }
   };
 
+  /**
+   * validate password
+   * @param {Element} $decryptor decryptor element
+   * @param {Element} $content content element
+   * @param {Function} callback callback function after password validation
+   * @returns 
+   */
+  var _validatePassword = ($decryptor, $content, callback) => {
+    const password = $content.getAttribute('data-password');
+    const inputEl = $decryptor.querySelector('.fixit-decryptor-input');
+    const input = inputEl.value.trim();
+    const inputMd5 = CryptoJS.MD5(input).toString();
+    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 (inputMd5 !== password) {
+      alert(`Password error: ${input} not the correct password!`);
+      return console.warn(`Password error: ${input} not the correct password!`);
+    }
+    callback(inputMd5, inputSha256.slice(saltLen));
+  }
+
   /**
    * initialize FixIt decryptor
    */
   _proto.init = () => {
     this.addEventListener('decrypted', this.options?.decrypted);
+    this.addEventListener('partial-decrypted', this.options?.partialDecrypted);
     this.addEventListener('reset', this.options?.reset);
     this.validateCache();
 
-    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 = () => {
+      const $content = document.querySelector('#content');
+      _validatePassword(this.$el, $content, (passwordMD5, 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: passwordMD5,
+            salt,
           })
         );
-        _decryptContent($content.getAttribute('data-content').replace(inputSha256.slice(saltLen), ''));
+        _decryptContent($content, salt);
+      });
+    };
+
+    // bind decryptor input enter keydown event
+    this.$el.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
+    this.$el.querySelector('.fixit-decryptor-btn')?.addEventListener('click', (e) => {
       e.preventDefault();
-      this.classList.add('d-none')
-      _decryptor.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
+      decryptorHandler();
+    });
+
+    // bind encryptor button click event
+    this.$el.querySelector('.fixit-encryptor-btn')?.addEventListener('click',  (e) => {
+      e.preventDefault();
+      e.target.classList.add('d-none')
+      this.$el.querySelector('.fixit-decryptor-input').classList.remove('d-none');
+      this.$el.querySelector('.fixit-decryptor-btn').classList.remove('d-none');
       document.querySelector('#content').innerHTML = '';
       document.querySelector('#content').insertAdjacentElement(
         'afterbegin',
-        _decryptor.$el
+        this.$el
       );
       window.localStorage?.removeItem(`fixit-decryptor/#${location.pathname}`);
       // reset hook
-      for (const event of _decryptor.resetEventSet) {
+      for (const event of this.resetEventSet) {
         event();
       }
     });
@@ -101,50 +140,31 @@ FixItDecryptor = function (options = {}) {
    * initialize fixit-encryptor shortcodes
    */
   _proto.initShortcodes = () => {
-    // TODO TODO shortcode decrypted event
-    // this.addEventListener('decrypted', this.options?.decrypted);
-    const _decryptor = this;
-    const $shortcodes = document.querySelectorAll('fixit-encryptor:not(.decrypted)');
+    customElements.get('fixit-encryptor') || customElements.define('fixit-encryptor', class extends HTMLElement {});
+    const $shortcodes = document.querySelectorAll('fixit-encryptor:not(:has(.decrypted))');
 
     $shortcodes.forEach($shortcode => {
+      const decryptorHandler = () => {
+        const $decryptor = $shortcode.querySelector('.fixit-decryptor-container');
+        const $content = $shortcode.querySelector('[data-password][data-content]');
+        _validatePassword($decryptor, $content, (passwordMD5, salt) => {
+          _decryptContent($content, salt, false);
+        });
+      };
+
+      // 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();
+      });
     });
   };
 
@@ -159,17 +179,18 @@ FixItDecryptor = function (options = {}) {
 
     if (!cachedStat) {
       this.$el.querySelector('.fixit-decryptor-loading').classList.add('d-none');
-      this.$el.querySelector('#fixit-decryptor-input').classList.remove('d-none');
+      this.$el.querySelector('.fixit-decryptor-input').classList.remove('d-none');
+      this.$el.querySelector('.fixit-decryptor-btn').classList.remove('d-none');
       return this;
     }
-    if (cachedStat?.md5 !== password || Number(cachedStat?.expiration) < Math.ceil(Date.now() / 1000)) {
+    if (cachedStat?.password !== 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');
+      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, ''));
+    _decryptContent($content, cachedStat.salt);
     return this;
   };
 
@@ -187,6 +208,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;
@@ -211,6 +235,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;

assets/js/service-worker.js

@@ -8,14 +8,12 @@ const BASE_CACHE_FILES = [
   '/css/style.min.css',
   '/js/theme.min.js',
   '/site.webmanifest',
-  '/fixit.min.svg'
 ];
 
 const OFFLINE_CACHE_FILES = [
   '/css/style.min.css',
   '/js/theme.min.js',
   '/site.webmanifest',
-  '/fixit.min.svg',
   '/offline/'
 ];
 
@@ -23,7 +21,6 @@ const NOT_FOUND_CACHE_FILES = [
   '/css/style.min.css',
   '/js/theme.min.js',
   '/site.webmanifest',
-  '/fixit.min.svg',
   '/404.html'
 ];
 

assets/js/theme.js

@@ -1,66 +1,8 @@
-class Util {
-  forEach(elements, handler) {
-    elements = elements || [];
-    for (let i = 0; i < elements.length; i++) {
-      handler(elements[i]);
-    }
-  }
-
-  getScrollTop() {
-    return (document.documentElement ?? document.body).scrollTop;
-  }
-
-  isMobile() {
-    return window.matchMedia('only screen and (max-width: 680px)').matches;
-  }
-
-  isTocStatic() {
-    return window.matchMedia('only screen and (max-width: 960px)').matches;
-  }
-
-  /**
-   * add animate to element
-   * @param {Element} element animate element
-   * @param {String|Array<String>} animation animation name
-   * @param {Boolean} reserved reserved animation
-   * @param {Function} callback remove callback
-   */
-  animateCSS(element, animation, reserved, callback) {
-    !Array.isArray(animation) && (animation = [animation]);
-    element.classList.add('animate__animated', ...animation);
-    element.addEventListener('animationend', () => {
-      !reserved && element.classList.remove('animate__animated', ...animation);
-      typeof callback === 'function' && callback();
-    }, { once: true });
-  }
-
-  /**
-   * date validator
-   * @param {*} date may be date or not
-   * @returns {Boolean}
-   */
-  isValidDate(date) {
-    return date instanceof Date && !isNaN(date.getTime());
-  }
-  
-  /**
-   * scroll some element into view
-   * @param {String} selector element to scroll
-   */
-  scrollIntoView(selector) {
-    const element = selector.startsWith('#')
-      ? document.getElementById(selector.slice(1))
-      : document.querySelector(selector);
-    element?.scrollIntoView({
-      behavior: 'smooth'
-    });
-  }
-}
+import Util from './util';
 
 class FixIt {
   constructor() {
     this.config = window.config;
-    this.data = this.config.data;
     this.isDark = document.body.dataset.theme === 'dark';
     this.util = new Util();
     this.newScrollTop = this.util.getScrollTop();
@@ -69,6 +11,7 @@ class FixIt {
     this.resizeEventSet = new Set();
     this.switchThemeEventSet = new Set();
     this.clickMaskEventSet = new Set();
+    this.beforeprintEventSet = new Set();
     this.disableScrollEvent = false;
     window.objectFitImages && objectFitImages();
   }
@@ -87,13 +30,13 @@ class FixIt {
 
   initSVGIcon() {
     this.util.forEach(document.querySelectorAll('[data-svg-src]'), ($icon) => {
-      fetch($icon.getAttribute('data-svg-src'))
+      fetch($icon.dataset.svgSrc)
         .then((response) => response.text())
         .then((svg) => {
           const $temp = document.createElement('div');
           $temp.insertAdjacentHTML('afterbegin', svg);
           const $svg = $temp.firstChild;
-          $svg.setAttribute('data-svg-src', $icon.getAttribute('data-svg-src'));
+          $svg.dataset.svgSrc = $icon.dataset.svgSrc
           $svg.classList.add('icon');
           const $titleElements = $svg.getElementsByTagName('title');
           $titleElements.length && $svg.removeChild($titleElements[0]);
@@ -105,8 +48,8 @@ class FixIt {
     });
   }
 
-  initTwemoji() {
-    this.config.twemoji && twemoji.parse(document.body);
+  initTwemoji(target = document.body) {
+    this.config.twemoji && twemoji.parse(target);
   }
 
   initMenu() {
@@ -115,7 +58,7 @@ class FixIt {
   }
 
   initMenuDesktop() {
-    this.util.forEach(document.querySelectorAll('.has-children, #header-desktop .language'), ($item) => {
+    this.util.forEach(document.querySelectorAll('.has-children'), ($item) => {
       $item.querySelector('.sub-menu').style.minWidth = `${$item.offsetWidth - 8}px`;
     });
   }
@@ -150,7 +93,7 @@ class FixIt {
         this.isDark = !this.isDark;
         window.localStorage?.setItem('theme', this.isDark ? 'dark' : 'light');
         for (let event of this.switchThemeEventSet) {
-          event();
+          event(this.isDark);
         }
       }, false);
     });
@@ -254,74 +197,7 @@ class FixIt {
               $searchClear.style.display = 'inline';
               callback(results);
             };
-            if (searchConfig.type === 'lunr') {
-              const search = () => {
-                if (lunr.queryHandler) {
-                  query = lunr.queryHandler(query);
-                }
-                const results = {};
-                this._index.search(query).forEach(({ ref, matchData: { metadata } }) => {
-                  const matchData = this._indexData[ref];
-                  let { uri, title, content: context } = matchData;
-                  if (results[uri]) {
-                    return;
-                  }
-                  let position = 0;
-                  Object.values(metadata).forEach(({ content }) => {
-                    if (content) {
-                      const matchPosition = content.position[0][0];
-                      if (matchPosition < position || position === 0) {
-                        position = matchPosition;
-                      }
-                    }
-                  });
-                  position -= snippetLength / 5;
-                  if (position > 0) {
-                    position += context.substr(position, 20).lastIndexOf(' ') + 1;
-                    context = '...' + context.substr(position, snippetLength);
-                  } else {
-                    context = context.substr(0, snippetLength);
-                  }
-                  Object.keys(metadata).forEach((key) => {
-                    title = title.replace(new RegExp(`(${key})`, 'gi'), `<${highlightTag}>$1</${highlightTag}>`);
-                    context = context.replace(new RegExp(`(${key})`, 'gi'), `<${highlightTag}>$1</${highlightTag}>`);
-                  });
-                  results[uri] = {
-                    uri: uri,
-                    title: title,
-                    date: matchData.date,
-                    context: context
-                  };
-                });
-                return Object.values(results).slice(0, maxResultLength);
-              };
-              if (!this._index) {
-                fetch(searchConfig.lunrIndexURL)
-                  .then((response) => response.json())
-                  .then((data) => {
-                    const indexData = {};
-                    this._index = lunr(function () {
-                      if (searchConfig.lunrLanguageCode) this.use(lunr[searchConfig.lunrLanguageCode]);
-                      this.ref('objectID');
-                      this.field('title', { boost: 50 });
-                      this.field('tags', { boost: 20 });
-                      this.field('categories', { boost: 20 });
-                      this.field('content', { boost: 10 });
-                      this.metadataWhitelist = ['position'];
-                      data.forEach((record) => {
-                        indexData[record.objectID] = record;
-                        this.add(record);
-                      });
-                    });
-                    this._indexData = indexData;
-                    finish(search());
-                  })
-                  .catch((err) => {
-                    console.error(err);
-                    finish([]);
-                  });
-              } else finish(search());
-            } else if (searchConfig.type === 'algolia') {
+            if (searchConfig.type === 'algolia') {
               this._algoliaIndex =
                 this._algoliaIndex || algoliasearch(searchConfig.algoliaAppID, searchConfig.algoliaSearchKey).initIndex(searchConfig.algoliaIndex);
               this._algoliaIndex
@@ -357,7 +233,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;
@@ -427,17 +303,11 @@ class FixIt {
                       icon: '<i class="fa-brands fa-algolia fa-fw" aria-hidden="true"></i>',
                       href: 'https://www.algolia.com/'
                     }
-                  : (searchConfig.type === 'lunr'
-                      ? {
-                          searchType: 'Lunr.js',
-                          icon: '',
-                          href: 'https://lunrjs.com/'
-                        }
-                      : {
-                          searchType: 'Fuse.js',
-                          icon: '',
-                          href: 'https://fusejs.io/'
-                        })
+                  : {
+                      searchType: 'Fuse.js',
+                      icon: '',
+                      href: 'https://fusejs.io/'
+                    }
               return `<div class="search-footer">Search by <a href="${href}" rel="noopener noreferrer" target="_blank">${icon} ${searchType}</a></div>`;
             }
           }
@@ -452,31 +322,19 @@ class FixIt {
         this._searchDesktop = autosearch;
       }
     };
-    if (searchConfig.lunrSegmentitURL && !document.getElementById('lunr-segmentit')) {
-      const script = document.createElement('script');
-      script.id = 'lunr-segmentit';
-      script.src = searchConfig.lunrSegmentitURL;
-      script.async = true;
-      if (script.readyState) {
-        script.onreadystatechange = () => {
-          if (script.readyState == 'loaded' || script.readyState == 'complete') {
-            script.onreadystatechange = null;
-            initAutosearch();
-          }
-        };
-      } else {
-        script.onload = () => {
-          initAutosearch();
-        };
-      }
-      document.body.appendChild(script);
-    } else {
-      initAutosearch();
+    initAutosearch();
+  }
+
+  initBreadcrumb() {
+    const $breadcrumbContainer = document.querySelector('.breadcrumb-container.sticky')
+    this.breadcrumbHeight = $breadcrumbContainer?.clientHeight ?? 0;
+    if (this.breadcrumbHeight) {
+      document.querySelector('main.container')?.style.setProperty('--fi-breadcrumb-height', `${this.breadcrumbHeight}px`);
     }
   }
 
-  initDetails() {
-    this.util.forEach(document.getElementsByClassName('details'), ($details) => {
+  initDetails(target = document) {
+    this.util.forEach(target.getElementsByClassName('details'), ($details) => {
       const $summary = $details.querySelector('.details-summary');
       $summary.addEventListener('click', () => {
         $details.classList.toggle('open');
@@ -486,7 +344,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,
@@ -518,7 +377,8 @@ class FixIt {
       $preChroma.parentElement.replaceChild($chroma, $preChroma);
       $td.appendChild($preChroma);
     });
-    this.util.forEach(document.querySelectorAll('.highlight > .chroma'), ($chroma) => {
+    this.util.forEach(document.querySelectorAll('.highlight > .chroma:not([data-init])'), ($chroma) => {
+      $chroma.dataset.init = 'true';
       const $codeElements = $chroma.querySelectorAll('pre.chroma > code');
       if ($codeElements.length) {
         const $code = $codeElements[$codeElements.length - 1];
@@ -527,7 +387,13 @@ class FixIt {
         // code title
         const $title = document.createElement('span');
         $title.classList.add('code-title');
-        $title.insertAdjacentHTML('afterbegin', '<i class="arrow fa-solid fa-chevron-right fa-fw" aria-hidden="true"></i>');
+        // 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);
@@ -591,8 +457,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);
@@ -600,23 +466,21 @@ class FixIt {
     });
   }
 
-  initHeaderLink() {
-    for (let num = 1; num <= 6; num++) {
-      this.util.forEach(document.querySelectorAll('.single .content > h' + num), ($header) => {
-        $header.classList.add('header-link');
-        $header.insertAdjacentHTML('afterbegin', `<a href="#${$header.id}" class="header-mark"></a>`);
-      });
-    }
-  }
   /**
    * init table of contents
    */
   initToc() {
-    const $tocCore = document.getElementById('TableOfContents');
+    let $tocCore = document.getElementById('TableOfContents');
     if ($tocCore === null) {
       return;
     }
-    if (document.getElementById('toc-static').getAttribute('data-kept') === 'true' || this.util.isTocStatic()) {
+    // 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) {
         $tocCore.parentElement.removeChild($tocCore);
@@ -636,8 +500,7 @@ class FixIt {
       $toc.style.marginTop = `${$postMeta.offsetTop + $postMeta.clientHeight}px`;
       const $tocLinkElements = $tocCore.querySelectorAll('a:first-child');
       const $tocLiElements = $tocCore.getElementsByTagName('li');
-      const $headerLinkElements = document.getElementsByClassName('header-link');
-      const headerIsFixed = document.body.getAttribute('data-header-desktop') !== 'normal';
+      const $headingElements = document.getElementsByClassName('heading-element');
       const headerHeight = document.getElementById('header-desktop').offsetHeight;
       document.querySelector('.container').addEventListener('resize', () => {
         $toc.style.marginBottom = `${document.querySelector('.container').clientHeight - document.querySelector('.post-footer').offsetTop}px`;
@@ -650,17 +513,17 @@ class FixIt {
         this.util.forEach($tocLiElements, ($tocLi) => {
           $tocLi.classList.remove('has-active');
         });
-        const INDEX_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
-        let activeTocIndex = $headerLinkElements.length - 1;
-        for (let i = 0; i < $headerLinkElements.length - 1; i++) {
-          const thisTop = $headerLinkElements[i].getBoundingClientRect().top;
-          const nextTop = $headerLinkElements[i + 1].getBoundingClientRect().top;
+        const INDEX_SPACING = 20 + (document.body.dataset.headerDesktop !== 'normal' ? headerHeight : 0) + this.breadcrumbHeight;
+        let activeTocIndex = $headingElements.length - 1;
+        for (let i = 0; i < $headingElements.length - 1; i++) {
+          const thisTop = $headingElements[i].getBoundingClientRect().top;
+          const nextTop = $headingElements[i + 1].getBoundingClientRect().top;
           if ((i == 0 && thisTop > INDEX_SPACING) || (thisTop <= INDEX_SPACING && nextTop > INDEX_SPACING)) {
             activeTocIndex = i;
             break;
           }
         }
-        if (activeTocIndex !== -1) {
+        if (activeTocIndex !== -1 && $tocLinkElements[activeTocIndex]) {
           $tocLinkElements[activeTocIndex].classList.add('active');
           let $parent = $tocLinkElements[activeTocIndex].parentElement;
           while ($parent !== $tocCore) {
@@ -687,27 +550,38 @@ class FixIt {
     }, false);
   }
 
-  initMath() {
+  initMath(target = document.body) {
     if (this.config.math) {
-      renderMathInElement(document.body, this.config.math);
+      renderMathInElement(target, this.config.math);
     }
   }
 
   initMermaid() {
-    this._mermaidOnSwitchTheme = this._mermaidOnSwitchTheme || (() => {
-      const $mermaidElements = document.getElementsByClassName('mermaid');
-      if ($mermaidElements.length) {
-        const themes = this.config.mermaid.themes ?? ['neutral', 'dark'];
-        mermaid.initialize({startOnLoad: false, 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);
-        });
-      }
+    if (!window.mermaid?.initialize) {
+      return;
+    }
+    const _initializeAndRun = () => {
+      const themes = window.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.
     });
-    this.switchThemeEventSet.add(this._mermaidOnSwitchTheme);
-    this._mermaidOnSwitchTheme();
   }
 
   initEcharts() {
@@ -722,11 +596,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();
@@ -740,11 +619,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, navigation, geolocate, scale, fullscreen } = JSON.parse($mapbox.dataset.options);
         const mapbox = new mapboxgl.Map({
           container: $mapbox,
           center: [lng, lat],
@@ -783,7 +664,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());
         });
@@ -792,22 +673,45 @@ 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 || '|';
-      Object.values(typeitConfig.data).forEach((group) => {
+      const loop = typeitConfig.loop ?? false;
+      // 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 instance = new TypeIt(`#${id}`, {
-            strings: this.data[id],
+          const typeitElement = group[i];
+          const singleLoop = typeitElement.dataset.loop;
+          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: speed,
             lifeLike: true,
             cursorSpeed: cursorSpeed,
             cursorChar: cursorChar,
             waitUntilVisible: true,
+            loop: singleLoop ? JSON.parse(singleLoop) : loop,
             afterComplete: () => {
               if (i === group.length - 1) {
                 if (typeitConfig.duration >= 0) {
@@ -824,6 +728,7 @@ class FixIt {
         };
         typeone(0);
       });
+      stagingDOM.destroy();
     }
   }
 
@@ -872,7 +777,7 @@ class FixIt {
           countEl: this.config.comment.artalk.countEl
         })
       }
-      const artalk = new Artalk(this.config.comment.artalk);
+      const artalk = Artalk.init(this.config.comment.artalk);
       artalk.setDarkMode(this.isDark);
       this.switchThemeEventSet.add(() => {
         artalk.setDarkMode(this.isDark);
@@ -950,18 +855,16 @@ 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);
-      const _this = this;
-      _this.giscus2parentMsg = window.addEventListener('message', (event) => {
+      this.giscus2parentMsg = window.addEventListener('message', (event) => {
         const $script = document.querySelector('#giscus>script');
         if ($script){
-          _this._giscusOnSwitchTheme();
+          this._giscusOnSwitchTheme();
           $script.parentElement.removeChild($script);
         }
-        window.removeEventListener('message', _this.giscus2parentMsg);
-      });
+      }, { once: true });
       return;
     }
   }
@@ -1022,7 +925,7 @@ class FixIt {
     this.config.watermark?.enable &&
       new Watermark({
         content: this.config.watermark.content || `${document.querySelector('footer .fixit-icon')?.outerHTML ?? ''} FixIt Theme`,
-        appendTo: this.config.watermark.appendto || '.wrapper>main',
+        appendTo: '.widgets',
         opacity: this.config.watermark.opacity,
         width: this.config.watermark.width,
         height: this.config.watermark.height,
@@ -1053,7 +956,6 @@ class FixIt {
   }
 
   initFixItDecryptor() {
-    const $tocNodes = document.querySelectorAll('#toc-auto>.d-none, #toc-static.d-none');
     this.decryptor = new FixItDecryptor({
       decrypted: () => {
         this.initTwemoji();
@@ -1061,22 +963,37 @@ class FixIt {
         this.initLightGallery();
         this.initHighlight();
         this.initTable();
-        this.initHeaderLink();
         this.initMath();
         this.initMermaid();
         this.initEcharts();
         this.initTypeit();
         this.initMapbox();
-        this.util.forEach($tocNodes, ($element) => {
-          $element.classList.remove('d-none');
-        });
         this.initToc();
         this.initTocListener();
         this.initPangu();
+        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.initHighlight();
+        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($tocNodes, ($element) => {
-          $element.classList.add('d-none');
+        this.util.forEach(document.querySelectorAll('.decrypted-shown'), ($element) => {
+          $element.classList.replace('decrypted-shown', 'encrypted-hidden');
         });
       }
     });
@@ -1084,6 +1001,9 @@ class FixIt {
       this.decryptor.addEventListener('decrypted', () => {
         this.decryptor.initShortcodes();
       })
+      this.decryptor.addEventListener('partial-decrypted', () => {
+        this.decryptor.initShortcodes();
+      })
       this.decryptor.initShortcodes();
     }
     this.config.encryption?.all && this.decryptor.init();
@@ -1120,9 +1040,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({ 
@@ -1132,6 +1052,36 @@ class FixIt {
     }
   }
 
+  initReward() {
+    const $rewards = document.querySelectorAll('.post-reward [data-mode="fixed"]');
+    if (!$rewards.length) {
+      return;
+    }
+    // `fixed` mode only supports desktop
+    if (this.util.isMobile()) {
+      this.util.forEach($rewards, ($reward) => {
+        $reward.removeAttribute('data-mode');
+      });
+      return;
+    }
+    // Close post reward images exclude special id
+    const _closeRewardExclude = (id) => {
+      this.util.forEach($rewards, ($reward) => {
+        const $rewardInput = $reward.parentElement.querySelector('.reward-input');
+        if ($rewardInput.id !== id) {
+          $rewardInput.checked = false;
+        }
+      });
+    };
+    // Add additional click event to reward buttons
+    this.util.forEach($rewards, ($reward) => {
+      $reward.previousElementSibling.addEventListener('click', function () {
+        _closeRewardExclude(this.getAttribute('for'));
+      }, false)
+    });
+    this.scrollEventSet.add(_closeRewardExclude);
+  }
+
   onScroll() {
     const $headers = [];
     const ACCURACY = 20;
@@ -1205,7 +1155,6 @@ class FixIt {
             event();
           }
           this.initToc();
-          this.initMermaid();
           this.initSearch();
 
           const isMobile = this.util.isMobile()
@@ -1231,17 +1180,28 @@ class FixIt {
     }, false);
   }
 
+  beforeprint() {
+    window.addEventListener('beforeprint', () => {
+      this.util.forEach(document.querySelectorAll('.chroma'), ($el) => {
+        $el.classList.toggle('open', true)
+      });
+      for (let event of this.beforeprintEventSet) {
+        event();
+      }
+    }, false);
+  }
+
   init() {
     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.initTable();
-        this.initHeaderLink();
         this.initMath();
         this.initMermaid();
         this.initEcharts();
@@ -1254,12 +1214,14 @@ class FixIt {
       this.initMenu();
       this.initSwitchTheme();
       this.initSearch();
+      this.initBreadcrumb();
       this.initCookieconsent();
       this.initSiteTime();
       this.initServiceWorker();
       this.initWatermark();
       this.initMDevtools();
       this.initAutoMark();
+      this.initReward();
 
       window.setTimeout(() => {
         this.initComment();
@@ -1270,6 +1232,7 @@ class FixIt {
         this.onScroll();
         this.onResize();
         this.onClickMask();
+        this.beforeprint();
       }, 100);
     } catch (err) {
       console.error(err);

assets/js/util.js

@@ -0,0 +1,89 @@
+export default class Util {
+  forEach(elements, handler) {
+    elements = elements || [];
+    for (let i = 0; i < elements.length; i++) {
+      handler(elements[i]);
+    }
+  }
+
+  getScrollTop() {
+    return (document.documentElement ?? document.body).scrollTop;
+  }
+
+  isMobile() {
+    return window.matchMedia('only screen and (max-width: 680px)').matches;
+  }
+
+  isTocStatic() {
+    return window.matchMedia('only screen and (max-width: 960px)').matches;
+  }
+
+  /**
+   * add animate to element
+   * @param {Element} element animate element
+   * @param {String|Array<String>} animation animation name
+   * @param {Boolean} reserved reserved animation
+   * @param {Function} callback remove callback
+   */
+  animateCSS(element, animation, reserved, callback) {
+    !Array.isArray(animation) && (animation = [animation]);
+    element.classList.add('animate__animated', ...animation);
+    element.addEventListener('animationend', () => {
+      !reserved && element.classList.remove('animate__animated', ...animation);
+      typeof callback === 'function' && callback();
+    }, { once: true });
+  }
+
+  /**
+   * date validator
+   * @param {*} date may be date or not
+   * @returns {Boolean}
+   */
+  isValidDate(date) {
+    return date instanceof Date && !isNaN(date.getTime());
+  }
+  
+  /**
+   * scroll some element into view
+   * @param {String} selector element to scroll
+   */
+  scrollIntoView(selector) {
+    const element = selector.startsWith('#')
+      ? document.getElementById(selector.slice(1))
+      : document.querySelector(selector);
+    element?.scrollIntoView({
+      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);
+      }
+    }
+  }
+}

assets/lib/VERSION

@@ -1,32 +1,31 @@
-algoliasearch@4.14.2 https://github.com/algolia/algoliasearch-client-javascript
+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.3.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@2.5.0 https://github.com/liriliri/eruda
-fontawesome-free@6.2.0 https://github.com/FortAwesome/Font-Awesome
+eruda@3.0.1 https://github.com/liriliri/eruda
+fontawesome-free@6.4.2 https://github.com/FortAwesome/Font-Awesome
 fusejs@6.6.2 https://github.com/krisk/fuse
 gitalk@1.7.2 https://github.com/gitalk/gitalk
-katex@0.16.2 https://github.com/KaTeX/KaTeX
-lazysizes@5.3.2 https://github.com/aFarkas/lazysizes
-lightgallery@2.6.1 https://github.com/sachinchoolur/lightgallery
-lunr.js@2.3.9 https://github.com/olivernn/lunr.js
+instant.page@5.2.0 https://github.com/instantpage/instant.page
+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.1.7 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]
 pangu.js@4.0.7 https://github.com/vinta/pangu.js
 sharer.js@0.5.1 https://github.com/ellisonleao/sharer.js
-simple-icons@7.12.0 https://github.com/simple-icons/simple-icons
+simple-icons@9.19.0 https://github.com/simple-icons/simple-icons
 twemoji@14.0.2 https://github.com/twitter/twemoji
-twikoo@1.6.8 https://github.com/imaegoo/twikoo
-typeit@8.7.0 https://github.com/alexmacarthur/typeit
+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.14.6 https://github.com/Tencent/vConsole
-waline@2.10.0 https://github.com/walinejs/waline
+vconsole@3.15.1 https://github.com/Tencent/vConsole
+waline@2.15.8 https://github.com/walinejs/waline

assets/lib/aplayer/dark.scss

@@ -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;

assets/lib/crypto-js/md5.js

@@ -75,7 +75,7 @@
 	            var M_offset_14 = M[offset + 14];
 	            var M_offset_15 = M[offset + 15];
 
-	            // Working varialbes
+	            // Working variables
 	            var a = H[0];
 	            var b = H[1];
 	            var c = H[2];

assets/lib/instant-page/instantpage.min.js

@@ -0,0 +1,9 @@
+/**
+ * Minified by jsDelivr using Terser v5.15.1.
+ * Original file: /npm/instant.page@5.2.0/instantpage.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+/*! instant.page v5.2.0 - (C) 2019-2023 Alexandre Dieulot - https://instant.page/license */
+let _allowQueryString,_allowExternalLinks,_useWhitelist,_lastTouchTimestamp,_mouseoverTimer,_chromiumMajorVersionInUserAgent=null,_delayOnHover=65,_preloadedList=new Set;const DELAY_TO_NOT_BE_CONSIDERED_A_TOUCH_INITIATED_ACTION=1111;function init(){if(!document.createElement("link").relList.supports("prefetch"))return;const e="instantVaryAccept"in document.body.dataset||"Shopify"in window,t=navigator.userAgent.indexOf("Chrome/");if(t>-1&&(_chromiumMajorVersionInUserAgent=parseInt(navigator.userAgent.substring(t+"Chrome/".length))),e&&_chromiumMajorVersionInUserAgent&&_chromiumMajorVersionInUserAgent<110)return;const n="instantMousedownShortcut"in document.body.dataset;_allowQueryString="instantAllowQueryString"in document.body.dataset,_allowExternalLinks="instantAllowExternalLinks"in document.body.dataset,_useWhitelist="instantWhitelist"in document.body.dataset;const o={capture:!0,passive:!0};let i=!1,r=!1,s=!1;if("instantIntensity"in document.body.dataset){const e=document.body.dataset.instantIntensity;if(e.startsWith("mousedown"))i=!0,"mousedown-only"==e&&(r=!0);else if(e.startsWith("viewport")){const t=navigator.connection&&navigator.connection.saveData,n=navigator.connection&&navigator.connection.effectiveType&&navigator.connection.effectiveType.includes("2g");t||n||("viewport"==e?document.documentElement.clientWidth*document.documentElement.clientHeight<45e4&&(s=!0):"viewport-all"==e&&(s=!0))}else{const t=parseInt(e);isNaN(t)||(_delayOnHover=t)}}if(r||document.addEventListener("touchstart",touchstartListener,o),i?n||document.addEventListener("mousedown",mousedownListener,o):document.addEventListener("mouseover",mouseoverListener,o),n&&document.addEventListener("mousedown",mousedownShortcutListener,o),s){let e=window.requestIdleCallback;e||(e=e=>{e()}),e((function(){const e=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const n=t.target;e.unobserve(n),preload(n.href)}}))}));document.querySelectorAll("a").forEach((t=>{isPreloadable(t)&&e.observe(t)}))}),{timeout:1500})}}function touchstartListener(e){_lastTouchTimestamp=performance.now();const t=e.target.closest("a");isPreloadable(t)&&preload(t.href,"high")}function mouseoverListener(e){if(performance.now()-_lastTouchTimestamp<1111)return;if(!("closest"in e.target))return;const t=e.target.closest("a");isPreloadable(t)&&(t.addEventListener("mouseout",mouseoutListener,{passive:!0}),_mouseoverTimer=setTimeout((()=>{preload(t.href,"high"),_mouseoverTimer=void 0}),_delayOnHover))}function mousedownListener(e){const t=e.target.closest("a");isPreloadable(t)&&preload(t.href,"high")}function mouseoutListener(e){e.relatedTarget&&e.target.closest("a")==e.relatedTarget.closest("a")||_mouseoverTimer&&(clearTimeout(_mouseoverTimer),_mouseoverTimer=void 0)}function mousedownShortcutListener(e){if(performance.now()-_lastTouchTimestamp<1111)return;const t=e.target.closest("a");if(e.which>1||e.metaKey||e.ctrlKey)return;if(!t)return;t.addEventListener("click",(function(e){1337!=e.detail&&e.preventDefault()}),{capture:!0,passive:!1,once:!0});const n=new MouseEvent("click",{view:window,bubbles:!0,cancelable:!1,detail:1337});t.dispatchEvent(n)}function isPreloadable(e){if(e&&e.href&&(!_useWhitelist||"instant"in e.dataset)){if(e.origin!=location.origin){if(!(_allowExternalLinks||"instant"in e.dataset)||!_chromiumMajorVersionInUserAgent)return}if(["http:","https:"].includes(e.protocol)&&("http:"!=e.protocol||"https:"!=location.protocol)&&(_allowQueryString||!e.search||"instant"in e.dataset)&&!(e.hash&&e.pathname+e.search==location.pathname+location.search||"noInstant"in e.dataset))return!0}}function preload(e,t="auto"){if(_preloadedList.has(e))return;const n=document.createElement("link");n.rel="prefetch",n.href=e,n.fetchPriority=t,n.as="document",document.head.appendChild(n),_preloadedList.add(e)}init();
+//# sourceMappingURL=/sm/60fb95dda2409979534f889b11a4279c9602c20254de5a856d5c95159338bab2.map

assets/lib/katex/auto-render.min.js

@@ -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}()}));

assets/lib/katex/copy-tex.min.js

@@ -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}()}));