请选择 进入手机版 | 继续访问电脑版

 找回密码
 立即注册
搜索
查看: 1145|回复: 0

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

[复制链接]

267

主题

0

回帖

1138

积分

管理员

积分
1138
发表于 2023-12-27 23:11:29 | 显示全部楼层 |阅读模式

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

在当前的写作仓库内创建 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 调用局部模板。


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|棱讯科技 ( 粤ICP备2024228160号-2|粤公网安备44030002003510号 )

GMT+8, 2024-11-3 21:57 , Processed in 0.013416 second(s), 3 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表