网上介绍在Hexo下使用flowchart制作流程图的文章比较多,一般是调用hexo-filter-flowchart插件。
由于我将Next主题调成了暗黑样式,流程图输出的颜色和Hexo默认的配色就很不协调了。经过一番查找,确定hexo-filter-flowchart插件的样式表路径为:
1
| node_modules/hexo-filter-flowchart/index.js
|
1 2 3 4 5
| 'scale': 1, 'line-width': 2, 'line-length': 50, 'text-margin': 10, 'font-size': 12,
|
同时确定此插件其实调用的是https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js这个脚本。
在hexo-filter-flowchart/index.js中没有定义流程图颜色样式,使用的是flowchart.min.js脚本默认颜色配置。通过阅读flowchart.min.js,得到如下相关的默认配置参数:
1 2 3 4 5 6 7 8 9 10 11 12
| "line-width":3, "line-length":50, "text-margin":10, "font-size":14, "font-color":"black", "line-color":"black", "element-color":"black", fill:"white", "yes-text":"yes", "no-text":"no", "arrow-end":"block", "class":"flowchart"
|
很明显,默认的配色是黑线、黑边、黑字体、白色填充,正好和我现在使用的暗黑模式相反。
于是添加自定义的颜色配置到index.js中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| var assign = require('deep-assign'); var renderer = require('./lib/renderer');
hexo.config.flowchart = assign({ flowchart: 'https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js', raphael: 'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js', options: { 'scale': 1, 'fill': "dimgray", 'line-width': 2, 'line-length': 50, 'line-color': "white", 'element-color': "white", 'text-margin': 10, 'font-size': 12, 'font-color': "white", } }, hexo.config.flowchart);
hexo.extend.filter.register('before_post_render', renderer.render, 9);
|
这里需要注意的是颜色值不支持16进制,比如#FF5555,需要使用英文名字,并要用半角双引号包起来。
看一下效果吧。