Your Name
6d4368fbd1
Features: - Modern UI with dark mode support - Code highlighting with copy button - Auto table of contents - Reading time & views counter - Responsive design - Admin settings page - AJAX search
192 lines
4.5 KiB
Markdown
Executable File
192 lines
4.5 KiB
Markdown
Executable File
# 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中添加：
|
||
|
||
```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
|
||
|
||
---
|
||
|
||
**享受你的技术写作之旅！** 🚀
|