Hexo Next theme 加入 mermaid 圖示(Diagrams)

2021-10-09 162 words One minute

Contents

原本參考Hexo中插入mermaid diagrams | Yu’s Notes，不過做到一半還是失敗。最後還是解決了，順便紀錄一下。

使用 Next 裡面設定好的 mermaid

theme/next-reloaded/_config.yaml

1
2
3
4


mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest

可以參考Mermaid | NexT

1
2
3
4
5
6


{% mermaid sequenceDiagram %}
    Alice->John: Hello John, how are you?
    loop every minute
        John-->Alice: Great!
    end
{% endmermaid %}

sequenceDiagram Alice->John: Hello John, how are you? loop every minute John-->Alice: Great! end

1
2
3
4
5
6


{% mermaid graph TD %}
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}

graph TD A-->B; A-->C; B-->D; C-->D;

下面可以不用看了!!
下面可以不用看了!!
下面可以不用看了!!

失敗安裝紀錄

先commit 現有 hexo GIT專案，防止壞掉可以還原。

1

npm install hexo-filter-mermaid-diagrams

先前使用Hexo NexT 主題遇到連結 %20 空白問題，新版設定 Google Adsense 方法 | 程式狂想筆記，所以在加入 HTML 程式做調整。我先前使用 njk，這樣我程式碼不用改在 theme 裡面。

官方都有提供對應程式碼調整，參考如下圖。

theme/next/_config.yaml
下面 footer 請打開

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


custom_file_path:
  #head: source/_data/head.swig
  header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  postMeta: source/_data/post-meta.njk
  postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

失敗的話，我也是這樣QQ
不過後來發現原本 Next 就有支援了。