Personalizza il tema del sito

Scopri come è fatto il tema del sito, come personalizzarlo e come testarlo utilizzando contenuti live AEM.

La storia finora

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:

• Comprendere ad alto livello cosa è Cloud Manager.
• Aver recuperato le credenziali per accedere al Git AEM in modo da poter eseguire il commit delle personalizzazioni.

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.

Obiettivo

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:

• Comprendere la struttura di base del tema del sito e come modificarlo.
• Scopri come testare le personalizzazioni dei temi utilizzando contenuti AEM reali tramite proxy locale.
• Scopri come eseguire il commit delle modifiche nell’archivio Git AEM.

Ruolo responsabile

Questa parte del percorso è dedicata allo sviluppatore front-end.

Comprendere la struttura del tema

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 & CSS
• src/site: file JS & CSS applicabili all’intero sito
• src/components: file JS & CSS specifici per i componenti AEM
• src/resources: file statici come icone, loghi e font

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.

Avvio del proxy locale

1. Dalla riga di comando, passa alla root del tema nel computer locale.

2. Esegui npm install e npm recupera le dipendenze e installa il progetto.

   

3. Esegui npm run live e il server proxy viene avviato.

   

4. 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.

   

   SUGGERIMENTO

   Se non disponi di queste credenziali, contatta l’amministratore facendo riferimento al Sezione Configurazione utente proxy dell'articolo Creazione sito da modello in questo percorso.

5. Una volta effettuato l’accesso, modifica l’URL nel browser in modo che indirizzi al percorso del contenuto di esempio fornito dall’amministratore AEM.

   • Ad esempio, se il percorso fornito è stato /content/<your-site>/en/home.html?wcmmode=disabled
   • L’URL viene modificato in 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.

Personalizzare il tema

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.

1. Nell’editor, apri il file <your-theme-sources>/src/site/_variables.scss

   

2. Modifica la variabile $color-background e impostala su un valore diverso dal bianco. In questo esempio, viene utilizzato orange.

   

3. Quando salvi il file, puoi vedere che il server proxy riconosce la modifica tramite la riga [Browsersync] File event [change].

   

4. Tornando al browser del server proxy, la modifica è immediatamente visibile.

   

Puoi continuare a personalizzare il tema in base ai requisiti forniti dall’amministratore AEM.

Eseguire il commit delle modifiche

Una volta completate le personalizzazioni, puoi eseguirne il commit nell’archivio Git AEM. Innanzitutto devi clonare l’archivio sul computer locale.

1. Dalla riga di comando, individua il punto in cui desideri duplicare l’archivio.

2. 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.

   

3. Sposta il progetto tema che stavi modificando nell’archivio clonato con un comando simile a mv <site-theme-sources> <cloned-repo>

4. 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
   

5. Le personalizzazioni vengono inviate all’archivio Git AEM.

   

Le personalizzazioni ora vengono memorizzate in modo sicuro nell’archivio Git AEM.

Novità

Dopo aver completato questa parte del percorso di creazione rapida sito di AEM, è necessario:

• Comprendere la struttura di base del tema del sito e come modificarlo.
• Scopri come testare le personalizzazioni dei temi utilizzando contenuti AEM reali tramite proxy locale.
• Scopri come eseguire il commit delle modifiche nell’archivio Git AEM.

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.

Risorse aggiuntive

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.

• Tema del sito AEM: questo è l’archivio GitHub del tema del sito AEM.
• npm: i temi AEM utilizzati per costruire rapidamente i siti sono basati su npm.
• webpack: i temi AEM utilizzati per costruire rapidamente i siti si basano su webpack.

Risorse Business.Adobe.com