theme heo wowjs

themes/heo/components/BlogPostCard.js

@@ -16,12 +16,8 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   return (
         <article className={` ${siteConfig('HEO_POST_LIST_COVER_HOVER_ENLARGE', null, CONFIG) ? ' hover:scale-110 transition-all duration-150' : ''}`} >
 
-            <div
-                data-aos="fade-up"
-                data-aos-duration="200"
-                data-aos-once="false"
-                data-aos-anchor-placement="top-bottom"
-                className={'border bg-white dark:bg-[#1e1e1e] flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'}>
+            <div data-wow-delay=".2s"
+                className={'wow fadeInUp border bg-white dark:bg-[#1e1e1e] flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'}>
 
                 {/* 图片封面 */}
                 {showPageCover && (

themes/heo/index.js

@@ -40,6 +40,7 @@ import WWAds from '@/components/WWAds'
 import { AdSlot } from '@/components/GoogleAdsense'
 import { siteConfig } from '@/lib/config'
 import { isBrowser } from '@/lib/utils'
+import { loadWowJS } from '@/lib/wow'
 
 /**
  * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -81,6 +82,11 @@ const LayoutBase = props => {
 
   const HEO_HERO_BODY_REVERSE = siteConfig('HEO_HERO_BODY_REVERSE', false, CONFIG)
 
+  // 加载wow动画
+  useEffect(() => {
+    loadWowJS()
+  }, [])
+
   return (
     <div
       id="theme-heo"
@@ -294,13 +300,10 @@ const LayoutSlug = props => {
             className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 "
           >
             <article
-              data-aos="fade-up"
-              data-aos-duration="300"
-              data-aos-once="false"
-              data-aos-anchor-placement="top-bottom"
               itemScope
               itemType="https://schema.org/Movie"
-              className="subpixel-antialiased overflow-y-hidden"
+              data-wow-delay=".2s"
+              className="wow fadeInUp subpixel-antialiased overflow-y-hidden"
             >
               {/* Notion文章主体 */}
               <section className="px-5 justify-center mx-auto">