css fix

components/DarkModeButton.js

@@ -13,7 +13,7 @@ const DarkModeButton = (props) => {
     htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
-  return <div className={'text-white z-10 duration-200 text-xl py-2 ' + props.className}>
+  return <div className={'dark:text-gray-200 z-10 duration-200 text-xl py-2 ' + props.className}>
     <i id='darkModeButton' className={`hover:scale-125 cursor-pointer transform duration-200 fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`}
        onClick={handleChangeDarkMode} />
   </div>

themes/medium/LayoutArchive.js

@@ -8,7 +8,7 @@ export const LayoutArchive = props => {
   return (
     <LayoutBase {...props}>
       <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
-        {Object.keys(archivePosts).map(archiveTitle => (
+        {Object.keys(archivePosts)?.map(archiveTitle => (
           <div key={archiveTitle}>
             <div
               className="pt-16 pb-4 text-3xl dark:text-gray-300"
@@ -17,7 +17,7 @@ export const LayoutArchive = props => {
               {archiveTitle}
             </div>
             <ul>
-              {archivePosts[archiveTitle].map(post => (
+              {archivePosts[archiveTitle]?.map(post => (
                 <li
                   key={post.id}
                   className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"

themes/medium/LayoutTagIndex.js

@@ -13,7 +13,7 @@ export const LayoutTagIndex = props => {
           {locale.COMMON.TAGS}:
         </div>
         <div id="tags-list" className="duration-200 flex flex-wrap">
-          {tagOptions.map(tag => {
+          {tagOptions?.map(tag => {
             return (
               <div key={tag.name} className="p-2">
                 <TagItemMini key={tag.name} tag={tag} />

themes/medium/components/BlogPostListPage.js

@@ -16,8 +16,9 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
-  } else {
+  }
-    return (
+
+  return (
       <div className='w-full justify-center'>
         <div id='container'>
         {/* 文章列表 */}
@@ -27,8 +28,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
         </div>
         <PaginationSimple page={page} totalPage={totalPage} />
       </div>
-    )
+  )
-  }
 }
 
 export default BlogPostListPage

themes/medium/components/Footer.js

@@ -14,7 +14,7 @@ const Footer = ({ title }) => {
 
   return (
     <footer
-      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6 relative'
+      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 relative'
     >
        <DarkModeButton/>
       <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>

themes/medium/components/MenuBarMobile.js

@@ -28,7 +28,7 @@ export const MenuBarMobile = (props) => {
   return (
     <nav id='nav' className=' text-md'>
         {/* {links.map(link => <NormalMenu key={link.id} link={link}/>)} */}
-        {links.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link.id} link={link}/>)}
+        {links?.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link.id} link={link}/>)}
 
     </nav>
   )

themes/medium/components/MenuItemCollapse.js

@@ -48,7 +48,7 @@ export const MenuItemCollapse = (props) => {
 
         {/* 折叠子菜单 */}
         {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map(sLink => {
+            {link?.subMenus?.map(sLink => {
               return <div key={sLink.id} className='
               not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-200
               font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>

themes/medium/components/MenuItemDrop.js

@@ -37,7 +37,7 @@ export const MenuItemDrop = ({ link }) => {
 
         {/* 子菜单 */}
         {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-            {link.subMenus.map(sLink => {
+            {link?.subMenus?.map(sLink => {
               return <li key={sLink.id} className='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 py-3 pr-6 pl-2'>
                     <Link href={sLink.to}>
                         <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>

themes/medium/components/TopNavBar.js

@@ -62,7 +62,7 @@ export default function TopNavBar(props) {
 
                 {/* 桌面端顶部菜单 */}
                 <div className='hidden md:flex'>
-                    {links && links.map(link => <MenuItemDrop key={link.id} link={link}/>)}
+                    {links && links?.map(link => <MenuItemDrop key={link.id} link={link}/>)}
                 </div>
             </div>
         </div>

themes/nobelium/components/Nav.js

@@ -102,7 +102,7 @@ const NavBar = props => {
             <ul className=" hidden md:flex flex-row">
                 {links.map(link => <MenuItemDrop key={link.id} link={link} />)}
             </ul>
-            <div><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5'></i>
+            <div className='md:hidden'><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5 block md:hidden'></i>
                 <Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
                     <div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
                         {links.map(link => <MenuItemCollapse key={link.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}