add vssue comment

_config.yml

@@ -537,6 +537,11 @@ comments:
     repo:
     owner:
     admin: # []
+  vssue:
+    owner:
+    repo:
+    clientId:
+    clientSecret:
   livere:
     uid:
 

layout/_partial/head.ejs

@@ -99,6 +99,10 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
   <% } %>
 
+  <% if (theme.comments.vssue && theme.comments.vssue.clientId) { %>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/meteorlxy/vssue@1.4.3/packages/vssue/dist/vssue.min.css">
+  <% } %>
+
   <!-- import link -->
   <% if (config.import && config.import.link){ %>
   <% (config.import.link||[]).forEach(function(item){ %>

layout/_partial/scripts.ejs

@@ -109,6 +109,7 @@
   var enableDisqus = false;
   var enableLivere = false;
   var enableGitalk = false;
+  var enableVssue = false;
   var enableValine = false;
   var enableMiniValine = false;
   if (theme.comments && page && page.comments == true) {
@@ -121,6 +122,9 @@
     if (theme.comments.gitalk && theme.comments.gitalk.clientID) {
       enableGitalk = true;
     }
+    if (theme.comments.vssue && theme.comments.vssue.clientId) {
+      enableVssue = true;
+    }
     if (theme.comments.valine && theme.comments.valine.appId) {
       enableValine = true;
     }
@@ -179,6 +183,27 @@
     gitalk.render('gitalk-container');
   </script>
 <% } %>
+<% if (enableVssue) { %>
+  <script src="https://cdn.jsdelivr.net/gh/vuejs/vue@2.6.11/dist/vue.runtime.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/meteorlxy/vssue@1.4.3/packages/vssue/dist/vssue.github.min.js"></script>
+  <script>
+    new Vue({
+      el: '#vssue',
+  
+      render: h => h('Vssue', {
+        props: {
+          title: "<%- (page.seo_title || page.title) + ' - ' + config.title %>",
+          options: {
+            owner: '<%- theme.comments.vssue.owner %>',
+            repo: '<%- theme.comments.vssue.repo %>',
+            clientId: '<%- theme.comments.vssue.clientId %>',
+            clientSecret: '<%- theme.comments.vssue.clientSecret %>',
+          },
+        }
+      })
+    })
+  </script>
+<% } %>
 
 <% if (enableValine){ %>
   <% if (theme.comments.valine.js) { %>

layout/_third-party/comments.ejs

@@ -3,6 +3,7 @@
   var enableDisqus = false;
   var enableLivere = false;
   var enableGitalk = false;
+  var enableVssue = false;
   var enableValine = false;
   var enableMiniValine = false;
   if (theme.comments && page && page.comments == true) {
@@ -15,6 +16,9 @@
     if (theme.comments.gitalk && theme.comments.gitalk.clientID) {
       enableGitalk = true;
     }
+    if (theme.comments.vssue && theme.comments.vssue.clientId) {
+      enableVssue = true;
+    }
     if (theme.comments.valine && theme.comments.valine.appId) {
       enableValine = true;
     }
@@ -24,7 +28,7 @@
   }
 %>
 
-<% if (enableDisqus || enableLivere || enableGitalk || enableValine || enableMiniValine) { %>
+<% if (enableDisqus || enableLivere || enableGitalk || enableVssue || enableValine || enableMiniValine) { %>
   <article class="post white-box reveal comments <%- theme.style.body.effect.join(' ') %>">
     <section class="article typo">
       <p ct><%- theme.comments && theme.comments.title %></p>
@@ -50,6 +54,11 @@
           <div id="gitalk-container"></div>
         </section>
       <% } %>
+      <% if (enableVssue){ %>
+        <section id="comments">
+          <div id="vssue"></div>
+        </section>
+      <% } %>
       <% if (enableValine){ %>
         <section id="comments">
           <div id="valine_container" class="valine_thread">