heo-theme

themes/heo/components/BlogPostCard.js

@@ -23,21 +23,21 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 // data-aos-anchor-placement="top-bottom"
                 id='blog-post-card'
                 key={post.id}
-                className={`w-full justify-between flex flex-col-reverse lg:h-96  ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? '' : ''}
+                className={`w-full justify-between flex flex-col lg:h-96  ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? '' : ''}
                     overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
 
-                {/* 文字内容 */}
-                <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} />
-
                 {/* 图片封面 */}
                 {showPageCover && (
-                    <div className="md:w-5/12 lg:w-full overflow-hidden">
+                    <div className="flex-1 md:w-5/12 lg:w-full overflow-hidden">
                         <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
                             <div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
                         </Link>
                     </div>
                 )}
 
+                {/* 文字区块 */}
+                <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} />
+
             </div>
 
         </div>

themes/heo/components/BlogPostCardInfo.js

@@ -10,7 +10,7 @@ import BLOG from '@/blog.config'
  * @returns
  */
 export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary }) => {
-  return <div className={`flex flex-col justify-between lg:p-6 p-4  ${showPageCover && !showPreview ? 'md:w-7/12 w-full md:max-h-60' : 'w-full'}`}>
+  return <div className={`flex flex-1 flex-col justify-between lg:p-6 p-4  ${showPageCover && !showPreview ? 'md:w-7/12 w-full md:max-h-60' : 'w-full'}`}>
        <div>
          {/* 标题 */}
          <Link

themes/heo/components/BlogPostListPage.js

@@ -20,7 +20,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
     return (
       <div id="container" className='w-full'>
         {/* 文章列表 */}
-        <div className="lg:grid lg:grid-cols-2">
+        <div className="lg:grid lg:grid-cols-2 gap-5">
           {posts?.map(post => (
             <BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
           ))}

themes/heo/components/CategoryBar.js

@@ -5,5 +5,5 @@
  * @returns
  */
 export default function CategoryBar(props) {
-  return <div id='category-list' className="h-24 w-full bg-pink-100"></div>
+  return <div id='category-list' className="h-20 w-full bg-pink-100"></div>
 }

themes/heo/components/Header.js

@@ -1,20 +1,14 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import Logo from './Logo'
-import SearchDrawer from './SearchDrawer'
 
 import { MenuListTop } from './MenuListTop'
 import throttle from 'lodash.throttle'
-import SideBar from './SideBar'
-import SideBarDrawer from './SideBarDrawer'
-
 /**
  * 顶部导航
  * @param {*} param0
  * @returns
  */
 const Header = props => {
-  const searchDrawer = useRef()
-
   const [isOpen, changeShow] = useState(false)
   const [headerBgShow, setHeaderBgShow] = useState(false)
 
@@ -22,10 +16,6 @@ const Header = props => {
     changeShow(!isOpen)
   }
 
-  const toggleSideBarClose = () => {
-    changeShow(false)
-  }
-
   // 监听滚动
   useEffect(() => {
     scrollTrigger()
@@ -38,8 +28,8 @@ const Header = props => {
   const throttleMs = 200
 
   /**
-     * 根据滚动条，切换导航栏样式
-     */
+         * 根据滚动条，切换导航栏样式
+         */
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
     const header = document.querySelector('#header')
@@ -52,12 +42,10 @@ const Header = props => {
     }
   }, throttleMs))
 
-  return (<div id='header' className='z-40'>
-        <SearchDrawer cRef={searchDrawer} />
-
-        {/* 导航栏 */}
-        <div id='sticky-nav' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} top-0 duration-300 transition-all fixed  text-black w-full z-20 transform`}>
-            <div className='w-full max-w-7xl mx-auto flex justify-between items-center py-2 px-5'>
+  return (<>
+        {/* 头条 */}
+        <nav id='header' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} h-16 flex justify-center items-center top-0 duration-300 transition-all sticky text-black w-full z-20 transform`}>
+            <div className='w-full max-w-[88rem] mx-auto flex justify-between items-center px-5'>
                 <div className='flex'>
                     <Logo {...props} />
                 </div>
@@ -70,13 +58,8 @@ const Header = props => {
                     </div>
                 </div>
             </div>
-        </div>
-
-        {/* 折叠侧边栏 */}
-        <SideBarDrawer isOpen={isOpen} onClose={toggleSideBarClose}>
-            <SideBar {...props} />
-        </SideBarDrawer>
-    </div>)
+        </nav>
+    </>)
 }
 
 export default Header

themes/heo/components/Hero.js

@@ -6,23 +6,24 @@
  */
 const Hero = props => {
   return (
-        <div className="mt-16">
+        <>
 
-            <notice className="max-w-7xl w-full mx-auto flex h-20  px-5">
+            <notice className="max-w-[88rem] w-full mx-auto flex h-16  px-5">
                 <div className="bg-indigo-100 w-full h-full"></div>
             </notice>
 
-            <hero id="hero" style={{ zIndex: 1 }} className="max-w-7xl w-full mx-auto flex relative  px-5" >
+            <hero id="hero" style={{ zIndex: 1 }} className="max-w-[88rem] w-full mx-auto flex relative  px-5" >
                 <div id='hero-left' className='flex flex-col flex-1 bg-red-200'>
-                    <div className="h-60 bg-blue-200"></div>
-                    <div className="h-24  bg-yellow-100"></div>
+                    <div className="h-60 bg-blue-200 my-2"></div>
+                    <div className="h-20  bg-yellow-100 my-2"></div>
                 </div>
-                <div id='hero-right' className='flex flex-col flex-1 bg-green-200'>
+                <div id='hero-right' className='flex flex-col flex-1 bg-green-200 '>
+                    <div className="my-2 h-full bg-indigo-200"></div>
 
                 </div>
             </hero>
 
-        </div>
+        </>
   )
 }
 

themes/heo/components/Logo.js

@@ -6,10 +6,10 @@ const Logo = props => {
   const { siteInfo } = props
   return (
     <Link href='/' passHref legacyBehavior>
-      <div className='flex justify-center items-center cursor-pointer'>
+      <div className='flex justify-center items-center cursor-pointer font-extrabold'>
         {/*  eslint-disable-next-line @next/next/no-img-element */}
         <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2 hidden md:block' />
-        <div className='font-medium text-lg my-auto rounded dark:border-white transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
+        <div className='text-lg my-auto rounded dark:border-white transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
       </div>
     </Link>
   )

themes/heo/index.js

@@ -71,7 +71,7 @@ const LayoutBase = props => {
             </Transition>
 
             {/* 主区块 */}
-            <main id="wrapper-outer" className={'w-full max-w-7xl mx-auto min-h-screen relative px-5'}>
+            <main id="wrapper-outer" className={'w-full max-w-[88rem] mx-auto min-h-screen relative px-5'}>
                 <div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
                     <div className={`${className || ''} w-full  h-full`}>