Files

T

Your Name 6d4368fbd1 Initial commit: TechBlog Pro WordPress theme

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

2026-08-18 16:05:14 +08:00

4.5 KiB

Executable File

Raw Blame History

TechBlog Pro - WordPress Theme

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

✨ 特性

🎨 设计特色

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

📝 博客功能

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

🔧 技术特性

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

📦 安装

方法一：后台上传

下载主题zip文件
进入 WordPress 后台 → 外观 → 主题
点击「添加」→「上传主题」
选择下载的zip文件并安装
激活主题

方法二：FTP上传

解压主题文件
通过FTP上传到 /wp-content/themes/techblog-wp-theme/
进入 WordPress 后台 → 外观 → 主题
激活 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

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

4.5 KiB Executable File Raw Blame History Unescape Escape