TechBlog Pro - WordPress Theme

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

✨ 特性

🎨 设计特色

• 现代化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中添加：

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

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

添加自定义功能

在子主题的 functions.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

---

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