最近发现Hugo的katex突然不渲染公式了,在浏览器按F12进入后台后发现是cdn.jsdelivr.net挂了。于是我尝试将katex的js本地化,可参考Hugo的官方文档 以及katex的官方文档。经过一番摸索,最终的操作方法如下:

  1. 将katex的最新js拷贝到assets文件夹
  2. 根据具体的主题修改katex相关文件。我用的是Fuji主题,在根目录layouts/partials/下新建math.html,具体代码如下。如果用的是其它主题,首先需要找出主题内相关katex的渲染代码,然后在根目录下相应的文件夹下创建一个新文件,Hugo会自动执行新文件的代码。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  {{ $style := resources.Get "katex@0.15.6/katex.min.css" | toCSS | minify | fingerprint }}
  {{ $katexjs := resources.Get "katex@0.15.6/katex.min.js" }}
  {{ $autorender := resources.Get "katex@0.15.6/contrib/auto-render.min.js" }}
  <link rel="stylesheet" href="{{ $style.Permalink }}">
  <script defer src="{{ $katexjs.Permalink }}"></script>
  <script defer src="{{ $autorender.Permalink }}"></script>
  <style>
  	.katex-display { overflow: auto hidden }
      .katex-display > .katex > .katex-html > .tag { 
          position: static;
          float: right;
      }
      .katex { font-size: 1em; }
  </style>
  <script>
      document.addEventListener("DOMContentLoaded", function() {
          renderMathInElement(document.body, {
            // customised options
            // • auto-render specific keys, e.g.:
            delimiters: [
                {left: '$$', right: '$$', display: true},
                {left: '$', right: '$', display: false},
                {left: '\\(', right: '\\)', display: false},
                {left: '\\[', right: '\\]', display: true}
            ],
            // • rendering keys, e.g.:
            throwOnError : false
          });
      });
  </script>