リンクカード表示に対応#

RiperBool -

RiperBool -

blog.riperbool.com

↑こんな感じに、カード形式でリンクを表示させるやつです。

こちらを参考にさせていただきました。

Fuwariでremark-link-cardを使用してリンクカードを実装する - Yuma Shintani

Fuwariでremark-link-cardを使用してリンクカードを実装してみました

www.y-shin.net

CAUTION

astro.config.mjsにremarkLinkCardを設定する際、remarkPlugins[]の配列の末尾にremarkLinkCardを追加するとバグってしまうようです。

リンクカードが記事の途中ではなく、記事の末尾に表示されてしまいます。

プラグインの処理順が影響していそうですが、詳細は分かっていません…

// astro.config.mjs
export default defineConfig({
	// ...
	markdown: {
		remarkPlugins: [
			// remarkLinkCardを読み込む順番に注意。少なくとも末尾だとバグる
			[remarkLinkCard, { shortenUrl: true }],
			remarkMath,
			remarkReadingTime,
			remarkExcerpt,
			remarkGithubAdmonitionsToDirectives,
			remarkDirective,
			remarkSectionize,
			parseDirectiveNode,
		],
	},
	// ...
});

記事の共有#

ページ下部に「この記事を共有」の欄を付けました。

サービスごとに用意するとボタンが無限に増えてしまうので、コピーボタンだけを用意しています。