Skip to content

Commit 4ae4ea8

Browse files
tangly1024tangly1024
authored
Merge pull request tangly1024#2318 from tangly1024/feat/web-font-notion-config
NOTION_CONFIG支持配置FONT_URL
2 parents afb3cf0 + 981ec37 commit 4ae4ea8

File tree

2 files changed

+54
-29
lines changed

2 files changed

+54
-29
lines changed

‎components/GlobalHead.js

+54-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { siteConfig } from '@/lib/config'
22
import { useGlobal } from '@/lib/global'
3+
import { loadExternalResource } from '@/lib/utils'
34
import Head from 'next/head'
45
import { useRouter } from 'next/router'
6+
import { useEffect } from 'react'
57

68
/**
79
* 页面的Head头，通常有用于SEO
@@ -10,7 +12,9 @@ import { useRouter } from 'next/router'
1012
*/
1113
const GlobalHead = props => {
1214
const { children, siteInfo } = props
13-
let url = siteConfig('PATH')?.length ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}` : siteConfig('LINK')
15+
let url = siteConfig('PATH')?.length
16+
? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}`
17+
: siteConfig('LINK')
1418
let image
1519
const router = useRouter()
1620
const meta = getSEOMeta(props, router, useGlobal())
@@ -24,19 +28,50 @@ const GlobalHead = props => {
2428
const keywords = meta?.tags || siteConfig('KEYWORDS')
2529
const lang = siteConfig('LANG').replace('-', '_') // Facebook OpenGraph 要 zh_CN 這樣的格式才抓得到語言
2630
const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
31+
const favicon = siteConfig('BLOG_FAVICON')
32+
const webFontUrl = siteConfig('FONT_URL')
33+
34+
useEffect(() => {
35+
// 使用WebFontLoader字体加载
36+
loadExternalResource(
37+
'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js',
38+
'js'
39+
).then(url => {
40+
const WebFont = window?.WebFont
41+
if (WebFont) {
42+
console.log('LoadWebFont', webFontUrl)
43+
WebFont.load({
44+
custom: {
45+
// families: ['"LXGW WenKai"'],
46+
urls: webFontUrl
47+
}
48+
})
49+
}
50+
})
51+
}, [])
2752

2853
return (
2954
<Head>
55+
<link rel='icon' href={favicon} />
3056
<title>{title}</title>
3157
<meta name='theme-color' content={siteConfig('BACKGROUND_DARK')} />
32-
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0' />
58+
<meta
59+
name='viewport'
60+
content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0'
61+
/>
3362
<meta name='robots' content='follow, index' />
3463
<meta charSet='UTF-8' />
3564
{siteConfig('SEO_GOOGLE_SITE_VERIFICATION') && (
36-
<meta name='google-site-verification' content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')} />
65+
<meta
66+
name='google-site-verification'
67+
content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')}
68+
/>
3769
)}
3870
{siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (
39-
<meta name='baidu-site-verification' content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')} />
71+
<meta
72+
name='baidu-site-verification'
73+
content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')}
74+
/>
4075
)}
4176
<meta name='keywords' content={keywords} />
4277
<meta name='description' content={description} />
@@ -57,13 +92,17 @@ const GlobalHead = props => {
5792
rel='webmention'
5893
href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/webmention`}
5994
/>
60-
<link rel='pingback' href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`} />
95+
<link
96+
rel='pingback'
97+
href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`}
98+
/>
6199
</>
62100
)}
63101

64-
{siteConfig('COMMENT_WEBMENTION_ENABLE') && siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
65-
<link href={siteConfig('COMMENT_WEBMENTION_AUTH')} rel='me' />
66-
)}
102+
{siteConfig('COMMENT_WEBMENTION_ENABLE') &&
103+
siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
104+
<link href={siteConfig('COMMENT_WEBMENTION_AUTH')} rel='me' />
105+
)}
67106

68107
{JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && (
69108
<meta name='referrer' content='no-referrer-when-downgrade' />
@@ -73,7 +112,10 @@ const GlobalHead = props => {
73112
<meta property='article:published_time' content={meta.publishDay} />
74113
<meta property='article:author' content={siteConfig('AUTHOR')} />
75114
<meta property='article:section' content={category} />
76-
<meta property='article:publisher' content={siteConfig('FACEBOOK_PAGE')} />
115+
<meta
116+
property='article:publisher'
117+
content={siteConfig('FACEBOOK_PAGE')}
118+
/>
77119
</>
78120
)}
79121
{children}
@@ -181,7 +223,9 @@ const getSEOMeta = (props, router, global) => {
181223
}
182224
default:
183225
return {
184-
title: post ? `${post?.title} | ${siteInfo?.title}` : `${siteInfo?.title} | loading`,
226+
title: post
227+
? `${post?.title} | ${siteInfo?.title}`
228+
: `${siteInfo?.title} | loading`,
185229
description: post?.summary,
186230
type: post?.type,
187231
slug: post?.slug,

‎pages/_document.js

-19
Original file line numberDiff line numberDiff line change
@@ -30,25 +30,6 @@ class MyDocument extends Document {
3030
/>
3131
</>
3232
)}
33-
34-
{BLOG.FONT_URL?.map((fontUrl, index) => {
35-
if (
36-
fontUrl.endsWith('.css') ||
37-
fontUrl.includes('googleapis.com/css')
38-
) {
39-
return <link key={index} rel='stylesheet' href={fontUrl} />
40-
} else {
41-
return (
42-
<link
43-
key={index}
44-
rel='preload'
45-
href={fontUrl}
46-
as='font'
47-
type='font/woff2'
48-
/>
49-
)
50-
}
51-
})}
5233
</Head>
5334

5435
<body>

0 commit comments

Comments
 (0)