🔖 Chore(release): 0.3.7

✨ 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,11 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": "> 0.25%, not dead"
-      }
-    ],
-    "minify"
-  ]
-}

.gitattributes

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

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+custom: [
+  "https://paypal.me/Lruihao"
+]

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,41 +0,0 @@
----
-name: Bug Report 错误报告
-about: Create a bug report 创建一个错误报告
-title: "[BUG] Some problem..."
-labels: bug
-
----
-
-### Describe the bug 描述你遇到的错误
-
-A clear and concise description of what the bug is.
-一段简短的对于你遇到的错误的描述.
-
-### Expected behavior 期待的行为
-
-A clear and concise description of what you expected to happen.
-一段简短的对于你期待的行为的描述.
-
-### Screenshots 屏幕截图
-
-If applicable, add screenshots to help explain your problem.
-如果可以的话, 提供屏幕截图对解决问题很有帮助.
-
-### Build Environment 构建环境
-
-- OS: [e.g. Windows 10, macOS, Ubuntu]
-- Theme version/commit [e.g. 0.2.0, 2ccba79]
-- Hugo version [e.g. 0.69.0]
-
-Please try to use Hugo **extended** version before opening the issue.
-请在创建 issue 之前尝试使用 Hugo **extended** 版本.
-
-### Preview Environment 预览环境
-
-- OS: [e.g. Windows 10, macOS, Ubuntu, iOS, Android]
-- Browser [e.g. Chrome, Safari, Firefox]
-
-### Additional Information 补充信息
-
-Configuration files or front matter code...
-配置文件或者前置参数的代码...

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,51 @@
+name: "Bug Report 错误报告"
+description: "Create a bug report 创建一个错误报告"
+title: "[BUG] Some problem ..."
+labels: ["bug"]
+body:
+  - type: textarea
+    id: describe
+    attributes:
+      label: Describe the bug 描述你遇到的错误
+      description: |
+        A clear and concise description of what the bug is.
+        一段简短的对于你遇到的错误的描述。
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior 期待的行为
+      description: |
+        A clear and concise description of what you expected to happen.
+        一段简短的对于你期待的行为的描述。
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots 屏幕截图
+      description: |
+       If applicable, add screenshots to help explain your problem.
+       如果可以的话，提供屏幕截图对解决问题很有帮助。
+  - type: textarea
+    id: environment
+    attributes:
+      label: Build Environment 构建环境
+      description: |
+        Please try to use Hugo **extended** version before opening the issue.
+        请在创建 issue 之前尝试使用 Hugo **extended** 版本。
+      placeholder: |
+        - OS: [e.g. Windows 10, macOS, Ubuntu]
+        - Theme version/commit [e.g. 0.2.0, 2ccba79]
+        - Hugo version [e.g. 0.69.0]
+  - type: textarea
+    id: preview
+    attributes:
+      label: Preview Environment 预览环境
+      placeholder: |
+        - OS: [e.g. Windows 10, macOS, Ubuntu, iOS, Android]
+        - Browser [e.g. Chrome, Safari, Firefox]
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional Information 补充信息
+      description: |
+        Configuration files or front matter code ...
+        配置文件或者前置参数的代码……

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,13 @@
 blank_issues_enabled: false
 contact_links:
+  - name: Questions 问题讨论
+    url: https://github.com/hugo-fixit/FixIt/discussions/new
+    about: Please ask questions in Discussion. 请在讨论中提问。
+
+  - name: 官方 QQ 群
+    url: https://qm.qq.com/cgi-bin/qm/qr?k=awbwdTtSQ_-H5QGzeJxdWgv6JMbNehNM&jump_from=webapi
+    about: '加入 FixIt 主题交流群: 814031017'
+
   - name: Theme Documentation 主题文档
-    url: https://hugoloveit.com/categories/documentation/
-    about: Please read the documentation carefully. 请先仔细阅读主题文档.
+    url: https://fixit.lruihao.cn/categories/documentation/
+    about: Please read the documentation carefully. 请先仔细阅读主题文档。

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,22 +0,0 @@
----
-name: Feature request 功能请求
-about: Suggest an idea for this project 为这个项目提供一个建议
-title: "[FEATURE] Some feature"
-labels: enhancement
-
----
-
-### Describe the feature you want 描述你的功能需求
-
-- Feature 1 功能需求 1
-  I want this feature to solve ...
-  我希望这个功能解决 ...
-- Feature 2 功能需求 2
-  I want this feature to solve ...
-  我希望这个功能解决 ...
-- ...
-
-### Useful reference 有价值的参考
-
-If available, provide useful links to fulfill the feature.
-如果可以的话, 提供实现这个功能的相关参考链接.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,22 @@
+name: "Feature request 功能请求"
+description: "Suggest an idea for this project 为这个项目提供一个建议"
+title: "[FEATURE] Some feature"
+labels: ["enhancement"]
+body:
+    - type: textarea
+      id: describe
+      attributes:
+        label: Describe the feature you want 描述你的功能需求
+        description: |
+            Please submit new issues for different features.
+            请针对不同的功能建议提交新的 issue。
+        placeholder: |
+          I recommend adding this feature ...
+          我希望添加这样的一个功能……
+    - type: textarea
+      id: reference
+      attributes:
+        label: Useful reference 有价值的参考
+        description: |
+          If available, provide useful links to fulfill the feature. 
+          如果可以的话，提供实现这个功能的相关参考链接。

.github/configs/auto-assign.yml

@@ -0,0 +1,27 @@
+# Set to true to add reviewers to PRs
+addReviewers: true
+
+# Set to 'author' to add PR's author as a assignee
+addAssignees: author
+
+# A list of reviewers to be added to PRs (GitHub user name)
+reviewers:
+  - Lruihao
+  
+# A number of reviewers added to the PR
+# Set 0 to add all the reviewers (default: 0)
+numberOfReviewers: 1
+
+# A list of assignees, overrides reviewers if set
+assignees:
+  - Lruihao
+  
+# A number of assignees to add to the PRs
+# Set to 0 to add all of the assignees.
+# Uses numberOfReviewers if unset.
+numberOfAssignees: 0
+
+# A list of keywords to be skipped the process if PR's title include it
+skipKeywords:
+  - wip
+  - deps-dev

.github/configs/codeql.yml

@@ -0,0 +1,5 @@
+name: "CodeQL config"
+
+paths-ignore:
+  - assets/lib/**
+  - docs/**

.github/dependabot.yml

@@ -10,3 +10,25 @@ updates:
     schedule:
       interval: "monthly"
     open-pull-requests-limit: 1000
+    assignees:
+      - "Lruihao"
+    labels:
+      - "dependencies"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 1000
+    assignees:
+      - "Lruihao"
+    labels:
+      - "dependencies"
+  - package-ecosystem: "gitsubmodule"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 1000
+    assignees:
+      - "Lruihao"
+    labels:
+      - "dependencies"

.github/workflows/auto-assign.yml

@@ -0,0 +1,14 @@
+name: Auto Assign
+on:
+  issues:
+    types: [opened]
+  pull_request_target:
+    types: [opened]
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: wow-actions/auto-assign@v3
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CONFIG_FILE: .github/configs/auto-assign.yml

.github/workflows/build.yml

@@ -0,0 +1,21 @@
+name: Hugo build check
+on:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+jobs:
+  Actions-Hugo-Check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@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@v3
+        with:
+          hugo-version: latest
+          extended: true
+      - name: Build Hugo static files
+        run: hugo -v --source=demo --gc --minify

.github/workflows/codeql-analysis.yml

@@ -12,11 +12,14 @@
 name: "CodeQL"
 
 on:
+  push:
+    branches:
+      - master
   pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ main ]
+    branches:
+      - master
   schedule:
-    - cron: '45 0 * * 1'
+    - cron: "30 18 * * 5"
 
 jobs:
   analyze:
@@ -26,20 +29,24 @@ 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@v2
+    - 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@v1
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
+        config-file: ./.github/configs/codeql.yml
         # If you wish to specify custom queries, you can do so here or in a config file.
         # By default, queries listed here will override any specified in a config file.
         # Prefix the list here with "+" to use these queries and those in the config file.
@@ -48,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@v1
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -62,4 +69,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v3

.github/workflows/contributors.yml

@@ -0,0 +1,27 @@
+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

@@ -1,24 +1,28 @@
 # Hugo default output directory
 public/
-/exampleSite/resources/
-
-node_modules/
-build/
 resources/
 
-## OS Files
-# Windows
+# Hugo
+.hugo_build.lock
+jsconfig.json
+
+# NPM
+node_modules/
+
+# VSCode
+.vscode
+
+# OS Files
+## Windows
 Thumbs.db
 ehthumbs.db
 Desktop.ini
 $RECYCLE.BIN/
 
-# OSX
+## OSX
 .DS_Store
 
-# Linux
+## Linux
 .directory
 
-# Hugo
-.hugo_build.lock
-jsconfig.json
+CHANGELOG.md

.npmrc

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

CHANGELOG.md

@@ -1,43 +0,0 @@
-# Changelog
-All notable changes to this project will be documented in this file.
-<!-- Releases see https://github.com/Lruihao/FixIt/releases -->
-
-## v0.2.12 [2022-1-27]
-
-- :tada: Feat: add PWA support
-- :tada: Feat: add Watermark support ([#16](https://github.com/Lruihao/FixIt/issues/16))
-- :tada: Feat: add "不蒜子" count and site run time ([#18](https://github.com/Lruihao/FixIt/issues/18))
-- :sparkles: Feat: add pangu.js support ([#20](https://github.com/Lruihao/FixIt/issues/20))
-- :sparkles: Feat: add public network security config (only in China) ([#15](https://github.com/Lruihao/FixIt/issues/15))
-- :sparkles: Feat: add CustomJS option ([#24](https://github.com/Lruihao/FixIt/issues/24))
-- :sparkles: Feat: add theme embedded archeTypes
-- :mag: Feat(SEO): optimize SEO meta ([#30](https://github.com/Lruihao/FixIt/issues/30))
-- :zap: Feat: remove lib smooth-scroll ([#1](https://github.com/Lruihao/FixIt/issues/1)) replaced by CSS native properties scroll-margin, scroll-behavior ([#39](https://github.com/Lruihao/FixIt/issues/39))
-- :zap: Perf: merge shortcode cardlink (deprecated v0.2.13) into shortcode link and add 'download' param ([#42](https://github.com/Lruihao/FixIt/issues/42))
-- :zap: Perf: optimize JS loading ([#25](https://github.com/Lruihao/FixIt/issues/25))
-- :recycle: Refactor: header title DOM and add subtitle option ([#26](https://github.com/Lruihao/FixIt/issues/26))
-- :bug: Fix: set mermaid theme as 'default' when initialization ([#38](https://github.com/Lruihao/FixIt/issues/38))
-- :bug: Fix: typeit print code error ([#19](https://github.com/Lruihao/FixIt/issues/19))
-- :bug: Fix: pre element overflow error ([#29](https://github.com/Lruihao/FixIt/issues/29))
-- :bug: Fix: toc display error without content header ([#21](https://github.com/Lruihao/FixIt/issues/21))
-- :lipstick: Style: style detail adjustments, change scroll-behavior to smooth, taxonomy, header, footer, shortcode style etc.
-- :pencil: Docs: improve demo site documentation ([#37](https://github.com/Lruihao/FixIt/issues/37))
-- :wrench: Chore: add commands `fixit_checker.sh`
-- :wrench: Chore(i18n): change some translations
-- :arrow_up: Chore: update all third-party libraries
-- **Full Changelog:** [`v0.2.11...v0.2.12`](https://github.com/Lruihao/FixIt/compare/v0.2.11...v0.2.12)
-## v0.2.11 [2021-12-19]
-
-> :tada: The beginning of FixIt to fix the theme LoveIt.
-
-- :sparkles: Feat: add cardlink shortcode ([Lruihao/hugo-blog@`df9eca2`](https://github.com/Lruihao/hugo-blog/commit/df9eca26af43287748fd8d4654014357a8269b0b)) 
-- :tada: Feat: add friends layout template
-- :wrench: Chore(i18n): add translations for Traditional Chinese ([Lruihao/hugo-blog@`df9eca2`](https://github.com/Lruihao/hugo-blog/commit/b86157d8b84830bda415ab2488580afd843acac2))
-- :bug: Fix: mobile style ([Lruihao/hugo-blog#19](https://github.com/Lruihao/hugo-blog/issues/19))
-- :bug: Style: fix content h1 style ([Lruihao/hugo-blog#8](https://github.com/Lruihao/hugo-blog/issues/8))
-- :bug: Fix: `.params.author` should be `$params.author`  ([Lruihao/hugo-blog#1](https://github.com/Lruihao/hugo-blog/issues/1))
-- **Full Changelog:** [`v0.2.10...v0.2.11`](https://github.com/Lruihao/FixIt/compare/v0.2.10...v0.2.11)
-
-## v0.2.10 :arrow_down: [2020-5-29 before]
-
-Thanks [dillonzq/LoveIt](https://github.com/dillonzq/LoveIt/releases)

CONTRIBUTING.md

@@ -1,17 +1,18 @@
+# CONTRIBUTING
+
 ## How to contribute to this project
 
 First, fork this repository by clicking the fork button.
 
 Next, clone your forked repo.
 
-```
-git clone https://github.com/example/FixIt.git
-cd FixIt
+```bash
+git clone https://github.com/hugo-fixit/FixIt.git && cd FixIt
 ```
 
 Then, install the dev dependencies.
 
-```
+```bash
 npm install
 ```
 
@@ -19,51 +20,63 @@ And now you are ready to go!
 
 Here are some useful commands.
 
-```
-npm run babel #build theme.js with babel
-npm run build #build theme.js and then build the static site
-npm run start #build theme.js and then run a local debugging server
-npm run start:production #build theme.js and then run a local debugging server in production environment
-npm run serve #run a local debugging server without building a new theme.js
-npm run serve:production #run a local debugging server in production environment without building a new theme.js
+```bash
+# run a local debugging server with watch
+npm run server
+# run a local debugging server with watch in production environment
+npm run server:production
 ```
 
-Finally, create a new pull request at https://github.com/Lruihao/FixIt/pulls to submit your contribution 🎉
+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 🎉
 
 ## Git standard for developers
 
 ### Branches
 
-| Branch | Discription |
+| Branch | Description |
 | :-- | :-- |
 | master | _The branch open to the public and release versions_ |
-| RC branch | _The development branch of the next version, e.g. v0.2.12-RC_ |
+| dev | _The development branch of the next version_ |
+| RC branch | _The release candidate branch of the next version, e.g. v0.2.12-RC_ |
 | single feature | _The branch to enhancements or fixes_ |
 
 ### Merge events
 
 | event | merge |
 | :-- | :-- |
-| release | **master => RC branch:** `--rebase` |
+| release | **RC branch => master:** `--rebase` |
 | PR | **others:master => master:** `--rebase` |
 | single feature| **feature branch => RC branch:** `--merge` |
 
 ### Commit message
 
 #### Format
-> {emoji} {type}: {subject within 50 words} (#{issue/pull request})
+
+`[{emoji} ]{type}[({module})]: {subject within 50 words}[ (#{issue/pull request})]`
+
+example:
+
+- :tada: Feat: add shortcode fixit-encryptor shortcode (#123)
+- :arrow_up: Chore(libs): update Artalk from 2.2.12 to 2.3.4 (#150)
 
 #### Emoji
-- https://gitmoji.dev
+
+- <https://gitmoji.dev>
 - [vscode plugin](https://github.com/maixiaojie/git-emoji-zh.git)
 - utools plugin `GitEmoji`
 
 #### Message
 
-| Emoji                                         | Type     | Example                                                      | Discription (No Ambiguous)                                   |
+| Emoji                                         | Type     | Example                                                      | Description (No Ambiguous)                                   |
 | :-------------------------------------------- | :------- | :----------------------------------------------------------- | :----------------------------------------------------------- |
 | :tada:  <br>:sparkles:                        | Feat     | Feat: add {feature}                                          | new feature                                                  |
-| :truck:                                       |          | Feat: adjust/migrate {feature name}，{change details}        | For the adjustment feature, it is necessary to describe the current situation (before) and after adjustment (after) |
+| :truck:                                       |          | Feat: adjust/migrate {feature name}, {change details}        | For the adjustment feature, it is necessary to describe the current situation (before) and after adjustment (after) |
 | :fire:                                        |          | Feat: delete {feature name}, {deletion reason}               | If the feature is deleted, the reason for deletion must be explained |
 | :bug: <br>:construction: <br>:rotating_light: | Fix      | Fix: fix {bug description}                                   | Fix known bugs                                               |
 | :art: <br>:lipstick: <br>:pencil2:            | Style    | Style: Typesetting/CSS style {optimizing content}            | Changes that do not affect code operation, such as code layout and style change |

LICENSE

@@ -2,7 +2,7 @@ The MIT License (MIT)
 
 Copyright (c) 2018 LIUZHICHAO.COM
 Copyright (c) 2019-2020 DILLONZQ.COM
-Copyright (c) 2021-2022 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,229 +1,218 @@
 # FixIt Theme | Hugo
 
-[![GitHub release (latest by date)](https://img.shields.io/github/v/release/Lruihao/FixIt?style=flat-square)](https://github.com/Lruihao/FixIt/releases)
-[![GitHub commits since tagged version](https://img.shields.io/github/commits-since/Lruihao/FixIt/v0.2.10?style=flat-square)](https://github.com/Lruihao/FixIt/compare/v0.2.10...master)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
-[![License](https://img.shields.io/github/license/Lruihao/FixIt?style=flat-square)](https://github.com/Lruihao/FixIt/blob/master/LICENSE)
+[![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.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 | [简体中文说明](https://github.com/Lruihao/FixIt/blob/main/README.zh-cn.md)
+👉 English README | [简体中文说明](README.zh-cn.md)
 
-> **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), [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/Fastbyte01/KeepIt).
+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]
 
-[LoveIt Theme](https://github.com/dillonzq/LoveIt) is a awesome hugo theme for us, I'm sorry that it's repository has been out of maintenance for a long time, so I rebuilt a new fork named FixIt so that I can better **Fix It** and make it more user-friendly.
-
-The FixIt theme inherits the excellent functions of these themes, and adds new functions and optimizations on this basis. Please read [Why Choose FixIt](#why-choose-fixit) to learn more.
-
-![Hugo Theme FixIt](https://github.com/Lruihao/FixIt/raw/master/images/Apple-Devices-Preview.png)
+![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.webp)
 
 ## Getting started
-Head to this [documentation page](https://fixit.lruihao.cn/theme-documentation-basics/) for a complete guidence to get started with the FixIt theme.
 
-### [Demo Site](https://fixit.lruihao.cn)
-To see this theme in action, here is a live [demo site](https://fixit.lruihao.cn) which is rendered with **FixIt** theme.
+- [Installation](https://fixit.lruihao.cn/documentation/installation/)
+- [Getting Started](https://fixit.lruihao.cn/documentation/getting-started/)
+- [Content Management](https://fixit.lruihao.cn/documentation/content-management/)
+- [Advanced Usage](https://fixit.lruihao.cn/documentation/advanced/)
 
-### [Documentation](https://fixit.lruihao.cn/categories/documentation/)
-Build Documentation Locally:
+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).
 
-```bash
-hugo server --source=exampleSite
-```
+## Template repository
 
-Of course, you can also read the [FixIt wiki](https://github.com/Lruihao/FixIt/wiki) directly.
+- [hugo-fixit/hugo-fixit-start](https://github.com/hugo-fixit/hugo-fixit-start)
+- [hugo-fixit/hugo-fixit-start1](https://github.com/hugo-fixit/hugo-fixit-start1)
+- [hugo-fixit/docs](https://github.com/hugo-fixit/docs)
+- [Lruihao/hugo-blog](https://github.com/Lruihao/hugo-blog)
 
-## Migrate from LoveIt
+## Who used FixIt
 
-If you are currently using the LoveIt theme (or some other themes), it is very easy to migrate to FixIt.
-
-You can add this repo as a submodule of your site directory.
-
-```bash
-git submodule add https://github.com/Lruihao/FixIt.git themes/FixIt
-```
-
-And later you can update the submodule in your site directory to the latest commit using this command:
-
-```bash
-git submodule update --remote --merge
-```
-
-Or use shell command `fixit_checker.sh` to update and commit in the theme directory.
-
-```bash
-sh fixit_checker.sh
-```
-
-Next, go to the `config.toml` and change the default theme to `FixIt`.
-
-```diff
-- theme = "LoveIt"
-+ theme = "FixIt"
-```
-
-Now the migration is finished and everything is ready 🎉
-
-## Why choose FixIt
-
-* Custom **Header**
-* Custom **CSS Style**
-* A new **home page**, compatible with the latest version of Hugo
-* A lot of **style detail adjustments,** including color, font size, margins, code preview style
-* More readable **dark mode**
-* Some beautiful **CSS animations**
-* Easy-to-use and self-expanding **table of contents**
-* More **social links**, **share sites** and **comment system**
-* **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
-* **Copy code** to clipboard with one click
-* Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
-* Extended Markdown syntax for **ruby annotation**
-* Extended Markdown syntax for **fraction**
-* **Mathematical formula** supported by [KaTeX](https://katex.org/)
-* **Diagram syntax** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
-* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
-* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* Embedded **music player** supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
-* **Bilibili** player supported
-* Kinds of **admonitions** shortcode supported
-* Custom style shortcodes supported
-* **CDN** for all third-party libraries supported
-* **PWA (Progressive Web App)** supported
-* **Web Watermark** supported by [Watermark](https://github.com/Lruihao/watermark)
-* **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
-* **Card type** link shortcode
-* **Friends** page embedded template
-* ...
-
-In short,  
-if you prefer the design language and freedom of the FixIt theme,  
-if you want to use the extended Font Awesome icons conveniently,  
-if you want to embed mathematical formulas, flowcharts, music or Bilibili videos in your posts,  
-the FixIt theme may be more suitable for you.  
+To see this theme in action, here are some [live demo sites](https://fixit.lruihao.cn/friends/) which are rendered with **FixIt** theme.
 
 ## Features
 
 ### Performance and SEO
 
-* Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
-* Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
-* **[Google Analytics](https://analytics.google.com/analytics)** supported
-* **[Fathom Analytics](https://usefathom.com/)** supported
-* Search engine **verification** supported (Google, Bind, Yandex and Baidu)
-* **CDN** for third-party libraries supported
-* Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
+- 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 **64** 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/)
-* **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/)
+- **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
 
-* **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
-* **Twemoji** supported
-* Automatically **highlighting** code
-* **Copy code** to clipboard with one click
-* **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
-* Extended Markdown syntax for **ruby annotation**
-* Extended Markdown syntax for **fraction**
-* **Mathematical formula** supported by [KaTeX](https://katex.org/)
-* **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
-* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
-* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
-* **Bilibili player** shortcode
-* Kinds of **admonitions** shortcode
-* **Custom style** shortcode
-* **Custom script** shortcode
-* **Animated typing** supported by [TypeIt](https://typeitjs.com/)
-* **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
-* **PWA (Progressive Web App)** supported
-* **Web Watermark** supported by [Watermark](https://github.com/Lruihao/watermark)
-* **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
-* **Card type** link shortcode
-* **Friends** page embedded template
-* ...
+- **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** 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
-* French
-* Polish
-* Brazilian Portuguese
-* Italian
-* Spanish
-* German
-* Serbian
-* Russian
-* Romanian
-* Vietnamese
-* Traditional Chinese
-* [Contribute with a new language](https://github.com/Lruihao/FixIt/pulls)
-[Languages Compatibility](https://fixit.lruihao.cn/theme-documentation-basics/#language-compatibility)
+- 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)
 
-## [Roadmap](https://github.com/Lruihao/FixIt/projects/1)
+[Languages Compatibility](https://fixit.lruihao.cn/documentation/basics/#language-compatibility)
 
-## [Changelog](https://github.com/Lruihao/FixIt/blob/main/CHANGELOG.md)
+## [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 [issue tracker](https://github.com/Lruihao/FixIt/issues).
+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.
+
+## Contributing
+
+Please see [CONTRIBUTING.md](CONTRIBUTING.md) for getting started with the contribution.
+
+Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contributing and engaging in the discussions.
+
+**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>
+<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)
+- [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>
+<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)
+
+</details>
 
 ## License
 
-FixIt is licensed under the **MIT** license. Check the [LICENSE file](https://github.com/Lruihao/FixIt/blob/master/LICENSE) for details.
-
-Thanks to the authors of following resources included in the theme:
-
-* [normalize.css](https://github.com/necolas/normalize.css)
-* [Font Awesome](https://fontawesome.com/)
-* [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
-* [autocomplete.js](https://github.com/algolia/autocomplete.js)
-* [Lunr.js](https://lunrjs.com/)
-* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [lazysizes](https://github.com/aFarkas/lazysizes)
-* [object-fit-images](https://github.com/fregante/object-fit-images)
-* [Twemoji](https://github.com/twitter/twemoji)
-* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* [clipboard.js](https://github.com/zenorocha/clipboard.js)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
-* [TypeIt](https://typeitjs.com/)
-* [KaTeX](https://katex.org/)
-* [mermaid](https://github.com/knsv/mermaid)
-* [ECharts](https://echarts.apache.org/)
-* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* [APlayer](https://github.com/MoePlayer/APlayer)
-* [MetingJS](https://github.com/metowolf/MetingJS)
-* [Gitalk](https://github.com/gitalk/gitalk)
-* [Valine](https://valine.js.org/)
-* [cookieconsent](https://github.com/osano/cookieconsent)
-* [Watermark](https://github.com/Lruihao/watermark)
-* [pangu.js](https://github.com/vinta/pangu.js)
+FixIt is licensed under the **MIT** license. Check the [LICENSE file](LICENSE) for details.
 
 ## Author
 
-[Lruihao](https://lruihao.cn)
+Follow [Lruihao](https://github.com/Lruihao "Follow me on GitHub")
+
+## Sponsor
+
+[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
+
+If you enjoy the theme, please consider buying me a coffee ☕️. 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,226 +1,222 @@
 # FixIt 主题 | Hugo
 
-[![GitHub release (latest by date)](https://img.shields.io/github/v/release/Lruihao/FixIt?style=flat-square)](https://github.com/Lruihao/FixIt/releases)
-[![GitHub commits since tagged version](https://img.shields.io/github/commits-since/Lruihao/FixIt/v0.2.10?style=flat-square)](https://github.com/Lruihao/FixIt/compare/v0.2.10...master)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
-[![License](https://img.shields.io/github/license/Lruihao/FixIt?style=flat-square)](https://github.com/Lruihao/FixIt/blob/master/LICENSE)
+[![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.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](https://github.com/HEIGE-PCloud/DoIt/blob/main/README.md) | 简体中文说明
+👉 [English README](README.md) | 简体中文说明
 
-> [FixIt](https://github.com/Lruihao/FixIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
+[FixIt](https://github.com/hugo-fixit/FixIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
 
-它的原型基于 [LoveIt 主题](https://github.com/dillonzq/LoveIt), [LeaveIt 主题](https://github.com/liuzc/LeaveIt) 和 [KeepIt 主题](https://github.com/Fastbyte01/KeepIt)。
+它的原型基于 [LoveIt 主题](https://github.com/dillonzq/LoveIt)，[KeepIt 主题](https://github.com/Fastbyte01/KeepIt) 和 [LeaveIt 主题](https://github.com/liuzc/LeaveIt)。[^1]
 
-[LoveIt 主题](https://github.com/dillonzq/LoveIt) 对我们来说是一个很棒的 Hugo 主题，很抱歉的是它的存储库已经停止维护很长一段时间了，所以我重建了一个名为 FixIt 的新主题，这样我可以更好地 **Fix It** 并使它用户体验更好。
+![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.webp)
 
-FixIt 主题继承了这些主题的优秀功能，并在此基础上添加了新的功能与优化，请阅读 [为什么选择 FixIt](#为什么选择-FixIt) 来了解更多。
+## 主题文档
 
-![Hugo Theme FixIt](https://github.com/Lruihao/FixIt/raw/master/images/Apple-Devices-Preview.png)
+- [安装篇](https://fixit.lruihao.cn/zh-cn/documentation/installation/)
+- [入门篇](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/)
+- [内容管理](https://fixit.lruihao.cn/zh-cn/documentation/content-management/)
+- [进阶篇](https://fixit.lruihao.cn/zh-cn/documentation/advanced/)
 
-## 立即开始
-前往这篇 [文档](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/)
-为了直观地浏览主题特性，这里有一个基于 **FixIt** 主题渲染的 [预览网站](https://fixit.lruihao.cn/zh-cn/)。
+## 模板仓库
 
-### [文档](https://fixit.lruihao.cn/zh-cn/categories/documentation/)
-在本地构建文档：
-```bash
-hugo server --source=exampleSite
-```
+- [hugo-fixit/hugo-fixit-start](https://github.com/hugo-fixit/hugo-fixit-start)
+- [hugo-fixit/hugo-fixit-start1](https://github.com/hugo-fixit/hugo-fixit-start1)
+- [hugo-fixit/docs](https://github.com/hugo-fixit/docs)
+- [Lruihao/hugo-blog](https://github.com/Lruihao/hugo-blog)
 
-当然，你也可以直接阅读 [FixIt 主题维基](https://github.com/Lruihao/FixIt/wiki)
+## 谁在用 FixIt
 
-## 从 LoveIt 迁移
-
-如果你现在正在使用 LoveIt 主题（或者一些其他的主题），你可以很容易地迁移至 FixIt。
-
-你可以将这个主题仓库添加为你的网站目录的子模块。
-
-```bash
-git submodule add https://github.com/Lruihao/FixIt.git themes/FixIt
-```
-
-之后，你可以在站点目录通过这条命令来将主题更新至最新版本：
-
-```bash
-git submodule update --remote --merge
-```
-
-或者在主题目录中使用 shell 命令 `fixit_checker.sh` 将主题更新至最新版本：
-
-```bash
-sh fixit_checker.sh
-```
-
-接着，前往 `config.toml` 并将默认主题更改为 `FixIt`。
-
-```diff
-- theme = "LoveIt"
-+ theme = "FixIt"
-```
-
-这样就完成了迁移工作，现在一切准备就绪 🎉
-
-## 为什么选择 FixIt
-
-* 自定义**标题栏**
-* 自定义 **CSS 样式**
-* 焕然一新的**主页**，已经兼容最新版 Hugo
-* 大量的**样式细节调整**，包括颜色、字体大小、边距、代码预览样式
-* 可读性更强的**深色模式**
-* 一些美观的 **CSS 动画**
-* 易用和自动展开的**文章目录**
-* 支持更多的**社交链接**、**网站分享**和**评论系统**
-* 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
-* 一键**复制代码**到剪贴板
-* 支持基于 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
-* 支持**上标注释**的扩展 Markdown 语法
-* 支持**分数**的扩展 Markdown 语法
-* 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
-* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表**生成功能
-* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化**生成功能
-* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** 地图显示功能
-* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌**音乐播放器**
-* 支持内嵌 **Bilibili** 视频
-* 支持多种**注释**的 shortcode
-* 支持自定义样式的 shortcode
-* 支持所有第三方库的 **CDN**
-* 支持**渐进式网页应用**
-* 支持基于 [Watermark](https://github.com/Lruihao/watermark) 的**网页水印**
-* 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
-* 支持**卡片式链接**的 shortcode
-* 支持**友情链接**的页面模板
-* ...
-
-所以，  
-如果你更偏好 FixIt 主题的设计语言和自由度，  
-如果你想便捷地使用扩展的 Font Awesome 图标，  
-如果你想在文章内嵌数学公式、流程图、音乐或是 Bilibili 视频，  
-那么，FixIt 主题可能是更适合你。  
+为了直观地浏览主题特性，这里有一些基于 **FixIt** 主题渲染的 [预览网站](https://fixit.lruihao.cn/zh-cn/friends/)。
 
 ## 特性
 
 ### 性能和 SEO
 
-* **性能**优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， 99/100 的移动设备得分和 100/100 的桌面设备得分
-* 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
-* 支持 **[Google Analytics](https://analytics.google.com/analytics)**
-* 支持 **[Fathom Analytics](https://usefathom.com/)**
-* 支持搜索引擎的**网站验证** (Google, Bind, Yandex and Baidu)
-* 支持所有第三方库的 **CDN**
-* 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为**懒加载**
+- **性能**优化：在 [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)** 头像
-* 支持本地**头像**
-* 支持多达 **64** 种社交链接
-* 支持多达 **28** 种网站分享
-* 支持 **[Disqus](https://disqus.com)** 评论系统
-* 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
-* 支持 **[Valine](https://valine.js.org/)** 评论系统
-* 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
-* 支持 **[Telegram comments](https://comments.app/) 评论**系统
-* 支持 **[Commento](https://commento.io/)** 评论系统
-* 支持 **[Utterances](https://utteranc.es/)** 评论系统
+- 支持 **[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/) 的**搜索**
-* 支持 **Twemoji**
-* 支持**代码高亮**
-* 一键**复制代码**到剪贴板
-* 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
-* 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
-* 支持**上标注释**的扩展 Markdown 语法
-* 支持**分数**的扩展 Markdown 语法
-* 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
-* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
-* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
-* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
-* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
-* 支持 **Bilibili 视频** shortcode
-* 支持多种**注释**的 shortcode
-* 支持**自定义样式**的 shortcode
-* 支持**自定义脚本**的 shortcode
-* 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
-* 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
-* 支持**渐进式网页应用**
-* 支持基于 [Watermark](https://github.com/Lruihao/watermark) 的**网页水印**
-* 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
-* 支持**卡片式链接**的 shortcode
-* 支持**友情链接**的页面模板
-* ...
+- 支持**渐进式网页应用**
+- 支持**二级菜单**
+- 支持**内容加密**（页面、局部）
+- 支持**友情链接**的页面模板
+- 支持基于 [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/Lruihao/FixIt/pulls)
+- 英语
+- 简体中文
+- 繁体中文
+- 法语
+- 波兰语
+- 巴西葡萄牙语
+- 意大利语
+- 西班牙语
+- 德语
+- 塞尔维亚语
+- 俄语
+- 罗马尼亚语
+- 越南语
+- [贡献一种新的语言](https://github.com/hugo-fixit/FixIt/pulls)
+
 [语言兼容性](https://fixit.lruihao.cn/zh-cn/theme-documentation-basics/#language-compatibility)
 
-## [路线图](https://github.com/Lruihao/FixIt/projects/1)
+## [路线图](https://github.com/hugo-fixit/FixIt/projects/1)
 
-## 问题、想法、 bugs 和 PRs
+## [更新日志](/CHANGELOG.md)
 
-所有的反馈都是欢迎的！详见 [issue tracker](https://github.com/Lruihao/FixIt/issues)。
+## 问题、想法、bugs 和 PRs
+
+所有的反馈都是欢迎的！详见 [议题](https://github.com/hugo-fixit/FixIt/issues) 或者 [讨论](https://github.com/hugo-fixit/FixIt/discussions) 或者加入 QQ 群：`814031017`。
+
+## 参与贡献
+
+请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 以了解贡献该项目的基本信息。
+
+确保在贡献和参与讨论时遵守 [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)。
+
+**贡献时，请先通过此存储库上的问题讨论你希望进行的更改，然后再进行实际更改**。
+
+## [所有贡献者](contributors.md)
+
+## 镜像
+
+- Gitee 镜像仓库：<https://gitee.com/lruihao/FixIt>
+
+## 致谢
+
+<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)
+- [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>
+<summary>FixIt 主题还借鉴了以下项目的部分功能，同样感谢它们的作者：</summary>
+
+- [DoIt](https://github.com/HEIGE-PCloud/DoIt)
+- [NexT](https://github.com/next-theme/hexo-theme-next)
+
+</details>
 
 ## 许可协议
 
-FixIt 根据 **MIT** 许可协议授权。 更多信息请查看 [LICENSE 文件](https://github.com/Lruihao/FixIt/blob/master/LICENSE)。
-
-FixIt 主题中用到了以下项目，感谢它们的作者：
-
-* [normalize.css](https://github.com/necolas/normalize.css)
-* [Font Awesome](https://fontawesome.com/)
-* [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
-* [autocomplete.js](https://github.com/algolia/autocomplete.js)
-* [Lunr.js](https://lunrjs.com/)
-* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [lazysizes](https://github.com/aFarkas/lazysizes)
-* [object-fit-images](https://github.com/fregante/object-fit-images)
-* [Twemoji](https://github.com/twitter/twemoji)
-* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* [clipboard.js](https://github.com/zenorocha/clipboard.js)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
-* [TypeIt](https://typeitjs.com/)
-* [KaTeX](https://katex.org/)
-* [mermaid](https://github.com/knsv/mermaid)
-* [ECharts](https://echarts.apache.org/)
-* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* [APlayer](https://github.com/MoePlayer/APlayer)
-* [MetingJS](https://github.com/metowolf/MetingJS)
-* [Gitalk](https://github.com/gitalk/gitalk)
-* [Valine](https://valine.js.org/)
-* [cookieconsent](https://github.com/osano/cookieconsent)
-* [Watermark](https://github.com/Lruihao/watermark)
-* [pangu.js](https://github.com/vinta/pangu.js)
+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.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,27 +1,37 @@
 ---
-title: "{{ replace .TranslationBaseName "-" " " | title }}"
-subtitle: ""
-type: "friends"
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
+layout: friends
 date: {{ .Date }}
-description: "Friends of {{ .Site.Author.name }}"
-keywords: 
-  - Hugo
-  - friends tempalate
+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
 - nickname: Lruihao
   avatar: https://lruihao.cn/images/avatar.jpg
   url: https://lruihao.cn
-  discription: Lruihao's Note
+  description: Lruihao's Note
 ```
 
 ## Friendly Reminder
-> 1. If you want to exchange link, please leave a comment in the above format. (personal non-commercial blogs / websites only)
-> 2. Warn: Website failure, stop maintenance and improper content may be cancelled!
-> 3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
+
+{{< admonition 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,40 +1,43 @@
 ---
-title: "{{ replace .TranslationBaseName "-" " " | title }}"
-subtitle: ""
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
 date: {{ .Date }}
+slug: {{ substr .File.UniqueID 0 7 }}
 draft: true
-author: ""
-authorLink: ""
-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:
 
-# See details front matter: /theme-documentation-content/#front-matter
+# See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter
 ---
 
 <!--more-->

archetypes/posts.md

@@ -1,40 +1,43 @@
 ---
-title: "{{ replace .TranslationBaseName "-" " " | title }}"
-subtitle: ""
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
 date: {{ .Date }}
+slug: {{ substr .File.UniqueID 0 7 }}
 draft: true
-author: ""
-authorLink: ""
-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:
 
-# See details front matter: /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

@@ -1,3 +1,5 @@
+@import "../../lib/normalize/normalize";
+
 html {
   font-family: $global-font-family;
   font-weight: $global-font-weight;
@@ -6,22 +8,24 @@ html {
   line-height: $global-line-height;
   width: 100%;
   scroll-behavior: smooth;
+  overflow: overlay;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
   html {
-      scroll-behavior: auto;
+    scroll-behavior: auto;
   }
 }
 
 /* scrollbar, only support webkit */
 ::-webkit-scrollbar {
-  width: .5rem;
-  height: .5rem;
+  width: 0.5rem;
+  height: 0.5rem;
 }
 
 ::-webkit-scrollbar-thumb {
   background-color: $scrollbar-color;
+  @include border-radius($global-border-radius);
 
   &:hover {
     background-color: $scrollbar-hover-color;
@@ -31,7 +35,7 @@ html {
 ::selection {
   background-color: $selection-color;
 
-  [theme=dark] & {
+  [data-theme='dark'] & {
     background-color: $selection-color-dark;
   }
 }
@@ -39,32 +43,54 @@ html {
 body {
   background-color: $global-background-color;
   color: $global-font-color;
-  @include overflow-wrap(break-word);
   scrollbar-color: auto;
+  @include overflow-wrap(break-word);
 
-  &[theme=dark] {
+  &::-webkit-scrollbar {
+    width: 0.75rem;
+    height: 0.75rem;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    background-clip: content-box;
+    border: 2px solid transparent;
+    @include border-radius(0.5rem);
+  }
+
+  &[data-scroll]::-webkit-scrollbar-thumb {
+    background-color: $scrollbar-color;
+  }
+
+  &[data-theme='dark'] {
     color: $global-font-color-dark;
     background-color: $global-background-color-dark;
   }
 }
 
-@include ms;
-@include link(true, true);
-
-@import "../_partial/mask";
-@import "../_partial/icon";
-@import "../_partial/details";
-@import "../_partial/fixed-button";
-@import "../_partial/cookieconsent";
-
-img {
-  @include object-fit(contain);
+iframe {
+  border: 0;
+  @include border-radius($global-border-radius);
 }
 
-i.logo-icon{
-  width: 2em;
-  
-  .fa-ban {
-    color: $global-logo-icon-color;
-  }
-}
+[role='button'] {
+  cursor: pointer;
+}
+
+summary {
+  cursor: pointer;
+}
+
+abbr[title] {
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
+
+@include link(true, true);
+
+@import '../_partials/mask';
+@import '../_partials/img';
+@import '../_partials/icon';
+@import '../_partials/details';
+@import '../_partials/widgets';

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

@@ -0,0 +1,62 @@
+// ==============================
+// Common Styles
+// 常用样式
+// ==============================
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-start {
+  text-align: left !important;
+}
+.text-end {
+  text-align: right !important;
+}
+.text-center {
+  text-align: center !important;
+}
+
+.d-none {
+  display: none !important;
+}
+.d-none-desktop {
+  display: none;
+}
+.d-none-mobile {
+  display: block;
+}
+
+.ms-1,
+.mx-1 {
+  margin-left: 0.25em !important;
+}
+.me-1,
+.mx-1 {
+  margin-right: 0.25em !important;
+}
+.ps-1,
+.px-1 {
+  padding-left: 0.25em !important;
+}
+.pe-1,
+.px-1 {
+  padding-right: 0.25em !important;
+}
+
+@each $color, $value in $theme-colors {
+  .text-#{$color} {
+    color: var(--#{$prefix}#{$color}) !important;
+  }
+}
+
+@each $key, $value in $orders {
+  .order-#{$key} {
+    order: #{$value} !important;
+  }
+}
+
+.variant-numeric {
+  font-variant-numeric: tabular-nums lining-nums;
+}

assets/css/_core/_footer.scss

@@ -4,17 +4,20 @@ footer {
   text-align: center;
   line-height: 1.25rem;
   padding: 1rem 0;
+  @extend .print-d-none;
 
   .footer-container {
-    font-size: .875rem;
+    display: flex;
+    flex-direction: column;
+    font-size: 0.875rem;
 
     .footer-line {
       width: 100%;
 
-      .footer-divider::before {
+      .footer-divider:not(:first-child)::before {
         content: '|';
-        margin-left: .25rem;
-        margin-right: .25rem;
+        margin-left: 0.25rem;
+        margin-right: 0.25rem;
       }
 
       .animate-icon {
@@ -25,7 +28,6 @@ footer {
       .run-times {
         font-variant-numeric: tabular-nums lining-nums;
       }
-
     }
   }
 
@@ -33,19 +35,25 @@ footer {
 }
 
 @keyframes icon-animate {
-  0%,100% {
-    transform: scale(1)
+  0%,
+  100% {
+    @include transform(scale(1));
   }
 
-  10%,30% {
-    transform: scale(.9)
+  10%,
+  30% {
+    @include transform(scale(0.9));
   }
 
-  20%,40%,60%,80% {
-    transform: scale(1.1)
+  20%,
+  40%,
+  60%,
+  80% {
+    @include transform(scale(1.1));
   }
 
-  50%,70% {
-    transform: scale(1.1)
+  50%,
+  70% {
+    @include transform(scale(1.1));
   }
-}
+}

assets/css/_core/_header.scss

@@ -0,0 +1,654 @@
+header {
+  width: 100%;
+  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;
+  }
+
+  &: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));
+    }
+  }
+}
+
+.header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.header-title {
+  font-family: $header-title-font-family;
+  font-weight: bold;
+  margin-right: 0.5rem;
+  min-width: 10%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  @include flex(10);
+
+  .logo {
+    min-height: 1.5em;
+    height: 1.5em;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  .header-title-text {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+  }
+
+  .header-subtitle {
+    margin-left: 0.25rem;
+    font-size: 0.6em;
+  }
+}
+
+.menu {
+  margin: 0;
+  padding: 0;
+
+  .menu-item {
+    list-style: none;
+
+    & .dropdown-icon {
+      margin-left: 0.25rem;
+      font-size: .875em;
+      color: $global-font-color;
+
+      [data-theme='dark'] & {
+        color: $global-font-color-dark;
+      }
+
+      &.open::before {
+        content: "\f078";
+      }
+    }
+
+    &.active {
+      >.menu-link,
+      >.nested-item>.menu-link {
+        font-weight: bold;
+        color: $menu-active-color;
+
+        [data-theme='dark'] & {
+          color: $menu-active-color-dark;
+        }
+      }
+    }
+
+    .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;
+    }
+  }
+}
+
+.search {
+  position: relative;
+
+  input {
+    color: transparent;
+    box-sizing: border-box;
+    height: 2.5rem;
+    width: 1.25rem;
+    @include border-radius(0.5rem);
+    border: none;
+    outline: none;
+    background-color: transparent;
+    vertical-align: baseline !important;
+    @include transition(width 0.3s ease);
+  }
+
+  @include placeholder(transparent);
+
+  .search-button {
+    margin: 0;
+    position: absolute;
+    left: auto;
+    right: 1rem;
+  }
+
+  .search-toggle {
+    left: 0.5rem;
+    right: auto;
+
+    #header-desktop.open & {
+      left: 1rem;
+    }
+  }
+
+  .search-loading {
+    display: none;
+  }
+
+  .search-clear {
+    display: none;
+  }
+
+  .open &,
+  &.mobile {
+    input {
+      color: $global-font-color;
+      background-color: $search-background-color;
+      padding: 0 2rem 0 2rem;
+    }
+
+    [data-theme='dark'] & {
+      input {
+        color: $global-font-color-dark;
+        background-color: $search-background-color-dark;
+      }
+
+      @include placeholder($global-font-secondary-color-dark);
+    }
+
+    @include placeholder($global-font-secondary-color);
+
+    .search-button {
+      color: $global-font-secondary-color;
+
+      [data-theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+
+    .search-clear:hover {
+      color: #ff6b6b;
+    }
+
+    .search-toggle:hover {
+      cursor: default;
+    }
+  }
+}
+
+.theme-switch {
+  i {
+    @include transform(rotate(225deg));
+    @include transition(transform 0.4s ease);
+  }
+
+  &:hover i {
+    @include transform(rotate(45deg));
+  }
+}
+
+#header-desktop {
+  display: block;
+  position: sticky;
+  top: 0;
+  height: $header-height;
+  line-height: $header-height;
+  box-sizing: border-box;
+
+  [data-header-desktop='normal'] & {
+    position: static;
+  }
+
+  nav {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .header-wrapper {
+    // use css native function to calculate max value
+    padding: 0 2rem 0 MAX(10vh, $header-height);
+    height: 100%;
+
+    &[data-github-corner='right'] {
+      padding-right: $header-height;
+    }
+
+    .header-title {
+      font-size: $header-title-font-size;
+      height: 100%;
+    }
+
+    .menu {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      float: right;
+
+      >.menu-item {
+        &:hover .sub-menu {
+          display: block;
+          @include transform(translateX(-0.5rem));
+        }
+        &.language-switch:hover .sub-menu {
+          @include transform(translateX(calc(1.75rem - 100%)));
+        }
+      }
+
+      .menu-item {
+        padding: 0 0.5rem;
+
+        &.delimiter {
+          width: 0;
+          margin: 0.125rem 0.25rem;
+          padding: 0;
+          border-left: 1px dashed lighten($global-font-secondary-color, 15%);
+
+          [data-theme='dark'] & {
+            border-left-color: darken($global-font-secondary-color-dark, 15%);
+          }
+        }
+      }
+
+      .sub-menu {
+        position: absolute;
+        margin: 0;
+        padding: 0.25rem 0;
+        display: none;
+        top: calc(#{$header-height} - 0.75rem);
+        border-radius: $global-border-radius;
+        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));
+        }
+
+        .menu-item {
+          height: $header-height*0.5;
+          line-height: $header-height*0.5;
+          max-width: 15rem;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow-x: hidden;
+        }
+      }
+    }
+  }
+
+  &.open .header-wrapper .menu .menu-item.search {
+    input {
+      width: 24rem;
+    }
+  }
+}
+
+#header-mobile {
+  display: none;
+  position: sticky;
+  top: 0;
+  min-height: $header-height;
+  line-height: $header-height;
+
+  [data-header-mobile='normal'] & {
+    position: static;
+  }
+
+  .header-container {
+    padding: 0;
+    margin: 0;
+
+    .header-wrapper {
+      padding: 0 1rem;
+      font-size: 1.125rem;
+      @include transition(margin-top 0.3s ease);
+
+      .header-title {
+        font-size: $header-title-font-size;
+        max-width: 80%;
+      }
+
+      .menu-toggle {
+        line-height: 4rem;
+        cursor: pointer;
+        @include transition(width 0.3s ease);
+
+        span {
+          display: block;
+          background: $global-font-color;
+          width: 1.5rem;
+          height: 2px;
+          @include border-radius(3px);
+          @include transition(all 0.3s ease-in-out);
+
+          [data-theme='dark'] & {
+            background: $global-font-color-dark;
+          }
+        }
+
+        span:nth-child(1) {
+          margin-bottom: 0.5rem;
+        }
+
+        span:nth-child(3) {
+          margin-top: 0.5rem;
+        }
+
+        &.active {
+          span:nth-child(1) {
+            @include transform(rotate(45deg) translate(0.4rem, 0.5rem));
+          }
+
+          span:nth-child(2) {
+            opacity: 0;
+          }
+
+          span:nth-child(3) {
+            @include transform(rotate(-45deg) translate(0.4rem, -0.5rem));
+          }
+        }
+      }
+    }
+
+    .menu {
+      background: $header-background-color;
+      border-top: 2px solid $global-border-color;
+      display: none;
+      overflow-y: overlay;
+      max-height: 70vh;
+      @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));
+      }
+      
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+
+      .search-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        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 {
+        flex-grow: 10;
+
+        .algolia-autocomplete,
+        input {
+          width: 100%;
+        }
+      }
+
+      .search-loading,
+      .search-clear {
+        right:  0.5rem;
+      }
+
+      .search-button {
+        top: 0;
+      }
+
+      .search-cancel {
+        display: none;
+        margin-left: 0.75rem;
+      }
+
+      .menu-item {
+        display: block;
+        position: relative;
+        line-height: 2.5rem;
+        padding: 0 1rem;
+
+        &:not(.menu-system):hover {
+          background-color: lighten($global-font-secondary-color, 24%);
+
+          [data-theme='dark'] & {
+            background-color: darken($global-font-secondary-color-dark, 24%);
+          }
+        }
+
+        .menu-link {
+          display: block;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow-x: hidden;
+          @include flex(4);
+        }
+
+        & .nested-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .menu-link {
+            max-width: 80%;
+          }
+        }
+      }
+
+      .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;
+        }
+
+        .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%;
+          }
+        }
+      }
+
+      .sub-menu {
+        padding-left: 0;
+        display: none;
+
+        &.open {
+          display: block;
+        }
+
+        .menu-item:hover {
+          background-color: lighten($global-font-secondary-color, 20%);
+
+          [data-theme='dark'] & {
+            background-color: darken($global-font-secondary-color-dark, 20%);
+          }
+        }
+      }
+
+      &.active {
+        display: block;
+      }
+
+      [data-theme='dark'] & {
+        background: $header-background-color-dark;
+        border-top-color: $global-border-color-dark;
+      }
+    }
+  }
+
+  &.open {
+    .header-wrapper {
+      margin-top: -$header-height;
+    }
+
+    .menu {
+      padding-top: 0;
+      border-top: none;
+
+      .menu-item {
+        display: none;
+      }
+
+      .search-cancel {
+        display: inline;
+      }
+    }
+  }
+}
+
+.search-dropdown {
+  position: fixed;
+  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;
+  }
+
+  &.mobile {
+    right: 0;
+    width: 100%;
+  }
+
+  .dropdown-menu {
+    right: 0 !important;
+    background-color: $global-background-color;
+
+    [data-theme='dark'] & {
+      background-color: $global-background-color-dark;
+    }
+
+    .suggestions {
+      overflow-y: auto;
+      max-height: calc(100vh - #{$header-height});
+
+      .suggestion {
+        padding: 0.75rem 1rem;
+
+        .suggestion-title {
+          display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 1rem;
+          font-weight: bold;
+          max-width: 75%;
+        }
+
+        .suggestion-date {
+          font-size: 0.875rem;
+          float: right;
+          text-align: right;
+          color: $global-font-secondary-color;
+
+          [data-theme='dark'] & {
+            color: $global-font-secondary-color-dark;
+          }
+        }
+
+        .suggestion-context {
+          line-height: 1.25rem;
+          @include box(vertical);
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          @include overflow-wrap(break-word);
+          color: $global-font-secondary-color;
+
+          [data-theme='dark'] & {
+            color: $global-font-secondary-color-dark;
+          }
+        }
+
+        em {
+          font-style: normal;
+          background-color: $selection-color;
+
+          [data-theme='dark'] & {
+            background-color: $selection-color-dark;
+          }
+        }
+
+        &.cursor {
+          background: darken($code-background-color, 5%);
+
+          [data-theme='dark'] & {
+            background: lighten($code-background-color-dark, 5%);
+          }
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .search-empty {
+      padding: 1rem;
+      text-align: center;
+
+      .search-query {
+        font-weight: bold;
+
+        [data-theme='dark'] & {
+          color: #ddd;
+        }
+      }
+    }
+
+    .search-footer {
+      padding: 0.5rem 1rem;
+      float: right;
+      font-size: 0.8rem;
+      color: $global-font-secondary-color;
+
+      [data-theme='dark'] {
+        color: $global-font-secondary-color-dark;
+      }
+
+      @include link(false, false);
+
+      a {
+        font-size: 1rem;
+      }
+    }
+  }
+}

assets/css/_core/_layout.scss

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

assets/css/_core/_media.scss

@@ -1,12 +1,34 @@
+@media only screen and (min-width: 1441px) {
+  %page-style {
+    width: 60%;
+
+    [data-page-style='wide'] & {
+      width: 64%;
+    }
+
+    [data-page-style='narrow'] & {
+      max-width: 800px;
+    }
+  }
+}
+
 @media only screen and (max-width: 1440px) {
-  .page {
+  %page-style {
     width: 56%;
+
+    [data-page-style='wide'] & {
+      width: 60%;
+    }
   }
 }
 
 @media only screen and (max-width: 1200px) {
-  .page {
+  %page-style {
     width: 52%;
+
+    [data-page-style='wide'] & {
+      width: 56%;
+    }
   }
 
   #header-desktop .header-wrapper {
@@ -19,65 +41,121 @@
 }
 
 @media only screen and (max-width: 960px) {
-  #toc-auto {
-    display: none;
+  %page-style {
+    width: 80% !important;
+  }
+  
+  aside {
+    display: none !important;
   }
 
   #toc-static {
     display: block;
   }
 
-  .page {
-    width: 80%;
-  }
-
   #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;
   }
 
-  #header-mobile {
+  #header-mobile,
+  .d-none-desktop {
     display: block;
   }
 
-  body.blur {
-    overflow: hidden;
+  .d-none-mobile {
+    display: none !important;
+  }
+
+  .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));
+    }
+  }
+
+  [data-header-mobile='normal'] .page .content [id] {
+    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+  }
+  
+  %page-style {
+    width: 100% !important;
   }
 
   .page {
-    width: 100%;
-
-    [header-mobile] & {
-      padding-top: $header-height;
-    }
-
-    [header-mobile=normal] & {
-      padding-top: 0;
-    }
-
-    .content {
-      [id] {
-        [header-mobile=normal] & {
-          scroll-margin-top: 0;
-        }
-      }
-    }
-
-    .categories-card {
+    .categories-card,
+    .collections-card {
       .card-item {
         width: 100%;
       }
     }
   }
-  
-  footer{
+
+  footer {
     .footer-container {
-      font-size: .618rem;
+      font-size: 0.618rem;
     }
   }
+
+  .pagination .page-item {
+    margin: 0 5px;
+  }
+}
+
+@media only print {
+  @page {
+    size: A4 portrait;
+    margin: 1.27cm;
+  }
+
+  .page {
+    width: 100% !important;
+    padding-top: 0 !important;
+
+    &.single {
+      .single-title,
+      .single-subtitle,
+      .post-meta {
+        text-align: center;
+      }
+    }
+
+    h1:not(.single-title),
+    .page-break-before {
+      page-break-before: always;
+    }
+
+    .page-break-after {
+      page-break-after: always;
+    }
+  }
+
+  .print-d-none {
+    display: none !important;
+  }
 }

assets/css/_core/_pagination.scss

@@ -2,24 +2,29 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+  flex-wrap: wrap;
   list-style: none;
   white-space: nowrap;
   width: 100%;
-  padding: 1rem 0 0;
+  padding: 1rem 0;
 
   a {
-    font-size: .8rem;
-    color: #bfbfbf;
-    letter-spacing: .1rem;
+    font-size: 0.8rem;
+    color: $pagination-link-color;
+    letter-spacing: 0.1rem;
     font-weight: 700;
     padding: 5px 5px;
     text-decoration: none;
     @include transition(0.3s);
+
+    [data-theme='dark'] & {
+      color: $pagination-link-color-dark;
+    }
   }
 
   li {
-    padding-bottom: 3px;
-    margin: 0 20px;
+    padding: 5px;
+    margin: 0 10px;
     box-sizing: border-box;
     position: relative;
     display: inline;
@@ -32,14 +37,14 @@
       color: $pagination-link-hover-color;
     }
 
-    [theme=dark] &:hover a {
+    [data-theme='dark'] &:hover a {
       color: $pagination-link-hover-color-dark;
     }
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       position: absolute;
-      content: "";
+      content: '';
       width: 0;
       height: 3px;
       background: $pagination-link-hover-color;
@@ -47,28 +52,22 @@
       bottom: 0px;
     }
 
-    [theme=dark] &:before,
-    [theme=dark] &:after {
+    [data-theme='dark'] &::before,
+    [data-theme='dark'] &::after {
       background: $pagination-link-hover-color-dark;
     }
 
-    &:before .active,
-    &:after .active {
-      width: 100%;
-    }
-
-    &:before {
+    &::before {
       left: 50%;
     }
 
-    &:after {
+    &::after {
       right: 50%;
     }
 
     &:hover {
-
-      &:before,
-      &:after {
+      &::before,
+      &::after {
         width: 50%;
       }
     }
@@ -78,13 +77,13 @@
         color: $pagination-link-hover-color;
       }
 
-      [theme=dark] & a {
+      [data-theme='dark'] & a {
         color: $pagination-link-hover-color-dark;
       }
 
-      &:before,
-      &:after {
-        width: 60%;
+      &::before,
+      &::after {
+        width: 50%;
       }
     }
   }

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

@@ -0,0 +1,28 @@
+:root {
+  // Note: Custom variable values only support SassScript inside `#{}`.
+
+  // Theme colors varibles
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  // 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%)};
+}
+
+// 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

@@ -18,7 +18,6 @@
 
 @mixin transform($value) {
   -webkit-transform: $value;
-  -moz-transform: $value;
   -ms-transform: $value;
   -o-transform: $value;
   transform: $value;
@@ -26,8 +25,6 @@
 
 @mixin filter($value) {
   -webkit-filter: $value;
-  -moz-filter: $value;
-  -ms-filter: $value;
   filter: $value;
 }
 
@@ -47,19 +44,19 @@
 }
 
 @mixin placeholder($color) {
-  input::-webkit-input-placeholder{
+  input::-webkit-input-placeholder {
     color: $color;
   }
 
-  input:-moz-placeholder{
+  input:-moz-placeholder {
     color: $color;
   }
 
-  input::-moz-placeholder{
+  input::-moz-placeholder {
     color: $color;
   }
 
-  input:-ms-input-placeholder{
+  input:-ms-input-placeholder {
     color: $color;
   }
 
@@ -97,14 +94,14 @@
   line-break: $value;
 }
 
-@mixin ms {
-  input::-ms-clear {
-    display: none;
-  }
-}
-
 @mixin object-fit($value) {
   -o-object-fit: $value;
   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/_details.scss

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

assets/css/_mixin/_index.scss

@@ -1,4 +1,5 @@
-@import "_compatibility";
-@import "_link";
-@import "_blur";
-@import "_details";
+@import '_compatibility';
+@import '_link';
+@import '_blur';
+@import '_details';
+@import '_z-index';

assets/css/_mixin/_link.scss

@@ -1,20 +1,52 @@
-@mixin link($light, $dark) {
-  a, a::before, a::after {
-    text-decoration: none;
+/**
+ * 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: $decoration;
 
-    color: if($light, $global-link-color, $single-link-color);
+    @if $light {
+      color: $global-link-color;
+    }
 
-    [theme=dark] & {
-      color: if($dark, $global-link-color-dark, $single-link-color-dark);
+    @else {
+      color: $single-link-color;
+    }
+
+    [data-theme='dark'] & {
+      @if $dark {
+        color: $global-link-color-dark;
+      }
+
+      @else {
+        color: $single-link-color-dark;
+      }
     }
   }
 
   a:active,
   a:hover {
-    color: if($light, $global-link-hover-color, $single-link-hover-color);
+    @if $light {
+      color: $global-link-hover-color;
+    }
 
-    [theme=dark] & {
-      color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
+    @else {
+      color: $single-link-hover-color;
+    }
+
+    [data-theme='dark'] & {
+      @if $dark {
+        color: $global-link-hover-color-dark;
+      }
+
+      @else {
+        color: $single-link-hover-color-dark;
+      }
     }
   }
 }

assets/css/_mixin/_z-index.scss

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

assets/css/_page/_archive.scss

@@ -1,13 +1,27 @@
 .archive {
   .single-title {
+    padding: 1rem 0 0.5rem;
+    margin: 0;
+    font-size: 1.6rem;
+    font-weight: bold;
+    line-height: 140%;
+    text-align: right;
+  }
+
+  .single-subtitle {
+    margin: 0.5rem 0;
+    font-size: 1.2rem;
+    font-weight: normal;
+    line-height: 100%;
     text-align: right;
   }
 
   .group-title {
+    font-size: 1.2rem;
     margin-top: 1.5rem;
     margin-bottom: 1rem;
   }
 
-  @import "../_partial/_archive/terms";
-  @import "../_partial/_archive/tags";
+  @import '../_partials/_archive/terms';
+  @import '../_partials/_archive/tags';
 }

assets/css/_page/_friends.scss

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

assets/css/_page/_home.scss

@@ -1,11 +1,9 @@
 .home {
   .home-profile {
-    @include transform(translateY( 16vh));
-    padding: 0 0 .5rem;
     text-align: center;
 
     .home-avatar {
-      padding: .5rem;
+      padding: 0.5rem;
 
       img {
         display: inline-block;
@@ -13,12 +11,16 @@
         height: auto;
         margin: 0 auto;
         @include border-radius(100%);
-        @include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
+        @include box-shadow(0 0 0 0.3618em rgba(0, 0, 0, 0.05));
         @include transition(all 0.4s ease);
 
+        [data-theme='dark'] & {
+          @include box-shadow(0 0 0 0.3618em rgba(255, 255, 255, 0.05));
+        }
+
         &:hover {
           position: relative;
-          @include transform(translateY(-.75rem));
+          @include transform(translateY(-0.75rem));
         }
       }
     }
@@ -27,18 +29,21 @@
       font-size: 1.25rem;
       font-weight: bold;
       margin: 0;
-      padding: .5rem;
+
+      &:not(:empty) {
+        padding: 0.5rem;
+      }
     }
 
     .home-subtitle {
       font-size: 1rem;
       font-weight: normal;
       margin: 0;
-      padding: .5rem;
+      padding: 0.5rem;
     }
 
     .links {
-      padding: .5rem;
+      padding: 0.5rem;
       font-size: 1.5rem;
 
       a * {
@@ -47,7 +52,7 @@
 
       img {
         height: 1.5rem;
-        padding: 0 .25rem;
+        padding: 0 0.25rem;
       }
     }
 
@@ -56,20 +61,19 @@
       line-height: 1.5rem;
       font-weight: normal;
       margin: 0;
-      padding: .5rem;
+      padding: 0.5rem;
       color: $global-font-secondary-color;
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         color: $global-font-secondary-color-dark;
       }
     }
   }
 }
 
-.home[posts] {
+.home.posts {
   .home-profile {
-    @include transform(translateY(0));
-    padding-top: 2rem;
+    padding: 2rem 0;
   }
 
   .home-avatar img {
@@ -78,18 +82,23 @@
 
   .summary {
     padding-top: 1rem;
-    padding-bottom: .8rem;
+    padding-bottom: 0.8rem;
     color: $global-font-color;
     border-bottom: 1px dashed $global-border-color;
 
-    [theme=dark] & {
+    &:first-of-type {
+      padding-top: 0;
+    }
+
+    [data-theme='dark'] & {
       color: $global-font-color-dark;
       border-bottom: 1px dashed $global-border-color-dark;
     }
 
     .featured-image-preview {
       width: 100%;
-      padding: 30% 0 0;
+      // use the same proportions as the cover image of https://dev.to/
+      aspect-ratio: auto 1000 / 420;
       position: relative;
       margin: 0.6rem auto;
       @include transition(transform 0.4s ease);
@@ -100,10 +109,6 @@
         height: 100%;
         left: 0;
         top: 0;
-        @include object-fit(none);
-      }
-
-      img.lazyloaded {
         @include object-fit(cover);
       }
 
@@ -121,14 +126,14 @@
     .content {
       @include box(vertical);
       -webkit-line-clamp: 3;
-      margin-top: .3rem;
+      margin-top: 0.3rem;
       width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       @include overflow-wrap(break-word);
       color: $global-font-secondary-color;
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         color: $global-font-secondary-color-dark;
       }
 
@@ -143,7 +148,7 @@
         display: inline;
 
         &::after {
-          content: "\A";
+          content: '\A';
           white-space: pre;
         }
       }
@@ -154,21 +159,22 @@
 
       @include link(false, true);
 
-      b, strong {
+      b,
+      strong {
         color: $global-font-secondary-color;
 
-        [theme=dark] & {
+        [data-theme='dark'] & {
           color: $global-font-secondary-color-dark;
         }
       }
     }
 
     .post-footer {
-      margin-top: .4rem;
+      margin-top: 0.4rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      font-size: .875rem;
+      font-size: 0.875rem;
 
       @include link(false, false);
 
@@ -176,6 +182,11 @@
         padding: 0;
 
         @include link(true, true);
+        
+        .post-tag:not(:last-child)::after {
+          content: ',';
+          margin-right: 0.25rem;
+        }
       }
     }
   }

assets/css/_page/_index.scss

@@ -1,34 +1,20 @@
 .page {
   position: relative;
-  max-width: 800px;
-  width: 60%;
-  margin: 0 auto;
+  @extend %page-style;
 
-  [header-desktop] & {
-    padding-top: $header-height;
-  }
-
-  [header-desktop=normal] & {
-    padding-top: 0;
-  }
-  
   .content {
     [id] {
-      scroll-margin-top: $header-height;
-      
-      [header-desktop=normal] & {
-        scroll-margin-top: 0;
-      }
+      scroll-margin-top: var(--#{$prefix}scroll-mt);
     }
   }
 
   @include blur;
 }
 
-@import "_single";
-@import "_special";
-@import "_archive";
-@import "_home";
-@import "_404";
-@import "_offline";
-@import "_friends";
+@import '_single';
+@import '_special';
+@import '_archive';
+@import '_home';
+@import '_404';
+@import '_offline';
+@import '_friends';

assets/css/_page/_offline.scss

@@ -1,7 +1,7 @@
 #content-offline {
   @include transform(translateY(30vh));
   text-align: center;
-  
+
   .offline-title {
     font-size: 3.6rem;
   }
@@ -16,4 +16,4 @@
   .error-text {
     font-size: 1.2rem;
   }
-}
+}

assets/css/_page/_single.scss

@@ -1,30 +1,52 @@
-@import "../_partial/_single/toc";
+@import '../_partials/_single/toc';
+@import '../_partials/_single/fixit-decryptor';
+@import '../_partials/_single/collections';
 
 .single {
   .single-title {
-    margin: 1rem 0 .5rem;
+    padding: 1rem 0 0.5rem;
+    margin: 0;
     font-size: 1.6rem;
     font-weight: bold;
     line-height: 140%;
+
+    .icon-pin {
+      display: inline-block;
+      width: max-content;
+      transform: rotate(30deg);
+      margin-right: 0.25em;
+      color: var(--#{$prefix}danger);
+    }
+
+    .icon-repost {
+      display: inline-block;
+      width: max-content;
+      margin-right: 0.25em;
+      color: var(--#{$prefix}success);
+    }
   }
 
   .single-subtitle {
-    margin: .4rem 0;
+    margin: 0.5rem 0;
     font-size: 1.2rem;
     font-weight: normal;
-    font-style: italic;
     line-height: 100%;
   }
 
   .post-meta {
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $global-font-secondary-color;
 
+    .comment-visitors,
+    .comment-count {
+      @extend .print-d-none;
+    }
+
     span {
       display: inline-block;
     }
 
-    [theme=dark] & {
+    [data-theme='dark'] & {
       color: $global-font-secondary-color-dark;
     }
 
@@ -32,99 +54,151 @@
 
     .author {
       font-size: 1.05rem;
+
+      img.avatar {
+        width: 1.3rem;
+        height: 1.3rem;
+        border-radius: 50%;
+        vertical-align: text-bottom;
+        border: 0.25px solid $global-border-color;
+        box-sizing: border-box;
+        object-position: center;
+        @include object-fit(cover);
+
+        [data-theme='dark'] & {
+          border-color: $global-border-color-dark;
+        }
+      }
     }
   }
 
   .featured-image {
-    margin: .5rem 0 1rem 0;
+    margin: 0.5rem 0 1rem 0;
 
     img {
       display: block;
+      width: 100%;
       max-width: 100%;
       height: auto;
       margin: 0 auto;
       overflow: hidden;
     }
+  }
 
-    img.lazyloaded {
-      width: 100%;
+  #content[data-end-flag]:not([data-password])::after {
+    content: attr(data-end-flag);
+    display: block;
+    text-align: center;
+    color: $global-font-secondary-color;
+    font-size: 15px;
+    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;
-      }
+    > h1,
+    > h2 {
+      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;
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         font-weight: bolder;
       }
-    }
 
-    > h2,
-    > h3,
-    > h4,
-    > h5,
-    > h6 {
-      > .header-mark::before {
-        content: "|";
-        margin-right: .3125rem;
-        color: $single-link-color;
+      code {
+        padding: 0 .2em;
+        font-size: inherit;
+      }
 
-        [theme=dark] & {
-          color: $single-link-color-dark;
+      &:hover {
+        > .heading-mark {
+          opacity: 1;
+        }
+      }
+
+      > .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;
         }
       }
     }
 
-    > h2 > .header-mark::before {
-      content: "#";
-    }
-
     p {
-      margin: .5rem 0;
+      margin: 0.5rem 0;
     }
 
-    b, strong {
+    b,
+    strong {
       font-weight: bold;
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         color: #ddd;
       }
     }
@@ -132,26 +206,39 @@
     @include link(false, false);
 
     a {
+      white-space: normal;
       @include overflow-wrap(break-word);
 
-      [theme=dark] & b, [theme=dark] & strong {
+      [data-theme='dark'] & b,
+      [data-theme='dark'] & strong {
         color: $single-link-color-dark;
       }
     }
 
-    [theme=dark] a:hover b, [theme=dark] a:hover strong {
+    [data-theme='dark'] a:hover b,
+    [data-theme='dark'] a:hover strong {
       color: $single-link-hover-color-dark;
     }
 
-    ul, ol {
-      margin: .5rem 0;
-      padding-left: 2.5rem;
+    ul,
+    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;
 
@@ -159,7 +246,7 @@
         color: $global-font-secondary-color;
       }
 
-      [theme=dark] & {
+      [data-theme='dark'] & {
         background: $code-background-color-dark;
 
         rt {
@@ -174,7 +261,7 @@
       &::-webkit-scrollbar {
         background-color: $table-background-color;
 
-        [theme=dark] & {
+        [data-theme='dark'] & {
           background-color: $table-background-color-dark;
         }
       }
@@ -182,28 +269,47 @@
       > table {
         width: 100%;
         max-width: 100%;
-        margin: .625rem 0;
+        margin: 0.625rem 0;
         border-spacing: 0;
         background: $table-background-color;
         border-collapse: collapse;
 
-        [theme=dark] & {
+        [data-theme='dark'] & {
           background: $table-background-color-dark;
         }
 
         thead {
           background: $table-thead-color;
 
-          [theme=dark] & {
+          [data-theme='dark'] & {
             background-color: $table-thead-color-dark;
           }
         }
 
-        th, td {
-          padding: .3rem 1rem;
+        &:not([class]) tbody {
+          & tr:nth-child(odd) {
+            background: darken($table-background-color, 2.25%);
+
+            [data-theme='dark'] & {
+              background-color: lighten($table-background-color-dark, 2.75%);
+            }
+          }
+
+          & tr:hover {
+            background: darken($table-background-color, 4.5%);
+
+            [data-theme='dark'] & {
+              background-color: lighten($table-background-color-dark, 5.5%);
+            }
+          }
+        }
+
+        th,
+        td {
+          padding: 0.3rem 1rem;
           border: 1px solid darken($table-thead-color, 2%);
 
-          [theme=dark] & {
+          [data-theme='dark'] & {
             border-color: darken($table-thead-color-dark, 2%);
           }
         }
@@ -213,118 +319,165 @@
     img {
       max-width: 100%;
       min-height: 1em;
+
+      &: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%;
     }
 
     figure {
-      margin: .5rem;
+      margin: 0.5rem;
       text-align: center;
 
       .image-caption:not(:empty) {
         min-width: 20%;
         max-width: 80%;
         display: inline-block;
-        padding: .5rem;
+        padding: 0.5rem;
         margin: 0 auto;
-        font-size: .875rem;
+        font-size: 0.875rem;
         color: #969696;
       }
 
       img {
         display: block;
-        height: auto;
         margin: 0 auto;
         overflow: hidden;
       }
     }
 
-    .lazyloading {
-      @include object-fit(none);
-    }
-
     blockquote {
       display: block;
-      border-left: .5rem solid $blockquote-color;
-      background-color: rgba($blockquote-color, .2);
-      padding: .25rem .75rem;
+      border-left: 0.25em solid $global-border-color;
+      color: $blockquote-color;
+      padding: 0 1em;
       margin: 1rem 0;
 
-      [theme=dark] & {
-        border-left-color: $blockquote-color-dark;
-        background-color: rgba($blockquote-color-dark, .2);
+      ul,
+      ol {
+        padding-left: 1.5em;
       }
+
+      dl dd {
+        margin-inline-start: 0.25em;
+      }
+
+      [data-theme='dark'] & {
+        color: $blockquote-color-dark;
+        border-left-color: $global-border-color-dark;
+      }
+
+      @include link(false, true);
+    }
+
+    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'] & {
+        background-color: rgba(56, 139, 253, 0.1);
+        color: #58a6ff;
+      }
+
+      @include link(true, false);
     }
 
     .footnotes {
-      color: $global-font-secondary-color;
+      font-size: 0.75rem;
+      white-space: normal;
+      color: darken($global-font-secondary-color, 5%);
 
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
+      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 {
-        margin: .25rem 0;
+        margin: 0.25rem 0;
       }
     }
 
-    @import "../_partial/_single/code";
-    @import "../_partial/_single/instagram";
-    @import "../_partial/_single/admonition";
-    @import "../_partial/_single/echarts";
-    @import "../_partial/_single/mapbox";
-    @import "../_partial/_single/music";
-    @import "../_partial/_single/bilibili";
-    @import "../_partial/_single/cardlink";
-
     hr {
-      margin: 1rem 0;
-      position: relative;
-      border-top: 1px dashed $global-border-color;
-      border-bottom: none;
+      margin-block: 0;
+    }
 
-      [theme=dark] & {
-        border-top: 1px dashed $global-border-color-dark;
+    .footnotes {
+      hr {
+        background-color: var(--#{$prefix}hr-background-color);
+        height: 1px;
+        margin-block: 1em;
       }
     }
 
     kbd {
       display: inline-block;
-      padding: .25rem;
+      padding: 0 0.25rem;
       background-color: $global-background-color;
       border: 1px solid $global-border-color;
-      border-bottom-color: $global-border-color;
-      @include border-radius(3px);
-      @include box-shadow(inset 0 -1px 0 $global-border-color);
-      font-size: .8rem;
+      font-size: 0.8rem;
       font-family: $code-font-family;
       color: $code-color;
+      @include border-radius($global-border-radius);
+      @include box-shadow(inset 0 -1px 0 $global-border-color);
 
-      [theme=dark] & {
+      [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);
       }
     }
 
-    .typeit {
-      .code {
-        padding: .375rem;
-        font-size: .875rem;
-        font-family: $code-font-family;
-        font-weight: bold;
-        word-break: break-all;
-      }
-    }
-
-    .version {
-      height: 1.25em;
-      vertical-align: text-bottom;
-    }
+    @import '../_partials/_single/code';
+    @import '../_shortcodes';
   }
 
-  @import "../_partial/_single/footer";
-  @import "../_partial/_single/comment";
+  @import '../_partials/_single/reward';
+  @import '../_partials/_single/footer';
+  @import '../_partials/_single/comment';
 }
 
 .lg-toolbar .lg-icon::after {

assets/css/_page/_special.scss

@@ -1,5 +1,6 @@
 .special {
-  .single-title, .single-subtitle {
+  .single-title,
+  .single-subtitle {
     text-align: right;
   }
 }

assets/css/_partial/_archive/_tags.scss

@@ -1,27 +0,0 @@
-.tag-cloud-tags {
-  margin: 10px 0;
-
-  @include link(true, true);
-
-  a {
-    display: inline-block;
-    position: relative;
-    margin: 5px 10px;
-    @include overflow-wrap(break-word);
-    @include transition(all ease-out 0.3s);
-
-    &:active,
-    &:focus,
-    &:hover {
-      @include transform(scale(1.2));
-    }
-
-    sup {
-      color: $global-font-secondary-color;
-
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-  }
-}

assets/css/_partial/_header.scss

@@ -1,470 +0,0 @@
-header {
-  width: 100%;
-  z-index: 150;
-  background-color: $header-background-color;
-  @include transition(box-shadow 0.3s ease);
-
-  [theme=dark] & {
-    background-color: $header-background-color-dark;
-  }
-
-  &:hover {
-    @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, .1));
-  }
-}
-
-.header-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-}
-
-.header-title {
-  font-family: $header-title-font-family;
-  font-weight: bold;
-  margin-right: .5rem;
-  min-width: 10%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  @include flex(10);
-
-  .logo {
-    min-height: 1.5em;
-    height: 1.5em;
-    vertical-align: text-bottom;
-  }
-  
-  .header-title-text {
-    margin-left: .25rem;
-    margin-right: .25rem;
-  }
-
-  .header-subtitle {
-    margin-left: .25rem;
-    font-size: .6em;
-  }
-}
-
-.menu .menu-item {
-  position: relative;
-}
-
-.language-select {
-  position: absolute;
-  opacity: 0;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.search {
-  position: relative;
-
-  input {
-    color: transparent;
-    box-sizing: border-box;
-    height: 2.5rem;
-    width: 2.5rem;
-    @include border-radius(.5rem);
-    border: none;
-    outline: none;
-    background-color: $header-background-color;
-    vertical-align: baseline !important;
-    @include transition(width 0.3s ease);
-
-    [theme=dark] & {
-      background-color: $header-background-color-dark;
-    }
-  }
-
-  @include placeholder(transparent);
-
-  .search-button {
-    margin: 0;
-    position: absolute;
-    left: auto;
-    right: 1rem;
-  }
-
-  .search-toggle {
-    left: .5rem;
-    right: auto;
-  }
-
-  .search-loading {
-    display: none;
-  }
-
-  .search-clear {
-    display: none;
-  }
-
-  .open &, &.mobile {
-    input {
-      color: $global-font-color;
-      background-color: $search-background-color;
-      padding: 0 2rem 0 2rem;
-    }
-
-    [theme=dark] & {
-      input {
-        color: $global-font-color-dark;
-        background-color: $search-background-color-dark;
-      }
-
-      @include placeholder($global-font-secondary-color-dark);
-    }
-
-    @include placeholder($global-font-secondary-color);
-
-    .search-button {
-      color: $global-font-secondary-color;
-
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-
-    .search-clear:hover {
-      color: #ff6b6b;
-    }
-
-    .search-toggle:hover {
-      cursor: default;
-    }
-  }
-}
-
-.theme-switch i {
-  @include transform(rotate(225deg));
-}
-
-#header-desktop {
-  display: block;
-  position: fixed;
-  height: $header-height;
-  line-height: $header-height;
-
-  [header-desktop=normal] & {
-    position: static;
-  }
-
-  .header-wrapper {
-    padding: 0 2rem 0 10vh;
-
-    .header-title {
-      font-size: $header-title-font-size;
-    }
-
-    .menu {
-      overflow: hidden;
-      white-space: nowrap;
-
-      .menu-inner {
-        float: right;
-      }
-
-      .menu-item {
-        margin: 0 .5rem;
-
-        &.delimiter {
-          border-left: 1.5px solid $global-font-color;
-
-          [theme=dark] & {
-            border-left-color: $global-border-color-dark;
-          }
-        }
-
-        &.language {
-          margin-right: 0;
-        }
-
-        &.search {
-          margin: 0 -.5rem 0 0;
-        }
-      }
-
-      a.active {
-        font-weight: 900;
-        color: $header-hover-color;
-
-        [theme=dark] & {
-          color: $header-hover-color-dark;
-        }
-      }
-    }
-  }
-
-  &.open .header-wrapper .menu .menu-item.search {
-    margin: 0 .25rem 0 .5rem;
-
-    input {
-      width: 24rem;
-    }
-  }
-}
-
-#header-mobile {
-  display: none;
-  position: fixed;
-  height: $header-height;
-  line-height: $header-height;
-
-  [header-mobile=normal] & {
-    position: static;
-  }
-
-  .header-container {
-    padding: 0;
-    margin: 0;
-
-    .header-wrapper {
-      padding: 0 1rem;
-      font-size: 1.125rem;
-      @include transition(margin-top 0.3s ease);
-
-      .header-title {
-        font-size: $header-title-font-size;
-        max-width: 80%;
-      }
-
-      .menu-toggle {
-        line-height: 4rem;
-        cursor: pointer;
-        @include transition(width 0.3s ease);
-
-        span {
-          display: block;
-          background: $global-font-color;
-          width: 1.5rem;
-          height: 2px;
-          @include border-radius(3px);
-          @include transition(all 0.3s ease-in-out);
-
-          [theme=dark] & {
-            background: $global-font-color-dark;
-          }
-        }
-
-        span:nth-child(1) {
-          margin-bottom: .5rem;
-        }
-
-        span:nth-child(3) {
-          margin-top: .5rem;
-        }
-
-        &.active {
-          span:nth-child(1) {
-            @include transform(rotate(45deg) translate(.4rem, .5rem));
-          }
-
-          span:nth-child(2) {
-            opacity: 0
-          }
-
-          span:nth-child(3) {
-            @include transform(rotate(-45deg) translate(.4rem, -.5rem));
-          }
-        }
-      }
-    }
-
-    .menu {
-      text-align: center;
-      background: $header-background-color;
-      border-top: 2px solid $global-border-color;
-      display: none;
-      padding-top: .5rem;
-      @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
-
-      .search-wrapper {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        box-sizing: border-box;
-        padding: ($header-height - 2.5rem) / 2 1rem;
-        line-height: 2.5rem;
-      }
-
-      .search {
-        flex-grow: 10;
-
-        .algolia-autocomplete, input {
-          width: 100%;
-        }
-      }
-
-      .search-button {
-        top: 0;
-      }
-
-      .search-cancel {
-        display: none;
-        margin-left: .75rem;
-      }
-
-      .menu-item {
-        display: block;
-        line-height: 2.5rem;
-      }
-
-      &.active {
-        display: block;
-      }
-
-      [theme=dark] & {
-        background: $header-background-color-dark;
-        border-top-color: $global-border-color-dark;
-      }
-    }
-  }
-
-  &.open {
-    .header-wrapper {
-      margin-top: -$header-height;
-    }
-
-    .menu {
-      padding-top: 0;
-      border-top: none;
-
-      .menu-item {
-        display: none;
-      }
-
-      .search-cancel {
-        display: inline;
-      }
-    }
-  }
-}
-
-.search-dropdown {
-  position: fixed;
-  z-index: 200;
-  top: $header-height;
-  @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
-
-  &.desktop {
-    right: 2rem;
-    width: 30rem;
-  }
-
-  &.mobile {
-    right: 0;
-    width: 100%;
-  }
-
-  .dropdown-menu {
-    right: 0 !important;
-    background-color: $global-background-color;
-
-    [theme=dark] & {
-      background-color: $global-background-color-dark;
-    }
-
-    .suggestions {
-      overflow-y: auto;
-      max-height: calc(100vh - #{$header-height});
-
-      .suggestion {
-        padding: .75rem 1rem;
-
-        .suggestion-title {
-          display: inline-block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          font-size: 1rem;
-          font-weight: bold;
-          max-width: 75%;
-        }
-
-        .suggestion-date {
-          font-size: .875rem;
-          float: right;
-          text-align: right;
-          color: $global-font-secondary-color;
-
-          [theme=dark] & {
-            color: $global-font-secondary-color-dark;
-          }
-        }
-
-        .suggestion-context {
-          line-height: 1.25rem;
-          @include box(vertical);
-          -webkit-line-clamp: 2;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          @include overflow-wrap(break-word);
-          color: $global-font-secondary-color;
-
-          [theme=dark] & {
-            color: $global-font-secondary-color-dark;
-          }
-        }
-
-        em {
-          font-style: normal;
-          background-color: $selection-color;
-
-          [theme=dark] & {
-            background-color: $selection-color-dark;
-          }
-        }
-
-        &.cursor {
-          background: darken($code-background-color, 5%);
-
-          [theme=dark] & {
-            background: lighten($code-background-color-dark, 5%);
-          }
-        }
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
-
-    .search-empty {
-      padding: 1rem;
-      text-align: center;
-
-      .search-query {
-        font-weight: bold;
-
-        [theme=dark] & {
-          color: #ddd;
-        }
-      }
-    }
-
-    .search-footer {
-      padding: .5rem 1rem;
-      float: right;
-      font-size: .8rem;
-      color: $global-font-secondary-color;
-
-      [theme=dark] {
-        color: $global-font-secondary-color-dark;
-      }
-
-      @include link(false, false);
-
-      a {
-        font-size: 1rem;
-      }
-    }
-  }
-}

assets/css/_partial/_icon.scss

@@ -1,17 +0,0 @@
-svg.icon {
-  display: inline-block;
-  width: 1.25em;
-  height: 1em;
-  text-align: center;
-
-  path {
-    fill: currentColor;
-  }
-}
-
-img.emoji {
-  height: 1em;
-  width: 1em;
-  margin: 0 .05em 0 .1em;
-  vertical-align: -.1em;
-}

assets/css/_partial/_single/_admonition.scss

@@ -1,67 +0,0 @@
-.admonition {
-  position: relative;
-  margin: 1rem 0;
-  padding: 0 .75rem;
-  background-color: map-get($admonition-background-color-map, 'note');
-  border-left: .25rem solid map-get($admonition-color-map, 'note');
-  overflow: auto;
-
-  .admonition-title {
-    font-weight: bold;
-    margin: 0 -0.75rem;
-    padding: .25rem 1.8rem;
-    border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
-    background-color: opacify(map-get($admonition-background-color-map, 'note'), 0.15);
-  }
-
-  &.open .admonition-title {
-    background-color: map-get($admonition-background-color-map, 'note');
-  }
-
-  .admonition-content {
-    padding: .5rem 0;
-  }
-
-  i.icon {
-    font-size: 0.85rem;
-    color: map-get($admonition-color-map, 'note');
-    position: absolute;
-    top: .6rem;
-    left: .4rem;
-  }
-
-  i.details-icon {
-    position: absolute;
-    top: .6rem;
-    right: .3rem;
-  }
-
-  @each $type, $color in $admonition-color-map {
-    &.#{$type} {
-      border-left-color: $color;
-
-      i.icon {
-        color: $color;
-      }
-    }
-  }
-
-  @each $type, $color in $admonition-background-color-map {
-    &.#{$type} {
-      background-color: $color;
-
-      .admonition-title {
-        border-bottom-color: $color;
-        background-color: opacify($color, 0.15);
-      }
-
-      &.open .admonition-title {
-        background-color: $color;
-      }
-    }
-  }
-
-  &:last-child {
-    margin-bottom: .75rem;
-  }
-}

assets/css/_partial/_single/_code.scss

@@ -1,386 +0,0 @@
-code {
-  display:inline-block;
-  max-width: 100%;
-  padding: 0 .4rem;
-  @include overflow-wrap(break-word);
-  @include line-break(anywhere);
-  font-size: $code-font-size;
-  font-family: $code-font-family;
-  color: $code-color;
-
-  [theme=dark] & {
-    color: $code-color-dark;
-  }
-}
-
-pre {
-  margin: 0;
-  padding: .25rem 0 .25rem .5rem;
-  overflow: auto;
-  @include tab-size(4);
-
-  code {
-    padding: 0;
-  }
-
-  img {
-    min-height: 1em;
-    max-height: 1.2em;
-    vertical-align: text-bottom;
-  }
-}
-
-code, pre, .highlight table, .highlight tr, .highlight td {
-  background: $code-background-color;
-
-  [theme=dark] & {
-    background: $code-background-color-dark;
-  }
-}
-
-.highlight, .gist {
-  font-family: $code-font-family;
-  font-size: $code-font-size;
-
-  .table-wrapper {
-    > table,
-    > table thead,
-    > table tr,
-    > table td {
-      margin: 0;
-      padding: 0;
-      border: none !important;
-      white-space: nowrap;
-    }
-  }
-}
-
-.highlight {
-  line-height: 1.4em;
-  margin: .5rem 0;
-
-  > .chroma {
-    position: relative;
-
-    .code-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      box-sizing: border-box;
-      width: 100%;
-      font-family: $global-font-family;
-      font-weight: bold;
-      color: $code-info-color;
-      background: darken($code-background-color, 8%);
-
-      [theme=dark] & {
-        color: $code-info-color-dark;
-        background: darken($code-background-color-dark, 6%);
-      }
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      .code-title {
-        width: 100%;
-        padding: .4rem;
-      }
-
-      .code-title::after {
-        padding-left: .2rem;
-        content: 'Code';
-      }
-
-      @each $type, $text in $code-type-map {
-        &.#{$type} .code-title::after {
-          content: $text;
-        }
-      }
-    }
-
-    .lntd:first-child {
-      min-width: 1.6rem;
-      text-align: right;
-    }
-
-    .lntd:last-child {
-      width: 100%;
-
-      pre {
-        @include max-content(min-width);
-      }
-    }
-
-    .ln {
-      padding-right: .75rem;
-    }
-
-    .hl {
-      display: block;
-      background-color: darken($code-background-color, 10%);
-
-      [theme=dark] & {
-        background-color: darken($code-background-color-dark, 5%);
-      }
-    }
-
-    .ln, .lnt {
-      color: $global-font-secondary-color;
-
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-
-    .arrow {
-      padding: 0 .2rem;
-      @include transition(transform 0.2s ease);
-    }
-
-    .ellipses {
-      padding: .4rem;
-    }
-
-    .copy {
-      display: none;
-      padding: .4rem;
-
-      &:hover {
-        cursor: pointer;
-        color: $global-link-hover-color;
-
-        [theme=dark] & {
-          color: $global-link-hover-color-dark;
-        }
-      }
-    }
-
-    .table-wrapper {
-      max-height: 0;
-      overflow-y: hidden;
-      @include details-transition-open;
-    }
-
-    &.open {
-      .code-header {
-        background: darken($code-background-color, 3%);
-
-        [theme=dark] & {
-          background: darken($code-background-color-dark, 3%);
-        }
-      }
-
-      .table-wrapper {
-        max-height: $MAX_LENGTH;
-        @include details-transition-close;
-      }
-
-      .arrow {
-        @include transform(rotate(90deg));
-      }
-
-      .ellipses {
-        display: none;
-      }
-
-      .copy {
-        display: inline;
-      }
-    }
-  }
-
-  /* Comment */  .c,
-  /* CommentHashbang */  .ch,
-  /* CommentMultiline */  .cm,
-  /* CommentSingle */  .c1,
-  /* CommentSpecial */  .cs,
-  /* CommentPreproc */  .cp,
-  /* CommentPreprocFile */  .cpf { font-style: italic }
-  /* GenericUnderline */  .gl { text-decoration: underline }
-
-  @each $class, $color in $code-highlight-color-map {
-    .#{$class} { color: $color; }
-  }
-
-  [theme=dark] & {
-    @each $class, $color in $code-highlight-color-map-dark {
-      .#{$class} { color: $color; }
-    }
-  }
-}
-
-.gist {
-  .gist-file, .gist-data, .gist-meta {
-    border: none;
-  }
-
-  .gist-meta {
-    padding: .4rem .8rem;
-    background-color: darken($code-background-color, 5%);
-
-    @include link(false, false);
-
-    [theme=dark] & {
-      background-color: darken($code-background-color-dark, 5%);
-    }
-  }
-
-  [theme=dark] & {
-    // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
-    .highlight {
-      background: #141414;
-    }
-    .blob-num,
-    .blob-code-inner,
-    .highlight,
-    .pl-enm,
-    .pl-ko,
-    .pl-mo,
-    .pl-mp1 .pl-sf,
-    .pl-ms,
-    .pl-pdc1,
-    .pl-scp,
-    .pl-smc,
-    .pl-som,
-    .pl-va,
-    .pl-vpf,
-    .pl-vpu,
-    .pl-mdr {
-        color: #aab1bf;
-    }
-    .pl-mb,
-    .pl-pdb {
-        font-weight: 700;
-    }
-    .pl-c,
-    .pl-c span,
-    .pl-pdc {
-        color: #5b6270;
-        font-style: italic;
-    }
-    .pl-sr .pl-cce {
-        color: #56b5c2;
-        font-weight: 400;
-    }
-    .pl-ef,
-    .pl-en,
-    .pl-enf,
-    .pl-eoai,
-    .pl-kos,
-    .pl-mh .pl-pdh,
-    .pl-mr {
-        color: #61afef;
-    }
-    .pl-ens,
-    .pl-vi {
-        color: #be5046;
-    }
-    .pl-enti,
-    .pl-mai .pl-sf,
-    .pl-ml,
-    .pl-sf,
-    .pl-sr,
-    .pl-sr .pl-sra,
-    .pl-src,
-    .pl-st,
-    .pl-vo {
-        color: #56b5c2;
-    }
-    .pl-eoi,
-    .pl-mri,
-    .pl-pds,
-    .pl-pse .pl-s1,
-    .pl-s,
-    .pl-s1 {
-        color: #97c279;
-    }
-    .pl-k,
-    .pl-kolp,
-    .pl-mc,
-    .pl-pde {
-        color: #c578dd;
-    }
-    .pl-mi,
-    .pl-pdi {
-        color: #c578dd;
-        font-style: italic;
-    }
-    .pl-mp,
-    .pl-stp {
-        color: #818896;
-    }
-    .pl-mdh,
-    .pl-mdi,
-    .pl-mdr {
-        font-weight: 400;
-    }
-    .pl-mdht,
-    .pl-mi1 {
-        color: #97c279;
-        background: #020;
-    }
-    .pl-md,
-    .pl-mdhf {
-        color: #df6b75;
-        background: #200;
-    }
-    .pl-corl {
-        color: #df6b75;
-        text-decoration: underline;
-    }
-    .pl-ib {
-        background: #df6b75;
-    }
-    .pl-ii {
-        background: #e0c184;
-        color: #fff;
-    }
-    .pl-iu {
-        background: #e05151;
-    }
-    .pl-ms1 {
-        color: #aab1bf;
-        background: #373b41;
-    }
-    .pl-c1,
-    .pl-cn,
-    .pl-e,
-    .pl-eoa,
-    .pl-eoac,
-    .pl-eoac .pl-pde,
-    .pl-kou,
-    .pl-mm,
-    .pl-mp .pl-s3,
-    .pl-mq,
-    .pl-s3,
-    .pl-sok,
-    .pl-sv,
-    .pl-mb {
-        color: #d19965;
-    }
-    .pl-enc,
-    .pl-entc,
-    .pl-pse .pl-s2,
-    .pl-s2,
-    .pl-sc,
-    .pl-smp,
-    .pl-sr .pl-sre,
-    .pl-stj,
-    .pl-v,
-    .pl-pdb {
-        color: #e4bf7a;
-    }
-    .pl-ent,
-    .pl-entl,
-    .pl-entm,
-    .pl-mh,
-    .pl-pdv,
-    .pl-smi,
-    .pl-sol,
-    .pl-mdh,
-    .pl-mdi {
-        color: #df6b75;
-    }
-  }
-}

assets/css/_partial/_single/_comment.scss

@@ -1,3 +0,0 @@
-#comments {
-  padding: 8rem 0 2rem;
-}

assets/css/_partial/_single/_mapbox.scss

@@ -1,4 +0,0 @@
-.mapbox {
-  margin: .5rem 0;
-  padding: .5rem 0;
-}

assets/css/_partial/_single/_music.scss

@@ -1,3 +0,0 @@
-meting-js {
-  margin: .5rem 0;
-}

assets/css/_partial/_single/_toc.scss

@@ -1,157 +0,0 @@
-.toc {
-  .toc-title {
-    font-size: $toc-title-font-size;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-
-  .toc-content {
-    font-size: $toc-content-font-size;
-
-    ul {
-      text-indent: -0.85rem;
-      padding-left: .8rem;
-      list-style: none;
-
-      a:first-child::before {
-        content: "|";
-        font-weight: bolder;
-        margin-right: .5rem;
-        color: $single-link-color;
-
-        [theme=dark] & {
-          color: $single-link-color-dark;
-        }
-      }
-
-      ul {
-        padding-left: 1.5rem;
-      }
-    }
-  }
-
-  ruby {
-    background: $code-background-color;
-
-    rt {
-      color: $global-font-secondary-color;
-    }
-
-    [theme=dark] & {
-      background: $code-background-color-dark;
-
-      rt {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-  }
-}
-
-#toc-auto {
-  display: block;
-  position: absolute;
-  width: $MAX_LENGTH;
-  max-width: 0;
-  padding: 0 .8rem;
-  border-left: 4px solid $global-border-color;
-  @include overflow-wrap(break-word);
-  box-sizing: border-box;
-  top: 10rem;
-  left: 0;
-  visibility: hidden;
-
-  [header-desktop=normal] & {
-    top: 5rem;
-  }
-
-  @include blur;
-
-  [theme=dark] & {
-    border-left-color: $global-border-color-dark;
-  }
-
-  .toc-title {
-    margin: .8rem 0;
-  }
-
-  .toc-content {
-    &.always-active ul {
-      display: block;
-    }
-
-    > nav > ul {
-      margin: .625rem 0;
-    }
-
-    ul {
-      ul {
-        display: none;
-      }
-
-      .has-active > ul {
-        display: block;
-      }
-    }
-
-    a.active {
-      font-weight: bold;
-      color: $single-link-color;
-
-      [theme=dark] & {
-        color: $single-link-color-dark;
-      }
-
-      &::before {
-        color: $single-link-hover-color;
-
-        [theme=dark] & {
-          color: $single-link-hover-color-dark;
-        }
-      }
-    }
-  }
-}
-
-#toc-static {
-  display: none;
-  margin: .8rem 0;
-
-  &[kept=true] {
-    display: block;
-  }
-
-  .toc-title {
-    display: flex;
-    justify-content: space-between;
-    line-height: 2em;
-    padding: 0 .75rem;
-    background: darken($code-background-color, 6%);
-
-    [theme=dark] & {
-      background: darken($code-background-color-dark, 6%);
-    }
-  }
-
-  .toc-content {
-    background-color: $code-background-color;
-
-    > nav > ul {
-      margin: 0;
-      padding: .4rem 1rem .4rem 1.8rem;
-    }
-
-    [theme=dark] & {
-      background-color: $code-background-color-dark;
-    }
-  }
-
-  &.open {
-    .toc-title {
-      background: darken($code-background-color, 3%);
-
-      [theme=dark] & {
-        background: darken($code-background-color-dark, 3%);
-      }
-    }
-  }
-}

assets/css/_partials/_archive/_tags.scss

@@ -0,0 +1,69 @@
+.tag-cloud-tags {
+  margin: 10px 0;
+
+  @include link(true, true);
+
+  a {
+    display: inline-block;
+    position: relative;
+    margin: 5px 10px;
+    @include overflow-wrap(break-word);
+    @include transition(all ease-out 0.3s);
+
+    &:active,
+    &:focus,
+    &:hover {
+      @include transform(scale(1.2));
+
+      sup {
+        color: $global-font-color;
+        @include transition(all ease-out 0.3s);
+
+        [data-theme='dark'] & {
+          color: $global-font-color-dark;
+        }
+      }
+    }
+
+    sup {
+      color: $global-font-secondary-color;
+
+      [data-theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+  }
+}
+
+@for $grade from 0 through 10 {
+  $tag-cloud-color: mix($tag-cloud-end, $tag-cloud-start, $grade * 10);
+  $tag-cloud-color-dark: mix($tag-cloud-end-dark, $tag-cloud-start-dark, $grade * 10);
+
+  .tag-cloud-#{$grade} {
+    color: $tag-cloud-color!important;
+    font-size: var(--tag-font);
+    margin: 10px!important;
+
+    &:active,
+    &:focus,
+    &:hover {
+      color: $global-link-hover-color!important;
+
+      [data-theme='dark'] & {
+        color: $global-link-hover-color-dark;
+      }
+
+      sup {
+        opacity: 1;
+      }
+    }
+
+    [data-theme='dark'] & {
+      color: $tag-cloud-color-dark!important;
+    }
+
+    sup {
+      opacity: 0;
+    }
+  }
+}

assets/css/_partials/_archive/_terms.scss

@@ -1,6 +1,6 @@
-.categories-card {
+.categories-card,
+.collections-card {
   margin: 0 auto;
-  margin-top: 3rem;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -9,16 +9,19 @@
   line-height: 1.6rem;
 
   .card-item {
-    font-size: .875rem;
+    font-size: 0.875rem;
     text-align: left;
     width: 45%;
     display: flex;
     align-items: flex-start;
-    margin-top: 2rem;
     min-height: 10rem;
     padding: 0 2%;
     position: relative;
 
+    &:nth-child(n+3){
+      margin-top: 2rem;
+    }
+
     .card-item-wrapper {
       width: 100%;
       overflow: hidden;
@@ -28,7 +31,7 @@
         font-weight: bold;
         display: inline-block;
         margin-top: 1rem;
-        margin-bottom: .75rem;
+        margin-bottom: 0.75rem;
       }
 
       span {
@@ -44,7 +47,7 @@
   justify-content: space-between;
   align-items: center;
   box-sizing: border-box;
-  margin: .25rem 0 .25rem 1.5rem;
+  margin: 0.25rem 0 0.25rem 1.5rem;
 }
 
 .archive-item-link {
@@ -58,7 +61,7 @@
     background-color: transparent;
   }
 
-  [theme=dark] & {
+  [data-theme='dark'] & {
     color: $global-link-color-dark;
 
     &:hover {
@@ -68,13 +71,12 @@
 }
 
 .archive-item-date {
-  width: 4em;
   text-align: right;
   color: $global-font-secondary-color;
   white-space: nowrap;
   font-variant-numeric: tabular-nums lining-nums;
 
-  [theme=dark] & {
+  [data-theme='dark'] & {
     color: $global-font-secondary-color-dark;
   }
 }

assets/css/_partials/_details.scss

@@ -1,5 +1,7 @@
 .details {
   .details-summary {
+    @include border-radius($global-border-radius);
+
     &:hover {
       cursor: pointer;
     }
@@ -9,7 +11,7 @@
     color: $global-font-secondary-color;
     @include transition(transform 0.2s ease);
 
-    [theme=dark] & {
+    [data-theme='dark'] & {
       color: $global-font-secondary-color-dark;
     }
   }
@@ -21,12 +23,17 @@
   }
 
   &.open {
+    .details-summary {
+      @include border-radius($global-border-radius $global-border-radius 0 0);
+    }
+
     i.details-icon {
       @include transform(rotate(90deg));
     }
 
     .details-content {
-      max-height: $MAX_LENGTH;
+      max-height: 100%;
+      @include border-radius(0 0 $global-border-radius $global-border-radius);
       @include details-transition-close;
     }
   }

assets/css/_partials/_icon.scss

@@ -0,0 +1,28 @@
+svg.icon {
+  display: inline-block;
+  width: 1.25em;
+  height: 1em;
+  text-align: center;
+
+  path {
+    fill: currentColor;
+  }
+}
+
+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.2em;
+  width: 1.2em;
+  line-height: 1.2em;
+  position: relative;
+  vertical-align: text-bottom;
+}

assets/css/_partials/_img.scss

@@ -0,0 +1,3 @@
+img {
+  @include border-radius($global-border-radius/2);
+}

assets/css/_partials/_maps/_admonition.scss

@@ -0,0 +1,15 @@
+// Color map of admonition [$type $color $background-color, ... ]
+$admonition-color-map:
+  'note' #448aff rgba(68, 138, 255, 0.1),
+  'abstract' #00b0ff rgba(0, 176, 255, 0.1),
+  'info' #00b8d4 rgba(0, 184, 212, 0.1),
+  'tip' #00bfa5 rgba(0, 191, 165, 0.1),
+  'success' #00c853 rgba(0, 200, 83, 0.1),
+  'question' #64dd17 rgba(100, 221, 23, 0.1),
+  'warning' #ff9100 rgba(255, 145, 0, 0.1),
+  'failure' #ff5252 rgba(255, 82, 82, 0.1),
+  'danger' #ff1744 rgba(255, 23, 68, 0.1),
+  'bug' #f50057 rgba(245, 0, 87, 0.1),
+  'example' #651fff rgba(101, 31, 255, 0.1),
+  'quote' #9e9e9e rgba(159, 159, 159, 0.1)
+  !default;

assets/css/_partials/_maps/_code-highlight.scss

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

assets/css/_partials/_maps/_code-type.scss

@@ -0,0 +1,373 @@
+// Code type map
+$code-type-map: (
+  // Chroma supported languages
+  // @generator https://github.com/hugo-fixit/.tools/blob/main/tampermonkey/code-type-map-fetcher.user.js
+  "abap": "ABAP",
+  "abnf": "ABNF",
+  "as": "ActionScript",
+  "actionscript": "ActionScript",
+  "as3": "ActionScript 3",
+  "actionscript3": "ActionScript 3",
+  "ada": "Ada",
+  "ada95": "Ada",
+  "ada2005": "Ada",
+  "al": "AL",
+  "ng2": "Angular2",
+  "antlr": "ANTLR",
+  "apacheconf": "ApacheConf",
+  "aconf": "ApacheConf",
+  "apache": "ApacheConf",
+  "apl": "APL",
+  "applescript": "AppleScript",
+  "arduino": "Arduino",
+  "armasm": "ArmAsm",
+  "awk": "Awk",
+  "gawk": "Awk",
+  "mawk": "Awk",
+  "nawk": "Awk",
+  "ballerina": "Ballerina",
+  "make": "Base Makefile",
+  "makefile": "Base Makefile",
+  "mf": "Base Makefile",
+  "bsdmake": "Base Makefile",
+  "bash": "Bash",
+  "sh": "Bash",
+  "ksh": "Bash",
+  "zsh": "Bash",
+  "shell": "Bash",
+  "bash-session": "BashSession",
+  "console": "BashSession",
+  "shell-session": "BashSession",
+  "bat": "Batchfile",
+  "batch": "Batchfile",
+  "dosbatch": "Batchfile",
+  "winbatch": "Batchfile",
+  "bib": "BibTeX",
+  "bibtex": "BibTeX",
+  "bicep": "Bicep",
+  "blitzbasic": "BlitzBasic",
+  "b3d": "BlitzBasic",
+  "bplus": "BlitzBasic",
+  "bnf": "BNF",
+  "brainfuck": "Brainfuck",
+  "bf": "Brainfuck",
+  "c": "C",
+  "csharp": "C#",
+  "c\\#": "C#",
+  "cpp": "C++",
+  "c\\+\\+": "C++",
+  "caddyfile": "Caddyfile",
+  "caddy": "Caddyfile",
+  "caddyfile-directives": "Caddyfile Directives",
+  "caddyfile-d": "Caddyfile Directives",
+  "caddy-d": "Caddyfile Directives",
+  "capnp": "Cap'n Proto",
+  "cassandra": "Cassandra CQL",
+  "cql": "Cassandra CQL",
+  "ceylon": "Ceylon",
+  "cfengine3": "CFEngine3",
+  "cf3": "CFEngine3",
+  "cfs": "cfstatement",
+  "chai": "ChaiScript",
+  "chaiscript": "ChaiScript",
+  "cheetah": "Cheetah",
+  "spitfire": "Cheetah",
+  "clojure": "Clojure",
+  "clj": "Clojure",
+  "cmake": "CMake",
+  "cobol": "COBOL",
+  "coffee-script": "CoffeeScript",
+  "coffeescript": "CoffeeScript",
+  "coffee": "CoffeeScript",
+  "common-lisp": "Common Lisp",
+  "cl": "Common Lisp",
+  "lisp": "Common Lisp",
+  "coq": "Coq",
+  "cr": "Crystal",
+  "crystal": "Crystal",
+  "css": "CSS",
+  "cython": "Cython",
+  "pyx": "Cython",
+  "pyrex": "Cython",
+  "d": "D",
+  "dart": "Dart",
+  "diff": "Diff",
+  "udiff": "Diff",
+  "django": "Django/Jinja",
+  "jinja": "Django/Jinja",
+  "docker": "Docker",
+  "dockerfile": "Docker",
+  "dtd": "DTD",
+  "dylan": "Dylan",
+  "ebnf": "EBNF",
+  "elixir": "Elixir",
+  "ex": "Elixir",
+  "exs": "Elixir",
+  "elm": "Elm",
+  "emacs": "EmacsLisp",
+  "elisp": "EmacsLisp",
+  "emacs-lisp": "EmacsLisp",
+  "erlang": "Erlang",
+  "factor": "Factor",
+  "fennel": "Fennel",
+  "fnl": "Fennel",
+  "fish": "Fish",
+  "fishshell": "Fish",
+  "forth": "Forth",
+  "fortran": "Fortran",
+  "fortranfixed": "FortranFixed",
+  "fsharp": "FSharp",
+  "gas": "GAS",
+  "asm": "GAS",
+  "gdscript": "GDScript",
+  "gd": "GDScript",
+  "genshi": "Genshi",
+  "kid": "Genshi",
+  "xml\\+genshi": "Genshi",
+  "xml\\+kid": "Genshi",
+  "html\\+genshi": "Genshi HTML",
+  "html\\+kid": "Genshi HTML",
+  "genshitext": "Genshi Text",
+  "cucumber": "Gherkin",
+  "Cucumber": "Gherkin",
+  "gherkin": "Gherkin",
+  "Gherkin": "Gherkin",
+  "glsl": "GLSL",
+  "gnuplot": "Gnuplot",
+  "go": "Go",
+  "golang": "Go",
+  "go-html-template": "Go HTML Template",
+  "go-text-template": "Go Text Template",
+  "graphql": "GraphQL",
+  "graphqls": "GraphQL",
+  "gql": "GraphQL",
+  "groff": "Groff",
+  "nroff": "Groff",
+  "man": "Groff",
+  "groovy": "Groovy",
+  "handlebars": "Handlebars",
+  "hbs": "Handlebars",
+  "haskell": "Haskell",
+  "hs": "Haskell",
+  "hx": "Haxe",
+  "haxe": "Haxe",
+  "hxsl": "Haxe",
+  "hcl": "HCL",
+  "hexdump": "Hexdump",
+  "hlb": "HLB",
+  "html": "HTML",
+  "http": "HTTP",
+  "hylang": "Hy",
+  "idris": "Idris",
+  "idr": "Idris",
+  "igor": "Igor",
+  "igorpro": "Igor",
+  "ini": "INI",
+  "cfg": "INI",
+  "dosini": "INI",
+  "io": "Io",
+  "j": "J",
+  "java": "Java",
+  "js": "JavaScript",
+  "javascript": "JavaScript",
+  "json": "JSON",
+  "julia": "Julia",
+  "jl": "Julia",
+  "jungle": "Jungle",
+  "kotlin": "Kotlin",
+  "lighty": "Lighttpd configuration file",
+  "lighttpd": "Lighttpd configuration file",
+  "llvm": "LLVM",
+  "lua": "Lua",
+  "mako": "Mako",
+  "md": "markdown",
+  "mkd": "markdown",
+  "mason": "Mason",
+  "mathematica": "Mathematica",
+  "mma": "Mathematica",
+  "nb": "Mathematica",
+  "matlab": "Matlab",
+  "mcfunction": "mcfunction",
+  "meson": "Meson",
+  "meson\\.build": "Meson",
+  "metal": "Metal",
+  "minizinc": "MiniZinc",
+  "MZN": "MiniZinc",
+  "mzn": "MiniZinc",
+  "mlir": "MLIR",
+  "modula2": "Modula-2",
+  "m2": "Modula-2",
+  "monkeyc": "MonkeyC",
+  "morrowind": "MorrowindScript",
+  "mwscript": "MorrowindScript",
+  "myghty": "Myghty",
+  "mysql": "MySQL",
+  "mariadb": "MySQL",
+  "nasm": "NASM",
+  "newspeak": "Newspeak",
+  "nginx": "Nginx configuration file",
+  "nim": "Nim",
+  "nimrod": "Nim",
+  "nixos": "Nix",
+  "nix": "Nix",
+  "objective-c": "Objective-C",
+  "objectivec": "Objective-C",
+  "obj-c": "Objective-C",
+  "objc": "Objective-C",
+  "ocaml": "OCaml",
+  "octave": "Octave",
+  "ones": "OnesEnterprise",
+  "onesenterprise": "OnesEnterprise",
+  "1S": "OnesEnterprise",
+  "1S:Enterprise": "OnesEnterprise",
+  "openedge": "OpenEdge ABL",
+  "abl": "OpenEdge ABL",
+  "progress": "OpenEdge ABL",
+  "openedgeabl": "OpenEdge ABL",
+  "openscad": "OpenSCAD",
+  "org": "Org Mode",
+  "orgmode": "Org Mode",
+  "pacmanconf": "PacmanConf",
+  "perl": "Perl",
+  "pl": "Perl",
+  "php": "PHP",
+  "php3": "PHP",
+  "php4": "PHP",
+  "php5": "PHP",
+  "phtml": "PHTML",
+  "pig": "Pig",
+  "pkgconfig": "PkgConfig",
+  "plpgsql": "PL/pgSQL",
+  "text": "plaintext",
+  "plain": "plaintext",
+  "no-highlight": "plaintext",
+  "plutus-core": "Plutus Core",
+  "plc": "Plutus Core",
+  "pony": "Pony",
+  "postgresql": "PostgreSQL SQL dialect",
+  "postgres": "PostgreSQL SQL dialect",
+  "postscript": "PostScript",
+  "postscr": "PostScript",
+  "pov": "POVRay",
+  "powerquery": "PowerQuery",
+  "pq": "PowerQuery",
+  "powershell": "PowerShell",
+  "posh": "PowerShell",
+  "ps1": "PowerShell",
+  "psm1": "PowerShell",
+  "psd1": "PowerShell",
+  "prolog": "Prolog",
+  "promql": "PromQL",
+  "protobuf": "Protocol Buffer",
+  "proto": "Protocol Buffer",
+  "puppet": "Puppet",
+  "python": "Python",
+  "py": "Python",
+  "sage": "Python",
+  "python3": "Python",
+  "py3": "Python",
+  "python2": "Python 2",
+  "py2": "Python 2",
+  "qbasic": "QBasic",
+  "basic": "QBasic",
+  "qml": "QML",
+  "qbs": "QML",
+  "splus": "R",
+  "s": "R",
+  "r": "R",
+  "racket": "Racket",
+  "rkt": "Racket",
+  "ragel": "Ragel",
+  "perl6": "Raku",
+  "pl6": "Raku",
+  "raku": "Raku",
+  "jsx": "react",
+  "react": "react",
+  "reason": "ReasonML",
+  "reasonml": "ReasonML",
+  "registry": "reg",
+  "rst": "reStructuredText",
+  "rest": "reStructuredText",
+  "restructuredtext": "reStructuredText",
+  "rexx": "Rexx",
+  "arexx": "Rexx",
+  "rb": "Ruby",
+  "ruby": "Ruby",
+  "duby": "Ruby",
+  "rust": "Rust",
+  "rs": "Rust",
+  "sas": "SAS",
+  "sass": "Sass",
+  "scala": "Scala",
+  "scheme": "Scheme",
+  "scm": "Scheme",
+  "scilab": "Scilab",
+  "scss": "SCSS",
+  "sieve": "Sieve",
+  "smalltalk": "Smalltalk",
+  "squeak": "Smalltalk",
+  "st": "Smalltalk",
+  "smarty": "Smarty",
+  "snobol": "Snobol",
+  "sol": "Solidity",
+  "solidity": "Solidity",
+  "sparql": "SPARQL",
+  "sql": "SQL",
+  "squidconf": "SquidConf",
+  "squid\\.conf": "SquidConf",
+  "squid": "SquidConf",
+  "sml": "Standard ML",
+  "stylus": "Stylus",
+  "svelte": "Svelte",
+  "swift": "Swift",
+  "systemd": "SYSTEMD",
+  "systemverilog": "systemverilog",
+  "sv": "systemverilog",
+  "tablegen": "TableGen",
+  "tasm": "TASM",
+  "tcl": "Tcl",
+  "tcsh": "Tcsh",
+  "csh": "Tcsh",
+  "termcap": "Termcap",
+  "terminfo": "Terminfo",
+  "terraform": "Terraform",
+  "tf": "Terraform",
+  "tex": "TeX",
+  "latex": "TeX",
+  "thrift": "Thrift",
+  "toml": "TOML",
+  "tradingview": "TradingView",
+  "tv": "TradingView",
+  "tsql": "Transact-SQL",
+  "t-sql": "Transact-SQL",
+  "turing": "Turing",
+  "turtle": "Turtle",
+  "twig": "Twig",
+  "ts": "TypeScript",
+  "tsx": "TypeScript",
+  "typescript": "TypeScript",
+  "typoscript": "TypoScript",
+  "typoscriptcssdata": "TypoScriptCssData",
+  "typoscripthtmldata": "TypoScriptHtmlData",
+  "v": "verilog",
+  "vlang": "V",
+  "vsh": "V shell",
+  "vshell": "V shell",
+  "vb\\.net": "VB.net",
+  "vbnet": "VB.net",
+  "verilog": "verilog",
+  "vhdl": "VHDL",
+  "vim": "VimL",
+  "vue": "vue",
+  "vuejs": "vue",
+  "whiley": "Whiley",
+  "xml": "XML",
+  "xorg\\.conf": "Xorg",
+  "yaml": "YAML",
+  "yang": "YANG",
+  "zed": "Zed",
+  "zig": "Zig",
+  // Custom code type
+  "markdown": "markdown",
+  "yml": "YAML"
+) !default;

assets/css/_partials/_maps/_colors.scss

@@ -0,0 +1,17 @@
+// Theme colors
+$primary: #1772ee !default;
+$secondary: #919191 !default;
+$success: #13ce66 !default;
+$info: #0dcaf0 !default;
+$warning: #ffba00 !default;
+$danger: #ff4949 !default;
+
+// Theme colors map
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger
+) !default;

assets/css/_partials/_maps/_utilities.scss

@@ -0,0 +1,13 @@
+// Utilities
+
+// property order
+$orders: (
+  first: -1,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  last: 6,
+) !default;

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;
-    background-color: rgba(0, 0, 0, .25);
+    @include z-index(1);
+    background-color: rgba(0, 0, 0, 0.25);
   }
 }

assets/css/_partials/_single/_code.scss

@@ -0,0 +1,364 @@
+// inline code
+code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+  color: $code-color;
+  background-color: rgba(175, 184, 193, 0.2);
+  text-decoration: inherit;
+  @include border-radius($global-border-radius);
+  @include overflow-wrap(break-word);
+  @include line-break(auto);
+
+  [data-theme='dark'] & {
+    color: $code-color-dark;
+    background-color: rgba(99, 110, 123, 0.4);
+  }
+}
+
+// indented code
+pre:not(.mermaid[data-processed='true']) {
+  margin: 0;
+  line-height: 1.45em;
+  padding: 0.5rem;
+  overflow: auto;
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+  @include border-radius($global-border-radius);
+  @include tab-size(4);
+
+  background-color: $code-background-color;
+
+  [data-theme='dark'] & {
+    background-color: $code-background-color-dark;
+  }
+
+  code {
+    padding: 0;
+    background-color: transparent;
+    @include border-radius(0);
+    @include max-content(min-width);
+
+    [data-theme='dark'] & {
+      background-color: transparent;
+    }
+  }
+
+  img {
+    min-height: 1em;
+    max-height: 1.2em;
+    vertical-align: text-bottom;
+  }
+}
+
+.highlight,
+.gist {
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+
+  .table-wrapper {
+    > table,
+    > table thead,
+    > table tr,
+    > table td {
+      margin: 0;
+      padding: 0;
+      border: none !important;
+      white-space: nowrap;
+    }
+  }
+}
+
+// block fenced code
+.highlight {
+  margin: 0.5rem 0;
+
+  > .chroma {
+    position: relative;
+
+    .code-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      font-family: $global-font-family;
+      font-weight: bold;
+      line-height: 1.4em;
+      color: $code-info-color;
+      background-color: darken($code-background-color, 3%);
+      @include border-radius($global-border-radius);
+      @include transition(border-radius 0.2s ease);
+
+      [data-theme='dark'] & {
+        color: $code-info-color-dark;
+        background-color: darken($code-background-color-dark, 6%);
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      .ellipses,
+      .edit,
+      .copy {
+        @extend .print-d-none;
+      }
+
+      .code-title {
+        width: 100%;
+        padding: 0.4rem;
+
+        .arrow {
+          padding: 0 0.2rem;
+          @include transition(transform 0.2s ease);
+        }
+
+        .title-inner {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+
+      .code-title::after {
+        padding-left: 0.2rem;
+        content: 'Code';
+      }
+
+      .ellipses {
+        padding: 0.4rem;
+      }
+
+      .edit,
+      .copy {
+        display: none;
+        padding: 0.4rem;
+
+        &:hover {
+          cursor: pointer;
+          color: $global-link-hover-color;
+
+          [data-theme='dark'] & {
+            color: $global-link-hover-color-dark;
+          }
+        }
+      }
+
+      @each $type, $text in $code-type-map {
+        &.language-#{$type} .code-title::after {
+          content: $text;
+        }
+      }
+    }
+
+    // delayed loading table-wrapper
+    .table-wrapper {
+      max-height: 0;
+      overflow: hidden;
+      @include border-radius(0 0 $global-border-radius $global-border-radius);
+      @include details-transition-open;
+    }
+
+    table {
+      border-spacing: 0;
+      width: auto;
+      overflow: auto;
+      display: block;
+      background-color: $code-background-color;
+
+      [data-theme='dark'] & {
+        background-color: $code-background-color-dark;
+      }
+
+      td {
+        vertical-align: top;
+        padding: 0;
+      }
+
+      pre {
+        padding: 0.25rem;
+        outline-offset: -1px;
+        @include border-radius(0);
+      }
+
+      /* lineNumbersInTable=false */
+      .ln {
+        min-width: 1.25rem;
+      }
+
+      // ========== lineNumbersInTable ========== //
+      // line numbers
+      .lntd:first-child {
+        min-width: 1.6rem;
+        text-align: right;
+        position: sticky;
+        left: 0;
+
+        pre {
+          @include user-select(none);
+        }
+      }
+      // code content
+      .lntd:last-child {
+        width: 100%;
+
+        pre {
+          padding-left: 0.5rem;
+          padding-right: 0.5rem;
+        }
+        code {
+          width: 100%;
+        }
+      }
+      // ========== lineNumbersInTable ========== //
+    }
+
+    &.open {
+      .code-header {
+        background-color: darken($code-background-color, 6%);
+        @include border-radius($global-border-radius $global-border-radius 0 0);
+
+        [data-theme='dark'] & {
+          background-color: darken($code-background-color-dark, 3%);
+        }
+      }
+
+      .table-wrapper {
+        max-height: 100%;
+        @include details-transition-close;
+      }
+
+      .arrow {
+        @include transform(rotate(90deg));
+      }
+
+      .ellipses {
+        display: none;
+      }
+
+      .edit,
+      .copy {
+        display: inline;
+      }
+    }
+  }
+
+  /* LineHighlight */
+  .hl {
+    display: block;
+    background-color: $code-hightlight-color;
+    box-shadow: -0.5rem 0 0 $code-hightlight-color, 0.5rem 0 0 $code-hightlight-color;
+
+    [data-theme='dark'] & {
+      background-color: $code-hightlight-color-dark;
+      box-shadow: -0.5rem 0 0 $code-hightlight-color-dark, 0.5rem 0 0 $code-hightlight-color-dark;
+    }
+  }
+  /* GenericUnderline */
+  .gl {
+    text-decoration: underline;
+  }
+  /* GenericStrong */
+  .gs {
+    font-weight: bold;
+  }
+  /* GenericEmph */
+  .ge {
+    font-style: italic;
+  }
+  /* lineNumbersInTable=false */
+  .ln {
+    padding-right: 0.5rem;
+    display: inline-block;
+    min-width: 1.1rem;
+    text-align: right;
+  }
+  /* LineNumbers */
+  .lnt,
+  .ln {
+    color: $global-font-secondary-color;
+
+    [data-theme='dark'] & {
+      color: $global-font-secondary-color-dark;
+    }
+  }
+
+  // ========== Higtlight Color ========== //
+
+  /* Error */
+  .err {
+    font-style: italic;
+    border-bottom: 1px dotted $code-error-color;
+  }
+  /* GenericDeleted */
+  .gd {
+    background-color: #ffebe9;
+
+    [data-theme='dark'] & {
+      background-color: #78191b;
+    }
+  }
+  /* GenericInserted */
+  .gi {
+    background-color: #dafbe1;
+
+    [data-theme='dark'] & {
+      background-color: #1b4721;
+    }
+  }
+
+  @each $class, $color in $code-highlight-color-map {
+    .#{$class} {
+      color: $color;
+    }
+  }
+
+  [data-theme='dark'] & {
+    @each $class, $color in $code-highlight-color-map-dark {
+      .#{$class} {
+        color: $color;
+      }
+    }
+  }
+  // ========== Higtlight Color ========== //
+}
+
+// gist shortcode
+.gist {
+  .gist-file,
+  .gist-data,
+  .gist-meta {
+    border: none;
+  }
+
+  .gist-data {
+    background-color: transparent;
+  }
+
+  .gist-meta {
+    padding: 0.4rem 0.8rem;
+    @include link(false, false);
+    background-color: darken($code-background-color, 5%);
+
+    [data-theme='dark'] & {
+      background-color: darken($code-background-color-dark, 5%);
+    }
+  }
+
+  .table-wrapper {
+    .highlight,
+    &::-webkit-scrollbar {
+      background-color: #f6f8fa;
+
+      [data-theme='dark'] & {
+        background-color: #2d333b;
+      }
+    }
+  }
+
+  [data-theme='dark'] & {
+    @import './github-dark-dimmed';
+  }
+}

assets/css/_partials/_single/_collections.scss

@@ -0,0 +1,232 @@
+// 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;
+
+      &::-webkit-scrollbar {
+        width: 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

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

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

@@ -0,0 +1,81 @@
+.fixit-decryptor-container {
+  font-family: $global-font-family;
+  text-align: center;
+  margin-top: 3rem;
+
+  .fixit-decryptor-input,
+  .fixit-decryptor-btn,
+  .fixit-encryptor-btn {
+    display: inline-block;
+    box-sizing: border-box;
+    outline: none;
+    color: $global-font-color;
+    border: 1px solid darken($global-border-color, 15%);
+    border-radius: $global-border-radius;
+    @include transition(all 0.1s ease-out);
+    box-shadow: 0px 0px 5px 0px darken($global-border-color, 15%);
+
+    &:active,
+    &:focus,
+    &:hover {
+      color: darken($global-link-hover-color, 6%);
+      border-color: $global-link-hover-color;
+      box-shadow: 0px 0px 5px 0px lighten($global-link-hover-color, 20%);
+
+      [data-theme='dark'] & {
+        color: lighten($global-link-hover-color-dark, 6%);
+        border-color: $global-link-hover-color-dark;
+        box-shadow: 0px 0px 5px 0px darken($global-link-hover-color-dark, 20%);
+      }
+    }
+
+    [data-theme='dark'] & {
+      color: $global-font-color-dark;
+      border-color: lighten($global-border-color-dark, 15%);
+      box-shadow: 0px 0px 5px 0px lighten($global-border-color-dark, 15%);
+    }
+  }
+
+  .fixit-decryptor-input {
+    width: calc(clamp(50%, 450px, 100%) - 100px);
+    height: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    background-color: $global-background-color;
+
+    [data-theme='dark'] & {
+      background-color: $global-background-color-dark;
+    }
+  }
+
+  .fixit-decryptor-btn,
+  .fixit-encryptor-btn {
+    cursor: pointer;
+    @include transition(all 0.1s ease-out);
+    padding: 0.8rem 1rem;
+
+    background-color: $header-background-color;
+
+    [data-theme='dark'] & {
+      background-color: $header-background-color-dark;
+    }
+  }
+}
+
+// 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,11 +1,15 @@
 .post-footer {
-  margin-top: 3rem;
+  margin: 2rem 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;
 
-    [theme=dark] & {
+    [data-theme='dark'] & {
       border-bottom: 1px solid $global-border-color-dark;
     }
 
@@ -17,7 +21,7 @@
         font-size: 0.8em;
         color: $global-font-secondary-color;
 
-        [theme=dark] & {
+        [data-theme='dark'] & {
           color: $global-font-secondary-color-dark;
         }
 
@@ -28,7 +32,7 @@
         font-size: 0.8em;
         color: $global-font-secondary-color;
 
-        [theme=dark] & {
+        [data-theme='dark'] & {
           color: $global-font-secondary-color-dark;
         }
 
@@ -37,12 +41,19 @@
 
       .post-info-md {
         font-size: 0.8rem;
-        width: 8rem;
+        width: fit-content;
 
         @include link(false, false);
+
+        >span:not(:first-child)::before {
+          content: '|';
+          margin-left: 0.25rem;
+          margin-right: 0.25rem;
+        }
       }
 
       .post-info-share {
+        @extend .print-d-none;
         a * {
           vertical-align: text-bottom;
         }
@@ -51,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 {
@@ -63,36 +78,39 @@
     * {
       display: inline;
     }
+
+    @include link(true, true);
+
+    .post-tag:not(:last-child)::after {
+      content: ',';
+      margin-right: 0.25rem;
+    }
   }
 
   .post-nav {
-    &::before,
-    &::after {
-      content: ' ';
-      display: table;
-    }
+    display: flex;
+    justify-content: space-between;
+    gap: 1.5rem;
+    padding-block: 0.5rem;
+    @extend .print-d-none;
 
-    & a.prev,
-    & a.next {
+    .post-nav-item {
+      flex: 1;
       font-size: 1rem;
       font-weight: 600;
       @include transition(all 0.3s ease-out);
-    }
 
-    & a.prev {
-      float: left;
-    }
+      &[rel='next'] {
+        text-align: right;
+      }
 
-    & a.prev:hover {
-      @include transform(translateX(-4px));
-    }
+      &[rel='prev']:hover {
+        @include transform(translateX(-4px));
+      }
 
-    & a.next {
-      float: right;
-    }
-
-    & a.next:hover {
-      @include transform(translateX(4px));
+      &[rel='next']:hover {
+        @include transform(translateX(4px));
+      }
     }
   }
 }

assets/css/_partials/_single/_github-dark-dimmed.scss

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

assets/css/_partials/_single/_reward.scss

@@ -0,0 +1,98 @@
+.post-reward {
+  padding: 1rem;
+  text-align: center;
+  margin-bottom: -1rem;
+  @extend .print-d-none;
+
+  &:has(.reward-ways:empty) {
+    display: none;
+  }
+
+  .comment {
+    margin: 0.5rem 0;
+    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 {
+    display: inline-block;
+    box-sizing: border-box;
+    cursor: pointer;
+    outline: none;
+    color: lighten($reward-color, 5%);
+    border: 2px solid lighten($reward-color, 10%);
+    border-radius: $global-border-radius;
+    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 {
+      color: #ffffff;
+      border-color: $reward-color;
+      background-color: $reward-color;
+
+      [data-theme='dark'] & {
+        color: #ffffff;
+        border-color: $reward-color-dark;
+        background-color: $reward-color-dark;
+      }
+    }
+
+    [data-theme='dark'] & {
+      color: $reward-color;
+      border-color: lighten($reward-color, 5%);
+      background-color: $global-background-color-dark;
+    }
+  }
+}

assets/css/_partials/_single/_toc.scss

@@ -0,0 +1,252 @@
+.toc {
+  .toc-title {
+    font-size: $toc-title-font-size;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  .toc-content {
+    font-size: $toc-content-font-size;
+
+    ul {
+      text-indent: -0.8em;
+      padding-left: 0.8em;
+      list-style: none;
+
+      a:first-child::before {
+        content: '|';
+        font-weight: bolder;
+        margin-right: 0.5em;
+        position: relative;
+        bottom: 2px;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+
+      ul {
+        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;
+        }
+      }
+    }
+  }
+
+  ruby {
+    background: $code-background-color;
+
+    rt {
+      color: $global-font-secondary-color;
+    }
+
+    [data-theme='dark'] & {
+      background: $code-background-color-dark;
+
+      rt {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+  }
+}
+
+#toc-auto {
+  display: block;
+  position: sticky;
+  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-block: 0 0.5em;
+    cursor: pointer;
+    @include user-select(none);
+
+    &::before {
+      content: '|';
+      font-weight: bolder;
+      margin-right: 0.5em;
+      position: relative;
+      bottom: 2px;
+      color: $global-border-color;
+
+      [data-theme='dark'] & {
+        color: $global-border-color-dark;
+      }
+    }
+
+    i.toc-icon {
+      @include transition(transform 0.2s ease);
+    }
+  }
+
+  &.toc-hidden i.toc-icon {
+    @include transform(rotate(-90deg));
+    @include transition(transform 0.2s ease);
+  }
+
+  .toc-content {
+    overflow-y: scroll;
+    max-height: calc(100vh - #{2*$header-height});
+    
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    &.always-active ul,
+    &.always-active ol {
+      display: block;
+    }
+
+    > nav > ul {
+      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;
+      }
+
+      .has-active > ul {
+        display: block;
+      }
+
+      a.active::before {
+        color: $single-link-hover-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-hover-color-dark;
+        }
+      }
+    }
+
+    // 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.8em 0;
+
+  &[data-kept='true'] {
+    display: block;
+  }
+
+  .toc-title {
+    display: flex;
+    justify-content: space-between;
+    line-height: 2em;
+    padding: 0 0.75em;
+    background: darken($code-background-color, 3%);
+
+    [data-theme='dark'] & {
+      background: darken($code-background-color-dark, 6%);
+    }
+  }
+
+  .toc-content {
+    background-color: $code-background-color;
+
+    > 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'] & {
+      background-color: $code-background-color-dark;
+    }
+  }
+
+  &.open {
+    .toc-title {
+      background: darken($code-background-color, 6%);
+
+      [data-theme='dark'] & {
+        background: darken($code-background-color-dark, 3%);
+      }
+    }
+  }
+}

assets/css/_partials/_widgets.scss

@@ -0,0 +1,6 @@
+@import '_widgets/cookieconsent';
+@import '_widgets/fixed-button';
+@import '_widgets/github-corner';
+@import '_widgets/noscript-warning';
+@import '_widgets/reading-progress';
+@import '_widgets/typeit';

assets/css/_partials/_widgets/_cookieconsent.scss

@@ -2,14 +2,16 @@
   .cc-btn {
     color: $global-font-color;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background-color: #ccc;
     }
 
-    [theme=dark] & {
+    [data-theme='dark'] & {
       color: $global-font-color;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background-color: #fff;
       }
     }

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

@@ -1,46 +1,44 @@
-#fixed-buttons {
-  display: none;
-}
-
 .fixed-button {
-  display: none;
-  z-index: 100;
   position: fixed;
   right: 1.5rem;
   font-size: 1rem;
-  line-height: 1.3rem;
-  padding: .6rem .6rem;
+  line-height: 1.5rem;
+  padding: 0.5rem 0.625rem;
   color: $global-font-secondary-color;
-  background: $header-background-color;
-  @include border-radius(2rem);
+  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 {
+  &:hover,
+  &:active {
     color: $global-font-color;
     cursor: pointer;
   }
 
-  &:active, &:focus, &:hover {
+  &:active,
+  &:focus,
+  &:hover {
     outline: none;
   }
 
-  [theme=dark] & {
+  [data-theme='dark'] & {
     color: $global-font-secondary-color-dark;
-    background: $header-background-color-dark;
+    background-color: $header-background-color-dark;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       color: $global-font-color-dark;
     }
   }
 }
 
-#back-to-top {
-  display: block;
+.back-to-top {
   bottom: 1.5rem;
 }
 
-#view-comments {
+.view-comments {
   bottom: 4.5rem;
 }

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

@@ -0,0 +1,47 @@
+@keyframes octocat-wave {
+  0%,
+  100% {
+    @include transform(rotate(0));
+  }
+  20%,
+  60% {
+    @include transform(rotate(-25deg));
+  }
+  40%,
+  80% {
+    @include transform(rotate(10deg));
+  }
+}
+
+.github-corner {
+  position: fixed;
+  top: 0;
+  @include z-index(2);
+  @extend .print-d-none;
+
+  :hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+  svg {
+    width: $header-height;
+    height: $header-height;
+    border: 0;
+    color: $github-corner-color;
+    fill: $github-corner-fill;
+
+    [data-theme='dark'] & {
+      color: $github-corner-color-dark;
+      fill: $github-corner-fill-dark;
+    }
+  }
+  &.left {
+    left: 0;
+
+    svg {
+      @include transform(scale(-1, 1));
+    }
+  }
+  &.right {
+    right: 0;
+  }
+}

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

@@ -0,0 +1,16 @@
+.noscript-warning {
+  background-color: var(--#{$prefix}danger);
+  color: white;
+  font-size: 1rem;
+  font-weight: bold;
+  position: fixed;
+  text-align: center;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  @include z-index(2);
+
+  [data-theme='dark'] & {
+    background-color: var(--#{$prefix}danger-dark);
+  }
+}

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

@@ -0,0 +1,13 @@
+.reading-progress-bar {
+  --progress: 0;
+  height: var(--progress-h, 2px);
+  width: var(--progress);
+  background-color: var(--bg-progress, var(--#{$prefix}info));
+  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

@@ -0,0 +1,22 @@
+.typeit {
+  .highlight {
+    padding: 0.375rem;
+    font-size: 0.875rem;
+    font-family: $code-font-family;
+    font-weight: bold;
+    word-break: break-all;
+    white-space: pre-wrap;
+  }
+
+  --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/_admonition.scss

@@ -0,0 +1,77 @@
+.admonition {
+  position: relative;
+  margin: 1rem 0;
+  padding: 0 0.75rem;
+  border-left: .25rem solid;
+  overflow: auto;
+  @include border-radius($global-border-radius);
+
+  .admonition-title {
+    font-weight: bold;
+    margin: 0 -0.75rem;
+    padding: 0.25rem 1.8rem;
+    border-bottom: 1px solid;
+    @include border-radius(0);
+  }
+
+  .admonition-content {
+    padding: 0.5rem 0;
+  }
+
+  i.icon {
+    font-size: 0.85rem;
+    position: absolute;
+    top: 0.6rem;
+    left: 0.4rem;
+  }
+
+  i.details-icon {
+    position: absolute;
+    top: 0.6rem;
+    right: 0.3rem;
+  }
+
+  @each $type, $color, $background-color in $admonition-color-map {
+    @if $type == 'note' {
+      background-color: $background-color;
+      border-left-color: $color;
+
+      .admonition-title {
+        border-bottom-color: $background-color;
+        background-color: opacify($background-color, 0.15);
+      }
+
+      &.open .admonition-title {
+        background-color: $background-color;
+      }
+
+      i.icon {
+        color: $color;
+      }
+    }
+    
+    @else {
+      &.#{$type} {
+        background-color: $background-color;
+        border-left-color: $color;
+
+        .admonition-title {
+          border-bottom-color: $background-color;
+          background-color: opacify($background-color, 0.15);
+        }
+
+        &.open .admonition-title {
+          background-color: $background-color;
+        }
+
+        i.icon {
+          color: $color;
+        }
+      }
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0.75rem;
+  }
+}

assets/css/_shortcodes/_cardlink.scss

@@ -0,0 +1,115 @@
+/**
+ * Card link style
+ * @author  @Lruihao https://lruihao.cn
+ */
+
+.card-link {
+  position: relative;
+  display: block;
+  margin: 0.5rem auto;
+  box-sizing: border-box;
+  width: clamp(50%, 400px, 100%);
+  max-width: 100%;
+  overflow: hidden;
+  text-decoration: none;
+  border: none;
+  @include border-radius(0.75rem);
+}
+
+.cl- {
+  &backdrop {
+    position: absolute;
+    top: 0.75rem;
+    bottom: 0.75rem;
+    left: 0;
+    right: 0;
+    background-image: var(--cl-bg-url);
+    background-repeat: no-repeat;
+    filter: blur(0.5rem);
+    opacity: 0.5;
+    background-size: contain;
+    background-position: center;
+  }
+
+  &content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+    background-color: rgba(245, 245, 245, 0.88);
+  }
+
+  &text {
+    overflow: hidden;
+  }
+
+  &title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    max-height: calc(1rem * 1.25 * 2);
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.25;
+    color: $global-font-color;
+  }
+
+  &meta {
+    display: flex;
+    align-items: center;
+    margin-top: 0.25rem;
+    font-size: 0.825rem;
+    color: $global-font-secondary-color;
+  }
+
+  &icon-link {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    margin-right: 0.25rem;
+  }
+
+  &url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &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;
+  }
+
+  [data-theme='dark'] & {
+    &content {
+      background-color: rgba(61, 62, 65, 0.88);
+    }
+
+    &title {
+      color: $global-font-color-dark;
+    }
+
+    &meta {
+      color: $global-font-secondary-color-dark;
+    }
+  }
+}

assets/css/_shortcodes/_center-quote.scss

@@ -0,0 +1,43 @@
+.blockquote-center {
+  border-left: none;
+  margin: 40px 0;
+  padding: 0;
+  position: relative;
+  text-align: center;
+  color: initial;
+
+  &::after,
+  &::before {
+    left: 0;
+    line-height: 1;
+    opacity: 0.6;
+    position: absolute;
+    width: 100%;
+  }
+
+  &::before {
+    border-top: 1px solid $global-border-color;
+    text-align: left;
+    top: -20px;
+    content: '\f10d';
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+
+    [data-theme='dark'] & {
+      border-top-color: $global-border-color-dark;
+    }
+  }
+
+  &::after {
+    border-bottom: 1px solid $global-border-color;
+    bottom: -20px;
+    text-align: right;
+    content: '\f10e';
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+
+    [data-theme='dark'] & {
+      border-bottom-color: $global-border-color-dark;
+    }
+  }
+}

assets/css/_shortcodes/_douyin.scss

@@ -0,0 +1,16 @@
+.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;
+  }
+}

assets/css/_shortcodes/_echarts.scss

@@ -1,4 +1,4 @@
 .echarts {
-  margin: .5rem 0;
+  margin: 0.5rem 0;
   text-align: center;
 }

assets/css/_shortcodes/_index.scss

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

assets/css/_shortcodes/_instagram.scss

@@ -1,5 +1,5 @@
 iframe.instagram-media {
-  [theme=dark] & {
+  [data-theme='dark'] & {
     border: none !important;
   }
 }

assets/css/_shortcodes/_mapbox.scss

@@ -0,0 +1,5 @@
+.mapbox {
+  margin: 0.5rem 0;
+  padding: 0.5rem 0;
+  @include border-radius($global-border-radius);
+}

assets/css/_shortcodes/_mermaid.scss

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