跳转到内容
Starlight
Filters

    链接卡片

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

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

    导入

    Section titled “导入”
    import { LinkCard } from '@astrojs/starlight/components';

    用法

    Section titled “用法”

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

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

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

    添加链接描述

    Section titled “添加链接描述”

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

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

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

    分组链接卡片

    Section titled “分组链接卡片”

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

    <LinkCard> 的属性

    Section titled “<LinkCard> 的属性”

    实现： LinkCard.astro

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

    title

    Section titled “title”

    必要属性
    类型： string

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

    href

    Section titled “href”

    必要属性
    类型： string

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

    description

    Section titled “description”

    类型： string

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