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.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;
}
ノードの「プロパティclientlibs
」タブで、複数値の String プロパティ embed を入力します。これにより、必要な SCF コンポーネントのクライアント側ライブラリ (clientlibs). このチュートリアルでは、コミュニティコンポーネントに必要な clientlib の多くを追加します。
ページごとにダウンロードされる clientlib の利点とサイズ/スピードに関する考慮事項があるので、このアプローチが実稼動サイトでの使用に適している場合もあれば、そうでない場合もある点に注意してください。
1 つのページで 1 つの機能のみを使用する場合は、<% ui:includeClientLib categories=cq.social.hbs.forum" %> など、その機能の完全な clientlib をページに直接含めることができます。
ここでは、それらをすべて挿入するので、オーサー clientlib である、より基本的な SCF clientlib が適しています。
名前:embed
型:String
Click Multi
値:cq.social.scf
<enter> ダイアログがポップアップ表示されます
クリック[+]各エントリの後に、次の 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
必要な 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
この時点で、必要最低限のサンドボックスが作成されているので、パッケージとして保存します。保存しておくと、操作中にリポジトリが破損してもう一度やり直したい場合に、サーバーの電源をオフにし、フォルダー crx-quickstart/ の名前変更または削除をおこなった後、サーバーの電源をオンにし、ここで保存したパッケージをアップロードしてインストールすることができます。つまり、これらの最も基本的な手順を繰り返さなくて済みます。
すぐに操作してみたい場合は、サンプルページの作成チュートリアルにこのパッケージがあります。
パッケージを作成するには:
送信者 CRXDE Lite、 パッケージアイコン
クリック パッケージを作成
an-scf-sandbox-minimal-pkg
0.1
「編集」をクリックします。
選択 フィルター タブ
/apps/an-scf-sandbox
/etc/designs/an-scf-sandbox
/content/an-scf-sandbox
「保存」をクリックします。
クリック ビルド
これで、 ダウンロード ディスクに保存し パッケージをアップロード 他の場所では、選択 詳細 > レプリケート サンドボックスを localhost パブリッシュインスタンスにプッシュしてサンドボックスの領域を拡張するために使用します。