📝 Docs: add draft menu example

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -1075,8 +1075,15 @@ You can also add user-defined content to menu items via the `params` field. The
 
 {{< admonition >}}
 The draft menu items and posts/pages can be rendered by starting the `Hugo server` command or adding the `-D`/`--buildDrafts` parameter to `hugo` command.
+{{< /admonition >}}
 
+{{< admonition tip >}}
 This helps to distinguish the different contents of preview environment and production environment during deployment.
+
+For example:
+
+-  [preview environment with draft menu items](https://fixit-1uivrlhmq-lruihao.vercel.app)
+-  [production environment without draft menu items](https://fixit.lruihao.cn)
 {{< /admonition >}}
 
 #### 3.4.3 Add content to Menu {#content-to-menu}

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -1086,8 +1086,15 @@ Hugo 有一个简单而强大的 [菜单系统](https://gohugo.io/content-manage
 
 {{< admonition >}}
 `hugo server` 命令启动或者为 `hugo` 添加 `-D`/`--buildDrafts` 参数，都能渲染草稿菜单和页面。
+{{< /admonition >}}
 
+{{< admonition tip >}}
 这样做有利于在部署时很好地区分**预览环境**和**生产环境**不同的内容。
+
+例如：
+
+-  [有草稿菜单的预览环境](https://fixit-1uivrlhmq-lruihao.vercel.app)
+-  [没有草稿菜单的生产环境](https://fixit.lruihao.cn)
 {{< /admonition >}}
 
 #### 3.4.3 添加内容到菜单 {#content-to-menu}