sharebar position

components/ShareBar.js

@@ -12,7 +12,7 @@ const ShareBar = ({ post }) => {
 
   const shareUrl = BLOG.LINK + router.asPath
 
-  return <div className='py-1 flex overflow-x-auto'>
+  return <div className='py-1 flex overflow-x-auto justify-end'>
         <ShareButtons shareUrl={shareUrl} title={post.title} image={post.pageCover} body={
             post.title +
             ' | ' +

components/ShareButtons.js

@@ -340,10 +340,11 @@ const ShareButtons = ({ shareUrl, title, body, image }) => {
                     </button>
               }
               if (singleService === 'wechat') {
-                return <button onMouseEnter={openPopover} onMouseLeave={closePopover} aria-label={singleService} key={singleService} className='relative cursor-pointer bg-green-600 text-white rounded-full mx-1'>
+                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' />
@@ -352,6 +353,7 @@ const ShareButtons = ({ shareUrl, title, body, image }) => {
                                     {locale.COMMON.SCAN_QR_CODE}
                                 </span>
                         </div>
+                        </div>
                     </button>
               }
               if (singleService === 'link') {

themes/hexo/LayoutSlug.js

@@ -69,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} /> }
@@ -77,9 +79,6 @@ export const LayoutSlug = props => {
 
           <hr className='border-dashed' />
 
-          {/* 分享 */}
-          <ShareBar post={post} />
-
           {/* 评论互动 */}
           <div className="duration-200 overflow-x-auto bg-white dark:bg-hexo-black-gray px-3">
             <Comment frontMatter={post} />

themes/matery/LayoutSlug.js

@@ -81,15 +81,15 @@ export const LayoutSlug = props => {
                                         data-ad-client="ca-pub-2708419466378217"
                                         data-ad-slot="3806269138" />
                                 </section>
-
+                                {/* 分享 */}
+                                <ShareBar post={post} />
                                 {/* 文章版权说明 */}
                                 {post.type === 'Post' && <ArticleCopyright {...props} />}
 
                             </article>
 
                             <hr className='border-dashed' />
-                            {/* 分享 */}
-                            <ShareBar post={post} />
+
                             {/* 评论互动 */}
                             <div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
                                 <Comment frontMatter={post} />

themes/medium/LayoutSlug.js

@@ -86,15 +86,18 @@ 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} />}
-                     {/* 分享 */}
-                     <ShareBar post={post} />
                     <Comment frontMatter={post} />
                 </section>
 

themes/next/components/ArticleDetail.js

@@ -94,15 +94,16 @@ export default function ArticleDetail(props) {
                 </section>
 
                 {showArticleInfo && <>
+
+                    {/* 分享 */}
+                    <ShareBar post={post} />
+
                     {/* 版权声明 */}
                     {post.type === 'Post' && <ArticleCopyright author={BLOG.AUTHOR} url={url} />}
 
                     {/* 推荐文章 */}
                     {post.type === 'Post' && <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />}
 
-                    {/* 分享 */}
-                    <ShareBar post={post} />
-
                     <section className="flex justify-between">
                         {/* 分类 */}
                         {post.category && <>

themes/simple/LayoutSlug.js

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