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/hexo/components/PostHeader.js b/themes/hexo/components/PostHeader.js index fb051e8f..9266f181 100644 --- a/themes/hexo/components/PostHeader.js +++ b/themes/hexo/components/PostHeader.js @@ -7,14 +7,14 @@ 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 (post.fullWidth) { + if (fullWidth) { return <div className='my-8'/> } diff --git a/themes/hexo/index.js b/themes/hexo/index.js index 4f8dbe92..4fa0dd62 100644 --- a/themes/hexo/index.js +++ b/themes/hexo/index.js @@ -40,9 +40,8 @@ import { siteConfig } from '@/lib/config' * @constructor */ const LayoutBase = props => { - const { post, children, headerSlot, floatSlot, slotTop, meta, className } = props - const { onLoading } = useGlobal() - const fullWidth = post?.fullWidth ?? false + const { children, headerSlot, floatSlot, slotTop, meta, className } = props + const { onLoading, fullWidth } = useGlobal() return ( <div id='theme-hexo'>