Versione | Collegamento articolo |
---|---|
AEM 6.5 | Fai clic qui |
AEM as a Cloud Service | Questo articolo |
Puoi creare e applicare temi per assegnare uno stile a un modulo adattivo. Un tema contiene dettagli sullo stile dei componenti e dei pannelli. Gli stili includono proprietà quali i colori di sfondo, i colori degli stati, la trasparenza, l’allineamento e le dimensioni. Quando applichi un tema, lo stile specificato si riflette sui componenti corrispondenti. Un tema viene gestito in modo indipendente senza un riferimento a un modulo adattivo e può essere riutilizzato in più Forms adattivi.
Forms as a Cloud Service fornisce, i seguenti temi elencati per i Componenti core basati su Adaptive Forms:
Un tema è un pacchetto che include il file CSS, i file JavaScript e le risorse (come le icone) che definiscono lo stile del Forms adattivo. Un tema Modulo adattivo segue un’organizzazione specifica, costituita dai seguenti componenti:
src/theme.scss
: questa cartella include il file CSS che ha un ampio impatto sull’intero tema. Funge da posizione centralizzata per definire e gestire lo stile e il comportamento del tema. Apportando modifiche a questo file, puoi apportare modifiche applicate universalmente a tutto il tema, influenzando l’aspetto e le funzionalità sia delle pagine Forms adattive che delle pagine AEM Sites.
src/site
: questa cartella contiene file CSS applicati alla pagina di un intero sito AEM. Questi file sono costituiti da codice e stili che influiscono sulle funzionalità e sul layout generali della pagina del sito AEM. Tutte le modifiche apportate qui vengono applicate a tutte le pagine del sito. [Quando utilizzarlo?]
src/components
: i file CSS in questa cartella sono progettati per i singoli componenti core AEM. Ogni cartella dedicata di un componente include .scss
che assegna uno stile a quel particolare componente in un modulo adattivo. Ad esempio, il file /src/components/accordion/_accordion.scss contiene informazioni sullo stile del componente Pannello a soffietto di Forms adattivo.
src/resources
: questa cartella contiene file statici come icone, loghi e font. Queste risorse vengono utilizzate per migliorare gli elementi visivi e la progettazione complessiva del tema.
Forms as a Cloud Service fornisce, i temi elencati di seguito per i Componenti core basati su Adaptive Forms.
È possibile personalizza uno di questi temi per creare un nuovo tema.
La personalizzazione di un tema si riferisce al processo di modifica e personalizzazione dell’aspetto di un tema. Quando si personalizza un tema, è possibile modificarne gli elementi di progettazione, il layout, i colori, la composizione tipografica e, a volte, il codice sottostante. Consente di creare un aspetto univoco e personalizzato per il sito web o l’applicazione, mantenendo la struttura e le funzionalità di base fornite dal tema.
Dopo aver appreso i prerequisiti e configurato l’ambiente di sviluppo, sei pronto per iniziare a personalizzare il tema in base alle tue esigenze specifiche.
La personalizzazione di un tema è un processo in più fasi. Per personalizzare il tema, esegui i passaggi nell’ordine elencato:
Gli esempi forniti nel documento sono basati su Area di lavoro ma è importante notare che è possibile clonare qualsiasi tema e personalizzarlo utilizzando le stesse istruzioni. Queste istruzioni sono applicabili a qualsiasi tema, consentendo di modificare i temi in base alle esigenze specifiche.
Per clonare un tema per Forms adattivo basato su Componenti core, scegli uno dei seguenti temi:
Per clonare un tema, attenersi alle istruzioni riportate di seguito.
Apri il prompt dei comandi o la finestra del terminale nell’ambiente di sviluppo locale.
Esegui il git clone
per clonare un tema.
git clone [Path of Git Repository of the theme]
Sostituisci il [Percorso dell’archivio Git del tema] con l’URL effettivo dell’archivio Git corrispondente del tema
Ad esempio, per clonare il tema Canvas, eseguire il comando seguente:
git clone https://github.com/adobe/aem-forms-theme-canvas
Dopo aver eseguito correttamente il comando, nel computer è disponibile una copia locale del tema aem-forms-theme-canvas
cartella.
Apri la cartella dei temi in un editor di testo normale. Ad esempio, per aprire aem-forms-theme-canvas
nell'editor di codice di Visual Studio.
Accedi a aem-forms-theme-canvas
cartella.
Esegui il comando seguente:
code .
La cartella viene aperta nel codice di Visual Studio.
Apri package.json
file per la modifica.
Imposta i valori per name
e description
attributi.
L’attributo name viene utilizzato per identificare in modo univoco il tema, ad esempio "aem-forms-wknd-theme" e visualizzato in Stile scheda di Creazione guidata modulo. L'attributo description fornisce ulteriori dettagli sul tema, inclusi lo scopo e gli scenari per cui è progettato. È inoltre possibile specificare la versione, la descrizione e la licenza per il tema.
Salva e chiudi il file
È possibile personalizzare singoli componenti o apportare modifiche a livello di tema utilizzando le variabili globali di un tema. Eventuali modifiche apportate alle variabili globali influiscono su tutti i singoli componenti. Ad esempio, puoi utilizzare le variabili globali per modificare il colore del bordo di tutti i componenti di un modulo adattivo e un colore di riempimento luminoso per impostare CTA (invito all’azione) utilizzando il componente pulsante:
Il variable.scss
contiene le variabili globali del tema. Aggiornando queste variabili, puoi apportare modifiche relative allo stile a livello di tema. Per applicare gli stili a livello di tema, effettua le seguenti operazioni:
Apri <your-theme-sources>/src/site/_variables.scss
file per la modifica.
Modifica il valore di qualsiasi proprietà. Ad esempio, il colore di errore predefinito è red
. Per modificare il colore dell'errore da red
a blue
, modificare il codice esadecimale del colore $errorvariable
. Esempio: $error: #196ee5
.
Salva e chiudi il file
Allo stesso modo, è possibile utilizzare variable.scss
file per impostare la famiglia e il tipo di carattere, i colori del tema e del font, la dimensione del font, la spaziatura del tema, l’icona di errore, gli stili dei bordi del tema e altre variabili che influiscono su più componenti del modulo adattivo.
È inoltre possibile modificare il carattere, il colore, le dimensioni e altre proprietà CSS di un componente core Modulo adattivo specifico. Ad esempio pulsante, casella di controllo, contenitore, piè di pagina e altro ancora. Puoi applicare uno stile al pulsante o alla casella di controllo modificando il file CSS del componente specifico per allinearlo allo stile della tua organizzazione. Per personalizzare uno stile di un componente:
Apri il file <your-theme-sources>/src/components/<component>/<component.scss>
per la modifica. Ad esempio, per modificare il colore del font del componente pulsante, apri il <your-theme-sources>/src/components/button/button.scss
, file .
Modifica il valore di qualsiasi in base alle tue esigenze. Ad esempio, per modificare il colore del componente Pulsante al passaggio del mouse su green
, modificare il valore di color: $white
proprietà in cmp-adaptiveform-button__widget:hover
da classe a codice esadecimale #12B453
o qualsiasi altra tonalità di green
. Il codice finale è simile al seguente:
.cmp-adaptiveform-button__widget:hover {
background: $dark-gray;
color: #12B453;
}
Salva e chiudi il file
Quando uno stile viene definito sia a livello di tema che a livello di componente, lo stile definito a livello di componente ha la priorità.
Per visualizzare in anteprima e testare le modifiche nell’ambiente locale e personalizzare il tema in base ai requisiti per i diversi componenti AEM, effettua le seguenti operazioni:
Apri la cartella dei temi in un editor di testo normale. Ad esempio, apri il aem-forms-theme-canvas
nell'editor di codice di Visual Studio.
Rinomina il env_template
file in .env
nella cartella theme e aggiungi i seguenti parametri:
* **AEM url**
AEM_URL=https://[author-instance]
* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name
* **AEM proxy port**
AEM_PROXY_PORT=7000
Ad esempio, l’URL del modulo è http://localhost:4502/editor.html/content/forms/af/contactusform.html
. Quindi, i valori di:
http://localhost:4502/
contactusform
Salva il file.
Passa alla cartella principale della cartella dei temi. In questo caso, il nome della cartella dei temi è aem-forms-theme-canvas
.
Apri il prompt dei comandi o il terminale.
Esegui npm install
per installare le dipendenze.
Esegui npm run live
per visualizzare in anteprima il modulo con il tema aggiornato nel browser locale.
Se si verifica un errore durante l'esecuzione di npm run live
, eseguire i seguenti comandi prima di npm run live
comando:
npm install parcel --save-dev
npm i @parcel/transformer-sass
Questa è una distribuzione a caldo. Pertanto, ogni volta che apporti modifiche e salvi il _variables.scss
e button.scss
file, il server seleziona automaticamente le modifiche e visualizza in anteprima l’output più recente. La riga [Browsersync] File event [change]
indica che il server ha riconosciuto le modifiche più recenti e le sta distribuendo nell’ambiente locale.
Seguendo gli esempi forniti sia a livello di tema che a livello di componente per le personalizzazioni dei temi, i messaggi di errore di un modulo adattivo vengono modificati in blue
colore, mentre il colore dell’etichetta del componente pulsante diventa green
al passaggio del mouse.
Anteprima dello stile a livello di tema
Anteprima dello stile a livello di componente
Puoi anche testare il tema per il modulo adattivo ospitato nell’istanza as a Cloud Service di AEM Forms. Per configurare e impostare l’ambiente locale per il test dei temi con Adaptive Forms ospitato sull’istanza cloud, effettua le seguenti operazioni:
Apri la cartella dei temi in un editor di testo normale. Ad esempio, apri il aem-forms-theme-canvas
nell'editor di codice di Visual Studio.
Rinomina il env_template
file in .env
e aggiungi i seguenti parametri:
* **AEM url**
AEM_URL=https://[author-instance]
* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name
* **AEM proxy port**
AEM_PROXY_PORT=7000
Ad esempio, l’URL del modulo nell’ambiente cloud è https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html
. Quindi, i valori di:
https://author-XXXX-cmstg.adobeaemcloud.com/
contactusform
Salva il file.
Crea un utente locale.
Per creare un utente locale:
forms-users
gruppo.Passa alla cartella principale della cartella dei temi. In questo caso, il nome della cartella dei temi è aem-forms-theme-canvas
.
Esegui npm run live
e vieni reindirizzato a un browser locale.
Clic SIGN IN LOCALLY (ADMIN TASKS ONLY)
e accedere utilizzando le credenziali dell'utente locale.
Puoi visualizzare in anteprima il modulo adattivo con le modifiche più recenti. Una volta apportate le modifiche desiderate in una cartella dei temi, distribuisci il tema nell’ambiente AEM Cloud Service utilizzando la pipeline front-end.
Per distribuire il tema nell’ambiente di Cloud Service utilizzando la pipeline front-end:
Per distribuire il tema è necessario un repository. Accedi al tuo Archivio AEM Cloud Manager e aggiungi un nuovo archivio per il tema.
Creare un nuovo archivio per il tema facendo clic sul pulsante Archivi > Aggiungi archivio.
Specifica la Nome archivio nel Aggiungi archivio . Ad esempio, il nome fornito è custom-canvas-theme-repo
.
Fai clic su Salva.
Clic Copia URL archivio per copiare l’URL dell’archivio.
custom-canvas-theme-repo
, per tema Canvas, tema WKND e tema EASEL. Tuttavia, per distribuire i temi, è necessario creare pipeline front-end separate. Le personalizzazioni future per un tema specifico vengono distribuite utilizzando la pipeline front-end corrispondente.Ora, invia le modifiche all’archivio dei temi del Cloud Service AEM Forms.
Passa alla cartella principale della cartella dei temi. In questo caso, il nome della cartella dei temi è aem-forms-theme-canvas
.
Apri il prompt dei comandi o il terminale.
Esegui il comando seguente nell'ordine elencato:
git remote add [alias-name-for-repository] [URL of repository]
git add .
git commit
git push [name-for-createdrepository]
Ad esempio:
git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/
git add .
git commit
git push canvascloudthemerepo
Il tema viene distribuito utilizzando pipeline front-end.. Per distribuire il tema, effettua le seguenti operazioni:
Accedi all’archivio di AEM Cloud Manager.
Clic Aggiungi dal pulsante Pipeline sezione.
Seleziona Aggiungi pipeline non di produzione o Aggiungi pipeline di produzione in base all’ambiente del Cloud Service. Ad esempio, qui il Aggiungi pipeline di produzione è selezionata.
In Aggiungi pipeline di produzione finestra di dialogo come parte del Configurazione passaggi, specifica il nome per la pipeline. Ad esempio, il nome della pipeline è customcanvastheme
.
Fai clic su Continua.
Seleziona la Distribuzione mirata > il Codice front-end opzioni, nella Codice sorgente passaggi.
Seleziona la Archivio e Ramo Git valori con le modifiche più recenti. Ad esempio, il nome dell’archivio selezionato è custom-canvas-theme-repo
e il ramo Git è main
.
Seleziona la Posizione codice as /
, se le modifiche sono presenti nella cartella principale.
Fai clic su Salva.
Al termine della configurazione della pipeline, la scheda di invito all’azione viene aggiornata.
Fate clic con il pulsante destro del mouse sulla tubazione creata.
Clic Esegui .
Una volta completata la build, il tema diventa disponibile nell’istanza di authoring per l’utilizzo. Viene visualizzato sotto Stile nella procedura guidata di creazione di moduli adattivi, durante la creazione di un modulo adattivo.
I passaggi per applicare un tema a un modulo adattivo sono i seguenti:
Accedi all’istanza Autore di AEM Forms.
Tocca Adobe Experience Manager > Forms > Forms e documenti.
Clic Crea > Forms adattivo. Viene visualizzata la procedura guidata per la creazione di un modulo adattivo.
Seleziona il modello di componente core in Sorgente scheda.
Seleziona il tema in Stile scheda.
Fai clic su Crea.
I temi per moduli adattivi vengono utilizzati come parte di un modello di modulo adattivo per definire lo stile durante la creazione di un modulo adattivo.
Evitare risorse da un altro tema
Quando modifichi un tema, puoi sfogliare e aggiungere risorse (come immagini) da altri temi. Ad esempio, stai modificando lo sfondo di una pagina. Ad esempio, quando selezioni Pagina > Sfondo > Aggiungi > Immagine, viene visualizzata una finestra di dialogo che consente di sfogliare e aggiungere immagini in un altro tema.
Se una risorsa viene aggiunta da un altro tema e l’altro tema viene spostato o eliminato, puoi riscontrare dei problemi con il tema corrente. Si consiglia di evitare di sfogliare e aggiungere risorse da altri temi.
Modifica della larghezza del layout del pannello contenitore
La modifica della larghezza del layout del pannello contenitore non è consigliata. Quando si specifica la larghezza di un pannello contenitore, questo diventa statico e non si adatta a visualizzazioni diverse.
Utilizzo dell’editor di moduli o dell’editor temi per l’utilizzo di intestazione e piè di pagina
Utilizzare l'editor tema se si desidera applicare uno stile a intestazione e piè di pagina utilizzando opzioni di stile quali stile, sfondo e trasparenza del carattere.
Se si desidera fornire informazioni quali un'immagine del logo, il nome della società nell'intestazione e le informazioni sul copyright nel piè di pagina, utilizzare le opzioni dell'editor di moduli.
D: Quale personalizzazione ha priorità quando si effettuano personalizzazioni in una cartella tema a livello globale e di componente?
Ans: Quando vengono effettuate personalizzazioni a livello sia globale che di componente, la personalizzazione a livello di componente ha la priorità.