添加Clientlibs add-clientlibs

添加ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs

创建一个名为clientlibs的ClientLibraryFolder,其中包含用于呈现网站页面的JavaScript (JS)和层叠样式表(CSS)。

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

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

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

    • 名称:clientlibs
    • 类型: cq:ClientLibraryFolder
  3. 单击​ 确定

add-client-library

在新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. 单击​ 全部保存

clientlibs-css

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

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

#base=.
 style.css

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

body {

background-color: #b0c4de;

}

嵌入SCF Clientlibs embed-scf-clientlibs

clientlibs节点的​ 属性 ​选项卡中,输入多值字符串属性​ embed。 这会为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
      • 单击​ 确定
  • 单击​ 全部保存

scf-clientlibs

/etc/designs/an-scf-sandbox/clientlibs现在应这样显示在存储库中:

scf-clientlibs-view

在PlayPage模板中包含Clientlibs include-clientlibs-in-playpage-template

如果页面上不包含apps.an-scf-sandbox ClientLibraryFolder类别,则SCF组件将无法正常运行,也无法设置样式,因为必要的JavaScript和CSS样式将不可用。

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

clientlibs-comment

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

clientlibs-comment-styled

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

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

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

社区游戏

目前保存您的工作 saving-your-work-so-far

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

  • 单击​ 生成

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

recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791