Merge pull request #2540 from tangly1024/feat/heo-info-card-config

Heo主题资料卡牌按钮支持配置
tangly1024 · Jun 27, 2024 · 3c258a3 · 3c258a3
2 parents 951440b + 5dbe4ea
commit 3c258a3
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 35 deletions.
diff --git a/themes/heo/components/InfoCard.js b/themes/heo/components/InfoCard.js
@@ -1,4 +1,4 @@
-import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
+import { ArrowRightCircle } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
@@ -18,6 +18,10 @@ export function InfoCard(props) {
   const router = useRouter()
   // 在文章详情页特殊处理
   const isSlugPage = router.pathname.indexOf('/[prefix]') === 0
+  const url1 = siteConfig('HEO_INFO_CARD_URL1', null, CONFIG)
+  const icon1 = siteConfig('HEO_INFO_CARD_ICON1', null, CONFIG)
+  const url2 = siteConfig('HEO_INFO_CARD_URL2', null, CONFIG)
+  const icon2 = siteConfig('HEO_INFO_CARD_ICON2', null, CONFIG)
   return (
     <Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
       {/* 信息卡牌第一行 */}
@@ -45,25 +49,55 @@ export function InfoCard(props) {
       <div className='flex justify-between'>
         <div className='flex space-x-3  hover:text-black dark:hover:text-white'>
           {/* 两个社交按钮 */}
-          <div className='bg-indigo-400 p-2 rounded-full  transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
-            <Link href='/about'>
-              <GlobeAlt className={'w-6 h-6'} />
-            </Link>
-          </div>
-          <div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
-            {siteConfig('HEO_INFO_CARD_URL', null, CONFIG) && (
-              <Link href={siteConfig('HEO_INFO_CARD_URL', null, CONFIG)}>
-                <i className='fab fa-github text-xl' />
+          {url1 && (
+            <div className='w-10 text-center bg-indigo-400 p-2 rounded-full  transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
+              <Link href={url1}>
+                <i className={icon1} />
               </Link>
-            )}
-          </div>
+            </div>
+          )}
+          {url2 && (
+            <div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
+              <Link href={url2}>
+                <i className={icon2} />
+              </Link>
+            </div>
+          )}
         </div>
+        {/* 第三个按钮 */}
         <MoreButton />
       </div>
     </Card>
   )
 }
 
+/**
+ * 了解更多按鈕
+ * @returns
+ */
+function MoreButton() {
+  const url3 = siteConfig('HEO_INFO_CARD_URL3', null, CONFIG)
+  const text3 = siteConfig('HEO_INFO_CARD_TEXT3', null, CONFIG)
+  if (!url3) {
+    return <></>
+  }
+  return (
+    <Link href={url3}>
+      <div
+        className={
+          'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'
+        }>
+        <ArrowRightCircle
+          className={
+            'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'
+          }
+        />
+        <div className='font-bold'>{text3}</div>
+      </div>
+    </Link>
+  )
+}
+
 /**
  * 欢迎语
  */
@@ -84,25 +118,3 @@ function GreetingsWords() {
     </div>
   )
 }
-
-/**
- * 了解更多按鈕
- * @returns
- */
-function MoreButton() {
-  return (
-    <Link href='/about'>
-      <div
-        className={
-          'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'
-        }>
-        <ArrowRightCircle
-          className={
-            'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'
-          }
-        />
-        <div className='font-bold'>了解更多</div>
-      </div>
-    </Link>
-  )
-}
diff --git a/themes/heo/config.js b/themes/heo/config.js
@@ -42,7 +42,14 @@ const CONFIG = {
     '🤖️ 数码科技爱好者',
     '🧱 团队小组发动机'
   ],
-  HEO_INFO_CARD_URL: 'https://github.com/tangly1024/NotionNext', // 个人资料底部按钮链接
+
+  // 个人资料底部按钮
+  HEO_INFO_CARD_URL1: '/about',
+  HEO_INFO_CARD_ICON1: 'fas fa-user',
+  HEO_INFO_CARD_URL2: 'https://github.com/tangly1024',
+  HEO_INFO_CARD_ICON2: 'fab fa-github',
+  HEO_INFO_CARD_URL3: 'https://www.tangly1024.com',
+  HEO_INFO_CARD_TEXT3: '了解更多',
 
   // 用户技能图标
   HEO_GROUP_ICONS: [