From ff191ea07c95cfe0c7ac7e9d9c4693a5cfb4397e Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Fri, 6 May 2022 14:07:08 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E7=9B=B8=E5=86=8C=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/NotionPage.js | 49 +++++++++++++++++++++++++--------------- 1 file changed, 31 insertions(+), 18 deletions(-) diff --git a/components/NotionPage.js b/components/NotionPage.js index 352dfbea..d1a1a8be 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -2,6 +2,7 @@ import { NotionRenderer } from 'react-notion-x' import dynamic from 'next/dynamic' import mediumZoom from 'medium-zoom' import React from 'react' +import anime from 'animejs' const Code = dynamic(() => import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: false } @@ -31,29 +32,41 @@ const NotionPage = ({ post }) => { background: 'rgba(0, 0, 0, 0.2)', margin: getMediumZoomMargin() }) + const zoomRef = React.useRef(zoom ? zoom.clone() : null) + React.useEffect(() => { + anime({ + targets: 'div:not(.notion-viewport)', // 动效不能加载图片缩放遮罩上。 + keyframes: [ + { translateY: 40 }, + { translateY: 0 } + ], + duration: 3000, + easing: 'easeInOutSine' + }) + }, []) setTimeout(() => { - if (typeof document === 'undefined') { - return - } - const buttons = document.getElementsByClassName('notion-code-copy') - for (const e of buttons) { - e.addEventListener('click', fixCopy) - } - // 将所有container下的所有图片添加medium-zoom - const container = document?.getElementById('container') - const imgList = container?.getElementsByTagName('img') - if (imgList && zoomRef.current) { - for (let i = 0; i < imgList.length; i++) { - (zoomRef.current).attach(imgList[i]) + if (typeof document !== 'undefined') { + const buttons = document.getElementsByClassName('notion-code-copy') + for (const e of buttons) { + e.addEventListener('click', fixCopy) + } + // 将相册gallery下的图片加入放大功能 + // const container = document?.getElementById('container') + 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') - } - }, 500) + }, 800) /** * 复制代码后，会重复 @see https://github.com/tangly1024/NotionNext/issues/165 From a8627114b8d8986bb9ddc6577d8e3751718a7ad6 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Fri, 6 May 2022 14:20:51 +0800 Subject: [PATCH 2/2] =?UTF-8?q?hexo=E4=B8=BB=E9=A2=98=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/NotionPage.js | 12 ------------ styles/globals.css | 2 +- themes/hexo/LayoutBase.js | 4 ++-- themes/hexo/components/MenuList.js | 2 +- themes/hexo/components/SideRight.js | 2 +- themes/hexo/components/TopNav.js | 4 ++-- 6 files changed, 7 insertions(+), 19 deletions(-) diff --git a/components/NotionPage.js b/components/NotionPage.js index d1a1a8be..fe75ff7b 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -2,7 +2,6 @@ import { NotionRenderer } from 'react-notion-x' import dynamic from 'next/dynamic' import mediumZoom from 'medium-zoom' import React from 'react' -import anime from 'animejs' const Code = dynamic(() => import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: false } @@ -34,17 +33,6 @@ const NotionPage = ({ post }) => { }) const zoomRef = React.useRef(zoom ? zoom.clone() : null) - React.useEffect(() => { - anime({ - targets: 'div:not(.notion-viewport)', // 动效不能加载图片缩放遮罩上。 - keyframes: [ - { translateY: 40 }, - { translateY: 0 } - ], - duration: 3000, - easing: 'easeInOutSine' - }) - }, []) setTimeout(() => { if (typeof document !== 'undefined') { diff --git a/styles/globals.css b/styles/globals.css index 0ab1b7be..feb5f75e 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -151,6 +151,6 @@ nav { position: fixed; left: 0; top: 0; - z-index: 50; + z-index: 1000; pointer-events: none; } diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js index 56a975e0..c8ca3f8a 100644 --- a/themes/hexo/LayoutBase.js +++ b/themes/hexo/LayoutBase.js @@ -59,10 +59,10 @@ const LayoutBase = props => { {headerSlot} -
+
{onLoading ? : children} diff --git a/themes/hexo/components/MenuList.js b/themes/hexo/components/MenuList.js index c8103624..3f16a2ff 100644 --- a/themes/hexo/components/MenuList.js +++ b/themes/hexo/components/MenuList.js @@ -21,7 +21,7 @@ const MenuList = (props) => { links = links.concat(customNav) } - return