build: 添加 Gitalk 评论插件

Author: dunwu

docs/.vuepress/enhanceApp.js

@@ -32,9 +32,16 @@ export default ({
         }
         // 显示广告模块
         pageB.style.display = 'flex'
+
+        integrateGitalk(router)
       }, 0)
     })
   }
+  try {
+    document && integrateGitalk(router)
+  } catch (e) {
+    console.error(e.message)
+  }
 }
 
 function ABDetected() {
@@ -53,3 +60,54 @@ function docReady(t) {
     ? setTimeout(t, 1)
     : document.addEventListener('DOMContentLoaded', t)
 }
+
+// 集成 Gitalk 评论插件
+function integrateGitalk(router) {
+  const linkGitalk = document.createElement('link')
+  linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css'
+  linkGitalk.rel = 'stylesheet'
+  document.body.appendChild(linkGitalk)
+  const scriptGitalk = document.createElement('script')
+  scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js'
+  document.body.appendChild(scriptGitalk)
+
+  router.afterEach((to) => {
+    if (scriptGitalk.onload) {
+      loadGitalk(to)
+    } else {
+      scriptGitalk.onload = () => {
+        loadGitalk(to)
+      }
+    }
+  })
+
+  function loadGitalk(to) {
+    let commentsContainer = document.getElementById('gitalk-container')
+    if (!commentsContainer) {
+      commentsContainer = document.createElement('div')
+      commentsContainer.id = 'gitalk-container'
+      commentsContainer.classList.add('content')
+    }
+    const $page = document.querySelector('.page')
+    if ($page) {
+      $page.appendChild(commentsContainer)
+      if (typeof Gitalk !== 'undefined' && Gitalk instanceof Function) {
+        renderGitalk(to.fullPath)
+      }
+    }
+  }
+  function renderGitalk(fullPath) {
+    console.info(fullPath)
+    const gitalk = new Gitalk({
+      clientID: '7dd8c87a20cff437d2ed',
+      clientSecret: '4e28d81a9a0280796b2b45ce2944424c6f2c1531', // come from github development
+      repo: 'blog',
+      owner: 'dunwu',
+      admin: ['dunwu'],
+      id: 'comment',
+      distractionFreeMode: false,
+      language: 'zh-CN',
+    })
+    gitalk.render('gitalk-container')
+  }
+}