跳转到内容

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

现在你的 Astro 站点的多个页面上都有相同的 HTML 代码,是时候用一个可复用的 Astro 组件替换这些重复的内容!

准备好…

  • 为组件创建一个新的文件夹
  • 构建一个 Astro 组件来显示导航链接
  • 用这个导航组件替换现有的 HTML 代码

创建 src/components/ 文件夹

段落标题 创建 src/components/ 文件夹

你需要在项目中创建一个新的文件夹 src/components/ 来容纳 .astro 文件,它们会被用来生成 HTML 代码,但不会成为网站上的新页面。

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

  2. 将任意页面顶部的导航链接复制并粘贴到你的新文件 Navigation.astro 中:

    src/components/Navigation.astro
    ---
    ---
    <a href="/">首页</a>
    <a href="/about/">关于</a>
    <a href="/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 = "首页";
    ---
  2. 然后,在下方用你刚刚导入的新导航组件替换现有的导航 HTML 链接元素:

    src/pages/index.astro
    <a href="/">首页</a>
    <a href="/about/">关于</a>
    <a href="/blog/">博客</a>
    <Navigation />
  3. 在浏览器中预览,它应该看起来完全相同……这就是你想要的!

你的站点生成了与之前完全相同的 HTML 代码。但现在,这三行代码由你的 <Navigation /> 组件提供。

自己试一试 - 在网站的其余页面上添加导航

段落标题 自己试一试 - 在网站的其余页面上添加导航

使用相同的方法在你的网站的另外两个页面(about.astroblog.astro)中导入并使用 <Navigation /> 组件。

不要忘记:

  • 在组件脚本的顶部,也就是代码块内添加一个导入语句。
  • 用导航组件替换现有的代码。
  1. 当元素在多个页面上重复出现时,你可以:

  2. Astro 组件是:

  3. 当你……的时候 Astro 组件会自动在你的站点中创建一个新的页面: