选项卡功能使用示例

本文演示 Demius 主题的选项卡切换功能，展示各种使用场景。

基础示例

最简单的选项卡用法：

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  background: #f0f0f0;
  padding: 20px;
}

h1 {
  color: #333;
  text-align: center;
}

document.addEventListener('DOMContentLoaded', function() {
  console.log('页面加载完成！');
  
  const h1 = document.querySelector('h1');
  h1.addEventListener('click', function() {
    alert('你点击了标题！');
  });
});

技术文档示例

使用选项卡组织项目文档：

项目简介

这是一个演示项目，用于展示选项卡功能的使用。

主要特性：

✅ 简单易用
✅ 功能强大
✅ 响应式设计
✅ 完全可定制

适用场景：

技术文档
产品介绍
教程步骤
代码对比

安装步骤

1. 克隆仓库

git clone https://github.com/example/repo.git
cd repo

2. 安装依赖

npm install

3. 启动项目

npm start

项目将在 http://localhost:3000 启动。

配置说明

在 config.json 中进行配置：

{
  "port": 3000,
  "host": "localhost",
  "database": {
    "host": "localhost",
    "port": 3306,
    "name": "mydb"
  },
  "features": {
    "cache": true,
    "debug": false
  }
}

配置项说明：

配置项	类型	说明
port	number	服务端口
host	string	服务地址
database	object	数据库配置
features	object	功能开关

使用方法

基础用法

const app = require('./app');

// 启动应用
app.start();

高级用法

const app = require('./app');

// 自定义配置
app.configure({
  port: 8080,
  cache: true
});

// 注册中间件
app.use(middleware);

// 启动应用
app.start();

API 调用

// GET 请求
const data = await app.get('/api/users');

// POST 请求
const result = await app.post('/api/users', {
  name: '张三',
  age: 25
});

多语言示例

使用选项卡展示多语言内容：

欢迎使用

这是一个功能强大的主题，提供了丰富的组件和功能。

核心功能：

轮播图
系列文章
视频嵌入
选项卡切换
打赏按钮

技术特点：

Hugo 静态生成
PJAX 无刷新切换
响应式设计
暗色模式支持

Welcome

This is a powerful theme with rich components and features.

Core Features:

Carousel
Series Posts
Video Embed
Tabs Toggle
Reward Button

Technical Features:

Hugo Static Generation
PJAX Page Transition
Responsive Design
Dark Mode Support

ようこそ

これは豊富なコンポーネントと機能を備えた強力なテーマです。

コア機能：

カルーセル
シリーズ記事
ビデオ埋め込み
タブ切り替え
チップボタン

技術的特徴：

Hugo静的生成
PJAXページ遷移
レスポンシブデザイン
ダークモードサポート

환영합니다

풍부한 구성 요소와 기능을 갖춘 강력한 테마입니다.

핵심 기능:

캐러셀
시리즈 게시물
비디오 임베드
탭 전환
보상 버튼

기술적 특징:

Hugo 정적 생성
PJAX 페이지 전환
반응형 디자인
다크 모드 지원

产品对比示例

使用选项卡对比不同产品版本：

免费版 - ¥0

包含功能：

✅ 基础功能
✅ 5个用户
✅ 1GB 存储空间
✅ 邮件支持
❌ 高级功能
❌ API 接口
❌ 优先支持

适合：

个人用户
小型项目
功能测试

专业版 - ¥299/月

包含功能：

✅ 所有基础功能
✅ 50个用户
✅ 50GB 存储空间
✅ 邮件 + 电话支持
✅ 所有高级功能
✅ REST API 接口
✅ 优先技术支持

适合：

中小企业
团队协作
商业项目

企业版 - ¥999/月

包含功能：

✅ 所有专业版功能
✅ 无限用户
✅ 500GB 存储空间
✅ 7×24 专属客服
✅ GraphQL API
✅ 定制开发
✅ SLA 保障
✅ 数据迁移服务

适合：

大型企业
关键业务
高可用需求

教程步骤示例

使用选项卡展示分步教程：

第一步：环境准备

安装 Node.js

访问 Node.js 官网下载最新版本。

验证安装

node --version
npm --version

安装 Hugo

# macOS
brew install hugo

# Windows
choco install hugo-extended

# Linux
snap install hugo

创建项目目录

mkdir my-blog
cd my-blog

准备工作完成！✅

第二步：创建站点

初始化 Hugo 站点

hugo new site .

下载主题

git clone https://github.com/demius782/demius themes/demius

配置主题

在 hugo.toml 中设置：

theme = "demius"

创建第一篇文章

hugo new posts/my-first-post.md

站点创建完成！✅

第三步：配置站点

编辑配置文件

打开 hugo.toml，添加：

baseURL = 'http://localhost:1313'
title = '我的博客'
languageCode = 'zh-CN'

[params]
  author = "你的名字"
  description = "博客描述"

配置菜单

[[menu.main]]
  name = "首页"
  url = "/"
  weight = 1
  
[[menu.main]]
  name = "归档"
  url = "/posts/"
  weight = 2

配置完成！✅

第四步：预览和部署

本地预览

hugo server

访问 http://localhost:1313 查看效果。

构建站点

hugo

生成的文件在 public/ 目录。

部署到服务器

# 使用 rsync
rsync -avz --delete public/ user@server:/var/www/html/

# 或使用 GitHub Pages
git add .
git commit -m "Deploy"
git push origin main

部署完成！🎉

总结

选项卡功能非常适合：

✅ 代码对比展示
✅ 多语言内容
✅ 分步教程
✅ 产品对比
✅ 技术文档

详细使用方法请查看：选项卡功能使用指南