i18n: Add some zh-cn translation of exampleSite(docs) (#12)

--------- Co-authored-by: Xin <xin@imfing.com>
2023-08-31 04:21:31 +08:00 · 2023-08-31 04:21:31 +08:00 · e1a2109a68
commit e1a2109a68
parent 392c6f8dde
16 changed files with 859 additions and 0 deletions
--- a/README.zh-cn.md
+++ b/README.zh-cn.md
@ -0,0 +1,44 @@
+<div align="center">
+  <h1 align="center">Hextra</h1>
+  <p align="center">用于创建美观的静态站点的现代化, 响应式, 功能强大的 Hugo 主题.</p>
+
+演示 → [imfing.github.io/hextra](https://imfing.github.io/hextra/)
+</div>
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/5097752/263550533-c18343ca-3848-4230-b5c0-ee989d7916da.png">
+  <img alt="Hextra" src="https://user-images.githubusercontent.com/5097752/263550528-663599f9-17a1-4686-b5c4-3da233b5034d.png">
+</picture>
+
+<div align="right">
+<a href="https://github.com/imfing/hextra/actions/workflows/pages.yml"><img alt="GitHub Actions Status" src="https://github.com/imfing/hextra/actions/workflows/pages.yml/badge.svg"></a> <a href="https://app.netlify.com/sites/hugo-hextra/deploys"><img alt="Netlify Status" src="https://api.netlify.com/api/v1/badges/61d6e55a-2447-487e-b59f-c9537e5df175/deploy-status"></a>
+</div>
+
+## 特性
+
+- **美观的设计** - 受 Nextra 的启发，Hextra 利用 Tailwind CSS 提供现代化的设计，使您的网站看起来美观有加.
+- **响应式布局和深色模式支持** - 在任何设备上看起来都足够美观, 无论是手机, 平板电脑或者电脑. 深色模式的支持使 Hextra 可以应对各种照明环境.
+- **快速且轻量** - 由 Hugo 强力支持, Hugo 是一个快如闪电的静态站点生成器, 这一切都只需一个可执行文件, Hextra 始终保持最小化, 无需 Javascript 或者 Node.js.
+- **全文搜索** - 集成了 Flexsearch 的全文搜索, 无需额外的配置.
+- **网站中的瑞士军刀** - Markdown, 代码高亮, LaTex 数学公式, diagrams 图表和 Shortcodes 都可以用于丰富你的内容. 目录, 面包屑导航, 分页, 侧边栏等均由 Hextra 自动生成。
+- **多语言和 SEO Ready** - Hugo 的多语言模式使得构建多语言网站更简单. 具有 SEO tags, Open Graph, 和 Twitter Cards 等诸多开箱即用的功能.
+
+## 快速开始
+
+### 使用模板
+
+使用 [Hextra stater template](https://github.com/imfing/hextra-starter-template) 是使用 Hextra 主题的最简单方法. 点击仓库页面上的 `Use this template` 按钮开始使用.
+
+此仓库中包含一个 [GitHub Actions workflow](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) 来帮助你免费在 GitHub Pages 上自动构建和部署网站.
+
+### 使用
+
+转至[文档](https://imfing.github.io/hextra/zh-cn/docs)
+
+## 贡献
+
+该项目正在积极开发中. 欢迎贡献!
+
+## 许可证
+
+[MIT License](./LICENSE)
--- a/exampleSite/content/about/index.zh-cn.md
+++ b/exampleSite/content/about/index.zh-cn.md
@ -0,0 +1,20 @@
+---
+title: 关于
+toc: false
+---
+
+Hextra 是一款简洁, 快速, 灵活的主题, 适用于构建现代化静态站点. Hextra 特别适用于文档网站, 但也可用于构建,博客, 投资组合网站等各种类型的网站.
+
+Hugo 和 Jekyll 类似, 是一个静态网站生成器, 但与其他生成器不同, Hugo 只有单个可执行文件, 这使得它可以轻松地在各种平台上安装和运行. Hugo 的运行速度非常快且可靠性高, 能够在几毫秒内渲染数千页的网站.
+
+Hextra 被设计为轻量级, 具有最小化的内存占用. 使用 Hextra 无需安装繁杂的依赖, 比如 Node.js; 相反, 你只需要一个简单的 YAML 配置文件和 Markdown 内容. 因此, 我们可以专注于内容而非在配置环境上浪费精力
+
+## 鸣谢
+
+Hextra 的设计离不开这些项目的支持和其提供的灵感: 
+
+- [Hugo](https://gohugo.io/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Heroicons](https://heroicons.com/)
+- [Nextra](https://nextra.vercel.app/)
+- [Next.js](https://nextjs.org/)
--- a/exampleSite/content/blog/_index.zh-cn.md
+++ b/exampleSite/content/blog/_index.zh-cn.md
@ -0,0 +1,3 @@
+---
+title: "博客"
+---
--- a/exampleSite/content/docs/_index.zh-cn.md
+++ b/exampleSite/content/docs/_index.zh-cn.md
@ -0,0 +1,39 @@
+---
+linkTitle: "文档"
+title: 介绍
+---
+
+👋 嘿, 你好! 欢迎来到 Hextra 的文档!
+
+<!--more-->
+
+## Hextra 是什么?
+Hextra 是一个现代化, 快速和开箱即用的 [Hugo][hugo] 主题, 使用 [Tailwind CSS][tailwind-css] 构建.
+被设计于构建美观的文档, 博客等网站, Hextra 提供了一些开箱即用的功能和强大的可扩展性以面对各种而样的需求.
+
+## 功能
+
+- **美观的设计** - 受 Nextra 的启发，Hextra 利用 Tailwind CSS 提供现代化的设计，使您的网站看起来美观有加.
+- **响应式布局和深色模式支持** - 在任何设备上看起来都足够美观, 无论是手机, 平板电脑或者电脑. 深色模式的支持使 Hextra 可以应对各种照明环境.
+- **快速且轻量** - 由 Hugo 强力支持, Hugo 是一个快如闪电的静态站点生成器, 这一切都只需一个可执行文件, Hextra 始终保持最小化, 无需 Javascript 或者 Node.js.
+- **全文搜索** - 集成了 Flexsearch 的全文搜索, 无需额外的配置.
+- **网站中的瑞士军刀** - Markdown, 代码高亮, LaTex 数学公式, diagrams 图表和 Shortcodes 都可以用于丰富你的内容. 目录, 面包屑导航, 分页, 侧边栏等均由 Hextra 自动生成。
+- **多语言和 SEO Ready** - Hugo 的多语言模式使得构建多语言网站更简单. 具有 SEO tags, Open Graph, 和 Twitter Cards 等诸多开箱即用的功能.
+
+## 有问题或反馈?
+
+{{< callout emoji="❓" >}}
+  Hextra 仍在持续开发中. 有问题或者反馈? 在 GitHub 上 [创建 Issues](https://github.com/imfing/hextra/issues)!
+{{< /callout >}}
+
+## 接下来
+
+直接进入以下部分开始：
+
+{{< cards >}}
+  {{< card link="getting-started" title="快速开始" icon="document-text" subtitle="学习如何使用 Hextra 创建网站" >}}
+{{< /cards >}}
+
+[hugo]: https://gohugo.io/
+[flex-search]: https://github.com/nextapps-de/flexsearch
+[tailwind-css]: https://tailwindcss.com/
--- a/exampleSite/content/docs/advanced/_index.zh-cn.md
+++ b/exampleSite/content/docs/advanced/_index.zh-cn.md
@ -0,0 +1,15 @@
+---
+linkTitle: 高级配置
+title: 高级配置
+prev: /docs/guide/shortcodes/tabs
+next: /docs/advanced/multi-language
+---
+
+此部分提供了 Hextra 的一些高级配置.
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="multi-language" title="多语言" icon="translate" >}}
+  {{< card link="customization" title="定制化" icon="pencil" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/advanced/customization.zh-cn.md
+++ b/exampleSite/content/docs/advanced/customization.zh-cn.md
@ -0,0 +1,58 @@
+---
+title: 自定义 Hextra
+linkTitle: 自定义
+---
+
+Hextra 在 `hugo.yaml` 中提供了一些自定义选项来配置主题.
+本页介绍了可用选项以及如何进一步自定义主题.
+
+<!--more-->
+
+## 自定义 CSS
+
+要添加自定义 CSS，我们需要在站点中创建一个文件 `assets/css/custom.css`. Hextra 将自动加载该文件, 比如自定义字体:
+
+```css {filename="assets/css/custom.css"}
+.content {
+  font-family: "Times New Roman", Times, serif;
+}
+```
+
+### 主题色
+
+主题色可以通过设置 `--primary-hue` 变量来自定义：
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --primary-hue: 100deg;
+}
+```
+
+### 代码高亮
+
+代码高亮风格的详细信息可在 [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html) 中找到. 可以使用以下命令生成样式表：
+
+```bash
+$ hugo gen chromastyles --style=github
+```
+
+可将生成的样式添加到自定义 CSS 文件中以覆盖默认代码高亮样式.
+
+## 自定义 Script
+
+你可以添加以下文件以自定义 `script` 添加到每页的 `head` 或 `end`.
+
+```
+layouts/partials/custom/head-end.html
+```
+
+## 自定义布局
+
+可以在站点的 `layouts` 目录中创建同名文件来覆盖主题的默认布局.
+例如，要覆盖文档的 `single.html` 布局，在站点中创建文件 `layouts/docs/single.html`.
+
+如需或许更多信息, 转至 [Hugo Templates](https://gohugo.io/templates/).
+
+## 进一步定制 Hextra
+
+没有找到你想修改的东西？在 GitHub 上[创建 Issues](https://github.com/imfing/hextra/issues) 或为 Hextra 贡献你的智慧!
--- a/exampleSite/content/docs/advanced/multi-language.zh-cn.md
+++ b/exampleSite/content/docs/advanced/multi-language.zh-cn.md
@ -0,0 +1,74 @@
+---
+title: "多语言"
+weight: 1
+prev: /docs/advanced
+---
+
+Hextra 支持使用 Hugo 的[多语言模式](https://gohugo.io/content-management/multilingual/) 创建多语言的网站.
+
+<!--more-->
+
+## 启用多语言支持
+
+为了使我们的网站支持多语言，我们需要告诉 Hugo 需要支持的语言. 在站点配置文件中添加：
+
+```yaml {filename="hugo.yaml"}
+defaultContentLanguage: en
+languages:
+  en:
+    languageName: English
+    weight: 1
+  fr:
+    languageName: Français
+    weight: 2
+  ja:
+    languageName: 日本語
+    weight: 3
+```
+
+## 按文件名管理翻译
+
+Hugo 支持按文件名管理翻译. 例如, 如果我们有一个英文文件 `content/docs/_index.md`, 我们可以创建一个翻译为法语的文件 `content/docs/_index.fr.md`.
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="_index.fr.md" >}}
+      {{< filetree/file name="_index.ja.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+注意：Hugo 还支持[按内容目录管理翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory).
+
+## 翻译菜单项
+
+要翻译导航栏中的菜单项，我们需要设置 `identifier` 字段: 
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - identifier: documentation
+      name: Documentation
+      pageRef: /docs
+      weight: 1
+    - identifier: blog
+      name: Blog
+      pageRef: /blog
+      weight: 2
+```
+
+## 翻译字符串
+
+要翻译其他地方的字符串, 我们需要将翻译添加到相应的 i18n 文件中:
+
+```yaml {filename="i18n/fr.yaml"}
+readMore: Lire la suite
+```
+
+## 更多参考
+
+- [Hugo Multilingual Mode](https://gohugo.io/content-management/multilingual/)
+- [Hugo Multilingual Part 1: Content translation](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
+- [Hugo Multilingual Part 2: Strings localization](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
--- a/exampleSite/content/docs/getting-started.zh-cn.md
+++ b/exampleSite/content/docs/getting-started.zh-cn.md
@ -0,0 +1,83 @@
+---
+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 workflow](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) 来帮助你免费在 GitHub Pages 上自动构建和部署网站.
+
+[🌐 演示 ↗](https://imfing.github.io/hextra-starter-template/)
+
+## 全新开始
+
+### 先决条件
+
+在我们开始之前, 必须先确保 [Hugo](https://gohugo.io/) 已被正确安装.
+转至 Hugo 的 [official installation guide](https://gohugo.io/installation/) 以获取更多信息.
+
+推荐使用 [Hugo modules](https://gohugo.io/hugo-modules/) 管理 Hugo 主题. 使用 Hugo modules 需要先正确安装 [Git](https://git-scm.com/) 和 [Go](https://go.dev/).
+
+{{% steps %}}
+
+### 初始化 Hugo 站点
+
+```bash
+$ hugo new site my-site --format=yaml
+```
+
+### 通过 module 配置 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 %}}
+
+## 接下来
+
+你可以探索以下部分来添加更多内容:
+
+{{< 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 >}}
--- a/exampleSite/content/docs/guide/_index.zh-cn.md
+++ b/exampleSite/content/docs/guide/_index.zh-cn.md
@ -0,0 +1,22 @@
+---
+title: 指南
+weight: 2
+prev: /docs/getting-started
+next: /docs/guide/organize-files
+sidebar:
+  open: true
+---
+
+探索以下部分以学习使用 Hextra 撰写内容:
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="organize-files" title="目录结构" icon="document-duplicate" >}}
+  {{< card link="configuration" title="配置" icon="adjustments" >}}
+  {{< card link="markdown" title="Markdown" icon="markdown" >}}
+  {{< card link="syntax-highlighting" title="代码高Liam和" icon="sparkles" >}}
+  {{< card link="latex" title="LaTeX" icon="variable" >}}
+  {{< card link="diagrams" title="Diagrams" icon="chart-square-bar" >}}
+  {{< card link="shortcodes" title="Shortcodes" icon="template" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/guide/configuration.zh-cn.md
+++ b/exampleSite/content/docs/guide/configuration.zh-cn.md
@ -0,0 +1,124 @@
+---
+title: 配置文件
+weight: 2
+---
+
+Hugo 从 Hugo 网站根目录下的 `hugo.yaml` 读取配置.
+在配置文件中, 您可以配置站点的所有选项.
+你可以在 `exampleSite/hugo.yaml` 中找到此站点的配置文件作为开始.
+<!--more-->
+
+## Navigation
+
+### Menu
+
+右上角的菜单在配置文件的 `menu.main` 中配置: 
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - name: Documentation
+      pageRef: /docs
+      weight: 1
+    - name: Blog
+      pageRef: /blog
+      weight: 2
+    - name: About
+      pageRef: /about
+      weight: 3
+    - name: Search
+      weight: 4
+      params:
+        type: search
+    - name: GitHub
+      weight: 5
+      url: "https://github.com/imfing/hextra"
+      params:
+        icon: github
+```
+
+有几种不同类型的菜单项: 
+
+1. Link to a page in the site with `pageRef`
+    ```yaml
+    - name: Documentation
+      pageRef: /docs
+    ```
+2. Link to an external URL with `url`
+    ```yaml
+    - name: GitHub
+      url: "https://github.com"
+    ```
+3. Search bar with `type: search`
+    ```yaml
+    - name: Search
+      params:
+        type: search
+    ```
+4. Icon
+    ```yaml
+    - name: GitHub
+      params:
+        icon: github
+    ```
+
+这些菜单项可以通过设置 `weight` 进行排序.
+
+## 侧边栏
+
+### 主侧边栏
+
+主侧边栏是自动从 `content` 目录结构生成的.
+有关更多详细信息，转至 [目录结构](/docs/guide/organize-files).
+
+### 额外链接
+
+侧边栏的额外链接在配置文件的 `menu.sidebar` 部分中配置:
+
+```yaml {filename="hugo.yaml"}
+menu:
+  sidebar:
+    - name: More
+      params:
+        type: separator
+      weight: 1
+    - name: "About"
+      pageRef: "/about"
+      weight: 2
+    - name: "Hugo Docs ↗"
+      url: "https://gohugo.io/documentation/"
+      weight: 3
+```
+
+## 右侧边栏
+
+### 目录
+
+目录是根据内容文件中的标题自动生成的, 可以在 `front matter` 设置 `toc：false` 来禁用它.
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+toc: false
+---
+```
+
+### 编辑此页链接
+
+要配置编辑此页链接, 我们可以在配置文件中设置 `params.editURL.base`: 
+```yaml {filename="hugo.yaml"}
+params:
+  editURL:
+    base: "https://github.com/your-username/your-repo/edit/main"
+```
+
+将为每个页面自动生成编辑链接.
+如需为特定页面设置编辑链接，可以在页面的 `front matter` 中设置 `params.editURL`: 
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+params:
+  editURL: "https://example.com/edit/this/page"
+---
+```
--- a/exampleSite/content/docs/guide/diagrams.zh-cn.md
+++ b/exampleSite/content/docs/guide/diagrams.zh-cn.md
@ -0,0 +1,53 @@
+---
+title: Diagrams
+weight: 6
+next: /docs/guide/shortcodes
+---
+
+目前, Hextra 支持 [Mermain](#mermaid) 的图表.
+
+<!--more-->
+
+## Mermaid
+
+[Mermaid](https://github.com/mermaid-js/mermaid#readme) 是一个基于 JavaScript 的图表绘制工具, 它的文本定义和 Markdown 类似, 可在浏览器中动态创建图表. 例如, 流程图、序列图、饼图等
+
+在 Hextra 中使用 Mermain 就像使用代码块一样简单: 
+
+````markdown
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````
+
+将呈现为:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+Sequence diagram:
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+如需获取更多信息, 转至 [Mermaid Documentation](https://mermaid-js.github.io/mermaid/#/).
--- a/exampleSite/content/docs/guide/latex.zh-cn.md
+++ b/exampleSite/content/docs/guide/latex.zh-cn.md
@ -0,0 +1,60 @@
+---
+title: "LaTeX"
+weight: 4
+math: true
+---
+
+$\KaTeX$ 用于呈现 LaTeX 数学表达式. 可在 `front matter` 将 `math` 设置为 `true` 来启用.
+
+<!--more-->
+
+```yaml {filename="Markdown"}
+---
+title: "My Page with LaTeX"
+math: true
+---
+
+```
+
+启用后, KaTeX 中的脚本, 样式表和字体将自动包含在你的网站中. 这样就可以在 Markdown 内容中使用 LaTeX 数学表达式.
+
+## 例
+
+Markdown 内容中支持内联和单独的 LaTeX 数学表达式.
+
+### 内联
+
+```markdown {filename="page.md"}
+This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
+```
+
+This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
+
+### 单独的
+
+```markdown {filename="page.md"}
+$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
+```
+
+will be rendered as:
+
+$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
+
+
+## 支持的功能
+
+有关支持的函数列表, 转至 [KaTeX supported functions](https://katex.org/docs/supported.html).
+
+## 化学表达式
+
+通过 [mhchem](https://mhchem.github.io/MathJax-mhchem/) 支持化学表达式。
+
+内联: $\ce{H2O}$ is water.
+
+单独的:
+
+```markdown {filename="page.md"}
+$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
+```
+
+$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
--- a/exampleSite/content/docs/guide/markdown.zh-cn.md
+++ b/exampleSite/content/docs/guide/markdown.zh-cn.md
@ -0,0 +1,106 @@
+---
+title: Markdown
+weight: 2
+---
+
+Hugo 支持 [Markdown](https://en.wikipedia.org/wiki/Markdown) 来书写内容, 创建列表等. 本页将向你展示一些最常见的 Markdown 语法示例.
+
+<!--more-->
+
+## Markdown 示例
+
+### 文本样式
+
+| Style   | Syntax     | Example   | Output   |
+| --------  | -------- | ------ | ------ |
+| Bold | `**bold text**` | `**bold text**` | **bold text** |
+| Italic | `*italicized text*` | `*italicized text* | *italicized text* |
+| Strikethrough | `~~strikethrough text~~` | `~~strikethrough text~~` | ~~strikethrough text~~ |
+| Subscript | `<sub></sub>` | `This is a <sub>subscript</sub> text` | This is a <sub>subscript</sub> text |
+| Superscript | `<sup></sup>` | `This is a <sup>superscript</sup> text` | This is a <sup>superscript</sup> text |
+
+### 引用
+
+带角标的块引用: 
+
+> Don't communicate by sharing memory, share memory by communicating.<br>
+> — <cite>Rob Pike[^1]</cite>
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+
+### 表格
+
+表格并非核心 Markdown 规范, 但 Hugo 支持开箱即用的表格: 
+
+   Name | Age
+--------|------
+    Bob | 27
+  Alice | 23
+
+#### Markdown 表格中的内联
+
+| Italics   | Bold     | Code   |
+| --------  | -------- | ------ |
+| *italics* | **bold** | `code` |
+
+### 代码块
+
+{{< cards >}}
+  {{< card link="../../guide/syntax-highlighting" title="Syntax Highlighting" icon="sparkles" >}}
+{{< /cards >}}
+
+### 列表
+
+#### 有序列表
+
+1. First item
+2. Second item
+3. Third item
+
+#### 无序列表
+
+* List item
+* Another item
+* And another item
+
+#### 嵌套列表
+
+* Fruit
+  * Apple
+  * Orange
+  * Banana
+* Dairy
+  * Milk
+  * Cheese
+
+### 图像
+
+![](https://source.unsplash.com/featured/800x600?landscape)
+
+With caption:
+
+![](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+
+## 配置
+
+Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 解析 Markdown.
+Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 中配置.
+以下是Hextra的默认配置: 
+
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  highlight:
+    noClasses: false
+```
+
+如需了解更多选项, 转至 [Configure Markup](https://gohugo.io/getting-started/configuration-markup/).
+
+## 参考资料
+
+* [Markdown Guide](https://www.markdownguide.org/)
+* [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+* [Markdown Tutorial](https://www.markdowntutorial.com/)
+* [Markdown Reference](https://commonmark.org/help/)
--- a/exampleSite/content/docs/guide/organize-files.zh-cn.md
+++ b/exampleSite/content/docs/guide/organize-files.zh-cn.md
@ -0,0 +1,65 @@
+---
+title: 目录结构
+weight: 1
+prev: /docs/guide
+---
+
+## 目录结构
+
+默认情况下，Hugo 在 `context` 目录中搜索 Markdown 文件, 目录的结构决定了网站的最终输出结构.
+以示例网站为例: 
+
+<!--more-->
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="getting-started.md" >}}
+      {{< filetree/folder name="guide" state="open" >}}
+        {{< filetree/file name="_index.md" >}}
+        {{< filetree/file name="organize-files.md" >}}
+      {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+    {{< filetree/folder name="blog" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="post-1.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+每个 `_index.md` 文件都是相应部分的索引页, 其他 Markdown 文件则是常规页面.
+
+```
+content
+├── _index.md // <- /
+├── docs
+│   ├── _index.md // <- /docs/
+│   ├── getting-started.md // <- /docs/getting-started/
+│   └── guide
+│       ├── _index.md // <- /docs/guide/
+│       └── organize-files.md // <- /docs/guide/organize-files/
+└── blog
+    ├── _index.md // <- /blog/
+    └── post-1.md // <- /blog/post-1/
+```
+
+## 侧边栏导航
+
+侧边栏导航是根据内容组织的字母顺序自动生成的. 要手动配置侧边栏顺序, 可以在 Markdown 文件的 `front matter ` 中使用 `weight` 配置.
+
+```yaml {filename="content/docs/guide/_index.md"}
+---
+title: Guide
+weight: 2
+---
+```
+
+{{< callout emoji="ℹ️">}}
+  建议侧边栏不要太深. 如果内容太多, 请考虑 **将它们分成多个部分**.
+{{< /callout >}}
+
+## 配置 `context` 目录
+
+如果需要为的内容使用不同的目录, 可以在站点配置文件中设置 [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) 来实现.
--- a/exampleSite/content/docs/guide/syntax-highlighting.zh-cn.md
+++ b/exampleSite/content/docs/guide/syntax-highlighting.zh-cn.md
@ -0,0 +1,89 @@
+---
+title: "代码高亮"
+weight: 3
+---
+
+Hugo 使用 [Chroma](https://github.com/alecthomas/chroma)，一种纯 Golang 实现的代码高亮渲染器.
+建议对 Markdown 内容中的代码块使用反引号. 例如: 
+
+<!--more-->
+
+````markdown {filename="Markdown"}
+```python
+def say_hello():
+    print("Hello!")
+```
+````
+
+将呈现为：
+
+```python
+def say_hello():
+    print("Hello!")
+```
+
+## 特性
+
+### 文件名
+
+要向代码块添加文件名或标题, 请设置 `filename`:
+
+````markdown {filename="Markdown"}
+```python {filename="hello.py"}
+def say_hello():
+    print("Hello!")
+```
+````
+
+```python {filename="hello.py"}
+def say_hello():
+    print("Hello!")
+```
+
+### 行号
+
+如需设置行号, 将 `linenos` 设置为 `table` , 并将 `linenostart` 设置为起始行号:
+
+````markdown {filename="Markdown"}
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("Hello!")
+```
+````
+
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("Hello!")
+```
+
+### 突出显示线条
+
+要突出显示线条, 设置 `hl_lines` 为行号:
+
+````markdown {filename="Markdown"}
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("Hello!")
+
+def main():
+    say_hello()
+```
+````
+
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("Hello!")
+
+def main():
+    say_hello()
+```
+
+
+### 复制按钮
+
+默认情况下, 为代码块启用复制按钮.
+
+
+## 支持的语言
+
+如需了解支持的语言, 转至 [Chroma's documentation](https://github.com/alecthomas/chroma#supported-languages).
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@ -22,6 +22,10 @@ languages:
    languageName: 日本語
    weight: 2
    title: "Hextra テーマ"
+  zh-cn:
+    languageName: 简体中文
+    weight: 3
+    title: Hextra

 module:
  hugoVersion: