图片缩放，404

themes/Medium/Layout404.js

@@ -1,6 +1,7 @@
+import LayoutBase from './LayoutBase'
 
-export const Layout404 = () => {
-  return <div>
-   404 Not found.
-  </div>
+export const Layout404 = (props) => {
+  return <LayoutBase {...props}>
+   <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
+  </LayoutBase>
 }

themes/Medium/LayoutSlug.js

@@ -13,6 +13,8 @@ import Image from 'next/image'
 import { useGlobal } from '@/lib/global'
 import formatDate from '@/lib/formatDate'
 import Link from 'next/link'
+import mediumZoom from 'medium-zoom'
+import { useEffect, useRef } from 'react'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -34,6 +36,24 @@ export const LayoutSlug = (props) => {
   const { locale } = useGlobal()
   const date = formatDate(post?.date?.start_date || post.createdTime, locale.LOCALE)
 
+  const zoom = typeof window !== 'undefined' && mediumZoom({
+    container: '.notion-viewport',
+    background: 'rgba(0, 0, 0, 0.2)',
+    margin: getMediumZoomMargin()
+  })
+  const zoomRef = useRef(zoom ? zoom.clone() : null)
+
+  useEffect(() => {
+    // 将所有container下的所有图片添加medium-zoom
+    const container = document.getElementById('notion-article')
+    const imgList = container?.getElementsByTagName('img')
+    if (imgList && zoomRef.current) {
+      for (let i = 0; i < imgList.length; i++) {
+        (zoomRef.current).attach(imgList[i])
+      }
+    }
+  })
+
   return <LayoutBase {...props} meta={meta} showInfoCard={false}>
     <h1 className='text-4xl mt-12 font-sans'>{post?.title}</h1>
     <Link href='/about' passHref>
@@ -71,3 +91,21 @@ export const LayoutSlug = (props) => {
     </div>
   </LayoutBase>
 }
+
+function getMediumZoomMargin () {
+  const width = window.innerWidth
+
+  if (width < 500) {
+    return 8
+  } else if (width < 800) {
+    return 20
+  } else if (width < 1280) {
+    return 30
+  } else if (width < 1600) {
+    return 40
+  } else if (width < 1920) {
+    return 48
+  } else {
+    return 72
+  }
+}