mirror of
https://github.com/imfing/hextra.git
synced 2025-08-23 20:36:37 -04:00
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
committed by
GitHub
GitHub
parent
7b8e1bdfd1
commit
22c1a4f9df
File diff suppressed because one or more lines are too long
@@ -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 */>}}
|
||||
```
|
||||
|
||||
|
||||
@@ -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" >}}
|
||||
{{< badge content="border" border=false >}}
|
||||
{{< badge content="color" color="green" >}}
|
||||
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}
|
||||
{{< badge content="icon" icon="sparkles" >}}
|
||||
|
||||
### الاستخدام
|
||||
|
||||
#### تقصير
|
||||
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
```
|
||||
{{</* badge "نشان" */>}}
|
||||
{{</* badge "Badge" */>}}
|
||||
```
|
||||
|
||||
نتیجه:
|
||||
#### الألوان
|
||||
|
||||
{{< badge "نشان" >}}
|
||||
|
||||
انواع مختلف:
|
||||
{{< 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" */>}}
|
||||
{{</* 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" >}}
|
||||
{{< badge content="هشدار" type="warning" >}}
|
||||
{{< badge content="خطا" type="error" >}}
|
||||
|
||||
با لینک و آیکون:
|
||||
{{< 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" 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" >}}
|
||||
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
```
|
||||
{{</* 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 |
|
||||
|
||||
## یوتیوب
|
||||
|
||||
|
||||
@@ -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" >}}
|
||||
{{< badge content="border" border=false >}}
|
||||
{{< badge content="color" color="green" >}}
|
||||
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}
|
||||
{{< badge content="icon" icon="sparkles" >}}
|
||||
|
||||
### 使用法
|
||||
|
||||
#### デフォルト
|
||||
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
```
|
||||
{{</* badge "Badge" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
#### 色
|
||||
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
バリエーション:
|
||||
{{< 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" */>}}
|
||||
{{</* 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" >}}
|
||||
{{< badge content="warning" type="warning" >}}
|
||||
{{< badge content="error" type="error" >}}
|
||||
|
||||
リンクとアイコン付き:
|
||||
{{< 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" 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" >}}
|
||||
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
```
|
||||
{{</* 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
|
||||
|
||||
|
||||
@@ -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" >}}
|
||||
{{< badge content="border" border=false >}}
|
||||
{{< badge content="color" color="green" >}}
|
||||
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}
|
||||
{{< badge content="icon" icon="sparkles" >}}
|
||||
|
||||
### Usage
|
||||
|
||||
#### Default
|
||||
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
```
|
||||
{{</* badge "Badge" */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
#### Colors
|
||||
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
Variants:
|
||||
{{< 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" */>}}
|
||||
{{</* 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" >}}
|
||||
{{< badge content="warning" type="warning" >}}
|
||||
{{< badge content="error" type="error" >}}
|
||||
|
||||
With link and icon:
|
||||
{{< 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" 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" >}}
|
||||
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
```
|
||||
{{</* 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.
|
||||
|
||||
@@ -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" >}}
|
||||
{{< badge content="border" border=false >}}
|
||||
{{< badge content="color" color="green" >}}
|
||||
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}
|
||||
{{< badge content="icon" icon="sparkles" >}}
|
||||
|
||||
### 使用
|
||||
|
||||
#### 默认
|
||||
|
||||
{{< badge "徽章" >}}
|
||||
|
||||
```
|
||||
{{</* badge "徽章" */>}}
|
||||
```
|
||||
|
||||
效果：
|
||||
#### 颜色
|
||||
|
||||
{{< badge "徽章" >}}
|
||||
|
||||
变体：
|
||||
{{< 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" */>}}
|
||||
{{</* 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" >}}
|
||||
{{< badge content="警告" type="warning" >}}
|
||||
{{< badge content="错误" type="error" >}}
|
||||
|
||||
带链接和图标：
|
||||
{{< 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="徽章" 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" >}}
|
||||
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
## 选项
|
||||
```
|
||||
{{</* 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
|
||||
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1,18 +1,34 @@
|
||||
{{- $content := .content -}}
|
||||
{{- $type := .type | default "" -}}
|
||||
{{- $color := .color | default .type | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
|
||||
{{- $class := .class | default "" -}}
|
||||
{{- $border := .border | default false -}}
|
||||
{{- $icon := .icon | default "" -}}
|
||||
|
||||
{{- $defaultClass := "hx:text-gray-600 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:dark:text-neutral-200 hx:border-gray-200 hx:dark:border-neutral-700" -}}
|
||||
{{- /* Compatibility with previous names. */ -}}
|
||||
{{- $mapping := (dict
|
||||
"default" "gray"
|
||||
"tip" "green"
|
||||
"info" "blue"
|
||||
"warning" "yellow"
|
||||
"error" "red"
|
||||
"important" "purple"
|
||||
)
|
||||
-}}
|
||||
{{- $color = index $mapping $color | default $color | default "gray" -}}
|
||||
|
||||
{{- $styleClass := newScratch -}}
|
||||
{{- $styleClass.Set "info" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200" -}}
|
||||
{{- $styleClass.Set "warning" "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}}
|
||||
{{- $styleClass.Set "error" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
|
||||
{{- $styleClass.Set "gray" "hx:text-gray-600 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:dark:text-neutral-200 hx:border-gray-200 hx:dark:border-neutral-700" -}}
|
||||
{{- $styleClass.Set "purple" "hx:border-purple-200 hx:bg-purple-100 hx:text-purple-900 hx:dark:border-purple-200/30 hx:dark:bg-purple-900/30 hx:dark:text-purple-200" -}}
|
||||
{{- $styleClass.Set "indigo" "hx:border-indigo-200 hx:bg-indigo-100 hx:text-indigo-900 hx:dark:border-indigo-200/30 hx:dark:bg-indigo-900/30 hx:dark:text-indigo-200" -}}
|
||||
{{- $styleClass.Set "blue" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200" -}}
|
||||
{{- $styleClass.Set "green" "hx:border-green-200 hx:bg-green-100 hx:text-green-900 hx:dark:border-green-200/30 hx:dark:bg-green-900/30 hx:dark:text-green-200" -}}
|
||||
{{- $styleClass.Set "yellow" "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}}
|
||||
{{- $styleClass.Set "orange" "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" -}}
|
||||
{{- $styleClass.Set "amber" "hx:border-amber-200 hx:bg-amber-100 hx:text-amber-900 hx:dark:border-amber-200/30 hx:dark:bg-amber-900/30 hx:dark:text-amber-200" -}}
|
||||
{{- $styleClass.Set "red" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
|
||||
|
||||
{{- $borderClass := cond (eq $border true) "hx:border" "" -}}
|
||||
{{- $badgeClass := or ($styleClass.Get $type) $defaultClass -}}
|
||||
{{- $badgeClass := or ($styleClass.Get $color) ($styleClass.Get "gray") -}}
|
||||
<div class="hextra-badge {{ $class }}">
|
||||
<div class="hx:inline-flex hx:gap-1 hx:items-center hx:rounded-full hx:px-2.5 hx:leading-6 hx:text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">
|
||||
{{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
{{- $height := .height -}}
|
||||
{{- $imageStyle := .imageStyle -}}
|
||||
{{- $tag := .tag -}}
|
||||
{{- $tagType := .tagType -}}
|
||||
{{- $tagColor := .tagColor | default .tagType | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
|
||||
|
||||
{{ $linkClass := "hx:hover:border-gray-300 hx:bg-transparent hx:shadow-xs hx:dark:border-neutral-800 hx:hover:bg-slate-50 hx:hover:shadow-md hx:dark:hover:border-neutral-700 hx:dark:hover:bg-neutral-900" }}
|
||||
{{- with $image -}}
|
||||
@@ -55,7 +55,7 @@
|
||||
{{- if $tag }}
|
||||
{{- partial "shortcodes/badge.html" (dict
|
||||
"content" $tag
|
||||
"type" $tagType
|
||||
"color" $tagColor
|
||||
"class" "hextra-card-tag"
|
||||
"border" true
|
||||
)
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
A shortcode to create a badge.
|
||||
|
||||
@param {string} content The content of the badge.
|
||||
@param {string} type The type of the badge.
|
||||
@param {string} color The color of the badge.
|
||||
@param {string} class The class of the badge.
|
||||
@param {string} link The link of the badge.
|
||||
@param {string} icon The icon of the badge.
|
||||
@@ -11,23 +11,25 @@ or
|
||||
|
||||
@param {string} 0 The content of the badge.
|
||||
|
||||
@example {{< badge content="info" type="info" >}}
|
||||
@example {{< badge content="Badge" color="blue" >}}
|
||||
@example {{< badge "Badge" >}}
|
||||
*/ -}}
|
||||
|
||||
{{- if .IsNamedParams -}}
|
||||
{{- $content := .Get "content" -}}
|
||||
{{- $type := .Get "type" | default "" -}}
|
||||
{{- $color := .Get "color" | default (.Get "type") | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
|
||||
{{- $class := .Get "class" | default "" -}}
|
||||
{{- $link := .Get "link" | default "" -}}
|
||||
{{- $icon := .Get "icon" | default "" -}}
|
||||
{{- $border := not (eq (.Get "border") false) | default true }}
|
||||
|
||||
{{- if $link -}}
|
||||
<a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank">
|
||||
{{- partial "shortcodes/badge.html" (dict
|
||||
"content" $content
|
||||
"type" $type
|
||||
"color" $color
|
||||
"class" $class
|
||||
"border" true
|
||||
"border" $border
|
||||
"icon" $icon
|
||||
)
|
||||
-}}
|
||||
@@ -35,9 +37,9 @@ or
|
||||
{{- else -}}
|
||||
{{- partial "shortcodes/badge.html" (dict
|
||||
"content" $content
|
||||
"type" $type
|
||||
"color" $color
|
||||
"class" $class
|
||||
"border" true
|
||||
"border" $border
|
||||
"icon" $icon
|
||||
)
|
||||
-}}
|
||||
|
||||
@@ -6,7 +6,7 @@ A shortcode to create a card.
|
||||
@param {string} icon The icon of the card.
|
||||
@param {string} subtitle The subtitle of the card.
|
||||
@param {string} tag The tag of the card.
|
||||
@param {string} tagType The type of the tag.
|
||||
@param {string} tagColor The color of the tag.
|
||||
@param {string} image The image of the card.
|
||||
@param {string} method The method to process the image.
|
||||
@param {string} options The options to process the image.
|
||||
@@ -24,7 +24,7 @@ A shortcode to create a card.
|
||||
{{- $height := 0 -}}
|
||||
{{- $imageStyle := .Get "imageStyle" -}}
|
||||
{{- $tag := .Get "tag" -}}
|
||||
{{- $tagType := .Get "tagType" -}}
|
||||
{{- $tagColor := .Get "tagColor" | default (.Get "tagType") | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
|
||||
|
||||
{{/* Image processing options */}}
|
||||
{{- $method := .Get "method" | default "Resize" | humanize -}}
|
||||
@@ -60,6 +60,6 @@ A shortcode to create a card.
|
||||
"height" $height
|
||||
"imageStyle" $imageStyle
|
||||
"tag" $tag
|
||||
"tagType" $tagType
|
||||
"tagType" $tagColor
|
||||
)
|
||||
-}}
|
||||
|
||||
Reference in New Issue
Block a user