添加Clientlibs

添加ClientLibraryFolder (clientlibs)

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

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

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

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

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

3. 单击 确定

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

• 名称： 类别
• 类型： 字符串
• 值： 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. 单击 全部保存

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

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

#base=.
 style.css

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

body {

background-color: #b0c4de;

}

嵌入SCF Clientlibs

在 属性 选项卡 clientlibs 节点，输入多值字符串属性 嵌入. 这嵌入了必需的 用于SCF组件的客户端库(clientlibs). 在本教程中，添加了社区组件所需的许多clientlibs。

注释 由于需要考虑便利性与针对每个页面下载的clientlibs的大小/速度，因此这不一定是生产站点所需的使用方法。

如果仅在一个页面上使用一个功能，则可以直接在页面上包括该功能的完整clientlib，例如，

% ui:includeClientLib categories=cq.social.hbs.forum" %

在本例中，包括所有这些库以及更基本的SCF clientlibs（创作库的clientlibs）：

• 名称 : 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 现在应显示在存储库中：

在播放页面模板中包含Clientlibs

不包括 apps.an-scf-sandbox ClientLibraryFolder类别中，由于必需的Javascript和样式将不可用，因此SCF组件将无法正常工作或设置样式。

例如，如果不包含clientlibs，SCF注释组件将无样式显示：

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

include语句属于 head 部分 html 脚本。 默认 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"/>

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

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

目前保存您的工作

此时，存在一个极简沙盒，可能值得另存为包，这样在播放时，如果您的存储库损坏并且您想要重新开始，则可以关闭服务器，重命名或删除文件夹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**
    • 单击 完成

  • 单击 保存

• 单击 生成

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

Business.Adobe.com 资源

Personalized Experiences Embedded Charts Responsive Forms Managed Cloud Headless Cms Digital Asset Management