From c9ba9ed2a2ae811349f79484b620812fb65ee12f Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Thu, 20 Oct 2022 23:08:07 +0800
Subject: [PATCH] perf(cdn, comment): optimized CDN resource loading for
 comment plugins

---
 layout/_partial/comment/gitalk.ejs |  28 ++++--
 layout/_partial/comment/twikoo.ejs |  22 ++++-
 layout/_partial/comment/valine.ejs | 131 ++++++++++++++++-------------
 layout/_partial/comment/waline.ejs |  36 +++++---
 scripts/helpers/helper.js          |   3 +-
 5 files changed, 139 insertions(+), 81 deletions(-)

diff --git a/layout/_partial/comment/gitalk.ejs b/layout/_partial/comment/gitalk.ejs
index fc91230..20c14e4 100644
--- a/layout/_partial/comment/gitalk.ejs
+++ b/layout/_partial/comment/gitalk.ejs
@@ -1,10 +1,27 @@
-<% const {
-  client_id,
+<%
+const {
+    client_id,
     client_secret,
     repository,
     github_id,
     github_admins
-} = theme.comment.gitalk
+} = theme.comment?.gitalk
+let cdn_css = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css'
+let cdn_js = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js'
+const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
+if (t_cdn_enable === true) {
+    switch (t_cdn_provider) {
+        case 'jsdelivr':
+            cdn_css = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css'
+            cdn_js = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js'
+            break
+
+        case 'unpkg':
+            cdn_css = '//unpkg.com/gitalk/dist/gitalk.css'
+            cdn_js = '//unpkg.com/gitalk/dist/gitalk.min.js'
+            break
+    }
+}
 %>
 
 <% if(
@@ -16,9 +33,8 @@
 ) { %>
     <div class="gitalk-comment-container">
         <div id="gitalk-container"></div>
-        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
-        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
-                src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
+        <link rel="stylesheet" href="<%= cdn_css %>">
+        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
         <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
           function loadGitalk() {
             let __gitalk__pathname = decodeURI(location.pathname);
diff --git a/layout/_partial/comment/twikoo.ejs b/layout/_partial/comment/twikoo.ejs
index faf30f3..01c0ec1 100644
--- a/layout/_partial/comment/twikoo.ejs
+++ b/layout/_partial/comment/twikoo.ejs
@@ -1,12 +1,26 @@
 <%
-const {enable: pjax_enable} = theme.pjax
+const { enable: pjax_enable } = theme?.pjax
 let {
-    env_id: tk_env_id, region: tk_region, version: tk_version
-} = theme.comment.twikoo
+    env_id: tk_env_id,
+    region: tk_region,
+    version: tk_version
+} = theme.comment?.twikoo
 if (!tk_version) {
     tk_version = '1.6.7'
 }
-const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
+const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
+let twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
+if (t_cdn_enable === true) {
+    switch (t_cdn_provider) {
+        case 'jsdelivr':
+            twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
+            break
+
+        case 'unpkg':
+            twikoo_cdn_url = `//unpkg.com/twikoo@${tk_version}/dist/twikoo.all.min.js`
+            break
+    }
+}
 %>
 <% if(theme.comment.use === 'twikoo' && tk_env_id) { %>
     <div class="twikoo-container">
diff --git a/layout/_partial/comment/valine.ejs b/layout/_partial/comment/valine.ejs
index e15943a..a192daf 100755
--- a/layout/_partial/comment/valine.ejs
+++ b/layout/_partial/comment/valine.ejs
@@ -1,66 +1,83 @@
-<% if(
-        theme.comment.use === 'valine'
-        && theme.comment.valine.appid
-        && theme.comment.valine.appkey
-) { %>
+<%
+const { enable: pjax_enable } = theme?.pjax
+const {
+    appid,
+    appkey,
+    placeholder
+} = theme.comment?.valine
+let cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
+const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
+if (t_cdn_enable === true) {
+    switch (t_cdn_provider) {
+        case 'jsdelivr':
+            cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
+            break
+
+        case 'unpkg':
+            cdn_url = '//unpkg.com/valine@latest/dist/Valine.min.js'
+            break
+    }
+}
+%>
+
+<% if(appid && appkey) { %>
     <div class="valine-container">
-        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
-                src="//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js"></script>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_url %>"></script>
         <div id="vcomments"></div>
-        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
-            function loadValine() {
-                new Valine({
-                    el: '#vcomments',
-                    appId: '<%= theme.comment.valine.appid %>',
-                    appKey: '<%= theme.comment.valine.appkey %>',
-                    meta: ['nick', 'mail', 'link'],
-                    avatar: 'wavatar',
-                    enableQQ: true,
-                    placeholder: '<%= theme.comment.valine.placeholder %>',
-                    lang: '<%= config.language %>'.toLowerCase()
-                });
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
+          function loadValine() {
+            new Valine({
+              el: '#vcomments',
+              appId: '<%= appid %>',
+              appKey: '<%= appkey %>',
+              meta: ['nick', 'mail', 'link'],
+              avatar: 'wavatar',
+              enableQQ: true,
+              placeholder: '<%= placeholder %>',
+              lang: '<%= config.language %>'.toLowerCase()
+            });
 
-                function getAuthor(language) {
-                    switch (language) {
-                        case 'en':
-                            return 'Author';
-                        case 'zh-CN':
-                            return '博主';
-                        default:
-                            return 'Master';
+            function getAuthor(language) {
+              switch (language) {
+                case 'en':
+                  return 'Author';
+                case 'zh-CN':
+                  return '博主';
+                default:
+                  return 'Master';
+              }
+            }
+
+            // Add "Author" identify
+            const getValineDomTimer = setInterval(() => {
+              const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
+              if (vcards.length > 0) {
+                let author = '<%= theme.base_info.author || config.author %>';
+
+                if (author) {
+                  for (let vcard of vcards) {
+                    const vnick_dom = vcard.querySelector('.vhead .vnick');
+                    const vnick = vnick_dom.innerHTML;
+                    if (vnick === author) {
+                      vnick_dom.innerHTML = `${vnick} <span class="author">${getAuthor(KEEP.hexo_config.language)}</span>`
                     }
+                  }
                 }
+                clearInterval(getValineDomTimer);
+              } else {
+                clearInterval(getValineDomTimer);
+              }
+            }, 2000);
+          }
 
-                // Add "Author" identify
-                const getValineDomTimer = setInterval(() => {
-                    const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
-                    if (vcards.length > 0) {
-                        let author = '<%= theme.base_info.author || config.author %>';
-
-                        if (author) {
-                            for (let vcard of vcards) {
-                                const vnick_dom = vcard.querySelector('.vhead .vnick');
-                                const vnick = vnick_dom.innerHTML;
-                                if (vnick === author) {
-                                    vnick_dom.innerHTML = `${vnick} <span class="author">${getAuthor(KEEP.hexo_config.language)}</span>`
-                                }
-                            }
-                        }
-                        clearInterval(getValineDomTimer);
-                    } else {
-                        clearInterval(getValineDomTimer);
-                    }
-                }, 2000);
-            }
-
-            if ('<%= theme.pjax.enable %>' === 'true') {
-                const loadValineTimeout = setTimeout(() => {
-                    loadValine();
-                    clearTimeout(loadValineTimeout);
-                }, 1000);
-            } else {
-                window.addEventListener('DOMContentLoaded', loadValine);
-            }
+          if ('<%= pjax_enable %>' === 'true') {
+            const loadValineTimeout = setTimeout(() => {
+              loadValine();
+              clearTimeout(loadValineTimeout);
+            }, 1000);
+          } else {
+            window.addEventListener('DOMContentLoaded', loadValine);
+          }
         </script>
     </div>
 <% } %>
diff --git a/layout/_partial/comment/waline.ejs b/layout/_partial/comment/waline.ejs
index b674642..2917cff 100644
--- a/layout/_partial/comment/waline.ejs
+++ b/layout/_partial/comment/waline.ejs
@@ -5,22 +5,32 @@ let {
     version: waline_version,
     reaction: waline_reaction,
 } = theme.comment.waline
-if (!waline_version) {
-    waline_version = '2'
+if (!waline_version) { waline_version = '2' }
+let cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
+let cdn_css_meta = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline-meta.css`
+let cdn_js = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
+const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
+if (t_cdn_enable === true) {
+    switch (t_cdn_provider) {
+        case 'jsdelivr':
+            cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
+            cdn_css_meta = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline-meta.css`
+            cdn_js = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
+            break
+
+        case 'unpkg':
+            cdn_css = `//unpkg.com/@waline/client@v${waline_version}/dist/waline.css`
+            cdn_css_meta = `//unpkg.com/@waline/client@v${waline_version}/dist/waline-meta.css`
+            cdn_js = `//unpkg.com/@waline/client@v${waline_version}/dist/waline.js`
+            break
+    }
 }
-const waline_cdn_url = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
 %>
-<% if(theme.comment.use === 'waline' && waline_env_server_url) { %>
+<% if(waline_env_server_url) { %>
     <div class="waline-comment-container">
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
-                src="<%= waline_cdn_url %>"
-        ></script>
-        <link rel="stylesheet"
-              href="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.css"
-        />
-        <link rel="stylesheet"
-              href="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline-meta.css"
-        />
+        <link rel="stylesheet" href="<%= cdn_css %>"/>
+        <link rel="stylesheet" href="<%= cdn_css_meta %>"/>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
         <div id="waline-comment"></div>
         <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
           function loadWaline() {
diff --git a/scripts/helpers/helper.js b/scripts/helpers/helper.js
index 8c26c39..b63098b 100644
--- a/scripts/helpers/helper.js
+++ b/scripts/helpers/helper.js
@@ -55,7 +55,8 @@ hexo.extend.helper.register('getPostUrl', function (rootUrl, path) {
 
 const getSourceCdnUrl = (tyle, themeConfig, path) => {
   const version = require('../../package.json').version
-  const { provider = 'jsdelivr' } = themeConfig?.cdn
+  const cdn = themeConfig?.cdn || {}
+  const { provider = 'jsdelivr' } = cdn
 
   let urlPrefix = ''
   switch (provider.toLocaleLowerCase()) {