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">

themes/starter/config.js

@@ -42,7 +42,7 @@ const CONFIG = {
   STARTER_FEATURE_2_BUTTON_URL: 'https://docs.tangly1024.com/article/notion-next-themes', // 特性2
 
   STARTER_FEATURE_3_TITLE_1: '优秀的性能', // 特性3
-  STARTER_FEATURE_3_TEXT_1: '基于NextJS开发，更快的相应速度，更好的SEO', // 特性3
+  STARTER_FEATURE_3_TEXT_1: '基于NextJS开发，更快的响应速度，更好的SEO', // 特性3
   STARTER_FEATURE_3_BUTTON_TEXT: '了解更多', // 特性3
   STARTER_FEATURE_3_BUTTON_URL: 'https://docs.tangly1024.com/article/next-js', // 特性3
 

themes/starter/index.js

@@ -10,7 +10,7 @@
  * 3. 您可在此网站找到更多喜欢的组件 https://www.tailwind-kit.com/
  */
 import { useRouter } from 'next/router'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { isBrowser } from '@/lib/utils'
 import { siteConfig } from '@/lib/config'
 import CONFIG from './config'
 import NotionPage from '@/components/NotionPage'
@@ -36,19 +36,7 @@ import { Banner } from './components/Banner'
 import { SignInForm } from './components/SignInForm'
 import { SignUpForm } from './components/SignUpForm'
 import Link from 'next/link'
-
-/**
- * 一些外部js
- */
-const loadExternal = async () => {
-  await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js', 'js');
-  // 配合animatecss 实现延时滚动动画，和AOS动画相似
-  const WOW = window.WOW;
-  console.log('加载WOW动画', WOW)
-  if (WOW) {
-    new WOW().init();
-  }
-};
+import { loadWowJS } from '@/lib/wow'
 
 /**
  * 布局框架
@@ -61,8 +49,9 @@ const loadExternal = async () => {
 const LayoutBase = (props) => {
   const { children } = props
 
+  // 加载wow动画
   useEffect(() => {
-    loadExternal()
+    loadWowJS()
   }, [])
 
   return <div id='theme-starter' className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:bg-black scroll-smooth`}>