前言

在个人博客的侧边栏展示自己的QQ信息，包括头像、昵称、QQ号、等级和Q龄等，不仅可以增加博客的个性化，还能让访客更好地了解博主。本教程将详细介绍如何在Typecho博客的Handsome主题侧边栏中添加QQ信息卡片功能。

效果展示

实现后的效果是在侧边栏显示一个包含以下信息的QQ卡片：

  • QQ头像
  • QQ昵称
  • QQ号码
  • Q龄（注册年份）
  • QQ等级（使用emoji表情：👑☀️🌙⭐表示不同等级）

实现步骤

1. 准备工作

首先，我们需要找到合适的API来获取QQ信息。本教程使用的是jkapi.com提供的API服务，它可以根据QQ号获取相关信息，
这个用了半个月就不行了，换成了api.dwo.cc的。

2. 修改sidebar.php文件

在Handsome主题中，侧边栏的内容是由sidebar.php文件控制的。我们需要编辑这个文件来添加QQ信息卡片。

2.1 找到合适的位置

通常，我们会将QQ信息卡片添加到侧边栏的个人信息模块附近。在sidebar.php文件中找到合适的位置，例如在博主信息卡片之后。

2.2 添加QQ信息卡片代码

将以下代码添加到选定的位置：

此处内容需要评论回复后（审核通过）方可阅读。

3. 添加主题设置选项

为了让用户可以通过主题设置面板控制是否显示QQ信息卡片，我们需要修改主题的设置文件。

在Handsome主题的functions.php文件中找到themeConfig函数，在适当位置添加以下代码：

//侧边栏显示QQ信息
$form->checkbox('sidebarBlock', array('ShowQQInfo'), _t('侧边栏显示QQ信息'), _t('开启后侧边栏将显示QQ信息卡片'));

4. 修改两个数值

1、$qq = '676567473'; // 改成你的QQ号
2、'ckey: *', // 改成你的秘钥
在小渡api（获取api的网站）中注册登录，并查看秘钥

注意事项

  1. 替换QQ号码：在代码中将'你的QQ号码'替换为你自己的QQ号码。
  2. API可用性：本教程使用的是jkapi.com的API，如果该API不可用，可能需要寻找替代的API服务。
  3. 缓存机制：代码中已实现了缓存机制，数据会缓存10天，避免频繁请求API。
  4. 等级图标：使用emoji表情（👑☀️🌙⭐）代替传统的QQ等级图标，避免因CDN链接不稳定导致图标无法显示。
  5. 错误处理：代码中包含了基本的错误处理机制，当API请求失败时会显示错误信息。

常见问题

Q: 为什么我的QQ信息不显示？

A: 可能是API服务不稳定或者网络问题，请检查浏览器控制台是否有错误信息。

Q: 如何修改缓存时间？

A: 在代码中找到10 * 24 * 60 * 60 * 1000这一部分，修改前面的数字可以改变缓存天数。

Q: 如何添加更多QQ信息？

A: 可以根据API返回的数据，在displayQQInfo函数中添加更多信息的显示。

结语

通过以上步骤，你已经成功在Typecho博客的Handsome主题侧边栏添加了QQ等级和信息显示功能。这个功能不仅美观实用，还具有缓存机制，避免频繁请求API导致的性能问题。

如果你有任何问题或改进建议，欢迎在评论区留言讨论。

最后修改：2025 年 08 月 01 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏
END
本文作者：
 文章标题： Typech handsome 侧边栏添加QQ等级和信息显示
 本文地址：https://blog.ybyq.wang/archives/751.html
 版权说明：若无注明，本文皆Xuan's blog原创，转载请保留文章出处。