clientlib の追加 add-clientlibs
ClientLibraryFolderの追加（clientlibs） add-a-clientlibraryfolder-clientlibs
サイトのページのレンダリングに使用するJavaScript （JS）とカスケーディングスタイルシート （CSS）を含むclientlibsという名前のClientLibraryFolderを作成します。
このクライアントライブラリに与えられるcategories プロパティ値は、このクライアントライブラリをコンテンツページから直接含めるか、他のクライアントライブラリに埋め込むために使用される識別子です。
-
CRXDE Liteを使用して、
/etc/designsを展開 -
an-scf-sandboxを右クリックし、Create Nodeを選択します- 名前：
clientlibs - 種類：
cq:ClientLibraryFolder
- 名前：
-
OKをクリック
新しいclientlibs ノードの「プロパティ」タブで、カテゴリ プロパティを入力します。
- 名前：categories
- タイプ : 文字列
- 値：apps.an-scf-sandbox
- 「追加」をクリック
- 「すべて保存」をクリック
注意：カテゴリの値の前に「apps.」を付けることは、「所有アプリケーション」が/libsではなく/apps フォルダーにあることを識別するための規則です。 重要：プレースホルダーjs.txtおよびcss.txt ファイルを追加してください。 （これらは正式にはcq:ClientLibraryFolderではありません）。
/etc/designs/an-scf-sandbox/clientlibsを右クリック- 「ファイルを作成…」を選択
- 名前：
css.txtを入力 - 「ファイルを作成…」を選択
- 名前：
js.txtを入力 - 「すべて保存」をクリック
css.txtおよびjs.txtの最初の行は、次のファイルのリストを検索するベースの場所を識別します。
css.txtのコンテンツをに設定してみてください
#base=.
style.css
次に、clientlibsの下にstyle.cssという名前のファイルを作成し、コンテンツをに設定します。
body {
background-color: #b0c4de;
}
SCF Clientlibsを埋め込む embed-scf-clientlibs
clientlibs ノードの「プロパティ」タブで、複数値の文字列プロパティ 埋め込みを入力します。 これには、SCF コンポーネント 🔗に必要な クライアントサイドライブラリ（clientlibs）が埋め込まれます。 このチュートリアルでは、Communities コンポーネントに必要な多くのクライアントライブラリが追加されています。
これは、利便性と、各ページに対してダウンロードされるクライアントライブラリのサイズや速度に関する考慮事項があるため、実稼動サイトで使用する目的のアプローチである場合とそうでない場合があります。
1つのページで1つの機能のみを使用する場合は、その機能の完全なclientlibをページに直接含めることができます。例：
% ui:includeClientLib categories=cq.social.hbs.forum" %
この場合、それらをすべて含めるので、オーサーのclientlibである、より基本的なSCF clientlibが好まれます。
-
名前：
embed -
種類：
String -
Multiをクリック -
値：
cq.social.scf-
ダイアログがポップアップ表示され，
各エントリの後で+をクリックして、次のclientlib カテゴリを追加します。cq.ckeditorcq.social.author.hbs.commentscq.social.author.hbs.forumcq.social.author.hbs.ratingcq.social.author.hbs.reviewscq.social.author.hbs.voting- OKをクリック
-
-
「すべて保存」をクリック
これで、/etc/designs/an-scf-sandbox/clientlibsがリポジトリに表示されます。
PlayPage テンプレートにClientlibsを含める include-clientlibs-in-playpage-template
ページにapps.an-scf-sandbox ClientLibraryFolder カテゴリを含めないと、必要なJavaScriptとCSS スタイルが使用できないため、SCF コンポーネントは機能せず、スタイルも設定されません。
例えば、clientlibsを含めずに、SCF コメントのコンポーネントのスタイルは設定されていません。
apps.an-scf-sandbox clientlibsが含まれると、SCF コメントコンポーネントのスタイルが設定されます。
include ステートメントは、html スクリプトのhead セクションに属しています。 既定の 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 サイトを読み込み、背景が青色の色合いではないかどうかを確認します。
https://localhost:4502/content/an-scf-sandbox/en/play.html
これまでの作業を保存する saving-your-work-so-far
この時点で、ミニマリストのサンドボックスが存在します。 パッケージとして保存する価値があるかもしれませんが、再生中にリポジトリが破損し、やり直したい場合は、サーバーをオフにすることができます。 次に、crx-quickstart/ フォルダーの名前を変更または削除し、サーバーの電源を入れ、この保存されたパッケージをアップロードしてインストールします。これらの最も基本的な手順を繰り返す必要はありません。
このパッケージは、 サンプルページの作成 チュートリアルに存在します。このチュートリアルは、ジャンプして再生を開始するのを待つことができないユーザー向けです。
パッケージを作成するには：
-
CRXDE Liteから、 パッケージアイコン をクリックします
-
「パッケージを作成」をクリックします
- パッケージ名：an-scf-sandbox-minimal-pkg
- バージョン：0.1
- グループ：
leave as default - OKをクリック
-
「編集」をクリックします
-
「フィルター」タブを選択
- 「フィルターを追加」をクリック
- ルートパス：
/apps/an-scf-sandboxを参照 - 「完了」をクリックします。
- 「フィルターを追加」をクリック
- ルートパス：
/etc/designs/an-scf-sandboxを参照 - 「完了」をクリックします。
- 「フィルターを追加」をクリック
- ルートパス：
/content/an-scf-sandbox**を参照 - 「完了」をクリックします。
-
「保存」をクリックします。
-
-
ビルドをクリックします
これで、ダウンロードを選択してディスクに保存し、パッケージを他の場所にアップロードし、詳細> レプリケートを選択して、サンドボックスをlocalhost パブリッシュインスタンスにプッシュし、サンドボックスの領域を拡張できます。