添加关于你的动态内容

既然你已经有了一个包含 HTML 内容的多页面网站，是时候添加一些动态 HTML 了！

准备好去……

在 frontmatter 中定义你的页面标题，并在 HTML 中使用它
条件化地显示 HTML 元素
添加一些关于你的内容

任何 HTML 文件都是合法的 Astro 语言。但是，使用 Astro 你可以做的比常规 HTML 更多！

定义和使用变量

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

---
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
    <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>
</html>

在 frontmatter 脚本中，于代码围栏之间添加下面这行 JavaScript 代码
src/pages/about.astro
```
---
const pageTitle = "About Me";
---
```

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

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
    <title>{pageTitle}</title>
  </head>
  <body>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
    <h1>About Me</h1>
    <h1>{pageTitle}</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>
</html>

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

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

你刚刚在 .astro 文件的两个部分中分别定义并使用了一个变量，而不是直接在 HTML 标签中输入文本。
使用相同的模式，在 index.astro（“Home Page”）和 blog.astro（“My Astro Learning Blog”）中创建并使用 pageTitle 变量。更新这些页面的 HTML，让页面标题和每个页面上显示的标题相匹配。

在 Astro 中编写 JavaScript 表达式

在 frontmatter 中，于代码围栏之间添加以下 JavaScript 代码

（你可以根据自己的情况自定义代码，但本教程将使用以下示例。）

---
const pageTitle = "About Me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Technical Writer",
  hobbies: ["photography", "birdwatching", "baseball"],
};

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

然后，将以下代码添加到你的 HTML 模板中，放在现有内容的下方

<p>Here are a few facts about me:</p>
<ul>
  <li>My name is {identity.firstName}.</li>
  <li>I live in {identity.country} and I work as a {identity.occupation}.</li>
  {identity.hobbies.length >= 2 &&
    <li>Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}</li>
  }
</ul>
<p>My skills are:</p>
<ul>
  {skills.map((skill) => <li>{skill}</li>)}
</ul>

知识测验

一个 .astro 文件的 frontmatter 是用什么编写的
1. HTML
2. YAML
3. JavaScript
除了 HTML，Astro 语法还允许你包含
1. JavaScript 逻辑运算符、表达式和函数
2. YAML
3. Markdown
什么时候需要将 JavaScript 写在花括号里？
1. 当你不确定它是否正确时。
2. 在 Astro 组件的 HTML 模板部分内。
3. 在 Astro 组件的代码围栏之间。

条件化渲染元素

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

将以下几行添加到你的 frontmatter 脚本中以定义变量

---
const pageTitle = "About Me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Technical Writer",
  hobbies: ["photography", "birdwatching", "baseball"],
};

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

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

将以下几行添加到现有段落的下方。

然后，检查浏览器标签页中的实时预览，看看页面上显示了什么

{happy && <p>I am happy to be learning Astro!</p>}

{finished && <p>I finished this tutorial!</p>}

{goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}

在继续之前，将你的更改提交到 GitHub。任何时候你想保存你的工作并更新你的线上网站时，都可以这样做。

分析模式

给定以下 .astro 脚本

---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "boots";
const student = false;
---

对于每个 Astro 模板表达式，你能预测将发送到浏览器的 HTML（如果有的话！）是什么吗？点击揭晓你是否正确！

{operatingSystem}

Linux
{student && I am still in school.}

不会显示任何内容，因为 student 的计算结果为 false。
I have {quantity + 8} pairs of {footwear}

I have 11 pairs of boots
{operatingSystem === "MacOS" ? I am using a Mac. : I am not using a Mac.}

I am not using a Mac.

清单

我可以在 .astro 文件中定义值和使用值。
我可以条件化地渲染 HTML 元素。