Previsualización del fragmento de contenido
- Se aplica a:
- Experience Manager as a Cloud Service
- Temas:
- Fragmentos de contenido
Creado para:
- Principiante
- Desarrollador
Las aplicaciones sin encabezado de AEM admiten la previsualización de creación integrada. La experiencia de vista previa vincula el editor de fragmentos de contenido del autor de AEM con su aplicación personalizada (a la que se puede dirigir mediante HTTP), lo que permite establecer un vínculo profundo en la aplicación que procesa el fragmento de contenido que se está previsualizando.
Para utilizar la vista previa de fragmentos de contenido, se deben cumplir varias condiciones:
- La aplicación debe implementarse en una URL accesible para los autores
- La aplicación debe configurarse para conectarse al servicio de AEM Author (en lugar del servicio de publicación de AEM)
- La aplicación debe diseñarse con direcciones URL o rutas que puedan usar Ruta de fragmento de contenido o ID para seleccionar los fragmentos de contenido que se mostrarán para su vista previa en la experiencia de la aplicación.
Previsualizar direcciones URL
Las direcciones URL de vista previa, que usan expresiones de URL, están establecidas en las propiedades del modelo de fragmento de contenido.
- Inicie sesión en el servicio de AEM Author como administrador
- Vaya a Herramientas > General > Modelos de fragmentos de contenido
- Seleccione Modelo de fragmento de contenido y seleccione Propiedades en la barra de acciones superior.
- Introduzca la URL de vista previa del modelo de fragmento de contenido mediante expresiones de URL
- La URL de vista previa debe apuntar a una implementación de la aplicación que se conecta al servicio de AEM Author.
Expresiones de URL
Cada modelo de fragmento de contenido puede tener una URL de vista previa establecida. La URL de vista previa se puede parametrizar por fragmento de contenido mediante las expresiones de URL enumeradas en la siguiente tabla. Se pueden utilizar varias expresiones URL en una sola dirección URL de vista previa.
${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}adventureURL de vista previa de ejemplo:
- Una URL de vista previa en el modelo Adventure podría parecerse a
https://preview.app.wknd.site/adventure${contentFragment.path}y se resuelve enhttps://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali - Una URL de vista previa en el modelo Article podría parecerse a
https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation}y resuelvehttps://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main
Vista previa en la aplicación
Cualquier fragmento de contenido que utilice el modelo de fragmento de contenido configurado tiene un botón Vista previa. El botón Vista previa abre la URL de vista previa del modelo de fragmento de contenido e inserta los valores del fragmento de contenido abierto en las expresiones de URL.
Realice una actualización automática (borrando la caché local del explorador) al obtener una vista previa de los cambios en los fragmentos de contenido en la aplicación.
Ejemplo de React
Exploremos la aplicación WKND, una aplicación sencilla de React que muestra aventuras de AEM mediante las API de GraphQL sin encabezado de AEM.
El código de ejemplo está disponible en Github.com.
Direcciones URL y rutas
Las direcciones URL o rutas usadas para obtener una vista previa de un fragmento de contenido deben poder componerse mediante expresiones de URL. En esta versión habilitada para vista previa de la aplicación WKND, los fragmentos de contenido de aventura se muestran a través del componente AdventureDetail enlazado a la ruta /adventure<CONTENT FRAGMENT PATH>. Por lo tanto, la URL de vista previa del modelo WKND Adventure debe establecerse en https://preview.app.wknd.site:3000/adventure${contentFragment.path} para resolverse en esta ruta.
La vista previa de fragmentos de contenido solo funciona si la aplicación tiene una ruta a la que se puede dirigir, que se puede rellenar con expresiones de URL que procesan ese fragmento de contenido en la aplicación de forma que se pueda obtener una vista previa.
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;
Mostrar el contenido creado
El componente AdventureDetail simplemente analiza la ruta del fragmento de contenido, insertada en la URL de vista previa a través de la ${contentFragment.path} expresión de URL, desde la dirección URL de ruta, y la utiliza para recopilar y procesar la aventura de WKND.
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>);
}
...