解决使用pjax导致mathjax需要重新刷新页面渲染的问题

发布于 2021-11-18  12 次阅读


前言

因为pjax一般来说是通过服务端获取html的dom并渲染,而js并不会重新加载,这导致一些根据dom元素加载的js有问题,比如mathjax,lightjs等,都是根据内容的形式来渲染,一般会存在一个init()函数,但是pjax请求不会重新执行init(),从而导致js失效 解决办法

所以解决思路就是再重新执行回调函数进行渲染

参考

Pjax官方链接

pjax加载使js失效原因及解决

解决

function init() {
    $.getScript("https://cdnjs.loli.net/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML",
    function() {
        var math = document.getElementsByClassName("entry-content")[0];
        MathJax.Hub.Config({
            showProcessingMessages: false,//关闭js加载过程信息
            messageStyle: "none", //不显示信息
            extensions: ["tex2jax.js"],
            jax: ["input/TeX", "output/HTML-CSS"],
            tex2jax: {
                inlineMath: [
                    ["$", "$"]
                ], //行内公式选择$
                displayMath: [
                    ["$", "$"]
                ], //段内公式选择$
                skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'] //避开某些标签
            },
            "HTML-CSS": {
                availableFonts: ["STIX", "TeX"], //可选字体
                showMathMenu: false //关闭右击菜单显示
            }    });
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, math]) }) } ... $(document).on('pjax:complete', function() {    init(); })
};
$(document).on('pjax:complete', function() {
    init();
})

但是有个问题是如何把这个js脚本加进去,开始时,我在footer.php看到这么一行注释,所以理所当然的认为就直接加在后面即可

image-20211118011031231

但是奇怪的是,加入的脚本根本没执行,上网搜索如何添加自定义脚本,才了解正常应该是自己在js文件夹里建一个js文件,然后在function.php调用。这样需要把路径写明,还有一种简单的方法,使用Custom Css & js这个插件。

image-20211118011618970

使用该插件时候,需要将markdown书写博客(WP Githuber MD)的插件关闭,否则会造成冲突。

image-20211118011937714

注意不要使用$而使用jQuery替代,原因见其他博文

结语

本质上两种方式一致,插件同样是创建一个js文件然后php中引用,但是省去我们写引用的部分


随心所至