Skip to Content
IoT 仪表盘富文本内容

富文本内容

Markdown 组件允许您向 Board 中添加格式化文本、图片和实时数值。使用它来创建帮助文档、显示状态消息、构建文档页面,或为数据添加上下文——全部使用简单的 Markdown 语法。

Rich content demo

您可以添加什么

  • 格式化文本 — 标题、粗体、斜体、列表
  • 链接和图片 — 连接外部资源或展示视觉内容
  • 表格 — 清晰地组织信息
  • 动态变量 — 在文本中内联显示实时数据,例如 传感器 23 °C 实时更新
  • 自定义 HTML — 当 Markdown 不足以满足需求时,混入原始 HTML 以实现自定义布局、颜色或样式

基本格式化

Markdown 使用简单的字符来格式化文本:

  • # Heading 表示大标题
  • **bold text** 表示粗体
  • *italic text* 表示斜体
  • - 或数字表示列表

链接: 方括号中的文本后跟圆括号中的 URL — [IronFlock](https://www.ironflock.com)

图片: 与链接相同但以 ! 开头 — ![alt text](https://example.com/image.png)

表格: 使用竖线 | 分隔列。

您不需要记住所有这些——Markdown 非常直观,使用过程中您会很快掌握。完整参考请查看 Markdown 官方指南

动态变量

这正是 Markdown 组件变得强大的地方:您可以将实时数据直接注入到文本中。

在 Markdown 内容中,用双花括号包裹变量名:{{variableName}}

然后在组件的变量配置中,添加一个条目:

  • 标签 — 变量名(必须与您在文本中写的完全一致)
  • — 连接到应用中的实时数据列

示例: 在 Markdown 字段中输入 Current temperature: {{temp}}°C,然后添加一个标签为 temp 的变量,连接到设备的温度列。组件会渲染为 Current temperature: 23°C,并随着新数据到达实时更新。

使用场景

  • 欢迎页面 — 为用户介绍 Board 的背景和操作说明
  • 状态摘要 — 在描述性文本中嵌入关键指标
  • 帮助文档 — 在 Board 上直接嵌入操作指南
  • 动态消息 — 将静态文案与根据当前状况自适应的实时数值相结合
Last updated on