Typecho全站pjax思路

admin

其中基本都要修改Typecho的内核代码，主要是header中的评论js输出，或者是用修改版pjax.js。

引入js文件

1. <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
   
2. <script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>

复制代码

pjax初始化

1. function pjaxInit() {
   
2.     var pjaxContainer = '#pjax-container',
   
3.         pjaxSearchForm = '#search-form',
   
4.         pjaxTimeout = 30000;
   
5. 
   
6.     $(document).pjax('a[target!=_blank]', pjaxContainer, {
   
7.         fragment: pjaxContainer,
   
8.         timeout: pjaxTimeout
   
9.     });
   
10.     $(document).on('submit', 'pjaxSearchForm', function(event) {
    
11.         $.pjax.submit(event, pjaxContainer, {
    
12.             fragment: pjaxContainer,
    
13.             timeout: pjaxTimeout
    
14.         });
    
15.     });
    
16.     $(document).on('pjax:send', function() {
    
17.         //载入动画
    
18.     });
    
19.     $(document).on('pjax:complete', function() {
    
20.         //需要重载的插件
    
21.         //载入动画结束
    
22.         ajaxCommentRewrite();
    
23.     });
    
24. }

复制代码

干掉 TypechoComment
在 bindCommentReplyButton () 方法中加入

1. ajaxCommentRewrite();

复制代码

ajaxCommentRewrite()方法的具体代码

1. $(selector.commentReplyButton + ' a').prop('onclick', null).attr('href', 'javascript:;');
   
2. $(selector.commentCancelReplyLink).prop('onclick', null).attr('href', 'javascript:;');

复制代码

原 Ajax 评论代码中需要修改的地方

1. TypechoComment.cancelReply(); 替换为： cancelReply();

复制代码

ajaxComments()添加

1. removeTextareaEvent();

复制代码

cancelReply()方法的具体代码

1. function cancelReply() {
   
2.     var response = $(selector.respondContainer)[0],
   
3.         holder = $('#comment-form-place-holder')[0],
   
4.         input = $('#comment-parent')[0];
   
5.     if (null != input) {
   
6.         input.parentNode.removeChild(input);
   
7.     }
   
8.     if (null == holder) {
   
9.         return true;
   
10.     }
    
11.     $(selector.commentCancelReplyLink)[0].style.display = 'none';
    
12.     holder.parentNode.insertBefore(response, holder);
    
13.     return false;
    
14. }

复制代码

removeTextarea()方法的具体代码

1. function removeTextareaEvent() {
   
2.     $(document).on('click', selector.submitTextarea, function() {
   
3.         $(selector.submitForm + ' input[name="_"]:not(#comment_)').remove();
   
4.     });
   
5. }

复制代码

使用jQuery重新绑定回复按钮和取消回复按钮事件

1. $(document).on('click', selector.commentReplyButton, function() {
   
2.      var cid = $(this).attr('data-cid'),
   
3.          coid = $(this).attr('data-coid');
   
4.      var comment = $('#' + cid)[0],
   
5.          parent = comment.parentNode,
   
6.          response = $(selector.respondContainer)[0],
   
7.          input = $('#comment-parent')[0],
   
8.          form = 'form' == response.tagName ? response : response.getElementsByTagName('form')[0],
   
9.          textarea = response.getElementsByTagName('textarea')[0];
   
10.      if (null == input) {
    
11.          input = createElement('input', {
    
12.              'type': 'hidden',
    
13.              'name': 'parent',
    
14.              'id': 'comment-parent'
    
15.          });
    
16.          form.appendChild(input);
    
17.      }
    
18.      input.setAttribute('value', coid);
    
19.      if (null == document.getElementById('comment-form-place-holder')) {
    
20.          var holder = createElement('div', {
    
21.              'id': 'comment-form-place-holder'
    
22.          });
    
23.          response.parentNode.insertBefore(holder, response);
    
24.      }
    
25.      comment.appendChild(response);
    
26.      $(selector.commentCancelReplyLink)[0].style.display = '';
    
27.      if (null != textarea && 'text' == textarea.name) {
    
28.          textarea.focus();
    
29.      }
    
30.      return false;
    
31. });
    
32. 
    
33. $(document).on('click', selector.commentCancelReplyLink, function() {
    
34.     cancelReply();
    
35. });

复制代码

createElement()方法具体代码

1. function createElement(tag, attr) {
   
2.     var el = document.createElement(tag);
   
3.     for (var key in attr) {
   
4.         el.setAttribute(key, attr[key]);
   
5.     }
   
6.     return el;
   
7. }

复制代码

修改 comments.php
form 中添加 (注意把 wrap 修改为你对应的 pjaxContainer)

1. <input name="_" type="hidden" id="comment_" value="<?php echo Helper::security()->getToken(str_replace(array('?_pjax=%23wrap', '&_pjax=%23wrap'), '', Typecho_Request::getInstance()->getRequestUrl()));?>"/>

复制代码

回复楼层按钮改为

1. <span class="reply" data-cid="comment-<?php $comments->coid();?>" data-coid="<?php $comments->coid();?>">

复制代码

别忘了修改公共模板部分，通过添加 is_pjax()方法来判断

1. function is_pjax()
   
2. {
   
3.     return (isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true');
   
4. }

复制代码

至此Ajax评论的问题基本解决
重载统计代码
在pjax:success中添加

1. if (window.ga) {
   
2.     var location = window.location.pathname + window.location.search;
   
3.     ga('send', 'pageview', {
   
4.         'page': location,
   
5.         'title': document.title
   
6.     });
   
7. }

复制代码

同时移除原来的：ga('send', 'pageview');
原文地址：https://kotori.love/archives/typecho-pjax