Merge pull request #126 from tangly1024/preview

Preview

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)

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,

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 () {

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))
+}

themes/example/LayoutBase.js

@@ -29,7 +29,7 @@ const LayoutBase = props => {
   }
 
   return (
-    <div>
+    <div className='dark:text-gray-300'>
       <CommonHead meta={meta} />
       {/* 导航菜单 */}
       <div className="w-full flex justify-center my-2">

themes/example/LayoutIndex.js

@@ -18,7 +18,7 @@ export const LayoutIndex = props => {
   return (
     <LayoutBase {...props}>
       {posts.map(p => (
-        <div key={p.id} className='border my-12'>
+        <div key={p.id} className='border p-4 my-12'>
           <Link href={`/article/${p.slug}`}>
             <a className='underline cursor-pointer'>{p.title}</a>
           </Link>

themes/fukasawa/components/Catalog.js

@@ -58,7 +58,7 @@ const Catalog = ({ toc }) => {
 
   return <div>
     <div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' /> 目录</div>
-    <div className='overflow-y-auto max-h-96' ref={tRef}>
+    <div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>
       <nav className='h-full font-sans text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)

themes/hexo/components/Catalog.js

@@ -62,7 +62,7 @@ const Catalog = ({ toc }) => {
     <div className='w-full py-3'>
       <Progress/>
     </div>
-    <div className='overflow-y-auto max-h-36 lg:max-h-96' ref={tRef}>
+    <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none' ref={tRef}>
       <nav className='h-full font-sans text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)

themes/medium/components/Catalog.js

@@ -61,7 +61,7 @@ const Catalog = ({ toc }) => {
     <div className='w-full py-1'>
       <Progress/>
     </div>
-    <div className='overflow-y-auto max-h-96' ref={tRef}>
+    <div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>
       <nav className='h-full font-sans text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)

themes/next/components/Toc.js

@@ -62,7 +62,7 @@ const Toc = ({ toc }) => {
     <div className='w-full pb-1'>
       <Progress/>
     </div>
-    <div className='overflow-y-auto max-h-96' ref={tRef}>
+    <div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>
       <nav className='h-full font-sans text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)