Tab - 标签

您可以使用tab短代码来显示单个选项卡.

如果要使用显式语言标记代码示例,这将特别有用.

如果您希望将多个选项卡组合在一起,您可以将选项卡包装到 tabs shortcode.

参数

名字 默认值 注释
style 请参阅注释 用于徽章的样式方案.

- 按严重性: info, note, tip, warning
- 按品牌颜色: primary, secondary, accent
- 按颜色: blue, green, grey, orange, red
- 按特殊颜色: default, transparent, code
color 请参阅注释 要使用的 CSS 颜色值 .如果未设置,则所选颜色取决于 sytle.任何指定值都将覆盖默认值.

- 对于严重性样式：严重性的颜色匹配良好
- 对于所有其他样式：相应的颜色
title 请参阅注释 选项卡的任意标题.根据 style,可能会有一个默认标题.任何指定值都将覆盖默认值.

- 对于严重性样式：严重性的匹配标题
- 对于所有其他样式: <empty>

如果不希望严重性样式的标题,则必须将此参数设置为 " " (填充空格,非空字符串）
icon 请参阅注释 字体真棒图标名称 设置为标题的左侧.根据 stely,可能会有一个默认图标.任何指定值都将覆盖默认值.

- 对于严重性样式：严重性的一个很好的匹配图标
- 对于所有其他样式: <empty>

如果不希望严重性样式没有图标,则必须将此参数设置为 " " (充满空格,非空字符串)
<content> <empty> 要在选项卡中显示的任意文本.

单个标签代码块

示例1:单个标签代码块 - 使用Debian 工具FD命令为例,用shell语法高亮,标签名为 FD
{{% tab title="FD" %}}

```shell
fd '.*zh-cn\.md$' /site/content/  -x  opencc -i {} -o {}.zh-tw.md -c s2twp.json
```
{{% /tab %}}

输出:

​
fd '.*zh-cn\.md$' /site/content/  -x  opencc -i {} -o {}.zh-tw.md -c s2twp.json
示例2:单个混合代码块:使用Debian 工具FD命令为例,用shell语法高亮,标签名为 FD,并且包含文本
{{% tab title="FD" %}}
混合代码块可以包含代码,还可以包含任意文本.在这种情况下,文本和代码将获得边距.
```shell
fd '.*zh-cn\.md$' /site/content/  -x  opencc -i {} -o {}.zh-tw.md -c s2twp.json
```
{{% /tab %}}

输出:

​

混合代码块可以包含代码,还可以包含任意文本.在这种情况下,文本和代码将获得边距.

fd '.*zh-cn\.md$' /site/content/  -x  opencc -i {} -o {}.zh-tw.md -c s2twp.json
多个标签代码块
{{< tabs groupid="FD&Find" >}}
{{% tab title="FD" %}}
```shell
fd '.*zh-cn\.md$' /site/content/  -x  opencc -i {} -o {}.zh-tw.md -c s2twp.json
```
{{% /tab %}}

{{% tab title="Find" %}}
```shell
find /site/content/ -regex '.*.zh-cn.md$' -type f -exec opencc -i {} -o {}.zh-tw.md -c s2twp.json \;
```
{{% /tab %}}
{{< /tabs  >}}

输出:

​
fd '.*zh-cn\.md$' /site/content/  -x  opencc -i {} -o {}.zh-tw.md -c s2twp.json
find /site/content/ -regex '.*.zh-cn.md$' -type f -exec opencc -i {} -o {}.zh-tw.md -c s2twp.json \;

理解 style 和 color 参数

示例:彩色标签代码块
{{< tabs >}}
{{% tab title="style=blue" style="blue" %}}
`style`参数设置为`blue`.
这会将背景设置为所选样式颜色的较浅版本,如主题变体中配置的那样.
{{% /tab %}}
{{% tab title="color=blue" color="blue" %}}
仅设置`color`参数.
这会将背景设置为所选 CSS 颜色值的较浅版本.
{{% /tab %}}
{{% tab title="style=default color=blue" style="default" color="blue" %}}
`style`,`color`参数会影响参数的应用方式.
这`default`样式将背景设置为您的主题背景颜色,您可以改变主题`--MAIN-BG-color`变更配置.
{{% /tab %}}
{{% tab title="style=info" style="info" %}}
`style`数设置为严重性样式 - info.
这会将背景设置为主题变体中配置的所选样式颜色的较浅版本,并且还会影响所选图标.
{{% /tab %}}
{{% tab title="style=tip" style="tip" %}}
`style`数设置为严重性样式 - tip.
这会将背景设置为主题变体中配置的所选样式颜色的较浅版本,并且还会影响所选图标.
{{% /tab %}}
{{% tab title="style=tip color=blue" style="tip" color="blue" %}}
虽然`style`设置为tip,但边框和背景颜色还是被`color`覆盖.
{{% /tab %}}
{{< /tabs >}}

输出:

​

style参数设置为blue. 这会将背景设置为所选样式颜色的较浅版本,如主题变体中配置的那样.

仅设置color参数. 这会将背景设置为所选 CSS 颜色值的较浅版本.

style,color参数会影响参数的应用方式. 这default样式将背景设置为您的主题背景颜色,您可以改变主题--MAIN-BG-color变更配置.

style数设置为严重性样式 - info. 这会将背景设置为主题变体中配置的所选样式颜色的较浅版本,并且还会影响所选图标.

style数设置为严重性样式- tip. 这会将背景设置为主题变体中配置的所选样式颜色的较浅版本,并且还会影响所选图标.

虽然style设置为tip,但边框和背景颜色还是被color覆盖.