使用者端自訂 client-side-customization

若要自訂AEM Communities元件在使用者端的外觀和/或行為，有數種方法。

覆蓋或延伸元件是兩種主要方法。

覆蓋 元件會變更預設元件，並影響元件的每個參照。

延伸 唯一命名的元件會限制變更的範圍。 「延伸」一詞可與「覆寫」互換使用。

覆蓋 overlays

覆蓋元件是修改預設元件並影響使用預設的所有例證的方法。

覆蓋是藉由修改/中預設元件的復本來完成​ 應用程式 目錄，而非修改/中的原始元件​ 程式庫 目錄。 元件是使用相同的相對路徑建構，但「libs」會取代為「apps」。

/apps目錄是第一個搜尋以解決請求的位置，如果未找到，則會使用/libs目錄中的預設版本。

/libs目錄中的預設元件絕不可修改，因為未來的修補程式和升級可以自由地以任何必要的方式變更/libs目錄，同時維護公用介面。

這與 延伸 預設元件，其需求為針對特定用途進行修改、建立元件的唯一路徑，並依賴參考/libs目錄中的原始預設元件作為超級資源型別。

如需覆蓋註解元件的快速範例，請嘗試 覆蓋註釋元件教學課程.

擴充功能 extensions

延伸（覆寫）元件是一種針對特定用途進行修改的方法，不會影響使用預設值的所有例證。 擴充元件在/apps資料夾中有唯一名稱，且會參照/libs資料夾中的預設元件，因此不會修改元件的預設設計和行為。

這與 覆蓋 預設元件，其中Sling的性質會在搜尋libs/資料夾之前解析應用程式/資料夾的相對參照，因此元件的設計或行為會全域修改。

如需擴充comments元件的快速範例，請嘗試 擴充註釋元件教學課程.

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： Forum範例擴充功能 — 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=true.

適用於SCF的Clientlibs clientlibs-for-scf

使用 使用者端程式庫 (clientlibs)，提供整理和最佳化在使用者端上呈現內容所使用的JavaScript和CSS的方法。

SCF的clientlibs遵循兩個變體的非常特定命名模式，這些模式僅在類別名稱中存在「author」時有所不同：

完成Clientlibs complete-clientlibs

完整的（非作者） clientlib包含相依性，並可方便地包含在ui：includeClientLib中。

您可以在下列位置找到這些版本：

例如：

此 社群元件指南 列出每個SCF元件所需的完整clientlibs。

適用於社群元件的Clientlibs 說明如何將clientlibs新增至頁面。

創作Clientlibs author-clientlibs

製作版本的clientlibs會被精簡為實施元件所需的最小JavaScript。

這些clientlibs絕不應該直接包含在內，而是可以內嵌到其他為網站手動打造的clientlibs中。

這些版本可在SCF libs資料夾中找到：

例如：

注意：雖然作者clientlibs從未內嵌其他程式庫，但會列出其相依性。 內嵌於其他程式庫時，相依性不會自動提取，也必須內嵌。

可透過將「author」插入列出的每個SCF元件的clientlibs，來識別所需的作者clientlibs。 社群元件指南.

使用注意事項 usage-considerations

每個網站管理使用者端程式庫的方式都不同。 各種因素包括：