Pjax支持 - Githubissues

ekworp commented 4 years ago

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/leancloud-realtime@5.0.0-rc.0/dist/realtime-browser.min.js", "js");
                loadExternalResource("//cdn.jsdelivr.net/npm/leancloud-storage@4.3.1/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);
        }
    });
}

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

0x2E commented 4 years ago

感谢建议，这个留着 v1 重构后再讨论吧。

ekworp commented 4 years ago

适配还有点困难呐先搁着吧

CRRRRRAAAZY commented 3 years ago

不行啊切换不了页面

zkqiang commented 3 years ago

~好消息，dev分支已经更新了 pjax，欢迎体验测试，以便能更快地上线到正式版~

onuns commented 3 years ago

在elements: 'a:not([target="_blank"])',中添加data-fancybox可以解决点击大图后重新加载的问题 elements: 'a:not([target="_blank"]),data-fancybox',

zkqiang commented 3 years ago

在elements: 'a:not([target="_blank"])',中添加data-fancybox可以解决点击大图后重新加载的问题 elements: 'a:not([target="_blank"]),data-fancybox',

我没有复现出重新加载，另外是不是应该为 :not([data-fancybox])

zkqiang commented 3 years ago

很遗憾，pjax并不成功

归其原因，是由于目前的页面代码结构，不适合 pjax 在切换界面做到局部加载

已经将代码回退了，下次有空再搞

Hime-Hina commented 3 years ago

啥时候能成功呀. 成功我就准备换主题了. 👀

onuns commented 3 years ago

啥时候能成功呀. 成功我就准备换主题了. 👀

看看我的https://aolog.cn

whymesay commented 3 years ago

坐等

zzzzz167 commented 3 years ago

坐等，成功了我播放器就能人性一点了

jamexhuang commented 3 years ago

坐等大佬✌🏻

A1ca7raz commented 3 years ago

蹲一个

Atonioy commented 3 years ago

等波适配

Mr-Smilin commented 2 years ago

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的使用者取用

zkqiang commented 2 years ago

致所有关注该 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 还会继续处于无限搁置状态，希望各位理解。

如有需求可尝试通过上面朋友发的方法去魔改，下个版本我也会放出一些功能让大家可以更“无侵入式”完成自定义修改。