网站导航
> 技术文档 > Typecho Handsome侧边栏添加QQ等级和信息显示

Typecho Handsome侧边栏添加QQ等级和信息显示

网友: 技术文档 2025-07-26 20:22:19

前言

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

效果展示

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

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

Typecho Handsome侧边栏添加QQ等级和信息显示

实现步骤

1. 准备工作

首先，我们需要找到合适的API来获取QQ信息。本教程使用的是jkapi.com提供的API服务，它可以根据QQ号获取相关信息。

2. 修改sidebar.php文件

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

2.1 找到合适的位置

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

2.2 添加QQ信息卡片代码

代码详情查看原文：https://blog.ybyq.wang/archives/751.html

3. 添加主题设置选项

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

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

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

4. 自定义样式（可选）

如果你想进一步美化QQ信息卡片的样式，可以在主题的自定义CSS中添加以下代码：

.qq-info-card { padding: 10px; background-color: #f9f9f9; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}.qq-info-card img { transition: all 0.3s ease;}.qq-info-card img:hover { transform: rotate(360deg);}

注意事项

  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导致的性能问题。

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

网络标签：

相关问题