Nuxt.jsブログに全文検索機能を追加する方法

2021-08-31

地獄の釜が開かれた

本業の方は、納期が2ヶ月近く圧縮されました。当初の計画でもショートしていたので当然間に合うはずもありませんが、サラリーマンなのでそうも言ってられない。言いますけど…。このまま進むと私を含めて全員が炎上プロジェクに焼かれて朽ちてしまいます。無駄な死体を増やさないため仕様書を毎晩深夜まで作り続けるのですが非常に苦痛を伴います。

地獄の釜の中身も煮詰まって結晶化してしまいそうな日程で進み始めましたね…合掌。我々末端社員にできることは祈って完全燃焼して再構築されるまで、現状を報告しつつ少しずつ前に進めじっと堪え耐えることだけです…。

はじめに

さて、今日はNuxt.jsブログの続きを作っていきます。 Category分けとかにも応用できそうなので、記事の全文機能を作っていきます。

githubに今回作ったプロジェクト丸っと上げてます。

github:kokodev

commit指定してDLする場合はこれでいけますかね。

git clone https://github.com/kenpos/kokodev.git
cd kokodev
git checkout 224b6810ad0e50530475a2128e411281aeb0e9ae

作り方

pages/index.vue

template

まずはTOPページに検索バーを追加していきましょう。入力した値はScriptで取得して使用します。

<template>
...
<input id="search" v-model="q" placeholder="Search..." />
~~
記事一覧
~~~
...
</template>

Script

記事コンテンツの取得し、先程作成したQuery用の入力欄の値で検索します。あまり凝ったこともしていないのですが、こうなりました。

Scriptの全文はこちら。

<script>
export default {
 async asyncData ({ $content,route }) {
   const q = route.query.q
   let query = $content('', { deep: true })
   .sortBy('date', 'desc')
   if (q) {
      query = query.search(q)
   }
   const articles = await query.fetch()
   return {
      q,
      articles
   }
  },
  watch: {
    q () {
      this.$router.replace({ query: this.q ? { q: this.q } : undefined }).catch(() => { })
    }
  },
  watchQuery: true
}

</script>

記事を階層構造になっているもの含めて全取得して、タグ情報にある日付順にソートしています。

let query = $content('', { deep: true }).sortBy('date', 'desc')

取得した記事の中から、query.searchで指定したワードにマッチするものを取得します。もしtitleから取得したい場合は下記のように書くことが出来ます。

quety = query.search('title',q)

watch:{}

内で、Searchバーの中身の変化を見て随時取得し検索するようにしています。

記事の中身

1.md ,2.md ,3.mdみたいな名前で適当に書いています。

例えば1.mdであればこのように書いています。



Github

実行結果

このように作ることで検索画面が出来上がりました。

まとめ

ネット検索してもあまり良いものがヒットせずいろんなサイトの記載を混ぜて試してましたが良い感じに動いてよかったです。