简介
交互式教程就是普通的 React 页面。由于它们在 TutorialShell 中渲染,会自动与 Markdown 教程保持一致 —— 相同的主视觉、相同的排版、相同的暗色模式。
优先使用外壳提供的辅助类而非自定义 CSS,这样每篇教程看起来才像同一套。
步骤
编号步骤使用外壳的步骤列表,间距与配色保持一致:
- 复制本文件并重命名为你的教程别名。
- 用你的文案更新双语 `content` 对象。
- 添加对应的 <section id> 区块与目录项。
- 在 src/data/tutorials.js 中注册该教程。
用共享代码块展示命令:
cp interactive-template.jsx my-tutorial.jsx
# then edit content{} and register it in src/data/tutorials.js实时组件
这是 Markdown 做不到的部分 —— 真正的交互。选择开发板,烧录命令会立即更新。
后续
当你的教程准备就绪:
- 确认在英文与简体中文下都能正常渲染。
- 确认卡片在 /learn 的正确分类下出现。
- 发布前请先请人评审。