rehype-rewrite でリンクカードに data-pagefind-ignore 属性を付与する
サイト内検索に Pagefind を使用しているが、検索結果に remark-link-card-plus で生成したリンクカードの内容を含みたくなかった。
そこで、リンクカードに data-pagefind-ignore 属性を付与する方法を調べた。
rehype-rewrite とは
rehype-rewrite は、HAST を任意に書き換えできる rehype プラグインだ。
次のコマンドでインストールする。
npm install rehype-rewriteリンクカードに data-pagefind-ignore 属性を付与する
私は Astro を使用しているため、astro.config.mjs に次のように記述した。
import rehypeRewrite from "rehype-rewrite";
export default defineConfig({ // ... markdown: { rehypePlugins: [ [ rehypeRewrite, { selector: ".remark-link-card-plus__container", // @ts-expect-error rewrite: (node) => { node.properties["data-pagefind-ignore"] = ""; }, }, ], ], },});これで、リンクカードがこのように生成される。
<div class="remark-link-card-plus__container" data-pagefind-ignore> <!-- ... --></div>まとめ
- rehype-rewrite を使うと、HAST を任意に書き換えられる。
- Pagefind の検索結果に含めたくない要素には
data-pagefind-ignore属性を付与する。