d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-30 23:16:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

GlobalHead 的优化

Browse Source
This commit is contained in:
tangly1024.com
2024-05-09 16:02:21 +08:00
parent 5c8c1ee407
commit 2da448f4f8
1 changed files with 57 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
components/GlobalHead.js
View File

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