# 查找和了解示例代码

通过学习 GitHub 上的示例代码来提升编码技能。

## 如何通过 GitHub 上的代码进行学习？

通过 GitHub 上的项目进行学习是**学习新技术**和为自己的项目**寻找灵感**的好方法。

但 GitHub 上有数百万个公开可用的存储库，查找适合自己项目的代码可能会非常耗时。 即使找到非常合适的存储库，浏览代码库查找有用的示例也可能会非常麻烦。

相比尝试了解整个项目，更好的方法是选择单个特性或功能并了解其原理。 可以使用 副驾驶聊天 和 GitHub 的搜索功能来查找功能，并在代码库中追踪其实现路径。 这是一种极佳的学习方式，因为可以看到该功能从后端到前端的完整运作过程。

在本指南中，你将通过执行**示例方案**同时了解如何完成这两项操作：了解如何在 Jekyll 网站上加载和显示文件中的数据。 然后，可以将相关技巧应用于其他项目和编程语言。

## 查找示例项目

第一步是查找适合学习的项目。

### 使用 副驾驶聊天 识别仓库

找到一个可以从中学习代码的项目的最快方法是让 [副驾驶聊天](https://github.com/copilot) 找到符合您标准的仓库。

打开 [副驾驶聊天](https://github.com/copilot) 并启动常规用途聊天。 然后询问：

> 可否找到一些使用 Jekyll 显示存储库中文件的常用存储库？

Copilot 会返回相关存储库的链接，之后可以进一步询问有关存储库的问题。

Copilot 通常会在其响应结束时附上一个链接，该链接指向 GitHub 搜索，以便提供更多结果。 接下来，我们将审查这些结果。

### 使用搜索识别更多选项

如果 Copilot 包含搜索结果的链接，请点击该链接。 如果没有，请按照以下步骤生成自己的搜索查询。

1. 导航到“高级搜索”[](https://github.com/search/advanced)。
2. 在“高级选项”部分中，使用“用此语言编写”下拉列表来选择编程语言。 我们将为 Jekyll 网站选择“HTML”。
3. （可选）在“存储库选项”下，在“星标数”旁边，键入 `>150`。 这有助于找到维护良好的常用存储库。
4. 在页面顶部，单击**搜索**。

> \[!TIP]
> 可以通过向搜索查询中添加主题和文本，进一步缩小搜索结果范围。 例如，`topic:jekyll "blog"` 会返回所有者分类为与 Jekyll 相关且名称或说明中含“博客”一词的存储库。 有关常见主题的列表，请参阅 [GitHub 上的主题](https://github.com/topics)。

### 选择项目

查看 Copilot 提供的结果并进行搜索后，我们决定使用 [`github/choosealicense.com`](https://github.com/github/choosealicense.com) 存储库。 此存储库包含 [Choose a License](https://choosealicense.com/)（共享有关open source许可证的信息的 Jekyll 网站）的源代码。

我们对 [Licenses](https://choosealicense.com/licenses/) 页面特别感兴趣，该页面显示数据文件中常用的open source许可证。 <!-- markdownlint-disable-line search-replace -->

## 在项目中自我定位

在深入了解用于显示数据文件的代码之前，先在存储库中进行大体上的自我定位。

首次访问存储库时，很难知道应从何处开始。 虽然每个项目有其自己的组织方式，但可以依赖一些常见的文档方法来帮助理清方向。

### README.md 文件

一个不错的方法是阅读 **README.md** 文件，该文件是存储库的首页，会自动显示在文件列表下方。 不同的维护者会提供不同的信息，但通常可以找到关于项目的信息、如何在本地计算机上构建项目以及相关文档的链接。

在 [`github/choosealicense.com`](https://github.com/github/choosealicense.com) 存储库中，README.md 文件说明了许可证文件所在的位置 (`/_licenses`)、每个许可证可能包含的属性以及如何让网站在计算机上运行。

### 使用 副驾驶聊天

如果 README.md 文件未提供所有解答，可以让 Copilot 帮助浏览存储库和查找功能。

打开 数据变量。copilot。copilot\_chat\_short %}，单击搜索栏旁边的 **<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-copilot" aria-label="Copilot" role="img"><path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path></svg>** 图标并提问。 例如：

> 此 Jekyll 网站的主登录页面是什么？

向 Copilot 询问有关存储库的问题时，它可以返回相关文件、解释其在功能中的作用并提供链接。

### 存储库的 Wiki

另一个可能的信息来源是存储库的 Wiki\*\*\*\*，这是存储库专用于托管文档的部分。 GitHub 上的每个存储库都配置了使用 Wiki 的功能，但并非每个存储库都会用到。 若要访问 Wiki，单击仓库中的 <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-book" aria-label="book" role="img"><path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path></svg>“Wiki”选项卡\*\*\*\*。

### 发布

如果存储库的源代码可以构建为可执行文件，某些存储库维护者会借助存储库的“发行版”\*\*\*\* 发布二进制文件。 可以下载并运行这些二进制文件，以检查应用程序在浏览代码库时的工作方式，而无需自行生成项目。

您可以在文件列表和 README.md 右侧的边栏中找到存储库的发布版本。

### 内部文档

也可以在存储库的内容中查找内部文档。 这可能是单个 Markdown 文件或包含 Markdown 文件的目录。 用于查找的常见名称包括“docs”、“documentation”、“wiki”、“resources”、“help”和“manual”。

## 浏览源代码

现在，我们已经了解存储库的整体结构，接下来可以使用 GitHub 搜索来查找所需的具体功能。

当位于存储库中并单击页面顶部的搜索字段时，GitHub 会自动添加 `repo` 搜索限定符，将搜索结果范围限定在查看的存储库。

要开始，我们需要一个搜索的对象。 我们可能需要查找正在检查的功能特有的文本字符串，也可能需要查看页面的 HTML 源或查找具体的 `class` 或 `id` 属性。

在本示例中，我们将使用查询[`repo:github/choosealicense "If you’re looking for a reference table?"`](https://github.com/search?q=repo%3Agithub%2Fchoosealicense.com+%22If+you%E2%80%99re+looking+for+a+reference+table%22\&type=code)搜索[许可证页](https://choosealicense.com/licenses/)顶部的文本。 查询返回了一个结果，一个名为 `licenses.html` 的文件。

现在可以单击结果并深入查看！
[
`licenses.html`
](https://github.com/github/choosealicense.com/blob/gh-pages/licenses.html) 是我们查找的“许可证”页面的来源。 可以看到搜索的字符串，以及每个许可证都包含在以下代码中：

```markdown
{% include license-overview.html license-id="agpl-3.0" %}
```

## 了解源代码

现在已找到所需的特定代码，接着我们来了解这些代码。

### 向 副驾驶聊天 询问代码

可以使用 Copilot 详细了解某个文件甚至特定代码行。 Copilot 会结合编程语言的相关信息和存储库中的上下文，提供非常详细的解答。

现在让 Copilot 解释第 11 行的情况，并使用 `{% include %}` 标签。 单击行号。 然后，在行右侧，单击 <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-copilot" aria-label="Ask Copilot about this snippet" role="img"><path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path></svg>。 在聊天窗口中，询问：

> 此行发生了什么？

Copilot 将解释该行正在包含 `license-overview.html` 文件并将 `"agpl-3.0"` 作为 `license-id` 传递以显示。

> \[!TIP]
> 如果不理解 副驾驶聊天 的响应，可以要求它简化回答或进一步说明回答的特定部分。

### 阅读注释

注释是人可阅读的注解，可用于理解代码，且不会在代码中被执行。 通常使用 `//` 或 `/*` 等字符将其隔开。

我们需要寻找以下几种类型的注释：

* 行\*\*\*\*：描述特定行作用的单行注释
* **块**：可能描述整个函数或文件作用的多行注释
* 文件\*\*\*\*：文件开头的块注释，提供代码库特定部分的概述

### 在编程语言参考中查找函数

每种编程语言都会在线上提供参考信息，详细说明该语言的各个方面。

如果使用搜索引擎搜索编程语言和函数，应会找到指向该函数参考页的链接。

对于我们的示例，在搜索引擎中搜索 `jekyll include` 应返回 Jekyll 文档中的[“包含”文档](https://jekyllrb.com/docs/includes/)。 如果进一步阅读 Jekyll 的文档，可以看到许可证集合本身位于 [`_licenses`](https://github.com/github/choosealicense.com/tree/gh-pages/_licenses) 目录中。

> \[!TIP] 如果未在编程语言参考中找到函数，则可能函数是在代码库自身中定义的。 让 [GitHub Copilot](https://github.com/copilot) 定位它。

总结我们学到的内容：[`licenses.html`](https://github.com/github/choosealicense.com/blob/gh-pages/licenses.html) 文件包含每个显示许可证的 [`/_includes/license-overview.html`](https://github.com/github/choosealicense.com/blob/gh-pages/_includes/license-overview.html)。 [`/_includes/license-overview.html`](https://github.com/github/choosealicense.com/blob/gh-pages/_includes/license-overview.html) 文件匹配 [`/_licenses`](https://github.com/github/choosealicense.com/tree/gh-pages/_licenses) 集合中提供给许可证的 `license-id` 并呈现详细信息。

### 在小变动上进行试验

如果可以在计算机上本地运行项目，一种很好的学习方法是进行微小更改来了解会发生什么。

首先，可以更改文本，然后尝试进行更大的更改，例如尝试了解函数和文件彼此如何交互。

尝试在 `_includes` 目录中查找 [`license-overview.html`](https://github.com/github/choosealicense.com/blob/gh-pages/_includes/license-overview.html) 文件，然后更改许可证的显示方式，或试验如何从集合中加载许可证。

可以更改其中一个许可证文件开头的元数据，更改 `license-overview.html` 中显示的属性，甚至尝试添加自己的属性。 更改后，可以按照 README.md 中的说明在浏览器中查看它以进行测试。

### 应用所学内容

存储库 [`github/choosealicense.com`](https://github.com/github/choosealicense.com) 是大型 Jekyll 项目的一个很好的示例，充分体现了使用 Jekyll 和 GitHub Pages 可以实现什么。 你是否能够应用所学到的有关存储库结构、存储库如何使用集合及其包含许可证数据的方式等相关知识生成自己的项目？

## 后续步骤

了解了示例代码的原理后，你可能会希望在自己的项目中重复使用它。 代码重用是软件开发中的一个重要部分，但要正确、合法地实现需要遵循一些重要步骤。 完整教程请参阅 [在你的项目中重复使用其他人的代码](/zh/get-started/learning-to-code/reusing-other-peoples-code-in-your-projects)。