<%@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下方。
客户端库文件夹下的静态资源必须位于名为 resources 的文件夹中。 如果文件夹 资源 下没有静态资源（如图像），则无法在发布实例上引用该资源。 示例如下： https://localhost:4503/etc.clientlibs/geometrixx/components/clientlibs/resources/example.gif
为了能够访问/apps下的客户端库，使用了代理servlet。 仍在客户端库文件夹上强制执行ACL，但如果allowProxy属性设置为true，则servlet允许通过/etc.clientlibs/读取内容。
如果静态资源位于客户端库文件夹下的资源下，则只能通过代理访问。
Adobe建议查找/apps下的客户端库，并使用代理servlet使其可用。 但是，请记住，最佳做法仍然要求公共站点从不包含直接通过/apps或/libs路径提供的任何内容。
创建客户端库文件夹 create-a-client-library-folder
打开文件并键入以下文本以标识源文件路径的根：
#base=*[root]*
将* [root]*替换为包含源文件的文件夹相对于TXT文件的路径。 例如，当源文件与TXT文件位于同一文件夹时，请使用以下文本：
#base=.
以下代码将根设置为cq:ClientLibraryFolder节点下名为mobile的文件夹：
#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>
在这种情况下，有必要将所有所需的客户端库代码合并到单个文件中，以便减少页面加载上的来回请求数量。 为此，您可以使用cq:ClientLibraryFolder节点的嵌入属性，将所需的库embed到特定于应用程序的客户端库中。
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允许可插拔的预处理器，并随附对CSS和JavaScript的YUI Compressor和JavaScript的Google Closure Compiler (GCC)的支持，并将YUI设置为AEM的默认预处理器。
可插拔预处理器允许灵活使用，包括：
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和主题属性组合的代码。
