feat: add zh-hans

2026-03-26 13:18:34 +07:00 · 2025-07-14 16:22:33 +08:00
parent 7479e5c393
commit 0b13968761
2 changed files with 245 additions and 1 deletions
--- a/docs.json
+++ b/docs.json
@@ -910,7 +910,8 @@
                                        "group": "初级",
                                        "pages": [
                                            "zh-hans/workshop/basic/build-ai-image-generation-app",
-                                            "zh-hans/workshop/basic/travel-assistant"
+                                            "zh-hans/workshop/basic/travel-assistant",
+                                            "zh-hans/workshop/basic/the-right-way-of-markdown"
                                        ]
                                    },
                                    {
--- a/zh-hans/workshop/basic/the-right-way-of-markdown.mdx
+++ b/zh-hans/workshop/basic/the-right-way-of-markdown.mdx
@@ -0,0 +1,243 @@
+---
+title: Markdown 的正确使用方式
+---
+
+[Markdown](https://www.markdownguide.org/basic-syntax/) 可以将你在 Dify 应用中的输出从纯文本转化为格式良好、专业美观的响应内容。在 Answer 和 End 节点中使用 Markdown，可以渲染标题、列表、代码块、表格等元素，为终端用户创造清晰的视觉层次结构。
+
+## Dify 中的基本 Markdown 语法
+
+你可以在 Answer / End 节点中使用 Markdown 渲染以下内容：
+
+* 标题
+* 加粗、斜体、删除线
+* 列表
+* 表格
+* 多行代码块
+* 音频和视频
+
+### 标题
+
+使用 `#` 来表示标题，`#` 的数量表示标题级别：
+
+```markdown
+# 一级标题
+## 二级标题
+### 三级标题
+```
+
+### 加粗、斜体、删除线
+
+你可以使用以下方式设置文本样式：
+
+```markdown
+**加粗文本**
+*斜体文本*
+~~删除线文本~~
+```
+
+### 列表
+
+可以创建有序和无序列表：
+
+```markdown
+- 无序列表项 1
+- 无序列表项 2
+  - 嵌套无序项
+1. 有序列表项 1
+2. 有序列表项 2
+   1. 嵌套有序项
+```
+
+### 表格
+
+使用竖线和短横线创建表格：
+
+```markdown
+| 表头 1 | 表头 2 |
+|--------|--------|
+| 第 1 行第 1 列 | 第 1 行第 2 列 |
+| 第 2 行第 1 列 | 第 2 行第 2 列 |
+```
+
+### 多行代码块
+
+使用三个反引号 <code>\`\`\`python</code> 创建多行代码块：
+
+```python
+def hello_world():
+    print("Hello, World!")
+```
+
+### 音频和视频
+
+可以通过以下语法插入音频和视频：
+
+```markdown
+<video controls>
+  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
+</video>
+<audio controls>
+  <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
+</audio>
+```
+<Note>
+  如果你希望了解更多关于 Markdown 的使用方式，可以参考 [Markdown Guide](https://www.markdownguide.org/basic-syntax/)。
+</Note>
+
+## Dify 中的高级 Markdown 功能
+
+### 按钮和链接
+
+你可能不喜欢默认由大模型生成的后续问题，此时你可以使用按钮和链接，引导对话朝特定方向发展。
+
+<img
+src="/images/screenshot-20250714-134035.png"
+className="mr-auto"
+/>
+
+你可以使用以下语法创建按钮和链接：
+
+```
+<button data-message="Hello Dify" data-variant="primary">Hello Dify</button>
+<button data-message="Hello Dify" data-variant="danger">Hello Dify</button>
+```
+
+按钮需要定义两个属性：
+
+* `data-variant`：按钮样式，可选值包括 `primary`、`secondary`、`warning`、`secondary-accent`、`ghost`、`ghost-accent`、`tertiary`
+* `data-message`：点击按钮时发送的消息内容
+
+链接的用法更为简单：
+
+```
+<a href="https://dify.ai" target="_blank">Dify</a>
+```
+
+你也可以使用 `abbr` 语法创建交互链接，用于对话中触发特定交互：
+
+```
+[特殊链接](abbr:special-link)
+```
+
+---
+
+### 表单（Form）
+
+表单需要设置 `data-format` 属性，支持 `json` 和 `text` 两种格式，默认是 `text`。当设置为 `data-format="json"` 时，表单会以 JSON 对象提交。
+
+<img
+src="/images/screenshot-20250714-134150.png"
+className="mr-auto"
+/>
+
+#### 支持的输入类型
+
+Dify 支持多种表单输入类型：
+
+* text（文本）
+* textarea（多行文本）
+* password（密码）
+* time（时间）
+* date（日期）
+* datetime（日期时间）
+* select（下拉选择）
+* checkbox（复选框）
+* hidden（隐藏字段）
+
+如果你想在对话中渲染一个表单，可以使用如下语法：
+
+```
+<form data-format="json"> // 默认为 text
+  <label for="username">用户名：</label>
+  <input type="text" name="username" />
+  <label for="hidden_input">隐藏字段：</label>
+  <input type="hidden" name="hidden_input" value="hidden_value" />
+  <label for="password">密码：</label>
+  <input type="password" name="password" />
+  <label for="content">内容：</label>
+  <textarea name="content"></textarea>
+  <label for="date">日期：</label>
+  <input type="date" name="date" />
+  <label for="time">时间：</label>
+  <input type="time" name="time" />
+  <label for="datetime">日期时间：</label>
+  <input type="datetime" name="datetime" />
+  <label for="select">选择：</label>
+  <input type="select" name="select" data-options='["hello","world"]'/>
+  <input type="checkbox" name="check" data-tip="勾选表示你已同意"/>
+  <button data-variant="primary">登录</button>
+</form>
+```
+
+<Note>
+  Hidden 隐藏字段不会显示给用户，可以用来在不经用户输入的情况下传递数据。
+</Note>
+
+---
+
+### 图表（Chart）
+
+你可以在 Markdown 中使用 [echarts](https://dify.ai/docs/guides/tools/chart) 渲染图表。语法如下：
+
+<img
+src="/images/screenshot-20250714-134238.png"
+className="mr-auto"
+/>
+
+<Note>
+  要渲染图表，使用以 <code>\`\`\`echarts</code> 开头的代码块，并将配置写入其中。
+</Note>
+
+```echarts
+{
+  "title": {
+    "text": "ECharts 入门示例"
+  },
+  "tooltip": {},
+  "legend": {
+    "data": ["销量"]
+  },
+  "xAxis": {
+    "data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+  },
+  "yAxis": {},
+  "series": [{
+    "name": "销量",
+    "type": "bar",
+    "data": [5, 20, 36, 10, 10, 20]
+  }]
+}
+```
+
+---
+
+### 音乐（乐谱）
+
+除了图表，你还可以在 Markdown 中渲染乐谱。我们支持 [ABC notation](https://paulrosen.github.io/abcjs/) 乐谱标准，使用以下语法：
+
+<img
+src="/images/screenshot-20250714-134431.png"
+className="mr-auto"
+/>
+
+<Note>
+  要渲染乐谱，使用以 <code>\`\`\`abc</code> 开头的代码块，并将 ABC 记谱内容写入其中。
+</Note>
+
+```abc
+X: 1
+T: Cooley's
+M: 4/4
+L: 1/8
+K: Emin
+|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
+EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
+|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
+eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
+```
+
+---
+
+## 最佳实践
+
+如果你希望提前定义 Markdown 内容，可以使用 Dify 的 [模板功能](/en/guides/workflow/node/template)。这可以让你在后续节点中复用模板内容，提高效率与一致性。