本ブログでも実装している検索機能について紹介していきます。

ちょっとわかりずらいですが、
ヘッダーのこの部分をクリックすると、サイト内の記事を対象に検索をかける事ができます。

使用しているライブラリは、Pagefindというライブラリになります。
Pagefindは静的サイトに特化した軽量の検索ライブラリで、導入も簡体です。
静的なサイトであれば基本的にはどのようなサイトでも実装できます。
また、とにかく軽量なのが特徴的で全くストレスがかかりません。

導入方法

pagefindをインストールし、検索用ファイルを生成する

npm install pagefind

次に、Astro のビルド後に Pagefind CLI を実行するように、npm-scripts を記述します。

{
  "scripts": {
    "build": "astro build && pagefind --site dist"
  }
}

これで、npm run build コマンドを実行すると Astro によって生成された HTML ファイルの内容に基づいて、Pagefind で使用するインデックスファイルが生成されます。なお、生成されるインデックスは、HTML ファイルに指定した lang 属性の値に基づいて言語が判別されます。

コマンド実行後、CLI には以下のような結果が表示されます。

[Building search indexes]
Total: 
  Indexed 1 language
  Indexed 18 pages
  Indexed 2388 words
  Indexed 1 filter
  Indexed 0 sorts

Pagefind の UI を読み込み、インスタンスを作成する

次にPagefindのUIを読み込んでフロント側の設定をしていきます。

先ほど--site distにて指定したディレクトリ配下に pagefind というディレクトリが生成されます。
そこに Pagefind UI の CSS（pagefind-ui.css）と JS（pagefind-ui.js）が含まれています。

この CSS と JS を読み込んでから、new 演算子でインスタンスを作成するだけで完了です。

<link rel="stylesheet" href="/pagefind/pagefind-ui.css">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
  new PagefindUI({ element: "#search" });
});
</script>

これで、Pagefindの検索フォームが使用できるようになりました。

CLI で Pagefind のコマンド npx pagefind --site dist --serve、もしくは Astro であれば npx astro preview で、ローカルサーバを立ち上げて動作確認ができます

npx pagefind --site dist --serve

まとめ

PagefindのデフォルトUIの導入方法を解説しました。

HTMLファイルさえあれば軽量で見やすいサイト内検索が簡単に実装できるので、とても魅力的なライブラリだと思います。

オプションも豊富で、1ページに何件表示させるか、サムネイル画像の設定、検索対象や除外の指定、フィルターの設定、など様々設定をする事が可能です。

また、難易度は上がりますが、APIにアクセスする事もできるので、よりカスタマイズした機能を実装する事も可能です。

検索機能がついているだけでサイトのリッチ感が増すのでぜひ試してみてください！！

Pagefind：https://pagefind.app/docs/api/