Pagefind の基本仕様

Hyacker で使うにあたり留意する点

• JS ライブラリであり、React コンポーネントは用意されていない
  • 検索エンジンの本体は Go 言語、JS でラップされている
• HTML を読み込んでインデックスを生成する
  • インデックスはページが増える都度、HTML が変更される都度、生成が必要
  • ソースとなるマークダウンファイルからのインデックス生成はできない

ビルド

処理は以下の順序

1. Astro のビルド＝HTML の生成
2. pagefind の JS を dist に出力
3. pagefind オブジェクトが検索インデックスを生成

開発での動作確認

pnpm run dev ではダミーの結果を表示する

pnpm run builg && pnpm run preview でプレビューモードを起動すれば、実際の検索結果を確認できるようになる

メタデータ

https://pagefind.app/docs/metadata/

検索結果カードで表示する項目には、 data-pagefind-meta プロパティでタグ付けする

メタデータに含まれていないと、検索結果オブジェクトにデータが存在しない。

→ 検索結果カードに出力できない

「回答」メタデータの付与