Skip to content

Commit b6ec2f8

Browse files
tangly1024tangly1024
committed
hexo主题加入几个新的社交按钮
1 parent 18f81aa commit b6ec2f8

File tree

4 files changed

+173
-33
lines changed

4 files changed

+173
-33
lines changed

‎blog.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ const BLOG = {
3939
CONTACT_INSTAGRAM: process.env.NEXT_PUBLIC_CONTACT_INSTAGRAM || '', // 您的instagram地址
4040
CONTACT_BILIBILI: process.env.NEXT_PUBLIC_CONTACT_BILIBILI || '', // B站主页
4141
CONTACT_YOUTUBE: process.env.NEXT_PUBLIC_CONTACT_YOUTUBE || '', // Youtube主页
42+
CONTACT_XIAOHONGSHU: process.env.NEXT_PUBLIC_CONTACT_XIAOHONGSHU || '', // 小红书主页
43+
CONTACT_ZHISHIXINGQIU: process.env.NEXT_PUBLIC_CONTACT_ZHISHIXINGQIU || '', // 知识星球
44+
CONTACT_WEHCHAT_PUBLIC: process.env.NEXT_PUBLIC_CONTACT_WEHCHAT_PUBLIC || '', // 微信公众号 格式：https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=【xxxxxx】==#wechat_redirect
4245

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

‎public/svg/xiaohongshu.svg

+1
Loading

‎public/svg/zhishixingqiu.svg

+1
Loading

‎themes/hexo/components/SocialButton.js

+168-33
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,179 @@
1+
import QrCode from '@/components/QrCode'
12
import { siteConfig } from '@/lib/config'
3+
import { useState } from 'react'
24

35
/**
46
* 社交联系方式按钮组
57
* @returns {JSX.Element}
68
* @constructor
79
*/
810
const SocialButton = () => {
9-
return <div className='w-full justify-center flex-wrap flex'>
10-
<div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
11-
{siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
12-
<i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
13-
</a>}
14-
{siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
15-
<i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
16-
</a>}
17-
{siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
18-
<i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
19-
</a>}
20-
{siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
21-
<i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
22-
</a>}
23-
{siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
24-
<i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
25-
</a>}
26-
{siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
27-
<i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
28-
</a>}
29-
{siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
30-
<i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
31-
</a>}
32-
{JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
33-
<i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
34-
</a>}
35-
{siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
36-
<i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600'/>
37-
</a>}
38-
{siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
39-
<i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600'/>
40-
</a>}
11+
const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
12+
const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
13+
const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
14+
15+
const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
16+
const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
17+
const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
18+
const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
19+
const ENABLE_RSS = siteConfig('ENABLE_RSS')
20+
const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
21+
const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
22+
23+
const CONTACT_XIAOHONGSHU = siteConfig('CONTACT_XIAOHONGSHU')
24+
const CONTACT_ZHISHIXINGQIU = siteConfig('CONTACT_ZHISHIXINGQIU')
25+
const CONTACT_WEHCHAT_PUBLIC = siteConfig('CONTACT_WEHCHAT_PUBLIC')
26+
27+
const [qrCodeShow, setQrCodeShow] = useState(false)
28+
29+
const openPopover = () => {
30+
setQrCodeShow(true)
31+
}
32+
const closePopover = () => {
33+
setQrCodeShow(false)
34+
}
35+
return (
36+
<div className='w-full justify-center flex-wrap flex'>
37+
<div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
38+
{CONTACT_GITHUB && (
39+
<a
40+
target='_blank'
41+
rel='noreferrer'
42+
title={'github'}
43+
href={CONTACT_GITHUB}>
44+
<i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600' />
45+
</a>
46+
)}
47+
{CONTACT_TWITTER && (
48+
<a
49+
target='_blank'
50+
rel='noreferrer'
51+
title={'twitter'}
52+
href={CONTACT_TWITTER}>
53+
<i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600' />
54+
</a>
55+
)}
56+
{CONTACT_TELEGRAM && (
57+
<a
58+
target='_blank'
59+
rel='noreferrer'
60+
href={CONTACT_TELEGRAM}
61+
title={'telegram'}>
62+
<i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600' />
63+
</a>
64+
)}
65+
{CONTACT_LINKEDIN && (
66+
<a
67+
target='_blank'
68+
rel='noreferrer'
69+
href={CONTACT_LINKEDIN}
70+
title={'linkIn'}>
71+
<i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
72+
</a>
73+
)}
74+
{CONTACT_WEIBO && (
75+
<a
76+
target='_blank'
77+
rel='noreferrer'
78+
title={'weibo'}
79+
href={CONTACT_WEIBO}>
80+
<i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600' />
81+
</a>
82+
)}
83+
{CONTACT_INSTAGRAM && (
84+
<a
85+
target='_blank'
86+
rel='noreferrer'
87+
title={'instagram'}
88+
href={CONTACT_INSTAGRAM}>
89+
<i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600' />
90+
</a>
91+
)}
92+
{CONTACT_EMAIL && (
93+
<a
94+
target='_blank'
95+
rel='noreferrer'
96+
title={'email'}
97+
href={`mailto:${CONTACT_EMAIL}`}>
98+
<i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600' />
99+
</a>
100+
)}
101+
{ENABLE_RSS && (
102+
<a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'}>
103+
<i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600' />
104+
</a>
105+
)}
106+
{CONTACT_BILIBILI && (
107+
<a
108+
target='_blank'
109+
rel='noreferrer'
110+
title={'bilibili'}
111+
href={CONTACT_BILIBILI}>
112+
<i className='transform hover:scale-125 duration-150 dark:hover:text-indigo-400 hover:text-indigo-600 fab fa-bilibili' />
113+
</a>
114+
)}
115+
{CONTACT_YOUTUBE && (
116+
<a
117+
target='_blank'
118+
rel='noreferrer'
119+
title={'youtube'}
120+
href={CONTACT_YOUTUBE}>
121+
<i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600' />
122+
</a>
123+
)}
124+
{CONTACT_XIAOHONGSHU && (
125+
<a
126+
target='_blank'
127+
rel='noreferrer'
128+
title={'小红书'}
129+
href={CONTACT_XIAOHONGSHU}>
130+
{/* eslint-disable-next-line @next/next/no-img-element */}
131+
<img
132+
className='transform hover:scale-125 duration-150 w-6'
133+
src='/svg/xiaohongshu.svg'
134+
alt='小红书'
135+
/>
136+
</a>
137+
)}
138+
{CONTACT_ZHISHIXINGQIU && (
139+
<a
140+
target='_blank'
141+
rel='noreferrer'
142+
title={'知识星球'}
143+
href={CONTACT_ZHISHIXINGQIU}>
144+
{/* eslint-disable-next-line @next/next/no-img-element */}
145+
<img
146+
className='transform hover:scale-125 duration-150 w-6'
147+
src='/svg/zhishixingqiu.svg'
148+
alt='知识星球'
149+
/>{' '}
150+
</a>
151+
)}
152+
{CONTACT_WEHCHAT_PUBLIC && (
153+
<button
154+
onMouseEnter={openPopover}
155+
onMouseLeave={closePopover}
156+
aria-label={'微信公众号'}>
157+
<div id='wechat-button'>
158+
<i className='transform scale-105 hover:scale-125 duration-150 fab fa-weixin dark:hover:text-indigo-400 hover:text-indigo-600' />
159+
</div>
160+
{/* 二维码弹框 */}
161+
<div className='absolute'>
162+
<div
163+
id='pop'
164+
className={
165+
(qrCodeShow ? 'opacity-100 ' : ' invisible opacity-0') +
166+
' z-40 absolute bottom-10 -left-10 bg-white shadow-xl transition-all duration-200 text-center'
167+
}>
168+
<div className='p-2 mt-1 w-28 h-28'>
169+
{qrCodeShow && <QrCode value={CONTACT_WEHCHAT_PUBLIC} />}
170+
</div>
171+
</div>
172+
</div>
173+
</button>
174+
)}
175+
</div>
41176
</div>
42-
</div>
177+
)
43178
}
44179
export default SocialButton

0 commit comments

Comments
 (0)