前置操作
- 知识储备
- 你必须知道的几件事
如何贡献内容
指定 vscode 为默认编辑器
将 the file path 替换为自己的文件路径
接着填写 commit message
- 结尾

作为一名前端开发人员，MDN 是我使用频率最高的文档。

MDN 全称 Mozilla Developer Network，是由 Mozilla 基金会主导参与的一个开源资料库，其中包含了一些在 Web 开发中常见的文档，而我们每一个人都可以对其贡献内容。

在我使用 MDN 的过程中，经常发现 MDN 的中文文档更新不够及时，甚至有一些地方有明显的问题但是并没有人修改。

如图所示：https://github.com/mdn/translated-content/issues/2392

自己动手丰衣足食，我们为什么不去解决一下这个问题呢？

众人拾柴火焰高，如果你也想对开源社区贡献一份自己的力量，希望这一篇比较水的博客能教会你如何参与到 MDN 的本地化工作。

前置操作

知识储备

这并不是一篇零基础的教程，有一些基础的知识，不会详细说明。不过你也不用太担心，只要你有基础的开发经验，基本上不会有太大的难度。

下面是我认为你应该具备的能力：

git 的基本操作。
GItHub 的基本使用。
命令行的基础操作。
一定的前端方向的专业能力（如果要翻译文档的话）。
有一定的英文水平（能通过翻译工具看懂也可以的）。

你必须知道的几件事

MDN 的文档都托管在 GitHub 中，因此你必须要会使用 git 和 GitHub。
MDN 的原版文档和译版文档并不在一个仓库。（MDN 资源仓库导航）。
文档主要的内容都是存放在 index.html 或者 index.md 文件中的。
文件夹代表着文件，比如说 web/javascript 文件夹代表着 web/javascript/index.html 文件。
所有的重定向信息都在一个文件中定义。
不要手动的修改 _redirects.txt 文件。
index.html 和 index.md 文件的开头都是 “front-matter”。
翻译中文文档，请遵守译文排版规则指北。

更多信息请查阅：https://github.com/mdn/content#fundamental-concepts

如何贡献内容

简单的修改

如果你在页面中发现了某一个单词的拼写错误，或者说是排版的错误，那么你就可以利用 GitHub 直接修改。

下面我通过一个例子来说明如何直接在 GitHub 上进行修改。

当你在浏览 MND 的时候碰见了一个排版错误

将页面拉动到最下面，并且点击 Edit on GitHub。

定位错误。

修改错误，添加上 class="brush: js"

填写修改信息，MDN 并没有规定 message 的格式。并且提交。

GitHub 会自动的为你 fork 仓库，并且创建一个新的 branch，用于提交 pull request。此时你可以点击 Create pull Request 按钮

检查一下，如果没有问题，就可以创建一个 pull request 了。

接着会来到你的这个 PR 的页面，并且 GitHub 上的机器人会自动对你的提交进行审查，并且分配管理员review 你的提交。

当 GitHub 机器人的审查通过之后，你将会在该 PR 页面收到一条信息，该信息包含了你的修改，以及修改之后的预览链接，我们可以点进去看一看。

此时我们通过预览链接打开的网页看到，代码高亮的问题已经被解决了

🎉🎉 恭喜你，你已经迈出了从 0 到 1 的一步！

接下来，我们只需要等待管理员审核通过就行了。当你的 PR 被管理员合并入主分支之后，你将会于 48 小时之内看见你的修改体现在正式的 MDN 上。

复杂的修改

接下来复杂的修改，上手难度会高那么一点，你需要对上文说的前置知识有一定的了解。

首先，找到对应的仓库，并且 fork 到自己的账户中。

英文仓库：https://github.com/mdn/content
译文仓库：https://github.com/mdn/translated-content

MDN 的英文文档都在 Content 这个仓库下面，而翻译的文档都在 translate-content 这个仓库下面。

我们需要使用 Content 这个仓库开启本地开发的环境，而我们实际修改的内容都在 translate-content 中。

接着将这两个仓库 clone 到本地

# 在本地创建一个名为 mdn 的文件夹
mkdir mdn
cd mdn
# clone content 
# 将 your name 替换成自己的 github 用户名
git clone https://github.com/${your name}/content.git
# clone translate content
# 将 your name 替换成自己的 github 用户名
git clone https://github.com/${your name}/translated-content.git

使用 ssh 的方式 clone 也行

此时，我们的目录如下：

接下来我们来搭建本地调试的环境

进入 content 仓库
```
cd content
```
在 content 项目中创建一个名为 .env 的文件
```
touch .env
```
在 .env 文件中写入如下内容 ```shell

指定 vscode 为默认编辑器
EDITOR=code

将 the file path 替换为自己的文件路径

CONTENT_TRANSLATED_ROOT=${The file path}/mdn/translated-content/files

这两行的意思如下：
1. 当我们本地调试 MDN 的时候，MDN 提供了一个名为 `Open in your editor` 的按钮，我们在 `.env` 文件中指定其默认编辑器，这里我们指定的是 VSCODE
![image.png](https://cdn.nlark.com/yuque/0/2021/png/2451693/1638597091536-c79b6c80-0c06-4611-8f09-ccdaacee4df4.png#clientId=uff470fa6-f846-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=837&id=u2ec37649&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1674&originWidth=2882&originalType=binary&ratio=1&rotation=0&showTitle=false&size=421109&status=done&style=stroke&taskId=uf9144365-81d7-462d-8f2b-561cc77c824&title=&width=1441)
2. 译版文档和原版文档是两个分开的项目，而 translate-content 项目并没有本地调试的脚手架。因此我们可以在 `.env` 文件中指定译版文档在本机中的路径，通过 content 项目启动脚手架。
最后我们给 content 项目 安装依赖，并且启动项目
```shell
# 安装依赖
yarn install
# 启动项目
yarn start

接着，我们在浏览器中输入：

http://localhost:5000/zh-CN/

接来下，我们继续举一个例子，看看如何在本地修改 MDN 文档。

截取路径

在地址栏中输入 http://localhost:5000/${刚刚截取的路径} ，回车，访问

我们点击按钮 open in your editor，将会打开本地编辑器（vscode）

接下来，我们可以按照如下的操作，修改并且提交代码。

顺序不重要，你只需要保证，创建了一个新分支，并且在新分支上提交你的改动就行

将你的改动放入 stash 中
```
git stash
```
同步 mdn 仓库的代码到自己的仓库

创建新分支，并且将 stash 中的改动 pop 出来
```
git checkout -b dispatch-1
git stash pop
```
add & commit ```shell git add . git commit

接着填写 commit message


5. push 到远端仓库
```shell
git push --set-upstream origin dispatch-1

在 GitHub 中提交 pull request

接下来的操作，你应该比较熟悉了，因为我们上面介绍过对应的步骤了。

结尾

好了，看到这里就已经结束了。其实大部分的开源项目，都差不多是这个步骤，fork 下仓库，创建新分支，然后修改，最后再提交，向作者提交 PR。但是我们要注意的是，每一个开源项目，对于 PR 的要求是不一样，你在提交 PR 之前，一定要先提前了解开源项目的提交规范，或者说看看其它人的提交。

最后，希望各位都能参与到 MDN 的本地化当中，为中文社区贡献一份自己的力量。

如何参与到 MDN 的本地化工作