客户端自定义 client-side-customization

要自定义AEM Communities组件在客户端的外观和/或行为，有多种方法。

两种主要方法是叠加或扩展组件。

覆盖 组件会更改默认组件，并影响对该组件的每个引用。

扩展 组件的名称唯一，可限制更改的范围。 术语“extend”可与“override”交替使用。

叠加 overlays

叠加组件是对默认组件进行修改并影响所有使用默认组件的实例的方法。

叠加可通过在/应用程序 目录，而不是在/libs 目录访问Advertising Cloud的帮助。 该组件使用相同的相对路径构建，不同之处在于“lib”被替换为“apps”。

首先搜索/apps目录来解析请求，如果找不到，则使用位于/libs目录中的默认版本。

/libs目录中的默认组件绝不能修改，因为以后的修补程序和升级可以在维护公共接口时以任何必要的方式自由更改/libs目录。

这与 扩展 默认组件，其中希望对特定用途进行修改，创建组件的唯一路径，并依赖在/libs目录中引用原始默认组件作为超级资源类型。

有关覆盖注释组件的快速示例，请尝试 叠加注释组件教程.

扩展名 extensions

扩展（覆盖）组件是一种为特定用途进行修改，而不影响使用默认值的所有实例的方法。 扩展组件在/apps文件夹中具有唯一名称，并引用/libs文件夹中的默认组件，因此不会修改组件的默认设计和行为。

这与 覆盖 默认组件，在libs/文件夹中搜索之前，Sling的性质会解析对应用程序/文件夹的相对引用，从而全局修改组件的设计或行为。

有关扩展注释组件的快速示例，请尝试 “扩展注释”组件教程.

Javascript绑定 javascript-binding

组件的HBS脚本必须绑定到实施此功能的JavaScript对象、模型和视图。

的值 data-scf-component 属性可能是默认属性，例如 social/tally/components/hbs/rating，或用于自定义功能的扩展（自定义）组件，例如 weretail/components/hbs/rating.

要绑定组件，必须将整个组件脚本包含在 <div> 元素（具有以下属性）：

例如，从 /apps/weretail/components/hbs/rating/rating.hbs:

<div class="we-Rating" data-component-id="{{id}}" data-scf-component="weretail/components/hbs/rating">

     <!-- HTML with HBS accessing the rating component -->

</div>

自订属性 custom-properties

扩展或覆盖组件时，可以向修改的对话框添加属性。

可通过引用handlebars模板中的属性键来访问在组件/资源上设置的所有属性：

{{properties.<property_name>}}

设置CSS外观 skinning-css

可通过“设置外观”（在一定程度上更改颜色、字体、图像、按钮、链接、间距甚至定位）来自定义组件以匹配网站的整体主题。

可以通过选择性地覆盖框架样式或通过编写全新样式表来实现外观设置。 SCF组件定义命名节点、模块化和语义CSS类，这些类影响构成组件的各种元素。

要设置组件的外观，请执行以下操作：

自定义样式现在将覆盖默认框架样式，并且组件将使用新外观呈现。

扩展Javascript extending-javascript

要扩展组件Javascript实施，您只需

forum.js:论坛扩展示例 — HBS forum-js-sample-extension-of-forum-hbs

(function($CQ, _, Backbone, SCF) {
    "use strict";
    var GMForumView = SCF.ForumView.extend({
        viewName: "GMForum",
        showComposer: function(e) {
            SCF.ForumView.prototype.toggleComposer.apply(this);
            var cancel = this.$el.find('.cancel-new-topic');
            cancel.toggle();
        },
        hideComposer: function(e) {
            SCF.ForumView.prototype.toggleComposer.apply(this);
            var cancel = this.$el.find('.cancel-new-topic');
            cancel.toggle();
        }
    });

    SCF.registerComponent('social/forum/components/hbs/post', SCF.Post, SCF.PostView);
    SCF.registerComponent('social/forum/components/hbs/topic', SCF.Topic, SCF.TopicView);
    SCF.registerComponent('social/forum/components/hbs/forum', SCF.Forum, GMForumView );
})($CQ, _, Backbone, SCF);

脚本标记 script-tags

脚本标记是客户端框架的固有部分。 它们是一种胶水，可帮助将服务器端生成的标记与客户端的模型和视图绑定。

覆盖或覆盖组件时，不应删除SCF脚本中的脚本标记。 为在HTML中插入JSON而自动创建的SCF脚本标记将使用属性进行标识 data-scf-json=真的。

用于SCF的Clientlibs clientlibs-for-scf

的使用 客户端库 (clientlibs)，提供了一种组织和优化用于在客户端上呈现内容的Javascript和CSS的方法。

SCF的clientlib遵循两个变体的非常特定的命名模式，这两个变体仅在类别名称中存在“author”时有所不同：

Complete Clientlibs complete-clientlibs

完整的（非作者）clientlib包含依赖项，便于在ui:includeClientLib中包含。

以下版本可在中找到：

例如：

的 社区组件指南 列出每个SCF组件所需的完整clientlib。

适用于社区组件的Clientlibs 介绍如何将clientlibs添加到页面。

作者Clientlibs author-clientlibs

创作版本clientlib已清空到实施组件所需的最低Javascript。

这些clientlib绝不应直接包含在内，而是可嵌入到其他clientlib中，这些clientlib是为网站精心编制的。

这些版本位于SCF libs文件夹中：

例如：

注意：虽然作者clientlibs从不嵌入其他库，但他们会列出其依赖项。 嵌入到其他库中时，依赖关系不会自动提取，还必须嵌入。

所需的作者clientlib可通过将“author”插入为 社区组件指南.

使用注意事项 usage-considerations

每个网站在管理客户端库的方式上各不相同。 各种因素包括：