feat(badges): colors and border (#774)

* feat(badges): add more colors and allow to disable the border

* feat(badges): more colors

* chore: generate

* docs: add Others inside the sidebar

* chore: i18n

---------

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>
This commit is contained in:
Ludovic Fernandez
2025-08-23 15:42:23 +02:00
committed by GitHub
parent 7b8e1bdfd1
commit 22c1a4f9df
11 changed files with 336 additions and 147 deletions

View File

@@ -1,8 +1,6 @@
---
title: 其他短代码
linkTitle: 其他
sidebar:
exclude: true
next: /docs/guide/deploy-site
---
@@ -11,49 +9,90 @@ next: /docs/guide/deploy-site
这些短代码稳定性较低,可能随时变更。
{{< /callout >}}
## 徽章
### 示例
{{< badge "default" >}}&nbsp;
{{< badge content="border" border=false >}}&nbsp;
{{< badge content="color" color="green" >}}&nbsp;
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}&nbsp;
{{< badge content="icon" icon="sparkles" >}}&nbsp;
### 使用
#### 默认
{{< badge "徽章" >}}&nbsp;
```
{{</* badge "徽章" */>}}
```
效果:
#### 颜色
{{< badge "徽章" >}}
变体:
{{< badge content="徽章" >}}&nbsp;
{{< badge content="徽章" color="purple" >}}&nbsp;
{{< badge content="徽章" color="indigo" >}}&nbsp;
{{< badge content="徽章" color="blue" >}} &nbsp;
{{< badge content="徽章" color="green" >}} &nbsp;
{{< badge content="徽章" color="yellow" >}} &nbsp;
{{< badge content="徽章" color="amber" >}} &nbsp;
{{< badge content="徽章" color="orange" >}} &nbsp;
{{< badge content="徽章" color="red" >}}&nbsp;
```
{{</* badge content="信息" type="info" */>}}
{{</* badge content="警告" type="warning" */>}}
{{</* badge content="错误" type="error" */>}}
{{</* badge content="徽章" */>}}
{{</* badge content="徽章" color="purple" */>}}
{{</* badge content="徽章" color="indigo" */>}}
{{</* badge content="徽章" color="blue" */>}}
{{</* badge content="徽章" color="green" */>}}
{{</* badge content="徽章" color="yellow" */>}}
{{</* badge content="徽章" color="amber" */>}}
{{</* badge content="徽章" color="orange" */>}}
{{</* badge content="徽章" color="red" */>}}
```
效果:
{{< badge content="信息" type="info" >}} &nbsp;
{{< badge content="警告" type="warning" >}} &nbsp;
{{< badge content="错误" type="error" >}}
带链接和图标:
{{< badge content="徽章" border=false >}} &nbsp;
{{< badge content="徽章" color="purple" border=false >}} &nbsp;
{{< badge content="徽章" color="indigo" border=false >}} &nbsp;
{{< badge content="徽章" color="blue" border=false >}} &nbsp;
{{< badge content="徽章" color="green" border=false >}} &nbsp;
{{< badge content="徽章" color="yellow" border=false >}} &nbsp;
{{< badge content="徽章" color="amber" border=false >}} &nbsp;
{{< badge content="徽章" color="orange" border=false >}}&nbsp;
{{< badge content="徽章" color="red" border=false >}}&nbsp;
```
{{</* badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
{{</* badge content="徽章" border=false */>}}
{{</* badge content="徽章" color="purple" border=false */>}}
{{</* badge content="徽章" color="indigo" border=false */>}}
{{</* badge content="徽章" color="blue" border=false */>}}
{{</* badge content="徽章" color="green" border=false */>}}
{{</* badge content="徽章" color="yellow" border=false */>}}
{{</* badge content="徽章" color="amber" border=false */>}}
{{</* badge content="徽章" color="orange" border=false */>}}
{{</* badge content="徽章" color="red" border=false */>}}
```
效果:
#### 变体
{{< badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
{{< badge content="徽章" icon="sparkles" >}}&nbsp;
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}&nbsp;
## 选项
```
{{</* badge content="徽章" icon="sparkles" */>}}
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
```
| 范围 | 描述 |
|-----------|-------------------------------------|
| `content` | 徽章的文字。 |
| `link` | 徽章的链接。 |
| `icon` | 徽章的图标。 |
| `type` | 徽章的类型。(默认,`info``warning``error` |
| `class` | 徽章的等级。 |
### 选项
| 姓名 | 描述 |
|-----------|----------------------------------------------------------------------------------------------------|
| `content` | 徽章的文字。 |
| `link` | 徽章的链接。 |
| `icon` | 徽章的图标。 |
| `color` | 徽章的颜色。 <br/> `gray` (默认), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`. |
| `class` | 徽章的等级。 |
| `border` | 添加或删除边框 (默认true). |
## YouTube