主题样式微调 Magzine和Next

wensley · Nov 13, 2024 · 1c654a5 · 1c654a5
1 parent 17ff870
commit 1c654a5
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 32 deletions.
diff --git a/themes/magzine/components/Header.js b/themes/magzine/components/Header.js
@@ -148,7 +148,7 @@ export default function Header(props) {
             <div className='flex gap-x-8 h-full'>
               <LogoBar {...props} />
               {/* 桌面端顶部菜单 */}
-              <div className='hidden md:flex items-center gap-x-4'>
+              <div className='hidden md:flex items-center gap-x-4 py-1'>
                 {links &&
                   links?.map((link, index) => (
                     <MenuItemDrop key={index} link={link} />

diff --git a/themes/magzine/components/MenuItemDrop.js b/themes/magzine/components/MenuItemDrop.js
@@ -22,7 +22,7 @@ export const MenuItemDrop = ({ link }) => {
       {hasSubMenu && (
         <div
           className={
-            'h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            'px-2 h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
             (selected
               ? 'bg-gray-600 text-white hover:text-white'
               : 'hover:text-gray-600')
@@ -52,7 +52,7 @@ export const MenuItemDrop = ({ link }) => {
       {/* 子菜单 */}
       {hasSubMenu && (
         <ul
-          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-10'} absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg p-4 `}>
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg p-4 `}>
           {link?.subMenus?.map(sLink => {
             return (
               <li

diff --git a/themes/magzine/components/PostItemCardTop.js b/themes/magzine/components/PostItemCardTop.js
@@ -13,11 +13,11 @@ import TagItemMini from './TagItemMini'
  * @returns
  */
 const PostItemCardTop = ({ post, showSummary }) => {
-  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post.blockMap
+  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post?.blockMap
   const { locale } = useGlobal()
   return (
     <div
-      key={post.id}
+      key={post?.id}
       // data-aos='fade-up'
       // data-aos-duration='300'
       // data-aos-once='false'
@@ -26,7 +26,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
       <div className='flex flex-col w-full'>
         {siteConfig('MAGZINE_POST_LIST_COVER') && post?.pageCoverThumbnail && (
           <Link
-            href={post?.href}
+            href={post?.href || ''}
             passHref
             className={
               'cursor-pointer hover:underline text-4xl leading-tight  dark:text-gray-300  dark:hover:text-gray-400'
@@ -35,8 +35,8 @@ const PostItemCardTop = ({ post, showSummary }) => {
               <LazyImage
                 priority
                 alt={post?.title}
-                src={post.pageCoverThumbnail}
-                style={post.pageCoverThumbnail ? {} : { height: '0px' }}
+                src={post?.pageCoverThumbnail}
+                style={post?.pageCoverThumbnail ? {} : { height: '0px' }}
                 className='w-full max-h-80 object-cover hover:scale-125 duration-150'
               />
             </div>
@@ -45,7 +45,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
 
         <div className='flex py-2 mr-2 items-center'>
           {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
-            <CategoryItem category={post.category} />
+            <CategoryItem category={post?.category} />
           )}
           <div
             className={
@@ -59,24 +59,24 @@ const PostItemCardTop = ({ post, showSummary }) => {
         </div>
 
         <Link
-          href={post?.href}
+          href={post?.href || ''}
           passHref
           className={
             'cursor-pointer hover:underline leading-tight dark:text-gray-300  dark:hover:text-gray-400'
           }>
           <h2 className='text-4xl'>
             {siteConfig('POST_TITLE_ICON') && (
-              <NotionIcon icon={post.pageIcon} />
+              <NotionIcon icon={post?.pageIcon} />
             )}
-            {post.title}
+            {post?.title}
           </h2>
         </Link>
 
         <div className='flex'></div>
 
         {(!showPreview || showSummary) && (
           <main className='my-4 text-gray-900 dark:text-gray-300 text-lg  leading-7'>
-            {post.summary}
+            {post?.summary}
           </main>
         )}
 
@@ -97,7 +97,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
           </div>
         )}
 
-        <div className='text-sm py-1'>{post.date?.start_date}</div>
+        <div className='text-sm py-1'>{post?.date?.start_date}</div>
       </div>
     </div>
   )

diff --git a/themes/magzine/components/PostItemCardWide.js b/themes/magzine/components/PostItemCardWide.js
@@ -12,32 +12,32 @@ import CategoryItem from './CategoryItem'
  * @returns
  */
 const PostItemCardWide = ({ post, showSummary }) => {
-  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post.blockMap
+  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post?.blockMap
   const { locale } = useGlobal()
   return (
-    <div key={post.id} className='flex justify-between gap-x-6'>
+    <div key={post?.id} className='flex justify-between gap-x-6'>
       {/* 卡牌左侧 */}
       <div className='h-40 w-96 gap-y-3 flex flex-col'>
         {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
-          <CategoryItem category={post.category} />
+          <CategoryItem category={post?.category} />
         )}
         <Link
-          href={post?.href}
+          href={post?.href || ''}
           passHref
           className={
             ' cursor-pointer font-semibold hover:underline text-xl leading-tight dark:text-gray-300  dark:hover:text-gray-400'
           }>
           <h3 className='max-w-80 break-words'>
             {siteConfig('POST_TITLE_ICON') && (
-              <NotionIcon icon={post.pageIcon} />
+              <NotionIcon icon={post?.pageIcon} />
             )}
-            {post.title}
+            {post?.title}
           </h3>
         </Link>
 
         {(!showPreview || showSummary) && (
           <main className='line-clamp-2 text-gray-900 dark:text-gray-300 text-sm'>
-            {post.summary}
+            {post?.summary}
           </main>
         )}
 
@@ -47,7 +47,7 @@ const PostItemCardWide = ({ post, showSummary }) => {
             <div className='pointer-events-none border-t pt-8 border-dashed'>
               <div className='w-full justify-start flex'>
                 <Link
-                  href={post?.href}
+                  href={post?.href || ''}
                   passHref
                   className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-gray-500 cursor-pointer'>
                   {locale.COMMON.ARTICLE_DETAIL}
@@ -66,16 +66,16 @@ const PostItemCardWide = ({ post, showSummary }) => {
             post?.tagItems?.map(tag => (
               <TagItemMini key={tag.name} tag={tag} />
             ))} */}
-          <div className='text-sm py-1'>{post.date?.start_date}</div>
+          <div className='text-sm py-1'>{post?.date?.start_date}</div>
         </div>
       </div>
 
       {/* 卡牌右侧图片 */}
       <div className='w-40 h-40 object-cover overflow-hidden mb-2'>
         <LazyImage
           alt={post?.title}
-          src={post.pageCoverThumbnail}
-          style={post.pageCoverThumbnail ? {} : { height: '0px' }}
+          src={post?.pageCoverThumbnail}
+          style={post?.pageCoverThumbnail ? {} : { height: '0px' }}
           className='w-40 h-40 object-cover hover:scale-125 duration-150'
         />
       </div>

diff --git a/themes/magzine/components/PostNavAround.js b/themes/magzine/components/PostNavAround.js
@@ -90,7 +90,7 @@ export default function PostNavAround({ prev, next }) {
         className={`${isShow ? 'mb-5 opacity-100' : '-mb-24 opacity-0'} hidden md:block fixed z-40 right-10 bottom-4 duration-200 transition-all`}>
         <Link
           href={`/${next.slug}`}
-          className='text-sm block p-4 w-72 h-28 cursor-pointer drop-shadow-xl duration transition-all dark:bg-[#1e1e1e] border dark:border-gray-600 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-green-600'>
+          className='text-sm block p-4 w-72 h-28 cursor-pointer drop-shadow-xl duration transition-all dark:bg-[#1e1e1e] border dark:border-gray-800 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-green-600'>
           <div className='font-semibold'>{locale.COMMON.NEXT_POST}</div>
           <hr className='mt-2 mb-3' />
           <div className='line-clamp-2'>{next?.title}</div>

diff --git a/themes/magzine/components/Progress.js b/themes/magzine/components/Progress.js
@@ -29,9 +29,9 @@ const Progress = ({ targetRef, showPercent = true }) => {
   }, [])
 
   return (
-    <div className='h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black'>
+    <div className='h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-gray-900'>
       <div
-        className='h-4 bg-black dark:bg-hexo-black-gray duration-200'
+        className='h-4 dark:bg-black bg-hexo-black-gray duration-200'
         style={{ width: `${percent}%` }}>
         {showPercent && (
           <div className='text-right text-white text-xs'>{percent}%</div>

diff --git a/themes/next/components/MenuItemDrop.js b/themes/next/components/MenuItemDrop.js
@@ -42,18 +42,18 @@ export const MenuItemDrop = ({ link }) => {
       {/* 子菜单 */}
       {hasSubMenu && (
         <ul
-          className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} whitespace-nowrap absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
+          className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} ml-3 whitespace-nowrap absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
           {link?.subMenus?.map(sLink => {
             return (
               <li key={sLink.id}>
                 <Link
                   href={sLink.href}
                   target={link?.target}
-                  className='my-auto h-9 px-2 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 '>
+                  className='my-auto h-9 pl-4 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 '>
                   {sLink.icon && (
                     <i className={`${sLink.icon} w-4 text-center`} />
                   )}
-                  <div className={'ml-4'}>{sLink.name}</div>
+                  {sLink.name}
                   {sLink.slot}
                 </Link>
               </li>

diff --git a/themes/next/components/SideAreaLeft.js b/themes/next/components/SideAreaLeft.js
@@ -28,7 +28,7 @@ const SideAreaLeft = props => {
       id='left'
       className={
         (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'ml-4' : 'mr-4') +
-        ' hidden lg:block flex-col w-60 z-20 relative'
+        ' hidden lg:block flex-col w-60 relative z-30'
       }>
       <section className='w-60'>
         {/* 菜单 */}