From 0aecf0672909690d255178074c58b10904a1ec4b Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Fri, 21 Jul 2023 11:46:31 +0800 Subject: [PATCH 01/14] =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=87=92=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E6=80=A7?= =?UTF-8?q?=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96SEO?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.local | 2 +- components/LazyImage.js | 88 +++++++++++++++++++ components/NotionIcon.js | 6 +- package.json | 2 +- themes/fukasawa/components/ArticleDetail.js | 4 +- themes/fukasawa/components/BlogCard.js | 6 +- themes/gitbook/components/InfoCard.js | 4 +- themes/gitbook/components/LogoBar.js | 4 +- themes/heo/components/BlogPostCard.js | 3 +- themes/heo/components/Hero.js | 15 ++-- themes/heo/components/InfoCard.js | 4 +- themes/heo/components/LatestPostsGroup.js | 5 +- themes/heo/components/LatestPostsGroupMini.js | 4 +- themes/heo/components/Logo.js | 4 +- themes/heo/components/PaginationNumber.js | 4 +- themes/heo/components/PostHeader.js | 4 +- themes/heo/components/ReadingProgress.js | 2 +- themes/heo/components/SideBar.js | 3 +- themes/heo/index.js | 4 +- themes/hexo/components/InfoCard.js | 3 +- themes/hexo/components/LatestPostsGroup.js | 12 +-- themes/hexo/components/SideBar.js | 4 +- themes/landing/components/Features.js | 9 +- themes/landing/components/ModalVideo.js | 4 +- themes/landing/components/Testimonials.js | 4 +- themes/matery/components/BlogPostCard.js | 3 +- themes/matery/components/InfoCard.js | 4 +- themes/matery/components/PostHeader.js | 14 +-- themes/matery/components/SideBar.js | 4 +- themes/medium/components/ArticleInfo.js | 4 +- themes/medium/components/BlogPostCard.js | 4 +- themes/medium/components/InfoCard.js | 4 +- themes/next/components/ArticleDetail.js | 4 +- themes/next/components/InfoCard.js | 4 +- themes/nobelium/components/Nav.js | 4 +- themes/plog/components/BlogPost.js | 7 +- themes/plog/components/LogoBar.js | 5 +- themes/plog/components/Modal.js | 8 +- themes/plog/components/Nav.js | 4 +- themes/simple/components/Header.js | 6 +- 40 files changed, 179 insertions(+), 104 deletions(-) create mode 100644 components/LazyImage.js diff --git a/.env.local b/.env.local index d7ba778da2a..0f9ee7c1d90 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 00000000000..3c8c2227d8f --- /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 cb6ae84629f..e60b064008e 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 8ea3be053c2..8484e97b377 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 1ea2342933d..a1297dd23a5 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 9074c7c4321..ec9070f4a73 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 a18408dc4c8..13fe31c8d85 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 803a4fa38e6..70c96b46f0d 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 56ca1fbfa1b..03cb48605f5 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 211e3db7e40..55cb1993811 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