fix: migrate tabs shortcode to new standard syntax (#906)
* doc(tabs): update shortcode syntax to use new syntax - Changed tab shortcode syntax from `items` to `name` for better clarity and consistency in multiple language documentation. - Updated related examples in Persian, Japanese, and Simplified Chinese to reflect the new syntax. - Adjusted the sidebar CSS to correct a z-index value for improved layout behavior on mobile devices. * fix(sidebar, toc): update CSS classes for improved layout and text wrapping - Adjusted the sidebar CSS class to use a new transform syntax for better compatibility. - Updated the table of contents link class to ensure proper text wrapping behavior. * chore: recompile css * fix(css): update CSS classes for improved text wrapping - Changed `break-words` to `wrap-break-word` in multiple CSS files to enhance text wrapping behavior. - Adjusted the `.hextra-code-filename` and typography styles for better compatibility and consistency.
This commit is contained in:
Xin
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
.hextra-search-wrapper {
|
||||
li {
|
||||
@apply hx:mx-2.5 hx:break-words hx:rounded-md hx:contrast-more:border hx:text-gray-800 hx:contrast-more:border-transparent hx:dark:text-gray-300;
|
||||
@apply hx:mx-2.5 hx:wrap-break-word hx:rounded-md hx:contrast-more:border hx:text-gray-800 hx:contrast-more:border-transparent hx:dark:text-gray-300;
|
||||
a {
|
||||
@apply hx:focus-visible:outline-none hx:focus:outline-none hx:block hx:scroll-m-12 hx:px-2.5 hx:py-2;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@media (max-width: 48rem) {
|
||||
.hextra-sidebar-container {
|
||||
@apply hx:fixed hx:pt-[calc(var(--navbar-height)+var(--hextra-banner-height))] hx:top-0 hx:w-full hx:bottom-0 hx:z-[15] hx:overscroll-contain hx:bg-white hx:dark:bg-dark;
|
||||
@apply hx:fixed hx:pt-[calc(var(--navbar-height)+var(--hextra-banner-height))] hx:top-0 hx:w-full hx:bottom-0 hx:z-15 hx:overscroll-contain hx:bg-white hx:dark:bg-dark;
|
||||
transition: transform 0.4s cubic-bezier(0.52, 0.16, 0.04, 1);
|
||||
will-change: transform, opacity;
|
||||
contain: layout style;
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
.hextra-code-filename {
|
||||
@apply hx:absolute hx:top-0 hx:z-[1] hx:w-full hx:truncate hx:rounded-t-xl hx:bg-primary-700/5 hx:py-2 hx:px-4 hx:text-xs hx:text-gray-700 hx:dark:bg-primary-300/10 hx:dark:text-gray-200;
|
||||
@apply hx:absolute hx:top-0 hx:z-1 hx:w-full hx:truncate hx:rounded-t-xl hx:bg-primary-700/5 hx:py-2 hx:px-4 hx:text-xs hx:text-gray-700 hx:dark:bg-primary-300/10 hx:dark:text-gray-200;
|
||||
}
|
||||
|
||||
.hextra-code-filename + pre:not(.lntable pre) {
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
@apply hx:bg-primary-700/5 hx:mb-4 hx:overflow-x-auto hx:rounded-xl hx:font-medium hx:subpixel-antialiased hx:dark:bg-primary-300/10 hx:text-[.9em] hx:contrast-more:border hx:contrast-more:border-primary-900/20 hx:contrast-more:contrast-150 hx:contrast-more:dark:border-primary-100/40 hx:py-4;
|
||||
}
|
||||
:where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:border-black/4 hx:bg-black/3 hx:break-words hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
|
||||
@apply hx:border-black/4 hx:bg-black/3 hx:wrap-break-word hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
|
||||
}
|
||||
:where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:block hx:overflow-x-auto hx:my-6 hx:p-0 hx:first:mt-0 hx:w-full hx:text-sm hx:leading-5 hx:border-collapse;
|
||||
@@ -71,7 +71,7 @@
|
||||
@apply hx:mt-0;
|
||||
}
|
||||
:where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:border-black/4 hx:bg-black/3 hx:break-words hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
|
||||
@apply hx:border-black/4 hx:bg-black/3 hx:wrap-break-word hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
|
||||
}
|
||||
:where(pre.mermaid):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:bg-transparent hx:rounded-none hx:dark:bg-transparent;
|
||||
|
||||
@@ -512,8 +512,8 @@ To add [Open Graph](https://ogp.me/) metadata, you can:
|
||||
As a page can have multiple `image` and `video` tags, place their values in an array.
|
||||
Other Open Graph properties can have only one value.
|
||||
|
||||
{{< tabs items="Page Level, Global Level" >}}
|
||||
{{< tab >}}
|
||||
{{< tabs >}}
|
||||
{{< tab name="Page Level" >}}
|
||||
|
||||
```md {filename="mypage.md"}
|
||||
---
|
||||
@@ -529,7 +529,7 @@ params:
|
||||
Page content.
|
||||
```
|
||||
{{< /tab >}}
|
||||
{{< tab >}}
|
||||
{{< tab name="Global Level" >}}
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
images:
|
||||
|
||||
@@ -5,11 +5,11 @@ next: /docs/guide/deploy-site
|
||||
|
||||
## مثال
|
||||
|
||||
{{< tabs items="macOS,Linux,Windows" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}**macOS**: یک سیستم عامل دسکتاپ توسط اپل.{{< /tab >}}
|
||||
{{< tab >}}**Linux**: یک سیستم عامل متنباز.{{< /tab >}}
|
||||
{{< tab >}}**Windows**: یک سیستم عامل دسکتاپ توسط مایکروسافت.{{< /tab >}}
|
||||
{{< tab name="macOS" >}}**macOS**: یک سیستم عامل دسکتاپ توسط اپل.{{< /tab >}}
|
||||
{{< tab name="Linux" >}}**Linux**: یک سیستم عامل متنباز.{{< /tab >}}
|
||||
{{< tab name="Windows" >}}**Windows**: یک سیستم عامل دسکتاپ توسط مایکروسافت.{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -18,36 +18,36 @@ next: /docs/guide/deploy-site
|
||||
### پیشفرض
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش دادههای ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML یک زبان سریالسازی دادههای قابل خواندن توسط انسان است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش دادههای ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
|
||||
{{</* tab name="YAML" */>}}**YAML**: YAML یک زبان سریالسازی دادههای قابل خواندن توسط انسان است.{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### مشخص کردن ایندکس انتخاب شده
|
||||
|
||||
از ویژگی `defaultIndex` برای مشخص کردن تب انتخاب شده استفاده کنید. ایندکس از 0 شروع میشود.
|
||||
از ویژگی `selected` برای مشخص کردن تب انتخاب شده استفاده کنید.
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش دادههای ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML یک زبان سریالسازی دادههای قابل خواندن توسط انسان است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش دادههای ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
|
||||
{{</* tab name="YAML" selected=true */>}}**YAML**: YAML یک زبان سریالسازی دادههای قابل خواندن توسط انسان است.{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
تب `YAML` به طور پیشفرض انتخاب خواهد شد.
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش دادههای ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML یک زبان سریالسازی دادههای قابل خواندن توسط انسان است.{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}}
|
||||
{{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش دادههای ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}}
|
||||
{{< tab name="YAML" selected=true >}}**YAML**: YAML یک زبان سریالسازی دادههای قابل خواندن توسط انسان است.{{< /tab >}}
|
||||
{{< tab name="TOML" >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -57,9 +57,9 @@ next: /docs/guide/deploy-site
|
||||
نحو Markdown شامل بلوک کد نیز پشتیبانی میشود:
|
||||
|
||||
````
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
{{</* tab name="JSON" */>}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
@@ -70,21 +70,21 @@ next: /docs/guide/deploy-site
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab name="JSON" >}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab name="YAML" >}}
|
||||
```yaml
|
||||
hello: world
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab name="TOML" >}}
|
||||
```toml
|
||||
hello = "world"
|
||||
```
|
||||
@@ -95,7 +95,7 @@ next: /docs/guide/deploy-site
|
||||
|
||||
### همگامسازی تبها
|
||||
|
||||
تبهایی که لیست `items` یکسانی دارند میتوانند همگامسازی شوند. وقتی فعال باشد، انتخاب یک تب تمام تبهای دیگر با `items` یکسان را بهروز میکند و انتخاب را در بین صفحات به خاطر میسپارد.
|
||||
تبهایی که لیست `name` یکسانی دارند میتوانند همگامسازی شوند. وقتی فعال باشد، انتخاب یک تب تمام تبهای دیگر با `name` یکسان را بهروز میکند و انتخاب را در بین صفحات به خاطر میسپارد.
|
||||
|
||||
به صورت جهانی در فایل `hugo.yaml` در بخش `page` فعال کنید:
|
||||
|
||||
@@ -109,17 +109,17 @@ params:
|
||||
با فعال کردن این گزینه، دو بلوک تب زیر همیشه آیتم انتخاب شده یکسانی را نمایش خواهند داد:
|
||||
|
||||
```markdown
|
||||
{{</* tabs items="A,B" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}محتوای A{{</* /tab */>}}
|
||||
{{</* tab */>}}محتوای B{{</* /tab */>}}
|
||||
{{</* tab name="A" */>}}محتوای A{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}محتوای B{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs items="A,B" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}محتوای دوم A{{</* /tab */>}}
|
||||
{{</* tab */>}}محتوای دوم B{{</* /tab */>}}
|
||||
{{</* tab name="A" */>}}محتوای دوم A{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}محتوای دوم B{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
@@ -5,11 +5,11 @@ next: /docs/guide/deploy-site
|
||||
|
||||
## 例
|
||||
|
||||
{{< tabs items="macOS,Linux,Windows" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}**macOS**: Apple が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab >}}**Linux**: オープンソースのオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab >}}**Windows**: Microsoft が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab name="macOS" >}}**macOS**: Apple が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab name="Linux" >}}**Linux**: オープンソースのオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab name="Windows" >}}**Windows**: Microsoft が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -18,36 +18,36 @@ next: /docs/guide/deploy-site
|
||||
### デフォルト
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab name="YAML" */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 選択インデックスの指定
|
||||
|
||||
`defaultIndex` プロパティを使用して選択するタブを指定します。インデックスは 0 から始まります。
|
||||
`selected` プロパティを使用して選択するタブを指定します。
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab name="YAML" selected=true */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
`YAML` タブがデフォルトで選択されます。
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
{{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{< /tab >}}
|
||||
{{< tab name="YAML" selected=true >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab name="TOML" >}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -57,9 +57,9 @@ next: /docs/guide/deploy-site
|
||||
コードブロックを含む Markdown 構文もサポートされています:
|
||||
|
||||
````
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
{{</* tab name="JSON" */>}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
@@ -70,21 +70,21 @@ next: /docs/guide/deploy-site
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab name="JSON" >}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab name="YAML" >}}
|
||||
```yaml
|
||||
hello: world
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab name="TOML" >}}
|
||||
```toml
|
||||
hello = "world"
|
||||
```
|
||||
@@ -95,7 +95,7 @@ next: /docs/guide/deploy-site
|
||||
|
||||
### タブの同期
|
||||
|
||||
同じ `items` リストを持つタブは同期できます。有効にすると、タブを選択すると同じ `items` を持つ他のタブも更新され、ページ間で選択が記憶されます。
|
||||
同じ `name` リストを持つタブは同期できます。有効にすると、タブを選択すると同じ `name` を持つ他のタブも更新され、ページ間で選択が記憶されます。
|
||||
|
||||
`hugo.yaml` の `page` セクションでグローバルに有効にします:
|
||||
|
||||
@@ -109,17 +109,17 @@ params:
|
||||
これを有効にすると、以下の 2 つのタブブロックは常に同じ選択項目を表示します:
|
||||
|
||||
```markdown
|
||||
{{</* tabs items="A,B" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}A の内容{{</* /tab */>}}
|
||||
{{</* tab */>}}B の内容{{</* /tab */>}}
|
||||
{{</* tab name="A" */>}}A の内容{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}B の内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs items="A,B" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}2 番目の A の内容{{</* /tab */>}}
|
||||
{{</* tab */>}}2 番目の B の内容{{</* /tab */>}}
|
||||
{{</* tab name="A" */>}}2 番目の A の内容{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}2 番目の B の内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
@@ -5,11 +5,11 @@ next: /docs/guide/deploy-site
|
||||
|
||||
## 示例
|
||||
|
||||
{{< tabs items="macOS,Linux,Windows" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}**macOS**: 苹果公司开发的桌面操作系统。{{< /tab >}}
|
||||
{{< tab >}}**Linux**: 一款开源操作系统。{{< /tab >}}
|
||||
{{< tab >}}**Windows**: 微软公司开发的桌面操作系统。{{< /tab >}}
|
||||
{{< tab name="macOS" >}}**macOS**: 苹果公司开发的桌面操作系统。{{< /tab >}}
|
||||
{{< tab name="Linux" >}}**Linux**: 一款开源操作系统。{{< /tab >}}
|
||||
{{< tab name="Windows" >}}**Windows**: 微软公司开发的桌面操作系统。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -18,36 +18,36 @@ next: /docs/guide/deploy-site
|
||||
### 默认
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{</* /tab */>}}
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab name="YAML" */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 指定默认选中项
|
||||
|
||||
使用 `defaultIndex` 属性指定默认选中的标签页，索引从0开始。
|
||||
使用 `selected` 属性指定默认选中的标签页。
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{</* /tab */>}}
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab name="YAML" selected=true */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
默认会选中 `YAML` 标签页。
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML是一种人类可读的数据序列化语言。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{< /tab >}}
|
||||
{{< tab name="JSON" >}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{< /tab >}}
|
||||
{{< tab name="YAML" selected=true >}}**YAML**: YAML是一种人类可读的数据序列化语言。{{< /tab >}}
|
||||
{{< tab name="TOML" >}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -57,9 +57,9 @@ next: /docs/guide/deploy-site
|
||||
支持包括代码块在内的Markdown语法：
|
||||
|
||||
````
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
{{</* tab name="JSON" */>}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
@@ -70,21 +70,21 @@ next: /docs/guide/deploy-site
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab name="JSON" >}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab name="YAML" >}}
|
||||
```yaml
|
||||
hello: world
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab name="TOML" >}}
|
||||
```toml
|
||||
hello = "world"
|
||||
```
|
||||
@@ -95,7 +95,7 @@ next: /docs/guide/deploy-site
|
||||
|
||||
### 同步标签页
|
||||
|
||||
具有相同 `items` 列表的标签页可以同步。启用后，选择一个标签页会更新所有具有相同 `items` 的其他标签页，并在页面间记住选择。
|
||||
具有相同 `name` 列表的标签页可以同步。启用后，选择一个标签页会更新所有具有相同 `name` 的其他标签页，并在页面间记住选择。
|
||||
|
||||
在 `hugo.yaml` 的 `page` 部分全局启用：
|
||||
|
||||
@@ -109,17 +109,17 @@ params:
|
||||
启用后，以下两个标签页块将始终显示相同的选中项：
|
||||
|
||||
```markdown
|
||||
{{</* tabs items="A,B" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}A内容{{</* /tab */>}}
|
||||
{{</* tab */>}}B内容{{</* /tab */>}}
|
||||
{{</* tab name="A" */>}}A内容{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}B内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs items="A,B" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}第二个A内容{{</* /tab */>}}
|
||||
{{</* tab */>}}第二个B内容{{</* /tab */>}}
|
||||
{{</* tab name="A" */>}}第二个A内容{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}第二个B内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
@@ -20,7 +20,7 @@
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
<aside class="hextra-sidebar-container hx:flex hx:flex-col hx:print:hidden hx:md:top-16 hx:md:shrink-0 hx:md:w-64 hx:md:self-start hx:max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
|
||||
<aside class="hextra-sidebar-container hx:flex hx:flex-col hx:print:hidden hx:md:top-16 hx:md:shrink-0 hx:md:w-64 hx:md:self-start hx:max-md:transform-[translate3d(0,-100%,0)] {{ $sidebarClass }}">
|
||||
{{- if (site.Params.search.enable | default true) -}}
|
||||
<!-- Search bar on small screen -->
|
||||
<div class="hx:px-4 hx:pt-4 hx:md:hidden">
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
{{- range $headings }}
|
||||
{{- if .Title }}
|
||||
<li class="hx:my-2 hx:scroll-my-6 hx:scroll-py-6">
|
||||
<a class="{{ $class }} hx:inline-block hx:text-gray-500 hx:hover:text-gray-900 hx:dark:text-gray-400 hx:dark:hover:text-gray-300 hx:contrast-more:text-gray-900 hx:contrast-more:underline hx:contrast-more:dark:text-gray-50 hx:w-full hx:break-words" href="#{{ anchorize .ID }}">
|
||||
<a class="{{ $class }} hx:inline-block hx:text-gray-500 hx:hover:text-gray-900 hx:dark:text-gray-400 hx:dark:hover:text-gray-300 hx:contrast-more:text-gray-900 hx:contrast-more:underline hx:contrast-more:dark:text-gray-50 hx:w-full hx:wrap-break-word" href="#{{ anchorize .ID }}">
|
||||
{{- .Title | safeHTML | plainify | htmlUnescape }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user