Anteprima frammento di contenuto

Le applicazioni headless AEM supportano l’anteprima integrata dell’authoring. L’esperienza di anteprima collega l’editor dei frammenti di contenuto dell’autore AEM con l’app personalizzata (indirizzabile tramite HTTP), consentendo un collegamento diretto nell’app che esegue il rendering del frammento di contenuto visualizzato in anteprima.

Per utilizzare l’anteprima del frammento di contenuto, è necessario soddisfare diverse condizioni:

  1. L’app deve essere distribuita in un URL accessibile agli autori
  2. L’app deve essere configurata per la connessione al servizio di authoring AEM (anziché al servizio di pubblicazione AEM)
  3. L’app deve essere progettata con URL o percorsi che possono utilizzare ID o percorso del frammento di contenuto per selezionare i frammenti di contenuto da visualizzare in anteprima nell’esperienza dell’app.

URL di anteprima

URL di anteprima, utilizzo Espressioni URL, sono impostati nelle proprietà del modello per frammenti di contenuto.

URL di anteprima del modello per frammenti di contenuto

  1. Accedere al servizio di creazione AEM come amministratore
  2. Accedi a Strumenti > Generale > Modelli per frammenti di contenuto
  3. Seleziona la Modello per frammenti di contenuto e seleziona Proprietà dalla barra delle azioni superiore.
  4. Immetti l’URL di anteprima per il modello per frammenti di contenuto utilizzando Espressioni URL
    • L’URL di anteprima deve puntare a una distribuzione dell’app che si connette al servizio di authoring AEM.

Espressioni URL

Per ogni modello per frammenti di contenuto può essere impostato un URL di anteprima. L’URL di anteprima può essere parametrizzato per frammento di contenuto utilizzando le espressioni URL elencate nella tabella seguente. È possibile utilizzare più espressioni URL in un singolo URL di anteprima.

Espressione URL
Valore
Percorso frammento di contenuto
${contentFragment.path}
/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
ID frammento di contenuto
${contentFragment.id}
12c34567-8901-2aa3-45b6-d7890aa1c23c
Variante del frammento di contenuto
${contentFragment.variation}
main
Percorso modello per frammenti di contenuto
${contentFragment.model.path}
/conf/wknd-shared/settings/dam/cfm/models/adventure
Nome modello per frammenti di contenuto
${contentFragment.model.name}
adventure

Esempio di URL di anteprima:

  • Un URL di anteprima su Avventura il modello potrebbe essere simile a https://preview.app.wknd.site/adventure${contentFragment.path} che si risolve in https://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
  • Un URL di anteprima su Articolo il modello potrebbe essere simile a https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation} i risolve https://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main

Anteprima in-app

Qualsiasi frammento di contenuto che utilizza il modello per frammenti di contenuto configurato dispone di un pulsante Anteprima. Il pulsante Anteprima apre l’URL di anteprima del modello per frammenti di contenuto e inserisce i valori del frammento di contenuto aperto nel Espressioni URL.

Pulsante Anteprima

Esegui un aggiornamento rigido (cancellazione della cache locale del browser) quando visualizzi in anteprima le modifiche ai frammenti di contenuto nell’app.

Esempio di React

Esploriamo l’app WKND, una semplice applicazione React che mostra le avventure dell’AEM utilizzando le API GraphQL headless dell’AEM.

Il codice di esempio è disponibile su Github.com.

URL e route

Gli URL o i percorsi utilizzati per visualizzare in anteprima un frammento di contenuto devono essere componibili utilizzando Espressioni URL. In questa versione dell’app WKND abilitata per l’anteprima, i frammenti di contenuto dell’avventura vengono visualizzati tramite AdventureDetail componente associato alla route /adventure<CONTENT FRAGMENT PATH>. Pertanto, l’URL di anteprima del modello WKND Adventure deve essere impostato su https://preview.app.wknd.site:3000/adventure${contentFragment.path} per risolvere questa route.

L’anteprima del frammento di contenuto funziona solo se l’app dispone di un percorso indirizzabile che può essere popolato con Espressioni URL che esegue il rendering del frammento di contenuto nell’app in modo da consentirne la visualizzazione in anteprima.

  • 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;

Visualizzare il contenuto creato

Il AdventureDetail Il componente analizza semplicemente il percorso del frammento di contenuto, inserito nell’URL di anteprima tramite il ${contentFragment.path} Espressione URL, dall’URL della route e lo utilizza per raccogliere ed eseguire il rendering di WKND Adventure.

  • 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>);
}
...
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4