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