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

Fix Logo position & Fix Nav link

Browse Source
This commit is contained in:
emengweb
2023-10-18 17:38:48 +08:00
parent b61a72abb9
commit 55e790be18
5 changed files with 112 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/heo/components/CategoryBar.js
View File

@@ -32,7 +32,7 @@ export default function CategoryBar(props) {
return <div id='category-bar' className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e] return <div id='category-bar' className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]
${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''} py-2 lg:px-2 rounded-xl transition-colors duration-200`}> ${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''} py-2 lg:px-2 rounded-xl transition-colors duration-200`}>
<div id='category-bar-items' ref={categoryBarItemsRef} className='scroll-smooth max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'> <div id='category-bar-items' ref={categoryBarItemsRef} className='max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
<MenuItem href='/' name={locale.NAV.INDEX} /> <MenuItem href='/' name={locale.NAV.INDEX} />
{categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)} {categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)}
</div> </div>

2
themes/nav/components/LogoBar.js
View File

@@ -15,7 +15,7 @@ export default function LogoBar(props) {
<Link href='/' className='md:w-48 grid justify-items-center text-md md:text-xl dark:text-gray-200'> <Link href='/' className='md:w-48 grid justify-items-center text-md md:text-xl dark:text-gray-200'>
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon?.replaceAll('width=400', 'width=280')} <img src={siteInfo?.icon?.replaceAll('width=400', 'width=280')}
height='44px' alt={BLOG.AUTHOR + ' - ' + BLOG.NEXT_PUBLIC_BIO} className='md:block' placeholderSrc='' /> height='44px' alt={BLOG.AUTHOR + ' - ' + BLOG.BIO} className='md:block' />
{CONFIG.SHOW_TITLE_TEXT && siteInfo?.title} {CONFIG.SHOW_TITLE_TEXT && siteInfo?.title}
</Link> </Link>
</div> </div>

5
themes/nav/components/MenuItem.js
View File

@@ -36,7 +36,8 @@ export const MenuItem = ({ link }) => {
</div> </div>
</>) </>)
: ( : (
<Link href={link?.to} className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'> // link?.to
<Link href={'#' + link?.title} className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
{link?.icon && <i className={`text-base ${link?.icon}`} />}{link?.title} {link?.icon && <i className={`text-base ${link?.icon}`} />}{link?.title}
</Link> </Link>
) )
@@ -50,7 +51,7 @@ export const MenuItem = ({ link }) => {
{ {
link?.subMenus?.map((sLink, index) => ( link?.subMenus?.map((sLink, index) => (
<div key={index} className='nav-submenu'> <div key={index} className='nav-submenu'>
<a href={sLink?.to}> <a href={'#' + sLink?.title}>
<span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span> <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
</a> </a>
</div> </div>

2
themes/nav/components/TopNavBar.js
View File

@@ -52,7 +52,7 @@ export default function TopNavBar(props) {
return ( return (
<div id='top-nav' className={'fixed top-0 w-full z-40 bg-white dark:bg-neutral-900 shadow bg-opacity-70 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg md:shadow-none pb-2 md:pb-0 ' + className}> <div id='top-nav' className={'fixed top-0 w-full z-40 bg-white dark:bg-neutral-900 shadow bg-opacity-70 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg md:shadow-none pb-2 md:pb-0 ' + className}>
{/* 图标Logo */} {/* 图标Logo */}
<div className='fixed top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'> <div className='fixed block md:hidden top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
<LogoBar {...props} /> <LogoBar {...props} />
</div> </div>

202
themes/nav/index.js
View File

@@ -33,6 +33,8 @@ import Link from 'next/link'
import dynamic from 'next/dynamic' import dynamic from 'next/dynamic'
import { MenuItem } from './components/MenuItem' import { MenuItem } from './components/MenuItem'
import LogoBar from './components/LogoBar'
const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false }) const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
// 主题全局变量 // 主题全局变量
@@ -75,7 +77,7 @@ const LayoutBase = (props) => {
<Style/> <Style/>
{/* 主题样式根基 */} {/* 主题样式根基 */}
<div id='theme-onenav' className=' dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300'> <div id='theme-onenav' className='dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300'>
{/* 端顶部导航栏 */} {/* 端顶部导航栏 */}
<TopNavBar {...props} /> <TopNavBar {...props} />
@@ -85,7 +87,10 @@ const LayoutBase = (props) => {
{/* 左侧推拉抽屉 */} {/* 左侧推拉抽屉 */}
<div className={'font-sans hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'}> <div className={'font-sans hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'}>
{/* 图标Logo */}
<div className='hidden md:block w-full top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
<LogoBar {...props} />
</div>
<div className='main-menu z-20 pl-9 pr-7 pb-5 sticky pt-1 top-20 overflow-y-scroll h-fit max-h-full scroll-hidden bg-white dark:bg-neutral-800 rounded-xl '> <div className='main-menu z-20 pl-9 pr-7 pb-5 sticky pt-1 top-20 overflow-y-scroll h-fit max-h-full scroll-hidden bg-white dark:bg-neutral-800 rounded-xl '>
{/* 嵌入 */} {/* 嵌入 */}
{slotLeft} {slotLeft}
@@ -185,20 +190,21 @@ const LayoutPostListIndex = props => {
* @returns * @returns
*/ */
const LayoutPostList = props => { const LayoutPostList = props => {
const { posts } = props return <LayoutBase {...props}></LayoutBase>
// 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅 // const { posts } = props
// 如果是搜索，则列表顶部嵌入 搜索框 // // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
return ( // // 如果是搜索，则列表顶部嵌入 搜索框
<LayoutBase {...props} > // return (
<div className='w-full max-w-7xl mx-auto justify-center mt-8'> // <LayoutBase {...props} >
<div id='posts-wrapper' class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'> // <div className='w-full max-w-7xl mx-auto justify-center mt-8'>
{posts?.map(post => ( // <div id='posts-wrapper' class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
<BlogPostCard key={post.id} post = {post} className='card' /> // {posts?.map(post => (
))} // <BlogPostCard key={post.id} post = {post} className='card' />
</div> // ))}
</div> // </div>
</LayoutBase> // </div>
) // </LayoutBase>
// )
} }
/** /**
@@ -208,44 +214,45 @@ const LayoutPostList = props => {
*/ */
const LayoutSlug = (props) => { const LayoutSlug = (props) => {
const { post, lock, validPassword } = props const { post, lock, validPassword } = props
if(post?.slug?.startsWith('http') || post?.slug == '' || post?.slug == null){
return <LayoutBase {...props}></LayoutBase>
}else{
return <LayoutBase {...props} >
{/* 文章锁 */}
{lock && <ArticleLock validPassword={validPassword} />}
return ( {!lock && <div id='container'>
<LayoutBase {...props} >
{/* 文章锁 */}
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id='container'> {/* title */}
<h1 className="text-3xl pt-4 md:pt-12 dark:text-gray-300">{post?.title}</h1>
{/* title */} {/* Notion文章主体 */}
<h1 className="text-3xl pt-4 md:pt-12 dark:text-gray-300">{post?.title}</h1> {post && (<section id="article-wrapper" className="px-1">
<NotionPage post={post} />
{/* Notion文章主体 */} {/* 分享 */}
{post && (<section id="article-wrapper" className="px-1"> {/* <ShareBar post={post} /> */}
<NotionPage post={post} /> {/* 文章分类和标签信息 */}
<div className='flex justify-between'>
{CONFIG.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
<div>
{CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
</div>
</div>
{/* 分享 */} {/* 上一篇、下一篇文章 */}
{/* <ShareBar post={post} /> */} {/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
{/* 文章分类和标签信息 */}
<div className='flex justify-between'>
{CONFIG.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
<div>
{CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
</div>
</div>
{/* 上一篇、下一篇文章 */} <AdSlot />
{/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */} <WWAds className='w-full' orientation='horizontal'/>
<AdSlot /> <Comment frontMatter={post} />
<WWAds className='w-full' orientation='horizontal'/> </section>)}
<Comment frontMatter={post} /> <TocDrawer {...props} />
</section>)} </div>}
</LayoutBase>
<TocDrawer {...props} /> }
</div>}
</LayoutBase>
)
} }
/** /**
@@ -265,13 +272,14 @@ const LayoutSearch = (props) => {
* @returns * @returns
*/ */
const LayoutArchive = (props) => { const LayoutArchive = (props) => {
const { archivePosts } = props return <LayoutBase {...props}></LayoutBase>
// const { archivePosts } = props
return <LayoutBase {...props}> // return <LayoutBase {...props}>
<div className="mb-10 pb-20 md:py-12 py-3 min-h-full"> // <div className="mb-10 pb-20 md:py-12 py-3 min-h-full">
{Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)} // {Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
</div> // </div>
</LayoutBase> // </LayoutBase>
} }
/** /**
@@ -287,57 +295,59 @@ const Layout404 = props => {
* 分类列表 * 分类列表
*/ */
const LayoutCategoryIndex = (props) => { const LayoutCategoryIndex = (props) => {
const { categoryOptions } = props return <LayoutBase {...props}></LayoutBase>
const { locale } = useGlobal() // const { categoryOptions } = props
return <LayoutBase {...props}> // const { locale } = useGlobal()
<div className='bg-white dark:bg-gray-700 py-10'> // return <LayoutBase {...props}>
<div className='dark:text-gray-200 mb-5'> // <div className='bg-white dark:bg-gray-700 py-10'>
<i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}: // <div className='dark:text-gray-200 mb-5'>
</div> // <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
<div id='category-list' className='duration-200 flex flex-wrap'> // </div>
{categoryOptions?.map(category => { // <div id='category-list' className='duration-200 flex flex-wrap'>
return ( // {categoryOptions?.map(category => {
<Link // return (
key={category.name} // <Link
href={`/category/${category.name}`} // key={category.name}
passHref // href={`/category/${category.name}`}
legacyBehavior> // passHref
<div // legacyBehavior>
className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}> // <div
<i className='mr-4 fas fa-folder' />{category.name}({category.count}) // className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
</div> // <i className='mr-4 fas fa-folder' />{category.name}({category.count})
</Link> // </div>
) // </Link>
})} // )
</div> // })}
</div> // </div>
</LayoutBase> // </div>
// </LayoutBase>
} }
/** /**
* 标签列表 * 标签列表
*/ */
const LayoutTagIndex = (props) => { const LayoutTagIndex = (props) => {
const { tagOptions } = props return <LayoutBase {...props}></LayoutBase>
const { locale } = useGlobal() // const { tagOptions } = props
// const { locale } = useGlobal()
return <LayoutBase {...props}> // return <LayoutBase {...props}>
<div className="bg-white dark:bg-gray-700 py-10"> // <div className="bg-white dark:bg-gray-700 py-10">
<div className="dark:text-gray-200 mb-5"> // <div className="dark:text-gray-200 mb-5">
<i className="mr-4 fas fa-tag" /> // <i className="mr-4 fas fa-tag" />
{locale.COMMON.TAGS}: // {locale.COMMON.TAGS}:
</div> // </div>
<div id="tags-list" className="duration-200 flex flex-wrap"> // <div id="tags-list" className="duration-200 flex flex-wrap">
{tagOptions?.map(tag => { // {tagOptions?.map(tag => {
return ( // return (
<div key={tag.name} className="p-2"> // <div key={tag.name} className="p-2">
<TagItemMini key={tag.name} tag={tag} /> // <TagItemMini key={tag.name} tag={tag} />
</div> // </div>
) // )
})} // })}
</div> // </div>
</div> // </div>
</LayoutBase> // </LayoutBase>
} }
export { export {