From 8132a96b9263b5965ba041bde980e3ba133b6e5a Mon Sep 17 00:00:00 2001 From: tlyong1992 Date: Wed, 25 May 2022 13:55:27 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E8=AF=84=E8=AE=BA=E6=8F=92=E4=BB=B6?= =?UTF-8?q?=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Comment.js | 16 ++++++++-------- components/ValineComponent.js | 4 +--- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/components/Comment.js b/components/Comment.js index 890a92d1..60f32537 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -40,20 +40,16 @@ const Comment = ({ frontMatter }) => {
+ {BLOG.COMMENT_VALINE_APP_ID && (
+ +
)} + {BLOG.COMMENT_GISCUS_REPO && (
)} - {BLOG.COMMENT_VALINE_APP_ID && (
- -
)} - - {BLOG.COMMENT_UTTERRANCES_REPO && (
- -
)} - {BLOG.COMMENT_CUSDIS_APP_ID && (
{ />
)} + {BLOG.COMMENT_UTTERRANCES_REPO && (
+ +
)} + {BLOG.COMMENT_GITALK_CLIENT_ID && (
{ - 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, + recordIP: true, placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER, serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS, visitor: true From a36b7f2711f6c05dc242b16e66927a52dd7e900c Mon Sep 17 00:00:00 2001 From: tlyong1992 Date: Fri, 27 May 2022 10:13:08 +0800 Subject: [PATCH 2/8] =?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
+ } + + 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
+
+
} export default ValineComponent From 3f2845bfe71440abda8a256e5097ad5cf9446000 Mon Sep 17 00:00:00 2001 From: tlyong1992 Date: Fri, 27 May 2022 11:08:04 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E6=96=B0=E5=A2=9EWaline=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Comment.js | 5 +++++ components/WalineComponent.js | 29 +++++++++++++++++++++++++++++ package.json | 3 ++- pages/_app.js | 3 +++ 4 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 components/WalineComponent.js diff --git a/components/Comment.js b/components/Comment.js index 60f32537..c75ff12f 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -4,6 +4,7 @@ import { useRouter } from 'next/router' import Tabs from '@/components/Tabs' import { ReactCusdis } from 'react-cusdis' import { useGlobal } from '@/lib/global' +import { WalineComponent } from './WalineComponent' const GitalkComponent = dynamic( () => { @@ -40,6 +41,10 @@ const Comment = ({ frontMatter }) => {
+ { BLOG.COMMENT_WALINE_SERVER_URL && (
+ +
) } + {BLOG.COMMENT_VALINE_APP_ID && (
)} diff --git a/components/WalineComponent.js b/components/WalineComponent.js new file mode 100644 index 00000000..1f9a1602 --- /dev/null +++ b/components/WalineComponent.js @@ -0,0 +1,29 @@ +import React from 'react' +import { init } from '@waline/client' +import BLOG from '@/blog.config' + +/** + * @see https://waline.js.org/guide/get-started.html + * @param {*} props + * @returns + */ +export const WalineComponent = (props) => { + const walineInstanceRef = React.useRef(null) + const containerRef = React.createRef() + + React.useEffect(() => { + walineInstanceRef.current = init({ + ...props, + el: containerRef.current, + serverURL: BLOG.COMMENT_WALINE_SERVER_URL + }) + + return () => walineInstanceRef.current?.destroy() + }, []) + + React.useEffect(() => { + walineInstanceRef.current?.update(props) + }, props) + + return
+} diff --git a/package.json b/package.json index ceae6563..3750b293 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.js b/pages/_app.js index 3554446b..e4205758 100644 --- a/pages/_app.js +++ b/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' From 5b2379886faa9439d68186faa538c051c5cfd94a Mon Sep 17 00:00:00 2001 From: tlyong1992 Date: Fri, 27 May 2022 11:08:17 +0800 Subject: [PATCH 4/8] =?UTF-8?q?=E7=89=88=E6=9C=ACV3.3.8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.local | 2 +- blog.config.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.env.local b/.env.local index 6a70781b..401c5f18 100644 --- a/.env.local +++ b/.env.local @@ -1,2 +1,2 @@ # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables -NEXT_PUBLIC_VERSION=3.3.7 \ No newline at end of file +NEXT_PUBLIC_VERSION=3.3.8 \ No newline at end of file diff --git a/blog.config.js b/blog.config.js index 920c12e0..baf3c17b 100644 --- a/blog.config.js +++ b/blog.config.js @@ -4,8 +4,7 @@ const BLOG = { BIO: '一个普通的干饭人🍚', // 作者简介 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 + NOTION_PAGE_ID: '29d5a78b858e4a3bbc13e51b5400fb82', // 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 +106,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] From 25c1ee3efb6a34125521d0eae3e22fc0230ddb42 Mon Sep 17 00:00:00 2001 From: tlyong1992 Date: Fri, 27 May 2022 11:15:42 +0800 Subject: [PATCH 5/8] hotfix-waline --- components/WalineComponent.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/components/WalineComponent.js b/components/WalineComponent.js index 1f9a1602..62e65c0e 100644 --- a/components/WalineComponent.js +++ b/components/WalineComponent.js @@ -1,6 +1,7 @@ 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 @@ -10,6 +11,7 @@ import BLOG from '@/blog.config' export const WalineComponent = (props) => { const walineInstanceRef = React.useRef(null) const containerRef = React.createRef() + const router = useRouter() React.useEffect(() => { walineInstanceRef.current = init({ @@ -21,9 +23,21 @@ export const WalineComponent = (props) => { return () => walineInstanceRef.current?.destroy() }, []) + const updateWaline = url => { + walineInstanceRef.current?.update(props) + } + React.useEffect(() => { walineInstanceRef.current?.update(props) - }, props) + router.events.on('routeChangeComplete', updateWaline) + return () => { + router.events.off('routeChangeComplete', updateWaline) + } + }, []) + + React.useEffect(() => { + + }, []) return
} From def31da4d4d11b62f3bc38294aa75fc19c52814f Mon Sep 17 00:00:00 2001 From: tlyong1992 Date: Fri, 27 May 2022 11:28:54 +0800 Subject: [PATCH 6/8] =?UTF-8?q?=E5=9B=9E=E6=BB=9A=20blog.config.js?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blog.config.js b/blog.config.js index baf3c17b..01b32c22 100644 --- a/blog.config.js +++ b/blog.config.js @@ -4,7 +4,8 @@ const BLOG = { BIO: '一个普通的干饭人🍚', // 作者简介 LINK: 'https://tangly1024.com', // 网站地址 KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开 - NOTION_PAGE_ID: '29d5a78b858e4a3bbc13e51b5400fb82', // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5 + NOTION_PAGE_ID: + 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, // 是否显示调试按钮 From cf5786baf07d552ddaa068e20c3a3232a49e91ec Mon Sep 17 00:00:00 2001 From: tlyong1992 Date: Fri, 27 May 2022 13:22:39 +0800 Subject: [PATCH 7/8] hotfix-waline-cors --- components/WalineComponent.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/components/WalineComponent.js b/components/WalineComponent.js index 62e65c0e..567dd1d9 100644 --- a/components/WalineComponent.js +++ b/components/WalineComponent.js @@ -13,31 +13,22 @@ export const WalineComponent = (props) => { 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 }) - - return () => walineInstanceRef.current?.destroy() - }, []) - - const updateWaline = url => { - walineInstanceRef.current?.update(props) - } - - React.useEffect(() => { - walineInstanceRef.current?.update(props) router.events.on('routeChangeComplete', updateWaline) return () => { + walineInstanceRef.current?.destroy() router.events.off('routeChangeComplete', updateWaline) } }, []) - React.useEffect(() => { - - }, []) - return
} From 55c7b018d0baca142e11e1c11ed9a8c3a0e4c577 Mon Sep 17 00:00:00 2001 From: tlyong1992 Date: Fri, 27 May 2022 15:56:04 +0800 Subject: [PATCH 8/8] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B0=81=E8=A3=85?= =?UTF-8?q?=E8=AF=84=E8=AE=BA=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Comment.js | 45 +++++++++++++---------------------- components/CusdisComponent.js | 22 +++++++++++++++++ components/Gitalk.js | 15 +++++++++--- components/WalineComponent.js | 4 +++- 4 files changed, 54 insertions(+), 32 deletions(-) create mode 100644 components/CusdisComponent.js diff --git a/components/Comment.js b/components/Comment.js index c75ff12f..4bae2665 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -1,10 +1,21 @@ 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' -import { WalineComponent } from './WalineComponent' + +const WalineComponent = dynamic( + () => { + return import('@/components/WalineComponent') + }, + { ssr: false } +) + +const CusdisComponent = dynamic( + () => { + return import('@/components/CusdisComponent') + }, + { ssr: false } +) const GitalkComponent = dynamic( () => { @@ -33,9 +44,7 @@ const Comment = ({ frontMatter }) => { if (!frontMatter) { return <>Loading... } - const router = useRouter() - const { locale, isDarkMode } = useGlobal() - // const theme = isDarkMode ? 'dark' : 'light' + const { isDarkMode } = useGlobal() return (
@@ -56,16 +65,7 @@ const Comment = ({ frontMatter }) => { )} {BLOG.COMMENT_CUSDIS_APP_ID && (
- +
)} {BLOG.COMMENT_UTTERRANCES_REPO && (
@@ -73,18 +73,7 @@ const Comment = ({ frontMatter }) => {
)} {BLOG.COMMENT_GITALK_CLIENT_ID && (
- +
)}
diff --git a/components/CusdisComponent.js b/components/CusdisComponent.js new file mode 100644 index 00000000..f1fce6ef --- /dev/null +++ b/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 +} + +export default CusdisComponent diff --git a/components/Gitalk.js b/components/Gitalk.js index 2edc44bd..66b30174 100644 --- a/components/Gitalk.js +++ b/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 +const Gitalk = ({ frontMatter }) => { + return } export default Gitalk diff --git a/components/WalineComponent.js b/components/WalineComponent.js index 567dd1d9..80741b15 100644 --- a/components/WalineComponent.js +++ b/components/WalineComponent.js @@ -8,7 +8,7 @@ import { useRouter } from 'next/router' * @param {*} props * @returns */ -export const WalineComponent = (props) => { +const WalineComponent = (props) => { const walineInstanceRef = React.useRef(null) const containerRef = React.createRef() const router = useRouter() @@ -32,3 +32,5 @@ export const WalineComponent = (props) => { return
} + +export default WalineComponent