4.0版本全局正确渲染数学公式

林威
林威 这家伙很懒,就是不设置简介

1 人点赞了该文章 · 945 浏览

这一波动刀子比较多,但是可以一步到位解决全站的数学公式显示问题。全站,任何一个页面都可以。

原4.0版只能是问题和文章显示公式,但评论的公式是不渲染,只显示源代码的。

而且,由于配置方法版本过低,即用了1.0版的配置方法配置3.2.1版的mathjax,导致渲染的效果很差。而且没有禁用公式的右键菜单,如果乱改右键菜单,会导致该用户在浏览器上永远无法渲染出公式,除非清cookie。

以上,在此次修改一并搞定。

实操过程:

1、修改index文件

public\templates\default\html\index.php

在1行

{extend name="$theme_block" /}

的下面,增加

{block name="meta_script"}
{if $theme_config['common']['enable_mathjax']=='Y'}
<script src="{$cdnUrl}/static/common/js/load-mathjax.js" async></script>
{/if}
{/block}


2、修改detail文件

public\templates\default\html\article\detail.php(2):

public\templates\default\html\question\detail.php(2):

public\templates\default\mobile\article\detail.php(2): 

public\templates\default\mobile\question\detail.php(2):

以上四个文件,统一把顶部第2行开始的代码,替换 {block name="meta_script"} 到{/block}的部分

特别说明一下,MathJax.Hub.Config是1.0版MathJax的配置方法,现在已经完全无效。

{block name="meta_script"}
……
{/block}

替换为:

{block name="meta_script"}
{if $theme_config['common']['enable_mathjax']=='Y'}
<script src="{$cdnUrl}/static/common/js/load-mathjax.js" async></script>
{/if}
{/block}


3、增加load-mathjax.js文件

增加一个文件  /static/common/js/load-mathjax.js 内容是:


window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
},
options: {
enableMenu: false
}
};

(function () {
var script = document.createElement('script');
script.src = 'https://cdn.bootcss.com/mathjax/3.2.2/es5/tex-mml-chtml.js';
script.async = true;
document.head.appendChild(script);
})();

这里借用了bootcss的js源,国内访问效果很快,但国外访问不了。

如果想要国内外都有较好的访问速度,可以取折中。用unpkg的源代替bootcss

https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js


最后把网站Ctrl+Shift+R 大刷新一次,就可以看到效果了。文初说的弊端全没了。


以上,修改的文件我就不放了。就放一个新增的文件load-mathjax.js的压缩包。其余文件修改的,照样子修改即可。

也希望官方可以考虑合并这次修改。



附件列表

5400d9e2a0aa26b178b3edbbed6ee3ff.zip

0B

下载

发布于 2022-06-10 02:15

免责声明:

本文由 林威 原创发布于 WeCenter ,著作权归作者所有。

登录一下,更多精彩内容等你发现,贡献精彩回答,参与评论互动

登录! 还没有账号?去注册

暂无评论