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:
cq.authoring.editor.sites.page
cq.authoring.editor.sites.page.hook
categoriaSobreposiçõ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.
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).
Para obter mais informações, consulte o seguinte:
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 é:
/libs
) em /apps
/apps
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.
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
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
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.
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
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:
com.day.cq.commons.predicate.AbstractNodePredicate
interface.pathbrowser
.Para obter mais detalhes sobre como criar um predicado personalizado, consulte este artigo.
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.
Cada componente (geralmente) tem uma barra de ferramentas que fornece acesso a uma variedade de ações que podem ser executadas nesse componente.
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
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 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á.
<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>
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.
Para implementar um novo editor no local (na clientlib):
Por exemplo, consulte:
/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.
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
É 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.
Para adicionar uma nova ação de página à barra de ferramentas da página, por exemplo, uma Voltar ao Sites (console) ação.
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
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
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.