From 785371bb3eccca455e5ce5fccbe9b6e3752a03f6 Mon Sep 17 00:00:00 2001 From: Bertrand Yuan Date: Tue, 16 Dec 2025 00:15:04 +0800 Subject: fix(front-end): bug in viewing posts --- src/app/(main)/(home)/posts/[slug]/page.tsx | 185 ++++------------------------ src/app/(main)/(home)/posts/page.tsx | 84 ++----------- 2 files changed, 36 insertions(+), 233 deletions(-) (limited to 'src/app/(main)/(home)/posts') diff --git a/src/app/(main)/(home)/posts/[slug]/page.tsx b/src/app/(main)/(home)/posts/[slug]/page.tsx index fa096b6..5960f06 100644 --- a/src/app/(main)/(home)/posts/[slug]/page.tsx +++ b/src/app/(main)/(home)/posts/[slug]/page.tsx @@ -7,55 +7,18 @@ import { RichText } from '@/components/rich-text'; import { Section } from '@/components/section'; import { TagCard } from '@/components/tags/tag-card'; import { createMetadata } from '@/lib/metadata'; -import { metadataImage } from '@/lib/metadata-image'; import { getPostBySlug, getAllPostSlugs, type BlogPost, } from '@/lib/payload-posts'; -import { type Page as MDXPage, getPost, getPosts } from '@/lib/source'; import { cn } from '@/lib/utils'; -import { File, Files, Folder } from 'fumadocs-ui/components/files'; -import { InlineTOC } from 'fumadocs-ui/components/inline-toc'; -import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; -import defaultMdxComponents from 'fumadocs-ui/mdx'; import type { Metadata } from 'next'; import { notFound } from 'next/navigation'; import Balancer from 'react-wrap-balancer'; import { description as homeDescription } from '@/app/(main)/layout.config'; -// MDX 文章 Header -function MdxHeader(props: { page: MDXPage; tags?: string[] }) { - const { page, tags } = props; - - return ( -
-
-
-

- {page.data.title} -

-

- {page.data.description} -

-
-
- {tags?.map((tag) => ( - - ))} -
-
-
- ); -} - -// Payload 文章 Header -function PayloadHeader(props: { post: BlogPost }) { +function PostHeader(props: { post: BlogPost }) { const { post } = props; return ( @@ -84,70 +47,10 @@ function PayloadHeader(props: { post: BlogPost }) { ); } -// MDX 文章内容 -function MdxContent({ page }: { page: MDXPage }) { - const { body: Mdx, toc, tags, lastModified } = page.data; - const lastUpdate = lastModified ? new Date(lastModified) : undefined; - - return ( - <> - - -
-
-
- -
- -
- -
-
-
-

Written by

-

{page.data.author}

-
-
-

Created At

-

- {new Date(page.data.date ?? page.file.name).toDateString()} -

-
- {lastUpdate && ( -
-

Updated At

-

{lastUpdate.toDateString()}

-
- )} - -
-
-
- - - ); -} - -// Payload 文章内容 -function PayloadContent({ post }: { post: BlogPost }) { +function PostContent({ post }: { post: BlogPost }) { return ( <> - +
@@ -179,6 +82,7 @@ function PayloadContent({ post }: { post: BlogPost }) {
+ ); } @@ -187,80 +91,39 @@ export default async function Page(props: { params: Promise<{ slug: string }>; }) { const params = await props.params; + const post = await getPostBySlug(params.slug); - // 先尝试获取 MDX 文章 - const mdxPage = getPost([params.slug]); - - if (mdxPage) { - return ; - } - - // 再尝试获取 Payload 文章 - const payloadPost = await getPostBySlug(params.slug); - - if (payloadPost) { - return ; + if (!post) { + notFound(); } - // 都找不到则 404 - notFound(); + return ; } export async function generateMetadata(props: { params: Promise<{ slug: string }>; }): Promise { const params = await props.params; + const post = await getPostBySlug(params.slug); - // 先尝试 MDX 文章 - const mdxPage = getPost([params.slug]); - - if (mdxPage) { - const title = mdxPage.data.title; - const description = mdxPage.data.description ?? homeDescription; - - return createMetadata( - metadataImage.withImage(mdxPage.slugs, { - title, - description, - openGraph: { - url: `/posts/${mdxPage.slugs.join('/')}`, - }, - alternates: { - canonical: mdxPage.url, - }, - }) - ); + if (!post) { + return {}; } - // 再尝试 Payload 文章 - const payloadPost = await getPostBySlug(params.slug); - - if (payloadPost) { - return createMetadata({ - title: payloadPost.title, - description: payloadPost.description || homeDescription, - openGraph: { - url: `/posts/${payloadPost.slug}`, - }, - alternates: { - canonical: `/posts/${payloadPost.slug}`, - }, - }); - } - - return {}; + return createMetadata({ + title: post.title, + description: post.description || homeDescription, + openGraph: { + url: `/posts/${post.slug}`, + images: post.image ? [{ url: post.image }] : undefined, + }, + alternates: { + canonical: `/posts/${post.slug}`, + }, + }); } export async function generateStaticParams(): Promise<{ slug: string }[]> { - // MDX 文章的 slugs - const mdxSlugs = getPosts() - .map((page) => page.slugs[0]) - .filter((slug): slug is string => !!slug) - .map((slug) => ({ slug })); - - // Payload 文章的 slugs - const payloadSlugs = await getAllPostSlugs(); - const payloadParams = payloadSlugs.map((slug) => ({ slug })); - - return [...mdxSlugs, ...payloadParams]; + const slugs = await getAllPostSlugs(); + return slugs.map((slug) => ({ slug })); } diff --git a/src/app/(main)/(home)/posts/page.tsx b/src/app/(main)/(home)/posts/page.tsx index 00e51c4..40ebcda 100644 --- a/src/app/(main)/(home)/posts/page.tsx +++ b/src/app/(main)/(home)/posts/page.tsx @@ -3,70 +3,10 @@ import { NumberedPagination } from '@/components/numbered-pagination'; import { PostCard } from '@/components/posts/post-card'; import { Section } from '@/components/section'; import { createMetadata } from '@/lib/metadata'; -import { getPublishedPosts, type BlogPost } from '@/lib/payload-posts'; -import { getSortedByDatePosts, type Page } from '@/lib/source'; +import { getPublishedPosts } from '@/lib/payload-posts'; import type { Metadata, ResolvingMetadata } from 'next'; import { notFound, redirect } from 'next/navigation'; -// 统一的文章类型 -interface UnifiedPost { - id: string; - title: string; - description: string; - image?: string; - url: string; - date: Date; - author: string; - tags?: string[]; - source: 'mdx' | 'payload'; -} - -// 将 MDX 文章转换为统一格式 -function transformMdxPost(post: Page): UnifiedPost { - return { - id: `mdx-${post.url}`, - title: post.data.title, - description: post.data.description ?? '', - image: post.data.image, - url: post.url, - date: new Date(post.data.date), - author: post.data.author, - tags: post.data.tags, - source: 'mdx', - }; -} - -// 将 Payload 文章转换为统一格式 -function transformPayloadPost(post: BlogPost): UnifiedPost { - return { - id: `payload-${post.id}`, - title: post.title, - description: post.description, - image: post.image, - url: post.url, - date: post.date, - author: post.author, - tags: post.tags, - source: 'payload', - }; -} - -// 获取所有文章（合并 MDX 和 Payload） -async function getAllPosts(): Promise { - // 获取 MDX 文章 - const mdxPosts = getSortedByDatePosts().map(transformMdxPost); - - // 获取 Payload 文章（获取全部，用于分页计算） - const { posts: payloadPosts } = await getPublishedPosts({ limit: 1000 }); - const transformedPayloadPosts = payloadPosts.map(transformPayloadPost); - - // 合并并按日期排序 - const allPosts = [...mdxPosts, ...transformedPayloadPosts]; - allPosts.sort((a, b) => b.date.getTime() - a.date.getTime()); - - return allPosts; -} - const CurrentPostsCount = ({ startIndex, endIndex, @@ -115,11 +55,6 @@ export default async function Page(props: { }) { const searchParams = await props.searchParams; - // 获取所有文章 - const allPosts = await getAllPosts(); - const totalPosts = allPosts.length; - const pageCount = Math.ceil(totalPosts / postsPerPage); - const pageIndex = searchParams.page ? Number.parseInt( Array.isArray(searchParams.page) @@ -129,21 +64,26 @@ export default async function Page(props: { ) - 1 : 0; - if (pageIndex < 0 || (pageCount > 0 && pageIndex >= pageCount)) notFound(); + // 获取文章（带分页） + const { posts, totalDocs, totalPages } = await getPublishedPosts({ + limit: postsPerPage, + page: pageIndex + 1, + }); + + if (pageIndex < 0 || (totalPages > 0 && pageIndex >= totalPages)) notFound(); const startIndex = pageIndex * postsPerPage; - const endIndex = startIndex + postsPerPage; - const posts = allPosts.slice(startIndex, endIndex); + const endIndex = startIndex + posts.length; return ( <>

- All {totalPosts} Posts{' '} + All {totalDocs} Posts{' '}

@@ -166,7 +106,7 @@ export default async function Page(props: { })} - {pageCount > 1 && } + {totalPages > 1 && } ); } -- cgit v1.2.3