🔥🔥🔥：稳定好用的机场/梯子 TAG 全球250+节点、99+流媒体解锁，更多参考机场推荐

集成参考了 Google 的 docsy 中的集成方式。

主题 hugo-theme-stack 中没有集成 Mermaid，仅集成了 Katex，需要画图的时候就要自己引入 Mermaid 。

由于使用 module 的方式使用主题，故并不想因为为了引入 Mermaid 而修改主题模板。Stack 提供了两个空的模板来支持自定义，所以就通过这两个自定义模板来引入。

• layouts/partials/head/custom.html
• layouts/partials/footer/custom.html

另外，为了方便后续维护，也同时使用 docsy 里的方式引入了 Katex。

集成方式

主要的工作是添加钩子模板和引入相关的JavaScript文件。

新增文件

将本项目中的以下文件，直接拷贝到你的项目中。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

# 钩子模板
layouts/_default/_markup/render-codeblock-chem.html
layouts/_default/_markup/render-codeblock-markmap.html
layouts/_default/_markup/render-codeblock-math.html
layouts/_default/_markup/render-codeblock-mermaid.html

# 主题可自定义的模板文件
layouts/partials/head/custom.html
layouts/partials/footer/custom.html

# JavaScript文件集中引入
layouts/partials/scripts.html

# JavaScript文件和CSS文件
assets/js/markmap.js
assets/js/mermaid.js
static/js/prism.js
static/css/prism.css

新增相关配置

config_default\params.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

markmap:
  enable: true
mermaid:
  enable: true
  theme: default
  flowchart:
    diagramPadding: 20
katex:
  enable: true
  mhchem:
    enable: true

PS: 如果不是使用的Configuration Directory，要把配置加到params下。

使用示例

Mermaid

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

MarkMap

# markmap

## Links

- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap)

## Related

- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)

## Features

- links
- **inline** ~~text~~ *styles*
- multiline
  text
- `inline code`
-
    ```js
    console.log('code block');
    ```
- Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

Mathjax

行间公式：

行内公式：\(y=ax+b\)

math 代码块：

mhchem