添加Clientlibs

添加ClientLibraryFolder(clientlibs)

创建名为clientlibs的ClientLibraryFolder，其中将包含用于呈现站点页面的JS和CSS。

赋予此客户端库的categories属性值是用于从内容页面直接包含此clientlib或将其嵌入到其他clientlib的标识符。

  1. 使用​CRXDE Lite​展开/etc/designs

  2. 右键单击an-scf-sandbox并选择Create Node

    • 名称: clientlibs
    • 类型: cq:ClientLibraryFolder

  3. 单击​确定

chlimage_1-220

在新clientlibs节点的​属性​选项卡中，输入​categories​属性：

  • 名称：类别
  • 类型：字符串
  • 值：apps.an scf-sandbox
  • 单击​添加
  • 单击​保存全部

注意：用“apps”预先呈现类别价值。 是用于将“拥有的应用程序”标识为位于/apps文件夹（而非/libs）中的约定。 重要：添加占位符js.txt和css.txt文件。 （没有它们，它不是正式的cq:ClientLibraryFolder。）

  1. 右键单击​/etc/designs/an-scf-sandbox/clientlibs

  2. 选择​创建文件……

  3. 输入​名称:css.txt

  4. 选择​创建文件……

  5. 输入​名称:js.txt

  6. 单击​保存全部

chlimage_1-221

css.txt和js.txt的第一行标识了从中找到以下一列表文件的基本位置。

尝试将css.txt的内容设置为：

#base=.
 style.css

然后，在名为style.css的clientlibs下创建一个文件，并将内容设置为：

body {

background-color: #b0c4de;

}

嵌入SCF客户端库

在clientlibs节点的​属性​选项卡中，输入多值字符串属性​embed。 这将为SCF组件](client-customize.md#clientlibs-for-scf)嵌入必需的[客户端库(clientlibs)。 在本教程中，我们将添加社区组件所需的许多客户端库。

请注 意，这可能是生产站点所需的方法，也可能不是，因为每个页面下载的客户端库的方便性与大小／速度之间存在着差异。

如果仅在一个页面上使用一个功能，则可以直接在页面上包含该功能的完整clientlib，例如，<% ui:includeClientLib类别=cq.social.hbs.forum" %>

在这种情况下，我们将其全部包含在内，因此我们更希望使用更基本的SCF客户端，即作者的客户端库：

  • 名称: 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
    • 单击​确定

  • 单击​保存全部

chlimage_1-222

这是/etc/designs/an-scf-sandbox/clientlibs现在在存储库中的显示方式：

chlimage_1-223

在PlayPage模板中包含Clientlibs

如果页面中不包含apps.an-scf-sandbox ClientLibraryFolder类别，则SCF组件将无法正常工作，也无法设置样式，因为必需的Javascript和样式将不可用。

例如，如果不包括clientlib，则SCF注释组件将显示为未设置样式：

chlimage_1-224

包含apps.an-scf-sandbox clientlibs后，SCF注释组件将显示样式：

chlimage_1-225

include语句属于<html>脚本的<head>部分。 默认​foundation head.jsp​包含可以覆盖的脚本：headlibs.jsp。

复制headlibs.jsp并包含clientlibs:

  1. 使用​CRXDE Lite，选择​/libs/foundation/components/page/headlibs.jsp

  2. 右键单击并选择​复制（或从工具栏中选择复制）

  3. 选择 /apps/an-scf-sandbox/components/playpage

  4. 右键单击并选择​粘贴（或从工具栏中选择粘贴）

  5. 多次单击​headlibs.jsp​以打开它

  6. 在文件末尾附加以下行

    <ui:includeClientLib categories="apps.an-scf-sandbox"/>

  7. 单击​保存全部

<%@ 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"/>

在浏览器中加载您的网站并查看背景是否不是蓝色阴影。

http://localhost:4502/content/an-scf-sandbox/en/play.html

chlimage_1-226

保存您的工作到

此时，存在极简的沙箱，可能值得保存为包，这样，在播放时，如果存储库损坏并想要开始，您可以关闭服务器，重命名或删除文件夹crx-quickstart/，打开服务器，上传并安装此保存的包，无需重复这些最基本的步骤。

此包存在于为迫不及待地跳入和开始播放的用户创建示例页面教程中……

要创建包，请执行以下操作：

  • 从​CRXDE Lite​中，单击包图标

  • 单击​创建包

    • 包名称: an-scf-sandbox-minimal-pkg
    • 版本号: 0.1
    • 组：<leave as default>
    • 单击​确定

  • 单击​编辑

    • 选择​过滤器​选项卡

      • 单击​添加过滤器
      • 根路径：<浏览至/apps/an-scf-sandbox
      • 单击​完成
      • 单击​添加过滤器
      • 根路径：<浏览至/etc/designs/an-scf-sandbox
      • 单击​完成
      • 单击​添加过滤器
      • 根路径：<浏览至/content/an-scf-sandbox
      • 单击​完成

    • 单击​保存

  • 单击​Build

现在，您可以选择​下载​将其保存到磁盘并在其他位置选择​上传包，还可以选择​更多>复制，以便将沙箱推送到本地主机发布实例以扩展沙箱领域。

在此页面上