Voorvertoning van inhoudsfragment
- Onderwerpen:
- Contentfragmenten
Gemaakt voor:
- Beginner
- Ontwikkelaar
AEM Headless-toepassingen ondersteunen geïntegreerde ontwerpvoorvertoning. De voorvertoning koppelt de Inhoudsfragmenteditor van de AEM-auteur aan uw aangepaste app (adresseerbaar via HTTP), zodat een uitgebreide koppeling mogelijk is naar de app die de voorvertoning van het Inhoudsfragment weergeeft.
Aan verschillende voorwaarden moet zijn voldaan om een voorbeeld van een inhoudsfragment te kunnen gebruiken:
- De app moet worden geïmplementeerd op een URL die toegankelijk is voor auteurs
- De app moet zijn geconfigureerd om verbinding te maken met de AEM Author-service (in plaats van de AEM Publish-service)
- App moet met URLs of routes worden ontworpen die weg of identiteitskaart van het Fragment van de Inhoudkunnen gebruiken om de Fragmenten van de Inhoud te selecteren om voor voorproef in de app ervaring te tonen.
Voorvertoning van URL's
Voorproef URLs, gebruikend uitdrukkingen URL, wordt geplaatst op de Eigenschappen van het Model van het Fragment van de Inhoud.
- Aanmelden bij de AEM Author-service als beheerder
- Navigeer aan Hulpmiddelen > Algemeen > de Modellen van het Fragment van de Inhoud
- Selecteer het Model van het Fragment van de Inhoud en selecteer Eigenschappen van de hoogste actiebar.
- Ga voorproef URL voor het Model van het Fragment van de Inhoud in gebruikend uitdrukkingen URL
- De URL van de voorvertoning moet verwijzen naar een implementatie van de app die verbinding maakt met de AEM Author-service.
URL-expressies
Elk inhoudsfragmentmodel kan een voorbeeld-URL hebben. De URL van de voorvertoning kan per inhoudsfragment worden geparametriseerd met behulp van de URL-expressies die in de onderstaande tabel worden vermeld. Meerdere URL-expressies kunnen worden gebruikt in één voorbeeld-URL.
${contentFragment.path}/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali${contentFragment.id}12c34567-8901-2aa3-45b6-d7890aa1c23c${contentFragment.variation}main${contentFragment.model.path}/conf/wknd-shared/settings/dam/cfm/models/adventure${contentFragment.model.name}adventureVoorbeeld-URL's:
- Een voorproef URL op het model van het Adventure kon als
https://preview.app.wknd.site/adventure${contentFragment.path}kijken die aanhttps://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-balioplost - Een voorproef URL op het model van het Artikel kon als
https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation}kijken oplossenhttps://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main
Voorvertoning in app
Voor elk inhoudsfragment dat gebruikmaakt van het geconfigureerde inhoudsfragmentmodel is een knop Voorvertoning beschikbaar. De knoop van de Voorproef opent de voorproef URL van het Model van het Fragment van de Inhoud en injecteert de open waarden van het Fragment van de Inhoud in de uitdrukkingen URL.
Voer hard vernieuwen uit (wissen van de lokale cache van de browser) wanneer u een voorvertoning weergeeft van wijzigingen in inhoudsfragmenten in de app.
Voorbeeld Reageren
Laten we eens kijken naar de WKND-app, een eenvoudige React-toepassing die avonturen van AEM weergeeft met AEM Headless GraphQL API's.
De voorbeeldcode is beschikbaar op Github.com.
URL's en routes
URLs of de routes die aan voorproef worden gebruikt moeten een tevreden Fragment composable zijn gebruikend uitdrukkingen URL. In deze voorvertoningsversie van de WKND-app worden de fragmenten voor avontuurinhoud weergegeven via de AdventureDetail -component die aan de route /adventure<CONTENT FRAGMENT PATH> is gebonden. De URL van de voorvertoning van het WKND-avontuurmodel moet daarom zijn ingesteld op https://preview.app.wknd.site:3000/adventure${contentFragment.path} om deze route te kunnen gebruiken.
De voorproef van het Fragment van de inhoud werkt slechts als app een adresseerbare route heeft, die met uitdrukkingen URLkan worden bevolkt die dat Fragment van de Inhoud in app op een voorproefable manier teruggeven.
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;
De geschreven inhoud weergeven
De AdventureDetail component ontleedt eenvoudig de weg van het Fragment van de Inhoud, die in Voorproef URL via de ${contentFragment.path} wordt ingespoten uitdrukking URL, van de route URL, en gebruikt het om het Adventure WKND te verzamelen en terug te geven.
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>);
}
...