簡易ページングとレイアウト

51件以上でページングするように修正して、レイアウトページも作った。

レイアウト側でhtmlを生成する形で、index.astroとpage/[page].astroは中のデータを設定。

index.astroはgetStaticPathsは使えないので以下のようにした。

const pageSize = 50;
const page = {
  data: posts.slice(0, pageSize),
  currentPage: 1,
  lastPage: Math.ceil(posts.length / pageSize),
};

page/[page].astroは getStaticPaths()でpropsをreturnする形にした。

で両方とも

<BlogList page={page} />

で渡す。

BlogList.astroではPropsからpageを受け取る。

interface Props {
　　page: {
　　　　data: any[];
　　　　currentPage: number;
　　　　lastPage: number;
　　};
}

const { page } = Astro.props;

まだ、イマイチなれてない。 次はカテゴリ別とか年別とかかなぁ。