Modelli di pagina

In questo capitolo esamineremo la relazione tra un modello di pagina e una pagina. Costruiremo un modello di articolo di Magazine senza stile basato su alcuni modelli da AdobeXD. Durante il processo di creazione del modello, sono inclusi i componenti core e le configurazioni di policy avanzate.

Prerequisiti

Si tratta di un tutorial in più parti e si presume che i passaggi descritti in Modifica del contenuto dell’autore e pubblicazione capitolo completato.

Obiettivo

  1. Comprendi i dettagli dei modelli di pagina e come possono essere utilizzati i criteri per applicare il controllo granulare del contenuto della pagina.
  2. Scopri come i modelli e le pagine sono collegati.
  3. Crea un nuovo modello e crea una pagina.

Cosa verrà creato

In questa parte dell’esercitazione, verrà creato un nuovo modello Pagina articoli di Magazine che può essere utilizzato per creare nuovi articoli della rivista e allinearsi con una struttura comune. Il modello sarà basato sulle progettazioni e su un kit di interfaccia utente prodotto in AdobeXD. Questo capitolo si concentra solo sulla costruzione della struttura o dello scheletro del modello. Non verrà implementato alcun stile, ma il modello e le pagine funzioneranno.

Crea il modello di pagina dell’articolo per la rivista

Quando si crea una pagina, è necessario selezionare un modello da utilizzare come base per la creazione della nuova pagina. Il modello definisce la struttura della pagina risultante, il contenuto iniziale e i componenti consentiti.

Ci sono 3 aree principali di Modelli di pagina:

  1. Struttura - definisce i componenti che fanno parte del modello. Gli autori dei contenuti non potranno modificarli.
  2. Contenuto iniziale - definisce i componenti con cui inizierà il modello, che possono essere modificati e/o eliminati dagli autori di contenuti
  3. Criteri - definisce le configurazioni sul comportamento dei componenti e sulle opzioni disponibili per gli autori.

Quindi, crea un nuovo modello in AEM che corrisponda alla struttura dei modelli. Questo si verificherà in un'istanza locale di AEM. Segui i passaggi del video seguente:

Puoi usare la seguente miniatura per identificare il modello (o caricarne uno personalizzato!)

Articolo Miniatura del modello di pagina

Pacchetto soluzione

Una fine soluzione del modello Magazine può essere scaricato e installato tramite Gestione pacchetti.

Aggiornare intestazione e piè di pagina con frammenti esperienza

Una pratica comune nella creazione di contenuto globale, ad esempio intestazione o piè di pagina, consiste nell’utilizzare un’ Frammento esperienza. Frammenti esperienza consente agli utenti di combinare più componenti per creare un singolo componente utilizzabile come riferimento. I frammenti esperienza hanno il vantaggio di supportare la gestione multisito e localizzazione.

Il modello Sito generava un’intestazione e un piè di pagina. Quindi, aggiorna i frammenti esperienza in modo che corrispondano ai pattern. Segui i passaggi del video seguente:

Passaggi di alto livello per il video seguente:

  1. Scarica il pacchetto di contenuti di esempio WKND-Starter-Assets-Skate-Article-1.2.zip.
  2. Carica e installa il pacchetto di contenuti utilizzando Gestione pacchetti.
  3. Aggiornare i frammenti esperienza di intestazione e piè di pagina per utilizzare il logo WKND

Creare una pagina dell’articolo di Magazine

Quindi, crea una nuova pagina utilizzando il modello Pagina articolo di Magazine . Crea il contenuto della pagina in modo che corrisponda ai modelli di sito. Segui i passaggi del video seguente:

Utilizza la testo fornito per popolare il corpo dell'articolo.

Congratulazioni!

Congratulazioni, hai appena creato un nuovo modello e una nuova pagina con Adobe Experience Manager Sites.

Passaggi successivi

A questo punto la pagina dell'articolo della rivista e il sito non corrispondono agli stili del marchio per WKND. Segui Tema esercitazione per scoprire le best practice per aggiornare il codice front-end CSS e JavaScript utilizzato per applicare gli stili globali al sito.

Pacchetto soluzione

È disponibile un pacchetto della soluzione per questo capitolo da scaricare: WKND-Magazine-Template-SOLUTION-1.0.zip.

In questa pagina