添加giscus评论功能

Author: yunnysunny

package.json

@@ -14,7 +14,10 @@
   "author": "yunnysunny <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@whyun/vuepress-plugin-pdf-export": "^1.2.0",
+    "@vuepress/plugin-active-header-links": "^1.9.10",
+    "@vuepress/plugin-back-to-top": "^1.9.10",
+    "@vuepress/plugin-google-analytics": "^1.9.10",
+    "@vuepress/plugin-nprogress": "^1.9.10",
     "cross-env": "^7.0.3",
     "eslint": "^8.56.0",
     "markdown-it-disable-url-encode": "^1.0.1",

text/.vuepress/config.js

@@ -61,9 +61,13 @@ module.exports = {
       // 排除无实际内容的页面
       exclude: ["/404.html"]
     },
-    // 'vuepress-plugin-export': {
-      
-    // },
+    '@vuepress/google-analytics': {
+      ga: 'G-33K8GJ2J4R', 
+    },
+    '@vuepress/active-header-links': {},
+    '@vuepress/back-to-top': {},
+    '@vuepress/nprogress': {},
+    // 'vuepress-plugin-nuggets-style-copy': {},
     '@whyun/vuepress-plugin-pdf-export': {
       puppeteerLaunchOptions: {
         args: ['--no-sandbox', '--disable-setuid-sandbox']

text/.vuepress/enhanceApp.js

@@ -1,3 +1,48 @@
+function addGiscus () {
+  const script = document.createElement('script')
+  // use local file
+  // script.src = 'script.js';
+  script.src =
+    'https://giscus.app/client.js';
+  script.async = true;
+  script.crossOrigin = 'anonymous';
+  /**
+   * data-repo="yunnysunny/nodebook"
+        data-repo-id="MDEwOlJlcG9zaXRvcnk0MTAyNjM2Ng=="
+        data-category="Q&A"
+        data-category-id="MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyMTU4NDA2"
+        data-mapping="pathname"
+        data-strict="0"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="bottom"
+        data-theme="preferred_color_scheme"
+        data-lang="zh-CN"
+   */
+  const attrs = {
+    'data-repo': 'yunnysunny/nodebook',
+    'data-repo-id': 'MDEwOlJlcG9zaXRvcnk0MTAyNjM2Ng==',
+    'data-category': 'Q&A',
+    'data-category-id': 'MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyMTU4NDA2',
+    'data-mapping': 'pathname',
+    'data-strict': '0',
+    'data-reactions-enabled': '1',
+    'data-emit-metadata': '0',
+    'data-input-position': 'bottom',
+    'data-theme': 'preferred_color_scheme',
+    'data-lang': 'zh-CN',
+  }
+  for (const key in attrs) {
+    script.setAttribute(key, attrs[key])
+  }
+  script.onload = () => {
+    console.log('Script loaded successfuly');
+  };
+  script.onerror = () => {
+    console.log('Error occurred while loading script');
+  };
+  document.querySelector('.page').appendChild(script)
+}
 export default ({
   Vue, // VuePress 正在使用的 Vue 构造函数
   options, // 附加到根实例的一些选项
@@ -44,4 +89,22 @@ export default ({
       }
     }
   }
+  // setTimeout(() => {    
+  //   addGiscus()
+  // }, 3000)
+  // 选择一个要监听的节点
+  const targetNode = document.body
+
+  // 创建一个新的 MutationObserver
+  const observer = new MutationObserver(() => {
+    if (document.querySelector('.page')) {
+      addGiscus();
+      observer.disconnect(); // 销毁监视者
+    }
+  })
+
+  const config = { childList: true, subtree: true } // 对哪些更改做出反应
+
+  // 绑定目标节点并启动监视者
+  observer.observe(targetNode, config)
 }

text/.vuepress/styles/index.styl

@@ -0,0 +1,4 @@
+.giscus {
+    max-width: 740px;
+    margin: 0 auto;
+}