创建名为clientlibs
的ClientLibraryFolder,其中将包含用于呈现网站页面的JS和CSS。
给予此客户端库的categories
属性值是用于从内容页面直接包含此clientlib或将其嵌入到其他clientlib中的标识符。
使用CRXDE Lite,展开/etc/designs
右键单击an-scf-sandbox
并选择Create Node
clientlibs
cq:ClientLibraryFolder
单击确定
在新clientlibs
节点的属性选项卡中,输入categories
属性:
注意:使用“apps”为类别值添加前缀。 是将“拥有的应用程序”标识为位于/apps文件夹中,而不是/libs中的约定。 重要信息:添加占位符js.txt
和css.txt
文件。 (没有cq:ClientLibraryFolder,它不是正式的。)
右键单击/etc/designs/an-scf-sandbox/clientlibs
选择创建文件……
输入名称:css.txt
选择创建文件……
输入名称:js.txt
单击Save All
css.txt和js.txt的第一行用于标识可从中找到以下文件列表的基本位置。
尝试将css.txt的内容设置为:
#base=.
style.css
然后,在名为style.css的clientlibs下创建文件,并将内容设置为:
body {
background-color: #b0c4de;
}
在Properties选项卡的clientlibs
节点中,输入多值String属性embed。 这将为SCF组件🔗嵌入必需的客户端库(clientlibs)。 在本教程中,我们将为社区组件添加许多必需的clientlib。
请注意,这可能是生产站点所需的方法,也可能不是,因为考虑到了方便性与为每个页面下载的clientlib的大小/速度。
如果只在一个页面上使用一项功能,则可以直接在页面上包含该功能的完整clientlib,例如<% ui:includeClientLib类别=cq.social.hbs.forum" %>
在本例中,我们将全部包含在内,因此,我们希望使用更基本的SCF clientlib,即作者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
单击Save All
下面显示了/etc/designs/an-scf-sandbox/clientlibs
在存储库中的显示方式:
如果页面上没有apps.an-scf-sandbox
ClientLibraryFolder类别,则SCF组件将无法正常工作,也无法按照必需的Javascript设置样式,并且样式将不可用。
例如,如果不包含clientlibs,则SCF注释组件将显示为未设置样式:
在包含apps.an-scf-sandbox clientlibs后,SCF评论组件会显示样式:
include语句属于<html>
脚本的<head>
部分。 默认的foundation head.jsp
包含一个可以覆盖的脚本:headlibs.jsp
。
复制headlibs.jsp并包含clientlibs:
使用CRXDE Lite,选择/libs/foundation/components/page/headlibs.jsp
右键单击并选择Copy(或从工具栏中选择Copy)
选择 /apps/an-scf-sandbox/components/playpage
右键单击并选择粘贴(或从工具栏中选择粘贴)
双击headlibs.jsp
以将其打开
在文件末尾附加以下行
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
单击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"/>
在浏览器中加载您的网站,并查看背景是否不是蓝色阴影。
http://localhost:4502/content/an-scf-sandbox/en/play.html
此时,存在一个极简主义的沙箱,可能值得另存为一个包,这样在播放时,如果您的存储库已损坏并且您希望重新开始,您就可以关闭服务器、重命名或删除文件夹crx-quickstart/、打开服务器、上载并安装此保存的包,并且不必重复这些最基本的步骤。
创建示例页面教程中存在此包,教程针对的是那些迫不及待地想要跳入并开始播放的用户……
要创建资源包,请执行以下操作:
从CRXDE Lite中,单击包图标
单击创建包
an-scf-sandbox-minimal-pkg
0.1
单击编辑
选择Filters选项卡
/apps/an-scf-sandbox
>/etc/designs/an-scf-sandbox
>/content/an-scf-sandbox
>单击Save
单击Build
现在,您可以选择Download将其保存到磁盘,然后选择其他位置的Upload Package,还可以选择More > Replicate,以将沙盒推送到本地主机发布实例以扩展沙盒的领域。