目录1.Hexo支持流程图、时序图2.Hexo多行代码提供复制3.Hexo复制时追加版权Hexo支持流程图、时序图画流程图还需要用别的编辑器画了用图片导入?Hexo实现手写流程图也
目录
1. Hexo支持流程图、时序图 2. Hexo多行代码提供复制 3. Hexo复制时追加版权 Hexo支持流程图、时序图 画流程图还需要用别的编辑器画了用图片导入?Hexo实现手写流程图也很简单哦,但是有个小坑,小编被坑了好久,接下来手把手👇带你们过坑。
markdown语法实现流程图的方式可以通过mermaid或flowchart,时序图则可以mermaid或sequence,但是默认是不会识别语法的,只是当做普通的多行代码,需要安装插件。
方式一:mermaid 支持流程图(graph)、时序图(sequenceDiagram)、甘特图(gantt),可以说支持很多了。配置教方式二麻烦一点。
在线编辑器地址: https://mermaidjs.github.io/m… ,可以利用在线编辑器编辑完流程图之后,下载SVG或者直接link。
安装 官方说的是通过yarn安装(如果没有安装yarn,使用npm install -g yarn
安装)
$ yarn add hexo-filter-mermaid-diagrams
也可以使用npm:
$ npm i hexo-filter-mermaid-diagrams
插件的官方网址
配置 (1)修改站点配置文件_config.yml 在最后加入
# mermaid chart mermaid: ## mermaid url https://github.com/knsv/mermaid enable: true # default true version: "7.1.2" # default v7.1.2 options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js #startOnload: true // default true
(2)Next主题更改:在themes/next/_partials/footer.swig 最后加入
{% if theme.mermaid.enable %} {% endif %}
主题可更改,包含 default | forest
重新hexo clean && hexo generate && hexo server --debug
启动渲染也生效了。
示例 1. 流程图示例
“`mermaid graph TB
start(开始)-->inputA[输入用户名密码] inputA-->opA{数据库查询子类} opA-->conditionA{是否有此用户} conditionA--yes-->conditionB{密码是否正确} conditionA--no-->inputA conditionB--yes-->opB[读入用户信息] conditionB--no-->inputA opB-->en(登录)
“`
mermaid流程图展示
2. 时序图示例
“`mermaid
sequenceDiagram
participant Client
participant Server
Note left of Client:SYN_SENT Client->Server:SYN=1 seq=x Note right of Server:SYN_RCVD Server->Client:SYN=1 seq=y ACK=x+1 Note left of Client:ESTABLISHED Client->Server:ACK=y+1 Note right of Server:ESTABLISHED “`
mermaid时序图展示
要说的话 mermaid帮助文档:https://mermaidjs.github.io/ ,可在里面查看更多的使用介绍及语法。
优点 :颜色鲜艳;语法结构简单,不需要先声明;方向可指定;灵活,可以更改样式。
缺点 :方块模式提供没有标准流程图的规范的形状,比如输入框的平行四边形是没有的,需要自定义;加载渲染较慢,会出现展示多行代码样式。 ···mermaid graph LR id1>id1]–>id2[id2] id2—id3(id3) id3—|text|id4((id4)) id4–>|text|id5{id5}
style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5 ···
展示
更多流程图使用查看:https://mermaidjs.github.io/f…
流程图过长会占用界面大部分空间,博客中设置了最大高度,及居中展示,在themes/next/source/css/_custom/custom.styl下面加入
/*mermaid图居中*/ .mermaid{ text-align: center; max-height: 300px; }
方式二:flowchart+sequence 安装 支持流程图,安装:
$ npm install --save hexo-filter-flowchart
支持时序图,安装:
$ npm install --save hexo-filter-sequence
配置(非必须) 插件官方地址: flowchart sequence
官方配置提到需要更改站点配置文件_config.yml ,增加:
flowchart: # raphael: # optional, the source url of raphael.js # flowchart: # optional, the source url of flowchart.js options: # options used for `drawSVG` sequence: # webfont: # optional, the source url of webfontloader.js # snap: # optional, the source url of snap.svg.js # underscore: # optional, the source url of underscore.js # sequence: # optional, the source url of sequence-diagram.js # css: # optional, the url for css, such as hand drawn theme options: theme: css_class:
亲测不配置也是可以的。hexo clean && hexo generate && hexo server --debug
启动渲染也生效了。
示例 1.流程图示例
“`flow
st=>start: 开始
inputA=>inputoutput: 输入用户名密码
opA=>operation: 数据库查询子类
cOnditionA=>condition: 是否有此用户
cOnditionB=>condition: 密码是否正确
opB=>operation: 读入用户信息
e=>end: 登录
st->inputA->opA->conditionA
conditionA(yes)->conditionB
conditionA(no)->inputA
conditionB(yes)->opB->e
conditionB(no)->inputA
“`
flowchart流程图展示
2.时序图示例
“`sequence
participant Client
participant Server
Note left of Client:SYN_SENT Client->Server:SYN=1 seq=x Note right of Server:SYN_RCVD Server->Client:SYN=1 seq=y ACK=x+1 Note left of Client:ESTABLISHED Client->Server:ACK=y+1 Note right of Server:ESTABLISHED “`
sequence时序图展示
要说的话 优点 :标准流程图的样式展示;渲染快,几乎不会出现展示多行代码的时候;实现简单。
缺点 :样式不能更改,黑白界面;流程图语法需要先声明后使用。
设置最大高度及居中展示,背景色,超出部分滑动:
.flow-chart { text-align: center; max-height: 300px; overflow: auto; background: #f7f7f7; } .sequence { text-align: center; max-height: 300px; overflow: auto; background: #f7f7f7; }
sequence的小编不走心,没有提供class,需要在node_modules/hexo-filter-sequence/lib/renderer.js修改,大约22行,设置id的时候同时增加class:
return start + '
' + end;
特别注意 :很多人说sequence设置无效,需要更改依赖的snap为raphael,也有说更改站点配置文件的external_link为false,小编都试过了,无效。为啥子时序图还是失败了呢?小编搜了整个项目差点以为是跟motion.js里面的sequence重合有缺陷,都打算改插件了,然而并不需要!! 如果您的使用的Hexo,而且时序图放在md文件的最后一个,导致渲染失效了的话,请在文章的最后输入一个回车,没错就是只需要一个回车就解决了。。不知道是不是Hexo的bug,所有的多行代码在文章末尾的都会出现渲染问题,并不是sequence的问题。
Hexo多行代码提供复制 增加复制按钮及响应的js:
clipboard.js var initCopyCode = function () { var copyHtml = ''; copyHtml += ''; copyHtml += ' copy '; copyHtml += ' '; $(".highlight .code pre").before(copyHtml); new ClipboardJS('.btn-copy', { target: function (trigger) { return trigger.nextElementSibling; } }); }
资源下载:点击下载
下载完成后,将clipboard.js和clipboard-use.js放在 themes/next/source/js/src/下,并更改themes/next/layout/_layout.swig,在上面加入
这样在鼠标在代码区域时右上角显示copy。
Hexo复制时追加版权 虽然在主题配置文件_config.yml 中更改post_copyright可以在文章底部增加版权声明信息,复制时并不能像很多博客网站一样复制时直接追加。
实现是通过监听copy事件,追加信息:
copyright.js (() => { if (document.getElementsByClassName("post-copyright").length>0) { const author=document.getElementsByClassName("author")[0].textContent; document.addEventListener('copy', e => { let clipboardData = e.clipboardData || window.clipboardData; if(!clipboardData) { return; } e.preventDefault(); const selection = window.getSelection().toString(); const textData = selection + '\n-----------------------\n' + (author ? `作者: ${author}\n` : '') + '原文: ' + window.location.href + '\n' + '版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!\n\n'; const htmlData = selection + ' ----------------------- ' + (author ? `作者 : ${author} ` : '') + `原文 : ${window.location.href} ` + '版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处! '; clipboardData.setData('text/html', htmlData); clipboardData.setData('text/plain', textData); }); } })();
资源下载:copyright.js 点击下载 下载完成后,copyright.js放在 themes/next/source/js/src/下,并更改themes/next/layout/_layout.swig,在上面加入
版权开启时,复制时即可增加版权信息。
原文链接:https://luohongxfb.github.io/…