Nuxtjs

検索機能が追加されました。右側のやつです。 実装方法 このブログページ自体は nuxt/contentで動いているため、nuxt/content の全文検索機能を用いて実装しました。全文検索自体はドキュメントを読めば簡単にできるので、content の良さを実感しています。 工夫点 もちろんタグ検索ですねー。元々ブログ記事にはタグを埋め込むようにしていたので、それで検索をかけています。タグの埋め込みイメージは下のような感じです。yml のため配列で格納するのも考えたのですが、こちらの形式の方が、全文検索のさいに扱いやすかったので、こちらで保存しています。 tags: Golang CloudRun 全てのタグ自体は、非同期に記事を全検索書けてマップでタグの値を数えて、DOM の値を更新するという風にしています。Vue では Map の変更が上手く反映されなかったので、このように最後に配列に push していくという形式を取っています。そんなに大量に記事が増えることもないと思うので、サーバーレンダリングでも良い気はしますが、一応非同期に行っています。手間がかかった割に地味な機能なんですよね。。。 const tags = reactive<TagCount[]>([]); onMounted(() => { context.root .$content(queryName) .only("tags") .fetch<Promise<{ tags: string }[]>>() .then((resps) => { const tagMap = new Map<string, number>(); resps.map((resp) => { _ = resp.tags?.split(" ").forEach((tag) => { tagMap.set(tag, (tagMap.get(tag) || 0) + 1); }); }); tagMap.forEach((num, tag) => { tags.push({ name: tag, count: num, }); }); }); }); はまったこと はまったことは、クエリが変わった際に発火するようにした asyncData の検索結果が、サーバーレンダリング時とクライント実行時で結果が変わったことです。...

なぜ？ nuxt の sitemap プラグインでは pages 配下のものは自動でパスとして登録してくれます。 しかし、pages/_id.vueやpages/_slug.vueのような動的にパスがきまるものは自動で登録することができません。そのため、content などを使用している場合は、自身んで登録する必要が出てきます。 方法 content の中身が増える度に自分で routes に登録してもいいと思いますが、プログラマーっぽくないので、関数を使っていきます。 今回僕は/blog/_slug.vueに対しての操作を行ったため、nuxt.config.js に以下のように記載しました。content の api で slug 取得して、配列で URL 返しているだけですねー。 sitemap: { hostname: 'https://mobtown.jp', gzip: true, routes: async () => { const { $content } = require('@nuxt/content'); const files = await $content('article').only(['slug']).fetch(); return files.map((f) => `/blog/${f.slug}`); }, }, 生成されたものは当然 https://mobtown.jp/sitemap.xml からみることができます。 感想 content の api が結構有能に感じました。 関係ないですが、wsl2 上の emacs で書いた記事だったので結構しんどかったです。