feat: Add gitalk comment

_config.yml

@@ -348,11 +348,35 @@ gitment:
   owner: 
   # Github repository.
   repo: 
+  # Github Application Client ID
   client_id: 
+  # Github Application Client Secret
   client_secret: 
   # Enable / Disable Lazy load. Enable is recommended.
   lazy: true
 
+# Gittalk
+# See: https://github.com/gitalk/gitalk
+gitalk:
+  enable: false
+  # Github username.
+  owner: 
+  # Github repository.
+  repo: 
+  # Github Application Client ID
+  client_id: 
+  # Github Application Client Secret
+  client_secret: 
+  # GitHub repo owner and collaborators, only these guys can initialize github issues
+  admin: 
+  # Facebook-like distraction free mode
+  distraction_free_mode: false
+  # Gitalk's display language depends on user's browser or system environment
+  # If you want everyone visiting your site to see a uniform language,
+  #   you can set a force language value
+  # Available values: en, zh-CN, es-ES, fr, ru, zh-TW
+  language: 
+
 # ---------------------------------------------------------------
 # Statistics and Analytics config
 # ---------------------------------------------------------------

layout/_components/comments.pug

@@ -6,3 +6,6 @@ if theme.gitment && theme.gitment.enable
       div#gitment-container(style="display: none")
     else
       div#gitment-container
+else if theme.gitalk && theme.gitalk.enable
+  div#comments.comments.main-content-layout
+    div#gitalk-container

layout/_third-party/comments/gitalk.pug

+link(href="https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.css" rel="stylesheet" type="text/css")
+script(src="https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js")
+script(src="https://cdn.jsdelivr.net/npm/js-md5@latest/src/md5.min.js")
+
+-
+  let lang = _.get(theme, 'gitalk.language')
+    ? theme.gitalk.language : (config.language
+    ? config.language : (window.navigator.language ||
+      window.navigator.userLanguage));
+
+script.
+  window.onload = function () {
+    let gitalk = new Gitalk({
+      id: md5(decodeURI(location.pathname)),
+      clientID: '!{ theme.gitalk.client_id }',
+      clientSecret: '!{ theme.gitalk.client_secret }',
+      repo: '!{ theme.gitalk.repo }',
+      owner: '!{ theme.gitalk.owner }',
+      admin: ['!{ theme.gitalk.admin }'],
+      distractionFreeMode: '!{ theme.gitalk.distraction_free_mode }',
+      language: '!{ lang }'
+    });
+    gitalk.render('gitalk-container');
+  };

layout/_third-party/comments/index.pug

 if page.comments
-  if theme.gitment.enable && theme.gitment.client_id && theme.gitment.client_secret
+  if  theme.gitment && theme.gitment.enable
     include ./gitment.pug
+  else if theme.gitalk && theme.gitalk.enable
+    include ./gitalk.pug

layout/_third-party/search/algolia.pug

 link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css")
-script(src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js" defer)
+script(defer src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js")

source/css/_components/comments.styl

@@ -24,3 +24,10 @@
 
   a.gitment-editor-avatar
     clearAStyle()  
+
+  // Gitalk
+  #gitalk-container
+    width: 100%
+    
+    & > :first-child
+      margin: 0 auto