fix: pjax下mermaid异常

_config.yml

@@ -251,7 +251,7 @@ vendor:
     algolia: https://unpkg.com/[email protected]/dist/algoliasearch-lite.umd.js
     instantsearch: https://unpkg.com/[email protected]/dist/instantsearch.production.min.js
     pace: https://unpkg.com/[email protected]/pace.min.js
-    mermaid: https://unpkg.com/mermaid@9.4.3/dist/mermaid.min.js
+    mermaid: https://unpkg.com/mermaid@10.6.1/dist/mermaid.min.js
     wow: https://unpkg.com/[email protected]/dist/wow.min.js
     firework: https://www.unpkg.com/[email protected]/dist/index.umd.js
     pjax: https://www.unpkg.com/[email protected]/dist/index.umd.js

layout/404.ejs

@@ -6,7 +6,6 @@
     <div id="wrap">
       <%- partial('_partial/header', {post: page}, {cache: !config.relative_link}) %>
     </div>
-    <%- partial('_partial/after-footer') %>
   </div>
   <div class="site-search">
     <div class="reimu-popup popup">
@@ -22,5 +21,6 @@
       <span class="popup-btn-close"></span>
     </div>
   </div>
+  <%- partial('_partial/after-footer') %>
 </body>
 </html>

layout/_partial/after-footer.ejs

@@ -6,7 +6,7 @@
   <%- js(theme.vendor.js.fancybox) %>
 <% } %>
 <% if (theme.footer.busuanzi) { %>
-  <%- js(theme.vendor.js.busuanzi) %>
+  <%- js({src: theme.vendor.js.busuanzi, defer: true}) %>
 <% } %>
 
 <%- copyright() %>
@@ -15,14 +15,67 @@
   <%- js(theme.vendor.js.mermaid) %>
   <script>
     if (window.mermaid) {
-      mermaid.initialize({
-        theme: 'forest'
-      });
+      // https://github.com/mermaid-js/mermaid/issues/1945
+      const elementCode = '.mermaid'
+      const saveOriginalData = () => {
+        return new Promise((resolve, reject) => {
+          try {
+            var els = document.querySelectorAll(elementCode),
+                count = els.length;
+            els.forEach(element => {
+              if (element.getAttribute('data-original-code') == null){
+                element.setAttribute('data-original-code', element.innerHTML)
+              }
+              count--
+              if(count == 0){
+                resolve()
+              }
+            });
+          } catch (error) {
+          reject(error) 
+          }
+        })
+      }
+      const resetProcessed = () => {
+        return new Promise((resolve, reject) => {
+          try {
+            var els = document.querySelectorAll(elementCode),
+                count = els.length;
+            els.forEach(element => {
+              if(element.getAttribute('data-original-code') != null){
+                element.removeAttribute('data-processed')
+                element.innerHTML = element.getAttribute('data-original-code')
+              }
+              count--
+              if(count == 0){
+                resolve()
+              }
+            });
+          } catch (error) {
+          reject(error) 
+          }
+        })
+      } 
+      const loadMermaid = function(theme) {
+          window.mermaid.initialize({theme})
+          window.mermaid.init({theme}, document.querySelectorAll(elementCode))
+        }
+      document.body.addEventListener('dark-theme-set', ()=>{
+        saveOriginalData()
+        .then(resetProcessed())
+        .then(loadMermaid('dark'))
+        .catch(console.error)
+      })
+      document.body.addEventListener('light-theme-set', ()=>{
+        saveOriginalData()
+        .then(resetProcessed())
+        .then(loadMermaid('default'))
+        .catch(console.error)
+      })
     }
   </script>
 <% } %>
 
-<%- js('js/script.js') %>
 <%- js({src: 'js/pjax_script.js', 'data-pjax': true}) %>
 <%- partial('analytics/gauges-analytics') %>
 
@@ -212,3 +265,5 @@
     });
   </script>
 <% } %>
+
+<%- js('js/script.js') %>

layout/_partial/analytics/google-analytics.ejs

@@ -1,6 +1,6 @@
 <% if (theme.google_analytics) { %>
   <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script data-pjax async src="https://www.googletagmanager.com/gtag/js?id=<%= theme.google_analytics %>"></script>
+  <script data-pjax src="https://www.googletagmanager.com/gtag/js?id=<%= theme.google_analytics %>"></script>
   <script data-pjax>
     window.dataLayer = window.dataLayer || [];
 

layout/layout.ejs

@@ -26,7 +26,6 @@
         <div id="mask"></div>
       </div>
       <%- partial('_partial/mobile-nav', null, {cache: false}) %>
-      <%- partial('_partial/after-footer') %>
     </div>
     <div class="site-search">
       <div class="reimu-popup popup">
@@ -42,6 +41,7 @@
         <span class="popup-btn-close"></span>
       </div>
     </div>
+    <%- partial('_partial/after-footer') %>
   </body>
   </html>
 <% } %>

source/js/pjax.js

@@ -31,6 +31,12 @@ $(document).ready(function () {
   })
   window.addEventListener('pjax:complete', () => {
     $('#header-nav').removeClass('header-nav-hidden')
+    mode = window.localStorage.getItem('dark_mode')
+    if (mode == 'true') {
+      document.body.dispatchEvent(new CustomEvent('dark-theme-set'))
+    } else if (mode == 'false') {
+      document.body.dispatchEvent(new CustomEvent('light-theme-set'))
+    }
   })
   if (startLoading)
     window.addEventListener('pjax:send', startLoading)

source/js/script.js

@@ -18,22 +18,25 @@
   mode = window.localStorage.getItem('dark_mode')
   if (mode == 'true') {
     $('#sub-nav').append('<a id="nav-sun-btn" class="nav-icon dark-mode-btn"></a>')
+    document.body.dispatchEvent(new CustomEvent('dark-theme-set'))
   } else if (mode == 'false') {
     $('#sub-nav').append('<a id="nav-moon-btn" class="nav-icon dark-mode-btn"></a>')
+    document.body.dispatchEvent(new CustomEvent('light-theme-set'))
   }
   $('.dark-mode-btn').on('click', function () {
     const id = $(this).attr('id')
     if (id == 'nav-sun-btn') {
       window.localStorage.setItem('dark_mode', 'false')
+      document.body.dispatchEvent(new CustomEvent('light-theme-set'))
       document.documentElement.removeAttribute('data-theme')
       $(this).attr("id", "nav-moon-btn")
     } else {
       window.localStorage.setItem('dark_mode', 'true')
+      document.body.dispatchEvent(new CustomEvent('dark-theme-set'))
       document.documentElement.setAttribute('data-theme', 'dark')
       $(this).attr("id", "nav-sun-btn")
     }
   })
-
   // Share
   $('body').on('click', () => {
     $('.article-share-box.on').removeClass('on');