卡片

9.3. 卡片#

卡片包含一个主题的内容和动作。卡片是一种灵活和可扩展的内容容器，它可以用包括页眉和页脚、标题和图像在内的组件进行格式化。

9.3.1. 简单卡片#

Card Title

Card content

Syntax

9.3.2. 含有头部和尾部的卡片#

所有第一次出现三个或三个以上’ ^^^ ‘之前的内容被认为是页眉，所有最后出现三个或三个以上’ +++ '之后的内容被认为是页脚:

Header

Card Title

Card content

Footer

Syntax

9.3.3. 带有图片的卡片#

你也可以添加一个图像作为卡的背景或在卡的顶部/底部, 使用 img-background, img-top, img-bottom 选项:

Title

Text

Header

Title

Content

Footer

Header

Title

Content

Footer

Syntax

9.3.4. 可点击的卡片#

使用link和link-type选项，你可以把整张卡变成一个可点击的链接。试着把鼠标悬停在上面，然后点击下面的卡片:

可点击卡片的链接形式有两种：

  • 一种是外部链接，这种只需要直接在 card 指令下添加 link 选项以及对应的链接即可。

  • 另一种是内部链接，这种需要在 card 指令下添加选项 :link-type: ref 和 link 选项以及对应的目标和交叉引用。

Clickable Card (external)

The entire card can be clicked to navigate to https://example.com.

https://example.com
Clickable Card (internal)

The entire card can be clicked to navigate to the cards-clickable reference target.

带有图片的卡片
Syntax

9.3.5. 卡片的对齐#

你可以使用 text-align 选项来对齐卡片中的文本，以及 auto 对齐卡片的边距 (margin)。

  • 使用 text-align 选项来对齐卡片中的文本

  • 使用 margin 选项来

Align Center

Content

Align Right

Content

Align Left

Content

:::{card} Align Center
:width: 75%
:margin: 0 2 auto auto
:text-align: center

Content
:::

:::{card} Align Right
:width: 50%
:margin: 0 2 auto 0
:text-align: right

Content
:::

:::{card} Align Left
:width: 50%
:margin: 0 2 0 auto
:text-align: left

Content
:::

9.3.6. 卡片传送带#

card-carousel指令可用于创建单行固定宽度的可滚动卡片。参数应该是1到12之间的数字，表示要显示的牌的数量。

当滚动一个传送带时，滚动条将从最近的卡片开始:

card 1

content

card 2

Longer

content

card 3
card 4
card 5
card 6
Syntax

9.3.7. card 可选项#

目录