Jekyll功能扩展(mermaid,MathJax)

在使用Jekyll的过程中会用到一些扩展功能，这里把将这些功能添加到自己博客的步骤归纳在这里

mermaid流程图

首先，mermaid官方文档地址：https://mermaid-js.github.io/mermaid/

先在博客文件中添加mermaid.min.js文件(按照官方文档内容，可以在https://unpkg.com/browse/mermaid@8.6.0/获取这个文件)。接着在博客根目录的_includes/head.html文件中添加对该文件的引用即可，比如我这里将mermaid.min.js放在了/assets/js文件夹，所以这里添加的引用是：<script src="/assets/js/mermaid.min.js"></script>

然后就可以参照文档内容用mermaid语法绘制各种图了(注意，要用<div class="mermaid"><div>来包裹)，比如这里写一段：

<div class="mermaid">
graph LR
	获取mermaid.min.js --> 引用到博客 --> 使用mermaid语法画图
</div>

显示效果：

graph LR 获取mermaid.min.js --> 引用到博客 --> 使用mermaid语法画图

其实这里应该有更完美的支持方法，但是这里为了快速有效，就先采用这个方法了

支持MathJax数学公式显示¹

• 首先，在博客的config.yml文件中，添加内容：

    # Build settings
    markdown: kramdown
  

• 然后，在想要支持MathJax的博客上面添加标识：

  usemathjax: true
  

• 最后在博客根目录的_includes/head.html文件中添加引用，这里利用了之前的标识来决定当前页面是否需要支持MathJax

<!-- for mathjax support -->

{% if page.usemathjax %}
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
{% endif %}

完成上面的步骤之后，我们就可以在添加了标识的博客里面自由使用MathJax为我们带来的公式显示效果了

比如这里编写一个勾股定理公式：

$$a^2+b^2=c^2$$

显示效果：

\[a^2+b^2=c^2\]

1. 这个具体方法也是参考了网络上其他人的博客以及MathJax官方文档的内容，关于是否使用标识的那一点按自己喜好决定即可 ↩