标签 typecho pjax 下的文章

「问题」Typecho JS 实现全站 Pjax以及 AJAX 翻页

全站 Pjax:

$(document).pjax('a:not(a[target="_blank"], a[no-pjax])', {
        container: '#main',
        fragment: '#main',
        timeout: 10000
    }).on('submit', 'form[id=search], form[id=comment-form]', function(event) {
        $.pjax.submit(event, {
            container: '#main',
            fragment: '#main',
            timeout: 10000
        })
    }).on('pjax:send', function() {
        //预加载
    
    }).on('pjax:start', function() {
        //开始
    
    }).on('pjax:complete', function() {
        //回调函数
    
    }).on('pjax:end', function() {
        //结束
    ac();
    ajaxnext();
        if (typeof _hmt !== 'undefined') {
            _hmt.push(['_trackPageview', location.pathname + location.search])
        };
        if (typeof ga !== 'undefined') {
            ga('send', 'pageview', location.pathname + location.search)
        }
    
    });

AJAX 翻页:

var isbool = true;
function ajaxnext() {
    $('.ajaxload li[class!="next"]').remove();
    $(".ajaxload .next a").text("加载更多文章");
    $('.ajaxload .next a').click(function() {
        if (isbool) {
            ajaxpost();
        }
        return false
    })
}
ajaxnext();
function ajaxpost() {
    var a = '.ajaxload .next a',
        b = $(a).attr("href");
    $(a).addClass('loading').text("正在加载");
    if (b) {
        $.ajax({
            url: b,
            error: function() {
                alert('请求失败,请检查网络并重试或者联系管理员');
                $(a).removeAttr("class").text("查看更多");
                return false
            },
            success: function(d) {
                var c = $(d).find("#main .post"),
                    e = $(d).find(a).attr("href");
                if (c) {
                    $('.ajaxload').before(c)
                };
                $(a).removeAttr("class");
                if (e) {
                    $(a).text("查看更多").attr("href", e)
                } else {
                    $(a).remove();
                    $('.ajaxload .next').text('没有更多文章了')
                }
                if ($('.protected', d).length) {
                    $('.protected *').unbind();
                    ap()
                }
                isbool = true;
                return false
            }
        })
    }
} 

将以上需要的功能封装成 js 文件上传到网站主题根目录,ajax 翻页需要保存为 ajax_fy.js,再配合以下 js 调用代码即可实现。

调用方式:

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

将以上代码放置 header.php 文件</body>标签之前即可。

Ajax 页脚翻页还需要修改 index.php 相关代码;

定位到<?php $this->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>,然后替换成以下代码即可;

<?php $this->pageNav('&laquo; 前一页', '后一页 &raquo;', 1, '...',array('wrapClass' => 'page-navigator ajaxload')); ?>

pjax 全站刷新 bug 提示:

评论点击提交之后直接消失,再次刷新也是一样。

在网上找了一些资料都是修改源码,我觉得有点麻烦就放弃了,修复日期待定。

或者您有更好更快的解决方法,留言即可。