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 自带的函数来创建分页功能，建议等到网站真的有这么大量的内容再来考虑制作分页。

最后会建议实际动手练习，如果过程中有问题可以参考看看我的範例🔗：

  • 尝试添加分页功能
  • 尝试将分页独立为一个组件

延伸阅读