Ghost主题制作中使用pjax的方法及经验

pjax主要是实现部分替换,实现无闪烁切换页面,详细介绍自行百度

Ghost的切换是硬生生的跳转,没有hash,为了更好的用户体验,pjax是不二之选

  1. 获取最新的pjax

    • npm安装

        $ npm install pjax
      
    • bower安装

        $ bower install pjax
      
  2. 把pjax复制到主题资源中

    比如assets/js/pjax.js

  3. 在模板中引入pjax.js文件

     <script type="text/javascript" src="{{asset "js/pjax.min.js"}}"></script>
    
  4. 找到你想使用pjax替换的容器,有人喜欢.site-wrapper,有人把图片放在外部所以喜欢更外部的容器

    添加以下js代码,请留意注释

     //Pjax - start
     $(document).on('pjax:success', function() {
         var a = document.createElement('a');
         a.href = document.URL;
         var pathname = a.pathname
             .split('/')
             .filter(function(value){return !!value})
             .shift();
         switch(pathname) {
             case 'author':
             case 'tag':
             case 'page':
             case undefined:
                 //无论是author,tag,page,都把body的模板主class替换为home-template
                 //(若有需要,请自行在上方添加anthor,tag,page的单独处理)
                 $('body').removeClass('post-template');
                 $('body').addClass('home-template');
                 break;
             default:
                 //如果是post,即文章详情页,则把body的模板主class替换为post-template
                 $('body').removeClass('home-template');
                 $('body').addClass('post-template');
         }
         //gxxPostInit()的解释请看下一步
         gxxPostInit();
     });
     new Pjax({
         //监听有href属性且href不以#开头的a标签
         elements: 'a[href]:not([href^="#"])',
         //替换的容器
         selectors: [
             //页面标题
             'title',
             //gxx_pjax是我定义来进行pjax替换的容器class
             '.gxx_pjax'
         ]
     });
     //Pjax - end
    
  5. 针对highlightjs和多说或Disqus评论系统的特殊处理

    由于hightlightjs和多说或Disqus评论读取默认是在onload时执行的,故在pjax替换进来的code块及评论模块是不会被初始化处理的

    上一步代码中的gxxPostInit()将在每次pjax替换完成后调用,就等于手动执行一次初始化

    以下是本主题的gxxPostInit()代码:

     //Init when onload or pjax success - start
     function gxxPostInit() {
         if($('#disqus_thread').length) {
             //更新评论对应唯一信息
             var disqus_config = function () {
                 this.page.url = $('#GxxPostUrl').val();  //取得新的url
                 this.page.identifier = $('#GxxPostId').val(); // 取得新的identifier
             }
             if(window.DISQUS) {
                 DISQUS.reset({
                     reload: true
                 });
             } else {
                 var dsq = document.createElement('script');
                 dsq.type = 'text/javascript';
                 dsq.async = true;
                 dsq.src = '//' + gxxconf.disqus_shortname + '.disqus.com/embed.js';
                 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
             }
             //代码高亮
             $('pre code').each(function(i, block) {
                 hljs.highlightBlock(block);
             });
         }
     }
     gxxPostInit();
     //Init when onload or pjax success - end
    

    ==注意:==上面代码里的$('#GxxPostUrl').val()$('#GxxPostId').val()的值需要在post.hbs里面用hidden的方式设置,以下是我的代码(放在评论模块<div id="disqus_thread"></div>前面):

     <input type="hidden" id="GxxPostUrl" value="{{url}}" />
     <input type="hidden" id="GxxPostId" value="ghost-{{id}}" />
     <div id="disqus_thread"></div>
    

参考:http://www.blackglory.me/pjax-solution-of-ghost-theme/

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏