dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01: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

4
assets/js/shortcodes/tabs.js
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();
} }

88
exampleSite/content/docs/shortcodes/index.it.md
View File

@@ -721,74 +721,62 @@ 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
choco install vscode.install
```
```pwsh or install using WinGet
choco install vscode.install
```
or install using WinGet ```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{</* /tab */>}}
```pwsh {{</* tab label="macOS" */>}}
winget install -e --id Microsoft.VisualStudioCode ```bash
``` brew install --cask visual-studio-code
```
{{</* /tab */>}}
{{</* /tab */>}} {{</* tab label="Linux" */>}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{</* tab */>}} {{</* /tab */>}}
```bash
brew install --cask visual-studio-code
```
{{</* /tab */>}}
{{</* tab */>}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
````` `````
**Output** **Output**
{{< tabs labels="Windows;;macOS;;Linux" >}} {{< tabs >}}
{{< tab >}} {{< tab label="Windows" >}}
Install using Chocolatey:
Install using Chocolatey: ```pwsh
choco install vscode.install
```
```pwsh or install using WinGet
choco install vscode.install
```
or install using WinGet ```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{< /tab >}}
```pwsh {{< tab label="macOS" >}}
winget install -e --id Microsoft.VisualStudioCode ```bash
``` brew install --cask visual-studio-code
```
{{< /tab >}}
{{< /tab >}} {{< tab label="Linux" >}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{< tab >}} {{< /tab >}}
```bash
brew install --cask visual-studio-code
```
{{< /tab >}}
{{< tab >}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}

88
exampleSite/content/docs/shortcodes/index.ja.md
View File

@@ -718,74 +718,62 @@ B-->C[利益]
**例** **例**
````md ````md
{{</* tabs labels="Windows;;macOS;;Linux" */>}} {{</* tabs */>}}
{{</* tab */>}} {{</* tab label="Windows" */>}}
Chocolatey を使用してインストール:
Chocolatey を使用してインストール: ```pwsh
choco install vscode.install
```
```pwsh または WinGet を使用してインストール
choco install vscode.install
```
または WinGet を使用してインストール ```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{</* /tab */>}}
```pwsh {{</* tab label="macOS" */>}}
winget install -e --id Microsoft.VisualStudioCode ```bash
``` brew install --cask visual-studio-code
```
{{</* /tab */>}}
{{</* /tab */>}} {{</* tab label="Linux" */>}}
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
{{</* tab */>}} {{</* /tab */>}}
```bash
brew install --cask visual-studio-code
```
{{</* /tab */>}}
{{</* tab */>}}
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
```` ````
**出力** **出力**
{{< tabs labels="Windows;;macOS;;Linux" >}} {{< tabs >}}
{{< tab >}} {{< tab label="Windows" >}}
Chocolatey を使用してインストール:
Chocolatey を使用してインストール: ```pwsh
choco install vscode.install
```
```pwsh または WinGet を使用してインストール
choco install vscode.install
```
または WinGet を使用してインストール ```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{< /tab >}}
```pwsh {{< tab label="macOS" >}}
winget install -e --id Microsoft.VisualStudioCode ```bash
``` brew install --cask visual-studio-codeqweqwe
```
{{< /tab >}}
{{< /tab >}} {{< tab label="Linux" >}}
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
{{< tab >}} {{< /tab >}}
```bash
brew install --cask visual-studio-code
```
{{< /tab >}}
{{< tab >}}
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}

88
exampleSite/content/docs/shortcodes/index.md
View File

@@ -727,74 +727,62 @@ 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
choco install vscode.install
```
```pwsh or install using WinGet
choco install vscode.install
```
or install using WinGet ```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{</* /tab */>}}
```pwsh {{</* tab label="macOS" */>}}
winget install -e --id Microsoft.VisualStudioCode ```bash
``` brew install --cask visual-studio-code
```
{{</* /tab */>}}
{{</* /tab */>}} {{</* tab label="Linux" */>}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{</* tab */>}} {{</* /tab */>}}
```bash
brew install --cask visual-studio-code
```
{{</* /tab */>}}
{{</* tab */>}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
````` `````
**Output** **Output**
{{< tabs labels="Windows;;macOS;;Linux" >}} {{< tabs >}}
{{< tab >}} {{< tab label="Windows" >}}
Install using Chocolatey:
Install using Chocolatey: ```pwsh
choco install vscode.install
```
```pwsh or install using WinGet
choco install vscode.install
```
or install using WinGet ```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{< /tab >}}
```pwsh {{< tab label="macOS" >}}
winget install -e --id Microsoft.VisualStudioCode ```bash
``` brew install --cask visual-studio-code
```
{{< /tab >}}
{{< /tab >}} {{< tab label="Linux" >}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{< tab >}} {{< /tab >}}
```bash
brew install --cask visual-studio-code
```
{{< /tab >}}
{{< tab >}}
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}

88
exampleSite/content/docs/shortcodes/index.zh-cn.md
View File

@@ -731,74 +731,62 @@ B-->C[Profit]
**示例** **示例**
````md ````md
{{</* tabs labels="Windows;;macOS;;Linux" */>}} {{</* tabs */>}}
{{</* tab */>}} {{</* tab label="Windows" */>}}
使用 Chocolatey 安装:
使用 Chocolatey 安装: ```pwsh
choco install vscode.install
```
```pwsh 或使用 WinGet 安装
choco install vscode.install
```
或使用 WinGet 安装 ```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{</* /tab */>}}
```pwsh {{</* tab label="macOS" */>}}
winget install -e --id Microsoft.VisualStudioCode ```bash
``` brew install --cask visual-studio-code
```
{{</* /tab */>}}
{{</* /tab */>}} {{</* tab label="Linux" */>}}
参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
{{</* tab */>}} {{</* /tab */>}}
```bash
brew install --cask visual-studio-code
```
{{</* /tab */>}}
{{</* tab */>}}
参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
```` ````
**输出** **输出**
{{< tabs labels="Windows;;macOS;;Linux" >}} {{< tabs >}}
{{< tab >}} {{< tab label="Windows" >}}
使用 Chocolatey 安装:
使用 Chocolatey 安装: ```pwsh
choco install vscode.install
```
```pwsh 或使用 WinGet 安装
choco install vscode.install
```
或使用 WinGet 安装 ```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{< /tab >}}
```pwsh {{< tab label="macOS" >}}
winget install -e --id Microsoft.VisualStudioCode ```bash
``` brew install --cask visual-studio-code
```
{{< /tab >}}
{{< /tab >}} {{< tab label="Linux" >}}
参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
{{< tab >}} {{< /tab >}}
```bash
brew install --cask visual-studio-code
```
{{< /tab >}}
{{< tab >}}
参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}

12
layouts/shortcodes/tab.html
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) -}}

19
layouts/shortcodes/tabs.html
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>