Crea sito da modello

Scopri come creare rapidamente un nuovo sito AEM utilizzando un modello di sito.

La storia finora

Nel documento precedente del percorso di creazione di siti rapidi AEM, Comprendere Cloud Manager e il flusso di lavoro per la creazione rapida di siti, hai appreso di Cloud Manager e di come si collega il nuovo processo di creazione rapida dei siti e ora dovresti:

  • Scopri in che modo AEM Sites e Cloud Manager collaborano per facilitare lo sviluppo front-end
  • Scopri come il passaggio di personalizzazione front-end è completamente scollegato dalla AEM e non richiede alcuna conoscenza AEM.

Questo articolo si basa su questi elementi di base, in modo da poter effettuare il primo passaggio di configurazione e creare un nuovo sito da un modello che puoi personalizzare successivamente utilizzando gli strumenti front-end.

Obiettivo

Questo documento spiega come creare rapidamente un nuovo sito AEM utilizzando un modello di sito. Dopo la lettura è necessario:

  • Scopri come ottenere AEM modelli di sito.
  • Scopri come creare un nuovo sito utilizzando un modello.
  • Scopri come scaricare il modello dal tuo nuovo sito per fornire allo sviluppatore front-end.

Ruolo responsabile

Questa parte del percorso si applica all'amministratore AEM.

Modelli per siti

I modelli di sito consentono di combinare i contenuti di base del sito in un pacchetto comodo e riutilizzabile. I modelli di sito generalmente contengono il contenuto e la struttura di base del sito, nonché informazioni sullo stile del sito per consentire un rapido avvio del nuovo sito. La struttura effettiva è la seguente:

  • files: Cartella con il kit dell'interfaccia utente, XD file ed eventualmente altri file
  • previews: Cartella con schermate del modello di sito
  • site: Pacchetto di contenuti del contenuto copiato per ogni sito creato da questo modello, ad esempio modelli di pagina, pagine e così via.
  • theme: Sorgenti del tema del modello per modificare l'aspetto del sito, inclusi CSS, JavaScript e così via.

I modelli sono potenti perché possono essere riutilizzati in modo che gli autori dei contenuti possano creare rapidamente un sito. Inoltre, poiché è possibile disporre di più modelli nell'installazione AEM, è possibile soddisfare le diverse esigenze aziendali in modo flessibile.

NOTA

Il modello di sito non deve essere confuso con i modelli di pagina. I modelli di sito qui descritti definiscono la struttura complessiva di un sito. Un modello di pagina definisce la struttura e il contenuto iniziale di una singola pagina.

Ottenimento di un modello di sito

Il modo più semplice per iniziare è scarica l’ultima versione del modello di sito standard AEM dal relativo archivio GitHub.

Una volta scaricato puoi caricarlo nel tuo ambiente AEM come faresti con qualsiasi altro pacchetto. Consulta la sezione Sezione Risorse aggiuntive per informazioni su come lavorare con i pacchetti, se hai bisogno di ulteriori informazioni su questo argomento.

SUGGERIMENTO

Il modello di sito standard AEM può essere personalizzato per soddisfare le esigenze del progetto ed evitare la necessità di ulteriori personalizzazioni. Tuttavia questo argomento va oltre il campo di applicazione del percorso. Per ulteriori informazioni, consulta la documentazione GitHub del modello di sito standard .

SUGGERIMENTO

Puoi anche scegliere di generare il modello dall’origine come parte del flusso di lavoro del progetto. Tuttavia questo argomento va oltre il campo di applicazione del percorso. Per ulteriori informazioni, consulta la documentazione GitHub del modello di sito standard .

Installazione di un modello di sito

L'utilizzo di un modello per creare un nuovo sito è molto semplice.

  1. Accedi all’ambiente di authoring AEM e passa alla console Sites

    • https://<your-author-environment>.adobeaemcloud.com/sites.html/content
  2. Tocca o fai clic su Crea in alto a destra dello schermo e dal menu a discesa seleziona Sito da modello.

    Creazione di un nuovo sito da un modello

  3. Nella procedura guidata Crea sito, tocca o fai clic su Importa nella parte superiore sinistra della colonna.

    Creazione guidata sito

  4. Nel browser dei file, individua il modello scaricato in precedenza e tocca o fai clic su Carica.

  5. Una volta caricato, viene visualizzato nell’elenco dei modelli disponibili. Tocca o fai clic su di esso per selezionarlo (che rivela anche informazioni sul modello nella colonna di destra), quindi tocca o fai clic su Successivo.

    Seleziona un modello

  6. Specifica un titolo per il sito. Se omesso, è possibile specificare un nome di sito o generarlo dal titolo.

    • Il titolo del sito viene visualizzato nella barra del titolo del browser.
    • Il nome del sito diventa parte dell’URL.
  7. Tocca o fai clic su Crea e il nuovo sito viene creato dal modello di sito.

    Dettagli del nuovo sito

  8. Nella finestra di dialogo di conferma visualizzata, tocca o fai clic su Fine.

    Finestra di dialogo di successo

  9. Nella console Sites, i nuovi siti sono visibili e possono essere spostati per esplorare la struttura di base definita dal modello.

    Nuova struttura del sito

Gli autori dei contenuti possono ora iniziare a creare.

È Richiesta Un'Ulteriore Personalizzazione?

I modelli di sito sono molto potenti e flessibili e è possibile creare qualsiasi numero per un progetto, consentendo di creare agevolmente varianti di sito. A seconda del livello di personalizzazione già eseguito sul modello di sito utilizzato, potrebbe non essere necessaria alcuna personalizzazione front-end aggiuntiva.

  • Se il tuo sito non richiede una personalizzazione aggiuntiva, congratulazioni! Il tuo percorso finisce qui!
  • Se hai ancora bisogno di una personalizzazione front-end aggiuntiva o se desideri semplicemente comprendere l’intero processo nel caso in cui ti occorra una personalizzazione futura, continua a leggere.

Pagina di esempio

Se hai bisogno di ulteriori personalizzazioni front-end, ricorda che lo sviluppatore front-end potrebbe non avere familiarità con i dettagli del contenuto. Pertanto, è consigliabile fornire allo sviluppatore un percorso a contenuti tipici che possono essere utilizzati come base di riferimento in quanto il tema è personalizzato. Un esempio tipico è la home page della lingua master del sito.

  1. Nel browser Sites individua la home page della lingua master del sito, quindi tocca o fai clic sulla pagina per selezionarla, quindi tocca o fai clic su Modifica nella barra dei menu.

    Pagina principale tipica

  2. Nell’editor, seleziona la Informazioni pagina nella barra degli strumenti e quindi Visualizza come pubblicato.

    Modifica della home page

  3. Nella scheda visualizzata, copia il percorso del contenuto dalla barra degli indirizzi. Avrà un aspetto simile a /content/<your-site>/en/home.html?wcmmode=disabled.

    Home page

  4. Salva il percorso da fornire successivamente allo sviluppatore front-end.

Scarica il tema

Ora che il sito è stato creato, il tema del sito generato dal modello può essere scaricato e fornito allo sviluppatore front-end per la personalizzazione.

  1. Nella console Sites , mostra le Sito barra.

    Mostra barra dei siti

  2. Tocca o fai clic sulla directory principale del nuovo sito, quindi tocca o fai clic su Scaricare le origini dei temi nella barra del sito.

    Scaricare origini tema

Ora disponi di una copia dei file di origine del tema nei file di download.

Configurazione utente proxy

Affinché lo sviluppatore front-end possa visualizzare in anteprima le personalizzazioni utilizzando il contenuto effettivo AEM dal sito, è necessario impostare un utente proxy.

  1. In AEM dalla navigazione principale vai a Strumenti -> Sicurezza -> Utenti.

  2. Nella console di gestione utenti, tocca o fai clic su Crea.

    Console di gestione utenti

  3. In Crea nuovo utente finestra è necessario fornire almeno:

    • ID - Prendi nota di questo valore in quanto devi fornirlo allo sviluppatore front-end.
    • Password - Salvare questo valore in modo sicuro in un archivio password, in quanto è necessario fornirlo allo sviluppatore front-end.

    Nuovi dettagli utente

  4. Sulla Gruppi aggiungi l'utente proxy al contributors gruppo.

    • Digitazione del termine contributors attiva AEM funzione di completamento automatico per selezionare facilmente il gruppo.

    Aggiungi al gruppo

  5. Tocca o fai clic su Salva e chiudi.

La configurazione è stata completata. Gli autori dei contenuti possono ora iniziare a creare contenuti nella preparazione del sito e iniziare a personalizzarli front-end nel passaggio successivo del percorso.

Novità

Dopo aver completato questa parte del percorso di creazione siti rapidi AEM, è necessario:

  • Scopri come ottenere AEM modelli di sito.
  • Scopri come creare un nuovo sito utilizzando un modello.
  • Scopri come scaricare il modello dal tuo nuovo sito per fornire allo sviluppatore front-end.

Sviluppare questa conoscenza e continuare il percorso di creazione siti rapida AEM revisione successiva del documento Imposta La Pipeline, dove creerai una pipeline front-end per gestire la personalizzazione del tema del sito.

Risorse aggiuntive

Mentre si consiglia di passare alla parte successiva del percorso Creazione rapida siti esaminando il documento Imposta La Pipeline, di seguito sono riportate alcune risorse aggiuntive facoltative che approfondiscono alcuni concetti menzionati in questo documento, ma non è necessario che continuino sul percorso.

In questa pagina