Questo documento descrive come personalizzare l’authoring delle pagine nell’interfaccia touch e moderna e non si applica all’interfaccia classica.
AEM offre diversi meccanismi che ti consentono di personalizzare la funzionalità di authoring delle pagine (e le console) dell’istanza di authoring.
Clientlibs
Le clientlibs consentono di estendere l’implementazione predefinita per realizzare nuove funzionalità, riutilizzando al contempo le funzioni, gli oggetti e i metodi standard. Quando personalizzi, puoi creare la tua clientlib personalizzata in /apps.
La nuova clientlib deve:
cq.authoring.editor.sites.page
cq.authoring.editor.sites.page.hook
appropriataSovrapposizioni
Le sovrapposizioni si basano sulle definizioni dei nodi e ti consentono di sovrapporre la funzionalità standard (in /libs
) con la tua funzionalità personalizzata (in /apps
). Quando si crea una sovrapposizione non è necessaria una copia 1:1 dell'originale, in quanto la fusione delle risorse sling consente l'ereditarietà.
Per ulteriori informazioni, consulta la documentazione JS set.
Questi possono essere utilizzati in molti modi per estendere la funzionalità di authoring delle pagine nell’istanza di AEM. Di seguito è riportata una selezione (ad alto livello).
Per ulteriori informazioni, consulta:
Questo argomento è trattato anche nella sessione AEM Gems - Personalizzazione dell'interfaccia utente per AEM 6.0.
Non è necessario modificare nulla nel percorso /libs
.
Questo perché il contenuto di /libs
viene sovrascritto la prossima volta che aggiorni l’istanza (e potrebbe essere sovrascritto quando applichi un hotfix o un pacchetto di funzioni).
Il metodo consigliato per la configurazione e altre modifiche è:
/libs
) in /apps
/apps
Quando modifichi una pagina, sono disponibili varie modalità. Queste modalità sono implementate utilizzando livelli. Questi consentono di accedere a tipi diversi di funzionalità per lo stesso contenuto della pagina. I livelli standard sono: modifica, anteprima, annotazione, sviluppatori e targeting.
Un'istanza AEM standard fornisce il livello MSM. Questo consente di accedere ai dati relativi a gestione multisito ed evidenziarli nel livello.
Per visualizzarlo in azione, puoi modificare qualsiasi pagina Copia lingua We.Retail (o qualsiasi altra pagina Live Copy) e selezionare la modalità Stato Live Copy .
Puoi trovare la definizione del livello MSM (per riferimento) in:
/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js
Questo è un pacchetto di esempio che mostra come creare un nuovo livello (modalità), che è un nuovo livello per la visualizzazione MSM.
CODICE SU GITHUB
Puoi trovare il codice di questa pagina su GitHub
Il browser delle risorse mostra risorse di vari tipi/categorie (ad esempio immagini, documenti, ecc.). Le risorse possono anche essere filtrate in base a queste categorie di risorse.
aem-authoring-extension-assetfinder-flickr
è un pacchetto di esempio che mostra come aggiungere un nuovo gruppo a Asset Finder. Questo esempio si collega al flusso pubblico di Flickr e le mostra nel pannello laterale.
CODICE SU GITHUB
Puoi trovare il codice di questa pagina su GitHub
Durante l’authoring delle pagine, l’utente deve spesso selezionare tra le risorse (ad esempio pagine, componenti, risorse, ecc.). Questo può assumere la forma di un elenco, ad esempio da cui l’autore deve scegliere un elemento.
Per mantenere l’elenco a una dimensione ragionevole e pertinente al caso d’uso, è possibile implementare un filtro sotto forma di predicato personalizzato. Ad esempio, se il componente pathbrowser
Granite viene utilizzato per consentire all’utente di selezionare il percorso di una determinata risorsa, i percorsi presentati possono essere filtrati nel modo seguente:
com.day.cq.commons.predicate.AbstractNodePredicate
.pathbrowser
.Per ulteriori dettagli sulla creazione di un predicato personalizzato, consulta questo articolo.
L’implementazione di un predicato personalizzato mediante l’implementazione dell’interfaccia com.day.cq.commons.predicate.AbstractNodePredicate
funziona anche nell’interfaccia classica.
Per un esempio di implementazione di un predicato personalizzato nell’interfaccia classica, consulta questo articolo della knowledge base .
Ogni componente (in genere) dispone di una barra degli strumenti che consente di accedere a una serie di azioni che possono essere eseguite su quel componente.
aem-authoring-extension-toolbar-screenshot
è un pacchetto di esempio che mostra come creare un’azione personalizzata della barra degli strumenti per eseguire il rendering dei componenti.
CODICE SU GITHUB
Puoi trovare il codice di questa pagina su GitHub
In un’installazione standard di AEM:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
Contiene le definizioni dei vari editor disponibili.
Esiste una connessione tra l’editor e ogni tipo di risorsa (come nel componente) che può utilizzarlo:
cq:inplaceEditing
ad esempio:
/libs/foundation/components/text/cq:editConfig
/libs/foundation/components/image/cq:editConfig
proprietà: editorType
Definisce il tipo di editor in linea che verrà utilizzato quando viene attivata la modifica in linea per quel componente; ad esempio text
, textimage
, image
, title
.
Ulteriori dettagli di configurazione dell'editor possono essere configurati utilizzando un nodo config
contenente configurazioni e un altro nodo plugin
per contenere i dettagli di configurazione del plug-in necessari.
Di seguito è riportato un esempio di definizione delle proporzioni per il plug-in di ritaglio immagine del componente immagine. A causa del potenziale di dimensioni dello schermo molto limitate, le proporzioni di ritaglio sono state spostate nell’editor a schermo intero e possono essere visualizzate solo in questo caso.
<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
editorType="image">
<config jcr:primaryType="nt:unstructured">
<plugins jcr:primaryType="nt:unstructured">
<crop jcr:primaryType="nt:unstructured">
<aspectRatios jcr:primaryType="nt:unstructured">
<_x0031_6-10
jcr:primaryType="nt:unstructured"
name="16 : 10"
ratio="0.625"/>
</aspectRatios>
</crop>
</plugins>
</config>
</cq:inplaceEditing>
In AEM rapporti di ritaglio, come impostato dalla proprietà ratio
, sono definiti come altezza/larghezza. Questo differisce dalla definizione tradizionale di larghezza/altezza, per ragioni di compatibilità con versioni precedenti. Gli utenti che creano contenuti non noteranno alcuna differenza, purché sia stata definita chiaramente la proprietà name
, che viene visualizzata nell’interfaccia utente di .
Per implementare un nuovo editor locale (all’interno della clientlib):
Ad esempio, vedi:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
Implementa:
setUp
tearDown
Registra l'editor (include il costruttore):
editor.register
Specifica la connessione tra l’editor e ogni tipo di risorsa (come nel componente) che può utilizzarlo.
aem-authoring-extension-inplace-editor
è un pacchetto di esempio che mostra come creare un nuovo editor locale in AEM.
CODICE SU GITHUB
Puoi trovare il codice di questa pagina su GitHub
È possibile configurare un componente in modo che abbia più editor locali. Quando sono configurati più editor locali, puoi selezionare il contenuto appropriato e aprire l’editor appropriato. Per ulteriori informazioni, consulta la documentazione Configurazione di più editor in-place .
Per aggiungere una nuova azione pagina alla barra degli strumenti della pagina, ad esempio un'azione Indietro a Sites (console).
aem-authoring-extension-header-backtosites
è un pacchetto di esempio che mostra come creare un’azione di barra di intestazione personalizzata per tornare alla console Sites .
CODICE SU GITHUB
Puoi trovare il codice di questa pagina su GitHub
Il flusso di lavoro predefinito Richiesta di attivazione:
Verrà visualizzato automaticamente nel menu appropriato quando un autore di contenuti non ha i diritti di replica appropriati, ma ha l’appartenenza a DAM-Users e Authors.
In caso contrario non verrà visualizzato nulla, in quanto i diritti di replica sono stati rimossi.
Per avere un comportamento personalizzato in seguito a tale attivazione è possibile sovrapporre il flusso di lavoro Richiesta di attivazione :
In /apps
sovrapponi la procedura guidata Sites :
/libs/wcm/core/content/common/managepublicationwizard
Questo sostituisce l’istanza comune di:
/libs/cq/gui/content/common/managepublicationwizard
Aggiorna il modello di flusso di lavoro e le relative configurazioni/script come necessario.
Rimuovere il diritto all' replicate
action da tutti gli utenti appropriati per tutte le pagine pertinenti; far sì che questo flusso di lavoro venga attivato come azione predefinita quando uno degli utenti tenta di pubblicare (o replicare) una pagina.