diff --git a/blog.config.js b/blog.config.js index dfd1498c..6b517655 100644 --- a/blog.config.js +++ b/blog.config.js @@ -91,11 +91,14 @@ const BLOG = { BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX // PrismJs 代码相关 - PRISM_JS_AUTO_LOADER: - 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js', + PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js', PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/', - PRISM_THEME_PATH: - 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes + // 代码主题 https://github.com/PrismJS/prism-themes + PRISM_THEME_PREFIX_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css', // 代码块默认主题 + PRISM_THEME_SWITCH: true, // 是否开启浅色/深色模式代码主题切换 + PRISM_THEME_LIGHT_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-solarizedlight.css', // 浅色模式主题 + PRISM_THEME_DARK_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css', // 深色模式主题 + CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || true, // 代码左上角显示mac的红黄绿图标 CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号 diff --git a/components/PrismMac.js b/components/PrismMac.js index 01f4e65b..9eab8fe7 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -21,21 +21,67 @@ import { useRouter } from 'next/navigation' const PrismMac = () => { const router = useRouter() useEffect(() => { - if (JSON.parse(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 + const handleDarkModeChange = () => { + // 加载prism样式 + loadPrismThemeCSS() + if (JSON.parse(BLOG.CODE_MAC_BAR)) { + loadExternalResource('/css/prism-mac-style.css', 'css') } - renderPrismMac() - renderMermaid() - }) + loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => { + if (window?.Prism?.plugins?.autoloader) { + window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH + } + renderPrismMac() + renderMermaid() + }) + } + handleDarkModeChange() + + const handleDarkModeToggle = () => { + const currentTheme = document.documentElement.className + handleDarkModeChange() + document.documentElement.className = currentTheme === 'light' ? 'dark' : 'light' + } + + const darkModeSwitchButton = document.getElementById('darkModeButton') + darkModeSwitchButton.addEventListener('click', handleDarkModeToggle) + + return () => { + darkModeSwitchButton.removeEventListener('click', handleDarkModeToggle) + } }, [router]) return <> } +/** + * 加载样式 + */ +const loadPrismThemeCSS = () => { + let PRISM_THEME + let PRISM_PREVIOUS + const themeClass = document.documentElement.className + if (BLOG.PRISM_THEME_SWITCH) { + if (themeClass === 'dark') { + PRISM_THEME = BLOG.PRISM_THEME_DARK_PATH + PRISM_PREVIOUS = BLOG.PRISM_THEME_LIGHT_PATH + const previousTheme = document.querySelector(`link[href="${PRISM_PREVIOUS}"]`) + if (previousTheme) { + previousTheme.parentNode.removeChild(previousTheme) + } + } else { + PRISM_THEME = BLOG.PRISM_THEME_LIGHT_PATH + PRISM_PREVIOUS = BLOG.PRISM_THEME_DARK_PATH + const previousTheme = document.querySelector(`link[href="${PRISM_PREVIOUS}"]`) + if (previousTheme) { + previousTheme.parentNode.removeChild(previousTheme) + } + } + loadExternalResource(PRISM_THEME, 'css') + } else { + loadExternalResource(BLOG.PRISM_THEME_PREFIX_PATH, 'css') + } +} + /** * 将mermaid语言 渲染成图片 */