Typecho给评论头像添加骚里骚气的挂件

寻梦xunm| 710| 收集

3年前

超过1238天温馨提示

本文最后更新于2021年07月02日，已超过1238天没有更新，若内容或图片失效，请留言反馈。

食用方法：
主题文件夹内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%;
}

代码修正（如果发现头像框偏移请参考）

<style>        
.img-avatar-99 {
    position: relative;
    /*修改这里的高度和宽度以达到边框里面包含头像的效果*/
    /*一般情况下height=width，并且>头像本身的元素大小*/
    height:auto;
    width:55px;
}
.img-avatar-pendant-99 {
    width:100% !important;
    height: auto !important;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index: 99;
}
.img-avatar-pendant-99+img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
</style>

html代码

<div class="img-avatar-99">
            <img class="img-avatar-pendant-99" src="https://yun.abcio.cn/img/kuang.png"><!--显示评论挂件-->
            <img class="img-avatar"  src="https://www.gravatar.com/avatar/4db3222efe7fbf16b5ee69db7e33a5d3?s=96&d=mp&r=g" width="45px" height="45px" style="border-radius: 50%;" >
        </div>

文章来源于：https://www.abcio.cn/F/341.html

教程评论头像框

0 赞 or 打赏

喜欢就打赏一点