d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-03 15:10:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Next 主题优化

Browse Source
This commit is contained in:
tangly1024.com
2023-05-23 14:49:48 +08:00
parent 133bcd6aa7
commit e4c964e7b9
10 changed files with 88 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
styles/globals.css
View File

@@ -201,8 +201,8 @@ nav {
} }
.next #announcement-content *{ .next #announcement-content *{
font-size:12px !important; font-size:13px !important;
line-height:1.5 !important; line-height:1.7 !important;
} }
/* twikoo 评论区超链接样式 */ /* twikoo 评论区超链接样式 */

4
styles/notion.css
View File

@@ -36,7 +36,7 @@
--notion-yellow_background: rgb(251, 243, 219); --notion-yellow_background: rgb(251, 243, 219);
--notion-orange_background: rgb(250, 235, 221); --notion-orange_background: rgb(250, 235, 221);
--notion-brown_background: rgb(233, 229, 227); --notion-brown_background: rgb(233, 229, 227);
--notion-gray_background: rgb(235, 236, 237); --notion-gray_background: rgb(241 241 239);
--notion-green_background: rgb(219, 237, 219); --notion-green_background: rgb(219, 237, 219);
--notion-default_background: rgba(227, 226, 224); --notion-default_background: rgba(227, 226, 224);
@@ -48,7 +48,7 @@
--notion-yellow_background_co: rgba(251, 243, 219, 0.3); --notion-yellow_background_co: rgba(251, 243, 219, 0.3);
--notion-orange_background_co: rgba(250, 235, 221, 0.3); --notion-orange_background_co: rgba(250, 235, 221, 0.3);
--notion-brown_background_co: rgba(233, 229, 227, 0.3); --notion-brown_background_co: rgba(233, 229, 227, 0.3);
--notion-gray_background_co: rgba(235, 236, 237, 0.3); --notion-gray_background_co: rgba(241, 241, 239, 0.3);
--notion-green_background_co: rgba(219, 237, 219, 0.3); --notion-green_background_co: rgba(219, 237, 219, 0.3);
--notion-default_background_co: rgba(227, 226, 224, 0.3); --notion-default_background_co: rgba(227, 226, 224, 0.3);

6
themes/next/components/Announcement.js
View File

@@ -14,7 +14,11 @@ const Announcement = ({ post, className }) => {
<i className="mr-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT} <i className="mr-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
</div> </div>
</div> </div>
{post && (<div id="announcement-content"> {post && (<div id="announcement-content" data-aos="fade-down"
data-aos-duration="500"
data-aos-delay="200"
data-aos-once="true"
data-aos-anchor-placement="top-bottom">
<NotionPage post={post} className='text-center ' /> <NotionPage post={post} className='text-center ' />
</div>)} </div>)}
</> </>

29
themes/next/components/BlogPostCard.js
View File

@@ -23,6 +23,10 @@ const BlogPostCard = ({ post, showSummary }) => {
<Link <Link
href={`${BLOG.SUB_PATH}/${post.slug}`} href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref passHref
data-aos="fade-down"
data-aos-duration="500"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className={`cursor-pointer hover:underline text-3xl ${showPreview ? 'text-center' : '' className={`cursor-pointer hover:underline text-3xl ${showPreview ? 'text-center' : ''
} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}> } leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
@@ -30,10 +34,13 @@ const BlogPostCard = ({ post, showSummary }) => {
</Link> </Link>
<div <div data-aos="fade-down"
className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start' data-aos-duration="500"
} flex-wrap dark:text-gray-500 text-gray-400 `} data-aos-delay="100"
> data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 `}>
<div> <div>
{post.category && ( {post.category && (
<> <>
@@ -57,6 +64,7 @@ const BlogPostCard = ({ post, showSummary }) => {
</Link> </Link>
</div> </div>
<TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/> <TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>
<div className="hover:text-blue-500 dark:hover:text-blue-400 md:flex-nowrap flex-wrap md:justify-start inline-block"> <div className="hover:text-blue-500 dark:hover:text-blue-400 md:flex-nowrap flex-wrap md:justify-start inline-block">
{post.tagItems?.map(tag => ( {post.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} /> <TagItemMini key={tag.name} tag={tag} />
@@ -65,7 +73,12 @@ const BlogPostCard = ({ post, showSummary }) => {
</div> </div>
{(!showPreview || showSummary) && !post.results && ( {(!showPreview || showSummary) && !post.results && (
<p className="mt-4 mb-24 text-gray-700 dark:text-gray-300 text-sm font-light leading-7"> <p data-aos="fade-down"
data-aos-duration="500"
data-aos-delay="100"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className="mt-4 mb-12 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary} {post.summary}
</p> </p>
)} )}
@@ -80,7 +93,11 @@ const BlogPostCard = ({ post, showSummary }) => {
)} )}
{showPreview && post?.blockMap && ( {showPreview && post?.blockMap && (
<div className="overflow-ellipsis truncate"> <div data-aos="fade-down"
data-aos-duration="500"
data-aos-delay="100"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"className="overflow-ellipsis truncate">
<NotionPage post={post} /> <NotionPage post={post} />
</div> </div>
)} )}

10
themes/next/components/Card.js
View File

@@ -1,10 +1,6 @@
const Card = ({ children, headerSlot, className }) => { const Card = (props) => {
return <div const { children, headerSlot } = props
data-aos="fade-down" return <div {...props}>
data-aos-duration="300"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className={className}>
<>{headerSlot}</> <>{headerSlot}</>
<section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200"> <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
{children} {children}

23
themes/next/components/Logo.js
View File

@@ -4,12 +4,21 @@ import React from 'react'
const Logo = props => { const Logo = props => {
const { siteInfo, className } = props const { siteInfo, className } = props
return ( return (
<Link href='/' passHref legacyBehavior> <Link href='/' passHref legacyBehavior>
<div className={'flex flex-col justify-center items-center cursor-pointer bg-black dark:bg-gray-800 space-y-3 font-bold ' + className}> <div className={'flex flex-col justify-center items-center cursor-pointer bg-black dark:bg-gray-800 space-y-3 font-bold ' + className}>
<div className='font-serif text-xl text-white'> {siteInfo?.title}</div> <div data-aos="fade-down"
<div className='text-sm text-gray-300 font-light text-center'> {siteInfo?.description}</div> data-aos-duration="500"
</div> data-aos-once="true"
</Link> data-aos-anchor-placement="top-bottom"
); className='font-serif text-xl text-white'> {siteInfo?.title}</div>
<div data-aos="fade-down"
data-aos-duration="500"
data-aos-delay="300"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className='text-sm text-gray-300 font-light text-center'> {siteInfo?.description}</div>
</div>
</Link>
)
} }
export default Logo export default Logo

7
themes/next/components/MenuList.js
View File

@@ -34,7 +34,12 @@ export const MenuList = (props) => {
return ( return (
<> <>
{/* 大屏模式菜单 */} {/* 大屏模式菜单 */}
<nav id='nav' className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'> <nav id='nav' data-aos="fade-down"
data-aos-duration="500"
data-aos-delay="400"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
{links.map(link => link && link.show && <MenuItemDrop key={link?.to} link={link} />)} {links.map(link => link && link.show && <MenuItemDrop key={link?.to} link={link} />)}
</nav> </nav>

53
themes/next/components/SearchInput.js
View File

@@ -41,11 +41,11 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
searchInputRef.current.value = '' searchInputRef.current.value = ''
setShowClean(false) setShowClean(false)
} }
function lockSearchInput () { function lockSearchInput() {
lock = true lock = true
} }
function unLockSearchInput () { function unLockSearchInput() {
lock = false lock = false
} }
const [showClean, setShowClean] = useState(false) const [showClean, setShowClean] = useState(false)
@@ -61,31 +61,36 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
} }
} }
return <div className='flex w-full bg-gray-100'> return <div data-aos="fade-down"
<input data-aos-duration="500"
ref={searchInputRef} data-aos-delay="200"
type='text' data-aos-once="true"
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`} data-aos-anchor-placement="top-bottom"
className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'} className='flex w-full bg-gray-100'>
onKeyUp={handleKeyUp} <input
onCompositionStart={lockSearchInput} ref={searchInputRef}
onCompositionUpdate={lockSearchInput} type='text'
onCompositionEnd={unLockSearchInput} placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
onChange={e => updateSearchKey(e.target.value)} className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
defaultValue={currentSearch || ''} onKeyUp={handleKeyUp}
/> onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}
onCompositionEnd={unLockSearchInput}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch || ''}
/>
<div className='-ml-8 cursor-pointer float-right items-center justify-center py-2' <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
onClick={handleSearch}> onClick={handleSearch}>
<i className={`hover:text-black transform duration-200 text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} /> <i className={`hover:text-black transform duration-200 text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
</div> </div>
{(showClean && {(showClean &&
<div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'> <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
<i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} /> <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
</div>
)}
</div> </div>
)}
</div>
} }
export default SearchInput export default SearchInput

6
themes/next/components/SideAreaLeft.js
View File

@@ -26,14 +26,10 @@ const SideAreaLeft = props => {
return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-20 relative'}> return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-20 relative'}>
<section <section
data-aos="fade-down"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
className='w-60'> className='w-60'>
{/* 菜单 */} {/* 菜单 */}
<section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'> <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
<Logo {...props} className='h-32' /> <Logo className='h-32' {...props} />
<div className='pt-2 px-2 font-sans'> <div className='pt-2 px-2 font-sans'>
<MenuList allowCollapse={true} {...props} /> <MenuList allowCollapse={true} {...props} />
</div> </div>

1
themes/next/components/SideAreaRight.js
View File

@@ -43,6 +43,7 @@ const SideAreaRight = (props) => {
</Card>} </Card>}
<div className="sticky top-0 space-y-4 w-full"> <div className="sticky top-0 space-y-4 w-full">
{announcementVisible && <Card> {announcementVisible && <Card>
<Announcement post={notice} /> <Announcement post={notice} />
</Card>} </Card>}