From b15d5f7c2ccf0ffe48448b3d1cd0a70927f5c85c Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 30 Dec 2023 17:19:21 +0800 Subject: [PATCH 01/10] =?UTF-8?q?hexo=20=E4=B8=BB=E9=A2=98=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=85=A8=E5=B1=8F=E6=96=87=E7=AB=A0=EF=BC=8C=E9=9A=90?= =?UTF-8?q?=E8=97=8F=E4=BE=A7=E8=BE=B9=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/notion/getNotion.js | 3 +-- themes/hexo/components/PostHeader.js | 6 ++++++ themes/hexo/components/SideRight.js | 6 ++++++ themes/hexo/index.js | 5 +++-- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/lib/notion/getNotion.js b/lib/notion/getNotion.js index 3da84ee8..aad65379 100644 --- 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/hexo/components/PostHeader.js b/themes/hexo/components/PostHeader.js index 8a69b9ef..fb051e8f 100644 --- a/themes/hexo/components/PostHeader.js +++ b/themes/hexo/components/PostHeader.js @@ -12,6 +12,12 @@ export default function PostHeader({ post, siteInfo }) { if (!post) { return <> } + + // 文章全屏隐藏标头 + if (post.fullWidth) { + return
+ } + 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 (
diff --git a/themes/hexo/index.js b/themes/hexo/index.js index 7e770dc5..4f8dbe92 100644 --- a/themes/hexo/index.js +++ b/themes/hexo/index.js @@ -40,8 +40,9 @@ import { siteConfig } from '@/lib/config' * @constructor */ const LayoutBase = props => { - const { children, headerSlot, floatSlot, slotTop, meta, className } = props + const { post, children, headerSlot, floatSlot, slotTop, meta, className } = props const { onLoading } = useGlobal() + const fullWidth = post?.fullWidth ?? false return (
@@ -70,7 +71,7 @@ const LayoutBase = props => { {/* 主区块 */}
-
+
Date: Sat, 30 Dec 2023 17:24:03 +0800 Subject: [PATCH 02/10] =?UTF-8?q?example=E4=B8=BB=E9=A2=98=E6=94=AF?= =?UTF-8?q?=E6=8C=81fullwidth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/global.js | 6 +++++- themes/example/index.js | 8 ++++---- themes/hexo/components/PostHeader.js | 4 ++-- themes/hexo/index.js | 5 ++--- 4 files changed, 13 insertions(+), 10 deletions(-) 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'> From f5e5957d2c2db54c52c174a88fbc5b0d04e78d23 Mon Sep 17 00:00:00 2001 From: tangly1024 <mail@tangly1024.com> Date: Sat, 30 Dec 2023 17:27:31 +0800 Subject: [PATCH 03/10] =?UTF-8?q?fukasawa=20=E6=94=AF=E6=8C=81fullwidth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/fukasawa/components/ArticleDetail.js | 4 ++-- themes/fukasawa/index.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) 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} From 3666ed48018d061a59f03b0183739585988bd998 Mon Sep 17 00:00:00 2001 From: tangly1024 <mail@tangly1024.com> Date: Sat, 30 Dec 2023 17:31:28 +0800 Subject: [PATCH 04/10] =?UTF-8?q?gitbook=E4=B8=BB=E9=A2=98=E6=94=AF?= =?UTF-8?q?=E6=8C=81fullwidth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/gitbook/index.js | 48 ++++++++++++++++++++++------------------- 1 file changed, 26 insertions(+), 22 deletions(-) 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> From 4b060740264725449cfaac9b7d68df69c41cad00 Mon Sep 17 00:00:00 2001 From: tangly1024 <mail@tangly1024.com> Date: Sat, 30 Dec 2023 17:36:51 +0800 Subject: [PATCH 05/10] =?UTF-8?q?heo=E4=B8=BB=E9=A2=98=E6=94=AF=E6=8C=81fu?= =?UTF-8?q?llwidth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/heo/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/themes/heo/index.js b/themes/heo/index.js index 4d289924..241c66ec 100644 --- a/themes/heo/index.js +++ b/themes/heo/index.js @@ -284,7 +284,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 +294,7 @@ const LayoutSlug = props => { }, []) // 右侧栏 - const slotRight = <SideRight {...props} /> + const slotRight = fullWidth ? null : <SideRight {...props} /> const headerSlot = ( <header data-aos="fade-up" @@ -307,7 +307,7 @@ 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') || @@ -322,7 +322,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 && ( From 4acc459c08633033e75e6eb1beea38e049f940d8 Mon Sep 17 00:00:00 2001 From: tangly1024 <mail@tangly1024.com> Date: Sat, 30 Dec 2023 17:49:51 +0800 Subject: [PATCH 06/10] =?UTF-8?q?heo=20=E6=94=AF=E6=8C=81fullWidth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/heo/index.js | 70 ++++++++++++++++++++++++--------------------- 1 file changed, 38 insertions(+), 32 deletions(-) diff --git a/themes/heo/index.js b/themes/heo/index.js index 241c66ec..91e8be07 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-[86rem]' : '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> @@ -311,8 +315,8 @@ const LayoutSlug = 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 @@ -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 From bb86edd3ba979c57f7a2414de0904f518afa3782 Mon Sep 17 00:00:00 2001 From: tangly1024 <mail@tangly1024.com> Date: Sat, 30 Dec 2023 17:54:57 +0800 Subject: [PATCH 07/10] =?UTF-8?q?Matery=E6=94=AF=E6=8C=81FullWidth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/matery/index.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) 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> From 49c1c60e10e1cbe7634c4ce9e04a55002d3f679e Mon Sep 17 00:00:00 2001 From: tangly1024 <mail@tangly1024.com> Date: Sat, 30 Dec 2023 17:56:41 +0800 Subject: [PATCH 08/10] =?UTF-8?q?medium=20=E6=94=AF=E6=8C=81fullwidth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/medium/index.js | 41 ++++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 19 deletions(-) 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"> From 915891fb250fd9a4d6d45d094cf661f6e0c1d030 Mon Sep 17 00:00:00 2001 From: tangly1024 <mail@tangly1024.com> Date: Sat, 30 Dec 2023 17:59:34 +0800 Subject: [PATCH 09/10] =?UTF-8?q?simple=20=E6=94=AF=E6=8C=81fullwidth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/simple/index.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) 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} /> From bf58b739e033c66c51e464fdcc7c5b85fc5402c8 Mon Sep 17 00:00:00 2001 From: tangly1024 <mail@tangly1024.com> Date: Sat, 30 Dec 2023 18:09:16 +0800 Subject: [PATCH 10/10] =?UTF-8?q?heo=20fullwidth=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/heo/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/heo/index.js b/themes/heo/index.js index 91e8be07..d127a021 100644 --- a/themes/heo/index.js +++ b/themes/heo/index.js @@ -59,7 +59,7 @@ const LayoutBase = props => { // 全屏模式下的最大宽度 const { fullWidth } = useGlobal() - const maxWidth = fullWidth ? 'max-w-[86rem]' : 'max-w-[86rem]' // 最大宽度都是86rem，和顶部菜单栏对齐，设置成空则与网页对齐 + const maxWidth = fullWidth ? 'max-w-[96rem] mx-auto' : 'max-w-[86rem]' // 普通最大宽度是86rem和顶部菜单栏对齐，留空则与窗口对齐 return ( <div