Feat: Add DisqusJS support (#705)

* Feat: Add DisqusJS support

* #586

* share div with disqus

_config.yml

@@ -578,6 +578,20 @@ disqus:
   count: true
   lazyload: false
 
+# DisqusJS
+# Alternative Disqus - Render comment component using Disqus API
+# Demo: https://suka.js.org/DisqusJS/
+disqusjs:
+  enable: false
+  # API Endpoint of Disqus API (https://disqus.com/api/)
+  # leave api empty if you are able to connect to Disqus API
+  # otherwise you need a reverse proxy for Disqus API
+  # For example: 
+  # api: https://disqus.skk.moe/disqus/
+  api:
+  apikey: # register new application from https://disqus.com/api/applications/
+  shortname: # See: https://disqus.com/admin/settings/general/
+
 # Changyan
 changyan:
   enable: false
@@ -1169,6 +1183,14 @@ vendors:
   likely_js:
   likely_css:
 
+  # DisqusJS
+  # See: https://github.com/SukkaW/DisqusJS
+  # Example:
+  # disqusjs_js: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
+  # disqusjs_css: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
+  disqusjs_js:
+  disqusjs_css:
+
 # Assets
 css: css
 js: js

layout/_partials/comments.swig

@@ -15,7 +15,7 @@
       <div id="vk_comments"></div>
     </div>
 
-  {% elif theme.disqus.enable %}
+  {% elif theme.disqus.enable or (theme.disqusjs.enable and theme.disqusjs.apikey and theme.disqusjs.shortname) %}
     <div class="comments" id="comments">
       <div id="disqus_thread">
         <noscript>{#

layout/_third-party/comments/disqusjs.swig

@@ -0,0 +1,19 @@
+{% set disqusjs_css_url = '//cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css' %}
+{% if theme.vendors.disqusjs_css %}
+  {% set disqusjs_css_url = theme.vendors.disqusjs_css %}
+{% endif %}
+<link rel="stylesheet" href="{{ disqusjs_css_url }}"/>
+
+{% set disqusjs_js_url = '//cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js' %}
+{% if theme.vendors.disqusjs_js %}
+  {% set disqusjs_js_url = theme.vendors.disqusjs_js %}
+{% endif %}
+<script src="{{ disqusjs_js_url }}"></script>
+
+<script>
+  var dsqjs = new DisqusJS({
+    api: '{{ theme.disqusjs.api }}' || 'https://disqus.com/api/',
+    apikey: '{{ theme.disqusjs.apikey }}',
+    shortname: '{{ theme.disqusjs.shortname }}'
+  });
+</script>

layout/_third-party/comments/index.swig

@@ -13,5 +13,7 @@
     {% include 'gitment.swig' %}
   {% elif theme.gitalk.enable %}
     {% include 'gitalk.swig' %}
+  {% elif theme.disqusjs.enable and theme.disqusjs.apikey and theme.disqusjs.shortname %}
+    {% include 'disqusjs.swig' %}
   {% endif %}
 {% endif %}