DocumentazioneAEM 6.4Guida allo sviluppo

Personalizzazione dell’authoring delle pagine customizing-page-authoring

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Developer
CAUTION
AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.
CAUTION
Questo documento descrive come personalizzare l’authoring delle pagine nell’interfaccia touch e moderna e non si applica all’interfaccia classica.

AEM offre vari meccanismi per personalizzare la funzionalità di authoring delle pagine (e la 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 in /apps. La nuova clientlib deve:

    • dipende da authoring clientlib cq.authoring.editor.sites.page
    • far parte del cq.authoring.editor.sites.page.hook categoria

  • 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 la fusione di risorse sling consente l’ereditarietà.

NOTE
Per ulteriori informazioni, consulta Set di documentazione JS.

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).

NOTE
Per ulteriori informazioni, consulta:
Questo argomento è trattato anche nella AEM gemme sessione - Personalizzazione dell'interfaccia utente per AEM 6.0.
CAUTION
You deve non modificare nulla nel /libs percorso.
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 feature pack).
Il metodo consigliato per la configurazione e altre modifiche è:
  1. Ricrea l'elemento richiesto (ovvero così come esiste in /libs) /apps
  2. Apporta modifiche a /apps

Aggiungi nuovo livello (modalità) add-new-layer-mode

Quando modifichi una pagina, sono disponibili varie modalità disponibile. 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.

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 visualizzarlo in azione è possibile modificare qualsiasi Copia della lingua di 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 nuovo livello (modalità), che è un nuovo livello per la visualizzazione MSM.

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

Aggiungi nuova categoria di selezione al browser risorse add-new-selection-category-to-asset-browser

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.

Esempio di codice code-sample-1

aem-authoring-extension-assetfinder-flickr è un pacchetto di esempio che mostra come aggiungere un nuovo gruppo a Asset Finder. Questo esempio si collega a FlickrIl flusso pubblico e lo mostra nel pannello laterale.

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

Risorse di filtro filtering-resources

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 pathbrowser Granite viene utilizzato per consentire all’utente di selezionare il percorso di una particolare risorsa. I percorsi presentati possono essere filtrati nel modo seguente:

Per ulteriori dettagli sulla creazione di un predicato personalizzato, consulta articolo.

NOTE
Implementazione di un predicato personalizzato tramite implementazione com.day.cq.commons.predicate.AbstractNodePredicate L’interfaccia di funziona anche nell’interfaccia classica.
Vedi questo articolo della knowledge base per un esempio di implementazione di un predicato personalizzato nell’interfaccia classica.

Aggiungere una nuova azione a una barra degli strumenti di un componente add-new-action-to-a-component-toolbar

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.

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

Aggiungi nuovo editor locale add-new-in-place-editor

Editor locale standard standard-in-place-editor

In un’installazione standard di AEM:

  1. /libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

    Contiene le definizioni dei vari editor disponibili.

  2. 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.

  3. Ulteriori dettagli di configurazione dell’editor possono essere configurati utilizzando un config nodo contenente configurazioni e ulteriori plugin nodo 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.

    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
    In AEM rapporti di ritaglio, come impostato da ratio sono definite come altezza/larghezza. Questo differisce dalla definizione tradizionale di larghezza/altezza ed è eseguito per motivi di compatibilità legacy. Gli utenti che creano contenuti non noteranno alcuna differenza, a condizione che tu definisca il name , poiché questo è ciò che viene visualizzato nell'interfaccia utente.

Creazione di un nuovo editor diretto creating-a-new-in-place-editor

Per implementare un nuovo editor locale (all’interno della clientlib):

NOTE
Ad esempio, vedi:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

  1. Implementa:

    • setUp
    • tearDown

  2. Registra l'editor (include il costruttore):

    • editor.register

  3. Specifica 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 nuovo editor locale in AEM.

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

Configurazione di più editor in-place 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 sezione Configurazione di più editor in-place documentazione per ulteriori informazioni.

Aggiungere una nuova azione pagina add-a-new-page-action

Per aggiungere una nuova azione pagina alla barra degli strumenti della pagina, ad esempio un 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 di barra di intestazione personalizzata per tornare alla console Sites .

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

Personalizzazione del flusso di lavoro di richiesta di attivazione customizing-the-request-for-activation-workflow

Il flusso di lavoro preconfigurato, Richiesta di attivazione, viene attivato automaticamente quando un autore di contenuti non dispone dei diritti di replica appropriati.

Per avere un comportamento personalizzato su tale attivazione è possibile sovrapporre il Richiesta di attivazione flusso di lavoro:

  1. In /apps sovrapporre Sites procedura guidata:

    /libs/wcm/core/content/common/managepublicationwizard

    note note
    NOTE
    Questo sostituisce l’istanza comune di:
    /libs/cq/gui/content/common/managepublicationwizard

  2. Aggiorna modello di flusso di lavoro e configurazioni/script correlati, a seconda delle necessità.

  3. Rimuovi il diritto alla 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.

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e