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

Merge pull request #1737 from tangly1024/feat/fullwidth-support

Browse Source 
Feat/fullwidth support 页面支持全屏布局
This commit is contained in:
tangly1024
2023-12-30 18:09:53 +08:00
committed by GitHub
parent b970182403 bf58b739e0
commit 82dea161a0
13 changed files with 137 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/global.js
View File

@@ -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 (
<GlobalContext.Provider value={{
fullWidth,
NOTION_CONFIG,
toggleDarkMode,
onLoading,

3
lib/notion/getNotion.js
View File

@@ -16,7 +16,6 @@ export async function getNotion(pageId) {
}
const postInfo = blockMap?.block?.[idToUuid(pageId)].value
return {
id: pageId,
type: postInfo,
@@ -26,7 +25,7 @@ export async function getNotion(pageId) {
status: 'Published',
createdTime: formatDate(new Date(postInfo.created_time).toString(), BLOG.LANG),
lastEditedDay: formatDate(new Date(postInfo?.last_edited_time).toString(), BLOG.LANG),
fullWidth: false,
fullWidth: postInfo?.fullWidth,
page_cover: getPageCover(postInfo),
date: { start_date: formatDate(new Date(postInfo?.last_edited_time).toString(), BLOG.LANG) },
blockMap

8
themes/example/index.js
View File

@@ -37,7 +37,7 @@ import { siteConfig } from '@/lib/config'
*/
const LayoutBase = props => {
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 => {
<div id='container-inner' className="w-full relative z-10">
{/* 标题栏 */}
<Title {...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>

4
themes/fukasawa/components/ArticleDetail.js
View File

@@ -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' />

6
themes/fukasawa/index.js
View File

@@ -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}

48
themes/gitbook/index.js
View File

@@ -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>

78
themes/heo/index.js
View File

@@ -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

8
themes/hexo/components/PostHeader.js
View File

@@ -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 (

6
themes/hexo/components/SideRight.js
View File

@@ -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} />

4
themes/hexo/index.js
View File

@@ -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}

16
themes/matery/index.js
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>

41
themes/medium/index.js
View File

@@ -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">

13
themes/simple/index.js
View File

@@ -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} />