Creazione di blocchi dotati di strumenti per l’utilizzo con l’editor universale create-block
Scopri come creare blocchi instrumentati per l’utilizzo con l’Editor universale nell’authoring di WYSIWYG con progetti di Edge Delivery Services.
Prerequisiti prerequisites
Questa guida fornisce istruzioni dettagliate su come creare blocchi instrumentati per l’Editor universale nei progetti di authoring WYSIWYG con Edge Delivery Services. Include l’aggiunta di componenti, il caricamento delle definizioni dei componenti nell’editor universale, la pubblicazione delle pagine, l’implementazione della decorazione dei blocchi e degli stili, l’introduzione delle modifiche nell’ambiente di produzione e la loro verifica. Al termine di questa guida, potrai creare e distribuire un nuovo blocco per il tuo progetto.
Questa guida richiede necessariamente una conoscenza esistente dell’authoring WYSIWYG con progetti di Edge Delivery Services e dell’editor universale. Prima di iniziare questa guida, è necessario avere già accesso a Edge Delivery Services e conoscere le relative nozioni di base, tra cui:
- 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.
- Hai completato la Guida introduttiva per sviluppatori per l'authoring di WYSIWYG con Edge Delivery Services.
Questa guida si basa sul lavoro svolto nella Guida introduttiva per sviluppatori per la creazione di WYSIWYG con Edge Delivery Services.
Aggiunta di un nuovo blocco al progetto add-block
In questa guida, creerai un blocco per il rendering di un preventivo facile da ricordare sulla pagina.
Per semplificare questo esempio, tutte le modifiche vengono apportate al ramo main
dell’archivio del progetto. Naturalmente, per il tuo progetto effettivo, dovresti seguire le best practice di sviluppo sviluppando su un ramo diverso e rivedendo tutte le modifiche tramite richiesta pull prima dell’unione con main
.
Adobe consiglia di sviluppare blocchi in un approccio in tre fasi:
- Creare la definizione e il modello per il blocco, rivederlo e portarlo in produzione.
- Crea contenuto con il nuovo blocco.
- Implementa la decorazione e gli stili per il nuovo blocco.
Il seguente esempio di blocco citazione segue questo approccio.
Crea modello e definizione di blocco create-block-model
1. Clona il progetto GitHub localmente creato nella Guida introduttiva per sviluppatori per l'authoring di WYSIWYG con Edge Delivery Services e aprilo in un editor scelto.
- Il codice Microsoft viene utilizzato qui a scopo illustrativo.
2. Modificare il file component-definition.json
nella radice del progetto e aggiungere la seguente definizione per il nuovo blocco di virgolette e salvare il file.
code language-json |
---|
|
3. Modificare il file component-models.json
nella radice del progetto e aggiungere la seguente definizione modello per il nuovo blocco virgolette e salvare il file.
- Per ulteriori informazioni su ciò che è importante considerare durante la creazione di modelli di contenuto, vedere il documento Modellazione di contenuto per l'authoring WYSIWYG con progetti di Edge Delivery Services.
code language-json |
---|
|
4. Modificare il file component-filters.json
nella radice del progetto e aggiungere il blocco delle virgolette alla definizione filtro per consentire l'aggiunta del blocco a qualsiasi sezione e il salvataggio del file.
code language-json |
---|
|
5&punto; utilizzando Git, esegui il commit di queste modifiche nel ramo main
.
- La conferma di
main
è solo a scopo illustrativo. Segui le best practice e utilizza una richiesta pull per il lavoro di progetto effettivo.
Creare contenuti con il blocco create-content
Dopo aver definito e confermato il blocco del preventivo di base nel progetto di esempio, è possibile aggiungere un blocco citazione a una pagina esistente.
-
In un browser, accedi a AEM as a Cloud Service. Utilizzando la console Sites, accedi al sito creato nella Guida introduttiva per sviluppatori per la creazione di WYSIWYG con Edge Delivery Services e seleziona una pagina.
- In questo caso,
index
viene utilizzato a scopo illustrativo.
- In questo caso,
-
Tocca o fai clic su Modifica nella barra degli strumenti della console e l’editor universale si aprirà.
- Per caricare la pagina, potrebbe essere necessario toccare o fare clic su Accedi con Adobe per autenticarsi ad AEM nell’editor universale.
-
Nell’editor universale, seleziona una sezione. Nel pannello delle proprietà, tocca o fai clic sull'icona Aggiungi, quindi seleziona il nuovo blocco Preventivo dal menu.
- L’icona Aggiungi è un simbolo più.
- Sai di aver selezionato una sezione se il contorno blu dell’oggetto selezionato presenta una scheda etichettata come Sezione.
- In questo esempio, toccando o facendo clic leggermente sopra l’intestazione Lorem Ipsum viene selezionata una sezione contenente l’intestazione e il testo lorem ipsum.
-
La pagina viene ricaricata e il blocco della citazione viene aggiunto nella parte inferiore della sezione selezionata con il contenuto predefinito specificato nel file
component-definitions.json
.- Il blocco delle virgolette può essere selezionato e modificato come qualsiasi altro blocco sul posto o nel pannello delle proprietà.
- Lo stile viene applicato in un passaggio successivo.
-
Quando sei soddisfatto del contenuto della citazione, puoi pubblicare la pagina toccando o facendo clic sul pulsante Pubblica nella barra degli strumenti dell’editor universale.
-
Verifica che il contenuto sia stato pubblicato passando alla pagina pubblicata. Il collegamento sarà simile a
https://<branch>--<repo>--<owner>.hlx.page
Applicare uno stile al blocco style-block
Ora che disponi di un blocco della citazione di lavoro puoi applicare ad esso lo stile.
1. Tornare all'editor per il progetto.
2. Creare una cartella quote
nella cartella blocks
.
3. Nella nuova cartella quote
, aggiungi un file quote.js
per implementare la decorazione dei blocchi aggiungendo il seguente JavaScript e salva il file.
code language-javascript |
---|
|
4. Nella cartella quote
, aggiungi un file quote.css
per definire lo stile del blocco aggiungendo il seguente codice CSS e salva il file.
code language-css |
---|
|
5&punto; utilizzando Git, esegui il commit di queste modifiche nel ramo main
.
- La conferma di
main
è solo a scopo illustrativo. Segui le best practice e utilizza una richiesta pull per il lavoro di progetto effettivo.
6&punto; Torna alla scheda del browser dell’Editor universale in cui stavi modificando la pagina del progetto e ricarica la pagina per visualizzare il blocco formattato.
7. Vedere il blocco delle virgolette ora formattato sulla pagina.
8. Verificare che le modifiche siano state inviate alla produzione passando alla pagina pubblicata. Il collegamento sarà simile a https://<branch>--<repo>--<owner>.hlx.page
Congratulazioni Ora disponi di un blocco delle citazioni completamente funzionante e formattato. Puoi utilizzare questo esempio come base per progettare blocchi specifici per il progetto.
Opzioni di blocco block-options
Se un blocco deve avere un aspetto o un comportamento leggermente diverso a seconda di determinate circostanze, ma non abbastanza diverso da diventare un nuovo blocco in sé, puoi consentire agli autori di scegliere tra le opzioni di blocco.
Aggiungendo una proprietà classes
al blocco, quella di cui è stato eseguito il rendering nell’intestazione della tabella per i blocchi semplici o come elenco di valori per gli elementi in un blocco contenitore.
{
"id": "simpleMarquee",
"fields": [
{
"component": "text",
"valueType": "string",
"name": "marqueeText",
"value": "",
"label": "Marquee text",
"description": "The text you want shown in your marquee"
},
{
"component": "select",
"name": "classes",
"value": "",
"label": "Background Color",
"description": "The marquee background color",
"valueType": "string",
"options": [
{
"name": "Red",
"value": "bg-red"
},
{
"name": "Green",
"value": "bg-green"
},
{
"name": "Blue",
"value": "bg-blue"
}
]
}
]
}
Utilizzo di altri rami di lavoro other-branches
Con questa guida hai eseguito la conferma direttamente nel ramo main
per semplicità. La sperimentazione in un archivio di esempio in genere non è un problema. Per il lavoro effettivo del progetto, dovresti seguire le best practice di sviluppo sviluppando in un ramo diverso e rivedendo tutte le modifiche tramite richiesta pull prima di unire nel main
.
Se non stai sviluppando nel ramo main
, puoi aggiungere ?ref=<branch>
nella barra di posizione dell’editor universale per caricare la pagina dal ramo. <branch>
è il nome del ramo utilizzato per l’anteprima del progetto o gli URL live, ad esempio https://<branch>--<repo>--<owner>.hlx.page
.
La pubblicazione di contenuti con un nuovo modello è supportata solo quando il modello viene unito al ramo main
.
Riutilizzo dei blocchi per l'authoring basato su documenti reusing-blocks
Se si aderisce allo stesso modello di contenuto, è possibile utilizzare i blocchi creati per l’authoring WYSIWYG utilizzando l’Editor universale per l’authoring basato su documenti.
Per ulteriori informazioni, consulta il documento Blocchi per WYSIWYG e authoring basato su documenti.
Passaggi successivi next-steps
Ora che sai come creare i blocchi, è fondamentale comprendere come modellare i contenuti in modo semantico per ottenere un’esperienza di sviluppo più snella.
Per informazioni sul funzionamento della modellazione dei contenuti per la creazione di WYSIWYG con progetti Edge Delivery Services, consulta il documento Modellazione dei contenuti per la creazione di WYSIWYG con progetti Edge Delivery Services.