Skip to content

Commit

Permalink
hexo主题加入几个新的社交按钮
Browse files Browse the repository at this point in the history
  • Loading branch information
@tangly1024
tangly1024 committed Jun 5, 2024
1 parent 18f81aa commit b6ec2f8
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 33 deletions.
3 changes: 3 additions & 0 deletions blog.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ const BLOG = {
CONTACT_INSTAGRAM: process.env.NEXT_PUBLIC_CONTACT_INSTAGRAM || '', // 您的instagram地址
CONTACT_BILIBILI: process.env.NEXT_PUBLIC_CONTACT_BILIBILI || '', // B站主页
CONTACT_YOUTUBE: process.env.NEXT_PUBLIC_CONTACT_YOUTUBE || '', // Youtube主页
CONTACT_XIAOHONGSHU: process.env.NEXT_PUBLIC_CONTACT_XIAOHONGSHU || '', // 小红书主页
CONTACT_ZHISHIXINGQIU: process.env.NEXT_PUBLIC_CONTACT_ZHISHIXINGQIU || '', // 知识星球
CONTACT_WEHCHAT_PUBLIC: process.env.NEXT_PUBLIC_CONTACT_WEHCHAT_PUBLIC || '', // 微信公众号 格式：https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=【xxxxxx】==#wechat_redirect

NOTION_HOST: process.env.NEXT_PUBLIC_NOTION_HOST || 'https://www.notion.so', // Notion域名，您可以选择用自己的域名进行反向代理，如果不懂得什么是反向代理，请勿修改此项

Expand Down
1 change: 1 addition & 0 deletions public/svg/xiaohongshu.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/svg/zhishixingqiu.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
201 changes: 168 additions & 33 deletions themes/hexo/components/SocialButton.js
View file
Original file line number Diff line number Diff line change
@@ -1,44 +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='w-full justify-center flex-wrap flex'>
<div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
{siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
<i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
<i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
<i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
<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='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
<i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
<i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{JSON.parse(siteConfig('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-indigo-400 hover:text-indigo-600'/>
</a>}
{siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
<i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
<i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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-indigo-400 hover:text-indigo-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>
</div>
)
}
export default SocialButton

0 comments on commit b6ec2f8

Please sign in to comment.