跳转到内容
Astro Astro

添加「关于你」的动态内容

现在你有了一个带有 HTML 内容的多页面网站，是时候来添加一些动态的 HTML 了！

准备好…

  • 在 fronttmatter 中定义你的页面标题，并在你的 HTML 中使用它
  • 条件渲染 HTML 元素
  • 添加一些关于你的内容

任何 HTML 文件都是有效的 Astro 语言。但是，你可以用 Astro 做更多的事情，而不仅仅是普通的 HTML!

定义和使用变量

打开 about.astro，它应该看起来像这样：

src/pages/about.astro
---


---
<html lang="zh">
  <head>
    <meta charset ="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">首页</a>
    <a href="/about/">关于</a>
    <a href="/blog/">博客</a>
    <h1>关于我</h1>
    <h2>……和我的新 Astro 网站！</h2>


    <p>我正在学习 Astro 的入门教程。这是我网站上的第二个页面，也是我自己建立的第一页面！</p>


    <p>随着我完成更多教程，该站点将更新，所以请继续查看我的旅程将如何进行吧！</p>
  </body>
</html>

  1. 在 frontmatter 中的代码栅栏之间添加以下一行 JavaScript：

    src/pages/about.astro
    ---
    const pageTitle = "关于我";
    ---

  2. 用动态变量 {pageTitle} 替换 HTML 中静态的“Astro”标题和“关于我”标题。

    src/pages/about.astro
    <html lang="zh">
      <head>
        <meta charset ="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">首页</a>
        <a href="/about/">关于</a>
        <a href="/blog/">博客</a>
        <h1>关于我</h1>
        <h1>{pageTitle}</h1>
        <h2>……和我的新 Astro 网站！</h2>
    

        <p>我正在学习 Astro 的入门教程。这是我网站上的第二个页面，也是我自己建立的第一页面！</p>
    

        <p>随着我完成更多教程，该站点将更新，所以请继续查看我的旅程将如何进行吧！</p>
      </body>
    </html>

  3. 刷新你的 /about 页面的实时预览。

    你的页面文本应该看起来是一样的，而你在浏览器标签中显示的页面标题现在应该是“关于我”，而不是“Astro”。

    你只是在你的 .astro 文件的两个部分分别定义然后使用了一个变量，而不是直接在 HTML 标签中输入文本。

  4. 使用同样的模式在 index.astro（主页）和 blog.astro（我的 Astro 学习博客）创建一个 pageTitle 变量。在这两个地方更新这些页面的 HTML，使你的页面标题与每个页面上显示的标题一致。

在 Astro 中编写 JavaScript 表达式

  1. 把下面的 JavaScript 添加到你的 frontmatter 的代码栅栏之间：

    (你可以为自己写一些代码，但本教程将使用以下例子)。

    src/pages/about.astro
    ---
    const pageTitle = "关于我";
    

    const identity = {
      firstName: "莎拉",
      country: "加拿大",
      occupation: "技术撰稿人",
      hobbies: ["摄影", "观鸟", "棒球"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
    ---

  2. 然后，在你的 HTML 模板现有的内容下面添加以下代码：

    src/pages/about.astro
    <p>以下是关于我的几个事实：</p>
    <ul>
      <li>我的名字是{identity.firstName}.</li>
      <li>我住在{identity.country}。我的职业是{identity.occupation}。</li>
      {identity.hobbies.length >= 2 &&
        <li>我的两个习惯：{identity.hobbies[0]}和{identity.hobbies[1]}</li>
      }
    </ul>
    <p>我的技能是：</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>

小测试

  1. .astro 文件的 frontmatter 是以下列方式书写的：

  2. 除了 HTML 之外，Astro 语法还允许你写：

  3. 什么时候你需要把 JavaScript 写在大括号里？

条件渲染元素

你也可以使用脚本变量来选择是否渲染你的 HTML <body>内容中的个别元素。

  1. 在你的 frontmatter 脚本中添加以下几行来定义变量：

    src/pages/about.astro
    ---
    const pageTitle = "关于我";
    

    const identity = {
      firstName: "莎拉",
      country: "加拿大",
      occupation: "技术撰稿人",
      hobbies: ["摄影", "观鸟", "棒球"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
    

    const happy = true;
    const finished = false;
    const goal = 3;
    ---

  2. 在你现有的段落下面添加以下几行。

    然后，在你的浏览器标签中检查实时预览，看看页面上显示的内容：

    src/pages/about.astro
    {happy && <p>我非常乐意学习 Astro！</p>}
    

    {finished && <p>我完成了这节教程！</p>}
    

    {goal === 3 ? <p>我的目标是在三天内完成。</p> : <p>我的目标不是 3 天。</p>}

  3. 在进行下一步之前，将你的修改提交到 GitHub。如果你想保存你的工作进度并更新你的实时网站，请随时这样做。

代码分析

以下 .astro 代码：

src/pages/about.astro
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "靴子";
const student = false;
---

对于以下 Astro 模板表达式，你可以预测一下对应 HTML 在浏览器中的显示什么？点击显示正确答案！

  1. <p>{operatingSystem}</p>

  2. {student && <p>我仍然在学校。</p>}

  3. <p>我有 {quantity + 8} 双{footwear}</p>

  4. {operatingSystem === "MacOS" ? <p>我在使用 Mac。</p> : <p>我没有使用 Mac。</p>}

任务清单

相关资源