Scopri come è fatto il tema del sito, come personalizzarlo e come testarlo utilizzando contenuti live AEM.
Nel documento precedente del percorso di Creazione Rapida dei Siti AEM, Recuperare le informazioni di accesso all’archivio Git, hai imparato come gli sviluppatori front-end usino Cloud Manager per accedere alle informazioni dell’archivio git, e ora dovresti:
Questa parte del percorso tratta il passaggio successivo, analizzando il tema del sito e mostrando come personalizzarlo e quindi eseguire il commit di tali personalizzazioni utilizzando le credenziali di accesso recuperate.
Questo documento spiega come viene creato il tema del sito AEM, come personalizzarlo e come testarlo utilizzando il contenuto live AEM. Dopo la lettura dovresti:
Questa parte del percorso è dedicata allo sviluppatore front-end.
Estrai il tema fornito dall’amministratore AEM nel punto in cui desideri modificarlo e aprilo nel tuo editor preferito.
Vedi che il tema è un tipico progetto front-end. Le parti più importanti della struttura sono:
src/main.ts
: il punto di ingresso principale del tema JS & CSSsrc/site
: file JS & CSS applicabili all’intero sitosrc/components
: file JS & CSS specifici per i componenti AEMsrc/resources
: file statici come icone, loghi e fontPer ulteriori informazioni sul tema del sito AEM standard, consulta il collegamento GitHub nella sezione Risorse aggiuntive alla fine del documento.
Una volta acquisita familiarità con la struttura del progetto tematico, avvia il proxy locale in modo da visualizzare tutte le personalizzazioni dei temi in tempo reale in base al contenuto AEM effettivo.
Dalla riga di comando, passa alla root del tema nel computer locale.
Esegui npm install
e npm recupera le dipendenze e installa il progetto.
Esegui npm run live
e il server proxy viene avviato.
All'avvio del server proxy, apre automaticamente un browser a http://localhost:7001/
. Tocca o fai clic su ACCEDI LOCALMENTE (SOLO AMMINISTRATORE) e accedi con le credenziali utente proxy fornite dall'amministratore AEM.
Se non disponi di queste credenziali, contatta l’amministratore facendo riferimento alla sezione Configurazione di un utente proxy dell’articolo Creare un sito da un modello in questo percorso.
Una volta effettuato l’accesso, modifica l’URL nel browser in modo che indirizzi al percorso del contenuto di esempio fornito dall’amministratore AEM.
/content/<your-site>/en/home.html?wcmmode=disabled
http://localhost:7001/content/<your-site>/en/home.html?wcmmode=disabled
Puoi navigare nel sito per esplorare il contenuto. Il sito viene estratto in diretta dall’istanza AEM in tempo reale, in modo da poter effettuare le personalizzazioni del tema rispetto al contenuto reale.
Ora puoi iniziare a personalizzare il tema. Di seguito è riportato un semplice esempio per illustrare come visualizzare le modifiche in tempo reale tramite il proxy.
Nell’editor, apri il file <your-theme-sources>/src/site/_variables.scss
Modifica la variabile $color-background
e impostala su un valore diverso dal bianco. In questo esempio, viene utilizzato orange
.
Quando salvi il file, puoi vedere che il server proxy riconosce la modifica tramite la riga [Browsersync] File event [change]
.
Tornando al browser del server proxy, la modifica è immediatamente visibile.
Puoi continuare a personalizzare il tema in base ai requisiti forniti dall’amministratore AEM.
Una volta completate le personalizzazioni, puoi eseguirne il commit nell’archivio Git AEM. Innanzitutto devi clonare l’archivio sul computer locale.
Dalla riga di comando, individua il punto in cui desideri duplicare l’archivio.
Esegui il comando precedentemente recuperato da Cloud Manager. Dovrebbe essere simile a git clone https://git.cloudmanager.adobe.com/<my-org>/<my-program>/
. Usa il nome utente e la password git che hai recuperato nella parte precedente di questo percorso.
Sposta il progetto tema che stavi modificando nell’archivio clonato con un comando simile a mv <site-theme-sources> <cloned-repo>
Nella directory dell'archivio clonato, esegui il commit dei file dei temi che hai appena spostato con i seguenti comandi.
git add .
git commit -m "Adding theme sources"
git push
Le personalizzazioni vengono inviate all’archivio Git AEM.
Le personalizzazioni ora vengono memorizzate in modo sicuro nell’archivio Git AEM.
Dopo aver completato questa parte del percorso di creazione rapida sito di AEM, è necessario:
Approfondisci l'argomento e continua il percorso di Creazione Rapida dei Siti AEM consultando il documento Distribuire Il tema personalizzato, dove verrà illustrato come distribuire il tema utilizzando la pipeline front-end.
Ti consigliamo di passare alla parte successiva del percorso Creazione Rapida dei Siti consultando il documento Distribuire Il tema personalizzato, tuttavia di seguito sono riportate alcune risorse aggiuntive facoltative che approfondiscono alcuni concetti menzionati in questo documento la cui lettura è facoltativa.