diff --git a/lib/global.js b/lib/global.js index 28b79be3..faecf989 100644 --- a/lib/global.js +++ b/lib/global.js @@ -12,7 +12,7 @@ const GlobalContext = createContext() * @constructor */ export function GlobalContextProvider(props) { - const { children, siteInfo, categoryOptions, tagOptions, NOTION_CONFIG } = props + const { post, children, siteInfo, categoryOptions, tagOptions, NOTION_CONFIG } = props const router = useRouter() const [lang, updateLang] = useState(NOTION_CONFIG?.LANG || LANG) // 默认语言 const [locale, updateLocale] = useState(generateLocaleDict(NOTION_CONFIG?.LANG || LANG)) // 默认语言 @@ -20,6 +20,9 @@ export function GlobalContextProvider(props) { const [isDarkMode, updateDarkMode] = useState(NOTION_CONFIG?.APPEARANCE || APPEARANCE === 'dark') // 默认深色模式 const [onLoading, setOnLoading] = useState(false) // 抓取文章数据 + // 是否全屏 + const fullWidth = post?.fullWidth ?? false + // 切换主题 function switchTheme() { const currentIndex = THEMES.indexOf(theme) @@ -82,6 +85,7 @@ export function GlobalContextProvider(props) { return ( { const { children, slotTop, meta } = props - const { onLoading } = useGlobal() + const { onLoading, fullWidth } = useGlobal() // 增加一个状态以触发 Transition 组件的动画 // const [showTransition, setShowTransition] = useState(true) @@ -65,12 +65,12 @@ const LayoutBase = props => {
{/* 标题栏 */} - + {fullWidth ? null : <Title {...props} />} <div id='container-wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}> {/* 内容 */} - <div className='w-full max-w-3xl xl:px-14 lg:px-4 '> + <div className={`w-full ${fullWidth ? '' : 'max-w-3xl'} xl:px-14 lg:px-4`}> <Transition show={!onLoading} appear={true} @@ -89,7 +89,7 @@ const LayoutBase = props => { </div> {/* 侧边栏 */} - <SideBar {...props} /> + {!fullWidth && <SideBar {...props} />} </div> diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js index 31294304..1b9076a4 100644 --- a/themes/fukasawa/components/ArticleDetail.js +++ b/themes/fukasawa/components/ArticleDetail.js @@ -17,13 +17,13 @@ import WWAds from '@/components/WWAds' */ export default function ArticleDetail(props) { const { post, prev, next } = props - const { locale } = useGlobal() + const { locale, fullWidth } = useGlobal() if (!post) { return <></> } return ( - <div id="container" className="max-w-5xl overflow-x-auto flex-grow mx-auto w-screen md:w-full "> + <div id="container" className={`${fullWidth ? 'px-10' : 'max-w-5xl '} overflow-x-auto flex-grow mx-auto w-screen md:w-full`}> {post?.type && !post?.type !== 'Page' && post?.pageCover && ( <div className="w-full relative md:flex-shrink-0 overflow-hidden"> <LazyImage alt={post.title} src={post?.pageCover} className='object-center w-full' /> diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js index 3786c20d..bf41b1a6 100644 --- a/themes/fukasawa/index.js +++ b/themes/fukasawa/index.js @@ -46,9 +46,9 @@ export const useFukasawaGlobal = () => useContext(ThemeGlobalFukasawa) const LayoutBase = (props) => { const { children, headerSlot, meta } = props const leftAreaSlot = <Live2D /> - const { onLoading } = useGlobal() + const { onLoading, fullWidth } = useGlobal() - const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT = siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG) + const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT = fullWidth || siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG) // 侧边栏折叠从 本地存储中获取 open 状态的初始值 const [isCollapsed, setIsCollapse] = useState(() => { @@ -80,7 +80,7 @@ const LayoutBase = (props) => { <AsideLeft {...props} slot={leftAreaSlot} /> <main id='wrapper' className='relative flex w-full py-8 justify-center bg-day dark:bg-night'> - <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'> + <div id='container-inner' className={`${fullWidth ? '' : '2xl:max-w-6xl md:max-w-4xl'} w-full relative z-10`}> <Transition show={!onLoading} appear={true} diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js index 2e42b314..4743199c 100644 --- a/themes/gitbook/index.js +++ b/themes/gitbook/index.js @@ -49,7 +49,7 @@ export const useGitBookGlobal = () => useContext(ThemeGlobalGitbook) */ const LayoutBase = (props) => { const { children, post, allNavPages, slotLeft, slotRight, slotTop, meta } = props - const { onLoading } = useGlobal() + const { onLoading, fullWidth } = useGlobal() const router = useRouter() const [tocVisible, changeTocVisible] = useState(false) const [pageNavVisible, changePageNavVisible] = useState(false) @@ -73,7 +73,9 @@ const LayoutBase = (props) => { <main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}> {/* 左侧推拉抽屉 */} - <div className={'font-sans hidden md:block border-r dark:border-transparent relative z-10 '}> + {fullWidth + ? null + : (<div className={'font-sans hidden md:block border-r dark:border-transparent relative z-10 '}> <div className='w-72 py-14 px-6 sticky top-0 overflow-y-scroll h-screen scroll-hidden'> {slotLeft} <SearchInput className='my-3 rounded-md' /> @@ -87,11 +89,11 @@ const LayoutBase = (props) => { <div className='w-72 fixed left-0 bottom-0 z-20 bg-white'> <Footer {...props} /> </div> - </div> + </div>) } <div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen'> - <div id='container-inner' className='w-full px-7 max-w-3xl justify-center mx-auto'> + <div id='container-inner' className={`w-full px-7 ${fullWidth ? 'px-10' : 'max-w-3xl'} justify-center mx-auto`}> {slotTop} <WWAds className='w-full' orientation='horizontal'/> @@ -124,27 +126,29 @@ const LayoutBase = (props) => { </div> {/* 右侧侧推拉抽屉 */} - <div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}> - <div className='py-14 px-6 sticky top-0'> - <ArticleInfo post={props?.post ? props?.post : props.notice} /> + {fullWidth + ? null + : <div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}> + <div className='py-14 px-6 sticky top-0'> + <ArticleInfo post={props?.post ? props?.post : props.notice} /> - <div className='py-4'> - <Catalog {...props} /> - {slotRight} - {router.route === '/' && <> - <InfoCard {...props} /> - {siteConfig('GITBOOK_WIDGET_REVOLVER_MAPS', null, CONFIG) === 'true' && <RevolverMaps />} - <Live2D /> - </>} - {/* gitbook主题首页只显示公告 */} - <Announcement {...props} /> - </div> + <div className='py-4'> + <Catalog {...props} /> + {slotRight} + {router.route === '/' && <> + <InfoCard {...props} /> + {siteConfig('GITBOOK_WIDGET_REVOLVER_MAPS', null, CONFIG) === 'true' && <RevolverMaps />} + <Live2D /> + </>} + {/* gitbook主题首页只显示公告 */} + <Announcement {...props} /> + </div> - <AdSlot type='in-article' /> - <Live2D /> + <AdSlot type='in-article' /> + <Live2D /> - </div> - </div> + </div> + </div>} </main> diff --git a/themes/heo/index.js b/themes/heo/index.js index 4d289924..d127a021 100644 --- a/themes/heo/index.js +++ b/themes/heo/index.js @@ -57,6 +57,10 @@ const LayoutBase = props => { meta } = props + // 全屏模式下的最大宽度 + const { fullWidth } = useGlobal() + const maxWidth = fullWidth ? 'max-w-[96rem] mx-auto' : 'max-w-[86rem]' // 普通最大宽度是86rem和顶部菜单栏对齐，留空则与窗口对齐 + return ( <div id="theme-heo" @@ -72,7 +76,7 @@ const LayoutBase = props => { {/* 主区块 */} <main id="wrapper-outer" - className={'flex-grow w-full max-w-[86rem] mx-auto relative md:px-5'} + className={`flex-grow w-full ${maxWidth} mx-auto relative md:px-5`} > <div id="container-inner" @@ -131,10 +135,10 @@ const LayoutIndex = props => { <CategoryBar {...props} /> {siteConfig('POST_LIST_STYLE') === 'page' ? ( - <BlogPostListPage {...props} /> + <BlogPostListPage {...props} /> ) : ( - <BlogPostListScroll {...props} /> + <BlogPostListScroll {...props} /> )} </div> </LayoutBase> @@ -165,10 +169,10 @@ const LayoutPostList = props => { <CategoryBar {...props} /> {siteConfig('POST_LIST_STYLE') === 'page' ? ( - <BlogPostListPage {...props} /> + <BlogPostListPage {...props} /> ) : ( - <BlogPostListScroll {...props} /> + <BlogPostListScroll {...props} /> )} </div> </LayoutBase> @@ -218,18 +222,18 @@ const LayoutSearch = props => { <div id="post-outer-wrapper" className="px-5 md:px-0"> {!currentSearch ? ( - <SearchNav {...props} /> + <SearchNav {...props} /> ) : ( - <div id="posts-wrapper"> - {siteConfig('POST_LIST_STYLE') === 'page' - ? ( - <BlogPostListPage {...props} /> - ) - : ( - <BlogPostListScroll {...props} /> - )} - </div> + <div id="posts-wrapper"> + {siteConfig('POST_LIST_STYLE') === 'page' + ? ( + <BlogPostListPage {...props} /> + ) + : ( + <BlogPostListScroll {...props} /> + )} + </div> )} </div> </LayoutBase> @@ -284,7 +288,7 @@ const LayoutArchive = props => { */ const LayoutSlug = props => { const { post, lock, validPassword } = props - const { locale } = useGlobal() + const { locale, fullWidth } = useGlobal() const [hasCode, setHasCode] = useState(false) @@ -294,7 +298,7 @@ const LayoutSlug = props => { }, []) // 右侧栏 - const slotRight = <SideRight {...props} /> + const slotRight = fullWidth ? null : <SideRight {...props} /> const headerSlot = ( <header data-aos="fade-up" @@ -307,12 +311,12 @@ const LayoutSlug = props => { <div id="nav-bar-wrapper"> <NavBar {...props} /> </div> - <PostHeader {...props} /> + {fullWidth ? null : <PostHeader {...props} />} </header> ) const commentEnable = siteConfig('COMMENT_TWIKOO_ENV_ID') || siteConfig('COMMENT_WALINE_SERVER_URL') || siteConfig('COMMENT_VALINE_APP_ID') || - siteConfig('COMMENT_GISCUS_REPO') || siteConfig('COMMENT_CUSDIS_APP_ID') || siteConfig('COMMENT_UTTERRANCES_REPO') || - siteConfig('COMMENT_GITALK_CLIENT_ID') || siteConfig('COMMENT_WEBMENTION_ENABLE') + siteConfig('COMMENT_GISCUS_REPO') || siteConfig('COMMENT_CUSDIS_APP_ID') || siteConfig('COMMENT_UTTERRANCES_REPO') || + siteConfig('COMMENT_GITALK_CLIENT_ID') || siteConfig('COMMENT_WEBMENTION_ENABLE') return ( <LayoutBase @@ -322,7 +326,7 @@ const LayoutSlug = props => { showTag={false} slotRight={slotRight} > - <div className={`w-full xl:max-w-5xl ${hasCode ? 'xl:w-[73.15vw]' : ''} lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article`}> + <div className={`w-full ${fullWidth ? '' : 'xl:max-w-5xl'} ${hasCode ? 'xl:w-[73.15vw]' : ''} lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article`}> {lock && <ArticleLock validPassword={validPassword} />} {!lock && ( @@ -360,21 +364,23 @@ const LayoutSlug = props => { )} </article> - <div className={`${commentEnable && post ? '' : 'hidden'}`}> - <hr className="my-4 border-dashed" /> + {fullWidth + ? null + : <div className={`${commentEnable && post ? '' : 'hidden'}`}> + <hr className="my-4 border-dashed" /> - {/* 评论互动 */} - <div className="duration-200 overflow-x-auto px-5"> - <div className="text-2xl dark:text-white"> - <i className="fas fa-comment mr-1" /> - {locale.COMMON.COMMENTS} + {/* 评论互动 */} + <div className="duration-200 overflow-x-auto px-5"> + <div className="text-2xl dark:text-white"> + <i className="fas fa-comment mr-1" /> + {locale.COMMON.COMMENTS} + </div> + <Comment frontMatter={post} className="" /> + <div className="py-2"> + <AdSlot /> + </div> </div> - <Comment frontMatter={post} className="" /> - <div className="py-2"> - <AdSlot /> - </div> - </div> - </div> + </div>} </div> )} </div> @@ -390,7 +396,7 @@ const LayoutSlug = props => { */ const Layout404 = props => { const { meta, siteInfo } = props - const { onLoading } = useGlobal() + const { onLoading, fullWidth } = useGlobal() return ( <div id="theme-heo" @@ -411,7 +417,7 @@ const Layout404 = props => { {/* 主区块 */} <main id="wrapper-outer" - className={'flex-grow max-w-4xl w-screen mx-auto px-5'} + className={`flex-grow ${fullWidth ? '' : 'max-w-4xl'} w-screen mx-auto px-5`} > <div id="error-wrapper" className={'w-full mx-auto justify-center'}> <Transition diff --git a/themes/hexo/components/PostHeader.js b/themes/hexo/components/PostHeader.js index 8a69b9ef..9266f181 100644 --- a/themes/hexo/components/PostHeader.js +++ b/themes/hexo/components/PostHeader.js @@ -7,11 +7,17 @@ import { formatDateFmt } from '@/lib/formatDate' import { siteConfig } from '@/lib/config' export default function PostHeader({ post, siteInfo }) { - const { locale } = useGlobal() + const { locale, fullWidth } = useGlobal() if (!post) { return <></> } + + // 文章全屏隐藏标头 + if (fullWidth) { + return <div className='my-8'/> + } + const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover return ( diff --git a/themes/hexo/components/SideRight.js b/themes/hexo/components/SideRight.js index c5600eb4..497a7b2f 100644 --- a/themes/hexo/components/SideRight.js +++ b/themes/hexo/components/SideRight.js @@ -38,6 +38,12 @@ export default function SideRight(props) { } = props const { locale } = useGlobal() + + // 文章全屏处理 + if (post && post?.fullWidth) { + return null + } + return ( <div id='sideRight' className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}> <InfoCard {...props} /> diff --git a/themes/hexo/index.js b/themes/hexo/index.js index 7e770dc5..4fa0dd62 100644 --- a/themes/hexo/index.js +++ b/themes/hexo/index.js @@ -41,7 +41,7 @@ import { siteConfig } from '@/lib/config' */ const LayoutBase = props => { const { children, headerSlot, floatSlot, slotTop, meta, className } = props - const { onLoading } = useGlobal() + const { onLoading, fullWidth } = useGlobal() return ( <div id='theme-hexo'> @@ -70,7 +70,7 @@ const LayoutBase = props => { {/* 主区块 */} <main id="wrapper" className={`${siteConfig('HEXO_HOME_BANNER_ENABLE', null, CONFIG) ? '' : 'pt-16'} bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative`}> <div id="container-inner" className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} > - <div className={`${className || ''} w-full max-w-4xl h-full overflow-hidden`}> + <div className={`${className || ''} w-full ${fullWidth ? '' : 'max-w-4xl'} h-full overflow-hidden`}> <Transition show={!onLoading} diff --git a/themes/matery/index.js b/themes/matery/index.js index eee59b53..6ecb7dbf 100644 --- a/themes/matery/index.js +++ b/themes/matery/index.js @@ -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> diff --git a/themes/medium/index.js b/themes/medium/index.js index fbbbfde5..433ed80b 100644 --- a/themes/medium/index.js +++ b/themes/medium/index.js @@ -51,14 +51,14 @@ const LayoutBase = props => { const { locale } = useGlobal() const router = useRouter() const [tocVisible, changeTocVisible] = useState(false) - const { onLoading } = useGlobal() + const { onLoading, fullWidth } = useGlobal() return ( <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}> {/* SEO相关 */} - <CommonHead meta={meta}/> + <CommonHead meta={meta} /> {/* CSS样式 */} - <Style/> + <Style /> <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'> @@ -72,7 +72,7 @@ const LayoutBase = props => { {/* 顶部导航栏 */} <TopNavBar {...props} /> - <div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'> + <div id='container-inner' className={`px-7 ${fullWidth ? '' : 'max-w-5xl'} justify-center mx-auto min-h-screen`}> <Transition show={!onLoading} appear={true} @@ -96,20 +96,23 @@ const LayoutBase = props => { </div> {/* 桌面端右侧 */} - <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${siteConfig('MEDIUM_RIGHT_PANEL_DARK', null, CONFIG) ? 'bg-hexo-black-gray dark' : ''}`}> - <div className='py-14 px-6 sticky top-0'> - <Tabs> - {slotRight} - <div key={locale.NAV.ABOUT}> - {router.pathname !== '/search' && <SearchInput className='mt-6 mb-12' />} - {showInfoCard && <InfoCard {...props} />} - {siteConfig('MEDIUM_WIDGET_REVOLVER_MAPS', null, CONFIG) === 'true' && <RevolverMaps />} - </div> - </Tabs> - <Announcement post={notice} /> - <Live2D /> - </div> - </div> + {fullWidth + ? null + : <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${siteConfig('MEDIUM_RIGHT_PANEL_DARK', null, CONFIG) ? 'bg-hexo-black-gray dark' : ''}`}> + <div className='py-14 px-6 sticky top-0'> + <Tabs> + {slotRight} + <div key={locale.NAV.ABOUT}> + {router.pathname !== '/search' && <SearchInput className='mt-6 mb-12' />} + {showInfoCard && <InfoCard {...props} />} + {siteConfig('MEDIUM_WIDGET_REVOLVER_MAPS', null, CONFIG) === 'true' && <RevolverMaps />} + </div> + </Tabs> + <Announcement post={notice} /> + <Live2D /> + </div> + </div>} + </main> {/* 移动端底部导航栏 */} @@ -162,7 +165,7 @@ const LayoutSlug = props => { {!lock && <div id='article-wrapper'> {/* 文章信息 */} - <ArticleInfo {...props}/> + <ArticleInfo {...props} /> {/* Notion文章主体 */} <section className="px-1 max-w-4xl"> diff --git a/themes/simple/index.js b/themes/simple/index.js index 8295d621..7aab376c 100644 --- a/themes/simple/index.js +++ b/themes/simple/index.js @@ -39,7 +39,7 @@ const BlogListPage = dynamic(() => import('./components/BlogListPage'), { ssr: f */ const LayoutBase = props => { const { children, slotTop, meta } = props - const { onLoading } = useGlobal() + const { onLoading, fullWidth } = useGlobal() return ( <div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300 bg-white dark:bg-black'> @@ -76,9 +76,11 @@ const LayoutBase = props => { <AdSlot type='native' /> </div> - <div id='right-sidebar' className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100"> - <SideBar {...props} /> - </div> + {fullWidth + ? null + : <div id='right-sidebar' className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100"> + <SideBar {...props} /> + </div>} </div> @@ -162,13 +164,14 @@ const LayoutArchive = props => { */ const LayoutSlug = props => { const { post, lock, validPassword, prev, next } = props + const { fullWidth } = useGlobal() return ( <LayoutBase {...props}> {lock && <ArticleLock validPassword={validPassword} />} - <div id="article-wrapper" className="px-2 xl:max-w-4xl 2xl:max-w-6xl "> + <div id="article-wrapper" className={`px-2 ${fullWidth ? '' : 'xl:max-w-4xl 2xl:max-w-6xl'}`}> {/* 文章信息 */} <ArticleInfo post={post} />