Mermaid渲染支持

Hugo默认不支持Mermaid渲染,因此需要手动配置。

参考链接:让Hugo Papermod主题支持 Mermaid

新增layouts/partials/extend_head.html文件,填上Mermaid渲染的代码:

<!-- 使用cdn加载文件 -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
// 自定义mermaid配置
const config = {
    startOnLoad:true,
    theme: 'forest',
    themeVariables: {
        lineColor: "#fafafa"    // 由于paperMod的代码块背景是黑色的,这里将线条设置为白色
    },
    flowchart: {
        useMaxWidth:false,
        htmlLabels:true
        }
};
mermaid.initialize(config);
// 需要注意的是,要将初始化代码放到 window.onload 回调函数里面才有用
// 否则会因为在html元素加载前进行初始化,找不到元素而失效
window.onload = () => {
    window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
}
</script>

渲染结果:

graph LR;
    A-->B;
    B-->C;
    C-->D;