diff --git a/components/LazyImage.js b/components/LazyImage.js
index 3e44eb4cae6..4e353ad8527 100644
--- a/components/LazyImage.js
+++ b/components/LazyImage.js
@@ -1,7 +1,6 @@
import { siteConfig } from '@/lib/config'
import Head from 'next/head'
-import React, { useEffect, useRef, useState } from 'react'
-
+import { useEffect, useRef, useState } from 'react'
/**
* 图片懒加载
* @param {*} param0
@@ -20,26 +19,35 @@ export default function LazyImage({
onLoad,
style
}) {
+ const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
const imageRef = useRef(null)
- const [imageLoaded, setImageLoaded] = useState(false)
+ const [adjustedSrc, setAdjustedSrc] = useState(
+ placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+ )
+
if (!placeholderSrc) {
placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
}
+ /**
+ * 图片加载成功回调
+ */
const handleImageLoad = () => {
- setImageLoaded(true)
if (typeof onLoad === 'function') {
onLoad() // 触发传递的onLoad回调函数
}
}
useEffect(() => {
+ const adjustedImageSrc = adjustImgSize(src, maxWidth)
+ setAdjustedSrc(adjustedImageSrc)
+
const observer = new IntersectionObserver(
- (entries) => {
- entries.forEach((entry) => {
+ entries => {
+ entries.forEach(entry => {
if (entry.isIntersecting) {
const lazyImage = entry.target
- lazyImage.src = src
+ lazyImage.src = adjustedImageSrc
observer.unobserve(lazyImage)
}
})
@@ -56,12 +64,12 @@ export default function LazyImage({
observer.unobserve(imageRef.current)
}
}
- }, [src])
+ }, [src, maxWidth])
// 动态添加width、height和className属性，仅在它们为有效值时添加
const imgProps = {
ref: imageRef,
- src: imageLoaded ? src : placeholderSrc,
+ src: priority ? adjustedSrc : placeholderSrc,
alt: alt,
onLoad: handleImageLoad
}
@@ -87,12 +95,44 @@ export default function LazyImage({
if (style) {
imgProps.style = style
}
- return (<>
- {/* eslint-disable-next-line @next/next/no-img-element */}
- ![]()
- {/* 预加载 */}
- {priority &&
-
- }
- )
+ return (
+ <>
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ ![]()
+ {/* 预加载 */}
+ {priority && (
+
+
+
+ )}
+
+ )
+}
+/**
+ * 根据窗口尺寸决定压缩图片宽度
+ * @param {*} src
+ * @param {*} maxWidth
+ * @returns
+ */
+
+const adjustImgSize = (src, maxWidth) => {
+ if (!src) {
+ return siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+ }
+ const screenWidth = window.screen.width
+
+ // 屏幕尺寸大于默认图片尺寸，没必要再压缩
+ if (screenWidth > maxWidth) {
+ return src
+ }
+
+ // 正则表达式，用于匹配 URL 中的 width 参数
+ const widthRegex = /width=\d+/
+ // 正则表达式，用于匹配 URL 中的 w 参数
+ const wRegex = /w=\d+/
+
+ // 使用正则表达式替换 width/w 参数
+ return src
+ .replace(widthRegex, `width=${screenWidth}`)
+ .replace(wRegex, `w=${screenWidth}`)
}
diff --git a/components/NotionPage.js b/components/NotionPage.js
index f8e8e396cd0..41716cf4eed 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -211,13 +211,16 @@ const Equation = dynamic(
{ ssr: false }
)
-// 文档
-const Pdf = dynamic(
- () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
- {
- ssr: false
- }
-)
+// 原版文档
+// const Pdf = dynamic(
+// () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
+// {
+// ssr: false
+// }
+// )
+const Pdf = dynamic(() => import('@/components/Pdf').then(m => m.Pdf), {
+ ssr: false
+})
// 美化代码 from: https://github.com/txs
const PrismMac = dynamic(() => import('@/components/PrismMac'), {
diff --git a/components/Pdf.js b/components/Pdf.js
new file mode 100644
index 00000000000..6f4a832115b
--- /dev/null
+++ b/components/Pdf.js
@@ -0,0 +1,14 @@
+/**
+ * 渲染pdf
+ * 直接用googledocs预览pdf
+ * @param {*} file
+ * @returns
+ */
+export function Pdf({ file }) {
+ const src =
+ 'https://docs.google.com/viewer?embedded=true&url=' +
+ encodeURIComponent(file)
+ return (
+
+ )
+}
diff --git a/styles/notion.css b/styles/notion.css
index 83c5327b5d9..0991011e3d3 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -1976,9 +1976,9 @@ svg + .notion-page-title-text {
/* color: var(--notion-gray); */
}
-.notion-asset-wrapper-pdf > div {
+/* .notion-asset-wrapper-pdf > div {
width: unset !important;
-}
+} */
/* pdf预览适配页面 */
.react-pdf__Page__canvas,
diff --git a/themes/commerce/components/Footer.js b/themes/commerce/components/Footer.js
index 27a558df630..a3eda45af26 100644
--- a/themes/commerce/components/Footer.js
+++ b/themes/commerce/components/Footer.js
@@ -167,7 +167,7 @@ const Footer = props => {
dangerouslySetInnerHTML={{
__html: siteConfig(
'COMMERCE_FOOTER_RIGHT_TEXT',
- null,
+ '',
CONFIG
)
}}>