From df64a7ca2e3a59c6142c9e184a5c7ce5e820bd1d Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 19 Oct 2022 14:11:50 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E5=AD=97=E4=BD=93=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/blog.config.js b/blog.config.js index a63eda89..07ba632f 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: '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_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 From 4f52d6133c533f774609cf0615a55b00fdc6efa7 Mon Sep 17 00:00:00 2001 From: tangly Date: Wed, 19 Oct 2022 15:30:57 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E8=B0=B7=E6=AD=8C=E5=AD=97=E4=BD=93?= =?UTF-8?q?=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/globals.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/globals.css b/styles/globals.css index 7899bd3d..44141e22 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -24,6 +24,10 @@ body::-webkit-scrollbar-thumb { background: rgba(45, 170, 219, 0.3); } +.font-custom { + font-family: theme(fontFamily.custom) +} + .wrapper { min-height: 100vh; display: flex; From 2022545dc6eae87d3115a6ec05c346d0739244db Mon Sep 17 00:00:00 2001 From: tangly Date: Thu, 20 Oct 2022 11:18:18 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BC=96=E8=AF=91?= =?UTF-8?q?=E6=89=93=E5=8C=85=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 6 +-- styles/globals.css | 63 +++++++++++++------------- themes/next/components/BlogPostCard.js | 2 +- 3 files changed, 35 insertions(+), 36 deletions(-) diff --git a/blog.config.js b/blog.config.js index 07ba632f..3b0f3184 100644 --- a/blog.config.js +++ b/blog.config.js @@ -32,9 +32,9 @@ const BLOG = { // 自定义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: '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_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/styles/globals.css b/styles/globals.css index 44141e22..4382cd6c 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -24,10 +24,6 @@ body::-webkit-scrollbar-thumb { background: rgba(45, 170, 219, 0.3); } -.font-custom { - font-family: theme(fontFamily.custom) -} - .wrapper { min-height: 100vh; display: flex; @@ -101,71 +97,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 +176,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} From 1ac147333dc1ec4b2e5fb56b0100360a5445d3a1 Mon Sep 17 00:00:00 2001 From: tangly Date: Thu, 20 Oct 2022 12:39:50 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AD=97=E4=BD=93?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 2 +- components/TailwindCustomCssInit.js | 17 +++++++++++++++++ pages/_app.js | 2 ++ 3 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 components/TailwindCustomCssInit.js 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 = <> + {JSON.parse(BLOG.THEME_SWITCH) && } {JSON.parse(BLOG.DEBUG) && } {BLOG.ANALYTICS_ACKEE_TRACKER && }