From 3f2845bfe71440abda8a256e5097ad5cf9446000 Mon Sep 17 00:00:00 2001 From: tlyong1992 Date: Fri, 27 May 2022 11:08:04 +0800 Subject: [PATCH 1/3] =?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 2/3] =?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 3/3] 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
}