From c76f1dfa0bf8232966bd1fd411da04b811926581 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Fri, 31 May 2024 10:36:07 +0800 Subject: [PATCH] =?UTF-8?q?Plog=20=E5=9B=BE=E7=89=87=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/LazyImage.js | 54 +++++++++----- themes/plog/components/Modal.js | 105 ++++++++++++++++------------ themes/plog/components/PlogModal.js | 28 -------- 3 files changed, 95 insertions(+), 92 deletions(-) delete mode 100644 themes/plog/components/PlogModal.js diff --git a/components/LazyImage.js b/components/LazyImage.js index 73a20f89..039fed37 100644 --- a/components/LazyImage.js +++ b/components/LazyImage.js @@ -1,6 +1,7 @@ import { siteConfig } from '@/lib/config' import Head from 'next/head' import { useEffect, useRef, useState } from 'react' + /** * 图片懒加载 * @param {*} param0 @@ -21,20 +22,21 @@ export default function LazyImage({ }) { const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH') const defaultPlaceholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER') - const imageRef = useRef(null) - const [adjustedSrc, setAdjustedSrc] = useState( - placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER') + const [currentSrc, setCurrentSrc] = useState( + placeholderSrc || defaultPlaceholderSrc ) - if (!placeholderSrc) { - placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER') - } - /** - * 图片加载成功回调 + * 占位图加载成功 */ - const handleImageLoad = () => { + const handleThumbnailLoaded = () => { + if (typeof onLoad === 'function') { + // onLoad() // 触发传递的onLoad回调函数 + } + } + // 原图加载完成 + const handleImageLoaded = img => { if (typeof onLoad === 'function') { onLoad() // 触发传递的onLoad回调函数 } @@ -44,13 +46,27 @@ export default function LazyImage({ */ const handleImageError = () => { if (imageRef.current) { - imageRef.current.src = defaultPlaceholderSrc + // 尝试加载 placeholderSrc，如果失败则加载 defaultPlaceholderSrc + if (imageRef.current.src !== placeholderSrc && placeholderSrc) { + imageRef.current.src = placeholderSrc + } else { + imageRef.current.src = defaultPlaceholderSrc + } } } useEffect(() => { - const adjustedImageSrc = adjustImgSize(src, maxWidth) - setAdjustedSrc(adjustedImageSrc) + const adjustedImageSrc = + adjustImgSize(src, maxWidth) || defaultPlaceholderSrc + + // 加载原图 + const img = new Image() + img.src = adjustedImageSrc + img.onload = () => { + setCurrentSrc(adjustedImageSrc) + handleImageLoaded(adjustedImageSrc) + } + img.onerror = handleImageError const observer = new IntersectionObserver( entries => { @@ -79,9 +95,9 @@ export default function LazyImage({ // 动态添加width、height和className属性，仅在它们为有效值时添加 const imgProps = { ref: imageRef, - src: priority ? adjustedSrc : placeholderSrc, + src: currentSrc, alt: alt, - onLoad: handleImageLoad, + onLoad: handleThumbnailLoaded, // 缩略图加载完成 onError: handleImageError // 添加onError处理函数 } @@ -106,6 +122,7 @@ export default function LazyImage({ if (style) { imgProps.style = style } + return ( <> {/* eslint-disable-next-line @next/next/no-img-element */} @@ -113,24 +130,25 @@ export default function LazyImage({ {/* 预加载 */} {priority && ( - + )} ) } + /** * 根据窗口尺寸决定压缩图片宽度 * @param {*} src * @param {*} maxWidth * @returns */ - const adjustImgSize = (src, maxWidth) => { if (!src) { - return siteConfig('IMG_LAZY_LOAD_PLACEHOLDER') + return null } - const screenWidth = window.screen.width + const screenWidth = + (typeof window !== 'undefined' && window?.screen?.width) || maxWidth // 屏幕尺寸大于默认图片尺寸，没必要再压缩 if (screenWidth > maxWidth) { diff --git a/themes/plog/components/Modal.js b/themes/plog/components/Modal.js index 68f66ca8..ba70b50c 100644 --- a/themes/plog/components/Modal.js +++ b/themes/plog/components/Modal.js @@ -14,7 +14,9 @@ export default function Modal(props) { usePlogGlobal() const { siteInfo, posts } = props const cancelButtonRef = useRef(null) - const img = compressImage( + const thumbnail = + modalContent?.pageCoverThumbnail || siteInfo?.pageCoverThumbnail + const bigImage = compressImage( modalContent?.pageCover || siteInfo?.pageCover, 1200, 85, @@ -92,63 +94,74 @@ export default function Modal(props) { {/* 添加onLoad事件处理函数 */} {/* 添加loading状态 */} + {/*
*/}
- + className={`absolute right-0 bottom-0 m-4 ${loading ? '' : 'hidden'}`}> +
+ {/*
*/} + - {!loading && ( - <> -
-
-

- {modalContent?.title} -

-
-
+
+
+

- {modalContent?.summary} -

+ className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'> + {modalContent?.title} + +
+
+ {modalContent?.summary} +
- {modalContent?.category && ( -
- - {modalContent?.category} - -
- )} -
- {/*
*/} -
- -
-
- -
- {/*
*/} - - )} + {modalContent?.category && ( +
+ + {modalContent?.category} + +
+ )} +
+ + {/* 卡片的阴影遮罩，为了凸显图片上的文字 */} +
+
+
+ + {/*
*/} + +
+ +
+
+ +
+ {/*
*/} + diff --git a/themes/plog/components/PlogModal.js b/themes/plog/components/PlogModal.js deleted file mode 100644 index f08938f2..00000000 --- a/themes/plog/components/PlogModal.js +++ /dev/null @@ -1,28 +0,0 @@ -import { useState } from 'react' -import { Dialog } from '@headlessui/react' - -/** - * 图片弹出模态框 - */ -export default function PlogModal(props) { - const [isOpen, setIsOpen] = useState(true) - - return ( - setIsOpen(false)}> - - Deactivate account - - This will permanently deactivate your account - - -

- Are you sure you want to deactivate your account? All of your data - will be permanently removed. This action cannot be undone. -

- - - - - - ) -}