11ty + Pagefind でお手軽全文検索

必要なモノ

• Node.js
  ローカル PC で最新版が動作するようにします。
• Eleventy ここでは「Notion を 11ty の CMS として使う」で作成したサンプルサイトを使います。

簡単な手順

eleventy-base-blog/content/ に search.njk を作成

---js
const eleventyNavigation = {
	key: "Search",
	order: 99
};
---

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

eleventy-base-blog/eleventy.config.js に以下を追加 ※1

export default async function (eleventyConfig) {
  // Notion から記事を取得
  ...
	// PageFind
	const { execSync, spawn } = await import("child_process");
	eleventyConfig.on("eleventy.after", () => {
		execSync(`npx -y pagefind --site _site`);
	});

eleventy-base-blog/_data/meatada.js の以下の行を変更（日本語検索が有効になる）

language: "en",
↓
language: "ja-JP",

実行

./serve.sh # Notion 記事を再取得する場合

npm start # 取得済みの記事データからビルド（Notion にアクセスしない）する場合

ミミィ

ページ最上部のナビゲーションバーの右端に「Search」リンクができているはずヨ！
開くと検索窓があるから色々やってみなさいネ！

Tips とか

ローカライズ

前述の言語設定によって Pagefind が出すメッセージなどが自動的に日本語化されますが、例によって少しおかしな日本語になっているので修正したい場合は search.njk を次のように変更します。

new PagefindUI({ element: "#search", showSubResults: true, });
↓
new PagefindUI({
    element: "#search",
    showSubResults: true,
    translations  : {
        placeholder  : '記事を検索 ...',
        clear_search : 'クリア',
        load_more    : '結果をさらに表示',
        zero_results : '「[SEARCH_TERM]」に一致する記事は見つかりませんでした',
        many_results : '「[SEARCH_TERM]」の検索結果（[COUNT] 件）',
        one_result   : '「[SEARCH_TERM]」の検索結果（[COUNT] 件）',
        searching    : '「[SEARCH_TERM]」を検索しています...',
    },
});

他のページにあるフォームから検索

前述の HTML + JS では、検索窓の直下に検索結果が表示されるようになっています。これを使って各ページに検索窓を設置しようとするとコンテンツと同じページに検索結果が表示されてちょっと不格好なので、検索ページに飛んでから検索が行われるようにします。

eleventy-base-blog/_includes/home.njk の「ここを削除してね！」って書いてある部分にフォームを設置してみます。

<div class="message-box">
  <form action="/search/">
    <input type="text" name="q" placeholder="記事を検索..." />
  </form>
</div>

次に、検索ページ eleventy-base-blog/content/search.njk がこのフォームからのクエリを受け取ることができるようにします。

<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
  const url = new URL(window.location.href); // 追加
  window.addEventListener("DOMContentLoaded", (event) => {
    const search = new PagefindUI({ // 変更
      element: "#search",
      (省略)
    });
    search.triggerSearch(url.searchParams.get("q")); // 追加
  });
</script>

実行するとトップページに検索窓が表示されます。