feat: enhance FlexSearch encoding for CJK support (#553)

- Added support for CJK (Chinese, Japanese, Korean) languages in FlexSearch encoding.
- Introduced `isCJK` function to detect language and select appropriate encoding method.
- Implemented `encodeCJK` and `encodeDefault` functions for different tokenization strategies.

.devcontainer/devcontainer.json

@@ -3,7 +3,7 @@
   "features": {
     "ghcr.io/devcontainers/features/hugo:1": {
       "extended": true,
-      "version": "0.119.0"
+      "version": "0.131.0"
     },
     "ghcr.io/devcontainers/features/node:1": {}
   },

.github/CONTRIBUTING.md

@@ -57,7 +57,7 @@ We recommend that you search existing [issues][issues] or discussions before ope
 
 ### Local development setup
 
-- [Hugo][hugo] >= v0.115.0 (extended version)
+- [Hugo][hugo] >= v0.124.0 (extended version)
 - [Node.js][nodejs]
 - [Go][go]
 

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: imfing
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/bug_report.md

@@ -17,6 +17,8 @@ assignees: ''
 2. 
 3. 
 
+<!-- Provide a minimal example or link to a repository that reproduces the bug -->
+
 **Expected Behavior**
 
 <!-- What should have happened? -->

.github/workflows/pages.yml

@@ -31,33 +31,37 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.117.0
+      HUGO_VERSION: 0.138.0
     steps:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+          fetch-depth: 0  # fetch all history for .GitInfo and .Lastmod
+          submodules: recursive
       - name: Setup Go
-        uses: actions/setup-go@v4
+        uses: actions/setup-go@v5
         with:
-          go-version: '1.20'
+          go-version: '1.23'
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
       - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
-        with:
-          hugo-version: ${{ env.HUGO_VERSION }}
-          extended: true
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
       - name: Build with Hugo
         env:
           # For maximum backward compatibility with Hugo modules
           HUGO_ENVIRONMENT: production
           HUGO_ENV: production
+        # Use the latest release of the theme to build exampleSite
         run: |
-          hugo \
-            --minify \
-            --themesDir=../.. --source=exampleSite \
-            --baseURL "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
+          cd exampleSite && rm go.mod
+          hugo mod init github.com/imfing/hextra/exampleSite
+          hugo mod get -u github.com/imfing/hextra
+          hugo --minify --baseURL "${{ steps.pages.outputs.base_url }}/"
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: ./exampleSite/public
 
@@ -71,4 +75,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.prettierrc

@@ -1,4 +1,7 @@
 {
+  "plugins": [
+    "prettier-plugin-go-template"
+  ],
   "goTemplateBracketSpacing": true,
   "htmlWhitespaceSensitivity": "css",
   "printWidth": 200,

README.fa.md

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

README.md

@@ -1,5 +1,6 @@
 <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/)

README.zh-cn.md

@@ -1,5 +1,6 @@
 <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/)
@@ -20,7 +21,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 等诸多开箱即用的功能.
 
 ## 快速开始

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 { font-style: italic }
+  /* GenericEmph */ .chroma .ge { color: inherit; font-style: italic }
   /* GenericError */ .chroma .gr { color: #ffa198 }
   /* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
   /* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }

assets/css/components/badge.css

@@ -0,0 +1,3 @@
+.hextra-badge {
+  @apply hx-inline-flex hx-items-center;
+}

assets/css/components/cards.css

@@ -1,5 +1,9 @@
 .hextra-cards {
-  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
+}
+
+.hextra-card {
+  position: relative;
 }
 
 .hextra-card img {
@@ -18,6 +22,7 @@
 
 .hextra-card p {
   margin-top: 0.5rem;
+  position: relative;
 }
 
 .dark .hextra-card svg {
@@ -27,3 +32,10 @@
 .dark .hextra-card:hover svg {
   color: currentColor;
 }
+
+.hextra-card-tag {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 10;
+}

assets/css/components/code-copy.css

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

assets/css/components/hextra/feature-grid.css

@@ -0,0 +1,5 @@
+.hextra-feature-grid {
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(var(--hextra-feature-grid-cols), minmax(0, 1fr));
+  }
+}

assets/css/components/jupyter.css

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

assets/css/components/navbar.css

@@ -1,6 +1,6 @@
 nav {
   .search-wrapper {
-    @apply hidden md:inline-block;
+    @apply hx-hidden md:hx-inline-block;
   }
 }
 
@@ -8,13 +8,13 @@ nav {
   (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
   .nav-container-blur {
-    @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
+    @apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80;
   }
 }
 
 .hamburger-menu svg {
   g {
-    @apply origin-center;
+    @apply hx-origin-center;
     transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
   }
   path {
@@ -37,16 +37,16 @@ nav {
 
   &.open > {
     path {
-      @apply opacity-0;
+      @apply hx-opacity-0;
     }
     g:nth-of-type(1) {
-      @apply rotate-45;
+      @apply hx-rotate-45;
       path {
         transform: translate3d(0, 4px, 0);
       }
     }
     g:nth-of-type(2) {
-      @apply -rotate-45;
+      @apply -hx-rotate-45;
       path {
         transform: translate3d(0, -4px, 0);
       }

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 w-3 h-3;
+    @apply hx-w-3 hx-h-3;
   }
   &::-webkit-scrollbar-track {
-    @apply bg-transparent;
+    @apply hx-bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
-    @apply rounded-[10px];
+    @apply hx-rounded-[10px];
   }
   &:hover::-webkit-scrollbar-thumb {
     border: 3px solid transparent;
     background-color: var(--tw-shadow-color);
     background-clip: content-box;
-    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
+    @apply hx-shadow-neutral-500/20 hover:hx-shadow-neutral-500/40;
   }
 }

assets/css/components/search.css

@@ -1,31 +1,31 @@
 .search-wrapper {
   li {
-    @apply mx-2.5 break-words rounded-md contrast-more:border text-gray-800 contrast-more:border-transparent dark:text-gray-300;
+    @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;
     a {
-      @apply block scroll-m-12 px-2.5 py-2;
+      @apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
     }
 
     .title {
-      @apply text-base font-semibold leading-5;
+      @apply hx-text-base hx-font-semibold hx-leading-5;
     }
 
     .active {
-      @apply rounded-md bg-primary-500/10 contrast-more:border-primary-500;
+      @apply hx-rounded-md hx-bg-primary-500/10 contrast-more:hx-border-primary-500;
     }
   }
 
   .no-result {
-    @apply block select-none p-8 text-center text-sm text-gray-400;
+    @apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
   }
 
   .prefix {
-    @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;
+    @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;
   }
 
   .excerpt {
-    @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;
+    @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;
     display: -webkit-box;
     line-clamp: 1;
     -webkit-line-clamp: 1;
@@ -33,6 +33,6 @@
   }
 
   .match {
-    @apply text-primary-600;
+    @apply hx-text-primary-600;
   }
 }

assets/css/components/sidebar.css

@@ -1,6 +1,6 @@
 @media (max-width: 767px) {
   .sidebar-container {
-    @apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
+    @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;
     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 h-0;
+    @apply hx-h-0;
   }
   li.open > div {
-    @apply h-auto pt-1;
+    @apply hx-h-auto hx-pt-1;
   }
   li.open > a > span > svg > path {
-    @apply rotate-90;
+    @apply hx-rotate-90;
   }
 }

assets/css/components/steps.css

@@ -2,10 +2,16 @@
   counter-increment: step;
 
   &:before {
-    @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];
+    @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];
     content: counter(step);
   }
 }
+
+:lang(fa) .steps h3 {
+  &:before {
+    content: counter(step, persian);
+  }
+}

assets/css/highlight.css

@@ -2,47 +2,52 @@
 @import "chroma/light.css";
 @import "chroma/dark.css";
 
-.code-block {
-  @apply text-[.9em] leading-5;
+.hextra-code-block {
+  @apply hx-text-[.9em] hx-leading-5;
 
   pre {
-    @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;
+    @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;
   }
 
   .filename {
-    @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;
+    @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;
   }
 }
 
-.code-block pre:not(.lntable pre) {
-  @apply px-4 mb-4 py-4 rounded-xl;
+.hextra-code-block pre:not(.lntable pre) {
+  @apply hx-px-4 hx-mb-4 hx-py-4 hx-rounded-xl;
 }
 
-.code-block div:nth-of-type(2) pre {
-  @apply pt-12 pb-4;
+.hextra-code-block div:nth-of-type(2) pre {
+  @apply hx-pt-12 hx-pb-4;
 }
 
 .chroma {
   .lntable {
-    @apply m-0 block w-auto overflow-auto rounded-xl;
+    @apply hx-m-0 hx-block hx-w-auto hx-overflow-auto hx-rounded-xl;
 
     pre {
-      @apply pt-4 pb-4;
+      @apply hx-pt-4 hx-pb-4;
     }
   }
   .ln,
   .lnt:not(.hl > .lnt),
   .hl:not(.line) {
-    @apply pl-4 pr-4 min-w-[2.6rem] text-neutral-600 dark:text-neutral-300;
+    @apply hx-pl-4 hx-pr-4 hx-min-w-[2.6rem] hx-text-neutral-600 dark:hx-text-neutral-300;
   }
   .lntd {
-    @apply p-0 align-top;
+    @apply hx-p-0 hx-align-top;
   }
   .lntd:last-of-type {
-    @apply w-full;
+    @apply hx-w-full;
   }
   /* LineHighlight */
   .hl {
-    @apply block w-full bg-primary-800/10;
+    @apply hx-block hx-w-full hx-bg-primary-800/10;
   }
 }

assets/css/styles.css

@@ -8,20 +8,25 @@
 @import "components/sidebar.css";
 @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 text-base antialiased;
+  @apply hx-text-base hx-antialiased;
   font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
   -webkit-tap-highlight-color: transparent;
 }
 
 body {
-  @apply w-full bg-white dark:bg-dark dark:text-gray-100;
+  @apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100;
 }
 
 :root {
   --primary-hue: 212deg;
   --primary-saturation: 100%;
+  --primary-lightness: 50%;
   --navbar-height: 4rem;
   --menu-height: 3.75rem;
 }
@@ -29,4 +34,5 @@ body {
 .dark {
   --primary-hue: 204deg;
   --primary-saturation: 100%;
+  --primary-lightness: 50%;
 }

assets/css/typography.css

@@ -1,113 +1,133 @@
 .content {
   :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
+    @apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100;
   }
   :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @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;
+    @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;
   }
   :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-2xl;
   }
   :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-xl;
   }
   :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-lg;
   }
   :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-base;
   }
   :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 leading-7 first:mt-0;
+    @apply hx-mt-6 hx-leading-7 first:hx-mt-0;
   }
   :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
+    @apply hx-text-primary-600 hx-underline hx-decoration-from-font [text-underline-position:from-font];
   }
   :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @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;
+    @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;
   }
-  :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(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(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(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(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
-    @apply block overflow-x-auto mt-6 p-0 first:mt-0;
+  :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;
 
     tr {
-      @apply m-0 border-t border-gray-300 p-0 dark:border-gray-600 even:bg-gray-100 even:dark:bg-gray-600/20;
+      @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;
     }
     th {
-      @apply m-0 border border-gray-300 px-4 py-2 font-semibold dark:border-gray-600;
+      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-gray-600;
     }
     td {
-      @apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
+      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 dark:hx-border-gray-600;
     }
   }
   :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
+    @apply hx-mt-6 hx-list-decimal first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
     li {
-      @apply my-2;
+      @apply hx-my-2;
     }
   }
   :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
+    @apply hx-mt-6 hx-list-disc first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
     li {
-      @apply my-2;
+      @apply hx-my-2;
     }
   }
-  :where(kbd):not(:where([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;
+  /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
+     inside the 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(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
-    @apply bg-transparent rounded-none dark:bg-transparent;
+  :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;
+  }
+  :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(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mx-auto my-4 rounded-md;
+    @apply hx-mx-auto hx-my-4 hx-rounded-md;
   }
   :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
     figcaption {
-      @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
+      @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;
     }
   }
   .footnotes {
-    @apply mt-12 text-sm;
+    @apply hx-mt-12 hx-text-sm;
   }
 }
 
 .subheading-anchor {
-  @apply opacity-0 transition-opacity ltr:ml-1 rtl:mr-1;
+  @apply hx-opacity-0 hx-transition-opacity ltr:hx-ml-1 rtl:hx-mr-1;
 
   span:target + &,
   :hover > &,
   &:focus {
-    @apply opacity-100;
+    @apply hx-opacity-100;
   }
 
   span + &,
   :hover > & {
-    @apply !no-underline;
+    @apply !hx-no-underline;
   }
 
   &:after {
-    @apply content-['#'] px-1;
-    @apply text-gray-300 dark:text-neutral-700;
+    @apply hx-content-['#'] hx-px-1;
+    @apply hx-text-gray-300 dark:hx-text-neutral-700;
     span:target + & {
-      @apply text-gray-400;
-      @apply dark:text-neutral-500;
+      @apply hx-text-gray-400;
+      @apply dark:hx-text-neutral-500;
     }
   }
 }
 
 article details > summary {
   &::-webkit-details-marker {
-    @apply hidden;
+    @apply hx-hidden;
   }
   &::before {
-    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");
+    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");
     height: 1.2em;
     width: 1.2em;
     vertical-align: -4px;
+    padding: 0 0.6em;
   }
 }
+
+:lang(fa) ol {
+  list-style-type: persian;
+}

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("opacity-0");
+        backToTop.classList.remove("hx-opacity-0");
       } else {
-        backToTop.classList.add("opacity-0");
+        backToTop.classList.add("hx-opacity-0");
       }
     });
   }

assets/js/code-copy.js

@@ -25,7 +25,7 @@ document.addEventListener('DOMContentLoaded', function () {
     return svg;
   }
 
-  document.querySelectorAll('.code-copy-btn').forEach(function (button) {
+  document.querySelectorAll('.hextra-code-copy-btn').forEach(function (button) {
     // Add copy and success icons
     button.querySelector('.copy-icon')?.appendChild(getCopyIcon());
     button.querySelector('.success-icon')?.appendChild(getSuccessIcon());
@@ -33,8 +33,8 @@ document.addEventListener('DOMContentLoaded', function () {
     // Add click event listener for copy button
     button.addEventListener('click', function (e) {
       e.preventDefault();
-      const targetId = button.getAttribute('data-clipboard-target');
-      const target = document.querySelector(targetId);
+      // Get the code target
+      const target = button.parentElement.previousElementSibling;
       let codeElement;
       if (target.tagName === 'CODE') {
         codeElement = target;
@@ -44,14 +44,17 @@ document.addEventListener('DOMContentLoaded', function () {
         codeElement = codeElements[codeElements.length - 1];
       }
       if (codeElement) {
+        let code = codeElement.innerText;
         // Replace double newlines with single newlines in the innerText
         // as each line inside <span> has trailing newline '\n'
-        const code = codeElement.innerText.replace(/\n\n/g, '\n');
+        if ("lang" in codeElement.dataset) {
+          code = code.replace(/\n\n/g, '\n');
+        }
         navigator.clipboard.writeText(code).then(function () {
           button.classList.add('copied');
           setTimeout(function () {
             button.classList.remove('copied');
-          }, 500);
+          }, 1000);
         }).catch(function (err) {
           console.error('Failed to copy text: ', err);
         });

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="text-xs">⌘</span>K';
+      key.innerHTML = '<span class="hx-text-xs">⌘</span>K';
     });
   }
 });
@@ -27,6 +27,20 @@ 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.
@@ -79,6 +93,7 @@ document.addEventListener("DOMContentLoaded", function () {
       e.target !== resultsElement &&
       !resultsElement.contains(e.target)
     ) {
+      setShortcutElementsOpacity(100);
       hideSearchResults();
     }
   });
@@ -128,7 +143,7 @@ document.addEventListener("DOMContentLoaded", function () {
   function hideSearchResults() {
     const { resultsElement } = getActiveSearchElement();
     if (!resultsElement) return;
-    resultsElement.classList.add('hidden');
+    resultsElement.classList.add('hx-hidden');
   }
 
   // Handle keyboard events.
@@ -157,6 +172,10 @@ 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;
     }
@@ -170,24 +189,40 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   }
 
-  // Preload the search index.
+  /**
+   * 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.
+   */
   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: 'forward',
+      tokenize,
+      encode: encodeFunction,
       cache: 100,
       document: {
         id: 'id',
-        store: ['title'],
+        store: ['title', 'crumb'],
         index: "content"
       }
     });
 
     window.sectionIndex = new FlexSearch.Document({
-      tokenize: 'forward',
+      tokenize,
+      encode: encodeFunction,
       cache: 100,
       document: {
         id: 'id',
-        store: ['title', 'content', 'url', 'display'],
+        store: ['title', 'content', 'url', 'display', 'crumb'],
         index: "content",
         tag: 'pageId'
       }
@@ -199,6 +234,30 @@ 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('#');
@@ -212,6 +271,7 @@ document.addEventListener("DOMContentLoaded", function () {
           id: url,
           url,
           title,
+          crumb,
           pageId: `page_${pageId}`,
           content: title,
           ...(paragraphs[0] && { display: paragraphs[0] })
@@ -222,6 +282,7 @@ document.addEventListener("DOMContentLoaded", function () {
             id: `${url}_${i}`,
             url,
             title,
+            crumb,
             pageId: `page_${pageId}`,
             content: paragraphs[i]
           });
@@ -233,12 +294,17 @@ 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) {
@@ -250,7 +316,7 @@ document.addEventListener("DOMContentLoaded", function () {
     while (resultsElement.firstChild) {
       resultsElement.removeChild(resultsElement.firstChild);
     }
-    resultsElement.classList.remove('hidden');
+    resultsElement.classList.remove('hx-hidden');
 
     const pageResults = window.pageIndex.search(query, 5, { enrich: true, suggest: true })[0]?.result || [];
 
@@ -281,7 +347,7 @@ document.addEventListener("DOMContentLoaded", function () {
           _page_rk: i,
           _section_rk: j,
           route: url,
-          prefix: isFirstItemOfPage ? result.doc.title : undefined,
+          prefix: isFirstItemOfPage ? result.doc.crumb : undefined,
           children: { title, content }
         })
         isFirstItemOfPage = false
@@ -307,6 +373,12 @@ 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;

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('hidden');
+      optionsElement.classList.toggle('hx-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('hidden');
+        optionsElement.classList.add('hx-hidden');
       });
     }
   });

assets/js/menu.js

@@ -1,19 +1,49 @@
 // Hamburger menu for mobile navigation
 
-const menu = document.querySelector('.hamburger-menu');
-
-menu.addEventListener('click', (e) => {
-  e.preventDefault();
+document.addEventListener('DOMContentLoaded', function () {
+  const menu = document.querySelector('.hamburger-menu');
+  const overlay = document.querySelector('.mobile-menu-overlay');
   const sidebarContainer = document.querySelector('.sidebar-container');
 
-  // Toggle the hamburger menu
-  menu.querySelector('svg').classList.toggle('open');
+  // 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);
 
-  // When the menu is open, we want to show the navigation sidebar
-  sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
-  sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
+  function toggleMenu() {
+    // Toggle the hamburger menu
+    menu.querySelector('svg').classList.toggle('open');
 
-  // When the menu is open, we want to prevent the body from scrolling
-  document.body.classList.toggle('overflow-hidden');
-  document.body.classList.toggle('md:overflow-auto');
+    // When the menu is open, we want to show the navigation sidebar
+    sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
+    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');
+  }
+
+  menu.addEventListener('click', (e) => {
+    e.preventDefault();
+    toggleMenu();
+
+    if (overlay.classList.contains('hx-bg-transparent')) {
+      // Show the overlay
+      overlay.classList.add(...overlayClasses);
+      overlay.classList.remove('hx-bg-transparent');
+    } else {
+      // Hide the overlay
+      overlay.classList.remove(...overlayClasses);
+      overlay.classList.add('hx-bg-transparent');
+    }
+  });
+
+  overlay.addEventListener('click', (e) => {
+    e.preventDefault();
+    toggleMenu();
+
+    // Hide the overlay
+    overlay.classList.remove(...overlayClasses);
+    overlay.classList.add('hx-bg-transparent');
+  });
 });

assets/js/sidebar.js

@@ -1,4 +1,9 @@
 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) {
@@ -9,4 +14,23 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     });
   });
-});
+}
+
+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
+  });
+}

assets/js/tabs.js

@@ -1,14 +1,14 @@
-document.querySelectorAll('.tabs-toggle').forEach(function (button) {
+document.querySelectorAll('.hextra-tabs-toggle').forEach(function (button) {
   button.addEventListener('click', function (e) {
     // set parent tabs to unselected
-    const tabs = Array.from(e.target.parentElement.querySelectorAll('.tabs-toggle'));
+    const tabs = Array.from(e.target.parentElement.querySelectorAll('.hextra-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.nextElementSibling;
+    const panelsContainer = e.target.parentElement.parentElement.nextElementSibling;
     Array.from(panelsContainer.children).forEach(function (panel) {
       panel.dataset.state = '';
     });

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

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var i=r[e];if(void 0!==i)return i.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var i={};return function(){n.d(i,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,i=0,a=e.length;n<t.length;){var o=t[n];if(i<=0&&t.slice(n,n+a)===e)return n;"\\"===o?n++:"{"===o?i++:"}"===o&&i--,n++}return-1},a=/^\\begin{/,o=function(e,t){for(var n,i=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(i.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=a.test(d)?d:e.slice(t[l].left.length,n);i.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&i.push({type:"text",data:e}),i},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var i=document.createDocumentFragment(),a=0;a<n.length;a++)if("text"===n[a].type)i.appendChild(document.createTextNode(n[a].data));else{var l=document.createElement("span"),d=n[a].data;r.displayMode=n[a].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[a].data+"` with ",e),i.appendChild(document.createTextNode(n[a].rawData));continue}i.appendChild(l)}return i},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var i=t.childNodes[n];if(3===i.nodeType){for(var a=i.textContent,o=i.nextSibling,d=0;o&&o.nodeType===Node.TEXT_NODE;)a+=o.textContent,o=o.nextSibling,d++;var s=l(a,r);if(s){for(var f=0;f<d;f++)i.nextSibling.remove();n+=s.childNodes.length-1,t.replaceChild(s,i)}else n+=d}else 1===i.nodeType&&function(){var t=" "+i.className+" ";-1===r.ignoredTags.indexOf(i.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(i,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),i=i.default}()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};return function(){r.d(o,{default:function(){return d}});var e=r(771),t=r.n(e);const n=function(e,t,n){let r=n,o=0;const i=e.length;for(;r<t.length;){const n=t[r];if(o<=0&&t.slice(r,r+i)===e)return r;"\\"===n?r++:"{"===n?o++:"}"===n&&o--,r++}return-1},i=/^\\begin{/;var a=function(e,t){let r;const o=[],a=new RegExp("("+t.map((e=>e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"))).join("|")+")");for(;r=e.search(a),-1!==r;){r>0&&(o.push({type:"text",data:e.slice(0,r)}),e=e.slice(r));const a=t.findIndex((t=>e.startsWith(t.left)));if(r=n(t[a].right,e,t[a].left.length),-1===r)break;const l=e.slice(0,r+t[a].right.length),s=i.test(l)?l:e.slice(t[a].left.length,r);o.push({type:"math",data:s,rawData:l,display:t[a].display}),e=e.slice(r+t[a].right.length)}return""!==e&&o.push({type:"text",data:e}),o};const l=function(e,n){const r=a(e,n.delimiters);if(1===r.length&&"text"===r[0].type)return null;const o=document.createDocumentFragment();for(let e=0;e<r.length;e++)if("text"===r[e].type)o.appendChild(document.createTextNode(r[e].data));else{const i=document.createElement("span");let a=r[e].data;n.displayMode=r[e].display;try{n.preProcess&&(a=n.preProcess(a)),t().render(a,i,n)}catch(i){if(!(i instanceof t().ParseError))throw i;n.errorCallback("KaTeX auto-render: Failed to parse `"+r[e].data+"` with ",i),o.appendChild(document.createTextNode(r[e].rawData));continue}o.appendChild(i)}return o},s=function(e,t){for(let n=0;n<e.childNodes.length;n++){const r=e.childNodes[n];if(3===r.nodeType){let o=r.textContent,i=r.nextSibling,a=0;for(;i&&i.nodeType===Node.TEXT_NODE;)o+=i.textContent,i=i.nextSibling,a++;const s=l(o,t);if(s){for(let e=0;e<a;e++)r.nextSibling.remove();n+=s.childNodes.length-1,e.replaceChild(s,r)}else n+=a}else if(1===r.nodeType){const e=" "+r.className+" ";-1===t.ignoredTags.indexOf(r.nodeName.toLowerCase())&&t.ignoredClasses.every((t=>-1===e.indexOf(" "+t+" ")))&&s(r,t)}}};var d=function(e,t){if(!e)throw new Error("No element provided to render");const n={};for(const e in t)t.hasOwnProperty(e)&&(n[e]=t[e]);n.delimiters=n.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],n.ignoredTags=n.ignoredTags||["script","noscript","style","textarea","pre","code","option"],n.ignoredClasses=n.ignoredClasses||[],n.errorCallback=n.errorCallback||console.error,n.macros=n.macros||{},s(e,n)}}(),o=o.default}()}));

data/icons.yaml

@@ -9,6 +9,21 @@ github: >
     <path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path>
   </svg>
 
+codeberg: >
+  <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <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>
@@ -21,6 +36,8 @@ 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>
@@ -271,3 +288,5 @@ 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>

exampleSite/content/_index.fa.md

@@ -0,0 +1,76 @@
+---
+title: تم هگزترا
+layout: hextra-home
+---
+
+{{< hextra/hero-badge >}}
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
+  <span>آزاد، متن‌باز</span>
+  {{< icon name="arrow-circle-left" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+
+<div class="hx-mt-6 hx-mb-6">
+{{< hextra/hero-headline >}}
+  ساخت وب‌سایت‌های مدرن &nbsp;<br class="sm:hx-block hx-hidden" />با مارک‌داون و هیوگو
+{{< /hextra/hero-headline >}}
+</div>
+
+<div class="hx-mb-12">
+{{< hextra/hero-subtitle >}}
+  تم هیوگو سریع و دارای امکانات کامل&nbsp;<br class="sm:hx-block hx-hidden" />برای ایجاد وب‌سایت‌های استاتیک زیبا
+{{< /hextra/hero-subtitle >}}
+</div>
+
+<div class="hx-mb-6">
+{{< hextra/hero-button text="شروع کنید" link="docs" >}}
+</div>
+
+<div class="hx-mt-6"></div>
+
+{{< hextra/feature-grid >}}
+  {{< hextra/feature-card
+    title="سریع و با امکانات کامل"
+    subtitle="ساده و آسان برای استفاده، در عین حال قدرتمند و غنی از ویژگی‌ها متنوع."
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
+    image="/images/hextra-doc.webp"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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="مارک‌داون تنها چیزی است که شما نیاز دارید"
+    subtitle="فقط با مارک‌داون بنویسید. تکمیل و کامل با کامپوننت‌های کد کوتاه."
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
+    image="/images/hextra-markdown.webp"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
+    image="/images/hextra-search.webp"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-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="برای استفاده از هگزترا به هیچ وابستگی یا Node.js نیاز نیست. با پشتیبانی از هیوگو، یکی از سریع‌ترین تولیدکنندگان سایت استاتیک، سایت شما را تنها در چند ثانیه با یک باینری می‌سازد."
+  >}}
+  {{< hextra/feature-card
+    title=" واکنش‌گرا با حالت تیره"
+    subtitle="در اندازه‌های مختلف صفحه نمایش عالی به نظر می‌رسد. پشتیبانی از حالت تیره داخلی، با تغییر خودکار براساس اولویت سیستم کاربر."
+  >}}
+  {{< hextra/feature-card
+    title="ساخت و میزبانی رایگان"
+    subtitle="با گیت‌هاب Actions بسازید و به صورت رایگان در گیت‌هاب Pages میزبانی کنید. یا می‌توانید آن را در هر سرویس میزبانی استاتیک میزبانی کنید."
+  >}}
+  {{< hextra/feature-card
+    title="چند زبانه آسان"
+    subtitle="فقط با افزودن پسوند محلی به پرونده مارک‌داون صفحات وب‌سایت چند زبانه ایجاد کنید. افزودن پشتیبانی i18n به سایت شما بصری است."
+  >}}
+  {{< hextra/feature-card
+    title="و خیلی بیشتر..."
+    icon="sparkles"
+    subtitle="برجسته‌کردن سینتکس / فهرست مطالب / سئو / RSS / LaTeX / Mermaid / سفارشی‌سازی / و موارد دیگر…"
+  >}}
+{{< /hextra/feature-grid >}}

exampleSite/content/_index.ja.md

@@ -0,0 +1,76 @@
+---
+title: Hextra テーマ
+layout: hextra-home
+---
+
+{{< hextra/hero-badge >}}
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
+  <span>無料、オープンソース</span>
+  {{< icon name="arrow-circle-right" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+
+<div class="hx-mt-6 hx-mb-6">
+{{< hextra/hero-headline >}}
+  MarkdownとHugoで&nbsp;<br class="sm:hx-block hx-hidden" />モダンなウェブサイトを構築
+{{< /hextra/hero-headline >}}
+</div>
+
+<div class="hx-mb-12">
+{{< hextra/hero-subtitle >}}
+  美しい静的ウェブサイトを作るための&nbsp;<br class="sm:hx-block hx-hidden" />高速でバッテリー同梱型のHugoテーマ
+{{< /hextra/hero-subtitle >}}
+</div>
+
+<div class="hx-mb-6">
+{{< hextra/hero-button text="始める" link="docs" >}}
+</div>
+
+<div class="hx-mt-6"></div>
+
+{{< hextra/feature-grid >}}
+  {{< hextra/feature-card
+    title="高速かつ多機能"
+    subtitle="シンプルで使いやすく、それでいて強力で豊富な機能を備えています。"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
+    image="/images/hextra-doc.webp"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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だけでOK"
+    subtitle="Markdownだけで作成可能。ショートコードコンポーネントで充実させることもできます。"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
+    image="/images/hextra-markdown.webp"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
+    image="/images/hextra-search.webp"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-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によって動力を得ており、単一のバイナリで数秒でサイトを構築できます。"
+  >}}
+  {{< 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 >}}

exampleSite/content/_index.md

@@ -4,52 +4,52 @@ layout: hextra-home
 ---
 
 {{< hextra/hero-badge >}}
-  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-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">
+<div class="hx-mt-6 hx-mb-6">
 {{< hextra/hero-headline >}}
-  Build modern websites&nbsp;<br class="sm:block hidden" />with Markdown and Hugo
+  Build modern websites&nbsp;<br class="sm:hx-block hx-hidden" />with Markdown and Hugo
 {{< /hextra/hero-headline >}}
 </div>
 
-<div class="mb-12">
+<div class="hx-mb-12">
 {{< hextra/hero-subtitle >}}
-  Fast, batteries-included Hugo theme&nbsp;<br class="sm:block hidden" />for creating beautiful static websites
+  Fast, batteries-included Hugo theme&nbsp;<br class="sm:hx-block hx-hidden" />for creating beautiful static websites
 {{< /hextra/hero-subtitle >}}
 </div>
 
-<div class="mb-6">
+<div class="hx-mb-6">
 {{< hextra/hero-button text="Get Started" link="docs" >}}
 </div>
 
-<div class="mt-6"></div>
+<div class="hx-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]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="images/hextra-doc.webp"
-    imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
     image="images/hextra-markdown.webp"
-    imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="images/hextra-search.webp"
-    imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card

exampleSite/content/_index.zh-cn.md

@@ -4,52 +4,52 @@ layout: hextra-home
 ---
 
 {{< hextra/hero-badge >}}
-  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
   <span>免费 开源</span>
   {{< icon name="arrow-circle-right" attributes="height=14" >}}
 {{< /hextra/hero-badge >}}
 
-<div class="mt-6 mb-6">
+<div class="hx-mt-6 hx-mb-6">
 {{< hextra/hero-headline >}}
-  创建现代化网站&nbsp;<br class="sm:block hidden" />由 Markdown 和 Hugo 驱动
+  创建现代化网站&nbsp;<br class="sm:hx-block hx-hidden" />由 Markdown 和 Hugo 驱动
 {{< /hextra/hero-headline >}}
 </div>
 
-<div class="mb-12">
+<div class="hx-mb-12">
 {{< hextra/hero-subtitle >}}
-  极速且全能的 Hugo 主题框架&nbsp;<br class="sm:block hidden" />为构建现代化的静态网站而生
+  极速且全能的 Hugo 主题框架&nbsp;<br class="sm:hx-block hx-hidden" />为构建现代化的静态网站而生
 {{< /hextra/hero-subtitle >}}
 </div>
 
-<div class="mb-6">
+<div class="hx-mb-6">
 {{< hextra/hero-button text="现在开始" link="docs" >}}
 </div>
 
-<div class="mt-6"></div>
+<div class="hx-mt-6"></div>
 
 {{< hextra/feature-grid >}}
   {{< hextra/feature-card
     title="快速且功能全面"
     subtitle="简单易用，功能强大丰富。"
-    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="/images/hextra-doc.webp"
-    imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
     image="/images/hextra-markdown.webp"
-    imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="/images/hextra-search.webp"
-    imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card

exampleSite/content/about/index.fa.md

@@ -0,0 +1,22 @@
+---
+title: درباره ما
+toc: false
+---
+
+هگزترا به گونه‌ای طراحی شده است که یک موضوع ساده، سریع و انعطاف پذیر برای ساخت وب‌سایت‌های استاتیک مدرن باشد. این به ویژه برای وب‌سایت‌های مستندسازی مناسب است اما می‌تواند برای انواع مختلف سایت‌ها مانند وبلاگ‌ها، نمونه‌کار و موارد دیگر نیز استفاده شود.
+
+Hugo مانند Jekyll، یک ایجادکننده سایت استاتیک است. چیزی که Hugo را متمایز می‌کند این است که یک باینری واحد است و نصب و اجرای آن بر روی پلتفرم‌های مختلف را آسان می‌کند. همچنین بسیار سریع و قابل اعتماد است و می‌تواند یک سایت را با هزاران صفحه در میلی‌ثانیه ارائه دهد.
+
+هگزترا با ذهنیتی ساخته شده است که بر داشتن حداقل ردپا متمرکز شده است. برای شروع، هیچ وابستگی اضافی مانند بسته‌های Node.js لازم نیست. تنها چیزی که نیاز دارید یک پرونده پیکربندی YAML به همراه محتوای مارک‌داون شما است. بنابراین، شما می‌توانید به جای تنظیم ابزار، روی نوشتن محتوای با کیفیت تمرکز کنید.
+
+## اعتبار
+
+ترجمه فارسی مستندات توسط [گودرز جعفری](https://goudarzjafari.com/) انجام شده است.
+
+هگزترا بدون ابزار و الهامات زیر ساخته نمی‌شود:
+
+- [هیوگو](https://gohugo.io/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Heroicons](https://heroicons.com/)
+- [Nextra](https://nextra.vercel.app/)
+- [Next.js](https://nextjs.org/)

exampleSite/content/blog/_index.fa.md

@@ -0,0 +1,10 @@
+---
+title: "وبلاگ"
+---
+
+<div style="text-align: center; margin-top: 1em;">
+{{< hextra/hero-badge link="index.xml" >}}
+  <span>خوراک RSS</span>
+  {{< icon name="rss" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+</div>

exampleSite/content/blog/_index.zh-cn.md

@@ -1,3 +1,10 @@
 ---
 title: "博客"
----
+---
+
+<div style="text-align: center; margin-top: 1em;">
+{{< hextra/hero-badge link="index.xml" >}}
+  <span>RSS 订阅</span>
+  {{< icon name="rss" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+</div>

exampleSite/content/blog/markdown.fa.md

@@ -0,0 +1,166 @@
+---
+title: راهنمای استفاده سینتکس مارک‌داون
+date: 2024-03-03
+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
+  - name: Goudarz Jafari
+    link: https://github.com/Goudarz
+    image: https://github.com/Goudarz.png
+tags:
+  - Markdown
+  - مثال
+  - راهنمای
+excludeSearch: true
+---
+
+این مقاله نمونه‌ای از سینتکس ابتدایی مارک‌داون را آموزش می‌دهد، که می‌توانید در پرونده‌های محتوای Hugo استفاده کنید.
+<!--more-->
+
+## سینتکس ابتدایی
+
+### سرتیترها
+
+```
+# سرتیتر ۱
+## سرتیتر ۲
+### سرتیتر ۳
+#### سرتیتر ۴
+##### سرتیتر ۵
+###### سرتیتر ۶
+```
+
+## سرتیتر ۲
+### سرتیتر ۳
+#### سرتیتر ۴
+##### سرتیتر ۵
+###### سرتیتر ۶
+
+### تاکید
+
+```text
+*این متن کج خواهد بود*
+_این متن هم کج خواهد بود_
+
+**این متن توپر خواهد بود**
+__این متن هم توپر خواهد بود__
+
+_شما **می‌توانید** آنها را ترکیب کنید_
+```
+
+*این متن کج خواهد بود*
+
+_این متن هم کج خواهد بود_
+
+**این متن توپر خواهد بود**
+
+__این متن هم توپر خواهد بود__
+
+_شما **می‌توانید** آنها را ترکیب کنید_
+
+### فهرست‌ها
+
+#### مرتب نشده
+
+```
+* مورد ۱
+* مورد ۲
+  * مورد ۱الف
+  * مورد ۲ب
+```
+
+* مورد ۱
+* مورد ۲
+  * مورد ۱الف
+  * مورد ۲ب
+
+#### مرتب شده
+
+```
+1. مورد ۱
+2. مورد ۲
+3. مورد ۳
+   1. مورد ۳الف
+   2. مورد ۳ب
+```
+
+1. مورد ۱
+2. مورد ۲
+3. مورد ۳
+   1. مورد ۳الف
+   2. مورد ۳ب
+
+### عکس‌ها
+
+```markdown
+![آرم گیت‌هاب](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+```
+
+![آرم گیت‌هاب](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+
+### پیوندها
+
+```markdown
+[هیوگو](https://gohugo.io)
+```
+
+[هیوگو](https://gohugo.io)
+
+### بلوک نقل‌قول
+
+```markdown
+همانطور که نیوتن گفت:
+
+> اگر فاصله دورتری را دیده‌ام با ایستادن بر شانه‌های غول‌ها بوده است.
+```
+
+> اگر فاصله دورتری را دیده‌ام با ایستادن بر شانه‌های غول‌ها بوده است.
+
+### کد درون‌خطی
+
+```markdown
+`کد` درون‌خطی دارای `بک‌-تیک در اطراف` خود است.
+```
+
+`کد` درون‌خطی دارای `بک‌-تیک در اطراف` خود است.
+
+### بلوک‌های کد
+
+#### برجسته‌کردن سینتکس(Syntax)
+
+````markdown
+```go
+func main() {
+    fmt.Println("Hello World")
+}
+```
+````
+
+```go
+func main() {
+    fmt.Println("Hello World")
+}
+```
+
+### جدول‌ها
+
+```markdown
+| عنوان    | توضیحات |
+| --------- | ----------- |
+| سرتیتر    | عنوان       |
+| پاراگراف | متن        |
+```
+
+| عنوان    | توضیحات |
+| --------- | ----------- |
+| سرتیتر    | عنوان       |
+| پاراگراف | متن        |
+
+## منابع
+
+- [سینتکس مارک‌داون](https://www.markdownguide.org/basic-syntax/)
+- [مارک‌داون هیوگو](https://gohugo.io/content-management/formats/#markdown)

exampleSite/content/blog/markdown.md

@@ -2,8 +2,12 @@
 title: Markdown Syntax Guide
 date: 2020-01-01
 authors:
-  - name: John Doe
-    link: https://example.com/johndoe
+  - 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

exampleSite/content/docs/_index.fa.md

@@ -0,0 +1,41 @@
+---
+linkTitle: "مستندات"
+title: معرفی
+---
+
+👋 سلام! به مستندات هگزترا خوش آمدید!
+
+<!--more-->
+
+## هگزترا چیه؟
+
+هگزترا یک تم [Hugo][hugo] مدرن و سریع است که با [Tailwind CSS][tailwind-css] ساخته شده است.
+ طراحی شده برای ساخت وب‌سایت‌های زیبا برای مستندات، وبلاگ‌ها و وب‌سایت‌ها، ویژگی‌های خارج از جعبه و انعطاف‌پذیری را برای پاسخگویی نیازهای مختلف فراهم می‌کند.
+
+## ویژگی‌ها
+
+- **طراحی زیبا** - با الهام از Nextra، هگزترا از Tailwind CSS برای ارائه یک طراحی مدرن که سایت شما را برجسته می‌کند، استفاده می‌کند.
+- **طراحی واکنش‌گرا و حالت تیره** - در تمام دستگاه‌ها، از تلفن همراه، تبلت تا دسکتاپ، عالی به نظر می‌رسد. حالت تیره نیز برای انطباق با شرایط مختلف روشنایی پشتیبانی می‌شود.
+- **سریع و سبک** - طراحی شده توسط Hugo، یک ایجادکننده سایت استاتیک سریع مثل رعد و برق که در یک فایل باینری قرار گرفته است، هگزترا ردپای خود را به حداقل می‌رساند. برای استفاده از آن به جاوااسکریپت یا Node.js نیازی ندارید.
+- **جستجوی متن کامل** - جستجوی متن کاملا آفلاین داخلی طراحی شده توسط FlexSearch، بدون نیاز به پیکربندی اضافی.
+- **امکانات کامل** - برای بهتر کردن محتوای شما مارک‌داون، برجسته‌کردن سینتکس، فرمول‌های ریاضی LaTeX، نمودارها و عناصر Shortcodeها را شامل میشه. فهرست مطالب، بردکرامب، صفحه‌بندی، پیمایش نوار کناری و موارد دیگر همه به صورت خودکار تولید می‌شوند.
+- **چند زبانه و سئو آماده** - سایت‌های چند زبانه با حالت چند زبانه Hugo راحت ساخته می‌شوند. پشتیبانی خارج از جعبه برای برچسب‌های سئو، Open Graph و کارت‌های توییتر گنجانده شده است.
+
+## سوال یا بازخورد؟
+
+{{< callout emoji="❓" >}}
+  هگزترا هنوز در حال توسعه است.
+ سوال یا بازخوردی دارید؟ با خیال راحت [یک موضوع را باز کنید](https://github.com/imfing/hextra/issues)!
+{{< /callout >}}
+
+## بعدی
+
+برای شروع کردن به بخش زیر مراجعه کنید:
+
+{{< cards >}}
+  {{< card link="getting-started" title="شروع کنید" icon="document-text" subtitle="یادگیری نحوه ایجاد وب‌سایت با استفاده از هگزترا" >}}
+{{< /cards >}}
+
+[hugo]: https://gohugo.io/
+[flex-search]: https://github.com/nextapps-de/flexsearch
+[tailwind-css]: https://tailwindcss.com/

exampleSite/content/docs/_index.ja.md

@@ -0,0 +1,40 @@
+---
+linkTitle: "ドキュメンテーション"
+title: イントロダクション
+---
+
+👋 こんにちは！Hextraのドキュメンテーションへようこそ！
+
+<!--more-->
+
+## Hextraとは？
+
+Hextraは、[Tailwind CSS][tailwind-css]を使用して構築された、モダンで高速かつ機能豊富な[Hugo][hugo]テーマです。ドキュメンテーション、ブログ、ウェブサイトのための美しいウェブサイトを構築するために設計されており、さまざまな要件に対応するための機能と柔軟性を提供します。
+
+## 特徴
+
+- **美しいデザイン** - Nextraにインスパイアされ、Tailwind CSSを活用してモダンなデザインを提供し、サイトを際立たせます。
+- **レスポンシブレイアウトとダークモード** - モバイル、タブレット、デスクトップなど、すべてのデバイスで美しく表示されます。また、ダークモードもサポートされており、さまざまな照明条件に対応します。
+- **高速で軽量** - 単一のバイナリファイルに収められた超高速の静的サイトジェネレータであるHugoを採用し、Hextraはそのフットプリントを最小限に抑えています。JavaScriptやNode.jsは必要ありません。
+- **全文検索** - FlexSearchを利用したオフライン全文検索が組み込まれており、追加の設定は不要です。
+- **機能豊富** - Markdown、シンタックスハイライト、LaTeX数式、ダイアグラム、ショートコード要素など、コンテンツを強化するための機能を提供します。目次、パンくずリスト、ページネーション、サイドバーナビゲーションなどが自動生成されます。
+- **多言語対応とSEO対応** - Hugoの多言語モードを使用して、多言語サイトを簡単に作成できます。SEOタグ、Open Graph、Twitter Cardsのサポートも標準で提供されます。
+
+## 質問やフィードバックは？
+
+{{< callout emoji="❓" >}}
+  Hextraはまだ活発に開発中です。
+  質問やフィードバックがありますか？[issueを開いて](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/

exampleSite/content/docs/_index.zh-cn.md

@@ -7,29 +7,29 @@ title: 介绍
 
 <!--more-->
 
-## Hextra 是什么？
+## 什么是 Hextra？
 
-Hextra 是一款现代、快速且内置丰富功能的 [Hugo][hugo] 主题，它是用 [Tailwind CSS][tailwind-css] 构建的。该主题旨在创建美观的文档、博客和网站，提供了开箱即用的功能和灵活性以满足各种需求。
+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 卡片，也提供了开箱即用的支持。
+- **精美设计** - 灵感源自 Nextra，Hextra 利用 Tailwind CSS 提供现代设计，使您的网站脱颖而出。
+- **响应式布局与暗黑模式** - 在所有设备上都能完美呈现，从手机、平板到桌面。暗黑模式也得到支持，以适应不同的光照条件。
+- **快速且轻量** - 由 Hugo 驱动，这是一个闪电般快速的静态网站生成器，仅需一个二进制文件，Hextra 保持其占用空间最小。无需 JavaScript 或 Node.js 即可使用。
+- **全文搜索** - 内置离线全文搜索，由 FlexSearch 提供支持，无需额外配置。
+- **功能齐全** - Markdown、语法高亮、LaTeX 数学公式、图表和 Shortcodes 元素，丰富您的内容。目录、面包屑导航、分页、侧边栏导航等均自动生成。
+- **多语言与 SEO 就绪** - 通过 Hugo 的多语言模式轻松创建多语言网站。开箱即用支持 SEO 标签、Open Graph 和 Twitter Cards。
 
 ## 有问题或反馈？
 
 {{< callout emoji="❓" >}}
   Hextra 仍在积极开发中。
-  有问题或反馈？请随时[提出问题](https://github.com/imfing/hextra/issues)！
+  有问题或反馈？欢迎[提交问题](https://github.com/imfing/hextra/issues)！
 {{< /callout >}}
 
-## 接下来
+## 下一步
 
-直接进入以下部分开始：
+立即深入以下部分，开始使用：
 
 {{< cards >}}
   {{< card link="getting-started" title="入门指南" icon="document-text" subtitle="学习如何使用 Hextra 创建网站" >}}

exampleSite/content/docs/advanced/_index.fa.md

@@ -0,0 +1,16 @@
+---
+linkTitle: پیشرفته
+title: موضوعات پیشرفته
+prev: /docs/guide/shortcodes/steps
+next: /docs/advanced/multi-language
+---
+
+این بخش برخی از موضوعات پیشرفته تم را پوشش می‌دهد.
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="multi-language" title="چند زبانه" icon="translate" >}}
+  {{< card link="customization" title="سفارشی‌سازی" icon="pencil" >}}
+  {{< card link="comments" title="سیستم نظردهی" icon="chat-alt" >}}
+{{< /cards >}}

exampleSite/content/docs/advanced/_index.ja.md

@@ -0,0 +1,16 @@
+---
+linkTitle: 上級者向け
+title: 上級者向けトピック
+prev: /docs/guide/shortcodes/tabs
+next: /docs/advanced/multi-language
+---
+
+このセクションでは、テーマの上級者向けトピックをカバーします。
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="multi-language" title="多言語対応" icon="translate" >}}
+  {{< card link="customization" title="カスタマイズ" icon="pencil" >}}
+  {{< card link="comments" title="コメントシステム" icon="chat-alt" >}}
+{{< /cards >}}

exampleSite/content/docs/advanced/_index.zh-cn.md

@@ -1,15 +1,16 @@
 ---
-linkTitle: 高级配置
-title: 高级配置
+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 >}}
+  {{< card link="customization" title="自定义" icon="pencil" >}}
+  {{< card link="comments" title="评论系统" icon="chat-alt" >}}
+{{< /cards >}}

exampleSite/content/docs/advanced/comments.fa.md

@@ -0,0 +1,39 @@
+---
+title: سیستم نظردهی
+linkTitle: نظردهی
+---
+
+هگزترا از افزودن سیستم نظردهی به سایت شما پشتیبانی می‌کند.
+ در حال حاضر [giscus](https://giscus.app/) پشتیبانی می‌شود.
+
+<!--more-->
+
+## giscus
+
+[giscus](https://giscus.app/) یک سیستم نظردهی است که توسط [GitHub Discussions](https://docs.github.com/en/discussions) طراحی شده است. رایگان و متن باز است.
+
+برای فعال کردن 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/) ساخت. جزئیات بیشتر را نیز می‌توانید در آنجا ببینید.
+
+دیدگاه‌ها را می‌توانید برای یک صفحه خاص در بالای همان صفحه فعال یا غیرفعال کرد:
+
+```yaml {filename="content/docs/about.md"}
+---
+title: درباره ما
+comments: true
+---
+```

exampleSite/content/docs/advanced/comments.ja.md

@@ -0,0 +1,39 @@
+---
+title: コメントシステム
+linkTitle: コメント
+---
+
+Hextraは、サイトにコメントシステムを追加することをサポートしています。
+現在、[giscus](https://giscus.app/)がサポートされています。
+
+<!--more-->
+
+## giscus
+
+[giscus](https://giscus.app/)は、[GitHub Discussions](https://docs.github.com/ja/discussions)を利用したコメントシステムです。無料でオープンソースです。
+
+giscusを有効にするには、サイトの設定ファイルに以下を追加する必要があります：
+
+```yaml {filename="hugo.yaml"}
+params:
+  comments:
+    enable: false
+    type: giscus
+
+    giscus:
+      repo: <リポジトリ>
+      repoId: <リポジトリID>
+      category: <カテゴリ>
+      categoryId: <カテゴリID>
+```
+
+giscusの設定は、[giscus.app](https://giscus.app/)のウェブサイトから構築できます。詳細もそこで確認できます。
+
+特定のページでコメントを有効または無効にするには、ページのフロントマターに以下を追加します：
+
+```yaml {filename="content/docs/about.md"}
+---
+title: について
+comments: true
+---
+```

exampleSite/content/docs/advanced/comments.zh-cn.md

@@ -0,0 +1,39 @@
+---
+title: 评论系统
+linkTitle: 评论
+---
+
+Hextra 支持为您的网站添加评论系统。
+目前支持 [giscus](https://giscus.app/)。
+
+<!--more-->
+
+## giscus
+
+[giscus](https://giscus.app/) 是一个由 [GitHub Discussions](https://docs.github.com/en/discussions) 提供支持的评论系统。它是免费且开源的。
+
+要启用 giscus，您需要在网站配置文件中添加以下内容：
+
+```yaml {filename="hugo.yaml"}
+params:
+  comments:
+    enable: false
+    type: giscus
+
+    giscus:
+      repo: <仓库>
+      repoId: <仓库 ID>
+      category: <分类>
+      categoryId: <分类 ID>
+```
+
+giscus 的配置可以从 [giscus.app](https://giscus.app/) 网站生成。更多详细信息也可以在那里找到。
+
+可以在页面的 front matter 中为特定页面启用或禁用评论：
+
+```yaml {filename="content/docs/about.md"}
+---
+title: 关于
+comments: true
+---
+```

exampleSite/content/docs/advanced/customization.fa.md

@@ -0,0 +1,73 @@
+---
+title: سفارشی‌سازی هگزترا
+linkTitle: سفارشی‌سازی
+---
+
+هگزترا برخی از گزینه‌های سفارشی‌سازی پیش‌فرض را در پرونده `hugo.yaml` برای پیکربندی تم ارائه می‌کند.
+ این صفحه گزینه‌های موجود و نحوه سفارشی‌سازی بیشتر تم را توضیح می‌دهد.
+
+<!--more-->
+
+## CSS سفارشی
+
+برای افزودن CSS سفارشی، باید یک پرونده `assets/css/custom.css` در سایت خود ایجاد کنیم. هگزترا به طور خودکار این پرونده را بارگیری خواهد کرد.
+
+### خانواده فونت
+
+خانواده فونت برای محتوا را می‌توانید با استفاده از این سفارشی کنید:
+
+```css {filename="assets/css/custom.css"}
+.content {
+  font-family: "Times New Roman", Times, serif;
+}
+```
+
+### عنصر کد درون‌خطی
+
+رنگ متن ترکیب شده با `متن دیگر` را می‌توانید با موارد زیر سفارشی کرد:
+
+```css {filename="assets/css/custom.css"}
+.content code:not(.code-block code) {
+  color: #c97c2e;
+}
+```
+
+### رنگ اصلی
+
+رنگ اصلی تم را می‌توانید با تنظیم متغیرهای `--primary-hue` و `--primary-saturation` سفارشی کرد:
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --primary-hue: 100deg;
+  --primary-saturation: 90%;
+}
+```
+
+### برجسته‌کردن سینتکس
+
+فهرست تم‌های برجسته‌کردن سینتکس در دسترس [گالری Chroma Styles](https://xyproto.github.io/splash/docs/all.html) موجود است. شیوه‌نامه را می‌توانید با استفاده از دستور زیر تولید کرد:
+
+```shell
+hugo gen chromastyles --style=github
+```
+
+برای نادیده گرفتن طرح زمینه برجسته‌کردن سینتکس پیش‌فرض، می‌توانید استایل‌های تولید شده را به پرونده CSS سفارشی اضافه کنیم.
+
+## اسکریپت‌های سفارشی
+
+با افزودن پرونده زیر می‌توانید اسکریپت‌های سفارشی را برای هر صفحه به انتهای اون اضافه کنید:
+
+```
+layouts/partials/custom/head-end.html
+```
+
+## طرح‌بندی‌های سفارشی
+
+با ایجاد پرونده‌ای با همین نام در دایرکتوری `layouts` سایت خود، می‌توانید طرح‌های تم را نادیده بگیرید.
+ به عنوان مثال، برای لغو طرح‌بندی `single.html` برای مستندات، یک پرونده`layouts/docs/single.html` در سایت خود ایجاد کنید.
+
+برای اطلاعات بیشتر، به [Templateهای هیوگو](https://gohugo.io/templates/) مراجعه کنید.
+
+## سفارشی‌سازی بیشتر
+
+چیزی را که دنبالش بودید پیدا نکردید؟ با خیال راحت [بحثی را باز کنید](https://github.com/imfing/hextra/discussions) یا به موضوع کمک کنید!

exampleSite/content/docs/advanced/customization.ja.md

@@ -0,0 +1,211 @@
+---
+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;
+}
+```
+
+### インラインコード要素
+
+`other text`と混在するテキストの色は、以下のようにカスタマイズできます：
+
+```css {filename="assets/css/custom.css"}
+.content code:not(.code-block code) {
+  color: #c97c2e;
+}
+```
+
+### プライマリカラー
+
+テーマのプライマリカラーは、`--primary-hue`、`--primary-saturation`、`--primary-lightness`変数を設定することでカスタマイズできます：
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --primary-hue: 100deg;
+  --primary-saturation: 90%;
+  --primary-lightness: 50%;
+}
+```
+
+### テーマのさらなるカスタマイズ
+
+テーマは、公開されているCSSクラスを介してデフォルトのスタイルをオーバーライドすることでさらにカスタマイズできます。フッター要素をカスタマイズする例：
+
+```css {filename="assets/css/custom.css"}
+.hextra-footer {
+  /* フッター要素に適用されるスタイル */
+}
+
+.hextra-footer:is(html[class~="dark"] *) {
+  /* ダークモードでのフッター要素に適用されるスタイル */
+}
+```
+
+以下のクラスを使用して、テーマのさまざまな部分をカスタマイズできます。
+
+#### 一般
+
+- `hextra-scrollbar` - スクロールバー要素
+- `content` - ページコンテンツコンテナ
+
+#### ショートコード
+
+##### バッジ
+
+- `hextra-badge` - バッジ要素
+
+##### カード
+
+- `hextra-card` - カード要素
+- `hextra-card-image` - カード画像要素
+- `hextra-card-icon` - カードアイコン要素
+- `hextra-card-subtitle` - カードサブタイトル要素
+
+##### カードグリッド
+
+- `hextra-cards` - カードグリッドコンテナ
+
+##### Jupyter Notebook
+
+- `hextra-jupyter-code-cell` - Jupyterコードセルコンテナ
+- `hextra-jupyter-code-cell-outputs-container` - Jupyterコードセル出力コンテナ
+- `hextra-jupyter-code-cell-outputs` - Jupyterコードセル出力div要素
+
+##### PDF
+
+- `hextra-pdf` - PDFコンテナ要素
+
+##### ステップ
+
+- `steps` - ステップコンテナ
+
+##### タブ
+
+- `hextra-tabs-panel` - タブパネルコンテナ
+- `hextra-tabs-toggle` - タブトグルボタン
+
+##### ファイルツリー
+
+- `hextra-filetree` - ファイルツリーコンテナ
+
+##### フォルダ
+
+- `hextra-filetree-folder` - ファイルツリーフォルダコンテナ
+
+#### ナビゲーションバー
+
+- `nav-container` - ナビゲーションバーコンテナ
+- `nav-container-blur` - ナビゲーションバーコンテナのぼかし要素
+- `hamburger-menu` - ハンバーガーメニューボタン
+
+#### フッター
+
+- `hextra-footer` - フッター要素
+- `hextra-custom-footer` - カスタムフッターセクションコンテナ
+
+#### 検索
+
+- `search-wrapper` - 検索ラッパーコンテナ
+- `search-input` - 検索入力要素
+- `search-results` - 検索結果リストコンテナ
+
+#### 目次
+
+- `hextra-toc` - 目次コンテナ
+
+#### サイドバー
+
+- `mobile-menu-overlay` - モバイルメニューのオーバーレイ要素
+- `sidebar-container` - サイドバーコンテナ
+- `sidebar-active-item` - サイドバーのアクティブアイテム
+
+#### 言語スイッチャー
+
+- `language-switcher` - 言語スイッチャーボタン
+- `language-options` - 言語オプションコンテナ
+
+#### テーマトグル
+
+- `theme-toggle` - テーマトグルボタン
+
+#### コードコピーボタン
+
+- `hextra-code-copy-btn-container` - コードコピーボタンコンテナ
+- `hextra-code-copy-btn` - コードコピーボタン
+
+#### コードブロック
+
+- `hextra-code-block` - コードブロックコンテナ
+
+#### フィーチャーカード
+
+- `hextra-feature-card` - フィーチャーカードリンク要素
+
+#### フィーチャーグリッド
+
+- `hextra-feature-grid` - フィーチャーグリッドコンテナ
+
+#### パンくずリスト
+
+パンくずリスト用の特定のクラスはありません。
+
+### シンタックスハイライト
+
+利用可能なシンタックスハイライトテーマのリストは、[Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html)で確認できます。スタイルシートは以下のコマンドで生成できます：
+
+```shell
+hugo gen chromastyles --style=github
+```
+
+デフォルトのシンタックスハイライトテーマをオーバーライドするには、生成されたスタイルをカスタムCSSファイルに追加します。
+
+## カスタムスクリプト
+
+すべてのページのheadの最後にカスタムスクリプトを追加するには、以下のファイルを追加します：
+
+```
+layouts/partials/custom/head-end.html
+```
+
+## フッターのカスタムセクション
+
+フッターに追加のセクションを追加するには、サイト内に`layouts/partials/custom/footer.html`ファイルを作成します。
+
+```html {filename="layouts/partials/custom/footer.html"}
+<!-- ここにフッター要素を追加 -->
+```
+
+追加されたセクションは、フッターの著作権セクションの前に追加されます。
+[HTML](https://developer.mozilla.org/ja/docs/Web/HTML)と[Hugoテンプレート構文](https://gohugo.io/templates/)を使用して、独自のコンテンツを追加できます。
+
+フッターセクションで利用可能なHugo変数は、`.switchesVisible`と`.copyrightVisible`です。
+
+## カスタムレイアウト
+
+テーマのレイアウトは、サイトの`layouts`ディレクトリ内に同じ名前のファイルを作成することでオーバーライドできます。
+例えば、ドキュメント用の`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。
+
+詳細については、[Hugoテンプレート][hugo-template-docs]を参照してください。
+
+## さらなるカスタマイズ
+
+探しているものが見つかりませんでしたか？[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマに貢献してください！
+
+[hugo-template-docs]: https://gohugo.io/templates/

exampleSite/content/docs/advanced/customization.md

@@ -34,21 +34,144 @@ The color of text mixed with `other text` can customized with:
 
 ### Primary Color
 
-The primary color of the theme can be customized by setting the `--primary-hue` and `--primary-saturation` variables:
+The primary color of the theme can be customized by setting the `--primary-hue`, `--primary-saturation` and `--primary-lightness` variables:
 
 ```css {filename="assets/css/custom.css"}
 :root {
   --primary-hue: 100deg;
   --primary-saturation: 90%;
+  --primary-lightness: 50%;
 }
 ```
 
+### Further Theme Customization
+
+The theme can be further customized by overriding the default styles via the exposed css classes. An example for customizing the footer element:
+
+```css {filename="assets/css/custom.css"}
+.hextra-footer {
+  /* Styles will be applied to the footer element */
+}
+
+.hextra-footer:is(html[class~="dark"] *) {
+  /* Styles will be applied to the footer element in dark mode */
+}
+```
+
+The following classes can be used to customize various parts of the theme.
+
+#### General
+
+- `hextra-scrollbar` - The scrollbar element
+- `content` - Page content container
+
+#### Shortcodes
+
+##### Badge
+
+- `hextra-badge` - The badge element
+
+##### Card
+
+- `hextra-card` - The card element
+- `hextra-card-image` - The card image element
+- `hextra-card-icon` - The card icon element
+- `hextra-card-subtitle` - The card subtitle element
+
+##### Cards
+
+- `hextra-cards` - The cards grid container
+
+##### Jupyter Notebook
+
+- `hextra-jupyter-code-cell` - The Jupyter code cell container
+- `hextra-jupyter-code-cell-outputs-container` - The Jupyter code cell outputs container
+- `hextra-jupyter-code-cell-outputs` - The Jupyter code cell output div element
+
+##### PDF
+
+- `hextra-pdf` - The PDF container element
+
+##### Steps
+
+- `steps` - The steps container
+
+##### Tabs
+
+- `hextra-tabs-panel` - The tabs panel container
+- `hextra-tabs-toggle` - The tabs toggle button
+
+##### Filetree
+
+- `hextra-filetree` - The filetree container
+
+##### Folder
+
+- `hextra-filetree-folder` - The filetree folder container
+
+#### Navbar
+
+- `nav-container` - The navbar container
+- `nav-container-blur` - The navbar container in blur element
+- `hamburger-menu` - The hamburger menu button
+
+#### Footer
+
+- `hextra-footer` - The footer element
+- `hextra-custom-footer` - The custom footer section container
+
+#### Search
+
+- `search-wrapper` - The search wrapper container
+- `search-input` - The search input element
+- `search-results` - The search results list container
+
+#### Table of Contents
+
+- `hextra-toc` - The table of contents container
+
+#### Sidebar
+
+- `mobile-menu-overlay` - The overlay element for the mobile menu
+- `sidebar-container` - The sidebar container
+- `sidebar-active-item` - The active item in the sidebar
+
+#### Language Switcher
+
+- `language-switcher` - The language switcher button
+- `language-options` - The language options container
+
+#### Theme Toggle
+
+- `theme-toggle` - The theme toggle button
+
+#### Cody Copy Button
+
+- `hextra-code-copy-btn-container` - The code copy button container
+- `hextra-code-copy-btn` - The code copy button
+
+#### Code Block
+
+- `hextra-code-block` - The code block container
+
+#### Feature Card
+
+- `hextra-feature-card` - The feature card link element
+
+#### Feature Grid
+
+- `hextra-feature-grid` - The feature grid container
+
+#### Breadcrumbs
+
+No specific class is available for breadcrumbs.
+
 ### 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:
 
-```bash
-$ hugo gen chromastyles --style=github
+```shell
+hugo gen chromastyles --style=github
 ```
 
 To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file.
@@ -61,13 +184,28 @@ You may add custom scripts to the end of the head for every page by adding the f
 layouts/partials/custom/head-end.html
 ```
 
+## Custom Extra Section in Footer
+
+You can add extra section in the footer by creating a file `layouts/partials/custom/footer.html` in your site.
+
+```html {filename="layouts/partials/custom/footer.html"}
+<!-- Your footer element here -->
+```
+
+The added section will be added before the copyright section in the footer.
+You can use [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [Hugo template syntax](https://gohugo.io/templates/) to add your own content.
+
+Hugo variables available in the footer section are: `.switchesVisible` and `.displayCopyright`.
+
 ## 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/).
+For further information, refer to the [Hugo Templates][hugo-template-docs].
 
 ## Further Customization
 
-Didn't find what you were looking for? Feel free to [open an issue](https://github.com/imfing/hextra/issues) or make a contribution to the theme!
+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!
+
+[hugo-template-docs]: https://gohugo.io/templates/

exampleSite/content/docs/advanced/customization.zh-cn.md

@@ -3,14 +3,18 @@ title: 自定义 Hextra
 linkTitle: 自定义
 ---
 
-Hextra 在 `hugo.yaml` 中提供了一些自定义选项来配置主题。
-本页介绍了可用选项以及如何进一步自定义主题。
+Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，用于配置主题。
+本页描述了可用的选项以及如何进一步自定义主题。
 
 <!--more-->
 
 ## 自定义 CSS
 
-要添加自定义 CSS，我们需要在站点中创建一个文件 `assets/css/custom.css`。Hextra 将自动加载该文件，比如自定义字体：
+要添加自定义 CSS，我们需要在站点中创建一个文件 `assets/css/custom.css`。Hextra 会自动加载此文件。
+
+### 字体
+
+内容的字体可以通过以下方式自定义：
 
 ```css {filename="assets/css/custom.css"}
 .content {
@@ -18,41 +22,190 @@ Hextra 在 `hugo.yaml` 中提供了一些自定义选项来配置主题。
 }
 ```
 
-### 主题色
+### 内联代码元素
 
-主题色可以通过设置 `--primary-hue` 变量来自定义：
+与 `其他文本` 混合的文本颜色可以通过以下方式自定义：
+
+```css {filename="assets/css/custom.css"}
+.content code:not(.code-block code) {
+  color: #c97c2e;
+}
+```
+
+### 主色调
+
+主题的主色调可以通过设置 `--primary-hue`、`--primary-saturation` 和 `--primary-lightness` 变量来自定义：
 
 ```css {filename="assets/css/custom.css"}
 :root {
   --primary-hue: 100deg;
+  --primary-saturation: 90%;
+  --primary-lightness: 50%;
 }
 ```
 
-### 代码高亮
+### 进一步的主题自定义
 
-代码高亮风格的详细信息可在 [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html) 中找到。 可以使用以下命令生成样式表：
+可以通过覆盖暴露的 CSS 类来进一步自定义主题。以下是一个自定义页脚元素的示例：
 
-```bash
-$ hugo gen chromastyles --style=github
+```css {filename="assets/css/custom.css"}
+.hextra-footer {
+  /* 样式将应用于页脚元素 */
+}
+
+.hextra-footer:is(html[class~="dark"] *) {
+  /* 样式将应用于暗模式下的页脚元素 */
+}
 ```
 
-可将生成的样式添加到自定义 CSS 文件中以覆盖默认代码高亮样式。
+以下类可用于自定义主题的各个部分。
 
-## 自定义 Script
+#### 通用
 
-你可以添加以下文件以自定义 `script` 添加到每页的 `head` 最后：
+- `hextra-scrollbar` - 滚动条元素
+- `content` - 页面内容容器
+
+#### 短代码
+
+##### 徽章
+
+- `hextra-badge` - 徽章元素
+
+##### 卡片
+
+- `hextra-card` - 卡片元素
+- `hextra-card-image` - 卡片图片元素
+- `hextra-card-icon` - 卡片图标元素
+- `hextra-card-subtitle` - 卡片副标题元素
+
+##### 卡片组
+
+- `hextra-cards` - 卡片网格容器
+
+##### Jupyter Notebook
+
+- `hextra-jupyter-code-cell` - Jupyter 代码单元容器
+- `hextra-jupyter-code-cell-outputs-container` - Jupyter 代码单元输出容器
+- `hextra-jupyter-code-cell-outputs` - Jupyter 代码单元输出 div 元素
+
+##### PDF
+
+- `hextra-pdf` - PDF 容器元素
+
+##### 步骤
+
+- `steps` - 步骤容器
+
+##### 标签页
+
+- `hextra-tabs-panel` - 标签页面板容器
+- `hextra-tabs-toggle` - 标签页切换按钮
+
+##### 文件树
+
+- `hextra-filetree` - 文件树容器
+
+##### 文件夹
+
+- `hextra-filetree-folder` - 文件树文件夹容器
+
+#### 导航栏
+
+- `nav-container` - 导航栏容器
+- `nav-container-blur` - 导航栏模糊元素
+- `hamburger-menu` - 汉堡菜单按钮
+
+#### 页脚
+
+- `hextra-footer` - 页脚元素
+- `hextra-custom-footer` - 自定义页脚部分容器
+
+#### 搜索
+
+- `search-wrapper` - 搜索包装容器
+- `search-input` - 搜索输入元素
+- `search-results` - 搜索结果列表容器
+
+#### 目录
+
+- `hextra-toc` - 目录容器
+
+#### 侧边栏
+
+- `mobile-menu-overlay` - 移动菜单的覆盖元素
+- `sidebar-container` - 侧边栏容器
+- `sidebar-active-item` - 侧边栏中的活动项
+
+#### 语言切换器
+
+- `language-switcher` - 语言切换按钮
+- `language-options` - 语言选项容器
+
+#### 主题切换
+
+- `theme-toggle` - 主题切换按钮
+
+#### 代码复制按钮
+
+- `hextra-code-copy-btn-container` - 代码复制按钮容器
+- `hextra-code-copy-btn` - 代码复制按钮
+
+#### 代码块
+
+- `hextra-code-block` - 代码块容器
+
+#### 功能卡片
+
+- `hextra-feature-card` - 功能卡片链接元素
+
+#### 功能网格
+
+- `hextra-feature-grid` - 功能网格容器
+
+#### 面包屑导航
+
+面包屑导航没有特定的类。
+
+### 语法高亮
+
+可用的语法高亮主题列表可在 [Chroma 样式库](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表：
+
+```shell
+hugo gen chromastyles --style=github
+```
+
+要覆盖默认的语法高亮主题，可以将生成的样式添加到自定义 CSS 文件中。
+
+## 自定义脚本
+
+你可以通过添加以下文件在每个页面的 head 末尾添加自定义脚本：
 
 ```
 layouts/partials/custom/head-end.html
 ```
 
+## 自定义页脚额外部分
+
+你可以通过在站点中创建文件 `layouts/partials/custom/footer.html` 来在页脚中添加额外部分。
+
+```html {filename="layouts/partials/custom/footer.html"}
+<!-- 你的页脚元素在这里 -->
+```
+
+添加的部分将出现在页脚的版权部分之前。
+你可以使用 [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 和 [Hugo 模板语法](https://gohugo.io/templates/) 来添加自己的内容。
+
+页脚部分可用的 Hugo 变量有：`.switchesVisible` 和 `.copyrightVisible`。
+
 ## 自定义布局
 
-可以在站点的 `layouts` 目录中创建同名文件来覆盖主题的默认布局。
-例如，要覆盖文档的 `single.html` 布局，在站点中创建文件 `layouts/docs/single.html`。
+可以通过在站点的 `layouts` 目录中创建同名文件来覆盖主题的布局。
+例如，要覆盖文档的 `single.html` 布局，可以在站点中创建文件 `layouts/docs/single.html`。
 
-如需或许更多信息，转至 [Hugo Templates](https://gohugo.io/templates/)。
+更多信息，请参阅 [Hugo 模板文档][hugo-template-docs]。
 
-## 进一步定制 Hextra
+## 进一步自定义
 
-没有找到你想修改的东西？在 GitHub 上[创建 Issues](https://github.com/imfing/hextra/issues) 或为 Hextra 贡献你的智慧！
+没有找到你想要的？欢迎 [发起讨论](https://github.com/imfing/hextra/discussions) 或为主题做出贡献！
+
+[hugo-template-docs]: https://gohugo.io/templates/

exampleSite/content/docs/advanced/multi-language.fa.md

@@ -0,0 +1,83 @@
+---
+title: "چند زبانه"
+weight: 1
+prev: /docs/advanced
+---
+
+هگزترا از ایجاد سایت با چندین زبان با استفاده از [حالت چند زبانه](https://gohugo.io/content-management/multilingual/) Hugo پشتیبانی می‌کند.
+
+<!--more-->
+
+## فعال‌سازی چند زبانه
+
+برای اینکه سایت ما چند زبانه شود، باید زبان‌های پشتیبانی شده را به Hugo بگوییم. باید به پرونده پیکربندی سایت اضافه کنیم:
+
+```yaml {filename="hugo.yaml"}
+defaultContentLanguage: en
+languages:
+  en:
+    languageName: English
+    weight: 1
+  fa:
+    languageName: فارسی
+    weight: 2
+  ja:
+    languageName: 日本語
+    weight: 3
+```
+
+## مدیریت ترجمه‌ها بر اساس نام پرونده
+
+Hugo از مدیریت ترجمه با نام پرونده پشتیبانی می‌کند. به عنوان مثال، اگر یک پرونده `content/docs/_index.md` به زبان انگلیسی داشته باشیم، می توانیم یک پرونده `content/docs/_index.fa.md` برای ترجمه فارسی ایجاد کنیم.
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="_index.fa.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/fa.yaml"}
+documentation: مستندات
+blog: وبلاگ
+```
+
+## ترجمه رشته‌ها
+
+برای ترجمه رشته‌ها در مکان‌های دیگر، باید ترجمه را به پرونده i18n مربوطه اضافه کنیم:
+
+```yaml {filename="i18n/fa.yaml"}
+readMore: ادامه مطلب
+```
+
+فهرستی از رشته‌های استفاده شده در تم را می‌توان در پرونده `i18n/en.yaml` پیدا کرد.
+
+## بیشتر بخوانید
+
+- [حالت چند زبانه هیوگو](https://gohugo.io/content-management/multilingual/)
+- [هیوگو چند زبانه قسمت ۱: ترجمه محتوا](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
+- [هیوگو چند زبانه قسمت ۲: بومی‌سازی رشته‌ها](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)

exampleSite/content/docs/advanced/multi-language.ja.md

@@ -0,0 +1,83 @@
+---
+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"}
+documentation: Documentation
+blog: Blog
+```
+
+## 文字列の翻訳
+
+他の場所の文字列を翻訳するには、対応するi18nファイルに翻訳を追加する必要があります：
+
+```yaml {filename="i18n/fr.yaml"}
+readMore: Lire la suite
+```
+
+テーマで使用されている文字列のリストは、`i18n/en.yaml` ファイルにあります。
+
+## さらに詳しく
+
+- [Hugo 多言語モード](https://gohugo.io/content-management/multilingual/)
+- [Hugo 多言語 Part 1: コンテンツ翻訳](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
+- [Hugo 多言語 Part 2: 文字列のローカライズ](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)

exampleSite/content/docs/advanced/multi-language.zh-cn.md

@@ -1,16 +1,16 @@
 ---
-title: "多语言"
+title: "多语言支持"
 weight: 1
 prev: /docs/advanced
 ---
 
-Hextra 支持使用 Hugo 的[多语言模式](https://gohugo.io/content-management/multilingual/) 创建多语言的网站。
+Hextra 支持使用 Hugo 的[多语言模式](https://gohugo.io/content-management/multilingual/)创建多语言网站。
 
 <!--more-->
 
-## 启用多语言支持
+## 启用多语言
 
-为了使我们的网站支持多语言，我们需要告诉 Hugo 需要支持的语言。 在站点配置文件中添加：
+要使我们的网站支持多语言，我们需要告诉 Hugo 支持的语言。我们需要在站点配置文件中添加：
 
 ```yaml {filename="hugo.yaml"}
 defaultContentLanguage: en
@@ -26,9 +26,9 @@ languages:
     weight: 3
 ```
 
-## 按文件名管理翻译
+## 通过文件名管理翻译
 
-Hugo 支持按文件名管理翻译。例如，如果我们有一个英文文件 `content/docs/_index.md`，我们可以创建一个翻译为法语的文件 `content/docs/_index.fr.md`。
+Hugo 支持通过文件名管理翻译。例如，如果我们有一个英文文件 `content/docs/_index.md`，我们可以创建一个文件 `content/docs/_index.fr.md` 作为法语翻译。
 
 {{< filetree/container >}}
   {{< filetree/folder name="content" >}}
@@ -40,7 +40,7 @@ Hugo 支持按文件名管理翻译。例如，如果我们有一个英文文件
   {{< /filetree/folder >}}
 {{< /filetree/container >}}
 
-注意：Hugo 还支持[按内容目录管理翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)。
+注意：Hugo 还支持[通过内容目录进行翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)。
 
 ## 翻译菜单项
 
@@ -59,16 +59,25 @@ menu:
       weight: 2
 ```
 
+并在相应的 i18n 文件中进行翻译：
+
+```yaml {filename="i18n/fr.yaml"}
+documentation: Documentation
+blog: Blog
+```
+
 ## 翻译字符串
 
-要翻译其他地方的字符串，我们需要将翻译添加到相应的 `i18n` 文件中：
+要翻译其他地方的字符串，我们需要将翻译添加到相应的 i18n 文件中：
 
 ```yaml {filename="i18n/fr.yaml"}
 readMore: Lire la suite
 ```
 
-## 更多参考
+主题中使用的字符串列表可以在 `i18n/en.yaml` 文件中找到。
 
-- [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/)
+## 了解更多
+
+- [Hugo 多语言模式](https://gohugo.io/content-management/multilingual/)
+- [Hugo 多语言第一部分：内容翻译](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
+- [Hugo 多语言第二部分：字符串本地化](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)

exampleSite/content/docs/getting-started.fa.md

@@ -0,0 +1,190 @@
+---
+title: شروع کنید
+weight: 1
+next: /docs/guide
+prev: /docs
+---
+
+## شروع سریع از طریق Template
+
+{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
+
+با استفاده از 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/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) ارائه کرده‌ایم که می‌تواند به ساخت و به‌کاراندازی خودکار سایت شما در گیت‌هاب Pages، برای میزبانی رایگان کمک کند. برای گزینه‌های بیشتر، [به‌کاراندازی سایت](../guide/deploy-site) را بررسی کنید.
+
+[🌐 نسخه‌ي نمایشی ↖](https://imfing.github.io/hextra-starter-template/)
+
+## شروع به عنوان پروژه جدید
+
+دو راه اصلی برای اضافه کردن تم هگزترا به پروژه Hugo وجود دارد:
+
+1. **ماژول‌های Hugo (توصیه می‌شود)**: ساده‌ترین و توصیه شده‌ترین. [ماژول‌های Hugo](https://gohugo.io/hugo-modules/) به شما امکان می‌دهند تم را مستقیما از منبع آنلاین آن وارد کنید. تم به صورت خودکار دانلود و توسط Hugo مدیریت می‌شود.
+2. **ساب‌ماژول گیت**: در عوض، هگزترا را به عنوان یک [ساب‌ماژول گیت](https://git-scm.com/book/en/v2/Git-Tools-Submodules) اضافه کنید. تم توسط گیت دانلود شده و در پوشه `themes` پروژه شما ذخیره می‌شود.
+
+### هگزترا را به عنوان ماژول Hugo راه‌اندازی کنید
+
+#### پیش‌نیازها
+
+قبل از شروع، باید این نرم‌افزارها را نصب کنید:
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+- [Go](https://go.dev/)
+
+#### مراحل
+
+{{% steps %}}
+
+### راه‌انداختن یک سایت جدید Hugo
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### پیکربندی تم هگزترا از طریق ‌ماژول
+
+```shell
+# مقداردهی اولیه ماژول هیوگو
+cd my-site
+hugo mod init github.com/username/my-site
+
+# افزودن تم هگزترا
+hugo mod get github.com/imfing/hextra
+```
+
+با افزودن موارد زیر، `hugo.yaml` را برای استفاده از تم هگزترا پیکربندی کنید:
+
+```yaml
+module:
+  imports:
+    - path: github.com/imfing/hextra
+```
+
+### اولین صفحه‌های محتوای خود را ایجاد کنید
+
+ایجاد صفحه محتوای جدید برای صفحه اصلی و صفحه مستندات:
+
+```shell
+hugo new content/_index.md
+hugo new content/docs/_index.md
+```
+
+### پیش‌نمایش سایت به صورت محلی
+
+```shell
+hugo server --buildDrafts --disableFastRender
+```
+
+پیش‌نمایش سایت جدید شما در `http://localhost:1313/` در دسترس است.
+
+{{% /steps %}}
+
+
+{{% details title="چگونه تم را به‌روز کنیم؟" %}}
+
+برای به‌روزرسانی همه ماژول‌های Hugo در پروژه خود به آخرین نسخه‌هایشان، دستور زیر را اجرا کنید:
+
+```shell
+hugo mod get -u
+```
+
+برای به‌روزرسانی هگزترا به [آخرین نسخه منتشر شده](https://github.com/imfing/hextra/releases)، دستور زیر را اجرا کنید:
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
+برای جزئیات بیشتر به [ماژول‌های هیوگو](https://gohugo.io/hugo-modules/use-modules/#update-all-modules) مراجعه کنید.
+
+{{% /details %}}
+
+### هگزترا را به عنوان ساب‌ماژول Git راه‌اندازی کنید
+
+#### پیش‌نیازها
+
+قبل از شروع، باید این نرم‌افزارها را نصب کنید:
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### مراحل
+
+{{% steps %}}
+
+### راه‌انداختن یک سایت جدید Hugo
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### افزودن تم هگزترا به عنوان یک ساب‌ماژول Git
+
+```shell
+git submodule add https://github.com/imfing/hextra.git themes/hextra
+```
+
+با افزودن موارد زیر، `hugo.yaml` را برای استفاده از تم هگزترا پیکربندی کنید:
+
+```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، از اجرای دستور زیر قبل از اجرای دستور `hugo` مطمئن شوید و ضروری است.
+
+```shell
+git submodule update --init
+```
+
+اجرا نشدن این دستور باعث می‌شود که پوشه تم با پرونده‌های تم هگزترا پر نشود و منجر به خرابی ساخت شود.
+
+
+{{% details title="چگونه تم را به‌روز کنیم؟" %}}
+
+برای به‌روزرسانی تمام ساب‌ماژول‌های در مخزن خود به آخرین commitها که موجود هست، دستور زیر را اجرا کنید:
+
+```shell
+git submodule update --remote
+```
+
+برای به‌روزرسانی هگزترا به آخرین commit، دستور زیر را اجرا کنید:
+
+```shell
+git submodule update --remote themes/hextra
+```
+
+برای جزئیات بیشتر به [ساب‌ماژول‌های Git](https://git-scm.com/book/en/v2/Git-Tools-Submodules) مراجعه کنید.
+
+{{% /details %}}
+
+## بعدی
+
+برای شروع اضافه کردن مطالب بیشتر، بخش‌های زیر را کاوش کنید:
+
+{{< cards >}}
+  {{< card link="../guide/organize-files" title="سازماندهی پرونده‌ها" icon="document-duplicate" >}}
+  {{< card link="../guide/configuration" title="پیکربندی" icon="adjustments" >}}
+  {{< card link="../guide/markdown" title="مارک‌داون" icon="markdown" >}}
+{{< /cards >}}

exampleSite/content/docs/getting-started.ja.md

@@ -0,0 +1,192 @@
+---
+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/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)を提供しており、サイトを自動的にビルドしてGitHub Pagesにデプロイし、無料でホストすることができます。
+その他のオプションについては、[サイトのデプロイ](../guide/deploy-site)を確認してください。
+
+[🌐 デモ ↗](https://imfing.github.io/hextra-starter-template/)
+
+## 新しいプロジェクトとして始める
+
+HugoプロジェクトにHextraテーマを追加する主な方法は2つあります：
+
+1. **Hugoモジュール（推奨）**: 最も簡単で推奨される方法です。[Hugoモジュール](https://gohugo.io/hugo-modules/)を使用すると、テーマを直接オンラインソースから取り込むことができます。テーマは自動的にダウンロードされ、Hugoによって管理されます。
+
+2. **Gitサブモジュール**: または、Hextraを[Gitサブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)として追加します。テーマはGitによってダウンロードされ、プロジェクトの`themes`フォルダに保存されます。
+
+### HugoモジュールとしてHextraをセットアップ
+
+#### 前提条件
+
+開始する前に、以下のソフトウェアがインストールされている必要があります：
+
+- [Hugo（拡張版）](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+- [Go](https://go.dev/)
+
+#### 手順
+
+{{% steps %}}
+
+### 新しいHugoサイトを初期化
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### モジュール経由でHextraテーマを設定
+
+```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
+```
+
+### 最初のコンテンツページを作成
+
+ホームページとドキュメントページの新しいコンテンツページを作成します：
+
+```shell
+hugo new content/_index.md
+hugo new content/docs/_index.md
+```
+
+### ローカルでサイトをプレビュー
+
+```shell
+hugo server --buildDrafts --disableFastRender
+```
+
+これで、新しいサイトのプレビューが`http://localhost:1313/`で利用可能です。
+
+{{% /steps %}}
+
+
+{{% details title="テーマを更新するには？" %}}
+
+プロジェクト内のすべてのHugoモジュールを最新バージョンに更新するには、次のコマンドを実行します：
+
+```shell
+hugo mod get -u
+```
+
+Hextraを[最新リリースバージョン](https://github.com/imfing/hextra/releases)に更新するには、次のコマンドを実行します：
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
+詳細については、[Hugoモジュール](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)を参照してください。
+
+{{% /details %}}
+
+### GitサブモジュールとしてHextraをセットアップ
+
+#### 前提条件
+
+開始する前に、以下のソフトウェアがインストールされている必要があります：
+
+- [Hugo（拡張版）](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### 手順
+
+{{% steps %}}
+
+### 新しいHugoサイトを初期化
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### HextraテーマをGitサブモジュールとして追加
+
+```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://ja.wikipedia.org/wiki/CI/CD)を使用してHugoウェブサイトをデプロイする場合、`hugo`コマンドを実行する前に以下のコマンドを実行することが重要です。
+
+```shell
+git submodule update --init
+```
+
+このコマンドを実行しないと、テーマフォルダにHextraテーマファイルが取り込まれず、ビルドが失敗します。
+
+
+{{% details title="テーマを更新するには？" %}}
+
+リポジトリ内のすべてのサブモジュールを最新のコミットに更新するには、次のコマンドを実行します：
+
+```shell
+git submodule update --remote
+```
+
+Hextraを最新のコミットに更新するには、次のコマンドを実行します：
+
+```shell
+git submodule update --remote themes/hextra
+```
+
+詳細については、[Gitサブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)を参照してください。
+
+{{% /details %}}
+
+## 次へ
+
+以下のセクションを探索して、さらにコンテンツを追加し始めましょう：
+
+{{< cards >}}
+  {{< card link="../guide/organize-files" title="ファイルの整理" icon="document-duplicate" >}}
+  {{< card link="../guide/configuration" title="設定" icon="adjustments" >}}
+  {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
+{{< /cards >}}

exampleSite/content/docs/getting-started.md

@@ -43,18 +43,18 @@ Before starting, you need to have the following software installed:
 ### Initialize a new Hugo site
 
 ```shell
-$ hugo new site my-site --format=yaml
+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
+cd my-site
+hugo mod init github.com/username/my-site
 
 # add Hextra theme
-$ hugo mod get github.com/imfing/hextra
+hugo mod get github.com/imfing/hextra
 ```
 
 Configure `hugo.yaml` to use Hextra theme by adding the following:
@@ -70,14 +70,14 @@ module:
 Create new content page for the home page and the documentation page:
 
 ```shell
-$ hugo new content/_index.md
-$ hugo new content/docs/_index.md
+hugo new content/_index.md
+hugo new content/docs/_index.md
 ```
 
 ### Preview the site locally
 
 ```shell
-$ hugo server --buildDrafts --disableFastRender
+hugo server --buildDrafts --disableFastRender
 ```
 
 Voila, your new site preview is available at `http://localhost:1313/`.
@@ -90,7 +90,7 @@ Voila, your new site preview is available at `http://localhost:1313/`.
 To update all Hugo modules in your project to their latest versions, run the following command:
 
 ```shell
-$ hugo mod get -u
+hugo mod get -u
 ```
 
 To update Hextra to the [latest released version](https://github.com/imfing/hextra/releases), run the following command:
@@ -119,7 +119,7 @@ Before starting, you need to have the following software installed:
 ### Initialize a new Hugo site
 
 ```shell
-$ hugo new site my-site --format=yaml
+hugo new site my-site --format=yaml
 ```
 
 ### Add Hextra theme as a Git submodule
@@ -139,14 +139,14 @@ theme: hextra
 Create new content page for the home page and the documentation page:
 
 ```shell
-$ hugo new content/_index.md
-$ hugo new content/docs/_index.md
+hugo new content/_index.md
+hugo new content/docs/_index.md
 ```
 
 ### Preview the site locally
 
 ```shell
-$ hugo server --buildDrafts --disableFastRender
+hugo server --buildDrafts --disableFastRender
 ```
 
 Your new site preview is available at `http://localhost:1313/`.
@@ -168,7 +168,7 @@ Failure to run this command results in the theme folder not being populated with
 To update all submodules in your repository to their latest commits, run the following command:
 
 ```shell
-$ git submodule update --remote
+git submodule update --remote
 ```
 
 To update Hextra to the latest commit, run the following command:

exampleSite/content/docs/getting-started.zh-cn.md

@@ -1,51 +1,63 @@
 ---
-title: 快速开始
+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，并免费托管。
+我们提供了一个 [GitHub 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)，可以帮助自动构建并将您的站点部署到 GitHub Pages，并免费托管。
+更多选项，请查看 [部署站点](../guide/deploy-site)。
 
 [🌐 演示 ↗](https://imfing.github.io/hextra-starter-template/)
 
 ## 作为新项目开始
 
-### 前提条件
+有两种主要方式将 Hextra 主题添加到您的 Hugo 项目中：
 
-在开始之前，请确保我们已经安装了 [Hugo](https://gohugo.io/)。
-请参考 Hugo 的[官方安装指南](https://gohugo.io/installation/)以获取更多详情。
+1. **Hugo 模块（推荐）**：最简单且推荐的方法。[Hugo 模块](https://gohugo.io/hugo-modules/)允许您直接从在线源拉取主题。主题会自动下载并由 Hugo 管理。
 
-[Hugo 模块](https://gohugo.io/hugo-modules/)是管理 Hugo 主题的推荐方式。要使用 Hugo 模块，我们需要安装 [Git](https://git-scm.com/) 和 [Go](https://go.dev/)。
+2. **Git 子模块**：或者，将 Hextra 添加为 [Git 子模块](https://git-scm.com/book/en/v2/Git-Tools-Submodules)。主题由 Git 下载并存储在您项目的 `themes` 文件夹中。
+
+### 将 Hextra 设置为 Hugo 模块
+
+#### 先决条件
+
+在开始之前，您需要安装以下软件：
+
+- [Hugo（扩展版）](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+- [Go](https://go.dev/)
+
+#### 步骤
 
 {{% steps %}}
 
-### 初始化 Hugo 站点
+### 初始化一个新的 Hugo 站点
 
-```bash
-$ hugo new site my-site --format=yaml
+```shell
+hugo new site my-site --format=yaml
 ```
 
 ### 通过模块配置 Hextra 主题
 
 ```shell
 # 初始化 Hugo 模块
-$ cd my-site
-$ hugo mod init github.com/username/my-site
+cd my-site
+hugo mod init github.com/username/my-site
 
-# 添加 Hextra 
-$ hugo mod get github.com/imfing/hextra
+# 添加 Hextra 主题
+hugo mod get github.com/imfing/hextra
 ```
 
-编辑 `hugo.yaml` 以启用 Hextra：
+配置 `hugo.yaml` 以使用 Hextra 主题，添加以下内容：
 
 ```yaml
 module:
@@ -53,31 +65,128 @@ module:
     - path: github.com/imfing/hextra
 ```
 
-### 创建你的第一个内容页
+### 创建您的内容页面
 
-让我们为主页和文档页面创建一个新的内容页面：
+为主页和文档页面创建新的内容页面：
 
 ```shell
-$ hugo new content/_index.md
-$ hugo new content/docs/_index.md
+hugo new content/_index.md
+hugo new content/docs/_index.md
 ```
 
-### 在本地预览站点
+### 本地预览站点
 
 ```shell
-$ hugo server --buildDrafts --disableFastRender
+hugo server --buildDrafts --disableFastRender
 ```
 
-瞧！你现在可以在 `http://localhost:1313/` 看到你的新站点。
+恭喜，您的新站点预览可在 `http://localhost:1313/` 查看。
 
 {{% /steps %}}
 
-## 接下来
 
-你可以探索以下部分来添加更多内容：
+{{% details title="如何更新主题？" %}}
+
+要更新项目中所有 Hugo 模块到最新版本，请运行以下命令：
+
+```shell
+hugo mod get -u
+```
+
+要将 Hextra 更新到 [最新发布版本](https://github.com/imfing/hextra/releases)，请运行以下命令：
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
+有关更多详细信息，请参阅 [Hugo 模块](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)。
+
+{{% /details %}}
+
+### 将 Hextra 设置为 Git 子模块
+
+#### 先决条件
+
+在开始之前，您需要安装以下软件：
+
+- [Hugo（扩展版）](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### 步骤
+
+{{% steps %}}
+
+### 初始化一个新的 Hugo 站点
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### 将 Hextra 主题添加为 Git 子模块
+
+```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 网站时，确保在运行 `hugo` 命令之前执行以下命令至关重要。
+
+```shell
+git submodule update --init
+```
+
+如果不运行此命令，主题文件夹将不会被 Hextra 主题文件填充，导致构建失败。
+
+
+{{% details title="如何更新主题？" %}}
+
+要更新仓库中所有子模块到最新提交，请运行以下命令：
+
+```shell
+git submodule update --remote
+```
+
+要将 Hextra 更新到最新提交，请运行以下命令：
+
+```shell
+git submodule update --remote themes/hextra
+```
+
+有关更多详细信息，请参阅 [Git 子模块](https://git-scm.com/book/en/v2/Git-Tools-Submodules)。
+
+{{% /details %}}
+
+## 下一步
+
+探索以下部分以开始添加更多内容：
 
 {{< cards >}}
-  {{< card link="../guide/organize-files" title="目录结构" icon="document-duplicate" >}}
-  {{< card link="../guide/configuration" title="配置文件指南" icon="adjustments" >}}
+  {{< card link="../guide/organize-files" title="组织文件" icon="document-duplicate" >}}
+  {{< card link="../guide/configuration" title="配置" icon="adjustments" >}}
   {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
-{{< /cards >}}
+{{< /cards >}}

exampleSite/content/docs/guide/_index.fa.md

@@ -0,0 +1,23 @@
+---
+title: راهنما
+weight: 2
+prev: /docs/getting-started
+next: /docs/guide/organize-files
+sidebar:
+  open: true
+---
+
+برای یادگیری نحوه استفاده از هگزترا، بخش‌های زیر را کاوش کنید:
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="organize-files" title="سازماندهی پرونده‌ها" icon="document-duplicate" >}}
+  {{< card link="configuration" title="پیکربندی" icon="adjustments" >}}
+  {{< card link="markdown" title="مارک‌داون" 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" >}}
+  {{< card link="deploy-site" title="به‌کاراندازی سایت" icon="server" >}}
+{{< /cards >}}

exampleSite/content/docs/guide/_index.ja.md

@@ -0,0 +1,23 @@
+---
+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" >}}
+  {{< card link="deploy-site" title="サイトのデプロイ" icon="server" >}}
+{{< /cards >}}

exampleSite/content/docs/guide/_index.zh-cn.md

@@ -7,16 +7,17 @@ sidebar:
   open: true
 ---
 
-探索以下各节以学习如何使用 Hextra 编写内容：
+探索以下部分，了解如何使用 Hextra：
 
 <!--more-->
 
 {{< cards >}}
-  {{< card link="organize-files" title="目录结构" icon="document-duplicate" >}}
+  {{< 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="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 >}}
+  {{< card link="deploy-site" title="部署站点" icon="server" >}}
+{{< /cards >}}

exampleSite/content/docs/guide/configuration.fa.md

@@ -0,0 +1,271 @@
+---
+title: پیکربندی
+weight: 2
+---
+
+Hugo پیکربندی خود را از `hugo.yaml` در ریشه سایت Hugo شما می‌خواند.
+ پرونده پیکربندی جایی است که می‌توانید تمام جنبه‌های سایت خود را پیکربندی کنید.
+ پرونده پیکربندی این سایت [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) را در گیت‌هاب بررسی کنید تا ایده‌ای جامع از تنظیمات موجود و بهترین شیوه‌ها بدست آورید.
+
+<!--more-->
+
+## ناوبری
+
+### منو
+
+منوی سمت چپ بالا در قسمت `menu.main` در پرونده پیکربندی تعریف شده است:
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - name: مستندات
+      pageRef: /docs
+      weight: 1
+    - name: وبلاگ
+      pageRef: /blog
+      weight: 2
+    - name: درباره ما
+      pageRef: /about
+      weight: 3
+    - name: جستجو
+      weight: 4
+      params:
+        type: search
+    - name: گیت‌هاب
+      weight: 5
+      url: "https://github.com/imfing/hextra"
+      params:
+        icon: github
+```
+
+انواع مختلفی از آیتم‌های منو وجود دارد:
+
+1. پیوند به صفحه‌ای در سایت با `pageRef`
+    ```yaml
+    - name: مستندات
+      pageRef: /docs
+    ```
+2. پیوند به یک نشانی اینترنتی با `url`
+    ```yaml
+    - name: گیت‌هاب
+      url: "https://github.com"
+    ```
+3. نوار جستجو با `type: search`
+    ```yaml
+    - name: جستجو
+      params:
+        type: search
+    ```
+4. آیکون
+    ```yaml
+    - name: گیت‌هاب
+      params:
+        icon: github
+    ```
+
+این آیتم‌های منو را می‌توانید با تنظیم پارامتر `weight` مرتب کنید.
+
+### آرم و عنوان
+
+برای تغییر آرم پیش‌فرض، `hugo.yaml` را ویرایش کنید و مسیر را به پرونده آرم خود در دایرکتوری `static` اضافه کنید.
+ به صورت اختیاری، می‌توانید پیوندی را که کاربران هنگام کلیک کردن روی آرم شما به آن هدایت می‌شوند، تغییر دهید، همچنین عرض و ارتفاع آرم را به پیکسل تنظیم کنید.
+
+```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
+```
+
+## نوار کناری
+
+### نوار کناری اصلی
+
+برای نوار کناری اصلی، به طور خودکار از ساختار دایرکتوری محتوا تولید می‌شود.
+ برای جزئیات بیشتر به صفحه [سازماندهی پرونده‌ها](/fa/docs/guide/organize-files) مراجعه کنید.
+
+برای حذف یک صفحه از نوار کناری سمت راست، پارامتر`sidebar.exclude` را در قسمت بالایی صفحه تنظیم کنید:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: پیکربندی
+sidebar:
+  exclude: true
+---
+```
+
+### پیوندهای اضافی
+
+پیوندهای اضافی نوار کناری در زیر بخش `menu.sidebar` در پرونده پیکربندی تعریف شده است:
+
+```yaml {filename="hugo.yaml"}
+menu:
+  sidebar:
+    - name: بیشتر
+      params:
+        type: separator
+      weight: 1
+    - name: "درباره ما"
+      pageRef: "/about"
+      weight: 2
+    - name: "مستندات هیوگو ↖"
+      url: "https://gohugo.io/documentation/"
+      weight: 3
+```
+
+## نوار کناری سمت چپ
+
+### فهرست مطالب
+
+فهرست مطالب به طور خودکار از سرتیرهای موجود در پرونده محتوا تولید می‌شود. می‌توان آن را با تنظیم `toc: false` در قسمت بالایی صفحه غیرفعال کرد.
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: پیکربندی
+toc: false
+---
+```
+
+### پیوند ویرایش صفحه
+
+برای پیکربندی پیوند ویرایش صفحه، می‌توانیم پارامتر `params.editURL.base` را در پرونده پیکربندی تنظیم کنیم:
+
+```yaml {filename="hugo.yaml"}
+params:
+  editURL:
+    enable: true
+    base: "https://github.com/your-username/your-repo/edit/main"
+```
+
+پیوندهای ویرایش به طور خودکار برای هر صفحه براساس نشانی اینترنتی ارائه شده به عنوان دایرکتوری ریشه ایجاد می‌شود.
+ اگر می‌خواهید پیوند ویرایش را برای یک صفحه خاص تنظیم کنید، می‌توانید پارامتر `editURL` را در قسمت بالای صفحه تنظیم کنید:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: پیکربندی
+editURL: "https://example.com/edit/this/page"
+---
+```
+
+## پاورقی
+
+### کپی‌رایت
+
+برای تغییر متن کپی‌رایت نمایش داده شده در پاورقی وب‌سایت خود، باید پرونده‌ای به نام `i18n/fa.yaml` ایجاد کنید.
+ در این پرونده متن کپی‌رایت جدید خود را مطابق شکل زیر مشخص کنید:
+
+```yaml {filename="i18n/fa.yaml"}
+copyright: "© ۲۰۲۴ متن شما در اینجا"
+```
+
+برای مرجع شما، یک مثال [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) را می‌توانید در مخزن گیت‌هاب پیدا کنید. علاوه بر این، می‌توانید از فرمت مارک‌داون در متن کپی‌رایت استفاده کنید.
+
+## سایر موارد
+
+### 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های سایت خود مطمئن شوید.
+
+در حالی که `favicon.ico` به طور کلی برای مرورگرهای قدیمی‌تر است، `favicon.svg` توسط مرورگرهای مدرن پشتیبانی می‌شود. favicon`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` و normal`. به طور پیش‌فرض، عرض صفحه روی normal` تنظیم شده است.
+
+به طور مشابه، عرض نوار ناوبری و پاورقی را می‌توان با پارامترهای `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](https://gohugo.io/content-management/summaries/) مراجعه کنید
+- `heading` - سرتیترهای سطح ۱ و سطح ۲
+- `title` -  فقط شامل عنوان صفحه است
+
+برای حذف یک صفحه از فهرست جستجو، `excludeSearch: true` را در قسمت بالای صفحه تنظیم کنید:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: پیکربندی
+excludeSearch: true
+---
+```
+
+### گوگل آنالیتیکس
+
+برای فعال کردن [گوگل آنالیتیکس](https://marketingplatform.google.com/about/analytics/)، پرچم `services.googleAnalytics.ID` را در `hugo.yaml` تنظیم کنید:
+
+```yaml {filename="hugo.yaml"}
+services:
+  googleAnalytics:
+    ID: G-MEASUREMENT_ID
+```

exampleSite/content/docs/guide/configuration.ja.md

@@ -0,0 +1,288 @@
+---
+title: 設定
+weight: 2
+---
+
+Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取ります。
+この設定ファイルでは、サイトのすべての側面を設定できます。
+利用可能な設定とベストプラクティスの包括的な理解を得るために、GitHub上のこのサイトの設定ファイル[`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml)をチェックしてください。
+
+<!--more-->
+
+## ナビゲーション
+
+### メニュー
+
+右上のメニューは、設定ファイルの`menu.main`セクションで定義されます：
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - name: ドキュメント
+      pageRef: /docs
+      weight: 1
+    - name: ブログ
+      pageRef: /blog
+      weight: 2
+    - name: について
+      pageRef: /about
+      weight: 3
+    - name: 検索
+      weight: 4
+      params:
+        type: search
+    - name: GitHub
+      weight: 5
+      url: "https://github.com/imfing/hextra"
+      params:
+        icon: github
+```
+
+メニュー項目にはさまざまなタイプがあります：
+
+1. `pageRef`を使用してサイト内のページにリンク
+    ```yaml
+    - name: ドキュメント
+      pageRef: /docs
+    ```
+2. `url`を使用して外部URLにリンク
+    ```yaml
+    - name: GitHub
+      url: "https://github.com"
+    ```
+3. `type: search`を使用して検索バーを表示
+    ```yaml
+    - name: 検索
+      params:
+        type: search
+    ```
+4. アイコン
+    ```yaml
+    - name: GitHub
+      params:
+        icon: github
+    ```
+
+これらのメニュー項目は、`weight`パラメータを設定して並べ替えることができます。
+
+### ロゴとタイトル
+
+デフォルトのロゴを変更するには、`hugo.yaml`を編集し、`static`ディレクトリ下のロゴファイルへのパスを追加します。
+オプションで、ロゴをクリックしたときにユーザーがリダイレクトされるリンクや、ロゴの幅と高さをピクセル単位で設定できます。
+
+```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
+```
+
+## サイドバー
+
+### メインサイドバー
+
+メインサイドバーは、コンテンツディレクトリの構造から自動的に生成されます。
+詳細については、[ファイルの整理](/docs/guide/organize-files)ページを参照してください。
+
+左サイドバーから単一のページを除外するには、ページのフロントマターで`sidebar.exclude`パラメータを設定します：
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: 設定
+sidebar:
+  exclude: true
+---
+```
+
+### 追加リンク
+
+サイドバーの追加リンクは、設定ファイルの`menu.sidebar`セクションで定義されます：
+
+```yaml {filename="hugo.yaml"}
+menu:
+  sidebar:
+    - name: その他
+      params:
+        type: separator
+      weight: 1
+    - name: "について"
+      pageRef: "/about"
+      weight: 2
+    - name: "Hugo Docs ↗"
+      url: "https://gohugo.io/documentation/"
+      weight: 3
+```
+
+## 右サイドバー
+
+### 目次
+
+目次は、コンテンツファイルの見出しから自動的に生成されます。ページのフロントマターで`toc: false`を設定することで無効にできます。
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: 設定
+toc: false
+---
+```
+
+### ページ編集リンク
+
+ページ編集リンクを設定するには、設定ファイルで`params.editURL.base`パラメータを設定します：
+
+```yaml {filename="hugo.yaml"}
+params:
+  editURL:
+    enable: true
+    base: "https://github.com/your-username/your-repo/edit/main"
+```
+
+提供されたURLをルートディレクトリとして、各ページの編集リンクが自動的に生成されます。
+特定のページの編集リンクを設定したい場合は、ページのフロントマターで`editURL`パラメータを設定します：
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: 設定
+editURL: "https://example.com/edit/this/page"
+---
+```
+
+## フッター
+
+### 著作権
+
+ウェブサイトのフッターに表示される著作権テキストを変更するには、`i18n/en.yaml`という名前のファイルを作成します。
+このファイルに、以下のように新しい著作権テキストを指定します：
+
+```yaml {filename="i18n/en.yaml"}
+copyright: "© 2024 YOUR TEXT HERE"
+```
+
+参考として、GitHubリポジトリに[`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml)ファイルの例があります。また、著作権テキストにMarkdown形式を使用することもできます。
+
+## その他
+
+### ファビコン
+
+サイトの[ファビコン](https://ja.wikipedia.org/wiki/Favicon)をカスタマイズするには、`static`フォルダ下にアイコンファイルを配置して、[テーマのデフォルトのファビコン](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-dark.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`、`normal`です。デフォルトでは、ページ幅は`normal`に設定されています。
+
+同様に、ナビゲーションバーとフッターの幅は、`params.navbar.width`と`params.footer.width`パラメータでカスタマイズできます。
+
+### 検索インデックス
+
+[FlexSearch](https://github.com/nextapps-de/flexsearch)による全文検索はデフォルトで有効です。
+検索インデックスをカスタマイズするには、設定ファイルで`params.search.flexsearch.index`パラメータを設定します：
+
+```yaml {filename="hugo.yaml"}
+params:
+  # 検索
+  search:
+    enable: true
+    type: flexsearch
+
+    flexsearch:
+      # ページをインデックスする方法: content | summary | heading | title
+      index: content
+```
+
+`flexsearch.index`のオプション：
+
+- `content` - ページの全内容（デフォルト）
+- `summary` - ページの要約、詳細は[Hugoコンテンツ要約](https://gohugo.io/content-management/summaries/)を参照
+- `heading` - レベル1とレベル2の見出し
+- `title` - ページタイトルのみを含める
+
+検索トークン化をカスタマイズするには、設定ファイルで`params.search.flexsearch.tokenize`パラメータを設定します：
+
+```yaml {filename="hugo.yaml"}
+params:
+    # ...
+    flexsearch:
+      # full | forward | reverse | strict 
+      tokenize: forward
+```
+
+[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search)のオプション：
+
+- `strict` - 単語全体をインデックス
+- `forward` - 前方方向に単語を増分的にインデックス
+- `reverse` - 両方向に単語を増分的にインデックス
+- `full` - すべての可能な組み合わせをインデックス
+
+検索インデックスからページを除外するには、ページのフロントマターで`excludeSearch: true`を設定します：
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: 設定
+excludeSearch: true
+---
+```
+
+### Googleアナリティクス
+
+[Googleアナリティクス](https://marketingplatform.google.com/about/analytics/)を有効にするには、`hugo.yaml`で`services.googleAnalytics.ID`フラグを設定します：
+
+```yaml {filename="hugo.yaml"}
+services:
+  googleAnalytics:
+    ID: G-MEASUREMENT_ID
+```

exampleSite/content/docs/guide/configuration.md

@@ -90,6 +90,16 @@ params:
 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:
@@ -129,17 +139,17 @@ To configure the page edit link, we can set the `params.editURL.base` parameter
 ```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 `params.editURL` parameter in the front matter of the page:
+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
-params:
-  editURL: "https://example.com/edit/this/page"
+editURL: "https://example.com/edit/this/page"
 ---
 ```
 
@@ -151,7 +161,7 @@ To modify the copyright text displayed in your website's footer, you'll need to
 In this file, specify your new copyright text as shown below:
 
 ```yaml {filename="i18n/en.yaml"}
-copyright: "© 2023 YOUR TEXT HERE"
+copyright: "© 2024 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.
@@ -176,10 +186,10 @@ To customize the [favicon](https://en.wikipedia.org/wiki/Favicon) for your site,
   {{< /filetree/folder >}}
 {{< /filetree/container >}}
 
-Include both `favicon.ico` and `favicon.svg` files in your project to ensure your site's favicons display correctly.
+Include `favicon.ico`, `favicon.svg` and `favicon-dark.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.
+While `favicon.ico` is generally for older browsers, `favicon.svg` and `favicon-dark.svg` are supported by modern browsers.
+Use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate such icons.
 
 ### Theme Configuration
 
@@ -241,6 +251,23 @@ Options for `flexsearch.index`:
 - `heading` - level 1 and level 2 headings
 - `title` - only include the page title
 
+To customize the search tokenize, set the `params.search.flexsearch.tokenize` parameter in the config file:
+
+```yaml {filename="hugo.yaml"}
+params:
+    # ...
+    flexsearch:
+      # full | forward | reverse | strict 
+      tokenize: forward
+```
+
+Options for [`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search):
+
+- `strict` - index whole words
+- `forward` - incrementally index words in forward direction
+- `reverse` - incrementally index words in both directions
+- `full` - index every possible combination
+
 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"}

exampleSite/content/docs/guide/configuration.zh-cn.md

@@ -1,33 +1,33 @@
 ---
-title: 配置文件
+title: 配置
 weight: 2
 ---
 
-Hugo 从 Hugo 网站根目录下的 `hugo.yaml` 读取配置。
-在配置文件中，您可以配置站点的所有选项。
-你可以在 `exampleSite/hugo.yaml` 中找到此站点的配置文件作为开始。
+Hugo 从您 Hugo 站点根目录下的 `hugo.yaml` 文件中读取配置。
+配置文件是您可以配置站点所有方面的地方。
+查看此站点的配置文件 [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) 在 GitHub 上，以全面了解可用的设置和最佳实践。
 
 <!--more-->
 
-## 导航栏
+## 导航
 
 ### 菜单
 
-右上角的菜单在配置文件的 `menu.main` 中配置：
+右上角的菜单在配置文件的 `menu.main` 部分中定义：
 
 ```yaml {filename="hugo.yaml"}
 menu:
   main:
-    - name: Documentation
+    - name: 文档
       pageRef: /docs
       weight: 1
-    - name: Blog
+    - name: 博客
       pageRef: /blog
       weight: 2
-    - name: About
+    - name: 关于
       pageRef: /about
       weight: 3
-    - name: Search
+    - name: 搜索
       weight: 4
       params:
         type: search
@@ -38,55 +38,83 @@ menu:
         icon: github
 ```
 
-有几种不同类型的菜单项: 
+有不同类型的菜单项：
 
-1. Link to a page in the site with `pageRef`
+1. 使用 `pageRef` 链接到站点内的页面
     ```yaml
-    - name: Documentation
+    - name: 文档
       pageRef: /docs
     ```
-2. Link to an external URL with `url`
+2. 使用 `url` 链接到外部 URL
     ```yaml
     - name: GitHub
       url: "https://github.com"
     ```
-3. Search bar with `type: search`
+3. 使用 `type: search` 的搜索栏
     ```yaml
-    - name: Search
+    - name: 搜索
       params:
         type: search
     ```
-4. Icon
+4. 图标
     ```yaml
     - name: GitHub
       params:
         icon: github
     ```
 
-这些菜单项可以通过设置 `weight` 进行排序。
+这些菜单项可以通过设置 `weight` 参数进行排序。
+
+### 徽标和标题
+
+要修改默认徽标，编辑 `hugo.yaml` 并在 `static` 目录下添加徽标文件的路径。
+您还可以更改用户点击徽标时重定向的链接，以及设置徽标的宽度和高度（以像素为单位）。
+
+```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
+```
 
 ## 侧边栏
 
 ### 主侧边栏
 
-主侧边栏是自动从 `content` 目录结构生成的。
-有关更多详细信息，转至 [目录结构](/docs/guide/organize-files)。
+主侧边栏是根据内容目录的结构自动生成的。
+有关更多详细信息，请参阅 [组织文件](/docs/guide/organize-files) 页面。
+
+要从左侧边栏中排除单个页面，请在页面的 front matter 中设置 `sidebar.exclude` 参数：
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: 配置
+sidebar:
+  exclude: true
+---
+```
 
 ### 额外链接
 
-侧边栏的额外链接在配置文件的 `menu.sidebar` 部分中配置：
+侧边栏的额外链接在配置文件的 `menu.sidebar` 部分中定义：
 
 ```yaml {filename="hugo.yaml"}
 menu:
   sidebar:
-    - name: More
+    - name: 更多
       params:
         type: separator
       weight: 1
-    - name: "About"
+    - name: "关于"
       pageRef: "/about"
       weight: 2
-    - name: "Hugo Docs ↗"
+    - name: "Hugo 文档 ↗"
       url: "https://gohugo.io/documentation/"
       weight: 3
 ```
@@ -95,31 +123,166 @@ menu:
 
 ### 目录
 
-目录是根据内容文件中的标题自动生成的，可以在 `front matter` 设置 `toc：false` 来禁用它。
+目录是根据内容文件中的标题自动生成的。可以通过在页面的 front matter 中设置 `toc: false` 来禁用它。
 
 ```yaml {filename="content/docs/guide/configuration.md"}
 ---
-title: Configuration
+title: 配置
 toc: false
 ---
 ```
 
-### 编辑此页链接
+### 页面编辑链接
+
+要配置页面编辑链接，我们可以在配置文件中设置 `params.editURL.base` 参数：
 
-要配置编辑此页链接，我们可以在配置文件中设置 `params.editURL.base`：
 ```yaml {filename="hugo.yaml"}
 params:
   editURL:
+    enable: true
     base: "https://github.com/your-username/your-repo/edit/main"
 ```
 
-将为每个页面自动生成编辑链接。
-如需为特定页面设置编辑链接，可以在页面的 `front matter` 中设置 `params.editURL`：
+编辑链接将根据提供的 URL 作为根目录自动为每个页面生成。
+如果要为特定页面设置编辑链接，可以在页面的 front matter 中设置 `editURL` 参数：
 
 ```yaml {filename="content/docs/guide/configuration.md"}
 ---
-title: Configuration
-params:
-  editURL: "https://example.com/edit/this/page"
+title: 配置
+editURL: "https://example.com/edit/this/page"
 ---
 ```
+
+## 页脚
+
+### 版权
+
+要修改网站页脚中显示的版权文本，您需要创建一个名为 `i18n/en.yaml` 的文件。
+在此文件中，指定您的新版权文本，如下所示：
+
+```yaml {filename="i18n/en.yaml"}
+copyright: "© 2024 您的文本"
+```
+
+作为参考，可以在 GitHub 仓库中找到示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。此外，您可以在版权文本中使用 Markdown 格式。
+
+## 其他
+
+### 网站图标
+
+要为您的站点自定义 [网站图标](https://en.wikipedia.org/wiki/Favicon)，请将图标文件放在 `static` 文件夹下，以覆盖 [主题的默认网站图标](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-dark.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` 和 `normal`。默认情况下，页面宽度设置为 `normal`。
+
+同样，导航栏和页脚的宽度可以通过 `params.navbar.width` 和 `params.footer.width` 参数进行自定义。
+
+### 搜索索引
+
+默认启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供的全文搜索。
+要自定义搜索索引，请在配置文件中设置 `params.search.flexsearch.index` 参数：
+
+```yaml {filename="hugo.yaml"}
+params:
+  # 搜索
+  search:
+    enable: true
+    type: flexsearch
+
+    flexsearch:
+      # 按以下内容索引页面：content | summary | heading | title
+      index: content
+```
+
+`flexsearch.index` 的选项：
+
+- `content` - 页面的完整内容（默认）
+- `summary` - 页面的摘要，请参阅 [Hugo 内容摘要](https://gohugo.io/content-management/summaries/) 了解更多详细信息
+- `heading` - 一级和二级标题
+- `title` - 仅包括页面标题
+
+要自定义搜索分词，请在配置文件中设置 `params.search.flexsearch.tokenize` 参数：
+
+```yaml {filename="hugo.yaml"}
+params:
+    # ...
+    flexsearch:
+      # full | forward | reverse | strict 
+      tokenize: forward
+```
+
+[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search) 的选项：
+
+- `strict` - 索引整个单词
+- `forward` - 向前方向逐步索引单词
+- `reverse` - 双向逐步索引单词
+- `full` - 索引所有可能的组合
+
+要从搜索索引中排除页面，请在页面的 front matter 中设置 `excludeSearch: true`：
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: 配置
+excludeSearch: true
+---
+```
+
+### Google Analytics
+
+要启用 [Google Analytics](https://marketingplatform.google.com/about/analytics/)，请在 `hugo.yaml` 中设置 `services.googleAnalytics.ID` 标志：
+
+```yaml {filename="hugo.yaml"}
+services:
+  googleAnalytics:
+    ID: G-MEASUREMENT_ID
+```

exampleSite/content/docs/guide/deploy-site.fa.md

@@ -0,0 +1,162 @@
+---
+title: به‌کاراندازی سایت
+prev: /docs/guide/shortcodes
+next: /docs/advanced
+---
+
+Hugo وب‌سایت‌های استاتیک را ایجاد می‌کند و امکان گزینه‌های میزبانی انعطاف‌پذیر را فراهم می‌کند.
+ این صفحه راهنماهایی برای به‌کاراندازی سایت هگزترا شما در پلتفرم‌های مختلف ارائه می‌کند.
+
+
+<!--more-->
+
+
+## گیت‌هاب Pages
+
+[گیت‌هاب Pages](https://docs.github.com/pages) روشی توصیه شده برای به‌کاراندازی و میزبانی وب‌سایت شما به صورت رایگان است.
+
+اگر سایت را با استفاده از [hextra-starter-template](https://github.com/imfing/hextra-starter-template) راه‌اندازی سریع پیاده‌سازی می‌کنید، گردش کار گیت‌هاب Actions را به صورت خارج از جعبه ارائه کرده‌ایم که به‌کاراندازی خودکار در گیت‌هاب Pages  به شما کمک می‌کند.
+
+{{% details title="پیکربندی گیت‌هاب Actions" closed="true" %}}
+
+در زیر یک پیکربندی مثال از [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 >}}
+  در تنظیمات مخزن خود، **Pages** > **Build and deployment** > **Source** را روی **GitHub Actions** تنظیم کنید:
+  ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
+{{< /callout >}}
+
+به‌طور پیش‌فرض، گردش کار گیت‌هاب Actions بالا `.github/workflows/pages.yaml` فرض می‌کند که سایت در حال به‌کاراندازی در `https://<USERNAME>.github.io/<REPO>/` است.
+
+اگر در حال استفاده از `https://<USERNAME>.github.io/` هستید، سپس `--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/"
+```
+
+اگر می‌خواهید روی دامنه شخصی خود استقرار پیدا کند، لطفا مقدار `--baseURL` را بر این اساس تغییر دهید.
+
+
+## کلودفلر Pages
+
+1. کد منبع سایت خود را در یک مخزن Git (به عنوان مثال گیت‌هاب) قرار دهید
+2. وارد [پیشخوان کلودفلر](https://dash.cloudflare.com/) شوید و حساب خود را انتخاب کنید
+3. در صفحه اصلی حساب‌کاربری، **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** را انتخاب کنید
+4. مخزن را انتخاب کنید و در بخش Set up builds and Deployments اطلاعات زیر را وارد کنید:
+
+| Configuration     | Value                |
+| ----------------- | -------------------- |
+| Production branch | `main`               |
+| Build command     | `hugo --gc --minify` |
+| Build directory   | `public`             |
+
+برای جزئیات بیشتر، بررسی کنید:
+- [یک سایت هیوگو راه‌اندازی کنید.](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages).
+- [پشتیبانی زبان و ابزار.](https://developers.cloudflare.com/pages/platform/language-support-and-tools/).
+
+
+## Netlify
+
+1. کد خود را به مخزن Git خود (گیت‌هاب، گیت‌لب و غیره) ارسال کنید.
+2. [وارد کردن پروژه](https://app.netlify.com/start) به Netlify
+3. اگر از [hextra-starter-template][hextra-starter-template] استفاده نمی‌کنید، موارد زیر را به صورت دستی پیکربندی کنید:
+   - دستور Build را روی `hugo --gc --minify` پیکربندی کنید
+   - دایرکتوری Publish را برای `public` مشخص کنید
+   - `HUGO_VERSION` متغیر محیط استقرار را اضافه کنید و روی `0.119.0` تنظیم کنید
+4. استقرار!
+
+برای جزئیات بیشتر [Hugo را در Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) بررسی کنید.
+
+
+## Vercel
+
+1. کد خود را به مخزن Git خود (گیت‌هاب، گیت‌لب و غیره) ارسال کنید.
+2. به [پیشخوان Vercel](https://vercel.com/dashboard) بروید و پروژه Hugo خود را وارد کنید
+3. پروژه را پیکربندی کنید، Hugo را به‌ عنوان چارچوب Preset انتخاب کنید
+4. دستور Build و Install را لغو کنید:
+   1. دستور Build را روی `hugo --gc --minify` تنظیم کنید
+   2. دستور Install را روی `yum install golang` تنظیم کنید
+
+![پیکربندی استقرار Vercel](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

exampleSite/content/docs/guide/deploy-site.ja.md

@@ -0,0 +1,164 @@
+---
+title: サイトのデプロイ
+prev: /docs/guide/shortcodes
+next: /docs/advanced
+---
+
+Hugoは静的サイトを生成するため、柔軟なホスティングオプションが可能です。
+このページでは、Hextraサイトをさまざまなプラットフォームにデプロイするためのガイドを提供します。
+
+<!--more-->
+
+
+## GitHub Pages
+
+[GitHub Pages](https://docs.github.com/pages)は、無料でウェブサイトをデプロイおよびホストするための推奨方法です。
+
+[hextra-starter-template](https://github.com/imfing/hextra-starter-template)を使用してサイトをブートストラップした場合、GitHub Pagesへの自動デプロイを支援するGitHub Actionsワークフローがすぐに利用可能です。
+
+{{% details title="GitHub Actionsの設定" closed="true" %}}
+
+以下は、[hextra-starter-template](https://github.com/imfing/hextra-starter-template)からの設定例です：
+
+```yaml {filename=".github/workflows/pages.yaml"}
+# HugoサイトをGitHub Pagesにデプロイするためのサンプルワークフロー
+name: Deploy Hugo site to Pages
+
+on:
+  # デフォルトブランチへのプッシュ時に実行
+  push:
+    branches: ["main"]
+
+  # Actionsタブから手動でこのワークフローを実行可能
+  workflow_dispatch:
+
+# GITHUB_TOKENの権限を設定してGitHub Pagesへのデプロイを許可
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 同時実行を1つに制限し、進行中の実行と最新のキューイングされた実行の間の実行をスキップ。
+# ただし、進行中の実行はキャンセルしないでください。これらの本番デプロイを完了させたいためです。
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# デフォルトはbash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # ビルドジョブ
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.138.0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # .GitInfoと.Lastmodのためにすべての履歴を取得
+          submodules: recursive
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.22'
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v4
+      - name: Setup Hugo
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
+      - name: Build with Hugo
+        env:
+          # Hugoモジュールとの最大限の互換性のために
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc --minify \
+            --baseURL "${{ steps.pages.outputs.base_url }}/"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./public
+
+  # デプロイジョブ
+  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@v4
+```
+
+{{% /details %}}
+
+
+{{< callout >}}
+  リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定します：
+  ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
+{{< /callout >}}
+
+デフォルトでは、上記のGitHub Actionsワークフロー `.github/workflows/pages.yaml` は、サイトが `https://<USERNAME>.github.io/<REPO>/` にデプロイされることを前提としています。
+
+`https://<USERNAME>.github.io/` にデプロイする場合は、`--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/"
+```
+
+独自のドメインにデプロイする場合は、`--baseURL` の値を適宜変更してください。
+
+
+## Cloudflare Pages
+
+1. サイトのソースコードをGitリポジトリ（例：GitHub）に配置します。
+2. [Cloudflareダッシュボード](https://dash.cloudflare.com/)にログインし、アカウントを選択します。
+3. アカウントホームで、**Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択します。
+4. リポジトリを選択し、**Set up builds and deployments** セクションで以下の情報を提供します：
+
+| 設定             | 値                  |
+| ---------------- | ------------------- |
+| 本番ブランチ     | `main`              |
+| ビルドコマンド   | `hugo --gc --minify` |
+| ビルドディレクトリ | `public`            |
+
+詳細については、以下を確認してください：
+- [Hugoサイトのデプロイ](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages)。
+- [言語サポートとツール](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)。
+
+
+## Netlify
+
+1. コードをGitリポジトリ（GitHub、GitLabなど）にプッシュします。
+2. [プロジェクトをインポート](https://app.netlify.com/start)してNetlifyに追加します。
+3. [hextra-starter-template][hextra-starter-template]を使用していない場合、以下の設定を手動で行います：
+   - ビルドコマンドを `hugo --gc --minify` に設定します。
+   - 公開ディレクトリを `public` に指定します。
+   - 環境変数 `HUGO_VERSION` を追加し、`0.138.0` に設定するか、`netlify.toml` ファイルに設定します。
+4. デプロイします！
+
+詳細については、[NetlifyでのHugo](https://docs.netlify.com/integrations/frameworks/hugo/)を確認してください。
+
+
+## Vercel
+
+1. コードをGitリポジトリ（GitHub、GitLabなど）にプッシュします。
+2. [Vercelダッシュボード](https://vercel.com/dashboard)に移動し、Hugoプロジェクトをインポートします。
+3. プロジェクトを設定し、フレームワークプリセットとしてHugoを選択します。
+4. ビルドコマンドとインストールコマンドを上書きします：
+   1. ビルドコマンドを `hugo --gc --minify` に設定します。
+   2. インストールコマンドを `yum install golang` に設定します。
+
+![Vercelデプロイ設定](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

exampleSite/content/docs/guide/deploy-site.md

@@ -54,21 +54,24 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.117.0
+      HUGO_VERSION: 0.138.0
     steps:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+          fetch-depth: 0  # fetch all history for .GitInfo and .Lastmod
+          submodules: recursive
       - name: Setup Go
-        uses: actions/setup-go@v4
+        uses: actions/setup-go@v5
         with:
-          go-version: '1.21'
+          go-version: '1.22'
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v4
       - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
-        with:
-          hugo-version: '0.117.0'
-          extended: true
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
       - name: Build with Hugo
         env:
           # For maximum backward compatibility with Hugo modules
@@ -77,9 +80,9 @@ jobs:
         run: |
           hugo \
             --gc --minify \
-            --baseURL "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
+            --baseURL "${{ steps.pages.outputs.base_url }}/"
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: ./public
 
@@ -93,7 +96,7 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4
 ```
 
 {{% /details %}}
@@ -143,7 +146,7 @@ For more details, check out:
 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`
+   - Add Environment variable `HUGO_VERSION` and set to `0.138.0`, or alternatively, set it in `netlify.toml` file
 4. Deploy!
 
 Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details.

exampleSite/content/docs/guide/deploy-site.zh-cn.md

@@ -0,0 +1,164 @@
+---
+title: 部署站点
+prev: /docs/guide/shortcodes
+next: /docs/advanced
+---
+
+Hugo 生成静态网站，允许灵活的托管选项。
+本页提供了在各种平台上部署 Hextra 站点的指南。
+
+<!--more-->
+
+
+## GitHub Pages
+
+[GitHub Pages](https://docs.github.com/pages) 是推荐的方式，可以免费部署和托管您的网站。
+
+如果您使用 [hextra-starter-template](https://github.com/imfing/hextra-starter-template) 引导站点，它已经提供了开箱即用的 GitHub Actions 工作流，帮助自动部署到 GitHub Pages。
+
+{{% details title="GitHub Actions 配置" closed="true" %}}
+
+以下是 [hextra-starter-template](https://github.com/imfing/hextra-starter-template) 的示例配置：
+
+```yaml {filename=".github/workflows/pages.yaml"}
+# 用于构建和部署 Hugo 站点到 GitHub Pages 的示例工作流
+name: 部署 Hugo 站点到 Pages
+
+on:
+  # 在推送到默认分支时运行
+  push:
+    branches: ["main"]
+
+  # 允许您从 Actions 选项卡手动运行此工作流
+  workflow_dispatch:
+
+# 设置 GITHUB_TOKEN 的权限以允许部署到 GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 只允许一个并发部署，跳过在运行中和最新排队之间的运行。
+# 但是，不要取消正在运行的运行，因为我们希望这些生产部署能够完成。
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# 默认使用 bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # 构建任务
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.138.0
+    steps:
+      - name: 检出
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # 获取所有历史记录以支持 .GitInfo 和 .Lastmod
+          submodules: recursive
+      - name: 设置 Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.22'
+      - name: 设置 Pages
+        id: pages
+        uses: actions/configure-pages@v4
+      - name: 设置 Hugo
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
+      - name: 使用 Hugo 构建
+        env:
+          # 为了最大程度地兼容 Hugo 模块
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc --minify \
+            --baseURL "${{ steps.pages.outputs.base_url }}/"
+      - name: 上传工件
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./public
+
+  # 部署任务
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: 部署到 GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+```
+
+{{% /details %}}
+
+
+{{< callout >}}
+  在您的仓库设置中，将 **Pages** > **Build and deployment** > **Source** 设置为 **GitHub Actions**：
+  ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
+{{< /callout >}}
+
+默认情况下，上述 GitHub Actions 工作流 `.github/workflows/pages.yaml` 假设站点部署到 `https://<USERNAME>.github.io/<REPO>/`。
+
+如果您部署到 `https://<USERNAME>.github.io/`，请修改 `--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/"
+```
+
+如果您部署到自己的域名，请相应地更改 `--baseURL` 值。
+
+
+## Cloudflare Pages
+
+1. 将您的站点源代码放入 Git 仓库（例如 GitHub）
+2. 登录 [Cloudflare 仪表板](https://dash.cloudflare.com/) 并选择您的账户
+3. 在账户主页中，选择 **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**
+4. 选择仓库，并在 **Set up builds and deployments** 部分提供以下信息：
+
+| 配置项             | 值                   |
+| ------------------ | -------------------- |
+| 生产分支           | `main`               |
+| 构建命令           | `hugo --gc --minify` |
+| 构建目录           | `public`             |
+
+更多详情，请查看：
+- [部署 Hugo 站点](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages)。
+- [语言支持和工具](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)。
+
+
+## Netlify
+
+1. 将代码推送到您的 Git 仓库（GitHub、GitLab 等）
+2. [导入项目](https://app.netlify.com/start) 到 Netlify
+3. 如果您没有使用 [hextra-starter-template][hextra-starter-template]，请手动配置以下内容：
+   - 将构建命令配置为 `hugo --gc --minify`
+   - 指定发布目录为 `public`
+   - 添加环境变量 `HUGO_VERSION` 并设置为 `0.138.0`，或者将其设置在 `netlify.toml` 文件中
+4. 部署！
+
+查看 [Netlify 上的 Hugo](https://docs.netlify.com/integrations/frameworks/hugo/) 了解更多详情。
+
+
+## Vercel
+
+1. 将代码推送到您的 Git 仓库（GitHub、GitLab 等）
+2. 前往 [Vercel 仪表板](https://vercel.com/dashboard) 并导入您的 Hugo 项目
+3. 配置项目，选择 Hugo 作为框架预设
+4. 覆盖构建命令和安装命令：
+   1. 将构建命令设置为 `hugo --gc --minify`
+   2. 将安装命令设置为 `yum install golang`
+
+![Vercel 部署配置](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

exampleSite/content/docs/guide/diagrams.fa.md

@@ -0,0 +1,53 @@
+---
+title: نمودارها
+weight: 6
+next: /docs/guide/shortcodes
+---
+
+در حال حاضر، هگزترا از [Mermaid](#mermaid) برای نمودارها پشتیبانی می‌کند.
+
+<!--more-->
+
+## Mermaid
+
+[Mermaid](https://github.com/mermaid-js/mermaid#readme) یک ابزار نمودار و نمودار مبتنی بر جاوااسکریپت است که تعاریف متنی الهام گرفته از مارک‌داون را دریافت می‌کند و نمودارها را به صورت پویا در مرورگر ایجاد می‌کند. به عنوان مثال، Mermaid می‌تواند نمودارهای فلوچارت، نمودارهای توالی، نمودارهای دایره‌ای و موارد دیگر را رندر کند.
+
+استفاده از Mermaid در هگزترا به سادگی نوشتن یک بلوک کد با مجموعه زبان `mermaid` است:
+
+````markdown
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````
+
+به صورت زیر رندر خواهد شد:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+نمودار توالی:
+
+```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](https://mermaid-js.github.io/mermaid/#/) مراجعه کنید.

exampleSite/content/docs/guide/diagrams.ja.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にインスパイアされたテキスト定義を取り込み、ブラウザ内でダイナミックにダイアグラムを作成します。例えば、Mermaidはフローチャート、シーケンス図、円グラフなどをレンダリングできます。
+
+HextraでMermaidを使用するのは、言語を`mermaid`に設定したコードブロックを書くのと同じくらい簡単です:
+
+````markdown
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````
+
+これは次のようにレンダリングされます:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+シーケンス図:
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: こんにちはJohn、元気ですか？
+    loop 健康チェック
+        John->>John: 心気症と戦う
+    end
+    Note right of John: 理性的な思考 <br/>が勝つ！
+    John-->>Alice: 元気です！
+    John->>Bob: あなたはどうですか？
+    Bob-->>John: とても元気です！
+```
+
+詳細については、[Mermaidドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。

exampleSite/content/docs/guide/diagrams.zh-cn.md

@@ -4,15 +4,15 @@ weight: 6
 next: /docs/guide/shortcodes
 ---
 
-目前，Hextra 支持 [Mermaid](#mermaid) 的图表。
+目前，Hextra 支持使用 [Mermaid](#mermaid) 来绘制图表。
 
 <!--more-->
 
 ## Mermaid
 
-[Mermaid](https://github.com/mermaid-js/mermaid#readme) 是一个基于 JavaScript 的图表绘制工具，它的文本定义和 Markdown 类似，可在浏览器中动态创建图表。例如：流程图、序列图、饼图等。
+[Mermaid](https://github.com/mermaid-js/mermaid#readme) 是一个基于 JavaScript 的图表工具，它通过类似 Markdown 的文本定义，在浏览器中动态生成图表。例如，Mermaid 可以渲染流程图、序列图、饼图等。
 
-在 Hextra 中使用 Mermaid 就像使用代码块一样简单：
+在 Hextra 中使用 Mermaid 非常简单，只需编写一个语言设置为 `mermaid` 的代码块：
 
 ````markdown
 ```mermaid
@@ -24,7 +24,7 @@ graph TD;
 ```
 ````
 
-将呈现为：
+将会渲染为：
 
 ```mermaid
 graph TD;
@@ -34,20 +34,20 @@ graph TD;
     C-->D;
 ```
 
-Sequence diagram：
+序列图示例：
 
 ```mermaid
 sequenceDiagram
     participant Alice
     participant Bob
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
+    Alice->>John: 你好 John，最近怎么样？
+    loop 健康检查
+        John->>John: 与疑病症作斗争
     end
-    Note right of John: Rational thoughts <br/>prevail!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
+    Note right of John: 理性思考 <br/>占据上风！
+    John-->>Alice: 很好！
+    John->>Bob: 你怎么样？
+    Bob-->>John: 非常好！
 ```
 
-如需获取更多信息，转至 [Mermaid Documentation](https://mermaid-js.github.io/mermaid/#/)。
+更多信息，请参考 [Mermaid 文档](https://mermaid-js.github.io/mermaid/#/)。

exampleSite/content/docs/guide/latex.fa.md

@@ -0,0 +1,60 @@
+---
+title: "LaTeX"
+weight: 4
+math: true
+---
+
+$\KaTeX$ برای رندر کردن عبارت‌های ریاضی LaTeX استفاده می‌شود. می‌توان آن را در هر صفحه با تنظیم `math` روی `true` در قسمت بالای صفحه فعال کرد.
+
+<!--more-->
+
+```yaml {filename="Markdown"}
+---
+title: "صفحه من با LaTeX"
+math: true
+---
+
+```
+
+وقتی فعال باشد، اسکریپت‌ها، شیوه‌نامه‌ها و فونت‌های KaTeX به طور خودکار در سایت شما قرار می‌گیرند. می‌توانید از عبارت‌های ریاضی LaTeX در محتوای مارک‌داون خود استفاده کنید.
+
+## مثال
+
+هر دو عبارت‌های ریاضی درون‌خطی و پاراگراف جداگانه LaTeX در محتوای مارک‌داون پشتیبانی می‌شوند.
+
+### درون‌خطی
+
+```markdown {filename="page.md"}
+این $\sigma(z) = \frac{1}{1 + e^{-z}}$ درون‌خطی است.
+```
+
+این $\sigma(z) = \frac{1}{1 + e^{-z}}$ درون‌خطی است.
+
+### پاراگراف جداگانه
+
+```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-}$$

exampleSite/content/docs/guide/latex.ja.md

@@ -0,0 +1,97 @@
+---
+title: "LaTeX"
+weight: 4
+math: true
+---
+
+$\KaTeX$ は LaTeX の数式をレンダリングするために使用されます。ページのフロントマターで `math` を `true` に設定することで、ページごとに有効にすることができます。
+
+<!--more-->
+
+```yaml {filename="page.md"}
+---
+title: "LaTeX を使用した私のページ"
+math: true
+---
+
+```
+
+有効にすると、KaTeX のスクリプト、スタイルシート、フォントが自動的にサイトに含まれます。Markdown コンテンツ内で LaTeX 数式を使用できます。
+
+## 例
+
+Markdown コンテンツ内で、インラインおよび別段落の LaTeX 数式がサポートされています。
+
+### インライン
+
+```markdown {filename="page.md"}
+これは $\sigma(z) = \frac{1}{1 + e^{-z}}$ インラインです。
+```
+
+これは $\sigma(z) = \frac{1}{1 + e^{-z}}$ インラインです。
+
+### 別段落
+
+```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$$
+
+> [!IMPORTANT]
+> Hugo 設定ファイルで [パススルー拡張機能](https://gohugo.io/content-management/mathematics/) を有効にして設定してください。これにより、複雑な式のレンダリング問題を回避するために、デリミタ内の生のコンテンツが保持されます。
+
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    extensions:
+      passthrough:
+        delimiters:
+          block: [['\[', '\]'], ['$$', '$$']]
+          inline: [['\(', '\)']]
+        enable: true
+```
+
+例えば、aligned 環境を使用する場合:
+
+```latex {filename="page.md"}
+$$
+\begin{aligned}
+  \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
+  \nabla \cdot \mathbf{B} &= 0 \\
+  \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
+  \nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
+\end{aligned}
+$$
+```
+
+次のようにレンダリングされます:
+
+$$
+\begin{aligned}
+  \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
+  \nabla \cdot \mathbf{B} &= 0 \\
+  \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
+  \nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
+\end{aligned}
+$$
+
+## サポートされている関数
+
+サポートされている関数の一覧については、[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-}$$

exampleSite/content/docs/guide/latex.md

@@ -8,7 +8,7 @@ $\KaTeX$ is used for rendering LaTeX math expressions. It can be enabled per pag
 
 <!--more-->
 
-```yaml {filename="Markdown"}
+```yaml {filename="page.md"}
 ---
 title: "My Page with LaTeX"
 math: true
@@ -40,6 +40,43 @@ will be rendered as:
 
 $$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
 
+> [!IMPORTANT]
+> Please enable and configure the [passthrough extension](https://gohugo.io/content-management/mathematics/) in the Hugo configuration file. It preserves raw content within the delimiters to avoid rendering issues for complex expressions.
+
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    extensions:
+      passthrough:
+        delimiters:
+          block: [['\[', '\]'], ['$$', '$$']]
+          inline: [['\(', '\)']]
+        enable: true
+```
+
+For example, using the aligned environment:
+
+```latex {filename="page.md"}
+$$
+\begin{aligned}
+  \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
+  \nabla \cdot \mathbf{B} &= 0 \\
+  \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
+  \nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
+\end{aligned}
+$$
+```
+
+will be rendered as:
+
+$$
+\begin{aligned}
+  \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
+  \nabla \cdot \mathbf{B} &= 0 \\
+  \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
+  \nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
+\end{aligned}
+$$
 
 ## Supported Functions
 

exampleSite/content/docs/guide/latex.zh-cn.md

@@ -1,33 +1,34 @@
 ---
-title: "LaTeX 公式"
+title: "数学公式"
 weight: 4
 math: true
 ---
 
-$\KaTeX$ 用于呈现 LaTeX 数学表达式。可在 `frontmatter` 将 `math` 设置为 `true` 来启用。
+$\KaTeX$ 用于渲染 LaTeX 数学表达式。可以通过在页面前置设置中将 `math` 设置为 `true` 来启用它。
 
 <!--more-->
 
-```yaml {filename="Markdown"}
+```yaml {filename="page.md"}
 ---
-title: "My Page with LaTeX"
+title: "我的页面包含 LaTeX"
 math: true
 ---
+
 ```
 
-启用后，KaTeX 中的脚本，样式表和字体将自动包含在你的网站中。这样就可以在 Markdown 内容中使用 LaTeX 数学表达式。
+启用后，KaTeX 的脚本、样式表和字体将自动包含在您的站点中。您可以在 Markdown 内容中开始使用 LaTeX 数学表达式。
 
 ## 示例
 
-Markdown 内容支持行内和独立段落的 LaTeX 数学表达式。
+Markdown 内容中支持内联和独立段落的 LaTeX 数学表达式。
 
-### 行内
+### 内联
 
 ```markdown {filename="page.md"}
-This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
+这个 $\sigma(z) = \frac{1}{1 + e^{-z}}$ 是内联的。
 ```
 
-This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
+这个 $\sigma(z) = \frac{1}{1 + e^{-z}}$ 是内联的。
 
 ### 独立段落
 
@@ -35,20 +36,57 @@ This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
 $$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
 ```
 
-将被渲染为：
+将渲染为：
 
 $$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
 
+> [!IMPORTANT]
+> 请在 Hugo 配置文件中启用并配置 [passthrough 扩展](https://gohugo.io/content-management/mathematics/)。它保留分隔符内的原始内容，以避免复杂表达式的渲染问题。
 
-## 支持的功能
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    extensions:
+      passthrough:
+        delimiters:
+          block: [['\[', '\]'], ['$$', '$$']]
+          inline: [['\(', '\)']]
+        enable: true
+```
 
-有关支持的符号列表，转至 [KaTeX 支持的公式](https://katex.org/docs/supported.html)。
+例如，使用对齐环境：
 
-## 化学表达式
+```latex {filename="page.md"}
+$$
+\begin{aligned}
+  \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
+  \nabla \cdot \mathbf{B} &= 0 \\
+  \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
+  \nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
+\end{aligned}
+$$
+```
 
-通过 [mhchem](https://mhchem.github.io/MathJax-mhchem/) 支持化学表达式。
+将渲染为：
 
-行内：$\ce{H2O}$ 是水。
+$$
+\begin{aligned}
+  \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
+  \nabla \cdot \mathbf{B} &= 0 \\
+  \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
+  \nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
+\end{aligned}
+$$
+
+## 支持的函数
+
+有关支持的函数列表，请参阅 [KaTeX 支持的函数](https://katex.org/docs/supported.html)。
+
+## 化学
+
+通过 [mhchem](https://mhchem.github.io/MathJax-mhchem/) 扩展支持化学表达式。
+
+内联：$\ce{H2O}$ 是水。
 
 独立段落：
 

exampleSite/content/docs/guide/markdown.fa.md

@@ -0,0 +1,156 @@
+---
+title: مارک‌داون
+weight: 2
+---
+
+Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markdown) برای قالب‌بندی متن، ایجاد فهرست و موارد دیگر پشتیبانی می‌کند. این صفحه برخی از رایج‌ترین نمونه‌های سینتکس مارک‌داون را به شما نشان می‌دهد.
+
+<!--more-->
+
+## مثال‌های مارک‌داون
+
+### ظاهر طراحی دادن به متن
+
+| سبک   | سینتکس     | مثال   | خروجی   |
+| --------  | -------- | ------ | ------ |
+| توپر | `**متن توپر**` | `**متن توپر**` | **متن توپر** |
+| کج | `*متن کج*` | `*متن کج*` | *متن کج* |
+| خط خورده | `~~متن خط خورده~~` | `~~متن خط خورده~~` | ~~متن خط خورده~~ |
+| پایین‌نویس | `<sub></sub>` | `این یک متن <sub>پایین‌نویس</sub> است` | این یک متن <sub>پایین‌نویس</sub> است |
+| بالانویس | `<sup></sup>` | `این یک متن <sup>بالانویس</sup> است` | این یک متن <sup>بالانویس</sup> است |
+
+### بلوک نقل‌قول
+
+بلوک نقل‌قول با ذکر منبع
+
+> با اشتراک‌گذاری حافظه ارتباط برقرار نکنید، حافظه را با برقراری ارتباط به اشتراک بگذارید.<br>
+> — <cite>راب پایک[^1]</cite>
+
+[^1]: نقل‌قول بالا گزیده‌ای از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) راب پایک در Gopherfest، در تاریخ ۲۷ آبان ۱۳۹۴ است.
+
+```markdown {filename=Markdown}
+> با اشتراک‌گذاری حافظه ارتباط برقرار نکنید، حافظه را با برقراری ارتباط به اشتراک بگذارید.<br>
+> — <cite>راب پایک[^1]</cite>
+
+[^1]: نقل‌قول بالا گزیده‌ای از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) راب پایک در Gopherfest، در تاریخ ۲۷ آبان ۱۳۹۴ است.
+```
+
+### جدول‌ها
+
+جدول‌ها بخشی از مشخصات اصلی مارک‌داون نیستند، اما Hugo از آنها در خارج از جعبه پشتیبانی می‌کند.
+
+|     نام | سن  |
+|--------|------|
+|    گودرز |  ۳۰|
+|  آصف |    ۳۴  |
+
+```markdown {filename=Markdown}
+|     نام | سن  |
+|--------|------|
+|    گودرز |  ۳۰|
+|  آصف |    ۳۴  |
+```
+
+#### مارک‌داون درون‌خطی درون جدول‌ها
+
+| کج   | توپر     | کد   |
+| --------  | -------- | ------ |
+| *کج* | **توپر** | `کد` |
+
+```markdown {filename=Markdown}
+| کج   | توپر     | کد   |
+| --------  | -------- | ------ |
+| *کج* | **توپر** | `کد` |
+```
+
+### بلوک‌های کد
+
+{{< cards >}}
+  {{< card link="../../guide/syntax-highlighting" title="برجسته‌کردن سینتکس" icon="sparkles" >}}
+{{< /cards >}}
+
+### فهرست‌ها
+
+#### فهرست مرتب‌شده
+
+1. اولین آیتم
+2. دومین آیتم
+3. سومین آیتم
+
+```markdown {filename=Markdown}
+1. اولین آیتم
+2. دومین آیتم
+3. سومین آیتم
+```
+
+#### فهرست مرتب‌نشده
+
+* فهرست آیتم
+* یک آیتم دیگه
+* و یک آیتم دیگه
+
+```markdown {filename=Markdown}
+* فهرست آیتم
+* یک آیتم دیگه
+* و یک آیتم دیگه
+```
+
+#### فهرست تو در تو
+
+* میوه
+  * سیب
+  * پرتقال
+  * موز
+* لبنیات
+  * شیر
+  * پنیر
+
+```markdown {filename=Markdown}
+* میوه
+  * سیب
+  * پرتقال
+  * موز
+* لبنیات
+  * شیر
+  * پنیر
+```
+
+### عکس‌ها
+
+![landscape](https://picsum.photos/800/600)
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600)
+```
+
+با توضیحات:
+
+![landscape](https://picsum.photos/800/600 "یک چشم‌انداز Unsplash")
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600 "یک چشم‌انداز Unsplash")
+```
+
+## پیکربندی
+
+Hugo از [Goldmark](https://github.com/yuin/goldmark) برای تجزیه مارک‌داون استفاده می‌کند.
+ رندر مارک‌داون را می‌توان در `hugo.yaml` تحت `markup.goldmark` پیکربندی کنید.
+ در زیر پیکربندی پیش‌فرض هگزترا را می‌توانید ببینید:
+
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  highlight:
+    noClasses: false
+```
+
+برای گزینه‌های پیکربندی بیشتر، به مستندات Hugo در [پیکربندی نشانه‌گذاری](https://gohugo.io/getting-started/configuration-markup/) مراجعه کنید.
+
+## منابع یادگیری
+
+* [راهنمای مارک‌داون](https://www.markdownguide.org/)
+* [برگه تقلب مارک‌داون](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+* [آموزش مارک‌داون](https://www.markdowntutorial.com/)
+* [مرجع مارک‌داون](https://commonmark.org/help/)

exampleSite/content/docs/guide/markdown.ja.md

@@ -0,0 +1,196 @@
+---
+title: Markdown
+weight: 2
+---
+
+Hugoは、テキストのフォーマットやリストの作成などに[Markdown](https://ja.wikipedia.org/wiki/Markdown)構文をサポートしています。このページでは、最も一般的なMarkdown構文の例をいくつか紹介します。
+
+<!--more-->
+
+## Markdownの例
+
+### テキストのスタイル
+
+| スタイル   | 構文     | 例   | 出力   |
+| --------  | -------- | ------ | ------ |
+| 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** |
+| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | *斜体テキスト* |
+| 取り消し線 | `~~取り消し線テキスト~~` | `~~取り消し線テキスト~~` | ~~取り消し線テキスト~~ |
+| 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です |
+| 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です |
+
+### ブロッククォート
+
+引用元付きのブロッククォート
+
+> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
+> — <cite>ロブ・パイク[^1]</cite>
+
+[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
+
+```markdown {filename=Markdown}
+> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
+> — <cite>ロブ・パイク[^1]</cite>
+
+[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
+```
+
+### アラート
+
+{{< new-feature version="v0.9.0" >}}
+
+アラートは、ブロッククォート構文に基づくMarkdown拡張で、重要な情報を強調するために使用できます。
+[GitHubスタイルのアラート](https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)がサポートされています。
+Hextraの最新バージョンと[Hugo v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0)以降を使用していることを確認してください。
+
+> [!NOTE]
+> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。
+
+> [!TIP]
+> 物事をより良く、または簡単に行うための役立つアドバイス。
+
+> [!IMPORTANT]
+> ユーザーが目標を達成するために知っておくべき重要な情報。
+
+> [!WARNING]
+> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。
+
+> [!CAUTION]
+> 特定のアクションのリスクやネガティブな結果についてのアドバイス。
+
+```markdown {filename=Markdown}
+> [!NOTE]
+> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。
+
+> [!TIP]
+> 物事をより良く、または簡単に行うための役立つアドバイス。
+
+> [!IMPORTANT]
+> ユーザーが目標を達成するために知っておくべき重要な情報。
+
+> [!WARNING]
+> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。
+
+> [!CAUTION]
+> 特定のアクションのリスクやネガティブな結果についてのアドバイス。
+```
+
+### テーブル
+
+テーブルはMarkdownのコア仕様には含まれていませんが、Hugoはデフォルトでサポートしています。
+
+|   名前 | 年齢  |
+|--------|------|
+|   ボブ | 27   |
+|  アリス | 23   |
+
+```markdown {filename=Markdown}
+|   名前 | 年齢  |
+|--------|------|
+|   ボブ | 27   |
+|  アリス | 23   |
+```
+
+#### テーブル内のインラインMarkdown
+
+| 斜体   | 太字     | コード   |
+| --------  | -------- | ------ |
+| *斜体* | **太字** | `コード` |
+
+```markdown {filename=Markdown}
+| 斜体   | 太字     | コード   |
+| --------  | -------- | ------ |
+| *斜体* | **太字** | `コード` |
+```
+
+### コードブロック
+
+{{< cards >}}
+  {{< card link="../../guide/syntax-highlighting" title="シンタックスハイライト" icon="sparkles" >}}
+{{< /cards >}}
+
+### リスト
+
+#### 順序付きリスト
+
+1. 最初の項目
+2. 2番目の項目
+3. 3番目の項目
+
+```markdown {filename=Markdown}
+1. 最初の項目
+2. 2番目の項目
+3. 3番目の項目
+```
+
+#### 順序なしリスト
+
+* リスト項目
+* 別の項目
+* さらに別の項目
+
+```markdown {filename=Markdown}
+* リスト項目
+* 別の項目
+* さらに別の項目
+```
+
+#### ネストされたリスト
+
+* 果物
+  * りんご
+  * オレンジ
+  * バナナ
+* 乳製品
+  * 牛乳
+  * チーズ
+
+```markdown {filename=Markdown}
+* 果物
+  * りんご
+  * オレンジ
+  * バナナ
+* 乳製品
+  * 牛乳
+  * チーズ
+```
+
+### 画像
+
+![風景](https://picsum.photos/800/600)
+
+```markdown {filename=Markdown}
+![風景](https://picsum.photos/800/600)
+```
+
+キャプション付き:
+
+![風景](https://picsum.photos/800/600 "Unsplashの風景")
+
+```markdown {filename=Markdown}
+![風景](https://picsum.photos/800/600 "Unsplashの風景")
+```
+
+## 設定
+
+HugoはMarkdownの解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
+Markdownのレンダリングは、`hugo.yaml`の`markup.goldmark`で設定できます。
+以下はHextraのデフォルト設定です:
+
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  highlight:
+    noClasses: false
+```
+
+その他の設定オプションについては、Hugoのドキュメント[Configure Markup](https://gohugo.io/getting-started/configuration-markup/)を参照してください。
+
+## 学習リソース
+
+* [Markdownガイド](https://www.markdownguide.org/)
+* [Markdownチートシート](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+* [Markdownチュートリアル](https://www.markdowntutorial.com/)
+* [Markdownリファレンス](https://commonmark.org/help/)

exampleSite/content/docs/guide/markdown.md

@@ -14,7 +14,7 @@ Hugo supports [Markdown](https://en.wikipedia.org/wiki/Markdown) syntax for form
 | Style   | Syntax     | Example   | Output   |
 | --------  | -------- | ------ | ------ |
 | Bold | `**bold text**` | `**bold text**` | **bold text** |
-| Italic | `*italicized text*` | `*italicized text* | *italicized 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 |
@@ -28,14 +28,68 @@ Blockquote with attribution
 
 [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
 
+```markdown {filename=Markdown}
+> 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.
+```
+
+### Alerts
+
+{{< new-feature version="v0.9.0" >}}
+
+Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information.
+[GitHub-style alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) are supported.
+Please make sure you are using the latest version of Hextra and [Hugo v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0) or later.
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+
+```markdown {filename=Markdown}
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+```
+
 ### Tables
 
 Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.
 
-   Name | Age
---------|------
-    Bob | 27
-  Alice | 23
+|   Name | Age  |
+|--------|------|
+|    Bob | 27   |
+|  Alice | 23   |
+
+```markdown {filename=Markdown}
+|   Name | Age  |
+|--------|------|
+|    Bob | 27   |
+|  Alice | 23   |
+```
 
 #### Inline Markdown within tables
 
@@ -43,6 +97,12 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
 | --------  | -------- | ------ |
 | *italics* | **bold** | `code` |
 
+```markdown {filename=Markdown}
+| Italics   | Bold     | Code   |
+| --------  | -------- | ------ |
+| *italics* | **bold** | `code` |
+```
+
 ### Code Blocks
 
 {{< cards >}}
@@ -57,12 +117,24 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
 2. Second item
 3. Third item
 
+```markdown {filename=Markdown}
+1. First item
+2. Second item
+3. Third item
+```
+
 #### Unordered List
 
 * List item
 * Another item
 * And another item
 
+```markdown {filename=Markdown}
+* List item
+* Another item
+* And another item
+```
+
 #### Nested list
 
 * Fruit
@@ -73,13 +145,31 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
   * Milk
   * Cheese
 
+```markdown {filename=Markdown}
+* Fruit
+  * Apple
+  * Orange
+  * Banana
+* Dairy
+  * Milk
+  * Cheese
+```
+
 ### Images
 
-![](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600)
+```
 
 With caption:
 
-![](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
+```
 
 ## Configuration
 

exampleSite/content/docs/guide/markdown.zh-cn.md

@@ -3,7 +3,7 @@ title: Markdown
 weight: 2
 ---
 
-Hugo 支持 [Markdown](https://en.wikipedia.org/wiki/Markdown) 来书写内容，创建列表等。本页将向你展示一些最常见的 Markdown 语法示例。
+Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来格式化文本、创建列表等。本页将展示一些最常见的 Markdown 语法示例。
 
 <!--more-->
 
@@ -11,80 +11,171 @@ Hugo 支持 [Markdown](https://en.wikipedia.org/wiki/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 |
+| 粗体 | `**粗体文本**` | `**粗体文本**` | **粗体文本** |
+| 斜体 | `*斜体文本*` | `*斜体文本*` | *斜体文本* |
+| 删除线 | `~~删除线文本~~` | `~~删除线文本~~` | ~~删除线文本~~ |
+| 下标 | `<sub></sub>` | `这是一个<sub>下标</sub>文本` | 这是一个<sub>下标</sub>文本 |
+| 上标 | `<sup></sup>` | `这是一个<sup>上标</sup>文本` | 这是一个<sup>上标</sup>文本 |
 
-### 引用
+### 引用块
 
-带角标的块引用：
+带出处的引用块
 
-> Don't communicate by sharing memory, share memory by communicating.<br>
+> 不要通过共享内存来通信，而要通过通信来共享内存。<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.
+[^1]: 以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 上的[演讲](https://www.youtube.com/watch?v=PAAkCSZUG1c)。
+
+```markdown {filename=Markdown}
+> 不要通过共享内存来通信，而要通过通信来共享内存。<br>
+> — <cite>Rob Pike[^1]</cite>
+
+[^1]: 以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 上的[演讲](https://www.youtube.com/watch?v=PAAkCSZUG1c)。
+```
+
+### 提示框
+
+{{< new-feature version="v0.9.0" >}}
+
+提示框是基于引用块语法的 Markdown 扩展，可用于强调关键信息。
+支持 [GitHub 风格的提示框](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)。
+请确保您使用的是最新版本的 Hextra 和 [Hugo v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0) 或更高版本。
+
+> [!NOTE]
+> 用户应该知道的有用信息，即使是在浏览内容时。
+
+> [!TIP]
+> 帮助用户更好地或更轻松地完成任务的建议。
+
+> [!IMPORTANT]
+> 用户需要了解的关键信息，以实现他们的目标。
+
+> [!WARNING]
+> 需要用户立即注意的紧急信息，以避免问题。
+
+> [!CAUTION]
+> 关于某些操作的风险或负面结果的建议。
+
+```markdown {filename=Markdown}
+> [!NOTE]
+> 用户应该知道的有用信息，即使是在浏览内容时。
+
+> [!TIP]
+> 帮助用户更好地或更轻松地完成任务的建议。
+
+> [!IMPORTANT]
+> 用户需要了解的关键信息，以实现他们的目标。
+
+> [!WARNING]
+> 需要用户立即注意的紧急信息，以避免问题。
+
+> [!CAUTION]
+> 关于某些操作的风险或负面结果的建议。
+```
 
 ### 表格
 
-表格并非核心 Markdown 规范，但 Hugo 支持开箱即用的表格：
+表格不是 Markdown 核心规范的一部分，但 Hugo 默认支持它们。
 
-   Name | Age
---------|------
-    Bob | 27
-  Alice | 23
+|   姓名 | 年龄  |
+|--------|------|
+|    Bob | 27   |
+|  Alice | 23   |
 
-#### Markdown 表格中的内联
+```markdown {filename=Markdown}
+|   姓名 | 年龄  |
+|--------|------|
+|    Bob | 27   |
+|  Alice | 23   |
+```
 
-| Italics   | Bold     | Code   |
+#### 表格中的内联 Markdown
+
+| 斜体   | 粗体     | 代码   |
 | --------  | -------- | ------ |
-| *italics* | **bold** | `code` |
+| *斜体* | **粗体** | `代码` |
+
+```markdown {filename=Markdown}
+| 斜体   | 粗体     | 代码   |
+| --------  | -------- | ------ |
+| *斜体* | **粗体** | `代码` |
+```
 
 ### 代码块
 
 {{< cards >}}
-  {{< card link="../../guide/syntax-highlighting" title="Syntax Highlighting" icon="sparkles" >}}
+  {{< card link="../../guide/syntax-highlighting" title="语法高亮" icon="sparkles" >}}
 {{< /cards >}}
 
 ### 列表
 
 #### 有序列表
 
-1. First item
-2. Second item
-3. Third item
+1. 第一项
+2. 第二项
+3. 第三项
+
+```markdown {filename=Markdown}
+1. 第一项
+2. 第二项
+3. 第三项
+```
 
 #### 无序列表
 
-* List item
-* Another item
-* And another item
+* 列表项
+* 另一个项
+* 再一个项
+
+```markdown {filename=Markdown}
+* 列表项
+* 另一个项
+* 再一个项
+```
 
 #### 嵌套列表
 
-* Fruit
-  * Apple
-  * Orange
-  * Banana
-* Dairy
-  * Milk
-  * Cheese
+* 水果
+  * 苹果
+  * 橙子
+  * 香蕉
+* 乳制品
+  * 牛奶
+  * 奶酪
+
+```markdown {filename=Markdown}
+* 水果
+  * 苹果
+  * 橙子
+  * 香蕉
+* 乳制品
+  * 牛奶
+  * 奶酪
+```
 
 ### 图片
 
-![](https://source.unsplash.com/featured/800x600?landscape)
+![风景](https://picsum.photos/800/600)
 
-带有标题：
+```markdown {filename=Markdown}
+![风景](https://picsum.photos/800/600)
+```
 
-![](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+带标题：
+
+![风景](https://picsum.photos/800/600 "Unsplash 风景")
+
+```markdown {filename=Markdown}
+![风景](https://picsum.photos/800/600 "Unsplash 风景")
+```
 
 ## 配置
 
-Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 解析 Markdown。
-Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 中配置。以下是Hextra的默认配置：
+Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 进行 Markdown 解析。
+Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 下进行配置。
+以下是 Hextra 的默认配置：
 
 ```yaml {filename="hugo.yaml"}
 markup:
@@ -95,11 +186,11 @@ markup:
     noClasses: false
 ```
 
-如需了解更多选项，转至 [Configure Markup](https://gohugo.io/getting-started/configuration-markup/)。
+更多配置选项，请参阅 Hugo 文档中的 [配置 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/)
+* [Markdown 指南](https://www.markdownguide.org/)
+* [Markdown 速查表](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+* [Markdown 教程](https://www.markdowntutorial.com/)
+* [Markdown 参考](https://commonmark.org/help/)

exampleSite/content/docs/guide/organize-files.fa.md

@@ -0,0 +1,147 @@
+---
+title: سازماندهی پرونده‌ها
+weight: 1
+prev: /docs/guide
+---
+
+## ساختار دایرکتوری
+
+به طور پیش‌فرض، Hugo پرونده‌های مارک‌داون را در فهرست `content` جستجو می‌کند و ساختار فهرست، ساختار خروجی نهایی وب‌سایت شما را تعیین می‌کند. همین سایت را به عنوان مثال در نظر بگیرید:
+
+<!--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` صفحه اصلی هر بخش  هستند که برای هر بخش مجزا است. سایر پرونده‌های مارک‌داون صفحه‌های معمولی دیگه‌ای هستند.
+
+```
+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/
+```
+
+## طرح‌بندی‌ها
+
+هگزترا سه طرح‌بندی برای انواع مختلف محتوا ارائه می‌کند:
+
+| طرح‌بندی    | دایرکتوری             | ویژگی‌ها                                                         |
+| :-------- | :-------------------- | :--------------------------------------------------------------- |
+| `docs`    | `content/docs/`       | ایده‌آل برای مستندات ساختار یافته، مانند این بخش.        |
+| `blog`    | `content/blog/`       | برای نوشته‌های وبلاگ، با هر فهرست‌بندی و هم نمایش جزئیات مقاله. |
+| `default` | همه دایرکتوری‌های دیگر | مشاهده مقاله تک صفحه‌ای بدون نوار کناری.                       |
+
+برای سفارشی کردن یک بخش برای منعکس کردن رفتار یک طرح داخلی، نوع طرح‌بندی مورد نظر را در قسمت بالایی قسمت _index.md` مشخص کنید.
+
+```yaml {filename="content/my-docs/_index.md"}
+---
+title: مستندات من
+cascade:
+  type: docs
+---
+```
+
+پیکربندی مثال بالا تضمین می‌کند که پرونده‌های محتوای در داخل `content/my-docs/` به‌طور پیش‌فرض به عنوان مستندات (نوع `docs`) مورد استفاده قرار می‌گیرند.
+
+## ناوبری نوار کناری
+
+ناوبری نوار کناری به طور خودکار براساس حروف الفبا ایجاد می‌شود. برای پیکربندی دستی ترتیب نوار کناری، می‌توانید از پارامتر `weight` در قسمت بالایی پرونده‌های مارک‌داون استفاده کنید.
+
+```yaml {filename="content/docs/guide/_index.md"}
+---
+title: راهنما
+weight: 2
+---
+```
+
+{{< callout emoji="ℹ️">}}
+  توصیه می‌کنیم نوار کناری خیلی عمیق نباشد. اگر محتوای زیادی دارید، آنها را **به چند بخش تقسیم کنید**.
+{{< /callout >}}
+
+## پیکربندی دایرکتوری محتوا
+
+به طور پیش‌فرض، دایرکتوری ریشه `content/` توسط Hugo برای ساخت سایت استفاده می‌شود.
+ اگر نیاز به استفاده از دایرکتوری متفاوتی برای محتوا دارید، برای مثال `docs/`، این کار را می‌توانید با تنظیم پارامتر [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) در پیکربندی سایت `hugo.yaml` انجام دهید.
+
+## افزودن تصاویر
+
+برای افزودن تصاویر، ساده‌ترین راه این است که پرونده‌های عکس‌ها را در همان دایرکتوری پرونده مارک‌داون قرار دهید.
+برای مثال، یک پرونده عکس `image.png` را در کنار پرونده `my-page.md` اضافه کنید:
+
+{{< 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 >}}
+
+سپس، می‌توانید از سینتکس مارک‌داون زیر برای افزودن عکس به محتوا استفاده کنید:
+
+```markdown {filename="content/docs/my-page.md"}
+![](image.png)
+```
+
+همچنین می‌توانید از ویژگی [بسته‌های صفحه][page-bundles] Hugo برای سازماندهی پرونده‌های عکس‌ها همراه با پرونده مارک‌داون استفاده کنید. برای رسیدن به این هدف، پرونده `my-page.md` را به یک دایرکتوری `my-page` تبدیل کنید و محتوا را در پرونده‌ای به نام `index.md` قرار دهید و پرونده‌های عکس‌ها را در دایرکتوری `my-page` قرار دهید:
+
+{{< 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)
+```
+
+همچنین می‌توانید پرونده‌های عکس‌ها را در دایرکتوری `static` قرار دهید که عکس‌ها را برای همه صفحات در دسترس قرار می‌دهد:
+
+{{< 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 >}}
+
+توجه داشته باشید که مسیر عکس با یک اسلش `/` شروع می‌شود و نسبت به دایرکتوری استاتیک است:
+
+```markdown {filename="content/docs/my-page.md"}
+![](/images/image.png)
+```
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

exampleSite/content/docs/guide/organize-files.ja.md

@@ -0,0 +1,187 @@
+---
+title: ファイルの整理
+weight: 1
+prev: /docs/guide
+---
+
+## ディレクトリ構造
+
+デフォルトでは、Hugoは`content`ディレクトリ内の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/
+```
+
+## レイアウト
+
+Hextraは、異なるコンテンツタイプに対して3つのレイアウトを提供します：
+
+| レイアウト | ディレクトリ             | 特徴                                                         |
+| :-------- | :-------------------- | :--------------------------------------------------------------- |
+| `docs`    | `content/docs/`       | 構造化されたドキュメントに最適で、このセクションと同じです。        |
+| `blog`    | `content/blog/`       | ブログ投稿用で、リスト表示と詳細記事表示の両方があります。 |
+| `default` | その他のディレクトリ | サイドバーなしの単一ページ記事表示です。                        |
+
+セクションの動作をビルトインレイアウトと同じにするには、セクションの`_index.md`のフロントマターで希望するタイプを指定します。
+
+```yaml {filename="content/my-docs/_index.md"}
+---
+title: My Docs
+cascade:
+  type: docs
+---
+```
+
+上記の設定例により、`content/my-docs/`内のコンテンツファイルはデフォルトでドキュメント（`docs`タイプ）として扱われます。
+
+## サイドバーナビゲーション
+
+サイドバーナビゲーションは、コンテンツの整理に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdownファイルのフロントマターで`weight`パラメータを使用します。
+
+```yaml {filename="content/docs/guide/_index.md"}
+---
+title: Guide
+weight: 2
+---
+```
+
+{{< callout emoji="ℹ️">}}
+  サイドバーがあまり深くならないようにすることをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
+{{< /callout >}}
+
+## パンくずナビゲーション
+
+パンくずは、`/content`のディレクトリ構造に基づいて自動生成されます。
+
+例えば、[上記のファイル構造](#directory-structure)を考えます。その構造に基づいて、`/docs/guide/organize-files/`ページの上部にパンくずが自動的に表示されます：
+
+```
+Documentation > Guide > Organize Files
+```
+
+### パンくずリンクのタイトルをカスタマイズ
+
+デフォルトでは、各パンくずリンクはそのページの`title`パラメータに基づいて生成されます。これをカスタマイズするには、`linkTitle`を指定します。
+
+例えば、`Organize Files`の代わりに`Foo Bar`と表示したい場合：
+
+```yaml {filename="content/docs/guide/organize-files.md"}
+---
+linkTitle: Foo Bar
+title: Organize Files
+---
+```
+
+これにより、以下のパンくずが生成されます：
+```
+Documentation > Guide > Foo Bar
+```
+
+### パンくずを非表示にする
+
+ページのフロントマターで`breadcrumbs: false`を指定することで、パンくずを完全に非表示にできます：
+
+```yaml {filename="content/docs/guide/organize-files.md"}
+---
+breadcrumbs: false
+title: Organize Files
+---
+```
+
+## コンテンツディレクトリの設定
+
+デフォルトでは、Hugoはサイトを構築するためにルートの`content/`ディレクトリを使用します。
+例えば`docs/`など、異なるディレクトリをコンテンツに使用する必要がある場合は、サイト設定`hugo.yaml`で[`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir)パラメータを設定することで行えます。
+
+## 画像の追加
+
+画像を追加する最も簡単な方法は、画像ファイルをMarkdownファイルと同じディレクトリに置くことです。
+例えば、`my-page.md`ファイルと同じディレクトリに`image.png`ファイルを追加します：
+
+{{< 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 >}}
+
+その後、以下のMarkdown構文を使用してコンテンツに画像を追加できます：
+
+```markdown {filename="content/docs/my-page.md"}
+![](image.png)
+```
+
+また、Hugoの[ページバンドル][page-bundles]機能を利用して、画像ファイルをMarkdownファイルと一緒に整理することもできます。そのためには、`my-page.md`ファイルを`my-page`ディレクトリに変換し、コンテンツを`index.md`というファイルに置き、画像ファイルを`my-page`ディレクトリ内に置きます：
+
+{{< 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)
+```
+
+または、画像ファイルを`static`ディレクトリに置くこともできます。これにより、すべてのページで画像が利用可能になります：
+
+{{< 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 >}}
+
+画像パスはスラッシュ`/`で始まり、`static`ディレクトリからの相対パスであることに注意してください：
+
+```markdown {filename="content/docs/my-page.md"}
+![](/images/image.png)
+```
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

exampleSite/content/docs/guide/organize-files.md

@@ -82,6 +82,45 @@ weight: 2
   It is recommended to keep the sidebar not too deep. If you have a lot of content, consider **splitting them into multiple sections**.
 {{< /callout >}}
 
+## Breadcrumb Navigation
+
+Breadcrumbs are auto-generated based on the directory structure of `/content`.
+
+For example, consider the file structure [demonstrated above](#directory-structure). Given that structure, the breadcrumbs atop the page at `/docs/guide/organize-files/` would appear automatically as follows:
+
+```
+Documentation > Guide > Organize Files
+```
+
+### Customizing Breadcrumb Link Titles
+
+By default, each breadcrumb link is generated based on that page's `title` parameter. You can customize this by specifying a `linkTitle`.
+
+For example, if instead of `Organize Files` we wanted the breadcrumb to be `Foo Bar`:
+
+```yaml {filename="content/docs/guide/organize-files.md"}
+---
+linkTitle: Foo Bar
+title: Organize Files
+---
+```
+
+This would now generate the following breadcrumbs:
+```
+Documentation > Guide > Foo Bar
+```
+
+### Hiding Breadcrumbs
+
+You can hide breadcrumbs completely from a page by specifying `breadcrumbs: false` in its front matter:
+
+```yaml {filename="content/docs/guide/organize-files.md"}
+---
+breadcrumbs: false
+title: Organize Files
+---
+```
+
 ## Configure Content Directory
 
 By default, the root `content/` directory is used by Hugo to build the site.

exampleSite/content/docs/guide/organize-files.zh-cn.md

@@ -1,13 +1,13 @@
 ---
-title: 目录结构
+title: 组织文件
 weight: 1
 prev: /docs/guide
 ---
 
 ## 目录结构
 
-默认情况下，Hugo 在 `context` 目录中搜索 Markdown 文件，目录的结构决定了网站的最终输出结构。
-以示例网站为例：
+默认情况下，Hugo 会在 `content` 目录中查找 Markdown 文件，目录的结构决定了网站最终的输出结构。
+以本网站为例：
 
 <!--more-->
 
@@ -29,7 +29,7 @@ prev: /docs/guide
   {{< /filetree/folder >}}
 {{< /filetree/container >}}
 
-每个 `_index.md` 文件都是相应部分的索引页，其他 Markdown 文件则是常规页面。
+每个 `_index.md` 文件都是对应部分的索引页面。其他 Markdown 文件则是常规页面。
 
 ```
 content
@@ -45,21 +45,143 @@ content
     └── post-1.md // <- /blog/post-1/
 ```
 
+## 布局
+
+Hextra 为不同类型的内容提供了三种布局：
+
+| 布局      | 目录               | 特性                                                         |
+| :-------- | :------------------ | :----------------------------------------------------------- |
+| `docs`    | `content/docs/`     | 适合结构化文档，与本部分相同。                               |
+| `blog`    | `content/blog/`     | 用于博客文章，包含列表和详细文章视图。                       |
+| `default` | 其他所有目录        | 单页文章视图，无侧边栏。                                     |
+
+要将某个部分自定义为与内置布局相同的行为，可以在该部分的 `_index.md` 的前言中指定所需的类型。
+
+```yaml {filename="content/my-docs/_index.md"}
+---
+title: 我的文档
+cascade:
+  type: docs
+---
+```
+
+上述示例配置确保 `content/my-docs/` 中的内容文件默认会被视为文档（`docs` 类型）。
+
 ## 侧边栏导航
 
-侧边栏导航是根据内容组织的字母顺序自动生成的。要手动配置侧边栏顺序，可以在 Markdown 文件的 `frontmatter ` 中使用 `weight` 配置。
+侧边栏导航会根据内容组织按字母顺序自动生成。要手动配置侧边栏顺序，可以在 Markdown 文件的前言中使用 `weight` 参数。
 
 ```yaml {filename="content/docs/guide/_index.md"}
 ---
-title: Guide
+title: 指南
 weight: 2
 ---
 ```
 
 {{< callout emoji="ℹ️">}}
-  建议侧边栏不要太深。如果内容太多，请考虑 **将它们分成多个部分**。
+  建议不要让侧边栏过深。如果你有很多内容，考虑**将它们分成多个部分**。
 {{< /callout >}}
 
+## 面包屑导航
+
+面包屑导航会根据 `/content` 的目录结构自动生成。
+
+例如，考虑上面[展示的目录结构](#directory-structure)。根据该结构，页面 `/docs/guide/organize-files/` 顶部的面包屑导航会自动显示如下：
+
+```
+文档 > 指南 > 组织文件
+```
+
+### 自定义面包屑链接标题
+
+默认情况下，每个面包屑链接是根据页面的 `title` 参数生成的。你可以通过指定 `linkTitle` 来自定义。
+
+例如，如果我们希望面包屑显示为 `Foo Bar` 而不是 `Organize Files`：
+
+```yaml {filename="content/docs/guide/organize-files.md"}
+---
+linkTitle: Foo Bar
+title: 组织文件
+---
+```
+
+现在会生成以下面包屑：
+```
+文档 > 指南 > Foo Bar
+```
+
+### 隐藏面包屑
+
+你可以通过在页面的前言中指定 `breadcrumbs: false` 来完全隐藏面包屑：
+
+```yaml {filename="content/docs/guide/organize-files.md"}
+---
+breadcrumbs: false
+title: 组织文件
+---
+```
+
 ## 配置内容目录
 
-如果需要为的内容使用不同的目录，可以在站点配置文件中设置 [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) 来实现。
+默认情况下，Hugo 使用根目录 `content/` 来构建网站。
+如果你需要使用不同的目录来存放内容，例如 `docs/`，可以通过在站点配置文件 `hugo.yaml` 中设置 [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) 参数来实现。
+
+## 添加图片
+
+添加图片的最简单方法是将图片文件放在与 Markdown 文件相同的目录中。
+例如，将图片文件 `image.png` 与 `my-page.md` 文件放在一起：
+
+{{< 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 >}}
+
+然后，我们可以使用以下 Markdown 语法将图片添加到内容中：
+
+```markdown {filename="content/docs/my-page.md"}
+![](image.png)
+```
+
+我们还可以利用 Hugo 的 [页面包][page-bundles] 功能将图片文件与 Markdown 文件一起组织。为此，将 `my-page.md` 文件转换为目录 `my-page`，并将内容放入名为 `index.md` 的文件中，然后将图片文件放入 `my-page` 目录中：
+
+{{< 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)
+```
+
+或者，我们也可以将图片文件放在 `static` 目录中，这样所有页面都可以访问这些图片：
+
+{{< 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 >}}
+
+注意，图片路径以斜杠 `/` 开头，并且相对于静态目录：
+
+```markdown {filename="content/docs/my-page.md"}
+![](/images/image.png)
+```
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

exampleSite/content/docs/guide/shortcodes/_index.fa.md

@@ -0,0 +1,21 @@
+---
+title: کدهای کوتاه
+weight: 9
+prev: /docs/guide/diagrams
+next: /docs/guide/shortcodes/filetree
+---
+
+[کدهای کوتاه Hugo](https://gohugo.io/content-management/shortcodes/) قطعه‌های ساده‌ای در داخل پرونده‌های محتوای شما هستند که قالب‌های داخلی یا سفارشی را فراخوانی می‌کنند.
+
+هگزترا مجموعه‌ای از کدهای کوتاه زیبا را برای بهبود محتوای شما ارائه می‌کند.
+
+
+{{< cards >}}
+  {{< card link="filetree" title="FileTree" icon="folder-tree" >}}
+  {{< card link="icon" title="آیکون" icon="badge-check" >}}
+  {{< card link="details" title="جزئیات" icon="chevron-right" >}}
+  {{< card link="tabs" title="زبانه‌ها" icon="collection" >}}
+  {{< card link="callout" title="فراخوانی" icon="warning" >}}
+  {{< card link="cards" title="کارت‌ها" icon="card" >}}
+  {{< card link="steps" title="مراحل" icon="one" >}}
+{{< /cards >}}

exampleSite/content/docs/guide/shortcodes/_index.ja.md

@@ -0,0 +1,29 @@
+---
+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="details" title="詳細" icon="chevron-right" >}}
+  {{< card link="filetree" title="FileTree" icon="folder-tree" >}}
+  {{< card link="icon" title="アイコン" icon="badge-check" >}}
+  {{< card link="steps" title="ステップ" icon="one" >}}
+  {{< card link="tabs" title="タブ" icon="collection" >}}
+{{< /cards >}}
+
+<div style="padding-top:4rem"></div>
+
+Hugo と Hextra が提供する追加のショートコード:
+
+{{< cards >}}
+  {{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
+  {{< card link="others" title="その他" icon="view-grid" >}}
+{{< /cards >}}

exampleSite/content/docs/guide/shortcodes/_index.md

@@ -9,7 +9,6 @@ next: /docs/guide/shortcodes/callout
 
 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" >}}
@@ -19,3 +18,12 @@ Hextra provides a collection of beautiful shortcodes to enhance your content.
   {{< card link="steps" title="Steps" icon="one" >}}
   {{< card link="tabs" title="Tabs" icon="collection" >}}
 {{< /cards >}}
+
+<div style="padding-top:4rem"></div>
+
+Additional shortcodes provided by Hugo and Hextra:
+
+{{< cards >}}
+  {{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
+  {{< card link="others" title="Others" icon="view-grid" >}}
+{{< /cards >}}

exampleSite/content/docs/guide/shortcodes/_index.zh-cn.md

@@ -5,15 +5,25 @@ prev: /docs/guide/diagrams
 next: /docs/guide/shortcodes/callout
 ---
 
-[Hugo 短代码](https://gohugo.io/content-management/shortcodes/) 是你的内容文件中调用内置或自定义模板的简单片段。
+[Hugo 短代码](https://gohugo.io/content-management/shortcodes/)是内容文件中的简单片段，用于调用内置或自定义模板。
 
-Hextra 提供了一系列美观的短代码以增强你的内容。
+Hextra 提供了一系列精美的短代码，以增强您的内容。
 
 {{< cards >}}
-  {{< card link="callout" title="注意事项" icon="warning" >}}
+  {{< card link="callout" title="标注" icon="warning" >}}
   {{< card link="cards" title="卡片" icon="card" >}}
+  {{< card link="details" title="详情" icon="chevron-right" >}}
   {{< 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" >}}
+  {{< card link="tabs" title="标签页" icon="collection" >}}
 {{< /cards >}}
+
+<div style="padding-top:4rem"></div>
+
+Hugo 和 Hextra 提供的其他短代码：
+
+{{< cards >}}
+  {{< card link="jupyter" title="Jupyter 笔记本" icon="jupyter" tag="alpha" >}}
+  {{< card link="others" title="其他" icon="view-grid" >}}
+{{< /cards >}}

exampleSite/content/docs/guide/shortcodes/callout.fa.md

@@ -0,0 +1,78 @@
+---
+title: کامپوننت فراخوانی
+linkTitle: فراخوانی
+aliases:
+- فراخوانی‌ها
+---
+
+یک کامپوننت داخلی برای نشان دادن اطلاعات مهم به خواننده.
+
+<!--more-->
+
+## مثال
+
+{{< callout emoji="👾">}}
+  **فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  **فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  **فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  **فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
+{{< /callout >}}
+
+## استفاده
+
+### پیش‌فرض
+
+{{< callout emoji="🌐">}}
+  Hugo را می‌توانید برای ایجاد طیف گسترده‌ای از وب‌سایت‌ها، از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندسازی و غیره استفاده کرد.
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  Hugo را می‌توانید برای ایجاد طیف گسترده‌ای از وب‌سایت‌ها، از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندسازی و غیره استفاده کرد.
+{{</* /callout */>}}
+```
+
+### اطلاعات
+
+{{< callout type="info" >}}
+  لطفا برای مشاهده آخرین نسخه‌ها به گیت‌هاب مراجعه کنید.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" */>}}
+  لطفا برای مشاهده آخرین نسخه‌ها به گیت‌هاب مراجعه کنید.
+{{</* /callout */>}}
+```
+
+### هشدار
+
+{{< callout type="warning" >}}
+  این API در نسخه بعدی منسوخ خواهد شد.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="warning" */>}}
+  این API در نسخه بعدی منسوخ خواهد شد.
+{{</* /callout */>}}
+```
+
+### خطا
+
+{{< callout type="error" >}}
+  مشکلی پیش آمد و اتفاقی رخ خواهد شد.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="error" */>}}
+  مشکلی پیش آمد و اتفاقی رخ خواهد شد.
+{{</* /callout */>}}
+```

exampleSite/content/docs/guide/shortcodes/callout.ja.md

@@ -0,0 +1,83 @@
+---
+title: コールアウトコンポーネント
+linkTitle: コールアウト
+aliases:
+- callouts
+prev: /docs/guide/shortcodes
+---
+
+読者に重要な情報を示すための組み込みコンポーネントです。
+
+<!--more-->
+
+> [!NOTE]
+> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
+> これはMarkdown構文を活用してコールアウトをレンダリングし、コンテンツの移植性と可読性を向上させます。
+
+## 例
+
+{{< callout emoji="👾">}}
+  **コールアウト**は、注意を引くための短いテキストです。
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  **コールアウト**は、注意を引くための短いテキストです。
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  **コールアウト**は、注意を引くための短いテキストです。
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  **コールアウト**は、注意を引くための短いテキストです。
+{{< /callout >}}
+
+## 使用方法
+
+### デフォルト
+
+{{< callout emoji="🌐">}}
+  Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
+{{</* /callout */>}}
+```
+
+### 情報
+
+{{< callout type="info" >}}
+  最新のリリースを確認するには、GitHubをご覧ください。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" */>}}
+  最新のリリースを確認するには、GitHubをご覧ください。
+{{</* /callout */>}}
+```
+
+### 警告
+
+{{< callout type="warning" >}}
+  このAPIは次のバージョンで非推奨になります。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="warning" */>}}
+  **コールアウト**は、注意を引くための短いテキストです。
+{{</* /callout */>}}
+```
+
+### エラー
+
+{{< callout type="error" >}}
+  何か問題が発生し、爆発しそうです。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="error" */>}}
+  何か問題が発生し、爆発しそうです。
+{{</* /callout */>}}
+```

exampleSite/content/docs/guide/shortcodes/callout.md

@@ -10,6 +10,10 @@ A built-in component to show important information to the reader.
 
 <!--more-->
 
+> [!NOTE]
+> [GitHub-style alerts](../../markdown#alerts) are supported since [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0).
+> It leverages Markdown syntax to render the callout which ensures better portability and readability of the content.
+
 ## Example
 
 {{< callout emoji="👾">}}

exampleSite/content/docs/guide/shortcodes/callout.zh-cn.md

@@ -0,0 +1,83 @@
+---
+title: 提示框组件
+linkTitle: 提示框
+aliases:
+- 提示框
+prev: /docs/guide/shortcodes
+---
+
+一个内置组件，用于向读者展示重要信息。
+
+<!--more-->
+
+> [!NOTE]
+> 自 [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) 起支持 [GitHub 风格的提醒](../../markdown#alerts)。
+> 它利用 Markdown 语法来渲染提示框，确保内容具有更好的可移植性和可读性。
+
+## 示例
+
+{{< callout emoji="👾">}}
+  **提示框** 是一段简短的文本，旨在吸引注意力。
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  **提示框** 是一段简短的文本，旨在吸引注意力。
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  **提示框** 是一段简短的文本，旨在吸引注意力。
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  **提示框** 是一段简短的文本，旨在吸引注意力。
+{{< /callout >}}
+
+## 用法
+
+### 默认
+
+{{< callout emoji="🌐">}}
+  Hugo 可用于创建各种类型的网站，包括博客、作品集、文档站点等。
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  Hugo 可用于创建各种类型的网站，包括博客、作品集、文档站点等。
+{{</* /callout */>}}
+```
+
+### 信息
+
+{{< callout type="info" >}}
+  请访问 GitHub 查看最新版本。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" */>}}
+  请访问 GitHub 查看最新版本。
+{{</* /callout */>}}
+```
+
+### 警告
+
+{{< callout type="warning" >}}
+  此 API 将在下一个版本中弃用。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="warning" */>}}
+  **提示框** 是一段简短的文本，旨在吸引注意力。
+{{</* /callout */>}}
+```
+
+### 错误
+
+{{< callout type="error" >}}
+  出错了，系统即将崩溃。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="error" */>}}
+  出错了，系统即将崩溃。
+{{</* /callout */>}}
+```