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 si basa 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 vengono implementati stili, ma il modello e le pagine sono funzionanti.

Crea il modello di pagina dell’articolo per la rivista

Quando crei una pagina devi selezionare un modello, che viene utilizzato 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. Non sono modificabili dagli autori dei contenuti.
  2. Contenuto iniziale - definisce i componenti con cui inizia 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