From c8286173c7ee9b3dc9c66a6c8ca12b424b6e49be Mon Sep 17 00:00:00 2001 From: panhy Date: Sat, 16 Nov 2024 20:26:09 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E5=AE=8C=E6=88=90=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E6=B1=89=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/views/default/index.html | 20 +++--- codelabs/how-to-write-a-codelab.md | 76 +++++++++++--------- codelabs/how-to-write-a-codelab/codelab.json | 14 ++-- codelabs/how-to-write-a-codelab/index.html | 53 +++++++------- 4 files changed, 85 insertions(+), 78 deletions(-) diff --git a/app/views/default/index.html b/app/views/default/index.html index 6f6db09..80104ee 100644 --- a/app/views/default/index.html +++ b/app/views/default/index.html @@ -144,8 +144,8 @@

{{view.title}}

A-Z - Recent - Duration + 最近 + 时常
@@ -216,7 +216,7 @@

{{view.title}}

{%- endif -%}
{{codelab.title}}
- {%- if codelab.duration -%}{{codelab.duration}} min {%- endif -%} + {%- if codelab.duration -%}{{codelab.duration}} 分钟 {%- endif -%} {%- if codelab.updated -%}Updated {{codePrettyDate(codelab.updated)}}{%- endif -%}
@@ -238,25 +238,25 @@

{{view.title}}

-
+
@@ -265,9 +265,9 @@

{{view.title}}

- Terms + @Webtechwiki Codelabs   |   - Privacy + 2024
diff --git a/codelabs/how-to-write-a-codelab.md b/codelabs/how-to-write-a-codelab.md index 036e7fe..ee769fd 100644 --- a/codelabs/how-to-write-a-codelab.md +++ b/codelabs/how-to-write-a-codelab.md @@ -1,46 +1,47 @@ -summary: How to Write a Codelab +summary: 如何编写 Codelab id: how-to-write-a-codelab -categories: Sample -tags: medium +categories: vslive +tags: vslive status: Published -authors: Zarin -Feedback Link: +authors: panhy -# How to Write a Codelab +# 如何编写 Codelab -## Overview +## 概述 Duration: 1 -### What You’ll Learn +### 你将学到什么 -- how to set the amount of time each slide will take to finish -- how to include code snippets -- how to hyperlink items -- how to include images -- other stuff +- 如何设置每个幻灯片所需的时间 +- 如何包含代码片段 +- 如何超链接项目 +- 如何插入图片 +- 其他技巧 - -## Setting Duration +--- + +## 设置时长 Duration: 2 -To indicate how long each slide will take to go through, set the `Duration` under each Heading 2 (i.e. `##`) to an integer. -The integers refer to minutes. If you set `Duration: 4` then a particular slide will take 4 minutes to complete. +要指示浏览每张幻灯片所需的时间，请在每个二级标题（即 `##`）下设置 `Duration` 为一个整数。 +这个整数代表分钟数。例如，设置 `Duration: 4` 表示完成这一张幻灯片需要 4 分钟。 + +总时间将会自动计算，并在你创建 Codelab 后显示出来。 -The total time will automatically be calculated for you and will be displayed on the codelab once you create it. +--- - -## Code Snippets +## 代码片段 Duration: 3 -To include code snippets you can do a few things. +要包含代码片段，你可以采用以下方法： -- Inline highlighting can be done using the tiny tick mark on your keyboard: "`" -- Embedded code +- **内联高亮**：使用键盘上的反引号（`` ` ``）来实现。 +- **嵌入代码**：使用代码块显示完整代码。 -### JavaScript +### JavaScript 示例 ```javascript { @@ -50,27 +51,32 @@ To include code snippets you can do a few things. } ``` -### Java +### Java 示例 ```java for (statement 1; statement 2; statement 3) { - // code block to be executed + // 要执行的代码块 } ``` - -## Hyperlinking and Embedded Images +--- + +## 超链接和嵌入图片 + +Duration: 1 + +### 超链接 + +[YouTube - Halsey 播放列表](https://www.youtube.com/user/iamhalsey/playlists) -Duration: 1### Hyperlinking -[Youtube - Halsey Playlists](https://www.youtube.com/user/iamhalsey/playlists) +### 图片 -### Images +![图片替代文本](assets/puppy.jpg) -![alt-text-here](assets/puppy.jpg) +--- - -## Other Stuff +## 其他技巧 Duration: 1 -Checkout the official documentation here: [Codelab Formatting Guide](https://github.com/googlecodelabs/tools/blob/master/FORMAT-GUIDE.md) +查看官方文档：[Codelab 格式指南](https://github.com/googlecodelabs/tools/blob/master/FORMAT-GUIDE.md) diff --git a/codelabs/how-to-write-a-codelab/codelab.json b/codelabs/how-to-write-a-codelab/codelab.json index ec50a2e..92f6327 100644 --- a/codelabs/how-to-write-a-codelab/codelab.json +++ b/codelabs/how-to-write-a-codelab/codelab.json @@ -3,22 +3,22 @@ "format": "html", "prefix": "https://storage.googleapis.com", "mainga": "UA-49880327-14", - "updated": "2024-11-07T00:18:04+08:00", + "updated": "2024-11-16T20:20:41+08:00", "id": "how-to-write-a-codelab", - "duration": 7, - "title": "How to Write a Codelab", - "authors": "Zarin", - "summary": "How to Write a Codelab", + "duration": 8, + "title": "如何编写 Codelab", + "authors": "panhy", + "summary": "如何编写 Codelab", "source": "how-to-write-a-codelab.md", "theme": "", "status": [ "published" ], "category": [ - "sample" + "vslive" ], "tags": [ - "medium" + "vslive" ], "url": "how-to-write-a-codelab" } diff --git a/codelabs/how-to-write-a-codelab/index.html b/codelabs/how-to-write-a-codelab/index.html index 75814c8..485f769 100644 --- a/codelabs/how-to-write-a-codelab/index.html +++ b/codelabs/how-to-write-a-codelab/index.html @@ -6,7 +6,7 @@ - How to Write a Codelab + 如何编写 Codelab @@ -24,62 +24,63 @@ - -

What You'll Learn

-
    -
  • how to set the amount of time each slide will take to finish
    • -
  • how to include code snippets
    • -
  • how to hyperlink items
    • -
  • how to include images
    • -
  • other stuff
    • + +

    你将学到什么

    +
      +
    • 如何设置每个幻灯片所需的时间
      • +
    • 如何包含代码片段
      • +
    • 如何超链接项目
      • +
    • 如何插入图片
      • +
    • 其他技巧
     - -

    To indicate how long each slide will take to go through, set the Duration under each Heading 2 (i.e. ##) to an integer. The integers refer to minutes. If you set Duration: 4 then a particular slide will take 4 minutes to complete.

    -

    The total time will automatically be calculated for you and will be displayed on the codelab once you create it.

    + +

    要指示浏览每张幻灯片所需的时间，请在每个二级标题（即 ##）下设置 Duration 为一个整数。
    这个整数代表分钟数。例如，设置 Duration: 4 表示完成这一张幻灯片需要 4 分钟。

    +

    总时间将会自动计算，并在你创建 Codelab 后显示出来。

     - -

    To include code snippets you can do a few things.

    + +

    要包含代码片段，你可以采用以下方法：

      -
    • Inline highlighting can be done using the tiny tick mark on your keyboard: "`"
      • -
    • Embedded code
      • +
    • 内联高亮：使用键盘上的反引号（`）来实现。
      • +
    • 嵌入代码：使用代码块显示完整代码。
    -

    JavaScript

    +

    JavaScript 示例

    { 
   key1: "string", 
   key2: integer,
   key3: "string"
 }
    -

    Java

    +

    Java 示例

    for (statement 1; statement 2; statement 3) {
-  // code block to be executed
+  // 要执行的代码块
 }
    - -

    Youtube - Halsey Playlists

    -

    Images

    -

    alt-text-here

    + +

    超链接

    +

    YouTube - Halsey 播放列表

    +

    图片

    +

    图片替代文本

     - -

    Checkout the official documentation here: Codelab Formatting Guide

    + +

    查看官方文档：Codelab 格式指南