Merge branch 'main' into fix-view-on-ipad

.env.local

@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.3.7
+NEXT_PUBLIC_VERSION=3.3.8

blog.config.js

@@ -5,7 +5,7 @@ const BLOG = {
   LINK: 'https://tangly1024.com', // 网站地址
   KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
   NOTION_PAGE_ID:
-    process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
+  process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
   NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
 
@@ -107,6 +107,8 @@ const BLOG = {
   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 || '抢个沙发吧~', // 可以搭配后台管理评论 https://github.com/DesertsP/Valine-Admin  便于查看评论，以及邮件通知，垃圾评论过滤等功能
 
+  COMMENT_WALINE_SERVER_URL: process.env.NEXT_PUBLIC_WALINE_SERVER_URL || '', // Waline 评论 @see https://waline.js.org/guide/get-started.html
+
   // 站点统计
   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

@@ -1,10 +1,22 @@
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
 import Tabs from '@/components/Tabs'
-import { ReactCusdis } from 'react-cusdis'
 import { useGlobal } from '@/lib/global'
 
+const WalineComponent = dynamic(
+  () => {
+    return import('@/components/WalineComponent')
+  },
+  { ssr: false }
+)
+
+const CusdisComponent = dynamic(
+  () => {
+    return import('@/components/CusdisComponent')
+  },
+  { ssr: false }
+)
+
 const GitalkComponent = dynamic(
   () => {
     return import('@/components/Gitalk')
@@ -32,54 +44,36 @@ const Comment = ({ frontMatter }) => {
   if (!frontMatter) {
     return <>Loading...</>
   }
-  const router = useRouter()
-  const { locale, isDarkMode } = useGlobal()
-  // const theme = isDarkMode ? 'dark' : 'light'
+  const { isDarkMode } = useGlobal()
 
   return (
     <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
       <Tabs>
 
+        { BLOG.COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
+            <WalineComponent/>
+        </div>) }
+
+        {BLOG.COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
+            <ValineComponent path={frontMatter.id}/>
+        </div>)}
+
         {BLOG.COMMENT_GISCUS_REPO && (
           <div key="Giscus">
             <GiscusComponent isDarkMode={isDarkMode} className="px-2" />
           </div>
         )}
 
-        {BLOG.COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
-            <ValineComponent path={frontMatter.id}/>
+        {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
+          <CusdisComponent frontMatter={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>)}
-
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
-          <GitalkComponent
-            options={{
-              id: frontMatter.id,
-              title: frontMatter.title,
-              clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
-              clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
-              repo: BLOG.COMMENT_GITALK_REPO,
-              owner: BLOG.COMMENT_GITALK_OWNER,
-              admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
-              distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
-            }}
-          />
+          <GitalkComponent frontMatter={frontMatter}/>
         </div>)}
       </Tabs>
     </div>

components/CusdisComponent.js

@@ -0,0 +1,22 @@
+import { useGlobal } from '@/lib/global'
+import { ReactCusdis } from 'react-cusdis'
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+
+const CusdisComponent = ({ frontMatter }) => {
+  const { locale } = useGlobal()
+  const router = useRouter()
+
+  return <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
+    }}
+  />
+}
+
+export default CusdisComponent

components/Gitalk.js

@@ -1,9 +1,18 @@
 import 'gitalk/dist/gitalk.css'
-
+import BLOG from '@/blog.config'
 import GitalkComponent from 'gitalk/dist/gitalk-component'
 
-const Gitalk = props => {
-  return <GitalkComponent {...props} />
+const Gitalk = ({ frontMatter }) => {
+  return <GitalkComponent options={{
+    id: frontMatter.id,
+    title: frontMatter.title,
+    clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
+    clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
+    repo: BLOG.COMMENT_GITALK_REPO,
+    owner: BLOG.COMMENT_GITALK_OWNER,
+    admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+    distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
+  }} />
 }
 
 export default Gitalk

components/ValineComponent.js

@@ -1,26 +1,49 @@
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
 import React from 'react'
 import Valine from 'valine'
 
 const ValineComponent = (props) => {
-  const { path } = 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: path,
-      recordIP: false,
+      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

components/WalineComponent.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { init } from '@waline/client'
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const WalineComponent = (props) => {
+  const walineInstanceRef = React.useRef(null)
+  const containerRef = React.createRef()
+  const router = useRouter()
+
+  const updateWaline = url => {
+    walineInstanceRef.current?.update(props)
+  }
+
+  React.useEffect(() => {
+    walineInstanceRef.current = init({
+      ...props,
+      el: containerRef.current,
+      serverURL: BLOG.COMMENT_WALINE_SERVER_URL
+    })
+    router.events.on('routeChangeComplete', updateWaline)
+    return () => {
+      walineInstanceRef.current?.destroy()
+      router.events.off('routeChangeComplete', updateWaline)
+    }
+  }, [])
+
+  return <div ref={containerRef} />
+}
+
+export default WalineComponent

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "3.3.7",
+  "version": "3.3.8",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {
@@ -51,6 +51,7 @@
     "valine": "^1.4.18"
   },
   "devDependencies": {
+    "@waline/client": "^2.5.1",
     "autoprefixer": "^10.2.5",
     "eslint": "^7.26.0",
     "eslint-config-next": "^11.0.0",

pages/_app.js

@@ -11,6 +11,9 @@ import '@/styles/notion.css' //  重写部分样式
 import 'prismjs/themes/prism-tomorrow.min.css'
 import 'react-notion-x/build/third-party/equation.css'
 
+// waline 评论插件
+import '@waline/client/dist/waline.css'
+
 import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'