标签 typecho ajax js 无插件实现无刷新评论 下的文章

Typecho AJAX 利用 JS 无插件实现无刷新评论

自从换了移动端主题之后,在移动端主题下评论莫名出现了评论框重叠以及无法评论的 BUG,我自己测试的时候也没记在心上,我想的是移动端估计没人评论,就一直晾着,昨天基友 欧文斯 在移动端下评论的时候出现了之前一模一样的 BUG,我第一反应肯定是 ajax 出了问题,经过排查发现移动端主题的 ajax 与 AjaxComment 插件产生了冲突,而且 AjaxComment 插件原本也有不少的 BUG,作者好几年没更新了,也就不了了之。

因为本站的移动端和 PC 端主题是分开识别的,移动端已经自带 ajax,停用并删除 AjaxComment 插件,直接用代码来实现 PC 端主题 ajax 功能。

搜索了相关的教程都比较复杂,有几个插件也很久没更新,不需要插件的 ajax 教程也跟着做了一遍,又是修改 functions.php 又是 footer.php 的,都整懵圈了结果还是不行。

然后找到移动端主题的 ajax 评论功能源码,无脑添加到 PC 主题里测试时发现点击提交评论的时候评论不会显示出来,要重新刷新一下网站才会显示,群里有人说不适配主题,要自己修改代码进行适配...

无意间看到一个 typecho ajax 教程文章留言里有人提到最简单的 js 调用,只需一个调用,无需修改后台源码即可实现评论 ajax。

直接提取 ajax 评论的代码封装成 js 文件,这样就不需要修改代码来适配主题了...

    function ac() {
        $body = $('html,body');
        var g = '.comment-list',
            h = '.comment-num',
            i = '.comment-reply a',
            wi = '.whisper-reply',
            j = '#textarea',
            k = '',
            l = '';
        c();
        $('#comment-form').submit(function() {
            $.ajax({
                url: $(this).attr('action'),
                type: 'post',
                data: $(this).serializeArray(),
                error: function() {
                    alert("提交失败,请检查网络并重试或者联系管理员。");
                    return false
                },
                success: function(d) {
                    if (!$(g, d).length) {
                        alert("您输入的内容不符合规则或者回复太频繁,请修改内容或者稍等片刻。");
                        return false
                    } else {
                        k = $(g, d).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function(a, b) {
                            return a - b
                        }).pop();
                        if ($('.page-navigator .prev').length && l == "") {
                            k = ''
                        }
                        if (l) {
                            d = $('#li-comment-' + k, d).hide();
                            if ($('#' + l).find(".comment-children").length <= 0) {
                                $('#' + l).append("<div class='comment-children'><ol class='comment-list'><\/ol><\/div>")
                            }
                            if (k) $('#' + l + " .comment-children .comment-list").prepend(d);
                            l = ''
                        } else {
                            d = $('#li-comment-' + k, d).hide();
                            if (!$(g).length) $('#comments').prepend(
                                "<h3>已有 <span class='comment-num'>0<\/span> 条评论<\/h3><ol class='comment-list'><\/ol>");
                            $(g).prepend(d)
                        }
                        $('#li-comment-' + k).fadeIn();
                        var f;
                        $(h).length ? (f = parseInt($(h).text().match(/\d+/)), $(h).html($(h).html().replace(f, f + 1))) : 0;
                        TypechoComment.cancelReply();
                        $(j).val('');
                        $(i + ',' + wi + ', #cancel-comment-reply-link').unbind('click');
                        c();
                        if (k) {
                            $body.animate({
                                scrollTop: $('#li-comment-' + k).offset().top - 50
                            }, 300)
                        } else {
                            $body.animate({
                                scrollTop: $('#comments').offset().top - 50
                            }, 300)
                        }
                    }
                }
            });
            return false
        });
    
        function c() {
            $(i + ',' + wi).click(function() {
                l = $(this).parent().parent().parent().attr("id")
            });
            $('#cancel-comment-reply-link').click(function() {
                l = ''
            })
        }
    };
ac();

以上源码保存为 ajax.js 文件,并上传到主题文件根目录。

<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="<?php $this->options->themeUrl('ajax.js'); ?>"></script>

以上代码添加到 header.php 文件里</head>代码之前。

原主题已经集成了 ajax 评论,我只是把它提取出来重新封装成 js 直接调用而已,理论上无需适配即可开箱即用。

主题作者:https://github.com/jielive/initial