Personalização da criação de página customizing-page-authoring

CAUTION
Este documento descreve como personalizar a criação de página na interface moderna e habilitada para toque, e não se aplica à interface clássica.

O Adobe Experience Manager (AEM) fornece vários mecanismos para permitir personalizar a funcionalidade de criação de página (e o consoles) da sua instância de criação.

  • Clientlibs

    As clientlibs permitem estender a implementação padrão para obter uma nova funcionalidade, além de reutilizar as funções, os objetos e os métodos padrão. Ao personalizar, você pode criar sua própria clientlib em /apps. A nova clientlib deve:

    • depende da clientlib de criação cq.authoring.editor.sites.page
    • fazer parte dos procedimentos cq.authoring.editor.sites.page.hook categoria
  • Sobreposições

    As sobreposições são baseadas nas definições do nó e permitem sobrepor a funcionalidade padrão (em /libs) com sua própria funcionalidade personalizada (no /apps). Ao criar uma sobreposição, uma cópia 1:1 do original não é necessária, pois a fusão de recursos do sling permite a herança.

NOTE
Para obter mais informações, consulte Conjunto de documentação JS.

Eles podem ser usados de várias maneiras para estender a funcionalidade de criação de página na instância do AEM. Uma seleção é abordada abaixo (em um nível alto).

NOTE
Para obter mais informações, consulte o seguinte:
CAUTION
Não alterar qualquer item no /libs caminho.
O motivo é porque o conteúdo de /libs for substituído, na próxima vez que você atualizar sua instância (e poderá ser substituído ao aplicar um hotfix ou pacote de recursos).
O método recomendado para configuração e outras alterações é:
  1. Recrie o item necessário (ou seja, como ele existe em /libs) em /apps
  2. Fazer alterações em /apps

Adicionar nova camada (modo) add-new-layer-mode

Quando você está editando uma página, há vários modos disponíveis. Esses modos são implementados usando camadas. Eles permitem acesso a diferentes tipos de funcionalidade para o mesmo conteúdo de página. As camadas padrão são: editar, visualizar, anotar, desenvolvedor e direcionamento.

Exemplo de camada: status da Live Copy layer-example-live-copy-status

Uma instância AEM padrão fornece a camada MSM. Isso acessa dados relacionados ao gerenciamento multisite e o realça na camada.

Para vê-lo em ação, você pode editar qualquer Cópia de idioma do We.Retail (ou qualquer outra página de live copy) e selecione a Status da Live Copy modo.

Você pode encontrar a definição da camada MSM (para referência) em:

/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js

Amostra de código code-sample

Este é um exemplo de pacote que mostra como criar uma camada (modo), que é uma nova camada para a visualização do MSM.

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Adicionar nova categoria de seleção ao navegador de ativos add-new-selection-category-to-asset-browser

O navegador de ativos mostra ativos de vários tipos/categorias (por exemplo, imagens e documentos). Os ativos também podem ser filtrados por essas categorias de ativos.

Amostra de código code-sample-1

aem-authoring-extension-assetfinder-flickr é um exemplo de pacote que mostra como adicionar um grupo ao localizador de ativos. Este exemplo se conecta a Flickrfluxo público do e os mostra no painel lateral.

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Filtrar recursos filtering-resources

Ao criar páginas, o usuário geralmente deve selecionar entre os recursos (por exemplo, páginas, componentes e ativos). Isso pode tomar a forma de uma lista, por exemplo, da qual o autor deve escolher um item.

Para manter a lista em um tamanho razoável e também relevante para o caso de uso, um filtro pode ser implementado no formato de um predicado personalizado. Por exemplo, se a variável pathbrowser Granite for usado para permitir que o usuário selecione o caminho para um recurso específico, os caminhos apresentados poderão ser filtrados da seguinte maneira:

Para obter mais detalhes sobre como criar um predicado personalizado, consulte este artigo.

NOTE
Implementar um predicado personalizado implementando o com.day.cq.commons.predicate.AbstractNodePredicate A interface do também funciona na interface clássica.
Consulte este artigo da knowledge base para obter um exemplo de implementação de um predicado personalizado na interface clássica.

Adicionar nova ação a uma barra de ferramentas do componente add-new-action-to-a-component-toolbar

Cada componente (geralmente) tem uma barra de ferramentas que fornece acesso a uma variedade de ações que podem ser executadas nesse componente.

Amostra de código code-sample-2

aem-authoring-extension-toolbar-screenshot é um pacote de amostra que mostra como criar uma ação personalizada da barra de ferramentas para renderizar componentes.

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Adicionar novo editor no local add-new-in-place-editor

Editor padrão no local standard-in-place-editor

Em uma instalação padrão do AEM:

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

    Mantém as definições dos vários editores disponíveis.

  2. Há uma conexão entre o editor e cada tipo de recurso (como no componente ) que pode usá-lo:

    • cq:inplaceEditing

      por exemplo:

      • /libs/foundation/components/text/cq:editConfig

      • /libs/foundation/components/image/cq:editConfig

        • propriedade: editorType

          Define o tipo de editor em linha usado quando a edição no local é acionada para esse componente; por exemplo, text, textimage, image, title.

  3. Detalhes adicionais de configuração do editor podem ser configurados usando um config nó contendo configurações e um plugin para conter os detalhes necessários da configuração do plug-in.

    Veja a seguir um exemplo de definição de proporções de aspecto para o plug-in de recorte de imagem do componente de imagem. Devido ao potencial de tamanho limitado da tela, as taxas de proporções de corte foram movidas para o editor de tela cheia e só podem ser vistas 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
    Rácio de colheita de AEM, tal como estabelecido pelo ratio são definidos como altura/largura. Isso difere da definição convencional de largura/altura e é feita por motivos de compatibilidade legal. Os usuários de criação não estarão cientes de qualquer diferença desde que você defina o name é exibida claramente, pois é o que é exibido na interface do usuário.

Criação de um novo editor no local creating-a-new-in-place-editor

Para implementar um novo editor no local (na clientlib):

NOTE
Por exemplo, consulte:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
  1. Implementar:

    • setUp
    • tearDown
  2. Registre o editor (inclui o construtor):

    • editor.register
  3. Forneça a conexão entre o editor e cada tipo de recurso (como no componente) que pode usá-lo.

Amostra de código para criar um novo editor no local code-sample-for-creating-a-new-in-place-editor

aem-authoring-extension-inplace-editor é um pacote de amostra que mostra como criar um editor no local no AEM.

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Configuração de vários editores no local configuring-multiple-in-place-editors

É possível configurar um componente para que ele tenha vários editores no local. Quando vários editores no local são configurados, é possível selecionar o conteúdo apropriado e abrir o editor apropriado. Consulte a Configuração de vários editores no local para obter mais informações.

Adicionar uma nova ação de página add-a-new-page-action

Para adicionar uma nova ação de página à barra de ferramentas da página, por exemplo, uma Voltar ao Sites (console) ação.

Amostra de código code-sample-3

aem-authoring-extension-header-backtosites é um pacote de amostra que mostra como criar uma ação de barra de cabeçalho personalizada para voltar ao console Sites.

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Personalizar a solicitação para o fluxo de trabalho de ativação customizing-the-request-for-activation-workflow

O workflow predefinido, Solicitação para ativação:

  • Será exibido automaticamente no menu apropriado quando um autor de conteúdo não tem os direitos de replicação apropriados, mas tem associação de usuários e autores do DAM.

  • Caso contrário, nada será exibido, pois os direitos de replicação foram removidos.

Para personalizar o comportamento nessa ativação, é possível sobrepor o Solicitação para ativação workflow:

  1. Entrada /apps sobrepor o Sites assistente:

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

    note note
    NOTE
    Ele mesmo substitui a instância comum de:
    /libs/cq/gui/content/common/managepublicationwizard
  2. Atualize o modelo de fluxo de trabalho e configurações/scripts relacionados, conforme necessário.

  3. Remova a direita para a replicate ação de todos os usuários apropriados para todas as páginas relevantes; para que esse fluxo de trabalho seja acionado como uma ação padrão quando qualquer um dos usuários tentar publicar (ou replicar) uma página.

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