example主题支持fullwidth

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

themes/example/index.js

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

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

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