학습 센터로 돌아가기인터랙티브 튜토리얼
인터랙티브 튜토리얼 — 템플릿
TuyaOpen 인터랙티브 튜토리얼을 만들 때 복사해 사용할 수 있는 예제입니다. 공통 스타일의 히어로, 목차, 콜아웃, 코드 블록과 라이브 위젯을 보여 줍니다.
소개
인터랙티브 튜토리얼은 일반 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 的正确分类下出现。
- 发布前请先请人评审。