diff --git a/_config.yml b/_config.yml
index a344ff4..4a0dc72 100755
--- a/_config.yml
+++ b/_config.yml
@@ -204,8 +204,9 @@ comments:
   # Waline
   # https://waline.js.org/
   waline:
-    js: https://unpkg.com/@waline/client@2.14.1/dist/waline.js
-    css: https://unpkg.com/@waline/client@2.14.1/dist/waline.css
+    js: https://gcore.jsdelivr.net/npm/@waline/client@3.1.2/dist/waline.js
+    css: https://gcore.jsdelivr.net/npm/@waline/client@3.1.2/dist/waline.css
+    meta_css: https://gcore.jsdelivr.net/npm/@waline/client@3.1.2/dist/waline-meta.css
     # Waline server address url, you should set this to your own link
     serverURL:
     # If false, comment count will only be displayed in post page, not in home page
diff --git a/layout/_partial/comments/waline/script.ejs b/layout/_partial/comments/waline/script.ejs
index 3cb70c3..5da6ead 100644
--- a/layout/_partial/comments/waline/script.ejs
+++ b/layout/_partial/comments/waline/script.ejs
@@ -1,35 +1,40 @@
-<script>
+<script type="module">
+  import { init } from '<%- theme.comments.waline.js %>'
+
   function load_comment(){
     if(!document.getElementById("waline_container"))return;
+
     utils.css('<%- theme.comments.waline.css %>');
-    utils.js('<%- theme.comments.waline.js %>', {defer:true}).then(function () {
-      const el = document.getElementById("waline_container");
-      var path = el.getAttribute('comment_id');
-      if (!path) {
-        path = decodeURI(window.location.pathname);
-      }
-      Waline.init(Object.assign(<%- JSON.stringify(theme.comments.waline) %>, {
-        el: '#waline_container',
-        path: path,
-        <% if(!!theme.comments.waline.imageUploader?.api){ %>
-          imageUploader: function(file) {
-            let headers = new Headers();
-            headers.set('Accept', 'application/json');
-            <% if(!!theme.comments.waline.imageUploader?.token) { %>
-              headers.set('<%= theme.comments.waline.imageUploader?.tokenName %>', '<%= theme.comments.waline.imageUploader?.token %>')
-            <% } %>
-            let formData = new FormData();
-            formData.append('<%= theme.comments.waline.imageUploader?.fileName %>', file);
-            return fetch('<%= theme.comments.waline.imageUploader?.api %>',{
-              method: 'POST',
-              body: formData,
-              headers: headers
-              }).then((resp) => resp.json())
-                .then((resp) => resp.<%= theme.comments.waline.imageUploader?.resp %>)
-          },
-        <% } %>
-      }));
-    });
+    utils.css('<%- theme.comments.waline.meta_css %>');
+
+    const el = document.getElementById("waline_container");
+    var path = el.getAttribute('comment_id');
+    if (!path) {
+      path = decodeURI(window.location.pathname);
+    }
+
+    const waline = init(Object.assign(<%- JSON.stringify(theme.comments.waline) %>, {
+      el: '#waline_container',
+      path: path,
+      <% if(!!theme.comments.waline.imageUploader?.api){ %>
+        imageUploader: function(file) {
+          let headers = new Headers();
+          headers.set('Accept', 'application/json');
+          <% if(!!theme.comments.waline.imageUploader?.token) { %>
+            headers.set('<%= theme.comments.waline.imageUploader?.tokenName %>', '<%= theme.comments.waline.imageUploader?.token %>')
+          <% } %>
+          let formData = new FormData();
+          formData.append('<%= theme.comments.waline.imageUploader?.fileName %>', file);
+          return fetch('<%= theme.comments.waline.imageUploader?.api %>',{
+            method: 'POST',
+            body: formData,
+            headers: headers
+            }).then((resp) => resp.json())
+              .then((resp) => resp.<%= theme.comments.waline.imageUploader?.resp %>)
+        },
+      <% } %>
+    }));
+
   }
   window.addEventListener('DOMContentLoaded', (event) => {
     load_comment();