perf: mermaid 懒加载

D-Sketon · May 25, 2024 · 23a065c · 23a065c
1 parent 28183e7
commit 23a065c
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 95 deletions.
diff --git a/README.en.md b/README.en.md
@@ -71,10 +71,10 @@ For correct display, please refer to `_example` and create separate `_data`, `ab
 
 #### \_data
 
-- The `avatar` folder stores the author's avatar, named `avatar.jpg` by default, and can be configured in the inner `_config.yml` as follows
+- The `avatar` folder stores the author's avatar, named `avatar.webp` by default, and can be configured in the inner `_config.yml` as follows
 
 ```yaml
-avatar: "avatar.jpg"
+avatar: "avatar.webp"
 ```
 
 - The `covers` folder stores the article covers
@@ -368,6 +368,15 @@ mermaid:
   enable: true
 ```
 
+and add ``mermaid: true`` to the front-matter of articles that need to use mermaid.
+
+```yaml
+---
+title: Hello World
+mermaid: true
+---
+```
+
 </details>
 <details>
 <summary>RSS</summary>

diff --git a/README.md b/README.md
@@ -89,10 +89,10 @@ theme: reimu
 
 #### \_data
 
-- `avatar` 文件夹中存储作者头像，默认命名 `avatar.jpg`，可在 内层 `_config.yml` 中做如下配置
+- `avatar` 文件夹中存储作者头像，默认命名 `avatar.webp`，可在 内层 `_config.yml` 中做如下配置
 
 ```yaml
-avatar: "avatar.jpg" # 默认就是在avatar文件夹内寻找，请不要包含路径，否则会404
+avatar: "avatar.webp" # 默认就是在avatar文件夹内寻找，请不要包含路径，否则会404
 ```
 
 - `covers` 文件夹中存储文章封面
@@ -386,6 +386,15 @@ mermaid:
   enable: true
 ```
 
+并在需要使用 mermaid 的文章的 front-matter 中添加 `mermaid: true`
+
+```yaml
+---
+title: Hello World
+mermaid: true
+---
+```
+
 </details>
 <details>
 <summary>RSS</summary>

diff --git a/_config.yml b/_config.yml
@@ -11,7 +11,7 @@ banner: "/images/banner.webp" # themes/reimu/source/images/banner.webp
 favicon: "/images/favicon.ico" # themes/reimu/source/images/favicon.ico
 # You can also write it in the form of the following url
 # favicon: "https://example.com"
-avatar: "avatar.jpg" # source/_data/avatar/avatar.jpg
+avatar: "avatar.webp" # source/_data/avatar/avatar.webp
 
 # Content
 excerpt_link: Read More
@@ -89,7 +89,7 @@ math:
 
 # need https://github.com/webappdevelp/hexo-filter-mermaid-diagrams
 mermaid: ## mermaid url https://github.com/knsv/mermaid
-  enable: false # default true
+  enable: false
 
 # valine comment system. https://valine.js.org
 # version 1.5.1
@@ -253,7 +253,7 @@ vendor:
     lazysizes: webcache|[email protected]/lazysizes.min.js
     fancybox: webcache|@fancyapps/[email protected]/dist/jquery.fancybox.min.js
     valine: webcache|[email protected]/dist/Valine.min.js
-    waline: webcache|@waline/client@v2/dist/waline.mjs
+    waline: webcache|@waline/client@2.15.8/dist/waline.mjs
     twikoo: webcache|[email protected]/dist/twikoo.all.min.js
     gitalk: webcache|gitalk/dist/gitalk.min.js
     busuanzi: webcache|[email protected]/bsz.pure.mini.js

diff --git a/_example/_data/avatar/avatar.jpg b/_example/_data/avatar/avatar.jpg
diff --git a/_example/_data/avatar/avatar.webp b/_example/_data/avatar/avatar.webp
diff --git a/layout/_partial/after-footer.ejs b/layout/_partial/after-footer.ejs
@@ -9,71 +9,6 @@
   <%- js({src: vendorCdn(theme.vendor.js.busuanzi)[0], async: true}) %>
 <% } %>
 
-<% if (theme.mermaid.enable) { %>
-  <%- js(vendorCdn(theme.vendor.js.mermaid)) %>
-  <script>
-    if (window.mermaid) {
-      // 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 = (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({src: 'js/pjax_script.js', 'data-pjax': true}) %>
 
 <% if (theme.valine.enable && theme.valine.appId && theme.valine.appKey) { %>
@@ -211,45 +146,51 @@
 <% if (theme.pjax.enable) { %>
   <%- js(vendorCdn(theme.vendor.js.pjax)) %>
   <script>
+    function loadScripts(scripts, index) {
+      if (index < scripts.length) {
+        var script = scripts[index];
+
+        if ($(script).attr('src')) {
+          $.ajax({
+            url: $(script).attr('src'),
+            dataType: 'script',
+            success: () => {
+              loadScripts(scripts, index + 1);
+            },
+            error: (xhr, status, error) => {
+              console.error('Failed to load script:', $(script).attr('src'), error);
+            }
+          });
+        } else {
+          eval($(script).text());
+          loadScripts(scripts, index + 1);
+        }
+      }
+    }
     new Pjax({
       selectors: [
         "#header-title",
         "#subtitle-wrap",
         "#content",
         '#mobile-nav',
+        '#lazy-script'
       ],
       switches: {
         "#header-title": Pjax.switches.outerHTML,
         "#subtitle-wrap": Pjax.switches.outerHTML,
         "#content": function(oldEl, newEl, options) {
-          function loadScripts(scripts, index) {
-            if (index < scripts.length) {
-              var script = scripts[index];
-
-              if ($(script).attr('src')) {
-                $.ajax({
-                  url: $(script).attr('src'),
-                  dataType: 'script',
-                  success: () => {
-                    loadScripts(scripts, index + 1);
-                  },
-                  error: (xhr, status, error) => {
-                    console.error('Failed to load script:', $(script).attr('src'), error);
-                  }
-                });
-              } else {
-                eval($(script).text());
-                loadScripts(scripts, index + 1);
-              }
-            }
-          }
-
           const scripts = $(newEl.outerHTML).find('script').toArray();
           loadScripts(scripts, 0);
           oldEl.outerHTML = newEl.outerHTML
           this.onSwitch()
         },
-        "#mobile-nav": Pjax.switches.outerHTML
+        "#mobile-nav": Pjax.switches.outerHTML,
+        '#lazy-script': function(oldEl, newEl, options) {
+          const scripts = $(newEl.outerHTML).find('script').toArray();
+          loadScripts(scripts, 0);
+          oldEl.innerHTML = newEl.innerHTML
+          this.onSwitch()
+        },
       },
       cacheBust: false
     })
@@ -266,6 +207,86 @@
   <%- js({src: vendorCdn(theme.vendor.js.live2d.js)[0], onload: "initLive2d && initLive2d()", async: true})%>
 <% } %>
 
+<div id="lazy-script">
+  <div>
+    <% if (theme.mermaid.enable && page.mermaid) { %>
+      <%- js({src: vendorCdn(theme.vendor.js.mermaid)[0], 'data-pjax': true}) %>
+      <script data-pjax>
+        if (window.mermaid) {
+          // 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 = (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)
+          })
+          if(localStorage.getItem('dark_mode') == 'true') {
+            saveOriginalData()
+            .then(resetProcessed())
+            .then(loadMermaid('dark'))
+            .catch(console.error)
+          } else {
+            saveOriginalData()
+            .then(resetProcessed())
+            .then(loadMermaid('default'))
+            .catch(console.error)
+          }
+        }
+      </script>
+    <% } %>
+  </div>
+</div>
+
 <%- js('js/script.js') %>
 
 <%- copyright() %>
diff --git a/source/css/iconfont.styl b/source/css/iconfont.styl
@@ -8,6 +8,7 @@ _c = '//at.alicdn.com/t/c/font_' + id + '.ttf'
   src: url(_a) format('woff2'),
        url(_b) format('woff'),
        url(_c) format('truetype');
+  font-display: swap;
 
 .tag-wrap
   .archives-tag-list-link