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

优化字体预渲染

Browse Source
This commit is contained in:
tangly1024.com
2023-07-21 14:16:14 +08:00
parent 32b7747d74
commit 4b6c045237
4 changed files with 77 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
components/CommonHead.js
View File

@@ -16,56 +16,66 @@ const CommonHead = ({ meta, children }) => {
const category = meta?.category || BLOG.KEYWORDS || '軟體科技' // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
return (
<Head>
<title>{title}</title>
<meta name="theme-color" content={BLOG.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" />
{BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
<meta
name="google-site-verification"
content={BLOG.SEO_GOOGLE_SITE_VERIFICATION}
/>
)}
{BLOG.SEO_BAIDU_SITE_VERIFICATION && (<meta name="baidu-site-verification" content={BLOG.SEO_BAIDU_SITE_VERIFICATION} />)}
<meta name="keywords" content={keywords} />
<meta name="description" content={description} />
<meta property="og:locale" content={lang} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:image" content={image} />
<meta property="og:site_name" content={BLOG.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} />
<Head>
<title>{title}</title>
<meta name="theme-color" content={BLOG.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" />
{BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
<meta
name="google-site-verification"
content={BLOG.SEO_GOOGLE_SITE_VERIFICATION}
/>
)}
{BLOG.SEO_BAIDU_SITE_VERIFICATION && (<meta name="baidu-site-verification" content={BLOG.SEO_BAIDU_SITE_VERIFICATION} />)}
<meta name="keywords" content={keywords} />
<meta name="description" content={description} />
<meta property="og:locale" content={lang} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:image" content={image} />
<meta property="og:site_name" content={BLOG.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} />
{BLOG.COMMENT_WEBMENTION.ENABLE && (
<>
<link rel="webmention" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/webmention`} />
<link rel="pingback" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/xmlrpc`} />
</>
)}
{BLOG.COMMENT_WEBMENTION.ENABLE && BLOG.COMMENT_WEBMENTION.AUTH !== '' && (
<link href={BLOG.COMMENT_WEBMENTION.AUTH} rel="me" />
)}
{/* 预加载字体 */}
{BLOG.FONT_AWESOME && <>
<link rel='preload' href={BLOG.FONT_AWESOME} as="style" crossOrigin="anonymous" />
<link rel="stylesheet" href={BLOG.FONT_AWESOME} crossOrigin="anonymous" referrerpolicy="no-referrer" />
</>}
{BLOG.FONT_URL?.map((fontUrl, index) => {
return <link key={index} rel='preload' href={fontUrl} as='font' type='font/woff2' />
})}
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <meta name="referrer" content="no-referrer-when-downgrade" />}
{meta?.type === 'Post' && (
<>
<meta
property="article:published_time"
content={meta.publishTime}
/>
<meta property="article:author" content={BLOG.AUTHOR} />
<meta property="article:section" content={category} />
<meta property="article:publisher" content={BLOG.FACEBOOK_PAGE} />
</>
)}
{children}
</Head>
{BLOG.COMMENT_WEBMENTION.ENABLE && (
<>
<link rel="webmention" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/webmention`} />
<link rel="pingback" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/xmlrpc`} />
</>
)}
{BLOG.COMMENT_WEBMENTION.ENABLE && BLOG.COMMENT_WEBMENTION.AUTH !== '' && (
<link href={BLOG.COMMENT_WEBMENTION.AUTH} rel="me" />
)}
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <meta name="referrer" content="no-referrer-when-downgrade" />}
{meta?.type === 'Post' && (
<>
<meta
property="article:published_time"
content={meta.publishTime}
/>
<meta property="article:author" content={BLOG.AUTHOR} />
<meta property="article:section" content={category} />
<meta property="article:publisher" content={BLOG.FACEBOOK_PAGE} />
</>
)}
{children}
</Head>
)
}

5
components/ExternalScript.js
View File

@@ -10,7 +10,6 @@ import { isBrowser, loadExternalResource } from '@/lib/utils'
const ExternalScript = () => {
if (isBrowser()) {
// 静态导入本地自定义样式
loadExternalResource(BLOG.FONT_AWESOME, 'css')
loadExternalResource('/css/custom.css', 'css')
loadExternalResource('/js/custom.js', 'js')
@@ -29,10 +28,6 @@ const ExternalScript = () => {
loadExternalResource(url, 'css')
}
}
// 渲染所有字体
BLOG.FONT_URL?.forEach(e => {
loadExternalResource(e, 'font')
})
}
return null
}

42
components/LazyImage.js
View File

@@ -1,18 +1,19 @@
import Head from 'next/head'
import React, { useEffect, useRef, useState } from 'react'
/**
* 默认懒加载占位图
*/
const loadingSVG = (
<svg
width="100"
height="100"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
fill="#ccc"
>
<circle cx="50" cy="50" r="42" strokeWidth="8" />
</svg>
<svg
width="100"
height="100"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
fill="#ccc"
>
<circle cx="50" cy="50" r="42" strokeWidth="8" />
</svg>
)
/**
@@ -42,17 +43,6 @@ export default function LazyImage({
}
}
// 预加载图片
useEffect(() => {
if (priority) {
const link = document.createElement('link')
link.rel = 'preload'
link.as = 'image'
link.href = src
document.head.appendChild(link)
}
}, [priority, src])
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
@@ -103,8 +93,12 @@ export default function LazyImage({
if (style) {
imgProps.style = style
}
return (
// eslint-disable-next-line @next/next/no-img-element
<img {...imgProps} />
)
return (<>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img {...imgProps} />
{/* 预加载 */}
{priority && <Head>
<link rel='preload' as='image' src={src} />
</Head>}
</>)
}

2
pages/_app.js
View File

@@ -29,7 +29,7 @@ const MyApp = ({ Component, pageProps }) => {
return (
<GlobalContextProvider>
<ExternalScript />
<Component {...pageProps}/>
<Component {...pageProps} />
<ExternalPlugins {...pageProps} />
</GlobalContextProvider>
)