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流程图展示:

yes
no
yes
no
开始
输入用户名密码
数据库查询子类
是否有此用户
密码是否正确
读入用户信息
登录

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时序图展示:

ClientServerSYN_SENTSYN=1 seq=xSYN_RCVDSYN=1 seq=y ACK=x+1ESTABLISHEDACK=y+1ESTABLISHEDClientServer

要说的话

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
···

text
text
id1
id2
id3
id4
id5

更多流程图使用查看:https://mermaidjs.github.io/flowchart.html

流程图过长会占用界面大部分空间,博客中设置了最大高度,及居中展示,在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流程图展示:

Created with Raphaël 2.2.0开始输入用户名密码数据库查询子类是否有此用户密码是否正确读入用户信息登录yesnoyesno

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时序图展示:

ClientServerSYN_SENTSYN=1 seq=xSYN_RCVDSYN=1 seq=y ACK=x+1ESTABLISHEDACK=y+1ESTABLISHEDClientServer

要说的话

优点:标准流程图的样式展示;渲染快,几乎不会出现展示多行代码的时候;实现简单。

缺点:样式不能更改,黑白界面;流程图语法需要先声明后使用。

设置最大高度及居中展示,背景色,超出部分滑动:

.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.js

var 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,在上面加入

<!--代码块复制功能-->
<script type='text/javascript' src='/js/src/clipboard.js'></script>
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>

这样在鼠标在代码区域时右上角显示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 + '<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,在上面加入

<!--{#复制版权申明#}-->
<script type="text/javascript" src="/js/src/copyright.js"></script>

版权开启时,复制时即可增加版权信息。

原文链接:https://luohongxfb.github.io/2019/07/10/Hexo-第二弹/

发布了25 篇原创文章 · 获赞 41 · 访问量 8894
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览