docs(blog): prepare for v0.10 release post (#746)

* docs(blog): prepare for v0.10 release post

* Update v0.10.md

* Update v0.10.md to refine upgrade instructions and enhance blog features. Added synchronized tab switching and pagination controls, while improving the search experience and table of contents navigation.

* Enhance v0.10 release documentation with detailed upgrade instructions and migration guide. Added Tailwind theme variable customization section and clarified breaking changes. Improved clarity on CSS class prefix changes for better user experience.

* Update v0.10.md to enhance upgrade instructions, clarify breaking changes, and improve overall readability. Adjusted formatting for consistency and added details on asset management and user experience improvements.

* Add notable new features to v0.10.md, including dropdown menu support, enhanced search experience, and blog list pagination. Updated FlexSearch upgrade details for clarity and improved migration guide by removing redundant breaking change notes.

* chore: update zh-cn translation

* chore: update ja translation

* chore: update fa and ja translations

* chore: prepare release
This commit is contained in:
Xin
2025-08-14 23:49:06 +08:00
committed by GitHub
parent eca7665571
commit ec007d73c0
85 changed files with 4172 additions and 1545 deletions

View File

@@ -1,21 +1,29 @@
---
title: کدهای کوتاه
title: شورت‌کدها
weight: 9
prev: /docs/guide/diagrams
next: /docs/guide/shortcodes/filetree
next: /docs/guide/shortcodes/callout
---
[کدهای کوتاه Hugo](https://gohugo.io/content-management/shortcodes/) قطعه‌های ساده‌ای در داخل پرونده‌های محتوای شما هستند که قالب‌های داخلی یا سفارشی را فراخوانی می‌کنند.
هگزترا مجموعه‌ای از کدهای کوتاه زیبا را برای بهبود محتوای شما ارائه می‌کند.
[شورت‌کدهای Hugo](https://gohugo.io/content-management/shortcodes/) قطعه‌کدهای ساده‌ای درون فایل‌های محتوای شما هستند که تمپلیت‌های داخلی یا سفارشی را فراخوانی می‌کنند.
Hextra مجموعه‌ای از شورت‌کدهای زیبا را برای بهبود محتوای شما ارائه می‌دهد.
{{< cards >}}
{{< card link="filetree" title="FileTree" icon="folder-tree" >}}
{{< card link="icon" title="آیکون" icon="badge-check" >}}
{{< card link="details" title="جزئیات" icon="chevron-right" >}}
{{< card link="tabs" title="زبانه‌ها" icon="collection" >}}
{{< card link="callout" title="فراخوانی" icon="warning" >}}
{{< card link="callout" title="کالاوت" icon="warning" >}}
{{< card link="cards" title="کارت‌ها" icon="card" >}}
{{< card link="details" title="جزئیات" icon="chevron-right" >}}
{{< card link="filetree" title="درخت فایل" icon="folder-tree" >}}
{{< card link="icon" title="آیکون" icon="badge-check" >}}
{{< card link="steps" title="مراحل" icon="one" >}}
{{< card link="tabs" title="تب‌ها" icon="collection" >}}
{{< /cards >}}
<div style="padding-top:4rem"></div>
شورت‌کدهای اضافی ارائه شده توسط Hugo و Hextra:
{{< cards >}}
{{< card link="jupyter" title="نوت‌بوک Jupyter" icon="jupyter" tag="alpha" >}}
{{< card link="others" title="سایر" icon="view-grid" >}}
{{< /cards >}}

View File

@@ -5,18 +5,18 @@ prev: /docs/guide/diagrams
next: /docs/guide/shortcodes/callout
---
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に埋め込まれるシンプルなスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に記述する簡潔なスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。
{{< cards >}}
{{< card link="callout" title="コールアウト" icon="warning" >}}
{{< card link="cards" title="カード" icon="card" >}}
{{< card link="details" title="詳細" icon="chevron-right" >}}
{{< card link="callout" title="Callout" icon="warning" >}}
{{< card link="cards" title="Cards" icon="card" >}}
{{< card link="details" title="Details" icon="chevron-right" >}}
{{< card link="filetree" title="FileTree" icon="folder-tree" >}}
{{< card link="icon" title="アイコン" icon="badge-check" >}}
{{< card link="steps" title="ステップ" icon="one" >}}
{{< card link="tabs" title="タブ" icon="collection" >}}
{{< card link="icon" title="Icon" icon="badge-check" >}}
{{< card link="steps" title="Steps" icon="one" >}}
{{< card link="tabs" title="Tabs" icon="collection" >}}
{{< /cards >}}
<div style="padding-top:4rem"></div>
@@ -25,5 +25,5 @@ Hugo と Hextra が提供する追加のショートコード:
{{< cards >}}
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
{{< card link="others" title="その他" icon="view-grid" >}}
{{< /cards >}}
{{< card link="others" title="Others" icon="view-grid" >}}
{{< /cards >}}

View File

@@ -5,12 +5,12 @@ prev: /docs/guide/diagrams
next: /docs/guide/shortcodes/callout
---
[Hugo 短代码](https://gohugo.io/content-management/shortcodes/)是内容文件中的简单片段,用于调用内置或自定义模板。
[Hugo 短代码](https://gohugo.io/content-management/shortcodes/)是内容文件中调用内置或自定义模板的简单片段
Hextra 提供了一系列精美的短代码,以增强您的内容。
Hextra 提供了一系列精美的短代码增强您的内容。
{{< cards >}}
{{< card link="callout" title="标注" icon="warning" >}}
{{< card link="callout" title="提示框" icon="warning" >}}
{{< card link="cards" title="卡片" icon="card" >}}
{{< card link="details" title="详情" icon="chevron-right" >}}
{{< card link="filetree" title="文件树" icon="folder-tree" >}}

View File

@@ -1,55 +1,60 @@
---
title: کامپوننت فراخوانی
linkTitle: فراخوانی
title: کامپوننت Callout
linkTitle: Callout
aliases:
- فراخوانی‌ها
- callouts
prev: /docs/guide/shortcodes
---
یک کامپوننت داخلی برای نشان دادن اطلاعات مهم به خواننده.
یک کامپوننت داخلی برای نمایش اطلاعات مهم به خواننده.
<!--more-->
> [!NOTE]
> [هشدارهای سبک 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 را می‌توانید برای ایجاد طیف گسترده‌ای از وب‌سایت‌ها، از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندسازی و غیره استفاده کرد.
Hugo می‌تواند برای ایجاد انواع مختلف وب‌سایت‌ها از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندات و غیره استفاده شود.
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
Hugo را می‌توانید برای ایجاد طیف گسترده‌ای از وب‌سایت‌ها، از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندسازی و غیره استفاده کرد.
Hugo می‌تواند برای ایجاد انواع مختلف وب‌سایت‌ها از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندات و غیره استفاده شود.
{{</* /callout */>}}
```
### اطلاعات
{{< callout type="info" >}}
لطفا برای مشاهده آخرین نسخه‌ها به گیت‌هاب مراجعه کنید.
لطفاً برای مشاهده آخرین نسخه‌ها به GitHub مراجعه کنید.
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
لطفا برای مشاهده آخرین نسخه‌ها به گیت‌هاب مراجعه کنید.
لطفاً برای مشاهده آخرین نسخه‌ها به GitHub مراجعه کنید.
{{</* /callout */>}}
```
@@ -68,11 +73,11 @@ aliases:
### خطا
{{< callout type="error" >}}
مشکلی پیش آمد و اتفاقی رخ خواهد شد.
مشکلی پیش آمده و قرار است منفجر شود.
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
مشکلی پیش آمد و اتفاقی رخ خواهد شد.
مشکلی پیش آمده و قرار است منفجر شود.
{{</* /callout */>}}
```
```

View File

@@ -6,30 +6,30 @@ aliases:
prev: /docs/guide/shortcodes
---
読者に重要な情報を示すための組み込みコンポーネントです。
読者に重要な情報を示すための組み込みコンポーネントです。
<!--more-->
> [!NOTE]
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
> これはMarkdown構文を活用してコールアウトをレンダリング、コンテンツの移植性と可読性向上させます。
> これはMarkdown構文を活用してコールアウトをレンダリングするため、コンテンツの移植性と可読性向上ます。
## 例
{{< callout emoji="👾">}}
**コールアウト**は、注意を引くための短いテキストです。
**コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}}
{{< callout type="info" >}}
**コールアウト**は、注意を引くための短いテキストです。
**コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}}
{{< callout type="warning" >}}
**コールアウト**は、注意を引くための短いテキストです。
**コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}}
{{< callout type="error" >}}
**コールアウト**は、注意を引くための短いテキストです。
**コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}}
## 使用方法
@@ -37,24 +37,24 @@ prev: /docs/guide/shortcodes
### デフォルト
{{< callout emoji="🌐">}}
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイト作成するために使用できます。
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイト作成するために使用できます。
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
{{</* /callout */>}}
```
### 情報
{{< callout type="info" >}}
最新リリースを確認するには、GitHubをご覧ください。
最新リリースについてはGitHubをご覧ください。
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
最新リリースを確認するには、GitHubをご覧ください。
最新リリースについてはGitHubをご覧ください。
{{</* /callout */>}}
```
@@ -66,18 +66,18 @@ prev: /docs/guide/shortcodes
```markdown
{{</* callout type="warning" */>}}
**コールアウト**は、注意を引くための短いテキストです。
このAPIは次のバージョンで非推奨になります。
{{</* /callout */>}}
```
### エラー
{{< callout type="error" >}}
何か問題が発生し、爆発しそうです。
問題が発生しました。まもなく爆発します。
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
何か問題が発生し、爆発しそうです。
問題が発生しました。まもなく爆発します。
{{</* /callout */>}}
```

View File

@@ -2,7 +2,7 @@
title: 提示框组件
linkTitle: 提示框
aliases:
- 提示框
- callouts
prev: /docs/guide/shortcodes
---
@@ -11,73 +11,73 @@ prev: /docs/guide/shortcodes
<!--more-->
> [!NOTE]
> 自 [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) 起支持 [GitHub 风格的提醒](../../markdown#alerts)。
> 它利用 Markdown 语法渲染提示框,确保内容具有更好的可移植性和可读性。
> 自 [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) 起支持 [GitHub风格提示框](../../markdown#alerts)。
> 它利用Markdown语法渲染提示框确保内容具有更好的可移植性和可读性。
## 示例
{{< callout emoji="👾">}}
**提示框** 是一段简短的文本,旨在吸引注意力。
**提示框**是一段旨在吸引注意力的简短文本
{{< /callout >}}
{{< callout type="info" >}}
**提示框** 是一段简短的文本,旨在吸引注意力。
**提示框**是一段旨在吸引注意力的简短文本
{{< /callout >}}
{{< callout type="warning" >}}
**提示框** 是一段简短的文本,旨在吸引注意力。
**提示框**是一段旨在吸引注意力的简短文本
{{< /callout >}}
{{< callout type="error" >}}
**提示框** 是一段简短的文本,旨在吸引注意力。
**提示框**是一段旨在吸引注意力的简短文本
{{< /callout >}}
##
## 使用方
### 默认
### 默认样式
{{< callout emoji="🌐">}}
Hugo 可用于创建各种类型的网站,包括博客、作品集、文档站点等。
Hugo可用于创建各种类型的网站包括博客、作品集、文档站点等。
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
Hugo 可用于创建各种类型的网站,包括博客、作品集、文档站点等。
Hugo可用于创建各种类型的网站包括博客、作品集、文档站点等。
{{</* /callout */>}}
```
### 信息
### 信息提示
{{< callout type="info" >}}
请访问 GitHub 查看最新版本。
请访问GitHub查看最新发布版本。
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
请访问 GitHub 查看最新版本。
请访问GitHub查看最新发布版本。
{{</* /callout */>}}
```
### 警告
### 警告提示
{{< callout type="warning" >}}
API 将在下一版本中弃用。
此API将在下一版本中弃用。
{{< /callout >}}
```markdown
{{</* callout type="warning" */>}}
**提示框** 是一段简短的文本,旨在吸引注意力
此API将在下一版本中弃用
{{</* /callout */>}}
```
### 错误
### 错误提示
{{< callout type="error" >}}
错了,系统即将崩溃。
现错误,系统即将崩溃。
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
错了,系统即将崩溃。
现错误,系统即将崩溃。
{{</* /callout */>}}
```

View File

@@ -6,59 +6,110 @@ linkTitle: کارت‌ها
## مثال
{{< cards >}}
{{< card link="../callout" title="فراخوانی" icon="warning" >}}
{{< card link="/fa" title="بدون آیکون" >}}
{{< card link="../callout" title="کال‌اوت" icon="warning" >}}
{{< card link="../callout" title="کارت با تگ" icon="tag" tag="تگ سفارشی">}}
{{< card link="/" title="بدون آیکون" >}}
{{< /cards >}}
{{< cards >}}
{{< card link="/" title="کارت تصویر" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="یک چشم‌انداز Unsplash" >}}
{{< card link="/" title="تصویر محلی" image="/images/card-image-unprocessed.jpg" subtitle="تصویر خام در دایرکتوری استاتیک است." >}}
{{< card link="/" title="تصویر محلی" image="images/space.jpg" subtitle="تصویر در دایرکتوری assets می‌باشد و پردازش توسط Hugo شده است." method="Resize" options="600x q80 webp" >}}
{{< card link="/" title="کارت تصویری" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="تصویر اینترنتی" >}}
{{< card link="/" title="تصویر محلی" image="/images/card-image-unprocessed.jpg" subtitle="تصویر خام در دایرکتوری استاتیک." >}}
{{< card link="/" title="تصویر محلی" image="images/space.jpg" subtitle="تصویر در دایرکتوری assets، پردازش شده توسط هوگو." method="Resize" options="600x q80 webp" >}}
{{< /cards >}}
## استفاده
## نحوه استفاده
```
{{</* cards */>}}
{{</* card link="../callout" title="فراخوانی" icon="warning" */>}}
{{</* card link="/fa" title="بدون آیکون" */>}}
{{</* card link="../callout" title="کال‌اوت" icon="warning" */>}}
{{</* card link="../callout" title="کارت با تگ" icon="tag" tag= "تگ سفارشی" */>}}
{{</* card link="/" title="بدون آیکون" */>}}
{{</* /cards */>}}
```
```
{{</* cards */>}}
{{</* card link="/" title="کارت تصویر" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="یک چشم‌انداز Unsplash" */>}}
{{</* card link="/" title="تصویر محلی" image="/images/card-image-unprocessed.jpg" subtitle="تصویر خام در دایرکتوری استاتیک است." */>}}
{{</* card link="/" title="تصویر محلی" image="images/space.jpg" subtitle="تصویر در دایرکتوری assets می‌باشد و پردازش توسط Hugo شده است." method="Resize" options="600x q80 webp" */>}}
{{</* card link="/" title="کارت تصویری" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="تصویر لنداسکیپ از Unsplash" */>}}
{{</* card link="/" title="تصویر محلی" image="/images/card-image-unprocessed.jpg" subtitle="تصویر خام در دایرکتوری استاتیک." */>}}
{{</* card link="/" title="تصویر محلی" image="images/space.jpg" subtitle="تصویر در دایرکتوری assets، پردازش شده توسط هوگو." method="Resize" options="600x q80 webp" */>}}
{{</* /cards */>}}
```
## پارامترهای کارت
| پارامتر | توضیحات |
|----------- |---------------------------------------|
| `link` | نشانی اینترنتی (داخلی یا خارجی). |
| `title` | عنوان برای کارت. |
| `subtitle` | عنوان زیرنویس (از مارک‌داون پشتیبانی می‌کند).. |
| `icon` | نام آیکون. |
| پارامتر | توضیحات |
|----------- |-----------------------------------------------------------------|
| `link` | URL (داخلی یا خارجی). |
| `title` | عنوان کارت. |
| `subtitle` | زیرعنوان (پشتیبانی از Markdown). |
| `icon` | نام آیکون. |
| `tag` | متن تگ. |
| `tagColor` | رنگ تگ: `gray` (پیش‌فرض), `yellow`, `red` و `blue`. |
## کارت تصویری
## کارت تصویر
علاوه بر این، کارت از افزودن تصویر و پردازش آن از طریق این پارامترها پشتیبانی می‌کند:
علاوه بر این، کارت از افزودن تصویر و پردازش از طریق این پارامترها پشتیبانی می‌کند:
| پارامتر | توضیحات |
| پارامتر | توضیحات |
|----------- |---------------------------------------------|
| `image` | نشانی اینترنتی تصویر کارت را مشخص می‌کند. |
| `method` | روش پردازش تصویر Hugo را تنظیم می‌کند. |
| `options` | گزینه‌های پردازش تصویر Hugo را پیکربندی می‌کند. |
| `image` | آدرس تصویر کارت را مشخص می‌کند. |
| `method` | روش پردازش تصویر هوگو را تنظیم می‌کند. |
| `options` | تنظیمات پردازش تصویر هوگو را پیکربندی می‌کند. |
کارت از سه نوع تصویر پشتیبانی می‌کند:
1. تصویر از راه دور: نشانی اینترنتی کامل در پارامتر `image`.
2. تصویر استاتیک: از مسیر نسبی در دایرکتوری `static/` Hugo استفاده کنید.
3. تصویر پردازش شده: از مسیر نسبی در دایرکتوری `assets/` Hugo استفاده کنید.
1. تصویر راهدور: URL کامل در پارامتر `image`.
2. تصویر استاتیک: از مسیر نسبی در دایرکتوری `static/` هوگو استفاده کنید.
3. تصویر پردازش شده: از مسیر نسبی در دایرکتوری `assets/` هوگو استفاده کنید.
هگزترا در صورت نیاز به پردازش تصویر در حین ساخت، به طور خودکار تشخیص می‌دهد و پارامتر `options` یا تنظیمات پیش‌فرض را اعمال می‌کند (تغییر اندازه، 800x، کیفیت 80، فرمت WebP).
در حال حاضر این `method` را پشتیبانی می‌کند: `Resize`، `Fit`، `Fill` و `Crop`.
Hextra به صورت خودکار تشخیص می‌دهد که آیا پردازش تصویر در زمان ساخت نیاز است و پارامتر `options` یا تنظیمات پیش‌فرض (Resize، 800x، کیفیت 80، فرمت WebP) را اعمال می‌کند.
در حال حاضر از این `method`ها پشتیبانی می‌کند: `Resize`, `Fit`, `Fill` و `Crop`.
برای اطلاعات بیشتر در مورد دستورات، روش‌ها و گزینه‌های پردازش تصویر داخلی Hugo به [مستندات پردازش تصویر](https://gohugo.io/content-management/image-processing/) آنها مراجعه کنید.
برای اطلاعات بیشتر در مورد دستورات، روش‌ها و تنظیمات پردازش تصویر هوگو، به [مستندات پردازش تصویر](https://gohugo.io/content-management/image-processing/) آنها مراجعه کنید.
## تگ‌ها
کارت از افزودن تگ‌ها پشتیبانی می‌کند که می‌تواند برای نمایش اطلاعات وضعیت اضافی مفید باشد.
{{< cards >}}
{{< card link="../callout" title="کارت با تگ پیش‌فرض" tag="متن تگ" >}}
{{< card link="../callout" title="کارت با تگ خطا" tag="متن تگ" tagType="error" >}}
{{< card link="../callout" title="کارت با تگ اطلاعات" tag="متن تگ" tagType="info" >}}
{{< card link="../callout" title="کارت با تگ هشدار" tag="متن تگ" tagType="warning" >}}
{{< card link="/" title="کارت تصویری" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="تصویر اینترنتی" tag="متن تگ" tagType="error" >}}
{{< /cards >}}
```
{{</* cards */>}}
{{</* card link="../callout" title="کارت با رنگ تگ پیش‌فرض" tag="متن تگ" */>}}
{{</* card link="../callout" title="کارت با تگ قرمز پیش‌فرض" tag="متن تگ" tagType="error" */>}}
{{</* card link="../callout" title="کارت با تگ آبی" tag="متن تگ" tagType="info" */>}}
{{</* card link="../callout" title="کارت با تگ زرد" tag="متن تگ" tagType="warning" */>}}
{{</* /cards */>}}
```
## ستون‌ها
می‌توانید حداکثر تعداد ستون‌هایی که کارت‌ها می‌توانند در آن قرار بگیرند را با ارسال پارامتر `cols` به شورت‌کد `cards` مشخص کنید. توجه داشته باشید که ستون‌ها در صفحه‌های کوچکتر همچنان جمع می‌شوند.
{{< cards cols="1" >}}
{{< card link="/" title="کارت بالا" >}}
{{< card link="/" title="کارت پایین" >}}
{{< /cards >}}
{{< cards cols="2" >}}
{{< card link="/" title="کارت چپ" >}}
{{< card link="/" title="کارت راست" >}}
{{< /cards >}}
```
{{</* cards cols="1" */>}}
{{</* card link="/" title="کارت بالا" */>}}
{{</* card link="/" title="کارت پایین" */>}}
{{</* /cards */>}}
{{</* cards cols="2" */>}}
{{</* card link="/" title="کارت چپ" */>}}
{{</* card link="/" title="کارت راست" */>}}
{{</* /cards */>}}
```

View File

@@ -13,8 +13,8 @@ linkTitle: カード
{{< cards >}}
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" >}}
{{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" >}}
{{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" >}}
{{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" >}}
{{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" >}}
{{< /cards >}}
## 使用方法
@@ -30,8 +30,8 @@ linkTitle: カード
```
{{</* cards */>}}
{{</* card link="/" title="画像カード" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplashの風景画像" */>}}
{{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" */>}}
{{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" */>}}
{{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" */>}}
{{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" */>}}
{{</* /cards */>}}
```
@@ -42,18 +42,18 @@ linkTitle: カード
| `link` | URL内部または外部。 |
| `title` | カードのタイトル見出し。 |
| `subtitle` | サブタイトル見出しMarkdown対応。 |
| `icon` | アイコンの名前。 |
| `tag` | タグのテキスト。 |
| `icon` | アイコン。 |
| `tag` | タグのテキスト。 |
| `tagColor` | タグの色: `gray`(デフォルト)、`yellow``red``blue`。 |
## 画像カード
さらに、カードは画像の追加と以下のパラメータを通じた処理サポートます:
さらに、カードは画像の追加と以下のパラメータを通じた処理サポートされています:
| パラメータ | 説明 |
|----------- |---------------------------------------------|
| `image` | カードの画像URLを指定します。 |
| `method` | Hugoの画像処理メソッドを設定します。 |
| `method` | Hugoの画像処理方法を設定します。 |
| `options` | Hugoの画像処理オプションを設定します。 |
カードは3種類の画像をサポートします:
@@ -62,14 +62,14 @@ linkTitle: カード
2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定Resize、800x、品質80、WebPフォーマット)を適用します。
現在サポートされている`method``Resize``Fit``Fill``Crop`です
Hextraはビルド時に画像処理が必要か自動検出し、`options`パラメータまたはデフォルト設定Resize、800x、品質80、WebP形式)を適用します。
現在サポートされている`method`: `Resize``Fit``Fill``Crop`
Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
Hugoの組み込み画像処理コマンド、方法、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
## タグ
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに便利です。
{{< cards >}}
{{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
@@ -81,10 +81,10 @@ Hugoの組み込み画像処理コマンド、メソッド、オプションの
```
{{</* cards */>}}
{{</* card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" */>}}
{{</* card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
{{</* card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" */>}}
{{</* card link="../callout" title="赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
{{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}}
{{</* card link="../callout" title="黄タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
{{</* card link="../callout" title="黄タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
{{</* /cards */>}}
```

View File

@@ -14,10 +14,10 @@ linkTitle: 卡片
{{< cards >}}
{{< card link="/" title="图片卡片" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="网络图片" >}}
{{< card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" >}}
{{< card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片,Hugo 处理。" method="Resize" options="600x q80 webp" >}}
{{< card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片,经过Hugo处理。" method="Resize" options="600x q80 webp" >}}
{{< /cards >}}
##
## 使用方
```
{{</* cards */>}}
@@ -29,9 +29,9 @@ linkTitle: 卡片
```
{{</* cards */>}}
{{</* card link="/" title="图片卡片" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash 风景" */>}}
{{</* card link="/" title="图片卡片" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash风景" */>}}
{{</* card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" */>}}
{{</* card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片,Hugo 处理。" method="Resize" options="600x q80 webp" */>}}
{{</* card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片,经过Hugo处理。" method="Resize" options="600x q80 webp" */>}}
{{</* /cards */>}}
```
@@ -39,37 +39,37 @@ linkTitle: 卡片
| 参数 | 描述 |
|----------- |-----------------------------------------------------------------|
| `link` | URL(内部或外部)。 |
| `title` | 卡片的标题。 |
| `subtitle` | 卡片的副标题(支持 Markdown。 |
| `icon` | 图标名称。 |
| `tag` | 标签中的文本。 |
| `tagColor` | 标签颜色:`gray`(默认)、`yellow``red``blue`。 |
| `link` | 链接地址(内部或外部)。 |
| `title` | 卡片的标题。 |
| `subtitle` | 卡片的副标题支持Markdown。 |
| `icon` | 图标名称。 |
| `tag` | 标签文本。 |
| `tagColor` | 标签颜色:`gray`(默认)、`yellow``red``blue`。 |
## 图片卡片
此外,卡片支持通过以下参数添加图片并进行处理:
此外,卡片支持通过以下参数添加图片并进行处理:
| 参数 | 描述 |
|-----------|--------------------------------------|
| `image` | 指定卡片的图片 URL。 |
| `method` | 设置 Hugo 的图片处理方法。 |
| `options` | 配置 Hugo 的图片处理选项。 |
| 参数 | 描述 |
|----------- |---------------------------------------------|
| `image` | 指定卡片的图片URL。 |
| `method` | 设置Hugo的图片处理方法。 |
| `options` | 配置Hugo的图片处理选项。 |
卡片支持三种类型的图片:
1. 远程图片:`image` 参数中完整 URL。
2. 静态图片:使用 Hugo `static/` 目录的相对路径。
3. 处理后的图片:使用 Hugo `assets/` 目录的相对路径。
1. 远程图片:`image`参数中填写完整URL。
2. 静态图片使用Hugo`static/`目录的相对路径。
3. 处理后的图片使用Hugo`assets/`目录的相对路径。
Hextra 在构建时自动检测是否需要图片处理,并应用 `options` 参数或默认设置Resize800x质量 80WebP 格式)。
目前支持以下 `method``Resize``Fit``Fill``Crop`
Hextra在构建时自动检测是否需要图片处理,并应用`options`参数或默认设置Resize800x质量80WebP格式
目前支持`method``Resize``Fit``Fill``Crop`
有关 Hugo 内置图片处理命令、方法和选项的更多信息,请参阅其[图片处理文档](https://gohugo.io/content-management/image-processing/)。
有关Hugo内置图片处理命令、方法和选项的更多信息请参阅其[图片处理文档](https://gohugo.io/content-management/image-processing/)。
## 标签
卡片支持添加标签,这对于显示额外的状态信息非常有用
卡片支持添加标签,可用于显示额外的状态信息。
{{< cards >}}
{{< card link="../callout" title="带默认标签的卡片" tag="标签文本" >}}
@@ -90,7 +90,7 @@ Hextra 在构建时自动检测是否需要图片处理,并应用 `options`
## 列数
可以通过`cols` 参数传递给 `cards` 短代码来指定卡片的最大列数。请注意,在较小的屏幕上列仍会折叠。
可以通过`cards`短代码传递`cols`参数来指定卡片的最大列数。请注意,在屏幕上列仍会折叠。
{{< cards cols="1" >}}
{{< card link="/" title="顶部卡片" >}}

View File

@@ -2,7 +2,7 @@
title: جزئیات
---
یک کامپوننت داخلی برای نمایش محتوای قابل باز و بسته شدن.
یک کامپوننت داخلی برای نمایش محتوای جمع‌شدنی.
<!--more-->
@@ -16,13 +16,13 @@ title: جزئیات
{{% /details %}}
{{% details title="برای نمایش روی من کلیک کنید" closed="true" %}}
{{% details title="برای نمایش کلیک کنید" closed="true" %}}
این به طور پیش‌فرض پنهان می‌شود.
این به‌صورت پیش‌فرض مخفی خواهد بود.
{{% /details %}}
## استفاده
## نحوه استفاده
````markdown
{{%/* details title="جزئیات" */%}}
@@ -35,9 +35,9 @@ title: جزئیات
````
````markdown
{{%/* details title="برای نمایش روی من کلیک کنید"closed="true" */%}}
{{%/* details title="برای نمایش کلیک کنید" closed="true" */%}}
این به طور پیش‌فرض پنهان می‌شود.
این به‌صورت پیش‌فرض مخفی خواهد بود.
{{%/* /details */%}}
````
````

View File

@@ -2,7 +2,7 @@
title: 詳細
---
折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。
折りたたみ可能なコンテンツを表示するための組み込みコンポーネントです
<!--more-->
@@ -12,7 +12,7 @@ title: 詳細
これは詳細のコンテンツです。
Markdown**サポートされています**。
Markdown**サポートされています**
{{% /details %}}
@@ -22,14 +22,14 @@ Markdownは**サポートされています**。
{{% /details %}}
## 使い方
## 使用方法
````markdown
{{%/* details title="詳細" */%}}
これは詳細のコンテンツです。
Markdown**サポートされています**。
Markdown**サポートされています**。
{{%/* /details */%}}
````

View File

@@ -12,7 +12,7 @@ title: 详情
这是详情的内容。
支持 **Markdown**
支持 **Markdown** 格式
{{% /details %}}
@@ -22,14 +22,14 @@ title: 详情
{{% /details %}}
##
## 使用方
````markdown
{{%/* details title="详情" */%}}
这是详情的内容。
支持 **Markdown**。
支持 **Markdown** 格式
{{%/* /details */%}}
````

View File

@@ -1,8 +1,6 @@
---
title: کامپوننت FileTree
linkTitle: FileTree
prev: /docs/guide/shortcodes
next: /docs/guide/shortcodes/icon
---
## مثال
@@ -13,13 +11,13 @@ next: /docs/guide/shortcodes/icon
{{< filetree/folder name="docs" state="closed" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/file name="introduction.md" >}}
{{< filetree/file name="introduction.fa.md" >}}
{{< filetree/file name="introduction.fr.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< filetree/file name="hugo.toml" >}}
{{< /filetree/container >}}
## استفاده
## نحوه استفاده
```text {filename="Markdown"}
{{</* filetree/container */>}}
@@ -28,9 +26,9 @@ next: /docs/guide/shortcodes/icon
{{</* filetree/folder name="docs" state="closed" */>}}
{{</* filetree/file name="_index.md" */>}}
{{</* filetree/file name="introduction.md" */>}}
{{</* filetree/file name="introduction.fa.md" */>}}
{{</* filetree/file name="introduction.fr.md" */>}}
{{</* /filetree/folder */>}}
{{</* /filetree/folder */>}}
{{</* filetree/file name="hugo.toml" */>}}
{{</* /filetree/container */>}}
```
```

View File

@@ -17,7 +17,7 @@ linkTitle: 文件树
{{< filetree/file name="hugo.toml" >}}
{{< /filetree/container >}}
##
## 使用方
```text {filename="Markdown"}
{{</* filetree/container */>}}

View File

@@ -1,15 +1,15 @@
---
title: آیکون
next: /docs/guide/shortcodes/steps
---
برای استفاده از این کد کوتاه درون‌خطی، باید آن را در پیکربندی فعال کنید:
برای استفاده از این شورت‌کد به صورت درون‌خطی، باید قابلیت شورت‌کدهای درون‌خطی در تنظیمات فعال شود:
```yaml {filename="hugo.yaml"}
enableInlineShortcodes: true
```
فهرست آیکون‌های موجود را می‌توانید در [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) پیدا کنید.
لیست آیکون‌های موجود را می‌توانید در [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) مشاهده کنید.
<!--more-->
@@ -20,23 +20,23 @@ enableInlineShortcodes: true
{{< icon "gift" >}}
{{< icon "sparkles" >}}
## استفاده
## نحوه استفاده
```
{{</* icon "github" */>}}
```
آیکون‌های با طرح‌های متفاوت در [Heroicons](https://v1.heroicons.com/) نسخه ۱ خارج از جعبه در دسترس هستند.
آیکون‌های [Heroicons](https://v1.heroicons.com/) نسخه 1 به صورت پیش‌فرض در دسترس هستند.
### چجوری آیکون‌های خودمان را اضافه کنیم
### چگونه آیکون‌های خود را اضافه کنید
پرونده `data/icons.yaml` را ایجاد کنید، سپس آیکون‌های SVG خود را در فرمت زیر اضافه کنید:
فایل `data/icons.yaml` را ایجاد کنید، سپس آیکون‌های SVG خود را با فرمت زیر اضافه کنید:
```yaml {filename="data/icons.yaml"}
your-icon: <svg>your icon svg content</svg>
your-icon: <svg>محتوای SVG آیکون شما</svg>
```
سپس می‌توان آن را در کد کوتاه مانند زیر استفاده کرد:
سپس می‌توانید از آن در شورت‌کد به این صورت استفاده کنید:
```
{{</* icon "your-icon" */>}}
@@ -44,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
{{</* card icon="your-icon" */>}}
```
نکته: [Iconify Design](https://iconify.design/) مکانی عالی برای پیدا کردن آیکون‌های SVG برای سایت شما است.
نکته: [Iconify Design](https://iconify.design/) منبع خوبی برای یافتن آیکون‌های SVG برای سایت شماست.

View File

@@ -1,5 +1,6 @@
---
title: アイコン
next: /docs/guide/shortcodes/steps
---
このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
@@ -8,7 +9,7 @@ title: アイコン
enableInlineShortcodes: true
```
利用可能なアイコンのリストは、[`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
利用可能なアイコンの一覧は [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
<!--more-->
@@ -29,13 +30,13 @@ enableInlineShortcodes: true
### 独自のアイコンを追加する方法
`data/icons.yaml` ファイルを作成し、以下の形式で独自のSVGアイコンを追加します:
`data/icons.yaml` ファイルを作成し、以下の形式で独自の SVG アイコンを追加します:
```yaml {filename="data/icons.yaml"}
your-icon: <svg>your icon svg content</svg>
```
その後、ショートコードで以下のように使用できます:
追加したアイコンは以下のようにショートコードで使用できます:
```
{{</* icon "your-icon" */>}}
@@ -43,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
{{</* card icon="your-icon" */>}}
```
ヒント: [Iconify Design](https://iconify.design/) はサイト用のSVGアイコンを見つけるのに最適な場所です。
ヒント: [Iconify Design](https://iconify.design/) はサイト用の SVG アイコンを見つけるのに最適な場所です。

View File

@@ -1,14 +1,15 @@
---
title: 图标
next: /docs/guide/shortcodes/steps
---
要在行内使用此短代码,需在配置中启用行内短代码:
要在行内使用此短代码,需在配置中启用行内短代码功能
```yaml {filename="hugo.yaml"}
enableInlineShortcodes: true
```
可用图标列表可在 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) 中找到。
可用图标列表可在 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) 中找到。
<!--more-->
@@ -19,23 +20,23 @@ enableInlineShortcodes: true
{{< icon "gift" >}}
{{< icon "sparkles" >}}
##
## 使用方
```
{{</* icon "github" */>}}
```
[Heroicons](https://v1.heroicons.com/) v1 轮廓图标默认可用
默认支持 [Heroicons](https://v1.heroicons.com/) v1 轮廓风格图标。
### 如何添加自定义图标
创建 `data/icons.yaml` 文件,然后按照以下格式添加自定义的 SVG 图标:
创建 `data/icons.yaml` 文件,以下格式添加的 SVG 图标:
```yaml {filename="data/icons.yaml"}
your-icon: <svg>your icon svg content</svg>
your-icon: <svg>您的图标 SVG 内容</svg>
```
然后可以在短代码中这样使用:
随后即可通过短代码调用:
```
{{</* icon "your-icon" */>}}
@@ -43,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
{{</* card icon="your-icon" */>}}
```
提示:[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的好地方
提示:[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的优质资源平台

View File

@@ -0,0 +1,79 @@
---
title: "کامپوننت Jupyter Notebook"
linktitle: "Jupyter Notebook"
math: true
sidebar:
exclude: true
---
{{< callout >}}ویژگی آزمایشی برای گنجاندن Jupyter Notebookها از طریق یک شورتکد. توجه داشته باشید که همه انواع سلول‌ها پشتیبانی نمی‌شوند.{{< /callout >}}
[Jupyter Notebook](https://jupyter.org/) یک برنامه نوت‌بوک HTML مستقل از زبان برای [پروژه Jupyter](https://jupyter.org/) است. این برنامه به شما امکان می‌دهد اسنادی ایجاد و به اشتراک بگذارید که شامل کد زنده، معادلات، تصاویر و متن روایی هستند.
<!--more-->
## نحوه استفاده
### استفاده از یک نوت‌بوک محلی
برای استفاده از شورتکد Jupyter Notebook، باید یک فایل Jupyter Notebook در پروژه خود داشته باشید. مشابه روشی که برای [افزودن تصاویر](../../organize-files#add-images) به پروژه استفاده می‌کنید، می‌توانید Jupyter Notebookها را به پوشه `assets` اضافه کنید.
{{< filetree/container >}}
{{< filetree/folder name="assets" >}}
{{< filetree/file name="notebook.ipynb" >}}
{{< /filetree/folder >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/file name="my-page.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
نوت‌بوک Jupyter را در صفحه با استفاده از شورتکد `jupyter` قرار دهید:
```markdown {filename="content/docs/my-page.md"}
---
title: صفحه من
math: true
---
{{%/* jupyter "notebook.ipynb" */%}}
```
به‌عنوان جایگزین، می‌توانید از ویژگی [بسته‌های صفحه][page-bundles] هوگو استفاده کنید تا Jupyter Notebookها را همراه با فایل Markdown سازماندهی کنید.
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/folder name="my-page" >}}
{{< filetree/file name="index.md" >}}
{{< filetree/file name="notebook.ipynb" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
```markdown {filename="content/docs/my-page/index.md"}
---
title: صفحه من
math: true
---
{{%/* jupyter "notebook.ipynb" */%}}
```
### استفاده از یک نوت‌بوک راه‌دور
همچنین می‌توانید از یک نوت‌بوک راه‌دور با ارائه URL به فایل نوت‌بوک استفاده کنید. به‌عنوان مثال، برای گنجاندن نوت‌بوک [Jupyter Notebook چیست](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) در صفحه، می‌توانید از شورتکد زیر استفاده کنید:
```
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
```
## نمونه نوت‌بوک
{{< callout type="info" >}}مثال زیر یک نمونه از فایل نوت‌بوک است که در پوشه assets پروژه گنجانده شده است.{{< /callout >}}
{{% jupyter "example.ipynb" %}}
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

View File

@@ -6,15 +6,15 @@ sidebar:
exclude: true
---
{{< callout >}}Jupyter Notebook をショートコード経由で含める実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
{{< callout >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
[Jupyter Notebook](https://jupyter.org/) は[Project Jupyter](https://jupyter.org/) の言語依存しない HTML ノートブックアプリケーションです。これを使用すると、ライブコード、数式、視覚化、および説明文を含むドキュメントを作成して共有できます。
[Jupyter Notebook](https://jupyter.org/) は [Project Jupyter](https://jupyter.org/) の言語依存 HTML ノートブックアプリケーションです。ライブコード、数式、可視化、説明文を含むドキュメントを作成共有できます。
<!--more-->
## 使用方法
### ローカルノートブック使用する
### ローカルノートブック使用
Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
@@ -29,11 +29,11 @@ Jupyter Notebook ショートコードを使用するには、プロジェクト
{{< /filetree/folder >}}
{{< /filetree/container >}}
`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます
`jupyter` ショートコードを使用してページに Jupyter Notebook を組み込みます:
```markdown {filename="content/docs/my-page.md"}
---
title: My Page
title: マイページ
math: true
---
@@ -55,16 +55,16 @@ math: true
```markdown {filename="content/docs/my-page/index.md"}
---
title: My Page
title: マイページ
math: true
---
{{%/* jupyter "notebook.ipynb" */%}}
```
### リモートノートブック使用する
### リモートノートブック使用
ノートブックファイルの URL を指定して、リモートノートブック使用することもできます。たとえば、[What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) ノートブックをページに含めるには、のショートコードを使用します
ノートブックファイルの URL を指定することで、リモートノートブック使用できます。えば、[What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) ノートブックをページに組み込むには、以下のショートコードを使用します:
```
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
@@ -72,7 +72,7 @@ math: true
## ノートブックの例
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれているノートブックファイルの例です。{{< /callout >}}
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれるノートブックファイルの例です。{{< /callout >}}
{{% jupyter "example.ipynb" %}}

View File

@@ -6,9 +6,9 @@ sidebar:
exclude: true
---
{{< callout >}}实验性功能:通过短代码嵌入 Jupyter Notebook。注意并非所有单元格类型都受支持。{{< /callout >}}
{{< callout >}}实验性功能:通过短代码嵌入 Jupyter Notebook。注意并非所有单元格类型都受支持。{{< /callout >}}
[Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 的一个语言无关的 HTML 笔记本应用程序。它允许你创建和享包含实时代码、方程、可视化和叙述性文本的文档。
[Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 推出的语言无关的 HTML 笔记本应用。它允许你创建和享包含动态代码、数学公式、可视化图表和叙述性文本的文档。
<!--more-->
@@ -16,7 +16,7 @@ sidebar:
### 使用本地笔记本
要使用 Jupyter Notebook 短代码,你需要在项目中一个 Jupyter Notebook 文件。类似于如何[添加图片](../../organize-files#add-images)到项目,你可以将 Jupyter Notebooks 添加到 `assets` 文件夹。
要使用 Jupyter Notebook 短代码,你需要在项目中放置一个 Jupyter Notebook 文件。[添加图片](../../organize-files#add-images)到项目类似,你可以将 Jupyter Notebook 放入 `assets` 文件夹。
{{< filetree/container >}}
{{< filetree/folder name="assets" >}}
@@ -29,7 +29,7 @@ sidebar:
{{< /filetree/folder >}}
{{< /filetree/container >}}
使用 `jupyter` 短代码将 Jupyter Notebook 包含在页面
使用 `jupyter` 短代码将笔记本嵌入页面:
```markdown {filename="content/docs/my-page.md"}
---
@@ -40,7 +40,7 @@ math: true
{{%/* jupyter "notebook.ipynb" */%}}
```
或者,你可以利用 Hugo 的[页面包][page-bundles]功能将 Jupyter Notebooks 与 Markdown 文件一起组织。
或者,你可以利用 Hugo 的[页面包][page-bundles]功能将 Jupyter Notebook 与 Markdown 文件组织在一起
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
@@ -64,7 +64,7 @@ math: true
### 使用远程笔记本
你也可以通过提供笔记本文件的 URL 来使用远程笔记本。例如,要在页面中包含 [What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) 笔记本,可以使用以下短代码:
你也可以通过提供笔记本文件的 URL 来使用远程笔记本。例如,要在页面中嵌入 [什么是 Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) 笔记本,可以使用以下短代码:
```
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
@@ -72,7 +72,7 @@ math: true
## 示例笔记本
{{< callout type="info" >}}以下是包含在项目 assets 文件夹中的笔记本文件示例。{{< /callout >}}
{{< callout type="info" >}}以下示例展示的是项目 assets 文件夹中包含的笔记本文件。{{< /callout >}}
{{% jupyter "example.ipynb" %}}

View File

@@ -0,0 +1,78 @@
---
title: سایر شورتکدها
linkTitle: سایر
sidebar:
exclude: true
next: /docs/guide/deploy-site
---
{{< callout emoji="" >}}
برخی از این‌ها شورتکدهای داخلی Hugo هستند.
این شورتکدها کمتر پایدار در نظر گرفته می‌شوند و ممکن است هر زمان تغییر کنند.
{{< /callout >}}
## نشان
```
{{</* badge "نشان" */>}}
```
نتیجه:
{{< badge "نشان" >}}
انواع مختلف:
```
{{</* badge content="اطلاعات" type="info" */>}}
{{</* badge content="هشدار" type="warning" */>}}
{{</* badge content="خطا" type="error" */>}}
```
نتیجه:
{{< badge content="اطلاعات" type="info" >}} &nbsp;
{{< badge content="هشدار" type="warning" >}} &nbsp;
{{< badge content="خطا" type="error" >}}
با لینک و آیکون:
```
{{</* badge content="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
```
نتیجه:
{{< badge content="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" >}}
## یوتیوب
تعبیه یک ویدیوی یوتیوب.
```
{{</* youtube VIDEO_ID */>}}
```
نتیجه:
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
برای اطلاعات بیشتر، به [شورتکد یوتیوب Hugo](https://gohugo.io/content-management/shortcodes/#youtube) مراجعه کنید.
## پی‌دی‌اف
با شورتکد پی‌دی‌اف، می‌توانید یک فایل پی‌دی‌اف را در محتوای خود تعبیه کنید.
```
{{</* pdf "https://example.com/sample.pdf" */>}}
```
همچنین می‌توانید فایل پی‌دی‌اف را در دایرکتوری پروژه خود قرار دهید و از مسیر نسبی استفاده کنید.
```
{{</* pdf "path/to/file.pdf" */>}}
```
مثال:
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}

View File

@@ -3,22 +3,23 @@ title: その他のショートコード
linkTitle: その他
sidebar:
exclude: true
next: /docs/guide/deploy-site
---
{{< callout emoji="" >}}
これらの一部はHugo組み込みショートコードです。
これらの一部は Hugo 組み込みショートコードです。
これらのショートコードは安定性が低く、いつでも変更される可能性があります。
{{< /callout >}}
## バッジ
```
{{</* badge "バッジ" */>}}
{{</* badge "Badge" */>}}
```
結果:
{{< badge "バッジ" >}}
{{< badge "Badge" >}}
バリエーション:
@@ -37,16 +38,16 @@ sidebar:
リンクとアイコン付き:
```
{{</* badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
```
結果:
{{< badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" >}}
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
## YouTube
YouTube動画を埋め込みます。
YouTube 動画を埋め込みます。
```
{{</* youtube VIDEO_ID */>}}
@@ -56,17 +57,17 @@ YouTube動画を埋め込みます。
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
詳細については、[HugoYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
詳細については、[HugoYouTube ショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
## PDF
PDFショートコードを使用すると、コンテンツ内にPDFファイルを埋め込むことができます。
PDF ショートコードを使用すると、コンテンツ内に PDF ファイルを埋め込むことができます。
```
{{</* pdf "https://example.com/sample.pdf" */>}}
```
また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。
プロジェクトディレクトリ内に PDF ファイルを配置し、相対パスを使用することもできます。
```
{{</* pdf "path/to/file.pdf" */>}}

View File

@@ -3,11 +3,12 @@ title: 其他短代码
linkTitle: 其他
sidebar:
exclude: true
next: /docs/guide/deploy-site
---
{{< callout emoji="" >}}
其中一些是 Hugo 内置短代码。
这些短代码被认为不太稳定,可能随时更
其中部分为Hugo内置短代码。
这些短代码稳定性较低,可能随时更。
{{< /callout >}}
## 徽章
@@ -16,7 +17,7 @@ sidebar:
{{</* badge "徽章" */>}}
```
果:
果:
{{< badge "徽章" >}}
@@ -28,7 +29,7 @@ sidebar:
{{</* badge content="错误" type="error" */>}}
```
果:
果:
{{< badge content="信息" type="info" >}} &nbsp;
{{< badge content="警告" type="warning" >}} &nbsp;
@@ -37,22 +38,22 @@ sidebar:
带链接和图标:
```
{{</* badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
{{</* badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
```
果:
果:
{{< badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
{{< badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
## YouTube
嵌入 YouTube 视频。
嵌入YouTube视频。
```
{{</* youtube 视频ID */>}}
```
果:
果:
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
@@ -60,13 +61,13 @@ sidebar:
## PDF
使用 PDF 短代码,您可以在内容中嵌入 PDF 文件。
通过PDF短代码在内容中嵌入PDF文件。
```
{{</* pdf "https://example.com/sample.pdf" */>}}
```
也可以将 PDF 文件放在项目目录中并使用相对路径。
也可PDF文件置于项目目录中并使用相对路径。
```
{{</* pdf "path/to/file.pdf" */>}}

View File

@@ -1,6 +1,5 @@
---
title: مراحل
next: /docs/guide/deploy-site
---
یک کامپوننت داخلی برای نمایش یک سری مراحل.
@@ -10,6 +9,7 @@ next: /docs/guide/deploy-site
{{% steps %}}
### مرحله ۱
این اولین مرحله است.
### مرحله ۲
@@ -23,9 +23,14 @@ next: /docs/guide/deploy-site
{{% /steps %}}
## استفاده
## نحوه استفاده
سرتیتر مارک‌داون h3 را در کد کوتاه `steps` قرار دهید.
{{< callout emoji="" >}}
لطفاً توجه داشته باشید که این شورتکد **فقط برای محتوای Markdown** طراحی شده است.
اگر محتوای HTML یا شورتکدهای دیگر را به عنوان محتوای مرحله قرار دهید، ممکن است به درستی نمایش داده نشود.
{{< /callout >}}
عنوان h3 مارک‌داون را درون شورتکد `steps` قرار دهید.
```
{{%/* steps */%}}
@@ -39,4 +44,4 @@ next: /docs/guide/deploy-site
این دومین مرحله است.
{{%/* /steps */%}}
```
```

View File

@@ -2,7 +2,7 @@
title: ステップ
---
ステップのシリーズを表示するための組み込みコンポーネント。
一連のステップを表示するための組み込みコンポーネントです
## 例
@@ -22,14 +22,15 @@ title: ステップ
{{% /steps %}}
## 使い方
{{< callout emoji="" >}}
このショートコードは**Markdownコンテンツ専用**であることに注意してください。
HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。
このショートコードは **Markdown コンテンツ専用** であることに注意してください。
HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
{{< /callout >}}
`steps` ショートコード内にMarkdownh3ヘッダーを配置します。
`steps` ショートコード内に Markdownh3 ヘッダーを配置します。
```
{{%/* steps */%}}

View File

@@ -23,14 +23,14 @@ title: 步骤
{{% /steps %}}
##
## 使用方
{{< callout emoji="" >}}
请注意,此短代码**仅适用于 Markdown 内容**。
如果HTML 内容或其他短代码作为步骤内容,可能无法按预期渲染。
请注意,此短代码**仅适用于Markdown内容**。
如果在步骤内容中放入HTML或其他短代码可能无法按预期渲染。
{{< /callout >}}
`steps` 短代码放置 Markdown 的 h3 标题。
`steps`短代码放置Markdown的三级标题。
```
{{%/* steps */%}}

View File

@@ -1,70 +1,71 @@
---
title: زبانهها
title: تبها
next: /docs/guide/deploy-site
---
## مثال
{{< tabs items="JSON,YAML,TOML" >}}
{{< tabs items="macOS,Linux,Windows" >}}
{{< tab >}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{< /tab >}}
{{< tab >}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{< /tab >}}
{{< tab >}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{< /tab >}}
{{< tab >}}**macOS**: یک سیستم عامل دسکتاپ توسط اپل.{{< /tab >}}
{{< tab >}}**Linux**: یک سیستم عامل متن‌باز.{{< /tab >}}
{{< tab >}}**Windows**: یک سیستم عامل دسکتاپ توسط مایکروسافت.{{< /tab >}}
{{< /tabs >}}
## استفاده
## نحوه استفاده
### پیش‌فرض
```
{{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{</* /tab */>}}
{{</* tab */>}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{</* /tab */>}}
{{</* tab */>}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{</* /tab */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
{{</* /tabs */>}}
```
### مشخص کردن زبانه‌ پیش‌فرض
### مشخص کردن ایندکس انتخاب شده
از ویژگی `defaultIndex` برای مشخص کردن زبانه‌ پیش‌فرض استفاده کنید. این شاخص از 0 شروع می‌شود.
از ویژگی `defaultIndex` برای مشخص کردن تب انتخاب شده استفاده کنید. ایندکس از 0 شروع می‌شود.
```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
{{</* tab */>}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{</* /tab */>}}
{{</* tab */>}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{</* /tab */>}}
{{</* tab */>}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{</* /tab */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
{{</* /tabs */>}}
```
زبانه‌ `YAML` به طور پیش‌فرض انتخاب می‌شود.
تب `YAML` به طور پیش‌فرض انتخاب خواهد شد.
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
{{< tab >}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{< /tab >}}
{{< tab >}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{< /tab >}}
{{< tab >}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{< /tab >}}
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}}
{{< tab >}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{< /tab >}}
{{< tab >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}}
{{< /tabs >}}
### استفاده از مارک‌داون
### استفاده از Markdown
سینتکس مارک‌داون از جمله بلوک کد نیز پشتیبانی می‌شود:
نحو Markdown شامل بلوک کد نیز پشتیبانی می‌شود:
````
{{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}
```json
{ "سلام": "دنیا" }
{ "hello": "world" }
```
{{</* /tab */>}}
... زبانه‌های دیگر را به همین ترتیب اضافه کنید
... سایر تب‌ها را به همین ترتیب اضافه کنید
{{</* /tabs */>}}
````
@@ -73,20 +74,52 @@ title: زبانه‌ها
{{< tab >}}
```json
{ "سلام": "دنیا" }
{ "hello": "world" }
```
{{< /tab >}}
{{< tab >}}
```yaml
سلام: دنیا
hello: world
```
{{< /tab >}}
{{< tab >}}
```toml
سلام = "دنیا"
hello = "world"
```
{{< /tab >}}
{{< /tabs >}}
### همگام‌سازی تب‌ها
تب‌هایی که لیست `items` یکسانی دارند می‌توانند همگام‌سازی شوند. وقتی فعال باشد، انتخاب یک تب تمام تب‌های دیگر با `items` یکسان را به‌روز می‌کند و انتخاب را در بین صفحات به خاطر می‌سپارد.
به صورت جهانی در فایل `hugo.yaml` در بخش `page` فعال کنید:
```yaml {filename="hugo.yaml"}
params:
page:
tabs:
sync: true
```
با فعال کردن این گزینه، دو بلوک تب زیر همیشه آیتم انتخاب شده یکسانی را نمایش خواهند داد:
```markdown
{{</* tabs items="A,B" */>}}
{{</* tab */>}}محتوای A{{</* /tab */>}}
{{</* tab */>}}محتوای B{{</* /tab */>}}
{{</* /tabs */>}}
{{</* tabs items="A,B" */>}}
{{</* tab */>}}محتوای دوم A{{</* /tab */>}}
{{</* tab */>}}محتوای دوم B{{</* /tab */>}}
{{</* /tabs */>}}
```

View File

@@ -5,11 +5,11 @@ next: /docs/guide/deploy-site
## 例
{{< tabs items="JSON,YAML,TOML" >}}
{{< tabs items="macOS,Linux,Windows" >}}
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
{{< tab >}}**macOS**: Apple が提供するデスクトップオペレーティングシステム。{{< /tab >}}
{{< tab >}}**Linux**: オープンソースのオペレーティングシステム。{{< /tab >}}
{{< tab >}}**Windows**: Microsoft が提供するデスクトップオペレーティングシステム。{{< /tab >}}
{{< /tabs >}}
@@ -20,23 +20,23 @@ next: /docs/guide/deploy-site
```
{{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースフォーマットです。{{</* /tab */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML は、明なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
{{</* /tabs */>}}
```
### 選択されたインデックス指定
### 選択インデックス指定
`defaultIndex` プロパティを使用して選択されるタブを指定します。インデックスは 0 から始まります。
`defaultIndex` プロパティを使用して選択るタブを指定します。インデックスは 0 から始まります。
```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースフォーマットです。{{</* /tab */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML は、明なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
{{</* /tabs */>}}
```
@@ -45,14 +45,14 @@ next: /docs/guide/deploy-site
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースフォーマットです。{{< /tab >}}
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{< /tab >}}
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
{{< tab >}}**TOML**: TOML は、明なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
{{< /tabs >}}
### Markdown 使用
### Markdown 使用
コードブロックを含む Markdown 構文もサポートされています:
@@ -90,4 +90,36 @@ next: /docs/guide/deploy-site
```
{{< /tab >}}
{{< /tabs >}}
{{< /tabs >}}
### タブの同期
同じ `items` リストを持つタブは同期できます。有効にすると、タブを選択すると同じ `items` を持つ他のタブも更新され、ページ間で選択が記憶されます。
`hugo.yaml` の `page` セクションでグローバルに有効にします:
```yaml {filename="hugo.yaml"}
params:
page:
tabs:
sync: true
```
これを有効にすると、以下の 2 つのタブブロックは常に同じ選択項目を表示します:
```markdown
{{</* tabs items="A,B" */>}}
{{</* tab */>}}A の内容{{</* /tab */>}}
{{</* tab */>}}B の内容{{</* /tab */>}}
{{</* /tabs */>}}
{{</* tabs items="A,B" */>}}
{{</* tab */>}}2 番目の A の内容{{</* /tab */>}}
{{</* tab */>}}2 番目の B の内容{{</* /tab */>}}
{{</* /tabs */>}}
```

View File

@@ -5,56 +5,56 @@ next: /docs/guide/deploy-site
## 示例
{{< tabs items="JSON,YAML,TOML" >}}
{{< tabs items="macOS,Linux,Windows" >}}
{{< tab >}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{< /tab >}}
{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}}
{{< tab >}}**TOML**: TOML 旨在成为一种最小化的配置文件格式,由于其明显的语义,易于阅读。{{< /tab >}}
{{< tab >}}**macOS**: 苹果公司开发的桌面操作系统。{{< /tab >}}
{{< tab >}}**Linux**: 一款开源操作系统。{{< /tab >}}
{{< tab >}}**Windows**: 微软公司开发的桌面操作系统。{{< /tab >}}
{{< /tabs >}}
##
## 使用方
### 默认
```
{{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML 旨在成为一种最小化配置文件格式,由于其明显的语义易于阅读。{{</* /tab */>}}
{{</* tab */>}}**JSON**: JavaScript对象表示法JSON是一种基于JavaScript对象语法的标准文本格式用于表示结构化数据。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式,其明显的语义易于理解。{{</* /tab */>}}
{{</* /tabs */>}}
```
### 指定选中索引
### 指定默认选中项
使用 `defaultIndex` 属性指定选中的标签页索引从 0 开始。
使用 `defaultIndex` 属性指定默认选中的标签页索引从0开始。
```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
{{</* tab */>}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML 旨在成为一种最小化配置文件格式,由于其明显的语义易于阅读。{{</* /tab */>}}
{{</* tab */>}}**JSON**: JavaScript对象表示法JSON是一种基于JavaScript对象语法的标准文本格式用于表示结构化数据。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式,其明显的语义易于理解。{{</* /tab */>}}
{{</* /tabs */>}}
```
默认情况下,`YAML` 标签页将被选中
默认会选中 `YAML` 标签页。
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
{{< tab >}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{< /tab >}}
{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}}
{{< tab >}}**TOML**: TOML 旨在成为一种最小化配置文件格式,由于其明显的语义易于阅读。{{< /tab >}}
{{< tab >}}**JSON**: JavaScript对象表示法JSON是一种基于JavaScript对象语法的标准文本格式用于表示结构化数据。{{< /tab >}}
{{< tab >}}**YAML**: YAML是一种人类可读的数据序列化语言。{{< /tab >}}
{{< tab >}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式,其明显的语义易于理解。{{< /tab >}}
{{< /tabs >}}
### 使用 Markdown
### 使用Markdown
Markdown 语法,包括代码块,也受支持
支持包括代码块在内的Markdown语法
````
{{</* tabs items="JSON,YAML,TOML" */>}}
@@ -65,7 +65,7 @@ Markdown 语法,包括代码块,也受支持:
```
{{</* /tab */>}}
... 类似地添加其他标签页
... 其他标签页类似添加
{{</* /tabs */>}}
````
@@ -90,4 +90,36 @@ Markdown 语法,包括代码块,也受支持:
```
{{< /tab >}}
{{< /tabs >}}
{{< /tabs >}}
### 同步标签页
具有相同 `items` 列表的标签页可以同步。启用后,选择一个标签页会更新所有具有相同 `items` 的其他标签页,并在页面间记住选择。
在 `hugo.yaml` 的 `page` 部分全局启用:
```yaml {filename="hugo.yaml"}
params:
page:
tabs:
sync: true
```
启用后,以下两个标签页块将始终显示相同的选中项:
```markdown
{{</* tabs items="A,B" */>}}
{{</* tab */>}}A内容{{</* /tab */>}}
{{</* tab */>}}B内容{{</* /tab */>}}
{{</* /tabs */>}}
{{</* tabs items="A,B" */>}}
{{</* tab */>}}第二个A内容{{</* /tab */>}}
{{</* tab */>}}第二个B内容{{</* /tab */>}}
{{</* /tabs */>}}
```