Come aggiungere una pagina nei servizi di distribuzione AEM Edge

Se hai appena finito di seguire il tutorial introduttivo ufficiale di Edge Deliver Services (d'ora in poi EDS), ti starai chiedendo come espandere il sito Web che hai appena creato. Questo articolo illustra come creare e pubblicare una nuova pagina nel sito Web AEM. Questo articolo presuppone che tu abbia completato l'esercitazione originale e che tu abbia un sito Web in esecuzione con l'estensione AEM Sidekick installata sul tuo browser.

Innanzitutto, crea un nuovo file nel tuo Google Drive

Quando crei il tuo nuovo file, ti verrà chiesto di "Crea e condividi", poiché hai già condiviso la tua cartella con [email protected] nel tutorial ufficiale. La condivisione della cartella e, per estensione, dei documenti al suo interno, consente a EDS di visualizzare ed estrarre i contenuti da Google Drive al tuo sito web. Fai clic su "Crea e condividi" e inizia a modificare il tuo nuovo documento.

La prima cosa da tenere presente quando si modifica un documento in un progetto EDS è il nome del documento. Questo nome verrà utilizzato per creare l'URL in cui risiede la pagina.

Ad esempio, l'URL principale del progetto che vedi negli screenshot di questo blog è https://main--drews-franklin-demo--drew-cummings.hlx.live/.

Se creo un nuovo documento denominato "nuova pagina", l'URL in cui la pagina esisterà al momento della pubblicazione è https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page. Vale la pena notare che tutti gli URL generati saranno minuscoli, anche se il nome del documento è in maiuscolo. Per motivi di leggibilità e navigazione, assicurati che i nomi dei documenti siano brevi e pertinenti.

Vai avanti e aggiorna il titolo del tuo documento in "nuova pagina"

Ora aggiungiamo un titolo all'inizio del nostro documento. Imposta il testo su "Titolo 1" e scrivi il titolo.

Vediamo come appare sul sito web. Vai avanti e vai all'URL generato, nel mio caso https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page, e vedi come si perdeva

Oh no! Se vedi questo, niente panico. Ecco come appare un errore "pagina non trovata" nella demo EDS predefinita. Il nostro sito web non riesce a trovare la nostra pagina in questo momento perché non l'abbiamo ancora visualizzata in anteprima e pubblicata. Torna al documento e fai clic sull'estensione AEM Sidekick, l'icona più a sinistra nello screenshot seguente

Dopo un momento, dovrebbe apparire la barra degli strumenti dell'helper. Dovresti notare un pulsante "anteprima" nella parte sinistra con un punto rosso. Questo punto rosso indica che ci sono nuovi contenuti da mettere in scena e inviare al sito web. Vai avanti e fai clic su quel pulsante e guarda la pagina che carica per te.

Questa è l'anteprima della tua nuova pagina. Ecco come apparirà la tua pagina sul sito "live" una volta pubblicata. È importante notare che, sebbene il contenuto non sia stato pubblicato, non verrà visualizzato sulla pagina live e una pagina che non è stata pubblicata non verrà visualizzata sul sito Web live. Ciò ti consente di sperimentare con i contenuti e modificare le cose a tuo piacimento senza che gli utenti del tuo sito lo vedano fino a quando non sei pronto a pubblicarlo. Per ora, lasciamo questa pagina non pubblicata, e torniamo al Google Doc per aggiungere altri contenuti.

Per come esiste in questo momento, la nostra pagina è piuttosto semplice. Aggiungiamo un po' di colore con un'immagine. Per semplicità, useremo l'immagine blu del DNA dalla pagina di esempio.

Premi l'anteprima e guarda come appare.

Sembra buono! Se non vuoi che il testo venga sovrapposto sopra l'immagine, posiziona semplicemente l'immagine sotto il testo dell'intestazione nel documento invece che sopra di esso e otterrai una pagina simile a questa.

La sovrapposizione del testo si verifica solo per la prima immagine dell'articolo e solo se formattata come mostrato inizialmente, con il testo in stile Titolo o Titolo 1 direttamente sotto l'immagine.

Ora aggiungiamo un po' di contenuto testuale a questo articolo. Userò Lorem Ipsum, un testo latino tradizionalmente utilizzato nell'industria editoriale per sperimentare con i layout del testo. Lorum Ipsum ci permette di vedere come apparirà il contenuto dell'alfabeto arabo su una pagina senza distrarci leggendolo accidentalmente. Sentiti libero di aggiungere qualsiasi contenuto di testo che desideri. Ecco come appare nel mio Google Doc:

Ed ecco come appare nella mia pagina di anteprima:

Infine, vediamo come apparirà un'immagine se posizionata in linea con il contenuto della pagina. Aggiungerò una delle immagini dalla pagina demo dopo il primo paragrafo per dimostrare come apparirà sul sito sottostante:

Vale la pena notare che EDS estrae i contenuti da Google Doc e li utilizza per generare file HTML che creano il sito web. Di conseguenza, le dimensioni dell'immagine in Google Doc non sono correlate alle dimensioni dell'immagine nella pagina in anteprima/pubblicata. Se si desidera regolare le dimensioni dell'immagine sul sito, è necessario regolare la risoluzione nativa dell'immagine.

Ora che abbiamo una pagina che siamo felici di mostrare al mondo, abbiamo un ultimo passo che dobbiamo compiere prima di pubblicare. Voglio cambiare il titolo di questa pagina nei metadati da "La mia nuova pagina" a "Pagina demo" senza cambiare il titolo del mio articolo. Voglio anche aggiungere una descrizione ai metadati per rendere la pagina più facile da trovare per i motori di ricerca. Per fare ciò, dovremo aggiungere un blocco di metadati.

Il modo più semplice per aggiungere un blocco di metadati è semplicemente copiare e incollare quello dalla home page della demo, ma se sei interessato a crearne uno da zero ti guiderò attraverso questo processo.

Innanzitutto, inserisci una tabella 2X3 alla fine del documento. Evidenzia le celle nella prima riga, fai clic con il pulsante destro del mouse e seleziona "unisci celle".

Digita "Metadati" nella riga superiore, quindi digita "Titolo" e "Descrizione" nelle celle di sinistra delle due righe successive. Digita il titolo a destra della cella "Titolo" e la descrizione a destra della cella "Descrizione". Il risultato finale dovrebbe essere simile a questo:

Vai avanti e visualizza l'anteprima della pagina ora. Noterai che il contenuto della pagina non è cambiato affatto, ma se guardi la scheda in Chrome, il nostro nuovo titolo verrà elencato al posto del titolo predefinito che avevamo in precedenza.

Se esaminiamo il file HTML della pagina web, possiamo vedere che sia il titolo che la descrizione sono presenti come proprietà della pagina web

Sei pronto per pubblicare! Fai clic sul pulsante "Pubblica" sul lato sinistro dell'estensione AEM Sidekick visualizzata nella pagina di anteprima e visualizza la nuova pagina Web live sul sito Web.

Congratulazioni per aver aggiunto una pagina al tuo sito web! C'è la possibilità che, se in precedenza hai visitato l'URL di questa pagina prima della pubblicazione e hai ricevuto l'errore 404 Pagina non trovata, vedrai comunque quell'errore dopo la pubblicazione. Questo può accadere per una serie di motivi, ma a meno che tu non abbia ricevuto un messaggio di errore dall'estensione AEM Sidekick, è improbabile che il tuo contenuto sia effettivamente stato approvato. Attendi un minuto o due per aggiornare la pagina e dovresti vedere la tua pagina pubblicata.

Se ti è piaciuto questo tutorial e vuoi saperne di più sui prodotti AEM, dai un'occhiata al nostro articolo su cos'è AEM qui.

Informazioni sull'autore

Contattaci

Episodi del podcast