Fluid主题下，如何解决网页渲染的mermaid版本与本地使用的版本不相同的问题

问题描述

写技术博客的时候，我们时常会用到mermaid做一些流程图或者时序图什么的，但是Fluid主题中默认使用的mermaid版本总是与我们本地编写的时候使用的mermaid版本不相同（通常Fluid主题中的版本要小许多）。这道值通常会出现mermaid在本地可以渲染出来，但是到了网页上之后却无法渲染。

同样遇到这个问题的小伙伴，不想看我查出来这个问题的心路历程，可以直接跳到解决方案

心路历程

我自己用的Typora来编写Markdown，目前来说，Typora使用的mermaid版本为11.9.0。但是，在我编写完后，网页博客中通常会渲染失败，而那上面显示的却是8.14.0。如果懒得去管版本问题的话，倒是也可以将本地写mermaid的方式改成旧版本的方式，但是总是非常麻烦（因为不知道自己错在了哪里）。因此，我翻了一会儿Fluid的代码和网页代码，发现在浏览器中，文章的html文件的后面一部分总是会出现这一段代码：

  <script>
  Fluid.utils.createScript('https://lib.baomitu.com/mermaid/8.14.0/mermaid.min.js', function() {
    mermaid.initialize({"theme":"default"});

    Fluid.utils.listenDOMLoaded(function() {
      Fluid.events.registerRefreshCallback(function() {
        if ('mermaid' in window) {
          mermaid.init();
        }
      });
    });
  });
</script>

注意到有https://lib.baomitu.com/mermaid/8.14.0/mermaid.min.js这么个网址存在。第一反应，这应该是一个什么静态站点的资源库。但是既然有这个Fluid.utils.createScript这么个方法，说明Fluid主题中必然是写了这个代码的。之后，我找到了blog/themes/fluid/source/js/utils.js这个文件，翻了一下，果然有相应的方法定义：

Fluid.utils = {
    // 其他代码...
    
    createScript: function(url, onload) {
        var s = document.createElement('script');
        s.setAttribute('src', url);
        s.setAttribute('type', 'text/javascript');
        s.setAttribute('charset', 'UTF-8');
        s.async = false;
        if (typeof onload === 'function') {
          if (window.attachEvent) {
            s.onreadystatechange = function() {
              var e = s.readyState;
              if (e === 'loaded' || e === 'complete') {
                s.onreadystatechange = null;
                onload();
              }
            };
          } else {
            s.onload = onload;
          }
        }
        var ss = document.getElementsByTagName('script');
        var e = ss.length > 0 ? ss[ss.length - 1] : document.head || document.documentElement;
        e.parentNode.insertBefore(s, e.nextSibling);
	},
    
    // 其他代码...
}

好消息是，找到了对应的代码。坏消息是，这似乎是一个动态代码生成方法。不过说来也是，不可能硬编码一套内容出来然后生搬到html生成过程中去，那样太麻烦了。从这段代码中可以注意到有一个url，想必这个url就是对应着生成代码所对应的url=https://lib.baomitu.com/mermaid/8.14.0/mermaid.min.js了。那接下来就是找这个网址在哪里定义的。

漫无目的地找似乎有些没道理，细细想来，这种东西不是很像做Java Spring时弄配置文件的感觉吗？说不定这个东西也是放在了配置文件里面。

那说到hexo的配置文件，恐怕就只有_config.fluid.yml这个文件了。在里面搜了一下mermaid，里面有关的出现了这些内容：

  # 流程图，基于 mermaid-js，具体请见：https://hexo.fluid-dev.com/docs/guide/#mermaid-流程图
  # Flow chart, based on mermaid-js, see: https://hexo.fluid-dev.com/docs/en/guide/#mermaid
  mermaid:
    # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `mermaid: true`
    # If you want to use mermaid on the custom page, you need to set `mermaid: true` in Front-matter
    enable: true

    # 开启后，只有在文章 Front-matter 里指定 `mermaid: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
    # If true, only set `mermaid: true` in Front-matter will enable mermaid, to load faster when the page does not contain mermaid
    specific: true

    # See: http://mermaid-js.github.io/mermaid/
    options: { theme: 'default' }
    
# --------------
static_prefix:
	mermaid: https://lib.baomitu.com/mermaid/8.14.0/

看到这里应该很明了，下面那个就是一个静态地址的定义，想必我们把里面的8.14.0改成想要的版本，应该就好了。

因此我试着改了一下，果然就好了。

在改好了之后再去回顾Fluid文档中告诉我们的静态配置，这才理解原来（有一部分？）是用在了这里。

解决方案

去_config.fluid.yml中，拉倒最底下，找到mermaid: https://lib.baomitu.com/mermaid/8.14.0/，把其中的8.14.0改成11.9.0即可。

其他版本的我没有测试，但是亲测11.9.0是可用的！