clientlib の追加 add-clientlibs

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

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

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

が含まれる プロパティ 新しいのタブ clientlibs ノードに、と入力します カテゴリ プロパティ：

メモ : カテゴリ値の前に「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 コンポーネントのクライアントサイドライブラリ（clientlib）. このチュートリアルでは、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 ステートメントは、 head の節 html スクリプト。 デフォルト 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/フォルダーの名前を変更または削除し、サーバーをオンにして、この保存されたパッケージをアップロードしてインストールします。これらの最も基本的な手順を繰り返す必要はありません。

このパッケージはに存在します サンプルページの作成 ジャンプして再生を開始するのを待つことができない人のためのチュートリアル。

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

次を選択できます Download ディスクに保存するには、および パッケージをアップロード 他の場所で、を選択します。 詳細/ レプリケート サンドボックスを localhost パブリッシュインスタンスにプッシュしてサンドボックスの領域を拡張するには、次の手順を実行します。