Personalização da criação de página customizing-page-authoring
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
- depende da clientlib de criação
-
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.
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).
- Uso e criação clientlibs.
- Uso e criação sobreposições.
- Granite
- Estrutura da interface habilitada para toque por AEM para obter detalhes das áreas estruturais usadas para a criação de páginas.
/libs
caminho./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).- Recrie o item necessário (ou seja, como ele existe em
/libs
) em/apps
- 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
- Abrir o projeto aem-authoring-new-layer-mode no GitHub
- Baixar o projeto como um arquivo ZIP
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
- Abra o projeto aem-authoring-extension-assetfinder-flickr no GitHub
- Baixar o projeto como um arquivo ZIP
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:
- Implementar o predicado personalizado implementando o
com.day.cq.commons.predicate.AbstractNodePredicate
interface. - Especifique um nome para o predicado e consulte esse nome ao usar o
pathbrowser
.
Para obter mais detalhes sobre como criar um predicado personalizado, consulte este artigo.
com.day.cq.commons.predicate.AbstractNodePredicate
A interface do também funciona 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
- Abra o projeto aem-authoring-extension-toolbar-screenshot no GitHub
- Baixar o projeto como um arquivo ZIP
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:
-
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
Mantém as definições dos vários editores disponíveis.
-
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
.
-
-
-
-
Detalhes adicionais de configuração do editor podem ser configurados usando um
config
nó contendo configurações e umplugin
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 oname
é 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):
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
-
Implementar:
setUp
tearDown
-
Registre o editor (inclui o construtor):
editor.register
-
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
- Abrir o projeto aem-authoring-extension-inplace-editor no GitHub
- Baixar o projeto como um arquivo ZIP
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
- Abra o projeto aem-authoring-extension-header-backtosites no GitHub
- Baixar o projeto como um arquivo ZIP
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:
-
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
-
Atualize o modelo de fluxo de trabalho e configurações/scripts relacionados, conforme necessário.
-
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.