Merge pull request #1098 from tangly1024/fix/website-performance

fix performance
2026-05-14 23:16:49 +00:00 · 2023-06-04 12:49:54 +08:00
parent 0149a290b8 94d399f409
commit 0917274e56
8 changed files with 54 additions and 84 deletions
--- 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 <canvas id="live2d" className='cursor-pointer' width="280" height="250" onClick={handleClick} alt='切换主题' title='切换主题' />
 }
-
-/**
- * 加载宠物
- */
-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)
-}
--- 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) {
--- 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 <></>
--- 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) {
--- a/lib/global.js
+++ b/lib/global.js
@@ -67,9 +67,22 @@ export function GlobalContextProvider({ children }) {
  }

  return (
-    <GlobalContext.Provider value={{ onLoading, changeLoadingState, locale, updateLocale, isDarkMode, updateDarkMode, theme, setTheme, switchTheme, changeTheme }}>
-      {children}
-    </GlobalContext.Provider>
+        <GlobalContext.Provider value={
+            {
+              onLoading,
+              changeLoadingState,
+              locale,
+              updateLocale,
+              isDarkMode,
+              updateDarkMode,
+              theme,
+              setTheme,
+              switchTheme,
+              changeTheme
+            }
+        }>
+            {children}
+        </GlobalContext.Provider>
  )
 }

--- 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 && (
                    <div className="md:w-5/12 overflow-hidden">
-                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                        <Link href={`${post.slug}`} passHref legacyBehavior>
                            <div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }} />
                        </Link>
                    </div>
--- 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 <div className={`flex flex-col justify-between lg:p-6 p-4  ${showPageCover && !showPreview ? 'md:w-7/12 w-full h-56 md:max-h-60 ' : 'w-full '}`}>
-
       <div>
         {/* 标题 */}
         <Link
-            href={`${BLOG.SUB_PATH}/${post.slug}`}
+            href={`${post.slug}`}
            passHref
            className={`replace cursor-pointer hover:underline text-2xl ${showPreview ? 'text-center' : ''
                } leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
--- a/themes/next/components/MenuList.js
+++ b/themes/next/components/MenuList.js
@@ -11,10 +11,10 @@ export const MenuList = (props) => {
  const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>

  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 && <MenuItemDrop key={link?.to} link={link} />)}
+                {links.map(link => link && link.show && <MenuItemDrop key={link?.id} link={link} />)}
            </nav>

            {/* 移动端菜单 */}
            <div id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
-                {links?.map(link => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.to} link={link} />)}
+                {links?.map(link => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.id} link={link} />)}
            </div>
        </>
  )