编写和存储代码

现在，你将构建你之前规划的网站功能：一个列出已加星标仓库的页面。在这一过程中，你将遵循核心开发者工作流程——使用分支、提交和拉取请求来为你的工作创建空间、进行并保存更改，以及提交更改以供审查。

先决条件

你的 stargazers-log 仓库的本地克隆副本。如果尚未设置此项，请参阅在本地连接到您的代码库。

创建分支

分支允许你在自己的空间中处理功能，而无需更改 main 代码的副本，直到准备就绪。

打开 GitHub Desktop。
在应用的顶部，单击 “Current Branch”，然后单击“ 新建分支”。
为分支 add-starred-list命名，然后单击“ 创建分支”。
单击 发布分支 以使该分支在 GitHub 上可用。

生成网站代码

你的功能需要几个文件：示例数据、样式表、用于显示数据的脚本和更新的主页。

你可以自行编写这些文件，也可以询问 CopilotAI 助手来生成这些文件。每个 GitHub 帐户都包含对 GitHub Copilot 免费的访问权限，并附带一定额度的 AI 积分，因此你可以立即开始使用 Copilot。

若要了解Copilot可用计划以及使用方式，请参阅文档。

在编辑器中打开副驾驶聊天，并要求其创建包含如下所示提示的文件。

Text

Create a starred repositories page for my software project. Add:
- events.json with sample data for a few starred repositories
- style.css to style a simple list
- script.js to fetch events.json and render the list
- an update to index.html that links style.css and script.js

Use the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.

Create a starred repositories page for my software project. Add:
- events.json with sample data for a few starred repositories
- style.css to style a simple list
- script.js to fetch events.json and render the list
- an update to index.html that links style.css and script.js

Use the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.

在副驾驶聊天中打开VS Code

查看生成的内容 Copilot ，然后调整文件以匹配以下示例。

如果未使用 Copilot，请使用代码编辑器在分支中创建 add-starred-list 以下文件。

创建一 events.json 个名为以下示例数据的文件。保存文件。

JSON

[
  { "name": "octocat/Hello-World", "starred": "2024-01-15" },
  { "name": "github/docs", "starred": "2024-02-02" },
  { "name": "octo-org/octo-repo", "starred": "2024-03-21" }
]

[
  { "name": "octocat/Hello-World", "starred": "2024-01-15" },
  { "name": "github/docs", "starred": "2024-02-02" },
  { "name": "octo-org/octo-repo", "starred": "2024-03-21" }
]

创建具有以下样式的文件 style.css 。保存文件。

SCSS

body {
  font-family: sans-serif;
  margin: 2rem;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

body {
  font-family: sans-serif;
  margin: 2rem;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

创建包含以下代码的文件 script.js 。保存文件。

JavaScript

fetch("events.json")
  .then((response) => response.json())
  .then((events) => {
    const list = document.querySelector("#starred");
    events.forEach((event) => {
      const item = document.createElement("li");
      item.textContent = `${event.name} — starred ${event.starred}`;
      list.appendChild(item);
    });
  });

fetch("events.json")
  .then((response) => response.json())
  .then((events) => {
    const list = document.querySelector("#starred");
    events.forEach((event) => {
      const item = document.createElement("li");
      item.textContent = `${event.name} — starred ${event.starred}`;
      list.appendChild(item);
    });
  });

更新 index.html 以链接新文件并保存列表。保存文件。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stargazers log</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Stargazers log</h1>
    <p>A log of the repositories I've starred.</p>
    <ul id="starred"></ul>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stargazers log</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Stargazers log</h1>
    <p>A log of the repositories I've starred.</p>
    <ul id="starred"></ul>
    <script src="script.js"></script>
  </body>
</html>

提交和推送更改

提交会保存你所做更改的一个快照，而推送会将这些更改发送到 GitHub，并存储在你的仓库中。

在 GitHub Desktop左侧栏中查看已更改的文件。
在边栏底部的 “摘要 ”字段中，键入提交消息，例如 Add starred repositories list。
单击 “提交 4 个文件”以添加星型列表。
单击 “推送源 ”以将提交发送到 GitHub。

打开拉取请求

拉取请求会提交你分支中的更改以供审查，然后这些更改才能合并到 main 中。

在 GitHub Desktop 中，单击 预览拉取请求，然后单击 创建拉取请求。您的浏览器随即在 GitHub 上打开拉取请求表单。
查看标题和说明，然后添加有关功能用途的说明。
单击“创建拉取请求”****。

你完成的工作

任务	结果
创建了分支	你使用 `add-starred-list` 为你的功能创建了一个隔离空间。
编写代码	你已将该功能相关的文件添加到你的分支，并可选择在副驾驶聊天的帮助下完成。
已推送你的更改	你已将你的分支更改存储到 GitHub 上。
打开拉取请求	你已提交更改以供审核。

后续步骤

在合并之前，请检查自己所做的更改，以便及早发现问题。继续前往审查你提出的更改。

Get started

在本文中