diff --git a/content/zh/docs/contribute/style/hugo-shortcodes/index.md b/content/zh/docs/contribute/style/hugo-shortcodes/index.md
new file mode 100644
index 0000000000..b9523c7217
--- /dev/null
+++ b/content/zh/docs/contribute/style/hugo-shortcodes/index.md
@@ -0,0 +1,272 @@
+---
+approvers:
+- chenopis
+title: 定制 Hugo 短代码
+content_template: templates/concept
+---
+
+
+
+{{% capture overview %}}
+
+本页面将介绍定制 Hugo 短代码,可以用于 Kubernetes markdown 文档书写。
+
+
+更多关于短代码参见 [Hugo 文档](https://gohugo.io/content-management/shortcodes)。
+{{% /capture %}}
+
+{{% capture body %}}
+
+## 功能状态
+
+
+本站上面的 markdown 页面,你可以加入短代码来展示已经文档介绍的功能的版本和状态(state)。
+
+
+### 功能状态演示
+
+
+下面是一个功能状态代码段的演示,表明这个功能已经在 Kubernetes v1.10时就已经稳定了。
+
+```
+{{* feature-state for_k8s_version="v1.10" state="stable" */>}}
+```
+
+
+会转换为:
+
+{{< feature-state for_k8s_version="v1.10" state="stable" >}}
+
+
+`state`的可选值如下:
+
+* alpha
+* beta
+* deprecated
+* stable
+
+
+### 功能状态代码
+
+
+下面是为每个现有的功能状态的模板代码。
+
+
+
+显示的 Kubernetes 默认为该页或站点版本。
+这个可以通过修改 for_k8s_version 短代码参数来调整。
+
+```
+{{* feature-state for_k8s_version="v1.10" state="stable" */>}}
+```
+
+
+会转换为:
+
+{{< feature-state for_k8s_version="v1.10" state="stable" >}}
+
+
+#### Alpha 功能
+
+```
+{{* feature-state feature-state state="alpha" */>}}
+```
+
+
+会转换为:
+
+{{< feature-state state="alpha" >}}
+
+
+
+#### Beta 功能
+
+```
+{{* feature-state feature-state state="beta" */>}}
+```
+
+
+会转换为:
+
+{{< feature-state state="beta" >}}
+
+
+#### 稳定功能
+
+```
+{{* feature-state feature-state state="stable" */>}}
+```
+
+
+会转换为:
+
+{{< feature-state state="stable" >}}
+
+
+#### 废弃功能
+
+```
+{{* feature-state feature-state state="deprecated" */>}}
+```
+
+
+会转换为:
+
+{{< feature-state state="deprecated" >}}
+
+
+## 词汇
+
+
+
+你可以通过加入术语词汇的短代码,来自动更新和替换相应链接中的内容([我们的词汇库](/docs/reference/glossary/))
+这样,在浏览在线文档,鼠标移到术语上时,术语解释就会显示在提示框中。
+
+
+
+词汇术语的原始数据保存在 [https://github.com/kubernetes/website/tree/master/content/en/docs/reference/glossary](https://github.com/kubernetes/website/tree/master/content/en/docs/reference/glossary),每个内容文件对应相应的术语解释。
+
+
+### 词汇演示
+
+
+
+例如,下面的代码在 markdown 中将会转换为 `{{< glossary_tooltip text="cluster" term_id="cluster" >}}`,然后在提示框中显示。
+
+````liquid
+{{* glossary_tooltip text="cluster" term_id="cluster" */>}}
+````
+
+
+## 标签页
+
+
+在本站的 markdown 页面(`.md` 文件)中,你可以加入一个标签页集来显示不同形式的解决方案。
+
+
+标签页的短代码包含以下参数:
+
+
+
+* `name`: 标签页上的名字。
+* `codelang`: 如果要在`tab`短代码中加入内部内容,需要告知 Hugo 使用的是什么代码语言,方便代码高亮。
+* `include`: 标签页中所要包含的文件。如果标签页是在 Hugo 的页面包([leaf bundle](https://gohugo.io/content-management/page-bundles/#leaf-bundles))中,文件(可以是 Hugo 所支持的 MIME 类型文件)将会在包中查找。如果不是,所要包含的内容页面将会在当前路径的相关路径下查找。注意,在`include`属性部分,不能加入短代码内部内容,必须要使用自结束(self-closing)的语法。
+非内容文件将会被代码高亮。如果没有在`codelang`进行声明的话,所用的代码语言将会来自文件名。
+
+
+
+* 如果内部内容是 markdown, 你必须要使用 `%` 分隔符来包装标签页,例如,`{{%/* tab name="Tab 1" %}}This is **markdown**{{% /tab */%}}`
+* 可以在标签页集中混合使用上面的各种变形。
+
+
+下面是演示标签页短代码。
+
+{{< note >}}
+The tab **name** in a `tabs` definition must be unique within a content page.
+一个内容页面下的,标签页定义中的标签页 **名** 必须是唯一的。
+{{< /note >}}
+
+
+### 标签页演示:代码高亮
+
+```go-text-template
+{{* tabs name="tab_with_code" >}}
+{{{< tab name="Tab 1" codelang="bash" >}}
+echo "This is tab 1."
+{{< /tab >}}
+{{< tab name="Tab 2" codelang="go" >}}
+println "This is tab 2."
+{{< /tab >}}}
+{{< /tabs */>}}
+```
+
+
+会转换为:
+
+{{< tabs name="tab_with_code" >}}
+{{< tab name="Tab 1" codelang="bash" >}}
+echo "This is tab 1."
+{{< /tab >}}
+{{< tab name="Tab 2" codelang="go" >}}
+println "This is tab 2."
+{{< /tab >}}
+{{< /tabs >}}
+
+### Tabs demo: Inline Markdown and HTML
+
+```go-html-template
+{{* tabs name="tab_with_md" >}}
+{{% tab name="Markdown" %}}
+This is **some markdown.**
+{{< note >}}**Note:** It can even contain shortcodes.{{< /note >}}
+{{% /tab %}}
+{{< tab name="HTML" >}}
+
This is some plain HTML.
+This is some plain HTML.
+