+用于创建美观的静态站点的现代化, 响应式, 功能强大的 Hugo 主题.
+ +演示 → [imfing.github.io/hextra](https://imfing.github.io/hextra/) +
+
+
+我们提供了一个 [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 >}}
diff --git a/exampleSite/content/docs/guide/_index.zh-cn.md b/exampleSite/content/docs/guide/_index.zh-cn.md
new file mode 100644
index 0000000..5d9d146
--- /dev/null
+++ 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 撰写内容:
+
+
+
+{{< 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 >}}
diff --git a/exampleSite/content/docs/guide/configuration.zh-cn.md b/exampleSite/content/docs/guide/configuration.zh-cn.md
new file mode 100644
index 0000000..329f37e
--- /dev/null
+++ b/exampleSite/content/docs/guide/configuration.zh-cn.md
@@ -0,0 +1,124 @@
+---
+title: 配置文件
+weight: 2
+---
+
+Hugo 从 Hugo 网站根目录下的 `hugo.yaml` 读取配置.
+在配置文件中, 您可以配置站点的所有选项.
+你可以在 `exampleSite/hugo.yaml` 中找到此站点的配置文件作为开始.
+
+
+## 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"
+---
+```
diff --git a/exampleSite/content/docs/guide/diagrams.zh-cn.md b/exampleSite/content/docs/guide/diagrams.zh-cn.md
new file mode 100644
index 0000000..bf69fcd
--- /dev/null
+++ b/exampleSite/content/docs/guide/diagrams.zh-cn.md
@@ -0,0 +1,53 @@
+---
+title: Diagrams
+weight: 6
+next: /docs/guide/shortcodes
+---
+
+目前, Hextra 支持 [Mermain](#mermaid) 的图表.
+
+
+
+## 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