chore(release): 0.4.4

* feat(responsive): add responsive breakpoints and mixin for media queries

* refactor: print styles and add media query support

* refactor(responsive): enhance responsive styles across various components

.auto-changelog/config.json

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

.auto-changelog/setup.js

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

.auto-changelog/template.hbs

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

.gitattributes

@@ -1 +1,3 @@
-assets/lib/**/* linguist-vendored
+assets/lib/**/* linguist-vendored
+*.toml linguist-detectable
+*.md linguist-detectable

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug-report.yml

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/feature-request.yml

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

.github/PULL_REQUEST_TEMPLATE.md

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

.github/configs/auto-assign.yml

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

.github/configs/codeql.yml

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

.github/copilot-instructions.md

@@ -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. **文档同步**: 功能和文档同时更新
+
+遵循这些编码标准将有助于维护代码质量，提高开发效率，并确保项目的长期可维护性。

.github/dependabot.yml

@@ -1,34 +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"
+      - Lruihao
     labels:
-      - "dependencies"
-  - package-ecosystem: "github-actions"
-    directory: "/"
+      - 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"
+      interval: monthly
     open-pull-requests-limit: 1000
     assignees:
-      - "Lruihao"
+      - Lruihao
     labels:
-      - "dependencies"
-  - package-ecosystem: "gitsubmodule"
-    directory: "/"
+      - dependencies
+  - package-ecosystem: gitsubmodule
+    directory: /
     schedule:
-      interval: "weekly"
+      interval: weekly
     open-pull-requests-limit: 1000
     assignees:
-      - "Lruihao"
+      - Lruihao
     labels:
-      - "dependencies"
+      - dependencies

.github/release.yml

@@ -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:
+        - '*'

.github/workflows/auto-assign.yml

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

.github/workflows/build.yml

@@ -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@v4
-        with:
-          submodules: recursive  # Fetch Hugo themes (true OR recursive)
-          fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
-      - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
-        with:
-          hugo-version: latest
-          extended: true
-      - name: Build Hugo static files
-        run: hugo -v --source=demo --gc --minify

.github/workflows/codeql-analysis.yml

@@ -9,17 +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:
-      - master
+      - main
   pull_request:
     branches:
-      - master
+      - main
   schedule:
-    - cron: "30 18 * * 5"
+    - cron: '30 18 * * 5'
 
 jobs:
   analyze:
@@ -29,44 +29,44 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ "javascript" ]
+        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: Check out repository code
-      uses: actions/checkout@v4
-      with:
-        submodules: true  # Fetch Hugo themes (true OR recursive)
-        fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
+      - 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@v3
-      with:
-        languages: ${{ matrix.language }}
-        config-file: ./.github/configs/codeql.yml
+      # 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@v3
+      # 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@v3
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v4

.github/workflows/contributors.yml

@@ -1,27 +0,0 @@
-name: Generate Contribute List
-on:
-  push:
-    branches:
-      - master
-    workflow_dispatch:
-jobs:
-  contrib-readme-job:
-    runs-on: ubuntu-latest
-    name: A job to automate contribute list in contributors.md file
-    steps:
-      - name: First Contribution Check
-        id: first-check
-        uses: sukki37/first-contribution-check-action@v1.0.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.CONTRIBUTORS_TOKEN }}
-      - name: Contribute List
-        uses: akhilmhdh/contributors-readme-action@master
-        if: ${{ steps.first-check.outputs.isNewContributor == 'true' }}
-        with:
-          readme_path: "contributors.md"
-          image_size: 100
-          commit_message: ":busts_in_silhouette: Chore(contributor): contrib-readme-action has updated contributors.md"
-          committer_username: "github-actions[bot]"
-          committer_email: "github-actions[bot]@users.noreply.github.com"
-        env:
-          GITHUB_TOKEN: ${{ secrets.CONTRIBUTORS_TOKEN }}

.github/workflows/fixit-component-list.yml

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

.github/workflows/release.yml

@@ -1,45 +1,49 @@
-# This is a basic workflow to help you get started with Actions
-
 name: Release for new tag
 
-# Controls when the action will run.
 on:
-  # Triggers the workflow on push or pull request events but only for the master branch
   push:
     tags:
       - 'v*.*.*'
-
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  build:
-    # The type of runner that the job will run on
+  release:
     runs-on: ubuntu-latest
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
-          fetch-depth: 0    # Fetch all history for generating release notes
+          fetch-depth: 0 # Fetch all history for generating release notes
 
+      - uses: pnpm/action-setup@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 18
-      
-      - name: Install dependencies and generate release notes
+          node-version-file: .nvmrc
+          cache: pnpm
+
+      - name: Install fixit-cli
+        run: pnpm install -g fixit-cli
+      - name: Split theme configuration
         run: |
-          npm install
-          npm run release -- --starting-version ${{ github.ref_name }}
+          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:
-          # Creates a draft release. Defaults to false
           draft: true
           body_path: CHANGELOG.md
+          files: |
+            config_toml.tar.gz
+            config_yaml.tar.gz

.gitignore

@@ -8,9 +8,12 @@ jsconfig.json
 
 # NPM
 node_modules/
+.eslintcache
 
 # VSCode
-.vscode
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
 
 # OS Files
 ## Windows
@@ -26,3 +29,4 @@ $RECYCLE.BIN/
 .directory
 
 CHANGELOG.md
+.stash/

.npmrc

@@ -1,2 +1,3 @@
 tag-version-prefix="v"
-message=":bookmark: Chore(release): %s"
+ignore-workspace-root-check=true
+message="chore(release): %s"

.nvmrc

@@ -0,0 +1 @@
+v20

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "budparr.language-hugo-vscode",
+    "kaellarkin.hugo-shortcode-syntax",
+    "lruihao.hugo-partials-refs",
+    "tamasfe.even-better-toml"
+  ]
+}

.vscode/settings.json

@@ -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"
+  ]
+}

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

@@ -1,5 +1,23 @@
 # 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.
@@ -13,75 +31,133 @@ git clone https://github.com/hugo-fixit/FixIt.git && cd FixIt
 Then, install the dev dependencies.
 
 ```bash
-npm install
+pnpm install
 ```
 
 And now you are ready to go!
 
-Here are some useful commands.
+Here are some useful commands for development:
+
+### Development
 
 ```bash
-# run a local debugging server with watch
-npm run server
-# run a local debugging server with watch in production environment
-npm run server:production
+# 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
 ```
 
-If you want to do docs-related theme changes, the simplest way is to have both `FixIt` and `fixit-docs` cloned as sibling directories, and then run:
+> [!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.
+
+### Building
 
 ```bash
-npm run server:docs
+# Build demo site
+pnpm build:demo
+# Build test site
+pnpm build:test
+# Build all sites
+pnpm build
 ```
 
+### Preview
+
+```bash
+# Preview the built site locally (requires build first)
+pnpm preview
+```
+
+## Project Structure
+
+Understanding the project structure will help you contribute more effectively:
+
+```
+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
+```
+
+## Development Workflow
+
+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
+
+## 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 standard for developers
+## Git Commit Guidelines
 
-### Branches
+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).
 
-| Branch | Description |
-| :-- | :-- |
-| master | _The branch open to the public and release versions_ |
-| dev | _The development branch of the next version_ |
-| RC branch | _The release candidate branch of the next version, e.g. v0.2.12-RC_ |
-| single feature | _The branch to enhancements or fixes_ |
+> [!NOTE]
+>
+> Commits in a PR will normally be squashed into one commit, so you don't need to rebase locally.
 
-### Merge events
+### Commit Message Format
 
-| event | merge |
-| :-- | :-- |
-| release | **RC branch => master:** `--rebase` |
-| PR | **others:master => master:** `--rebase` |
-| single feature| **feature branch => RC branch:** `--merge` |
+```
+<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.
+```
 
-### Commit message
+### Allowed Types
 
-#### Format
+- `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.
 
-`[{emoji} ]{type}[({module})]: {subject within 50 words}[ (#{issue/pull request})]`
+### Allowed Scopes
 
-example:
+- `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)_
 
-- :tada: Feat: add shortcode fixit-encryptor shortcode (#123)
-- :arrow_up: Chore(libs): update Artalk from 2.2.12 to 2.3.4 (#150)
+### Examples
 
-#### Emoji
-
-- <https://gitmoji.dev>
-- [vscode plugin](https://github.com/maixiaojie/git-emoji-zh.git)
-- utools plugin `GitEmoji`
-
-#### Message
-
-| Emoji                                         | Type     | Example                                                      | Description (No Ambiguous)                                   |
-| :-------------------------------------------- | :------- | :----------------------------------------------------------- | :----------------------------------------------------------- |
-| :tada:  <br>:sparkles:                        | Feat     | Feat: add {feature}                                          | new feature                                                  |
-| :truck:                                       |          | Feat: adjust/migrate {feature name}, {change details}        | For the adjustment feature, it is necessary to describe the current situation (before) and after adjustment (after) |
-| :fire:                                        |          | Feat: delete {feature name}, {deletion reason}               | If the feature is deleted, the reason for deletion must be explained |
-| :bug: <br>:construction: <br>:rotating_light: | Fix      | Fix: fix {bug description}                                   | Fix known bugs                                               |
-| :art: <br>:lipstick: <br>:pencil2:            | Style    | Style: Typesetting/CSS style {optimizing content}            | Changes that do not affect code operation, such as code layout and style change |
-| :recycle:                                     | Refactor | Refactor: override {feature name}                            | It is neither a new function nor a code change to fix a bug. Simply rewriting the code of a function does not affect the function result |
-| :zap:                                         | Perf     | Perf: improve performance {function name}, {improve content} | Optimize code performance                                    |
-| :rewind:                                      | Revert   | Revert: restore version {commit message of restore version}  | Restore the version of one commit                            |
-| :pencil: <br>:pencil2:                              | Docs     | Docs: revise comments/update documents                     | Adjustment of documents and notes                            |
-| :wrench:                                      | Chore    | Chore: update plugin version                                 | Changes in the construction process or auxiliary tools       |
+- `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`

LICENSE

@@ -2,7 +2,7 @@ The MIT License (MIT)
 
 Copyright (c) 2018 LIUZHICHAO.COM
 Copyright (c) 2019-2020 DILLONZQ.COM
-Copyright (c) 2021-2024 Lruihao (https://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

README.md

@@ -1,45 +1,99 @@
-# 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/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.112.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
-[![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/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 | [简体中文说明](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](https://github.com/hugo-fixit/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), [KeepIt Theme](https://github.com/Fastbyte01/KeepIt) and [LeaveIt Theme](https://github.com/liuzc/LeaveIt).[^1]
+> 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.
 
-![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.webp)
+[![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)
 
-## Getting started
+## Live Preview
 
-- [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/)
+<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>
 
-Alternatively, you can run the [documentation site](https://fixit.lruihao.cn/) locally. For more details, see [hugo-fixit/docs](https://github.com/hugo-fixit/docs).
+## Usage
 
-## Template repository
+### Documentation
 
-- [hugo-fixit/hugo-fixit-start](https://github.com/hugo-fixit/hugo-fixit-start)
-- [hugo-fixit/hugo-fixit-start1](https://github.com/hugo-fixit/hugo-fixit-start1)
-- [hugo-fixit/docs](https://github.com/hugo-fixit/docs)
-- [Lruihao/hugo-blog](https://github.com/Lruihao/hugo-blog)
+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.
 
-## Who used 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/)
 
-To see this theme in action, here are some [live demo sites](https://fixit.lruihao.cn/friends/) which are rendered with **FixIt** theme.
+### Starter Wizard
+
+We provided a CLI tool to help you create a new project with FixIt by a single command.
+
+```bash
+pnpx fixit-cli create my-blog
+```
+
+[![asciicast](https://asciinema.org/a/697494.svg)](https://asciinema.org/a/697494)
+
+### Templates
+
+Click the following links to generate a new repository with template:
+
+| Template                                      | repository                        | Generate link                  |
+| :-------------------------------------------- | :-------------------------------- | :----------------------------: |
+| A quick-start template base on Hugo Modules.  | [hugo-fixit-starter][starter]     | [Click][starter:generate]      |
+| A quick-start template base on Git submodule. | [hugo-fixit-starter1][starter1]   | [Click][starter1:generate]     |
+| Build multilingual sites using Fixit theme.   | [docs][docs]                      | [Click][docs:generate]         |
+| Customize with FixIt theme.                   | [Lruihao/hugo-blog][lruihao-blog] | [Click][lruihao-blog:generate] |
+
+[starter]: https://github.com/hugo-fixit/hugo-fixit-starter
+[starter:generate]: https://github.com/hugo-fixit/hugo-fixit-starter/generate
+[starter1]: https://github.com/hugo-fixit/hugo-fixit-starter1
+[starter1:generate]: https://github.com/hugo-fixit/hugo-fixit-starter1/generate
+[docs]: https://github.com/hugo-fixit/docs
+[docs:generate]: https://github.com/hugo-fixit/docs/generate
+[lruihao-blog]: https://github.com/Lruihao/hugo-blog
+[lruihao-blog:generate]: https://github.com/Lruihao/hugo-blog/generate
 
 ## Features
 
+<details>
+<summary>Click to view.</summary>
+
 ### Performance and SEO
 
 - Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
 - Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
 - **[Google Analytics](https://analytics.google.com/analytics)** supported
 - **[Fathom Analytics](https://usefathom.com/)** supported
+- **[Baidu Analytics](https://tongji.baidu.com/)** supported
+- **[Umami Analytics](https://umami.is/)** supported
+- **[Plausible Analytics](https://plausible.io/)** supported
+- **[Cloudflare Web Analytics](https://www.cloudflare.com/web-analytics)** supported
+- **[Splitbee Analytics](https://splitbee.io)** supported
 - Search engine **verification** supported (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
 - **CDN** for third-party libraries supported
 
@@ -73,11 +127,13 @@ To see this theme in action, here are some [live demo sites](https://fixit.lruih
 
 ### Extended Features
 
+- **AI Summary**, **AI Search** and **AI Chatbot** supported by [PostChat](https://ai.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/) or [Fuse.js](https://fusejs.io/)
+- **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
@@ -85,15 +141,19 @@ To see this theme in action, here are some [live demo sites](https://fixit.lruih
 - 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/)
+- 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** shortcode
-- Kinds of **admonitions** shortcode
+- **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)
@@ -101,13 +161,14 @@ To see this theme in action, here are some [live demo sites](https://fixit.lruih
 - Options to **cache remote image** locally
 - ...
 
-### Theme Components
-
-The FixIt theme balances **simplicity** and **extensibility** with extra [Hugo theme components](https://fixit.lruihao.cn/components/) for customization.
+</details>
 
 ## Multilingual and i18n
 
-FixIt supports the following languages:
+FixIt supports multilingual and i18n. For more information, see the [Content Management](https://fixit.lruihao.cn/documentation/content-management/introduction#multilingual) documentation. You are welcome to [contribute with a new language](https://github.com/hugo-fixit/FixIt/pulls).
+
+<details>
+<summary>FixIt supports the following languages.</summary>
 
 - English
 - Simplified Chinese
@@ -122,32 +183,87 @@ FixIt supports the following languages:
 - Russian
 - Romanian
 - Vietnamese
-- [Contribute with a new language](https://github.com/hugo-fixit/FixIt/pulls)
+- Hindi
+- Japanese
+- Korean
 
-[Languages Compatibility](https://fixit.lruihao.cn/documentation/basics/#language-compatibility)
+</details>
 
-## [Roadmap](https://github.com/hugo-fixit/FixIt/projects/1)
+## Theme Components
 
-## [Changelog](/CHANGELOG.md)
+The FixIt theme balances **simplicity** and **extensibility** with extra [Hugo theme components](https://fixit.lruihao.cn/ecosystem/#-components) for customization.
 
-## Questions, ideas, bugs, pull requests
+<details>
+<summary>Click to view.</summary>
 
-All feedback is welcome! Head over to the [issues](https://github.com/hugo-fixit/FixIt/issues) or [discussions](https://github.com/hugo-fixit/FixIt/discussions) tracker.
+<!-- HUGO_FIXIT_COMPONENTS:START -->
+- [fixit-bundle](https://github.com/hugo-fixit/fixit-bundle)\
+  🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component.
+- [cmpt-flyfish](https://github.com/hugo-fixit/cmpt-flyfish)\
+  🐟 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
 
-Please see [CONTRIBUTING.md](CONTRIBUTING.md) for getting started with the contribution.
+We welcome you to join the development of FixIt. Please see [contributing document](/CONTRIBUTING.md). 🤗
 
-Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contributing and engaging in the discussions.
+Also, we welcome Issue or PR to our [official-components](https://github.com/hugo-fixit).
 
-**When contributing, please first discuss the change you wish to make via an issue on this repository before making the actual change**.
-
-## [Contributors](contributors.md)
+> [!note]
+> When contributing, please first discuss the change you wish to make via a discussion on this repository before making the actual change.
 
 ## Acknowledgements
 
+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 the authors of following resources included in the theme:</summary>
+<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/)
@@ -163,6 +279,7 @@ Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contrib
 - [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)
@@ -173,45 +290,37 @@ Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contrib
 - [cookieconsent](https://github.com/osano/cookieconsent)
 - [cell-watermark](https://github.com/Lruihao/watermark)
 - [不蒜子](http://busuanzi.ibruce.info/)
+- [Vercount](https://github.com/EvanNotFound/vercount)
 - [pangu.js](https://github.com/vinta/pangu.js)
 - [Artalk](https://artalk.js.org/)
 - [Waline](https://waline.js.org/)
 - [Twikoo](https://twikoo.js.org/)
 - [github-corners](https://github.com/tholman/github-corners)
-- [giscus](https://giscus.app/)
+- [giscus](https://giscus.app/zh-CN)
 - [crypto-js](https://github.com/brix/crypto-js)
-- [vConsole](https://github.com/Tencent/vConsole)
-- [eruda](https://github.com/liriliri/eruda)
 - [pace](https://github.com/CodeByZach/pace)
-
-</details>
-
-<details>
-<summary>The FixIt also draws on some features of the following projects, and thanks to their authors as well:</summary>
-
-- [DoIt](https://github.com/HEIGE-PCloud/DoIt)
-- [NexT](https://github.com/next-theme/hexo-theme-next)
+- [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](LICENSE) for details.
+FixIt is licensed under the **MIT** license. Check the [LICENSE file](/LICENSE) for details.
+
+## Sponsor Support
+
+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
 
-Follow [Lruihao](https://github.com/Lruihao "Follow me on GitHub")
-
-## Sponsor
-
-[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
-
-If you enjoy the theme, please consider buying me a coffee ☕️. Thanks!
-
-- [PayPal](https://paypal.me/Lruihao)
-- [Alipay](images/alipay.jpg)
-- [Wechat](images/wechatpay.jpg)
-
-Don't forget to leave a ⭐️ if you like this theme, thanks!
-
-[^1]: The theme name is interesting: "leave it, keep it, love it, fix it". Appears and leaves, loves but cannot keep. Doesn't it look like that damn love and BUG? 🤣
+[Lruihao](https://github.com/Lruihao "Follow me on GitHub")

README.zh-cn.md

@@ -1,38 +1,87 @@
-# 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/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.112.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
-[![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/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](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/hugo-fixit/FixIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
+# FixIt
 
-它的原型基于 [LoveIt 主题](https://github.com/dillonzq/LoveIt)，[KeepIt 主题](https://github.com/Fastbyte01/KeepIt) 和 [LeaveIt 主题](https://github.com/liuzc/LeaveIt)。[^1]
+> 它的原型基于 [LoveIt](https://github.com/dillonzq/LoveIt) 主题，[KeepIt](https://github.com/Fastbyte01/KeepIt) 主题和 [LeaveIt](https://github.com/liuzc/LeaveIt) 主题。
 
-![Hugo Theme FixIt](https://fixit.lruihao.cn/images/apple-devices-preview.webp)
+[![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)
 
-## 主题文档
+## 即时预览
 
-- [安装篇](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/)
+<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/)，更多细节详见 [hugo-fixit/docs](https://github.com/hugo-fixit/docs)。
+## 使用指南
 
-## 模板仓库
+### 主题文档
 
-- [hugo-fixit/hugo-fixit-start](https://github.com/hugo-fixit/hugo-fixit-start)
-- [hugo-fixit/hugo-fixit-start1](https://github.com/hugo-fixit/hugo-fixit-start1)
-- [hugo-fixit/docs](https://github.com/hugo-fixit/docs)
-- [Lruihao/hugo-blog](https://github.com/Lruihao/hugo-blog)
+前往 [快速上手](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/quick-start/) 页面，了解如何使用 FixIt 主题创建一个新网站的详细步骤。
 
-## 谁在用 FixIt
+大纲：[安装篇](https://fixit.lruihao.cn/zh-cn/documentation/installation/) ➜ [入门篇](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/) ➜ [内容管理](https://fixit.lruihao.cn/zh-cn/documentation/content-management/) ➜ [进阶篇](https://fixit.lruihao.cn/zh-cn/documentation/advanced/)
 
-为了直观地浏览主题特性，这里有一些基于 **FixIt** 主题渲染的 [预览网站](https://fixit.lruihao.cn/zh-cn/friends/)。
+### 快速开始
 
-## 特性
+我们提供了一个 CLI 工具，可以通过一个命令来创建一个新的 FixIt 项目。
+
+```bash
+pnpx fixit-cli create my-blog
+```
+
+[![asciicast](https://asciinema.org/a/697494.svg)](https://asciinema.org/a/697494)
+
+### 模板
+
+点击以下链接使用模板生成一个新的仓库：
+
+| 模板                                | 仓库                              | 生成链接                          |
+| :---------------------------------- | :-------------------------------- | :-------------------------------: |
+| 基于 Hugo Modules 的快速入门模板。  | [hugo-fixit-starter][starter]     | [点击生成][starter:generate]      |
+| 基于 Git submodule 的快速入门模板。 | [hugo-fixit-starter1][starter1]   | [点击生成][starter1:generate]     |
+| 使用 Fixit 主题构建多语言网站。     | [docs][docs]                      | [点击生成][docs:generate]         |
+| 基于 FixIt 主题进行自定义设置。     | [Lruihao/hugo-blog][lruihao-blog] | [点击生成][lruihao-blog:generate] |
+
+[starter]: https://github.com/hugo-fixit/hugo-fixit-starter
+[starter:generate]: https://github.com/hugo-fixit/hugo-fixit-starter/generate
+[starter1]: https://github.com/hugo-fixit/hugo-fixit-starter1
+[starter1:generate]: https://github.com/hugo-fixit/hugo-fixit-starter1/generate
+[docs]: https://github.com/hugo-fixit/docs
+[docs:generate]: https://github.com/hugo-fixit/docs/generate
+[lruihao-blog]: https://github.com/Lruihao/hugo-blog
+[lruihao-blog:generate]: https://github.com/Lruihao/hugo-blog/generate
+
+## 特色
+
+<details>
+<summary>点击展开</summary>
 
 ### 性能和 SEO
 
@@ -40,6 +89,11 @@
 - 使用基于 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**
 
@@ -73,27 +127,33 @@
 
 ### 扩展功能
 
+- 支持基于 [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330) 的 **AI 摘要**、**AI 搜索** 和 **AI 智能客服**
 - 支持**渐进式网页应用**
 - 支持**二级菜单**
 - 支持**内容加密**（页面、局部）
 - 支持**友情链接**的页面模板
-- 支持基于 [algolia](https://www.algolia.com/) 或 [Fuse.js](https://fusejs.io/) 的**搜索**
+- 支持基于 [algolia](https://www.algolia.com/)、[Fuse.js](https://fusejs.io/)、 **CSE** 或 [PostChat](https://ai.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 语法
-- 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
-- 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
-- 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
+- 支持 **[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
+- 支持 **Bilibili 视频** 和 **抖音视频** shortcode
 - 支持**自定义样式**的 shortcode
 - 支持**自定义脚本**的 shortcode
+- 支持**自定义模板块**
 - 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
 - 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
 - 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
@@ -101,13 +161,14 @@
 - 支持本地**缓存远程图床图片**
 - ……
 
-### 主题组件
-
-FixIt 主题旨在在 **简洁性** 和 **可扩展性** 之间取得平衡。为此，我们开发了一系列额外的 [Hugo 主题组件](https://fixit.lruihao.cn/zh-cn/components/) 供用户选择。
+</details>
 
 ## 多语言和国际化
 
-FixIt 支持下列语言：
+FixIt 主题多语言基本配置及自动翻译等详见 [内容管理](https://fixit.lruihao.cn/zh-cn/documentation/content-management/introduction#multilingual) 文档，欢迎 [贡献一种新的语言](https://github.com/hugo-fixit/FixIt/pulls)。
+
+<details>
+<summary>FixIt 支持下列语言。</summary>
 
 - 英语
 - 简体中文
@@ -122,36 +183,87 @@ FixIt 支持下列语言：
 - 俄语
 - 罗马尼亚语
 - 越南语
-- [贡献一种新的语言](https://github.com/hugo-fixit/FixIt/pulls)
+- 印地语
+- 日语
+- 韩语
 
-[语言兼容性](https://fixit.lruihao.cn/zh-cn/theme-documentation-basics/#language-compatibility)
+</details>
 
-## [路线图](https://github.com/hugo-fixit/FixIt/projects/1)
+## 主题组件
 
-## [更新日志](/CHANGELOG.md)
+FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此，我们开发了一系列额外的 [Hugo 主题组件](https://fixit.lruihao.cn/zh-cn/ecosystem/#-组件) 供用户选择。
 
-## 问题、想法、bugs 和 PRs
+<details>
+<summary>点击展开</summary>
 
-所有的反馈都是欢迎的！详见 [议题](https://github.com/hugo-fixit/FixIt/issues) 或者 [讨论](https://github.com/hugo-fixit/FixIt/discussions) 或者加入 QQ 群：`814031017`。
+<!-- 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
 
 ## 参与贡献
 
-请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 以了解贡献该项目的基本信息。
+我们欢迎你加入 FixIt 的开发，贡献出你的一份力量。请看开源 [贡献指南](/CONTRIBUTING.md)。 🤗
 
-确保在贡献和参与讨论时遵守 [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)。
+你也可以随时向我们的 [官方插件](https://github.com/hugo-fixit) 提交 Issue 或 Pull Request。
 
-**贡献时，请先通过此存储库上的问题讨论你希望进行的更改，然后再进行实际更改**。
-
-## [所有贡献者](contributors.md)
-
-## 镜像
-
-- Gitee 镜像仓库：<https://gitee.com/lruihao/FixIt>
+> [!note]
+> 在贡献时，请先通过此存储库上的讨论来讨论你希望进行的更改，然后再进行实际更改。
 
 ## 致谢
 
+感谢 [所有贡献者](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>
+<summary>感谢 FixIt 主题中使用的所有开源项目。</summary>
 
 - [normalize.css](https://github.com/necolas/normalize.css)
 - [Font Awesome](https://fontawesome.com/)
@@ -167,6 +279,7 @@ FixIt 支持下列语言：
 - [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)
@@ -177,6 +290,7 @@ FixIt 支持下列语言：
 - [cookieconsent](https://github.com/osano/cookieconsent)
 - [cell-watermark](https://github.com/Lruihao/watermark)
 - [不蒜子](http://busuanzi.ibruce.info/)
+- [Vercount](https://github.com/EvanNotFound/vercount)
 - [pangu.js](https://github.com/vinta/pangu.js)
 - [Artalk](https://artalk.js.org/)
 - [Waline](https://waline.js.org/)
@@ -184,38 +298,29 @@ FixIt 支持下列语言：
 - [github-corners](https://github.com/tholman/github-corners)
 - [giscus](https://giscus.app/zh-CN)
 - [crypto-js](https://github.com/brix/crypto-js)
-- [vConsole](https://github.com/Tencent/vConsole)
-- [eruda](https://github.com/liriliri/eruda)
 - [pace](https://github.com/CodeByZach/pace)
-
-</details>
-
-<details>
-<summary>FixIt 主题还借鉴了以下项目的部分功能，同样感谢它们的作者：</summary>
-
-- [DoIt](https://github.com/HEIGE-PCloud/DoIt)
-- [NexT](https://github.com/next-theme/hexo-theme-next)
+- [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 文件](LICENSE)。
-
-## 作者
-
-Follow [Lruihao](https://github.com/Lruihao "在 GitHub 上关注我")
+FixIt 根据 **MIT** 许可协议授权。更多信息请查看 [LICENSE 文件](/LICENSE)。
 
 ## 赞助支持
 
-[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
-
 如果你喜爱这个主题，请考虑给我买杯咖啡 ☕️，谢谢！
 
+- [微信支付](/images/wechatpay.jpg)
+- [支付宝](/images/alipay.jpg)
 - [PayPal](https://paypal.me/Lruihao)
-- [支付宝](images/alipay.jpg)
-- [微信支付](images/wechatpay.jpg)
 
-如果你喜欢这个主题，别忘了留下一颗 ⭐️ 哦，谢谢！
+感谢以下赞助商提供大力支持：
 
-[^1]: 主题名称趣谈：“leave it, keep it，love it，fix it”。出现又离开，爱而不得。这像不像那该死的爱情和 BUG 呢？🤣
+- [translate.js](https://github.com/xnx3/translate) 赞助[企业级翻译通道](https://translate.zvo.cn/4087.html)。
+
+## 作者
+
+[Lruihao](https://github.com/Lruihao "在 GitHub 上关注我")

SECURITY.md

@@ -2,17 +2,72 @@
 
 ## Supported Versions
 
-| Version       | Supported          |
-| :-----------: | :----------------: |
-| 0.3.x         | :white_check_mark: |
+Only the latest version receives active maintenance and security updates:
 
-legacy and transitional versions:
+| 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:                |
 
-| Version       | Supported          | LoveIt Compatibility |
-| :-----------: | :----------------: | :------------------: |
-| 0.1.x         | :x:                | :white_check_mark:   |
-| 0.2.x         | :x:                | :white_check_mark:   |
+## 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
 
-If you want to report a vulnerability, create a new issue at https://github.com/hugo-fixit/FixIt/issues. Any vulnerabilities will be fixed as soon as possible.
+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 -->

apps/demo/content/posts/first_post.md

@@ -2,6 +2,12 @@
 title: My First Post
 date: 2023-02-20T20:14:22+08:00
 draft: false
+categories:
+  - blog
+collections:
+  - blog
+tags:
+  - blog
 ---
 
 A blog (a truncation of "weblog") is an informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries (posts). Posts are typically displayed in reverse chronological order so that the most recent post appears first, at the top of the web page. Until 2009, blogs were usually the work of a single individual,[citation needed] occasionally of a small group, and often covered a single subject or topic. In the 2010s, "multi-author blogs" (MABs) emerged, featuring the writing of multiple authors and sometimes professionally edited. MABs from newspapers, other media outlets, universities, think tanks, advocacy groups, and similar institutions account for an increasing quantity of blog traffic. The rise of Twitter and other "microblogging" systems helps integrate MABs and single-author blogs into the news media. Blog can also be used as a verb, meaning to maintain or add content to a blog.

apps/demo/hugo.toml

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

apps/demo/package.json

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

apps/test/assets/filetree/example.json

@@ -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"
+  }
+]

apps/test/content/posts/_index.md

@@ -0,0 +1,4 @@
+---
+title: All Tests
+titleIcon: fa-solid fa-flask
+---

apps/test/content/posts/alert-and-admonition-test.md

@@ -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**.

apps/test/content/posts/aplayer-test/Wavelength.lrc

@@ -0,0 +1,3 @@
+[00:00.00]APlayer audio1
+[00:04.01]is
+[00:08.02]amazing

apps/test/content/posts/aplayer-test/index.md

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

apps/test/content/posts/code-tabs-test.md

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

apps/test/content/posts/codeblock-test.md

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

apps/test/content/posts/color-preview-test.md

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

apps/test/content/posts/encryption-test/index.md

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

apps/test/content/posts/file-tree-test/data/example.toml

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

apps/test/content/posts/file-tree-test/index.md

@@ -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
+```

apps/test/content/posts/fontawesome-test.md

@@ -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):

apps/test/content/posts/json-viewer-test.md

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

apps/test/content/posts/katex-test.md

@@ -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
+```

apps/test/content/posts/mathjax-test.md

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

apps/test/content/posts/mermaid-diagrams-test.md

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

apps/test/content/posts/script-style-test.md

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

apps/test/content/posts/tabs-comprehensive-test.md

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

apps/test/content/posts/task-list-test.md

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

apps/test/data/filetree/example.yml

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

apps/test/hugo.toml

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

apps/test/package.json

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

archetypes/friends.md

@@ -11,7 +11,7 @@ keywords:
 comment: false
 ---
 
-<!-- When you set data `friends.yml` in `yourProject/data/` directory, it will be automatically loaded here. -->
+<!-- The `friends.yml` file placed in the `yourProject/data/` directory will be loaded automatically here. -->
 
 ---
 
@@ -19,19 +19,26 @@ comment: false
 
 ## Base info
 
-```yaml
 - nickname: Lruihao
-  avatar: https://lruihao.cn/images/avatar.jpg
-  url: https://lruihao.cn
-  description: Lruihao's Note
-```
+- avatar: https://lruihao.cn/images/avatar.jpg
+- url: https://lruihao.cn
+- description: Lruihao's Note
 
 ## Friendly Reminder
 
-{{< admonition info "Notice" true >}}
+Comment like this:
 
-1. If you want to exchange link, please leave a comment in the above format. (personal non-commercial blogs / websites only)
-2. :(fa-solid fa-exclamation-triangle): Website failure, stop maintenance and improper content may be unlinked!
-3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
+````markdown {mode=mac}
+```yaml
+- nickname: <your nickname>
+  avatar: <your avatar>
+  url: <your site link>
+  description: <description of your site>
+```
+````
 
-{{< /admonition >}}
+> [!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.

archetypes/post-bundle/index.md

@@ -11,7 +11,6 @@ author:
   avatar:
 description:
 keywords:
-license:
 comment: false
 weight: 0
 tags:
@@ -20,24 +19,23 @@ categories:
   - draft
 hiddenFromHomePage: false
 hiddenFromSearch: false
-hiddenFromRss: false
 hiddenFromRelated: false
+hiddenFromFeed: false
 summary:
 resources:
   - name: featured-image
     src: featured-image.jpg
   - name: featured-image-preview
     src: featured-image-preview.jpg
-toc: true
-math: false
-lightgallery: false
 password:
 message:
 repost:
-  enable: true
+  enable: false
   url:
 
 # 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)`. -->

archetypes/posts.md

@@ -11,7 +11,6 @@ author:
   avatar:
 description:
 keywords:
-license:
 comment: false
 weight: 0
 tags:
@@ -20,21 +19,15 @@ categories:
   - draft
 hiddenFromHomePage: false
 hiddenFromSearch: false
-hiddenFromRss: false
 hiddenFromRelated: false
+hiddenFromFeed: false
 summary:
-resources:
-  - name: featured-image
-    src: featured-image.jpg
-  - name: featured-image-preview
-    src: featured-image-preview.jpg
-toc: true
-math: false
-lightgallery: false
+featuredImagePreview:
+featuredImage:
 password:
 message:
 repost:
-  enable: true
+  enable: false
   url:
 
 # See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter

archetypes/search.md

@@ -0,0 +1,7 @@
+---
+title: {{ T "assets.search" }}
+layout: search
+date: {{ .Date }}
+description:
+keywords:
+---

assets/css/_core/_base.scss

@@ -1,77 +1,33 @@
 @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;
-
-  [data-theme='dark'] & {
-    background-color: $selection-color-dark;
-  }
+  background-color: fixit-var(selection-color);
 }
 
 body {
-  background-color: $global-background-color;
-  color: $global-font-color;
-  scrollbar-color: auto;
+  background-color: fixit-var(global-background-color);
+  color: fixit-var(global-font-color);
   @include overflow-wrap(break-word);
-
-  &::-webkit-scrollbar {
-    width: 0.75rem;
-    height: 0.75rem;
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    background-clip: content-box;
-    border: 2px solid transparent;
-    @include border-radius(0.5rem);
-  }
-
-  &[data-scroll]::-webkit-scrollbar-thumb {
-    background-color: $scrollbar-color;
-  }
-
-  &[data-theme='dark'] {
-    color: $global-font-color-dark;
-    background-color: $global-background-color-dark;
-  }
 }
 
 iframe {
   border: 0;
-  @include border-radius($global-border-radius);
+  @include border-radius;
 }
 
 [role='button'] {
@@ -87,10 +43,40 @@ abbr[title] {
   text-decoration-skip-ink: none;
 }
 
-@include link(true, true);
+img {
+  object-fit: cover;
+}
 
-@import '../_partials/mask';
-@import '../_partials/img';
-@import '../_partials/icon';
-@import '../_partials/details';
-@import '../_partials/widgets';
+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);

assets/css/_core/_breadcrumb.scss

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

assets/css/_core/_common.scss

@@ -21,12 +21,6 @@
 .d-none {
   display: none !important;
 }
-.d-none-desktop {
-  display: none;
-}
-.d-none-mobile {
-  display: block;
-}
 
 .ms-1,
 .mx-1 {
@@ -47,7 +41,7 @@
 
 @each $color, $value in $theme-colors {
   .text-#{$color} {
-    color: var(--#{$prefix}#{$color}) !important;
+    color: fixit-var(#{$color}) !important;
   }
 }
 
@@ -60,3 +54,46 @@
 .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;
+  }
+}

assets/css/_core/_index.scss

@@ -0,0 +1,6 @@
+@import "_mixin";
+@import "_base";
+@import "_common";
+@import "_root";
+@import "_layout";
+@import '_widgets';

assets/css/_core/_layout.scss

@@ -1,41 +0,0 @@
-/** Layout **/
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  width: 100%;
-
-  main {
-    flex: 1 0 auto;
-
-    aside {
-      flex: 1;
-      padding: 0.5rem;
-
-      &:not(:has(~ aside)) {
-        display: none;
-      }
-    }
-
-    &.container {
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      padding-inline: 1rem;
-      gap: 0.5rem;
-
-      &.container-reverse {
-        flex-direction: row-reverse;
-      }
-
-      &:has(.home:not(.posts)) {
-        align-items: center;
-      }
-    }
-  }
-}
-
-@import "_header";
-@import "_breadcrumb";
-@import "_footer";
-@import "_pagination";

assets/css/_core/_layout/_breadcrumb.scss

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

assets/css/_core/_layout/_footer.scss

@@ -4,7 +4,6 @@ footer {
   text-align: center;
   line-height: 1.25rem;
   padding: 1rem 0;
-  @extend .print-d-none;
 
   .footer-container {
     display: flex;
@@ -24,36 +23,40 @@ footer {
         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%,
   100% {
-    @include transform(scale(1));
+    transform: scale(1);
   }
 
   10%,
   30% {
-    @include transform(scale(0.9));
+    transform: scale(0.9);
   }
 
   20%,
   40%,
   60%,
   80% {
-    @include transform(scale(1.1));
+    transform: scale(1.1);
   }
 
   50%,
   70% {
-    @include transform(scale(1.1));
+    transform: scale(1.1);
   }
 }

assets/css/_core/_layout/_header.scss

@@ -1,21 +1,20 @@
 header {
   width: 100%;
-  background-color: $header-background-color;
-  @include z-index(2);
-  @include transition(box-shadow 0.3s ease);
-  @extend .print-d-none;
-
-  [data-theme='dark'] & {
-    background-color: $header-background-color-dark;
-  }
+  background-color: fixit-var(header-background-color);
+  transition: box-shadow 0.3s ease;
+  @include z-index(fixed);
 
   &:hover {
-    @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
+    box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1);
 
-    [data-theme='dark'] & {
-      @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1));
+    [data-theme=dark] & {
+      box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1);
     }
   }
+
+  @include media('print') {
+    display: none !important;
+  }
 }
 
 .header-wrapper {
@@ -27,20 +26,22 @@ header {
 }
 
 .header-title {
-  font-family: $header-title-font-family;
+  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;
-  @include flex(10);
+  flex: 10;
 
   .logo {
     min-height: 1.5em;
     height: 1.5em;
-    vertical-align: middle;
     width: auto;
+    vertical-align: top;
+    transform: translateY(calc(#{fixit-var(header-height)} / 2 - 50%));
   }
 
   .header-title-text {
@@ -58,17 +59,20 @@ header {
   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 {
+    .dropdown-icon {
       margin-left: 0.25rem;
       font-size: .875em;
-      color: $global-font-color;
-
-      [data-theme='dark'] & {
-        color: $global-font-color-dark;
-      }
+      color: fixit-var(global-font-color);
 
       &.open::before {
         content: "\f078";
@@ -79,31 +83,26 @@ header {
       >.menu-link,
       >.nested-item>.menu-link {
         font-weight: bold;
-        color: $menu-active-color;
-
-        [data-theme='dark'] & {
-          color: $menu-active-color-dark;
-        }
+        color: fixit-var(menu-active-color);
       }
     }
 
+    .menu-link[href="javascript:void(0);"] {
+      color: inherit;
+    }
+
     .menu-link i {
-      @include transform(perspective(1rem));
-      @include transition(transform 0.4s ease);
+      transform: perspective(1rem);
+      transition: transform 0.4s ease;
     }
 
     .menu-link:hover i {
-      @include transform(perspective(1rem) translateZ(0.2rem));
-    }
-
-    &.language-switch,
-    &.theme-switch {
-      cursor: pointer;
+      transform: perspective(1rem) translateZ(0.2rem);
     }
   }
 }
 
-.search {
+.menu .search {
   position: relative;
 
   input {
@@ -111,12 +110,12 @@ header {
     box-sizing: border-box;
     height: 2.5rem;
     width: 1.25rem;
-    @include border-radius(0.5rem);
     border: none;
     outline: none;
     background-color: transparent;
     vertical-align: baseline !important;
-    @include transition(width 0.3s ease);
+    transition: width 0.3s ease;
+    @include border-radius(0.5rem);
   }
 
   @include placeholder(transparent);
@@ -148,28 +147,15 @@ header {
   .open &,
   &.mobile {
     input {
-      color: $global-font-color;
-      background-color: $search-background-color;
+      color: fixit-var(global-font-color);
+      background-color: fixit-var(search-background-color);
       padding: 0 2rem 0 2rem;
     }
 
-    [data-theme='dark'] & {
-      input {
-        color: $global-font-color-dark;
-        background-color: $search-background-color-dark;
-      }
-
-      @include placeholder($global-font-secondary-color-dark);
-    }
-
-    @include placeholder($global-font-secondary-color);
+    @include placeholder;
 
     .search-button {
-      color: $global-font-secondary-color;
-
-      [data-theme='dark'] & {
-        color: $global-font-secondary-color-dark;
-      }
+      color: fixit-var(global-placeholder-color);
     }
 
     .search-clear:hover {
@@ -184,12 +170,8 @@ header {
 
 .theme-switch {
   i {
-    @include transform(rotate(225deg));
-    @include transition(transform 0.4s ease);
-  }
-
-  &:hover i {
-    @include transform(rotate(45deg));
+    transform: rotate(225deg);
+    transition: all 0.4s ease;
   }
 }
 
@@ -197,8 +179,8 @@ header {
   display: block;
   position: sticky;
   top: 0;
-  height: $header-height;
-  line-height: $header-height;
+  height: fixit-var(header-height);
+  line-height: fixit-var(header-height);
   box-sizing: border-box;
 
   [data-header-desktop='normal'] & {
@@ -212,15 +194,14 @@ header {
 
   .header-wrapper {
     // use css native function to calculate max value
-    padding: 0 2rem 0 MAX(10vh, $header-height);
+    padding: 0 2rem 0 MAX(10vh, fixit-var(header-height));
     height: 100%;
 
     &[data-github-corner='right'] {
-      padding-right: $header-height;
+      padding-right: fixit-var(header-height);
     }
 
     .header-title {
-      font-size: $header-title-font-size;
       height: 100%;
     }
 
@@ -230,13 +211,18 @@ header {
       flex-wrap: nowrap;
       float: right;
 
-      >.menu-item {
+      > .menu-item {
         &:hover .sub-menu {
           display: block;
-          @include transform(translateX(-0.5rem));
+          transform: translateX(-0.5rem);
+        }
+        &.theme-switch {
+          &:hover i {
+            transform: rotate(45deg);
+          }
         }
         &.language-switch:hover .sub-menu {
-          @include transform(translateX(calc(1.75rem - 100%)));
+          transform: translateX(calc(1.75rem - 100%));
         }
       }
 
@@ -247,11 +233,7 @@ header {
           width: 0;
           margin: 0.125rem 0.25rem;
           padding: 0;
-          border-left: 1px dashed lighten($global-font-secondary-color, 15%);
-
-          [data-theme='dark'] & {
-            border-left-color: darken($global-font-secondary-color-dark, 15%);
-          }
+          border-left: 1px dashed fixit-var(global-border-color-weight);
         }
       }
 
@@ -260,22 +242,22 @@ header {
         margin: 0;
         padding: 0.25rem 0;
         display: none;
-        top: calc(#{$header-height} - 0.75rem);
-        border-radius: $global-border-radius;
-        border: 1px solid $global-border-color;
-        background-color: $header-background-color;
-        @include transition(box-shadow 0.3s ease);
-        @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
+        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'] & {
-          background-color: $header-background-color-dark;
-          border-color: $global-border-color-dark;
-          @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1));
+        [data-theme=dark] & {
+          box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1);
         }
 
         .menu-item {
-          height: $header-height*0.5;
-          line-height: $header-height*0.5;
+          height: fixit-var(submenu-height);
+          line-height: fixit-var(submenu-height);
           max-width: 15rem;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -283,6 +265,14 @@ header {
         }
       }
     }
+
+    @include media('md', 'down') {
+      padding-inline-end: 1rem;
+    }
+
+    @include media('sm', 'down') {
+      padding-inline-start: 1rem;
+    }
   }
 
   &.open .header-wrapper .menu .menu-item.search {
@@ -290,14 +280,18 @@ header {
       width: 24rem;
     }
   }
+
+  @include media('xs') {
+    display: none;
+  }
 }
 
 #header-mobile {
   display: none;
   position: sticky;
   top: 0;
-  min-height: $header-height;
-  line-height: $header-height;
+  min-height: fixit-var(header-height);
+  line-height: fixit-var(header-height);
 
   [data-header-mobile='normal'] & {
     position: static;
@@ -310,42 +304,33 @@ header {
     .header-wrapper {
       padding: 0 1rem;
       font-size: 1.125rem;
-      @include transition(margin-top 0.3s ease);
+      transition: margin-top 0.3s ease;
 
       .header-title {
-        font-size: $header-title-font-size;
         max-width: 80%;
       }
 
-      .menu-toggle {
-        line-height: 4rem;
-        cursor: pointer;
-        @include transition(width 0.3s ease);
+      .theme-switch {
+        line-height: 1.25em;
+      }
 
+      .menu-toggle {
         span {
           display: block;
-          background: $global-font-color;
-          width: 1.5rem;
+          background-color: fixit-var(global-font-color);
+          width: 20px;
           height: 2px;
-          @include border-radius(3px);
-          @include transition(all 0.3s ease-in-out);
-
-          [data-theme='dark'] & {
-            background: $global-font-color-dark;
-          }
+          @include border-radius(full);
+          transition: all 0.3s ease-in-out;
         }
 
-        span:nth-child(1) {
-          margin-bottom: 0.5rem;
-        }
-
-        span:nth-child(3) {
-          margin-top: 0.5rem;
+        span:not(:last-child) {
+          margin-bottom: 6px;
         }
 
         &.active {
           span:nth-child(1) {
-            @include transform(rotate(45deg) translate(0.4rem, 0.5rem));
+            transform: translateY(8px) rotate(45deg);
           }
 
           span:nth-child(2) {
@@ -353,26 +338,23 @@ header {
           }
 
           span:nth-child(3) {
-            @include transform(rotate(-45deg) translate(0.4rem, -0.5rem));
+            transform: translateY(-8px) rotate(-45deg);
           }
         }
       }
     }
 
     .menu {
-      background: $header-background-color;
-      border-top: 2px solid $global-border-color;
+      background-color: fixit-var(header-background-color);
+      border-top: 2px solid fixit-var(global-border-color-light);
       display: none;
-      overflow-y: overlay;
+      overflow-y: auto;
       max-height: 70vh;
-      @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
+      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+      @include scrollbar-width(none, 0);
 
-      [data-theme='dark'] & {
-        @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
-      }
-      
-      &::-webkit-scrollbar {
-        width: 0;
+      [data-theme=dark] & {
+        box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
       }
 
       .search-wrapper {
@@ -380,16 +362,12 @@ header {
         justify-content: space-between;
         align-items: center;
         box-sizing: border-box;
-        padding: ($header-height - 2.5rem) / 2 1rem;
+        padding: 0.5rem 1rem;
         line-height: 2.5rem;
         position: sticky;
         top: 0;
-        background-color: $header-background-color;
-        @include z-index(0, 50);
- 
-        [data-theme='dark'] & {
-          background-color: $header-background-color-dark;
-        }
+        background-color: fixit-var(header-background-color);
+        @include z-index(sticky);
       }
 
       .search {
@@ -422,10 +400,10 @@ header {
         padding: 0 1rem;
 
         &:not(.menu-system):hover {
-          background-color: lighten($global-font-secondary-color, 24%);
+          background-color: #f2f2f3;
 
-          [data-theme='dark'] & {
-            background-color: darken($global-font-secondary-color-dark, 24%);
+          [data-theme=dark] & {
+            background-color: #535355;
           }
         }
 
@@ -434,7 +412,7 @@ header {
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow-x: hidden;
-          @include flex(4);
+          flex: 4;
         }
 
         & .nested-item {
@@ -456,11 +434,7 @@ header {
         bottom: 0;
         line-height: 2.5rem;
         padding: 0 1rem;
-        background-color: $header-background-color;
- 
-        [data-theme='dark'] & {
-          background-color: $header-background-color-dark;
-        }
+        background-color: fixit-var(header-background-color);
 
         .menu-system-item {
           padding-inline: 0.5rem;
@@ -489,10 +463,10 @@ header {
         }
 
         .menu-item:hover {
-          background-color: lighten($global-font-secondary-color, 20%);
+          background-color: #e7e7ea;
 
-          [data-theme='dark'] & {
-            background-color: darken($global-font-secondary-color-dark, 20%);
+          [data-theme=dark] & {
+            background-color: #5d5d5f;
           }
         }
       }
@@ -500,17 +474,12 @@ header {
       &.active {
         display: block;
       }
-
-      [data-theme='dark'] & {
-        background: $header-background-color-dark;
-        border-top-color: $global-border-color-dark;
-      }
     }
   }
 
   &.open {
     .header-wrapper {
-      margin-top: -$header-height;
+      margin-top: calc(#{fixit-var(header-height)} * -1);
     }
 
     .menu {
@@ -526,21 +495,29 @@ header {
       }
     }
   }
+
+  @include media('xs') {
+    display: block;
+  }
 }
 
 .search-dropdown {
   position: fixed;
-  top: $header-height;
-  @include z-index(2);
-  @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
+  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'] & {
-    @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
+  [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 {
@@ -550,15 +527,12 @@ header {
 
   .dropdown-menu {
     right: 0 !important;
-    background-color: $global-background-color;
-
-    [data-theme='dark'] & {
-      background-color: $global-background-color-dark;
-    }
+    background-color: fixit-var(global-background-color);
 
     .suggestions {
       overflow-y: auto;
-      max-height: calc(100vh - #{$header-height});
+      // 41px is the height of the search-footer
+      max-height: calc(100dvh - #{fixit-var(header-height)} - 41px);
 
       .suggestion {
         padding: 0.75rem 1rem;
@@ -577,40 +551,30 @@ header {
           font-size: 0.875rem;
           float: right;
           text-align: right;
-          color: $global-font-secondary-color;
-
-          [data-theme='dark'] & {
-            color: $global-font-secondary-color-dark;
-          }
+          color: fixit-var(secondary);
         }
 
         .suggestion-context {
+          display: -webkit-box;
           line-height: 1.25rem;
-          @include box(vertical);
+          -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);
-          color: $global-font-secondary-color;
-
-          [data-theme='dark'] & {
-            color: $global-font-secondary-color-dark;
-          }
         }
 
         em {
           font-style: normal;
-          background-color: $selection-color;
-
-          [data-theme='dark'] & {
-            background-color: $selection-color-dark;
-          }
+          background-color: fixit-var(selection-color);
         }
 
         &.cursor {
           background: darken($code-background-color, 5%);
 
-          [data-theme='dark'] & {
+          [data-theme=dark] & {
             background: lighten($code-background-color-dark, 5%);
           }
         }
@@ -628,7 +592,7 @@ header {
       .search-query {
         font-weight: bold;
 
-        [data-theme='dark'] & {
+        [data-theme=dark] & {
           color: #ddd;
         }
       }
@@ -638,12 +602,7 @@ header {
       padding: 0.5rem 1rem;
       float: right;
       font-size: 0.8rem;
-      color: $global-font-secondary-color;
-
-      [data-theme='dark'] {
-        color: $global-font-secondary-color-dark;
-      }
-
+      color: fixit-var(secondary);
       @include link(false, false);
 
       a {

assets/css/_core/_layout/_index.scss

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

assets/css/_core/_layout/_page-style.scss

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

assets/css/_core/_layout/_pagination.scss

@@ -10,16 +10,12 @@
 
   a {
     font-size: 0.8rem;
-    color: $pagination-link-color;
+    color: fixit-var(pagination-link-color);
     letter-spacing: 0.1rem;
     font-weight: 700;
     padding: 5px 5px;
     text-decoration: none;
-    @include transition(0.3s);
-
-    [data-theme='dark'] & {
-      color: $pagination-link-color-dark;
-    }
+    transition: 0.3s;
   }
 
   li {
@@ -34,11 +30,7 @@
     }
 
     &:hover a {
-      color: $pagination-link-hover-color;
-    }
-
-    [data-theme='dark'] &:hover a {
-      color: $pagination-link-hover-color-dark;
+      color: fixit-var(pagination-link-hover-color);
     }
 
     &::before,
@@ -47,14 +39,9 @@
       content: '';
       width: 0;
       height: 3px;
-      background: $pagination-link-hover-color;
-      @include transition(0.3s);
+      background: fixit-var(pagination-link-hover-color);
       bottom: 0px;
-    }
-
-    [data-theme='dark'] &::before,
-    [data-theme='dark'] &::after {
-      background: $pagination-link-hover-color-dark;
+      transition: 0.3s;
     }
 
     &::before {
@@ -74,11 +61,7 @@
 
     &.active {
       a {
-        color: $pagination-link-hover-color;
-      }
-
-      [data-theme='dark'] & a {
-        color: $pagination-link-hover-color-dark;
+        color: fixit-var(pagination-link-hover-color);
       }
 
       &::before,
@@ -86,5 +69,9 @@
         width: 50%;
       }
     }
+
+    @include media('xs') {
+      margin: 0 5px;
+    }
   }
 }

assets/css/_core/_media.scss

@@ -1,161 +0,0 @@
-@media only screen and (min-width: 1441px) {
-  %page-style {
-    width: 60%;
-
-    [data-page-style='wide'] & {
-      width: 64%;
-    }
-
-    [data-page-style='narrow'] & {
-      max-width: 800px;
-    }
-  }
-}
-
-@media only screen and (max-width: 1440px) {
-  %page-style {
-    width: 56%;
-
-    [data-page-style='wide'] & {
-      width: 60%;
-    }
-  }
-}
-
-@media only screen and (max-width: 1200px) {
-  %page-style {
-    width: 52%;
-
-    [data-page-style='wide'] & {
-      width: 56%;
-    }
-  }
-
-  #header-desktop .header-wrapper {
-    padding-right: 1rem;
-  }
-
-  .search-dropdown.desktop {
-    right: 1rem;
-  }
-}
-
-@media only screen and (max-width: 960px) {
-  %page-style {
-    width: 80% !important;
-  }
-  
-  aside {
-    display: none !important;
-  }
-
-  #toc-static {
-    display: block;
-  }
-
-  #header-desktop .header-wrapper {
-    padding-left: 1rem;
-  }
-}
-
-
-@media only screen and (min-width: 681px) {
-  .breadcrumb-container.sticky {
-    body:not([data-header-desktop='sticky']) & {
-      top: 0;
-    }
-    // adjust the scroll margin top of the content anchors on the page
-    body:not([data-header-desktop='auto']) &+.container .content [id] {
-      scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
-    }
-  }
-
-  [data-header-desktop='normal'] .page .content [id] {
-    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
-  }
-}
-
-@media only screen and (max-width: 680px) {
-  #header-desktop {
-    display: none;
-  }
-
-  #header-mobile,
-  .d-none-desktop {
-    display: block;
-  }
-
-  .d-none-mobile {
-    display: none !important;
-  }
-
-  .breadcrumb-container.sticky {
-    body:not([data-header-mobile='sticky']) & {
-      top: 0;
-    }
-    // adjust the scroll margin top of the content anchors on the page
-    body:not([data-header-mobile='auto']) &+.container .content [id] {
-      scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
-    }
-  }
-
-  [data-header-mobile='normal'] .page .content [id] {
-    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
-  }
-  
-  %page-style {
-    width: 100% !important;
-  }
-
-  .page {
-    .categories-card,
-    .collections-card {
-      .card-item {
-        width: 100%;
-      }
-    }
-  }
-
-  footer {
-    .footer-container {
-      font-size: 0.618rem;
-    }
-  }
-
-  .pagination .page-item {
-    margin: 0 5px;
-  }
-}
-
-@media only print {
-  @page {
-    size: A4 portrait;
-    margin: 1.27cm;
-  }
-
-  .page {
-    width: 100% !important;
-    padding-top: 0 !important;
-
-    &.single {
-      .single-title,
-      .single-subtitle,
-      .post-meta {
-        text-align: center;
-      }
-    }
-
-    h1:not(.single-title),
-    .page-break-before {
-      page-break-before: always;
-    }
-
-    .page-break-after {
-      page-break-after: always;
-    }
-  }
-
-  .print-d-none {
-    display: none !important;
-  }
-}

assets/css/_core/_mixin/_blur.scss

@@ -0,0 +1,6 @@
+@mixin blur {
+  // TODO refactor blur with backdrop-filter
+  .blur & {
+    filter: blur(1.5px);
+  }
+}

assets/css/_core/_mixin/_border-radius.scss

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

assets/css/_core/_mixin/_box-shadow.scss

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

assets/css/_core/_mixin/_compatibility.scss

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

assets/css/_core/_mixin/_index.scss

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

assets/css/_core/_mixin/_link.scss

@@ -1,9 +1,7 @@
-/**
- * Link mixin
- * @param {Boolean} $light use global link color
- * @param {Boolean} $dark use global link color dark
- * @param {String} $decoration text-decoration, default none
- */
+/// Link mixin
+/// @param {Boolean} $light use global link color
+/// @param {Boolean} $dark use global link color dark
+/// @param {String} $decoration text-decoration, default none
 @mixin link($light, $dark, $decoration: none) {
   a,
   a::before,
@@ -18,7 +16,7 @@
       color: $single-link-color;
     }
 
-    [data-theme='dark'] & {
+    [data-theme=dark] & {
       @if $dark {
         color: $global-link-color-dark;
       }
@@ -39,7 +37,7 @@
       color: $single-link-hover-color;
     }
 
-    [data-theme='dark'] & {
+    [data-theme=dark] & {
       @if $dark {
         color: $global-link-hover-color-dark;
       }

assets/css/_core/_mixin/_loading.scss

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

assets/css/_core/_mixin/_media.scss

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

assets/css/_core/_mixin/_scrollbar-width.scss

@@ -0,0 +1,6 @@
+@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
+  @include set-fixit-vars((
+    scrollbar-width: $width,
+    scrollbar-width-legacy: $widthLegacy,
+  ));
+}

assets/css/_core/_mixin/_theme-vars.scss

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

assets/css/_core/_mixin/_z-index.scss

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

assets/css/_core/_root.scss

@@ -1,28 +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 {
-  // Note: Custom variable values only support SassScript inside `#{}`.
+  interpolate-size: allow-keywords;
 
-  // Theme colors varibles
-  @each $color, $value in $theme-colors {
-    --#{$prefix}#{$color}: #{$value};
-  }
+  // ----------------------------------------
+  // 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,
 
-  // Scroll margin top and Stack sticky top related
-  --#{$prefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
+    // 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,
 
-  // Set breadcrumb height to 0px if breadcrumb is disabled
-  --#{$prefix}breadcrumb-height: 0px;
+    // 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,
 
-  // hr style
-  --#{$prefix}hr-background-color: #{darken($global-border-color, 5%)};
-  --#{$prefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
+    // 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)}),
+  ));
 }
 
-// Dark theme
-[data-theme=dark] {
-  @each $color, $value in $theme-colors {
-    --#{$prefix}#{$color}: #{darken($value, 5%)};
-  }
+// ----------------------------------------
+// Theme-Dependent Color Variables
+// ----------------------------------------
 
-  --#{$prefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
-  --#{$prefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
-}
+// 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),
+));

assets/css/_core/_widgets/_cell-tooltip.scss

@@ -0,0 +1,11 @@
+body {
+  .cell-tooltip {
+    --tooltip-bg: #ffffff;
+    --tooltip-color: #0f172a;
+
+    [data-theme=dark] & {
+      --tooltip-bg: #39393c;
+      --tooltip-color: #e2e2e6;
+    }
+  }
+}

assets/css/_core/_widgets/_cookieconsent.scss

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

assets/css/_core/_widgets/_details.scss

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

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

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

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

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

assets/css/_core/_widgets/_index.scss

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

assets/css/_core/_widgets/_mask.scss

@@ -7,10 +7,10 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0);
-  @include z-index(0, -1);
+  @include z-index(hide);
 
   .blur & {
-    @include z-index(1);
+    @include z-index(fixed, -1);
     background-color: rgba(0, 0, 0, 0.25);
   }
 }

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

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

assets/css/_core/_widgets/_post-chat.scss

@@ -0,0 +1,6 @@
+#postChat_button,
+.post-TianliGPT {
+  @include media('print') {
+    display: none !important;
+  }
+}

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

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

assets/css/_core/_widgets/_scrollbar.scss

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

assets/css/_core/_widgets/_typeit.scss

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

assets/css/_maps/_admonition.scss

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