Skip to content

Commit

Permalink
feature: 完成菜单汉化
Browse files Browse the repository at this point in the history
  • Loading branch information
@phyuany
phyuany committed Nov 16, 2024
1 parent 2d2d7a7 commit c828617
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 78 deletions.
20 changes: 10 additions & 10 deletions app/views/default/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,8 @@ <h3>{{view.title}}</h3>
<div id="sortby">
<paper-tabs selected="0" noink on-iron-activate="sortBy">
<paper-tab>A-Z</paper-tab>
<paper-tab>Recent</paper-tab>
<paper-tab>Duration</paper-tab>
<paper-tab>最近</paper-tab>
<paper-tab>时常</paper-tab>
</paper-tabs>
</div>

Expand Down Expand Up @@ -216,7 +216,7 @@ <h3>{{view.title}}</h3>
{%- endif -%}
<div class="description">{{codelab.title}}</div>
<div class="card-duration">
<span>{%- if codelab.duration -%}{{codelab.duration}} min {%- endif -%}</span>
<span>{%- if codelab.duration -%}{{codelab.duration}} 分钟 {%- endif -%}</span>
<span>{%- if codelab.updated -%}Updated {{codePrettyDate(codelab.updated)}}{%- endif -%}</span>
</div>
<div class="card-footer">
Expand All @@ -238,25 +238,25 @@ <h3>{{view.title}}</h3>
<div class="link-list">
<label>Connect</label>
<ul>
<li><a href="https://www.example.com/">Example</a></li>
<li><a href="https://space.bilibili.com/172353353" target="_blank">Bilibili</a></li>
</ul>
</div>
<div class="link-list">
<label>Programs</label>
<ul>
<li><a href="https://www.example.com/">Example</a></li>
<li><a href="https://github.com/webtechwiki" target="_blank">Github</a></li>
</ul>
</div>
<div class="link-list">
<!-- <div class="link-list">
<label>Developer Consoles</label>
<ul>
<li><a href="https://www.example.com/">Example</a></li>
</ul>
</div>
</div> -->
<div class="link-list">
<label>Explore</label>
<ul>
<li><a href="https://www.example.com/">Example</a></li>
<li><a href="https://webcoding.tech" target="_blank">webcoding.tech</a></li>
</ul>
</div>
</div>
Expand All @@ -265,9 +265,9 @@ <h3>{{view.title}}</h3>
<div class="footerbar">
<div class="site-width layout horizontal center justified">
<span>
<a href="https://example.com">Terms</a>
<a href="https://codelabs.webtech.wiki">@Webtechwiki Codelabs</a>
&nbsp; | &nbsp;
<a href="https://example.com">Privacy</a>
2024
</span>
</div>
</div>
Expand Down
76 changes: 41 additions & 35 deletions codelabs/how-to-write-a-codelab.md
View file
Original file line number Diff line number Diff line change
@@ -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: <https://zarin.io>
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
{
Expand All @@ -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)
14 changes: 7 additions & 7 deletions codelabs/how-to-write-a-codelab/codelab.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
53 changes: 27 additions & 26 deletions codelabs/how-to-write-a-codelab/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="theme-color" content="#4F7DC9">
<meta charset="UTF-8">
<title>How to Write a Codelab</title>
<title>如何编写 Codelab</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Code+Pro:400|Roboto:400,300,400italic,500,700|Roboto+Mono">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://storage.googleapis.com/claat-public/codelab-elements.css">
Expand All @@ -24,62 +24,63 @@
<google-codelab codelab-gaid=""
codelab-ga4id=""
id="how-to-write-a-codelab"
title="How to Write a Codelab"
title="如何编写 Codelab"
environment="web"
feedback-link="">

<google-codelab-step label="Overview" duration="1">
<h2 class="checklist" is-upgraded>What You&#39;ll Learn</h2>
<ul class="checklist">
<li>how to set the amount of time each slide will take to finish</li>
<li>how to include code snippets</li>
<li>how to hyperlink items</li>
<li>how to include images</li>
<li>other stuff</li>
<google-codelab-step label="概述" duration="1">
<h2 is-upgraded>你将学到什么</h2>
<ul>
<li>如何设置每个幻灯片所需的时间</li>
<li>如何包含代码片段</li>
<li>如何超链接项目</li>
<li>如何插入图片</li>
<li>其他技巧</li>
</ul>


</google-codelab-step>

<google-codelab-step label="Setting Duration" duration="2">
<p>To indicate how long each slide will take to go through, set the <code>Duration</code> under each Heading 2 (i.e. <code>##</code>) to an integer. The integers refer to minutes. If you set <code>Duration: 4</code> then a particular slide will take 4 minutes to complete.</p>
<p>The total time will automatically be calculated for you and will be displayed on the codelab once you create it.</p>
<google-codelab-step label="设置时长" duration="2">
<p>要指示浏览每张幻灯片所需的时间，请在每个二级标题（即 <code>##</code>）下设置 <code>Duration</code> 为一个整数。<br> 这个整数代表分钟数。例如，设置 <code>Duration: 4</code> 表示完成这一张幻灯片需要 4 分钟。</p>
<p>总时间将会自动计算，并在你创建 Codelab 后显示出来。</p>


</google-codelab-step>

<google-codelab-step label="Code Snippets" duration="3">
<p>To include code snippets you can do a few things.</p>
<google-codelab-step label="代码片段" duration="3">
<p>要包含代码片段，你可以采用以下方法：</p>
<ul>
<li>Inline highlighting can be done using the tiny tick mark on your keyboard: &#34;`&#34;</li>
<li>Embedded code</li>
<li><strong>内联高亮</strong>：使用键盘上的反引号（<code>`</code>）来实现。</li>
<li><strong>嵌入代码</strong>：使用代码块显示完整代码。</li>
</ul>
<h2 is-upgraded>JavaScript</h2>
<h2 is-upgraded>JavaScript 示例</h2>
<pre><code language="language-javascript" class="language-javascript">{
key1: &#34;string&#34;,
key2: integer,
key3: &#34;string&#34;
}
</code></pre>
<h2 is-upgraded>Java</h2>
<h2 is-upgraded>Java 示例</h2>
<pre><code language="language-java" class="language-java">for (statement 1; statement 2; statement 3) {
// code block to be executed
// 要执行的代码块
}
</code></pre>


</google-codelab-step>

<google-codelab-step label="Hyperlinking and Embedded Images" duration="0">
<p><a href="https://www.youtube.com/user/iamhalsey/playlists" target="_blank">Youtube - Halsey Playlists</a></p>
<h2 is-upgraded>Images</h2>
<p class="image-container"><img alt="alt-text-here" src="img/6e6113b543a9f0e.jpg"></p>
<google-codelab-step label="超链接和嵌入图片" duration="1">
<h2 is-upgraded>超链接</h2>
<p><a href="https://www.youtube.com/user/iamhalsey/playlists" target="_blank">YouTube - Halsey 播放列表</a></p>
<h2 is-upgraded>图片</h2>
<p class="image-container"><img alt="图片替代文本" src="img/6e6113b543a9f0e.jpg"></p>


</google-codelab-step>

<google-codelab-step label="Other Stuff" duration="1">
<p>Checkout the official documentation here: <a href="https://github.com/googlecodelabs/tools/blob/master/FORMAT-GUIDE.md" target="_blank">Codelab Formatting Guide</a></p>
<google-codelab-step label="其他技巧" duration="1">
<p>查看官方文档：<a href="https://github.com/googlecodelabs/tools/blob/master/FORMAT-GUIDE.md" target="_blank">Codelab 格式指南</a></p>


</google-codelab-step>
Expand Down

0 comments on commit c828617

Please sign in to comment.