Previsualización del fragmento de contenido

AEM Las aplicaciones sin encabezado admiten la previsualización de creación integrada. AEM La experiencia de vista previa vincula el editor de fragmentos de contenido del autor 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:

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.

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.

URL de vista previa de ejemplo:

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

AEM AEM Vamos a explorar la aplicación WKND, una aplicación sencilla de React que muestra aventuras de los usuarios que utilizan las API de GraphQL sin encabezado de la aplicación de la aplicación de la manera más rápida y sencilla.

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.

...
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.

...
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>);
}
...