Astro で JSON ページをレンダリングする

私は自分の Astro ブログの検索ソリューションに取り組んできましたが、静的サイト ジェネレーターの上に検索を構築するのは常に注意が必要です.

私の一般的な考えは、私の Eleventy search とほぼ同じにすることです.

Astro での JSON ページの作成

しかし、Astro にはデフォルトできちんとしたパーマリンク構造がないことにすぐに気付きました.

いろいろ試してみると、 search.json.astro のようなページが作れることがわかりました.

これらは http://yoursite.com/search.json としてレンダリングされます

しかし、そこにあるすべてのブログ投稿の JSON 応答をレンダリングする方法を見てみましょう.

Astro には内部ページ用のクールな組み込みの fetch メソッドがあるので、最初にそれを使用しましょう.

const allPosts = Astro.fetchContent('./posts/*.md');

次のステップでは、これらを使用できる出力にマップしたいと思います.これには、次の 3 つの要素のみが必要です.

タイトル

説明

スラグ

それがどのように見えるか見てみましょう:

allPosts.map((p) => {
  return {
    title: p.title,
    description: p.description,
    slug: p.url,
  };
});

ただし、これから変数を作成し、JSON で出力を文字列化しましょう.

const json = JSON.stringify(
  allPosts.map((p) => {
    return {
      title: p.title,
      description: p.description,
      slug: p.url,
    };
  })
);

あとは、JSON 出力をページにレンダリングするだけです.

// All our code
---
{json}

以上です.検索で使用する単純な JSON ファイルを利用できるようになりました.

私の example code on the following file を見つけることができます.
または、こちらの end JSON file を参照してください.

Note: This process might change if Astro will support this eventually, but for now, this seems like an excellent approach.

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

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