Hexo--第二弹

目录

• 1. Hexo支持流程图、时序图
• 2. Hexo多行代码提供复制
• 3. Hexo复制时追加版权

Hexo支持流程图、时序图

画流程图还需要用别的编辑器画了用图片导入？Hexo实现手写流程图也很简单哦，但是有个小坑，小编被坑了好久，接下来手把手?带你们过坑。

markdown语法实现流程图的方式可以通过mermaid或flowchart，时序图则可以mermaid或sequence，但是默认是不会识别语法的，只是当做普通的多行代码，需要安装插件。

方式一：mermaid

支持流程图（graph）、时序图（sequenceDiagram）、甘特图（gantt），可以说支持很多了。配置教方式二麻烦一点。

在线编辑器地址：https://mermaidjs.github.io/mermaid-live-editor/ ，可以利用在线编辑器编辑完流程图之后，下载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 %}
  <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 TB
start(开始)–>inputA[输入用户名密码]
inputA–>opA{数据库查询子类}
opA–>conditionA{是否有此用户}
conditionA–yes–>conditionB{密码是否正确}
conditionA–no–>inputA
conditionB–yes–>opB[读入用户信息]
conditionB–no–>inputA
opB–>en(登录)
```

mermaid流程图展示：