docs: improve options description (#762)

This commit is contained in:
Ludovic Fernandez
2025-08-17 19:42:59 +02:00
committed by GitHub
parent 48bae073cb
commit e3ef6bcebb
20 changed files with 259 additions and 167 deletions

View File

@@ -14,70 +14,60 @@ prev: /docs/guide/shortcodes
> [هشدارهای سبک GitHub](../../markdown#alerts) از [نسخه 0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) پشتیبانی می‌شوند.
> این ویژگی از سینتکس Markdown برای رندر کردن callout استفاده می‌کند که باعث بهبود قابلیت حمل و خوانایی محتوا می‌شود.
## مثال
## أمثلة
{{< callout emoji="👾">}}
یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
{{< /callout >}}
{{< callout type="info" >}}
یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
{{< /callout >}}
{{< callout type="warning" >}}
یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
{{< /callout >}}
{{< callout type="error" >}}
یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
{{< /callout >}}
## نحوه استفاده
### پیش‌فرض
### تقصير
{{< callout emoji="🌐">}}
Hugo می‌تواند برای ایجاد انواع مختلف وب‌سایت‌ها از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندات و غیره استفاده شود.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
Hugo می‌تواند برای ایجاد انواع مختلف وب‌سایت‌ها از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندات و غیره استفاده شود.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
### اطلاعات
### معلومات
{{< callout type="info" >}}
لطفاً برای مشاهده آخرین نسخه‌ها به GitHub مراجعه کنید.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
لطفاً برای مشاهده آخرین نسخه‌ها به GitHub مراجعه کنید.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
### هشدار
### تحذير
{{< callout type="warning" >}}
این API در نسخه بعدی منسوخ خواهد شد.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout type="warning" */>}}
این API در نسخه بعدی منسوخ خواهد شد.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
### خطا
### خطأ
{{< callout type="error" >}}
مشکلی پیش آمده و قرار است منفجر شود.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
مشکلی پیش آمده و قرار است منفجر شود.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
```
## خيارات
| المعلمة | وصف |
|---------|---------------------------------------------------------------------|
| `type` | نوع الاستدعاء. (افتراضي، `info`، `warning`، `error`) |
| `emoji` | الرمز التعبيري الذي يظهر قبل المكالمة. |
| `icon` | رمز تعبيري للنداء (مرتبط بالنوع أو يمكن أن يكون رمز تعبيري مخصصًا). |

View File

@@ -16,68 +16,58 @@ prev: /docs/guide/shortcodes
## 例
{{< callout emoji="👾">}}
**コールアウト**とは、注意を引くための短いテキストです。
{{< /callout >}}
{{< callout type="info" >}}
**コールアウト**とは、注意を引くための短いテキストです。
{{< /callout >}}
{{< callout type="warning" >}}
**コールアウト**とは、注意を引くための短いテキストです。
{{< /callout >}}
{{< callout type="error" >}}
**コールアウト**とは、注意を引くための短いテキストです。
{{< /callout >}}
## 使用方法
### デフォルト
{{< callout emoji="🌐">}}
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
### 情報
{{< callout type="info" >}}
最新リリースについてはGitHubをご覧ください
**コールアウト** は注目を集めることを目的とした短いテキストです
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
最新リリースについてはGitHubをご覧ください
**コールアウト** は注目を集めることを目的とした短いテキストです
{{</* /callout */>}}
```
### 警告
{{< callout type="warning" >}}
このAPIは次のバージョンで非推奨になります。
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout type="warning" */>}}
このAPIは次のバージョンで非推奨になります。
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
### エラー
{{< callout type="error" >}}
問題が発生しました。まもなく爆発します。
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
問題が発生しました。まもなく爆発します。
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
```
## オプション
| パラメータ | 説明 |
|---------|---------------------------------------------|
| `type` | コールアウトのタイプ。(デフォルト、`info``warning``error`) |
| `emoji` | コールアウトの前に表示される絵文字。 |
| `icon` | コールアウトの絵文字 (タイプに関連、またはカスタム絵文字にすることもできます)。 |

View File

@@ -14,54 +14,36 @@ A built-in component to show important information to the reader.
> [GitHub-style alerts](../../markdown#alerts) are supported since [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0).
> It leverages Markdown syntax to render the callout which ensures better portability and readability of the content.
## Example
{{< callout emoji="👾">}}
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 >}}
## Usage
## Examples
### Default
{{< callout emoji="🌐">}}
Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}
```
### Info
{{< callout type="info" >}}
Please visit GitHub to see the latest releases.
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
Please visit GitHub to see the latest releases.
A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}
```
### Warning
{{< callout type="warning" >}}
This API will be deprecated in the next version.
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
```markdown
@@ -73,11 +55,19 @@ A built-in component to show important information to the reader.
### Error
{{< callout type="error" >}}
Something went wrong and it's going to explode.
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
Something went wrong and it's going to explode.
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). |

View File

@@ -16,68 +16,58 @@ prev: /docs/guide/shortcodes
## 示例
{{< callout emoji="👾">}}
**提示框**是一段旨在吸引注意力的简短文本。
{{< /callout >}}
{{< callout type="info" >}}
**提示框**是一段旨在吸引注意力的简短文本。
{{< /callout >}}
{{< callout type="warning" >}}
**提示框**是一段旨在吸引注意力的简短文本。
{{< /callout >}}
{{< callout type="error" >}}
**提示框**是一段旨在吸引注意力的简短文本。
{{< /callout >}}
## 使用方法
### 默认样式
### 默认
{{< callout emoji="🌐">}}
Hugo可用于创建各种类型的网站包括博客、作品集、文档站点等
**标注** 是一小段旨在吸引注意力的文字
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
Hugo可用于创建各种类型的网站包括博客、作品集、文档站点等
**标注** 是一小段旨在吸引注意力的文字
{{</* /callout */>}}
```
### 信息提示
### 信息
{{< callout type="info" >}}
请访问GitHub查看最新发布版本
**标注** 是一小段旨在吸引注意力的文字
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
请访问GitHub查看最新发布版本
**标注** 是一小段旨在吸引注意力的文字
{{</* /callout */>}}
```
### 警告提示
### 警告
{{< callout type="warning" >}}
此API将在下一版本中弃用
**标注** 是一小段旨在吸引注意力的文字
{{< /callout >}}
```markdown
{{</* callout type="warning" */>}}
此API将在下一版本中弃用
**标注** 是一小段旨在吸引注意力的文字
{{</* /callout */>}}
```
### 错误提示
### 错误
{{< callout type="error" >}}
出现错误,系统即将崩溃
**标注** 是一小段旨在吸引注意力的文字
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
出现错误,系统即将崩溃
**标注** 是一小段旨在吸引注意力的文字
{{</* /callout */>}}
```
```
## 选项
| 范围 | 描述 |
|---------|----------------------------|
| `type` | 标注的类型。(默认、“信息”、“警告”、“错误”) |
| `emoji` | 标注前显示的表情符号。 |
| `icon` | 标注的表情符号(与类型相关或可以是自定义表情符号)。 |

View File

@@ -37,24 +37,25 @@ linkTitle: کارت‌ها
## پارامترهای کارت
| پارامتر | توضیحات |
|----------- |-----------------------------------------------------------------|
| پارامتر | توضیحات |
|------------|-----------------------------------------------------------|
| `link` | URL (داخلی یا خارجی). |
| `title` | عنوان کارت. |
| `subtitle` | زیرعنوان (پشتیبانی از Markdown). |
| `icon` | نام آیکون. |
| `tag` | متن تگ. |
| `tagColor` | رنگ تگ: `gray` (پیش‌فرض), `yellow`, `red` و `blue`. |
| `title` | عنوان کارت. |
| `subtitle` | زیرعنوان (پشتیبانی از Markdown). |
| `icon` | نام آیکون. |
| `tag` | متن تگ. |
| `tagType` | نوع العلامة: default (رمادي)، `info`، `warning` و`error`. |
## کارت تصویری
علاوه بر این، کارت از افزودن تصویر و پردازش آن از طریق این پارامترها پشتیبانی می‌کند:
| پارامتر | توضیحات |
|----------- |---------------------------------------------|
| `image` | آدرس تصویر کارت را مشخص می‌کند. |
| `method` | روش پردازش تصویر هوگو را تنظیم می‌کند. |
| `options` | تنظیمات پردازش تصویر هوگو را پیکربندی می‌کند. |
| پارامتر | توضیحات |
|--------------|---------------------------------------------------|
| `image` | آدرس تصویر کارت را مشخص می‌کند. |
| `method` | روش پردازش تصویر هوگو را تنظیم می‌کند. |
| `options` | تنظیمات پردازش تصویر هوگو را پیکربندی می‌کند. |
| `imageStyle` | يتم استخدامه لملء سمة النمط الخاصة بعلامة الصورة. |
کارت از سه نوع تصویر پشتیبانی می‌کند:

View File

@@ -37,24 +37,25 @@ linkTitle: カード
## カードパラメータ
| パラメータ | 説明 |
|----------- |-----------------------------------------------------------------|
| `link` | URL内部または外部 |
| `title` | カードのタイトル見出し。 |
| `subtitle` | サブタイトル見出しMarkdown対応 |
| `icon` | アイコン名。 |
| `tag` | タグのテキスト。 |
| `tagColor` | タグの色: `gray`(デフォルト)、`yellow``red``blue`。 |
| パラメータ | 説明 |
|------------|-----------------------------------------------|
| `link` | URL内部または外部。 |
| `title` | カードのタイトル見出し。 |
| `subtitle` | サブタイトル見出しMarkdown対応。 |
| `icon` | アイコン名。 |
| `tag` | タグのテキスト。 |
| `tagType` | タグのタイプ: デフォルト (グレー)、`info``warning``error`。 |
## 画像カード
さらに、カードには画像の追加と以下のパラメータを通じた処理がサポートされています:
| パラメータ | 説明 |
|----------- |---------------------------------------------|
| `image` | カードの画像URLを指定します。 |
| `method` | Hugoの画像処理方法を設定します。 |
| `options` | Hugoの画像処理オプションを設定します。 |
| パラメータ | 説明 |
|--------------|----------------------------|
| `image` | カードの画像URLを指定します。 |
| `method` | Hugoの画像処理方法を設定します。 |
| `options` | Hugoの画像処理オプションを設定します。 |
| `imageStyle` | 画像タグのスタイル属性を入力するために使用されます。 |
カードは3種類の画像をサポートします:

View File

@@ -38,23 +38,24 @@ 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. |
| `tagColor` | Color of the tag: `gray` (default), `yellow`, `red` and `blue`. |
| `tagType` | Type of the tag: default (gray), `info`, `warning` and `error`. |
## Image Card
Additionally, the card supports adding image and processing through these parameters:
| Parameter | Description |
|----------- |---------------------------------------------|
| `image` | Specifies the image URL for the card. |
| `method` | Sets Hugo's image processing method. |
| `options` | Configures Hugo's image processing options. |
| Parameter | Description |
|--------------|----------------------------------------------------|
| `image` | Specifies the image URL for the card. |
| `method` | Sets Hugo's image processing method. |
| `options` | Configures Hugo's image processing options. |
| `imageStyle` | Used to fill the style attribute of the image tag. |
Card supports three kinds of images:

View File

@@ -37,24 +37,25 @@ linkTitle: 卡片
## 卡片参数
| 参数 | 描述 |
|----------- |-----------------------------------------------------------------|
| `link` | 链接地址(内部或外部)。 |
| `title` | 卡片的标题。 |
| `subtitle` | 卡片的副标题支持Markdown |
| `icon` | 图标名称。 |
| `tag` | 标签文本。 |
| `tagColor` | 标签颜色:`gray`(默认)、`yellow``red``blue`。 |
| 参数 | 描述 |
|------------|-----------------------------------------|
| `link` | 链接地址(内部或外部)。 |
| `title` | 卡片的标题。 |
| `subtitle` | 卡片的副标题支持Markdown。 |
| `icon` | 图标名称。 |
| `tag` | 标签文本。 |
| `tagType` | 标签类型:默认(灰色)、`info``warning``error`。 |
## 图片卡片
此外,卡片还支持通过以下参数添加图片并进行处理:
| 参数 | 描述 |
|----------- |---------------------------------------------|
| `image` | 指定卡片的图片URL。 |
| `method` | 设置Hugo的图片处理方法。 |
| `options` | 配置Hugo的图片处理选项。 |
| 参数 | 描述 |
|--------------|-------------------|
| `image` | 指定卡片的图片URL。 |
| `method` | 设置Hugo的图片处理方法。 |
| `options` | 配置Hugo的图片处理选项。 |
| `imageStyle` | 用于填充图片标签的style属性。 |
卡片支持三种类型的图片:

View File

@@ -31,4 +31,19 @@ linkTitle: FileTree
{{</* /filetree/folder */>}}
{{</* filetree/file name="hugo.toml" */>}}
{{</* /filetree/container */>}}
```
```
## خيارات
### `filetree/file`
| المعلمة | وصف |
|---------|------------|
| `name` | اسم الملف. |
### `filetree/folder`
| المعلمة | وصف |
|---------|---------------------------------------------------------------------------|
| `name` | اسم الملف. |
| `state` | حالة الملف. يمكن أن تكون `open` أو `closed`. القيمة الافتراضية هي `open`. |

View File

@@ -31,4 +31,19 @@ linkTitle: FileTree
{{</* /filetree/folder */>}}
{{</* filetree/file name="hugo.toml" */>}}
{{</* /filetree/container */>}}
```
```
## オプション
### `filetree/file`
| パラメータ | 説明 |
|--------|----------|
| `name` | ファイルの名前。 |
### `filetree/folder`
| パラメータ | 説明 |
|---------|----------------------------------------------------------|
| `name` | ファイルの名前。 |
| `state` | ファイルの状態。`open` または `closed` のいずれかになります。デフォルトは `open` です。 |

View File

@@ -32,3 +32,18 @@ linkTitle: FileTree
{{</* filetree/file name="hugo.toml" */>}}
{{</* /filetree/container */>}}
```
## Options
### `filetree/file`
| Parameter | Description |
|-----------|----------------------------------------------------------------------|
| `name` | The name of the file. |
### `filetree/folder`
| Parameter | Description |
|-----------|----------------------------------------------------------------------|
| `name` | The name of the file. |
| `state` | The state of the file. Can be `open` or `closed`. Default is `open`. |

View File

@@ -31,4 +31,19 @@ linkTitle: 文件树
{{</* /filetree/folder */>}}
{{</* filetree/file name="hugo.toml" */>}}
{{</* /filetree/container */>}}
```
```
## 选项
### `filetree/file`
| 范围 | 描述 |
|--------|--------|
| `name` | 文件的名称。 |
### `filetree/folder`
| 范围 | 描述 |
|---------|-------------------------------------|
| `name` | 文件的名称。 |
| `state` | 文件的状态。可以是`open`或`closed`。默认为`open`。 |

View File

@@ -44,4 +44,11 @@ your-icon: <svg>محتوای SVG آیکون شما</svg>
{{</* card icon="your-icon" */>}}
```
نکته: [Iconify Design](https://iconify.design/) منبع خوبی برای یافتن آیکون‌های SVG برای سایت شماست.
نکته: [Iconify Design](https://iconify.design/) منبع خوبی برای یافتن آیکون‌های SVG برای سایت شماست.
## خيارات
| المعلمة | وصف |
|--------------|----------------|
| `name` | اسم الأيقونة |
| `attributes` | سمات الأيقونة. |

View File

@@ -44,4 +44,11 @@ your-icon: <svg>your icon svg content</svg>
{{</* card icon="your-icon" */>}}
```
ヒント: [Iconify Design](https://iconify.design/) はサイト用の SVG アイコンを見つけるのに最適な場所です。
ヒント: [Iconify Design](https://iconify.design/) はサイト用の SVG アイコンを見つけるのに最適な場所です。
## オプション
| パラメータ | 説明 |
|--------------|----------|
| `name` | アイコン名 |
| `attributes` | アイコンの属性。 |

View File

@@ -45,3 +45,10 @@ It then can be used in the shortcode like this:
```
Tip: [Iconify Design](https://iconify.design/) is a great place to find SVG icons for your site.
## Options
| Name | Description |
|--------------|-----------------------------|
| `name` | Icon name |
| `attributes` | The attributes of the icon. |

View File

@@ -44,4 +44,11 @@ your-icon: <svg>您的图标 SVG 内容</svg>
{{</* card icon="your-icon" */>}}
```
提示:[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的优质资源平台。
提示:[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的优质资源平台。
## 选项
| 范围 | 描述 |
|--------------|--------|
| `name` | 图标名称 |
| `attributes` | 图标的属性。 |

View File

@@ -45,6 +45,16 @@ next: /docs/guide/deploy-site
{{< badge content="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" >}}
### خيارات
| المعلمة | وصف |
|-----------|---------------------------------------------------|
| `content` | نص الشارة. |
| `link` | رابط الشارة. |
| `icon` | رمز الشارة. |
| `type` | نوع الشارة. (افتراضي، `info`، `warning`، `error`) |
| `class` | فئة الشارة. |
## یوتیوب
تعبیه یک ویدیوی یوتیوب.

View File

@@ -45,6 +45,16 @@ next: /docs/guide/deploy-site
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
### オプション
| パラメータ | 説明 |
|-----------|-----------------------------------------|
| `content` | バッジのテキスト。 |
| `link` | バッジのリンク。 |
| `icon` | バッジのアイコン。 |
| `type` | バッジの種類。(デフォルト、`info``warning``error`) |
| `class` | バッジのクラス。 |
## YouTube
YouTube 動画を埋め込みます。

View File

@@ -45,6 +45,16 @@ 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. |
## YouTube
Embed a YouTube video.

View File

@@ -45,6 +45,16 @@ next: /docs/guide/deploy-site
{{< badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
## 选项
| 范围 | 描述 |
|-----------|-------------------------------------|
| `content` | 徽章的文字。 |
| `link` | 徽章的链接。 |
| `icon` | 徽章的图标。 |
| `type` | 徽章的类型。(默认,`info``warning``error` |
| `class` | 徽章的等级。 |
## YouTube
嵌入YouTube视频。