typecho给评论者头像加上漂亮的头像框
在主题文件夹function.php文件中加入以下代码
/** 评论者认证等级 */
function dengji($i){
$db=Typecho_Db::get();
$mail=$db->fetchAll($db->select(array('COUNT(cid)'=>'rbq'))->from('table.comments')->where('mail = ?', $i)->where('authorId = ?','0'));
foreach ($mail as $sl){
$rbq=$sl['rbq'];}
if($rbq<1){
echo '<span class="vrenzheng"></sapan>';
}elseif ($rbq<10 && $rbq>0) {
echo '平民';
}elseif ($rbq<20 && $rbq>=10) {
echo '刁民';
}elseif ($rbq<40 && $rbq>=20) {
echo 'VIP3';
}elseif ($rbq<80 && $rbq>=40) {
echo 'VIP4';
}elseif ($rbq<100 && $rbq>=80) {
echo 'VIP5';
}elseif ($rbq>=100) {
echo 'SVIP';
}
}
在主题文件夹comments.php文件中适当位置添加以下代码
<?php dengji($comments->mail);?>
最后就是css代码
/*V认证*/
.vrenzheng::before {
content: "";
display: block;
position: absolute;
width: 19px;
height: 19px;
border-radius: 50%;
right: 7px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
background-image: url(https://yun.abcio.cn/img/kuang.png);
border: 2px solid var(--bai);
top: 30px;
}
.vrenzheng{
position: relative;
}
.vrenzheng::before {
width: 92px;
height: 92px;
top: -22px;
right: 235%;
}
.friends::before {
content: "";
display: block;
position: absolute;
width: 19px;
height: 19px;
border-radius: 50%;
right: 7px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
background-image: url(https://pic.imxxz.cn/wxxcx/friends.png);
border: 2px solid var(--bai);
top: 30px;
}
.friends{
position: relative;
}
.friends::before {
width: 18px;
height: 18px;
top: 23px;
right: 106%;
}
.wife::before {
content: "";
display: block;
position: absolute;
width: 19px;
height: 19px;
border-radius: 50%;
right: 7px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
background-image: url(https://pic.imxxz.cn/wxxcx/wife.png);
border: 2px solid var(--bai);
top: 30px;
}
.wife{
position: relative;
}
.wife::before {
width: 18px;
height: 18px;
top: 23px;
right: 106%;
}
*, :after, :before{
box-sizing: border-box;
}
.flex {
display: flex;
}
挂件大小位置在以下代码里边改
.vrenzheng::before {
width: 92px;
height: 92px;
top: -22px;
right: 235%;
}
效果图
PC效果
移动效果
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »