タイトルの通り、Nuxt のドキュメントを参考にして、検索機能を追加しました。URL アドレスは /search です。関連するコードを記録しておきます。
components/<Search /> に配置するか、独自のページを作成するかは選択できますが、私は後者を選びました。
/pages/search.vue というページテンプレートを作成します。
<template>
<div>
<HeaderMe />
<div class="wrapper">
<PageSidebar />
<div class="archive">
<h2>{{ article.attributes.title }}</h2>
<div class="article-content markdown-body" v-html="article.html"></div>
<div class="search">
<input v-model="searchQuery" type="search" autocomplete="off" placeholder="記事のキーワード" />
<ul v-if="articles.length">
<li v-for="article of articles" :key="article.slug">
<NuxtLink :to="article.path+'/'">{{ article.title }}</NuxtLink>
<!-- URLアドレスの後ろに/を追加して、サイト全体のURL形式を設定し、混乱を防ぎます -->
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import HeaderMe from "@/components/HeaderMe";
import PageSidebar from '@/components/PageSidebar';
export default {
components: {
HeaderMe,
PageSidebar
},
data () {
return {
searchQuery: '',
articles: []
}
},
async asyncData () {
// search.md内のデータを呼び出す
const article = await import(`~/content/search.md`);
return {
article
};
},
watch: {
async searchQuery (searchQuery) {
if (!searchQuery) {
this.articles = []
return
}
this.articles = await this.$content('posts') // postsは記事が格納されているフォルダの名前です
.limit(10)
.search(searchQuery)
.fetch()
}
}
}
</script>
スタイルの記述についてはあまり重要ではないので、以下に記載します。
CSSコード
.wrapper {
min-height: 300px;
.archive {
padding: 25px 2% 15px;
.article-content {
font-size: inherit;
line-height: 1.8;
color: inherit;
margin-top: 20px;
}
.search {
margin-top: 16px;
input {
width: 100%;
background-color: #edf2f7;
color: #2f495e;
outline: none;
border: none;
border-radius: 30px;
padding: 4px 20px;
box-sizing: border-box;
transition: all 0.1s linear;
&:focus {
box-shadow: 3px 2px 10px rgb(0 0 0 / 20%);
}
}
ul {
margin-top: 6px;
list-style: none;
li {
a {
display: block;
padding: 6px 14px;
line-height: 1.6;
transition: all 0.2s linear;
&:hover {
background: #edf2f7;
}
}
}
}
}
}
}
@media (max-width: 520px) {
.wrapper {
.archive {
.search {
ul {
li {
a {
border-bottom: 1px solid #ddd;
}
}
}
}
}
}
}