AEM Headless-Anwendungen unterstützen eine integrierte Authoring-Vorschau. Das Vorschauerlebnis verknüpft den Inhaltsfragment-Editor der AEM-Autoreninstanz mit Ihrer benutzerdefinierten App (über HTTP adressierbar), sodass ein Deep Link in die App eingefügt werden kann, mit der das in der Vorschau angezeigte Inhaltsfragment gerendert wird.
Zur Verwendung der Inhaltsfragmentvorschau müssen mehrere Bedingungen erfüllt sein:
Vorschau-URLs anzeigen, mithilfe von URL-Ausdrücke, werden in den Eigenschaften des Inhaltsfragmentmodells festgelegt.
Jedes Inhaltsfragmentmodell kann über eine Vorschau-URL verfügen. Die Vorschau-URL kann pro Inhaltsfragment mithilfe der in der folgenden Tabelle aufgeführten URL-Ausdrücke parametrisiert werden. In einer Vorschau-URL können mehrere URL-Ausdrücke verwendet werden.
URL-Ausdruck | Wert | |
---|---|---|
Inhaltsfragmentpfad | ${contentFragment.path} |
/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali |
Inhaltsfragment-ID | ${contentFragment.id} |
12c34567-8901-2aa3-45b6-d7890aa1c23c |
Inhaltsfragmentvariante | ${contentFragment.variation} |
main |
Pfad des Inhaltsfragmentmodells | ${contentFragment.model.path} |
/conf/wknd-shared/settings/dam/cfm/models/adventure |
Name des Inhaltsfragmentmodells | ${contentFragment.model.name} |
adventure |
Beispiel-Vorschau-URLs:
https://preview.app.wknd.site/adventure${contentFragment.path}
aufgelöst in https://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation}
aufgelöst https://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main
Jedes Inhaltsfragment, das das konfigurierte Inhaltsfragmentmodell verwendet, verfügt über eine Vorschau -Schaltfläche. Über die Schaltfläche Vorschau wird die Vorschau-URL des Inhaltsfragmentmodells geöffnet und die Werte des geöffneten Inhaltsfragments werden in die URL-Ausdrücke.
Führen Sie bei der Vorschau von Inhaltsfragmentänderungen in der App eine Aktualisierung (Löschen des lokalen Cache des Browsers) durch.
Im Folgenden wird die WKND-App vorgestellt, eine einfache React-Anwendung, die Abenteuer aus AEM mit AEM Headless-GraphQL-APIs anzeigt.
Der Beispielcode ist verfügbar unter Github.com.
Die URLs oder Routen, die zur Vorschau eines Inhaltsfragments verwendet werden, müssen mithilfe von URL-Ausdrücke. In dieser für die Vorschau aktivierten Version der WKND-App werden die Inhaltsfragmente für das Abenteuer über die AdventureDetail
Komponente, die an die Route gebunden ist /adventure<CONTENT FRAGMENT PATH>
. Daher muss die Vorschau-URL des WKND Adventure-Modells auf https://preview.app.wknd.site:3000/adventure${contentFragment.path}
, um zu dieser Route zu gelangen.
Die Inhaltsfragmentvorschau funktioniert nur, wenn die App über eine adressierbare Route verfügt, die mit URL-Ausdrücke , das dieses Inhaltsfragment in der App in einer Vorschau wiedergibt.
src/App.js
...
function App() {
return (
<Router>
<div className="App">
<header>
<Link to={"/"}>
<img src={logo} className="logo" alt="WKND Logo"/>
</Link>
<hr />
</header>
<Routes>
{/* The route's path must match the Adventure Model's Preview URL expression. In React since the path has `/` you must use wildcards to match instead of the usual `:path` */}
<Route path='/adventure/*' element={<AdventureDetail />}/>
<Route path="/" element={<Home />}/>
</Routes>
</div>
</Router>
);
}
export default App;
Die AdventureDetail
-Komponente analysiert einfach den Pfad des Inhaltsfragments, der über die ${contentFragment.path}
URL-Ausdruck, über die Route-URL und verwendet sie zum Erfassen und Rendern des WKND-Abenteuers.
src/components/AdventureDetail.js
...
function AdventureDetail() {
// Read the `path` value which is the parameter used to query for the adventure's details
// since the params value captures the `*` wildcard in `/adventure/*`, or everything after the first `/` in the Content Fragment path.
const params = useParams();
const pathParam = params["*"];
// Add the leading '/' back on
const path = '/' + pathParam;
// Query AEM for the Adventures's details, using the Content Fragment's `path`
const { adventure, references, error } = useAdventureByPath(path);
// Handle error and loading conditions
if (error) {
return <Error errorMessage={error} />;
} else if (!adventure) {
return <Loading />;
}
return (<div className="adventure-detail">
...
<AdventureDetailRender {...adventure} references={references} />
</div>);
}
...