Handbuch der Community-Komponenten community-components-guide
Das Community Components Guide ist ein interaktives Entwicklungstool für das Social Component Framework (SCF). Es enthält eine Liste der verfügbaren Adobe Experience Manager (AEM)-Communities-Komponenten oder der komplexeren Funktionen, die aus mehreren Komponenten erstellt wurden.
Neben grundlegenden Informationen zu den einzelnen Komponenten ermöglicht das Handbuch Experimente mit der Funktionsweise der SCF-Komponenten/-Funktionen und der Möglichkeit, sie zu konfigurieren oder anzupassen.
Informationen zu den Entwicklungsgrundlagen für jede Komponente finden Sie unter Funktions- und Komponentengrundlagen.
Erste Schritte getting-started
Das Handbuch ist für die Verwendung in Entwicklungsinstallationen von Autoreninstanzen (localhost:4502) und Veröffentlichungsinstanzen (localhost:4503) vorgesehen.
Die Community-Komponenten-Website finden Sie unter
Die Interaktionen mit den Communitys-Komponenten variieren je nach:
- Server (Autor oder Veröffentlichung).
- Ob der Site-Besucher angemeldet ist oder nicht.
- Wenn angemeldet, die dem Mitglied zugewiesenen Berechtigungen.
- Ob das standardmäßige SRP JSRP verwendet wird.
Um in der Autoreninstanz in den Bearbeitungsmodus zu wechseln, fügen Sie nach dem Servernamen als erstes Pfadsegment entweder editor.html
oder cf#
ein:
-
Standard-Benutzeroberfläche:
https://<server>:<port>/editor.html/content/community-components/en.html
-
Klassische Benutzeroberfläche:
https://<server>:<port>/cf#/content/community-components/en.html
Startseite home-page
Das Handbuch enthält eine Liste der SCF-Komponenten, die links auf der Seite für Vorschau und Prototyping verfügbar sind.
Komponentenleitfaden, wie in einer Autoreninstanz im Bearbeitungsmodus angezeigt:
Komponentenseiten component-pages
Wählen Sie links auf der Seite in der Liste eine Komponente aus.
Der Hauptteil des Handbuchs zeigt Folgendes an:
-
Titel: Der Name der ausgewählten Komponente
-
Client-seitige: Eine Liste mit einer oder mehreren erforderlichen Kategorien
-
Einschließbar: Wenn die Komponente dynamisch eingeschlossen werden kann, kann der Status im Bearbeitungsmodus für Autoren umgeschaltet werden:
- Wenn sie hinzugefügt wird, wird Text angezeigt: „Diese Komponente ist über ihren übergeordneten Knoten enthalten.“
- Wenn enthalten, wird Text angezeigt: „Diese Komponente ist dynamisch enthalten.“
- Wenn dies nicht der Fall ist, wird kein Text angezeigt
-
Beispielkomponente oder -funktion: Eine aktive Instanz der Komponente oder Funktion. Wenn es sich um eine Komponente handelt, kann sie durch Änderungen an den Vorlagen, CSS und den Daten geändert werden, die im Abschnitt Registerkarte bereitgestellt werden.
Autoreninteraktionen author-interactions
Bei Verwendung des Handbuchs auf einer Autoreninstanz ist es möglich, die Konfiguration einer Komponente durch Öffnen des entsprechenden Dialogfelds zu erleben. Informationen für Entwickler finden Sie im Abschnitt Komponenten und) der Dokumentation, während die Dialogeinstellungen für Autoren im Abschnitt Communities-Komponenten beschrieben werden.
Für das Handbuch der Community-Komponenten werden einige Einstellungen für das Komponentendialogfeld mit dem Einschließbar-Umschalter überlagert. Um zwischen der Verwendung der vorhandenen Ressource oder einer dynamisch eingeschlossenen Ressource umzuschalten, wählen Sie im Bearbeitungsmodus sowohl die Komponente als auch den einzuschließenden Text aus und doppelklicken Sie, um das Dialogfeld „Bearbeiten“ zu öffnen:
Auf der Registerkarte Vorlagen:
-
Untergeordnete Komponente mit sling:include einschließen
Wenn diese Option deaktiviert ist, verwendet das Komponenten-Handbuch die vorhandene Ressource im Repository (einen jcr-Knoten, der einem para-Knoten untergeordnet ist).
- Angezeigter Text: „Diese Komponente ist über ihren übergeordneten Knoten enthalten.“
Wenn diese Option aktiviert ist, verwendet das Komponenten-Handbuch Sling, um eine Komponente des resourceType des untergeordneten Knotens dynamisch einzuschließen (nicht vorhandene Ressource).
- Angezeigter Text: „Diese Komponente ist dynamisch enthalten.“
Standard ist deaktiviert.
Publish Interactions publish-interactions
Bei Verwendung des Handbuchs auf einer Veröffentlichungsinstanz können die Komponenten und Funktionen als Site-Besucher (nicht angemeldet) und als Mitglieder mit verschiedenen Berechtigungen erleben, wenn sie angemeldet sind.
Client-seitige Bibliotheken client-side-libraries
Die für jede Komponente aufgelisteten Client-seitigen Bibliotheken (clientlibs) sind die (), beim Platzieren der Komponente auf einer Seite referenziert werden müssen. Die Clientlibs bieten eine Möglichkeit zur Verwaltung und Optimierung des Downloads von JavaScript und CSS, die zum Rendern der Komponente im Browser verwendet werden.
Weitere Informationen finden Sie unter Clientlibs für Communities-Komponenten.
Personifikation impersonation
Verwenden Sie auf der Autoreninstanz, bei der häufig eine Person als Administrator oder Entwickler angemeldet ist, um die als ein anderer Benutzer angemeldete Komponente zu verwenden, das Textfeld links neben der Schaltfläche Identität annehmen, um entweder den Benutzernamen einzugeben oder aus der Pulldown-Liste auszuwählen, und klicken Sie dann auf die Schaltfläche. Klicken Sie auf Wiederherstellen , um sich abzumelden und den Identitätswechsel zu beenden.
Für die Veröffentlichungsinstanz ist keine Stellvertretung erforderlich. Verwenden Sie einfach den Anmelde-/Abmelde-Link, um die Identität verschiedener Benutzer anzunehmen, z. B Demo-Benutzer.
Anpassung customization
Wenn diese Option aktiviert ist, ist jede SCF-Komponente für das Prototyping möglicher Anpassungen verfügbar, indem die Vorlage, das CSS und die Daten der Komponente vorübergehend geändert werden.
Aktivieren der Anpassung enabling-customization
Um schnell mit Anpassungen zu experimentierenscg:showIde
muss die Eigenschaft zum Inhalts-JCR-Knoten der Komponentenseite hinzugefügt und auf „true“ gesetzt werden.
Verwenden Sie die Komponente Kommentare als Beispiel für die Autoren- oder Veröffentlichungsinstanz, die mit Administratorrechten angemeldet ist:
-
Beispiel: http://localhost:4503/crx/de
-
Wählen Sie den
jcr:content
der Komponente ausZum Beispiel:
/content/community-components/en/comments/jcr:content
-
Eigenschaft hinzufügen
- Name
scg:showIde
- Typ
String
- Wert
true
- Name
-
Wählen Sie Alle speichern
-
Laden Sie die Seite Kommentare im Handbuch neu.
http://localhost:4503/content/community-components/en/comments.html
-
Beachten Sie, dass es jetzt drei Registerkarten für Vorlagen, CSS und Daten gibt.
Registerkarte „Vorlagen“ templates-tab
Wählen Sie die Registerkarte Vorlagen aus, um die mit der Komponente verknüpften Vorlagen anzuzeigen.
Mit dem Vorlageneditor können lokale Bearbeitungen kompiliert und auf die Beispielkomponenteninstanz oben auf der Seite angewendet werden, ohne dass die Komponente im Repository betroffen ist.
Wenn Sie den Compiler für lokale Bearbeitungen ausführen, werden alle Fehler hervorgehoben, indem Sie einen Punkt in den Rinnstein platzieren und den Text rot markieren.
Registerkarte CSS css-tab
Wählen Sie die Registerkarte CSS aus, um das mit der Komponente verknüpfte CSS anzuzeigen.
Wenn eine Komponente aus mehreren Komponenten zusammengesetzt ist, können einige CSS-Elemente unter einer der anderen Komponenten aufgeführt werden.
Der CSS-Editor ermöglicht das Ändern des CSS und dessen Anwendung auf die Beispielkomponenteninstanz oben auf der Seite.
Sie können eine Regel auswählen, um die Teile des DOM mithilfe dieser Regel hervorzuheben, indem Sie neben der Regel im Rinnstein klicken.
Registerkarte „Daten“ data-tab
Wählen Sie die Registerkarte Daten aus, um die .social.json-Endpunktdaten anzuzeigen. Diese Daten können bearbeitet werden und werden auf die Beispielkomponenteninstanz angewendet.
Syntaxfehler können in der Rinne markiert und im Editor hervorgehoben werden.