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.

Överläggning en komponent ändrar standardkomponenten och påverkar alla referenser till komponenten.

Utöka en -komponent, som får ett unikt namn, begränsar omfattningen av ändringarna. 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 åstadkoms genom att en kopia av standardkomponenten i / ändras appar i stället för att ändra den ursprungliga komponenten i libs katalog. Komponenten är konstruerad med en identisk relativ sökväg, förutom att 'libs' ersätts 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.

Det här skiljer sig från 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 till den överordnade resurstypen.

Ett snabbt exempel på hur kommentarkomponenten kan placeras över finns i Komponenten Overlay Comments, genomgång.

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.

Det här skiljer sig från överläggning standardkomponenten där Sling-typen löser relativa referenser till apparna/mappen innan sökning görs i mappen libs/, vilket innebär att en komponents design eller beteende ändras globalt.

Ett snabbt exempel på hur du utökar kommentarkomponenten finns i Utöka kommentarkomponent, självstudiekurs.

Javascript-bindning 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 data-scf-component attribut kan vara standard, till exempel social/tally/components/hbs/rating eller en utökad (anpassad) komponent för anpassade funktioner, som werdetail/components/hbs/rating.

Om du vill binda en komponent måste hela komponentskriptet inneslutas i en <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 av komponenter behöver du bara

forum.js: Exempeltillägg för 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

Användning av klientbibliotek (clientlibs) är ett sätt att 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:

The Community Components Guide listar 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 det minsta JavaScript-skript 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! Även om 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: