GlobalJS，GlobalStyle

gitca233 · Jan 21, 2024 · 93be76e · 93be76e
1 parent 1d7a434
commit 93be76e
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 31 deletions.
diff --git a/components/ExternalPlugins.js b/components/ExternalPlugins.js
@@ -3,6 +3,10 @@ import dynamic from 'next/dynamic'
 import LA51 from './LA51'
 import WebWhiz from './Webwhiz'
 import TianLiGPT from './TianliGPT'
+import { GlobalStyle } from './GlobalStyle'
+
+import { CUSTOM_EXTERNAL_CSS, CUSTOM_EXTERNAL_JS, IMG_SHADOW } from '@/blog.config'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
 
 const TwikooCommentCounter = dynamic(() => import('@/components/TwikooCommentCounter'), { ssr: false })
 const DebugPanel = dynamic(() => import('@/components/DebugPanel'), { ssr: false })
@@ -73,12 +77,44 @@ const ExternalPlugin = (props) => {
   const ANALYTICS_51LA_CK = siteConfig('ANALYTICS_51LA_CK')
   const DIFY_CHATBOT_ENABLED = siteConfig('DIFY_CHATBOT_ENABLED')
   const TIANLI_KEY = siteConfig('TianliGPT_KEY')
+  const GLOBAL_JS = siteConfig('GLOBAL_JS')
+
+  // 自定义样式css和js引入
+  if (isBrowser) {
+    // 初始化AOS动画
+    // 静态导入本地自定义样式
+    loadExternalResource('/css/custom.css', 'css')
+    loadExternalResource('/js/custom.js', 'js')
+
+    // 自动添加图片阴影
+    if (IMG_SHADOW) {
+      loadExternalResource('/css/img-shadow.css', 'css')
+    }
+
+    // 导入外部自定义脚本
+    if (CUSTOM_EXTERNAL_JS && CUSTOM_EXTERNAL_JS.length > 0) {
+      for (const url of CUSTOM_EXTERNAL_JS) {
+        loadExternalResource(url, 'js')
+      }
+    }
+
+    // 导入外部自定义样式
+    if (CUSTOM_EXTERNAL_CSS && CUSTOM_EXTERNAL_CSS.length > 0) {
+      for (const url of CUSTOM_EXTERNAL_CSS) {
+        loadExternalResource(url, 'css')
+      }
+    }
+  }
 
   if (DISABLE_PLUGIN) {
     return null
   }
 
   return <>
+
+        {/* 全局样式嵌入 */}
+        <GlobalStyle/>
+
         {THEME_SWITCH && <ThemeSwitch />}
         {DEBUG && <DebugPanel />}
         {ANALYTICS_ACKEE_TRACKER && <Ackee />}
@@ -115,6 +151,11 @@ const ExternalPlugin = (props) => {
             }} /> */}
         </>)}
 
+        {/* 注入JS脚本 */}
+        {GLOBAL_JS && <script async dangerouslySetInnerHTML={{
+          __html: GLOBAL_JS
+        }} />}
+
         {CHATBASE_ID && (<>
             <script id={CHATBASE_ID} src="https://www.chatbase.co/embed.min.js" defer />
             <script async dangerouslySetInnerHTML={{

diff --git a/components/GlobalStyle.js b/components/GlobalStyle.js
@@ -0,0 +1,20 @@
+/* eslint-disable react/no-unknown-property */
+
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 这里的css样式对全局生效
+ * 主题客制化css
+ * @returns
+ */
+const GlobalStyle = () => {
+  // 从NotionConfig中读取样式
+  const GLOBAL_CSS = siteConfig('GLOBAL_CSS')
+  return (<style jsx global>{`
+
+    ${GLOBAL_CSS}
+
+  `}</style>)
+}
+
+export { GlobalStyle }
diff --git a/lib/cache/cache_manager.js b/lib/cache/cache_manager.js
@@ -9,7 +9,7 @@ import BLOG from '@/blog.config'
  * @returns
  */
 export async function getDataFromCache(key, force) {
-  if (BLOG.ENABLE_CACHE || force) {
+  if (JSON.parse(BLOG.ENABLE_CACHE) || force) {
     const dataFromCache = await getApi().getCache(key)
     if (JSON.stringify(dataFromCache) === '[]') {
       return null
@@ -28,7 +28,7 @@ export async function setDataToCache(key, data) {
 }
 
 export async function delCacheData(key) {
-  if (!BLOG.ENABLE_CACHE) {
+  if (!JSON.parse(BLOG.ENABLE_CACHE)) {
     return
   }
   await getApi().delCache(key)

diff --git a/pages/_app.js b/pages/_app.js
@@ -9,43 +9,15 @@ import '@/styles/notion.css' //  重写部分样式
 import 'aos/dist/aos.css' // You can also use <link> for styles
 
 import { GlobalContextProvider } from '@/lib/global'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
 
 // 各种扩展插件 这个要阻塞引入
 import ExternalPlugins from '@/components/ExternalPlugins'
-import { CUSTOM_EXTERNAL_CSS, CUSTOM_EXTERNAL_JS, IMG_SHADOW } from '@/blog.config'
 
 const MyApp = ({ Component, pageProps }) => {
-  // 自定义样式css和js引入
-  if (isBrowser) {
-    // 初始化AOS动画
-    // 静态导入本地自定义样式
-    loadExternalResource('/css/custom.css', 'css')
-    loadExternalResource('/js/custom.js', 'js')
-
-    // 自动添加图片阴影
-    if (IMG_SHADOW) {
-      loadExternalResource('/css/img-shadow.css', 'css')
-    }
-
-    // 导入外部自定义脚本
-    if (CUSTOM_EXTERNAL_JS && CUSTOM_EXTERNAL_JS.length > 0) {
-      for (const url of CUSTOM_EXTERNAL_JS) {
-        loadExternalResource(url, 'js')
-      }
-    }
-
-    // 导入外部自定义样式
-    if (CUSTOM_EXTERNAL_CSS && CUSTOM_EXTERNAL_CSS.length > 0) {
-      for (const url of CUSTOM_EXTERNAL_CSS) {
-        loadExternalResource(url, 'css')
-      }
-    }
-  }
-
   return (
         <GlobalContextProvider {...pageProps}>
             <Component {...pageProps} />
+            {/* 全局插件 , 自定义样式、组件等在这里统一引入 */}
             <ExternalPlugins {...pageProps} />
         </GlobalContextProvider>
   )