Merge pull request #655 from tangly1024/3.7.2

3.7.2

.env.local

@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.7.1
+NEXT_PUBLIC_VERSION=3.7.2

blog.config.js

@@ -22,8 +22,9 @@ const BLOG = {
   CONTACT_TELEGRAM: 'https://t.me/tangly_1024', // 你的telegram 地址 例如 https://t.me/tangly_1024
   CONTACT_LINKEDIN: '', // 你的linkedIn 首页
 
-  // 自定义字体示例： 请先将 CUSTOM_FONT 改为 true， 并将 CUSTOM_FONT_URL 改为你的字体CSS地址，同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily
-  CUSTOM_FONT: true, // 是否使用自定义字体
+  // 网站默认使用PingFangSC及NotoSansSC，
+  // 如需自定义字体，请将CUSTOM_FONT改为 true，并将CUSTOM_FONT_URL改为你的字体CSS地址，同时在CUSTOM_FONT_SANS与CUSTOM_FONT_SERIF中指定你的font-family
+  CUSTOM_FONT: process.env.NEXT_PUBLIC_CUSTOM_FONT || false, // 是否使用自定义字体
   CUSTOM_FONT_URL: ['https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css'], // 自定义字体的CSS
   CUSTOM_FONT_SANS: ['LXGW WenKai'], // 自定义无衬线字体
   CUSTOM_FONT_SERIF: ['LXGW WenKai'], // 自定义衬线字体
@@ -36,8 +37,6 @@ const BLOG = {
 
   BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
 
-  // 图标库CDN(可以直接改版本号）
-  FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.0/css/all.min.css',
   // PrismJs CDN
   PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
 

components/CommonHead.js

@@ -44,11 +44,6 @@ const CommonHead = ({ meta, children }) => {
       <meta name="twitter:description" content={description} />
       <meta name="twitter:title" content={title} />
 
-      { BLOG.CUSTOM_FONT
-        ? BLOG.CUSTOM_FONT_URL?.map(fontUrl =>
-            <link href={`${fontUrl}`} key={fontUrl} rel="stylesheet"/>)
-        : <link href='https://fonts.font.im/css2?family=Noto+Serif+SC&display=optional' rel="stylesheet"/> }
-
       {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <meta name="referrer" content="no-referrer-when-downgrade" />}
       {meta?.type === 'Post' && (
         <>

lib/font.js

@@ -33,13 +33,14 @@ const fontSerifCJK = !CJK()
   : [`"Noto Serif CJK ${CJK()}"`, `"Noto Serif ${CJK()}"`]
 
 const fontFamilies = {
-  sans: [...(BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_SANS : []), '-apple-system', 'BlinkMacSystemFont', '"Apple Color Emoji"',
-    '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Segoe UI"', '"PingFang SC"',
-    'HarmonyOS_Regular', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"Helvetica Neue"',
-    'Helvetica', '"Source Han Sans SC"', '"Noto Sans CJK SC"', '"WenQuanYi Micro Hei"',
+  sans: [...(BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_SANS : []),
+    '"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"',
+    '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Segoe UI"',
+    '"Noto Sans SC"', 'HarmonyOS_Regular', '"Microsoft YaHei"', '"Helvetica Neue"',
+    'Helvetica', '"Source Han Sans SC"',
     'Arial', 'sans-serif', ...fontSansCJK],
-  serif: [...(BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_SERIF : []), 'STZhongsong', 'STSong', '"Noto Serif CJK"', '"Noto Serif SC"', 'PMingLiu',
-    'SimSun', '"WenQuanYi Bitmap Song"', '"Times New Roman"', 'Times', 'serif',
+  serif: [...(BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_SERIF : []),
+    '"Noto Serif SC"', 'SimSun', '"Times New Roman"', 'Times', 'serif',
     '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', ...fontSerifCJK],
   noEmoji: [
     'ui-sans-serif',
@@ -49,5 +50,4 @@ const fontFamilies = {
     'sans-serif'
   ]
 }
-
 module.exports = { fontFamilies }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "3.7.1",
+  "version": "3.7.2",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {
@@ -20,6 +20,9 @@
     "bundle-report": "ANALYZE=true yarn build"
   },
   "dependencies": {
+    "@fontsource/noto-sans-sc": "^4.5.12",
+    "@fontsource/noto-serif-sc": "^4.5.11",
+    "@fortawesome/fontawesome-free": "^6.2.1",
     "@giscus/react": "^1.1.2",
     "@next/bundle-analyzer": "^12.1.1",
     "@popperjs/core": "^2.9.3",

pages/_app.js

@@ -12,13 +12,19 @@ import '@/styles/notion.css' //  重写部分样式
 // 代码样式  更多样式参考： https://github.com/PrismJS/prism-themes
 import 'prism-themes/themes/prism-material-light.css'
 
+// local webfont @see https://fontsource.org/
+import '@fontsource/noto-sans-sc'
+import '@fontsource/noto-serif-sc'
+
+// local fontawesome 6.2.1 @see https://www.npmjs.com/package/@fortawesome/fontawesome-free
+import '@fortawesome/fontawesome-free/css/all.min.css'
+
 // import '@/styles/prism-mac-style.css' // code 左上角显示mac的红黄绿图标
 
 import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { Fireworks } from '@/components/Fireworks'
-import { loadExternalResource } from '@/lib/utils'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -40,16 +46,22 @@ const MyApp = ({ Component, pageProps }) => {
         {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi />}
         {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
         {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
-        {JSON.parse(BLOG.FIREWORKS) && <Fireworks/>}
+        {JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
     </>
 
-  // 延迟加载fontAwesome
-  React.useEffect(() => {
-    loadExternalResource(BLOG.FONT_AWESOME_PATH, 'css')
-  }, [])
+  // 默认Webfont:  请在font.js文件中检查font-family 新版改从npm本地导入；
+  const DEFAULT_FONTS_URL = [
+    // 'https://fonts.font.im/css2?family=Noto+Sans+SC&display=optional',
+    // 'https://fonts.font.im/css2?family=Noto+Serif+SC&display=optional'
+  ]
+
+  // 用户指定CUSTOM_FONT 则取CUSTOM_FONT_URL
+  const FONTS_URL = BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_URL : DEFAULT_FONTS_URL
 
   return (
         <GlobalContextProvider>
+            {/* 渲染所有字体 */}
+            {FONTS_URL?.map(fontUrl => <link href={`${fontUrl}`} key={fontUrl} rel="stylesheet" />)}
             {externalPlugins}
             <Component {...pageProps} />
         </GlobalContextProvider>