🎉 Add page navigation buttons -> 2.5.0-rc

EveSunMaple · Jul 31, 2024 · add2692 · add2692 · Tikas · Jul 31, 2024
1 parent fc47858
commit add2692
Show file tree

Hide file tree

Showing 9 changed files with 403 additions and 333 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -256,3 +256,15 @@
 
 - 修复了昼夜切换按钮实际操作区域与显示区域不一致的问题
 - 修复了昼夜切换按钮不同步的问题，现在两个按钮与其实际主题统一
+
+## [2.5.0-rc] - 2024-8-1
+
+### Features
+
+- 常驻了上下页的按钮，这下大家就知道我的博客其实是有做分页的了
+- 添加了分页的按钮，终于不用一页一页地跳了
+
+### Refactored
+
+- 单页页面改成了十篇文章
+- 去掉了 layout 的 title
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "frosti-test",
   "type": "module",
-  "version": "2.5.0-beta.3",
+  "version": "2.5.0-rc",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -10,13 +10,13 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.8.2",
+    "@astrojs/check": "^0.8.3",
     "@astrojs/mdx": "^2.3.1",
     "@astrojs/rss": "^4.0.7",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@playform/compress": "^0.0.13",
-    "astro": "^4.12.2",
+    "astro": "^4.12.3",
     "astro-icon": "^1.1.0",
     "astro-pagefind": "^1.6.0",
     "dayjs": "^1.11.12",
@@ -27,7 +27,7 @@
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0",
     "sass": "^1.77.8",
-    "shiki": "^1.11.2",
+    "shiki": "^1.12.0",
     "twikoo": "^1.6.38",
     "typescript": "^5.5.4"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -15,7 +15,7 @@ import {
 const { title, image, includeSidebar = true } = Astro.props;
 ---
 
-<html lang="zh-cn" class="bg-base-300" title="main-page">
+<html lang="zh-cn" class="bg-base-300">
   <title class="sr-only">{`${SITE_TAB} - ${title}`}</title>
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro
@@ -10,10 +10,37 @@ import { infoTest } from "../../consts";
 export async function getStaticPaths({ paginate }: { paginate: any }) {
   const posts = await getCollection("blog");
   posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
-  return paginate(posts, { pageSize: 5 });
+  return paginate(posts, { pageSize: 10 });
 }
 
 const { page }: { page: Page } = Astro.props;
+
+function generatePageLinks(totalPages: number): {
+  active: string[];
+  hidden: string[];
+} {
+  const pages = {
+    active: [] as string[],
+    hidden: [] as string[],
+  };
+
+  if (totalPages > 3) {
+    pages.active.push("1");
+    pages.active.push("...");
+    pages.active.push(totalPages.toString());
+    for (let i = 2; i <= totalPages - 1; i++) {
+      pages.hidden.push(i.toString());
+    }
+  } else {
+    for (let i = 1; i <= totalPages; i++) {
+      pages.active.push(i.toString());
+    }
+  }
+  return pages;
+}
+
+const totalPages = Math.ceil(page.total / page.size);
+const pageLinks = generatePageLinks(totalPages);
 ---
 
 <BaseLayout title="blog">
@@ -41,41 +68,93 @@ const { page }: { page: Page } = Astro.props;
     }
   </div>
   <div class="flex justify-between mb-8">
-    {
-      page.url.prev ? (
-        <a href={page.url.prev} class="btn bg-base-100 shadow-xl">
-          <svg
-            class="h-6 w-6 fill-current md:h-8 md:w-8"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-          >
-            <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
-          </svg>{" "}
-          {infoTest.prevPage}
-        </a>
-      ) : (
-        <div />
-      )
-    }
-    {
-      page.url.next ? (
-        <a href={page.url.next} class="btn bg-base-100 shadow-xl">
-          {infoTest.nextPage}{" "}
-          <svg
-            class="h-6 w-6 fill-current md:h-8 md:w-8"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-          >
-            <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
-          </svg>
-        </a>
-      ) : (
-        <div />
-      )
-    }
+    <a
+      href={page.url.prev ? page.url.prev : ``}
+      class={page.url.prev
+        ? `btn bg-base-100 shadow-xl`
+        : `btn  btn-disabled bg-base-100 shadow-xl`}
+    >
+      <svg
+        class="h-6 w-6 fill-current md:h-8 md:w-8"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+        ></path>
+      </svg>
+      {infoTest.prevPage}
+    </a>
+    <div class="join">
+      {
+        totalPages > 4 ? (
+          <>
+            {pageLinks.active.map((link) =>
+              link === "..." ? (
+                <div class="dropdown dropdown-top join-item rounded-none">
+                  <div
+                    tabindex="0"
+                    role="button"
+                    class="btn rounded-none w-[55px]"
+                  >
+                    ...
+                  </div>
+                  <ul
+                    tabindex="0"
+                    class="menu dropdown-content bg-base-100 rounded-box z-[100] p-2 shadow-xl"
+                  >
+                    {pageLinks.hidden.map((hidden) => (
+                      <li>
+                        <a
+                          href={hidden === "1" ? `/blog` : `/blog/${hidden}`}
+                          class={`menu-item ${hidden === page.current ? "btn-active" : ""}`}
+                        >
+                          {hidden}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ) : (
+                <a
+                  href={link === "1" ? `/blog` : `/blog/${link}`}
+                  class={`join-item btn ${link === page.current ? "btn-active" : ""}`}
+                >
+                  {link}
+                </a>
+              )
+            )}
+          </>
+        ) : (
+          pageLinks.active.map((link) => (
+            <a
+              href={link === "1" ? `/blog` : `/blog/${link}`}
+              class={`join-item btn ${link === page.current ? "btn-active" : ""}`}
+            >
+              {link}
+            </a>
+          ))
+        )
+      }
+    </div>
+    <a
+      href={page.url.next ? page.url.next : ``}
+      class={page.url.next
+        ? `btn bg-base-100 shadow-xl`
+        : `btn  btn-disabled bg-base-100 shadow-xl`}
+    >
+      {infoTest.nextPage}
+      <svg
+        class="h-6 w-6 fill-current md:h-8 md:w-8"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+        ></path>
+      </svg>
+    </a>
   </div>
 </BaseLayout>
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
@@ -24,7 +24,7 @@ import LinkCard from "../components/page/LinkCard.astro";
 
   </BaseCard>
 
-  <BaseCard title="home" image="/home.webp">
+  <BaseCard title="Home" image="/home.webp">
     # 🧊 Frosti Introduction
 
     ---

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -214,4 +214,12 @@ hr {
 .highlight .code-lang {
   font-family: 'Cascadia';
   user-select: none;
+}
+
+details summary {
+  list-style: none;
+  outline: none; 
+  align-items: center;
+  justify-content: center; 
+  cursor: pointer; 
 }
diff --git a/src/types.ts b/src/types.ts
@@ -16,6 +16,9 @@ export interface Page {
     next?: string;
   };
   data: Post[];
+  total: number;
+  size: number;
+  current: string;
 }
 
 export interface CardInfo {