feature： 切换主题

pages/404.js

@@ -1,4 +1,4 @@
-import { Custom404Layout } from '@/themes'
+import { Layout404 } from '@/themes'
 
 /**
  * 自定义404界面
@@ -7,5 +7,5 @@ import { Custom404Layout } from '@/themes'
  */
 
 export default function Custom404 () {
-  return <Custom404Layout />
+  return <Layout404 />
 }

pages/about.js

@@ -2,18 +2,18 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import Custom404 from '@/pages/404'
 import React from 'react'
-import { ArticleLayout } from '@/themes'
+import { LayoutSlug } from '@/themes'
 
 /**
  * 关于页面，默认取notion中slug为about的文章
- * @param {*} param0
+ * @param {*} props
  * @returns
  */
 const About = (props) => {
   if (!props.post) {
     return <Custom404 />
   }
-  return <ArticleLayout {...props} />
+  return <LayoutSlug {...props} />
 }
 
 export async function getStaticProps () {

pages/archive/index.js

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

pages/article/[slug].js

@@ -1,19 +1,19 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { ArticleLayout } from '@/themes'
+import { LayoutSlug } from '@/themes'
 import Custom404 from '@/pages/404'
 
 /**
  * 根据notion的slug访问页面
- * @param {*} param0
+ * @param {*} props
  * @returns
  */
 const Slug = (props) => {
   if (!props.post) {
     return <Custom404 />
   }
-  return <ArticleLayout {...props}/>
+  return <LayoutSlug {...props}/>
 }
 
 export async function getStaticPaths () {
@@ -69,7 +69,7 @@ export async function getStaticProps ({ params: { slug } }) {
 
 /**
  *
- * @param {获取文章推荐文章} post
+ * @param post
  * @param {*} allPosts
  * @param {*} count
  * @returns

pages/category/[category].js

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

pages/category/index.js

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

pages/index.js

@@ -1,10 +1,10 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { IndexLayout } from '@/themes'
+import { LayoutIndex } from '@/themes'
 
 const Index = (props) => {
-  return <IndexLayout {...props}/>
+  return <LayoutIndex {...props}/>
 }
 
 export async function getStaticProps () {
@@ -18,7 +18,7 @@ export async function getStaticProps () {
 
   // 处理分页
   const page = 1
-  let postsToShow = []
+  let postsToShow
   if (BLOG.postListStyle !== 'page') {
     postsToShow = Array.from(allPosts)
   } else {

pages/page/[page].js

@@ -1,10 +1,10 @@
 import BLOG from '@/blog.config'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { PageLayout } from '@/themes'
+import { LayoutPage } from '@/themes'
 
 const Page = (props) => {
-  return <PageLayout {...props} />
+  return <LayoutPage {...props} />
 }
 
 export async function getStaticPaths () {

pages/search.js

@@ -1,5 +1,5 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { SearchLayout } from '@/themes'
+import { LayoutSearch } from '@/themes'
 
 export async function getStaticProps () {
   const {
@@ -22,7 +22,7 @@ export async function getStaticProps () {
 }
 
 const Search = (props) => {
-  return <SearchLayout {...props} />
+  return <LayoutSearch {...props} />
 }
 
 export default Search

pages/tag/[tag].js

@@ -1,8 +1,8 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { TagLayout } from '@/themes'
+import { LayoutTag } from '@/themes'
 
 const Tag = (props) => {
-  return <TagLayout {...props} />
+  return <LayoutTag {...props} />
 }
 
 export async function getStaticProps ({ params }) {
@@ -37,8 +37,8 @@ export async function getStaticProps ({ params }) {
 
 /**
  * 获取所有的标签
- * @param {*}} allPosts
  * @returns
+ * @param tags
  */
 function getTagNames (tags) {
   const tagNames = []

pages/tag/index.js

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

themes/NEXT/Layout404.js

@@ -1,11 +1,11 @@
 import { useRouter } from 'next/router'
-import BaseLayout from './BaseLayout'
+import LayoutBase from './LayoutBase'
 import BLOG from '@/blog.config'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 import { useEffect } from 'react'
 
-const Custom404Layout = () => {
+const Layout404 = () => {
   const router = useRouter()
   useEffect(() => {
     // 延时3秒如果加载失败就返回首页
@@ -21,7 +21,7 @@ const Custom404Layout = () => {
     }, 30000000)
   })
 
-  return <BaseLayout meta={{ title: `${BLOG.title} | 页面找不到啦` }}>
+  return <LayoutBase meta={{ title: `${BLOG.title} | 页面找不到啦` }}>
     <div
       className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
       <div className='dark:text-gray-200'>
@@ -31,7 +31,7 @@ const Custom404Layout = () => {
         </div>
       </div>
     </div>
-  </BaseLayout>
+  </LayoutBase>
 }
 
-export default Custom404Layout
+export default Layout404

themes/NEXT/LayoutArchive.js

@@ -1,11 +1,11 @@
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import React, { useEffect } from 'react'
-import BaseLayout from './BaseLayout'
+import LayoutBase from './LayoutBase'
 import BlogPostArchive from './components/BlogPostArchive'
 import Live2D from './components/Live2D'
 
-const ArchiveLayout = ({ posts, tags, categories, postCount }) => {
+const LayoutArchive = ({ posts, tags, categories, postCount }) => {
   const { locale } = useGlobal()
   // 深拷贝
   const postsSortByDate = Object.create(posts)
@@ -49,7 +49,7 @@ const ArchiveLayout = ({ posts, tags, categories, postCount }) => {
   }, [])
 
   return (
-    <BaseLayout meta={meta} tags={tags} categories={categories} postCount={postCount}>
+    <LayoutBase meta={meta} tags={tags} categories={categories} postCount={postCount}>
       <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full">
         {Object.keys(archivePosts).map(archiveTitle => (
           <BlogPostArchive
@@ -60,8 +60,8 @@ const ArchiveLayout = ({ posts, tags, categories, postCount }) => {
         ))}
       </div>
       <Live2D />
-    </BaseLayout>
+    </LayoutBase>
   )
 }
 
-export default ArchiveLayout
+export default LayoutArchive

themes/NEXT/LayoutBase.js

@@ -17,23 +17,18 @@ import smoothscroll from 'smoothscroll-polyfill'
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
  * @param children
  * @param layout
- * @param fullWidth
  * @param tags
  * @param meta
  * @param post
- * @param totalPosts
  * @param currentSearch
  * @param currentCategory
  * @param currentTag
  * @param categories
- * @param customMeta
  * @returns {JSX.Element}
  * @constructor
  */
-const BaseLayout = ({
+const LayoutBase = ({
   children,
-  layout,
-  fullWidth,
   headerSlot,
   tags,
   meta,
@@ -45,8 +40,7 @@ const BaseLayout = ({
   currentSearch,
   currentCategory,
   currentTag,
-  categories,
-  ...customMeta
+  categories
 }) => {
   const { onLoading } = useGlobal()
   const targetRef = useRef(null)
@@ -111,8 +105,8 @@ const BaseLayout = ({
   )
 }
 
-BaseLayout.propTypes = {
+LayoutBase.propTypes = {
   children: PropTypes.node
 }
 
-export default BaseLayout
+export default LayoutBase

themes/NEXT/LayoutCategory.js

@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
-import BaseLayout from '@/themes/NEXT/BaseLayout'
+import LayoutBase from '@/themes/NEXT/LayoutBase'
 import StickyBar from './components/StickyBar'
 import CategoryList from './components/CategoryList'
 import BlogPostListScroll from './components/BlogPostListScroll'
@@ -12,14 +12,14 @@ const Category = ({ tags, posts, category, categories, latestPosts, postCount })
     description: BLOG.description,
     type: 'website'
   }
-  return <BaseLayout meta={meta} tags={tags} currentCategory={category} postCount={postCount} latestPosts={latestPosts} categories={categories}>
+  return <LayoutBase meta={meta} tags={tags} currentCategory={category} postCount={postCount} latestPosts={latestPosts} categories={categories}>
     <StickyBar>
       <CategoryList currentCategory={category} categories={categories} />
     </StickyBar>
     <div className='md:mt-8'>
       <BlogPostListScroll posts={posts} tags={tags} currentCategory={category}/>
     </div>
-  </BaseLayout>
+  </LayoutBase>
 }
 
 export default Category

themes/NEXT/LayoutCategoryIndex.js

@@ -1,11 +1,11 @@
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
-import BaseLayout from './BaseLayout'
+import LayoutBase from './LayoutBase'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faFolder, faThList } from '@fortawesome/free-solid-svg-icons'
 import Link from 'next/link'
 
-const CategoryIndexLayout = ({
+const LayoutCategoryIndex = ({
   tags,
   allPosts,
   categories,
@@ -18,7 +18,7 @@ const CategoryIndexLayout = ({
     description: BLOG.description,
     type: 'website'
   }
-  return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags} postCount={postCount} latestPosts={latestPosts}>
+  return <LayoutBase meta={meta} totalPosts={allPosts} tags={tags} postCount={postCount} latestPosts={latestPosts}>
     <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
       <div className='dark:text-gray-200 mb-5'>
         <FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}:
@@ -34,7 +34,7 @@ const CategoryIndexLayout = ({
         })}
       </div>
     </div>
-  </BaseLayout>
+  </LayoutBase>
 }
 
-export default CategoryIndexLayout
+export default LayoutCategoryIndex

themes/NEXT/LayoutIndex.js

@@ -1,31 +1,31 @@
-import BaseLayout from './BaseLayout'
+import LayoutBase from './LayoutBase'
 import Header from './components/Header'
 import LatestPostsGroup from './components/LatestPostsGroup'
 import Card from './components/Card'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
-import _NEXT from './_NEXT'
+import { CONFIG_NEXT } from './index'
 
-const IndexLayout = ({ posts, tags, meta, categories, postCount, latestPosts }) => {
-  return <BaseLayout
-    headerSlot={_NEXT.HOME_BANNER && <Header />}
+const LayoutIndex = ({ posts, tags, meta, categories, postCount, latestPosts }) => {
+  return <LayoutBase
+    headerSlot={CONFIG_NEXT.HOME_BANNER && <Header />}
     meta={meta}
     tags={tags}
     sideBarSlot={<LatestPostsGroup posts={latestPosts} />}
     rightAreaSlot={
-      _NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup posts={latestPosts} /></Card>
+      CONFIG_NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup posts={latestPosts} /></Card>
     }
     postCount={postCount}
     categories={categories}
   >
-    {_NEXT.POSTS_LIST_TYPE !== 'page'
+    {CONFIG_NEXT.POSTS_LIST_TYPE !== 'page'
       ? (
         <BlogPostListScroll posts={posts} tags={tags} showSummary={true} />
         )
       : (
         <BlogPostListPage posts={posts} tags={tags} postCount={postCount} />
         )}
-  </BaseLayout>
+  </LayoutBase>
 }
 
-export default IndexLayout
+export default LayoutIndex

themes/NEXT/LayoutPage.js

@@ -1,21 +1,21 @@
-import BaseLayout from './BaseLayout'
+import LayoutBase from './LayoutBase'
 import LatestPostsGroup from './components/LatestPostsGroup'
 import BlogPostListPage from './components/BlogPostListPage'
-import _NEXT from './_NEXT'
+import { CONFIG_NEXT } from './index'
 
-const PageLayout = ({ page, posts, tags, meta, categories, postCount, latestPosts }) => {
+const LayoutPage = ({ page, posts, tags, meta, categories, postCount, latestPosts }) => {
   return (
-    <BaseLayout
+    <LayoutBase
       meta={meta}
       tags={tags}
       sideBarSlot={<LatestPostsGroup posts={latestPosts} />}
-      rightAreaSlot={_NEXT.RIGHT_LATEST_POSTS && <LatestPostsGroup posts={latestPosts} />}
+      rightAreaSlot={CONFIG_NEXT.RIGHT_LATEST_POSTS && <LatestPostsGroup posts={latestPosts} />}
       postCount={postCount}
       categories={categories}
     >
       <BlogPostListPage page={page} posts={posts} postCount={postCount} />
-    </BaseLayout>
+    </LayoutBase>
   )
 }
 
-export default PageLayout
+export default LayoutPage

themes/NEXT/LayoutSearch.js

@@ -1,4 +1,4 @@
-import BaseLayout from './BaseLayout'
+import LayoutBase from './LayoutBase'
 import StickyBar from './components/StickyBar'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSearch } from '@fortawesome/free-solid-svg-icons'
@@ -7,8 +7,8 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 
-const SearchLayout = ({ posts, tags, categories, postCount }) => {
-  let filteredPosts = []
+const LayoutSearch = ({ posts, tags, categories, postCount }) => {
+  let filteredPosts
   const searchKey = getSearchKey()
   if (searchKey) {
     filteredPosts = posts.filter(post => {
@@ -27,7 +27,7 @@ const SearchLayout = ({ posts, tags, categories, postCount }) => {
     type: 'website'
   }
   return (
-    <BaseLayout
+    <LayoutBase
       meta={meta}
       tags={tags}
       postCount={postCount}
@@ -43,11 +43,11 @@ const SearchLayout = ({ posts, tags, categories, postCount }) => {
       <div className="md:mt-5">
         <BlogPostListScroll posts={filteredPosts} tags={tags} showSummary={true}/>
       </div>
-    </BaseLayout>
+    </LayoutBase>
   )
 }
 
-export default SearchLayout
+export default LayoutSearch
 
 function getSearchKey () {
   const router = useRouter()

themes/NEXT/LayoutSlug.js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { getPageTableOfContents } from 'notion-utils'
 import TocDrawerButton from './components/TocDrawerButton'
-import BaseLayout from './BaseLayout'
+import LayoutBase from './LayoutBase'
 import Card from './components/Card'
 import LatestPostsGroup from './components/LatestPostsGroup'
 import ArticleDetail from './components/ArticleDetail'
@@ -14,9 +14,9 @@ import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-markup'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-typescript'
-import _NEXT from './_NEXT'
+import { CONFIG_NEXT } from './index'
 
-const ArticleLayout = ({
+const LayoutSlug = ({
   post,
   tags,
   prev,
@@ -44,7 +44,7 @@ const ArticleLayout = ({
     : null
 
   return (
-    <BaseLayout
+    <LayoutBase
       meta={meta}
       tags={tags}
       post={post}
@@ -53,7 +53,7 @@ const ArticleLayout = ({
       categories={categories}
       floatSlot={floatSlot}
       rightAreaSlot={
-        _NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup posts={latestPosts} /></Card>
+        CONFIG_NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup posts={latestPosts} /></Card>
       }
     >
       <ArticleDetail
@@ -71,8 +71,8 @@ const ArticleLayout = ({
       {/* 宠物 */}
       <Live2D />
 
-    </BaseLayout>
+    </LayoutBase>
   )
 }
 
-export default ArticleLayout
+export default LayoutSlug

themes/NEXT/LayoutTag.js

@@ -1,11 +1,11 @@
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
-import BaseLayout from './BaseLayout'
+import LayoutBase from './LayoutBase'
 import StickyBar from './components/StickyBar'
 import TagList from './components/TagList'
 import BlogPostListScroll from './components/BlogPostListScroll'
 
-const TagLayout = ({ tags, posts, tag, categories, postCount, latestPosts }) => {
+const LayoutTag = ({ tags, posts, tag, categories, postCount, latestPosts }) => {
   const { locale } = useGlobal()
 
   const meta = {
@@ -19,14 +19,14 @@ const TagLayout = ({ tags, posts, tag, categories, postCount, latestPosts }) =>
   const currentTag = tags?.find(r => r?.name === tag)
   const newTags = currentTag ? [currentTag].concat(tags.filter(r => r?.name !== tag)) : tags.filter(r => r?.name !== tag)
 
-  return <BaseLayout meta={meta} tags={tags} currentTag={tag} categories={categories} postCount={postCount} latestPosts={latestPosts}>
+  return <LayoutBase meta={meta} tags={tags} currentTag={tag} categories={categories} postCount={postCount} latestPosts={latestPosts}>
     <StickyBar>
       <TagList tags={newTags} currentTag={tag}/>
     </StickyBar>
     <div className='md:mt-8'>
       <BlogPostListScroll posts={posts} tags={tags} currentTag={tag}/>
     </div>
-  </BaseLayout>
+  </LayoutBase>
 }
 
-export default TagLayout
+export default LayoutTag

themes/NEXT/LayoutTagIndex.js

@@ -1,18 +1,18 @@
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
-import BaseLayout from './BaseLayout'
+import LayoutBase from './LayoutBase'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTags } from '@fortawesome/free-solid-svg-icons'
 import TagItem from './components/TagItem'
 
-const TagIndexLayout = ({ tags, categories, postCount, latestPosts }) => {
+const LayoutTagIndex = ({ tags, categories, postCount, latestPosts }) => {
   const { locale } = useGlobal()
   const meta = {
     title: `${locale.COMMON.TAGS} | ${BLOG.title}`,
     description: BLOG.description,
     type: 'website'
   }
-  return <BaseLayout meta={meta} categories={categories} postCount={postCount} latestPosts={latestPosts}>
+  return <LayoutBase meta={meta} categories={categories} postCount={postCount} latestPosts={latestPosts}>
     <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
       <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faTags} className='mr-4'/>{locale.COMMON.TAGS}:</div>
       <div id='tags-list' className='duration-200 flex flex-wrap'>
@@ -21,6 +21,6 @@ const TagIndexLayout = ({ tags, categories, postCount, latestPosts }) => {
         }) }
       </div>
     </div>
-  </BaseLayout>
+  </LayoutBase>
 }
-export default TagIndexLayout
+export default LayoutTagIndex

themes/NEXT/index.js

@@ -1,4 +1,15 @@
-const _NEXT = {
+export const LayoutIndex = import('./LayoutIndex')
+export const LayoutSearch = import('./LayoutSearch')
+export const LayoutArchive = import('./LayoutArchive')
+export const LayoutSlug = import('./LayoutSlug')
+export const Layout404 = import('./Layout404')
+export const LayoutCategory = import('./LayoutCategory')
+export const LayoutCategoryIndex = import('./LayoutCategoryIndex')
+export const LayoutPage = import('./LayoutPage')
+export const LayoutTag = import('./LayoutTag')
+export const LayoutTagIndex = import('./LayoutTagIndex')
+
+export const CONFIG_NEXT = {
   // 首页相关配置
   HOME_BANNER: false, // 首页是否显示大图及标语 [true,false]
   POSTS_LIST_TYPE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
@@ -74,5 +85,3 @@ const _NEXT = {
     TidioId: '' // https://www.tidio.com/
   }
 }
-// export default BLOG
-module.exports = _NEXT

themes/index.js

@@ -1,12 +1 @@
-import dynamic from 'next/dynamic'
-
-export const IndexLayout = dynamic(() => import('./NEXT/IndexLayout'), { ssr: false })
-export const SearchLayout = dynamic(() => import('./NEXT/SearchLayout'), { ssr: false })
-export const ArchiveLayout = dynamic(() => import('./NEXT/ArchiveLayout'), { ssr: false })
-export const ArticleLayout = dynamic(() => import('./NEXT/ArticleLayout'), { ssr: false })
-export const Custom404Layout = dynamic(() => import('./NEXT/Custom404Layout'), { ssr: false })
-export const CategoryLayout = dynamic(() => import('./NEXT/CategoryLayout'), { ssr: false })
-export const CategoryIndexLayout = dynamic(() => import('./NEXT/CategoryIndexLayout'), { ssr: false })
-export const PageLayout = dynamic(() => import('./NEXT/PageLayout'), { ssr: false })
-export const TagLayout = dynamic(() => import('./NEXT/TagLayout'), { ssr: false })
-export const TagIndexLayout = dynamic(() => import('./NEXT/TagIndexLayout'), { ssr: false })
+export * from './NEXT' // 切换主题