博客园评论区头像换页更新解决方案

前言

博客园博客正文的评论区的每一条评论其实都是带用户头像链接的，因此有些博客主题利用这个链接，对评论新增了头像显示功能。

但是这部分功能只能在第一次加载页面时有效，一旦出现评论翻页、排序等操作，头像又没了。

为了解决这个问题 ，对#blog-comments-placeholder 这个元素进行改动监控，一旦有变动则再次执行一次头像设置函数。

实现过程

头像设置函数 setAvatar

/* 头像设置 */
setAvatar = function () {
    // 头像
    $.each($(".feedbackItem"), function (index, ele) {

        var self = $(ele);
        // 已经处理过了的则跳过
        if (self.find('comment_avatar_container').length > 0)
        {
            return;
        }
        
        // 这里自己定义需要如何设置评论区头像可自行修改
        var obj = self.find(".blog_comment_body");
        var id = obj.attr("id").split("_")[2];
        var blog = self.find('a[id^="a_comment_author"]');
        var blogUrl = blog.attr("href");
        var imgSrc =
            $("#comment_" + id + "_avatar").html() ||
            "http://pic.cnblogs.com/avatar/simple_avatar.gif";

        self.prepend(
            '<a class="comment_avatar_container" target="_blank" href="' +
            blogUrl +
            '"><img src="' +
            imgSrc +
            '" style="float:left;" class="comment_avatar"></a'
        );
        $(".feedbackListSubtitle").addClass("feedbackListSubtitle_right");
        $(".feedbackCon").addClass("feedbackCon_right");
    });
}

头像更新 updateAvatar

/* 头像更新 */
updateAvatar = function()
{
     // 获取要监控的元素
    const targetNode = document.getElementById('blog-comments-placeholder');

    // 创建一个 MutationObserver 实例，并定义回调函数
    const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // console.log('A child node has been added or removed.');
                setAvatar();
            } else if (mutation.type === 'attributes') {
                // console.log('The ' + mutation.attributeName + ' attribute was modified.');
            }
        }
    });

    // 配置观察选项
    const config = {
        attributes: true,
        childList: true,
        subtree: false // 观察目标节点及其后代节点
    };

    // 启动观察
    observer.observe(targetNode, config);
}

评论区设置 setComment

/* 评论区 */
setComment = function () {
    $(".feedbackItem").ajaxComplete(function (event, xhr, option) {
        //评论头像
        if (option.url.indexOf("GetComments") > -1) {
            setTimeout(function () {
                setAvatar();
            }, 50);
        }
    });  

    updateAvatar();  
};

页脚代码

<script>
$(function () {
	setComment();	
});
</script>

效果测试

点击本博客评论数最多的博文进行查看：https://www.cnblogs.com/gshang/p/biliTheme.html#!comments