From 19448b63b4081f0d9448be14c248fc1fc2250a08 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 8 Feb 2023 12:57:12 +0800 Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89js/css=20=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E4=BB=A3=E7=A0=81=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 6 ++++-- components/ExternalScript.js | 3 +++ components/NotionPage.js | 2 +- components/PrismMac.js | 8 ++++++++ pages/_app.js | 3 --- public/css/custom.css | 2 ++ {styles => public/css}/prism-mac-style.css | 20 ++++++++++++++++---- public/js/custom.js | 1 + styles/notion.css | 2 +- 9 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 public/css/custom.css rename {styles => public/css}/prism-mac-style.css (59%) create mode 100644 public/js/custom.js diff --git a/blog.config.js b/blog.config.js index 2b0c3d28..fe3e8619 100644 --- a/blog.config.js +++ b/blog.config.js @@ -45,9 +45,11 @@ const BLOG = { BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX - // PrismJs CDN + // PrismJs 代码相关 PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/', - CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', + PRISM_THEME_PATH: 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes + CODE_MAC_BAR: true, // 代码左上角显示mac的红黄绿图标 + CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号 BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc BACKGROUND_DARK: '#000000', // use hex value, don't forget '#' diff --git a/components/ExternalScript.js b/components/ExternalScript.js index b8253726..0a30712c 100644 --- a/components/ExternalScript.js +++ b/components/ExternalScript.js @@ -18,6 +18,9 @@ const ExternalScript = () => { loadExternalResource(url, 'css') } } + // 静态导入本地自定义样式 + loadExternalResource('/css/custom.css', 'css') + loadExternalResource('/js/custom.js', 'js') }, []) return null } diff --git a/components/NotionPage.js b/components/NotionPage.js index 429a6853..be168b31 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -26,7 +26,7 @@ const Pdf = dynamic( // https://github.com/txs // import PrismMac from '@/components/PrismMac' const PrismMac = dynamic(() => import('@/components/PrismMac'), { - ssr: false + ssr: true }) const Collection = dynamic(() => diff --git a/components/PrismMac.js b/components/PrismMac.js index 41d5e588..4bd16caa 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -10,12 +10,20 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css' import 'prismjs/plugins/autoloader/prism-autoloader' // mermaid图 import BLOG from '@/blog.config' +import { isBrowser, loadExternalResource } from '@/lib/utils' /** * @author https://github.com/txs/ * @returns */ const PrismMac = () => { + if (isBrowser()) { + loadExternalResource(BLOG.PRISM_THEME_PATH, 'css') + if (BLOG.CODE_MAC_BAR) { + loadExternalResource('/css/prism-mac-style.css', 'css') + } + } + React.useEffect(() => { renderPrismMac() renderMermaid() diff --git a/pages/_app.js b/pages/_app.js index 0958ade8..c5ec78e3 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -9,9 +9,6 @@ import '@/styles/globals.css' import 'react-notion-x/src/styles.css' import '@/styles/notion.css' // 重写部分样式 -// 代码样式 更多样式参考： https://github.com/PrismJS/prism-themes -import 'prism-themes/themes/prism-material-light.css' - // local webfont @see https://fontsource.org/ import '@fontsource/noto-sans-sc' import '@fontsource/noto-serif-sc' diff --git a/public/css/custom.css b/public/css/custom.css new file mode 100644 index 00000000..2f828f60 --- /dev/null +++ b/public/css/custom.css @@ -0,0 +1,2 @@ +/* 静态文件导入 自定义样式*/ + diff --git a/styles/prism-mac-style.css b/public/css/prism-mac-style.css similarity index 59% rename from styles/prism-mac-style.css rename to public/css/prism-mac-style.css index 09e8dcfa..3cfb0c2b 100644 --- a/styles/prism-mac-style.css +++ b/public/css/prism-mac-style.css @@ -5,11 +5,14 @@ position: relative; padding-top: 0 !important; padding-bottom: 0 !important; - @apply w-full rounded-lg + width: 100%; + border-radius: 0.5rem; + /* @apply w-full rounded-lg */ } .toolbar-item{ - @apply whitespace-nowrap + /* @apply whitespace-nowrap */ + white-space: nowrap; } .toolbar-item > button { @@ -18,10 +21,18 @@ pre[class*='language-'] { @apply mt-0 mb-2 pt-6 !important; + margin-top: 0rem !important; + margin-bottom: 0rem !important; + padding-top: 1.5rem !important; + } .pre-mac { - @apply left-5 top-2 z-10 absolute + /* @apply left-5 top-2 z-10 absolute */ + position: absolute; + left: 1.25rem; + top: 0.5rem; + z-index: 10; } .pre-mac > span { @@ -29,7 +40,8 @@ pre[class*='language-'] { height: 10px; border-radius: 50%; margin-right: 5px; - @apply float-left + float: left; + /* @apply float-left */ } .pre-mac > span:nth-child(1) { diff --git a/public/js/custom.js b/public/js/custom.js new file mode 100644 index 00000000..934a169f --- /dev/null +++ b/public/js/custom.js @@ -0,0 +1 @@ +// 这里编写自定义js脚本；将被静态引入到页面中 diff --git a/styles/notion.css b/styles/notion.css index a94ad24b..bf1edef9 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -1999,5 +1999,5 @@ code.language-mermaid { } .code-toolbar{ - @apply w-full; + @apply w-full shadow-md; } \ No newline at end of file