diff --git a/blog.config.js b/blog.config.js index 3b0f3184..53e784af 100644 --- a/blog.config.js +++ b/blog.config.js @@ -34,7 +34,7 @@ const BLOG = { // 以下是示例: // FONT: 'font-custom', // FONT_URL: 'https://fonts.font.im/css2?family=Ma+Shan+Zheng&display=swap', - // FONT_CUSTOM_FAMILY: ['"Times New Roman"', 'Ma Shan Zheng'], + // FONT_CUSTOM_FAMILY: ['"Times New Roman"', '"Ma Shan Zheng"'], // 图标字体 FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN ,国内推荐BootCDN,国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css diff --git a/components/TailwindCustomCssInit.js b/components/TailwindCustomCssInit.js new file mode 100644 index 00000000..44a51e43 --- /dev/null +++ b/components/TailwindCustomCssInit.js @@ -0,0 +1,17 @@ +import React from 'react' + +/** + * TailwindCss中自定义扩展了font-custom 这个扩展fontFamily,但页面中没有实际用到,会导致编译时被忽略。 + * 为了确保blog.config.js中配置使用 font-custom字体能生效,在此写入一个font-custom样式,页面中无实际作用,用effect勾子删除即可 + * @returns + */ +const TailwindCustomCssInit = () => { + const cssInitRef = React.useRef(null) + + React.useEffect(() => { + cssInitRef?.current?.remove() + }) + return
+} + +export default TailwindCustomCssInit diff --git a/pages/_app.js b/pages/_app.js index e4205758..acffbcb9 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -19,6 +19,7 @@ import { GlobalContextProvider } from '@/lib/global' import { DebugPanel } from '@/components/DebugPanel' import { ThemeSwitch } from '@/components/ThemeSwitch' import { Fireworks } from '@/components/Fireworks' +import TailwindCustomCssInit from '@/components/TailwindCustomCssInit' const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false }) const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false }) @@ -33,6 +34,7 @@ const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { const MyApp = ({ Component, pageProps }) => { // 外部插件 const externalPlugins = <> +