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

Previsualizar direcciones URL, uso Expresiones de URL, se establecen 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 Previsualizar abre la URL de vista previa del modelo de fragmento de contenido e inserta los valores del fragmento de contenido abierto en la 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 utilizadas para previsualizar un fragmento de contenido deben ser componibles mediante Expresiones de URL. En esta versión con vista previa habilitada de la aplicación WKND, los fragmentos de contenido de aventura se muestran a través de la AdventureDetail componente enlazado a la ruta /adventure<CONTENT FRAGMENT PATH>. Por lo tanto, la URL de vista previa del modelo WKND Adventure debe configurarse como https://preview.app.wknd.site:3000/adventure${contentFragment.path} para resolver en esta ruta.

La vista previa de fragmentos de contenido solo funciona si la aplicación tiene una ruta direccionable, que se puede rellenar con Expresiones de URL que procesan ese fragmento de contenido en la aplicación de forma previsualizable.

...
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 AdventureDetail El componente simplemente analiza la ruta del fragmento de contenido, insertado en la URL de vista previa mediante el ${contentFragment.path} Expresión de URL, desde la dirección URL de ruta, y lo utiliza para recopilar y procesar la WKND Adventure.

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