Pjax支持

Author: ekworpCreated Mar 27, 2020Updated Mar 23, 2026
Labels:sparkles: enhancement:sos: help wanted

script.ejs页头加入

<% if(theme.pjax.enable){ %>
  <%- js_ex(theme.static_prefix.pjax, 'pjax.min.js') %>
  <%- js_ex(theme.static_prefix.nprocess, 'nprogress.min.js') %>
  <%- css_ex(theme.static_prefix.nprocess, 'nprogress.min.css') %>
<% } %>

static_prefix.yml文件最后加两行

pjax: https://cdn.jsdelivr.net/npm/pjax@latest/
nprocess: https://cdn.bootcss.com/nprogress/0.2.0/

主题配置文件加入,true或是false反正得有

pjax:
	enable: true

百度统计啥的 http://www.qingzz.cn/sort/ajax 这里有点解决方法 next主题是加个script加个pjax参解决的

<% if(theme.web_analytics.baidu) { %>
  <!-- Baidu Analytics -->
    <script defer pjax>

大家也可以找点别的方法 还有我用的daovoice 评论系统大家可以想想办法,我暂时不会用 下面是main.js加入的内容 我看main.js不错,在/source/js里面,然后自己再找点别的资料优化下 在最上面加入

pjax_init();
//初始化pjax
function pjax_init(){
    document.addEventListener('pjax:send', function() {
        NProgress.start();
    });
    document.addEventListener('pjax:complete', function() {
        NProgress.done();
    });
    document.addEventListener('pjax:error', function() {
    });
    document.addEventListener('pjax:success', function() {
    	//需要重建的js 从next主题复制来的 
	    document.querySelectorAll('script[pjax], #pjax script').forEach(element => {
	    var code = element.text || element.textContent || element.innerHTML || '';
	    var parent = element.parentNode;
	    parent.removeChild(element);
	    var script = document.createElement('script');
	    if (element.id) {
	      script.id = element.id;
	    }
	    if (element.className) {
	      script.className = element.className;
	    }
	    if (element.type) {
	      script.type = element.type;
	    }
	    if (element.src) {
	      script.src = element.src;
	      // Force synchronous loading of peripheral JS.
	      script.async = false;
	    }
	    if (element.getAttribute('pjax') !== null) {
	      script.setAttribute('pjax', '');
	    }
	    if (code !== '') {
	      script.appendChild(document.createTextNode(code));
	    }
	    parent.appendChild(script);
	  });
    });
	document.addEventListener('DOMContentLoaded', function() {
        var pjax = new Pjax({
    	elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"])',
    	selectors: ["#pjax-container","title",".view"],
    	//三个分别是容器 标题 头图
		debug: true
	});
	pjax._handleResponse = pjax.handleResponse;
	pjax.handleResponse = function(responseText, request, href, options) {
		//就简单过滤一下就行
		if((href.indexOf("%E6%9C%88")!=-1)||(href.indexOf("/live")!=-1)&&!init1){
				init1=true;//标记已经被加载
				Promise.all([
					//引入外部js 从fghrsh的live2d复制来的
					loadExternalResource("https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css", "css"),
					loadExternalResource("/ytyz2020/js/hls.min.js", "js"),
					loadExternalResource("https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js", "js")
				]).then(() => {
					pjax._handleResponse(responseText, request, href, options);
				});
				//这里可以引入一些可以后加载的
				loadExternalResource("//cdn.jsdelivr.net/npm/[email protected]/dist/realtime-browser.min.js", "js");
				loadExternalResource("//cdn.jsdelivr.net/npm/[email protected]/dist/av-min.js", "js");
		}else{
	 	   pjax._handleResponse(responseText, request, href, options);
		}
		//有播放器需要销毁 可以自己写点别的需要处理的东西
		if(typeof dplayers != "undefined") 
    		for(i in dplayers)
				dplayers[i].destroy();
	}
});
}
var init1=false;//js标记防止重复加载以此类推
/*
没有加载live2d的去掉注释
// 封装异步加载资源的方法
function loadExternalResource(url, type) {
	return new Promise((resolve, reject) => {
		let tag;
		if (type === "css") {
			tag = document.createElement("link");
			tag.rel = "stylesheet";
			tag.href = url;
		} else if (type === "js") {
			tag = document.createElement("script");
			tag.src = url;
		}
		if (tag) {
			tag.onload = () => resolve(url);
			tag.onerror = () => reject(url);
			document.head.appendChild(tag);
		}
	});
}

总之 自由发挥吧,不要干复制,看看代码

Source: fluid-dev/hexo-theme-fluid