Feste Komponenten bieten eine gewisse Flexibilität beim Erstellen SPA Inhalts. Dieser Ansatz ist jedoch starr und erfordert, dass Entwickler die genaue Zusammensetzung des bearbeitbaren Inhalts definieren. Um die Erstellung außergewöhnlicher Erlebnisse durch Autoren zu unterstützen, unterstützt SPA Editor die Verwendung von Container-Komponenten in der SPA. Container-Komponenten ermöglichen es Autoren, zulässige Komponenten per Drag & Drop in den Container zu ziehen und sie wie beim herkömmlichen AEM Sites-Authoring zu erstellen!
In diesem Kapitel fügen wir der Startansicht einen bearbeitbaren Container hinzu, der es Autoren ermöglicht, Rich-Content-Erlebnisse mit bearbeitbaren React-Komponenten direkt in der SPA zu erstellen und anzuordnen.
Hinzufügen einer Container-Komponente zur Startansicht:
ResponsiveGrid
componentSo fügen Sie der Ansicht "Home"einen bearbeitbaren Bereich hinzu:
Öffnen und Bearbeiten react-app/src/components/Home.js
Importieren Sie die ResponsiveGrid
Komponente aus @adobe/aem-react-editable-components
und fügen Sie sie zum Home
-Komponente.
Legen Sie die folgenden Attribute für die <ResponsiveGrid...>
component
pagePath = '/content/wknd-app/us/en/home'
itemPath = 'root/responsivegrid'
Dies weist die ResponsiveGrid
-Komponente, um ihren Inhalt aus der AEM-Ressource abzurufen:
/content/wknd-app/us/en/home/jcr:content/root/responsivegrid
Die itemPath
der responsivegrid
Knoten, der im Remote SPA Page
AEM Vorlage und wird automatisch auf neuen AEM erstellt, die aus dem Remote SPA Page
AEM Vorlage.
Aktualisieren Home.js
, um <ResponsiveGrid...>
-Komponente.
...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...
function Home() {
return (
<div className="Home">
<ResponsiveGrid
pagePath='/content/wknd-app/us/en/home'
itemPath='root/responsivegrid'/>
<EditableTitle
pagePath='/content/wknd-app/us/en/home'
itemPath='title'/>
<Adventures />
</div>
);
}
Die Home.js
sollte wie folgt aussehen:
Um die volle Wirkung der flexiblen Authoring-Erlebnis-Container im SPA Editor zu erzielen. Wir haben bereits eine bearbeitbare Titelkomponente erstellt, aber lassen Sie uns noch ein paar weitere Komponenten erstellen, die es Autoren ermöglichen, bearbeitbare Text- und Bildkomponenten in der neu hinzugefügten Komponente "ResponsiveGrid"zu verwenden.
Die neuen bearbeitbaren Text- und Bildreaktionskomponenten werden mit dem in bearbeitbare feste Komponenten.
Öffnen Sie das SPA in Ihrer IDE.
Erstellen einer React-Komponente unter src/components/editable/core/Text.js
Fügen Sie den folgenden Code zu Text.js
import React from 'react'
const TextPlain = (props) => <div className={props.baseCssClass}><p className="cmp-text__paragraph">{props.text}</p></div>;
const TextRich = (props) => {
const text = props.text;
const id = (props.id) ? props.id : (props.cqPath ? props.cqPath.substr(props.cqPath.lastIndexOf('/') + 1) : "");
return <div className={props.baseCssClass} id={id} data-rte-editelement dangerouslySetInnerHTML={{ __html: text }} />
};
export const Text = (props) => {
if (!props.baseCssClass) {
props.baseCssClass = 'cmp-text'
}
const { richText = false } = props
return richText ? <TextRich {...props} /> : <TextPlain {...props} />
}
export function textIsEmpty(props) {
return props.text == null || props.text.length === 0;
}
Erstellen einer bearbeitbaren React-Komponente unter src/components/editable/EditableText.js
Fügen Sie den folgenden Code zu EditableText.js
import React from 'react'
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Text, textIsEmpty } from "./core/Text";
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
const RESOURCE_TYPE = "wknd-app/components/text";
const EditConfig = {
emptyLabel: "Text",
isEmpty: textIsEmpty,
resourceType: RESOURCE_TYPE
};
export const WrappedText = (props) => {
const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Text, "cmp-text"), textIsEmpty, "Text V2")
return <Wrapped {...props} />
};
const EditableText = (props) => <EditableComponent config={EditConfig} {...props}><WrappedText /></EditableComponent>
MapTo(RESOURCE_TYPE)(EditableText);
export default EditableText;
Die Implementierung der bearbeitbaren Textkomponente sollte wie folgt aussehen:
Öffnen Sie das SPA in Ihrer IDE.
Erstellen einer React-Komponente unter src/components/editable/core/Image.js
Fügen Sie den folgenden Code zu Image.js
import React from 'react'
import { RoutedLink } from "./RoutedLink";
export const imageIsEmpty = (props) => (!props.src) || props.src.trim().length === 0
const ImageInnerContents = (props) => {
return (<>
<img src={props.src}
className={props.baseCssClass + '__image'}
alt={props.alt} />
{
!!(props.title) && <span className={props.baseCssClass + '__title'} itemProp="caption">{props.title}</span>
}
{
props.displayPopupTitle && (!!props.title) && <meta itemProp="caption" content={props.title} />
}
</>);
};
const ImageContents = (props) => {
if (props.link && props.link.trim().length > 0) {
return (
<RoutedLink className={props.baseCssClass + '__link'} isRouted={props.routed} to={props.link}>
<ImageInnerContents {...props} />
</RoutedLink>
)
}
return <ImageInnerContents {...props} />
};
export const Image = (props) => {
if (!props.baseCssClass) {
props.baseCssClass = 'cmp-image'
}
const { isInEditor = false } = props;
const cssClassName = (isInEditor) ? props.baseCssClass + ' cq-dd-image' : props.baseCssClass;
return (
<div className={cssClassName}>
<ImageContents {...props} />
</div>
)
};
Erstellen einer bearbeitbaren React-Komponente unter src/components/editable/EditableImage.js
Fügen Sie den folgenden Code zu EditableImage.js
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Image, imageIsEmpty } from "./core/Image";
import React from 'react'
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
const RESOURCE_TYPE = "wknd-app/components/image";
const EditConfig = {
emptyLabel: "Image",
isEmpty: imageIsEmpty,
resourceType: RESOURCE_TYPE
};
const WrappedImage = (props) => {
const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Image, "cmp-image"), imageIsEmpty, "Image V2");
return <Wrapped {...props}/>
}
const EditableImage = (props) => <EditableComponent config={EditConfig} {...props}><WrappedImage /></EditableComponent>
MapTo(RESOURCE_TYPE)(EditableImage);
export default EditableImage;
Erstellen einer SCSS-Datei src/components/editable/EditableImage.scss
, das benutzerdefinierte Stile für die EditableImage.scss
. Diese Stile zielen auf die CSS-Klassen der bearbeitbaren React-Komponente ab.
Fügen Sie die folgende SCSS zu EditableImage.scss
.cmp-image__image {
margin: 1rem 0;
width: 100%;
border: 0;
}
Import EditableImage.scss
in EditableImage.js
...
import './EditableImage.scss';
...
Die Implementierung der bearbeitbaren Bildkomponente sollte wie folgt aussehen:
Die neu erstellte EditableText
und EditableImage
React-Komponenten werden im SPA referenziert und basierend auf der von AEM zurückgegebenen JSON dynamisch instanziiert. Um sicherzustellen, dass diese Komponenten für die SPA verfügbar sind, erstellen Sie Importanweisungen für sie in Home.js
Öffnen Sie das SPA in Ihrer IDE.
Öffnen Sie die Datei src/Home.js
Hinzufügen von Importanweisungen für AEMText
und AEMImage
...
// The following need to be imported, so that MapTo is run for the components
import EditableText from './editable/EditableText';
import EditableImage from './editable/EditableImage';
...
Das Ergebnis sollte wie folgt aussehen:
Wenn diese Einfuhren not hinzugefügt, EditableText
und EditableImage
-Code von SPA nicht aufgerufen wird und daher werden die Komponenten nicht den bereitgestellten Ressourcentypen zugeordnet.
AEM Container-Komponenten verwenden Richtlinien, um ihre zulässigen Komponenten anzugeben. Dies ist eine kritische Konfiguration bei der Verwendung des SPA-Editors, da nur AEM Komponenten, die SPA Komponenten zugeordnet haben, vom SPA gerenderbar sind. Stellen Sie sicher, dass nur die Komponenten zulässig sind, für die wir SPA Implementierungen bereitgestellt haben:
EditableTitle
zugeordnet zu wknd-app/components/title
EditableText
zugeordnet zu wknd-app/components/text
EditableImage
zugeordnet zu wknd-app/components/image
So konfigurieren Sie den Reponsivegrid-Container der Vorlage Remote-SPA:
Bei der AEM-Autoreninstanz anmelden
Navigieren Sie zu Tools > Allgemein > Vorlagen > WKND-App
Bearbeiten SPA
Auswählen Struktur im Modusschalter oben rechts
Tippen, um die Layout-Container
Tippen Sie auf Politik Symbol in der Popup-Leiste
Rechts unter dem Zugelassene Komponenten Registerkarte, erweitern WKND-APP - INHALT
Stellen Sie sicher, dass nur Folgendes ausgewählt ist:
Tippen Sie auf Fertig
Nach der Aktualisierung des SPA zum Einbetten des <ResponsiveGrid...>
, Wrapper für drei bearbeitbare React-Komponenten (EditableTitle
, EditableText
und EditableImage
) und AEM mit einer übereinstimmenden Vorlagenrichtlinie aktualisiert wird, können wir damit beginnen, Inhalte in der Container-Komponente zu erstellen.
Bei der AEM-Autoreninstanz anmelden
Navigieren Sie zu Sites > WKND-App
Tippen Startseite und wählen Sie Bearbeiten in der oberen Aktionsleiste
Auswählen Bearbeiten über die Modusauswahl oben rechts im Seiteneditor
Suchen Sie die Layout-Container bearbeitbarer Bereich unter dem Titel
Öffnen Sie die Seitenleiste des Seiteneditors und wählen Sie die Komponentenansicht
Ziehen Sie die folgenden Komponenten in die Layout-Container
Ziehen Sie die Komponenten in die folgende Reihenfolge, um sie neu anzuordnen:
Autor die Titel component
Autor die Bild component
Autor die Text component
Ihre Komponenten werden jetzt erstellt, aber vertikal stapelt.
Verwenden Sie AEM Layout-Modus , um die Größe und das Layout der Komponenten anzupassen.
Wechseln zu Layout-Modus Verwenden der Modusauswahl oben rechts
Größe ändern die Bild- und Text-Komponenten, sodass sie nebeneinander angeordnet sind
Vorschau Ihre Änderungen in AEM Seiteneditor
Aktualisieren Sie die WKND-App, die lokal ausgeführt wird auf http://localhost:3000 um die erstellten Änderungen zu sehen!
Sie haben eine Container-Komponente hinzugefügt, mit der Autoren bearbeitbare Komponenten zur WKND-App hinzufügen können! Sie wissen jetzt, wie:
ResponsiveGrid
-Komponente im SPAIm nächsten Schritt wird dieselbe Technik verwendet, um Hinzufügen einer bearbeitbaren Komponente zu einer Abenteuer-Details-Route im SPA.