From fd49b216c5b0a4f80298e278ae403bd10af48ca1 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 7 Feb 2022 15:56:28 +0800
Subject: [PATCH 1/2] =?UTF-8?q?medium=20=E5=9C=B0=E5=9B=BE=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/Medium/LayoutBase.js              |  9 ++++--
 themes/Medium/components/RevolverMaps.js | 37 ++++++++++++++++++++++++
 themes/Medium/config_medium.js           |  5 +++-
 3 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 themes/Medium/components/RevolverMaps.js

diff --git a/themes/Medium/LayoutBase.js b/themes/Medium/LayoutBase.js
index 3c62dc54..1ee367d0 100644
--- a/themes/Medium/LayoutBase.js
+++ b/themes/Medium/LayoutBase.js
@@ -3,6 +3,8 @@ import React from 'react'
 import Footer from './components/Footer'
 import InfoCard from './components/InfoCard'
 import LogoBar from './components/LogoBar'
+import RevolverMaps from './components/RevolverMaps'
+import CONFIG_MEDIUM from './config_medium'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -18,12 +20,15 @@ const LayoutBase = props => {
       <CommonHead meta={meta}/>
       <main id="wrapper" className='max-w-7xl w-full h-full mx-auto'>
         <LogoBar/>
-        <div className='pt-12 fixed top-24 w-80 pl-8 hidden lg:block'>
-        {showInfoCard && <InfoCard/>}
+        <div className='w-72 px-8 py-12 fixed top-24 hidden lg:block'>
+          {showInfoCard && <InfoCard/>}
         </div>
         <div className='lg:ml-72 max-w-3xl w-full px-5'>
             {children}
         </div>
+        <div className='w-72 px-8 py-6 fixed right-12 top-24 hidden lg:block'>
+          { CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps/>}
+        </div>
       </main>
       <Footer/>
     </div>
diff --git a/themes/Medium/components/RevolverMaps.js b/themes/Medium/components/RevolverMaps.js
new file mode 100644
index 00000000..a43e7dc0
--- /dev/null
+++ b/themes/Medium/components/RevolverMaps.js
@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+
+export default function RevolverMaps () {
+  const [load, changeLoad] = useState(false)
+  useEffect(() => {
+    console.log(load)
+    if (!load) {
+      initRevolverMaps()
+      changeLoad(true)
+    }
+  })
+  return <div id="revolvermaps"/>
+}
+
+function initRevolverMaps () {
+  if (screen.width >= 768) {
+    Promise.all([
+      loadExternalResource('https://rf.revolvermaps.com/0/0/8.js?i=5jnp1havmh9&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=33')
+    ]).then(() => {
+      console.log('地图加载完成', document.getElementById('revolvermaps'))
+    })
+  }
+}
+
+// 封装异步加载资源的方法
+function loadExternalResource (url) {
+  return new Promise((resolve, reject) => {
+    const container = document.getElementById('revolvermaps')
+    const tag = document.createElement('script')
+    tag.src = url
+    if (tag) {
+      tag.onload = () => resolve(url)
+      tag.onerror = () => reject(url)
+      container.appendChild(tag)
+    }
+  })
+}
diff --git a/themes/Medium/config_medium.js b/themes/Medium/config_medium.js
index 9cb83c84..fb6808e0 100644
--- a/themes/Medium/config_medium.js
+++ b/themes/Medium/config_medium.js
@@ -8,6 +8,9 @@ const CONFIG_MEDIUM = {
   MENU_CATEGORY: true, // 显示分类
   MENU_TAG: true, // 显示标签
   MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true // 显示搜索
+  MENU_SEARCH: true, // 显示搜索
+
+  // Widget
+  WIDGET_REVOLVER_MAPS: process.env.WIDGET_REVOLVER_MAPS || 'false' // 地图插件
 }
 export default CONFIG_MEDIUM

From 8020678b8d300803320ed10f8540415f15fb2ad2 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 7 Feb 2022 16:01:50 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/Medium/components/RevolverMaps.js | 3 +--
 themes/Medium/config_medium.js           | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/themes/Medium/components/RevolverMaps.js b/themes/Medium/components/RevolverMaps.js
index a43e7dc0..57d2cccc 100644
--- a/themes/Medium/components/RevolverMaps.js
+++ b/themes/Medium/components/RevolverMaps.js
@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react'
 export default function RevolverMaps () {
   const [load, changeLoad] = useState(false)
   useEffect(() => {
-    console.log(load)
     if (!load) {
       initRevolverMaps()
       changeLoad(true)
@@ -17,7 +16,7 @@ function initRevolverMaps () {
     Promise.all([
       loadExternalResource('https://rf.revolvermaps.com/0/0/8.js?i=5jnp1havmh9&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=33')
     ]).then(() => {
-      console.log('地图加载完成', document.getElementById('revolvermaps'))
+      console.log('地图加载完成')
     })
   }
 }
diff --git a/themes/Medium/config_medium.js b/themes/Medium/config_medium.js
index fb6808e0..4d13d756 100644
--- a/themes/Medium/config_medium.js
+++ b/themes/Medium/config_medium.js
@@ -11,6 +11,6 @@ const CONFIG_MEDIUM = {
   MENU_SEARCH: true, // 显示搜索
 
   // Widget
-  WIDGET_REVOLVER_MAPS: process.env.WIDGET_REVOLVER_MAPS || 'false' // 地图插件
+  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false' // 地图插件
 }
 export default CONFIG_MEDIUM