fix comment bug

Author: moremind

docs/.vuepress/config.js

@@ -4,7 +4,6 @@ const container = require('markdown-it-container')
 module.exports = {
   dest: 'vuepress',
   title: "Finen",
-  ga: "UA-131334453-1",
   description: 'Stay Hungry! Stay Foolish!',
   head: [
     ['link', { rel: 'icon', href: `/logo.png` }],
@@ -32,6 +31,9 @@ module.exports = {
       serviceWorker: true,
       updatePopup: true
     }],
+    ['@vuepress/google-analytics', {
+      ga: 'UA-131334453-1'
+    }],
   ],
   themeConfig: {
     repo: 'hirCodd',

docs/.vuepress/enhanceApp.js

@@ -1,8 +1,63 @@
+// function renderValine(router) {
+//   // 重新渲染 评论区
+//   router.afterEach((to, from) => {
+//     let $page = document.querySelector('.page')
+//     let vcomments = document.getElementById('vcomments')
+//     if(!vcomments){
+//       vcomments = document.createElement('div')
+//       vcomments.id = 'vcomments'
+//       // vcomments.style.margin = '1em 4em 0 4em'
+//       vcomments.style.maxWidth = '740px'
+//       vcomments.style.display = 'block'
+//       vcomments.style.padding = '10px'
+//       vcomments.style.marginLeft = 'auto'
+//       vcomments.style.marginRight = 'auto'
+//     }
+//     if ($page && !vcomments && $page.frontmatter.comments){
+//       $page.appendChild(vcomments)
+//       console.log("ss")
+//     }else{
+//       // 获取不到vuepress的page加载完成时的钩子，只能采用笨方法
+//       setTimeout(()=>{
+//         $page = document.querySelector('.page')
+//         $page.appendChild(vcomments)
+//         valine()
+//       }, 500)
+//     }
+//     valine()
+//   })
+// }
+// function valine() {
+//   const Valine = require('valine')
+//   const leancloudStorage = require('leancloud-storage')
+//   // require window 
+//   if (typeof window !== 'undefined') {
+//     window.AV = leancloudStorage
+//   }
+//   // 初始化valine
+//   new Valine({
+//     el: '#vcomments' ,
+//     appId: 'piM1Wm7mzq4fsj7RfCCJ7slE-gzGzoHsz',
+//     appKey: 'vdSq43byXijVSfd0Y5qY0vf8',
+//     notify:false, // 邮件提醒 
+//     verify:false, // 验证码
+//     avatar:'mm', 
+//     placeholder: '说点什么吧',
+//     path: window.location.pathname // 虽然默认就是这个，但是不加会导致不重新加载评论
+//   });
+// }
+
+
 export default ({
-    Vue, // VuePress 正在使用的 Vue 构造函数
-    options, // 附加到根实例的一些选项
-    router, // 当前应用的路由实例
-    siteData // 站点元数据
-  }) => {
-    // ...做一些其他的应用级别的优化
-  }
+  Vue, // VuePress 正在使用的 Vue 构造函数
+  options, // 附加到根实例的一些选项
+  router, // 当前应用的路由实例
+  siteData // 站点元数据
+}) => {
+  // try {
+  //   // 生成静态页时在node中执行，没有document对象
+  //   document && renderValine(router)
+  // } catch (e) {
+  //   console.error(e.message)
+  // }
+}

docs/.vuepress/theme/components/Comments.vue

@@ -1,7 +1,6 @@
 <template>
 
     <div class="vcomment" v-if="data.comments === true">
-    <!-- <div class="vcomment">  -->
       <div id="vcomments"></div>
     </div>
 </template>
@@ -15,52 +14,49 @@ export default {
     },
   },
   mounted: function(){
-    const Valine = require('valine');
-    window.AV = require('leancloud-storage')
-    const valine =  new Valine({
-      el: '#vcomments',
-      appId: 'piM1Wm7mzq4fsj7RfCCJ7slE-gzGzoHsz',
-      appKey: 'vdSq43byXijVSfd0Y5qY0vf8',
-      notify: false,
-      verify: false,
-      avatar: 'monsterid',
-      placeholder: '欢迎留言与我分享您的想法...',
-    })
-    // this.$router.afterEach((to, from) => {
-
-    // })
+    this.createValine()
+  },
+  
+  methods: {
+    createValine() {
+      const Valine = require('valine');
+      window.AV = require('leancloud-storage')
+      const valine =  new Valine({
+        el: '#vcomments',
+        appId: 'piM1Wm7mzq4fsj7RfCCJ7slE-gzGzoHsz',
+        appKey: 'vdSq43byXijVSfd0Y5qY0vf8',
+        notify: false,
+        verify: false,
+        avatar: 'monsterid',
+        path: window.location.pathname,
+        placeholder: '欢迎留言与我分享您的想法...',
+      });
+      this.valineRefresh = false
+    }
   },
   watch: {
     '$route' (to, from) {
       if(to.path !==  from.path){
-        // location.assign(location)
-        // 因为不是很懂vue，所以刷新使用这个来写。哈哈哈，不知道如何组件内刷新。有了解的请联系我：hefengen@hotmail.com
-        this.$router.go(0)
-        // console.log('我在这里要刷新一下')
-      }else{
-
+        setTimeout(() => {
+          //重新刷新valine
+          this.createValine()
+        }, 300)
       }
       
       /**
        * TODO:
        * 1. 使用其他方法更新评论组件 或者使用其他较为好用的评论组件
        * 2. 添加categories and tag
-       * 3. 跟换其他主题
+       * 3. 更换其他主题
        */
     }
-  },
-  beforeUpdate: function(){
-  },
-  updated: function(){
-  },
-  destroyed: function (){
   }
 }
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
 #vcomments {
-  width 68%
+  max-width 740px
   padding 10px
   display block;
   margin-left auto;

docs/.vuepress/theme/components/Page.vue

@@ -58,7 +58,7 @@
     </div>
 
     <slot name="bottom"/>
-    <comments v-bind:is="viewComments"></comments>
+    <Comments v-bind:is="viewComments"></Comments>
   </main>
 </template>
 

package.json

@@ -1,10 +1,17 @@
 {
+  "scripts": {
+    "dev": "yarn vuepress dev docs",
+    "build": "yarn vuepress build docs"
+  },
   "dependencies": {
     "@vuepress/plugin-back-to-top": "^1.0.0-alpha.0",
     "@vuepress/plugin-pwa": "^1.0.0-alpha.0",
     "eslint": "^5.12.1",
     "leancloud-storage": "^3.11.1",
     "valine": "^1.3.4",
     "vuepress": "^1.0.0-alpha.32"
+  },
+  "devDependencies": {
+    "@vuepress/plugin-google-analytics": "^1.0.0-alpha.0"
   }
 }

yarn.lock

@@ -877,6 +877,11 @@
   dependencies:
     lodash.debounce "^4.0.8"
 
+"@vuepress/plugin-google-analytics@^1.0.0-alpha.0":
+  version "1.0.0-alpha.0"
+  resolved "http://registry.npm.taobao.org/@vuepress/plugin-google-analytics/download/@vuepress/plugin-google-analytics-1.0.0-alpha.0.tgz#97acb3a512dca9b2b6e4014fa2d58da38e2a01b9"
+  integrity sha1-l6yzpRLcqbK25AFPotWNo44qAbk=
+
 "@vuepress/plugin-last-updated@^1.0.0-alpha.32":
   version "1.0.0-alpha.32"
   resolved "http://registry.npm.taobao.org/@vuepress/plugin-last-updated/download/@vuepress/plugin-last-updated-1.0.0-alpha.32.tgz#39da3be9e3976b062a09e36f835c8719220db825"