pagefindを試す

Created: 2025/04/13

pagefind実装メモ

pagefindのレシピ

1,まずはpagefindをインストール

npm install pagefind

2,ビルドを開始してdistを作成

npm run build

3,pagefind/を作成

npx pagefind --source dist

4,pagefindをpublic/下に配置

cp -r dist/pagefind public/pagefind

5,Serach.astroを作成

---
import "@pagefind/default-ui/css/ui.css";
---
<link rel="stylesheet" href="@pagefind/default-ui";
<div class="search"></div>
 <script>
  import { PagefindUI } from "@pagefind/default-ui";
  new PagefindUI({
  element: ".search",
  pageSize:10, 
  showImages:false; //サムネイル画像の有無
 });
</script>
<style>
 .search {
   transition-duration: 300ms;
   background: var(--bg-color);
   border-radius: 10px;
   padding: 8px;
 }
 .serach:not(:has(.pagefind-ui__hidden)){
   border-radius:16px;
 }
</style>

6,後は表示させたい場所にインポート(例)

---
import Search from "../components/Search.astro";
---
<Search/>

但し、このままでは全ページの単語が検索結果に含まれてしまうので、検索に含ませたくない場所にはdata-pagefind-ignore="all"を付与して、検索から除外する必要がある

<div data-pagefind-ignore="all">