chore(release): 0.4.4

fix(assets): enhance tablist-wrapper styles
fix: update print handling and improve file tree interactions
2026-08-29 17:52:40 +00:00 · 2026-03-19 14:15:16 +08:00 · 2026-03-19 12:47:17 +08:00 · 2026-03-19 11:42:15 +08:00 · 2026-03-18 17:29:08 +08:00 · 2026-03-18 15:21:20 +08:00
1632 changed files with 46989 additions and 52146 deletions
@@ -1,11 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": "> 0.25%, not dead"
-      }
-    ],
-    "minify"
-  ]
-}
@@ -0,0 +1,3 @@
+assets/lib/**/* linguist-vendored
+*.toml linguist-detectable
+*.md linguist-detectable
@@ -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...
-配置文件或者前置参数的代码...
@@ -0,0 +1,55 @@
+name: Bug Report
+description: Create a report to help us improve
+title: '[Bug report] '
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Description
+      description: A clear and concise description of what the bug is. If applicable, add screenshots to help explain your problem. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+      placeholder: Bug description
+    validations:
+      required: true
+  - type: input
+    id: reproduction
+    attributes:
+      label: Reproduction
+      description: Please provide a link to a repo that can reproduce the problem you ran into. A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is required.
+      placeholder: Reproduction
+    validations:
+      required: true
+  - type: dropdown
+    id: installation-method
+    attributes:
+      label: Installation Method
+      description: Select the installation method you used.
+      options:
+        - Hugo Module
+        - Git Submodule
+        - Git Clone
+        - Manual
+        - Other
+    validations:
+      required: true
+  - type: textarea
+    id: environment
+    attributes:
+      label: Build Environment
+      description: |
+        Please try to use Hugo **extended** version before opening the issue.
+      placeholder: |
+        - Theme version/commit [e.g. 0.2.0, 2ccba79]
+        - Hugo version [e.g. 0.147.0]
+        - OS: [e.g. Windows 10, macOS, Ubuntu]
+    validations:
+      required: true
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional Information
+      description: |
+        Configuration files or front matter code snippets that may help us understand the issue.
@@ -1,5 +1,8 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Theme Documentation 主题文档
-    url: https://fixit.lruihao.cn/categories/documentation/
-    about: Please read the documentation carefully. 请先仔细阅读主题文档.
+  - name: Questions
+    url: https://github.com/hugo-fixit/FixIt/discussions/new
+    about: Please ask questions in Discussion.
+  - name: Theme Documentation
+    url: https://fixit.lruihao.cn/
+    about: Please read the documentation carefully.
@@ -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.
-如果可以的话, 提供实现这个功能的相关参考链接.
@@ -0,0 +1,35 @@
+name: Feature Request
+description: Suggest an idea for this project
+title: '[Feature request] '
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for your interest in the project and taking the time to fill out this feature request!
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Clear and concise description of the problem
+      description: As a user or developer using FixIt, what feature your want in details. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+      placeholder: Feature description
+    validations:
+      required: true
+  - type: textarea
+    id: suggested-solution
+    attributes:
+      label: Suggested solution
+      description: We could provide following implementation...
+      placeholder: Suggested solution
+    validations:
+      required: true
+  - type: textarea
+    id: alternative
+    attributes:
+      label: Alternative
+      description: Clear and concise description of any alternative solutions or features you've considered.
+      placeholder: Alternative solution
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Any other context or screenshots about the feature request here.
@@ -0,0 +1,24 @@
+<!-- Thank you for contributing! -->
+
+### Description
+
+<!-- Please insert your description here and provide especially info about the "what" this PR is solving -->
+
+### Before submitting the PR, please make sure you do the following <!-- (put an "X" next to an item) -->
+
+- [ ] Read the [Contributing Guidelines](https://github.com/hugo-fixit/FixIt/blob/main/CONTRIBUTING.md).
+- [ ] Provide a description in this PR that addresses **what** the PR is solving. If this PR is going to solve an existing issue, please reference the issue (e.g. `close #123`).
+
+### What is the purpose of this pull request? <!-- (put an "X" next to an item) -->
+
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Other
+
+### Screenshots
+
+<!-- If your PR includes UI changes, please provide before/after screenshots. If there are any other images that add context to the PR, add them here as well -->
+
+**Before**
+
+**After**
@@ -0,0 +1,4 @@
+name: CodeQL config
+
+paths-ignore:
+  - assets/lib/**
@@ -0,0 +1,315 @@
+# FixIt 编码标准和指导原则
+
+本文档定义了 FixIt 主题项目的编码标准、最佳实践和开发指导原则。所有贡献者和 AI 助手在参与项目开发时都应遵循这些规范。
+
+## 项目概述
+
+FixIt 是一个面向 Hugo 静态网站生成器的现代化、响应式主题。项目基于以下技术栈：
+
+- **Hugo**: 静态网站生成器（≥ 0.156.0）
+- **SCSS**: CSS 预处理器，用于样式开发
+- **JavaScript**: ES6+ 标准，用于前端交互功能
+- **Go Templates**: Hugo 模板引擎
+- **Node.js**: 开发环境和构建工具
+- **pnpm**: 包管理器
+
+## 目录结构约定
+
+```
+FixIt/
+├── apps/               # 最小化站点
+│   ├── demo/           # 演示站点
+│   └── test/           # 测试站点
+├── archetypes/         # 内容模板
+├── assets/             # 主题资源文件
+│   ├── css/            # SCSS 样式文件
+│   ├── js/             # JavaScript 文件
+│   ├── images/         # 图像资源
+│   └── lib/            # 第三方库
+├── i18n/               # 国际化翻译文件
+├── layouts/            # Hugo 模板文件
+│   ├── _markup/        # Hugo 渲染钩子
+│   ├── _partials/      # 可复用模板组件
+│   └── _shortcodes/    # 自定义短代码
+├── packages/           # 主题相关包
+├── static/             # 静态文件
+├── hugo.toml           # 主题默认配置
+└── package.json        # npm 脚本和依赖
+```
+
+## SCSS/CSS 编码规范
+
+### 文件组织结构
+
+1. **主入口文件**: `assets/css/style.scss`
+2. **变量文件**: `assets/css/_variables.scss` - 全局变量定义
+3. **覆写文件**: `assets/css/_override.scss` - 用户自定义覆写
+4. **组织结构**:
+   - `_core/`: 核心样式（基础、布局、媒体查询等）
+   - `_mixin/`: SCSS mixins 和函数
+   - `_page/`: 页面特定样式
+   - `_partials/`: 组件样式
+   - `_shortcodes/`: 短代码样式
+
+### 命名约定
+
+1. **CSS 类名**: 使用 BEM 方法论或语义化命名
+
+   ```scss
+   .header-desktop {}
+   .menu-item {}
+   .single-title {}
+   .post-tag {}
+   ```
+
+2. **SCSS 变量**: 使用连字符分隔，语义化命名
+
+   ```scss
+   $global-font-family: system-ui, sans-serif;
+   $code-background-color: #f6f8fa;
+   $header-height: 3.5rem;
+   ```
+
+3. **CSS 自定义属性**: 使用前缀约定
+
+   ```scss
+   $prefix: fi-;
+   $rootPrefix: --fi-;
+   ```
+
+### 样式组织原则
+
+1. **主题切换支持**: 使用 CSS 变量实现主题切换
+
+   ```scss
+   .element {
+     color: var(#{$rootPrefix}global-font-color);
+   }
+   ```
+
+2. **Mixin 使用**: 提高代码复用性
+
+   ```scss
+   @include border-radius;
+   @include transition(all 0.2s ease);
+   @include blur;
+   ```
+
+### 代码质量要求
+
+1. **缩进**: 使用 2 个空格
+2. **注释**: 为复杂逻辑添加注释
+3. **颜色**: 使用变量而非硬编码颜色值
+4. **单位**: 优先使用相对单位（rem、em、%）
+
+## JavaScript 编码规范
+
+### 代码风格
+
+1. **ES6+ 标准**: 使用现代 JavaScript 语法
+2. **模块化**: 使用 ES6 模块系统
+
+### 文件组织
+
+1. **主题核心**: `assets/js/theme.js` - 主题核心逻辑
+2. **工具函数**: `assets/js/util.js` - 通用工具函数
+3. **特定功能**: 按功能划分独立模块
+
+### 编码实例
+
+```javascript
+// 使用 ES6 类
+export default class Util {
+  static copyText(text) {
+    // ...
+  }
+}
+
+// 主题类组织
+class FixIt {
+  constructor() {
+    this.config = window.config
+    this.scrollTop = Util.getScrollTop()
+  }
+
+  init() {
+    this.initTheme()
+    this.initComponents()
+  }
+}
+```
+
+### 最佳实践
+
+1. **错误处理**: 使用 try-catch 处理异常
+2. **异步操作**: 优先使用 async/await
+3. **事件处理**: 合理使用事件委托
+4. **性能优化**: 避免不必要的 DOM 操作
+
+## Hugo 模板规范
+
+### 模板组织
+
+1. **布局模板**: `layouts/` 目录下的主要模板
+2. **局部模板**: `layouts/_partials/` 下的可复用组件
+3. **短代码**: `layouts/_shortcodes/` 下的内容短代码
+
+### 编码约定
+
+1. **变量命名**: 使用驼峰命名法
+
+   ```go-html-template
+   {{- $footerConfig := .Site.Params.footer -}}
+   {{- $fingerprint := .Site.Store.Get "fingerprint" -}}
+   ```
+
+2. **注释规范**: 使用 Hugo 注释语法
+
+   ```go-html-template
+   {{- /* 这是模板注释 */ -}}
+   {{- /*
+     多行注释
+     可以跨越多行
+    */ -}}
+   ```
+
+3. **条件判断**: 清晰的条件结构
+
+   ```go-html-template
+   {{- if ne $config.enable false -}}
+     <!-- 内容 -->
+   {{- end -}}
+   ```
+
+4. **循环遍历**: 合理使用 range
+
+   ```go-html-template
+   {{- range $index, $value := .Pages -}}
+     <!-- 处理逻辑 -->
+   {{- end -}}
+   ```
+
+### 国际化处理
+
+1. **翻译函数**: 使用 `T` 函数
+
+   ```go-html-template
+   {{ T "header.switchTheme" }}
+   ```
+
+2. **多语言支持**: 考虑多语言环境
+
+   ```go-html-template
+   {{- if hugo.IsMultilingual -}}
+     <!-- 多语言逻辑 -->
+   {{- end -}}
+   ```
+
+## 开发工作流程
+
+### 环境设置
+
+1. **前置要求**:
+   - Node.js (≥ 20.0.0)
+   - Hugo Extended (≥ 0.156.0)
+   - pnpm (包管理器)
+
+2. **开发命令**:
+
+   ```bash
+   pnpm dev:demo      # 启动 demo 站点开发服务器
+   pnpm dev:test      # 启动 test 站点开发服务器
+   pnpm dev:docs      # 启动文档开发服务器（需有 fixit-docs 作为同级目录）
+   pnpm build:demo    # 构建 demo 站点
+   pnpm build:test    # 构建 test 站点
+   pnpm build         # 一键构建所有站点
+   pnpm preview       # 预览构建后的站点（需先构建）
+   ```
+
+### 代码质量
+
+1. **代码审查**: 提交前进行自我审查
+2. **测试验证**: 在多个环境中测试功能
+3. **文档更新**: 必要时更新相关文档
+4. **向后兼容**: 确保更改不破坏现有功能
+
+### Git 提交规范
+
+遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范：
+
+```
+feat: 新增功能
+fix: 修复 bug
+docs: 文档更新
+style: 代码格式调整
+refactor: 代码重构
+test: 测试相关
+chore: 构建过程或工具相关
+```
+
+## 性能优化指导
+
+### CSS 性能
+
+1. **选择器优化**: 避免过深的嵌套
+2. **媒体查询**: 合理组织响应式断点
+3. **动画优化**: 使用 transform 和 opacity
+4. **资源压缩**: 生产环境启用压缩
+
+### JavaScript 性能
+
+1. **延迟加载**: 非关键脚本使用 defer
+2. **事件优化**: 合理使用防抖和节流
+3. **内存管理**: 及时清理事件监听器
+4. **模块化**: 按需加载功能模块
+
+### Hugo 模板性能
+
+1. **缓存策略**: 合理使用 Hugo 缓存机制
+2. **资源处理**: 优化图片和静态资源
+3. **构建优化**: 减少不必要的模板处理
+
+## 可访问性要求
+
+1. **语义化 HTML**: 使用正确的 HTML 标签
+2. **ARIA 属性**: 为复杂组件添加 ARIA 支持
+3. **键盘导航**: 确保键盘可访问性
+4. **颜色对比**: 满足 WCAG 对比度要求
+5. **屏幕阅读器**: 提供适当的文本替代
+
+## 浏览器兼容性
+
+1. **目标浏览器**: 支持现代浏览器
+2. **渐进增强**: 基础功能向下兼容
+3. **特性检测**: 使用特性检测而非浏览器检测
+4. **Polyfill**: 必要时提供 polyfill 支持
+
+## 安全考虑
+
+1. **XSS 防护**: 正确处理用户输入
+2. **CSRF 保护**: 表单提交安全
+3. **内容安全**: 合理设置 CSP 策略
+4. **依赖安全**: 定期更新依赖包
+
+## 文档要求
+
+1. **代码注释**: 复杂逻辑必须注释
+2. **API 文档**: 公共方法需要文档
+3. **使用示例**: 提供清晰的使用示例
+4. **更新日志**: 重要更改记录在 CHANGELOG
+
+## 第三方库管理
+
+1. **依赖选择**: 优先选择轻量、维护活跃的库
+2. **版本管理**: 及时更新安全补丁
+3. **许可证**: 确保许可证兼容性
+4. **定制化**: 必要时进行本地化修改
+
+## 贡献指导
+
+1. **讨论优先**: 重大更改前先讨论
+2. **小步迭代**: 避免大规模重构
+3. **测试覆盖**: 新功能需要充分测试
+4. **文档同步**: 功能和文档同时更新
+
+遵循这些编码标准将有助于维护代码质量，提高开发效率，并确保项目的长期可维护性。
@@ -1,12 +1,48 @@
 # To get started with Dependabot version updates, you'll need to specify which
 # package ecosystems to update and where the package manifests are located.
 # Please see the documentation for all configuration options:
-# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates

 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: npm # See documentation for possible values
+    directory: / # Location of package manifests
    schedule:
-      interval: "monthly"
+      interval: monthly
    open-pull-requests-limit: 1000
+    assignees:
+      - Lruihao
+    labels:
+      - dependencies
+    ignore:
+      - dependency-name: '@types/node'
+        update-types:
+          - 'version-update:semver-major'
+    groups:
+      npm-development:
+        dependency-type: development
+        update-types:
+          - minor
+          - patch
+      npm-production:
+        dependency-type: production
+        update-types:
+          - patch
+  - 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
@@ -0,0 +1,19 @@
+changelog:
+  exclude:
+    labels:
+      - ignore-for-release
+    authors:
+      - dependabot
+  categories:
+    - title: New features
+      labels:
+        - feature
+    - title: Enhancement
+      labels:
+        - enhancement
+    - title: Fixes
+      labels:
+        - bug
+    - title: Other Changes
+      labels:
+        - '*'
@@ -1,45 +0,0 @@
-name: Update Algolia Search Index
-
-on:
-  push:
-    branches:
-      - master
-  workflow_dispatch:
-
-jobs:
-  algolia-atomic:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          submodules: true  # Fetch Hugo themes (true OR recursive)
-          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
-
-      - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
-        with:
-          hugo-version: 'latest'
-          extended: true
-
-      - name: Build
-        run: |
-            npm install
-            npm run build
-
-      - name: Update Algolia Index (en)
-        env:
-          ALGOLIA_APP_ID: YKOM6PKLUY
-          ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
-          ALGOLIA_INDEX_NAME: 'index.en'
-          ALGOLIA_INDEX_FILE: './exampleSite/public/index.json'
-        run: |
-          npm run algolia
-
-      - name: Update Algolia Index (zh-cn)
-        env:
-          ALGOLIA_APP_ID: YKOM6PKLUY
-          ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
-          ALGOLIA_INDEX_NAME: 'index.zh-cn'
-          ALGOLIA_INDEX_FILE: './exampleSite/public/zh-cn/index.json'
-        run: |
-          npm run algolia
@@ -1,21 +0,0 @@
-name: Hugo build check
-on:
-  pull_request:
-    branches: [ master ]
-  workflow_dispatch:
-jobs:
-  Actions-Hugo-Check:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out repository code
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive  # Fetch Hugo themes (true OR recursive)
-          fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
-      - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
-        with:
-          hugo-version: latest
-          extended: true
-      - name: Build Hugo static files
-        run: hugo -v --source=exampleSite --themesDir ../.. --gc
@@ -9,14 +9,17 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: CodeQL

 on:
+  push:
+    branches:
+      - main
  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ master ]
+    branches:
+      - main
  schedule:
-    - cron: '45 0 * * 1'
+    - cron: '30 18 * * 5'

 jobs:
  analyze:
@@ -26,40 +29,44 @@ 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@v6
+        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
-      with:
-        languages: ${{ matrix.language }}
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v4
+        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.
        # queries: ./path/to/local/query, your-org/your-repo/queries@main

-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      # 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@v4

-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl

-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language

-    #- run: |
-    #   make bootstrap
-    #   make release
+      # - run: |
+      #   make bootstrap
+      #   make release

-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v4
@@ -0,0 +1,40 @@
+name: Generate hugo-fixit component list
+on:
+  schedule: # Run workflow automatically
+    - cron: '0 0 * * *' # Runs every day at 00:00 UTC
+  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
+permissions:
+  contents: write # To write the generated contents to the readme
+  pull-requests: write # To create a pull request
+
+jobs:
+  generate-component-list:
+    if: github.repository == 'hugo-fixit/FixIt'
+    name: Update this repo's README with the list of hugo-fixit theme components
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Generate hugo-fixit component list
+        uses: hugo-fixit/action-component-list@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          comment_tag_name: HUGO_FIXIT_COMPONENTS
+          readme_path: 'README.md,README.zh-cn.md'
+          template: "- [{$repo.name}]({$repo.html_url})\\\n  {$repo.description}"
+      # - name: Commit changes
+      #   uses: stefanzweifel/git-auto-commit-action@v5
+      #   with:
+      #     commit_message: 'docs(readme): update hugo-fixit component list'
+      #     commit_author: 'github-actions[bot] <github-actions[bot]@users.noreply.github.com>'
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v8
+        with:
+          title: Update hugo-fixit component list
+          commit-message: 'docs(readme): update hugo-fixit component list'
+          body: This PR updates the hugo-fixit component list in the README.
+          base: main
+          branch: update-component-list
+          labels: documentation
+          reviewers: Lruihao
@@ -0,0 +1,49 @@
+name: Release for new tag
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+  workflow_dispatch:
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0 # Fetch all history for generating release notes
+
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+          cache: pnpm
+
+      - name: Install fixit-cli
+        run: pnpm install -g fixit-cli
+      - name: Split theme configuration
+        run: |
+          fixit split
+          tar -zcvf config_toml.tar.gz config
+          rm -rf config
+          fixit split -y
+          tar -zcvf config_yaml.tar.gz config
+          rm -rf config
+
+      - name: Generate release notes
+        run: |
+          pnpm install --frozen-lockfile
+          pnpm changelog --starting-version ${{ github.ref_name }}
+          sed -i '1,4d' CHANGELOG.md
+
+      - name: GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          draft: true
+          body_path: CHANGELOG.md
+          files: |
+            config_toml.tar.gz
+            config_yaml.tar.gz
@@ -1,24 +1,32 @@
 # Hugo default output directory
 public/
-/exampleSite/resources/
-
-node_modules/
-build/
 resources/

-## OS Files
-# Windows
+# Hugo
+.hugo_build.lock
+jsconfig.json
+
+# NPM
+node_modules/
+.eslintcache
+
+# VSCode
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+
+# 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
+.stash/
@@ -0,0 +1,3 @@
+tag-version-prefix="v"
+ignore-workspace-root-check=true
+message="chore(release): %s"
@@ -0,0 +1 @@
+v20
@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "budparr.language-hugo-vscode",
+    "kaellarkin.hugo-shortcode-syntax",
+    "lruihao.hugo-partials-refs",
+    "tamasfe.even-better-toml"
+  ]
+}
@@ -0,0 +1,85 @@
+{
+  "todo-tree.tree.scanMode": "workspace only",
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
+  },
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    {
+      "rule": "style/*",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "format/*",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-indent",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-spacing",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-spaces",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-order",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-dangle",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-newline",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*quotes",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*semi",
+      "severity": "off",
+      "fixable": true
+    }
+  ],
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "go-html-template",
+    "javascript",
+    "typescript",
+    "html",
+    "markdown",
+    "json",
+    "json5",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "css",
+    "scss"
+  ]
+}
@@ -1,76 +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.13 [2022.3.14]
-
- :recycle: Refactor: page layout ([#65](https://github.com/Lruihao/FixIt/issues/65))
- :tada: Feat: add Artalk comment support ([#54](https://github.com/Lruihao/FixIt/issues/54), @hiifong[#57](https://github.com/Lruihao/FixIt/pull/57))
- :tada: Feat: add Waline comment support ([#36](https://github.com/Lruihao/FixIt/issues/36))
- :tada: Feat: add Twikoo comment support ([#64](https://github.com/Lruihao/FixIt/issues/64))
- :sparkles: Feat: add recently updated section ([#50](https://github.com/Lruihao/FixIt/issues/50))
- :sparkles: Feat: add article expiration reminder support ([#51](https://github.com/Lruihao/FixIt/issues/51))
- :sparkles: Feat: add pageStyle option ([#62](https://github.com/Lruihao/FixIt/issues/62))
- :sparkles: Style: add media style for print view ([#61](https://github.com/Lruihao/FixIt/issues/61))
- :sparkles: Feat: add Gravatar mirror site support (@ctj12461[#66](https://github.com/Lruihao/FixIt/pull/66))
- :sparkles: Feat: add archive count display ([#33](https://github.com/Lruihao/FixIt/issues/33))
- :sparkles: Feat: add `details` shortcode ([#68](https://github.com/Lruihao/FixIt/issues/68))
- :sparkles: Feat: add `center-quote` shortcode ([#69](https://github.com/Lruihao/FixIt/issues/69))
- :sparkles: Feat: add markdown support for **title** parameter of the admonition shortcode
- :sparkles: Feat: add 9 newly supported social links ([#17](https://github.com/Lruihao/FixIt/issues/17))
- :zap: Perf: enhance highlight feature (GitHub syntax supported) and fix some css bugs ([#43](https://github.com/Lruihao/FixIt/issues/43))
-  - Inline Code
-  - Indented Code
-  - Block Fenced Code
-  - gist shortcode
- :sparkles: Feat: add `params.page.code.edit` option support ([#76](https://github.com/Lruihao/FixIt/issues/76))
- :mag: Feat: add 360 and sougou seo support
- :bug: Fix: remove source map of local libraries to avoid 404 error ([#67](https://github.com/Lruihao/FixIt/issues/67))
- :fire: Feat: remove shortcode cardlink ([#42](https://github.com/Lruihao/FixIt/issues/42))
- :lipstick: Style: more refined theme style ([#40](https://github.com/Lruihao/FixIt/issues/40))
- :pencil2: Style: fix typo *discription* should be **description** ([#60](https://github.com/Lruihao/FixIt/issues/60))
- :wrench: Chore(update-libs):
-  - Update cell-watermark 1.0.3 and CDN support (fontFamily supported)
-  - Update animate.css 3.7.2 -> 4.1.1 ([#74](https://github.com/Lruihao/FixIt/issues/74))
- :wrench: Chore: add atomic-algolia for exampleSite ([#70](https://github.com/Lruihao/FixIt/issues/70))
- **Full Changelog:** [`v0.2.12...v0.2.13`](https://github.com/Lruihao/FixIt/compare/v0.2.12...v0.2.13)
-
-## v0.2.12 [2022-1-27]
-
- :tada: Feat: add PWA support
- :tada: Feat: add Watermark support ([#16](https://github.com/Lruihao/FixIt/issues/16))
- :tada: Feat: add "不蒜子" count and site run time ([#18](https://github.com/Lruihao/FixIt/issues/18))
- :sparkles: Feat: add pangu.js support ([#20](https://github.com/Lruihao/FixIt/issues/20))
- :sparkles: Feat: add public network security config (only in China) ([#15](https://github.com/Lruihao/FixIt/issues/15))
- :sparkles: Feat: add CustomJS option ([#24](https://github.com/Lruihao/FixIt/issues/24))
- :sparkles: Feat: add theme embedded archeTypes
- :mag: Feat(SEO): optimize SEO meta ([#30](https://github.com/Lruihao/FixIt/issues/30))
- :zap: Feat: remove lib smooth-scroll ([#1](https://github.com/Lruihao/FixIt/issues/1)) replaced by CSS native properties scroll-margin, scroll-behavior ([#39](https://github.com/Lruihao/FixIt/issues/39))
- :zap: Perf: merge shortcode cardlink (deprecated v0.2.13) into shortcode link and add 'download' param ([#42](https://github.com/Lruihao/FixIt/issues/42))
- :zap: Perf: optimize JS loading ([#25](https://github.com/Lruihao/FixIt/issues/25))
- :recycle: Refactor: header title DOM and add subtitle option ([#26](https://github.com/Lruihao/FixIt/issues/26))
- :bug: Fix: set mermaid theme as 'default' when initialization ([#38](https://github.com/Lruihao/FixIt/issues/38))
- :bug: Fix: typeit print code error ([#19](https://github.com/Lruihao/FixIt/issues/19))
- :bug: Fix: pre element overflow error ([#29](https://github.com/Lruihao/FixIt/issues/29))
- :bug: Fix: toc display error without content header ([#21](https://github.com/Lruihao/FixIt/issues/21))
- :lipstick: Style: style detail adjustments, change scroll-behavior to smooth, taxonomy, header, footer, shortcode style etc.
- :pencil: Docs: improve demo site documentation ([#37](https://github.com/Lruihao/FixIt/issues/37))
- :wrench: Chore: add commands `fixit_checker.sh`
- :wrench: Chore(i18n): change some translations
- :arrow_up: Chore: update all third-party libraries
- **Full Changelog:** [`v0.2.11...v0.2.12`](https://github.com/Lruihao/FixIt/compare/v0.2.11...v0.2.12)
-## v0.2.11 [2021-12-19]
-
-> :tada: The beginning of FixIt to fix the theme LoveIt.
-
- :sparkles: Feat: add cardlink shortcode ([Lruihao/hugo-blog@`df9eca2`](https://github.com/Lruihao/hugo-blog/commit/df9eca26af43287748fd8d4654014357a8269b0b)) 
- :tada: Feat: add friends layout template
- :wrench: Chore(i18n): add translations for Traditional Chinese ([Lruihao/hugo-blog@`df9eca2`](https://github.com/Lruihao/hugo-blog/commit/b86157d8b84830bda415ab2488580afd843acac2))
- :bug: Fix: mobile style ([Lruihao/hugo-blog#19](https://github.com/Lruihao/hugo-blog/issues/19))
- :bug: Style: fix content h1 style ([Lruihao/hugo-blog#8](https://github.com/Lruihao/hugo-blog/issues/8))
- :bug: Fix: `.params.author` should be `$params.author`  ([Lruihao/hugo-blog#1](https://github.com/Lruihao/hugo-blog/issues/1))
- **Full Changelog:** [`v0.2.10...v0.2.11`](https://github.com/Lruihao/FixIt/compare/v0.2.10...v0.2.11)
-
-## v0.2.10 :arrow_down: [2020-5-29 before]
-
-Thanks [dillonzq/LoveIt](https://github.com/dillonzq/LoveIt/releases)
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:

-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
  overall community

 Examples of unacceptable behavior include:

-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
  advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
  address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
  professional setting

 ## Enforcement Responsibilities
@@ -1,74 +1,163 @@
+# CONTRIBUTING
+
+Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contributing and engaging in the discussions.
+
+## Prerequisites
+
+Before you start contributing, make sure you have the following tools installed:
+
+- **Node.js** (>= 20.0.0) - Required for package management and build tools
+- **Hugo Extended** (>= 0.156.0) - The static site generator
+- **pnpm** - Package manager (recommended)
+
+You can check your installed versions:
+
+```bash
+node --version
+hugo version
+pnpm --version
+```
+
 ## 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.

-```
-npm install
+```bash
+pnpm install
 ```

 And now you are ready to go!

-Here are some useful commands.
+Here are some useful commands for development:

-```
-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
+### Development
+
+```bash
+# Start demo site development server
+pnpm dev:demo
+# Start test site development server
+pnpm dev:test
+# Start documentation development server (requires fixit-docs as sibling directory)
+pnpm dev:docs
 ```

-Finally, create a new pull request at https://github.com/Lruihao/FixIt/pulls to submit your contribution 🎉
+> [!TIP]
+>
+> - Add `-e production` to the development command to check the production environment, e.g. `pnpm dev:test -e production`.
+> - For documentation-related theme changes, it is recommended to clone both `FixIt` and `fixit-docs` as sibling directories.

-## Git standard for developers
+### Building

-### Branches
+```bash
+# Build demo site
+pnpm build:demo
+# Build test site
+pnpm build:test
+# Build all sites
+pnpm build
+```

-| Branch | Description |
-| :-- | :-- |
-| master | _The branch open to the public and release versions_ |
-| RC branch | _The development branch of the next version, e.g. v0.2.12-RC_ |
-| single feature | _The branch to enhancements or fixes_ |
+### Preview

-### Merge events
+```bash
+# Preview the built site locally (requires build first)
+pnpm preview
+```

-| event | merge |
-| :-- | :-- |
-| release | **RC branch => master:** `--rebase` |
-| PR | **others:master => master:** `--rebase` |
-| single feature| **feature branch => RC branch:** `--merge` |
+## Project Structure

-### Commit message
+Understanding the project structure will help you contribute more effectively:

-#### Format
-> {emoji} {type}: {subject within 50 words} (#{issue/pull request})
+```
+FixIt/
+├── apps/               # Minimal sites
+│   ├── demo/           # Demo site
+│   └── test/           # Test site
+├── archetypes/         # Content templates
+├── assets/             # Theme assets
+│   ├── css/            # SCSS stylesheets
+│   ├── js/             # JavaScript files
+│   ├── images/         # Image assets
+│   └── lib/            # Third-party libraries
+├── i18n/               # Internationalization files
+├── layouts/            # Hugo template files
+│   ├── _markup/        # Hugo render hooks
+│   ├── _partials/      # Reusable template components
+│   └── _shortcodes/    # Custom shortcodes
+├── packages/           # Theme-related packages
+├── static/             # Static files
+├── hugo.toml           # Default theme configuration
+└── package.json        # npm scripts and dependencies
+```

-#### Emoji
- https://gitmoji.dev
- [vscode plugin](https://github.com/maixiaojie/git-emoji-zh.git)
- utools plugin `GitEmoji`
+## Development Workflow

-#### Message
+1. **Make your changes** in the appropriate directories
+2. **Test locally** using `pnpm dev` or `pnpm test`
+3. **Check different environments** with production builds
+4. **Verify documentation** changes with `pnpm dev:docs` (if applicable)
+5. **Commit your changes** following the commit message format below

-| Emoji                                         | Type     | Example                                                      | Description (No Ambiguous)                                   |
-| :-------------------------------------------- | :------- | :----------------------------------------------------------- | :----------------------------------------------------------- |
-| :tada:  <br>:sparkles:                        | Feat     | Feat: add {feature}                                          | new feature                                                  |
-| :truck:                                       |          | Feat: adjust/migrate {feature name}，{change details}        | For the adjustment feature, it is necessary to describe the current situation (before) and after adjustment (after) |
-| :fire:                                        |          | Feat: delete {feature name}, {deletion reason}               | If the feature is deleted, the reason for deletion must be explained |
-| :bug: <br>:construction: <br>:rotating_light: | Fix      | Fix: fix {bug description}                                   | Fix known bugs                                               |
-| :art: <br>:lipstick: <br>:pencil2:            | Style    | Style: Typesetting/CSS style {optimizing content}            | Changes that do not affect code operation, such as code layout and style change |
-| :recycle:                                     | Refactor | Refactor: override {feature name}                            | It is neither a new function nor a code change to fix a bug. Simply rewriting the code of a function does not affect the function result |
-| :zap:                                         | Perf     | Perf: improve performance {function name}, {improve content} | Optimize code performance                                    |
-| :rewind:                                      | Revert   | Revert: restore version {commit message of restore version}  | Restore the version of one commit                            |
-| :pencil: <br>:pencil2:                              | Docs     | Docs: revise comments/update documents                     | Adjustment of documents and notes                            |
-| :wrench:                                      | Chore    | Chore: update plugin version                                 | Changes in the construction process or auxiliary tools       |
+## Pull Request Guidelines
+
+- Create a feature branch from `main`
+- Make your changes with clear, focused commits
+- Test your changes thoroughly
+- Update documentation if needed
+- Submit a pull request with a clear description
+
+Finally, create a new pull request at <https://github.com/hugo-fixit/FixIt/pulls> to submit your contribution 🎉
+
+## Git Commit Guidelines
+
+We follow the [Conventional Commits](https://www.conventionalcommits.org/) specification for commit messages. This enables automatic changelog generation using our custom template: [conventional.hbs](https://github.com/Lruihao/auto-changelog-plus/blob/main/settings/conventional.hbs).
+
+> [!NOTE]
+>
+> Commits in a PR will normally be squashed into one commit, so you don't need to rebase locally.
+
+### Commit Message Format
+
+```
+<type>(<scope>): <subject>
+^      ^         ^
+|      |         |__ Subject: Concise description of the change (imperative mood, lowercase).
+|      |____________ Scope: The specific part of the codebase affected (optional but recommended).
+|___________________ Type: Indicates the kind of change.
+```
+
+### Allowed Types
+
+- `feat`: A new feature.
+- `fix`: A bug fix.
+- `refactor`: Code changes that neither fix a bug nor add a feature.
+- `chore`: Changes to the build process, auxiliary tools, libraries, documentation generation etc.
+- `docs`: Documentation only changes.
+- Other conventional types like `perf`, `style`, `test`, `ci`, `build` are also acceptable.
+
+### Allowed Scopes
+
+- `workflow`: CI/CD workflow changes (`.github/workflows/`)
+- `archetypes`: Content templates (`archetypes/`)
+- `assets`: Changes to theme assets like CSS, JS (`assets/`)
+- `i18n`: Internationalization and translation files (`i18n/`)
+- `layouts`: Root-level Hugo template files (`layouts/*.html`)
+- `config`: Theme configuration (`hugo.toml`, `theme.toml`)
+- _(All top-level directories in the layouts and packages directories)_
+- _(Consider adding other scopes as needed for better granularity)_
+
+### Examples
+
+- `feat(_shortcodes): add mapbox zoom control options`
+- `fix(_partials): avoid duplicate canonical link tags`
+- `docs(i18n): update translation key naming guidelines`
+- `ci(workflow): optimize preview deployment cache`
+- `refactor(assets): split theme initialization into smaller modules`
@@ -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-present Lruihao (https://lruihao.cn)

 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in
@@ -1,235 +1,326 @@
-# FixIt Theme | Hugo
+<!-- markdownlint-disable-file MD033 MD041 -->
+![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.png)

-[![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)
+<div align="center" class="ignore">
+  <p>
+    FixIt is a clean, elegant but advanced blog theme for <a href="https://gohugo.io/">Hugo</a>.<br>
+    <em><sub>Don't forget to leave a ⭐️ if you like this theme, thanks!</sub></em>
+  </p>
+  English |
+  <a href="/README.zh-cn.md">简体中文</a> |
+  <a href="https://fixit.lruihao.cn/zh-cn/ecosystem/hugo-fixit/fixit/?lang=chinese_traditional">繁體中文</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=french">Français</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=russian">Русский язык</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=spanish">Español</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=hindi">हिन्दी</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=deutsch">deutsch</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=korean">한국어</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">しろうと</a>
+</div>

-English README | [简体中文说明](https://github.com/Lruihao/FixIt/blob/master/README.zh-cn.md)
+<a title="FixIt website" href="https://fixit.lruihao.cn"><img align="right" alt="FixIt logo" width="70" height="70" src="https://avatars.githubusercontent.com/u/110414864?s=200&v=4"></a>

-> **FixIt** is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/).
+# FixIt

-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](https://github.com/dillonzq/LoveIt) Theme, [KeepIt](https://github.com/Fastbyte01/KeepIt) Theme and [LeaveIt](https://github.com/liuzc/LeaveIt) Theme.

-[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.
+[![Build](https://img.shields.io/github/deployments/hugo-fixit/FixIt/Production?style=flat&label=Build&logo=vercel)](https://demo.fixit.lruihao.cn/)
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat&label=Release&logo=github&include_prereleases)](https://github.com/hugo-fixit/FixIt/releases)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.156.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat&label=License)](/LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/hugo-fixit/FixIt?style=social)](https://github.com/hugo-fixit/FixIt)
+[![Gitee star of FixIt](https://gitee.com/lruihao/FixIt/badge/star.svg)](https://gitee.com/lruihao/FixIt/stargazers)

-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.
+## Live Preview

-![Hugo Theme FixIt](https://github.com/Lruihao/FixIt/raw/master/images/Apple-Devices-Preview.png)
+<p align="center">
+  💟 <a href="https://fixit.lruihao.cn">Docs</a> | ❇️ <a href="https://demo.fixit.lruihao.cn/test/">Test</a> | 🚼 <a href="https://demo.fixit.lruihao.cn">Demo</a> | 🆕 <a href="https://hugo-fixit.github.io/hugo-fixit-starter/">Starter</a>
+<br>
+<br>
+  More FixIt examples <a href="https://fixit.lruihao.cn/showcase/">here</a>.
+</p>

-## 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.
+## Usage

-### [Demo Site](https://fixit.lruihao.cn)
-To see this theme in action, here is a live [demo site](https://fixit.lruihao.cn) which is rendered with **FixIt** theme.
+### Documentation

-### [Documentation](https://fixit.lruihao.cn/categories/documentation/)
-Build Documentation Locally:
+Head to the [Quick Start](https://fixit.lruihao.cn/documentation/getting-started/quick-start/) page for a step-by-step guide on how to create a new website with FixIt.
+
+Outline: [Installation](https://fixit.lruihao.cn/documentation/installation/) ➜ [Getting Started](https://fixit.lruihao.cn/documentation/getting-started/) ➜ [Content Management](https://fixit.lruihao.cn/documentation/content-management/) ➜ [Advanced Usage](https://fixit.lruihao.cn/documentation/advanced/)
+
+### Starter Wizard
+
+We provided a CLI tool to help you create a new project with FixIt by a single command.

 ```bash
-hugo server --source=exampleSite
+pnpx fixit-cli create my-blog
 ```

-Of course, you can also read the [FixIt wiki](https://github.com/Lruihao/FixIt/wiki) directly.
+[![asciicast](https://asciinema.org/a/697494.svg)](https://asciinema.org/a/697494)

-## Migrate from LoveIt
+### Templates

-If you are currently using the LoveIt theme (or some other themes), it is very easy to migrate to FixIt.
+Click the following links to generate a new repository with template:

-You can add this repo as a submodule of your site directory.
+| Template                                      | repository                        | Generate link                  |
+| :-------------------------------------------- | :-------------------------------- | :----------------------------: |
+| A quick-start template base on Hugo Modules.  | [hugo-fixit-starter][starter]     | [Click][starter:generate]      |
+| A quick-start template base on Git submodule. | [hugo-fixit-starter1][starter1]   | [Click][starter1:generate]     |
+| Build multilingual sites using Fixit theme.   | [docs][docs]                      | [Click][docs:generate]         |
+| Customize with FixIt theme.                   | [Lruihao/hugo-blog][lruihao-blog] | [Click][lruihao-blog:generate] |

-```bash
-git submodule add https://github.com/Lruihao/FixIt.git themes/FixIt
-```
-
-And later you can update the submodule in your site directory to the latest commit using this command:
-
-```bash
-git submodule update --remote --merge
-```
-
-Or use shell command `fixit_checker.sh` to update and commit in the theme directory.
-
-```bash
-sh fixit_checker.sh
-```
-
-Next, go to the `config.toml` and change the default theme to `FixIt`.
-
-```diff
- theme = "LoveIt"
-+ theme = "FixIt"
-```
-
-Now the migration is finished and everything is ready 🎉
-
-## Why choose FixIt
-
-* Custom **Header**
-* Custom **CSS Style**
-* A new **home page**, compatible with the latest version of Hugo
-* A lot of **style detail adjustments,** including color, font size, margins, code preview style
-* More readable **dark mode**
-* Some beautiful **CSS animations**
-* Easy-to-use and self-expanding **table of contents**
-* More **social links**, **share sites** and **comment system**
-* **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
-* **Copy code** to clipboard with one click
-* Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
-* Extended Markdown syntax for **ruby annotation**
-* Extended Markdown syntax for **fraction**
-* **Mathematical formula** supported by [KaTeX](https://katex.org/)
-* **Diagram syntax** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
-* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
-* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* Embedded **music player** supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
-* **Bilibili** player supported
-* Kinds of **admonitions** shortcode supported
-* Custom style shortcodes supported
-* **CDN** for all third-party libraries supported
-* **PWA (Progressive Web App)** supported
-* **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
-* **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
-* **Card type** link shortcode
-* **Friends** page embedded template
-* ...
-
-In short,  
-if you prefer the design language and freedom of the FixIt theme,  
-if you want to use the extended Font Awesome icons conveniently,  
-if you want to embed mathematical formulas, flowcharts, music or Bilibili videos in your posts,  
-the FixIt theme may be more suitable for you.  
+[starter]: https://github.com/hugo-fixit/hugo-fixit-starter
+[starter:generate]: https://github.com/hugo-fixit/hugo-fixit-starter/generate
+[starter1]: https://github.com/hugo-fixit/hugo-fixit-starter1
+[starter1:generate]: https://github.com/hugo-fixit/hugo-fixit-starter1/generate
+[docs]: https://github.com/hugo-fixit/docs
+[docs:generate]: https://github.com/hugo-fixit/docs/generate
+[lruihao-blog]: https://github.com/Lruihao/hugo-blog
+[lruihao-blog:generate]: https://github.com/Lruihao/hugo-blog/generate

 ## Features

+<details>
+<summary>Click to view.</summary>
+
 ### Performance and SEO

-* Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
-* Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
-* **[Google Analytics](https://analytics.google.com/analytics)** supported
-* **[Fathom Analytics](https://usefathom.com/)** supported
-* 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
+- **[Baidu Analytics](https://tongji.baidu.com/)** supported
+- **[Umami Analytics](https://umami.is/)** supported
+- **[Plausible Analytics](https://plausible.io/)** supported
+- **[Cloudflare Web Analytics](https://www.cloudflare.com/web-analytics)** supported
+- **[Splitbee Analytics](https://splitbee.io)** supported
+- Search engine **verification** supported (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
+- **CDN** for third-party libraries supported

 ### 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 **73** social links supported
-* Up to **28** share sites supported
-* **Disqus** comment system supported by [Disqus](https://disqus.com)
-* **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
-* **Valine** comment system supported by [Valine](https://valine.js.org/)
-* **Waline** comment system supported by [Waline](https://waline.js.org/)
-* **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
-* **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
-* **Commento** comment system supported by [Commento](https://commento.io/)
-* **Utterances** comment system supported by [Utterances](https://utteranc.es/)
-* **Artalk** comment system supported by [Artalk](https://artalk.js.org/)
-* **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)
+- **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 [cell-watermark](https://github.com/Lruihao/watermark)
-* **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
-* **Card type** link shortcode
-* **Friends** page embedded template
-* ...
+- **AI Summary**, **AI Search** and **AI Chatbot** supported by [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330)
+- **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/), [Fuse.js](https://fusejs.io/), CSE or [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330)
+- **Custom Search Engine (CSE)** supported by [Google](https://programmablesearchengine.google.com/)
+- **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**
+- Multiple **admonitions** shortcode or **alerts** extended Markdown syntax
+- **Tabs** and **Tab** shortcode with multiple design styles
+- **Mathematical formula** supported by [KaTeX](https://katex.org/) or [MathJax](https://www.mathjax.org)
+- **Diagrams** code fences extended and shortcode supported by [mermaid](https://github.com/knsv/mermaid)
+- **Interactive data visualization** shortcode and code fences extended supported by [ECharts](https://echarts.apache.org/)
+- **Timeline** code fences extended and shortcode supported
+- **File tree** code fences extended and shortcode supported
+- **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+- **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
+- **Bilibili player** and **Douyin player** shortcode
+- **Custom style** shortcode
+- **Custom script** shortcode
+- Open more **custom blocks**
+- **Animated typing** supported by [TypeIt](https://typeitjs.com/)
+- **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
+- **Web Watermark** supported by [cell-watermark](https://github.com/Lruihao/watermark)
+- **Chinese typesetting** supported by [pangu.js](https://github.com/vinta/pangu.js)
+- Options to **cache remote image** locally
+- ...
+
+</details>

 ## Multilingual and i18n

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

-* 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)
+<details>
+<summary>FixIt supports the following languages.</summary>

-## [Roadmap](https://github.com/Lruihao/FixIt/projects/1)
+- English
+- Simplified Chinese
+- Traditional Chinese
+- French
+- Polish
+- Brazilian Portuguese
+- Italian
+- Spanish
+- German
+- Serbian
+- Russian
+- Romanian
+- Vietnamese
+- Hindi
+- Japanese
+- Korean

-## [Changelog](https://github.com/Lruihao/FixIt/blob/master/CHANGELOG.md)
+</details>

-## Questions, ideas, bugs, pull requests
+## Theme Components

-All feedback is welcome! Head over to the [issue tracker](https://github.com/Lruihao/FixIt/issues).
+The FixIt theme balances **simplicity** and **extensibility** with extra [Hugo theme components](https://fixit.lruihao.cn/ecosystem/#-components) for customization.
+
+<details>
+<summary>Click to view.</summary>
+
+<!-- HUGO_FIXIT_COMPONENTS:START -->
+- [fixit-bundle](https://github.com/hugo-fixit/fixit-bundle)\
+  🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component.
+- [cmpt-flyfish](https://github.com/hugo-fixit/cmpt-flyfish)\
+  🐟 A canvas implemented animation effect of small fish swimming.
+- [cmpt-mdevtools](https://github.com/hugo-fixit/cmpt-mdevtools)\
+  Mobile devtools component powered by vConsole and eruda.
+- [cmpt-santa-hat](https://github.com/hugo-fixit/cmpt-santa-hat)\
+  A Christmas Easter Egg by JavaScript.
+- [cmpt-translate](https://github.com/hugo-fixit/cmpt-translate)\
+  🌐 A component for site automatic translation.
+- [component-projects](https://github.com/hugo-fixit/component-projects)\
+  🐙 Display your GitHub projects in the FixIt theme and generate blog posts from readme.
+- [hugo-atom-feed](https://github.com/hugo-fixit/hugo-atom-feed)\
+  Hugo theme component for ATOM feed custom Output Format.
+- [hugo-json-feed](https://github.com/hugo-fixit/hugo-json-feed)\
+  Hugo theme component for JSON feed custom Output Format.
+- [shortcode-asciinema](https://github.com/hugo-fixit/shortcode-asciinema)\
+  A Hugo theme component with asciinema-embed shortcode.
+- [shortcode-caniuse](https://github.com/hugo-fixit/shortcode-caniuse)\
+  A Hugo theme component with caniuse shortcode.
+- [shortcode-docs-bookmark](https://github.com/hugo-fixit/shortcode-docs-bookmark)\
+  🔖 Embed bookmark of FixIt Docs.
+- [shortcode-missing-translation](https://github.com/hugo-fixit/shortcode-missing-translation)\
+  A Hugo theme component with missing-translation shortcode.
+- [shortcode-mmt-netease](https://github.com/hugo-fixit/shortcode-mmt-netease)\
+  🎶 A Hugo theme component with a NetEase Cloud random comment shortcode.
+- [shortcode-rewards](https://github.com/hugo-fixit/shortcode-rewards)\
+  A Hugo theme component with reward-log or sponsor-log shortcode.
+<!-- HUGO_FIXIT_COMPONENTS:END -->
+
+</details>
+
+## Community
+
+All feedback is welcome! Head over to the [discussions][discussions], [Pull requests][pulls] and [issues][issues] tracker.
+
+| Official Community          | Description                     |
+| :-------------------------- | :------------------------------ |
+| [Discussions][discussions]  | GitHub discussion forum         |
+| [FixIt WeChat group][wx-mp] | Follow and reply "FixIt" to get |
+| [FixIt QQ group][qq-group]  | QQ group: `814031017`           |
+| [Hugo FixIt Planet][zsxq]   | Paid knowledge Planet           |
+
+[discussions]: https://github.com/hugo-fixit/FixIt/discussions
+[pulls]: https://github.com/hugo-fixit/FixIt/pulls
+[issues]: https://github.com/hugo-fixit/FixIt/issues
+[qq-group]: https://qm.qq.com/cgi-bin/qm/qr?k=awbwdTtSQ_-H5QGzeJxdWgv6JMbNehNM&jump_from=webapi
+[zsxq]: https://t.zsxq.com/GgKEW
+[wx-mp]: https://lruihao.cn/images/qr-wx-mp.webp
+
+## Contributing
+
+We welcome you to join the development of FixIt. Please see [contributing document](/CONTRIBUTING.md). 🤗
+
+Also, we welcome Issue or PR to our [official-components](https://github.com/hugo-fixit).
+
+> [!note]
+> When contributing, please first discuss the change you wish to make via a discussion on this repository before making the actual change.
+
+## Acknowledgements
+
+Thanks to the support of [all contributors](https://github.com/hugo-fixit/FixIt/graphs/contributors)!
+
+Thanks to the [Hugo DoIt](https://github.com/HEIGE-PCloud/DoIt) theme and [Hexo NexT](https://github.com/next-theme/hexo-theme-next) theme for inspiration and reference.
+
+<details>
+<summary>Thanks to all the open source projects used in the FixIt 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/)
+- [MathJax](https://www.mathjax.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/)
+- [Vercount](https://github.com/EvanNotFound/vercount)
+- [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)
+- [pace](https://github.com/CodeByZach/pace)
+- [xxhash-wasm](https://github.com/jungomi/xxhash-wasm)
+- [`<tab-container>` element](https://github.com/github/tab-container-element)
+- [`<json-viewer>` element](https://github.com/Lruihao/json-viewer-element)
+
+</details>

 ## License

-FixIt is licensed under the **MIT** license. Check the [LICENSE file](https://github.com/Lruihao/FixIt/blob/master/LICENSE) for details.
+FixIt is licensed under the **MIT** license. Check the [LICENSE file](/LICENSE) for details.

-Thanks to the authors of following resources included in the theme:
+## Sponsor Support

-* [normalize.css](https://github.com/necolas/normalize.css)
-* [Font Awesome](https://fontawesome.com/)
-* [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
-* [autocomplete.js](https://github.com/algolia/autocomplete.js)
-* [Lunr.js](https://lunrjs.com/)
-* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [lazysizes](https://github.com/aFarkas/lazysizes)
-* [object-fit-images](https://github.com/fregante/object-fit-images)
-* [Twemoji](https://github.com/twitter/twemoji)
-* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* [clipboard.js](https://github.com/zenorocha/clipboard.js)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
-* [TypeIt](https://typeitjs.com/)
-* [KaTeX](https://katex.org/)
-* [mermaid](https://github.com/knsv/mermaid)
-* [ECharts](https://echarts.apache.org/)
-* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* [APlayer](https://github.com/MoePlayer/APlayer)
-* [MetingJS](https://github.com/metowolf/MetingJS)
-* [Gitalk](https://github.com/gitalk/gitalk)
-* [Valine](https://valine.js.org/)
-* [cookieconsent](https://github.com/osano/cookieconsent)
-* [cell-watermark](https://github.com/Lruihao/watermark)
-* [pangu.js](https://github.com/vinta/pangu.js)
-* [Artalk](https://artalk.js.org/)
-* [Waline](https://waline.js.org/)
-* [Twikoo](https://twikoo.js.org/)
+If you enjoy the theme, please consider buying me a cup of coffee ☕️. Thanks!
+
+- [WeChat Pay](/images/wechatpay.jpg)
+- [Alipay](/images/alipay.jpg)
+- [PayPal](https://paypal.me/Lruihao)
+
+Thanks to the following sponsors for their great support:
+
+- [translate.js](https://github.com/xnx3/translate) sponsored [Enterprise Translation Channel](https://translate.zvo.cn/4087.html).

 ## Author

-[Lruihao](https://lruihao.cn)
+[Lruihao](https://github.com/Lruihao "Follow me on GitHub")
@@ -1,234 +1,326 @@
-# FixIt 主题 | Hugo
+<!-- markdownlint-disable-file MD033 MD041 -->
+![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.png)

-[![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)
+<div align="center" class="ignore">
+  <p>
+    FixIt 是一个简洁、优雅且高效的 <a href="https://gohugo.io/">Hugo</a> 博客主题。<br>
+    <em><sub>如果你喜欢这个主题，别忘了留下一颗 ⭐️ 哦，谢谢！</sub></em>
+  </p>
+  <a href="/README.md">English</a> |
+  简体中文 |
+  <a href="https://fixit.lruihao.cn/zh-cn/ecosystem/hugo-fixit/fixit/?lang=chinese_traditional">繁體中文</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=french">Français</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=russian">Русский язык</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=spanish">Español</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=hindi">हिन्दी</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=deutsch">deutsch</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=korean">한국어</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">しろうと</a>
+</div>

-[English README](https://github.com/Lruihao/FixIt/blob/master/README.md) | 简体中文说明
+<a title="FixIt 官网" href="https://fixit.lruihao.cn/zh-cn/"><img align="right" alt="FixIt logo" width="70" height="70" src="https://avatars.githubusercontent.com/u/110414864?s=200&v=4"></a>

-> [FixIt](https://github.com/Lruihao/FixIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
+# FixIt

-它的原型基于 [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) 主题。

-[LoveIt 主题](https://github.com/dillonzq/LoveIt) 对我们来说是一个很棒的 Hugo 主题，很抱歉的是它的存储库已经停止维护很长一段时间了，所以我重建了一个名为 FixIt 的新主题，这样我可以更好地 **Fix It** 并使它用户体验更好。
+[![Build](https://img.shields.io/github/deployments/hugo-fixit/FixIt/Production?style=flat&label=Build&logo=vercel)](https://demo.fixit.lruihao.cn/)
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat&label=Release&logo=github&include_prereleases)](https://github.com/hugo-fixit/FixIt/releases)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.156.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat&label=License)](/LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/hugo-fixit/FixIt?style=social)](https://github.com/hugo-fixit/FixIt)
+[![Gitee star of FixIt](https://gitee.com/lruihao/FixIt/badge/star.svg)](https://gitee.com/lruihao/FixIt/stargazers)

-FixIt 主题继承了这些主题的优秀功能，并在此基础上添加了新的功能与优化，请阅读 [为什么选择 FixIt](#为什么选择-FixIt) 来了解更多。
+## 即时预览

-![Hugo Theme FixIt](https://github.com/Lruihao/FixIt/raw/master/images/Apple-Devices-Preview.png)
+<p align="center">
+  💟 <a href="https://fixit.lruihao.cn">Docs</a> | ❇️ <a href="https://demo.fixit.lruihao.cn/test/">Test</a> | 🚼 <a href="https://demo.fixit.lruihao.cn">Demo</a> | 🆕 <a href="https://hugo-fixit.github.io/hugo-fixit-starter/">Starter</a>
+<br>
+<br>
+  更多 FixIt 的例子参见 <a href="https://fixit.lruihao.cn/zh-cn/showcase/">这里</a>。
+</p>

-## 立即开始
-前往这篇 [文档](https://fixit.lruihao.cn/zh-cn/theme-documentation-basics/)，阅读关于安装与使用的详细指南。
+## 使用指南

-### 主题 [预览](https://fixit.lruihao.cn/zh-cn/)
-为了直观地浏览主题特性，这里有一个基于 **FixIt** 主题渲染的 [预览网站](https://fixit.lruihao.cn/zh-cn/)。
+### 主题文档

-### [文档](https://fixit.lruihao.cn/zh-cn/categories/documentation/)
-在本地构建文档：
-```bash
-hugo server --source=exampleSite
-```
+前往 [快速上手](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/quick-start/) 页面，了解如何使用 FixIt 主题创建一个新网站的详细步骤。

-当然，你也可以直接阅读 [FixIt 主题维基](https://github.com/Lruihao/FixIt/wiki)
+大纲：[安装篇](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/)

-## 从 LoveIt 迁移
+### 快速开始

-如果你现在正在使用 LoveIt 主题（或者一些其他的主题），你可以很容易地迁移至 FixIt。
-
-你可以将这个主题仓库添加为你的网站目录的子模块。
+我们提供了一个 CLI 工具，可以通过一个命令来创建一个新的 FixIt 项目。

 ```bash
-git submodule add https://github.com/Lruihao/FixIt.git themes/FixIt
+pnpx fixit-cli create my-blog
 ```

-之后，你可以在站点目录通过这条命令来将主题更新至最新版本：
+[![asciicast](https://asciinema.org/a/697494.svg)](https://asciinema.org/a/697494)

-```bash
-git submodule update --remote --merge
-```
+### 模板

-或者在主题目录中使用 shell 命令 `fixit_checker.sh` 将主题更新至最新版本：
+点击以下链接使用模板生成一个新的仓库：

-```bash
-sh fixit_checker.sh
-```
+| 模板                                | 仓库                              | 生成链接                          |
+| :---------------------------------- | :-------------------------------- | :-------------------------------: |
+| 基于 Hugo Modules 的快速入门模板。  | [hugo-fixit-starter][starter]     | [点击生成][starter:generate]      |
+| 基于 Git submodule 的快速入门模板。 | [hugo-fixit-starter1][starter1]   | [点击生成][starter1:generate]     |
+| 使用 Fixit 主题构建多语言网站。     | [docs][docs]                      | [点击生成][docs:generate]         |
+| 基于 FixIt 主题进行自定义设置。     | [Lruihao/hugo-blog][lruihao-blog] | [点击生成][lruihao-blog:generate] |

-接着，前往 `config.toml` 并将默认主题更改为 `FixIt`。
+[starter]: https://github.com/hugo-fixit/hugo-fixit-starter
+[starter:generate]: https://github.com/hugo-fixit/hugo-fixit-starter/generate
+[starter1]: https://github.com/hugo-fixit/hugo-fixit-starter1
+[starter1:generate]: https://github.com/hugo-fixit/hugo-fixit-starter1/generate
+[docs]: https://github.com/hugo-fixit/docs
+[docs:generate]: https://github.com/hugo-fixit/docs/generate
+[lruihao-blog]: https://github.com/Lruihao/hugo-blog
+[lruihao-blog:generate]: https://github.com/Lruihao/hugo-blog/generate

-```diff
- theme = "LoveIt"
-+ theme = "FixIt"
-```
+## 特色

-这样就完成了迁移工作，现在一切准备就绪 🎉
-
-## 为什么选择 FixIt
-
-* 自定义**标题栏**
-* 自定义 **CSS 样式**
-* 焕然一新的**主页**，已经兼容最新版 Hugo
-* 大量的**样式细节调整**，包括颜色、字体大小、边距、代码预览样式
-* 可读性更强的**深色模式**
-* 一些美观的 **CSS 动画**
-* 易用和自动展开的**文章目录**
-* 支持更多的**社交链接**、**网站分享**和**评论系统**
-* 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
-* 一键**复制代码**到剪贴板
-* 支持基于 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
-* 支持**上标注释**的扩展 Markdown 语法
-* 支持**分数**的扩展 Markdown 语法
-* 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
-* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表**生成功能
-* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化**生成功能
-* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** 地图显示功能
-* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌**音乐播放器**
-* 支持内嵌 **Bilibili** 视频
-* 支持多种**注释**的 shortcode
-* 支持自定义样式的 shortcode
-* 支持所有第三方库的 **CDN**
-* 支持**渐进式网页应用**
-* 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
-* 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
-* 支持**卡片式链接**的 shortcode
-* 支持**友情链接**的页面模板
-* ...
-
-所以，  
-如果你更偏好 FixIt 主题的设计语言和自由度，  
-如果你想便捷地使用扩展的 Font Awesome 图标，  
-如果你想在文章内嵌数学公式、流程图、音乐或是 Bilibili 视频，  
-那么，FixIt 主题可能是更适合你。  
-
-## 特性
+<details>
+<summary>点击展开</summary>

 ### 性能和 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/)**
+- 支持 **[百度统计](https://tongji.baidu.com/)**
+- 支持 **[Umami Analytics](https://umami.is/)**
+- 支持 **[Plausible Analytics](https://plausible.io/)**
+- 支持 **[Cloudflare Web Analytics](https://www.cloudflare.com/web-analytics)**
+- 支持 **[Splitbee Analytics](https://splitbee.io)**
+- 支持搜索引擎的**网站验证** (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
+- 支持所有第三方库的 **CDN**

 ### 外观和布局

-* **响应式**布局
-* **浅色/深色** 主题模式
-* 全局一致的**设计语言**
-* 支持**分页**
-* 易用和自动展开的**文章目录**
-* 支持**多语言**和国际化
-* 美观的 **CSS 动画**
+- **响应式**布局
+- **浅色/深色** 主题模式
+- 全局一致的**设计语言**
+- 支持**分页**
+- 易用和自动展开的**文章目录**
+- 支持**多语言**和国际化
+- 美观的 **CSS 动画**

 ### 社交和评论系统

-* 支持 **[Gravatar](https://gravatar.com)** 头像
-* 支持本地**头像**
-* 支持多达 **73** 种社交链接
-* 支持多达 **28** 种网站分享
-* 支持 **[Disqus](https://disqus.com)** 评论系统
-* 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
-* 支持 **[Valine](https://valine.js.org/)** 评论系统
-* 支持 **[Waline](https://waline.js.org/)** 评论系统
-* 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
-* 支持 **[Telegram comments](https://comments.app/) 评论**系统
-* 支持 **[Commento](https://commento.io/)** 评论系统
-* 支持 **[Utterances](https://utteranc.es/)** 评论系统
-* 支持 **[Artalk](https://artalk.js.org/)** 评论系统
-* 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统
+- 支持 **[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 许可横幅**
-* 支持**渐进式网页应用**
-* 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
-* 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
-* 支持**卡片式链接**的 shortcode
-* 支持**友情链接**的页面模板
-* ...
+- 支持基于 [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330) 的 **AI 摘要**、**AI 搜索** 和 **AI 智能客服**
+- 支持**渐进式网页应用**
+- 支持**二级菜单**
+- 支持**内容加密**（页面、局部）
+- 支持**友情链接**的页面模板
+- 支持基于 [algolia](https://www.algolia.com/)、[Fuse.js](https://fusejs.io/)、 **CSE** 或 [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330) 的**搜索**
+- 支持基于 [Google](https://programmablesearchengine.google.com/) 的**自定义搜索引擎 (CSE)**
+- 支持 **Twemoji**
+- 支持**代码高亮**
+- 一键**复制代码**到剪贴板
+- 支持基于 [lightgallery](https://github.com/sachinchoolur/lightgallery) 的**图片画廊**
+- 支持 **[Font Awesome](https://fontawesome.com/) 图标**的 Markdown 扩展语法
+- 支持**上标注释**的 Markdown 扩展语法
+- 支持**分数**的 Markdown 扩展语法
+- 支持多种 **admonitions** shortcode 或 **alerts** 的 Markdown 扩展语法
+- 支持**标签页**的 shortcode，提供多种设计样式
+- 支持基于 [KaTeX](https://katex.org/) 或 [MathJax](https://www.mathjax.org) 的**数学公式**
+- 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** 代码块扩展语法和 shortcode
+- 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** 代码块扩展语法和 shortcode
+- 支持 **Timeline** 的代码块扩展语法和 shortcode
+- 支持 **文件树** 的代码块扩展语法和 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
+- 支持**自定义模板块**
+- 支持基于 [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) 的**中文排版**
+- 支持本地**缓存远程图床图片**
+- ……
+
+</details>

 ## 多语言和国际化

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

-* 英语
-* 简体中文
-* 法语
-* 波兰语
-* 巴西葡萄牙语
-* 意大利语
-* 西班牙语
-* 德语
-* 塞尔维亚语
-* 俄语
-* 罗马尼亚语
-* 越南语
-* 繁体中文
-* [贡献一种新的语言](https://github.com/Lruihao/FixIt/pulls)
-[语言兼容性](https://fixit.lruihao.cn/zh-cn/theme-documentation-basics/#language-compatibility)
+<details>
+<summary>FixIt 支持下列语言。</summary>

-## [路线图](https://github.com/Lruihao/FixIt/projects/1)
+- 英语
+- 简体中文
+- 繁体中文
+- 法语
+- 波兰语
+- 巴西葡萄牙语
+- 意大利语
+- 西班牙语
+- 德语
+- 塞尔维亚语
+- 俄语
+- 罗马尼亚语
+- 越南语
+- 印地语
+- 日语
+- 韩语

-## [更新日志](https://github.com/Lruihao/FixIt/blob/master/CHANGELOG.md)
+</details>

-## 问题、想法、 bugs 和 PRs
+## 主题组件

-所有的反馈都是欢迎的！详见 [issue tracker](https://github.com/Lruihao/FixIt/issues)。
+FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此，我们开发了一系列额外的 [Hugo 主题组件](https://fixit.lruihao.cn/zh-cn/ecosystem/#-组件) 供用户选择。
+
+<details>
+<summary>点击展开</summary>
+
+<!-- HUGO_FIXIT_COMPONENTS:START -->
+- [fixit-bundle](https://github.com/hugo-fixit/fixit-bundle)\
+  🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component.
+- [cmpt-flyfish](https://github.com/hugo-fixit/cmpt-flyfish)\
+  🐟 A canvas implemented animation effect of small fish swimming.
+- [cmpt-mdevtools](https://github.com/hugo-fixit/cmpt-mdevtools)\
+  Mobile devtools component powered by vConsole and eruda.
+- [cmpt-santa-hat](https://github.com/hugo-fixit/cmpt-santa-hat)\
+  A Christmas Easter Egg by JavaScript.
+- [cmpt-translate](https://github.com/hugo-fixit/cmpt-translate)\
+  🌐 A component for site automatic translation.
+- [component-projects](https://github.com/hugo-fixit/component-projects)\
+  🐙 Display your GitHub projects in the FixIt theme and generate blog posts from readme.
+- [hugo-atom-feed](https://github.com/hugo-fixit/hugo-atom-feed)\
+  Hugo theme component for ATOM feed custom Output Format.
+- [hugo-json-feed](https://github.com/hugo-fixit/hugo-json-feed)\
+  Hugo theme component for JSON feed custom Output Format.
+- [shortcode-asciinema](https://github.com/hugo-fixit/shortcode-asciinema)\
+  A Hugo theme component with asciinema-embed shortcode.
+- [shortcode-caniuse](https://github.com/hugo-fixit/shortcode-caniuse)\
+  A Hugo theme component with caniuse shortcode.
+- [shortcode-docs-bookmark](https://github.com/hugo-fixit/shortcode-docs-bookmark)\
+  🔖 Embed bookmark of FixIt Docs.
+- [shortcode-missing-translation](https://github.com/hugo-fixit/shortcode-missing-translation)\
+  A Hugo theme component with missing-translation shortcode.
+- [shortcode-mmt-netease](https://github.com/hugo-fixit/shortcode-mmt-netease)\
+  🎶 A Hugo theme component with a NetEase Cloud random comment shortcode.
+- [shortcode-rewards](https://github.com/hugo-fixit/shortcode-rewards)\
+  A Hugo theme component with reward-log or sponsor-log shortcode.
+<!-- HUGO_FIXIT_COMPONENTS:END -->
+
+</details>
+
+## 社区支持
+
+所有的反馈都是欢迎的！详见 [Discussions][discussions]、[Pull requests][pulls] 和 [Issues][issues]。
+
+| 官方社区                           | 说明                            |
+| :--------------------------------- | :------------------------------ |
+| [Discussions][discussions]         | GitHub 讨论区                   |
+| [FixIt 主题交流群（微信）][wx-mp]  | 关注「菠菜眾長」回复“FixIt”获取 |
+| [FixIt 主题交流群（QQ）][qq-group] | QQ 群：`814031017`              |
+| [Hugo FixIt 星球][zsxq]            | 付费知识星球                    |
+
+[discussions]: https://github.com/hugo-fixit/FixIt/discussions
+[pulls]: https://github.com/hugo-fixit/FixIt/pulls
+[issues]: https://github.com/hugo-fixit/FixIt/issues
+[qq-group]: https://qm.qq.com/cgi-bin/qm/qr?k=awbwdTtSQ_-H5QGzeJxdWgv6JMbNehNM&jump_from=webapi
+[zsxq]: https://t.zsxq.com/GgKEW
+[wx-mp]: https://lruihao.cn/images/qr-wx-mp.webp
+
+## 参与贡献
+
+我们欢迎你加入 FixIt 的开发，贡献出你的一份力量。请看开源 [贡献指南](/CONTRIBUTING.md)。 🤗
+
+你也可以随时向我们的 [官方插件](https://github.com/hugo-fixit) 提交 Issue 或 Pull Request。
+
+> [!note]
+> 在贡献时，请先通过此存储库上的讨论来讨论你希望进行的更改，然后再进行实际更改。
+
+## 致谢
+
+感谢 [所有贡献者](https://github.com/hugo-fixit/FixIt/graphs/contributors) 的支持！
+
+感谢 [Hugo DoIt](https://github.com/HEIGE-PCloud/DoIt) 主题和 [Hexo NexT](https://github.com/next-theme/hexo-theme-next) 主题给予的灵感和借鉴。
+
+<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/)
+- [MathJax](https://www.mathjax.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/)
+- [Vercount](https://github.com/EvanNotFound/vercount)
+- [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)
+- [pace](https://github.com/CodeByZach/pace)
+- [xxhash-wasm](https://github.com/jungomi/xxhash-wasm)
+- [`<tab-container>` element](https://github.com/github/tab-container-element)
+- [`<json-viewer>` element](https://github.com/Lruihao/json-viewer-element)
+
+</details>

 ## 许可协议

-FixIt 根据 **MIT** 许可协议授权。 更多信息请查看 [LICENSE 文件](https://github.com/Lruihao/FixIt/blob/master/LICENSE)。
+FixIt 根据 **MIT** 许可协议授权。更多信息请查看 [LICENSE 文件](/LICENSE)。

-FixIt 主题中用到了以下项目，感谢它们的作者：
+## 赞助支持

-* [normalize.css](https://github.com/necolas/normalize.css)
-* [Font Awesome](https://fontawesome.com/)
-* [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
-* [autocomplete.js](https://github.com/algolia/autocomplete.js)
-* [Lunr.js](https://lunrjs.com/)
-* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [lazysizes](https://github.com/aFarkas/lazysizes)
-* [object-fit-images](https://github.com/fregante/object-fit-images)
-* [Twemoji](https://github.com/twitter/twemoji)
-* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* [clipboard.js](https://github.com/zenorocha/clipboard.js)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
-* [TypeIt](https://typeitjs.com/)
-* [KaTeX](https://katex.org/)
-* [mermaid](https://github.com/knsv/mermaid)
-* [ECharts](https://echarts.apache.org/)
-* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* [APlayer](https://github.com/MoePlayer/APlayer)
-* [MetingJS](https://github.com/metowolf/MetingJS)
-* [Gitalk](https://github.com/gitalk/gitalk)
-* [Valine](https://valine.js.org/)
-* [cookieconsent](https://github.com/osano/cookieconsent)
-* [cell-watermark](https://github.com/Lruihao/watermark)
-* [pangu.js](https://github.com/vinta/pangu.js)
-* [Artalk](https://artalk.js.org/)
-* [Waline](https://waline.js.org/)
-* [Twikoo](https://twikoo.js.org/)
+如果你喜爱这个主题，请考虑给我买杯咖啡 ☕️，谢谢！
+
+- [微信支付](/images/wechatpay.jpg)
+- [支付宝](/images/alipay.jpg)
+- [PayPal](https://paypal.me/Lruihao)
+
+感谢以下赞助商提供大力支持：
+
+- [translate.js](https://github.com/xnx3/translate) 赞助[企业级翻译通道](https://translate.zvo.cn/4087.html)。

 ## 作者

-[Lruihao](https://lruihao.cn)
+[Lruihao](https://github.com/Lruihao "在 GitHub 上关注我")
@@ -0,0 +1,73 @@
+# Security Policy
+
+## Supported Versions
+
+Only the latest version receives active maintenance and security updates:
+
+| Version | Hugo Version      | LoveIt Compat      | Supported          |
+| :-----: | :---------------: | :----------------: | :----------------: |
+| 0.4.x   | 0.147.7 ~ latest  | N/A                | :white_check_mark: |
+| 0.3.x   | 0.112.0 ~ 0.146.0 | N/A                | :x:                |
+| 0.2.x   | 0.62.0 ~ 0.110.0  | :white_check_mark: | :x:                |
+| 0.1.x   | Unknown           | :white_check_mark: | :x:                |
+
+## Security Considerations
+
+### Theme Security Features
+
+- **Content Security Policy (CSP)** support
+- **Subresource Integrity (SRI)** for external resources
+- **XSS protection** through Hugo's built-in escaping
+- **Safe HTML rendering** with configurable markup
+- **Secure defaults** for all theme configurations
+
+### Best Practices
+
+1. **Keep Hugo Updated**: Always use the latest stable Hugo version
+2. **Regular Updates**: Update the theme regularly to get security patches
+3. **Content Validation**: Validate user-generated content before publishing
+4. **HTTPS Only**: Always deploy sites with HTTPS enabled
+
+### Known Security Considerations
+
+- External CDN resources should be reviewed before enabling
+- User-generated content requires proper sanitization
+- Third-party integrations (comments, analytics) should be configured securely
+
+## Reporting a Vulnerability
+
+We take security seriously and appreciate your help in keeping FixIt secure.
+
+### How to Report
+
+1. **Create an Issue**: Report vulnerabilities at https://github.com/hugo-fixit/FixIt/issues
+2. **Private Disclosure**: For sensitive security issues, email the maintainers directly
+3. **Include Details**: Provide clear steps to reproduce the vulnerability
+
+### What to Include
+
+- **Description**: Clear description of the vulnerability
+- **Impact**: Potential impact and severity
+- **Reproduction**: Step-by-step instructions to reproduce
+- **Environment**: Hugo version, theme version, and platform details
+- **Solution**: Suggested fix if you have one
+
+### Response Timeline
+
+- **Acknowledgment**: Within 48 hours
+- **Initial Assessment**: Within 1 week
+- **Status Updates**: Weekly updates on progress
+- **Resolution**: Security fixes are prioritized and released as soon as possible
+
+### Disclosure Policy
+
+- We follow responsible disclosure practices
+- We will coordinate with you on the disclosure timeline
+
+## Security Resources
+
+- [Hugo Security Model](https://gohugo.io/about/security/)
+- [OWASP Web Security Testing Guide](https://owasp.org/www-project-web-security-testing-guide/)
+- [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP)
+
+<!-- This security policy was enhanced and generated with assistance from GitHub Copilot AI -->
@@ -0,0 +1,13 @@
+---
+title: My First Post
+date: 2023-02-20T20:14:22+08:00
+draft: false
+categories:
+  - blog
+collections:
+  - blog
+tags:
+  - blog
+---
+
+A blog (a truncation of "weblog") is an informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries (posts). Posts are typically displayed in reverse chronological order so that the most recent post appears first, at the top of the web page. Until 2009, blogs were usually the work of a single individual,[citation needed] occasionally of a small group, and often covered a single subject or topic. In the 2010s, "multi-author blogs" (MABs) emerged, featuring the writing of multiple authors and sometimes professionally edited. MABs from newspapers, other media outlets, universities, think tanks, advocacy groups, and similar institutions account for an increasing quantity of blog traffic. The rise of Twitter and other "microblogging" systems helps integrate MABs and single-author blogs into the news media. Blog can also be used as a verb, meaning to maintain or add content to a blog.
@@ -0,0 +1,36 @@
+# =====================================================================================
+# The following is a necessary configuration for the FixIt theme.
+# =====================================================================================
+
+# -------------------------------------------------------------------------------------
+# Hugo Configuration
+# See: https://gohugo.io/getting-started/configuration/
+# -------------------------------------------------------------------------------------
+
+title = "Hugo FixIt Demo"
+baseURL = "https://demo.fixit.lruihao.cn/"
+# theme = "FixIt"
+
+[markup]
+_merge = "shallow"
+
+[outputs]
+_merge = "shallow"
+
+# -------------------------------------------------------------------------------------
+# Taxonomies Configuration
+# See: https://gohugo.io/content-management/taxonomies/#configure-taxonomies
+# -------------------------------------------------------------------------------------
+
+[taxonomies]
+_merge = "shallow"
+
+# -------------------------------------------------------------------------------------
+# Theme Core Configuration
+# See: https://fixit.lruihao.cn/documentation/basics/#theme-configuration
+# -------------------------------------------------------------------------------------
+
+[params]
+# FixIt theme version
+version = "0.3.X" # e.g. "0.2.X", "0.2.15", "v0.2.15" etc.
+# ...
@@ -0,0 +1,8 @@
+{
+  "name": "@hugo-fixit/demo",
+  "private": true,
+  "scripts": {
+    "build": "hugo --themesDir ../../.. --theme $PWD/../.. --gc --minify --logLevel info",
+    "dev": "hugo server --themesDir ../../.. --theme $PWD/../.. -D --disableFastRender --navigateToChanged --ignoreCache -O"
+  }
+}
@@ -0,0 +1,72 @@
+[
+  {
+    "name": "src-json",
+    "type": "dir",
+    "children": [
+      {
+        "name": "index.ts",
+        "type": "file"
+      },
+      {
+        "name": "components",
+        "type": "dir",
+        "children": [
+          {
+            "name": "Header.tsx",
+            "type": "file"
+          },
+          {
+            "name": "Footer.tsx",
+            "type": "file"
+          }
+        ]
+      },
+      {
+        "name": "utils",
+        "type": "dir",
+        "children": [
+          {
+            "name": "helper.ts",
+            "type": "file"
+          },
+          {
+            "name": "validator.ts",
+            "type": "file"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "public",
+    "type": "dir",
+    "children": [
+      {
+        "name": "favicon.ico",
+        "type": "file"
+      },
+      {
+        "name": "images",
+        "type": "dir",
+        "children": [
+          {
+            "name": "logo.png",
+            "type": "file"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "package.json",
+    "type": "file"
+  },
+  {
+    "name": "README.md",
+    "type": "file"
+  },
+  {
+    "name": "tsconfig.json",
+    "type": "file"
+  }
+]
@@ -0,0 +1,4 @@
+---
+title: All Tests
+titleIcon: fa-solid fa-flask
+---
@@ -0,0 +1,165 @@
+---
+title: Alerts and Admonition Syntax Test
+date: 2025-09-05T16:57:58+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+  - Shortcodes
+tags:
+  - Alerts
+  - Admonition
+---
+
+This article comprehensively tests the **Alerts** Markdown syntax extension and **Admonition** shortcode functionality in the FixIt theme.
+
+<!--more-->
+
+## Basic Alerts Syntax
+
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
+## Extended Alerts Syntax
+
+### Custom Titles
+
+> [!NOTE] FixIt
+> A clean, elegant but advanced Hugo theme.
+
+> [!TIP] This is a title-only alert.
+
+### Foldable Alerts
+
+Create foldable alerts by adding a plus (+) or minus (-) directly after the type identifier:
+
+> [!WARNING]+ Radiation Hazard
+> Do not approach or handle without protective gear.
+
+> [!QUESTION]- Are alerts foldable?
+> Yes! In a foldable alert, the contents are hidden when collapsed.
+
+### Nested Alerts
+
+Alerts can be nested in multiple levels:
+
+> [!question] Can alerts be nested?
+> > [!todo] Yes! They can be nested.
+> > > [!example] You can even use multiple layers of nesting.
+
+### Content-only Alerts
+
+> [!TIP]~
+> This is a content-only alert without a title.
+
+### Supported types
+
+> [!note]+
+> This is a note type alert example.
+
+> [!abstract]-
+> This is an abstract type alert example. Aliases: `summary`, `tldr`
+
+> [!info]-
+> This is an info type alert example.
+
+> [!todo]-
+> This is a todo type alert example.
+
+> [!tip]-
+> This is a tip type alert example. Aliases: `hint`, `important`
+
+> [!success]-
+> This is a success type alert example. Aliases: `check`, `done`
+
+> [!question]-
+> This is a question type alert example. Aliases: `help`, `faq`
+
+> [!warning]-
+> This is a warning type alert example. Aliases: `caution`, `attention`
+
+> [!failure]-
+> This is a failure type alert example. Aliases: `fail`, `missing`
+
+> [!danger]-
+> This is a danger type alert example. Aliases: `error`
+
+> [!bug]-
+> This is a bug type alert example.
+
+> [!example]-
+> This is an example type alert example.
+
+> [!quote]-
+> This is a quote type alert example. Aliases: `cite`
+
+## Admonition Shortcode
+
+{{< admonition >}}
+This is the default note type admonition.
+{{< /admonition >}}
+
+{{< admonition abstract "" false  >}}
+This is the default abstract type admonition. Aliases: `summary`, `tldr`
+{{< /admonition >}}
+
+{{< admonition info "" false >}}
+This is the default info type admonition.
+{{< /admonition >}}
+
+{{< admonition todo "" false >}}
+This is the default todo type admonition.
+{{< /admonition >}}
+
+{{< admonition tip "" false >}}
+This is the default tip type admonition. Aliases: `hint`, `important`
+{{< /admonition >}}
+
+{{< admonition success "" false >}}
+This is the default success type admonition. Aliases: `check`, `done`
+{{< /admonition >}}
+
+{{< admonition question "" false >}}
+This is the default question type admonition. Aliases: `help`, `faq`
+{{< /admonition >}}
+
+{{< admonition warning "" false >}}
+This is the default warning type admonition. Aliases: `caution`, `attention`
+{{< /admonition >}}
+
+{{< admonition failure "" false >}}
+This is the default failure type admonition. Aliases: `fail`, `missing`
+{{< /admonition >}}
+
+{{< admonition danger "" false >}}
+This is the default danger type admonition. Aliases: `error`
+{{< /admonition >}}
+
+{{< admonition bug "" false >}}
+This is the default bug type admonition.
+{{< /admonition >}}
+
+{{< admonition example "" false >}}
+This is the default example type admonition.
+{{< /admonition >}}
+
+{{< admonition quote "" false >}}
+This is the default quote type admonition. Aliases: `cite`
+{{< /admonition >}}
+
+## Special Types
+
+> [!center]
+> This paragraph is **center-aligned**.
@@ -0,0 +1,3 @@
+[00:00.00]APlayer audio1
+[00:04.01]is
+[00:08.02]amazing
@@ -0,0 +1,28 @@
+---
+title: APlayer Test
+date: 2025-10-21T11:00:04+08:00
+collections:
+  - Tests
+categories:
+  - Shortcodes
+tags:
+  - APlayer
+---
+
+Testing APlayer shortcode in FixIt theme.
+
+<!--more-->
+
+{{< aplayer fixed=false mini=false autoplay=false theme="#b7daff" loop="all" order="list" preload="auto" volume=0.7 mutex=true lrcType=3 listFolded=false listMaxHeight="" storageName="aplayer-setting" >}}
+  {{< audio name="Wavelength1" artist="oldmanyoung1" url="Wavelength.mp3" cover="Wavelength.webp" lrc="Wavelength.lrc" />}}
+  {{< audio name="Wavelength2" artist="oldmanyoung2" url="Wavelength.mp3" cover="Wavelength.webp" />}}
+{{< /aplayer >}}
+
+{{< aplayer fixed=false mini=false autoplay=false theme="#b7daff" loop="all" order="list" preload="auto" volume=0.7 mutex=true lrcType=1 listFolded=false listMaxHeight="" storageName="aplayer-setting" >}}
+  {{< audio name="Wavelength1" artist="oldmanyoung1" url="Wavelength.mp3" cover="Wavelength.webp" />}}
+  {{< audio name="Wavelength2" artist="oldmanyoung2" url="Wavelength.mp3" cover="Wavelength.webp" >}}
+    [00:00.00]APlayer audio2
+    [00:04.01]is
+    [00:08.02]amazing
+  {{< /audio >}}
+{{< /aplayer >}}
@@ -0,0 +1,166 @@
+---
+title: Code Tabs Test
+date: 2026-01-25T07:50:22+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Code Tabs
+---
+
+Code tabs test cases for grouped code blocks.
+
+<!--more-->
+
+## Default Name
+
+```python {group=tab2}
+print("Python")
+```
+
+```go {group=tab2}
+fmt.Println("Go")
+```
+
+## Custom Name
+
+```js {group=tab-actions name="[JavaScript]"}
+function sum(a, b) {
+  return a + b
+}
+
+console.log(sum(1, 2))
+```
+
+```python {group=tab-actions name="[Python]"}
+def sum(a, b):
+  return a + b
+
+print(sum(1, 2))
+```
+
+## Active Tab
+
+```js {group=tab-active name="Inactive Tab"}
+function greet(name) {
+  return `Hello, ${name}!`
+}
+```
+
+```python {group=tab-active name="Active Tab" .active}
+def greet(name):
+  return f"Hello, {name}!"
+```
+
+## Shadow
+
+```js {group=tab-shadow name="Always" shadow="always"}
+function greet(name) {
+  return `Hello, ${name}!`
+}
+```
+
+```python {group=tab-shadow name="Hover" shadow="hover"}
+def greet(name):
+  return f"Hello, {name}!"
+```
+
+```go {group=tab-shadow name="Never" shadow="never"}
+func greet(name string) string {
+  return fmt.Sprintf("Hello, %s!", name)
+}
+```
+
+## Mode
+
+```ts {group=tab-mode name="Classic"}
+interface User {
+  id: number
+  name: string
+}
+```
+
+```ts {group=tab-mode name="Mac" mode="mac"}
+interface User {
+  id: number
+  name: string
+}
+```
+
+```ts {group=tab-mode name="Simple" mode="simple"}
+interface User {
+  id: number
+  name: string
+}
+```
+
+## Actions
+
+```bash {group=tab-actions name="lineNos=true" lineNos=true}
+echo "line 1"
+echo "line 2"
+echo "line 3"
+```
+
+```bash {group=tab-actions name="lineNos=false" lineNos=false}
+echo "line 1"
+echo "line 2"
+echo "line 3"
+```
+
+```bash {group=tab-actions name="wrapping" .line-wrapping}
+printf "this is a very very very very very very very very very very very very very very very very long line"
+```
+
+```js {group=tab-actions name="editable" editable=true}
+function greet(name) {
+  return `Hello, ${name}!`
+}
+```
+
+## Expanded/Collapsed
+
+```js {group=tab-expand name="Expanded"}
+function longFunction() {
+  console.log('This is a long function.')
+  console.log('It has many lines of code.')
+  console.log('The code block should be expanded by default.')
+  console.log('Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
+  console.log('Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')
+  console.log('Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.')
+  console.log('Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.')
+  console.log('Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.')
+  console.log('The end of the long function.')
+}
+```
+
+```js {group=tab-expand name="Collapsed" .is-collapsed}
+function shortFunction() {
+  console.log('This is a short function.')
+}
+```
+
+## Code tabs inside other blocks
+
+> [!NOTE]+
+>
+> ```python {group=tab-nested}
+> print("Python")
+> ```
+>
+> ```go {group=tab-nested}
+> fmt.Println("Go")
+> ```
+
+{{< details open=true >}}
+
+```python {group=tab2}
+print("Python")
+```
+
+```go {group=tab2}
+fmt.Println("Go")
+```
+
+{{< /details >}}
@@ -0,0 +1,259 @@
+---
+title: Code Block Test
+date: 2025-11-28T15:16:35+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Code Block
+---
+
+Testing code block in FixIt theme.
+
+<!--more-->
+<!-- markdownlint-disable-file blanks-around-lists ul-style ul-indent code-block-style -->
+
+```fixit
+🎉🥚 in development mode!
+```
+
+## Multiple modes
+
+```js {mode="classic"}
+// Classic mode
+function add(a, b) {
+  return a + b
+}
+```
+
+```js {mode="mac"}
+// Mac mode
+function add(a, b) {
+  return a + b
+}
+```
+
+```js {mode="simple"}
+// Simple mode
+function add(a, b) {
+  return a + b
+}
+```
+
+## Code title
+
+```{title="Quine Clock"}
+(r=()=>setInterval(t=>{for(j=o="\n",y=5;y--;document.body["inn"
+"erHTML"]="<pre>&lt"+(S="script>\n")+o+"\n\n&lt/"+S)for(x=-01;
+63-!y>x++;o+=`(r=${r})()`[j++].fontcolor(c?'#FF0':"#444"))c=x/2
+%4<3&&parseInt("odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(i="9"<(
+D=Date()[16+(x/8|0)])?30:D*3,i+3),36)&1<<(x/2|0)%4+3*y},100))()
+```
+
+## Code File Name
+
+```js {name="hello.js"}
+function hello(x = 'world') {
+  console.log(`Hello, ${x}!`)
+}
+
+hello()
+// Hello, world!
+hello('FixIt')
+// Hello, FixIt!
+```
+
+## Shadow
+
+{{< tabs >}}
+{{% tab title="Always" %}}
+
+```js {shadow="always"}
+function hello(x = 'world') {
+  console.log(`Hello, ${x}!`)
+}
+```
+
+{{% /tab %}}
+{{% tab title="Hover" %}}
+
+```js {shadow="hover"}
+function hello(x = 'world') {
+  console.log(`Hello, ${x}!`)
+}
+```
+
+{{% /tab %}}
+{{% tab title="Never" %}}
+
+```js {shadow="never"}
+function hello(x = 'world') {
+  console.log(`Hello, ${x}!`)
+}
+```
+
+{{% /tab %}}
+{{< /tabs >}}
+
+## Collapsed/Expanded
+
+```
+eval(z = 'p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
+4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
+9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
+r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
+eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
+(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
+th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0>cos(o=\
+new Date/1e3/*      .Q#########Md#.###OP  A@ , */+x/PI)&&(e[~\
+~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
+x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
+]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
+it(B = "\\\\")./*           G####B" #       */join(B+B).split\
+(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\
+03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//
+```
+
+````md
+```lang {.is-collapsed}
+// This code block will be collapsed by default.
+```
+````
+
+````md
+```lang {.is-expanded}
+// This code block will be expanded regardless of its length.
+```
+````
+
+## No wrapper
+
+Set `wrapper=false` to disable code wrapper.
+
+```js {wrapper=false}
+function add(a, b) {
+  return a + b
+}
+```
+
+```js {wrapper=false, lineNos=false}
+function add(a, b) {
+  return a + b
+}
+```
+
+## lineNos=false
+
+```js {lineNos=false}
+function add(a, b) {
+  return a + b
+}
+```
+
+## lineNumbersInTable=false
+
+> [!WARNING]
+> Not recommended!
+
+```js {lineNumbersInTable=false}
+function add(a, b) {
+  return a + b
+}
+```
+
+## Diff Code
+
+```diff
+- theme = "LoveIt"
+ theme = "FixIt"
+! enhancements and fixes
+```
+
+## Long Code
+
+```html
+<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
+```
+
+    <p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
+
+## Code block inside other blocks
+
+> [!NOTE]+
+>
+> ```js {mode="classic"}
+> function add(a, b) {
+>   return a + b
+> }
+> ```
+
+{{< typeit code=java >}}
+public class HelloWorld {
+    public static void main(String []args) {
+        System.out.println("Hello World");
+    }
+}
+{{< /typeit >}}
+
+{{< details "Code Block inside Details" >}}
+
+```js {mode="classic"}
+function add(a, b) {
+  return a + b
+}
+```
+
+{{< /details >}}
+
+## Highlighting
+
+Highlighting in code fences is enabled by default.
+
+```js {linenostart=287,hl_lines=[2,"8-10"]}
+/**
+ * check if a string is a JS object string
+ * @example isObjectLiteral("{a:1,b:2}") // true
+ * @param {string} str string to check
+ * @returns {boolean} whether the string is a JS object string
+ */
+function isObjectLiteral(str) {
+  if (typeof str !== 'string') {
+    return false
+  }
+  str = str.replace(/\s+/g, ' ').trim().replace(/;$/, '')
+  if (str.startsWith('{') && str.endsWith('}')) {
+    return true
+  }
+  return false
+}
+```
+
+Highlighting in shortcode highlight.
+
+{{< highlight javascript "hl_lines=2 8-10,linenostart=287" >}}
+/**
+ * check if a string is a JS object string
+ * @example isObjectLiteral("{a:1,b:2}") // true
+ * @param {string} str string to check
+ * @returns {boolean} whether the string is a JS object string
+ */
+function isObjectLiteral(str) {
+  if (typeof str !== 'string') {
+    return false
+  }
+  str = str.replace(/\s+/g, ' ').trim().replace(/;$/, '')
+  if (str.startsWith('{') && str.endsWith('}')) {
+    return true
+  }
+  return false
+}
+{{< /highlight >}}
+
+## Gist Embed
+
+{{< env "production" >}}
+{{< gist Lruihao fb8b2d0353465c4d40bf74818db80710 >}}
+{{< /env >}}
@@ -0,0 +1,60 @@
+---
+title: Color Preview Test
+date: 2025-08-17T17:20:00+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Color Preview
+---
+
+This post is a test post to preview the color syntax in Markdown.
+
+<!--more-->
+
+## 📝 Syntax
+
+| Color | Syntax             | Example                    | Output               |
+| ----- | ------------------ | -------------------------- | -------------------- |
+| HEX   | `` `#RRGGBB` ``    | `` `#0969DA` ``            | `#0969DA`            |
+| RGB   | `` `rgb(R,G,B)` `` | `` `rgb(9, 105, 218)` ``   | `rgb(9, 105, 218)`   |
+| HSL   | `` `hsl(H,S,L)` `` | `` `hsl(212, 92%, 45%)` `` | `hsl(212, 92%, 45%)` |
+
+e.g. The background color is `#ffffff` for light mode and `#000000` for dark mode.
+
+## ✅ Color Preview
+
+Pure color values (no leading/trailing characters):
+
+- `#0969DA`
+- `#096`
+- `#FF0000`
+- `#00FF00`
+- `rgb(255, 0, 0)`
+- `rgb(0, 255, 0)`
+- `hsl(240, 100%, 50%)`
+- `hsl(120, 100%, 50%)`
+
+Theme colors:
+
+| Type      | Light     | Dark      |
+| :-------: | :-------: | :-------: |
+| Primary   | `#1677ff` | `#0069fc` |
+| Secondary | `#8b949e` | `#7d8792` |
+| Success   | `#52c41a` | `#49ad17` |
+| Info      | `#13c2c2` | `#11abab` |
+| Warning   | `#faad14` | `#efa105` |
+| Danger    | `#ff4d4f` | `#ff3436` |
+
+## ❌ Regular Code
+
+With leading or trailing characters:
+
+- `test #0969DA`
+- `#0969DA test`
+- `color: #0969DA`
+- ` #0969DA` (leading space)
+- `#0969DA ` (trailing space)
+- `background-color: rgb(255, 0, 0)`
+- `using hsl(240, 100%, 50%) color`
@@ -0,0 +1,179 @@
+---
+title: Encryption Test
+date: 2022-05-21T22:31:22+08:00
+description: Test for encrypting content.
+password: 1212
+message: Password is 1212
+collections:
+  - Tests
+categories:
+  - Features
+tags:
+  - Encryption
+---
+
+<!--more-->
+
+I was shy, so I hid.
+
+## Ruby
+
+[Hugo]^(An open-source static site generator)
+
+## Math
+
+$$ \ce{CO2 + C -> 2 CO} $$
+
+$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
+
+## style
+
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
+{{< /style >}}
+
+## Script
+
+{{< script >}}
+console.log('before decrypting');
+
+document.addEventListener('DOMContentLoaded', () => {
+  fixit.decryptor.addEventListener('decrypted', function() {
+    console.log('after decrypting')
+  })
+});
+{{< /script >}}
+
+## Mermaid
+
+```mermaid
+graph LR;
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+```
+
+## Echarts
+
+```echarts
+title:
+    text: Summary Line Chart
+    top: 2%
+    left: center
+tooltip:
+    trigger: axis
+legend:
+    data:
+        - Email Marketing
+        - Affiliate Advertising
+        - Video Advertising
+        - Direct View
+        - Search Engine
+    top: 10%
+grid:
+    left: 5%
+    right: 5%
+    bottom: 5%
+    top: 20%
+    containLabel: true
+toolbox:
+    feature:
+        saveAsImage:
+            title: Save as Image
+xAxis:
+    type: category
+    boundaryGap: false
+    data:
+        - Monday
+        - Tuesday
+        - Wednesday
+        - Thursday
+        - Friday
+        - Saturday
+        - Sunday
+yAxis:
+    type: value
+series:
+    - name: Email Marketing
+      type: line
+      stack: Total
+      data:
+          - 120
+          - 132
+          - 101
+          - 134
+          - 90
+          - 230
+          - 210
+    - name: Affiliate Advertising
+      type: line
+      stack: Total
+      data:
+          - 220
+          - 182
+          - 191
+          - 234
+          - 290
+          - 330
+          - 310
+    - name: Video Advertising
+      type: line
+      stack: Total
+      data:
+          - 150
+          - 232
+          - 201
+          - 154
+          - 190
+          - 330
+          - 410
+    - name: Direct View
+      type: line
+      stack: Total
+      data:
+          - 320
+          - 332
+          - 301
+          - 334
+          - 390
+          - 330
+          - 320
+    - name: Search Engine
+      type: line
+      stack: Total
+      data:
+          - 820
+          - 932
+          - 901
+          - 934
+          - 1290
+          - 1330
+          - 1320
+```
+
+## Typeit
+
+{{< typeit code=javascript >}}
+console.log('before decrypting');
+
+document.addEventListener('DOMContentLoaded', () => {
+  fixit.decryptor.addEventListener('decrypted', function() {
+    console.log('after decrypting')
+  })
+});
+{{< /typeit >}}
+
+## fixit-encryptor
+
+All the following shortcodes passwords are `1212`.
+
+{{% fixit-encryptor "1212" %}}
+{{< typeit >}}如果你愿意一层一层一层地剥开我的心{{< /typeit >}}
+{{% fixit-encryptor "1212" %}}
+{{< typeit >}}你会发现 你会讶异{{< /typeit >}}
+{{% fixit-encryptor "1212" %}}
+{{< typeit >}}你是我最压抑最深处的秘密{{< /typeit >}}
+{{% /fixit-encryptor %}}
+{{% /fixit-encryptor %}}
+{{% /fixit-encryptor %}}
@@ -0,0 +1,59 @@
+[[filetree]]
+name = "src-toml"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree.children]]
+name = "components"
+type = "dir"
+
+[[filetree.children.children]]
+name = "Header.tsx"
+type = "file"
+
+[[filetree.children.children]]
+name = "Footer.tsx"
+type = "file"
+
+[[filetree.children]]
+name = "utils"
+type = "dir"
+
+[[filetree.children.children]]
+name = "helper.ts"
+type = "file"
+
+[[filetree.children.children]]
+name = "validator.ts"
+type = "file"
+
+[[filetree]]
+name = "public"
+type = "dir"
+
+[[filetree.children]]
+name = "favicon.ico"
+type = "file"
+
+[[filetree.children]]
+name = "images"
+type = "dir"
+
+[[filetree.children.children]]
+name = "logo.png"
+type = "file"
+
+[[filetree]]
+name = "package.json"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+
+[[filetree]]
+name = "tsconfig.json"
+type = "file"
@@ -0,0 +1,273 @@
+---
+title: File Tree Test
+date: 2026-01-10T03:00:48+08:00
+collections:
+  - Tests
+categories:
+  - Shortcodes
+tags:
+  - file-tree
+---
+
+This article tests the **File Tree** shortcode functionality in the FixIt theme.
+
+<!--more-->
+<!-- markdownlint-disable-file MD007 MD024 MD032 -->
+
+## Content Modes
+
+### Shortcode body
+
+#### JSON format
+
+{{< file-tree >}}
+[
+  {
+    "name": "src",
+    "type": "dir",
+    "children": [
+      {
+        "name": "index.ts",
+        "type": "file"
+      },
+      {
+        "name": "app.ts",
+        "type": "file"
+      }
+    ]
+  },
+  {
+    "name": "README.md",
+    "type": "file"
+  },
+  {
+    "name": ".gitignore",
+    "type": "file"
+  }
+]
+{{< /file-tree >}}
+
+#### YAML format
+
+{{< file-tree folderSlash=true >}}
+- name: project-root
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: index.ts
+          type: file
+        - name: config.ts
+          type: file
+    - name: tests
+      type: dir
+      children:
+        - name: unit.test.ts
+          type: file
+    - name: package.json
+      type: file
+    - name: tsconfig.json
+      type: file
+{{< /file-tree >}}
+
+#### TOML format
+
+{{< file-tree >}}
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree.children]]
+name = "app.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+{{< /file-tree >}}
+
+### File data
+
+#### TOML format
+
+{{< file-tree file="data/example.toml" />}}
+
+TOML with folder slash and level 3:
+
+{{< file-tree file="data/example.toml" level=3 folderSlash=true />}}
+
+#### JSON format
+
+{{< file-tree file="filetree/example.json" />}}
+
+JSON with folder slash and level 2:
+
+{{< file-tree file="filetree/example.json" level=2 folderSlash=true />}}
+
+#### YAML format
+
+Trying the file not found case (should fallback to next mode):
+
+{{< file-tree file="data/nonexistent.yaml" data="example" />}}
+
+### Hugo data
+
+#### Basic usage
+
+{{< file-tree data="example" />}}
+
+#### Fully expanded
+
+{{< file-tree data="example" level=-1 />}}
+
+#### Limited expansion
+
+{{< file-tree data="example" level=1 />}}
+
+#### With folder slash
+
+{{< file-tree data="example" folderSlash=true />}}
+
+#### With level and folder slash
+
+{{< file-tree data="example" level=2 folderSlash=true />}}
+
+#### Collapsed with ignore
+
+{{< file-tree data="example" level=0 ignoreList="README.md" />}}
+
+## Filesystem Mode
+
+### Basic paths
+
+{{< file-tree />}}
+
+{{< file-tree "." />}}
+
+{{< file-tree "content" />}}
+
+{{< file-tree name="{path}" />}}
+
+{{< file-tree name="FixIt/apps/test" />}}
+
+{{< file-tree path="posts" name="{path}" />}}
+
+### Named parameters
+
+{{< file-tree path="data" level=2 />}}
+
+### Expansion levels
+
+{{< file-tree "assets" 0 />}}
+
+{{< file-tree path="assets" level=2 folderSlash=true />}}
+
+{{< file-tree "assets" -1 />}}
+
+### With ignore lists
+
+{{< file-tree ignoreList=".hugo_build.lock, public, resources, node_modules" level=2 folderSlash=true />}}
+
+### root not exist
+
+path="nonexistent/path"
+
+{{< file-tree "nonexistent/path" />}}
+
+## Code Block Rendering
+
+### Basic code block
+
+YAML format:
+
+```file-tree
+- name: my-project
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: main.js
+          type: file
+        - name: utils.js
+          type: file
+    - name: package.json
+      type: file
+    - name: README.md
+      type: file
+```
+
+### TOML format
+
+```file-tree
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+```
+
+### With parameters
+
+```file-tree {level=2 folderSlash=true ignoreList="config.local.js"}
+- name: project
+  type: dir
+  children:
+    - name: config
+      type: dir
+      children:
+        - name: config.js
+          type: file
+        - name: config.local.js
+          type: file
+    - name: src
+      type: dir
+      children:
+        - name: index.js
+          type: file
+    - name: .gitignore
+      type: file
+```
+
+### Fully expanded
+
+```file-tree {level=-1 folderSlash=true}
+- name: backend
+  type: dir
+  children:
+    - name: api
+      type: dir
+      children:
+        - name: routes
+          type: dir
+          children:
+            - name: users.js
+              type: file
+            - name: posts.js
+              type: file
+        - name: controllers
+          type: dir
+          children:
+            - name: userController.js
+              type: file
+    - name: database
+      type: dir
+      children:
+        - name: models
+          type: dir
+        - name: migrations
+          type: dir
+    - name: app.js
+      type: file
+```
@@ -0,0 +1,79 @@
+---
+title: Font Awesome Test
+date: 2025-11-28T08:30:39+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Font Awesome
+---
+
+Test for rendering Font Awesome icons.
+
+<!--more-->
+
+## Size
+
+:(fa-solid fa-camera fa-xs):
+:(fa-solid fa-camera fa-sm):
+:(fa-solid fa-camera fa-lg):
+:(fa-solid fa-camera fa-1x):
+:(fa-solid fa-camera fa-2x):
+:(fa-solid fa-camera fa-3x):
+:(fa-solid fa-camera fa-5x):
+:(fa-solid fa-camera fa-7x):
+:(fa-solid fa-camera fa-10x):
+
+## Fixed width
+
+:(fa-solid fa-skating fa-2x): Skating\
+:(fa-solid fa-skiing fa-2x): Skiing\
+:(fa-solid fa-skiing-nordic fa-2x): Nordic Skiing
+
+## List icon
+
+:(fa-regular fa-check-square): Eat a hamburger\
+:(fa-regular fa-square): Get a girlfriend
+
+:(fa-regular fa-check-circle): Go to beach\
+:(fa-regular fa-circle): Go to Tibet
+
+## Rotate
+
+:(fa-solid fa-snowboarding):
+:(fa-solid fa-snowboarding fa-rotate-90):
+:(fa-solid fa-snowboarding fa-rotate-180):
+:(fa-solid fa-snowboarding fa-rotate-270):
+
+## Flip
+
+:(fa-solid fa-snowboarding):
+:(fa-solid fa-snowboarding fa-flip-horizontal):
+:(fa-solid fa-snowboarding fa-flip-vertical):
+:(fa-solid fa-snowboarding fa-flip-both):
+
+## Animation
+
+:(fa-solid fa-spinner):
+:(fa-solid fa-spinner fa-spin):
+:(fa-solid fa-spinner fa-pulse):
+:(fa-solid fa-circle-notch fa-spin):
+:(fa-solid fa-circle-notch fa-pulse):
+:(fa-solid fa-sync fa-spin):
+:(fa-solid fa-sync fa-pulse):
+:(fa-solid fa-cog fa-spin):
+:(fa-solid fa-cog fa-pulse):
+
+## Float
+
+:(fa-solid fa-quote-left fa-pull-left):
+
+hey guys!
+{.text-center}
+
+:(fa-solid fa-quote-right fa-pull-right):
+
+## Border
+
+:(fa-brands fa-apple fa-border fa-10x):
@@ -0,0 +1,84 @@
+---
+title: JSON Viewer Test
+date: 2025-10-14T12:29:06+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - json
+---
+
+Testing JSON viewer in FixIt theme.
+
+```json {boxed=false}
+{
+  "foo": "bar"
+}
+```
+
+<!--more-->
+
+## JSON Viewer
+
+```json
+{
+  "name": "John Doe",
+  "age": 30,
+  "isEmployed": true,
+  "address": {
+    "street": "123 Main St",
+    "city": "Anytown",
+    "state": "CA",
+    "postalCode": "12345"
+  },
+  "phoneNumbers": [
+    {
+      "type": "home",
+      "number": "555-1234"
+    },
+    {
+      "type": "work",
+      "number": "555-5678"
+    }
+  ],
+  "children": [],
+  "spouse": null
+}
+```
+
+disabled copy:
+
+```json {copyable=false}
+{
+  "foo": "bar"
+}
+```
+
+## JSON Code
+
+```json {enable=false}
+{
+  "name": "John Doe",
+  "age": 30,
+  "isEmployed": true,
+  "address": {
+    "street": "123 Main St",
+    "city": "Anytown",
+    "state": "CA",
+    "postalCode": "12345"
+  },
+  "phoneNumbers": [
+    {
+      "type": "home",
+      "number": "555-1234"
+    },
+    {
+      "type": "work",
+      "number": "555-5678"
+    }
+  ],
+  "children": [],
+  "spouse": null
+}
+```
@@ -0,0 +1,81 @@
+---
+title: KaTeX Test
+date: 2025-09-15T21:05:17+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Math
+---
+
+Testing $\KaTeX$ rendering in FixIt theme.
+
+<!--more-->
+
+## Inline Formulas
+
+$c = \pm\sqrt{a^2 + b^2}$ and \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)
+
+## Formula Blocks
+
+$$ c = \pm\sqrt{a^2 + b^2} $$
+
+\[f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\]
+
+$$
+\begin{equation*}
+  \rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
+\end{equation*}
+$$
+
+$$
+\begin{equation}
+  \mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
+\end{equation}
+$$
+
+$$
+\begin{align}
+  a&=b+c \\
+  d+e&=f
+\end{align}
+$$
+
+$$
+\begin{alignat}{2}
+   10&x+&3&y = 2 \\
+   3&x+&13&y = 4
+\end{alignat}
+$$
+
+$$
+\begin{gather}
+   a=b \\
+   e=b+c
+\end{gather}
+$$
+
+$$
+\begin{CD}
+   A @>a>> B \\
+@VbVV @AAcA \\
+   C @= D
+\end{CD}
+$$
+
+## Chemical Equations
+
+$$ \ce{CO2 + C -> 2 CO} $$
+
+$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
+
+$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
+
+## $\KaTeX$ in headings
+
+This is a bug:
+
+```latex
+## $\KaTeX$ in headings
+```
@@ -0,0 +1,145 @@
+---
+title: MathJax Test
+date: 2025-09-15T21:05:17+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Math
+math:
+  type: mathjax
+  mathjax:
+    macros:
+      bold: ["{\\bf #1}", 1] # usage: $\bold{math}$
+    loader:
+      load: ["ui/safe", "[tex]/physics", "[custom]/xypic.js"]
+      paths:
+        custom: "https://cdn.jsdelivr.net/gh/sonoisa/XyJax-v3@3.0.1/build/"
+    packages:
+      "[+]": ["physics", "xypic"]
+    tex:
+      physics:
+        italicdiff: false
+        arrowdel: false
+---
+
+Testing $\text{MathJax}$ rendering in FixIt theme.
+
+<!--more-->
+
+## Inline Formulas
+
+$c = \pm\sqrt{a^2 + b^2}$ and \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)
+
+## Formula Blocks
+
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+\[ f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz \]
+
+$$
+\cos(\theta+\phi)=\cos(\theta)\cos(\phi)−\sin(\theta)\sin(\phi)
+$$
+
+\[
+\int_D ({\nabla\cdot} F)dV=\int_{\partial D} F\cdot ndS
+\]
+
+$$
+\vec{\nabla} \times \vec{F} =
+            \left( \frac{\partial F_z}{\partial y} - \frac{\partial F_y}{\partial z} \right) \mathbf{i}
+          + \left( \frac{\partial F_x}{\partial z} - \frac{\partial F_z}{\partial x} \right) \mathbf{j}
+          + \left( \frac{\partial F_y}{\partial x} - \frac{\partial F_x}{\partial y} \right) \mathbf{k}
+$$
+
+$$
+\sigma = \sqrt{ \frac{1}{N} \sum_{i=1}^N (x_i -\mu)^2}
+$$
+
+$$
+(\nabla_X Y)^k = X^i (\nabla_i Y)^k =
+           X^i \left( \frac{\partial Y^k}{\partial x^i} + \Gamma_{im}^k Y^m \right)
+$$
+
+## Chemical Equations
+
+$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
+
+$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
+
+$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
+
+## Custom Macros
+
+$\bold{Custom}$ macro $\KaTeX$ in $\text{MathJax}$
+
+$$
+\def\RR{{\bf R}}
+\def\bolda#1{{\bf #1}}
+\RR = \bolda{R}
+$$
+
+$$
+\newcommand{\water}{{\rm H_{2}O}}
+\water = \text{H}_2\text{O}
+$$
+
+$$
+\newcommand{\hello}[1][World]{Hello, #1!}
+\hello \quad \hello[FixIt]
+$$
+
+$$
+\let\oldphi=\phi
+\let\oldtheta=\theta
+\renewcommand{\phi}{\varphi}
+\renewcommand{\theta}{\vartheta}
+\phi, \oldphi, \theta, \oldtheta
+$$
+
+## Custom Extensions
+
+A `physics` package example:
+
+$$
+\mqty(a & b \\ c & d) = \begin{pmatrix} a & b \\ c & d \end{pmatrix}
+$$
+
+An `xypic` package example:
+
+$$
+\begin{xy}
+\xymatrix {
+U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
+ & X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
+ & Y \ar[r]^g & Z
+}
+\end{xy}
+$$
+
+## \$\\text{MathJax}\$ in headings
+
+```latex
+## \$\\text{MathJax}\$ in headings
+```
+
+## More
+
+### Dark Mode Adaptation
+
+Use `.auto-dark-mode` class to automatically adapt to dark mode by inverting the color and hue:
+
+For inline formula:
+
+$\bbox[border: solid .4pt magenta, pink]{x^2=4}$
+{.auto-dark-mode}
+
+For formula blocks:
+
+{{< style "[data-theme=dark] & { filter: invert(1) hue-rotate(0.5turn); }" >}}
+$$
+\bbox[border: solid .4pt magenta, pink]{x^2=4}
+$$
+{.auto-dark-mode}
+{{< /style >}}
@@ -0,0 +1,550 @@
+---
+title: Mermaid Diagrams Test
+date: 2025-08-20T10:00:00+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+  - Shortcodes
+tags:
+  - Mermaid
+  - Diagrams
+---
+
+The FixIt theme supports two ways to use Mermaid: code block syntax and shortcode syntax.
+
+## Flowchart
+
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -->|Yes| C[OK]
+    C --> D[Rethink]
+    D --> B
+    B ---->|No| E[End]
+```
+
+<!--more-->
+
+## Sequence Diagram
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+## Gantt Chart
+
+{{< mermaid >}}
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+{{< /mermaid >}}
+
+## Class Diagram
+
+```mermaid
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
+```
+
+## State Diagram
+
+```mermaid
+stateDiagram-v2
+    [_] --> Still
+    Still --> [_]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+```
+
+## Entity Relationship Diagram
+
+```mermaid
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+    CUSTOMER {
+        string name
+        string custNumber
+        string sector
+    }
+    ORDER {
+        int orderNumber
+        string deliveryAddress
+    }
+    LINE-ITEM {
+        string productCode
+        int quantity
+        float pricePerUnit
+    }
+```
+
+## User Journey
+
+{{< mermaid >}}
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+{{< /mermaid >}}
+
+## Git Graph
+
+```mermaid
+gitGraph
+    commit
+    branch hotfix
+    checkout hotfix
+    commit
+    branch develop
+    checkout develop
+    commit id:"ash" tag:"abc"
+    branch featureB
+    checkout featureB
+    commit type:HIGHLIGHT
+    checkout main
+    checkout hotfix
+    commit type:NORMAL
+    checkout develop
+    commit type:REVERSE
+    checkout featureB
+    commit
+    checkout main
+    merge hotfix
+    checkout featureB
+    commit
+    checkout develop
+    branch featureA
+    commit
+    checkout develop
+    merge hotfix
+    checkout featureA
+    commit
+    checkout featureB
+    commit
+    checkout develop
+    merge featureA
+    branch release
+    checkout release
+    commit
+    checkout main
+    commit
+    checkout release
+    merge main
+    checkout develop
+    merge release
+```
+
+## Pie Chart
+
+{{< mermaid >}}
+pie title What Voldemort doesn't have?
+    "FRIENDS" : 2
+    "FAMILY" : 3
+    "NOSE" : 45
+{{< /mermaid >}}
+
+## Quadrant Chart
+
+```mermaid
+quadrantChart
+    title Reach and influence
+    x-axis Low Reach --> High Reach
+    y-axis Low Influence --> High Influence
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+```
+
+## Timeline
+
+```mermaid
+timeline
+    title History of Social Media Platform
+
+    2002 : LinkedIn
+    2003 : MySpace
+         : Skype
+    2004 : Facebook
+         : Gmail
+    2005 : Youtube
+    2006 : Twitter
+    2007 : FourSquare
+    2008 : Github
+    2010 : Instagram
+    2011 : Snapchat
+    2012 : Discord
+```
+
+## Mindmap
+
+```mermaid
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+```
+
+## XY Chart
+
+{{< mermaid >}}
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+{{< /mermaid >}}
+
+## Requirement Diagram
+
+```mermaid
+requirementDiagram
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+```
+
+## C4 Architecture
+
+```mermaid
+C4Context
+      title System Context diagram for Internet Banking System
+      Enterprise_Boundary(b0, "BankBoundary0") {
+        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+        Person(customerB, "Banking Customer B")
+        Person_Ext(customerC, "Banking Customer C", "desc")
+
+        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+        Enterprise_Boundary(b1, "BankBoundary") {
+
+          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+          System_Boundary(b2, "BankBoundary2") {
+            System(SystemA, "Banking System A")
+            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+          }
+
+          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+          Boundary(b3, "BankBoundary3", "boundary") {
+            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+          }
+        }
+      }
+
+      BiRel(customerA, SystemAA, "Uses")
+      BiRel(SystemAA, SystemE, "Uses")
+      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+      Rel(SystemC, customerA, "Sends e-mails to")
+
+      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
+      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
+      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+
+      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+```
+
+## ZenUML
+
+{{< mermaid >}}
+zenuml
+    title Demo
+    Alice->John: Hello John, how are you?
+    John->Alice: Great!
+    Alice->John: See you later!
+{{< /mermaid >}}
+
+## Sankey Diagram
+
+```mermaid
+---
+config:
+  sankey:
+    showValues: false
+---
+sankey-beta
+
+Agricultural 'waste',Bio-conversion,124.729
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+Biofuel imports,Liquid,35
+Biomass imports,Solid,35
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+District heating,Heating and cooling - commercial,22.505
+District heating,Heating and cooling - homes,46.184
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,Ngas,40.719
+Gas reserves,Ngas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+Ngas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+Wave,Electricity grid,19.013
+Wind,Electricity grid,289.366
+```
+
+## Block Diagram
+
+{{< mermaid >}}
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#969,stroke:#333,stroke-width:4px
+{{< /mermaid >}}
+
+## Packet Diagram
+
+```mermaid
+packet-beta
+title Sample packet
+0-15: "Source Port"
+16-31: "Destination Port"
+32-63: "Sequence Number"
+64-95: "Acknowledgment Number"
+96-99: "Data Offset"
+100-105: "Reserved"
+106: "URG"
+107: "ACK"
+108: "PSH"
+109: "RST"
+110: "SYN"
+111: "FIN"
+112-127: "Window"
+128-143: "Checksum"
+144-159: "Urgent Pointer"
+160-191: "Options and Padding"
+192-223: "Data (variable length)"
+```
+
+## Kanban
+
+```mermaid
+kanban
+    Todo
+        [Create a git repository]
+        [Write some code]
+        [Commit the code]
+
+    In Progress
+        [Push to main]
+
+    Done
+        [Merge PR]
+```
+
+## Architecture Diagram
+
+```mermaid
+architecture-beta
+    group api(cloud)[API]
+
+    service db(database)[Database] in api
+    service disk1(disk)[Storage] in api
+    service disk2(disk)[Storage] in api
+    service server(server)[Server] in api
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+```
+
+## Radar Chart
+
+```mermaid
+---
+title: "Grades"
+---
+radar-beta
+  axis m["Math"], s["Science"], e["English"]
+  axis h["History"], g["Geography"], a["Art"]
+  curve a["Alice"]{85, 90, 80, 70, 75, 90}
+  curve b["Bob"]{70, 75, 85, 80, 90, 85}
+
+  max 100
+  min 0
+```
+
+## Treemap
+
+```mermaid
+---
+config:
+  treemap:
+    valueFormat: '$0,0'
+---
+treemap-beta
+"Budget"
+    "Operations"
+        "Salaries": 700000
+        "Equipment": 200000
+        "Supplies": 100000
+    "Marketing"
+        "Advertising": 400000
+        "Events": 100000
+```
+
+---
+
+The above test cases cover the main Mermaid diagram types, including:
+
+**Core Diagrams:**
+
+- Flowcharts, Sequence Diagrams, Gantt Charts
+- Class Diagrams, State Diagrams, Entity Relationship Diagrams
+- User Journey, Git Graph, Pie Charts
+
+**Advanced Diagrams:**
+
+- Quadrant Charts, Timeline, Mindmaps
+- XY Charts, Requirement Diagrams, C4 Architecture
+- ZenUML, Sankey, Block Diagrams
+
+**Experimental Diagrams (🔥):**
+
+- Packet, Kanban, Architecture
+- Radar Charts, Treemap
+
+Each diagram type provides examples using both code block and shortcode syntax.
@@ -0,0 +1,29 @@
+---
+title: Custom Script & Style Test
+date: 2025-09-16T09:57:28+08:00
+collections:
+  - Tests
+categories:
+  - Shortcodes
+tags:
+  - Script
+  - Style
+---
+
+Testing custom script and style by shortcode in FixIt theme.
+
+<!--more-->
+
+## Script
+
+{{< script >}}
+console.log('Hello FixIt!');
+{{< /script >}}
+
+See the output in the console of the developer tool.
+
+## Style
+
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
+{{< /style >}}
@@ -0,0 +1,218 @@
+---
+title: Tabs Comprehensive Test Cases
+date: 2025-09-09T10:00:00+08:00
+collections:
+- Tests
+categories:
+- Shortcodes
+tags:
+- Tabs
+- UI Components
+---
+
+Testing various configurations and nested scenarios for the Tabs shortcode.
+
+{{< tabs >}}
+{{% tab title="Test Cases" %}}See Types section for various test cases.{{% /tab %}}
+{{% tab title="Nested Tabs" %}}See Nested Tabs section for examples.{{% /tab %}}
+{{< /tabs >}}
+
+<!--more-->
+
+## Types
+
+### Underline (Default)
+
+<!-- placement: top, bottom, left, right -->
+
+{{< tabs placement="top" >}}
+{{% tab title="Tab 1" %}}Content for underline style tab 1{{% /tab %}}
+{{% tab title="Tab 2" %}}Content for underline style tab 2{{% /tab %}}
+{{% tab title="Tab 3" %}}Content for underline style tab 3{{% /tab %}}
+{{< /tabs >}}
+
+### Pill
+
+<!-- placement: top, bottom, left, right -->
+
+{{< tabs type="pill" placement="top" >}}
+{{% tab title="Tab 1" %}}Content for pill style tab 1{{% /tab %}}
+{{% tab title="Tab 2" %}}Content for pill style tab 2{{% /tab %}}
+{{% tab title="Tab 3" %}}Content for pill style tab 3{{% /tab %}}
+{{< /tabs >}}
+
+### Card
+
+<!-- placement: top, bottom, left, right -->
+
+{{< tabs type="card" placement="top" >}}
+{{% tab title="Tab 1" %}}Content for card style tab 1{{% /tab %}}
+{{% tab title="Tab 2" %}}Content for card style tab 2{{% /tab %}}
+{{% tab title="Tab 3" %}}Content for card style tab 3{{% /tab %}}
+{{< /tabs >}}
+
+### Segment
+
+{{< tabs type="segment" >}}
+{{% tab title="Tab 1" %}}Content for segment style tab 1{{% /tab %}}
+{{% tab title="Tab 2" %}}Content for segment style tab 2{{% /tab %}}
+{{% tab title="Tab 3" %}}Content for segment style tab 3{{% /tab %}}
+{{< /tabs >}}
+
+## Nested Tabs
+
+{{< tabs defaultTab=0 >}}
+
+{{% tab title="Outer Tab 1" %}}
+This is the first outer tab with simple content.
+
+**Features:**
+
+- Basic text content
+- No nested components
+- Simple layout
+{{% /tab %}}
+
+{{% tab title="Outer Tab 2" %}}
+This outer tab contains nested tabs inside:
+
+{{< tabs type="pill" defaultTab=1 >}}
+
+{{% tab title="Inner A" %}}
+Nested tab A content with **bold text** and _italic text_.
+
+```javascript
+console.log('Hello from nested tab A!')
+```
+
+{{% /tab %}}
+
+{{% tab title="Inner B" %}}
+Nested tab B content with a list:
+
+1. First item
+2. Second item
+3. Third item
+
+> This is a blockquote inside a nested tab.
+{{% /tab %}}
+
+{{% tab title="Inner C" %}}
+Nested tab C with a table:
+
+| Feature    | Status | Notes                  |
+| :--------- | :----- | :--------------------- |
+| Responsive | ✅     | Works on all devices   |
+| Accessible | ✅     | Screen reader friendly |
+| Fast       | ✅     | Optimized performance  |
+
+{{% /tab %}}
+
+{{< /tabs >}}
+
+{{% /tab %}}
+
+{{% tab title="Outer Tab 3" %}}
+This tab contains vertical nested tabs:
+
+{{< tabs type="card" vertical=true >}}
+
+{{% tab title="Vertical A" %}}
+Content for vertical nested tab A.
+
+- Feature 1
+- Feature 2
+- Feature 3
+{{% /tab %}}
+
+{{% tab title="Vertical B" %}}
+Content for vertical nested tab B.
+
+```css
+.example {
+  color: #333;
+  background: #f5f5f5;
+  padding: 1rem;
+}
+```
+
+{{% /tab %}}
+
+{{< /tabs >}}
+
+{{% /tab %}}
+
+{{< /tabs >}}
+
+## Others
+
+### Mermaid Diagram inside Tabs
+
+{{< tabs >}}
+{{% tab title="Flowchart" %}}
+
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -->|Yes| C[OK]
+    C --> D[Rethink]
+    D --> B
+    B ---->|No| E[End]
+```
+
+{{% /tab %}}
+{{% tab title="Gantt Chart" %}}
+
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+```
+
+{{% /tab %}}
+{{< /tabs >}}
+
+### File Tree inside Tabs
+
+{{< tabs >}}
+{{% tab title="File Tree Shortcode" %}}
+
+{{< file-tree >}}
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+{{< /file-tree >}}
+
+{{% /tab %}}
+{{% tab title="File Tree Code Block" %}}
+
+```file-tree
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+```
+
+{{% /tab %}}
+{{< /tabs >}}
@@ -0,0 +1,50 @@
+---
+title: Task List Rendering Test
+date: 2026-02-28T08:54:02+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Task List
+---
+
+This post tests the rendering of task lists in Markdown.
+
+<!--more-->
+
+## Basic Task Lists
+
+- [ ] Unchecked Task
+- [x] Checked Task
+- Regular list item
+
+## Nested Task Lists (Bug Fix Verification)
+
+- [ ] Parent Task 1
+  - [ ] Child Task 1.1
+  - [x] Child Task 1.2
+  - Regular list item
+- [x] Parent Task 2
+  - [ ] Child Task 2.1
+    - [ ] Grandchild Task 2.1.1
+    - [x] Grandchild Task 2.1.2
+
+## Extended Task Lists (Custom Icons)
+
+- [-] Cancelled Task
+- [/] In Progress Task
+- [<] Scheduled Task
+- [>] Rescheduled Task
+- [!] Important Task
+- [?] Question Task
+- Regular list item
+
+## Mixed Content in List Items
+
+- [ ] Task with **bold** and _italic_ text
+- [x] Task with `inline code`
+- [ ] Task with [some link](https://github.com/hugo-fixit/FixIt)
+- [ ] Multi-line task
+  that spans across multiple lines
+  and still renders correctly as a single list item.
@@ -0,0 +1,38 @@
+- name: my-project
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: index.ts
+          type: file
+        - name: components
+          type: dir
+          children:
+            - name: Header.tsx
+              type: file
+            - name: Footer.tsx
+              type: file
+        - name: utils
+          type: dir
+          children:
+            - name: helper.ts
+              type: file
+            - name: validator.ts
+              type: file
+    - name: public
+      type: dir
+      children:
+        - name: favicon.ico
+          type: file
+        - name: images
+          type: dir
+          children:
+            - name: logo.png
+              type: file
+    - name: package.json
+      type: file
+    - name: README.md
+      type: file
+    - name: tsconfig.json
+      type: file
@@ -0,0 +1,51 @@
+# -------------------------------------------------------------------------------------
+# Hugo Configuration
+# See: https://gohugo.io/configuration/all/
+# -------------------------------------------------------------------------------------
+
+title = "Hugo FixIt TEST"
+baseURL = "https://demo.fixit.lruihao.cn/test/"
+ignoreLogs = [ "warning-file-tree" ]
+
+[permalinks]
+
+[permalinks.page]
+posts = "/units/:slugorcontentbasename"
+
+[permalinks.section]
+posts = "/units/"
+
+[markup]
+_merge = "shallow"
+
+[outputs]
+_merge = "shallow"
+
+# -------------------------------------------------------------------------------------
+# Taxonomies Configuration
+# See: https://gohugo.io/content-management/taxonomies/#configure-taxonomies
+# -------------------------------------------------------------------------------------
+
+[taxonomies]
+_merge = "shallow"
+
+# -------------------------------------------------------------------------------------
+# Theme Core Configuration
+# See: https://fixit.lruihao.cn/documentation/basics/#theme-configuration
+# -------------------------------------------------------------------------------------
+
+[params]
+version = "0.3.X"
+
+[params.page]
+collectionList = true
+collectionNavigation = true
+
+[params.author]
+name = "Lruihao"
+email = ""
+link = "https://lruihao.cn"
+avatar = "https://lruihao.cn/images/avatar.jpg"
+
+[params.mermaid]
+zenuml = "https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs"
@@ -0,0 +1,8 @@
+{
+  "name": "@hugo-fixit/test",
+  "private": true,
+  "scripts": {
+    "build": "hugo --themesDir ../../.. --theme $PWD/../.. --gc --minify --logLevel info",
+    "dev": "hugo server --themesDir ../../.. --theme $PWD/../.. -D --disableFastRender --navigateToChanged --ignoreCache -O"
+  }
+}
@@ -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
 ---
@@ -1,31 +1,44 @@
 ---
-title: "{{ replace .TranslationBaseName "-" " " | title }}"
-subtitle: ""
-type: "friends"
+title: {{ replace .TranslationBaseName "-" " " | title }}
+subtitle:
+layout: friends
 date: {{ .Date }}
-description: "{{ .Site.Author.name }}'s friends"
-keywords: 
-  - Hugo
-  - friends 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. -->
+<!-- The `friends.yml` file placed in the `yourProject/data/` directory will be loaded automatically here. -->
+
 ---
+
 <!-- You can define additional content below for this page. -->
+
 ## Base info

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

 ## Friendly Reminder

-{{< admonition info "Notice" true >}}
-1. If you want to exchange link, please leave a comment in the above format. (personal non-commercial blogs / websites only)
-2. Warn: Website failure, stop maintenance and improper content may be cancelled!
-3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
-{{< /admonition >}}
+Comment like this:
+
+````markdown {mode=mac}
+```yaml
+- nickname: <your nickname>
+  avatar: <your avatar>
+  url: <your site link>
+  description: <description of your site>
+```
+````
+
+> [!NOTE]
+>
+> 1. If you want to exchange link, please leave a comment as the above format. (personal non-commercial blogs / websites only)
+> 2. :(fa-solid fa-exclamation-triangle): Website failure, stop maintenance and improper content may be unlinked!
+> 3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
@@ -1,10 +0,0 @@
---
-type: "offline"
-description: "{{ T "offlineTitle" }} - {{ .Site.Title }}"
-keywords: 
-  - PWA
-  - offline
-  - 离线
---
-
-<!-- You need do nothing for this page. -->
@@ -1,40 +1,41 @@
 ---
-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:
 comment: false
 weight: 0
-
 tags:
- draft
+  - draft
 categories:
- draft
-
+  - draft
 hiddenFromHomePage: false
 hiddenFromSearch: false
-
-summary: ""
+hiddenFromRelated: false
+hiddenFromFeed: false
+summary:
 resources:
- name: featured-image
-  src: featured-image.jpg
- name: featured-image-preview
-  src: featured-image-preview.jpg
-
-toc:
-  enable: true
-math:
+  - name: featured-image
+    src: featured-image.jpg
+  - name: featured-image-preview
+    src: featured-image-preview.jpg
+password:
+message:
+repost:
  enable: false
-lightgallery: false
-seo:
-  images: []
+  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-->
+<!--more-->
+
+<!-- Place resource files in the current article directory and reference them using relative paths, like this: `![alt](images/screenshot.jpg)`. -->
@@ -1,40 +1,36 @@
 ---
-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:
 comment: false
 weight: 0
-
 tags:
- draft
+  - draft
 categories:
- draft
-
+  - draft
 hiddenFromHomePage: false
 hiddenFromSearch: false
-
-summary: ""
-resources:
- name: featured-image
-  src: featured-image.jpg
- name: featured-image-preview
-  src: featured-image-preview.jpg
-
-toc:
-  enable: true
-math:
+hiddenFromRelated: false
+hiddenFromFeed: false
+summary:
+featuredImagePreview:
+featuredImage:
+password:
+message:
+repost:
  enable: false
-lightgallery: false
-seo:
-  images: []
+  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-->
@@ -0,0 +1,7 @@
+---
+title: {{ T "assets.search" }}
+layout: search
+date: {{ .Date }}
+description:
+keywords:
+---
@@ -1,69 +1,82 @@
+@import "../../lib/normalize/normalize";
+
 html {
-  font-family: $global-font-family;
-  font-weight: $global-font-weight;
+  font-family: fixit-var(global-font-family);
+  font-weight: fixit-var(global-font-weight);
  font-display: swap;
-  font-size: $global-font-size;
-  line-height: $global-line-height;
+  font-size: fixit-var(global-font-size);
+  line-height: fixit-var(global-line-height);
  width: 100%;
  scroll-behavior: smooth;
-  overflow: overlay;
-}
+  overflow: auto;

-@media screen and (prefers-reduced-motion: reduce) {
-  html {
+  @include media('reduce-motion') {
    scroll-behavior: auto;
  }
 }

-/* scrollbar, only support webkit */
-::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: $scrollbar-color;
-  @include border-radius($global-border-radius);
-
-  &:hover {
-    background-color: $scrollbar-hover-color;
-  }
-}
-
 ::selection {
-  background-color: $selection-color;
-
-  [theme='dark'] & {
-    background-color: $selection-color-dark;
-  }
+  background-color: fixit-var(selection-color);
 }

 body {
-  background-color: $global-background-color;
-  color: $global-font-color;
+  background-color: fixit-var(global-background-color);
+  color: fixit-var(global-font-color);
  @include overflow-wrap(break-word);
-  scrollbar-color: auto;
-
-  &[theme='dark'] {
-    color: $global-font-color-dark;
-    background-color: $global-background-color-dark;
-  }
-}
-
-img {
-  @include object-fit(contain);
-  @include border-radius($global-border-radius/2);
 }

 iframe {
-  @include border-radius($global-border-radius);
+  border: 0;
+  @include border-radius;
 }

-@include ms;
-@include link(true, true);
+[role='button'] {
+  cursor: pointer;
+}

-@import '../_partial/mask';
-@import '../_partial/icon';
-@import '../_partial/details';
-@import '../_partial/fixed-button';
-@import '../_partial/cookieconsent';
+summary {
+  cursor: pointer;
+}
+
+abbr[title] {
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
+
+img {
+  object-fit: cover;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+  @include border-radius;
+}
+
+dialog {
+  padding: 0;
+}
+
+details {
+  &.center {
+    summary {
+      text-align: center;
+    }
+  }
+}
+
+%code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: fixit-var(code-font-size);
+  line-height: fixit-var(code-font-size);
+  font-family: fixit-var(code-font-family);
+  color: fixit-var(code-color);
+  background-color: fixit-var(code-inline-background-color);
+  text-decoration: inherit;
+  @include border-radius;
+  @include overflow-wrap(break-word);
+}
+
+@include link(true, true);
@@ -0,0 +1,99 @@
+// ==============================
+// 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;
+}
+
+.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: fixit-var(#{$color}) !important;
+  }
+}
+
+@each $key, $value in $orders {
+  .order-#{$key} {
+    order: #{$value} !important;
+  }
+}
+
+.variant-numeric {
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+.rounded-full {
+  @include border-radius(full);
+}
+
+// auto adapt to dark mode by inverting the color and hue
+.auto-dark-mode {
+  [data-theme=dark] & {
+    filter: invert(1) hue-rotate(0.5turn);
+  }
+}
+
+// print view helper
+.page-break-before {
+  break-before: page;
+}
+
+.page-break-after {
+  break-after: page;
+}
+
+@include media('xs', 'up') {
+  .d-none-desktop {
+    display: none;
+  }
+}
+
+@include media('xs') {
+  .d-none-mobile {
+    display: none !important;
+  }
+}
+
+@include media('print') {
+  @page {
+    size: A4 portrait;
+    margin: 1.27cm;
+  }
+
+  .d-none-print {
+    display: none !important;
+  }
+}
@@ -0,0 +1,6 @@
+@import "_mixin";
+@import "_base";
+@import "_common";
+@import "_root";
+@import "_layout";
+@import '_widgets';
@@ -1,27 +0,0 @@
-/** Layout **/
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  width: 100%;
-
-  main {
-    flex: 1 0 auto;
-
-    aside:first-child {
-      order: 2;
-    }
-
-    &.container {
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      padding: 0 1rem;
-    }
-
-    &.container-reverse {
-      @extend .container;
-      flex-direction: row-reverse;
-    }
-  }
-}
@@ -0,0 +1,77 @@
+.breadcrumb-container {
+  padding-inline: 1rem;
+  font-size: 0.75rem;
+  background-color: fixit-var(global-background-color);
+  display: flex;
+  gap: 0.5rem;
+  @include z-index(sticky);
+
+  &:has(~ main[data-reverse]) {
+    flex-direction: row-reverse;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    padding-inline: 0.5rem;
+
+    @include media('sm', 'down') {
+      display: none;
+    }
+  }
+
+  &.sticky {
+    position: sticky;
+    top: fixit-var(header-height);
+
+    @include media('sm', 'up') {
+      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']) &+.fi-container .content [id] {
+        scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
+      }
+    }
+
+    @include media('xs') {
+      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']) &+.fi-container .content [id] {
+        scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
+      }
+    }
+  }
+
+  .breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.5rem 0;
+    margin: 0 auto;
+    list-style: none;
+    border-bottom: 1px inset fixit-var(global-border-color);
+    @extend %page-style;
+
+    .breadcrumb-item {
+      display: flex;
+
+      + .breadcrumb-item::before {
+        content: attr(data-separator);
+        display: inline-block;
+        padding-inline: 0.5rem;
+        color: fixit-var(global-placeholder-color);
+      }
+
+      &.active {
+        color: fixit-var(secondary);
+      }
+    }
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}
@@ -6,33 +6,35 @@ footer {
  padding: 1rem 0;

  .footer-container {
+    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: 0.25rem;
        margin-right: 0.25rem;
      }

-      .fixit-icon {
-        top: 0.25em;
-      }
-
      .animate-icon {
        color: #dc143c;
        animation: icon-animate 1.33s ease-in-out infinite;
      }
+    }

-      .run-times {
-        font-variant-numeric: tabular-nums lining-nums;
-      }
+    @include media('xs') {
+      font-size: 0.618rem;
    }
  }

  @include blur;
+
+  @include media('print') {
+    display: none !important;
+  }
 }

@keyframes icon-animate {
@@ -0,0 +1,613 @@
+header {
+  width: 100%;
+  background-color: fixit-var(header-background-color);
+  transition: box-shadow 0.3s ease;
+  @include z-index(fixed);
+
+  &:hover {
+    box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1);
+
+    [data-theme=dark] & {
+      box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}
+
+.header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.header-title {
+  font-size: fixit-var(header-title-font-size);
+  font-family: fixit-var(header-title-font-family);
+  font-weight: bold;
+  margin-right: 0.5rem;
+  min-width: 10%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 10;
+
+  .logo {
+    min-height: 1.5em;
+    height: 1.5em;
+    width: auto;
+    vertical-align: top;
+    transform: translateY(calc(#{fixit-var(header-height)} / 2 - 50%));
+  }
+
+  .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-divider {
+    list-style: none;
+    margin: 0.25rem 0.5rem;
+    height: 1px;
+    background-color: fixit-var(menu-border-color);
+  }
+
+  .menu-item {
+    list-style: none;
+
+    .dropdown-icon {
+      margin-left: 0.25rem;
+      font-size: .875em;
+      color: fixit-var(global-font-color);
+
+      &.open::before {
+        content: "\f078";
+      }
+    }
+
+    &.active {
+      >.menu-link,
+      >.nested-item>.menu-link {
+        font-weight: bold;
+        color: fixit-var(menu-active-color);
+      }
+    }
+
+    .menu-link[href="javascript:void(0);"] {
+      color: inherit;
+    }
+
+    .menu-link i {
+      transform: perspective(1rem);
+      transition: transform 0.4s ease;
+    }
+
+    .menu-link:hover i {
+      transform: perspective(1rem) translateZ(0.2rem);
+    }
+  }
+}
+
+.menu .search {
+  position: relative;
+
+  input {
+    color: transparent;
+    box-sizing: border-box;
+    height: 2.5rem;
+    width: 1.25rem;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    vertical-align: baseline !important;
+    transition: width 0.3s ease;
+    @include border-radius(0.5rem);
+  }
+
+  @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: fixit-var(global-font-color);
+      background-color: fixit-var(search-background-color);
+      padding: 0 2rem 0 2rem;
+    }
+
+    @include placeholder;
+
+    .search-button {
+      color: fixit-var(global-placeholder-color);
+    }
+
+    .search-clear:hover {
+      color: #ff6b6b;
+    }
+
+    .search-toggle:hover {
+      cursor: default;
+    }
+  }
+}
+
+.theme-switch {
+  i {
+    transform: rotate(225deg);
+    transition: all 0.4s ease;
+  }
+}
+
+#header-desktop {
+  display: block;
+  position: sticky;
+  top: 0;
+  height: fixit-var(header-height);
+  line-height: fixit-var(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, fixit-var(header-height));
+    height: 100%;
+
+    &[data-github-corner='right'] {
+      padding-right: fixit-var(header-height);
+    }
+
+    .header-title {
+      height: 100%;
+    }
+
+    .menu {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      float: right;
+
+      > .menu-item {
+        &:hover .sub-menu {
+          display: block;
+          transform: translateX(-0.5rem);
+        }
+        &.theme-switch {
+          &:hover i {
+            transform: rotate(45deg);
+          }
+        }
+        &.language-switch:hover .sub-menu {
+          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 fixit-var(global-border-color-weight);
+        }
+      }
+
+      .sub-menu {
+        position: absolute;
+        margin: 0;
+        padding: 0.25rem 0;
+        display: none;
+        top: calc(#{fixit-var(header-height)} - 0.75rem);
+        border: 1px solid fixit-var(menu-border-color);
+        background-color: fixit-var(header-background-color);
+        max-height: 60vh;
+        overflow-y: auto;
+        @include border-radius;
+        transition: box-shadow 0.3s ease;
+        box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1);
+
+        [data-theme=dark] & {
+          box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1);
+        }
+
+        .menu-item {
+          height: fixit-var(submenu-height);
+          line-height: fixit-var(submenu-height);
+          max-width: 15rem;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow-x: hidden;
+        }
+      }
+    }
+
+    @include media('md', 'down') {
+      padding-inline-end: 1rem;
+    }
+
+    @include media('sm', 'down') {
+      padding-inline-start: 1rem;
+    }
+  }
+
+  &.open .header-wrapper .menu .menu-item.search {
+    input {
+      width: 24rem;
+    }
+  }
+
+  @include media('xs') {
+    display: none;
+  }
+}
+
+#header-mobile {
+  display: none;
+  position: sticky;
+  top: 0;
+  min-height: fixit-var(header-height);
+  line-height: fixit-var(header-height);
+
+  [data-header-mobile='normal'] & {
+    position: static;
+  }
+
+  .header-container {
+    padding: 0;
+    margin: 0;
+
+    .header-wrapper {
+      padding: 0 1rem;
+      font-size: 1.125rem;
+      transition: margin-top 0.3s ease;
+
+      .header-title {
+        max-width: 80%;
+      }
+
+      .theme-switch {
+        line-height: 1.25em;
+      }
+
+      .menu-toggle {
+        span {
+          display: block;
+          background-color: fixit-var(global-font-color);
+          width: 20px;
+          height: 2px;
+          @include border-radius(full);
+          transition: all 0.3s ease-in-out;
+        }
+
+        span:not(:last-child) {
+          margin-bottom: 6px;
+        }
+
+        &.active {
+          span:nth-child(1) {
+            transform: translateY(8px) rotate(45deg);
+          }
+
+          span:nth-child(2) {
+            opacity: 0;
+          }
+
+          span:nth-child(3) {
+            transform: translateY(-8px) rotate(-45deg);
+          }
+        }
+      }
+    }
+
+    .menu {
+      background-color: fixit-var(header-background-color);
+      border-top: 2px solid fixit-var(global-border-color-light);
+      display: none;
+      overflow-y: auto;
+      max-height: 70vh;
+      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+      @include scrollbar-width(none, 0);
+
+      [data-theme=dark] & {
+        box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
+      }
+
+      .search-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 0.5rem 1rem;
+        line-height: 2.5rem;
+        position: sticky;
+        top: 0;
+        background-color: fixit-var(header-background-color);
+        @include z-index(sticky);
+      }
+
+      .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: #f2f2f3;
+
+          [data-theme=dark] & {
+            background-color: #535355;
+          }
+        }
+
+        .menu-link {
+          display: block;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow-x: hidden;
+          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: fixit-var(header-background-color);
+
+        .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: #e7e7ea;
+
+          [data-theme=dark] & {
+            background-color: #5d5d5f;
+          }
+        }
+      }
+
+      &.active {
+        display: block;
+      }
+    }
+  }
+
+  &.open {
+    .header-wrapper {
+      margin-top: calc(#{fixit-var(header-height)} * -1);
+    }
+
+    .menu {
+      padding-top: 0;
+      border-top: none;
+
+      .menu-item {
+        display: none;
+      }
+
+      .search-cancel {
+        display: inline;
+      }
+    }
+  }
+
+  @include media('xs') {
+    display: block;
+  }
+}
+
+.search-dropdown {
+  position: fixed;
+  top: fixit-var(header-height);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+  @include z-index(fixed);
+
+  [data-theme=dark] & {
+    box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
+  }
+
+  &.desktop {
+    right: 2rem;
+    width: 30rem;
+
+    @include media('md', 'down') {
+      right: 1rem;
+    }
+  }
+
+  &.mobile {
+    right: 0;
+    width: 100%;
+  }
+
+  .dropdown-menu {
+    right: 0 !important;
+    background-color: fixit-var(global-background-color);
+
+    .suggestions {
+      overflow-y: auto;
+      // 41px is the height of the search-footer
+      max-height: calc(100dvh - #{fixit-var(header-height)} - 41px);
+
+      .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: fixit-var(secondary);
+        }
+
+        .suggestion-context {
+          display: -webkit-box;
+          line-height: 1.25rem;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          color: fixit-var(global-placeholder-color);
+          @include overflow-wrap(break-word);
+        }
+
+        em {
+          font-style: normal;
+          background-color: fixit-var(selection-color);
+        }
+
+        &.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: fixit-var(secondary);
+      @include link(false, false);
+
+      a {
+        font-size: 1rem;
+      }
+    }
+  }
+}
@@ -0,0 +1,82 @@
+// Responsive layout
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+
+  main {
+    flex: 1 0 auto;
+
+    aside {
+      flex: 1;
+      padding: 0.5rem;
+      max-width: 500px;
+
+      &:not(:has(~ aside)) {
+        display: none;
+      }
+
+      @include media('sm', 'down') {
+        display: none !important;
+      }
+    }
+
+    &.fi-container {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding-inline: 1rem;
+      gap: 0.5rem;
+
+      &[data-reverse] {
+        flex-direction: row-reverse;
+      }
+
+      &:has(.home:not(.posts)) {
+        align-items: center;
+      }
+    }
+  }
+
+  @include media('md') {
+    main {
+      // hide empty aside and expand article when only one aside is empty
+      aside:first-child:empty:has(~ aside:not(:empty)),
+      aside:first-child:not(:empty) ~ aside#toc-auto:empty {
+        display: none;
+      }
+  
+      aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
+      aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
+        flex: 3;
+      }
+    }
+
+    // adjust breadcrumb flex when asides are empty
+    &:has(main > aside:first-child:empty ~ aside:not(:empty)) .breadcrumb-container {
+      .breadcrumb {
+        flex: 3;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+    &:has(main > aside:first-child:not(:empty) ~ aside#toc-auto:empty) .breadcrumb-container {
+      .breadcrumb {
+        flex: 3;
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+@import "header";
+@import "breadcrumb";
+@import "page-style";
+@import "pagination";
+@import "footer";
@@ -0,0 +1,47 @@
+%page-style {
+  @include media('xl') {
+    width: ROUND(60%, 2px);
+    max-width: 1200px;
+  }
+
+  @include media('lg') {
+    width: ROUND(56%, 2px);
+  }
+
+  @include media('md') {
+    width: ROUND(52%, 2px);
+  }
+
+  @include media('sm') {
+    width: ROUND(80%, 2px);
+  }
+
+  @include media('xs') {
+    width: 100%;
+  }
+}
+
+[data-page-style='wide'] {
+  %page-style {
+    @include media('xl') {
+      width: ROUND(64%, 2px);
+      max-width: 1600px;
+    }
+
+    @include media('lg') {
+      width: ROUND(60%, 2px);
+    }
+
+    @include media('md') {
+      width: ROUND(56%, 2px);
+    }
+  }
+}
+
+[data-page-style='narrow'] {
+  %page-style {
+    @include media('xl') {
+      max-width: 800px;
+    }
+  }
+}
@@ -0,0 +1,77 @@
+.pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  list-style: none;
+  white-space: nowrap;
+  width: 100%;
+  padding: 1rem 0;
+
+  a {
+    font-size: 0.8rem;
+    color: fixit-var(pagination-link-color);
+    letter-spacing: 0.1rem;
+    font-weight: 700;
+    padding: 5px 5px;
+    text-decoration: none;
+    transition: 0.3s;
+  }
+
+  li {
+    padding: 5px;
+    margin: 0 10px;
+    box-sizing: border-box;
+    position: relative;
+    display: inline;
+
+    &.disabled {
+      display: none;
+    }
+
+    &:hover a {
+      color: fixit-var(pagination-link-hover-color);
+    }
+
+    &::before,
+    &::after {
+      position: absolute;
+      content: '';
+      width: 0;
+      height: 3px;
+      background: fixit-var(pagination-link-hover-color);
+      bottom: 0px;
+      transition: 0.3s;
+    }
+
+    &::before {
+      left: 50%;
+    }
+
+    &::after {
+      right: 50%;
+    }
+
+    &:hover {
+      &::before,
+      &::after {
+        width: 50%;
+      }
+    }
+
+    &.active {
+      a {
+        color: fixit-var(pagination-link-hover-color);
+      }
+
+      &::before,
+      &::after {
+        width: 50%;
+      }
+    }
+
+    @include media('xs') {
+      margin: 0 5px;
+    }
+  }
+}
@@ -1,160 +0,0 @@
-@media only screen and (min-width: 1441px) {
-  .page {
-    width: 60%;
-
-    [page-style='wide'] & {
-      width: 64%;
-    }
-
-    [page-style='narrow'] & {
-      max-width: 800px;
-    }
-  }
-
-  aside {
-    width: 20%;
-
-    [page-style='wide'] & {
-      width: 18%;
-    }
-
-    [page-style='narrow'] & {
-      width: calc(50% - 400px);
-    }
-  }
-}
-
-@media only screen and (max-width: 1440px) {
-  .page {
-    width: 56%;
-
-    [page-style='wide'] & {
-      width: 60%;
-    }
-  }
-
-  aside {
-    width: 22%;
-
-    [page-style='wide'] & {
-      width: 20%;
-    }
-  }
-}
-
-@media only screen and (max-width: 1200px) {
-  .page {
-    width: 52%;
-
-    [page-style='wide'] & {
-      width: 56%;
-    }
-  }
-
-  aside {
-    width: 24%;
-
-    [page-style='wide'] & {
-      width: 22%;
-    }
-  }
-
-  #header-desktop .header-wrapper {
-    padding-right: 1rem;
-  }
-
-  .search-dropdown.desktop {
-    right: 1rem;
-  }
-}
-
-@media only screen and (max-width: 960px) {
-  aside {
-    display: none !important;
-  }
-
-  #toc-static {
-    display: block;
-  }
-
-  .page {
-    width: 80% !important;
-  }
-
-  #header-desktop .header-wrapper {
-    padding-left: 1rem;
-  }
-}
-
-@media only screen and (max-width: 680px) {
-  #header-desktop {
-    display: none;
-  }
-
-  #header-mobile {
-    display: block;
-  }
-
-  .page {
-    width: 100% !important;
-
-    .content {
-      [id] {
-        [header-mobile='normal'] & {
-          scroll-margin-top: 0;
-        }
-      }
-    }
-
-    .categories-card {
-      .card-item {
-        width: 100%;
-      }
-    }
-  }
-
-  footer {
-    .footer-container {
-      font-size: 0.618rem;
-    }
-  }
-}
-
-@media only print {
-  @page {
-    size: A4 portrait;
-    margin: 1.27cm;
-  }
-
-  .page {
-    width: 100% !important;
-    padding-top: 0 !important;
-
-    .single-title,
-    .single-subtitle,
-    .post-meta {
-      text-align: center;
-    }
-
-    h1:not(.single-title),
-    .page-break-before {
-      page-break-before: always;
-    }
-
-    .page-break-after {
-      page-break-after: always;
-    }
-  }
-
-  .print-d-none,
-  header,
-  footer .footer-line:not(.powered):not(.copyright),
-  #toc-auto,
-  .post-info-share,
-  .post-info-more section:last-child,
-  .post-nav,
-  #fixed-buttons,
-  #comments {
-    display: none !important;
-  }
-}
@@ -0,0 +1,6 @@
+@mixin blur {
+  // TODO refactor blur with backdrop-filter
+  .blur & {
+    filter: blur(1.5px);
+  }
+}
@@ -0,0 +1,26 @@
+/// Mixin to set border-radius
+/// @param {String|Number|List} $value - The value of the border-radius, position (top, bottom, left, right) or keyword (full)
+/// @param {Number} $radius - The radius of the border (only for position)
+/// @example
+///   @include border-radius;
+///   @include border-radius(full);
+///   @include border-radius(top);
+///   @include border-radius(top, 10px);
+///   @include border-radius(10px 20px 10px 20px);
+@mixin border-radius($value: fixit-var(global-border-radius), $radius: null) {
+  $r: if($radius, $radius, fixit-var(global-border-radius));
+
+  @if $value == full {
+    border-radius: calc(infinity * 1px);
+  } @else if $value == top {
+    border-radius: $r $r 0 0;
+  } @else if $value == bottom {
+    border-radius: 0 0 $r $r;
+  } @else if $value == left {
+    border-radius: $r 0 0 $r;
+  } @else if $value == right {
+    border-radius: 0 $r $r 0;
+  } @else {
+    border-radius: $value;
+  }
+}
@@ -0,0 +1,26 @@
+/// Mixin to apply box-shadow with timing control
+/// @param {String} $when - When to show shadow: always | hover | never (default: always)
+/// @param {List} $shadow - The box-shadow value
+/// @example
+///   @include box-shadow;
+///   @include box-shadow(hover);
+///   @include box-shadow(never);
+///   @include box-shadow(always, 0 4px 8px rgba(0, 0, 0, 0.15));
+@mixin box-shadow(
+  $when: always,
+  $shadow: (0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04))
+) {
+  @if $when == always {
+    box-shadow: $shadow;
+  } @else if $when == hover {
+    transition: box-shadow 0.3s fixit-var(bezier);
+
+    &:hover {
+      box-shadow: $shadow;
+    }
+  } @else if $when == never {
+    box-shadow: none;
+  } @else {
+    @warn "box-shadow mixin: unknown $when value '#{$when}'. Expected always, hover, or never.";
+  }
+}
@@ -0,0 +1,33 @@
+@mixin placeholder($color: fixit-var(global-placeholder-color)) {
+  input::-webkit-input-placeholder {
+    color: $color;
+  }
+
+  input:-moz-placeholder {
+    color: $color;
+  }
+
+  input::-moz-placeholder {
+    color: $color;
+  }
+
+  input:-ms-input-placeholder {
+    color: $color;
+  }
+
+  input::placeholder {
+    color: $color;
+  }
+}
+
+// TODO Superseded by text-wrap: wrap; in modern browsers
+@mixin overflow-wrap($value) {
+  word-wrap: $value;
+  overflow-wrap: $value;
+}
+
+@mixin user-select($value) {
+  -webkit-user-select: $value !important;
+  -moz-user-select: $value !important;
+  user-select: $value !important;
+}
@@ -0,0 +1,10 @@
+@import 'blur';
+@import 'border-radius';
+@import 'box-shadow';
+@import 'compatibility';
+@import 'link';
+@import 'loading';
+@import 'media';
+@import 'scrollbar-width';
+@import 'theme-vars';
+@import 'z-index';
@@ -0,0 +1,50 @@
+/// 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;
+
+    @if $light {
+      color: $global-link-color;
+    }
+
+    @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 {
+    @if $light {
+      color: $global-link-hover-color;
+    }
+
+    @else {
+      color: $single-link-hover-color;
+    }
+
+    [data-theme=dark] & {
+      @if $dark {
+        color: $global-link-hover-color-dark;
+      }
+
+      @else {
+        color: $single-link-hover-color-dark;
+      }
+    }
+  }
+}
@@ -0,0 +1,15 @@
+// Loading Mixin for before/after pseudo element
+@mixin loading {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(1rem);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: fixit-var(loading-img);
+  background-size: 60px;
+  @include z-index(loading);
+}
@@ -0,0 +1,100 @@
+// Responsive breakpoints matching the project's media query design
+// ┌──────────────────────────────────────────────────────┐
+// │  xs   │    sm     │     md     │     lg     │   xl   │
+// │ ≤680  │ 681–960   │ 961–1200   │ 1201–1440  │ ≥1441  │
+// └──────────────────────────────────────────────────────┘
+$breakpoints: (
+  'xs': (
+    'min': null,
+    'max': 680px,
+  ),
+  'sm': (
+    'min': 681px,
+    'max': 960px,
+  ),
+  'md': (
+    'min': 961px,
+    'max': 1200px,
+  ),
+  'lg': (
+    'min': 1201px,
+    'max': 1440px,
+  ),
+  'xl': (
+    'min': 1441px,
+    'max': null,
+  ),
+) !default;
+
+/// Apply styles within a named media target.
+/// @param {String} $target - Target name: xs | sm | md | lg | xl | print | reduce-motion
+/// @param {String} $direction  - Range direction: only | up | down [default: only]
+///
+/// @example
+///   // xs: ≤ 680px
+///   @include media('xs') { ... }
+///   // sm: 681px – 960px
+///   @include media('sm') { ... }
+///   // md and above: ≥ 961px
+///   @include media('md', 'up') { ... }
+///   // lg and below: ≤ 1440px
+///   @include media('lg', 'down') { ... }
+///   // print media
+///   @include media('print') { ... }
+///   // reduced motion
+///   @include media('reduce-motion') { ... }
+@mixin media($target, $direction: 'only') {
+  @if $target == 'print' {
+    @media only print {
+      @content;
+    }
+  } @else if $target == 'reduce-motion' {
+    @media screen and (prefers-reduced-motion: reduce) {
+      @content;
+    }
+  } @else {
+    $range: map-get($breakpoints, $target);
+    $min: if($range != null, map-get($range, 'min'), null);
+    $max: if($range != null, map-get($range, 'max'), null);
+
+    @if $range == null {
+      @warn "Unknown media target `#{$target}`. Expected: xs, sm, md, lg, xl, print, reduce-motion.";
+    } @else if $direction == 'only' {
+      @if $min == null {
+        // xs: max-width only, no lower bound
+        @media only screen and (max-width: $max) {
+          @content;
+        }
+      } @else if $max == null {
+        // xl: min-width only, no upper bound
+        @media only screen and (min-width: $min) {
+          @content;
+        }
+      } @else {
+        @media only screen and (min-width: $min) and (max-width: $max) {
+          @content;
+        }
+      }
+    } @else if $direction == 'up' {
+      @if $min == null {
+        // xs-up: no lower bound, always applies
+        @content;
+      } @else {
+        @media only screen and (min-width: $min) {
+          @content;
+        }
+      }
+    } @else if $direction == 'down' {
+      @if $max == null {
+        // xl-down: no upper bound, always applies
+        @content;
+      } @else {
+        @media only screen and (max-width: $max) {
+          @content;
+        }
+      }
+    } @else {
+      @warn "Unknown direction `#{$direction}`. Expected: only, up, down.";
+    }
+  }
+}
@@ -0,0 +1,6 @@
+@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
+  @include set-fixit-vars((
+    scrollbar-width: $width,
+    scrollbar-width-legacy: $widthLegacy,
+  ));
+}
@@ -0,0 +1,80 @@
+// ========================================
+// Theme Variable Mixins and Functions
+// ========================================
+
+/// Get CSS variable with prefix
+/// @param {String} $name - CSS variable name (without prefix)
+/// @param {*} $fallback - Optional fallback value
+/// @return {String} - Complete CSS variable reference
+/// @example
+///   color: fixit-var(global-font-color);
+///   background: fixit-var(custom-bg, #fff);
+@function fixit-var($name, $fallback: null) {
+  @if $fallback {
+    @return var(#{$rootPrefix}#{$name}, #{$fallback});
+  } @else {
+    @return var(#{$rootPrefix}#{$name});
+  }
+}
+
+/// Set a single CSS variable
+/// @param {String} $name - CSS variable name (without prefix)
+/// @param {*} $value - Variable value
+/// @example
+///   @include set-fixit-var(custom-color, #ff0000);
+@mixin set-fixit-var($name, $value) {
+  #{$rootPrefix}#{$name}: #{$value};
+}
+
+/// Batch set CSS variables
+/// @param {Map} $vars - Variable map, key is CSS variable name (without prefix), value is variable value
+/// @example
+///   @include set-fixit-vars((
+///     custom-color: #ff0000,
+///     custom-bg: #00ff00,
+///   ));
+@mixin set-fixit-vars($vars) {
+  @each $name, $value in $vars {
+    #{$rootPrefix}#{$name}: #{$value};
+  }
+}
+
+/// Batch set theme color variables using global $theme-colors
+/// Generates light theme (in :root) and dark theme ([data-theme=dark]) variables
+@mixin set-theme-colors() {
+  // Light theme (in :root)
+  @at-root :root {
+    @each $name, $value in $theme-colors {
+      #{$rootPrefix}#{$name}: #{$value};
+    }
+  }
+
+  // Dark theme
+  @at-root [data-theme=dark] {
+    @each $name, $value in $theme-colors {
+      #{$rootPrefix}#{$name}: #{darken($value, 5%)};
+    }
+  }
+}
+
+/// Define dual-theme variables (generate definitions for both light and dark simultaneously)
+/// @param {Map} $vars - Variable map, key is CSS variable name, value is Map(light: $light-val, dark: $dark-val)
+/// @example
+///   @include define-theme-vars((
+///     global-background-color: (light: $global-background-color, dark: $global-background-color-dark)
+///   ));
+@mixin define-theme-vars($vars) {
+  // Light theme (in :root)
+  @at-root :root {
+    @each $name, $values in $vars {
+      #{$rootPrefix}#{$name}: #{map-get($values, light)};
+    }
+  }
+
+  // Dark theme
+  @at-root [data-theme=dark] {
+    @each $name, $values in $vars {
+      #{$rootPrefix}#{$name}: #{map-get($values, dark)};
+    }
+  }
+}
@@ -0,0 +1,25 @@
+$z-indexes: (
+  "hide": -1,
+  "auto": auto,
+  "base": 1,
+  "loading": 10,
+  "sticky": 100,
+  "fixed": 200
+) !default;
+
+/// Mixin to set z-index
+/// @param {String|Number} $key - The key of the z-index map or a raw number
+/// @param {Number} $diff - The difference to add to the z-index
+/// @example
+///   @include z-index(base);
+///   @include z-index(base, 1);
+@mixin z-index($key, $diff: 0) {
+  $z-index: map-get($z-indexes, $key);
+
+  @if $z-index {
+    z-index: $z-index + $diff;
+  } @else {
+    @warn "Unknown z-index key: `#{$key}`.";
+    z-index: $key + $diff;
+  }
+}
@@ -0,0 +1,140 @@
+// ================================================================================
+// CSS Custom Properties (CSS Variables)
+// ================================================================================
+// This file defines all CSS custom properties for the FixIt theme.
+// Variables are organized into two main categories:
+// 1. Theme-independent variables: fixed values (fonts, sizes, etc.)
+// 2. Theme-dependent variables: color values that support light/dark themes
+//
+// Theme-dependent variables are further categorized into:
+// - Core: Global layout and navigation colors
+// - Page Content: Article and post content colors
+// - Third-party: Extension and plugin colors
+//
+// These CSS variables enable runtime theme switching and customization.
+// ================================================================================
+
+:root {
+  interpolate-size: allow-keywords;
+
+  // ----------------------------------------
+  // Theme-Independent Variables
+  // ----------------------------------------
+  @include set-fixit-vars((
+    // Global Typography
+    global-font-family: $global-font-family,
+    global-font-size: $global-font-size,
+    global-font-weight: $global-font-weight,
+    global-line-height: $global-line-height,
+    global-scroll-margin-top: $global-scroll-margin-top,
+    global-border-radius: $global-border-radius,
+
+    // Header
+    header-height: $header-height,
+    header-title-font-family: $header-title-font-family,
+    header-title-font-size: $header-title-font-size,
+    submenu-height: $submenu-height,
+
+    // Single Content
+    toc-title-font-size: $toc-title-font-size,
+    toc-content-font-size: $toc-content-font-size,
+    collection-title-font-size: $collection-title-font-size,
+    collection-list-font-size: $collection-list-font-size,
+    related-title-font-size: $related-title-font-size,
+    related-list-font-size: $related-list-font-size,
+    reward-img-width: $reward-img-width,
+
+    // Code
+    code-font-size: $code-font-size,
+    code-block-font-size: $code-block-font-size,
+    code-font-family: $code-font-family,
+    code-error-color: $code-error-color,
+
+    // Scrollbar
+    scrollbar-track-color: transparent,
+    scrollbar-width: thin,
+    scrollbar-width-legacy: 12px,
+
+    // Animations
+    bezier: cubic-bezier(.4, 0, .2, 1),
+
+    // Other utilities
+    breadcrumb-height: 0px,
+    divider-edge-weak: linear-gradient(to right, transparent, fixit-var(divider-bg, #d0d0d5), transparent),
+    scroll-mt: calc(#{fixit-var(header-height)} + #{fixit-var(global-scroll-margin-top)}),
+  ));
+}
+
+// ----------------------------------------
+// Theme-Dependent Color Variables
+// ----------------------------------------
+
+// Theme colors variables
+@include set-theme-colors;
+
+// Core theme colors (global layout)
+@include define-theme-vars((
+  // Global
+  global-background-color: (light: $global-background-color, dark: $global-background-color-dark),
+  global-font-color: (light: $global-font-color, dark: $global-font-color-dark),
+  global-font-secondary-color: (light: $global-font-secondary-color, dark: $global-font-secondary-color-dark),
+  global-placeholder-color: (light: $global-placeholder-color, dark: $global-placeholder-color-dark),
+  global-link-color: (light: $global-link-color, dark: $global-link-color-dark),
+  global-link-hover-color: (light: $global-link-hover-color, dark: $global-link-hover-color-dark),
+  global-border-color: (light: $global-border-color, dark: $global-border-color-dark),
+  global-border-color-light: (light: lighten($global-border-color, 5%), dark: darken($global-border-color-dark, 5%)),
+  global-border-color-weight: (light: darken($global-border-color, 5%), dark: lighten($global-border-color-dark, 5%)),
+
+  // Header
+  header-background-color: (light: $header-background-color, dark: $header-background-color-dark),
+  menu-active-color: (light: $menu-active-color, dark: $menu-active-color-dark),
+  menu-border-color: (light: $menu-border-color, dark: $menu-border-color-dark),
+  search-background-color: (light: $search-background-color, dark: $search-background-color-dark),
+
+  // Selection
+  selection-color: (light: $selection-color, dark: $selection-color-dark),
+
+  // Scrollbar
+  scrollbar-color: (light: $scrollbar-color, dark: $scrollbar-color),
+  scrollbar-hover-color: (light: $scrollbar-hover-color, dark: $scrollbar-hover-color),
+  scrollbar-thumb-color: (light: $scrollbar-color, dark: $scrollbar-color),
+  scrollbar-thumb-hover-color: (light: $scrollbar-hover-color, dark: $scrollbar-hover-color),
+
+  // Tag Cloud
+  tag-cloud-start: (light: $tag-cloud-start, dark: $tag-cloud-start-dark),
+  tag-cloud-end: (light: $tag-cloud-end, dark: $tag-cloud-end-dark),
+
+  // Pagination
+  pagination-link-color: (light: $pagination-link-color, dark: $pagination-link-color-dark),
+  pagination-link-hover-color: (light: $pagination-link-hover-color, dark: $pagination-link-hover-color-dark),
+));
+
+// Page content theme colors
+@include define-theme-vars((
+  // Single Content
+  single-link-color: (light: $single-link-color, dark: $single-link-color-dark),
+  single-link-hover-color: (light: $single-link-hover-color, dark: $single-link-hover-color-dark),
+  table-background-color: (light: $table-background-color, dark: $table-background-color-dark),
+  table-thead-color: (light: $table-thead-color, dark: $table-thead-color-dark),
+  blockquote-color: (light: $blockquote-color, dark: $blockquote-color-dark),
+  reward-color: (light: $reward-color, dark: $reward-color-dark),
+
+  // Divider
+  hr-active-color: (light: lighten($single-link-hover-color, 4%), dark: darken($global-link-hover-color-dark, 4%)),
+
+  // Code
+  code-color: (light: $code-color, dark: $code-color-dark),
+  code-inline-background-color: (light: rgba(175, 184, 193, 0.2), dark: rgba(99, 110, 123, 0.4)),
+  code-block-background-color: (light: $code-background-color, dark: $code-background-color-dark),
+  code-header-color: (light: $code-header-color, dark: $code-header-color-dark),
+  code-header-background-color: (light: darken($code-background-color, 5%), dark: darken($code-background-color-dark, 5%)),
+  code-highlight-color: (light: $code-highlight-color, dark: $code-highlight-color-dark),
+  gist-meta-background-color: (light: darken($code-background-color, 5%), dark: darken($code-background-color-dark, 5%)),
+));
+
+// Third-party component theme colors (extensions and plugins)
+@include define-theme-vars((
+  // GitHub Corners
+  github-corner-color: (light: $github-corner-color, dark: $github-corner-color-dark),
+  github-corner-fill: (light: $github-corner-fill, dark: $github-corner-fill-dark),
+));
@@ -0,0 +1,11 @@
+body {
+  .cell-tooltip {
+    --tooltip-bg: #ffffff;
+    --tooltip-color: #0f172a;
+
+    [data-theme=dark] & {
+      --tooltip-bg: #39393c;
+      --tooltip-color: #e2e2e6;
+    }
+  }
+}
@@ -0,0 +1,15 @@
+.cc-window.cc-banner {
+  .cc-btn {
+    color: fixit-var(global-font-color);
+    background-color: fixit-var(global-background-color);
+
+    &:hover,
+    &:focus {
+      background-color: #ccc;
+
+      [data-theme=dark] & {
+        background-color: #444;
+      }
+    }
+  }
+}
@@ -0,0 +1,47 @@
+.details {
+  > .details-summary {
+    transition: border-radius 0.2s ease 0.2s;
+    @include border-radius;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    i.details-icon {
+      color: fixit-var(secondary);
+      transition: all 0.2s ease;
+
+      &:hover {
+        color: fixit-var(global-font-color);
+      }
+    }
+  }
+
+  > .details-content {
+    height: 0;
+    overflow-y: hidden;
+    transition: height 0.5s ease-out;
+  }
+
+  &.open {
+    > .details-summary {
+      transition: border-radius 0s;
+      @include border-radius(top);
+
+      i.details-icon {
+        transform: rotate(90deg);
+      }
+    }
+
+    > .details-content {
+      height: auto;
+      @include border-radius(bottom);
+    }
+  }
+
+  &.disabled {
+    > .details-summary {
+      cursor: default;
+    }
+  }
+}
@@ -0,0 +1,86 @@
+.fixed-buttons {
+  position: fixed;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  @include z-index(fixed, -10);
+}
+
+.fixed-button {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  padding: 0.5rem 0.625rem;
+  color: fixit-var(secondary);
+  background-color: darken($header-background-color, 3%);
+  transition: color 0.4s ease;
+  @include border-radius(full);
+  @include blur;
+
+  [data-theme=dark] & {
+    background-color: darken($header-background-color-dark, 3%);
+  }
+
+  &:hover,
+  &:active {
+    color: fixit-var(global-font-color);
+    cursor: pointer;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    outline: none;
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}
+
+.back-to-top {
+  overflow: hidden;
+  position: relative;
+  @include set-fixit-vars((
+    // Ring stroke width
+    b2t-stroke: 0.5rem,
+    // Progress color
+    b2t-prog: fixit-var(success),
+    // dasharray = circumference = 2πr
+    // dashoffset = circumference * (1 - scrollPercent / 100)
+    b2t-dasharray: 314.15
+  ));
+
+  [data-theme=dark] & {
+     @include set-fixit-var(b2t-prog, fixit-var(global-font-color));
+  }
+
+  // SVG circular progress ring
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // Rotate to start from top
+    transform: rotate(-90deg);
+  }
+
+  .bg {
+    fill: none;
+    stroke: fixit-var(global-border-color-light);
+    stroke-width: fixit-var(b2t-stroke);
+  }
+
+  // Progress ring
+  .progress {
+    fill: none;
+    stroke: fixit-var(b2t-prog);
+    stroke-width: fixit-var(b2t-stroke);
+    stroke-linecap: round;
+    stroke-dasharray: fixit-var(b2t-dasharray);
+    stroke-dashoffset: calc(#{fixit-var(b2t-dasharray)} * (1 - #{fixit-var(b2t-progress, 0)} / 100));
+    transition: stroke-dashoffset .1s linear;
+  }
+}
@@ -0,0 +1,48 @@
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+
+.github-corner {
+  position: fixed;
+  top: 0;
+  @include z-index(fixed);
+
+  :hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+
+  svg {
+    width: fixit-var(header-height);
+    height: fixit-var(header-height);
+    border: 0;
+    color: fixit-var(github-corner-color);
+    fill: fixit-var(github-corner-fill);
+  }
+
+  &.left {
+    left: 0;
+
+    svg {
+      transform: scale(-1, 1);
+    }
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}
@@ -10,17 +10,19 @@ svg.icon {
 }

 img.emoji {
+  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
 }

+.hugo-icon,
 .fixit-icon {
  display: inline-block;
-  height: 1.5em;
-  width: 1.5em;
-  line-height: 1.5em;
+  height: 1.2em;
+  width: 1.2em;
+  line-height: 1.2em;
  position: relative;
  vertical-align: text-bottom;
 }
@@ -0,0 +1,12 @@
+@import 'cell-tooltip';
+@import 'cookieconsent';
+@import 'details';
+@import 'fixed-button';
+@import 'github-corner';
+@import 'icon';
+@import 'mask';
+@import 'noscript-warning';
+@import 'post-chat';
+@import 'reading-progress';
+@import 'scrollbar';
+@import 'typeit';
@@ -6,11 +6,11 @@
  left: 0;
  width: 100%;
  height: 100%;
-  z-index: -1;
  background-color: rgba(0, 0, 0, 0);
+  @include z-index(hide);

  .blur & {
-    z-index: 100;
+    @include z-index(fixed, -1);
    background-color: rgba(0, 0, 0, 0.25);
  }
 }
@@ -0,0 +1,12 @@
+.noscript-warning {
+  background-color: fixit-var(danger);
+  color: white;
+  font-size: 1rem;
+  font-weight: bold;
+  position: fixed;
+  text-align: center;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  @include z-index(fixed);
+}
@@ -0,0 +1,6 @@
+#postChat_button,
+.post-TianliGPT {
+  @include media('print') {
+    display: none !important;
+  }
+}
@@ -0,0 +1,15 @@
+.reading-progress-bar {
+  height: fixit-var(progress-h, 2px);
+  width: fixit-var(progress, 0);
+  background-color: fixit-var(bg-progress, fixit-var(success));
+  position: fixed;
+  @include z-index(fixed);
+
+  [data-theme=dark] & {
+    background-color: fixit-var(bg-progress-dark, fixit-var(global-font-color));
+  }
+
+  @include media('print') {
+    display: none !important;
+  }
+}
@@ -0,0 +1,44 @@
+/* Modern browsers with `scrollbar-*` support (high priority) */
+@supports (scrollbar-width: auto) {
+  * {
+    scrollbar-color: fixit-var(scrollbar-thumb-color) fixit-var(scrollbar-track-color);
+    scrollbar-width: fixit-var(scrollbar-width);
+
+    @include media('print') {
+      scrollbar-width: none;
+    }
+  }
+}
+
+/* Legacy browsers with `::-webkit-scrollbar-*` support */
+::-webkit-scrollbar {
+  height: fixit-var(scrollbar-width-legacy);
+  width: fixit-var(scrollbar-width-legacy);
+  overflow: visible;
+
+  @include media('print') {
+    display: none;
+  }
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+::-webkit-scrollbar-corner {
+  background-color: fixit-var(scrollbar-track-color);
+}
+::-webkit-scrollbar-thumb {
+  background-color: fixit-var(scrollbar-thumb-color);
+  &:hover {
+    background-color: fixit-var(scrollbar-thumb-hover-color);
+  }
+}
+::-webkit-scrollbar-track {
+  background-color: fixit-var(scrollbar-track-color);
+}
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  @include border-radius(full);
+}
@@ -0,0 +1,14 @@
+.typeit {
+  .highlight {
+    padding: 0.375rem;
+    font-size: 0.875rem;
+    font-family: fixit-var(code-font-family);
+    font-weight: bold;
+    word-break: break-all;
+    white-space: pre-wrap;
+  }
+
+  --ti-cursor-color: fixit-var(global-font-color);
+  --ti-cursor-font-family: fixit-var(global-font-family);
+  --ti-cursor-transform: translateX(0);
+}
@@ -0,0 +1,55 @@
+// Color map of admonitions
+$admonition-color-map: (
+  note: (
+    color: #448aff,
+    bg-color: rgba(68, 138, 255, 0.1),
+  ),
+  abstract: (
+    color: #00b0ff,
+    bg-color: rgba(0, 176, 255, 0.1),
+  ),
+  info: (
+    color: #00b8d4,
+    bg-color: rgba(0, 184, 212, 0.1),
+  ),
+  todo: (
+    color: #5e9aff,
+    bg-color: rgba(94, 154, 255, 0.1),
+  ),
+  tip: (
+    color: #00bfa5,
+    bg-color: rgba(0, 191, 165, 0.1),
+  ),
+  success: (
+    color: #00c853,
+    bg-color: rgba(0, 200, 83, 0.1),
+  ),
+  question: (
+    color: #ffbd67,
+    bg-color: rgba(255, 190, 0, 0.1),
+  ),
+  warning: (
+    color: #ff9100,
+    bg-color: rgba(255, 145, 0, 0.1),
+  ),
+  failure: (
+    color: #ff5252,
+    bg-color: rgba(255, 82, 82, 0.1),
+  ),
+  danger: (
+    color: #ff1744,
+    bg-color: rgba(255, 23, 68, 0.1),
+  ),
+  bug: (
+    color: #f50057,
+    bg-color: rgba(245, 0, 87, 0.1),
+  ),
+  example: (
+    color: #651fff,
+    bg-color: rgba(101, 31, 255, 0.1),
+  ),
+  quote: (
+    color: #9e9e9e,
+    bg-color: rgba(159, 159, 159, 0.1),
+  ),
+) !default;
@@ -0,0 +1,46 @@
+// Color map of basic alerts
+$alert-color-map: (
+  note: (
+    border-color: #0969da,
+    color: #0969da,
+  ),
+  tip: (
+    border-color: #1a7f37,
+    color: #1a7f37,
+  ),
+  important: (
+    border-color: #8250df,
+    color: #8250df,
+  ),
+  warning: (
+    border-color: #bf8700,
+    color: #9a6700,
+  ),
+  caution: (
+    border-color: #cf222e,
+    color: #d1242f,
+  ),
+) !default;
+
+$alert-color-map-dark: (
+  note: (
+    border-color: #316dca,
+    color: #478be6,
+  ),
+  tip: (
+    border-color: #347d39,
+    color: #57ab5a,
+  ),
+  important: (
+    border-color: #8256d0,
+    color: #986ee2,
+  ),
+  warning: (
+    border-color: #966600,
+    color: #c69026,
+  ),
+  caution: (
+    border-color: #c93c37,
+    color: #e5534b,
+  ),
+) !default;
--- a/Show More
+++ b/Show More