动态页面展示；

blog.config.js

@@ -8,12 +8,13 @@ const BLOG = {
   KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
   NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
   NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
+  DEBUG_BUTTON: true, // 是否显示调试按钮，可以用来调试不同的主题和样式配置
 
   THEME: process.env.NEXT_PUBLIC_THEME || 'Next', // 主题， 支持 ['Next','Hexo',"Fukasawa','Medium']
   LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
   SINCE: 2021, // e.g if leave this empty, current year will be used.
   BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
-  APPEARANCE: 'auto', // ['light', 'dark', 'auto'],
+  APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
   FONT: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
   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
   BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
@@ -21,7 +22,7 @@ const BLOG = {
   PATH: '', // leave this empty unless you want to deploy in a folder
 
   POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
-  POST_LIST_PREVIEW: false, //  是否在列表加载文章预览, 会被各主题中的同名配置覆盖，例：/themes/NEXT/config_next.js
+  POST_LIST_PREVIEW: false, //  是否在列表加载文章预览
   POST_PREVIEW_LINES: 12, // 预览博客行数
   POSTS_PER_PAGE: 6, // post counts per page
   POSTS_SORT_BY: 'notion', // 排序方式 'date'按时间,'notion'由notion控制

lib/global.js

@@ -3,6 +3,7 @@ import { useContext, createContext, useState } from 'react'
 import Router from 'next/router'
 import { initDarkMode } from './theme'
 import BLOG from '@/blog.config'
+import { ThemeMap } from '@/themes'
 const GlobalContext = createContext()
 let hasInit = false
 
@@ -17,6 +18,8 @@ export function GlobalContextProvider ({ children }) {
   const [isDarkMode, updateDarkMode] = useState(false)
   const [onLoading, changeLoadingState] = useState(false)
   const [theme, setTheme] = useState(BLOG.THEME)
+  const ThemeComponents = ThemeMap[theme]
+
   Router.events.on('routeChangeStart', (...args) => {
     changeLoadingState(true)
   })
@@ -35,7 +38,7 @@ export function GlobalContextProvider ({ children }) {
   }, 100)
 
   return (
-    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode, theme, setTheme }}>
+    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode, theme, setTheme, ThemeComponents }}>
       {children}
     </GlobalContext.Provider>
   )

pages/404.js

@@ -1,4 +1,4 @@
-import { Layout404 } from '@/themes'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 自定义404界面
@@ -7,5 +7,7 @@ import { Layout404 } from '@/themes'
  */
 
 export default function Custom404 (props) {
-  return <Layout404 {...props}/>
+  const { ThemeComponents } = useGlobal()
+
+  return <ThemeComponents.Layout404 {...props}/>
 }

pages/[slug].js

@@ -1,8 +1,8 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutSlug } from '@/themes'
-import Custom404 from '@/pages/404'
+import { useGlobal } from '@/lib/global'
+import Custom404 from './404'
 
 /**
  * 根据notion的slug访问页面，针对类型为Page的页面
@@ -10,10 +10,11 @@ import Custom404 from '@/pages/404'
  * @returns
  */
 const Slug = (props) => {
+  const { ThemeComponents } = useGlobal()
   if (!props.post) {
     return <Custom404 {...props} />
   }
-  return <LayoutSlug {...props} showArticleInfo={false}/>
+  return <ThemeComponents.LayoutSlug {...props} showArticleInfo={false}/>
 }
 
 export async function getStaticPaths () {

pages/archive/index.js

@@ -1,6 +1,11 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
-import { LayoutArchive } from '@/themes'
+import { useGlobal } from '@/lib/global'
+
+const ArchiveIndex = (props) => {
+  const { ThemeComponents } = useGlobal()
+  return <ThemeComponents.LayoutArchive {...props}/>
+}
 
 export async function getStaticProps () {
   const { allPosts, categories, tags, postCount, customNav } =
@@ -18,8 +23,4 @@ export async function getStaticProps () {
   }
 }
 
-const ArchiveIndex = (props) => {
-  return <LayoutArchive {...props}/>
-}
-
 export default ArchiveIndex

pages/article/[slug].js

@@ -1,8 +1,8 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutSlug } from '@/themes'
-import Custom404 from '@/pages/404'
+import { useGlobal } from '@/lib/global'
+import Custom404 from '../404'
 
 /**
  * 根据notion的slug访问页面
@@ -10,10 +10,11 @@ import Custom404 from '@/pages/404'
  * @returns
  */
 const Slug = (props) => {
+  const { ThemeComponents } = useGlobal()
   if (!props.post) {
     return <Custom404 {...props} />
   }
-  return <LayoutSlug {...props} showArticleInfo={true}/>
+  return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true}/>
 }
 
 export async function getStaticPaths () {

pages/category/[category].js

@@ -1,9 +1,10 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
-import { LayoutCategory } from '@/themes'
+import { useGlobal } from '@/lib/global'
 
 export default function Category (props) {
-  return <LayoutCategory {...props} />
+  const { ThemeComponents } = useGlobal()
+  return <ThemeComponents.LayoutCategory {...props} />
 }
 
 export async function getStaticProps ({ params }) {

pages/category/index.js

@@ -1,9 +1,10 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
-import { LayoutCategoryIndex } from '@/themes'
+import { useGlobal } from '@/lib/global'
 
 export default function Category (props) {
-  return <LayoutCategoryIndex {...props}/>
+  const { ThemeComponents } = useGlobal()
+  return <ThemeComponents.LayoutCategoryIndex {...props}/>
 }
 
 export async function getStaticProps () {

pages/index.js

@@ -1,13 +1,11 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutIndex, THEME_CONFIG, ThemeMap } from '@/themes'
 import { useGlobal } from '@/lib/global'
 
 const Index = (props) => {
-  const { theme } = useGlobal()
-  console.log('模板', ThemeMap[theme].LayoutIndex)
-  return <LayoutIndex {...props}/>
+  const { ThemeComponents } = useGlobal()
+  return <ThemeComponents.LayoutIndex {...props}/>
 }
 
 export async function getStaticProps () {
@@ -29,7 +27,7 @@ export async function getStaticProps () {
       BLOG.POSTS_PER_PAGE * (page - 1),
       BLOG.POSTS_PER_PAGE * page
     )
-    if (THEME_CONFIG.POST_LIST_PREVIEW || BLOG.POST_LIST_PREVIEW) {
+    if (BLOG.POST_LIST_PREVIEW) {
       for (const i in postsToShow) {
         const post = postsToShow[i]
         const blockMap = await getPostBlocks(post.id, 'slug', BLOG.POST_PREVIEW_LINES)

pages/page/[page].js

@@ -1,14 +1,14 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutPage, THEME_CONFIG } from '@/themes'
-import Custom404 from '@/pages/404'
+import { useGlobal } from '@/lib/global'
 
 const Page = (props) => {
+  const { ThemeComponents } = useGlobal()
   if (!props?.meta) {
-    return <Custom404 {...props} />
+    return <ThemeComponents.Custom404 {...props} />
   }
-  return <LayoutPage {...props} />
+  return <ThemeComponents.LayoutPage {...props} />
 }
 
 export async function getStaticPaths () {
@@ -43,8 +43,7 @@ export async function getStaticProps ({ params: { page } }) {
     BLOG.POSTS_PER_PAGE * (page - 1),
     BLOG.POSTS_PER_PAGE * page
   )
-  // 加载预览
-  if (THEME_CONFIG.POST_LIST_PREVIEW || BLOG.POST_LIST_PREVIEW) {
+  if (BLOG.POST_LIST_PREVIEW) {
     for (const i in postsToShow) {
       const post = postsToShow[i]
       const blockMap = await getPostBlocks(post.id, 'slug', BLOG.POST_PREVIEW_LINES)

pages/search/[keyword].js

@@ -1,9 +1,21 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutSearch } from '@/themes'
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { getDataFromCache } from '@/lib/cache/cache_manager'
 
+const Index = (props) => {
+  const { keyword } = props
+  const { locale } = useGlobal()
+  const meta = {
+    title: `${keyword || ''} | ${locale.NAV.SEARCH} | ${BLOG.TITLE}  `,
+    description: BLOG.DESCRIPTION,
+    type: 'website'
+  }
+
+  const { ThemeComponents } = useGlobal()
+  return <ThemeComponents.LayoutSearch {...props} meta={meta} currentSearch={keyword} />
+}
+
 /**
  * 服务端搜索
  * @param {*} param0
@@ -33,17 +45,6 @@ export async function getServerSideProps ({ params: { keyword } }) {
   }
 }
 
-const Index = (props) => {
-  const { keyword } = props
-  const { locale } = useGlobal()
-  const meta = {
-    title: `${keyword || ''} | ${locale.NAV.SEARCH} | ${BLOG.TITLE}  `,
-    description: BLOG.DESCRIPTION,
-    type: 'website'
-  }
-  return <LayoutSearch {...props} meta={meta} currentSearch={keyword} />
-}
-
 /**
  * 将对象的指定字段拼接到字符串
  * @param sourceTextArray

pages/search/index.js

@@ -1,5 +1,4 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutSearch } from '@/themes'
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
@@ -51,7 +50,10 @@ const Search = (props) => {
     description: BLOG.DESCRIPTION,
     type: 'website'
   }
-  return <LayoutSearch {...props} posts={filteredPosts} meta={meta} currentSearch={searchKey} />
+
+  const { ThemeComponents } = useGlobal()
+
+  return <ThemeComponents.LayoutSearch {...props} posts={filteredPosts} meta={meta} currentSearch={searchKey} />
 }
 
 function getSearchKey () {

pages/tag/[tag].js

@@ -1,8 +1,9 @@
+import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { LayoutTag } from '@/themes'
 
 const Tag = (props) => {
-  return <LayoutTag {...props} />
+  const { ThemeComponents } = useGlobal()
+  return <ThemeComponents.LayoutTag {...props} />
 }
 
 export async function getStaticProps ({ params }) {

pages/tag/index.js

@@ -1,9 +1,10 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
-import { LayoutTagIndex } from '@/themes'
+import { useGlobal } from '@/lib/global'
 
 const TagIndex = (props) => {
-  return <LayoutTagIndex {...props} />
+  const { ThemeComponents } = useGlobal()
+  return <ThemeComponents.LayoutTagIndex {...props} />
 }
 
 export async function getStaticProps () {

themes/index.js

@@ -3,15 +3,15 @@
  */
 
 import * as Next from './Next'
-import * as Empty from './Empty'
 import * as Fukasawa from './Fukasawa'
 import * as Hexo from './Hexo'
 import * as Medium from './Medium'
+import * as Empty from './Empty'
 export * from './Medium'
 export const ThemeMap = {
   Next,
-  Empty,
   Fukasawa,
   Hexo,
-  Medium
+  Medium,
+  Empty
 }