From 5b52bc2d7f8a805b252872eea72e8a3876c3a718 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 24 Feb 2024 11:47:59 +0800 Subject: [PATCH] theme heo wowjs --- hooks/useAdjustStyle.js | 49 ++++++++++++++------------- lib/wow.js | 15 ++++++++ themes/heo/components/BlogPostCard.js | 8 ++--- themes/heo/index.js | 13 ++++--- themes/starter/config.js | 2 +- themes/starter/index.js | 19 +++-------- 6 files changed, 56 insertions(+), 50 deletions(-) create mode 100644 lib/wow.js diff --git a/hooks/useAdjustStyle.js b/hooks/useAdjustStyle.js index 4cd6f880..d04c1710 100644 --- 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 new file mode 100644 index 00000000..e4682e46 --- /dev/null +++ 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 index b07fa06c..ab6cd1c7 100644 --- a/themes/heo/components/BlogPostCard.js +++ b/themes/heo/components/BlogPostCard.js @@ -16,12 +16,8 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { return (
-
+
{/* 图片封面 */} {showPageCover && ( diff --git a/themes/heo/index.js b/themes/heo/index.js index f10be1a2..2f09e60b 100644 --- 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 (
{ className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 " >
{/* Notion文章主体 */}
diff --git a/themes/starter/config.js b/themes/starter/config.js index 9cb980a9..7eb4f843 100644 --- 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 index bb8e7f6a..6ecb4c25 100644 --- 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