Matery支持FullWidth

This commit is contained in:
tangly1024
2023-12-30 17:54:57 +08:00
parent 4acc459c08
commit bb86edd3ba

View File

@@ -41,7 +41,7 @@ import { siteConfig } from '@/lib/config'
*/
const LayoutBase = props => {
const { children, headerSlot, meta, siteInfo, containerSlot, post } = props
const { onLoading } = useGlobal()
const { onLoading, fullWidth } = useGlobal()
return (
<div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
@@ -69,11 +69,11 @@ const LayoutBase = props => {
<main id="wrapper" className={`${siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) ? '' : 'pt-16'} flex-1 w-full py-8 md:px-8 lg:px-24 relative`}>
{/* 嵌入区域 */}
<div id="container-slot" className={`w-full max-w-6xl ${post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
<div id="container-slot" className={`w-full ${fullWidth ? '' : 'max-w-6xl'} ${post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
{containerSlot}
</div>
<div id="container-inner" className="w-full min-h-fit max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center relative z-10">
<div id="container-inner" className={`w-full min-h-fit ${fullWidth ? '' : 'max-w-6xl'} mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
<Transition
show={!onLoading}
appear={true}
@@ -191,13 +191,15 @@ const LayoutArchive = (props) => {
*/
const LayoutSlug = props => {
const { post, lock, validPassword } = props
const { fullWidth } = useGlobal()
const headerSlot = fullWidth ? null : <PostHeader {...props} />
return (<LayoutBase {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} floatRightBottom={<JumpToCommentButton />}>
return (<LayoutBase {...props} headerSlot={headerSlot} showCategory={false} showTag={false} floatRightBottom={<JumpToCommentButton />}>
<div id='inner-wrapper' className={'w-full lg:max-w-3xl 2xl:max-w-4xl'} >
<div id='inner-wrapper' className={`w-full ${fullWidth ? '' : 'lg:max-w-3xl 2xl:max-w-4xl'}`} >
{/* 文章主体卡片 */}
<div className="-mt-32 transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
<div className={`${fullWidth ? '' : '-mt-32'} transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black`}>
{lock && <ArticleLock validPassword={validPassword} />}
@@ -221,7 +223,7 @@ const LayoutSlug = props => {
<article itemScope >
{/* Notion文章主体 */}
<section className='justify-center mx-auto max-w-2xl lg:max-w-full'>
<section className={`justify-center mx-auto ${fullWidth ? '' : 'max-w-2xl lg:max-w-full'}`}>
{post && <NotionPage post={post} />}
</section>