d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
赞赏码默认隐藏
This commit is contained in:
tangly1024
2021-12-01 17:24:46 +08:00
parent fd4b3b01ca
commit 78e6595648
2 changed files with 14 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/RewardButton.js
View File

@@ -6,13 +6,15 @@ import React from 'react'
* @constructor
*/
const RewardButton = () => {
const [popoverShow, setPopoverShow] = React.useState(false)
const openPopover = () => {
setPopoverShow(true)
if (window) {
document.getElementById('reward-qrcode').classList.remove('hidden')
}
}
const closePopover = () => {
setPopoverShow(false)
if (window) {
document.getElementById('reward-qrcode').classList.add('hidden')
}
}
return (
<div onMouseEnter={openPopover} onMouseLeave={closePopover} className='justify-center py-10'>
@@ -21,16 +23,9 @@ const RewardButton = () => {
<span>打赏一杯咖啡</span>
</div>
<div className={ `${(popoverShow ? ' block ' : ' hidden ')} transform block z-50 font-normal`}>
<div
className='flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
<div>
<img className='md:w-72 m-auto' src='/reward_code_alipay.png' />
</div>
<div>
<img className='md:w-72 m-auto' src='/reward_code_wechat.png' />
</div>
</div>
<div id='reward-qrcode' className='hidden flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 mx-auto py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
<img className='md:w-72' src='/reward_code_alipay.png' />
<img className='md:w-72' src='/reward_code_wechat.png' />
</div>
</div>
)

13
pages/article/[slug].js
View File

@@ -47,20 +47,17 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={posts} categories={categories}>
<Progress targetRef={targetRef} />
<div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black pt-16'>
<article id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black pt-16'>
{/* 中央区域 wrapper */}
{post.type && !post.type.includes('Page') && (<>
<header
className='hover:shadow-2xl hover:scale-105 transform duration-200 mx-auto max-w-5xl mb-2 md:flex-shrink-0 animate__fadeIn animate__animated'>
{/* 封面图 */}
{post.page_cover && post.page_cover.length > 1 && (
<img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }} loading='lazy'
<img className='bg-center object-cover w-full hover:shadow-2xl hover:scale-105 transform duration-200 mx-auto max-w-5xl mb-2 md:flex-shrink-0 animate__fadeIn animate__animated' style={{ maxHeight: '40rem' }} loading='lazy'
src={post.page_cover} alt={post.title} />
)}
</header>
</>)}
<article
<div
className='hover:shadow-2xl duration-200 shadow-card mb-20 w-screen md:w-full overflow-x-auto md:px-10 px-5 pt-10 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'>
{post.type && !post.type.includes('Page') && (<>
@@ -153,7 +150,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
</Link>
</div>
</div>
</article>
</div>
{/* 评论互动 */}
<div
@@ -161,7 +158,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
<Comment frontMatter={post} />
</div>
</div>
</article>
{/* 悬浮目录按钮 */}
<div className='block lg:hidden'>