1736198447
2025-01-06 13:47:00
いよいよ、以下を利用した基本的なブログの例を見てみましょう。 アストロ そしてOpti SaaS CMS。シリーズ初心者の方はこちらも読んでみてください パート1 そして 二 初め。
プロジェクトの構造
私は、Astro ブログ テンプレートによって開始された標準的なプロジェクト構造をほとんど維持しているため、人気のあるフロントエンド フレームワークを使用したことのあるほとんどの人には馴染みのあるものになるはずです。
まず、右側には 2 つの主要な設定ファイルが表示されます。「astro.config.mjs」は非常に必要最低限の機能で、いくつかの追加機能 (自動サイトマップと Vercel プラットフォームのサポート) をインポートし、それをサポートするブラウザーのビュー遷移も有効にします。 `.env` には、いくつかの SaaS CMS 環境変数が含まれています。
画像の左側を見ると、特定のページ URL への受信 Web リクエストのプロセスをたどることができます。
- まず、特定の URL パスに関連するロジックを「pages」フォルダーからロードし、見つかったロジックを実行します。 MVC 用語で「コントローラー」と考えることができるものに似ています。この例では、Astro に基づいてキャッチオール ルートを設定しました。 命名規則 `付き[…slug].astro`。次に、この URL のまだ不明なモデルを呼び出してロードします。 apollo-client.ts これは、GraphQL を介して Optimizely Graph と通信します (これについては後で詳しく説明します)。
- 次に、ルートは「モデル」を使用して、ヘッダーやフッターなどの共通の共有「コンポーネント」を設定します。そして最も重要なのは、「TemplateResolver.astro」（一般に TemplateCoordinator とも呼ばれます）を使用して、この「モデル」がどのページ タイプであるかを判断します。
- ページの種類を把握したら、その正確なレイアウトを「レイアウト」からロードして設定し、「ビュー」（ここでは StartPage の）のレンダリングを処理できるようにします。
.NET の PaaS を使用してこれを行うバックエンドの世界から来た私たちには、これらすべてが非常によく知られています。このようなソリューションを構築するには他にも (より良い?) 方法があると思いますが、ここでの聴衆を考慮すると、これが最も理解しやすいと思います。
誰かがグラフって言いましたか？
「apollo-client.ts」には、レンダリングに必要なすべての GraphQL クエリが含まれています すべて このサイトでは Optimizely Graph から取得しました。
また、組み込みの `InMemoryCache` を使用して結果をキャッシュしています。静的に生成されたサイトにとってはそれほど重要ではありませんが、有効にするのが非常に簡単なため、ビルド時間が短縮されることを確認したほうがよいでしょう 😇
確かに、私は「クイック デモ」アプローチを採用し、 それらすべてを支配する 1 つの大きなクエリ™ 実際に必要とするものではなく、URL によってコンテンツを解決します。これは、一意のページ/コンテンツ タイプごとに、より詳細な範囲のクエリを実行しますが、アプローチはほぼ同じで、グラフに対して複数のチェーンされたリクエストが発生するだけです。
これは、次のように、グラフ内のインデックスに基づいて TypeScript モデルを自動的に作成するパッケージを使用することでさらに改善できます。 Optimizely Nextjs デモしかし、このデモではそれについては調べていません。ここでは標準の GraphQL / Astro 機能なので、それほど難しくないはずです。
CMS編集
この記事をまとめる時間がないうちにこの投稿を公開するつもりはありませんでしたが、ホリデー シーズンのおかげで、ようやく公開することができました。最適に提供する ドキュメント プロセス全体について。
このために、`pages` ディレクトリに追加のキャッチオール ルートを作成し、それを新しい子 `preview` フォルダーの下に配置しました。これは、編集専用のプレビュー ロジックを別の方法で実行できるように、「/preview」の下に任意のリクエストのルートが登録されたことを意味します。
ページ上の編集/ビジュアル ビルダーはインタラクティブなエクスペリエンスであるため、静的に生成された Web サイトではうまく機能しません。したがって、Astro にこのページ ルートを事前レンダリングしないように指示します。これにより、ページ ルートが動的になります。次に、編集者がページ上編集でページを表示するときに /preview URL のクエリ パラメーターとして期待できるものについて、Optimizely のガイダンスに従います。最も重要なことは、URL ではなくコンテンツ バージョンに基づいて未公開/ドラフト コンテンツを読み込めるように、既存のグラフ クエリに提供されたプレビュー トークンを使用する必要があることです (ページにはまだ URL がない可能性があるため)。
レンダリング側では、Opti の指示に従って提供された通信スクリプトをロードし、コンテンツ保存イベントを検出してエディターのページ編集エクスペリエンスを更新するようにクライアント側のイベント リスナーをセットアップする必要があります。
最後に、Graph でインデックス付けされているプロパティ名と一致する `data-epi-edit` HTML タグで編集可能なレイアウト要素をラップする必要があります。ページ「MainBody」の例は次のとおりです。
同様に、ページ上の編集とプレビューもサポートされています 😁
結論
このプロジェクトを最初に考えたときに考えていたものに、ついに到達しました。 Astro を使用した SaaS CMS サイト用の、シンプルかつ堅牢な基本テンプレートがあり、ほとんど変更されないコンテンツに重点が置かれています。これを100％電力供給に使用できます 私の個人的なブログ 現在使用しているマークダウン ファイルを交換し、代わりにこのデモで見たように Graph からコンテンツを取得します。
さらに 2 つのアイデアを考えています。
- 純粋に Visual Builder コンテンツをレンダリングする
- 全体を静的ではなく動的にレンダリングします。
また次回お会いしましょう😉
いつものように、Github でコードを作成します。 https://github.com/jacobpretorius/Opti.SaaS.Astro.Demo
2025 年 1 月 6 日
#Astro #と #Optimizely #SaaS #CMS #を使用してヘッドレス #ブログを構築する #パート