diff --git a/src/components/PostList.astro b/src/components/PostList.astro new file mode 100644 index 0000000..48b33c4 --- /dev/null +++ b/src/components/PostList.astro @@ -0,0 +1,154 @@ +--- +import type {Post} from "@/types/post"; +import {formatDatetime} from "@/lib/format.ts"; + +interface Props { + posts: Post[] + page: number + totalPage: number +} + +const {posts, page, totalPage} = Astro.props + +posts.map((post) => { + post.published_at = formatDatetime(post.published_at, 'YYYY 年 M 月 D 日') +}) +--- + +
+ { + posts.map((post) => ( + +
{post.published_at}
+
{post.category_name}
+
{post.title}
+
+ + + + +
+ + )) + } +
+ + +{totalPage>1&& +} + + diff --git a/src/consts.ts b/src/consts.ts index 1c0d7b0..ae2f97f 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -1,3 +1,5 @@ export const metadata = { siteTitle: "Mobius", + + postPageSize: 12 } diff --git a/src/pages/index.astro b/src/pages/index.astro index edf7c68..25675a4 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,111 +1,20 @@ --- import Layout from "@/layouts/Layout.astro"; - +import PostList from "@/components/PostList.astro"; +import type {Post} from "@/types/post"; import {http} from "@/lib/request"; -import {formatDatetime} from "@/lib/format.ts"; +import { metadata } from "@/consts.ts"; -interface Post { - title: string; - summary: string; - slug: string; - cover: string; - category_name: string; - published_at: string; -} +const {list,total} = await http.get>("post", { + searchParams: { + page: 1, + page_size: metadata.postPageSize + } +}); -const {list} = await http.get>("post"); - -list.map((post) => { - post.published_at = formatDatetime(post.published_at, 'YYYY 年 M 月 D 日') -}) +const totalPage = Math.ceil(total / metadata.postPageSize) --- -
- { - list.map((post) => ( - -
{post.published_at}
-
{post.category_name}
-
{post.title}
-
- - - - -
- - )) - } -
+ - - diff --git a/src/pages/page/[...page].astro b/src/pages/page/[...page].astro new file mode 100644 index 0000000..c044ef9 --- /dev/null +++ b/src/pages/page/[...page].astro @@ -0,0 +1,30 @@ +--- +import Layout from "@/layouts/Layout.astro"; +import PostList from "@/components/PostList.astro"; +import type {Post} from "@/types/post"; +import {http} from "@/lib/request"; +import {metadata} from "@/consts.ts"; + +const {page} = Astro.params + +if (isNaN(Number(page))) { + return Astro.redirect('/') +} + +const {list, total} = await http.get>("post", { + searchParams: { + page, + page_size: metadata.postPageSize + } +}); + +const totalPage = Math.ceil(total / metadata.postPageSize) + +if (totalPage < page) { + return Astro.redirect('/404') +} +--- + + + + diff --git a/src/types/index.d.ts b/src/types/global.d.ts similarity index 100% rename from src/types/index.d.ts rename to src/types/global.d.ts diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 0000000..6071fef --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1 @@ +export * from './post.ts' diff --git a/src/types/post.ts b/src/types/post.ts new file mode 100644 index 0000000..86ac85d --- /dev/null +++ b/src/types/post.ts @@ -0,0 +1,8 @@ +export type Post = { + title: string; + summary: string; + slug: string; + cover: string; + category_name: string; + published_at: string; +}