Card panes

在编写内容时，将相似的文本块或代码片段置于卡片式元素中通常非常实用，这些元素可以选择并排呈现。让我们通过以下示例卡片组来展示这一功能，该示例展示了美国的前四位总统：

George Washington
*1732     †1799
President: 1789 – 1797

PortraitGeorgeWashington

SignatureGeorgeWashington
John Adams
* 1735     † 1826
President: 1797 – 1801

PortraitJohnAdams

SignatureJohnAdams
Thomas Jefferson
* 1743     † 1826
President: 1801 – 1809

PortraitThomasJefferson

SignatureThomasJefferson
James Madison
* 1751     † 1836
President: 1809 – 1817

PortraitJamesMadison

SignatureJamesMadison

Docsy 支持通过不同的短代码创建此类卡片面板：

  • cardpane 短代码：作为容纳多个卡片的容器元素。
  • card 短代码：每个短代码代表一个独立的卡片。虽然卡片通常组合在卡片组内，但单个卡片也可以独立使用。card 短代码可以包含编程代码、文本、图像或任何其他类型的 Markdown 或 HTML 标记作为内容。对于编程代码，卡片提供自动代码高亮功能，以及其他可选特性，如行号显示、特定行高亮等。

Shortcode card: textual content

使用 card 卡片短代码来展示卡片。以下代码示例展示了如何编写卡片元素：

{{< card header="**Imagine**" title="Artist and songwriter: John Lennon" subtitle="Co-writer: Yoko Ono"
          footer="![SignatureJohnLennon](https://server.tld/…/signature.png 'Signature John Lennon')">}}
Imagine there's no heaven, It's easy if you try<br/>
No hell below us, above us only sky<br/>
Imagine all the people living for today…

…
{{< /card >}}

This code translates to the left card shown below, showing the lyrics of John Lennon’s famous song Imagine. A second explanatory card element to the right indicates and explains the individual components of a card:

Imagine
Artist and songwriter: John Lennon
Co-writer: Yoko Ono

Imagine there’s no heaven, It’s easy if you try
No hell below us, above us only sky
Imagine all the people living for today…

Imagine there’s no countries, it isn’t hard to do
Nothing to kill or die for, and no religion too
Imagine all the people living life in peace…

Imagine no possessions, I wonder if you can
No need for greed or hunger - a brotherhood of man
Imagine all the people sharing all the world…

You may say I’m a dreamer, but I’m not the only one
I hope someday you’ll join us and the world will live as one

SignatureJohnLennon
Header: specified via named parameter Header
Card title: specified via named parameter title
Card subtitle: specified via named parameter subtitle

Content: inner content of the shortcode, this may be plain text or formatted text, images, videos, … . If your content is markdown, use the percent sign % as outermost delimiter of your card shortcode, your markup should look like {{% card %}}Your **markdown** content{{% /card %}}. In case of HTML content, use square brackets <> as outermost delimiters: {{< card >}}Your <b>HTML</b> content{{< /card >}}

Footer: specified via named parameter footer

While the main content of the card is taken from the inner markup of the card shortcode, the optional elements footer, header, title, and subtitle are all specified as named parameters of the shortcode.

Shortcode card: programming code

If you want to display programming code on your card, set the named parameter code of the card to true. The following sample demonstrates how to code a card element with the famous Hello world! application coded in C:

{{< card code=true header="**C**" lang="C" >}}
#include <stdio.h>
#include <stdlib.h>

int main(void)
{
  puts("Hello World!");
  return EXIT_SUCCESS;
}
{{< /card >}}

This code translates to the card shown below:

C 

#include <stdio.h>
#include <stdlib.h>

int main(void)
{
  puts("Hello World!");
  return EXIT_SUCCESS;
}


If called with parameter code=true, the card shortcode can optionally hold the named parameters lang and/or highlight. The values of these optional parameters are passed on as second LANG and third OPTIONS arguments to Hugo’s built-in highlight function which is used to render the code block presented on the card.

Card groups

Displaying two ore more cards side by side can be easily achieved by putting them between the opening and closing elements of a cardpane shortcode. The general markup of a card group resembles closely the markup of a tabbed pane:

{{< cardpane >}}
  {{< card header="Header card 1" >}}
    Content card 1
  {{< /card >}}
  {{< card header="Header card 2" >}}
    Content card 2
  {{< /card >}}
  {{< card header="Header card 3" >}}
    Content card 3
  {{< /card >}}
{{< /cardpane >}}

Contrary to tabs, cards are presented side by side, however. This is especially useful it you want to compare different programming techniques (traditional vs. modern) on two cards, like demonstrated in the example above:

Java 5 
 File[] hiddenFiles =
new File("directory_name") .listFiles(new FileFilter() { public boolean
accept(File file) { return file.isHidden(); } });
Java 8, Lambda expression 
 File[] hiddenFiles
= new File("directory_name") .listFiles(File::isHidden);