支持Artalk评论插件

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聊天室 */}