Custom External JS/CSS

blog.config.js

@@ -30,6 +30,10 @@ const BLOG = {
   CUSTOM_FONT_SANS: ['LXGW WenKai'], // 自定义无衬线字体
   CUSTOM_FONT_SERIF: ['LXGW WenKai'], // 自定义衬线字体
 
+  // 自定义外部脚本，外部样式
+  CUSTOM_EXTERNAL_JS: [''], // e.g. ['http://xx.com/script.js','http://xx.com/script.js']
+  CUSTOM_EXTERNAL_CSS: [''], // e.g. ['http://xx.com/style.css','http://xx.com/style.css']
+
   // 侧栏布局 是否反转(左变右,右变左) 已支持主题: hexo next medium fukasawa example
   LAYOUT_SIDEBAR_REVERSE: false,
 

components/ExternalScript.js

@@ -0,0 +1,25 @@
+import BLOG from '@/blog.config'
+import { loadExternalResource } from '@/lib/utils'
+import React from 'react'
+
+/**
+ * 自定义引入外部JS 和 CSS
+ * @returns
+ */
+const ExternalScript = () => {
+  React.useEffect(() => {
+    if (BLOG.CUSTOM_EXTERNAL_JS && BLOG.CUSTOM_EXTERNAL_JS.length > 0) {
+      for (const url of BLOG.CUSTOM_EXTERNAL_JS) {
+        loadExternalResource(url, 'js')
+      }
+    }
+    if (BLOG.CUSTOM_EXTERNAL_CSS && BLOG.CUSTOM_EXTERNAL_CSS.length > 0) {
+      for (const url of BLOG.CUSTOM_EXTERNAL_CSS) {
+        loadExternalResource(url, 'css')
+      }
+    }
+  }, [])
+  return null
+}
+
+export default ExternalScript

pages/_app.js

@@ -31,6 +31,7 @@ import { Ribbon } from '@/components/Ribbon'
 import { Sakura } from '@/components/Sakura'
 import { StarrySky } from '@/components/StarrySky'
 import MusicPlayer from '@/components/MusicPlayer'
+import ExternalScript from '@/components/ExternalScript'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -59,6 +60,7 @@ const MyApp = ({ Component, pageProps }) => {
         {JSON.parse(BLOG.NEST) && <Nest />}
         {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
         {JSON.parse(BLOG.RIBBON) && <Ribbon />}
+        <ExternalScript/>
     </>
 
   // 默认Webfont:  请在font.js文件中检查font-family 新版改从npm本地导入；