diff --git a/themes/Medium/Layout404.js b/themes/Medium/Layout404.js
index cd28a607..1212e8e4 100644
--- a/themes/Medium/Layout404.js
+++ b/themes/Medium/Layout404.js
@@ -1,6 +1,7 @@
+import LayoutBase from './LayoutBase'
-export const Layout404 = () => {
- return
- 404 Not found.
-
+export const Layout404 = (props) => {
+ return
+ 404 Not found.
+
}
diff --git a/themes/Medium/LayoutSlug.js b/themes/Medium/LayoutSlug.js
index cd2a349d..79ac1dc3 100644
--- a/themes/Medium/LayoutSlug.js
+++ b/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
{post?.title}
@@ -71,3 +91,21 @@ export const LayoutSlug = (props) => {
}
+
+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
+ }
+}