# tuanziya

**Repository Path**: Misaka273/tuanziya

## Basic Information

- **Project Name**: tuanziya
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-26
- **Last Updated**: 2026-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🍡 团子主题 (TuanZi Theme)

一个融合马卡龙色系软妹风和可爱漫画风的WordPress主题，为你的网站带来甜美可爱的视觉体验。

## ✨ 主题特色

### 🎨 马卡龙色系配色
- 粉彩渐变背景
- 柔和的色彩搭配
- 甜美的视觉风格

### 📺 B站集成
- 动态获取B站用户信息
- 实时显示视频列表
- 自动缓存数据（1小时）

### ✨ 动画效果
- 弹跳悬停效果
- 平滑过渡动画
- 滚动触发动画

### 📱 响应式设计
- 完美适配各种设备
- 移动端优先设计
- 流畅的交互体验

## 🚀 安装方法

### 1. 下载主题
将整个 `tuanzi` 文件夹上传到 WordPress 的 `wp-content/themes/` 目录。

### 2. 激活主题
在 WordPress 后台的「外观」→「主题」中找到「团子主题」并激活。

### 3. 配置B站信息
在 `functions.php` 文件中修改 B站用户ID：
```php
define('TUANZI_BILIBILI_MID', '你的B站用户ID');
```

### 4. 生成主题截图
访问 `yourdomain.com/wp-content/themes/tuanzi/generate-screenshot.php` 生成主题截图。

## 📁 文件结构

```
tuanzi/
├── style.css                    # 主题样式表
├── functions.php                # 主题功能
├── index.php                    # 首页模板
├── header.php                   # 页头模板
├── footer.php                   # 页脚模板
├── single.php                   # 单篇文章模板
├── page.php                     # 单页面模板
├── archive.php                  # 归档页面模板
├── sidebar.php                  # 侧边栏模板
├── 404.php                      # 404页面模板
├── screenshot.svg               # 主题截图（SVG）
├── generate-screenshot.php      # 截图生成脚本
├── README.md                    # 主题说明文档
└── assets/
    ├── css/
    │   ├── main.css             # 主样式（已内联）
    │   ├── components.css       # 组件样式
    │   ├── animations.css       # 动画样式
    │   └── responsive.css       # 响应式样式
    └── js/
        ├── main.js              # 主脚本
        └── bilibili-api.js      # B站API交互
```

## 🎨 CSS变量

主题使用CSS变量系统，方便自定义：

```css
:root {
  /* 主色 */
  --tz-primary: #FF8FB8;          /* 樱花粉 */
  --tz-secondary: #87CEEB;        /* 浅蓝 */
  --tz-accent: #9B7CF5;           /* 薰衣草紫 */
  
  /* 背景 */
  --tz-background: #FFF8F0;       /* 奶油白 */
  
  /* 文字 */
  --tz-text: #2D2D2D;             /* 深灰 */
  --tz-stroke: #3A3A3A;           /* 描边 */
  
  /* 渐变 */
  --tz-gradient-primary: linear-gradient(135deg, #FF8FB8, #FFB8D4);
  --tz-gradient-secondary: linear-gradient(135deg, #87CEEB, #B8E6FF);
  --tz-gradient-accent: linear-gradient(135deg, #9B7CF5, #B8A5FF);
}
```

## 📺 B站API

主题使用以下B站API接口：

- **用户信息**: `https://api.bilibili.com/x/space/acc/info?mid={用户ID}`
- **视频列表**: `https://api.bilibili.com/x/space/wbi/arc/search?mid={用户ID}`
- **用户统计**: `https://api.bilibili.com/x/relation/stat?vmid={用户ID}`

## 🎨 组件样式

### 漫画按钮
```html
<button class="comic-btn comic-btn-primary">主要按钮</button>
<button class="comic-btn comic-btn-secondary">次要按钮</button>
<button class="comic-btn comic-btn-accent">强调按钮</button>
```

### 漫画卡片
```html
<div class="comic-card">
    <div class="card-content">卡片内容</div>
</div>
```

### 标签
```html
<span class="comic-tag comic-tag-primary">主要标签</span>
<span class="comic-tag comic-tag-success">成功标签</span>
```

## ✨ 动画效果

### 基础动画
```html
<div class="comic-fade-in-up">从下方淡入</div>
<div class="comic-fade-in-scale">缩放淡入</div>
<div class="comic-bounce-in">弹跳进入</div>
```

### 悬停效果
```html
<div class="hover-float">悬停上浮</div>
<div class="hover-scale">悬停放大</div>
<div class="hover-rotate">悬停旋转</div>
```

### 滚动动画
```html
<div class="scroll-fade-in">滚动淡入</div>
<div class="scroll-scale">滚动缩放</div>
```

## 📱 响应式断点

- **大屏幕**: 1024px+
- **中等屏幕**: 768px - 1023px
- **小屏幕**: 480px - 767px
- **超小屏幕**: 479px以下

## 🔧 自定义菜单

在WordPress后台的「外观」→「菜单」中创建菜单，并分配到「主导航菜单」位置。

## 🎨 小工具

主题支持以下小工具区域：
- **主侧边栏**: 显示在页面侧边
- **页脚侧边栏**: 显示在页脚区域

## 📝 作者信息

- **作者**: 白木
- **网站**: https://gl.baimu.live/
- **版本**: 1.0

## 📄 许可证

本主题采用 GPL v2 或更高版本许可证。

## 🐛 问题反馈

如果您在使用过程中遇到任何问题，请通过以下方式反馈：

1. 在GitHub上提交Issue
2. 通过B站私信联系
3. 发送邮件至作者邮箱

## 🎉 更新日志

### v1.0 (2026-06-26)
- 🎨 初始版本发布
- 📺 B站API集成
- ✨ 动画效果系统
- 📱 响应式设计
- 🎨 马卡龙色系配色

---

**🍡 团子主题** - 让你的网站充满甜美可爱的气息！✨