分享功能加入所有主题

components/ShareBar.js

@@ -0,0 +1,87 @@
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import React from 'react'
+import { createPopper } from '@popperjs/core'
+import copy from 'copy-to-clipboard'
+import QRCode from 'qrcode.react'
+import { useGlobal } from '@/lib/global'
+
+const ShareBar = ({ post }) => {
+  const router = useRouter()
+  const [qrCodeShow, setQrCodeShow] = React.useState(false)
+  const { locale } = useGlobal()
+
+  if (!JSON.parse(BLOG.POST_SHARE_BAR_ENABLE) || !post || post?.type !== 'Post') {
+    return <></>
+  }
+
+  const shareUrl = BLOG.LINK + router.asPath
+
+  // 二维码悬浮
+  const btnRef = React.createRef()
+  const popoverRef = React.createRef()
+
+  const openPopover = () => {
+    createPopper(btnRef.current, popoverRef.current, {
+      placement: 'top'
+    })
+    setQrCodeShow(true)
+  }
+  const closePopover = () => {
+    setQrCodeShow(false)
+  }
+
+  const copyUrl = () => {
+    copy(shareUrl)
+    alert(locale.COMMON.URL_COPIED)
+  }
+
+  return <div id='share-bar'
+      className='py-2 text-gray-500 text-center space-x-2 flex my-1 dark:text-gray-200 overflow-visible'>
+      <div className='hidden md:block text-gray-800 dark:text-gray-300 mr-2 my-2 whitespace-nowrap'>{locale.COMMON.SHARE}:</div>
+      <div className='text-3xl cursor-pointer w-6'>
+        <a className='text-blue-700' href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} >
+          <i className='fab fa-facebook-square'/>
+        </a>
+      </div>
+      <div className='text-3xl cursor-pointer w-6'>
+        <a className='text-blue-400' target='_blank' rel='noreferrer' href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} >
+          <i className='fab fa-twitter-square'/>
+        </a>
+      </div>
+      <div className='text-3xl cursor-pointer w-6'>
+        <a className='text-blue-500' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} >
+        <i className='fab fa-telegram'/>
+        </a>
+      </div>
+      <div className='cursor-pointer text-2xl w-6'>
+        <a className='text-green-600' ref={btnRef} onMouseEnter={openPopover} onMouseLeave={closePopover}>
+          <i className='fab fa-weixin'/>
+          <div ref={popoverRef} className={(qrCodeShow ? 'opacity-100 ' : 'invisible opacity-0') + ' transition-all duration-200 text-center py-2'}>
+            <div className='p-2 bg-white border-0 duration-200 transform block z-40 font-normal shadow-xl mr-10'>
+              <QRCode value={shareUrl} fgColor='#000000' />
+            </div>
+            <span className='bg-white text-black font-semibold p-1 mb-0 rounded-t-lg text-sm mx-auto mr-10'>
+            {locale.COMMON.SCAN_QR_CODE}
+            </span>
+          </div>
+        </a>
+      </div>
+      <div className='cursor-pointer text-2xl w-6'>
+        <a className='text-red-600' target='_blank' rel='noreferrer' href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} >
+          <i className='fab fa-weibo'/>
+        </a>
+      </div>
+      <div className='cursor-pointer text-2xl w-6'>
+        <a className='text-blue-400' target='_blank' rel='noreferrer' href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} >
+          <i className='fab fa-qq'/>
+        </a>
+      </div>
+      <div className='cursor-pointer text-2xl w-6'>
+        <a className='text-yellow-600' onClick={copyUrl} >
+          <i className='fas fa-link'/>
+        </a>
+      </div>
+    </div>
+}
+export default ShareBar

components/ShareButton.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import ShareBar from './ShareBar'
+
+/**
+ * 悬浮在屏幕右下角,分享按钮
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const ShareButton = ({ post }) => {
+  const [popoverShow, setPopoverShow] = React.useState(false)
+  const btnRef = React.createRef()
+
+  const openPopover = () => {
+    setPopoverShow(true)
+  }
+  const closePopover = () => {
+    setPopoverShow(false)
+  }
+  return (
+    <div className='my-2'
+         onMouseEnter={() => { openPopover() }}
+         onMouseLeave={() => { closePopover() }}>
+        <div className={(popoverShow ? 'opacity-100' : 'opacity-0') + ' duration-200 ease-in-out font-normal'}>
+          <ShareBar post={post}/>
+        </div>
+        <div ref={btnRef}
+          className='z-20 border dark:border-gray-500 dark:bg-gray-600 bg-white cursor-pointer text-md hover:shadow-2xl shadow-lg'>
+          <i className='fas fa-share-alt-square transform duration-200 hover:scale-150 dark:text-gray-200 p-4' title='share' />
+        </div>
+    </div>
+  )
+}
+
+export default ShareButton