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] =?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