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..01b32c22 100644 --- a/blog.config.js +++ b/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] diff --git a/components/Comment.js b/components/Comment.js index 890a92d1..4bae2665 100644 --- a/components/Comment.js +++ b/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 (
+ { BLOG.COMMENT_WALINE_SERVER_URL && (
+ +
) } + + {BLOG.COMMENT_VALINE_APP_ID && (
+ +
)} + {BLOG.COMMENT_GISCUS_REPO && (
)} - {BLOG.COMMENT_VALINE_APP_ID && (
- + {BLOG.COMMENT_CUSDIS_APP_ID && (
+
)} {BLOG.COMMENT_UTTERRANCES_REPO && (
)} - {BLOG.COMMENT_CUSDIS_APP_ID && (
- -
)} - {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/ValineComponent.js b/components/ValineComponent.js index 2829ace7..6df63e7c 100644 --- a/components/ValineComponent.js +++ b/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
+ } + + 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 diff --git a/components/WalineComponent.js b/components/WalineComponent.js new file mode 100644 index 00000000..80741b15 --- /dev/null +++ b/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
+} + +export default WalineComponent 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'