in 折腾博客 (1184℃)

到国庆了 又是一个作死折腾的季节 一回来我就把畅言用原生评论换掉了 并且撤掉了又拍的CDN(不是嫌弃又拍 计划源站CDN就先不用了 CDN对于折腾党来说很头疼 用又拍静态站缓存图片、css、js吧) 评论那块的CSS不想自己写 于是强扒借鉴了下Typecho原生的评论CSS 加上了一些小功能啊 这些小功能就不再次写出了 下面放链接

这样 评论区里面这几个功能就实现了 随后开始搞评论的Ajax 先是用了情留メ蚊子的AjaxComment 结果发现有一大堆BUG 比如说文章会被重载到评论框中... 然后又用了绛木子的TeComment 这插件在本地环境用的挺好 我还针对我的主题适配改写了这个插件 结果放在实际博客环境中... 诶呦炸了锅了 和评论回复插件有冲突 一评论的时候评论回复的异步页面就开始刷报错... 无奈撤下了这个插件...

评论Ajax加载

Then,我用了泽泽(QQdie)的方案 将下面的代码放进footer附近,然后在上面提前引用好jQuery库

function ajaxc() {
var
   txt_1  = '必须填写用户名',
   txt_2  = '必须填写电子邮箱地址',
   txt_3  = '邮箱地址不合法',
   txt_4  = '必须填写评论内容';
   $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
var
   comments_order = 'DESC',
   comment_list   = '.comment-list',
   comments       = '.comment-num',
   comment_reply  = '.comment-reply',
   comment_form   = '#comment-form',
   respond        = '#comments',
   textarea       = '#textarea',
   submit_btn     = '.submit',
   new_id = '', parent_id = '';

 click_bind();

    $(comment_form).submit(function() { // 提交

        $(submit_btn).attr('disabled', true).fadeTo('slow', 0.5);

       /* 预检 */
        if ($(comment_form).find('#author')[0]) {

            if ($(comment_form).find('#author').val() == '') {
                toastr.info(txt_1);
                msg_effect('#error');
                return false;
            }

            if ($(comment_form).find('#mail').val() == '') {
                toastr.info(txt_2);
                msg_effect('#error');
                return false;
            }

            var filter = /^[^@\s<&>]+@([a-z0-9]+\.)+[a-z]{2,4}$/i;
            if (!filter.test($(comment_form).find('#mail').val())) {
                toastr.info(txt_3);
                msg_effect('#error');
                return false;
            }
        }      
  var textValue = $(comment_form).find(textarea).val().replace(/(^\s*)|(\s*$)/g, "");  //排除空格
        if (textValue == null || textValue == "") {
            toastr.info(txt_4);
            msg_effect('#error');
console.log("内容为空");
            return false;
        }
        $(submit_btn).addClass("active");
       $('#loading').show();
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serializeArray(),
            error: function() {
                toastr.info("提交失败,请重试!");
                msg_effect('#error');
                return false;
            },
            success: function(data) { //成功取到数据
                //console.log(data);
                $(submit_btn).removeClass("active");
               $('#loading').slideUp();
                try {
                    if (!$(comment_list, data).length) {
                        toastr.info("提交失败,可能输入内容不符合规则!");
                        msg_effect('#error');
                        return false;
                    } else {
                        new_id = $(comment_list, data).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function(a, b) {
                            return a - b
                        }).pop(); // TODO:找新 id,如果在第二页评论的话,找到的ID是有问题的!

                        if ($('.page-navigator .prev').length && parent_id == ""){
                            new_id = '';
var dd=$(".prev a").attr("href");//获取上页地址
$(".prev a").attr("href",""); //将地址清空
dd=dd.replace(/comment-page-(.*?)#comments/, "comment-page-1#comments");//将获取的地址页码改为1
$(".prev a").attr("href",dd); //将地址放回去
$('.prev a').get(0).click(); //点击这个超链接
                        }//判断当前评论列表是否在第一页,并且只会在母评论时候才会生效

            console.log("new id " + new_id);
                        msg_effect("#success");
                        //插入评论内容到当前页面
                        if (parent_id) {
                            data = $('#li-comment-' + new_id, data).hide(); // 取新评论
                            if ($('#' + parent_id).find(".comment-children").length <= 0) {
                                $('#' + parent_id).append("<div class='comment-children'><ol class='comment-list'></ol></div>");
                            }
                            if (new_id)//new_id不为空的时候才会插入
                                $('#' + parent_id + " .comment-children .comment-list").prepend(data);
                            console.log('该评论为子评论,parent_id:' + parent_id);
                            parent_id = '';
                            //console.log(data);
                        } else {
                            data = $('#li-comment-' + new_id, data).hide(); // 取新评论
                            //console.log('该评论为母评论');
                            if (!$(comment_list).length) //如果一条评论也没有的话
                                $(respond).append('<div class="info-com">仅有<span class="comment-num">0<\/span>条评论<\/div><ol class="comment-list"><\/ol>'); // 加 ol
                            $(comment_list).prepend(data);
                            //console.log('评论内容:');
                            //console.log(data);
                        }
                        $('#li-comment-' + new_id).fadeIn(); // 显示
                        var num;
                        $(comments).length ? (num = parseInt($(comments).text().match(/\d+/)), $(comments).html($(comments).html().replace(num, num + 1))) : 0;
                        //console.log($('#comments h4').length);
                        // 评论数加一
                        TypechoComment.cancelReply();
                        $(textarea).val('');
                        $(comment_reply + ' a, #cancel-comment-reply-link').unbind('click');
                        click_bind(); // 新评论绑定
                        $(submit_btn).attr('disabled', false).fadeTo('slow', 1);
                        if (new_id){
                            $body.animate({scrollTop: $('#li-comment-' + new_id).offset().top - 50}, 500);
                        }else{
                            $body.animate({scrollTop: $('#comments').offset().top - 50}, 500);
                        }
                    }
                } catch(e) {
                    //alert('评论ajax错误!请截图并联系主题制作者!\n\n' + e);
                    window.location.reload();
                }
            } // end success()
        }); // end ajax()
        return false;
    }); // end $(comment_form).submit()
    function click_bind() { // 绑定
        $(comment_reply + ' a').click(function() { // 回复
            //$body.animate({scrollTop: $(respond).offset().top - 180}, 400);
            //console.log($(this).parent().parent().parent().parent());
            parent_id = $(this).parent().parent().parent().parent().parent().parent().attr("id");//parent()数量根据模板而定,否则评论嵌套可能有问题
            console.log("parent_id:" + parent_id);
            $(textarea).focus();
        });
        $('#cancel-comment-reply-link').click(function() { // 取消
            parent_id = '';
        });
    }
    function msg_effect(id) { // 出错
        $(submit_btn).attr('disabled', false).fadeTo('', 1);
    }
}
ajaxc();

注:上述代码中提示功能使用了 jquery 通知插件 toastr,如果你不想使用可将上述代码中的 toastr.info改成alert

出了一点问题

这样 在无instantclick的情况下 表现良好 但一添加进去之后...BOOM!!!

(中途 把评论者的每个li标签加上 date-no-instant 还有取消回复那里和评论框的输入区)

  • 从首页点进去之后评论文章 ,Ajax评论失效,当再次评论时,Ajax评论恢复正常 求解决方案

因为这个 机芯我捅咕了一下午 评论等级连升两级(现在看不着了测试的评论都删了) 还请泽泽dalao帮我看了一看 之后... 看到他TypechoComment这段系统自动生成的评论js位置不对(正常的都在head区 他的在评论下面) 然后告诉了我一个方案...

<?php $this->header('); ?>
模板的这个换成
<?php $this->header('generator=&template=&pingback=&xmlrpc=&wlw=&commentReply=&rss1=&rss2=&atom='); ?>

注: <?php $this->header('); ?> 位于模版的Header区(这不废话)

换了以后 TypechoComment的js就从Header里消失了 然后把这段js放倒评论模版里(一般都是comments.php)

然后把一些东西用php的输出改一下 这样下面的js就是个TypechoComment的副本(都是一样的 可直接放进去食用)

<!-- 感谢QQdie援助之爪 -->
<script type="text/javascript">  
(function () {
    window.TypechoComment = {
        dom : function (id) {
            return document.getElementById(id);
        },
        create : function (tag, attr) {
            var el = document.createElement(tag);
            for (var key in attr) {
                el.setAttribute(key, attr[key]);
            }
            return el;
        },
        reply : function (cid, coid) {
            var comment = this.dom(cid), parent = comment.parentNode,
                response = this.dom('<?php echo $this->respondId(); ?>'),
                input = this.dom('comment-parent'),
                form = 'form' == response.tagName ? response : response.getElementsByTagName('form')[0],
                textarea = response.getElementsByTagName('textarea')[0];
            if (null == input) {
                input = this.create('input', {
                    'type' : 'hidden',
                    'name' : 'parent',
                    'id'   : 'comment-parent'
                });
                form.appendChild(input);
            }
            input.setAttribute('value', coid);
            if (null == this.dom('comment-form-place-holder')) {
                var holder = this.create('div', {
                    'id' : 'comment-form-place-holder'
                });
                response.parentNode.insertBefore(holder, response);
            }
            comment.appendChild(response);
            this.dom('cancel-comment-reply-link').style.display = '';
            if (null != textarea && 'text' == textarea.name) {
                textarea.focus();
            }
            return false;
        },
        cancelReply : function () {
            var response = this.dom('<?php echo $this->respondId(); ?>'),
            holder = this.dom('comment-form-place-holder'),
            input = this.dom('comment-parent');
            if (null != input) {
                input.parentNode.removeChild(input);
            }
            if (null == holder) {
                return true;
            }
            this.dom('cancel-comment-reply-link').style.display = 'none';
            holder.parentNode.insertBefore(response, holder);
            return false;
        }
    };
})();
</script>

推测出的原理

然后 Ajax评论和instantclick就水火相容了 那...这是为什么呢? 下面是我的推断 不一定准确 如有错误请指出

我认为TypechoComment这段自动生成的js生成在head区里 inst不刷新这里(inst只刷新Body内内容) 会造成评论页面没有TypechoComment这段js 会造成异常 把这段js挪到body里就正常了,如评论模版(comments.php)

搜索的inst适配嘛...我会参照这篇文章继续进行 等这篇文章发布之后就开始动工 如果现在弄的话写文章的思路就没有了

yooooo 撸起袖子开始干

 |   | 

相关标签:#none

许可协议: 署名-相同方式共享 4.0 国际 转载请保留原文链接及作者