diff --git a/components/NotionPage.js b/components/NotionPage.js index abb8586e..ace52751 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -1,7 +1,7 @@ import { NotionRenderer } from 'react-notion-x' import dynamic from 'next/dynamic' -import mediumZoom from '@fisch0920/medium-zoom' -import React from 'react' +// import mediumZoom from '@fisch0920/medium-zoom' +import React, { useEffect } from 'react' import { isBrowser } from '@/lib/utils' import { Code } from 'react-notion-x/build/third-party/code' import TweetEmbed from 'react-tweet-embed' @@ -42,16 +42,16 @@ const Tweet = ({ id }) => { } const NotionPage = ({ post, className }) => { - const zoom = isBrowser() && mediumZoom({ - container: '.notion-viewport', - background: 'rgba(0, 0, 0, 0.2)', - scrollOffset: 200, - margin: getMediumZoomMargin() - }) +// const zoom = isBrowser() && mediumZoom({ +// container: '.notion-viewport', +// background: 'rgba(0, 0, 0, 0.2)', +// scrollOffset: 200, +// margin: getMediumZoomMargin() +// }) - const zoomRef = React.useRef(zoom ? zoom.clone() : null) + // const zoomRef = React.useRef(zoom ? zoom.clone() : null) - React.useEffect(() => { + useEffect(() => { setTimeout(() => { if (window.location.hash) { const tocNode = document.getElementById(window.location.hash.substring(1)) @@ -64,18 +64,18 @@ const NotionPage = ({ post, className }) => { setTimeout(() => { if (isBrowser()) { // 将相册gallery下的图片加入放大功能 - const imgList = document.querySelectorAll('.notion-collection-card-cover img') - if (imgList && zoomRef.current) { - for (let i = 0; i < imgList.length; i++) { - (zoomRef.current).attach(imgList[i]) - } - } + // const imgList = document.querySelectorAll('.notion-collection-card-cover img') + // if (imgList && zoomRef.current) { + // for (let i = 0; i < imgList.length; i++) { + // (zoomRef.current).attach(imgList[i]) + // } + // } - // 相册图片点击不跳转 - const cards = document.getElementsByClassName('notion-collection-card') - for (const e of cards) { - e.removeAttribute('href') - } + // 相册图片禁止跳转页面,改为放大图片功能功能 + // const cards = document.getElementsByClassName('notion-collection-card') + // for (const e of cards) { + // e.removeAttribute('href') + // } } }, 800) }, []) @@ -113,22 +113,22 @@ const mapPageUrl = id => { return '/' + id.replace(/-/g, '') } -function getMediumZoomMargin() { - const width = window.innerWidth +// 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 - } -} +// 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 +// } +// } export default NotionPage diff --git a/styles/notion.css b/styles/notion.css index ee915f41..45cc69c4 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -584,12 +584,12 @@ summary > .notion-h { .notion-page-link { display: flex; color: var(--fg-color); - text-decoration: none; + text-decoration: underline; width: 100%; height: 30px; margin: 1px 0; transition: background 120ms ease-in 0s; - pointer-events: none; + /* pointer-events: none; */ } .notion-page-link:hover { @@ -1408,7 +1408,7 @@ code[class*='language-'] { } .notion-collection-card{ - cursor: default !important; + /* cursor: default !important; */ } .notion-collection-card-property .notion-link { @@ -1623,6 +1623,7 @@ code[class*='language-'] { .notion-collection-card-cover .lazy-image-wrapper { padding: 0 !important; + z-index: 20; height: 100%; }