medium 地图插件

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>

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)
+    }
+  })
+}

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