feat: 添加 Mermaid 内置支持

README.md

@@ -86,6 +86,7 @@
     - [最新开发版获取方法](#最新开发版获取方法)
   - [可选插件（主题使用者必看章节！）](#可选插件主题使用者必看章节)
     - [Mermaid 明暗切换支持](#mermaid-明暗切换支持)
+      - [使用默认编辑器](#使用默认编辑器)
       - [使用 Vditor 编辑器](#使用-vditor-编辑器)
   - [进行此项目的开发](#进行此项目的开发)
     - [开发前准备](#开发前准备)
@@ -406,32 +407,32 @@ Release v1.2.1 包括之后的版本已上架 halo 应用市场，直接到商
 
 ### Mermaid 明暗切换支持
 
-<!-- #### 使用默认编辑器
+#### 使用默认编辑器
 
-1. 需插件 [plugin-text-diagram](https://github.com/halo-sigs/plugin-text-diagram), [plugin-hybrid-edit-block](https://github.com/halo-sigs/plugin-hybrid-edit-block)
-2. 进入 [plugin-text-diagram](https://github.com/halo-sigs/plugin-text-diagram) 插件配置，`mermaid-CSS选择器` 需添加 `div.language-mermaid` （例：`text-diagram[data-type=mermaid],div.language-mermaid`）
+1. 需插件 [plugin-hybrid-edit-block](https://github.com/halo-sigs/plugin-hybrid-edit-block)
+2. 进入主题配置，启用 `全局-Mermaid 支持`
 3. 默认编辑器中输入 `/html` 选择插入 html 代码块
 
 输入以下内容，将 `[[图表标题]]` 和 `[[图表正文]]` 换成你自己的内容，
 即可适配明暗切换
 
 ```
-<div class="language-mermaid dark">
+<div class="mermaid dark">
 ---
 title: [[图表标题]]
 ---
 %%{init: { "theme": "dark" } }%%
 [[图表正文]]
 </div>
 
-<div class="language-mermaid light">
+<div class="mermaid light">
 ---
 title: [[图表标题]]
 ---
 %%{init: { "theme": "light" } }%%
 [[图表正文]]
 </div>
-``` -->
+```
 
 #### 使用 [Vditor 编辑器](https://github.com/justice2001/halo-plugin-vditor)
 

i18n-settings/settings.en.yaml

@@ -82,6 +82,28 @@ spec:
             - label: Disable
               value: false
           help: "If enabled, the theme will automatically load the instant.page script to improve the page loading speed."
+        - $formkit: radio
+          name: is_mermaid_enable
+          label: Mermaid support
+          value: false
+          options:
+            - label: Enable
+              value: true
+            - label: Disable
+              value: false
+          help: If enabled, the theme will automatically load the Mermaid script
+        - $formkit: text
+          name: mermaid_selector
+          if: "$is_mermaid_enable === true"
+          label: Mermaid CSS selector
+          help: CSS selector for Mermaid diagrams
+          value: ".content .mermaid"
+        - $formkit: text
+          name: mermaid_script_url
+          if: "$is_mermaid_enable === true"
+          label: Mermaid Script URL
+          help: "URL to the Mermaid script. Example: https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs"
+          value: "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs"
     - group: styles
       label: Style
       formSchema:

settings.yaml

@@ -82,6 +82,28 @@ spec:
             - label: 关闭
               value: false
           help: 如启用此项，主题将自动加载 instant.page 脚本，以提升页面加载速度。
+        - $formkit: radio
+          name: is_mermaid_enable
+          label: Mermaid 支持
+          value: false
+          options:
+            - label: 开启
+              value: true
+            - label: 关闭
+              value: false
+          help: 如启用此项，主题将自动加载 Mermaid 脚本，以启用对应支持。
+        - $formkit: text
+          name: mermaid_selector
+          if: "$is_mermaid_enable === true"
+          label: "Mermaid CSS 选择器"
+          help: "CSS 选择器，用于指定 Mermaid 渲染的区域。默认值为 .content .mermaid"
+          value: ".content .mermaid"
+        - $formkit: text
+          name: mermaid_script_url
+          if: "$is_mermaid_enable === true"
+          label: "Mermaid 脚本地址"
+          help: "指定脚本地址，默认值：https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs"
+          value: "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs"
     - group: styles
       label: 总体样式
       formSchema:

templates/fragments/layout.html

@@ -59,6 +59,39 @@
       type="module"
       defer
     ></script>
+    <!--/* Mermaid */-->
+    <script type="module" th:inline="javascript" th:if="${theme.config?.global?.is_mermaid_enable}">
+      import mermaid from /*[[${theme.config?.global?.mermaid_script_url}]]*/ "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
+      function genUUID() {
+        return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+          (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+        );
+      }
+      const config = { startOnLoad: false };
+      mermaid.initialize(config);
+      const mermaidElements = document.querySelectorAll(
+        /*[[${theme.config?.global?.mermaid_selector}]]*/ ".content .mermaid"
+      );
+      mermaidElements.forEach(async (item) => {
+        const code = item.textContent;
+        if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
+          return;
+        }
+        const id = "mermaid" + genUUID();
+        mermaid
+          .render(id, item.textContent)
+          .then((mermaidData) => {
+            item.innerHTML = mermaidData.svg;
+          })
+          .catch((e) => {
+            const errorElement = document.querySelector("#" + id);
+            item.innerHTML = `${errorElement.outerHTML}<br>
+<div style="text-align: left"><small>${e.message.replace(/\n/, "<br>")}</small></div>`;
+            errorElement.parentElement.remove();
+          });
+        item.setAttribute("data-processed", "true");
+      });
+    </script>
 
     <script th:if="${theme.config?.styles?.is_dark_mode_switch_show}">
       function updateThemeIcon(theme) {