diff --git a/blog.config.js b/blog.config.js index 8cc40d7a..6f31e859 100644 --- a/blog.config.js +++ b/blog.config.js @@ -8,7 +8,7 @@ const BLOG = { KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开 NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5 NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public - DEBUG_BUTTON: true, // 是否显示调试按钮，可以用来调试不同的主题和样式配置 + DEBUG: JSON.parse(process.env.NEXT_PUBLIC_DEBUG) || false, // 是否显示调试按钮 THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['Next','Hexo',"Fukasawa','Medium'] LANG: 'zh-CN', // e.g 'zh-CN','en-US' see /lib/lang.js for more. diff --git a/components/DebugButton.js b/components/DebugButton.js deleted file mode 100644 index a20c97b2..00000000 --- a/components/DebugButton.js +++ /dev/null @@ -1,50 +0,0 @@ -import { useGlobal } from '@/lib/global' -import * as ThemeMap from '@/themes' -import { useState } from 'react' - -/** - * - * @returns 调试面板 - */ -export function DebugButton () { - const [show, setShow] = useState(false) - const GlobalConfig = useGlobal() - const { theme, setTheme } = GlobalConfig - const allThemes = Object.keys(ThemeMap) - function toggleShow () { - setShow(!show) - } - - /** - * 切换主题 - */ - function changeTheme () { - const currentIndex = allThemes.indexOf(theme) - const newIndex = currentIndex < allThemes.length - 1 ? currentIndex + 1 : 0 - setTheme(allThemes[newIndex]) - } - - return <> -
-
-
当前主题:
-
{theme}
-
-
-
所有主题:
-
{allThemes.join(',')}
-
-
-
更换主题
-
-
-
所有配置:
-

{JSON.stringify(GlobalConfig)}

-
-
- -
-
调试按钮
-
- -} diff --git a/components/DebugPanel.js b/components/DebugPanel.js new file mode 100644 index 00000000..e0641876 --- /dev/null +++ b/components/DebugPanel.js @@ -0,0 +1,138 @@ +import BLOG from '@/blog.config' +import { useGlobal } from '@/lib/global' +import * as ThemeMap from '@/themes' +import { useState, useEffect } from 'react' +import { useRouter } from 'next/router' +import Select from './Select' +/** + * + * @returns 调试面板 + */ +export function DebugPanel () { + const [show, setShow] = useState(false) + const GlobalConfig = useGlobal() + const router = useRouter() + const { theme, setTheme } = GlobalConfig + const allThemes = Object.keys(ThemeMap) + const themeOptions = [] + allThemes.forEach(t => { + themeOptions.push({ value: t, text: t }) + }) + + function toggleShow () { + setShow(!show) + } + + function switchTheme () { + const currentIndex = allThemes.indexOf(theme) + const newIndex = currentIndex < allThemes.length - 1 ? currentIndex + 1 : 0 + changeTheme(allThemes[newIndex]) + } + + useEffect(() => { + const theme = router.query.theme + if (theme && allThemes.indexOf(theme) > -1) { + changeTheme(theme) + } + }) + + /** + * 切换主题 + */ + function changeTheme (theme) { + router.query.theme = '' + setTheme(theme) + } + + function filterResult (text) { + switch (text) { + case 'true': + return true + case 'false': + return false + case '': + return '-' + } + return text + } + + return ( + <> + {/* 调试按钮 */} +
+
+ {show + ? ( +  关闭调试 + ) + : ( +  打开调试 + )} +
+
+ +
+
+ + {this.props.options?.map(o => ( + + ))} + +
+ ) + } +} +Select.defaultProps = { + label: '', + value: '1', + options: [ + { value: '1', text: '选项1' }, + { value: '2', text: '选项2' } + ] +} +export default Select diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js index e6db94a5..b6c33530 100644 --- a/components/SideBarDrawer.js +++ b/components/SideBarDrawer.js @@ -44,7 +44,7 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => { } return