mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
feat: 更好的自定义字体配置
This commit is contained in:
wb_guodonghao
@@ -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
|
||||
|
||||
@@ -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 <div ref={cssInitRef} className='font-custom'></div>
|
||||
}
|
||||
|
||||
export default TailwindCustomCssInit
|
||||
10
lib/font.js
10
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
|
||||
|
||||
@@ -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 = <>
|
||||
<TailwindCustomCssInit/>
|
||||
{JSON.parse(BLOG.THEME_SWITCH) && <ThemeSwitch />}
|
||||
{JSON.parse(BLOG.DEBUG) && <DebugPanel />}
|
||||
{BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
|
||||
|
||||
@@ -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 (
|
||||
<Html lang={BLOG.LANG} className='test'>
|
||||
<Head>
|
||||
<link rel='icon' href='/favicon.ico' />
|
||||
<link rel='icon' href='/favicon.svg' type='image/svg+xml' />
|
||||
{/* 谷歌字体镜像 */}
|
||||
<link href={`${BLOG.FONT_URL}`} rel="stylesheet"/>
|
||||
{BLOG.CUSTOM_FONT
|
||||
? <link href='https://fonts.font.im/css2?family=Noto+Serif+SC&display=swap' rel='stylesheet' />
|
||||
: BLOG.CUSTOM_FONT_URL?.map(fontUrl =>
|
||||
<link href={`${fontUrl}`} key={fontUrl} rel='stylesheet' />)}
|
||||
<CommonScript />
|
||||
</Head>
|
||||
|
||||
<body className={`${BLOG.FONT} tracking-wider subpixel-antialiased bg-day dark:bg-night`}>
|
||||
<Main />
|
||||
<NextScript />
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user