Hexo主题更换与魔改·肆·数学公式的渲染

二月 4, 2023

TOC

Hexo主题系列之四：关于如何在主题里渲染LaTex数学公式。

如果拿着这个问题去问度娘，答案多半会告诉你去下某个插件，比如hexo-math，或者hexo-renderer-mathjax，然后在被用烂了的Next之类的主题配置里开启一下true就好。这样的回答对真正需要自己配置数学渲染功能的人毫无意义——只改改config文件当然对自己的写的主题没用。

所以，在经历了各种坑后，我终于发现，其实根本不需要下载什么插件，人家Mathjax官网上已经把教程写得差不多了，只用复制粘贴就好，再加上一小段代码即可。

什么？你说Mathjax官网打不开？奇怪，可能是只有具有魔法的人才能打开吧。

官网的例子：

Here is a complete sample page containing TeX mathematics (also available in the test/sample-tex.html file):

<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
  src="https://example.com/mathjax/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>

于是我们可以写出我们的代码，在footer.ejs中加入：（不一定非得footer.ejs，确保页面加载得到就行，只是我方便管理）

<%if (page.mathjax) {%>
  <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
          tex2jax: {
              inlineMath: [ ["$","$"], ["\\(","\\)"] ],
              skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
              processEscapes: true
          }
      });
      MathJax.Hub.Queue(function() {
          var all = MathJax.Hub.getAllJax();
          for (var i = 0; i < all.length; ++i)
              all[i].SourceElement().parentNode.className += ' has-jax';
      });
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  <%}%>

其中的page.mathjax是指的在文章的markdown开头中加入mathjax: true，整个数学渲染才会启动，这样就可以有效防止开什么界面都加载数学渲染，从而导致打开网页速度很慢的问题。（毕竟cdn是外网，国内打开真的慢）

其实还有在本地装载Mathjax的方法，应该可以有效防止渲染很久…不过搞起来太麻烦了，路径什么的还得自己手动调，版本每更一次就得改很多，太麻烦。

所以最后我选了一个算是折中的办法——当有数学渲染的时候，在文章开头提示「数学渲染需要一些时间，请耐心等待」：

1 2	<%if (page.mathjax) {%> <br><br><p><code>MathJax Will Takes Few Minutes to Load</code></p>

最后提一下，很多人用Hexo-renderer-mathjax的时候会发现，它基本会渲染失败，打开网页「检查」会发现，它内置的那个cdn地址已经停用了，所以这时候就需要手动打开node_modules下的Hexo-renderer-mathjax文件夹，把其中那个HTML文件中的网址替换为现在的https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML，也就是上面代码里那个。

别问我为啥这么清楚…

分类: 笔记
标签: HTML, 学习