feat: 文章分页

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 日')
+})
+---
+
+<div class="posts">
+  {
+    posts.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>
+
+<!--分页器-->
+{totalPage>1&&
+<div class="pagination">
+  {page > 1 ? (<a href={`/page/${page - 1}`}>上一页</a>) : (
+    <span class="disabled" aria-disabled="true">上一页</span>)}
+
+  {Array.from({length: totalPage}).map((_, index) => {
+    if (page === index + 1) {
+      return <span class="pagination-number disabled" aria-disabled="true">{index + 1}</span>
+    }
+    return <a class="pagination-number" href={`/page/${index + 1}`}>{index + 1}</a>
+  })}
+
+  {page < totalPage ? (<a href={`/page/${page + 1}`}>下一页</a>) : (
+    <span class="disabled" aria-disabled="true">下一页</span>)}
+</div>}
+
+<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;
+  }
+
+  .pagination {
+    margin: 24px 0;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    align-items: center;
+    font-size: 14px;
+  }
+
+  .pagination-number {
+    border-radius: 999px;
+    color: #fafafa;
+    background: #1f2937;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .pagination .disabled {
+    color: #9ca3af;
+    cursor: not-allowed;
+    pointer-events: none;
+    text-decoration: none;
+  }
+
+  .pagination-number.disabled {
+    background: #d1d5db;
+  }
+
+  @media (max-width: 768px) {
+    .posts {
+      gap: 12px;
+    }
+
+    .published-at {
+      margin-right: 8px;
+    }
+
+    .category-name {
+      display: none;
+    }
+  }
+
+
+</style>

src/consts.ts

@@ -1,3 +1,5 @@
 export const metadata = {
   siteTitle: "Mobius",
+
+  postPageSize: 12
 }

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 {
+const {list,total} = await http.get<ApiPageResponse<Post>>("post", {
-  title: string;
+  searchParams: {
-  summary: string;
+    page: 1,
-  slug: string;
+    page_size: metadata.postPageSize
-  cover: string;
-  category_name: string;
-  published_at: string;
   }
+});
 
-const {list} = await http.get<ApiPageResponse<Post>>("post");
+const totalPage = Math.ceil(total / metadata.postPageSize)
-
-list.map((post) => {
-  post.published_at = formatDatetime(post.published_at, 'YYYY 年 M 月 D 日')
-})
 ---
 
 <Layout>
-  <div class="posts">
+  <PostList posts={list} page={1} totalPage={totalPage}/>
-    {
-      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>
 </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>

src/types/index.ts

@@ -0,0 +1 @@
+export * from './post.ts'

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;
+}