fukasawa减少动画、并支持调整；

图片画质参数支持调节；
博客支持外链文章

components/NotionPage.js

@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic'
 import mediumZoom from '@fisch0920/medium-zoom'
 import { useEffect, useRef } from 'react'
 import 'katex/dist/katex.min.css'
-import { mapImgUrl } from '@/lib/notion/mapImage'
+import { compressImage, mapImgUrl } from '@/lib/notion/mapImage'
 import { isBrowser } from '@/lib/utils'
 import { siteConfig } from '@/lib/config'
 import { NotionRenderer } from 'react-notion-x'
@@ -61,6 +61,11 @@ const Tweet = ({ id }) => {
   return <TweetEmbed tweetId={id} />
 }
 
+/**
+ * Notin渲染成网页的核心组件
+ * @param {*} param0
+ * @returns
+ */
 const NotionPage = ({ post, className }) => {
   useEffect(() => {
     autoScrollToTarget()
@@ -74,6 +79,8 @@ const NotionPage = ({ post, className }) => {
   const zoomRef = useRef(zoom ? zoom.clone() : null)
 
   useEffect(() => {
+    if (!isBrowser) return;
+
     // 将相册gallery下的图片加入放大功能
     if (siteConfig('POST_DISABLE_GALLERY_CLICK')) {
       setTimeout(() => {
@@ -111,6 +118,30 @@ const NotionPage = ({ post, className }) => {
         }
       }
     }
+
+    // 放大图片：调整图片质量
+    const observer = new MutationObserver((mutationsList, observer) => {
+      mutationsList.forEach(mutation => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          if (mutation.target.classList.contains('medium-zoom-image--opened')) {
+            // 等待动画完成后替换为更高清的图像
+            setTimeout(() => {
+            // 获取该元素的 src 属性
+              const src = mutation?.target?.getAttribute('src');
+              //   替换为更高清的图像
+              mutation?.target?.setAttribute('src', compressImage(src, siteConfig('IMAGE_ZOOM_IN_WIDTH', 1200)));
+            }, 800);
+          }
+        }
+      });
+    });
+
+    // 监视整个文档中的元素和属性的变化
+    observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['class'] });
+
+    return () => {
+      observer.disconnect();
+    };
   }, [])
 
   if (!post || !post.blockMap) {