Hexo引入Mermaid流程圖和MathJax數學公式

近來用Markdown寫文章，愈來愈不喜歡插入圖片了，一切能用語法解決的問題堅定不放圖，緣由有二：

1. 若是把流程圖和數學公式都以圖片方式放到文章內，當部署到Github上後，訪問博客時圖片加載實在太慢，有時一篇文章須要畫10來個流程圖，那你就得截圖10來屢次，還得給這些圖片想一個合適的名字，同時插入圖片的時候還要注意圖片的插入位置和順序；

2. 若是你要把文章發佈到其餘博客平臺，如CSDN、博客園，在每個平臺上你都要插入10來屢次圖片，做爲程序員，這種笨拙又耗時的方法，我實在不能忍。

因而憤而搜索，Mermaid語法可實現流程圖功能，MathJax語法可實現數學公式和特殊符號的功能，只須要遵循其語法規則便可，這也不禁得讓我想起：「蘇乞兒打完降龍十八掌前17掌以後幡然領悟出第18掌的奧妙時說的那句話：我實在是太聰明瞭！」。下面都以next主題爲例，個人主題是https://github.com/theme-next/hexo-theme-next

Mermaid

1.若是你用的主題和個人主題倉庫是同一個，你只需修改blog/themes/next/_config.yml內mermaid模塊enable爲true，其餘的啥也不用作。

$cd blog/  # 走到博客根目錄
$yarn add hexo-filter-mermaid-diagrams  # 安裝mermaid插件

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest
  cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

2.若是你的不是next主題或者你的next主題是github上舊版本倉庫，你首先須要查看themes/next/_config.yml內是否有mermaid模塊，若是有，按照前面的方法1，執行完方法1後，若是不奏效，不要改回去，接着下面的內容繼續配置。若是沒有mermaid模塊，仍然着接下面內容繼續配置。

• 編輯博客根目錄下的blog/_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

• 編輯blog/themes/next/layout/_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({{ JSON.stringify(theme.mermaid.options) }});
    }
  </script>
{% endif %}

若是你的主題下沒有footer.swig文件，你須要在你的主題目錄下搜索文件名爲after-footer.ejs和after_footer.pug的文件，根據文件名的不一樣在其最後添加不一樣的內容，這點在github上的 hexo-filter-mermaid-diagrams 教程已經明確交代了。

# 如果after_footer.pug，在最後添加內容
if theme.mermaid.enable == true
  script(type='text/javascript', id='maid-script' mermaidoptioins=theme.mermaid.options src='https://unpkg.com/mermaid@'+ theme.mermaid.version + '/dist/mermaid.min.js' + '?v=' + theme.version)
  script.
    if (window.mermaid) {
      var options = JSON.parse(document.getElementById('maid-script').getAttribute('mermaidoptioins'));
      mermaid.initialize(options);
    }

# 如果after-footer.ejs，在最後添加
<% 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: 'forest'});
    }
  </script>
<% } %>

• 最後，趕忙部署到github上觀看效果吧，若是不奏效的話，把blog/_config.yml中的external_link設置爲false和設置爲true都試下，這點在github教程上也已經交代了，由於個人next版本不涉及這個問題，請君多試。

!!!Notice: if you want to use 'Class diagram', please edit your '_config.yml' file, set external_link: false. - hexo bug.

3.前兩步作完後，若是都不奏效，這裏還有一招絕殺技，那就是打開blog/public目錄下你寫的文章的index.html。

• 搜索「mermaid」，全部的流程圖都應該是括在一個標籤類的，若是你的流程圖沒有class = 「mermaid」，那就是第一步安裝的hexo-filter-mermaid-diagrams插件沒有解析成功，多是hexo，node，yarn版本問題所致。

# 流程圖解析爲：<pre class="mermaid">流程圖</pre>
<pre class="mermaid">graph LR
A[Bob<br>輸入明文P] -->|P|B["Bob的私鑰PRbob<br>加密算法(如RSA)<br>C=E(PRbob,P)"];
B -->|傳輸數字簽名C|C["Alice的公鑰環{PUbob,……}<br>解密算法(如RSA)<br>P=D(PUbob,C)"];
C -->|P|D["Alice<br>輸出明文P"];</pre>

• 若流程圖確實解析成功了，可是web仍然不顯示流程圖，說明js文件引入失敗，繼續在index.html中搜索「mermaid.min.js」，正常狀況下須要有以下內容，若是沒有，在文件最後的"body"以前添加上，以後再部署觀看效果，到此理論上應該能夠了，若是仍是不行，仔細檢查下有沒有遺漏步驟，考驗你解bug的時候到了。

<script src="https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js"></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>

MathJax

個人主題只需修改blog/themes/next/_config.yml內math模塊enable爲true便可，不須要安裝任何插件，修改以後，在文章的Front Matter欄添加"mathjax: true"才能解析，其餘主題也能夠試下該方法可行否，都大同小異。

# Math Equations Render Support
math:
  enable: true       # 這裏改成true

  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front Matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  engine: mathjax
  #engine: katex

  # hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.
  mathjax:
    cdn: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    #cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML

    # See: https://mhchem.github.io/MathJax-mhchem/
    #mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3
    #mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) needed to full Katex support.
  katex:
    cdn: //cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css
    #cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css

    copy_tex:
      # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
      enable: false
      copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
      copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css

# 文章引入方式
---
title: 經常使用加密算法的應用
date: 2019-05-20 13:58:36
tags: [對稱加密算法,非對稱加密算法/公鑰算法,Hash函數/散列函數/摘要函數,消息認證,流密碼,數字簽名/指紋/消息摘要]
categories:
  - [密碼學與信息安全]
copyright: true
mathjax: true     # 添加這行，文章纔會解析
---

參考文獻

[1] MathJax語法規則
[2] Mermaid語法規則
[3] Mermaid官方教程
[4] Mermaid Github倉庫
[5] MathJax Github倉庫