环境配置

环境配置

【免费下载链接】tools Codelabs management & hosting tools 项目地址: https://gitcode.com/gh_mirrors/tool/tools

Duration: 0:05:00

核心概念学习

Duration: 0:15:00

实战练习

Duration: 0:25:00

总结回顾

Duration: 0:05:00

时间格式支持多种形式：
- `mm:ss` - 5分30秒 → `5:30`
- `hh:mm:ss` - 1小时25分30秒 → `1:25:30`
- `0` - 无时间消耗的步骤

## 高级内容元素

### 代码块语法高亮

```markdown
### 示例代码文件
```javascript
// JavaScript 代码示例
function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet('World'));

# Python 代码示例
def factorial(n):
    if n == 0:
        return 1
    return n * factorial(n-1)

# 命令行指令
$ npm install -g claat
$ claat export tutorial.md

### 信息框使用指南

信息框用于突出重要提示和警告信息：

```markdown
Positive
: 这是成功提示框，用于最佳实践、技巧分享等积极内容。

Negative  
: 这是警告提示框，用于注意事项、常见错误等需要警惕的内容。

<aside class="positive">
也可以使用 HTML 格式的信息框
</aside>

<aside class="negative">
HTML 格式的警告框
</aside>

下载按钮和资源链接

<button>
[Download Sample Code](https://example.com/sample.zip)
</button>

<button>
[Get Started with SDK](https://example.com/sdk)
</button>

媒体资源嵌入

图片嵌入规范

![架构图描述](images/architecture.png)
![使用流程图](images/workflow.svg)

图片规范要求：

• 使用描述性 alt 文本
• 推荐 PNG、SVG 格式
• 保持合理的文件大小
• 确保响应式显示

视频嵌入方法

<video id="DWAinkJ54AP8"></video>

或者使用传统方法：

1. 插入任意图片作为占位符
2. 右键设置替代文本
3. 在描述中输入 YouTube 视频链接

环境配置和工具使用

安装 claat 工具

# 使用 Go 安装
go install github.com/googlecodelabs/tools/claat@latest

# 验证安装
claat version

基本工作流程

常用命令参考

命令	描述	示例
claat export	导出教程	claat export tutorial.md
claat serve	本地预览	claat serve
claat update	更新教程	claat update tutorial-id
claat help	查看帮助	claat help export

部署发布指南

静态资源部署

Google Codelabs 生成的是纯静态 HTML 文件，支持多种部署方式：

平台	优点	适用场景
GitHub Pages	免费、简单	个人项目、开源教程
Netlify	自动化部署	团队协作、CI/CD
Firebase Hosting	Google 生态	企业级应用
自有服务器	完全控制	定制化需求

自定义 landing page

## 创建索引页面
如果需要创建类似 [Google Codelabs](https://codelabs.developers.google.com) 的索引页面，可以使用项目中的 site 工具：

1. 配置 codelab 元数据
2. 生成静态索引页面
3. 自定义样式和布局
4. 部署到目标平台

最佳实践和常见问题

内容创作最佳实践

1. 结构清晰：每个步骤聚焦一个主题，时长控制在5-15分钟
2. 代码完整：提供可运行的代码示例，避免片段代码
3. 图文并茂：合理使用图表和截图辅助说明
4. 测试验证：确保所有代码和指令都经过测试
5. 反馈机制：设置反馈链接收集用户意见

常见问题解决

问题	解决方案
图片不显示	检查路径是否正确，使用相对路径
代码高亮失效	确认语言标识符正确，使用 console 禁用高亮
本地预览样式异常	使用 claat serve 而不是直接打开 HTML
部署后功能异常	检查 CDN 资源加载，确保网络可访问

性能优化建议

## 优化图片资源
- 使用 WebP 格式减少体积
- 适当压缩图片质量
- 使用响应式图片尺寸

## 减少依赖
- 最小化外部资源引用
- 使用本地化资源 when possible
- 优化代码块数量和大小

【免费下载链接】tools Codelabs management & hosting tools 项目地址: https://gitcode.com/gh_mirrors/tool/tools