65 lines
2.6 KiB
Markdown
65 lines
2.6 KiB
Markdown
---
|
||
title: 卡片
|
||
linkTitle: Cards
|
||
---
|
||
|
||
## 示例
|
||
|
||
{{< cards >}}
|
||
{{< card link="../callout" title="Callout" icon="warning" >}}
|
||
{{< card link="/" title="No Icon" >}}
|
||
{{< /cards >}}
|
||
|
||
{{< cards >}}
|
||
{{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
|
||
{{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
|
||
{{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
|
||
{{< /cards >}}
|
||
|
||
## 使用
|
||
|
||
```
|
||
{{</* cards */>}}
|
||
{{</* card link="../callout" title="Callout" icon="warning" */>}}
|
||
{{</* card link="/" title="No Icon" */>}}
|
||
{{</* /cards */>}}
|
||
```
|
||
|
||
```
|
||
{{</* cards */>}}
|
||
{{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
|
||
{{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
|
||
{{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
|
||
{{</* /cards */>}}
|
||
```
|
||
|
||
## 卡片参数
|
||
|
||
| Parameter | Description |
|
||
|----------- |---------------------------------------|
|
||
| `link` | URL（内部或外部） |
|
||
| `title` | 卡片的标题 |
|
||
| `subtitle` | 字幕标题（支持 Markdown） |
|
||
| `icon` | 图标的名称 |
|
||
|
||
## Image Card
|
||
|
||
此外，该卡还支持通过以下参数添加图像和处理：
|
||
|
||
| Parameter | Description |
|
||
|----------- |---------------------------------------------|
|
||
| `image` | 指定卡片的图像 URL. |
|
||
| `method` | 设置 Hugo 的图像处理方法。 |
|
||
| `options` | 配置 Hugo 的图像处理选项。|
|
||
|
||
卡片支持三种图像：
|
||
|
||
1. 远程图片：完整网址应放置在 image 参数中
|
||
2. 静态图片：使用 Hugo 的 static/ 目录中的相对路径
|
||
3. 处理过的图片：使用 Hugo 的 assets/ 目录中的相对路径
|
||
|
||
Hextra 在构建过程中会自动检测图片是否需要处理，并根据需要应用 options 参数或默认设置（缩放，800x，质量 80，WebP 格式）。
|
||
|
||
它目前支持以下处理方法：Resize（缩放）、Fit（适应）、Fill（填充）和 Crop（裁剪）。
|
||
|
||
有关 Hugo 内置图像处理命令、方法和选项的更多信息，请参阅他们的 [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
|