木子卜—个人博客

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」版。查看和发表评论请点击:完整版 »