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>
2025-08-24 21:56:34 -04:00 · 2025-08-23 15:42:23 +02:00
parent 7b8e1bdfd1
commit 22c1a4f9df
11 changed files with 336 additions and 147 deletions
--- a/exampleSite/content/docs/guide/shortcodes/cards.md
+++ b/exampleSite/content/docs/guide/shortcodes/cards.md
@@ -37,15 +37,15 @@ linkTitle: Cards

 ## Card Parameters

-| Parameter  | Description                                                     |
-|------------|-----------------------------------------------------------------|
-| `link`     | URL (internal or external).                                     |
-| `title`    | Title heading for the card.                                     |
-| `subtitle` | Subtitle heading (supports Markdown).                           |
-| `icon`     | Name of the icon.                                               |
-| `tag`      | Text in tag.                                                    |
-| `tagType`  | Type of the tag: default (gray), `info`, `warning` and `error`. |
-  
+| Parameter  | Description                                                                           |
+|------------|---------------------------------------------------------------------------------------|
+| `link`     | URL (internal or external).                                                           |
+| `title`    | Title heading for the card.                                                           |
+| `subtitle` | Subtitle heading (supports Markdown).                                                 |
+| `icon`     | Name of the icon. See [icons]({{% relRef "icon" %}}) for more information.            |
+| `tag`      | Text in tag.                                                                          |
+| `tagColor` | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
+
 ## Image Card

 Additionally, the card supports adding image and processing through these parameters:
@@ -74,18 +74,19 @@ Card supports adding tags which could be useful to show extra status information

 {{< cards >}}
  {{< card link="../callout" title="Card with default tag" tag="tag text" >}}
-  {{< card link="../callout" title="Card with error tag" tag="tag text" tagType="error" >}}
-  {{< card link="../callout" title="Card with info tag" tag="tag text" tagType="info" >}}
-  {{< card link="../callout" title="Card with warning tag" tag="tag text" tagType="warning" >}}
-  {{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" tag="tag text" tagType="error" >}}
+  {{< card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" >}}
+  {{< card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" >}}
+  {{< card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" >}}
+  {{< card link="/" title="Image Card" image="images/space.jpg" subtitle="Internet Image" tag="tag text" tagColor="red" >}}
 {{< /cards >}}

 ```
 {{</* cards */>}}
  {{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}}
-  {{</* card link="../callout" title="Card with default red tag" tag="tag text" tagType="error" */>}}
-  {{</* card link="../callout" title="Card with blue tag" tag="tag text" tagType="info" */>}}
-  {{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagType="warning" */>}}
+  {{</* card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" */>}}
+  {{</* card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" */>}}
+  {{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" */>}}
+  {{</* card link="/" title="Image Card" image="images/space.jpg" subtitle="Internet Image" tag="tag text" tagColor="red" */>}}
 {{</* /cards */>}}
 ```

--- a/exampleSite/content/docs/guide/shortcodes/others.fa.md
+++ b/exampleSite/content/docs/guide/shortcodes/others.fa.md
@@ -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 "Badge" >}}&nbsp;

 ```
-{{</* badge "نشان" */>}}
+{{</* badge "Badge" */>}}
 ```

-نتیجه:
+#### الألوان

-{{< badge "نشان" >}}
-
-انواع مختلف:
+{{< 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="اطلاعات" type="info" */>}}
-{{</* badge content="هشدار" type="warning" */>}}
-{{</* badge content="خطا" 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" */>}}
 ```

-نتیجه:
-
-{{< badge content="اطلاعات" type="info" >}} &nbsp;
-{{< badge content="هشدار" type="warning" >}} &nbsp;
-{{< badge content="خطا" type="error" >}}
-
-با لینک و آیکون:
+{{< 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="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
+{{</* 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 */>}}
 ```

-نتیجه:
+#### المتغيرات

-{{< badge content="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" >}}
+{{< 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" */>}}
+```

 ### خيارات

-| المعلمة   | وصف                                               |
-|-----------|---------------------------------------------------|
-| `content` | نص الشارة.                                        |
-| `link`    | رابط الشارة.                                      |
-| `icon`    | رمز الشارة.                                       |
-| `type`    | نوع الشارة. (افتراضي، `info`، `warning`، `error`) |
-| `class`   | فئة الشارة.                                       |
+| المعلمة   | وصف                                                                                                       |
+|-----------|-----------------------------------------------------------------------------------------------------------|
+| `content` | نص الشارة.                                                                                                |
+| `link`    | رابط الشارة.                                                                                              |
+| `icon`    | رمز الشارة.                                                                                               |
+| `color`   | `gray` (تقصير), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`.<br/> لون الشارة. |
+| `class`   | فئة الشارة.                                                                                               |
+| `border`  | إضافة أو إزالة الحدود (افتراضي: true                                                                      |

 ## یوتیوب

--- a/exampleSite/content/docs/guide/shortcodes/others.ja.md
+++ b/exampleSite/content/docs/guide/shortcodes/others.ja.md
@@ -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 "Badge" >}}&nbsp;

 ```
 {{</* badge "Badge" */>}}
 ```

-結果:
+#### 色

-{{< badge "Badge" >}}
-
-バリエーション:
+{{< 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" */>}}
 ```

-結果:
-
-{{< badge content="info" type="info" >}} &nbsp;
-{{< badge content="warning" type="warning" >}} &nbsp;
-{{< badge content="error" type="error" >}}
-
-リンクとアイコン付き:
+{{< 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 */>}}
+```
+
+#### 変種
+
+{{< 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" */>}}
 ```

-結果:
-
-{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
-
 ### オプション

-| パラメータ     | 説明                                      |
-|-----------|-----------------------------------------|
-| `content` | バッジのテキスト。                               |
-| `link`    | バッジのリンク。                                |
-| `icon`    | バッジのアイコン。                               |
-| `type`    | バッジの種類。(デフォルト、`info`、`warning`、`error`) |
-| `class`   | バッジのクラス。                                |
+| パラメータ     | 説明                                                                                                                       |
+|-----------|--------------------------------------------------------------------------------------------------------------------------|
+| `content` | バッジのテキスト。                                                                                                                |
+| `link`    | バッジのリンク。                                                                                                                 |
+| `icon`    | バッジのアイコン。                                                                                                                |
+| `color`   | The color of the badge. <br/> `gray` (default), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`. |
+| `class`   | バッジのクラス。                                                                                                                 |
+| `border`  | 境界線を追加または削除します (デフォルト: true)。                                                                                            |

 ## YouTube

--- a/exampleSite/content/docs/guide/shortcodes/others.md
+++ b/exampleSite/content/docs/guide/shortcodes/others.md
@@ -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.
--- a/exampleSite/content/docs/guide/shortcodes/others.zh-cn.md
+++ b/exampleSite/content/docs/guide/shortcodes/others.zh-cn.md
@@ -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

--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -182,7 +182,9 @@
      "hx:bg-gradient-to-r",
      "hx:bg-gray-100",
      "hx:bg-green-100",
+      "hx:bg-indigo-100",
      "hx:bg-neutral-50",
+      "hx:bg-orange-50",
      "hx:bg-primary-100",
      "hx:bg-primary-400",
      "hx:bg-primary-600",
@@ -202,6 +204,8 @@
      "hx:border-gray-200",
      "hx:border-gray-500",
      "hx:border-green-200",
+      "hx:border-indigo-200",
+      "hx:border-orange-100",
      "hx:border-purple-200",
      "hx:border-red-200",
      "hx:border-t",
@@ -248,8 +252,10 @@
      "hx:dark:bg-dark/50",
      "hx:dark:bg-gray-50/10",
      "hx:dark:bg-green-900/30",
+      "hx:dark:bg-indigo-900/30",
      "hx:dark:bg-neutral-800",
      "hx:dark:bg-neutral-900",
+      "hx:dark:bg-orange-400/20",
      "hx:dark:bg-primary-300/10",
      "hx:dark:bg-primary-400/10",
      "hx:dark:bg-primary-600",
@@ -262,8 +268,10 @@
      "hx:dark:border-gray-100/20",
      "hx:dark:border-gray-400",
      "hx:dark:border-green-200/30",
+      "hx:dark:border-indigo-200/30",
      "hx:dark:border-neutral-700",
      "hx:dark:border-neutral-800",
+      "hx:dark:border-orange-400/30",
      "hx:dark:border-purple-200/30",
      "hx:dark:border-red-200/30",
      "hx:dark:border-white/10",
@@ -305,8 +313,10 @@
      "hx:dark:text-gray-400",
      "hx:dark:text-gray-50",
      "hx:dark:text-green-200",
+      "hx:dark:text-indigo-200",
      "hx:dark:text-neutral-200",
      "hx:dark:text-neutral-400",
+      "hx:dark:text-orange-300",
      "hx:dark:text-primary-600",
      "hx:dark:text-purple-200",
      "hx:dark:text-red-200",
@@ -623,8 +633,10 @@
      "hx:text-gray-800",
      "hx:text-gray-900",
      "hx:text-green-900",
+      "hx:text-indigo-900",
      "hx:text-left",
      "hx:text-lg",
+      "hx:text-orange-800",
      "hx:text-primary-800",
      "hx:text-purple-900",
      "hx:text-red-900",