mirror of
https://github.com/imfing/hextra.git
synced 2025-08-23 12:56:45 -04:00
feat(callout): revamp of the callouts (#767)
* feat(callout): revamp of the callouts * fix: doc * chore: refactor gh alert * feat: same colors on callouts and gh alerts * docs: more relevant examples * docs: i18n * docs: update existing callouts
This commit is contained in:
Ludovic Fernandez
committed by
GitHub
GitHub
parent
a3635ea638
commit
f4d75a4e5b
File diff suppressed because one or more lines are too long
@@ -101,7 +101,7 @@ jobs:
|
||||
{{% /details %}}
|
||||
|
||||
|
||||
{{< callout >}}
|
||||
{{< callout type="warning" >}}
|
||||
リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定してください:
|
||||
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -102,7 +102,7 @@ jobs:
|
||||
{{% /details %}}
|
||||
|
||||
|
||||
{{< callout >}}
|
||||
{{< callout type="warning" >}}
|
||||
In your repository settings, set the **Pages** > **Build and deployment** > **Source** to **GitHub Actions**:
|
||||
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -102,7 +102,7 @@ jobs:
|
||||
{{% /details %}}
|
||||
|
||||
|
||||
{{< callout >}}
|
||||
{{< callout type="warning" >}}
|
||||
在仓库设置中，将 **Pages** > **构建与部署** > **源** 设为 **GitHub Actions**：
|
||||
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -78,7 +78,7 @@ weight: 2
|
||||
---
|
||||
```
|
||||
|
||||
{{< callout emoji="ℹ️">}}
|
||||
{{< callout type="info" >}}
|
||||
توصیه می‌شود نوار کناری را خیلی عمیق نگه ندارید. اگر محتوای زیادی دارید، **آن‌ها را به چند بخش تقسیم کنید**.
|
||||
{{< /callout >}}
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ weight: 2
|
||||
---
|
||||
```
|
||||
|
||||
{{< callout emoji="ℹ️">}}
|
||||
{{< callout type="info" >}}
|
||||
サイドバーを深くしすぎないことをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
|
||||
{{< /callout >}}
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ weight: 2
|
||||
---
|
||||
```
|
||||
|
||||
{{< callout emoji="ℹ️">}}
|
||||
{{< callout type="info" >}}
|
||||
It is recommended to keep the sidebar not too deep. If you have a lot of content, consider **splitting them into multiple sections**.
|
||||
{{< /callout >}}
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ weight: 2
|
||||
---
|
||||
```
|
||||
|
||||
{{< callout emoji="ℹ️">}}
|
||||
{{< callout type="info" >}}
|
||||
建议不要让侧边栏过深。如果有大量内容，可以考虑**将其拆分为多个部分**。
|
||||
{{< /callout >}}
|
||||
|
||||
|
||||
@@ -14,24 +14,44 @@ prev: /docs/guide/shortcodes
|
||||
> [هشدارهای سبک GitHub](../../markdown#alerts) از [نسخه 0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) پشتیبانی می‌شوند.
|
||||
> این ویژگی از سینتکس Markdown برای رندر کردن callout استفاده می‌کند که باعث بهبود قابلیت حمل و خوانایی محتوا می‌شود.
|
||||
|
||||
## أمثلة
|
||||
## أمثلة
|
||||
|
||||
{{< callout >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
### تقصير
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< callout >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* callout */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### معلومات
|
||||
### Info
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
@@ -40,27 +60,83 @@ prev: /docs/guide/shortcodes
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### تحذير
|
||||
### Warning
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### خطأ
|
||||
### Error
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Important
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### أيقونة مخصصة
|
||||
|
||||
{{< callout icon="sparkles" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout icon="sparkles" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="important" icon="sparkles" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" icon="sparkles" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### الرموز التعبيرية
|
||||
|
||||
{{< callout emoji="🌐" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="info" emoji="ℹ️" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" emoji="ℹ️" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
|
||||
@@ -16,22 +16,42 @@ prev: /docs/guide/shortcodes
|
||||
|
||||
## 例
|
||||
|
||||
{{< callout >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
### デフォルト
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< callout >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* callout */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 情報
|
||||
### Info
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
@@ -40,10 +60,10 @@ prev: /docs/guide/shortcodes
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 警告
|
||||
### Warning
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
@@ -52,10 +72,10 @@ prev: /docs/guide/shortcodes
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### エラー
|
||||
### Error
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
@@ -64,6 +84,62 @@ prev: /docs/guide/shortcodes
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Important
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### カスタムアイコン
|
||||
|
||||
{{< callout icon="sparkles" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout icon="sparkles" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="important" icon="sparkles" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" icon="sparkles" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 絵文字
|
||||
|
||||
{{< callout emoji="🌐" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="info" emoji="ℹ️" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" emoji="ℹ️" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
## オプション
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|
||||
@@ -16,15 +16,35 @@ A built-in component to show important information to the reader.
|
||||
|
||||
## Examples
|
||||
|
||||
{{< callout >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="important" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
### Default
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
{{< callout >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* callout */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
@@ -64,10 +84,66 @@ A built-in component to show important information to the reader.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Important
|
||||
|
||||
{{< callout type="important" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Custom Icon
|
||||
|
||||
{{< callout icon="sparkles" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout icon="sparkles" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="important" icon="sparkles" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" icon="sparkles" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Emoji
|
||||
|
||||
{{< callout emoji="🌐" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="info" emoji="ℹ️" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" emoji="ℹ️" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|----------------------------------------------------------------------|
|
||||
| `type` | The type of callout. (default, `info`, `warning`, `error`) |
|
||||
| `emoji` | The emoji to show before the callout. |
|
||||
| `icon` | The emoji of the callout (related to type or can be a custom emoji). |
|
||||
| Parameter | Description |
|
||||
|-----------|---------------------------------------------------------------------------------|
|
||||
| `type` | The type of callout. (default, `info`, `warning`, `error`, `important`) |
|
||||
| `emoji` | The emoji to show before the callout. |
|
||||
| `icon` | The icon to show before the callout. (related to type or can be a custom icon). |
|
||||
|
||||
@@ -16,22 +16,42 @@ prev: /docs/guide/shortcodes
|
||||
|
||||
## 示例
|
||||
|
||||
{{< callout >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
### 默认
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< callout >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* callout */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 信息
|
||||
### Info
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
@@ -40,10 +60,10 @@ prev: /docs/guide/shortcodes
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 警告
|
||||
### Warning
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
@@ -52,10 +72,10 @@ prev: /docs/guide/shortcodes
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 错误
|
||||
### Error
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
@@ -64,6 +84,62 @@ prev: /docs/guide/shortcodes
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Important
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 自定义图标
|
||||
|
||||
{{< callout icon="sparkles" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout icon="sparkles" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="important" icon="sparkles" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" icon="sparkles" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 表情符号
|
||||
|
||||
{{< callout emoji="🌐" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="info" emoji="ℹ️" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" emoji="ℹ️" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
## 选项
|
||||
|
||||
| 范围 | 描述 |
|
||||
|
||||
@@ -6,7 +6,7 @@ sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}ویژگی آزمایشی برای گنجاندن Jupyter Notebookها از طریق یک شورتکد. توجه داشته باشید که همه انواع سلول‌ها پشتیبانی نمی‌شوند.{{< /callout >}}
|
||||
{{< callout type="warning" >}}ویژگی آزمایشی برای گنجاندن Jupyter Notebookها از طریق یک شورتکد. توجه داشته باشید که همه انواع سلول‌ها پشتیبانی نمی‌شوند.{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) یک برنامه نوت‌بوک HTML مستقل از زبان برای [پروژه Jupyter](https://jupyter.org/) است. این برنامه به شما امکان می‌دهد اسنادی ایجاد و به اشتراک بگذارید که شامل کد زنده، معادلات، تصاویر و متن روایی هستند.
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
|
||||
{{< callout type="warning" >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) は [Project Jupyter](https://jupyter.org/) の言語非依存な HTML ノートブックアプリケーションです。ライブコード、数式、可視化、説明文を含むドキュメントを作成・共有できます。
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.{{< /callout >}}
|
||||
{{< callout type="warning" >}}Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) is a language-agnostic HTML notebook application for [Project Jupyter](https://jupyter.org/). It allows you to create and share documents that contain live code, equations, visualizations, and narrative text.
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}实验性功能：通过短代码嵌入 Jupyter Notebook。注意并非所有单元格类型都受支持。{{< /callout >}}
|
||||
{{< callout type="warning" >}}实验性功能：通过短代码嵌入 Jupyter Notebook。注意并非所有单元格类型都受支持。{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 推出的语言无关的 HTML 笔记本应用。它允许你创建和分享包含动态代码、数学公式、可视化图表和叙述性文本的文档。
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ sidebar:
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
{{< callout type="warning" >}}
|
||||
برخی از این‌ها شورتکدهای داخلی Hugo هستند.
|
||||
این شورتکدها کمتر پایدار در نظر گرفته می‌شوند و ممکن است هر زمان تغییر کنند.
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -6,7 +6,7 @@ sidebar:
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
{{< callout type="warning" >}}
|
||||
これらの一部は Hugo 組み込みのショートコードです。
|
||||
これらのショートコードは安定性が低く、いつでも変更される可能性があります。
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -6,7 +6,7 @@ sidebar:
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
{{< callout type="warning" >}}
|
||||
Some of these are Hugo built-in shortcodes.
|
||||
These shortcodes are considered less stable and may be changed anytime.
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -6,7 +6,7 @@ sidebar:
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
{{< callout type="warning" >}}
|
||||
其中部分为Hugo内置短代码。
|
||||
这些短代码稳定性较低，可能随时变更。
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -25,7 +25,7 @@ title: مراحل
|
||||
|
||||
## نحوه استفاده
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
{{< callout type="warning" >}}
|
||||
لطفاً توجه داشته باشید که این شورتکد **فقط برای محتوای Markdown** طراحی شده است.
|
||||
اگر محتوای HTML یا شورتکدهای دیگر را به عنوان محتوای مرحله قرار دهید، ممکن است به درستی نمایش داده نشود.
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -25,7 +25,7 @@ title: ステップ
|
||||
|
||||
## 使い方
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
{{< callout type="warning" >}}
|
||||
このショートコードは **Markdown コンテンツ専用** であることに注意してください。
|
||||
HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -25,7 +25,7 @@ This is the third step.
|
||||
|
||||
## Usage
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
{{< callout type="warning" >}}
|
||||
Please note that this shortcode is intended **only for Markdown content**.
|
||||
If you put HTML content or other shortcodes as step content, it may not render as expected.
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -25,7 +25,7 @@ title: 步骤
|
||||
|
||||
## 使用方法
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
{{< callout type="warning" >}}
|
||||
请注意，此短代码**仅适用于Markdown内容**。
|
||||
如果在步骤内容中放入HTML或其他短代码，可能无法按预期渲染。
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -182,13 +182,12 @@
|
||||
"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",
|
||||
"hx:bg-primary-700/5",
|
||||
"hx:bg-purple-100",
|
||||
"hx:bg-red-100",
|
||||
"hx:bg-transparent",
|
||||
"hx:bg-white",
|
||||
@@ -203,8 +202,7 @@
|
||||
"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",
|
||||
"hx:border-transparent",
|
||||
@@ -250,13 +248,12 @@
|
||||
"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",
|
||||
"hx:dark:bg-purple-900/30",
|
||||
"hx:dark:bg-red-900/30",
|
||||
"hx:dark:bg-yellow-700/30",
|
||||
"hx:dark:block",
|
||||
@@ -265,10 +262,9 @@
|
||||
"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",
|
||||
"hx:dark:border-yellow-200/30",
|
||||
@@ -309,11 +305,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",
|
||||
"hx:dark:text-slate-100",
|
||||
"hx:dark:text-yellow-200",
|
||||
@@ -628,11 +623,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",
|
||||
"hx:text-slate-900",
|
||||
"hx:text-sm",
|
||||
|
||||
@@ -2,33 +2,44 @@
|
||||
{{- $alertType := .alertType -}}
|
||||
{{- $alertTitle := .alertTitle -}}
|
||||
|
||||
{{- $icons := dict
|
||||
"note" "information-circle"
|
||||
"tip" "light-bulb"
|
||||
"important" "information-circle"
|
||||
"warning" "exclamation"
|
||||
"caution" "exclamation-circle"
|
||||
{{- $styles := newScratch -}}
|
||||
{{- $styles.Set "default" (dict
|
||||
"icon" "light-bulb"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
{{- $styles.Set "note" (dict
|
||||
"icon" "information-circle"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
{{- $styles.Set "tip" (dict
|
||||
"icon" "light-bulb"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
{{- $styles.Set "important" (dict
|
||||
"icon" "information-circle"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
{{- $styles.Set "warning" (dict
|
||||
"icon" "exclamation"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
{{- $styles.Set "caution" (dict
|
||||
"icon" "exclamation-circle"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
|
||||
{{- $icon := index $icons $alertType -}}
|
||||
{{- $style := or ($styles.Get $alertType) ($styles.Get "default") -}}
|
||||
{{- $title := or $alertTitle (or (i18n $alertType) (title $alertType)) -}}
|
||||
|
||||
{{- $defaultClass := "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" }}
|
||||
|
||||
{{- $alertClasses := dict
|
||||
"note" "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"
|
||||
"tip" "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"
|
||||
"important" "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"
|
||||
"warning" "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"
|
||||
"caution" "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"
|
||||
-}}
|
||||
|
||||
{{- $class := index $alertClasses $alertType | default $defaultClass -}}
|
||||
|
||||
|
||||
<div class="hx:overflow-x-auto hx:mt-6 hx:flex hx:flex-col hx:rounded-lg hx:border hx:py-4 hx:px-4 hx:border-gray-200 hx:contrast-more:border-current hx:contrast-more:dark:border-current {{ $class }}">
|
||||
<div class="hx:overflow-x-auto hx:mt-6 hx:flex hx:flex-col hx:rounded-lg hx:border hx:py-4 hx:px-4 hx:border-gray-200 hx:contrast-more:border-current hx:contrast-more:dark:border-current {{ $style.style }}">
|
||||
<p class="hx:flex hx:items-center hx:font-medium">
|
||||
{{- with $icon -}}
|
||||
{{- with $style.icon -}}
|
||||
{{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx:inline-block hx:align-middle hx:mr-2"`) -}}
|
||||
{{- end -}}
|
||||
{{- $title -}}
|
||||
|
||||
@@ -1,32 +1,57 @@
|
||||
{{- /*
|
||||
A shortcode to create a callout.
|
||||
|
||||
@param {string} type The type of the callout (default, info, warning, error).
|
||||
@param {string} type The type of the callout (default, info, warning, error, important).
|
||||
@param {string} content The content of the callout.
|
||||
@param {string} emoji The emoji of the callout (related to type or can be a custom emoji).
|
||||
@param {string} icon The icon of the callout.
|
||||
@param {string} emoji The emoji of the callout.
|
||||
@param {string} icon The icon of the callout (related to type or can be a custom icon).
|
||||
|
||||
@example {{< callout type="info" >}}Content{{< /callout >}}
|
||||
*/ -}}
|
||||
|
||||
{{- $calloutEmojiDict := dict "info" "ℹ️" "warning" "⚠️" "error" "🚫" -}}
|
||||
{{- $type := .Get "type" | default "default" -}}
|
||||
{{/* If emoji is not set, use the emoji from dict */}}
|
||||
{{- $emoji := .Get "emoji" -}}
|
||||
{{- if eq $emoji "" -}}
|
||||
{{- $emoji = index $calloutEmojiDict $type -}}
|
||||
{{- end -}}
|
||||
{{/* Also allow using "icon" */}}
|
||||
{{- $icon := .Get "icon" -}}
|
||||
|
||||
{{- $styles := newScratch -}}
|
||||
{{- $styles.Set "default" (dict
|
||||
"icon" "light-bulb"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
{{- $styles.Set "info" (dict
|
||||
"icon" "information-circle"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
{{- $styles.Set "warning" (dict
|
||||
"icon" "exclamation"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
{{- $styles.Set "error" (dict
|
||||
"icon" "ban"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
{{- $styles.Set "important" (dict
|
||||
"icon" "exclamation-circle"
|
||||
"style" "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"
|
||||
)
|
||||
-}}
|
||||
|
||||
{{- $style := or ($styles.Get $type) ($styles.Get "default") -}}
|
||||
|
||||
{{- if and (not $emoji) (not $icon) -}}
|
||||
{{- $icon = $style.icon -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $content := .InnerDeindent | markdownify -}}
|
||||
|
||||
{{- $defaultClass := "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 := 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" -}}
|
||||
|
||||
{{- $class := or ($styleClass.Get $type) $defaultClass -}}
|
||||
|
||||
{{- partial "shortcodes/callout.html" (dict "content" $content "emoji" $emoji "icon" $icon "class" $class) -}}
|
||||
{{- partial "shortcodes/callout.html" (dict
|
||||
"content" $content
|
||||
"emoji" $emoji
|
||||
"icon" $icon
|
||||
"class" $style.style
|
||||
)
|
||||
-}}
|
||||
|
||||
Reference in New Issue
Block a user