Feat: add Mermaid config

assets/data/cdn/jsdelivr.yml

@@ -1,4 +1,4 @@
-# TODO Tip: remove sourceMappingURL of local libraries to avoid source map 404 error.
+# Tips: remove sourceMappingURL of local libraries to avoid source map 404 error.
 # See https://github.com/Lruihao/FixIt/issues/67
 
 prefix:

assets/data/cdn/unpkg.yml

@@ -1,4 +1,4 @@
-# TODO Tip: remove sourceMappingURL of local libraries to avoid source map 404 error.
+# Tips: remove sourceMappingURL of local libraries to avoid source map 404 error.
 # See https://github.com/Lruihao/FixIt/issues/67
 
 prefix:

exampleSite/config.toml

@@ -998,6 +998,13 @@ enableEmoji = true
     # cursor duration after typing finishing (measured in milliseconds, "-1" means unlimited)
     # 打字结束之后光标的持续时间 (单位是毫秒, "-1" 代表无限大)
     duration = -1
+  
+  # Mermaid config since v0.2.15
+  # Mermaid 配置 since v0.2.15
+  [params.mermaid]
+    # For values, see https://mermaid-js.github.io/mermaid/#/Setup?id=theme
+    # 取值详见 https://mermaid-js.github.io/mermaid/#/Setup?id=theme
+    themes = ['neutral', 'dark']
 
   # PanguJS config since v0.2.12
   # 盘古之白配置 since v0.2.12

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -718,6 +718,11 @@ Please open the code block below to view the complete sample configuration :(fa-
     cursorChar = "|"
     # cursor duration after typing finishing (measured in milliseconds, "-1" means unlimited)
     duration = -1
+  
+  # {{< version 0.2.15 >}} Mermaid config
+  [params.mermaid]
+    # For values, see https://mermaid-js.github.io/mermaid/#/Setup?id=theme
+    themes = ['neutral', 'dark']
 
   # {{< version 0.2.12 >}} PanguJS config
   [params.pangu]

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -720,6 +720,11 @@ hugo
     cursorChar = "|"
     # 打字结束之后光标的持续时间（单位是毫秒，"-1" 代表无限大）
     duration = -1
+
+  # {{< version 0.2.15 >}} Mermaid 配置
+  [params.mermaid]
+    # 取值详见 https://mermaid-js.github.io/mermaid/#/Setup?id=theme
+    themes = ['neutral', 'dark']
   
   # {{< version 0.2.12 >}} 盘古之白配置
   [params.pangu]

exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md

@@ -13,7 +13,6 @@ tags: ["shortcodes"]
 categories: ["documentation"]
 
 hiddenFromHomePage: true
-repost: https://hugoloveit.com/theme-documentation-mermaid-shortcode/
 ---
 
 {{< version 0.2.15 changed >}}
@@ -26,6 +25,10 @@ The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaid
 
 Just insert your mermaid code in the `mermaid` shortcode and that’s it.
 
+{{< admonition tip >}}
+You can configure mermaid themes globally in `config.toml` via the `params.mermaid` parameter
+{{< /admonition >}}
+
 ## Flowchart {#flowchart}
 
 Example **flowchart** `mermaid` input:

exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.zh-cn.md

@@ -13,7 +13,6 @@ tags: ["shortcodes"]
 categories: ["documentation"]
 
 hiddenFromHomePage: true
-repost: https://hugoloveit.com/zh-cn/theme-documentation-mermaid-shortcode/
 ---
 
 {{< version 0.2.15 changed >}}
@@ -26,6 +25,10 @@ repost: https://hugoloveit.com/zh-cn/theme-documentation-mermaid-shortcode/
 
 只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
 
+{{< admonition tip >}}
+你可以在 `config.toml` 中通过 `params.mermaid` 参数全局配置 mermaid 的主题
+{{< /admonition >}}
+
 ## 流程图 {#flowchart}
 
 一个 **流程图** `mermaid` 示例:

layouts/partials/assets.html

@@ -120,6 +120,8 @@
 {{- if (.Scratch.Get "this").mermaid -}}
   {{- $source := $cdn.mermaidJS | default "lib/mermaid/mermaid.min.js" -}}
   {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- $mermaid := .Site.Params.mermaid -}}
+  {{- $config = dict "themes" $mermaid.themes | dict "mermaid" | merge $config -}}
 {{- end -}}
 
 {{- /* ECharts */ -}}

src/js/theme.js

@@ -586,7 +586,8 @@ class FixIt {
     this._mermaidOnSwitchTheme = this._mermaidOnSwitchTheme || (() => {
       const $mermaidElements = document.getElementsByClassName('mermaid');
       if ($mermaidElements.length) {
-        mermaid.initialize({startOnLoad: false, theme: this.isDark ? 'dark' : 'neutral', securityLevel: 'loose'});
+        const themes = this.config.mermaid.themes ?? ['neutral', 'dark'];
+        mermaid.initialize({startOnLoad: false, theme: this.isDark ? themes[1] : themes[0], securityLevel: 'loose'});
         this.util.forEach($mermaidElements, $mermaid => {
           mermaid.render('svg-' + $mermaid.id, this.data[$mermaid.id], svgCode => {
             $mermaid.innerHTML = svgCode;