Typecho 主题 PJAX 无刷新以及遇到的一些问题

什么是 PJAX
给 Typecho 主题加上 PJAX
解决评论问题
解决插件问题

最近给 Typecho 主题 Daydream 加上了 PJAX 无刷新。本以为加一段代码就好，结果遇到了一大堆问题，无法提交评论、插件无效、数学公式没法渲染……特此记录一下。

什么是 PJAX

pjax = pushState + ajax

对于传统的 Typecho 主题，实际上就是服务端渲染（SSR）的代表，用户每请求一个页面，服务器（php）就渲染好这个页面的内容（包括文章、评论之类的动态内容），渲染好一个静态的 HTML 然后传给浏览器。这样虽然方便，但是不难发现传输数据量其实不小。在加载不同的页面的时候，有不少部分是重复渲染的，比如页面的页眉、页脚，每个页面都是一样的，但是加载每个页面都要重新加载一次。这就会降低访问体验。

而以调用 Restful 接口等方式进行客户端渲染（CSR）的单页应用程序（SPA）则是与之对立的另一个典型。用户第一次访问只加载一个页面框架，其中的 js 代码通过接口向服务器请求数据，然后在客户端进行渲染。进入新的页面链接时只刷新需要更新的部分（一般是通过 DOM 操作）。这样每次只需要修改页面中很少的信息量，可以加快加载的速度。这称为无刷新技术。然而 Typecho 并不是以这种 CSR 的思路构建的。
（我之前开过的一个坑 Vuecho 其实就是这种尝试，这是一个 demo：alpha.skywt.cn）

那么 PJAX 实际上就是以上两者的「折中方案」。通过这段神奇的 js 代码，它可以自己判断哪些部分刷新了，然后在刷新（或者进入新的页面）时通过 DOM 操作更新要更新的部分。虽然后端的实现完全是服务器端渲染，但是前端看起来就好像是客户端渲染一样，实现全站无刷新，可以获得非常迅捷的体验。

给 Typecho 主题加上 PJAX

⚠️ 本文使用的是 jquery-pjax。

这一步其实非常简单（麻烦的在后面），
首先把博客的动态内容（即从一个页面进入另一个页面要更新的内容）用一个 <div> 之类的标签包裹起来，并将 id 设置为 pjax-container。这个容器就叫做 PJAX 容器。
在这个容器外部，是刷新页面不需要更新的部分，如每个页面都一样的页眉、导航栏、页脚。
在这个容器内部，是刷新页面需要重新加载的部分，比如从文章列表进入一篇文章，容器中的内容由「文章列表」改变为「文章内容」。

一般主题的结构包含 header.php、footer.php，只要在 header.php 的末尾加上容器的开放 tag，在 footer.php 的开头加上容器的封闭 tag 即可。最后渲染出来的页面应该像是这样：

<html>
    <head>
        <!-- ... -->
    </head>
    <body>
        <header><!-- 页眉，标题什么的 --></header>
        <nav><!-- 导航栏什么的 --></nav>
        <main id="pjax-container">
            <!-- 网站主体内容，文章列表 / 文章内容 / 评论什么的 -->
        </main>
        <script>
            // 下面要加上的代码
        </script>
        <footer><!-- 页脚什么的 --></footer>
    </body>
</html>

在 footer.php 或者其他地方（PJAX 容器的后面，就是上面这段代码的 <script> 部分）加上这段代码：

$(document).pjax('a[href^="<?php $this->options->siteUrl()?>"]:not(a[target="_blank"])', {
    container: '#pjax-container',
    fragment: '#pjax-container'
});
$(document).on('pjax:send',function() {
    // alert('开始加载');
    // 开始加载时要运行的代码（如显示加载动画）
});
$(document).on('pjax:complete', function() {   
    // alert('加载完成');
    // 加载完成后要运行的代码（如去除加载动画）
});

传入 pjax 函数的第一个参数是 selector，它告诉 PJAX，只对于目标为本站内的且没有设置在新页面打开（target="_blank"）的链接进行无刷新加载，其他链接（如站外链接）则会正常加载。
第二个参数是 container，指定 id 为 pjax-container 的元素作为 PJAX 容器，当然也可以任意修改。可以查阅文档修改更多参数。

on 和 complete 都是 PJAX 事件，文档里也列举了更多事件。可以用这个测试一下 PJAX 开启成功了没有。

经过以上步骤（应该）可以发现页面之间的切换明显变快了。

解决评论问题

启用 PJAX 后，如果从一个页面进入另一个页面（比如从首页进入某个文章页面），提交评论会发现页面刷新了一下（或者 Safari 干脆显示无法加载），没法正常发表评论。必须手动刷新这个页面才能发评论。

这是因为 Typecho 提交评论的 js 脚本放在 <head> 里（F12 可以看到），而当我们刷新页面，<head> 中的脚本并不会更新（因为其在 PJAX 容器之外）。所以只有第一次进入页面可以正常提交评论，进入其他页面后就不行。

解决方法也很简单。在评论区加上这段从 <head> 里 copy 出来的代码：

(function() {
    window.TypechoComment = {
        dom: function(id) {
            return document.getElementById(id);
        },
        create: function(tag, attr) {
            var el = document.createElement(tag);
            for (var key in attr) {
                el.setAttribute(key, attr[key]);
            }
            return el;
        },
        reply: function(cid, coid) {
            var comment = this.dom(cid),
                parent = comment.parentNode,
                response = this.dom('<?php echo $this->respondId; ?>'),
                input = this.dom('comment-parent'),
                form = 'form' == response.tagName ? response : response.getElementsByTagName('form')[0],
                textarea = response.getElementsByTagName('textarea')[0];
            if (null == input) {
                input = this.create('input', {
                    'type': 'hidden',
                    'name': 'parent',
                    'id': 'comment-parent'
                });
                form.appendChild(input);
            }
            input.setAttribute('value', coid);
            if (null == this.dom('comment-form-place-holder')) {
                var holder = this.create('div', {
                    'id': 'comment-form-place-holder'
                });
                response.parentNode.insertBefore(holder, response);
            }
            comment.appendChild(response);
            this.dom('cancel-comment-reply-link').style.display = '';
            if (null != textarea && 'text' == textarea.name) {
                textarea.focus();
            }
            return false;
        },
        cancelReply: function() {
            var response = this.dom('<?php echo $this->respondId; ?>'),
                holder = this.dom('comment-form-place-holder'),
                input = this.dom('comment-parent');
            if (null != input) {
                input.parentNode.removeChild(input);
            }
            if (null == holder) {
                return true;
            }
            this.dom('cancel-comment-reply-link').style.display = 'none';
            holder.parentNode.insertBefore(response, holder);
            return false;
        }
    };
})();

注意其中的 <?php echo $this->respondId; ?>，这就是前文评论失败的原因——每个页面的 respondId 不一样，所以这个是需要刷新的。

除此之外，需要关闭 Typecho 后台的「设置」-「评论」-「评论提交」中取消勾选「开启反垃圾保护」。这个选项实际上是开启反 CSRF 攻击的防护，即每次加载页面服务器会传一个每次不同的随机字符串（在页面里表单最后面一个名为 _ 的 hidden input 元素），提交评论时表单里会带上它，而用 PJAX 的方式去拿这个字符串非常麻烦，索性关闭了。最好加上一些反垃圾评论的插件，因为没有了反 CSRF 防护，可以用脚本轻易多次提交评论。

经过以上的修改，应该可以正常提交评论了。

解决插件问题

KaTeX 数学公式没法渲染（第一次加载能渲染，进入新页面没法渲染），也是和评论类似的问题。渲染 KaTeX 公式的这段 js 代码：

renderMathInElement(
    document.body,
    {
        delimiters: [
            {left: "$$", right: "$$", display: true},
            {left: "$", right: "$", display: false},
        ]
    }
);

放在 PJAX 容器之外，所以只会在最初加载页面的时候执行一次。它涉及到 DOM 操作，我们希望它每次都能执行。解决方法是放在 PJAX 容器内部，或者在 complete 事件中也执行一次。

除此之外，包括 aplayer 插件、fancybox 图片灯箱、代码高亮等等都是类似的问题，只要把 DOM 操作的代码放到 PJAX 容器内部即可。

经过以上的操作，基本上网站的 PJAX 就没问题啦。享受极速的响应吧～

SkyWT

我们的征途是星辰大海

Typecho 主题 PJAX 无刷新以及遇到的一些问题

什么是 PJAX

给 Typecho 主题加上 PJAX

解决评论问题

解决插件问题

添加新评论