一貫性のある色、タイポグラフィ、スペースは、サイトをプロフェッショナルな印象にします。このガイドでは、AI の支援を受けて新しい WebSmith テーマを生成し、それを公開サイトに適用するための具体的なコマンドについて説明します。
AIGNE WebSmith は、2つのサブコマンドでテーマ管理を効率化します。
theme generate– デザインの方向性をキャプチャし、YAML テーマファイルとして保存します。theme apply– 保存されたテーマを公開サイトにアップロードします。
以下の手順に従って、テーマの作成から適用までを一貫して行います。
新しいテーマの生成
- ジェネレーターの開始 コマンドの実行
bash aigne web theme generateエイリアス:aigne web theme gen - ルックアンドフィールの記述 ターミナルで、名前、パレット、タイポグラフィ、ムードについて尋ねられます。AI がデザインを具体化できるよう、「暗い背景、ネオンのアクセント、角の丸い見出し」といった具体的な手がかりを提供してください。
- プレビューリストの確認 生成後、テーマはローカルの
themesディレクトリに、以下のようにメタデータ（プライマリカラー、フォント）と共に表示されます。トークンを微調整したい場合は、YAML を編集してください。
テーマの適用
1つ以上のテーマを生成した後、theme apply コマンドを使用して、保存されたテーマを選択し、ウェブサイトに適用できます。このコマンドは、ローカルのテーマファイルを読み取り、それらをリストとして表示し、確認が取れ次第、選択したテーマをサイトにアップロードして変更を反映させます。
プロセス
コマンドの実行
ターミナルで
aigne web theme applyを実行します。テーマの選択
ツールが
themesディレクトリをスキャンし、生成した利用可能なすべてのテーマのリストを表示します。リストには、テーマ名、プライマリカラー、フォントなどの詳細が含まれており、選択の助けになります。レビューと確認
システムは対象のウェブサイト URL、現在有効なテーマ、そして選択した新しいテーマを表示します。変更が加えられる前に、最終確認を求められます。
ウェブサイトへの適用
確認が完了すると、テーマがウェブサイトにアップロードされ、適用されます。成功メッセージが表示され、プロセスが完了したことを示します。
使用方法
既存のテーマを適用するには、以下のコマンドを使用します。
aigne web theme applyウェブサイトの URL をパラメータとして直接指定することもできます。省略した場合、config.yaml ファイルの appUrl が使用されます。
aigne web theme apply --appUrl https://your-website.comパラメータ
apply コマンドは以下のパラメータを受け付けます。
- appUrl
string— ウェブサイトの完全な URL。これを指定しない場合、コマンドは config.yaml 設定ファイルで定義された appUrl を使用します。 - config
string— 設定ファイルの場所。デフォルトは標準の config.yaml パスです。
ロックされたテーマの取り扱い
ウェブサイトの公開中のテーマを誤った変更から保護するため、Blocklet アプリケーションには「テーマロック」機能が含まれています。テーマがロックされている場合、ターミナルから新しいテーマを適用しようとする試みはブロックされます。
ロックされたサイトにテーマを適用しようとすると、403 Forbidden エラーが発生します。
Failed to apply theme: Failed to upload theme data: 403 Forbidden
{"code":"internal_server_error","error":"Theme is locked and cannot be modified"}これを解決するには、ウェブサイトの管理インターフェースを通じてテーマのロックを解除する必要があります。
- ウェブサイトの管理ダッシュボードにログインします。
- 管理メニューで WebSite > Theming に移動します。
- ロック解除ボタンをクリックして、テーマのロックを解除します。
- 再度
aigne web theme applyを実行します。
これらの手順に従うことで、ウェブサイトのビジュアルアイデンティティを効果的に管理できます。テーマを更新した後の次のステップとして、ウェブサイトの公開方法を確認するとよいでしょう。