d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +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]
${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} />
{categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)}
</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'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<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}
</Link>
</div>

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

@@ -36,7 +36,8 @@ export const MenuItem = ({ link }) => {
</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>
)
@@ -50,7 +51,7 @@ export const MenuItem = ({ link }) => {
{
link?.subMenus?.map((sLink, index) => (
<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>
</a>
</div>

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

@@ -52,7 +52,7 @@ export default function TopNavBar(props) {
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}>
{/* 图标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} />
</div>

202
themes/nav/index.js
View File

@@ -33,6 +33,8 @@ import Link from 'next/link'
import dynamic from 'next/dynamic'
import { MenuItem } from './components/MenuItem'
import LogoBar from './components/LogoBar'
const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
// 主题全局变量
@@ -75,7 +77,7 @@ const LayoutBase = (props) => {
<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} />
@@ -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'}>
{/* 图标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 '>
{/* 嵌入 */}
{slotLeft}
@@ -185,20 +190,21 @@ const LayoutPostListIndex = props => {
* @returns
*/
const LayoutPostList = props => {
const { posts } = props
// 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
// 如果是搜索，则列表顶部嵌入 搜索框
return (
<LayoutBase {...props} >
<div className='w-full max-w-7xl mx-auto justify-center mt-8'>
<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'>
{posts?.map(post => (
<BlogPostCard key={post.id} post = {post} className='card' />
))}
</div>
</div>
</LayoutBase>
)
return <LayoutBase {...props}></LayoutBase>
// const { posts } = props
// // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
// // 如果是搜索，则列表顶部嵌入 搜索框
// return (
// <LayoutBase {...props} >
// <div className='w-full max-w-7xl mx-auto justify-center mt-8'>
// <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'>
// {posts?.map(post => (
// <BlogPostCard key={post.id} post = {post} className='card' />
// ))}
// </div>
// </div>
// </LayoutBase>
// )
}
/**
@@ -208,44 +214,45 @@ const LayoutPostList = props => {
*/
const LayoutSlug = (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 (
<LayoutBase {...props} >
{/* 文章锁 */}
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id='container'>
{!lock && <div id='container'>
{/* title */}
<h1 className="text-3xl pt-4 md:pt-12 dark:text-gray-300">{post?.title}</h1>
{/* title */}
<h1 className="text-3xl pt-4 md:pt-12 dark:text-gray-300">{post?.title}</h1>
{/* Notion文章主体 */}
{post && (<section id="article-wrapper" className="px-1">
<NotionPage post={post} />
{/* Notion文章主体 */}
{post && (<section id="article-wrapper" className="px-1">
<NotionPage post={post} />
{/* 分享 */}
{/* <ShareBar 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} /> */}
{/* 文章分类和标签信息 */}
<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>
{/* 上一篇、下一篇文章 */}
{/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
{/* 上一篇、下一篇文章 */}
{/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
<AdSlot />
<WWAds className='w-full' orientation='horizontal'/>
<AdSlot />
<WWAds className='w-full' orientation='horizontal'/>
<Comment frontMatter={post} />
</section>)}
<Comment frontMatter={post} />
</section>)}
<TocDrawer {...props} />
</div>}
</LayoutBase>
)
<TocDrawer {...props} />
</div>}
</LayoutBase>
}
}
/**
@@ -265,13 +272,14 @@ const LayoutSearch = (props) => {
* @returns
*/
const LayoutArchive = (props) => {
const { archivePosts } = props
return <LayoutBase {...props}></LayoutBase>
// const { archivePosts } = props
return <LayoutBase {...props}>
<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} />)}
</div>
</LayoutBase>
// return <LayoutBase {...props}>
// <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} />)}
// </div>
// </LayoutBase>
}
/**
@@ -287,57 +295,59 @@ const Layout404 = props => {
* 分类列表
*/
const LayoutCategoryIndex = (props) => {
const { categoryOptions } = props
const { locale } = useGlobal()
return <LayoutBase {...props}>
<div className='bg-white dark:bg-gray-700 py-10'>
<div className='dark:text-gray-200 mb-5'>
<i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
</div>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div
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'}>
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
</div>
</Link>
)
})}
</div>
</div>
</LayoutBase>
return <LayoutBase {...props}></LayoutBase>
// const { categoryOptions } = props
// const { locale } = useGlobal()
// return <LayoutBase {...props}>
// <div className='bg-white dark:bg-gray-700 py-10'>
// <div className='dark:text-gray-200 mb-5'>
// <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
// </div>
// <div id='category-list' className='duration-200 flex flex-wrap'>
// {categoryOptions?.map(category => {
// return (
// <Link
// key={category.name}
// href={`/category/${category.name}`}
// passHref
// legacyBehavior>
// <div
// 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'}>
// <i className='mr-4 fas fa-folder' />{category.name}({category.count})
// </div>
// </Link>
// )
// })}
// </div>
// </div>
// </LayoutBase>
}
/**
* 标签列表
*/
const LayoutTagIndex = (props) => {
const { tagOptions } = props
const { locale } = useGlobal()
return <LayoutBase {...props}></LayoutBase>
// const { tagOptions } = props
// const { locale } = useGlobal()
return <LayoutBase {...props}>
<div className="bg-white dark:bg-gray-700 py-10">
<div className="dark:text-gray-200 mb-5">
<i className="mr-4 fas fa-tag" />
{locale.COMMON.TAGS}:
</div>
<div id="tags-list" className="duration-200 flex flex-wrap">
{tagOptions?.map(tag => {
return (
<div key={tag.name} className="p-2">
<TagItemMini key={tag.name} tag={tag} />
</div>
)
})}
</div>
</div>
</LayoutBase>
// return <LayoutBase {...props}>
// <div className="bg-white dark:bg-gray-700 py-10">
// <div className="dark:text-gray-200 mb-5">
// <i className="mr-4 fas fa-tag" />
// {locale.COMMON.TAGS}:
// </div>
// <div id="tags-list" className="duration-200 flex flex-wrap">
// {tagOptions?.map(tag => {
// return (
// <div key={tag.name} className="p-2">
// <TagItemMini key={tag.name} tag={tag} />
// </div>
// )
// })}
// </div>
// </div>
// </LayoutBase>
}
export {