DocumentazioneAEM 6.5Guida utente

Personalizzazione dell’authoring delle pagine customizing-page-authoring

Last update: Thu Aug 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Sviluppatore
CAUTION
Questo documento descrive come personalizzare l’authoring delle pagine nella moderna interfaccia touch e non si applica all’interfaccia classica.

Adobe Experience Manager (AEM) offre diversi meccanismi per 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 le funzioni, gli oggetti e i metodi standard. Durante la personalizzazione, puoi creare la tua libreria client in /apps.. La nuova libreria client deve:

    • dipende dalla libreria client di authoring cq.authoring.editor.sites.page
    • fai parte della categoria cq.authoring.editor.sites.page.hook appropriata

  • Sovrapposizioni

    Le sovrapposizioni si basano sulle definizioni dei nodi e consentono di sovrapporre la funzionalità standard (in /libs) con la funzionalità personalizzata (in /apps). Durante la creazione di una sovrapposizione, non è necessaria una copia 1:1 dell'originale, in quanto la sling resource merger 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 AEM. Di seguito è riportata una selezione (ad alto livello).

NOTE
Per ulteriori informazioni, consulta:
CAUTION
Non modificare nulla nel percorso /libs.
Il motivo è che 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, poiché esiste in /libs) in /apps
  2. Apporta le modifiche in /apps

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

Quando modifichi una pagina, sono disponibili varie modalità. 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 alla gestione multisito e di evidenziarli nel livello.

Per vederla in azione, puoi modificare qualsiasi copia per lingua We.Retail pagina (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

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

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 al flusso pubblico di Flickr e lo mostra nel pannello laterale.

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

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 il componente 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, vedere Implementazione di un valutatore del predicato personalizzato per Query Builder.

NOTE
L'implementazione di un predicato personalizzato tramite l'implementazione dell'interfaccia com.day.cq.commons.predicate.AbstractNodePredicate funziona anche nell'interfaccia classica.
Consulta questo articolo della knowledge base per un esempio di implementazione di un predicato personalizzato 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 della barra degli strumenti personalizzata 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ò 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.

  3. Ulteriori dettagli di configurazione dell'editor possono essere configurati utilizzando un nodo config contenente configurazioni e un 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 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, impostati dalla proprietà ratio, 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, a condizione che tu definisca chiaramente la proprietà name, in quanto 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):

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

  1. Implementare:

    • setUp
    • tearDown

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

    • editor.register

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

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. Per ulteriori informazioni, consulta la documentazione Configurazione di più editor locali.

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 di intestazione per tornare alla console Sites.

CODICE SU GITHUB

Puoi trovare il codice di questa pagina su GitHub

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

Flusso di lavoro predefinito, Richiesta di attivazione:

  • Verrà visualizzato automaticamente nel menu appropriato quando un autore di contenuti non dispone dei diritti di replica appropriati, ma non dispone di appartenenze a DAM-Users e Author.

  • In caso contrario, non viene visualizzato nulla, poiché i diritti di replica sono stati rimossi.

Per personalizzare il comportamento di questa attivazione, puoi sovrapporre il flusso di lavoro Richiesta di attivazione:

  1. In /apps sovrapporre la procedura guidata Sites:

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

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

  2. Aggiornare il modello di flusso di lavoro e le configurazioni/script correlati in base alle esigenze.

  3. Rimuovere il diritto all'azione replicate da tutti gli utenti appropriati per tutte le pagine rilevanti; per attivare questo flusso di lavoro come azione predefinita quando uno degli utenti tenta di pubblicare (o replicare) una pagina.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2