Astro.js - 将动态变量传递到分页

Question

所以我的问题是，我在 Astro.js 中创建了页面，我从 directus SDK 收集数据，以将它们传播到网站上。我在 Astro.js 中使用内置分页。当我尝试添加一些过滤时，问题就出现了。我如何重建分页，我知道分页是在加载时呈现的，但刷新不会重建它。

我的分页实现：

export async function getStaticPaths({ paginate }) 
{
  const items = await fetchItems(filterValue);
  return paginate(items, { pageSize: 9 });
}

函数 fetchItems() 从 directus sdk 获取数据。函数在 getStaticPath 函数之外看不到声明的可变量。 我想让filterValue动态化。我可以这样做还是必须自己建立分页？

Answer 1

您需要的是嵌套分页。

//[page].astro
import type { GetStaticPaths } from "astro";
export const getStaticPaths = (async ({paginate}) => {
    const items = await fetchItems(filterVal);
    return paginate( items, {params: { filterVal }, pageSize: 9});
}) satisfies GetStaticPaths;

项目结构示例：

pages
  |--page
      |--[filterVal]
            |--[page]