diff --git a/blog.config.js b/blog.config.js index 54a056cf..ff3d3702 100644 --- a/blog.config.js +++ b/blog.config.js @@ -229,6 +229,11 @@ const BLOG = { // ********挂件组件相关******** // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK + // artalk 评论插件 + COMMENT_ARTALK_SERVER: process.env.NEXT_PUBLIC_COMMENT_ARTALK_SERVER || '', // ArtalkServert后端地址 https://artalk.js.org/guide/deploy.html + COMMENT_ARTALK_JS: process.env.NEXT_PUBLIC_COMMENT_ARTALK_JS || 'https://cdnjs.cloudflare.com/ajax/libs/artalk/2.5.5/Artalk.js', // ArtalkServert js cdn + COMMENT_ARTALK_CSS: process.env.NEXT_PUBLIC_COMMENT_ARTALK_CSS || 'https://cdnjs.cloudflare.com/ajax/libs/artalk/2.5.5/Artalk.css', // ArtalkServert css cdn + // twikoo COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', // TWIKOO后端地址 腾讯云环境填envId;Vercel环境填域名,教程:https://tangly1024.com/article/notionnext-twikoo COMMENT_TWIKOO_COUNT_ENABLE: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_COUNT_ENABLE || false, // 博客列表是否显示评论数 diff --git a/components/Artalk.js b/components/Artalk.js new file mode 100644 index 00000000..0da7734f --- /dev/null +++ b/components/Artalk.js @@ -0,0 +1,30 @@ +import BLOG from '@/blog.config' +import { loadExternalResource } from '@/lib/utils' +// import { loadExternalResource } from '@/lib/utils' +import { useEffect } from 'react' + +/** + * Giscus评论 @see https://giscus.app/zh-CN + * Contribute by @txs https://github.com/txs/NotionNext/commit/1bf7179d0af21fb433e4c7773504f244998678cb + * @returns {JSX.Element} + * @constructor + */ + +const Artalk = ({ siteInfo }) => { + useEffect(() => { + loadExternalResource(BLOG.COMMENT_ARTALK_CSS, 'css') + window?.Artalk?.init({ + server: BLOG.COMMENT_ARTALK_SERVER, // 后端地址 + el: '#artalk', // 容器元素 + locale: BLOG.LANG, + // pageKey: '/post/1', // 固定链接 (留空自动获取) + // pageTitle: '关于引入 Artalk 的这档子事', // 页面标题 (留空自动获取) + site: siteInfo?.title // 你的站点名 + }) + }, []) + return ( +
+ ) +} + +export default Artalk diff --git a/components/Comment.js b/components/Comment.js index 8584be59..6be4bc64 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -3,6 +3,7 @@ import dynamic from 'next/dynamic' import Tabs from '@/components/Tabs' import { isBrowser } from '@/lib/utils' import { useRouter } from 'next/router' +import Artalk from './Artalk' const WalineComponent = dynamic( () => { @@ -66,7 +67,7 @@ BLOG.COMMENT_GISCUS_REPO || BLOG.COMMENT_CUSDIS_APP_ID || BLOG.COMMENT_UTTERRANC * @param {*} param0 * @returns */ -const Comment = ({ frontMatter, className }) => { +const Comment = ({ siteInfo, frontMatter, className }) => { const router = useRouter() if (isBrowser && ('giscus' in router.query || router.query.target === 'comment')) { @@ -84,6 +85,9 @@ const Comment = ({ frontMatter, className }) => { return (
+ {BLOG.COMMENT_ARTALK_SERVER && (
+ +
)} {BLOG.COMMENT_TWIKOO_ENV_ID && (
diff --git a/components/CommonScript.js b/components/CommonScript.js index fb3c7097..4ee0f12c 100644 --- a/components/CommonScript.js +++ b/components/CommonScript.js @@ -42,6 +42,8 @@ const CommonScript = () => { {BLOG.COMMENT_TWIKOO_ENV_ID &&