fluid主题-twikoo评论系统添加头像挂件

前言

这马上就要到2024了，发现最近这几天各大平台也陆续的新添加了用户头像挂件的装饰，迎接2024年的到来。于是想到，我的博客中评论区不也是有用户头像嘛。这不，趁这会有空，马上就着手开搞。

分析

首先分析一下twikoo评论系统的架构及css样式，可以看到整个评论区都是包含在id为twikoo的div块里的

然后逐步定位到用于展示头像图片的div块，可以看到是类名为tk-avatar-img的img标签，并且都是在父块tk-comment类名下的，定位到了头像展示的块，这下就好办了

实现

直接用css的伪元素::before进行装饰，实现代码如下

.tk-comment .tk-avatar.tk-has-avatar::before {
    margin-left: -12px;
    margin-top: -10px;
    content: '';
    position: absolute;
    width: 3.7rem;
    height: 3.7rem;
    opacity: .9;
    background: url(../txk/src/001.gif) center/cover;
    pointer-events: none;
    z-index: 1;
}

因为这个ccs定位会覆盖回复块的用户头像，但是回复块的用户头像显示是比较小的，不建议添加，因为添加了感觉也不好看，反而有点别扭了，所以需要新增css样式来屏蔽掉回复块的用户头像挂件装饰。代码如下

.tk-submit .tk-row .tk-avatar.tk-has-avatar::before {
    background: unset;
}

.tk-replies .tk-comment .tk-avatar.tk-has-avatar::before {
    background: unset;
}

注意，有两个显示头像的地方需要屏蔽，一个是回复框里的，一个是展示回复的，添加以上css样式后刷新一下网页即可看到效果。

其他评论系统同理，只要找到展示用户头像的块，然后利用css的伪元素::before进行装饰即可。