链接卡片

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

预览

自定义 Starlight 了解如何使用自定义样式、字体等来打造你自己的 Starlight 网站。

导入

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

用法

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

MDX

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

<LinkCard title="Authoring Markdown" href="/guides/authoring-content/" />

Markdoc

{% linkcard title="Authoring Markdown" href="/guides/authoring-content/" /%}

预览

编写 Markdown

添加链接描述

使用 description 属性为链接卡片添加简短描述。

MDX

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

<LinkCard
  title="Internationalization"
  href="/guides/i18n/"
  description="Configure Starlight to support multiple languages."
/>

Markdoc

{% linkcard
   title="Internationalization"
   href="/guides/i18n/"
   description="Configure Starlight to support multiple languages." /%}

预览

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

对链接卡片进行分组

通过使用 <CardGrid> 组件对多个链接卡片进行分组，可以在空间足够时将它们并排显示。相关示例请参阅 “对链接卡片进行分组” 指南。

<LinkCard> 属性

实现： LinkCard.astro

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

title

必需
类型： string

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

href

必需
类型： string

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

description

类型： string

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