feat: 文章分页

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<ApiPageResponse<Post>>("post", {
+  searchParams: {
+    page: 1,
+    page_size: metadata.postPageSize
+  }
+});
 
-const {list} = await http.get<ApiPageResponse<Post>>("post");
-
-list.map((post) => {
-  post.published_at = formatDatetime(post.published_at, 'YYYY 年 M 月 D 日')
-})
+const totalPage = Math.ceil(total / metadata.postPageSize)
 ---
 
 <Layout>
-  <div class="posts">
-    {
-      list.map((post) => (
-        <a class="post" href={`/posts/${post.slug}`}>
-          <div class="published-at">{post.published_at}</div>
-          <div class="category-name">{post.category_name}</div>
-          <div class="post-title">{post.title}</div>
-          <div class="link">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                 class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right">
-              <path d="M7 7h10v10"/>
-              <path d="M7 17 17 7"/>
-            </svg>
-          </div>
-        </a>
-      ))
-    }
-  </div>
+  <PostList posts={list} page={1} totalPage={totalPage}/>
 </Layout>
-
-<style>
-  .posts {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
-
-  .post {
-    background: #fff;
-    padding: 16px;
-    border-radius: 12px;
-    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-    display: flex;
-    align-items: center;
-    transition: transform 0.2s linear;
-  }
-
-  .post:hover {
-    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
-  }
-
-  .published-at {
-    white-space: nowrap;
-    font-size: 14px;
-    color: #4b5563;
-    min-width: 130px;
-    margin-right: 20px;
-  }
-
-  .category-name {
-    border-radius: 999px;
-    background: #fceeda;
-    padding: 4px 12px;
-    font-size: 14px;
-    margin-right: 24px;
-  }
-
-  .post-title {
-    flex: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .link {
-  }
-
-  .link svg {
-    width: 16px;
-    height: 16px;
-    color: #6b7280;
-  }
-
-  @media (max-width: 768px) {
-    .posts {
-      gap: 12px;
-    }
-
-    .published-at {
-      margin-right: 8px;
-    }
-
-    .category-name {
-      display: none;
-    }
-  }
-</style>

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<ApiPageResponse<Post>>("post", {
+  searchParams: {
+    page,
+    page_size: metadata.postPageSize
+  }
+});
+
+const totalPage = Math.ceil(total / metadata.postPageSize)
+
+if (totalPage < page) {
+  return Astro.redirect('/404')
+}
+---
+
+<Layout>
+  <PostList posts={list} page={Number(page)} totalPage={totalPage}/>
+</Layout>