GlobalHead 的优化

tangly1024 · May 9, 2024 · 2da448f · 2da448f
1 parent 5c8c1ee
commit 2da448f
Showing 1 changed file with 57 additions and 26 deletions.
diff --git a/components/GlobalHead.js b/components/GlobalHead.js
@@ -6,18 +6,18 @@ import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
 /**
- * 页面的Head头，通常有用于SEO
+ * 页面的Head头，有用于SEO
  * @param {*} param0
  * @returns
  */
 const GlobalHead = props => {
-  const { children, siteInfo, post } = props
+  const { children, siteInfo, post, NOTION_CONFIG } = props
   let url = siteConfig('PATH')?.length
     ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}`
     : siteConfig('LINK')
   let image
   const router = useRouter()
-  const meta = getSEOMeta(props, router, useGlobal())
+  const meta = getSEOMeta(props, router, useGlobal()?.locale)
   if (meta) {
     url = `${url}/${meta.slug}`
     image = meta.image || '/bg_image.jpg'
@@ -29,7 +29,45 @@ const GlobalHead = props => {
   const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
   const favicon = siteConfig('BLOG_FAVICON')
   const webFontUrl = siteConfig('FONT_URL')
+  const BACKGROUND_DARK = siteConfig('BACKGROUND_DARK', '', NOTION_CONFIG)
 
+  const SEO_BAIDU_SITE_VERIFICATION = siteConfig(
+    'SEO_BAIDU_SITE_VERIFICATION',
+    null,
+    NOTION_CONFIG
+  )
+
+  const SEO_GOOGLE_SITE_VERIFICATION = siteConfig(
+    'SEO_GOOGLE_SITE_VERIFICATION',
+    null,
+    NOTION_CONFIG
+  )
+
+  const BLOG_FAVICON = siteConfig('BLOG_FAVICON', null, NOTION_CONFIG)
+
+  const COMMENT_WEBMENTION_ENABLE = siteConfig(
+    'COMMENT_WEBMENTION_ENABLE',
+    null,
+    NOTION_CONFIG
+  )
+
+  const COMMENT_WEBMENTION_HOSTNAME = siteConfig(
+    'COMMENT_WEBMENTION_HOSTNAME',
+    null,
+    NOTION_CONFIG
+  )
+  const COMMENT_WEBMENTION_AUTH = siteConfig(
+    'COMMENT_WEBMENTION_AUTH',
+    null,
+    NOTION_CONFIG
+  )
+  const ANALYTICS_BUSUANZI_ENABLE = siteConfig(
+    'ANALYTICS_BUSUANZI_ENABLE',
+    null,
+    NOTION_CONFIG
+  )
+
+  const FACEBOOK_PAGE = siteConfig('FACEBOOK_PAGE', null, NOTION_CONFIG)
   // SEO关键词
   let keywords = meta?.tags || siteConfig('KEYWORDS')
   if (post?.tags && post?.tags?.length > 0) {
@@ -59,24 +97,23 @@ const GlobalHead = props => {
     <Head>
       <link rel='icon' href={favicon} />
       <title>{title}</title>
-      <meta name='theme-color' content={siteConfig('BACKGROUND_DARK')} />
-
+      <meta name='theme-color' content={BACKGROUND_DARK} />
       <meta
         name='viewport'
         content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0'
       />
       <meta name='robots' content='follow, index' />
       <meta charSet='UTF-8' />
-      {siteConfig('SEO_GOOGLE_SITE_VERIFICATION') && (
+      {SEO_GOOGLE_SITE_VERIFICATION && (
         <meta
           name='google-site-verification'
-          content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')}
+          content={SEO_GOOGLE_SITE_VERIFICATION}
         />
       )}
-      {siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (
+      {SEO_BAIDU_SITE_VERIFICATION && (
         <meta
           name='baidu-site-verification'
-          content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')}
+          content={SEO_BAIDU_SITE_VERIFICATION}
         />
       )}
       <meta name='keywords' content={keywords} />
@@ -86,44 +123,39 @@ const GlobalHead = props => {
       <meta property='og:description' content={description} />
       <meta property='og:url' content={url} />
       <meta property='og:image' content={image} />
-      <meta property='og:site_name' content={siteConfig('TITLE')} />
+      <meta property='og:site_name' content={title} />
       <meta property='og:type' content={type} />
       <meta name='twitter:card' content='summary_large_image' />
       <meta name='twitter:description' content={description} />
       <meta name='twitter:title' content={title} />
 
-      <link rel='icon' href={`${siteConfig('BLOG_FAVICON')}`} />
+      <link rel='icon' href={BLOG_FAVICON} />
 
-      {siteConfig('COMMENT_WEBMENTION_ENABLE') && (
+      {COMMENT_WEBMENTION_ENABLE && (
         <>
           <link
             rel='webmention'
-            href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/webmention`}
+            href={`https://webmention.io/${COMMENT_WEBMENTION_HOSTNAME}/webmention`}
           />
           <link
             rel='pingback'
-            href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`}
+            href={`https://webmention.io/${COMMENT_WEBMENTION_HOSTNAME}/xmlrpc`}
           />
+          {COMMENT_WEBMENTION_AUTH && (
+            <link href={COMMENT_WEBMENTION_AUTH} rel='me' />
+          )}
         </>
       )}
 
-      {siteConfig('COMMENT_WEBMENTION_ENABLE') &&
-        siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
-          <link href={siteConfig('COMMENT_WEBMENTION_AUTH')} rel='me' />
-        )}
-
-      {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && (
+      {ANALYTICS_BUSUANZI_ENABLE && (
         <meta name='referrer' content='no-referrer-when-downgrade' />
       )}
       {meta?.type === 'Post' && (
         <>
           <meta property='article:published_time' content={meta.publishDay} />
           <meta property='article:author' content={siteConfig('AUTHOR')} />
           <meta property='article:section' content={category} />
-          <meta
-            property='article:publisher'
-            content={siteConfig('FACEBOOK_PAGE')}
-          />
+          <meta property='article:publisher' content={FACEBOOK_PAGE} />
         </>
       )}
       {children}
@@ -136,8 +168,7 @@ const GlobalHead = props => {
  * @param {*} props
  * @param {*} router
  */
-const getSEOMeta = (props, router, global) => {
-  const { locale } = global
+const getSEOMeta = (props, router, locale) => {
   const { post, siteInfo, tag, category, page } = props
   const keyword = router?.query?.s