Remove custom Mermaid viewBox fix and switch to unpkg for assets

Switch Mermaid CDN to unpkg and add footer with ICP info
2026-05-21 09:53:42 +08:00
parent 805ad85380
commit fd7946b686
5 changed files with 160 additions and 54 deletions
@@ -82,6 +82,7 @@ params:
    displayCopyright: true
    displayPoweredBy: false
    width: normal
+    icp: "粤ICP备2026061516号"

  # 日期
  displayUpdatedDate: false
@@ -94,6 +95,7 @@ params:
    flexsearch:
      index: content
      tokenize: forward
+      base: "https://unpkg.com/flexsearch@0.7.43/dist"

  # 博客
  blog:
@@ -138,7 +140,9 @@ params:

  # Mermaid 流程图（本地加载，避免 CDN 连接问题）
  mermaid:
-    base: "https://cdn.jsdelivr.net/npm/mermaid@11.15.0/dist"
+    base: "https://unpkg.com/mermaid@11.4.1/dist"
+    lightTheme: neutral
+    darkTheme: dark

  # Open Graph / SEO 增强
  opengraph:
@@ -9,56 +9,3 @@
            });
    });
 </script>
-
-<!-- Mermaid config + viewBox from all g elements -->
-<script>
-    (function () {
-        function patch() {
-            if (typeof mermaid === "undefined") return setTimeout(patch, 50);
-            var orig = mermaid.initialize;
-            mermaid.initialize = function (cfg) {
-                cfg = cfg || {};
-                cfg.flowchart = cfg.flowchart || {};
-                cfg.flowchart.useMaxWidth = true;
-                cfg.flowchart.wrappingWidth = 180;
-                cfg.theme = "base";
-                cfg.themeVariables = cfg.themeVariables || {};
-                return orig.call(this, cfg);
-            };
-        }
-        patch();
-
-        function fixViewBox() {
-            document.querySelectorAll(".mermaid svg").forEach(function (svg) {
-                if (svg.getAttribute("aria-roledescription") === "pie") return;
-                var groups = svg.querySelectorAll("g");
-                if (!groups.length) return;
-                var minX = Infinity,
-                    minY = Infinity,
-                    maxX = -Infinity,
-                    maxY = -Infinity;
-                groups.forEach(function (g) {
-                    var bb = g.getBBox();
-                    if (bb.width === 0 || bb.height === 0) return;
-                    if (bb.x < minX) minX = bb.x;
-                    if (bb.y < minY) minY = bb.y;
-                    if (bb.x + bb.width > maxX) maxX = bb.x + bb.width;
-                    if (bb.y + bb.height > maxY) maxY = bb.y + bb.height;
-                });
-                if (!isFinite(minX)) return setTimeout(fixViewBox, 200);
-                var pad = 16;
-                svg.setAttribute(
-                    "viewBox",
-                    [
-                        minX - pad,
-                        minY - pad,
-                        maxX - minX + pad * 2,
-                        maxY - minY + pad * 2,
-                    ].join(" "),
-                );
-            });
-        }
-        setTimeout(fixViewBox, 600);
-        setTimeout(fixViewBox, 1200);
-    })();
-</script>
@@ -0,0 +1,42 @@
+{{- $enableFooterSwitches := .Store.Get "enableFooterSwitches" | default false -}}
+{{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}}
+{{- $footerSwitchesVisible := and $enableFooterSwitches (or hugo.IsMultilingual $displayThemeToggle) -}}
+{{- $copyrightSectionVisible := or (.Site.Params.footer.displayPoweredBy | default true) .Site.Params.footer.displayCopyright -}}
+
+{{- $copyright := (T "copyright") | default "© 2024 Hextra." -}}
+{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
+
+<footer class="hextra-footer hx:bg-gray-100 hx:pb-[env(safe-area-inset-bottom)] hx:dark:bg-neutral-900 hx:print:bg-transparent">
+  {{- if $footerSwitchesVisible -}}
+    <div class="hx:mx-auto hx:flex hx:gap-2 hx:py-2 hx:px-4 hextra-max-footer-width">
+      {{- partial "language-switch.html" (dict "context" .) -}}
+      {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
+    </div>
+    {{- if or hugo.IsMultilingual $displayThemeToggle -}}
+      <hr class="hx:border-gray-200 hx:dark:border-neutral-800" />
+    {{- end -}}
+  {{- end -}}
+  <div class="hextra-custom-footer hextra-max-footer-width hx:mx-auto hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-right),1.5rem)] hx:text-gray-600 hx:dark:text-gray-400">
+    {{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}}
+  </div>
+  {{- if $copyrightSectionVisible -}}
+    <div class="hextra-max-footer-width hx:mx-auto hx:flex hx:justify-center hx:py-12 hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-right),1.5rem)] hx:text-gray-600 hx:dark:text-gray-400 hx:md:justify-start">
+      <div class="hx:flex hx:w-full hx:flex-col hx:items-center hx:sm:items-start">
+        {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx:font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{- end -}}
+        {{- if .Site.Params.footer.displayCopyright }}<div class="hx:mt-6 hx:text-xs">{{ $copyright | markdownify }}</div>{{- end -}}
+        {{- with .Site.Params.footer.icp }}<div class="hx:mt-2 hx:text-xs"><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:none">{{ . }}</a></div>{{- end -}}
+      </div>
+    </div>
+  {{- end -}}
+</footer>
+
+{{- define "theme-credit" -}}
+  <a class="hx:flex hx:text-sm hx:items-center hx:gap-1 hx:text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
+    <span>
+      {{- . | markdownify -}}
+      {{- if strings.Contains . "Hextra" -}}
+        {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx:inline-block hx:ltr:ml-1 hx:rtl:mr-1 hx:align-[-2.5px]"`) -}}
+      {{- end -}}
+    </span>
+  </a>
+{{- end -}}
@@ -0,0 +1,113 @@
+{{- /* Mermaid */ -}}
+
+{{- $mermaidBase := "" -}}
+{{- $useDefaultCdn := true -}}
+{{- with site.Params.mermaid.base -}}
+  {{- $mermaidBase = . -}}
+  {{- $useDefaultCdn = false -}}
+{{- end -}}
+
+{{- $mermaidJsAsset := "" -}}
+{{- with site.Params.mermaid.js -}}
+  {{- $mermaidJsAsset = . -}}
+{{- end -}}
+
+{{- /* If only js is set without base, use local asset loading */ -}}
+{{- if and $useDefaultCdn (ne $mermaidJsAsset "") -}}
+  {{- $useDefaultCdn = false -}}
+{{- end -}}
+
+{{- /* Set default CDN base if needed */ -}}
+{{- if $useDefaultCdn -}}
+  {{- $mermaidBase = "https://cdn.jsdelivr.net/npm/mermaid@latest/dist" -}}
+{{- end -}}
+
+{{- $isRemoteBase := or (strings.HasPrefix $mermaidBase "http://") (strings.HasPrefix $mermaidBase "https://") -}}
+{{- $minSuffix := cond hugo.IsProduction ".min" "" -}}
+
+{{- /* JS retrieval: get raw JS from either local asset or remote, then process */ -}}
+{{- if $isRemoteBase -}}
+  {{- $jsPath := cond (ne $mermaidJsAsset "") $mermaidJsAsset (printf "mermaid%s.js" $minSuffix) -}}
+  {{- $mermaidJsUrl := urls.JoinPath $mermaidBase $jsPath -}}
+  {{- with try (resources.GetRemote $mermaidJsUrl) -}}
+    {{- with .Err -}}
+      {{- errorf "Could not retrieve Mermaid js file from %s. Reason: %s." $mermaidJsUrl . -}}
+    {{- else with .Value -}}
+      {{- with resources.Copy (printf "js/mermaid%s.js" $minSuffix) . -}}
+        {{- $mermaidJs := . | fingerprint -}}
+        <script defer src="{{ $mermaidJs.RelPermalink }}" integrity="{{ $mermaidJs.Data.Integrity }}" crossorigin="anonymous"></script>
+      {{- end -}}
+    {{- end -}}
+  {{- end -}}
+{{- else if $mermaidJsAsset -}}
+  {{- with resources.Get $mermaidJsAsset -}}
+    {{- $mermaidJs := . | fingerprint -}}
+    <script defer src="{{ $mermaidJs.RelPermalink }}" integrity="{{ $mermaidJs.Data.Integrity }}" crossorigin="anonymous"></script>
+  {{- else -}}
+    {{- errorf "Mermaid js asset not found at %q" $mermaidJsAsset -}}
+  {{- end -}}
+{{- end -}}
+
+{{- $lightTheme := site.Params.mermaid.lightTheme | default "neutral" -}}
+{{- $darkTheme  := site.Params.mermaid.darkTheme  | default "dark" -}}
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll(".mermaid").forEach((el) => {
+      el.dataset.original = el.innerHTML;
+    });
+
+    const isDark = document.documentElement.classList.contains("dark");
+    const theme = isDark ? "{{ $darkTheme }}" : "{{ $lightTheme }}";
+
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: theme,
+      flowchart: { useMaxWidth: true, wrappingWidth: 180 }
+    });
+
+    let timeout;
+    new MutationObserver(() => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        const isDark = document.documentElement.classList.contains("dark");
+        const theme = isDark ? "{{ $darkTheme }}" : "{{ $lightTheme }}";
+        document.querySelectorAll(".mermaid").forEach((el) => {
+          el.innerHTML = el.dataset.original;
+          el.removeAttribute("data-processed");
+        });
+        mermaid.initialize({
+          startOnLoad: true,
+          theme: theme,
+          flowchart: { useMaxWidth: true, wrappingWidth: 180 }
+        });
+        mermaid.init();
+        setTimeout(fixViewBox, 600);
+        setTimeout(fixViewBox, 1200);
+      }, 400);
+    }).observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    setTimeout(fixViewBox, 600);
+    setTimeout(fixViewBox, 1200);
+
+    function fixViewBox() {
+      document.querySelectorAll(".mermaid svg").forEach(function (svg) {
+        if (svg.getAttribute("aria-roledescription") === "pie") return;
+        var groups = svg.querySelectorAll("g");
+        if (!groups.length) return;
+        var maxX = -Infinity, maxY = -Infinity;
+        groups.forEach(function (g) {
+          var bb = g.getBBox();
+          if (bb.width === 0 || bb.height === 0) return;
+          if (bb.x + bb.width > maxX) maxX = bb.x + bb.width;
+          if (bb.y + bb.height > maxY) maxY = bb.y + bb.height;
+        });
+        if (!isFinite(maxX)) return setTimeout(fixViewBox, 200);
+        svg.setAttribute("viewBox", [-8, -8, maxX + 16, maxY + 16].join(" "));
+      });
+    }
+  });
+</script>