跳转至

Tabbed Content 示例演示

本示例展示了 Material for MkDocs 的标签页（Tabbed Content）功能用法，方便你快速上手。

1. 多语言代码示例

1
2
3
def greet():
    print("Hello, Python!")
greet()

1
2
3
4
function greet() {
    console.log("Hello, JavaScript!");
}
greet();

1
echo "Hello, Bash!"

2. 多平台安装步骤

  1. 下载 setup.exe 安装包
  2. 双击运行安装程序
  3. 按提示完成安装
1
2
sudo apt update
sudo apt install myapp
  1. 打开 Terminal
  2. 运行命令安装：
    1
    brew install myapp

3. 配置文件对比

1
2
3
debug: true
database_url: "localhost:5432/dev_db"
logging: verbose

1
2
3
debug: false
database_url: "db.prod.example.com:5432/prod_db"
logging: error

4. 功能版本对比

  • 访问基本功能
  • 限制10GB存储空间
  • 社区支持
  • 包含免费版所有功能
  • 无限存储空间
  • 专属客户支持
  • 高级分析工具

5. 图文混排示例

graph LR
    A[开始] --> B{判断}
    B -->|是| C[执行操作1]
    B -->|否| D[执行操作2]

Note

以上流程图展示了基本操作流程。根据判断结果执行不同的操作。

6. API 多版本对比

1
GET /api/v1/users

1
GET /api/v2/accounts

7. 嵌套标签

标签内部可以嵌套标签，但嵌套层数建议最多 2 层，否则用户会迷路。 

1
GET /api/v1/users

1
POST /api/v1/users

1
GET /api/v2/users

使用提示 (避坑指南)

  • 不要在标签标题内使用换行（会渲染错误）
  • 不要混用 Tab 和空格缩进（Material 会识别失败）
  • 避免放太多标签（建议 ≤ 5 个，否则用户切换困难）
  • 不要让每个标签内容差异过大（影响用户的理解和切换体验）
  • 标签页内内容必须 缩进 4 个空格，否则不会正确渲染；
  • 请确保 mkdocs.yml 中启用了 pymdownx.tabbed 扩展；
  • 标签标题建议简短，方便显示和阅读。

写作愉快！