Aanpassing aan clientzijde client-side-customization

CAUTION
AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

Er zijn verschillende manieren om de weergave en/of het gedrag van een AEM Communities-component op de client aan te passen.

Twee belangrijke benaderingen zijn het bedekken of uitbreiden van een component.

Bedekken een component verandert de standaardcomponent en beïnvloedt elke verwijzing naar de component.

Uitbreiden een component, die uniek wordt genoemd, beperkt het werkingsgebied van veranderingen. De term 'extend' wordt door elkaar gebruikt met 'override'.

Bedekkingen overlays

Het bedekken van een component is een methode om wijzigingen aan een standaardcomponent aan te brengen en alle instanties te beïnvloeden die het gebrek gebruiken.

De bedekking wordt verwezenlijkt door een exemplaar van de standaardcomponent in te wijzigen /apps map, in plaats van de oorspronkelijke component in de map / te wijzigen libben directory. De component is geconstrueerd met een identiek relatief pad, behalve dat 'libs' wordt vervangen door 'apps'.

De map /apps is de eerste plaats die wordt gezocht om aanvragen op te lossen. Als deze niet wordt gevonden, wordt de standaardversie in de map /libs gebruikt.

De standaardcomponent in de /libs folder moet nooit worden gewijzigd aangezien de toekomstige flarden en de verbeteringen vrij zijn om de /libs folder op om het even welke manier noodzakelijk te veranderen terwijl het handhaven van openbare interfaces.

Dit verschilt van verlenging een standaardcomponent waar het verlangen wijzigingen voor een specifiek gebruik moet maken, die tot een uniek weg aan de component leidt en zich baseert op het van verwijzingen voorzien van de originele standaardcomponent in de /libs folder als super middeltype.

Voor een snel voorbeeld van het bedekken van de commentaarcomponent, probeer Zelfstudie van de component Overlay Comments.

Extensies extensions

Het uitbreiden (met voeten treden) van een component is een methode om wijzigingen voor een specifiek gebruik aan te brengen zonder alle instanties te beïnvloeden die het gebrek gebruiken. De uitgebreide component krijgt een unieke naam in de map /apps en verwijst naar de standaardcomponent in de map /libs, zodat het standaardontwerp en de standaardwerking van een component niet worden gewijzigd.

Dit verschilt van bedekken De standaardcomponent waarin de aard van Sling relatieve verwijzingen naar apps/omslag alvorens in de libs/ omslag te zoeken oplost, zodat wordt het ontwerp of het gedrag van een component globaal gewijzigd.

Voor een kort voorbeeld van het uitbreiden van de commentaarcomponent, probeer Zelfstudie opmerkingencomponent uitbreiden.

JavaScript-binding javascript-binding

Het HBS-script voor de component moet zijn gebonden aan de JavaScript-objecten, -modellen en -weergaven, die deze functie implementeren.

De waarde van de data-scf-component kenmerk kan de standaardwaarde zijn, zoals social/tally/components/hbs/rating of een uitgebreide (aangepaste) component voor aangepaste functionaliteit, zoals weretail/componenten/hbs/rating.

Om een component te binden, moet het volledige componentenmanuscript binnen een worden ingesloten <div> element met de volgende kenmerken:

  • data-component-id="{{id}}"

    wordt vanuit de context omgezet in de eigenschap id

  • data-scf-component="<resourcetype>

Bijvoorbeeld van /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>

Aangepaste eigenschappen custom-properties

Wanneer u een component uitbreidt of bedekt, is het mogelijk eigenschappen toe te voegen aan een gewijzigd dialoogvenster.

Alle eigenschappen die op een component/een middel worden geplaatst kunnen worden betreden door de bezitssleutels in het zakbalkmalplaatje van verwijzingen te voorzien:

{{properties.<property_name>}}

CSS schuintrekken skinning-css

Componenten aanpassen aan het algemene thema van de website kan worden bereikt door 'skins' toe te wijzen. Kleuren, lettertypen, afbeeldingen, knoppen, koppelingen, afstand en zelfs positionering worden in zekere mate gewijzigd.

Skin maken kan worden bereikt door de framestijlen selectief te overschrijven of door geheel nieuwe stijlpagina's te schrijven. De componenten SCF bepalen namespaced, modulaire en semantische CSS klassen die de diverse elementen beïnvloeden die omhoog een component maken.

Een skin toewijzen aan een component:

  1. Identificeer de elementen die u wilt wijzigen (bijvoorbeeld: compositiegebied, werkbalkknoppen, berichtlettertype, enz.).

  2. Identificeer de CSS klasse/de regels die deze elementen beïnvloeden.

  3. Maak een stijlbladbestand (.css).

  4. Het stijlblad opnemen in een clientbibliotheekmap (clientlibs) voor uw site en zorg ervoor dat deze wordt opgenomen in uw sjablonen en pagina's met ui:includeClientLib.

  5. Definieer de CSS-klassen en -regels die u hebt geïdentificeerd (#2) in uw stijlpagina opnieuw en voeg stijlen toe.

De aangepaste stijlen overschrijven nu de standaardframestijlen en de component wordt weergegeven met de nieuwe skin.

CAUTION
Elke CSS-klassennaam die vooraf is voorzien van scf-js-* heeft een specifiek gebruik in javascript-code. Deze klassen beïnvloeden de status van een component (bijvoorbeeld van verborgen naar zichtbaar schakelen) en mogen niet worden overschreven of verwijderd.
Terwijl scf-js-* klassen zijn niet van invloed op stijlen, de klassennamen kunnen in stijlpagina's worden gebruikt met de waarschuwing dat er, aangezien ze de statussen van elementen bepalen, bijwerkingen kunnen optreden.

JavaScript uitbreiden extending-javascript

Als u een JavaScript-implementatie voor componenten wilt uitbreiden, hebt u alleen

  1. Maak een component voor u-app met een jcr:resourceSuperType dat is ingesteld op de waarde van jcr:resourceType van de uitgebreide component, bijvoorbeeld social/forum/components/hbs/forum
  2. Onderzoek Javascript van de standaardSCF component om te bepalen welke methodes moeten worden geregistreerd gebruikend SCF.registerComponent ()
  3. Kopieer het JavaScript van de uitgebreide component of begin helemaal opnieuw
  4. De methode uitbreiden
  5. Gebruik SCF.registerComponent() om alle methoden te registreren met de standaardinstellingen of de aangepaste objecten en weergaven.

forum.js: Voorbeeld van uitbreiding van forum - GB 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);

Scriptlabels script-tags

Scripttags vormen een inherent onderdeel van het clientframework. Zij zijn de lijm die de prijsverhoging bindt die op de serverkant met de modellen en de meningen op de cliëntkant wordt geproduceerd.

Scripttags in SCF-scripts mogen niet worden verwijderd wanneer componenten worden overschreven of overschreven. SCF-scripttags die automatisch zijn gemaakt voor het injecteren van JSON in de HTML, worden aangeduid met het kenmerk data-scf-json=true.

Clientlibs voor SCF clientlibs-for-scf

Het gebruik van clientbibliotheken (clientlibs), biedt een manier om de JavaScript en CSS die worden gebruikt voor het renderen van inhoud op de client, te organiseren en te optimaliseren.

De clientlibs voor SCF volgen een zeer specifiek noemingspatroon voor twee varianten, die slechts door de aanwezigheid van "auteur"in de categorienaam variëren:

Clientlib-variabele
Patroon voor eigenschap Categorieën
complete clientlib
cq.social.hbs.<component name>
auteur-clientlib
cq.social.author.hbs.<component name>

Volledige Clientlibs complete-clientlibs

De volledige (niet-auteur) clientlibs bevatten afhankelijkheden en zijn handig voor het opnemen met ui:includeClientLib.

Deze versies zijn te vinden in:

  • /etc/clientlibs/social/hbs/<component name="">

Bijvoorbeeld:

  • Clientmapknooppunt: /etc/clientlibs/social/hbs/forum
  • Eigenschap Categorieën: cq.social.hbs.forum

De Community Components Guide maakt een lijst van de volledige clientlibs die voor elke component SCF wordt vereist.

Clientlibs voor Community-componenten beschrijft hoe u clientlibs aan een pagina kunt toevoegen.

Auteur Clientlibs author-clientlibs

De clientlibs van de auteurversie worden gestript neer aan minimale JavaScript noodzakelijk om de component uit te voeren.

Deze clientlibs moeten nooit rechtstreeks worden opgenomen, maar zijn in plaats daarvan beschikbaar om in andere clientlibs in te sluiten, die voor een site worden gemaakt.

Deze versies staan in de map SCF libs:

  • /libs/social/<feature>/components/hbs/<component name="">/clientlibs

Bijvoorbeeld:

  • Clientmapknooppunt: /libs/social/forum/hbs/forum/clientlibs
  • Eigenschap Categorieën: cq.social.auteur.hbs.forum

Opmerking: hoewel auteur clientlibs geen andere bibliotheken inbedden , maken ze een lijst van hun afhankelijkheden . Wanneer de afhankelijkheden zijn ingesloten in andere bibliotheken, worden deze niet automatisch ingesloten en moeten ze ook worden ingesloten.

De vereiste auteur clientlibs kunnen worden geïdentificeerd door "auteur"in de clientlibs op te nemen die voor elke component SCF in SCF worden vermeld Community Components Guide.

Overwegingen bij gebruik usage-considerations

Elke site is anders in de manier waarop ze clientbibliotheken beheren. Enkele factoren zijn:

  • Totale snelheid: Misschien is het de wens dat de site reageert, maar het is acceptabel dat de eerste pagina een beetje traag wordt geladen. Als veel van de pagina's dezelfde Javascript gebruiken, kunnen de verschillende Javascripts in één client worden ingesloten en kan er vanaf de eerste pagina naar worden verwezen om te laden. Het JavaScript in deze enkele download blijft in het cachegeheugen opgeslagen, waardoor de hoeveelheid gegevens die voor volgende pagina's moet worden gedownload, tot een minimum wordt beperkt.
  • Korte tijd tot eerste pagina: Misschien is het de bedoeling dat de eerste pagina snel wordt geladen. In dit geval bevat het JavaScript-bestand meerdere kleine bestanden waarnaar alleen kan worden verwezen als dat nodig is.
  • Een balans tussen het laden van de eerste pagina en volgende downloads.
recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6