リンクカードの例

1301 字

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の段落内に単一の「ベアリンク」（説明テキストのない純粋なURL）またはそれに類似する構造のみを含めると、自動的にリンクカードに変換されます。

1
**External Links**
2

3
https://astro.build/
4

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

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

9
**Internal Links**
10

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

13
For more details, see the internalLink option section.
14

15
**IDN (Internationalized Domain Name)**
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(), // Plugin here
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, // Plugin here
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リポジトリを指すリンクから取得したメタデータの「タイトル」と「説明」を書き換える方法を示す例です。

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>