选项卡切换功能使用指南

2026/9/13大约 8 分钟

选项卡切换功能使用指南

本指南详细介绍如何在 Demius 主题中使用选项卡（标签栏）切换功能。

📋 目录

功能特性
快速开始
基础用法
高级用法
使用示例
常见问题

✨ 功能特性

✅ 简单易用：通过 shortcode 快速创建选项卡
✅ 多选项卡：支持任意数量的选项卡
✅ 默认激活：可指定默认显示的选项卡
✅ 平滑切换：精美的切换动画效果
✅ 状态保持：刷新页面保持当前选项卡
✅ 响应式：完美适配各种屏幕
✅ 暗色模式：自动适配主题
✅ PJAX兼容：页面切换无缝工作

🚀 快速开始

1. 基础语法

{{}}

{{}}
这是选项卡1的内容
{{}}

{{}}
这是选项卡2的内容
{{}}

{{}}
这是选项卡3的内容
{{}}

{{}}

2. 查看效果

在文章中使用后，保存并访问文章页面即可看到选项卡效果。

📝 基础用法

Shortcode 参数

tabs (容器)

{{}}
  <!-- 选项卡内容 -->
{{}}

参数说明：

参数	必填	说明	默认值
id	⭕	选项卡容器唯一ID	自动生成
tabs	✅	选项卡标题列表（逗号分隔）	无
default	⭕	默认激活的选项卡索引	"1"

tab (单个选项卡)

{{}}
选项卡内容（支持 Markdown）
{{}}

参数说明：

参数	必填	说明
index	✅	选项卡索引（从1开始）

简单示例

{{}}

{{}}
```html
<div class="hello">
  <h1>Hello World</h1>
</div>

.hello {
  color: blue;
  font-size: 20px;
}

console.log('Hello World');


**效果：** 三个选项卡，分别显示 HTML、CSS、JavaScript 代码

---

## 🎯 高级用法

### 1. 指定默认选项卡

```markdown
{{}}

{{}}
这是简介内容
{{}}

{{}}
这是安装步骤（默认显示）
{{}}

{{}}
这是配置说明
{{}}

{{}}

说明： default="2" 表示默认显示第2个选项卡

2. 多组选项卡

<!-- 第一组 -->
{{}}
{{}}
前端技术：HTML, CSS, JavaScript
{{}}
{{}}
后端技术：Node.js, Python, Go
{{}}
{{}}

<!-- 第二组 -->
{{}}
{{}}
开发环境配置...
{{}}
{{}}
测试流程说明...
{{}}
{{}}
部署步骤详解...
{{}}
{{}}

注意： 每组选项卡必须有唯一的 id

3. 富文本内容

选项卡内容支持完整的 Markdown 语法：

{{}}

{{}}
## 标题

这是**粗体**文字，这是*斜体*文字。

> 这是引用内容
{{}}

{{}}
### 无序列表
- 项目一
- 项目二
- 项目三

### 有序列表
1. 第一步
2. 第二步
3. 第三步
{{}}

{{}}
| 功能 | 状态 | 备注 |
|------|------|------|
| 登录 | ✅ | 已完成 |
| 注册 | ⏳ | 进行中 |
| 支付 | ❌ | 未开始 |
{{}}

{{}}
![示例图片](https://example.com/image.jpg)

图片说明文字
{{}}

{{}}

4. 嵌套代码块

{{}}

{{}}
```python
def hello():
    print("Hello World")
    
hello()

function hello() {
  console.log('Hello World');
}

hello();

package main

import "fmt"

func main() {
    fmt.Println("Hello World")
}


---

## 💡 使用示例

### 示例一：技术文档

```markdown
{{}}

{{}}
## 环境要求

- Node.js >= 14.0
- npm >= 6.0
- 操作系统：Windows / macOS / Linux
{{}}

{{}}
## 安装步骤

1. 克隆仓库
```bash
git clone https://github.com/example/repo.git

安装依赖

npm install

启动项目

npm start

配置说明

在 config.json 中配置：

{
  "port": 3000,
  "host": "localhost"
}

常见问题

Q: 安装失败怎么办？

A: 请检查网络连接，尝试使用淘宝镜像。

Q: 端口被占用？

A: 修改配置文件中的端口号。 {{</* /tab */>}}


---

### 示例二：产品对比

```markdown
{{}}

{{}}
### 基础版 - ¥99/月

**功能：**
- ✅ 基础功能
- ✅ 10个用户
- ✅ 10GB 存储
- ❌ 高级功能
- ❌ API接口
{{}}

{{}}
### 专业版 - ¥299/月

**功能：**
- ✅ 基础功能
- ✅ 50个用户
- ✅ 100GB 存储
- ✅ 高级功能
- ✅ API接口
{{}}

{{}}
### 企业版 - ¥999/月

**功能：**
- ✅ 所有功能
- ✅ 无限用户
- ✅ 1TB 存储
- ✅ 专属客服
- ✅ 定制开发
{{}}

{{}}

示例三：多语言代码

{{}}

{{}}
## 欢迎使用

这是一个示例项目，展示如何使用选项卡功能。

**特点：**
- 简单易用
- 功能强大
- 响应式设计
{{}}

{{}}
## Welcome

This is a demo project showing how to use tabs.

**Features:**
- Easy to use
- Powerful
- Responsive design
{{}}

{{}}
## ようこそ

これはタブ機能の使い方を示すデモプロジェクトです。

**特徴：**
- 使いやすい
- 強力
- レスポンシブデザイン
{{}}

{{}}

示例四：教程步骤

{{}}

{{}}
## 第一步：准备工作

1. 安装开发环境
2. 创建项目目录
3. 初始化项目

```bash
mkdir my-project
cd my-project
npm init -y

第二步：编写代码

创建 index.js 文件：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000);

第三步：测试运行

启动服务器：

node index.js

访问 http://localhost:3000 查看效果。 {{</* /tab */>}}

第四步：部署上线

购买服务器
上传代码
配置域名
启动服务

部署完成！🎉 {{</* /tab */>}}


---

## 🎨 样式特点

### 导航栏样式

- 选项卡按钮横向排列
- 激活状态：主题色下划线
- 悬停效果：背景色变化
- 响应式：自动换行或滚动

### 内容区样式

- 圆角边框
- 淡入动画
- 自动适配内容高度
- 支持所有 Markdown 元素

### 暗色模式

- 自动适配暗色主题
- 背景色、文字色反转
- 保持良好对比度

---

## 📱 响应式行为

### 桌面端 (> 768px)

- 选项卡按钮等宽分布
- 内容区充足内边距
- 完整动画效果

### 平板端 (481-768px)

- 选项卡按钮略小
- 内边距适当减少
- 保持核心功能

### 移动端 (< 480px)

- 选项卡可横向滚动
- 更紧凑的布局
- 简化动画效果

---

## 🔍 常见问题

### Q1: 选项卡不显示？

**检查：**
1. ✅ shortcode 语法正确
2. ✅ `tabs` 参数已设置
3. ✅ 每个 `tab` 都有 `index`
4. ✅ 清除浏览器缓存

### Q2: 切换无效果？

**原因：** JavaScript 未加载

**解决：**
1. 检查浏览器控制台错误
2. 确认 `_tabs.js` 已导入
3. 强制刷新页面

### Q3: 样式错乱？

**检查：**
1. ✅ `_tabs.css` 已导入
2. ✅ 没有 CSS 冲突
3. ✅ 清除缓存

### Q4: 如何隐藏某个选项卡？

**说明：** 不支持隐藏，只能不创建

### Q5: 可以嵌套选项卡吗？

**不推荐：** 可能导致样式和功能冲突

### Q6: 选项卡太多怎么办？

**建议：**
- 限制在 5-8 个以内
- 或拆分为多组选项卡
- 使用更短的标题

### Q7: 如何自定义样式？

**方法：** 覆盖 CSS

```css
/* 自定义激活颜色 */
.tab-button.active {
  color: #ff0000;
}

/* 自定义背景 */
.tabs-container {
  background: #f0f0f0;
}

🎯 最佳实践

1. 选项卡命名

推荐：

✅ 简短明确
✅ 3-8个字
✅ 一目了然

不推荐：

❌ 过长标题
❌ 模糊描述
❌ 重复名称

2. 内容组织

相关内容分组
逻辑顺序排列
每个选项卡独立完整

3. 默认选项卡

最重要内容设为默认
或按逻辑顺序选第一个
避免设为最后一个

4. 数量控制

桌面端：3-8个
移动端：3-5个
超过8个考虑分组

5. 性能优化

避免过多选项卡
图片使用懒加载
代码块适当精简

📊 功能对比

功能	支持	说明
多选项卡	✅	无限制
默认激活	✅	可指定
Markdown	✅	完全支持
代码高亮	✅	自动识别
响应式	✅	完美适配
暗色模式	✅	自动适配
PJAX	✅	完美兼容
状态保持	✅	sessionStorage
嵌套选项卡	❌	不推荐
动态添加	❌	静态生成

🔄 更新日志

v1.0.0 (2025-10-24)

✨ 初始版本发布
✅ 基础选项卡功能
✅ 响应式设计
✅ 暗色模式支持
✅ PJAX 兼容
✅ 平滑切换动画

📝 许可证

本功能遵循 Demius 主题的许可证协议。

祝使用愉快！ 🎉