FIX heo 评论区关闭

blog.config.js

@@ -177,9 +177,10 @@ const BLOG = {
   STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关
 
   //   ********挂件组件相关********
-  // Chatbase
-  CHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || null, // 是否显示chatbase机器人 https://www.chatbase.co/
-  WEB_WHIZ_ENABLED: process.env.NEXT_PUBLIC_WEB_WHIZ_ENABLED || false, // 是否显示webwhizAI机器人 @see https://github.com/webwhiz-ai/webwhiz
+  // Chatbase 是否显示chatbase机器人 https://www.chatbase.co/
+  CHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || null,
+  // WebwhizAI 机器人 @see https://github.com/webwhiz-ai/webwhiz
+  WEB_WHIZ_ENABLED: process.env.NEXT_PUBLIC_WEB_WHIZ_ENABLED || false, // 是否显示
   WEB_WHIZ_BASE_URL: process.env.NEXT_PUBLIC_WEB_WHIZ_BASE_URL || 'https://api.webwhiz.ai', // 可以自建服务器
   WEB_WHIZ_CHAT_BOT_ID: process.env.NEXT_PUBLIC_WEB_WHIZ_CHAT_BOT_ID || null, // 在后台获取ID
 

components/Comment.js

@@ -54,6 +54,13 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
   ssr: false
 })
 
+/**
+ * 是否有评论
+ */
+export const commentEnable = BLOG.COMMENT_TWIKOO_ENV_ID || BLOG.COMMENT_WALINE_SERVER_URL || BLOG.COMMENT_VALINE_APP_ID ||
+BLOG.COMMENT_GISCUS_REPO || BLOG.COMMENT_CUSDIS_APP_ID || BLOG.COMMENT_UTTERRANCES_REPO ||
+ BLOG.COMMENT_GITALK_CLIENT_ID || BLOG.COMMENT_WEBMENTION.ENABLE
+
 /**
  * 评论组件
  * @param {*} param0

components/CusdisComponent.js

@@ -13,7 +13,7 @@ const CusdisComponent = ({ frontMatter }) => {
   useEffect(() => {
     loadExternalResource(BLOG.COMMENT_CUSDIS_SCRIPT_SRC, 'js').then(url => {
       const CUSDIS = window.CUSDIS
-      CUSDIS.initial()
+      CUSDIS?.initial()
     })
   }, [isDarkMode])
 

components/Twikoo.js

@@ -15,7 +15,7 @@ const Twikoo = ({ isDarkMode }) => {
     try {
       await loadExternalResource(BLOG.COMMENT_TWIKOO_CDN_URL, 'js')
       const twikoo = window.twikoo
-      twikoo.init({
+      twikoo?.init({
         envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
         el: '#twikoo', // 容器元素
         lang: BLOG.LANG // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js

themes/heo/index.js

@@ -15,7 +15,7 @@ import SearchNav from './components/SearchNav'
 import BlogPostArchive from './components/BlogPostArchive'
 import { ArticleLock } from './components/ArticleLock'
 import PostHeader from './components/PostHeader'
-import Comment from '@/components/Comment'
+import Comment, { commentEnable } from '@/components/Comment'
 import NotionPage from '@/components/NotionPage'
 import ArticleAdjacent from './components/ArticleAdjacent'
 import ArticleCopyright from './components/ArticleCopyright'
@@ -44,7 +44,7 @@ const LayoutBase = props => {
   return (
         <div id='theme-heo' className='bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col'>
             {/* SEO信息 */}
-            <CommonHead meta={meta}/>
+            <CommonHead meta={meta} />
             <Style />
 
             {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
@@ -223,7 +223,7 @@ const LayoutSlug = props => {
 
   return (
         <LayoutBase {...props} headerSlot={headerSlot} showCategory={false} showTag={false} slotRight={slotRight}>
-            <div className="w-full max-w-5xl lg:hover:shadow lg:border rounded-t-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article">
+            <div className="w-full max-w-5xl lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article">
                 {lock && <ArticleLock validPassword={validPassword} />}
 
                 {!lock && <div id="article-wrapper" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
@@ -233,7 +233,7 @@ const LayoutSlug = props => {
                         data-aos-duration="300"
                         data-aos-once="false"
                         data-aos-anchor-placement="top-bottom"
-                         itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >
+                        itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >
                         {/* Notion文章主体 */}
                         <section className='px-5 justify-center mx-auto'>
                             {post && <NotionPage post={post} />}
@@ -253,13 +253,17 @@ const LayoutSlug = props => {
 
                     </article>
 
-                    <hr className='my-4 border-dashed' />
+                    <div className={`${commentEnable && post ? '' : 'hidden'}`}>
+                        <hr className='my-4 border-dashed' />
+
+                        {/* 评论互动 */}
+                        <div className="duration-200 overflow-x-auto px-5">
+                            <div className='text-2xl dark:text-white'><i className='fas fa-comment mr-1' />{locale.COMMON.COMMENTS}</div>
+                            <Comment frontMatter={post} className='' />
+                        </div>
 
-                    {/* 评论互动 */}
-                    <div className="duration-200 overflow-x-auto px-5">
-                        <div className='text-2xl dark:text-white'><i className='fas fa-comment mr-1' />{locale.COMMON.COMMENTS}</div>
-                        <Comment frontMatter={post} className='' />
                     </div>
+
                 </div>}
             </div>
             <FloatTocButton {...props} />