コレクションから動的ルーティングに移行するアストロ

Astro は比較的新しいので、要素はまだ進化しており、より良い方向に変化しています.
彼らのコレクションを使用して、Astro でレシピ Web サイトをセットアップしました.ただし、これは動的ルーティングに変更されました.

原則は同じですが、実装はより簡単で迅速になりました.

この記事では、Astro コレクションから Astro 動的ルーティングに移行するために必要な変更について説明します.

Astro のコレクションに関する以前の記事を読んだことがある場合は、動的ルーティングで動作するように変更されています.

Astro recipe collection website - Part 1 Setup collections

Astro recipe collection website - Part 3 Category filter pages

Astro ダイナミック ルーティングの概要

Astro は静的サイト ジェネレーターです.つまり、ビルドすると、1 つの出力が得られます.別のビルドを実行しない限り、Astro は新しいページをランダムに生成できません.

ただし、ビルド時にこれらの動的ページを生成できます.
これを使用する場合は、ファイルに [bracket].astro 表記を使用する必要があります.

これらのブラケット ファイルには、getStaticPaths() エクスポート機能があります.

You might notice this was the createCollection() method before.

これらのファイルの一部は、次のようになります.

pages/blog/[slug].astro : blog/hello-world または blog/post-2 のようなページを生成します.

pages/[username]/settings.astro : chris/settings や fred/settings のようなページが表示されます.

pages/recipes/all/[...page].astro : ページネーションのオプションを提供します: recipes/all または recipes/all/2 .

ご覧のとおり、構造内で複数のブラケットを使用できるため、これは非常に強力です.

pages/recipes/[slug]/[...page].astro : recipes/breakfast や recipes/dinner/2 のような URL を提供します.

Astro でコレクションを動的ルートに変換する

Astro でコレクションから動的ルートに移動する方法の例として、レシピ /all コレクションを見てみましょう.

以前は、 pages/$recipes.astro のようなページがありました.

次のようなエクスポートがありました:

export async function createCollection() {
  const allRecipes = Astro.fetchContent('./recipe/*.md').sort((a, b) =>
    a.date.localeCompare(b.date)
  );

  return {
    paginate: true,
    route: '/recipes/:page?',
    async props({paginate}) {
      return {
        recipes: paginate(allRecipes, {pageSize: 5}),
      };
    },
  };
}

const {recipes} = Astro.props;

これにより、 recipes/1 および recipes/2 のような URL が得られます.

動的ルートで同じことを実現するには、pages フォルダーに別のフォルダー レベルを作成する必要があります.
これは recipes フォルダーです.

新しいレシピ フォルダー内に、[...page].astro という名前のファイルを作成します. 3 つのドットを使用して、ページ分割された URL を機能させ、後ろに何もない URL を許可します.
いくつかの例: recipes 、 recipes/3 、または recipes/10 .

このファイルは、古いコレクションに比べてはるかに単純に見えます.

export async function getStaticPaths({paginate}) {
  const allRecipes = Astro.fetchContent('./../recipe/*.md').sort((a, b) =>
    a.date.localeCompare(b.date)
  );

  return paginate(allRecipes, {pageSize: 5});
}

const {page} = Astro.props;

簡単ですよね!

古いセットアップでは、出力として recipes 変数を使用しました.新しいバージョンでは、ページ オブジェクトを使用します.
これにはいくつかのプロパティがあります.

page.data : このページの実際のデータ

page.start : ページ

の最初の項目のインデックス

page.end : ページの最後の項目のインデックス

page.size : このページの項目数

page.total : すべてのページを合わせた合計数

page.currentPage : 1 から始まる現在のページ

page.lastPage : 総ページ数

page.url.current : 現在の URL

page.url.prev : 前のページへのリンク

page.url.next : 次のページへのリンク

結論

ダイナミック ルーティングは、ファイル構造に多少の変更を加えたものですが、主にルートごとに複数のスラッグ オプションがあるため、より多くの自由が得られます.

これは、古い方法からこの新しいルーティング構造に移行するための非常に簡単な方法でもあります.

これを楽しんで、Astro に挑戦していただければ幸いです.

読んでいただきありがとうございます。接続しましょう。

私のブログを読んでいただきありがとうございます.メール ニュースレターを購読して、Facebook に接続してください.