hexo 动画优化、支持图片卡牌配置

themes/hexo/components/BlogPostCard.js

@@ -15,13 +15,12 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
     <div
         key={post.id}
         data-aos="fade-up"
-        data-aos-duration="300"
-        data-aos-easing="ease-in-out"
-        data-aos-once="true"
+        data-aos-duration="150"
+        data-aos-once="false"
         data-aos-anchor-placement="top-bottom"
-        className='flex md:flex-row flex-col-reverse even:md:flex-row-reverse
+        className={`flex md:flex-row flex-col-reverse ${CONFIG_HEXO.POST_LIST_IMG_CROSSOVER ? 'even:md:flex-row-reverse' : ''}
         w-full md:h-72 h-96 justify-between overflow-hidden drop-shadow-md
-        border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray'>
+        border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
 
         <div className={`lg:p-8 p-4 flex flex-col  ${showPageCover ? 'md:w-7/12 w-full' : 'w-full'}`}>
           <Link

themes/hexo/components/Header.js

@@ -43,10 +43,10 @@ const Header = props => {
   })
 
   function updateHeaderHeight () {
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       const wrapperElement = document.getElementById('wrapper')
       wrapperTop = wrapperElement?.offsetTop
-    }, 500)
+    })
   }
 
   return (
@@ -103,12 +103,12 @@ const scrollTrigger = () => {
   ) {
     autoScroll = true
     window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
-    setTimeout(autoScrollEnd, 500)
+    requestAnimationFrame(autoScrollEnd)
   }
   if ((scrollS < windowTop) && (scrollS < window.innerHeight) && !autoScroll) {
     autoScroll = true
     window.scrollTo({ top: 0, behavior: 'smooth' })
-    setTimeout(autoScrollEnd, 500)
+    requestAnimationFrame(autoScrollEnd)
   }
   windowTop = scrollS
 }

themes/hexo/components/HeaderArticle.js

@@ -19,7 +19,7 @@ export default function HeaderArticle({ post, siteInfo }) {
   return (
     <div
       id="header"
-      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn relative"
+      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn"
       style={{ backgroundImage: headerImage }}
     >
       <header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
@@ -65,5 +65,5 @@ export default function HeaderArticle({ post, siteInfo }) {
         </div>
       </header>
     </div>
-  );
+  )
 }