typecho开启pjax,ajax,无刷新

一、引入jquery和pjax

  检查你的网站是否引入1.7.0版本以上的jquery.js,若是没有请全局引入javascript

  https://files.cnblogs.com/files/fan-bk/pjax.js      pjax文件下载地址  pjax  body  代码结束前引入pjax.js
php

 

二、添加pjax容器css

  将body的id设置为 contenthtml

 

三、插入pjax代码java

  在主题footer文件 body结束标签前面 添加代码;jquery

<div style="display:none; z-index:9999; background-color: #ea4961; position:fixed; top:0px; width:100%; height:100vh;" class="pjax_loading">
</div>
<script type="text/javascript" src="<?php $this->options->themeUrl('js/pjax.js'); ?>"></script> <!--引入pjax-->
<script>
$(document).pjax('a', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax,#content 表示执行pjax后会发生变化的id,改为你主题的内容主体id或class。timeout是pjax响应时间限制,若是在设定时间内未响应就执行页面转跳,可自由设置;
//$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示全部的提交表单都会执行pjax,好比搜索和提交评论,可自行修改改为你想要执行pjax的form id或class。#content 同上改为你主题的内容主体id或class;
$(document).on('pjax:send', function() { //pjax连接点击后显示加载动画;
    //$(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax连接加载完成后隐藏加载动画;
    //$(".pjax_loading").css("display", "none");
    pajx_loadDuodsuo();//解决多说评论;
});
function pajx_loadDuodsuo(){
    var dus=$(".ds-thread");
    if($(dus).length==1){
        var el = document.createElement('div');
        el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
        el.setAttribute('data-url',$(dus).attr("data-url"));
        DUOSHUO.EmbedThread(el);
        $(dus).html(el);
    }
}
</script>
相关文章
相关标签/搜索