ec007d73c0
* docs(blog): prepare for v0.10 release post * Update v0.10.md * Update v0.10.md to refine upgrade instructions and enhance blog features. Added synchronized tab switching and pagination controls, while improving the search experience and table of contents navigation. * Enhance v0.10 release documentation with detailed upgrade instructions and migration guide. Added Tailwind theme variable customization section and clarified breaking changes. Improved clarity on CSS class prefix changes for better user experience. * Update v0.10.md to enhance upgrade instructions, clarify breaking changes, and improve overall readability. Adjusted formatting for consistency and added details on asset management and user experience improvements. * Add notable new features to v0.10.md, including dropdown menu support, enhanced search experience, and blog list pagination. Updated FlexSearch upgrade details for clarity and improved migration guide by removing redundant breaking change notes. * chore: update zh-cn translation * chore: update ja translation * chore: update fa and ja translations * chore: prepare release
3.1 KiB
title, next
| title | next |
|---|---|
| 标签页 | /docs/guide/deploy-site |
示例
{{< tabs items="macOS,Linux,Windows" >}}
{{< tab >}}macOS: 苹果公司开发的桌面操作系统。{{< /tab >}} {{< tab >}}Linux: 一款开源操作系统。{{< /tab >}} {{< tab >}}Windows: 微软公司开发的桌面操作系统。{{< /tab >}}
{{< /tabs >}}
使用方法
默认
{{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{</* /tab */>}}
{{</* /tabs */>}}
指定默认选中项
使用 defaultIndex 属性指定默认选中的标签页，索引从0开始。
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
{{</* tab */>}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{</* /tab */>}}
{{</* /tabs */>}}
默认会选中 YAML 标签页。
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
{{< tab >}}JSON: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{< /tab >}} {{< tab >}}YAML: YAML是一种人类可读的数据序列化语言。{{< /tab >}} {{< tab >}}TOML: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{< /tab >}}
{{< /tabs >}}
使用Markdown
支持包括代码块在内的Markdown语法：
{{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}
```json
{ "hello": "world" }
```
{{</* /tab */>}}
... 其他标签页类似添加
{{</* /tabs */>}}
{{< tabs items="JSON,YAML,TOML" >}}
{{< tab >}}
{ "hello": "world" }
{{< /tab >}}
{{< tab >}}
hello: world
{{< /tab >}}
{{< tab >}}
hello = "world"
{{< /tab >}}
{{< /tabs >}}
同步标签页
具有相同 items 列表的标签页可以同步。启用后，选择一个标签页会更新所有具有相同 items 的其他标签页，并在页面间记住选择。
在 hugo.yaml 的 page 部分全局启用：
params:
page:
tabs:
sync: true
启用后，以下两个标签页块将始终显示相同的选中项：
{{</* tabs items="A,B" */>}}
{{</* tab */>}}A内容{{</* /tab */>}}
{{</* tab */>}}B内容{{</* /tab */>}}
{{</* /tabs */>}}
{{</* tabs items="A,B" */>}}
{{</* tab */>}}第二个A内容{{</* /tab */>}}
{{</* tab */>}}第二个B内容{{</* /tab */>}}
{{</* /tabs */>}}