Skip to content

Commit

Permalink
convert to markdown for mdn zh-CN
Browse files Browse the repository at this point in the history
  • Loading branch information
@yin1999
yin1999 committed Jul 11, 2022
1 parent cceb0dc commit 3c79612
Show file tree
Hide file tree
Showing 18 changed files with 1,609 additions and 1,875 deletions.
27 changes: 12 additions & 15 deletions files/zh-cn/mdn/at_ten/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,24 @@ slug: MDN/At_ten
translation_of: MDN_at_ten
original_slug: MDN_at_ten
---
<div>为我们 web 技术的文档化走过 10 年而庆祝！</div>
为我们 web 技术的文档化走过 10 年而庆祝！

<h2 id="MDN历史">MDN 历史</h2>
## MDN 历史

<p>2005 年初，一个理想者组成的小团队建立起来并开始为所有的 Web 开发者提供实时、免费和社区驱动的在线资源.。他们杰出而不寻常的想法逐渐演化成了今天的 Mozilla 开发者网络——一个领先和全面的开放 Web 技术资源库。十年后，我们全球化的社区变得更加的强大，同时，为了能给广泛的网络技术公司提供技术上的支持，我们还坚持编写文档，案例代码 以及学习资源 ，其中就包括像 CSS, HTML, JavaScript 以及各种能够使得网络变得更加强大的东西。</p>
2005 年初，一个理想者组成的小团队建立起来并开始为所有的 Web 开发者提供实时、免费和社区驱动的在线资源.。他们杰出而不寻常的想法逐渐演化成了今天的 Mozilla 开发者网络——一个领先和全面的开放 Web 技术资源库。十年后，我们全球化的社区变得更加的强大，同时，为了能给广泛的网络技术公司提供技术上的支持，我们还坚持编写文档，案例代码 以及学习资源 ，其中就包括像 CSS, HTML, JavaScript 以及各种能够使得网络变得更加强大的东西。

<p><a href="/zh-CN/docs/MDN_at_ten/History_of_MDN">了解更多 about the history</a></p>
[了解更多 about the history](/zh-CN/docs/MDN_at_ten/History_of_MDN)

## 为 MDN 做出贡献

<h2 id="为MDN做出贡献">为 MDN 做出贡献</h2>
十年来，MDN 社区已经几乎给开放网络贡献了无限多的文档，从最小的字符修改到编写整个一系列新的 API，对开放网络，社区中的每个人都有贡献，每个人既不会付出太多也不会太少。我们已经有超过 90000 页的文档或内容被社区中突出的智谋人（Mozillians）编辑或者被翻译。你将会成为我们中的一员。

<p>十年来，MDN 社区已经几乎给开放网络贡献了无限多的文档，从最小的字符修改到编写整个一系列新的 API，对开放网络，社区中的每个人都有贡献，每个人既不会付出太多也不会太少。我们已经有超过 90000 页的文档或内容被社区中突出的智谋人（Mozillians）编辑或者被翻译。你将会成为我们中的一员。</p>
[了解更多 about contributing](/zh-CN/docs/MDN_at_ten/Contributing_to_MDN)

<p><a href="/zh-CN/docs/MDN_at_ten/Contributing_to_MDN">了解更多 about contributing</a></p>
{{TenthCampaignQuote}}

<div>{{TenthCampaignQuote}}</div>
## 参见

<h2 id="参见">参见</h2>

<ul>
<li><a href="/zh-CN/docs/MDN_at_ten/">MDN10 周年</a></li>
<li><a href="/zh-CN/docs/MDN_at_ten/History_of_MDN">MDN 历史</a></li>
<li><a href="/zh-CN/docs/MDN_at_ten/Contributing_to_MDN">为 MDN 贡献</a></li>
</ul>
- [MDN10 周年](/zh-CN/docs/MDN_at_ten/)
- [MDN 历史](/zh-CN/docs/MDN_at_ten/History_of_MDN)
- [为 MDN 贡献](/zh-CN/docs/MDN_at_ten/Contributing_to_MDN)
36 changes: 17 additions & 19 deletions files/zh-cn/mdn/contribute/howto/add_or_update_browser_compatibility_data/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,23 @@ slug: MDN/Contribute/Howto/Add_or_update_browser_compatibility_data
translation_of: MDN/Contribute/Howto/Add_or_update_browser_compatibility_data
original_slug: MDN/Contribute/Howto/如何添加或更新浏览器兼容性数据
---
<div>{{MDNSidebar}}</div><p>如果你有浏览器在兼容 Web 特性方面的信息 —— 或者有意愿并有能力做一些这方面的研究和/或实验 —— 你可以帮助更新 MDN 的<a href="https://github.com/mdn/browser-compat-data/">浏览器兼容性数据库</a>（<abbr title="Browser Compatibility Database">BCD</abbr>）。</p>
{{MDNSidebar}}

<ul>
<li>熟悉使用 Github</li>
<li>熟悉使用 JSON</li>
<li>了解有关、或有能力测试各种不同浏览器与网页标准及特性的兼容性</li>
</ul>
如果你有浏览器在兼容 Web 特性方面的信息 —— 或者有意愿并有能力做一些这方面的研究和/或实验 —— 你可以帮助更新 MDN 的[浏览器兼容性数据库](https://github.com/mdn/browser-compat-data/)（BCD）。

<dl>
<dt>哪些地方需要做？</dt>
<dd>
<p>在 MDN 上你有这几种方法可以帮助改进浏览器兼容性方面的信息：</p>
- 熟悉使用 Github
- 熟悉使用 JSON
- 了解有关、或有能力测试各种不同浏览器与网页标准及特性的兼容性

<ul>
<li>添加尚未收录在 BCD 仓库内的网页特性数据</li>
<li>依据浏览器新版本的变更内容、现有数据中的更正错误，或者某项技术的特性之最新变更等信息来更新现有数据</li>
<li>提交 pull requests 到 <a href="https://github.com/mdn/browser-compat-data/issues">BCD issues filed on Github</a>.</li>
</ul>
</dd>
<dt>做这个任务需要哪些步骤？</dt>
<dd>欲了解如何更新在 GitHub 上的组成 BCD 仓库的 <a href="/en-US/docs/Glossary/JSON">JSON</a> 文件的详细信息，请参见<a href="/en-US/docs/MDN/Contribute/Structures/Compatibility_tables">兼容性表格</a>页面。如要了解我们特别寻求帮助的问题列表，请到 <a href="https://github.com/mdn/browser-compat-data/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22">Github issues with the "Help Wanted" tag</a>.</dd>
</dl>
<!---->

- 哪些地方需要做？

- : 在 MDN 上你有这几种方法可以帮助改进浏览器兼容性方面的信息：

- 添加尚未收录在 BCD 仓库内的网页特性数据
- 依据浏览器新版本的变更内容、现有数据中的更正错误，或者某项技术的特性之最新变更等信息来更新现有数据
- 提交 pull requests 到 [BCD issues filed on Github](https://github.com/mdn/browser-compat-data/issues).

- 做这个任务需要哪些步骤？
- : 欲了解如何更新在 GitHub 上的组成 BCD 仓库的 [JSON](/en-US/docs/Glossary/JSON) 文件的详细信息，请参见[兼容性表格](/en-US/docs/MDN/Contribute/Structures/Compatibility_tables)页面。如要了解我们特别寻求帮助的问题列表，请到 [Github issues with the "Help Wanted" tag](https://github.com/mdn/browser-compat-data/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22).
49 changes: 22 additions & 27 deletions files/zh-cn/mdn/contribute/howto/convert_code_samples_to_be_live/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,25 @@ title: 如何将代码示例转换成“实时的”
slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live
translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live
---
<div>{{MDNSidebar}}</div>

<p>MDN 拥有一套 "<a href="/zh-CN/docs/MDN/Contribute/Editor/Live_samples">live sample</a>" 系统，在那里页面上展示的代码示例将被直接使用，以显示该示例的输出结果。然而，许多现有文章的代码示例还没有使用这套系统，它们需要被转换。</p>

<p>实样让你可以看到示例输出的样子，让文档生动有益。这篇指南涵盖如何获取现有示例并添加上“实时的”功能性。</p>

<dl>
<dt>哪里需要完成它？</dt>
<dd>标记有 <a href="/zh-CN/docs/tag/NeedsLiveSample">NeedsLiveSample</a> 的文章。</dd>
<dt>做这项任务你需要知道哪些？</dt>
<dd>
<ul>
<li>基于代码示例，对 HTML, CSS 和/或 JavaScript 的理解。</li>
<li>能够在 MDN 文章中使用 <a href="/zh-CN/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> 宏。</li>
</ul>
</dd>
<dt>做这项任务的步骤是什么？</dt>
<dd>
<ol>
<li>从标记 <a href="/zh-CN/docs/tag/NeedsLiveSample">NeedsLiveSample</a> 的文章列表中选取一篇文章，这篇文章里的代码示例是你熟悉的。</li>
<li>转换代码示例为“实例的”。</li>
<li>删除之前用于显示示例输出结果的任何代码或图像。</li>
</ol>
</dd>
</dl>

<p>关于创建和编辑实样的更多信息，见 <a href="/zh-CN/docs/MDN/Contribute/Editor/Live_samples">Using the live sample system</a></p>
{{MDNSidebar}}

MDN 拥有一套 "[live sample](/zh-CN/docs/MDN/Contribute/Editor/Live_samples)" 系统，在那里页面上展示的代码示例将被直接使用，以显示该示例的输出结果。然而，许多现有文章的代码示例还没有使用这套系统，它们需要被转换。

实样让你可以看到示例输出的样子，让文档生动有益。这篇指南涵盖如何获取现有示例并添加上“实时的”功能性。

## 哪里需要完成它？

标记有 [NeedsLiveSample](/zh-CN/docs/tag/NeedsLiveSample) 的文章。

## 做这项任务你需要知道哪些？

- 基于代码示例，对 HTML, CSS 和/或 JavaScript 的理解。
- 能够在 MDN 文章中使用 [KumaScript](/zh-CN/docs/MDN/Contribute/Tools/KumaScript) 宏。

## 做这项任务的步骤是什么？

1. 从标记 [NeedsLiveSample](/zh-CN/docs/tag/NeedsLiveSample) 的文章列表中选取一篇文章，这篇文章里的代码示例是你熟悉的。
2. 转换代码示例为“实例的”。
3. 删除之前用于显示示例输出结果的任何代码或图像。

关于创建和编辑实样的更多信息，见 [Using the live sample system](/zh-CN/docs/MDN/Contribute/Editor/Live_samples)
130 changes: 65 additions & 65 deletions ...ntribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,100 +10,99 @@ tags:
translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web
original_slug: MDN/Contribute/Howto/学习_交互_在线_起步_开始
---
<div>{{MDNSidebar}}</div><p>动态的内容对于学习 Web 来说是重要的。她能让学习的人更加积极主动。这可以是练习，实例，任务，评价等等。总之，任何有助于学习理解的东西都行。</p>
{{MDNSidebar}}

<p>这儿还没有能够直接创建动态的实例内容。但是一些第三方工具可以帮助你创建（如： <a href="https://jsfiddle.net/">JSFiddle</a>，<a href="https://codepen.io/">CodePen</a>，<a href="http://dabblet.com/">Dabblet</a>，等），你可以将其链接放在 MDN 文章中。</p>
动态的内容对于学习 Web 来说是重要的。她能让学习的人更加积极主动。这可以是练习，实例，任务，评价等等。总之，任何有助于学习理解的东西都行。

<p>目前，MDN 虽然没有能够轻易创建动态实例内容的工具。不过，如果你是工程师，可以使用当前 MDN 提供的功能创建自定义的主动学习内容，下面内容将告诉你如何操作。</p>
这儿还没有能够直接创建动态的实例内容。但是一些第三方工具可以帮助你创建（如： [JSFiddle](https://jsfiddle.net/)，[CodePen](https://codepen.io/)，[Dabblet](http://dabblet.com/)，等），你可以将其链接放在 MDN 文章中。

<h2 id="MDN_live_samples">MDN live samples</h2>
目前，MDN 虽然没有能够轻易创建动态实例内容的工具。不过，如果你是工程师，可以使用当前 MDN 提供的功能创建自定义的主动学习内容，下面内容将告诉你如何操作。

<p>MDN 有一个非常炫酷的功能：live samples。她是一种可以将 MDN 页面内任何 HTML, CSS, Javascript 代码等效执行的机制。在使用她以前，你最好通读一下 <a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Using the live sample system</a>，这是我们关于她的完整文档。虽然她很容易使用，不过通过阅读文档，你会学到一些奇淫巧技。</p>
## MDN live samples

<p>有意思的是，将任何类型的工具或实例嵌入到 MDN 页面中都可以通过调教她轻松做到。</p>
MDN 有一个非常炫酷的功能：live samples。她是一种可以将 MDN 页面内任何 HTML, CSS, Javascript 代码等效执行的机制。在使用她以前，你最好通读一下 [Using the live sample system](/en-US/docs/MDN/Contribute/Editor/Live_samples)，这是我们关于她的完整文档。虽然她很容易使用，不过通过阅读文档，你会学到一些奇淫巧技。

<h3 id="隐藏代码">隐藏代码</h3>
有意思的是，将任何类型的工具或实例嵌入到 MDN 页面中都可以通过调教她轻松做到。

<p>通过实例创建主动学习内容的第一种方法是编辑要添加内容的页面。使用 Live Sample 功能创建内容，只构建你需要的功能，不要在乎代码的复杂度。当内容准备好之后，只需切换到编辑器视图，并用 class 为 <code>hidden </code>的 {{HTMLElement('div')}} 来包围你的代码。这样代码就会隐藏，不过实例依然可以访问和显示。</p>
### 隐藏代码

<p>看看这个简单的代码：</p>
通过实例创建主动学习内容的第一种方法是编辑要添加内容的页面。使用 Live Sample 功能创建内容，只构建你需要的功能，不要在乎代码的复杂度。当内容准备好之后，只需切换到编辑器视图，并用 class 为 `hidden `的 {{HTMLElement('div')}} 来包围你的代码。这样代码就会隐藏，不过实例依然可以访问和显示。

<p>点击这个方块提供随机色，或者直接输入色值</p>
看看这个简单的代码：

<div class="hidden_code_example">
点击这个方块提供随机色，或者直接输入色值

<pre class="brush: html hidden">&lt;div class="square"&gt;
#&lt;input class="color"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css hidden">body {
<div class="hidden_code_example"><pre class="brush: html hidden">&#x3C;div class="square">
#&#x3C;input class="color">
&#x3C;/div></pre><pre class="brush: css hidden">body {
padding: 10px;
margin : 0;
}

.square {
width : 80px;
height : 80px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
width : 80px;
height : 80px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
}

.color {
width: 60px;
text-transform: uppercase;
width: 60px;
text-transform: uppercase;
}
</pre>

<pre class="brush: js hidden">function setColor(color) {
</pre><pre class="brush: js hidden">function setColor(color) {
document.querySelector('.square').style.backgroundColor = '#' + color;
document.querySelector('.color').value = color;
}

function getRandomColor() {
var color = Math.floor(Math.random() * 16777215);
return color.toString(16);
var color = Math.floor(Math.random() \* 16777215);
return color.toString(16);
}

function getInputColor() {
var value = document.querySelector('.color').value;
var color = Number('0x' + color);
if (color === +color) {
return color.toString(16);
}
return value;
var value = document.querySelector('.color').value;
var color = Number('0x' + color);
if (color === +color) {
return color.toString(16);
}
return value;
}

document.addEventListener('click', function () {
setColor(getRandomColor());
setColor(getRandomColor());
});

document.addEventListener('keyup', function () {
setColor(getInputColor());
setColor(getInputColor());
});
</pre>
</div>
{{EmbedLiveSample('hidden_code_example', 120, 120)}}</div>

<p>如果你使用 MDN 编辑器查看该页面代码，你会看到如下 HTML 代码：</p>
</pre></div>

<pre class="brush: html">&lt;div class="moreinfo"&gt;
&lt;p&gt;Click on the following square to randomly change its color or just type an hexadecimal code color&lt;/p&gt;
{{EmbedLiveSample('hidden_code_example', 120, 120)}}

&lt;div class="hidden"&gt;
&lt;h4 id="hidden_code_example"&gt;hidden code example&lt;/h4&gt;
如果你使用 MDN 编辑器查看该页面代码，你会看到如下 HTML 代码：

&lt;h5 id="HTML"&gt;HTML&lt;/h5&gt;
```html
<div class="moreinfo">
<p>Click on the following square to randomly change its color or just type an hexadecimal code color</p>

&lt;pre class="brush: html"&gt;
&amp;lt;div class="square"&amp;gt;
#&amp;lt;input class="color"&amp;gt;
&amp;lt;/div&amp;gt;&lt;/pre&gt;
<div class="hidden">
<h4 id="hidden_code_example">hidden code example</h4>

&lt;h5 id="CSS"&gt;CSS&lt;/h5&gt;
<h5 id="HTML">HTML</h5>

&lt;pre class="brush: css"&gt;
<pre class="brush: html">
&lt;div class="square"&gt;
#&lt;input class="color"&gt;
&lt;/div&gt;</pre>

<h5 id="CSS">CSS</h5>

<pre class="brush: css">
body {
padding: 10px;
margin : 0;
Expand All @@ -122,11 +121,11 @@ body {
width: 60px;
text-transform: uppercase;
}
&lt;/pre&gt;
</pre>

&lt;h5 id="JS"&gt;JS&lt;/h5&gt;
<h5 id="JS">JS</h5>

&lt;pre class="brush: js"&gt;
<pre class="brush: js">
function setColor(color) {
document.querySelector('.square').style.backgroundColor = '#' + color;
document.querySelector('.color').value = color;
Expand All @@ -153,26 +152,27 @@ document.addEventListener('click', function () {
document.addEventListener('keyup', function () {
setColor(getInputColor());
});
&lt;/pre&gt;
&lt;/div&gt;
</pre>
</div>

\{{EmbedLiveSample('hidden_code_example', 120, 120)}}
&lt;/div&gt;</pre>
</div>
```

<p>你可以在 <a href="/en-US/docs/Web/API/Canvas_API#JavaScript">the Canvas API page</a> 查看更多高级例子。</p>
你可以在 [the Canvas API page](/en-US/docs/Web/API/Canvas_API#JavaScript) 查看更多高级例子。

<h3 id="外部代码">外部代码</h3>
### 外部代码

<p>前面的例子在你想嵌入主动学习内容时是可行的。不过，如果你想要处理更加复杂的代码，这个 <code>hidden</code> 的 {{HTMLElement('div')}} 就比较麻烦。</p>
前面的例子在你想嵌入主动学习内容时是可行的。不过，如果你想要处理更加复杂的代码，这个 `hidden` 的 {{HTMLElement('div')}} 就比较麻烦。

<p>另外种方案是将内容写入 MDN 页面，然后嵌入另一个页面中。为此，我们可以使用 <a href="https://github.com/mdn/yari/blob/main/kumascript/macros/EmbedDistLiveSample.ejs"><code>EmbedDistLiveSample</code></a> 替代 <a href="https://github.com/mdn/yari/blob/main/kumascript/macros/EmbedLiveSample.ejs"><code>EmbedLiveSample</code></a>。</p>
另外种方案是将内容写入 MDN 页面，然后嵌入另一个页面中。为此，我们可以使用 [`EmbedDistLiveSample`](https://github.com/mdn/yari/blob/main/kumascript/macros/EmbedDistLiveSample.ejs) 替代 [`EmbedLiveSample`](https://github.com/mdn/yari/blob/main/kumascript/macros/EmbedLiveSample.ejs)。

<p>我们学习配置这个模拟远程代码嵌入的实例：</p>
我们学习配置这个模拟远程代码嵌入的实例：

<p>点击这个方块提供随机色，或者直接输入色值</p>
点击这个方块提供随机色，或者直接输入色值

{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}

<p>这下如果你继续使用 <a href="/en-US/docs/MDN/Contribute/Editor/Source_mode">MDN 编辑器</a>查看页面源码，将看不到隐藏元素。如果你需要看，则需要前往这个页面<a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example">地址</a>。</p>
这下如果你继续使用 [MDN 编辑器](/en-US/docs/MDN/Contribute/Editor/Source_mode)查看页面源码，将看不到隐藏元素。如果你需要看，则需要前往这个页面[地址](/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example)。

<p>你可以在 <a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets">HTML 表单教程</a>中查看更多高级例子，那里可以使用表单尝试。</p>
你可以在 [HTML 表单教程](/en-US/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets)中查看更多高级例子，那里可以使用表单尝试。
Loading

0 comments on commit 3c79612

Please sign in to comment.