调试模式

themes/Empty/LayoutBase.js

@@ -1,4 +1,5 @@
 import CommonHead from '@/components/CommonHead'
+import Link from 'next/link'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -6,14 +7,31 @@ import CommonHead from '@/components/CommonHead'
  * @returns {JSX.Element}
  * @constructor
  */
-const LayoutBase = (props) => {
+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>
+  return (
+    <div>
+      <CommonHead meta={meta} />
+      {/* 导航菜单 */}
+      <div className="w-full flex justify-center my-2">
+        <nav className="max-w-6xl space-x-3 underline">
+          <Link href="/">
+            <a>首页</a>
+          </Link>
+          <Link href="/category">
+            <a>分类</a>
+          </Link>
+          <Link href="/tag">
+            <a>标签</a>
+          </Link>
+        </nav>
+      </div>
+      {/* 内容主体 */}
+      <main id="wrapper" className="flex justify-center flex-1 pb-12">
+        <div className="max-w-6xl">{children}</div>
+      </main>
+    </div>
+  )
 }
 
 export default LayoutBase

themes/Empty/LayoutIndex.js

@@ -1,6 +1,19 @@
+import Link from 'next/link'
 import LayoutBase from './LayoutBase'
 
-export const LayoutIndex = (props) => {
-  // const { posts, tags, meta, categories, postCount, latestPosts } = props
-  return <LayoutBase {...props}>Index</LayoutBase>
+export const LayoutIndex = props => {
+  const { posts } = props
+  return (
+    <LayoutBase {...props}>
+      Index
+      {posts.map(p => (
+        <div key={p.id} className='border my-12'>
+          <Link href={`/article/${p.slug}`}>
+            <a className='underline cursor-pointer'>{p.title}</a>
+          </Link>
+          <div>{p.summary}</div>
+        </div>
+      ))}
+    </LayoutBase>
+  )
 }

themes/Empty/LayoutSlug.js

@@ -6,14 +6,20 @@ 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'
+import {
+  Code,
+  Collection,
+  CollectionRow,
+  Equation,
+  NotionRenderer
+} from 'react-notion-x'
 import LayoutBase from './LayoutBase'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
 
-export const LayoutSlug = (props) => {
+export const LayoutSlug = props => {
   const { post } = props
   const meta = {
     title: `${post.title} | ${BLOG.TITLE}`,
@@ -27,25 +33,27 @@ export const LayoutSlug = (props) => {
     post.toc = getPageTableOfContents(post, post.blockMap)
   }
 
-  return <LayoutBase {...props} meta={meta}>
-    <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>
-
-  </LayoutBase>
+  return (
+    <LayoutBase {...props} meta={meta}>
+      <div>
+        <h2>{post?.title}</h2>
+        <p>
+          <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>
+    </LayoutBase>
+  )
 }