refactor: optimize script loading and attribute handling

• Refactor renderJS helper to support module, async, and swup-reload options • Update script tags in various layouts to use new renderJS helper • Simplify conditional attribute handling in comment system templates • Remove redundant renderJSModule and renderJSPath helper functions • Adjust script loading order and attributes in scripts partial
EvanNotFound · Oct 19, 2024 · ff56dfa · ff56dfa
1 parent d524939
commit ff56dfa
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 151 deletions.
diff --git a/layout/_partials/comments/giscus.ejs b/layout/_partials/comments/giscus.ejs
@@ -5,7 +5,7 @@
         theme.comment.config.giscus.category_id
     ) { %>
     <div id="giscus-container"></div>
-    <script <%= theme.global.single_page === true ? 'data-swup-reload-script' : '' %> defer>
+    <script <%= theme.global.single_page === true && 'data-swup-reload-script' %> defer>
         async function loadGiscus() {
             const giscusConfig = {
                 'src': 'https://giscus.app/client.js',

diff --git a/layout/_partials/comments/gitalk.ejs b/layout/_partials/comments/gitalk.ejs
@@ -6,9 +6,9 @@
         && theme.comment.config.gitalk.repo
 ) { %>
     <div id="gitalk-container"></div>
-    <script <%= theme.global.single_page === true ? 'data-swup-reload-script' : '' %>
+    <script <%= theme.global.single_page === true && 'data-swup-reload-script' %>
             src="https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.8.0/gitalk.min.js"></script>
-    <script <%= theme.global.single_page === true ? 'data-swup-reload-script' : '' %>>
+    <script <%= theme.global.single_page === true && 'data-swup-reload-script' %>>
 
         function loadGitalk() {
             let __gitalk__pathname = decodeURI(location.pathname);

diff --git a/layout/_partials/comments/twikoo.ejs b/layout/_partials/comments/twikoo.ejs
@@ -1,10 +1,10 @@
 <% if(theme.comment.system === 'twikoo' && theme.comment.config.twikoo.server_url) { %>
     <div class="twikoo-container">
-        <script <%= theme.global.single_page === true ? 'data-swup-reload-script' : '' %>
+        <script <%= theme.global.single_page === true && 'data-swup-reload-script' %>
                 src='https://cdnjs.cloudflare.com/ajax/libs/twikoo/<%- theme.comment.config.twikoo.version %>/twikoo.all.min.js'
         ></script>
         <div id="twikoo-comment"></div>
-        <script <%= theme.global.single_page === true ? 'data-swup-reload-script' : '' %>>
+        <script <%= theme.global.single_page === true && 'data-swup-reload-script' %>>
             function loadTwikoo() {
                 twikoo.init({
                     el: '#twikoo-comment',
@@ -24,11 +24,11 @@
     </div>
 <% } else if (theme.comment.system === 'twikoo' && theme.comment.config.twikoo.server_url && theme.comment.config.twikoo.region) { %>
     <div class="twikoo-container">
-        <script <%= theme.global.single_page === true ? 'data-swup-reload-script' : '' %>
+        <script <%= theme.global.single_page === true && 'data-swup-reload-script' %>
                 src='<%- theme.comment_version.twikoo %>'
         ></script>
         <div id="twikoo-comment"></div>
-        <script <%= theme.global.single_page === true ? 'data-swup-reload-script' : '' %>>
+        <script <%= theme.global.single_page === true && 'data-swup-reload-script' %>>
             function loadTwikoo() {
                 twikoo.init({
                     el: '#twikoo-comment',

diff --git a/layout/_partials/footer.ejs b/layout/_partials/footer.ejs
@@ -33,7 +33,7 @@
             <% } %>
         </div>
         <% if (theme.global.website_counter.enable === true) { %>
-            <script <%= theme.global.single_page === true ? 'data-swup-reload-script' : '' %> src="<%= theme.global.website_counter.url ? theme.global.website_counter.url : "https://vercount.one/js" %>"></script>
+            <script <%= theme.global.single_page === true && 'data-swup-reload-script' %> src="<%= theme.global.website_counter.url ? theme.global.website_counter.url : "https://vercount.one/js" %>"></script>
             <div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right">
                 <% if (theme.global.website_counter.site_uv) { %>
                     <span id="busuanzi_container_site_uv" class="lg:!block">
@@ -68,7 +68,7 @@
             </div>
         <% } %>
         <% if (theme.footer.runtime === true) {%>
-            <script <%= theme.global.single_page === true ? 'data-swup-reload-script' : '' %>>
+            <script <%= theme.global.single_page === true && 'data-swup-reload-script' %>>
                 try {
                     function odometer_init() {
                     const elements = document.querySelectorAll('.odometer');

diff --git a/layout/_partials/scripts.ejs b/layout/_partials/scripts.ejs
@@ -1,23 +1,31 @@
-<%- renderJSModule([
+<%- renderJS([
     'js/tools/imageViewer.js',
     'js/utils.js',
     'js/main.js',
     'js/layouts/navbarShrink.js',
     'js/tools/scrollTopBottom.js',
     'js/tools/lightDarkSwitch.js',
     'js/layouts/categoryList.js'
-]) %>
+],{
+    module: true
+}) %>
 
 <% if (theme.navbar.search.enable) { %>
-    <%- renderJSModule('js/tools/localSearch.js') %>
+    <%- renderJS('js/tools/localSearch.js', {
+        module: true
+    }) %>
 <% } %>
 
 <% if (theme.articles.code_block.copy) { %>
-    <%- renderJSModule('js/tools/codeBlock.js') %>
+    <%- renderJS('js/tools/codeBlock.js', {
+        module: true
+    }) %>
 <% } %>
 
 <% if (theme.articles.lazyload) { %>
-    <%- renderJSModule('js/layouts/lazyload.js') %>
+    <%- renderJS('js/layouts/lazyload.js', {
+        module: true
+    }) %>
 <% } %>
 
 <% if (theme.footer.runtime) { %>
@@ -28,7 +36,9 @@
 
 <% if (theme.home_banner.subtitle.length !== 0) { %>
   <%- renderJS('js/libs/Typed.min.js') %>
-  <%- renderJSModule('js/plugins/typed.js') %>
+  <%- renderJS('js/plugins/typed.js', {
+      module: true
+  }) %>
 <% } %>
 
 <% if (theme.plugins.mermaid.enable) { %>
@@ -38,19 +48,24 @@
 
 <% if (theme.masonry || theme.photos || theme.gallery) { %>
     <%- renderJS('js/libs/minimasonry.min.js') %>
-    <%- renderJSModule('js/plugins/masonry.js') %>
+    <%- renderJS('js/plugins/masonry.js', {
+        module: true
+    }) %>
 <% } %>
 
 <% if (theme.global.preloader === false || theme.global.preloader.enable === false) { %>
     <%- renderJS('js/libs/anime.min.js')%>
 <% } %>
 
-<div class="post-scripts" <%= theme.global.single_page === true ? 'data-swup-reload-script' : '' %>>
-    <% if (theme.articles.toc.enable) { %>
-        <%- renderJSModule([
-            'js/tools/tocToggle.js',
-            'js/layouts/toc.js',
-            'js/plugins/tabs.js'
-        ]) %>
-    <% } %>
-</div>
+
+<% if (theme.articles.toc.enable) { %>
+    <%- renderJS([
+        'js/tools/tocToggle.js',
+        'js/layouts/toc.js',
+        'js/plugins/tabs.js'
+    ], {
+        module: true,
+        swupReload: true
+    }) %>
+<% } %>
+
diff --git a/layout/_widgets/essays.ejs b/layout/_widgets/essays.ejs
@@ -21,5 +21,6 @@
         <% } %>
     </ul>
 </div>
-<%- renderJS('js/libs/moment-with-locales.min.js') %>
-<%- renderJSModule('js/layouts/essays.js') %>
+<%- renderJS('js/libs/moment-with-locales.min.js', { swupReload: true }) %>
+<%- renderJS('js/layouts/essays.js', { swupReload: true, module: true }) %>
+
diff --git a/scripts/helpers/themeHelpers.js b/scripts/helpers/themeHelpers.js
@@ -88,70 +88,11 @@ hexo.extend.helper.register("getPostUrl", function (rootUrl, path) {
   }
 });
 
-hexo.extend.helper.register("renderJS", function (path) {
+hexo.extend.helper.register("renderJS", function (path, options = {}) {
   const _js = hexo.extend.helper.get("js").bind(hexo);
+  const { module = false, async = false, swupReload = false } = options;
 
   const cdnProviders = {
-    // FUCK STATICFILE, CDN POISONING
-    // FUCK BOOTCDN, CDN POISONING
-    sustech:
-      "https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/hexo-theme-redefine/:version/:path",
-    zstatic:
-      "https://s4.zstatic.net/ajax/libs/hexo-theme-redefine/:version/:path",
-    cdnjs:
-      "https://cdnjs.cloudflare.com/ajax/libs/hexo-theme-redefine/:version/:path",
-    unpkg: "https://unpkg.com/hexo-theme-redefine@:version/source/:path",
-    jsdelivr:
-      "https://cdn.jsdelivr.net/npm/hexo-theme-redefine@:version/source/:path",
-    aliyun:
-      "https://evan.beee.top/projects/hexo-theme-redefine@:version/source/:path",
-    npmmirror:
-      "https://registry.npmmirror.com/hexo-theme-redefine/:version/files/source/:path",
-    custom: this.theme.cdn.custom_url,
-  };
-
-  const cdnPathHandle = (path) => {
-    const cdnBase =
-      cdnProviders[this.theme.cdn.provider] || cdnProviders.npmmirror;
-    let jsScript;
-
-    if (this.theme.cdn.enable) {
-      if (this.theme.cdn.provider === "custom") {
-        const customUrl = cdnBase
-          .replace(":version", themeVersion)
-          .replace(":path", path);
-        jsScript = `<script src="${
-          this.theme.cdn.enable ? customUrl : _js(path)
-        }"></script>`;
-      } else {
-        jsScript = `<script src="${cdnBase
-          .replace(":version", themeVersion)
-          .replace(":path", path)}"></script>`;
-      }
-    } else {
-      jsScript = _js(path);
-    }
-
-    return jsScript;
-  };
-
-  let renderedScripts = "";
-
-  if (Array.isArray(path)) {
-    renderedScripts = path.map(cdnPathHandle).join("");
-  } else {
-    renderedScripts = cdnPathHandle(path);
-  }
-
-  return renderedScripts;
-});
-
-hexo.extend.helper.register("renderJSModule", function (path) {
-  const _js = hexo.extend.helper.get("js").bind(hexo);
-
-  const cdnProviders = {
-    // FUCK STATICFILE, CDN POISONING
-    // FUCK BOOTCDN, CDN POISONING
     sustech:
       "https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/hexo-theme-redefine/:version/:path",
     zstatic:
@@ -171,82 +112,34 @@ hexo.extend.helper.register("renderJSModule", function (path) {
   const cdnPathHandle = (path) => {
     const cdnBase =
       cdnProviders[this.theme.cdn.provider] || cdnProviders.npmmirror;
-    let jsModuleScript;
-
-    if (this.theme.cdn.enable) {
-      if (this.theme.cdn.provider === "custom") {
-        const customUrl = cdnBase
-          .replace(":version", themeVersion)
-          .replace(":path", path);
-        jsModuleScript = `<script type="module" src="${
-          this.theme.cdn.enable ? customUrl : _js({ src: path, type: "module" })
-        }"></script>`;
-      } else {
-        jsModuleScript = `<script type="module" src="${cdnBase
-          .replace(":version", themeVersion)
-          .replace(":path", path)}"></script>`;
-      }
-    } else {
-      jsModuleScript = _js({ src: path, type: "module" });
-    }
+    let scriptTag;
 
-    return jsModuleScript;
-  };
-
-  let renderedScripts = "";
-
-  if (Array.isArray(path)) {
-    renderedScripts = path.map(cdnPathHandle).join("");
-  } else {
-    renderedScripts = cdnPathHandle(path);
-  }
-
-  return renderedScripts;
-});
-
-hexo.extend.helper.register("renderJSPath", function (path) {
-  const _url_for = hexo.extend.helper.get("url_for").bind(hexo);
-
-  const cdnProviders = {
-    // FUCK STATICFILE, CDN POISONING
-    // FUCK BOOTCDN, CDN POISONING
-    sustech:
-      "https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/hexo-theme-redefine/:version/:path",
-    zstatic:
-      "https://s4.zstatic.net/ajax/libs/hexo-theme-redefine/:version/:path",
-    cdnjs:
-      "https://cdnjs.cloudflare.com/ajax/libs/hexo-theme-redefine/:version/:path",
-    unpkg: "https://unpkg.com/hexo-theme-redefine@:version/source/:path",
-    jsdelivr:
-      "https://cdn.jsdelivr.net/npm/hexo-theme-redefine@:version/source/:path",
-    aliyun:
-      "https://evan.beee.top/projects/hexo-theme-redefine@:version/source/:path",
-    npmmirror:
-      "https://registry.npmmirror.com/hexo-theme-redefine/:version/files/source/:path",
-    custom: this.theme.cdn.custom_url,
-  };
-
-  const cdnPathHandle = (path) => {
-    const cdnBase =
-      cdnProviders[this.theme.cdn.provider] || cdnProviders.npmmirror;
-    let jsScript;
+    const typeAttr = module ? 'type="module"' : "";
+    // const asyncAttr = async ? "async" : "";
+    const swupAttr = swupReload ? "data-swup-reload-script" : "";
 
     if (this.theme.cdn.enable) {
       if (this.theme.cdn.provider === "custom") {
         const customUrl = cdnBase
           .replace(":version", themeVersion)
           .replace(":path", path);
-        jsScript = this.theme.cdn.enable ? customUrl : _url_for(path);
+        scriptTag = `<script ${typeAttr} src="${
+          this.theme.cdn.enable ? customUrl : _js({ src: path })
+        }" ${swupAttr}></script>`;
       } else {
-        jsScript = `${cdnBase
+        scriptTag = `<script ${typeAttr} src="${cdnBase
           .replace(":version", themeVersion)
-          .replace(":path", path)}`;
+          .replace(":path", path)}" ${swupAttr}></script>`;
       }
     } else {
-      jsScript = _url_for(path);
+      scriptTag = _js({
+        src: path,
+        type: module ? "module" : undefined,
+        // async: async,
+      });
     }
 
-    return jsScript;
+    return scriptTag;
   };
 
   let renderedScripts = "";