前提
環境 | 値 |
---|---|
OS | Mac(Intel) |
IDE | VisualStudioCode |
Astroテンプレート | Fuwari |
事象
AstroテンプレートのFuwariにremark-link-cardを導入したところ、下記の事象が発生した。
// astro.config.mjs
markdown: {
remarkPlugins: [
remarkMath,
remarkReadingTime,
remarkExcerpt,
remarkGithubAdmonitionsToDirectives,
remarkDirective,
remarkSectionize,
parseDirectiveNode,
[remarkLinkCard, { // <- プラグイン追加
cache: false,
shortenUrl: true,
}],
],
- 元のリンクテキストが残ってしまう
- リンクカードがひとつしか表示されない
- markdownで定義した構造を無視して末尾にリンクカードが出力される
解消できた方法
remarkSectionizeによってMarkdownの構造が書き換えられていることが原因だった。
プラグインの記述順をremarkSectionizeよりも手前に記述することで解消された。
// astro.config.mjs
markdown: {
remarkPlugins: [
remarkMath,
remarkReadingTime,
remarkExcerpt,
remarkGithubAdmonitionsToDirectives,
remarkDirective,
[remarkLinkCard, { // <- 順番をremarkSectionizeより手前に書く
cache: false,
shortenUrl: true,
}],
remarkSectionize,
parseDirectiveNode,
],
元々の実装が間違っているのだろうかとか色々試行錯誤してしまいましたが、単純に順番の問題でした。
プラグインを追加するだけでOKと思っていたので、順番までは考えられてなかったです。
ひとまず無事解決できてよかった。