diff --git a/blog.config.js b/blog.config.js index da6196e2..11d427d0 100644 --- a/blog.config.js +++ b/blog.config.js @@ -26,15 +26,15 @@ const BLOG = { 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'], + // 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'], // 自定义google字体示例： 请先将FONT 改为 'font-custom'， 并将FONT_URL改为你的字体地址，同时在FONT_CUSTOM中指定你的 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'], + 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 = <> + {JSON.parse(BLOG.THEME_SWITCH) && } {JSON.parse(BLOG.DEBUG) && } {BLOG.ANALYTICS_ACKEE_TRACKER && } diff --git a/styles/globals.css b/styles/globals.css index 44141e22..477f408b 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -101,71 +101,74 @@ nav { } } -.shadow-card{ - box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; +.shadow-card { + box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, + rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, + rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; } -.gt-meta{ - @apply dark:text-gray-300 +.gt-meta { + @apply dark:text-gray-300; } #waifu { - @apply right-auto left-0 hidden lg:block z-10 !important + @apply right-auto left-0 hidden lg:block z-10 !important; } /* 隐藏滚动条 */ -.scroll-hidden{ +.scroll-hidden { -ms-overflow-style: none; overflow: -moz-scrollbars-none; scrollbar-width: none; /* firefox */ } -.scroll-hidden::-webkit-scrollbar { width: 0 !important } - -.notion-collection{ - @apply max-w-0 +.scroll-hidden::-webkit-scrollbar { + width: 0 !important; } +.notion-collection { + @apply max-w-0; +} -.glassmorphism{ - background: hsla(0, 0%, 100%, .05); +.glassmorphism { + background: hsla(0, 0%, 100%, 0.05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } -.dark .glassmorphism{ - background: rgba(31, 41, 55, .75); +.dark .glassmorphism { + background: rgba(31, 41, 55, 0.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } -.medium-zoom-overlay{ +.medium-zoom-overlay { background: none !important; /* background: rgba(0, 0, 0, 0.01) none repeat scroll 0% 0% !important; */ } -.shadow-text{ +.shadow-text { text-shadow: 0.1em 0.1em 0.2em black; } -.notion-code-copy-button > svg{ - pointer-events:none +.notion-code-copy-button > svg { + pointer-events: none; } -.fireworks{ - position: fixed; - left: 0; - top: 0; - z-index: 1000; - pointer-events: none; +.fireworks { + position: fixed; + left: 0; + top: 0; + z-index: 1000; + pointer-events: none; } [data-waline] p { color: var(--waline-color); - @apply dark:text-gray-200 !important + @apply dark:text-gray-200 !important; } -.waline-recent-content p{ +.waline-recent-content p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; @@ -177,5 +180,5 @@ nav { display: inline-block; vertical-align: baseline; height: 1.25em; - margin: -.125em .25em; -} \ No newline at end of file + margin: -0.125em 0.25em; +} diff --git a/themes/next/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js index 3f45add3..33049bf6 100644 --- a/themes/next/components/BlogPostCard.js +++ b/themes/next/components/BlogPostCard.js @@ -20,7 +20,7 @@ const BlogPostCard = ({ post, showSummary }) => {
{post.title}