Merge pull request #1011 from tangly1024/feat/share-button

Feat/share button
2026-05-14 07:26:52 +00:00 · 2023-04-26 16:41:40 +08:00
parent 27f45c9066 abd80f4c8d
commit 182834d384
21 changed files with 449 additions and 138 deletions
--- a/.env.local
+++ b/.env.local
@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.13.4
+NEXT_PUBLIC_VERSION=3.13.5
--- a/README.md
+++ b/README.md
@@ -40,7 +40,10 @@
 - [个性配置手册 - 如何配置功能插件](https://tangly1024.com/article/notion-next-guide) 

 - [二次开发指引 - 如何进行本地开发](https://tangly1024.com/article/how-to-develop-with-notion-next)
- 
+
+- [更新操作指南 - 获取最新升级补丁](https://tangly1024.com/article/how-to-update-notionnext)
+
+- [历史版本汇总 - 查询版本功能特性](https://tangly1024.com/article/notion-next-changelogs)

 ## 致谢
 感谢Craig Hart发起的Nobelium项目
--- a/README_EN.md
+++ b/README_EN.md
@@ -35,12 +35,15 @@ Live Demo：[https://preview.tangly1024.com/](https://preview.tangly1024.com/)

 It only takes a few minutes to set up your personal site:

- [快速部署教程 - 多种方案可供选择](https://tangly1024.com/article/notion-next) 
+- [Quick Deployment Tutorial - Multiple Options Available](https://tangly1024.com/article/notion-next) 

- [个性配置手册 - 如何配置功能插件](https://tangly1024.com/article/notion-next-guide) 
+- [Customization Guide - How to Configure Feature Plugins](https://tangly1024.com/article/notion-next-guide) 

- [二次开发指引 - 如何进行本地开发](https://tangly1024.com/article/how-to-develop-with-notion-next)
+- [Development Guide - How to Conduct Local Development](https://tangly1024.com/article/how-to-develop-with-notion-next)
 
+- [Update Guide - How to Get the Latest Upgrade Patch](https://tangly1024.com/article/how-to-update-notionnext)
+
+- [Version History - Check Feature Highlights for Each Version](https://tangly1024.com/article/notion-next-changelogs)

 ## Acknowledgements

--- a/blog.config.js
+++ b/blog.config.js
@@ -96,6 +96,10 @@ const BLOG = {
  BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
  SUB_PATH: '', // leave this empty unless you want to deploy in a folder

+  POST_SHARE_BAR_ENABLE: process.env.NEXT_PUBLIC_POST_SHARE_BAR || 'true', // 文章分享功能 ，将在底部显示一个分享条
+  POSTS_SHARE_SERVICES: process.env.NEXT_PUBLIC_POST_SHARE_SERVICES || 'link,wechat,qq,weibo,email,facebook,twitter,telegram,messenger,line,reddit,whatsapp,linkedin', // 分享的服務，按顺序显示,逗号隔开
+  // 所有支持的分享服务：link(复制链接),wechat(微信),qq,weibo(微博),email(邮件),facebook,twitter,telegram,messenger,line,reddit,whatsapp,linkedin,vkshare,okshare,tumblr,livejournal,mailru,viber,workplace,pocket,instapaper,hatena
+
  POST_URL_PREFIX: process.env.NEXT_PUBLIC_POST_URL_PREFIX || 'article',
  // POST类型文章的默认路径前缀，例如默认POST类型的路径是  /article/[slug]
  // 如果此项配置为 '' 空， 则文章将没有前缀路径，使用场景： 希望文章前缀路径为 /post 的情况 支持多级
--- a/components/ShareBar.js
+++ b/components/ShareBar.js
@@ -0,0 +1,27 @@
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import React from 'react'
+import ShareButtons from './ShareButtons'
+
+const ShareBar = ({ post }) => {
+  const router = useRouter()
+
+  if (!JSON.parse(BLOG.POST_SHARE_BAR_ENABLE) || !post || post?.type !== 'Post') {
+    return <></>
+  }
+
+  const shareUrl = BLOG.LINK + router.asPath
+
+  return <div className='py-1 flex overflow-x-auto justify-end'>
+        <ShareButtons shareUrl={shareUrl} title={post.title} image={post.pageCover} body={
+            post.title +
+            ' | ' +
+            BLOG.TITLE +
+            ' ' +
+            shareUrl +
+            ' ' +
+            post.summary
+        } />
+    </div>
+}
+export default ShareBar
--- a/components/ShareButtons.js
+++ b/components/ShareButtons.js
@@ -0,0 +1,372 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import copy from 'copy-to-clipboard'
+import QRCode from 'qrcode.react'
+import { useState } from 'react'
+
+import {
+  FacebookShareButton,
+  FacebookIcon,
+  FacebookMessengerShareButton,
+  FacebookMessengerIcon,
+  RedditShareButton,
+  RedditIcon,
+  LineShareButton,
+  LineIcon,
+  EmailShareButton,
+  EmailIcon,
+  TwitterShareButton,
+  TwitterIcon,
+  TelegramShareButton,
+  TelegramIcon,
+  WhatsappShareButton,
+  WhatsappIcon,
+  LinkedinShareButton,
+  LinkedinIcon,
+  PinterestShareButton,
+  PinterestIcon,
+  VKIcon,
+  VKShareButton,
+  OKShareButton,
+  OKIcon,
+  TumblrShareButton,
+  TumblrIcon,
+  LivejournalIcon,
+  LivejournalShareButton,
+  MailruShareButton,
+  MailruIcon,
+  ViberIcon,
+  ViberShareButton,
+  WorkplaceShareButton,
+  WorkplaceIcon,
+  WeiboShareButton,
+  WeiboIcon,
+  PocketShareButton,
+  PocketIcon,
+  InstapaperShareButton,
+  InstapaperIcon,
+  HatenaShareButton,
+  HatenaIcon
+} from 'react-share'
+
+/**
+ * @author https://github.com/txs
+ * @param {*} param0
+ * @returns
+ */
+const ShareButtons = ({ shareUrl, title, body, image }) => {
+  const services = BLOG.POSTS_SHARE_SERVICES.split(',')
+  const titleWithSiteInfo = title + ' | ' + BLOG.TITLE
+  const { locale } = useGlobal()
+  const [qrCodeShow, setQrCodeShow] = useState(false)
+
+  const copyUrl = () => {
+    copy(shareUrl)
+    alert(locale.COMMON.URL_COPIED)
+  }
+
+  const openPopover = () => {
+    setQrCodeShow(true)
+  }
+  const closePopover = () => {
+    setQrCodeShow(false)
+  }
+
+  return (
+        <>
+            {services.map(singleService => {
+              if (singleService === 'facebook') {
+                return (
+                        <FacebookShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            className="mx-1"
+                        >
+                            <FacebookIcon size={32} round />
+                        </FacebookShareButton>
+                )
+              }
+              if (singleService === 'messenger') {
+                return (
+                        <FacebookMessengerShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            appId={BLOG.FACEBOOK_APP_ID}
+                            className="mx-1"
+                        >
+                            <FacebookMessengerIcon size={32} round />
+                        </FacebookMessengerShareButton>
+                )
+              }
+              if (singleService === 'line') {
+                return (
+                        <LineShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            className="mx-1"
+                        >
+                            <LineIcon size={32} round />
+                        </LineShareButton>
+                )
+              }
+              if (singleService === 'reddit') {
+                return (
+                        <RedditShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            windowWidth={660}
+                            windowHeight={460}
+                            className="mx-1"
+                        >
+                            <RedditIcon size={32} round />
+                        </RedditShareButton>
+                )
+              }
+              if (singleService === 'email') {
+                return (
+                        <EmailShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            subject={titleWithSiteInfo}
+                            body={body}
+                            className="mx-1"
+                        >
+                            <EmailIcon size={32} round />
+                        </EmailShareButton>
+                )
+              }
+              if (singleService === 'twitter') {
+                return (
+                        <TwitterShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            className="mx-1"
+                        >
+                            <TwitterIcon size={32} round />
+                        </TwitterShareButton>
+                )
+              }
+              if (singleService === 'telegram') {
+                return (
+                        <TelegramShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            className="mx-1"
+                        >
+                            <TelegramIcon size={32} round />
+                        </TelegramShareButton>
+                )
+              }
+              if (singleService === 'whatsapp') {
+                return (
+                        <WhatsappShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            separator=":: "
+                            className="mx-1"
+                        >
+                            <WhatsappIcon size={32} round />
+                        </WhatsappShareButton>
+                )
+              }
+              if (singleService === 'linkedin') {
+                return (
+                        <LinkedinShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            className="mx-1"
+                        >
+                            <LinkedinIcon size={32} round />
+                        </LinkedinShareButton>
+                )
+              }
+              if (singleService === 'pinterest') {
+                return (
+                        <PinterestShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            media={image}
+                            className="mx-1"
+                        >
+                            <PinterestIcon size={32} round />
+                        </PinterestShareButton>
+                )
+              }
+              if (singleService === 'vkshare') {
+                return (
+                        <VKShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            image={image}
+                            className="mx-1"
+                        >
+                            <VKIcon size={32} round />
+                        </VKShareButton>
+                )
+              }
+              if (singleService === 'okshare') {
+                return (
+                        <OKShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            image={image}
+                            className="mx-1"
+                        >
+                            <OKIcon size={32} round />
+                        </OKShareButton>
+                )
+              }
+              if (singleService === 'tumblr') {
+                return (
+                        <TumblrShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            className="mx-1"
+                        >
+                            <TumblrIcon size={32} round />
+                        </TumblrShareButton>
+                )
+              }
+              if (singleService === 'livejournal') {
+                return (
+                        <LivejournalShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            description={shareUrl}
+                            className="mx-1"
+                        >
+                            <LivejournalIcon size={32} round />
+                        </LivejournalShareButton>
+                )
+              }
+              if (singleService === 'mailru') {
+                return (
+                        <MailruShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            className="mx-1"
+                        >
+                            <MailruIcon size={32} round />
+                        </MailruShareButton>
+                )
+              }
+              if (singleService === 'viber') {
+                return (
+                        <ViberShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            className="mx-1"
+                        >
+                            <ViberIcon size={32} round />
+                        </ViberShareButton>
+                )
+              }
+              if (singleService === 'workplace') {
+                return (
+                        <WorkplaceShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            quote={titleWithSiteInfo}
+                            className="mx-1"
+                        >
+                            <WorkplaceIcon size={32} round />
+                        </WorkplaceShareButton>
+                )
+              }
+              if (singleService === 'weibo') {
+                return (
+                        <WeiboShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            image={image}
+                            className="mx-1"
+                        >
+                            <WeiboIcon size={32} round />
+                        </WeiboShareButton>
+                )
+              }
+              if (singleService === 'pocket') {
+                return (
+                        <PocketShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            className="mx-1"
+                        >
+                            <PocketIcon size={32} round />
+                        </PocketShareButton>
+                )
+              }
+              if (singleService === 'instapaper') {
+                return (
+                        <InstapaperShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            className="mx-1"
+                        >
+                            <InstapaperIcon size={32} round />
+                        </InstapaperShareButton>
+                )
+              }
+              if (singleService === 'hatena') {
+                return (
+                        <HatenaShareButton
+                            key={singleService}
+                            url={shareUrl}
+                            title={titleWithSiteInfo}
+                            windowWidth={660}
+                            windowHeight={460}
+                            className="mx-1"
+                        >
+                            <HatenaIcon size={32} round />
+                        </HatenaShareButton>
+                )
+              }
+              if (singleService === 'qq') {
+                return <button key={singleService} className='cursor-pointer bg-blue-600 text-white rounded-full mx-1'>
+                        <div target='_blank' rel='noreferrer' href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${title}&desc=${body}`} >
+                            <i className='fab fa-qq w-8' />
+                        </div>
+                    </button>
+              }
+              if (singleService === 'wechat') {
+                return <button onMouseEnter={openPopover} onMouseLeave={closePopover} aria-label={singleService} key={singleService} className='cursor-pointer bg-green-600 text-white rounded-full mx-1'>
+                        <div id='wechat-button'>
+                            <i className='fab fa-weixin w-8' />
+                        </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'>
+                                    <QRCode value={shareUrl} fgColor='#000000' />
+                                </div>
+                                <span className='text-black font-semibold p-1 rounded-t-lg text-sm mx-auto mb-1'>
+                                    {locale.COMMON.SCAN_QR_CODE}
+                                </span>
+                        </div>
+                        </div>
+                    </button>
+              }
+              if (singleService === 'link') {
+                return <button aria-label={singleService} key={singleService} className='cursor-pointer bg-yellow-500 text-white rounded-full mx-1'>
+                        <div alt={locale.COMMON.URL_COPIED} onClick={copyUrl} >
+                            <i className='fas fa-link w-8' />
+                        </div>
+                    </button>
+              }
+              return <></>
+            })}
+        </>
+  )
+}
+
+export default ShareButtons
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -17,7 +17,7 @@ export default {
    NO_TAG: 'NoTag',
    CATEGORY: '分类',
    SHARE: '分享',
-    SCAN_QR_CODE: '扫一扫二维码',
+    SCAN_QR_CODE: '微信扫码分享',
    URL_COPIED: '链接已复制！',
    TABLE_OF_CONTENTS: '目录',
    RELATE_POSTS: '相关文章',
--- a/lib/notion/getNotionData.js
+++ b/lib/notion/getNotionData.js
@@ -65,7 +65,7 @@ export async function getNotionPageData({ pageId, from }) {
  const cacheKey = 'page_block_' + pageId
  const data = await getDataFromCache(cacheKey)
  if (data && data.pageIds?.length > 0) {
-    console.log('[命中缓存]:', `from:${from}`, `root-page-id:${pageId}`)
+    console.log('[缓存]:', `from:${from}`, `root-page-id:${pageId}`)
    return data
  }
  const pageRecordMap = await getDataBaseInfoByNotionAPI({ pageId, from })
--- a/lib/notion/getPostBlocks.js
+++ b/lib/notion/getPostBlocks.js
@@ -14,7 +14,7 @@ export async function getPostBlocks(id, from, slice) {
  const cacheKey = 'page_block_' + id
  let pageBlock = await getDataFromCache(cacheKey)
  if (pageBlock) {
-    console.log('[命中缓存]:', `from:${from}`, cacheKey)
+    console.log('[缓存]:', `from:${from}`, cacheKey)
    return filterPostBlocks(id, pageBlock, slice)
  }

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "notion-next",
-  "version": "3.13.4",
+  "version": "3.13.5",
  "homepage": "https://github.com/tangly1024/NotionNext.git",
  "license": "MIT",
  "repository": {
@@ -22,7 +22,6 @@
  "dependencies": {
    "@giscus/react": "^2.2.6",
    "@next/bundle-analyzer": "^12.1.1",
-    "@popperjs/core": "^2.9.3",
    "@vercel/analytics": "^1.0.0",
    "animate.css": "^4.1.1",
    "animejs": "^3.2.1",
@@ -53,7 +52,7 @@
    "react-facebook": "^8.1.4",
    "react-messenger-customer-chat": "^0.8.0",
    "react-notion-x": "6.16.0",
-    "react-share": "^4.4.0",
+    "react-share": "^4.4.1",
    "react-tweet-embed": "~2.0.0",
    "smoothscroll-polyfill": "^0.4.4",
    "twikoo": "^1.6.16",
--- a/themes/example/LayoutSlug.js
+++ b/themes/example/LayoutSlug.js
@@ -3,6 +3,7 @@ import { ArticleLock } from './components/ArticleLock'
 import NotionPage from '@/components/NotionPage'
 import { ArticleInfo } from './components/ArticleInfo'
 import Comment from '@/components/Comment'
+import ShareBar from '@/components/ShareBar'

 export const LayoutSlug = props => {
  const { post, lock, validPassword } = props
@@ -17,10 +18,10 @@ export const LayoutSlug = props => {
                {lock && <ArticleLock validPassword={validPassword} />}

                {!lock && <div id="notion-article" className="px-2">
-
                    {post && <>
                        <ArticleInfo post={post} />
                        <NotionPage post={post} />
+                        <ShareBar post={post} />
                        <Comment frontMatter={post}/>
                    </>}
                </div>}
--- a/themes/fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -1,5 +1,6 @@
 import Comment from '@/components/Comment'
 import NotionPage from '@/components/NotionPage'
+import ShareBar from '@/components/ShareBar'
 import formatDate from '@/lib/formatDate'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
@@ -84,6 +85,11 @@ export default function ArticleDetail(props) {
          {post && <NotionPage post={post} />}
        </section>

+        <section>
+           {/* 分享 */}
+           <ShareBar post={post} />
+        </section>
+
        <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
          {/* 文章内嵌广告 */}
          <ins className="adsbygoogle"
--- a/themes/hexo/LayoutSlug.js
+++ b/themes/hexo/LayoutSlug.js
@@ -11,6 +11,7 @@ import ArticleAdjacent from './components/ArticleAdjacent'
 import ArticleCopyright from './components/ArticleCopyright'
 import ArticleRecommend from './components/ArticleRecommend'
 import { isBrowser } from '@/lib/utils'
+import ShareBar from '@/components/ShareBar'

 export const LayoutSlug = props => {
  const { post, lock, validPassword } = props
@@ -68,6 +69,8 @@ export const LayoutSlug = props => {
                data-ad-slot="3806269138" />
            </section>

+            {/* 分享 */}
+            <ShareBar post={post} />
            {post.type === 'Post' && <ArticleCopyright {...props} /> }
            {post.type === 'Post' && <ArticleRecommend {...props} /> }
            {post.type === 'Post' && <ArticleAdjacent {...props} /> }
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -10,6 +10,7 @@ import { ArticleInfo } from './components/ArticleInfo'
 import Catalog from './components/Catalog'
 import JumpToCommentButton from './components/JumpToCommentButton'
 import throttle from 'lodash.throttle'
+import ShareBar from '@/components/ShareBar'

 export const LayoutSlug = props => {
  const { post, lock, validPassword } = props
@@ -80,7 +81,8 @@ export const LayoutSlug = props => {
                                        data-ad-client="ca-pub-2708419466378217"
                                        data-ad-slot="3806269138" />
                                </section>
-
+                                {/* 分享 */}
+                                <ShareBar post={post} />
                                {/* 文章版权说明 */}
                                {post.type === 'Post' && <ArticleCopyright {...props} />}

--- a/themes/medium/LayoutSlug.js
+++ b/themes/medium/LayoutSlug.js
@@ -13,6 +13,7 @@ import ArticleAround from './components/ArticleAround'
 import TocDrawer from './components/TocDrawer'
 import CategoryItem from './components/CategoryItem'
 import TagItemMini from './components/TagItemMini'
+import ShareBar from '@/components/ShareBar'

 export const LayoutSlug = props => {
  const { post, prev, next, siteInfo, lock, validPassword } = props
@@ -85,12 +86,17 @@ export const LayoutSlug = props => {
                </section>

                <section>
+
+                    {/* 分享 */}
+                    <ShareBar post={post} />
+                    {/* 文章分类和标签信息 */}
                    <div className='flex justify-between'>
                        {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
                        <div>
                            {CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
                        </div>
                    </div>
+
                    {post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
                    <Comment frontMatter={post} />
                </section>
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
 import BlogAround from './BlogAround'
 import Comment from '@/components/Comment'
 import RecommendPosts from './RecommendPosts'
-import ShareBar from './ShareBar'
+import ShareBar from '@/components/ShareBar'
 import TagItem from './TagItem'
 import formatDate from '@/lib/formatDate'
 import { useGlobal } from '@/lib/global'
@@ -94,6 +94,10 @@ export default function ArticleDetail(props) {
                </section>

                {showArticleInfo && <>
+
+                    {/* 分享 */}
+                    <ShareBar post={post} />
+
                    {/* 版权声明 */}
                    {post.type === 'Post' && <ArticleCopyright author={BLOG.AUTHOR} url={url} />}

@@ -124,7 +128,6 @@ export default function ArticleDetail(props) {
                                        ))}
                                    </div>
                                )}
-                                <ShareBar post={post} />
                            </>
                        )}
                    </section>
--- a/themes/next/components/ShareBar.js
+++ b/themes/next/components/ShareBar.js
@@ -1,88 +0,0 @@
-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'
-import CONFIG_NEXT from '../config_next'
-
-const ShareBar = ({ post }) => {
-  const router = useRouter()
-  const [qrCodeShow, setQrCodeShow] = React.useState(false)
-  const { locale } = useGlobal()
-  if (!CONFIG_NEXT.ARTICLE_SHARE) {
-    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
-      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'>
-        <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'>
-        <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'>
-        <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'>
-        <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'>
-        <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'>
-        <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'>
-        <a className='text-yellow-600' onClick={copyUrl} >
-          <i className='fas fa-link'/>
-        </a>
-      </div>
-    </div>
-  </>
-}
-export default ShareBar
--- a/themes/next/components/ShareButton.js
+++ b/themes/next/components/ShareButton.js
@@ -1,34 +0,0 @@
-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
--- a/themes/next/config_next.js
+++ b/themes/next/config_next.js
@@ -30,7 +30,6 @@ const CONFIG_NEXT = {
  WIDGET_DARK_MODE: false, // 显示日间/夜间模式切换
  WIDGET_TOC: true, // 移动端显示悬浮目录

-  ARTICLE_SHARE: process.env.NEXT_PUBLIC_ARTICLE_SHARE || false, // 文章分享功能
  ARTICLE_RELATE_POSTS: true, // 相关文章推荐
  ARTICLE_COPYRIGHT: true // 文章版权声明

--- a/themes/nobelium/LayoutSlug.js
+++ b/themes/nobelium/LayoutSlug.js
@@ -4,6 +4,7 @@ import NotionPage from '@/components/NotionPage'
 import { ArticleInfo } from './components/ArticleInfo'
 import Comment from '@/components/Comment'
 import { ArticleFooter } from './components/ArticleFooter'
+import ShareBar from '@/components/ShareBar'

 export const LayoutSlug = props => {
  const { post, lock, validPassword } = props
@@ -21,6 +22,7 @@ export const LayoutSlug = props => {
                    {post && <>
                        <ArticleInfo post={post} />
                        <NotionPage post={post} />
+                        <ShareBar post={post} />
                        <Comment frontMatter={post}/>
                        <ArticleFooter />
                    </>}
--- a/themes/simple/LayoutSlug.js
+++ b/themes/simple/LayoutSlug.js
@@ -4,6 +4,7 @@ import NotionPage from '@/components/NotionPage'
 import { ArticleInfo } from './components/ArticleInfo'
 import Comment from '@/components/Comment'
 import ArticleAround from './components/ArticleAround'
+import ShareBar from '@/components/ShareBar'

 export const LayoutSlug = props => {
  const { post, lock, validPassword, prev, next } = props
@@ -22,6 +23,8 @@ export const LayoutSlug = props => {
                    {post && <>
                        <ArticleInfo post={post} />
                        <NotionPage post={post} />
+                        {/* 分享 */}
+                        <ShareBar post={post} />
                        {post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
                        <Comment frontMatter={post}/>
                    </>}