New utterances comments system

_config.yml

@@ -565,7 +565,7 @@ comments:
   # Available values: tabs | buttons
   style: tabs
   # Choose a comment system to be displayed by default.
-  # Available values: disqus | disqusjs | changyan | livere | gitalk
+  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
   active:
   # Setting `true` means remembering the comment system selected by the visitor.
   storage: true
@@ -624,6 +624,15 @@ gitalk:
   # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
   language:
 
+# Utterances
+# For more information: https://utteranc.es
+utterances:
+  enable: false
+  repo: # Github repository name
+  # Available values: pathname | url | title | og:title
+  issue_term: pathname
+  # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
+  theme: github-light
 
 # ---------------------------------------------------------------
 # Post Widgets & Content Sharing Services

layout/_third-party/comments/utterances.njk

@@ -0,0 +1,14 @@
+{%- if page.comments %}
+<script>
+NexT.utils.loadComments('#utterances-container', () => {
+  const script = document.createElement('script');
+  script.src = 'https://utteranc.es/client.js';
+  script.setAttribute('repo', {{ theme.utterances.repo | safedump }});
+  script.setAttribute('issue-term', {{ theme.utterances.issue_term | safedump }});
+  script.setAttribute('theme', {{ theme.utterances.theme | safedump }});
+  script.crossOrigin = 'anonymous';
+  script.async = true;
+  document.querySelector('#utterances-container').appendChild(script);
+});
+</script>
+{%- endif %}

scripts/filters/comment/changyan.js

@@ -7,8 +7,8 @@ const { iconText } = require('./common');
 
 // Add comment
 hexo.extend.filter.register('theme_inject', injects => {
-  const theme = hexo.theme.config;
+  const config = hexo.theme.config.changyan;
-  if (!theme.changyan.enable || !theme.changyan.appid || !theme.changyan.appkey) return;
+  if (!config.enable || !config.appid || !config.appkey) return;
 
   injects.comment.raw('changyan', `
   <div class="comments">
@@ -22,8 +22,8 @@ hexo.extend.filter.register('theme_inject', injects => {
 
 // Add post_meta
 hexo.extend.filter.register('theme_inject', injects => {
-  const theme = hexo.theme.config;
+  const config = hexo.theme.config.changyan;
-  if (!theme.changyan.enable || !theme.changyan.appid || !theme.changyan.appkey) return;
+  if (!config.enable || !config.appid || !config.appkey) return;
 
   injects.postMeta.raw('changyan', `
   {% if post.comments %}

scripts/filters/comment/disqus.js

@@ -7,8 +7,8 @@ const { iconText } = require('./common');
 
 // Add comment
 hexo.extend.filter.register('theme_inject', injects => {
-  const theme = hexo.theme.config;
+  const config = hexo.theme.config.disqus;
-  if (!theme.disqus.enable || !theme.disqus.shortname) return;
+  if (!config.enable || !config.shortname) return;
 
   injects.comment.raw('disqus', `
   <div class="comments">
@@ -24,8 +24,8 @@ hexo.extend.filter.register('theme_inject', injects => {
 
 // Add post_meta
 hexo.extend.filter.register('theme_inject', injects => {
-  const theme = hexo.theme.config;
+  const config = hexo.theme.config.disqus;
-  if (!theme.disqus.enable || !theme.disqus.shortname || !theme.disqus.count) return;
+  if (!config.enable || !config.shortname || !config.count) return;
 
   injects.postMeta.raw('disqus', `
   {% if post.comments %}

scripts/filters/comment/disqusjs.js

@@ -6,8 +6,8 @@ const path = require('path');
 
 // Add comment
 hexo.extend.filter.register('theme_inject', injects => {
-  const theme = hexo.theme.config;
+  const config = hexo.theme.config.disqus;
-  if (!theme.disqusjs.enable || !theme.disqusjs.shortname || !theme.disqusjs.apikey) return;
+  if (!config.enable || !config.shortname || !config.apikey) return;
 
   injects.comment.raw('disqusjs', `
   <div class="comments">

scripts/filters/comment/utterances.js

@@ -0,0 +1,25 @@
+/* global hexo */
+
+'use strict';
+
+const path = require('path');
+
+// Add comment
+hexo.extend.filter.register('theme_inject', injects => {
+  const config = hexo.theme.config.utterances;
+  if (!config.enable) return;
+
+  if (!config.repo) {
+    hexo.log.warn('utterances.repo can\'t be null.');
+    return;
+  }
+
+  injects.comment.raw('utterances', `
+  <div class="comments">
+    <div id="utterances-container"></div>
+  </div>
+  `, {}, { cache: true });
+
+  injects.bodyEnd.file('utterances', path.join(hexo.theme_dir, 'layout/_third-party/comments/utterances.njk'));
+
+});

source/css/_common/components/third-party/third-party.styl

@@ -1,5 +1,7 @@
 @import 'gitalk' if (hexo-config('gitalk.enable'));
 
+@import 'utterances' if (hexo-config('utterances.enable'));
+
 @import 'search' if (hexo-config('local_search.enable') || hexo-config('algolia_search.enable'));
 
 @import 'related-posts' if (hexo-config('related_posts.enable'));

source/css/_common/components/third-party/utterances.styl

@@ -0,0 +1,3 @@
+.utterances {
+  max-width: unset;
+}