Merge pull request #43 from tangly1024/theme-medium

Theme medium

README.md

@@ -47,10 +47,13 @@
 - 更多特性、欢迎移步[我的博客](https://tangly1024.com/article/notion-next)查看
 
 ## 主题样式
-|||
+| 主题截图 | 预览地址 |
 |--|--|
-| ![Next Theme](/docs/theme-next.png) | ![Hexo Theme](/docs/theme-hexo.png) |
-| ![Medium Theme](/docs/theme-medium.png) | ![Fukasawa Theme](/docs/theme-fukasawa.png) |
+| <img src='./docs/theme-next.png' width='300'/> | [notion-next.tangly1024.com](notion-next.tangly1024.com) |
+| <img src='./docs/theme-medium.png' width='300'/>| [https://notion-medium.tangly1024.com/](https://notion-medium.tangly1024.com/) |
+| <img src='./docs/theme-hexo.png' width='300'/> | [http://notion-hexo.tangly1024.com/](http://notion-hexo.tangly1024.com/) |
+| <img src='./docs/theme-fukasawa.png' width='300'/>| [https://notion-fukasawa.tangly1024.com/](https://notion-fukasawa.tangly1024.com/) |
+
 
 ## 更新日志
 请移步 [更新文档](https://docs.tangly1024.com/zh/changelog)查看

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
+  }
+}