Anpassning på klientsidan client-side-customization

Det finns flera sätt att anpassa utseendet och/eller beteendet för en AEM Communities-komponent på klientsidan.

Två större metoder är att täcka över eller utöka en komponent.

Om du ersätter en komponent ändras standardkomponenten och alla referenser till komponenten påverkas.

Om du utökar en komponent, som har unika namn, begränsas ändringsomfånget. Termen"utöka" används omväxlande med"åsidosätt".

Övertäckningar overlays

Att täcka över en komponent är ett sätt att göra ändringar i en standardkomponent och påverka alla förekomster som använder standardkomponenten.

Övertäckningen uppnås genom att ändra en kopia av standardkomponenten i katalogen /apps i stället för att ändra originalkomponenten i katalogen /libs . Komponenten är konstruerad med en identisk relativ sökväg, förutom att 'libs' har ersatts med 'apps'.

Katalogen /apps är den första plats som genomsöks för att lösa begäranden, och om den inte hittas används standardversionen i katalogen /libs.

Standardkomponenten i katalogen /libs får aldrig ändras eftersom framtida korrigeringar och uppgraderingar är fria att ändra katalogen /libs på det sätt som behövs, samtidigt som de allmänna gränssnitten bibehålls.

Detta skiljer sig från att utöka en standardkomponent där du vill göra ändringar för en viss användning, skapa en unik sökväg till komponenten och förlita dig på att referera den ursprungliga standardkomponenten i katalogen /libs som den överordnade resurstypen.

Om du snabbt vill se ett exempel på hur kommentarskomponenten överlappas provar du självstudiekursen Komponenten för överläggskommentarer.

Tillägg extensions

Att utöka (åsidosätta) en komponent är ett sätt att göra ändringar för en viss användning utan att påverka alla instanser som använder standardvärdet. Den utökade komponenten har ett unikt namn i mappen /apps och refererar till standardkomponenten i mappen /libs, vilket innebär att en komponents standarddesign och beteende inte ändras.

Detta skiljer sig från överlägg som är standardkomponent där Sling-typen löser relativa referenser till appar/-mappen innan sökning sker i libs/-mappen, vilket innebär att en komponents design eller beteende ändras globalt.

Om du snabbt vill se ett exempel på hur du utökar kommentarkomponenten kan du prova självstudiekursen Utöka kommentarkomponent.

JavaScript Binding javascript-binding

HBS-skriptet för komponenten måste vara bundet till JavaScript objekt, modeller och vyer, som implementerar den här funktionen.

Värdet för attributet data-scf-component kan vara standardvärdet, till exempel social/tally/components/hbs/rating, eller en utökad (anpassad) komponent för anpassade funktioner, till exempel Nöjda komponenter/hbs/klassificering.

Om du vill binda en komponent måste hela komponentskriptet inneslutas i ett <div>-element med följande attribut:

Från /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>

Anpassade egenskaper custom-properties

När du utökar eller döljer en komponent kan du lägga till egenskaper i en ändrad dialogruta.

Du kommer åt alla egenskaper som har angetts för en komponent/resurs genom att referera till egenskapstangenterna i mallen för verktygsfält:

{{properties.<property_name>}}

CSS-skal skinning-css

Du kan anpassa komponenterna så att de matchar det övergripande temat på webbplatsen genom att"skala" - ändra färger, teckensnitt, bilder, knappar, länkar, mellanrum och till och med placering i viss utsträckning.

Du kan skapa skal genom att åsidosätta ramverksformaten selektivt eller genom att skriva helt nya formatmallar. SCF-komponenterna definierar namnutrymmen, modulära och semantiska CSS-klasser som påverkar de olika elementen som en komponent består av.

Så här skalförändrar du en komponent:

De anpassade formaten åsidosätter nu standardramverksformaten och komponenten återges med det nya skalet.

Utöka JavaScript extending-javascript

Om du vill utöka en JavaScript-implementering måste du:

forum.js: Sample Extension of 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);

Skripttaggar script-tags

Skripttaggar är en del av klientsidans ramverk. Det är limmet som kan binda den kod som genereras på serversidan till modellerna och vyerna på klientsidan.

Skripttaggar i SCF-skript bör inte tas bort när komponenter åsidosätts eller åsidosätts. SCF-skripttaggar som skapas automatiskt för att injicera JSON i HTML identifieras med attributet data-scf-json=true.

Clientlibs for SCF clientlibs-for-scf

Med hjälp av klientbibliotek (klientbibliotek) kan du ordna och optimera JavaScript och CSS som används för att återge innehåll på klienten.

Klientlibs for SCF följer ett mycket specifikt namngivningsmönster för två varianter, som endast varierar beroende på om det finns 'author' i kategorinamnet:

Fullständiga klienter complete-clientlibs

De fullständiga (icke-författare) klientlibs innehåller beroenden och är praktiska att använda med ui:includeClientLib.

Dessa versioner finns i:

Till exempel:

I guiden Community Components visas de fullständiga klientlibs som krävs för varje SCF-komponent.

Clientlibs for Communities Components beskriver hur du lägger till clientlibs på en sida.

Författarklipp author-clientlibs

Klientlibs för författarversionen tas bort från den minimala JavaScript som behövs för att implementera komponenten.

Dessa clientlibs ska aldrig tas med direkt, utan kan bäddas in i andra clientlibs, som har skapats för en webbplats för hand.

Dessa versioner finns i mappen SCF libs:

Till exempel:

Obs! Medan författarklienter aldrig bäddar in andra bibliotek listar de sina beroenden. När beroendena är inbäddade i andra bibliotek hämtas de inte automatiskt in och måste även bäddas in.

Du kan identifiera de nödvändiga författarklientlibs genom att infoga"författare" i de klientlibs som visas för varje SCF-komponent i Community Components Guide.

Användning usage-considerations

Alla webbplatser är olika när det gäller hantering av klientbibliotek. Olika faktorer kan vara: