Tabbed panes

在编写技术文档时，使用选项卡式面板通常非常实用。

一个常见的应用场景是：展示多个语法高亮的代码块，这些代码块呈现的是同一个问题，以及如何用不同编程语言来解决它。

效果

例如，下面的选项卡面板展示了著名的“Hello world!”程序在不同编程语言中的变体——这通常是人们学习一门新编程语言时编写的第一个程序：

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

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

#include <iostream>

int main()
{
  std::cout << "Hello World!" << std::endl;
}

package main
import "fmt"
func main() {
  fmt.Printf("Hello World!\n")
}

class HelloWorld {
  static public void main( String args[] ) {
    System.out.println( "Hello World!" );
  }
}

fun main(args : Array<String>) {
    println("Hello, world!")
}

print "Hello world"

<?php
echo 'Hello World!';
?>

print("Hello World!")

puts "Hello World!"

object HelloWorld extends App {
  println("Hello world!")
}

语法

Docsy 模板提供了两个短代码 tabpane 和 tab，可让您轻松创建选项卡式面板。要了解如何使用它们，请参考以下代码块，它呈现为一个右对齐的面板，其中包含一个禁用标签页和三个活动标签页：

{{< tabpane text=true right=true >}}
  {{% tab header="**Languages**:" disabled=true /%}}
  {{% tab header="English" lang="en" %}}
  ![Flag United Kingdom](flags/uk.png)
  Welcome!
  {{% /tab %}}
  {{< tab header="German" lang="de" >}}
    <b>Herzlich willkommen!</b>
    <img src="flags/de.png" alt="Flag Germany" style="float: right; padding: 0 0 0 0px">
  {{< /tab >}}
  {{% tab header="Swahili" lang="sw" %}}
  ![Flag Tanzania](flags/tz.png)
  **Karibu sana!**
  {{% /tab %}}
{{< /tabpane >}}

这段代码将呈现为下方右对齐的选项卡式面板，分别展示英语、德语和斯瓦希里语的“欢迎！”问候语：

Flag United Kingdom Welcome!

Herzlich willkommen! Flag Germany

Flag Tanzania Karibu sana!

Shortcode details

Tabbed panes are implemented using two shortcodes: tabpane containing two or more nested tabs.

`tabpane`

The tabpane shortcode, which is the container element for the tabs, supports the following named parameters, all of which are optional:

lang: the default code-block language to use for all contained tabs
highlight: parameter passed on to the code-block highlight function, as described below
langEqualsHeader: set to true when header text matches the tab language.
persist: one of header, lang, or disabled
persistLang: deprecated, use persist instead
right: set to true if you want right-aligned tabs
text: set to true if the content of all contained tabs are text. Default is false and assumes the content is code.

The value of the optional parameters lang and highlight are passed on as second LANG and third OPTIONS arguments to Hugo’s built-in highlight function, which is used to render the code blocks of the individual tabs.

Tab selection is persisted by default. When unspecified, persist defaults to header when text=true or lang is set; otherwise persist defaults to lang. To disable tab persistence, set persist=disable.

`tab`

The tab shortcode represent the tabs you want to show. It supports the following named parameters, all of which are optional:

header: defines the tab’s header text. When omitted it defaults to text of the form “Tab n”. You can omit the parameter name if it is the only tab parameter:
```
{{< tab "My tab header" >}} … {{< /tab >}}
```
lang: code-block language for code tabs
highlight: parameter passed on to the code-block highlight function
right: set to true in order to split tab panes into a left aligned and a right aligned tab groups. Specify right=true in the dividing tab. By using right=true more than once, you can even render multiple tab groups.
disabled: set to true to disable a tab.
text: set to true for text tabs. By default tabs are assumed to contain code.

For enabled tabs, there are two modes for content display, code representation and textual representation:

By default, the tab’s content is rendered as a code block. In order to get proper syntax highlighting, specify the named parameter lang –and optionally the parameter highlight– for each tab. Parameters set in the parent tabpane shortcode will be overwritten.
If the contents of your tabs should be rendered as text with different styles and optional images, specify text=true as parameter of your tab:

Reminder: If your content is markdown, use the percent sign % as delimiter for your tab shortcode, like this:
{{% tab %}} Your \*\*markdown\*\* content {{% /tab %}}