Valine – 为长评论添加评论数量限制 Expend Limit

2Broear

发布于 2024-03-12 09:58:41

830

发布于 2024-03-12 09:58:41

文章被收录于专栏：2B博客2B博客

Valine 添加长评数量限制 –

在 Valine 文件中找到 "return r || (r = u.create("div", "class", "vquote"), n.appendChild(r)..." 字段，并按以下自定义增改：

return r || (
        r = u.create("div", "class", "vquote"), n.appendChild(r),
        setTimeout(() => {
            var vmax = 3,  //设置最大显示数量
                vcard = r.children,  //获取vquote下子评论
                vcards = vcard.length;  //vquote下评论总数（可用于子评论最大值）
            if(vcards > vmax){
                r.classList.add('overview');  //为vquote添加对应class样式
                var btn=document.createElement("BUTTON"),  //创建展开按钮
                    btnTxt=document.createTextNode('展开 ' + (vcards-vmax) + ' 条评论');  //剩余评论=子评论总数-最大显示数量
                btn.appendChild(btnTxt);
                btn.className = 'vbtn extend_addon';  //为button添加对应class样式
                r.appendChild(btn);
                for(var i=0; i<=vcards;i++) {
                    let _this = vcard[i];  //遍历vcard子评论，判断元素下标大于最大值（且不能为最大值，指button）设置隐藏
                    i>vmax-1&&i!=vcards ? _this.setAttribute("style","display: none;") : false;  
                };
                btn.onclick = function(){
                    this.remove();  //button点击后销毁
                    r.classList.remove('overview');  //移除vquote样式
                    for(var i=0; i<=vcards;i++) {
                        let _this = vcard[i];  //遍历vcard子评论，判断元素下标大于最大值（且不能为最大值）取消隐藏
                        i>vmax-1&&i!=vcards ? _this.removeAttribute("style") : false;  
                    }
                }
            }
        }, 0)
    ),r

为 Valine 长评论添加评论数量限制

还是 Valine ，这次为 valine 添加评论隐藏 extend 展开功能。不过有人说了 valine 自带不是有吗？是的，的确有，不过仅限于单个评论字符串限制，而不能隐藏展开当条评论内多条评论，所以需求是评论数量限制，超出n条评论则隐藏，点击按钮即显示效果。

老规矩，说下思路

遍历 vlist 下的直接 vcard 子元素（因为二级评论拥有相同的类名，需要只选择直接子元素）
判断并添加 expend 的条件（设置限制最大显示数量）
循环输出当前 vquote 下的所有 vcard （二级评论数量）
判断 vquote 下 vcard 的下标，如果大于最大显示数量时则隐藏当前 vcard
最后添加按钮，用于展开评论

$('.v .vlist').children('.vcard').each(function(){
        let subVcard = $(this).find('.vcard'),  //二级 vcard
            subVcardBox = $(this).find('.vquote'),  //二级 vcard 父元素
            subVcardMax = 3;  //最大显示数量
        if(subVcard.length > subVcardMax){
            subVcard.parent().addClass('overview');
            subVcardBox.append('<button class="vbtn extend_addon">剩余 '+(subVcard.length-subVcardMax) +' 条评论</button>');
            for(var i=0;i<=subVcard.length;i++){
                let subVcardEach = subVcard[i];  //循环二级 vcard
                if(i>subVcardMax-1 && subVcardEach != undefined){
                    $(subVcardEach).addClass('hide');
                };
            };
        };
    });

    //点击事件
    $('body').on('click','.v .vlist .vcard .vquote.overview .vbtn.extend_addon',function(){
        $(this).parent().attr('class','vquote openview').end().remove();
    });