ライブデモ
この実際の例は、CraftドキュメントとLovableで作成されたブログがどのように見えるかを示しています
このデモでは書き込み操作が無効になっています
CraftとLovableで構築
自分で構築する
この例では、Craftを使用して個人ブログを管理し、Lovableを活用して投稿・タグ・検索機能を備えた美しい個人ウェブサイトへと変えていきます。
ステップ1 — ドキュメントを作成
ブログ記事はコレクションに保管されています。コレクションフィールドを使用してタグ、投稿日、公開ステータスを管理します。各ブログ記事の内容はコレクションアイテムの内容となります。これにより、Craftの強力なエディターを使用してブログ記事を作成・編集できます。
テンプレートを使用して、ブログ用のコレクションを含む新しいドキュメントを作成し、いくつかのサンプル投稿で埋めましょう
ステップ2 — APIアクセスを有効にする
ドキュメントのAPIアクセスを有効化すると、ドキュメントの読み取りや追加に使用できる固有のURLを取得できます。
ステップ1
ステップ2
ステップ3
ステップ4
ステップ5
ステップ6
ステップ3 — Lovableで構築
それでは、Lovableでブログの実際のウェブサイトを作成していきましょう。上記のサンプルサイトでは、以下のプロンプトを使用しました
私の個人ブログを構築してほしいです。
情報はCraftに保存されています。現在のCraftドキュメントの状態例と、ブログ投稿を取得するために使用するべきAPIに関する情報は添付ファイルを確認してほしいです。APIドキュメントを注意深く読み、指示に従ってください。
以下の機能が必要です：
- 最新3件の投稿（日付と概要付き）を表示するランディングページ、およびアーカイブへのリンク
- 公開済み全投稿を日付順に一覧表示するアーカイブページ（テーブル形式）
- 各投稿ページ（下部には前/次ナビゲーションを設置）
- 特定タグ付きブロックを一覧表示するページ
- 検索機能も実装してください
全投稿にはpublishedプロパティがあります。この値がtrueに設定されている投稿のみを表示してください。
洗練されたモダンなデザインを希望します。細部までこだわり、非常に丁寧に作り込まれた印象を与えること。上品でありながら気取らない雰囲気で、優れた現代的なタイポグラフィと十分な余白を特徴とします。
Lovable にアクセスし、プロンプトをプロンプトボックスに貼り付けてください。先ほどダウンロードしたドキュメント用の AI バンドルを必ず添付してください。
Lovableは作業を開始し、バンドルの内容を分析してドキュメント構造とAPIの使用方法を理解します。その後、指定された指示に従ってウェブサイトの構築を開始します。
これで、投稿を表示し、検索やタグ機能をサポートする素敵なブログが完成しました！
