diff --git a/lib/global.js b/lib/global.js index d64853e4..2565cffa 100644 --- a/lib/global.js +++ b/lib/global.js @@ -27,6 +27,7 @@ export function GlobalContextProvider({ children }) { useEffect(() => { initLocale(lang, locale, updateLang, updateLocale) initDarkMode(isDarkMode, updateDarkMode) + initTheme() if (isBrowser()) { // 监听用户刷新页面 const handleBeforeUnload = (event) => { @@ -55,10 +56,8 @@ export function GlobalContextProvider({ children }) { NProgress.done() setOnLoading(false) } - const queryTheme = getQueryVariable('theme') || BLOG.THEME setTheme(queryTheme) - router.events.on('routeChangeStart', handleStart) router.events.on('routeChangeError', handleStop) router.events.on('routeChangeComplete', handleStop) @@ -98,4 +97,22 @@ export function GlobalContextProvider({ children }) { ) } +/** + * 切换主题时的特殊处理 + * @param {*} setTheme + */ +const initTheme = () => { + if (isBrowser()) { + setTimeout(() => { + const elements = document.querySelectorAll('[id^="theme-"]') + if (elements?.length > 1) { + elements[elements.length - 1].scrollIntoView() + // 删除前面的元素,只保留最后一个元素 + elements[0].parentNode.removeChild(elements[0]) + elements.pop() + } + }, 500) + } +} + export const useGlobal = () => useContext(GlobalContext) diff --git a/themes/theme.js b/themes/theme.js index 15ed1c04..f0db2291 100644 --- a/themes/theme.js +++ b/themes/theme.js @@ -1,6 +1,6 @@ import cookie from 'react-cookies' import BLOG from '@/blog.config' -import { getQueryParam, getQueryVariable, isBrowser } from '../lib/utils' +import { getQueryParam, getQueryVariable } from '../lib/utils' import dynamic from 'next/dynamic' // 使用 __THEME__ 变量来动态导入主题组件 import * as ThemeComponents from '@theme-components' @@ -21,14 +21,6 @@ export const getLayoutByTheme = (router) => { const themeQuery = getQueryParam(router.asPath, 'theme') || BLOG.THEME const layout = getLayoutNameByPath(router.pathname) if (themeQuery !== BLOG.THEME) { - setTimeout(() => { - if (isBrowser()) { - const element = document?.getElementById('theme-' + themeQuery) - element?.scrollIntoView({ - behavior: 'smooth' - }) - } - }, 500) return dynamic(() => import(`@/themes/${themeQuery}/${layout}`), { ssr: true }) } else { return ThemeComponents[layout]