Typecho将评论头像从Gravatar改成显示QQ头像
AI摘要 本文介绍了如何将Typecho博客评论头像从Gravatar更换为显示QQ头像或随机头像。提供了详细的操作方法,包括修改主题文件functions.php中的代码,以及在comments.php中替换相应的代码。同时提供了两种方案,方案1保留了延迟加载逻辑,使用透明占位图避免布局跳动;方案2直接移除延迟加载,简化代码,适合不需要懒加载的场景。
引用:https://blog.csdn.net/qq_34626094/article/details/113111899
功能如下
- 如果是QQ邮箱,就显示QQ头像
- 如果不是,就使用随机头像
- 支持自定义随机图片api
操作方法
- 打开主题文件:
/functions.php - 找到以下代码:
function getGravatar($email, $name, $comments_a, $s = 96, $d = 'mp', $r = 'g')
{
preg_match_all('/((\d)*)@qq.com/', $email, $vai);
if (empty($vai['1']['0'])) {
$url = Helper::options()->GravatarSelect;
$url .= md5(strtolower(trim($email)));
$url .= "?s=$s&d=$d&r=$r";
$imga = '<img ' . $comments_a . ' src="' . GetLazyLoad() . '" data-lazy-src="' . $url . '" >';
} else {
$url = 'https://cravatar.cn/avatar/'.md5(strtolower(trim($email)));
$imga = '<img ' . $comments_a . ' src="' . GetLazyLoad() . '" data-lazy-src="' . $url . '" >';
}
return $imga;
}替换成:
function getGravatar($email, $name, $comments_a, $s = 96, $d = 'mp', $r = 'g') {
// 检查是否为QQ邮箱(匹配5-12位数字的QQ号)
if (preg_match('|^[1-9]\d{4,11}@qq\.com$|i', $email)) {
// QQ头像地址
$imgSrc = 'https://q2.qlogo.cn/headimg_dl?bs=' . $email . '&dst_uin=' . $email . '&spec=100&url_enc=0&referer=bu_interface&term_type=PC';
} else {
// 随机图片地址
$imgSrc = 'http://www.dmoe.cc/random.php';
}
// 构建包含延迟加载的img标签(保留原函数的延迟加载逻辑)
$imgTag = '<img ' . $comments_a . ' src="' . GetLazyLoad() . '" data-lazy-src="' . $imgSrc . '" width="46px" height="46px" style="border-radius: 50%;float: left;margin-top: 0px;margin-right: 10px;margin-bottom:-2px">';
// 包裹在带itemprop属性的span中
return '<span itemprop="image">' . $imgTag . '</span>';
}还有一种情况是主题没有定义的,需要先在functions.php中定义函数:
方案1:用透明占位图(推荐,不影响布局)
function getGravatar($email, $name, $comments_a, $s = 96, $d = 'mp', $r = 'g') {
// 检查是否为QQ邮箱(匹配5-12位数字的QQ号)
if (preg_match('|^[1-9]\d{4,11}@qq\.com$|i', $email)) {
// QQ头像地址
$imgSrc = 'https://q2.qlogo.cn/headimg_dl?bs=' . $email . '&dst_uin=' . $email . '&spec=100&url_enc=0&referer=bu_interface&term_type=PC';
} else {
// 随机图片地址
$imgSrc = 'http://www.dmoe.cc/random.php';
}
// 移除 GetLazyLoad(),改用 1x1 透明占位图(避免布局跳动)
$lazyPlaceholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
$imgTag = '<img ' . $comments_a . ' src="' . $lazyPlaceholder . '" data-lazy-src="' . $imgSrc . '" width="46px" height="46px" style="border-radius: 50%;float: left;margin-top: 0px;margin-right: 10px;margin-bottom:-2px">';
// 包裹在带itemprop属性的span中
return '<span itemprop="image">' . $imgTag . '</span>';
}方案2:直接用目标头像地址(取消延迟加载,简单直接)
如果不需要延迟加载,可直接删除 data-lazy-src,只用 src:
/**
* 评论头像改成QQ头像
*/
function getGravatar($email, $name, $comments_a, $s = 96, $d = 'mp', $r = 'g') {
// 检查是否为QQ邮箱(匹配5-12位数字的QQ号)
if (preg_match('|^[1-9]\d{4,11}@qq\.com$|i', $email)) {
// QQ头像地址
$imgSrc = 'https://q2.qlogo.cn/headimg_dl?bs=' . $email . '&dst_uin=' . $email . '&spec=100&url_enc=0&referer=bu_interface&term_type=PC';
} else {
// 随机图片地址
$imgSrc = 'http://www.dmoe.cc/random.php';
}
// 取消延迟加载,直接显示头像
$imgTag = '<img ' . $comments_a . ' src="' . $imgSrc . '" width="46px" height="46px" style="border-radius: 50%;float: left;margin-top: 0px;margin-right: 10px;margin-bottom:-2px">';
// 包裹在带itemprop属性的span中
return '<span itemprop="image">' . $imgTag . '</span>';
}再找到comments.php文件中的:
<div id="<?php $comments->theId(); ?>">
<div class="comment-author">
<?php $comments->gravatar('40', ''); ?>
<cite class="fn">
<?php $comments->author(); ?>
<?php if (strpos($commentClass, 'comment-by-author') !== false): ?>
<span class="author-tag">博主</span>
<?php endif; ?>
</cite>
</div>替换成:
<div id="<?php $comments->theId(); ?>">
<div class="comment-author">
<?php echo getGravatar(
$comments->mail,
$comments->author,
'alt="' . $comments->author . '"',
46,
'mp',
'g'
); ?>
<cite class="fn">
<?php $comments->author(); ?>
<?php if (strpos($commentClass, 'comment-by-author') !== false): ?>
<span class="author-tag">博主</span>
<?php endif; ?>
</cite>
</div>方案1 保留了延迟加载逻辑(通过 data-lazy-src),但用 Base64 透明占位图替代了未定义的 GetLazyLoad(),避免报错且不影响布局;方案2 直接移除延迟加载,简化代码,适合不需要懒加载的场景,兼容性更好。
- 上一篇:Typecho在评论增加IP归属地址展示
- 下一篇:测试置顶评论功能