fix: 图片放大失效、作者头像取消旋转效果、图片加载失败时增加一个原有src属性的展示属性

packages/website/components/AuthorCard/index.tsx

@@ -3,8 +3,8 @@ import { useContext, useEffect, useMemo } from "react";
 import Headroom from "headroom.js";
 import { SocialItem } from "../../api/getAllData";
 import SocialCard from "../SocialCard";
-import ImageBoxFuture from "../ImageBoxFuture";
 import { ThemeContext } from "../../utils/themeContext";
+import ImageBox from "../ImageBox";
 export interface AuthorCardProps {
   author: string;
   desc: string;
@@ -52,12 +52,13 @@ export default function (props: { option: AuthorCardProps }) {
     <div id="author-card" className="sticky ">
       <div className="w-52 flex flex-col justify-center items-center bg-white pt-6  pb-4 card-shadow ml-2 dark:bg-dark dark:card-shadow-dark">
         <div className="px-10 flex flex-col justify-center items-center">
-          <ImageBoxFuture
+          <ImageBox
             alt="author logo"
-            className="rounded-full hover:rotate-180 duration-500 transition-all dark:filter-dark"
+            className="rounded-full  dark:filter-dark"
             src={logoUrl}
             width={120}
             height={120}
+            lazyLoad={false}
           />
 
           <div className="mt-2 font-semibold text-gray-600 mb-2 dark:text-dark">

packages/website/components/ImageBox/index.tsx

@@ -1,6 +1,7 @@
-import "react-photo-view/dist/react-photo-view.css";
-import { PhotoView } from "react-photo-view";
-import { useState } from "react";
+// import "react-photo-view/dist/react-photo-view.css";
+// import { PhotoView } from "react-photo-view";
+import { useEffect, useRef, useState } from "react";
+import m from "medium-zoom"
 export const errorImg =
   "data:image/png;base64,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";
 
@@ -14,11 +15,22 @@ export default function (props: {
   style?: any;
 }) {
   const [error, setError] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const hasInitRef = useRef(false);
+  useEffect(() => {
+    if (!error) {
+      if (imgRef.current && !hasInitRef.current) {
+        hasInitRef.current = true
+        m(imgRef.current)
+      }
+    }
+  }, [error])
   if (!error) {
     return (
       <>
-        <PhotoView src={props.src}>
+        {/* <PhotoView src={props.src}> */}
           <img
+          ref={imgRef}
             className={props.className}
             src={props.src}
             alt={props.alt}
@@ -30,7 +42,7 @@ export default function (props: {
             style={props.style}
             loading={props.lazyLoad ? "lazy" : undefined}
           />
-        </PhotoView>
+        {/* </PhotoView> */}
       </>
     );
   } else {
@@ -39,9 +51,11 @@ export default function (props: {
         className={props.className}
         src={errorImg}
         alt={props.alt}
+        data-src={props.src}
         width={props.width}
         height={props.height}
         style={props.style}
+        title={`图片加载失败: ${props.src}`}
         loading={props.lazyLoad ? "lazy" : undefined}
       />
     );

packages/website/components/Layout/index.tsx

@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from "react";
 import BaiduAnalysis from "../BaiduAnalysis";
 import GaAnalysis from "../gaAnalysis";
 import { LayoutProps } from "../../utils/getLayoutProps";
-import ImageProvider from "../ImageProvider";
+// import ImageProvider from "../ImageProvider";
 import { RealThemeType, ThemeContext } from "../../utils/themeContext";
 import { getTheme } from "../../utils/theme";
 import CustomLayout from "../CustomLayout";
@@ -69,7 +69,7 @@ export default function (props: {
         }}
       >
         <Toaster />
-        <ImageProvider>
+        {/* <ImageProvider> */}
           <NavBar
             openArticleLinksInNewWindow={
               props.option.openArticleLinksInNewWindow == "true"
@@ -109,7 +109,7 @@ export default function (props: {
               gaBeianUrl={props.option.gaBeianUrl}
             />
           </div>
-        </ImageProvider>
+        {/* </ImageProvider> */}
       </ThemeContext.Provider>
       {props.option.enableCustomizing == "true" && (
         <CustomLayout

packages/website/components/Markdown/img.tsx

@@ -0,0 +1,23 @@
+import { visit } from "unist-util-visit";
+import { BytemdPlugin } from "bytemd";
+import m from "medium-zoom"
+const ImgZoomPlugin = () => (tree) => {
+  visit(tree, (node) => {
+    if (node.type === "element" && node.tagName === "img") {
+      node.properties.className += " img-zoom"
+    }
+  })
+}
+
+export function Img(): BytemdPlugin {
+  return {
+    rehype: (processor) => processor.use(ImgZoomPlugin),
+    viewerEffect: ({ markdownBody }) => {
+      markdownBody.querySelectorAll(".img-zoom").forEach((img: HTMLImageElement) => {
+        if (img.getAttribute("data-zoomed")) return
+        img.setAttribute("data-zoomed", "true")
+        m(img)
+      })
+    }
+  }
+}

packages/website/components/Markdown/index.tsx

@@ -2,25 +2,25 @@ import { Viewer } from "@bytemd/react"
 import gfm from '@bytemd/plugin-gfm';
 import highlight from '@bytemd/plugin-highlight-ssr';
 import math from '@bytemd/plugin-math-ssr';
-import mediumZoom from '@bytemd/plugin-medium-zoom';
 import mermaid from '@bytemd/plugin-mermaid'
 import { customContainer } from './customContainer';;
 import "katex/dist/katex.min.css";
 import rawHTML from "./rawHTML";
 import { customCodeBlock } from "./codeBlock";
 import { LinkTarget } from "./linkTarget";
 import { Heading } from "./heading";
+import { Img } from "./img";
 const plugins = [
   rawHTML(),
   gfm(),
   highlight(),
   math(),
-  mediumZoom(),
   mermaid(),
   customContainer(),
   customCodeBlock(),
   LinkTarget(),
   Heading(),
+  Img(),
 ]
 const sanitize = (schema) => {
   schema.protocols.src.push('data')

packages/website/components/SocialIcon/index.tsx

@@ -3,8 +3,8 @@ import { SocialItem } from "../../api/getAllData";
 import { getIcon } from "../../utils/getIcon";
 import { Popover, ArrowContainer } from "react-tiny-popover";
 import { capitalize } from "../../utils/capitalize";
-import ImageBoxFuture from "../ImageBoxFuture";
 import { ThemeContext } from "../../utils/themeContext";
+import ImageBox from "../ImageBox";
 
 export default function (props: { item: SocialItem }) {
   const { theme } = useContext(ThemeContext);
@@ -72,12 +72,13 @@ export default function (props: { item: SocialItem }) {
                 className="card-shadow bg-white dark:bg-dark-2 dark:card-shadow-dark"
                 style={{ height: 280 }}
               >
-                <ImageBoxFuture
+                <ImageBox
                   alt="logo wechat qrcode"
                   src={weChatUrl}
                   width={200}
                   height={280}
                   className={""}
+                  lazyLoad={true}
                 />
               </div>
             </ArrowContainer>

packages/website/package.json

@@ -12,7 +12,6 @@
     "@bytemd/plugin-gfm": "^1.17.2",
     "@bytemd/plugin-highlight-ssr": "^1.20.2",
     "@bytemd/plugin-math-ssr": "^1.20.2",
-    "@bytemd/plugin-medium-zoom": "^1.17.2",
     "@bytemd/plugin-mermaid": "^1.17.2",
     "@bytemd/react": "^1.17.2",
     "@next/bundle-analyzer": "^13.2.4",
@@ -27,6 +26,7 @@
     "js-base64": "^3.7.5",
     "katex": "^0.16.4",
     "lodash": "^4.17.21",
+    "medium-zoom": "^1.0.8",
     "mermaid": "^10.0.2",
     "next": "^13.2.4",
     "react": "^18.2.0",

packages/website/pages/_app.tsx

@@ -9,6 +9,7 @@ import "../styles/scrollbar.css";
 import "../styles/custom-container.css";
 import "../styles/code-light.css";
 import "../styles/code-dark.css";
+import "../styles/zoom.css";
 import type { AppProps } from "next/app";
 import { GlobalContext, GlobalState } from "../utils/globalContext";
 import { useCallback, useEffect, useRef, useState } from "react";

packages/website/styles/zoom.css

@@ -0,0 +1,12 @@
+.medium-zoom-overlay {
+  z-index: 1300;
+  background: white !important;
+}
+
+.dark .medium-zoom-overlay {
+  background: #1d2025 !important;
+}
+
+.medium-zoom-image--opened {
+  z-index: 1400;
+}