Show Menu
トピック×

clientlib の追加

Add a ClientLibraryFolder (clientlibs)

clientlibs という名前の ClientLibraryFolder を作成し、ここに、サイトのページをレンダリングするために使用される JS および CSS を格納します。
このクライアントライブラリに指定する categories プロパティの値は、clientlib をコンテンツページから直接含めたり、その他の clientlib に埋め込んだりする場合に使用される識別子です。
  1. Using CRXDE Lite , expand /etc/designs
  2. 右クリックし an-scf-sandbox て、 Create Node
    • 名前: clientlibs
    • タイプ: cq:ClientLibraryFolder
  3. OK 」をクリックします。
新しい ノードの「 ​プロパティ clientlibs 」タブで、 categories プロパティを入力します。
  • 名前: categories
  • タイプ: String
  • 値: apps.an-scf-sandbox
  • Click Add
  • Click Save All
注意:categories 値の前に「apps.」を付けるのは、「所有アプリケーション」が /libs ではなく、/apps フォルダー内にあることを示すための規則です。重要:プレースホルダーとフ js.txt ァイルを追 css.txt 加します。 (正式にはcq:ClientLibraryFolderが存在しない場合は除きます)。
  1. 右クリックして /etc/designs/an-scf-sandbox/clientlibs
  2. Select Create File...
  3. Enter Name : css.txt
  4. Select Create File...
  5. Enter Name : js.txt
  6. Click Save All
css.txt および js.txt の最初の行によって、後述のファイルのリストが見つかる基本の場所が特定されます。
css.txt の内容を次のように設定します。:
#base=.
 style.css

次に、clientlibsの下にstyle.cssという名前のファイルを作成し、内容を次のように設定します。
body {
background-color: #b0c4de;
}

SCF clientlib の埋め込み

ノードの「 ​プロパティ clientlibs 」タブで、複数値の String プロパティ embed を入力します。This will embed the necessary client-side libraries (clientlibs) for SCF components . このチュートリアルでは、Communitiesコンポーネントに必要なclientlibの多くを追加します。
ページごとにダウンロードされる clientlib の利点とサイズ/スピードに関する考慮事項があるので、このアプローチが実稼動サイトでの使用に適している場合もあれば、そうでない場合もある点に​ 注意してください
1 つのページで 1 つの機能のみを使用する場合は、<% ui:includeClientLib categories=cq.social.hbs.forum" %> など、その機能の完全な clientlib をページに直接含めることができます。
ここでは、それらをすべて挿入するので、オーサー clientlib である、より基本的な SCF clientlib が適しています。
  • 名前: embed
  • タイプ: String
  • クリック 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
    • OK 」をクリックします。
  • Click Save All
This is how /etc/designs/an-scf-sandbox/clientlibs should now appear in the repository:

playpage テンプレートに clientlibs を含める

Without including the apps.an-scf-sandbox ClientLibraryFolder category on the page, the SCF components will not be functional nor styled as the necessary Javascript(s) and style(s) will not be available.
例えば、clientlibs を挿入しなかった場合、SCF コメントコンポーネントは、スタイルが設定されていない状態で表示されます。
apps.an-scf-sandbox clientlibs を含めると、SCF コメントコンポーネントは、スタイルが設定された状態で表示されます。
インクルードステートメントは、 」セクション script. The default foundation head.jsp includes a script that can be overlaid: headlibs.jsp .
headlibs.jsp をコピーし、clientlibs を含めます。
  1. Using CRXDE Lite , select /libs/foundation/components/page/headlibs.jsp
  2. Right click and select Copy (or select Copy from the tool bar)
  3. /apps/an-scf-sandbox/components/playpage
  4. Right click and select Paste (or select Paste from the tool bar)
  5. Double click on headlibs.jsp to open it
  6. ファイルの末尾に次の行を追加します
    <ui:includeClientLib categories="apps.an-scf-sandbox"/>
  7. Click Save All
<%@ 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 サイトをブラウザーに読み込み、背景が青の網掛けでないかどうかを確認します。

これまでの作業内容の保存

この時点で、必要最低限のサンドボックスが作成されているので、パッケージとして保存します。保存しておくと、操作中にリポジトリが破損してもう一度やり直したい場合に、サーバーの電源をオフにし、フォルダー crx-quickstart/ の名前変更または削除をおこなった後、サーバーの電源をオンにし、ここで保存したパッケージをアップロードしてインストールすることができます。つまり、これらの最も基本的な手順を繰り返さなくて済みます。
すぐに操作してみたい場合は、 サンプルページの作成 チュートリアルにこのパッケージがあります。
パッケージを作成するには:
  • From CRXDE Lite , click the Package icon
  • Click Create Package
    • パッケージ名: an-scf-sandbox-minimal-pkg
    • バージョン: 0.1
    • グループ:<デフォルトのまま>
    • OK 」をクリックします。
  • 編集 」をクリックします。
    • Select Filters tab
      • Click Add filter
      • Root Path: <browse to /apps/an-scf-sandbox >
      • Click Done
      • Click Add filter
      • Root Path: <browse to /etc/designs/an-scf-sandbox >
      • Click Done
      • Click Add filter
      • Root Path: <browse to /content/an-scf-sandbox >
      • Click Done
    • 保存 」をクリックします。
  • Click Build
Now you can select Download to save it to disk and Upload Package elsewhere, as well as select More > Replicate in order to push the sandbox to a localhost publish instance to expand the realm of your sandbox.