diff --git a/.env.local b/.env.local index d7ba778d..0f9ee7c1 100644 --- a/.env.local +++ b/.env.local @@ -1,2 +1,2 @@ # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables -NEXT_PUBLIC_VERSION=4.0.1 \ No newline at end of file +NEXT_PUBLIC_VERSION=4.1.0 \ No newline at end of file diff --git a/components/LazyImage.js b/components/LazyImage.js new file mode 100644 index 00000000..3c8c2227 --- /dev/null +++ b/components/LazyImage.js @@ -0,0 +1,88 @@ +import React, { useEffect, useRef, useState } from 'react' + +/** + * 默认懒加载占位图 + */ +const loadingSVG = ( + + + +) + +/** + * 图片懒加载 + * @param {*} param0 + * @returns + */ +export default function LazyImage({ id, src, alt, placeholderSrc = loadingSVG, className, width, height, onLoad, style }) { + const imageRef = useRef(null) + const [imageLoaded, setImageLoaded] = useState(false) + + const handleImageLoad = () => { + setImageLoaded(true) + if (typeof onLoad === 'function') { + onLoad() // 触发传递的onLoad回调函数 + } + } + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const lazyImage = entry.target + lazyImage.src = src + observer.unobserve(lazyImage) + } + }) + }, + { rootMargin: '50px 0px' } // Adjust the rootMargin as needed to trigger the loading earlier or later + ) + + if (imageRef.current) { + observer.observe(imageRef.current) + } + + return () => { + if (imageRef.current) { + observer.unobserve(imageRef.current) + } + } + }, [src]) + + // 动态添加width、height和className属性，仅在它们为有效值时添加 + const imgProps = { + ref: imageRef, + src: imageLoaded ? src : placeholderSrc, + alt: alt, + onLoad: handleImageLoad + } + + if (id) { + imgProps.id = id + } + + if (width && width !== 'auto') { + imgProps.width = width + } + + if (height && height !== 'auto') { + imgProps.height = height + } + if (className) { + imgProps.className = className + } + if (style) { + imgProps.style = style + } + return ( + // eslint-disable-next-line @next/next/no-img-element + + ) +} diff --git a/components/NotionIcon.js b/components/NotionIcon.js index cb6ae846..e60b0640 100644 --- a/components/NotionIcon.js +++ b/components/NotionIcon.js @@ -1,3 +1,5 @@ +import LazyImage from './LazyImage' + /** * notion的图标icon * 可能是emoji 可能是 svg 也可能是 图片 @@ -9,9 +11,7 @@ const NotionIcon = ({ icon }) => { } if (icon.startsWith('http') || icon.startsWith('data:')) { - // return - // eslint-disable-next-line @next/next/no-img-element - return + return } return {icon} diff --git a/package.json b/package.json index 8ea3be05..8484e97b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "notion-next", - "version": "4.0.1", + "version": "4.1.0", "homepage": "https://github.com/tangly1024/NotionNext.git", "license": "MIT", "repository": { diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js index 1ea23429..a1297dd2 100644 --- a/themes/fukasawa/components/ArticleDetail.js +++ b/themes/fukasawa/components/ArticleDetail.js @@ -6,6 +6,7 @@ import { useGlobal } from '@/lib/global' import Link from 'next/link' import ArticleAround from './ArticleAround' import { AdSlot } from '@/components/GoogleAdsense' +import LazyImage from '@/components/LazyImage' /** * @@ -23,8 +24,7 @@ export default function ArticleDetail(props) {
{post?.type && !post?.type !== 'Page' && post?.pageCover && (
- {/* eslint-disable-next-line @next/next/no-img-element */} - {post.title} +
)} diff --git a/themes/fukasawa/components/BlogCard.js b/themes/fukasawa/components/BlogCard.js index 9074c7c4..ec9070f4 100644 --- a/themes/fukasawa/components/BlogCard.js +++ b/themes/fukasawa/components/BlogCard.js @@ -3,6 +3,7 @@ import Link from 'next/link' import TagItemMini from './TagItemMini' import React from 'react' import CONFIG_FUKA from '../config' +import LazyImage from '@/components/LazyImage' const BlogCard = ({ index, post, showSummary, siteInfo }) => { const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap @@ -26,12 +27,11 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => { {showPageCover && (
- {/* eslint-disable-next-line @next/next/no-img-element */} - {post?.title + />
)} diff --git a/themes/gitbook/components/InfoCard.js b/themes/gitbook/components/InfoCard.js index a18408dc..13fe31c8 100644 --- a/themes/gitbook/components/InfoCard.js +++ b/themes/gitbook/components/InfoCard.js @@ -1,4 +1,5 @@ import BLOG from '@/blog.config' +import LazyImage from '@/components/LazyImage' import Router from 'next/router' import React from 'react' import SocialButton from './SocialButton' @@ -8,8 +9,7 @@ const InfoCard = (props) => { return
{ Router.push('/about') }}> - {/* eslint-disable-next-line @next/next/no-img-element */} - {BLOG.AUTHOR}/ +
{BLOG.AUTHOR}
{BLOG.BIO}
diff --git a/themes/gitbook/components/LogoBar.js b/themes/gitbook/components/LogoBar.js index 803a4fa3..70c96b46 100644 --- a/themes/gitbook/components/LogoBar.js +++ b/themes/gitbook/components/LogoBar.js @@ -1,4 +1,5 @@ import BLOG from '@/blog.config' +import LazyImage from '@/components/LazyImage' import { useGitBookGlobal } from '@/themes/gitbook' import Link from 'next/link' @@ -20,8 +21,7 @@ export default function LogoBar(props) {
- {/* eslint-disable-next-line @next/next/no-img-element */} - {BLOG.AUTHOR} + {siteInfo?.title}
diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js index 56ca1fbf..03cb4860 100644 --- a/themes/heo/components/BlogPostCard.js +++ b/themes/heo/components/BlogPostCard.js @@ -2,6 +2,7 @@ import Link from 'next/link' import CONFIG from '../config' import BLOG from '@/blog.config' import TagItemMini from './TagItemMini' +import LazyImage from '@/components/LazyImage' // import Image from 'next/image' const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { @@ -19,7 +20,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { {showPageCover && (
-
+
)} diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js index 211e3db7..55cb1993 100644 --- a/themes/heo/components/Hero.js +++ b/themes/heo/components/Hero.js @@ -2,6 +2,7 @@ import BLOG from '@/blog.config' import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons' +import LazyImage from '@/components/LazyImage' import Link from 'next/link' import { useRouter } from 'next/router' @@ -62,7 +63,7 @@ function Banner(props) { router.push(randomPost.slug) } - return
+ return