diff --git a/blog.config.js b/blog.config.js
index 53e784af..6030b766 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -5,7 +5,7 @@ const BLOG = {
LINK: 'https://tangly1024.com', // 网站地址
KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
NOTION_PAGE_ID:
- process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
+ process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
@@ -25,16 +25,18 @@ const BLOG = {
BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
- // 字体相关
- FONT: 'font-sans', // 预设三种文章字体 ['font-sans', 'font-serif', 'font-mono'] @see /lib/font.js https://www.tailwindcss.cn/docs/font-family
- FONT_URL: 'https://fonts.font.im/css2?family=Noto+Serif+SC&display=swap', // 谷歌字体中国站镜像;对应的国际站地址：https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap
- FONT_CUSTOM: ['-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"', 'Arial', 'sans-serif'],
+ // 字体配置
+ CUSTOM_FONT: false, // 是否使用自定义字体
+ CUSTOM_FONT_URL: [], // 自定义字体的CSS
+ CUSTOM_FONT_SANS: [], // 自定义无衬线字体
+ CUSTOM_FONT_SERIF: [], // 自定义衬线字体
- // 自定义google字体示例： 请先将FONT 改为 'font-custom'， 并将FONT_URL改为你的字体地址，同时在FONT_CUSTOM中指定你的 fontfamily
+ // 自定义字体示例： 请先将 CUSTOM_FONT 改为 true， 并将 CUSTOM_FONT_URL 改为你的字体CSS地址，同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily
// 以下是示例：
- // 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"'],
+ // CUSTOM_FONT: true, // 是否使用自定义字体
+ // CUSTOM_FONT_URL: ['https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.6.0/lxgwwenkaiscreen.css'], // 自定义字体的CSS
+ // CUSTOM_FONT_SANS: ['LXGW WenKai Screen'], // 自定义无衬线字体
+ // CUSTOM_FONT_SERIF: ['LXGW WenKai Screen'], // 自定义衬线字体
// 图标字体
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
deleted file mode 100644
index 44a51e43..00000000
--- a/components/TailwindCustomCssInit.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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/lib/font.js b/lib/font.js
index bdca0598..d485eebd 100644
--- a/lib/font.js
+++ b/lib/font.js
@@ -2,9 +2,10 @@
* 在此处配置字体
*/
const BLOG = require('../blog.config')
+
// const { fontFamily } = require('tailwindcss/defaultTheme')
-function CJK () {
+function CJK() {
switch (BLOG.LANG.toLowerCase()) {
case 'zh-cn':
case 'zh-sg':
@@ -32,12 +33,12 @@ const fontSerifCJK = !CJK()
: [`"Noto Serif CJK ${CJK()}"`, `"Noto Serif ${CJK()}"`]
const fontFamilies = {
- sans: ['-apple-system', 'BlinkMacSystemFont', '"Apple Color Emoji"',
+ 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"',
'Arial', 'sans-serif', ...fontSansCJK],
- serif: ['STZhongsong', 'STSong', '"Noto Serif CJK"', '"Noto Serif SC"', 'PMingLiu',
+ 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',
'"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', ...fontSerifCJK],
noEmoji: [
@@ -46,8 +47,7 @@ const fontFamilies = {
'-apple-system',
'BlinkMacSystemFont',
'sans-serif'
- ],
- custom: BLOG.FONT_CUSTOM_FAMILY
+ ]
}
module.exports = fontFamilies
diff --git a/pages/_app.js b/pages/_app.js
index acffbcb9..e4205758 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -19,7 +19,6 @@ 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 })
@@ -34,7 +33,6 @@ const Messenger = dynamic(() => import('@/components/FacebookMessenger'), {
const MyApp = ({ Component, pageProps }) => {
// 外部插件
const externalPlugins = <>
-
{JSON.parse(BLOG.THEME_SWITCH) && }
{JSON.parse(BLOG.DEBUG) && }
{BLOG.ANALYTICS_ACKEE_TRACKER && }
diff --git a/pages/_document.js b/pages/_document.js
index 0eb425b9..ff10b054 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -4,25 +4,28 @@ import BLOG from '@/blog.config'
import CommonScript from '@/components/CommonScript'
class MyDocument extends Document {
- static async getInitialProps (ctx) {
+ static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
- render () {
+ render() {
return (
{/* 谷歌字体镜像 */}
-
+ {BLOG.CUSTOM_FONT
+ ?
+ : BLOG.CUSTOM_FONT_URL?.map(fontUrl =>
+ )}
-
-
+
+
)