d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-18 15:09:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

theme 优化

Browse Source
This commit is contained in:
tangly1024.com
2024-01-30 18:05:37 +08:00
parent 51d3cdc9fc
commit b5bfdcba4b
16 changed files with 180 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
themes/gitbook/index.js
View File

@@ -325,7 +325,7 @@ const LayoutTagIndex = (props) => {
const { tagOptions } = props
const { locale } = useGlobal()
return <div {...props}>
return <>
<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" />
@@ -341,7 +341,7 @@ const LayoutTagIndex = (props) => {
})}
</div>
</div>
</div>
</>
}
export {

51
themes/hexo/index.js
View File

@@ -46,12 +46,25 @@ export const useHexoGlobal = () => useContext(ThemeGlobalHexo)
* @constructor
*/
const LayoutBase = props => {
const { children, floatSlot, slotTop, meta, className } = props
const { post , children, slotTop, meta, className } = props
const { onLoading, fullWidth } = useGlobal()
const router = useRouter()
const headerSlot = router.route==='/' && siteConfig('HEXO_HOME_BANNER_ENABLE', null, CONFIG) ? <Hero {...props} /> : null
const headerSlot = post
? <PostHeader {...props} /> : (router.route==='/' && siteConfig('HEXO_HOME_BANNER_ENABLE', null, CONFIG)
? <Hero {...props} /> : null)
const floatSlot = <>
{post?.toc?.length > 1 && <div className="block lg:hidden">
<TocDrawerButton
onClick={() => {
drawerRight?.current?.handleSwitchVisible()
}}
/>
</div>}
<JumpToCommentButton />
</>
// Algolia搜索框
const searchModal = useRef(null)
@@ -137,7 +150,7 @@ const LayoutIndex = (props) => {
* @returns
*/
const LayoutPostList = (props) => {
return <div {...props} className='pt-8'>
return <div className='pt-8'>
<SlotBar {...props} />
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</div>
@@ -167,7 +180,7 @@ const LayoutSearch = props => {
})
return (
<div {...props} currentSearch={currentSearch} className='pt-8'>
<div className='pt-8'>
{!currentSearch
? <SearchNav {...props} />
: <div id="posts-wrapper"> {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />} </div>}
@@ -182,7 +195,7 @@ const LayoutSearch = props => {
*/
const LayoutArchive = (props) => {
const { archivePosts } = props
return <div {...props} className='pt-8'>
return <div className='pt-8'>
<Card className='w-full'>
<div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
{Object.keys(archivePosts).map(archiveTitle => (
@@ -205,22 +218,10 @@ const LayoutArchive = (props) => {
const LayoutSlug = props => {
const { post, lock, validPassword } = props
const drawerRight = useRef(null)
const targetRef = isBrowser ? document.getElementById('article-wrapper') : null
const floatSlot = <>
{post?.toc?.length > 1 && <div className="block lg:hidden">
<TocDrawerButton
onClick={() => {
drawerRight?.current?.handleSwitchVisible()
}}
/>
</div>}
<JumpToCommentButton />
</>
const tocRef = isBrowser ? document.getElementById('article-wrapper') : null
return (
<div {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} floatSlot={floatSlot} >
<>
<div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
{lock && <ArticleLock validPassword={validPassword} />}
@@ -252,10 +253,10 @@ const LayoutSlug = props => {
</div>
<div className='block lg:hidden'>
<TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
<TocDrawer post={post} cRef={drawerRight} targetRef={tocRef} />
</div>
</div>
</>
)
}
@@ -280,7 +281,7 @@ const Layout404 = props => {
}, 3000)
})
return (
<div {...props}>
<>
<div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
<div className="dark:text-gray-200">
<h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
@@ -291,7 +292,7 @@ const Layout404 = props => {
</div>
</div>
</div>
</div>
</>
)
}
@@ -304,7 +305,7 @@ const LayoutCategoryIndex = props => {
const { categoryOptions } = props
const { locale } = useGlobal()
return (
<div {...props} className='mt-8'>
<div className='mt-8'>
<Card className="w-full min-h-screen">
<div className="dark:text-gray-200 mb-5 mx-3">
<i className="mr-4 fas fa-th" /> {locale.COMMON.CATEGORY}:
@@ -334,7 +335,7 @@ const LayoutTagIndex = props => {
const { tagOptions } = props
const { locale } = useGlobal()
return (
<div {...props} className='mt-8'>
<div className='mt-8'>
<Card className='w-full'>
<div className="dark:text-gray-200 mb-5 ml-4">
<i className="mr-4 fas fa-tag" /> {locale.COMMON.TAGS}:

21
themes/landing/index.js
View File

@@ -57,13 +57,13 @@ const LayoutBase = (props) => {
*/
const LayoutIndex = (props) => {
return (
<div {...props}>
<>
<Hero />
<Features />
<FeaturesBlocks />
<Testimonials />
<Newsletter />
</div>
</>
)
}
@@ -81,21 +81,20 @@ const LayoutSlug = (props) => {
return <div id='theme-landing'><Loading /></div>
}
return <div {...props}>
return <>
<div id='container-inner' className='mx-auto max-w-screen-lg p-12'>
<NotionPage {...props} />
</div>
</div>
</>
}
// 其他布局暂时留空
const LayoutSearch = (props) => <div {...props}><Hero /></div>
const LayoutArchive = (props) => <div {...props}><Hero /></div>
const Layout404 = (props) => <div {...props}><Hero /></div>
const LayoutCategoryIndex = (props) => <div {...props}><Hero /></div>
const LayoutPostList = (props) => <div {...props}><Hero /></div>
const LayoutTagIndex = (props) => <div {...props}><Hero /></div>
const LayoutSearch = (props) => <><Hero /></>
const LayoutArchive = (props) => <><Hero /></>
const Layout404 = (props) => <><Hero /></>
const LayoutCategoryIndex = (props) => <><Hero /></>
const LayoutPostList = (props) => <><Hero /></>
const LayoutTagIndex = (props) => <><Hero /></>
export {
CONFIG as THEME_CONFIG,

38
themes/matery/index.js
View File

@@ -44,7 +44,10 @@ const LayoutBase = props => {
const { onLoading, fullWidth } = useGlobal()
const router = useRouter()
const containerSlot= router.route==='/' ? <Announcement {...props} /> : <BlogListBar {...props} />
const headerSlot= siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) && router.route==='/' ? <Hero {...props} /> : null
const headerSlot= siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) && router.route==='/'
? <Hero {...props} /> : (post && !fullWidth ? <PostHeader {...props} /> : null)
const floatRightBottom = post ? <JumpToCommentButton /> : null
return (
<div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
@@ -61,7 +64,7 @@ const LayoutBase = props => {
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 -translate-y-16"
enterTo="opacity-100"
enterTo="opacity-100 w-full"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-16"
@@ -82,7 +85,7 @@ const LayoutBase = props => {
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100"
enterTo="opacity-100 w-full"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
@@ -101,7 +104,7 @@ const LayoutBase = props => {
</div>
{/* 右下角悬浮 */}
<RightFloatButtons {...props} />
<RightFloatButtons {...props} floatRightBottom={floatRightBottom}/>
{/* 页脚 */}
<Footer title={siteConfig('TITLE')} />
@@ -155,13 +158,13 @@ const LayoutSearch = props => {
}
})
return (
<div {...props} currentSearch={currentSearch}>
<>
{!currentSearch
? <SearchNave {...props} />
: <div id="posts-wrapper">
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</div>}
</div>
</>
)
}
@@ -172,7 +175,7 @@ const LayoutSearch = props => {
*/
const LayoutArchive = (props) => {
const { archivePosts } = props
return <div {...props} headerSlot={<PostHeader {...props} />} >
return <>
<Card className='w-full -mt-32'>
<div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
{Object.keys(archivePosts).map(archiveTitle => (
@@ -184,7 +187,7 @@ const LayoutArchive = (props) => {
))}
</div>
</Card>
</div>
</>
}
/**
@@ -195,9 +198,8 @@ const LayoutArchive = (props) => {
const LayoutSlug = props => {
const { post, lock, validPassword } = props
const { fullWidth } = useGlobal()
const headerSlot = fullWidth ? null : <PostHeader {...props} />
return (<div {...props} headerSlot={headerSlot} showCategory={false} showTag={false} floatRightBottom={<JumpToCommentButton />}>
return (<>
<div id='inner-wrapper' className={`w-full ${fullWidth ? '' : 'lg:max-w-3xl 2xl:max-w-4xl'}`} >
@@ -260,7 +262,7 @@ const LayoutSlug = props => {
</div>
</div>
</>
)
}
@@ -283,7 +285,7 @@ const Layout404 = props => {
}, 3000)
})
return (
<div {...props}>
<>
<div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
<div className="dark:text-gray-200">
<h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
@@ -294,7 +296,7 @@ const Layout404 = props => {
</div>
</div>
</div>
</div>
</>
)
}
@@ -307,7 +309,7 @@ const LayoutCategoryIndex = props => {
const { categoryOptions } = props
return (
<div {...props} headerSlot={<PostHeader {...props} />} >
<>
<div id='inner-wrapper' className='w-full'>
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black dark:text-gray-300">
@@ -324,7 +326,7 @@ const LayoutCategoryIndex = props => {
</div>
</div>
</div>
</div>
</>
)
}
@@ -337,7 +339,7 @@ const LayoutTagIndex = props => {
const { tagOptions } = props
const { locale } = useGlobal()
return (
<div {...props} headerSlot={<PostHeader {...props} />} >
<>
<div id='inner-wrapper' className='w-full drop-shadow-xl'>
<div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
@@ -357,7 +359,7 @@ const LayoutTagIndex = props => {
</div>
</div>
</div>
</div>
</>
)
}

29
themes/medium/index.js
View File

@@ -47,12 +47,14 @@ export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
* @constructor
*/
const LayoutBase = props => {
const { children, showInfoCard = true, slotRight, slotTop, notice, meta } = props
const { children, showInfoCard = true, slotRight, notice, meta } = props
const { locale } = useGlobal()
const router = useRouter()
const [tocVisible, changeTocVisible] = useState(false)
const { onLoading, fullWidth } = useGlobal()
const slotTop = <BlogPostBar {...props} />
return (
<ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
{/* SEO相关 */}
@@ -137,10 +139,9 @@ const LayoutIndex = (props) => {
* @returns
*/
const LayoutPostList = (props) => {
const slotTop = <BlogPostBar {...props} />
return <div {...props} slotTop={slotTop}>
return <>
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</div>
</>
}
/**
@@ -220,7 +221,7 @@ const LayoutSearch = (props) => {
}
}, [])
return <div {...props}>
return <>
{/* 搜索导航栏 */}
<div className='py-12'>
@@ -236,7 +237,7 @@ const LayoutSearch = (props) => {
{currentSearch && <div>
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</div>}
</div>
</>
}
/**
@@ -247,12 +248,12 @@ const LayoutSearch = (props) => {
const LayoutArchive = props => {
const { archivePosts } = props
return (
<div {...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>
</div>
</>
)
}
@@ -262,9 +263,9 @@ const LayoutArchive = props => {
* @returns
*/
const Layout404 = props => {
return <div {...props}>
return <>
<div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
</div>
</>
}
/**
@@ -276,7 +277,7 @@ const LayoutCategoryIndex = (props) => {
const { categoryOptions } = props
const { locale } = useGlobal()
return (
<div {...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}:
@@ -298,7 +299,7 @@ const LayoutCategoryIndex = (props) => {
})}
</div>
</div>
</div>
</>
)
}
@@ -311,7 +312,7 @@ const LayoutTagIndex = props => {
const { tagOptions } = props
const { locale } = useGlobal()
return (
<div {...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" />
@@ -327,7 +328,7 @@ const LayoutTagIndex = props => {
})}
</div>
</div>
</div>
</>
)
}

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

@@ -50,9 +50,9 @@ export const MenuItem = ({ link }) => {
{
link?.subMenus?.map((sLink, index) => (
<div key={index} className='nav-submenu'>
<a href={sLink?.to}>
<Link href={sLink?.to}>
<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>
</Link>
</div>
))
}

30
themes/nav/index.js
View File

@@ -172,10 +172,10 @@ const LayoutPostListIndex = props => {
// const { customMenu, children, post, allNavPages, categoryOptions, slotLeft, slotRight, slotTop, meta } = props
// const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
return (
<div {...props} >
<>
<Announcement {...props} />
<BlogPostListAll { ...props } />
</div>
</>
)
}
@@ -189,7 +189,7 @@ const LayoutPostList = props => {
// 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
// 如果是搜索，则列表顶部嵌入 搜索框
return (
<div {...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 => (
@@ -197,7 +197,7 @@ const LayoutPostList = props => {
))}
</div>
</div>
</div>
</>
)
}
@@ -210,7 +210,7 @@ const LayoutSlug = (props) => {
const { post, lock, validPassword } = props
return (
<div {...props} >
<>
{/* 文章锁 */}
{lock && <ArticleLock validPassword={validPassword} />}
@@ -244,7 +244,7 @@ const LayoutSlug = (props) => {
<TocDrawer {...props} />
</div>}
</div>
</>
)
}
@@ -255,7 +255,7 @@ const LayoutSlug = (props) => {
* @returns
*/
const LayoutSearch = (props) => {
return <div {...props}></div>
return <></>
}
/**
@@ -267,20 +267,20 @@ const LayoutSearch = (props) => {
const LayoutArchive = (props) => {
const { archivePosts } = props
return <div {...props}>
return <>
<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>
</div>
</>
}
/**
* 404
*/
const Layout404 = props => {
return <div {...props}>
return <>
<div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
</div>
</>
}
/**
@@ -289,7 +289,7 @@ const Layout404 = props => {
const LayoutCategoryIndex = (props) => {
const { categoryOptions } = props
const { locale } = useGlobal()
return <div {...props}>
return <>
<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}:
@@ -311,7 +311,7 @@ const LayoutCategoryIndex = (props) => {
})}
</div>
</div>
</div>
</>
}
/**
@@ -321,7 +321,7 @@ const LayoutTagIndex = (props) => {
const { tagOptions } = props
const { locale } = useGlobal()
return <div {...props}>
return <>
<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" />
@@ -337,7 +337,7 @@ const LayoutTagIndex = (props) => {
})}
</div>
</div>
</div>
</>
}
export {

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

@@ -1,10 +1,15 @@
/**
* 卡片组件
* @param {*} param0
* @returns
*/
const Card = (props) => {
const { children, headerSlot } = props
return <div {...props}>
<>{headerSlot}</>
<section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
{children}
</section>
</div>
const { children, headerSlot, className } = props
return <div className={className}>
<>{headerSlot}</>
<section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
{children}
</section>
</div>
}
export default Card

50
themes/next/index.js
View File

@@ -33,7 +33,7 @@ import { siteConfig } from '@/lib/config'
* @constructor
*/
const LayoutBase = (props) => {
const { children, headerSlot, floatSlot, rightAreaSlot, meta } = props
const { children, headerSlot, rightAreaSlot, meta, post } = props
const { onLoading } = useGlobal()
const targetRef = useRef(null)
const floatButtonGroup = useRef(null)
@@ -67,6 +67,15 @@ const LayoutBase = (props) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [showRightFloat])
// 悬浮抽屉
const drawerRight = useRef(null)
const floatSlot = <div className='block lg:hidden'>
<TocDrawerButton onClick={() => {
drawerRight?.current?.handleSwitchVisible()
}} />
</div>
const tocRef = isBrowser ? document.getElementById('article-wrapper') : null
return (
<div id='theme-next'>
{/* SEO相关 */}
@@ -105,8 +114,14 @@ const LayoutBase = (props) => {
{/* 右侧栏样式 */}
{siteConfig('NEXT_RIGHT_BAR', null, CONFIG) && <SideAreaRight targetRef={targetRef} slot={rightAreaSlot} {...props} />}
</main>
{/* 悬浮目录按钮 */}
{post && <div className='block lg:hidden'>
<TocDrawer post={post} cRef={drawerRight} targetRef={tocRef} />
</div>}
{/* 右下角悬浮 */}
<div ref={floatButtonGroup} className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 font-sans'>
<div className={(showRightFloat ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500 animate__faster flex space-x-2 items-center cursor-pointer '}>
@@ -139,7 +154,7 @@ const LayoutIndex = (props) => {
* @returns
*/
const LayoutPostList = (props) => {
return <div {...props} >
return <>
<BlogListBar {...props} />
@@ -147,7 +162,7 @@ const LayoutPostList = (props) => {
? <BlogPostListScroll {...props} showSummary={true} />
: <BlogPostListPage {...props} />
}
</div>
</>
}
/**
@@ -173,7 +188,7 @@ const LayoutSearch = (props) => {
}, [])
return (
<div {...props} >
<>
<StickyBar>
<div className="p-4 dark:text-gray-200">
<i className="mr-1 fas fa-search" />{' '}
@@ -186,7 +201,7 @@ const LayoutSearch = (props) => {
: <BlogPostListPage {...props} />
}
</div>
</div>
</>
)
}
@@ -230,7 +245,7 @@ const LayoutArchive = (props) => {
const { archivePosts } = props
return (
<div {...props}>
<>
<div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-hexo-black-gray shadow-md min-h-full">
{Object.keys(archivePosts).map(archiveTitle => (
<BlogPostArchive
@@ -240,7 +255,7 @@ const LayoutArchive = (props) => {
/>
))}
</div>
</div>
</>
)
}
@@ -251,27 +266,14 @@ const LayoutArchive = (props) => {
*/
const LayoutSlug = (props) => {
const { post, lock, validPassword } = props
const drawerRight = useRef(null)
const targetRef = isBrowser ? document.getElementById('article-wrapper') : null
const floatSlot = <div className='block lg:hidden'>
<TocDrawerButton onClick={() => {
drawerRight?.current?.handleSwitchVisible()
}} />
</div>
return (
<div {...props} floatSlot={floatSlot}>
<>
{post && !lock && <ArticleDetail {...props} />}
{post && lock && <ArticleLock validPassword={validPassword} />}
{/* 悬浮目录按钮 */}
{post && <div className='block lg:hidden'>
<TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
</div>}
</div>
</>
)
}
@@ -318,7 +320,7 @@ const LayoutCategoryIndex = (props) => {
const LayoutTagIndex = (props) => {
const { tagOptions } = props
const { locale } = useGlobal()
return <div {...props}>
return <>
<div className='bg-white dark:bg-hexo-black-gray px-10 py-10 shadow h-full'>
<div className='dark:text-gray-200 mb-5'><i className='fas fa-tags mr-4' />{locale.COMMON.TAGS}:</div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
@@ -327,7 +329,7 @@ const LayoutTagIndex = (props) => {
})}
</div>
</div>
</div>
</>
}
export {

3
themes/nobelium/components/BlogListBar.js
View File

@@ -1,7 +1,8 @@
import { useNobeliumGlobal } from '..'
import Tags from './Tags'
export default function BlogListBar(props) {
const { tag, setFilterKey } = props
const { tag, setFilterKey } = useNobeliumGlobal()
const handleSearchChange = (val) => {
setFilterKey(val)
}

45
themes/nobelium/index.js
View File

@@ -37,14 +37,16 @@ export const useNobeliumGlobal = () => useContext(ThemeGlobalNobelium)
* @constructor
*/
const LayoutBase = props => {
const { children, post, topSlot, meta } = props
const { children, post, meta } = props
const fullWidth = post?.fullWidth ?? false
const { onLoading } = useGlobal()
const searchModal = useRef(null)
// 在列表中进行实时过滤
const [filterKey, setFilterKey] = useState('')
const topSlot= <BlogListBar {...props}/>
return (
<ThemeGlobalNobelium.Provider value={{ searchModal }}>
<ThemeGlobalNobelium.Provider value={{ searchModal, filterKey, setFilterKey }}>
<div id='theme-nobelium' className='nobelium relative dark:text-gray-300 w-full bg-white dark:bg-black min-h-screen flex flex-col'>
{/* SEO相关 */}
<CommonHead meta={meta} />
@@ -114,10 +116,8 @@ const LayoutIndex = props => {
* @returns
*/
const LayoutPostList = props => {
const { posts, topSlot } = props
// 在列表中进行实时过滤
const [filterKey, setFilterKey] = useState('')
const { posts, topSlot,tag } = props
const { filterKey } = useNobeliumGlobal()
let filteredBlogPosts = []
if (filterKey && posts) {
filteredBlogPosts = posts.filter(post => {
@@ -130,10 +130,11 @@ const LayoutPostList = props => {
}
return (
<div {...props} topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}>
<>
{topSlot}
{tag && <SearchNavBar {...props} />}
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
</div>
</>
)
}
@@ -159,7 +160,7 @@ const LayoutSearch = props => {
}, [])
// 在列表中进行实时过滤
const [filterKey, setFilterKey] = useState('')
const {filterKey} = useNobeliumGlobal()
let filteredBlogPosts = []
if (filterKey && posts) {
filteredBlogPosts = posts.filter(post => {
@@ -171,10 +172,10 @@ const LayoutSearch = props => {
filteredBlogPosts = deepClone(posts)
}
return <div {...props} topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}>
return <>
<SearchNavBar {...props} />
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
</div>
</>
}
/**
@@ -185,11 +186,11 @@ const LayoutSearch = props => {
const LayoutArchive = props => {
const { archivePosts } = props
return (
<div {...props}>
<>
<div className="mb-10 pb-20 md:py-12 p-3 min-h-screen w-full">
{Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
</div>
</div>
</>
)
}
@@ -202,7 +203,7 @@ const LayoutSlug = props => {
const { post, lock, validPassword } = props
return (
<div {...props}>
<>
{lock && <ArticleLock validPassword={validPassword} />}
@@ -216,7 +217,7 @@ const LayoutSlug = props => {
</>
</div>}
</div>
</>
)
}
@@ -226,9 +227,9 @@ const LayoutSlug = props => {
* @returns
*/
const Layout404 = (props) => {
return <div {...props}>
return <>
404 Not found.
</div>
</>
}
/**
@@ -240,7 +241,7 @@ const LayoutCategoryIndex = (props) => {
const { categoryOptions } = props
return (
<div {...props}>
<>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
@@ -257,7 +258,7 @@ const LayoutCategoryIndex = (props) => {
)
})}
</div>
</div>
</>
)
}
@@ -269,7 +270,7 @@ const LayoutCategoryIndex = (props) => {
const LayoutTagIndex = (props) => {
const { tagOptions } = props
return (
<div {...props}>
<>
<div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => {
@@ -284,7 +285,7 @@ const LayoutTagIndex = (props) => {
})}
</div>
</div>
</div>
</>
)
}

39
themes/plog/components/BlogListBar.js
View File

@@ -1,39 +0,0 @@
import Tags from './Tags'
export default function BlogListBar(props) {
const { tag, setFilterKey } = props
const handleSearchChange = (val) => {
setFilterKey(val)
}
if (tag) {
return (<div className="mb-4">
<div className='relative'>
<input
type="text"
placeholder={
tag ? `Search in #${tag}` : 'Search Articles'
}
className="outline-none block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
onChange={e => handleSearchChange(e.target.value)}
/>
<svg
className="absolute right-3 top-3 h-5 w-5 text-black dark:text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg>
</div>
<Tags {...props} />
</div>)
} else {
return <></>
}
}

3
themes/plog/components/Modal.js
View File

@@ -5,6 +5,7 @@ import { ArrowPath, ChevronLeft, ChevronRight } from '@/components/HeroIcons'
import Link from 'next/link'
import { siteConfig } from '@/lib/config'
import LazyImage from '@/components/LazyImage'
import { compressImage } from '@/lib/notion/mapImage'
/**
* 弹出框
@@ -13,7 +14,7 @@ export default function Modal(props) {
const { showModal, setShowModal, modalContent, setModalContent } = usePlogGlobal()
const { siteInfo, posts } = props
const cancelButtonRef = useRef(null)
const img = modalContent?.pageCover || siteInfo?.pageCover
const img = compressImage(modalContent?.pageCover || siteInfo?.pageCover, 1200, 85, 'webp')
const imgRef = useRef(null)
// 添加loading状态

24
themes/plog/index.js
View File

@@ -98,9 +98,9 @@ const LayoutIndex = props => {
*/
const LayoutPostList = props => {
return (
<div {...props}>
<>
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</div>
</>
)
}
@@ -137,11 +137,11 @@ const LayoutSearch = props => {
const LayoutArchive = props => {
const { archivePosts } = props
return (
<div {...props}>
<>
<div className="mb-10 pb-20 md:py-12 p-3 min-h-screen w-full">
{Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
</div>
</div>
</>
)
}
@@ -154,7 +154,7 @@ const LayoutSlug = props => {
const { post, lock, validPassword } = props
return (
<div {...props}>
<>
{lock && <ArticleLock validPassword={validPassword} />}
@@ -168,7 +168,7 @@ const LayoutSlug = props => {
</>
</div>}
</div>
</>
)
}
@@ -178,9 +178,9 @@ const LayoutSlug = props => {
* @returns
*/
const Layout404 = (props) => {
return <div {...props}>
return <>
404 Not found.
</div>
</>
}
/**
@@ -192,7 +192,7 @@ const LayoutCategoryIndex = (props) => {
const { categoryOptions } = props
return (
<div {...props}>
<>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
@@ -209,7 +209,7 @@ const LayoutCategoryIndex = (props) => {
)
})}
</div>
</div>
</>
)
}
@@ -221,7 +221,7 @@ const LayoutCategoryIndex = (props) => {
const LayoutTagIndex = (props) => {
const { tagOptions } = props
return (
<div {...props}>
<>
<div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => {
@@ -236,7 +236,7 @@ const LayoutTagIndex = (props) => {
})}
</div>
</div>
</div>
</>
)
}

24
themes/simple/index.js
View File

@@ -120,9 +120,9 @@ const LayoutIndex = props => {
*/
const LayoutPostList = props => {
return (
<div {...props}>
<>
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</div>
</>
)
}
@@ -161,11 +161,11 @@ const LayoutSearch = props => {
const LayoutArchive = props => {
const { archivePosts } = props
return (
<div {...props}>
<>
<div className="mb-10 pb-20 md:py-12 p-3 min-h-screen w-full">
{Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
</div>
</div>
</>
)
}
@@ -179,7 +179,7 @@ const LayoutSlug = props => {
const { fullWidth } = useGlobal()
return (
<div {...props}>
<>
{lock && <ArticleLock validPassword={validPassword} />}
@@ -208,7 +208,7 @@ const LayoutSlug = props => {
</div>
</div>
</>
)
}
@@ -218,9 +218,9 @@ const LayoutSlug = props => {
* @returns
*/
const Layout404 = (props) => {
return <div {...props}>
return <>
404 Not found.
</div>
</>
}
/**
@@ -231,7 +231,7 @@ const Layout404 = (props) => {
const LayoutCategoryIndex = props => {
const { categoryOptions } = props
return (
<div {...props}>
<>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
@@ -248,7 +248,7 @@ const LayoutCategoryIndex = props => {
)
})}
</div>
</div>
</>
)
}
@@ -260,7 +260,7 @@ const LayoutCategoryIndex = props => {
const LayoutTagIndex = (props) => {
const { tagOptions } = props
return (
<div {...props}>
<>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => {
return (
@@ -276,7 +276,7 @@ const LayoutTagIndex = (props) => {
)
})}
</div>
</div>
</>
)
}