Hexo--第二彈

時間  2019-12-05
標籤 hexo 第二 简体版
原文   原文鏈接

目錄javascript

Hexo支持流程圖、時序圖

畫流程圖還須要用別的編輯器畫了用圖片導入？Hexo實現手寫流程圖也很簡單哦，可是有個小坑，小編被坑了很久，接下來手把手👇帶大家過坑。css

markdown語法實現流程圖的方式能夠經過mermaid或flowchart，時序圖則能夠mermaid或sequence，可是默認是不會識別語法的，只是當作普通的多行代碼，須要安裝插件。html

<!-- more-->java

方式一：mermaid

支持流程圖（graph）、時序圖（sequenceDiagram）、甘特圖（gantt），能夠說支持不少了。配置教方式二麻煩一點。node

<p id="div-border-left-yellow">在線編輯器地址：https://mermaidjs.github.io/m... ，能夠利用在線編輯器編輯完流程圖以後，下載SVG或者直接link。</p>git

安裝

官方說的是經過yarn安裝（若是沒有安裝yarn，使用npm install -g yarn安裝）github

$ yarn add hexo-filter-mermaid-diagrams

也可使用npm：web

$ npm i hexo-filter-mermaid-diagrams

插件的官方網址數據庫

配置

（1）修改<span id="inline-green">站點配置文件_config.yml</span>
在最後加入npm

# 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流程圖展現

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

官方配置提到須要更改<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 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 + '<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，在</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/...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程