卡片

卡片组件

示例

提示框带标签的卡片

使用方法

{{< cards >}}
  {{< card link="../callout" title="提示框" icon="warning" >}}
  {{< card link="../callout" title="带标签的卡片" icon="tag" tag= "自定义标签" >}}
  {{< card link="/" title="无图标" >}}
{{< /cards >}}

{{< cards >}}
  {{< card link="/" title="图片卡片" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash风景图" >}}
  {{< card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" >}}
  {{< card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片，经过Hugo处理。" method="Resize" options="600x q80 webp" >}}
{{< /cards >}}

卡片参数

参数	描述
`link`	链接地址（内部或外部）。
`title`	卡片的标题。
`subtitle`	卡片的副标题（支持Markdown）。
`icon`	图标名称。
`tag`	标签文本。
`tagColor`	标签颜色：`gray`（默认）、`yellow`、`red` 和 `blue`。

图片卡片

此外，卡片还支持通过以下参数添加图片并进行处理：

参数	描述
`image`	指定卡片的图片URL。
`method`	设置Hugo的图片处理方法。
`options`	配置Hugo的图片处理选项。

卡片支持三种类型的图片：

远程图片：在image参数中填写完整的URL。
静态图片：使用Hugo的static/目录下的相对路径。
处理后的图片：使用Hugo的assets/目录下的相对路径。

Hextra在构建时会自动检测是否需要图片处理，并应用options参数或默认设置（Resize，800x，质量80，WebP格式）。目前支持的method有：Resize、Fit、Fill和Crop。

有关Hugo内置图片处理命令、方法和选项的更多信息，请参阅其图片处理文档。

{{< cards >}}
  {{< card link="../callout" title="带默认标签颜色的卡片" tag="标签文本" >}}
  {{< card link="../callout" title="带红色标签的卡片" tag="标签文本" tagType="error" >}}
  {{< card link="../callout" title="带蓝色标签的卡片" tag="标签文本" tagType="info" >}}
  {{< card link="../callout" title="带黄色标签的卡片" tag="标签文本" tagType="warning" >}}
{{< /cards >}}

列数

可以通过向cards短代码传递cols参数来指定卡片的最大列数。请注意，在小屏幕上列数仍会折叠。

顶部卡片底部卡片

左侧卡片右侧卡片

{{< cards cols="1" >}}
  {{< card link="/" title="顶部卡片" >}}
  {{< card link="/" title="底部卡片" >}}
{{< /cards >}}

{{< cards cols="2" >}}
  {{< card link="/" title="左侧卡片" >}}
  {{< card link="/" title="右侧卡片" >}}
{{< /cards >}}

最后更新于 August 14, 2025

步骤其他