clientlibs
という名前の ClientLibraryFolder を作成し、ここに、サイトのページをレンダリングするために使用される JS および CSS を格納します。
このクライアントライブラリに指定する categories
プロパティの値は、clientlib をコンテンツページから直接含めたり、その他の clientlib に埋め込んだりする場合に使用される識別子です。
CRXDE Liteを使用して/etc/designs
を展開します
an-scf-sandbox
を右クリックし、Create Node
を選択します
clientlibs
cq:ClientLibraryFolder
「OK」をクリックします。
新しい ノードの「プロパティclientlibs
」タブで、categories プロパティを入力します。
注意:categories 値の前に「apps.」を付けるのは、「所有アプリケーション」が /libs ではなく、/apps フォルダー内にあることを示すための規則です。重要:プ追加レースホルダーjs.tx
tと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;
}
ノードの「プロパティclientlibs
」タブで、複数値の String プロパティ embed を入力します。これにより、SCFコンポーネント](/docs/experience-manager-65/communities/client-customize.html?lang=ja#clientlibs-for-scf)に必要な[クライアント側ライブラリ(clientlibs)が埋め込まれます。 このチュートリアルでは、Communitiesコンポーネントに必要なclientlibの多くが追加されます。
ページごとにダウンロードされる clientlib の利点とサイズ/スピードに関する考慮事項があるので、このアプローチが実稼動サイトでの使用に適している場合もあれば、そうでない場合もある点に注意してください。
1つのページで1つの機能しか使用しない場合は、その機能の完全なclientlibを直接ページに含めることができます。例えば、
% ui:includeClientLib categories=cq.social.hbs.forum" %
この場合は、すべてを含め、より基本的なSCFクライアントライブラリを作成者のclientlibとして扱うことをお勧めします。
名前:embed
型:String
クリック Multi
値:cq.social.scf
ダイアログが表示されます。
各エントリの後に+
をクリックして、次の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
「すべて保存」をクリックします
/etc/designs/an-scf-sandbox/clientlibs
は、次のようにリポジトリに表示されます。
apps.an-scf-sandbox
ClientLibraryFolderカテゴリをページに含めないと、SCFコンポーネントは機能しなくなり、必要なJavaScriptとスタイルが使用できなくなります。
例えば、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
この時点では、最小限のサンドボックスが存在し、再生中にリポジトリが破損し、開始し直したい場合に、サーバーのオフ、crx-quickstart/フォルダーの名前の変更や削除、サーバーのオン、アップロード、インストールを行う際に、最も基本的な手順を繰り返す必要がない。
すぐに操作してみたい場合は、サンプルページの作成チュートリアルにこのパッケージがあります。
パッケージを作成するには:
CRXDE Liteからパッケージアイコンをクリックします。
「パッケージを作成」をクリックします
leave as default
「編集」をクリックします。
「フィルター」タブを選択
/apps/an-scf-sandbox
を参照/etc/designs/an-scf-sandbox
を参照/content/an-scf-sandbox**
を参照「保存」をクリックします。
「ビルド」をクリックします
これで、「ダウンロード」を選択してディスクに保存し、パッケージをアップロード他に保存することができます。また、詳細>複製を選択して、サンドボックスの領域を拡張できます。