Personalizzazione dell’authoring delle pagine customizing-page-authoring
Adobe Experience Manager (AEM) offre diversi meccanismi per personalizzare la funzionalità di authoring delle pagine (e console) della tua istanza di authoring.
-
Clientlibs
Le clientlibs consentono di estendere l’implementazione predefinita per realizzare nuove funzionalità, riutilizzando le funzioni, gli oggetti e i metodi standard. Durante la personalizzazione, puoi creare una libreria client personalizzata in
/apps.
La nuova libreria client deve:- dipende dalla libreria client di authoring
cq.authoring.editor.sites.page
- fa parte del programma
cq.authoring.editor.sites.page.hook
categoria
- dipende dalla libreria client di authoring
-
Sovrapposizioni
Le sovrapposizioni si basano sulle definizioni dei nodi e consentono di sovrapporre le funzionalità standard (in
/libs
) con funzionalità personalizzate (in/apps
). Quando si crea una sovrapposizione, non è necessaria una copia 1:1 dell'originale, in quanto sling resource merger consente l’ereditarietà.
Questi possono essere utilizzati in molti modi per estendere la funzionalità di authoring delle pagine nell’istanza AEM. Di seguito è riportata una selezione (ad alto livello).
- Utilizzo e creazione di clientlibs.
- Utilizzo e creazione di sovrapposizioni.
- Granite
- Struttura dell’interfaccia utente touch dell’AEM per informazioni dettagliate sulle aree strutturali utilizzate per l’authoring delle pagine.
/libs
percorso./libs
viene sovrascritto, la prossima volta che aggiorni l’istanza (e potrebbe anche essere sovrascritto quando applichi un hotfix o un feature pack).- Ricrea l'elemento richiesto, ovvero come esiste in
/libs
) in/apps
- Apporta le modifiche in
/apps
Aggiungi nuovo livello (modalità) add-new-layer-mode
Quando modifichi una pagina, sono disponibili vari modalità disponibile. Queste modalità sono implementate utilizzando livelli. Consentono di accedere a diversi tipi di funzionalità per lo stesso contenuto della pagina. I livelli standard sono: modifica, anteprima, annota, sviluppatore e targeting.
Esempio di livello: stato Live Copy layer-example-live-copy-status
Un'istanza AEM standard fornisce il livello MSM. Consente di accedere ai dati relativi a gestione multisito e lo evidenzia nel livello.
Per vederlo in azione, puoi modificare qualsiasi Copia lingua We.Retail pagina (o qualsiasi altra pagina live copy) e seleziona la Stato Live Copy modalità.
Puoi trovare la definizione del livello MSM (per riferimento) in:
/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js
Esempio di codice code-sample
Questo è un pacchetto di esempio che mostra come creare un livello (modalità), che è un nuovo livello per la vista MSM.
CODICE SU GITHUB
Puoi trovare il codice di questa pagina su GitHub
- Apri progetto aem-authoring-new-layer-mode su GitHub
- Scarica il progetto come un file ZIP
Aggiungi nuova categoria selezione al browser risorse add-new-selection-category-to-asset-browser
Il browser Risorse mostra risorse di vari tipi/categorie (ad esempio, immagini e documenti). Le risorse possono essere filtrate anche in base a queste categorie di risorse.
Esempio di codice code-sample-1
aem-authoring-extension-assetfinder-flickr
è un pacchetto di esempio che mostra come aggiungere un gruppo a asset finder. Questo esempio si connette a FlickrIl flusso pubblico di e li mostra nel pannello laterale.
CODICE SU GITHUB
Puoi trovare il codice di questa pagina su GitHub
- Apri il progetto aem-authoring-extension-assetfinder-flickr su GitHub
- Scarica il progetto come un file ZIP
Filtrare le risorse filtering-resources
Durante l’authoring delle pagine, l’utente deve spesso selezionare tra le risorse (ad esempio pagine, componenti e risorse). Può assumere la forma di un elenco, ad esempio, dal quale l’autore deve scegliere un elemento.
Per mantenere l’elenco a una dimensione ragionevole e pertinente al caso d’uso, un filtro può essere implementato sotto forma di predicato personalizzato. Ad esempio, se pathbrowser
Granite Il componente viene utilizzato per consentire all’utente di selezionare il percorso di una particolare risorsa. I percorsi presentati possono essere filtrati nel modo seguente:
- Implementare il predicato personalizzato implementando
com.day.cq.commons.predicate.AbstractNodePredicate
di rete. - Specifica un nome per il predicato e fai riferimento a tale nome quando utilizzi il
pathbrowser
.
Per ulteriori dettagli sulla creazione di un predicato personalizzato, vedi questo articolo.
com.day.cq.commons.predicate.AbstractNodePredicate
L'interfaccia di funziona anche nell'interfaccia classica.Aggiungere una nuova azione alla barra degli strumenti di un componente add-new-action-to-a-component-toolbar
Ogni componente dispone (in genere) di una barra degli strumenti che consente di accedere a una serie di azioni che possono essere eseguite su tale componente.
Esempio di codice code-sample-2
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
- Apri il progetto aem-authoring-extension-toolbar-screenshot su GitHub
- Scarica il progetto come un file ZIP
Aggiungi nuovo editor locale add-new-in-place-editor
Editor locale standard standard-in-place-editor
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ò utilizzarla:
-
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 utilizzato quando viene attivata la modifica diretta per quel componente; ad esempio,
text
,textimage
,image
,title
.
-
-
-
-
Ulteriori dettagli di configurazione dell’editor possono essere configurati utilizzando una
config
nodo contenente configurazioni e unplugin
per contenere i dettagli necessari della configurazione del plug-in.Di seguito è riportato un esempio di definizione delle proporzioni per il plug-in di ritaglio immagine del componente immagine. A causa del potenziale delle dimensioni limitate dello schermo, le proporzioni del ritaglio sono state spostate nell’editor a schermo intero e possono essere visualizzate solo lì.
code language-xml <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>
note caution CAUTION I rapporti di ritaglio AEM, fissati ratio
proprietà, sono definiti come altezza/larghezza. Ciò differisce dalla definizione tradizionale di larghezza/altezza e viene fatto per ragioni di compatibilità con le versioni precedenti. Gli utenti che creano i file non noteranno alcuna differenza, purché sia stata definita laname
chiaramente, poiché questo è ciò che viene visualizzato nell’interfaccia utente.
Creazione di un nuovo editor locale creating-a-new-in-place-editor
Per implementare un nuovo editor locale (nella libreria client):
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
-
Implementare:
setUp
tearDown
-
Registra l’editor (include il costruttore):
editor.register
-
Fornisci la connessione tra l’editor e ogni tipo di risorsa (come nel componente) che può utilizzarlo.
Esempio di codice per la creazione di un nuovo editor locale code-sample-for-creating-a-new-in-place-editor
aem-authoring-extension-inplace-editor
è un pacchetto di esempio che mostra come creare un editor locale in AEM.
CODICE SU GITHUB
Puoi trovare il codice di questa pagina su GitHub
- Apri il progetto aem-authoring-extension-inplace-editor su GitHub
- Scarica il progetto come un file ZIP
Configurazione di più editor locali configuring-multiple-in-place-editors
È 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. Consulta la Configurazione di più editor locali per ulteriori informazioni.
Aggiungi un'azione Nuova pagina add-a-new-page-action
Per aggiungere una nuova azione di pagina alla barra degli strumenti della pagina, ad esempio, Torna a Sites (console).
Esempio di codice code-sample-3
aem-authoring-extension-header-backtosites
è un pacchetto di esempio che mostra come creare un’azione personalizzata della barra dell’intestazione per tornare alla console Sites.
CODICE SU GITHUB
Puoi trovare il codice di questa pagina su GitHub
- Apri il progetto aem-authoring-extension-header-backtosites su GitHub
- Scarica il progetto come un file ZIP
Personalizzazione del flusso di lavoro Richiesta attivazione customizing-the-request-for-activation-workflow
Il flusso di lavoro preconfigurato, Richiesta di attivazione:
-
Appare automaticamente nel menu appropriato quando un autore di contenuti non ha i diritti di replica appropriati, ma ha iscrizione a DAM-Users e Authors.
-
In caso contrario, non viene visualizzato nulla, poiché i diritti di replica sono stati rimossi.
Per avere un comportamento personalizzato su tale attivazione, puoi sovrapporre il Richiesta di attivazione workflow:
-
In entrata
/apps
sovrapporre Sites procedura guidata:/libs/wcm/core/content/common/managepublicationwizard
note note NOTE Questo stesso sovrascriverà l’istanza comune di: /libs/cq/gui/content/common/managepublicationwizard
-
Aggiornare il modello di flusso di lavoro e configurazioni/script correlati, in base alle esigenze.
-
Rimuovi il diritto al
replicate
azione da tutti gli utenti appropriati per tutte le pagine rilevanti; affinché questo flusso di lavoro venga attivato come azione predefinita quando uno qualsiasi degli utenti tenta di pubblicare (o replicare) una pagina.