全文検索（Pagefind）

← 目次に戻る

概要

block-search-modal は、Pagefind を利用した全文検索モーダルを提供するプラグインです。ビルド時に静的HTMLからインデックスを自動生成し、WebAssembly ベースで高速な日本語検索を実現します。

導入手順

1. pagefind のインストール

npm install -D pagefind

2. .eleventy.js にフックを追加

const { execSync } = require("child_process");
// eleventy.after でビルド完了後にインデックスを生成
eleventyConfig.on("eleventy.after", async ({ runMode }) => {
  if (runMode === "serve" || runMode === "watch") return;
  execSync("npx pagefind --site _site --silent", { stdio: "inherit" });
});

3. レイアウトにモーダルを配置

{# base.njk の </body> 前に追加 #}
{% from "block-search-modal/block-search-modal.njk" import searchModal %}
{{ searchModal() }}

4. 検索ボタンの配置

{% from "block-search-modal/block-search-modal.njk" import searchTrigger %}
{{ searchTrigger() }}

ヘッダーやナビゲーション内に配置してください。

操作方法

インデックス対象の制御

検索結果に含めたくない要素には data-pagefind-ignore 属性を追加します。

<nav data-pagefind-ignore>
  <!-- この中のテキストは検索対象外 -->
</nav>

エンジンでは以下の要素にデフォルトで data-pagefind-ignore が設定されています：

• ヘッダーナビゲーション（layout-header-nav）
• フッター（layout-footer-kinetic）
• 目次（TOC フィルター出力）

注意事項

• --serve モード（開発サーバー）ではインデックスが自動更新されません。検索内容を最新にするには npm run build を実行してください。
• Pagefind は日本語のステミング（語幹抽出）に対応していないため、完全一致での検索となります。

↑ 目次