gitbook 加入社交按钮

themes/gitbook/components/Footer.js

@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import SocialButton from './SocialButton'
 
 const Footer = ({ siteInfo }) => {
   const d = new Date()
@@ -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

themes/gitbook/components/SocialButton.js

@@ -1,4 +1,6 @@
+import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
+import { useState } from 'react'
 
 /**
  * 社交联系方式按钮组
@@ -6,31 +8,172 @@ import { siteConfig } from '@/lib/config'
  * @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