リンクカードの例 - Sofia-Luceat-Project

1303 字

7 min

リンクカードの例

2025-02-23

Default

Markdown

/

Blogging

/

Demo

リンクカードについて#

リンクカードは Starlight の <LinkCard> コンポーネントに似ており、リンクをカード形式で表示します。

使用方法#

更新され、呼び出し方法は以下のようになりました

カスタムタイトルと説明#

1
::link-card{url="https://fuwari.oh1.top" title="yCENzh's Blog" description="Ciallo~"}

fuwari.oh1.top

yCENzh's Blog

Ciallo~

画像付き#

1
::link-card{url="https://github.com" title="Github" description="Hello World!" icon="https://github.com/github.png"}

github.com

Github

Hello World!

以下はすべて無効になりました

Markdownの段落内に「裸の」リンク（説明文のないリンク）などを一つだけ含めると、自動的にリンクカードに変換されます。

1
**外部リンク**
2

3
https://astro.build/
4

5
<https://github.com/saicaca/fuwari/>
6

7
[https://fuwari.oh1.top/](https://fuwari.oh1.top/)
8

9
**内部リンク**
10

11
[/archive/](/archive/)
12

13
詳細については、internalLinkオプションのセクションを参照してください。
14

15
**IDN（国際化ドメイン名）**
16

17
https://はじめよう.みんな/

https://astro.build/

https://github.com/yCENzh/Fuwari-yCENzh/

https://fuwari.oh1.top/

/archive/

https://はじめよう.みんな/

NOTE
カードが表示されたら、テーマカラーを変更したり、ダークモードを有効にしてみてください！

設定オプション#

オプションは astro.config.mjs ファイルで指定できます。

1
...
2
import fuwariLinkCard from "./src/plugins/fuwari-link-card.ts"
3
...
4
export default defineConfig({
5
  ...
6
  integrations: [
7
    ...
8
    fuwariLinkCard(), // ここにプラグインを追加
9
    ...

プラグインの順序が複雑な場合は、remark プラグインとして指定することもできます。

1
...
2
import remarkLinkCard from "./src/plugins/remark-link-card.ts"
3
...
4
export default defineConfig({
5
  ...
6
  markdown: {
7
    ...
8
    remarkPlugins: [
9
      ...
10
      remarkLinkCard, // ここにプラグインを追加
11
      ...

名前	型	デフォルト	説明
devMode	boolean	import.meta.env.DEV	開発モードを有効または無効にします。
excludedUrls	Array<string \| RegExp>	[]	特定のURLを処理から除外するための文字列または正規表現のリスト。これは他のプラグインとの競合を防ぐのにも役立ちます。
linkAttributes	Object	{ target: ”, rel: ” }	外部リンクのターゲットと関係属性を設定します。これらの属性を未設定のままにして、他のプラグインに処理を委任することもできます。
rewriteRules	Array<Object>	[]	タイトルや説明など、リンクから取得した特定のメタデータ属性を書き換えます。
base	string	’/‘	Astroと同じベースパスを指定します。詳細はこちらを参照してください。インテグレーションとして使用する場合、指定しないと自動的に決定されます。
defaultThumbnail	string	”	メタデータに画像データが含まれていない場合に使用するデフォルトのサムネイル画像のパス。publicディレクトリからの相対パスである必要があります。例えば、画像がpublic/images/default-thumbnail.jpgにある場合、`defaultThumbnail`を’images/default-thumbnail.jpg’に設定します。
internalLink	Object	{ enabled: false, site: ” }	サイト内の内部リンク処理を有効にします。
cache	Object	以下の詳細オプションを参照してください。	ビルドプロセス中に画像をダウンロードしてキャッシュします。

リンク属性の設定#

名前	型	デフォルト	説明
target	string	”	リンクされたドキュメントを開く場所を指定します。デフォルト（空）では、リンクにターゲットは設定されません。
rel	string	”	現在のドキュメントとリンクされたドキュメントの関係を定義します。デフォルト（空）では、関係は設定されません。

書き換えルール#

名前	型	デフォルト	説明
url	RegExp		特定のURLに一致させるために使用される正規表現パターン。
rewriteSteps	Array<Object>		特定のメタデータ属性の書き換えルールを定義します。

以下は、GitHubリポジトリを指すリンクから取得したメタデータの「title」と「description」を書き換える方法を示す例です。

1
rewriteRules: [
2
  {
3
    url: /^https:\/\/github\.com\/[^\/]+\/[^\/]+\/?$/,
4
    rewriteSteps: [
5
      { key: "title", pattern: /:.*/, replacement: "" },
6
      {
7
        key: "description",
8
        pattern: /(?: (?:\. )?Contribute to (?:.+\/.+) .+\.?)|(?: - (?:.+\/.+))$/,
9
        replacement: "",
10
      },
11
      {
12
        key: "description",
13
        pattern: /^Contribute to (?:.+\/.+) .+\.?$/,
14
        replacement: "No description provided.",
15
      },
16
    ],
17
  },
18
],

名前	型	説明
key	string	書き換えられるメタデータ属性のキー。
pattern	RegExp	メタデータ属性の現在の値に一致させるために使用される正規表現パターン。このパターンに一致する値の部分が置換されます。
replacement	string	メタデータ属性で一致したパターンを置換する文字列。

内部リンクの設定#

名前	型	デフォルト	説明
enabled	boolean	false	内部リンク処理を有効または無効にします。
site	string	”	Astroと同じデプロイ済みURLを指定します。詳細はこちらを参照してください。インテグレーションとして使用する場合、指定しないと自動的に決定されます。

キャッシュ設定#

名前	型	デフォルト	説明
enabled	boolean	false	キャッシュを有効または無効にします。
outDir	string	’./dist/‘	出力ディレクトリのパス。詳細はこちらを参照してください。Astroと揃えることで、画像最適化などの機能の恩恵を受けることができます。
cacheDir	string	’./link-card/‘	キャッシュディレクトリのパス。`devMode`がtrueに設定されている場合、キャッシュされた画像への最終的なURLは`base + outDir + cacheDir`になります。それ以外の場合は`base + cacheDir`になります。
maxFileSize	number	0	キャッシュする最大ファイルサイズ（バイト単位）。0で無制限。
maxCacheSize	number	0	キャッシュの合計最大サイズ（バイト単位）。0で無制限。
userAgent	string	’Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36’	クライアントを指定するためにHTTPリクエストヘッダーに含まれる識別子。

簡単なオプション設定#

このプラグインは、オプション設定を簡素化するために@fastify/deepmergeを使用しています。

https://www.npmjs.com/package/@fastify/deepmerge

スタイリング用のHTML構造#

スタイルはsrc/styles/link-card.cssで指定され、HTMLは自動的に生成されます。以下は、スタイルをカスタマイズする際の参考となる構造の例です。

1
<div class="link-card__container">
2
  <a href="https://astro.build/" class="link-card">
3
    <div class="link-card__info">
4
      <div class="link-card__title">Astro</div>
5
      <div class="link-card__description">Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.</div>
6
      <div class="link-card__metadata">
7
        <div class="link-card__domain">
8
          <img alt="favicon" class="link-card__favicon" src="https://www.google.com/s2/favicons?domain=astro.build">
9
          <span class="link-card__domain-name">astro.build</span>
10
        </div>
11
      </div>
12
    </div>
13
    <div class="link-card__thumbnail">
14
      <img alt="Astro - Build the web you want." class="link-card__image" src="https://astro.build/og/astro.jpg">
15
    </div>
16
  </a>
17
</div>