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

themes/hexo/LayoutBase.js

@@ -77,11 +77,11 @@ const LayoutBase = props => {
       </main>
 
       {/* 右下角悬浮 */}
-      <div className="bottom-12 right-1 fixed justify-end z-20  text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm">
+      <div className={(show ? 'opacity-100 ' : 'invisible opacity-0') + '  duration-300 transition-all bottom-12 right-1 fixed justify-end z-20  text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'}>
         <div
           className={
-            (show ? 'animate__animated ' : 'hidden') +
+
-            ' animate__fadeInUp justify-center duration-300  animate__faster flex flex-col items-center cursor-pointer '
+            '  justify-center  flex flex-col items-center cursor-pointer '
           }
         >
           <FloatDarkModeButton />

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-duration="150"
-        data-aos-easing="ease-in-out"
+        data-aos-once="false"
-        data-aos-once="true"
         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>
-  );
+  )
 }

themes/hexo/config_hexo.js

@@ -14,6 +14,7 @@ const CONFIG_HEXO = {
   POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
   POST_LIST_SUMMARY: true, // 文章摘要
   POST_LIST_PREVIEW: true, // 读取文章预览
+  POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错
 
   ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
   ARTICLE_COPYRIGHT: true, // 显示文章版权声明