188 changed files with 7565 additions and 5502 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@ -0,0 +1,22 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/go:1",
+  "features": {
+    "ghcr.io/devcontainers/features/hugo:1": {
+      "extended": true,
+      "version": "0.119.0"
+    },
+    "ghcr.io/devcontainers/features/node:1": {}
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "mhutchie.git-graph",
+        "esbenp.prettier-vscode",
+        "tamasfe.even-better-toml",
+        "budparr.language-hugo-vscode"
+      ]
+    }
+  },
+  "postCreateCommand": "npm install",
+  "forwardPorts": [1313]
+}
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@ -0,0 +1,110 @@
+# Contribute to Hextra
+
+👋 Thank you for being interested in contributing to Hextra! As an open source project, we welcome contributions of many forms including bug reports, feature requests, documentation improvements, and code contributions.
+
+<!-- omit in toc -->
+## Table of Contents
+
+- [Guidelines](#guidelines)
+  - [Contributing Code](#contributing-code)
+  - [Contributing Documentation](#contributing-documentation)
+  - [💬 GitHub Discussions](#-github-discussions)
+  - [GitHub Issues](#github-issues)
+- [Development](#development)
+  - [Local development setup](#local-development-setup)
+  - [Project structure](#project-structure)
+  - [Start the development server](#start-the-development-server)
+  - [Compile the styles](#compile-the-styles)
+
+
+## Guidelines
+
+### Contributing Code
+
+To contribute, please follow the ["Fork and Pull Request"][fork and pull] workflow：
+
+Fork the repository, make your changes, and then submit a pull request.
+Please make sure to include a description of the changes you made and why you made them.
+Use [Conventional Commits][conventional commits] message to make it easier to understand the changes you made.
+
+### Contributing Documentation
+
+Similar to contributing code, you can also contribute to the documentation by submitting a pull request.
+
+The documentation site is located in the [`exampleSite`](../exampleSite/) folder.
+You can make changes to the documentation and create a pull request. A preview of the new documentation will be automatically generated and displayed in the pull request comment via [Netlify][netlify deploy preview].
+
+### 💬 GitHub Discussions
+
+We’re using [Discussions][discussions] as a place to connect with other members using Hextra:
+
+- Ask questions you’re wondering about.
+- Share ideas.
+- Engage with other users.
+
+### GitHub Issues
+
+If you find a bug or have a feature request, please [open an issue][issues].
+
+Please make sure to include a description of the bug or feature you are requesting. If you are reporting a bug, please include steps to reproduce the bug.
+
+We recommend that you search existing [issues][issues] or discussions before opening a new one to prevent duplicates.
+
+## Development
+
+> **Note**
+> You can start developing on [GitHub Codespaces][open in codespaces] or use [devcontainer][devcontainer] locally without installing any dependencies.
+
+### Local development setup
+
+- [Hugo][hugo] >= v0.115.0 (extended version)
+- [Node.js][nodejs]
+- [Go][go]
+
+Install dependencies:
+
+```bash
+npm i
+```
+
+### Project structure
+
+- [`assets`](../assets/): CSS styles and JavaScript files.
+- [`data`](../data/): The theme data files. Now only contains the `icons.yaml` file.
+- [`exampleSite`](../exampleSite/): The documentation site for the theme.
+- [`i18n`](../i18n/): The theme translation files.
+- [`layouts`](../layouts/): The theme layouts.
+- [`static`](../static/): The static files for the theme. For example, the favicon and the site logo.
+
+Please refer to the [Hugo documentation][hugo] for more information.
+
+### Start the development server
+
+```bash
+npm run dev:theme
+```
+
+It will start the Hugo server on `http://localhost:1313/` for the `exampleSite` content.
+
+### Compile the styles
+
+For development preview, we compile the Tailwind CSS styles on the fly. But for production, we need to compile the styles first.
+
+```bash
+npm run build:css
+```
+
+It will compile the Tailwind CSS styles and generate the `assets/css/compiled/main.css` file.
+
+<!--links-->
+
+[fork and pull]: https://docs.github.com/en/get-started/quickstart/contributing-to-projects
+[conventional commits]: https://www.conventionalcommits.org
+[issues]: https://github.com/imfing/hextra/issues
+[discussions]: https://github.com/imfing/hextra/discussions
+[nodejs]: https://nodejs.org/en/
+[hugo]: https://gohugo.io/
+[go]: https://golang.org/doc/install
+[devcontainer]: https://code.visualstudio.com/docs/devcontainers/containers
+[open in codespaces]: https://codespaces.new/imfing/hextra
+[netlify deploy preview]: https://docs.netlify.com/site-deploys/deploy-previews/
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -0,0 +1,40 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Description**
+
+<!-- Provide a clear and concise description of the bug -->
+
+**Steps To Reproduce**
+
+1. 
+2. 
+3. 
+
+**Expected Behavior**
+
+<!-- What should have happened? -->
+
+**Actual Behavior**
+
+<!-- What happened instead? -->
+
+**Screenshots**
+
+<!-- If applicable, add screenshots to help explain your problem -->
+
+**Environment**
+
+- Hugo Version: [e.g., 0.85.0]
+- Browser/OS: [e.g., Chrome, MacOS]
+- Theme Version: [e.g., v2.0]
+
+**Additional Context**
+
+<!-- Add any other context about the problem here -->
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Feature Description**
+
+<!-- Provide a clear and concise description of the feature -->
+
+**Problem/Solution**
+
+<!-- What problem will this feature solve? Or what new capability will it add? -->
+
+**Alternatives Considered**
+
+<!-- Have you considered any alternative solutions or workarounds? -->
+
+**Additional Context**
+
+<!-- Add any other context or screenshots about the feature request here -->
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@ -0,0 +1,74 @@
+# Sample workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.117.0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+      - name: Setup Go
+        uses: actions/setup-go@v4
+        with:
+          go-version: '1.20'
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: ${{ env.HUGO_VERSION }}
+          extended: true
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --minify \
+            --themesDir=../.. --source=exampleSite \
+            --baseURL "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./exampleSite/public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
--- a/.prettierrc
+++ b/.prettierrc
@ -1,7 +1,4 @@
 {
-  "plugins": [
-    "prettier-plugin-go-template"
-  ],
  "goTemplateBracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "printWidth": 200,
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,5 @@
+{
+  "editor.tabSize": 2,
+  "css.customData": [".vscode/tailwind.json"],
+  "markdown.extension.toc.levels": "2..6"
+}
--- a/.vscode/tailwind.json
+++ b/.vscode/tailwind.json
@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}
--- a/README.fa.md
+++ b/README.fa.md
@ -1,48 +0,0 @@
-<div align="center">
-  <h1 align="center">هگزترا</h1>
-  <sup align="center"><a href="README.md">English</a> | <a href="README.zh-cn.md">简体中文</a> ｜ <a href="README.fa.md">فارسی</a></sup>
-  <p align="center">تم هیوگو مدرن، پاسخگو و دارای امکانات کامل برای ایجاد وب‌سایت‌های استاتیک زیبا.</p>
-
-نسخه‌ی نمایشی → [imfing.github.io/hextra](https://imfing.github.io/hextra/fa)
-</div>
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/5097752/263550533-c18343ca-3848-4230-b5c0-ee989d7916da.png">
-  <img alt="Hextra" src="https://user-images.githubusercontent.com/5097752/263550528-663599f9-17a1-4686-b5c4-3da233b5034d.png">
-</picture>
-
-<div align="right">
-<a href="https://github.com/imfing/hextra/actions/workflows/pages.yml"><img alt="GitHub Actions Status" src="https://github.com/imfing/hextra/actions/workflows/pages.yml/badge.svg"></a> <a href="https://app.netlify.com/sites/hugo-hextra/deploys"><img alt="Netlify Status" src="https://api.netlify.com/api/v1/badges/61d6e55a-2447-487e-b59f-c9537e5df175/deploy-status"></a>
-</div>
-
-## ویژگی‌ها
-
- **طراحی زیبا** - با الهام از Nextra، هگزترا از Tailwind CSS برای ارائه یک طراحی مدرن که سایت شما را برجسته می‌کند، استفاده می‌کند.
- **طراحی واکنش‌گرا و حالت تیره** - در تمام دستگاه‌ها، از تلفن همراه، تبلت تا دسکتاپ، عالی به نظر می‌رسد. حالت تیره نیز برای انطباق با شرایط مختلف روشنایی پشتیبانی می‌شود.
- **سریع و سبک** - طراحی شده توسط Hugo، یک ایجادکننده سایت استاتیک سریع مثل رعد و برق که در یک فایل باینری قرار گرفته است، هگزترا ردپای خود را به حداقل می‌رساند. برای استفاده از آن به جاوااسکریپت یا Node.js نیازی ندارید.
- **جستجوی متن کامل** - جستجوی متن کاملا آفلاین داخلی طراحی شده توسط FlexSearch، بدون نیاز به پیکربندی اضافی.
- **امکانات کامل** - برای بهتر کردن محتوای شما مارک‌داون، برجسته‌کردن سینتکس، فرمول‌های ریاضی LaTeX، نمودارها و عناصر Shortcodeها را شامل میشه. فهرست مطالب، بردکرامب، صفحه‌بندی، پیمایش نوار کناری و موارد دیگر همه به صورت خودکار تولید می‌شوند.
- **چند زبانه و سئو آماده** - سایت‌های چند زبانه با حالت چند زبانه Hugo راحت ساخته می‌شوند. پشتیبانی خارج از جعبه برای برچسب‌های سئو، Open Graph و کارت‌های توییتر گنجانده شده است.
-
-## شروع کنید
-
-### شروع سریع از طریق Template
-
-استفاده از [Hextra Starter Template](https://github.com/imfing/hextra-starter-template) ساده‌ترین روش برای راه‌اندازی سریع یک وب‌سایت جدید با تم هگزترا است. با کلیک بر روی دکمه "Use this template" در بالای صفحه مخزن شروع کنید.
-
-مخزن تم همچنین شامل یک [گردش کار گیت‌هاب Actions](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) رای به‌کاراندازی وب‌سایت شما در گیت‌هاب Pages است.
-
-<img alt="Hextra Starter Template" src="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" width=600/>
-
-### استفاده
-
-برای اطلاعات بیشتر به بخش [مستندات](https://imfing.github.io/hextra/fa/docs) مراجعه کنید.
-
-## مشارکت کردن
-
-از مشارکت افراد جدید استقبال می‌کنیم.
- برای شروع، [راهنمای مشارکت](.github/CONTRIBUTING.md) را بررسی کنید.
-
-## مجوز
-
-[مجوز MIT](./LICENSE)
--- a/README.md
+++ b/README.md
@ -1,6 +1,5 @@
 <div align="center">
  <h1 align="center">Hextra</h1>
-  <sup align="center"><a href="README.md">English</a> | <a href="README.zh-cn.md">简体中文</a> ｜ <a href="README.fa.md">فارسی</a></sup>
  <p align="center">Modern, responsive, batteries-included Hugo theme for creating beautiful static websites.</p>

 Demo → [imfing.github.io/hextra](https://imfing.github.io/hextra/)
--- a/README.zh-cn.md
+++ b/README.zh-cn.md
@ -1,6 +1,5 @@
 <div align="center">
  <h1 align="center">Hextra</h1>
-  <sup align="center"><a href="README.md">English</a> | <a href="README.zh-cn.md">简体中文</a> ｜ <a href="README.fa.md">فارسی</a></sup>
  <p align="center">用于创建美观的静态站点的现代化, 响应式, 功能强大的 Hugo 主题.</p>

 演示 → [imfing.github.io/hextra](https://imfing.github.io/hextra/)
@ -21,7 +20,7 @@
 - **响应式布局和深色模式支持** - 在任何设备上看起来都足够美观, 无论是手机, 平板电脑或者电脑. 深色模式的支持使 Hextra 可以应对各种照明环境.
 - **快速且轻量** - 由 Hugo 强力支持, Hugo 是一个快如闪电的静态站点生成器, 这一切都只需一个可执行文件, Hextra 始终保持最小化, 无需 Javascript 或者 Node.js.
 - **全文搜索** - 集成了 Flexsearch 的全文搜索, 无需额外的配置.
- **功能齐全** - Markdown, 代码高亮, LaTex 数学公式, diagrams 图表和 Shortcodes 都可以用于丰富你的内容. 目录, 面包屑导航, 分页, 侧边栏等均由 Hextra 自动生成。
+- **网站中的瑞士军刀** - Markdown, 代码高亮, LaTex 数学公式, diagrams 图表和 Shortcodes 都可以用于丰富你的内容. 目录, 面包屑导航, 分页, 侧边栏等均由 Hextra 自动生成。
 - **多语言和 SEO Ready** - Hugo 的多语言模式使得构建多语言网站更简单. 具有 SEO tags, Open Graph, 和 Twitter Cards 等诸多开箱即用的功能.

 ## 快速开始
--- a/assets/css/chroma/dark.css
+++ b/assets/css/chroma/dark.css
@ -74,7 +74,7 @@
  /* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
  /* Generic */ .chroma .g {  }
  /* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
-  /* GenericEmph */ .chroma .ge { color: inherit; font-style: italic }
+  /* GenericEmph */ .chroma .ge { font-style: italic }
  /* GenericError */ .chroma .gr { color: #ffa198 }
  /* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
  /* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
--- a/assets/css/components/badge.css
+++ b/assets/css/components/badge.css
@ -1,3 +0,0 @@
-.hextra-badge {
-  @apply hx-inline-flex hx-items-center;
-}
--- a/assets/css/components/cards.css
+++ b/assets/css/components/cards.css
@ -1,9 +1,5 @@
 .hextra-cards {
-  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
-}
-
-.hextra-card {
-  position: relative;
+  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
 }

 .hextra-card img {
@ -22,7 +18,6 @@

 .hextra-card p {
  margin-top: 0.5rem;
-  position: relative;
 }

 .dark .hextra-card svg {
@ -32,10 +27,3 @@
 .dark .hextra-card:hover svg {
  color: currentColor;
 }
-
-.hextra-card-tag {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 10;
-}
--- a/assets/css/components/code-copy.css
+++ b/assets/css/components/code-copy.css
@ -1,7 +1,7 @@
@supports (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
-  .hextra-code-copy-btn {
-    @apply hx-backdrop-blur-md hx-bg-opacity-[.85] dark:hx-bg-opacity-80;
+  .code-copy-btn {
+    @apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
  }
 }
--- a/assets/css/components/hextra/feature-grid.css
+++ b/assets/css/components/hextra/feature-grid.css
@ -1,5 +0,0 @@
-.hextra-feature-grid {
-  @media (min-width: 1024px) {
-    grid-template-columns: repeat(var(--hextra-feature-grid-cols), minmax(0, 1fr));
-  }
-}
--- a/assets/css/components/jupyter.css
+++ b/assets/css/components/jupyter.css
@ -1,17 +0,0 @@
-.hextra-jupyter-code-cell {
-  scrollbar-gutter: auto;
-
-  @apply hx-mt-6;
-
-  .hextra-jupyter-code-cell-outputs-container {
-    @apply hx-text-xs hx-overflow-hidden;
-
-    .hextra-jupyter-code-cell-outputs {
-      @apply hx-overflow-auto hx-max-h-[50vh];
-
-      pre {
-        @apply hx-text-xs hx-overflow-auto hx-max-w-full;
-      }
-    }
-  }
-}
--- a/assets/css/components/navbar.css
+++ b/assets/css/components/navbar.css
@ -1,6 +1,6 @@
 nav {
  .search-wrapper {
-    @apply hx-hidden md:hx-inline-block;
+    @apply hidden md:inline-block;
  }
 }

@ -8,13 +8,13 @@ nav {
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
  .nav-container-blur {
-    @apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80;
+    @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
  }
 }

 .hamburger-menu svg {
  g {
-    @apply hx-origin-center;
+    @apply origin-center;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  }
  path {
@ -37,16 +37,16 @@ nav {

  &.open > {
    path {
-      @apply hx-opacity-0;
+      @apply opacity-0;
    }
    g:nth-of-type(1) {
-      @apply hx-rotate-45;
+      @apply rotate-45;
      path {
        transform: translate3d(0, 4px, 0);
      }
    }
    g:nth-of-type(2) {
-      @apply -hx-rotate-45;
+      @apply -rotate-45;
      path {
        transform: translate3d(0, -4px, 0);
      }
--- a/assets/css/components/scrollbar.css
+++ b/assets/css/components/scrollbar.css
@ -1,21 +1,21 @@
-.hextra-scrollbar, .hextra-scrollbar * {
+.hextra-scrollbar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */

  scrollbar-gutter: stable;
  &::-webkit-scrollbar {
-    @apply hx-w-3 hx-h-3;
+    @apply w-3 h-3;
  }
  &::-webkit-scrollbar-track {
-    @apply hx-bg-transparent;
+    @apply bg-transparent;
  }
  &::-webkit-scrollbar-thumb {
-    @apply hx-rounded-[10px];
+    @apply rounded-[10px];
  }
  &:hover::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-color: var(--tw-shadow-color);
    background-clip: content-box;
-    @apply hx-shadow-neutral-500/20 hover:hx-shadow-neutral-500/40;
+    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
  }
 }
--- a/assets/css/components/search.css
+++ b/assets/css/components/search.css
@ -1,31 +1,31 @@
 .search-wrapper {
  li {
-    @apply hx-mx-2.5 hx-break-words hx-rounded-md contrast-more:hx-border hx-text-gray-800 contrast-more:hx-border-transparent dark:hx-text-gray-300;
+    @apply mx-2.5 break-words rounded-md contrast-more:border text-gray-800 contrast-more:border-transparent dark:text-gray-300;
    a {
-      @apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
+      @apply block scroll-m-12 px-2.5 py-2;
    }

    .title {
-      @apply hx-text-base hx-font-semibold hx-leading-5;
+      @apply text-base font-semibold leading-5;
    }

    .active {
-      @apply hx-rounded-md hx-bg-primary-500/10 contrast-more:hx-border-primary-500;
+      @apply rounded-md bg-primary-500/10 contrast-more:border-primary-500;
    }
  }

  .no-result {
-    @apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
+    @apply block select-none p-8 text-center text-sm text-gray-400;
  }

  .prefix {
-    @apply hx-mx-2.5 hx-mb-2 hx-mt-6 hx-select-none hx-border-b hx-border-black/10 hx-px-2.5 hx-pb-1.5 hx-text-xs hx-font-semibold
-    hx-uppercase hx-text-gray-500 first:hx-mt-0 dark:hx-border-white/20 dark:hx-text-gray-300 contrast-more:hx-border-gray-600
-    contrast-more:hx-text-gray-900 contrast-more:dark:hx-border-gray-50 contrast-more:dark:hx-text-gray-50;
+    @apply mx-2.5 mb-2 mt-6 select-none border-b border-black/10 px-2.5 pb-1.5 text-xs font-semibold
+    uppercase text-gray-500 first:mt-0 dark:border-white/20 dark:text-gray-300 contrast-more:border-gray-600
+    contrast-more:text-gray-900 contrast-more:dark:border-gray-50 contrast-more:dark:text-gray-50;
  }

  .excerpt {
-    @apply hx-overflow-hidden hx-text-ellipsis hx-mt-1 hx-text-sm hx-leading-[1.35rem] hx-text-gray-600 dark:hx-text-gray-400 contrast-more:dark:hx-text-gray-50;
+    @apply overflow-hidden text-ellipsis mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400 contrast-more:dark:text-gray-50;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
@ -33,6 +33,6 @@
  }

  .match {
-    @apply hx-text-primary-600;
+    @apply text-primary-600;
  }
 }
--- a/assets/css/components/sidebar.css
+++ b/assets/css/components/sidebar.css
@ -1,6 +1,6 @@
@media (max-width: 767px) {
  .sidebar-container {
-    @apply hx-fixed hx-pt-[calc(var(--navbar-height))] hx-top-0 hx-w-full hx-bottom-0 hx-z-[15] hx-overscroll-contain hx-bg-white dark:hx-bg-dark;
+    @apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
    will-change: transform, opacity;
    contain: layout style;
@ -10,12 +10,12 @@

 .sidebar-container {
  li > div {
-    @apply hx-h-0;
+    @apply h-0;
  }
  li.open > div {
-    @apply hx-h-auto hx-pt-1;
+    @apply h-auto pt-1;
  }
  li.open > a > span > svg > path {
-    @apply hx-rotate-90;
+    @apply rotate-90;
  }
 }
--- a/assets/css/components/steps.css
+++ b/assets/css/components/steps.css
@ -2,16 +2,10 @@
  counter-increment: step;

  &:before {
-    @apply hx-absolute hx-w-[33px] hx-h-[33px];
-    @apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800;
-    @apply hx-rounded-full hx-text-neutral-400 hx-text-base hx-font-normal hx-text-center -hx-indent-px;
-    @apply hx-mt-[3px] ltr:hx-ml-[-41px] rtl:hx-mr-[-44px];
+    @apply absolute w-[33px] h-[33px];
+    @apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
+    @apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
+    @apply mt-[3px] ml-[-41px];
    content: counter(step);
  }
 }
-
-:lang(fa) .steps h3 {
-  &:before {
-    content: counter(step, persian);
-  }
-}
--- a/assets/css/highlight.css
+++ b/assets/css/highlight.css
@ -2,52 +2,47 @@
@import "chroma/light.css";
@import "chroma/dark.css";

-.hextra-code-block {
-  @apply hx-text-[.9em] hx-leading-5;
+.code-block {
+  @apply text-[.9em] leading-5;

  pre {
-    @apply hx-text-[.9em] hx-bg-primary-700/5 hx-overflow-x-auto hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40;
+    @apply text-[.9em] bg-primary-700/5 overflow-x-auto font-medium subpixel-antialiased dark:bg-primary-300/10 contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40;
  }

  .filename {
-    @apply hx-absolute hx-top-0 hx-z-[1] hx-w-full hx-truncate hx-rounded-t-xl hx-bg-primary-700/5 hx-py-2 hx-px-4 hx-text-xs hx-text-gray-700 dark:hx-bg-primary-300/10 dark:hx-text-gray-200;
-  }
-
-  .filename + pre:not(.lntable pre) {
-    /* Override padding for code blocks with filename but no highlight */
-    @apply hx-pt-12;
+    @apply absolute top-0 z-[1] w-full truncate rounded-t-xl bg-primary-700/5 py-2 px-4 text-xs text-gray-700 dark:bg-primary-300/10 dark:text-gray-200;
  }
 }

-.hextra-code-block pre:not(.lntable pre) {
-  @apply hx-px-4 hx-mb-4 hx-py-4 hx-rounded-xl;
+.code-block pre:not(.lntable pre) {
+  @apply px-4 mb-4 py-4 rounded-xl;
 }

-.hextra-code-block div:nth-of-type(2) pre {
-  @apply hx-pt-12 hx-pb-4;
+.code-block div:nth-of-type(2) pre {
+  @apply pt-12 pb-4;
 }

 .chroma {
  .lntable {
-    @apply hx-m-0 hx-block hx-w-auto hx-overflow-auto hx-rounded-xl;
+    @apply m-0 block w-auto overflow-auto rounded-xl;

    pre {
-      @apply hx-pt-4 hx-pb-4;
+      @apply pt-4 pb-4;
    }
  }
  .ln,
  .lnt:not(.hl > .lnt),
  .hl:not(.line) {
-    @apply hx-pl-4 hx-pr-4 hx-min-w-[2.6rem] hx-text-neutral-600 dark:hx-text-neutral-300;
+    @apply pl-4 pr-4 min-w-[2.6rem] text-neutral-600 dark:text-neutral-300;
  }
  .lntd {
-    @apply hx-p-0 hx-align-top;
+    @apply p-0 align-top;
  }
  .lntd:last-of-type {
-    @apply hx-w-full;
+    @apply w-full;
  }
  /* LineHighlight */
  .hl {
-    @apply hx-block hx-w-full hx-bg-primary-800/10;
+    @apply block w-full bg-primary-800/10;
  }
 }
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@ -9,24 +9,20 @@
@import "components/navbar.css";
@import "components/scrollbar.css";
@import "components/code-copy.css";
-@import "components/hextra/feature-grid.css";
-@import "components/jupyter.css";
-@import "components/badge.css";

 html {
-  @apply hx-text-base hx-antialiased;
+  @apply text-base antialiased;
  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
  -webkit-tap-highlight-color: transparent;
 }

 body {
-  @apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100;
+  @apply w-full bg-white dark:bg-dark dark:text-gray-100;
 }

 :root {
  --primary-hue: 212deg;
  --primary-saturation: 100%;
-  --primary-lightness: 50%;
  --navbar-height: 4rem;
  --menu-height: 3.75rem;
 }
@ -34,5 +30,4 @@ body {
 .dark {
  --primary-hue: 204deg;
  --primary-saturation: 100%;
-  --primary-lightness: 50%;
 }
--- a/assets/css/typography.css
+++ b/assets/css/typography.css
@ -1,133 +1,120 @@
 .content {
  :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100;
+    @apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
  }
  :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-10 hx-border-b hx-pb-1 hx-text-3xl hx-border-neutral-200/70 contrast-more:hx-border-neutral-400 dark:hx-border-primary-100/10 contrast-more:dark:hx-border-neutral-400;
+    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-10 border-b pb-1 text-3xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400;
  }
  :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-2xl;
+    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
  }
  :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-xl;
+    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
  }
  :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-lg;
+    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
  }
  :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-base;
+    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
  }
  :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-mt-6 hx-leading-7 first:hx-mt-0;
+    @apply mt-6 leading-7 first:mt-0;
  }
  :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-text-primary-600 hx-underline hx-decoration-from-font [text-underline-position:from-font];
+    @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
  }
  :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-mt-6 hx-border-gray-300 hx-italic hx-text-gray-700 dark:hx-border-gray-700 dark:hx-text-gray-400 first:hx-mt-0 ltr:hx-border-l-2 ltr:hx-pl-6 rtl:hx-border-r-2 rtl:hx-pr-6;
+    @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
  }
-  :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-bg-primary-700/5 hx-mb-4 hx-overflow-x-auto hx-rounded-xl hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 hx-text-[.9em] contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40 hx-py-4;
+  :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+    @apply bg-primary-700/5 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10 text-[.9em] contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40 py-4;
  }
-  :where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
+  :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
+    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
  }
-  :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-block hx-overflow-x-auto hx-mt-6 hx-p-0 first:hx-mt-0;
+  :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
+    @apply block overflow-x-auto mt-6 p-0 first:mt-0;

    tr {
-      @apply hx-m-0 hx-border-t hx-border-gray-300 hx-p-0 dark:hx-border-gray-600 even:hx-bg-gray-100 even:dark:hx-bg-gray-600/20;
+      @apply m-0 border-t border-gray-300 p-0 dark:border-gray-600 even:bg-gray-100 even:dark:bg-gray-600/20;
    }
    th {
-      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-gray-600;
+      @apply m-0 border border-gray-300 px-4 py-2 font-semibold dark:border-gray-600;
    }
    td {
-      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 dark:hx-border-gray-600;
+      @apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
    }
  }
  :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-mt-6 hx-list-decimal first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
+    @apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
    li {
-      @apply hx-my-2;
+      @apply my-2;
    }
  }
  :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-mt-6 hx-list-disc first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
+    @apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
    li {
-      @apply hx-my-2;
+      @apply my-2;
    }
  }
  /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list 
-     inside the list item (li) of any parent ul or ol.
+     inside the first list item (li) of any parent ul or ol. 
     The rule sets the top margin of the selected list to zero. */
-  :where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-mt-0;
+  :where(ul, ol) > li:first-child > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply mt-0;
  }
  :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
+    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
  }
-  :where(pre.mermaid):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-bg-transparent hx-rounded-none dark:hx-bg-transparent;
+  :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+    @apply bg-transparent rounded-none dark:bg-transparent;
  }
  :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-mx-auto hx-my-4 hx-rounded-md;
+    @apply mx-auto my-4 rounded-md;
  }
  :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
    figcaption {
-      @apply hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 hx-mt-2 hx-block hx-text-center;
-    }
-  }
-  /* Definition list */
-  :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    dt {
-      @apply hx-mt-6 hx-font-semibold;
-    }
-    dd {
-      @apply hx-my-2 hx-ps-6;
+      @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
    }
  }
  .footnotes {
-    @apply hx-mt-12 hx-text-sm;
+    @apply mt-12 text-sm;
  }
 }

 .subheading-anchor {
-  @apply hx-opacity-0 hx-transition-opacity ltr:hx-ml-1 rtl:hx-mr-1;
+  @apply opacity-0 transition-opacity ltr:ml-1 rtl:mr-1;

  span:target + &,
  :hover > &,
  &:focus {
-    @apply hx-opacity-100;
+    @apply opacity-100;
  }

  span + &,
  :hover > & {
-    @apply !hx-no-underline;
+    @apply !no-underline;
  }

  &:after {
-    @apply hx-content-['#'] hx-px-1;
-    @apply hx-text-gray-300 dark:hx-text-neutral-700;
+    @apply content-['#'] px-1;
+    @apply text-gray-300 dark:text-neutral-700;
    span:target + & {
-      @apply hx-text-gray-400;
-      @apply dark:hx-text-neutral-500;
+      @apply text-gray-400;
+      @apply dark:text-neutral-500;
    }
  }
 }

 article details > summary {
  &::-webkit-details-marker {
-    @apply hx-hidden;
+    @apply hidden;
  }
  &::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='hx-h-5 hx-w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
    height: 1.2em;
    width: 1.2em;
    vertical-align: -4px;
    padding: 0 0.6em;
  }
 }
-
-:lang(fa) ol {
-  list-style-type: persian;
-}
--- a/assets/js/back-to-top.js
+++ b/assets/js/back-to-top.js
@ -5,9 +5,9 @@ document.addEventListener("DOMContentLoaded", function () {
  if (backToTop) {
    document.addEventListener("scroll", (e) => {
      if (window.scrollY > 300) {
-        backToTop.classList.remove("hx-opacity-0");
+        backToTop.classList.remove("opacity-0");
      } else {
-        backToTop.classList.add("hx-opacity-0");
+        backToTop.classList.add("opacity-0");
      }
    });
  }
--- a/assets/js/code-copy.js
+++ b/assets/js/code-copy.js
@ -25,7 +25,7 @@ document.addEventListener('DOMContentLoaded', function () {
    return svg;
  }

-  document.querySelectorAll('.hextra-code-copy-btn').forEach(function (button) {
+  document.querySelectorAll('.code-copy-btn').forEach(function (button) {
    // Add copy and success icons
    button.querySelector('.copy-icon')?.appendChild(getCopyIcon());
    button.querySelector('.success-icon')?.appendChild(getSuccessIcon());
--- a/assets/js/flexsearch.js
+++ b/assets/js/flexsearch.js
@ -6,7 +6,7 @@ document.addEventListener("DOMContentLoaded", function () {
    // select the kbd element under the .search-wrapper class
    const keys = document.querySelectorAll(".search-wrapper kbd");
    keys.forEach(key => {
-      key.innerHTML = '<span class="hx-text-xs">⌘</span>K';
+      key.innerHTML = '<span class="text-xs">⌘</span>K';
    });
  }
 });
@ -27,20 +27,6 @@ document.addEventListener("DOMContentLoaded", function () {
    el.addEventListener('focus', init);
    el.addEventListener('keyup', search);
    el.addEventListener('keydown', handleKeyDown);
-    el.addEventListener('input', handleInputChange);
-  }
-
-  const shortcutElements = document.querySelectorAll('.search-wrapper kbd');
-
-  function setShortcutElementsOpacity(opacity) {
-    shortcutElements.forEach(el => {
-      el.style.opacity = opacity;
-    });
-  }
-
-  function handleInputChange(e) {
-    const opacity = e.target.value.length > 0 ? 0 : 100;
-    setShortcutElementsOpacity(opacity);
  }

  // Get the search wrapper, input, and results elements.
@ -93,7 +79,6 @@ document.addEventListener("DOMContentLoaded", function () {
      e.target !== resultsElement &&
      !resultsElement.contains(e.target)
    ) {
-      setShortcutElementsOpacity(100);
      hideSearchResults();
    }
  });
@ -143,7 +128,7 @@ document.addEventListener("DOMContentLoaded", function () {
  function hideSearchResults() {
    const { resultsElement } = getActiveSearchElement();
    if (!resultsElement) return;
-    resultsElement.classList.add('hx-hidden');
+    resultsElement.classList.add('hidden');
  }

  // Handle keyboard events.
@ -172,10 +157,6 @@ document.addEventListener("DOMContentLoaded", function () {
      case 'Escape':
        e.preventDefault();
        hideSearchResults();
-        // Clear the input when pressing escape
-        inputElement.value = '';
-        inputElement.dispatchEvent(new Event('input'));
-        // Remove focus from the input
        inputElement.blur();
        break;
    }
@ -189,40 +170,24 @@ document.addEventListener("DOMContentLoaded", function () {
    }
  }

-  /**
-   * Preloads the search index by fetching data and adding it to the FlexSearch index.
-   * @returns {Promise<void>} A promise that resolves when the index is preloaded.
-   */
+  // Preload the search index.
  async function preloadIndex() {
-    const tokenize = '{{- site.Params.search.flexsearch.tokenize | default  "forward" -}}';
-
-    const isCJK = () => {
-      const lang = document.documentElement.lang || "en";
-      return lang.startsWith("zh") || lang.startsWith("ja") || lang.startsWith("ko");
-    }
-
-    const encodeCJK = (str) => str.replace(/[\x00-\x7F]/g, "").split("");
-    const encodeDefault = (str) => (""+str).toLocaleLowerCase().split(/[\p{Z}\p{S}\p{P}\p{C}]+/u);
-    const encodeFunction = isCJK() ? encodeCJK : encodeDefault;
-
    window.pageIndex = new FlexSearch.Document({
-      tokenize,
-      encode: encodeFunction,
+      tokenize: 'forward',
      cache: 100,
      document: {
        id: 'id',
-        store: ['title', 'crumb'],
+        store: ['title'],
        index: "content"
      }
    });

    window.sectionIndex = new FlexSearch.Document({
-      tokenize,
-      encode: encodeFunction,
+      tokenize: 'forward',
      cache: 100,
      document: {
        id: 'id',
-        store: ['title', 'content', 'url', 'display', 'crumb'],
+        store: ['title', 'content', 'url', 'display'],
        index: "content",
        tag: 'pageId'
      }
@ -234,30 +199,6 @@ document.addEventListener("DOMContentLoaded", function () {
    for (const route in data) {
      let pageContent = '';
      ++pageId;
-      const urlParts = route.split('/').filter(x => x != "" && !x.startsWith('#'));
-
-      let crumb = '';
-      let searchUrl = '/'
-      for (let i = 0; i < urlParts.length; i++) {
-        const urlPart = urlParts[i];
-        searchUrl += urlPart + '/'
-
-        const crumbData = data[searchUrl];
-        if (!crumbData) {
-          console.warn('Excluded page', searchUrl, '- will not be included for search result breadcrumb for', route);
-          continue;
-        }
-
-        let title = data[searchUrl].title;
-        if (title == "_index") {
-          title = urlPart.split("-").map(x => x).join(" ");
-        }
-        crumb += title;
-
-        if (i < urlParts.length - 1) {
-          crumb += ' > ';
-        }
-      }

      for (const heading in data[route].data) {
        const [hash, text] = heading.split('#');
@ -271,7 +212,6 @@ document.addEventListener("DOMContentLoaded", function () {
          id: url,
          url,
          title,
-          crumb,
          pageId: `page_${pageId}`,
          content: title,
          ...(paragraphs[0] && { display: paragraphs[0] })
@ -282,7 +222,6 @@ document.addEventListener("DOMContentLoaded", function () {
            id: `${url}_${i}`,
            url,
            title,
-            crumb,
            pageId: `page_${pageId}`,
            content: paragraphs[i]
          });
@ -294,17 +233,12 @@ document.addEventListener("DOMContentLoaded", function () {
      window.pageIndex.add({
        id: pageId,
        title: data[route].title,
-        crumb,
        content: pageContent
      });

    }
  }

-  /**
-   * Performs a search based on the provided query and displays the results.
-   * @param {Event} e - The event object.
-   */
  function search(e) {
    const query = e.target.value;
    if (!e.target.value) {
@ -316,7 +250,7 @@ document.addEventListener("DOMContentLoaded", function () {
    while (resultsElement.firstChild) {
      resultsElement.removeChild(resultsElement.firstChild);
    }
-    resultsElement.classList.remove('hx-hidden');
+    resultsElement.classList.remove('hidden');

    const pageResults = window.pageIndex.search(query, 5, { enrich: true, suggest: true })[0]?.result || [];

@ -347,7 +281,7 @@ document.addEventListener("DOMContentLoaded", function () {
          _page_rk: i,
          _section_rk: j,
          route: url,
-          prefix: isFirstItemOfPage ? result.doc.crumb : undefined,
+          prefix: isFirstItemOfPage ? result.doc.title : undefined,
          children: { title, content }
        })
        isFirstItemOfPage = false
@ -373,12 +307,6 @@ document.addEventListener("DOMContentLoaded", function () {
    displayResults(sortedResults, query);
  }

-  /**
-   * Displays the search results on the page.
-   *
-   * @param {Array} results - The array of search results.
-   * @param {string} query - The search query.
-   */
  function displayResults(results, query) {
    const { resultsElement } = getActiveSearchElement();
    if (!resultsElement) return;
--- a/assets/js/lang.js
+++ b/assets/js/lang.js
@ -5,7 +5,7 @@
      e.preventDefault();
      switcher.dataset.state = switcher.dataset.state === 'open' ? 'closed' : 'open';
      const optionsElement = switcher.nextElementSibling;
-      optionsElement.classList.toggle('hx-hidden');
+      optionsElement.classList.toggle('hidden');

      // Calculate position of language options element
      const switcherRect = switcher.getBoundingClientRect();
@ -21,7 +21,7 @@
      languageSwitchers.forEach((switcher) => {
        switcher.dataset.state = 'closed';
        const optionsElement = switcher.nextElementSibling;
-        optionsElement.classList.add('hx-hidden');
+        optionsElement.classList.add('hidden');
      });
    }
  });
--- a/assets/js/menu.js
+++ b/assets/js/menu.js
@ -6,9 +6,9 @@ document.addEventListener('DOMContentLoaded', function () {
  const sidebarContainer = document.querySelector('.sidebar-container');

  // Initialize the overlay
-  const overlayClasses = ['hx-fixed', 'hx-inset-0', 'hx-z-10', 'hx-bg-black/80', 'dark:hx-bg-black/60'];
-  overlay.classList.add('hx-bg-transparent');
-  overlay.classList.remove("hx-hidden", ...overlayClasses);
+  const overlayClasses = ['fixed', 'inset-0', 'z-10', 'bg-black/80', 'dark:bg-black/60'];
+  overlay.classList.add('bg-transparent');
+  overlay.classList.remove("hidden", ...overlayClasses);

  function toggleMenu() {
    // Toggle the hamburger menu
@ -19,22 +19,22 @@ document.addEventListener('DOMContentLoaded', function () {
    sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');

    // When the menu is open, we want to prevent the body from scrolling
-    document.body.classList.toggle('hx-overflow-hidden');
-    document.body.classList.toggle('md:hx-overflow-auto');
+    document.body.classList.toggle('overflow-hidden');
+    document.body.classList.toggle('md:overflow-auto');
  }

  menu.addEventListener('click', (e) => {
    e.preventDefault();
    toggleMenu();

-    if (overlay.classList.contains('hx-bg-transparent')) {
+    if (overlay.classList.contains('bg-transparent')) {
      // Show the overlay
      overlay.classList.add(...overlayClasses);
-      overlay.classList.remove('hx-bg-transparent');
+      overlay.classList.remove('bg-transparent');
    } else {
      // Hide the overlay
      overlay.classList.remove(...overlayClasses);
-      overlay.classList.add('hx-bg-transparent');
+      overlay.classList.add('bg-transparent');
    }
  });

@ -44,6 +44,6 @@ document.addEventListener('DOMContentLoaded', function () {

    // Hide the overlay
    overlay.classList.remove(...overlayClasses);
-    overlay.classList.add('hx-bg-transparent');
+    overlay.classList.add('bg-transparent');
  });
 });
--- a/assets/js/sidebar.js
+++ b/assets/js/sidebar.js
@ -1,9 +1,4 @@
 document.addEventListener("DOMContentLoaded", function () {
-  scrollToActiveItem();
-  enableCollapsibles();
-});
-
-function enableCollapsibles() {
  const buttons = document.querySelectorAll(".hextra-sidebar-collapsible-button");
  buttons.forEach(function (button) {
    button.addEventListener("click", function (e) {
@ -14,23 +9,4 @@ function enableCollapsibles() {
      }
    });
  });
-}
-
-function scrollToActiveItem() {
-  const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar");
-  const activeItems = document.querySelectorAll(".sidebar-active-item");
-  const visibleActiveItem = Array.from(activeItems).find(function (activeItem) {
-    return activeItem.getBoundingClientRect().height > 0;
 });
-
-  if (!visibleActiveItem) {
-    return;
-  }
-
-  const yOffset = visibleActiveItem.clientHeight;
-  const yDistance = visibleActiveItem.getBoundingClientRect().top - sidebarScrollbar.getBoundingClientRect().top;
-  sidebarScrollbar.scrollTo({
-    behavior: "instant",
-    top: yDistance - yOffset
-  });
-}
--- a/assets/js/tabs.js
+++ b/assets/js/tabs.js
@ -1,14 +1,14 @@
-document.querySelectorAll('.hextra-tabs-toggle').forEach(function (button) {
+document.querySelectorAll('.tabs-toggle').forEach(function (button) {
  button.addEventListener('click', function (e) {
    // set parent tabs to unselected
-    const tabs = Array.from(e.target.parentElement.querySelectorAll('.hextra-tabs-toggle'));
+    const tabs = Array.from(e.target.parentElement.querySelectorAll('.tabs-toggle'));
    tabs.map(tab => tab.dataset.state = '');

    // set current tab to selected
    e.target.dataset.state = 'selected';

    // set all panels to unselected
-    const panelsContainer = e.target.parentElement.parentElement.nextElementSibling;
+    const panelsContainer = e.target.parentElement.nextElementSibling;
    Array.from(panelsContainer.children).forEach(function (panel) {
      panel.dataset.state = '';
    });
--- a/assets/lib/katex/auto-render.min.js
+++ b/assets/lib/katex/auto-render.min.js
@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};return function(){r.d(o,{default:function(){return d}});var e=r(771),t=r.n(e);const n=function(e,t,n){let r=n,o=0;const i=e.length;for(;r<t.length;){const n=t[r];if(o<=0&&t.slice(r,r+i)===e)return r;"\\"===n?r++:"{"===n?o++:"}"===n&&o--,r++}return-1},i=/^\\begin{/;var a=function(e,t){let r;const o=[],a=new RegExp("("+t.map((e=>e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"))).join("|")+")");for(;r=e.search(a),-1!==r;){r>0&&(o.push({type:"text",data:e.slice(0,r)}),e=e.slice(r));const a=t.findIndex((t=>e.startsWith(t.left)));if(r=n(t[a].right,e,t[a].left.length),-1===r)break;const l=e.slice(0,r+t[a].right.length),s=i.test(l)?l:e.slice(t[a].left.length,r);o.push({type:"math",data:s,rawData:l,display:t[a].display}),e=e.slice(r+t[a].right.length)}return""!==e&&o.push({type:"text",data:e}),o};const l=function(e,n){const r=a(e,n.delimiters);if(1===r.length&&"text"===r[0].type)return null;const o=document.createDocumentFragment();for(let e=0;e<r.length;e++)if("text"===r[e].type)o.appendChild(document.createTextNode(r[e].data));else{const i=document.createElement("span");let a=r[e].data;n.displayMode=r[e].display;try{n.preProcess&&(a=n.preProcess(a)),t().render(a,i,n)}catch(i){if(!(i instanceof t().ParseError))throw i;n.errorCallback("KaTeX auto-render: Failed to parse `"+r[e].data+"` with ",i),o.appendChild(document.createTextNode(r[e].rawData));continue}o.appendChild(i)}return o},s=function(e,t){for(let n=0;n<e.childNodes.length;n++){const r=e.childNodes[n];if(3===r.nodeType){let o=r.textContent,i=r.nextSibling,a=0;for(;i&&i.nodeType===Node.TEXT_NODE;)o+=i.textContent,i=i.nextSibling,a++;const s=l(o,t);if(s){for(let e=0;e<a;e++)r.nextSibling.remove();n+=s.childNodes.length-1,e.replaceChild(s,r)}else n+=a}else if(1===r.nodeType){const e=" "+r.className+" ";-1===t.ignoredTags.indexOf(r.nodeName.toLowerCase())&&t.ignoredClasses.every((t=>-1===e.indexOf(" "+t+" ")))&&s(r,t)}}};var d=function(e,t){if(!e)throw new Error("No element provided to render");const n={};for(const e in t)t.hasOwnProperty(e)&&(n[e]=t[e]);n.delimiters=n.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],n.ignoredTags=n.ignoredTags||["script","noscript","style","textarea","pre","code","option"],n.ignoredClasses=n.ignoredClasses||[],n.errorCallback=n.errorCallback||console.error,n.macros=n.macros||{},s(e,n)}}(),o=o.default}()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var i=r[e];if(void 0!==i)return i.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var i={};return function(){n.d(i,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,i=0,a=e.length;n<t.length;){var o=t[n];if(i<=0&&t.slice(n,n+a)===e)return n;"\\"===o?n++:"{"===o?i++:"}"===o&&i--,n++}return-1},a=/^\\begin{/,o=function(e,t){for(var n,i=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(i.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=a.test(d)?d:e.slice(t[l].left.length,n);i.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&i.push({type:"text",data:e}),i},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var i=document.createDocumentFragment(),a=0;a<n.length;a++)if("text"===n[a].type)i.appendChild(document.createTextNode(n[a].data));else{var l=document.createElement("span"),d=n[a].data;r.displayMode=n[a].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[a].data+"` with ",e),i.appendChild(document.createTextNode(n[a].rawData));continue}i.appendChild(l)}return i},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var i=t.childNodes[n];if(3===i.nodeType){for(var a=i.textContent,o=i.nextSibling,d=0;o&&o.nodeType===Node.TEXT_NODE;)a+=o.textContent,o=o.nextSibling,d++;var s=l(a,r);if(s){for(var f=0;f<d;f++)i.nextSibling.remove();n+=s.childNodes.length-1,t.replaceChild(s,i)}else n+=d}else 1===i.nodeType&&function(){var t=" "+i.className+" ";-1===r.ignoredTags.indexOf(i.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(i,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),i=i.default}()}));
--- a/assets/lib/katex/katex.min.css
+++ b/assets/lib/katex/katex.min.css
--- a/assets/lib/katex/katex.min.js
+++ b/assets/lib/katex/katex.min.js
--- a/assets/lib/mermaid/mermaid.min.js
+++ b/assets/lib/mermaid/mermaid.min.js
--- a/data/icons.yaml
+++ b/data/icons.yaml
@ -14,16 +14,6 @@ codeberg: >
    <path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"/>
  </svg>

-gitlab: >
-  <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="m23.6 9.593l-.033-.086L20.3.98a.851.851 0 0 0-.336-.405a.875.875 0 0 0-1 .054a.875.875 0 0 0-.29.44L16.47 7.818H7.537L5.333 1.07a.857.857 0 0 0-.29-.441a.875.875 0 0 0-1-.054a.859.859 0 0 0-.336.405L.433 9.502l-.032.086a6.066 6.066 0 0 0 2.012 7.01l.01.009l.03.021l4.977 3.727l2.462 1.863l1.5 1.132a1.009 1.009 0 0 0 1.22 0l1.499-1.132l2.461-1.863l5.006-3.75l.013-.01a6.068 6.068 0 0 0 2.01-7.002"/>
-  </svg>
-
-bitbucket: >
-  <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M.778 1.213a.768.768 0 0 0-.768.892l3.263 19.81c.084.5.515.868 1.022.873H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891zM14.52 15.53H9.522L8.17 8.466h7.561z" />
-  </svg>
-
 hextra: <svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="m 105.50024,22.224647 c -9.59169,-5.537563 -21.40871,-5.537563 -31.000093,0 L 39.054693,42.689119 C 29.463353,48.226675 23.55484,58.460531 23.55484,69.535642 v 40.928918 c 0,11.07542 5.908513,21.3092 15.499853,26.84652 l 35.445453,20.46446 c 9.591313,5.53732 21.408404,5.53732 31.000094,0 l 35.44507,-20.46446 c 9.59131,-5.53732 15.49985,-15.7711 15.49985,-26.84652 V 69.535642 c 0,-11.075111 -5.90854,-21.308967 -15.49985,-26.846523 z M 34.112797,85.737639 c -1.384445,2.397827 -1.384445,5.352099 0,7.749927 l 24.781554,42.922974 c 1.38437,2.39783 3.942853,3.87496 6.711592,3.87496 h 49.563107 c 2.76905,0 5.3273,-1.47713 6.71144,-3.87496 l 24.78194,-42.922974 c 1.38414,-2.397828 1.38414,-5.3521 0,-7.749927 L 121.88049,42.814746 c -1.38414,-2.397828 -3.94239,-3.874964 -6.71144,-3.874964 H 65.605944 c -2.768739,0 -5.327223,1.477059 -6.711592,3.874964 z" style="stroke-width:0.774993" /></svg>

 hugo: <svg viewBox="0 0 370 391" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m207.5 22.4 114.4 66.6c13.5 7.9 21.9 22.4 21.9 38v136.4c0 17.3-9.3 33.3-24.5 41.8l-113.5 63.9a49.06 49.06 0 0 1 -48.5-.2l-104.5-60.1c-16.4-9.5-26.6-27-26.6-45.9v-129.5c0-19.1 9.9-36.8 26.1-46.8l102.8-63.5c16-9.9 36.2-10.1 52.4-.7z" fill="#ff4088" stroke="#c9177e" stroke-width="27" /><path d="m105.6 298.2v-207.2h43.4v75.5h71.9v-75.5h43.5v207.2h-43.5v-90.6h-71.9v90.6z" fill="#fff" /></g></svg>
@ -36,8 +26,6 @@ hugo-full: >
    <path fill="#fff" d="M1320.72 89.15c58.79 0 106.52 47.73 106.52 106.51 0 58.8-47.73 106.52-106.52 106.52-58.78 0-106.52-47.73-106.52-106.52 0-58.78 47.74-106.51 106.52-106.51zm0 39.57c36.95 0 66.94 30 66.94 66.94a66.97 66.97 0 0 1-66.94 66.94c-36.95 0-66.94-29.99-66.94-66.94a66.97 66.97 0 0 1 66.93-66.94h.01zm-283.8 65.31c0 47.18-8.94 60.93-26.81 80.58-17.87 19.65-41.57 27.57-71.1 27.57-27 0-48.75-9.58-67.61-26.23-20.88-18.45-36.08-47.04-36.08-78.95 0-31.37 11.72-58.48 32.49-78.67 18.22-17.67 45.34-29.18 73.3-29.18 33.77 0 68.83 15.98 90.44 47.53l-31.73 26.82c-13.45-25.03-32.94-33.46-60.82-34.26-30.83-.88-64.77 28.53-62.25 67.75 1.4 21.94 11.65 59.65 60.96 66.57 25.9 3.63 55.36-24.02 55.36-39.04H944.4v-37.5h92.5V194l.02.03zm-562.6-94.65h42.29v112.17c0 17.8.49 29.33 1.47 34.61 1.69 8.48 4.81 14.37 11.17 19.5 6.37 5.13 13.8 6.59 24.84 6.59 11.2 0 14.96-1.74 20.66-6.6 5.69-4.85 9.12-9.46 10.28-16.53 1.15-7.07 3.07-18.8 3.07-35.18V99.38h42.28v108.78c0 24.86-1.07 42.43-3.21 52.69-2.14 10.27-6.08 18.93-11.82 26-5.74 7.06-13.42 12.69-23.03 16.88-9.62 4.19-22.16 6.28-37.65 6.28-18.7 0-32.87-2.28-42.52-6.85-9.66-4.57-17.3-10.5-22.9-17.8-5.61-7.3-9.3-14.95-11.08-22.96-2.58-11.86-3.88-29.38-3.88-52.55V99.38h.03zM93.91 299.92V92.7h43.35v75.48h71.92V92.7h43.48v207.22h-43.48v-90.61h-71.92v90.61z"/>
  </svg>

-jupyter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.157 22.201A1.784 1.799 0 0 1 5.374 24a1.784 1.799 0 0 1-1.784-1.799a1.784 1.799 0 0 1 1.784-1.799a1.784 1.799 0 0 1 1.783 1.799M20.582 1.427a1.415 1.427 0 0 1-1.415 1.428a1.415 1.427 0 0 1-1.416-1.428A1.415 1.427 0 0 1 19.167 0a1.415 1.427 0 0 1 1.415 1.427M4.992 3.336A1.047 1.056 0 0 1 3.946 4.39a1.047 1.056 0 0 1-1.047-1.055A1.047 1.056 0 0 1 3.946 2.28a1.047 1.056 0 0 1 1.046 1.056m7.336 1.517c3.769 0 7.06 1.38 8.768 3.424a9.36 9.36 0 0 0-3.393-4.547a9.24 9.24 0 0 0-5.377-1.728A9.24 9.24 0 0 0 6.95 3.73a9.36 9.36 0 0 0-3.394 4.547c1.713-2.04 5.004-3.424 8.772-3.424m.001 13.295c-3.768 0-7.06-1.381-8.768-3.425a9.36 9.36 0 0 0 3.394 4.547A9.24 9.24 0 0 0 12.33 21a9.24 9.24 0 0 0 5.377-1.729a9.36 9.36 0 0 0 3.393-4.547c-1.712 2.044-5.003 3.425-8.772 3.425Z" /></svg>
-
 warning: <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path></svg>
 one: <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-1 0 19 19"><path d="M16.417 9.6A7.917 7.917 0 1 1 8.5 1.683 7.917 7.917 0 0 1 16.417 9.6zM9.666 6.508H8.248L6.09 8.09l.806 1.103 1.222-.945v4.816h1.547z"></path></svg>
 cards: <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"></path></svg>
@ -288,5 +276,3 @@ mastodon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill
 youtube: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104l.022.26l.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105l-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006l-.087-.004l-.171-.007l-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103l.003-.052l.008-.104l.022-.26l.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007l.172-.006l.086-.003l.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/></svg>
 x-twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
 linkedin: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
-slack: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52a2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52zm0 1.271a2.528 2.528 0 0 1 2.521 2.521a2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521a2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522zm0-1.268a2.527 2.527 0 0 1-2.52-2.523a2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523z" /></svg>
-bluesky: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 530"><path fill="currentColor" d="M136 44c66 50 138 151 164 205 26-54 98-155 164-205 48-36 126-64 126 25 0 18-10 149-16 170-21 74-96 93-163 81 117 20 147 86 82 153-122 125-176-32-189-72-3-8-4-11-4-8 0-3-1 0-4 8-13 40-67 197-189 72-65-67-35-133 82-153-67 12-142-7-163-81-6-21-16-152-16-170 0-89 78-61 126-25z"/></svg>
--- a/exampleSite/assets/images/space.jpg
+++ b/exampleSite/assets/images/space.jpg
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@ -0,0 +1,76 @@
+---
+title: Hextra Theme
+layout: hextra-home
+---
+
+{{< hextra/hero-badge >}}
+  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <span>Free, open source</span>
+  {{< icon name="arrow-circle-right" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+
+<div class="mt-6 mb-6">
+{{< hextra/hero-headline >}}
+  Build modern websites&nbsp;<br class="sm:block hidden" />with Markdown and Hugo
+{{< /hextra/hero-headline >}}
+</div>
+
+<div class="mb-12">
+{{< hextra/hero-subtitle >}}
+  Fast, batteries-included Hugo theme&nbsp;<br class="sm:block hidden" />for creating beautiful static websites
+{{< /hextra/hero-subtitle >}}
+</div>
+
+<div class="mb-6">
+{{< hextra/hero-button text="Get Started" link="docs" >}}
+</div>
+
+<div class="mt-6"></div>
+
+{{< hextra/feature-grid >}}
+  {{< hextra/feature-card
+    title="Fast and Full-featured"
+    subtitle="Simple and easy to use, yet powerful and feature-rich."
+    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    image="images/hextra-doc.webp"
+    imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="Markdown is All You Need"
+    subtitle="Compose with just Markdown. Enrich with Shortcode components."
+    class="aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
+    image="images/hextra-markdown.webp"
+    imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="Full Text Search"
+    subtitle="Built-in full text search with FlexSearch, no extra setup required."
+    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    image="images/hextra-search.webp"
+    imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="Lightweight as a Feather"
+    subtitle="No dependency or Node.js is needed to use Hextra. Powered by Hugo, one of *the fastest* static site generators, building your site in just seconds with a single binary."
+  >}}
+  {{< hextra/feature-card
+    title="Responsive with Dark Mode Included"
+    subtitle="Looks great on different screen sizes. Built-in dark mode support, with auto-switching based on user's system preference."
+  >}}
+  {{< hextra/feature-card
+    title="Build and Host for Free"
+    subtitle="Build with GitHub Actions, and host for free on GitHub Pages. Alternatively it can be hosted on any static hosting service."
+  >}}
+  {{< hextra/feature-card
+    title="Multi-Language Made Easy"
+    subtitle="Create multi-language pages by just adding locales suffix to the Markdown file. Adding i18n support to your site is intuitive."
+  >}}
+  {{< hextra/feature-card
+    title="And Much More..."
+    icon="sparkles"
+    subtitle="Syntax highlighting / Table of contents / SEO / RSS / LaTeX / Mermaid / Customizable / and more..."
+  >}}
+{{< /hextra/feature-grid >}}
--- a/exampleSite/content/_index.zh-cn.md
+++ b/exampleSite/content/_index.zh-cn.md
@ -0,0 +1,76 @@
+---
+title: Hextra 主题
+layout: hextra-home
+---
+
+{{< hextra/hero-badge >}}
+  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <span>免费 开源</span>
+  {{< icon name="arrow-circle-right" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+
+<div class="mt-6 mb-6">
+{{< hextra/hero-headline >}}
+  创建现代化网站&nbsp;<br class="sm:block hidden" />由 Markdown 和 Hugo 驱动
+{{< /hextra/hero-headline >}}
+</div>
+
+<div class="mb-12">
+{{< hextra/hero-subtitle >}}
+  极速且全能的 Hugo 主题框架&nbsp;<br class="sm:block hidden" />为构建现代化的静态网站而生
+{{< /hextra/hero-subtitle >}}
+</div>
+
+<div class="mb-6">
+{{< hextra/hero-button text="现在开始" link="docs" >}}
+</div>
+
+<div class="mt-6"></div>
+
+{{< hextra/feature-grid >}}
+  {{< hextra/feature-card
+    title="快速且功能全面"
+    subtitle="简单易用，功能强大丰富。"
+    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    image="/images/hextra-doc.webp"
+    imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="Markdown 写作"
+    subtitle="只需使用 Markdown 进行编辑。多样的 Shortcode 组件开箱即用。"
+    class="aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
+    image="/images/hextra-markdown.webp"
+    imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="全文搜索"
+    subtitle="内置 FlexSearch 全文搜索，无需额外设置。"
+    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    image="/images/hextra-search.webp"
+    imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="轻如羽毛"
+    subtitle="使用 Hextra 无需依赖 Node.js。由 Hugo 提供支持，Hugo 是最快的静态网站生成器之一，只需一个二进制文件即可在数秒内创建网站。"
+  >}}
+  {{< hextra/feature-card
+    title="响应式布局，暗黑模式"
+    subtitle="适应不同的屏幕尺寸。内置暗黑模式支持，并根据用户的系统偏好自动切换。"
+  >}}
+  {{< hextra/feature-card
+    title="免费构建和托管"
+    subtitle="使用 GitHub Actions 进行构建，并在 GitHub Pages 上免费托管。也可以托管在任何静态托管服务上。"
+  >}}
+  {{< hextra/feature-card
+    title="多语言轻松实现"
+    subtitle="仅需通过在 Markdown 文件后添加语言代码即可创建多语言页面。向您的站点添加 i18n 支持直观易行。"
+  >}}
+  {{< hextra/feature-card
+    title="还有更多..."
+    icon="sparkles"
+    subtitle="代码高亮 / 目录 / SEO / RSS / LaTeX 公式 / Mermaid 图标 / 自定义 / 等等..."
+  >}}
+{{< /hextra/feature-grid >}}
--- a/exampleSite/content/about/index.md
+++ b/exampleSite/content/about/index.md
@ -0,0 +1,20 @@
+---
+title: About
+toc: false
+---
+
+Hextra is designed to be a simple, fast, and flexible theme for building modern static websites. It is especially well-suited for documentation websites but can also be used for various types of sites, such as blogs, portfolios, and more.
+
+Hugo, like Jekyll, is a static site generator. What sets Hugo apart is that it is a single binary, making it easy to install and run on various platforms. It is also extremely fast and reliable, capable of rendering a site with thousands of pages in milliseconds.
+
+Hextra is built with a mindset focused on having a minimal footprint. To get started, no extra dependencies like Node.js packages are required; all you need is a single YAML configuration file, along with your Markdown content. Thus, we can focus on writing quality content instead of setting up tooling.
+
+## Credits
+
+Hextra cannot be built without the following tools and inspirations:
+
+- [Hugo](https://gohugo.io/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Heroicons](https://heroicons.com/)
+- [Nextra](https://nextra.vercel.app/)
+- [Next.js](https://nextjs.org/)
--- a/exampleSite/content/about/index.zh-cn.md
+++ b/exampleSite/content/about/index.zh-cn.md
@ -0,0 +1,20 @@
+---
+title: 关于
+toc: false
+---
+
+Hextra 是一款简洁、快速、灵活的主题，适用于构建现代化静态站点。Hextra 特别适用于文档网站，但也可用于构建博客、个人网站等各种类型的网站。
+
+Hugo 和 Jekyll 类似，是一个静态网站生成器。但与其他生成器不同，Hugo 只有单个可执行文件，这使得它可以轻松地在各种平台上安装和运行。Hugo 的运行速度非常快且可靠性高，能够在几毫秒内渲染数千页的网站。
+
+Hextra 被设计为轻量级，具有最小化的内存占用。使用 Hextra 无需安装繁杂的依赖，比如 Node.js；相反，你只需要一个简单的 YAML 配置文件和 Markdown 内容。因此，我们可以专注于内容而非在配置环境上浪费精力。
+
+## 鸣谢
+
+Hextra 的设计离不开这些项目的支持和其提供的灵感：
+
+- [Hugo](https://gohugo.io/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Heroicons](https://heroicons.com/)
+- [Nextra](https://nextra.vercel.app/)
+- [Next.js](https://nextjs.org/)
--- a/exampleSite/content/blog/_index.md
+++ b/exampleSite/content/blog/_index.md
@ -0,0 +1,10 @@
+---
+title: "Blog"
+---
+
+<div style="text-align: center; margin-top: 1em;">
+{{< hextra/hero-badge link="index.xml" >}}
+  <span>RSS Feed</span>
+  {{< icon name="rss" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+</div>
--- a/exampleSite/content/blog/_index.zh-cn.md
+++ b/exampleSite/content/blog/_index.zh-cn.md
@ -0,0 +1,3 @@
+---
+title: "博客"
+---
--- a/exampleSite/content/blog/markdown.md
+++ b/exampleSite/content/blog/markdown.md
@ -0,0 +1,157 @@
+---
+title: Markdown Syntax Guide
+date: 2020-01-01
+authors:
+  - name: imfing
+    link: https://github.com/imfing
+    image: https://github.com/imfing.png
+  - name: Octocat
+    link: https://github.com/octocat
+    image: https://github.com/octocat.png
+tags:
+  - Markdown
+  - Example
+  - Guide
+excludeSearch: true
+---
+
+This article offers a sample of basic Markdown syntax that can be used in Hugo content files.
+<!--more-->
+
+## Basic Syntax
+
+### Headings
+
+```
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+```
+
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+### Emphasis
+
+```text
+*This text will be italic*
+_This will also be italic_
+
+**This text will be bold**
+__This will also be bold__
+
+_You **can** combine them_
+```
+
+*This text will be italic*
+
+_This will also be italic_
+
+**This text will be bold**
+
+__This will also be bold__
+
+_You **can** combine them_
+
+### Lists
+
+#### Unordered
+
+```
+* Item 1
+* Item 2
+  * Item 2a
+  * Item 2b
+```
+
+* Item 1
+* Item 2
+  * Item 2a
+  * Item 2b
+
+#### Ordered
+
+```
+1. Item 1
+2. Item 2
+3. Item 3
+   1. Item 3a
+   2. Item 3b
+```
+
+### Images
+
+```markdown
+![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+```
+
+![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+
+### Links
+
+```markdown
+[Hugo](https://gohugo.io)
+```
+
+[Hugo](https://gohugo.io)
+
+### Blockquotes
+
+```markdown
+As Newton said:
+
+> If I have seen further it is by standing on the shoulders of Giants.
+```
+
+> If I have seen further it is by standing on the shoulders of Giants.
+
+### Inline Code
+
+```markdown
+Inline `code` has `back-ticks around` it.
+```
+
+Inline `code` has `back-ticks around` it.
+
+### Code Blocks
+
+#### Syntax Highlighting
+
+````markdown
+```go
+func main() {
+    fmt.Println("Hello World")
+}
+```
+````
+
+```go
+func main() {
+    fmt.Println("Hello World")
+}
+```
+
+### Tables
+
+```markdown
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+```
+
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+
+## References
+
+- [Markdown Syntax](https://www.markdownguide.org/basic-syntax/)
+- [Hugo Markdown](https://gohugo.io/content-management/formats/#markdown)
--- a/exampleSite/content/blog/markdown.zh-cn.md
+++ b/exampleSite/content/blog/markdown.zh-cn.md
@ -0,0 +1,137 @@
+---
+title: Markdown 语法指南
+date: 2020-01-01
+authors:
+  - name: John Doe
+    link: https://example.com/johndoe
+excludeSearch: true
+---
+
+这篇文章提供了一些基础的 Markdown 语法样例，这些可以在 Hugo 的内容文件中使用。
+
+<!--more-->
+
+## 基础语法
+
+### 标题
+
+```
+# 一级标题
+## 二级标题
+### 三级标题
+#### 四级标题
+##### 五级标题
+###### 六级标题
+```
+
+## 二级标题
+### 三级标题
+#### 四级标题
+##### 五级标题
+###### 六级标题
+
+```text
+*这段文字将是斜体*
+_这也将是斜体_
+
+**这段文字将是粗体**
+__这也将是粗体__
+
+_你 **可以** 组合它们_
+```
+
+*这段文字将是斜体*
+_这也将是斜体_
+
+**这段文字将是粗体**
+__这也将是粗体__
+
+_你 **可以** 组合它们_
+
+### 列表
+
+#### 无序列表
+
+* 项目 1
+* 项目 2
+  * 项目 2a
+  * 项目 2b
+
+#### 有序列表
+
+1. 项目 1
+2. 项目 2
+3. 项目 3
+   1. 项目 3a
+   2. 项目 3b
+
+### 图片
+
+```markdown
+![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+```
+
+![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+
+### 链接
+
+```markdown
+[Hugo](https://gohugo.io)
+```
+
+[Hugo](https://gohugo.io)
+
+### 块引用
+
+```markdown
+牛顿曾说：
+
+> 如果我看得更远，那是因为我站在巨人的肩膀上。
+```
+
+> 如果我看得更远，那是因为我站在巨人的肩膀上。
+
+### 行内代码
+
+```markdown
+行内 `代码` 有 `反引号` 包围。
+```
+
+行内 `代码` 有 `反引号` 包围。
+
+### 代码块
+
+#### 语法高亮
+
+````markdown
+```go
+func main() {
+    fmt.Println("Hello World")
+}
+```
+````
+
+```go
+func main() {
+    fmt.Println("Hello World")
+}
+```
+
+### 表格
+
+```markdown
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+```
+
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+
+## 参考
+
+- [Markdown Syntax](https://www.markdownguide.org/basic-syntax/)
+- [Hugo Markdown](https://gohugo.io/content-management/formats/#markdown)
--- a/exampleSite/content/docs/_index.md
+++ b/exampleSite/content/docs/_index.md
@ -0,0 +1,41 @@
+---
+linkTitle: "Documentation"
+title: Introduction
+---
+
+👋 Hello! Welcome to the Hextra documentation!
+
+<!--more-->
+
+## What is Hextra?
+
+Hextra is a modern, fast and batteries-included [Hugo][hugo] theme built with [Tailwind CSS][tailwind-css].
+Designed for building beautiful websites for documentation, blogs, and websites, it provides out-of-the-box features and flexibility to meet various requirements.
+
+## Features
+
+- **Beautiful Design** - Inspired by Nextra, Hextra utilizes Tailwind CSS to offer a modern design that makes your site look outstanding.
+- **Responsive Layout and Dark Mode** - It looks great on all devices, from mobile, tablet to desktop. Dark mode is also supported to accommodate various lighting conditions.
+- **Fast and Lightweight** - Powered by Hugo, a lightning-fast static-site generator housed in a single binary file, Hextra keeps its footprint minimal. No JavaScript or Node.js are needed to use it.
+- **Full-text Search** - Built-in offline full-text search powered by FlexSearch, no additional configuration required.
+- **Battery-included** - Markdown, syntax highlighting, LaTeX math formulae, diagrams and Shortcodes elements to enhance your content. Table of contents, breadcrumbs, pagination, sidebar navigation and more are all automatically generated.
+- **Multi-language and SEO Ready** - Multi-language sites made easy with Hugo's multilingual mode. Out-of-the-box support is included for SEO tags, Open Graph, and Twitter Cards.
+
+## Questions or Feedback?
+
+{{< callout emoji="❓" >}}
+  Hextra is still in active development.
+  Have a question or feedback? Feel free to [open an issue](https://github.com/imfing/hextra/issues)!
+{{< /callout >}}
+
+## Next
+
+Dive right into the following section to get started:
+
+{{< cards >}}
+  {{< card link="getting-started" title="Getting Started" icon="document-text" subtitle="Learn how to create website using Hextra" >}}
+{{< /cards >}}
+
+[hugo]: https://gohugo.io/
+[flex-search]: https://github.com/nextapps-de/flexsearch
+[tailwind-css]: https://tailwindcss.com/
--- a/exampleSite/content/docs/_index.zh-cn.md
+++ b/exampleSite/content/docs/_index.zh-cn.md
@ -0,0 +1,40 @@
+---
+linkTitle: "文档"
+title: 介绍
+---
+
+👋 你好！欢迎来到 Hextra 文档！
+
+<!--more-->
+
+## Hextra 是什么？
+
+Hextra 是一款现代、快速且内置丰富功能的 [Hugo][hugo] 主题，它是用 [Tailwind CSS][tailwind-css] 构建的。该主题旨在创建美观的文档、博客和网站，提供了开箱即用的功能和灵活性以满足各种需求。
+
+## 功能特点
+
+- **优美的设计** - 受到 Nextra 的启发，Hextra 利用 Tailwind CSS 提供了一种现代设计，使您的网站看起来出色。
+- **响应式布局和深色模式** - 无论是在移动设备、平板还是桌面上，都表现出色。同时支持深色模式以适应各种光线条件。
+- **快速和轻量级** - 由 Hugo 驱动，一个轻量级且超快的静态网站生成器，封装在一个单一的二进制文件中，Hextra 保持其占用极小。使用它不需要 Javascript 或 Node.js。
+- **全文搜索** - 内置的离线全文搜索由 FlexSearch 提供支持，无需额外配置。
+- **功能全面** - 支持 Markdown、语法高亮、LaTeX 数学公式、图表以及 Shortcodes 元素以增强您的内容。目录、面包屑、分页、侧边栏导航等都会自动生成。
+- **多语言和 SEO 支持** - Hugo 的多语言模式轻松支持多语言网站。对于 SEO 标签、Open Graph 和 Twitter 卡片，也提供了开箱即用的支持。
+
+## 有问题或反馈？
+
+{{< callout emoji="❓" >}}
+  Hextra 仍在积极开发中。
+  有问题或反馈？请随时[提出问题](https://github.com/imfing/hextra/issues)！
+{{< /callout >}}
+
+## 接下来
+
+直接进入以下部分开始：
+
+{{< cards >}}
+  {{< card link="getting-started" title="入门指南" icon="document-text" subtitle="学习如何使用 Hextra 创建网站" >}}
+{{< /cards >}}
+
+[hugo]: https://gohugo.io/
+[flex-search]: https://github.com/nextapps-de/flexsearch
+[tailwind-css]: https://tailwindcss.com/
--- a/exampleSite/content/docs/advanced/_index.md
+++ b/exampleSite/content/docs/advanced/_index.md
@ -0,0 +1,16 @@
+---
+linkTitle: Advanced
+title: Advanced Topics
+prev: /docs/guide/shortcodes/tabs
+next: /docs/advanced/multi-language
+---
+
+This section covers some advanced topics of the theme.
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="multi-language" title="Multi-language" icon="translate" >}}
+  {{< card link="customization" title="Customization" icon="pencil" >}}
+  {{< card link="comments" title="Comments System" icon="chat-alt" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/advanced/_index.zh-cn.md
+++ b/exampleSite/content/docs/advanced/_index.zh-cn.md
@ -0,0 +1,15 @@
+---
+linkTitle: 高级配置
+title: 高级配置
+prev: /docs/guide/shortcodes/tabs
+next: /docs/advanced/multi-language
+---
+
+此部分提供了 Hextra 的一些高级配置。
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="multi-language" title="多语言" icon="translate" >}}
+  {{< card link="customization" title="定制化" icon="pencil" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/advanced/comments.md
+++ b/exampleSite/content/docs/advanced/comments.md
@ -0,0 +1,39 @@
+---
+title: Comments System
+linkTitle: Comments
+---
+
+Hextra supports adding comments system to your site.
+Currently [giscus](https://giscus.app/) is supported.
+
+<!--more-->
+
+## giscus
+
+[giscus](https://giscus.app/) is a comments system powered by [GitHub Discussions](https://docs.github.com/en/discussions). It is free and open source.
+
+To enable giscus, you need to add the following to the site configuration file:
+
+```yaml {filename="hugo.yaml"}
+params:
+  comments:
+    enable: false
+    type: giscus
+
+    giscus:
+      repo: <repository>
+      repoId: <repository ID>
+      category: <category>
+      categoryId: <category ID>
+```
+
+The giscus configurations can be constructed from the [giscus.app](https://giscus.app/) website. More details can also be found there.
+
+Comments can be enabled or disabled for a specific page in the page front matter:
+
+```yaml {filename="content/docs/about.md"}
+---
+title: About
+comments: true
+---
+```
--- a/exampleSite/content/docs/advanced/comments.zh-cn.md
+++ b/exampleSite/content/docs/advanced/comments.zh-cn.md
@ -0,0 +1,39 @@
+---
+title: 评论系统
+linkTitle: Comments
+---
+
+Hextra 支持在你的网站中添加评论系统。
+目前已经支持 [giscus](https://giscus.app/).
+
+<!--more-->
+
+## giscus
+
+[giscus](https://giscus.app/) 是由 [GitHub Discussions](https://docs.github.com/en/discussions)驱动的评论系统。Giscus 免费并且开源。
+
+如需启用 Giscus, 你需要在配置文件中添加以下内容：
+
+```yaml {filename="hugo.yaml"}
+params:
+  comments:
+    enable: false
+    type: giscus
+
+    giscus:
+      repo: <repository>
+      repoId: <repository ID>
+      category: <category>
+      categoryId: <category ID>
+```
+
+Giscus 配置可以参考 [giscus.app](https://giscus.app/)，还可以在那里找到更多详细信息。
+
+可以在 front matter 中启用或禁用特定页面的评论：
+
+```yaml {filename="content/docs/about.md"}
+---
+title: About
+comments: true
+---
+```
--- a/exampleSite/content/docs/advanced/customization.md
+++ b/exampleSite/content/docs/advanced/customization.md
@ -0,0 +1,73 @@
+---
+title: Customizing Hextra
+linkTitle: Customization
+---
+
+Hextra offers some default customization options in the `hugo.yaml` config file to configure the theme.
+This page describes the available options and how to customize the theme further.
+
+<!--more-->
+
+## Custom CSS
+
+To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file.
+
+### Font Family
+
+The font family of the content can be customized using:
+
+```css {filename="assets/css/custom.css"}
+.content {
+  font-family: "Times New Roman", Times, serif;
+}
+```
+
+### Inline Code Element
+
+The color of text mixed with `other text` can customized with:
+
+```css {filename="assets/css/custom.css"}
+.content code:not(.code-block code) {
+  color: #c97c2e;
+}
+```
+
+### Primary Color
+
+The primary color of the theme can be customized by setting the `--primary-hue` and `--primary-saturation` variables:
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --primary-hue: 100deg;
+  --primary-saturation: 90%;
+}
+```
+
+### Syntax Highlighting
+
+List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:
+
+```shell
+hugo gen chromastyles --style=github
+```
+
+To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file.
+
+## Custom Scripts
+
+You may add custom scripts to the end of the head for every page by adding the following file:
+
+```
+layouts/partials/custom/head-end.html
+```
+
+## Custom Layouts
+
+The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site.
+For example, to override the `single.html` layout for docs, create a file `layouts/docs/single.html` in your site.
+
+For further information, refer to the [Hugo Templates](https://gohugo.io/templates/).
+
+## Further Customization
+
+Didn't find what you were looking for? Feel free to [open a discussion](https://github.com/imfing/hextra/discussions) or make a contribution to the theme!
--- a/exampleSite/content/docs/advanced/customization.zh-cn.md
+++ b/exampleSite/content/docs/advanced/customization.zh-cn.md
@ -0,0 +1,58 @@
+---
+title: 自定义 Hextra
+linkTitle: 自定义
+---
+
+Hextra 在 `hugo.yaml` 中提供了一些自定义选项来配置主题。
+本页介绍了可用选项以及如何进一步自定义主题。
+
+<!--more-->
+
+## 自定义 CSS
+
+要添加自定义 CSS，我们需要在站点中创建一个文件 `assets/css/custom.css`。Hextra 将自动加载该文件，比如自定义字体：
+
+```css {filename="assets/css/custom.css"}
+.content {
+  font-family: "Times New Roman", Times, serif;
+}
+```
+
+### 主题色
+
+主题色可以通过设置 `--primary-hue` 变量来自定义：
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --primary-hue: 100deg;
+}
+```
+
+### 代码高亮
+
+代码高亮风格的详细信息可在 [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表：
+
+```shell
+hugo gen chromastyles --style=github
+```
+
+可将生成的样式添加到自定义 CSS 文件中以覆盖默认代码高亮样式。
+
+## 自定义 Script
+
+你可以添加以下文件以自定义 `script` 添加到每页的 `head` 最后：
+
+```
+layouts/partials/custom/head-end.html
+```
+
+## 自定义布局
+
+可以在站点的 `layouts` 目录中创建同名文件来覆盖主题的默认布局。
+例如，要覆盖文档的 `single.html` 布局，在站点中创建文件 `layouts/docs/single.html`。
+
+如需或许更多信息，转至 [Hugo Templates](https://gohugo.io/templates/)。
+
+## 进一步定制 Hextra
+
+没有找到你想修改的内容？在 GitHub 上[创建 Discussion](https://github.com/imfing/hextra/discussions) 或为 Hextra 贡献你的智慧！
--- a/exampleSite/content/docs/advanced/multi-language.md
+++ b/exampleSite/content/docs/advanced/multi-language.md
@ -0,0 +1,83 @@
+---
+title: "Multi-language"
+weight: 1
+prev: /docs/advanced
+---
+
+Hextra supports creating site with multiple languages using Hugo's [multilingual mode](https://gohugo.io/content-management/multilingual/).
+
+<!--more-->
+
+## Enable Multi-language
+
+To make our site multi-language, we need to tell Hugo the supported languages. We need to add to the site configuration file:
+
+```yaml {filename="hugo.yaml"}
+defaultContentLanguage: en
+languages:
+  en:
+    languageName: English
+    weight: 1
+  fr:
+    languageName: Français
+    weight: 2
+  ja:
+    languageName: 日本語
+    weight: 3
+```
+
+## Manage Translations by Filename
+
+Hugo supports managing translations by filename. For example, if we have a file `content/docs/_index.md` in English, we can create a file `content/docs/_index.fr.md` for French translation.
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="_index.fr.md" >}}
+      {{< filetree/file name="_index.ja.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+Note: Hugo also supports [Translation by content directory](https://gohugo.io/content-management/multilingual/#translation-by-content-directory).
+
+## Translate Menu Items
+
+To translate menu items in the navigation bar, we need to set the `identifier` field:
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - identifier: documentation
+      name: Documentation
+      pageRef: /docs
+      weight: 1
+    - identifier: blog
+      name: Blog
+      pageRef: /blog
+      weight: 2
+```
+
+and translate them in the corresponding i18n file:
+
+```yaml {filename="i18n/fr.yaml"}
+documentation: Documentation
+blog: Blog
+```
+
+## Translate Strings
+
+To translate strings on the other places, we need to add the translation to the corresponding i18n file:
+
+```yaml {filename="i18n/fr.yaml"}
+readMore: Lire la suite
+```
+
+A list of strings used in the theme can be found in the `i18n/en.yaml` file.
+
+## Read More
+
+- [Hugo Multilingual Mode](https://gohugo.io/content-management/multilingual/)
+- [Hugo Multilingual Part 1: Content translation](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
+- [Hugo Multilingual Part 2: Strings localization](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
--- a/exampleSite/content/docs/advanced/multi-language.zh-cn.md
+++ b/exampleSite/content/docs/advanced/multi-language.zh-cn.md
@ -0,0 +1,74 @@
+---
+title: "多语言"
+weight: 1
+prev: /docs/advanced
+---
+
+Hextra 支持使用 Hugo 的[多语言模式](https://gohugo.io/content-management/multilingual/) 创建多语言的网站。
+
+<!--more-->
+
+## 启用多语言支持
+
+为了使我们的网站支持多语言，我们需要告诉 Hugo 需要支持的语言。 在站点配置文件中添加：
+
+```yaml {filename="hugo.yaml"}
+defaultContentLanguage: en
+languages:
+  en:
+    languageName: English
+    weight: 1
+  fr:
+    languageName: Français
+    weight: 2
+  ja:
+    languageName: 日本語
+    weight: 3
+```
+
+## 按文件名管理翻译
+
+Hugo 支持按文件名管理翻译。例如，如果我们有一个英文文件 `content/docs/_index.md`，我们可以创建一个翻译为法语的文件 `content/docs/_index.fr.md`。
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="_index.fr.md" >}}
+      {{< filetree/file name="_index.ja.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+注意：Hugo 还支持[按内容目录管理翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)。
+
+## 翻译菜单项
+
+要翻译导航栏中的菜单项，我们需要设置 `identifier` 字段：
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - identifier: documentation
+      name: Documentation
+      pageRef: /docs
+      weight: 1
+    - identifier: blog
+      name: Blog
+      pageRef: /blog
+      weight: 2
+```
+
+## 翻译字符串
+
+要翻译其他地方的字符串，我们需要将翻译添加到相应的 `i18n` 文件中：
+
+```yaml {filename="i18n/fr.yaml"}
+readMore: Lire la suite
+```
+
+## 更多参考
+
+- [Hugo Multilingual Mode](https://gohugo.io/content-management/multilingual/)
+- [Hugo Multilingual Part 1: Content translation](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
+- [Hugo Multilingual Part 2: Strings localization](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
--- a/exampleSite/content/docs/getting-started.md
+++ b/exampleSite/content/docs/getting-started.md
@ -0,0 +1,192 @@
+---
+title: Getting Started
+weight: 1
+next: /docs/guide
+prev: /docs
+---
+
+## Quick Start from Template
+
+{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
+
+You could quickly get started by using the above template repository.
+
+<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
+
+We have provided a [GitHub Actions workflow](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) which can help automatically build and deploy your site to GitHub Pages, and host it for free.
+For more options, check out [Deploy Site](../guide/deploy-site).
+
+[🌐 Demo ↗](https://imfing.github.io/hextra-starter-template/)
+
+## Start as New Project
+
+There are two main ways to add the Hextra theme to your Hugo project:
+
+1. **Hugo Modules (Recommended)**: The simplest and recommended method. [Hugo modules](https://gohugo.io/hugo-modules/) let you pull in the theme directly from its online source. Theme is downloaded automatically and managed by Hugo.
+
+2. **Git Submodule**: Alternatively, add Hextra as a [Git Submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules). The theme is downloaded by Git and stored in your project's `themes` folder.
+
+### Setup Hextra as Hugo module
+
+#### Prerequisites
+
+Before starting, you need to have the following software installed:
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+- [Go](https://go.dev/)
+
+#### Steps
+
+{{% steps %}}
+
+### Initialize a new Hugo site
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### Configure Hextra theme via module
+
+```shell
+# initialize hugo module
+cd my-site
+hugo mod init github.com/username/my-site
+
+# add Hextra theme
+hugo mod get github.com/imfing/hextra
+```
+
+Configure `hugo.yaml` to use Hextra theme by adding the following:
+
+```yaml
+module:
+  imports:
+    - path: github.com/imfing/hextra
+```
+
+### Create your first content pages
+
+Create new content page for the home page and the documentation page:
+
+```shell
+hugo new content/_index.md
+hugo new content/docs/_index.md
+```
+
+### Preview the site locally
+
+```shell
+hugo server --buildDrafts --disableFastRender
+```
+
+Voila, your new site preview is available at `http://localhost:1313/`.
+
+{{% /steps %}}
+
+
+{{% details title="How to update theme?" %}}
+
+To update all Hugo modules in your project to their latest versions, run the following command:
+
+```shell
+hugo mod get -u
+```
+
+To update Hextra to the [latest released version](https://github.com/imfing/hextra/releases), run the following command:
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
+See [Hugo Modules](https://gohugo.io/hugo-modules/use-modules/#update-all-modules) for more details.
+
+{{% /details %}}
+
+### Setup Hextra as Git submodule
+
+#### Prerequisites
+
+Before starting, you need to have the following software installed:
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### Steps
+
+{{% steps %}}
+
+### Initialize a new Hugo site
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### Add Hextra theme as a Git submodule
+
+```shell
+git submodule add https://github.com/imfing/hextra.git themes/hextra
+```
+
+Configure `hugo.yaml` to use Hextra theme by adding the following:
+
+```yaml
+theme: hextra
+```
+
+### Create your first content pages
+
+Create new content page for the home page and the documentation page:
+
+```shell
+hugo new content/_index.md
+hugo new content/docs/_index.md
+```
+
+### Preview the site locally
+
+```shell
+hugo server --buildDrafts --disableFastRender
+```
+
+Your new site preview is available at `http://localhost:1313/`.
+
+{{% /steps %}}
+
+
+When using [CI/CD](https://en.wikipedia.org/wiki/CI/CD) for Hugo website deployment, it's essential to ensure that the following command is executed before running the `hugo` command.
+
+```shell
+git submodule update --init
+```
+
+Failure to run this command results in the theme folder not being populated with Hextra theme files, leading to a build failure.
+
+
+{{% details title="How to update theme?" %}}
+
+To update all submodules in your repository to their latest commits, run the following command:
+
+```shell
+git submodule update --remote
+```
+
+To update Hextra to the latest commit, run the following command:
+
+```shell
+git submodule update --remote themes/hextra
+```
+
+See [Git submodules](https://git-scm.com/book/en/v2/Git-Tools-Submodules) for more details.
+
+{{% /details %}}
+
+## Next
+
+Explore the following sections to start adding more contents:
+
+{{< cards >}}
+  {{< card link="../guide/organize-files" title="Organize Files" icon="document-duplicate" >}}
+  {{< card link="../guide/configuration" title="Configuration" icon="adjustments" >}}
+  {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/getting-started.zh-cn.md
+++ b/exampleSite/content/docs/getting-started.zh-cn.md
@ -0,0 +1,142 @@
+---
+title: 快速开始
+weight: 1
+next: /docs/guide
+prev: /docs
+---
+
+## 使用模板快速开始
+
+{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
+
+通过使用上面的模板仓库，您将能够快速地开始。
+
+<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
+
+我们提供了一个 [GitHub Actions 工作流](https://docs.github.com/cn/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)，它可以帮助您自动构建并部署您的网站到 GitHub Pages，并免费托管。
+
+[🌐 演示 ↗](https://imfing.github.io/hextra-starter-template/)
+
+## 作为新项目开始
+
+### 前提条件
+
+在开始之前，请确保我们已经安装了 [Hugo](https://gohugo.io/)。
+请参考 Hugo 的[官方安装指南](https://gohugo.io/installation/)以获取更多详情。
+
+[Hugo 模块](https://gohugo.io/hugo-modules/)是管理 Hugo 主题的推荐方式。要使用 Hugo 模块，我们需要安装 [Git](https://git-scm.com/) 和 [Go](https://go.dev/)。
+
+### 初始化 Hugo 站点
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### 通过 Hugo Module 安装
+
+```shell
+# 初始化 Hugo 模块
+cd my-site
+hugo mod init github.com/username/my-site
+
+# 添加 Hextra 
+hugo mod get github.com/imfing/hextra
+```
+
+编辑 `hugo.yaml` 以启用 Hextra：
+
+```yaml
+module:
+  imports:
+    - path: github.com/imfing/hextra
+```
+
+### 通过 Git Submodule 安装
+
+#### 先决条件
+
+在我们开始之前，你必须先确保以下软件已经安装：
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### 步骤
+
+{{% steps %}}
+
+### 初始化 Hugo 站点
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### 将 Hextra 添加为 Git Submodule
+
+```shell
+git submodule add https://github.com/imfing/hextra.git themes/hextra
+```
+
+添加以下内容来配置 `hugo.yaml` 以使用 Hextra：
+
+```yaml
+theme: hextra
+```
+
+### 创建你的第一个内容页
+
+让我们为主页和文档页面创建一个新的内容页面：
+
+```shell
+hugo new content/_index.md
+hugo new content/docs/_index.md
+```
+
+### 在本地预览站点
+
+```shell
+hugo server --buildDrafts --disableFastRender
+```
+
+瞧！你现在可以在 `http://localhost:1313/` 看到你的新站点。
+
+{{% /steps %}}
+
+
+
+
+使用 [CI/CD](https://en.wikipedia.org/wiki/CI/CD) 进行部署时，必须确保在运行 `hugo` 命令之前执行以下命令。
+
+```shell
+git submodule update --init
+```
+
+如果不运行此命令，theme 中将不会存在 Hextra 文件，进而导致构建失败。
+
+
+{{% details title="如何更新主题？" %}}
+
+如需把项目中所有的 Hugo Modules 都升级到最新，在终端中运行此命令：
+
+```shell
+hugo mod get -u
+```
+
+如需把 Hextra 升级到[最新的发行版本](https://github.com/imfing/hextra/releases), 在终端中运行此命令：
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
+如果你需要获得更多信息，参见 [Hugo Modules](https://gohugo.io/hugo-modules/use-modules/#update-all-modules).
+
+{{% /details %}}
+
+## 接下来
+
+探索这些文档以便添加更多内容：
+
+{{< cards >}}
+  {{< card link="../guide/organize-files" title="Organize Files" icon="document-duplicate" >}}
+  {{< card link="../guide/configuration" title="Configuration" icon="adjustments" >}}
+  {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/guide/_index.md
+++ b/exampleSite/content/docs/guide/_index.md
@ -0,0 +1,23 @@
+---
+title: Guide
+weight: 2
+prev: /docs/getting-started
+next: /docs/guide/organize-files
+sidebar:
+  open: true
+---
+
+Explore the following sections to learn how to use Hextra:
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="organize-files" title="Organize Files" icon="document-duplicate" >}}
+  {{< card link="configuration" title="Configuration" icon="adjustments" >}}
+  {{< card link="markdown" title="Markdown" icon="markdown" >}}
+  {{< card link="syntax-highlighting" title="Syntax Highlighting" icon="sparkles" >}}
+  {{< card link="latex" title="LaTeX" icon="variable" >}}
+  {{< card link="diagrams" title="Diagrams" icon="chart-square-bar" >}}
+  {{< card link="shortcodes" title="Shortcodes" icon="template" >}}
+  {{< card link="deploy-site" title="Deploy Site" icon="server" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/guide/_index.zh-cn.md
+++ b/exampleSite/content/docs/guide/_index.zh-cn.md
@ -0,0 +1,22 @@
+---
+title: 指南
+weight: 2
+prev: /docs/getting-started
+next: /docs/guide/organize-files
+sidebar:
+  open: true
+---
+
+探索以下各节以学习如何使用 Hextra 编写内容：
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="organize-files" title="目录结构" icon="document-duplicate" >}}
+  {{< card link="configuration" title="配置" icon="adjustments" >}}
+  {{< card link="markdown" title="Markdown" icon="markdown" >}}
+  {{< card link="syntax-highlighting" title="代码高亮" icon="sparkles" >}}
+  {{< card link="latex" title="LaTeX 公式" icon="variable" >}}
+  {{< card link="diagrams" title="图表" icon="chart-square-bar" >}}
+  {{< card link="shortcodes" title="短代码" icon="template" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/guide/configuration.md
+++ b/exampleSite/content/docs/guide/configuration.md
@ -0,0 +1,271 @@
+---
+title: Configuration
+weight: 2
+---
+
+Hugo reads its configuration from `hugo.yaml` in the root of your Hugo site.
+The config file is where you can configure all aspects of your site.
+Check out the config file for this site [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) on GitHub to get a comprehensive idea of available settings and best practices.
+
+<!--more-->
+
+## Navigation
+
+### Menu
+
+Top right menu is defined under the `menu.main` section in the config file:
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - name: Documentation
+      pageRef: /docs
+      weight: 1
+    - name: Blog
+      pageRef: /blog
+      weight: 2
+    - name: About
+      pageRef: /about
+      weight: 3
+    - name: Search
+      weight: 4
+      params:
+        type: search
+    - name: GitHub
+      weight: 5
+      url: "https://github.com/imfing/hextra"
+      params:
+        icon: github
+```
+
+There are different types of menu items:
+
+1. Link to a page in the site with `pageRef`
+    ```yaml
+    - name: Documentation
+      pageRef: /docs
+    ```
+2. Link to an external URL with `url`
+    ```yaml
+    - name: GitHub
+      url: "https://github.com"
+    ```
+3. Search bar with `type: search`
+    ```yaml
+    - name: Search
+      params:
+        type: search
+    ```
+4. Icon
+    ```yaml
+    - name: GitHub
+      params:
+        icon: github
+    ```
+
+These menu items can be sorted by setting the `weight` parameter.
+
+### Logo and Title
+
+To modify the default logo, edit `hugo.yaml` and add the path to your logo file under `static` directory.
+Optionally, you can change the link that users are redirected to when clicking on your logo, as well as set the width & height of the logo in pixels.
+
+```yaml {filename="hugo.yaml"}
+params:
+  navbar:
+    displayTitle: true
+    displayLogo: true
+    logo:
+      path: images/logo.svg
+      dark: images/logo-dark.svg
+      link: /
+      width: 40
+      height: 20
+```
+
+## Sidebar
+
+### Main Sidebar
+
+For the main sidebar, it is automatically generated from the structure of the content directory.
+See the [Organize Files](/docs/guide/organize-files) page for more details.
+
+To exclude a single page from the left sidebar, set the `sidebar.exclude` parameter in the front matter of the page:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+sidebar:
+  exclude: true
+---
+```
+
+### Extra Links
+
+Sidebar extra links are defined under the `menu.sidebar` section in the config file:
+
+```yaml {filename="hugo.yaml"}
+menu:
+  sidebar:
+    - name: More
+      params:
+        type: separator
+      weight: 1
+    - name: "About"
+      pageRef: "/about"
+      weight: 2
+    - name: "Hugo Docs ↗"
+      url: "https://gohugo.io/documentation/"
+      weight: 3
+```
+
+## Right Sidebar
+
+### Table of Contents
+
+Table of contents is automatically generated from the headings in the content file. It can be disabled by setting `toc: false` in the front matter of the page.
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+toc: false
+---
+```
+
+### Page Edit Link
+
+To configure the page edit link, we can set the `params.editURL.base` parameter in the config file:
+
+```yaml {filename="hugo.yaml"}
+params:
+  editURL:
+    enable: true
+    base: "https://github.com/your-username/your-repo/edit/main"
+```
+
+The edit links will be automatically generated for each page based on the provided url as root directory.
+If you want to set edit link for a specific page, you can set the `editURL` parameter in the front matter of the page:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+editURL: "https://example.com/edit/this/page"
+---
+```
+
+## Footer
+
+### Copyright
+
+To modify the copyright text displayed in your website's footer, you'll need to create a file named `i18n/en.yaml`.
+In this file, specify your new copyright text as shown below:
+
+```yaml {filename="i18n/en.yaml"}
+copyright: "© 2023 YOUR TEXT HERE"
+```
+
+For your reference, an example [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) file can be found in the GitHub repository. Additionally, you could use Markdown format in the copyright text.
+
+## Others
+
+### Favicon
+
+To customize the [favicon](https://en.wikipedia.org/wiki/Favicon) for your site, place icon files under the `static` folder to override the [default favicons from the theme](https://github.com/imfing/hextra/tree/main/static):
+
+{{< filetree/container >}}
+  {{< filetree/folder name="static" >}}
+    {{< filetree/file name="android-chrome-192x192.png" >}}
+    {{< filetree/file name="android-chrome-512x512.png" >}}
+    {{< filetree/file name="apple-touch-icon.png" >}}
+    {{< filetree/file name="favicon-16x16.png" >}}
+    {{< filetree/file name="favicon-32x32.png" >}}
+    {{< filetree/file name="favicon-dark.svg" >}}
+    {{< filetree/file name="favicon.ico" >}}
+    {{< filetree/file name="favicon.svg" >}}
+    {{< filetree/file name="site.webmanifest" >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+Include both `favicon.ico` and `favicon.svg` files in your project to ensure your site's favicons display correctly.
+
+While `favicon.ico` is generally for older browsers, `favicon.svg` is supported by modern ones. The optional `favicon-dark.svg` can be included for a tailored experience in dark mode.
+Feel free to use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate these icons.
+
+### Theme Configuration
+
+Use the `theme` setting to configure the default theme mode and toggle button, allowing visitors to switch between light or dark mode.
+
+```yaml {filename="hugo.yaml"}
+params:
+  theme:
+    # light | dark | system
+    default: system
+    displayToggle: true
+```
+
+Options for `theme.default`:
+
+- `light` - always use light mode
+- `dark` - always use dark mode
+- `system` - sync with the operating system setting (default)
+
+The `theme.displayToggle` parameter allows you to display a toggle button for changing themes.
+When set to `true`, visitors can switch between light or dark mode, overriding the default setting.
+
+### Page Width
+
+The width of the page can be customized by the `params.page.width` parameter in the config file:
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    # full (100%), wide (90rem), normal (1280px)
+    width: wide
+```
+
+There are three available options: `full`, `wide`, and `normal`. By default, the page width is set to `normal`.
+
+Similarly, the width of the navbar and footer can be customized by the `params.navbar.width` and `params.footer.width` parameters.
+
+### Search Index
+
+Full-text search powered by [FlexSearch](https://github.com/nextapps-de/flexsearch) is enabled by default.
+To customize the search index, set the `params.search.flexsearch.index` parameter in the config file:
+
+```yaml {filename="hugo.yaml"}
+params:
+  # Search
+  search:
+    enable: true
+    type: flexsearch
+
+    flexsearch:
+      # index page by: content | summary | heading | title
+      index: content
+```
+
+Options for `flexsearch.index`:
+
+- `content` - full content of the page (default)
+- `summary` - summary of the page, see [Hugo Content Summaries](https://gohugo.io/content-management/summaries/) for more details
+- `heading` - level 1 and level 2 headings
+- `title` - only include the page title
+
+To exclude a page from the search index, set the `excludeSearch: true` in the front matter of the page:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+excludeSearch: true
+---
+```
+
+### Google Analytics
+
+To enable [Google Analytics](https://marketingplatform.google.com/about/analytics/), set `services.googleAnalytics.ID` flag in `hugo.yaml`:
+
+```yaml {filename="hugo.yaml"}
+services:
+  googleAnalytics:
+    ID: G-MEASUREMENT_ID
+```
--- a/exampleSite/content/docs/guide/configuration.zh-cn.md
+++ b/exampleSite/content/docs/guide/configuration.zh-cn.md
@ -0,0 +1,239 @@
+---
+title: 配置文件
+weight: 2
+---
+
+Hugo 从 Hugo 网站根目录下的 `hugo.yaml` 读取配置。
+在配置文件中，您可以配置站点的所有选项。
+你可以在 `exampleSite/hugo.yaml` 中找到此站点的配置文件作为开始。
+
+<!--more-->
+
+## 导航栏
+
+### 菜单
+
+右上角的菜单在配置文件的 `menu.main` 中配置：
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - name: Documentation
+      pageRef: /docs
+      weight: 1
+    - name: Blog
+      pageRef: /blog
+      weight: 2
+    - name: About
+      pageRef: /about
+      weight: 3
+    - name: Search
+      weight: 4
+      params:
+        type: search
+    - name: GitHub
+      weight: 5
+      url: "https://github.com/imfing/hextra"
+      params:
+        icon: github
+```
+
+有几种不同类型的菜单项：
+
+1. Link to a page in the site with `pageRef`
+    ```yaml
+    - name: Documentation
+      pageRef: /docs
+    ```
+2. Link to an external URL with `url`
+    ```yaml
+    - name: GitHub
+      url: "https://github.com"
+    ```
+3. Search bar with `type: search`
+    ```yaml
+    - name: Search
+      params:
+        type: search
+    ```
+4. Icon
+    ```yaml
+    - name: GitHub
+      params:
+        icon: github
+    ```
+
+这些菜单项可以通过设置 `weight` 进行排序。
+
+## 侧边栏
+
+### 主侧边栏
+
+主侧边栏是自动从 `content` 目录结构生成的。
+有关更多详细信息，转至 [目录结构](/docs/guide/organize-files)。
+
+### 额外链接
+
+侧边栏的额外链接在配置文件的 `menu.sidebar` 部分中配置：
+
+```yaml {filename="hugo.yaml"}
+menu:
+  sidebar:
+    - name: More
+      params:
+        type: separator
+      weight: 1
+    - name: "About"
+      pageRef: "/about"
+      weight: 2
+    - name: "Hugo Docs ↗"
+      url: "https://gohugo.io/documentation/"
+      weight: 3
+```
+
+## 右侧边栏
+
+### 目录
+
+目录是根据内容文件中的标题自动生成的，可以在 `front matter` 设置 `toc：false` 来禁用它。
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+toc: false
+---
+```
+
+### 编辑此页链接
+
+要配置编辑此页链接，我们可以在配置文件中设置 `params.editURL.base`：
+```yaml {filename="hugo.yaml"}
+params:
+  editURL:
+    base: "https://github.com/your-username/your-repo/edit/main"
+```
+
+将为每个页面自动生成编辑链接。
+如需为特定页面设置编辑链接，可以在页面的 `front matter` 中设置 `editURL`：
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+editURL: "https://example.com/edit/this/page"
+---
+```
+## Footer
+
+### 版权声明
+
+如需修改网站页脚中显示的版权文本，您需要创建一个名为“i18n/en.yaml”的文件。
+在此文件中，填写新的版权文本，像这样：
+
+```yaml {filename="i18n/en.yaml"}
+copyright: "© 2023 YOUR TEXT HERE"
+```
+你可以在 GitHub 存储库中找到示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。另外，你可以在版权文本中使用 Markdown 格式。
+
+## 其他
+
+### Favicon
+
+如需自定义 [favicon](https://en.wikipedia.org/wiki/Favicon)，请将图标文件放在 `static` 文件夹下以覆盖 [主题中的默认 favicon](https://github.com/imfing/hextra/tree/main/static)：
+
+{{< filetree/container >}}
+  {{< filetree/folder name="static" >}}
+    {{< filetree/file name="android-chrome-192x192.png" >}}
+    {{< filetree/file name="android-chrome-512x512.png" >}}
+    {{< filetree/file name="apple-touch-icon.png" >}}
+    {{< filetree/file name="favicon-16x16.png" >}}
+    {{< filetree/file name="favicon-32x32.png" >}}
+    {{< filetree/file name="favicon-dark.svg" >}}
+    {{< filetree/file name="favicon.ico" >}}
+    {{< filetree/file name="favicon.svg" >}}
+    {{< filetree/file name="site.webmanifest" >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+在您的项目中包含 `favicon.ico` 和 `favicon.svg` 文件，以确保网站的网站图标正确显示。
+
+虽然 `favicon.ico` 通常适用于较旧的浏览器，但 `favicon.svg` 受到现代浏览器的支持，所以更现代的做法是添加 `favicon-dark.svg` 以便在黑暗模式下提供较好的体验体验。
+
+请随意使用 [favicon.io](https://favicon.io/) 或 [favycon](https://github.com/ruisaraiva19/favycon) 等工具来生成这些图标。
+
+### 颜色主题配置
+
+使用`theme`设置来配置默认主题模式和切换按钮，允许访问者在浅色或深色模式之间切换。
+
+```yaml {filename="hugo.yaml"}
+params:
+  theme:
+    # light | dark | system
+    default: system
+    displayToggle: true
+```
+
+`theme.default` 的可选项：
+
+- `light` - 仅使用浅色模式
+- `dark` - 仅使用神色模式
+- `system` - 跟随系统
+
+`theme.displayToggle` 控制显示用于更改主题的切换按钮。
+当设置为“true”时，访问者可以在浅色或深色模式之间切换，覆盖默认设置。
+
+### 页宽
+
+页面的宽度可以通过配置文件中的`params.page.width`参数来调整：
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    # full (100%), wide (90rem), normal (1280px)
+    width: wide
+```
+
+有三个可选项：`full`, `wide`, and `normal`. 默认的页宽模式是 `normal`.
+
+同样的，导航栏和 `footer` 的宽度也可通过 `params.navbar.width` 和 `params.footer.width` 调整。
+
+### 搜索
+
+默认情况下启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供全文搜索。
+要自定义搜索索引，请在配置文件中设置 `params.search.flexsearch.index` ：
+
+```yaml {filename="hugo.yaml"}
+params:
+  # Search
+  search:
+    enable: true
+    type: flexsearch
+
+    flexsearch:
+      # index page by: content | summary | heading | title
+      index: content
+```
+`flexsearch.index` 的可选项：
+
+- `content` - 全内容搜索
+- `summary` - 概述 [Hugo Content Summaries](https://gohugo.io/content-management/summaries/)
+- `heading` - 一级和二级标题
+- `title` - 仅搜索标题
+
+要从搜索索引中排除页面，更改 front matter 中的 `excludeSearch: true`:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+excludeSearch: true
+---
+```
+
+### Google Analytics
+
+要启用 [Google Analytics](https://marketingplatform.google.com/about/analytics/)，设置 `services.googleAnalytics.ID`:
+
+```yaml {filename="hugo.yaml"}
+services:
+  googleAnalytics:
+    ID: G-MEASUREMENT_ID
+```
--- a/exampleSite/content/docs/guide/deploy-site.md
+++ b/exampleSite/content/docs/guide/deploy-site.md
@ -0,0 +1,161 @@
+---
+title: Deploy Site
+prev: /docs/guide/shortcodes
+next: /docs/advanced
+---
+
+Hugo generates static websites, allowing for flexible hosting options.
+This page provides guides for deploying your Hextra site on various platforms.
+
+<!--more-->
+
+
+## GitHub Pages
+
+[GitHub Pages](https://docs.github.com/pages) is the recommended way to deploy and host your website for free.
+
+If you bootstrap the site using [hextra-starter-template](https://github.com/imfing/hextra-starter-template), it has provided GitHub Actions workflow out-of-the-box that helps automatically deploy to GitHub Pages.
+
+{{% details title="GitHub Actions Configuration" closed="true" %}}
+
+Below is an example configuration from [hextra-starter-template](https://github.com/imfing/hextra-starter-template):
+
+```yaml {filename=".github/workflows/pages.yaml"}
+# Sample workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.117.0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+      - name: Setup Go
+        uses: actions/setup-go@v4
+        with:
+          go-version: '1.21'
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: '0.117.0'
+          extended: true
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc --minify \
+            --baseURL "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
+```
+
+{{% /details %}}
+
+
+{{< callout >}}
+  In your repository settings, set the **Pages** > **Build and deployment** > **Source** to **GitHub Actions**:
+  ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
+{{< /callout >}}
+
+By default, the above GitHub Actions workflow `.github/workflows/pages.yaml` assumes that the site is deploying to `https://<USERNAME>.github.io/<REPO>/`.
+
+If you are deploying to `https://<USERNAME>.github.io/` then modify the `--baseURL`:
+
+```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
+run: |
+  hugo \
+    --gc --minify \
+    --baseURL "https://${{ github.repository_owner }}.github.io/"
+```
+
+If you are deploying to your own domain, please change the `--baseURL` value accordingly.
+
+
+## Cloudflare Pages
+
+1. Put your site source code in a Git repository (e.g. GitHub)
+2. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account
+3. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**
+4. Select the repository, and in the **Set up builds and deployments** section, provide the following information:
+
+| Configuration     | Value                |
+| ----------------- | -------------------- |
+| Production branch | `main`               |
+| Build command     | `hugo --gc --minify` |
+| Build directory   | `public`             |
+
+For more details, check out:
+- [Deploy a Hugo site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages).
+- [Language support and tools](https://developers.cloudflare.com/pages/platform/language-support-and-tools/).
+
+
+## Netlify
+
+1. Push your code to your Git repository (GitHub, GitLab, etc.)
+2. [Import the project](https://app.netlify.com/start) to Netlify
+3. If you are not using [hextra-starter-template][hextra-starter-template], configure the following manually:
+   - Configure the Build command to `hugo --gc --minify`
+   - Specify the Publish directory to `public`
+   - Add Environment variable `HUGO_VERSION` and set to `0.119.0`
+4. Deploy!
+
+Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details.
+
+
+## Vercel
+
+1. Push your code to your Git repository (GitHub, GitLab, etc.)
+2. Go to [Vercel Dashboard](https://vercel.com/dashboard) and import your Hugo project
+3. Configure the project, select Hugo as Framework Preset
+4. Override the Build Command and Install command:
+   1. Set Build Command to `hugo --gc --minify`
+   2. Set Install Command to `yum install golang`
+
+![Vercel Deployment Configuration](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)
--- a/exampleSite/content/docs/guide/diagrams.md
+++ b/exampleSite/content/docs/guide/diagrams.md
@ -0,0 +1,53 @@
+---
+title: Diagrams
+weight: 6
+next: /docs/guide/shortcodes
+---
+
+Currently, Hextra supports [Mermaid](#mermaid) for diagrams.
+
+<!--more-->
+
+## Mermaid
+
+[Mermaid](https://github.com/mermaid-js/mermaid#readme) is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser. For example, Mermaid can render flow charts, sequence diagrams, pie charts and more.
+
+Using Mermaid in Hextra is as simple as writing a code block with language set `mermaid`:
+
+````markdown
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````
+
+will be rendered as:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+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!
+```
+
+For more information, please refer to [Mermaid Documentation](https://mermaid-js.github.io/mermaid/#/).
--- a/exampleSite/content/docs/guide/diagrams.zh-cn.md
+++ b/exampleSite/content/docs/guide/diagrams.zh-cn.md
@ -0,0 +1,53 @@
+---
+title: 图表
+weight: 6
+next: /docs/guide/shortcodes
+---
+
+目前，Hextra 支持 [Mermaid](#mermaid) 的图表。
+
+<!--more-->
+
+## Mermaid
+
+[Mermaid](https://github.com/mermaid-js/mermaid#readme) 是一个基于 JavaScript 的图表绘制工具，它的文本定义和 Markdown 类似，可在浏览器中动态创建图表。例如：流程图、序列图、饼图等。
+
+在 Hextra 中使用 Mermaid 就像使用代码块一样简单：
+
+````markdown
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````
+
+将呈现为：
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+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!
+```
+
+如需获取更多信息，转至 [Mermaid Documentation](https://mermaid-js.github.io/mermaid/#/)。
--- a/exampleSite/content/docs/guide/latex.md
+++ b/exampleSite/content/docs/guide/latex.md
@ -0,0 +1,60 @@
+---
+title: "LaTeX"
+weight: 4
+math: true
+---
+
+$\KaTeX$ is used for rendering LaTeX math expressions. It can be enabled per page by setting `math` to `true` in the page front matter.
+
+<!--more-->
+
+```yaml {filename="Markdown"}
+---
+title: "My Page with LaTeX"
+math: true
+---
+
+```
+
+When enabled, the scripts, stylesheets and fonts from KaTeX will be included automatically in your site. You can start using LaTeX math expressions in your Markdown content.
+
+## Example
+
+Both inline and separate paragraph LaTeX math expressions are supported in the Markdown content.
+
+### Inline
+
+```markdown {filename="page.md"}
+This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
+```
+
+This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
+
+### Separate Paragraph
+
+```markdown {filename="page.md"}
+$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
+```
+
+will be rendered as:
+
+$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
+
+
+## Supported Functions
+
+For a list of supported functions, see [KaTeX supported functions](https://katex.org/docs/supported.html).
+
+## Chemistry
+
+Chemistry expressions are supported via [mhchem](https://mhchem.github.io/MathJax-mhchem/) extension.
+
+Inline: $\ce{H2O}$ is water.
+
+Separate paragraph:
+
+```markdown {filename="page.md"}
+$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
+```
+
+$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
--- a/exampleSite/content/docs/guide/latex.zh-cn.md
+++ b/exampleSite/content/docs/guide/latex.zh-cn.md
@ -0,0 +1,59 @@
+---
+title: "LaTeX 公式"
+weight: 4
+math: true
+---
+
+$\KaTeX$ 用于呈现 LaTeX 数学表达式。可在 `frontmatter` 将 `math` 设置为 `true` 来启用。
+
+<!--more-->
+
+```yaml {filename="Markdown"}
+---
+title: "My Page with LaTeX"
+math: true
+---
+```
+
+启用后，KaTeX 中的脚本，样式表和字体将自动包含在你的网站中。这样就可以在 Markdown 内容中使用 LaTeX 数学表达式。
+
+## 示例
+
+Markdown 内容支持行内和独立段落的 LaTeX 数学表达式。
+
+### 行内
+
+```markdown {filename="page.md"}
+This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
+```
+
+This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
+
+### 独立段落
+
+```markdown {filename="page.md"}
+$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
+```
+
+将被渲染为：
+
+$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
+
+
+## 支持的功能
+
+有关支持的符号列表，转至 [KaTeX 支持的公式](https://katex.org/docs/supported.html)。
+
+## 化学表达式
+
+通过 [mhchem](https://mhchem.github.io/MathJax-mhchem/) 支持化学表达式。
+
+行内：$\ce{H2O}$ 是水。
+
+独立段落：
+
+```markdown {filename="page.md"}
+$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
+```
+
+$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
--- a/exampleSite/content/docs/guide/markdown.md
+++ b/exampleSite/content/docs/guide/markdown.md
@ -0,0 +1,106 @@
+---
+title: Markdown
+weight: 2
+---
+
+Hugo supports [Markdown](https://en.wikipedia.org/wiki/Markdown) syntax for formatting text, creating lists, and more. This page will show you some of the most common Markdown syntax examples.
+
+<!--more-->
+
+## Markdown Examples
+
+### Styling Text
+
+| Style   | Syntax     | Example   | Output   |
+| --------  | -------- | ------ | ------ |
+| Bold | `**bold text**` | `**bold text**` | **bold text** |
+| Italic | `*italicized text*` | `*italicized text* | *italicized text* |
+| Strikethrough | `~~strikethrough text~~` | `~~strikethrough text~~` | ~~strikethrough text~~ |
+| Subscript | `<sub></sub>` | `This is a <sub>subscript</sub> text` | This is a <sub>subscript</sub> text |
+| Superscript | `<sup></sup>` | `This is a <sup>superscript</sup> text` | This is a <sup>superscript</sup> text |
+
+### Blockquotes
+
+Blockquote with attribution
+
+> Don't communicate by sharing memory, share memory by communicating.<br>
+> — <cite>Rob Pike[^1]</cite>
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+
+### Tables
+
+Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.
+
+   Name | Age
+--------|------
+    Bob | 27
+  Alice | 23
+
+#### Inline Markdown within tables
+
+| Italics   | Bold     | Code   |
+| --------  | -------- | ------ |
+| *italics* | **bold** | `code` |
+
+### Code Blocks
+
+{{< cards >}}
+  {{< card link="../../guide/syntax-highlighting" title="Syntax Highlighting" icon="sparkles" >}}
+{{< /cards >}}
+
+### Lists
+
+#### Ordered List
+
+1. First item
+2. Second item
+3. Third item
+
+#### Unordered List
+
+* List item
+* Another item
+* And another item
+
+#### Nested list
+
+* Fruit
+  * Apple
+  * Orange
+  * Banana
+* Dairy
+  * Milk
+  * Cheese
+
+### Images
+
+![](https://source.unsplash.com/featured/800x600?landscape)
+
+With caption:
+
+![](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+
+## Configuration
+
+Hugo uses [Goldmark](https://github.com/yuin/goldmark) for Markdown parsing.
+Markdown rendering can be configured in `hugo.yaml` under `markup.goldmark`.
+Below is the default configuration for Hextra:
+
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  highlight:
+    noClasses: false
+```
+
+For more configuration options, see Hugo documentation on [Configure Markup](https://gohugo.io/getting-started/configuration-markup/).
+
+## Learning Resources
+
+* [Markdown Guide](https://www.markdownguide.org/)
+* [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+* [Markdown Tutorial](https://www.markdowntutorial.com/)
+* [Markdown Reference](https://commonmark.org/help/)
--- a/exampleSite/content/docs/guide/markdown.zh-cn.md
+++ b/exampleSite/content/docs/guide/markdown.zh-cn.md
@ -0,0 +1,105 @@
+---
+title: Markdown
+weight: 2
+---
+
+Hugo 支持 [Markdown](https://en.wikipedia.org/wiki/Markdown) 来书写内容，创建列表等。本页将向你展示一些最常见的 Markdown 语法示例。
+
+<!--more-->
+
+## Markdown 示例
+
+### 文本样式
+
+| Style   | Syntax     | Example   | Output   |
+| --------  | -------- | ------ | ------ |
+| Bold | `**bold text**` | `**bold text**` | **bold text** |
+| Italic | `*italicized text*` | `*italicized text* | *italicized text* |
+| Strikethrough | `~~strikethrough text~~` | `~~strikethrough text~~` | ~~strikethrough text~~ |
+| Subscript | `<sub></sub>` | `This is a <sub>subscript</sub> text` | This is a <sub>subscript</sub> text |
+| Superscript | `<sup></sup>` | `This is a <sup>superscript</sup> text` | This is a <sup>superscript</sup> text |
+
+### 引用
+
+带角标的块引用：
+
+> Don't communicate by sharing memory, share memory by communicating.<br>
+> — <cite>Rob Pike[^1]</cite>
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+
+### 表格
+
+表格并非核心 Markdown 规范，但 Hugo 支持开箱即用的表格：
+
+   Name | Age
+--------|------
+    Bob | 27
+  Alice | 23
+
+#### Markdown 表格中的内联
+
+| Italics   | Bold     | Code   |
+| --------  | -------- | ------ |
+| *italics* | **bold** | `code` |
+
+### 代码块
+
+{{< cards >}}
+  {{< card link="../../guide/syntax-highlighting" title="Syntax Highlighting" icon="sparkles" >}}
+{{< /cards >}}
+
+### 列表
+
+#### 有序列表
+
+1. First item
+2. Second item
+3. Third item
+
+#### 无序列表
+
+* List item
+* Another item
+* And another item
+
+#### 嵌套列表
+
+* Fruit
+  * Apple
+  * Orange
+  * Banana
+* Dairy
+  * Milk
+  * Cheese
+
+### 图片
+
+![](https://source.unsplash.com/featured/800x600?landscape)
+
+带有标题：
+
+![](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+
+## 配置
+
+Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 解析 Markdown。
+Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 中配置。以下是Hextra的默认配置：
+
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  highlight:
+    noClasses: false
+```
+
+如需了解更多选项，转至 [Configure Markup](https://gohugo.io/getting-started/configuration-markup/)。
+
+## 参考资料
+
+* [Markdown Guide](https://www.markdownguide.org/)
+* [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+* [Markdown Tutorial](https://www.markdowntutorial.com/)
+* [Markdown Reference](https://commonmark.org/help/)
--- a/exampleSite/content/docs/guide/organize-files.md
+++ b/exampleSite/content/docs/guide/organize-files.md
@ -0,0 +1,148 @@
+---
+title: Organize Files
+weight: 1
+prev: /docs/guide
+---
+
+## Directory Structure
+
+By default, Hugo searches for Markdown files in the `content` directory, and the structure of the directory determines the final output structure of your website.
+Take this site as an example:
+
+<!--more-->
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="getting-started.md" >}}
+      {{< filetree/folder name="guide" state="open" >}}
+        {{< filetree/file name="_index.md" >}}
+        {{< filetree/file name="organize-files.md" >}}
+      {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+    {{< filetree/folder name="blog" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="post-1.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+Each of the `_index.md` files is the index page for the corresponding section. The other Markdown files are regular pages.
+
+```
+content
+├── _index.md // <- /
+├── docs
+│   ├── _index.md // <- /docs/
+│   ├── getting-started.md // <- /docs/getting-started/
+│   └── guide
+│       ├── _index.md // <- /docs/guide/
+│       └── organize-files.md // <- /docs/guide/organize-files/
+└── blog
+    ├── _index.md // <- /blog/
+    └── post-1.md // <- /blog/post-1/
+```
+
+## Layouts
+
+Hextra offers three layouts for different content types:
+
+| Layout    | Directory             | Features                                                         |
+| :-------- | :-------------------- | :--------------------------------------------------------------- |
+| `docs`    | `content/docs/`       | Ideal for structured documentation, same as this section.        |
+| `blog`    | `content/blog/`       | For blog postings, with both listing and detailed article views. |
+| `default` | All other directories | Single-page article view without sidebar.                        |
+
+To customize a section to mirror the behavior of a built-in layout, specify the desired type in the front matter of the section's `_index.md`.
+
+```yaml {filename="content/my-docs/_index.md"}
+---
+title: My Docs
+cascade:
+  type: docs
+---
+```
+
+The above example configuration ensures that the content files inside `content/my-docs/` will be treated as documentation (`docs` type) by default.
+
+## Sidebar Navigation
+
+The sidebar navigation is generated automatically based on the content organization alphabetically. To manually configure the sidebar order, we can use the `weight` parameter in the front matter of the Markdown files.
+
+```yaml {filename="content/docs/guide/_index.md"}
+---
+title: Guide
+weight: 2
+---
+```
+
+{{< callout emoji="ℹ️">}}
+  It is recommended to keep the sidebar not too deep. If you have a lot of content, consider **splitting them into multiple sections**.
+{{< /callout >}}
+
+## Configure Content Directory
+
+By default, the root `content/` directory is used by Hugo to build the site.
+If you need to use a different directory for content, for example `docs/`, this can be done by setting the [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) parameter in the site configuration `hugo.yaml`.
+
+## Add Images
+
+To add images, the easiest way is to put the image files in the same directory as the Markdown file.
+For example, add an image file `image.png` alongside the `my-page.md` file:
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+        {{< filetree/file name="image.png" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+Then, we can use the following Markdown syntax to add the image to the content:
+
+```markdown {filename="content/docs/my-page.md"}
+![](image.png)
+```
+
+We can also utilize the [page bundles][page-bundles] feature of Hugo to organize the image files together with the Markdown file. To achieve that, turn the `my-page.md` file into a directory `my-page` and put the content into a file named `index.md`, and put the image files inside the `my-page` directory:
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/folder name="my-page" >}}
+            {{< filetree/file name="index.md" >}}
+            {{< filetree/file name="image.png" >}}
+        {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+```markdown {filename="content/docs/my-page/index.md"}
+![](image.png)
+```
+
+Alternatively, we can also put the image files in the `static` directory, which will make the images available for all pages:
+
+{{< filetree/container >}}
+  {{< filetree/folder name="static" >}}
+    {{< filetree/folder name="images" >}}
+        {{< filetree/file name="image.png" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+Note that the image path begins with a slash `/` and is relative to the static directory:
+
+```markdown {filename="content/docs/my-page.md"}
+![](/images/image.png)
+```
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
--- a/exampleSite/content/docs/guide/organize-files.zh-cn.md
+++ b/exampleSite/content/docs/guide/organize-files.zh-cn.md
@ -0,0 +1,65 @@
+---
+title: 目录结构
+weight: 1
+prev: /docs/guide
+---
+
+## 目录结构
+
+默认情况下，Hugo 在 `context` 目录中搜索 Markdown 文件，目录的结构决定了网站的最终输出结构。
+以示例网站为例：
+
+<!--more-->
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="getting-started.md" >}}
+      {{< filetree/folder name="guide" state="open" >}}
+        {{< filetree/file name="_index.md" >}}
+        {{< filetree/file name="organize-files.md" >}}
+      {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+    {{< filetree/folder name="blog" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="post-1.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+每个 `_index.md` 文件都是相应部分的索引页，其他 Markdown 文件则是常规页面。
+
+```
+content
+├── _index.md // <- /
+├── docs
+│   ├── _index.md // <- /docs/
+│   ├── getting-started.md // <- /docs/getting-started/
+│   └── guide
+│       ├── _index.md // <- /docs/guide/
+│       └── organize-files.md // <- /docs/guide/organize-files/
+└── blog
+    ├── _index.md // <- /blog/
+    └── post-1.md // <- /blog/post-1/
+```
+
+## 侧边栏导航
+
+侧边栏导航是根据内容组织的字母顺序自动生成的。要手动配置侧边栏顺序，可以在 Markdown 文件的 `frontmatter ` 中使用 `weight` 配置。
+
+```yaml {filename="content/docs/guide/_index.md"}
+---
+title: Guide
+weight: 2
+---
+```
+
+{{< callout emoji="ℹ️">}}
+  建议侧边栏不要太深。如果内容太多，请考虑 **将它们分成多个部分**。
+{{< /callout >}}
+
+## 配置内容目录
+
+如果需要为的内容使用不同的目录，可以在站点配置文件中设置 [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) 来实现。
--- a/exampleSite/content/docs/guide/shortcodes/_index.md
+++ b/exampleSite/content/docs/guide/shortcodes/_index.md
@ -0,0 +1,21 @@
+---
+title: Shortcodes
+weight: 9
+prev: /docs/guide/diagrams
+next: /docs/guide/shortcodes/callout
+---
+
+[Hugo Shortcodes](https://gohugo.io/content-management/shortcodes/) are simple snippets inside your content files calling built-in or custom templates.
+
+Hextra provides a collection of beautiful shortcodes to enhance your content.
+
+
+{{< cards >}}
+  {{< card link="callout" title="Callout" icon="warning" >}}
+  {{< card link="cards" title="Cards" icon="card" >}}
+  {{< card link="details" title="Details" icon="chevron-right" >}}
+  {{< card link="filetree" title="FileTree" icon="folder-tree" >}}
+  {{< card link="icon" title="Icon" icon="badge-check" >}}
+  {{< card link="steps" title="Steps" icon="one" >}}
+  {{< card link="tabs" title="Tabs" icon="collection" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/guide/shortcodes/_index.zh-cn.md
+++ b/exampleSite/content/docs/guide/shortcodes/_index.zh-cn.md
@ -0,0 +1,19 @@
+---
+title: 短代码
+weight: 9
+prev: /docs/guide/diagrams
+next: /docs/guide/shortcodes/callout
+---
+
+[Hugo 短代码](https://gohugo.io/content-management/shortcodes/) 是你的内容文件中调用内置或自定义模板的简单片段。
+
+Hextra 提供了一系列美观的短代码以增强你的内容。
+
+{{< cards >}}
+  {{< card link="callout" title="注意事项" icon="warning" >}}
+  {{< card link="cards" title="卡片" icon="card" >}}
+  {{< card link="filetree" title="文件树" icon="folder-tree" >}}
+  {{< card link="icon" title="图标" icon="badge-check" >}}
+  {{< card link="steps" title="步骤" icon="one" >}}
+  {{< card link="tabs" title="标签" icon="collection" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/guide/shortcodes/callout.md
+++ b/exampleSite/content/docs/guide/shortcodes/callout.md
@ -0,0 +1,79 @@
+---
+title: Callout Component
+linkTitle: Callout
+aliases:
+- callouts
+prev: /docs/guide/shortcodes
+---
+
+A built-in component to show important information to the reader.
+
+<!--more-->
+
+## Example
+
+{{< callout emoji="👾">}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+## Usage
+
+### Default
+
+{{< callout emoji="🌐">}}
+  Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
+{{</* /callout */>}}
+```
+
+### Info
+
+{{< callout type="info" >}}
+  Please visit GitHub to see the latest releases.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" */>}}
+  Please visit GitHub to see the latest releases.
+{{</* /callout */>}}
+```
+
+### Warning
+
+{{< callout type="warning" >}}
+  This API will be deprecated in the next version.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="warning" */>}}
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
+### Error
+
+{{< callout type="error" >}}
+  Something went wrong and it's going to explode.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="error" */>}}
+  Something went wrong and it's going to explode.
+{{</* /callout */>}}
+```
--- a/exampleSite/content/docs/guide/shortcodes/cards.md
+++ b/exampleSite/content/docs/guide/shortcodes/cards.md
@ -0,0 +1,64 @@
+---
+title: Cards Component
+linkTitle: Cards
+---
+
+## Example
+
+{{< cards >}}
+  {{< card link="../callout" title="Callout" icon="warning" >}}
+  {{< card link="/" title="No Icon" >}}
+{{< /cards >}}
+
+{{< cards >}}
+  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
+  {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
+  {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
+{{< /cards >}}
+
+## Usage
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="Callout" icon="warning" */>}}
+  {{</* card link="/" title="No Icon" */>}}
+{{</* /cards */>}}
+```
+
+```
+{{</* cards */>}}
+  {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
+  {{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
+  {{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
+{{</* /cards */>}}
+```
+
+## Card Parameters
+
+| Parameter  | Description                           |
+|----------- |---------------------------------------|
+| `link`     | URL (internal or external).           |
+| `title`    | Title heading for the card.           |
+| `subtitle` | Subtitle heading (supports Markdown). |
+| `icon`     | Name of the icon.                     |
+
+## Image Card
+
+Additionally, the card supports adding image and processing through these parameters:
+
+| Parameter  | Description                                 |
+|----------- |---------------------------------------------|
+| `image`    | Specifies the image URL for the card.       |
+| `method`   | Sets Hugo's image processing method.        |
+| `options`  | Configures Hugo's image processing options. |
+
+Card supports three kinds of images:
+
+1. Remote image: the full URL in the `image` parameter.
+2. Static image: use the relative path in Hugo's `static/` directory.
+3. Processed image: use the relative path in Hugo's `assets/` directory.
+
+Hextra auto-detects if image processing is needed during build and applies the `options` parameter or default settings (Resize, 800x, Quality 80, WebP Format).
+It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`.
+
+For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
--- a/exampleSite/content/docs/guide/shortcodes/details.md
+++ b/exampleSite/content/docs/guide/shortcodes/details.md
@ -0,0 +1,43 @@
+---
+title: Details
+---
+
+A built-in component to display a collapsible content.
+
+<!--more-->
+
+## Example
+
+{{% details title="Details" %}}
+
+This is the content of the details.
+
+Markdown is **supported**.
+
+{{% /details %}}
+
+{{% details title="Click me to reveal" closed="true" %}}
+
+This will be hidden by default.
+
+{{% /details %}}
+
+## Usage
+
+````markdown
+{{%/* details title="Details" */%}}
+
+This is the content of the details.
+
+Markdown is **supported**.
+
+{{%/* /details */%}}
+````
+
+````markdown
+{{%/* details title="Click me to reveal" closed="true" */%}}
+
+This will be hidden by default.
+
+{{%/* /details */%}}
+````
--- a/exampleSite/content/docs/guide/shortcodes/filetree.md
+++ b/exampleSite/content/docs/guide/shortcodes/filetree.md
@ -0,0 +1,34 @@
+---
+title: FileTree Component
+linkTitle: FileTree
+---
+
+## Example
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="closed" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="introduction.md" >}}
+      {{< filetree/file name="introduction.fr.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+  {{< filetree/file name="hugo.toml" >}}
+{{< /filetree/container >}}
+
+## Usage
+
+```text {filename="Markdown"}
+{{</* filetree/container */>}}
+  {{</* filetree/folder name="content" */>}}
+    {{</* filetree/file name="_index.md" */>}}
+    {{</* filetree/folder name="docs" state="closed" */>}}
+      {{</* filetree/file name="_index.md" */>}}
+      {{</* filetree/file name="introduction.md" */>}}
+      {{</* filetree/file name="introduction.fr.md" */>}}
+    {{</* /filetree/folder */>}}
+  {{</* /filetree/folder */>}}
+  {{</* filetree/file name="hugo.toml" */>}}
+{{</* /filetree/container */>}}
+```
--- a/exampleSite/content/docs/guide/shortcodes/icon.md
+++ b/exampleSite/content/docs/guide/shortcodes/icon.md
@ -0,0 +1,46 @@
+---
+title: Icon
+---
+
+To use this shortcode inline, inline shortcode needs to be enabled in the config:
+
+```yaml {filename="hugo.yaml"}
+enableInlineShortcodes: true
+```
+
+List of available icons can be found in [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml).
+
+<!--more-->
+
+## Example
+
+{{< icon "academic-cap" >}}
+{{< icon "cake" >}}
+{{< icon "gift" >}}
+{{< icon "sparkles" >}}
+
+## Usage
+
+```
+{{</* icon "github" */>}}
+```
+
+[Heroicons](https://v1.heroicons.com/) v1 outline icons are available out of the box.
+
+### How to add your own icons
+
+Create `data/icons.yaml` file, then add your own SVG icons in the following format:
+
+```yaml {filename="data/icons.yaml"}
+your-icon: <svg>your icon svg content</svg>
+```
+
+It then can be used in the shortcode like this:
+
+```
+{{</* icon "your-icon" */>}}
+
+{{</* card icon="your-icon" */>}}
+```
+
+Tip: [Iconify Design](https://iconify.design/) is a great place to find SVG icons for your site.
--- a/exampleSite/content/docs/guide/shortcodes/steps.md
+++ b/exampleSite/content/docs/guide/shortcodes/steps.md
@ -0,0 +1,42 @@
+---
+title: Steps
+---
+
+A built-in component to display a series of steps.
+
+## Example
+
+{{% steps %}}
+
+### Step 1
+
+This is the first step.
+
+### Step 2
+
+This is the second step.
+
+### Step 3
+
+This is the third step.
+
+{{% /steps %}}
+
+
+## Usage
+
+Put Markdown h3 header within `steps` shortcode.
+
+```
+{{%/* steps */%}}
+
+### Step 1
+
+This is the first step.
+
+### Step 2
+
+This is the second step.
+
+{{%/* /steps */%}}
+```
--- a/exampleSite/content/docs/guide/shortcodes/tabs.md
+++ b/exampleSite/content/docs/guide/shortcodes/tabs.md
@ -0,0 +1,93 @@
+---
+title: Tabs
+next: /docs/guide/deploy-site
+---
+
+## Example
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
+{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
+{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
+
+{{< /tabs >}}
+
+## Usage
+
+### Default
+
+```
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+### Specify Selected Index
+
+Use `defaultIndex` property to specify the selected tab. The index starts from 0.
+
+```
+{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+The `YAML` tab will be selected by default.
+
+{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
+
+{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
+{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
+{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
+
+{{< /tabs >}}
+
+
+### Use Markdown
+
+Markdown syntax including code block is also supported:
+
+````
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}
+  ```json
+  { "hello": "world" }
+  ```
+  {{</* /tab */>}}
+
+  ... add other tabs similarly
+
+{{</* /tabs */>}}
+````
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+  {{< tab >}}
+  ```json
+  { "hello": "world" }
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```yaml
+  hello: world
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```toml
+  hello = "world"
+  ```
+  {{< /tab >}}
+
+{{< /tabs >}}
--- a/exampleSite/content/docs/guide/syntax-highlighting.md
+++ b/exampleSite/content/docs/guide/syntax-highlighting.md
@ -0,0 +1,89 @@
+---
+title: "Syntax Highlighting"
+weight: 3
+---
+
+Hugo uses [Chroma](https://github.com/alecthomas/chroma), a general purpose syntax highlighter in pure Go, for syntax highlighting.
+It is recommended to use backticks for code blocks in Markdown content. For example:
+
+<!--more-->
+
+````markdown {filename="Markdown"}
+```python
+def say_hello():
+    print("Hello!")
+```
+````
+
+will be rendered as:
+
+```python
+def say_hello():
+    print("Hello!")
+```
+
+## Features
+
+### Filename
+
+To add a filename or title to the code block, set attribute `filename`:
+
+````markdown {filename="Markdown"}
+```python {filename="hello.py"}
+def say_hello():
+    print("Hello!")
+```
+````
+
+```python {filename="hello.py"}
+def say_hello():
+    print("Hello!")
+```
+
+### Line Numbers
+
+To set line numbers, set attribute `linenos` to `table` and optionally set `linenostart` to the starting line number:
+
+````markdown {filename="Markdown"}
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("Hello!")
+```
+````
+
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("Hello!")
+```
+
+### Highlighting Lines
+
+To highlight lines, set attribute `hl_lines` to a list of line numbers:
+
+````markdown {filename="Markdown"}
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("Hello!")
+
+def main():
+    say_hello()
+```
+````
+
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("Hello!")
+
+def main():
+    say_hello()
+```
+
+
+### Copy Button
+
+By default, copy button is enabled for code blocks.
+
+
+## Supported Languages
+
+For a list of supported languages, please see the [Chroma documentation](https://github.com/alecthomas/chroma#supported-languages).
--- a/exampleSite/content/docs/guide/syntax-highlighting.zh-cn.md
+++ b/exampleSite/content/docs/guide/syntax-highlighting.zh-cn.md
@ -0,0 +1,89 @@
+---
+title: "代码高亮"
+weight: 3
+---
+
+Hugo 使用 [Chroma](https://github.com/alecthomas/chroma)，一种纯 Golang 实现的代码高亮渲染器。
+建议对 Markdown 内容中的代码块使用反引号，例如：
+
+<!--more-->
+
+````markdown {filename="Markdown"}
+```python
+def say_hello():
+    print("Hello!")
+```
+````
+
+将呈现为：
+
+```python
+def say_hello():
+    print("Hello!")
+```
+
+## 特性
+
+### 文件名
+
+要向代码块添加文件名或标题，请设置 `filename`：
+
+````markdown {filename="Markdown"}
+```python {filename="hello.py"}
+def say_hello():
+    print("Hello!")
+```
+````
+
+```python {filename="hello.py"}
+def say_hello():
+    print("Hello!")
+```
+
+### 行号
+
+如需设置行号，将 `linenos` 设置为 `table`，并将 `linenostart` 设置为起始行号：
+
+````markdown {filename="Markdown"}
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("Hello!")
+```
+````
+
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("Hello!")
+```
+
+### 高亮行
+
+显示高亮行，设置 `hl_lines` 为行号：
+
+````markdown {filename="Markdown"}
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("Hello!")
+
+def main():
+    say_hello()
+```
+````
+
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("Hello!")
+
+def main():
+    say_hello()
+```
+
+
+### 复制按钮
+
+默认情况下，代码块复制按钮已自动启用。
+
+
+## 支持的编程语言
+
+如需了解支持的编程语言，转至 [Chroma's documentation](https://github.com/alecthomas/chroma#supported-languages)。
--- a/exampleSite/content/showcase/index.md
+++ b/exampleSite/content/showcase/index.md
@ -0,0 +1,20 @@
+---
+title: Showcase
+description: "Open source projects powered by Hextra."
+toc: false
+layout: wide
+---
+
+<div class="mt-4"></div>
+
+<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
+Open source projects powered by Hextra.
+</p>
+
+{{< cards >}}
+  {{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://github.com/imfing/hextra-starter-template/" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://developers.clever-cloud.com/" title="Clever Cloud Documentation" image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< /cards >}}
--- a/exampleSite/content/showcase/index.zh-cn.md
+++ b/exampleSite/content/showcase/index.zh-cn.md
@ -0,0 +1,19 @@
+---
+title: 项目展示
+description: "由 Hextra 驱动的开源网站和项目。"
+toc: false
+layout: wide
+---
+
+<div class="mt-4"></div>
+
+<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
+由 Hextra 驱动的开源网站和项目。
+</p>
+
+{{< cards >}}
+  {{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://github.com/imfing/hextra-starter-template" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< /cards >}}
--- a/exampleSite/go.mod
+++ b/exampleSite/go.mod
@ -0,0 +1,5 @@
+module github.com/imfing/hextra/exampleSite
+
+go 1.20
+
+replace github.com/imfing/hextra => ../
--- a/exampleSite/hugo.work
+++ b/exampleSite/hugo.work
@ -0,0 +1,3 @@
+go 1.20
+
+use ../
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@ -1,11 +1,11 @@
-languageCode: zh-cn
-title: 代码片段
-defaultContentLanguage: zh-cn
+# Configuration
+baseURL: "https://example.com/"
+title: "Hextra"
+
 enableRobotsTXT: true
 enableGitInfo: true
-enableEmoji: true
+# enableEmoji: false
 hasCJKLanguage: true
-enableInlineShortcodes: true

 # services:
 #   googleAnalytics:
@ -16,11 +16,16 @@ outputs:
  page: [HTML]
  section: [HTML, RSS]

+defaultContentLanguage: en
 languages:
+  en:
+    languageName: English
+    weight: 1
+    title: Hextra
  zh-cn:
    languageName: 简体中文
    languageCode: zh-CN
-    weight: 4
+    weight: 2
    title: Hextra

 module:
@ -28,31 +33,62 @@ module:
    extended: true
    min: "0.112.0"

+  workspace: hugo.work
+  imports:
+    path: github.com/imfing/hextra
+
 markup:
-  highlight:
-    noClasses: false
  goldmark:
    renderer:
      unsafe: true
-    extensions:
-      passthrough:
-        delimiters:
-          block: [['\[', '\]'], ['$$', '$$']]
-          inline: [['\(', '\)']]
-        enable: true
+  highlight:
+    noClasses: false
+
+enableInlineShortcodes: true

 menu:
  main:
-    - name: Search
+    - identifier: documentation
+      name: Documentation
+      pageRef: /docs
      weight: 1
+    - identifier: showcase
+      name: Showcase
+      pageRef: /showcase
+      weight: 2
+    - identifier: blog
+      name: Blog
+      pageRef: /blog
+      weight: 3
+    - identifier: about
+      name: About
+      pageRef: /about
+      weight: 4
+    - name: Search
+      weight: 5
      params:
        type: search
    - name: GitHub
-      weight: 2
-      url: "https://github.com/imfing/hextra-starter-template"
+      weight: 6
+      url: "https://github.com/imfing/hextra"
      params:
        icon: github

+  sidebar:
+    - identifier: more
+      name: More
+      params:
+        type: separator
+      weight: 1
+    - identifier: about
+      name: "About"
+      pageRef: "/about"
+      weight: 2
+    - identifier: hugoDocs
+      name: "Hugo Docs ↗"
+      url: "https://gohugo.io/documentation/"
+      weight: 3
+
 params:
  description: Modern, responsive, batteries-included Hugo theme for creating beautiful static websites.

@ -94,22 +130,28 @@ params:
    flexsearch:
      # index page by: content | summary | heading | title
      index: content
-      # full | forward | reverse | strict
-      # https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search
-      tokenize: forward

  editURL:
-    enable: false
+    enable: true
+    base: "https://github.com/imfing/hextra/edit/main/exampleSite/content"

  blog:
    list:
      displayTags: true
-      # date | lastmod | publishDate | title | weight
-      sortBy: date
-      sortOrder: desc # or "asc"

-  highlight:
-    copy:
-      enable: true
-      # hover | always
-      display: hover
+  comments:
+    enable: false
+    type: giscus
+
+    # https://giscus.app/
+    giscus:
+      repo: imfing/hextra
+      repoId: R_kgDOJ9fJag
+      category: General
+      categoryId: DIC_kwDOJ9fJas4CY7gW
+      # mapping: pathname
+      # strict: 0
+      # reactionsEnabled: 1
+      # emitMetadata: 0
+      # inputPosition: top
+      # lang: en
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@ -0,0 +1,605 @@
+{
+  "htmlElements": {
+    "tags": [
+      "a",
+      "article",
+      "aside",
+      "blockquote",
+      "body",
+      "br",
+      "button",
+      "cite",
+      "code",
+      "del",
+      "details",
+      "div",
+      "em",
+      "figcaption",
+      "figure",
+      "footer",
+      "g",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "head",
+      "hr",
+      "html",
+      "img",
+      "input",
+      "kbd",
+      "li",
+      "link",
+      "main",
+      "meta",
+      "nav",
+      "ol",
+      "p",
+      "path",
+      "pre",
+      "script",
+      "span",
+      "strong",
+      "style",
+      "sub",
+      "summary",
+      "sup",
+      "svg",
+      "table",
+      "tbody",
+      "td",
+      "th",
+      "thead",
+      "time",
+      "title",
+      "tr",
+      "ul"
+    ],
+    "classes": [
+      "-mb-0.5",
+      "-ml-2",
+      "-mr-2",
+      "-mt-20",
+      "[-webkit-tap-highlight-color:transparent]",
+      "[-webkit-touch-callout:none]",
+      "[counter-reset:step]",
+      "[hyphens:auto]",
+      "[transition:background-color_1.5s_ease]",
+      "[word-break:break-word]",
+      "absolute",
+      "active:bg-gray-400/20",
+      "active:opacity-50",
+      "active:shadow-gray-200",
+      "active:shadow-sm",
+      "align-[-2.5px]",
+      "align-text-bottom",
+      "appearance-none",
+      "aspect-auto",
+      "before:absolute",
+      "before:bg-glass-gradient",
+      "before:bg-gray-200",
+      "before:content-[\"\"]",
+      "before:content-['#']",
+      "before:content-['']",
+      "before:inline-block",
+      "before:inset-0",
+      "before:inset-y-1",
+      "before:mr-1",
+      "before:opacity-25",
+      "before:pointer-events-none",
+      "before:transition-transform",
+      "before:w-px",
+      "bg-black/80",
+      "bg-black/[.05]",
+      "bg-blue-100",
+      "bg-clip-text",
+      "bg-gradient-to-r",
+      "bg-gray-100",
+      "bg-neutral-50",
+      "bg-orange-50",
+      "bg-primary-100",
+      "bg-primary-400",
+      "bg-primary-600",
+      "bg-primary-700/5",
+      "bg-red-100",
+      "bg-transparent",
+      "bg-white",
+      "bg-yellow-50",
+      "block",
+      "border",
+      "border-b",
+      "border-b-2",
+      "border-black/5",
+      "border-blue-200",
+      "border-gray-200",
+      "border-gray-500",
+      "border-l",
+      "border-orange-100",
+      "border-red-200",
+      "border-t",
+      "border-transparent",
+      "border-yellow-100",
+      "bottom-0",
+      "break-words",
+      "capitalize",
+      "chroma",
+      "code-block",
+      "code-copy-btn",
+      "content",
+      "contrast-more:border",
+      "contrast-more:border-current",
+      "contrast-more:border-gray-800",
+      "contrast-more:border-gray-900",
+      "contrast-more:border-neutral-400",
+      "contrast-more:border-primary-500",
+      "contrast-more:border-t",
+      "contrast-more:border-transparent",
+      "contrast-more:dark:border-current",
+      "contrast-more:dark:border-gray-50",
+      "contrast-more:dark:border-neutral-400",
+      "contrast-more:dark:border-primary-500",
+      "contrast-more:dark:hover:border-gray-50",
+      "contrast-more:dark:shadow-[0_0_0_1px_#fff]",
+      "contrast-more:dark:shadow-none",
+      "contrast-more:dark:text-current",
+      "contrast-more:dark:text-gray-100",
+      "contrast-more:dark:text-gray-300",
+      "contrast-more:dark:text-gray-50",
+      "contrast-more:font-bold",
+      "contrast-more:hover:border-gray-900",
+      "contrast-more:shadow-[0_0_0_1px_#000]",
+      "contrast-more:shadow-none",
+      "contrast-more:text-current",
+      "contrast-more:text-gray-700",
+      "contrast-more:text-gray-800",
+      "contrast-more:text-gray-900",
+      "contrast-more:underline",
+      "copy-icon",
+      "cursor-default",
+      "cursor-pointer",
+      "dark:before:bg-neutral-800",
+      "dark:before:invert",
+      "dark:bg-black/60",
+      "dark:bg-blue-900/30",
+      "dark:bg-dark",
+      "dark:bg-dark/50",
+      "dark:bg-gray-50/10",
+      "dark:bg-neutral-800",
+      "dark:bg-neutral-900",
+      "dark:bg-orange-400/20",
+      "dark:bg-primary-300/10",
+      "dark:bg-primary-400/10",
+      "dark:bg-primary-600",
+      "dark:bg-red-900/30",
+      "dark:bg-yellow-700/30",
+      "dark:block",
+      "dark:border-blue-200/30",
+      "dark:border-gray-100/20",
+      "dark:border-gray-400",
+      "dark:border-neutral-700",
+      "dark:border-neutral-800",
+      "dark:border-orange-400/30",
+      "dark:border-red-200/30",
+      "dark:border-white/10",
+      "dark:border-yellow-200/30",
+      "dark:contrast-more:border-neutral-400",
+      "dark:focus:bg-dark",
+      "dark:focus:ring-primary-800",
+      "dark:from-gray-100",
+      "dark:hidden",
+      "dark:hover:bg-gray-100/5",
+      "dark:hover:bg-neutral-700",
+      "dark:hover:bg-neutral-800",
+      "dark:hover:bg-neutral-900",
+      "dark:hover:bg-primary-100/5",
+      "dark:hover:bg-primary-700",
+      "dark:hover:border-gray-100",
+      "dark:hover:border-gray-600",
+      "dark:hover:border-neutral-500",
+      "dark:hover:border-neutral-700",
+      "dark:hover:border-neutral-800",
+      "dark:hover:shadow-none",
+      "dark:hover:text-gray-100",
+      "dark:hover:text-gray-200",
+      "dark:hover:text-gray-300",
+      "dark:hover:text-gray-50",
+      "dark:hover:text-neutral-50",
+      "dark:hover:text-white",
+      "dark:opacity-80",
+      "dark:placeholder:text-gray-400",
+      "dark:ring-white/20",
+      "dark:shadow-[0_-12px_16px_#111]",
+      "dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]",
+      "dark:shadow-none",
+      "dark:text-blue-200",
+      "dark:text-gray-100",
+      "dark:text-gray-200",
+      "dark:text-gray-300",
+      "dark:text-gray-400",
+      "dark:text-gray-50",
+      "dark:text-neutral-200",
+      "dark:text-neutral-400",
+      "dark:text-orange-300",
+      "dark:text-primary-600",
+      "dark:text-red-200",
+      "dark:text-slate-100",
+      "dark:text-yellow-200",
+      "dark:to-gray-400",
+      "data-[state=closed]:hidden",
+      "data-[state=open]:hidden",
+      "data-[state=selected]:block",
+      "data-[state=selected]:border-primary-500",
+      "data-[state=selected]:text-primary-600",
+      "decoration-from-font",
+      "duration-200",
+      "duration-75",
+      "ease-in",
+      "filename",
+      "first:mt-0",
+      "fixed",
+      "flex",
+      "flex-col",
+      "flex-wrap",
+      "focus:bg-white",
+      "focus:outline-none",
+      "focus:ring-4",
+      "focus:ring-primary-300",
+      "font-bold",
+      "font-extrabold",
+      "font-medium",
+      "font-mono",
+      "font-normal",
+      "font-semibold",
+      "footnote-backref",
+      "footnote-ref",
+      "footnotes",
+      "from-gray-900",
+      "gap-1",
+      "gap-2",
+      "gap-4",
+      "gap-x-1.5",
+      "gap-y-2",
+      "grid",
+      "grid-cols-1",
+      "group",
+      "group-[.copied]/copybtn:block",
+      "group-[.copied]/copybtn:hidden",
+      "group-data-[theme=dark]:hidden",
+      "group-data-[theme=light]:hidden",
+      "group-hover/code:opacity-100",
+      "group-hover:underline",
+      "group-open:before:rotate-90",
+      "group/code",
+      "group/copybtn",
+      "grow",
+      "h-0",
+      "h-16",
+      "h-2",
+      "h-3.5",
+      "h-4",
+      "h-5",
+      "h-7",
+      "h-[18px]",
+      "h-full",
+      "hamburger-menu",
+      "hextra-card",
+      "hextra-cards",
+      "hextra-feature-card",
+      "hextra-filetree",
+      "hextra-filetree-folder",
+      "hextra-footer",
+      "hextra-scrollbar",
+      "hextra-sidebar-collapsible-button",
+      "hextra-toc",
+      "hidden",
+      "highlight",
+      "hover:bg-gray-100",
+      "hover:bg-gray-800/5",
+      "hover:bg-primary-50",
+      "hover:bg-primary-700",
+      "hover:bg-slate-50",
+      "hover:border-gray-200",
+      "hover:border-gray-300",
+      "hover:border-gray-400",
+      "hover:border-gray-900",
+      "hover:dark:bg-primary-500/10",
+      "hover:dark:text-primary-600",
+      "hover:opacity-60",
+      "hover:opacity-75",
+      "hover:shadow-gray-100",
+      "hover:shadow-lg",
+      "hover:shadow-md",
+      "hover:text-black",
+      "hover:text-gray-800",
+      "hover:text-gray-900",
+      "hover:text-primary-600",
+      "icon",
+      "inline",
+      "inline-block",
+      "inline-flex",
+      "inset-0",
+      "inset-x-0",
+      "inset-y-0",
+      "items-center",
+      "items-start",
+      "justify-between",
+      "justify-center",
+      "justify-end",
+      "justify-items-start",
+      "justify-start",
+      "language-options",
+      "language-switcher",
+      "last-of-type:mb-0",
+      "leading-5",
+      "leading-6",
+      "leading-7",
+      "leading-none",
+      "leading-tight",
+      "left-[24px]",
+      "left-[36px]",
+      "lg:grid-cols-3",
+      "line-clamp-3",
+      "list-none",
+      "lntable",
+      "lntd",
+      "ltr:-mr-4",
+      "ltr:before:left-0",
+      "ltr:md:left-auto",
+      "ltr:ml-3",
+      "ltr:ml-auto",
+      "ltr:mr-auto",
+      "ltr:pl-12",
+      "ltr:pl-16",
+      "ltr:pl-3",
+      "ltr:pl-4",
+      "ltr:pl-8",
+      "ltr:pr-0",
+      "ltr:pr-2",
+      "ltr:pr-4",
+      "ltr:pr-9",
+      "ltr:right-1.5",
+      "ltr:right-3",
+      "ltr:rotate-180",
+      "ltr:text-right",
+      "m-[11px]",
+      "max-h-64",
+      "max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))]",
+      "max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]",
+      "max-lg:min-h-[340px]",
+      "max-md:[transform:translate3d(0,-100%,0)]",
+      "max-md:hidden",
+      "max-md:min-h-[340px]",
+      "max-w-6xl",
+      "max-w-[50%]",
+      "max-w-[90rem]",
+      "max-w-[min(calc(100vw-2rem),calc(100%+20rem))]",
+      "max-w-none",
+      "max-w-screen-xl",
+      "max-xl:hidden",
+      "mb-10",
+      "mb-12",
+      "mb-16",
+      "mb-2",
+      "mb-4",
+      "mb-6",
+      "mb-8",
+      "md:aspect-[1.1/1]",
+      "md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
+      "md:hidden",
+      "md:inline-block",
+      "md:justify-start",
+      "md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]",
+      "md:pt-12",
+      "md:px-12",
+      "md:self-start",
+      "md:shrink-0",
+      "md:sticky",
+      "md:text-5xl",
+      "md:text-lg",
+      "md:text-sm",
+      "md:top-16",
+      "md:w-64",
+      "mermaid",
+      "min-h-[100px]",
+      "min-h-[calc(100vh-var(--navbar-height))]",
+      "min-w-0",
+      "min-w-[18px]",
+      "min-w-[24px]",
+      "min-w-full",
+      "ml-1",
+      "ml-4",
+      "mobile-menu-overlay",
+      "mr-1",
+      "mr-2",
+      "mt-1",
+      "mt-1.5",
+      "mt-12",
+      "mt-16",
+      "mt-2",
+      "mt-4",
+      "mt-5",
+      "mt-6",
+      "mt-8",
+      "mx-1",
+      "mx-2",
+      "mx-4",
+      "mx-auto",
+      "my-1.5",
+      "my-2",
+      "nav-container",
+      "nav-container-blur",
+      "next-error-h1",
+      "no-underline",
+      "not-prose",
+      "opacity-0",
+      "opacity-50",
+      "opacity-80",
+      "open",
+      "order-last",
+      "origin-center",
+      "overflow-auto",
+      "overflow-hidden",
+      "overflow-x-auto",
+      "overflow-x-hidden",
+      "overflow-y-auto",
+      "overscroll-contain",
+      "p-0.5",
+      "p-1",
+      "p-1.5",
+      "p-2",
+      "p-4",
+      "p-6",
+      "pb-8",
+      "pb-[env(safe-area-inset-bottom)]",
+      "pb-px",
+      "pl-5",
+      "pl-6",
+      "pl-[max(env(safe-area-inset-left),1.5rem)]",
+      "placeholder:text-gray-500",
+      "pointer-events-none",
+      "pr-2",
+      "pr-4",
+      "pr-[calc(env(safe-area-inset-right)-1.5rem)]",
+      "pr-[max(env(safe-area-inset-left),1.5rem)]",
+      "pr-[max(env(safe-area-inset-right),1.5rem)]",
+      "print:bg-transparent",
+      "print:hidden",
+      "pt-4",
+      "pt-6",
+      "pt-8",
+      "px-1.5",
+      "px-2",
+      "px-3",
+      "px-4",
+      "px-6",
+      "py-1",
+      "py-1.5",
+      "py-12",
+      "py-2",
+      "py-2.5",
+      "py-3",
+      "py-4",
+      "relative",
+      "right-0",
+      "ring-1",
+      "ring-black/5",
+      "rounded",
+      "rounded-3xl",
+      "rounded-full",
+      "rounded-lg",
+      "rounded-md",
+      "rounded-sm",
+      "rounded-t",
+      "rounded-xl",
+      "rtl:-ml-4",
+      "rtl:-rotate-180",
+      "rtl:before:right-0",
+      "rtl:before:rotate-180",
+      "rtl:left-1.5",
+      "rtl:left-3",
+      "rtl:md:right-auto",
+      "rtl:ml-auto",
+      "rtl:mr-3",
+      "rtl:mr-auto",
+      "rtl:pl-2",
+      "rtl:pl-4",
+      "rtl:pl-9",
+      "rtl:pr-12",
+      "rtl:pr-16",
+      "rtl:pr-3",
+      "rtl:pr-4",
+      "rtl:pr-8",
+      "rtl:text-left",
+      "scroll-my-6",
+      "scroll-py-6",
+      "search-input",
+      "search-results",
+      "search-wrapper",
+      "select-none",
+      "shadow",
+      "shadow-[0_-12px_16px_#fff]",
+      "shadow-[0_-12px_16px_white]",
+      "shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)]",
+      "shadow-gray-100",
+      "shadow-lg",
+      "shadow-sm",
+      "shadow-xl",
+      "shrink-0",
+      "sidebar-active-item",
+      "sidebar-container",
+      "sm:block",
+      "sm:flex",
+      "sm:grid-cols-2",
+      "sm:items-start",
+      "sm:text-xl",
+      "sm:w-[110%]",
+      "sr-only",
+      "steps",
+      "sticky",
+      "subheading-anchor",
+      "success-icon",
+      "tabs-panel",
+      "tabs-toggle",
+      "text-2xl",
+      "text-4xl",
+      "text-[10px]",
+      "text-[color:hsl(var(--primary-hue),100%,50%)]",
+      "text-base",
+      "text-blue-900",
+      "text-center",
+      "text-current",
+      "text-ellipsis",
+      "text-gray-100",
+      "text-gray-500",
+      "text-gray-600",
+      "text-gray-700",
+      "text-gray-800",
+      "text-gray-900",
+      "text-left",
+      "text-lg",
+      "text-orange-800",
+      "text-primary-800",
+      "text-red-900",
+      "text-slate-900",
+      "text-sm",
+      "text-transparent",
+      "text-white",
+      "text-xl",
+      "text-xs",
+      "text-yellow-900",
+      "theme-toggle",
+      "to-gray-600",
+      "top-0",
+      "top-16",
+      "top-8",
+      "top-[40%]",
+      "top-full",
+      "tracking-tight",
+      "tracking-tighter",
+      "transition",
+      "transition-all",
+      "transition-colors",
+      "transition-opacity",
+      "transition-transform",
+      "underline",
+      "underline-offset-2",
+      "w-2",
+      "w-3.5",
+      "w-4",
+      "w-64",
+      "w-[110%]",
+      "w-[180%]",
+      "w-full",
+      "w-max",
+      "w-screen",
+      "whitespace-nowrap",
+      "xl:block",
+      "z-10",
+      "z-20",
+      "z-[-1]"
+    ],
+    "ids": null
+  }
+}
--- a/exampleSite/i18n/zh-cn.yaml
+++ b/exampleSite/i18n/zh-cn.yaml
@ -0,0 +1,6 @@
+documentation: "文档"
+showcase: "项目展示"
+blog: "博客"
+about: "关于"
+more: "更多"
+hugoDocs: "Hugo 文档 ↗"
--- a/exampleSite/static/images/card-image-unprocessed.jpg
+++ b/exampleSite/static/images/card-image-unprocessed.jpg
--- a/exampleSite/static/images/hextra-doc.webp
+++ b/exampleSite/static/images/hextra-doc.webp
--- a/exampleSite/static/images/hextra-markdown.webp
+++ b/exampleSite/static/images/hextra-markdown.webp
--- a/exampleSite/static/images/hextra-search.webp
+++ b/exampleSite/static/images/hextra-search.webp
--- a/i18n/cs.yaml
+++ b/i18n/cs.yaml
@ -2,7 +2,7 @@ backToTop: "Zpět nahoru"
 changeLanguage: "Změnit jazyk"
 changeTheme: "Změnit vzhled"
 copyCode: "Zkopírovat kód"
-copyright: "© 2025 Hextra Project."
+copyright: "© 2023 Hextra Project."
 dark: "Tmavý"
 editThisPage: "Upravit tuto stránku na GitHubu →"
 lastUpdated: "Naposledy změněno"
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@ -2,9 +2,9 @@ backToTop: "Nach oben"
 changeLanguage: "Sprache ändern"
 changeTheme: "Darstellung ändern"
 copyCode: "Code kopieren"
-copyright: "© 2025 Hextra Project."
+copyright: "© 2024 Hextra Project."
 dark: "Dunkel"
-editThisPage: "Diese Seite auf GitHub bearbeiten →"
+editThisPage: "Diese Seite auf Github bearbeiten →"
 lastUpdated: "Zuletzt aktualisiert am"
 light: "Hell"
 noResultsFound: "Keine Ergebnisse gefunden."
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -2,7 +2,7 @@ backToTop: "Scroll to top"
 changeLanguage: "Change language"
 changeTheme: "Change theme"
 copyCode: "Copy code"
-copyright: "© 2025 Hextra Project."
+copyright: "© 2023 Hextra Project."
 dark: "Dark"
 editThisPage: "Edit this page on GitHub →"
 lastUpdated: "Last updated on"
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@ -1,7 +1,7 @@
 backToTop: "Subir al inicio"
 changeLanguage: "Cambiar idioma"
 changeTheme: "Cambiar tema"
-copyright: "© 2025 Proyecto Hextra."
+copyright: "© 2023 Proyecto Hextra."
 dark: "Oscuro"
 editThisPage: "Edita esta página en GitHub →"
 lastUpdated: "Última actualización"
--- a/i18n/fa.yaml
+++ b/i18n/fa.yaml
@ -1,14 +0,0 @@
-backToTop: "به بالا بروید"
-changeLanguage: "تغییر زبان"
-changeTheme: "تغییر تم"
-copyCode: "کپی کد"
-copyright: "© ۲۰۲۴ پروژه هگزترا."
-dark: "تیره"
-editThisPage: "ویرایش این صفحه در گیت‌هاب ←"
-lastUpdated: "آخرین به‌روزرسانی در"
-light: "روشن"
-noResultsFound: "هیچ نتیجه‌ای پیدا نشد."
-onThisPage: "در این صفحه"
-poweredBy: "طراحی شده توسط هگزترا"
-readMore: "ادامه مطلب ←"
-searchPlaceholder: "جستجو..."
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@ -1,7 +1,7 @@
 backToTop: "Revenir en haut"
 changeLanguage: "Changer la langue"
 changeTheme: "Thème d'affichage"
-copyright: "© 2025 Hextra Project."
+copyright: "© 2023 Hextra Project."
 dark: "Sombre"
 editThisPage: "Modifier cette page sur GitHub →"
 lastUpdated: "Dernière modification"
--- a/Show More
+++ b/Show More