hexo-theme-fluid
hexo-theme-fluid copied to clipboard
fluid-dev
Pjax支持
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);
}
});
}
总之 自由发挥吧，不要干复制，看看代码
在elements: 'a:not([target="_blank"])',中添加data-fancybox可以解决点击大图后重新加载的问题
elements: 'a:not([target="_blank"]),data-fancybox',
在
elements: 'a:not([target="_blank"])',中添加data-fancybox可以解决点击大图后重新加载的问题elements: 'a:not([target="_blank"]),data-fancybox',
我没有复现出重新加载，另外是不是应该为 :not([data-fancybox])
https://nalocal.github.io
自個兒搗鼓了下，算是搞出了pjax，打字效果啦Markdown之類的都還行。 缺點是目前變得不支援懶載入，左右側欄的內容還需要修復一下 猜測網頁追蹤也會有點問題，這部分還要測試
p.s.events不知道怎麼整才可以每次重載
20210929更 懶加載跟目錄與其他小功能大致修復 不過做為主體的Fluid物件無法重載是硬傷，許多功能必須在pjax底下實現重載 如果要實現pjax，其結果會有點接近於客製
因為自己也是初學，老實說不確定思路正不正確，期待往後有大佬指點了
20220119更 https://nalocal.github.io/2021/11/16/fluidThemeShare/
因為想嘗試其他theme，將fluid的配置分享出來 文章發佈幾個月，目前已有網友自行移植成功，歡迎需要pjax的使用者取用
致所有关注该 issue 的朋友：
关于为什么都 2022 年了 Fluid 依然没有加入 pjax 功能，原因是当初在我以为完成了 pjax 时候，发现我还是太年轻，并没有达到 pjax 真正用途，Fluid 不同页面的结构是有区别的，比如文章页面有侧边栏是单独一套结构，与其他页面对比会发现各种宽度的适配是有区别的，导致无法满足 pjax 局部加载的需求，另外也会导致类似 https://github.com/fluid-dev/hexo-theme-fluid/issues/442 这种问题。
我也看到有几位朋友试图去改造，但很遗憾这些改法都只是去适配现有的 js，让一些 js 比如音乐播放器在翻页时不会被刷新，但这并不是我想要的效果，这样为了某个小功能去引入另一个大功能的堆砌方式，违背了 Fluid “简洁”的设计初衷（事实上 Fluid 对比最初的版本反而是“瘦身”的，舍弃了很多臃肿的引入），这也是当初我放弃 Pjax 的原因。
想满足必须把所有页面重新设计并重写一次，然后再去加入 Pjax，改完还会产生一连串的适配 BUG。这个大工程就目前我一个人维护的情况下，我的精力和动力都是无法满足的（为了维护 Fluid 我的博客都已经停更），因此该 issue 还会继续处于无限搁置状态，希望各位理解。
如有需求可尝试通过上面朋友发的方法去魔改，下个版本我也会放出一些功能让大家可以更“无侵入式”完成自定义修改。
https://jin-yuhan.github.io/ 这个博客搞定了，但是作者没出教程
我是这个博客的作者。我的实现方法就是统一 page 和 post 的页面布局，然后再重写 Fluid 的 js 代码。由于工作量有点大，不方便出教程。
