From 94d399f4092334db4c9427a60c789e5a7c9ef7da Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sun, 4 Jun 2023 12:48:26 +0800 Subject: [PATCH] fix performance --- components/Live2D.js | 41 ++++++++-------------- components/NotionPage.js | 29 +-------------- components/PrismMac.js | 28 +++++++-------- components/TwikooCommentCounter.js | 2 +- lib/global.js | 19 ++++++++-- themes/hexo/components/BlogPostCard.js | 3 +- themes/hexo/components/BlogPostCardInfo.js | 4 +-- themes/next/components/MenuList.js | 12 +++---- 8 files changed, 54 insertions(+), 84 deletions(-) diff --git a/components/Live2D.js b/components/Live2D.js index 74522cc2..ba4b9065 100644 --- a/components/Live2D.js +++ b/components/Live2D.js @@ -2,19 +2,25 @@ import BLOG from '@/blog.config' import { useGlobal } from '@/lib/global' import { loadExternalResource } from '@/lib/utils' -import React from 'react' +import { useEffect } from 'react' export default function Live2D() { - const { switchTheme } = useGlobal() + const { theme, switchTheme } = useGlobal() - React.useEffect(() => { + useEffect(() => { if (BLOG.WIDGET_PET) { - window.addEventListener('scroll', initLive2D) - return () => { - window.removeEventListener('scroll', initLive2D) - } + // setLive2DLoaded(true) + // console.log('加载宠物挂件') + Promise.all([ + loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js') + ]).then((e) => { + if (window?.loadlive2d) { + // https://github.com/xiazeyu/live2d-widget-models + loadlive2d('live2d', BLOG.WIDGET_PET_LINK) + } + }) } - }, []) + }, [theme]) function handleClick() { if (BLOG.WIDGET_PET_SWITCH_THEME) { @@ -28,22 +34,3 @@ export default function Live2D() { return } - -/** - * 加载宠物 - */ -function initLive2D() { - window.removeEventListener('scroll', initLive2D) - setTimeout(() => { - // 加载 waifu.css live2d.min.js waifu-tips.js - // if (screen.width >= 768) { - 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((e) => { - // https://github.com/xiazeyu/live2d-widget-models - loadlive2d('live2d', BLOG.WIDGET_PET_LINK) - }) - // } - }, 300) -} diff --git a/components/NotionPage.js b/components/NotionPage.js index 85b5573e..c2466e03 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 '@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,15 +41,7 @@ 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 zoomRef = React.useRef(zoom ? zoom.clone() : null) - + // 滚动到评论区 useEffect(() => { setTimeout(() => { if (window.location.hash) { @@ -60,24 +51,6 @@ const NotionPage = ({ post, className }) => { } } }, 180) - - 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 cards = document.getElementsByClassName('notion-collection-card') - // for (const e of cards) { - // e.removeAttribute('href') - // } - } - }, 800) }, []) if (!post || !post.blockMap) { diff --git a/components/PrismMac.js b/components/PrismMac.js index b2f9ce90..0350fa60 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect } from 'react' import Prism from 'prismjs' // 所有语言的prismjs 使用autoloader引入 // import 'prismjs/plugins/autoloader/prism-autoloader' @@ -18,20 +18,20 @@ import { isBrowser, loadExternalResource } from '@/lib/utils' * @returns */ const PrismMac = () => { - if (isBrowser()) { - if (BLOG.CODE_MAC_BAR) { - loadExternalResource('/css/prism-mac-style.css', 'css') - } - loadExternalResource(BLOG.PRISM_THEME_PATH, 'css') - loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => { - if (window?.Prism?.plugins?.autoloader) { - window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH + useEffect(() => { + if (isBrowser()) { + if (BLOG.CODE_MAC_BAR) { + loadExternalResource('/css/prism-mac-style.css', 'css') } - renderPrismMac() - }) - } - - React.useEffect(() => { + loadExternalResource(BLOG.PRISM_THEME_PATH, 'css') + loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => { + console.log('渲染公式图表') + if (window?.Prism?.plugins?.autoloader) { + window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH + } + renderPrismMac() + }) + } renderMermaid() }, []) return <> diff --git a/components/TwikooCommentCounter.js b/components/TwikooCommentCounter.js index 448b51b8..c847a176 100644 --- a/components/TwikooCommentCounter.js +++ b/components/TwikooCommentCounter.js @@ -27,7 +27,7 @@ const TwikooCommentCounter = (props) => { urls: posts.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数 includeReply: true // 评论数是否包括回复，默认：false }).then(function (res) { - console.log('查询', res) + // console.log('查询', res) commentsData = res updateCommentCount() }).catch(function (err) { diff --git a/lib/global.js b/lib/global.js index e7144aa9..6b6d86ce 100644 --- a/lib/global.js +++ b/lib/global.js @@ -67,9 +67,22 @@ export function GlobalContextProvider({ children }) { } return ( - - {children} - + + {children} + ) } diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js index 56a69368..234acdac 100644 --- a/themes/hexo/components/BlogPostCard.js +++ b/themes/hexo/components/BlogPostCard.js @@ -1,4 +1,3 @@ -import BLOG from '@/blog.config' import Link from 'next/link' import React from 'react' import CONFIG_HEXO from '../config_hexo' @@ -35,7 +34,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { {/* 图片封面 */} {showPageCover && (
- +
diff --git a/themes/hexo/components/BlogPostCardInfo.js b/themes/hexo/components/BlogPostCardInfo.js index a1e562a0..a741c059 100644 --- a/themes/hexo/components/BlogPostCardInfo.js +++ b/themes/hexo/components/BlogPostCardInfo.js @@ -1,4 +1,3 @@ -import BLOG from '@/blog.config' import NotionPage from '@/components/NotionPage' import Link from 'next/link' import TagItemMini from './TagItemMini' @@ -11,11 +10,10 @@ import TwikooCommentCount from '@/components/TwikooCommentCount' */ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary }) => { return
-
{/* 标题 */} diff --git a/themes/next/components/MenuList.js b/themes/next/components/MenuList.js index 29611728..2953de23 100644 --- a/themes/next/components/MenuList.js +++ b/themes/next/components/MenuList.js @@ -11,10 +11,10 @@ export const MenuList = (props) => { const archiveSlot =
{postCount}
const defaultLinks = [ - { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true }, - { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_NEXT.MENU_CATEGORY }, - { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_NEXT.MENU_TAG }, - { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_NEXT.MENU_ARCHIVE } + { id: 1, icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true }, + { id: 2, icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_NEXT.MENU_CATEGORY }, + { id: 3, icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_NEXT.MENU_TAG }, + { id: 4, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_NEXT.MENU_ARCHIVE } ] let links = [].concat(defaultLinks) @@ -40,12 +40,12 @@ export const MenuList = (props) => { data-aos-once="true" data-aos-anchor-placement="top-bottom" className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'> - {links.map(link => link && link.show && )} + {links.map(link => link && link.show && )} {/* 移动端菜单 */} )