目录
- 1. Hexo支持流程图、时序图
- 2. Hexo多行代码提供复制
- 3. Hexo复制时追加版权
Hexo支持流程图、时序图
画流程图还需要用别的编辑器画了用图片导入？Hexo实现手写流程图也很简单哦，但是有个小坑，小编被坑了好久，接下来手把手????带你们过坑。
markdown语法实现流程图的方式可以通过mermaid或flowchart，时序图则可以mermaid或sequence，但是默认是不会识别语法的，只是当做普通的多行代码，需要安装插件。
<!-- more-->
方式一：mermaid
支持流程图（graph）、时序图（sequenceDiagram）、甘特图（gantt），可以说支持很多了。配置教方式二麻烦一点。
<p id="div-border-left-yellow">在线编辑器地址：https://mermaidjs.github.io/m... ，可以利用在线编辑器编辑完流程图之后，下载SVG或者直接link。</p>
安装
官方说的是通过yarn安装（如果没有安装yarn，使用npm install -g yarn安装）
$ yarn add hexo-filter-mermaid-diagrams也可以使用npm：
$ npm i hexo-filter-mermaid-diagrams插件的官方网址
配置
（1）修改<span id="inline-green">站点配置文件_config.yml</span>
在最后加入
# 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 %} <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script> <script> if (window.mermaid) { mermaid.initialize({theme: 'default'}); } </script>{% endif %}主题可更改，包含 default | forest
重新hexo clean && hexo generate && hexo server --debug启动渲染也生效了。
示例
1. 流程图示例
```mermaid
graph TBstart(开始)-->inputA[输入用户名密码]inputA-->opA{数据库查询子类}opA-->conditionA{是否有此用户}conditionA--yes-->conditionB{密码是否正确}conditionA--no-->inputAconditionB--yes-->opB[读入用户信息]conditionB--no-->inputAopB-->en(登录)```
mermaid流程图展示
2. 时序图示例
```mermaid
sequenceDiagram
participant Client
participant ServerNote 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
官方配置提到需要更改<span id="inline-green">站点配置文件_config.yml</span>，增加：
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 ServerNote 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 + '<div id="' + seqId + '" class="sequence"></div>' + end;特别注意：很多人说sequence设置无效，需要更改依赖的snap为raphael，也有说更改站点配置文件的external_link为false，小编都试过了，无效。为啥子时序图还是失败了呢？小编搜了整个项目差点以为是跟motion.js里面的sequence重合有缺陷，都打算改插件了，然而并不需要！！
如果您的使用的Hexo，而且时序图放在md文件的最后一个，导致渲染失效了的话，请在文章的最后输入一个回车，没错就是只需要一个回车就解决了。。不知道是不是Hexo的bug，所有的多行代码在文章末尾的都会出现渲染问题，并不是sequence的问题。
Hexo多行代码提供复制
增加复制按钮及响应的js：
clipboard.jsvar initCopyCode = function () { var copyHtml = ''; copyHtml += '<button class="btn-copy" data-clipboard-snippet="">'; copyHtml += ' <i class="fa fa-clipboard"></i><span>copy</span>'; copyHtml += '</button>'; $(".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，在</body>上面加入
<!--代码块复制功能--><script type='text/javascript' src='/js/src/clipboard.js'></script><script type="text/javascript" src="/js/src/clipboard-use.js"></script>这样在鼠标在代码区域时右上角显示copy。
Hexo复制时追加版权
虽然在<span id="inline-blue">主题配置文件_config.yml</span>中更改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 + '<br/>-----------------------<br/>' + (author ? `<b>作者</b>: ${author}<br/>` : '') + `<b>原文</b>: <a href="${window.location.href}">${window.location.href}</a><br/>` + '版权声明：本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0</a> 许可协议。转载请注明出处！<br/>'; clipboardData.setData('text/html', htmlData); clipboardData.setData('text/plain', textData); }); }})();资源下载：copyright.js 点击下载
下载完成后，copyright.js放在 themes/next/source/js/src/下，并更改themes/next/layout/_layout.swig，在</body>上面加入
<!--{#复制版权申明#}--><script type="text/javascript" src="/js/src/copyright.js"></script>版权开启时，复制时即可增加版权信息。
原文链接：https://luohongxfb.github.io/...