Valine 插件植入

blog.config.js

@@ -102,6 +102,9 @@ 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_KEY: process.env.NEXT_PUBLIC_VALINE_KEY || '',
+
   //  站点统计
   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]

components/Comment.js

@@ -23,6 +23,13 @@ const GiscusComponent = dynamic(
   },
   { ssr: false }
 )
+const Valine = dynamic(() => import('@/components/Valine'), {
+  ssr: false
+})
+const ValinePanel = dynamic(
+  () => import('@/components/ValinePanel'),
+  { ssr: false }
+)
 
 const Comment = ({ frontMatter }) => {
   if (!frontMatter) {
@@ -30,6 +37,8 @@ const Comment = ({ frontMatter }) => {
   }
   const router = useRouter()
   const { locale, isDarkMode } = useGlobal()
+  const theme = isDarkMode ? 'dark' : 'light'
+
   return (
     <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
       <Tabs>
@@ -40,6 +49,36 @@ const Comment = ({ frontMatter }) => {
           </div>
         )}
 
+        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
+          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+        </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>
+        </div>)}
+
+        {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
+          <ReactCusdis
+            lang={locale.LOCALE.toLowerCase()}
+            attrs={{
+              host: BLOG.COMMENT_CUSDIS_HOST,
+              appId: BLOG.COMMENT_CUSDIS_APP_ID,
+              pageId: frontMatter.id,
+              pageTitle: frontMatter.title,
+              pageUrl: BLOG.LINK + router.asPath
+            }}
+          />
+        </div>)}
+
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
           <GitalkComponent
             options={{
@@ -54,23 +93,6 @@ const Comment = ({ frontMatter }) => {
             }}
           />
         </div>)}
-
-        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
-          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-        </div>)}
-
-        {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-          <ReactCusdis
-            lang={locale.LOCALE.toLowerCase()}
-            attrs={{
-              host: BLOG.COMMENT_CUSDIS_HOST,
-              appId: BLOG.COMMENT_CUSDIS_APP_ID,
-              pageId: frontMatter.id,
-              pageTitle: frontMatter.title,
-              pageUrl: BLOG.LINK + router.asPath
-            }}
-          />
-        </div>)}
       </Tabs>
     </div>
   )

components/Valine.js

@@ -0,0 +1,3 @@
+import { Valine } from 'react-valine'
+
+export default Valine

components/ValineCount.js

@@ -0,0 +1,6 @@
+import { ValineCount } from 'react-valine'
+
+/**
+ * 显示评论数
+ */
+export default ValineCount

components/ValinePanel.js

@@ -0,0 +1,3 @@
+import { ValinePanel } from 'react-valine'
+
+export default ValinePanel

package.json

@@ -45,6 +45,7 @@
     "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"