7b27743159
* Sync tabs across groups * feat(tabs): add optional synchronization * Move tabs sync setting under page params * fix: spacing between title and site title (#704) * docs: document configure opengraph image (#706) * [Docs] document using og:image * Make example title page match others * clarify wording * chore: update tailwind css to latest version 4.1.8 (#703) * fix: wrong SRI hash for katex.css (#702) * Correct URL given in 'dev.toml' * stylesheet 'katex.css': fix SRI hash * fix(build): run npm update to fix postcss complaint * feat(tags): improve usability of tags (#698) * feat(tags): improve usability of tags * Tags can be shown also at docs * Documented tag-related config flags * Added example tags to the site * Made rendered tags active * Move tags listing to ToC * Hide tags section on no tags * feat(math): add optional MathJax support (#707) * feat: add MathJax option * docs: move math engine note * refactor: update LaTeX documentation and improve MathJax integration - Adjusted LaTeX documentation for clarity and formatting. - Enhanced MathJax configuration in the templates to support both KaTeX and MathJax rendering. - Removed deprecated comments and streamlined the script loading process for MathJax. - Updated the passthrough extension settings in the Hugo configuration for better compatibility with LaTeX math expressions. * docs: simplify LaTeX documentation and clarify configuration steps - Updated LaTeX documentation to reflect that KaTeX is enabled by default, removing the need for manual activation. - Added examples for using LaTeX math expressions and clarified the configuration for the passthrough extension in Hugo. - Enhanced MathJax section to emphasize its use as an alternative rendering engine. * fix(tabs): add null check for panels container and update example items * fix(tabs): improve tab group key handling and add validation for items parameter * refactor(tabs): comment out sync option in configuration and adjust tab formatting in documentation --------- Co-authored-by: hobobandy <30026704+hobobandy@users.noreply.github.com> Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com> Co-authored-by: Andreas Deininger <adeininger@urbanonline.de> Co-authored-by: yuri <1969yuri1969@gmail.com>
3.1 KiB
title, next
| title | next |
|---|---|
| Tabs | /docs/guide/deploy-site |
Example
{{< tabs items="macOS,Linux,Windows" >}}
{{< tab >}}macOS: A desktop operating system by Apple.{{< /tab >}} {{< tab >}}Linux: An open-source operating system.{{< /tab >}} {{< tab >}}Windows: A desktop operating system by Microsoft.{{< /tab >}}
{{< /tabs >}}
Usage
Default
{{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
{{</* /tabs */>}}
Specify Selected Index
Use defaultIndex property to specify the selected tab. The index starts from 0.
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
{{</* /tabs */>}}
The YAML tab will be selected by default.
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
{{< tab >}}JSON: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}} {{< tab >}}YAML: YAML is a human-readable data serialization language.{{< /tab >}} {{< tab >}}TOML: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
{{< /tabs >}}
Use Markdown
Markdown syntax including code block is also supported:
{{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}
```json
{ "hello": "world" }
```
{{</* /tab */>}}
... add other tabs similarly
{{</* /tabs */>}}
{{< tabs items="JSON,YAML,TOML" >}}
{{< tab >}}
{ "hello": "world" }
{{< /tab >}}
{{< tab >}}
hello: world
{{< /tab >}}
{{< tab >}}
hello = "world"
{{< /tab >}}
{{< /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 under the page section:
params:
page:
tabs:
sync: true
With this enabled the following two tab blocks will always display the same selected item:
{{</* tabs items="A,B" */>}}
{{</* tab */>}}A content{{</* /tab */>}}
{{</* tab */>}}B content{{</* /tab */>}}
{{</* /tabs */>}}
{{</* tabs items="A,B" */>}}
{{</* tab */>}}Second A content{{</* /tab */>}}
{{</* tab */>}}Second B content{{</* /tab */>}}
{{</* /tabs */>}}