Fragmentos de conteúdo visual visual-content-fragments

Os fragmentos de conteúdo contêm conteúdo estruturado destinado à saída JSON, sem design ou layout. A adição de modelos do HTML permite criar experiências visuais totalmente decoradas com conteúdo estruturado no formato HTML:

  • A visualização de um fragmento de conteúdo ajuda na garantia da qualidade do conteúdo, permitindo que as partes interessadas revisem o conteúdo antes que ele seja usado, sem precisar abrir o Editor de fragmentos de conteúdo

  • A entrega de um fragmento visual auxilia a entrega omnicanal, para reutilização de experiências modulares em canais como Web, email ou aplicativos móveis.

A saída renderizada de um Fragmento de conteúdo do AEM que usa o layout e o design de um modelo anexado do HTML é chamada de Fragmento de conteúdo visual.

Os modelos do HTML contêm informações de layout e design, permitindo a visualização dos Fragmentos de conteúdo. A conexão entre um modelo e um Fragmento de conteúdo é estabelecida usando a sintaxe Handlebars para mapear tags do HTML para tipos de dados (campos) definidos no Modelo de fragmento de conteúdo. Essa definição permite que o conteúdo criado nos respectivos campos do Editor de fragmento de conteúdo seja exibido nos locais apropriados no modelo.

Você ou sua equipe de desenvolvimento pode criar e personalizar seus próprios modelos do HTML e, em seguida, carregar e anexar um ou mais aos Modelos de Fragmento de Conteúdo para que os fragmentos correspondentes possam ser renderizados em experiências, visualizados e publicados e entregues conforme necessário.

NOTE
Um Modelo Genérico está sempre disponível no AEM como padrão e está associado a cada modelo. Esse modelo permite que pares de chave/valor em conteúdo estruturado sejam exibidos em um formato limpo, em estilo de tabela, para oferecer suporte a casos de uso de QA (Quality Assurance, qualidade do conteúdo).
NOTE
Fragmentos de conteúdo visuais (Fragmentos de conteúdo com modelos do HTML) não são compatíveis atualmente com campos compostos.

Criar um modelo create-a-template

Os modelos do HTML desenvolvidos com o Handlebars permitem visualizar e entregar fragmentos de conteúdo visual no formato HTML. A sintaxe Handlebars.js define espaços reservados para o conteúdo criado em campos de Fragmento de conteúdo.

Para obter detalhes sobre como desenvolver seus próprios modelos, consulte Fragmentos de conteúdo visual - Modelos.

Fazer upload e atribuir seu modelo upload-and-assign-your-template

Um modelo é associado a um Modelo de fragmento de conteúdo para que possa ser usado com qualquer Fragmento de conteúdo criado a partir desse modelo.

Para fazer upload do novo modelo do HTML:

  1. No console de Fragmentos de conteúdo, abra a guia para Modelos de fragmento de conteúdo.

  2. Navegue até o local do modelo do fragmento.

  3. Selecione o ícone de informações (i) para o modelo necessário:

    Console de Fragmentos de Conteúdo - Ícone de informações

    O painel direito será exibido.

  4. Role para baixo para mostrar Modelos do HTML, o Modelo Genérico já está listado, pois é o padrão:

    Visualizar fragmento com modelo genérico do HTML

  5. Selecione + para carregar seu modelo de um arquivo do HTML (.html). Uma caixa de diálogo permitirá Procurar seu sistema de arquivos local e selecionar seu arquivo de modelo.

  6. Depois de carregadas, duas exibições do modelo são mostradas para você revisar:

    • à esquerda: uma renderização do template sem conteúdo
    • à direita: o código do HTML, que também pode ser editado aqui antes de importar para o AEM

    Analisar o modelo do HTML no carregamento

  7. Selecione Avançar para continuar.

  8. Digite um Nome do modelo para usar no AEM.

  9. Confirme com Criar Modelo.

  10. O modelo será criado no AEM e listado em Modelos do HTML, nas propriedades dos Modelos de fragmento de conteúdo.
    Após carregado, ele pode ser usado para pré-visualização e publicação de fragmentos. Você também pode Baixar ou Excluir o modelo.

Pré-visualizar e publicar seu fragmento com um modelo preview-and-publish-your-fragment-with-a-template

Para visualizar e publicar seu fragmento de conteúdo visual usando um modelo:

IMPORTANT
Para publicar o fragmento de conteúdo, deve ter sido publicado.
NOTE
Como o Modelo genérico está sempre disponível, você pode visualizar seu fragmento sem carregar modelos personalizados.
  1. No console de Fragmentos de conteúdo, navegue até o local do fragmento.

  2. Ou:

    • selecionar o fragmento no console
    • abrir o fragmento no editor
  3. Selecione Visualizar na barra de ferramentas superior de:

    • o console de Fragmentos de conteúdo
    • o editor, onde você pode selecionar Modelo

Em ambos os casos, uma nova janela modal será aberta.

  1. Se nenhum modelo personalizado estiver disponível, o AEM usará o Modelo genérico para exibir seu fragmento. O Modelo Genérico:

    • exibe os campos do fragmento no formato de tabela, nome e conteúdo
    • mostra o conteúdo totalmente hidratado dos fragmentos referenciados na mesma visualização
  2. Se os modelos personalizados estiverem disponíveis, você poderá selecionar o modelo que deseja usar (incluindo o Modelo Genérico).

  3. Se o fragmento de conteúdo já tiver sido publicado, você poderá publicar seu fragmento de conteúdo visual:

    • a URL de Visualização com Publicar VCF para visualização
    • a URL de Publicação com Publicar VCF na entrega
  4. Você também pode exibir e copiar sua URL de Visualização e URL de Publicação.

Por exemplo:

Visualizar fragmento com modelo do HTML

Editar seu modelo edit-your-template

Para modelos de fragmento de conteúdo, é possível editar o modelo no console:

  1. Navegue até a seção Modelos de fragmento de conteúdo do console de Fragmentos de conteúdo.

  2. Selecione seu modelo.

  3. Use o ícone de informações para abrir o painel direito.

  4. Na seção Modelos de HTML do painel direito, use a opção Editar para o modelo:

    Editar Modelo do HTML

  5. Na caixa de diálogo fornecida, faça as atualizações.

  6. Selecione Próximo.

  7. O AEM apresenta uma caixa de diálogo e avisa que você está atualizando um modelo existente e que as alterações substituirão a versão atual.

  8. Confirme suas alterações com Atualizar Modelo.

Entregar seu fragmento de conteúdo visual deliver-your-visual-content-fragment

O fragmento de conteúdo visual pode ser entregue a vários públicos-alvo no formato HTML.

Entregar ao navegador deliver-to-the-browser

Copie a URL de visualização ou a URL de publicação. Acesse isso diretamente do navegador para ver o fragmento de conteúdo visual.

Entregar à Edge Delivery Services deliver-to-edge-delivery-services

Você pode fornecer o fragmento visual em uma página do Edge Delivery Service (EDS).

  1. Navegue até o Projeto EDS.
  2. Adicione ou acesse um Bloco do tipo incorporado.
  3. Cole a URL de Publicação no bloco.
  4. Publique sua página de EDS. A representação do HTML do fragmento é vista.
NOTE
Para obter detalhes completos, consulte Integração com o Edge Delivery Services (Bloco de Inserção)

Entregar em uma página do AEM deliver-to-an-AEM-page

Você pode entregar seu fragmento de conteúdo visual em uma página do AEM usando o componente principal: fragmento de conteúdo.

Ao configurar um **componente do Fragmento do conteúdo** na sua página:

  1. Especifique o Fragmento do conteúdo necessário.

  2. Selecione Visualização de Fragmento de Conteúdo.

  3. Selecione o Modelo de visualização necessário na lista suspensa.

    Configurar o componente Fragmento de Conteúdo para um fragmento visual

  4. O fragmento visual será mostrado na página.

NOTE
Para obter detalhes completos, consulte Integração - AEM Sites com Componentes principais

Baixar seu modelo download-your-template

Para baixar o modelo do HTML no AEM:

  1. No console de Fragmentos de conteúdo, abra a guia para Modelos de fragmento de conteúdo.

  2. Navegue até o local do modelo do fragmento.

  3. Selecione o ícone de informações (i) para o modelo necessário:

    Console de Fragmentos de Conteúdo - Ícone de informações

    O painel direito será exibido.

  4. Role para baixo para mostrar Modelos do HTML.

  5. Selecione a elipse do modelo que deseja baixar.

  6. Selecione Baixar.

  7. Especifique o nome e o local do arquivo.

  8. Confirme com Salvar.

Excluir seu modelo delete-your-template

Para excluir seu novo modelo do HTML (do AEM):

  1. No console de Fragmentos de conteúdo, abra a guia para Modelos de fragmento de conteúdo.

  2. Navegue até o local do modelo do fragmento.

  3. Selecione o ícone de informações (i) para o modelo necessário:

    Console de Fragmentos de Conteúdo - Ícone de informações

    O painel direito será exibido.

  4. Role para baixo para mostrar Modelos do HTML.

  5. Selecione a elipse do modelo que deseja baixar.

  6. Selecione Excluir.

  7. Na caixa de diálogo a seguir, confirme a ação com Excluir.

recommendation-more-help
experience-manager-cloud-service-help-main-toc