Next 主题按钮 兼容FaceBookMessenger插件

themes/next/LayoutBase.js

@@ -9,7 +9,7 @@ import SideAreaRight from './components/SideAreaRight'
 import TopNav from './components/TopNav'
 import { useGlobal } from '@/lib/global'
 import PropTypes from 'prop-types'
-import React, { useEffect, useRef, useState } from 'react'
+import React from 'react'
 import smoothscroll from 'smoothscroll-polyfill'
 import CONFIG_NEXT from './config_next'
 import Live2D from '@/components/Live2D'
@@ -22,11 +22,12 @@ import Live2D from '@/components/Live2D'
 const LayoutBase = (props) => {
   const { children, headerSlot, meta, sideBarSlot, floatSlot, rightAreaSlot, siteInfo } = props
   const { onLoading } = useGlobal()
-  const targetRef = useRef(null)
+  const targetRef = React.useRef(null)
+  const floatButtonGroup = React.useRef(null)
   const leftAreaSlot = <Live2D/>
 
-  const [show, switchShow] = useState(false)
-  const [percent, changePercent] = useState(0) // 页面阅读百分比
+  const [show, switchShow] = React.useState(false)
+  const [percent, changePercent] = React.useState(0) // 页面阅读百分比
   const scrollListener = () => {
     const targetRef = document.getElementById('wrapper')
     const clientHeight = targetRef?.clientHeight
@@ -41,8 +42,18 @@ const LayoutBase = (props) => {
     }
     changePercent(per)
   }
-  useEffect(() => {
+
+  React.useEffect(() => {
     smoothscroll.polyfill()
+
+    // facebook messenger 插件需要调整右下角悬浮按钮的高度
+    const fb = document.getElementsByClassName('fb-customerchat')
+    if (fb.length === 0) {
+      floatButtonGroup?.current?.classList.replace('bottom-24', 'bottom-12')
+    } else {
+      floatButtonGroup?.current?.classList.remove('bottom-12', 'bottom-24')
+    }
+
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
@@ -66,7 +77,7 @@ const LayoutBase = (props) => {
       </main>
 
       {/* 右下角悬浮 */}
-      <div className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 font-sans'>
+      <div ref={floatButtonGroup} className='right-8 bottom-12 bottom-24 lg:right-2 fixed justify-end z-20 font-sans'>
         <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
           <JumpToTopButton percent={percent}/>
           <JumpToBottomButton />