Skip to content

Commit 5b52bc2

Browse files
tangly1024tangly1024
committed
theme heo wowjs
1 parent a874467 commit 5b52bc2

File tree

6 files changed

+56
-50
lines changed

6 files changed

+56
-50
lines changed

‎hooks/useAdjustStyle.js

+26-23
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,36 @@
11
import { isBrowser } from '@/lib/utils';
22
import { useEffect } from 'react';
33

4+
/**
5+
* 样式调整的补丁
6+
*/
47
const useAdjustStyle = () => {
5-
/**
8+
/**
69
* 避免 callout 含有图片时溢出撑开父容器
710
*/
8-
const adjustCalloutImg = () => {
9-
const callOuts = document.querySelectorAll('.notion-callout-text');
10-
callOuts.forEach((callout) => {
11-
const images = callout.querySelectorAll('figure.notion-asset-wrapper.notion-asset-wrapper-image > div');
12-
const calloutWidth = callout.offsetWidth;
13-
images.forEach((container) => {
14-
const imageWidth = container.offsetWidth;
15-
if (imageWidth + 50 > calloutWidth) {
16-
container.style.setProperty('width', '100%');
17-
}
18-
});
19-
});
20-
};
21-
22-
useEffect(() => {
23-
if (isBrowser) {
24-
adjustCalloutImg();
25-
window.addEventListener('resize', adjustCalloutImg);
26-
return () => {
27-
window.removeEventListener('resize', adjustCalloutImg);
28-
};
11+
const adjustCalloutImg = () => {
12+
const callOuts = document.querySelectorAll('.notion-callout-text');
13+
callOuts.forEach((callout) => {
14+
const images = callout.querySelectorAll('figure.notion-asset-wrapper.notion-asset-wrapper-image > div');
15+
const calloutWidth = callout.offsetWidth;
16+
images.forEach((container) => {
17+
const imageWidth = container.offsetWidth;
18+
if (imageWidth + 50 > calloutWidth) {
19+
container.style.setProperty('width', '100%');
2920
}
30-
}, []);
21+
});
22+
});
23+
};
24+
25+
useEffect(() => {
26+
if (isBrowser) {
27+
adjustCalloutImg();
28+
window.addEventListener('resize', adjustCalloutImg);
29+
return () => {
30+
window.removeEventListener('resize', adjustCalloutImg);
31+
};
32+
}
33+
}, []);
3134
};
3235

3336
export default useAdjustStyle;

‎lib/wow.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const { loadExternalResource } = require('./utils');
2+
3+
/**
4+
* WOWjs动画，结合animate.css使用很方便
5+
* 是data-aos的平替 aos ≈ wowjs + animate
6+
*/
7+
export const loadWowJS = async () => {
8+
await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js', 'js');
9+
// 配合animatecss 实现延时滚动动画，和AOS动画相似
10+
const WOW = window.WOW;
11+
console.log('加载WOW动画', WOW)
12+
if (WOW) {
13+
new WOW().init();
14+
}
15+
};

‎themes/heo/components/BlogPostCard.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,8 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
1616
return (
1717
<article className={` ${siteConfig('HEO_POST_LIST_COVER_HOVER_ENLARGE', null, CONFIG) ? ' hover:scale-110 transition-all duration-150' : ''}`} >
1818

19-
<div
20-
data-aos="fade-up"
21-
data-aos-duration="200"
22-
data-aos-once="false"
23-
data-aos-anchor-placement="top-bottom"
24-
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'}>
19+
<div data-wow-delay=".2s"
20+
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'}>
2521

2622
{/* 图片封面 */}
2723
{showPageCover && (

‎themes/heo/index.js

+8-5
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import WWAds from '@/components/WWAds'
4040
import { AdSlot } from '@/components/GoogleAdsense'
4141
import { siteConfig } from '@/lib/config'
4242
import { isBrowser } from '@/lib/utils'
43+
import { loadWowJS } from '@/lib/wow'
4344

4445
/**
4546
* 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -81,6 +82,11 @@ const LayoutBase = props => {
8182

8283
const HEO_HERO_BODY_REVERSE = siteConfig('HEO_HERO_BODY_REVERSE', false, CONFIG)
8384

85+
// 加载wow动画
86+
useEffect(() => {
87+
loadWowJS()
88+
}, [])
89+
8490
return (
8591
<div
8692
id="theme-heo"
@@ -294,13 +300,10 @@ const LayoutSlug = props => {
294300
className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 "
295301
>
296302
<article
297-
data-aos="fade-up"
298-
data-aos-duration="300"
299-
data-aos-once="false"
300-
data-aos-anchor-placement="top-bottom"
301303
itemScope
302304
itemType="https://schema.org/Movie"
303-
className="subpixel-antialiased overflow-y-hidden"
305+
data-wow-delay=".2s"
306+
className="wow fadeInUp subpixel-antialiased overflow-y-hidden"
304307
>
305308
{/* Notion文章主体 */}
306309
<section className="px-5 justify-center mx-auto">

‎themes/starter/config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const CONFIG = {
4242
STARTER_FEATURE_2_BUTTON_URL: 'https://docs.tangly1024.com/article/notion-next-themes', // 特性2
4343

4444
STARTER_FEATURE_3_TITLE_1: '优秀的性能', // 特性3
45-
STARTER_FEATURE_3_TEXT_1: '基于NextJS开发，更快的相应速度，更好的SEO', // 特性3
45+
STARTER_FEATURE_3_TEXT_1: '基于NextJS开发，更快的响应速度，更好的SEO', // 特性3
4646
STARTER_FEATURE_3_BUTTON_TEXT: '了解更多', // 特性3
4747
STARTER_FEATURE_3_BUTTON_URL: 'https://docs.tangly1024.com/article/next-js', // 特性3
4848

‎themes/starter/index.js

+4-15
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* 3. 您可在此网站找到更多喜欢的组件 https://www.tailwind-kit.com/
1111
*/
1212
import { useRouter } from 'next/router'
13-
import { isBrowser, loadExternalResource } from '@/lib/utils'
13+
import { isBrowser } from '@/lib/utils'
1414
import { siteConfig } from '@/lib/config'
1515
import CONFIG from './config'
1616
import NotionPage from '@/components/NotionPage'
@@ -36,19 +36,7 @@ import { Banner } from './components/Banner'
3636
import { SignInForm } from './components/SignInForm'
3737
import { SignUpForm } from './components/SignUpForm'
3838
import Link from 'next/link'
39-
40-
/**
41-
* 一些外部js
42-
*/
43-
const loadExternal = async () => {
44-
await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js', 'js');
45-
// 配合animatecss 实现延时滚动动画，和AOS动画相似
46-
const WOW = window.WOW;
47-
console.log('加载WOW动画', WOW)
48-
if (WOW) {
49-
new WOW().init();
50-
}
51-
};
39+
import { loadWowJS } from '@/lib/wow'
5240

5341
/**
5442
* 布局框架
@@ -61,8 +49,9 @@ const loadExternal = async () => {
6149
const LayoutBase = (props) => {
6250
const { children } = props
6351

52+
// 加载wow动画
6453
useEffect(() => {
65-
loadExternal()
54+
loadWowJS()
6655
}, [])
6756

6857
return <div id='theme-starter' className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:bg-black scroll-smooth`}>

0 commit comments

Comments
 (0)