Пагинация

Пагинация — разбиение длинного списка на страницы по несколько записей: /posts/page/1, /posts/page/2 и так далее. В Astro для этого есть функция paginate(). Она приходит аргументом в getStaticPaths() и сама считает, сколько страниц нужно.

Страница с номером

Создайте src/pages/posts/page/[page].astro. Параметр называется page — в нём будет номер страницы:

---
import { getCollection } from 'astro:content';
import BaseLayout from '../../../layouts/BaseLayout.astro';
import PostCard from '../../../components/PostCard.astro';
 
export async function getStaticPaths({ paginate }) {
  const posts = (await getCollection('blog'))
    .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
 
  return paginate(posts, { pageSize: 5 });
}
 
const { page } = Astro.props;
---
 
<BaseLayout title={`Статьи, страница ${page.currentPage}`}>
  <h1>Статьи</h1>
  {page.data.map((post) => (
    <PostCard title={post.data.title} url={`/posts/${post.id}`} />
  ))}
</BaseLayout>

Если статей 12, при сборке появятся три страницы: /posts/page/1 с пятью статьями, /posts/page/2 с пятью и /posts/page/3 с двумя. Откройте /posts/page/1, чтобы проверить.

Объект page

paginate() передаёт каждой странице пропс page:

Ссылки «назад» и «вперёд»

Добавьте навигацию под списком статей в том же файле:

<nav>
  {page.url.prev && <a href={page.url.prev}>Новее</a>}
  <span>Страница {page.currentPage} из {page.lastPage}</span>
  {page.url.next && <a href={page.url.next}>Старее</a>}
</nav>

На первой странице нет ссылки «Новее», на последней — «Старее». Условие && выводит ссылку только тогда, когда адрес существует.

Ссылка на список

Первая страница списка теперь живёт по адресу /posts/page/1. Поставьте его в навигацию шапки вместо /posts, а старый файл src/pages/posts/index.astro можно удалить или оставить коротким списком последних статей.

Частая ошибка

Файл называют src/pages/posts/[page].astro, рядом с src/pages/posts/[id].astro. Оба файла претендуют на адреса вида /posts/что-то, и статья с именем 2 столкнулась бы со второй страницей списка. Держите пагинацию в отдельной папке, как posts/page/, чтобы адреса не пересекались.