Link Cards Example - yCENzh's Blog

About Link Cards#

关于链接卡片#

Link Cards are similar to the <LinkCard> component in Starlight, displaying links in a card format.
链接卡片类似于 Starlight 中的 <LinkCard> 组件，以卡片形式展示链接。

Usage#

使用方法#

Include only a single “bare” link (a link without descriptive text), or something similar, within a paragraph in Markdown, and it will automatically be converted into a Link Card.
在 Markdown 段落中仅包含一个”裸链接”（无描述文本的纯 URL）或类似结构，它将自动转换为链接卡片。

1
**External Links**
2
**外部链接**
3

4
https://astro.build/
5

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

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

10
**Internal Links**
11
**内部链接**
12

13
[/archive/](/archive/)
14

15
For more details, see the internalLink option section.
16
更多细节请参见 internalLink 选项部分。
17

18
**IDN (Internationalized Domain Name)**
19
**IDN（国际化域名）**
20

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

Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

astro.build

GitHub - yCENzh/Fuwari-yCENzh: 我的fuwari博客源码

我的fuwari博客源码. Contribute to yCENzh/Fuwari-yCENzh development by creating an account on GitHub.

github.com

我的fuwari博客源码. Contribute to yCENzh/Fuwari-yCENzh development by creating an account on GitHub.

yCENzh's Blog - 爱你所爱~

fuwari.oh1.top

时间线 - yCENzh's Blog

fuwari.oh1.top

.みんな | Google Registry

.みんな is the world's first open hiragana top-level domain. .みんな means "everyone" in Japanese.

はじめよう.みんな

NOTE

注意 Once the cards are displayed, try changing the theme color or enabling dark mode!
卡片显示后，请尝试更改主题颜色或启用暗黑模式！

Options#

配置选项#

You can specify the options in the astro.config.mjs file.
您可以在 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
    ...

If the order of plugins is complex, you can also specify it as a remark plugin.
如果插件顺序较复杂，也可将其指定为 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
      ...

Name	Type	Default	Description
devMode	boolean	import.meta.env.DEV	Enable or disable development mode.
			启用或禁用开发模式
excludedUrls	Array<string \| RegExp>	[]	A list of strings or regular expressions to exclude specific URLs from processing. This can also help prevent conflicts with other plugins.
			用于排除特定 URL 的字符串或正则表达式列表，可防止与其他插件冲突
linkAttributes	Object	{ target: ”, rel: ” }	Set the target and relationship attributes for external links. These attributes can also be left unset to delegate handling to other plugins.
			设置外部链接的 target 和 rel 属性，留空可交由其他插件处理
rewriteRules	Array<Object>	[]	Rewrite specific metadata attributes fetched from links, such as the title and description.
			重写从链接获取的特定元数据属性（如标题和描述）
base	string	’/‘	Specify the same base path as Astro’s. For details, refer here. When used as an integration, if not specified, this option will be determined automatically.
			指定与 Astro 相同的基准路径（详情）。作为集成使用时，如未指定将自动确定
defaultThumbnail	string	”	Path to the default thumbnail image to use when the metadata does not include image data. It should be relative to the public directory. For example, set `defaultThumbnail` to ‘images/default-thumbnail.jpg’ if the image is located at public/images/default-thumbnail.jpg.
			当元数据不含图片时使用的默认缩略图路径（相对于 public 目录）。例如：图片在 public/images/default-thumbnail.jpg 时设为 ‘images/default-thumbnail.jpg’
internalLink	Object	{ enabled: false, site: ” }	Enable internal link processing within your site.
			启用站点内部链接处理
cache	Object	See detailed options below.	Download and cache images during the build process.
			在构建过程中下载并缓存图片

linkAttributes#

链接属性配置#

Name	Type	Default	Description
target	string	”	Specify where to open linked documents. The default (empty) does not set a target on links.
			指定链接文档打开位置（默认留空不设置 target）
rel	string	”	Define the relationship between the current document and the linked document. The default (empty) does not set any relationship.
			定义当前文档与链接文档的关系（默认留空不设置 rel）

rewriteRules#

重写规则#

Name	Type	Description
url	RegExp	A regular expression pattern is used to match a specific URL.
		用于匹配特定 URL 的正则表达式模式
rewriteSteps	Array<Object>	Defines rewrite rules for specific metadata attributes.
		定义特定元数据属性的重写规则

Below is an example that shows how to rewrite the “title” and “description” for metadata fetched from links pointing to a GitHub repository.
以下示例展示如何重写 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
],

Name	Type	Description
key	string	Metadata attribute key to be rewritten.
		要重写的元数据属性键名
pattern	RegExp	Regular expression pattern used to match the current value of the metadata attribute. The part of the value that matches this pattern will be replaced.
		用于匹配元数据属性当前值的正则表达式，匹配部分将被替换
replacement	string	String to replace the matched pattern in the metadata attribute.
		替换元数据属性中匹配项的字符串

internalLink#

内部链接配置#

Name	Type	Default	Description
enabled	boolean	false	Enable or disable internal link processing.
			启用或禁用内部链接处理
site	string	”	Specify the same deployed URL as Astro’s. For details, refer here. When used as an integration, if not specified, this option will be determined automatically.
			指定与 Astro 相同的部署 URL（详情）。作为集成使用时，如未指定将自动确定

cache#

缓存配置#

Name	Type	Default	Description
enabled	boolean	false	Enable or disable caching.
			启用或禁用缓存
outDir	string	’./dist/‘	Output directory path. For details, refer here. Aligning with Astro allows you to benefit from features like image optimization.
			输出目录路径（详情）。与 Astro 对齐可享受图片优化等功能
cacheDir	string	’./link-card/‘	Cache directory path. If `devMode` is set to true, the final URL to the cached images will be `base + outDir + cacheDir`. Otherwise, it will be `base + cacheDir`.
			缓存目录路径。`devMode=true` 时最终 URL 为 `base + outDir + cacheDir`，否则为 `base + cacheDir`
maxFileSize	number	0	Maximum file size (in bytes) to cache. Set to 0 for no limit.
			单文件最大缓存大小（字节），0 表示无限制
maxCacheSize	number	0	Maximum total cache size (in bytes). Set to 0 for no limit.
			缓存总大小上限（字节），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’	Identifier included in HTTP request headers to specify the client.
			HTTP 请求头中的客户端标识符

Quick and Easy Options Setup#

快速配置选项#

This plugin uses @fastify/deepmerge to simplify options setup.
本插件使用 @fastify/deepmerge 简化选项配置。

@fastify/deepmerge

Merges the enumerable properties of two or more objects deeply.. Latest version: 3.1.0, last published: 5 months ago. Start using @fastify/deepmerge in your project by running `npm i @fastify/deepmerge`. There are 98 other projects in the npm registry using @fastify/deepmerge.

www.npmjs.com

2025-04-02T07:19:47Z

HTML Structure for Styling#

用于样式化的 HTML 结构#

The styles are specified in src/styles/link-card.css, and the HTML is automatically generated. Below is an example structure to guide you when customizing the styles:
样式定义在 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>