From ccf861bb67800e3105e2f0f39bda3af537a5bb1c Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Mon, 22 Jan 2024 21:00:12 +0800
Subject: [PATCH] =?UTF-8?q?next=E4=B8=BB=E9=A2=98=EF=BC=8C=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E6=A0=87=E7=AD=BE=E6=95=B0=E9=87=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/next/components/CategoryGroup.js | 7 +++++--
 themes/next/components/TagGroups.js     | 8 ++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/themes/next/components/CategoryGroup.js b/themes/next/components/CategoryGroup.js
index 872c4a28d99..c00b5d1c9ae 100644
--- a/themes/next/components/CategoryGroup.js
+++ b/themes/next/components/CategoryGroup.js
@@ -1,10 +1,13 @@
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
-  if (!categories) return <></>
+  if (!categories || categories.length === 0) return <></>
+  const categoryCount = siteConfig('PREVIEW_CATEGORY_COUNT')
+  const categoryOptions = categories.slice(0, categoryCount)
   return <>
     <div id='category-list' className='dark:border-gray-600 flex flex-wrap'>
-      {categories.map(category => {
+      {categoryOptions.map(category => {
         const selected = currentCategory === category.name
         return (
           <Link
diff --git a/themes/next/components/TagGroups.js b/themes/next/components/TagGroups.js
index 1a406ed336c..42efafab89a 100644
--- a/themes/next/components/TagGroups.js
+++ b/themes/next/components/TagGroups.js
@@ -1,3 +1,4 @@
+import { siteConfig } from '@/lib/config'
 import TagItemMini from './TagItemMini'
 
 /**
@@ -8,11 +9,14 @@ import TagItemMini from './TagItemMini'
  * @constructor
  */
 const TagGroups = ({ tags, currentTag }) => {
-  if (!tags) return <></>
+  if (!tags || tags.length === 0) return <></>
+
+  const tagsCount = siteConfig('PREVIEW_TAG_COUNT')
+  const tagOptions = tags.slice(0, tagsCount)
   return (
     <div id='tags-group' className='dark:border-gray-600 w-66 space-y-2'>
       {
-        tags.map(tag => {
+        tagOptions.map(tag => {
           const selected = tag.name === currentTag
           return <TagItemMini key={tag.name} tag={tag} selected={selected} />
         })