创建你的第一个 Astro 页面

现在你已经知道网站上的页面是由 .astro 文件负责的，是时候创建一个了！

准备好去……

在你的网站上创建两个新页面：“关于”和“博客”
为你的页面添加导航链接
将网站的更新版本部署到网络上

创建一个新的 `.astro` 文件

在你的代码编辑器的文件窗格中，导航到 src/pages/ 文件夹，你会在其中看到已有的 index.astro 文件。
在同一个文件夹中，创建一个名为 about.astro 的新文件。
复制或重新输入 index.astro 的内容到你的新文件 about.astro 中。

你的编辑器可能会在该文件的标签上显示一个实心白圈。这表示该文件尚未保存。在 VS Code 的“文件”菜单下，启用“自动保存”，这样你就不再需要手动保存任何文件了。
在地址栏中，将 /about 添加到你的网站预览 URL 的末尾，并检查你是否能看到页面加载。（例如 https://:4321/about）

现在，你的“关于”页面应该和首页看起来完全一样，但我们马上就要改变它！

编辑你的页面

编辑 HTML 内容，让这个页面成为关于你的页面。

要更改或添加更多内容到你的“关于”页面，请添加更多包含内容的 HTML 元素标签。你可以复制并粘贴下面的 HTML 代码到现有的 <body></body> 标签之间，或者创建你自己的内容。

<body>
  <h1>My Astro Site</h1>
  <h1>About Me</h1>
  <h2>... and my new Astro site!</h2>

  <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>

  <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
</body>

现在，再次在你的浏览器标签页中访问 /about 页面，你应该能看到更新后的内容。

为了更方便地预览所有页面，请在你两个页面（index.astro 和 about.astro）的顶部，<h1> 标签之前，添加 HTML 页面导航链接。

<a href="/">Home</a>
<a href="/about/">About</a>

<h1>About Me</h1>
<h2>... and my new Astro site!</h2>

检查你是否可以点击这些链接在你的网站页面之间来回切换。

亲自动手 - 添加一个博客页面

按照与上面相同的步骤，向你的网站添加第三个页面 blog.astro。

（别忘了在每个页面都添加第三个导航链接。）

向我展示步骤。

在 src/pages/blog.astro 创建一个新文件。
复制 index.astro 的全部内容并将其粘贴到 blog.astro 中。
在每个页面顶部添加第三个导航链接

<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>

  <h1>My Astro Site</h1>
</body>

你现在应该有一个包含三个页面的网站，并且这些页面都相互链接。是时候给博客页面添加一些内容了。

用以下内容更新 blog.astro 的页面内容

<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>

  <h1>My Astro Site</h1>
  <h1>My Astro Learning Blog</h1>
  <p>This is where I will post about my journey learning Astro.</p>
</body>

通过在浏览器预览中访问所有三个页面来预览你的整个网站，并检查：

每个页面都正确地链接到所有三个页面
你的两个新页面各有其描述性标题
你的两个新页面各有其段落文本

将你的更改发布到网络

如果你遵循了我们在第 1 单元中的设置，你可以通过 Netlify 将你的更改发布到你的线上网站。

当你对预览效果感到满意时，将你的更改 提交 (commit) 到你在 GitHub 上的在线仓库。

在 VS Code 中，预览自你上次提交到 GitHub 以来已更改的文件。
- 转到左侧菜单中的 源代码管理选项卡。它上面应该会显示一个小“3”。
- 你应该会看到 index.astro、about.astro 和 blog.astro 被列为已更改的文件。
在文本框中输入一条提交信息（例如，“添加了两个新页面 - about 和 blog”），然后按 Ctrl + Enter（macOS: Cmd ⌘ + Enter）将更改提交到你当前的工作区。
点击 同步更改 按钮以同步到 GitHub。
等待几分钟后，访问你的 Netlify URL，以验证你的更改已实时发布。

清单

我能为我的网站创建一个新页面，并从现有页面链接到它。
我能将我的更改提交回 GitHub，并更新我在 Netlify 上的线上网站。