跳转到内容

创建一个可复用的导航组件

既然你的 Astro 站点的多个页面中都有相同的 HTML，现在是时候用一个可复用的 Astro 组件来替换那些重复的内容了！

准备好去……

  • 为组件创建一个新文件夹
  • 构建一个 Astro 组件来显示你的导航链接
  • 用一个新的、可复用的导航组件替换现有的 HTML

创建一个新的 src/components/ 文件夹

标题为“创建一个新的 src/components/ 文件夹”的部分

为了存放那些将生成 HTML 但不会成为你网站上新页面的 .astro 文件，你需要在你的项目中创建一个新文件夹：src/components/。

创建一个导航组件

标题为“创建一个导航组件”的部分

  1. 创建一个新文件：src/components/Navigation.astro。

  2. 从任何页面的顶部复制用于在页面之间导航的链接，并将它们粘贴到你的新文件 Navigation.astro 中

    src/components/Navigation.astro
    ---
    ---
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>

导入并使用 Navigation.astro

标题为“导入并使用 Navigation.astro”的部分

  1. 回到 index.astro 并在代码块内导入你的新组件

    src/pages/index.astro
    ---
    import Navigation from '../components/Navigation.astro';
    import "../styles/global.css";
    

    const pageTitle = "Home Page";
    ---

  2. 然后在下方，用你刚刚导入的新导航组件替换现有的导航 HTML 链接元素

    src/pages/index.astro
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
    <Navigation />

  3. 在浏览器中检查预览，你会发现它看起来应该完全一样……而这正是你想要的！

你的网站包含的 HTML 和以前一样。但现在，这三行代码是由你的 <Navigation /> 组件提供的。

亲自尝试 - 将导航添加到网站的其余部分

标题为“亲自尝试 - 将导航添加到网站的其余部分”的部分

使用相同的方法，在你网站的另外两个页面（about.astro 和 blog.astro）中导入并使用 <Navigation /> 组件。

别忘了：

  • 在组件脚本的顶部，代码块内部，添加一个导入语句。
  • 用导航组件替换现有代码。

知识测验

标题为“测试你的知识”的部分

  1. 当你在多个页面上有重复的元素时，你可以这样做

  2. Astro 组件是

  3. 当你...时，Astro 组件会自动在你的网站上创建一个新页面

清单

标题为“核对清单”的部分

相关资源

标题为“资源”的部分
贡献 社区 赞助