在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 调用局部模板。
页:
[1]