AstroブログでMarkdown内のリンクをカード形式で表示する
はじめに
先日、Markdown内のリンクをカード化するremarkプラグインのremark-link-card-plus
をリリースした。
この記事では、このプラグインを使ってAstroブログでMarkdown内のリンクをカード形式で表示する方法を紹介する。
設定方法
まずはプラグインをインストールする。
npm i remark-link-card-plus
次にastro.config.mjs
のremarkPlugins
に設定を追加する。
// astro.config.mjs
import { defineConfig } from 'astro/config';
import remarkLinkCard from 'remark-link-card-plus';
export default defineConfig({
markdown: {
remarkPlugins: [
[
remarkLinkCard, {
cache: true,
shortenUrl: true,
thumbnailPosition: "right",
},
],
],
},
});
v0.2.0時点ではオプションは以下の3つがある。
オプション | 型 | デフォルト | 説明 |
---|---|---|---|
cache | boolean | false | リンク先のOG画像とfaviconをキャッシュし、サーバー負荷を軽減します。 |
shortenUrl | boolean | true | カード内のURLをホスト名だけで表示します。 |
thumbnailPosition | string | "right" | カード内のサムネイル画像を右または左に表示します。 |
この設定を追加するだけでMarkdown内のリンクはカード化される。しかし、この状態ではスタイルは適用されていないので、スタイルは自分で用意する必要がある。
以下のCSSを作成する。TailwindCSSを使っている。
.remark-link-card-plus__container {
@apply mb-4;
}
.remark-link-card-plus__card {
@apply h-32 flex bg-white overflow-hidden rounded-xl border border-slate-300 hover:bg-slate-100 hover:border-slate-500 transition-colors !no-underline;
}
.remark-link-card-plus__main {
@apply flex flex-col flex-1 p-4;
}
.remark-link-card-plus__content {
}
.remark-link-card-plus__title {
@apply text-lg font-semibold leading-6 line-clamp-2 text-gray-900 hover:!text-gray-900;
}
.remark-link-card-plus__description {
@apply mt-1 text-sm text-gray-500 line-clamp-1;
}
.remark-link-card-plus__meta {
@apply flex items-center mt-auto;
}
.remark-link-card-plus__favicon {
@apply !my-0 mr-1 h-4 w-4;
}
.remark-link-card-plus__url {
@apply text-xs text-gray-600;
}
.remark-link-card-plus__thumbnail {
@apply h-32 w-1/3 md:max-w-64;
}
.remark-link-card-plus__image {
@apply h-full w-full !my-0 object-cover;
}
このCSSを記事ページで読み込む。
---
import "../styles/index.css";
---
<!-- 記事ページ -->
以上で記事内のリンクカードにスタイルを適用させることができた。以下はスタイルが適用されたリンクカードのサンプル。
カード化されるリンクにはいくつか条件があるので注意が必要となる。
カード化されるケース
リンクだけで構成された行
(空行)
https://example.com
(空行)
テキストとリンクが同じ文字列のとき
[https://example.com](https://example.com)
カード化されないケース
リンクと同じ行にテキストがあるとき
リンクと同じ行にテキストがある場合はカード化されない: https://example.com
同じ行内に複数のリンクがあるとき
https://github.com https://example.com
リスト内のリンク
* list
* https://example.com
おわり
astro.config.mjs
へのプラグインの指定と、スタイルさえあれば簡単にリンクをカード化できるのでぜひ使ってみてほしい。
ソースコードはGitHubに公開しているので不具合や改善案などがあれば気軽にイシューを作成していただきたい。また、もし気に入っていただけたらスターをつけていただけると嬉しい。