feature: 完善空主题

themes/Empty/LayoutArchive.js

@@ -1,5 +1,6 @@
-export const LayoutArchive = ({ posts, tags, categories, postCount }) => {
-  return <div>
+export const LayoutArchive = (props) => {
+  // const { posts, tags, categories, postCount } = props
+  return <div {...props}>
     Archive Page
   </div>
 }

themes/Empty/LayoutBase.js

@@ -2,39 +2,18 @@ import CommonHead from '@/components/CommonHead'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
- * @param children
- * @param layout
- * @param tags
- * @param meta
- * @param post
- * @param currentSearch
- * @param currentCategory
- * @param currentTag
- * @param categories
+
  * @returns {JSX.Element}
  * @constructor
  */
-const LayoutBase = ({
-  children,
-  headerSlot,
-  tags,
-  meta,
-  post,
-  postCount,
-  sideBarSlot,
-  floatSlot,
-  rightAreaSlot,
-  currentSearch,
-  currentCategory,
-  currentTag,
-  categories
-}) => {
-  return (<>
+const LayoutBase = (props) => {
+  const { children, meta } = props
+  return <div>
     <CommonHead meta={meta} />
     <main id='wrapper' className='flex justify-center flex-1 pb-12'>
       {children}
     </main>
-  </>)
+  </div>
 }
 
 export default LayoutBase

themes/Empty/LayoutCategory.js

@@ -1,5 +1,8 @@
-export const LayoutCategory = ({ tags, posts, category, categories, latestPosts, postCount }) => {
-  return <div>
+import LayoutBase from './LayoutBase'
+
+export const LayoutCategory = (props) => {
+  const { category } = props
+  return <LayoutBase {...props}>
     Category -  {category}
-  </div>
+  </LayoutBase>
 }

themes/Empty/LayoutCategoryIndex.js

@@ -1,11 +1,8 @@
-export const LayoutCategoryIndex = ({
-  tags,
-  allPosts,
-  categories,
-  postCount,
-  latestPosts
-}) => {
-  return <div>
+import LayoutBase from './LayoutBase'
+
+export const LayoutCategoryIndex = (props) => {
+  // const { tags, allPosts, categories, postCount, latestPosts } = props
+  return <LayoutBase {...props}>
     CategoryIndex
-  </div>
+  </LayoutBase>
 }

themes/Empty/LayoutIndex.js

@@ -1,3 +1,6 @@
-export const LayoutIndex = ({ posts, tags, meta, categories, postCount, latestPosts }) => {
-  return <div>Index</div>
+import LayoutBase from './LayoutBase'
+
+export const LayoutIndex = (props) => {
+  // const { posts, tags, meta, categories, postCount, latestPosts } = props
+  return <LayoutBase {...props}>Index</LayoutBase>
 }

themes/Empty/LayoutPage.js

@@ -1,5 +1,8 @@
-export const LayoutPage = ({ page, posts, tags, meta, categories, postCount, latestPosts }) => {
-  return <div>
+import LayoutBase from '../Hexo/LayoutBase'
+
+export const LayoutPage = (props) => {
+  const { page } = props
+  return <LayoutBase {...props}>
     Page - {page}
-  </div>
+  </LayoutBase>
 }

themes/Empty/LayoutSearch.js

@@ -1,11 +1,8 @@
 import { useRouter } from 'next/router'
+import LayoutBase from './LayoutBase'
 
-export const LayoutSearch = ({
-  posts,
-  tags,
-  categories,
-  postCount
-}) => {
+export const LayoutSearch = (props) => {
+  const { posts } = props
   let filteredPosts
   const searchKey = getSearchKey()
   if (searchKey) {
@@ -20,9 +17,9 @@ export const LayoutSearch = ({
 
   console.log(filteredPosts)
 
-  return <div>
+  return <LayoutBase {...props}>
     Search {searchKey}
-  </div>
+  </LayoutBase>
 }
 
 function getSearchKey () {

themes/Empty/LayoutSlug.js

@@ -4,18 +4,33 @@ import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-markup'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-typescript'
+import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
 
-export const LayoutSlug = ({
-  post,
-  tags,
-  prev,
-  next,
-  recommendPosts,
-  categories,
-  postCount,
-  latestPosts
-}) => {
+const mapPageUrl = id => {
+  return 'https://www.notion.so/' + id.replace(/-/g, '')
+}
+
+export const LayoutSlug = (props) => {
+  const { post } = props
   return <div>
-    Slug
+    <h1>Slug - {post?.title}</h1>
+    <p>
+      {/* Notion文章主体 */}
+      <section id='notion-article' className='px-1'>
+        {post.blockMap && (
+          <NotionRenderer
+            recordMap={post.blockMap}
+            mapPageUrl={mapPageUrl}
+            components={{
+              equation: Equation,
+              code: Code,
+              collectionRow: CollectionRow,
+              collection: Collection
+            }}
+          />
+        )}
+      </section>
+      </p>
+
   </div>
 }

themes/Empty/LayoutTag.js

@@ -1,5 +1,8 @@
-export const LayoutTag = ({ tags, posts, tag, categories, postCount, latestPosts }) => {
-  return <div>
+import LayoutBase from './LayoutBase'
+
+export const LayoutTag = (props) => {
+  const { tag } = props
+  return <LayoutBase>
      Tag - {tag}
-   </div>
+   </LayoutBase>
 }

themes/Empty/LayoutTagIndex.js

@@ -1,5 +1,8 @@
-export const LayoutTagIndex = ({ tags, categories, postCount, latestPosts }) => {
-  return <div>
+import LayoutBase from './LayoutBase'
+
+export const LayoutTagIndex = (props) => {
+  // const { tags, categories, postCount, latestPosts } = props
+  return <LayoutBase {...props}>
      TagIndex
-   </div>
+   </LayoutBase>
 }