程式狂想筆記

一個攻城師奮鬥史

0%

Hexo Next theme 加入 mermaid 圖示(Diagrams)

發表於 更新於 分類於 Disqus：

原本參考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 就有支援了。