From cf4d334da3bb103145c62e23c1682abdfdaf9d45 Mon Sep 17 00:00:00 2001 From: Xin <5097752+imfing@users.noreply.github.com> Date: Sun, 8 Jun 2025 11:51:20 +0100 Subject: [PATCH] feat(tabs): add optional synchronization --- .../content/docs/guide/shortcodes/tabs.md | 35 +++++++++++++++++++ exampleSite/hugo.yaml | 3 ++ layouts/_shortcodes/tabs.html | 7 +++- 3 files changed, 44 insertions(+), 1 deletion(-) diff --git a/exampleSite/content/docs/guide/shortcodes/tabs.md b/exampleSite/content/docs/guide/shortcodes/tabs.md index c63547a..df0d493 100644 --- a/exampleSite/content/docs/guide/shortcodes/tabs.md +++ b/exampleSite/content/docs/guide/shortcodes/tabs.md @@ -13,6 +13,41 @@ next: /docs/guide/deploy-site {{< /tabs >}} +### Sync Tabs + +Tabs with the same list of `items` can be synchronized. When enabled, selecting a tab updates all other tabs with the same `items` and remembers the selection across pages. + +Enable globally in your `hugo.yaml`: + +```yaml {filename="hugo.yaml"} +params: + tabs: + sync: true +``` + +Or enable it for a single page in the front matter: + +```yaml {filename="content/docs/my-page.md"} +--- +title: My Page +tabsSync: true +--- +``` + +With this enabled the following two tab blocks will always display the same selected item: + +```markdown +{{}} + {{}}A content{{}} + {{}}B content{{}} +{{}} + +{{}} + {{}}Second A content{{}} + {{}}Second B content{{}} +{{}} +``` + ## Usage ### Default diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml index 1ccc87a..f0e43cf 100644 --- a/exampleSite/hugo.yaml +++ b/exampleSite/hugo.yaml @@ -184,6 +184,9 @@ params: # hover | always display: hover + tabs: + sync: true + comments: enable: false type: giscus diff --git a/layouts/_shortcodes/tabs.html b/layouts/_shortcodes/tabs.html index eb75b23..e0dfb6b 100644 --- a/layouts/_shortcodes/tabs.html +++ b/layouts/_shortcodes/tabs.html @@ -1,12 +1,17 @@ {{- $items := split (.Get "items") "," -}} {{- $defaultIndex := int ((.Get "defaultIndex") | default "0") -}} +{{- $enableSync := site.Params.tabs.sync | default false -}} +{{- with .Page.Params.tabsSync }} + {{- $enableSync = . -}} +{{- end -}} + {{- if not $items -}} {{ errorf "no items provided" }} {{- end -}}
-
+
{{- range $i, $item := $items -}}