Guida introduttiva per sviluppatori per l’authoring WYSIWYG con Edge Delivery Services edge-dev-getting-started
Questa guida illustra un nuovo sito Adobe Experience Manager con Edge Delivery Services e l’Editor universale per l’authoring dei contenuti WYSIWYG.
Prerequisiti prerequisites
Prima di iniziare questa guida, è necessario avere già familiarità con le nozioni di base di e avere accesso a Edge Delivery Services, quali:
- Il completamento di un tutorial su Edge Delivery Service.
- L’accesso a una sandbox di AEM Cloud Service.
- L’attivazione dell’Editor universlae nello stesso ambiente sandbox.
Scegliere l’editor giusto editor-choice
AEM offre due diversi editor di contenuti; la possibilità di scegliere quale utilizzare dipende dalla tua situazione.
- Editor universale: questa dovrebbe essere la scelta predefinita per i nuovi siti.
- Editor pagina AEM: deve essere scelto per una migrazione AEM Sites esistente verso Edge Delivery Services.
Questa guida è incentrata sui Progetti AEM di Edge Delivery Services che utilizzano l’Editor universale. Per ulteriori dettagli sulla scelta dell’editor giusto e la migrazione di AEM Sites esistenti verso Edge Delivery Services, consulta il documento Utilizzo di Edge Delivery Services con AEM.
Concetti fondamentali durante lo sviluppo di Edge Delivery Services core-concepts
Edge Delivery Services si basa sul concetto di blocchi. AEM viene fornito con una libreria completa di blocchi predefiniti che possono essere estesi per soddisfare le esigenze del progetto. Il codice per i progetti di Edge Delivery Services viene gestito in GitHub.
Blocchi blocks
I blocchi sono la parte più importante di una pagina distribuita da Edge Delivery Services. Un blocco incapsula stile e codice che guida un componente logico di una pagina di contenuto.
AEM fornisce blocchi standard come parte del prodotto all’interno del modello di progetto. Tali blocchi includono intestazione, testo, immagini, collegamenti, elenchi e così via.
Edge Delivery Services e GitHub github-edge
Edge Delivery sfrutta GitHub per consentirti di gestire e distribuire il codice direttamente dall’archivio GitHub.
Gli autori possono creare contenuti utilizzando l’authoring basato su documenti o contenuti in AEM con l’Editor universale. Gli sviluppatori possono personalizzare la funzionalità del sito utilizzando CSS e JavaScript in GitHub, indipendentemente da come creano il proprio contenuto.
I siti web vengono creati automaticamente per ciascuno dei rami, dall’anteprima del contenuto alla produzione. Ogni risorsa inserita nell’archivio GitHub è disponibile sul sito web senza alcun processo di compilazione.
Guida introduttiva all’authoring e ai Edge Delivery Services WYSIWYG getting-started
Dopo aver completato i prerequisiti e aver effettuato la scelta di utilizzare l’Editor universale, puoi iniziare a utilizzare il tuo progetto.
Creare un progetto GitHub create-github-project
Prima devi creare un nuovo progetto su GitHub, basato sul modello di Adobe.
-
Passa a
https://github.com/adobe-rnd/aem-boilerplate-xwalke fai clic su Usa questo modello e seleziona Crea un nuovo archivio.- Per visualizzare questa opzione, devi aver effettuato l’accesso a GitHub.
-
L’archivio viene assegnato all’utente per impostazione predefinita. Modifica questo stato in base alle esigenze, fornisci un nome e una descrizione all’archivio e fai clic su Crea archivio.
-
In una nuova scheda nello stesso browser, passa a
https://github.com/apps/aem-code-synce fai clic su Configura.
-
Fai clic su Configura per l’organizzazione in cui hai creato il nuovo archivio nel passaggio precedente.
-
Nella pagina GitHub della sincronizzazione del codice AEM in Accesso archivio, seleziona Seleziona solo archivi, seleziona l’archivio creato nel passaggio precedente e quindi fai clic su Salva.
-
Dopo aver installato la sincronizzazione del codice AEM, verrà visualizzata una schermata di conferma. Torna alla scheda del browser del nuovo archivio.
-
Fai clic sul file
fstab.yamlper aprirlo e quindi sull’icona Modifica questo file per modificarlo.
-
Modifica il file
fstab.yamlper aggiornare il punto di montaggio del progetto. Sostituisci l’URL predefinito dei Documenti Google con l’URL dell’istanza di authoring di AEM as a Cloud Service, quindi fai clic su Conferma modifiche….https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main- La modifica del punto di montaggio indica a Edge Delivery Services dove trovare il contenuto del sito.
-
Aggiungi un messaggio di conferma come desiderato, quindi fai clic su Conferma modifiche, per confermarle direttamente nel ramo
main.
-
Torna alla directory principale dell’archivio e fai clic su
paths.jsone quindi sull’icona Modifica questo file.
-
La mappatura predefinita utilizzerà il nome dell’archivio. Aggiorna la mappatura predefinita come richiesto per il progetto con
/content/<site-name>/:/e fai clic su Conferma modifiche….- Fornisci il tuo
<site-name>. Ne avrai bisogno in un passaggio successivo. - Le mappature spiegano a Edge Delivery Services come mappare il contenuto nell’archivio AEM all’URL del sito.
- Fornisci il tuo
-
Aggiungi un messaggio di conferma come desiderato, quindi fai clic su Conferma modifiche, per confermarle direttamente nel ramo
main.
Creare e modificare un nuovo sito AEM create-aem-site
Ora che disponi di un progetto GitHub, crea un nuovo sito AEM utilizzabile dal progetto.
-
Scarica l'ultima versione di authoring WYSIWYG con il modello del sito Edge Delivery Services da GitHub all'indirizzo
https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases. -
Accedi all’istanza di authoring AEM as a Cloud Service, passa alla console Sites e tocca o fai clic su Crea -> Sito da modello.
-
Sulla scheda Seleziona un modello di sito della procedura guidata di creazuione del sito, fai clic sul pulsante Importa per importare un nuovo modello.
-
Carica l’authoring WYSIWYG con il modello del sito Edge Delivery Services scaricato da GitHub.
- Il modello deve essere caricato una sola volta. Una volta caricato, può essere riutilizzato per creare ulteriori siti.
-
Dopo aver creato il modello, verrà visualizzato nella procedura guidata. Tocca o fai clic per selezionarlo, quindi tocca o fai clic su Avanti.
-
Fornisci i campi seguenti e tocca o fai clic su Crea.
- Titolo sito: aggiungi un titolo descrittivo per il sito.
- Titolo sito: utilizza il
<site-name>che hai definito nel passaggio precedente. - URL GitHub: utilizza l’URL del progetto GitHub creato nel passaggio precedente.
-
AEM conferma la creazione del sito con una finestra di dialogo. Tocca o fai clic su OK per chiudere.
-
Nella console Sites, passa al
index.htmldel nuovo sito creato e tocca o fai clic su Modifica nella barra degli strumenti.
-
L’Editor universale si aprirà in una nuova scheda. Potrebbe essere necessario toccare o fare clic su Accedi con Adobe per eseguire l’autenticazione e modificare la pagina.
È ora possibile modificare il sito utilizzando l’Editor universale. Per ulteriori informazioni, consulta la documentazione dell’Editor universale.
Pubblicazione del nuovo sito publishing
Una volta terminata la modifica del nuovo sito tramite l’Editor universale, puoi pubblicare i tuoi contenuti.
-
Nella console Sites, seleziona tutte le pagine create per il nuovo sito e tocca o fai clic su Pubblicazione rapida nella barra degli strumenti.
-
Tocca o fai clic su Pubblica nella finestra di dialogo di conferma per avviare il processo.
-
Apri una nuova scheda nello stesso browser e passa all’URL del nuovo sito.
https://main--<repository-name>--<owner>.hlx.page
-
Visualizza il tuo contenuto pubblicato.
Passaggi successivi next-steps
Ora che disponi di un progetto WYSIWYG di lavoro per l’authoring con Edge Delivery Services, puoi iniziare a creare e formattare i blocchi.
Per ulteriori informazioni, consulta la guida Creazione di blocchi preparati per l’utilizzo con l’editor universale.