Bootstrap 图标网格短代码
用于生成带有图标、标题和描述的图标网格。
赞助
成为我们的资助者或赞助商，以支持我们的工作。
本页内容
赞助商
语法
1{{< bs/icon-grid [data] >}}
参数
data
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#0 | data | string | ✓ | - | - | - |
数据文件名。
linkText
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | linkText | string | - | Learn more | - | - |
链接文本，为空时整个卡片变为可点击状态。
alignment
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | alignment | string | - | start | - | - |
对齐方式：start、center 或 end。
gap
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | gap | number | - | 4 | - | - |
条目间隔，最大为 5。
border
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | border | boolean | - | true | - | - |
为 false 时，去除边框。
数据
数据文件需要存放于 /data 文件夹。
数据条目属性
title
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
title | - | string | ✓ | - | - | - |
标题。
url
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
url | - | string | - | - | - | - |
详情页 URL。
description
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
description | - | string | - | - | - | - |
描述，支持 Markdown。
weight
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
weight | - | number | - | - | - | - |
权重。
icon
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
icon | - | object | - | - | - | - |
图标。
icon.name
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
icon.name | - | string | ✓ | - | - | - |
图标名称。
icon.vendor
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
icon.vendor | - | string | - | bootstrap | - | - |
图标供应商。
当 linkText 为空时，请确保 description 不包含链接。
示例
示例数据文件
data/features.yaml
1- title: Fast
2 description: "Google PageSpeed Insights scored perfect \U0001F4AF of four metrics on mobile and desktop."
3 icon:
4 name: speedometer
5 color: green
6
7- title: Responsive
8 url: bootstrap
9 description: 'Mobile first, built on top of the Bootstrap v5.3.'
10 icon:
11 name: bootstrap
12 color: '#7952B3'
13
14- title: FOSS
15 url: 'https://github.com/hugomods'
16 description: 'Free and open source software, code licensed **MIT**.'
17 icon:
18 name: code
19 vendor: fas
20 color: green
默认链接文本
源码
1{{< bs/icon-grid "features" >}}结果
自定义链接文本
源码
1{{< bs/icon-grid data=features linkText="Read more" >}}结果
空链接文本
源码
1{{< bs/icon-grid data=features linkText="" >}}结果
居中显示
源码
1{{< bs/icon-grid data="features" alignment="center" >}}结果
更小的间隔
源码
1{{< bs/icon-grid data="features" gap=2 >}}结果
无边框
源码
1{{< bs/icon-grid data="features" border=false >}}结果