From a36b7f2711f6c05dc242b16e66927a52dd7e900c Mon Sep 17 00:00:00 2001
From: tlyong1992 <tlyong1992@hotmail.com>
Date: Fri, 27 May 2022 10:13:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DValine=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E9=87=8D=E6=96=B0=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ValineComponent.js | 37 +++++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/components/ValineComponent.js b/components/ValineComponent.js
index 503c14f4..6df63e7c 100644
--- a/components/ValineComponent.js
+++ b/components/ValineComponent.js
@@ -1,24 +1,49 @@
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
 import React from 'react'
 import Valine from 'valine'
 
 const ValineComponent = (props) => {
-  React.useEffect(() => {
-    const valine = Valine({
-      el: '#vcomments',
+  const router = useRouter()
+  const initValine = (url) => {
+    const valine = new Valine({
+      el: '#v-comments',
       appId: BLOG.COMMENT_VALINE_APP_ID,
       appKey: BLOG.COMMENT_VALINE_APP_KEY,
       avatar: '',
+      path: url || router.asPath,
       recordIP: true,
       placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER,
       serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS,
       visitor: true
     })
     if (!valine) {
-      console.error('valine插件加载失败')
+      console.error('valine错误')
     }
-  })
-  return <div id='vcomments'></div>
+  }
+
+  const updateValine = url => {
+    // 移除旧的评论区，否则会重复渲染。
+    const wrapper = document.getElementById('v-wrapper')
+    const comments = document.getElementById('v-comments')
+    wrapper.removeChild(comments)
+    const newComments = document.createElement('div')
+    newComments.id = 'v-comments'
+    newComments.name = new Date()
+    wrapper.appendChild(newComments)
+    initValine(url)
+  }
+
+  React.useEffect(() => {
+    initValine()
+    router.events.on('routeChangeComplete', updateValine)
+    return () => {
+      router.events.off('routeChangeComplete', updateValine)
+    }
+  }, [])
+  return <div id='v-wrapper'>
+      <div id='v-comments'></div>
+  </div>
 }
 
 export default ValineComponent