chore: bump minimum hugo version

* refactor: modularize scripts partial into separate components

* fix: conditionally load Mermaid and KaTeX scripts

.devcontainer/devcontainer.json

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

.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,7 +31,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.126.1
+      HUGO_VERSION: 0.145.0
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -41,10 +41,10 @@ jobs:
       - name: Setup Go
         uses: actions/setup-go@v5
         with:
-          go-version: '1.22'
+          go-version: '1.23'
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v5
       - 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 \
@@ -54,11 +54,12 @@ jobs:
           # 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 \
+          cd exampleSite && rm go.mod
-            --minify \
+          hugo mod init github.com/imfing/hextra/exampleSite
-            --themesDir=../.. --source=exampleSite \
+          hugo mod get -u github.com/imfing/hextra
-            --baseURL "${{ steps.pages.outputs.base_url }}/"
+          hugo --minify --baseURL "${{ steps.pages.outputs.base_url }}/"
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

.prettierrc

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

README.zh-cn.md

@@ -21,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/compiled/main.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -584,10 +584,6 @@ video {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
-.hx-mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
 .hx-mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -596,10 +592,6 @@ video {
   margin-left: auto;
   margin-right: auto;
 }
-.hx-my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
 .hx-my-1\.5 {
   margin-top: 0.375rem;
   margin-bottom: 0.375rem;
@@ -608,9 +600,6 @@ video {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.-hx-mb-0 {
-  margin-bottom: -0px;
-}
 .-hx-mb-0\.5 {
   margin-bottom: -0.125rem;
 }
@@ -719,9 +708,6 @@ video {
 .hx-h-2 {
   height: 0.5rem;
 }
-.hx-h-3 {
-  height: 0.75rem;
-}
 .hx-h-3\.5 {
   height: 0.875rem;
 }
@@ -758,9 +744,6 @@ video {
 .hx-w-2 {
   width: 0.5rem;
 }
-.hx-w-3 {
-  width: 0.75rem;
-}
 .hx-w-3\.5 {
   width: 0.875rem;
 }
@@ -852,6 +835,9 @@ video {
      -moz-appearance: none;
           appearance: none;
 }
+.hx-grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
 .hx-flex-col {
   flex-direction: column;
 }
@@ -888,10 +874,6 @@ video {
 .hx-gap-4 {
   gap: 1rem;
 }
-.hx-gap-x-1 {
-  -moz-column-gap: 0.25rem;
-       column-gap: 0.25rem;
-}
 .hx-gap-x-1\.5 {
   -moz-column-gap: 0.375rem;
        column-gap: 0.375rem;
@@ -914,9 +896,15 @@ video {
 .hx-overflow-x-hidden {
   overflow-x: hidden;
 }
+.hx-overflow-y-hidden {
+  overflow-y: hidden;
+}
 .hx-overscroll-contain {
   overscroll-behavior: contain;
 }
+.hx-overscroll-x-contain {
+  overscroll-behavior-x: contain;
+}
 .hx-text-ellipsis {
   text-overflow: ellipsis;
 }
@@ -963,6 +951,10 @@ video {
 .hx-border-t {
   border-top-width: 1px;
 }
+.hx-border-amber-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 230 138 / var(--tw-border-opacity));
+}
 .hx-border-black\/5 {
   border-color: rgb(0 0 0 / 0.05);
 }
@@ -978,6 +970,14 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
+.hx-border-green-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(187 247 208 / var(--tw-border-opacity));
+}
+.hx-border-indigo-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(199 210 254 / var(--tw-border-opacity));
+}
 .hx-border-orange-100 {
   --tw-border-opacity: 1;
   border-color: rgb(255 237 213 / var(--tw-border-opacity));
@@ -993,6 +993,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(254 249 195 / var(--tw-border-opacity));
 }
+.hx-bg-amber-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
+}
 .hx-bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
@@ -1007,6 +1011,14 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
+.hx-bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+.hx-bg-indigo-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+}
 .hx-bg-neutral-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
@@ -1017,18 +1029,18 @@ video {
 }
 .hx-bg-primary-100 {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / var(--tw-bg-opacity));
 }
 .hx-bg-primary-400 {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / var(--tw-bg-opacity));
 }
 .hx-bg-primary-600 {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-bg-opacity));
 }
 .hx-bg-primary-700\/5 {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
 }
 .hx-bg-red-100 {
   --tw-bg-opacity: 1;
@@ -1060,9 +1072,6 @@ video {
   -webkit-background-clip: text;
           background-clip: text;
 }
-.hx-p-0 {
-  padding: 0px;
-}
 .hx-p-0\.5 {
   padding: 0.125rem;
 }
@@ -1081,10 +1090,6 @@ video {
 .hx-p-6 {
   padding: 1.5rem;
 }
-.hx-px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
 .hx-px-1\.5 {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
@@ -1093,6 +1098,10 @@ video {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.hx-px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
 .hx-px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1175,6 +1184,9 @@ video {
 .hx-text-center {
   text-align: center;
 }
+.hx-align-middle {
+  vertical-align: middle;
+}
 .hx-align-text-bottom {
   vertical-align: text-bottom;
 }
@@ -1190,6 +1202,9 @@ video {
 .hx-text-4xl {
   font-size: 2.25rem;
 }
+.hx-text-\[\.65rem\] {
+  font-size: .65rem;
+}
 .hx-text-\[10px\] {
   font-size: 10px;
 }
@@ -1248,6 +1263,10 @@ video {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-hue) 100% 50% / var(--tw-text-opacity));
 }
+.hx-text-amber-900 {
+  --tw-text-opacity: 1;
+  color: rgb(120 53 15 / var(--tw-text-opacity));
+}
 .hx-text-blue-900 {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -1279,13 +1298,21 @@ video {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
+.hx-text-green-900 {
+  --tw-text-opacity: 1;
+  color: rgb(20 83 45 / var(--tw-text-opacity));
+}
+.hx-text-indigo-900 {
+  --tw-text-opacity: 1;
+  color: rgb(49 46 129 / var(--tw-text-opacity));
+}
 .hx-text-orange-800 {
   --tw-text-opacity: 1;
   color: rgb(154 52 18 / var(--tw-text-opacity));
 }
 .hx-text-primary-800 {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-text-opacity));
 }
 .hx-text-red-900 {
   --tw-text-opacity: 1;
@@ -1460,7 +1487,7 @@ video {
   }
 }
 .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
-  border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.1);
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.1);
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
@@ -1528,7 +1555,7 @@ video {
 }
 .content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
   text-decoration-line: underline;
   text-decoration-thickness: from-font;
   text-underline-position: from-font;
@@ -1562,7 +1589,7 @@ video {
   margin-bottom: 1rem;
   overflow-x: auto;
   border-radius: 0.75rem;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
   padding-top: 1rem;
   padding-bottom: 1rem;
   font-size: .9em;
@@ -1574,18 +1601,18 @@ video {
 
   .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
     border-width: 1px;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24) / 0.2);
     --tw-contrast: contrast(1.5);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
 }
 .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
 }
 @media (prefers-contrast: more) {
 
   .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.4);
   }
 }
 .content :where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
@@ -2119,7 +2146,7 @@ article details > summary::before {
 /* GenericDeleted */
 .dark .highlight .chroma .gd { color: #ffa198; background-color: #490202 }
 /* GenericEmph */
-.dark .highlight .chroma .ge { font-style: italic }
+.dark .highlight .chroma .ge { color: inherit; font-style: italic }
 /* GenericError */
 .dark .highlight .chroma .gr { color: #ffa198 }
 /* GenericHeading */
@@ -2146,7 +2173,7 @@ article details > summary::before {
 }
 .hextra-code-block pre {
   overflow-x: auto;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
   font-size: .9em;
   font-weight: 500;
   -webkit-font-smoothing: auto;
@@ -2156,18 +2183,18 @@ article details > summary::before {
 
   .hextra-code-block pre {
     border-width: 1px;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24) / 0.2);
     --tw-contrast: contrast(1.5);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
 }
 .hextra-code-block pre:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
 }
 @media (prefers-contrast: more) {
 
   .hextra-code-block pre:is(html[class~="dark"] *) {
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.4);
   }
 }
 .hextra-code-block .filename {
@@ -2180,7 +2207,7 @@ article details > summary::before {
   white-space: nowrap;
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 1rem;
@@ -2190,7 +2217,7 @@ article details > summary::before {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 .hextra-code-block .filename:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
@@ -2247,11 +2274,14 @@ article details > summary::before {
 .chroma .hl {
   display: block;
   width: 100%;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / 0.1);
 }
 .hextra-cards {
   grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
 }
+.hextra-card {
+  position: relative;
+}
 .hextra-card img {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -2267,6 +2297,7 @@ article details > summary::before {
 }
 .hextra-card p {
   margin-top: 0.5rem;
+  position: relative;
 }
 .dark .hextra-card svg {
   color: #ffffff66;
@@ -2274,6 +2305,12 @@ article details > summary::before {
 .dark .hextra-card:hover svg {
   color: currentColor;
 }
+.hextra-card-tag {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 10;
+}
 .steps h3 {
   counter-increment: step;
 }
@@ -2349,13 +2386,13 @@ article details > summary::before {
 }
 .search-wrapper li .active {
   border-radius: 0.375rem;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / 0.1);
 }
 @media (prefers-contrast: more) {
 
   .search-wrapper li .active {
     --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
   }
 }
 .search-wrapper .no-result {
@@ -2442,7 +2479,7 @@ article details > summary::before {
   }
 .search-wrapper .match {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
 }
 @media (max-width: 767px) {
   .sidebar-container {
@@ -2535,30 +2572,30 @@ nav .search-wrapper {
 .hamburger-menu svg.open > g:nth-of-type(2) path {
         transform: translate3d(0, -4px, 0);
       }
-.hextra-scrollbar {
+.hextra-scrollbar, .hextra-scrollbar * {
   scrollbar-width: thin; /* Firefox */
   scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
 
   scrollbar-gutter: stable;
 }
-.hextra-scrollbar::-webkit-scrollbar {
+.hextra-scrollbar::-webkit-scrollbar, .hextra-scrollbar *::-webkit-scrollbar {
   height: 0.75rem;
   width: 0.75rem;
 }
-.hextra-scrollbar::-webkit-scrollbar-track {
+.hextra-scrollbar::-webkit-scrollbar-track, .hextra-scrollbar *::-webkit-scrollbar-track {
   background-color: transparent;
 }
-.hextra-scrollbar::-webkit-scrollbar-thumb {
+.hextra-scrollbar::-webkit-scrollbar-thumb, .hextra-scrollbar *::-webkit-scrollbar-thumb {
   border-radius: 10px;
 }
-.hextra-scrollbar:hover::-webkit-scrollbar-thumb {
+.hextra-scrollbar:hover::-webkit-scrollbar-thumb, .hextra-scrollbar *:hover::-webkit-scrollbar-thumb {
     border: 3px solid transparent;
     background-color: var(--tw-shadow-color);
     background-clip: content-box;
     --tw-shadow-color: rgb(115 115 115 / 0.2);
     --tw-shadow: var(--tw-shadow-colored);
   }
-.hextra-scrollbar:hover::-webkit-scrollbar-thumb:hover {
+.hextra-scrollbar:hover::-webkit-scrollbar-thumb:hover, .hextra-scrollbar *:hover::-webkit-scrollbar-thumb:hover {
   --tw-shadow-color: rgb(115 115 115 / 0.4);
   --tw-shadow: var(--tw-shadow-colored);
 }
@@ -2580,6 +2617,27 @@ nav .search-wrapper {
     grid-template-columns: repeat(var(--hextra-feature-grid-cols), minmax(0, 1fr))
 }
   }
+.hextra-jupyter-code-cell {
+  scrollbar-gutter: auto;
+  margin-top: 1.5rem;
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container {
+  overflow: hidden;
+  font-size: .75rem;
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container .hextra-jupyter-code-cell-outputs {
+  max-height: 50vh;
+  overflow: auto;
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container .hextra-jupyter-code-cell-outputs pre {
+  max-width: 100%;
+  overflow: auto;
+  font-size: .75rem;
+}
+.hextra-badge {
+  display: inline-flex;
+  align-items: center;
+}
 html {
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;
@@ -2601,12 +2659,14 @@ body:is(html[class~="dark"] *) {
 :root {
   --primary-hue: 212deg;
   --primary-saturation: 100%;
+  --primary-lightness: 50%;
   --navbar-height: 4rem;
   --menu-height: 3.75rem;
 }
 .dark {
   --primary-hue: 204deg;
   --primary-saturation: 100%;
+  --primary-lightness: 50%;
 }
 .placeholder\:hx-text-gray-500::-moz-placeholder {
   --tw-text-opacity: 1;
@@ -2703,11 +2763,11 @@ body:is(html[class~="dark"] *) {
 }
 .hover\:hx-bg-primary-50:hover {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 97% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 47) / var(--tw-bg-opacity));
 }
 .hover\:hx-bg-primary-700:hover {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / var(--tw-bg-opacity));
 }
 .hover\:hx-bg-slate-50:hover {
   --tw-bg-opacity: 1;
@@ -2727,7 +2787,7 @@ body:is(html[class~="dark"] *) {
 }
 .hover\:hx-text-primary-600:hover {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
 }
 .hover\:hx-opacity-60:hover {
   opacity: 0.6;
@@ -2764,7 +2824,7 @@ body:is(html[class~="dark"] *) {
 }
 .focus\:hx-ring-primary-300:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / var(--tw-ring-opacity));
+  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / var(--tw-ring-opacity));
 }
 .active\:hx-bg-gray-400\/20:active {
   background-color: rgb(156 163 175 / 0.2);
@@ -2798,27 +2858,27 @@ body:is(html[class~="dark"] *) {
 .hx-group\/copybtn.copied .group-\[\.copied\]\/copybtn\:hx-hidden {
   display: none;
 }
-.data-\[state\=selected\]\:hx-block[data-state=selected] {
+.data-\[state\=selected\]\:hx-block[data-state="selected"] {
   display: block;
 }
-.data-\[state\=closed\]\:hx-hidden[data-state=closed] {
+.data-\[state\=closed\]\:hx-hidden[data-state="closed"] {
   display: none;
 }
-.data-\[state\=open\]\:hx-hidden[data-state=open] {
+.data-\[state\=open\]\:hx-hidden[data-state="open"] {
   display: none;
 }
-.data-\[state\=selected\]\:hx-border-primary-500[data-state=selected] {
+.data-\[state\=selected\]\:hx-border-primary-500[data-state="selected"] {
   --tw-border-opacity: 1;
-  border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
 }
-.data-\[state\=selected\]\:hx-text-primary-600[data-state=selected] {
+.data-\[state\=selected\]\:hx-text-primary-600[data-state="selected"] {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
 }
-.hx-group[data-theme=dark] .group-data-\[theme\=dark\]\:hx-hidden {
+.hx-group[data-theme="dark"] .group-data-\[theme\=dark\]\:hx-hidden {
   display: none;
 }
-.hx-group[data-theme=light] .group-data-\[theme\=light\]\:hx-hidden {
+.hx-group[data-theme="light"] .group-data-\[theme\=light\]\:hx-hidden {
   display: none;
 }
 @media (prefers-contrast: more) {
@@ -2852,7 +2912,7 @@ body:is(html[class~="dark"] *) {
 
   .contrast-more\:hx-border-primary-500 {
     --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
   }
 
   .contrast-more\:hx-border-transparent {
@@ -2909,6 +2969,9 @@ body:is(html[class~="dark"] *) {
 .dark\:hx-hidden:is(html[class~="dark"] *) {
   display: none;
 }
+.dark\:hx-border-amber-200\/30:is(html[class~="dark"] *) {
+  border-color: rgb(253 230 138 / 0.3);
+}
 .dark\:hx-border-blue-200\/30:is(html[class~="dark"] *) {
   border-color: rgb(191 219 254 / 0.3);
 }
@@ -2919,6 +2982,12 @@ body:is(html[class~="dark"] *) {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
+.dark\:hx-border-green-200\/30:is(html[class~="dark"] *) {
+  border-color: rgb(187 247 208 / 0.3);
+}
+.dark\:hx-border-indigo-200\/30:is(html[class~="dark"] *) {
+  border-color: rgb(199 210 254 / 0.3);
+}
 .dark\:hx-border-neutral-700:is(html[class~="dark"] *) {
   --tw-border-opacity: 1;
   border-color: rgb(64 64 64 / var(--tw-border-opacity));
@@ -2939,6 +3008,9 @@ body:is(html[class~="dark"] *) {
 .dark\:hx-border-yellow-200\/30:is(html[class~="dark"] *) {
   border-color: rgb(254 240 138 / 0.3);
 }
+.dark\:hx-bg-amber-900\/30:is(html[class~="dark"] *) {
+  background-color: rgb(120 53 15 / 0.3);
+}
 .dark\:hx-bg-black\/60:is(html[class~="dark"] *) {
   background-color: rgb(0 0 0 / 0.6);
 }
@@ -2955,6 +3027,12 @@ body:is(html[class~="dark"] *) {
 .dark\:hx-bg-gray-50\/10:is(html[class~="dark"] *) {
   background-color: rgb(249 250 251 / 0.1);
 }
+.dark\:hx-bg-green-900\/30:is(html[class~="dark"] *) {
+  background-color: rgb(20 83 45 / 0.3);
+}
+.dark\:hx-bg-indigo-900\/30:is(html[class~="dark"] *) {
+  background-color: rgb(49 46 129 / 0.3);
+}
 .dark\:hx-bg-neutral-800:is(html[class~="dark"] *) {
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
@@ -2967,14 +3045,14 @@ body:is(html[class~="dark"] *) {
   background-color: rgb(251 146 60 / 0.2);
 }
 .dark\:hx-bg-primary-300\/10:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
 }
 .dark\:hx-bg-primary-400\/10:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / 0.1);
 }
 .dark\:hx-bg-primary-600:is(html[class~="dark"] *) {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-bg-opacity));
 }
 .dark\:hx-bg-red-900\/30:is(html[class~="dark"] *) {
   background-color: rgb(127 29 29 / 0.3);
@@ -2990,6 +3068,10 @@ body:is(html[class~="dark"] *) {
 .dark\:hx-to-gray-400:is(html[class~="dark"] *) {
   --tw-gradient-to: #9ca3af var(--tw-gradient-to-position);
 }
+.dark\:hx-text-amber-200:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(253 230 138 / var(--tw-text-opacity));
+}
 .dark\:hx-text-blue-200:is(html[class~="dark"] *) {
   --tw-text-opacity: 1;
   color: rgb(191 219 254 / var(--tw-text-opacity));
@@ -3014,6 +3096,14 @@ body:is(html[class~="dark"] *) {
   --tw-text-opacity: 1;
   color: rgb(249 250 251 / var(--tw-text-opacity));
 }
+.dark\:hx-text-green-200:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(187 247 208 / var(--tw-text-opacity));
+}
+.dark\:hx-text-indigo-200:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(199 210 254 / var(--tw-text-opacity));
+}
 .dark\:hx-text-neutral-200:is(html[class~="dark"] *) {
   --tw-text-opacity: 1;
   color: rgb(229 229 229 / var(--tw-text-opacity));
@@ -3028,7 +3118,7 @@ body:is(html[class~="dark"] *) {
 }
 .dark\:hx-text-primary-600:is(html[class~="dark"] *) {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
 }
 .dark\:hx-text-red-200:is(html[class~="dark"] *) {
   --tw-text-opacity: 1;
@@ -3117,14 +3207,14 @@ body:is(html[class~="dark"] *) {
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));
 }
 .dark\:hover\:hx-bg-primary-100\/5:hover:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.05);
 }
 .dark\:hover\:hx-bg-primary-700:hover:is(html[class~="dark"] *) {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / var(--tw-bg-opacity));
 }
 .hover\:dark\:hx-bg-primary-500\/10:is(html[class~="dark"] *):hover {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / 0.1);
 }
 .dark\:hover\:hx-text-gray-100:hover:is(html[class~="dark"] *) {
   --tw-text-opacity: 1;
@@ -3152,7 +3242,7 @@ body:is(html[class~="dark"] *) {
 }
 .hover\:dark\:hx-text-primary-600:is(html[class~="dark"] *):hover {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
 }
 .dark\:hover\:hx-shadow-none:hover:is(html[class~="dark"] *) {
   --tw-shadow: 0 0 #0000;
@@ -3165,7 +3255,15 @@ body:is(html[class~="dark"] *) {
 }
 .dark\:focus\:hx-ring-primary-800:focus:is(html[class~="dark"] *) {
   --tw-ring-opacity: 1;
-  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-ring-opacity));
+  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-ring-opacity));
+}
+.data-\[state\=selected\]\:dark\:hx-border-primary-500:is(html[class~="dark"] *)[data-state="selected"] {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
+}
+.data-\[state\=selected\]\:dark\:hx-text-primary-600:is(html[class~="dark"] *)[data-state="selected"] {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
 }
 @media (prefers-contrast: more) {
 
@@ -3185,7 +3283,7 @@ body:is(html[class~="dark"] *) {
 
   .contrast-more\:dark\:hx-border-primary-500:is(html[class~="dark"] *) {
     --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
   }
 
   .dark\:contrast-more\:hx-border-neutral-400:is(html[class~="dark"] *) {
@@ -3328,6 +3426,10 @@ body:is(html[class~="dark"] *) {
     flex-shrink: 0;
   }
 
+  .md\:hx-grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:hx-justify-start {
     justify-content: flex-start;
   }
@@ -3357,14 +3459,21 @@ body:is(html[class~="dark"] *) {
     font-size: .875rem;
   }
 }
+@media (min-width: 1024px) {
+
+  .lg\:hx-grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
 @media (min-width: 1280px) {
 
   .xl\:hx-block {
     display: block;
   }
+
+  .xl\:hx-grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-.ltr\:hx-right-1:where([dir="ltr"], [dir="ltr"] *) {
-  right: 0.25rem;
 }
 .ltr\:hx-right-1\.5:where([dir="ltr"], [dir="ltr"] *) {
   right: 0.375rem;
@@ -3440,9 +3549,6 @@ body:is(html[class~="dark"] *) {
     left: auto;
   }
 }
-.rtl\:hx-left-1:where([dir="rtl"], [dir="rtl"] *) {
-  left: 0.25rem;
-}
 .rtl\:hx-left-1\.5:where([dir="rtl"], [dir="rtl"] *) {
   left: 0.375rem;
 }

assets/css/components/badge.css

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

assets/css/components/cards.css

@@ -2,6 +2,10 @@
   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 {
   user-select: none;
 }
@@ -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/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/scrollbar.css

@@ -1,4 +1,4 @@
-.hextra-scrollbar {
+.hextra-scrollbar, .hextra-scrollbar * {
   scrollbar-width: thin; /* Firefox */
   scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
 

assets/css/styles.css

@@ -10,6 +10,8 @@
 @import "components/scrollbar.css";
 @import "components/code-copy.css";
 @import "components/hextra/feature-grid.css";
+@import "components/jupyter.css";
+@import "components/badge.css";
 
 html {
   @apply hx-text-base hx-antialiased;
@@ -24,6 +26,7 @@ body {
 :root {
   --primary-hue: 212deg;
   --primary-saturation: 100%;
+  --primary-lightness: 50%;
   --navbar-height: 4rem;
   --menu-height: 3.75rem;
 }
@@ -31,4 +34,5 @@ body {
 .dark {
   --primary-hue: 204deg;
   --primary-saturation: 100%;
+  --primary-lightness: 50%;
 }

assets/js/flexsearch.js

@@ -195,22 +195,34 @@ document.addEventListener("DOMContentLoaded", function () {
    */
   async function preloadIndex() {
     const tokenize = '{{- site.Params.search.flexsearch.tokenize | default  "forward" -}}';
+
+    const isCJK = () => {
+      const lang = document.documentElement.lang || "en";
+      return lang.startsWith("zh") || lang.startsWith("ja") || lang.startsWith("ko");
+    }
+
+    const encodeCJK = (str) => str.replace(/[\x00-\x7F]/g, "").split("");
+    const encodeDefault = (str) => (""+str).toLocaleLowerCase().split(/[\p{Z}\p{S}\p{P}\p{C}]+/u);
+    const encodeFunction = isCJK() ? encodeCJK : encodeDefault;
+
     window.pageIndex = new FlexSearch.Document({
       tokenize,
+      encode: encodeFunction,
       cache: 100,
       document: {
         id: 'id',
-        store: ['title'],
+        store: ['title', 'crumb'],
         index: "content"
       }
     });
 
     window.sectionIndex = new FlexSearch.Document({
       tokenize,
+      encode: encodeFunction,
       cache: 100,
       document: {
         id: 'id',
-        store: ['title', 'content', 'url', 'display'],
+        store: ['title', 'content', 'url', 'display', 'crumb'],
         index: "content",
         tag: 'pageId'
       }
@@ -222,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('#');
@@ -235,6 +271,7 @@ document.addEventListener("DOMContentLoaded", function () {
           id: url,
           url,
           title,
+          crumb,
           pageId: `page_${pageId}`,
           content: title,
           ...(paragraphs[0] && { display: paragraphs[0] })
@@ -245,6 +282,7 @@ document.addEventListener("DOMContentLoaded", function () {
             id: `${url}_${i}`,
             url,
             title,
+            crumb,
             pageId: `page_${pageId}`,
             content: paragraphs[i]
           });
@@ -256,6 +294,7 @@ document.addEventListener("DOMContentLoaded", function () {
       window.pageIndex.add({
         id: pageId,
         title: data[route].title,
+        crumb,
         content: pageContent
       });
 
@@ -308,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

assets/js/menu.js

@@ -23,6 +23,12 @@ document.addEventListener('DOMContentLoaded', function () {
     document.body.classList.toggle('md:hx-overflow-auto');
   }
 
+  function hideOverlay() {
+    // Hide the overlay
+    overlay.classList.remove(...overlayClasses);
+    overlay.classList.add('hx-bg-transparent');
+  }
+
   menu.addEventListener('click', (e) => {
     e.preventDefault();
     toggleMenu();
@@ -33,8 +39,7 @@ document.addEventListener('DOMContentLoaded', function () {
       overlay.classList.remove('hx-bg-transparent');
     } else {
       // Hide the overlay
-      overlay.classList.remove(...overlayClasses);
+      hideOverlay();
-      overlay.classList.add('hx-bg-transparent');
     }
   });
 
@@ -43,7 +48,23 @@ document.addEventListener('DOMContentLoaded', function () {
     toggleMenu();
 
     // Hide the overlay
-    overlay.classList.remove(...overlayClasses);
+    hideOverlay();
-    overlay.classList.add('hx-bg-transparent');
+  });
+
+  // Select all anchor tags in the sidebar container
+  const sidebarLinks = sidebarContainer.querySelectorAll('a');
+
+  // Add click event listener to each anchor tag
+  sidebarLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      // Check if the href attribute contains a hash symbol (links to a heading)
+      if (link.getAttribute('href') && link.getAttribute('href').startsWith('#')) {
+        // Only dismiss overlay on mobile view
+        if (window.innerWidth < 768) {
+          toggleMenu();
+          hideOverlay();
+        }
+      }
+    });
   });
 });

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 = '';
     });

data/icons.yaml

@@ -36,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>
@@ -287,3 +289,5 @@ youtube: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill=
 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>
+telegram: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248 248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716 43.8 43.8 0 0 1 .417 9.769"/></svg>

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/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 提供了一种现代设计，使您的网站看起来出色。
+- **精美设计** - 灵感源自 Nextra，Hextra 利用 Tailwind CSS 提供现代设计，使您的网站脱颖而出。
-- **响应式布局和深色模式** - 无论是在移动设备、平板还是桌面上，都表现出色。同时支持深色模式以适应各种光线条件。
+- **响应式布局与暗黑模式** - 在所有设备上都能完美呈现，从手机、平板到桌面。暗黑模式也得到支持，以适应不同的光照条件。
-- **快速和轻量级** - 由 Hugo 驱动，一个轻量级且超快的静态网站生成器，封装在一个单一的二进制文件中，Hextra 保持其占用极小。使用它不需要 Javascript 或 Node.js。
+- **快速且轻量** - 由 Hugo 驱动，这是一个闪电般快速的静态网站生成器，仅需一个二进制文件，Hextra 保持其占用空间最小。无需 JavaScript 或 Node.js 即可使用。
-- **全文搜索** - 内置的离线全文搜索由 FlexSearch 提供支持，无需额外配置。
+- **全文搜索** - 内置离线全文搜索，由 FlexSearch 提供支持，无需额外配置。
-- **功能全面** - 支持 Markdown、语法高亮、LaTeX 数学公式、图表以及 Shortcodes 元素以增强您的内容。目录、面包屑、分页、侧边栏导航等都会自动生成。
+- **功能齐全** - Markdown、语法高亮、LaTeX 数学公式、图表和 Shortcodes 元素，丰富您的内容。目录、面包屑导航、分页、侧边栏导航等均自动生成。
-- **多语言和 SEO 支持** - Hugo 的多语言模式轻松支持多语言网站。对于 SEO 标签、Open Graph 和 Twitter 卡片，也提供了开箱即用的支持。
+- **多语言与 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.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: 高级配置
+linkTitle: 高级
-title: 高级配置
+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" >}}
+  {{< card link="customization" title="自定义" icon="pencil" >}}
+  {{< card link="comments" title="评论系统" icon="chat-alt" >}}
 {{< /cards >}}

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

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

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,15 +34,138 @@ 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
+
+#### Code 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:
@@ -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 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 类来进一步自定义主题。以下是一个自定义页脚元素的示例：
+
+```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 样式库](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表：
 
 ```shell
 hugo gen chromastyles --style=github
 ```
 
-可将生成的样式添加到自定义 CSS 文件中以覆盖默认代码高亮样式。
+要覆盖默认的语法高亮主题，可以将生成的样式添加到自定义 CSS 文件中。
 
-## 自定义 Script
+## 自定义脚本
 
-你可以添加以下文件以自定义 `script` 添加到每页的 `head` 最后：
+你可以通过添加以下文件在每个页面的 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` 目录中创建同名文件来覆盖主题的默认布局。
+可以通过在站点的 `layouts` 目录中创建同名文件来覆盖主题的布局。
-例如，要覆盖文档的 `single.html` 布局，在站点中创建文件 `layouts/docs/single.html`。
+例如，要覆盖文档的 `single.html` 布局，可以在站点中创建文件 `layouts/docs/single.html`。
 
-如需或许更多信息，转至 [Hugo Templates](https://gohugo.io/templates/)。
+更多信息，请参阅 [Hugo 模板文档][hugo-template-docs]。
 
-## 进一步定制 Hextra
+## 进一步自定义
 
-没有找到你想修改的内容？在 GitHub 上[创建 Discussion](https://github.com/imfing/hextra/discussions) 或为 Hextra 贡献你的智慧！
+没有找到你想要的？欢迎 [发起讨论](https://github.com/imfing/hextra/discussions) 或为主题做出贡献！
+
+[hugo-template-docs]: https://gohugo.io/templates/

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.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.zh-cn.md

@@ -1,49 +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/)。
+1. **Hugo 模块（推荐）**：最简单且推荐的方法。[Hugo 模块](https://gohugo.io/hugo-modules/)允许您直接从在线源拉取主题。主题会自动下载并由 Hugo 管理。
-请参考 Hugo 的[官方安装指南](https://gohugo.io/installation/)以获取更多详情。
 
-[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` 文件夹中。
 
-### 初始化 Hugo 站点
+### 将 Hextra 设置为 Hugo 模块
+
+#### 先决条件
+
+在开始之前，您需要安装以下软件：
+
+- [Hugo（扩展版）](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+- [Go](https://go.dev/)
+
+#### 步骤
+
+{{% steps %}}
+
+### 初始化一个新的 Hugo 站点
 
 ```shell
 hugo new site my-site --format=yaml
 ```
 
-### 通过 Hugo Module 安装
+### 通过模块配置 Hextra 主题
 
 ```shell
 # 初始化 Hugo 模块
 cd my-site
 hugo mod init github.com/username/my-site
 
-# 添加 Hextra 
+# 添加 Hextra 主题
 hugo mod get github.com/imfing/hextra
 ```
 
-编辑 `hugo.yaml` 以启用 Hextra：
+配置 `hugo.yaml` 以使用 Hextra 主题，添加以下内容：
 
 ```yaml
 module:
@@ -51,92 +65,128 @@ module:
     - path: github.com/imfing/hextra
 ```
 
-### 通过 Git Submodule 安装
+### 创建您的内容页面
 
-#### 先决条件
+为主页和文档页面创建新的内容页面：
-
-在我们开始之前，你必须先确保以下软件已经安装：
-
-- [Hugo (extended version)](https://gohugo.io/installation/)
-- [Git](https://git-scm.com/)
-
-#### 步骤
-
-{{% steps %}}
-
-### 初始化 Hugo 站点
-
-```shell
-hugo new site my-site --format=yaml
-```
-
-### 将 Hextra 添加为 Git Submodule
-
-```shell
-git submodule add https://github.com/imfing/hextra.git themes/hextra
-```
-
-添加以下内容来配置 `hugo.yaml` 以使用 Hextra：
-
-```yaml
-theme: hextra
-```
-
-### 创建你的第一个内容页
-
-让我们为主页和文档页面创建一个新的内容页面：
 
 ```shell
 hugo new content/_index.md
 hugo new content/docs/_index.md
 ```
 
-### 在本地预览站点
+### 本地预览站点
 
 ```shell
 hugo server --buildDrafts --disableFastRender
 ```
 
-瞧！你现在可以在 `http://localhost:1313/` 看到你的新站点。
+恭喜，您的新站点预览可在 `http://localhost:1313/` 查看。
 
 {{% /steps %}}
 
 
-
-
-使用 [CI/CD](https://en.wikipedia.org/wiki/CI/CD) 进行部署时，必须确保在运行 `hugo` 命令之前执行以下命令。
-
-```shell
-git submodule update --init
-```
-
-如果不运行此命令，theme 中将不会存在 Hextra 文件，进而导致构建失败。
-
-
 {{% details title="如何更新主题？" %}}
 
-如需把项目中所有的 Hugo Modules 都升级到最新，在终端中运行此命令：
+要更新项目中所有 Hugo 模块到最新版本，请运行以下命令：
 
 ```shell
 hugo mod get -u
 ```
 
-如需把 Hextra 升级到[最新的发行版本](https://github.com/imfing/hextra/releases), 在终端中运行此命令：
+要将 Hextra 更新到 [最新发布版本](https://github.com/imfing/hextra/releases)，请运行以下命令：
 
 ```shell
 hugo mod get -u github.com/imfing/hextra
 ```
 
-如果你需要获得更多信息，参见 [Hugo Modules](https://gohugo.io/hugo-modules/use-modules/#update-all-modules).
+有关更多详细信息，请参阅 [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="Organize Files" icon="document-duplicate" >}}
+  {{< card link="../guide/organize-files" title="组织文件" icon="document-duplicate" >}}
-  {{< card link="../guide/configuration" title="Configuration" icon="adjustments" >}}
+  {{< card link="../guide/configuration" title="配置" icon="adjustments" >}}
   {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
 {{< /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="syntax-highlighting" title="语法高亮" icon="sparkles" >}}
-  {{< card link="latex" title="LaTeX 公式" icon="variable" >}}
+  {{< 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/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

@@ -186,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.
+While `favicon.ico` is generally for older browsers, `favicon.svg` and `favicon-dark.svg` are supported by modern browsers.
-Feel free to use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate these icons.
+Use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate such icons.
 
 ### Theme Configuration
 
@@ -212,6 +212,22 @@ Options for `theme.default`:
 The `theme.displayToggle` parameter allows you to display a toggle button for changing themes.
 When set to `true`, visitors can switch between light or dark mode, overriding the default setting.
 
+### Page Last Modification
+
+The date of the page's last modification can be displayed by enabling the `params.displayUpdatedDate` flag. To use Git commit date as the source, enable also the `enableGitInfo` flag.
+
+To customize the date format, set the `params.dateFormat` parameter. Its layout matches Hugo's [`time.Format`](https://gohugo.io/functions/time/format/).
+
+```yaml {filename="hugo.yaml"}
+# Parse Git commit
+enableGitInfo: true
+
+params:
+  # Display the last modification date
+  displayUpdatedDate: true
+  dateFormat: "January 2, 2006"
+```
+
 ### Page Width
 
 The width of the page can be customized by the `params.page.width` parameter in the config file:

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

@@ -1,33 +1,33 @@
 ---
-title: 配置文件
+title: 配置
 weight: 2
 ---
 
-Hugo 从 Hugo 网站根目录下的 `hugo.yaml` 读取配置。
+Hugo 从您 Hugo 站点根目录下的 `hugo.yaml` 文件中读取配置。
-在配置文件中，您可以配置站点的所有选项。
+配置文件是您可以配置站点所有方面的地方。
-你可以在 `exampleSite/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,50 +123,54 @@ 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"
 ```
 
-将为每个页面自动生成编辑链接。
+编辑链接将根据提供的 URL 作为根目录自动为每个页面生成。
-如需为特定页面设置编辑链接，可以在页面的 `front matter` 中设置 `editURL`：
+如果要为特定页面设置编辑链接，可以在页面的 front matter 中设置 `editURL` 参数：
 
 ```yaml {filename="content/docs/guide/configuration.md"}
 ---
-title: Configuration
+title: 配置
 editURL: "https://example.com/edit/this/page"
 ---
 ```
-## Footer
 
-### 版权声明
+## 页脚
 
-如需修改网站页脚中显示的版权文本，您需要创建一个名为“i18n/en.yaml”的文件。
+### 版权
-在此文件中，填写新的版权文本，像这样：
+
+要修改网站页脚中显示的版权文本，您需要创建一个名为 `i18n/en.yaml` 的文件。
+在此文件中，指定您的新版权文本，如下所示：
 
 ```yaml {filename="i18n/en.yaml"}
-copyright: "© 2024 YOUR TEXT HERE"
+copyright: "© 2024 您的文本"
 ```
-你可以在 GitHub 存储库中找到示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。另外，你可以在版权文本中使用 Markdown 格式。
+
+作为参考，可以在 GitHub 仓库中找到示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。此外，您可以在版权文本中使用 Markdown 格式。
 
 ## 其他
 
-### Favicon
+### 网站图标
 
-如需自定义 [favicon](https://en.wikipedia.org/wiki/Favicon)，请将图标文件放在 `static` 文件夹下以覆盖 [主题中的默认 favicon](https://github.com/imfing/hextra/tree/main/static)：
+要为您的站点自定义 [网站图标](https://en.wikipedia.org/wiki/Favicon)，请将图标文件放在 `static` 文件夹下，以覆盖 [主题的默认网站图标](https://github.com/imfing/hextra/tree/main/static)：
 
 {{< filetree/container >}}
   {{< filetree/folder name="static" >}}
@@ -154,13 +186,12 @@ copyright: "© 2024 YOUR TEXT HERE"
   {{< /filetree/folder >}}
 {{< /filetree/container >}}
 
-在您的项目中包含 `favicon.ico` 和 `favicon.svg` 文件，以确保网站的网站图标正确显示。
+在您的项目中包含 `favicon.ico`、`favicon.svg` 和 `favicon-dark.svg` 文件，以确保您的站点图标正确显示。
 
-虽然 `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) 等工具生成此类图标。
 
-请随意使用 [favicon.io](https://favicon.io/) 或 [favycon](https://github.com/ruisaraiva19/favycon) 等工具来生成这些图标。
+### 主题配置
-
-### 颜色主题配置
 
 使用 `theme` 设置来配置默认主题模式和切换按钮，允许访问者在浅色或深色模式之间切换。
 
@@ -172,18 +203,18 @@ params:
     displayToggle: true
 ```
 
-`theme.default` 的可选项：
+`theme.default` 的选项：
 
-- `light` - 仅使用浅色模式
+- `light` - 始终使用浅色模式
-- `dark` - 仅使用神色模式
+- `dark` - 始终使用深色模式
-- `system` - 跟随系统
+- `system` - 与操作系统设置同步（默认）
 
-`theme.displayToggle` 控制显示用于更改主题的切换按钮。
+`theme.displayToggle` 参数允许您显示一个切换按钮以更改主题。
-当设置为“true”时，访问者可以在浅色或深色模式之间切换，覆盖默认设置。
+当设置为 `true` 时，访问者可以在浅色或深色模式之间切换，覆盖默认设置。
 
-### 页宽
+### 页面宽度
 
-页面的宽度可以通过配置文件中的`params.page.width`参数来调整：
+页面的宽度可以通过配置文件中的 `params.page.width` 参数进行自定义：
 
 ```yaml {filename="hugo.yaml"}
 params:
@@ -192,36 +223,37 @@ params:
     width: wide
 ```
 
-有三个可选项：`full`, `wide`, and `normal`. 默认的页宽模式是 `normal`.
+有三个可用选项：`full`、`wide` 和 `normal`。默认情况下，页面宽度设置为 `normal`。
 
-同样的，导航栏和 `footer` 的宽度也可通过 `params.navbar.width` 和 `params.footer.width` 调整。
+同样，导航栏和页脚的宽度可以通过 `params.navbar.width` 和 `params.footer.width` 参数进行自定义。
 
-### 搜索
+### 搜索索引
 
-默认情况下启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供全文搜索。
+默认启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供的全文搜索。
-要自定义搜索索引，请在配置文件中设置 `params.search.flexsearch.index` ：
+要自定义搜索索引，请在配置文件中设置 `params.search.flexsearch.index` 参数：
 
 ```yaml {filename="hugo.yaml"}
 params:
-  # Search
+  # 搜索
   search:
     enable: true
     type: flexsearch
 
     flexsearch:
-      # index page by: content | summary | heading | title
+      # 按以下内容索引页面：content | summary | heading | title
       index: content
 ```
-`flexsearch.index` 的可选项：
 
-- `content` - 全内容搜索
+`flexsearch.index` 的选项：
-- `summary` - 概述 [Hugo Content Summaries](https://gohugo.io/content-management/summaries/)
+
+- `content` - 页面的完整内容（默认）
+- `summary` - 页面的摘要，请参阅 [Hugo 内容摘要](https://gohugo.io/content-management/summaries/) 了解更多详细信息
 - `heading` - 一级和二级标题
-- `title` - 仅搜索标题
+- `title` - 仅包括页面标题
 
-要自定义检索分词，请在配置文件中设置`params.search.flexsearch.tokenize`：
+要自定义搜索分词，请在配置文件中设置 `params.search.flexsearch.tokenize` 参数：
 
-```hugo.yaml
+```yaml {filename="hugo.yaml"}
 params:
     # ...
     flexsearch:
@@ -229,27 +261,25 @@ params:
       tokenize: forward
 ```
 
-[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search)的可选项:
+[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search) 的选项：
 
-- `strict` - 严格单词匹配
+- `strict` - 索引整个单词
-- `forward` - 单词前缀匹配
+- `forward` - 向前方向逐步索引单词
-- `reverse` - 单词前后缀匹配
+- `reverse` - 双向逐步索引单词
-- `full` - 单词子串匹配。
+- `full` - 索引所有可能的组合
 
-> 在默认的分词逻辑下，中文一句话就是一个“单词”
+要从搜索索引中排除页面，请在页面的 front matter 中设置 `excludeSearch: true`：
-
-要从搜索索引中排除页面，更改 front matter 中的 `excludeSearch: true`:
 
 ```yaml {filename="content/docs/guide/configuration.md"}
 ---
-title: Configuration
+title: 配置
 excludeSearch: true
 ---
 ```
 
 ### Google Analytics
 
-要启用 [Google Analytics](https://marketingplatform.google.com/about/analytics/)，设置 `services.googleAnalytics.ID`:
+要启用 [Google Analytics](https://marketingplatform.google.com/about/analytics/)，请在 `hugo.yaml` 中设置 `services.googleAnalytics.ID` 标志：
 
 ```yaml {filename="hugo.yaml"}
 services:

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,7 +54,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.121.2
+      HUGO_VERSION: 0.138.0
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -64,7 +64,7 @@ jobs:
       - name: Setup Go
         uses: actions/setup-go@v5
         with:
-          go-version: '1.21'
+          go-version: '1.22'
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v4
@@ -146,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

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

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?
+    Alice->>John: 你好 John，最近怎么样？
-    loop Healthcheck
+    loop 健康检查
-        John->>John: Fight against hypochondria
+        John->>John: 与疑病症作斗争
     end
-    Note right of John: Rational thoughts <br/>prevail!
+    Note right of John: 理性思考 <br/>占据上风！
-    John-->>Alice: Great!
+    John-->>Alice: 很好！
-    John->>Bob: How about you?
+    John->>Bob: 你怎么样？
-    Bob-->>John: Jolly good!
+    Bob-->>John: 非常好！
 ```
 
-如需获取更多信息，转至 [Mermaid Documentation](https://mermaid-js.github.io/mermaid/#/)。
+更多信息，请参考 [Mermaid 文档](https://mermaid-js.github.io/mermaid/#/)。

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

@@ -28,14 +28,28 @@ Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markd
 
 [^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}
+|     نام | سن  |
+|--------|------|
+|    گودرز |  ۳۰|
+|  آصف |    ۳۴  |
+```
 
 #### مارک‌داون درون‌خطی درون جدول‌ها
 
@@ -43,6 +57,12 @@ Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markd
 | --------  | -------- | ------ |
 | *کج* | **توپر** | `کد` |
 
+```markdown {filename=Markdown}
+| کج   | توپر     | کد   |
+| --------  | -------- | ------ |
+| *کج* | **توپر** | `کد` |
+```
+
 ### بلوک‌های کد
 
 {{< cards >}}
@@ -57,12 +77,24 @@ Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markd
 2. دومین آیتم
 3. سومین آیتم
 
+```markdown {filename=Markdown}
+1. اولین آیتم
+2. دومین آیتم
+3. سومین آیتم
+```
+
 #### فهرست مرتب‌نشده
 
 * فهرست آیتم
 * یک آیتم دیگه
 * و یک آیتم دیگه
 
+```markdown {filename=Markdown}
+* فهرست آیتم
+* یک آیتم دیگه
+* و یک آیتم دیگه
+```
+
 #### فهرست تو در تو
 
 * میوه
@@ -73,13 +105,31 @@ Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markd
   * شیر
   * پنیر
 
+```markdown {filename=Markdown}
+* میوه
+  * سیب
+  * پرتقال
+  * موز
+* لبنیات
+  * شیر
+  * پنیر
+```
+
 ### عکس‌ها
 
-![](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600)
+```
 
 با توضیحات:
 
-![](https://source.unsplash.com/featured/800x600?landscape "یک چشم‌انداز Unsplash")
+![landscape](https://picsum.photos/800/600 "یک چشم‌انداز Unsplash")
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600 "یک چشم‌انداز Unsplash")
+```
 
 ## پیکربندی
 

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

@@ -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
+|   Name | Age  |
---------|------
+|--------|------|
-    Bob | 27
+|    Bob | 27   |
-  Alice | 23
+|  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,33 @@ 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")
+```
+
+For more advanced functionality, use Hugo's built-in [Figure shortcode](https://gohugo.io/shortcodes/figure/).
 
 ## 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 |
+| 下标 | `<sub></sub>` | `这是一个<sub>下标</sub>文本` | 这是一个<sub>下标</sub>文本 |
-| Superscript | `<sup></sup>` | `This is a <sup>superscript</sup> text` | This is a <sup>superscript</sup> text |
+| 上标 | `<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
+|    Bob | 27   |
-  Alice | 23
+|  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
+1. 第一项
-2. Second item
+2. 第二项
-3. Third item
+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。
+Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 进行 Markdown 解析。
-Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 中配置。以下是Hextra的默认配置：
+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 指南](https://www.markdownguide.org/)
-* [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+* [Markdown 速查表](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
-* [Markdown Tutorial](https://www.markdowntutorial.com/)
+* [Markdown 教程](https://www.markdowntutorial.com/)
-* [Markdown Reference](https://commonmark.org/help/)
+* [Markdown 参考](https://commonmark.org/help/)

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

@@ -112,7 +112,7 @@ Documentation > Guide > Foo Bar
 
 ### Hiding Breadcrumbs
 
-You can hide breadcrumbs completely from a page by specfying `breadcrumbs: false` in its front matter:
+You can hide breadcrumbs completely from a page by specifying `breadcrumbs: false` in its front matter:
 
 ```yaml {filename="content/docs/guide/organize-files.md"}
 ---

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

@@ -1,78 +1,83 @@
 ---
-title: 标注
+title: 提示框组件
+linkTitle: 提示框
 aliases:
-- callouts
+- 提示框
 prev: /docs/guide/shortcodes
 ---
 
-向读者显示重要信息的内置组件。
+一个内置组件，用于向读者展示重要信息。
 
 <!--more-->
 
-## Example
+> [!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 >}}
 
-## Usage
+## 用法
 
-### Default
+### 默认
 
 {{< callout emoji="🌐">}}
-  Hugo 可用于创建各种网站，包括博客、作品集、文档网站等
+  Hugo 可用于创建各种类型的网站，包括博客、作品集、文档站点等。
 {{< /callout >}}
 
 ```markdown
 {{</* callout emoji="🌐" */>}}
-  Hugo 可用于创建各种网站，包括博客、作品集、文档网站等
+  Hugo 可用于创建各种类型的网站，包括博客、作品集、文档站点等。
 {{</* /callout */>}}
 ```
 
-### Info
+### 信息
 
 {{< callout type="info" >}}
-  请访问 GitHub 查看最新版本
+  请访问 GitHub 查看最新版本。
 {{< /callout >}}
 
 ```markdown
 {{</* callout type="info" */>}}
-  请访问 GitHub 查看最新版本
+  请访问 GitHub 查看最新版本。
 {{</* /callout */>}}
 ```
 
-### Warning
+### 警告
 
 {{< callout type="warning" >}}
-  该 API 将在下一版本中弃用
+  此 API 将在下一个版本中弃用。
 {{< /callout >}}
 
 ```markdown
 {{</* callout type="warning" */>}}
-  **标注**是一段旨在吸引注意力的简短文字
+  **提示框** 是一段简短的文本，旨在吸引注意力。
 {{</* /callout */>}}
 ```
 
-### Error
+### 错误
 
 {{< callout type="error" >}}
-  出问题了，要爆炸了
+  出错了，系统即将崩溃。
 {{< /callout >}}
 
 ```markdown
 {{</* callout type="error" */>}}
-  出问题了，要爆炸了
+  出错了，系统即将崩溃。
 {{</* /callout */>}}
 ```

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

@@ -0,0 +1,115 @@
+---
+title: カードコンポーネント
+linkTitle: カード
+---
+
+## 例
+
+{{< cards >}}
+  {{< card link="../callout" title="コールアウト" icon="warning" >}}
+  {{< card link="../callout" title="タグ付きカード" icon="tag" tag="カスタムタグ">}}
+  {{< card link="/" title="アイコンなし" >}}
+{{< /cards >}}
+
+{{< cards >}}
+  {{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" >}}
+  {{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" >}}
+  {{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" >}}
+{{< /cards >}}
+
+## 使用方法
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="コールアウト" icon="warning" */>}}
+  {{</* card link="../callout" title="タグ付きカード" icon="tag" tag= "カスタムタグ" */>}}
+  {{</* card link="/" title="アイコンなし" */>}}
+{{</* /cards */>}}
+```
+
+```
+{{</* cards */>}}
+  {{</* card link="/" title="画像カード" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplashの風景画像" */>}}
+  {{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" */>}}
+  {{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" */>}}
+{{</* /cards */>}}
+```
+
+## カードパラメータ
+
+| パラメータ  | 説明                                                     |
+|----------- |-----------------------------------------------------------------|
+| `link`     | URL（内部または外部）。                                     |
+| `title`    | カードのタイトル見出し。                                     |
+| `subtitle` | サブタイトル見出し（Markdown対応）。                           |
+| `icon`     | アイコンの名前。                                               |
+| `tag`      | タグ内のテキスト。                                                    |
+| `tagColor` | タグの色: `gray`（デフォルト）、`yellow`、`red`、`blue`。 |
+  
+## 画像カード
+
+さらに、カードは画像の追加と以下のパラメータを通じた処理をサポートします:
+
+| パラメータ  | 説明                                 |
+|----------- |---------------------------------------------|
+| `image`    | カードの画像URLを指定します。       |
+| `method`   | Hugoの画像処理メソッドを設定します。        |
+| `options`  | Hugoの画像処理オプションを設定します。 |
+
+カードは3種類の画像をサポートします:
+
+1. リモート画像: `image`パラメータに完全なURLを指定。
+2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
+3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
+
+Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebPフォーマット）を適用します。
+現在サポートされている`method`は`Resize`、`Fit`、`Fill`、`Crop`です。
+
+Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
+
+## タグ
+
+カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。
+
+{{< cards >}}
+  {{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
+  {{< card link="../callout" title="エラータグ付きカード" tag="タグテキスト" tagType="error" >}}
+  {{< card link="../callout" title="情報タグ付きカード" tag="タグテキスト" tagType="info" >}}
+  {{< card link="../callout" title="警告タグ付きカード" tag="タグテキスト" tagType="warning" >}}
+  {{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" tag="タグテキスト" tagType="error" >}}
+{{< /cards >}}
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="デフォルトタグ色付きカード" tag="タグテキスト" */>}}
+  {{</* card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
+  {{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}}
+  {{</* card link="../callout" title="黄色タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
+{{</* /cards */>}}
+```
+
+## 列
+
+`cards`ショートコードに`cols`パラメータを渡すことで、カードが広がる最大列数を指定できます。ただし、小さい画面では列は折りたたまれます。
+
+{{< cards cols="1" >}}
+  {{< card link="/" title="上部カード" >}}
+  {{< card link="/" title="下部カード" >}}
+{{< /cards >}}
+
+{{< cards cols="2" >}}
+  {{< card link="/" title="左カード" >}}
+  {{< card link="/" title="右カード" >}}
+{{< /cards >}}
+
+```
+{{</* cards cols="1" */>}}
+  {{</* card link="/" title="上部カード" */>}}
+  {{</* card link="/" title="下部カード" */>}}
+{{</* /cards */>}}
+
+{{</* cards cols="2" */>}}
+  {{</* card link="/" title="左カード" */>}}
+  {{</* card link="/" title="右カード" */>}}
+{{</* /cards */>}}
+```

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

@@ -7,11 +7,12 @@ linkTitle: Cards
 
 {{< cards >}}
   {{< card link="../callout" title="Callout" icon="warning" >}}
+  {{< card link="../callout" title="Card with tag" icon="tag" tag="custom tag">}}
   {{< card link="/" title="No Icon" >}}
 {{< /cards >}}
 
 {{< cards >}}
-  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
+  {{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" >}}
   {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
   {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
 {{< /cards >}}
@@ -21,6 +22,7 @@ linkTitle: Cards
 ```
 {{</* cards */>}}
   {{</* card link="../callout" title="Callout" icon="warning" */>}}
+  {{</* card link="../callout" title="Card with tag" icon="tag" tag= "A custom tag" */>}}
   {{</* card link="/" title="No Icon" */>}}
 {{</* /cards */>}}
 ```
@@ -36,11 +38,13 @@ linkTitle: Cards
 ## Card Parameters
 
 | Parameter  | Description                                                     |
-|----------- |---------------------------------------|
+|----------- |-----------------------------------------------------------------|
 | `link`     | URL (internal or external).                                     |
 | `title`    | Title heading for the card.                                     |
 | `subtitle` | Subtitle heading (supports Markdown).                           |
 | `icon`     | Name of the icon.                                               |
+| `tag`      | Text in tag.                                                    |
+| `tagColor` | Color of the tag: `gray` (default), `yellow`, `red` and `blue`. |
   
 ## Image Card
 
@@ -62,3 +66,51 @@ Hextra auto-detects if image processing is needed during build and applies the `
 It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`.
 
 For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
+
+## Tags
+
+Card supports adding tags which could be useful to show extra status information.
+
+{{< cards >}}
+  {{< card link="../callout" title="Card with default tag" tag="tag text" >}}
+  {{< card link="../callout" title="Card with error tag" tag="tag text" tagType="error" >}}
+  {{< card link="../callout" title="Card with info tag" tag="tag text" tagType="info" >}}
+  {{< card link="../callout" title="Card with warning tag" tag="tag text" tagType="warning" >}}
+  {{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" tag="tag text" tagType="error" >}}
+{{< /cards >}}
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}}
+  {{</* card link="../callout" title="Card with default red tag" tag="tag text" tagType="error" */>}}
+  {{</* card link="../callout" title="Card with blue tag" tag="tag text" tagType="info" */>}}
+  {{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagType="warning" */>}}
+{{</* /cards */>}}
+```
+
+## Columns
+
+You can specify the maximum number of columns for cards to span by passing the `cols` parameter to the `cards` shortcode. Note that columns will still be collapsed on smaller screens.
+
+{{< cards cols="1" >}}
+  {{< card link="/" title="Top Card" >}}
+  {{< card link="/" title="Bottom Card" >}}
+{{< /cards >}}
+
+{{< cards cols="2" >}}
+  {{< card link="/" title="Left Card" >}}
+  {{< card link="/" title="Right Card" >}}
+{{< /cards >}}
+
+```
+{{</* cards cols="1" */>}}
+  {{</* card link="/" title="Top Card" */>}}
+  {{</* card link="/" title="Bottom Card" */>}}
+{{</* /cards */>}}
+
+{{</* cards cols="2" */>}}
+  {{</* card link="/" title="Left Card" */>}}
+  {{</* card link="/" title="Right Card" */>}}
+{{</* /cards */>}}
+```
+

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

@@ -1,65 +1,115 @@
 ---
-title: 卡片
+title: 卡片组件
-linkTitle: Cards
+linkTitle: 卡片
 ---
 
 ## 示例
 
 {{< cards >}}
-  {{< card link="../callout" title="Callout" icon="warning" >}}
+  {{< card link="../callout" title="提示框" icon="warning" >}}
-  {{< card link="/" title="No Icon" >}}
+  {{< card link="../callout" title="带标签的卡片" icon="tag" tag="自定义标签">}}
+  {{< card link="/" title="无图标" >}}
 {{< /cards >}}
 
 {{< cards >}}
-  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
+  {{< card link="/" title="图片卡片" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="网络图片" >}}
-  {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
+  {{< card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" >}}
-  {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
+  {{< card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片，由 Hugo 处理。" method="Resize" options="600x q80 webp" >}}
 {{< /cards >}}
 
-## 使用
+## 用法
 
 ```
 {{</* cards */>}}
-  {{</* card link="../callout" title="Callout" icon="warning" */>}}
+  {{</* card link="../callout" title="提示框" icon="warning" */>}}
-  {{</* card link="/" title="No Icon" */>}}
+  {{</* card link="../callout" title="带标签的卡片" icon="tag" tag= "自定义标签" */>}}
+  {{</* card link="/" title="无图标" */>}}
 {{</* /cards */>}}
 ```
 
 ```
 {{</* cards */>}}
-  {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
+  {{</* card link="/" title="图片卡片" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash 风景" */>}}
-  {{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
+  {{</* card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" */>}}
-  {{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
+  {{</* card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片，由 Hugo 处理。" method="Resize" options="600x q80 webp" */>}}
 {{</* /cards */>}}
 ```
 
 ## 卡片参数
 
-| Parameter  | Description                           |
+| 参数       | 描述                                                     |
-|----------- |---------------------------------------|
+|----------- |-----------------------------------------------------------------|
-| `link`     | URL（内部或外部）          |
+| `link`     | URL（内部或外部）。                                     |
-| `title`    | 卡片的标题           |
+| `title`    | 卡片的标题。                                             |
-| `subtitle` | 字幕标题（支持 Markdown） |
+| `subtitle` | 卡片的副标题（支持 Markdown）。                           |
-| `icon`     | 图标的名称                    |
+| `icon`     | 图标的名称。                                             |
+| `tag`      | 标签中的文本。                                           |
+| `tagColor` | 标签的颜色：`gray`（默认）、`yellow`、`red` 和 `blue`。 |
   
-## Image Card
+## 图片卡片
 
-此外，该卡还支持通过以下参数添加图像和处理：
+此外，卡片支持通过以下参数添加图片并进行处理：
 
-| Parameter  | Description                                 |
+| 参数      | 描述                                 |
-|----------- |---------------------------------------------|
+|-----------|--------------------------------------|
-| `image`    | 指定卡片的图像 URL.       |
+| `image`   | 指定卡片的图片 URL。                 |
-| `method`   | 设置 Hugo 的图像处理方法。       |
+| `method`  | 设置 Hugo 的图片处理方法。           |
-| `options`  | 配置 Hugo 的图像处理选项。|
+| `options` | 配置 Hugo 的图片处理选项。           |
 
-卡片支持三种图像：
+卡片支持三种类型的图片：
 
-1. 远程图片：完整网址应放置在 image 参数中
+1. 远程图片：`image` 参数中的完整 URL。
-2. 静态图片：使用 Hugo 的 static/ 目录中的相对路径
+2. 静态图片：使用 Hugo `static/` 目录中的相对路径。
-3. 处理过的图片：使用 Hugo 的 assets/ 目录中的相对路径
+3. 处理后的图片：使用 Hugo `assets/` 目录中的相对路径。
 
-Hextra 在构建过程中会自动检测图片是否需要处理，并根据需要应用 options 参数或默认设置（缩放，800x，质量 80，WebP 格式）。
+Hextra 在构建时自动检测是否需要图片处理，并应用 `options` 参数或默认设置（Resize，800x，质量 80，WebP 格式）。
+目前支持以下 `method`：`Resize`、`Fit`、`Fill` 和 `Crop`。
 
-它目前支持以下处理方法：Resize（缩放）、Fit（适应）、Fill（填充）和 Crop（裁剪）。
+有关 Hugo 内置图片处理命令、方法和选项的更多信息，请参阅其[图片处理文档](https://gohugo.io/content-management/image-processing/)。
 
-有关 Hugo 内置图像处理命令、方法和选项的更多信息，请参阅他们的 [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
+## 标签
+
+卡片支持添加标签，这对于显示额外的状态信息非常有用。
+
+{{< cards >}}
+  {{< card link="../callout" title="带默认标签的卡片" tag="标签文本" >}}
+  {{< card link="../callout" title="带错误标签的卡片" tag="标签文本" tagType="error" >}}
+  {{< card link="../callout" title="带信息标签的卡片" tag="标签文本" tagType="info" >}}
+  {{< card link="../callout" title="带警告标签的卡片" tag="标签文本" tagType="warning" >}}
+  {{< card link="/" title="图片卡片" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="网络图片" tag="标签文本" tagType="error" >}}
+{{< /cards >}}
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="带默认标签颜色的卡片" tag="标签文本" */>}}
+  {{</* card link="../callout" title="带红色标签的卡片" tag="标签文本" tagType="error" */>}}
+  {{</* card link="../callout" title="带蓝色标签的卡片" tag="标签文本" tagType="info" */>}}
+  {{</* card link="../callout" title="带黄色标签的卡片" tag="标签文本" tagType="warning" */>}}
+{{</* /cards */>}}
+```
+
+## 列数
+
+您可以通过将 `cols` 参数传递给 `cards` 短代码来指定卡片的最大列数。请注意，在较小的屏幕上，列仍会折叠。
+
+{{< cards cols="1" >}}
+  {{< card link="/" title="顶部卡片" >}}
+  {{< card link="/" title="底部卡片" >}}
+{{< /cards >}}
+
+{{< cards cols="2" >}}
+  {{< card link="/" title="左侧卡片" >}}
+  {{< card link="/" title="右侧卡片" >}}
+{{< /cards >}}
+
+```
+{{</* cards cols="1" */>}}
+  {{</* card link="/" title="顶部卡片" */>}}
+  {{</* card link="/" title="底部卡片" */>}}
+{{</* /cards */>}}
+
+{{</* cards cols="2" */>}}
+  {{</* card link="/" title="左侧卡片" */>}}
+  {{</* card link="/" title="右侧卡片" */>}}
+{{</* /cards */>}}
+```

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

@@ -0,0 +1,43 @@
+---
+title: 詳細
+---
+
+折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。
+
+<!--more-->
+
+## 例
+
+{{% details title="詳細" %}}
+
+これは詳細のコンテンツです。
+
+Markdownは**サポートされています**。
+
+{{% /details %}}
+
+{{% details title="クリックして表示" closed="true" %}}
+
+これはデフォルトで非表示になります。
+
+{{% /details %}}
+
+## 使い方
+
+````markdown
+{{%/* details title="詳細" */%}}
+
+これは詳細のコンテンツです。
+
+Markdownは**サポートされています**。
+
+{{%/* /details */%}}
+````
+
+````markdown
+{{%/* details title="クリックして表示" closed="true" */%}}
+
+これはデフォルトで非表示になります。
+
+{{%/* /details */%}}
+````

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

@@ -2,42 +2,42 @@
 title: 详情
 ---
 
-用于显示可折叠内容的内置组件。
+一个内置组件，用于显示可折叠的内容。
 
 <!--more-->
 
 ## 示例
 
-{{% details title="Details" %}}
+{{% details title="详情" %}}
 
-这是细节的内容
+这是详情的内容。
 
-Markdown is **supported**.
+支持 **Markdown**。
 
 {{% /details %}}
 
-{{% details title="Click me to reveal" closed="true" %}}
+{{% details title="点击我展开" closed="true" %}}
 
-默认情况下这将被隐藏
+默认情况下，这部分内容会被隐藏。
 
 {{% /details %}}
 
-## Usage
+## 用法
 
 ````markdown
-{{%/* details title="Details" */%}}
+{{%/* details title="详情" */%}}
 
-这是细节的内容
+这是详情的内容。
 
-**支持** Markdown
+支持 **Markdown**。
 
 {{%/* /details */%}}
 ````
 
 ````markdown
-{{%/* details title="Click me to reveal" closed="true" */%}}
+{{%/* details title="点击我展开" closed="true" */%}}
 
-默认情况下这将被隐藏
+默认情况下，这部分内容会被隐藏。
 
 {{%/* /details */%}}
 ````

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

@@ -0,0 +1,34 @@
+---
+title: FileTree コンポーネント
+linkTitle: FileTree
+---
+
+## 例
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="closed" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="introduction.md" >}}
+      {{< filetree/file name="introduction.fr.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+  {{< filetree/file name="hugo.toml" >}}
+{{< /filetree/container >}}
+
+## 使用方法
+
+```text {filename="Markdown"}
+{{</* filetree/container */>}}
+  {{</* filetree/folder name="content" */>}}
+    {{</* filetree/file name="_index.md" */>}}
+    {{</* filetree/folder name="docs" state="closed" */>}}
+      {{</* filetree/file name="_index.md" */>}}
+      {{</* filetree/file name="introduction.md" */>}}
+      {{</* filetree/file name="introduction.fr.md" */>}}
+    {{</* /filetree/folder */>}}
+  {{</* /filetree/folder */>}}
+  {{</* filetree/file name="hugo.toml" */>}}
+{{</* /filetree/container */>}}
+```

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

@@ -1,5 +1,6 @@
 ---
-title: 文件树
+title: 文件树组件
+linkTitle: 文件树
 ---
 
 ## 示例

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

@@ -0,0 +1,46 @@
+---
+title: アイコン
+---
+
+このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
+
+```yaml {filename="hugo.yaml"}
+enableInlineShortcodes: true
+```
+
+利用可能なアイコンのリストは、[`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
+
+<!--more-->
+
+## 例
+
+{{< icon "academic-cap" >}}
+{{< icon "cake" >}}
+{{< icon "gift" >}}
+{{< icon "sparkles" >}}
+
+## 使用方法
+
+```
+{{</* icon "github" */>}}
+```
+
+[Heroicons](https://v1.heroicons.com/) v1 のアウトラインアイコンがデフォルトで利用可能です。
+
+### 独自のアイコンを追加する方法
+
+`data/icons.yaml` ファイルを作成し、以下の形式で独自のSVGアイコンを追加します:
+
+```yaml {filename="data/icons.yaml"}
+your-icon: <svg>your icon svg content</svg>
+```
+
+その後、ショートコードで以下のように使用できます:
+
+```
+{{</* icon "your-icon" */>}}
+
+{{</* card icon="your-icon" */>}}
+```
+
+ヒント: [Iconify Design](https://iconify.design/) は、サイト用のSVGアイコンを見つけるのに最適な場所です。

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

@@ -2,13 +2,13 @@
 title: 图标
 ---
 
-要内联使用此短代码，需要在配置中启用内联短代码：
+要在行内使用此短代码，需要在配置中启用行内短代码：
 
 ```yaml {filename="hugo.yaml"}
 enableInlineShortcodes: true
 ```
 
-可用图标列表可以在以下位置找到 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml).
+可用图标的列表可以在 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) 中找到。
 
 <!--more-->
 
@@ -25,17 +25,17 @@ enableInlineShortcodes: true
 {{</* icon "github" */>}}
 ```
 
-[Heroicons](https://v1.heroicons.com/) v1 轮廓图标开箱即用
+[Heroicons](https://v1.heroicons.com/) v1 的轮廓图标默认可用。
 
-### 如何添加自己的图标
+### 如何添加自定义图标
 
-创建 `data/icons.yaml` 文件，然后按以下格式添加您自己的 SVG 图标：
+创建 `data/icons.yaml` 文件，然后按照以下格式添加自定义的 SVG 图标：
 
 ```yaml {filename="data/icons.yaml"}
 your-icon: <svg>your icon svg content</svg>
 ```
 
-然后可以在短代码中使用它，如下所示：
+然后可以在短代码中这样使用：
 
 ```
 {{</* icon "your-icon" */>}}
@@ -43,4 +43,4 @@ your-icon: <svg>your icon svg content</svg>
 {{</* card icon="your-icon" */>}}
 ```
 
-提示：[Iconify Design](https://iconify.design/) 是为您的网站查找 SVG 图标的好地方
+提示：[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的好地方。

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

@@ -0,0 +1,79 @@
+---
+title: "Jupyter Notebook コンポーネント"
+linktitle: "Jupyter Notebook"
+math: true
+sidebar:
+  exclude: true
+---
+
+{{< callout >}}Jupyter Notebook をショートコード経由で含める実験的な機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
+
+[Jupyter Notebook](https://jupyter.org/) は、[Project Jupyter](https://jupyter.org/) の言語に依存しない HTML ノートブックアプリケーションです。これを使用すると、ライブコード、数式、視覚化、および説明文を含むドキュメントを作成して共有できます。
+
+<!--more-->
+
+## 使用方法
+
+### ローカルノートブックを使用する
+
+Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
+
+{{< filetree/container >}}
+  {{< filetree/folder name="assets" >}}
+    {{< filetree/file name="notebook.ipynb" >}}
+  {{< /filetree/folder >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます：
+
+```markdown {filename="content/docs/my-page.md"}
+---
+title: My Page
+math: true
+---
+
+{{%/* jupyter "notebook.ipynb" */%}}
+```
+
+あるいは、Hugo の [ページバンドル][page-bundles] 機能を利用して、Jupyter Notebook を Markdown ファイルと一緒に整理することもできます。
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/folder name="my-page" >}}
+            {{< filetree/file name="index.md" >}}
+            {{< filetree/file name="notebook.ipynb" >}}
+        {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+```markdown {filename="content/docs/my-page/index.md"}
+---
+title: My Page
+math: true
+---
+
+{{%/* jupyter "notebook.ipynb" */%}}
+```
+
+### リモートノートブックを使用する
+
+ノートブックファイルの URL を指定して、リモートノートブックを使用することもできます。たとえば、[What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) ノートブックをページに含めるには、次のショートコードを使用します：
+
+```
+{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
+```
+
+## ノートブックの例
+
+{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれているノートブックファイルの例です。{{< /callout >}}
+
+{{% jupyter "example.ipynb" %}}
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

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

@@ -0,0 +1,79 @@
+---
+title: "Jupyter Notebook Component"
+linktitle: "Jupyter Notebook"
+math: true
+sidebar:
+  exclude: true
+---
+
+{{< callout >}}Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.{{< /callout >}}
+
+[Jupyter Notebook](https://jupyter.org/) is a language-agnostic HTML notebook application for [Project Jupyter](https://jupyter.org/). It allows you to create and share documents that contain live code, equations, visualizations, and narrative text.
+
+<!--more-->
+
+## How to use
+
+### Using a local notebook
+
+To use the Jupyter Notebook shortcode, you need to have a Jupyter Notebook file in your project. Similar to how you would [add images](../../organize-files#add-images) to the project, you can add Jupyter Notebooks to the `assets` folder.
+
+{{< filetree/container >}}
+  {{< filetree/folder name="assets" >}}
+    {{< filetree/file name="notebook.ipynb" >}}
+  {{< /filetree/folder >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+Include the Jupyter Notebook in the page using the `jupyter` shortcode:
+
+```markdown {filename="content/docs/my-page.md"}
+---
+title: My Page
+math: true
+---
+
+{{%/* jupyter "notebook.ipynb" */%}}
+```
+
+Alternatively, you can utilize the [page bundles][page-bundles] feature of Hugo to organize the Jupyter Notebooks together with the Markdown file.
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/folder name="my-page" >}}
+            {{< filetree/file name="index.md" >}}
+            {{< filetree/file name="notebook.ipynb" >}}
+        {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+```markdown {filename="content/docs/my-page/index.md"}
+---
+title: My Page
+math: true
+---
+
+{{%/* jupyter "notebook.ipynb" */%}}
+```
+
+### Using a remote notebook
+
+You can also use a remote notebook by providing the URL to the notebook file. For example, to include [What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) notebook in the page, you can use the following shortcode:
+
+```
+{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
+```
+
+## Example Notebook
+
+{{< callout type="info" >}}The following is an example of a notebook file that is included in the project assets folder.{{< /callout >}}
+
+{{% jupyter "example.ipynb" %}}
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

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

@@ -0,0 +1,79 @@
+---
+title: "Jupyter Notebook 组件"
+linktitle: "Jupyter Notebook"
+math: true
+sidebar:
+  exclude: true
+---
+
+{{< callout >}}实验性功能：通过短代码嵌入 Jupyter Notebook。请注意，并非所有单元格类型都受支持。{{< /callout >}}
+
+[Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 的一个语言无关的 HTML 笔记本应用程序。它允许你创建和共享包含实时代码、方程、可视化和叙述性文本的文档。
+
+<!--more-->
+
+## 使用方法
+
+### 使用本地笔记本
+
+要使用 Jupyter Notebook 短代码，你需要在项目中有一个 Jupyter Notebook 文件。类似于如何[添加图片](../../organize-files#add-images)到项目中，你可以将 Jupyter Notebooks 添加到 `assets` 文件夹。
+
+{{< filetree/container >}}
+  {{< filetree/folder name="assets" >}}
+    {{< filetree/file name="notebook.ipynb" >}}
+  {{< /filetree/folder >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+使用 `jupyter` 短代码将 Jupyter Notebook 包含在页面中：
+
+```markdown {filename="content/docs/my-page.md"}
+---
+title: 我的页面
+math: true
+---
+
+{{%/* jupyter "notebook.ipynb" */%}}
+```
+
+或者，你可以利用 Hugo 的[页面包][page-bundles]功能将 Jupyter Notebooks 与 Markdown 文件一起组织。
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/folder name="my-page" >}}
+            {{< filetree/file name="index.md" >}}
+            {{< filetree/file name="notebook.ipynb" >}}
+        {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+```markdown {filename="content/docs/my-page/index.md"}
+---
+title: 我的页面
+math: true
+---
+
+{{%/* jupyter "notebook.ipynb" */%}}
+```
+
+### 使用远程笔记本
+
+你也可以通过提供笔记本文件的 URL 来使用远程笔记本。例如，要在页面中包含 [What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) 笔记本，你可以使用以下短代码：
+
+```
+{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
+```
+
+## 示例笔记本
+
+{{< callout type="info" >}}以下是包含在项目 assets 文件夹中的笔记本文件示例。{{< /callout >}}
+
+{{% jupyter "example.ipynb" %}}
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

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

@@ -0,0 +1,77 @@
+---
+title: その他のショートコード
+linkTitle: その他
+sidebar:
+  exclude: true
+---
+
+{{< callout emoji="ℹ️" >}}
+  これらの一部はHugoの組み込みショートコードです。
+  これらのショートコードは安定性が低く、いつでも変更される可能性があります。
+{{< /callout >}}
+
+## バッジ
+
+```
+{{</* badge "バッジ" */>}}
+```
+
+結果:
+
+{{< badge "バッジ" >}}
+
+バリエーション:
+
+```
+{{</* badge content="info" type="info" */>}}
+{{</* badge content="warning" type="warning" */>}}
+{{</* badge content="error" type="error" */>}}
+```
+
+結果:
+
+{{< badge content="info" type="info" >}} &nbsp;
+{{< badge content="warning" type="warning" >}} &nbsp;
+{{< badge content="error" type="error" >}}
+
+リンクとアイコン付き:
+
+```
+{{</* badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
+```
+
+結果:
+
+{{< badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" >}}
+
+## YouTube
+
+YouTube動画を埋め込みます。
+
+```
+{{</* youtube VIDEO_ID */>}}
+```
+
+結果:
+
+{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
+
+詳細については、[HugoのYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
+
+## PDF
+
+PDFショートコードを使用すると、コンテンツ内にPDFファイルを埋め込むことができます。
+
+```
+{{</* pdf "https://example.com/sample.pdf" */>}}
+```
+
+また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。
+
+```
+{{</* pdf "path/to/file.pdf" */>}}
+```
+
+例:
+
+{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}

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

@@ -0,0 +1,77 @@
+---
+title: Other Shortcodes
+linkTitle: Others
+sidebar:
+  exclude: true
+---
+
+{{< callout emoji="ℹ️" >}}
+  Some of these are Hugo built-in shortcodes.
+  These shortcodes are considered less stable and may be changed anytime.
+{{< /callout >}}
+
+## Badge
+
+```
+{{</* badge "Badge" */>}}
+```
+
+Result:
+
+{{< badge "Badge" >}}
+
+Variants:
+
+```
+{{</* badge content="info" type="info" */>}}
+{{</* badge content="warning" type="warning" */>}}
+{{</* badge content="error" type="error" */>}}
+```
+
+Result:
+
+{{< badge content="info" type="info" >}} &nbsp;
+{{< badge content="warning" type="warning" >}} &nbsp;
+{{< badge content="error" type="error" >}}
+
+With link and icon:
+
+```
+{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
+```
+
+Result:
+
+{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
+
+## YouTube
+
+Embed a YouTube video.
+
+```
+{{</* youtube VIDEO_ID */>}}
+```
+
+Result:
+
+{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
+
+For more information, see [Hugo's YouTube Shortcode](https://gohugo.io/content-management/shortcodes/#youtube).
+
+## PDF
+
+With PDF shortcode, you can embed a PDF file in your content.
+
+```
+{{</* pdf "https://example.com/sample.pdf" */>}}
+```
+
+You can also place the PDF file in your project directory and use the relative path.
+
+```
+{{</* pdf "path/to/file.pdf" */>}}
+```
+
+Example:
+
+{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}

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

@@ -0,0 +1,77 @@
+---
+title: 其他短代码
+linkTitle: 其他
+sidebar:
+  exclude: true
+---
+
+{{< callout emoji="ℹ️" >}}
+  其中一些是 Hugo 内置的短代码。
+  这些短代码被认为不太稳定，可能会随时更改。
+{{< /callout >}}
+
+## 徽章
+
+```
+{{</* badge "徽章" */>}}
+```
+
+结果：
+
+{{< badge "徽章" >}}
+
+变体：
+
+```
+{{</* badge content="信息" type="info" */>}}
+{{</* badge content="警告" type="warning" */>}}
+{{</* badge content="错误" type="error" */>}}
+```
+
+结果：
+
+{{< badge content="信息" type="info" >}} &nbsp;
+{{< badge content="警告" type="warning" >}} &nbsp;
+{{< badge content="错误" type="error" >}}
+
+带链接和图标：
+
+```
+{{</* badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
+```
+
+结果：
+
+{{< badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
+
+## YouTube
+
+嵌入 YouTube 视频。
+
+```
+{{</* youtube 视频ID */>}}
+```
+
+结果：
+
+{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
+
+更多信息，请参阅 [Hugo 的 YouTube 短代码](https://gohugo.io/content-management/shortcodes/#youtube)。
+
+## PDF
+
+使用 PDF 短代码，您可以在内容中嵌入 PDF 文件。
+
+```
+{{</* pdf "https://example.com/sample.pdf" */>}}
+```
+
+您也可以将 PDF 文件放在项目目录中并使用相对路径。
+
+```
+{{</* pdf "path/to/file.pdf" */>}}
+```
+
+示例：
+
+{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}

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

@@ -0,0 +1,46 @@
+---
+title: ステップ
+---
+
+ステップのシリーズを表示するための組み込みコンポーネント。
+
+## 例
+
+{{% steps %}}
+
+### ステップ 1
+
+これは最初のステップです。
+
+### ステップ 2
+
+これは2番目のステップです。
+
+### ステップ 3
+
+これは3番目のステップです。
+
+{{% /steps %}}
+
+## 使い方
+
+{{< callout emoji="ℹ️" >}}
+  このショートコードは**Markdownコンテンツ専用**であることに注意してください。
+  HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。
+{{< /callout >}}
+
+`steps` ショートコード内にMarkdownのh3ヘッダーを配置します。
+
+```
+{{%/* steps */%}}
+
+### ステップ 1
+
+これは最初のステップです。
+
+### ステップ 2
+
+これは2番目のステップです。
+
+{{%/* /steps */%}}
+```

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

@@ -25,6 +25,11 @@ This is the third step.
 
 ## Usage
 
+{{< callout emoji="ℹ️" >}}
+  Please note that this shortcode is intended **only for Markdown content**.
+  If you put HTML content or other shortcodes as step content, it may not render as expected.
+{{< /callout >}}
+
 Put Markdown h3 header within `steps` shortcode.
 
 ```

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

@@ -2,7 +2,7 @@
 title: 步骤
 ---
 
-A built-in component to display a series of steps.
+一个内置组件，用于显示一系列步骤。
 
 ## 示例
 
@@ -23,20 +23,25 @@ A built-in component to display a series of steps.
 {{% /steps %}}
 
 
-## 使用
+## 用法
 
-将 Markdown h3 标题放入 `steps` 短代码中。
+{{< callout emoji="ℹ️" >}}
+  请注意，此短代码**仅适用于 Markdown 内容**。
+  如果将 HTML 内容或其他短代码作为步骤内容，可能无法按预期渲染。
+{{< /callout >}}
+
+在 `steps` 短代码中放置 Markdown 的 h3 标题。
 
 ```
 {{%/* steps */%}}
 
-### Step 1
+### 第一步
 
-This is the first step.
+这是第一步。
 
-### Step 2
+### 第二步
 
-This is the second step.
+这是第二步。
 
 {{%/* /steps */%}}
 ```

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

@@ -0,0 +1,93 @@
+---
+title: タブ
+next: /docs/guide/deploy-site
+---
+
+## 例
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
+{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
+{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
+
+{{< /tabs >}}
+
+## 使用方法
+
+### デフォルト
+
+```
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+### 選択されたインデックスを指定
+
+`defaultIndex` プロパティを使用して、選択されるタブを指定します。インデックスは 0 から始まります。
+
+```
+{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+`YAML` タブがデフォルトで選択されます。
+
+{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
+
+{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
+{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
+{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
+
+{{< /tabs >}}
+
+
+### Markdown を使用
+
+コードブロックを含む Markdown 構文もサポートされています:
+
+````
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}
+  ```json
+  { "hello": "world" }
+  ```
+  {{</* /tab */>}}
+
+  ... 他のタブも同様に追加
+
+{{</* /tabs */>}}
+````
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+  {{< tab >}}
+  ```json
+  { "hello": "world" }
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```yaml
+  hello: world
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```toml
+  hello = "world"
+  ```
+  {{< /tab >}}
+
+{{< /tabs >}}

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

@@ -7,54 +7,54 @@ next: /docs/guide/deploy-site
 
 {{< tabs items="JSON,YAML,TOML" >}}
 
-{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
+{{< tab >}}**JSON**: JavaScript 对象表示法（JSON）是一种基于 JavaScript 对象语法的标准文本格式，用于表示结构化数据。{{< /tab >}}
-{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
+{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}}
-{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
+{{< tab >}}**TOML**: TOML 旨在成为一种最小化的配置文件格式，由于其明显的语义，易于阅读。{{< /tab >}}
 
 {{< /tabs >}}
 
-## 使用
+## 用法
 
-### 默认情况下
+### 默认
 
 ```
 {{</* tabs items="JSON,YAML,TOML" */>}}
 
-  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
+  {{</* tab */>}}**JSON**: JavaScript 对象表示法（JSON）是一种基于 JavaScript 对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
-  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}}
-  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML 旨在成为一种最小化的配置文件格式，由于其明显的语义，易于阅读。{{</* /tab */>}}
 
 {{</* /tabs */>}}
 ```
 
-### 指定索引
+### 指定选中索引
 
-使用 `defaultIndex` 属性指定选定的选项卡。索引从 0 开始。
+使用 `defaultIndex` 属性来指定选中的标签页。索引从 0 开始。
 
 ```
 {{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
 
-  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
+  {{</* tab */>}}**JSON**: JavaScript 对象表示法（JSON）是一种基于 JavaScript 对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
-  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}}
-  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML 旨在成为一种最小化的配置文件格式，由于其明显的语义，易于阅读。{{</* /tab */>}}
 
 {{</* /tabs */>}}
 ```
 
-默认为 `YAML`
+默认情况下，`YAML` 标签页将被选中。
 
 {{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
 
-{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
+{{< tab >}}**JSON**: JavaScript 对象表示法（JSON）是一种基于 JavaScript 对象语法的标准文本格式，用于表示结构化数据。{{< /tab >}}
-{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
+{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}}
-{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
+{{< tab >}}**TOML**: TOML 旨在成为一种最小化的配置文件格式，由于其明显的语义，易于阅读。{{< /tab >}}
 
 {{< /tabs >}}
 
 
 ### 使用 Markdown
 
-还支持包括代码块的 Markdown 语法：
+Markdown 语法，包括代码块，也受支持：
 
 ````
 {{</* tabs items="JSON,YAML,TOML" */>}}
@@ -65,7 +65,7 @@ next: /docs/guide/deploy-site
   ```
   {{</* /tab */>}}
 
-  ... add other tabs similarly
+  ... 类似地添加其他标签页
 
 {{</* /tabs */>}}
 ````

exampleSite/content/docs/guide/syntax-highlighting.ja.md

@@ -0,0 +1,114 @@
+---
+title: "シンタックスハイライト"
+weight: 3
+---
+
+Hugoは、純粋なGoで書かれた汎用シンタックスハイライターである[Chroma](https://github.com/alecthomas/chroma)を使用してシンタックスハイライトを行います。
+Markdownコンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば：
+
+<!--more-->
+
+````markdown {filename="Markdown"}
+```python
+def say_hello():
+    print("Hello!")
+```
+````
+
+は次のようにレンダリングされます：
+
+```python
+def say_hello():
+    print("Hello!")
+```
+
+## 機能
+
+### ファイル名
+
+コードブロックにファイル名やタイトルを追加するには、`filename`属性を設定します：
+
+````markdown {filename="Markdown"}
+```python {filename="hello.py"}
+def say_hello():
+    print("Hello!")
+```
+````
+
+```python {filename="hello.py"}
+def say_hello():
+    print("Hello!")
+```
+
+### ファイルへのリンク
+
+{{< new-feature version="v0.9.2" >}}
+
+`base_url`属性を使用して、ファイル名と組み合わせてリンクを生成するベースURLを提供できます。
+
+ファイル名には、ベースパス内のファイルの場所を指定する相対パスを含めることができます。
+
+````markdown {filename="Markdown"}
+```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
+go 1.20
+```
+````
+
+```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
+go 1.20
+```
+
+### 行番号
+
+行番号を設定するには、`linenos`属性を`table`に設定し、オプションで`linenostart`を開始行番号に設定します：
+
+````markdown {filename="Markdown"}
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("Hello!")
+```
+````
+
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("Hello!")
+```
+
+### 行のハイライト
+
+行をハイライトするには、`hl_lines`属性に行番号のリストを設定します：
+
+````markdown {filename="Markdown"}
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("Hello!")
+
+def main():
+    say_hello()
+```
+````
+
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("Hello!")
+
+def main():
+    say_hello()
+```
+
+### コピーボタン
+
+デフォルトでは、コードブロックにコピーボタンが有効になっています。その動作はサイト設定ファイルを変更することで変更できます：
+
+```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
+params:
+  highlight:
+    copy:
+      enable: true
+      # hover | always
+      display: hover
+```
+
+## サポートされている言語
+
+サポートされている言語のリストについては、[Chromaのドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。

exampleSite/content/docs/guide/syntax-highlighting.md

@@ -40,6 +40,24 @@ def say_hello():
     print("Hello!")
 ```
 
+### Link to File
+
+{{< new-feature version="v0.9.2" >}}
+
+You can use the `base_url` attribute to provide a base URL that will be combined with the file name to generate a link.
+
+The file name can include a relative path if it specifies the file's location within the base path.
+
+````markdown {filename="Markdown"}
+```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
+go 1.20
+```
+````
+
+```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
+go 1.20
+```
+
 ### Line Numbers
 
 To set line numbers, set attribute `linenos` to `table` and optionally set `linenostart` to the starting line number:

exampleSite/content/docs/guide/syntax-highlighting.zh-cn.md

@@ -1,10 +1,10 @@
 ---
-title: "代码高亮"
+title: "语法高亮"
 weight: 3
 ---
 
-Hugo 使用 [Chroma](https://github.com/alecthomas/chroma)，一种纯 Golang 实现的代码高亮渲染器。
+Hugo 使用 [Chroma](https://github.com/alecthomas/chroma)，这是一个用纯 Go 编写的通用语法高亮器，用于语法高亮。
-建议对 Markdown 内容中的代码块使用反引号，例如：
+建议在 Markdown 内容中使用反引号来标记代码块。例如：
 
 <!--more-->
 
@@ -15,18 +15,18 @@ def say_hello():
 ```
 ````
 
-将呈现为：
+将会渲染为：
 
 ```python
 def say_hello():
     print("Hello!")
 ```
 
-## 特性
+## 功能
 
 ### 文件名
 
-要向代码块添加文件名或标题，请设置 `filename`：
+要为代码块添加文件名或标题，请设置 `filename` 属性：
 
 ````markdown {filename="Markdown"}
 ```python {filename="hello.py"}
@@ -40,9 +40,27 @@ def say_hello():
     print("Hello!")
 ```
 
+### 文件链接
+
+{{< new-feature version="v0.9.2" >}}
+
+你可以使用 `base_url` 属性提供一个基础 URL，它将与文件名结合生成一个链接。
+
+如果文件名指定了文件在基础路径中的位置，则可以包含相对路径。
+
+````markdown {filename="Markdown"}
+```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
+go 1.20
+```
+````
+
+```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
+go 1.20
+```
+
 ### 行号
 
-如需设置行号，将 `linenos` 设置为 `table`，并将 `linenostart` 设置为起始行号：
+要设置行号，请将 `linenos` 属性设置为 `table`，并可选地设置 `linenostart` 为起始行号：
 
 ````markdown {filename="Markdown"}
 ```python {linenos=table,linenostart=42}
@@ -58,7 +76,7 @@ def say_hello():
 
 ### 高亮行
 
-显示高亮行，设置 `hl_lines` 为行号：
+要高亮特定行，请将 `hl_lines` 属性设置为行号列表：
 
 ````markdown {filename="Markdown"}
 ```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
@@ -78,12 +96,19 @@ def main():
     say_hello()
 ```
 
-
 ### 复制按钮
 
-默认情况下，代码块复制按钮已自动启用。
+默认情况下，代码块启用了复制按钮。可以通过修改站点配置文件来更改其行为：
 
+```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
+params:
+  highlight:
+    copy:
+      enable: true
+      # hover | always
+      display: hover
+```
 
-## 支持的编程语言
+## 支持的语言
 
-如需了解支持的编程语言，转至 [Chroma's documentation](https://github.com/alecthomas/chroma#supported-languages)。
+有关支持的语言列表，请参阅 [Chroma 文档](https://github.com/alecthomas/chroma#supported-languages)。

exampleSite/content/showcase/index.md

@@ -12,6 +12,40 @@ Open source projects powered by Hextra
 </p>
 
 {{< cards >}}
+  {{< card
+        link="https://github.com/regolith-linux/regolith-desktop.com"
+        title="Regolith Desktop"
+        image="https://github.com/user-attachments/assets/4bbedd7d-67ef-4363-91f1-acb4a0c5f8d0"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://github.com/modelcontextprotocol/specification"
+        title="Model Context Protocol Specification"
+        image="https://github.com/user-attachments/assets/1bb4f952-b8fc-43b5-9cbd-cd7213c2ba90"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://github.com/jonaspleyer/cellular_raza"
+        title="cellular_raza"
+        image="https://github.com/user-attachments/assets/f24c6455-b70a-419b-b025-e3d60101b673"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://github.com/mightymoud/sidekick"
+        title="Sidekick"
+        image="https://github.com/user-attachments/assets/4ae2a9d7-77b6-42eb-a9d7-5c4599f0f812"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://github.com/welding-torch/installc"
+        title="Install C"
+        image="https://github.com/user-attachments/assets/c9a85327-c7e7-40f1-830a-b4190a5e47bd"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
 
   {{< card
         link="https://github.com/axivo/website"
@@ -68,7 +102,7 @@ Open source projects powered by Hextra
   >}}
 
   {{< card
-        link="https://lutheranconfessions.org/"
+        link="https://github.com/remysheppard/lutheran-confessions"
         title="LutheranConfessions"
         image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359"
         imageStyle="object-fit:cover; aspect-ratio:16/9;"

exampleSite/hugo.yaml

@@ -3,6 +3,7 @@ baseURL: "https://example.com/"
 title: "Hextra"
 
 enableRobotsTXT: true
+# Parse Git commit
 enableGitInfo: true
 # enableEmoji: false
 hasCJKLanguage: true
@@ -22,33 +23,44 @@ languages:
     languageName: English
     weight: 1
     title: Hextra
-  zh-cn:
-    languageName: 简体中文
-    languageCode: zh-CN
-    weight: 2
-    title: Hextra
   fa:
     languageName: فارسی
     languageCode: fa
     languageDirection: rtl
-    weight: 3
+    weight: 2
     title: هگزترا
+  ja:
+    languageName: 日本語
+    languageCode: ja
+    weight: 3
+    title: Hextra
+  zh-cn:
+    languageName: 简体中文
+    languageCode: zh-CN
+    weight: 4
+    title: Hextra
 
 module:
   hugoVersion:
     extended: true
-    min: "0.112.0"
+    min: "0.134.0"
 
   workspace: hugo.work
   imports:
     - path: github.com/imfing/hextra
 
 markup:
+  highlight:
+    noClasses: false
   goldmark:
     renderer:
       unsafe: true
-  highlight:
+    extensions:
-    noClasses: false
+      passthrough:
+        delimiters:
+          block: [['\[', '\]'], ['$$', '$$']]
+          inline: [['\(', '\)']]
+        enable: true
 
 enableInlineShortcodes: true
 
@@ -124,6 +136,7 @@ params:
     displayPoweredBy: true
     width: normal
 
+  # Display the last modification date
   displayUpdatedDate: true
   dateFormat: "January 2, 2006"
 
@@ -151,6 +164,9 @@ params:
       sortBy: date
       sortOrder: desc # or "asc"
     
+    article:
+      displayPagination: true
+
   highlight:
     copy:
       enable: true
@@ -173,3 +189,4 @@ params:
       # emitMetadata: 0
       # inputPosition: top
       # lang: en
+      # theme: noborder_dark

exampleSite/hugo_stats.json

@@ -27,6 +27,7 @@
       "head",
       "hr",
       "html",
+      "iframe",
       "img",
       "input",
       "kbd",
@@ -140,11 +141,14 @@
       "dark:hover:hx-text-gray-50",
       "dark:hover:hx-text-neutral-50",
       "dark:hover:hx-text-white",
+      "dark:hx-bg-amber-900/30",
       "dark:hx-bg-black/60",
       "dark:hx-bg-blue-900/30",
       "dark:hx-bg-dark",
       "dark:hx-bg-dark/50",
       "dark:hx-bg-gray-50/10",
+      "dark:hx-bg-green-900/30",
+      "dark:hx-bg-indigo-900/30",
       "dark:hx-bg-neutral-800",
       "dark:hx-bg-neutral-900",
       "dark:hx-bg-orange-400/20",
@@ -154,9 +158,12 @@
       "dark:hx-bg-red-900/30",
       "dark:hx-bg-yellow-700/30",
       "dark:hx-block",
+      "dark:hx-border-amber-200/30",
       "dark:hx-border-blue-200/30",
       "dark:hx-border-gray-100/20",
       "dark:hx-border-gray-400",
+      "dark:hx-border-green-200/30",
+      "dark:hx-border-indigo-200/30",
       "dark:hx-border-neutral-700",
       "dark:hx-border-neutral-800",
       "dark:hx-border-orange-400/30",
@@ -170,12 +177,15 @@
       "dark:hx-shadow-[0_-12px_16px_#111]",
       "dark:hx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]",
       "dark:hx-shadow-none",
+      "dark:hx-text-amber-200",
       "dark:hx-text-blue-200",
       "dark:hx-text-gray-100",
       "dark:hx-text-gray-200",
       "dark:hx-text-gray-300",
       "dark:hx-text-gray-400",
       "dark:hx-text-gray-50",
+      "dark:hx-text-green-200",
+      "dark:hx-text-indigo-200",
       "dark:hx-text-neutral-200",
       "dark:hx-text-neutral-400",
       "dark:hx-text-orange-300",
@@ -187,9 +197,12 @@
       "dark:placeholder:hx-text-gray-400",
       "data-[state=closed]:hx-hidden",
       "data-[state=open]:hx-hidden",
+      "data-[state=selected]:dark:hx-border-primary-500",
+      "data-[state=selected]:dark:hx-text-primary-600",
       "data-[state=selected]:hx-block",
       "data-[state=selected]:hx-border-primary-500",
       "data-[state=selected]:hx-text-primary-600",
+      "dataframe",
       "filename",
       "first:hx-mt-0",
       "focus:hx-bg-white",
@@ -207,21 +220,30 @@
       "group-hover:hx-underline",
       "group-open:before:hx-rotate-90",
       "hamburger-menu",
+      "hextra-badge",
       "hextra-card",
       "hextra-card-icon",
       "hextra-card-image",
       "hextra-card-subtitle",
+      "hextra-card-tag",
       "hextra-cards",
       "hextra-code-block",
       "hextra-code-copy-btn",
       "hextra-code-copy-btn-container",
+      "hextra-custom-footer",
       "hextra-feature-card",
       "hextra-feature-grid",
       "hextra-filetree",
       "hextra-filetree-folder",
       "hextra-footer",
+      "hextra-jupyter-code-cell",
+      "hextra-jupyter-code-cell-outputs",
+      "hextra-jupyter-code-cell-outputs-container",
+      "hextra-pdf",
       "hextra-scrollbar",
       "hextra-sidebar-collapsible-button",
+      "hextra-tabs-panel",
+      "hextra-tabs-toggle",
       "hextra-toc",
       "highlight",
       "hover:dark:hx-bg-primary-500/10",
@@ -246,15 +268,19 @@
       "hover:hx-text-primary-600",
       "hx-absolute",
       "hx-align-[-2.5px]",
+      "hx-align-middle",
       "hx-align-text-bottom",
       "hx-appearance-none",
       "hx-aspect-auto",
+      "hx-bg-amber-100",
       "hx-bg-black/80",
       "hx-bg-black/[.05]",
       "hx-bg-blue-100",
       "hx-bg-clip-text",
       "hx-bg-gradient-to-r",
       "hx-bg-gray-100",
+      "hx-bg-green-100",
+      "hx-bg-indigo-100",
       "hx-bg-neutral-50",
       "hx-bg-orange-50",
       "hx-bg-primary-100",
@@ -267,12 +293,15 @@
       "hx-bg-yellow-50",
       "hx-block",
       "hx-border",
+      "hx-border-amber-200",
       "hx-border-b",
       "hx-border-b-2",
       "hx-border-black/5",
       "hx-border-blue-200",
       "hx-border-gray-200",
       "hx-border-gray-500",
+      "hx-border-green-200",
+      "hx-border-indigo-200",
       "hx-border-orange-100",
       "hx-border-red-200",
       "hx-border-t",
@@ -304,6 +333,7 @@
       "hx-gap-x-1.5",
       "hx-gap-y-2",
       "hx-grid",
+      "hx-grid-cols-1",
       "hx-group",
       "hx-group/code",
       "hx-group/copybtn",
@@ -376,7 +406,6 @@
       "hx-mt-6",
       "hx-mt-8",
       "hx-mx-1",
-      "hx-mx-2",
       "hx-mx-4",
       "hx-mx-auto",
       "hx-my-1.5",
@@ -392,7 +421,9 @@
       "hx-overflow-x-auto",
       "hx-overflow-x-hidden",
       "hx-overflow-y-auto",
+      "hx-overflow-y-hidden",
       "hx-overscroll-contain",
+      "hx-overscroll-x-contain",
       "hx-p-0.5",
       "hx-p-1",
       "hx-p-1.5",
@@ -414,6 +445,7 @@
       "hx-pt-8",
       "hx-px-1.5",
       "hx-px-2",
+      "hx-px-2.5",
       "hx-px-3",
       "hx-px-4",
       "hx-px-6",
@@ -452,8 +484,10 @@
       "hx-sticky",
       "hx-text-2xl",
       "hx-text-4xl",
+      "hx-text-[.65rem]",
       "hx-text-[10px]",
       "hx-text-[color:hsl(var(--primary-hue),100%,50%)]",
+      "hx-text-amber-900",
       "hx-text-base",
       "hx-text-blue-900",
       "hx-text-center",
@@ -465,6 +499,8 @@
       "hx-text-gray-700",
       "hx-text-gray-800",
       "hx-text-gray-900",
+      "hx-text-green-900",
+      "hx-text-indigo-900",
       "hx-text-left",
       "hx-text-lg",
       "hx-text-orange-800",
@@ -509,6 +545,7 @@
       "language-options",
       "language-switcher",
       "last-of-type:hx-mb-0",
+      "lg:hx-grid-cols-3",
       "lntable",
       "lntd",
       "ltr:before:hx-left-0",
@@ -541,6 +578,7 @@
       "max-sm:hx-grid-cols-1",
       "max-xl:hx-hidden",
       "md:hx-aspect-[1.1/1]",
+      "md:hx-grid-cols-2",
       "md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
       "md:hx-hidden",
       "md:hx-inline-block",
@@ -603,10 +641,9 @@
       "steps",
       "subheading-anchor",
       "success-icon",
-      "tabs-panel",
-      "tabs-toggle",
       "theme-toggle",
-      "xl:hx-block"
+      "xl:hx-block",
+      "xl:hx-grid-cols-4"
     ],
     "ids": null
   }

exampleSite/i18n/ja.yaml

@@ -0,0 +1,6 @@
+documentation: "ドキュメント"
+showcase: "展示"
+blog: "ブログ"
+about: "概要"
+more: "もっと見る"
+hugoDocs: "Hugo ドキュメント ↗"

exampleSite/layouts/shortcodes/new-feature.html

@@ -0,0 +1,11 @@
+{{- $version := .Get "version" | default "" -}}
+{{- $icon := .Get "icon" | default "" -}}
+{{- $defaultLink := cond (eq $version "") "https://github.com/imfing/hextra/tree/main" (printf "https://github.com/imfing/hextra/releases/tag/%s" $version) -}}
+{{- $link := .Get "link" | default $defaultLink -}}
+{{- $content := cond (eq $version "") "New in main branch" (printf "New in %s" $version) -}}
+
+<div style="margin-top: 1rem; display: inline-flex;">
+  <a href="{{ $link }}" title="{{ $link | plainify }}" target="_blank">
+    {{- partial "shortcodes/badge" (dict "content" $content "border" true "icon" $icon) -}}
+  </a>
+</div>

i18n/cs.yaml

@@ -2,7 +2,7 @@ backToTop: "Zpět nahoru"
 changeLanguage: "Změnit jazyk"
 changeTheme: "Změnit vzhled"
 copyCode: "Zkopírovat kód"
-copyright: "© 2024 Hextra Project."
+copyright: "© 2025 Hextra Project."
 dark: "Tmavý"
 editThisPage: "Upravit tuto stránku na GitHubu →"
 lastUpdated: "Naposledy změněno"

i18n/de.yaml

@@ -2,9 +2,9 @@ backToTop: "Nach oben"
 changeLanguage: "Sprache ändern"
 changeTheme: "Darstellung ändern"
 copyCode: "Code kopieren"
-copyright: "© 2024 Hextra Project."
+copyright: "© 2025 Hextra Project."
 dark: "Dunkel"
-editThisPage: "Diese Seite auf Github bearbeiten →"
+editThisPage: "Diese Seite auf GitHub bearbeiten →"
 lastUpdated: "Zuletzt aktualisiert am"
 light: "Hell"
 noResultsFound: "Keine Ergebnisse gefunden."

i18n/en.yaml

@@ -2,7 +2,7 @@ backToTop: "Scroll to top"
 changeLanguage: "Change language"
 changeTheme: "Change theme"
 copyCode: "Copy code"
-copyright: "© 2024 Hextra Project."
+copyright: "© 2025 Hextra Project."
 dark: "Dark"
 editThisPage: "Edit this page on GitHub →"
 lastUpdated: "Last updated on"

i18n/es.yaml

@@ -1,7 +1,7 @@
 backToTop: "Subir al inicio"
 changeLanguage: "Cambiar idioma"
 changeTheme: "Cambiar tema"
-copyright: "© 2024 Proyecto Hextra."
+copyright: "© 2025 Proyecto Hextra."
 dark: "Oscuro"
 editThisPage: "Edita esta página en GitHub →"
 lastUpdated: "Última actualización"

i18n/fr.yaml

@@ -1,7 +1,7 @@
 backToTop: "Revenir en haut"
 changeLanguage: "Changer la langue"
 changeTheme: "Thème d'affichage"
-copyright: "© 2024 Hextra Project."
+copyright: "© 2025 Hextra Project."
 dark: "Sombre"
 editThisPage: "Modifier cette page sur GitHub →"
 lastUpdated: "Dernière modification"

i18n/he.yaml

@@ -2,7 +2,7 @@ backToTop: "גלול למעלה"
 changeLanguage: "שנה שפה"
 changeTheme: "שנה ערכת צבעים"
 copyCode: "העתק קוד"
-copyright: "© 2024 פרוייקט Hextra"
+copyright: "© 2025 פרוייקט Hextra"
 dark: "כהה"
 editThisPage: "← ערוך עמוד זה בגיטהאב"
 lastUpdated: "עודכן לאחרונה ב"

i18n/ja.yaml

@@ -1,7 +1,7 @@
 backToTop: "トップにスクロール"
 changeLanguage: "言語を変更"
 changeTheme: "テーマを変更"
-copyright: "© 2024 Hextra プロジェクト。"
+copyright: "© 2025 Hextra プロジェクト。"
 dark: "ダーク"
 editThisPage: "このページをGitHubで編集 →"
 lastUpdated: "最終更新日"

i18n/ko.yaml

@@ -1,9 +1,9 @@
 backToTop: "맨위로 스크롤"
 changeLanguage: "언어변경"
 changeTheme: "테마변경"
-copyright: "© 2024 Hextra Project."
+copyright: "© 2025 Hextra Project."
 dark: "어두운 테마"
-editThisPage: "Github에서 편집하기 →"
+editThisPage: "GitHub에서 편집하기 →"
 lastUpdated: "마지막 수정일자"
 light: "밝은 테마"
 noResultsFound: "결과 없음"

i18n/nb.yaml

@@ -1,7 +1,7 @@
 backToTop: "Gå til toppen"
 changeLanguage: "Endre språk"
 changeTheme: "Endre tema"
-copyright: "© 2024 Hextra-prosjektet."
+copyright: "© 2025 Hextra-prosjektet."
 dark: "Mørk"
 editThisPage: "Rediger denne siden på GitHub →"
 lastUpdated: "Sist oppdatert"

i18n/nl.yaml

@@ -2,7 +2,7 @@ backToTop: "Terug naar boven"
 changeLanguage: "Taal veranderen"
 changeTheme: "Thema aanpassen"
 copyCode: "Kopieer code"
-copyright: "© 2024 Hextra Project."
+copyright: "© 2025 Hextra Project."
 dark: "Donker"
 editThisPage: "Bewerk deze pagina op GitHub →"
 lastUpdated: "Laatst bijgewerkt op"

i18n/nn.yaml

@@ -1,7 +1,7 @@
 backToTop: "Gå til toppen"
 changeLanguage: "Endre språk"
 changeTheme: "Endre tema"
-copyright: "© 2024 Hextra-prosjektet."
+copyright: "© 2025 Hextra-prosjektet."
 dark: "Mørk"
 editThisPage: "Rediger denne sida på GitHub →"
 lastUpdated: "Sist oppdatert"

i18n/pt.yaml

@@ -1,7 +1,7 @@
 backToTop: "Voltar ao topo"
 changeLanguage: "Mudar a língua"
 changeTheme: "Mudar tema"
-copyright: "© 2024 Projecto Hextra."
+copyright: "© 2025 Projecto Hextra."
 dark: "Escuro"
 editThisPage: "Edita esta página no GitHub →"
 lastUpdated: "Última modificação"