AEM Guides拡張機能パッケージのインストールと使用
拡張機能を使用すると、AEM Guides アプリをニーズに合わせてカスタマイズできます。 この拡張機能フレームワークは、AEM Guides v4.3 以降（オンプレミス）および 2310 （クラウド）でサポートされます。
要件
このパッケージには、git bash と npm が必要です
インストール
AEM Guides フレームワークのインストールをブートストラップする最も簡単な方法は、cli を使用することです
npx @adobe/create-guides-extension
カスタマイズコードの追加
-
src/ディレクトリに拡張する各コンポーネントのコードファイルを追加します。 いくつかのサンプル ファイルは既に追加されています。 -
src/ディレクトリにあるindex.tsファイルで、次の操作を行います。- カスタマイズ内容を追加した
.tsファイルをビルドに読み込みます。 window.extensionへの読み込みの追加- カスタマイズしたコンポーネントの
idと、対応する読み込みをtcx extensionsに登録します - サンプル
/src/index.tsを参照してください。
- カスタマイズ内容を追加した
カスタマイズされたコードの作成
-
ルートディレクトリで
npm run buildを実行します。 ディレクトリには、次の 3 つのファイルがdist/ります。build.cssguides-extension.jsguides-extension.umd.cjs
AEMへのカスタマイズの追加
CRXDEcrx/de/index.jsp#/に移動appsフォルダーの下に、タイプcq:ClientLibraryFolderの新しいノードを作成します
- ノードの
propertiesで、を選択して次のプロパティMulti追加します
名前：categories
型：String []
値：apps.fmdita.review_overrides、apps.fmdita.xml_editor.page_overrides
apps.fmdita.penultimate.xml_editor.page_overrides および apps.fmdita.review_overrides になります
- ビルドされた js を追加するには、新しいファイル（例：上記で作成されたノードの
tcx1.js）を作成します。 ここでは、dist/guides-extension.umd.cjsまたはdist/guides-extension.jsからコードを追加します。 次に、js.txtという新しいファイルを作成します。ここでは、js ファイルの名前を追加します。この場合、名前は次のようになります。
#base=.
tcx1.js
- 構築された css を追加するには、例えば、新しいファイルを上記で作成したノードに
tcx1.css作成します。 ここでは、dist/build.cssからコードを追加します。 次に、css.txtという新しいファイルを作成します。ここでは、css ファイルの名前を追加します。この場合、名前は次のようになります。
#base=.
tcx1.css
- カスタマイズ内容を含むアプリを
shift + refreshしく読み込んでください。
トラブルシューティング
上記のすべての手順が正しく実行されていることを確認します。
コードを tcx.js に追加した後、必ずハードリフレッシュ（shift+refresh）を実行してください。
次に、AEMを開き、右クリックして「Inspect」をクリックします
ソースに移動し、[node_name].js （例：extensions.js）ファイルを検索します。 Control / Cmd + D を実行してファイルを検索します。 dist/guides-extension.umd.cjs または dist/guides-extension.js から貼り付けた JS コードを含んだ .js ファイルが存在する場合、セットアップは完了です