动态配置

2026-05-14 07:26:52 +00:00 · 2023-11-01 23:13:25 +08:00
parent ef6e9e0d95
commit 3e58c6b637
8 changed files with 43 additions and 45 deletions
--- a/components/ExternalPlugins.js
+++ b/components/ExternalPlugins.js
@@ -2,17 +2,6 @@ import BLOG from 'blog.config'
 import dynamic from 'next/dynamic'
 import WebWhiz from './Webwhiz'

-// import TwikooCommentCounter from '@/components/TwikooCommentCounter'
-// import { DebugPanel } from '@/components/DebugPanel'
-// import { ThemeSwitch } from '@/components/ThemeSwitch'
-// import { Fireworks } from '@/components/Fireworks'
-// import { Nest } from '@/components/Nest'
-// import { FlutteringRibbon } from '@/components/FlutteringRibbon'
-// import { Ribbon } from '@/components/Ribbon'
-// import { Sakura } from '@/components/Sakura'
-// import { StarrySky } from '@/components/StarrySky'
-// import { Analytics } from '@vercel/analytics/react'
-
 const TwikooCommentCounter = dynamic(() => import('@/components/TwikooCommentCounter'), { ssr: false })
 const DebugPanel = dynamic(() => import('@/components/DebugPanel'), { ssr: false })
 const ThemeSwitch = dynamic(() => import('@/components/ThemeSwitch'), { ssr: false })
@@ -33,8 +22,9 @@ const VConsole = dynamic(() => import('@/components/VConsole'), { ssr: false })
 const CustomContextMenu = dynamic(() => import('@/components/CustomContextMenu'), { ssr: false })
 const DisableCopy = dynamic(() => import('@/components/DisableCopy'), { ssr: false })
 const AdBlockDetect = dynamic(() => import('@/components/AdBlockDetect'), { ssr: false })
+
 /**
- * 各种第三方组件
+ * 各种插件脚本
 * @param {*} props
 * @returns
 */
--- a/lib/config.js
+++ b/lib/config.js
@@ -25,7 +25,7 @@ export const siteConfig = (key) => {
  if (global) {
    val = global.NOTION_CONFIG?.[key]
    siteInfo = global.siteInfo
-    console.log('当前变量', key, val)
+    // console.log('当前变量', key, val)
  }

  if (!val) {
@@ -38,7 +38,7 @@ export const siteConfig = (key) => {
        val = siteInfo?.icon // 封面图取Notion的封面
        break
      case 'TITLE':
-        val = siteConfig('TITLE') // 标题取Notion中的标题
+        val = siteInfo?.title // 标题取Notion中的标题
        break
    }
  }
@@ -47,6 +47,6 @@ export const siteConfig = (key) => {
  if (!val) {
    val = BLOG[key]
  }
-  console.log('配置', key, val)
+  console.log('实际配置', key, val)
  return val
 }
--- a/lib/global.js
+++ b/lib/global.js
@@ -2,33 +2,53 @@ import { generateLocaleDict, initLocale } from './lang'
 import { createContext, useContext, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { THEMES, initDarkMode } from '@/themes/theme'
-import NProgress from 'nprogress'
-import { getQueryVariable, isBrowser } from './utils'
+
 import BLOG from '@/blog.config'
+import NProgress from 'nprogress'
+import { isBrowser } from './utils'

 const GlobalContext = createContext()

 /**
- * 全局变量Provider，包括语言本地化、样式主题、搜索词
+ * 定义全局变量，包括语言、主题、深色模式、加载状态
 * @param children
 * @returns {JSX.Element}
 * @constructor
 */
 export function GlobalContextProvider(props) {
  const { children, siteInfo, categoryOptions, tagOptions, NOTION_CONFIG } = props
+  console.log('config', NOTION_CONFIG)
  const router = useRouter()
-  const [lang, updateLang] = useState(BLOG.LANG) // 默认语言
-  const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG)) // 默认语言
-  const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
-  const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
+  const [lang, updateLang] = useState(NOTION_CONFIG.LANG || BLOG.LANG) // 默认语言
+  const [locale, updateLocale] = useState(generateLocaleDict(NOTION_CONFIG.LANG || BLOG.LANG)) // 默认语言
+  const [theme, setTheme] = useState(NOTION_CONFIG.THEME || BLOG.THEME) // 默认博客主题
+  const [isDarkMode, updateDarkMode] = useState(NOTION_CONFIG.APPEARANCE || BLOG.APPEARANCE === 'dark') // 默认深色模式
  const [onLoading, setOnLoading] = useState(false) // 抓取文章数据

+  // 切换主题
+  function switchTheme() {
+    const currentIndex = THEMES.indexOf(theme)
+    const newIndex = currentIndex < THEMES.length - 1 ? currentIndex + 1 : 0
+    const newTheme = THEMES[newIndex]
+    const query = router.query
+    query.theme = newTheme
+    router.push({ pathname: router.pathname, query })
+    return newTheme
+  }
+
  useEffect(() => {
    initLocale(lang, locale, updateLang, updateLocale)
    initDarkMode(updateDarkMode)
-    initTheme()
+    checkThemeDOM()
  }, [])

+  // 加载默认主题
+  //   useEffect(() => {
+  //     const queryTheme = getQueryVariable('theme') || theme
+  //     setTheme(queryTheme)
+  //   }, [router])
+
+  // 加载进度条
  useEffect(() => {
    const handleStart = (url) => {
      NProgress.start()
@@ -43,8 +63,6 @@ export function GlobalContextProvider(props) {
      NProgress.done()
      setOnLoading(false)
    }
-    const queryTheme = getQueryVariable('theme') || BLOG.THEME
-    setTheme(queryTheme)
    router.events.on('routeChangeStart', handleStart)
    router.events.on('routeChangeError', handleStop)
    router.events.on('routeChangeComplete', handleStop)
@@ -55,22 +73,13 @@ export function GlobalContextProvider(props) {
    }
  }, [router])

-  // 切换主题
-  function switchTheme() {
-    const currentIndex = THEMES.indexOf(theme)
-    const newIndex = currentIndex < THEMES.length - 1 ? currentIndex + 1 : 0
-    const newTheme = THEMES[newIndex]
-    const query = router.query
-    query.theme = newTheme
-    router.push({ pathname: router.pathname, query })
-    return newTheme
-  }
-
  return (
        <GlobalContext.Provider value={{
          NOTION_CONFIG,
          onLoading,
          setOnLoading,
+          lang,
+          updateLang,
          locale,
          updateLocale,
          isDarkMode,
@@ -91,7 +100,7 @@ export function GlobalContextProvider(props) {
 * 切换主题时的特殊处理
 * @param {*} setTheme
 */
-const initTheme = () => {
+const checkThemeDOM = () => {
  if (isBrowser) {
    setTimeout(() => {
      const elements = document.querySelectorAll('[id^="theme-"]')
--- a/lib/lang.js
+++ b/lib/lang.js
@@ -65,7 +65,7 @@ export function generateLocaleDict(langString) {
 */
 export function initLocale(lang, locale, changeLang, changeLocale) {
  if (isBrowser) {
-    const queryLang = getQueryVariable('lang') || loadLangFromCookies() || window.navigator.language
+    const queryLang = getQueryVariable('lang') || loadLangFromCookies()
    let currentLang = lang
    if (queryLang !== lang) {
      currentLang = queryLang
--- a/lib/notion/getNotionConfig.js
+++ b/lib/notion/getNotionConfig.js
@@ -127,7 +127,7 @@ export async function getConfigMapFromConfigPage(allPages) {

      // 只导入生效的配置
      if (config.enable) {
-        // console.log('[覆盖代码配置]', config.key)
+        console.log('[Notion配置]', config.key, config.value)
        notionConfig[config.key] = config.value
      }
    }
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -11,12 +11,11 @@ import { GlobalContextProvider } from '@/lib/global'

 import AOS from 'aos'
 import 'aos/dist/aos.css' // You can also use <link> for styles
-import dynamic from 'next/dynamic'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
 import BLOG from '@/blog.config'
-
 // 各种扩展插件 动画等
-const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))
+import ExternalPlugins from '@/components/ExternalPlugins'
+// const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))

 const MyApp = ({ Component, pageProps }) => {
  // 自定义样式css和js引入
--- a/themes/hexo/components/Footer.js
+++ b/themes/hexo/components/Footer.js
@@ -26,8 +26,8 @@ const Footer = ({ title }) => {
            <i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
      <span className='pl-2 hidden busuanzi_container_site_uv'>
        <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
-        <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {BLOG.BIO && <>|</>} {BLOG.BIO}</h1>
-        <p className='text-xs pt-2 text-light-500 dark:text-gray-500'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</p></span><br/>
+        <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1>
+        <p className='text-xs pt-2 text-light-500 dark:text-gray-500'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a>.</p></span><br/>

    </footer>
  )
--- a/themes/hexo/components/InfoCard.js
+++ b/themes/hexo/components/InfoCard.js
@@ -26,7 +26,7 @@ export function InfoCard(props) {
                <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={siteConfig('AUTHOR')} />
            </div>
            <div className='font-medium text-center text-xl pb-4'>{siteConfig('AUTHOR')}</div>
-            <div className='text-sm text-center'>{BLOG.BIO}</div>
+            <div className='text-sm text-center'>{siteConfig('BIO')}</div>
            <MenuGroupCard {...props} />
            <SocialButton />
        </Card>