Badge - 徽章

badge 徽章简码在文本中显示带有可调整颜色、标题和图标的小标记.

Important Version1.0.0 Engineer 信息New Great

用法

当示例使用带有命名参数的简码时,您也可以自由地从自己的部分调用此简码.

{{% badge %}}Important{{% /badge %}}
{{% badge style="primary" title="Version" %}}1.0.0{{% /badge %}}
{{% badge style="red" icon="angle-double-up" %}}Engineer{{% /badge %}}
{{% badge style="info" %}}New{{% /badge %}}
{{% badge color="fuchsia" icon="fab fa-hackerrank" %}}Great{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
    "page"    .
    "content" "Important"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page"  .
  "style" "primary"
  "title" "Version"
  "content" "1.0.0"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page"  .
  "style" "red"
  "icon"  "angle-double-up"
  "content" "Engineer"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page"  .
  "style" "info"
  "content" "New"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page"  .
  "color" "fuchsia"
  "icon"  "fab fa-hackerrank"
  "content" "Awesome"
)}}

参数

名字	默认值	注释
style	`default`	徽章使用的样式方案. - 按严重性: `info`, `note`, `tip`, `warning` - 按品牌颜色: `primary`, `secondary`, `accent` - 按颜色: `blue`, `green`, `grey`, `orange`, `red` - 按特殊颜色: `default`, `transparent`, `code`
color	请参阅注释	要使用CSS颜色值如果未设置,则选择的颜色取决于style. 任何指定值都将覆盖默认值. 对于严重性样式:匹配良好的严重性颜色 - 对于所有其他样式:相应的颜色
title	请参阅注释	徽章提醒标题的任意文本.根据 style,可能会有一个默认标题.任何指定值都将覆盖默认值. - 对于严重性样式:严重性的匹配标题 - 对于所有其他样式: <empty> 如果不希望严重性样式的标题,则必须将此参数设置为 `" "`(有空格的非空字符串)
icon	请参阅注释	字体真棒图标名称设置为标题的左侧.根据 style,可能会有一个默认图标.任何指定值都将覆盖默认值. - 对于严重性样式:一个匹配很好的严重性图标 - 对于所有其他样式: <empty> 如果不希望严重性样式没有图标,则必须将此参数设置为 `" "`(有空格的非空字符串)
<content>	<empty>	徽章提醒的任意文本.

示例

Style - 样式

按严重性

{{% badge style="info" %}}New{{% /badge %}}
{{% badge style="note" %}}Change{{% /badge %}}
{{% badge style="tip" %}}Optional{{% /badge %}}
{{% badge style="warning" %}}Breaking{{% /badge %}}

信息New 注释Change 提示Optional 警告Breaking

按品牌颜色

{{% badge style="primary" icon="bullhorn" title="Announcement" %}}Mandatory{{% /badge %}}
{{% badge style="secondary" icon="bullhorn" title="Announcement" %}}Optional{{% /badge %}}
{{% badge style="accent" icon="bullhorn" title="Announcement" %}}Special{{% /badge %}}

AnnouncementMandatory AnnouncementOptional AnnouncementSpecial

按颜色

{{% badge style="blue" icon="palette" title="Color" %}}Blue{{% /badge %}}
{{% badge style="green" icon="palette" title="Color" %}}Green{{% /badge %}}
{{% badge style="grey" icon="palette" title="Color" %}}Grey{{% /badge %}}
{{% badge style="orange" icon="palette" title="Color" %}}Orange{{% /badge %}}
{{% badge style="red" icon="palette" title="Color" %}}Red{{% /badge %}}

ColorBlue ColorGreen ColorGrey ColorOrange ColorRed

按特殊颜色

{{% badge style="default" icon="palette" title="Color" %}}Default{{% /badge %}}
{{% badge style="transparent" icon="palette" title="Color" %}}Transparent{{% /badge %}}

ColorDefault ColorTransparent

变种

没有图标和标题文本

{{% badge %}}1.0.0{{% /badge %}}
{{% badge style="info" icon=" " title=" " %}}Great{{% /badge %}}
{{% badge style="red" %}}Engineer{{% /badge %}}

1.0.0 Great Engineer

不带图标

{{% badge title="Version" %}}1.0.0{{% /badge %}}
{{% badge style="info" icon=" " %}}Great{{% /badge %}}
{{% badge style="red" title="Rank" %}}Engineer{{% /badge %}}

Version1.0.0 信息Great RankEngineer

不带标题文本

{{% badge icon="star" %}}1.0.0{{% /badge %}}
{{% badge style="info" title=" " %}}Great{{% /badge %}}
{{% badge style="red" icon="angle-double-up" %}}Engineer{{% /badge %}}

1.0.0 Great Engineer

全部设置

{{% badge icon="star" title="Version" %}}1.0.0{{% /badge %}}
{{% badge style="info" %}}Great{{% /badge %}}
{{% badge style="red" icon="angle-double-up" title="Rank" %}}Engineer{{% /badge %}}

Version1.0.0 信息Great RankEngineer

覆盖严重性

{{% badge style="info" icon="rocket" title="Feature" %}}Great{{% /badge %}}

FeatureGreat

其他

具有用户定义的颜色,字体真棒品牌图标和Markdown标题和内容

{{% badge color="fuchsia" icon="fab fa-hackerrank" title="**Font**" %}}**Great**{{% /badge %}}

FontGreat

使用图标内容

您可以将徽章与icon图标简码结合使用,以创建更令人惊叹的视觉效果.

在这种情况下,您需要声明{{< badge >}} 而不是 {{% badge %}}.请注意,在这种情况下,无法在内容中使用Markdown.

{{< badge style="primary" icon="angle-double-up" >}}{{% icon star %}}{{< /badge >}}  
{{< badge style="primary" icon="angle-double-up" >}}{{% icon star %}} 星图标{{< /badge >}}  
{{< badge style="primary" title="样式=主要" >}}{{% icon star %}}{{< /badge >}}  
{{< badge style="primary" title="样式=主要" >}}{{% icon star %}} 星图标{{< /badge >}}  
{{< badge style="primary" icon="angle-double-up" title="样式=主要" >}}{{% icon star %}}{{< /badge >}}  
{{< badge style="primary" icon="angle-double-up" title="样式=主要" >}}{{% icon star %}} 星图标{{< /badge >}}

星图标
样式=主要
样式=主要星图标
样式=主要
样式=主要星图标

文本内部

这是一段演示内容,我将向您展示,如何在文本内插入徽章,如您所见 {{% badge style="blue" icon="laugh-squint" %}}Great{{% /badge %}}徽章在此.

这是一段演示内容,我将向您展示,如何在文本内插入徽章,如您所见 Great徽章在此.