clientlib の追加

注意

AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。詳細は、技術サポート期間. サポートされているバージョンを見つけるここ.

ClientLibraryFolder(clientlibs) の追加

という名前の ClientLibraryFolder を作成します。 clientlibsサイトのページをレンダリングするために使用される JS と CSS を含む

この categoriesこのクライアントライブラリに与えられるプロパティ値は、コンテンツページからこの clientlib を直接含めたり、他の clientlib に埋め込んだりするために使用される識別子です。

使用 CRXDE Lite、展開 /etc/designs
右クリック an-scf-sandbox を選択し、 Create Node
- 名前：clientlibs
- 型：cq:ClientLibraryFolder
クリック OK

chlimage_1-220

内 プロパティ 新しい clientlibs ノードに、 categories プロパティ：

名前：categories
タイプ：String
値： apps.an-scf-sandbox
クリック追加
クリック すべて保存

注意：categories 値の前に「apps」を付けます。は、「所有アプリケーション」が/libs ではなく/apps フォルダー内にあることを識別する規則です。重要：プレースホルダーを追加 js.txt および css.txt ファイル。（正式には cq:ClientLibraryFolder ではありません。）

右クリック /etc/designs/an-scf-sandbox/clientlibs
選択 ファイルを作成…
入力名前: css.txt
選択 ファイルを作成…
入力名前: js.txt
クリック すべて保存

chlimage_1-221

css.txt と js.txt の最初の行は、以下のファイルのリストを検索する基本の場所を示します。

css.txt の内容を次のように設定してみます。

#base=.
 style.css

次に、clientlibs の下に style.css という名前のファイルを作成し、コンテンツを次のように設定します。

body {

background-color: #b0c4de;

}

SCF Clientlibs を埋め込む

内 プロパティ タブ clientlibs ノードで、複数値の String プロパティを入力します。 埋め込み. これにより、必要な SCF コンポーネントのクライアント側ライブラリ (clientlibs). このチュートリアルでは、コミュニティコンポーネントに必要な clientlib の多くを追加します。

注意各ページにダウンロードされる clientlib の利便性とサイズ/速度に関する考慮事項があるので、実稼動サイトで使用する方法にはこの方法が望ましい場合とそうでない場合があります。

1 つのページで 1 つの機能のみを使用する場合は、その機能の完全な clientlib を <% ui:includeClientLib categories=cq.social.hbs.forum" %> のように、直接ページに含めることができます。

この場合、すべてを含めるので、作成者の clientlib であるより基本的な SCF clientlibs を選択します。

名前：embed
型：String
Click Multi
値：cq.social.scf

<enter> ダイアログがポップアップ表示されます

クリック[+]各エントリの後に、次の clientlib カテゴリを追加します。
- cq.ckeditor
- cq.social.author.hbs.comments
- cq.social.author.hbs.forum
- cq.social.author.hbs.rating
- cq.social.author.hbs.reviews
- cq.social.author.hbs.voting
- クリック OK
クリック すべて保存

chlimage_1-222

このように /etc/designs/an-scf-sandbox/clientlibs がリポジトリに表示されます。

chlimage_1-223

PlayPage テンプレートに clientlibs を含める

を含めずに、 apps.an-scf-sandbox 必要な JavaScript とスタイルが使用できないので、ページの ClientLibraryFolder カテゴリ、SCF コンポーネントは機能しないか、スタイル設定されません。

例えば、clientlibs を含めないと、SCF コメントコンポーネントはスタイル設定されていない状態で表示されます。

chlimage_1-224

apps.an-scf-sandbox clientlibs を含めると、SCF コメントコンポーネントのスタイルが表示されます。

chlimage_1-225

include ステートメントは、 <head> セクション <html> スクリプトデフォルト foundation head.jsp には、オーバーレイ可能なスクリプトが含まれます。 headlibs.jsp.

headlibs.jsp をコピーし、clientlibs を含めます。

使用 CRXDE Liteを選択します。 /libs/foundation/components/page/headlibs.jsp
右クリックして「」を選択します。 コピー （または、ツールバーから「コピー」を選択します）。
/apps/an-scf-sandbox/components/playpage を選択します。
右クリックして「」を選択します。 貼り付け （または、ツールバーから「貼り付け」を選択します）。
ダブルクリック headlibs.jsp 開ける
ファイルの末尾に次の行を追加します。

<ui:includeClientLib categories="apps.an-scf-sandbox"/>
クリック すべて保存

<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
<% currentDesign.writeCssIncludes(pageContext); %>
<ui:includeClientLib categories="apps.an-scf-sandbox"/>

ブラウザーに Web サイトを読み込み、背景が青の影でないかどうかを確認します。

http://localhost:4502/content/an-scf-sandbox/en/play.html

chlimage_1-226

これまでの作業の保存

この時点では、最小限のサンドボックスが存在し、再生中にリポジトリが破損し、再起動したい場合は、サーバーをオフにし、crx-quickstart/フォルダーの名前を変更または削除し、サーバーをオンにし、この保存済みパッケージをアップロードしてインストールし、最も基本的な手順を繰り返す必要がありません。

このパッケージは、サンプルページの作成飛び込んで遊び始めるのを待ちきれない人のためのチュートリアル！

パッケージを作成するには：

送信者 CRXDE Lite、パッケージアイコン
クリック パッケージを作成
- パッケージ名: an-scf-sandbox-minimal-pkg
- バージョン：0.1
- グループ： <leave as="" default="">
- クリック OK
クリック編集
- 選択 フィルター タブ
  - クリック フィルターを追加
  - ルートパス： <browse to="" span="" id="0" translate="no" />>/apps/an-scf-sandbox
  - クリック完了
  - クリック フィルターを追加
  - ルートパス： <browse to="" span="" id="0" translate="no" />>/etc/designs/an-scf-sandbox
  - クリック完了
  - クリック フィルターを追加
  - ルートパス： <browse to="" span="" id="0" translate="no" />>/content/an-scf-sandbox
  - クリック完了
- 「保存」をクリックします。
クリック ビルド