在Hugo PaperMod主题中加入数学支持的最简方式

阡陌

目的：在不修改主题的情况下支持数学公式。

在当前的写作仓库内创建 layouts/partials/math.html 文件，写入以下内容：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.css" integrity="sha384-bYdxxUwYipFNohQlHt0bjN/LCpueqWz13HufFEV1SUatKs1cm4L6fFgCi1jT643X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.js" integrity="sha384-Qsn9KnoKISj6dI8g7p1HBlNpVx0I8p1SvlwOldgi3IorMle61nQy4zEahWYtljaz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<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}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

其中的 display 属性指是否显示为块级元素， $ ... $ 用于行内公式，所以为 false。

然后创建 layouts/partials/extend_head.html 文件，写入以下内容：

{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

这样可以通过在文章 front matter 中设置 math 属性 true/false 来按需加载数学公式资源。

---
title: 文章标题
date: 
tags: 
math: true
---

在使用某些主题时，比如 PaperMod，会自动从站点的 layouts/partials/extend_head.html 调用局部模板。