clientlib の追加 add-clientlibs
ClientLibraryFolder(clientlibs) の追加 add-a-clientlibraryfolder-clientlibs
という名前の ClientLibraryFolder を作成します。 clientlibsサイトのページをレンダリングするために使用される JS と CSS を含む
この categoriesこのクライアントライブラリに与えられるプロパティ値は、コンテンツページからこの clientlib を直接含めたり、他の clientlib に埋め込んだりするために使用される識別子です。
-
使用 CRXDE Lite、展開
/etc/designs -
右クリック
an-scf-sandboxを選択し、Create Node- 名前：
clientlibs - 型：
cq:ClientLibraryFolder
- 名前：
-
クリック OK
内 プロパティ 新しい 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 -
クリック すべて保存
css.txt と js.txt の最初の行は、以下のファイルのリストを検索する基本の場所を示します。
css.txt の内容を次のように設定してみます。
#base=.
style.css
次に、clientlibs の下に style.css という名前のファイルを作成し、コンテンツを次のように設定します。
body {
background-color: #b0c4de;
}
SCF Clientlibs を埋め込む embed-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.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 必要な JavaScript とスタイルが使用できないので、ページの ClientLibraryFolder カテゴリ、SCF コンポーネントは機能しないか、スタイル設定されません。
例えば、clientlibs を含めないと、SCF コメントコンポーネントはスタイル設定されていない状態で表示されます。
apps.an-scf-sandbox clientlibs を含めると、SCF コメントコンポーネントのスタイルが表示されます。
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
これまでの作業の保存 saving-your-work-so-far
この時点では、最小限のサンドボックスが存在し、再生中にリポジトリが破損し、再起動したい場合は、サーバーをオフにし、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 - クリック 完了
-
「保存」をクリックします。
-
-
クリック ビルド
これで、 ダウンロード ディスクに保存し パッケージをアップロード 他の場所では、選択 詳細 > レプリケート サンドボックスを localhost パブリッシュインスタンスにプッシュしてサンドボックスの領域を拡張するために使用します。