修改自Xuan's blog，在大佬的基础上修正了接口地址和函数文件的位置。仅做个人记录，感谢大佬的无私分享，侵权联系删除
前言
在个人博客的侧边栏展示自己的QQ信息，包括头像、昵称、QQ号、等级和Q龄等，不仅可以增加博客的个性化，还能让访客更好地了解博主。本教程将详细介绍如何在Typecho博客的Handsome主题侧边栏中添加QQ信息卡片功能。
效果展示
实现后的效果是在侧边栏显示一个包含以下信息的QQ卡片：
QQ头像
QQ昵称
QQ号码
Q龄（注册年份）
QQ等级（使用emoji表情：👑☀️🌙⭐表示不同等级）
实现步骤
1. 准备工作
首先，我们需要找到合适的API来获取QQ信息。本教程使用的是api.dwo.cc提供的API服务，它可以根据QQ号获取相关信息
2. 修改sidebar.php文件
在Handsome主题中，侧边栏的内容是由sidebar.php文件控制的。我们需要编辑这个文件来添加QQ信息卡片。
2.1 找到合适的位置
通常，我们会将QQ信息卡片添加到侧边栏的个人信息模块附近。在sidebar.php文件中找到合适的位置，例如在博主信息卡片之后。
2.2 添加QQ信息卡片代码
将以下代码添加到选定的位置：
<!--QQ等级显示-->
<section id="qq_level_widget" class="widget widget_categories wrapper-md padder-v-none clear">
<h5 class="widget-title m-t-none"><?php _me("QQ信息") ?></h5>
<div class="panel wrapper-sm padder-v-ssm">
<?php
function getQQInfoFromDwoApi($qq)
{
$url = "https://openapi.dwo.cc/api/aiys_qq?qq=" . $qq;
$ch = curl_init();
// 设置cURL选项
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'ckey: *************', // 在header中传递秘钥
'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
]);
$response = curl_exec($ch);
curl_close($ch);
if ($response) {
$data = json_decode($response, true);
if (isset($data['code']) && $data['code'] == 200) {
return $data;
}
}
return null;
}
function generateQQLevelIconsHtml($level)
{
$html = '';
$level = intval($level);
// 等级计算规则
$crowns = floor($level / 64);
$suns = floor(($level % 64) / 16);
$moons = floor(($level % 16) / 4);
$stars = $level % 4;
// 使用emoji表情替代图片，更加稳定可靠
$crown_icon = '👑'; // 皇冠
$sun_icon = '☀️'; // 太阳
$moon_icon = '🌙'; // 月亮
$star_icon = '⭐'; // 星星
$icon_style = 'style="font-size:16px; margin:0 1px;"';
for ($i = 0; $i < $crowns; $i++) {
$html .= '<span ' . $icon_style . '>' . $crown_icon . '</span>';
}
for ($i = 0; $i < $suns; $i++) {
$html .= '<span ' . $icon_style . '>' . $sun_icon . '</span>';
}
for ($i = 0; $i < $moons; $i++) {
$html .= '<span ' . $icon_style . '>' . $moon_icon . '</span>';
}
for ($i = 0; $i < $stars; $i++) {
$html .= '<span ' . $icon_style . '>' . $star_icon . '</span>';
}
return $html;
}
// 缓存文件路径 - 使用Typecho的缓存目录
$cache_dir = defined('__TYPECHO_TMP_DIR__') ? __TYPECHO_TMP_DIR__ : __DIR__ . '/cache';
if (!is_dir($cache_dir)) {
@mkdir($cache_dir, 0755, true);
}
$qq = '403766640'; // 您的QQ号
$cache_file = $cache_dir . '/qq_info_' . $qq . '.json';
$cache_time = 86400; // 缓存1天（单位：秒）
// 检查缓存是否存在且有效
$qqInfo = null;
if (file_exists($cache_file) && (time() - filemtime($cache_file) < $cache_time)) {
// 缓存有效，直接读取缓存
$cache_content = @file_get_contents($cache_file);
if ($cache_content !== false) {
$qqInfo = json_decode($cache_content, true);
}
}
// 如果缓存无效或读取失败，则调用API
if ($qqInfo === null) {
// 缓存无效或不存在，调用API获取数据
$qqInfo = getQQInfoFromDwoApi($qq);
// 如果API调用成功，保存到缓存
if ($qqInfo) {
@file_put_contents($cache_file, json_encode($qqInfo));
}
}
// 只使用API返回的数据或缓存数据
if ($qqInfo && isset($qqInfo['data'])) {
// 新API结构 - aiys_qq接口
$level = $qqInfo['data']['iQQLevel'] ?? '';
$nickname = $qqInfo['data']['sNickName'] ?? '';
$avatar = $qqInfo['data']['sFaceUrl'] ?? '';
// 获取PC端在线时长(单位：分钟)
$pcOnlineTime = isset($qqInfo['data']['iPCQQOnlineTime']) ? intval($qqInfo['data']['iPCQQOnlineTime']) : 0;
// 获取升级剩余天数
$nextLevelDay = $qqInfo['data']['iNextLevelDay'] ?? '';
// 获取总活跃天数
$totalActiveDay = $qqInfo['data']['iTotalActiveDay'] ?? '';
// 获取VIP等级
$vipLevel = $qqInfo['data']['iVipLevel'] ?? 0;
// 是否是SVIP
$isSVip = isset($qqInfo['data']['iSVip']) && $qqInfo['data']['iSVip'] == '1';
$levelIconsHtml = generateQQLevelIconsHtml($level);
?>
<div class="qq-info-card"
style="border-radius:8px; padding:15px; box-shadow:0 2px 5px rgba(0,0,0,0.05);">
<div style="display:flex; align-items:center; margin-bottom:12px;">
<div class="avatar-container" style="position:relative; margin-right:15px;">
<?php if ($avatar): ?>
<img src="<?php echo $avatar; ?>" class="img-circle" loading="lazy"
style="width:60px; height:60px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.1);">
<?php else: ?>
<div class="img-circle"
style="width:60px; height:60px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.1); background:#f0f0f0; display:flex; align-items:center; justify-content:center;">
<i data-feather="user" style="width:30px; height:30px; color:#ccc;"></i>
</div>
<?php endif; ?>
</div>
<div class="user-info" style="flex:1;">
<h4 style="margin:0 0 8px; font-size:16px; font-weight:bold; color:#333;">
<?php echo htmlspecialchars($nickname ?: 'QQ用户'); ?></h4>
<div style="color:#666; font-size:13px; display: flex; flex-direction: column; align-items: flex-start;">
<div style="display: flex; align-items: center; margin-bottom: 4px;">
<i data-feather="user" style="width:16px; height:16px; margin-right:6px; flex-shrink: 0;"></i>
<span><?php echo $qq; ?></span>
</div>
<?php if ($vipLevel > 0): ?>
<div style="display: flex; align-items: center;">
<i data-feather="award" style="width:16px; height:16px; margin-right:6px; flex-shrink: 0; <?php echo $isSVip ? 'color:#FF0000;' : 'color:#FF9800;'; ?>"></i>
<span style="<?php echo $isSVip ? 'color:#FF0000;' : 'color:#FF9800;'; ?>">
<?php echo $isSVip ? 'SVIP' : 'VIP'; ?><?php echo $vipLevel; ?>
</span>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php if ($level): ?>
<div class="level-info"
style="display:flex; align-items:center; padding:8px 12px; border-radius:6px; border-left:3px solid #f0ad4e;">
<span
style="background-color:#f0ad4e; color:white; padding:2px 8px; font-size:12px; border-radius:4px; font-weight:bold; margin-right:10px;">
LV<?php echo $level; ?>
</span>
<span class="level-icons" style="flex:1;">
<?php echo $levelIconsHtml; ?>
</span>
</div>
<?php endif; ?>
<!-- 添加额外信息显示 -->
<div class="qq-extra-info" style="margin-top:12px; font-size:13px; color:#666;">
<?php if ($pcOnlineTime > 0): ?>
<div style="display:flex; justify-content:space-between; margin-bottom:6px;">
<span><i data-feather="monitor" style="width:14px; height:14px; vertical-align:middle; margin-right:3px;"></i> PC在线时长:</span>
<span><?php echo $pcOnlineTime; ?> 分钟</span>
</div>
<?php endif; ?>
<?php if ($nextLevelDay): ?>
<div style="display:flex; justify-content:space-between; margin-bottom:6px;">
<span><i data-feather="trending-up" style="width:14px; height:14px; vertical-align:middle; margin-right:3px;"></i> 升级剩余:</span>
<span><?php echo $nextLevelDay; ?>天</span>
</div>
<?php endif; ?>
<?php if ($totalActiveDay): ?>
<div style="display:flex; justify-content:space-between;">
<span><i data-feather="activity" style="width:14px; height:14px; vertical-align:middle; margin-right:3px;"></i> 总活跃天数:</span>
<span><?php echo $totalActiveDay; ?>天</span>
</div>
<?php endif; ?>
</div>
</div>
<?php
} else {
// API请求失败且没有缓存数据时显示
echo '<div class="text-center" style="padding:15px;">暂时无法获取QQ信息</div>';
}
?>
</div>
</section>3. 添加主题设置选项
为了让用户可以通过主题设置面板控制是否显示QQ信息卡片，我们需要修改主题的设置文件。
在Handsome主题的functions.php文件中找到themeConfig函数，在适当位置添加以下代码：
//侧边栏显示QQ信息
$form->checkbox('sidebarBlock', array('ShowQQInfo'), _t('侧边栏显示QQ信息'), _t('开启后侧边栏将显示QQ信息卡片'));添加主题设置选项这一步我没理解，加入到functions.php后，主题设置提示
如果将代码变更为
\'ShowQQInfo\' => _t(\'侧边栏显示QQ信息卡片（开启后显示QQ信息）\')添加到functions_mine.php，后台也只是多了个选项，但不会有实际作用有人明白的话请评论区留言，我学习学习
4. 修改两个数值
$qq = '403766640'; // 改成你的QQ号
'ckey: *****', // 改成你的秘钥 在小渡api（获取api的网站）中注册登录，并查看秘钥
注意事项
替换QQ号码：在代码中将
'403766640'替换为你自己的QQ号码。API可用性：本教程使用的是api.dwo.cc的API，如果该API不可用，可能需要寻找替代的API服务。
缓存机制：代码中已实现了缓存机制，数据会缓存10天，避免频繁请求API。
等级图标：使用emoji表情（👑☀️🌙⭐）代替传统的QQ等级图标，避免因CDN链接不稳定导致图标无法显示。
错误处理：代码中包含了基本的错误处理机制，当API请求失败时会显示错误信息。
常见问题
Q: 为什么我的QQ信息不显示？
A: 可能是API服务不稳定或者网络问题，请检查浏览器控制台是否有错误信息。
Q: 如何修改缓存时间？
A: 在代码中找到10 * 24 * 60 * 60 * 1000这一部分，修改前面的数字可以改变缓存天数。
Q: 如何添加更多QQ信息？
A: 可以根据API返回的数据，在displayQQInfo函数中添加更多信息的显示。
结语
通过以上步骤，你已经成功在Typecho博客的Handsome主题侧边栏添加了QQ等级和信息显示功能。这个功能不仅美观实用，还具有缓存机制，避免频繁请求API导致的性能问题。
如果你有任何问题或改进建议，欢迎在评论区留言讨论。
默认评论
Halo系统提供的评论