编写标签索引页面

现在你已经为每个标签创建了单独的页面，让我们来创建链接到这些页面的索引页面。

要将标签索引页面添加到你的网站，你可以在 src/pages/tags.astro 中创建一个新文件。

但是，由于你已经有了 /tags/ 目录，你可以利用 Astro 中的另一种路由模式，并将所有与标签相关的文件放在一起。

之前你已经使用 map() 从数组中提取并显示了一个列表中的项目。现在，你想要定义一个包含所有标签的数组，并在页面上以列表的形式显示它们，那么代码会是什么样子呢？

---
import BaseLayout from '../../layouts/BaseLayout.astro';
const tags = ["astro", "successes", "community", "setbacks", "learning in public"];
const pageTitle = "Tag Index";
---
<BaseLayout pageTitle={pageTitle}>
  <ul>
    {tags.map((tag) => <li>{tag}</li>)}
  </ul>
</BaseLayout>

你可以这样做，但是每次在未来的博客文章中使用新标签时，你都需要回到这个文件中更新数组。

幸运的是，你已经知道了一种方法，可以一行代码获取你的 Markdown 文件中的所有数据，然后返回所有标签的列表。

1. 在 src/pages/tags/index.astro 中，添加以下代码行到 Frontmatter Script 中，这样你的页面就可以访问每个 .md 博客文章文件的数据了。

   查看代码

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   const allPosts = await Astro.glob('../posts/*.md');
   const pageTitle = "Tag Index";
   ---

2. 接下来，将以下 JavaScript 代码行添加到你的页面组件中。这与我们在 src/pages/tags/[tag].astro 中使用的代码是相同的，用于返回所有标签的列表。

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   const allPosts = await Astro.glob('../posts/*.md');
   const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
   const pageTitle = "Tag Index";
   ---

这次不再使用无序列表来创建项目，而是为每个项目创建一个 <p>，并将其放在一个 <div> 内。这个方式应该很熟悉！

1. 将以下代码添加到你的组件模板中：

     <BaseLayout pageTitle={pageTitle}>
       <div>{tags.map((tag) => <p>{tag}</p>)}</div>
     </BaseLayout>

   在你的浏览器的预览中，确认你能看到标签的列表。

2. 为了使每个标签链接到自己的页面，将以下 <a> 链接添加到每个标签名称中：

   <BaseLayout pageTitle={pageTitle}>
     <div>
       {tags.map((tag) => (
         <p><a href={`/tags/${tag}`}>{tag}</a></p>
       ))}
     </div>
   </BaseLayout>

1. 将以下 CSS 类添加到你的 <div> 和每个生成的 <p> 中。注意：Astro 使用 HTML 语法添加类名！

   <BaseLayout pageTitle={pageTitle}>
   <div class="tags">
     {tags.map((tag) => (
       <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
     ))}
   </div>
   </BaseLayout>

2. 通过将以下 <style> 标签添加到页面中，定义这些新的 CSS 类：

   <style>
     a {
       color: #00539F;
     }
   
     .tags {
       display: flex;
       flex-wrap: wrap;
       margin: 0 auto;
     }
   
     .tag {
       margin: 0.25em;
       border: dotted 1px #a1a1a1;
       border-radius: .5em;
       padding: .5em 1em;
       font-size: 1.15em;
       background-color: #F8FCFD;
     }
   </style>

3. 在 localhost:3000/tags 上检查你的浏览器的预览，确认这些新的样式正确应用了，并且页面上的每个标签都有链接到自己独立标签页面的功能。

你的新页面应该如下所示：

---
import BaseLayout from '../../layouts/BaseLayout.astro';
const allPosts = await Astro.glob('../posts/*.md');
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
const pageTitle = "Tag Index";
---
<BaseLayout pageTitle={pageTitle}>
  <div class="tags">
    {tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>
</BaseLayout>
<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>

现在，你可以导航到 localhost:3000/tags 并查看此页面。通过这个页面，你可以点击链接进入各个标签页面。

但是，你仍然需要让访问者在其他页面也能够发现这个页面。

1. 在你的 Navigation.astro 组件中，添加一个链接到这个新的标签索引页面。

   Show me the code

   <a href="/">首页</a>
   <a href="/about/">关于</a>
   <a href="/blog/">博客</a>
   <a href="/tags/">标签</a>

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <p><em>{frontmatter.description}</em></p>
  <p>{frontmatter.pubDate.slice(0,10)}</p>

  <p>Written by: {frontmatter.author}</p>

  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />

  <div class="tags">
    {tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>

  <slot />
</BaseLayout>
<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>

    <div class="tags">
      {frontmatter.tags.map((tag) => (
        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
      ))}
    </div>

要检查你的工作，或者如果你只想要完整、正确的代码复制到 MarkdownPostLayout.astro 中，这是你的 Astro 组件应该的样子：

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <p><em>{frontmatter.description}</em></p>
  <p>{frontmatter.pubDate.slice(0,10)}</p>

  <p>Written by: {frontmatter.author}</p>

  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />

  <div class="tags">
    {frontmatter.tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>

  <slot />
</BaseLayout>
<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>

• Astro 中的静态路由