theme heo wowjs

ChenyqThu · Feb 24, 2024 · 5b52bc2 · 5b52bc2
1 parent a874467
commit 5b52bc2
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 50 deletions.
diff --git a/hooks/useAdjustStyle.js b/hooks/useAdjustStyle.js
@@ -1,33 +1,36 @@
 import { isBrowser } from '@/lib/utils';
 import { useEffect } from 'react';
 
+/**
+ * 样式调整的补丁
+ */
 const useAdjustStyle = () => {
-    /**
+  /**
      * 避免 callout 含有图片时溢出撑开父容器
      */
-    const adjustCalloutImg = () => {
-        const callOuts = document.querySelectorAll('.notion-callout-text');
-        callOuts.forEach((callout) => {
-            const images = callout.querySelectorAll('figure.notion-asset-wrapper.notion-asset-wrapper-image > div');
-            const calloutWidth = callout.offsetWidth;
-            images.forEach((container) => {
-                const imageWidth = container.offsetWidth;
-                if (imageWidth + 50 > calloutWidth) {
-                    container.style.setProperty('width', '100%');
-                }
-            });
-        });
-    };
-
-    useEffect(() => {
-        if (isBrowser) {
-            adjustCalloutImg();
-            window.addEventListener('resize', adjustCalloutImg);
-            return () => {
-                window.removeEventListener('resize', adjustCalloutImg);
-            };
+  const adjustCalloutImg = () => {
+    const callOuts = document.querySelectorAll('.notion-callout-text');
+    callOuts.forEach((callout) => {
+      const images = callout.querySelectorAll('figure.notion-asset-wrapper.notion-asset-wrapper-image > div');
+      const calloutWidth = callout.offsetWidth;
+      images.forEach((container) => {
+        const imageWidth = container.offsetWidth;
+        if (imageWidth + 50 > calloutWidth) {
+          container.style.setProperty('width', '100%');
         }
-    }, []);
+      });
+    });
+  };
+
+  useEffect(() => {
+    if (isBrowser) {
+      adjustCalloutImg();
+      window.addEventListener('resize', adjustCalloutImg);
+      return () => {
+        window.removeEventListener('resize', adjustCalloutImg);
+      };
+    }
+  }, []);
 };
 
 export default useAdjustStyle;
diff --git a/lib/wow.js b/lib/wow.js
@@ -0,0 +1,15 @@
+const { loadExternalResource } = require('./utils');
+
+/**
+ * WOWjs动画，结合animate.css使用很方便
+ * 是data-aos的平替 aos ≈ wowjs + animate
+ */
+export const loadWowJS = 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();
+  }
+};
diff --git a/themes/heo/components/BlogPostCard.js b/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 && (

diff --git a/themes/heo/index.js b/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">

diff --git a/themes/starter/config.js b/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
 

diff --git a/themes/starter/index.js b/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`}>