diff --git a/components/Live2D.js b/components/Live2D.js index 43578793..89e68301 100644 --- a/components/Live2D.js +++ b/components/Live2D.js @@ -5,7 +5,7 @@ import { loadExternalResource } from '@/lib/utils' import { useEffect } from 'react' export default function Live2D() { - if (!BLOG.WIDGET_PET) { + if (!BLOG.WIDGET_PET || !JSON.parse(BLOG.WIDGET_PET)) { return <> } const { switchTheme } = useGlobal() @@ -29,7 +29,7 @@ function initLive2D() { Promise.all([ // loadExternalResource('https://cdn.zhangxinxu.com/sp/demo/live2d/live2d/js/live2d.js', 'js') loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js') - ]).then(() => { + ]).then((e) => { // https://github.com/xiazeyu/live2d-widget-models loadlive2d('live2d', BLOG.WIDGET_PET_LINK) }) diff --git a/components/NotionPage.js b/components/NotionPage.js index 03b1f1eb..b0c58f5c 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -1,65 +1,51 @@ - -import 'prismjs' -import 'prismjs/components/prism-bash' -import 'prismjs/components/prism-javascript' -import 'prismjs/components/prism-markup' -import 'prismjs/components/prism-python' -import 'prismjs/components/prism-typescript' -import 'prismjs/components/prism-java' - import { NotionRenderer } from 'react-notion-x' -import mediumZoom from 'medium-zoom' -import { useEffect, useRef } from 'react' import dynamic from 'next/dynamic' -import { useRouter } from 'next/router' const Code = dynamic(() => - import('react-notion-x/build/third-party/code').then((m) => m.Code) + import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: false } ) const Collection = dynamic(() => - import('react-notion-x/build/third-party/collection').then( - (m) => m.Collection - ) + import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: false } ) + const Equation = dynamic(() => - import('react-notion-x/build/third-party/equation').then((m) => m.Equation) + import('react-notion-x/build/third-party/equation').then((m) => m.Equation), { ssr: false } ) + const Pdf = dynamic( - () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf), - { - ssr: false - } + () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf), { ssr: false } ) + const Modal = dynamic( - () => import('react-notion-x/build/third-party/modal').then((m) => m.Modal), - { - ssr: false - } + () => import('react-notion-x/build/third-party/modal').then((m) => m.Modal), { ssr: false } ) const NotionPage = ({ post }) => { if (!post || !post.blockMap) { return <>{post?.summary || ''} } - 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) - - const router = useRouter() - - useEffect(() => { - // 将所有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]) - } + setTimeout(() => { + if (typeof document === 'undefined') { + return } - }, [router?.events]) + const buttons = document.getElementsByClassName('notion-code-copy') + for (const e of buttons) { + e.addEventListener('click', fixCopy) + } + }, 500) + + /** + * 复制代码后，会重复 @see https://github.com/tangly1024/NotionNext/issues/165 + * @param {*} e + */ + function fixCopy(e) { + const codeE = e.target.parentElement.parentElement.lastElementChild + console.log(codeE) + const codeEnd = codeE.lastChild + if (codeEnd.nodeName === '#text' && codeE.childNodes.length > 1) { + codeEnd.nodeValue = null + } + } return
{ return '/article/' + id.replace(/-/g, '') } -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 - } -} - export default NotionPage diff --git a/pages/article/[slug].js b/pages/article/[slug].js index 538cbc90..4dfb0738 100644 --- a/pages/article/[slug].js +++ b/pages/article/[slug].js @@ -22,7 +22,7 @@ const Slug = props => { useEffect(() => { setTimeout(() => { if (window) { - const article = document.getElementById('container') + const article = typeof document !== 'undefined' && document.getElementById('container') if (!article) { router.push('/404').then(() => { console.warn('找不到页面', router.asPath) diff --git a/styles/globals.css b/styles/globals.css index dd5d8d73..1df15802 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -113,6 +113,7 @@ nav { .scroll-hidden{ -ms-overflow-style: none; overflow: -moz-scrollbars-none; + scrollbar-width: none; /* firefox */ } .scroll-hidden::-webkit-scrollbar { width: 0 !important } @@ -141,3 +142,7 @@ nav { .shadow-text{ text-shadow: 0.1em 0.1em 0.2em black; } + +.notion-code-copy-button > svg{ + pointer-events:none +} \ No newline at end of file diff --git a/themes/example/LayoutSearch.js b/themes/example/LayoutSearch.js index 110c11a6..fec11e52 100644 --- a/themes/example/LayoutSearch.js +++ b/themes/example/LayoutSearch.js @@ -9,7 +9,7 @@ export const LayoutSearch = props => { const { keyword, posts } = props useEffect(() => { setTimeout(() => { - const container = document.getElementById('container') + const container = typeof document !== 'undefined' && document.getElementById('container') if (container && container.innerHTML) { const re = new RegExp(`${keyword}`, 'gim') container.innerHTML = container.innerHTML.replace(re, `${keyword}`) diff --git a/themes/fukasawa/LayoutSearch.js b/themes/fukasawa/LayoutSearch.js index 46d01031..f3e8da7d 100644 --- a/themes/fukasawa/LayoutSearch.js +++ b/themes/fukasawa/LayoutSearch.js @@ -9,7 +9,7 @@ export const LayoutSearch = (props) => { const currentSearch = keyword || router?.query?.s useEffect(() => { setTimeout(() => { - const container = document.getElementById('container') + const container = typeof document !== 'undefined' && document.getElementById('container') if (container && container.innerHTML) { const re = new RegExp(`${currentSearch}`, 'gim') container.innerHTML = container.innerHTML.replace(re, `${currentSearch}`) diff --git a/themes/fukasawa/LayoutSlug.js b/themes/fukasawa/LayoutSlug.js index 08c128b4..30265a6c 100644 --- a/themes/fukasawa/LayoutSlug.js +++ b/themes/fukasawa/LayoutSlug.js @@ -1,10 +1,4 @@ import { getPageTableOfContents } from 'notion-utils' -import 'prismjs' -import 'prismjs/components/prism-bash' -import 'prismjs/components/prism-javascript' -import 'prismjs/components/prism-markup' -import 'prismjs/components/prism-python' -import 'prismjs/components/prism-typescript' import ArticleDetail from './components/ArticleDetail' import LayoutBase from './LayoutBase' import { ArticleLock } from './components/ArticleLock' @@ -18,8 +12,8 @@ export const LayoutSlug = (props) => { return ( - {!lock && } - {lock && } - + {!lock && } + {lock && } + ) } diff --git a/themes/hexo/Layout404.js b/themes/hexo/Layout404.js index 6140c8fb..f64e8016 100644 --- a/themes/hexo/Layout404.js +++ b/themes/hexo/Layout404.js @@ -1,6 +1,22 @@ import LayoutBase from './LayoutBase' +import { useRouter } from 'next/router' +import { useEffect } from 'react' export const Layout404 = props => { + const router = useRouter() + useEffect(() => { + // 延时3秒如果加载失败就返回首页 + setTimeout(() => { + if (window) { + const article = typeof document !== 'undefined' && document.getElementById('container') + if (!article) { + router.push('/').then(() => { + console.log('找不到页面', router.asPath) + }) + } + } + }, 3000) + }) return (
diff --git a/themes/hexo/components/Progress.js b/themes/hexo/components/Progress.js index 6d388339..b31ae16e 100644 --- a/themes/hexo/components/Progress.js +++ b/themes/hexo/components/Progress.js @@ -9,7 +9,7 @@ const Progress = ({ targetRef, showPercent = true }) => { const currentRef = targetRef?.current || targetRef const [percent, changePercent] = useState(0) const scrollListener = () => { - const target = currentRef || document.getElementById('container') + const target = currentRef || (typeof document !== 'undefined' && document.getElementById('container')) if (target) { const clientHeight = target.clientHeight const scrollY = window.pageYOffset diff --git a/themes/medium/LayoutSearch.js b/themes/medium/LayoutSearch.js index 59a15491..e708eb5c 100644 --- a/themes/medium/LayoutSearch.js +++ b/themes/medium/LayoutSearch.js @@ -11,23 +11,23 @@ export const LayoutSearch = (props) => { const { keyword } = props useEffect(() => { setTimeout(() => { - const container = document.getElementById('container') + const container = typeof document !== 'undefined' && document.getElementById('container') if (container && container.innerHTML) { const re = new RegExp(`${keyword}`, 'gim') container.innerHTML = container.innerHTML.replace(re, `${keyword}`) } }, - 100) + 100) }) return
{locale.NAV.SEARCH}
- - - + + +
- +
} diff --git a/themes/medium/components/Progress.js b/themes/medium/components/Progress.js index d9a13ad9..50d2bc92 100644 --- a/themes/medium/components/Progress.js +++ b/themes/medium/components/Progress.js @@ -9,7 +9,7 @@ const Progress = ({ targetRef, showPercent = true }) => { const currentRef = targetRef?.current || targetRef const [percent, changePercent] = useState(0) const scrollListener = () => { - const target = currentRef || document.getElementById('container') + const target = currentRef || (typeof document !== 'undefined' && document.getElementById('container')) if (target) { const clientHeight = target.clientHeight const scrollY = window.pageYOffset diff --git a/themes/next/Layout404.js b/themes/next/Layout404.js index 64341ec1..530d2c53 100644 --- a/themes/next/Layout404.js +++ b/themes/next/Layout404.js @@ -8,7 +8,7 @@ export const Layout404 = props => { // 延时3秒如果加载失败就返回首页 setTimeout(() => { if (window) { - const article = document.getElementById('container') + const article = typeof document !== 'undefined' && document.getElementById('container') if (!article) { router.push('/').then(() => { console.log('找不到页面', router.asPath) @@ -16,13 +16,13 @@ export const Layout404 = props => { } } }, 3000) - }) + }, []) return
-

404

+

404

页面无法加载，即将返回首页

diff --git a/themes/next/LayoutSearch.js b/themes/next/LayoutSearch.js index 0a1c5fcc..e3e58025 100644 --- a/themes/next/LayoutSearch.js +++ b/themes/next/LayoutSearch.js @@ -2,21 +2,17 @@ import LayoutBase from './LayoutBase' import StickyBar from './components/StickyBar' import BlogPostListScroll from './components/BlogPostListScroll' import { useGlobal } from '@/lib/global' -import { useEffect } from 'react' export const LayoutSearch = (props) => { const { locale } = useGlobal() const { posts, keyword } = props - useEffect(() => { - setTimeout(() => { - const container = document.getElementById('container') - if (container && container.innerHTML) { - const re = new RegExp(`${keyword}`, 'gim') - container.innerHTML = container.innerHTML.replace(re, `${keyword}`) - } - }, - 100) - }) + setTimeout(() => { + const container = typeof document !== 'undefined' && document.getElementById('container') + if (container && container.innerHTML) { + const re = new RegExp(`${keyword}`, 'gim') + container.innerHTML = container.innerHTML.replace(re, `${keyword}`) + } + }, 200) return ( @@ -26,7 +22,7 @@ export const LayoutSearch = (props) => {
- +
) diff --git a/themes/next/components/BlogPostListScroll.js b/themes/next/components/BlogPostListScroll.js index a220c8ad..d3b78fa6 100644 --- a/themes/next/components/BlogPostListScroll.js +++ b/themes/next/components/BlogPostListScroll.js @@ -44,7 +44,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_NE return () => { window.removeEventListener('scroll', scrollTrigger) } - }) + }, []) const targetRef = useRef(null) const { locale } = useGlobal() @@ -57,7 +57,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_NE {/* 文章列表 */}
{postsToShow.map(post => ( - + ))}
@@ -65,7 +65,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_NE
{ handleGetMore() }} - className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow hover:shadow-xl duration-200 dark:text-gray-200' + className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow hover:shadow-xl duration-200 dark:text-gray-200' > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}
diff --git a/themes/next/components/Header.js b/themes/next/components/Header.js index 2b63ee72..37eb5e50 100644 --- a/themes/next/components/Header.js +++ b/themes/next/components/Header.js @@ -27,7 +27,7 @@ export default function Header(props) { }) ) } - }) + }, []) const { isDarkMode } = useGlobal() const autoScrollEnd = () => { @@ -90,7 +90,7 @@ export default function Header(props) { window.removeEventListener('scroll', scrollTrigger) window.removeEventListener('resize', updateHeaderHeight) } - }) + }, []) return (
{ if (window) { initLive2DWife() } - }) + }, []) return <> - + } -function initLive2DWife () { +function initLive2DWife() { // 注意：live2d_path 参数应使用绝对路径 const live2dPath = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/' // const live2d_path = "/live2d-widget/"; diff --git a/themes/next/components/Progress.js b/themes/next/components/Progress.js index 4c4adb9f..19ca0ffa 100644 --- a/themes/next/components/Progress.js +++ b/themes/next/components/Progress.js @@ -9,7 +9,7 @@ const Progress = ({ targetRef, showPercent = true }) => { const currentRef = targetRef?.current || targetRef const [percent, changePercent] = useState(0) const scrollListener = () => { - const target = currentRef || document.getElementById('container') + const target = currentRef || (typeof document !== 'undefined' && document.getElementById('container')) if (target) { const clientHeight = target.clientHeight const scrollY = window.pageYOffset diff --git a/themes/next/components/SideBarDrawer.js b/themes/next/components/SideBarDrawer.js index 9bc04d48..8a22505d 100644 --- a/themes/next/components/SideBarDrawer.js +++ b/themes/next/components/SideBarDrawer.js @@ -18,7 +18,7 @@ const SideBarDrawer = ({ post, cRef, tags, slot, categories, currentCategory }) useEffect(() => { const sideBarWrapperElement = document.getElementById('sidebar-wrapper') sideBarWrapperElement?.classList?.remove('hidden') - }) + }, []) const router = useRouter() useEffect(() => { @@ -52,7 +52,7 @@ const SideBarDrawer = ({ post, cRef, tags, slot, categories, currentCategory })
{/* 背景蒙版 */} -