Skip to content

创建你的第一个 Astro 页面

既然你知道 .astro 文件负责你网站上的页面，那么是时候创建一个了！

¥Now that you know that .astro files are responsible for pages on your website, it’s time to create one!

Get ready to…

  • 在你的网站上创建两个新页面：关于和博客

  • 添加导航链接到你的页面

  • 将网站的更新版本部署到网络上

创建一个新的 .astro 文件

Section titled 创建一个新的 .astro 文件

¥Create a new .astro file

  1. In the files pane of your code editor, navigate to the folder src/pages/ where you will see the existing file index.astro

  2. In that same folder, create a new file named about.astro.

  3. Copy, or retype the contents of index.astro into your new about.astro file.

  4. Add /about to the end of your website preview’s URL in the address bar and check that you can see a page load there. (e.g. http://localhost:4321/about)

现在，你的 “关于” 页面应该与第一页完全相同，但我们将对此进行更改！

¥Right now, your “About” page should look exactly the same as the first page, but we’re going to change that!

编辑你的页面

Section titled 编辑你的页面

¥Edit your page

编辑 HTML 内容以使此页面与你相关。

¥Edit the HTML content to make this page about you.

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

¥To change or add more content to your About page, add more HTML element tags containing content. You can copy and paste the HTML code below between the existing <body></body> tags, or create your own.

src/pages/about.astro
<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 页面，你应该会看到更新的内容。

¥Now, visit your /about page in your browser tab again, and you should see your updated content.

添加导航链接

Section titled 添加导航链接

¥Add navigation links

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

¥To make it easier to preview all your pages, add HTML page navigation links before your <h1> at the top of both of your pages (index.astro and about.astro):

src/pages/about.astro
<a href="/">Home</a>
<a href="/about/">About</a>


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

检查你是否可以单击这些链接在网站的页面之间来回移动。

¥Check that you can click these links to move back and forth between pages on your site.

自己尝试一下 - 添加博客页面

Section titled 自己尝试一下 - 添加博客页面

¥Try it yourself - Add a Blog page

在 与上面相同的步骤 之后将第三个页面 blog.astro 添加到你的网站。

¥Add a third page blog.astro to your site, following the same steps as above.

（不要忘记为每个页面添加第三个导航链接。）

¥(Don’t forget to add a third navigation link to every page.)

Show me the steps.
  1. Create a new file at src/pages/blog.astro.
  2. Copy the entire contents of index.astro and paste them into blog.astro.
  3. Add a third navigation link to the top of every page:
src/pages/index.astro
<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>


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

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

¥You should now have a website with three pages that all link to each other. It’s time to add some content to the Blog page.

将 blog.astro 处的页面内容更新为：

¥Update the page content at blog.astro with:

src/pages/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>

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

¥Preview your entire site by visiting all three pages in your browser preview and check that:

  • 每个页面都正确链接到所有三个页面

  • 你的两个新页面都有自己的描述性标题

  • 你的两个新页面都有自己的段落文本

将你的更改发布到网络上

Section titled 将你的更改发布到网络上

¥Publish your changes to the web

如果你按照第 1 单元中的设置进行操作，则可以通过 Netlify 将更改发布到你的实时网站。

¥If you’ve followed our setup in Unit 1, you can publish your changes to your live website through Netlify.

当你对预览的外观感到满意时，请将你的更改提交到 GitHub 上的在线存储库。

¥When you are happy with the way your preview looks, commit your changes to your online repository at GitHub.

  1. In VS Code, preview the files that have changed since your last commit to GitHub.

    • Go to the Source Control tab in the left menu. It should have a small “3” displayed.

    • You should see index.astro, about.astro, and blog.astro listed as files that have changed.

  2. Enter a commit message (e.g. “Added two new pages - about and blog”) in the text box, and press Ctrl + Enter (macOS: Cmd ⌘ + Enter) to commit the change to your current workspace.

  3. Click the button to Sync Changes to GitHub.

  4. After waiting a few minutes, visit your Netlify URL to verify that your changes are published live.

清单

Section titled 清单

¥Checklist

资源

Section titled 资源

¥Resources

Astro 中文网 - 粤ICP备13048890号