Codelab 格式规范 - 构建你自己的 Codelab 学习系统

Google Nov 22, 2018

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 目录
content

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 https://github.com/google/search-samples/issues
Analytics Account Google Analytics ID

3. Headers

codelab 里的每一个步骤,应该使用 Heading 2、Heading 3、Heading 4 来组织结构,他们会被转成

另外,如果你想加一些额外的信息,可以在第一个 Heading 1 之前添加任意的 H2 H3 H4, H1 前的所有内容都不会显示。

4. 文本样式

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

5. 响应式图片

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

6. Info Boxes

infobox
warningbox

使用这两种样式要慎重,不是非常重要的信息不要使用。

用法也很简单,建一个 1x1 的表格,背景分别使用 light green 3light orange 3就可以了。

7. 命令行片段

command-line-snippets

用法也很简单,1x1 的表格,字体使用 Consolas 就可以了。

8. 代码片段

code-snippets

和命令行一样,1x1 的表格,不过字体使用 Courier New

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

9. FAQ

faq
如果你的 FAQ 部分有链接,这样写:
标题为 Heading 3Frequently Asked Questions, 下面跟上你的问题链接列表就行,像这样:

Frequently Asked Questions

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

10. 下载按钮

download-button

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

11. 每一步的时间

step-time

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

step-time-sample

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

12. 分场景步骤

不同场景可能需要不同的页面,设置方法和 duration 很像:

conditional-step

13. 导入片段

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

[[import funny dog]]

14. 记录上次学习位置

resumable

自动记录,不用设置

15. Feedback 链接

feedback-link

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

16. 调查

inline-survey

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

17. What you'll learn

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

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

what-you-ll-learn-format
效果:
what-will-you-learn

标题也可以是:
What we've covered 也是同样的效果。

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

/* 看板娘 */