关于hexo的时序图插件 hexo-filter-sequence 的巨坑

前言

在写代码的过程中，发现时序图还是挺管用的，简洁明了，于是想用一用。

结果发到站上，不显示。

在网上查了下，发现是hexo所使用的Markdown渲染语法不支持。

这里吐槽下，这里渲染的确实烂，作者为啥不改改..

于是开始找解决方案，发现大多数都推荐了一个叫hexo-filter-sequence的插件，故安装之。

结果死活还是不行。

装了其它的几个flow图，却可以显示。

当flow图和sequence图同时存在的时候，sequence可以显示，但是sequence单独存在时，死活不显示。

难不成有啥依赖？必须先使用flow才能使用sequence？逻辑上不应该啊！

但是事实却是这样！

网上有一篇大神说要改源码才行，开始没注意，觉得应该不会吧，这么多人使用，源码还会有问题？？

仔细一看源码，妈的！！心里千万匹草泥马呼啸而过！

把初始化 sequence，写成了初始化 flow！！！

把 flow 改成 sequence，再把 js CDN源换成国内的！

可以了！！

再仔细一看，发现最后一次更新是在1年前！

坑爹的作者，浪费了我至少3-5个小时！！

下面为部分摘抄

安装

hexo-filter-sequence 插件:

1	npm install --save hexo-filter-sequence

配置

站点配置文件 _config.yml 中增加如下配置:

sequence:
  webfont: https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js
  raphael: https://cdn.bootcss.com/raphael/2.2.7/raphael.min.js
  underscore: https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js
  sequence: https://cdn.bootcss.com/js-sequence-diagrams/1.0.6/sequence-diagram-min.js
  css: # optional, the url for css, such as hand drawn theme 
  options: 
    theme: simple
    css_class:

源码

源码修改后才能正常使用，进入插件目录作如下修改：

// index.js
var assign = require('deep-assign');
var renderer = require('./lib/renderer');

hexo.config.sequence = assign({
  webfont: 'https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js',
  raphael: 'https://cdn.bootcss.com/raphael/2.2.7/raphael.min.js',
  underscore: 'https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js',
  sequence: 'https://cdn.bootcss.com/js-sequence-diagrams/1.0.6/sequence-diagram-min.js',
  css: '',
  options: {
    theme: 'simple'
  }
}, hexo.config.sequence);

hexo.extend.filter.register('before_post_render', renderer.render, 9);

// lib/renderer.js, 25 行
if (sequences.length) {
      var config = this.config.sequence;
      // resources
      data.content += '<script src="' + config.webfont + '"></script>';
      data.content += '<script src="' + config.raphael + '"></script>';
      data.content += '<script src="' + config.underscore + '"></script>';
      data.content += '<script src="' + config.sequence + '"></script>';
      ......
}

示例

新建代码块，增加如下内容：

详情参考

Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!{"theme":"simple"}