<%@taglib prefix="ui" uri="https://www.adobe.com/taglibs/granite/ui/1.0" %>
<ui:includeClientLib categories="<%= categories %>" />
创建客户端库文件夹 creating-client-library-folders
创建 cq:ClientLibraryFolder 节点，用于定义JavaScript和层叠样式表库并使其可用于HTML页。 使用 categories 节点的属性，用于标识其所属的库类别。
该节点包含一个或多个在运行时合并到单个JS和/或CSS文件中的源文件。 生成的文件的名称是节点名称，带有 .js 或 .css 文件扩展名。 例如，名为的库节点 cq.jquery 生成的文件中的结果，名为 cq.jquery.js 或 cq.jquery.css.
客户端库文件夹包含以下项目：
有关特定于构件客户端库的要求的信息，请参阅 使用和扩展小组件.
Web客户端必须具有权限才能访问 cq:ClientLibraryFolder 节点。 您还可以从存储库的安全区域公开库（请参阅下面的嵌入其他库的代码）。
覆盖/lib中的库 overriding-libraries-in-lib
位于下面的客户端库文件夹 /apps 优先于中类似的同名文件夹 /libs. 例如， /apps/cq/ui/widgets 优先于 /libs/cq/ui/widgets. 如果这些库属于同一类别，则使用下面的库 /apps 已使用。
查找客户端库文件夹并使用代理客户端库Servlet locating-a-client-library-folder-and-using-the-proxy-client-libraries-servlet
在以前的版本中，客户端库文件夹位于下方 /etc/clientlibs 在存储库中。 这仍受支持，但建议现在将客户端库位于 /apps. 这是为了在其他脚本附近找到客户端库，这些脚本通常位于下方 /apps 和 /libs.
客户端库文件夹下的静态资源必须位于名为的文件夹中 资源. 如果文件夹下没有静态资源，例如图像 资源，无法在发布实例上引用它。 示例如下： https://localhost:4503/etc.clientlibs/geometrixx/components/clientlibs/resources/example.gif
对于下的客户端库 /apps 要访问，将使用代理servelt。 仍会在客户端库文件夹上强制执行ACL，但Servlet允许通过读取内容 /etc.clientlibs/ 如果 allowProxy 属性设置为 true.
如果静态资源位于客户端库文件夹下的资源下，则只能通过代理访问。
打开文件并键入以下文本以标识源文件路径的根：
#base=*[root]*
替换* [root]*以及包含源文件的文件夹的路径（相对于TXT文件）。 例如，当源文件与TXT文件位于同一文件夹时，请使用以下文本：
#base=.
以下代码将根设置为下面名为mobile的文件夹 cq:ClientLibraryFolder 节点：
#base=mobile
在以下行上 #base=[root]，键入源文件相对于根的路径。 将每个文件名放在单独的一行中。
单击 全部保存。
链接到依赖项 linking-to-dependencies
当客户端库文件夹中的代码引用其他库时，将其他库标识为依赖项。 在JSP中， ui:includeClientLib 引用您的客户端库文件夹的标记会导致HTML代码包含指向生成的库文件和依赖项的链接。
依赖项必须是另一个 cq:ClientLibraryFolder. 要识别依赖关系，请将属性添加到 cq:ClientLibraryFolder 节点具有以下属性：
嵌入来自其他库的代码 embedding-code-from-other-libraries
您可以将来自客户端库的代码嵌入到另一个客户端库中。 在运行时，生成的嵌入库的JS和CSS文件包含嵌入库的代码。
嵌入代码可用于提供对存储在存储库安全区域中的库的访问权限。
特定于应用程序的客户端库文件夹 app-specific-client-library-folders
最佳做法是将所有与应用程序相关的文件保留在下面的应用程序文件夹中 /apps. 拒绝网站访客访问 /apps 文件夹。 为满足这两个最佳实践，请在下面创建一个客户端库文件夹 /apps，并使其可通过代理servlet访问，如下所述 查找客户端库文件夹并使用代理客户端库Servlet.
使用类别属性可标识要嵌入的客户端库文件夹。 要嵌入库，请向嵌入中添加属性 cq:ClientLibraryFolder 节点，使用以下属性属性：
<script type="text/javascript" src="/etc/clientlibs/granite/jquery.js"></script>
<script type="text/javascript" src="/etc/clientlibs/granite/utils.js"></script>
<script type="text/javascript" src="/etc/clientlibs/granite/jquery/granite.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/jquery.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/shared.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/personalization/kernel.js"></script>
在这种情况下，有必要将所有所需的客户端库代码合并到单个文件中，以便减少页面加载上的来回请求数量。 要执行此操作，您可以 embed 将所需的库插入到您应用程序特定的客户端库中，使用的嵌入属性 cq:ClientLibraryFolder 节点。
AEM中包含以下客户端库类别。 您应该仅嵌入运行特定站点所需的那些项目。 但是， 您应保持此处列出的顺序：
personalization.core.kernel
personalization.clientcontext.kernel
personalization.stores.kernel
personalization.kernel
personalization.clientcontext
personalization.stores
cq.collab.comments
cq.collab.feedlink
cq.collab.ratings
cq.collab.toggle
cq.collab.forum
cq.cleditor
padding: 0;
margin: 0;
background: url(../../../apps/myapp/clientlib/styles/images/bg-full.jpg) no-repeat center top;
width: 100%;
将库用于特定移动组 using-a-library-for-specific-mobile-groups
使用 channels 客户端库文件夹的属性，用于标识使用该库的移动组。 此 channels 当针对不同的设备功能设计同一类别的库时，属性非常有用。
要将客户端库文件夹与设备组相关联，请将属性添加到 cq:ClientLibraryFolder 节点具有以下属性：
使用预处理器 using-preprocessors
AEM支持可插拔的预处理器，并且随附支持 YUI压缩机 适用于CSS和JavaScript和 Google Closure Compiler (GCC) 将YUI设置为AEM默认预处理器的JavaScript。
可插拔预处理器允许灵活使用，包括：
config:= mode ":" processorName options*;
mode:= "default" | "min";
processorName := "none" | <name>;
options := ";" option;
option := name "=" value;
failOnWarning (defaults to "false")
languageIn (defaults to "ECMASCRIPT5")
languageOut (defaults to "ECMASCRIPT5")
compilationLevel (defaults to "simple") (can be "whitespace", "simple", "advanced")
AEM提供了几种用于调试和测试客户端库文件夹的工具。
请参阅嵌入的文件 see-embedded-files
要跟踪嵌入代码的来源，或确保嵌入的客户端库产生预期的结果，您可以查看运行时嵌入的文件的名称。 要查看文件名，请附加 debugClientLibs=true 参数到网页URL。 生成的库包含 @import 语句而不是嵌入的代码。
在上一个示例中 嵌入来自其他库的代码 部分， /etc/client/libraries/myclientlibs/publicmain 客户端库文件夹嵌入了 /apps/myapp/clientlib 客户端库文件夹。 将参数附加到网页会在网页的源代码中生成以下链接：
<link rel="stylesheet" href="/etc/clientlibs/mycientlibs/publicmain.css">
发现客户端库 discover-client-libraries
此 /libs/cq/granite/components/dumplibs/dumplibs 组件生成有关系统上所有客户端库文件夹的信息页面。 此 /libs/granite/ui/content/dumplibs 节点将组件作为资源类型。 要打开该页面，请使用以下URL（根据需要更改主机和端口）：
https://<host>:<port>/libs/granite/ui/content/dumplibs.test.html
该信息包括库路径和类型（CSS或JS）以及库属性的值（如类别和依赖项）。 页面上的后续表将显示每个类别和渠道中的库。
查看生成的输出 see-generated-output
此 dumplibs 组件包括一个测试选择器，该选择器显示为 ui:includeClientLib 标记之间。 该页面包含用于不同js、css和主题属性组合的代码。
