Day17 - Astro Series: Pagination

Astro 系列文第十七日：頁籤

@ Astro

一個漂亮的漸層背景上面有一句標題：「頁籤」

前言

透過內容集合動態的生成 Route 是件方便美好的事情，但一旦數量一多就必須要想辦法分批次顯示這些資料，恰好 Astro 內建頁籤可以幫助我們打造這方面功能。

定義問題

const students = [
  {
    student: '小明',
  },
  {
    student: '小華',
  },
  {
    student: '小美',
  },
  {
    student: '小莉',
  },
  {
    student: '小王',
  },
];

假設目前有這樣一筆學生資料，要怎麼透過 Astro 提供的頁籤功能去產生 3 個頁面，每個頁面 2 筆資料呢？舉例結果如下：

  • 第一頁 - 小明、小華
  • 第二頁 - 小美、小莉
  • 第三頁 - 小王
  • ……依此類推

使用頁籤

透過 Astro 內建的頁籤功能，只需要在 getStaticPaths 回傳時解構出 paginate 函式並且夾帶資料與設定回傳即可。

---
// 1. 解構加入 paginate 函式
export async function getStaticPaths({ paginate }) {
  // 2. 定義資料
  const students = [{
    student: '小明'
  }, {
    student: '小華'
  }, {
    student: '小美'
  }, {
    student: '小莉'
  }, {
    student: '小王'
}];


  // 3. 回傳 Paginate 並夾帶資料與設定回傳
  return paginate(students , { pageSize: 2 });
}
// 4. 所有該頁面的資訊都會被傳入在 Astro.props.page 內
const { page } = Astro.props;
---


<!-- 顯示當前的頁籤位置 -->
<h1>Page {page.currentPage}</h1>
<ul>
  <!-- 顯示每一頁的學生資料 -->
  {page.data.map(({ student }) => <li>{student}</li>)}
</ul>

了解 page Prop

使用 Pagination 函式每一頁都會接收到名為 page 的 Prop 內容包含了許多有用的資訊，像是：

interface Page<T = any> {
  /** 結果 */
  data: T[];
  /** 元資料 */
  /** 頁面第一項的計數，從 0 開始。 */
  start: number;
  /** 頁面最後一項的計數，從 0 開始 */
  end: number;
  /** 結果總計數 */
  total: number;
  /** 當前頁碼，從 1 開始 */
  currentPage: number;
  /** 每個頁面的項數（默認為 25) */
  size: number;
  /** 最後一頁的序號 */
  lastPage: number;
  url: {
    /** 當前頁面連結 */
    current: string;
    /** 前一頁的連結（如果有） */
    prev: string | undefined;
    /** 下一頁的連結（如果有） */
    next: string | undefined;
  };
}

總結

本章節學會了如何運用 Astro 自帶的函式來創建頁籤功能，會建議等到網站真的有這麼大量的內容再來考慮製作頁籤。

最後會建議實際動手練習，如果過程中有問題可以參考看看我的範例🔗：

  • 嘗試添加分頁功能
  • 嘗試將頁籤獨立為一個元件

延伸閱讀