Nuxt Contentでタグをフロントマターを使って設定してみます。
tag-sample.md
---
title: タグのサンプル
description:
tags:
- tag-1
- tag-2
---このように設定すると
article.tags
// => ["tag-1", "tag-2"]と取り出せるようになります。
タグ用のコンポーネントを追加
TagCollection.vueを追加します。
components/
TagCollection.vueTagCollection.vue
<template>
<ul>
<li v-for="tag in tags" :key="tag">{{ tag }}</li>
</ul>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class TagCollection extends Vue {
@Prop({ default: [] })
tags: Array<string> | undefined
}
</script>タグを表示する
記事の詳細ページにタグを表示します
pages/articles/_slug.vue
<template>
<main>
<h1 class="title">{{ article.title }}</h1>
<TagCollection :tags="article.tags" />
<nuxt-content :document="article" />
</main>
</template>
<script lang="ts">
import TagCollection from '~/components/TagCollection.vue'
・・・
