diff --git a/lib/utils/index.js b/lib/utils/index.js index 63cdac69..787dc90d 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/package.json b/package.json index c71a1fdf..4c579c78 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": { diff --git a/pages/404.js b/pages/404.js index 4c58031e..ca421b9f 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 a6d6e82f..e26a95a9 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 80333a64..26fac151 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 968803ee..e7aade1e 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 a3a531a1..f019dd32 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 9668cdeb..6863ee43 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 4b2f3942..d38535c5 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 0a865d92..790bd723 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 eaa21167..31e2610b 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 0166aba2..1ee22afb 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 179583d8..5985d7f8 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 4ced9f6c..1b92abb5 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 2000d72e..3eb642b1 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 7ed893d5..135ae292 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 72ba97fc..f721ec6f 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 ff366c5f..978e8545 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 a13ebe04..414eaf44 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 a04a5b88..5360fa9c 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 5c86cecf..33d0b750 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 c8760927..97fcd64a 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,31 @@ 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) +export const getLayoutByTheme = ({ layoutName, theme }) => { + // const layoutName = getLayoutNameByPath(router.pathname, router.asPath) + const LayoutComponents = + ThemeComponents[layoutName] || ThemeComponents.LayoutSlug + + const router = useRouter() + const themeQuery = getQueryParam(router?.asPath, 'theme') || theme const isDefaultTheme = !themeQuery || themeQuery === BLOG.THEME - const loadThemeComponents = componentsSource => { - const components = - componentsSource[layoutName] || componentsSource.LayoutSlug - setTimeout(fixThemeDOM, isDefaultTheme ? 100 : 500) // 根据主题选择延迟时间 - return components - } - - 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 } ) } + + setTimeout(fixThemeDOM, 100) + return LayoutComponents } /** @@ -128,8 +135,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 +144,7 @@ const fixThemeDOM = () => { elements[i].parentNode.removeChild(elements[i]) } } + elements[0]?.scrollIntoView() } } }