dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 15:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(tabs): better usage

Browse Source
This commit is contained in:
ZhenShuo Leo
2025-12-01 20:48:12 +08:00
parent 20044af981
commit eda9fc9bc3
7 changed files with 173 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/shortcodes/tabs.js
+2 -2
View File
@@ -34,8 +34,8 @@ function activateTab(container, activeIndex) {
}); });
} }
if (document.readyState === 'loading') { if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', initTabs); document.addEventListener("DOMContentLoaded", initTabs);
} else { } else {
initTabs(); initTabs();
} }
exampleSite/content/docs/shortcodes/index.it.md
+8 -20
View File
@@ -721,10 +721,9 @@ The `tabs` shortcode is commonly used to present different variants of a particu
**Example** **Example**
`````md `````md
{{</* tabs labels="Windows;;macOS;;Linux" */>}} {{</* tabs */>}}
{{</* tab */>}}
{{</* tab label="Windows" */>}}
Install using Chocolatey: Install using Chocolatey:
```pwsh ```pwsh
@@ -736,21 +735,16 @@ or install using WinGet
```pwsh ```pwsh
winget install -e --id Microsoft.VisualStudioCode winget install -e --id Microsoft.VisualStudioCode
``` ```
{{</* /tab */>}} {{</* /tab */>}}
{{</* tab */>}} {{</* tab label="macOS" */>}}
```bash ```bash
brew install --cask visual-studio-code brew install --cask visual-studio-code
``` ```
{{</* /tab */>}} {{</* /tab */>}}
{{</* tab */>}} {{</* tab label="Linux" */>}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux). See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{</* /tab */>}} {{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
@@ -758,10 +752,9 @@ See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-c
**Output** **Output**
{{< tabs labels="Windows;;macOS;;Linux" >}} {{< tabs >}}
{{< tab >}}
{{< tab label="Windows" >}}
Install using Chocolatey: Install using Chocolatey:
```pwsh ```pwsh
@@ -773,21 +766,16 @@ or install using WinGet
```pwsh ```pwsh
winget install -e --id Microsoft.VisualStudioCode winget install -e --id Microsoft.VisualStudioCode
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab label="macOS" >}}
```bash ```bash
brew install --cask visual-studio-code brew install --cask visual-studio-code
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab label="Linux" >}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux). See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{< /tab >}} {{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
exampleSite/content/docs/shortcodes/index.ja.md
+9 -21
View File
@@ -718,10 +718,9 @@ B-->C[利益]
**例** **例**
````md ````md
{{</* tabs labels="Windows;;macOS;;Linux" */>}} {{</* tabs */>}}
{{</* tab */>}}
{{</* tab label="Windows" */>}}
Chocolatey を使用してインストール: Chocolatey を使用してインストール:
```pwsh ```pwsh
@@ -733,21 +732,16 @@ choco install vscode.install
```pwsh ```pwsh
winget install -e --id Microsoft.VisualStudioCode winget install -e --id Microsoft.VisualStudioCode
``` ```
{{</* /tab */>}} {{</* /tab */>}}
{{</* tab */>}} {{</* tab label="macOS" */>}}
```bash ```bash
brew install --cask visual-studio-code brew install --cask visual-studio-code
``` ```
{{</* /tab */>}} {{</* /tab */>}}
{{</* tab */>}} {{</* tab label="Linux" */>}}
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。 [ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
{{</* /tab */>}} {{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
@@ -755,10 +749,9 @@ brew install --cask visual-studio-code
**出力** **出力**
{{< tabs labels="Windows;;macOS;;Linux" >}} {{< tabs >}}
{{< tab >}}
{{< tab label="Windows" >}}
Chocolatey を使用してインストール: Chocolatey を使用してインストール:
```pwsh ```pwsh
@@ -770,21 +763,16 @@ choco install vscode.install
```pwsh ```pwsh
winget install -e --id Microsoft.VisualStudioCode winget install -e --id Microsoft.VisualStudioCode
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab label="macOS" >}}
```bash ```bash
brew install --cask visual-studio-code brew install --cask visual-studio-codeqweqwe
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab label="Linux" >}}
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。 [ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
{{< /tab >}} {{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
exampleSite/content/docs/shortcodes/index.md
+8 -20
View File
@@ -727,10 +727,9 @@ The `tabs` shortcode is commonly used to present different variants of a particu
**Example** **Example**
`````md `````md
{{</* tabs labels="Windows;;macOS;;Linux" */>}} {{</* tabs */>}}
{{</* tab */>}}
{{</* tab label="Windows" */>}}
Install using Chocolatey: Install using Chocolatey:
```pwsh ```pwsh
@@ -742,21 +741,16 @@ or install using WinGet
```pwsh ```pwsh
winget install -e --id Microsoft.VisualStudioCode winget install -e --id Microsoft.VisualStudioCode
``` ```
{{</* /tab */>}} {{</* /tab */>}}
{{</* tab */>}} {{</* tab label="macOS" */>}}
```bash ```bash
brew install --cask visual-studio-code brew install --cask visual-studio-code
``` ```
{{</* /tab */>}} {{</* /tab */>}}
{{</* tab */>}} {{</* tab label="Linux" */>}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux). See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{</* /tab */>}} {{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
@@ -764,10 +758,9 @@ See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-c
**Output** **Output**
{{< tabs labels="Windows;;macOS;;Linux" >}} {{< tabs >}}
{{< tab >}}
{{< tab label="Windows" >}}
Install using Chocolatey: Install using Chocolatey:
```pwsh ```pwsh
@@ -779,21 +772,16 @@ or install using WinGet
```pwsh ```pwsh
winget install -e --id Microsoft.VisualStudioCode winget install -e --id Microsoft.VisualStudioCode
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab label="macOS" >}}
```bash ```bash
brew install --cask visual-studio-code brew install --cask visual-studio-code
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab label="Linux" >}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux). See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{< /tab >}} {{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
exampleSite/content/docs/shortcodes/index.zh-cn.md
+8 -20
View File
@@ -731,10 +731,9 @@ B-->C[Profit]
**示例** **示例**
````md ````md
{{</* tabs labels="Windows;;macOS;;Linux" */>}} {{</* tabs */>}}
{{</* tab */>}}
{{</* tab label="Windows" */>}}
使用 Chocolatey 安装: 使用 Chocolatey 安装:
```pwsh ```pwsh
@@ -746,21 +745,16 @@ choco install vscode.install
```pwsh ```pwsh
winget install -e --id Microsoft.VisualStudioCode winget install -e --id Microsoft.VisualStudioCode
``` ```
{{</* /tab */>}} {{</* /tab */>}}
{{</* tab */>}} {{</* tab label="macOS" */>}}
```bash ```bash
brew install --cask visual-studio-code brew install --cask visual-studio-code
``` ```
{{</* /tab */>}} {{</* /tab */>}}
{{</* tab */>}} {{</* tab label="Linux" */>}}
参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。 参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
{{</* /tab */>}} {{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
@@ -768,10 +762,9 @@ brew install --cask visual-studio-code
**输出** **输出**
{{< tabs labels="Windows;;macOS;;Linux" >}} {{< tabs >}}
{{< tab >}}
{{< tab label="Windows" >}}
使用 Chocolatey 安装: 使用 Chocolatey 安装:
```pwsh ```pwsh
@@ -783,21 +776,16 @@ choco install vscode.install
```pwsh ```pwsh
winget install -e --id Microsoft.VisualStudioCode winget install -e --id Microsoft.VisualStudioCode
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab label="macOS" >}}
```bash ```bash
brew install --cask visual-studio-code brew install --cask visual-studio-code
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab label="Linux" >}}
参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。 参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
{{< /tab >}} {{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
layouts/shortcodes/tab.html
+7 -5
View File
@@ -1,5 +1,7 @@
{{- $index := .Parent.Scratch.Get "tab-index" | default 0 -}} {{- $label := .Get "label" -}}
{{- .Parent.Scratch.Set "tab-index" (add 1 $index) -}} {{- $index := .Parent.Store.Get "tab-index" | default 0 -}}
<div class="tab__panel {{ if eq $index 0 }}tab--active{{ end }}" data-tab-index="{{ $index }}"> {{- $content := .InnerDeindent | strings.TrimSpace | .Page.RenderString -}}
{{ .InnerDeindent | strings.TrimSpace | .Page.RenderString }}
</div> {{- $tabs := .Parent.Store.Get "tabs" | default slice -}}
{{- .Parent.Store.Set "tabs" ($tabs | append (dict "label" $label "content" $content)) -}}
{{- .Parent.Store.Set "tab-index" (add 1 $index) -}}
layouts/shortcodes/tabs.html
+12 -7
View File
@@ -1,23 +1,28 @@
{{- $labels := split (.Get "labels") ";;" -}} {{- .Store.Set "tab-index" 0 -}}
{{- $noop := .Inner -}}
<div class="tab__container w-full"> <div class="tab__container w-full">
<div class="tab__nav" role="tablist"> <div class="tab__nav" role="tablist">
<div class="flex gap-1 overflow-x-auto"> <div class="flex gap-1 overflow-x-auto">
{{- range $index, $label := $labels -}} {{- range $nTabs, $_ := .Store.Get "tabs" -}}
<button <button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 {{ if eq $index 0 }} class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 {{ if eq $nTabs 0 }}
tab--active tab--active
{{ end }}" {{ end }}"
role="tab" role="tab"
aria-selected="{{ cond (eq $index 0) "true" "false" }}" aria-selected="{{ cond (eq $nTabs 0) "true" "false" }}"
data-tab-index="{{ $index }}"> data-tab-index="{{ $nTabs }}">
{{ trim $label " " }} {{ index . "label" }}
</button> </button>
{{- end -}} {{- end -}}
</div> </div>
</div> </div>
<div class="tab__content mt-4"> <div class="tab__content mt-4">
{{ .Inner }} {{- range $nTabs, $_ := .Store.Get "tabs" -}}
<div class="tab__panel {{ if eq $nTabs 0 }}tab--active{{ end }}" data-tab-index="{{ $nTabs }}">
{{ index . "content" }}
</div>
{{- end -}}
</div> </div>
</div> </div>