タグ検索

(2024-03-31)

md ファイルに記録されたタグによる検索をします。

src/pages/tags/[tag].astro 作成

[tag].astro というファイルを作成します。

カッコに囲まれているのがミソのようで、動的に astro ファイルを作成します。

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogPost from '../../components/BlogPost.astro';

export async function getStaticPaths() {
  const allPosts = await Astro.glob('../posts/*/*.md');
  const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
  return uniqueTags.map((tag) => {
    const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
    return {
      params: { tag },
      props: { posts: filteredPosts },
    };
  });
}

const { tag } = Astro.params ;
const { posts } = Astro.props;
---
<BaseLayout pageTitle={tag}>
  <ol class="list-decimal mx-3">
    {posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
  </ol>
</BaseLayout>

ポイントは、

const allPosts = await Astro.glob('../posts/*/*.md');

私は、posts/aaa/*.md のようにして作成しているのでこのようになります。

src/pages/tags/index.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 = "タグによる検索";
---
<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;
  }
  .tag {
    margin: 0.25em;
    border: solid 1px #a1a1a1;
    border-radius: .2em;
    padding: .1em 0.5em;
    font-size: 1em;
    background-color: #F8FCFD;
  }
</style>

個別的なスタイルシートは極力する少なくしようと思っているのですが、astro のチュートリアルにあったので。

この段階でアドレスバーに、

http://localhost:4321/tags

と入力すると、タグ一覧が表示されます。

src/components/BlogPost.astro の作成

最初、このファイルを作成するのに苦労しました。

チュートリアルには記載されていない気がします。
ネット上をあちこち徘徊してやっとわかりました。

とても単純でした。

---
const {url, title, description} = Astro.props;
---

<li>
    <a href={url} class="text-sky-900 hover:text-sky-600 transition-all duration-300">{title}</a>
</li>

なんと簡単な。

url なんて記録してないよとか思いながら、でもこれは絶対に必要なのです。

ここではできる限り tailwind.css を使っています。

これで、タグ検索・全記事検索が可能になり、どんどん記事を書いてもなんとか目的の記事に辿り着くことはできるはずです。