返回介绍
文江博客 开发文档 Astro 中文文档 v20240605 文章详情

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

发布于 2024-06-05 21:19:57 字数 9174 浏览 0 评论 0 收藏 0

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

准备好…

  • 在 frontmatter 中定义你的页面标题，并在你的 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>}

任务清单

相关资源

Tutorials

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文