# TechBlog Pro - WordPress Theme

一个专为IT技术分享设计的现代化WordPress主题，具有清爽的界面、强大的代码高亮支持和优秀的阅读体验。

![TechBlog Pro](screenshot.png)

## ✨ 特性

### 🎨 设计特色
- **现代化UI** - 清爽简洁的设计风格
- **暗色模式** - 一键切换深色/浅色主题
- **响应式布局** - 完美适配各种设备
- **流畅动画** - 细腻的过渡效果

### 📝 博客功能
- **代码高亮** - 专门优化的代码块样式
- **一键复制** - 代码块支持快速复制
- **阅读时间** - 自动计算文章阅读时间
- **阅读进度** - 顶部进度条显示
- **文章目录** - 自动生成TOC目录导航
- **阅读统计** - 记录文章浏览次数

### 🔧 技术特性
- **SEO友好** - 语义化HTML结构
- **性能优化** - 图片懒加载、平滑滚动
- **键盘快捷键** - Ctrl+K 搜索、ESC 关闭
- **AJAX搜索** - 实时搜索建议
- **自定义小工具** - 分类、标签、最新文章

## 📦 安装

### 方法一：后台上传
1. 下载主题zip文件
2. 进入 WordPress 后台 → 外观 → 主题
3. 点击「添加」→「上传主题」
4. 选择下载的zip文件并安装
5. 激活主题

### 方法二：FTP上传
1. 解压主题文件
2. 通过FTP上传到 `/wp-content/themes/techblog-wp-theme/`
3. 进入 WordPress 后台 → 外观 → 主题
4. 激活 TechBlog Pro 主题

## ⚙️ 配置

### 菜单设置
进入 **外观 → 菜单**：
- 创建一个新菜单
- 选择「主导航菜单」位置
- 添加分类/页面/自定义链接

### 小工具设置
进入 **外观 → 小工具**：
- **主侧边栏** - 文章页面右侧显示
- **页脚栏 1/2/3** - 页脚三列布局

### 自定义设置
进入 **外观 → 自定义**：
- **首页横幅** - 设置首页标题和描述
- **社交媒体** - 添加社交链接（GitHub、Twitter等）

### 代码块语言
在编辑器中使用代码块时，设置语言可以显示对应的标签：
```
// 语言会自动显示在代码块左上角
console.log('Hello World');
```

## 🎯 推荐分类结构

适合IT技术博客的分类建议：

```
├── Linux
│   ├── 系统管理
│   ├── Shell脚本
│   └── 性能优化
├── DevOps
│   ├── Docker
│   ├── Kubernetes
│   ├── CI/CD
│   └── 监控运维
├── 编程开发
│   ├── Python
│   ├── Go
│   ├── JavaScript
│   └── 数据库
├── 云计算
│   ├── AWS
│   ├── Azure
│   └── 阿里云
└── 网络安全
    ├── 防火墙
    └── 渗透测试
```

## 📁 文件结构

```
techblog-wp-theme/
├── style.css           # 主样式表
├── functions.php       # 主题函数
├── header.php          # 页头模板
├── footer.php          # 页脚模板
├── index.php           # 首页模板
├── single.php          # 文章详情模板
├── page.php            # 页面模板
├── archive.php         # 归档模板
├── search.php          # 搜索结果模板
├── 404.php             # 404页面模板
├── comments.php        # 评论模板
├── js/
│   └── main.js         # 主脚本文件
└── README.md           # 主题说明文档
```

## 🛠️ 开发指南

### 添加自定义样式
在子主题或自定义CSS中添加：

```css
/* 自定义主色调 */
:root {
    --primary-color: #your-color;
    --secondary-color: #your-color;
}

/* 自定义代码块背景 */
.post-content pre {
    background: #your-code-bg;
}
```

### 添加自定义功能
在子主题的 `functions.php` 中添加：

```php
// 添加自定义功能
function my_custom_features() {
    // 你的代码
}
add_action('after_setup_theme', 'my_custom_features');
```

## 🌐 浏览器支持

- Chrome (最新)
- Firefox (最新)
- Safari (最新)
- Edge (最新)

## 📝 更新日志

### v1.0.0 (2024)
- 初始版本发布
- 暗色模式支持
- 代码高亮和复制功能
- 目录自动生成
- 响应式设计

## 💡 使用技巧

### 快捷键
- `Ctrl + K` / `Cmd + K` - 打开搜索
- `ESC` - 关闭搜索/弹窗

### Markdown 支持
主题完美支持 Gutenberg 编辑器中的代码块，建议使用 WordPress 内置的代码块功能。

### 图片优化
- 建议文章图片宽度 780px
- 使用 WebP 格式可提升加载速度
- 主题自动支持图片懒加载

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

GPL v2 or later

## 👨‍💻 作者

TechBlog Team

---

**享受你的技术写作之旅！** 🚀