From d92e2baa0a8b739d180c12ea6c06b7cac243b371 Mon Sep 17 00:00:00 2001 From: Jiaxin Peng Date: Tue, 11 Jul 2023 00:44:12 +0100 Subject: [PATCH 1/5] add code highlight theme changed with theme mode --- blog.config.js | 18 ++++++++----- components/PrismMac.js | 58 ++++++++++++++++++++++++++++++++++-------- 2 files changed, 60 insertions(+), 16 deletions(-) diff --git a/blog.config.js b/blog.config.js index dfd1498c..179916f0 100644 --- a/blog.config.js +++ b/blog.config.js @@ -2,11 +2,11 @@ const BLOG = { // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5 NOTION_PAGE_ID: - process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', + process.env.NOTION_PAGE_ID || '418c65e930ff4758994e4aaab12e4a7f', PSEUDO_STATIC: process.env.NEXT_PUBLIC_PSEUDO_STATIC || false, // 伪静态路径，开启后所有文章URL都以 .html 结尾。 NEXT_REVALIDATE_SECOND: process.env.NEXT_PUBLIC_REVALIDATE_SECOND || 5, // 更新内容缓存间隔 单位(秒)；即每个页面有5秒的纯静态期、此期间无论多少次访问都不会抓取notion数据；调大该值有助于节省Vercel资源、同时提升访问速率，但也会使文章更新有延迟。 - THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 主题， 支持 ['next','hexo',"fukasawa','medium','example','matery','gitbook','simple'] @see https://preview.tangly1024.com - THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮 + THEME: process.env.NEXT_PUBLIC_THEME || 'matery', // 主题， 支持 ['next','hexo',"fukasawa','medium','example','matery','gitbook','simple'] @see https://preview.tangly1024.com + THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || true, // 是否显示切换主题按钮 LANG: process.env.NEXT_PUBLIC_LANG || 'zh-CN', // e.g 'zh-CN','en-US' see /lib/lang.js for more. SINCE: 2021, // e.g if leave this empty, current year will be used. APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式 @@ -93,10 +93,16 @@ const BLOG = { // PrismJs 代码相关 PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js', + PRISM_THEME_SWITCH: true, // 是否切换代码块主题 + PRISM_THEME_PREFIX_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css', // 固定代码块主题 + PRISM_THEME_LIGHT_PATH: + 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-solarizedlight.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes + PRISM_THEME_DARK_PATH: + 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes 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 - CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || true, // 代码左上角显示mac的红黄绿图标 + // PRISM_THEME_PATH: + // 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes + CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || false, // 代码左上角显示mac的红黄绿图标 CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号 // Mermaid 图表CDN diff --git a/components/PrismMac.js b/components/PrismMac.js index 01f4e65b..e45cbf83 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -21,17 +21,55 @@ 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 = () => { + if (JSON.parse(BLOG.CODE_MAC_BAR)) { + loadExternalResource('/css/prism-mac-style.css', 'css') } - renderPrismMac() - renderMermaid() - }) + 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') + } + 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 <> } From 86e314a42fdd7d4426eb6dc0720c5bef6b31bbdc Mon Sep 17 00:00:00 2001 From: Jiaxin Peng Date: Tue, 11 Jul 2023 00:50:40 +0100 Subject: [PATCH 2/5] update description --- blog.config.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blog.config.js b/blog.config.js index 179916f0..0c120213 100644 --- a/blog.config.js +++ b/blog.config.js @@ -93,12 +93,12 @@ const BLOG = { // PrismJs 代码相关 PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js', - PRISM_THEME_SWITCH: true, // 是否切换代码块主题 - PRISM_THEME_PREFIX_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css', // 固定代码块主题 + PRISM_THEME_SWITCH: true, // 是够根据网页主题自动切换代码高亮主题 + PRISM_THEME_PREFIX_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css', // 如果开关为false，不更改的代码块主题 PRISM_THEME_LIGHT_PATH: - 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-solarizedlight.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes + 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-solarizedlight.css', // 浅色主题下的代码块高亮 更多参考 https://github.com/PrismJS/prism-themes PRISM_THEME_DARK_PATH: - 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes + 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css', // 深色主题下代码块高亮 更多参考 https://github.com/PrismJS/prism-themes 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 From c3ccb7f72ee92664602d56c1c03eb8ee4e5546ea Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 26 Jul 2023 17:53:26 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E6=B7=B1=E8=89=B2=E6=B5=85=E8=89=B2?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 11 ++++--- components/PrismMac.js | 66 +++++++++++++++++++++++++++++++++++------- 2 files changed, 63 insertions(+), 14 deletions(-) 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语言 渲染成图片 */ From 947fd1daba76311968e10ac6092f972098d1d751 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 26 Jul 2023 17:54:32 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 2 +- components/PrismMac.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blog.config.js b/blog.config.js index 6b517655..fa9a5845 100644 --- a/blog.config.js +++ b/blog.config.js @@ -95,7 +95,7 @@ const BLOG = { PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/', // 代码主题 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_SWITCH: process.env.NEXT_PUBLIC_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', // 深色模式主题 diff --git a/components/PrismMac.js b/components/PrismMac.js index 9eab8fe7..bc3b7a7e 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -60,7 +60,7 @@ const loadPrismThemeCSS = () => { let PRISM_THEME let PRISM_PREVIOUS const themeClass = document.documentElement.className - if (BLOG.PRISM_THEME_SWITCH) { + if (JSON.parse(BLOG.PRISM_THEME_SWITCH)) { if (themeClass === 'dark') { PRISM_THEME = BLOG.PRISM_THEME_DARK_PATH PRISM_PREVIOUS = BLOG.PRISM_THEME_LIGHT_PATH From 155d5ea334dc746579d4ac74d8a189e1cedd19be Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 26 Jul 2023 18:44:45 +0800 Subject: [PATCH 5/5] =?UTF-8?q?code=20=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 2 +- components/PrismMac.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blog.config.js b/blog.config.js index e41393f6..ffb07963 100644 --- a/blog.config.js +++ b/blog.config.js @@ -112,7 +112,7 @@ const BLOG = { 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', // 是否显示行号 + CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || false, // 是否显示行号 CODE_COLLAPSE: process.env.NEXT_PUBLIC_CODE_COLLAPSE || true, // 是否折叠代码框 // END********代码相关******** diff --git a/components/PrismMac.js b/components/PrismMac.js index af7062bb..b37ba503 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -158,7 +158,7 @@ function renderPrismMac() { const container = document?.getElementById('notion-article') // Add line numbers - if (BLOG.CODE_LINE_NUMBERS === 'true') { + if (JSON.parse(BLOG.CODE_LINE_NUMBERS)) { const codeBlocks = container?.getElementsByTagName('pre') if (codeBlocks) { Array.from(codeBlocks).forEach(item => { @@ -192,7 +192,7 @@ function renderPrismMac() { } // 折叠代码行号bug - if (BLOG.CODE_LINE_NUMBERS === 'true') { + if (JSON.parse(BLOG.CODE_LINE_NUMBERS)) { fixCodeLineStyle() } }