1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【不具合解消】Astroにremark-link-cardを導入するとページ末尾にリンクカードが表示されたりひとつしか表示されなかったりする

Last updated at Posted at 2025-03-23

前提

環境
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,
    ],

解消けっk

元々の実装が間違っているのだろうかとか色々試行錯誤してしまいましたが、単純に順番の問題でした。
プラグインを追加するだけでOKと思っていたので、順番までは考えられてなかったです。
ひとまず無事解決できてよかった。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?