ray/hextra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: migrate tabs shortcode to new standard syntax (#906)

Browse Source 
* 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
2026-01-19 22:50:49 +00:00
committed by GitHub
parent 5028140432
commit 8e1e446cb8
11 changed files with 102 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/compiled/main.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/components/search.css
View File

@@ -1,6 +1,6 @@
.hextra-search-wrapper { .hextra-search-wrapper {
li { 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 { a {
@apply hx:focus-visible:outline-none hx:focus:outline-none hx:block hx:scroll-m-12 hx:px-2.5 hx:py-2; @apply hx:focus-visible:outline-none hx:focus:outline-none hx:block hx:scroll-m-12 hx:px-2.5 hx:py-2;
} }

2
assets/css/components/sidebar.css
View File

@@ -1,6 +1,6 @@
@media (max-width: 48rem) { @media (max-width: 48rem) {
.hextra-sidebar-container { .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); transition: transform 0.4s cubic-bezier(0.52, 0.16, 0.04, 1);
will-change: transform, opacity; will-change: transform, opacity;
contain: layout style; contain: layout style;

2
assets/css/highlight.css
View File

@@ -10,7 +10,7 @@
} }
.hextra-code-filename { .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) { .hextra-code-filename + pre:not(.lntable pre) {

4
assets/css/typography.css
View File

@@ -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; @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] *)) { :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] *)) { :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; @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; @apply hx:mt-0;
} }
:where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) { :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] *)) { :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; @apply hx:bg-transparent hx:rounded-none hx:dark:bg-transparent;

6
docs/content/docs/guide/configuration.md
View File

@@ -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. 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. Other Open Graph properties can have only one value.
{{< tabs items="Page Level, Global Level" >}} {{< tabs >}}
{{< tab >}} {{< tab name="Page Level" >}}
```md {filename="mypage.md"} ```md {filename="mypage.md"}
--- ---
@@ -529,7 +529,7 @@ params:
Page content. Page content.
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab name="Global Level" >}}
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
images: images:

60
docs/content/docs/guide/shortcodes/tabs.fa.md
View File

@@ -5,11 +5,11 @@ next: /docs/guide/deploy-site
## مثال ## مثال
{{< tabs items="macOS,Linux,Windows" >}} {{< tabs >}}
{{< tab >}}**macOS**: یک سیستم عامل دسکتاپ توسط اپل.{{< /tab >}} {{< tab name="macOS" >}}**macOS**: یک سیستم عامل دسکتاپ توسط اپل.{{< /tab >}}
{{< tab >}}**Linux**: یک سیستم عامل متن‌باز.{{< /tab >}} {{< tab name="Linux" >}}**Linux**: یک سیستم عامل متن‌باز.{{< /tab >}}
{{< tab >}}**Windows**: یک سیستم عامل دسکتاپ توسط مایکروسافت.{{< /tab >}} {{< tab name="Windows" >}}**Windows**: یک سیستم عامل دسکتاپ توسط مایکروسافت.{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
@@ -18,36 +18,36 @@ next: /docs/guide/deploy-site
### پیش‌فرض ### پیش‌فرض
``` ```
{{</* tabs items="JSON,YAML,TOML" */>}} {{</* tabs */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}} {{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}} {{</* tab name="YAML" */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}} {{</* tab name="TOML" */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
### مشخص کردن ایندکس انتخاب شده ### مشخص کردن ایندکس انتخاب شده
از ویژگی `defaultIndex` برای مشخص کردن تب انتخاب شده استفاده کنید. ایندکس از 0 شروع می‌شود. از ویژگی `selected` برای مشخص کردن تب انتخاب شده استفاده کنید.
``` ```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}} {{</* tabs */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}} {{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}} {{</* tab name="YAML" selected=true */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}} {{</* tab name="TOML" */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
تب `YAML` به طور پیش‌فرض انتخاب خواهد شد. تب `YAML` به طور پیش‌فرض انتخاب خواهد شد.
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}} {{< tabs >}}
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}} {{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}}
{{< tab >}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{< /tab >}} {{< tab name="YAML" selected=true >}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{< /tab >}}
{{< tab >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}} {{< tab name="TOML" >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
@@ -57,9 +57,9 @@ next: /docs/guide/deploy-site
نحو Markdown شامل بلوک کد نیز پشتیبانی می‌شود: نحو Markdown شامل بلوک کد نیز پشتیبانی می‌شود:
```` ````
{{</* tabs items="JSON,YAML,TOML" */>}} {{</* tabs */>}}
{{</* tab */>}} {{</* tab name="JSON" */>}}
```json ```json
{ "hello": "world" } { "hello": "world" }
``` ```
@@ -70,21 +70,21 @@ next: /docs/guide/deploy-site
{{</* /tabs */>}} {{</* /tabs */>}}
```` ````
{{< tabs items="JSON,YAML,TOML" >}} {{< tabs >}}
{{< tab >}} {{< tab name="JSON" >}}
```json ```json
{ "hello": "world" } { "hello": "world" }
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab name="YAML" >}}
```yaml ```yaml
hello: world hello: world
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab name="TOML" >}}
```toml ```toml
hello = "world" hello = "world"
``` ```
@@ -95,7 +95,7 @@ next: /docs/guide/deploy-site
### همگام‌سازی تب‌ها ### همگام‌سازی تب‌ها
تب‌هایی که لیست `items` یکسانی دارند می‌توانند همگام‌سازی شوند. وقتی فعال باشد، انتخاب یک تب تمام تب‌های دیگر با `items` یکسان را به‌روز می‌کند و انتخاب را در بین صفحات به خاطر می‌سپارد. تب‌هایی که لیست `name` یکسانی دارند می‌توانند همگام‌سازی شوند. وقتی فعال باشد، انتخاب یک تب تمام تب‌های دیگر با `name` یکسان را به‌روز می‌کند و انتخاب را در بین صفحات به خاطر می‌سپارد.
به صورت جهانی در فایل `hugo.yaml` در بخش `page` فعال کنید: به صورت جهانی در فایل `hugo.yaml` در بخش `page` فعال کنید:
@@ -109,17 +109,17 @@ params:
با فعال کردن این گزینه، دو بلوک تب زیر همیشه آیتم انتخاب شده یکسانی را نمایش خواهند داد: با فعال کردن این گزینه، دو بلوک تب زیر همیشه آیتم انتخاب شده یکسانی را نمایش خواهند داد:
```markdown ```markdown
{{</* tabs items="A,B" */>}} {{</* tabs */>}}
{{</* tab */>}}محتوای A{{</* /tab */>}} {{</* tab name="A" */>}}محتوای A{{</* /tab */>}}
{{</* tab */>}}محتوای B{{</* /tab */>}} {{</* tab name="B" */>}}محتوای B{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
{{</* tabs items="A,B" */>}} {{</* tabs */>}}
{{</* tab */>}}محتوای دوم A{{</* /tab */>}} {{</* tab name="A" */>}}محتوای دوم A{{</* /tab */>}}
{{</* tab */>}}محتوای دوم B{{</* /tab */>}} {{</* tab name="B" */>}}محتوای دوم B{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```

60
docs/content/docs/guide/shortcodes/tabs.ja.md
View File

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

60
docs/content/docs/guide/shortcodes/tabs.zh-cn.md
View File

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

2
layouts/_partials/sidebar.html
View File

@@ -20,7 +20,7 @@
{{- end -}} {{- end -}}
{{- 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) -}} {{- if (site.Params.search.enable | default true) -}}
<!-- Search bar on small screen --> <!-- Search bar on small screen -->
<div class="hx:px-4 hx:pt-4 hx:md:hidden"> <div class="hx:px-4 hx:pt-4 hx:md:hidden">

2
layouts/_partials/toc.html
View File

@@ -78,7 +78,7 @@
{{- range $headings }} {{- range $headings }}
{{- if .Title }} {{- if .Title }}
<li class="hx:my-2 hx:scroll-my-6 hx:scroll-py-6"> <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 }} {{- .Title | safeHTML | plainify | htmlUnescape }}
</a> </a>
</li> </li>