创建名为的ClientLibraryFolder clientlibs
其中将包含用于呈现网站页面的JS和CSS。
此 categories
为此客户端库指定的属性值是用于直接从内容页面包含此clientlib或将其嵌入其他clientlib的标识符。
使用 CRXDE Lite,展开 /etc/designs
右键单击 an-scf-sandbox
并选择 Create Node
clientlibs
cq:ClientLibraryFolder
单击 确定
在 属性 选项卡中的新 clientlibs
节点,输入 类别 属性:
注意:在类别值前面加上“apps”。 是一个约定,用于将“拥有的应用程序”标识为/apps文件夹中的内容,而不是/libs中的内容。 重要信息:添加占位符 js.tx
t和 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
节点,输入多值字符串属性 嵌入. 这嵌入了必需的 用于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
现在应显示在存储库中:
不包括 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:
使用 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"/>
在浏览器中加载您的网站,然后查看背景是否不是蓝色阴影。
https://localhost:4502/content/an-scf-sandbox/en/play.html
此时,存在一个极简沙盒,可能值得另存为包,这样在播放时,如果您的存储库损坏并且您想要重新开始,则可以关闭服务器,重命名或删除文件夹crx-quickstart/ ,打开服务器,上载并安装此保存的包,而不必重复这些最基本的步骤。
此包已存在于 创建示例页面 教程适用于迫不及待地想跳进来开始玩游戏的人!…
要创建资源包,请执行以下操作:
在CRXDE Lite中,单击 包图标
单击 创建包
leave as default
单击 编辑
选择 筛选器 选项卡
/apps/an-scf-sandbox
/etc/designs/an-scf-sandbox
/content/an-scf-sandbox**
单击 保存
单击 生成
现在,您可以选择 下载 将其保存到磁盘,并 上传包 其他位置,以及选择 更多>复制 以将沙盒推送到本地主机发布实例以扩展沙盒的领域。