From e542b271f98ec55e89827a8c58ad47cd21b2dd5e Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 1 Feb 2023 15:16:02 +0800
Subject: [PATCH] Custom External JS/CSS

---
 blog.config.js               |  4 ++++
 components/ExternalScript.js | 25 +++++++++++++++++++++++++
 pages/_app.js                |  2 ++
 3 files changed, 31 insertions(+)
 create mode 100644 components/ExternalScript.js

diff --git a/blog.config.js b/blog.config.js
index c0fcca5e..2b0c3d28 100644
--- a/blog.config.js
+++ b/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,
 
diff --git a/components/ExternalScript.js b/components/ExternalScript.js
new file mode 100644
index 00000000..b8253726
--- /dev/null
+++ b/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
diff --git a/pages/_app.js b/pages/_app.js
index f0eedb2c..eee3dad6 100644
--- a/pages/_app.js
+++ b/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本地导入；