跳到主要内容
返回学习中心交互式教程

交互式教程 — 模板

一个可复制的参考页,用于构建 TuyaOpen 交互式教程。展示了主视觉、粘性目录、提示框、代码块和一个实时小组件 —— 全部采用共享样式。

入门模板

简介

交互式教程就是普通的 React 页面。由于它们在 TutorialShell 中渲染,会自动与 Markdown 教程保持一致 —— 相同的主视觉、相同的排版、相同的暗色模式。

优先使用外壳提供的辅助类而非自定义 CSS,这样每篇教程看起来才像同一套。

步骤

编号步骤使用外壳的步骤列表,间距与配色保持一致:

  1. 复制本文件并重命名为你的教程别名。
  2. 用你的文案更新双语 `content` 对象。
  3. 添加对应的 <section id> 区块与目录项。
  4. 在 src/data/tutorials.js 中注册该教程。

用共享代码块展示命令:

cp interactive-template.jsx my-tutorial.jsx
# then edit content{} and register it in src/data/tutorials.js

实时组件

这是 Markdown 做不到的部分 —— 真正的交互。选择开发板,烧录命令会立即更新。

烧录命令tyutool write -d t5ai -f app_QIO.bin

后续

当你的教程准备就绪:

  • 确认在英文与简体中文下都能正常渲染。
  • 确认卡片在 /learn 的正确分类下出现。
  • 发布前请先请人评审。

浏览文档