diff --git a/components/DebugPanel.js b/components/DebugPanel.js
index e2cf5748..bd8a9e17 100644
--- a/components/DebugPanel.js
+++ b/components/DebugPanel.js
@@ -1,6 +1,6 @@
import BLOG from '@/blog.config'
import * as ThemeMap from '@/themes'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
import Select from './Select'
import { ALL_THEME } from '@/themes'
import { useGlobal } from '@/lib/global'
@@ -8,20 +8,40 @@ import { useGlobal } from '@/lib/global'
*
* @returns 调试面板
*/
-export function DebugPanel () {
+export function DebugPanel() {
const [show, setShow] = useState(false)
- const { theme, changeTheme, switchTheme } = useGlobal()
+ const { theme, changeTheme, switchTheme, locale } = useGlobal()
+ const [siteConfig, updateSiteConfig] = useState({})
+ const [themeConfig, updateThemeConfig] = useState({})
+ const [debugTheme, updateDebugTheme] = useState(BLOG.THEME)
- const themeOptions = []
- ALL_THEME.forEach(t => {
- themeOptions.push({ value: t, text: t })
- })
+ // 主题下拉框
+ const themeOptions = ALL_THEME.map(t => ({ value: t, text: t }))
- function toggleShow () {
+ useEffect(() => {
+ changeTheme(BLOG.THEME)
+ updateSiteConfig(Object.assign({}, BLOG))
+ updateThemeConfig(Object.assign({}, ThemeMap[BLOG.THEME].THEME_CONFIG))
+ }, [])
+
+ function toggleShow() {
setShow(!show)
}
- function filterResult (text) {
+ function handleChangeDebugTheme() {
+ switchTheme()
+ updateThemeConfig(Object.assign({}, ThemeMap[theme].THEME_CONFIG))
+ updateDebugTheme(theme)
+ console.log('更换主题', debugTheme)
+ }
+
+ function handleUpdateDebugTheme(e) {
+ changeTheme(e)
+ updateThemeConfig(Object.assign({}, ThemeMap[theme].THEME_CONFIG))
+ updateDebugTheme(e)
+ }
+
+ function filterResult(text) {
switch (text) {
case 'true':
return true
@@ -34,77 +54,72 @@ export function DebugPanel () {
}
return (
- <>
- {/* 调试按钮 */}
-
-
- {show
- ? (
- 关闭调试
- )
- : (
- 调试主题
- )}
-
-
-
- {/* 调试侧拉抽屉 */}
-
-
-
-
-
- 站点配置[blog.config.js]
-
-
- {Object.keys(BLOG).map(k => (
-
-
- {k}
-
-
- {filterResult(BLOG[k] + '')}
-
-
- ))}
-
-
-
-
- 主题配置{'(config_' + theme + '.js)'}:
-
-
- {Object.keys(ThemeMap[theme].THEME_CONFIG).map(k => (
-
-
- {k}
-
-
- {filterResult(ThemeMap[theme].THEME_CONFIG[k] + '')}
-
+ <>
+ {/* 调试按钮 */}
+
+
+ {show
+ ? {locale.COMMON.DEBUG_CLOSE}
+ : {locale.COMMON.DEBUG_OPEN}}
- ))}
-
-
-
- >
+
+
+ {/* 调试侧拉抽屉 */}
+
+
+
+
+
+
+ 主题配置{`config_${debugTheme}.js`}:
+
+
+ {Object.keys(themeConfig).map(k => (
+
+
+ {k}
+
+
+ {filterResult(themeConfig[k] + '')}
+
+
+ ))}
+
+
+
+ 站点配置[blog.config.js]
+
+
+ {siteConfig && Object.keys(siteConfig).map(k => (
+
+
+ {k}
+
+
+ {filterResult(siteConfig[k] + '')}
+
+
+ ))}
+
+
+
+
+ >
)
}
diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
index 464a79d7..b5438cde 100644
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -35,7 +35,10 @@ export default {
SUBMIT: 'Submit',
POST_TIME: 'Post on',
LAST_EDITED_TIME: 'Last edited',
- RECENT_COMMENTS: 'Recent Comments'
+ RECENT_COMMENTS: 'Recent Comments',
+ DEBUG_OPEN: 'Debug',
+ DEBUG_CLOSE: 'Close',
+ THEME_SWITCH: 'Theme Switch'
},
PAGINATION: {
PREV: 'Prev',
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
index 43bb26c6..1ba84f91 100644
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -37,7 +37,10 @@ export default {
SUBMIT: '提交',
POST_TIME: '发布于',
LAST_EDITED_TIME: '最后更新',
- RECENT_COMMENTS: '最新评论'
+ RECENT_COMMENTS: '最新评论',
+ DEBUG_OPEN: '开启调试',
+ DEBUG_CLOSE: '关闭调试',
+ THEME_SWITCH: '切换主题'
},
PAGINATION: {
PREV: '上一页',
diff --git a/themes/medium/LayoutSlug.js b/themes/medium/LayoutSlug.js
index 6a416145..c3cc0423 100644
--- a/themes/medium/LayoutSlug.js
+++ b/themes/medium/LayoutSlug.js
@@ -3,7 +3,6 @@ import { useGlobal } from '@/lib/global'
import React from 'react'
import Catalog from './components/Catalog'
import { ArticleLock } from './components/ArticleLock'
-import JumpToTopButton from './components/JumpToTopButton'
import formatDate from '@/lib/formatDate'
import BLOG from '@/blog.config'
import Link from 'next/link'