perf(cdn, comment): optimized CDN resource loading for comment plugins

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">
+        <link rel="stylesheet" href="<%= cdn_css %>">
-        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
+        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
-                src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
         <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
           function loadGitalk() {
             let __gitalk__pathname = decodeURI(location.pathname);

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
+    env_id: tk_env_id,
-} = theme.comment.twikoo
+    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">

layout/_partial/comment/valine.ejs

@@ -1,66 +1,83 @@
-<% if(
+<%
-        theme.comment.use === 'valine'
+const { enable: pjax_enable } = theme?.pjax
-        && theme.comment.valine.appid
+const {
-        && theme.comment.valine.appkey
+    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' : '' %>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_url %>"></script>
-                src="//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js"></script>
         <div id="vcomments"></div>
-        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
-            function loadValine() {
+          function loadValine() {
-                new Valine({
+            new Valine({
-                    el: '#vcomments',
+              el: '#vcomments',
-                    appId: '<%= theme.comment.valine.appid %>',
+              appId: '<%= appid %>',
-                    appKey: '<%= theme.comment.valine.appkey %>',
+              appKey: '<%= appkey %>',
-                    meta: ['nick', 'mail', 'link'],
+              meta: ['nick', 'mail', 'link'],
-                    avatar: 'wavatar',
+              avatar: 'wavatar',
-                    enableQQ: true,
+              enableQQ: true,
-                    placeholder: '<%= theme.comment.valine.placeholder %>',
+              placeholder: '<%= placeholder %>',
-                    lang: '<%= config.language %>'.toLowerCase()
+              lang: '<%= config.language %>'.toLowerCase()
-                });
+            });
 
-                function getAuthor(language) {
+            function getAuthor(language) {
-                    switch (language) {
+              switch (language) {
-                        case 'en':
+                case 'en':
-                            return 'Author';
+                  return 'Author';
-                        case 'zh-CN':
+                case 'zh-CN':
-                            return '博主';
+                  return '博主';
-                        default:
+                default:
-                            return 'Master';
+                  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
+          if ('<%= pjax_enable %>' === 'true') {
-                const getValineDomTimer = setInterval(() => {
+            const loadValineTimeout = setTimeout(() => {
-                    const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
+              loadValine();
-                    if (vcards.length > 0) {
+              clearTimeout(loadValineTimeout);
-                        let author = '<%= theme.base_info.author || config.author %>';
+            }, 1000);
-
+          } else {
-                        if (author) {
+            window.addEventListener('DOMContentLoaded', loadValine);
-                            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);
-            }
         </script>
     </div>
 <% } %>

layout/_partial/comment/waline.ejs

@@ -5,22 +5,32 @@ let {
     version: waline_version,
     reaction: waline_reaction,
 } = theme.comment.waline
-if (!waline_version) {
+if (!waline_version) { waline_version = '2' }
-    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' : '' %>
+        <link rel="stylesheet" href="<%= cdn_css %>"/>
-                src="<%= waline_cdn_url %>"
+        <link rel="stylesheet" href="<%= cdn_css_meta %>"/>
-        ></script>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></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"
-        />
         <div id="waline-comment"></div>
         <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
           function loadWaline() {

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()) {