Nuxt/コンテンツを使用してNuxtブログのタグを作成する

イントロ
最近、私はNuxtのより新しいバージョンを使っている私のウェブサイトを刷新して、私のためにNuxt内容を使うことに決めましたBlog . しかし、メインのブログやプロジェクトのページを作成しながら、私はかなり一般的な問題、タグに遭遇した.
あなたは、私が圧倒的であることができるブログ柱のリストを得るメインブログページの最初の土地で、特に、私がまだPaginationを実装していない時から、あなたが見ます.
私のための迅速な代替は、あなたが興味のあるトピックに基づいて結果をフィルタアウトできるようにタグを作成することでした.

方法
私の現在の設定では、私は、コンテンツフォルダにあるすべてのブログをリストする責任があるブログの1つの主要なコンポーネントを持っています.

<!-- BlogList.vue -->
<template>
<!-- the list of blogs -->
  <ul class="...">
  <!-- the item/post wrapper -->
    <li
      v-for="blog of blogs"
      :key="blog.slug"
     ...
    >
      <NuxtLink :to="`/blog/${blog.slug}`">
        <img />
        <span class="sr-only">Link to the blog post</span>
      </NuxtLink>

      <div class="flex items-center px-4 pt-3 mb-2">
        ...
        <div class="flex items-center">
          <div v-for="(tag, idx) of blog.tags" :key="idx">
            <!-- The Tag component -->
            <UITag :tag="tag"></UITag>
          </div>
        </div>
      </div>
        ...
      </div>
    </li>
  </ul>
</template>

このコンポーネントはul これは、ブログ投稿のラッパー要素を保持します.それから、私はブログオブジェクトを通してループして、リストアイテム(別名ブログ柱)を示します.私が印刷している日付の直後にtag これは別のコンポーネントです.このタグコンポーネントは、文字列を文字列として受け取ります.tag そして、それはタグのスラグです.これがどのように働くかについて見るために、部品自体を見てみましょう.

<!-- Tag.vue -->
<template>
  <NuxtLink class="..." :to="`/blog/tags/${tag}`">
    <IconTag class="text-kt-ice-white dark:text-text-kt-dark inline" />
    {{ tag }}
  </NuxtLink>
</template>

このコンポーネントはリンクであり、ユーザーは特別なルートに移動します/blog/tags/#tag . 最後の部分は、以前にコンポーネントに渡された実際の支柱です.
この意味で、私は新しいフォルダを下に作成しましたBlog 既に存在するフォルダ/ページTags . これは動的ページです(スラッグが静的な文字列ではなく毎回変更されることを意味します).私は_slug.vue ファイルをTags 私が通過した特定のタグでブログを表示する責任があるフォルダ.

<!-- Tags -> _slug.vue -->
<section class="container mx-auto mt-10">
  <h1 class="text-2xl lg:text-4xl font-bold text-center">
    Posts tagged with
    <span class="text-kt-purple font-bold">#{{ slug }}</span>
  </h1>

  <div class="text-xl lg:text-2xl underline mt-4 text-center">
    <NuxtLink to="/blog"> All posts </NuxtLink>
  </div>

  <blog-list v-if="articles.length" :blogs="articles" />

  <div v-else class="my-6">
    <h2 class="text-xl lg:text-2xl text-center">
      Whoops... It seems that there are no articles with #{{ slug }} tag. 😥
    </h2>
  </div>
</section>

ここで使用するのと同じコンポーネントを使用します/blog ルートblog-list 私はブログのリストを再レンダリングすることができますが、今回は私はすべてのブログをフィルタリングされている特定のタグを持っているものを得るためにFront Matter .

// _slug.vue script
async asyncData({ $content, params }) {
// get the articles where the current tag is included in
// their tag front matter data and their status is published.
const articles = await $content('blog')
    .where({
    tags: { $contains: params.slug },
    status: 'published',
    })
    .fetch()

const slug = params.slug

return {
    articles,
    slug,
}
}

使用content API 私はブログの記事をフィルタリングすることができますし、現在のタグは、その前の問題ブロックでタグの宣言と一致する記事を取得することができますし、公開されて!

NOTE: the published is another Front Matter option I added so I can freely create posts whenever I do have an idea or inspiration and I can still push the content in git without them being published, if they are unfinished.

そして、それ!今私のブログのリスト内の特定のタグを検索することができますし、簡単にアクセスするためにそれらをフィルタリングすることができます!
結果:

Nuxtコンテンツモジュールについての詳しい情報を見つけることができますhere !
次回まで✌