docs: update zh-cn translation (#365)

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

@@ -0,0 +1,79 @@
+---
+title: 标注
+linkTitle: Callout
+aliases:
+- callouts
+prev: /docs/guide/shortcodes
+---
+
+向读者显示重要信息的内置组件。
+
+<!--more-->
+
+## Example
+
+{{< callout emoji="👾">}}
+  **标注**是一段旨在吸引注意力的短文本
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  **标注**是一段旨在吸引注意力的短文本。
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  **标注**是一段旨在吸引注意力的短文本。
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  **标注**是一段旨在吸引注意力的短文本。
+{{< /callout >}}
+
+## Usage
+
+### Default
+
+{{< callout emoji="🌐">}}
+  Hugo 可用于创建各种网站，包括博客、作品集、文档网站等
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  Hugo 可用于创建各种网站，包括博客、作品集、文档网站等
+{{</* /callout */>}}
+```
+
+### Info
+
+{{< callout type="info" >}}
+  请访问 GitHub 查看最新版本
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" */>}}
+  请访问 GitHub 查看最新版本
+{{</* /callout */>}}
+```
+
+### Warning
+
+{{< callout type="warning" >}}
+  该 API 将在下一版本中弃用
+{{< /callout >}}
+
+```markdown
+{{</* callout type="warning" */>}}
+  **标注**是一段旨在吸引注意力的简短文字
+{{</* /callout */>}}
+```
+
+### Error
+
+{{< callout type="error" >}}
+  出问题了，要爆炸了
+{{< /callout >}}
+
+```markdown
+{{</* callout type="error" */>}}
+  出问题了，要爆炸了
+{{</* /callout */>}}
+```

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

@@ -0,0 +1,65 @@
+---
+title: 卡片
+linkTitle: Cards
+---
+
+## 示例
+
+{{< cards >}}
+  {{< card link="../callout" title="Callout" icon="warning" >}}
+  {{< card link="/" title="No Icon" >}}
+{{< /cards >}}
+
+{{< cards >}}
+  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
+  {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
+  {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
+{{< /cards >}}
+
+## 使用
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="Callout" icon="warning" */>}}
+  {{</* card link="/" title="No Icon" */>}}
+{{</* /cards */>}}
+```
+
+```
+{{</* cards */>}}
+  {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
+  {{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
+  {{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
+{{</* /cards */>}}
+```
+
+## 卡片参数
+
+| Parameter  | Description                           |
+|----------- |---------------------------------------|
+| `link`     | URL（内部或外部）          |
+| `title`    | 卡片的标题           |
+| `subtitle` | 字幕标题（支持 Markdown） |
+| `icon`     | 图标的名称                    |
+
+## Image Card
+
+此外，该卡还支持通过以下参数添加图像和处理：
+
+| Parameter  | Description                                 |
+|----------- |---------------------------------------------|
+| `image`    | 指定卡片的图像 URL.       |
+| `method`   | 设置 Hugo 的图像处理方法。       |
+| `options`  | 配置 Hugo 的图像处理选项。|
+
+卡片支持三种图像：
+
+1. 远程图片：完整网址应放置在 image 参数中
+2. 静态图片：使用 Hugo 的 static/ 目录中的相对路径
+3. 处理过的图片：使用 Hugo 的 assets/ 目录中的相对路径
+
+Hextra 在构建过程中会自动检测图片是否需要处理，并根据需要应用 options 参数或默认设置（缩放，800x，质量 80，WebP 格式）。
+
+它目前支持以下处理方法：Resize（缩放）、Fit（适应）、Fill（填充）和 Crop（裁剪）。
+
+有关 Hugo 内置图像处理命令、方法和选项的更多信息，请参阅他们的 [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).

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

@@ -0,0 +1,43 @@
+---
+title: 详情
+---
+
+用于显示可折叠内容的内置组件。
+
+<!--more-->
+
+## 示例
+
+{{% details title="Details" %}}
+
+这是细节的内容
+
+Markdown is **supported**.
+
+{{% /details %}}
+
+{{% details title="Click me to reveal" closed="true" %}}
+
+默认情况下这将被隐藏
+
+{{% /details %}}
+
+## Usage
+
+````markdown
+{{%/* details title="Details" */%}}
+
+这是细节的内容
+
+**支持** Markdown
+
+{{%/* /details */%}}
+````
+
+````markdown
+{{%/* details title="Click me to reveal" closed="true" */%}}
+
+默认情况下这将被隐藏
+
+{{%/* /details */%}}
+````

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

@@ -0,0 +1,34 @@
+---
+title: 文件树
+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/icon.zh-cn.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/steps.zh-cn.md

@@ -0,0 +1,42 @@
+---
+title: 步骤
+---
+
+A built-in component to display a series of steps.
+
+## 示例
+
+{{% steps %}}
+
+### 第一步
+
+这是第一步。
+
+### 第二步
+
+这是第二步。
+
+### 第三步
+
+这是第三步。
+
+{{% /steps %}}
+
+
+## 使用
+
+将 Markdown h3 标题放入 `steps` 短代码中。
+
+```
+{{%/* steps */%}}
+
+### Step 1
+
+This is the first step.
+
+### Step 2
+
+This is the second step.
+
+{{%/* /steps */%}}
+```

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

@@ -0,0 +1,93 @@
+---
+title: Tabs
+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 >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
+{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
+
+{{< /tabs >}}
+
+## 使用
+
+### 默认情况下
+
+```
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+### 指定索引
+
+使用 `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 */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+默认为 `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 >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
+{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
+
+{{< /tabs >}}
+
+
+### 使用 Markdown
+
+还支持包括代码块的 Markdown 语法：
+
+````
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}
+  ```json
+  { "hello": "world" }
+  ```
+  {{</* /tab */>}}
+
+  ... add other tabs similarly
+
+{{</* /tabs */>}}
+````
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+  {{< tab >}}
+  ```json
+  { "hello": "world" }
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```yaml
+  hello: world
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```toml
+  hello = "world"
+  ```
+  {{< /tab >}}
+
+{{< /tabs >}}