load 优化

components/Comment.js

@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic'
 import Tabs from '@/components/Tabs'
-import { isBrowser } from '@/lib/utils'
+import { isBrowser, isSearchEngineBot } from '@/lib/utils'
 import { useRouter } from 'next/router'
 import Artalk from './Artalk'
 import { siteConfig } from '@/lib/config'
@@ -73,6 +73,10 @@ const Comment = ({ siteInfo, frontMatter, className }) => {
   const COMMENT_GITALK_CLIENT_ID = siteConfig('COMMENT_GITALK_CLIENT_ID')
   const COMMENT_WEBMENTION_ENABLE = siteConfig('COMMENT_WEBMENTION_ENABLE')
 
+  if (isSearchEngineBot()) {
+    return null
+  }
+
   // 当连接中有特殊参数时跳转到评论区
   if (isBrowser && ('giscus' in router.query || router.query.target === 'comment')) {
     setTimeout(() => {

components/ExternalPlugins.js

@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import { isSearchEngineBot } from '@/lib/utils'
 import dynamic from 'next/dynamic'
 import WebWhiz from './Webwhiz'
 
@@ -29,6 +30,10 @@ const AdBlockDetect = dynamic(() => import('@/components/AdBlockDetect'), { ssr:
  * @returns
  */
 const ExternalPlugin = (props) => {
+  if (isSearchEngineBot()) {
+    return null
+  }
+
   return <>
     {JSON.parse(siteConfig('THEME_SWITCH')) && <ThemeSwitch />}
     {JSON.parse(siteConfig('DEBUG')) && <DebugPanel />}

components/FacebookMessenger.js

@@ -1,14 +1,41 @@
-import { Component } from 'react'
+import { Component, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { siteConfig } from '@/lib/config'
 
 export default function Messenger() {
-  return <MessengerCustomerChat
-    pageId={siteConfig('FACEBOOK_PAGE_ID')}
-    appId={siteConfig('FACEBOOK_APP_ID')}
-    language={siteConfig('LANG').replace('-', '_')}
-    shouldShowDialog={true}
-  />
+  const pageId = siteConfig('FACEBOOK_PAGE_ID')
+  const appId = siteConfig('FACEBOOK_APP_ID')
+  const language = siteConfig('LANG').replace('-', '_')
+
+  // 新增一个状态变量用于追踪是否已经滚动过
+  const [showMessenger, setShowMessenger] = useState(false);
+
+  const showTheComponent = () => {
+    window.removeEventListener('scroll', showTheComponent);
+    if (!showMessenger) {
+      setShowMessenger(true);
+    }
+  };
+
+  // 延时7秒，或页面滚动时加载该组件
+  useEffect(() => {
+    window.addEventListener('scroll', showTheComponent);
+    setTimeout(() => {
+      showTheComponent()
+    }, 7000);
+    return () => {
+      window.removeEventListener('scroll', showTheComponent);
+    };
+  }, []);
+
+  return <>
+        {showMessenger && <MessengerCustomerChat
+            pageId={pageId}
+            appId={appId}
+            language={language}
+            shouldShowDialog={true}
+        />}
+    </>
 }
 
 /**
@@ -24,8 +51,8 @@ class MessengerCustomerChat extends Component {
   }
 
   /**
-   * 初始化
-   */
+     * 初始化
+     */
   componentDidMount() {
     this.setFbAsyncInit()
     this.reloadSDKAsynchronously()
@@ -34,19 +61,19 @@ class MessengerCustomerChat extends Component {
   componentDidUpdate(prevProps) {
     if (
       prevProps.pageId !== this.props.pageId ||
-      prevProps.appId !== this.props.appId ||
-      prevProps.shouldShowDialog !== this.props.shouldShowDialog ||
-      prevProps.htmlRef !== this.props.htmlRef ||
-      prevProps.minimized !== this.props.minimized ||
-      prevProps.themeColor !== this.props.themeColor ||
-      prevProps.loggedInGreeting !== this.props.loggedInGreeting ||
-      prevProps.loggedOutGreeting !== this.props.loggedOutGreeting ||
-      prevProps.greetingDialogDisplay !== this.props.greetingDialogDisplay ||
-      prevProps.greetingDialogDelay !== this.props.greetingDialogDelay ||
-      prevProps.autoLogAppEvents !== this.props.autoLogAppEvents ||
-      prevProps.xfbml !== this.props.xfbml ||
-      prevProps.version !== this.props.version ||
-      prevProps.language !== this.props.language
+            prevProps.appId !== this.props.appId ||
+            prevProps.shouldShowDialog !== this.props.shouldShowDialog ||
+            prevProps.htmlRef !== this.props.htmlRef ||
+            prevProps.minimized !== this.props.minimized ||
+            prevProps.themeColor !== this.props.themeColor ||
+            prevProps.loggedInGreeting !== this.props.loggedInGreeting ||
+            prevProps.loggedOutGreeting !== this.props.loggedOutGreeting ||
+            prevProps.greetingDialogDisplay !== this.props.greetingDialogDisplay ||
+            prevProps.greetingDialogDelay !== this.props.greetingDialogDelay ||
+            prevProps.autoLogAppEvents !== this.props.autoLogAppEvents ||
+            prevProps.xfbml !== this.props.xfbml ||
+            prevProps.version !== this.props.version ||
+            prevProps.language !== this.props.language
     ) {
       this.setFbAsyncInit()
       this.reloadSDKAsynchronously()
@@ -60,8 +87,8 @@ class MessengerCustomerChat extends Component {
   }
 
   /**
-   * 初始化
-   */
+     * 初始化
+     */
   setFbAsyncInit() {
     const { appId, autoLogAppEvents, xfbml, version } = this.props
 
@@ -80,18 +107,18 @@ class MessengerCustomerChat extends Component {
   loadSDKAsynchronously() {
     const { language } = this.props;
     /* eslint-disable */
-    (function (d, s, id) {
-      var js,
-        fjs = d.getElementsByTagName(s)[0];
-      if (d.getElementById(id)) {
-        return;
-      }
-      js = d.createElement(s);
-      js.id = id;
-      js.src = `https://connect.facebook.net/${language}/sdk/xfbml.customerchat.js`;
-      fjs.parentNode.insertBefore(js, fjs);
-    })(document, 'script', 'facebook-jssdk');
-    /* eslint-enable */
+        (function (d, s, id) {
+            var js,
+                fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) {
+                return;
+            }
+            js = d.createElement(s);
+            js.id = id;
+            js.src = `https://connect.facebook.net/${language}/sdk/xfbml.customerchat.js`;
+            fjs.parentNode.insertBefore(js, fjs);
+        })(document, 'script', 'facebook-jssdk');
+        /* eslint-enable */
   }
 
   removeFacebookSDK() {
@@ -147,25 +174,25 @@ class MessengerCustomerChat extends Component {
 
     const refAttribute = htmlRef !== undefined ? `ref="${htmlRef}"` : ''
     const minimizedAttribute =
-      minimized !== undefined ? `minimized="${minimized}"` : ''
+            minimized !== undefined ? `minimized="${minimized}"` : ''
     const themeColorAttribute =
-      themeColor !== undefined ? `theme_color="${themeColor}"` : ''
+            themeColor !== undefined ? `theme_color="${themeColor}"` : ''
     const loggedInGreetingAttribute =
-      loggedInGreeting !== undefined
-        ? `logged_in_greeting="${loggedInGreeting}"`
-        : ''
+            loggedInGreeting !== undefined
+              ? `logged_in_greeting="${loggedInGreeting}"`
+              : ''
     const loggedOutGreetingAttribute =
-      loggedOutGreeting !== undefined
-        ? `logged_out_greeting="${loggedOutGreeting}"`
-        : ''
+            loggedOutGreeting !== undefined
+              ? `logged_out_greeting="${loggedOutGreeting}"`
+              : ''
     const greetingDialogDisplayAttribute =
-      greetingDialogDisplay !== undefined
-        ? `greeting_dialog_display="${greetingDialogDisplay}"`
-        : ''
+            greetingDialogDisplay !== undefined
+              ? `greeting_dialog_display="${greetingDialogDisplay}"`
+              : ''
     const greetingDialogDelayAttribute =
-      greetingDialogDelay !== undefined
-        ? `greeting_dialog_delay="${greetingDialogDelay}"`
-        : ''
+            greetingDialogDelay !== undefined
+              ? `greeting_dialog_delay="${greetingDialogDelay}"`
+              : ''
 
     return {
       __html: `<div
@@ -192,8 +219,8 @@ class MessengerCustomerChat extends Component {
           const element = event.target
           if (
             element.className &&
-            typeof element.className === 'string' &&
-            element.className.includes('fb_dialog')
+                        typeof element.className === 'string' &&
+                        element.className.includes('fb_dialog')
           ) {
             this.controlPlugin()
           }

components/ShareBar.js

@@ -5,6 +5,7 @@ import ShareButtons from './ShareButtons'
 
 const ShareBar = ({ post }) => {
   const router = useRouter()
+  const title = siteConfig('TITLE')
 
   if (!JSON.parse(siteConfig('POST_SHARE_BAR_ENABLE')) || !post || post?.type !== 'Post') {
     return <></>
@@ -17,7 +18,7 @@ const ShareBar = ({ post }) => {
             <ShareButtons shareUrl={shareUrl} title={post.title} image={post.pageCover} body={
                 post?.title +
                 ' | ' +
-                siteConfig('TITLE') +
+               title +
                 ' ' +
                 shareUrl +
                 ' ' +

components/ShareButtons.js

@@ -336,7 +336,7 @@ const ShareButtons = ({ shareUrl, title, body, image }) => {
               }
               if (singleService === 'qq') {
                 return <button key={singleService} className='cursor-pointer bg-blue-600 text-white rounded-full mx-1'>
-                        <a target='_blank' rel='noreferrer' href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${title}&desc=${body}`} >
+                        <a target='_blank' rel='noreferrer' aria-label="Share by QQ" href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${title}&desc=${body}`} >
                             <i className='fab fa-qq w-8' />
                         </a>
                     </button>

lib/utils.js

@@ -7,6 +7,27 @@ import { memo } from 'react'
  */
 export const isBrowser = typeof window !== 'undefined'
 
+/**
+ * google机器人
+ * @returns
+ */
+export const isSearchEngineBot = () => {
+  if (typeof navigator === 'undefined') {
+    return false
+  }
+  // 获取用户代理字符串
+  const userAgent = navigator.userAgent;
+  const isEngine = /Googlebot|bingbot|Baidu/.test(userAgent);
+
+  if (isEngine) {
+    console.warn('爬虫', userAgent)
+  } else {
+    console.error('u-a', userAgent)
+  }
+  // 使用正则表达式检测是否包含搜索引擎爬虫关键字
+  return isEngine
+}
+
 /**
  * 组件持久化
  */

themes/simple/components/TopBar.js

@@ -6,10 +6,12 @@ import { siteConfig } from '@/lib/config'
  * @returns
  */
 export const TopBar = (props) => {
-  if (siteConfig('SIMPLE_TOP_BAR_CONTENT', null, CONFIG)) {
+  const content = siteConfig('SIMPLE_TOP_BAR_CONTENT', null, CONFIG)
+
+  if (content) {
     return <header className="flex justify-center items-center bg-black dark:bg-hexo-black-gray">
        <div id='top-bar-inner' className='max-w-9/10 w-full z-20'>
-       <div className='text-xs text-center float-left text-white z-50 leading-5 py-2.5' dangerouslySetInnerHTML={{ __html: siteConfig('SIMPLE_TOP_BAR_CONTENT', null, CONFIG) }}/>
+       <div className='text-xs text-center float-left text-white z-50 leading-5 py-2.5' dangerouslySetInnerHTML={{ __html: content }}/>
        </div>
     </header>
   }

themes/simple/index.js

@@ -2,7 +2,7 @@ import CONFIG from './config'
 import { BlogListPage } from './components/BlogListPage'
 import { BlogListScroll } from './components/BlogListScroll'
 import { useEffect } from 'react'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { isBrowser } from '@/lib/utils'
 import BlogArchiveItem from './components/BlogArchiveItem'
 import { ArticleLock } from './components/ArticleLock'
 import NotionPage from '@/components/NotionPage'
@@ -37,9 +37,6 @@ const LayoutBase = props => {
   const { children, slotTop, meta } = props
   const { onLoading } = useGlobal()
 
-  if (isBrowser) {
-    loadExternalResource('/css/theme-simple.css', 'css')
-  }
   return (
         <div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black'>
             {/* SEO相关 */}