Merge pull request #2318 from tangly1024/feat/web-font-notion-config

NOTION_CONFIG支持配置FONT_URL
This commit is contained in:
tangly1024
2024-04-23 18:02:05 +08:00
committed by GitHub
2 changed files with 54 additions and 29 deletions

View File

@@ -1,7 +1,9 @@
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import { loadExternalResource } from '@/lib/utils'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
/**
* 页面的Head头通常有用于SEO
@@ -10,7 +12,9 @@ import { useRouter } from 'next/router'
*/
const GlobalHead = props => {
const { children, siteInfo } = props
let url = siteConfig('PATH')?.length ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}` : siteConfig('LINK')
let url = siteConfig('PATH')?.length
? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}`
: siteConfig('LINK')
let image
const router = useRouter()
const meta = getSEOMeta(props, router, useGlobal())
@@ -24,19 +28,50 @@ const GlobalHead = props => {
const keywords = meta?.tags || siteConfig('KEYWORDS')
const lang = siteConfig('LANG').replace('-', '_') // Facebook OpenGraph 要 zh_CN 這樣的格式才抓得到語言
const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類Facebook 用這個來抓連結的分類
const favicon = siteConfig('BLOG_FAVICON')
const webFontUrl = siteConfig('FONT_URL')
useEffect(() => {
// 使用WebFontLoader字体加载
loadExternalResource(
'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js',
'js'
).then(url => {
const WebFont = window?.WebFont
if (WebFont) {
console.log('LoadWebFont', webFontUrl)
WebFont.load({
custom: {
// families: ['"LXGW WenKai"'],
urls: webFontUrl
}
})
}
})
}, [])
return (
<Head>
<link rel='icon' href={favicon} />
<title>{title}</title>
<meta name='theme-color' content={siteConfig('BACKGROUND_DARK')} />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0' />
<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') && (
<meta name='google-site-verification' content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')} />
<meta
name='google-site-verification'
content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')}
/>
)}
{siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (
<meta name='baidu-site-verification' content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')} />
<meta
name='baidu-site-verification'
content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')}
/>
)}
<meta name='keywords' content={keywords} />
<meta name='description' content={description} />
@@ -57,13 +92,17 @@ const GlobalHead = props => {
rel='webmention'
href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/webmention`}
/>
<link rel='pingback' href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`} />
<link
rel='pingback'
href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`}
/>
</>
)}
{siteConfig('COMMENT_WEBMENTION_ENABLE') && siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
<link href={siteConfig('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')) && (
<meta name='referrer' content='no-referrer-when-downgrade' />
@@ -73,7 +112,10 @@ const GlobalHead = props => {
<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={siteConfig('FACEBOOK_PAGE')}
/>
</>
)}
{children}
@@ -181,7 +223,9 @@ const getSEOMeta = (props, router, global) => {
}
default:
return {
title: post ? `${post?.title} | ${siteInfo?.title}` : `${siteInfo?.title} | loading`,
title: post
? `${post?.title} | ${siteInfo?.title}`
: `${siteInfo?.title} | loading`,
description: post?.summary,
type: post?.type,
slug: post?.slug,

View File

@@ -30,25 +30,6 @@ class MyDocument extends Document {
/>
</>
)}
{BLOG.FONT_URL?.map((fontUrl, index) => {
if (
fontUrl.endsWith('.css') ||
fontUrl.includes('googleapis.com/css')
) {
return <link key={index} rel='stylesheet' href={fontUrl} />
} else {
return (
<link
key={index}
rel='preload'
href={fontUrl}
as='font'
type='font/woff2'
/>
)
}
})}
</Head>
<body>