改用原生Valine

blog.config.js

@@ -102,10 +102,12 @@ const BLOG = {
   COMMENT_DAO_VOICE_ID: process.env.NEXT_PUBLIC_COMMENT_DAO_VOICE_ID || '', // DaoVoice http://dashboard.daovoice.io/get-started
   COMMENT_TIDIO_ID: process.env.NEXT_PUBLIC_COMMENT_TIDIO_ID || '', // [tidio_id] -> //code.tidio.co/[tidio_id].js
 
-  COMMENT_VALINE_APP_ID: process.env.NEXT_PUBLIC_VALINE_ID || '', // Valine @see https://github.com/stonehank/react-valine#%E8%8E%B7%E5%8F%96app-id-%E5%92%8C-app-key
+  COMMENT_VALINE_APP_ID: process.env.NEXT_PUBLIC_VALINE_ID || '', // Valine @see https://valine.js.org/quickstart.html 或 https://github.com/stonehank/react-valine#%E8%8E%B7%E5%8F%96app-id-%E5%92%8C-app-key
   COMMENT_VALINE_APP_KEY: process.env.NEXT_PUBLIC_VALINE_KEY || '',
+  COMMENT_VALINE_SERVER_URLS: process.env.NEXT_PUBLIC_VALINE_SERVER_URLS || '', // 该配置适用于国内自定义域名用户, 海外版本会自动检测(无需手动填写) @see https://valine.js.org/configuration.html#serverURLs
+  COMMENT_VALINE_PLACEHOLDER: process.env.NEXT_PUBLIC_VALINE_PLACEHOLDER || '抢个沙发吧~',
 
-  //  站点统计
+  // 站点统计
   ANALYTICS_BUSUANZI_ENABLE: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/
   ANALYTICS_BAIDU_ID: process.env.NEXT_PUBLIC_ANALYTICS_BAIDU_ID || '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
   ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]

components/Comment.js

@@ -23,13 +23,10 @@ const GiscusComponent = dynamic(
   },
   { ssr: false }
 )
-const Valine = dynamic(() => import('@/components/Valine'), {
+
+const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
   ssr: false
 })
-const ValinePanel = dynamic(
-  () => import('@/components/ValinePanel'),
-  { ssr: false }
-)
 
 const Comment = ({ frontMatter }) => {
   if (!frontMatter) {
@@ -37,7 +34,7 @@ const Comment = ({ frontMatter }) => {
   }
   const router = useRouter()
   const { locale, isDarkMode } = useGlobal()
-  const theme = isDarkMode ? 'dark' : 'light'
+  // const theme = isDarkMode ? 'dark' : 'light'
 
   return (
     <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
@@ -49,21 +46,12 @@ const Comment = ({ frontMatter }) => {
           </div>
         )}
 
-        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
-          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+        {BLOG.COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
+            <ValineComponent path={frontMatter.id}/>
         </div>)}
 
-        {BLOG.COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
-
-          <Valine appId={BLOG.COMMENT_VALINE_APP_ID}
-                    appKey={BLOG.COMMENT_VALINE_APP_KEY}
-                    pagesize={BLOG.POSTS_PER_PAGE}
-                    customTxt={{
-                      tips: { sofa: '抢个沙发吧~' },
-                      ctrl: { more: '再给我来一打' }
-                    }}>
-                <ValinePanel uniqStr={'tangly1024'} themeMode={theme} />
-            </Valine>
+        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
+          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
         </div>)}
 
         {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>

components/ValineComponent.js

@@ -0,0 +1,26 @@
+import BLOG from '@/blog.config'
+import React from 'react'
+import Valine from 'valine'
+
+const ValineComponent = (props) => {
+  const { path } = props
+  React.useEffect(() => {
+    const valine = Valine({
+      el: '#vcomments',
+      appId: BLOG.COMMENT_VALINE_APP_ID,
+      appKey: BLOG.COMMENT_VALINE_APP_KEY,
+      avatar: '',
+      path: path,
+      recordIP: false,
+      placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER,
+      serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS,
+      visitor: true
+    })
+    if (!valine) {
+      console.error('valine插件加载失败')
+    }
+  })
+  return <div id='vcomments'></div>
+}
+
+export default ValineComponent

package.json

@@ -45,10 +45,10 @@
     "react-messenger-customer-chat": "^0.8.0",
     "react-notion-x": "6.6.2",
     "react-share": "^4.4.0",
-    "react-valine": "^0.6.2",
     "smoothscroll-polyfill": "^0.4.4",
     "typed.js": "^2.0.12",
-    "use-ackee": "^3.0.0"
+    "use-ackee": "^3.0.0",
+    "valine": "^1.4.18"
   },
   "devDependencies": {
     "autoprefixer": "^10.2.5",