Handbuch zu Community-Komponenten community-components-guide
Das Handbuch zu Community-Komponenten ist ein interaktives Entwicklungstool für das Social Component Framework (SCF). Es bietet eine Liste der verfügbaren Adobe Experience Manager (AEM) Communities-Komponenten oder der komplexeren Funktionen, die aus mehreren Komponenten erstellt wurden.
Neben grundlegenden Informationen für jede Komponente ermöglicht das Handbuch Experimente mit der Funktionsweise der SCF-Komponenten/-Funktionen und deren Konfiguration oder Anpassung.
Informationen zu Entwicklungsgrundlagen für die einzelnen Komponenten finden Sie unter Funktionen und Komponenten-Grundlagen.
Erste Schritte getting-started
Das Handbuch ist für die Verwendung in Entwicklungs-Installationen von Autoreninstanzen (localhost:4502) und Veröffentlichungsinstanzen (localhost:4503) vorgesehen.
Auf die Website "Community-Komponenten"können Sie unter
Die Interaktionen mit den Communities-Komponenten variieren je nach:
- Der Server (Autor oder Veröffentlichung).
- Ob der Site-Besucher angemeldet ist oder nicht.
- Bei Anmeldung werden die dem Mitglied zugewiesenen Berechtigungen zugewiesen.
- Gibt an, ob der standardmäßige SRP JSRP verwendet wird.
Um beim Autor in den Bearbeitungsmodus zu wechseln, fügen Sie entweder editor.html oder cf# als erstes Pfadsegment nach dem Servernamen ein:
-
Standardbenutzeroberflä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 von SCF-Komponenten, die links auf der Seite für die Vorschau und das Prototyping verfügbar sind.
Komponentenleitfaden, wie in einer Autoreninstanz im Bearbeitungsmodus angezeigt:
Komponentenseiten component-pages
Wählen Sie eine Komponente aus der Liste links auf der Seite aus.
Der Hauptteil des Handbuchs wird angezeigt:
-
Titel: Der Name der ausgewählten Komponente
-
Client-seitige Bibliotheken: Eine Liste mit einer oder mehreren erforderlichen Kategorien
-
Inclusible: Wenn die Komponente dynamisch eingeschlossen sein kann, kann der Status im Bearbeitungsmodus des Autors umgeschaltet werden:
- Wenn der Text hinzugefügt wird, lautet der angezeigte Text: "Diese Komponente wird über ihren par -Knoten einbezogen."
- Wenn enthalten, lautet der angezeigte Text: "Diese Komponente wird dynamisch einbezogen."
- Wenn nicht enthalten, wird kein Text angezeigt
-
Beispielkomponente oder -funktion: eine aktive Instanz der Komponente oder Funktion. Wenn eine Komponente geändert werden soll, kann sie durch Änderungen an den Vorlagen, CSS und Daten im Registerkartenabschnitt geändert werden.
Autoreninteraktionen author-interactions
Wenn Sie das Handbuch in einer Autoreninstanz verwenden, ist es möglich, die Konfiguration einer Komponente zu erleben, indem Sie das zugehörige Dialogfeld öffnen. Informationen für Entwickler finden Sie im Abschnitt Komponenten- und Funktionsgrundlagen der Dokumentation, während die Dialogfeldeinstellungen im Abschnitt Communities-Komponenten für Autoren beschrieben werden.
Im Komponentenleitfaden für die Community-Komponenten werden einige Einstellungen für das Komponentendialogfeld mit dem Umschalter Inclusible ü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 einschließbaren Text aus und doppelklicken Sie, um das Bearbeitungsdialogfeld zu öffnen:
Auf der Registerkarte Vorlagen :
-
Schließen Sie die untergeordnete Komponente mit sling:include ein.
Wenn diese Option deaktiviert ist, verwendet das Komponentenleitfaden die vorhandene Ressource im Repository (einen jcr-Knoten, der einem par -Knoten untergeordnet ist).
- Der angezeigte Text lautet: "Diese Komponente wird über ihren par -Knoten einbezogen."
Wenn diese Option aktiviert ist, verwendet das Komponentenleitfaden Sling, um eine Komponente des resourceType des untergeordneten Knotens (nicht vorhandene Ressource) dynamisch einzuschließen.
- Der angezeigte Text lautet: "Diese Komponente wird dynamisch einbezogen."
Die Option Standard ist deaktiviert.
Publish-Interaktionen publish-interactions
Bei Verwendung des Handbuchs in einer Veröffentlichungsinstanz ist es möglich, die Komponenten und Funktionen als Site-Besucher (nicht angemeldet) und als Mitglieder mit verschiedenen Berechtigungen beim Anmelden zu erleben.
Client-seitige Bibliotheken client-side-libraries
Die für jede Komponente aufgelisteten Client-seitigen Bibliotheken (clientlibs) sind die erforderlichen, die referenziert werden sollen, wenn die Komponente auf einer Seite platziert wird. Die Clientlibs bieten eine Möglichkeit, den Download von JavaScript und CSS zu verwalten und zu optimieren, die zum Rendern der Komponente im Browser verwendet werden.
Weitere Informationen finden Sie unter Clientlibs für Communities-Komponenten.
Personifikation impersonation
Wenn Sie in der Autoreninstanz, in der häufig als Administrator oder Entwickler angemeldet ist, die Komponente als ein anderer Benutzer angemeldet haben, verwenden Sie 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 die Identität zu beenden.
Die Veröffentlichungsinstanz muss nicht stellvertretend agieren. Verwenden Sie einfach den Link Anmelden/Abmelden , um verschiedene Benutzer zu imitieren, z. B. die Demobenutzer.
Anpassung customization
Wenn diese Option aktiviert ist, steht jede SCF-Komponente für die Prototypisierung möglicher Anpassungen zur Verfügung, indem die Vorlage, CSS und Daten der Komponente vorübergehend geändert werden.
Aktivieren der Anpassung enabling-customization
Um schnell mit Anpassungen zu experimentieren, muss die Eigenschaft scg:showIdezum JCR-Knoten für den Inhalt der Komponentenseite hinzugefügt und auf "true"gesetzt werden.
Verwenden der Kommentarkomponente als Beispiel für die Autoren- oder Veröffentlichungsinstanz, die mit Administratorrechten angemeldet ist:
-
Navigieren Sie zu CRXDE Lite
Beispiel: http://localhost:4503/crx/de
-
Wählen Sie den Knoten
jcr:contentder Komponente ausZum Beispiel:
/content/community-components/en/comments/jcr:content -
Hinzufügen einer Eigenschaft
- Name
scg:showIde - Typ
String - Wert
true
- Name
-
Wählen Sie Alle speichern
-
Laden Sie die Seite "Kommentare"im Handbuch erneut.
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 den Tab Vorlagen aus, um die der Komponente zugeordneten Vorlagen anzuzeigen.
Mit dem Vorlagen-Editor können lokale Bearbeitungen kompiliert und auf die Beispielkomponenteninstanz oben auf der Seite angewendet werden, ohne dass sich dies auf die Komponente im Repository auswirkt.
Wenn Sie die Kompilierung auf lokalen Bearbeitungen ausführen, werden alle Fehler hervorgehoben, indem Sie einen Punkt in der Rinne platzieren und den Text rot markieren.
CSS-Registerkarte css-tab
Wählen Sie die Registerkarte CSS aus, um die mit der Komponente verknüpfte CSS anzuzeigen.
Wenn eine Komponente aus mehreren Komponenten zusammengesetzt ist, können einige CSS unter einer der anderen Komponenten aufgeführt sein.
Mit dem CSS-Editor kann das CSS geändert und auf die Beispielkomponenteninstanz oben auf der Seite angewendet werden.
Es kann eine Regel ausgewählt werden, um die Teile des DOM mithilfe dieser Regel hervorzuheben, indem Sie neben der Regel in der Rinne auf klicken.
Registerkarte "Daten" data-tab
Wählen Sie die Registerkarte Daten aus, um die Endpunktdaten .social.json anzuzeigen. Diese Daten können bearbeitet werden und werden auf die Beispielkomponenteninstanz angewendet.
Syntaxfehler können im Rinnstein markiert und im Editor hervorgehoben werden.