动态组件模式调整

lib/config.js

@@ -34,6 +34,7 @@ export const siteConfig = (key, defaultVal = null, extendConfig = {}) => {
     case 'POST_URL_PREFIX_MAPPING_CATEGORY':
     case 'IS_TAG_COLOR_DISTINGUISHED':
     case 'TAG_SORT_BY_COUNT':
+    case 'THEME':
     case 'LINK':
       return convertVal(extendConfig[key] || defaultVal || BLOG[key])
     default:

pages/404.js

@@ -1,6 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -9,12 +9,9 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const NoFound = props => {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-  return <Layout {...props} />
 }
 
 export async function getStaticProps(req) {

pages/[prefix]/index.js

@@ -8,7 +8,7 @@ import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
 import { getPasswordQuery } from '@/lib/password'
 import { uploadDataToAlgolia } from '@/lib/plugins/algolia'
 import { checkSlugHasNoSlash, getRecommendPost } from '@/lib/utils/post'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import md5 from 'js-md5'
 import { useRouter } from 'next/router'
 import { idToUuid } from 'notion-utils'
@@ -83,15 +83,11 @@ const Slug = props => {
   }, [router, lock])
 
   props = { ...props, lock, validPassword }
-  // 根据页面路径加载不同Layout文件
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  const Layout = getLayoutByTheme({
-    theme: siteConfig('THEME'),
-    router: useRouter()
-  })
   return (
     <>
       {/* 文章布局 */}
-      <Layout {...props} />
+      <DynamicLayout theme={theme} router={router} {...props} />
       {/* 解锁密码提示框 */}
       {post?.password && post?.password !== '' && !lock && <Notification />}
       {/* 导流工具 */}

pages/_app.js

@@ -45,7 +45,6 @@ const MyApp = ({ Component, pageProps }) => {
   // 整体布局
   const GLayout = useCallback(
     props => {
-      // 根据页面路径加载不同Layout文件
       const Layout = getGlobalLayoutByTheme(queryParam)
       return <Layout {...props} />
     },

pages/archive/index.js

@@ -3,17 +3,16 @@ import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { isBrowser } from '@/lib/utils'
 import { formatDateFmt } from '@/lib/utils/formatDate'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
+/**
+ * 归档首页
+ * @param {*} props
+ * @returns
+ */
 const ArchiveIndex = props => {
-  // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme({
-    theme: siteConfig('THEME'),
-    router: useRouter()
-  })
-
   useEffect(() => {
     if (isBrowser) {
       const anchor = window.location.hash
@@ -28,7 +27,9 @@ const ArchiveIndex = props => {
     }
   }, [])
 
-  return <Layout {...props} />
+  const router = useRouter()
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
+  return <DynamicLayout theme={theme} router={router} {...props} />
 }
 
 export async function getStaticProps({ locale }) {

pages/auth/index.js

@@ -0,0 +1,100 @@
+// pages/sitemap.xml.js
+import { getGlobalData } from '@/lib/db/getSiteData'
+import axios from 'axios'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import Slug from '../[prefix]'
+
+/**
+ * 根据notion的slug访问页面
+ * 解析二级目录 /article/about
+ * @param {*} props
+ * @returns
+ */
+const UI = props => {
+  const { redirect_pathname, redirect_query } = props
+  const router = useRouter()
+  useEffect(() => {
+    router?.push({ pathname: redirect_pathname, query: redirect_query })
+  }, [])
+  return <Slug {...props} />
+}
+
+/**
+ * 服务端接收参数处理
+ * @param {*} ctx
+ * @returns
+ */
+export const getServerSideProps = async ctx => {
+  const from = `auth`
+  const props = await getGlobalData({ from })
+  delete props.allPages
+  const code = ctx.query.code
+
+  let params = null
+  if (code) {
+    params = await fetchToken(code)
+  }
+
+  // 授权成功的划保存下用户的workspace信息
+  if (params?.status === 200) {
+    console.log('请求成功', params)
+    props.redirect_query = {
+      ...params.data,
+      msg: '成功了' + JSON.stringify(params.data)
+    }
+    console.log('用户信息', JSON.stringify(params.data))
+  } else if (!params) {
+    console.log('请求异常', params)
+    props.redirect_query = { msg: '无效请求' }
+  } else {
+    console.log('请求失败', params)
+    props.redirect_query = { msg: params.statusText }
+  }
+
+  props.redirect_pathname = '/auth/result'
+
+  return {
+    props
+  }
+}
+
+const fetchToken = async code => {
+  if (!code) {
+    return '无效请求'
+  }
+  console.log('Auth', code)
+  const clientId = process.env.OAUTH_CLIENT_ID
+  const clientSecret = process.env.OAUTH_CLIENT_SECRET
+  const redirectUri = process.env.OAUTH_REDIRECT_URI
+
+  // encode in base 64
+  const encoded = Buffer.from(`${clientId}:${clientSecret}`).toString('base64')
+
+  try {
+    console.log(
+      `请求Code换取Token ${clientId}:${clientSecret} -- ${redirectUri}`
+    )
+    const response = await axios.post(
+      'https://api.notion.com/v1/oauth/token',
+      {
+        grant_type: 'authorization_code',
+        code: code,
+        redirect_uri: redirectUri
+      },
+      {
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          Authorization: `Basic ${encoded}`
+        }
+      }
+    )
+
+    console.log('Token response', response.data)
+    return response
+  } catch (error) {
+    console.error('Error fetching token', error)
+  }
+}
+export default UI

pages/category/[category]/index.js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -10,13 +10,9 @@ import { useRouter } from 'next/router'
  * @returns
  */
 export default function Category(props) {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-
-  return <Layout {...props} />
 }
 
 export async function getStaticProps({ params: { category }, locale }) {

pages/category/[category]/page/[page].js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -11,13 +11,9 @@ import { useRouter } from 'next/router'
  */
 
 export default function Category(props) {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-
-  return <Layout {...props} />
 }
 
 export async function getStaticProps({ params: { category, page } }) {

pages/category/index.js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -10,13 +10,9 @@ import { useRouter } from 'next/router'
  * @returns
  */
 export default function Category(props) {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-
-  return <Layout {...props} />
 }
 
 export async function getStaticProps({ locale }) {

pages/dashboard/index.js

@@ -0,0 +1,111 @@
+import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
+import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData'
+import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
+import { uploadDataToAlgolia } from '@/lib/plugins/algolia'
+import { getRecommendPost } from '@/lib/utils/post'
+import { DynamicLayout } from '@/themes/theme'
+import { useRouter } from 'next/router'
+
+/**
+ * 根据notion的slug访问页面
+ * 只解析一级目录例如 /about
+ * @param {*} props
+ * @returns
+ */
+const Dashboard = props => {
+  const router = useRouter()
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
+  return <DynamicLayout theme={theme} router={router} {...props} />
+}
+
+export async function getStaticProps({ locale }) {
+  const prefix = 'dashboard'
+  let fullSlug = 'dashboard'
+  const from = `slug-props-${fullSlug}`
+  const props = await getGlobalData({ from, locale })
+  if (siteConfig('PSEUDO_STATIC', false, props.NOTION_CONFIG)) {
+    if (!fullSlug.endsWith('.html')) {
+      fullSlug += '.html'
+    }
+  }
+
+  // 在列表内查找文章
+  props.post = props?.allPages?.find(p => {
+    return p.type.indexOf('Menu') < 0 && p.slug === fullSlug
+  })
+
+  // 处理非列表内文章的内信息
+  if (!props?.post) {
+    const pageId = prefix
+    if (pageId.length >= 32) {
+      const post = await getPost(pageId)
+      props.post = post
+    }
+  }
+  // 无法获取文章
+  if (!props?.post) {
+    props.post = null
+    return {
+      props,
+      revalidate: process.env.EXPORT
+        ? undefined
+        : siteConfig(
+            'NEXT_REVALIDATE_SECOND',
+            BLOG.NEXT_REVALIDATE_SECOND,
+            props.NOTION_CONFIG
+          )
+    }
+  }
+
+  // 文章内容加载
+  if (!props?.post?.blockMap) {
+    props.post.blockMap = await getPostBlocks(props.post.id, from)
+  }
+
+  // 目录默认加载
+  if (props.post?.blockMap?.block) {
+    props.post.content = Object.keys(props.post.blockMap.block).filter(
+      key => props.post.blockMap.block[key]?.value?.parent_id === props.post.id
+    )
+    props.post.toc = getPageTableOfContents(props.post, props.post.blockMap)
+  }
+
+  // 生成全文索引 && process.env.npm_lifecycle_event === 'build' && JSON.parse(BLOG.ALGOLIA_RECREATE_DATA)
+  if (BLOG.ALGOLIA_APP_ID) {
+    uploadDataToAlgolia(props?.post)
+  }
+
+  // 推荐关联文章处理
+  const allPosts = props.allPages?.filter(
+    page => page.type === 'Post' && page.status === 'Published'
+  )
+  if (allPosts && allPosts.length > 0) {
+    const index = allPosts.indexOf(props.post)
+    props.prev = allPosts.slice(index - 1, index)[0] ?? allPosts.slice(-1)[0]
+    props.next = allPosts.slice(index + 1, index + 2)[0] ?? allPosts[0]
+    props.recommendPosts = getRecommendPost(
+      props.post,
+      allPosts,
+      siteConfig('POST_RECOMMEND_COUNT')
+    )
+  } else {
+    props.prev = null
+    props.next = null
+    props.recommendPosts = []
+  }
+
+  delete props.allPages
+  return {
+    props,
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
+  }
+}
+
+export default Dashboard

pages/index.js

@@ -4,7 +4,7 @@ import { getGlobalData, getPostBlocks } from '@/lib/db/getSiteData'
 import { generateRobotsTxt } from '@/lib/robots.txt'
 import { generateRss } from '@/lib/rss'
 import { generateSitemapXml } from '@/lib/sitemap.xml'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -13,12 +13,9 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const Index = props => {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-  return <Layout {...props} />
 }
 
 /**

pages/page/[page].js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData, getPostBlocks } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -10,13 +10,9 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const Page = props => {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-
-  return <Layout {...props} />
 }
 
 export async function getStaticPaths({ locale }) {

pages/search/[keyword]/index.js

@@ -2,17 +2,13 @@ import BLOG from '@/blog.config'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 const Index = props => {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-
-  return <Layout {...props} />
 }
 
 /**

pages/search/[keyword]/page/[page].js

@@ -2,19 +2,16 @@ import BLOG from '@/blog.config'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 const Index = props => {
   const { keyword } = props
-  // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme({
-    theme: siteConfig('THEME'),
-    router: useRouter()
-  })
   props = { ...props, currentSearch: keyword }
 
-  return <Layout {...props} />
+  const router = useRouter()
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
+  return <DynamicLayout theme={theme} router={router} {...props} />
 }
 
 /**

pages/search/index.js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -12,12 +12,6 @@ import { useRouter } from 'next/router'
 const Search = props => {
   const { posts } = props
 
-  // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme({
-    theme: siteConfig('THEME'),
-    router: useRouter()
-  })
-
   const router = useRouter()
   const keyword = router?.query?.s
 
@@ -37,7 +31,8 @@ const Search = props => {
 
   props = { ...props, posts: filteredPosts }
 
-  return <Layout {...props} />
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
+  return <DynamicLayout theme={theme} router={router} {...props} />
 }
 
 /**

pages/sign-in/[[...index]].js

@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 // import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -11,12 +11,9 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const SignIn = props => {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-  return <Layout {...props} />
 }
 
 export async function getStaticProps(req) {

pages/sign-up/[[...index]].js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -10,12 +10,9 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const SignUp = props => {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-  return <Layout {...props} />
 }
 
 export async function getStaticProps(req) {

pages/tag/[tag]/index.js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -10,13 +10,9 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const Tag = props => {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-
-  return <Layout {...props} />
 }
 
 export async function getStaticProps({ params: { tag }, locale }) {

pages/tag/[tag]/page/[page].js

@@ -1,16 +1,13 @@
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 const Tag = props => {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-  return <Layout {...props} />
 }
 
 export async function getStaticProps({ params: { tag, page }, locale }) {

pages/tag/index.js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
-import { getLayoutByTheme } from '@/themes/theme'
+import { DynamicLayout } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
 /**
@@ -10,12 +10,9 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const TagIndex = props => {
-  // 根据页面路径加载不同Layout文件
+  const router = useRouter()
-  const Layout = getLayoutByTheme({
+  const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-    theme: siteConfig('THEME'),
+  return <DynamicLayout theme={theme} router={router} {...props} />
-    router: useRouter()
-  })
-  return <Layout {...props} />
 }
 
 export async function getStaticProps(req) {

themes/starter/components/Header.js

@@ -86,6 +86,11 @@ export const Header = props => {
                       </div>
                     </SignedOut>
                     <SignedIn>
+                      <Link
+                        href='/dashboard'
+                        className='bg-black hover:bg-gray-900 text-white py-2 px-4 rounded-lg '>
+                        Dashboard
+                      </Link>
                       <UserButton />
                     </SignedIn>
                   </>

themes/theme.js

@@ -38,6 +38,16 @@ export const getGlobalLayoutByTheme = themeQuery => {
   }
 }
 
+/**
+ * 动态获取布局
+ * @param {*} props
+ */
+export const DynamicLayout = props => {
+  const { router, theme } = props
+  const SelectedLayout = getLayoutByTheme({ router, theme })
+  return <SelectedLayout {...props} />
+}
+
 /**
  * 加载主题文件
  * 如果是