Hexo--Part2

内容1.Hexo支持流程图和时序图2.Hexo多行代码提供复制3.Hexo复制时添加版权Hexo支持流程图和时序图，需要其他编辑设备是否绘制和带图片导入？Hexo实现手写流程图也很简单，但是有一个小坑，小编被忽悠了好久，接下来手把手带大家过一遍。markdown语法可以通过mermaid或者flowchart来实现流程图，序列图可以是mermaid也可以是sequence，但是默认不识别该语法。只是当成普通的多行代码，需要安装插件。方法一：美人鱼支持流程图（graph）、时序图（sequenceDiagram）、甘特图（gantt），可以说支持很多。第二种配置教学方法稍微麻烦一点。在线编辑器地址：https://mermaidjs.github.io/m...，可以使用在线编辑器编辑流程图，下载SVG或者直接链接。安装官方说是通过yarn安装的（如果没有安装yarn，使用npminstall-gyarn安装）$yarnaddhexo-filter-mermaid-diagrams也可以使用npm:$npmihexo-filter-mermaid-diagrams官方插件url配置（1）修改站点配置文件_config.yml，在末尾添加#mermaidchartmermaid：##mermaidurlhttps://github.com/knsv/mermaidenable:true#defaulttrueversion:"7.1.2"#defaultv7.1.2options:#从https://github.com/knsv/mermaid/blob/master/src找到更多的api选项/mermaidAPI.js#startOnload:true//默认为true(2)下一个主题更改：在themes/next/_partials/footer.swig末尾添加{%iftheme.mermaid.enable%}{%endif%}主题可以改，包括默认|forest,re-hexoclean&&hexogenerate&&hexoserver--debug启动渲染也生效。例1.流程图示例```mermaidgraphTBstart(start)-->inputA[输入用户名和密码]inputA-->opA{数据库查询子类}opA-->conditionA{是否有该用户}conditionA--是-->conditionB{密码是否正确}conditionA--no-->inputAconditionB--yes-->opB[读取用户信息]conditionB--no-->inputAopB-->en(login)```mermaid图2.序列图示例```mermaidsequenceDiagramparticipantClientparticipantServerNoteleftofClient:SYN_SENTClient->Server:SYN=1seq=xNoterightofServer:SYN_RCVDServer->Client:SYN=1seq=yACK=x+1NoteleftofClient:ESTABLISHEDClient->Server:ACK=y+1NoterightofServer:ESTABLISHED```美人鱼序列图说什么美人鱼帮助文档：https://mermaidjs.github.io/，更多用法可以看里面介绍和语法。优点：颜色鲜艳；语法结构简单，无需先声明；可以指定方向；灵活，你可以改变风格。缺点：块模式提供了一个标准化的形状，没有标准的流程图。比如输入框的平行四边形不存在，需要自定义；加载和渲染慢，会出现多行代码样式。···mermaidgraphLRid1>id1]-->id2[id2]id2---id3(id3)id3---|text|id4((id4))id4-->|text|id5{id5}样式id1填充:#f9f,stroke:#333,stroke-width:4pxstyleid2fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5显示更多流程图使用视图：https://mermaidjs.github.io/f...如果流程图太长，会占用大部分界面空间。博客中设置了最大高度，居中显示，在themes/next/source/css/_custom/custom.styl下添加/*mermaidimagecentered*/.mermaid{text-align:center;max-height:300px;}方法二：flowchart+sequence安装支持流程图，安装：$npminstall--savehexo-filter-flowchart支持sequence图，安装：$npminstall--savehexo-filter-sequence配置（不必填）插件官方地址：flowchartsequence官方配置中提到需要更改站点配置文件_config.yml，添加：flowchart:#raphael:#optional,raphael.js的源url#flowchart:#可选，flowchart.js的源urloptions:#用于`drawSVG`的选项snap.svg.js的源url#下划线：#optional,underscore.js的源码地址#sequence:#optional,sequence-diagram.js的源码url#css:#optional,css的url,比如手绘主题options:theme:css_class:pro没有配置test也可以运行hexoclean&&hexogenerate&&hexoserver--debug开始渲染，同样生效。例1.流程图示例```flowst=>start：开始inputA=>inputoutput：输入用户名和密码opA=>operation：数据库查询子类conditionA=>condition：是否存在该用户conditionB=>condition：是否密码正确opB=>操作：读取用户信息e=>结束：登录st->inputA->opA->conditionAconditionA(yes)->conditionBconditionA(no)->inputAconditionB(yes)->opB->econditionB(no)->inputA```flowchart流程图展示2.时序图例子```sequenceparticipantClientparticipantServerNoteleftofClient:SYN_SENTClient->Server:SYN=1seq=xNoterightofServer:SYN_RCVDServer->Client:SYN=1seq=yACK=x+1NoteleftofClient:ESTABLISHEDClient->Server:ACK=y+1没有时间显示多行代码；实现很简单。缺点：样式不可更改，黑白界面；流程图语法需要先声明再使用。设置最大高度和居中显示，背景色，滑动超出部分：.flow-chart{text-align:center;最大高度：300px；溢出：自动；背景：#f7f7f7；}.sequence{文本对齐：居中；最大高度：300px；溢出：自动；background:#f7f7f7;}sequence的编辑器不分心，没有提供class，需要在node_modules/hexo-filter-sequence/lib/renderer.js中修改，大概22行，同时设置Addclass作为id：返回开始+'