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 也是一樣的效果。

不過不幸的是，看來是不支持標題自動識別了。