Skip to content

Commit 5edee7f

Browse files
Copilothustcc
andauthored
Sync Chinese quick-start documentation with English version (#159)
* Initial plan * Update Chinese quick-start to match English version content Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> * Fix Chinese punctuation: use full-width dashes Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
1 parent 53a014f commit 5edee7f

1 file changed

Lines changed: 40 additions & 37 deletions

File tree

site/zh/tutorial/quick-start.md

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,22 @@ title: 快速开始
1212

1313
<div class="info-box">
1414

15-
**_`text-schema` 构建成本高不如直接拼接 DOM 快,我为什么还要用 T8?_**
15+
**_"为什么我应该使用 T8 而不是直接拼接 DOM?"_**
1616

17-
要解答这个问题需要先明确 `JSON` 从哪儿来?
17+
答案在于 T8 的**声明式语法** —— 这是其与众不同的核心特性。
1818

19-
narrative 相关技术基于 `JSON` 数据来自 LLM 大模型生成的假设,前端消费 schema 进行渲染即可。随着数据表达的多样性和即时性的要求越来越高,以及 NLP 技术越来越多的被应用,前端维护文本模版将不可持续。此时使用 NarrativeTextVis 进行统一渲染将是最佳选择
19+
T8 语法是一种轻量级的、基于 Markdown 的 DSL(领域特定语言),专为叙述性文本可视化设计。无需手动构建 DOM 元素或维护复杂的模板,你只需编写简单、易读的语法来描述你的数据叙述。这种语法可以轻松地由 LLM(大语言模型)生成,使其非常适合 AI 驱动的分析和自动化报告
2020

21-
但是不可否认仍然将有很长一段时间,类似的文本表达可以通过默认的一套或者几套模版满足需求,结合 `text-schema` 对于的学习成本,使用前端熟悉的 `dom/jsx` 进行开发似乎是更好的选择。<u>_如果你的业务对文本表述扩展性要求不高,且模版相对固定,请使用你熟悉的语法。_</u> 但是如果使用 text-schema 将带来以下好处:
21+
随着数据表达需求变得越来越多样化和即时,在前端维护文本模板变得不可持续。T8 的语法优先方法为动态、AI 生成的内容提供了更好的解决方案。
2222

23-
- 作为一种解读文本的标准描述,可静态化文本数据结构,一处维护各处复用;
24-
- `JSON` 格式决定了其有利于数据储存和进一步消费;
25-
- 样式规范,默认好看;
26-
- 行内小图(word-scale chart)是默认的支持的,并且随着版本升级可获得更多行内数据展示;
27-
- 相关交互的可扩展性;
23+
<u>_如果你的业务有简单、固定的模板,扩展性需求有限,传统的 DOM 操作可能就足够了。_</u> 然而,T8 的语法带来了显著的优势:
24+
25+
- **对 LLM 友好**:语法直观,可以通过简单的提示轻松由 AI 模型生成;
26+
- **声明式和可读性强**:编写你想要的内容,而不是如何构建它 —— 语法本身就是文档;
27+
- **标准化样式**:默认提供专业、一致的外观,无需手动样式设置;
28+
- **内置数据可视化**:词级图表(迷你饼图、迷你折线图)是语法原生支持的;
29+
- **框架无关**:与 React、Vue 或纯 JavaScript 无缝协作;
30+
- **可扩展**:轻松添加自定义实体短语以匹配你的设计系统;
2831

2932
</div>
3033

@@ -36,11 +39,11 @@ narrative 相关技术基于 `JSON` 数据来自 LLM 大模型生成的假设,
3639

3740
## 特性
3841

39-
- 数据解读文本的 T8 语法描述[T8 语法参考](../syntax/index.md));
40-
- text-schema 的纯 JS 渲染引擎 `Text`
41-
- 解析文本结构描述 json schema 为 html
42-
- 数据短语(如指标值、比率、差值、占比、贡献度等)标准视觉表示
43-
- 行内小图(mini pie、mini line)数据驱动展示,提高文本看数效率
42+
- **T8 语法**:一种用于数据叙述性文本的声明式、基于 Markdown 的 DSL[T8 语法参考](../syntax/index.md));
43+
- **JS 渲染引擎** `Text`:将 T8 语法转换为美观、交互式的 HTML
44+
- 将 T8 语法结构解析为语义化的 HTML 元素
45+
- 数据短语(如指标值、比率、差值、占比、贡献度等)的标准视觉表示
46+
- 数据驱动的行内小图(迷你饼图、迷你折线图)提高文本阅读效率
4447

4548
## 基本使用
4649

@@ -117,36 +120,36 @@ T8 可以通过 unpkg CDN 直接在 HTML 页面中使用。这是最简单的入
117120
```html
118121
<!DOCTYPE html>
119122
<html lang="zh-CN">
120-
<head>
121-
<meta charset="UTF-8">
122-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
123-
<title>T8 示例</title>
124-
</head>
125-
<body>
126-
<div id="container"></div>
127-
128-
<!-- 从 unpkg CDN 引入 T8 -->
129-
<script src="https://unpkg.com/@antv/t8@0.3.0/dist/t8.min.js"></script>
130-
131-
<script>
132-
// T8 作为全局变量可用
133-
const { Text } = window.T8;
134-
135-
// 初始化 T8 实例
136-
const text = new Text(document.getElementById('container'));
137-
138-
// 渲染叙述性文本
139-
const narrativeText = `
123+
<head>
124+
<meta charset="UTF-8" />
125+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
126+
<title>T8 示例</title>
127+
</head>
128+
<body>
129+
<div id="container"></div>
130+
131+
<!-- 从 unpkg CDN 引入 T8 -->
132+
<script src="https://unpkg.com/@antv/t8@0.3.0/dist/t8.min.js"></script>
133+
134+
<script>
135+
// T8 作为全局变量可用
136+
const { Text } = window.T8;
137+
138+
// 初始化 T8 实例
139+
const text = new Text(document.getElementById('container'));
140+
141+
// 渲染叙述性文本
142+
const narrativeText = `
140143
# 销售报告
141144
142145
本季度 [销售额](metric_name) 高于往常。销售额为 [¥348k](metric_value, origin=348.12)。
143146
144147
[销售额](metric_name) 相比上季度同期上涨了 [¥180.3k](delta_value, assessment="positive")。
145148
`;
146149
147-
text.theme('light').render(narrativeText);
148-
</script>
149-
</body>
150+
text.theme('light').render(narrativeText);
151+
</script>
152+
</body>
150153
</html>
151154
```
152155

0 commit comments

Comments
 (0)