Magzine 样式微调

themes/magzine/components/ArticleInfo.js

@@ -14,7 +14,7 @@ export default function ArticleInfo(props) {
 
   return (
     <>
-      <div className='flex flex-col gap-y-4 py-4'>
+      <div className='flex flex-col gap-y-4 py-4 px-2 lg:px-0'>
         <div className='flex justify-center mr-2 items-center'>
           {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
             <CategoryItem category={post?.category} />

themes/magzine/components/Header.js

@@ -144,8 +144,8 @@ export default function Header(props) {
               {/* 桌面端顶部菜单 */}
               <div className='hidden md:flex items-center gap-x-3'>
                 {links &&
-                  links?.map(link => (
-                    <MenuItemDrop key={link?.id} link={link} />
+                  links?.map((link, index) => (
+                    <MenuItemDrop key={index} link={link} />
                   ))}
               </div>
             </div>

themes/magzine/components/PostGroupLates.js

@@ -1,66 +0,0 @@
-import LazyImage from '@/components/LazyImage'
-import { siteConfig } from '@/lib/config'
-import { useGlobal } from '@/lib/global'
-// import Image from 'next/image'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-
-/**
- * 最新文章列表
- * @param posts 所有文章数据
- * @param sliceCount 截取展示的数量 默认6
- * @constructor
- */
-const PostGroupLatest = props => {
-  const { latestPosts } = props
-  // 获取当前路径
-  const currentPath = useRouter().asPath
-  const { locale, siteInfo } = useGlobal()
-  if (!latestPosts) {
-    return <></>
-  }
-
-  return (
-    <>
-      <div className=' mb-2 px-1 flex flex-nowrap justify-between'>
-        <div className='font-bold text-lg'>{locale.COMMON.LATEST_POSTS}</div>
-      </div>
-      {latestPosts.map(post => {
-        const selected =
-          currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
-
-        const headerImage = post?.pageCoverThumbnail
-          ? post.pageCoverThumbnail
-          : siteInfo?.pageCover
-
-        return (
-          <Link
-            key={post.id}
-            title={post.title}
-            href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
-            passHref
-            className={'my-3 flex'}>
-            <div className='w-20 h-14 overflow-hidden relative'>
-              <LazyImage
-                src={`${headerImage}`}
-                className='object-cover w-full h-full'
-              />
-            </div>
-            <div
-              className={
-                (selected ? ' text-green-400 ' : 'dark:text-gray-400 ') +
-                ' text-sm overflow-x-hidden hover:text-green-600 px-2 duration-200 w-full rounded ' +
-                ' hover:text-green-400 cursor-pointer items-center flex'
-              }>
-              <div>
-                <div className='line-clamp-2 menu-link'>{post.title}</div>
-                <div className='text-gray-500'>{post.lastEditedDay}</div>
-              </div>
-            </div>
-          </Link>
-        )
-      })}
-    </>
-  )
-}
-export default PostGroupLatest

themes/magzine/components/PostGroupLatest.js

@@ -0,0 +1,71 @@
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+// import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 最新文章列表
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
+ * @constructor
+ */
+const PostGroupLatest = props => {
+  const { latestPosts } = props
+  // 获取当前路径
+  const currentPath = useRouter().asPath
+  const { locale, siteInfo } = useGlobal()
+  if (!latestPosts) {
+    return <></>
+  }
+
+  return (
+    <>
+      {/* 标题 */}
+      <div className=' mb-2 px-1 flex flex-nowrap justify-between'>
+        <div className='font-bold text-lg'>{locale.COMMON.LATEST_POSTS}</div>
+      </div>
+
+      {/* 文章列表 */}
+      <div className='grid grid-cols-1 lg:grid-cols-4'>
+        {latestPosts.map(post => {
+          const selected =
+            currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+          const headerImage = post?.pageCoverThumbnail
+            ? post.pageCoverThumbnail
+            : siteInfo?.pageCover
+
+          return (
+            <Link
+              key={post.id}
+              title={post.title}
+              href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
+              passHref
+              className={'my-3 flex'}>
+              <div className='w-20 h-14 overflow-hidden relative'>
+                <LazyImage
+                  src={`${headerImage}`}
+                  className='object-cover w-full h-full'
+                />
+              </div>
+              <div
+                className={
+                  (selected ? ' text-green-400 ' : 'dark:text-gray-400 ') +
+                  ' text-sm overflow-x-hidden hover:text-green-600 px-2 duration-200 w-full rounded ' +
+                  ' hover:text-green-400 cursor-pointer items-center flex'
+                }>
+                <div>
+                  <div className='line-clamp-2 menu-link'>{post.title}</div>
+                  <div className='text-gray-500'>{post.lastEditedDay}</div>
+                </div>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+export default PostGroupLatest

themes/magzine/components/PostListSimpleHorizontal.js

@@ -24,7 +24,7 @@ const PostSimpleListHorizontal = ({ title, href, posts }) => {
           </Link>
         </div>
         {/* 列表 */}
-        <ul className='flex flex-col lg:flex-row'>
+        <ul className='grid grid-cols-1 lg:grid-cols-4'>
           {posts?.map(p => {
             return <PostItemCardSimple key={p.id} post={p} />
           })}

themes/magzine/index.js

@@ -21,7 +21,7 @@ import Header from './components/Header'
 import Hero from './components/Hero'
 import PostBannerGroupByCategory from './components/PostBannerGroupByCategory'
 import PostGroupArchive from './components/PostGroupArchive'
-import PostGroupLatest from './components/PostGroupLates'
+import PostGroupLatest from './components/PostGroupLatest'
 import PostListPage from './components/PostListPage'
 import PostListRecommend from './components/PostListRecommend'
 import PostListScroll from './components/PostListScroll'
@@ -178,14 +178,14 @@ const LayoutSlug = props => {
 
             {/* 文章区块分为三列 */}
             <div className='grid grid-cols-1 lg:grid-cols-5 gap-8 py-12'>
-              <div className='h-full lg:col-span-1'>
+              <div className='h-full lg:col-span-1 hidden lg:contents'>
                 <Catalog toc={post?.toc} className='sticky top-20' />
               </div>
 
               {/* Notion文章主体 */}
               <article
                 id='article-wrapper'
-                className='max-w-3xl lg:col-span-3 w-full mx-auto'>
+                className='max-w-3xl lg:col-span-3 w-full mx-auto px-2 lg:px-0'>
                 <NotionPage post={post} />
 
                 {/* 文章底部区域  */}
@@ -210,7 +210,7 @@ const LayoutSlug = props => {
                 </section>
               </article>
 
-              <div className='lg:col-span-1 flex flex-col justify-between'>
+              <div className='lg:col-span-1 flex flex-col justify-between px-2 lg:px-0 space-y-2 lg:space-y-0'>
                 {/* meta信息 */}
                 <section className='text-lg gap-y-6 '>
                   <div className='text-gray-500 py-1 dark:text-gray-600'>