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倉庫