From 394c8e0e0b65adbea9b9978349fc4eb0d7a0e052 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 23 Nov 2024 18:24:47 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=9BDynamicLayout?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=87=8D=E5=86=99=EF=BC=8C=E7=A7=BB=E9=99=A4?= =?UTF-8?q?blog.config.js=E4=B8=AD=E7=9A=84MAPPING=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/utils/index.js | 3 ++ pages/404.js | 4 +- pages/[prefix]/index.js | 2 +- pages/_app.js | 8 ++-- pages/archive/index.js | 4 +- pages/category/[category]/index.js | 4 +- pages/category/[category]/page/[page].js | 4 +- pages/category/index.js | 4 +- pages/dashboard/[[...index]].js | 4 +- pages/index.js | 4 +- pages/page/[page].js | 4 +- pages/search/[keyword]/index.js | 4 +- pages/search/[keyword]/page/[page].js | 4 +- pages/search/index.js | 2 +- pages/sign-in/[[...index]].js | 4 +- pages/sign-up/[[...index]].js | 4 +- pages/tag/[tag]/index.js | 4 +- pages/tag/[tag]/page/[page].js | 4 +- pages/tag/index.js | 2 +- styles/globals.css | 2 + themes/theme.js | 53 +++++++++++++----------- 21 files changed, 55 insertions(+), 73 deletions(-) diff --git a/lib/utils/index.js b/lib/utils/index.js index 63cdac69ed7..787dc90ddf7 100644 --- a/lib/utils/index.js +++ b/lib/utils/index.js @@ -204,6 +204,9 @@ export function getQueryVariable(key) { * @returns {string|null} */ export function getQueryParam(url, param) { + if (!url) { + return '' + } // 移除哈希部分 const urlWithoutHash = url.split('#')[0] const searchParams = new URLSearchParams(urlWithoutHash.split('?')[1]) diff --git a/pages/404.js b/pages/404.js index 4c58031ed8b..ca421b9ff3a 100644 --- a/pages/404.js +++ b/pages/404.js @@ -2,7 +2,6 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' /** * 404 @@ -10,9 +9,8 @@ import { useRouter } from 'next/router' * @returns */ const NoFound = props => { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps(req) { diff --git a/pages/[prefix]/index.js b/pages/[prefix]/index.js index a6d6e82f131..e26a95a98f2 100644 --- a/pages/[prefix]/index.js +++ b/pages/[prefix]/index.js @@ -87,7 +87,7 @@ const Slug = props => { return ( <> {/* 文章布局 */} - + {/* 解锁密码提示框 */} {post?.password && post?.password !== '' && !lock && } {/* 导流工具 */} diff --git a/pages/_app.js b/pages/_app.js index 80333a643b1..26fac1513e4 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -8,7 +8,7 @@ import 'react-notion-x/src/styles.css' // 原版的react-notion-x import useAdjustStyle from '@/hooks/useAdjustStyle' import { GlobalContextProvider } from '@/lib/global' -import { getGlobalLayoutByTheme } from '@/themes/theme' +import { getBaseLayoutByTheme } from '@/themes/theme' import { useRouter } from 'next/router' import { useCallback, useMemo } from 'react' import { getQueryParam } from '../lib/utils' @@ -34,7 +34,7 @@ const MyApp = ({ Component, pageProps }) => { useAdjustStyle() const route = useRouter() - const queryParam = useMemo(() => { + const theme = useMemo(() => { return ( getQueryParam(route.asPath, 'theme') || pageProps?.NOTION_CONFIG?.THEME || @@ -45,10 +45,10 @@ const MyApp = ({ Component, pageProps }) => { // 整体布局 const GLayout = useCallback( props => { - const Layout = getGlobalLayoutByTheme(queryParam) + const Layout = getBaseLayoutByTheme(theme) return }, - [queryParam] + [theme] ) const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY diff --git a/pages/archive/index.js b/pages/archive/index.js index 968803eea73..e7aade1e5ad 100644 --- a/pages/archive/index.js +++ b/pages/archive/index.js @@ -4,7 +4,6 @@ import { getGlobalData } from '@/lib/db/getSiteData' import { isBrowser } from '@/lib/utils' import { formatDateFmt } from '@/lib/utils/formatDate' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' import { useEffect } from 'react' /** @@ -27,9 +26,8 @@ const ArchiveIndex = props => { } }, []) - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps({ locale }) { diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js index a3a531a1d0b..f019dd327c8 100644 --- a/pages/category/[category]/index.js +++ b/pages/category/[category]/index.js @@ -2,7 +2,6 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' /** * 分类页 @@ -10,9 +9,8 @@ import { useRouter } from 'next/router' * @returns */ export default function Category(props) { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps({ params: { category }, locale }) { diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js index 9668cdebc7a..6863ee43e3f 100644 --- a/pages/category/[category]/page/[page].js +++ b/pages/category/[category]/page/[page].js @@ -2,7 +2,6 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' /** * 分类页 @@ -11,9 +10,8 @@ import { useRouter } from 'next/router' */ export default function Category(props) { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps({ params: { category, page } }) { diff --git a/pages/category/index.js b/pages/category/index.js index 4b2f3942d10..d38535c5763 100644 --- a/pages/category/index.js +++ b/pages/category/index.js @@ -2,7 +2,6 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' /** * 分类首页 @@ -10,9 +9,8 @@ import { useRouter } from 'next/router' * @returns */ export default function Category(props) { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps({ locale }) { diff --git a/pages/dashboard/[[...index]].js b/pages/dashboard/[[...index]].js index 0a865d927e4..790bd723853 100644 --- a/pages/dashboard/[[...index]].js +++ b/pages/dashboard/[[...index]].js @@ -2,7 +2,6 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' /** * 根据notion的slug访问页面 @@ -11,9 +10,8 @@ import { useRouter } from 'next/router' * @returns */ const Dashboard = props => { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps({ locale }) { diff --git a/pages/index.js b/pages/index.js index eaa21167fed..31e2610bd84 100644 --- a/pages/index.js +++ b/pages/index.js @@ -5,7 +5,6 @@ import { generateRobotsTxt } from '@/lib/robots.txt' import { generateRss } from '@/lib/rss' import { generateSitemapXml } from '@/lib/sitemap.xml' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' /** * 首页布局 @@ -13,9 +12,8 @@ import { useRouter } from 'next/router' * @returns */ const Index = props => { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } /** diff --git a/pages/page/[page].js b/pages/page/[page].js index 0166aba2f4e..1ee22afb574 100644 --- a/pages/page/[page].js +++ b/pages/page/[page].js @@ -2,7 +2,6 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData, getPostBlocks } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' /** * 文章列表分页 @@ -10,9 +9,8 @@ import { useRouter } from 'next/router' * @returns */ const Page = props => { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticPaths({ locale }) { diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js index 179583d825b..5985d7f8d50 100644 --- a/pages/search/[keyword]/index.js +++ b/pages/search/[keyword]/index.js @@ -3,12 +3,10 @@ import { getDataFromCache } from '@/lib/cache/cache_manager' import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' const Index = props => { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } /** diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js index 4ced9f6c499..1b92abb5557 100644 --- a/pages/search/[keyword]/page/[page].js +++ b/pages/search/[keyword]/page/[page].js @@ -3,15 +3,13 @@ import { getDataFromCache } from '@/lib/cache/cache_manager' import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' const Index = props => { const { keyword } = props props = { ...props, currentSearch: keyword } - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } /** diff --git a/pages/search/index.js b/pages/search/index.js index 2000d72eef8..3eb642b1bfa 100644 --- a/pages/search/index.js +++ b/pages/search/index.js @@ -32,7 +32,7 @@ const Search = props => { props = { ...props, posts: filteredPosts } const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } /** diff --git a/pages/sign-in/[[...index]].js b/pages/sign-in/[[...index]].js index 7ed893d5d68..135ae2924eb 100644 --- a/pages/sign-in/[[...index]].js +++ b/pages/sign-in/[[...index]].js @@ -3,7 +3,6 @@ import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' // import { getGlobalData } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' /** * 登录 @@ -11,9 +10,8 @@ import { useRouter } from 'next/router' * @returns */ const SignIn = props => { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps(req) { diff --git a/pages/sign-up/[[...index]].js b/pages/sign-up/[[...index]].js index 72ba97fc02e..f721ec6f155 100644 --- a/pages/sign-up/[[...index]].js +++ b/pages/sign-up/[[...index]].js @@ -2,7 +2,6 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' /** * 注册 @@ -10,9 +9,8 @@ import { useRouter } from 'next/router' * @returns */ const SignUp = props => { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps(req) { diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js index ff366c5f768..978e8545713 100644 --- a/pages/tag/[tag]/index.js +++ b/pages/tag/[tag]/index.js @@ -2,7 +2,6 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' /** * 标签下的文章列表 @@ -10,9 +9,8 @@ import { useRouter } from 'next/router' * @returns */ const Tag = props => { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps({ params: { tag }, locale }) { diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js index a13ebe04e33..414eaf446d8 100644 --- a/pages/tag/[tag]/page/[page].js +++ b/pages/tag/[tag]/page/[page].js @@ -2,12 +2,10 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' import { DynamicLayout } from '@/themes/theme' -import { useRouter } from 'next/router' const Tag = props => { - const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps({ params: { tag, page }, locale }) { diff --git a/pages/tag/index.js b/pages/tag/index.js index a04a5b881f4..5360fa9ca39 100644 --- a/pages/tag/index.js +++ b/pages/tag/index.js @@ -12,7 +12,7 @@ import { useRouter } from 'next/router' const TagIndex = props => { const router = useRouter() const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG) - return + return } export async function getStaticProps(req) { diff --git a/styles/globals.css b/styles/globals.css index 5c86cecf165..33d0b75033f 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -19,6 +19,7 @@ html { position: sticky; z-index: 10; top: -1px; + -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: all 0.5s cubic-bezier(0.4, 0, 0, 1); border-bottom-color: transparent; @@ -74,6 +75,7 @@ nav { @supports not (backdrop-filter: none) { .sticky-nav { + -webkit-backdrop-filter: none; backdrop-filter: none; @apply bg-day dark:bg-gray-800; } diff --git a/themes/theme.js b/themes/theme.js index c8760927231..3c20333170e 100644 --- a/themes/theme.js +++ b/themes/theme.js @@ -2,6 +2,7 @@ import BLOG, { LAYOUT_MAPPINGS } from '@/blog.config' import * as ThemeComponents from '@theme-components' import getConfig from 'next/config' import dynamic from 'next/dynamic' +import { useRouter } from 'next/router' import { getQueryParam, getQueryVariable, isBrowser } from '../lib/utils' // 在next.config.js中扫描所有主题 @@ -56,19 +57,20 @@ export const getThemeConfig = async themeQuery => { /** * 加载全局布局 - * @param {*} themeQuery + * @param {*} theme * @returns */ -export const getGlobalLayoutByTheme = themeQuery => { - if (themeQuery !== BLOG.THEME) { +export const getBaseLayoutByTheme = theme => { + const LayoutBase = ThemeComponents['LayoutBase'] + const isDefaultTheme = !theme || theme === BLOG.THEME + if (!isDefaultTheme) { return dynamic( - () => - import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]), + () => import(`@/themes/${theme}`).then(m => m['LayoutBase']), { ssr: true } ) - } else { - return ThemeComponents[getLayoutNameByPath('-1')] } + + return LayoutBase } /** @@ -76,8 +78,8 @@ export const getGlobalLayoutByTheme = themeQuery => { * @param {*} props */ export const DynamicLayout = props => { - const { router, theme } = props - const SelectedLayout = getLayoutByTheme({ router, theme }) + const { theme, layoutName } = props + const SelectedLayout = getLayoutByTheme({ layoutName, theme }) return } @@ -87,26 +89,30 @@ export const DynamicLayout = props => { * @param {*} theme * @returns */ -export const getLayoutByTheme = ({ router, theme }) => { - const themeQuery = getQueryParam(router.asPath, 'theme') || theme - const layoutName = getLayoutNameByPath(router.pathname, router.asPath) - const isDefaultTheme = !themeQuery || themeQuery === BLOG.THEME +export const getLayoutByTheme = ({ layoutName, theme }) => { + // const layoutName = getLayoutNameByPath(router.pathname, router.asPath) + const LayoutComponents = + ThemeComponents[layoutName] || ThemeComponents.LayoutSlug - const loadThemeComponents = componentsSource => { - const components = - componentsSource[layoutName] || componentsSource.LayoutSlug - setTimeout(fixThemeDOM, isDefaultTheme ? 100 : 500) // 根据主题选择延迟时间 - return components - } + const router = useRouter() + const themeQuery = getQueryParam(router?.asPath, 'theme') || theme + const isDefaultTheme = !themeQuery || themeQuery === BLOG.THEME - if (isDefaultTheme) { - return loadThemeComponents(ThemeComponents) - } else { + // 加载非当前默认主题 + if (!isDefaultTheme) { + const loadThemeComponents = componentsSource => { + const components = + componentsSource[layoutName] || componentsSource.LayoutSlug + setTimeout(fixThemeDOM, 500) + return components + } return dynamic( () => import(`@/themes/${themeQuery}`).then(m => loadThemeComponents(m)), { ssr: true } ) } + + return LayoutComponents } /** @@ -128,8 +134,6 @@ const fixThemeDOM = () => { if (isBrowser) { const elements = document.querySelectorAll('[id^="theme-"]') if (elements?.length > 1) { - elements[elements.length - 1].scrollIntoView() - // 删除前面的元素，只保留最后一个元素 for (let i = 0; i < elements.length - 1; i++) { if ( elements[i] && @@ -139,6 +143,7 @@ const fixThemeDOM = () => { elements[i].parentNode.removeChild(elements[i]) } } + elements[0]?.scrollIntoView() } } } From 668b3c7032b154b621f7df285e3804246e801854 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 23 Nov 2024 18:26:04 +0800 Subject: [PATCH 2/2] =?UTF-8?q?4.7.11=E7=89=88=E6=9C=AC=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c71a1fdf00c..4c579c78c3b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "notion-next", - "version": "4.7.10", + "version": "4.7.11", "homepage": "https://github.com/tangly1024/NotionNext.git", "license": "MIT", "repository": {