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: Other Shortcodes
linkTitle: Others
sidebar:
exclude: true
next: /docs/guide/deploy-site
---
@@ -13,48 +11,91 @@ next: /docs/guide/deploy-site
## Badge
### Examples
{{< 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;
### Usage
#### Default
{{< badge "Badge" >}}&nbsp;
```
{{</* badge "Badge" */>}}
```
Result:
#### Colors
{{< badge "Badge" >}}
Variants:
{{< badge content="Badge" >}}&nbsp;
{{< badge content="Badge" color="purple" >}}&nbsp;
{{< badge content="Badge" color="indigo" >}}&nbsp;
{{< badge content="Badge" color="blue" >}} &nbsp;
{{< badge content="Badge" color="green" >}} &nbsp;
{{< badge content="Badge" color="yellow" >}} &nbsp;
{{< badge content="Badge" color="amber" >}} &nbsp;
{{< badge content="Badge" color="orange" >}} &nbsp;
{{< badge content="Badge" color="red" >}}&nbsp;
```
{{</* badge content="info" type="info" */>}}
{{</* badge content="warning" type="warning" */>}}
{{</* badge content="error" type="error" */>}}
{{</* badge content="Badge" */>}}
{{</* badge content="Badge" color="purple" */>}}
{{</* badge content="Badge" color="indigo" */>}}
{{</* badge content="Badge" color="blue" */>}}
{{</* badge content="Badge" color="green" */>}}
{{</* badge content="Badge" color="yellow" */>}}
{{</* badge content="Badge" color="amber" */>}}
{{</* badge content="Badge" color="orange" */>}}
{{</* badge content="Badge" color="red" */>}}
```
Result:
{{< badge content="info" type="info" >}} &nbsp;
{{< badge content="warning" type="warning" >}} &nbsp;
{{< badge content="error" type="error" >}}
With link and icon:
{{< badge content="Badge" border=false >}} &nbsp;
{{< badge content="Badge" color="purple" border=false >}} &nbsp;
{{< badge content="Badge" color="indigo" border=false >}} &nbsp;
{{< badge content="Badge" color="blue" border=false >}} &nbsp;
{{< badge content="Badge" color="green" border=false >}} &nbsp;
{{< badge content="Badge" color="yellow" border=false >}} &nbsp;
{{< badge content="Badge" color="amber" border=false >}} &nbsp;
{{< badge content="Badge" color="orange" border=false >}}&nbsp;
{{< badge content="Badge" color="red" border=false >}}&nbsp;
```
{{</* badge content="Badge" border=false */>}}
{{</* badge content="Badge" color="purple" border=false */>}}
{{</* badge content="Badge" color="indigo" border=false */>}}
{{</* badge content="Badge" color="blue" border=false */>}}
{{</* badge content="Badge" color="green" border=false */>}}
{{</* badge content="Badge" color="yellow" border=false */>}}
{{</* badge content="Badge" color="amber" border=false */>}}
{{</* badge content="Badge" color="orange" border=false */>}}
{{</* badge content="Badge" color="red" border=false */>}}
```
#### Variants
{{< badge content="Badge" icon="sparkles" >}}&nbsp;
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}&nbsp;
```
{{</* badge content="Badge" icon="sparkles" */>}}
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
```
Result:
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
### Options
| Name | Description |
|-----------|--------------------------------------------------------------|
| `content` | The text of the badge. |
| `link` | The link of the badge. |
| `icon` | The icon of the badge. |
| `type` | The type of the badge. (default, `info`, `warning`, `error`) |
| `class` | The class of the badge. |
| Name | Description |
|-----------|--------------------------------------------------------------------------------------------------------------------------|
| `content` | The text of the badge. |
| `link` | The link of the badge. |
| `icon` | The icon of the badge. |
| `color` | The color of the badge. <br/> `gray` (default), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`. |
| `class` | The class of the badge. |
| `border` | Adds or removes the border (default: true). |
## YouTube
Embed a YouTube video.