feat: Add support for utterances comments

_config.yml

@@ -444,6 +444,28 @@ disqus:
   shortname:
   count: true
 
+# Utterances
+# See: https://utteranc.es/
+utterances:
+  enable: false
+  # Github username.
+  owner:
+  # Github repository.
+  repo:
+  # Choose the mapping between blog posts and GitHub issues.
+  # Available values: pathname | url | title | og:title
+  mapping: pathname
+  # Choose the label that will be assigned to issues created by Utterances.
+  # Emoji are supported in label names.
+  label: utterances
+  # Choose an Utterances theme that matches your blog.
+  # Available values: github-light | github-dark | github-dark-orange | icy-dark | dark-blue | photon-dark
+  theme: github-light
+  # ! -------------------------------------------------------------------------------
+  # ! Don't set this unless the URL of the script in the official website is changed.
+  # ! -------------------------------------------------------------------------------
+  script_url: https://utteranc.es/client.js
+
 # ---------------------------------------------------------------
 # Statistics and Analytics config
 # ---------------------------------------------------------------

layout/_partials/widgets/comments.pug

@@ -7,6 +7,9 @@ else if theme.valine && theme.valine.enable
 else if theme.gitalk && theme.gitalk.enable
   div#comments.comments
     div#gitalk-container
+else if theme.utterances && theme.utterances.enable
+  div#comments.comments
+    div#utterances-container
 else if theme.livere && theme.livere.enable
   div#comments.comments
     div#lv-container(data-id="city" data-uid=theme.livere.uid)

layout/_third-party/comments/index.pug

@@ -5,6 +5,8 @@ if page.comments || theme.pjax.enable
     include ./valine.pug
   else if theme.gitalk && theme.gitalk.enable
     include ./gitalk.pug
+  else if theme.utterances && theme.utterances.enable
+    include ./utterances.pug
   else if theme.livere && theme.livere.enable
     include ./livere.pug
 else if theme.valine && theme.valine.enable && theme.valine.visitor

layout/_third-party/comments/utterances.pug

@@ -0,0 +1,25 @@
+script&attributes(dataPjax).
+  function loadUtterances() {
+    var d = document, s = d.createElement('script');
+    var container = d.getElementById('utterances-container');
+
+    if (!container) return;
+
+    s.src = '!{ theme.utterances.script_url }';
+    s.setAttribute('repo', '!{ theme.utterances.owner }/!{ theme.utterances.repo }');
+    s.setAttribute('issue-term', '!{ theme.utterances.mapping }');
+    s.setAttribute('label', '!{ theme.utterances.label }');
+    s.setAttribute('theme', '!{ theme.utterances.theme }');
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+
+    if (!{ pjax }) { s.setAttribute('data-pjax-rm', ''); }
+
+    container.append(s);
+  }
+
+  if (!{ pjax }) {
+    loadUtterances();
+  } else {
+    window.addEventListener('DOMContentLoaded', loadUtterances, false);
+  }

source/css/_common/components/widgets/comments.styl

@@ -1,4 +1,4 @@
-if (hexo-config('gitalk.enable') || hexo-config('valine.enable') || hexo-config('livere.enable') || hexo-config('disqus.enable')) {
+if (hexo-config('gitalk.enable') || hexo-config('valine.enable') || hexo-config('livere.enable') || hexo-config('disqus.enable') || hexo-config('utterances.enable')) {
   .comments {
     margin: 1.5rem 0 0;
     width: 100%;