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

16°C 19-03-2020
最近更新于:2022-06-16 00:16:22

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条评论则隐藏,点击按钮即显示效果。

老规矩,说下思路

  1. 遍历 vlist 下的直接 vcard 子元素(因为二级评论拥有相同的类名,需要只选择直接子元素)
  2. 判断并添加 expend 的条件(设置限制最大显示数量)
  3. 循环输出当前 vquote 下的所有 vcard (二级评论数量)
  4. 判断 vquote  vcard 的下标,如果大于最大显示数量时则隐藏当前 vcard
  5. 最后添加按钮,用于展开评论
$('.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();
    });

以上方法存在bug

  • setTimeOut 监测时几率获取不到动态元素导致失效 已修复(使用最新)
  • 加载更多评论后如果有长评无法自动处理 已修复(使用最新)

评论留言

既来之则留之,欢迎在下方留言评论。提交评论后还可以撤销或重新编辑,未发布的留言会被储存在本地以供下次继续编辑(Valine 会自动保存您的评论信息到浏览器)