Merge pull request tangly1024#1787 from 1208nn/dev

支持隐藏单独的评论标签页

blog.config.js

@@ -244,6 +244,8 @@ const BLOG = {
   //   ********挂件组件相关********
   // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
 
+  COMMENT_HIDE_SINGLE_TAB: process.env.NEXT_PUBLIC_COMMENT_HIDE_SINGLE_TAB || false, //Whether hide the tab when there's no tabs. 只有一个评论组件时是否隐藏切换组件的标签页
+
   // 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

components/Tabs.js

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { siteConfig } from '@/lib/config'
 
 /**
  * Tabs切换标签
@@ -16,15 +17,17 @@ const Tabs = ({ className, children }) => {
 
   return (
     <div className={`mb-5 duration-200 ${className}`}>
-      <ul className="flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto">
-        {validChildren.map((item, index) => (
-          <li key={index}
-            className={`${currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello' : 'font-extralight cursor-pointer'} text-sm font-sans`}
-            onClick={() => setCurrentTab(index)}>
-            {item.key}
-          </li>
-        ))}
-      </ul>
+      {!(validChildren.length === 1 && siteConfig('COMMENT_HIDE_SINGLE_TAB')) && (
+        <ul className="flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto">
+          {validChildren.map((item, index) => (
+            <li key={index}
+              className={`${currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello' : 'font-extralight cursor-pointer'} text-sm font-sans`}
+              onClick={() => setCurrentTab(index)}>
+              {item.key}
+            </li>
+          ))}
+        </ul>
+      )}
       {/* 标签切换的时候不销毁 DOM 元素，使用 CSS 样式进行隐藏 */}
       <div>
         {validChildren.map((item, index) => (