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属性を付与する。
