我如何从 GitHub 上的代码中学习?
从 GitHub 项目中学习是 学习新技术 和 为自己的项目寻找灵感 的绝佳方式。
然而,GitHub 上有数以百万计的公开仓库,要找到符合你项目需求的代码可能会让人不知所措。即使找到了完美的仓库,浏览代码库以寻找有用的示例也可能相当困难。
与其试图理解整个项目,不如选取单个功能或函数并观察其实现方式。我们可以使用 Copilot Chat 和 GitHub 的搜索功能定位特定功能并跟踪其在代码库中的实现。这是一种极好的学习方式,因为我们可以看到该功能从后端到前端的完整工作流程。
在本指南中,你将通过以下 示例情景 学会上述两种方法:学习如何在 Jekyll 网站上加载并显示文件中的数据。随后,你可以将这些技巧和方法应用到其他项目和编程语言中。
查找示例项目
第一步是找到合适的学习项目。
使用 Copilot Chat 确认仓库
寻找可供学习的项目的最快方法是让 Copilot Chat 为你查找符合条件的仓库。
打开 Copilot Chat 并开始一次普通聊天。然后提问
您能找到一些使用 Jekyll 在仓库中从文件展示数据的流行仓库吗?
Copilot 会返回相关仓库的链接,你可以针对这些仓库进行后续提问。
通常,Copilot 会在响应末尾附上一个指向 GitHub 搜索的链接,以获取更多结果。接下来我们将查看这些结果。
使用搜索识别更多选项
如果 Copilot 已经包含搜索结果的链接,请直接点击该链接。若没有,请按以下步骤自行构造搜索查询。
- 前往 Advanced search。
- 在 “Advanced options” 部分,使用 “Written in this language” 下拉框选择编程语言。对于我们的 Jekyll 站点,选择 “HTML”。
- 可选地,在 “Repositories options” 中,靠近 “With this many stars” 的位置输入
>150。这有助于找到可能维护良好的热门仓库。 - 回到页面顶部,点击 Search。
提示
我们可以通过在搜索查询中加入主题和关键词进一步缩小结果范围。例如 topic:jekyll "blog" 将返回所有标签为 Jekyll 且名称或描述中包含 “blog” 的仓库。流行主题列表请参见 Topics on GitHub。
选择项目
在审查了 Copilot 和搜索的结果后,我们决定使用 github/choosealicense.com 仓库。该仓库包含 Choose a License 的源代码,这是一个用 Jekyll 构建、分享开源许可证信息的网站。
我们特别感兴趣的是 Licenses 页面,它从数据文件中展示了多种流行的开源许可证。
在项目中定位自己
在深入了解显示数据文件的代码之前,先整体了解一下仓库的结构。
首次访问仓库时,往往难以确定从何入手。虽然每个项目的组织方式各不相同,但通常都有一些通用的文档入口可以帮助我们快速定位。
README.md 文件
阅读 README.md 文件总是个好主意,它是仓库的首页,会自动在文件列表下方渲染。不同维护者会提供不同的信息,但通常可以在其中找到项目概述、如何在本地机器上构建项目以及文档链接等内容。
在 github/choosealicense.com 仓库中,README.md 说明了许可证文件所在位置(/_licenses)、每个许可证可能拥有的属性,以及如何在本地运行该网站。
使用 Copilot Chat
如果 README.md 未能提供所有答案,你可以向 Copilot 请求帮助,帮助你在仓库中定位特定功能。
要打开 Copilot Chat,点击搜索栏旁的 图标,然后提出问题。例如
这个 Jekyll 网站的主页面是什么?
当你向 Copilot 提问仓库相关问题时,它可以返回相关文件、解释这些文件在功能中的作用并附上链接。
仓库的 wiki
另一种可能的信息来源是仓库的 wiki,它是专门用于托管文档的仓库章节。GitHub 上的每个仓库都具备使用 wiki 的功能,但并非所有仓库都会使用。要访问 wiki,请点击仓库中的 Wiki 选项卡。
发布
如果仓库的源码可以编译成可执行文件,一些维护者会使用仓库的 releases 来发布二进制文件。你可以下载并运行这些二进制文件,以在浏览代码库的同时检查应用的工作方式,而无需自行构建项目。
仓库的发布页面位于文件列表和 README.md 右侧的侧边栏中。
内部文档
你也可以在仓库内容中查找内部文档。这可能是单个 Markdown 文件,也可能是包含大量 Markdown 文件的目录。常见的文件或目录名称包括 “docs”、 “documentation”、 “wiki”、 “resources”、 “help” 与 “manual”。
浏览源代码
既然我们已经了解了仓库的整体结构,接下来使用 GitHub 搜索定位我们想要的具体功能。
当你在仓库页面并点击页面顶部的搜索框时,GitHub 会自动为你的查询添加 repo 限定符,以确保搜索结果仅限于当前仓库。
要开始搜索,我们需要一些关键词。这可以是该功能独有的文本字符串,或是页面 HTML 源码中出现的特定 class 或 id 属性。
在本例中,我们将在 licenses 页面 顶部的文字进行搜索,使用如下查询:repo:github/choosealicense "If you’re looking for a reference table?"。该查询返回一个结果,即名为 licenses.html 的文件。
现在可以点击该结果进一步查看!licenses.html 正是我们想要的 “Licenses” 页面源码。我们可以看到我们搜索的字符串,以及每个许可证在下面的代码中被包含的方式。
{% include license-overview.html license-id="agpl-3.0" %}
理解源代码
找到感兴趣的具体代码后,接下来就可以着手理解它了。
向 Copilot Chat 询问代码
你可以使用 Copilot 了解文件的详情,甚至是特定代码行。Copilot 会结合编程语言的相关信息和仓库上下文,给出详尽的解答。
让我们请 Copilot 解释第 11 行使用的 {% include %} 标签发生了什么。点击行号,然后在该行右侧点击。在聊天窗口中,提问:
这行代码在做什么?
Copilot 会说明该行包含了 license-overview.html 文件,并将 "agpl-3.0" 作为 license-id 传递以进行显示。
提示
如果你对 Copilot 的回复仍有疑惑,可以随时让它简化答案或进一步展开某个部分。
阅读注释
注释是供人阅读的说明性文字,不会被执行。通常使用 //、/* 等字符进行标记。
常见的注释类型有:
- 行:描述特定行作用的单行注释
- 块:可能描述整个函数或文件作用的多行注释
- 文件:位于文件开头的块注释,提供该部分代码库的概览
在编程语言参考文档中查找函数
每种编程语言都有在线参考文档,详细解释该语言的各个方面。
使用搜索引擎搜索编程语言名称加函数名,就能找到对应函数的参考页面链接。
对于本例,在搜索引擎中搜索 jekyll include 应该会返回 Jekyll 文档中的 “Includes” 文档。进一步阅读 Jekyll 文档可发现,许可证本身是位于 /_licenses 目录下的一个 collection。
提示
如果在编程语言参考中找不到某函数,通常说明该函数是在代码库内部定义的。此时可请求 GitHub Copilot 帮助定位。
总结一下我们学到的内容:licenses.html 文件会为每个显示的许可证引入 /_includes/license-overview.html。/_includes/license-overview.html 文件会根据 license-id 去匹配 /_licenses collection 中对应的许可证,并渲染其详情。
尝试小幅修改
如果你能够在本地运行该项目,最好的学习方式之一就是进行小改动观察效果。
你可以先修改文本内容,然后逐步进行更大的改动,例如尝试不同函数和文件之间的交互方式。
尝试在 _includes 目录中找到 license-overview.html 文件,然后修改许可证的显示方式或实验其从 collection 中加载的过程。
你可以更改某个许可证文件开头的元数据,修改 license-overview.html 中显示的属性,甚至尝试添加自定义属性。完成修改后,按照 README.md 中的步骤在浏览器中查看即可验证效果。
应用所学
github/choosealicense.com 仓库是一个大型 Jekyll 项目的优秀示例,展示了 Jekyll 与 GitHub Pages 的强大潜力。你是否可以将从仓库结构、collection 使用方式以及许可证数据引入方式中学到的经验,运用到自己的项目中?
后续步骤
现在你已经了解了示例代码的工作原理,可能想在自己的项目中复用它。代码复用是软件开发中的强大手段,但要正确且合法地进行,需要遵循重要的步骤。完整教程请参见 在项目中复用他人的代码。