d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Heo主题资料卡牌按钮支持配置
This commit is contained in:
tangly1024
2024-06-27 10:20:52 +08:00
committed by GitHub
parent 951440b904 5dbe4ea190
commit 3c258a302e
2 changed files with 54 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
themes/heo/components/InfoCard.js
View File

@@ -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>
)
}

9
themes/heo/config.js
View File

@@ -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: [