アプリケーションに直接コピーできるこれらの実装例をみていきましょう。
使い方
asyncData
export default { async asyncData({ $content, params }) { const article = await $content('articles', params.slug).fetch() return { article } }}機能
検索
watchを使って検索入力コンポーネントを追加します。
<template> <div> <input v-model="query" type="search" autocomplete="off" /> <ul v-if="articles.length"> <li v-for="article of articles" :key="article.slug"> <NuxtLink :to="{ name: 'blog-slug', params: { slug: article.slug } }">{{ article.title }}</NuxtLink> </li> </ul> </div></template><script>export default { data () { return { query: '', articles: [] } }, watch: { async query (query) { if (!query) { this.articles = [] return } this.articles = await this.$content('articles') .only(['title', 'slug']) .sortBy('createdAt', 'asc') .limit(12) .search(query) .fetch() } }}</script>search documentationを参照してください
ページネーション
前後のページへのリンクはsurroundメソッドを使って追加します。
<template> <div> <NuxtLink v-if="prev" :to="{ name: 'blog-slug', params: { slug: prev.slug } }"> {{ prev.title }} </NuxtLink> <NuxtLink v-if="next" :to="{ name: 'blog-slug', params: { slug: next.slug } }"> {{ next.title }} </NuxtLink> </div></template><script>export default { async asyncData({ $content, params }) { const [prev, next] = await $content('articles') .only(['title', 'slug']) .sortBy('createdAt', 'asc') .surround(params.slug) .fetch() return { prev, next } }}</script>surround documentationを参照してください
目次
tocの配列をループさせて目次を追加し、id を使って目次にリンクさせ、text を使ってタイトルを表示します。タイトルのスタイルを変えるために depth を使うことができます。
<template> <ul> <li v-for="link of article.toc" :key="link.id" :class="{ 'toc2': link.depth === 2, 'toc3': link.depth === 3 }" > <NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink> </li> </ul></template><script>export default { async asyncData({ $content, params }) { const article = await $content('articles', params.slug) .fetch() return { article } }}</script>Table of Contents documentationを参照してください