---
title: Tabs
slug: docs/cn/KkFxk7rlUu1j7t8YwfJCz
description: 了解如何在 Archbee 中有效使用“Tabs”块，通过可自定义、可点击的选项卡来组织内容、提升可读性并改进导航。
createdAt: 2024-07-24T11:17:19.316Z
---

![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-qlzuX6ak9nYvTvfqGAc1q-20240822-125616.png)

Tabs 是一个块，允许您在单个文档中将内容组织成多个部分。它就像一组选项卡，您可以点击它们以显示不同的信息。把它想象成一种在一页中创建多页内容的方式。

## 为什么要使用它

- **组织复杂内容**
- 将相关内容分组到不同的选项卡中，以获得更好的结构和可读性。
- **提高可读性**
- 使您的内容更易于导航和理解。
- **节省空间**
- 通过按顺序显示内容而不是一次性全部显示，从而高效利用空间。
- **创建交互式体验**
  通过允许用户主动选择他们想查看的信息来提高互动性。

## 如何使用 Tabs 块

::::::WorkflowBlock
:::WorkflowBlockItem
输入 `/` 以打开 Archbee 区块菜单
:::

:::WorkflowBlockItem
搜索 **标签页** 区块并点击以插入

![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-eXhqk7Cgjios95U2j8it8-20240822-124946.png)
:::

:::WorkflowBlockItem
自定义选项卡和名称。

默认情况下，该区块会创建 2 个名为 "Tab Name" 和 "Second Tab Name" 的选项卡。

要重命名选项卡，您必须通过以下方式进入编辑标签模式：

- 双击选项卡标签
- 或点击 “Edit label” 图标（ :FontAwesome[]{icon="fa-solid fa-pen-to-square"} ）

点击保存（ :FontAwesome[]{icon="fa-solid fa-check"} ）以更新标签，或点击丢弃（ **↩** ）以撤销更改。
:::

:::::WorkflowBlockItem
您可随意添加您的内容。您可以使用 [WYSIWYG Menu](#) 来按您喜欢的方式设置内容样式，甚至插入其他块，例如：

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
基础块

- [标题](docId\:f9FqgDFaoa8-TtG9OpQEW) 
- [可展开标题](docId:37wrUKXmvYY2FFtpgOmO7) 
- [Lists](docId\:q0U1u0MTYYTdbKaKLsSxF) 
- [表格](docId\:FLhBydIHwZ5MUWuiM99wT) 
- [按钮](docId\:UI4jtExZ5_EtasD0MvhRo) 
- [Callout](docId\:eVjVC5JW2C7_ckmMT_L0H) 
- [水平分隔线](docId\:UzqpQrYa2i5WwhZI_9TBz) 
- [垂直拆分](docId\:pHDoGgPbedzuh9LmEbU8R) 
- [Minitaskers](docId\:HcrD-7ESaMyGkrN7WVkdK) 
- [链接网格](docId\:pB4aA3e4SwCh4SCX_8Ug4) 
- [Workflow](docId\:U5a-dqTfN_D3-TzYwi-gu) 
:::

:::LinkArrayItem
媒体块

- [文件](docId\:zj8K-O7gYKFd_BLkuVBuY) 
- [图像](docId\:Li_wQ4wX1zgWoBGFqfyNG) 
- [视频](docId\:AWprIdYplayS98fRvNJJA) 
- [Map](docId\:AfDq_95djub_zI0_49EI0) 
:::

:::LinkArrayItem
开发者区块

- [代码编辑器：多语言](docId\:u3YcqvVjw29KkZC1Y9NSw) 
- [Mermaid 图表](docId\:UfXtTrIshr1M7IAViCrWx) 
- [TeX 方程](docId\:wkf4Q_N8jZ1N0pajTIMHz) 
- [API 端点](docId\:KzEOORPlfhn9hUFiOyaB5) 
- [OpenAPI/Swagger](docId\:kdA1vxzmrKT_w7NbMP1_o)
- [变更日志](docId\:sT1b8GVxmOtIFzewa00vY) 
:::
::::

此外，我们的大多数集成都可以在选项卡块内使用。您可以添加来自其他工具的嵌入内容，如 Loom、Figma、Miro、Lucidcharts 等。

查看[嵌入块。](docId\:Yz49UnK6R7ORe1A2s9x8s)页面以获取更多信息。
:::::
::::::

## Markdown

以下是在文档中使用 markdown 代码创建选项卡的方法：

:::::WorkflowBlock
:::WorkflowBlockItem
首先使用 `:::tabs` 行。
:::

::::WorkflowBlockItem
每个选项卡内容放在 `:::tab` 和 `:::` 标记之间。

:::hint{type="warning"}
**🚨   注意！**

在父级 markdown 元素中应放置一个冒号 `:`，以表示其包含另一个 markdown 元素。
:::

在此情况下，`:::tabs` 将更改为 `::::tabs`。

使用花括号为每个选项卡设置标题，如 `{title="您的部分名称"}`。这是将显示在选项卡标题上的名称。
::::

:::WorkflowBlockItem
将您想放在此选项卡中的内容放在这些行之间。请参阅上面的允许在选项卡块内使用的区块。查看 [使用 Markdown 快捷方式](docId:5QfvRE_WOro_y1WBKKYLp) 页面以了解如何使用其他区块。
:::

:::WorkflowBlockItem
创建任意数量的选项卡并关闭您的选项卡块。请不要忘记为每个嵌套级别添加冒号。

下面是一个使用 markdown 的选项卡块示例。
:::
:::::

```markdown
## Tabs

:::::tabs
::::tab{title="Tab 1"}
Some content for Tab 1

:::hint{style="info"}
Pull requests are very welcome! Please see CONTRIBUTING.md for more information.
Tthis is really nice
:::

- [x] This is a checkbox list
- [x] This is a checkbox list
- [ ] This is done
- [ ] This is a checkbox list
::::

:::tab{title="Tab Photos"}
![](https://placehold.co/600x400)

We would love you to contributeaaa
:::
:::::
```

结果如下：

:::::Tabs
::::Tab{title="Tab 1"}
Some content for Tab 1

:::hint{type="info" attributes="{"style":"info"}"}
Pull requests are very welcome! Please see CONTRIBUTING.md for more information.
This is really nice
:::

- [x] This is a checkbox list
- [x] This is a checkbox list
- [ ] This is done
  - [ ] This is a checkbox list
::::

:::Tab{title="Tab Photos"}
::Image[]{src="https://placehold.co/600x400" size="50" isUploading="false" darkWidth="600" darkHeight="400" width="600" height="400" showCaption="false"}

We would love you to contributeaaa
:::
:::::

或者，使用这种 Markdown 风格来生成选项卡块。

```markdown
{% tabs %}
{% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %}
{% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %}
{% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %}
{% tab title="tab 2" %}some tab fasdfasdfasdfasdfads
{% endtab %}
{% endtabs %}
```

查看 [使用 Markdown 快捷方式](docId:5QfvRE_WOro_y1WBKKYLp) 页面以查看更多用于其他区块的 markdown 快捷方式。

## 示例

请参阅 [垂直分割页面，示例部分。](docId\:pHDoGgPbedzuh9LmEbU8R) 

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"}  ** 查找其他区块**

探索创建令人惊艳且功能完善的文档页面的新方式和区块。

[查看所有区块](docId\:B4IohMBgLgJ5t-HvaLMTF) 
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**  需要帮助？⬇️**

使用右下角的**蓝色** **聊天气泡**。

或从搜索框使用**AI 聊天**以快速获得答案。
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**   您的意见很重要**

请使用下面的反馈表，匿名提交。

或者在**Q\&A 区域**中提问，我们的团队或 AI 将为您提供解决方案。
:::
::::