From 86241e15254c817bc99b0b71fa0b55fbe039c168 Mon Sep 17 00:00:00 2001 From: GreyAir Date: Mon, 27 May 2024 08:25:08 +0000 Subject: [PATCH 1/9] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E9=9A=90=E8=97=8F=E8=AF=84=E8=AE=BA=E7=9A=84?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Comment.js | 154 ++++++++++++++++---------------- lib/notion/getPageProperties.js | 1 + 2 files changed, 79 insertions(+), 76 deletions(-) diff --git a/components/Comment.js b/components/Comment.js index ba0d4256f33..bc702c4d0da 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -121,82 +121,84 @@ const Comment = ({ frontMatter, className }) => { return null } - return ( -
- {/* 延迟加载评论区 */} - {!shouldLoad && ( -
- Loading... - -
- )} - - {shouldLoad && ( - - {COMMENT_ARTALK_SERVER && ( -
- -
- )} - - {COMMENT_TWIKOO_ENV_ID && ( -
- -
- )} - - {COMMENT_WALINE_SERVER_URL && ( -
- -
- )} - - {COMMENT_VALINE_APP_ID && ( -
- -
- )} - - {COMMENT_GISCUS_REPO && ( -
- -
- )} - - {COMMENT_CUSDIS_APP_ID && ( -
- -
- )} - - {COMMENT_UTTERRANCES_REPO && ( -
- -
- )} - - {COMMENT_GITALK_CLIENT_ID && ( -
- -
- )} - - {COMMENT_WEBMENTION_ENABLE && ( -
- -
- )} - - )} -
- ) + if (frontMatter?.comment != 'Hide') { + return ( +
+ {/* 延迟加载评论区 */} + {!shouldLoad && ( +
+ Loading... + +
+ )} + + {shouldLoad && ( + + {COMMENT_ARTALK_SERVER && ( +
+ +
+ )} + + {COMMENT_TWIKOO_ENV_ID && ( +
+ +
+ )} + + {COMMENT_WALINE_SERVER_URL && ( +
+ +
+ )} + + {COMMENT_VALINE_APP_ID && ( +
+ +
+ )} + + {COMMENT_GISCUS_REPO && ( +
+ +
+ )} + + {COMMENT_CUSDIS_APP_ID && ( +
+ +
+ )} + + {COMMENT_UTTERRANCES_REPO && ( +
+ +
+ )} + + {COMMENT_GITALK_CLIENT_ID && ( +
+ +
+ )} + + {COMMENT_WEBMENTION_ENABLE && ( +
+ +
+ )} + + )} +
+ ) + } } export default Comment diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js index 38eede18bdb..17f88e4eefa 100644 --- a/lib/notion/getPageProperties.js +++ b/lib/notion/getPageProperties.js @@ -94,6 +94,7 @@ export default async function getPageProperties( properties.type = properties.type?.[0] || '' properties.status = properties.status?.[0] || '' properties.category = properties.category?.[0] || '' + properties.comment = properties.comment?.[0] || '' // 映射值：用户个性化type和status字段的下拉框选项，在此映射回代码的英文标识 mapProperties(properties) From 34292132e794f2cfe71b419ff4063c84633fdd62 Mon Sep 17 00:00:00 2001 From: GreyAir Date: Mon, 27 May 2024 09:01:15 +0000 Subject: [PATCH 2/9] fix bug --- components/Comment.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Comment.js b/components/Comment.js index bc702c4d0da..a2b73c05045 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -121,7 +121,7 @@ const Comment = ({ frontMatter, className }) => { return null } - if (frontMatter?.comment != 'Hide') { + if (frontMatter?.comment !== 'Hide') { return (
Date: Fri, 31 May 2024 10:36:07 +0800 Subject: [PATCH 3/9] =?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 | 101 ++++++++++++++++------------ themes/plog/components/PlogModal.js | 28 -------- 3 files changed, 93 insertions(+), 90 deletions(-) delete mode 100644 themes/plog/components/PlogModal.js diff --git a/components/LazyImage.js b/components/LazyImage.js index 73a20f89dde..039fed37656 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 68f66ca8ae6..ba70b50c2f5 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} -

- - {modalContent?.category && ( -
- - {modalContent?.category} - -
- )} -
- {/*
*/} -
- + className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'> + {modalContent?.title} +
- + style={{ textShadow: '0.1em 0.1em 0.2em black' }} + className={ + 'line-clamp-3 md:line-clamp-none overflow-hidden cursor-pointer text-gray-50 rounded-lg m-2' + }> + {modalContent?.summary}
- {/*
*/} - - )} + + {modalContent?.category && ( +
+ + {modalContent?.category} + +
+ )} +
+ + {/* 卡片的阴影遮罩，为了凸显图片上的文字 */} +
+
+
+ + {/*
*/} + +
+ +
+
+ +
+ {/*
*/} +
diff --git a/themes/plog/components/PlogModal.js b/themes/plog/components/PlogModal.js deleted file mode 100644 index f08938f25a0..00000000000 --- 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. -

- - - - - - ) -} From 790ae39930c35867feaff73e7d16abc19505342a Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Fri, 31 May 2024 10:36:16 +0800 Subject: [PATCH 4/9] =?UTF-8?q?HEO=20=E7=9B=AE=E5=BD=95=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/heo/components/Catalog.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/heo/components/Catalog.js b/themes/heo/components/Catalog.js index 1ec3dabb911..c94622aa754 100644 --- a/themes/heo/components/Catalog.js +++ b/themes/heo/components/Catalog.js @@ -63,14 +63,14 @@ const Catalog = ({ toc }) => {
{locale.COMMON.TABLE_OF_CONTENTS}