Merge pull request tangly1024#1737 from tangly1024/feat/fullwidth-sup…

…port Feat/fullwidth support 页面支持全屏布局
Hurtblack · Dec 30, 2023 · 82dea16 · 82dea16
2 parents b970182 + bf58b73
commit 82dea16
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 107 deletions.
diff --git a/lib/global.js b/lib/global.js
@@ -12,14 +12,17 @@ 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)) // 默认语言
   const [theme, setTheme] = useState(NOTION_CONFIG?.THEME || THEME) // 默认博客主题
   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,

diff --git a/lib/notion/getNotion.js b/lib/notion/getNotion.js
@@ -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

diff --git a/themes/example/index.js b/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>
 

diff --git 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
@@ -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
@@ -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} />
-
-                            <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 />
-
-                        </div>
-                    </div>
+                    {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>
+
+                          <AdSlot type='in-article' />
+                          <Live2D />
+
+                      </div>
+                  </div>}
 
                 </main>
 

diff --git 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>
-                <Comment frontMatter={post} className="" />
-                <div className="py-2">
-                  <AdSlot />
+                {/* 评论互动 */}
+                <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>
-              </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
@@ -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 (