Merge pull request #224 from tangly1024/fix-hexo-indexlayout

Fix hexo indexlayout

components/NotionPage.js

@@ -31,29 +31,30 @@ const NotionPage = ({ post }) => {
     background: 'rgba(0, 0, 0, 0.2)',
     margin: getMediumZoomMargin()
   })
+
   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
 
   setTimeout(() => {
-    if (typeof document === 'undefined') {
-      return
-    }
-    const buttons = document.getElementsByClassName('notion-code-copy')
-    for (const e of buttons) {
-      e.addEventListener('click', fixCopy)
-    }
-    // 将所有container下的所有图片添加medium-zoom
-    const container = document?.getElementById('container')
-    const imgList = container?.getElementsByTagName('img')
-    if (imgList && zoomRef.current) {
-      for (let i = 0; i < imgList.length; i++) {
-        (zoomRef.current).attach(imgList[i])
+    if (typeof document !== 'undefined') {
+      const buttons = document.getElementsByClassName('notion-code-copy')
+      for (const e of buttons) {
+        e.addEventListener('click', fixCopy)
+      }
+      // 将相册gallery下的图片加入放大功能
+      // const container = document?.getElementById('container')
+      const imgList = document?.querySelectorAll('.notion-collection-card-cover img')
+      if (imgList && zoomRef.current) {
+        for (let i = 0; i < imgList.length; i++) {
+          (zoomRef.current).attach(imgList[i])
+        }
+      }
+
+      const cards = document.getElementsByClassName('notion-collection-card')
+      for (const e of cards) {
+        e.removeAttribute('href')
       }
     }
-    const cards = document.getElementsByClassName('notion-collection-card')
-    for (const e of cards) {
-      e.removeAttribute('href')
-    }
-  }, 500)
+  }, 800)
 
   /**
    * 复制代码后，会重复 @see https://github.com/tangly1024/NotionNext/issues/165

styles/globals.css

@@ -151,6 +151,6 @@ nav {
     position: fixed;
     left: 0;
     top: 0;
-    z-index: 50;
+    z-index: 1000;
     pointer-events: none;
 }

themes/hexo/LayoutBase.js

@@ -59,10 +59,10 @@ const LayoutBase = props => {
 
       {headerSlot}
 
-      <main id="wrapper" className="w-full py-8 md:px-8 xl:px-24 min-h-screen">
+      <main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen">
         <div
           id="container-inner"
-          className="pt-14 w-full mx-auto xl:flex xl:space-x-4 justify-center"
+          className="pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center"
         >
           <div className="w-full max-w-4xl">
             {onLoading ? <LoadingCover /> : children}

themes/hexo/components/MenuList.js

@@ -21,7 +21,7 @@ const MenuList = (props) => {
     links = links.concat(customNav)
   }
 
-  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans'>
+  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 font-sans'>
     {links.map(link => {
       if (link && link.show) {
         const selected = (router.pathname === link.to) || (router.asPath === link.to)

themes/hexo/components/SideRight.js

@@ -13,7 +13,7 @@ export default function SideRight(props) {
   } = props
 
   return (
-    <div className={'space-y-4 xl:w-80 xl:pt-0 xl:px-2 pt-4'}>
+    <div className={'space-y-4 lg:w-80 lg:pt-0 lg:px-2 pt-4'}>
       <InfoCard {...props} />
       {CONFIG_HEXO.WIDGET_ANALYTICS && <AnalyticsCard {...props} />}
 

themes/hexo/components/TopNav.js

@@ -87,7 +87,7 @@ const TopNav = props => {
     <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className={'fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full top-0 z-20 transform duration-200 font-san border-transparent  dark:border-transparent'}>
+    <div id='sticky-nav' className={'top-0 shadow fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform duration-200 font-san border-transparent  dark:border-transparent'}>
       <div className='w-full flex justify-between items-center px-4 py-2'>
         <div className='flex'>
          <Logo {...props}/>
@@ -103,7 +103,7 @@ const TopNav = props => {
       </div>
 
       <Collapse isOpen={isOpen} className='shadow-xl'>
-        <div className='bg-white pt-1 py-2 px-5 lg:hidden'>
+        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-5 lg:hidden '>
           <MenuList {...props}/>
         </div>
       </Collapse>