サイトテーマの作成方法、カスタマイズ方法、および AEM のライブコンテンツを使用したテスト方法を説明します。
AEM クイックサイト作成ジャーニーの前のドキュメントである Git リポジトリのアクセス情報の取得 では、フロントエンド開発者が Cloud Manager を使用して Git リポジトリ情報にアクセスする方法を確認しました。次のことができるようになりました。
ジャーニーのこのパートでは次のステップに進み、サイトテーマについて掘り下げます。サイトテーマをカスタマイズし、取得したアクセス資格情報を使用してそれらのカスタマイズをコミットする方法を示します。
このドキュメントでは、AEM サイトテーマの作成方法とカスタマイズ方法、および AEM のライブコンテンツを使用したテスト方法を説明します。読み終えると、次のことができるようになります。
ジャーニーのこの部分は、フロントエンド開発者に適用されます。
AEM 管理者が提供するテーマを編集場所に抽出し、目的のエディターで開きます。
テーマが一般的なフロントエンドプロジェクトであることがわかります。構造の最も重要な部分は次のとおりです。
src/main.ts
:JS および CSS テーマのメインエントリポイントsrc/site
:サイト全体に適用される JS および CSS ファイルsrc/components
:AEM コンポーネント固有の JS および CSS ファイルsrc/resources
:アイコン、ロゴ、フォントなどの静的ファイル標準の AEM サイトテーマについて詳しくは、このドキュメントの最後にある その他のリソース の節の GitHub リンクを参照してください。
テーマプロジェクトの構造に慣れたら、ローカルプロキシを起動して、実際の AEM コンテンツに基づいて、テーマのカスタマイズをリアルタイムで確認できるようにします。
コマンドラインから、ローカルマシン上のテーマのルートに移動します。
npm install
を実行すると、npm は依存関係を取得し、プロジェクトをインストールします。
npm run live
を実行すると、プロキシサーバーが起動します。
プロキシサーバーが起動すると、http://localhost:7001/
へのブラウザーが自動的に開きます。選択 ローカルでログイン(管理者タスクのみ) をクリックし、AEM管理者から提供されたプロキシユーザーの資格情報を使用してサインオンします。
これらの資格情報がない場合は、このジャーニーにおける「テンプレートからサイトを作成」記事の「プロキシユーザーを設定」の節を言及したうえで、管理者にお問い合わせください。
ログインしたら、AEM 管理者が指定したサンプルコンテンツのパスを指すように、ブラウザーで URL を変更します。
/content/<your-site>/en/home.html?wcmmode=disabled
であった場合http://localhost:7001/content/<your-site>/en/home.html?wcmmode=disabled
に変更しますサイトに移動して、コンテンツを参照できます。サイトはライブ AEM インスタンスからライブで取り出されるため、実際のコンテンツに対してテーマをカスタマイズできます。
これで、テーマのカスタマイズを開始できます。 次に、プロキシ経由で変更をライブで確認する方法を示す簡単な例を示します。
エディターで、<your-theme-sources>/src/site/_variables.scss
ファイルを開きます。
$color-background
変数を編集し、白以外の値に設定します。この例では、orange
が使用されます。
ファイルを保存すると、プロキシサーバーが [Browsersync] File event [change]
行を介して変更を認識していることがわかります。
プロキシサーバーのブラウザーに切り替えると、変更が直ちに表示されます。
AEM 管理者から提供された要件に基づいて、テーマのカスタマイズを続行できます。
カスタマイズが完了したら、それらを AEM Git リポジトリにコミットできます。まず、リポジトリをローカルマシンにクローンする必要があります。
コマンドラインで、リポジトリのクローン先に移動します。
以前に Cloud Manager から取得したコマンドを実行します。 のようになります git clone https://git.cloudmanager.adobe.com/<my-org>/<my-program>/
。このジャーニーの前の部分で取得した Git ユーザー名とパスワードを使用します。
編集中のテーマプロジェクトを、mv <site-theme-sources> <cloned-repo>
のようなコマンドを使用して、クローンリポジトリに移動します。
クローンリポジトリのディレクトリで、先ほど移動したテーマファイルを次のコマンドでコミットします。
git add .
git commit -m "Adding theme sources"
git push
カスタマイズ内容は AEM Git リポジトリにプッシュされます。
これで、カスタマイズ内容が AEM Git リポジトリに安全に保存されました。
これで、AEM クイックサイト作成ジャーニーのこのステップが完了しました。次のことを行う必要があります。
この知識に基づいてドキュメントを次に確認し、AEMクイックサイト作成のジャーニーを続行します。 カスタマイズしたテーマをデプロイする フロントエンドパイプラインを使用したテーマのデプロイ方法を学ぶ場所です。
カスタマイズしたテーマのデプロイ のドキュメントを確認して、クイックサイト作成ジャーニーの次のパートに進むことをお勧めしますが、以下のリソースではこのドキュメントで取り上げた概念についてより詳しく説明しています。追加的なオプションであり、ジャーニーを続ける上で必須のリソースではありません。