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

layout/_partial/comment/gitalk.ejs

@@ -1,10 +1,27 @@
-<% const {
+<%
+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,22 +1,39 @@
-<% 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() {
             new Valine({
               el: '#vcomments',
-                    appId: '<%= theme.comment.valine.appid %>',
+              appId: '<%= appid %>',
-                    appKey: '<%= theme.comment.valine.appkey %>',
+              appKey: '<%= appkey %>',
               meta: ['nick', 'mail', 'link'],
               avatar: 'wavatar',
               enableQQ: true,
-                    placeholder: '<%= theme.comment.valine.placeholder %>',
+              placeholder: '<%= placeholder %>',
               lang: '<%= config.language %>'.toLowerCase()
             });
 
@@ -53,7 +70,7 @@
             }, 2000);
           }
 
-            if ('<%= theme.pjax.enable %>' === 'true') {
+          if ('<%= pjax_enable %>' === 'true') {
             const loadValineTimeout = setTimeout(() => {
               loadValine();
               clearTimeout(loadValineTimeout);

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