创建名为clientlibs
的ClientLibraryFolder,其中将包含用于呈现站点页面的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
然后在名为style.css的clientlibs下创建一个文件,并将内容设置为
body {
background-color: #b0c4de;
}
在clientlibs
节点的属性选项卡中,输入多值字符串属性embed。 这为SCF组件](/docs/experience-manager-65/communities/client-customize.html?lang=zh-Hans#clientlibs-for-scf)嵌入必需的[客户端库(clientlibs)。 在本教程中,将添加社区组件所需的许多客户端库。
请注 意,这可能是生产站点所需的方法,也可能不是,因为每个页面下载的客户端库的方便性与大小/速度之间存在着差异。
如果仅在一个页面上使用一个功能,则可以直接在页面上包含该功能的完整clientlib,例如,
% ui:includeClientLib categories=cq.social.hbs.forum" %
在这种情况下,将它们全部包括在内,因此更基本的SCF客户端是作者的客户端:
名称 : 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类别,则SCF组件将无法正常工作,也无法设置样式,因为必需的Javascript和样式将不可用。
例如,如果不包括clientlib,则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
右键单击并选择复制(或从工具栏中选择复制)
选择 /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**
单击保存
单击Build
现在,您可以选择下载将其保存到磁盘并在其他位置选择上传包,还可以选择更多>复制,以便将沙箱推送到本地主机发布实例以扩展沙箱领域。