Skip to content

Commit

Permalink
gitbook 加入社交按钮
Browse files Browse the repository at this point in the history
  • Loading branch information
@tangly1024
tangly1024 committed Jun 19, 2024
1 parent e502f45 commit 96d5e2e
Show file tree
Hide file tree
Showing 2 changed files with 172 additions and 26 deletions.
5 changes: 4 additions & 1 deletion themes/gitbook/components/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { siteConfig } from '@/lib/config'
import SocialButton from './SocialButton'

const Footer = ({ siteInfo }) => {
const d = new Date()
Expand All @@ -11,7 +12,9 @@ const Footer = ({ siteInfo }) => {
<footer className='z-20 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
<hr className='pb-2' />

<div className='flex justify-center'>
<SocialButton />

<div className='flex justify-center pt-1'>
<div>
<i className='mx-1 animate-pulse fas fa-heart' />{' '}
<a
Expand Down
193 changes: 168 additions & 25 deletions themes/gitbook/components/SocialButton.js
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,179 @@
import QrCode from '@/components/QrCode'
import { siteConfig } from '@/lib/config'
import { useState } from 'react'

/**
* 社交联系方式按钮组
* @returns {JSX.Element}
* @constructor
*/
const SocialButton = () => {
return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
{siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
<i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
</a>}
{siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
<i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
</a>}
{siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
<i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
</a>}
{siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
<i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
<i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
</a>}
{siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
<i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
</a>}
{siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
<i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
</a>}
{JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
<i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
</a>}
const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')

const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
const ENABLE_RSS = siteConfig('ENABLE_RSS')
const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')

const CONTACT_XIAOHONGSHU = siteConfig('CONTACT_XIAOHONGSHU')
const CONTACT_ZHISHIXINGQIU = siteConfig('CONTACT_ZHISHIXINGQIU')
const CONTACT_WEHCHAT_PUBLIC = siteConfig('CONTACT_WEHCHAT_PUBLIC')
const [qrCodeShow, setQrCodeShow] = useState(false)

const openPopover = () => {
setQrCodeShow(true)
}
const closePopover = () => {
setQrCodeShow(false)
}

return (
<div className='w-full justify-center flex-wrap flex'>
<div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
{CONTACT_GITHUB && (
<a
target='_blank'
rel='noreferrer'
title={'github'}
href={CONTACT_GITHUB}>
<i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{CONTACT_TWITTER && (
<a
target='_blank'
rel='noreferrer'
title={'twitter'}
href={CONTACT_TWITTER}>
<i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{CONTACT_TELEGRAM && (
<a
target='_blank'
rel='noreferrer'
href={CONTACT_TELEGRAM}
title={'telegram'}>
<i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{CONTACT_LINKEDIN && (
<a
target='_blank'
rel='noreferrer'
href={CONTACT_LINKEDIN}
title={'linkIn'}>
<i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{CONTACT_WEIBO && (
<a
target='_blank'
rel='noreferrer'
title={'weibo'}
href={CONTACT_WEIBO}>
<i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{CONTACT_INSTAGRAM && (
<a
target='_blank'
rel='noreferrer'
title={'instagram'}
href={CONTACT_INSTAGRAM}>
<i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{CONTACT_EMAIL && (
<a
target='_blank'
rel='noreferrer'
title={'email'}
href={`mailto:${CONTACT_EMAIL}`}>
<i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{ENABLE_RSS && (
<a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'}>
<i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{CONTACT_BILIBILI && (
<a
target='_blank'
rel='noreferrer'
title={'bilibili'}
href={CONTACT_BILIBILI}>
<i className='transform hover:scale-125 duration-150 dark:hover:text-green-400 hover:text-green-600 fab fa-bilibili' />
</a>
)}
{CONTACT_YOUTUBE && (
<a
target='_blank'
rel='noreferrer'
title={'youtube'}
href={CONTACT_YOUTUBE}>
<i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{CONTACT_XIAOHONGSHU && (
<a
target='_blank'
rel='noreferrer'
title={'小红书'}
href={CONTACT_XIAOHONGSHU}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
className='transform hover:scale-125 duration-150 w-6'
src='/svg/xiaohongshu.svg'
alt='小红书'
/>
</a>
)}
{CONTACT_ZHISHIXINGQIU && (
<a
target='_blank'
rel='noreferrer'
title={'知识星球'}
href={CONTACT_ZHISHIXINGQIU}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
className='transform hover:scale-125 duration-150 w-6'
src='/svg/zhishixingqiu.svg'
alt='知识星球'
/>{' '}
</a>
)}
{CONTACT_WEHCHAT_PUBLIC && (
<button
onMouseEnter={openPopover}
onMouseLeave={closePopover}
aria-label={'微信公众号'}>
<div id='wechat-button'>
<i className='transform scale-105 hover:scale-125 duration-150 fab fa-weixin dark:hover:text-green-400 hover:text-green-600' />
</div>
{/* 二维码弹框 */}
<div className='absolute'>
<div
id='pop'
className={
(qrCodeShow ? 'opacity-100 ' : ' invisible opacity-0') +
' z-40 absolute bottom-10 -left-10 bg-white shadow-xl transition-all duration-200 text-center'
}>
<div className='p-2 mt-1 w-28 h-28'>
{qrCodeShow && <QrCode value={CONTACT_WEHCHAT_PUBLIC} />}
</div>
</div>
</div>
</button>
)}
</div>
</div>
)
}
export default SocialButton

0 comments on commit 96d5e2e

Please sign in to comment.