为 Hexo 增加时序图解析功能

1

npm install --save hexo-filter-sequence

1
2
3
4
5
6
7
8
9

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 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);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 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>';
      ......
}

1
2
3

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

1
2
3

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