clientlib の追加 add-clientlibs

ClientLibraryFolder （clientlibs）の追加 add-a-clientlibraryfolder-clientlibs

サイトのページのレンダリングに使用するJavaScript（JS）およびカスケードスタイルシート（CSS）を含む、clientlibs という名前の ClientLibraryFolder を作成します。

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

新しい clientlibs ノードの プロパティ タブで、categories プロパティを入力します。

メモ : カテゴリ値の前に「apps」を付けます。 「所有しているアプリケーション」を/libs ではなく/apps フォルダー内にあるものとして識別する規則です。 重要：プレースホルダー js.txt ファイルと css.txt ファイルを追加します。 （公式には、これらを持たない cq:ClientLibraryFolder ではありません。）

css.txt と js.txt の最初の行は、次のファイルのリストが見つかるベースの場所を示しています。

css.txt のコンテンツをに設定してみてください

#base=.
 style.css

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

body {

background-color: #b0c4de;

}

SCF Clientlibs の埋め込み embed-scf-clientlibs

clientlibs ノードの プロパティ タブで、複数値の文字列プロパティ embed を入力します。 これにより、必要な SCF コンポーネントのクライアントサイドライブラリ（clientlibs）が組み込まれます。 このチュートリアルでは、Communities コンポーネントに必要な clientlib の多くを追加します。

すべてのページにダウンロードされる clientlibs の利便性とサイズ/速度を考慮する必要があるので、実稼動サイトで使用する場合は、この方法が望ましい場合もあれば、そうでない場合もあります。

1 つのページで 1 つの機能のみを使用する場合、その機能の完全な clientlib をページに直接含めることができます。例：

% ui:includeClientLib categories=cq.social.hbs.forum" %

この場合、それらをすべて含めることによって、オーサー clientlibs であるより基本的な SCF clientlibs が推奨されます。

リポジトリーでは、/etc/designs/an-scf-sandbox/clientlibs は次のように表示されます。

プレイページテンプレートにクライアントライブラリを含める include-clientlibs-in-playpage-template

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

例えば、clientlib を含めない場合、SCF コメントコンポーネントのスタイルは未設定になります。

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

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

headlibs.jsp をコピーして clientlibs を含める：

<%@ 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/フォルダーの名前を変更または削除し、サーバーをオンにして、この保存されたパッケージをアップロードしてインストールします。これらの最も基本的な手順を繰り返す必要はありません。

このパッケージは、すぐに作業に取りかかって再生を開始できないユーザー向けの サンプルページの作成チュートリアルに存在しています。

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

これで、「ダウンロード 」を選択してディスクに保存し、「パッケージをアップロード を別の場所に保存できます。そして、詳細/レプリケート を選択して、サンドボックスを localhost パブリッシュインスタンスにプッシュして、サンドボックスの領域を拡張できます。