Magzine 布局微调

tailwind.config.js

@@ -2,7 +2,12 @@ const BLOG = require('./blog.config')
 const { fontFamilies } = require('./lib/font')
 
 module.exports = {
-  content: ['./pages/**/*.js', './components/**/*.js', './layouts/**/*.js', './themes/**/*.js'],
+  content: [
+    './pages/**/*.js',
+    './components/**/*.js',
+    './layouts/**/*.js',
+    './themes/**/*.js'
+  ],
   darkMode: BLOG.APPEARANCE === 'class' ? 'media' : 'class', // or 'media' or 'class'
   theme: {
     fontFamily: fontFamilies,
@@ -19,8 +24,9 @@ module.exports = {
       xl: '1140px',
       // => @media (min-width: 1200px) { ... }
 
-      '2xl': '1320px'
+      '2xl': '1320px',
       // => @media (min-width: 1400px) { ... }
+      '3xl': '1920px'
     },
     container: {
       center: true,
@@ -64,7 +70,8 @@ module.exports = {
       },
       maxWidth: {
         side: '14rem',
-        '9/10': '90%'
+        '9/10': '90%',
+        'screen-3xl': '1440px'
       },
       boxShadow: {
         input: '0px 7px 20px rgba(0, 0, 0, 0.03)',

themes/magzine/components/Footer.js

@@ -19,7 +19,7 @@ const Footer = ({ title }) => {
 
   return (
     <footer className='z-10 bg-black text-white justify-center m-auto w-full p-6 relative'>
-      <div className='max-w-screen-2xl w-full mx-auto '>
+      <div className='max-w-screen-3xl w-full mx-auto '>
         {/* 信息与链接区块 */}
         <div className='w-full flex lg:flex-row flex-col justify-between py-16'>
           <div className='gap-x-2 py-6 flex items-center'>

themes/magzine/components/Header.js

@@ -121,7 +121,7 @@ export default function Header(props) {
       {/* 导航栏菜单内容 */}
       <div
         id='top-navbar'
-        className='px-4 lg:px-0 flex w-full mx-auto max-w-screen-2xl h-20 transition-all duration-200 items-center justify-between'>
+        className='px-4 lg:px-0 flex w-full mx-auto max-w-screen-3xl h-20 transition-all duration-200 items-center justify-between'>
         {/* 搜索栏 */}
         {showSearchInput && (
           <input

themes/magzine/components/Hero.js

@@ -15,21 +15,21 @@ const Hero = ({ posts }) => {
   const post2 = posts[2]
   return (
     <>
-      <div className='w-full mx-auto max-w-screen-2xl  xl:flex justify-between'>
+      <div className='w-full mx-auto max-w-screen-3xl xl:flex justify-between gap-10'>
         {/* 左侧一篇主要置顶文章 */}
         <div className='basis-1/2 mb-6 px-2 lg:px-5'>
           <PostItemCardTop post={postTop} />
         </div>
         {/* 右侧 */}
-        <div>
+        <div className='basis-1/2 flex flex-col gap-y-4'>
-          {/* 首屏介绍 */}
+          {/* 首屏宣传小Banner */}
           <BannerItem />
 
           {/* 两篇次要文章 */}
-          <div className='py-4 px-2 lg:px-5'>
+          <div className='py-4 px-2 lg:px-0 flex flex-col gap-y-6'>
-            <hr className='mb-8' />
+            <hr />
             <PostItemCardWide post={post1} />
-            <hr className='mb-8' />
+            <hr />
             <PostItemCardWide post={post2} />
           </div>
         </div>

themes/magzine/components/PostItemCard.js

@@ -14,7 +14,7 @@ const PostItemCard = ({ post }) => {
   const { siteInfo } = useGlobal()
   const cover = post?.pageCoverThumbnail || siteInfo?.pageCover
   return (
-    <div key={post.id} className='mb-6 max-w-screen-2xl'>
+    <div key={post.id} className='mb-6 max-w-screen-3xl'>
       <div className='flex flex-col space-y-3'>
         {siteConfig('MAGZINE_POST_LIST_COVER') && (
           <Link

themes/magzine/components/PostItemCardSimple.js

@@ -12,7 +12,7 @@ const PostItemCardSimple = ({ post, showSummary }) => {
   return (
     <div
       key={post.id}
-      className='lg:mb-6 max-w-screen-2xl border-t border-gray-300 mr-8 py-2 gap-y-3 flex flex-col dark:border-gray-800 '>
+      className='lg:mb-6 max-w-screen-3xl border-t border-gray-300 mr-8 py-2 gap-y-3 flex flex-col dark:border-gray-800 '>
       <div className='flex mr-2 items-center'>
         {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
           <CategoryItem category={post.category} />

themes/magzine/components/PostItemCardTop.js

@@ -22,7 +22,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
       data-aos-duration='300'
       data-aos-once='false'
       data-aos-anchor-placement='top-bottom'
-      className='mb-6 max-w-screen-2xl '>
+      className='mb-6 max-w-screen-3xl '>
       <div className='flex flex-col w-full'>
         {siteConfig('MAGZINE_POST_LIST_COVER') && (
           <Link

themes/magzine/components/PostItemCardWide.js

@@ -5,7 +5,6 @@ import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import CategoryItem from './CategoryItem'
-import TagItemMini from './TagItemMini'
 
 /**
  * 水平左右布局的博客卡片
@@ -16,9 +15,12 @@ const PostItemCardWide = ({ post, showSummary }) => {
   const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post.blockMap
   const { locale } = useGlobal()
   return (
-    <div key={post.id} className='flex justify-between space-x-6 mb-6 '>
+    <div key={post.id} className='flex justify-between gap-x-6'>
       {/* 卡牌左侧 */}
-      <div className='h-40 w-96'>
+      <div className='h-40 w-96 gap-y-3 flex flex-col'>
+        {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+          <CategoryItem category={post.category} />
+        )}
         <Link
           href={post?.href}
           passHref
@@ -34,7 +36,7 @@ const PostItemCardWide = ({ post, showSummary }) => {
         </Link>
 
         {(!showPreview || showSummary) && (
-          <main className='my-4 line-clamp-2 text-gray-900 dark:text-gray-300 text-sm'>
+          <main className='line-clamp-2 text-gray-900 dark:text-gray-300 text-sm'>
             {post.summary}
           </main>
         )}
@@ -58,15 +60,12 @@ const PostItemCardWide = ({ post, showSummary }) => {
 
         <div
           className={
-            'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
+            'flex items-center justify-start flex-wrap space-x-3 text-gray-400'
           }>
-          {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+          {/* {siteConfig('MAGZINE_POST_LIST_TAG') &&
-            <CategoryItem category={post.category} />
-          )}
-          {siteConfig('MAGZINE_POST_LIST_TAG') &&
             post?.tagItems?.map(tag => (
               <TagItemMini key={tag.name} tag={tag} />
-            ))}
+            ))} */}
           <div className='text-sm py-1'>{post.date?.start_date}</div>
         </div>
       </div>

themes/magzine/components/PostListHorizontal.js

@@ -18,12 +18,14 @@ const PostListHorizontal = ({ title, href, posts, hasBg }) => {
   return (
     <div
       className={`w-full py-10 px-2 lg:px-0 ${hasBg ? 'bg-[#F6F6F1] dark:bg-black' : ''}`}>
-      <div className='max-w-screen-2xl w-full mx-auto'>
+      <div className='max-w-screen-3xl w-full mx-auto'>
         {/* 标题 */}
         <div className='flex justify-between items-center py-6'>
           <h3 className='text-2xl'>{title}</h3>
           {href && (
-            <Link className='hidden lg:block text-lg underline' href={href}>
+            <Link
+              className='hidden font-bold lg:block text-lg underline'
+              href={href}>
               <span>查看全部</span>
               <i className='ml-2 fas fa-arrow-right' />
             </Link>

themes/magzine/components/PostListRecommend.js

@@ -20,7 +20,7 @@ const PostListRecommend = ({ latestPosts, allNavPages }) => {
 
   return (
     <div className={`w-full py-10 px-2 bg-[#F6F6F1] dark:bg-black`}>
-      <div className='max-w-screen-2xl w-full mx-auto'>
+      <div className='max-w-screen-3xl w-full mx-auto'>
         {/* 标题 */}
         <div className='flex justify-between items-center py-6'>
           <h3 className='text-4xl font-bold'>{title}</h3>

themes/magzine/components/PostListSimpleHorizontal.js

@@ -14,14 +14,18 @@ const PostSimpleListHorizontal = ({ title, href, posts }) => {
 
   return (
     <div className='w-full py-10 bg-[#F6F6F1] dark:bg-black'>
-      <div className='max-w-screen-2xl w-full mx-auto px-2'>
+      <div className='max-w-screen-3xl w-full mx-auto px-4 lg:px-0'>
         {/* 标题 */}
         <div className='flex justify-between items-center py-6'>
           <h3 className='text-2xl'>{title}</h3>
-          <Link className='text-lg underline' href={href}>
+          {href && (
-            <span>查看全部</span>
+            <Link
-            <i className='ml-2 fas fa-arrow-right' />
+              className='hidden font-bold lg:block text-lg underline'
-          </Link>
+              href={href}>
+              <span>查看全部</span>
+              <i className='ml-2 fas fa-arrow-right' />
+            </Link>
+          )}
         </div>
         {/* 列表 */}
         <ul className='grid grid-cols-1 lg:grid-cols-4'>
@@ -29,6 +33,12 @@ const PostSimpleListHorizontal = ({ title, href, posts }) => {
             return <PostItemCardSimple key={p.id} post={p} />
           })}
         </ul>
+        {href && (
+          <Link className='lg:hidden block text-lg underline' href={href}>
+            <span>查看全部</span>
+            <i className='ml-2 fas fa-arrow-right' />
+          </Link>
+        )}
       </div>
     </div>
   )

themes/magzine/index.js

@@ -128,7 +128,7 @@ const LayoutPostList = props => {
   const { category, tag } = props
 
   return (
-    <div className=' max-w-screen-2xl mx-auto w-full px-2 lg:px-0'>
+    <div className=' max-w-screen-3xl mx-auto w-full px-2 lg:px-0'>
       {/* 一个顶部条 */}
       <h2 className='py-8 text-2xl font-bold'>{category || tag}</h2>
 
@@ -172,12 +172,12 @@ const LayoutSlug = props => {
 
   return (
     <>
-      <div {...props} className='w-full mx-auto max-w-screen-2xl'>
+      <div {...props} className='w-full mx-auto max-w-screen-3xl'>
         {/* 文章锁 */}
         {lock && <ArticleLock validPassword={validPassword} />}
 
         {!lock && (
-          <div className='w-full max-w-screen-2xl mx-auto'>
+          <div className='w-full max-w-screen-3xl mx-auto'>
             {/* 文章信息 */}
             <ArticleInfo {...props} />
 
@@ -298,7 +298,7 @@ const LayoutSearch = props => {
   }, [])
 
   return (
-    <div className='max-w-screen-2xl w-full mx-auto'>
+    <div className='max-w-screen-3xl w-full mx-auto'>
       {/* 搜索导航栏 */}
       <div className='py-12'>
         <div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
@@ -333,7 +333,7 @@ const LayoutArchive = props => {
   const { archivePosts } = props
   return (
     <>
-      <div className='w-full max-w-screen-2xl mx-auto mt-14 min-h-full'>
+      <div className='w-full max-w-screen-3xl mx-auto mt-14 min-h-full'>
         {Object.keys(archivePosts)?.map(archiveTitle => (
           <PostGroupArchive
             key={archiveTitle}
@@ -370,7 +370,7 @@ const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
   return (
-    <div className='w-full max-w-screen-2xl mx-auto min-h-96'>
+    <div className='w-full max-w-screen-3xl mx-auto min-h-96'>
       <div className='bg-white dark:bg-gray-700 py-10'>
         <div className='dark:text-gray-200 mb-5 text-2xl font-bold'>
           {/* <i className='mr-4 fas fa-th' /> */}
@@ -409,7 +409,7 @@ const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
   return (
-    <div className='w-full max-w-screen-2xl mx-auto min-h-96'>
+    <div className='w-full max-w-screen-3xl mx-auto min-h-96'>
       <div className='bg-white dark:bg-gray-700 py-10'>
         <div className='dark:text-gray-200 mb-5  text-2xl font-bold'>
           {/* <i className='mr-4 fas fa-tag' /> */}