d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

theme heo wowjs

Browse Source
This commit is contained in:
tangly1024
2024-02-24 11:47:59 +08:00
parent a87446747b
commit 5b52bc2d7f
6 changed files with 56 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
hooks/useAdjustStyle.js
View File

@@ -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;

15
lib/wow.js Normal file
View File

@@ -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();
}
};

8
themes/heo/components/BlogPostCard.js
View File

@@ -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 && (

13
themes/heo/index.js
View File

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

2
themes/starter/config.js
View File

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

19
themes/starter/index.js
View File

@@ -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`}>