Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /usr/home/touxinzei123/domains/aoyun.za.net/public_html/usr/themes/Littlehands/header.php on line 106
涐嘚音樂
|◀ || ■ ▶| ≡
★ ★

角色与任务

你是一位精通 Typecho 主题开发、熟悉前端像素级还原(Pixel-Perfect)的资深全栈工程师。我现在要开发一款名为 "Typecho-QQ2006" 的主题,请严格按照以下需求,帮我从零设计并输出完整的模板代码和静态资源结构。

项目背景与素材

  1. 视觉原型:所有 UI 素材(图标、头像、背景、气泡等)必须优先引用开源仓库 https://github.com/mengkunsoft/QQ2006 中的矢量/图片资源[reference:0]。
  2. 目标平台:Typecho 1.3+ 版本reference:1。
  3. 核心原则:不要基于任何旧主题修改,请完全参考我的设计稿,从头编写一套全新的模板文件(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 头像,右侧显示气泡和昵称。博主自己的回复使用不同颜色的气泡(比如绿色或蓝色)进行区分。

技术规范与输出要求

  1. 文件结构:请先输出主题的目录结构,然后逐个输出每个 PHP 文件的内容(包含详细的注释)和核心的 CSS 样式表。
  2. 资源路径:请假设所有 QQ2006 的图片素材已经下载到主题的 /assets/img/ 目录下,在 CSS 和 HTML 中统一使用这些路径。
  3. 兼容性与响应式:虽然还原 PC 端复古界面是核心,但请确保在移动端能基本可用(比如侧边栏可以折叠)。
  4. 版权声明:在主题的 functions.php 和 README.md 中,请务必添加声明:“视觉素材版权归腾讯公司所有,本项目仅供学习交流,严禁商用”[reference:10]。

请开始你的工作,先给我整体的架构设计和首页代码。

标签: qq2006, typecho主题

添加新评论

注意:已开启评论过滤器,无中文将无法评论!