跳转到内容

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

现在你有了一个带有 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 表达式

段落标题 在 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>}