diff --git a/lib/global.js b/lib/global.js index e1692217..10bfae28 100644 --- a/lib/global.js +++ b/lib/global.js @@ -45,10 +45,6 @@ export function GlobalContextProvider ({ children }) { useEffect(() => { if (!hasInit) { - const userTheme = getQueryVariable('theme') - if (userTheme && ALL_THEME.indexOf(userTheme) > -1) { - setTheme(userTheme) - } initLocale(locale, updateLocale) initDarkMode(isDarkMode, updateDarkMode) initTheme(theme, changeTheme) @@ -63,50 +59,4 @@ export function GlobalContextProvider ({ children }) { ) } -/** - * 查询url中的query参数 - * @param {}} variable - * @returns - */ -function getQueryVariable (variable) { - const query = window.location.search.substring(1) - const vars = query.split('&') - for (let i = 0; i < vars.length; i++) { - const pair = vars[i].split('=') - if (pair[0] === variable) { return pair[1] } - } - return (false) -} - -/** - * 深度合并两个对象 - * @param target - * @param sources - */ -export function mergeDeep (target, ...sources) { - if (!sources.length) return target - const source = sources.shift() - - if (isObject(target) && isObject(source)) { - for (const key in source) { - if (isObject(source[key])) { - if (!target[key]) Object.assign(target, { [key]: {} }) - mergeDeep(target[key], source[key]) - } else { - Object.assign(target, { [key]: source[key] }) - } - } - } - return mergeDeep(target, ...sources) -} - -/** - * 对象检查 - * @param item - * @returns {boolean} - */ -export function isObject (item) { - return (item && typeof item === 'object' && !Array.isArray(item)) -} - export const useGlobal = () => useContext(GlobalContext) diff --git a/lib/lang.js b/lib/lang.js index dd552f0e..7c6594f9 100644 --- a/lib/lang.js +++ b/lib/lang.js @@ -2,7 +2,7 @@ import zhCN from './lang/zh-CN' import enUS from './lang/en-US' import zhHK from './lang/zh-HK' import zhTW from './lang/zh-TW' -import { mergeDeep } from '@/lib/global' +import { mergeDeep } from './utils' const lang = { 'en-US': enUS, 'zh-CN': zhCN, diff --git a/lib/theme.js b/lib/theme.js index 1cecad78..360dd7e2 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -1,37 +1,45 @@ import cookie from 'react-cookies' import BLOG from '@/blog.config' +import { ALL_THEME } from '@/themes' +import { getQueryVariable } from './utils' /** - * 初始化主题 + * 初始化主题 , 优先级 query > cookies > systemPrefer * @param isDarkMode * @param updateDarkMode 更改主题ChangeState函数 * @description 读取cookie中存的用户主题 */ export const initDarkMode = (isDarkMode, updateDarkMode) => { - if (typeof window !== 'undefined') { - if (!isDarkMode) { - isDarkMode = isPreferDark() - } - updateDarkMode(isDarkMode) - saveDarkModeToCookies(isDarkMode) - document.getElementsByTagName('html')[0].setAttribute('class', isDarkMode ? 'dark' : 'light') + const queryMode = getQueryVariable('mode') + if (queryMode) { + isDarkMode = queryMode === 'dark' + } else if (!isDarkMode) { + isDarkMode = isPreferDark() } + updateDarkMode(isDarkMode) + saveDarkModeToCookies(isDarkMode) + document.getElementsByTagName('html')[0].setAttribute('class', isDarkMode ? 'dark' : 'light') } /** - * 从cookie中读取 用户默认主题 + * 初始化主题， 优先级 query > cookies > blog.config.js * @param {*} theme * @param {*} changeTheme */ export const initTheme = (theme, changeTheme) => { - const userTheme = loadThemeFromCookies() - if (userTheme !== theme) { - changeTheme(userTheme) + const queryTheme = getQueryVariable('theme') + if (queryTheme && ALL_THEME.indexOf(queryTheme) > -1) { + changeTheme(queryTheme) + } else { + const userTheme = loadThemeFromCookies() + if (userTheme !== theme) { + changeTheme(userTheme) + } } } /** - * 是否优先深色模式 + * 是否优先深色模式， 根据系统深色模式以及当前时间判断 * @returns {*} */ export function isPreferDark () { diff --git a/lib/utils.js b/lib/utils.js index d3687ab9..a53b2f2d 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -25,3 +25,49 @@ export function loadExternalResource (url, type) { } }) } + +/** + * 查询url中的query参数 + * @param {}} variable + * @returns + */ +export function getQueryVariable (variable) { + const query = window.location.search.substring(1) + const vars = query.split('&') + for (let i = 0; i < vars.length; i++) { + const pair = vars[i].split('=') + if (pair[0] === variable) { return pair[1] } + } + return (false) +} + +/** + * 深度合并两个对象 + * @param target + * @param sources + */ +export function mergeDeep (target, ...sources) { + if (!sources.length) return target + const source = sources.shift() + + if (isObject(target) && isObject(source)) { + for (const key in source) { + if (isObject(source[key])) { + if (!target[key]) Object.assign(target, { [key]: {} }) + mergeDeep(target[key], source[key]) + } else { + Object.assign(target, { [key]: source[key] }) + } + } + } + return mergeDeep(target, ...sources) +} + +/** + * 对象检查 + * @param item + * @returns {boolean} + */ +export function isObject (item) { + return (item && typeof item === 'object' && !Array.isArray(item)) +} diff --git a/themes/example/LayoutBase.js b/themes/example/LayoutBase.js index 7898c47d..b8f41545 100644 --- a/themes/example/LayoutBase.js +++ b/themes/example/LayoutBase.js @@ -29,7 +29,7 @@ const LayoutBase = props => { } return ( -
+
{/* 导航菜单 */}
diff --git a/themes/example/LayoutIndex.js b/themes/example/LayoutIndex.js index 817bcdfb..1ef35344 100644 --- a/themes/example/LayoutIndex.js +++ b/themes/example/LayoutIndex.js @@ -18,7 +18,7 @@ export const LayoutIndex = props => { return ( {posts.map(p => ( -
+
{p.title} diff --git a/themes/fukasawa/components/Catalog.js b/themes/fukasawa/components/Catalog.js index c4425454..2e67c392 100644 --- a/themes/fukasawa/components/Catalog.js +++ b/themes/fukasawa/components/Catalog.js @@ -58,7 +58,7 @@ const Catalog = ({ toc }) => { return
目录
-
+