2 • 在你的网站上添加、设计和链接页面
创建你的第一个Astro页面
现在你知道 .astro 文件负责你网站上的页面了，让我们来一起新建一个吧!
准备好…
- 在你的网站上创建两个新页面：关于和博客
- 为你的页面添加导航链接
- 将你的网站的更新版本部署并部署到线上
创建一个新的 .astro 文件
标题部分 创建一个新的 .astro 文件-
在你的代码编辑器的文件窗口中，导航到
src/pages/文件夹，你会看到现有的index.astro文件。 -
在同一文件夹中，创建一个名为
about.astro的新文件。 -
复制或重新输入
index.astro的内容到你新的about.astro文件中。 -
在地址栏中的网站预览的URL末尾添加
/about，并检查你是否能在那里看到一个页面加载。(例如：http://localhost:3000/about)
现在，你的 “关于” 页面看起来应该和第一页完全一样，但我们现在要更改一下！
编辑你的页面
标题部分 编辑你的页面编辑 HTML 内容，可以写一些有关你的信息。
要改变或添加更多的内容到你的 “关于” 页面，请添加更多包含内容的 HTML 标签。你可以把下面代码复制粘贴到现有的 <body></body> 标签之间，或者编写一些属于你自己的代码。
<body> <h1>我的 Astro 网站</h1> <h1>关于我</h1> <h2>……和我的新 Astro 网站！</h2>
<p>我正在学习 Astro 的入门教程。这是我网站上的第二个页面，也是我自己建立的第一页面！</p>
<p>随着我完成更多教程，该站点将更新，所以请继续查看我的旅程将如何进行吧！</p></body>现在，在你的浏览器标签中再次访问 /about 页面，你应该可以看到你刚刚更新的内容。
添加导航链接
标题部分 添加导航链接为了更容易预览你的所有页面，在你的两个页面（index.astro 和 about.astro）顶部的 <h1> 标签之前添加 HTML 页面导航链接。
<a href="/">首页</a><a href="/about/">关于</a>
<h1>关于我</h1><h2>……和我的新 Astro 网站！</h2>检查你是否可以点击这些链接，在你的网站上的页面之间来回导航。
动手尝试一下：增加一个博客页面
标题部分 动手尝试一下：增加一个博客页面在你的网站上添加第三个页面 blog.astro，按照与上面相同的步骤。
(别忘了在每个页面添加第三个页面的导航链接。)
给我看一下步骤：
- 在
src/pages/blog.astro创建一个新文件。 - 复制
index.astro的全部内容并将其粘贴到blog.astro。 - 在每个页面的顶部添加第三个页面的导航链接：
<body> <a href="/">首页</a> <a href="/about/">关于</a> <a href="/blog/">博客</a>
<h1>我的 Astro 网站</h1></body>你现在应该有一个有三个页面的网站，这些页面都相互链接。让我们在博客页面上添加一些内容。
使用以下内容来更新 blog.astro 的页面：
<body> <a href="/">首页</a> <a href="/about/">关于</a> <a href="/blog/">博客</a>
<h1>我的 Astro 网站</h1> <h1>我的 Astro 学习博客</h1> <p>在这里，我将分享我的学习 Astro 之旅。</p></body>通过在浏览器预览中访问所有三个页面来预览你的整个网站，并检查一下：
- 每个页面都正确地链接到所有三个页面
- 你的两个新页面都有自己的描述性标题
- 你的两个新网页都有自己的段落文字
将你的修改发布到网络上
标题部分 将你的修改发布到网络上如果你已经按照我们在第一单元中的设置，你可以通过 Netlify 将你的修改发布到你的在线网站上。
当你对你的网站预览满意时，提交你的修改到 GitHub 的在线仓库。
-
在 VS Code 中，预览自上次提交到 GitHub 后有变化的文件。
-
进入左边菜单中的 Source Control tab。它应该有一个小小的数字 “3” 显示。
-
你应该看到
index.astro、about.astro和blog.astro被列为已改变的文件。
-
-
在文本框中输入提交消息（例如 “添加了两个新页面 - 关于和博客”），然后按 Ctrl + Enter (macOS: Cmd ⌘ + Enter) 将更改提交到当前工作区。
-
单击按钮 Sync Changes 来同步到 GitHub。
-
等待几分钟后，访问你的 Netlify URL 以验证你的更改是否已实时发布。