前言
透過內容集合動態的生成 Route 是件方便美好的事情,但一旦數量一多就必須要想辦法分批次顯示這些資料,恰好 Astro 內建頁籤可以幫助我們打造這方面功能。
定義問題
假設目前有這樣一筆學生資料,要怎麼透過 Astro 提供的頁籤功能去產生 3 個頁面,每個頁面 2 筆資料呢?舉例結果如下:
- 第一頁 - 小明、小華
- 第二頁 - 小美、小莉
- 第三頁 - 小王
- ……依此類推
使用頁籤
透過 Astro 內建的頁籤功能,只需要在 getStaticPaths
回傳時解構出 paginate
函式並且夾帶資料與設定回傳即可。
了解 page
Prop
使用 Pagination 函式每一頁都會接收到名為 page
的 Prop 內容包含了許多有用的資訊,像是:
總結
本章節學會了如何運用 Astro 自帶的函式來創建頁籤功能,會建議等到網站真的有這麼大量的內容再來考慮製作頁籤。
最後會建議實際動手練習,如果過程中有問題可以參考看看我的範例:
- 嘗試添加分頁功能
- 嘗試將頁籤獨立為一個元件
延伸閱讀
- Pagination - Astro DOCS
- Day17 - 實作頁籤 - 相同文章同步發布於 iThome 鐵人賽中
2023 iThome 鐵人賽 - Astro 系列
- Astro 系列文第三十日:系列回顧與反省
- Astro 系列文第二十九日:製作作品集參考
- Astro 系列文第二十八日:近期與資源雜談
- Astro 系列文第二十七日:視圖過度
- Astro 系列文第二十六日:建構網頁概念篇
- Astro 系列文第二十五日:基礎指令與設定
- Astro 系列文第二十四日:添加 ESLint 與 Prettier
- Astro 系列文第二十三日:路徑別名
- Astro 系列文第二十二日:環境變數
- Astro 系列文第二十一日:部屬升空
- Astro 系列文第二十日:實作搜尋功能
- Astro 系列文第十九日:RSS 端點
- Astro 系列文第十八日:實作集合分類功能
- Astro 系列文第十七日:頁籤
- Astro 系列文第十六日:內容集合
- Astro 系列文第十五日:基礎布局
- Astro 系列文第十四日:圖片最佳化
- Astro 系列文第十三日:Markdown 與 MDX
- Astro 系列文第十二日:基礎路由
- Astro 系列文第十一日:全域狀態管理
- Astro 系列文第十日:整合 UI 框架
- Astro 系列文第九日:腳本
- Astro 系列文第八日:實作整合 Tailwind
- Astro 系列文第七日:實作按鈕元件
- Astro 系列文第六日:樣式
- Astro 系列文第五日:基礎元件
- Astro 系列文第四日:基礎指令與設定
- Astro 系列文第三日:建構新專案
- Astro 系列文第二日:現有問題與解方
- Astro 系列文第一日:起飛前置準備