听书人

在鸡零狗碎操蛋的生活中找到闪闪发光的太阳

拥有pjax功能

听书人 · 沦陷于 · 2021/10/18 · 阅:38

扒出来的pjax某主题扒出来的,详细教程如下。
先全部引入

<script type='text/javascript'src='https://cdn.jsdelivr.net/gh/wanfengba/tuping/pjax/nprogress.js'></script>
<script type='text/javascript'src='https://cdn.jsdelivr.net/gh/wanfengba/tuping/pjax/pjax.min.js'></script>
<link href="https://cdn.jsdelivr.net/gh/wanfengba/tuping/pjax/pjax.css" rel="stylesheet" type="text/css" />

在底部添加
这个是pjax内容

<script>
var pjax = new Pjax({
    elements: 'a[href]:not([href^="#"])',
    cacheBust: false,
    debug: false,
    selectors: ['title', '.pjax'
    ]
});
document.addEventListener('pjax:send', function () {
    NProgress.start();
});
document.addEventListener('pjax:complete', function () {
    NProgress.done();
});
</script>

这个是评论

<script>
// 依赖jquery,请自行加载
$(function(){
    // 监听评论表单提交
    $('#comment-form').submit(function(){
        var form = $(this), params = form.serialize();
        // 添加functions.php中定义的判断参数
        params += '&themeAction=comment';
        
        // 解析新评论并附加到评论列表
        var appendComment = function(comment){
            // 评论列表
            var el = $('#comments > .comment-list');
            if(0 != comment.parent){
                // 子评论则重新定位评论列表
                var el = $('#comment-'+comment.parent);
                // 父评论不存在子评论时
                if(el.find('.comment-children').length < 1){
                    $('<div class="comment-children"><ol class="comment-list"></ol></div>').appendTo(el);
                }else if(el.find('.comment-children > .comment-list').length <1){
                    $('<ol class="comment-list"></ol>').appendTo(el.find('.comment-children'));
                }
                el = $('#comment-'+comment.parent).find('.comment-children').find('.comment-list');
            }
            if(0 == el.length){
                $('<ol class="comment-list"></ol>').appendTo($('#comments'));
                el = $('#comments > .comment-list');
            }
                        // 评论html模板,根据具体主题定制
            var html = '<li id="comment-{coid}" class="comment-body comment-ajax"><div class="comment-author"><span><img class="avatar" src="{avatar}" alt="{author}" width="32" height="32"></span><cite class="fn">{author}</cite></div><div class="comment-meta"><a href="{permalink}"><time>{datetime}</time></a></div><div class="comment-content">{content}</div></li>';
            $.each(comment,function(k,v){
                regExp = new RegExp('{'+k+'}', 'g');
                html = html.replace(regExp, v);
            });
            $(html).appendTo(el);
        }
        // ajax提交评论
        $.ajax({
            url: '<?php $this->permalink();?>',
            type: 'POST',
            data: params,
            dataType: 'json',
            beforeSend: function() { form.find('.submit').addClass('loading').html('<i class="icon icon-loading icon-pulse"></i> 提交中...').attr('disabled','disabled');},
            complete: function() { form.find('.submit').removeClass('loading').html('提交评论').removeAttr('disabled');},
            success: function(result){
                if(1 == result.status){
                    // 新评论附加到评论列表
                    appendComment(result.comment);
                    form.find('textarea').val('');
                }else{
                    // 提醒错误消息
                    alert(undefined === result.msg ? '<?php _e('评论出错!');?>' : result.msg);
                }
            },
            error:function(xhr, ajaxOptions, thrownError){
                alert('评论失败,请重试');
            }
        });
        return false;
    });
    </script>

在评论文件的要发表内容前添加

  <input name="_" type="hidden" id="comment_" value="<?php echo Helper::security()->getToken(str_replace(array('?_pjax=%23pjax-container', '&_pjax=%23pjax-container'), '', Typecho_Request::getInstance()->getRequestUrl()));?>"/>

最后再添加

 <div class="pjax"><!--要刷新布局--></div>

要刷新的内容全部放进去

最后更新:2021-10-19
pjax
文章分享
折叠评论
评论 暂无评论