链接卡片

要突出显示不同页面的链接，请使用 <LinkCard> 组件。

预览

自定义 Starlight 学习如何通过自定义样式、字体等使你的 Starlight 网站变得与众不同。

导入

import { LinkCard } from '@astrojs/starlight/components';

用法

使用 <LinkCard> 组件来突出显示链接。 每个 <LinkCard> 都需要一个 title 和一个 href 属性。

MDX

import { LinkCard } from '@astrojs/starlight/components';

<LinkCard title="Markdown 创作" href="/zh-cn/guides/authoring-content/" />

Markdoc

{% linkcard title="Markdown 创作" href="/zh-cn/guides/authoring-content/" /%}

预览

Markdown 创作

添加链接描述

使用 description 属性向链接卡片添加一个简短的描述。

MDX

import { LinkCard } from '@astrojs/starlight/components';

<LinkCard
  title="国际化"
  href="/zh-cn/guides/i18n/"
  description="配置 Starlight 以支持多种语言。"
/>

Markdoc

{% linkcard
   title="国际化"
   href="/zh-cn/guides/i18n/"
   description="配置 Starlight 以支持多种语言。" /%}

预览

国际化 配置 Starlight 以支持多种语言。

分组链接卡片

当有足够大的空间时，可以使用 <CardGrid> 组件对链接卡片进行分组，来并排显示多个链接卡片。 有关示例，请参阅 “分组链接卡片” 指南。

<LinkCard> 的属性

实现： LinkCard.astro

<LinkCard> 组件接受以下属性，以及其他所有的 <a> 元素属性：

title

必要属性
类型： string

要显示的链接卡片的标题。

href

必要属性
类型： string

与卡片交互时所链接到的 URL。

description

类型： string

一个可选描述，显示在标题的下方。