[AEM Forms]{class="badge positive" title="Si applica ad AEM Forms)."}

Incorporare un tema Forms adattivo in un tema AEM Sites

Puoi incorporare un tema Forms adattivo (ad esempio tema AEM Forms Canvas) nel tema AEM Sites. In questo modo, un singolo tema guida sia le pagine del sito che qualsiasi Forms adattivo incorporato in tali pagine, con una build e una distribuzione tramite la pipeline front-end di AEM.

Questo articolo è destinato agli sviluppatori che mantengono o personalizzano il tema AEM Sites standard (o personalizzato) e desiderano includere lo stile Moduli adattivi senza gestire una distribuzione separata del tema Forms.

Prerequisiti prerequisites

Prima di iniziare, assicurati di disporre di:

Passaggio 1: creare la cartella dei componenti del modulo adattivo step-1-create-folder

Nell’archivio dei temi del sito, crea la cartella in cui risiederà il tema Forms:

theme/src/components/adaptiveform/

Tutte le risorse tema di Forms si troveranno in questa cartella, in modo che rimangano separate dai componenti del sito esistenti.

Passaggio 2: copiare componenti e immagini del tema di Forms step-2-copy-components-and-images

Utilizzo del tema Forms (ad esempio, aem-forms-theme-canvas) e dei percorsi del tema del sito:

Passaggio 3: copiare variabili e mixin step-3-copy-variables-and-mixins

Il tema Forms utilizza variabili e mixin condivisi in src/site/. Copia solo questi due file nella radice di adaptiveform/ (non all'interno di una sottocartella site):

non copia il resto della cartella src/site/ del tema Forms; per gli stili di modulo incorporati sono necessari solo questi due file.

Passaggio 4: correggere i percorsi delle immagini in SCSS step-4-fix-image-paths

Nel tema Forms, i file SCSS dei componenti spesso fanno riferimento a immagini con percorsi come ./resources/ o url(resources/. Dopo aver copiato nel tema del sito, tali percorsi devono puntare a theme/src/components/adaptiveform/resources/images/.

Il tema del modello di sito standard utilizza Parcel, che risolve url() percorsi da theme/src/. Pertanto, quando le immagini si trovano in theme/src/components/adaptiveform/resources/images/, utilizzare il percorso components/adaptiveform/resources/images/ (relativo a theme/src/).

Trova e sostituisci in ogni .scss in theme/src/components/adaptiveform/:

Esempio - prima (tema Forms):

.cmp-adaptiveform-button__questionmark {
  background: url(./resources/images/question.svg) center center / cover no-repeat, #969696;
}

Dopo (tema del sito, immagini in adaptiveform/resources/images/):

.cmp-adaptiveform-button__questionmark {
  background: url(components/adaptiveform/resources/images/question.svg) center center / cover no-repeat, #969696;
}

Ripetere l'operazione per ogni file SCSS in adaptiveform/ che fa riferimento a immagini (pulsante, pannello a soffietto, procedura guidata, contenitore, scarabocchio e altri). Si consiglia di eseguire una ricerca/sostituzione a livello di progetto nell'IDE su theme/src/components/adaptiveform/.

Passaggio 5: creare il modulo adattivo SCSS dal punto di ingresso step-5-create-adaptiveform-scss

Crea theme/src/components/adaptiveform/_adaptiveform.scss nel tema del sito. Questo file deve:

Utilizza quanto segue come punto di ingresso completo (corrisponde all’integrazione standard con tutti i componenti modulo basati su Componenti core):

//== Adaptive Form components (forms theme integration)
// Variables and mixins for adaptive form components
@import 'variables';
@import 'mixin';

//== Core adaptive form components
@import './button/_button.scss';
@import './checkboxgroup/_checkboxgroup.scss';
@import './container/_container.scss';
@import './datepicker/_datepicker.scss';
@import './dropdown/_dropdown.scss';
@import './fileinput/_fileinput.scss';
@import './footer/_footer.scss';
@import './image/_image.scss';
@import './numberinput/_numberinput.scss';
@import './panelcontainer/_panelcontainer.scss';
@import './radiobutton/_radiobutton.scss';
@import './text/_text.scss';
@import './textinput/_textinput.scss';
@import './accordion/_accordion.scss';
@import './tabsontop/_tabsontop.scss';
@import './pageheader/_pageheader.scss';
@import './wizard/_wizard.scss';
@import './title/_title.scss';
@import './telephoneinput/_telephoneinput.scss';
@import './emailinput/_emailinput.scss';
@import './recaptcha/_recaptcha.scss';
@import './verticaltabs/_verticaltabs.scss';
@import './checkbox/_checkbox.scss';
@import './termsandconditions/_termsandconditions.scss';
@import './switch/_switch.scss';
@import './hcaptcha/_hcaptcha.scss';
@import './turnstile/_turnstile.scss';
@import './review/_review.scss';
@import './scribble/_scribble.scss';
@import './datetime/_datetime.scss';

Se il tema Forms omette alcuni componenti (ad esempio, senza scarabocchio o captcha), rimuovi o commenta le righe @import corrispondenti per evitare errori di compilazione. L'elenco precedente corrisponde alla struttura Tema area di lavoro.

Passaggio 6: importare il tema del modulo adattivo nel tema del sito step-6-import-in-theme-scss

In theme/src/theme.scss, aggiungi una singola importazione alla fine del file (dopo le importazioni di altri componenti):

//== Adaptive Form components (forms theme)
@import './components/adaptiveform/_adaptiveform.scss';

Esempio - fine di theme.scss:

// ... existing site component imports ...
@import './components/embed/_embed.scss';
@import './components/pdfviewer/_pdfviewer.scss';
@import './components/socialmediasharing/_social_media_sharing.scss';

//== Adaptive Form components (forms theme)
@import './components/adaptiveform/_adaptiveform.scss';

Questa è l'unica modifica necessaria nella struttura del tema del sito esistente; tutto il codice specifico del modulo rimane in src/components/adaptiveform/.

Passaggio 7: generare e distribuire step-7-build-and-deploy

Risoluzione dei problemi troubleshooting

Consulta anche see-also