ドキュメントAEMAEM チュートリアルAEM Sites WKND チュートリアル

ワークフローのテーマ設定 theming

Last update: Thu Oct 10 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 初心者
  • 開発者

この章では、Adobe Experience Manager サイトのテーマソースを更新して、ブランド固有のスタイルを適用します。 プロキシサーバーを使用して、ライブサイトのコードを作成する際に CSS と JavaScript のアップデートのプレビューを表示する方法について説明します。 このチュートリアルでは、Adobe Cloud Manager のフロントエンドパイプラインを使用して AEM サイトにテーマのアップデートをデプロイする方法についても説明します。

最後に、WKND ブランドに合致するスタイルを組み込むようにサイトを更新します。

前提条件 prerequisites

これは複数のパートから成るチュートリアルで、ページテンプレートの章で説明した手順を既に完了していることを想定しています。

目的

  1. サイトのテーマソースをダウンロードして変更する方法を説明します。
  2. リアルタイムプレビューに対応するライブサイトのコードを作成する方法を説明します。
  3. Adobe Cloud Manager のフロントエンドパイプラインを使用して、CSS と JavaScript のコンパイル済みアップデートをテーマの一部として配信するエンドツーエンドのワークフローを理解します。

テーマの更新 theme-update

次に、WKND ブランドのルックアンドフィールに合わせて、サイトのテーマソースを変更します。

https://video.tv.adobe.com/v/332918?quality=12&learn=on

ビデオの大まかな手順は次のとおりです。

  1. プロキシ開発サーバーで使用するローカルユーザーを AEM に作成します。
  2. テーマのソースを AEM からダウンロードし、VSCode などのローカル IDE を使用して開きます。
  3. テーマのソースを変更し、プロキシ開発サーバーを使用して、CSS と JavaScript の変更をリアルタイムでプレビューします。
  4. 雑誌記事が WKND ブランドのスタイルとモックアップに一致するように、テーマのソースを更新します。

ソリューションファイル

WKND サンプルテーマの完成したスタイルをダウンロードします。

フロントエンドパイプラインを使用したテーマのデプロイ deploy-theme

Cloud Manager のフロントエンドパイプラインを使用して、テーマの更新を AEM 環境にデプロイします。

https://video.tv.adobe.com/v/338722?quality=12&learn=on

ビデオの大まかな手順は次のとおりです。

  1. Cloud Manager で Git リポジトリを新規作成します。

  2. テーマソースプロジェクトを Cloud Manager の Git リポジトリに追加します。

    code language-shell 
    $ cd <PATH_TO_THEME_SOURCES_FOLDER>
$ git init -b main
$ git add .
$ git commit -m "initial commit"
$ git remote add origin <CLOUD_MANAGER_GIT_REPOSITORY_URL>

  3. フロントエンドコードをデプロイするフロントエンドパイプラインを Cloud Manager で設定します。

  4. フロントエンドパイプラインを実行して、アップデートをターゲット AEM 環境にデプロイします。

リポジトリの例

GitHub リポジトリの例をいくつか参考として使用できます。

おめでとうございます。 congratulations

おめでとうございます。これで、テーマを更新して AEM にデプロイしました。

次の手順 next-steps

AEM の開発を深く掘り下げ、基盤となるテクノロジーをさらに理解するには、AEM プロジェクトアーキタイプを使用してサイトを作成します。

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9