AEM Guides 拡張機能パッケージのインストールと使用
拡張機能を使用すると、AEMガイドアプリをニーズに合わせてカスタマイズできます。 この拡張機能フレームワークは、AEMガイド v4.3（オンプレミス）および 2310（クラウド）でサポートされます。
要件
このパッケージにはが必要です git bash および npm
インストール
AEM Guides フレームワークのインストールをブートストラップする最も簡単な方法は、cli を使用することです
npx @adobe/create-guides-extension
カスタマイズコードの追加
-
で拡張する各コンポーネントのコードファイルを追加します。
src/ディレクトリ。 一部のサンプルファイルは既に追加されています。 -
現在は、
index.ts次の場所にあるファイル：src/ディレクトリ：- 次をインポート：
.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
- Adobe Analytics の
propertiesノードで、「 」を選択します。Multi次のプロパティ名を追加します。categories
タイプ：String []
値：apps.fmdita.review_overrides,apps.fmdita.xml_editor.page_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+リフレッシュ）を行ってください。
AEMを開き、右クリックして「 」をクリックします。 Inspect
ソースに移動し、 [node_name].js （例： extensions.js）ファイル。 Ctrl/Cmd+D キーを押して、ファイルを検索します。 次の場合、 .js ファイルは、貼り付けた JS コードを含む dist/guides-extension.umd.cjs または dist/guides-extension.js、設定が完了している