4.0版本全局正确渲染数学公式
这一波动刀子比较多,但是可以一步到位解决全站的数学公式显示问题。全站,任何一个页面都可以。
原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的压缩包。其余文件修改的,照样子修改即可。
也希望官方可以考虑合并这次修改。
暂无评论