Merge pull request tangly1024#1436 from tangly1024/feat/comment-artalk

支持Artalk评论插件

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, // 博客列表是否显示评论数

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 (
+        <div id="artalk"></div>
+  )
+}
+
+export default Artalk

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 (
     <div key={frontMatter?.id} id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
         <Tabs>
+             {BLOG.COMMENT_ARTALK_SERVER && (<div key='Artalk'>
+                <Artalk siteInfo={siteInfo} />
+            </div>)}
 
             {BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
                 <TwikooCompenent />

components/CommonScript.js

@@ -42,6 +42,8 @@ const CommonScript = () => {
 
     {BLOG.COMMENT_TWIKOO_ENV_ID && <script defer src={BLOG.COMMENT_TWIKOO_CDN_URL}/> }
 
+    {BLOG.COMMENT_ARTALK_SERVER && <script defer src={BLOG.COMMENT_ARTALK_JS}/> }
+
     {BLOG.COMMENT_TIDIO_ID && <script async src={`//code.tidio.co/${BLOG.COMMENT_TIDIO_ID}.js`} />}
 
     {/* gitter聊天室 */}