Codelab 格式规范 - 构建你本身的 Codelab 学习系统

博客原文：Codelab 格式规范 - 构建你本身的 Codelab 学习系统

相信不少人都看过 Google 的 Codelab 课程，形式很是不错。

那么咱们本身怎么写一个 Codelab 页面呢? 很简单，只要按照这篇格式规范写一篇文档，再使用 claat 工具 就能自动生成学习页面了。

原文文档：Codelab Formatting Guide 你须要先加入 Google 社区 来获取阅读权限。

开始

把 这篇文档 拷贝到你的google文档，按你的需求修改它的 metadata，而后经过下面的方式就能够以 codelab 的方式预览它了。 两种方式：

1. 安装 Preview Codelab Chrome extension 插件，打开文档，而后点击插件栏里的图标
2. 手动访问 https://codelabs-preview.appspot.com/?file_id=<google-doc-id>

格式参考

1. 目录

全部 Heading 1 自动被转成 codelab 目录

2. Codelab Metadata

定义一些文档属性,相似于普通文件右键菜单里的内容，会在合适的地方显示。都比较好理解。

Summary	In this codelab, you'll learn how to get your Android app indexed by Google Search.
URL	app-indexing
Category	Search
Status	Draft
Feedback Link	github.com/google/sear…
Analytics Account	Google Analytics ID

3. Headers

codelab 里的每个步骤，应该使用 Heading 二、Heading 三、Heading 4 来组织结构，他们会被转成 <h2> <h3> <h4>

另外，若是你想加一些额外的信息，能够在第一个 Heading 1 以前添加任意的 H2 H3 H4, H1 前的全部内容都不会显示。

4. 文本样式

别改字体了，没卵用。都会被自动转成 Roboto 字体。可是粗体斜体什么的没问题。

5. 响应式图片

在你的文档里，你能够任意更改图片尺寸。你设尺寸会被当成图片的max-width。 在小尺寸的浏览器上已不用担忧显示问题，会自动缩放。

6. Info Boxes

使用这两种样式要慎重，不是很是重要的信息不要使用。

用法也很简单，建一个 1x1 的表格，背景分别使用 light green 3 和 light orange 3就能够了。

7. 命令行片断

用法也很简单，1x1 的表格，字体使用 Consolas 就能够了。

8. 代码片断

和命令行同样，1x1 的表格，不过字体使用 Courier New。

标题建议使用 Heading 3，若是有 Github 连接也把链接加上，codelab 会自动在标题前面加上 Github 图标。

9. FAQ

若是你的 FAQ 部分有连接，这样写： 标题为 Heading 3 的 Frequently Asked Questions, 下面跟上你的问题连接列表就行，像这样：

Frequently Asked Questions

• How do I install Android Studio?
• How do I enable USE debugging?
• Why doesn't Android Studio see my device?

codelab 会自动加上这几个网站的图标。

10. 下载按钮

把下载连接的背景色设置为 dark green 1, 而且文字内容以 Download开头，就会自动转为下载按钮样式。

11. 每一步的时间

在标题下用 dark grey 1 写：Duration: xx:xx 便可

不写默认是 1:00，最后一页是 0

12. 分场景步骤

不一样场景可能须要不一样的页面，设置方法和 duration 很像：

13. 导入片断

可使用 import 语法导入其它 codelab 里的步骤

[[import funny dog]]

14. 记录上次学习位置

自动记录，不用设置

15. Feedback 连接

在 metadata 设置 Feedback Link 字段会自动生成。

16. 调查

1x1 的表格，设置 light blue 3 背景，标题使用 Heading 4，列表使用 unordered 列表。

17. What you'll learn

这在一个 codelab 项目中非诚重要，必定要写。

使用Heading 2标题的"What you'll learn",加上一个列表：

效果：

标题也能够是： What we've covered 也是一样的效果。

不过不幸的是，看来是不支持标题自动识别了。