perf(comment): support Waline v3 (#322)

XPoet · May 14, 2024 · 4145926 · 4145926
1 parent c2c9232
commit 4145926
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 31 deletions.
diff --git a/layout/_partial/comment/plugins/waline.ejs b/layout/_partial/comment/plugins/waline.ejs
@@ -6,10 +6,15 @@ let {
     reaction: waline_reaction,
     options: waline_options = {}
 } = theme?.comment?.waline || {}
+
 if (!waline_version) { waline_version = '2' }
+
+const esm_load = String(waline_version) === '3'
+
 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) {
@@ -33,40 +38,71 @@ if (t_cdn_enable === true) {
         <link rel="stylesheet" href="<%= cdn_css %>"/>
         <link rel="stylesheet" href="<%= cdn_css_meta %>"/>
         <div id="waline-comment"></div>
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
-                src="<%= cdn_js %>"
-                async
-                onerror="window.KeepCommentPlugin.loadFailHandle()"
-        ></script>
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
-                async
-        >
+        <script data-pjax>
           window.KeepCommentPlugin.walineOptions = JSON.parse('<%= JSON.stringify(waline_options) %>'.replace(/&#34;/g, '"'))
+          window.KeepCommentPlugin.walineOptions.el = '#waline-comment'
+          window.KeepCommentPlugin.walineOptions.comment = '.post-comments-count'
+          window.KeepCommentPlugin.walineOptions.serverURL = '<%= waline_env_server_url %>'
+          window.KeepCommentPlugin.walineOptions.lang = '<%= config.language %>' || 'zh-CN'
+          window.KeepCommentPlugin.walineOptions.reaction = '<%= waline_reaction %>' === 'true'
+        </script>
 
-          window.KeepCommentPlugin.initWaline = () => {
-            if (window?.Waline) {
-              window.KeepCommentPlugin.walineOptions.el = '#waline-comment'
-              window.KeepCommentPlugin.walineOptions.comment = '.post-comments-count'
-              window.KeepCommentPlugin.walineOptions.serverURL = '<%= waline_env_server_url %>'
-              window.KeepCommentPlugin.walineOptions.lang = '<%= config.language %>' || 'zh-CN'
-              window.KeepCommentPlugin.walineOptions.reaction = '<%= waline_reaction %>' === 'true'
-              window.Waline.init(window.KeepCommentPlugin.walineOptions)
-              window.KeepCommentPlugin.hideLoading()
-            } else {
-              setTimeout(() => {
-                window.KeepCommentPlugin.initWaline()
-              }, 1000)
-            }
-          }
+        <% if (!esm_load) { %>
+            <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                    src="<%= cdn_js %>"
+                    async
+                    onerror="window.KeepCommentPlugin.loadFailHandle()"
+            ></script>
+            <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                    async
+            >
+              window.KeepCommentPlugin.initWaline = () => {
+                if (window?.Waline) {
+                  window.Waline.init(window.KeepCommentPlugin.walineOptions)
+                  window.KeepCommentPlugin.hideLoading()
+                } else {
+                  setTimeout(() => {
+                    window.KeepCommentPlugin.initWaline()
+                  }, 1000)
+                }
+              }
 
-          if ('<%= pjax_enable %>' === 'true') {
-            setTimeout(() => {
-              window.KeepCommentPlugin.initWaline()
-            }, 1200)
-          } else {
-            window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initWaline)
-          }
-        </script>
+              if ('<%= pjax_enable %>' === 'true') {
+                setTimeout(() => {
+                  window.KeepCommentPlugin.initWaline()
+                }, 1200)
+              } else {
+                window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initWaline)
+              }
+            </script>
+        <% } %>
+
+        <% if (esm_load) { %>
+            <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                    async
+                    type="module"
+            >
+              import { init } from '<%= cdn_js %>'
+              window.KeepCommentPlugin.initWaline = () => {
+                if (init) {
+                  init(window.KeepCommentPlugin.walineOptions)
+                  window.KeepCommentPlugin.hideLoading()
+                } else {
+                  setTimeout(() => {
+                    window.KeepCommentPlugin.initWaline()
+                  }, 1000)
+                }
+              }
+
+              if ('<%= pjax_enable %>' === 'true') {
+                setTimeout(() => {
+                  window.KeepCommentPlugin.initWaline()
+                }, 1200)
+              } else {
+                window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initWaline)
+              }
+            </script>
+        <% } %>
     </div>
 <% } else { %>
     <%- partial('../config-error', { comment_plugin: 'Waline' }) %>

diff --git a/source/css/layout/_partial/comment/waline.styl b/source/css/layout/_partial/comment/waline.styl
@@ -4,11 +4,15 @@
     --waline-active-color var(--primary-color-light-1)
     --waline-color var(--text-color-3)
     --waline-bgcolor var(--background-color-1)
+    --waline-bg-color var(--background-color-1)
     --waline-border-color var(--border-color)
     --waline-disable-bgcolor var(--background-color-2)
+    --waline-disable-bg-color var(--background-color-2)
     --waline-disable-color var(--text-color-3)
     --waline-code-bgcolor rgba(40, 44, 52, 0.9)
+    --waline-code-bg-color rgba(40, 44, 52, 0.9)
     --waline-info-bgcolor var(--background-color-3)
+    --waline-info-bg-color var(--background-color-3)
     --waline-info-color var(--text-color-3)
     --waline-border 1px solid var(--waline-border-color)
     --waline-dark-grey var(--text-color-3)