分页模式加载文章预览

pages/about.js

@@ -59,6 +59,7 @@ export async function getStaticProps () {
   const blockMap = await getPostBlocks(post.id, 'slug')
   post.toc = []
   if (blockMap) {
+    post.blockMap = blockMap
     post.content = Object.keys(blockMap.block)
     post.toc = getPageTableOfContents(post, blockMap)
   }

pages/article/[slug].js

@@ -13,7 +13,6 @@ import { getPageTableOfContents } from 'notion-utils'
  */
 const Slug = ({
   post,
-  blockMap,
   tags,
   prev,
   next,
@@ -45,7 +44,6 @@ const Slug = ({
     >
       <ArticleDetail
         post={post}
-        blockMap={blockMap}
         recommendPosts={recommendPosts}
         prev={prev}
         next={next}
@@ -78,8 +76,10 @@ export async function getStaticProps ({ params: { slug } }) {
 
   const blockMap = await getPostBlocks(post.id, 'slug')
   if (blockMap) {
+    post.blockMap = blockMap
     post.content = Object.keys(blockMap.block)
     post.toc = getPageTableOfContents(post, blockMap)
+    delete post.content
   }
 
   // 上一篇、下一篇文章关联
@@ -92,7 +92,6 @@ export async function getStaticProps ({ params: { slug } }) {
   return {
     props: {
       post,
-      blockMap,
       tags,
       prev,
       next,

pages/index.js

@@ -1,10 +1,11 @@
 import BLOG from '@/blog.config'
-import BaseLayout from '@/layouts/BaseLayout'
-import BlogPostListScroll from '@/components/BlogPostListScroll'
-import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import Header from '@/components/Header'
 import BlogPostListPage from '@/components/BlogPostListPage'
+import BlogPostListScroll from '@/components/BlogPostListScroll'
+import Header from '@/components/Header'
 import LatestPostsGroup from '@/components/LatestPostsGroup'
+import BaseLayout from '@/layouts/BaseLayout'
+import { getPostBlocks } from '@/lib/notion'
+import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 
 export async function getStaticProps () {
   const from = 'index'
@@ -19,12 +20,20 @@ export async function getStaticProps () {
   const page = 1
   let postsToShow = []
   if (BLOG.postListStyle !== 'page') {
-    postsToShow = Object.create(allPosts)
+    postsToShow = Array.from(allPosts)
   } else {
     postsToShow = allPosts.slice(
       BLOG.postsPerPage * (page - 1),
       BLOG.postsPerPage * page
     )
+    for (const i in postsToShow) {
+      const post = postsToShow[i]
+      const blockMap = await getPostBlocks(post.id, 'slug')
+      if (blockMap) {
+        post.blockMap = blockMap
+      }
+    }
+    console.log('加载文章预览完成')
   }
 
   return {
@@ -47,15 +56,19 @@ const Index = ({ posts, tags, meta, categories, postCount, latestPosts }) => {
       meta={meta}
       tags={tags}
       sideBarSlot={<LatestPostsGroup posts={latestPosts} />}
-      rightAreaSlot={BLOG.widget?.showLatestPost && <LatestPostsGroup posts={latestPosts} />}
+      rightAreaSlot={
+        BLOG.widget?.showLatestPost && <LatestPostsGroup posts={latestPosts} />
+      }
       postCount={postCount}
       categories={categories}
     >
       {BLOG.postListStyle !== 'page'
-        ? (<BlogPostListScroll posts={posts} tags={tags} />)
-        : (<BlogPostListPage posts={posts} tags={tags} postCount={postCount} />)
-      }
-
+        ? (
+        <BlogPostListScroll posts={posts} tags={tags} showSummary={true} />
+          )
+        : (
+        <BlogPostListPage posts={posts} tags={tags} postCount={postCount} />
+          )}
     </BaseLayout>
   )
 }

pages/page/[page].js

@@ -3,6 +3,7 @@ import BlogPostListPage from '@/components/BlogPostListPage'
 import Header from '@/components/Header'
 import LatestPostsGroup from '@/components/LatestPostsGroup'
 import BaseLayout from '@/layouts/BaseLayout'
+import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import Custom404 from '../404'
 
@@ -46,15 +47,20 @@ export async function getStaticProps ({ params: { page } }) {
     type: 'website'
   }
   // 处理分页
-  let postsToShow = []
-  if (BLOG.postListStyle !== 'page') {
-    postsToShow = Object.create(allPosts)
-  } else {
-    postsToShow = allPosts.slice(
-      BLOG.postsPerPage * (page - 1),
-      BLOG.postsPerPage * page
-    )
+  const postsToShow = allPosts.slice(
+    BLOG.postsPerPage * (page - 1),
+    BLOG.postsPerPage * page
+  )
+
+  for (const i in postsToShow) {
+    const post = postsToShow[i]
+    const blockMap = await getPostBlocks(post.id, 'slug')
+    if (blockMap) {
+      post.blockMap = blockMap
+    }
   }
+  console.log('加载文章预览完成')
+
   return {
     props: {
       page,

pages/search.js

@@ -55,11 +55,11 @@ const Search = ({ posts, tags, categories, postCount, latestPosts }) => {
       <StickyBar>
         <div className="p-4 dark:text-gray-200">
           <FontAwesomeIcon icon={faSearch} className="mr-1" />{' '}
-          {locale.NAV.SEARCH}： {searchKey}
+           {filteredPosts.length} {locale.COMMON.RESULT_OF_SEARCH}
         </div>
       </StickyBar>
       <div className="md:mt-5">
-        <BlogPostListScroll posts={filteredPosts} tags={tags} />
+        <BlogPostListScroll posts={filteredPosts} tags={tags} showSummary={true}/>
       </div>
     </BaseLayout>
   )