hexo-theme-volantis 4.3.1 → 5.0.0-alpha.112

package/layout/_plugins/aplayer/script.ejs

@@ -0,0 +1,74 @@
+<script>
+  volantis.css("<%- theme.plugins.aplayer.css %>");
+  (async () => {
+    // APlayer 需要在  MetingJS 之前加载
+    await volantis.js("<%- theme.plugins.aplayer.js.aplayer %>")
+    await volantis.js("<%- theme.plugins.aplayer.js.meting %>")
+  <% if ((theme.rightmenu.enable || theme.rightmenus.enable) && theme.rightmenu.layout.includes('music')) { %>
+    // 右键 music 需要在 APlayer  MetingJS 之后加载
+    await volantis.js('<%- theme.cdn.addJS("plugins/aplayer") %>')
+  <% } %>
+  })();
+
+  function SetAPlayerPlugin(){
+    let Metings = document.querySelectorAll('meting-js');
+    if (Metings.length === 0) {return;};
+    if (Metings[0].aplayer && Metings[0].aplayer.on) {
+      // improve the accessibility https://web.dev/button-name/
+      document.querySelectorAll(".aplayer-icon-menu").forEach(e=>{
+        e.setAttribute("aria-label","Aplayer Menu")
+      })
+      // message see: /layout/_plugins/message/script.ejs
+      <% if (theme.plugins.message.enable && theme.plugins.message.aplayer.enable) { %>
+        try {
+          setTimeout(() => {
+            Metings.forEach((item, index) => {
+              const aplayerItem = item.aplayer; if(!aplayerItem) return;
+              const rightAplayerCheck = '<%= theme.rightmenu.layout.includes("music") %>' === 'true'
+                && item.meta.id === '<%= theme.plugins.aplayer.id %>';
+              if(rightAplayerCheck) RightMenuAplayer.checkAPlayer();
+              if(aplayerItem.events.events.play.every(item => {return item.name !== 'messagePlay'})) {
+                aplayerItem.on('play', function messagePlay() {
+                  let index = aplayerItem.list.index;
+                  let title = aplayerItem.list.audios[index].title;
+                  let artist = aplayerItem.list.audios[index].artist;
+                  setTimeout(() => {
+                    VolantisApp.message('音乐通知', title + ' - ' + artist, {
+                      icon: '<%- theme.plugins.message.aplayer.play %>',
+                      transitionIn: 'flipInX',
+                      transitionOut: 'flipOutX'
+                    });
+                  }, 100)
+                });
+              }
+              if(aplayerItem.events.events.pause.every(item => {return item.name !== 'messagePause'})) {
+                aplayerItem.on('pause', function messagePause() {
+                  let index = aplayerItem.list.index;
+                  let title = aplayerItem.list.audios[index].title;
+                  let artist = aplayerItem.list.audios[index].artist;
+                  setTimeout(() => {
+                    // 歌曲播放结束也会触发 pause 事件，为了避免错误提示，等待一会儿
+                    if(aplayerItem.paused) {
+                      VolantisApp.message('音乐通知', title + ' - ' + artist, {
+                        icon: '<%- theme.plugins.message.aplayer.pause %>',
+                        transitionIn: 'flipInX',
+                        transitionOut: 'flipOutX'
+                      });
+                    }
+                  }, 100)
+                });
+              }
+            });
+          }, 500)
+        } catch (error) { console.error(error); }
+      <% } %>
+    }else{
+      volantis.requestAnimationFrame(SetAPlayerPlugin)
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", ()=>{
+    SetAPlayerPlugin();
+  });
+  volantis.pjax.push(SetAPlayerPlugin);
+</script>

package/layout/_plugins/chat/gitter/script.ejs

@@ -0,0 +1,17 @@
+<script>
+// https://sidecar.gitter.im/
+((window.gitter = {}).chat = {}).options = {
+  room: `<%- theme.plugins.gitter.room %>`
+};
+volantis.js("https://sidecar.gitter.im/dist/sidecar.v1.js")
+</script>
+
+<style>
+  .gitter-chat-embed{
+    z-index: 10000;
+  }
+  .gitter-open-chat-button{
+    left: 10px;
+    right: unset;
+  }
+</style>

package/layout/_plugins/chat/index.ejs

@@ -0,0 +1 @@
+<%- partial( theme.plugins.chat_service + "/script") %>

package/layout/_plugins/chat/tidio/script.ejs

@@ -0,0 +1 @@
+<script src="https://code.tidio.co/<%- theme.plugins.tidio.id %>.js" async></script>

package/layout/_plugins/comments/artalk/script.ejs

@@ -0,0 +1,59 @@
+<script>
+  volantis.layoutHelper("comments",`<div id="artalk_container"><i class="fa-solid fa-cog fa-spin fa-fw fa-2x"></i></div>`);
+  function load_artalk() {
+    if(!document.querySelectorAll("#artalk_container")[0])return;
+    volantis.css("<%- theme.comments.artalk.css %>");
+    volantis.js("<%- theme.comments.artalk.js %>").then(pjax_artalk);
+  }
+
+  function pjax_artalk() {
+    if(!document.querySelectorAll("#artalk_container")[0])return;
+    let path = pdata.commentPath;
+    let placeholder = pdata.commentPlaceholder || "<%= theme.comments.artalk.placeholder %>" || "";
+    if (path.length == 0) {
+      path = '<%= theme.comments.artalk.path %>' || decodeURI(window.location.pathname);
+    }
+
+    volantis.artalk = new Artalk(Object.assign(<%- JSON.stringify(theme.comments.artalk) %>, {
+      el: '#artalk_container',
+      pageKey: path,
+      pageTitle: document.title,
+      placeholder: placeholder,
+      useBackendConf: true,
+      site: '<%= config.title %>',
+      darkMode: volantis.dark.mode === "dark",
+      pvEl: '#artalk_visitors'
+    }));
+
+    volantis.artalk.then(ctx => {
+      ctx.on('comments-loaded', () => {
+        if (typeof VolantisFancyBox === "undefined"){
+          const checkFancyBox = setInterval(() => {
+            if(typeof VolantisFancyBox === "undefined") return;
+            clearInterval(checkFancyBox);
+            VolantisFancyBox.groupBind('.atk-content img:not([atk-emoticon])', 'Comments');
+          })
+        } else {
+          VolantisFancyBox.groupBind('.atk-content img:not([atk-emoticon])', 'Comments');
+        }
+      })
+    })
+  }
+
+  load_artalk();
+  volantis.pjax.push(()=>{
+    if (typeof Artalk === "undefined") {
+      load_artalk();
+    } else {
+      pjax_artalk();
+    }
+  },'artalk');
+
+  function dark_artalk() {
+    if(!document.querySelectorAll("#artalk_container")[0]) return;
+    volantis.artalk.then(ctx => {
+      ctx.setDarkMode(volantis.dark.mode === "dark")
+    })
+  }
+  volantis.dark.push(dark_artalk);
+</script>

package/layout/_plugins/comments/beaudar/script.ejs

@@ -0,0 +1,61 @@
+<script>
+  volantis.layoutHelper("comments",`<div id="beaudar_container"></div>`)
+
+  volantis.beaudar = {};
+
+  function check_beaudar() {
+    if (volantis.dark.mode === "dark") {
+      volantis.beaudar.Theme = '<%- theme.comments.beaudar.theme.dark %>';
+    } else {
+      volantis.beaudar.Theme = '<%- theme.comments.beaudar.theme.light %>';
+    }
+
+    return document.getElementById("beaudar_container");
+  }
+
+  function pjax_beaudar() {
+    const HEAD = check_beaudar();
+    if (!HEAD) return;
+
+    const script = document.createElement('script');
+    let issuenumber = "<%- theme.comments.beaudar['issue-number'] %>";
+    if (issuenumber) {
+      script.setAttribute('issue-number', issuenumber);
+    } else {
+      script.setAttribute('issue-term', "<%- theme.comments.beaudar['issue-term'] %>");
+    }
+    script.setAttribute('src', 'https://beaudar.lipk.org/client.js');
+    script.setAttribute('repo', '<%- theme.comments.beaudar.repo %>');
+    script.setAttribute('input-position', '<%- theme.comments.beaudar.position %>');
+    script.setAttribute('branch', '<%- theme.comments.beaudar.branch %>');
+    script.setAttribute('comment-order', '<%- theme.comments.beaudar.order %>');
+    script.setAttribute('label', '<%- theme.comments.beaudar.label %>');
+    script.setAttribute('theme', volantis.beaudar.Theme);
+    script.setAttribute('crossorigin', "anonymous");
+    HEAD.appendChild(script);
+  }
+
+  function dark_beaudar() {
+    const HEAD = check_beaudar();
+    if (!HEAD) return;
+
+    const message = {
+      type: 'set-theme',
+      theme: volantis.beaudar.Theme
+    };
+    const beaudarIframe = document.querySelector('iframe');
+    beaudarIframe.contentWindow.postMessage(message, 'https://beaudar.lipk.org');
+  }
+
+  function check_beaudar_style() {
+    // Beaudar 会往 HEAD 的首节点追加样式元素，而这个追加没有添加判断
+    // 所以 Pjax 下会多次添加样式文件，略微麻烦。
+    const checkStyle = document.querySelector('head').firstElementChild;
+    if(checkStyle.innerText.includes('beaudar')) checkStyle.remove();
+  }
+
+  pjax_beaudar();
+  volantis.pjax.push(check_beaudar_style);
+  volantis.pjax.push(pjax_beaudar);
+  volantis.dark.push(dark_beaudar);
+</script>

package/layout/_plugins/comments/discuss/script.ejs

@@ -0,0 +1,30 @@
+<script>
+  volantis.layoutHelper("comments",`<div id="discuss_container"><i class="fa-solid fa-cog fa-spin fa-fw fa-2x"></i></div>`)
+  function load_discuss() {
+    if(!document.querySelectorAll("#discuss_container")[0])return;
+    volantis.js("<%- theme.comments.discuss.js %>", pjax_discuss)
+  }
+  function pjax_discuss() {
+    if(!document.querySelectorAll("#discuss_container")[0])return;
+    let path = pdata.commentPath;
+    let placeholder = pdata.commentPlaceholder || "<%= theme.comments.discuss.ph %>" || "";
+    if (path.length == 0) {
+      let defaultPath = '<%= theme.comments.discuss.path %>';
+      path = defaultPath || decodeURI(window.location.pathname);
+    }
+
+    Discuss.init(Object.assign(Object.assign(<%- JSON.stringify(theme.comments.discuss) %>, {
+      el: '#discuss_container',
+      path: path,
+      ph: placeholder
+    }),pdata.commentConfig))
+  }
+  load_discuss();
+  volantis.pjax.push(()=>{
+    if (typeof Discuss == "undefined") {
+      load_discuss();
+    } else {
+      pjax_discuss();
+    }
+  },'discuss');
+</script>

package/layout/_plugins/comments/disqus/script.ejs

@@ -0,0 +1,98 @@
+<script>
+  volantis.layoutHelper("comments",`<div id="disqus_thread">
+    <div id="notShowDisqus" style="display: none;text-align: center;"><i class='fa-solid fa-exclamation-triangle'></i>&nbsp;<%- __('post.comments_placeholder', 'Disqus') %></div>
+    <div id="load-btns"><a class="load-comments" onclick="needLoadDisqus()"><%- __('post.comments_load', 'Disqus') %></a></div>
+    <div id="loading-comments" style="display: none"><i class="fa fa-cog fa-spin fa-fw fa-2x"></i><br><%- __('post.comments_check', 'Disqus') %></div>
+  </div>
+  `)
+
+  const disqus_shortname = "<%= theme.comments.disqus.shortname %>";
+  const autoload = "<%= theme.comments.disqus.autoload %>";
+  const global_url = "<%= config.url %>"; //  must use an absolute URL; relative URLs won’t work.
+
+  function checkDisqus() {
+    // 正在检查 Disqus 能否访问...
+    const runcheck = (domain) => {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        const timeout = setTimeout(() => {
+          img.onerror = img.onload = null;
+          reject();
+        }, 3000);
+        img.onerror = () => {
+          clearTimeout(timeout);
+          reject();
+        };
+        img.onload = () => {
+          clearTimeout(timeout);
+          resolve();
+        };
+        img.src = `https://${domain}/favicon.ico?${+new Date()}=${+new Date()}`;
+      });
+    };
+    return Promise.all([
+      runcheck("<%= theme.comments.disqus.shortname %>.disqus.com"),
+    ]).then(loadDisqus, showError);
+  }
+
+  function loadDisqus() {
+    let path = pdata.commentPath;
+    if (path.length == 0) {
+      let defaultPath = "<%= theme.comments.disqus.path %>";
+      path = defaultPath || decodeURI(window.location.pathname);
+    }
+    if (window.DISQUS) {
+      window.DISQUS.reset({
+        reload: true,
+        config() {
+          this.page.identifier = global_url + path;
+          this.page.url = global_url + path;
+        },
+      });
+    } else {
+      window.disqus_config = function () {
+        this.page.url = global_url + path;
+        this.page.identifier = global_url + path;
+      };
+      let d = document,
+        s = d.createElement("script");
+      s.async = true;
+      s.src = "//" + disqus_shortname + ".disqus.com/embed.js";
+      s.setAttribute("data-timestamp", +new Date());
+      (d.head || d.body).appendChild(s);
+    }
+  }
+
+  // 加载错误
+  function showError() {
+    volantis.dom.$(document.getElementById("loading-comments")).hide();
+    volantis.dom.$(document.getElementById("notShowDisqus")).show();
+  }
+
+  // 点击了加载
+  function needLoadDisqus() {
+    checkDisqus();
+    volantis.dom.$(document.getElementById("load-btns")).hide();
+    volantis.dom.$(document.getElementById("loading-comments")).show();
+  }
+
+  // pjax 重载
+  function pjax_disqus() {
+    // 排除当前页面不存在评论框的情形
+    if (!document.getElementById("disqus_thread")) return;
+    // 如果 DISQUS 已被实例化，则可直接加载
+    if (window.DISQUS) {
+      volantis.dom.$(document.getElementById("load-btns")).hide();
+      volantis.dom.$(document.getElementById("notShowDisqus")).hide();
+      volantis.dom.$(document.getElementById("loading-comments")).hide();
+      loadDisqus();
+    } else if (autoload == "true") {
+      // 设置自动加载但是上个页面加载失败了
+      needLoadDisqus();
+    }
+  }
+  if (autoload == "true") {
+    needLoadDisqus();
+  }
+  volantis.pjax.push(pjax_disqus);
+</script>

package/layout/_plugins/comments/disqusjs/script.ejs

@@ -0,0 +1,35 @@
+<script>
+  volantis.layoutHelper("comments",`<div id="disqus_thread"></div>`)
+  // from: https://github.com/ChrAlpha/hexo-theme-cards/blob/master/layout/_plugins/comments/disqusjs/source.ejs
+  function loadDisqusJS() {
+    volantis.js('<%= theme.comments.disqusjs.js %>', pjax_DisqusJS)
+    volantis.css('<%= theme.comments.disqusjs.css %>')
+  }
+  let path = pdata.commentPath;
+  if (path.length == 0) {
+    let defaultPath = '<%= theme.comments.disqusjs.path %>';
+    path = defaultPath || decodeURI(window.location.pathname);
+  }
+  pjax_DisqusJS = () => {
+  	new DisqusJS(Object.assign(<%- JSON.stringify(theme.comments.disqusjs) %>, {
+  		siteName: '<%= config.title %>',
+  		url: '<%= page.permalink %>',
+  		identifier: path,
+  	}));
+  };
+  var runningOnBrowser = typeof window !== "undefined";
+  var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
+  var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
+  if (!isBot && supportsIntersectionObserver) {
+  	var comment_observer = new IntersectionObserver(function(entries) {
+  		if (entries[0].isIntersecting) {
+  			loadDisqusJS();
+  			comment_observer.disconnect();
+  		}
+  	}, { threshold: [0] });
+  	comment_observer.observe(document.getElementById('comments'));
+  } else {
+  	loadDisqusJS();
+  }
+  volantis.pjax.push(pjax_DisqusJS);
+</script>

package/layout/_plugins/comments/giscus/script.ejs

@@ -0,0 +1,47 @@
+<script>
+  volantis.layoutHelper("comments",`<div id="giscus_container"></div>`)
+
+  volantis.giscus = {};
+
+  function check_giscus() {
+    if (volantis.dark.mode === "dark") {
+      volantis.giscus.Theme = '<%- theme.comments.giscus.theme.dark %>';
+    } else {
+      volantis.giscus.Theme = '<%- theme.comments.giscus.theme.light %>';
+    }
+
+    return document.getElementById("giscus_container");
+  }
+
+  function pjax_giscus() {
+    const HEAD = check_giscus();
+    if (!HEAD) return;
+    let cfg = Object.assign(<%- JSON.stringify(theme.comments.giscus) %>,pdata.commentConfig)
+    const script = document.createElement('script');
+    script.setAttribute('src', 'https://giscus.app/client.js');
+    Object.keys(cfg).forEach(k=>{
+      if (k != "theme") {
+        script.setAttribute('data-'+k, cfg[k]);
+      }
+    })
+    script.setAttribute('data-theme', volantis.giscus.Theme);
+    script.setAttribute('crossorigin', "anonymous");
+    HEAD.appendChild(script);
+  }
+
+  function dark_giscus() {
+    const HEAD = check_giscus();
+    if (!HEAD) return;
+
+    const message = {
+      setConfig: {
+        theme: volantis.giscus.Theme
+      }
+    };
+    const giscusIframe = document.querySelector('iframe.giscus-frame');
+    giscusIframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+  }
+  pjax_giscus();
+  volantis.pjax.push(pjax_giscus);
+  volantis.dark.push(dark_giscus);
+</script>

package/layout/_plugins/comments/gitalk/script.ejs

@@ -0,0 +1,24 @@
+<script type="text/javascript">
+  volantis.layoutHelper("comments",`<div id="gitalk-container"></div>`)
+  function pjax_gitalk() {
+    if(!document.querySelector("#gitalk-container"))return;
+    let path = pdata.commentPath;
+    if (path.length == 0) {
+      let defaultPath = '<%= theme.comments.gitalk.path %>';
+      path = defaultPath || decodeURI(window.location.pathname);
+    }
+    if (document.getElementById('gitalk-container') != null) {
+      var gitalk = new Gitalk(
+        Object.assign(
+          Object.assign(<%- JSON.stringify(theme.comments.gitalk) %>, {
+            id: path,
+            distractionFreeMode: false  // Facebook-like distraction free mode
+          }),
+        pdata.commentConfig)
+      );
+      gitalk.render('gitalk-container');
+    }
+  }
+  volantis.js('<%= theme.comments.gitalk.js %>').then(pjax_gitalk)
+  volantis.pjax.push(pjax_gitalk);
+</script>

package/layout/_plugins/comments/hashover/script.ejs

@@ -0,0 +1,5 @@
+<script>
+  volantis.layoutHelper("comments",`<p>未注册者输入用户名和密码登录即相当于注册，之后以同一用户名和密码登录可以编辑自己之前的评论。留邮箱可接收回复通知。支持全匿名评论。</p>
+  <div id="hashover"></div>`)
+</script>
+<script data-pjax type="text/javascript" src="<%= theme.comments.hashover.src %>"></script>

package/layout/{_third-party → _plugins}/comments/index.ejs

@@ -4,14 +4,21 @@
       checkComment = false;
     }
 %>
-<% if (checkComment && theme.comments.service && theme.comments.service.length > 0) { %>
-  <article class="post white-box reveal <%- theme.custom_css.body.effect.join(' ') %>" id="comments">
+<% if (checkComment&&(theme.comments.service && theme.comments.service.length > 0)) { %>
+
+  <article class="post white-box <%- theme.custom_css.body.effect.join(' ') %>" id="comments">
+    <span hidden>
+      <meta itemprop="discussionUrl" content="<%- url_for(path) %>#comments">
+    </span>
     <p ct><%- theme.comments && theme.comments.title %></p>
     <% if (theme.comments && theme.comments.subtitle) { %>
       <p cst><%- theme.comments.subtitle %></p>
     <% } %>
-    <%- partial(theme.comments.service + '/layout') %>
+
+    <div id="layoutHelper-comments"></div>
+
   </article>
+
 <% } else { %>
   <% page.comments = false; %>
 <% } %>

package/layout/_plugins/comments/isso/script.ejs

@@ -0,0 +1,27 @@
+<script type="text/javascript">
+  volantis.layoutHelper("comments",`<div id="isso-thread"></div>`)
+  function loadIsso() {
+    let d = document,
+      s = d.createElement("script");
+    s.src = "<%= theme.comments.isso.src %>";
+    s.setAttribute("data-isso", "<%= theme.comments.isso.url %>");
+    <% if (theme.comments.isso.css) { %>
+      s.setAttribute("data-isso-css", "<%= theme.comments.isso.css %>");
+    <% } %>
+    <% if (theme.comments.isso.gravatar) { %>
+      s.setAttribute("data-isso-gravatar", "true");
+      s.setAttribute("data-isso-avatar", "false");
+    <% } %>
+    (d.head || d.body).appendChild(s);
+  }
+  function pjax_isso() {
+    if (window.Isso) {
+      window.Isso.init();
+      window.Isso.fetchComments();
+    } else if (document.querySelector("#isso-thread")) {
+      loadIsso();
+    }
+  }
+  pjax_isso();
+  volantis.pjax.push(pjax_isso);
+</script>

package/layout/_plugins/comments/livere/script.ejs

@@ -0,0 +1,15 @@
+<script>
+  volantis.layoutHelper("comments",`<div id="lv-container" data-id="city" data-uid="<%= theme.comments.livere.uid %>">
+  <noscript><div><i class='fa-solid fa-exclamation-triangle'>&nbsp;<%- __('post.comments_placeholder', 'Livere') %></div></noscript>
+</div>`)
+</script>
+<script data-pjax type="text/javascript">
+  (function(d, s) {
+    var j, e = d.getElementsByTagName(s)[0];
+    if (typeof LivereTower === 'function') { return; }
+    j = d.createElement(s);
+    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+    j.async = true;
+    e.parentNode.insertBefore(j, e);
+  })(document, 'script');
+</script>

package/layout/_plugins/comments/twikoo/script.ejs

@@ -0,0 +1,40 @@
+<script>
+  volantis.layoutHelper("comments",`<div id="twikoo_container"><i class="fa-solid fa-cog fa-spin fa-fw fa-2x"></i></div>`)
+  function load_twikoo() {
+    if(!document.querySelectorAll("#twikoo_container")[0])return;
+    volantis.js("<%- theme.comments.twikoo.js %>", pjax_twikoo)
+  }
+  function pjax_twikoo() {
+    if(!document.querySelectorAll("#twikoo_container")[0])return;
+    let path = pdata.commentPath;
+    let placeholder = pdata.commentPlaceholder || "<%= theme.comments.twikoo.placeholder %>" || "";
+    if (path.length == 0) {
+      let defaultPath = '<%= theme.comments.twikoo.path %>';
+      path = defaultPath || decodeURI(window.location.pathname);
+    }
+    twikoo.init(Object.assign(Object.assign(<%- JSON.stringify(theme.comments.twikoo) %>, {
+      el: '#twikoo_container',
+      path: path,
+      placeholder: placeholder,
+      onCommentLoaded: function() {
+        if(typeof VolantisFancyBox === "undefined") {
+          const checkFancyBox = setInterval(() => {
+            if(typeof VolantisFancyBox === "undefined") return;
+            clearInterval(checkFancyBox);
+            VolantisFancyBox.groupBind('.tk-content img:not([class*="emo"])', 'Comments');
+          })
+        } else {
+          VolantisFancyBox.groupBind('.tk-content img:not([class*="emo"])', 'Comments');
+        }
+      }
+    }),pdata.commentConfig))
+  }
+  load_twikoo();
+  volantis.pjax.push(()=>{
+    if (typeof twikoo == "undefined") {
+      load_twikoo();
+    } else {
+      pjax_twikoo();
+    }
+  },'twikoo');
+</script>

package/layout/_plugins/comments/utterances/script.ejs

@@ -0,0 +1,43 @@
+<script>
+  volantis.layoutHelper("comments",`<div id="utterances"></div>`)
+  volantis.utterances={}
+  volantis.utterances.ThemeLight='<%- theme.comments.utterances.theme.light %>';
+  volantis.utterances.ThemeDark='<%- theme.comments.utterances.theme.dark %>';
+  volantis.utterances.Theme=volantis.utterances.ThemeLight;
+  function pjax_utterances(){
+    if(!document.getElementById("utterances"))return;
+    <% if (theme.plugins.darkmode.enable) { %>
+      if(volantis.dark.mode=="dark"){
+        volantis.utterances.Theme=volantis.utterances.ThemeDark;
+      }else{
+        volantis.utterances.Theme=volantis.utterances.ThemeLight;
+      }
+    <% } %>
+    setTimeout(function() {
+      var checkUtterances = setInterval(function () {
+        var HEAD = document.getElementById("utterances");
+        if (!HEAD) return
+        clearInterval(checkUtterances)
+        try {
+          document.getElementById("utterances").innerHTML="";
+        } catch (error) {}
+        var script = document.createElement('script');
+        script.setAttribute('src','https://utteranc.es/client.js');
+        script.setAttribute('repo','<%- theme.comments.utterances.repo %>');
+        let issuenumber = '<%- theme.comments.utterances['issue-number'] %>';
+        if (issuenumber) {
+          script.setAttribute('issue-number', issuenumber);
+        } else {
+          script.setAttribute('issue-term', '<%- theme.comments.utterances['issue-term'] %>');
+        }
+        script.setAttribute('theme', volantis.utterances.Theme );
+        script.setAttribute('label','<%- theme.comments.utterances.label %>');
+        script.setAttribute('crossorigin', "anonymous");
+        HEAD.appendChild(script);
+      }, 200)
+    });
+  }
+  pjax_utterances();
+  volantis.pjax.push(pjax_utterances);
+  volantis.dark.push(pjax_utterances);
+</script>

package/layout/_plugins/comments/vssue/script.ejs

@@ -0,0 +1,37 @@
+
+<script src="<%- theme.comments.vssue.vue %>"></script>
+<script src="<%- theme.comments.vssue.js %>"></script>
+<script>
+  volantis.css("<%- theme.comments.vssue.css %>");
+  function fancybox_vssue() {
+    if(typeof VolantisFancyBox === "undefined") {
+      const checkFancyBox = setInterval(() => {
+        if(typeof VolantisFancyBox === "undefined") return;
+        clearInterval(checkFancyBox);
+        VolantisFancyBox.bind('#vssue .vssue-comment-main img');
+      })
+    } else {
+      VolantisFancyBox.bind('#vssue .vssue-comment-main img');
+    }
+  }
+</script>
+<script data-pjax>
+  volantis.layoutHelper("comments",`<div id="vssue"></div>`);
+  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 %>',
+          prefix: '',
+          autoCreateIssue: true,
+        },
+      }
+    })
+  })
+  fancybox_vssue();
+</script>