参与这个项目

图片信息

标志由 CandidDeer 用 :sparkling_heart: 创作

公告:

你想成为这个项目的维护者并帮助它继续发展吗？如果你有兴趣，请阅读维护者指南，加入我们的Discord服务器，并向项目维护者申请加入团队。

快速访问索引

简介
目标
这适合谁？
为什么我需要这样做？
我将贡献什么？
翻译
设置！:)
贡献
下一步
致谢
许可证
前100名贡献者

简介

这是一个帮助首次贡献者参与简单易行项目的教程。

目标

为开源项目做出贡献。
更熟练地使用GitHub。

这适合谁？

这适合绝对的初学者。如果你知道如何编写和编辑锚标签 <a href="" target=""></a>，那么你应该能够完成它。
它也适合那些有一些经验但想要进行首次开源贡献，或者想获得更多贡献以增加经验和信心的人。

为什么我需要这样做？

任何网页开发者，无论是有抱负的还是有经验的，都需要使用Git版本控制，而GitHub是最流行的Git托管服务，被所有人使用。它也是开源社区的核心。熟练使用GitHub是一项必不可少的技能。为项目做出贡献能提升你的信心，并在你的GitHub个人资料上展示成果。

如果你是一个新开发者，想知道是否需要学习Git和GitHub，那么答案是：[你应该昨天就学会Git了](https://codeburst.io/number-one-piece-of-advice-for-new-developers-ddd08abc8bfa 'New Developer? You should've learned Git yesterday. by Brandon Morelli, creator of CodeBurst.io')。

我将贡献什么？

贡献者卡片

你将为这个项目的网页贡献一张像这样的卡片。它将包括你的名字、你的Twitter账号、一段简短描述，以及你推荐的3个对网页开发者有用的资源链接。

你将复制HTML文件中的卡片模板，并用你自己的信息进行定制。

翻译

本教程也有其他语言版本

阿拉伯语 (عربي)	孟加拉语 (বাংলা)	中文（繁體）	荷兰语	英语 (English)
法语 (Français)	德语 (Deutsch)	印地语 (हिंदी)	意大利语 (Italiano)	日语 (日本語)
韩语 (한국어)	波兰语 (Polski)	葡萄牙语 (Portuguese)	俄语 (Русский)	塞尔维亚语 (Српски)
西班牙语 (Español)	土耳其语 (Türkçe)	乌克兰语 (українська)	挪威语 (Norsk)

欢迎为项目文档提供翻译。请阅读翻译指南以做出贡献。

设置! :)

[!注意] 本教程基于GitHub桌面版。如果您熟悉终端操作，请点击此处查看相应教程

首先让我们进行工作设置

登录您的GitHub账户。如果您还没有账户，请加入GitHub。我建议您在继续之前先完成GitHub Hello World教程。
下载GitHub Desktop应用。
- 或者如果您熟悉使用Git命令行，也可以这样操作这里是CLI教程的链接。
- 如果您使用VS Code，它自带集成的Git，可以直接在编辑器中完成我们需要的操作。
- 但是，使用GitHub Desktop是遵循本教程最简单直接的方法。

现在您已经完成设置，让我们开始为项目做贡献吧。

↑ 返回顶部 ↑

贡献

通过10个简单步骤成为开源贡献者。

预计用时：不到30分钟。

步骤1：复刻（Fork）此仓库

这一步的目标是创建此项目的副本并将其放入您的账户中。
在GitHub上，仓库（repo）是项目的称呼，而复刻是其副本。
确保您位于本仓库的主页面。


*点击 Fork* 按钮**

现在您的账户中有了该项目的完整副本。

↑ 返回顶部 ↑

步骤2：克隆仓库

现在我们要创建项目的本地副本。即保存在您自己机器上的副本。
打开GitHub桌面应用。在应用中：


点击 File 然后点击 Clone repository

您将看到GitHub上您的项目和复刻列表。
选择 <您的github用户名>/Contribute-To-This-Project。
点击 Clone

:arrow_right_hook: 复刻的项目左侧会有一个复刻符号。您的复刻将显示您自己的GitHub用户名

这将需要一点时间，因为项目正被复制到您的硬盘。我建议您保持默认路径，通常是 ..\Documents\GitHub。
现在您有了项目的本地副本。

↑ 返回顶部 ↑

步骤3：创建新分支

仓库克隆完成并在GitHub桌面中打开后，就该创建新分支了。
分支是一种将您的更改与项目的主要部分（称为Master）分开的方法。例如，如果出现问题且您对更改不满意，您可以简单地删除该分支，主项目不会受到影响。 | :arrow_right_hook: 点击 当前分支，然后点击 新建 | | | :---------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------: | | :arrow_right_hook: 给你的分支起个名字，然后点击 创建分支 | | | :arrow_right_hook: 将你的新分支发布到GitHub | |
你可以随意命名，但由于这是一个用来添加你名字卡片的分支，将其命名为 your-name-card 是个好习惯，因为这能清楚地表明这个分支的用途。
现在你已经创建了一个独立于主分支的新分支。
在接下来的步骤中，请确保你在这个分支上工作。你可以在GitHub桌面应用顶部中央看到你当前所在分支的名称，那里写着 当前分支。

不要在 master 分支上工作

↑ 回到顶部 ↑

步骤4：打开 index.html 文件

现在我们需要用你喜欢的代码编辑器打开要编辑的文件。
在你的电脑上找到项目文件夹。如果你保持默认设置，路径应该类似 你的电脑 > 文档 > GitHub > Contribute-To-This-Project
index.html 文件直接位于 Contribute-To-This-Project 文件夹中。
打开你的代码编辑器（Sublime、VS Code、Atom等），使用 打开文件 命令，找到项目主目录中的 index.html 文件


:arrow_right_hook: 或者你可以在硬盘上找到该文件，右击，然后用编辑器打开

现在你已经在编辑器中打开了要编辑的文件，准备开始对它进行修改。

↑ 回到顶部 ↑

步骤5：复制卡片模板

我们将复制卡片模板开始工作
在 <body> 标签内，你会找到一个 <div class="container"> 部分。它包含了许多其他部分。
前两个 部分都是 <div class="row">。在VS Code编辑器中点击它们旁边的箭头将其折叠，如下图所示。（如果你使用其他编辑器，可能无法使用此功能。你只需向下滚动即可）。折叠可以方便地隐藏一些你不需要修改的代码组件。
你现在应该可以看到包含所有贡献卡片的部分：<div class="grid" id="contributions">

在这个部分中，你会找到标记为 == TEMPLATE == 的部分
复制图片中红色方框内的所有内容，从 Contributor card START 注释到 Contributor card END 注释

将整个内容直接粘贴到指示的注释下方；刚好在最近一位贡献者的卡片上方。
确保你的卡片结束和上一张卡片开始之间有一行空行。同时在你的卡片开始和 === 在此行正下方粘贴你的卡片 === 注释行之间也添加一行空行。保持代码清晰是个好习惯
永远不要使用代码格式化工具或样式格式化工具。本项目已设置了 Prettier

现在这就是你的卡片，供你自定义和编辑。

↑ 回到顶部 ↑

步骤6：应用你的更改

现在我们开始编辑 HTML，修改卡片中的可自定义字段。

:arrow_right_hook: 用你的名字替换 'Name'

注意：不要改变 class="name"

:arrow_right_hook: 在 `href="在此插入URL"` 中插入你的 Twitter 账号 URL，在文本字段中输入你的用户名

如果你更喜欢使用 Twitter 以外的联系方式，你需要替换 twitter 图标 <i class="fa fa-x-twitter"></i>。方法是前往 Font Awesome Icons 搜索正确的图标，只替换 fa-x-twitter 部分为新的图标，比如 fa-facebook。然后按照上述相同步骤操作。 | | | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | :arrow_right_hook: 告诉我们一些关于你的事。保持简短有趣。把它想象成一条推文而不是一篇博客文章 | | | | :arrow_right_hook: 与社区分享3个对Web开发有用的资源链接。这可以是任何东西，一段视频、一次演讲、一个播客、一篇文章、一个参考或一个工具。如果你是初学者，不要被这个吓到，分享你所知道的任何内容，即使你认为它很基础。你会惊讶于有多少人会从中受益。 |
链接： 在href="这里"中插入链接，替换#。请不要使用URL缩短器或非发布网站的URL！
标题： 在title="这里"中写一个简短描述。
名称： 在文本字段>这里</a>中写入资源名称。
确保你已保存所有更改。
测试你的更改。这很重要！在浏览器中打开html文件（例如双击它），看看你的卡片在网站上会是什么样子。确保整个页面看起来仍然一样，没有任何破损。点击你的链接，确保它们正常工作。打开控制台（Windows / Linux：Ctrl + Shift + J，Mac：Cmd + Opt + J），检查是否有错误消息。
太好了，你已经完成了代码编辑！接下来的步骤将把你的更改发送到GitHub，然后提交合并到主项目中。

↑ 返回顶部 ↑

步骤7：提交你的更改

回到GitHub桌面应用。
你的更改将自动添加到暂存区。
这意味着Git已记录所有已保存的更改。
你可以在应用中看到这一点。你添加到文件中的所有内容都会以绿色显示，删除的内容会显示为红色。


:arrow_right_hook: 下一步称为_`Commit`_。这大致意味着`确认更改`

:arrow_right_hook: 这是你的GitHub桌面头部应该看起来的样子。注意`Current repository`中项目名称旁边的fork符号，你的`Current branch`将有你在步骤3中给它的名称

:arrow_right_hook: 要_`Commit`，你必须填写`Summary`字段。这是解释你所做更改的提交消息。在这种情况下，`"Add my card information"`将是一个合理的消息。你可以选择添加更详细的`Description`。点击`Commit`_按钮。你的按钮会显示类似`Commit to "your-branch-name"`的内容

↑ 返回顶部 ↑

步骤8：将你的更改推送到GitHub

你的更改现在已保存或提交。但它们只保存在本地，也就是在你的计算机上。
将本地更改与GitHub上的仓库同步称为_Push_。你正在将更改从本地仓库"推送"到GitHub上的远程仓库。

:arrow_right_hook: 点击_`Push`_按钮

几秒钟后操作完成，现在你在机器上和GitHub上都有了这个分支的完全相同的副本。

↑ 返回顶部 ↑

步骤9：提交PR（Pull Request）

这是你一直在等待的时刻；提交_Pull Request_（PR）。
到目前为止，你所做的所有工作都是在项目的fork上进行的，你还记得，它位于你自己的GitHub帐户上。
现在是时候将你的更改发送到主项目，以便与之合并。
这被称为Pull Request，因为你正在请求原项目维护者"拉取"你的更改到他们的项目中。
去GitHub上你的fork的主页（它会在顶部有fork图标和你自己的用户名）。
在仓库的顶部附近，你会看到一个突出显示的pull request消息，带有一个绿色按钮。 | | | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | :arrow_right_hook: 点击 Compare and pull request | | | | :arrow_right_hook: 这就是 Open a pull request 页面的样子。 |
请记住，你是在尝试将你的分支与原项目合并，而不是与你分叉的 Master 分支合并。
下面的图片给你一个关于你的拉取请求头部应该是什么样子的概念。
左边是原项目，后面是主分支。右边是你的分叉和你创建的分支。


:arrow_right_hook: 创建拉取请求：写一个标题，在描述中添加可选信息，然后点击 `Create pull request`

不要被所有的选项吓到。现在你只需要做这三个步骤。
保持 Allow edits from maintainers 选项勾选。
现在，一个 拉取请求 将被发送给项目维护者。一旦它被审核并接受，你的更改将出现在项目网页上。

↑ 回到顶部 ↑

步骤 10：庆祝

就是这样。你做到了！你现在已经在 GitHub 上为开源项目做出了贡献。

你已经向一个实时网页添加了代码：https://syknapse.github.io/Contribute-To-This-Project

你的更改不会立即可见；首先它们必须被项目维护者审核、接受和合并。一旦它们被合并，你的卡片应该就会在页面上可见并且生效。

审核者要求对 PR 进行修改是很正常的。如果发生在你身上，把它当作一个好的练习。注意观察评论和请求的更改。一旦你做了请求的更改（回到你的分支），你只需要提交和推送你的更改。PR 将自动更新新的更改。

我保证我会尽快审核和合并，但我是在业余时间做这个，所以难免会有几天的延迟。

↑ 回到顶部 ↑

下一步

过一段时间回来检查你的合并拉取请求。
当你的更改被批准，或者如果需要额外的更改时，你应该会收到 GitHub 的电子邮件。当 PR 最终与主分支合并并且你的卡片已添加时，你也会收到通知。
你还可以从这个_免费_系列学习如何贡献：如何在 GitHub 上为开源项目做贡献
如果你觉得这个项目有用，请在页面顶部给它一个 :star: 星 :star: 并推文about it to help spread the word
你可以加入我们的 Discord 服务器
你可以在 𝕏 (Twitter) 上关注我并与我联系，或使用这些其他选项
这是一个开源项目，所以除了贡献你的卡片外，你还可以帮助修复错误、改进或新功能。打开一个问题或发送一个新的拉取请求
为了帮助改善我们的社区，请查看 GitHub 的讨论标签，位于拉取请求旁边。这个区域是一个介绍自己、深入讨论开源以及与项目维护者交流的地方。你会帮助我们构建这个功能并增强我们的社区吗？
感谢你为这个项目做出贡献。现在你可以继续尝试为其他项目做贡献；寻找带有标签的初学者友好的贡献选项。
我还在寻找协作者来帮助我审核和合并 PR。如果你想获得更高级的 Git 实践，请阅读维护者指南，加入我们的 Discord 服务器，并向项目维护者请求加入团队。