Hugo增加mermaid支持

techzealot

2023-03-31

hugo增加mermaid绘图支持

hugo增加自定义功能的方式

customjs

在config.toml中增加配置

custom_css = ["css/custom.css"]
custom_js = ["js/custom.js"]

在模版中以如下方式使用：

// css
{{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

// javascript
{{ range .Site.Params.custom_js -}}
    <script type="text/javascript" src="{{ . | absURL }}"></script>
{{- end }}

添加相应自定义文件到指定位置

static/css/custom.css
static/js/custom.js

template overwrite(推荐)

利用hugo模版覆盖机制：project layout下的同名模版覆盖theme layout模版

拷贝

hugo -> themes -> actual-theme -> layouts -> partials -> xxx.html

至

hugo -> layouts -> partials -> xxx.html

然后增加需要的功能

增加mermaid支持

采用template overwrite机制可以在不修改主题的情况下增加功能模块

以Mainroad主题为例，增加mermaid绘图支持

经分析在mathjax.html模块中增加功能最为合适
拷贝themes/mainroad/layouts/partials/mathjax.html至layouts/partials/mathjax.html

增加以下代码新增mermaid支持，实现支持通过参数控制功能模块的启用与否，实现按需载入

{{ if and .IsPage (eq (.Param "mermaid") true) }}
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaidAPI.initialize({
        securityLevel: 'loose',
        theme: 'forest',
    });
</script>
<script>
    // Replace mermaid pre.code to div
    Array.from(document.getElementsByClassName("language-mermaid")).forEach(
        (el) => {
            el.parentElement.outerHTML = `<div class="mermaid">${el.innerText}</div>`;
        }
    );
</script>
<style>
    /* Set svg to center */
    .mermaid svg {
        display: block;
        margin: auto;
    }
</style>
{{ end }}

在文章的Front Matter部分增加mermaid: true参数配置即可在该文章中启动mermaid绘图支持
在文章中使用mermaid语言代码块编写mermaid支持的语法即可实现运行时渲染图像