让AI 给我打造"Typecho-QQ2006" 的主题
角色与任务
你是一位精通 Typecho 主题开发、熟悉前端像素级还原(Pixel-Perfect)的资深全栈工程师。我现在要开发一款名为 "Typecho-QQ2006" 的主题,请严格按照以下需求,帮我从零设计并输出完整的模板代码和静态资源结构。
项目背景与素材
- 视觉原型:所有 UI 素材(图标、头像、背景、气泡等)必须优先引用开源仓库
https://github.com/mengkunsoft/QQ2006中的矢量/图片资源[reference:0]。 - 目标平台:Typecho 1.3+ 版本reference:1。
- 核心原则:不要基于任何旧主题修改,请完全参考我的设计稿,从头编写一套全新的模板文件(index.php, header.php, footer.php, sidebar.php, comments.php 等)reference:3。
页面布局与 UI 细节还原(严格对照图片)
请将博客的各个部分映射为 QQ2006 的经典界面元素:
1. 整体窗口框架(Header & Footer)
- 窗口外壳:页面最外层使用 QQ2006 经典的“珊瑚蓝渐变”标题栏,右上角包含“最小化、最大化、关闭”三个按钮的仿制图标[reference:5]。
- 全局字体:正文使用宋体或微软雅黑,字号偏小,行距紧凑。
- 侧边栏导航:左侧边栏的每个功能模块(分类、归档、友链)模仿“好友分组”样式。分组标题前有加号/减号折叠图标,鼠标悬停有经典蓝色高亮背景,且分组内第一项默认展示一个 QQ 头像。
2. 文章列表(Index.php)——“好友列表”
- 文章列表的每一项,将“文章标题”映射为“好友昵称”,将“文章摘要”映射为“个性签名”。
- 头像:文章作者的头像使用 QQ2006 风格的像素头像(可从仓库提取)。
- 底栏快捷键:在文章列表最下方,固定展示“手机好友、群/校友录、最近联系人”三个快捷按钮,点击后分别跳转到对应的页面或分类[reference:7]。
3. 文章详情页(Post.php)——“聊天窗口”
- 顶部信息栏:模仿 QQ 聊天窗口的顶部,左侧显示好友头像和昵称,右侧显示“短信、视频、语音、传文件、3D秀、邀请”等装饰性图标。
- 日志内容区:文章正文显示在聊天记录的气泡框中。可以将文章的发布时间、作者、分类等信息做成“系统消息”或“时间戳”样式,穿插在正文上下。
- 底部工具栏:将原本的“表情、魔法表情、截图”等图标,改为“点赞、分享、收藏”等博客功能按钮[reference:9]。
- 评论框:模仿 QQ 的输入栏样式,发送按钮做成经典的小按钮。
4. 评论列表(Comments.php)——“聊天记录”
- 访客的评论模仿 QQ 聊天气泡,左侧显示访客的 QQ 头像,右侧显示气泡和昵称。博主自己的回复使用不同颜色的气泡(比如绿色或蓝色)进行区分。
技术规范与输出要求
- 文件结构:请先输出主题的目录结构,然后逐个输出每个 PHP 文件的内容(包含详细的注释)和核心的 CSS 样式表。
- 资源路径:请假设所有 QQ2006 的图片素材已经下载到主题的
/assets/img/目录下,在 CSS 和 HTML 中统一使用这些路径。 - 兼容性与响应式:虽然还原 PC 端复古界面是核心,但请确保在移动端能基本可用(比如侧边栏可以折叠)。
- 版权声明:在主题的
functions.php和README.md中,请务必添加声明:“视觉素材版权归腾讯公司所有,本项目仅供学习交流,严禁商用”[reference:10]。
请开始你的工作,先给我整体的架构设计和首页代码。


