表格

在本指南中,你将学习如何配置和创建表格。

前置条件

你需要升级 Hugo 到 v0.134.0 或后续版本,并启用 markup.goldmark.parser.attribute.block

hugo.toml

1[markup]
2  [markup.goldmark]
3    [markup.goldmark.parser]
4      [markup.goldmark.parser.attribute]
5        block = true

hugo.yaml

1markup:
2  goldmark:
3    parser:
4      attribute:
5        block: true

hugo.json

 1{
 2   "markup": {
 3      "goldmark": {
 4         "parser": {
 5            "attribute": {
 6               "block": true
 7            }
 8         }
 9      }
10   }
11}

站点参数

align

名称上下文类型必填默认值版本
alignhb.tablesstring---

垂直对齐。

可选项:top, middle, bottom

bordered

名称上下文类型必填默认值版本
borderedhb.tablesboolean-true-

是否在全局内启用边框。

border_style

名称上下文类型必填默认值版本
border_stylehb.tablesstring---

边框样式。

可选项:danger, dark, light, info, primary, secondary, success, warning

group_divider

名称上下文类型必填默认值版本
group_dividerhb.tablesboolean-false-

是否在表格组之间添加更厚的深色边框。

hover

名称上下文类型必填默认值版本
hoverhb.tablesboolean-true-

是否在表格上启用悬停状态。

striped

名称上下文类型必填默认值版本
stripedhb.tablesboolean-true-

是否在表格行上添加斑马纹。

striped_columns

名称上下文类型必填默认值版本
striped_columnshb.tablesboolean-false-

是否在表格列上添加斑马纹。

style

名称上下文类型必填默认值版本
stylehb.tablesstring---

表格样式。

可选项:danger, dark, light, info, primary, secondary, success, warning

thead_style

名称上下文类型必填默认值版本
thead_stylehb.tablesstring---

表头样式。

可选项:danger, dark, light, info, primary, secondary, success, warning

站点参数示例

hugo.toml

 1[params]
 2  [params.hb]
 3    [params.hb.tables]
 4      align = ''
 5      border_style = ''
 6      bordered = true
 7      group_divider = false
 8      hover = true
 9      striped = true
10      striped_columns = false
11      style = ''
12      thead_style = ''

hugo.yaml

 1params:
 2  hb:
 3    tables:
 4      align: ""
 5      border_style: ""
 6      bordered: true
 7      group_divider: false
 8      hover: true
 9      striped: true
10      striped_columns: false
11      style: ""
12      thead_style: ""

hugo.json

 1{
 2   "params": {
 3      "hb": {
 4         "tables": {
 5            "align": "",
 6            "border_style": "",
 7            "bordered": true,
 8            "group_divider": false,
 9            "hover": true,
10            "striped": true,
11            "striped_columns": false,
12            "style": "",
13            "thead_style": ""
14         }
15      }
16   }
17}

表格属性

_align

名称上下文类型必填默认值版本
_align-string-hb.tables.align-

垂直对齐。

可选项:top, middle, bottom

_borderless

名称上下文类型必填默认值版本
_borderless-boolean-false-

是否去除边框。

_bordered

名称上下文类型必填默认值版本
_bordered-boolean-hb.tables.bordered-

是否启用边框。

_border_style

名称上下文类型必填默认值版本
_border_style-string---

边框样式。

可选项:danger, dark, light, info, primary, secondary, success, warning

_caption

名称上下文类型必填默认值版本
_caption-string---

表格说明。

_group_divider

名称上下文类型必填默认值版本
_group_divider-boolean-hb.tables.group_divider-

是否在表格组之间添加更厚的深色边框。

_hover

名称上下文类型必填默认值版本
_hover-boolean-hb.tables.hover-

是否在表格上启用悬停状态。

_striped

名称上下文类型必填默认值版本
_striped-boolean-hb.tables.striped-

是否在表格行上添加斑马纹。

_striped_columns

名称上下文类型必填默认值版本
_striped_columns-boolean-hb.tables.striped_columns-

是否在表格列上添加斑马纹。

_size

名称上下文类型必填默认值版本
_size-string---

表格尺寸。

可选项:sm

_style

名称上下文类型必填默认值版本
_style-string---

表格样式。

可选项:danger, dark, light, info, primary, secondary, success, warning

_thead

名称上下文类型必填默认值版本
_thead-boolean-truev0.15.1

是否显示表头。

_thead_style

名称上下文类型必填默认值版本
_thead_style-string---

表头样式。

可选项:danger, dark, light, info, primary, secondary, success, warning

示例

默认表格

样式取决于默认配置。

源码
1| Default Table |
2| --- |
3| Foo |
4| Bar |
结果
Default Table
Foo
Bar

表格水平对齐

源码
1| Left | Center | Right |
2| :- | :-: | -: |
3| 1 | 2 | 3 |
4| 1 | 2 | 3 |
5| 1 | 2 | 3 |
结果
LeftCenterRight
123
123
123

表格垂直对齐

源码
1| Heading 1 | Heading 2 |
2| --- | --- |
3| `top` | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
4{_align=top}
结果
Heading 1Heading 2
topThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
源码
1| Heading 1 | Heading 2 |
2| --- | --- |
3| `middle` | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
4{_align=middle}
结果
Heading 1Heading 2
middleThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
源码
1| Heading 1 | Heading 2 |
2| --- | --- |
3| `bottom` | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
4{_align=bottom}
结果
Heading 1Heading 2
bottomThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

带有说明的表格

源码
1| Name | Age | Role |
2| --- | :-: | :-: |
3| Foo | 35 | Leader |
4| Bar | 23 | Developer |
5{_caption="Members"}
结果
Members
NameAgeRole
Foo35Leader
Bar23Developer

表格样式

源码
1| Primary Table |
2| --- |
3| Foo |
4| Bar |
5{_style=primary}
结果
Primary Table
Foo
Bar
源码
1| Danger Table |
2| --- |
3| Foo |
4| Bar |
5{_style=danger}
结果
Danger Table
Foo
Bar
源码
1| Dark Table |
2| --- |
3| Foo |
4| Bar |
5{_style=dark}
结果
Dark Table
Foo
Bar

带有边框和边框样式的表格

源码
1| Primary Bordered Table |
2| --- |
3| Foo |
4| Bar |
5{_border_style=primary}
结果
Primary Bordered Table
Foo
Bar
源码
1| Danger Bordered Table |
2| --- |
3| Foo |
4| Bar |
5{_border_style=danger}
结果
Danger Bordered Table
Foo
Bar

无边框表格

源码
1| Borderless Table |
2| --- |
3| Foo |
4| Bar |
5{_borderless=true}
结果
Borderless Table
Foo
Bar

小号表格

源码
1| Small Table |
2| --- |
3| Foo |
4| Bar |
5{_size=sm}
结果
Small Table
Foo
Bar

表头样式

源码
1| Primary Header |
2| --- |
3| Foo |
4| Bar |
5{_thead_style=primary}
结果
Primary Header
Foo
Bar
源码
1| Danger Header |
2| --- |
3| Foo |
4| Bar |
5{_thead_style=danger}
结果
Danger Header
Foo
Bar
源码
1| Dark Header |
2| --- |
3| Foo |
4| Bar |
5{_thead_style=dark}
结果
Dark Header
Foo
Bar

无表头表格

源码
1| | | |
2|-|-|-|
3| 1 | 1 | 1 |
4| 2 | 2 | 2 |
5| 3 | 3 | 3 |
6| 4 | 4 | 4 |
7{_thead=false}
结果
111
222
333
444
razonyang
2024年9月20日星期五 2024年9月4日星期三